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

<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>