Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
a4576de4 by lxs
Options

Merge branch 'develop' of http://117.78.60.236:8000/csbr-daop/fe-data-asset-management into develop

2 parents 17618d9c 9a4f1f8c
Inline Side-by-side
Showing 13 changed files with 1664 additions and 704 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.1:28052/ 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 # 系统管理 接口地址
...@@ -23,6 +24,9 @@ VITE_APP_PLAN_BASEURL = ms-daop-jgjf-data-plan-service ...@@ -23,6 +24,9 @@ VITE_APP_PLAN_BASEURL = ms-daop-jgjf-data-plan-service
23 #数据质量接口地址 24 #数据质量接口地址
24 VITE_APP_QUALITY_BASEURL = ms-daop-data-quality-service 25 VITE_APP_QUALITY_BASEURL = ms-daop-data-quality-service
25 26
27 #数据盘点接口地址
28 VITE_APP_CHECK_BASEURL = ms-daop-zcgl-data-inventory
29
26 30
27 #门户接口 31 #门户接口
28 VITE_API_PORTALURL = https://swzl-test.zgsjzc.com/portal 32 VITE_API_PORTALURL = https://swzl-test.zgsjzc.com/portal
......
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']
......
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 /**
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
18 /** 分类分级模板数据 */
19 export const getTempleteClassifyData = (data) => request({
20 url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/cg-template/page-list`,
21 method: 'post',
22 data
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`, 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/components/Dialog/dialog_form.vue
1 <script lang="ts" setup name="DialogForm"> 1 /**
2 import { computed, reactive } from "vue"; 2 * 封装内容显示为form的对话框，外部只需传入form相关的配置，以及对话框尺寸标题等即可。
3 import type { FormInstance, FormRules, CascaderProps } from "element-plus"; 3 */
4 import { 4 <script lang="ts" setup name="Dialog_form">
5 Plus, 5 import { ref } from 'vue';
6 CirclePlus, 6
7 Check, 7 const emits = defineEmits(["formDialogBtnClick", "formDialogSelectChange", "formDialogRadioGroupChange"]);
8 Download, 8
9 Upload, 9 /** { visible: false, size: number, title: string, submitBtnLoading: false, formInfo: { id: xx, items: xx, rules:xx }, btns: { 'cancel': xx, } } */
10 Search,
11 } from "@element-plus/icons-vue";
12 import Table from "../Table/index.vue";
13 const emits = defineEmits(["radioGroupChange", "selectChange"]);
14 const props = defineProps({ 10 const props = defineProps({
15 itemList: { 11 dialogConfigInfo: {
16 type: Array<any>,
17 default: [],
18 },
19 formId: {
20 type: String,
21 default: "",
22 },
23 rules: {
24 type: Object, 12 type: Object,
25 default: {}, 13 default: {},
26 }, 14 },
27 col: {
28 type: String,
29 default: "",
30 },
31 });
32 const setFormFields = (list) => {
33 let obj = {};
34 list.map((item) => {
35 if (item.field) {
36 obj[item.field] = item.default ?? "";
37 }
38 if (item.children) {
39 obj = { ...obj, ...setFormFields(item.children) };
40 }
41 });
42 return obj;
43 };
44 const ruleFormRef = ref<FormInstance>();
45 const formInline: any = computed(() => {
46 return reactive(setFormFields(props.itemList));
47 }); 15 });
48 const formRules = computed(() => {
49 return reactive<FormRules>(props.rules);
50 });
51 const formItemList: any = computed(() => {
52 return props.itemList ?? [];
53 });
54 const selectAll = ref(false);
55 const resetForm = (formEl: FormInstance | undefined) => {
56 if (!formEl) return;
57 formEl.resetFields();
58 formEl.clearValidate();
59 };
60 defineExpose({
61 ruleFormRef,
62 formInline,
63 selectAll,
64 resetForm,
65 });
66 const selectChange = (val, row) => {
67 emits("selectChange", val, row);
68 };
69 const radioGroupChange = (val) => {
70 emits("radioGroupChange", val);
71 };
72 const selectAllChange = (val, row, formModel) => {
73 const list = formItemList.value;
74 list.map((item) => (item.default = formModel[item.field]));
75 if (val) {
76 row.default = row.children.map((item) => item.label);
77 } else {
78 row.default = [];
79 }
80 };
81 const checkboxGroupChange = (val, row) => {
82 selectAll.value = val.length == row.children.length;
83 };
84 const inputBlur = (evt, row) => {
85 if (row.field == "contactTel") {
86 formInline.value.adminAccount = formInline.value.contactTel;
87 }
88 };
89 </script>
90 <template>
91 <el-form ref="ruleFormRef" class="dialog-form-inline" :class="['col' + props.col]" :inline="true" :model="formInline"
92 :rules="formRules">
93 <el-form-item v-for="(item, index) in formItemList" :key="'form_item_' + index" :prop="item.field"
94 :class="{ 'is-block': item.block }">
95 <span slot="label">
96 <span :class="{ required_mark: item.required }">{{ item.label }}</span>
97 </span>
98 <div class="upload_wrap" v-if="item.type == 'image-upload'">
99 <el-upload action="#" list-type="picture-card" :auto-upload="false">
100 <el-icon>
101 <Plus />
102 </el-icon>
103 <template #file="{ file }">
104 <div>
105 <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
106 </div>
107 </template>
108 </el-upload>
109 </div>
110 <div class="checkbox_panel" v-else-if="item.type == 'checkbox-panel'">
111 <el-checkbox v-model="formInline[item.field]" :disabled="item.disabled">{{ item.placeholder }}</el-checkbox>
112 <div class="panel_wrap">
113 <div class="item_panel" v-for="panel in item.children">
114 <label :class="{ required_mark: panel.required }">{{
115 panel.label
116 }}</label>
117 <el-input v-if="panel.type == 'file-upload'" v-model.trim="formInline[panel.field]"
118 :placeholder="panel.placeholder" :disabled="panel.disabled" class="input-with-upload">
119 <template #append>
120 <el-button class="upload_btn">
121 <el-icon>
122 <svg-icon name="upload-file" />
123 </el-icon>
124 </el-button>
125 </template>
126 </el-input>
127 <el-input v-else v-model.trim="formInline[panel.field]" :placeholder="panel.placeholder"
128 :disabled="panel.disabled" />
129 </div>
130 </div>
131 </div>
132 <div class="checkbox_input" v-else-if="item.type == 'checkbox-input'">
133 <el-checkbox v-model="formInline[item.field]" :disabled="item.disabled">{{ item.placeholder }}</el-checkbox>
134 <div class="input_panel" v-for="child in item.children">
135 <span>{{ child.prepend }}</span>
136 <el-input v-model.trim="formInline[child.field]" :disabled="child.disabled" :placeholder="child.placeholder" />
137 <span>{{ child.append }}</span>
138 </div>
139 </div>
140 <div class="checkbox_textarea" v-else-if="item.type == 'checkbox-textarea'">
141 <el-checkbox v-model="formInline[item.field]" :disabled="item.disabled">{{ item.placeholder }}</el-checkbox>
142 <div class="textarea_panel" v-for="child in item.children">
143 <el-input v-model.trim="formInline[child.field]" :rows="6" type="textarea" :placeholder="child.placeholder"
144 :disabled="child.disabled" resize="none" />
145 </div>
146 </div>
147 <div class="checkbox_select" v-else-if="item.type == 'checkbox-select'" :class="{ is_block: item.block }">
148 <el-checkbox v-model="formInline[item.field]" :disabled="item.disabled">{{ item.placeholder }}</el-checkbox>
149 <div v-for="child in item.children">
150 <el-select v-model="formInline[child.field]" :placeholder="child.placeholder">
151 <el-option v-for="opts in child.options" :label="opts.label" :value="opts.value" />
152 </el-select>
153 </div>
154 </div>
155 <div class="checkbox_group_panel" v-else-if="item.type == 'checkbox-group'" :class="{ is_block: item.block }">
156 <div class="panel_tool">
157 <span class="tips_txt">应用产品的菜单变化，产品组合会同步变化</span>
158 <el-checkbox v-model="selectAll" @change="(val) => selectAllChange(val, item, formInline)">全选</el-checkbox>
159 </div>
160 <el-checkbox-group v-model="formInline[item.field]" @change="(val) => checkboxGroupChange(val, item)">
161 <el-checkbox v-for="child in item.children" :label="child.label" />
162 </el-checkbox-group>
163 </div>
164 <div class="select_group" v-else-if="item.type == 'select-group'">
165 <el-form-item v-for="(child, c) in item.children" :key="'child_item_' + c" :prop="child.field"
166 :class="{ 'is-block': child.block }">
167 <span slot="label">
168 <span :class="{ required_mark: child.required }">{{
169 child.label
170 }}</span>
171 </span>
172 <el-cascader v-if="child.type == 'cascader'" v-model="formInline[child.field]" :props="child.props" clearable />
173 <el-select v-else-if="child.type == 'select'" v-model="formInline[child.field]" :placeholder="child.placeholder"
174 :clearable="child.clearable">
175 <el-option v-for="opts in child.options" :label="opts.label" :value="opts.value" />
176 </el-select>
177 <el-input v-else v-model.trim="formInline[child.field]" :placeholder="child.placeholder" :clearable="child.clearable"
178 :disabled="child.disabled" />
179 </el-form-item>
180 </div>
181 <div class="select_panel" v-else-if="item.type == 'select-panel'">
182 <template v-for="child in item.children">
183 <el-select v-if="child.type == 'select'" v-model="formInline[child.field]" :class="{ is_block: child.block }"
184 :placeholder="child.placeholder">
185 <el-option v-for="opts in child.options" :label="opts.label" :value="opts.value" />
186 </el-select>
187 <el-input v-else-if="child.type == 'textarea'" v-model.trim="formInline[child.field]" :rows="12" type="textarea"
188 :placeholder="child.placeholder" :disabled="child.disabled" resize="none"
189 :class="{ is_block: child.block }" />
190 <el-input v-else v-model.trim="formInline[child.field]" :placeholder="child.placeholder" :clearable="child.clearable"
191 :disabled="child.disabled" />
192 </template>
193 </div>
194 <!-- <div class="table_upload_panel" v-else-if="item.type == 'table-upload'">
195 <div class="panel_title">添加表数据</div>
196 <div class="upload_tool">
197 <div>
198 <el-button :icon="Upload">上传报表</el-button>
199 <el-button :icon="Download">下载报表</el-button>
200 </div>
201 <div>
202 <el-button plain type="primary">树形显示</el-button>
203 <el-button plain type="primary">新增行</el-button>
204 <el-button plain>刷新</el-button>
205 <el-button plain>删除</el-button>
206 </div>
207 </div>
208 <el-upload
209 ref="uploadRef"
210 class="upload-demo"
211 drag
212 action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
213 :auto-upload="false"
214 >
215 <el-icon class="el-icon--upload">
216 <Plus />
217 </el-icon>
218 <div class="el-upload__text">点击或拖拽上传</div>
219 </el-upload>
220 </div>
221 <div class="table_panel" v-else-if="item.type == 'table-panel'">
222 <Table :tableInfo="item.tableInfo" />
223 <el-button
224 v-for="tool in item.tableTool"
225 link
226 type="primary"
227 :icon="CirclePlus"
228 >{{ tool.label }}</el-button
229 >
230 </div>
231 <div class="table_panel" v-else-if="item.type == 'tool-table-panel'">
232 <div class="table_tools start">
233 <el-button v-for="tool in item.tableTool" :type="tool.type">{{
234 tool.label
235 }}</el-button>
236 </div>
237 <Table :tableInfo="item.tableInfo" />
238 </div>
239 <div class="table_panel" v-else-if="item.type == 'edit-table-panel'">
240 <div class="table_tools">
241 <span>定义表结构</span>
242 <div class="tool_bars">
243 <el-button v-for="tool in item.tableTool" :type="tool.type" plain>{{
244 tool.label
245 }}</el-button>
246 </div>
247 </div>
248 <Table :tableInfo="item.tableInfo" />
249 </div> -->
250 <div class="radio_panel" v-else-if="item.type == 'radio-panel'">
251 <el-radio-group v-model="formInline[item.field]" @change="radioGroupChange">
252 <el-radio v-for="opt in item.options" :label="opt.value" border>
253 <template #default>
254 <span>{{ opt.label }}</span>
255 <el-icon class="corner_mark" :class="{ active: formInline[item.field] == opt.value }">
256 <Check />
257 </el-icon>
258 </template>
259 </el-radio>
260 </el-radio-group>
261 <div class="panel_content">
262 <el-form-item v-for="(child, c) in item.children" :key="'child_item_' + c" :prop="child.field"
263 :class="{ 'is-block': child.block }">
264 <span slot="label">
265 <span :class="{ required_mark: child.required }">{{
266 child.label
267 }}</span>
268 </span>
269 <el-select v-if="child.type == 'select'" v-model="formInline[child.field]" :placeholder="child.placeholder"
270 :clearable="child.clearable">
271 <el-option v-for="opts in child.options" :label="opts.label" :value="opts.value" />
272 </el-select>
273 <el-input v-else v-model.trim="formInline[child.field]" :placeholder="child.placeholder"
274 :clearable="child.clearable" />
275 </el-form-item>
276 </div>
277 </div>
278 <div class="switch" v-else-if="item.type == 'switch'">
279 <el-switch inline-prompt v-model="formInline[item.field]" :width="item.switchWidth"
280 :active-value="item.activeValue" :inactive-value="item.inactiveValue" :active-text="item.activeText"
281 :inactive-text="item.inactiveText" />
282 </div>
283 <div class="textarea_panel" v-else-if="item.type == 'textarea-panel'">
284 <div class="panel_header">
285 <span class="required_mark">{{ item.title }}</span>
286 <div class="tool_bars">
287 <span v-for="btn in item.btns" class="text_btn">
288 <span>{{ btn.label }}</span>
289 </span>
290 </div>
291 </div>
292 <el-input v-model.trim="formInline[item.field]" :rows="12" type="textarea" :placeholder="item.placeholder"
293 :disabled="item.disabled" resize="none" :class="{ is_block: item.block }" />
294 </div>
295 <el-select v-else-if="item.type == 'select'" v-model="formInline[item.field]" :placeholder="item.placeholder"
296 :clearable="item.clearable" @change="(val) => selectChange(val, item)">
297 <el-option v-for="opt in item.options" :label="opt.label" :value="opt.value" />
298 </el-select>
299 <el-checkbox v-else-if="item.type == 'checkbox'" v-model="formInline[item.field]" :disabled="item.disabled">{{
300 item.placeholder }}</el-checkbox>
301 <el-radio-group v-else-if="item.type == 'radio-group'" v-model="formInline[item.field]">
302 <el-radio v-for="radio in item.options" :label="radio.value">{{
303 radio.label
304 }}</el-radio>
305 </el-radio-group>
306 <el-input v-else-if="item.type == 'textarea'" v-model.trim="formInline[item.field]" :rows="4" type="textarea"
307 :placeholder="item.placeholder" :disabled="item.disabled" resize="none" />
308 <el-input v-else-if="item.type == 'password'" v-model.trim="formInline[item.field]" type="password"
309 :placeholder="item.placeholder" :clearable="item.clearable" show-password />
310 <el-input v-else-if="item.type == 'input-select'" v-model.trim="formInline[item.field]" :placeholder="item.placeholder"
311 class="input-with-select" :clearable="item.clearable" :suffix-icon="Search">
312 <template #prepend>
313 <div v-for="child in item.children">
314 <el-select v-model="formInline[child.field]" :placeholder="child.placeholder" :clearable="child.clearable"
315 style="width: 96px">
316 <el-option v-for="opts in child.options" :label="opts.label" :value="opts.value" />
317 </el-select>
318 </div>
319 </template>
320 </el-input>
321 <el-cascader v-else-if="item.type == 'cascader'" v-model="formInline[item.field]" :options="item.options"
322 :props="item.props" :show-all-levels="item.showAllLevels ?? true" :clearable="item.clearable"
323 :disabled="item.disabled" />
324 <el-date-picker v-else-if="item.type == 'date-picker'" v-model="formInline[item.field]" type="daterange"
325 range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :format="item.format ?? 'YYYY-MM-DD'"
326 :value-format="item.formatValue ?? 'YYYY-MM-DD'" :unlink-panels="item.unlink ?? false"
327 :shortcuts="item.shortcuts ?? []" :default-value="item.defaultDate ?? []" />
328 <el-input v-else v-model.trim="formInline[item.field]" :placeholder="item.placeholder" :clearable="item.clearable"
329 :disabled="item.disabled" @blur="(evt) => inputBlur(evt, item)" />
330 </el-form-item>
331 </el-form>
332 </template>
333 <style lang="scss" scoped>
334 .dialog-form-inline {
335 display: flex;
336 justify-content: space-between;
337 align-items: center;
338 flex-wrap: wrap;
339 text-align: left;
340
341 &.col3 {
342 justify-content: flex-start;
343
344 :deep(.el-form-item) {
345 width: calc(33.33% - 6.67px);
346 margin-right: 10px;
347
348 &:nth-child(3n) {
349 margin-right: 0;
350 }
351
352 &.is-block {
353 width: 100%;
354 margin-right: 0;
355 }
356 }
357 }
358
359 :deep(.el-form-item) {
360 width: calc(50% - 5px);
361 margin-right: 0;
362 flex-direction: column;
363 margin-bottom: 12px;
364
365 .el-form-item__content {
366 line-height: 21px;
367
368 // margin-bottom: 2px;
369 >div {
370 width: 100%;
371 }
372 }
373
374 .el-form-item__label {
375 justify-content: flex-start;
376 }
377
378 .el-select,
379 .el-radio-group {
380 width: 100%;
381
382 .el-radio {
383 margin-right: 8px;
384 }
385 }
386
387 &.is-block {
388 width: 100%;
389
390 .el-form-item__content {
391 width: 100%;
392 }
393 }
394
395 &.required_mark {
396 .el-form-item__label {
397 position: relative;
398
399 &::after {
400 content: "*";
401 color: #fb2323;
402 position: absolute;
403 margin-left: 2px;
404 }
405 }
406 }
407
408 .required_mark {
409 position: relative;
410
411 &::after {
412 content: "*";
413 color: #fb2323;
414 position: absolute;
415 margin-left: 2px;
416 }
417 }
418
419 .el-radio {
420 .el-radio__inner::after {
421 width: 10px;
422 height: 10px;
423 }
424
425 .el-radio__input.is-checked .el-radio__inner {
426 background-color: inherit;
427
428 &::after {
429 background-color: var(--el-color-primary);
430 }
431 }
432 }
433
434 .table_tools {
435 margin-bottom: 10px;
436 display: flex;
437 justify-content: space-between;
438 align-items: center;
439 16
440 >span { 17 const dialogInfo = computed(() => {
441 font-size: 16px; 18 return {
442 color: var(--el-color-regular); 19 visible: props.dialogConfigInfo.visible,
443 font-weight: 600; 20 size: props.dialogConfigInfo.size,
444 } 21 direction: "column",
445 } 22 header: {
446 23 title: props.dialogConfigInfo.title,
447 .upload_wrap { 24 },
448 width: 100%; 25 contents: [
449 padding: 0 12px; 26 {
450 border: 1px solid #d9d9d9; 27 type: 'form',
451 border-radius: 2px; 28 title: '',
452 29 formInfo: props.dialogConfigInfo.formInfo
453 .el-upload-list { 30 }
454 .el-upload--picture-card { 31 ],
455 width: 64px; 32 footer: {
456 height: 64px; 33 btns: [
457 margin: 12px 0; 34 { type: "default", label: "取消", value: "cancel" },
458 } 35 { type: "primary", label: "确定", value: "submit", loading: props.dialogConfigInfo.submitBtnLoading ?? false },
459 } 36 ],
460 37 },
461 .el-upload-list--picture-card .el-upload-list__item { 38 }
462 width: 64px; 39 })
463 height: 64px; 40
464 margin: 12px 12px 12px 0; 41 const formDialogBtnClick = (btn, info) => {
465 } 42 props.dialogConfigInfo.btns[btn.value]?.(btn, info);
466 } 43 };
467
468 .checkbox_panel {
469 .panel_wrap {
470 width: 100%;
471 padding: 5px 12px 20px 12px;
472 border: 1px solid #d9d9d9;
473 border-radius: 2px;
474
475 .item_panel {
476 margin-bottom: 10px;
477
478 .el-input-group__append {
479 box-shadow: none;
480 }
481
482 .upload_btn {
483 padding: 0;
484 padding-left: 12px;
485
486 .el-icon {
487 width: 24px;
488 height: 24px;
489 color: var(--el-text-color-regular);
490
491 svg {
492 width: 24px;
493 height: 24px;
494 }
495 }
496 }
497 }
498 }
499 }
500
501 .checkbox_input {
502 display: flex;
503
504 .input_panel {
505 margin: 0 20px;
506 display: flex;
507 align-items: center;
508
509 >span {
510 margin: 0 4px;
511 white-space: nowrap;
512 }
513 }
514 }
515
516 .checkbox_group_panel {
517 padding: 12px 24px;
518 border: 1px solid #d9d9d9;
519 border-radius: 2px;
520 position: relative;
521
522 .panel_tool {
523 width: calc(100% - 80px);
524 height: 21px;
525 display: flex;
526 justify-content: space-between;
527 align-items: center;
528 position: absolute;
529 top: -21px;
530 right: 0;
531
532 .tips_txt {
533 font-size: 12px;
534 color: #b2b2b2;
535 }
536 }
537 }
538
539 .select_panel {
540 display: flex;
541 justify-content: space-between;
542 flex-wrap: wrap;
543
544 >div {
545 width: calc(33.33% - 5px);
546 margin-bottom: 10px;
547
548 &:last-child {
549 margin-bottom: 0;
550 }
551
552 &.is_block {
553 width: 100%;
554 }
555 }
556 }
557 }
558
559 .select_group {
560 display: flex;
561 justify-content: space-between;
562 }
563
564 .radio_panel {
565 .panel_content {
566 padding: 5px 0;
567 background: #fafafa;
568 border: 1px solid #e5e5e5;
569 margin: 10px 0;
570 padding: 0 10px;
571 display: flex;
572 flex-wrap: wrap;
573 }
574
575 :deep(.el-radio) {
576 &.is-bordered {
577 padding: 0;
578 position: relative;
579
580 .el-radio__input {
581 position: absolute;
582 opacity: 0;
583 }
584
585 .el-radio__label {
586 padding: 0 15px;
587 font-size: 12px;
588 position: relative;
589
590 .corner_mark {
591 position: absolute;
592 right: 0;
593 bottom: 0;
594 width: 18px;
595 height: 18px;
596 color: #fff;
597
598 svg {
599 width: 9px;
600 height: 9px;
601 position: absolute;
602 right: 0;
603 bottom: 2px;
604 z-index: 1;
605 }
606
607 &.active {
608 &::after {
609 content: "";
610 position: absolute;
611 border: 9px solid var(--el-color-primary);
612 border-top-color: transparent;
613 border-left-color: transparent;
614 }
615 }
616 }
617 }
618
619 .el-radio__input.is-checked+.el-radio__label {
620 color: var(--el-color-primary);
621 }
622 }
623 }
624 }
625 44
626 .table_panel { 45 const formDialogRadioGroupChange = (val, row, item) => {
627 .table_tools { 46 emits('formDialogRadioGroupChange', val, row, item);
628 &.start { 47 }
629 justify-content: flex-start;
630 }
631 }
632 }
633 48
634 .table_upload_panel { 49 const formDialogSelectChange = (val, item, row) => {
635 .panel_title { 50 emits('formDialogSelectChange', val, row, item);
636 color: var(--el-color-regular); 51 }
637 font-size: 16px;
638 font-weight: 600;
639 }
640 52
641 .upload_tool { 53 </script>
642 margin-bottom: 10px;
643 display: flex;
644 justify-content: space-between;
645 }
646 }
647 54
648 .textarea_panel { 55 <template>
649 .panel_header { 56 <Dialog :dialogInfo="dialogInfo" @btnClick="formDialogBtnClick" @radioGroupChange="formDialogRadioGroupChange"
650 display: flex; 57 @select-change="formDialogSelectChange" />
651 justify-content: space-between; 58 </template>
652 align-items: center;
653 line-height: 21px;
654 }
655 }
656 }
657 </style>
......
src/router/modules/dataInventory.ts
...@@ -73,6 +73,58 @@ const routes: RouteRecordRaw[] = [ ...@@ -73,6 +73,58 @@ const routes: RouteRecordRaw[] = [
73 } 73 }
74 } 74 }
75 }, 75 },
76 {
77 path: 'newCreate-template',
78 name: 'newCreateTemplate',
79 component: () => import('@/views/data_inventory/newCreateTemplate.vue'),
80 meta: {
81 title: '新增-',
82 sidebar: false,
83 breadcrumb: false,
84 cache: true,
85 reuse: true,
86 editPage: true,
87 activeMenu: '/data-inventory/classify-grade-manage/template-config'
88 },
89 beforeEnter: (to, from) => {
90 if (to.query.classStandardName) {
91 to.meta.title = `新增-${to.query.classStandardName}`;
92 }
93 }
94 },
95 {
96 path: 'newCreate-class',
97 name: 'newCreateClass',
98 component: () => import('@/views/data_inventory/newCreateClass.vue'),
99 meta: {
100 title: '新增分类',
101 sidebar: false,
102 breadcrumb: false,
103 cache: true,
104 reuse: true,
105 editPage: true,
106 activeMenu: '/data-inventory/classify-grade-manage/template-config'
107 },
108 },
109 {
110 path: 'classifyGrad-edit',
111 name: 'classifyGradEdit',
112 component: () => import('@/views/data_inventory/classifyGradEdit.vue'),
113 meta: {
114 title: '编辑-',
115 sidebar: false,
116 breadcrumb: false,
117 cache: true,
118 reuse: true,
119 editPage: true,
120 activeMenu: '/data-inventory/classify-grade-manage/template-config'
121 },
122 beforeEnter: (to, from) => {
123 if (to.query.classClassifyGradName) {
124 to.meta.title = `编辑-${to.query.classClassifyGradName}`;
125 }
126 }
127 },
76 ], 128 ],
77 } 129 }
78 ] 130 ]
......
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',
...@@ -401,6 +405,10 @@ onMounted(() => { ...@@ -401,6 +405,10 @@ onMounted(() => {
401 name: '装备制造' 405 name: '装备制造'
402 }] 406 }]
403 }); 407 });
408 graph.value.on('node:mouseenter', (e) => {
409 const nodeItem = e.item // 获取鼠标进入的节点元素对象
410 console.log('鼠标移入', nodeItem._cfg)
411 })
404 graph.value.render(); 412 graph.value.render();
405 graph.value.fitView(); 413 graph.value.fitView();
406 graph.value.on('node:click', (evt: any) => { 414 graph.value.on('node:click', (evt: any) => {
...@@ -409,7 +417,7 @@ onMounted(() => { ...@@ -409,7 +417,7 @@ onMounted(() => {
409 const { item, target } = evt; 417 const { item, target } = evt;
410 const currentAnchor = target.get('name'); 418 const currentAnchor = target.get('name');
411 if (!currentAnchor) return; 419 if (!currentAnchor) return;
412 // 设置一个全局属性，指定点击的是哪个图形元素 420 // 设置一个全局属性，指定点击的是哪个图形元素
413 }); 421 });
414 }) 422 })
415 423
...@@ -421,11 +429,12 @@ onMounted(() => { ...@@ -421,11 +429,12 @@ onMounted(() => {
421 <ContentWrap id="id-baseInfo" title="基础信息" description="" style="margin-top: 8px;"> 429 <ContentWrap id="id-baseInfo" title="基础信息" description="" style="margin-top: 8px;">
422 <Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" /> 430 <Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" />
423 </ContentWrap> 431 </ContentWrap>
424 <ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description="" style="margin-top:16px; height: calc(100% - 161px)"> 432 <ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description=""
433 style="margin-top:16px; height: calc(100% - 161px)">
425 <div class="tools_btns"> 434 <div class="tools_btns">
426 <el-button v-show="dataShowMethod == 'table'" type="primary" @click="newCreateClass">添加分类</el-button> 435 <el-button v-show="dataShowMethod == 'table'" type="primary" @click="newCreateClass">添加分类</el-button>
427 <el-button v-show="dataShowMethod == 'table'" @click="importClass">导入分类</el-button> 436 <el-button v-show="dataShowMethod == 'table'" @click="importClass">导入分类</el-button>
428 <el-button class="show-change-btn" @click="changeShowMethod">{{ '图形展示' }}</el-button> 437 <el-button class="show-change-btn" @click="changeShowMethod">{{ '图形展示' }}</el-button>
429 </div> 438 </div>
430 <Table v-show="dataShowMethod == 'table'" :tableInfo="tableInfo" /> 439 <Table v-show="dataShowMethod == 'table'" :tableInfo="tableInfo" />
431 <div ref="shapeMain" class="shape-main" v-show="dataShowMethod != 'table'"></div> 440 <div ref="shapeMain" class="shape-main" v-show="dataShowMethod != 'table'"></div>
...@@ -440,7 +449,6 @@ onMounted(() => { ...@@ -440,7 +449,6 @@ onMounted(() => {
440 </template> 449 </template>
441 450
442 <style lang="scss" scoped> 451 <style lang="scss" scoped>
443
444 .container_wrap { 452 .container_wrap {
445 padding: 0px; 453 padding: 0px;
446 } 454 }
...@@ -487,4 +495,4 @@ onMounted(() => { ...@@ -487,4 +495,4 @@ onMounted(() => {
487 .table_panel { 495 .table_panel {
488 height: calc(100% - 58px) !important; 496 height: calc(100% - 58px) !important;
489 } 497 }
490 </style>
...\ No newline at end of file ...\ No newline at end of file
498 </style>
......
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 0 → 100644
1 <route lang="yaml">
2 name: newCreateTemplate //新增分级分类模板
3 </route>
4
5 <script lang="ts" setup name="newCreateTemplate">
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 newCreateTemplateFormItems = ref([{
26 label: '模板名称',
27 type: 'input',
28 maxlength: 50,
29 placeholder: '请输入',
30 field: 'templeteName',
31 default: '',
32 clearable: true,
33 required: true
34 }, {
35 label: '行业分类',
36 type: 'select',
37 placeholder: '请选择',
38 field: ' industryCategory',
39 default: '',
40 options: [], //TODO
41 required: true,
42 filterable: true,
43 clearable: true,
44 visible: true,
45 }, {
46 label: '分级标准',
47 type: 'select',
48 placeholder: '请选择',
49 field: ' gradingStandard',
50 default: '',
51 options: [], //TODO
52 required: true,
53 filterable: true,
54 clearable: true,
55 visible: true,
56 }]);
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
71 const tableInfo = ref({
72 id: "data-class-standard-table",
73 multiple: true,
74 fields: [
75 { label: "序号", type: "index", width: 56, align: "center" },
76 { label: "数据库名称", field: "databaseNameZh", width: 160, },
77 { label: "数据库名", field: "databaseName", width: 120, },
78 { label: "总表数", field: "tableCount", width: 120, align: "right", },
79 { label: "存储量（约/MB）", field: "storageCapacities", align: "right", width: 220, },
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
135 ],
136 showPage: false,
137 loading: false,
138 });
139
140 const onTableSelectChange = (selection: any[]) => {
141 console.log(selection);
142 };
143
144 const cancel = () => {
145 // 返回上一页路由
146 router.back();
147 };
148
149 const save = async () => {
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
164 };
165 </script>
166
167 <template>
168 <div class="container_wrap" v-loading="fullscreenLoading">
169 <div class="content_main">
170 <ContentWrap id="id-baseInfo" title="模板信息" description="" style="margin-top: 8px;" :expandSwicth=isExpand>
171 <Form ref="formRef" :itemList="newCreateTemplateFormItems" formId="main-model-edit" col="col3"
172 :rules=formRules />
173 </ContentWrap>
174 <ContentWrap id="id-classStandard" class="detail-content" title="选择元数据" description="" style="margin-top:16px;"
175 :expandSwicth=isExpand>
176 <div class="table-content_wrap">
177 <Table ref="tableRef" :tableInfo="tableInfo" @tableSelectionChange="onTableSelectChange" />
178 </div>
179 </ContentWrap>
180 </div>
181 <div class="bottom_tool_wrap">
182 <el-button @click="cancel">取消</el-button>
183 <el-button type="primary" @click="save">后台运行</el-button>
184 </div>
185 </div>
186 </template>
187
188 <style lang="scss" scoped>
189 .container_wrap {
190 padding: 0px;
191 }
192
193 .content_main {
194 height: calc(100% - 44px);
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
209 }
210 </style>
src/views/data_inventory/templateConfig.vue
...@@ -9,11 +9,53 @@ import TableTools from '@/components/Tools/table_tools.vue'; ...@@ -9,11 +9,53 @@ 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 './templateItem.vue';
13 import { getTempleteClassifyData, saveClassifyGrad, getClassifyGradList, deleteClassifyGrad, updateClassifyGrad, getGradeTreeList } from "@/api/modules/dataInventory";
14
15
12 16
13 const router = useRouter(); 17 const router = useRouter();
14 const { required } = useValidator(); 18 const { required } = useValidator();
15 const { proxy } = getCurrentInstance() as any; 19 const { proxy } = getCurrentInstance() as any;
16 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 (classStandardFormItems.value[1].options as any) = gradeTreeData.value;
43 } else {
44 proxy.$ElMessage.error(res.msg);
45 }
46 }
47
48 //记录分级guid
49 const classifyGradGuid = ref('');
50 // 分级列表
51 const gradeTreeData = ref('');
52
53 onMounted(() => {
54 getClassifyGradListData();
55 getGradeTreeListData();
56 })
57
58
17 const tabsInfo = ref({ 59 const tabsInfo = ref({
18 activeName: 'classStandard', 60 activeName: 'classStandard',
19 tabs: [ 61 tabs: [
...@@ -105,18 +147,15 @@ const searchClass = (val: any, clear: boolean = false) => { ...@@ -105,18 +147,15 @@ const searchClass = (val: any, clear: boolean = false) => {
105 classPage.value.curr = 1; 147 classPage.value.curr = 1;
106 if (clear) { 148 if (clear) {
107 classSearchItemList.value.map(item => item.default = '') 149 classSearchItemList.value.map(item => item.default = '')
108 // classPage.value.planName = ''; 150 // classPage.value.planName = '';
109 getClassListData(); 151 getClassListData();
110 return; 152 return;
111 } 153 }
112 // classPage.value.planName = ''; 154 // classPage.value.planName = '';
113 getClassListData(); 155 getClassListData();
114 }; 156 };
115 157
116 const newCreateClass = () => { 158
117 newCreateClassStandardDialogInfo.value.visible = true;
118 classStandardFormItems.value.forEach(item => item.default = '');
119 }
120 159
121 const getClassListData = () => { 160 const getClassListData = () => {
122 // classListDataLoading.value = true; 161 // classListDataLoading.value = true;
...@@ -139,15 +178,15 @@ const getClassListData = () => { ...@@ -139,15 +178,15 @@ const getClassListData = () => {
139 } 178 }
140 179
141 /** 编辑分类 */ 180 /** 编辑分类 */
142 const handleClassDataEdit = (item) => { 181 const handleClassDataEdit = (item, des = '') => {
143 182
144 } 183 }
145 184
146 const handleClassDataClick = (item) => { 185 const handleClassDataClick = (item, des = '') => {
147 router.push({ 186 router.push({
148 name: 'classStandardEdit', 187 name: 'classStandardEdit',
149 query: { 188 query: {
150 guid: item.guid, 189 type: des === '' ? '配置' : des,
151 classStandardName: '工业分类' 190 classStandardName: '工业分类'
152 } 191 }
153 }); 192 });
...@@ -156,6 +195,7 @@ const handleClassDataClick = (item) => { ...@@ -156,6 +195,7 @@ const handleClassDataClick = (item) => {
156 const handleClassDataDel = (item) => { 195 const handleClassDataDel = (item) => {
157 196
158 } 197 }
198 /** ------------------------------- 分类标准相关 ------------------------------------- */
159 199
160 const classStandardFormItems = ref([{ 200 const classStandardFormItems = ref([{
161 label: '分类名称', 201 label: '分类名称',
...@@ -169,16 +209,25 @@ const classStandardFormItems = ref([{ ...@@ -169,16 +209,25 @@ const classStandardFormItems = ref([{
169 required: true 209 required: true
170 }, { 210 }, {
171 label: '分级标准', 211 label: '分级标准',
172 type: 'select', 212 type: 'tree-select',
173 placeholder: '请选择', 213 placeholder: '请选择',
174 field: 'gradeStandard', 214 field: 'gradeStandard',
175 default: 1, 215 options: [],
176 options: [], //TODO 216 nodeKey: 'guid',
177 required: true, 217 checkStrictly: false,//只能选择叶子节点。
218 lazy: false,
219 multiple: false,
220 collapseTagsTooltip: true,
221 collapseTags: true,
222 props: {
223 label: "name",
224 value: "guid",
225 children: "gradeRSVOList"
226 },
178 filterable: true, 227 filterable: true,
179 clearable: true, 228 clearable: true,
180 visible: true, 229 default: '',
181 block: true, 230 required: true
182 }]); 231 }]);
183 232
184 const classStandardFormRules = ref({ 233 const classStandardFormRules = ref({
...@@ -217,16 +266,203 @@ const newCreateClassStandardDialogInfo = ref({ ...@@ -217,16 +266,203 @@ const newCreateClassStandardDialogInfo = ref({
217 } 266 }
218 }) 267 })
219 268
220 const newCreateTemplate = () => { 269 const newCreateClass = () => {
270 newCreateClassStandardDialogInfo.value.visible = true;
271 classStandardFormItems.value.forEach(item => item.default = '');
272 }
273
274 /** ------------------------------- 分级标准相关 ------------------------------------- */
275
276 const newCreateGradeFormItems = ref([{
277 label: '分级名称',
278 type: 'input',
279 maxlength: 50,
280 placeholder: '请输入',
281 field: 'name',
282 default: '',
283 block: true,
284 clearable: true,
285 required: true
286 }]);
287
288 const newCreateGradeFormRules = ref({
289 name: [required('请填写分级名称')],
290 });
291
292 const newCreateGradeStandardDialogInfo = ref({
293 visible: false,
294 size: 460,
295 title: "新增分级",
296 type: "",
297 formInfo: {
298 id: "grade-form",
299 items: newCreateGradeFormItems.value,
300 rules: newCreateGradeFormRules.value,
301 },
302 submitBtnLoading: false,
303 btns: {
304 cancel: () => {
305 newCreateGradeStandardDialogInfo.value.visible = false;
306 },
307 submit: async (btn, info) => {
308 newCreateGradeStandardDialogInfo.value.submitBtnLoading = true;
309 console.log(info, newCreateGradeStandardDialogInfo.value.title);
310 if (newCreateGradeStandardDialogInfo.value.title === '新增分级') {
311 const params = {
312 name: info.name,
313 type: 'G'
314 }
315 const res: any = await saveClassifyGrad(params);
316 if (res.code == proxy.$passCode) {
317 await getClassifyGradListData();
318 proxy.$ElMessage({
319 type: 'success',
320 message: '新增分类成功'
321 })
322
323 // 拿到新增的分级数据，跳转到配置页面
324 const item = classifyGradListData.value.find(item => item.name === info.name);
325
326 if (item) {
327 const params = {
328 name: item.name,
329 guid: item.guid,
330 }
331 handleClassifyGradDataClick(params);
332 }
333 newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
334 newCreateGradeStandardDialogInfo.value.visible = false;
335 } else {
336 proxy.$ElMessage.error(res.msg);
337 }
338 } else {
339 const params = {
340 name: info.name,
341 guid: classifyGradGuid.value,
342 type: 'G'
343 }
344 const res: any = await updateClassifyGrad(params);
345 if (res.code == proxy.$passCode) {
346 getClassifyGradListData();
347 proxy.$ElMessage({
348 type: 'success',
349 message: '修改分类成功'
350 })
351 newCreateGradeStandardDialogInfo.value.visible = false;
352 } else {
353 proxy.$ElMessage.error(res.msg);
354 }
355 }
356
357 }
358 }
359 })
360
361 // 删除分级
362 const handleClassifyGradDataDel = async (item) => {
363 try {
364 // 弹出确认框
365 await proxy.$confirm('此操作将永久删除该分级, 是否继续?', '提示', {
366 confirmButtonText: '确定',
367 cancelButtonText: '取消',
368 type: 'warning'
369 });
370 const res: any = await deleteClassifyGrad({ guid: item.guid });
371 if (res.code === proxy.$passCode) {
372 await getClassifyGradListData(); // 获取更新后的列表数据
373 proxy.$ElMessage({
374 type: 'success',
375 message: '删除成功!'
376 });
377 } else {
378 proxy.$ElMessage.error(res.msg); // 显示错误信息
379 }
380 } catch (error) {
381 if (error !== 'cancel') {
382 proxy.$ElMessage({
383 type: 'info',
384 message: '已取消删除'
385 });
386 }
387 }
388 };
221 389
390 // 编辑分级
391 const handleClassifyGradDataEdit = (itemGradeName) => {
392 classifyGradGuid.value = itemGradeName.guid;
393 newCreateGradeStandardDialogInfo.value.visible = true;
394 newCreateGradeStandardDialogInfo.value.title = '编辑分级';
395 newCreateGradeFormItems.value.forEach(item => {
396 item.default = itemGradeName.name
397 })
398 }
399
400 // 配置分级
401 const handleClassifyGradDataClick = (item) => {
402 console.log(item);
403 router.push({
404 name: 'classifyGradEdit',
405 query: {
406 guid: item.guid,
407 classClassifyGradName: item.name
408 }
409 });
222 } 410 }
223 411
224 const newCreateGrade = () => { 412 const newCreateGrade = () => {
413 newCreateGradeStandardDialogInfo.value.visible = true;
414 newCreateGradeFormItems.value.forEach(item => item.default = '');
415 }
416
417
418
419
420
421
422 /** ------------------------------- 分类分级模板 ------------------------------------- */
225 423
424 const pageInfo = ref({
425 limit: 50,
426 curr: 1,
427 sizes: [
428 { label: "10", value: 10 },
429 { label: "50", value: 50 },
430 { label: "100", value: 100 },
431 { label: "150", value: 150 },
432 { label: "200", value: 200 },
433 ],
434 type: "normal",
435 rows: 0,
436 })
437
438 const newCreateTemplate = () => {
439 router.push({
440 name: 'newCreateTemplate',
441 query: {
442 classStandardName: '分类分级模板'
443 }
444 });
445 }
446
447
448 const pageChange = (info) => {
449 pageInfo.value.curr = Number(info.curr);
450 pageInfo.value.limit = Number(info.limit);
451 getClassificationTemplateList();
452 }
453
454 const getClassificationTemplateList = async () => {
455 const params = {
456 pageSize: pageInfo.value.limit,
457 pageIndex: pageInfo.value.curr,
458 }
459 const res = await getTempleteClassifyData(params);
460 console.log(res);
226 } 461 }
227 462
228 onBeforeMount(() => { 463 onBeforeMount(() => {
229 getClassListData(); 464 getClassListData();
465 getClassificationTemplateList();
230 }) 466 })
231 467
232 </script> 468 </script>
...@@ -241,6 +477,12 @@ onBeforeMount(() => { ...@@ -241,6 +477,12 @@ onBeforeMount(() => {
241 <el-button type="primary" @click="newCreateTemplate">新增模板</el-button> 477 <el-button type="primary" @click="newCreateTemplate">新增模板</el-button>
242 </div> 478 </div>
243 </div> 479 </div>
480 <div class="content">
481 <TemplateItem />
482 </div>
483 <div class="botton-page-nav">
484 <PageNav :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
485 </div>
244 </div> 486 </div>
245 <div class="panel" v-show="tabsInfo.activeName == 'classStandard'"> 487 <div class="panel" v-show="tabsInfo.activeName == 'classStandard'">
246 <div class="table_tool_wrap"> 488 <div class="table_tool_wrap">
...@@ -282,9 +524,44 @@ onBeforeMount(() => { ...@@ -282,9 +524,44 @@ onBeforeMount(() => {
282 </div> 524 </div>
283 </div> 525 </div>
284 <div class="panel" v-show="tabsInfo.activeName == 'gradeStandard'"> 526 <div class="panel" v-show="tabsInfo.activeName == 'gradeStandard'">
285 <el-button type="primary" @click="newCreateGrade">新增分级</el-button> 527 <div class="tools_btns">
528 <el-button type="primary" @click="newCreateGrade">新增分级</el-button>
529 </div>
530 <div class="data-content" v-loading="classListDataLoading">
531 <div class="card-content" v-for="item in classifyGradListData" :key="item.guid"
532 @click="handleClassifyGradDataClick(item)">
533 <div class="type-btn">
534 <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
535 popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
536 <template #reference>
537 <el-icon color="#666" @click.stop="cardBtnVisible = true">
538 <MoreFilled />
539 </el-icon>
540 </template>
541 <div class="levitation-ul">
542 <span class="levitation-li" @click="handleClassifyGradDataClick(item)">配置</span>
543 <span class="levitation-li" @click="handleClassifyGradDataEdit(item)">编辑</span>
544 <span class="levitation-li" @click="handleClassifyGradDataDel(item)">删除</span>
545 </div>
546 </el-popover>
547 </div>
548 <el-icon class="title-icon">
549 <svg-icon name="folder" />
550 </el-icon>
551 <div class="title">{{ item.name }}</div>
552 <!-- <div class="desc-row">
553 <div class="desc">{{ '分级标准' }}</div>
554 <div class="desc">{{ item.updateTime }}</div>
555 </div> -->
556 </div>
557 <div v-if="!classListData.length" class="card-noData">
558 <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
559 <span>暂无分类标准</span>
560 </div>
561 </div>
286 </div> 562 </div>
287 <Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" /> 563 <Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" />
564 <Dialog_form :dialogConfigInfo="newCreateGradeStandardDialogInfo" />
288 </div> 565 </div>
289 </template> 566 </template>
290 567
...@@ -295,7 +572,25 @@ onBeforeMount(() => { ...@@ -295,7 +572,25 @@ onBeforeMount(() => {
295 572
296 .panel { 573 .panel {
297 height: calc(100% - 51px); 574 height: calc(100% - 51px);
575 display: flex;
576 flex-direction: column;
577
578 .content {
579 flex: 1;
580 height: 100%;
581 overflow-y: auto;
582 }
583
584 .botton-page-nav {
585 position: sticky;
586 bottom: 0;
587 width: 100%;
588 background-color: #fff;
589 z-index: 10;
590 }
298 } 591 }
592
593
299 } 594 }
300 595
301 :deep(.table-tools) { 596 :deep(.table-tools) {
...@@ -384,4 +679,4 @@ onBeforeMount(() => { ...@@ -384,4 +679,4 @@ onBeforeMount(() => {
384 } 679 }
385 } 680 }
386 } 681 }
387 </style>
...\ No newline at end of file ...\ No newline at end of file
682 </style>
......
src/views/data_inventory/templateItem.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>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!