Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
ad81bf4a by xukangle
Options

update:分级标准tab完成

1 parent 73b16ac8
Expand all
Inline Side-by-side
Showing 11 changed files with 1066 additions and 49 deletions
.env.development
...@@ -3,7 +3,8 @@ VITE_APP_TITLE = 数据资产管理系统 ...@@ -3,7 +3,8 @@ VITE_APP_TITLE = 数据资产管理系统
3 # 接口域名 3 # 接口域名
4 # VITE_API_BASEURL = https://www.zgsjzc.com/api 4 # VITE_API_BASEURL = https://www.zgsjzc.com/api
5 # VITE_API_BASEURL = https://swzl-test.csbr.cn/api 5 # VITE_API_BASEURL = https://swzl-test.csbr.cn/api
6 VITE_API_BASEURL = http://10.4.82.30:8052/ 6 # VITE_API_BASEURL = http://10.4.82.30:8052/
7 VITE_API_BASEURL = http://10.4.82.1:28052/
7 # 平台用户 接口请地址 8 # 平台用户 接口请地址
8 VITE_APP_USER_API_BASEURL = gateway-server/user 9 VITE_APP_USER_API_BASEURL = gateway-server/user
9 # 系统管理 接口地址 10 # 系统管理 接口地址
......
components.d.ts
...@@ -54,6 +54,7 @@ declare module '@vue/runtime-core' { ...@@ -54,6 +54,7 @@ declare module '@vue/runtime-core' {
54 Table_tools: typeof import('./src/components/Tools/table_tools.vue')['default'] 54 Table_tools: typeof import('./src/components/Tools/table_tools.vue')['default']
55 Table_v2: typeof import('./src/components/Table/table_v2.vue')['default'] 55 Table_v2: typeof import('./src/components/Table/table_v2.vue')['default']
56 Tabs: typeof import('./src/components/Tabs/index.vue')['default'] 56 Tabs: typeof import('./src/components/Tabs/index.vue')['default']
57 TemplateItem: typeof import('./src/components/TemplateItem/index.vue')['default']
57 Toolbar: typeof import('./src/components/LineageGraph/toolbar.vue')['default'] 58 Toolbar: typeof import('./src/components/LineageGraph/toolbar.vue')['default']
58 Topbar: typeof import('./src/components/LineageGraph/topbar.vue')['default'] 59 Topbar: typeof import('./src/components/LineageGraph/topbar.vue')['default']
59 Transfer: typeof import('./src/components/Transfer/index.vue')['default'] 60 Transfer: typeof import('./src/components/Transfer/index.vue')['default']
......
src/api/modules/dataInventory.ts
1 import request from "@/utils/request"; 1 import request from "@/utils/request";
2 2
3
4 /**
5 * 获取数据级别
6 * @param {Object}
7 * { paramCode: "DATA-CLASSIFY" }
8 * DATA-CLASSIFY 数据类别
9 * DATA-GRADE 数据级别
10 */
11 export const getLargeCategoryList = (data) => request({
12 url:`${import.meta.env.VITE_APP_API_BASEURL}/data-dict/get-data-list`,
13 method: 'post',
14 data
15 })
16
17
3 /** 分类分级模板数据 */ 18 /** 分类分级模板数据 */
4 export const getTempleteClassifyData = (data) => request({ 19 export const getTempleteClassifyData = (data) => request({
5 url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/cg-template/page-list`, 20 url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/cg-template/page-list`,
6 method: 'post', 21 method: 'post',
7 data 22 data
8 }) 23 })
24
25
26 /** 新增分级
27 *
28 * @param {Object}
29 * @path /classify-grade/save
30 */
31
32 export const saveClassifyGrad = (data) => request({
33 url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/save`,
34 method: 'post',
35 data
36 })
37
38 /** 删除分级
39 * @param {Object}
40 * @path /classify-grade/delete
41 * */
42
43 export const deleteClassifyGrad = (data) => request({
44 url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/delete`,
45 method: 'delete',
46 headers: {
47 'Content-Type': 'multipart/form-data',
48 },
49 data
50 })
51 /** 修改分级
52 * @param {Object}
53 * @path /classify-grade/update
54 * */
55
56 export const updateClassifyGrad = (data) => request({
57 url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/update`,
58 method: 'post',
59 data
60 })
61
62
63 /**
64 * 分级列表
65 * @param {Object}
66 * @path /classify-grade/page-list
67 */
68
69 export const getClassifyGradList = (data) => request({
70 url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/page-list`,
71 method: 'post',
72 data
73 })
74
75
76 /**
77 * 分级新增
78 * @param {Object}
79 * @path /grade/save
80 */
81 export const saveGrade = (data) => request({
82 url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/save`,
83 method: 'post',
84 data
85 })
86
87 /**
88 * 分级更新
89 * @param {Object}
90 * @path /grade/update
91 * */
92 export const updateGrade = (data) => request({
93 url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/update`,
94 method: 'post',
95 data
96 })
97
98 /**
99 * 分级列表
100 * @param {Object}
101 * @path /grade/page-list
102 */
103 export const getGradeList = (data) => request({
104 url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/page-list`,
105 method: 'post',
106 data
107 })
108
109 /**
110 * 批量删除分级
111 * @param {Array}
112 * @path /grade/delete
113 * */
114 export const deleteGrade = (data) => request({
115 url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/delete`,
116 method: 'delete',
117 data
118 })
119
120
121 /*---------------------------------分类标准 tab -----------------------------*/
122
123 /**
124 * 分级树形结构
125 * @param no params
126 * @path /grade/tree-list
127 */
128 export const getGradeTreeList = () => request({
129 url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/tree-list`,
130 method: 'post',
131 })
......
src/api/modules/queryService.ts
...@@ -46,8 +46,13 @@ export const getImageUrl = (params) => request({ ...@@ -46,8 +46,13 @@ export const getImageUrl = (params) => request({
46 }) 46 })
47 47
48 /** 查看图片 */ 48 /** 查看图片 */
49 // export const getImageContent = (params) => request({
50 // url: `${import.meta.env.VITE_APP_API_BASEURL}/obs/view-pic?filePath=${params}`,
51 // method: 'get',
52 // responseType: 'blob'
53 // });
49 export const getImageContent = (params) => request({ 54 export const getImageContent = (params) => request({
50 url: `${import.meta.env.VITE_APP_API_BASEURL}/obs/view-pic?filePath=${params}`, 55 url: `${import.meta.env.VITE_APP_API_BASEURL}/obs/view-pic`,
51 method: 'get', 56 method: 'get',
52 responseType: 'blob' 57 responseType: 'blob'
53 }); 58 });
...@@ -186,7 +191,7 @@ export const exportCollectTask = (params) => request({ ...@@ -186,7 +191,7 @@ export const exportCollectTask = (params) => request({
186 method: 'post', 191 method: 'post',
187 data: params, 192 data: params,
188 responseType: 'blob' 193 responseType: 'blob'
189 }) 194 })
190 195
191 // 导出数据字典模板 196 // 导出数据字典模板
192 export const exportDictionary = (params) => request({ 197 export const exportDictionary = (params) => request({
...@@ -194,4 +199,4 @@ export const exportDictionary = (params) => request({ ...@@ -194,4 +199,4 @@ export const exportDictionary = (params) => request({
194 method: 'post', 199 method: 'post',
195 data: params, 200 data: params,
196 responseType: 'blob' 201 responseType: 'blob'
197 })
...\ No newline at end of file ...\ No newline at end of file
202 })
......
src/router/modules/dataInventory.ts
...@@ -71,6 +71,39 @@ const routes: RouteRecordRaw[] = [ ...@@ -71,6 +71,39 @@ const routes: RouteRecordRaw[] = [
71 } 71 }
72 } 72 }
73 }, 73 },
74 {
75 path: 'newCreate-class',
76 name: 'newCreateClass',
77 component: () => import('@/views/data_inventory/newCreateClass.vue'),
78 meta: {
79 title: '新增分类',
80 sidebar: false,
81 breadcrumb: false,
82 cache: true,
83 reuse: true,
84 editPage: true,
85 activeMenu: '/data-inventory/classify-grade-manage/template-config'
86 },
87 },
88 {
89 path: 'classifyGrad-edit',
90 name: 'classifyGradEdit',
91 component: () => import('@/views/data_inventory/classifyGradEdit.vue'),
92 meta: {
93 title: '编辑-',
94 sidebar: false,
95 breadcrumb: false,
96 cache: true,
97 reuse: true,
98 editPage: true,
99 activeMenu: '/data-inventory/classify-grade-manage/template-config'
100 },
101 beforeEnter: (to, from) => {
102 if (to.query.classClassifyGradName) {
103 to.meta.title = `编辑-${to.query.classClassifyGradName}`;
104 }
105 }
106 },
74 ], 107 ],
75 } 108 }
76 ] 109 ]
......
src/views/data_inventory/classStandardEdit.vue
...@@ -405,6 +405,10 @@ onMounted(() => { ...@@ -405,6 +405,10 @@ onMounted(() => {
405 name: '装备制造' 405 name: '装备制造'
406 }] 406 }]
407 }); 407 });
408 graph.value.on('node:mouseenter', (e) => {
409 const nodeItem = e.item // 获取鼠标进入的节点元素对象
410 console.log('鼠标移入', nodeItem._cfg)
411 })
408 graph.value.render(); 412 graph.value.render();
409 graph.value.fitView(); 413 graph.value.fitView();
410 graph.value.on('node:click', (evt: any) => { 414 graph.value.on('node:click', (evt: any) => {
......
src/views/data_inventory/classifyGradEdit.vue 0 → 100644
1 <route lang="yaml">
2 name: classifyGradEdit //新增分级分类模板
3 </route>
4
5 <script lang="ts" setup name="classifyGradEdit">
6
7 import router from "@/router";
8 import { ref } from "vue";
9 import { saveGrade, getGradeList, deleteGrade, getLargeCategoryList, updateGrade } from '@/api/modules/dataInventory';
10
11 onMounted(() => {
12 getGradeListData();
13 Promise.all([getDataGrade(), getDataClassify()]);
14 });
15
16 // 获取分级列表
17 const getGradeListData = async () => {
18 const params = {
19 pageIndex: 1,
20 pageSize: -1,
21 classifyGradeGuid: guid
22 }
23 const res: any = await getGradeList(params);
24 if (res.code == proxy.$passCode) {
25 tableInfo.value.data = res.data.records;
26 } else {
27 proxy.$ElMessage.error(res.msg);
28 }
29 }
30
31 // 获取数据类别
32 const getDataGrade = async () => {
33 const params = {
34 paramCode: "DATA-CLASSIFY"
35 }
36 const res: any = await getLargeCategoryList(params);
37 if (res.code == proxy.$passCode) {
38 // 提出value和label 作为select的options
39 const options = res.data.map((item: any) => ({
40 label: item.paramName,
41 value: item.paramValue
42 }));
43 newCreateGradeFormItems.value[1].options = options;
44 classDataRef.value = options;
45 } else {
46 proxy.$ElMessage.error(res.msg);
47 }
48 }
49
50 // 获取数据级别
51 const getDataClassify = async () => {
52 const params = {
53 paramCode: "DATA-GRADE"
54 }
55 const res: any = await getLargeCategoryList(params);
56 if (res.code == proxy.$passCode) {
57 // 提出value和label 作为select的options
58 const options = res.data.map((item: any) => ({
59 label: item.paramName,
60 value: item.paramValue
61 }));
62 newCreateGradeFormItems.value[0].options = options;
63 // 这里需要过滤已经在表格中数据级别
64 gradeDataRef.value = options;
65 } else {
66 proxy.$ElMessage.error(res.msg);
67 }
68 }
69
70 // 新增过滤数据级别
71 const filterDataGrade = () => {
72 const selectedDataGrade = new Set();
73 tableInfo.value.data.forEach((item: any) => {
74 if (item.dataGrade) {
75 selectedDataGrade.add(item.dataGrade);
76 }
77 });
78 const filteredOptions = gradeDataRef.value.filter(option => !selectedDataGrade.has(option.value));
79 (newCreateGradeFormItems.value[0].options as any[]) = filteredOptions;
80 };
81
82 // 编辑过滤数据级别，需包含当前数据级别，不排除自己
83 const filterDataGradeEdit = (dataGrade: string) => {
84 const selectedDataGrade = new Set();
85 tableInfo.value.data.forEach((item: any) => {
86 if (item.dataGrade) {
87 selectedDataGrade.add(item.dataGrade);
88 }
89 });
90 // 移除当前数据级别dataGrade
91 selectedDataGrade.delete(dataGrade);
92 console.log(selectedDataGrade,);
93 const filteredOptions = gradeDataRef.value.filter(option => !selectedDataGrade.has(option.value));
94 (newCreateGradeFormItems.value[0].options as any[]) = filteredOptions;
95 };
96
97 const tableRef = ref();
98 const classDataRef = ref();
99 const gradeDataRef = ref();
100 const fullscreenLoading = ref(false);
101 const editClassifyGradeGuid = ref('');
102 const { proxy } = getCurrentInstance() as any;
103 const guidArray = ref<any[]>([]);
104 // 获取query参数 中的guid
105 const guid = router.currentRoute.value.query.guid;
106 const tableInfo = ref({
107 id: "data-class-standard-table",
108 multiple: true,
109 fields: [
110 { label: "序号", field: 'orderNum', width: 56, align: "center" },
111 {
112 label: "数据级别", field: "dataGrade", width: 120, getName: (scope) => {
113 let dataGrade = scope.row.dataGrade;
114 return dataGrade + '级';
115 }
116 },
117 {
118 label: "数据类别", field: "dataClassify", width: 120, getName: (scope) => {
119 let dataClassify = scope.row.dataClassify;
120 return classDataRef.value.find((item: any) => item.value === dataClassify)?.label;
121 }
122 },
123 { label: "分级描述", field: "gradeDesc", align: "left", },
124
125 ],
126 actionInfo: {
127 label: "操作",
128 type: "btn",
129 width: 120,
130 btns: [
131 {
132 label: "编辑", value: "edit", click: (scope) => {
133 console.log(scope);
134 filterDataGradeEdit(scope.row.dataGrade);
135 newCreateGradeStandardDialogInfo.value.visible = true;
136 newCreateGradeStandardDialogInfo.value.title = '编辑分类';
137 newCreateGradeFormItems.value.forEach(item => {
138 item.default = scope.row[item.field];
139 })
140 editClassifyGradeGuid.value = scope.row.guid;
141 }
142 },
143 {
144 label: "删除", value: "delete", click: (scope) => {
145 guidArray.value = []; // 重置数组
146 guidArray.value.push(scope.row.guid);
147 batchRemobe();
148 }
149 },
150 ],
151 },
152 data: [],
153 showPage: false,
154 loading: false,
155 });
156
157 // 选择勾选的数据
158 const onTableSelectChange = async (selection: any[]) => {
159 guidArray.value = []; // 重置数组
160 selection.forEach((item: any) => {
161 guidArray.value.push(item.guid);
162 });
163 };
164
165 // 批量删除
166 const batchRemobe = async () => {
167 // 批量删除,增加confirm确认弹窗
168 if (guidArray.value.length == 0) {
169 proxy.$ElMessage({
170 type: 'warning',
171 message: '请选择要删除的数据'
172 })
173 return;
174 }
175
176 // confirm弹窗
177 proxy.$confirm('是否删除选中数据?', '提示', {
178 confirmButtonText: '确定',
179 cancelButtonText: '取消',
180 type: 'warning'
181 }).then(async () => {
182 const res: any = await deleteGrade(guidArray.value);
183 if (res.code == proxy.$passCode) {
184 proxy.$ElMessage({
185 type: 'success',
186 message: '删除成功'
187 })
188 getGradeListData();
189 } else {
190 proxy.$ElMessage.error(res.msg);
191 }
192 }).catch(() => {
193 proxy.$ElMessage({
194 type: 'info',
195 message: '已取消删除'
196 });
197 });
198
199 };
200
201 /**弹窗配置 */
202 const newCreateGradeFormItems = ref([{
203 label: '数据级别',
204 type: 'select',
205 placeholder: '请选择',
206 field: 'dataGrade',
207 default: '',
208 options: gradeDataRef.value,
209 required: true,
210 filterable: true,
211 clearable: true,
212 visible: true,
213 },
214 {
215 label: '数据类别',
216 type: 'select',
217 placeholder: '请选择',
218 field: 'dataClassify',
219 default: '',
220 options: [],
221 required: true,
222 filterable: true,
223 clearable: true,
224 visible: true,
225 },
226 {
227 label: '序号',
228 type: 'input',
229 maxlength: 19,
230 placeholder: '请输入',
231 field: 'orderNum',
232 default: '',
233 clearable: true,
234 required: true,
235 regexp: /\D/g
236 },
237 {
238 label: '分级描述',
239 type: 'textarea',
240 maxlength: 50,
241 placeholder: '分类分级的描述说明',
242 field: 'gradeDesc',
243 default: '',
244 clearable: true,
245 required: false,
246 block: true,
247 }]);
248
249 const newCreateGradeFormRules = ref({
250 dataGrade: [
251 { required: true, message: '请选择数据级别', trigger: 'change' }
252 ],
253 orderNum: [
254 { required: true, message: '请输入序号', trigger: 'blur' }
255 ],
256 dataClassify: [
257 { required: true, message: '请选择数据类别', trigger: 'change' }
258 ]
259 });
260
261 const newCreateGradeStandardDialogInfo = ref({
262 visible: false,
263 size: 860,
264 title: "添加分类",
265 type: "",
266 formInfo: {
267 id: "grade-form",
268 items: newCreateGradeFormItems.value,
269 rules: newCreateGradeFormRules.value,
270 },
271 submitBtnLoading: false,
272 btns: {
273 cancel: () => {
274 newCreateGradeStandardDialogInfo.value.visible = false;
275 },
276 submit: async (btn, info) => {
277 console.log(info, guid);
278 newCreateGradeStandardDialogInfo.value.submitBtnLoading = true;
279 if (newCreateGradeStandardDialogInfo.value.title === '编辑分类') {
280 const params = {
281 ...info,
282 guid: editClassifyGradeGuid.value,
283 classifyGradeGuid: guid
284 }
285
286 const res: any = await updateGrade(params);
287 if (res.code == proxy.$passCode) {
288 proxy.$ElMessage({
289 type: 'success',
290 message: '修改分类成功'
291 })
292 getGradeListData();
293 newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
294 newCreateGradeStandardDialogInfo.value.visible = false;
295 } else {
296 proxy.$ElMessage.error(res.msg);
297 }
298 return;
299 } else {
300 const params = {
301 ...info,
302 classifyGradeGuid: guid
303 }
304 const res: any = await saveGrade(params);
305 if (res.code == proxy.$passCode) {
306 proxy.$ElMessage({
307 type: 'success',
308 message: '新增分类成功'
309 })
310 getGradeListData();
311 newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
312 newCreateGradeStandardDialogInfo.value.visible = false;
313 } else {
314 proxy.$ElMessage.error(res.msg);
315 }
316 }
317 }
318 }
319 })
320
321 const newStandard = () => {
322 filterDataGrade();
323 newCreateGradeStandardDialogInfo.value.visible = true;
324 newCreateGradeFormItems.value.forEach(item => item.default = '');
325 }
326
327
328
329 </script>
330
331 <template>
332 <div class="container_wrap" v-loading="fullscreenLoading">
333 <div class="content_main">
334 <div class="table-top-btns">
335 <el-button type="primary" @click="newStandard">新增标准</el-button>
336 <el-button @click="batchRemobe">批量删除</el-button>
337 </div>
338 <Table ref="tableRef" :tableInfo="tableInfo" @tableSelectionChange="onTableSelectChange" />
339 </div>
340 <Dialog_form :dialogConfigInfo="newCreateGradeStandardDialogInfo" />
341 </div>
342 </template>
343 <style lang="scss" scoped>
344 .container_wrap {
345 padding: 0px;
346 }
347
348 .content_main {
349 height: calc(100% - 44px);
350 padding: 17px 16px 10px 16px;
351
352 .table-top-btns {
353 display: flex;
354 margin-bottom: 12px;
355 }
356 }
357 </style>
src/views/data_inventory/newCreateClass.vue 0 → 100644
1 <route lang="yaml">
2 name: newCreateClass //新增分级分类模板
3 </route>
4
5 <script lang="ts" setup name="newCreateClass">
6 import router from "@/router";
7 import { getMetaDataBase } from '@/api/modules/dataMetaService';
8 import { ref } from "vue";
9
10
11 onMounted(async () => {
12 const params = {
13 pageIndex: 1,
14 pageSize: -1,
15 }
16 const res = await getMetaDataBase(params)
17 console.log(res);
18 });
19
20 // 表单引用
21 const formRef = ref();
22 const tableRef = ref();
23 const fullscreenLoading = ref(false);
24 const isExpand = ref(true);
25 const newCreateClassFormItems = ref([{
26 label: '分类名称',
27 type: 'input',
28 maxlength: 50,
29 placeholder: '请输入',
30 field: 'categoryName',
31 default: '',
32 clearable: true,
33 required: true
34 }, {
35 label: '引用分级标准',
36 type: 'select',
37 placeholder: '请选择',
38 field: 'ReferenceGradingStandard',
39 default: '',
40 options: [], //TODO
41 required: true,
42 filterable: true,
43 clearable: true,
44 visible: true,
45 }]);
46
47 const formRules = ref({
48 templeteName: [
49 { required: true, message: '请输入模板名称', trigger: 'blur' },
50 { max: 50, message: '长度在 50 个字符以内', trigger: 'blur' }
51 ],
52 industryCategory: [
53 { required: true, message: '请选择行业分类', trigger: 'change' }
54 ],
55 gradingStandard: [
56 { required: true, message: '请选择分级标准', trigger: 'change' }
57 ]
58 });
59
60 const tableInfo = ref({
61 id: "data-class-standard-table",
62 fields: [
63 { label: "序号", type: "index", width: 56, align: "center" },
64 { label: "层级", field: "databaseNameZh", width: 160, },
65 { label: "状态", field: "databaseName", width: 120, },
66 { label: "定义说明", field: "tableCount", width: 120, align: "right", },
67 { label: "最低安全级别", field: "storageCapacities", align: "right", width: 220, },
68 { label: "创建时间", field: "columns", width: 140, align: "right", },
69 ],
70 actionInfo: {
71 show: false,
72 },
73 data: [
74 {
75 index: 1,
76 databaseNameZh: "数据库名称",
77 databaseName: "数据库名",
78 tableCount: 0,
79 storageCapacities: 0,
80 columns: 0,
81 },
82 {
83 index: 2,
84 databaseNameZh: "数据库名称",
85 databaseName: "数据库名",
86 tableCount: 0,
87 storageCapacities: 0,
88 columns: 0,
89 },
90 {
91 index: 3,
92 databaseNameZh: "数据库名称",
93 databaseName: "数据库名",
94 tableCount: 0,
95 storageCapacities: 0,
96 columns: 0,
97 },
98 {
99 index: 4,
100 databaseNameZh: "数据库名称",
101 databaseName: "数据库名",
102 tableCount: 0,
103 storageCapacities: 0,
104 columns: 0,
105 },
106 {
107 index: 5,
108 databaseNameZh: "数据库名称",
109 databaseName: "数据库名",
110 tableCount: 0,
111 storageCapacities: 0,
112 columns: 0,
113 },
114 {
115 index: 6,
116 databaseNameZh: "数据库名称",
117 databaseName: "数据库名",
118 tableCount: 0,
119 storageCapacities: 0,
120 columns: 0,
121 },
122
123 ],
124 showPage: false,
125 loading: false,
126 });
127
128 const onTableSelectChange = (selection: any[]) => {
129 console.log(selection);
130 };
131
132 const cancel = () => {
133 // 返回上一页路由
134 router.back();
135 };
136
137 const save = async () => {
138 console.log('save');
139 // 校验表单
140 const res = formRef.value;
141 res.ruleFormRef.validate((valid: any) => {
142 if (valid) {
143 // 表单校验通过
144 console.log('表单校验通过');
145 } else {
146 console.log('表单校验不通过');
147 return false;
148 }
149 });
150
151
152 };
153 </script>
154
155 <template>
156 <div class="container_wrap" v-loading="fullscreenLoading">
157 <div class="content_main">
158 <ContentWrap id="id-baseInfo" title="基础信息" description="" style="margin-top: 8px;" :expandSwicth=isExpand>
159 <Form ref="formRef" :itemList="newCreateClassFormItems" formId="main-model-edit" col="col3" :rules=formRules />
160 </ContentWrap>
161 <ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description="" style="margin-top:16px;"
162 :expandSwicth=isExpand>
163 <div class="table-content_wrap">
164 <Table ref="tableRef" :tableInfo="tableInfo" />
165 </div>
166 </ContentWrap>
167 </div>
168 <div class="bottom_tool_wrap">
169 <el-button @click="cancel">取消</el-button>
170 <el-button type="primary" @click="save">后台运行</el-button>
171 </div>
172 </div>
173 </template>
174
175 <style lang="scss" scoped>
176 .container_wrap {
177 padding: 0px;
178 }
179
180 .content_main {
181 height: calc(100% - 44px);
182 padding: 10px 16px;
183
184 .table-content_wrap {
185 width: 100%;
186 height: 213px;
187 }
188 }
189
190 .bottom_tool_wrap {
191 display: flex;
192 justify-content: center;
193 border-top: 1px solid #D9D9D9;
194 padding-top: 8px;
195
196 }
197 </style>
src/views/data_inventory/newCreateTemplate.vue
...@@ -3,10 +3,26 @@ ...@@ -3,10 +3,26 @@
3 </route> 3 </route>
4 4
5 <script lang="ts" setup name="newCreateTemplate"> 5 <script lang="ts" setup name="newCreateTemplate">
6 import router from "@/router";
7 import { getMetaDataBase } from '@/api/modules/dataMetaService';
6 import { ref } from "vue"; 8 import { ref } from "vue";
9
10
11 onMounted(async () => {
12 const params = {
13 pageIndex: 1,
14 pageSize: -1,
15 }
16 const res = await getMetaDataBase(params)
17 console.log(res);
18 });
19
20 // 表单引用
21 const formRef = ref();
22 const tableRef = ref();
7 const fullscreenLoading = ref(false); 23 const fullscreenLoading = ref(false);
8 const isExpand = ref(true); 24 const isExpand = ref(true);
9 const classStandardFormItems = ref([{ 25 const newCreateTemplateFormItems = ref([{
10 label: '模板名称', 26 label: '模板名称',
11 type: 'input', 27 type: 'input',
12 maxlength: 50, 28 maxlength: 50,
...@@ -38,34 +54,113 @@ const classStandardFormItems = ref([{ ...@@ -38,34 +54,113 @@ const classStandardFormItems = ref([{
38 clearable: true, 54 clearable: true,
39 visible: true, 55 visible: true,
40 }]); 56 }]);
41 const dataShowMethod = ref('shape'); 57
58 const formRules = ref({
59 templeteName: [
60 { required: true, message: '请输入模板名称', trigger: 'blur' },
61 { max: 50, message: '长度在 50 个字符以内', trigger: 'blur' }
62 ],
63 industryCategory: [
64 { required: true, message: '请选择行业分类', trigger: 'change' }
65 ],
66 gradingStandard: [
67 { required: true, message: '请选择分级标准', trigger: 'change' }
68 ]
69 });
70
42 const tableInfo = ref({ 71 const tableInfo = ref({
43 id: "data-class-standard-table", 72 id: "data-class-standard-table",
44 multiple: false, 73 multiple: true,
45 fields: [ 74 fields: [
46 { label: "序号", type: "index", width: 56, align: "center" }, 75 { label: "序号", type: "index", width: 56, align: "center" },
47 { label: "数据库名称", field: "className", width: 160, }, 76 { label: "数据库名称", field: "databaseNameZh", width: 160, },
48 { label: "数据库名", field: "levelName", width: 120 }, 77 { label: "数据库名", field: "databaseName", width: 120, },
49 { label: "总表数", field: "state", type: "tag", width: 120, align: "center" }, 78 { label: "总表数", field: "tableCount", width: 120, align: "right", },
50 { label: "存储量（约/MB）", field: "description", }, 79 { label: "存储量（约/MB）", field: "storageCapacities", align: "right", width: 220, },
51 { label: "总字段数", field: "minLevel", width: 140 }, 80 { label: "总字段数", field: "columns", width: 140, align: "right", },
81 ],
82 actionInfo: {
83 show: false,
84 },
85 data: [
86 {
87 index: 1,
88 databaseNameZh: "数据库名称",
89 databaseName: "数据库名",
90 tableCount: 0,
91 storageCapacities: 0,
92 columns: 0,
93 },
94 {
95 index: 2,
96 databaseNameZh: "数据库名称",
97 databaseName: "数据库名",
98 tableCount: 0,
99 storageCapacities: 0,
100 columns: 0,
101 },
102 {
103 index: 3,
104 databaseNameZh: "数据库名称",
105 databaseName: "数据库名",
106 tableCount: 0,
107 storageCapacities: 0,
108 columns: 0,
109 },
110 {
111 index: 4,
112 databaseNameZh: "数据库名称",
113 databaseName: "数据库名",
114 tableCount: 0,
115 storageCapacities: 0,
116 columns: 0,
117 },
118 {
119 index: 5,
120 databaseNameZh: "数据库名称",
121 databaseName: "数据库名",
122 tableCount: 0,
123 storageCapacities: 0,
124 columns: 0,
125 },
126 {
127 index: 6,
128 databaseNameZh: "数据库名称",
129 databaseName: "数据库名",
130 tableCount: 0,
131 storageCapacities: 0,
132 columns: 0,
133 },
134
52 ], 135 ],
53 data: [{
54 guid: '1',
55 children: [{
56 guid: '1-1'
57 }]
58 }],
59 showPage: false, 136 showPage: false,
60 loading: false, 137 loading: false,
61 }); 138 });
62 139
140 const onTableSelectChange = (selection: any[]) => {
141 console.log(selection);
142 };
143
63 const cancel = () => { 144 const cancel = () => {
64 console.log('cancel'); 145 // 返回上一页路由
146 router.back();
65 }; 147 };
66 148
67 const save = () => { 149 const save = async () => {
68 console.log('save'); 150 console.log('save');
151 // 校验表单
152 const res = formRef.value;
153 res.ruleFormRef.validate((valid: any) => {
154 if (valid) {
155 // 表单校验通过
156 console.log('表单校验通过');
157 } else {
158 console.log('表单校验不通过');
159 return false;
160 }
161 });
162
163
69 }; 164 };
70 </script> 165 </script>
71 166
...@@ -73,18 +168,20 @@ const save = () => { ...@@ -73,18 +168,20 @@ const save = () => {
73 <div class="container_wrap" v-loading="fullscreenLoading"> 168 <div class="container_wrap" v-loading="fullscreenLoading">
74 <div class="content_main"> 169 <div class="content_main">
75 <ContentWrap id="id-baseInfo" title="模板信息" description="" style="margin-top: 8px;" :expandSwicth=isExpand> 170 <ContentWrap id="id-baseInfo" title="模板信息" description="" style="margin-top: 8px;" :expandSwicth=isExpand>
76 <Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" /> 171 <Form ref="formRef" :itemList="newCreateTemplateFormItems" formId="main-model-edit" col="col3"
172 :rules=formRules />
77 </ContentWrap> 173 </ContentWrap>
78 <ContentWrap id="id-classStandard" class="detail-content" title="选择元数据" description="" style="margin-top:16px;" 174 <ContentWrap id="id-classStandard" class="detail-content" title="选择元数据" description="" style="margin-top:16px;"
79 :expandSwicth=isExpand> 175 :expandSwicth=isExpand>
80 176 <div class="table-content_wrap">
177 <Table ref="tableRef" :tableInfo="tableInfo" @tableSelectionChange="onTableSelectChange" />
178 </div>
81 </ContentWrap> 179 </ContentWrap>
82 </div> 180 </div>
83 <div class=" bottom_tool_wrap"> 181 <div class="bottom_tool_wrap">
84 <el-button @click="cancel">取消</el-button> 182 <el-button @click="cancel">取消</el-button>
85 <el-button type="primary" @click="save">保存</el-button> 183 <el-button type="primary" @click="save">后台运行</el-button>
86 </div> 184 </div>
87
88 </div> 185 </div>
89 </template> 186 </template>
90 187
...@@ -96,5 +193,18 @@ const save = () => { ...@@ -96,5 +193,18 @@ const save = () => {
96 .content_main { 193 .content_main {
97 height: calc(100% - 44px); 194 height: calc(100% - 44px);
98 padding: 10px 16px; 195 padding: 10px 16px;
196
197 .table-content_wrap {
198 width: 100%;
199 height: 213px;
200 }
201 }
202
203 .bottom_tool_wrap {
204 display: flex;
205 justify-content: center;
206 border-top: 1px solid #D9D9D9;
207 padding-top: 8px;
208
99 } 209 }
100 </style> 210 </style>
......
src/views/data_inventory/templateConfig.vue
...@@ -10,12 +10,51 @@ import { MoreFilled } from "@element-plus/icons-vue"; ...@@ -10,12 +10,51 @@ import { MoreFilled } from "@element-plus/icons-vue";
10 import { commonPageConfig } from '@/components/PageNav/index'; 10 import { commonPageConfig } from '@/components/PageNav/index';
11 import { useValidator } from '@/hooks/useValidator'; 11 import { useValidator } from '@/hooks/useValidator';
12 import TemplateItem from '@/components/TemplateItem/index.vue' 12 import TemplateItem from '@/components/TemplateItem/index.vue'
13 import { getTempleteClassifyData } from "@/api/modules/dataInventory"; 13 import { getTempleteClassifyData, saveClassifyGrad, getClassifyGradList, deleteClassifyGrad, updateClassifyGrad, getGradeTreeList } from "@/api/modules/dataInventory";
14
15
14 16
15 const router = useRouter(); 17 const router = useRouter();
16 const { required } = useValidator(); 18 const { required } = useValidator();
17 const { proxy } = getCurrentInstance() as any; 19 const { proxy } = getCurrentInstance() as any;
18 20
21 const refClassifyPageParams = ref({
22 pageIndex: 1,
23 pageSize: 10,
24 type: "G"
25 });
26 const classifyGradListData = ref();
27
28 const getClassifyGradListData = async () => {
29 const res: any = await getClassifyGradList(refClassifyPageParams.value);
30 if (res.code == proxy.$passCode) {
31 classifyGradListData.value = res.data.records || [];
32 } else {
33 proxy.$ElMessage.error(res.msg);
34 }
35 }
36
37 // 获取分级树形列表
38 const getGradeTreeListData = async () => {
39 const res: any = await getGradeTreeList();
40 if (res.code == proxy.$passCode) {
41 gradeTreeData.value = res.data || [];
42 } else {
43 proxy.$ElMessage.error(res.msg);
44 }
45 }
46
47 //记录分级guid
48 const classifyGradGuid = ref('');
49 // 分级列表
50 const gradeTreeData = ref('');
51
52 onMounted(() => {
53 getClassifyGradListData();
54 getGradeTreeListData();
55 })
56
57
19 const tabsInfo = ref({ 58 const tabsInfo = ref({
20 activeName: 'classStandard', 59 activeName: 'classStandard',
21 tabs: [ 60 tabs: [
...@@ -115,10 +154,7 @@ const searchClass = (val: any, clear: boolean = false) => { ...@@ -115,10 +154,7 @@ const searchClass = (val: any, clear: boolean = false) => {
115 getClassListData(); 154 getClassListData();
116 }; 155 };
117 156
118 const newCreateClass = () => { 157
119 newCreateClassStandardDialogInfo.value.visible = true;
120 classStandardFormItems.value.forEach(item => item.default = '');
121 }
122 158
123 const getClassListData = () => { 159 const getClassListData = () => {
124 // classListDataLoading.value = true; 160 // classListDataLoading.value = true;
...@@ -141,15 +177,15 @@ const getClassListData = () => { ...@@ -141,15 +177,15 @@ const getClassListData = () => {
141 } 177 }
142 178
143 /** 编辑分类 */ 179 /** 编辑分类 */
144 const handleClassDataEdit = (item) => { 180 const handleClassDataEdit = (item, des = '') => {
145 181
146 } 182 }
147 183
148 const handleClassDataClick = (item) => { 184 const handleClassDataClick = (item, des = '') => {
149 router.push({ 185 router.push({
150 name: 'classStandardEdit', 186 name: 'classStandardEdit',
151 query: { 187 query: {
152 guid: item.guid, 188 type: des === '' ? '配置' : des,
153 classStandardName: '工业分类' 189 classStandardName: '工业分类'
154 } 190 }
155 }); 191 });
...@@ -158,6 +194,7 @@ const handleClassDataClick = (item) => { ...@@ -158,6 +194,7 @@ const handleClassDataClick = (item) => {
158 const handleClassDataDel = (item) => { 194 const handleClassDataDel = (item) => {
159 195
160 } 196 }
197 /** ------------------------------- 分类标准相关 ------------------------------------- */
161 198
162 const classStandardFormItems = ref([{ 199 const classStandardFormItems = ref([{
163 label: '分类名称', 200 label: '分类名称',
...@@ -171,7 +208,7 @@ const classStandardFormItems = ref([{ ...@@ -171,7 +208,7 @@ const classStandardFormItems = ref([{
171 required: true 208 required: true
172 }, { 209 }, {
173 label: '分级标准', 210 label: '分级标准',
174 type: 'select', 211 type: 'tree-select',
175 placeholder: '请选择', 212 placeholder: '请选择',
176 field: 'gradeStandard', 213 field: 'gradeStandard',
177 default: 1, 214 default: 1,
...@@ -219,24 +256,161 @@ const newCreateClassStandardDialogInfo = ref({ ...@@ -219,24 +256,161 @@ const newCreateClassStandardDialogInfo = ref({
219 } 256 }
220 }) 257 })
221 258
222 const newCreateTemplate = () => { 259 const newCreateClass = () => {
260 newCreateClassStandardDialogInfo.value.visible = true;
261 classStandardFormItems.value.forEach(item => item.default = '');
262 }
263
264 /** ------------------------------- 分级标准相关 ------------------------------------- */
265
266 const newCreateGradeFormItems = ref([{
267 label: '分级名称',
268 type: 'input',
269 maxlength: 50,
270 placeholder: '请输入',
271 field: 'name',
272 default: '',
273 block: true,
274 clearable: true,
275 required: true
276 }]);
277
278 const newCreateGradeFormRules = ref({
279 name: [required('请填写分级名称')],
280 });
281
282 const newCreateGradeStandardDialogInfo = ref({
283 visible: false,
284 size: 460,
285 title: "新增分级",
286 type: "",
287 formInfo: {
288 id: "grade-form",
289 items: newCreateGradeFormItems.value,
290 rules: newCreateGradeFormRules.value,
291 },
292 submitBtnLoading: false,
293 btns: {
294 cancel: () => {
295 newCreateGradeStandardDialogInfo.value.visible = false;
296 },
297 submit: async (btn, info) => {
298 newCreateGradeStandardDialogInfo.value.submitBtnLoading = true;
299 console.log(info, newCreateGradeStandardDialogInfo.value.title);
300 if (newCreateGradeStandardDialogInfo.value.title === '新增分级') {
301 const params = {
302 name: info.name,
303 type: 'G'
304 }
305 const res: any = await saveClassifyGrad(params);
306 if (res.code == proxy.$passCode) {
307 await getClassifyGradListData();
308 proxy.$ElMessage({
309 type: 'success',
310 message: '新增分类成功'
311 })
312
313 // 拿到新增的分级数据，跳转到配置页面
314 const item = classifyGradListData.value.find(item => item.name === info.name);
315
316 if (item) {
317 const params = {
318 name: item.name,
319 guid: item.guid,
320 }
321 handleClassifyGradDataClick(params);
322 }
323 newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
324 newCreateGradeStandardDialogInfo.value.visible = false;
325 } else {
326 proxy.$ElMessage.error(res.msg);
327 }
328 } else {
329 const params = {
330 name: info.name,
331 guid: classifyGradGuid.value,
332 type: 'G'
333 }
334 const res: any = await updateClassifyGrad(params);
335 if (res.code == proxy.$passCode) {
336 getClassifyGradListData();
337 proxy.$ElMessage({
338 type: 'success',
339 message: '修改分类成功'
340 })
341 newCreateGradeStandardDialogInfo.value.visible = false;
342 } else {
343 proxy.$ElMessage.error(res.msg);
344 }
345 }
346
347 }
348 }
349 })
350
351 // 删除分级
352 const handleClassifyGradDataDel = async (item) => {
353 try {
354 // 弹出确认框
355 await proxy.$confirm('此操作将永久删除该分级, 是否继续?', '提示', {
356 confirmButtonText: '确定',
357 cancelButtonText: '取消',
358 type: 'warning'
359 });
360 const res: any = await deleteClassifyGrad({ guid: item.guid });
361 if (res.code === proxy.$passCode) {
362 await getClassifyGradListData(); // 获取更新后的列表数据
363 proxy.$ElMessage({
364 type: 'success',
365 message: '删除成功!'
366 });
367 } else {
368 proxy.$ElMessage.error(res.msg); // 显示错误信息
369 }
370 } catch (error) {
371 if (error !== 'cancel') {
372 proxy.$ElMessage({
373 type: 'info',
374 message: '已取消删除'
375 });
376 }
377 }
378 };
379
380 // 编辑分级
381 const handleClassifyGradDataEdit = (itemGradeName) => {
382 classifyGradGuid.value = itemGradeName.guid;
383 newCreateGradeStandardDialogInfo.value.visible = true;
384 newCreateGradeStandardDialogInfo.value.title = '编辑分级';
385 newCreateGradeFormItems.value.forEach(item => {
386 item.default = itemGradeName.name
387 })
388 }
389
390 // 配置分级
391 const handleClassifyGradDataClick = (item) => {
392 console.log(item);
223 router.push({ 393 router.push({
224 name: 'newCreateTemplate', 394 name: 'classifyGradEdit',
225 query: { 395 query: {
226 classStandardName: '分类分级模板' 396 guid: item.guid,
397 classClassifyGradName: item.name
227 } 398 }
228 }); 399 });
229
230 } 400 }
231 401
232 const newCreateGrade = () => { 402 const newCreateGrade = () => {
233 403 newCreateGradeStandardDialogInfo.value.visible = true;
404 newCreateGradeFormItems.value.forEach(item => item.default = '');
234 } 405 }
235 406
236 /** 407
237 * 分类分级模板 408
238 * 409
239 */ 410
411
412 /** ------------------------------- 分类分级模板 ------------------------------------- */
413
240 const pageInfo = ref({ 414 const pageInfo = ref({
241 limit: 50, 415 limit: 50,
242 curr: 1, 416 curr: 1,
...@@ -251,6 +425,16 @@ const pageInfo = ref({ ...@@ -251,6 +425,16 @@ const pageInfo = ref({
251 rows: 0, 425 rows: 0,
252 }) 426 })
253 427
428 const newCreateTemplate = () => {
429 router.push({
430 name: 'newCreateTemplate',
431 query: {
432 classStandardName: '分类分级模板'
433 }
434 });
435 }
436
437
254 const pageChange = (info) => { 438 const pageChange = (info) => {
255 pageInfo.value.curr = Number(info.curr); 439 pageInfo.value.curr = Number(info.curr);
256 pageInfo.value.limit = Number(info.limit); 440 pageInfo.value.limit = Number(info.limit);
...@@ -334,7 +518,8 @@ onBeforeMount(() => { ...@@ -334,7 +518,8 @@ onBeforeMount(() => {
334 <el-button type="primary" @click="newCreateGrade">新增分级</el-button> 518 <el-button type="primary" @click="newCreateGrade">新增分级</el-button>
335 </div> 519 </div>
336 <div class="data-content" v-loading="classListDataLoading"> 520 <div class="data-content" v-loading="classListDataLoading">
337 <div class="card-content" v-for="item in classListData" :key="item.guid" @click="handleClassDataClick(item)"> 521 <div class="card-content" v-for="item in classifyGradListData" :key="item.guid"
522 @click="handleClassifyGradDataClick(item)">
338 <div class="type-btn"> 523 <div class="type-btn">
339 <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click" 524 <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
340 popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0"> 525 popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
...@@ -344,9 +529,9 @@ onBeforeMount(() => { ...@@ -344,9 +529,9 @@ onBeforeMount(() => {
344 </el-icon> 529 </el-icon>
345 </template> 530 </template>
346 <div class="levitation-ul"> 531 <div class="levitation-ul">
347 <span class="levitation-li" @click="handleClassDataClick(item)">配置</span> 532 <span class="levitation-li" @click="handleClassifyGradDataClick(item)">配置</span>
348 <span class="levitation-li" @click="handleClassDataEdit(item)">编辑</span> 533 <span class="levitation-li" @click="handleClassifyGradDataEdit(item)">编辑</span>
349 <span class="levitation-li" @click="handleClassDataDel(item)">删除</span> 534 <span class="levitation-li" @click="handleClassifyGradDataDel(item)">删除</span>
350 </div> 535 </div>
351 </el-popover> 536 </el-popover>
352 </div> 537 </div>
...@@ -354,10 +539,10 @@ onBeforeMount(() => { ...@@ -354,10 +539,10 @@ onBeforeMount(() => {
354 <svg-icon name="folder" /> 539 <svg-icon name="folder" />
355 </el-icon> 540 </el-icon>
356 <div class="title">{{ item.name }}</div> 541 <div class="title">{{ item.name }}</div>
357 <div class="desc-row"> 542 <!-- <div class="desc-row">
358 <div class="desc">{{ '分级标准' }}</div> 543 <div class="desc">{{ '分级标准' }}</div>
359 <div class="desc">{{ item.updateTime }}</div> 544 <div class="desc">{{ item.updateTime }}</div>
360 </div> 545 </div> -->
361 </div> 546 </div>
362 <div v-if="!classListData.length" class="card-noData"> 547 <div v-if="!classListData.length" class="card-noData">
363 <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" /> 548 <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
...@@ -366,6 +551,7 @@ onBeforeMount(() => { ...@@ -366,6 +551,7 @@ onBeforeMount(() => {
366 </div> 551 </div>
367 </div> 552 </div>
368 <Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" /> 553 <Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" />
554 <Dialog_form :dialogConfigInfo="newCreateGradeStandardDialogInfo" />
369 </div> 555 </div>
370 </template> 556 </template>
371 557
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!