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