11 changed files with 675 additions and 17 deletions
@ -0,0 +1,302 @@ |
|||||
|
<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> |
Loading…
Reference in new issue