Browse Source

优化标签库相关接口,调整表单样式和逻辑

master
parent
commit
d9289776a9
  1. 10
      src/api/system/taglibrary/index.ts
  2. 2
      src/components/ContentWrap/src/ContentWrap.vue
  3. 12
      src/components/Dialog/src/Dialog.vue
  4. 21
      src/styles/variables.scss
  5. 87
      src/views/system/taglibrary/form.vue
  6. 173
      src/views/system/taglibrary/index.vue
  7. 190
      src/views/task/create.vue

10
src/api/system/taglibrary/index.ts

@ -20,7 +20,7 @@ export const TagLibraryApi = {
// 查询企业标签分页
childrenList: async (id: number) => {
return await request.get({ url: `/system/tag-library/childrenList?id=`+id })
return await request.get({ url: `/system/tag-library/childrenList?id=` + id })
},
// 查询企业标签详情
@ -43,7 +43,7 @@ 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 })
},
@ -52,4 +52,10 @@ export const TagLibraryApi = {
exportTagLibrary: async (params) => {
return await request.download({ url: `/system/tag-library/export-excel`, params })
},
/**
*
*/
getTagList: async (params: any) => {
return await request.get({ url: `/system/tag-library/pageInfo`, params })
}
}

2
src/components/ContentWrap/src/ContentWrap.vue

@ -11,7 +11,7 @@ const prefixCls = getPrefixCls('content-wrap')
defineProps({
title: propTypes.string.def(''),
message: propTypes.string.def(''),
bodyStyle: propTypes.object.def({ padding: '10px' })
bodyStyle: propTypes.object.def({ padding: '40px' })
})
</script>

12
src/components/Dialog/src/Dialog.vue

@ -62,11 +62,9 @@ const dialogStyle = computed(() => {
<ElDialog
v-bind="getBindValue"
:close-on-click-modal="true"
:fullscreen="isFullscreen"
:width="width"
destroy-on-close
lock-scroll
draggable
class="com-dialog"
:show-close="false"
>
@ -78,14 +76,6 @@ const dialogStyle = computed(() => {
<div
class="absolute right-15px top-[50%] h-54px flex translate-y-[-50%] items-center justify-between"
>
<Icon
v-if="fullscreen"
class="is-hover mr-10px cursor-pointer"
:icon="isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'"
color="var(--el-color-info)"
hover-color="var(--el-color-primary)"
@click="toggleFull"
/>
<Icon
class="is-hover cursor-pointer"
icon="ep:close"
@ -122,7 +112,6 @@ const dialogStyle = computed(() => {
height: 54px;
padding: 0;
margin-right: 0 !important;
border-bottom: 1px solid var(--el-border-color);
}
&__body {
@ -130,7 +119,6 @@ const dialogStyle = computed(() => {
}
&__footer {
border-top: 1px solid var(--el-border-color);
}
&__headerbtn {

21
src/styles/variables.scss

@ -2,3 +2,24 @@
$namespace: v;
// el命名空间
$elNamespace: el;
.el-form--inline {
display: flex;
gap: 40px;
margin-bottom: 0;
.el-form-item {
margin-right: 0;
margin-bottom: 0;
.el-form-item__label {
width: fit-content;
}
}
}
.el-table {
border: 1px solid #ebeef5;
--el-table-header-bg-color: #f5f7fa;
.el-table__header {
color: #909399;
}
}

87
src/views/system/taglibrary/form.vue

@ -7,31 +7,16 @@
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="父标签" prop="tagName">
<el-tree-select
v-model="formData.parentId"
:data="list"
check-strictly
:render-after-expand="false"
placeholder="请选择父标签"
node-key="id"
:default-checked-keys="echoList"
:props="{
label: 'tagName'
}"
/>
<el-form-item label="父级标签" prop="tagName">
<el-select default-first-option v-model="formData.parentId" disabled>
<el-option v-for="item in list" :key="item.id" :label="item.tagName" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="标签的名称" prop="tagName">
<el-form-item label="标签名称" prop="tagName">
<el-input v-model="formData.tagName" placeholder="请输入标签的名称" />
</el-form-item>
<el-form-item label="助记码" prop="tagCode">
<el-input v-model="formData.tagCode" placeholder="助记码" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input v-model="formData.sort" placeholder="排序" />
<el-form-item label="排列顺序" prop="sort">
<el-input v-model.number="formData.sort" placeholder="请输入0~99数字" />
</el-form-item>
</el-form>
<template #footer>
@ -42,7 +27,6 @@
</template>
<script setup lang="ts">
import { TagLibraryApi, TagLibraryVO } from '@/api/system/taglibrary'
import { DICT_TYPE, getDictLabel } from '@/utils/dict'
/** 企业标签 表单 */
defineOptions({ name: 'Form' })
@ -52,29 +36,42 @@ const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) //
const dialogTitle = ref('') //
const formLoading = ref(false) // 12
const formData = ref({
const formData = ref<any>({
tagId: undefined,
tagName: undefined,
parentId: null as any,
tagLevel: undefined,
tagType: null as any,
sort: undefined,
tagCode:undefined,
tagCode: undefined,
id: null as any
})
const formRules = reactive({})
const formRules = reactive({
sort: [
{
required: true,
message: '请输入排序',
trigger: 'blur'
},
{ type: 'number', message: '请输入数字' }
],
tagName: [
{
required: true,
message: '请输入标签名称',
trigger: 'blur'
}
]
})
const formRef = ref() // Ref
const echoList = ref([])
const list = ref<any>([])
/** 打开弹窗 */
const open = async (params) => {
console.log(params)
dialogVisible.value = true
dialogTitle.value = params.id
? `修改${getDictLabel(DICT_TYPE.TAG_TYPE, params.tagType)}`
: `创建${getDictLabel(DICT_TYPE.TAG_TYPE, params.tagType)}`
dialogTitle.value = params.id ? `修改标签` : `创建标签`
resetForm()
formLoading.value = true
await levelList()
await getParent(params.parentId)
//
if (params.id) {
formData.value = await TagLibraryApi.getTagLibrary(params.id)
@ -83,15 +80,10 @@ const open = async (params) => {
}
}
formData.value.tagType = Number(params.tagType)
formData.value.parentId = Number(params.parentId)
formLoading.value = false
}
const list: any = ref([])
const levelList = async () => {
list.value = await TagLibraryApi.getTagLibraryPage(formData.value.id)
}
defineExpose({ open }) // open
/** 提交表单 */
@ -118,16 +110,21 @@ const submitForm = async () => {
}
}
const getParent = async (id) => {
const res = await TagLibraryApi.getTagLibrary(id)
list.value = [res]
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
tagId: undefined,
tagName: undefined,
parentId: null as any,
tagLevel: undefined,
tagType: null as any,
sort: undefined,
id: null as any
tagId: undefined,
tagName: undefined,
parentId: undefined,
tagLevel: undefined,
tagType: undefined,
sort: undefined,
id: undefined
}
formRef.value?.resetFields()
}

173
src/views/system/taglibrary/index.vue

@ -1,99 +1,82 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="名称" prop="tagName">
<el-input
v-model="queryParams.tagName"
placeholder="请输入标签的名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="父标签" prop="parentTagId">
<el-input
v-model="queryParams.parentId"
placeholder="请输入父标签的ID"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<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 @click="openForm()">
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['system:tag-library:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
<section class="flex flex-col gap-20px">
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
<el-form-item label="" prop="tagName">
<el-input
v-model="queryParams.tagName"
placeholder="请输入标签的名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="">
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-8px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-8px" /> 重置</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['system:tag-library:export']"
>
<Icon icon="ep:download" class="mr-8px" /> 导出
</el-button>
</el-form-item>
<el-form-item class="ml-auto">
<el-button type="primary" @click="openForm()">
<Icon icon="ep:circle-plus" class="mr-8px" /> 新增
</el-button>
</el-form-item>
</el-form>
<el-table :data="list">
<el-table-column label="父级标签" prop="parentName" />
<el-table-column label="标签名称" prop="tagName" />
<el-table-column label="排列顺序" prop="sort" />
<el-table-column label="操作选项" align="right">
<template #default="{ row }">
<el-button type="text" @click="openForm(row.id)"> 编辑 </el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:total="total"
:show-page-size="false"
layout="total, prev, pager, next"
v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
class="ml-auto"
/>
</section>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-tree
:data="list"
node-key="id"
:props="treeProps"
highlight-current
default-expand-all
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<span>{{ node.label }}{{ data.tagName }}</span>
<el-tag size="small" type="info">层级: {{ data.tagLevel }}</el-tag>
<!-- <el-tag size="small" :type="data.tag_type === 1 ? 'success' : 'warning'">
{{ data.tag_type === 1 ? '企业标签' : '执法标签' }}
</el-tag> -->
<el-button type="text" @click="openForm(data.id)"
><el-icon><EditPen /></el-icon
></el-button>
<el-button type="text" @click="handleDelete(data.id)"
><el-icon><DeleteFilled /></el-icon
></el-button>
</template>
</el-tree>
</ContentWrap>
<!-- 表单弹窗添加/修改 -->
<TagForm ref="tagFormRef" @success="getList" />
</template>
<script setup lang="ts">
import download from '@/utils/download'
import { TagLibraryApi, TagLibraryVO } from '@/api/system/taglibrary/index'
import { TagLibraryApi, TagLibraryVO } from '@/api/system/taglibrary'
import TagForm from './form.vue'
type QueryParams = {
pageNo: number
pageSize: number
tagType: number
tagName: string
}
/** 企业标签 列表 */
defineOptions({ name: 'TagLibrary' })
const message = useMessage() //
const loading = ref(true) //
const list = ref<TagLibraryVO[]>([]) //
const total = ref(0) //
const queryParams = reactive({
const queryParams = reactive<QueryParams>({
pageNo: 1,
pageSize: 10,
tagName: undefined,
parentId: undefined,
tagLevel: undefined,
tagType: undefined,
createTime: []
tagType: 0,
tagName: ''
})
const route = useRoute()
const queryFormRef = ref() //
@ -102,18 +85,14 @@ const exportLoading = ref(false) // 导出的加载中
const getList = async () => {
loading.value = true
try {
const data = await TagLibraryApi.getTagLibraryPage(queryParams)
list.value = data
const res = await TagLibraryApi.getTagList(queryParams)
list.value = res.list
total.value = res.total
} finally {
loading.value = false
}
}
const treeProps = ref({
label: 'tag_name', //
children: 'children' //
})
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
@ -126,26 +105,14 @@ const resetQuery = () => {
handleQuery()
}
const handleNodeClick = (node) => {
console.log('当前点击的标签:', node)
}
/** 添加/修改操作 */
const tagFormRef = ref()
const openForm = (id?: number) => {
tagFormRef.value.open({ id, tagType: queryParams.tagType })
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
//
await message.delConfirm()
//
await TagLibraryApi.deleteTagLibrary(id)
message.success(t('common.delSuccess'))
//
await getList()
} catch {}
tagFormRef.value.open({
id,
tagType: queryParams.tagType,
parentId: queryParams.tagType == 1 ? 1 : 26
})
}
/** 导出按钮操作 */
@ -165,7 +132,9 @@ const handleExport = async () => {
/** 初始化 **/
onMounted(() => {
queryParams.tagType = route.fullPath.split('/').pop()
queryParams.tagType = Number(route.fullPath.split('/').pop())
getList()
})
</script>
<style lang="scss" scoped></style>

190
src/views/task/create.vue

@ -46,21 +46,21 @@
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="标签" prop="tags" style="width: 100%">-->
<!-- <el-tree-select-->
<!-- v-model="formData.tags"-->
<!-- :data="tagList"-->
<!-- check-strictly-->
<!-- :render-after-expand="false"-->
<!-- placeholder="请选择标签"-->
<!-- node-key="id"-->
<!-- show-checkbox-->
<!-- multiple-->
<!-- :props="{-->
<!-- label: 'tagName'-->
<!-- }"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="标签" prop="tags" style="width: 100%">-->
<!-- <el-tree-select-->
<!-- v-model="formData.tags"-->
<!-- :data="tagList"-->
<!-- check-strictly-->
<!-- :render-after-expand="false"-->
<!-- placeholder="请选择标签"-->
<!-- node-key="id"-->
<!-- show-checkbox-->
<!-- multiple-->
<!-- :props="{-->
<!-- label: 'tagName'-->
<!-- }"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="描述" prop="description" style="width: 100%">
<el-input
type="textarea"
@ -122,23 +122,23 @@
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="" prop="id">-->
<!-- <el-select-->
<!-- v-model="enterprise.queryParams.id"-->
<!-- placeholder="请选择企业资质"-->
<!-- clearable-->
<!-- @clear="handleQuery"-->
<!-- @change="handleQuery"-->
<!-- class="!w-150px"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_QUA)"-->
<!-- :key="dict.value"-->
<!-- :label="dict.label"-->
<!-- :value="dict.value"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="" prop="id">-->
<!-- <el-select-->
<!-- v-model="enterprise.queryParams.id"-->
<!-- placeholder="请选择企业资质"-->
<!-- clearable-->
<!-- @clear="handleQuery"-->
<!-- @change="handleQuery"-->
<!-- class="!w-150px"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="dict in getStrDictOptions(DICT_TYPE.ENTERPRISES_QUA)"-->
<!-- :key="dict.value"-->
<!-- :label="dict.label"-->
<!-- :value="dict.value"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
@ -198,14 +198,15 @@
</section>
<section>
<section class="check-area">
<section v-for="item in formData.enterprises" :key="item.id" class="isChecked" >
<section v-for="item in formData.enterprises" :key="item.id" class="isChecked">
<el-tooltip :content="item.enterprisesName" placement="top">
<span >
<span>
企业名称{{ item.enterprisesName }}
<section class="flex gap-5px">
区域: <DictTag :type="DICT_TYPE.ENTERPRISES_AREA" :value="Number(item.region)" />
规模<DictTag :type="DICT_TYPE.ENTERPRISES_TYPE" :value="Number(item.type)" />
</section>
区域:
<DictTag :type="DICT_TYPE.ENTERPRISES_AREA" :value="Number(item.region)" />
规模<DictTag :type="DICT_TYPE.ENTERPRISES_TYPE" :value="Number(item.type)" />
</section>
</span>
</el-tooltip>
<el-icon @click="checkEnterprise(item)"><Close /></el-icon>
@ -228,13 +229,18 @@
</ContentWrap>
<ContentWrap>
<el-button type="primary" @click="submitForm"> </el-button>
<el-button
type="primary" @click="submitForm" v-hasPermi="['system:enterprise-inspections:audit']">审核通过</el-button>
<el-button
<el-button
type="primary"
@click="submitForm"
v-hasPermi="['system:enterprise-inspections:audit']"
>审核通过</el-button
>
<el-button
type="danger"
@click="submitForm"
v-hasPermi="['system:enterprise-inspections:audit']"
>删除</el-button>
>删除</el-button
>
</ContentWrap>
</template>
<script setup lang="ts">
@ -242,8 +248,8 @@ import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { TagLibraryApi } from '@/api/system/taglibrary'
import { EnterprisesApi, EnterprisesVO } from '@/api/enterprises'
import { TaskInfoApi } from '@/api/system/taskinfo'
import { useTagsViewStore} from '@/store/modules/tagsView'
import {defaultProps} from "@/utils/tree";
import { useTagsViewStore } from '@/store/modules/tagsView'
import { defaultProps } from '@/utils/tree'
defineOptions({ name: 'CreateTask' })
const loading = ref(false)
const formData = ref({
@ -266,9 +272,9 @@ const formData = ref({
tags: [],
enterprises: [] as any
})
const router=useRouter()
const route=useRoute()
const tagView=useTagsViewStore()
const router = useRouter()
const route = useRoute()
const tagView = useTagsViewStore()
const message = useMessage() //
const formRules = reactive({
title: [{ required: true, message: '任务标题不能为空', trigger: 'blur' }],
@ -281,7 +287,7 @@ const formRules = reactive({
],
planTime: [{ required: true, message: '时间周期不能为空', trigger: 'blur' }]
})
const {query}=useRoute()
const { query } = useRoute()
const formRef = ref() // Ref
const tagList = ref([])
const queryFormRef = ref() //
@ -294,7 +300,7 @@ const enterprise = ref({
type: undefined,
region: undefined,
registrationNumber: undefined,
id:undefined
id: undefined
}),
total: ref(0)
})
@ -312,14 +318,14 @@ const resetQuery = () => {
* 获取标签列表
*/
function getTagList() {
TagLibraryApi.getTagLibraryPage({tagType:2}).then((res) => {
TagLibraryApi.getTagLibraryPage({ tagType: 2 }).then((res) => {
tagList.value = res
})
}
const defaultProps = {
label: 'tagName', // 使 'name'
children: 'children', // 使 'children'
};
children: 'children' // 使 'children'
}
/**
* 获取企业列表
*/
@ -338,10 +344,10 @@ async function getEnterPriseList() {
*/
async function selectAll() {
loading.value = true
const data = JSON.parse(JSON.stringify(enterprise.value.queryParams));
data.pageSize = -1
delete data.pageNo
const { list } = await EnterprisesApi.getEnterprisesPage(data)
const data = JSON.parse(JSON.stringify(enterprise.value.queryParams))
data.pageSize = -1
delete data.pageNo
const { list } = await EnterprisesApi.getEnterprisesPage(data)
const arr = [...formData.value.enterprises, ...list]
formData.value.enterprises = uniqueFunc(arr, 'id')
loading.value = false
@ -351,9 +357,9 @@ async function selectAll() {
*/
async function cancelAll() {
loading.value = true
const data = JSON.parse(JSON.stringify(enterprise.value.queryParams));
const data = JSON.parse(JSON.stringify(enterprise.value.queryParams))
data.pageSize = -1
delete data.pageNo
delete data.pageNo
const { list } = await EnterprisesApi.getEnterprisesPage(data)
if (list) {
formData.value.enterprises = formData.value.enterprises.filter((e) => {
@ -394,48 +400,48 @@ async function submitForm() {
if (validate) {
const data = JSON.parse(JSON.stringify(formData.value))
//1
data.status=1;
console.log("任务类型:",formData.value.taskType)
data.status = 1
console.log('任务类型:', formData.value.taskType)
data.enterpriseIds = formData.value.enterprises.map((i) => i.id)
if(data.enterpriseIds.length==0){
message.success("温馨提示:请您选择执法对象")
}else{
if(data.status<2){
data.startDate = data.planTime[0]
data.endDate = data.planTime[1]
if (data.id) {
TaskInfoApi.updateTaskInfo(data).then(() => {
message.success('操作成功')
tagView.delView(route)
router.go(-1)
})
} else {
TaskInfoApi.createTaskInfo(data).then(() => {
message.success('操作成功')
tagView.delView(route)
router.go(-1)
})
}
}else{
message.success('温馨提示:该任务已经执行,无法再进行修改')
}
if (data.enterpriseIds.length == 0) {
message.success('温馨提示:请您选择执法对象')
} else {
if (data.status < 2) {
data.startDate = data.planTime[0]
data.endDate = data.planTime[1]
if (data.id) {
TaskInfoApi.updateTaskInfo(data).then(() => {
message.success('操作成功')
tagView.delView(route)
router.go(-1)
})
} else {
TaskInfoApi.createTaskInfo(data).then(() => {
message.success('操作成功')
tagView.delView(route)
router.go(-1)
})
}
} else {
message.success('温馨提示:该任务已经执行,无法再进行修改')
}
}
}
}
function init(){
if(query.id){
TaskInfoApi.getTaskInfo(query.id).then(res=>{
formData.value=res
formData.value.planTime=[formData.value.startDate,formData.value.endDate]
formData.value.enterprises=res.enterpriseIdes
formData.value.tags=res.taskTagIdes.map(t=>t.tagId)
})
}
function init() {
if (query.id) {
TaskInfoApi.getTaskInfo(query.id).then((res) => {
formData.value = res
formData.value.planTime = [formData.value.startDate, formData.value.endDate]
formData.value.enterprises = res.enterpriseIdes
formData.value.tags = res.taskTagIdes.map((t) => t.tagId)
})
}
}
getEnterPriseList()
getTagList()
onMounted(()=>{
init()
onMounted(() => {
init()
})
</script>
<style scoped lang="scss">

Loading…
Cancel
Save