Skip to content

csbr-daop / fe-data-trusted-space

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

数据盘点分类标准

1 parent 8e6500f7
Inline Side-by-side
Showing 8 changed files with 965 additions and 1 deletions
src/assets/icons/folder.svg 0 → 100644
1 <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M32 64h342.304a32 32 0 0 1 17.76 5.376L576 192h416a32 32 0 0 1 32 32v640a32 32 0 0 1-32 32H32a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32z" fill="#ffb44a" p-id="1930"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
src/components/Table/index.vue
...@@ -268,6 +268,7 @@ onMounted(() => { ...@@ -268,6 +268,7 @@ onMounted(() => {
268 :min-width="item.minWidth" 268 :min-width="item.minWidth"
269 :fixed="item.fixed" 269 :fixed="item.fixed"
270 :align="item.align" 270 :align="item.align"
271 :type="item.type == 'index' ? '' : undefined"
271 :sortable="item.sortable ?? false" 272 :sortable="item.sortable ?? false"
272 :prop="item.field" 273 :prop="item.field"
273 :class-name="item.columClass" 274 :class-name="item.columClass"
......
src/router/modules/dataInventory.ts 0 → 100644
1 import type { RouteRecordRaw } from 'vue-router'
2
3 function Layout() {
4 return import('@/layouts/index.vue')
5 }
6
7 const routes: RouteRecordRaw[] = [
8 {
9 path: '/data-inventory/classify-grade-manage',
10 component: Layout,
11 meta: {
12 title: '分类分级管理',
13 icon: 'sidebar-videos',
14 },
15 children: [
16 {
17 path: 'task-config',
18 name: 'taskConfig',
19 component: () => import('@/views/data_inventory/taskConfig.vue'),
20 meta: {
21 title: '分类分级任务',
22 breadcrumb: false,
23 cache: true
24 },
25 },
26 {
27 path: 'template-config',
28 name: 'templateConfig',
29 component: () => import('@/views/data_inventory/templateConfig.vue'),
30 meta: {
31 title: '分类分级模板',
32 breadcrumb: false,
33 cache: true
34 },
35 },
36 {
37 path: 'classStandard-edit',
38 name: 'classStandardEdit',
39 component: () => import('@/views/data_inventory/classStandardEdit.vue'),
40 meta: {
41 title: '编辑-',
42 sidebar: false,
43 breadcrumb: false,
44 cache: true,
45 reuse: true,
46 editPage: true,
47 activeMenu: '/data-inventory/classify-grade-manage/template-config'
48 },
49 beforeEnter: (to, from) => {
50 if (to.query.classStandardName) {
51 to.meta.title = `编辑-${to.query.classStandardName}`;
52 }
53 }
54 },
55 ],
56 }
57 ]
58
59 export default routes
src/router/routes.ts
...@@ -4,6 +4,7 @@ import type { RouteRecordRaw } from 'vue-router' ...@@ -4,6 +4,7 @@ import type { RouteRecordRaw } from 'vue-router'
4 import DataAssess from './modules/dataAsset'; 4 import DataAssess from './modules/dataAsset';
5 import DataMeta from './modules/dataMeta'; 5 import DataMeta from './modules/dataMeta';
6 import DataQuality from './modules/dataQuality'; 6 import DataQuality from './modules/dataQuality';
7 import DataInventory from './modules/dataInventory';
7 8
8 import type { Route } from '#/global' 9 import type { Route } from '#/global'
9 import useSettingsStore from '@/store/modules/settings' 10 import useSettingsStore from '@/store/modules/settings'
...@@ -122,7 +123,14 @@ const asyncRoutes: Route.recordMainRaw[] = [ ...@@ -122,7 +123,14 @@ const asyncRoutes: Route.recordMainRaw[] = [
122 children: [ 123 children: [
123 ...DataQuality, 124 ...DataQuality,
124 ], 125 ],
125 } 126 }, {
127 meta: {
128 title: '数据盘点',
129 },
130 children: [
131 ...DataInventory,
132 ],
133 },
126 ] 134 ]
127 135
128 const constantRoutesByFilesystem = generatedRoutes.filter((item) => { 136 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
......
src/store/modules/user.ts
...@@ -227,6 +227,8 @@ const useUserStore = defineStore( ...@@ -227,6 +227,8 @@ const useUserStore = defineStore(
227 mark = 'data-sync' 227 mark = 'data-sync'
228 } else if (item.meta.title == '数据质量') { 228 } else if (item.meta.title == '数据质量') {
229 mark = 'data-quality' 229 mark = 'data-quality'
230 } else if (item.meta.title == '数据盘点') {
231 mark = 'data-inventory'
230 } else if (item.meta.title == '首页') { 232 } else if (item.meta.title == '首页') {
231 mark = 'data-asset-index' 233 mark = 'data-asset-index'
232 } else if (item.meta.title == '数据服务') { 234 } else if (item.meta.title == '数据服务') {
......
src/views/data_inventory/classStandardEdit.vue 0 → 100644
1 <route lang="yaml">
2 name: classStandardEdit //分类标准编辑
3 </route>
4
5 <script lang="ts" setup name="classStandardEdit">
6 import { ref, onMounted} from "vue";
7 import useUserStore from "@/store/modules/user";
8 import { useValidator } from '@/hooks/useValidator';
9 import { TableColumnWidth } from '@/utils/enum';
10 import G6 from '@antv/g6';
11 import { IGroup, ModelConfig } from '@antv/g6';
12
13 const { required, orderNum } = useValidator();
14 const { proxy } = getCurrentInstance() as any;
15 const router = useRouter();
16 const route = useRoute();
17 const fullPath = route.query.fullPath;
18 const userStore = useUserStore();
19
20 const fullscreenLoading = ref(false);
21
22 const formRef = ref();
23 const classStandardFormItems = ref([{
24 label: '分类名称',
25 type: 'input',
26 maxlength: 50,
27 placeholder: '请输入',
28 field: 'classStandardName',
29 default: '',
30 clearable: true,
31 disabled: true,
32 required: true
33 }, {
34 label: '分级标准',
35 type: 'select',
36 placeholder: '请选择',
37 field: 'gradeStandard',
38 default: 1,
39 options: [], //TODO
40 required: true,
41 filterable: true,
42 clearable: true,
43 disabled: true,
44 visible: true,
45 }]);
46 const currTableInfo = ref({});
47 const tableInfo = ref({
48 id: "data-class-standard-table",
49 multiple: false,
50 fields: [
51 { label: "序号", type: "index", width: 56, align: "center" },
52 { label: "分类", field: "className", width: 160, type: 'expand' },
53 { label: "层级", field: "levelName", width: 120 },
54 { label: "状态", field: "state", type: "tag", width: 120, align: "center" },
55 { label: "定义说明", field: "description", width: TableColumnWidth.DESCRIPTION },
56 { label: "最低安全级别参考", field: "minLevel", width: 140 },
57 { label: "修改人", field: "updateUserName", width: 140 },
58 { label: "更新时间", field: "updateTime", width: 180 },
59 ],
60 data: [{
61 guid: '1',
62 children: [{
63 guid: '1-1'
64 }]
65 }],
66 showPage: false,
67 actionInfo: {
68 label: "操作",
69 type: "btn",
70 width: 120,
71 btns: [
72 { label: "编辑", value: "edit", click: (scope) => {
73 currTableInfo.value = scope.row;
74 drawerInfo.value.visible = true;
75 drawerInfo.value.header.title = '编辑分类';
76 classEditFormItems.value.forEach(item => {
77 item.default = scope.row[item.field]
78 })
79 } },
80 { label: "删除", value: "delete", click: (scope) => {
81 proxy.$openMessageBox("此操作将永久删除该分类, 是否继续", () => {
82 // deleteBizTerm([scope.row.guid]).then((res: any) => {
83 // if (res.code == proxy.$passCode) {
84 // getTableData();
85 // proxy.$ElMessage.success('该分类删除成功');
86 // } else {
87 // proxy.$ElMessage.error(res.msg);
88 // }
89 // });
90 })
91 } },
92 ],
93 },
94 loading: false,
95 });
96
97 const classEditFormItems = ref([{
98 label: '分类名称',
99 type: 'input',
100 maxlength: 50,
101 placeholder: '请输入',
102 field: 'classStandardName',
103 default: '',
104 clearable: true,
105 required: true
106 }, {
107 label: '排序',
108 type: 'input',
109 placeholder: '请输入',
110 field: 'orderNum',
111 maxlength: 6,
112 regexp: /\D/g,
113 required: true,
114 clearable: true,
115 }, {
116 label: '上级分类',
117 field: 'parentGuid',
118 type: 'tree-select',
119 placeholder: '请选择',
120 default: '',
121 options: tableInfo.value.data,
122 showAllLevels: false,
123 checkStrictly: true,
124 lazy: false,
125 props: {
126 label: "className",
127 value: "guid",
128 },
129 block: true,
130 filterable: true,
131 clearable: true,
132 required: false
133 }, {
134 label: '最低安全级别参考',
135 type: 'select',
136 placeholder: '请选择',
137 field: 'lowerLevel',
138 default: 1,
139 options: [], //TODO
140 required: false,
141 filterable: true,
142 clearable: true,
143 visible: true,
144 }, {
145 label: '业务状态',
146 type: 'switch',
147 field: 'state',
148 default: 'Y',
149 activeText:"有效",
150 inactiveText:"停用",
151 activeValue: 'Y',
152 inactiveValue: 'N'
153 }, {
154 label: '定义说明',
155 type: 'textarea',
156 placeholder: '请输入',
157 field: 'description',
158 default: '',
159 clearable: true,
160 required: false,
161 block: true
162 }]);
163
164 const classEditFormRules = ref({
165 classStandardName: [required('请填写分类名称')], //TODO，要自己判断分类名称是否重复。规则是什么呢。
166 orderNum: [orderNum()]
167 });
168
169 /** 新增分类的form */
170 const classEditFormInfo = ref({
171 type: "form",
172 title: "",
173 col: "span",
174 formInfo: {
175 id: "add-class-form",
176 readonly: false,
177 items: classEditFormItems.value,
178 rules: classEditFormRules.value,
179 },
180 });
181
182 /** 新增编辑分类。 */
183 const drawerInfo = ref({
184 visible: false,
185 direction: 'rtl',
186 size: 600,
187 header: {
188 title: '添加分类',
189 },
190 type: '',
191 container: {
192 contents: [classEditFormInfo.value],
193 },
194 footer: {
195 btns: [
196 { type: 'default', label: '取消', value: 'cancel' },
197 { type: 'primary', label: '确定', value: 'save', loading: false },
198 ]
199 }
200 })
201
202 const drawerBtnClick = (btn, info) => {
203 if (btn.value == 'cancel') {
204 drawerInfo.value.visible = false;
205 } else {
206
207 }
208 }
209
210 const newCreateClass = () => {
211 drawerInfo.value.visible = true;
212 drawerInfo.value.header.title = '添加分类';
213 classEditFormItems.value.forEach(item => {
214 if (item.field == 'state') {
215 item.default = 'Y';
216 } else {
217 item.default = '';
218 }
219 })
220 }
221
222 /** 导入分类。 */
223 const importClass = () => {
224
225 }
226
227 const dataShowMethod = ref('shape');
228
229 /** 切换是图形展示，还是表格展示。 */
230 const changeShowMethod = () => {
231 dataShowMethod.value = dataShowMethod.value == 'table' ? 'shape' : 'table';
232 }
233
234 const cancel = () => {
235 proxy.$openMessageBox("当前页面尚未保存，确定放弃修改吗？", () => {
236 userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
237 router.push({
238 name: 'templateConfig'
239 });
240 }, () => {
241 proxy.$ElMessage.info("已取消");
242 });
243 }
244
245 const save = () => {
246
247 }
248
249 const graph = ref();
250 const shapeMain = ref();
251
252 var COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
253 return [['M', x, y], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x + 2, y], ['L', x + 2 * r - 2, y]];
254 };
255 var EXPAND_ICON = function EXPAND_ICON(x, y, r) {
256 return [['M', x, y], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x + 2, y], ['L', x + 2 * r - 2, y], ['M', x + r, y - r + 2], ['L', x + r, y + r - 2]];
257 };
258
259 G6.registerNode('tree-node', {
260 drawShape: function drawShape(cfg: ModelConfig, group: IGroup) {
261 var rect = group.addShape('rect', {
262 attrs: {
263 fill: '#F6FDFD',
264 stroke: '#D1E7E8'
265 }
266 });
267 var content = cfg.name.replace(/(.{19})/g, '$1\n');
268 var text = group.addShape('text', {
269 attrs: {
270 text: content,
271 x: 0,
272 y: 0,
273 textAlign: 'left',
274 textBaseline: 'middle',
275 fill: '#4FA1A4',
276 fontSize: 10,
277 fontFamily: 'simsun'
278 }
279 });
280 var bbox = text.getBBox();
281 var hasChildren = cfg.children && cfg.children.length > 0;
282 if (hasChildren) {
283 group.addShape('circle', {
284 attrs: {
285 x: 95,
286 y: bbox.minX + bbox.height / 2-5,
287 r: 5,
288 stroke: '#4FA1A4',
289 fill: '#fff',
290 lineWidth: 1
291 },
292 name: 'collapse-icon',
293 className: 'collapse-icon',
294 });
295 group.addShape('text', {
296 attrs: {
297 x: 92,
298 y: 8.5,
299 fill: '#4FA1A4',
300 text: '-',
301 fontSize: 16
302 },
303 name: 'collapse-icon-text',
304 className: 'collapse-icon-text',
305 });
306 // group.addShape('marker', {
307 // attrs: {
308 // x: 90,
309 // y: bbox.minX + bbox.height / 2-5,
310 // r: 6,
311 // symbol: COLLAPSE_ICON,
312 // fill: '#fff',
313 // stroke: '#666',
314 // lineWidth: 1,
315 // },
316 // className: 'collapse-icon'
317 // });
318 }
319 rect.attr({
320 x: bbox.minX - 4,
321 y: bbox.minY - 6,
322 width: 100, //图形的宽度
323 height: bbox.height + 13
324 });
325 return rect;
326 }
327 }, 'single-shape');
328
329 onMounted(() => {
330
331 graph.value = new G6.TreeGraph({
332 container: shapeMain.value,
333 width: shapeMain.value.clientWidth,
334 height: shapeMain.value.clientHeight,
335 minZoom: 1.4,
336 maxZoom: 1.4,
337 modes: {
338 default: [{
339 type: 'collapse-expand',
340 onChange: function onChange(item, collapsed, event) {
341 var data = item.get('model');
342 var icon = item.get('group').findByClassName('collapse-icon');
343 if (collapsed) {
344 icon.attr('symbol', EXPAND_ICON);
345 } else {
346 icon.attr('symbol', COLLAPSE_ICON);
347 }
348 data.collapsed = collapsed;
349 return true;
350 }
351 }, 'drag-canvas', 'zoom-canvas']
352 },
353 defaultNode: {
354 type: 'tree-node',
355 anchorPoints: [[0, 0.5], [1, 0.5]]
356 },
357 defaultEdge: {
358 type: 'polyline',
359 style: {
360 stroke: '#4FA1A4',
361 endArrow: {
362 fill: '#4FA1A4',
363 stroke: '#4FA1A4',
364 path: 'M -2,0 L 2,2 L 2,-2 Z',
365 d: -2,
366 }
367 }
368 },
369 layout: {
370 type: 'compactBox',
371 direction: 'LR',
372 getId: function getId(d) {
373 return d.id;
374 },
375 getHeight: function getHeight() {
376 return 16;
377 },
378 getWidth: function getWidth() {
379 return 16;
380 },
381 getVGap: function getVGap() {
382 return 20;
383 },
384 getHGap: function getHGap() {
385 return 80;
386 }
387 }
388 });
389 graph.value.data({
390 guid: 1,
391 name: '工业数据',
392 children: [{
393 guid: '1-1',
394 name: '原材料',
395 children: [{
396 guid: '1-1-1',
397 name: '用户数据分类有带你长'
398 }]
399 }, {
400 guid: '1-2',
401 name: '装备制造'
402 }]
403 });
404 graph.value.render();
405 graph.value.fitView();
406 graph.value.on('node:click', (evt: any) => {
407 evt.preventDefault();
408 evt.stopPropagation();
409 const { item, target } = evt;
410 const currentAnchor = target.get('name');
411 if (!currentAnchor) return;
412 // 设置一个全局属性，指定点击的是哪个图形元素
413 });
414 })
415
416 </script>
417
418 <template>
419 <div class="container_wrap" v-loading="fullscreenLoading">
420 <div class="content_main">
421 <ContentWrap id="id-baseInfo" title="基础信息" description="" style="margin-top: 8px;">
422 <Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" />
423 </ContentWrap>
424 <ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description="" style="margin-top:16px; height: calc(100% - 161px)">
425 <div class="tools_btns">
426 <el-button v-show="dataShowMethod == 'table'" type="primary" @click="newCreateClass">添加分类</el-button>
427 <el-button v-show="dataShowMethod == 'table'" @click="importClass">导入分类</el-button>
428 <el-button class="show-change-btn" @click="changeShowMethod">{{ '图形展示' }}</el-button>
429 </div>
430 <Table v-show="dataShowMethod == 'table'" :tableInfo="tableInfo" />
431 <div ref="shapeMain" class="shape-main" v-show="dataShowMethod != 'table'"></div>
432 </ContentWrap>
433 </div>
434 <div class="bottom_tool_wrap">
435 <el-button @click="cancel">取消</el-button>
436 <!-- <el-button type="primary" @click="save">保存</el-button> !-->
437 </div>
438 <Drawer :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick" />
439 </div>
440 </template>
441
442 <style lang="scss" scoped>
443
444 .container_wrap {
445 padding: 0px;
446 }
447
448 .content_main {
449 height: calc(100% - 44px);
450 padding: 10px 16px;
451 }
452
453 .bottom_tool_wrap {
454 height: 44px;
455 padding: 0 16px;
456 border-top: 1px solid #d9d9d9;
457 display: flex;
458 justify-content: center;
459 align-items: center;
460 }
461
462 :deep(.detail-content) {
463
464 .el-card__body {
465 height: calc(100% - 50px) !important;
466
467 .card-body-content {
468 height: 100%;
469 }
470 }
471 }
472
473 .tools_btns {
474 position: relative;
475 margin-bottom: 16px;
476
477 .show-change-btn {
478 position: absolute;
479 right: 0px;
480 }
481 }
482
483 .shape-main {
484 height: calc(100% - 58px);
485 }
486
487 .table_panel {
488 height: calc(100% - 58px) !important;
489 }
490 </style>
...\ No newline at end of file ...\ No newline at end of file
src/views/data_inventory/taskConfig.vue 0 → 100644
1 <route lang="yaml">
2 name: taskConfig //分类分级任务
3 </route>
4
5 <script lang="ts" setup name="taskConfig">
6 import { ref ,onMounted} from "vue";
7
8 </script>
9
10 <template>
11 <div>分类分级任务</div>
12 </template>
13
14 <style lang="scss" scoped>
15
16 </style>
...\ No newline at end of file ...\ No newline at end of file
src/views/data_inventory/templateConfig.vue 0 → 100644
1 <route lang="yaml">
2 name: taskConfig //分类分级模板
3 </route>
4
5 <script lang="ts" setup name="templateConfig">
6
7 import { ref, onMounted } from "vue";
8 import TableTools from '@/components/Tools/table_tools.vue';
9 import { MoreFilled } from "@element-plus/icons-vue";
10 import { commonPageConfig } from '@/components/PageNav/index';
11 import { useValidator } from '@/hooks/useValidator';
12
13 const router = useRouter();
14 const { required } = useValidator();
15 const { proxy } = getCurrentInstance() as any;
16
17 const tabsInfo = ref({
18 activeName: 'classStandard',
19 tabs: [
20 { label: '分类分级模板', name: 'classTemplate' },
21 { label: '分类标准', name: 'classStandard' },
22 { label: '分级标准', name: 'gradeStandard' }
23 ]
24 });
25
26 const tabChange = (val) => {
27 tabsInfo.value.activeName = val;
28 }
29
30 /** 模板的搜索配置 */
31 const searchItemList = ref([
32 {
33 type: 'input',
34 label: '',
35 field: 'templateName',
36 default: '',
37 maxlength: 50,
38 placeholder: '模板名称',
39 clearable: true,
40 visible: true
41 }
42 ]);
43
44 /** 搜索查询分类分级模板。 */
45 const searchTemplate = (val: any, clear: boolean = false) => {
46 // page.value.curr = 1;
47 // if (clear) {
48 // searchItemList.value.map(item => item.default = '')
49 // page.value.planName = '';
50 // page.value.state = null;
51 // getTableData();
52 // return;
53 // }
54 // page.value.planName = val.planName;
55 // page.value.state = val.state;
56 // getTableData();
57 };
58
59 /** ------------------------------- 分类标准相关 ------------------------------------- */
60
61 /** 分类标准的搜索配置 */
62 const classSearchItemList = ref([
63 {
64 type: 'input',
65 label: '',
66 field: 'classStandardName',
67 default: '',
68 maxlength: 50,
69 placeholder: '分类标准名称',
70 clearable: true,
71 visible: true
72 }
73 ]);
74
75 const classPage: any = ref({
76 ...commonPageConfig,
77 classStandardName: ''
78 });
79
80 const classListDataLoading = ref(false);
81
82 const classListData: any = ref([{
83 guid: '1',
84 name: '工业数据分类',
85 updateTime: '2020-12-12 10:10:10'
86 }, {
87 guid: '2'
88 }, {
89 guid: '3'
90 }, {
91 guid: '4'
92 }, {
93 guid: '5'
94 }, {
95 guid: '6'
96 }, {
97 guid: '7'
98 }]);
99
100 /** 记录点击省略号弹出菜单的visible */
101 const cardBtnVisible: any = ref(false);
102
103 /** 搜索查询分类标准 */
104 const searchClass = (val: any, clear: boolean = false) => {
105 classPage.value.curr = 1;
106 if (clear) {
107 classSearchItemList.value.map(item => item.default = '')
108 // classPage.value.planName = '';
109 getClassListData();
110 return;
111 }
112 // classPage.value.planName = '';
113 getClassListData();
114 };
115
116 const newCreateClass = () => {
117 newCreateClassStandardDialogInfo.value.visible = true;
118 classStandardFormItems.value.forEach(item => item.default = '');
119 }
120
121 const getClassListData = () => {
122 // classListDataLoading.value = true;
123 // getPlanList({
124 // pageIndex: classPage.value.curr,
125 // pageSize: classPage.value.limit,
126 // //TODO
127 // }).then((res: any) => {
128 // classListDataLoading.value = false;
129 // if (res === undefined) {
130 // return;
131 // }
132 // if (res.code == proxy.$passCode) {
133 // const data = res.data || {}
134 // classListData.value.data = data.records || [];
135 // } else {
136 // proxy.$ElMessage.error(res.msg);
137 // }
138 // })
139 }
140
141 /** 编辑分类 */
142 const handleClassDataEdit = (item) => {
143
144 }
145
146 const handleClassDataClick = (item) => {
147 router.push({
148 name: 'classStandardEdit',
149 query: {
150 guid: item.guid,
151 classStandardName: '工业分类'
152 }
153 });
154 }
155
156 const handleClassDataDel = (item) => {
157
158 }
159
160 const classStandardFormItems = ref([{
161 label: '分类名称',
162 type: 'input',
163 maxlength: 50,
164 placeholder: '请输入',
165 field: 'classStandardName',
166 default: '',
167 block: true,
168 clearable: true,
169 required: true
170 }, {
171 label: '分级标准',
172 type: 'select',
173 placeholder: '请选择',
174 field: 'gradeStandard',
175 default: 1,
176 options: [], //TODO
177 required: true,
178 filterable: true,
179 clearable: true,
180 visible: true,
181 block: true,
182 }]);
183
184 const classStandardFormRules = ref({
185 classStandardName: [required('请填写分类名称')],
186 gradeStandard: [required('请选择分级标准')]
187 });
188
189 const newCreateClassStandardDialogInfo = ref({
190 visible: false,
191 size: 460,
192 title: "新增分类",
193 type: "",
194 formInfo: {
195 id: "class-standard-form",
196 items: classStandardFormItems.value,
197 rules: classStandardFormRules.value,
198 },
199 submitBtnLoading: false,
200 btns: {
201 cancel: () => {
202 newCreateClassStandardDialogInfo.value.visible = false;
203 },
204 submit: (btn, info) => {
205 newCreateClassStandardDialogInfo.value.visible = false;
206 classPage.value.curr = 1;
207 getClassListData();
208 //跳转到编辑页面
209 router.push({
210 name: 'classStandardEdit',
211 query: {
212 guid: '1',
213 classStandardName: '工业分类'
214 }
215 });
216 }
217 }
218 })
219
220 const newCreateTemplate = () => {
221
222 }
223
224 const newCreateGrade = () => {
225
226 }
227
228 onBeforeMount(() => {
229 getClassListData();
230 })
231
232 </script>
233
234 <template>
235 <div class="container">
236 <Tabs :tabs-info="tabsInfo" @tab-change="tabChange" />
237 <div class="panel" v-show="tabsInfo.activeName == 'classTemplate'">
238 <div class="table_tool_wrap">
239 <TableTools :searchItems="searchItemList" :searchId="'template-manage-search'" @search="searchTemplate" />
240 <div class="tools_btns">
241 <el-button type="primary" @click="newCreateTemplate">新增模板</el-button>
242 </div>
243 </div>
244 </div>
245 <div class="panel" v-show="tabsInfo.activeName == 'classStandard'">
246 <div class="table_tool_wrap">
247 <TableTools :searchItems="classSearchItemList" :searchId="'template-manage-search'" @search="searchClass" />
248 <div class="tools_btns">
249 <el-button type="primary" @click="newCreateClass">新增分类</el-button>
250 </div>
251 </div>
252 <div class="data-content" v-loading="classListDataLoading">
253 <div class="card-content" v-for="item in classListData" :key="item.guid" @click="handleClassDataClick(item)">
254 <div class="type-btn">
255 <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
256 popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
257 <template #reference>
258 <el-icon color="#666" @click.stop="cardBtnVisible = true">
259 <MoreFilled />
260 </el-icon>
261 </template>
262 <div class="levitation-ul">
263 <span class="levitation-li" @click="handleClassDataClick(item)">配置</span>
264 <span class="levitation-li" @click="handleClassDataEdit(item)">编辑</span>
265 <span class="levitation-li" @click="handleClassDataDel(item)">删除</span>
266 </div>
267 </el-popover>
268 </div>
269 <el-icon class="title-icon">
270 <svg-icon name="folder" />
271 </el-icon>
272 <div class="title">{{ item.name }}</div>
273 <div class="desc-row">
274 <div class="desc">{{ '分级标准' }}</div>
275 <div class="desc">{{ item.updateTime }}</div>
276 </div>
277 </div>
278 <div v-if="!classListData.length" class="card-noData">
279 <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
280 <span>暂无分类标准</span>
281 </div>
282 </div>
283 </div>
284 <div class="panel" v-show="tabsInfo.activeName == 'gradeStandard'">
285 <el-button type="primary" @click="newCreateGrade">新增分级</el-button>
286 </div>
287 <Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" />
288 </div>
289 </template>
290
291 <style lang="scss" scoped>
292 .container {
293 height: 100%;
294 padding: 12px 16px 20px 16px;
295
296 .panel {
297 height: calc(100% - 51px);
298 }
299 }
300
301 :deep(.table-tools) {
302 .tools_search {
303 padding: 0px;
304 }
305 }
306
307 .tools_btns {
308 padding: 8px 0px 16px;
309 }
310
311 .data-content {
312 height: calc(100% - 92px);
313 display: flex;
314 flex-wrap: wrap;
315 gap: 24px;
316 align-content: flex-start;
317 overflow-y: auto;
318
319 .card-noData {
320 height: 100%;
321 width: 100%;
322 background: #fafafa;
323 display: flex;
324 flex-direction: column;
325 justify-content: center;
326 align-items: center;
327 color: #909399;
328 font-size: 14px;
329 }
330
331 .card-content {
332 width: 18%;
333 max-width: 240px;
334 min-width: 220px;
335 height: 160px;
336 padding: 12px;
337 border: 1px solid var(--el-border-color-regular);
338 cursor: pointer;
339 display: flex;
340 flex-direction: column;
341 align-items: center;
342 position: relative;
343
344 &:hover {
345 border: 1px solid var(--el-color-primary);
346 }
347
348 :deep(.title-icon.el-icon) {
349 width: 40px;
350 height: 40px;
351 margin-top: 28px;
352 margin-bottom: 16px;
353
354 svg {
355 width: 40px;
356 height: 40px;
357 }
358 }
359
360 .title {
361 font-size: 14px;
362 color: #212121;
363 text-align: center;
364 line-height: 21px;
365 font-weight: 600;
366 margin-bottom: 12px;
367 }
368
369 .desc-row {
370 width: 100%;
371 display: flex;
372 justify-content: space-between;
373
374 .desc {
375 font-size: 12px;
376 color: #999999;
377 line-height: 18px;
378 }
379 }
380
381 .type-btn {
382 position: absolute;
383 right: 12px;
384 }
385 }
386 }
387 </style>
...\ No newline at end of file ...\ 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!