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.
302 lines
10 KiB
302 lines
10 KiB
<template>
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="tableData"
|
|
border
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column prop="stdNum" label="标准编号" align="center" />
|
|
<el-table-column prop="stdCode" label="英文名" align="center" />
|
|
<el-table-column prop="stdName" label="中文名" align="center" />
|
|
<el-table-column label="类型" prop="stdType" width="150">
|
|
<template #default="scope">
|
|
<el-tag v-if="scope.row.stdType == '0'" type="primary">基础数据</el-tag>
|
|
<el-tag v-else type="warning">指标数据</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="securityLevel" label="安全等级" align="center" />
|
|
<el-table-column prop="sourceSystem" label="来源系统" align="center" />
|
|
<el-table-column prop="codeNum" label="代码编号" align="center" />
|
|
<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 label="操作" width="100" align="center">
|
|
<template #default="scope">
|
|
<el-button @click="handleView(scope.row.id)" size="small" type="primary">查看详情</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 弹窗 -->
|
|
<el-dialog v-model="formVisible" title="标准详情" width="70%" @close="formData = {}">
|
|
<el-form :model="formData" label-position="left" ref="formRef" label-width="120px" class="custom-form-container">
|
|
<!-- 第一行：3列 -->
|
|
<el-row gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item prop="stdNum">
|
|
<template #label>
|
|
<span :class="{ 'changed-label': isChanged(formData.stdNum) }">标准编号：</span>
|
|
</template>
|
|
<span :class="{ 'changed-value': isChanged(formData.stdNum) }">{{ formatValue(formData.stdNum) }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="stdName">
|
|
<template #label>
|
|
<span :class="{ 'changed-label': isChanged(formData.stdName) }">标准中文名：</span>
|
|
</template>
|
|
<span :class="{ 'changed-value': isChanged(formData.stdName) }">{{ formatValue(formData.stdName) }}</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(formData.stdCode) }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第二行：3列 -->
|
|
<el-row gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item prop="stdMenu">
|
|
<template #label>
|
|
<span :class="{ 'changed-label': isChanged(formData.stdMenu) }">标准业务定义：</span>
|
|
</template>
|
|
<span :class="{ 'changed-value': isChanged(formData.stdMenu) }">{{ formatValue(formData.stdMenu) }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="stdType">
|
|
<template #label>
|
|
<span :class="{ 'changed-label': isChanged(formData.stdType) }">标准类型：</span>
|
|
</template>
|
|
<span :class="{ 'changed-value': isChanged(formData.stdType) }">{{ formatValue(stdTypeMap[formData.stdType] || formData.stdType) }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="stdSrc">
|
|
<template #label>
|
|
<span :class="{ 'changed-label': isChanged(formData.stdSrc) }">标准来源：</span>
|
|
</template>
|
|
<span :class="{ 'changed-value': isChanged(formData.stdSrc) }">{{ formatValue(formData.stdSrc) }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第三行：4列 -->
|
|
<el-row gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item prop="dataClas">
|
|
<template #label>
|
|
<span :class="{ 'changed-label': isChanged(formData.dataClas) }">数据类别：</span>
|
|
</template>
|
|
<span :class="{ 'changed-value': isChanged(formData.dataClas) }">{{ formatValue(dataClasMap[formData.dataClas] || formData.dataClas) }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="sourceSystem">
|
|
<template #label>
|
|
<span :class="{ 'changed-label': isChanged(formData.sourceSystem) }">来源系统：</span>
|
|
</template>
|
|
<span :class="{ 'changed-value': isChanged(formData.sourceSystem) }">{{ formatValue(formData.sourceSystem) }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="securityLevel">
|
|
<template #label>
|
|
<span :class="{ 'changed-label': isChanged(formData.securityLevel) }">安全等级：</span>
|
|
</template>
|
|
<span :class="{ 'changed-value': isChanged(formData.securityLevel) }">{{ formatValue(formData.securityLevel) }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="codeNum">
|
|
<template #label>
|
|
<span :class="{ 'changed-label': isChanged(formData.codeNum) }">代码编号：</span>
|
|
</template>
|
|
<span :class="{ 'changed-value': isChanged(formData.codeNum) }">{{ formatValue(formData.codeNum) }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第四行：2列 -->
|
|
<el-row gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item prop="bussDeptId">
|
|
<template #label>
|
|
<span :class="{ 'changed-label': isChanged(formData.bussDeptId) }">业务认责部门：</span>
|
|
</template>
|
|
<span :class="{ 'changed-value': isChanged(formData.bussDeptId) }">{{ formatValue(formData.bussDeptId) }}</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="techDeptId">
|
|
<template #label>
|
|
<span :class="{ 'changed-label': isChanged(formData.techDeptId) }">技术认责部门：</span>
|
|
</template>
|
|
<span :class="{ 'changed-value': isChanged(formData.techDeptId) }">{{ formatValue(formData.techDeptId) }}</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 { listStdMainAppr, getStdMainAppr } from '@/api/datastd/std';
|
|
|
|
const props = defineProps({
|
|
flowId: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
const isChanged = (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 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 listStdMainAppr(params);
|
|
tableData.value = res.data || [];
|
|
} catch (e) {
|
|
console.error('加载失败', e);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
watch(() => props.flowId, (newVal) => {
|
|
if (newVal) {
|
|
getList();
|
|
}
|
|
});
|
|
onMounted(() => {
|
|
if (props.flowId) {
|
|
getList();
|
|
}
|
|
});
|
|
const handleView = async (id) => {
|
|
try {
|
|
const res = await getStdMainAppr(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;
|
|
}
|
|
</style>
|