|
@@ -7,9 +7,7 @@
|
|
|
<el-input v-model="state.queryParams.keyword" placeholder="类型名称" clearable @keyup.enter="handleQuery" style="width: 250px" />
|
|
|
</el-form-item>
|
|
|
<el-form-item class="mb0">
|
|
|
- <el-button type="primary" @click="handleQuery" :loading="state.loading">
|
|
|
- <SvgIcon name="ele-Search" class="mr5" />查询
|
|
|
- </el-button>
|
|
|
+ <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
|
|
|
<el-button @click="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
@@ -27,41 +25,23 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 表格 -->
|
|
|
- <el-table
|
|
|
- class="table"
|
|
|
- :data="state.tableData"
|
|
|
- row-key="id"
|
|
|
- default-expand-all
|
|
|
- v-loading="state.loading"
|
|
|
- :tree-props="{ children: 'child' }"
|
|
|
- ref="tableRef"
|
|
|
- >
|
|
|
- <el-table-column prop="name" label="类型名称" />
|
|
|
- <el-table-column prop="sort" label="排序" width="150" />
|
|
|
- <el-table-column prop="creationTime" label="创建时间" width="170" align="center">
|
|
|
- <template #default="{ row }">
|
|
|
- <span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="isEnable" label="状态" width="150" align="center">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-tag v-if="row.isEnable" type="success"> 启用 </el-tag>
|
|
|
- <el-tag v-else type="info"> 停用 </el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" width="250" fixed="right" align="center">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button link type="primary" @click="onOpenEdit(row)" title="修改"> 修改 </el-button>
|
|
|
- <el-button link type="info" @click="onDisabled(row)" v-if="row.isEnable" title="停用"> 停用 </el-button>
|
|
|
- <el-button link type="warning" @click="onEnable(row)" v-else title="启用"> 启用 </el-button>
|
|
|
- <el-button link type="info" @click="undercarriage(row)" v-if="row.isEnable" title="停用并下架关联知识"> 停用并下架 </el-button>
|
|
|
- <el-button link type="danger" @click="onDelete(row)" title="删除"> 删除 </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <template #empty>
|
|
|
- <Empty />
|
|
|
+ <el-auto-resizer class="table" v-loading="state.loading">
|
|
|
+ <template #default="{ height, width }">
|
|
|
+ <el-table-v2
|
|
|
+ v-model:expanded-row-keys="state.expandedRowKeys"
|
|
|
+ :columns="state.columns"
|
|
|
+ :data="state.tableData"
|
|
|
+ expand-column-key="name"
|
|
|
+ fixed
|
|
|
+ :width="width"
|
|
|
+ :height="height"
|
|
|
+ >
|
|
|
+ <template #empty>
|
|
|
+ <Empty />
|
|
|
+ </template>
|
|
|
+ </el-table-v2>
|
|
|
</template>
|
|
|
- </el-table>
|
|
|
+ </el-auto-resizer>
|
|
|
</div>
|
|
|
<KnowledgeTypeAdd ref="knowledgeTypeAddRef" @updateList="getList" />
|
|
|
<KnowledgeTypeEdit ref="knowledgeTypeEditRef" @updateList="getList" />
|
|
@@ -69,7 +49,7 @@
|
|
|
</template>
|
|
|
<script lang="ts" setup name="knowledgeType">
|
|
|
import { defineAsyncComponent, ref, h, reactive, onMounted, watch } from 'vue';
|
|
|
-import { ElMessageBox, ElMessage } from 'element-plus';
|
|
|
+import { ElMessageBox, ElMessage, ElTag, ElButton } from 'element-plus';
|
|
|
import { formatDate } from '/@/utils/formatTime';
|
|
|
import { treelist, delType, changeAble, changestateandoffshelf } from '/@/api/knowledge/type';
|
|
|
import { throttle } from '/@/utils/tools';
|
|
@@ -91,31 +71,140 @@ const state = reactive({
|
|
|
keyword: '',
|
|
|
},
|
|
|
expandedRowKeys: <any>[],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ key: 'name',
|
|
|
+ dataKey: 'name',
|
|
|
+ title: '类型名称',
|
|
|
+ width: 600,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'sort',
|
|
|
+ dataKey: 'sort',
|
|
|
+ title: '排序',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'lastModificationTime',
|
|
|
+ dataKey: 'lastModificationTime',
|
|
|
+ title: '更新时间',
|
|
|
+ width: 200,
|
|
|
+ cellRenderer: (data: any) => h('span', {}, { default: () => formatDate(new Date(data.rowData.lastModificationTime), 'YYYY-mm-dd HH:MM:SS') }),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'isEnable',
|
|
|
+ dataKey: 'isEnable',
|
|
|
+ title: '状态',
|
|
|
+ width: 100,
|
|
|
+ cellRenderer: (data: any) => {
|
|
|
+ return h(ElTag, { type: data.rowData.isEnable ? 'success' : 'info' }, { default: () => (data.rowData.isEnable ? '启用' : '禁用') });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'handle',
|
|
|
+ title: '操作',
|
|
|
+ width: 200,
|
|
|
+ fixed: 'right',
|
|
|
+ align: 'center',
|
|
|
+ cellRenderer: (data: any) => {
|
|
|
+ return h('p', {}, [
|
|
|
+ h(
|
|
|
+ ElButton,
|
|
|
+ {
|
|
|
+ onClick: () => onOpenEdit(data.rowData),
|
|
|
+ type: 'primary',
|
|
|
+ link: true,
|
|
|
+ title: '修改菜单',
|
|
|
+ },
|
|
|
+ { default: () => '修改' }
|
|
|
+ ),
|
|
|
+ data.rowData.isEnable
|
|
|
+ ? h('span', {}, [
|
|
|
+ h(
|
|
|
+ ElButton,
|
|
|
+ {
|
|
|
+ onClick: () => onDisabled(data.rowData),
|
|
|
+ type: 'danger',
|
|
|
+ link: true,
|
|
|
+ title: '停用分类',
|
|
|
+ },
|
|
|
+ { default: () => '停用' }
|
|
|
+ ),
|
|
|
+ h(
|
|
|
+ ElButton,
|
|
|
+ {
|
|
|
+ onClick: () => undercarriage(data.rowData),
|
|
|
+ type: 'info',
|
|
|
+ link: true,
|
|
|
+ title: '停用并下架关联知识',
|
|
|
+ style: { marginLeft: 0 },
|
|
|
+ },
|
|
|
+ { default: () => '停用并下架' }
|
|
|
+ ),
|
|
|
+ ])
|
|
|
+ : h(
|
|
|
+ ElButton,
|
|
|
+ {
|
|
|
+ onClick: () => onEnable(data.rowData),
|
|
|
+ type: 'warning',
|
|
|
+ link: true,
|
|
|
+ title: '启用分类',
|
|
|
+ },
|
|
|
+ { default: () => '启用' }
|
|
|
+ ),
|
|
|
+ h(
|
|
|
+ ElButton,
|
|
|
+ {
|
|
|
+ onClick: () => onDelete(data.rowData),
|
|
|
+ type: 'danger',
|
|
|
+ link: true,
|
|
|
+ title: '删除分类',
|
|
|
+ },
|
|
|
+ { default: () => '删除' }
|
|
|
+ ),
|
|
|
+ ]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
});
|
|
|
-// 过滤表格
|
|
|
+// 表格过滤
|
|
|
const formatTable = (list: any[], keyword: string) => {
|
|
|
+ if (!list.length || !Array.isArray(list)) return [];
|
|
|
let emptyArr: any[] = [];
|
|
|
- console.log(list)
|
|
|
list.map((item) => {
|
|
|
if (item.name.includes(keyword)) {
|
|
|
- if (item.child && Array.isArray(item.child) && item.child.length > 0) {
|
|
|
- item.child = formatTable(item.child, keyword);
|
|
|
+ if (item.children && Array.isArray(item.children) && item.children.length > 0) {
|
|
|
+ item.children = formatTable(item.children, keyword);
|
|
|
}
|
|
|
emptyArr.push(item);
|
|
|
- } else if (item.child && Array.isArray(item.child) && item.child.length > 0) {
|
|
|
- item.child = formatTable(item.child, keyword);
|
|
|
- if (item.child.length) {
|
|
|
+ } else if (item.children && Array.isArray(item.children) && item.children.length > 0) {
|
|
|
+ item.children = formatTable(item.children, keyword);
|
|
|
+ if (item.children.length) {
|
|
|
emptyArr.push(item);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
return emptyArr;
|
|
|
};
|
|
|
+let emptyArr: any[] = [];
|
|
|
+const getExpand = (list: any[]) => {
|
|
|
+ if (!list.length || !Array.isArray(list)) return [];
|
|
|
+ list.map((item) => {
|
|
|
+ if (item.children && Array.isArray(item.children) && item.children.length > 0) {
|
|
|
+ getExpand(item.children);
|
|
|
+ }
|
|
|
+ emptyArr.push(item.id);
|
|
|
+ });
|
|
|
+ return emptyArr;
|
|
|
+};
|
|
|
/** 搜索按钮操作 节流操作 */
|
|
|
const handleQuery = throttle(() => {
|
|
|
if (state.queryParams.keyword) {
|
|
|
state.loading = true;
|
|
|
+ state.expandedRowKeys = [];
|
|
|
+ emptyArr = [];
|
|
|
state.tableData = formatTable(JSON.parse(JSON.stringify(state.staticArr)), state.queryParams.keyword);
|
|
|
+ state.expandedRowKeys = getExpand(state.tableData);
|
|
|
state.loading = false;
|
|
|
} else {
|
|
|
getList();
|
|
@@ -126,26 +215,34 @@ const resetQuery = (formEl: FormInstance | undefined) => {
|
|
|
if (!formEl) return;
|
|
|
formEl.resetFields();
|
|
|
getList();
|
|
|
+ state.expandedRowKeys = [];
|
|
|
+ emptyArr = [];
|
|
|
};
|
|
|
-
|
|
|
+// 展开收起
|
|
|
const expand = () => {
|
|
|
state.isExpand = !state.isExpand;
|
|
|
- toggleRowExpansionAll(state.tableData, state.isExpand);
|
|
|
};
|
|
|
-const tableRef = ref();
|
|
|
-const toggleRowExpansionAll = (data: any[], isExpansion: boolean) => {
|
|
|
- data.forEach((item) => {
|
|
|
- tableRef.value.toggleRowExpansion(item, isExpansion);
|
|
|
- if (item.child !== undefined && item.child !== null) {
|
|
|
- toggleRowExpansionAll(item.child, isExpansion);
|
|
|
+watch(
|
|
|
+ () => state.isExpand,
|
|
|
+ (old: Boolean) => {
|
|
|
+ if (old) getAllIds(state.tableData);
|
|
|
+ else state.expandedRowKeys = [];
|
|
|
+ }
|
|
|
+);
|
|
|
+const getAllIds = (arr: any) => {
|
|
|
+ if (!arr) return [];
|
|
|
+ arr.forEach((v: any) => {
|
|
|
+ if (v.children?.length) {
|
|
|
+ getAllIds(v.children);
|
|
|
+ state.expandedRowKeys.push(v.id);
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
-// 打开新增菜单弹窗
|
|
|
+// 打开新增分类弹窗
|
|
|
const onOpenAdd = () => {
|
|
|
knowledgeTypeAddRef.value.openDialog(state.tableData);
|
|
|
};
|
|
|
-// 打开编辑菜单弹窗
|
|
|
+// 打开编辑分类弹窗
|
|
|
const onOpenEdit = (row: any) => {
|
|
|
knowledgeTypeEditRef.value.openDialog(row, state.tableData);
|
|
|
};
|
|
@@ -216,6 +313,7 @@ const getList = () => {
|
|
|
.then((res: any) => {
|
|
|
state.tableData = res?.result ?? [];
|
|
|
state.staticArr = res?.result ?? [];
|
|
|
+ getAllIds(state.tableData);
|
|
|
state.loading = false;
|
|
|
})
|
|
|
.catch(() => {
|