yos_web/src/HManagement/clueManage/clue_import/detailPage/modules/add.vue

<template>
  <div>
    <el-button size="mini" type="primary" :disabled="disabled" @click="onShow" style="margin-bottom:16px">新 建</el-button>
    <el-drawer
      title="新建线索"
      :visible.sync="drawer"
      size="800px"
      direction="rtl"
      append-to-body>
      <div class="drawer__panel">
        <el-form :model="form" :rules="rule" ref="form" label-position="right" label-width="80px" size="small">
          <el-form-item label="企业名称" prop="enterprisename">
            <el-input v-model="form.enterprisename" autocomplete="off" placeholder="输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="form.name" autocomplete="off" placeholder="请输入联系人"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phonenumber">
            <el-input v-model="form.phonenumber" autocomplete="off" placeholder="输入手机号"></el-input>
          </el-form-item>
          <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-form-item label="地址" prop="address">
            <el-input v-model="form.address" autocomplete="off" placeholder="输入地址"></el-input>
          </el-form-item>
          <el-form-item label="市场活动" prop="campaignName">
            <el-input v-model="form.campaignName" autocomplete="off" placeholder="输入地址"></el-input>
          </el-form-item>
          <el-form-item label="来源" prop="cluesource">
            <el-input v-model="form.cluesource" autocomplete="off" placeholder="输入来源"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.notes" type="textarea" :rows="4" autocomplete="off" placeholder="输入备注"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="drawer = false" 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>

export default {
  props:['data','type','disabled'],
  data () {
    return {
      drawer:false,
      rule:{
        phonenumber:[
          { pattern:/^1[3-9]\d{9}$/, message: '请输入正确手机号码',trigger: 'blur' },
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        province:[{ required: true, message: '请选择', trigger: 'blur' }],
      },
      form:{
        "sat_orderclueuploadbillmxid": 0,
        "sat_orderclueuploadbillid": this.$route.query.id,
        "name":'',
        "enterprisename":'',
        "notes":'',
        "phonenumber":'',
        "address":'',
        "cluesource":'',
        "province":''
      },
      arealist:[],
      options:[]
    }
  },
  methods:{
    onShow () {
      this.drawer = true
    },
    onSubmit () {
       this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;
        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({
          "classname":"webmanage.saletool.orderclue.orderclue",
          "method": "insertormodify_Orderclueuploadbillmx",
          "content":this.form
        })
        this.tool.showMessage(res,()=>{
          this.drawer = false
          this.$refs.form.resetFields()
          this.$emit('onSuccess')
        })
      });
    },
    cascaderChange (val) {
      this.form.province = val
    }
  }
}

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