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="800px"
      direction="rtl"
      append-to-body
      @close="onClose">
      <div class="drawer__panel">
        <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">
            <businessMessage ref="businessMessage" :keyWord="form.enterprisename" @businessData="businessData"></businessMessage>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系人" prop="name">
              <el-input v-model="form.name" placeholder="请输入联系人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系方式" prop="phonenumber">
              <el-input v-model="form.phonenumber" 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="24">
            <el-form-item label="项目规模:" prop="scale">
              <el-input v-model="form.scale" placeholder="请填写建筑面积(㎡)或者吨位(t)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="总投资额(万元):" prop="totalinvestment">
              <el-input v-model="form.totalinvestment" placeholder="请填写金额(万元)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <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="sat_campaignid">
              <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">
              <el-input v-model="form.cluesource" placeholder="请输入来源"></el-input>
            </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>
      </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'
export default {
  components: {selectActivity,businessMessage},
  data () {
    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":""
      },
      rules:{
        phonenumber:[
          { pattern:/^1[3-9]\d{9}$/, message: '请输入正确手机号码',trigger: 'blur' },
          { required: true, message: '请输入手机号', trigger: 'blur' },

        ],
        begdate_due:[
          { required: false, validator: begdateTime, trigger: 'change' }
        ],
        enddate_due:[
          { required: false, validator: enddateTime, trigger: 'change' }
        ],
        tradefield:[
          { required: true, message: '请选择领域', trigger: 'change'}
        ],
      },
      options:[],
      tradefieldSelect:[],
    }
  },
  props:['data','disabled','rowData'],
  methods:{
    editBtn () {
      this.drawer = true
      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
      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 =''
      this.queryTradefield()
    },
    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) 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]
        }
        const res = await this.$api.requested({
          "id": 20221205162402,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.drawer = false
          this.$refs.form.resetFields()
          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
      this.form.province = [val.regProvince,val.regCity,val.regArea]
    },
    onClose(){
      this.drawer = false
      this.$refs.businessMessage.businessShow = false
    },
    /*获取领域*/
    queryTradefield(){
      this.$store.dispatch('optiontypeselect','tradefield').then(res=>{
        this.tradefieldSelect = res.data
      })
    },
  }
}

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