Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
3dc89fb7 by xukangle
Options

update:分类配置开发

1 parent 9a4f1f8c
Inline Side-by-side
Showing 6 changed files with 352 additions and 136 deletions
components.d.ts
......@@ -54,7 +54,6 @@ declare module '@vue/runtime-core' {
Table_tools: typeof import('./src/components/Tools/table_tools.vue')['default']
Table_v2: typeof import('./src/components/Table/table_v2.vue')['default']
Tabs: typeof import('./src/components/Tabs/index.vue')['default']
TemplateItem: typeof import('./src/components/TemplateItem/index.vue')['default']
Toolbar: typeof import('./src/components/LineageGraph/toolbar.vue')['default']
Topbar: typeof import('./src/components/LineageGraph/topbar.vue')['default']
Transfer: typeof import('./src/components/Transfer/index.vue')['default']
......
src/api/modules/dataInventory.ts
......@@ -129,3 +129,47 @@ export const getGradeTreeList = () => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/tree-list`,
method: 'post',
})
/**
* 分类树形列表
* @param {Object}
* @path /classify/tree-list
* */
export const getClassifyTreeList = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify/tree-list`,
method: 'post',
data
})
/**
* 分类新增
* @param {Object}
* @path /classify/save
* */
export const saveClassify = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify/save`,
method: 'post',
data
})
/**
* 分类更新
* @param {Object}
* @path /classify/update
*/
export const updateClassify = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify/update`,
method: 'post',
data
})
/**删除分类
* @param {Object}
* @path /classify/delete
*/
export const deleteClassify = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify/delete?guid=${data.guid}`,
method: 'delete',
})
......
src/utils/common.ts
......@@ -484,7 +484,7 @@ export const tagType = (row, type) => {
}
} else if (type == 'state') {
switch (row[type]) {
case 'N':
case 'N':
state = 'warning';
break;
case "Y":
......@@ -552,6 +552,18 @@ export const tagType = (row, type) => {
state = 'danger'//发布中
break;
}
}else if (type == 'status'){
switch (row[type]) {
case 'Y':
state = 'success';
break;
case 'S':
state = 'info';
break;
default:
state = 'info';
break;
}
}
return state;
}
......
src/views/data_inventory/classStandardEdit.vue
......@@ -9,6 +9,7 @@ import { useValidator } from '@/hooks/useValidator';
import { TableColumnWidth } from '@/utils/enum';
import G6 from '@antv/g6';
import { IGroup, ModelConfig } from '@antv/g6';
import { getClassifyGradList, getClassifyTreeList, getGradeList, saveClassify, updateClassify, deleteClassify } from "@/api/modules/dataInventory";
const { required, orderNum } = useValidator();
const { proxy } = getCurrentInstance() as any;
......@@ -18,51 +19,70 @@ const fullPath = route.query.fullPath;
const userStore = useUserStore();
const fullscreenLoading = ref(false);
const formRef = ref();
const classStandardFormItems = ref([{
label: '分类名称',
type: 'input',
maxlength: 50,
placeholder: '请输入',
field: 'classStandardName',
default: '',
default: router.currentRoute.value.query.classStandardName,
clearable: true,
disabled: true,
required: true
}, {
label: '分级标准',
type: 'select',
type: 'input',
placeholder: '请选择',
field: 'gradeStandard',
default: 1,
options: [], //TODO
default: '',
required: true,
filterable: true,
clearable: true,
disabled: true,
visible: true,
}]);
const currTableInfo = ref({});
// 定义层级映射1->一级，2->二级，3->三级，4->四级
const levelMap = {
1: '一级',
2: '二级',
3: '三级',
4: '四级',
}
const currTableInfo = ref<any>({});
const tableInfo = ref({
id: "data-class-standard-table",
multiple: false,
fields: [
{ label: "序号", type: "index", width: 56, align: "center" },
{ label: "分类", field: "className", width: 160, type: 'expand' },
{ label: "层级", field: "levelName", width: 120 },
{ label: "状态", field: "state", type: "tag", width: 120, align: "center" },
{ label: "定义说明", field: "description", width: TableColumnWidth.DESCRIPTION },
{ label: "最低安全级别参考", field: "minLevel", width: 140 },
{ label: "修改人", field: "updateUserName", width: 140 },
{ label: "更新时间", field: "updateTime", width: 180 },
{ label: "分类", field: "classifyName", width: 160, type: 'expand' },
{
label: "层级", field: "level", width: 120, getName: (scope) => {
let level = scope.row.level;
return levelMap[level];
}
},
{
label: "状态", field: "status", type: "tag", width: 120, align: "center", getName: (scope) => {
let status = scope.row.status;
return status == 'Y' ? '有效' : '停用';
}
},
{ label: "定义说明", field: "description", },
{
label: "最低安全级别参考", field: "levelCode", width: 140, getName: (scope) => {
let levelCode = scope.row.levelCode;
return levelCode + '级';
}
},
// { label: "修改人", field: "updateUserName", width: 140 },
// { label: "更新时间", field: "updateTime", width: 180 },
],
data: [{
guid: '1',
children: [{
guid: '1-1'
}]
}],
data: [],
rowKey: 'guid',
showPage: false,
actionInfo: {
label: "操作",
......@@ -81,15 +101,16 @@ const tableInfo = ref({
},
{
label: "删除", value: "delete", click: (scope) => {
console.log(scope);
proxy.$openMessageBox("此操作将永久删除该分类, 是否继续", () => {
// deleteBizTerm([scope.row.guid]).then((res: any) => {
// if (res.code == proxy.$passCode) {
// getTableData();
// proxy.$ElMessage.success('该分类删除成功');
// } else {
// proxy.$ElMessage.error(res.msg);
// }
// });
deleteClassify({ guid: scope.row.guid }).then((res: any) => {
if (res.code == proxy.$passCode) {
getTreeListData();
proxy.$ElMessage.success('该分类删除成功');
} else {
proxy.$ElMessage.error(res.msg);
}
});
})
}
},
......@@ -103,7 +124,7 @@ const classEditFormItems = ref([{
type: 'input',
maxlength: 50,
placeholder: '请输入',
field: 'classStandardName',
field: 'classifyName',
default: '',
clearable: true,
required: true
......@@ -127,7 +148,7 @@ const classEditFormItems = ref([{
checkStrictly: true,
lazy: false,
props: {
label: "className",
label: "classifyName",
value: "guid",
},
block: true,
......@@ -138,9 +159,13 @@ const classEditFormItems = ref([{
label: '最低安全级别参考',
type: 'select',
placeholder: '请选择',
field: 'lowerLevel',
field: 'gradeGuid',
default: 1,
options: [], //TODO
props: {
label: "name",
value: "guid",
},
required: false,
filterable: true,
clearable: true,
......@@ -148,12 +173,12 @@ const classEditFormItems = ref([{
}, {
label: '业务状态',
type: 'switch',
field: 'state',
field: 'status',
default: 'Y',
activeText: "有效",
inactiveText: "停用",
activeValue: 'Y',
inactiveValue: 'N'
inactiveValue: 'S'
}, {
label: '定义说明',
type: 'textarea',
......@@ -203,11 +228,105 @@ const drawerInfo = ref({
}
})
const drawerBtnClick = (btn, info) => {
const drawerBtnClick = async (btn, info) => {
if (btn.value == 'cancel') {
drawerInfo.value.visible = false;
} else {
if (drawerInfo.value.header.title == '添加分类') {
const params = {
...info,
classifyGradeGuid: router.currentRoute.value.query.guid,
}
const res: any = await saveClassify(params);
if (res.code == proxy.$passCode) {
proxy.$ElMessage.success('添加成功!');
drawerInfo.value.visible = false;
getTreeListData();
} else {
proxy.$ElMessage.error(res.msg);
}
} else {
// 编辑分类
const params = {
...info,
classifyGradeGuid: router.currentRoute.value.query.guid,
guid: currTableInfo.value.guid
}
const res: any = await updateClassify(params);
if (res.code == proxy.$passCode) {
proxy.$ElMessage.success('修改成功!');
drawerInfo.value.visible = false;
getTreeListData();
} else {
proxy.$ElMessage.error(res.msg);
}
}
}
}
const refGradePageParams = ref({
pageIndex: 1,
pageSize: -1,
type: "G"
});
const classifyGradListData = ref([]);
// 获取分级列表
const getClassifyGradListData = async () => {
const res: any = await getClassifyGradList(refGradePageParams.value);
if (res.code == proxy.$passCode) {
classifyGradListData.value = res.data.records || [];
const gradeName = findStandardName(router.currentRoute.value.query.refGradeGuid as any);
classStandardFormItems.value[1].default = gradeName;
} else {
proxy.$ElMessage.error(res.msg);
}
}
const findStandardName = (guid: string) => {
const item: any = classifyGradListData.value.find((item: any) => item.guid == guid);
return item ? item.name : '';
}
// 获取分类树形列表
const treeListParams = ref({
pageIndex: 1,
pageSize: -1,
classifyGradeGuid: router.currentRoute.value.query.guid,
});
const treeListData = ref([]);
const getTreeListData = async () => {
const res: any = await getClassifyTreeList(treeListParams.value);
if (res.code == proxy.$passCode) {
treeListData.value = res.data || [];
tableInfo.value.data = treeListData.value;
classEditFormItems.value[2].options = treeListData.value;
} else {
proxy.$ElMessage.error(res.msg);
}
}
// 这里有个需求就是编辑时，不能选择自己和自己的子分类作为上级分类，每条数据加上disabled属性true or false
const selectParentEdit = (value: any) => {
}
// 获取最低安全级别参考 // 获取分级列表
const gradeTablelist = ref<any>([]);
const getGradeListData = async () => {
const params = {
pageIndex: 1,
pageSize: -1,
classifyGradeGuid: router.currentRoute.value.query.refGradeGuid,
}
const res: any = await getGradeList(params);
if (res.code == proxy.$passCode) {
gradeTablelist.value = res.data.records;
console.log('gradeTablelist', gradeTablelist.value);
for (let i = 0; i < gradeTablelist.value.length; i++) {
gradeTablelist.value[i].name = gradeTablelist.value[i].dataGrade + '级';
}
classEditFormItems.value[3].options = gradeTablelist.value;
} else {
proxy.$ElMessage.error(res.msg);
}
}
......@@ -331,7 +450,9 @@ G6.registerNode('tree-node', {
}, 'single-shape');
onMounted(() => {
getClassifyGradListData();
getTreeListData();
getGradeListData();
graph.value = new G6.TreeGraph({
container: shapeMain.value,
width: shapeMain.value.clientWidth,
......
src/views/data_inventory/classifyGradEdit.vue
......@@ -237,7 +237,7 @@ const newCreateGradeFormItems = ref([{
{
label: '分级描述',
type: 'textarea',
maxlength: 50,
maxlength: 500,
placeholder: '分类分级的描述说明',
field: 'gradeDesc',
default: '',
......
src/views/data_inventory/templateConfig.vue
......@@ -12,47 +12,63 @@ import { useValidator } from '@/hooks/useValidator';
import TemplateItem from './templateItem.vue';
import { getTempleteClassifyData, saveClassifyGrad, getClassifyGradList, deleteClassifyGrad, updateClassifyGrad, getGradeTreeList } from "@/api/modules/dataInventory";
const router = useRouter();
const { required } = useValidator();
const { proxy } = getCurrentInstance() as any;
const refClassifyPageParams = ref({
const refGradePageParams = ref({
pageIndex: 1,
pageSize: 10,
pageSize: -1,
type: "G"
});
const classifyGradListData = ref();
const refClassifyPageParams = ref({
pageIndex: 1,
pageSize: -1,
type: "C"
});
// 分级列表
const classifyGradListData: any = ref([]);
// 分类列表
const classListData: any = ref([]);
//记录分级guid
const classifyGradGuid = ref('');
// 记录分类guid
const classGuid = ref('');
const classListDataLoading = ref(false);
// 获取分级列表
const getClassifyGradListData = async () => {
const res: any = await getClassifyGradList(refClassifyPageParams.value);
const res: any = await getClassifyGradList(refGradePageParams.value);
if (res.code == proxy.$passCode) {
classifyGradListData.value = res.data.records || [];
(classStandardFormItems.value[1].options as any) = classifyGradListData.value;
} else {
proxy.$ElMessage.error(res.msg);
}
}
// 获取分级树形列表
const getGradeTreeListData = async () => {
const res: any = await getGradeTreeList();
//获取分类列表
const getClassListData = async () => {
const res: any = await getClassifyGradList(refClassifyPageParams.value);
if (res.code == proxy.$passCode) {
gradeTreeData.value = res.data || [];
(classStandardFormItems.value[1].options as any) = gradeTreeData.value;
classListData.value = res.data.records || [];
} else {
proxy.$ElMessage.error(res.msg);
}
}
//记录分级guid
const classifyGradGuid = ref('');
// 分级列表
const gradeTreeData = ref('');
onMounted(() => {
getClassifyGradListData();
getGradeTreeListData();
getClassListData();
})
......@@ -114,88 +130,90 @@ const classSearchItemList = ref([
}
]);
const classPage: any = ref({
...commonPageConfig,
classStandardName: ''
});
const classListDataLoading = ref(false);
const classListData: any = ref([{
guid: '1',
name: '工业数据分类',
updateTime: '2020-12-12 10:10:10'
}, {
guid: '2'
}, {
guid: '3'
}, {
guid: '4'
}, {
guid: '5'
}, {
guid: '6'
}, {
guid: '7'
}]);
/** 记录点击省略号弹出菜单的visible */
const cardBtnVisible: any = ref(false);
/** 搜索查询分类标准 */
const searchClass = (val: any, clear: boolean = false) => {
classPage.value.curr = 1;
const searchClass = async (val: any, clear: boolean = false) => {
if (clear) {
classSearchItemList.value.map(item => item.default = '')
// classPage.value.planName = '';
getClassListData();
return;
}
// classPage.value.planName = '';
getClassListData();
};
const params = {
type: 'C',
name: val.classStandardName,
pageIndex: 1,
pageSize: -1
}
const res: any = await getClassifyGradList(params);
if (res.code == proxy.$passCode) {
classListData.value = res.data.records || [];
} else {
proxy.$ElMessage.error(res.msg);
}
const getClassListData = () => {
// classListDataLoading.value = true;
// getPlanList({
// pageIndex: classPage.value.curr,
// pageSize: classPage.value.limit,
// //TODO
// }).then((res: any) => {
// classListDataLoading.value = false;
// if (res === undefined) {
// return;
// }
// if (res.code == proxy.$passCode) {
// const data = res.data || {}
// classListData.value.data = data.records || [];
// } else {
// proxy.$ElMessage.error(res.msg);
// }
// })
}
};
/** 编辑分类 */
const handleClassDataEdit = (item, des = '') => {
const handleClassDataEdit = (params) => {
classGuid.value = params.guid;
newCreateClassStandardDialogInfo.value.submitBtnLoading = false;
newCreateClassStandardDialogInfo.value.visible = true;
newCreateClassStandardDialogInfo.value.title = '编辑分类';
classStandardFormItems.value.forEach(item => {
if (item.field === 'refGradeGuid') {
item.default = params.refGradeGuid
}
if (item.field === 'classStandardName') {
item.default = params.name
}
})
}
// 配置分类
const handleClassDataClick = (item, des = '') => {
// 获取分级标准
router.push({
name: 'classStandardEdit',
query: {
guid: item.guid,
type: des === '' ? '配置' : des,
classStandardName: '工业分类'
classStandardName: item.name,
refGradeGuid: item.refGradeGuid
}
});
}
const handleClassDataDel = (item) => {
const handleClassDataDel = async (item) => {
try {
// 弹出确认框
await proxy.$confirm('此操作将永久删除该分级, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
const res: any = await deleteClassifyGrad({ guid: item.guid });
if (res.code === proxy.$passCode) {
await getClassListData(); // 获取更新后的列表数据
proxy.$ElMessage({
type: 'success',
message: '删除成功!'
});
} else {
proxy.$ElMessage.error(res.msg); // 显示错误信息
}
} catch (error) {
if (error !== 'cancel') {
proxy.$ElMessage({
type: 'info',
message: '已取消删除'
});
}
}
}
/** ------------------------------- 分类标准相关 ------------------------------------- */
const classStandardFormItems = ref([{
label: '分类名称',
......@@ -209,25 +227,19 @@ const classStandardFormItems = ref([{
required: true
}, {
label: '分级标准',
type: 'tree-select',
type: 'select',
placeholder: '请选择',
field: 'gradeStandard',
field: 'refGradeGuid',
options: [],
nodeKey: 'guid',
checkStrictly: false,//只能选择叶子节点。
lazy: false,
multiple: false,
collapseTagsTooltip: true,
collapseTags: true,
props: {
label: "name",
value: "guid",
children: "gradeRSVOList"
},
filterable: true,
clearable: true,
default: '',
required: true
required: true,
block: true,
}]);
const classStandardFormRules = ref({
......@@ -250,18 +262,46 @@ const newCreateClassStandardDialogInfo = ref({
cancel: () => {
newCreateClassStandardDialogInfo.value.visible = false;
},
submit: (btn, info) => {
newCreateClassStandardDialogInfo.value.visible = false;
classPage.value.curr = 1;
getClassListData();
//跳转到编辑页面
router.push({
name: 'classStandardEdit',
query: {
guid: '1',
classStandardName: '工业分类'
submit: async (btn, info) => {
if (newCreateClassStandardDialogInfo.value.title === '新增分类') {
newCreateClassStandardDialogInfo.value.submitBtnLoading = true;
const params = {
name: info.classStandardName,
refGradeGuid: info.refGradeGuid,
type: 'C'
}
});
const res: any = await saveClassifyGrad(params);
if (res.code == proxy.$passCode) {
await getClassListData();
proxy.$ElMessage({
type: 'success',
message: '新增分类成功'
})
newCreateClassStandardDialogInfo.value.submitBtnLoading = false;
newCreateClassStandardDialogInfo.value.visible = false;
} else {
proxy.$ElMessage.error(res.msg);
}
} else {
newCreateClassStandardDialogInfo.value.submitBtnLoading = true;
const params = {
name: info.classStandardName,
refGradeGuid: info.refGradeGuid,
guid: classGuid.value,
type: 'C'
}
const res: any = await updateClassifyGrad(params);
if (res.code == proxy.$passCode) {
getClassListData();
proxy.$ElMessage({
type: 'success',
message: '修改分类成功'
})
newCreateClassStandardDialogInfo.value.visible = false;
} else {
proxy.$ElMessage.error(res.msg);
}
}
}
}
})
......@@ -389,6 +429,7 @@ const handleClassifyGradDataDel = async (item) => {
// 编辑分级
const handleClassifyGradDataEdit = (itemGradeName) => {
newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
classifyGradGuid.value = itemGradeName.guid;
newCreateGradeStandardDialogInfo.value.visible = true;
newCreateGradeStandardDialogInfo.value.title = '编辑分级';
......@@ -461,7 +502,6 @@ const getClassificationTemplateList = async () => {
}
onBeforeMount(() => {
getClassListData();
getClassificationTemplateList();
})
......@@ -512,10 +552,10 @@ onBeforeMount(() => {
<svg-icon name="folder" />
</el-icon>
<div class="title">{{ item.name }}</div>
<div class="desc-row">
<!-- <div class="desc-row">
<div class="desc">{{ '分级标准' }}</div>
<div class="desc">{{ item.updateTime }}</div>
</div>
</div> -->
</div>
<div v-if="!classListData.length" class="card-noData">
<img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
......@@ -554,7 +594,7 @@ onBeforeMount(() => {
<div class="desc">{{ item.updateTime }}</div>
</div> -->
</div>
<div v-if="!classListData.length" class="card-noData">
<div v-if="!classifyGradListData.length" class="card-noData">
<img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
<span>暂无分类标准</span>
</div>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!