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