vue 自定义指令（同时绑定多个自定义指令）以及拖拉拽的实现

自定义指令，可以在一个组件内绑定多个自定义指令：

代码：

<div v-show="showPlay" 
       style="position:fixed;top:10px;z-index:99999999999;"
       :style="{width:boxWidth+'px',height:boxHeight+'px',top:'100px',left:'200px'}"
       v-resize = "fnresize"
       v-drag="{setXY:setXY,getFlag:getFlag,setFlag:setFlag,setActive:setActive,setRedBorder:setRedBorder}" 
       id="mydragId" ref="mydragref"  class="drag" :class="{active:isActive,redBorder:redBorder}">
            
                  <el-button
                  style="background:#fff;cursor:pointer;"
                  size="small"
                   @click="closeDragDialog">关闭</el-button>
                    <iframe ref="bdiframe" id="bdiframe" :src="iframeUrl" frameborder="0" 
                    style="width:100%;height:74vh;"
                    ></iframe>
        </div>

其中

 v-resize = "fnresize"

       v-drag="{setXY:setXY,getFlag:getFlag,setFlag:setFlag,setActive:setActive,setRedBorder:setRedBorder}"

都是自定义指令，参数可以是对象也可以是个函数

methods: {
    fnresize(){
      console.log('change----','width:',this.$refs.mydragref.clientWidth,this.$refs.mydragref.clientHeight)
      const mydrag = document.getElementById('mydragId');
      //  mydrag.style.height = (Number(this.$refs.mydragref.clientHeight-300)) + 'px';
      //  mydrag.style.width = (Number(this.$refs.mydragref.clientWidth-300)) + 'px';
      //  console.log('改变后的：iframe宽高：',mydrag.style.width,mydrag.style.height)
    },
}

每次执行v-resize的时候都会自动检测并执行函数内的内容 这里是每次拖动弹框大小都会检测到并执行函数

指令要在vue内配置：

 directives:{
    resize: { // 指令的名称
    bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
      let width = '', height = '';
      function isReize() {
        const style = document.defaultView.getComputedStyle(el);
        if (width !== style.width || height !== style.height) {
          binding.value();  // 关键
        }
        width = style.width;
        height = style.height;
      }
      el.__vueSetInterval__ = setInterval(isReize, 300);
    },
    unbind(el) {
      clearInterval(el.__vueSetInterval__);
    }
  },
    drag: {
      bind: (el, binding) => {
        console.log(el);
        console.log(binding.value);
        //绑定默认样式
        el.style.zIndex = 9;
        el.style.backgroundColor = "rgba(189,220,251,0.88)";
        el.style.radius = "4px"
        //如果为编辑状态
        if (binding.value || binding.value === undefined) {
          //定义该元素的 top left width height
          let x, y, w, h;
          //鼠标的起始和结束坐标
          let cx_start, cy_start, cx_end, cy_end;
          //判断鼠标样式
          el.onmousemove = e => {
            //获取鼠标当前位置
            let cx_now = e.clientX;
            let cy_now = e.clientY;
            //获取div右下角相对浏览器的位置
            let {
              top: el_top,
              left: el_left,
              width: el_width,
              height: el_height
            } = el.getBoundingClientRect();
            let el_bottom_height = el_top + el_height;
            let el_right_width = el_left + el_width;
            //判断鼠标是否在div下边界
            let mouse_in_bottom =
              cy_now <= el_bottom_height + 5 && cy_now >= el_bottom_height - 5;
            //判断鼠标是否在div右边界
            let mouse_in_right =
              cx_now <= el_right_width + 5 && cx_now >= el_right_width - 5;
            if (mouse_in_bottom && mouse_in_right) {
              el.style.cursor = "se-resize";
            } else if (mouse_in_right) {
              el.style.cursor = "e-resize";
            } else if (mouse_in_bottom) {
              el.style.cursor = "s-resize";
            } else {
              el.style.cursor = "move";
            }
          };
          el.onmousedown = e => {
            let mouse = el.style.cursor;
            //更改默认样式
            el.style.backgroundColor = "rgba(189,220,251,0.88)";
            el.style.zIndex = 99;
            //对象解构赋值
            let { left: el_x, top: el_y, width: el_w, height: el_h } = window.getComputedStyle(el);
            x = el_x;
            y = el_y;
            w = el_w;
            h = el_h;
            console.log(x,y,w,h)
            cx_start = e.clientX;
            cy_start = e.clientY;
            //绑定移动事件
            document.onmousemove = e => {
              cx_end = e.clientX;
              cy_end = e.clientY;
              //默认左下方向配置
              let x_move = cx_end - cx_start;
              let y_move = cy_end - cy_start;
              let direct = ["width", "height"];
              let pos = [w, h];
              let move = [x_move, y_move];
              let limit = 50;
              //判断鼠标的类型进行对应的操作
              switch (mouse) {
                case "e-resize":
                  direct = ["width"];
                  pos = [w];
                  move = [x_move];
                  break;
                case "s-resize":
                  direct = ["height"];
                  pos = [h];
                  move = [y_move];
                  break;
                case "move":
                  direct = ["left", "top"];
                  pos = [x, y];
                  limit = 0;
                  break;
              }
              handle_div(direct, pos, move, limit);
            };
            //取消移动事件
            document.onmouseup = e => {
              //还原默认样式
              el.style.zIndex = 9;
              el.style.backgroundColor = "rgba(189,220,251,0.88)";
              document.onmousemove = null;
            };
            /**
             * 操作DOM位置和大小方法
             * @param direct 方向
             * @param pos 尺寸/坐标
             * @param move 拖动距离
             * @param limit 限定范围
             */
            function handle_div(direct, pos, move, limit) {
              for (let i = 0; i < direct.length; i++) {
                let val = parseInt(pos[i]) + move[i];
                val = val <= limit ? limit : val;
                el.style[direct[i]] = val + "px";
              }
            }
          };
        } else {
          el.style.cursor = "default";
          //移除点击事件
          el.onmousedown = null;
          el.onmousemove = null;
        }
      }
    }
  },

方法：

<el-button size="small" @click="openFrame">打开iframe弹框</el-button>

 openFrame(){
      console.log(this.iframeUrl)
      // if(!this.iframeUrl){
      this.iframeUrl = 'your url'
      // }
      this.showPlay = true;
    },

样式千万不要忘了否则拖拉拽不生效：

.drag{
            width: 400px;
            /* height: 30px; */
            position: absolute;
            top: 0;
            left: 0;
            padding:10px;
            border-radius:2px;
            padding:4px;
        }
        .active{
            border: 1px solid rgb(155, 220, 224);
        }
        .redBorder{
            border: 1px solid rgb(238, 205, 205);
        }

 

完整代码参考：

<template>
    <div id="box">
       <div v-show="showPlay" 
       style="position:fixed;top:10px;z-index:99999999999;"
       :style="{width:boxWidth+'px',height:boxHeight+'px',top:'100px',left:'200px'}"
       v-resize = "fnresize"
       v-drag="{setXY:setXY,getFlag:getFlag,setFlag:setFlag,setActive:setActive,setRedBorder:setRedBorder}" 
       id="mydragId" ref="mydragref"  class="drag" :class="{active:isActive,redBorder:redBorder}">
            
                  <el-button
                  style="background:#fff;cursor:pointer;"
                  size="small"
                   @click="closeDragDialog">关闭</el-button>
                    <iframe ref="bdiframe" id="bdiframe" :src="iframeUrl" frameborder="0" 
                    style="width:100%;height:74vh;"
                    ></iframe>
        </div>
        <!-- <template v-if="!customid"> -->
            <!-- 请先绑定客户 -->
            <!-- <noConphone/> -->
        <!-- </template> -->
        <!-- <template v-else> -->
        <template>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="客户姓名" prop="clientName">
                            <el-input size="small" v-model="ruleForm.clientName "></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证号" prop="certNo">
                            <el-input size="small" v-model="ruleForm.certNo " :maxLength="18"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="手机号码" prop="callerNumber">
                        <el-input size="small" v-model="ruleForm.callerNumber" :maxLength="11"></el-input>
                      </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                      <el-form-item label="答复号码" >
                        <el-input size="small" v-model="ruleForm.replyNumber" :maxLength="11"></el-input>
                      </el-form-item>
                    </el-col> -->
                </el-row>
                 <el-divider></el-divider>
                <el-form-item label="服务类型" required>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item prop="serviceLargeType">
                                <el-select size="small" v-model="ruleForm.serviceLargeType" 
                                @change="getServiceType($event, 1)"
                                    placeholder="-- 大类 --">
                                    <el-option 
                                    v-for="item in serviceLargeList" :key="item.code" 
                                    :label="item.name" :value="item.code">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item prop="serviceMediumType">
                                <el-select size="small" v-model="ruleForm.serviceMediumType" ref="serviceMedium" 
                                @change="getServiceType($event, 2)"
                                    placeholder="-- 中类 --">
                                    <el-option 
                                    v-for="item in serviceMediumList" 
                                    :key="item.code" :label="item.name" :value="item.code">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item prop="serviceSmallType">
                                <el-select size="small" v-model="ruleForm.serviceSmallType" placeholder="-- 小类 --">
                                    <el-option 
                                    v-for="item in serviceSmallList" 
                                    :key="item.code" :label="item.name" :value="item.code">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form-item>
                <!-- <el-button size="mini" @click="fnClickDialog">修改服务类型</el-button> -->
                <!-- <el-button size="mini" @click="fnGoChangeServiceType">修改服务类型</el-button> -->
                <!-- <el-button size="mini" @click="fnGoChangeQuestionType">修改问题类型</el-button> -->
                <!-- <el-divider></el-divider> -->
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="业务类型" prop="businessType">
                            <el-select size="small" v-model="ruleForm.businessType" placeholder="-- 请选择 --">
                                <el-option v-for="item in busTypeList" :key="item.key" :label="item.value" :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="涉及地区" prop="involveArea">
                            <el-select size="small" v-model="ruleForm.involveArea " placeholder="-- 请选择 --">
                                <el-option key="" label="请选择城市" value="" ></el-option>
                                <el-option v-for="item in involveList" :key="item.key" :label="item.value" :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="电话内容" prop="phoneContent">
                    <el-input size="small" type="textarea" v-model="ruleForm.phoneContent" rows="3" :maxlength=2000></el-input>
                </el-form-item>
                <el-row :gutter="20">
                    <!-- <el-col :span="12">
                        <el-form-item label="解决情况" prop="serviceStatus">
                            <el-select size="small" v-model="ruleForm.serviceStatus" placeholder="-- 请选择 --">
                                <el-option v-for="item in summarySOlveList" :key="item.key" :label="item.value"
                                    :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="日志来源" prop="logSource">
                            <el-select size="small" v-model="ruleForm.logSource" disabled placeholder="-- 请选择 --">
                                <el-option v-for="item in logSourceList" :key="item.key" :label="item.value" :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button size="small" :disabled="isTurn === 'overform'" type="primary" @click="submitSave('ruleForm')">提交</el-button>
                    <el-button size="small" :disabled="isTurn === 'overform'" type="success" @click="submitForm('ruleForm')">提交并发起工单</el-button>
                    <el-button size="small" @click="openFrame">访问外网</el-button>
                <!-- turn from : {{isTurn}} -->
                </el-form-item>
            </el-form>
        </template>
        <!-- 修改服务类型 -->
                <el-drawer
                  :visible.sync="centerDialogVisible"
                  :modal="true"
                  size="60%"
                  >
                  <div style="height:90vh;overflow:scroll;">
                        <change-service></change-service>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
                  </span>
                </el-drawer>
    </div>
</template>
<script>
import noConphone from '@/components/newcomp/noConphoneLogInp.vue'
import changeService from '@/components/newcomp/changeService.vue'

import cache from '@/utils/cache.js'
//加Rules是严格验证，不加是一般验证
import {phone,card,phoneRules,cardRules} from "@/utils/util.js";
var configss = {
  headers: {
    'Content-Type': 'application/json; charset=UTF-8'
  }
}
export default {
  props: {
      isTurn:{
          type:String,
      },
    dialogId: {
      type: String,
    },
    customid: {
      type: String,
    },
    message: {
      type: Object
    }
  },
  directives:{
    resize: { // 指令的名称
    bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
      let width = '', height = '';
      function isReize() {
        const style = document.defaultView.getComputedStyle(el);
        if (width !== style.width || height !== style.height) {
          binding.value();  // 关键
        }
        width = style.width;
        height = style.height;
      }
      el.__vueSetInterval__ = setInterval(isReize, 300);
    },
    unbind(el) {
      clearInterval(el.__vueSetInterval__);
    }
  },
    drag: {
      bind: (el, binding) => {
        console.log(el);
        console.log(binding.value);
        //绑定默认样式
        el.style.zIndex = 9;
        el.style.backgroundColor = "rgba(189,220,251,0.88)";
        el.style.radius = "4px"
        //如果为编辑状态
        if (binding.value || binding.value === undefined) {
          //定义该元素的 top left width height
          let x, y, w, h;
          //鼠标的起始和结束坐标
          let cx_start, cy_start, cx_end, cy_end;
          //判断鼠标样式
          el.onmousemove = e => {
            //获取鼠标当前位置
            let cx_now = e.clientX;
            let cy_now = e.clientY;
            //获取div右下角相对浏览器的位置
            let {
              top: el_top,
              left: el_left,
              width: el_width,
              height: el_height
            } = el.getBoundingClientRect();
            let el_bottom_height = el_top + el_height;
            let el_right_width = el_left + el_width;
            //判断鼠标是否在div下边界
            let mouse_in_bottom =
              cy_now <= el_bottom_height + 5 && cy_now >= el_bottom_height - 5;
            //判断鼠标是否在div右边界
            let mouse_in_right =
              cx_now <= el_right_width + 5 && cx_now >= el_right_width - 5;
            if (mouse_in_bottom && mouse_in_right) {
              el.style.cursor = "se-resize";
            } else if (mouse_in_right) {
              el.style.cursor = "e-resize";
            } else if (mouse_in_bottom) {
              el.style.cursor = "s-resize";
            } else {
              el.style.cursor = "move";
            }
          };
          el.onmousedown = e => {
            let mouse = el.style.cursor;
            //更改默认样式
            el.style.backgroundColor = "rgba(189,220,251,0.88)";
            el.style.zIndex = 99;
            //对象解构赋值
            let { left: el_x, top: el_y, width: el_w, height: el_h } = window.getComputedStyle(el);
            x = el_x;
            y = el_y;
            w = el_w;
            h = el_h;
            console.log(x,y,w,h)
            cx_start = e.clientX;
            cy_start = e.clientY;
            //绑定移动事件
            document.onmousemove = e => {
              cx_end = e.clientX;
              cy_end = e.clientY;
              //默认左下方向配置
              let x_move = cx_end - cx_start;
              let y_move = cy_end - cy_start;
              let direct = ["width", "height"];
              let pos = [w, h];
              let move = [x_move, y_move];
              let limit = 50;
              //判断鼠标的类型进行对应的操作
              switch (mouse) {
                case "e-resize":
                  direct = ["width"];
                  pos = [w];
                  move = [x_move];
                  break;
                case "s-resize":
                  direct = ["height"];
                  pos = [h];
                  move = [y_move];
                  break;
                case "move":
                  direct = ["left", "top"];
                  pos = [x, y];
                  limit = 0;
                  break;
              }
              handle_div(direct, pos, move, limit);
            };
            //取消移动事件
            document.onmouseup = e => {
              //还原默认样式
              el.style.zIndex = 9;
              el.style.backgroundColor = "rgba(189,220,251,0.88)";
              document.onmousemove = null;
            };
            /**
             * 操作DOM位置和大小方法
             * @param direct 方向
             * @param pos 尺寸/坐标
             * @param move 拖动距离
             * @param limit 限定范围
             */
            function handle_div(direct, pos, move, limit) {
              for (let i = 0; i < direct.length; i++) {
                let val = parseInt(pos[i]) + move[i];
                val = val <= limit ? limit : val;
                el.style[direct[i]] = val + "px";
              }
            }
          };
        } else {
          el.style.cursor = "default";
          //移除点击事件
          el.onmousedown = null;
          el.onmousemove = null;
        }
      }
    }
  },
  data() {
    return {
      boxWidth:"",
      boxHeight:"",
      showPlay:false,
      show:true,
       isActive:null,
      redBorder:null,
      iframeUrl:"",
      centerDialogVisible: false,
      phoneWorkNumberId:window.localStorage.getItem('phoneWorkNumberId')?window.localStorage.getItem('phoneWorkNumberId'):null,//
      isturnDate:false,//来自哪里跳转
      remainId:null,//提交后端数据记录发来的id-防止后端重复提交不断建表
      contactId:null,//新增传入后端的contacctid
      ruleForm: {
            trafficId:'',
            clientName: '',
            certNo: '',
            callerNumber: '',
            replyNumber: '',
            serviceLargeType: '',
            serviceMediumType: '',
            serviceSmallType: '',
            businessType: '',
            involveArea: '',
            serviceStatus: '',
            logSource: '',
            phoneContent: ''
      },
      busTypeList: [], // 业务类型
      involveList: [], // 涉及地区
      summarySOlveList: [], // 解决情况
      logSourceList: [], // 日志来源
      serviceLargeList: [], // 服务类型第1级
      serviceMediumList: [], // 服务类型第2级
      serviceSmallList: [], // 服务类型第3级
      rules: {
        clientName: [{
          required: true,
          message: '请输入客户姓名',
          trigger: 'blur'
        }],
        certNo: [{
          required: true,
          // message: '请输入身份证号',
          // validator:card,//带字母的身份证不能输入会被限制
          trigger: 'blur'
        }],
        callerNumber: [{
          required: true,
          message: '请输入来电号码',
          // validator:phone,
          trigger: 'blur'
        }],
        // replyNumber: [{
        //   required: true,
        //   // message: '请输入联系号码',
        //   validator:phone,
        //   trigger: 'blur'
        // }],
        serviceLargeType: [{
          required: true,
          message: '请选择服务类型',
          trigger: 'change'
        }],
        serviceMediumType: [{
          required: true,
          message: '请选择服务类型',
          trigger: 'change'
        }],
        serviceSmallType: [{
          required: true,
          message: '请选择服务类型',
          trigger: 'change'
        }],
        businessType: [{
          required: true,
          message: '请选择业务类型',
          trigger: 'change'
        }],
        involveArea: [{
          required: true,
          message: '请选择涉及地区',
          trigger: 'change'
        }],
        phoneContent: [{
          required: true,
          message: '请输入电话内容',
          trigger: 'blur'
        }],
        serviceStatus: [{
          required: true,
          message: '请选择解决情况',
          trigger: 'change'
        }],
        logSource: [{
          required: true,
          message: '请选择日志来源',
          trigger: 'change'
        }],
      }
    };
  },
  components:{
      noConphone,
      changeService
  },
  created() {
    window.localStorage.removeItem('phoneWorkNumberId')

    //  this.$store.state.msgReminder.msgThreeReminder
    //  this.$store.state.imchat.imchatList.length
    // this.isturnDate = this.$state.
    // "/phone/99dfd2c2cc4646f79d822de8a9d57a61
    ///phone/99dfd2c2cc4646f79d822de8a9d57a61
    // fullPath: "/phone/350cea668ad942d3a4bbfdf4f7e33db3"
    //  "/phone/4643f6d71592478cab616b4564b09a5c"
    //meta: {title: "phone受理页"

    // console.log(this.$route,this.$router)
    // 默认带入客户姓名，身份证号，来电号码，联系号码
    this.contactId = this.message.contactId//新增contactId
    const { callType, customName, callNo, phone, idNo } = this.message
    this.ruleForm.clientName = customName
    this.ruleForm.certNo = idNo
    this.ruleForm.callerNumber = phone
    this.ruleForm.replyNumber = callNo
    if (callType === "outcall") { // 外呼/去电
      this.ruleForm.logSource = '1'
    } else if (callType === "incall") { // 入呼/来电
      this.ruleForm.logSource = '0'
    }
  // 获取服务类型数据
    this.getServiceType('0', 0)
    // 获取字典项
    const getAllDatas = cache.getDicsStorageByName('getAllDatas')
    this.busTypeList = getAllDatas['BUSSINESS_TYPE']  
    this.involveList = getAllDatas['INVOLVE_AREA']
    this.summarySOlveList = getAllDatas['SUMMARY_SOLVE']
    this.logSourceList = getAllDatas['LOG_SOURCE']
     //工单类型默认求助
    console.log(this.busTypeList)
    
    if(this.busTypeList){
        this.$set(this.ruleForm,"businessType",this.busTypeList[6].key)
    }
  },
  mounted(){
    this.getIframeWH()
  },
  destroyed () {
  console.log('destroyed')
  },
  methods: {
    fnresize(){
      console.log('change----','width:',this.$refs.mydragref.clientWidth,this.$refs.mydragref.clientHeight)
      const mydrag = document.getElementById('mydragId');
      //  mydrag.style.height = (Number(this.$refs.mydragref.clientHeight-300)) + 'px';
      //  mydrag.style.width = (Number(this.$refs.mydragref.clientWidth-300)) + 'px';
      //  console.log('改变后的：iframe宽高：',mydrag.style.width,mydrag.style.height)
    },
    //全屏iframe
    getIframeWH(){
      // 设置弹屏
       this.boxWidth = document.documentElement.clientWidth-400;
       this.boxHeight = document.documentElement.clientHeight-200;
       const mydrag = document.getElementById('mydragId');
      //  mydrag.style.width = (Number(this.boxWidth)-200-200) + 'px';
      //  mydrag.style.top = '100px'
      //  mydrag.style.left = '200px'
      //  mydrag.style.height = (Number(this.boxHeight)-200) + 'px';
      //  设置iframe
    },
    // 关闭iframe
    closeDragDialog(){
      console.log('close')
      this.showPlay = false
      this.show = false
      this.iframeUrl = ""
    },
     setXY:function (x,y) {
                this.x=x;
                this.y=y;
            },
            getFlag:function () {
                return this.flag;
            },
            setFlag:function (num) {
                this.flag=num;
            },
            setActive:function (b) {
                this.isActive=b;
            },
            setRedBorder:function (b) {
                this.redBorder=b;
            },
    openFrame(){
      console.log(this.iframeUrl)
      // if(!this.iframeUrl){
      this.iframeUrl = 'http://192.168.24.192:7888/uap-sso?id=1001'
      // }
      this.showPlay = true;
    },
    fnClickDialog(){
       this.centerDialogVisible = true
    },
    // 添加问题类型
    fnGoChangeQuestionType(){
        this.$emit("changeQuestionType", 'test')
    },
    // 添加服务类型
    fnGoChangeServiceType(){
      console.log('添加服务类型tab')
      this.$emit("changeSerType", 'test')
    },
    getServeTree(){
        this.$axios
        .post(this.$apis.workOrder.getServiceTypeTree)
        .then(data => {
          console.log(data)
        })
    },
    /**
             * 获取服务类型
             */
    getServiceType(code, type) {
      this.$axios
        .post(this.$apis.workOrder.getServiceType, { parentCode: code })
        .then(data => {
          if (data && data.status === '200') {
            if (type === 0) {
              this.serviceLargeList = data.obj
              this.ruleForm.serviceLargeType = ''
              this.ruleForm.serviceMediumType = ''
              this.ruleForm.serviceSmallType = ''
              this.serviceMediumList = []
              this.serviceSmallList = []
            } else if (type === 1) {
              this.serviceMediumList = data.obj
              this.ruleForm.serviceMediumType = ''
              this.ruleForm.serviceSmallType = ''
              this.serviceSmallList = []
            } else {
              this.serviceSmallList = data.obj
              this.ruleForm.serviceSmallType = ''
            }
          }
        })
    },
 
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.confirmSubmit()
          // this.saveSummaryForSumit()
        } else {
          return false;
        }
      });
    },
    submitSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveSummary()
        } else {
          return false;
        }
      });
    },
    // 提交 -暂存-不发起工单-获取接口后返回 custmerId 
    saveSummary() {
      if(this.customid){
        this.ruleForm.customId = this.customid
      }
      this.ruleForm.dialogId = this.dialogId
      this.ruleForm.contactId = this.contactId
      console.log(this.ruleForm.businessType)
     
      let objectM = {
          businessType: this.ruleForm.businessType == '咨询' ? "1" :this.ruleForm.businessType,
          callerNumber : this.ruleForm.callerNumber ,
          certNo : this.ruleForm.certNo ,
          clientName :this.ruleForm.clientName,
          contactId : this.ruleForm.contactId,
          dialogId :this.ruleForm.dialogId,
          involveArea :this.ruleForm.involveArea,
          logSource :this.ruleForm.logSource,
          phoneContent :this.ruleForm.phoneContent,
          replyNumber :this.ruleForm.replyNumber,
          serviceLargeType :this.ruleForm.serviceLargeType,
          serviceMediumType :this.ruleForm.serviceMediumType,
          serviceSmallType :this.ruleForm.serviceSmallType,
          serviceStatus :this.ruleForm.serviceStatus,
          serviceTypeName :this.ruleForm.clientName,
          id:this.remainId ? this.remainId:null,
          customId :this.ruleForm.customId == null?null:this.ruleForm.customId,
          workOrderId:this.phoneWorkNumberId?this.phoneWorkNumberId:null
          }
          // console.log(objectM)
      this.$axios
        .post(this.$apis.workOrder.saveSummary, objectM, configss)
        .then(data => {
          if (data && data.status === '200') {
            this.remainId = data.obj.id
            this.ruleForm.customId  = data.obj.customId
            this.ruleForm.trafficId = data.obj.id
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.$emit("closeTag", 'overform')
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    //提交并发起工单确认框
       confirmSubmit(){
       this.$confirm('是否要发起工单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '发起工单成功!'
          // });
           this.saveSummaryForSumit()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    },
    // 提交并发起工单
    saveSummaryForSumit() {
       if(this.customid){
        this.ruleForm.customId = this.customid
      }
      this.ruleForm.dialogId = this.dialogId
      this.ruleForm.contactId = this.contactId
      let objectM = {
          businessType: this.ruleForm.businessType,
          callerNumber : this.ruleForm.callerNumber ,
          certNo : this.ruleForm.certNo ,
          clientName :this.ruleForm.clientName,
          contactId : this.ruleForm.contactId,
          dialogId :this.ruleForm.dialogId,
          involveArea :this.ruleForm.involveArea,
          logSource :this.ruleForm.logSource,
          phoneContent :this.ruleForm.phoneContent,
          replyNumber :this.ruleForm.replyNumber,
          serviceLargeType :this.ruleForm.serviceLargeType,
          serviceMediumType :this.ruleForm.serviceMediumType,
          serviceSmallType :this.ruleForm.serviceSmallType,
          serviceStatus :this.ruleForm.serviceStatus,
          serviceTypeName :this.ruleForm.clientName,
          id:this.remainId?this.remainId:null,
          customId :this.ruleForm.customId == null?null:this.ruleForm.customId,
          }
      this.$axios
        .post(this.$apis.workOrder.saveSummary, objectM, configss)
        .then(data => {
          if (data && data.status === '200') {
             this.remainId = data.obj.id
             this.ruleForm.customId  = data.obj.customId
            this.ruleForm.summaryId = data.obj.summaryId
            this.ruleForm.trafficId = data.obj.id
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            const turnObj = {
              ruleForm:this.ruleForm,
              dataObj:data.obj
            }
            this.$emit("closeTag", 'overform')
            this.$emit("addPhoneOrderInfo", turnObj)
          } else {
            this.$message.error(data.msg)
          }
        })
    }
  }
}
</script>
<style lang="stylus" scoped>
    >>>.el-form-item {
        margin-bottom: 15px;
    }
    >>>.el-divider--horizontal {
        margin: 10px 0;
    }
    .drag{
            width: 400px;
            /* height: 30px; */
            position: absolute;
            top: 0;
            left: 0;
            padding:10px;
            border-radius:2px;
            padding:4px;
        }
        .active{
            border: 1px solid rgb(155, 220, 224);
        }
        .redBorder{
            border: 1px solid rgb(238, 205, 205);
        }
</style>