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 1631 additions and 671 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.1:28052/
# 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
# 系统管理 接口地址
......@@ -23,6 +24,9 @@ VITE_APP_PLAN_BASEURL = ms-daop-jgjf-data-plan-service
#数据质量接口地址
VITE_APP_QUALITY_BASEURL = ms-daop-data-quality-service
#数据盘点接口地址
VITE_APP_CHECK_BASEURL = ms-daop-zcgl-data-inventory
#门户接口
VITE_API_PORTALURL = https://swzl-test.zgsjzc.com/portal
......
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']
......
pnpm-lock.yaml
This diff could not be displayed because it is too large.
src/api/modules/dataInventory.ts 0 → 100644
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`,
url: `${import.meta.env.VITE_APP_API_BASEURL}/obs/view-pic`,
method: 'get',
responseType: 'blob'
});
......
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;
}
}
}
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 },
],
},
}
})
.el-radio__input.is-checked+.el-radio__label {
color: var(--el-color-primary);
}
}
}
}
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
......@@ -73,6 +73,58 @@ const routes: RouteRecordRaw[] = [
}
}
},
{
path: 'newCreate-template',
name: 'newCreateTemplate',
component: () => import('@/views/data_inventory/newCreateTemplate.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.classStandardName) {
to.meta.title = `新增-${to.query.classStandardName}`;
}
}
},
{
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
......@@ -3,7 +3,7 @@
</route>
<script lang="ts" setup name="classStandardEdit">
import { ref, onMounted} from "vue";
import { ref, onMounted } from "vue";
import useUserStore from "@/store/modules/user";
import { useValidator } from '@/hooks/useValidator';
import { TableColumnWidth } from '@/utils/enum';
......@@ -69,15 +69,18 @@ const tableInfo = ref({
type: "btn",
width: 120,
btns: [
{ label: "编辑", value: "edit", click: (scope) => {
{
label: "编辑", value: "edit", click: (scope) => {
currTableInfo.value = scope.row;
drawerInfo.value.visible = true;
drawerInfo.value.header.title = '编辑分类';
classEditFormItems.value.forEach(item => {
item.default = scope.row[item.field]
})
} },
{ label: "删除", value: "delete", click: (scope) => {
}
},
{
label: "删除", value: "delete", click: (scope) => {
proxy.$openMessageBox("此操作将永久删除该分类, 是否继续", () => {
// deleteBizTerm([scope.row.guid]).then((res: any) => {
// if (res.code == proxy.$passCode) {
......@@ -88,7 +91,8 @@ const tableInfo = ref({
// }
// });
})
} },
}
},
],
},
loading: false,
......@@ -146,8 +150,8 @@ const classEditFormItems = ref([{
type: 'switch',
field: 'state',
default: 'Y',
activeText:"有效",
inactiveText:"停用",
activeText: "有效",
inactiveText: "停用",
activeValue: 'Y',
inactiveValue: 'N'
}, {
......@@ -283,7 +287,7 @@ G6.registerNode('tree-node', {
group.addShape('circle', {
attrs: {
x: 95,
y: bbox.minX + bbox.height / 2-5,
y: bbox.minX + bbox.height / 2 - 5,
r: 5,
stroke: '#4FA1A4',
fill: '#fff',
......@@ -401,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) => {
......@@ -421,7 +429,8 @@ onMounted(() => {
<ContentWrap id="id-baseInfo" title="基础信息" description="" style="margin-top: 8px;">
<Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" />
</ContentWrap>
<ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description="" style="margin-top:16px; height: calc(100% - 161px)">
<ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description=""
style="margin-top:16px; height: calc(100% - 161px)">
<div class="tools_btns">
<el-button v-show="dataShowMethod == 'table'" type="primary" @click="newCreateClass">添加分类</el-button>
<el-button v-show="dataShowMethod == 'table'" @click="importClass">导入分类</el-button>
......@@ -440,7 +449,6 @@ onMounted(() => {
</template>
<style lang="scss" scoped>
.container_wrap {
padding: 0px;
}
......
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 0 → 100644
<route lang="yaml">
name: newCreateTemplate //新增分级分类模板
</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 newCreateTemplateFormItems = ref([{
label: '模板名称',
type: 'input',
maxlength: 50,
placeholder: '请输入',
field: 'templeteName',
default: '',
clearable: true,
required: true
}, {
label: '行业分类',
type: 'select',
placeholder: '请选择',
field: ' industryCategory',
default: '',
options: [], //TODO
required: true,
filterable: true,
clearable: true,
visible: true,
}, {
label: '分级标准',
type: 'select',
placeholder: '请选择',
field: ' gradingStandard',
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",
multiple: true,
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: "存储量（约/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,
},
],
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="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">
<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/templateConfig.vue
......@@ -9,11 +9,53 @@ import TableTools from '@/components/Tools/table_tools.vue';
import { MoreFilled } from "@element-plus/icons-vue";
import { commonPageConfig } from '@/components/PageNav/index';
import { useValidator } from '@/hooks/useValidator';
import TemplateItem from './templateItem.vue';
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 || [];
(classStandardFormItems.value[1].options as any) = gradeTreeData.value;
} else {
proxy.$ElMessage.error(res.msg);
}
}
//记录分级guid
const classifyGradGuid = ref('');
// 分级列表
const gradeTreeData = ref('');
onMounted(() => {
getClassifyGradListData();
getGradeTreeListData();
})
const tabsInfo = ref({
activeName: 'classStandard',
tabs: [
......@@ -113,10 +155,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;
......@@ -139,15 +178,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: '工业分类'
}
});
......@@ -156,6 +195,7 @@ const handleClassDataClick = (item) => {
const handleClassDataDel = (item) => {
}
/** ------------------------------- 分类标准相关 ------------------------------------- */
const classStandardFormItems = ref([{
label: '分类名称',
......@@ -169,16 +209,25 @@ const classStandardFormItems = ref([{
required: true
}, {
label: '分级标准',
type: 'select',
type: 'tree-select',
placeholder: '请选择',
field: 'gradeStandard',
default: 1,
options: [], //TODO
required: true,
options: [],
nodeKey: 'guid',
checkStrictly: false,//只能选择叶子节点。
lazy: false,
multiple: false,
collapseTagsTooltip: true,
collapseTags: true,
props: {
label: "name",
value: "guid",
children: "gradeRSVOList"
},
filterable: true,
clearable: true,
visible: true,
block: true,
default: '',
required: true
}]);
const classStandardFormRules = ref({
......@@ -217,16 +266,203 @@ 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: 'classifyGradEdit',
query: {
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,
sizes: [
{ label: "10", value: 10 },
{ label: "50", value: 50 },
{ label: "100", value: 100 },
{ label: "150", value: 150 },
{ label: "200", value: 200 },
],
type: "normal",
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);
getClassificationTemplateList();
}
const getClassificationTemplateList = async () => {
const params = {
pageSize: pageInfo.value.limit,
pageIndex: pageInfo.value.curr,
}
const res = await getTempleteClassifyData(params);
console.log(res);
}
onBeforeMount(() => {
getClassListData();
getClassificationTemplateList();
})
</script>
......@@ -241,6 +477,12 @@ onBeforeMount(() => {
<el-button type="primary" @click="newCreateTemplate">新增模板</el-button>
</div>
</div>
<div class="content">
<TemplateItem />
</div>
<div class="botton-page-nav">
<PageNav :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
</div>
</div>
<div class="panel" v-show="tabsInfo.activeName == 'classStandard'">
<div class="table_tool_wrap">
......@@ -282,9 +524,44 @@ onBeforeMount(() => {
</div>
</div>
<div class="panel" v-show="tabsInfo.activeName == 'gradeStandard'">
<div class="tools_btns">
<el-button type="primary" @click="newCreateGrade">新增分级</el-button>
</div>
<div class="data-content" v-loading="classListDataLoading">
<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">
<template #reference>
<el-icon color="#666" @click.stop="cardBtnVisible = true">
<MoreFilled />
</el-icon>
</template>
<div class="levitation-ul">
<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>
<el-icon class="title-icon">
<svg-icon name="folder" />
</el-icon>
<div class="title">{{ item.name }}</div>
<!-- <div class="desc-row">
<div class="desc">{{ '分级标准' }}</div>
<div class="desc">{{ item.updateTime }}</div>
</div> -->
</div>
<div v-if="!classListData.length" class="card-noData">
<img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
<span>暂无分类标准</span>
</div>
</div>
</div>
<Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" />
<Dialog_form :dialogConfigInfo="newCreateGradeStandardDialogInfo" />
</div>
</template>
......@@ -295,7 +572,25 @@ onBeforeMount(() => {
.panel {
height: calc(100% - 51px);
display: flex;
flex-direction: column;
.content {
flex: 1;
height: 100%;
overflow-y: auto;
}
.botton-page-nav {
position: sticky;
bottom: 0;
width: 100%;
background-color: #fff;
z-index: 10;
}
}
}
:deep(.table-tools) {
......
src/views/data_inventory/templateItem.vue 0 → 100644
<template>
<div class="template-container">
<div v-for="(item, index) in items" :key="index" :class="['template-item', item.content.status]"
:style="getItemStyle(item.content.status)">
<div class="template-item-content">
<div class="item-top-area">
<div class="top-mian-description">
<div class="item-title">{{ item.content.templateName }}</div>
<div class="item-status">已发布</div>
</div>
<div class="top-sub-description">
<span>医疗行业分类</span>
<span>五级</span>
<span>v5</span>
</div>
</div>
<div class="item-middle-area">{{ item.content.templateDesc }}</div>
<div class="item-bottom-area">
<div class="bottom-info">
<span>模板确认人: {{ item.content.modelConfirmUserName }}</span>
<span>模板确认时间: {{ item.content.modelConfirmTime }}</span>
</div>
<div class="botton-btn">
<el-button type="primary" class="off-line-btn">下线</el-button>
<el-button type="primary" class="templete-btn">模板训练</el-button>
<el-button type="primary" class="delete-btn">删除</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
interface Item {
content: ItemContent;
}
interface ItemContent {
guid: string,
tenantGuid: string,
templateName: string,
templateDesc: string,
version: 0,
classifyGuid: string,
gradeGuid: string,
modelConfirmTime: string,
modelConfirmUserName: string,
metaGuids: string,
status: string
}
const items: Item[] = [
{
content: {
guid: '1',
tenantGuid: '1',
templateName: '医疗行业分类分级模板',
templateDesc: '使用于医疗行业的分类分级模板',
version: 0,
classifyGuid: '1',
gradeGuid: '1',
modelConfirmTime: '2021-09-01',
modelConfirmUserName: '张三',
metaGuids: '1',
status: 'published',
}
},
{
content: {
guid: '2',
tenantGuid: '2',
templateName: '模板2',
templateDesc: '模板2描述',
version: 0,
classifyGuid: '2',
gradeGuid: '2',
modelConfirmTime: '2021-09-02',
modelConfirmUserName: '李四',
metaGuids: '2',
status: 'running',
}
},
{
content: {
guid: '3',
tenantGuid: '3',
templateName: '模板3',
templateDesc: '模板3描述使用于医疗行业的分类分级模板使用于医疗行业的分类分级模板使用于医疗行业的分类分级模板使用于医疗行业的分类分级模板',
version: 0,
classifyGuid: '3',
gradeGuid: '3',
modelConfirmTime: '2021-09-03',
modelConfirmUserName: '王五',
metaGuids: '3',
status: 'pending',
}
},
{
content: {
guid: '4',
tenantGuid: '4',
templateName: '模板4',
templateDesc: '模板4描述',
version: 0,
classifyGuid: '4',
gradeGuid: '4',
modelConfirmTime: '2021-09-04',
modelConfirmUserName: '赵六',
metaGuids: '4',
status: 'published',
}
},
{
content: {
guid: '5',
tenantGuid: '5',
templateName: '模板5',
templateDesc: '模板5描述',
version: 0,
classifyGuid: '5',
gradeGuid: '5',
modelConfirmTime: '2021-09-05',
modelConfirmUserName: '钱七',
metaGuids: '5',
status: 'running',
}
},
];
const getItemStyle = (status: string) => {
let borderColor = '#1BA854'; // 默认绿色
switch (status) {
case 'published':
borderColor = '#1BA854';
break;
case 'running':
borderColor = '#FF991C';
break;
case 'pending':
borderColor = '#B2B2B2 ';
break;
}
return {
borderTop: `4px solid ${borderColor}`,
};
};
</script>
<style scoped lang="scss">
.template-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.template-item {
width: 400px;
}
.template-item-content {
width: 100%;
height: 222px;
background: #FFFFFF;
border: 1px solid rgba(217, 217, 217, 1);
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
.item-top-area {
.top-mian-description {
display: flex;
justify-content: space-between;
align-items: center;
.item-title {
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #212121;
line-height: 24px;
font-weight: 600;
}
.item-status {
border-radius: 2px;
font-size: 12px;
text-align: center;
line-height: 18px;
font-weight: 400;
padding: 1px 8px;
}
}
.top-sub-description {
margin-top: 9px;
display: flex;
/* 左对齐 */
justify-content: flex-start;
span {
background: #F5F5F5;
border: 1px solid rgba(217, 217, 217, 1);
border-radius: 2px;
display: inline-block;
padding: 1px 8px;
margin-right: 8px;
font-size: 12px;
color: #404040;
text-align: center;
line-height: 18px;
font-weight: 400;
}
}
}
.item-middle-area {
margin-top: 16px;
font-size: 14px;
color: #999999;
letter-spacing: 0;
line-height: 21px;
font-weight: 400;
height: 44px;
overflow: hidden;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
text-overflow: ellipsis;
}
.item-bottom-area {
margin-top: 8px;
.bottom-info {
display: flex;
justify-content: space-between;
align-items: center;
span {
display: inline-block;
font-size: 14px;
color: #666666;
letter-spacing: 0;
line-height: 21px;
font-weight: 400;
}
}
.botton-btn {
margin-top: 13px;
.off-line-btn {
background-color: #fff;
font-size: 14px;
color: #4FA1A4;
}
.templete-btn,
.delete-btn {
background: #FFFFFF;
border: 1px solid rgba(217, 217, 217, 1);
font-size: 14px;
color: #212121;
}
}
}
}
.template-item.published .template-item-content .item-status {
color: #1BA854;
background: #F2FFF5;
border: 1px solid rgba(109, 209, 142, 1);
}
.template-item.running .template-item-content .item-status {
color: #FF991C;
background: #FFFBF2;
border: 1px solid rgba(255, 203, 120, 1);
}
.template-item.pending .template-item-content .item-status {
border: 1px solid rgba(217, 217, 217, 1);
color: #404040;
background: #F5F5F5;
}
</style>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!