Skip to content

csbr-daop / fe-data-trusted-space

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

update: 新增分类分级页面

1 parent c7acd525
Inline Side-by-side
Showing 10 changed files with 575 additions and 42 deletions
.env.development
...@@ -23,6 +23,9 @@ VITE_APP_PLAN_BASEURL = ms-daop-zcgl-data-plan-service ...@@ -23,6 +23,9 @@ VITE_APP_PLAN_BASEURL = ms-daop-zcgl-data-plan-service
23 #数据质量接口地址 23 #数据质量接口地址
24 VITE_APP_QUALITY_BASEURL = ms-daop-zcgl-data-quality-service 24 VITE_APP_QUALITY_BASEURL = ms-daop-zcgl-data-quality-service
25 25
26 #数据盘点接口地址
27 VITE_APP_CHECK_BASEURL = ms-daop-zcgl-data-inventory
28
26 29
27 #门户接口 30 #门户接口
28 VITE_API_PORTALURL = https://swzl-test.zgsjzc.com/portal 31 VITE_API_PORTALURL = https://swzl-test.zgsjzc.com/portal
......
pnpm-lock.yaml
This diff could not be displayed because it is too large.
src/api/modules/dataInventory.ts 0 → 100644
1 import request from "@/utils/request";
2
3 /** 分类分级模板数据 */
4 export const getTempleteClassifyData = (data) => request({
5 url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/cg-template/page-list`,
6 method: 'post',
7 data
8 })
src/components/TemplateItem/index.vue 0 → 100644
1 <template>
2 <div class="template-container">
3 <div v-for="(item, index) in items" :key="index" :class="['template-item', item.content.status]"
4 :style="getItemStyle(item.content.status)">
5 <div class="template-item-content">
6 <div class="item-top-area">
7 <div class="top-mian-description">
8 <div class="item-title">{{ item.content.templateName }}</div>
9 <div class="item-status">已发布</div>
10 </div>
11 <div class="top-sub-description">
12 <span>医疗行业分类</span>
13 <span>五级</span>
14 <span>v5</span>
15 </div>
16 </div>
17 <div class="item-middle-area">{{ item.content.templateDesc }}</div>
18 <div class="item-bottom-area">
19 <div class="bottom-info">
20 <span>模板确认人: {{ item.content.modelConfirmUserName }}</span>
21 <span>模板确认时间: {{ item.content.modelConfirmTime }}</span>
22 </div>
23 <div class="botton-btn">
24 <el-button type="primary" class="off-line-btn">下线</el-button>
25 <el-button type="primary" class="templete-btn">模板训练</el-button>
26 <el-button type="primary" class="delete-btn">删除</el-button>
27 </div>
28 </div>
29 </div>
30 </div>
31 </div>
32 </template>
33
34 <script setup lang="ts">
35 interface Item {
36 content: ItemContent;
37 }
38
39 interface ItemContent {
40 guid: string,
41 tenantGuid: string,
42 templateName: string,
43 templateDesc: string,
44 version: 0,
45 classifyGuid: string,
46 gradeGuid: string,
47 modelConfirmTime: string,
48 modelConfirmUserName: string,
49 metaGuids: string,
50 status: string
51 }
52
53 const items: Item[] = [
54 {
55 content: {
56 guid: '1',
57 tenantGuid: '1',
58 templateName: '医疗行业分类分级模板',
59 templateDesc: '使用于医疗行业的分类分级模板',
60 version: 0,
61 classifyGuid: '1',
62 gradeGuid: '1',
63 modelConfirmTime: '2021-09-01',
64 modelConfirmUserName: '张三',
65 metaGuids: '1',
66 status: 'published',
67 }
68 },
69 {
70 content: {
71 guid: '2',
72 tenantGuid: '2',
73 templateName: '模板2',
74 templateDesc: '模板2描述',
75 version: 0,
76 classifyGuid: '2',
77 gradeGuid: '2',
78 modelConfirmTime: '2021-09-02',
79 modelConfirmUserName: '李四',
80 metaGuids: '2',
81 status: 'running',
82 }
83 },
84 {
85 content: {
86 guid: '3',
87 tenantGuid: '3',
88 templateName: '模板3',
89 templateDesc: '模板3描述使用于医疗行业的分类分级模板使用于医疗行业的分类分级模板使用于医疗行业的分类分级模板使用于医疗行业的分类分级模板',
90 version: 0,
91 classifyGuid: '3',
92 gradeGuid: '3',
93 modelConfirmTime: '2021-09-03',
94 modelConfirmUserName: '王五',
95 metaGuids: '3',
96 status: 'pending',
97 }
98 },
99 {
100 content: {
101 guid: '4',
102 tenantGuid: '4',
103 templateName: '模板4',
104 templateDesc: '模板4描述',
105 version: 0,
106 classifyGuid: '4',
107 gradeGuid: '4',
108 modelConfirmTime: '2021-09-04',
109 modelConfirmUserName: '赵六',
110 metaGuids: '4',
111 status: 'published',
112 }
113 },
114 {
115 content: {
116 guid: '5',
117 tenantGuid: '5',
118 templateName: '模板5',
119 templateDesc: '模板5描述',
120 version: 0,
121 classifyGuid: '5',
122 gradeGuid: '5',
123 modelConfirmTime: '2021-09-05',
124 modelConfirmUserName: '钱七',
125 metaGuids: '5',
126 status: 'running',
127 }
128 },
129
130 ];
131
132 const getItemStyle = (status: string) => {
133 let borderColor = '#1BA854'; // 默认绿色
134 switch (status) {
135 case 'published':
136 borderColor = '#1BA854';
137 break;
138 case 'running':
139 borderColor = '#FF991C';
140 break;
141 case 'pending':
142 borderColor = '#B2B2B2 ';
143 break;
144 }
145 return {
146 borderTop: `4px solid ${borderColor}`,
147 };
148 };
149 </script>
150
151 <style scoped lang="scss">
152 .template-container {
153 display: flex;
154 flex-wrap: wrap;
155 gap: 15px;
156 }
157
158 .template-item {
159 width: 400px;
160 }
161
162 .template-item-content {
163 width: 100%;
164 height: 222px;
165 background: #FFFFFF;
166 border: 1px solid rgba(217, 217, 217, 1);
167 padding: 20px;
168 box-sizing: border-box;
169 display: flex;
170 flex-direction: column;
171
172 .item-top-area {
173 .top-mian-description {
174 display: flex;
175 justify-content: space-between;
176 align-items: center;
177
178 .item-title {
179 font-family: PingFangSC-Semibold;
180 font-size: 16px;
181 color: #212121;
182 line-height: 24px;
183 font-weight: 600;
184 }
185
186 .item-status {
187
188 border-radius: 2px;
189
190 font-size: 12px;
191
192 text-align: center;
193 line-height: 18px;
194 font-weight: 400;
195 padding: 1px 8px;
196 }
197 }
198
199 .top-sub-description {
200 margin-top: 9px;
201 display: flex;
202 /* 左对齐 */
203 justify-content: flex-start;
204
205 span {
206 background: #F5F5F5;
207 border: 1px solid rgba(217, 217, 217, 1);
208 border-radius: 2px;
209 display: inline-block;
210 padding: 1px 8px;
211 margin-right: 8px;
212
213 font-size: 12px;
214 color: #404040;
215 text-align: center;
216 line-height: 18px;
217 font-weight: 400;
218 }
219 }
220 }
221
222 .item-middle-area {
223
224 margin-top: 16px;
225
226 font-size: 14px;
227 color: #999999;
228 letter-spacing: 0;
229 line-height: 21px;
230 font-weight: 400;
231 height: 44px;
232 overflow: hidden;
233 display: -webkit-box;
234 display: -moz-box;
235 -webkit-box-orient: vertical;
236 -webkit-line-clamp: 2;
237 line-clamp: 2;
238 text-overflow: ellipsis;
239 }
240
241 .item-bottom-area {
242 margin-top: 8px;
243
244 .bottom-info {
245 display: flex;
246 justify-content: space-between;
247 align-items: center;
248
249 span {
250 display: inline-block;
251
252 font-size: 14px;
253 color: #666666;
254 letter-spacing: 0;
255 line-height: 21px;
256 font-weight: 400;
257 }
258 }
259
260 .botton-btn {
261 margin-top: 13px;
262
263 .off-line-btn {
264 background-color: #fff;
265 font-size: 14px;
266 color: #4FA1A4;
267
268 }
269
270 .templete-btn,
271 .delete-btn {
272
273 background: #FFFFFF;
274 border: 1px solid rgba(217, 217, 217, 1);
275 font-size: 14px;
276 color: #212121;
277 }
278 }
279 }
280 }
281
282 .template-item.published .template-item-content .item-status {
283 color: #1BA854;
284 background: #F2FFF5;
285 border: 1px solid rgba(109, 209, 142, 1);
286 }
287
288 .template-item.running .template-item-content .item-status {
289 color: #FF991C;
290 background: #FFFBF2;
291 border: 1px solid rgba(255, 203, 120, 1);
292 }
293
294 .template-item.pending .template-item-content .item-status {
295 border: 1px solid rgba(217, 217, 217, 1);
296 color: #404040;
297 background: #F5F5F5;
298 }
299 </style>
src/router/index.ts
...@@ -124,8 +124,8 @@ router.beforeEach(async (to, from, next) => { ...@@ -124,8 +124,8 @@ router.beforeEach(async (to, from, next) => {
124 } 124 }
125 } 125 }
126 else { 126 else {
127 if (to.name === 'home' || to.name == 'contactInfo' || to.name == 'register' || to.name == 'registerMobile' || to.name == 'homeDamRegister' || to.name == 'homeDamRegisterMobile' || to.name == 'homeDamFinance' || to.name == 'homeDamDataCircule' || 127 if (to.name === 'home' || to.name == 'contactInfo' || to.name == 'register' || to.name == 'registerMobile' || to.name == 'homeDamRegister' || to.name == 'homeDamRegisterMobile' || to.name == 'homeDamFinance' || to.name == 'homeDamDataCircule' ||
128 to.name == 'homeDamDemand' || to.name == 'homeDamAlgorithm' || to.name == 'homeDamAlgorithmMobile' || to.name == 'homeDamMarket' || to.name == 'homeDamMarketMobile' 128 to.name == 'homeDamDemand' || to.name == 'homeDamAlgorithm' || to.name == 'homeDamAlgorithmMobile' || to.name == 'homeDamMarket' || to.name == 'homeDamMarketMobile'
129 || to.name == 'homeDamDataCirculeMobile' || to.name == 'homeDamDemandMobile' || to.name == 'homeDamFinanceMobile') { 129 || to.name == 'homeDamDataCirculeMobile' || to.name == 'homeDamDemandMobile' || to.name == 'homeDamFinanceMobile') {
130 next() 130 next()
131 } 131 }
......
src/router/modules/dataInventory.ts
...@@ -44,7 +44,7 @@ const routes: RouteRecordRaw[] = [ ...@@ -44,7 +44,7 @@ const routes: RouteRecordRaw[] = [
44 cache: true, 44 cache: true,
45 reuse: true, 45 reuse: true,
46 editPage: true, 46 editPage: true,
47 activeMenu: '/data-inventory/classify-grade-manage/template-config' 47 activeMenu: '/data-inventory/classify-grade-manage/template-config'
48 }, 48 },
49 beforeEnter: (to, from) => { 49 beforeEnter: (to, from) => {
50 if (to.query.classStandardName) { 50 if (to.query.classStandardName) {
...@@ -52,6 +52,25 @@ const routes: RouteRecordRaw[] = [ ...@@ -52,6 +52,25 @@ const routes: RouteRecordRaw[] = [
52 } 52 }
53 } 53 }
54 }, 54 },
55 {
56 path: 'newCreate-template',
57 name: 'newCreateTemplate',
58 component: () => import('@/views/data_inventory/newCreateTemplate.vue'),
59 meta: {
60 title: '新增-',
61 sidebar: false,
62 breadcrumb: false,
63 cache: true,
64 reuse: true,
65 editPage: true,
66 activeMenu: '/data-inventory/classify-grade-manage/template-config'
67 },
68 beforeEnter: (to, from) => {
69 if (to.query.classStandardName) {
70 to.meta.title = `新增-${to.query.classStandardName}`;
71 }
72 }
73 },
55 ], 74 ],
56 } 75 }
57 ] 76 ]
......
src/types/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('./../components/Tools/table_tools.vue')['default'] 54 Table_tools: typeof import('./../components/Tools/table_tools.vue')['default']
55 Table_v2: typeof import('./../components/Table/table_v2.vue')['default'] 55 Table_v2: typeof import('./../components/Table/table_v2.vue')['default']
56 Tabs: typeof import('./../components/Tabs/index.vue')['default'] 56 Tabs: typeof import('./../components/Tabs/index.vue')['default']
57 TemplateItem: typeof import('./../components/TemplateItem/index.vue')['default']
57 Toolbar: typeof import('./../components/LineageGraph/toolbar.vue')['default'] 58 Toolbar: typeof import('./../components/LineageGraph/toolbar.vue')['default']
58 Topbar: typeof import('./../components/LineageGraph/topbar.vue')['default'] 59 Topbar: typeof import('./../components/LineageGraph/topbar.vue')['default']
59 Transfer: typeof import('./../components/Transfer/index.vue')['default'] 60 Transfer: typeof import('./../components/Transfer/index.vue')['default']
......
src/views/data_inventory/classStandardEdit.vue
1 <route lang="yaml"> 1 <route lang="yaml">
2 name: classStandardEdit //分类标准编辑 2 name: classStandardEdit //分类标准编辑
3 </route> 3 </route>
4 4
5 <script lang="ts" setup name="classStandardEdit"> 5 <script lang="ts" setup name="classStandardEdit">
6 import { ref, onMounted} from "vue"; 6 import { ref, onMounted } from "vue";
7 import useUserStore from "@/store/modules/user"; 7 import useUserStore from "@/store/modules/user";
8 import { useValidator } from '@/hooks/useValidator'; 8 import { useValidator } from '@/hooks/useValidator';
9 import { TableColumnWidth } from '@/utils/enum'; 9 import { TableColumnWidth } from '@/utils/enum';
...@@ -69,26 +69,30 @@ const tableInfo = ref({ ...@@ -69,26 +69,30 @@ const tableInfo = ref({
69 type: "btn", 69 type: "btn",
70 width: 120, 70 width: 120,
71 btns: [ 71 btns: [
72 { label: "编辑", value: "edit", click: (scope) => { 72 {
73 currTableInfo.value = scope.row; 73 label: "编辑", value: "edit", click: (scope) => {
74 drawerInfo.value.visible = true; 74 currTableInfo.value = scope.row;
75 drawerInfo.value.header.title = '编辑分类'; 75 drawerInfo.value.visible = true;
76 classEditFormItems.value.forEach(item => { 76 drawerInfo.value.header.title = '编辑分类';
77 item.default = scope.row[item.field] 77 classEditFormItems.value.forEach(item => {
78 }) 78 item.default = scope.row[item.field]
79 } }, 79 })
80 { label: "删除", value: "delete", click: (scope) => { 80 }
81 proxy.$openMessageBox("此操作将永久删除该分类, 是否继续", () => { 81 },
82 // deleteBizTerm([scope.row.guid]).then((res: any) => { 82 {
83 // if (res.code == proxy.$passCode) { 83 label: "删除", value: "delete", click: (scope) => {
84 // getTableData(); 84 proxy.$openMessageBox("此操作将永久删除该分类, 是否继续", () => {
85 // proxy.$ElMessage.success('该分类删除成功'); 85 // deleteBizTerm([scope.row.guid]).then((res: any) => {
86 // } else { 86 // if (res.code == proxy.$passCode) {
87 // proxy.$ElMessage.error(res.msg); 87 // getTableData();
88 // } 88 // proxy.$ElMessage.success('该分类删除成功');
89 // }); 89 // } else {
90 }) 90 // proxy.$ElMessage.error(res.msg);
91 } }, 91 // }
92 // });
93 })
94 }
95 },
92 ], 96 ],
93 }, 97 },
94 loading: false, 98 loading: false,
...@@ -103,7 +107,7 @@ const classEditFormItems = ref([{ ...@@ -103,7 +107,7 @@ const classEditFormItems = ref([{
103 default: '', 107 default: '',
104 clearable: true, 108 clearable: true,
105 required: true 109 required: true
106 }, { 110 }, {
107 label: '排序', 111 label: '排序',
108 type: 'input', 112 type: 'input',
109 placeholder: '请输入', 113 placeholder: '请输入',
...@@ -146,8 +150,8 @@ const classEditFormItems = ref([{ ...@@ -146,8 +150,8 @@ const classEditFormItems = ref([{
146 type: 'switch', 150 type: 'switch',
147 field: 'state', 151 field: 'state',
148 default: 'Y', 152 default: 'Y',
149 activeText:"有效", 153 activeText: "有效",
150 inactiveText:"停用", 154 inactiveText: "停用",
151 activeValue: 'Y', 155 activeValue: 'Y',
152 inactiveValue: 'N' 156 inactiveValue: 'N'
153 }, { 157 }, {
...@@ -273,8 +277,8 @@ G6.registerNode('tree-node', { ...@@ -273,8 +277,8 @@ G6.registerNode('tree-node', {
273 textAlign: 'left', 277 textAlign: 'left',
274 textBaseline: 'middle', 278 textBaseline: 'middle',
275 fill: '#4FA1A4', 279 fill: '#4FA1A4',
276 fontSize: 10, 280 fontSize: 10,
277 fontFamily: 'simsun' 281 fontFamily: 'simsun'
278 } 282 }
279 }); 283 });
280 var bbox = text.getBBox(); 284 var bbox = text.getBBox();
...@@ -283,7 +287,7 @@ G6.registerNode('tree-node', { ...@@ -283,7 +287,7 @@ G6.registerNode('tree-node', {
283 group.addShape('circle', { 287 group.addShape('circle', {
284 attrs: { 288 attrs: {
285 x: 95, 289 x: 95,
286 y: bbox.minX + bbox.height / 2-5, 290 y: bbox.minX + bbox.height / 2 - 5,
287 r: 5, 291 r: 5,
288 stroke: '#4FA1A4', 292 stroke: '#4FA1A4',
289 fill: '#fff', 293 fill: '#fff',
...@@ -348,7 +352,7 @@ onMounted(() => { ...@@ -348,7 +352,7 @@ onMounted(() => {
348 data.collapsed = collapsed; 352 data.collapsed = collapsed;
349 return true; 353 return true;
350 } 354 }
351 }, 'drag-canvas', 'zoom-canvas'] 355 }, 'drag-canvas', 'zoom-canvas']
352 }, 356 },
353 defaultNode: { 357 defaultNode: {
354 type: 'tree-node', 358 type: 'tree-node',
...@@ -409,7 +413,7 @@ onMounted(() => { ...@@ -409,7 +413,7 @@ onMounted(() => {
409 const { item, target } = evt; 413 const { item, target } = evt;
410 const currentAnchor = target.get('name'); 414 const currentAnchor = target.get('name');
411 if (!currentAnchor) return; 415 if (!currentAnchor) return;
412 // 设置一个全局属性，指定点击的是哪个图形元素 416 // 设置一个全局属性，指定点击的是哪个图形元素
413 }); 417 });
414 }) 418 })
415 419
...@@ -421,11 +425,12 @@ onMounted(() => { ...@@ -421,11 +425,12 @@ onMounted(() => {
421 <ContentWrap id="id-baseInfo" title="基础信息" description="" style="margin-top: 8px;"> 425 <ContentWrap id="id-baseInfo" title="基础信息" description="" style="margin-top: 8px;">
422 <Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" /> 426 <Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" />
423 </ContentWrap> 427 </ContentWrap>
424 <ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description="" style="margin-top:16px; height: calc(100% - 161px)"> 428 <ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description=""
429 style="margin-top:16px; height: calc(100% - 161px)">
425 <div class="tools_btns"> 430 <div class="tools_btns">
426 <el-button v-show="dataShowMethod == 'table'" type="primary" @click="newCreateClass">添加分类</el-button> 431 <el-button v-show="dataShowMethod == 'table'" type="primary" @click="newCreateClass">添加分类</el-button>
427 <el-button v-show="dataShowMethod == 'table'" @click="importClass">导入分类</el-button> 432 <el-button v-show="dataShowMethod == 'table'" @click="importClass">导入分类</el-button>
428 <el-button class="show-change-btn" @click="changeShowMethod">{{ '图形展示' }}</el-button> 433 <el-button class="show-change-btn" @click="changeShowMethod">{{ '图形展示' }}</el-button>
429 </div> 434 </div>
430 <Table v-show="dataShowMethod == 'table'" :tableInfo="tableInfo" /> 435 <Table v-show="dataShowMethod == 'table'" :tableInfo="tableInfo" />
431 <div ref="shapeMain" class="shape-main" v-show="dataShowMethod != 'table'"></div> 436 <div ref="shapeMain" class="shape-main" v-show="dataShowMethod != 'table'"></div>
...@@ -440,7 +445,6 @@ onMounted(() => { ...@@ -440,7 +445,6 @@ onMounted(() => {
440 </template> 445 </template>
441 446
442 <style lang="scss" scoped> 447 <style lang="scss" scoped>
443
444 .container_wrap { 448 .container_wrap {
445 padding: 0px; 449 padding: 0px;
446 } 450 }
...@@ -487,4 +491,4 @@ onMounted(() => { ...@@ -487,4 +491,4 @@ onMounted(() => {
487 .table_panel { 491 .table_panel {
488 height: calc(100% - 58px) !important; 492 height: calc(100% - 58px) !important;
489 } 493 }
490 </style>
...\ No newline at end of file ...\ No newline at end of file
494 </style>
......
src/views/data_inventory/newCreateTemplate.vue 0 → 100644
1 <route lang="yaml">
2 name: newCreateTemplate //新增分级分类模板
3 </route>
4
5 <script lang="ts" setup name="newCreateTemplate">
6 import { ref } from "vue";
7 const fullscreenLoading = ref(false);
8 const isExpand = ref(true);
9 const classStandardFormItems = ref([{
10 label: '模板名称',
11 type: 'input',
12 maxlength: 50,
13 placeholder: '请输入',
14 field: 'templeteName',
15 default: '',
16 clearable: true,
17 required: true
18 }, {
19 label: '行业分类',
20 type: 'select',
21 placeholder: '请选择',
22 field: ' industryCategory',
23 default: '',
24 options: [], //TODO
25 required: true,
26 filterable: true,
27 clearable: true,
28 visible: true,
29 }, {
30 label: '分级标准',
31 type: 'select',
32 placeholder: '请选择',
33 field: ' gradingStandard',
34 default: '',
35 options: [], //TODO
36 required: true,
37 filterable: true,
38 clearable: true,
39 visible: true,
40 }]);
41 const dataShowMethod = ref('shape');
42 const tableInfo = ref({
43 id: "data-class-standard-table",
44 multiple: false,
45 fields: [
46 { label: "序号", type: "index", width: 56, align: "center" },
47 { label: "数据库名称", field: "className", width: 160, },
48 { label: "数据库名", field: "levelName", width: 120 },
49 { label: "总表数", field: "state", type: "tag", width: 120, align: "center" },
50 { label: "存储量（约/MB）", field: "description", },
51 { label: "总字段数", field: "minLevel", width: 140 },
52 ],
53 data: [{
54 guid: '1',
55 children: [{
56 guid: '1-1'
57 }]
58 }],
59 showPage: false,
60 loading: false,
61 });
62
63 const cancel = () => {
64 console.log('cancel');
65 };
66
67 const save = () => {
68 console.log('save');
69 };
70 </script>
71
72 <template>
73 <div class="container_wrap" v-loading="fullscreenLoading">
74 <div class="content_main">
75 <ContentWrap id="id-baseInfo" title="模板信息" description="" style="margin-top: 8px;" :expandSwicth=isExpand>
76 <Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" />
77 </ContentWrap>
78 <ContentWrap id="id-classStandard" class="detail-content" title="选择元数据" description="" style="margin-top:16px;"
79 :expandSwicth=isExpand>
80
81 </ContentWrap>
82 </div>
83 <div class=" bottom_tool_wrap">
84 <el-button @click="cancel">取消</el-button>
85 <el-button type="primary" @click="save">保存</el-button>
86 </div>
87
88 </div>
89 </template>
90
91 <style lang="scss" scoped>
92 .container_wrap {
93 padding: 0px;
94 }
95
96 .content_main {
97 height: calc(100% - 44px);
98 padding: 10px 16px;
99 }
100 </style>
src/views/data_inventory/templateConfig.vue
...@@ -9,6 +9,8 @@ import TableTools from '@/components/Tools/table_tools.vue'; ...@@ -9,6 +9,8 @@ import TableTools from '@/components/Tools/table_tools.vue';
9 import { MoreFilled } from "@element-plus/icons-vue"; 9 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'
13 import { getTempleteClassifyData } from "@/api/modules/dataInventory";
12 14
13 const router = useRouter(); 15 const router = useRouter();
14 const { required } = useValidator(); 16 const { required } = useValidator();
...@@ -105,12 +107,12 @@ const searchClass = (val: any, clear: boolean = false) => { ...@@ -105,12 +107,12 @@ const searchClass = (val: any, clear: boolean = false) => {
105 classPage.value.curr = 1; 107 classPage.value.curr = 1;
106 if (clear) { 108 if (clear) {
107 classSearchItemList.value.map(item => item.default = '') 109 classSearchItemList.value.map(item => item.default = '')
108 // classPage.value.planName = ''; 110 // classPage.value.planName = '';
109 getClassListData(); 111 getClassListData();
110 return; 112 return;
111 } 113 }
112 // classPage.value.planName = ''; 114 // classPage.value.planName = '';
113 getClassListData(); 115 getClassListData();
114 }; 116 };
115 117
116 const newCreateClass = () => { 118 const newCreateClass = () => {
...@@ -218,6 +220,12 @@ const newCreateClassStandardDialogInfo = ref({ ...@@ -218,6 +220,12 @@ const newCreateClassStandardDialogInfo = ref({
218 }) 220 })
219 221
220 const newCreateTemplate = () => { 222 const newCreateTemplate = () => {
223 router.push({
224 name: 'newCreateTemplate',
225 query: {
226 classStandardName: '分类分级模板'
227 }
228 });
221 229
222 } 230 }
223 231
...@@ -225,8 +233,42 @@ const newCreateGrade = () => { ...@@ -225,8 +233,42 @@ const newCreateGrade = () => {
225 233
226 } 234 }
227 235
236 /**
237 * 分类分级模板
238 *
239 */
240 const pageInfo = ref({
241 limit: 50,
242 curr: 1,
243 sizes: [
244 { label: "10", value: 10 },
245 { label: "50", value: 50 },
246 { label: "100", value: 100 },
247 { label: "150", value: 150 },
248 { label: "200", value: 200 },
249 ],
250 type: "normal",
251 rows: 0,
252 })
253
254 const pageChange = (info) => {
255 pageInfo.value.curr = Number(info.curr);
256 pageInfo.value.limit = Number(info.limit);
257 getClassificationTemplateList();
258 }
259
260 const getClassificationTemplateList = async () => {
261 const params = {
262 pageSize: pageInfo.value.limit,
263 pageIndex: pageInfo.value.curr,
264 }
265 const res = await getTempleteClassifyData(params);
266 console.log(res);
267 }
268
228 onBeforeMount(() => { 269 onBeforeMount(() => {
229 getClassListData(); 270 getClassListData();
271 getClassificationTemplateList();
230 }) 272 })
231 273
232 </script> 274 </script>
...@@ -241,6 +283,12 @@ onBeforeMount(() => { ...@@ -241,6 +283,12 @@ onBeforeMount(() => {
241 <el-button type="primary" @click="newCreateTemplate">新增模板</el-button> 283 <el-button type="primary" @click="newCreateTemplate">新增模板</el-button>
242 </div> 284 </div>
243 </div> 285 </div>
286 <div class="content">
287 <TemplateItem />
288 </div>
289 <div class="botton-page-nav">
290 <PageNav :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
291 </div>
244 </div> 292 </div>
245 <div class="panel" v-show="tabsInfo.activeName == 'classStandard'"> 293 <div class="panel" v-show="tabsInfo.activeName == 'classStandard'">
246 <div class="table_tool_wrap"> 294 <div class="table_tool_wrap">
...@@ -282,7 +330,40 @@ onBeforeMount(() => { ...@@ -282,7 +330,40 @@ onBeforeMount(() => {
282 </div> 330 </div>
283 </div> 331 </div>
284 <div class="panel" v-show="tabsInfo.activeName == 'gradeStandard'"> 332 <div class="panel" v-show="tabsInfo.activeName == 'gradeStandard'">
285 <el-button type="primary" @click="newCreateGrade">新增分级</el-button> 333 <div class="tools_btns">
334 <el-button type="primary" @click="newCreateGrade">新增分级</el-button>
335 </div>
336 <div class="data-content" v-loading="classListDataLoading">
337 <div class="card-content" v-for="item in classListData" :key="item.guid" @click="handleClassDataClick(item)">
338 <div class="type-btn">
339 <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
340 popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
341 <template #reference>
342 <el-icon color="#666" @click.stop="cardBtnVisible = true">
343 <MoreFilled />
344 </el-icon>
345 </template>
346 <div class="levitation-ul">
347 <span class="levitation-li" @click="handleClassDataClick(item)">配置</span>
348 <span class="levitation-li" @click="handleClassDataEdit(item)">编辑</span>
349 <span class="levitation-li" @click="handleClassDataDel(item)">删除</span>
350 </div>
351 </el-popover>
352 </div>
353 <el-icon class="title-icon">
354 <svg-icon name="folder" />
355 </el-icon>
356 <div class="title">{{ item.name }}</div>
357 <div class="desc-row">
358 <div class="desc">{{ '分级标准' }}</div>
359 <div class="desc">{{ item.updateTime }}</div>
360 </div>
361 </div>
362 <div v-if="!classListData.length" class="card-noData">
363 <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
364 <span>暂无分类标准</span>
365 </div>
366 </div>
286 </div> 367 </div>
287 <Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" /> 368 <Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" />
288 </div> 369 </div>
...@@ -295,7 +376,25 @@ onBeforeMount(() => { ...@@ -295,7 +376,25 @@ onBeforeMount(() => {
295 376
296 .panel { 377 .panel {
297 height: calc(100% - 51px); 378 height: calc(100% - 51px);
379 display: flex;
380 flex-direction: column;
381
382 .content {
383 flex: 1;
384 height: 100%;
385 overflow-y: auto;
386 }
387
388 .botton-page-nav {
389 position: sticky;
390 bottom: 0;
391 width: 100%;
392 background-color: #fff;
393 z-index: 10;
394 }
298 } 395 }
396
397
299 } 398 }
300 399
301 :deep(.table-tools) { 400 :deep(.table-tools) {
...@@ -384,4 +483,4 @@ onBeforeMount(() => { ...@@ -384,4 +483,4 @@ onBeforeMount(() => {
384 } 483 }
385 } 484 }
386 } 485 }
387 </style>
...\ No newline at end of file ...\ No newline at end of file
486 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!