chem_mes/mes-ui/mes-ui-admin-vue3/src/views/biz/supplier/SupplierForm.vue

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1200px">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="110px"
      v-loading="formLoading"
    >
      <!-- 基础信息 -->
      <div class="form-section">
        <div class="section-title">基础信息</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="供应商编码" prop="supplierNo">
              <el-input v-model="formData.supplierNo" placeholder="请输入供应商编码" :disabled="formType === 'update'" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商名称" prop="supplierName">
              <el-input v-model="formData.supplierName" placeholder="请输入供应商名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="简称" prop="supplierSimName">
              <el-input v-model="formData.supplierSimName" placeholder="请输入简称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="供应商类型" prop="supplierType">
              <el-select v-model="formData.supplierType" placeholder="请选择供应商类型">
                <el-option
                  v-for="dict in getStrDictOptions(DICT_TYPE.SUPPLIER_TYPE)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商等级" prop="supplierReg">
              <el-select v-model="formData.supplierReg" placeholder="请选择供应商等级">
                <el-option
                  v-for="dict in getStrDictOptions(DICT_TYPE.SUPPLIER_GRADE)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公司税号" prop="comTaxNumber">
              <el-input v-model="formData.comTaxNumber" placeholder="请输入公司税号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="启用状态" prop="enabledStatus">
              <el-select v-model="formData.enabledStatus" placeholder="请选择启用状态">
                <el-option
                  v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_STATUS)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商状态" prop="status">
              <el-select v-model="formData.status" placeholder="请选择供应商状态">
                <el-option
                  v-for="dict in getIntDictOptions(DICT_TYPE.SUPPLIER_STATUS)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否黑名单" prop="isBlacklist">
              <el-select v-model="formData.isBlacklist" placeholder="请选择是否黑名单">
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" :rows="2" />
        </el-form-item>
      </div>

      <!-- 联系方式 -->
      <div class="form-section">
        <div class="section-title">联系方式</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联系人1" prop="contact1">
              <el-input v-model="formData.contact1" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话1" prop="conPhone1">
              <el-input v-model="formData.conPhone1" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系地址1" prop="conAddress1">
              <el-input v-model="formData.conAddress1" placeholder="请输入联系地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联系人2" prop="contact2">
              <el-input v-model="formData.contact2" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话2" prop="conPhone2">
              <el-input v-model="formData.conPhone2" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系地址2" prop="conAddress2">
              <el-input v-model="formData.conAddress2" placeholder="请输入联系地址" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 银行信息 -->
      <div class="form-section">
        <div class="section-title">银行信息</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="开户地区" prop="accountRegion">
              <el-input v-model="formData.accountRegion" placeholder="请输入开户地区" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户银行" prop="accountBank">
              <el-input v-model="formData.accountBank" placeholder="请输入开户银行" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户账号" prop="accountNo">
              <el-input v-model="formData.accountNo" placeholder="请输入开户账号" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">保 存</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getStrDictOptions, getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import * as SupplierApi from '@/api/biz/supplier'

const { t } = useI18n()
const message = useMessage()

const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')
const formData = ref({
  id: undefined,
  supplierNo: undefined,
  supplierName: undefined,
  supplierSimName: undefined,
  supplierType: undefined,
  supplierReg: undefined,
  contact1: undefined,
  conPhone1: undefined,
  conAddress1: undefined,
  contact2: undefined,
  conPhone2: undefined,
  conAddress2: undefined,
  comTaxNumber: undefined,
  accountRegion: undefined,
  accountBank: undefined,
  accountNo: undefined,
  remark: undefined,
  enabledStatus: 0,
  status: 1,
  isBlacklist: 0,
})
const formRules = reactive({
  supplierNo: [{ required: true, message: '请输入供应商编码', trigger: 'blur' }],
  supplierName: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
  supplierType: [{ required: true, message: '请选择供应商类型', trigger: 'change' }],
  enabledStatus: [{ required: true, message: '请选择启用状态', trigger: 'change' }],
})
const formRef = ref()

const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  if (id) {
    formLoading.value = true
    try {
      const data = await SupplierApi.getSupplier(id)
      if (data.enabledStatus !== undefined && data.enabledStatus !== null) {
        data.enabledStatus = String(data.enabledStatus)
      }
      if (data.status !== undefined && data.status !== null) {
        data.status = String(data.status)
      }
      if (data.isBlacklist !== undefined && data.isBlacklist !== null) {
        data.isBlacklist = String(data.isBlacklist)
      }
      formData.value = data
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open })

const emit = defineEmits(['success'])
const submitForm = async () => {
  await formRef.value.validate()
  formLoading.value = true
  try {
    const data = formData.value as unknown as SupplierApi.SupplierVO
    if (formType.value === 'create') {
      await SupplierApi.createSupplier(data)
      message.success(t('common.createSuccess'))
    } else {
      await SupplierApi.updateSupplier(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}

const resetForm = () => {
  formData.value = {
    id: undefined,
    supplierNo: undefined,
    supplierName: undefined,
    supplierSimName: undefined,
    supplierType: undefined,
    supplierReg: undefined,
    contact1: undefined,
    conPhone1: undefined,
    conAddress1: undefined,
    contact2: undefined,
    conPhone2: undefined,
    conAddress2: undefined,
    comTaxNumber: undefined,
    accountRegion: undefined,
    accountBank: undefined,
    accountNo: undefined,
    remark: undefined,
    enabledStatus: 0,
    status: 1,
    isBlacklist: 0,
  }
  formRef.value?.resetFields()
}
</script>
<style scoped>
.form-section {
  margin-bottom: 24px;
}
.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #606266;
  margin-bottom: 16px;
  padding-left: 8px;
  border-left: 3px solid #409eff;
}
</style>