yos_web/src/SManagement/orderclue/components/edit.vue

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

            <el-col :span="24">
              <el-form-item label="微信:" prop="wechatnum">
                <el-input v-model="param.wechatnum" placeholder="请填写微信"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="省市县:" prop="province">
                <el-cascader  class="width-240" v-model="param.province" :options="arealist()"
                             @change="cascaderChange">
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="地址:" prop="address">
                <el-input v-model="param.address"  placeholder="请填写地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目名称:" prop="projectname">
                <el-input v-model="param.projectname" placeholder="请填写项目名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="项目规模:" prop="scale" >
                <el-input v-model="param.scale" placeholder="请填写数值" class="inline-16"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-select v-model="param.unitname" placeholder="请选择单位" size="mini" >
                <el-option
                    v-for="item in unitnameList"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  <!--                    <span style="float: left">{{ item.value }}</span>-->
                  <!--                    <span style="float: right; color: #8492a6; font-size: 12px">{{ item.remarks?item.remarks:'暂无描述' }}</span>-->
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="24" v-if="siteid !== 'HY'">
              <el-form-item label="总投资额(万元):" prop="totalinvestment">
                <el-input v-model="param.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="param.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="param.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="param.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="param.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="param.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="param.cluesource"  placeholder="请填写来源"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="线索概况:" prop="notes">
                <el-input type="textarea" v-model="param.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="addOrdercule" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import selectActivity from '@/SManagement/orderclue/components/selectActivity/selectActivity'
import contactsTemplate from '@/template/contactsTemplate/index'
import { log } from '@antv/g2plot/lib/utils'
import businessMessage from "@/components/businessMessage";
import contactsNewTemplate from '@/template/contactsNewTemplate/index'
export default {
  components: {selectActivity,businessMessage,contactsTemplate,contactsNewTemplate},
  data () {
    var telephone = (rule,value,callback) =>{
      if (this.param.areaCode === '' && this.param.telephone === ''){
        callback(new Error('座机电话不能为空'))
      } else {
        var reg=/^0\d{2,3}-\d{7,8}$/
        let telephone = this.param.areaCode + '-' + this.param.telephone
        if (!reg.test(telephone)){
          callback(new Error('请输入正确座机电话'))
        }else {
          callback();
        }
      }
    }
    var begdateTime = (rule,value,callback) =>{
      this.$refs.ruleForm.validateField('enddate_due')
      if (this.param.enddate_due !== ''){
        if (value > this.param.enddate_due){
          callback(new Error('预计开工时间不能晚于预计完工时间'))
        }else {
          callback();
        }
      } else {
        callback();
      }
    }
    var enddateTime = (rule,value,callback) =>{
      if (value && this.param.begdate_due !== ''){
        if (value < this.param.begdate_due){
          callback(new Error('预计完工时间不能早于预计开工时间'))
        }else {
          callback();
        }
      }  else if (value && this.param.begdate_due === '') {
        callback(new Error('预计完工时间不能早于预计开工时间'))
      }else {
        callback();
      }
    }
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      drawer: false,
      activityVisible:false,
      siteid:'',
      param: {
        "sat_orderclueid": 0,
        "enterprisename":"",
        "name": "",
        "phonenumber": "",
        "province": "",
        "city": "",
        "county": "",
        "address": "",
        "notes": "",
        "cluesource": "",
        "isprivate":1,
        "projectname": "",
        "scale": "",
        "costofconstruction": '', //造价（百万）
        "totalinvestment": '', //总投资额（百万）
        "begdate_due": "", //预计开工时间
        "enddate_due": "", //预计完工时间
        "tradefield":"",
        "unitname":'',
        "areaCode":'',
        "telephone":'',
        "isTelephone":'0',
      },
      rules: {
        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: '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' }
          /* { required: true, message: '请输入座机电话', trigger: 'change' },
           { pattern:/^0\d{2,3}-\d{7,8}$/, message: '请输入正确座机电话',trigger: 'change' }*/
        ],
       /* totalinvestment:[
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback()
              } else if (!this.isNumber(value)) {
                callback(new Error('请输入数字值'))
              } else {
                callback()
              }
            },
            trigger:'blur'
          }
        ],
        costofconstruction:[
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback()
              } else if (!this.isNumber(value)) {
                callback(new Error('请输入数字值'))
              } else {
                callback()
              }
            },
            trigger:'blur'
          }
        ]*/
      },
      areaSelectResult: '',
      options: [],
      isHandle:'',
      tradefieldSelect:[],
      unitnameList:[]
    }
  },
  props: {
    updataList: {
      type: Function
    },
    getDetail: {
      type: Function
    },
    position: {
      type: String
    },
    data: {
      type: Object
    },
    disabled: Boolean
  },
  inject: ['arealist'],
  computed: {
    _arealist () {
      return this.arealist()
    }
  },
  created () {
  },
  mounted () {
  },

  methods: {
    isNumber (val) {
      var regPos = /^\d+(\.\d+)?$/
      var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
      if (regPos.test(val) || regNeg.test(val)) {
        return true
      } else {
        return false
      }
    },
    editBtn () {
      this.drawer = true
      this.param = Object.assign({}, this.param, this.data)
      this.param.province = [this.data.province, this.data.city, this.data.county]
      this.param.enterprisename = this.data.enterprisename_customer
      this.areaSelectResult = this.param.province
      this.param.totalinvestment !== 0 ? this.param.totalinvestment =  this.tool.formatAmount(this.param.totalinvestment,2): this.param.totalinvestment =''
      this.param.costofconstruction !== 0 ? this.param.costofconstruction =  this.tool.formatAmount(this.param.costofconstruction,2): this.param.costofconstruction =''
      if ((this.param.phonenumber.indexOf('-')) != '-1'){
        this.param.isTelephone = '1'
        this.param.areaCode = this.data.phonenumber.substring(0,this.param.phonenumber.indexOf('-'))
        this.param.telephone = this.data.phonenumber.substring(this.param.areaCode.length+1)
        this.param.phonenumber = ''
      }else {
        this.param.isTelephone = '0'
        this.param.areaCode = ''
        this.param.telephone = ''
      }
      this.queryTradefield()
      this.queryUnitname()
      this.siteid = JSON.parse(sessionStorage.getItem('active_account')).siteid
    },
    handleClose () {
      this.drawer = false
    },
    addOrdercule () {
      if (this.param.begdate_due !== ''){
        const data = new Date(this.param.begdate_due)
        if (data.getMonth() +1 < 10){
          this.param.begdate_due = data.getFullYear() + '-0' + (data.getMonth() + 1)
        }else {
          this.param.begdate_due = data.getFullYear() + '-' + (data.getMonth() + 1)
        }
      }else {
        this.param.begdate_due = ''
      }
      if (this.param.enddate_due !== ''){
        const data = new Date(this.param.enddate_due)
        if (data.getMonth() +1 < 10){
          this.param.enddate_due = data.getFullYear() + '-0' + (data.getMonth() + 1)
        }else {
          this.param.enddate_due = data.getFullYear() + '-' + (data.getMonth() + 1)
        }
      }else {
        this.param.enddate_due = ''
      }
      if (this.areaSelectResult.length > 1) {
        this.param.province = this.areaSelectResult[0]
        this.param.city = this.areaSelectResult[1]
        this.param.county = this.areaSelectResult[2]
      } else {
        this.param.province = this.areaSelectResult[0]
      }
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          this.$notify({
            title: '警告',
            message: '请按照要求输入信息',
            type: 'warning'
          });
          return false
        }else if (this.param.enterprisename === '' && this.param.projectname === ''){
          this.$notify({
            title: '警告',
            message: '客户名称或项目名称不能为空',
            type: 'warning'
          });
          return false
        }
        if (this.param.isTelephone == '1'){
          this.param.phonenumber = this.param.areaCode + "-" + this.param.telephone
        }
        let res = await this.$api.requested({
          "id":20221205162402,
          "content": this.param
        })
        this.tool.showMessage(res, () => {
          this.$refs.ruleForm.resetFields()
          this.drawer = false
          this.areaSelectResult = []
          this.$emit('onSuccess')
        })
      })

    },
    cascaderChange (result) {
      this.areaSelectResult = result

    },
    centerChange (data) {
      this.param.campaign_name = data[0].name
      this.param.sat_campaignid = data[0].sat_campaignid
      this.activityVisible = false
    },
    /*工商信息*/
    businessData(val){
      console.log(val)
      this.param.enterprisename = val.companyName
      this.param.address = val.address === '-' ? '' : val.address
      this.areaSelectResult = [val.regProvince,val.regCity,val.regArea]
      this.param.province = [val.regProvince,val.regCity,val.regArea]
    },
    onClose(){
      this.$refs.businessMessage.businessShow = false
      this.drawer = false
    },
    /*获取领域*/
    queryTradefield(){
      this.$store.dispatch('optiontypeselect','tradefield').then(res=>{
        this.tradefieldSelect = res.data
      })
    },
    /*获取单位*/
    queryUnitname(){
      this.$store.dispatch('optiontypeselect','scaleunitname').then(res=>{
        if (this.param.scale === ''){
          this.param.unitname = res.data[0].value
        }
        this.unitnameList = res.data
      })
    },
    /*联系人选择*/
    contactSelect(val){
      if (val){
        this.param.name = val.name
        if (val.phonenumber.indexOf('-') != '-1'){
          this.param.isTelephone = '1'
          this.param.areaCode = val.phonenumber.substring(0,val.phonenumber.indexOf('-'))
          this.param.telephone = val.phonenumber.substring(this.param.areaCode.length+1)
          this.param.phonenumber = ''
        }else {
          this.param.isTelephone = '0'
          this.param.phonenumber = val.phonenumber
          this.param.areaCode = ''
          this.param.telephone = ''
        }
      }else {
        this.param.name = this.$refs.contactsRef.name
      }

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

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