Skip to content

csbr-daop / fe-data-trusted-space

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

update:分级标准tab完成

1 parent 73b16ac8
Inline Side-by-side
Showing 11 changed files with 1114 additions and 696 deletions
.env.development
......@@ -3,7 +3,8 @@ VITE_APP_TITLE = 数据资产管理系统
# 接口域名
# VITE_API_BASEURL = https://www.zgsjzc.com/api
# VITE_API_BASEURL = https://swzl-test.csbr.cn/api
VITE_API_BASEURL = http://10.4.82.30:8052/
# VITE_API_BASEURL = http://10.4.82.30:8052/
VITE_API_BASEURL = http://10.4.82.1:28052/
# 平台用户 接口请地址
VITE_APP_USER_API_BASEURL = gateway-server/user
# 系统管理 接口地址
......
components.d.ts
......@@ -54,6 +54,7 @@ declare module '@vue/runtime-core' {
Table_tools: typeof import('./src/components/Tools/table_tools.vue')['default']
Table_v2: typeof import('./src/components/Table/table_v2.vue')['default']
Tabs: typeof import('./src/components/Tabs/index.vue')['default']
TemplateItem: typeof import('./src/components/TemplateItem/index.vue')['default']
Toolbar: typeof import('./src/components/LineageGraph/toolbar.vue')['default']
Topbar: typeof import('./src/components/LineageGraph/topbar.vue')['default']
Transfer: typeof import('./src/components/Transfer/index.vue')['default']
......
src/api/modules/dataInventory.ts
import request from "@/utils/request";
/**
* 获取数据级别
* @param {Object}
* { paramCode: "DATA-CLASSIFY" }
* DATA-CLASSIFY 数据类别
* DATA-GRADE 数据级别
*/
export const getLargeCategoryList = (data) => request({
url:`${import.meta.env.VITE_APP_API_BASEURL}/data-dict/get-data-list`,
method: 'post',
data
})
/** 分类分级模板数据 */
export const getTempleteClassifyData = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/cg-template/page-list`,
method: 'post',
data
})
/** 新增分级
*
* @param {Object}
* @path /classify-grade/save
*/
export const saveClassifyGrad = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/save`,
method: 'post',
data
})
/** 删除分级
* @param {Object}
* @path /classify-grade/delete
* */
export const deleteClassifyGrad = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/delete`,
method: 'delete',
headers: {
'Content-Type': 'multipart/form-data',
},
data
})
/** 修改分级
* @param {Object}
* @path /classify-grade/update
* */
export const updateClassifyGrad = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/update`,
method: 'post',
data
})
/**
* 分级列表
* @param {Object}
* @path /classify-grade/page-list
*/
export const getClassifyGradList = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/page-list`,
method: 'post',
data
})
/**
* 分级新增
* @param {Object}
* @path /grade/save
*/
export const saveGrade = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/save`,
method: 'post',
data
})
/**
* 分级更新
* @param {Object}
* @path /grade/update
* */
export const updateGrade = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/update`,
method: 'post',
data
})
/**
* 分级列表
* @param {Object}
* @path /grade/page-list
*/
export const getGradeList = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/page-list`,
method: 'post',
data
})
/**
* 批量删除分级
* @param {Array}
* @path /grade/delete
* */
export const deleteGrade = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/delete`,
method: 'delete',
data
})
/*---------------------------------分类标准 tab -----------------------------*/
/**
* 分级树形结构
* @param no params
* @path /grade/tree-list
*/
export const getGradeTreeList = () => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/tree-list`,
method: 'post',
})
......
src/api/modules/queryService.ts
......@@ -46,8 +46,13 @@ export const getImageUrl = (params) => request({
})
/** 查看图片 */
// export const getImageContent = (params) => request({
// url: `${import.meta.env.VITE_APP_API_BASEURL}/obs/view-pic?filePath=${params}`,
// method: 'get',
// responseType: 'blob'
// });
export const getImageContent = (params) => request({
url: `${import.meta.env.VITE_APP_API_BASEURL}/obs/view-pic?filePath=${params}`,
url: `${import.meta.env.VITE_APP_API_BASEURL}/obs/view-pic`,
method: 'get',
responseType: 'blob'
});
......@@ -186,7 +191,7 @@ export const exportCollectTask = (params) => request({
method: 'post',
data: params,
responseType: 'blob'
})
})
// 导出数据字典模板
export const exportDictionary = (params) => request({
......@@ -194,4 +199,4 @@ export const exportDictionary = (params) => request({
method: 'post',
data: params,
responseType: 'blob'
})
\ No newline at end of file
})
......
src/components/Dialog/dialog_form.vue
<script lang="ts" setup name="DialogForm">
import { computed, reactive } from "vue";
import type { FormInstance, FormRules, CascaderProps } from "element-plus";
import {
Plus,
CirclePlus,
Check,
Download,
Upload,
Search,
} from "@element-plus/icons-vue";
import Table from "../Table/index.vue";
const emits = defineEmits(["radioGroupChange", "selectChange"]);
/**
* 封装内容显示为form的对话框，外部只需传入form相关的配置，以及对话框尺寸标题等即可。
*/
<script lang="ts" setup name="Dialog_form">
import { ref } from 'vue';
const emits = defineEmits(["formDialogBtnClick", "formDialogSelectChange", "formDialogRadioGroupChange"]);
/** { visible: false, size: number, title: string, submitBtnLoading: false, formInfo: { id: xx, items: xx, rules:xx }, btns: { 'cancel': xx, } } */
const props = defineProps({
itemList: {
type: Array<any>,
default: [],
},
formId: {
type: String,
default: "",
},
rules: {
dialogConfigInfo: {
type: Object,
default: {},
},
col: {
type: String,
default: "",
},
});
const setFormFields = (list) => {
let obj = {};
list.map((item) => {
if (item.field) {
obj[item.field] = item.default ?? "";
}
if (item.children) {
obj = { ...obj, ...setFormFields(item.children) };
}
});
return obj;
};
const ruleFormRef = ref<FormInstance>();
const formInline: any = computed(() => {
return reactive(setFormFields(props.itemList));
});
const formRules = computed(() => {
return reactive<FormRules>(props.rules);
});
const formItemList: any = computed(() => {
return props.itemList ?? [];
});
const selectAll = ref(false);
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
formEl.clearValidate();
};
defineExpose({
ruleFormRef,
formInline,
selectAll,
resetForm,
});
const selectChange = (val, row) => {
emits("selectChange", val, row);
};
const radioGroupChange = (val) => {
emits("radioGroupChange", val);
};
const selectAllChange = (val, row, formModel) => {
const list = formItemList.value;
list.map((item) => (item.default = formModel[item.field]));
if (val) {
row.default = row.children.map((item) => item.label);
} else {
row.default = [];
}
};
const checkboxGroupChange = (val, row) => {
selectAll.value = val.length == row.children.length;
};
const inputBlur = (evt, row) => {
if (row.field == "contactTel") {
formInline.value.adminAccount = formInline.value.contactTel;
}
};
</script>
<template>
<el-form ref="ruleFormRef" class="dialog-form-inline" :class="['col' + props.col]" :inline="true" :model="formInline"
:rules="formRules">
<el-form-item v-for="(item, index) in formItemList" :key="'form_item_' + index" :prop="item.field"
:class="{ 'is-block': item.block }">
<span slot="label">
<span :class="{ required_mark: item.required }">{{ item.label }}</span>
</span>
<div class="upload_wrap" v-if="item.type == 'image-upload'">
<el-upload action="#" list-type="picture-card" :auto-upload="false">
<el-icon>
<Plus />
</el-icon>
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
</div>
</template>
</el-upload>
</div>
<div class="checkbox_panel" v-else-if="item.type == 'checkbox-panel'">
<el-checkbox v-model="formInline[item.field]" :disabled="item.disabled">{{ item.placeholder }}</el-checkbox>
<div class="panel_wrap">
<div class="item_panel" v-for="panel in item.children">
<label :class="{ required_mark: panel.required }">{{
panel.label
}}</label>
<el-input v-if="panel.type == 'file-upload'" v-model.trim="formInline[panel.field]"
:placeholder="panel.placeholder" :disabled="panel.disabled" class="input-with-upload">
<template #append>
<el-button class="upload_btn">
<el-icon>
<svg-icon name="upload-file" />
</el-icon>
</el-button>
</template>
</el-input>
<el-input v-else v-model.trim="formInline[panel.field]" :placeholder="panel.placeholder"
:disabled="panel.disabled" />
</div>
</div>
</div>
<div class="checkbox_input" v-else-if="item.type == 'checkbox-input'">
<el-checkbox v-model="formInline[item.field]" :disabled="item.disabled">{{ item.placeholder }}</el-checkbox>
<div class="input_panel" v-for="child in item.children">
<span>{{ child.prepend }}</span>
<el-input v-model.trim="formInline[child.field]" :disabled="child.disabled" :placeholder="child.placeholder" />
<span>{{ child.append }}</span>
</div>
</div>
<div class="checkbox_textarea" v-else-if="item.type == 'checkbox-textarea'">
<el-checkbox v-model="formInline[item.field]" :disabled="item.disabled">{{ item.placeholder }}</el-checkbox>
<div class="textarea_panel" v-for="child in item.children">
<el-input v-model.trim="formInline[child.field]" :rows="6" type="textarea" :placeholder="child.placeholder"
:disabled="child.disabled" resize="none" />
</div>
</div>
<div class="checkbox_select" v-else-if="item.type == 'checkbox-select'" :class="{ is_block: item.block }">
<el-checkbox v-model="formInline[item.field]" :disabled="item.disabled">{{ item.placeholder }}</el-checkbox>
<div v-for="child in item.children">
<el-select v-model="formInline[child.field]" :placeholder="child.placeholder">
<el-option v-for="opts in child.options" :label="opts.label" :value="opts.value" />
</el-select>
</div>
</div>
<div class="checkbox_group_panel" v-else-if="item.type == 'checkbox-group'" :class="{ is_block: item.block }">
<div class="panel_tool">
<span class="tips_txt">应用产品的菜单变化，产品组合会同步变化</span>
<el-checkbox v-model="selectAll" @change="(val) => selectAllChange(val, item, formInline)">全选</el-checkbox>
</div>
<el-checkbox-group v-model="formInline[item.field]" @change="(val) => checkboxGroupChange(val, item)">
<el-checkbox v-for="child in item.children" :label="child.label" />
</el-checkbox-group>
</div>
<div class="select_group" v-else-if="item.type == 'select-group'">
<el-form-item v-for="(child, c) in item.children" :key="'child_item_' + c" :prop="child.field"
:class="{ 'is-block': child.block }">
<span slot="label">
<span :class="{ required_mark: child.required }">{{
child.label
}}</span>
</span>
<el-cascader v-if="child.type == 'cascader'" v-model="formInline[child.field]" :props="child.props" clearable />
<el-select v-else-if="child.type == 'select'" v-model="formInline[child.field]" :placeholder="child.placeholder"
:clearable="child.clearable">
<el-option v-for="opts in child.options" :label="opts.label" :value="opts.value" />
</el-select>
<el-input v-else v-model.trim="formInline[child.field]" :placeholder="child.placeholder" :clearable="child.clearable"
:disabled="child.disabled" />
</el-form-item>
</div>
<div class="select_panel" v-else-if="item.type == 'select-panel'">
<template v-for="child in item.children">
<el-select v-if="child.type == 'select'" v-model="formInline[child.field]" :class="{ is_block: child.block }"
:placeholder="child.placeholder">
<el-option v-for="opts in child.options" :label="opts.label" :value="opts.value" />
</el-select>
<el-input v-else-if="child.type == 'textarea'" v-model.trim="formInline[child.field]" :rows="12" type="textarea"
:placeholder="child.placeholder" :disabled="child.disabled" resize="none"
:class="{ is_block: child.block }" />
<el-input v-else v-model.trim="formInline[child.field]" :placeholder="child.placeholder" :clearable="child.clearable"
:disabled="child.disabled" />
</template>
</div>
<!-- <div class="table_upload_panel" v-else-if="item.type == 'table-upload'">
<div class="panel_title">添加表数据</div>
<div class="upload_tool">
<div>
<el-button :icon="Upload">上传报表</el-button>
<el-button :icon="Download">下载报表</el-button>
</div>
<div>
<el-button plain type="primary">树形显示</el-button>
<el-button plain type="primary">新增行</el-button>
<el-button plain>刷新</el-button>
<el-button plain>删除</el-button>
</div>
</div>
<el-upload
ref="uploadRef"
class="upload-demo"
drag
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
:auto-upload="false"
>
<el-icon class="el-icon--upload">
<Plus />
</el-icon>
<div class="el-upload__text">点击或拖拽上传</div>
</el-upload>
</div>
<div class="table_panel" v-else-if="item.type == 'table-panel'">
<Table :tableInfo="item.tableInfo" />
<el-button
v-for="tool in item.tableTool"
link
type="primary"
:icon="CirclePlus"
>{{ tool.label }}</el-button
>
</div>
<div class="table_panel" v-else-if="item.type == 'tool-table-panel'">
<div class="table_tools start">
<el-button v-for="tool in item.tableTool" :type="tool.type">{{
tool.label
}}</el-button>
</div>
<Table :tableInfo="item.tableInfo" />
</div>
<div class="table_panel" v-else-if="item.type == 'edit-table-panel'">
<div class="table_tools">
<span>定义表结构</span>
<div class="tool_bars">
<el-button v-for="tool in item.tableTool" :type="tool.type" plain>{{
tool.label
}}</el-button>
</div>
</div>
<Table :tableInfo="item.tableInfo" />
</div> -->
<div class="radio_panel" v-else-if="item.type == 'radio-panel'">
<el-radio-group v-model="formInline[item.field]" @change="radioGroupChange">
<el-radio v-for="opt in item.options" :label="opt.value" border>
<template #default>
<span>{{ opt.label }}</span>
<el-icon class="corner_mark" :class="{ active: formInline[item.field] == opt.value }">
<Check />
</el-icon>
</template>
</el-radio>
</el-radio-group>
<div class="panel_content">
<el-form-item v-for="(child, c) in item.children" :key="'child_item_' + c" :prop="child.field"
:class="{ 'is-block': child.block }">
<span slot="label">
<span :class="{ required_mark: child.required }">{{
child.label
}}</span>
</span>
<el-select v-if="child.type == 'select'" v-model="formInline[child.field]" :placeholder="child.placeholder"
:clearable="child.clearable">
<el-option v-for="opts in child.options" :label="opts.label" :value="opts.value" />
</el-select>
<el-input v-else v-model.trim="formInline[child.field]" :placeholder="child.placeholder"
:clearable="child.clearable" />
</el-form-item>
</div>
</div>
<div class="switch" v-else-if="item.type == 'switch'">
<el-switch inline-prompt v-model="formInline[item.field]" :width="item.switchWidth"
:active-value="item.activeValue" :inactive-value="item.inactiveValue" :active-text="item.activeText"
:inactive-text="item.inactiveText" />
</div>
<div class="textarea_panel" v-else-if="item.type == 'textarea-panel'">
<div class="panel_header">
<span class="required_mark">{{ item.title }}</span>
<div class="tool_bars">
<span v-for="btn in item.btns" class="text_btn">
<span>{{ btn.label }}</span>
</span>
</div>
</div>
<el-input v-model.trim="formInline[item.field]" :rows="12" type="textarea" :placeholder="item.placeholder"
:disabled="item.disabled" resize="none" :class="{ is_block: item.block }" />
</div>
<el-select v-else-if="item.type == 'select'" v-model="formInline[item.field]" :placeholder="item.placeholder"
:clearable="item.clearable" @change="(val) => selectChange(val, item)">
<el-option v-for="opt in item.options" :label="opt.label" :value="opt.value" />
</el-select>
<el-checkbox v-else-if="item.type == 'checkbox'" v-model="formInline[item.field]" :disabled="item.disabled">{{
item.placeholder }}</el-checkbox>
<el-radio-group v-else-if="item.type == 'radio-group'" v-model="formInline[item.field]">
<el-radio v-for="radio in item.options" :label="radio.value">{{
radio.label
}}</el-radio>
</el-radio-group>
<el-input v-else-if="item.type == 'textarea'" v-model.trim="formInline[item.field]" :rows="4" type="textarea"
:placeholder="item.placeholder" :disabled="item.disabled" resize="none" />
<el-input v-else-if="item.type == 'password'" v-model.trim="formInline[item.field]" type="password"
:placeholder="item.placeholder" :clearable="item.clearable" show-password />
<el-input v-else-if="item.type == 'input-select'" v-model.trim="formInline[item.field]" :placeholder="item.placeholder"
class="input-with-select" :clearable="item.clearable" :suffix-icon="Search">
<template #prepend>
<div v-for="child in item.children">
<el-select v-model="formInline[child.field]" :placeholder="child.placeholder" :clearable="child.clearable"
style="width: 96px">
<el-option v-for="opts in child.options" :label="opts.label" :value="opts.value" />
</el-select>
</div>
</template>
</el-input>
<el-cascader v-else-if="item.type == 'cascader'" v-model="formInline[item.field]" :options="item.options"
:props="item.props" :show-all-levels="item.showAllLevels ?? true" :clearable="item.clearable"
:disabled="item.disabled" />
<el-date-picker v-else-if="item.type == 'date-picker'" v-model="formInline[item.field]" type="daterange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :format="item.format ?? 'YYYY-MM-DD'"
:value-format="item.formatValue ?? 'YYYY-MM-DD'" :unlink-panels="item.unlink ?? false"
:shortcuts="item.shortcuts ?? []" :default-value="item.defaultDate ?? []" />
<el-input v-else v-model.trim="formInline[item.field]" :placeholder="item.placeholder" :clearable="item.clearable"
:disabled="item.disabled" @blur="(evt) => inputBlur(evt, item)" />
</el-form-item>
</el-form>
</template>
<style lang="scss" scoped>
.dialog-form-inline {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
text-align: left;
&.col3 {
justify-content: flex-start;
:deep(.el-form-item) {
width: calc(33.33% - 6.67px);
margin-right: 10px;
&:nth-child(3n) {
margin-right: 0;
}
&.is-block {
width: 100%;
margin-right: 0;
}
}
}
:deep(.el-form-item) {
width: calc(50% - 5px);
margin-right: 0;
flex-direction: column;
margin-bottom: 12px;
.el-form-item__content {
line-height: 21px;
// margin-bottom: 2px;
>div {
width: 100%;
}
}
.el-form-item__label {
justify-content: flex-start;
}
.el-select,
.el-radio-group {
width: 100%;
.el-radio {
margin-right: 8px;
}
}
&.is-block {
width: 100%;
.el-form-item__content {
width: 100%;
}
}
&.required_mark {
.el-form-item__label {
position: relative;
&::after {
content: "*";
color: #fb2323;
position: absolute;
margin-left: 2px;
}
}
}
.required_mark {
position: relative;
&::after {
content: "*";
color: #fb2323;
position: absolute;
margin-left: 2px;
}
}
.el-radio {
.el-radio__inner::after {
width: 10px;
height: 10px;
}
.el-radio__input.is-checked .el-radio__inner {
background-color: inherit;
&::after {
background-color: var(--el-color-primary);
}
}
}
.table_tools {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
>span {
font-size: 16px;
color: var(--el-color-regular);
font-weight: 600;
}
}
.upload_wrap {
width: 100%;
padding: 0 12px;
border: 1px solid #d9d9d9;
border-radius: 2px;
.el-upload-list {
.el-upload--picture-card {
width: 64px;
height: 64px;
margin: 12px 0;
}
}
.el-upload-list--picture-card .el-upload-list__item {
width: 64px;
height: 64px;
margin: 12px 12px 12px 0;
}
}
.checkbox_panel {
.panel_wrap {
width: 100%;
padding: 5px 12px 20px 12px;
border: 1px solid #d9d9d9;
border-radius: 2px;
.item_panel {
margin-bottom: 10px;
.el-input-group__append {
box-shadow: none;
}
.upload_btn {
padding: 0;
padding-left: 12px;
.el-icon {
width: 24px;
height: 24px;
color: var(--el-text-color-regular);
svg {
width: 24px;
height: 24px;
}
}
}
}
}
}
.checkbox_input {
display: flex;
.input_panel {
margin: 0 20px;
display: flex;
align-items: center;
>span {
margin: 0 4px;
white-space: nowrap;
}
}
}
.checkbox_group_panel {
padding: 12px 24px;
border: 1px solid #d9d9d9;
border-radius: 2px;
position: relative;
.panel_tool {
width: calc(100% - 80px);
height: 21px;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: -21px;
right: 0;
.tips_txt {
font-size: 12px;
color: #b2b2b2;
}
}
}
.select_panel {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
>div {
width: calc(33.33% - 5px);
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
&.is_block {
width: 100%;
}
}
}
}
.select_group {
display: flex;
justify-content: space-between;
}
.radio_panel {
.panel_content {
padding: 5px 0;
background: #fafafa;
border: 1px solid #e5e5e5;
margin: 10px 0;
padding: 0 10px;
display: flex;
flex-wrap: wrap;
}
:deep(.el-radio) {
&.is-bordered {
padding: 0;
position: relative;
.el-radio__input {
position: absolute;
opacity: 0;
}
.el-radio__label {
padding: 0 15px;
font-size: 12px;
position: relative;
.corner_mark {
position: absolute;
right: 0;
bottom: 0;
width: 18px;
height: 18px;
color: #fff;
svg {
width: 9px;
height: 9px;
position: absolute;
right: 0;
bottom: 2px;
z-index: 1;
}
&.active {
&::after {
content: "";
position: absolute;
border: 9px solid var(--el-color-primary);
border-top-color: transparent;
border-left-color: transparent;
}
}
}
}
.el-radio__input.is-checked+.el-radio__label {
color: var(--el-color-primary);
}
}
}
}
const dialogInfo = computed(() => {
return {
visible: props.dialogConfigInfo.visible,
size: props.dialogConfigInfo.size,
direction: "column",
header: {
title: props.dialogConfigInfo.title,
},
contents: [
{
type: 'form',
title: '',
formInfo: props.dialogConfigInfo.formInfo
}
],
footer: {
btns: [
{ type: "default", label: "取消", value: "cancel" },
{ type: "primary", label: "确定", value: "submit", loading: props.dialogConfigInfo.submitBtnLoading ?? false },
],
},
}
})
const formDialogBtnClick = (btn, info) => {
props.dialogConfigInfo.btns[btn.value]?.(btn, info);
};
.table_panel {
.table_tools {
&.start {
justify-content: flex-start;
}
}
}
const formDialogRadioGroupChange = (val, row, item) => {
emits('formDialogRadioGroupChange', val, row, item);
}
.table_upload_panel {
.panel_title {
color: var(--el-color-regular);
font-size: 16px;
font-weight: 600;
}
const formDialogSelectChange = (val, item, row) => {
emits('formDialogSelectChange', val, row, item);
}
.upload_tool {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}
}
</script>
.textarea_panel {
.panel_header {
display: flex;
justify-content: space-between;
align-items: center;
line-height: 21px;
}
}
}
</style>
<template>
<Dialog :dialogInfo="dialogInfo" @btnClick="formDialogBtnClick" @radioGroupChange="formDialogRadioGroupChange"
@select-change="formDialogSelectChange" />
</template>
......
src/router/modules/dataInventory.ts
......@@ -71,6 +71,39 @@ const routes: RouteRecordRaw[] = [
}
}
},
{
path: 'newCreate-class',
name: 'newCreateClass',
component: () => import('@/views/data_inventory/newCreateClass.vue'),
meta: {
title: '新增分类',
sidebar: false,
breadcrumb: false,
cache: true,
reuse: true,
editPage: true,
activeMenu: '/data-inventory/classify-grade-manage/template-config'
},
},
{
path: 'classifyGrad-edit',
name: 'classifyGradEdit',
component: () => import('@/views/data_inventory/classifyGradEdit.vue'),
meta: {
title: '编辑-',
sidebar: false,
breadcrumb: false,
cache: true,
reuse: true,
editPage: true,
activeMenu: '/data-inventory/classify-grade-manage/template-config'
},
beforeEnter: (to, from) => {
if (to.query.classClassifyGradName) {
to.meta.title = `编辑-${to.query.classClassifyGradName}`;
}
}
},
],
}
]
......
src/views/data_inventory/classStandardEdit.vue
......@@ -405,6 +405,10 @@ onMounted(() => {
name: '装备制造'
}]
});
graph.value.on('node:mouseenter', (e) => {
const nodeItem = e.item // 获取鼠标进入的节点元素对象
console.log('鼠标移入', nodeItem._cfg)
})
graph.value.render();
graph.value.fitView();
graph.value.on('node:click', (evt: any) => {
......
src/views/data_inventory/classifyGradEdit.vue 0 → 100644
<route lang="yaml">
name: classifyGradEdit //新增分级分类模板
</route>
<script lang="ts" setup name="classifyGradEdit">
import router from "@/router";
import { ref } from "vue";
import { saveGrade, getGradeList, deleteGrade, getLargeCategoryList, updateGrade } from '@/api/modules/dataInventory';
onMounted(() => {
getGradeListData();
Promise.all([getDataGrade(), getDataClassify()]);
});
// 获取分级列表
const getGradeListData = async () => {
const params = {
pageIndex: 1,
pageSize: -1,
classifyGradeGuid: guid
}
const res: any = await getGradeList(params);
if (res.code == proxy.$passCode) {
tableInfo.value.data = res.data.records;
} else {
proxy.$ElMessage.error(res.msg);
}
}
// 获取数据类别
const getDataGrade = async () => {
const params = {
paramCode: "DATA-CLASSIFY"
}
const res: any = await getLargeCategoryList(params);
if (res.code == proxy.$passCode) {
// 提出value和label 作为select的options
const options = res.data.map((item: any) => ({
label: item.paramName,
value: item.paramValue
}));
newCreateGradeFormItems.value[1].options = options;
classDataRef.value = options;
} else {
proxy.$ElMessage.error(res.msg);
}
}
// 获取数据级别
const getDataClassify = async () => {
const params = {
paramCode: "DATA-GRADE"
}
const res: any = await getLargeCategoryList(params);
if (res.code == proxy.$passCode) {
// 提出value和label 作为select的options
const options = res.data.map((item: any) => ({
label: item.paramName,
value: item.paramValue
}));
newCreateGradeFormItems.value[0].options = options;
// 这里需要过滤已经在表格中数据级别
gradeDataRef.value = options;
} else {
proxy.$ElMessage.error(res.msg);
}
}
// 新增过滤数据级别
const filterDataGrade = () => {
const selectedDataGrade = new Set();
tableInfo.value.data.forEach((item: any) => {
if (item.dataGrade) {
selectedDataGrade.add(item.dataGrade);
}
});
const filteredOptions = gradeDataRef.value.filter(option => !selectedDataGrade.has(option.value));
(newCreateGradeFormItems.value[0].options as any[]) = filteredOptions;
};
// 编辑过滤数据级别，需包含当前数据级别，不排除自己
const filterDataGradeEdit = (dataGrade: string) => {
const selectedDataGrade = new Set();
tableInfo.value.data.forEach((item: any) => {
if (item.dataGrade) {
selectedDataGrade.add(item.dataGrade);
}
});
// 移除当前数据级别dataGrade
selectedDataGrade.delete(dataGrade);
console.log(selectedDataGrade,);
const filteredOptions = gradeDataRef.value.filter(option => !selectedDataGrade.has(option.value));
(newCreateGradeFormItems.value[0].options as any[]) = filteredOptions;
};
const tableRef = ref();
const classDataRef = ref();
const gradeDataRef = ref();
const fullscreenLoading = ref(false);
const editClassifyGradeGuid = ref('');
const { proxy } = getCurrentInstance() as any;
const guidArray = ref<any[]>([]);
// 获取query参数 中的guid
const guid = router.currentRoute.value.query.guid;
const tableInfo = ref({
id: "data-class-standard-table",
multiple: true,
fields: [
{ label: "序号", field: 'orderNum', width: 56, align: "center" },
{
label: "数据级别", field: "dataGrade", width: 120, getName: (scope) => {
let dataGrade = scope.row.dataGrade;
return dataGrade + '级';
}
},
{
label: "数据类别", field: "dataClassify", width: 120, getName: (scope) => {
let dataClassify = scope.row.dataClassify;
return classDataRef.value.find((item: any) => item.value === dataClassify)?.label;
}
},
{ label: "分级描述", field: "gradeDesc", align: "left", },
],
actionInfo: {
label: "操作",
type: "btn",
width: 120,
btns: [
{
label: "编辑", value: "edit", click: (scope) => {
console.log(scope);
filterDataGradeEdit(scope.row.dataGrade);
newCreateGradeStandardDialogInfo.value.visible = true;
newCreateGradeStandardDialogInfo.value.title = '编辑分类';
newCreateGradeFormItems.value.forEach(item => {
item.default = scope.row[item.field];
})
editClassifyGradeGuid.value = scope.row.guid;
}
},
{
label: "删除", value: "delete", click: (scope) => {
guidArray.value = []; // 重置数组
guidArray.value.push(scope.row.guid);
batchRemobe();
}
},
],
},
data: [],
showPage: false,
loading: false,
});
// 选择勾选的数据
const onTableSelectChange = async (selection: any[]) => {
guidArray.value = []; // 重置数组
selection.forEach((item: any) => {
guidArray.value.push(item.guid);
});
};
// 批量删除
const batchRemobe = async () => {
// 批量删除,增加confirm确认弹窗
if (guidArray.value.length == 0) {
proxy.$ElMessage({
type: 'warning',
message: '请选择要删除的数据'
})
return;
}
// confirm弹窗
proxy.$confirm('是否删除选中数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const res: any = await deleteGrade(guidArray.value);
if (res.code == proxy.$passCode) {
proxy.$ElMessage({
type: 'success',
message: '删除成功'
})
getGradeListData();
} else {
proxy.$ElMessage.error(res.msg);
}
}).catch(() => {
proxy.$ElMessage({
type: 'info',
message: '已取消删除'
});
});
};
/**弹窗配置 */
const newCreateGradeFormItems = ref([{
label: '数据级别',
type: 'select',
placeholder: '请选择',
field: 'dataGrade',
default: '',
options: gradeDataRef.value,
required: true,
filterable: true,
clearable: true,
visible: true,
},
{
label: '数据类别',
type: 'select',
placeholder: '请选择',
field: 'dataClassify',
default: '',
options: [],
required: true,
filterable: true,
clearable: true,
visible: true,
},
{
label: '序号',
type: 'input',
maxlength: 19,
placeholder: '请输入',
field: 'orderNum',
default: '',
clearable: true,
required: true,
regexp: /\D/g
},
{
label: '分级描述',
type: 'textarea',
maxlength: 50,
placeholder: '分类分级的描述说明',
field: 'gradeDesc',
default: '',
clearable: true,
required: false,
block: true,
}]);
const newCreateGradeFormRules = ref({
dataGrade: [
{ required: true, message: '请选择数据级别', trigger: 'change' }
],
orderNum: [
{ required: true, message: '请输入序号', trigger: 'blur' }
],
dataClassify: [
{ required: true, message: '请选择数据类别', trigger: 'change' }
]
});
const newCreateGradeStandardDialogInfo = ref({
visible: false,
size: 860,
title: "添加分类",
type: "",
formInfo: {
id: "grade-form",
items: newCreateGradeFormItems.value,
rules: newCreateGradeFormRules.value,
},
submitBtnLoading: false,
btns: {
cancel: () => {
newCreateGradeStandardDialogInfo.value.visible = false;
},
submit: async (btn, info) => {
console.log(info, guid);
newCreateGradeStandardDialogInfo.value.submitBtnLoading = true;
if (newCreateGradeStandardDialogInfo.value.title === '编辑分类') {
const params = {
...info,
guid: editClassifyGradeGuid.value,
classifyGradeGuid: guid
}
const res: any = await updateGrade(params);
if (res.code == proxy.$passCode) {
proxy.$ElMessage({
type: 'success',
message: '修改分类成功'
})
getGradeListData();
newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
newCreateGradeStandardDialogInfo.value.visible = false;
} else {
proxy.$ElMessage.error(res.msg);
}
return;
} else {
const params = {
...info,
classifyGradeGuid: guid
}
const res: any = await saveGrade(params);
if (res.code == proxy.$passCode) {
proxy.$ElMessage({
type: 'success',
message: '新增分类成功'
})
getGradeListData();
newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
newCreateGradeStandardDialogInfo.value.visible = false;
} else {
proxy.$ElMessage.error(res.msg);
}
}
}
}
})
const newStandard = () => {
filterDataGrade();
newCreateGradeStandardDialogInfo.value.visible = true;
newCreateGradeFormItems.value.forEach(item => item.default = '');
}
</script>
<template>
<div class="container_wrap" v-loading="fullscreenLoading">
<div class="content_main">
<div class="table-top-btns">
<el-button type="primary" @click="newStandard">新增标准</el-button>
<el-button @click="batchRemobe">批量删除</el-button>
</div>
<Table ref="tableRef" :tableInfo="tableInfo" @tableSelectionChange="onTableSelectChange" />
</div>
<Dialog_form :dialogConfigInfo="newCreateGradeStandardDialogInfo" />
</div>
</template>
<style lang="scss" scoped>
.container_wrap {
padding: 0px;
}
.content_main {
height: calc(100% - 44px);
padding: 17px 16px 10px 16px;
.table-top-btns {
display: flex;
margin-bottom: 12px;
}
}
</style>
src/views/data_inventory/newCreateClass.vue 0 → 100644
<route lang="yaml">
name: newCreateClass //新增分级分类模板
</route>
<script lang="ts" setup name="newCreateClass">
import router from "@/router";
import { getMetaDataBase } from '@/api/modules/dataMetaService';
import { ref } from "vue";
onMounted(async () => {
const params = {
pageIndex: 1,
pageSize: -1,
}
const res = await getMetaDataBase(params)
console.log(res);
});
// 表单引用
const formRef = ref();
const tableRef = ref();
const fullscreenLoading = ref(false);
const isExpand = ref(true);
const newCreateClassFormItems = ref([{
label: '分类名称',
type: 'input',
maxlength: 50,
placeholder: '请输入',
field: 'categoryName',
default: '',
clearable: true,
required: true
}, {
label: '引用分级标准',
type: 'select',
placeholder: '请选择',
field: 'ReferenceGradingStandard',
default: '',
options: [], //TODO
required: true,
filterable: true,
clearable: true,
visible: true,
}]);
const formRules = ref({
templeteName: [
{ required: true, message: '请输入模板名称', trigger: 'blur' },
{ max: 50, message: '长度在 50 个字符以内', trigger: 'blur' }
],
industryCategory: [
{ required: true, message: '请选择行业分类', trigger: 'change' }
],
gradingStandard: [
{ required: true, message: '请选择分级标准', trigger: 'change' }
]
});
const tableInfo = ref({
id: "data-class-standard-table",
fields: [
{ label: "序号", type: "index", width: 56, align: "center" },
{ label: "层级", field: "databaseNameZh", width: 160, },
{ label: "状态", field: "databaseName", width: 120, },
{ label: "定义说明", field: "tableCount", width: 120, align: "right", },
{ label: "最低安全级别", field: "storageCapacities", align: "right", width: 220, },
{ label: "创建时间", field: "columns", width: 140, align: "right", },
],
actionInfo: {
show: false,
},
data: [
{
index: 1,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 2,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 3,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 4,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 5,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 6,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
],
showPage: false,
loading: false,
});
const onTableSelectChange = (selection: any[]) => {
console.log(selection);
};
const cancel = () => {
// 返回上一页路由
router.back();
};
const save = async () => {
console.log('save');
// 校验表单
const res = formRef.value;
res.ruleFormRef.validate((valid: any) => {
if (valid) {
// 表单校验通过
console.log('表单校验通过');
} else {
console.log('表单校验不通过');
return false;
}
});
};
</script>
<template>
<div class="container_wrap" v-loading="fullscreenLoading">
<div class="content_main">
<ContentWrap id="id-baseInfo" title="基础信息" description="" style="margin-top: 8px;" :expandSwicth=isExpand>
<Form ref="formRef" :itemList="newCreateClassFormItems" formId="main-model-edit" col="col3" :rules=formRules />
</ContentWrap>
<ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description="" style="margin-top:16px;"
:expandSwicth=isExpand>
<div class="table-content_wrap">
<Table ref="tableRef" :tableInfo="tableInfo" />
</div>
</ContentWrap>
</div>
<div class="bottom_tool_wrap">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="save">后台运行</el-button>
</div>
</div>
</template>
<style lang="scss" scoped>
.container_wrap {
padding: 0px;
}
.content_main {
height: calc(100% - 44px);
padding: 10px 16px;
.table-content_wrap {
width: 100%;
height: 213px;
}
}
.bottom_tool_wrap {
display: flex;
justify-content: center;
border-top: 1px solid #D9D9D9;
padding-top: 8px;
}
</style>
src/views/data_inventory/newCreateTemplate.vue
......@@ -3,10 +3,26 @@
</route>
<script lang="ts" setup name="newCreateTemplate">
import router from "@/router";
import { getMetaDataBase } from '@/api/modules/dataMetaService';
import { ref } from "vue";
onMounted(async () => {
const params = {
pageIndex: 1,
pageSize: -1,
}
const res = await getMetaDataBase(params)
console.log(res);
});
// 表单引用
const formRef = ref();
const tableRef = ref();
const fullscreenLoading = ref(false);
const isExpand = ref(true);
const classStandardFormItems = ref([{
const newCreateTemplateFormItems = ref([{
label: '模板名称',
type: 'input',
maxlength: 50,
......@@ -38,34 +54,113 @@ const classStandardFormItems = ref([{
clearable: true,
visible: true,
}]);
const dataShowMethod = ref('shape');
const formRules = ref({
templeteName: [
{ required: true, message: '请输入模板名称', trigger: 'blur' },
{ max: 50, message: '长度在 50 个字符以内', trigger: 'blur' }
],
industryCategory: [
{ required: true, message: '请选择行业分类', trigger: 'change' }
],
gradingStandard: [
{ required: true, message: '请选择分级标准', trigger: 'change' }
]
});
const tableInfo = ref({
id: "data-class-standard-table",
multiple: false,
multiple: true,
fields: [
{ label: "序号", type: "index", width: 56, align: "center" },
{ label: "数据库名称", field: "className", width: 160, },
{ label: "数据库名", field: "levelName", width: 120 },
{ label: "总表数", field: "state", type: "tag", width: 120, align: "center" },
{ label: "存储量（约/MB）", field: "description", },
{ label: "总字段数", field: "minLevel", width: 140 },
{ label: "数据库名称", field: "databaseNameZh", width: 160, },
{ label: "数据库名", field: "databaseName", width: 120, },
{ label: "总表数", field: "tableCount", width: 120, align: "right", },
{ label: "存储量（约/MB）", field: "storageCapacities", align: "right", width: 220, },
{ label: "总字段数", field: "columns", width: 140, align: "right", },
],
actionInfo: {
show: false,
},
data: [
{
index: 1,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 2,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 3,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 4,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 5,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 6,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
],
data: [{
guid: '1',
children: [{
guid: '1-1'
}]
}],
showPage: false,
loading: false,
});
const onTableSelectChange = (selection: any[]) => {
console.log(selection);
};
const cancel = () => {
console.log('cancel');
// 返回上一页路由
router.back();
};
const save = () => {
const save = async () => {
console.log('save');
// 校验表单
const res = formRef.value;
res.ruleFormRef.validate((valid: any) => {
if (valid) {
// 表单校验通过
console.log('表单校验通过');
} else {
console.log('表单校验不通过');
return false;
}
});
};
</script>
......@@ -73,18 +168,20 @@ const save = () => {
<div class="container_wrap" v-loading="fullscreenLoading">
<div class="content_main">
<ContentWrap id="id-baseInfo" title="模板信息" description="" style="margin-top: 8px;" :expandSwicth=isExpand>
<Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" />
<Form ref="formRef" :itemList="newCreateTemplateFormItems" formId="main-model-edit" col="col3"
:rules=formRules />
</ContentWrap>
<ContentWrap id="id-classStandard" class="detail-content" title="选择元数据" description="" style="margin-top:16px;"
:expandSwicth=isExpand>
<div class="table-content_wrap">
<Table ref="tableRef" :tableInfo="tableInfo" @tableSelectionChange="onTableSelectChange" />
</div>
</ContentWrap>
</div>
<div class=" bottom_tool_wrap">
<div class="bottom_tool_wrap">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="save">保存</el-button>
<el-button type="primary" @click="save">后台运行</el-button>
</div>
</div>
</template>
......@@ -96,5 +193,18 @@ const save = () => {
.content_main {
height: calc(100% - 44px);
padding: 10px 16px;
.table-content_wrap {
width: 100%;
height: 213px;
}
}
.bottom_tool_wrap {
display: flex;
justify-content: center;
border-top: 1px solid #D9D9D9;
padding-top: 8px;
}
</style>
......
src/views/data_inventory/templateConfig.vue
......@@ -10,12 +10,51 @@ import { MoreFilled } from "@element-plus/icons-vue";
import { commonPageConfig } from '@/components/PageNav/index';
import { useValidator } from '@/hooks/useValidator';
import TemplateItem from '@/components/TemplateItem/index.vue'
import { getTempleteClassifyData } from "@/api/modules/dataInventory";
import { getTempleteClassifyData, saveClassifyGrad, getClassifyGradList, deleteClassifyGrad, updateClassifyGrad, getGradeTreeList } from "@/api/modules/dataInventory";
const router = useRouter();
const { required } = useValidator();
const { proxy } = getCurrentInstance() as any;
const refClassifyPageParams = ref({
pageIndex: 1,
pageSize: 10,
type: "G"
});
const classifyGradListData = ref();
const getClassifyGradListData = async () => {
const res: any = await getClassifyGradList(refClassifyPageParams.value);
if (res.code == proxy.$passCode) {
classifyGradListData.value = res.data.records || [];
} else {
proxy.$ElMessage.error(res.msg);
}
}
// 获取分级树形列表
const getGradeTreeListData = async () => {
const res: any = await getGradeTreeList();
if (res.code == proxy.$passCode) {
gradeTreeData.value = res.data || [];
} else {
proxy.$ElMessage.error(res.msg);
}
}
//记录分级guid
const classifyGradGuid = ref('');
// 分级列表
const gradeTreeData = ref('');
onMounted(() => {
getClassifyGradListData();
getGradeTreeListData();
})
const tabsInfo = ref({
activeName: 'classStandard',
tabs: [
......@@ -115,10 +154,7 @@ const searchClass = (val: any, clear: boolean = false) => {
getClassListData();
};
const newCreateClass = () => {
newCreateClassStandardDialogInfo.value.visible = true;
classStandardFormItems.value.forEach(item => item.default = '');
}
const getClassListData = () => {
// classListDataLoading.value = true;
......@@ -141,15 +177,15 @@ const getClassListData = () => {
}
/** 编辑分类 */
const handleClassDataEdit = (item) => {
const handleClassDataEdit = (item, des = '') => {
}
const handleClassDataClick = (item) => {
const handleClassDataClick = (item, des = '') => {
router.push({
name: 'classStandardEdit',
query: {
guid: item.guid,
type: des === '' ? '配置' : des,
classStandardName: '工业分类'
}
});
......@@ -158,6 +194,7 @@ const handleClassDataClick = (item) => {
const handleClassDataDel = (item) => {
}
/** ------------------------------- 分类标准相关 ------------------------------------- */
const classStandardFormItems = ref([{
label: '分类名称',
......@@ -171,7 +208,7 @@ const classStandardFormItems = ref([{
required: true
}, {
label: '分级标准',
type: 'select',
type: 'tree-select',
placeholder: '请选择',
field: 'gradeStandard',
default: 1,
......@@ -219,24 +256,161 @@ const newCreateClassStandardDialogInfo = ref({
}
})
const newCreateTemplate = () => {
const newCreateClass = () => {
newCreateClassStandardDialogInfo.value.visible = true;
classStandardFormItems.value.forEach(item => item.default = '');
}
/** ------------------------------- 分级标准相关 ------------------------------------- */
const newCreateGradeFormItems = ref([{
label: '分级名称',
type: 'input',
maxlength: 50,
placeholder: '请输入',
field: 'name',
default: '',
block: true,
clearable: true,
required: true
}]);
const newCreateGradeFormRules = ref({
name: [required('请填写分级名称')],
});
const newCreateGradeStandardDialogInfo = ref({
visible: false,
size: 460,
title: "新增分级",
type: "",
formInfo: {
id: "grade-form",
items: newCreateGradeFormItems.value,
rules: newCreateGradeFormRules.value,
},
submitBtnLoading: false,
btns: {
cancel: () => {
newCreateGradeStandardDialogInfo.value.visible = false;
},
submit: async (btn, info) => {
newCreateGradeStandardDialogInfo.value.submitBtnLoading = true;
console.log(info, newCreateGradeStandardDialogInfo.value.title);
if (newCreateGradeStandardDialogInfo.value.title === '新增分级') {
const params = {
name: info.name,
type: 'G'
}
const res: any = await saveClassifyGrad(params);
if (res.code == proxy.$passCode) {
await getClassifyGradListData();
proxy.$ElMessage({
type: 'success',
message: '新增分类成功'
})
// 拿到新增的分级数据，跳转到配置页面
const item = classifyGradListData.value.find(item => item.name === info.name);
if (item) {
const params = {
name: item.name,
guid: item.guid,
}
handleClassifyGradDataClick(params);
}
newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
newCreateGradeStandardDialogInfo.value.visible = false;
} else {
proxy.$ElMessage.error(res.msg);
}
} else {
const params = {
name: info.name,
guid: classifyGradGuid.value,
type: 'G'
}
const res: any = await updateClassifyGrad(params);
if (res.code == proxy.$passCode) {
getClassifyGradListData();
proxy.$ElMessage({
type: 'success',
message: '修改分类成功'
})
newCreateGradeStandardDialogInfo.value.visible = false;
} else {
proxy.$ElMessage.error(res.msg);
}
}
}
}
})
// 删除分级
const handleClassifyGradDataDel = async (item) => {
try {
// 弹出确认框
await proxy.$confirm('此操作将永久删除该分级, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
const res: any = await deleteClassifyGrad({ guid: item.guid });
if (res.code === proxy.$passCode) {
await getClassifyGradListData(); // 获取更新后的列表数据
proxy.$ElMessage({
type: 'success',
message: '删除成功!'
});
} else {
proxy.$ElMessage.error(res.msg); // 显示错误信息
}
} catch (error) {
if (error !== 'cancel') {
proxy.$ElMessage({
type: 'info',
message: '已取消删除'
});
}
}
};
// 编辑分级
const handleClassifyGradDataEdit = (itemGradeName) => {
classifyGradGuid.value = itemGradeName.guid;
newCreateGradeStandardDialogInfo.value.visible = true;
newCreateGradeStandardDialogInfo.value.title = '编辑分级';
newCreateGradeFormItems.value.forEach(item => {
item.default = itemGradeName.name
})
}
// 配置分级
const handleClassifyGradDataClick = (item) => {
console.log(item);
router.push({
name: 'newCreateTemplate',
name: 'classifyGradEdit',
query: {
classStandardName: '分类分级模板'
guid: item.guid,
classClassifyGradName: item.name
}
});
}
const newCreateGrade = () => {
newCreateGradeStandardDialogInfo.value.visible = true;
newCreateGradeFormItems.value.forEach(item => item.default = '');
}
/**
* 分类分级模板
*
*/
/** ------------------------------- 分类分级模板 ------------------------------------- */
const pageInfo = ref({
limit: 50,
curr: 1,
......@@ -251,6 +425,16 @@ const pageInfo = ref({
rows: 0,
})
const newCreateTemplate = () => {
router.push({
name: 'newCreateTemplate',
query: {
classStandardName: '分类分级模板'
}
});
}
const pageChange = (info) => {
pageInfo.value.curr = Number(info.curr);
pageInfo.value.limit = Number(info.limit);
......@@ -334,7 +518,8 @@ onBeforeMount(() => {
<el-button type="primary" @click="newCreateGrade">新增分级</el-button>
</div>
<div class="data-content" v-loading="classListDataLoading">
<div class="card-content" v-for="item in classListData" :key="item.guid" @click="handleClassDataClick(item)">
<div class="card-content" v-for="item in classifyGradListData" :key="item.guid"
@click="handleClassifyGradDataClick(item)">
<div class="type-btn">
<el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
......@@ -344,9 +529,9 @@ onBeforeMount(() => {
</el-icon>
</template>
<div class="levitation-ul">
<span class="levitation-li" @click="handleClassDataClick(item)">配置</span>
<span class="levitation-li" @click="handleClassDataEdit(item)">编辑</span>
<span class="levitation-li" @click="handleClassDataDel(item)">删除</span>
<span class="levitation-li" @click="handleClassifyGradDataClick(item)">配置</span>
<span class="levitation-li" @click="handleClassifyGradDataEdit(item)">编辑</span>
<span class="levitation-li" @click="handleClassifyGradDataDel(item)">删除</span>
</div>
</el-popover>
</div>
......@@ -354,10 +539,10 @@ onBeforeMount(() => {
<svg-icon name="folder" />
</el-icon>
<div class="title">{{ item.name }}</div>
<div class="desc-row">
<!-- <div class="desc-row">
<div class="desc">{{ '分级标准' }}</div>
<div class="desc">{{ item.updateTime }}</div>
</div>
</div> -->
</div>
<div v-if="!classListData.length" class="card-noData">
<img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
......@@ -366,6 +551,7 @@ onBeforeMount(() => {
</div>
</div>
<Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" />
<Dialog_form :dialogConfigInfo="newCreateGradeStandardDialogInfo" />
</div>
</template>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!