|
|
|
|
@ -1,37 +1,27 @@
|
|
|
|
|
<template> |
|
|
|
|
<ContentWrap> |
|
|
|
|
<!-- 搜索工作栏 --> |
|
|
|
|
<section class="flex flex-col gap-20px"> |
|
|
|
|
<el-form |
|
|
|
|
class="-mb-15px" |
|
|
|
|
:model="queryParams" |
|
|
|
|
ref="queryFormRef" |
|
|
|
|
:inline="true" |
|
|
|
|
label-width="68px" |
|
|
|
|
@submit.prevent |
|
|
|
|
> |
|
|
|
|
<el-form-item label="名称" prop="tagName"> |
|
|
|
|
<el-form-item label="" prop="tagName"> |
|
|
|
|
<el-input |
|
|
|
|
v-model="queryParams.tagName" |
|
|
|
|
placeholder="请输入标签的名称" |
|
|
|
|
clearable |
|
|
|
|
@keyup.enter="handleQuery" |
|
|
|
|
@keyup.enter.prevent="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-form-item label=""> |
|
|
|
|
<el-button @click="handleQuery" type="primary" plain |
|
|
|
|
><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 |
|
|
|
|
@ -39,61 +29,68 @@
|
|
|
|
|
:loading="exportLoading" |
|
|
|
|
v-hasPermi="['system:tag-library:export']" |
|
|
|
|
> |
|
|
|
|
<Icon icon="ep:download" class="mr-5px" /> 导出 |
|
|
|
|
<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> |
|
|
|
|
</ContentWrap> |
|
|
|
|
|
|
|
|
|
<!-- 列表 --> |
|
|
|
|
<ContentWrap> |
|
|
|
|
<el-tree |
|
|
|
|
:data="list" |
|
|
|
|
node-key="id" |
|
|
|
|
:props="treeProps" |
|
|
|
|
highlight-current |
|
|
|
|
default-expand-all |
|
|
|
|
@node-click="handleNodeClick" |
|
|
|
|
<el-table :data="list" size="large"> |
|
|
|
|
<el-table-column label="父级标签" prop="parentName" /> |
|
|
|
|
<el-table-column label="标签名称" prop="tagName" /> |
|
|
|
|
<el-table-column label="排列顺序" prop="sort" /> |
|
|
|
|
<el-table-column label="操作选项" align="center" width="100"> |
|
|
|
|
<template #default="{ row }"> |
|
|
|
|
<section |
|
|
|
|
class="color-#409EFF cursor-pointer hover--font-bold" |
|
|
|
|
@click="openForm(row.id)" |
|
|
|
|
> |
|
|
|
|
<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> |
|
|
|
|
编辑 |
|
|
|
|
</section> |
|
|
|
|
</template> |
|
|
|
|
</el-tree> |
|
|
|
|
</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" |
|
|
|
|
@change="getList" |
|
|
|
|
/> |
|
|
|
|
</section> |
|
|
|
|
</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 +99,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 +119,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 +146,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> |
|
|
|
|
|
