ccdi/ruoyi-ui/src/views/ccdiIntermediary/components/EditDialog.vue

<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="820px" append-to-body @close="handleClose">
    <el-form ref="formRef" :model="localForm" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="localForm.name" placeholder="请输入姓名" maxlength="100" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号" prop="personId">
            <el-input v-model="localForm.personId" placeholder="请输入证件号码" maxlength="50" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="人员类型">
            <el-select v-model="localForm.personType" placeholder="请选择人员类型" clearable style="width: 100%">
              <el-option
                v-for="item in indivTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- v-model="form.personSubType" -->
          <el-form-item label="中介子类型">
            <el-select
              v-model="localForm.personSubType"
              placeholder="请选择中介子类型"
              clearable
              style="width: 100%"
              @change="handlePersonSubTypeChange"
            >
              <el-option
                v-for="item in personSubTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="证件类型">
            <el-select v-model="localForm.idType" placeholder="请选择证件类型" clearable style="width: 100%">
              <el-option
                v-for="item in certTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="性别">
            <el-select v-model="localForm.gender" placeholder="请选择性别" clearable style="width: 100%">
              <el-option
                v-for="item in genderOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职位">
            <el-input v-model="localForm.position" placeholder="请输入职位" maxlength="100" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号码">
            <el-input v-model="localForm.mobile" placeholder="请输入手机号码" maxlength="20" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微信号">
            <el-input v-model="localForm.wechatNo" placeholder="请输入微信号" maxlength="50" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="联系地址">
        <el-input v-model="localForm.contactAddress" placeholder="请输入联系地址" maxlength="200" clearable />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所在公司">
            <el-input v-model="localForm.company" placeholder="请输入所在公司" maxlength="200" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业统一信用码">
            <el-input v-model="localForm.socialCreditCode" placeholder="请输入企业统一信用码" maxlength="50" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注">
        <el-input
          v-model="localForm.remark"
          type="textarea"
          placeholder="请输入备注"
          maxlength="500"
          :rows="3"
          show-word-limit
        />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "EditDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    form: {
      type: Object,
      default: () => ({})
    },
    indivTypeOptions: {
      type: Array,
      default: () => []
    },
    genderOptions: {
      type: Array,
      default: () => []
    },
    certTypeOptions: {
      type: Array,
      default: () => []
    },
    personSubTypeOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      localForm: {},
      rules: {
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        personId: [{ required: true, message: "证件号不能为空", trigger: "blur" }]
      }
    };
  },
  watch: {
    visible: {
      immediate: true,
      handler(val) {
        this.dialogVisible = val;
      }
    },
    dialogVisible(val) {
      this.$emit("update:visible", val);
    },
    form: {
      immediate: true,
      deep: true,
      handler(val) {
        this.localForm = { ...val };
      }
    }
  },
  methods: {
    handlePersonSubTypeChange(value) {
      const typeMappings = [
        { label: '个人', value: '本人' }
      ];
      return typeMappings.find(item => item.value === value) || null;
    },
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.$emit("submit", { ...this.localForm });
        }
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit("close");
    }
  }
};
</script>

<style scoped>
::v-deep .el-dialog {
  border-radius: 6px;
  overflow: hidden;
}

::v-deep .el-dialog__header {
  border-bottom: 1px solid #dde3ec;
  background: #ffffff;
}

::v-deep .el-dialog__body {
  background: #f8fafc;
}

::v-deep .el-form-item {
  margin-bottom: 16px;
}

::v-deep .el-input__inner,
::v-deep .el-select .el-input__inner,
::v-deep .el-textarea__inner {
  border-radius: 3px;
  border-color: #dde3ec;
}
</style>