262 lines
10 KiB
Vue
262 lines
10 KiB
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> |