lshcom 1.0.0

package/src/components/LshCust/index.vue

@@ -0,0 +1,926 @@
+<template>
+  <div class="LSH-Cust">
+    <div class="row">
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="客户编码"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-input v-model.trim="queryParams.scvId" disabled />
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="相关编号"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-input v-model.trim="queryParams.bpNum" disabled />
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="客户类型*"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-select
+            v-model="queryParams.custType"
+            @change="handleChange"
+            @visible-change="handleVisibleChange"
+          >
+            <el-option
+              v-for="item in customTypeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          style="position: relative"
+          horizontal
+          label="移动电话*"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-autocomplete
+            :disabled="isEdit"
+            :maxlength="11"
+            class="inline-input"
+            v-model="queryParams.contactPhoneNo"
+            @keyup.native="numberKeyup"
+            :fetch-suggestions="querySearch"
+            placeholder="请输入手机号"
+            :trigger-on-focus="false"
+            @select="handleSelect"
+          >
+          </el-autocomplete>
+          <div
+            style="position: absolute; right: -22px; top: 10px"
+            class="portrayal-icon"
+            @click="letPortrayalVisible"
+          >
+            <img src="../../assets/img/customer-portrayal-blue.png" alt="" />
+          </div>
+        </b-form-fieldset>
+      </div>
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="客户姓名*"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-input
+            v-model.trim="queryParams.customerName"
+            :disabled="isEdit"
+          />
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="称谓*"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-select v-model="queryParams.customerGender" placeholder="">
+            <el-option
+              v-for="item in genderTypeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="
+                (companyFlag && !item.refDetailRemark) ||
+                (!companyFlag && !!item.refDetailRemark)
+              "
+            />
+          </el-select>
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="国籍/地区*"
+          label-cols="4"
+          class="text-right"
+        >
+          <!-- <el-input v-model.trim="queryParams.customerCountry" /> -->
+          <el-select v-model="queryParams.customerCountryCode" placeholder="">
+            <el-option
+              v-for="item in customerCountryList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="证件类型"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-select v-model="queryParams.customerIdTypeCode">
+            <el-option
+              v-for="item in CertificateTypeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="
+                (companyFlag && !item.refDetailRemark) ||
+                (!companyFlag && !!item.refDetailRemark)
+              "
+            />
+          </el-select>
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="证件号"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-input v-model.trim="queryParams.customerIdNo" />
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="生日"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-date-picker
+            v-model="queryParams.customerBirthDate"
+            type="date"
+            placeholder="选择日期"
+            :picker-options="pickerOptions0"
+          >
+          </el-date-picker>
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="邮箱"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-input v-model.trim="queryParams.customerMail" />
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="学历"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-input v-model.trim="queryParams.customerEducation" />
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="省"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-select
+            v-model="queryParams.addressProvinceCode"
+            placeholder=""
+            @change="selectProvince"
+          >
+            <el-option
+              v-for="item in provinceList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="市"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-select
+            v-model="queryParams.addressCityCode"
+            placeholder=""
+            @change="selectCity"
+          >
+            <el-option
+              v-for="item in cityList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="区"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-select v-model="queryParams.addressRegionCode" placeholder="">
+            <el-option
+              v-for="item in direectList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </b-form-fieldset>
+      </div>
+
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="详细地址"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-input v-model.trim="queryParams.addressDetail" />
+        </b-form-fieldset>
+      </div>
+      <!-- 客户档案单独加的字段明细 -->
+      <!-- <slot name="custom-add"></slot> -->
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="其他电话1"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-input v-model.trim="queryParams.otherPhoneNoOne" />
+        </b-form-fieldset>
+      </div>
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="其他电话2"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-input v-model.trim="queryParams.otherPhoneNoTwo" />
+        </b-form-fieldset>
+      </div>
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="其他电话3"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-input v-model.trim="queryParams.otherPhoneNoThree" />
+        </b-form-fieldset>
+      </div>
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="是否本店"
+          label-cols="4"
+          class="text-right"
+        >
+          <!-- <el-select
+            v-model="queryParams.custType">
+            <el-option
+              v-for="item in customTypeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+          </el-select> -->
+          <el-input :value="queryParams.storeCode ? '是' : '否'" disabled />
+        </b-form-fieldset>
+      </div>
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="SAP手机号"
+          label-cols="4"
+          class="text-right"
+        >
+          <!-- <el-select
+            v-model="queryParams.sapPhoneNo">
+            <el-option
+              v-for="item in customTypeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+          </el-select> -->
+          <el-input v-model.trim="queryParams.sapPhoneNo" disabled />
+        </b-form-fieldset>
+      </div>
+      <div class="col-md-4">
+        <b-form-fieldset
+          horizontal
+          label="车险电话"
+          label-cols="4"
+          class="text-right"
+        >
+          <el-input v-model.trim="queryParams.renewalCustomerMobile" disabled />
+        </b-form-fieldset>
+      </div>
+    </div>
+
+    <div class="col-md-12">
+      <div class="pull-right">
+        <b-button v-if="showChange && $route.name != 'lsh-customer-view' && ifChange"   @click="changeMaster" size="sm" variant="success">车主变更</b-button>
+        <b-button size="sm" variant="default" @click="cancel">取消</b-button>
+        <b-button v-if="$route.name != 'lsh-customer-view'" size="sm" variant="primary" @click="preserve">保存</b-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+	import {showBtn} from 'common/api-common'
+
+import api from "common/api";
+import {
+  LSH_GENDER_TYPE,
+  LSH_CUSTOM_TYPE,
+  LSH_CERTIFICATE_TYPE,
+  NATIONA_LITY_REGION,
+} from "common/ref-code";
+import {
+		 ORDER_CHANGE_USERCCHANGE
+	} from 'common/resource-btn.js'
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+export default {
+  props: {
+    custVo: {
+      type: Object,
+      default: {},
+    },
+    bindFlag: {
+      type: Boolean,
+      default: false,
+    },
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    isSaveOther: {
+      type: Boolean,
+      default: false,
+    },
+    ifChange: {type: Boolean, default: true}, // 是否显示车主变更按钮
+
+  },
+
+  data() {
+    return {
+      queryParams: {
+        contactPhoneNo: "",
+        scvId: "",
+        customerIdTypeCode: "ID",
+        customerCountryCode: "CHN",
+      },
+      addressCode: {},
+      purchaseOrderTypeList: [],
+      genderTypeList: [],
+      customTypeList: [],
+      CertificateTypeList: [],
+      // 省
+      provinceList: [],
+      // 市
+      cityList: [],
+      // 区
+      direectList: [],
+      chooseList: [],
+      pickerOptions0: {
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      customerCountryList: [],
+      companyFlag: false,
+      visbileFlag: false,
+    };
+  },
+
+  watch: {
+    custVo: {
+      async handler(newName, oldName) {
+        console.log(0, newName);
+        if (JSON.stringify(newName) === "{}") return;
+        this.queryParams = JSON.parse(JSON.stringify(newName)) || {};
+        // 实时更新用户信息
+        this.querySearch(this.queryParams.contactPhoneNo);
+        !this.queryParams.bpNum && (this.queryParams.bpNum = "");
+      },
+      immediate: true,
+    },
+    'queryParams.contactPhoneNo': {
+			  handler: function() {
+			    this.querySearch()
+			  },
+			}
+    // 'queryParams.contactPhoneNo': {
+    //   handler: function() {
+    //     this.querySearch()
+    //   },
+    // }
+  },
+
+  created() {
+    this.queryRef({ refCode: LSH_GENDER_TYPE }, "genderTypeList", false);
+    this.queryRef({ refCode: LSH_CUSTOM_TYPE }, "customTypeList", false);
+    this.queryRef(
+      { refCode: LSH_CERTIFICATE_TYPE },
+      "CertificateTypeList",
+      false
+    );
+    this.queryRef(
+      { refCode: "NationalityRegion" },
+      "customerCountryList",
+      false
+    );
+    this.init();
+    // this.getType()
+  },
+  computed: {
+    ...mapState("customerPortrayal", ["customerPhoneNo", "portrayalVisible"]),
+    showChange() {
+      // return showBtn( ORDER_CHANGE_USERCCHANGE)
+      return true
+    },
+  },
+
+  methods: {
+    ...mapActions({
+      saveScvId: "customerPortrayal/getScvIdSave",
+      savePhoneNo: "customerPortrayal/getCustomerPhoneNo",
+      savePortrayalVisible: "customerPortrayal/getPortrayalVisible",
+    }),
+    	// 变更车主
+			changeMaster(){
+				console.log('test:>watch', this.$watch)
+				if (!this.queryParams.custType) {
+					this.$message({
+						message: '请选择客户类型',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (!this.queryParams.contactPhoneNo) {
+					this.$message({
+						message: '请输入移动电话',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (!this.queryParams.customerName) {
+					this.$message({
+						message: '请输入客户姓名',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (!this.queryParams.customerGender) {
+					this.$message({
+						message: '请选择称谓',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (!this.queryParams.customerCountryCode) {
+					this.$message({
+						message: '请选择国家/地区',
+						type: 'warning'
+					})
+					return
+				}
+        
+				if (this.bindFlag) {
+					this.$emit('changeMaster', this.queryParams)
+				}
+         console.log(2);
+
+				const params = {
+					saveFrom: 0,
+					custVo: this.queryParams,
+				}
+        //carIsBind
+				api.liApi.custVehcile.setCustVehicle(params, res => {
+					if (res && res.data.code === 'success') {
+            console.log(res.data.obj.custVo,'33333');
+						this.$emit('preserve', res.data.obj.custVo)
+						
+
+					}
+				})
+			},
+        delogmessage(flag){
+          if(flag){
+            this.$message({
+							message: '变更成功',
+							type: 'success'
+						})
+          }
+        },
+      	save(){
+				console.log('test:>watch', this.$watch)
+				if (!this.queryParams.custType) {
+					this.$message({
+						message: '请选择客户类型',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (!this.queryParams.contactPhoneNo) {
+					this.$message({
+						message: '请输入移动电话',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (!this.queryParams.customerName) {
+					this.$message({
+						message: '请输入客户姓名',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (!this.queryParams.customerGender) {
+					this.$message({
+						message: '请选择称谓',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (!this.queryParams.customerCountryCode) {
+					this.$message({
+						message: '请选择国家/地区',
+						type: 'warning'
+					})
+					return
+				}
+
+				if (this.bindFlag) {
+
+					this.$emit('save', this.queryParams)
+					return
+				}
+
+				const params = {
+					saveFrom: 0,
+					custVo: this.queryParams,
+				}
+				api.liApi.custVehcile.setCustVehicle(params, res => {
+					if (res && res.data.code === 'success') {
+						this.$emit('preserve', res.data.obj.custVo)
+						this.$message({
+							message: '保存成功',
+							type: 'success'
+						})
+
+						// 解决保存后 loading一直转圈的问题
+						// setTimeout(function(){
+						//   window.location.reload()
+						// }, 1000)
+					}
+				})
+			},
+    init() {
+      this.querychinaarea({ levels: 1 });
+    },
+
+    /**
+     * @desc 手机号下拉查询
+     */
+    querySearch(val, cb = () => {}) {
+      if (val && val.length === 11) {
+        api.liApi.custVehcile.getCustByPhoneName(
+          { contactPhoneNo: val, pageStart: 1, pageNums: 1000 },
+          (res) => {
+            if (res && res.data.code === "success") {
+              if (res.data.obj && res.data.obj.length > 0) {
+                let list = res.data.obj.map((item, index) => {
+                  return {
+                    value: `${item.contactPhoneNo} ${item.customerName}`,
+                    label: item.contactPhoneNo,
+                    index: index,
+                  };
+                });
+                cb(list);
+                this.chooseList = res.data.obj;
+                // 回显
+                // this.queryParams = res.data.obj[0]
+              } else {
+                this.queryParams = {
+                  contactPhoneNo: val,
+                  customerIdTypeCode: "ID",
+                  customerCountryCode: "CHN",
+                };
+                cb([]);
+              }
+            }
+          }
+        );
+      } else {
+        cb([]);
+      }
+    },
+
+    /**
+     * @desc 手机号选择
+     */
+    handleSelect(item) {
+      // console.log('test:>选择', item)
+      this.queryParams = this.chooseList[item.index];
+      !this.queryParams.bpNum && (this.queryParams.bpNum = "");
+      // this.$emit('selectPhone', this.queryParams)
+    },
+
+    /**
+     * @desc 保存
+     */
+    preserve() {
+      console.log("test:>watch", this.$watch);
+      if (!this.queryParams.custType) {
+        this.$message({
+          message: "请选择客户类型",
+          type: "warning",
+        });
+        return;
+      }
+
+      if (!this.queryParams.contactPhoneNo) {
+        this.$message({
+          message: "请输入移动电话",
+          type: "warning",
+        });
+        return;
+      }
+
+      if (!this.queryParams.customerName) {
+        this.$message({
+          message: "请输入客户姓名",
+          type: "warning",
+        });
+        return;
+      }
+
+      if (!this.queryParams.customerGender) {
+        this.$message({
+          message: "请选择称谓",
+          type: "warning",
+        });
+        return;
+      }
+
+      if (!this.queryParams.customerCountryCode) {
+        this.$message({
+          message: "请选择国家/地区",
+          type: "warning",
+        });
+        return;
+      }
+
+      if (this.bindFlag) {
+        this.$emit("preserve", this.queryParams);
+        return;
+      }
+      if(this.provinceList.length>0) {
+        let economize =  this.provinceList.filter((item)=>{
+          return item.value == this.queryParams.addressProvinceCode
+        })
+        if(economize.length>0){
+          this.queryParams.addressProvince = economize[0].label;
+        }
+        console.log(economize,"economize");
+      }
+      if(this.cityList.length>0) {
+        let market =  this.cityList.filter((item)=>{
+          return item.value == this.queryParams.addressCityCode
+        })
+        if(market.length>0){
+          this.queryParams.addressCity = market[0].label;
+        }
+        console.log(market,"market");
+      }
+      console.log();
+      if(this.direectList.length>0) {
+        let direect =  this.direectList.filter((item)=>{
+          return item.value == this.queryParams.addressRegionCode
+        })
+        if(direect.length>0){
+          this.queryParams.addressRegion = direect[0].label;
+        }
+      }
+      const {
+        annualIncome, company, customerTrade, drivableType, wxNo,
+        driveLicenceEnd, driveLicenceStart, interest, interestedVas,
+        maritalStatus, post, qqNo, remark, scvId, storeCode
+      } = this.custVo;
+      let params = {}
+      if(this.isSaveOther) {
+        params = {
+          saveFrom: 0,
+          custVo: {
+            ...this.queryParams,
+            annualIncome, company, customerTrade, drivableType, wxNo,
+            driveLicenceEnd, driveLicenceStart, interest, interestedVas,
+            maritalStatus, post, qqNo, remark, scvId, storeCode
+          }
+        };
+      } else {
+        params = {
+          saveFrom: 0,
+          custVo: this.queryParams,
+        };
+      }
+      api.liApi.custVehcile.setCustVehicle(params, (res) => {
+        console.log(params,"paramsxxx");
+        if (res && res.data.code === "success") {
+          this.$emit("preserve", res.data.obj.custVo);
+          this.$message({
+            message: "保存成功",
+            type: "success",
+          });
+
+          // 解决保存后 loading一直转圈的问题
+          // setTimeout(function(){
+          //   window.location.reload()
+          // }, 1000)
+        }
+      });
+    },
+
+    /**
+     * @desc 取消
+     */
+    cancel() {
+      this.$emit("cancel");
+    },
+
+    /**
+     * @desc 客户类型修改
+     */
+    handleChange(item) {
+      if (!this.visbileFlag) return;
+      this.companyFlag = item === "customTypeGroupCus" ? true : false;
+      this.$set(this.queryParams, "customerIdTypeCode", "");
+      this.$set(this.queryParams, "customerGender", "");
+    },
+
+    handleVisibleChange(val) {
+      this.visbileFlag = val;
+    },
+
+    /**
+     * @desc 选择省 => 市
+     */
+    selectProvince(val) {
+      if (!val) return;
+      const params = { levels: 2, fatherAreaCode: val };
+      this.querychinaarea(params);
+    },
+
+    /**
+     * @desc 选择市 => 区
+     */
+    selectCity(val) {
+      if (!val) return;
+      const params = { levels: 3, fatherAreaCode: val };
+      this.querychinaarea(params);
+    },
+
+    /**
+     * @desc 省市区
+     */
+    querychinaarea(params) {
+      // console.log('test:>params', params)
+      // console.log('test:>this', this.queryParams)
+
+      api.chinaarea.querychinaarea(params, (res) => {
+        if (res && res.data.code == "success") {
+          const list = res.data.obj || [];
+          const target = list.map(({ areaName: label, areaCode: value }) => ({
+            label,
+            value,
+          }));
+
+          if (params.levels == 1) {
+            this.provinceList = target;
+            this.cityList = [];
+            this.direectList = [];
+          }
+
+          if (params.levels == 2) {
+            this.cityList = target;
+            this.direectList = [];
+            // this.queryParams.addressCityCode = ''
+            // this.queryParams.addressRegionCode = ''
+            this.queryParams = JSON.parse(JSON.stringify(this.queryParams));
+          }
+
+          if (params.levels == 3) {
+            this.direectList = target;
+            // this.queryParams.addressRegionCode = ''
+            this.queryParams = JSON.parse(JSON.stringify(this.queryParams));
+          }
+        }
+      });
+    },
+
+    /**
+     * @desc 查询数字字典
+     */
+    queryRef(params, key, flag) {
+      api.ref.getDataDictionarys(params, (res) => {
+        if (res && res.data.code == "success") {
+          const Vo = res.data.obj || {};
+          const list = Vo.referenceDetailInfos || [];
+          this[key] = list.map(
+            ({
+              refDetailName: label,
+              refDetailCode: value,
+              refDetailRemark,
+            }) => ({ label, value, refDetailRemark })
+          );
+          flag && (this[key] = [{ label: "全部", value: "" }, ..._list]);
+          // console.log(`test:>${key}`, this[key])
+        }
+      });
+    },
+
+    numberKeyup(e) {
+      e.target.value = e.target.value.replace(/[^\d]/g, "");
+    },
+
+    letPortrayalVisible() {
+      if (!this.queryParams.contactPhoneNo && !this.portrayalVisible) {
+        this.$message({
+          type: "warning",
+          message: "请输入手机号",
+        });
+        return;
+      }
+      // 都是同步方法
+      this.saveScvId(this.queryParams.scvId);
+      this.savePhoneNo(this.queryParams.contactPhoneNo);
+      this.savePortrayalVisible(!this.portrayalVisible);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.LSH-Cust {
+  .el-select {
+    width: 100%;
+  }
+  .el-autocomplete {
+    width: 100%;
+  }
+  .portrayal-icon {
+    cursor: pointer;
+    z-index: 1;
+    img {
+      width: 24px;
+      height: 19px;
+    }
+  }
+}
+</style>