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

<template>
  <div class="edit">
    <el-button 
              @click="dialogVisible=true" 
              size="small" 
              type="primary" 
              v-if="position == 'detail'"
              :disabled="data.data.status == '待跟进' || data.data.status == '跟进中' ? false : true">编辑</el-button>
    <p  @click="dialogVisible=true" v-else>编辑</p>
    <el-dialog
      title="编辑线索"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :model="param.content" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm" label-position="left">
        <el-form-item label="客户名称" prop="name">
          <el-input v-model="param.content.name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phonenumber">
          <el-input v-model="param.content.phonenumber" size="small"></el-input>
        </el-form-item>
        <el-form-item label="省市县" prop="province">
          <el-cascader
            class="width-240"
            v-model="param.content.province"
            :options="arealist"
            @change="cascaderChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="param.content.address" size="small"></el-input>
        </el-form-item>
        <el-form-item label="来源" prop="cluesource">
          <el-input v-model="param.content.cluesource" size="small"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input type="textarea" v-model="param.content.notes" size="small"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addOrdercule" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils';
export default {
  name: 'add',
  data() {
    let phoneCheck = (rule,value,callback) => {
      if(!this.tool.checkPhoneFun(value)) {
        callback(new Error('请输入正确手机号'))
      }else {
        callback()
      }
    }
    let checkLength = (rule,value,callback) => {
      if(value && value.length > 25) {
        callback(new Error('字符限制在25个之内'))
      }else {
        callback()
      }
    }
    return {
      param: {
        "classname": "saletool.orderclue.web.orderclue",
        "method": "edit",
        "content": {
            "sat_orderclueid": 0,
            "name": "",
            "phonenumber": "13812345678",
            "province": "",
            "city": "",
            "county": "",
            "address": "",
            "notes": "",
            "cluesource": ""
        }
      },
      dialogVisible:false,
      rules: {
        phonenumber:[
          {required:true,message:'请输入手机号',trigger:'blur'},
          {validator:phoneCheck,trigger:'blur'}
        ],
        province:[
          {required:true,message:'内容不能为空',trigger:'blur'},
        ],
        cluesource:[
          {required:true,message:'内容不能为空',trigger:'blur'},
          {validator:checkLength,trigger:'blur'}
        ],
      },
      arealist:[],
      areaSelectResult:[]
    };
  },
  props:{
    updataList: {
      type:Function
    },
    getDetail: {
      type:Function
    },
    position: {
      type:String 
    },
    data: {
      type: Object
    }
  },
  computed:{
  },
  watch:{
    data: {
      handler(val) {
        this.param = {
          "classname": "saletool.orderclue.web.orderclue",
          "method": "edit",
          "content": {
            "sat_orderclueid": val.data.sat_orderclueid,
            "name": val.data.name,
            "phonenumber": val.data.phonenumber,
            "province": val.data.city ? [val.data.province,val.data.city,val.data.county] : [val.data.province],
            "city": val.data.province,
            "county": val.data.province,
            "address": val.data.address,
            "notes": val.data.notes,
            "cluesource": val.data.cluesource
          }
        },
        this.areaSelectResult = val.data.city ? [val.data.province,val.data.city,val.data.county] : [val.data.province]
      }
    }
  },
  created() {
    this.query_arealist()
  },
  methods: {
    async query_arealist() {
      const res = await this.$api.requested({
        "classname": "system.tools",
        "method": "query_arealist",
        "content": {
        }
      })
      this.arealist = this.tool.createMenu(res.data)
    },
    handleClose() {
      this.dialogVisible = false
    },
    addOrdercule() {
      if(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 {
        this.param.content.province = this.areaSelectResult[0]
      }
      this.$refs.ruleForm.validate( val => {
        if( !val ) return this.$notify({
          title:'提示',
          message:'请按照要求输入信息',
          type:'warning'
        })
        this.$api.requested(this.param).then( res => {
          this.tool.showMessage(res)
          this.$refs.ruleForm.resetFields()
          this.dialogVisible = false  
          this.areaSelectResult = []
          this.$emit('updataList')
          this.$emit('getDetail')
        })
      })
      
    },
    cascaderChange(result) {
      this.areaSelectResult = result
    }
  },
};
</script>

<style scoped>
  /deep/.el-dialog__body {
    padding-bottom: 0;
  }
  /deep/.el-dialog__footer {
    display: flex;
    justify-content: space-around;
    padding-top: 0;
  }
  .edit {
    display: inline-block;
  }
  .width-240 {
    width: 100%;
  }
</style>