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

<template>
  <div>
    <el-button size="small" type="primary" @click="onShow">新 建</el-button>
    <el-drawer title="新建线索" :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="120px" class="demo-ruleForm"
                   label-position="right">
            <el-col :span="20">
              <el-form-item label="客户名称:" prop="enterprisename">
                <el-input v-model="param.content.enterprisename" size="small" placeholder="请填写客户名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="0" >
                <businessMessage ref="businessMessage" :keyWord="param.content.enterprisename" @businessData="businessData"></businessMessage>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系人:" prop="name">
                <el-input v-model="param.content.name" size="small" placeholder="请填写联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系方式:" prop="phonenumber">
                <el-input v-model="param.content.phonenumber" size="small" placeholder="请填写手机号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="省市县:" prop="province">
                <el-cascader size="small" 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="地址" prop="address">
                <el-input v-model="param.content.address" size="small" placeholder="请填写地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目名称:" prop="projectname">
                <el-input v-model="param.content.projectname" placeholder="请填写项目名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目规模:" prop="scale">
                <el-input v-model="param.content.scale" placeholder="请填写建筑面积(㎡)或者吨位(t)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="总投资额(百万):" prop="totalinvestment">
                <el-input v-model="param.content.totalinvestment" placeholder="请填写金额(百万)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="造价(百万):" prop="costofconstruction">
                <el-input v-model="param.content.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.content.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="param.content.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-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" size="small" @focus="activityVisible=true" v-model="param.content.campaign_name" placeholder="请选择市场活动"></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="来源:" prop="cluesource">
                <el-input v-model="param.content.cluesource" size="small" 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.content.notes" size="small" 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 businessMessage from "@/components/businessMessage";
export default {
  components: {selectActivity,businessMessage},
  data () {
    var begdateTime = (rule,value,callback) =>{
      if (this.param.content.enddate_due !== ''){
        if (value > this.param.content.enddate_due){
          callback(new Error('预计开工时间不能晚于预计完工时间'))
        }else {
          callback();
        }
      } else {
        callback();
      }
    }
    var enddateTime = (rule,value,callback) =>{
      if (this.param.content.begdate_due !== ''){
        if (value < this.param.content.begdate_due){
          callback(new Error('预计完工时间不能早于预计开工时间'))
        }else {
          callback();
        }
      }  else {
        callback();
      }
    }
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      activityVisible:false,
      drawer: false,
      param: {
        "id":20221205162402,
        "content": {
          "sat_orderclueid": 0,
          "enterprisename":"",
          "name": "",
          "phonenumber": "",
          "province": "",
          "city": "",
          "county": "",
          "address": "",
          "notes": "",
          "cluesource": "",
          "sat_campaignid":0,
          "isprivate":1,
          "campaign_name":'',
          "projectname": "",
          "scale": "",
          "costofconstruction": '', //造价（百万）
          "totalinvestment": '', //总投资额（百万）
          "begdate_due": "", //预计开工时间
          "enddate_due": "" //预计完工时间
        }
      },
      rules: {
        phonenumber:[
          {required:true,message:'请输入手机号',trigger:'blur'},
          { pattern:/^1[3-9]\d{9}$/, message: '请输入正确手机号码',trigger: 'blur' }
        ],
        begdate_due:[
          { required: false, validator: begdateTime, trigger: 'change' }
        ],
        enddate_due:[
          { required: false, validator: enddateTime, trigger: 'change' }
        ],
      },
      areaSelectResult:'',
      options: []
    }
  },
  props:{
    updataList: {
      type:Function
    }
  },
  inject:['arealist'],
  computed:{
    _arealist() {
      return this.arealist()
    }
  },
  watch: {
    drawer (val) {
      !val && this.$refs.ruleForm.resetFields()
    }
  },
  methods: {
    onShow () {
      this.drawer = true
    },
    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 val => {
          if( !val ) return this.$notify({
            title:'提示',
            message:'请按照要求填写信息',
            type:'warning'
          })
          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]
          }
          let res = await this.$api.requested(this.param)
          this.tool.showMessage(res,() => {
            this.$refs.ruleForm.resetFields()
            this.drawer = false  
            this.areaSelectResult = []
            this.param.content = {
              "sat_orderclueid": 0,
              "enterprisename":"",
              "name": "",
              "phonenumber": "",
              "province": "",
              "city": "",
              "county": "",
              "address": "",
              "notes": "",
              "cluesource": "",
              "sat_campaignid":0,
              "isprivate":1,
              "campaign_name":''
            }
            this.$emit('onSuccess')
          })
      })
      
    },
    cascaderChange(result) {
      this.areaSelectResult = result
    },
    onClose () {
      this.drawer = false
      this.$refs['ruleForm'].resetFields()
      this.activityVisible = false
      this.param.content = {
        "sat_orderclueid": 0,
        "enterprisename":"",
        "name": "",
        "phonenumber": "",
        "province": "",
        "city": "",
        "county": "",
        "address": "",
        "notes": "",
        "cluesource": "",
        "sat_campaignid":0,
        "isprivate":1,
        "campaign_name":''
      }
      this.$refs.businessMessage.businessShow = false
    },
    centerChange (data) {
      this.param.content.campaign_name = data[0].name
      this.param.content.sat_campaignid = data[0].sat_campaignid
      this.activityVisible = false
    },
    /*工商信息*/
    businessData(val){
      console.log(val)
      this.param.content.enterprisename = val.companyName
      this.param.content.address = val.address
      this.areaSelectResult = [val.regProvince,val.regCity,val.regArea]
      this.param.content.province = [val.regProvince,val.regCity,val.regArea]
      console.log(this.param)
    }
  }
}

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