cbjsxt-front-master/src/components/costAudit/AuditEntityFormtDialog.vue

<template>
  <div class="formtDialog">
    <!-- 被监审单位表单弹窗组件 -->
    <CostAuditDialog
      :visible="dialogVisible"
      :title="dialogTitle"
      :width="dialogWidth"
      :close-on-click-modal="false"
      :disabled="isViewMode"
      :confirm-loading="submitting"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      @close="handleCancel"
    >
      <div class="formtDialog-content">
        <!-- 使用Element表单直接实现 -->
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="140px"
          class="form-container"
        >
          <el-row :gutter="20">
            <!-- 被监审单位名称 -->
            <el-col :span="24">
              <el-form-item label="被监审单位名称:" prop="unitName">
                <el-input
                  v-model="formData.unitName"
                  placeholder="请输入被监审单位名称"
                  :disabled="isViewMode"
                />
              </el-form-item>
            </el-col>

            <!-- 社会信用代码 和 所属区域 -->
            <el-col :span="12">
              <el-form-item label="社会信用代码:" prop="socialCreditCode">
                <el-input
                  v-model="formData.socialCreditCode"
                  placeholder="请输入社会信用代码"
                  :disabled="isViewMode"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属区域:" prop="areaCode">
                <el-cascader
                  v-model="formData.areaCode"
                  :options="districtTree"
                  :show-all-levels="false"
                  :props="districtTreeCascaderProps"
                  style="width: 100%"
                  placeholder="请选择所属区域"
                  :disabled="isViewMode"
                />
              </el-form-item>
            </el-col>

            <!-- 办公地址 -->
            <el-col :span="24">
              <el-form-item label="办公地址:" prop="address">
                <el-input
                  v-model="formData.address"
                  placeholder="请输入办公地址"
                  :disabled="isViewMode"
                />
              </el-form-item>
            </el-col>

            <!-- 主体性质 和 关联子单位 -->
            <el-col :span="12">
              <el-form-item label="主体性质:" prop="entityType">
                <el-select
                  v-model="formData.entityType"
                  placeholder="请选择主体性质"
                  style="width: 100%"
                  :disabled="isViewMode"
                >
                  <el-option
                    v-for="item in entityTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="formData.entityType != '子公司'" :span="12">
              <el-form-item label="关联子单位:" prop="relatedUnits">
                <el-select
                  v-model="formData.relatedUnits"
                  placeholder="请选择关联子单位"
                  multiple
                  style="width: 100%"
                  :disabled="isViewMode"
                >
                  <el-option
                    v-for="item in filteredUnits"
                    :key="item.unitId"
                    :label="item.unitName"
                    :value="item.unitId"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 关联监审项目 -->
            <el-col :span="24">
              <el-form-item label="关联监审项目:" prop="relatedItems">
                <el-cascader
                  v-model="formData.relatedItems"
                  :options="catalogListOptions"
                  v-bind="catalogProps"
                  style="width: 100%"
                  placeholder="请选择关联监审项目"
                  :disabled="isViewMode"
                />
              </el-form-item>
            </el-col>

            <!-- 联系人 和 联系手机 -->
            <el-col :span="12">
              <el-form-item label="联系人:" prop="contactName">
                <el-input
                  v-model="formData.contactName"
                  placeholder="请输入联系人"
                  :disabled="isViewMode"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系手机:" prop="contactMobile">
                <el-input
                  v-model="formData.contactMobile"
                  placeholder="请输入手机号码或座机号码"
                  :disabled="isViewMode"
                />
              </el-form-item>
            </el-col>

            <!-- 电子邮箱 和 邮政编码 -->
            <el-col :span="12">
              <el-form-item label="电子邮箱:" prop="email">
                <el-input
                  v-model="formData.email"
                  placeholder="请输入电子邮箱"
                  :disabled="isViewMode"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮政编码:" prop="postalCode">
                <el-input
                  v-model="formData.postalCode"
                  placeholder="请输入邮政编码"
                  :disabled="isViewMode"
                />
              </el-form-item>
            </el-col>

            <!-- 账号 和 状态 -->
            <el-col :span="12">
              <el-form-item label="账号:" prop="account">
                <el-select
                  v-model="formData.account"
                  placeholder="请选择账号"
                  style="width: 100%"
                  :disabled="isViewMode"
                  @change="handleAccountChange"
                >
                  <el-option
                    v-for="(item, index) in userList"
                    :key="index"
                    :label="item.fullname"
                    :value="item.userId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态:" prop="status">
                <el-radio-group
                  v-model="formData.status"
                  :disabled="isViewMode"
                >
                  <el-radio
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.value"
                  >
                    {{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </CostAuditDialog>
  </div>
</template>
<script>
  // 引入API接口
  import {
    getAuditedUnitDetail,
    addAuditedUnit,
    editAuditedUnit,
    getAllUnitList,
  } from '@/api/auditEntityManage'

  // 引入地区选择混入
  import { regionMixin, catalogMixin, commonMixin } from '@/mixins/useDict'
  // 引入弹窗组件
  import CostAuditDialog from '@/components/costAudit/CostAuditDialog'
  import { getAllUserList } from '@/api/uc'
  export default {
    name: 'AuditEntityFormtDialog',
    // 注册组件
    components: {
      CostAuditDialog,
    },
    // 使用混入
    mixins: [regionMixin, catalogMixin, commonMixin],
    // 组件属性
    props: {
      // 弹窗可见状态
      dialogVisible: {
        type: Boolean,
        default: false,
      },
      // 弹窗标题
      dialogTitle: {
        type: String,
        default: '',
      },
      // 弹窗宽度
      dialogWidth: {
        type: String,
        default: '50%',
      },
      // 单位ID（编辑/查看模式下使用）
      unitId: {
        type: String,
        default: '',
      },
      // 是否为查看模式
      isViewMode: {
        type: Boolean,
        default: false,
      },
    },
    // 组件数据
    data() {
      return {
        // 提交状态
        submitting: false,
        // 所有单位列表
        allUnits: [],
        // 主体性质选项
        entityTypeOptions: [
          {
            label: '母公司',
            value: '母公司',
          },
          {
            label: '本部',
            value: '本部',
          },
          {
            label: '子公司',
            value: '子公司',
          },
        ],
        // 账号列表
        userList: [],
        // 状态选项
        statusOptions: [
          {
            label: '启用',
            value: 1,
          },
          {
            label: '停用',
            value: 0,
          },
        ],
        // 表单数据
        formData: {
          unitId: '', // 单位ID
          unitName: '', // 单位名称
          socialCreditCode: '', // 社会信用代码
          areaCode: [], // 区域代码
          address: '', // 办公地址
          entityType: '', // 主体性质
          relatedUnits: [], // 关联子单位
          relatedItems: [], // 关联监审项目
          contactName: '', // 联系人
          contactMobile: '', // 联系手机
          email: '', // 电子邮箱
          postalCode: '', // 邮政编码
          account: '', // 账号
          password: '', // 密码
          status: 1, // 状态（默认为启用）
        },
        // 表单验证规则
        formRules: {
          unitName: [
            {
              required: true,
              message: '请输入被监审单位名称',
              trigger: 'blur',
            },
            {
              min: 1,
              max: 30,
              message: '单位名称长度应在30个字符之间',
              trigger: 'blur',
            },
            {
              pattern: /^[\u4e00-\u9fa5a-zA-Z0-9()（）\-\_\s]*$/,
              message: '单位名称只能包含中英文、数字、括号、横线、下划线和空格',
              trigger: 'blur',
            },
          ],
          socialCreditCode: [
            { required: true, message: '请输入社会信用代码', trigger: 'blur' },
            { len: 18, message: '社会信用代码应为18位', trigger: 'blur' },
            {
              pattern: /^[0-9A-Za-z]{18}$/,
              message: '社会信用代码只能包含大写字母和数字',
              trigger: 'blur',
            },
            // 社会信用代码校验规则
            {
              validator: (rule, value, callback) => {
                // 社会信用代码第1位：登记管理部门代码
                const firstChar = value.charAt(0)
                if (!/^[1-9A-Za-z]$/.test(firstChar)) {
                  callback(new Error('社会信用代码格式不正确'))
                  return
                }
                callback()
              },
              trigger: 'blur',
            },
          ],
          areaCode: [
            { required: true, message: '请选择所属区域', trigger: 'change' },
          ],
          address: [
            { required: true, message: '请输入办公地址', trigger: 'blur' },
            {
              min: 1,
              max: 200,
              message: '办公地址长度应在1-200个字符之间',
              trigger: 'blur',
            },
            {
              pattern: /^[\u4e00-\u9fa5a-zA-Z0-9\-\_\.\s\#\/\,\(\)（）]*$/,
              message:
                '地址只能包含中英文、数字、横线、下划线、点、空格、井号、斜杠、逗号和括号',
              trigger: 'blur',
            },
          ],
          entityType: [
            { required: true, message: '请选择主体性质', trigger: 'change' },
          ],
          relatedItems: [
            {
              required: true,
              message: '请至少选择一个关联监审项目',
              trigger: 'change',
            },
            {
              type: 'array',
              min: 1,
              message: '请至少选择一个关联监审项目',
              trigger: 'change',
            },
          ],
          contactName: [
            { required: true, message: '请输入联系人', trigger: 'blur' },
            {
              min: 1,
              max: 50,
              message: '联系人长度应在1-50个字符之间',
              trigger: 'blur',
            },
            {
              pattern: /^[\u4e00-\u9fa5a-zA-Z\s]*$/,
              message: '联系人只能包含中英文和空格',
              trigger: 'blur',
            },
          ],
          contactMobile: [
            { required: true, message: '请输入联系手机', trigger: 'blur' },
            {
              pattern: /^(1[3-9]\d{9}|(0\d{2,3}-?\d{7,8}|\d{7,8}))$/,
              message: '请输入正确的手机号码或座机号码',
              trigger: 'blur',
            },
          ],
          email: [
            { required: true, message: '请输入电子邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
            {
              min: 1,
              max: 100,
              message: '邮箱长度应在1-100个字符之间',
              trigger: 'blur',
            },
          ],
          postalCode: [
            { required: true, message: '请输入邮政编码', trigger: 'blur' },
            {
              pattern: /^\d{6}$/,
              message: '邮政编码应为6位数字',
              trigger: 'blur',
            },
            { len: 6, message: '邮政编码应为6位数字', trigger: 'blur' },
          ],
          account: [
            { required: true, message: '请选择账号', trigger: 'change' },
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'change' },
          ],
        },
      }
    },
    // 计算属性
    computed: {
      // 过滤后的单位列表 - 排除当前单位
      filteredUnits() {
        return this.formData.unitName
          ? this.allUnits.filter(
              (item) => item.unitName !== this.formData.unitName
            )
          : this.allUnits
      },
    },
    // 监听器
    watch: {
      // 监听弹窗可见状态变化
      dialogVisible(newVal) {
        if (newVal) {
          // 弹窗打开时加载选项数据
          this.loadOpts()
          // 根据是否有unitId判断是编辑模式还是新增模式
          if (this.unitId) {
            // 编辑模式：加载单位详情
            this.loadUnitDetail()
          } else {
            // 新增模式：重置表单
            this.resetForm()
          }
        }
      },
    },
    // 组件方法
    methods: {
      getUser() {
        getAllUserList()
          .then((res) => {
            this.userList = res.value || []
          })
          .catch(() => {})
      },
      // 重置表单
      resetForm() {
        this.formData = {
          unitId: '',
          unitName: '',
          socialCreditCode: '',
          areaCode: ['140000'], // 默认选择山西省
          address: '',
          entityType: '',
          relatedUnits: [],
          relatedItems: [],
          contactName: '',
          contactMobile: '',
          email: '',
          postalCode: '',
          account: '',
          password: '',
          status: 1,
        }
        // 确保表单重置生效
        this.$nextTick(() => {
          if (this.$refs.formRef) {
            this.$refs.formRef.resetFields()
          }
        })
      },
      // 加载选项数据
      loadOpts() {
        // 加载所有单位列表
        getAllUnitList({ unitId: this.formData.unitId }).then((res) => {
          this.allUnits = res.value || []
          // 过滤掉状态为停用的数据
          this.allUnits = this.allUnits.filter((item) => item.status == 1)
        })
        this.getUser()
      },
      // 加载单位详情
      loadUnitDetail() {
        getAuditedUnitDetail({ unitId: this.unitId }).then((res) => {
          // 处理级联选择器多选回显数据
          const result = this.formatRelatedItemsForDisplay({
            relatedItems: {
              value: res.value.relatedItems,
              options: this.catalogListOptions,
              id: 'id',
              parentId: 'parentId',
            },
          })
          // 格式化接口返回的数据
          this.formData = {
            ...res.value,
            // 将逗号分隔的字符串转换为数组
            relatedUnits: res.value.relatedUnits
              ? res.value.relatedUnits.split(',')
              : [],
            relatedItems: result.relatedItems,
            // 构建区域级联数据
            areaCode: [
              res.value.province,
              ...(res.value.areaLevel >= 1 ? [res.value.city] : []),
              ...(res.value.areaLevel === 2 ? [res.value.county] : []),
            ].filter(Boolean),
          }
        })
      },
      // 处理账号变更
      handleAccountChange(val) {
        if (val) {
          // 根据选择的账号自动填充密码
          const selectedAccount = this.userList.find(
            (item) => item.userId === val
          )
          if (selectedAccount) {
            this.$set(this.formData, 'password', selectedAccount.password)
          }
        }
      },
      // 处理确认提交
      async handleConfirm() {
        // 防止重复提交
        if (this.submitting) {
          this.$message.warning('提交中，请稍后...')
          return
        }

        try {
          // 调用表单验证
          await this.$refs.formRef.validate()
          this.submitting = true

          // 处理级联选择器多选数据
          const resultData = this.extractLastLevelValues({
            relatedItems: this.formData.relatedItems,
          })
          // 构建提交数据
          const submitData = {
            ...this.formData,
            // 将数组转换为逗号分隔的字符串
            relatedUnits: this.formData.relatedUnits
              ? this.formData.relatedUnits.join(',')
              : '',
            relatedItems: this.formData.relatedItems
              ? resultData.relatedItems
              : '',
            // 计算区域级别和区域代码
            areaLevel:
              this.formData.areaCode.length > 0
                ? this.formData.areaCode.length - 1
                : '',
            areaCode:
              this.formData.areaCode.length > 0
                ? this.formData.areaCode[this.formData.areaCode.length - 1]
                : '',
          }

          // 根据是否有unitId判断是添加还是修改操作
          let result
          if (!this.formData.unitId) {
            // 添加操作
            result = await addAuditedUnit(submitData)
          } else {
            // 修改操作
            result = await editAuditedUnit(submitData)
          }

          // 处理操作结果
          if (result.code === 200) {
            const action = this.formData.unitId ? '修改' : '添加'
            this.$message.success(`${action}成功`)
            // 成功后将表单数据传递给父组件
            this.$emit('confirm', this.formData, result.value)
          }
        } catch (error) {
          console.error('提交失败:', error)
          this.$message.error('表单验证失败，请检查输入')
        } finally {
          // 无论成功失败，都重置提交状态
          this.submitting = false
        }
      },
      // 处理取消/关闭
      handleCancel() {
        // 通知父组件关闭弹窗
        this.$emit('update:dialogVisible', false)
      },
    },
  }
</script>
<style scoped>
  .formtDialog-content {
    padding: 20px 0;
  }

  .form-container {
    width: 100%;
  }
</style>