vue-fastapi-admin/vue-fastapi-frontend/src/views/system/flow/dataStdDictAppr.vue

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