HB
/
yudao-web
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化企业列表页面样式，调整搜索表单布局及逻辑

master
爱~海~爱海爱海~右 1 month ago
parent
d461283f5b
commit
47ad7f6225
3 changed files with 162 additions and 213 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/api/system/taglibrary/index.ts
  2. 2
      src/views/enterpriseinspections/index.vue
  3. 368
      src/views/enterprises/index.vue

5
src/api/system/taglibrary/index.ts
Unescape View File

@ -43,9 +43,8 @@ export const TagLibraryApi = {
return await request.delete({ url: `/system/tag-library/delete?id=` + id })
},
// 删除企业标签
tagLibraryList: async (codeList: string) => {
return await request.get({ url: `/system/tag-library/list?` + codeList })
tagLibraryList: async (codeList) => {
return await request.get({ url: `/system/tag-library/list`, params: { codeList } })
},
// 导出企业标签 Excel

2
src/views/enterpriseinspections/index.vue
Unescape View File

@ -39,7 +39,7 @@
/>
</el-form-item> -->
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="handleQuery" type="primary" plain><Icon icon="ep:search" class="mr-5px" /> 查询</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<!-- <el-button @click="openChangeForm"><Icon icon="ep:refresh" class="mr-5px" /> 任务转发</el-button> -->
<el-button

368
src/views/enterprises/index.vue
Unescape View File

@ -1,167 +1,147 @@
<template>
<ContentWrap>
<section class="flex flex-col gap-20px">
<!-- 搜索工作栏 -->
<el-form
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="108px"
size="large"
class="formClass"
>
<el-form-item label="" prop="enterprisesName">
<el-input
v-model="queryParams.enterprisesName"
placeholder="请输入企业名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="" prop="type">
<el-select
v-model="queryParams.type"
placeholder="请选择企业类型"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
<!-- 搜索工作栏 -->
<el-form
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="0"
size="large"
class="formClass"
>
<el-form-item label="" prop="enterprisesName">
<el-input
v-model="queryParams.enterprisesName"
placeholder="请输入企业名称"
clearable
@keyup.enter="handleQuery"
/>
</el-select>
</el-form-item>
<el-form-item label="" prop="region">
<el-select
v-model="queryParams.region"
placeholder="请选择企业所属区域"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_AREA)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
</el-form-item>
<el-form-item label="" prop="region">
<el-select v-model="queryParams.region" placeholder="请选择所属区域" clearable>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_AREA)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="" prop="type">
<el-select
v-model="queryParams.type"
placeholder="请选择行业类型"
clearable
multiple
collapse-tags
collapse-tags-tooltip
>
<el-option
v-for="dict in typeList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="" prop="registrationNumber">
<el-input
v-model="queryParams.registrationNumber"
placeholder="请选择执法人员"
clearable
@keyup.enter="handleQuery"
/>
</el-select>
</el-form-item>
<el-form-item label="" prop="registrationNumber">
<el-input
v-model="queryParams.registrationNumber"
placeholder="请输入企业注册号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="" prop="establishmentDate">
<el-date-picker
v-model="queryParams.establishmentDate"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-220px"
/>
</el-form-item>
<el-form-item label="" prop="enterprisesStatus">
<el-select
v-model="queryParams.enterprisesStatus"
placeholder="请选择企业状态"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
</el-form-item>
<el-form-item label="" prop="establishmentDate">
<el-date-picker
v-model="queryParams.establishmentDate"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
format="YYYY年M月D日"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
/>
</el-select>
</el-form-item>
<el-form-item class="btnClass">
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 查詢</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button type="primary" plain v-hasPermi="['system:enterprise:create']"
@click="push({ path: 'update' })
">
<Icon icon="ep:circle-plus" class="mr-5px" @click="
push({
path: 'update',
query: {
id: scope.row.id
}
})
" /> 新增
</el-button>
<el-button type="success" plain @click="handleExport" :loading="exportLoading" v-hasPermi="['system:enterprise:export']">
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :cell-style="{'text-align': 'left'}">
<el-table-column label="企业名称" align="left" fixed="left" prop="enterprisesName" width="200" />
<el-table-column label="专管员" align="left" prop="inviterName" fixed="left" />
<el-table-column label="企业所属区域" align="left" prop="region" fixed="left">
<template #default="scope">
<dict-tag :type="DICT_TYPE.ENTERPRISES_AREA" :value="scope.row.region" />
</template>
</el-table-column>
</el-form-item>
<el-table-column label="企业地址" align="left" prop="address" />
<el-table-column label="负责人姓名" align="left" prop="contactName" />
<el-table-column
label="联系电话"
align="center"
prop="environmentalContactPhone"
/>
<el-table-column label="企业注册号" align="left" prop="registrationNumber" />
<el-table-column label="企业图文介绍" align="left" prop="introduction" />
<!-- <el-table-column label="企业成立时间" align="center" prop="establishmentDate" />
<el-table-column label="企业经纬度" align="center" prop="gpsLocation" />-->
<el-table-column
label="创建时间"
align="left"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="left" min-width="120px">
<template #default="scope">
<el-form-item class="btnClass">
<el-button @click="handleQuery" type="primary" plain>
<Icon icon="ep:search" class="mr-5px" /> 查询
</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</el-form-item>
<el-form-item>
<el-button
link
type="primary"
@click="
push({
path: 'update',
query: {
id: scope.row.id
}
})
"
v-hasPermi="['system:enterprise:update']"
v-hasPermi="['system:enterprise:create']"
@click="push({ path: 'update' })"
>
详情
<Icon
icon="ep:circle-plus"
class="mr-5px"
@click="
push({
path: 'update'
})
"
/>
新增
</el-button>
<el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['system:enterprise:delete']"> 删除 </el-button>
<!--
<el-button link type="danger" @click="detailformRef(scope.row.id)"> 详情 </el-button> -->
<!-- <router-link :to="'/enterprises/detailEnterprises/' + scope.row.type">-->
<!-- <el-button link type="primary">详情</el-button>-->
<!-- </router-link>-->
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
<el-button
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['system:enterprise:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="企业名称" fixed="left" prop="enterprisesName" />
<el-table-column label="所属区域" width="200">
<template #default="scope">
{{ getDictLabel(DICT_TYPE.ENTERPRISES_AREA, scope.row.region) }}
</template>
</el-table-column>
<el-table-column label="行业类别" width="300">
<template #default="scope">
{{ getDictLabel(DICT_TYPE.ENTERPRISES_TYPE, scope.row.type) }}
</template>
</el-table-column>
<el-table-column label="执法人员" width="200">
<template #default="scope">
{{`${scope.row.inviterName} | ${scope.row.inviterName}`}}
</template>
</el-table-column>
<el-table-column
label="入驻时间"
prop="createTime"
:formatter="dateFormatter"
width="240"
/>
<el-table-column label="操作选项" align="center" width="100px">
<template #default="scope">
<el-button
link
type="primary"
@click="
push({
path: 'update',
query: {
id: scope.row.id
}
})
"
v-hasPermi="['system:enterprise:update']"
>
详情
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
:total="total"
:show-page-size="false"
layout="total, prev, pager, next"
@ -170,25 +150,22 @@
@change="getList"
class="ml-auto"
/>
</section>
</section>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
</template>
<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { getStrDictOptions, DICT_TYPE, getDictLabel } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { EnterprisesApi, EnterprisesVO } from '@/api/enterprises'
import update from './update.vue'
import { TagLibraryApi } from '@/api/system/taglibrary'
/** 企业 列表 */
defineOptions({ name: 'Enterprises' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<EnterprisesVO[]>([]) // 列表的数据
@ -202,7 +179,7 @@ const queryParams = reactive({
region: undefined,
enterprisesName: undefined,
address: undefined,
enterprisesStatus:undefined,
enterprisesStatus: undefined,
contactName: undefined,
environmentalContactPhone: undefined,
registrationNumber: undefined,
@ -212,8 +189,11 @@ const queryParams = reactive({
createTime: [],
managerDeptId: undefined
})
//行业类别
const typeList = ref([])
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const { push } = useRouter() // 路由
/** 查询列表 */
const getList = async () => {
@ -239,40 +219,6 @@ const resetQuery = () => {
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/*详情*/
const { push } = useRouter() // 路由
// const detailformRef = (id?: number) => {
// push({
// path: '/system/enterprise/get',
// query: {
// id
// }
// })
// }
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await EnterprisesApi.deleteEnterprises(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
@ -288,26 +234,30 @@ const handleExport = async () => {
}
}
const getTypList = async () => {
const res = await TagLibraryApi.tagLibraryList('hy')
typeList.value = res[0].children.map((t) => {
return {
label: t.tagName,
value: t.id
}
})
}
getTypList()
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
<style lang="css" >
:deep(.el-card__body) {
padding: 0 !important;
}
.formClass {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
align-items: center;
:deep(.el-form-item) {
margin: 0 !important;
}
.btnClass {
grid-column: span 2;
<style lang="css" scoped>
.formClass {
.el-form-item {
width: calc(100% / 4 - 15px);
&:last-child {
margin-left: auto;
width: fit-content;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save