yos_web/src/HManagement/clueManage/clue_private/modules/add.vue

<template>
  <div>
    <el-button size="small" type="primary" @click="onShow">{{$t('新 建')}}</el-button>
    <el-drawer :title="$t(`新建线索`)" :visible.sync="drawer" size="800px" direction="rtl" :show-close="false" append-to-body @close="onClose">
      <div class="drawer__panel">
        <el-row :gutter="10">
          <el-form :model="param.content" :rules="rules" ref="ruleForm" :label-width="tool.onlyZh('120px')" class="demo-ruleForm"
                 label-position="right" size="small">
            <el-col class="mb-30" :span="24">
              <el-form-item>
                <el-checkbox v-model="param.content.isuppictured" :false-label="0" :true-label="1" :disabled="isuppictured === 0" @change="onChange">{{$t('是否上图')}}</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item :label="$t('客户名称')+':'" prop="enterprisename" v-if="param.content.isuppictured === 1" :rules="{required:true,message:$t('请填写客户名称'),trigger:'blur'}">
                <el-input v-model="param.content.enterprisename"  :placeholder="$t('请填写客户名称')"></el-input>
              </el-form-item>
              <el-form-item :label="$t('客户名称')+':'" prop="enterprisename" v-else >
                <el-input v-model="param.content.enterprisename"  :placeholder="$t('请填写客户名称')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <businessInquiry ref="businessRef" :keyword="param.content.enterprisename"
                               @businessData="businessSelect"></businessInquiry>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('联系人')+':'" prop="name" v-if="param.content.isuppictured === 1" :rules="{required:true,message:$t('请填写联系人'),trigger:'blur'}">
                <contactsNewTemplate ownertable="" ownerid="" @contactData="contactData" :name="param.content.name" @inputChange="inputChange" placement="left-start"></contactsNewTemplate>
              </el-form-item>
              <el-form-item :label="$t('联系人')+':'" prop="name" v-else>
                <contactsNewTemplate ownertable="" ownerid="" @contactData="contactData" :name="param.content.name" @inputChange="inputChange" placement="left-start"></contactsNewTemplate>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-radio v-model="param.content.isTelephone" label="0" @change="phoneChange('手机')">{{$t('手机号')}}</el-radio>
                <el-radio v-model="param.content.isTelephone" label="1" @change="phoneChange('座机')">{{$t('座机电话')}}</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="param.content.isTelephone == '1'">
              <el-form-item :label="$t('联系方式')+':'" prop="telephone" >
                <el-input v-model="param.content.areaCode" style="width: 25%" autocomplete="on" :placeholder="$t('请填写区号')"></el-input>
                <span style="color: #999999">——</span>
                <el-input v-model="param.content.telephone" style="width: 68%" autocomplete="on" :placeholder="$t('请填写座机电话')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24"  >
              <el-form-item v-if="param.content.isTelephone == '0'" :label="$t('联系方式')+':'" prop="phonenumber" :rules="[
              { required: true, message: $t('手机号码不能为空')},
              { pattern:/^1[3-9][0-9]\d{8}$/, message: this.$t('请输入正确手机号码'),trigger: 'change' }
            ]">
                <el-input v-model="param.content.phonenumber" autocomplete="on" :placeholder="$t('请填写手机号码')"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item :label="$t(`联系人角色`)+':'" prop="contactsrole">
                <el-input v-model="param.content.contactsrole"  :placeholder="$t(`请填写联系人角色`)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('微信')+':'" prop="wechatnum">
                <el-input v-model="param.content.wechatnum" :placeholder="$t('请填写微信')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('省市县')+':'" prop="province">
                <el-cascader :placeholder="$t('请选择')"  class="width-240" v-model="param.content.province" :options="_arealist"
                             @change="cascaderChange" ref="cascader">
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('地址')+':'" prop="address">
                <el-input v-model="param.content.address"  :placeholder="$t('请填写地址')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('项目名称')+':'" prop="projectname" v-if="param.content.isuppictured === 1" :rules="{required:true,message:$t('请填写项目名称'),trigger:'blur'}">
                <el-input v-model="param.content.projectname" :placeholder="$t('请填写项目名称')"></el-input>
              </el-form-item>
              <el-form-item :label="$t('项目名称')+':'" prop="projectname" v-else>
                <el-input v-model="param.content.projectname" :placeholder="$t('请填写项目名称')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item :label="$t('项目规模')+':'" prop="scale" v-if="param.content.isuppictured === 1" :rules="{required: true,pattern:/^\d+(.\d{1,2})?$/, message: $t('请输入数字值'), trigger: 'blur'}">
                <el-input v-model="param.content.scale" :placeholder="$t('请填写数值')"  class="inline-16"></el-input>
              </el-form-item>
              <el-form-item :label="$t('项目规模')+':'" prop="scale" v-else :rules="{required: false,pattern:/^\d+(.\d{1,2})?$/, message: $t('请输入数字值'), trigger: 'blur'}">
                <el-input v-model="param.content.scale" :placeholder="$t('请填写数值')"  class="inline-16"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-select v-model="param.content.unitname" :placeholder="$t('请选择单位')" size="small" >
                <el-option
                    v-for="item in unitnameList"
                    :key="item.value"
                    :label="$t(item.value)"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('总投资额(万元)')+':'" prop="totalinvestment" v-if="siteid !== 'HY'">
                <el-input v-model="param.content.totalinvestment" :placeholder="$t('请填写金额(万元)')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('造价(万元)')+':'" prop="costofconstruction" v-if="siteid !== 'HY'">
                <el-input v-model="param.content.costofconstruction" :placeholder="$t('请填写金额(万元)')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('预计开工时间')+':'" prop="begdate_due">
                <el-date-picker
                    style="width: 100%"
                    v-model="param.content.begdate_due"
                    type="month"
                    :placeholder="$t('选择月')"

                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('预计完工时间')+':'" prop="enddate_due">
                <el-date-picker
                    style="width: 100%"
                    v-model="param.content.enddate_due"
                    type="month"
                    :placeholder="$t('选择月')"

                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('市场活动')+':'" prop="campaign_name">
                <el-popover
                    placement="bottom"
                    trigger="manual"
                    v-model="activityVisible"
                    width="400">
                  <selectActivity ref="member" :radio="true" @onSelect="centerChange" @onCancel="activityVisible = false"></selectActivity>
                  <el-input readonly type="text" slot="reference"  @focus="activityVisible=true" v-model="param.content.campaign_name" :placeholder="$t(`请选择市场活动`)"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('领域')+':'" prop="tradefield">
                <el-select v-model="param.content.tradefield" :placeholder="$t('请选择领域')" style="width: 100%">
                  <el-option
                      v-for="item in tradefieldSelect"
                      :key="item.value"
                      :label="$t(item.value)"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`设计院`)+':'" prop="sys_enterpriseid" v-if="param.content.isuppictured === 1" :rules="{required:true,message:$t('请选择设计院'),trigger:'change'}">
                <designingInstitute ref="designingInstitute"  @designingInstitute="designingInstitute" :disabled="isuppictured === 1"></designingInstitute>
              </el-form-item>
              <el-form-item :label="$t(`设计院`)+':'" prop="sys_enterpriseid" v-else >
                <designingInstitute ref="designingInstitute"  @designingInstitute="designingInstitute" :disabled="isuppictured === 1"></designingInstitute>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`设计师`)+':'" prop="contactsid" v-if="param.content.isuppictured === 1" :rules="{required:true,message:$t('请选择设计师'),trigger:'change'}">
                <designer  ref="designer" :sys_enterpriseid="param.content.sys_enterpriseid" @designer="selectDesigner" :disabled="isuppictured === 1"></designer>
              </el-form-item>
              <el-form-item :label="$t(`设计师`)+':'" prop="contactsid" v-else >
                <designer ref="designer" :sys_enterpriseid="param.content.sys_enterpriseid" @designer="selectDesigner" :disabled="isuppictured === 1"></designer>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`关联项目`)+':'" prop="projectname">
                <project ref="project" @project="selectProject" :sat_orderclueid="0" :disabled="isuppictured === 1"></project>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('来源')+':'" prop="cluesource">
                <selectTemp ref="sourceRef" :placeholder="$t('请选择来源')" payload="cluesource" @selectChange="selectSource"></selectTemp>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('线索概况')+':'" prop="notes">
                <el-input type="textarea" v-model="param.content.notes"  :placeholder="$t('请填写线索概况')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t(`上图员`)+':'" prop="isuppictured" v-if="param.content.isuppictured === 1" :rules="{required:true,message:$t('上图员信息缺失'),trigger:'blur'}">
                <el-input v-model="uppictured"  :placeholder="$t(`上图员信息`)" disabled></el-input>
              </el-form-item>
              <el-form-item :label="$t(`上图员`)+':'" prop="isuppictured" v-else >
                <el-input v-model="uppictured"  :placeholder="$t(`上图员信息`)" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="drawer = false;$refs.sourceRef.option = []" class="normal-btn-width">{{$t('取 消')}}</el-button>
        <el-button size="small" type="primary" @click="addOrdercule" class="normal-btn-width">{{$t('确 定')}}</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import selectActivity from '@/SManagement/orderclue/components/selectActivity/selectActivity.vue'
import tableList from '@/components/table/index5';
import designingInstitute from '@/template/clueModel/designingInstitute'
import designer from '@/template/clueModel/designer'
import project from '@/template/clueModel/project'
import contactsTemplate from '@/template/contactsTemplate/index'
import contactsNewTemplate from '@/template/contactsNewTemplate/index'
import businessInquiry from '@/template/businessInquiry/index'

export default {
  components: {
    selectActivity,
    tableList,
    designingInstitute,
    designer,
    project,
    contactsTemplate,
    contactsNewTemplate,
    businessInquiry
  },
  data() {
    var telephone = (rule, value, callback) => {
      if (this.param.content.areaCode === '' && this.param.content.telephone === '') {
        callback(new Error(this.$t('座机电话不能为空')))
      } else {
        var reg = /^0\d{2,3}-\d{7,8}$/;
        let telephone = this.param.content.areaCode + '-' + this.param.content.telephone
        if (!reg.test(telephone)) {
          callback(new Error(this.$t('请输入正确座机电话')))
        } else {
          callback();
        }
      }
    }
    var begdateTime = (rule,value,callback) =>{
      this.$refs.ruleForm.validateField('enddate_due')
      if (this.param.content.enddate_due !== ''){
        if (value > this.param.content.enddate_due){
          callback(new Error(this.$t('预计开工时间不能晚于预计完工时间')))
        }else {
          callback();
        }
      } else {
        callback();
      }
    }
    var enddateTime = (rule,value,callback) =>{
      if (value && this.param.content.begdate_due !== ''){
        if (value < this.param.content.begdate_due){
          callback(new Error(this.$t('预计完工时间不能早于预计开工时间')))
        }else {
          callback();
        }
      }  else if (value && this.param.content.begdate_due === '') {
        callback(new Error(this.$t('预计完工时间不能早于预计开工时间')))
      }else {
        callback();
      }
    }
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      drawer: false,
      activityVisible:false,
      uppictured:'',//上图员
      isuppictured:'',
      sys_enterpriseidShow:false,
      sys_enterpriseidList:[],
      tablecols:[],
      param: {
          "id": 20221205162402,
          "content": {
            "sat_orderclueid": 0,
            "enterprisename":"",
            "name": "",
            "phonenumber": "",
            "province": "",
            "city": "",
            "county": "",
            "address": "",
            "notes": "",
            "cluesource": "",
            "sat_campaignid":0,//活动id，当活动id大于0是默认业务员创建
            "isprivate":0,//0表示公海，1表示私域
            "projectname": "",
            "scale": "",
            "costofconstruction": '', //造价（百万）
            "totalinvestment": '', //总投资额（百万）
            "begdate_due": "", //预计开工时间
            "enddate_due": "", //预计完工时间
            "tradefield":"",
            "unitname":'',
            "isuppictured":'',//是否上图
            "contactsrole":'',//联系人角色
            "sys_enterpriseid":'',//设计院
            "contactsid":'',//设计师
            "sa_projectid":'',//关联项目
            "areaCode":'',
            "telephone":'',
            "isTelephone":'0',
          }
      },
      unitnameList:[],
      rules: {
        phonenumber:[
          {required:true,message:this.$t('请输入手机号'),trigger:'blur'},
          { pattern:/^1[3-9]\d{9}$/, message: this.$t('请输入正确手机号码'),trigger: 'change' }
        ],
        begdate_due:[
          { required: false, validator: begdateTime, trigger: 'change' }
        ],
        enddate_due:[
          { required: false, validator: enddateTime, trigger: 'change' }
        ],
        name:[
          { required: true, message: this.$t('请输入联系人'), trigger: 'change,blur'}
        ],
        tradefield:[
          { required: true, message: this.$t('请选择领域'), trigger: 'change'}
        ],
        contactsrole:[
          {required: false,pattern:/^[\u4e00-\u9fa5]{0,}$/g, message: this.$t('请输入中文'), trigger: 'blur'}
        ],
        scale:[
          {required: false,pattern:/^\d+(.\d{1,2})?$/, message: this.$t('请输入数字值'), trigger: 'blur'}
        ],
        totalinvestment:[
          {required: false,pattern:/^\d+(.\d{1,2})?$/, message: this.$t('请输入数字值'), trigger: 'blur'}
        ],
        costofconstruction:[
          {required: false,pattern:/^\d+(.\d{1,2})?$/, message: this.$t('请输入数字值'), trigger: 'blur'}
        ],
        telephone:[
          { required: true, validator: telephone, trigger: 'change' }
          /* { required: true, message: this.$t('请输入座机电话'), trigger: 'change' },
           { pattern:/^0\d{2,3}-\d{7,8}$/, message: this.$t('请输入正确座机电话'),trigger: 'change' }*/
        ],
        cluesource:[
          { required: true, message: this.$t('请选择来源'), trigger: 'change'}
        ],
      },
      areaSelectResult:'',
      options: [],
      tradefieldSelect:[],
      siteid:''
    }
  },
  props:{
    updataList: {
      type:Function
    }
  },
  inject:['arealist'],
  computed:{
    _arealist() {
      return this.arealist()
    }
  },
  watch: {
    drawer (val) {
      !val && this.$refs.ruleForm.resetFields()
    }
  },
  methods: {
    onShow () {
      this.drawer = true
      this.queryIsuppictured(JSON.parse(sessionStorage.getItem('active_account')).hrid)
      this.queryTradefield()
      this.queryUnitname()
      this.siteid = JSON.parse(sessionStorage.getItem('active_account')).siteid
      this.$nextTick(()=>{
        this.$refs.designingInstitute.listData()
        this.$refs.project.listData()
      })

    },
    addOrdercule() {
      if (this.param.content.begdate_due !== ''){
        const data = new Date(this.param.content.begdate_due)
        if (data.getMonth() +1 < 10){
          this.param.content.begdate_due = data.getFullYear() + '-0' + (data.getMonth() + 1)
        }else {
          this.param.content.begdate_due = data.getFullYear() + '-' + (data.getMonth() + 1)
        }
      }else {
        this.param.content.begdate_due = ''
      }
      if (this.param.content.enddate_due !== ''){
        const data = new Date(this.param.content.enddate_due)
        if (data.getMonth() +1 < 10){
          this.param.content.enddate_due = data.getFullYear() + '-0' + (data.getMonth() + 1)
        }else {
          this.param.content.enddate_due = data.getFullYear() + '-' + (data.getMonth() + 1)
        }
      }else {
        this.param.content.enddate_due = ''
      }
      this.$refs.ruleForm.validate( async (valid) => {
        if (!valid) {
          this.$notify({
            title: this.$t('警告'),
            message: this.$t('请按照要求输入信息'),
            type: 'warning'
          });
          return false
        }else if (this.param.content.enterprisename === '' && this.param.content.projectname === ''){
          this.$notify({
            title: this.$t('警告'),
            message: this.$t('客户名称或项目名称不能为空'),
            type: 'warning'
          });
          return false
        }
          if(this.areaSelectResult && this.areaSelectResult.length > 1) {
            this.param.content.province = this.areaSelectResult[0]
            this.param.content.city = this.areaSelectResult[1]
            this.param.content.county = this.areaSelectResult[2]
          } else if (this.areaSelectResult.length == 1) {
            this.param.content.province = this.areaSelectResult[0]
          }
        if (this.param.content.isTelephone == '1'){
          this.param.content.phonenumber = this.param.content.areaCode + "-" + this.param.content.telephone
        }
          let res = await this.$api.requested(this.param)
          this.tool.showMessage(res,() => {
            this.drawer = false
            this.areaSelectResult = []
            this.$refs.ruleForm.resetFields()
            this.$refs.designer.contactsname = ''
            this.$refs.project.projectName = ''
            this.param.content.sa_projectid = ''
            this.param.content.projectname = ''
            this.$refs.designingInstitute.enterprisename = ''
            this.param.content.areaCode = ''
            this.param.content.telephone = ''
            this.param.content.phonenumber = ''
            this.param.content.isTelephone = '0'
            this.$refs.sourceRef.option = []
            this.$refs.sourceRef.value = ''
            this.$emit('onSuccess')
          })
      })

    },
    cascaderChange(result) {
      this.areaSelectResult = result
    },
    onClose () {
      this.$refs['ruleForm'].resetFields()
      this.$refs.designer.contactsname = ''
      this.$refs.project.projectName = ''
      this.$refs.designingInstitute.enterprisename = ''
      this.param.content.sa_projectid = ''
      this.param.content.projectname = ''
      this.activityVisible = false
      this.param.content.areaCode = ''
      this.param.content.telephone = ''
      this.param.content.phonenumber = ''
      this.param.content.isTelephone = '0'
      this.$refs.sourceRef.option = []
      this.$refs.sourceRef.value = ''
    },
    centerChange(data) {
      this.param.content.campaign_name = data[0].name
      this.param.content.sat_campaignid = data[0].sat_campaignid
      this.param.content.cluesource = data[0].name
      this.activityVisible = false
    },
    /*工商信息*/
    businessSelect(val, regProvince) {
      this.$confirm(this.$t('是否以查询的工商信息更新客户信息')+'?', this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        this.$refs.businessRef.businessShow = false;
        this.param.content.enterprisename = val.companyName;
        this.param.content.address = val.address === "-" ? '' : val.address;
        this.areaSelectResult = [regProvince, val.regCity, val.regArea];
        this.param.content.province = [regProvince, val.regCity, val.regArea];
        this.param.content.city = val.regCity;
        this.param.content.county = val.regArea;
        this.param.content.contact = val.legalPerson
      }).catch(() => {
        this.$refs.businessRef.businessShow = false;
        this.$message({
          type: 'info',
          message: this.$t('已取消更新')
        });
      })
    },
    /*获取领域*/
    queryTradefield() {
      this.$store.dispatch('optiontypeselect', 'tradefield').then(res => {
        this.tradefieldSelect = res.data
      })
    },
    /*获取单位*/
    queryUnitname() {
      this.$store.dispatch('optiontypeselect', 'scaleunitname').then(res => {
        this.param.content.unitname = res.data[0].value
        this.unitnameList = res.data
      })
    },
    /*判断是否上图员*/
    async queryIsuppictured(hrid) {
      const res = await this.$api.requested({
        "classname": "webmanage.hr.hr",
        "method": "query_hrMain",
        "content": {
          "hrid":hrid
        }
      })
      console.log(res.data,'是否上图员')
      this.isuppictured = res.data.isuppictured
    },
    onChange(){
      console.log(this.param.content.isuppictured)
      if (this.param.content.isuppictured === 1){
        this.uppictured = JSON.parse(sessionStorage.getItem('active_account')).name
      }else {
        this.uppictured = ''
      }
    },
    /*已选设计院*/
    designingInstitute(id){
      this.param.content.sys_enterpriseid = id
    },
    /*已选设计师*/
    selectDesigner(id){
      this.param.content.contactsid = id
    },
    /*已选项目*/
    selectProject(id,name){
      if (name !== ''){
        this.param.content.sa_projectid = id
        this.param.content.projectname = name
      }else {
        this.param.content.sa_projectid = id
      }

    },
    phoneChange(val){
      if (val === '手机'){
        this.param.content.telephone = ''
        this.param.content.areaCode = ''
      }else {
        this.param.content.phonenumber = ''
      }
    },
    /*联系人选择*/
    contactSelect(val){
      if (val){
        this.param.content.name = val.name
        if (val.phonenumber.indexOf('-') != '-1'){
          this.param.content.isTelephone = '1'
          this.param.content.areaCode = val.phonenumber.substring(0,val.phonenumber.indexOf('-'))
          this.param.content.telephone = val.phonenumber.substring(this.param.content.areaCode.length+1)
          this.param.content.phonenumber = ''
        }else {
          this.param.content.isTelephone = '0'
          this.param.content.phonenumber = val.phonenumber
          this.param.content.areaCode = ''
          this.param.content.telephone = ''
        }
      }else {
        this.param.content.name = this.$refs.contactsRef.name
      }

    },
    inputChange(val){
      this.param.content.name = val
    },
    contactData(val){
      this.param.content.name = val.name
      if (val.phonenumber.indexOf('-') != '-1'){
        this.param.content.isTelephone = '1'
        this.param.content.areaCode = val.phonenumber.substring(0,val.phonenumber.indexOf('-'))
        this.param.content.telephone = val.phonenumber.substring(this.param.content.areaCode.length+1)
        this.param.content.phonenumber = ''
      }else {
        this.param.content.isTelephone = '0'
        this.param.content.phonenumber = val.phonenumber
        this.param.content.areaCode = ''
        this.param.content.telephone = ''
      }
    },
    selectSource(data){
      this.param.content.cluesource = data
    }
  },

}

</script>
<style scoped>
.dialog-footer {
  margin-top: 32px;
  text-align: center;
}
/deep/.el-cascader {
  width: 100%;
}
</style>