501 lines
18 KiB
Vue
501 lines
18 KiB
Vue
<template>
|
|
<div >
|
|
<el-form ref="form" size="mini" :model="form" :rules="rules" label-width="100px">
|
|
<el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
|
|
<!-- <el-col :span="8">
|
|
<el-form-item label="客户编码" prop="customerCode">
|
|
<el-input v-model="form.customerCode" placeholder="自动生成" disabled />
|
|
</el-form-item>
|
|
</el-col> -->
|
|
<el-col :span="10">
|
|
<el-form-item label="客户名称" prop="customerName">
|
|
<el-input v-model="form.customerName" placeholder="" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="英文简称" prop="customerNameEn">
|
|
<el-input v-model="form.customerNameEn" placeholder="请输入英文简称" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
</el-col>
|
|
|
|
<el-col :span="8">
|
|
<el-form-item label="联系人" prop="contact">
|
|
<el-input v-model="form.contact" placeholder="" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="手机号码" prop="phone" >
|
|
<el-input v-model="form.phone" placeholder="" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<!-- <el-col :span="8">
|
|
<el-form-item label="结算类型" prop="settledType">
|
|
<el-select v-model="form.settledType" placeholder="请选择">
|
|
<el-option
|
|
v-for="dict in dict.type.emis_cus_settled_type"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col> -->
|
|
<!-- <el-col :span="8">
|
|
<el-form-item label="称呼" prop="nickName">
|
|
<el-input v-model="form.nickName" placeholder="请输入称呼" />
|
|
</el-form-item>
|
|
</el-col> -->
|
|
|
|
|
|
<el-col :span="8">
|
|
<el-form-item label="邮箱" prop="email">
|
|
<el-input v-model="form.email" placeholder="请输入email" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- <el-col :span="8">
|
|
<el-form-item label="手机号" prop="mobile">
|
|
<el-input v-model="form.mobile" placeholder="请输入手机号" />
|
|
</el-form-item>
|
|
</el-col> -->
|
|
<!-- <el-col :span="8">
|
|
<el-form-item label="客户类型" prop="customerType">
|
|
<el-input v-model="form.customerType" placeholder="请输入客户类型" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="8">
|
|
<el-form-item label="用户类型" prop="userType">
|
|
<el-input v-model="form.userType" placeholder="请输入用户类型" />
|
|
</el-form-item>
|
|
</el-col> -->
|
|
<el-col :span="8">
|
|
<el-form-item label="月结卡号" prop="monthlyPayCode">
|
|
<el-input v-model="form.monthlyPayCode" placeholder="月结卡号" :disabled="form.id!=null" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="首次签约日期" prop="firstSigningDay">
|
|
<el-date-picker
|
|
style="width: 100%;"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
v-model="form.firstSigningDay"
|
|
type="date"
|
|
placeholder="首次签约日期"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="所属国家" prop="country">
|
|
<CountryPicker :placeholder="$t('所属国家')" v-model="form.country" ></CountryPicker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<el-form-item label="省市区" prop="province">
|
|
<div style="display: inline-flex">
|
|
<ProvincePicker v-model="form.province" :countryCode="form.country" ></ProvincePicker>
|
|
<CityPicker v-model="form.city" :parentCode="form.province" ></CityPicker>
|
|
<DistrictPicker v-model="form.county" :parentCode="form.city" ></DistrictPicker>
|
|
<!-- <TownPicker v-model="form.town" :parentCode="form.county" ></TownPicker> -->
|
|
</div>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="24">
|
|
<el-form-item label="地址" prop="address">
|
|
<el-input v-model="form.address" type="textarea" placeholder="请输入地址" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="账期(天)" prop="creditPeriod">
|
|
<el-input-number v-model="form.creditPeriod" placeholder="账期(天)" :min="0" :max="365" :controls="false" :precision="0"></el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="账单日" prop="settleDay">
|
|
<el-input-number v-model="form.settleDay" placeholder="账单日" :min="1" :max="31" :controls="false" :precision="0"></el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<!-- <el-col :span="8">
|
|
<el-form-item label="专属业务员" prop="opEmpCode" >
|
|
<EmisUserSimplePicker0 :placeholder="$t('专属业务员')" v-model="form.opEmpCode" ></EmisUserSimplePicker0>
|
|
</el-form-item>
|
|
</el-col> -->
|
|
<el-col :span="8">
|
|
<el-form-item label="主所属网点" prop="ownerSite">
|
|
<EmisSiteSimplePicker :placeholder="$t('所属站点')" v-model="form.ownerSite" ></EmisSiteSimplePicker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="回款联系人" prop="payee" >
|
|
<PayeePicker :placeholder="$t('回款联系人')" v-model="form.payee" ></PayeePicker>
|
|
|
|
<!-- <EmisUserSimplePicker1 :placeholder="$t('回款联系人')" :siteCode="form.ownerSite" v-model="form.payee" ></EmisUserSimplePicker1> -->
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<!-- postCode="OP" -->
|
|
<el-form-item label="销售联系人" prop="salesmen" >
|
|
<SalemanPicker :placeholder="$t('销售联系人')" v-model="form.salesmen" ></SalemanPicker>
|
|
<!-- <EmisUserSimplePicker2 :placeholder="$t('销售联系人')" :siteCode="form.ownerSite" v-model="form.salesmen" ></EmisUserSimplePicker2> -->
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="销售主管" prop="salesExecutive" >
|
|
<EmpNamePicker3 :placeholder="$t('销售主管')" v-model="form.salesExecutive" ></EmpNamePicker3>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="销售支持" prop="salesSupport" >
|
|
<EmpNamePicker4 :placeholder="$t('销售支持')" v-model="form.salesSupport" ></EmpNamePicker4>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<!-- postCode="OP" -->
|
|
<el-form-item label="业务网点范围" prop="bizSite" >
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="handleSelectSite"
|
|
>选择网点</el-button>
|
|
<el-input v-model="form.bizSiteName" rows="5" type="textarea" disabled placeholder="" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- <el-col :span="8">
|
|
<el-form-item label="启用状态" prop="status">
|
|
<el-input v-model="form.status" placeholder="请输入启用状态" />
|
|
</el-form-item>
|
|
</el-col> -->
|
|
|
|
<el-col :span="12">
|
|
<el-form-item label="开通OMS" prop="blOpenOms" >
|
|
<el-radio-group v-model="form.blOpenOms">
|
|
<el-radio :label="'1'">是</el-radio>
|
|
<el-radio :label="'0'">否</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<el-form-item label="是否短信" prop="blSms">
|
|
<el-radio-group v-model="form.blSms">
|
|
<el-radio :label="'1'">是</el-radio>
|
|
<el-radio :label="'0'">否</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="启用状态" prop="status">
|
|
<el-radio-group v-model="form.status">
|
|
<el-radio :label="'1'">启用</el-radio>
|
|
<el-radio :label="'0'">停用</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<!--
|
|
<el-col :span="8">
|
|
<el-form-item label="排序" prop="orderNum">
|
|
<el-input v-model="form.orderNum" placeholder="请输入排序" />
|
|
</el-form-item>
|
|
</el-col> -->
|
|
<el-col :span="24">
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
</el-form>
|
|
|
|
<div style="text-align: center;margin-bottom: 10px;">
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
|
|
<el-dialog title="选择网点" :visible.sync="openSiteSelectTreeForm" width="40%" :destroy-on-close="true" v-dialogDrag append-to-body>
|
|
<!-- <EmisSiteSelectTreePicker :selectSiteCode="form.bizSite" :selectSiteName="form.bizSiteName" @on-changed="onSelectSiteTreeCheckChange" @on-cancel="onSelectSiteTreeCheckChange" ></EmisSiteSelectTreePicker> -->
|
|
<EmisSiteSelectTreePicker2 :readOnly="true" :selectSiteCode="form.bizSite" :selectSiteName="form.bizSiteName" @on-changed="onSelectSiteTreeCheckChange" @on-cancel="onSelectSiteTreeCheckChange" ></EmisSiteSelectTreePicker2>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getEmisCustomerUser, addMonthUser, editMonthUser } from "@/api/emis/emisCustomerUser";
|
|
import CountryPicker from '@/views/emis/EmisBaseTools/CountryPicker.vue';
|
|
import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
|
|
import ProvincePicker from '@/views/emis/EmisBaseTools/ProvincePicker.vue';
|
|
import CityPicker from '@/views/emis/EmisBaseTools/CityPicker.vue';
|
|
import DistrictPicker from '@/views/emis/EmisBaseTools/DistrictPicker.vue';
|
|
|
|
|
|
import EmisUserSimplePicker0 from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
|
|
import EmisUserSimplePicker1 from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
|
|
import EmisUserSimplePicker2 from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
|
|
|
|
import EmisSiteSelectTreePicker from '@/views/emis/EmisBaseTools/EmisSiteSelectTreePicker.vue';
|
|
import EmisSiteSelectTreePicker2 from '@/views/emis/EmisBaseTools/EmisSiteSelectTreePicker2.vue';
|
|
|
|
import PayeePicker from '@/views/emis/EmisBaseTools/PayeePicker.vue';
|
|
import SalemanPicker from '@/views/emis/EmisBaseTools/SalemanPicker.vue';
|
|
import EmpNamePicker3 from '@/views/emis/EmisBaseTools/EmpNamePicker.vue';
|
|
import EmpNamePicker4 from '@/views/emis/EmisBaseTools/EmpNamePicker.vue';
|
|
|
|
|
|
export default {
|
|
name: "emisCustomerUserForm",
|
|
props:{
|
|
id:{
|
|
type:[Number,Array]
|
|
},
|
|
customerType:{
|
|
type:[Number,String],
|
|
required: true
|
|
}
|
|
},
|
|
components: {
|
|
PayeePicker,SalemanPicker,
|
|
EmpNamePicker3,EmpNamePicker4,
|
|
CountryPicker,
|
|
EmisSiteSimplePicker,ProvincePicker,CityPicker,DistrictPicker,
|
|
EmisUserSimplePicker0,EmisUserSimplePicker1,EmisUserSimplePicker2,
|
|
EmisSiteSelectTreePicker,EmisSiteSelectTreePicker2
|
|
},
|
|
dicts: ['emis_cus_settled_type'],
|
|
data() {
|
|
return {
|
|
openSiteSelectTreeForm:false,
|
|
emisCustomerUserOptions: [],
|
|
// 遮罩层
|
|
loading: true,
|
|
// 表单参数
|
|
form: {},
|
|
// 表单校验
|
|
rules: {
|
|
// company: [
|
|
// { required: true, message: "客户名称不能为空", trigger: "blur" }
|
|
// ],
|
|
customerName: [
|
|
{ required: true, message: "客户名称不能为空", trigger: "blur" }
|
|
],
|
|
contact: [
|
|
{ required: true, message: "联系人不能为空", trigger: "blur" }
|
|
],
|
|
phone: [
|
|
{ required: true, message: "电话不能为空", trigger: "blur" }
|
|
],
|
|
customerType: [
|
|
{ required: true, message: "客户类型不能为空", trigger: "blur" }
|
|
],
|
|
settledType: [
|
|
{ required: true, message: "结算类型不能为空", trigger: "blur" }
|
|
],
|
|
monthlyPayCode: [
|
|
{ required: true, message: "月结账号不能为空", trigger: "blur" }
|
|
],
|
|
ownerSite: [
|
|
{ required: true, message: "归属站点不能为空", trigger:["blur",'change'] }
|
|
],
|
|
country: [
|
|
{ required: true, message: "国家不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
province: [
|
|
{ required: true, message: "省份不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
address: [
|
|
{ required: true, message: "地址不能为空", trigger: "blur" }
|
|
],
|
|
status: [
|
|
{ required: true, message: "启用状态不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
payee: [
|
|
{ required: true, message: "回款联系人不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
salesmen: [
|
|
{ required: true, message: "销售联系人不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
salesExecutive:[
|
|
{ required: true, message: "销售主管不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
blOpenOms: [
|
|
{ required: true, message: "是否开通oms不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
blSms: [
|
|
{ required: true, message: "是否短信不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
opEmpCode: [
|
|
{ required: true, message: "专属业务员不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
creditPeriod: [
|
|
{ required: true, message: "账期不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
settleDay: [
|
|
{ required: true, message: "账单日不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
firstSigningDay: [
|
|
{ required: true, message: "首次签约日期不能为空", trigger: ["blur",'change'] }
|
|
],
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
"id": {
|
|
handler (newValue, oldValue) {
|
|
this.id = newValue;
|
|
this.initData();
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
created() {
|
|
this.initData();
|
|
},
|
|
|
|
methods: {
|
|
handleSelectSite(){
|
|
this.openSiteSelectTreeForm=true;
|
|
},
|
|
onSelectSiteTreeCheckChange(item){
|
|
this.openSiteSelectTreeForm=false;
|
|
if(item!=null){
|
|
this.form.bizSiteName=item.selectSiteNameStr;
|
|
this.form.bizSite=item.selectSiteCodeStr;
|
|
}
|
|
},
|
|
validateMuti (rule, value, callback) {
|
|
if (!this.form.province) {
|
|
callback(new Error("省份不能为空"));
|
|
}
|
|
else {
|
|
callback();
|
|
}
|
|
},
|
|
initData() {
|
|
if(this.id !=null) {
|
|
this.loading = true;
|
|
getEmisCustomerUser(this.id).then(response => {
|
|
this.form = response.data;
|
|
this.loading = false;
|
|
});
|
|
}else{
|
|
this.reset();
|
|
}
|
|
},
|
|
// 取消按钮
|
|
cancel() {
|
|
this.reset();
|
|
this.$emit("on-cancel");
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.form = {
|
|
id: null,
|
|
customerCode: null,
|
|
customerName: null,
|
|
customerNameEn: null,
|
|
simpleName: null,
|
|
contact: null,
|
|
phone: null,
|
|
mobile: null,
|
|
customerType: 2,
|
|
settledType: 2,
|
|
userType: null,
|
|
company: null,
|
|
licNo: null,
|
|
deptId: null,
|
|
avatar: null,
|
|
sex: null,
|
|
invitationInfo: null,
|
|
loginIp: null,
|
|
loginDate: null,
|
|
nickName: null,
|
|
unionId: null,
|
|
openid: null,
|
|
monthlyPayCode: null,
|
|
userName: null,
|
|
password: null,
|
|
ownerSite: null,
|
|
bizSite: null,
|
|
bizSiteName: null,
|
|
country: null,
|
|
province: null,
|
|
city: null,
|
|
county: null,
|
|
town: null,
|
|
address: null,
|
|
email: null,
|
|
postCode: null,
|
|
realName: null,
|
|
idNo: null,
|
|
idType: null,
|
|
idPic1: null,
|
|
idPic2: null,
|
|
idVerifyStatus: null,
|
|
payee: null,
|
|
salesmen: null,
|
|
dataFrom: null,
|
|
blOpenOms: null,
|
|
blSms: null,
|
|
opEmpCode: null,
|
|
firstSigningDay: null,
|
|
creditPeriodType: null,
|
|
creditPeriod: null,
|
|
settleDay: null,
|
|
status: null,
|
|
orderNum: null,
|
|
remark: null,
|
|
delFlag: null,
|
|
createBy: null,
|
|
createTime: null,
|
|
updateBy: null,
|
|
updateTime: null,
|
|
createSite: null,
|
|
updateSite: null
|
|
};
|
|
this.resetForm("form");
|
|
},
|
|
/** 提交按钮 */
|
|
submitForm() {
|
|
this.$refs["form"].validate(valid => {
|
|
if (valid) {
|
|
if (this.form.id != null) {
|
|
this.form.company=this.form.customerName;
|
|
editMonthUser(this.form).then(response => {
|
|
this.$modal.msgSuccess("修改成功");
|
|
this.$emit("on-changed");
|
|
});
|
|
} else {
|
|
addMonthUser(this.form).then(response => {
|
|
this.$modal.msgSuccess("新增成功");
|
|
this.$emit("on-changed");
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// .el-row{
|
|
// display:flex;
|
|
// flex-wrap: wrap;
|
|
// }
|
|
|
|
// .el-col{
|
|
// min-height: 1px;
|
|
// }
|
|
|
|
</style>
|