yos_web/src/HManagement/clueManage/clue_public/modules/edit.vue

<template>
  <div>
    <el-button size="mini" :type="data.status === '已过期'?'':'primary'" @click="onShow" :disabled="data.status === '已过期'">编 辑</el-button>
    <el-drawer title="编辑线索" append-to-body :visible.sync="dialogFormVisible" :show-close="false" size="800px" @close="onClose">
      <div class="drawer__panel">
        <el-row :gutter="10">
          <el-form :model="form" :rules="rule" ref="form" label-position="right" label-width="120px" size="small">
            <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">
              <el-form-item label-width="0" >
                <businessMessage ref="businessMessage" :keyWord="form.enterprisename" @businessData="businessData"></businessMessage>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系人:" prop="name">
<!--                <contactsTemplate ref="contactsRef" @contactSelect="contactSelect" :name="form.name"></contactsTemplate>-->
                <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="地址:">
                <el-input v-model="form.address" autocomplete="off" 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="选择月"

                >
                </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="选择月"

                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="市场活动:" prop="sat_campaignid">
                <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="form.campaign_name" placeholder="请填写市场活动"></el-input>
                </el-popover>
              </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">
                <el-input v-model="form.cluesource" autocomplete="off" placeholder="请填写来源"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="线索概况:">
                <el-input v-model="form.notes" type="textarea"  autocomplete="off" 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="onSubmit" 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";
import contactsTemplate from '@/template/contactsTemplate/index'
import contactsNewTemplate from '@/template/contactsNewTemplate/index'
export default {
  components: {selectActivity,businessMessage,contactsTemplate,contactsNewTemplate},
  props:['data','type'],
  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();
        }
      },
      activityVisible:false,
      dialogFormVisible:false,
      unitnameList:[],
      rule:{
        phonenumber:[
          { required: true, message: '请输入联系人手机号', trigger: 'blur' },
          { pattern:/^1[3-9]\d{9}$/, message: '请输入正确手机号码',trigger: 'change' }
        ],
        begdate_due:[
          { required: false, validator: begdateTime, trigger: 'change' }
        ],
        enddate_due:[
          { required: false, validator: enddateTime, trigger: 'change' }
        ],
        tradefield:[
          { required: true, message: '请选择领域', trigger: 'change'}
        ],
        name:[
          { required: true, message: '请输入联系人', trigger: 'change,blur'}
        ],
        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' }
        ],
      },
      form:{},
      arealist:[],
      tradefieldSelect:[],
      siteid:''
    }
  },
  methods:{
    onShow () {
      this.dialogFormVisible = true
      this.form = Object.assign({},this.form,this.data)
      this.form.province = [this.data.province, this.data.city, this.data.county]
      this.form.enterprisename = this.data.enterprisename_customer
      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()
      this.siteid = JSON.parse(sessionStorage.getItem('active_account')).siteid
    },
    async onSubmit () {
      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
        }
        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({
          "classname": "webmanage.saletool.orderclue.publicclue.PublicClue",
          "method": "edit",
          "content":this.form
        })
        this.tool.showMessage(res,()=>{
          this.dialogFormVisible = false
          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
    },
    /*工商信息*/
    businessData(val){
      console.log(val)
      this.form.enterprisename = val.companyName
      this.form.address = val.address === '-' ? '' : val.address
      this.form.province = [val.regProvince,val.regCity,val.regArea]
    },
    onClose(){
      this.dialogFormVisible = false
      this.$refs.businessMessage.businessShow = false
      this.activityVisible = false
    },
    /*获取领域*/
    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 = ''
      }
    },
  },
  mounted () {

  }
}

</script>
<style>
</style>