Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
a624755f by fanguang Committed by lihua
Options

字典列表树

1 parent 61ae134a
Inline Side-by-side
Showing 4 changed files with 2020 additions and 197 deletions
.env.development
......@@ -4,6 +4,7 @@ VITE_APP_TITLE = 数据资产管理系统
# VITE_API_BASEURL = https://www.zgsjzc.com/api
# VITE_API_BASEURL = https://swzl-test.csbr.cn/api
VITE_API_BASEURL = http://192.168.6.20:28052/
# VITE_API_BASEURL = http://192.168.6.20:8052/
VITE_IDASS_BASEURL = https://daop-test.zgsjzc.com/portalLogin
......@@ -82,6 +83,9 @@ VITE_APP_ATTACHMENT_TEMPLATE = ms-daop-personel-service
#人员服务
VITE_APP_PERSONAL_URL = 'ms-daop-personel-service'
#元数据标准
VITE_APP_STANDARD_URL = 'ms-daop-meta-standard-service'
#流通平台地址
VITE_APP_CIRCULATION = https://daop-lt-test.zgsjzc.com/
# 测试环境访问地址
......
src/api/modules/dataMetaService.ts
......@@ -249,3 +249,27 @@ export const delMetaDataSource = (databaseGuid) => request({
url: `${import.meta.env.VITE_APP_PLAN_BASEURL}/meta-collect-task/del-by-database-guid?databaseGuid=${databaseGuid}`,
method: 'delete',
})
/** 元数据-标准代码分页查询 */
export const getStandardCodeList = (params) => request({
url: `${import.meta.env.VITE_APP_STANDARD_URL}/standard-code/page-list`,
method: 'post',
data: params
})
/** 元数据-标准代码新增 */
export const saveStandardCode = (params) => request({
url: `${import.meta.env.VITE_APP_STANDARD_URL}/standard-code/save`,
method: 'post',
data: params
})
/** 元数据-标准代码修改 */
export const updateStandardCode = (params) => request({
url: `${import.meta.env.VITE_APP_STANDARD_URL}/standard-code/update`,
method: 'put',
data: params
})
/** 元数据-标准代码详情 */
export const getStandardCodeDetail = (guid) => request({
url: `${import.meta.env.VITE_APP_STANDARD_URL}/standard-code/detail?guid=${guid}`,
method: 'get',
})
\ No newline at end of file
......
src/views/data_meta/standard-codetable.vue
<route lang="yaml">
name: metadataStandardCodetable
</route>
<script lang="ts" setup name="metadataStandardCodetable">
import { ref } from 'vue';
import { ElMessage } from "element-plus";
import Tree from '@/components/Tree/index.vue';
import TableTools from '@/components/Tools/table_tools.vue';
name: dictionary
</route>
<script lang="ts" setup name="dictionary">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from '@element-plus/icons-vue'
import { useRouter, useRoute } from "vue-router";
import { TableColumnWidth } from '@/utils/enum';
import { commonPageConfig } from '@/components/PageNav/index';
import Tree from '@/components/Tree/index.vue'
import Table from '@/components/Table/index.vue'
import Drawer from '@/components/Drawer/index.vue'
// import DictFileds from './dictFileds.vue'
import useCatchStore from "@/store/modules/catch";
import { download } from '@/utils/common'
import { getParamsList } from '@/api/modules/dataAsset'
import { getStandardCodeList, saveStandardCode, updateStandardCode, getStandardCodeDetail } from '@/api/modules/dataMetaService'
import {
addDictionary,
deleteDictionary,
getDictionary,
updateDictionary,
getDictionaryTree,
getDictionaryDetail,
exportDictionary,
showDictionary,
getDataBaseList,
getCoderuleList,
saveDictionaryData,
getDictionaryFileds,
updateDictionaryState,
getDictionaryRuleData,
exportDictionaryFileds,
checkDeleteDictionary,
checkDeleteDictionaryScheme,
checkDictionaryData,
getNewDataTypeList
} from '@/api/modules/dataInventory';
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const treeInfo:any = ref({
const cacheStore = useCatchStore()
// 禁用字段
const forbidFields = [
'guid',
'sharding_flag',
'create_user_id',
'create_user_name',
'update_user_id',
'update_user_name',
'create_time',
'update_time',
'is_deleted'
]
const showFiledsPage = ref(false)
const dictFiledsRef = ref()
const dataTypeList = ref([])
const dataBaseList = ref([])
const codeRuleList = ref([])
const dictTreeRef = ref()
const dictType = ref(-1)
const dictGuid = ref('')
const expandedKey: any = ref([])
const currentNodeKey = ref('')
const showLoading = ref(true)
const treeData = ref([])
const treeInfo = ref({
id: "data-pickup-tree",
filter: true,
queryValue: "",
queryPlaceholder: "请输入关键字搜索",
props: {
label: "name",
value: "guid",
label: "label",
value: "value",
},
nodeKey: 'guid',
expandedKey: [],
currentNodeKey: '',
expandOnNodeClick: false,
nodeKey: 'value',
expandedKey: ['01'],
currentNodeKey: '01',
data: [],
expandOnNodeClick: false,
loading: false
});
function nodeClick (data) {
}
const standardOptions = ref([])
const publishingUnitCodeOptions = ref([])
/** 分页及搜索传参信息配置。 */
const tableSearchInput = ref('')
function getFirstPageData () {
page.value.curr = 1
toSearch({})
}
function toSearch (val: any, clear: boolean = false) {
let params: any = Object.keys(val).length ? { ...val } : {}
params.pageIndex = page.value.curr;
params.pageSize = page.value.limit;
params.name = tableSearchInput.value
getTableData(params);
}
const currTableData: any = ref<Object>({});
const page = ref({
...commonPageConfig,
collectTaskName: '',
dataSourceGuid: '',
taskState: null
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 },
],
});
const tableInfo = ref({
const selectRowData = ref([])
const tableInfo: any = ref({
id: 'data-source-table',
multiple: true,
fixedSelection: true,
fields: [
{ label: '序号', type: 'index', width: TableColumnWidth.INDEX, align: 'center' },
{ label: '代码名称', field: '1', width: 140 },
{ label: '标准号', field: '2', width: 140 },
{ label: '标准名称', field: '3', width: 140 },
{ label: '启用状态', field: '4', width: 140 },
{ label: '创建时间', field: '5', width: 140 }
{ label: "序号", type: "index", width: 56, align: "center" },
{ label: '代码名称', field: 'codeName', width: 140 },
{ label: '标准号', field: 'standard', width: 140 },
{ label: '标准名称', field: 'standardName', width: 140 },
{ label: '启用状态', field: 'bizState', type: 'switch', activeText: '启用', inactiveText: '停用', activeValue: 1, inactiveValue: 0, switchWidth: 56, width: 100, align: 'center' },
{ label: '创建时间', field: 'createTime', width: 140 }
],
data: [],
page: {
type: 'normal',
type: "normal",
rows: 0,
...page.value
...page.value,
},
actionInfo: {
label: '操作',
type: 'btn',
width: 160,
btns: scope => {
let row = scope.row
return [
{ label: '编辑', value: 'edit' },
{ label: '删除', value: 'delete' },
]
}
label: "操作",
type: "btn",
width: 92, //不要刚好90.缩小浏览器会因为小数点的差距而换行，
fixed: 'right',
btns: [
{ label: "编辑", value: "edit" },
{ label: "删除", value: "delete" },
],
},
loading: false
})
function tableBtnClick (scope, btn) {
}
function tablePageChange (info) {
page.value.curr = Number(info.curr);
page.value.limit = Number(info.limit);
// getTableData();
}
function getTableData (params) {
}
function handleCreate () {
drawerInfo.value.visible = true;
drawerInfo.value.type = 'add';
drawerInfo.value.header.title = '新增标准代码';
drawerInfo.value.footer.visible = true;
}
// drawer form
const formRef = ref()
const formItems: any = ref([
const dictionaryType = ref(1)
const orginOptions = [
{ label: 'code', value: 'code' },
{ label: 'name', value: 'name' },
]
const orginItems = [
{
label: '标准类型',
type: 'select',
placeholder: '请选择',
field: '1',
default: '1',
field: 'standardTypeCode',
default: '',
options: standardOptions,
clearable: true,
required: true
}
, {
label: '字典英文名',
type: 'input',
maxlength: 20,
placeholder: '请输入',
field: 'enName',
clearable: true,
required: true,
disabled: false
}, {
label: '排序',
type: 'input',
placeholder: '请输入',
field: 'orderNum',
maxlength: 6,
clearable: true,
required: true,
visible: true,
}, {
label: '字典类型',
type: 'radio-panel',
placeholder: '',
field: 'dictionaryType',
default: 1,
options: [
{ label: '列表结构', value: 1 },
{ label: '层级结构', value: 2 }
],
children: [
{
label: '编码字段',
type: 'select',
placeholder: '请输入',
field: 'codeColumn',
default: '',
options: [],
clearable: true,
required: true
}, {
label: '编码名称',
type: 'select',
placeholder: '请输入',
field: 'codeName',
default: '',
options: [],
clearable: true,
required: true
}, {
label: '顶级节点值',
type: 'input',
placeholder: '请输入',
field: 'topNodeValue',
clearable: true,
required: true,
visible: false
}, {
label: '路径',
type: 'input',
placeholder: '请输入',
field: 'path',
clearable: true,
required: true,
block: true,
visible: false
}
],
clearable: true,
required: false,
block: true,
visible: true,
},
]
const formItems: any = ref([
{
label: '标准类型',
type: 'select',
placeholder: '请选择',
field: 'standardTypeCode',
default: '',
options: standardOptions,
clearable: true,
required: true
},
{
label: '代码名称',
type: 'input',
placeholder: '请输入',
field: '2',
field: 'codeName',
default: '',
maxlength: 50,
maxlength: 20,
clearable: true,
required: true
},
......@@ -129,7 +241,7 @@ const formItems: any = ref([
label: '标准号',
type: 'input',
placeholder: '请输入',
field: '3',
field: 'standard',
default: '',
maxlength: 50,
clearable: true,
......@@ -139,19 +251,19 @@ const formItems: any = ref([
label: '标准名称',
type: 'input',
placeholder: '请输入',
field: '4',
field: 'standardName',
default: '',
maxlength: 50,
maxlength: 20,
clearable: true,
required: true
},
{
label: '发布单位',
type: 'input',
type: 'select',
placeholder: '请输入',
field: '5',
field: 'publishingUnitCode',
default: '',
maxlength: 50,
options: publishingUnitCodeOptions,
clearable: true,
required: true
},
......@@ -159,25 +271,30 @@ const formItems: any = ref([
label: '排序',
type: 'inputNumber',
placeholder: '请输入',
field: '6',
field: 'orderNum',
default: '',
maxlength: 50,
maxlength: 2,
clearable: true,
required: true
},
{
label: '启用状态',
type: 'switch',
field: 'status',
default: false
field: 'bizState',
default: 'Y',
activeValue: 'Y',
inactiveValue: 'N'
},
{
label: '代码类型',
type: 'select',
placeholder: '请选择',
field: '7',
field: 'typeCode',
default: '1',
options: [],
options: [
{ label: '列表结构', value: '1' },
{ label: '层级结构', value: '2' }
],
clearable: true,
required: true
},
......@@ -185,19 +302,26 @@ const formItems: any = ref([
label: '编码字段',
type: 'select',
placeholder: '请选择',
field: '8',
default: '1',
options: [],
field: 'codeFields',
default: [],
options: [
{ label: 'code', value: 'code' },
{ label: 'name', value: 'name' }
],
clearable: true,
required: true
required: true,
multiple: true
},
{
label: '编码名称',
type: 'select',
placeholder: '请选择',
field: '9',
default: '1',
options: [],
field: 'codeFieldName',
default: '',
options: [
{ label: 'code', value: 'code' },
{ label: 'name', value: 'name' }
],
clearable: true,
required: true
},
......@@ -205,15 +329,60 @@ const formItems: any = ref([
label: '层级结构',
type: 'input',
placeholder: '请输入',
field: '10',
default: '1',
options: [],
field: 'hierarchy',
default: '',
clearable: true,
required: true
}
])
const formRules = ref({
const formRules: any = ref({
chName: [
{
required: true,
message: "请填写中文名",
trigger: "blur",
},
],
enName: [
{
required: true,
message: "请填写英文名",
trigger: "blur",
},
],
orderNum: [{
validator: (rule: any, value: any, callback: any) => {
if (value === 0) {
callback();
return;
}
if (!value) {
callback(new Error('请填写排序'));
return;
}
const r = /(^[0-9]([0-9]*)$|^[0-9]$)/; // 正整数（可以以0打头）
if (value && !r.test(value)) {
callback(new Error('请填写大于或等于零整数'));
return;
}
callback();
},
trigger: "blur",
}],
codeColumn: [
{
required: true,
message: "请填写编码字段",
trigger: "blur",
},
],
codeName: [
{
required: true,
message: "请填写编码名称",
trigger: "blur",
},
],
})
const formInfo = ref({
type: 'form',
......@@ -222,8 +391,53 @@ const formInfo = ref({
formInfo: {
id: 'add-dict-form',
col: 'col2',
readonly: false,
items: formItems.value,
formRules: formRules.value
rules: formRules.value
}
})
const orginData = [
{
ROWID: 'field_0',
fieldName: 'code',
description: '编码字段',
fieldType: 'varchar',
fieldLength: '10',
fieldPrecision: '',
// orderNum: '1',
codeRuleGuid: '',
STATUS: 'edit',
STATE: 'Running'
}, {
ROWID: 'field_1',
fieldName: 'name',
description: '编码名称',
fieldType: 'varchar',
fieldLength: '20',
fieldPrecision: '',
// orderNum: '2',
codeRuleGuid: '',
STATUS: 'edit',
STATE: 'Running'
}
]
const orginFields = [
{ label: "序号", type: "index", width: 56, align: "center" },
{ label: "字段名称", field: "fieldName", width: 140 }
]
const formTableData: any = ref([])
const formTableSelectRowData: any = ref([])
const editTableInfo = ref({
fieldName: {
label: '字段名称',
type: 'input',
maxlength: 50,
placeholder: '',
field: 'fieldName',
default: '',
clearable: true,
required: true,
}
})
const formTable = ref({
......@@ -238,10 +452,7 @@ const formTable = ref({
multiple: true,
minHeight: 'unset',
maxHeight: '100%',
fields: [
{ label: '序号', type: 'index', width: 56, align: 'center' },
{ label: '字段名称', field: 'name', width: 140, type: 'edit', customClass: 'edit-colum'}
],
fields: [],
data: [],
showPage: false,
actionInfo: {
......@@ -250,12 +461,16 @@ const formTable = ref({
type: "btn",
width: 60,
fixed: 'right',
btns: [{ label: "删除", value: "remove" }]
btns: [
{ label: "删除", value: "remove" },
]
},
editInfo: {},
readonly: false,
col: 'auto-height',
style: { height: 'calc(100% - 40px)'},
style: {
height: 'calc(100% - 40px)'
},
loading: false
},
tableTool: {
......@@ -267,137 +482,1259 @@ const formTable = ref({
]
},
})
// 新增drawer
const drawerInfo = ref({
const fieldSheetInfo: any = ref({})
const uploadTableData: any = ref([])
const uploadSelectRowData: any = ref([])
const uploadTableFields: any = ref([])
const uploadTableInfo = ref({
id: "role-authority-table",
multiple: true,
// minHeight: 'unset',
// maxHeight: '100%',
fields: [],
data: [],
showPage: false,
actionInfo: {
label: "操作",
type: "btn",
width: 60,
btns: [
{ label: "删除", value: "remove" },
],
},
editInfo: {},
readonly: false,
loading: false
})
const uploadFiles: any = ref([])
const uploadInfo = ref({
type: 'upload',
title: '添加表数据',
col: 'row-reverse',
uploadInfo: {
id: 'upload-file-form',
action: '',
auto: false,
fileList: [],
accept: '.xlsx, .xls',
cover: true,
triggerBtn: {
label: '导入文件',
value: 'import_file',
icon: 'Upload',
plain: true,
},
toolBar: [
{ label: '下载模板', value: 'export_model', plain: true, icon: 'Download' },
]
// showList: false,
},
tableInfo: {},
tools: {
col: 'right',
visible: true,
btns: [
{ label: '树形显示', value: 'show_tree', type: 'primary', plain: true, visible: false },
{ label: '新增行', value: 'add_row', type: 'primary', plain: true },
{ label: '批量删除', value: 'remove_batch', plain: true },
]
}
})
const fieldTableInfo = ref({
type: 'field-table',
title: '表数据',
tableInfo: {
id: 'dict-field-table',
minHeight: 'unset',
maxHeight: '100%',
fields: [],
data: [],
loading: false,
showPage: false,
actionInfo: {
show: false
},
col: 'auto-height'
}
})
const contents = ref({
add: [
formInfo.value,
formTable.value,
],
upload: [
formInfo.value,
uploadInfo.value,
],
sheet: [
formInfo.value,
formTable.value,
],
field: [
formInfo.value,
fieldTableInfo.value,
]
})
const drawerRef = ref()
const drawerInfo: any = ref({
visible: false,
direction: 'rtl',
size: 550,
direction: "rtl",
modalClass: "",
modalClose: false,
modal: true,
size: 700,
header: {
title: '新增标准代码',
title: "新增",
},
type: '',
container: {
contents: [formInfo.value, formTable.value],
contents: [],
},
footer: {
visible: true,
btns: [
{ type: 'default', label: '取消', value: 'cancel' },
{ type: 'primary', label: '保存', value: 'save' },
{ type: 'primary', label: '保存并添加数据', value: 'saveAndAdd', visible: true }
{ type: 'primary', label: '保存', value: 'submit' },
{ type: 'primary', label: '保存并添加数据', value: 'saveAndAdd', visible: true },
]
}
},
})
async function drawerBtnClick (btn, info) {
const setFormItems = (row: any = null) => {
formItems.value = JSON.parse(JSON.stringify(orginItems))
formItems.value.map(item => {
if (item.field == 'databaseNameZh') {
item.options = dataBaseList.value
item.default = row ? row[item.field] : ''
} else if (item.field == 'dictionaryType') {
item.default = dictionaryType.value
// item.disabled = drawerInfo.value.type == 'add' ? false : true
item.disabled = true
item.children.map(child => {
child.options = orginOptions
if (child.field == 'codeColumn') {
child.default = row ? row[child.field] : 'code'
} else if (child.field == 'codeName') {
child.default = row ? row[child.field] : 'name'
} else {
child.default = row ? row[child.field] : ''
}
child.disabled = drawerInfo.value.type == 'detail' ? true : false
child.clearable = drawerInfo.value.type == 'detail' ? false : true
})
} else if (item.field == 'enName') {
item.default = row ? row[item.field] : ''
item.disabled = drawerInfo.value.type == 'add' ? false : true
item.clearable = drawerInfo.value.type == 'add' ? true : false
} else {
item.default = row ? row[item.field] : ''
item.disabled = drawerInfo.value.type == 'detail' ? true : false
item.clearable = drawerInfo.value.type == 'detail' ? false : true
}
})
formInfo.value.formInfo.readonly = drawerInfo.value.type == 'detail'
formInfo.value.formInfo.items = formItems.value
// for(var e in editTableInfo.value){
// const editItem = editTableInfo.value[e]
// if(editItem.field != 'description' && editItem.field != 'codeRuleGuid'){
// editItem.disabled = drawerInfo.value.type != 'add'
// }
// }
}
</script>
<template>
<div class="container_wrap full flex">
<div class="aside_wrap">
<div class="aside_title">标准代码列表</div>
<Tree :treeInfo="treeInfo" @nodeClick="nodeClick" />
</div>
<div class="main_wrap">
<div class="table_tool_wrap">
<div class="tools_btns">
<el-button type="primary" @click="handleCreate">新建</el-button>
<el-button>批量删除</el-button>
<el-button>批量导入</el-button>
</div>
<el-input class="table_search_input" v-model.trim="tableSearchInput" placeholder="代码名称搜索"
:suffix-icon="Search" clearable @change="val => getFirstPageData()" />
</div>
<div class="table_panel_wrap">
<Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange"
/>
</div>
</div>
<Drawer
:drawerInfo="drawerInfo"
@drawerBtnClick="drawerBtnClick"
ref="drawerRef"
>
<!-- <Form ref="formRef"
:itemList="formItems"
formId="basic-info-form"
:rules="formRules"
/> -->
</Drawer>
</div>
</template>
// 获取数据类型列表
const getDataType = () => {
let params = {
dictType: "字段类型"
}
getNewDataTypeList(params).then((res: any) => {
if (res.code == proxy.$passCode) {
const data = res.data
editTableInfo.value['fieldType'].options = data
} else {
ElMessage({
type: 'error',
message: res.msg,
})
}
})
}
<style scoped lang="scss">
.container_wrap {
// 获取数据库列表
const getDataBase = () => {
const params = {
pageIndex: 1,
connectStatus: '1'
}
getDataBaseList(params).then((res: any) => {
if (res.code == proxy.$passCode) {
const data = res.data ?? []
data.map(item => {
item.label = item.databaseNameZh
item.value = item.guid
})
dataBaseList.value = data
} else {
ElMessage({
type: 'error',
message: res.msg,
})
}
})
}
.aside_wrap {
width: 200px;
// 获取编码规则列表
const getCodeRuleData = () => {
let params = {}
getCoderuleList(params).then((res: any) => {
if (res.code == proxy.$passCode) {
const data = res.data
data?.map(item => {
item.label = item.ruleName
item.value = item.guid
})
codeRuleList.value = data
editTableInfo.value['codeRuleGuid'].options = data
} else {
ElMessage({
type: 'error',
message: res.msg,
})
}
})
}
.main_wrap {
padding: 10px 20px;
const treePromise = ref();
// 获取数据字典树形数据
// const getTreeData = (needClick = false, currData = {}) => {
// const params = {
// paramCode: '标准类型'
// }
// treeInfo.value.loading = true
// treePromise.value = getDictionaryTree(params).then((res: any) => {
// treePromise.value = null;
// if (res.code == proxy.$passCode) {
// const data = res.data ?? []
// const treeList = data.filter(item => item.children && item.children.length)
// treeData.value = treeList
// treeInfo.value.data = treeList
// if (treeList.length) {
// dictType.value = dictType.value == -1 ? Number(treeList[0].dictionaryType) : dictType.value;
// expandedKey.value = expandedKey.value.length == 0 ? [treeList[0].guid] : expandedKey.value;
// if (!needClick && !cacheStore.getCatch('dictionaryGuid')) {
// currentNodeKey.value = currentNodeKey.value == '' ? treeList[0].guid : currentNodeKey.value
// nextTick(() => {
// treeInfo.value.currentNodeKey = currentNodeKey.value
// treeInfo.value.expandedKey = expandedKey.value
// })
// } else {
// nextTick(() => {
// treeInfo.value.expandedKey = expandedKey.value;
// });
// }
// getFirstPageData()
// } else {//处理数据被删除完成，表格没刷新的情况。
// tableInfo.value.data = [];
// tableInfo.value.page.rows = 0;
// }
// } else {
// ElMessage({
// type: 'error',
// message: res.msg,
// })
// }
// treeInfo.value.loading = false;
// if (needClick) {
// nextTick(() => {
// nodeClick(currData);
// });
// }
// }).catch(() => {
// treeInfo.value.loading = false
// })
// }
const getTreeData = (needClick = false, currData = {}) => {
getParamsList({ dictType: '标准类型'}).then((res:any) => {
if (res.code === proxy.$passCode) {
const data = res.data || []
treeInfo.value.data = data
standardOptions.value = data
// 默认展开第一个
if (data.length === 0) return
let params = {
pageIndex: 1,
pageSize: -1,
standardTypeCode: data[0].value,
// codeName: '标准类型'
}
getStandardCodeList(params).then((res:any) => {
if (res.code === proxy.$passCode) {
let data = res.data
let list = res.data.records || []
list = list.map(item => {
item.label = item.codeName
item.value = item.guid
return item
})
treeInfo.value.data[0].children = list
tableInfo.value.data = list
tableInfo.value.page.limit = data.pageSize
tableInfo.value.page.curr = data.pageIndex
tableInfo.value.page.rows = data.totalRows
}
})
}
})
}
:deep(.el-tabs) {
height: 100%;
const getFirstPageData = () => {
page.value.curr = 1;
toSearch({})
}
const toSearch = (val: any, clear: boolean = false) => {
let params: any = Object.keys(val).length ? { ...val } : {}
params.pageIndex = page.value.curr;
params.pageSize = page.value.limit;
params.standardTypeCode = treeInfo.value.currentNodeKey
// params.dictionaryType = dictType.value
// params.name = tableSearchInput.value
getTableData(params);
};
const getTableData = (params) => {
tableInfo.value.loading = true
getStandardCodeList(params).then((res:any) => {
if (res.code === proxy.$passCode) {
let data = res.data
let list = res.data.records || []
list = list.map(item => {
item.label = item.codeName
item.value = item.guid
return item
})
tableInfo.value.data = list
tableInfo.value.page.limit = data.pageSize
tableInfo.value.page.curr = data.pageIndex
tableInfo.value.page.rows = data.totalRows
}
tableInfo.value.loading = false
}).catch(xhr => {
tableInfo.value.loading = false
})
};
.el-tabs__header {
margin-bottom: 0;
const tableSelectionChange = (val, tId) => {
if (drawerInfo.value.visible) {
if (formItems.value.length == 2) {
uploadSelectRowData.value = val
} else {
formTableSelectRowData.value = val
}
} else {
selectRowData.value = val.map((item) => item.guid);
}
};
const tablePageChange = (info) => {
page.value.curr = Number(info.curr);
page.value.limit = Number(info.limit);
toSearch({});
};
.el-tabs__item {
height: 32px;
padding: 0px;
width: 144px;
const tableInputChange = (val, scope) => {
if (forbidFields.indexOf(val) > -1) {
ElMessage({
type: "error",
message: '该名称已存在，请填写其他名称',
});
return
}
setCodeOptions()
}
&:last-child {
width: 130px;
const setCodeOptions = () => {
let opts: any = []
formTableData.value.map(item => {
if (item.fieldName) {
const row = JSON.parse(JSON.stringify(item))
row.label = item.fieldName
row.value = item.fieldName
opts.push(row)
}
})
formItems.value.at(-1).children.map(child => {
if (child.type == 'select') {
child.options = opts
}
})
}
.el-tabs__content {
height: calc(100% - 32px);
const toolBtnClick = (btn, data) => {
const type = btn.value
if (data) {
if (type.indexOf('add') > -1) {
if (formItems.value.length == 2) {
const params = {
guid: fieldSheetInfo.value.guid
}
uploadTableInfo.value.loading = true
getDictionaryRuleData(params).then((res: any) => {
if (res.code == proxy.$passCode) {
const data = res.data ?? {}
let rowInfo: any = {}
uploadTableFields.value.map(item => {
rowInfo[item.field] = data[item.field] ?? ''
})
rowInfo.STATUS = 'edit'
rowInfo.STATE = 'Running'
rowInfo.ROWID = `upload_${uploadTableData.value.length}`
uploadTableData.value.push(rowInfo)
uploadTableInfo.value.data = uploadTableData.value
scrollTable(rowInfo)
} else {
ElMessage({
type: 'error',
message: res.msg
})
}
uploadTableInfo.value.loading = false
}).catch(() => {
uploadTableInfo.value.loading = false
})
} else {
const rowInfo = {
ROWID: `formData_${formTableData.value.length}`,
fieldName: '',
description: '',
fieldType: '',
fieldLength: '',
fieldPrecision: '',
orderNum: '',
codeRuleGuid: '',
STATUS: 'edit',
STATE: 'Running'
}
let list: any = formTableData.value
list.push(rowInfo)
formTable.value.tableInfo.data = list
scrollTable(rowInfo)
}
} else if (type.indexOf('remove') > -1) {
if (formItems.value.length == 2) {
if (uploadSelectRowData.value.length == 0) {
ElMessage({
type: "error",
message: '请选择需要删除的数据',
});
return
}
uploadSelectRowData.value.map(item => {
const existIndex = uploadTableData.value.findIndex(s => s.ROWID == item.ROWID)
existIndex > -1 && uploadTableData.value.splice(existIndex, 1)
})
} else {
if (formTableSelectRowData.value.length == 0) {
ElMessage({
type: "error",
message: '请选择需要删除的数据',
});
return
}
const removeRows = () => {
formTableSelectRowData.value.map(item => {
const existIndex = formTableData.value.findIndex(s => s.ROWID == item.ROWID)
existIndex > -1 && formTableData.value.splice(existIndex, 1)
})
}
if (drawerInfo.value.type == 'edit') {
const editRows = formTableSelectRowData.value.filter(item => item.guid !== undefined)
if (editRows.length) {
formTable.value.tableInfo.loading = true
checkDelete().then((res: any) => {
if (res) {
ElMessageBox.confirm("数据字典有数据, 确定是否继续删除?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: 'warning',
}).then(() => {
removeRows()
})
} else {
removeRows()
}
formTable.value.tableInfo.loading = false
}).catch(xhr => {
ElMessage({
type: 'error',
message: xhr
})
formTable.value.tableInfo.loading = false
})
} else {
removeRows()
}
} else {
removeRows()
}
}
}
} else {
if (type == 'export_model') {
exportData('model')
} else if (type == 'import_file') {
importData()
}
}
}
.el-tab-pane {
padding: 0px 16px;
height: 100%;
const tableSwitchBeforeChange = (scope, field, callback) => {
const msg = '确定修改状态?'
ElMessageBox.confirm(
msg,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
const state = scope.row[field] == 1 ? 0 : 1
const result = tableSwitchChange(state, scope, field)
callback(result)
}).catch(() => {
callback(false)
})
}
const tableSwitchChange = (val, scope, field) => {
return new Promise((resolve, reject) => {
let params = {
guid: scope.row.guid,
dictionaryState: val
}
updateDictionaryState(params).then((res: any) => {
if (res.code == proxy.$passCode && res.data) {
getFirstPageData()
ElMessage({
type: "success",
message: '状态修改成功',
});
resolve(true)
} else {
ElMessage({
type: "error",
message: res.msg,
});
reject(false)
}
}).catch(() => {
reject(false)
})
})
}
const tableBtnClick = (scope, btn) => {
const type = btn.value;
const row = scope.row;
if (type == "edit" || type == 'detail') {
fieldTableInfo.value.tableInfo.fields = []
fieldTableInfo.value.tableInfo.data = []
drawerInfo.value.header.title = type == 'edit' ? "编辑标准代码" : "数据字典详情";
drawerInfo.value.modalClass = type == 'edit' ? '' : 'wrap_width_auto'
drawerInfo.value.type = type
drawerInfo.value.visible = true;
drawerInfo.value.loading = true;
formTable.value.tableInfo.loading = true
getStandardCodeDetail(row.guid).then((res: any) => {
if (res.code == proxy.$passCode && res.data) {
let data = res.data
currTableData.value = data;
setDetailInfo()
} else {
ElMessage({
type: "error",
message: res.msg,
});
}
formTable.value.tableInfo.loading = false
drawerInfo.value.loading = false;
}).catch(() => {
formTable.value.tableInfo.loading = false
drawerInfo.value.loading = false;
})
} else if (type == 'remove') {
const rowIndex = scope.$index
if (formItems.value.length == 2) {
uploadTableData.value.splice(rowIndex, 1)
} else {
if (row.guid !== undefined) {
formTable.value.tableInfo.loading = true
checkDelete().then((res: any) => {
if (res) {
ElMessageBox.confirm("数据字典有数据, 确定是否继续删除?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: 'warning',
}).then(() => {
formTableData.value.splice(rowIndex, 1)
})
} else {
formTableData.value.splice(rowIndex, 1)
}
formTable.value.tableInfo.loading = false
}).catch(xhr => {
ElMessage({
type: 'error',
message: xhr
})
formTable.value.tableInfo.loading = false
})
} else {
formTableData.value.splice(rowIndex, 1)
}
}
} else if (type == "delete") {
currTableData.value = row;
tableInfo.value.loading = true
checkDelete().then((res: any) => {
if (res.used) {
ElMessage({
type: 'error',
message: '数据字典被引用，请解除引用关系后再删除'
})
} else {
const unused = res.data.filter(item => item.have.length > 0)
if (unused.length) {
open("数据字典有数据, 确定是否继续删除?", "warning");
} else {
open("此操作将永久删除, 是否继续?", "warning");
}
}
tableInfo.value.loading = false
}).catch(xhr => {
ElMessage({
type: 'error',
message: xhr
})
tableInfo.value.loading = false
})
}
};
const checkDelete = (isBatch: any = false) => {
if (drawerInfo.value.visible) {
return new Promise((resolve, reject) => {
let params: any = {
guid: currTableData.value.guid
}
checkDeleteDictionaryScheme(params).then((res: any) => {
if (res.code == proxy.$passCode) {
const data = res.data
resolve(data)
} else {
reject(res.msg)
}
}).catch((xhr: any) => {
reject(xhr.msg)
})
})
} else {
return new Promise((resolve, reject) => {
let guids = [currTableData.value.guid]
if (isBatch) {
guids = selectRowData.value
}
checkDeleteDictionary(guids).then((res: any) => {
if (res.code == proxy.$passCode) {
const data = res.data ?? {}
if (data.used) {
resolve({
used: true,
data: data.used
})
} else {
resolve({
used: false,
data: data.unuse
})
}
} else {
reject(res.msg)
}
}).catch((xhr: any) => {
reject(xhr.msg)
})
})
}
}
.tree_panel {
height: calc(100% - 36px);
padding-top: 0;
const open = (msg, type, isBatch = false) => {
ElMessageBox.confirm(msg, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: type,
}).then(() => {
let guids = [currTableData.value.guid]
if (isBatch) {
guids = selectRowData.value
}
tableInfo.value.loading = true
deleteDictionary(guids).then((res: any) => {
if (res.code == proxy.$passCode) {
getTreeData();
ElMessage({
type: "success",
message: "删除成功",
});
} else {
ElMessage({
type: "error",
message: res.msg,
});
}
tableInfo.value.loading = false
}).catch(() => {
tableInfo.value.loading = false
});
});
};
:deep(.el-tree) {
margin: 0;
overflow: hidden auto;
const onUpload = (file, fileList) => {
uploadFiles.value = fileList
}
const uploadFile = (file) => {
importData(file)
}
const exportData = (type: any = null) => {
if (type == 'model') {
let params = {
guid: dictGuid.value
}
if (drawerInfo.value.type == 'add') {
params.guid = fieldSheetInfo.value.guid
}
exportDictionary(params).then((res: any) => {
if (res && !res.msg) {
download(res, '数据字典模板.xlsx', 'excel')
} else {
res?.msg && ElMessage.error(res?.msg);
}
});
} else {
let params = {
guid: dictGuid.value
}
exportDictionaryFileds(params).then((res: any) => {
if (res && !res.msg) {
download(res, '字典数据.xlsx', 'excel');
} else {
res?.msg && ElMessage.error(res?.msg);
}
});
}
}
const importData = (file: any = null) => {
let params = new FormData()
if (file) {
params.append("file", file.raw);
} else {
if (uploadFiles.value.length) {
uploadFiles.value.forEach((item: any, index: number) => {
params.append("file", item.raw);
});
}
}
params.append("dictionaryGuid", fieldSheetInfo.value.guid);
showDictionary(params).then((res: any) => {
if (res.code == proxy.$passCode) {
let data = res.data ?? []
setUploadDataInfo(data)
} else {
ElMessage({
type: "error",
message: res.msg,
});
}
})
}
// 生成表头
const setUploadDataFields = (data) => {
let fields: any = [], editInfo: any = {}
data.map(item => {
let fieldItem: any = {
label: item.description, field: item.fieldName, width: 140
}
if (drawerInfo.value.type != 'detail') {
fieldItem.type = 'edit'
fieldItem.columClass = 'edit-colum'
editInfo[item.fieldName] = {
label: '',
type: 'input',
placeholder: '',
field: item.fieldName,
default: '',
disabled: item.codeRuleGuid ? true : false,
clearable: true,
}
}
fields.push(fieldItem)
})
uploadTableFields.value = fields
if (drawerInfo.value.type == 'detail') {
fieldTableInfo.value.tableInfo.fields = uploadTableFields.value
} else {
uploadTableInfo.value.fields = uploadTableFields.value
uploadTableInfo.value.editInfo = editInfo
}
}
// 生成表数据
const setUploadDataInfo = async (info) => {
let data = info
if (drawerInfo.value.type == 'detail') {
data = info.jsonArray ?? []
const fields = info.schemaDataVOS ?? []
setUploadDataFields(fields)
}
if (drawerInfo.value.type == 'detail') {
fieldTableInfo.value.tableInfo.data = data
drawerInfo.value.container.contents = contents.value['field']
} else {
// 设置表数据
data.map((item, i) => {
item.STATUS = 'edit'
item.STATE = 'Running'
item.ROWID = `upload_${i}`
})
uploadTableData.value = data
uploadTableInfo.value.data = uploadTableData.value
}
}
const loadDrawer = async () => {
drawerInfo.value.visible = true;
drawerInfo.value.type = 'add';
drawerInfo.value.header.title = '新增标准代码';
drawerInfo.value.footer.visible = true;
// drawerInfo.value.header.title = '新增数据字典'
// drawerInfo.value.type = 'add'
// drawerInfo.value.modalClass = '';
// await setFormItems()
let fields = JSON.parse(JSON.stringify(orginFields))
fields.map((item: any) => {
if (!item.type || item.type != 'index') {
item.type = 'edit'
item.columClass = 'edit-colum'
}
})
formTable.value.tableInfo.fields = fields
formInfo.value.formInfo.items = formItems.value
formTableData.value = JSON.parse(JSON.stringify(orginData))
formTable.value.tableInfo.data = formTableData.value
formTable.value.tableInfo.editInfo = JSON.parse(JSON.stringify(editTableInfo.value))
formTable.value.tableInfo.readonly = false
formTable.value.tableInfo.multiple = true
formTable.value.tableInfo.actionInfo.show = true
formTable.value.tableTool.visible = true
drawerInfo.value.container.contents = contents.value['add']
drawerInfo.value.visible = true
console.log('table', formTable.value)
console.log('formInfo', formInfo)
};
const batching = (type) => {
if (type == 'delete') {
if (selectRowData.value.length == 0) {
ElMessage({
type: 'error',
message: '请选择需要删除的数据',
})
return
}
tableInfo.value.loading = true
checkDelete().then((res: any) => {
if (res.used) {
ElMessage({
type: 'error',
message: '数据字典被引用，请解除引用关系后再删除'
})
} else {
const unused = res.data.filter(item => !item.have || item.have.length == 0)
if (unused.length) {
open("数据字典有数据, 确定是否继续删除?", "warning", true);
} else {
open("此操作将永久删除, 是否继续?", "warning", true);
}
}
tableInfo.value.loading = false
}).catch(xhr => {
ElMessage({
type: 'error',
message: xhr
})
tableInfo.value.loading = false
})
}
};
const nodeClick = (data) => {
console.log('treeNodeClick', data)
drawerInfo.value.visible = false
const changeCont = () => {
// dictGuid.value = data.guid
// const info = {
// type: 'dictionary',
// dictionaryGuid: dictGuid.value
// }
// cacheStore.setCatch('uploadSetting', info)
// if (data.type == 1) {
// showFiledsPage.value = false
// dictType.value = Number(data.dictionaryType)
// } else {
// showFiledsPage.value = true
// nextTick(() => {
// dictFiledsRef.value.dictionaryGuid = dictGuid.value
// dictFiledsRef.value.getFirstPageData()
// })
// }
nextTick(() => {
treeInfo.value.currentNodeKey = data.value
getFirstPageData()
})
}
if (showFiledsPage.value) {
const toChange = dictFiledsRef.value.checkSave()
if (!toChange) {
ElMessageBox.confirm(
'存在未保存的数据，切换后会丢失，是否确定切换',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
changeCont()
}).catch(() => {
treeInfo.value.currentNodeKey = dictGuid.value
})
} else {
changeCont()
}
} else {
changeCont()
}
}
// 设置详情信息
const setDetailInfo = () => {
const row = JSON.parse(JSON.stringify(currTableData.value))
formItems.value.forEach(item => {
item.default = row[item.field] || ''
})
formInfo.value.formInfo.items = formItems.value
formTableData.value = row.standardCodeFields.map(item => {
item.STATUS = 'edit'
return item
})
let fields = JSON.parse(JSON.stringify(orginFields))
fields.map((item: any) => {
if (item.type != 'index') {
item.type = 'edit'
item.columClass = 'edit-colum'
}
})
formTable.value.tableInfo.fields = fields
formTable.value.tableInfo.data = formTableData.value
formTable.value.tableInfo.editInfo = JSON.parse(JSON.stringify(editTableInfo.value))
formTable.value.tableInfo.readonly = false
formTable.value.tableInfo.multiple = true
formTable.value.tableInfo.actionInfo.show = true
formTable.value.tableTool.visible = true
drawerInfo.value.container.contents = contents.value['add']
drawerInfo.value.visible = true
}
const checkParamsData = () => {
let addJsonArray: any = [], upJsonArray: any = [], jsonArray: any = [], pass = true
let passArr = uploadTableData.value
passArr.map((item, index) => {
const obj = JSON.parse(JSON.stringify(item))
delete obj.STATE
delete obj.STATUS
delete obj.NOTES
delete obj.ROWID
for (var i in obj) {
if (obj[i] == '') {
pass = false
}
}
if (obj.guid !== undefined) {
upJsonArray.push(obj)
} else {
addJsonArray.push(obj)
}
obj.index = index
jsonArray.push(obj)
})
return { pass, addJsonArray, upJsonArray, jsonArray }
}
const saveData = async (params) => {
// const passInfo = await checkParamsData()
console.log('params', params)
saveStandardCode(params).then((res:any) => {
if (res.code === proxy.$passCode) {
ElMessage.success('操作成功')
}
})
}
const addColumn = (info: any = null) => {
const fields = uploadTableFields.value
const existIndex = fields.findIndex(item => item.field == 'NOTES')
if (info) {
if (existIndex == -1) {
fields.push({
label: '备注',
field: 'NOTES',
width: 276
})
}
for (var d in info) {
uploadTableData.value[d].NOTES = info[d].join(',')
}
} else {
if (existIndex > -1) {
fields.splice(existIndex, 1)
}
}
}
.table_tool_wrap {
display: flex;
flex-direction: column;
const scrollTable = (rowInfo) => {
nextTick(() => {
const drawerBody = document.getElementsByClassName('el-drawer__body')[0];
const tableListRef = drawerRef.value.getDrawerConRef("drawerTableRef");
if (!tableListRef) return;
//设置选中表格当前新增行。
tableListRef.setCurrentRow(rowInfo);
drawerBody.scrollTop = drawerBody.scrollHeight;
let table = tableListRef.layout.table.refs;
// 获取表格滚动元素
let tableScrollEle =
table.bodyWrapper.firstElementChild.firstElementChild;
// 设置表格滚动的位置
tableScrollEle.scrollTop = tableScrollEle.scrollHeight;
});
};
.el-input {
width: 230px;
height: 32px;
const drawerBtnClick = (btn, info) => {
console.log('btn', btn, info)
console.log('table', formTable.value)
let params = {
standardCodeFields: formTable.value.tableInfo.data.map(item => {
let obj = { fieldName: item.fieldName }
return obj
}),
...info
}
if (params.typeCode === '1') {
delete params.hierarchy
}
if (btn.value == 'submit' || btn.value == 'saveAndAdd') {
saveData(params)
} else {
drawerInfo.value.footer.btns.map((item: any) => delete item.disabled)
nextTick(() => {
drawerInfo.value.visible = false
})
}
}
:deep(.el-input) {
.el-input__suffix-inner {
flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
display: flex;
const getTableFiled = () => {
const guid = currTableData.value.guid;
fieldTableInfo.value.tableInfo.loading = true;
drawerInfo.value.container.contents = contents.value['field']
getDictionaryFileds(guid).then((res: any) => {
fieldTableInfo.value.tableInfo.loading = false;
if (res.code == proxy.$passCode) {
const data = res.data ?? {}
currTableData.value.detailInfo = data
setUploadDataInfo(data)
} else {
ElMessage({
type: 'error',
message: res.msg,
})
}
}).catch(() => {
fieldTableInfo.value.tableInfo.loading = false;
})
}
const getDictionaryDataDetail = (params) => {
uploadTableInfo.value.loading = true
getDictionaryFileds(params).then((res: any) => {
if (res.code == proxy.$passCode) {
const data = res.data ?? {}
setContents(data)
} else {
ElMessage({
type: 'error',
message: res.msg,
})
}
uploadTableInfo.value.loading = false
}).catch(xhr => {
uploadTableInfo.value.loading = false
})
}
// 设置添加数据面板信息
const setContents = async (info) => {
formItems.value.splice(2)
formItems.value.map(item => {
item.default = fieldSheetInfo.value[item.field]
item.disabled = true
})
const fields = info.schemaDataVOS ?? []
await setUploadDataFields(fields)
uploadTableData.value = []
uploadTableInfo.value.data = []
uploadInfo.value.tableInfo = uploadTableInfo.value
drawerInfo.value.container.contents = contents.value['upload']
}
.table_panel_wrap {
height: calc(100% - 44px);
const radioGroupChange = async (val, info) => {
dictionaryType.value = Number(val)
await setFormItems(info)
setGroup()
}
// 切换结构类型 设置选项显隐
const setGroup = () => {
let dictionaryOpts = formItems.value.at(-1).children
if (dictionaryType.value == 1) {
dictionaryOpts[2].visible = false
dictionaryOpts[3].visible = false
} else if (dictionaryType.value == 2) {
dictionaryOpts[2].visible = false
dictionaryOpts[3].block = false
dictionaryOpts[3].visible = true
} else if (dictionaryType.value == 3) {
dictionaryOpts[2].visible = true
dictionaryOpts[3].block = true
dictionaryOpts[3].visible = true
} else if (dictionaryType.value == 4) {
dictionaryOpts[2].visible = false
dictionaryOpts[3].block = true
dictionaryOpts[3].visible = true
}
formInfo.value.formInfo.items = formItems.value
}
onActivated(() => {
getCodeRuleData();
let guid = cacheStore.getCatch('dictionaryGuid');
if (guid) {
nextTick(() => {
if (treePromise.value) {
treePromise.value.then(() => {
nodeClick({ guid: guid, dictionaryType: '1', type: 2 });
cacheStore.setCatch('dictionaryGuid', null);
});
} else {
nodeClick({ guid: guid, type: 1 });
cacheStore.setCatch('dictionaryGuid', null);
}
});
}
})
onBeforeMount(() => {
getDataType()
getTreeData()
getParamsList({ dictType: '发布单位' }).then((res:any) => {
if (res.code === proxy.$passCode) {
const data = res.data || []
publishingUnitCodeOptions.value = data
}
})
})
onMounted(() => {
let dom = document.getElementById('main-app');
if (dom) {
dom.addEventListener('click', (event: any) => {
// 新建时不要处理。
if (drawerInfo.value.header.title == '数据字典详情' && !event.target?.classList?.contains('drawer-detail-cell')) {
if (drawerInfo.value.visible) {
drawerInfo.value.visible = false;
}
}
});
}
});
</script>
<template>
<div class="container_wrap full flex">
<div class="aside_wrap">
<div class="aside_title">数据字典列表</div>
<Tree ref="dictTreeRef" :treeInfo="treeInfo" @nodeClick="nodeClick" />
</div>
<!-- <DictFileds ref="dictFiledsRef" v-if="showFiledsPage" @exportData="exportData" /> -->
<div class="main_wrap">
<div class="table_tool_wrap">
<div class="tools_btns">
<el-button type="primary" @click="loadDrawer" v-preReClick>新建</el-button>
<el-button @click="batching('delete')" v-preReClick>批量删除</el-button>
</div>
<el-input class="table_search_input" v-model.trim="tableSearchInput" placeholder="请输入字典中/英文名搜索"
:suffix-icon="Search" clearable @change="val => getFirstPageData()" />
</div>
<div class="table_panel_wrap full">
<Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tableSelectionChange="tableSelectionChange"
@tablePageChange="tablePageChange" @tableSwitchBeforeChange="tableSwitchBeforeChange" />
</div>
</div>
<Drawer ref="drawerRef" :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick"
@radioGroupChange="radioGroupChange" @drawerTableBtnClick="tableBtnClick"
@drawerTableSelectionChange="tableSelectionChange" @drawerTableToolBtnClick="toolBtnClick"
@drawerTableInputChange="tableInputChange" @drawerToolBtnClick="toolBtnClick" @onUpload="onUpload"
@uploadFile="uploadFile" @uploadBtnClick="toolBtnClick" />
</div>
</template>
<style lang="scss" scoped>
.container_wrap {
.aside_wrap {
width: 200px;
}
}
.tree_panel {
height: 100%;
padding-top: 0;
:deep(.el-tree) {
margin: 0;
height: calc(100% - 68px);
overflow: hidden auto;
}
}
</style>
......
src/views/data_meta/standard-codetable_old.vue 0 → 100644
<route lang="yaml">
name: metadataStandardCodetable
</route>
<script lang="ts" setup name="metadataStandardCodetable">
import { ref, reactive } from 'vue';
import { ElMessage } from "element-plus";
import Tree from '@/components/Tree/index.vue';
import TableTools from '@/components/Tools/table_tools.vue';
import { Search } from '@element-plus/icons-vue'
import { useRouter, useRoute } from "vue-router";
import { TableColumnWidth } from '@/utils/enum';
import { commonPageConfig } from '@/components/PageNav/index';
import { getParamsList } from '@/api/modules/dataAsset'
import { getStandardCodeList, saveStandardCode, updateStandardCode } from '@/api/modules/dataMetaService'
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const treeInfo:any = reactive({
id: "data-pickup-tree",
filter: true,
queryValue: "",
queryPlaceholder: "请输入关键字搜索",
props: {
label: "label",
value: "value",
},
nodeKey: 'value',
expandedKey: ['01'],
currentNodeKey: '01',
expandOnNodeClick: false,
data: [],
loading: false
});
function nodeClick (data) {
}
/** 分页及搜索传参信息配置。 */
const tableSearchInput = ref('')
function getFirstPageData () {
page.value.curr = 1
toSearch({})
}
function toSearch (val: any, clear: boolean = false) {
let params: any = Object.keys(val).length ? { ...val } : {}
params.pageIndex = page.value.curr;
params.pageSize = page.value.limit;
params.name = tableSearchInput.value
getTableData(params);
}
const page = ref({
...commonPageConfig,
collectTaskName: '',
dataSourceGuid: '',
taskState: null
});
const tableInfo = ref({
id: 'data-source-table',
fields: [
{ label: '序号', type: 'index', width: TableColumnWidth.INDEX, align: 'center' },
{ label: '代码名称', field: '1', width: 140 },
{ label: '标准号', field: '2', width: 140 },
{ label: '标准名称', field: '3', width: 140 },
{ label: '启用状态', field: '4', width: 140 },
{ label: '创建时间', field: '5', width: 140 }
],
data: [],
page: {
type: 'normal',
rows: 0,
...page.value
},
actionInfo: {
label: '操作',
type: 'btn',
width: 160,
btns: scope => {
let row = scope.row
return [
{ label: '编辑', value: 'edit' },
{ label: '删除', value: 'delete' },
]
}
},
loading: false
})
function tableBtnClick (scope, btn) {
}
function tablePageChange (info) {
page.value.curr = Number(info.curr);
page.value.limit = Number(info.limit);
// getTableData();
}
function getTableData (params) {
}
function handleCreate () {
drawerInfo.value.visible = true;
drawerInfo.value.type = 'add';
drawerInfo.value.header.title = '新增标准代码';
drawerInfo.value.footer.visible = true;
}
// drawer form
const standardOptions = ref([])
const publishingUnitCodeOptions = ref([])
const formRef = ref()
const formItems: any = ref([
{
label: '标准类型',
type: 'select',
placeholder: '请选择',
field: 'standardTypeCode',
default: '',
options: standardOptions,
clearable: true,
required: true
},
{
label: '代码名称',
type: 'input',
placeholder: '请输入',
field: 'codeName',
default: '',
maxlength: 20,
clearable: true,
required: true
},
{
label: '标准号',
type: 'input',
placeholder: '请输入',
field: 'standard',
default: '',
maxlength: 50,
clearable: true,
required: true
},
{
label: '标准名称',
type: 'input',
placeholder: '请输入',
field: 'standardName',
default: '',
maxlength: 20,
clearable: true,
required: true
},
{
label: '发布单位',
type: 'select',
placeholder: '请输入',
field: 'publishingUnitCode',
default: '',
options: publishingUnitCodeOptions,
clearable: true,
required: true
},
{
label: '排序',
type: 'inputNumber',
placeholder: '请输入',
field: 'orderNum',
default: '',
maxlength: 2,
clearable: true,
required: true
},
{
label: '启用状态',
type: 'switch',
field: 'bizState',
default: false
},
{
label: '代码类型',
type: 'select',
placeholder: '请选择',
field: 'typeCode',
default: '1',
options: [
{ label: '列表结构', value: '1' },
{ label: '层级结构', value: '2' }
],
clearable: true,
required: true
},
{
label: '编码字段',
type: 'select',
placeholder: '请选择',
field: 'codeFields',
default: [],
options: [
{ label: 'code', value: 'code' },
{ label: 'name', value: 'name' }
],
clearable: true,
required: true,
multiple: true
},
{
label: '编码名称',
type: 'select',
placeholder: '请选择',
field: 'codeFieldName',
default: '',
options: [
{ label: 'code', value: 'code' },
{ label: 'name', value: 'name' }
],
clearable: true,
required: true
},
{
label: '层级结构',
type: 'input',
placeholder: '请输入',
field: 'hierarchy',
default: '',
clearable: true,
required: true
}
])
const formRules = ref({
})
const formInfo = ref({
type: 'form',
title: '',
col: 'span',
formInfo: {
id: 'add-dict-form',
col: 'col2',
items: formItems.value,
formRules: formRules.value
}
})
const formTable = reactive({
type: "table",
title: "定义表结构",
col: 'no-margin',
style: {
height: 'calc(100% - 234px)'
},
tableInfo: {
id: "role-authority-table",
multiple: true,
minHeight: 'unset',
maxHeight: '100%',
fields: [
{ label: '序号', type: 'index', width: 56, align: 'center' },
{ label: '字段名称', field: 'fieldName', width: 140, type: 'edit', customClass: 'edit-colum'}
],
data: [{ fieldName: '1', index: 0}],
showPage: false,
actionInfo: {
show: true,
label: "操作",
type: "btn",
width: 60,
fixed: 'right',
btns: [{ label: "删除", value: "remove" }]
},
editInfo: {
fieldName: {
field: 'fieldName',
label: '字段名称',
type: 'input',
clearable: true,
maxlength: 20
}
},
readonly: false,
col: 'auto-height',
style: { height: 'calc(100% - 40px)'},
loading: false
},
tableTool: {
col: 'float-right',
visible: true,
btns: [
{ label: "新增行", value: "tableAdd", type: 'primary' },
{ label: "批量删除", value: "tableDelete" },
]
},
})
// 新增drawer
const drawerInfo = ref({
visible: false,
direction: 'rtl',
size: 550,
header: {
title: '新增标准代码',
},
type: '',
container: {
contents: [formInfo.value, formTable],
},
footer: {
visible: true,
btns: [
{ type: 'default', label: '取消', value: 'cancel' },
{ type: 'primary', label: '保存', value: 'save' },
{ type: 'primary', label: '保存并添加数据', value: 'saveAndAdd', visible: true }
]
}
})
async function drawerBtnClick (btn, info) {
}
function drawerTableToolBtnClick (btn, data) {
console.log(btn, data)
if (btn.value === 'tableAdd') {
// 定义表结构新增行
let rowInfo = { fieldName: '' }
formTable.tableInfo.data.push(rowInfo)
}
}
onMounted(() => {
getParamsList({ dictType: '标准类型'}).then((res:any) => {
if (res.code === proxy.$passCode) {
const data = res.data || []
treeInfo.data = data
standardOptions.value = data
// 默认展开第一个
if (data.length === 0) return
let params = {
pageIndex: 1,
pageSize: 100,
standardTypeCode: data[0].value,
codeName: '标准类型'
}
getStandardCodeList(params)
}
})
getParamsList({ dictType: '发布单位' }).then((res:any) => {
if (res.code === proxy.$passCode) {
const data = res.data || []
publishingUnitCodeOptions.value = data
}
})
})
</script>
<template>
<div class="container_wrap full flex">
<div class="aside_wrap">
<div class="aside_title">标准代码列表</div>
<Tree :treeInfo="treeInfo" @nodeClick="nodeClick" />
</div>
<div class="main_wrap">
<div class="table_tool_wrap">
<div class="tools_btns">
<el-button type="primary" @click="handleCreate">新建</el-button>
<el-button>批量删除</el-button>
<el-button>批量导入</el-button>
</div>
<el-input class="table_search_input" v-model.trim="tableSearchInput" placeholder="代码名称搜索"
:suffix-icon="Search" clearable @change="val => getFirstPageData()" />
</div>
<div class="table_panel_wrap">
<Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange"
/>
</div>
</div>
<Drawer
:drawerInfo="drawerInfo"
@drawerBtnClick="drawerBtnClick"
ref="drawerRef"
@drawerTableToolBtnClick="drawerTableToolBtnClick"
>
<!-- <Form ref="formRef"
:itemList="formItems"
formId="basic-info-form"
:rules="formRules"
/> -->
</Drawer>
</div>
</template>
<style scoped lang="scss">
.container_wrap {
.aside_wrap {
width: 200px;
}
.main_wrap {
padding: 10px 20px;
:deep(.el-tabs) {
height: 100%;
.el-tabs__header {
margin-bottom: 0;
}
.el-tabs__item {
height: 32px;
padding: 0px;
width: 144px;
&:last-child {
width: 130px;
}
}
.el-tabs__content {
height: calc(100% - 32px);
}
.el-tab-pane {
padding: 0px 16px;
height: 100%;
}
}
}
}
.tree_panel {
height: calc(100% - 36px);
padding-top: 0;
:deep(.el-tree) {
margin: 0;
overflow: hidden auto;
}
}
.table_tool_wrap {
display: flex;
flex-direction: column;
.el-input {
width: 230px;
height: 32px;
}
:deep(.el-input) {
.el-input__suffix-inner {
flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
display: flex;
}
}
}
.table_panel_wrap {
height: calc(100% - 44px);
}
</style>
\ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!