nursing_unit_vue/src/views/elder/elderinfo/components/GuaUpInfoForm.vue

<template>
  <div class="container2">
    <a-row>
      <a-col :span="24" >
        <a-table :dataSource="filteredTableData" :columns="columns" :pagination="false" bordered size="small"
          :rowClassName="setRowClassName">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'd1'">
              <span>{{ applyObj[record.d1] }}</span>
            </template>
            <template v-if="column.dataIndex === 'd2' && isImg(record.d1)">
              <JImageUpload :fileMax="1" :value="opeMediaAddress + record.d2" disabled></JImageUpload>
            </template>
            <template v-if="column.dataIndex === 'd3' && isImg(record.d1)">
              <JImageUpload :fileMax="1" :value="opeMediaAddress + record.d3" disabled></JImageUpload>
            </template>
            <template
              v-if="column.dataIndex === 'd2' && (record.d1 == 'orgProvince' || record.d1 == 'orgCity' || record.d1 == 'orgDistrict')">
              <span>{{ provinceOptions[record.d2] }}</span>
            </template>
            <template
              v-if="column.dataIndex === 'd3' && (record.d1 == 'orgProvince' || record.d1 == 'orgCity' || record.d1 == 'orgDistrict')">
              <span>{{ provinceOptions[record.d3] }}</span>
            </template>
            <template v-if="column.dataIndex === 'd2' && record.d1 == 'orgBuildingArea'">
              <span>{{ record.d2 }}㎡</span>
            </template>
            <template v-if="column.dataIndex === 'd3' && record.d1 == 'orgBuildingArea'">
              <span>{{ record.d3 }}㎡</span>
            </template>
            <template v-if="column.dataIndex === 'd2' && record.d1 == 'endTime'">
              <span>{{ record.d2 == '9999-12-31' ? '长期' : record.d2 }}</span>
            </template>
            <template v-if="column.dataIndex === 'd3' && record.d1 == 'endTime'">
              <span>{{ record.d3 == '9999-12-31' ? '长期' : record.d3 }}</span>
            </template>
          </template>
        </a-table>
      </a-col>
    </a-row>
    <a-form style="margin-top: 14px;height: 100px;" ref="formRef" layout="horizontal" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="审核结果" name="status" v-bind="validateInfos.status">
            <a-select v-model:value="formData.status" style="width: 200px" placeholder="请选择审核结果">
              <a-select-option value="modifyPass">审核通过</a-select-option>
              <a-select-option value="modifyFail">审核驳回</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="formData.status == 'modifyFail'">
          <a-form-item label="驳回原因" name="auditContent" v-bind="validateInfos.auditContent">
            <a-textarea :maxlength="50" show-count v-model:value="formData.auditContent" placeholder="请输入驳回原因（如驳回）"
              style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { Table as ATable, Input, Row, Col, Form } from 'ant-design-vue';
import { applyObj } from '../ElderInfo.data'
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
import { getModifyInfo, guaAudit } from '../ElderInfo.api'
import { useMessage } from '/@/hooks/web/useMessage';
import { initDictOptions } from '/@/utils/dict';

const opeMediaAddress = import.meta.env.VITE_OPE_MEDIA_ADDRESS

const formRef = ref();
const AForm = Form;
const AFormItem = Form.Item;
const useForm = Form.useForm;
const { createMessage } = useMessage();
// 表单标签布局配置
const labelCol = { span: 4 };  // 标签宽度
const wrapperCol = { span: 18 }; // 控件宽度
const isImg = (v_) => {
  return v_ == 'guardianIdCardPositive' || v_ == 'idCardNegative' || v_ == 'healthCertificatePositive' || v_ == 'bankPositive' || v_ == 'bankNegative' || v_ == 'qualification' || v_ == 'noCrimeCertificate'
}
const provinceOptions = ref({})
const formData = reactive<Record<string, any>>({
  status: undefined,
  auditContent: '',
  id: '',
  pkId: ''
});
const validatorRules = reactive({
  status: [{ required: true, message: '请选择审核结果!' },],
  auditContent: [
    {
      validator: async (_rule, value) => {
        if (formData.status === 'modifyFail' && !value) {
          return Promise.reject('请输入驳回原因!');
        }
        return Promise.resolve();
      },
    },
  ],
})
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
const tableData = ref([]);
const emit = defineEmits(['ok']);
// 计算属性，过滤掉不需要显示的字段
const filteredTableData = computed(() => {
  return tableData.value.filter(item =>
    item.d1 !== 'id'
    && item.d1 !== 'nuId'
    && item.d1 !== 'name'
    && item.d1 !== 'sex'
    && item.d1 !== 'age'
    && item.d1 !== 'idCard'
    && item.d1 !== 'dateOfBirth'
    && item.d1 !== 'national'
    && item.d1 !== 'houseAddress'
    && item.d1 !== 'avatarPath'
    && item.d1 !== 'medicalType'
    && item.d1 !== 'reimbType'
    && item.d1 !== 'medicalCard'
    && item.d1 !== 'educationLevel'
    && item.d1 !== 'maritalStatus'
    && item.d1 !== 'religiousBeliefs'
    && item.d1 !== 'idCardPositive'
    && item.d1 !== 'idCardNegative'
    && item.d1 !== 'accountBookHimself'
    && item.d1 !== 'frontMedical'
    && item.d1 !== 'negaticeMedical'
    && item.d1 !== 'content'
    && item.d1 !== 'currentState'
    && item.d1 !== 'guardianOpenId'
    // && item.d1 !== 'guardianName'
    && item.d1 !== 'relationship'
    // && item.d1 !== 'guardianIdCard'
    // && item.d1 !== 'guardianPhone'
    && item.d1 !== 'guardianDateOfBirth'
    // && item.d1 !== 'guardianHomeAddress'
    // && item.d1 !== 'guardianWorkUnit'
    && item.d1 !== 'homeAddress'
    && item.d1 !== 'delFlag'
    && item.d1 !== 'createBy'
    && item.d1 !== 'createTime'
    && item.d1 !== 'updateBy'
    && item.d1 !== 'updateTime'
    && item.d1 !== 'sysOrgCode'
    && item.d1 !== 'issuingAuthority'
    && item.d1 !== 'startTime'
    && item.d1 !== 'endTime'
    && item.d1 !== 'cardIssuing'
    && item.d1 !== 'bloodType'
    && item.d1 !== 'militaryType'
    && item.d1 !== 'guardianModifyStatus'
    && item.d1 !== 'guardianModifyContent'
    && item.d1 !== 'guardianModifyId'
    && item.d1 !== 'elderModifyStatus'
    && item.d1 !== 'elderModifyContent'
    && item.d1 !== 'elderModifyId'
    && item.d1 !== 'guardianBirthDate'
    && item.d1 !== 'guardianSex'
    && item.d1 !== 'guardianNational'
    && item.d1 !== 'guardianCardHome'
  );
});

const columns = [
  {
    title: '名称',
    dataIndex: 'd1',
    key: 'd1',
    width: 150,
  },
  {
    title: '变更前',
    dataIndex: 'd2',
    key: 'd2',
  },
  {
    title: '变更后',
    dataIndex: 'd3',
    key: 'd3',
  }
];

// 设置行类名
const setRowClassName = (record) => {
  return record.d2 !== record.d3 && record.d1 !== 'createTime' ? 'highlight-row' : '';
};

async function show(record) {
  console.log("🌊 ~ show ~ record:", record)
  let data = await getModifyInfo({ id: record.id, queryModifyType: 'gua' })
  console.log("🌊 ~ show ~ data:", data)

  formData.id = record.id
  formData.guardianModifyId = record.guardianModifyId
  formData.guardianOpenId = record.guardianOpenId
  formData.name = record.name
  formData.sysOrgCode = record.sysOrgCode

  tableData.value = data.map(item => ({
    ...item,
    // 处理null/undefined显示为空字符串
    d2: item.d2 ?? '',
    d3: item.d3 ?? ''
  }));
}

async function submitForm() {
  try {
    // 触发表单验证
    await validate();
  } catch ({ errorFields }) {
    if (errorFields) {
      const firstField = errorFields[0];
      if (firstField) {
        formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
      }
    }
    return Promise.reject(errorFields);
  }
  guaAudit(formData)
    .then((res) => {
      emit('ok');
    })
}

// 初始化numberValues
onMounted(async () => {
  const dictData = await initDictOptions('sys_category,name,id,first_letter is not null order by code asc', '');
  dictData.reduce((prev, next) => {
    if (next) {
      provinceOptions.value[next['value']] = next['text'] || next['label']
    }
    return prev;
  }, []);
});

defineExpose({
  show,
  submitForm
});
</script>

<style lang="less" scoped>
.container2 {
  // padding: 16px;
}

.antd-modal-form {
  padding: 14px;
}

:deep(.ant-table-cell) {
  padding: 8px 12px !important;
}

// 高亮行样式
:deep(.highlight-row) {
  background-color: #fff1f0 !important; // 浅红色背景
}

// 表单样式调整
:deep(.ant-form-item) {
  margin-bottom: 16px;
}

:deep(.ant-table-cell-row-hover) {
  // border: 1px solid red;
}
</style>