yos_web/src/HManagement/clueManage/m_activity/modules/editClue.vue

<template>
  <div>
    <el-button type="text" :disabled="!rowData.disabled || data.allocationstatus === '已分配' || rowData.status === '结束'" size="mini" @click="editBtn">编 辑</el-button>
    <el-drawer
      title="编辑线索"
      :visible.sync="drawer"
      :show-close="false"
      size="700px"
      direction="rtl"
      append-to-body
      @close="onClose">
      <div class="drawer__panel">
        <el-row :gutter="10">
          <el-form :model="form" :rules="rules" ref="form" label-width="120px" label-position="right" size="mini">
            <el-col :span="20">
              <el-form-item label="客户名称" prop="enterprisename">
                <el-input v-model="form.enterprisename" placeholder="请输入客户名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <businessInquiry ref="businessRef" :keyword="form.enterprisename"
                               @businessData="businessSelect"></businessInquiry>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系人" prop="name">
                <contactsNewTemplate ownertable="" ownerid="" @contactData="contactData" :name="form.name" @inputChange="inputChange"></contactsNewTemplate>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-radio v-model="form.isTelephone" label="0" >手机号</el-radio>
                <el-radio v-model="form.isTelephone" label="1">座机电话</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.isTelephone == '1'">
              <el-form-item label="联系方式:" prop="telephone" >
                <el-input v-model="form.areaCode" style="width: 25%" autocomplete="on" placeholder="请填写区号"></el-input>
                <span style="color: #999999">——</span>
                <el-input v-model="form.telephone" style="width: 68%" autocomplete="on" placeholder="请填写座机电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24"  >
              <el-form-item v-if="form.isTelephone == '0'" label="联系方式:" prop="phonenumber" :rules="[
              { required: true, message: '手机号码不能为空'},
              { pattern:/^1[3-9][0-9]\d{8}$/, message: '请输入正确手机号码',trigger: 'change' }
            ]">
                <el-input v-model="form.phonenumber" autocomplete="on" placeholder="请填写手机号码"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="微信:" prop="wechatnum">
                <el-input v-model="form.wechatnum" placeholder="请填写微信"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="省市县" prop="province">
                <el-cascader
                    style="width:100%"
                    class="width-240"
                    v-model="form.province"
                    :options="basicData.data().areaData"
                    @change="cascaderChange">
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="地址" prop="address">
                <el-input v-model="form.address" placeholder="请输入地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目名称:" prop="projectname">
                <el-input v-model="form.projectname" placeholder="请填写项目名称"></el-input>
              </el-form-item>
            </el-col>

              <el-col :span="20">
                <el-form-item label="项目规模:" prop="scale" >
                  <el-input v-model="form.scale" placeholder="请填写数值"  class="inline-16"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-select v-model="form.unitname" placeholder="请选择单位" size="mini" >
                  <el-option
                      v-for="item in unitnameList"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-col>


            <el-col :span="24"  v-if="siteid !== 'HY'">
              <el-form-item label="总投资额(万元):" prop="totalinvestment">
                <el-input v-model="form.totalinvestment" placeholder="请填写金额(万元)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24"  v-if="siteid !== 'HY'">
              <el-form-item label="造价(万元):" prop="costofconstruction">
                <el-input v-model="form.costofconstruction" placeholder="请填写金额(万元)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预计开工时间:" prop="begdate_due">
                <el-date-picker
                    style="width: 100%"
                    v-model="form.begdate_due"
                    type="month"
                    placeholder="选择月"
                    :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预计完工时间:" prop="enddate_due">
                <el-date-picker
                    style="width: 100%"
                    v-model="form.enddate_due"
                    type="month"
                    placeholder="选择月"
                    :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="市场活动" prop="campaign_name">
                <el-input disabled type="text" size="small" v-model="form.campaign_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="领域:" prop="tradefield">
                <el-select v-model="form.tradefield" placeholder="请选择领域" style="width: 100%">
                  <el-option
                      v-for="item in tradefieldSelect"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="来源" prop="cluesource">
                <selectTemp ref="sourceRef" placeholder="请选择来源" payload="cluesource" @selectChange="selectSource" :cluesource="form.cluesource"></selectTemp>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="线索概况" prop="notes">
                <el-input v-model="form.notes" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>

          </el-form>
        </el-row>

      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="onClose" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="add" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import selectActivity from '@/SManagement/orderclue/components/selectActivity/selectActivity'
import businessMessage from '@/components/businessMessage/index'
import contactsTemplate from '@/template/contactsTemplate/index'
import contactsNewTemplate from '@/template/contactsNewTemplate/index'
import businessInquiry from '@/template/businessInquiry/index'

export default {
  components: {selectActivity, businessMessage, contactsTemplate, contactsNewTemplate, businessInquiry},
  data() {
    var telephone = (rule, value, callback) => {
      if (this.form.areaCode === '' && this.form.telephone === '') {
        callback(new Error('座机电话不能为空'))
      } else {
        var reg = /^0\d{2,3}-\d{7,8}$/;
        let telephone = this.form.areaCode + '-' + this.form.telephone
        if (!reg.test(telephone)) {
          callback(new Error('请输入正确座机电话'))
        } else {
          callback();
        }
      }
    }
    var begdateTime = (rule,value,callback) =>{
      this.$refs.form.validateField('enddate_due')
      if (this.form.enddate_due !== ''){
        if (value > this.form.enddate_due){
          callback(new Error('预计开工时间不能晚于预计完工时间'))
        }else {
          callback();
        }
      } else {
        callback();
      }
    }
    var enddateTime = (rule,value,callback) =>{
      if (value && this.form.begdate_due !== ''){
        if (value < this.form.begdate_due){
          callback(new Error('预计完工时间不能早于预计开工时间'))
        }else {
          callback();
        }
      }  else if (value && this.form.begdate_due === '') {
        callback(new Error('预计完工时间不能早于预计开工时间'))
      }else {
        callback();
      }
    }
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      drawer:false,
      activityVisible:false,
      form:{
        "sat_orderclueid": 0,
        "enterprisename":"",
        "name": "",
        "phonenumber": "",
        "province": "",
        "city": "",
        "county": "",
        "address": "",
        "notes": "",
        "cluesource": "",
        "sat_campaignid":0,//活动id，当活动id大于0是默认业务员创建
        "isprivate":0,//0表示公海，1表示私域
        "tradefield":"",
        "unitname":'',
        "areaCode":'',
        "telephone":'',
        "isTelephone":'0',
        "campaign_name":''
      },
      unitnameList:[],
      rules:{
        phonenumber:[
          { pattern:/^1[3-9]\d{9}$/, message: '请输入正确手机号码',trigger: 'change' },
          { required: true, message: '请输入手机号', trigger: 'blur' },

        ],
        begdate_due:[
          { required: false, validator: begdateTime, trigger: 'change' }
        ],
        name:[
          { required: true, message: '请输入联系人', trigger: 'blur'}
        ],
        enddate_due:[
          { required: false, validator: enddateTime, trigger: 'change' }
        ],
        tradefield:[
          { required: true, message: '请选择领域', trigger: 'change'}
        ],
        scale:[
          {required: false,pattern:/^\d+(.\d{1,2})?$/, message: '请输入数字值', trigger: 'blur'}
        ],
        totalinvestment:[
          {required: false,pattern:/^\d+(.\d{1,2})?$/, message: '请输入数字值', trigger: 'blur'}
        ],
        costofconstruction:[
          {required: false,pattern:/^\d+(.\d{1,2})?$/, message: '请输入数字值', trigger: 'blur'}
        ],
        telephone:[
          { required: true, validator: telephone, trigger: 'change' }
        ],
        cluesource:[
          { required: true, message: '请选择来源', trigger: 'change'}
        ],
        campaign_name:[
          { required: true, message: '请选择市场活动', trigger: 'change'}
        ],
      },
      options:[],
      tradefieldSelect:[],
      siteid:''
    }
  },
  props:['data','disabled','rowData'],
  methods:{
    editBtn () {
      this.drawer = true
      this.siteid = JSON.parse(sessionStorage.getItem('active_account')).siteid
      this.form = Object.assign({},this.form,this.data)
      this.form.enterprisename = this.data.enterprisename_customer
      this.form.province = [this.form.province,this.form.city,this.form.county]
      this.form.sat_campaignid = this.$route.query.id
      console.log(this.form.cluesource,'dddd')
      this.form.totalinvestment !== 0 ? this.form.totalinvestment =  this.tool.formatAmount(this.form.totalinvestment,2): this.form.totalinvestment =''
      this.form.costofconstruction !== 0 ? this.form.costofconstruction =  this.tool.formatAmount(this.form.costofconstruction,2): this.form.costofconstruction =''
      if ((this.form.phonenumber.indexOf('-')) != '-1'){
        this.form.isTelephone = '1'
        this.form.areaCode = this.data.phonenumber.substring(0,this.form.phonenumber.indexOf('-'))
        this.form.telephone = this.data.phonenumber.substring(this.form.areaCode.length+1)
        this.form.phonenumber = ''
      }else {
        this.form.isTelephone = '0'
        this.form.areaCode = ''
        this.form.telephone = ''
      }
      this.queryTradefield()
      this.queryUnitname()
    },
    add () {
      if (this.form.begdate_due !== ''){
        const data = new Date(this.form.begdate_due)
        if (data.getMonth() +1 < 10){
          this.form.begdate_due = data.getFullYear() + '-0' + (data.getMonth() + 1)
        }else {
          this.form.begdate_due = data.getFullYear() + '-' + (data.getMonth() + 1)
        }
      }else {
        this.form.begdate_due = ''
      }
      if (this.form.enddate_due !== ''){
        const data = new Date(this.form.enddate_due)
        if (data.getMonth() +1 < 10){
          this.form.enddate_due = data.getFullYear() + '-0' + (data.getMonth() + 1)
        }else {
          this.form.enddate_due = data.getFullYear() + '-' + (data.getMonth() + 1)
        }
      }else {
        this.form.enddate_due = ''
      }
      this.$refs['form'].validate(async (valid) => {
        if (!valid) {
          this.$notify({
            title: '警告',
            message: '请按照要求输入信息',
            type: 'warning'
          });
          return false
        }else if (this.form.enterprisename === '' && this.form.projectname === ''){
          this.$notify({
            title: '警告',
            message: '客户名称或项目名称不能为空',
            type: 'warning'
          });
          return false
        }
        if(this.form.province.length > 0) {
          this.form.city = this.form.province[1]
          this.form.county = this.form.province[2]
          this.form.province = this.form.province[0]
        }
        if (this.form.isTelephone == '1'){
          this.form.phonenumber = this.form.areaCode + "-" + this.form.telephone
        }
        const res = await this.$api.requested({
          "id": 20221205162402,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.drawer = false
          this.$refs.form.resetFields()
          this.$refs.sourceRef.option = []
          this.$refs.sourceRef.value = ''
          this.$emit('onSuccess')
        })
      });
    },
    cascaderChange(val) {
      this.form.province = val
    },
    centerChange(data) {
      this.form.campaign_name = data[0].name
      this.form.sat_campaignid = data[0].sat_campaignid
      this.activityVisible = false
    },
    /*工商信息*/
    businessSelect(val, regProvince) {
      this.$confirm('是否以查询的工商信息更新客户信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs.businessRef.businessShow = false;
        this.form.enterprisename = val.companyName;
        this.form.address = val.address === "-" ? '' : val.address;
        this.form.province = [regProvince, val.regCity, val.regArea];
        this.form.city = val.regCity;
        this.form.county = val.regArea;
      }).catch(() => {
        this.$refs.businessRef.businessShow = false;
        this.$message({
          type: 'info',
          message: '已取消更新'
        });
      })
    },
    onClose() {
      this.drawer = false
      this.$refs.sourceRef.option = []
      this.$refs.sourceRef.value = ''
    },
    /*获取领域*/
    queryTradefield() {
      this.$store.dispatch('optiontypeselect', 'tradefield').then(res => {
        this.tradefieldSelect = res.data
      })
    },
    /*获取单位*/
    queryUnitname() {
      this.$store.dispatch('optiontypeselect', 'scaleunitname').then(res => {
        if (this.form.scale === '') {
          this.form.unitname = res.data[0].value
        }
        this.unitnameList = res.data
      })
    },
    /*联系人选择*/
    contactSelect(val){
      if (val){
        this.form.name = val.name
        if (val.phonenumber.indexOf('-') != '-1'){
          this.form.isTelephone = '1'
          this.form.areaCode = val.phonenumber.substring(0,val.phonenumber.indexOf('-'))
          this.form.telephone = val.phonenumber.substring(this.form.areaCode.length+1)
          this.form.phonenumber = ''
        }else {
          this.form.isTelephone = '0'
          this.form.phonenumber = val.phonenumber
          this.form.areaCode = ''
          this.form.telephone = ''
        }
      }else {
        this.form.name = this.$refs.contactsRef.name
      }

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

</script>
<style scoped>
.dialog-footer{
  margin-top:32px;
  text-align: center;
}
</style>