chem_mes/jnpf-java-boot/jnpf-web/src/views/example/supplier/form.vue

<template>
  <el-dialog :title="!dataForm.id ? '新建供应商' : '编辑供应商'" :visible.sync="visible"
             :close-on-click-modal="false" width="1200px" class="JNPF-dialog JNPF-dialog_center long-title"
             lock-scroll>
    <el-form ref="formRef" :model="dataForm" :rules="dataRule" size="small" label-width="100px" label-position="right">
      <template v-if="!loading">
        <el-divider content-position="left">基础信息</el-divider>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="供应商编码" prop="supplierNo">
              <JnpfInput v-model="dataForm.supplierNo" placeholder="请输入供应商编码" clearable :disabled="!!dataForm.id" :style="{ width: '100%' }"></JnpfInput>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商名称" prop="supplierName">
              <JnpfInput v-model="dataForm.supplierName" placeholder="请输入供应商名称" clearable :style="{ width: '100%' }"></JnpfInput>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="简称" prop="supplierSimName">
              <JnpfInput v-model="dataForm.supplierSimName" placeholder="请输入简称" clearable :style="{ width: '100%' }"></JnpfInput>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="供应商类型" prop="supplierType">
              <JnpfSelect v-model="dataForm.supplierType" placeholder="请选择" :options="supplierTypeOptions" :props="dictProps" clearable :style="{ width: '100%' }"></JnpfSelect>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商等级" prop="supplierReg">
              <JnpfSelect v-model="dataForm.supplierReg" placeholder="请选择" :options="supplierRegOptions" :props="dictProps" clearable :style="{ width: '100%' }"></JnpfSelect>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公司税号" prop="comTaxNumber">
              <JnpfInput v-model="dataForm.comTaxNumber" placeholder="请输入公司税号" clearable :style="{ width: '100%' }"></JnpfInput>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="启用状态" prop="enabledStatus">
              <JnpfSelect v-model="dataForm.enabledStatus" placeholder="请选择" :options="enabledStatusOptions" :props="dictProps" clearable :style="{ width: '100%' }"></JnpfSelect>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商状态" prop="status">
              <JnpfSelect v-model="dataForm.status" placeholder="请选择" :options="statusOptions" :props="dictProps" clearable :style="{ width: '100%' }"></JnpfSelect>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否黑名单" prop="isBlacklist">
              <JnpfSelect v-model="dataForm.isBlacklist" placeholder="请选择" :options="isBlacklistOptions" :props="dictProps" clearable :style="{ width: '100%' }"></JnpfSelect>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <JnpfTextarea v-model="dataForm.remark" placeholder="请输入备注" :autoSize="{ minRows: 2, maxRows: 4 }" type="textarea" :style="{ width: '100%' }"></JnpfTextarea>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">联系方式</el-divider>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="联系人1" prop="contact1">
              <JnpfInput v-model="dataForm.contact1" placeholder="请输入联系人" clearable :style="{ width: '100%' }"></JnpfInput>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话1" prop="conPhone1">
              <JnpfInput v-model="dataForm.conPhone1" placeholder="请输入联系电话" clearable :style="{ width: '100%' }"></JnpfInput>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系地址1" prop="conAddress1">
              <JnpfInput v-model="dataForm.conAddress1" placeholder="请输入联系地址" clearable :style="{ width: '100%' }"></JnpfInput>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="联系人2" prop="contact2">
              <JnpfInput v-model="dataForm.contact2" placeholder="请输入联系人" clearable :style="{ width: '100%' }"></JnpfInput>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话2" prop="conPhone2">
              <JnpfInput v-model="dataForm.conPhone2" placeholder="请输入联系电话" clearable :style="{ width: '100%' }"></JnpfInput>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系地址2" prop="conAddress2">
              <JnpfInput v-model="dataForm.conAddress2" placeholder="请输入联系地址" clearable :style="{ width: '100%' }"></JnpfInput>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">银行信息</el-divider>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="开户地区" prop="accountRegion">
              <JnpfInput v-model="dataForm.accountRegion" placeholder="请输入开户地区" clearable :style="{ width: '100%' }"></JnpfInput>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户银行" prop="accountBank">
              <JnpfInput v-model="dataForm.accountBank" placeholder="请输入开户银行" clearable :style="{ width: '100%' }"></JnpfInput>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户账号" prop="accountNo">
              <JnpfInput v-model="dataForm.accountNo" placeholder="请输入开户账号" clearable :style="{ width: '100%' }"></JnpfInput>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">保 存</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getSupplierInfo, createSupplier, updateSupplier, supplierOptions} from "./supplier";

export default {
  data() {
    return {
      visible: false,
      loading: false,
      btnLoading: false,
      dataForm: {
        id: "",
        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: "1",
        status: "1",
        isBlacklist: "0",
      },
      dataRule: {
        supplierNo: [
          {required: true, message: "请输入供应商编码", trigger: "blur"},
        ],
        supplierName: [
          {required: true, message: "请输入供应商名称", trigger: "blur"},
        ],
        supplierType: [
          {required: true, message: "请选择供应商类型", trigger: "change"},
        ],
        enabledStatus: [
          {required: true, message: "请选择启用状态", trigger: "change"},
        ],
     
      },
      supplierTypeOptions: supplierOptions.supplierType,
      supplierRegOptions: supplierOptions.supplierReg,
      statusOptions: supplierOptions.supplierStatus,
      enabledStatusOptions: [
        {fullName: "启用", id: "1"},
        {fullName: "未启用", id: "2"},
      ],
      isBlacklistOptions: [
        {fullName: "否", id: "0"},
        {fullName: "是", id: "1"},
      ],
      dictProps: {label: "fullName", value: "id"},
    };
  },
  methods: {
    init(id) {
      this.dataForm.id = id || "";
      this.visible = true;
      this.loading = true;
      this.$nextTick(() => {
        this.$refs.formRef.resetFields();
        if (this.dataForm.id) {
          getSupplierInfo(this.dataForm.id).then((res) => {
            this.dataForm = res.data;
            this.loading = false;
          });
        } else {
          this.loading = false;
        }
      });
    },
    dataFormSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          const promise = this.dataForm.id
            ? updateSupplier(this.dataForm.id, this.dataForm)
            : createSupplier(this.dataForm);
          promise
            .then((res) => {
              this.btnLoading = false;
              this.$message({
                message: res.msg || "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                },
              });
            })
            .catch(() => {
              this.btnLoading = false;
            });
        }
      });
    },
    handleClose() {
      this.visible = false;
      this.$emit('refresh', true);
      this.resetDataForm();
    },
    resetDataForm() {
      this.dataForm = {
        id: "",
        supplierNo: undefined,
        supplierName: undefined,
        supplierSimName: undefined,
        supplierType: undefined,
        supplierReg: undefined,
        contact1: undefined,
        conPhone1: undefined,
        conAddress1: undefined,
        contact2: undefined,
        conPhone2: undefined,
        conAddress2: undefined,
        bankName: undefined,
        bankAccount: undefined,
        taxNo: undefined,
        remark: undefined,
        enabledStatus: "1",
        status: "1",
        isBlacklist: "0",
      };
    },
  },
};
</script>