update: 新增分类分级页面
Showing
10 changed files
with
543 additions
and
10 deletions
| ... | @@ -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 | ... | ... |
This diff could not be displayed because it is too large.
src/api/modules/dataInventory.ts
0 → 100644
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> |
| ... | @@ -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 | ] | ... | ... |
| ... | @@ -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'] | ... | ... |
| ... | @@ -3,7 +3,7 @@ | ... | @@ -3,7 +3,7 @@ |
| 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,15 +69,18 @@ const tableInfo = ref({ | ... | @@ -69,15 +69,18 @@ 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 | label: "编辑", value: "edit", click: (scope) => { | ||
| 73 | currTableInfo.value = scope.row; | 74 | currTableInfo.value = scope.row; |
| 74 | drawerInfo.value.visible = true; | 75 | drawerInfo.value.visible = true; |
| 75 | drawerInfo.value.header.title = '编辑分类'; | 76 | drawerInfo.value.header.title = '编辑分类'; |
| 76 | classEditFormItems.value.forEach(item => { | 77 | classEditFormItems.value.forEach(item => { |
| 77 | item.default = scope.row[item.field] | 78 | item.default = scope.row[item.field] |
| 78 | }) | 79 | }) |
| 79 | } }, | 80 | } |
| 80 | { label: "删除", value: "delete", click: (scope) => { | 81 | }, |
| 82 | { | ||
| 83 | label: "删除", value: "delete", click: (scope) => { | ||
| 81 | proxy.$openMessageBox("此操作将永久删除该分类, 是否继续", () => { | 84 | proxy.$openMessageBox("此操作将永久删除该分类, 是否继续", () => { |
| 82 | // deleteBizTerm([scope.row.guid]).then((res: any) => { | 85 | // deleteBizTerm([scope.row.guid]).then((res: any) => { |
| 83 | // if (res.code == proxy.$passCode) { | 86 | // if (res.code == proxy.$passCode) { |
| ... | @@ -88,7 +91,8 @@ const tableInfo = ref({ | ... | @@ -88,7 +91,8 @@ const tableInfo = ref({ |
| 88 | // } | 91 | // } |
| 89 | // }); | 92 | // }); |
| 90 | }) | 93 | }) |
| 91 | } }, | 94 | } |
| 95 | }, | ||
| 92 | ], | 96 | ], |
| 93 | }, | 97 | }, |
| 94 | loading: false, | 98 | loading: false, |
| ... | @@ -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 | }, { |
| ... | @@ -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', |
| ... | @@ -421,7 +425,8 @@ onMounted(() => { | ... | @@ -421,7 +425,8 @@ 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> |
| ... | @@ -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 | } | ... | ... |
| 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> |
| ... | @@ -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(); |
| ... | @@ -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,8 +330,41 @@ onBeforeMount(() => { | ... | @@ -282,8 +330,41 @@ 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'"> |
| 333 | <div class="tools_btns"> | ||
| 285 | <el-button type="primary" @click="newCreateGrade">新增分级</el-button> | 334 | <el-button type="primary" @click="newCreateGrade">新增分级</el-button> |
| 286 | </div> | 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> | ||
| 367 | </div> | ||
| 287 | <Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" /> | 368 | <Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" /> |
| 288 | </div> | 369 | </div> |
| 289 | </template> | 370 | </template> |
| ... | @@ -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; | ||
| 298 | } | 394 | } |
| 395 | } | ||
| 396 | |||
| 397 | |||
| 299 | } | 398 | } |
| 300 | 399 | ||
| 301 | :deep(.table-tools) { | 400 | :deep(.table-tools) { | ... | ... |
-
Please register or sign in to post a comment