Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
e7d9e10e by lihua
Options

数据目录分类页面开发

1 parent 55a23cac
Inline Side-by-side
Showing 2 changed files with 936 additions and 0 deletions
src/router/modules/dataAsset.ts
......@@ -334,5 +334,26 @@ const routes: RouteRecordRaw[] = [
}
],
},
{
path: '/data-product/data-catalog-sort',
component: Layout,
meta: {
title: '数据目录分类',
icon: 'sidebar-videos',
},
children: [
{
path: '',
name: 'productDataCatalogSort',
component: () => import('@/views/data_asset/productDataCatalogSort.vue'),
meta: {
title: '',
sidebar: false,
breadcrumb: false,
cache: true
},
},
]
}
]
export default routes
......
src/views/data_asset/productDataCatalogSort.vue 0 → 100644
<!-- 列表模板带tab切换 -->
<template>
<div class="container_wrap full flex">
<!-- 侧边table表格 start -->
<div class="aside_wrap">
<el-input class="tree_search_input" v-model="asidePage.searchKey" @change="asideSearch()"
:placeholder="asidePage.queryPlaceholder" :prefix-icon="SearchIcon" clearable />
<el-button class="tree_add" :icon="Plus" @click="loadAsideDialog">{{ asidePage.addButtonText }}</el-button>
<el-table ref="asideTable" style="height: calc(100% - 90px);" :data="asideTableData" highlight-current-row
:show-header="false" @row-click="searchDict">
<el-table-column prop="dictTypeName">
<template #default="scope">
<el-tooltip v-if="scope.row.remarks" class="item" effect="light" :content="scope.row.remarks"
placement="left">
<div style="padding-left: 8px;">{{ scope.row.dicName }}</div>
</el-tooltip>
<div v-else style="padding-left: 8px;">{{ scope.row.dicName }}</div>
</template>
</el-table-column>
<el-table-column label="操作" width="46" align="right">
<template #default="scope">
<div class="btn">
<el-icon class="el-icon-edit" @click.stop="toAsideEdit(scope.row)">
<Edit />
</el-icon>
<el-icon class="el-icon-delete" @click.stop="toAsideDelete(scope.row)">
<Delete />
</el-icon>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination class="tree-page" small style="justify-content:space-between" :current-page="asidePage.curr"
layout="prev, pager, next" :background="false" :page-size="asidePage.limit" :pager-count="5"
:total="asidePage.total" @current-change="handleCurrentChange" />
</div>
<!-- 侧边table表格 end -->
<!-- 列表区域 start -->
<div class="main_wrap">
<div class="table_tool_wrap">
<TableTools :searchItems="searchItemList" :searchId="'user-manage-search'" @search="toSearch" />
<div class="tools_btns">
<el-button type="primary" @click="loadDialog" v-preReClick>添加规则</el-button>
<el-button @click="batchDelete">批量删除</el-button>
</div>
</div>
<div class="table_panel_wrap">
<Table :tableInfo="tableInfo" @tableSelectionChange="tableSelectionChange" @tablePageChange="tablePageChange" />
</div>
</div>
<!-- 列表区域 end -->
<!-- 侧边抽屉组件 start -->
<Drawer ref="asideDrawerRef" :drawerInfo="asideDrawerInfo" @drawerBtnClick="asideDrawerBtnClick">
</Drawer>
<!-- 侧边抽屉组件 end -->
<!-- 右边抽屉组件 start -->
<Drawer ref="valueDrawerRef" :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick"
@drawer-select-change="handleDrawSelectChange">
</Drawer>
<!-- 右边抽屉组件 end -->
</div>
</template>
<script lang="ts" setup name="productDataCatalogSort">
import { ref, onMounted } from "vue";
import Drawer from "@/components/Drawer/index.vue";
import { ElMessage } from "element-plus"
import { Plus, Edit, Delete, Search as SearchIcon } from "@element-plus/icons-vue";
import TableTools from '@/components/Tools/table_tools.vue';
import { commonPageConfig } from "@/components/PageNav";
import { useValidator } from '@/hooks/useValidator';
const { required } = useValidator();
const { proxy } = getCurrentInstance() as any;
const leftTableLoading = ref(false)
const submitForm = async () => {
let res1 = await formItem1.value.submitForm()
console.log("submitForm111", res1);
if (res1) {
let resultForm1 = await formItem1.value.getData()
resultForm1.remarks = resultForm1.remarks || '';
let message = resultForm1.guid ? '修改成功' : '新增成功'
// dictApi.addDictionary(resultForm1).then(res => {
// if (res.data.code === proxy.$passCode) {
// proxy.$ElMessage({
// type: 'success',
// message: message
// })
// drawerInfo.value.visible = false;
// toSearch(params.value)
// }
// });
}
}
const asideSubmitForm = async () => {
let resultForm1 = asideDrawerRef.value?.getDrawerConRef('drawerFormRef')?.formInline
let message = resultForm1.guid ? '修改成功' : '新增成功'
// dictApi.addDictClass(resultForm1).then(res => {
// if (res.data.code === proxy.$passCode) {
// proxy.$ElMessage({
// type: 'success',
// message: message
// })
// asideDrawerInfo.value.visible = false;
// asidePage.value.curr = 1;
//asidePage.value.searchKey = '';
// asideSearch()
// }
// })
}
const params = ref({})
// 分页配置
const asidePage = ref({
limit: 14,
curr: 1,
total: 0,
totalPages: 1,
searchKey: '',
addButtonText: "添加分类",
queryPlaceholder: "输入关键字搜索",
sizes: [
{ label: "10", value: 10 },
{ label: "50", value: 50 },
],
});
const asideTableData = ref<any>([]);
const allClassData = ref<any>([]);
const dictType = ref('');
const classGuid = ref('');
const classEditFormItems = ref([
{
label: '分类名称',
type: 'input',
maxlength: 50,
placeholder: '请输入',
field: 'dictTypeName',
default: '',
clearable: true,
required: true
},
{
label: '分类编码',
type: 'input',
maxlength: 50,
placeholder: '请输入',
field: 'code',
regexp: /[\W_]/g,
default: '',
clearable: true,
required: false,
},
{
label: '界面排序',
type: 'input',
maxlength: 50,
placeholder: '请输入',
field: 'orderNum',
regexp: /[^\d]/g,
default: '',
clearable: true,
required: false,
},
{
label: '启用状态',
type: 'switch',
field: 'bizState',
default: 'Y',
placeholder: '请选择',
activeValue: 'Y',
inactiveValue: 'S',
switchWidth: 32,
},
{
label: '描述',
placeholder: '该输入',
field: 'remarks',
type: 'textarea',
default: '',
maxlength: 250,
block: true,
clearable: true,
required: false,
}
]);
const classEditFormRules = ref({
dictTypeName: [required('请输入分类名称')],
});
// 添加字典分类打开抽屉
const loadAsideDialog = () => {
// 抽屉逻辑
asideDrawerInfo.value.header.title = '新增分类'
asideDrawerInfo.value.visible = true;
classEditFormItems.value.forEach(item => {
item.default = '';
if (item.field == 'bizState') {
item.default = 'Y';
}
})
};
// 分页
const handleCurrentChange = (val: number) => {
asidePage.value.curr = unref(val);
asideSearch()
}
// 左边表格的搜索
const asideSearch = () => {
let params: any = {
pageIndex: asidePage.value.curr,
pageSize: asidePage.value.limit,
searchKey: asidePage.value.searchKey,
};
getAsideTableData(params)
};
// 获取左边表格
const getAsideTableData = (params: any) => {
// leftTableLoading.value = true;
// dictApi.getDictClass(params).then((res: any) => {
// leftTableLoading.value = false;
// if (res.code == proxy.$passCode) {
// let data = res.data || {};
// asideTableData.value = res.data.records ?? [];
// asidePage.value.limit = data.pageSize;
// asidePage.value.curr = data.pageIndex;
// // asidePage.value.totalPage = data.totalPages;
// asidePage.value.total = data.totalRows;
// if (asideTableData.value.length > 0) {
// let row = asideTableData.value[0]
// proxy.$refs['asideTable'].setCurrentRow(row);
// // 点击分类
// dictType.value = row.dicName
// classGuid.value = row.guid
// page.value.curr = 1;
// toSearch({})
// }
// } else {
// ElMessage({
// type: "info",
// message: res.data.msg,
// });
// }
// })
}
//左边列表点击
const searchDict = (row?) => {
params.value = {}
dictType.value = row.dicName
classGuid.value = row.guid
toSearch({})
}
const toAsideEdit = (data) => {
let row = data
asideDrawerInfo.value.header.title = '编辑分类'
asideDrawerInfo.value.visible = true;
classEditFormItems.value.forEach(item => {
item.default = row[item.field];
})
}
const toAsideDelete = (data) => { // 删除
let row = data
proxy.$openMessageBox("数据删除后不可恢复，确定是否删除？", () => {
// dictApi.removeDict([row.guid]).then(async (res) => {
// if (res.data.code === proxy.$passCode) {
// proxy.$ElMessage({
// type: 'success',
// message: '删除成功'
// })
// asidePage.value.curr = 1;
// asideSearch()
// }
// })
}, () => {
proxy.$ElMessage.info("已取消删除");
})
}
/** 新增分类的form */
const classEditFormInfo = ref({
type: "form",
title: "",
col: "span",
formInfo: {
id: "add-class-form",
readonly: false,
items: classEditFormItems.value,
rules: classEditFormRules.value,
},
});
const asideDrawerRef = ref();
// 侧边表单抽屉schema
const asideDrawerInfo: any = ref({
visible: false,
direction: 'rtl',
size: 520,
header: {
title: '添加分类',
},
type: '',
container: {
contents: [classEditFormInfo.value],
},
footer: {
btns: [
{ type: 'default', label: '取消', value: 'cancel' },
{ type: 'primary', label: '确定', value: 'save', loading: false },
]
}
})
// 抽屉的按钮区域
const asideDrawerBtnClick = (btn) => {
if (btn.value == "cancel") {
asideDrawerInfo.value.visible = false;
} else {
if (btn.value == "save") {
asideSubmitForm()
} else {
asideDrawerInfo.value.container.id = "add-dictClass-form";
asideDrawerInfo.value.visible = false;
}
}
};
const searchItemList = ref([
{
type: 'input',
label: '',
field: 'dicName',
default: '',
maxlength: 50,
placeholder: '名称',
clearable: true,
visible: true
}, {
type: 'input',
label: '',
field: 'dicValue',
default: '',
maxlength: 50,
placeholder: '值',
clearable: true,
visible: true
},
]);
// 常量区域
const formItem1 = ref()
const tableData = ref([]);//右边表格
const selectRowData = ref([]);//表格的选中行数据
const classList = ref([]);//抽屉里上级字典列表
const valueDrawerRef = ref();
const dictFormItems: any = ref([
{
label: '分类',
type: 'select',
placeholder: '请选择',
field: 'classGuid',
options: allClassData.value,
props: {
label: "dicName",
value: "guid",
},
filterable: true,
clearable: true,
default: '',
required: true,
block: false,
},
// {
// field: "classGuid",
// label: "字典分类",
// component: "Select",
// colProps: {
// span: getSpan()
// },
// formItemProps: {
// rules: [required()]
// },
// componentProps: {
// placeholder: "请选择字典分类",
// options: allClassData,
// props: {
// key: "guid",
// value: "guid",
// label: "dicName"
// },
// on: {
// change: (val) => {
// classChange(val)
// }
// }
// }
// },
{
label: '上级分类',
type: 'tree-select',
placeholder: '请选择',
field: 'parentGuid',
options: classList.value,
showAllLevels: false,
checkStrictly: false,//只能选择叶子节点。
lazy: false,
props: {
label: "dicName",
value: "guid",
children: 'childList',
checkStrictly: true,
emitPath: false
},
filterable: true,
clearable: true,
default: '',
required: true
},
{
field: "dicName",
label: "名称",
type: 'input',
maxlength: 50,
placeholder: '请输入',
default: '',
clearable: true,
required: true,
block: false
},
{
field: "dicValue",
label: "值",
type: 'input',
maxlength: 50,
placeholder: '请输入',
default: '',
clearable: true,
required: true,
block: false
},
{
label: '界面排序',
type: 'input',
maxlength: 50,
placeholder: "请输入，不填写自动生成",
field: 'orderNum',
regexp: /[^\d]/g,
default: '',
clearable: true,
required: false,
block: false
},
{
label: '启用状态',
type: 'switch',
field: 'bizState',
default: 'Y',
placeholder: '请选择',
activeValue: 'Y',
inactiveValue: 'S',
switchWidth: 32,
},
{
label: '描述',
placeholder: '该输入',
field: 'remarks',
type: 'textarea',
default: '',
maxlength: 250,
block: true,
clearable: true,
required: false,
}
]);
const dictFormRules = ref({
classGuid: [required('请选择分类')],
dicName: [required('请输入名称')],
dicValue: [required('请输入值')],
});
/** 新增分类的form */
const dictFormItemInfo = ref({
type: "form",
title: "",
col: "span",
formInfo: {
id: "add-dict-form",
readonly: false,
items: dictFormItems.value,
rules: dictFormRules.value,
},
});
// 抽屉schema
const drawerInfo: any = ref({
visible: false,
size: 600,
header: {
title: "新增/编辑规则",
},
type: "",
container: {
contents: [dictFormItemInfo.value],
},
footer: {
visible: true,
btns: [
{ type: "default", label: "取消", value: "cancel" },
{ type: "primary", label: "确认 ", value: "save", loading: false },
],
},
});
// 添加字典打开抽屉
const loadDialog = () => {
drawerInfo.value.header.title = '新增规则'
// dictApi.getDictTable({
// classGuid: row.classGuid
// }).then((res: any) => {
// if (res.code == proxy.$passCode) {
// classList.value = res?.data || [];
// dictFormItems.value[1].options = classList.value
// } else {
// proxy.$ElMessage.error(res.msg);
// }
// })
drawerInfo.value.visible = true;
let value = {
guid: '',
// className: row.parentGuid, // 字典分类
classGuid: classGuid.value, // 字典分类
parentGuid: '', // 上级字典
dicName: '', // 字典名称
dicValue: '', // 字典值
remarks: '', // 字典描述
orderNum: null, // 界面排序
bizState: 'Y' // 启用状态
};
dictFormItems.value.forEach(item => {
item.default = value[item.field];
})
dictFormItemInfo.value.formInfo.items = dictFormItems.value;
drawerInfo.value.container.contents[0] = dictFormItemInfo.value;
};
// 表格选中事件
const tableSelectionChange = (val) => {
selectRowData.value = val.map((item) => item.guid);
}
// 批量删除
function batchDelete(param) {
if (param == "delete") {
if (selectRowData.value.length == 0) {
ElMessage({
type: "info",
message: "请选择需要删除的数据",
});
return;
}
proxy.$openMessageBox("数据删除后不可恢复，确定是否删除？", () => {
// dictApi.removeDict(selectRowData.value).then(async (res) => {
// if (res.data.code === proxy.$passCode) {
// proxy.$ElMessage({
// type: 'success',
// message: '删除成功'
// })
// page.value.curr = 1;
// toSearch(params.value)
// }
// })
});
}
};
const tablePageChange = (info) => {
page.value.curr = Number(info.curr);
page.value.limit = Number(info.limit);
tableInfo.value.page.limit = page.value.limit;
tableInfo.value.page.curr = page.value.curr;
getTableData();
};
const page = ref({
...commonPageConfig,
dicName: '',
dicValue: ''
});
const toSearch = (val: any, clear: boolean = false) => {
page.value.curr = 1;
if (clear) {
searchItemList.value.map(item => item.default = '')
page.value.dicName = '';
page.value.dicValue = '';
getTableData();
return;
}
page.value.dicName = val.dicName;
page.value.dicValue = val.dicValue;
getTableData();
};
const getTableData = () => {
// tableInfo.value.loading = true;
// getPlanList({
// pageIndex: page.value.curr, pageSize: page.value.limit,
// dicName: page.value.dicName,
// dicValue: page.value.dicValue,
// classGuid: classGuid.value
// }).then((res: any) => {
// tableInfo.value.loading = false;
// if (res === undefined) {
// return;
// }
// if (res.code == proxy.$passCode) {
// const data = res.data || {}
// tableInfo.value.data = data.records || []
// tableInfo.value.page.limit = data.pageSize
// tableInfo.value.page.curr = data.pageIndex
// tableInfo.value.page.rows = data.totalRows
// } else {
// ElMessage.error(res.msg);
// }
// })
};
const tableInfo = ref({
id: 'rule-table',
loading: false,
fields: [
{
label: "名称",
field: "dicName",
fixed: 'left',
width: 140,
},
{
label: "值",
field: "dicValue",
width: 140,
},
{
label: "界面排序",
field: "orderNum",
width: "85",
align: "center",
},
{
label: "字典描述",
field: "remarks",
width: 160,
},
{
label: "创建人",
field: "createUserName",
width: "140",
},
{
label: "创建时间",
field: "createTime",
width: 170
},
{
label: "更新人",
field: "updateUserName",
width: "140",
},
{
label: "更新时间",
field: "updateTime",
width: 170
},
],
data: [],
showPage: true,
page: {
type: "normal",
rows: 0,
...page.value,
},
actionInfo: {
label: "操作",
type: "btn",
width: 100,
btns: (scope) => {
return [
{
label: "编辑", value: "edit", click: (scope) => {
toEdit(scope.row)
}
},
{
label: "删除", value: "delete", click: (scope) => {
toDelete(scope.row)
}
},
]
}
}
});
const toEdit = async (data) => {
let { row } = data
if (!row.classGuid) return
// dictApi.getDictTable({
// classGuid: row.classGuid
// }).then((res: any) => {
// if (res.code == proxy.$passCode) {
// classList.value = res?.data || [];
// dictFormItems.value[1].options = classList.value
// } else {
// proxy.$ElMessage.error(res.msg);
// }
// })
drawerInfo.value.header.title = '编辑'
drawerInfo.value.visible = true;
dictFormItems.value.forEach(item => {
item.default = row[item.field];
})
}
const toDelete = (data) => { // 删除
let { row } = data
proxy.$openMessageBox("数据删除后不可恢复，确定是否删除？", () => {
// dictApi.removeDict([row.guid]).then(async (res) => {
// if (res.data.code === proxy.$passCode) {
// proxy.$ElMessage({
// type: 'success',
// message: '删除成功'
// })
// }
// page.value.curr = 1;
// toSearch(params.value)
// })
}, () => {
proxy.$ElMessage.info("已取消删除");
})
}
// 抽屉中字典分类change事件
const handleDrawSelectChange = (val, row, info) => {
if (row.field != 'classGuid') {
return;
}
const params = {
classGuid: val,
};
// 获取上级字典下拉选项
// dictApi.getDictTable(params).then((res: any) => {
// if (res.data.code == proxy.$passCode) {
// const data = res.data.data;
// classList.value = data ?? [];
// dictFormItems.value[1].options = classList.value;
// } else {
// ElMessage({
// type: "info",
// message: res.msg,
// });
// }
// })
}
// 抽屉的按钮区域
const drawerBtnClick = (btn, info) => {
if (btn.value == "cancel") {
drawerInfo.value.visible = false;
} else {
if (btn.value == "save") {
submitForm()
} else {
drawerInfo.value.container.id = "add-dictionary-form";
drawerInfo.value.visible = false;
}
}
};
onMounted(() => {
});
onBeforeMount(() => {
asideSearch()
//TODO.需要查一个没有分页的作为下拉选择框。
});
</script>
<style lang="scss" scoped>
.container_wrap {
.aside_wrap {
width: 220px;
padding: 8px 0;
:deep(.el-table--default .cell) {
padding: 2px;
}
.el-table td.el-table__cell div {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.btn {
// display: none;
display: flex;
justify-content: space-around;
}
.btn .el-icon {
cursor: pointer;
}
.el-icon-delete {
color: red;
cursor: pointer;
}
.el-icon-edit {
cursor: pointer;
}
.el-table__body tr:hover .btn {
// display: block;
display: flex;
justify-content: space-around;
}
.el-input {
margin: 0 8px 8px;
width: calc(100% - 16px);
}
.el-button {
margin: 0 8px 1px;
width: calc(100% - 16px);
}
.el-tabs-col {
:deep(.el-tabs__nav) {
justify-content: space-between;
width: 100%;
}
:deep(.el-tabs__item) {
width: 50%;
padding: 0;
}
}
}
.main_wrap {
.panel_title {
line-height: 40px;
font-size: 16px;
font-weight: 600;
color: #212121;
}
.table_tool_wrap {
width: 100%;
.tools_btns {
padding: 0;
margin-bottom: 12px;
}
}
.table_panel_wrap {
width: 100%;
}
}
}
.container_wrap.flex .main_wrap {
width: calc(100% - 220px)
}
:deep(.tree-page.el-pagination) {
button {
border: none;
}
.el-pager li {
border: none;
}
}
</style>
\ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!