You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
420 lines
12 KiB
420 lines
12 KiB
2 months ago
|
<template>
|
||
|
<el-table
|
||
|
v-loading="loading"
|
||
|
:data="tableData"
|
||
|
border
|
||
|
style="width: 100%"
|
||
|
:row-class-name="tableRowClassName"
|
||
|
|
||
|
>
|
||
|
<el-table-column type="selection" width="55" align="center" />
|
||
|
|
||
|
<el-table-column label="归属" align="center" width="200">
|
||
|
<template #default="{ row }">
|
||
|
{{
|
||
|
row.dictLevel === 'company'
|
||
|
? '公司级'
|
||
|
: '系统级(' + row.sysName + ')'
|
||
|
}}
|
||
|
</template>
|
||
|
</el-table-column>
|
||
|
|
||
|
<el-table-column label="类型" align="center">
|
||
|
<template #default="{ row }">
|
||
|
{{ row.dictType == 0 ? '基础数据' : '指标数据' }}
|
||
|
</template>
|
||
|
</el-table-column>
|
||
|
|
||
|
<el-table-column label="字典编号" width="150" align="center" prop="dictNum" />
|
||
|
<el-table-column label="字典英文名" width="120" align="center" prop="dictCode" />
|
||
|
<el-table-column label="字典中文名" width="120" align="center" prop="dictName" />
|
||
|
<el-table-column label="字典业务定义" width="120" align="center" prop="dictMenu" />
|
||
|
<el-table-column label="数据类型" align="center" prop="dataType" />
|
||
|
|
||
|
<el-table-column label="数据标准" align="center" prop="stdCode">
|
||
|
<template #default="{ row }">
|
||
|
<span>{{ transIdtoCode(row.stdCode) }}</span>
|
||
|
</template>
|
||
|
</el-table-column>
|
||
|
|
||
|
<el-table-column label="变更类型" align="center">
|
||
|
<template #default="{ row }">
|
||
|
{{ changeTypeMap[row.changeType] || row.changeType }}
|
||
|
</template>
|
||
|
</el-table-column>
|
||
|
|
||
|
<el-table-column label="审批状态" align="center">
|
||
|
<template #default="{ row }">
|
||
|
{{ approStatusMap[row.approStatus] || row.approStatus }}
|
||
|
</template>
|
||
|
</el-table-column>
|
||
|
|
||
|
<!-- “查看” 操作列,固定右侧 -->
|
||
|
<el-table-column fixed="right" label="操作" width="100" align="center">
|
||
|
<template #default="{ row }">
|
||
|
<el-button text type="primary" @click="handleView(row.id)">
|
||
|
查看
|
||
|
</el-button>
|
||
|
</template>
|
||
|
</el-table-column>
|
||
|
</el-table>
|
||
|
|
||
|
<!-- 弹窗 -->
|
||
|
<!-- 字典详情弹窗(样式保留) -->
|
||
|
<el-dialog
|
||
|
v-model="formVisible"
|
||
|
title="字典详情"
|
||
|
width="70%"
|
||
|
@close="formData = {}"
|
||
|
>
|
||
|
<el-form :model="formData" ref="formRef" label-width="120px" :rules="formRules">
|
||
|
<!-- 第一行:3列 -->
|
||
|
<el-row gutter="20">
|
||
|
<el-col :span="6">
|
||
|
<el-form-item prop="dictLevel">
|
||
|
<template #label>
|
||
|
<span :class="{ 'changed-label': isChanged(formData.dictLevel) }">
|
||
|
字典归属:
|
||
|
</span>
|
||
|
</template>
|
||
|
<span :class="{ 'changed-value': isChanged(formData.dictLevel) }">
|
||
|
{{ formatValue(formData.dictLevel === 'company' ? '公司级' : '系统级(' + formData.sysName + ')') }}
|
||
|
</span>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="6">
|
||
|
<el-form-item prop="sysId" v-show="showSys">
|
||
|
<template #label>
|
||
|
<span :class="{ 'changed-label': isChanged(formData.sysId) }">
|
||
|
来源系统:
|
||
|
</span>
|
||
|
</template>
|
||
|
<span :class="{ 'changed-value': isChanged(formData.sysId) }">
|
||
|
{{ formatValue(formData.sysName) }}
|
||
|
</span>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="6">
|
||
|
<el-form-item prop="dictType">
|
||
|
<template #label>
|
||
|
<span :class="{ 'changed-label': isChanged(formData.dictType) }">
|
||
|
数据字典类型:
|
||
|
</span>
|
||
|
</template>
|
||
|
<span :class="{ 'changed-value': isChanged(formData.dictType) }">
|
||
|
{{ formatValue(formData.dictType == 0 ? '基础数据' : '指标数据') }}
|
||
|
</span>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
</el-row>
|
||
|
|
||
|
<!-- 第二行:3列 -->
|
||
|
<el-row gutter="20">
|
||
|
<el-col :span="6">
|
||
|
<el-form-item prop="dictNum">
|
||
|
<template #label>
|
||
|
<span :class="{ 'changed-label': isChanged(formData.dictNum) }">
|
||
|
数据字典编号:
|
||
|
</span>
|
||
|
</template>
|
||
|
<span :class="{ 'changed-value': isChanged(formData.dictNum) }">
|
||
|
{{ formatValue(formData.dictNum) }}
|
||
|
</span>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="6">
|
||
|
<el-form-item prop="dictCode">
|
||
|
<template #label>
|
||
|
<span :class="{ 'changed-label': isChanged(formData.dictCode) }">
|
||
|
字典英文名:
|
||
|
</span>
|
||
|
</template>
|
||
|
<span :class="{ 'changed-value': isChanged(formData.dictCode) }">
|
||
|
{{ formatValue(formData.dictCode) }}
|
||
|
</span>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="6">
|
||
|
<el-form-item prop="dictName">
|
||
|
<template #label>
|
||
|
<span :class="{ 'changed-label': isChanged(formData.dictName) }">
|
||
|
字典中文名:
|
||
|
</span>
|
||
|
</template>
|
||
|
<span :class="{ 'changed-value': isChanged(formData.dictName) }">
|
||
|
{{ formatValue(formData.dictName) }}
|
||
|
</span>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
</el-row>
|
||
|
|
||
|
<!-- 第三行:4列 -->
|
||
|
<el-row gutter="20">
|
||
|
<el-col :span="6">
|
||
|
<el-form-item prop="dictMenu">
|
||
|
<template #label>
|
||
|
<span :class="{ 'changed-label': isChanged(formData.dictMenu) }">
|
||
|
字典业务定义:
|
||
|
</span>
|
||
|
</template>
|
||
|
<span :class="{ 'changed-value': isChanged(formData.dictMenu) }">
|
||
|
{{ formatValue(formData.dictMenu) }}
|
||
|
</span>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="6">
|
||
|
<el-form-item prop="dataType">
|
||
|
<template #label>
|
||
|
<span :class="{ 'changed-label': isChanged(formData.dataType) }">
|
||
|
数据类型:
|
||
|
</span>
|
||
|
</template>
|
||
|
<span :class="{ 'changed-value': isChanged(formData.dataType) }">
|
||
|
{{ formatValue(formData.dataType) }}
|
||
|
</span>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="6">
|
||
|
<el-form-item prop="stdCode">
|
||
|
<template #label>
|
||
|
<span :class="{ 'changed-label': isChanged(formData.stdCode) }">
|
||
|
数据标准:
|
||
|
</span>
|
||
|
</template>
|
||
|
<span :class="{ 'changed-value': isChanged(formData.stdCode) }">
|
||
|
{{ formatValue(transIdtoCode(formData.stdCode)) }}
|
||
|
</span>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
|
||
|
</el-row>
|
||
|
|
||
|
<!-- 第四行:2列 -->
|
||
|
<el-row gutter="20">
|
||
|
<el-col :span="12">
|
||
|
<el-form-item prop="bussDeptName">
|
||
|
<template #label>
|
||
|
<span :class="{ 'changed-label': isChanged(formData.bussDeptName) }">
|
||
|
业务认责部门:
|
||
|
</span>
|
||
|
</template>
|
||
|
<span :class="{ 'changed-value': isChanged(formData.bussDeptName) }">
|
||
|
{{ formatValue(formData.bussDeptName) }}
|
||
|
</span>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="12">
|
||
|
<el-form-item prop="bussUser">
|
||
|
<template #label>
|
||
|
<span :class="{ 'changed-label': isChanged(formData.bussUser) }">
|
||
|
业务认责人员:
|
||
|
</span>
|
||
|
</template>
|
||
|
<span :class="{ 'changed-value': isChanged(formData.bussUser) }">
|
||
|
{{ formatValue(formData.bussUser) }}
|
||
|
</span>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
</el-row>
|
||
|
|
||
|
<!-- 第五行:2列 -->
|
||
|
<el-row gutter="20">
|
||
|
<el-col :span="12">
|
||
|
<el-form-item prop="techDeptName">
|
||
|
<template #label>
|
||
|
<span :class="{ 'changed-label': isChanged(formData.techDeptName) }">
|
||
|
技术认责部门:
|
||
|
</span>
|
||
|
</template>
|
||
|
<span :class="{ 'changed-value': isChanged(formData.techDeptName) }">
|
||
|
{{ formatValue(formData.techDeptName) }}
|
||
|
</span>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="12">
|
||
|
<el-form-item prop="techUser">
|
||
|
<template #label>
|
||
|
<span :class="{ 'changed-label': isChanged(formData.techUser) }">
|
||
|
技术认责人员:
|
||
|
</span>
|
||
|
</template>
|
||
|
<span :class="{ 'changed-value': isChanged(formData.techUser) }">
|
||
|
{{ formatValue(formData.techUser) }}
|
||
|
</span>
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
</el-row>
|
||
|
</el-form>
|
||
|
|
||
|
<template #footer>
|
||
|
<el-button @click="formVisible = false">关闭</el-button>
|
||
|
</template>
|
||
|
</el-dialog>
|
||
|
</template>
|
||
|
|
||
|
<script setup>
|
||
|
import { ref, watch } from 'vue';
|
||
|
import { listStdDictAppr, getStdDictAppr ,listStdMainSelect} from '@/api/datastd/std';
|
||
|
|
||
|
const props = defineProps({
|
||
|
flowId: {
|
||
|
type: String,
|
||
|
required: true
|
||
|
},
|
||
|
stdDictVisible:{
|
||
|
type: Boolean,
|
||
|
required: true
|
||
|
}
|
||
|
});
|
||
|
const getStdMainSelect = async () => {
|
||
|
const response = await listStdMainSelect(queryStd);
|
||
|
stdList.value = response.data;
|
||
|
|
||
|
};
|
||
|
// 设置行样式
|
||
|
function tableRowClassName({ row }) {
|
||
|
switch (row.changeType) {
|
||
|
case 'add':
|
||
|
return 'row-add'
|
||
|
case 'edit':
|
||
|
return 'row-edit'
|
||
|
case 'delete':
|
||
|
return 'row-delete'
|
||
|
default:
|
||
|
return ''
|
||
|
}
|
||
|
}
|
||
|
const stdList = ref([]);
|
||
|
const queryStd = ref({
|
||
|
stdNum: "",
|
||
|
});
|
||
|
const isChanged = (val) => !!val && typeof val === 'string' && val.includes('==>');
|
||
|
const formatValue = (val) => {
|
||
|
if (!val) return ''
|
||
|
if (isChanged(val)) {
|
||
|
const [oldVal, newVal] = val.split('==>')
|
||
|
return `${oldVal.trim()} ==> ${newVal.trim()}`
|
||
|
}
|
||
|
return val
|
||
|
}
|
||
|
const loading = ref(false);
|
||
|
const tableData = ref([]);
|
||
|
const transIdtoCode = (stdCode) => {
|
||
|
const match = stdList.value.find(item => item.id === stdCode);
|
||
|
return match ? match.stdNum : '';
|
||
|
};
|
||
|
const changeTypeMap = {
|
||
|
add: '新增',
|
||
|
edit: '修改',
|
||
|
delete: '删除'
|
||
|
};
|
||
|
|
||
|
const approStatusMap = {
|
||
|
waiting: '待审核',
|
||
|
pending: '审核中',
|
||
|
succeed: '通过',
|
||
|
rejected: '拒绝',
|
||
|
canceled: '已取消'
|
||
|
};
|
||
|
|
||
|
const stdTypeMap = {
|
||
|
0: '基础数据',
|
||
|
1: '指标数据'
|
||
|
};
|
||
|
|
||
|
const dataClasMap = {
|
||
|
'日期类': '日期类',
|
||
|
'文本类': '文本类',
|
||
|
'数值类': '数值类',
|
||
|
'金额类': '金额类',
|
||
|
'编码类': '编码类',
|
||
|
'标志类': '标志类',
|
||
|
'码值类': '码值类'
|
||
|
};
|
||
|
|
||
|
const formVisible = ref(false);
|
||
|
const formData = ref({});
|
||
|
|
||
|
const getList = async () => {
|
||
|
loading.value = true;
|
||
|
try {
|
||
|
const params = { flowId: props.flowId };
|
||
|
const res = await listStdDictAppr(params);
|
||
|
tableData.value = res.data || [];
|
||
|
} catch (e) {
|
||
|
console.error('加载失败', e);
|
||
|
} finally {
|
||
|
loading.value = false;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
watch(() => props.stdDictVisible, (newVal) => {
|
||
|
if (newVal) {
|
||
|
getList();
|
||
|
}
|
||
|
});
|
||
|
onMounted(() => {
|
||
|
if (props.flowId) {
|
||
|
getList();
|
||
|
getStdMainSelect();
|
||
|
|
||
|
}
|
||
|
});
|
||
|
const handleView = async (id) => {
|
||
|
try {
|
||
|
const res = await getStdDictAppr(id);
|
||
|
const data = res.data || {};
|
||
|
data.stdType = stdTypeMap[data.stdType] || data.stdType;
|
||
|
data.dataClas = dataClasMap[data.dataClas] || data.dataClas;
|
||
|
formData.value = data;
|
||
|
formVisible.value = true;
|
||
|
} catch (e) {
|
||
|
console.error('获取详情失败', e);
|
||
|
}
|
||
|
};
|
||
|
</script>
|
||
|
|
||
|
<style scoped>
|
||
|
.custom-form-container .el-form-item {
|
||
|
margin-bottom: 15px; /* 增加表单项间距 */
|
||
|
margin-left: 20px;
|
||
|
}
|
||
|
.changed-label,
|
||
|
.changed-value {
|
||
|
color: rgb(137, 189, 58) !important;;
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
.custom-form-container .el-form-item .el-input,
|
||
|
.custom-form-container .el-form-item .el-select {
|
||
|
width: 100%; /* 输入框和选择框宽度填满 */
|
||
|
}
|
||
|
|
||
|
.custom-form-container .el-form-item span {
|
||
|
font-size: 14px; /* 字体大小 */
|
||
|
color: #333; /* 字体颜色 */
|
||
|
}
|
||
|
|
||
|
.custom-form-item label {
|
||
|
font-weight: bold; /* 加粗标签 */
|
||
|
margin-right: 10px; /* 为标签添加右侧间距 */
|
||
|
}
|
||
|
|
||
|
.el-dialog__footer {
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.dialog-footer-btn {
|
||
|
width: 100px; /* 按钮宽度 */
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
::v-deep(.row-add) {
|
||
|
background-color: #bae7ff !important;
|
||
|
}
|
||
|
::v-deep(.row-edit) {
|
||
|
background-color: #d9f7be !important;
|
||
|
}
|
||
|
::v-deep(.row-delete) {
|
||
|
background-color: #ffa39e !important;
|
||
|
}
|
||
|
|
||
|
</style>
|