ccweb: 兄弟组件+强制刷新+实现tab切换提交表单的流程思路：代码同上篇随笔笔记

本文主要是介绍ccweb: 兄弟组件+强制刷新+实现tab切换提交表单的流程思路：代码同上篇随笔笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

思路和流程：

1：两个表单，受理页表单+工单处理表单。

2：实现第一个表单是一个tab页（受理页）提交后跳转到第二个表单（不用路由跳转这里用弹出新tab标签页并自动切换到工单处理页面表单）

3：受理页tab页面和工单处理tab标签页封装成组件，两个tab标签页的关系是兄弟组件关系。

4：两个标签页组件共同放在父组件info.vue组件内。info组件同时包含其他子组件用来显示其他信息比如来电详情和各种基础info数据展示（这里只重点讲解两个tab页组件互通的逻辑）

5：受理页面tab组件：customPage.vue,提交后弹出的兄弟组件workInfoPage.vue,两个数据通过父组件进行传值和事件。

6：受理页面的回显用父组件info.vue传入来的各种prop按对象形式进行接收，配合字典项和接口来进行回显

7：提交工单tab组件的值和回显是需要根据兄弟组件受理页面传入的数据以及配合字典项和接口进行接收并回显。

8：受理页面提交后并且成功收到数据后才会弹出工单tab标签并传入组件值。

9：工单内含有选择部门和人员结构图，选择部门是树状结构图，选择部门后显示对应部门的人员信息，并且可进行单选人员并把指定的人员id储存起来，等提交表单时一起发送。

10：选完人员后弹出确认框，会有一个可再次选择抄送人的选择，如果同意就会再次重复选择（共用组件用一个值区分开，或者再写个模态框是专门选择抄送人的）

11：选择抄送人是多选，可同时选择多个，如果是多个人发送给后端的是用逗号隔开的字符串（默认的选中数组处理成字符串既可）然后等提交表单时一起发送。

12：结束后关闭工单处理表单，同时上一个标签页受理表单（通知父组件关闭兄弟组件）。

大概的需求以及思路流程是这样的，具体再根据客户的提出进行调整增删改查。

涉及到的知识点和注意事项：

1：tab页面切换=》提交表单后新增tab页面：

这里做过两个思路-都要在父组件info.vue内完成布局和逻辑：第一个思路是类似add,new 一个新的标签页，详细可参考其他项目这里不赘述

第二个思路是用v-if 来实现父组件已经创建好的，不在methods方法内创建，而是通过v-if来决定是否渲染第二个tab组件：

2：el-tab 的v-show 和v-if 是不一样的，v-show 不会起作用的，这个知识点自己查这里不做赘述。 还有一个方案是同时显示两个table(v-show也会同时显示)然后用：disabled绑定的值进行切换

这种最不推荐，但是可以做参考。

3：当点击提交表单按钮时调用接口返回成功，开始新增并切换跳转到工单的tab页面，把数据带过去进行回显。这里涉及到兄弟传值的问题，这时候的问题比较多，一定要注意了：

在受理表单发送$emit通知父组件并把值带给父组件后，父组件用的是props传递给工单tab页面，由于是v-if进行绑定的，v-if 和v-show的主要区别：v-if 提交前是不会渲染dom和数据的

所以会最新渲染，这就要在挂载组件时候把值赋给子组件的form表单并把该处理的数据都处理一遍最后进行回显。这时候是没问题的

4：当切换回受理标签页面重新修改值并再次提交后，标签页再次切换回工单详情页面，这个时候就出问题了，数据回显失败，永远是第一次提交的数据，原因是组件已经渲染完了，剩下的切换

工单标签页不会出发数据更新，这时候就需要使用watch 进行监听数据了（在工单tab页面组件内监听父组件传下来的数据），并把监听到改变的数据重新赋值给本组件要处理回显的form数据

5：还需要额外注意的是，好多人会觉得这里有监听数据赋值（中间有个人就这样改了，变成了初始化没值，再次提交才会有值）会把挂载时候的数据处理删掉。这样做的坏处是第一次提交表单是不会有值

第二次提交才会有对的回显，正确的做法是挂载要赋值，监听也要赋值。二者都不可或缺。

6：最后一个会容易犯的注意点是，在监听完后一定不要忘了强制刷新组件。（好多人都会忽略这点，造提交表单后工单组件打印出来值也都接收到了，这就是最终回显老是出问题的原因-我这里那天中午就是帮礼辉处理这个的-数据对了半天都是正确的，最后打印的值也对就是显示不对，让他好一顿抓狂。。。）

回显问什么总是容易出问题，但凡缺少一个环节都会出问题，但凡对vue有关兄弟传值进行业务代码实现的机制和流程一知半解或者马虎一点的，肯定是会容易回显出问题的。

下面贴出具体代码参考：

父组件：

<template>
  <el-tabs type="card" v-model="activeName" ref="tabs" class="info-tab">
    <el-tab-pane
      label="话后小结"
      v-if="isShowchatSummary"
      name="chatSummary"
      lazy
    >
      <chatSummary
        v-show="activeName === 'chatSummary'"
        @updateDialog="updateDialog"
        :info="info"
      ></chatSummary>
    </el-tab-pane>
    <!-- <el-tab-pane v-for="tab in tabs" :label="tab.name" :name="tab.name" :key="tab.sort" lazy>
      <component :key="tab.sort" :is="tab.url" :info="info" v-if="tab.defaultSource === '1'"></component>
      <iframe class="inline-iframe" :src="setUrl(tab.url)" v-else />
    </el-tab-pane> -->
    <!-- 新增 -->
    <el-tab-pane label="受理单" name="shoulidan" key="shoulidan">
      <customApply
        @showWorkOrderPage="showWorkOrderPage"
        :info="info"
      ></customApply>
    </el-tab-pane>
　　
    <el-tab-pane
      v-if="gongdanTabShow"
      label="工单"
      name="gongdan"
      key="gongdan"
    >
      <workOrderLog
        @closeTabwork="closeTabwork"
        v-show="activeName === 'gongdan'"
        :info="info"
        :subobj="subobj"
      ></workOrderLog>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import cache from "@/utils/cache.js";
import chatSummary from "@/view/common/tabs/chat-summary.vue"; // 话后小结tab
// import order from '@/view/common/tabs/order.vue' // 工单
// import custom from '@/view/common/tabs/custom.vue' // 客户信息
// import trade from '@/view/trade/tradeMain.vue' // 代客交易
import customApply from "@/view/common/phone/customserverapply.vue"; // 受理页面
import workOrderLog from "@/view/common/phone/workorderinfo/workorderlog.vue"; // 工单
export default {
  data() {
    return {
      activeName: "", // 高亮tab
      isShowchatSummary: false, // 话后小结开关
      subobj: null, // 提交后传入的值
      gongdanTabShow: false, // 工单的tab
    };
  },
  props: ["info", "tabs"],
  components: {
    // order, // 工单
    chatSummary, // 话后小结tab
    workOrderLog, // 工单tab
    // custom,
    // trade,
    customApply,
  },
  created() {
    const selectPropertiesByMap = cache.getDicsStorageByName(
      "selectPropertiesByMap"
    );
    this.isShowchatSummary = selectPropertiesByMap.DialogSum_SWITCH === "1";
    // this.activeName = this.isShowchatSummary ? 'chatSummary' : this.tabs[0].name
    this.activeName = "shoulidan";
  },
  methods: {
    closeTabwork(){
      this.gongdanTabShow = false
      this.activeName = "shoulidan";
      console.log(this.gongdanTabShow,this.activeName)
    },
    // 显示workOrderPage
    showWorkOrderPage(obj) {
     
      this.activeName = "gongdan";
      this.gongdanTabShow = true
     
      this.subobj = obj;
      console.log(this.subobj);
      // 动态加载了兄弟tab组件所以需要重新赋值给workOrderLog
    },
    /**
     * 更新会话
     */
    updateDialog(obj) {
      this.$emit("updateDialog", obj);
    },
    /**
     * 设置客户信息iframe地址
     * @param {object} item 客户对象
     */
    setUrl(url) {
      const {
        contactId, // 联系方式id
        jobId,
        dialogId, // 会话id
      } = this.info;
      const perfix = url.includes("?") ? "&" : "?";
      return (
        url +
        perfix +
        `contactId=${contactId}&jobId=${jobId}&dialogId=${dialogId}`
      );
    },
  },
};
</script>
<style lang="stylus" scoped>
.info-tab {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  >>>.el-tabs__content {
    flex: 1;
    height: 100%;
  }

  >>>.el-tab-pane {
    height: 100%;
  }

  >>>.el-tabs__header {
    margin-bottom: 0;
  }

  .inline-iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
}
</style>

 兄弟组件-受理tab标签页：

<template>
  <div class="shouliTab">
    <el-form
      ref="form"
      :label-position="labelPosition"
      label-width="80px"
      :model="form"
    >
      <!-- 表格表单1 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="业务来源">
            <el-select v-model="form.busiSoureId" placeholder="请选择业务来源">
              <el-option
                v-for="item in yewulaiyuanObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="业务类型">
            <el-select v-model="form.busiTypeId" placeholder="请选择业务类型">
              <el-option
                v-for="item in yewuleixingObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户名称" prop="name">
            <el-input
              style="max-width: 200px"
              v-model="form.customName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系方式" prop="phoneNumber">
            <el-input
              style="max-width: 200px"
              v-model="form.phoneNumb"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" v-if="this.form.busiSoureId == '9'">
          <el-form-item label="客户类别">
            <el-select v-model="form.customLevel" placeholder="请选择客户类别">
              <el-option
                v-for="item in kehuleibieObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="this.form.busiSoureId == '9'">
          <el-form-item label="是否购买">
            <el-select v-model="form.isBuy" placeholder="是否购买">
              <el-option
                v-for="item in shifoumaiObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="受理来源">
            <el-select v-model="form.sourceType" placeholder="受理来源">
              <el-option
                v-for="item in sourceTypeList"
                :key="item.value"
                :label="item.value"
                :value="item.key"
                disabled
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="this.form.busiTypeId == '1'">
          <el-form-item label="销售人员">
            <el-input
              style="max-width: 200px"
              v-model="form.salesMan"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="hr"></div>
      <!-- 表格表单2 -->
      <el-row class="overTab">
        <!-- <el-col :span="4">
          <el-form-item label="所属位置" prop="serviceLargeType">
            <el-select
              size="small"
              v-model="form.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="4">
          <el-form-item prop="serviceMediumType">
            <el-select
              size="small"
              v-model="form.serviceMediumType"
              @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="4">
          <el-form-item prop="serviceSmallType">
            <el-select
              size="small"
              v-model="form.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-col :span="4">
          <el-button>查询</el-button>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="子公司:">
            <el-select v-model="form.subsidiaryName" placeholder="子公司">
              <el-option
                v-for="item in zigongsiObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="片区:">
            <el-select v-model="form.areaInfo" placeholder="片区">
              <el-option
                v-for="item in pianquObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="detail" :span="24">
        <el-col :span="6">
          <el-form-item label="总代理地址:">
            <el-input v-model="form.areaAddress" placeholder="总代理地址">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总代理姓名:">
            <el-input v-model="form.areaManagerName" placeholder="总代理姓名">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总代理手机号:">
            <el-input v-model="form.areaManPhone" placeholder="总代理手机号">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="this.form.busiTypeId == '2'">
        <el-col :span="10">
          <el-form-item label="投诉类型">
            <el-cascader
              v-model="form.complainType"
              :options="options"
              clearable
              @change="fnChangeOpt"
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="hr"></div>
      <!-- 表格表单3 -->
      <el-row>
        <el-col class="detail" :span="24">
          <el-form-item label="咨询内容" prop="desc">
            <el-input
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 8 }"
              v-model="form.consultContent"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="detail" :span="24">
          <el-form-item label="处理意见" prop="desc">
            <el-input
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 8 }"
              v-model="form.dealOpinions"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="hr"></div>
      <!-- 表格表单4 -->
      <el-row class="detail" :span="24">
        <el-col :span="6">
          回访时间：<span>
            <el-date-picker
              v-model="form.returnTime"
              type="datetime"
              value-format="yyyy-MM-dd hh:ss:mm"
              placeholder="选择日期"
            >
            </el-date-picker>
          </span>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号:">
            <el-input
              v-model="messageObj.phoneNumb"
              placeholder="接收短信的手机号"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="片区名称:">
            <el-input v-model="messageObj.areaName" placeholder="片区名称">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="detail" :span="24">
        <el-col :span="6">
          <el-form-item label="经理名称:">
            <el-input v-model="messageObj.managerName" placeholder="经理名称">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="经理手机号:">
            <el-input v-model="messageObj.mobile" placeholder="经理手机号">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item>
            <el-button @click="fnsendmessage" v-prevent-click type="primary"
              >发送短信</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col class="detail" :span="24">
          <el-input
            style="margin: 10px"
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 6 }"
            v-model="messageObj.duanxin"
          ></el-input>
          <el-button @click="fnsendmessage">发送短信</el-button>
        </el-col>
      </el-row> -->
      <div class="hr"></div>
      <!-- 提交 -->
      <el-form-item>
        <el-button type="primary" @click="confirmSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "outcall",
  props: {
    /**
     * 弹窗是否回显
     */
    value: {
      type: Boolean,
    },
    info: {
      type: Object,
    },
  },
  directives: {
    // 自定义指令-防止按钮频发点击
    preventClick: {
      inserted(el, binding) {
        el.addEventListener("click", () => {
          if (!el.disabled) {
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
            }, 6000);
          }
        });
      },
    },
  },
  data() {
    return {
      labelPosition: "right",
      options: [],
      messageObj: {
        mobile: "",
        managerName: "",
        areaName: "",
        phoneNumb: this.info.contactNumber,
        // dunaxin: "",
      },
      form: {
        busiSoureId: "", // 业务来源
        busiTypeId: "", // 业务类型
        customName: "", // 客户姓名
        phoneNumb: this.info.contactNumber, // 联系方式-电话号码
        customLevel: "", // 客户类别
        isBuy: "", // 是否购买
        // serviceLargeType: "", // 省
        // serviceMediumType: "", // 市
        // serviceSmallType: "", // 镇
        subsidiaryName: "", // 子公司
        areaInfo: "", // 片区-所属片区
        consultContent: "", // 咨询内容
        dealOpinions: "", // 处理意见
        areaManagerName: "", // 片区经理姓名
        areaManPhone: "", // 总代理手机号码
        areaAddress: "", // 总代理地址
        isSendManager: false, // 是否发送短信 0 否 1 是
        complainType: "", // 投诉类型
        returnTime: "", // 回访时间
        salesMan: "", // 销售人员
        id: "",
      },
      rules: {
        name: [{ required: true, message: "请输入文字" }],
        phoneNumber: [{ required: true, message: "请输入号码" }],
        serviceLargeType: [
          {
            required: true,
            message: "请选择服务类型",
            trigger: "change",
          },
        ],
        serviceMediumType: [
          {
            required: true,
            message: "请选择服务类型",
            trigger: "change",
          },
        ],
        serviceSmallType: [
          {
            required: true,
            message: "请选择服务类型",
            trigger: "change",
          },
        ],
      },
      yewulaiyuanObj: [],
      yewuleixingObj: [],
      kehuleibieObj: [],
      shifoumaiObj: [],
      sourceTypeList: [], // 受理来源
      serviceLargeList: [], // 问题类型第1级
      serviceMediumList: [], // 问题类型第2级
      serviceSmallList: [], // 问题类型第3级
      zigongsiObj: [],
      pianquObj: [],
    };
  },
  created() {
    this.yewulaiyuanObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).HS_BUSI_SOURCE;
    this.yewuleixingObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).HS_BUSI_TYPE;
    this.kehuleibieObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).HS_CUSTOM_LEVEL;
    this.shifoumaiObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).IS_BUY;
    this.zigongsiObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).SUBDEPT;
    this.pianquObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).AREA_DICT;
    this.sourceTypeList = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).SOURCE_TYPE;
    this.form.sourceType = this.info.callType;
    console.log("*****呼叫类型********", this.info.callType);
    console.log(this.value, this.info);
    this.ajaxgetComplain1();
    this.ajaxgetPhoneInfo();
  },
  computed: {},
  methods: {
    // 改变级联结果的数组为字符串
    fnChangeOpt(e) {
      // console.log(e);
      if (e && e.length > 0) {
        this.form.complainType = e.join(",");
      } else {
        this.form.complainType = "";
      }
      // console.log(this.form.complainType);
    },
    // 获取投诉类型接口
    ajaxgetComplain1() {
      this.$axios
        .post(this.$apis.ccweb.newDataSL.getComplainTree)
        .then((res) => {
          console.log("投诉类型：", res.data);
          if (res.data) {
            this.options = res.data;
          }
        });
    },
    // 获取代理信息
    ajaxgetPhoneInfo() {
      const params = {
        phoneNumber: this.info.contactNumber,
      };
      this.$axios
        .post(this.$apis.ccweb.newDataSL.getPhoneInfo, params)
        .then((res) => {
          console.log(res.data);
        });
    },
    // 发送短信
    fnsendmessage() {
      // console.log("发送短信", this.messageObj);
      const params = this.messageObj;
      this.$axios
        .post(this.$apis.ccweb.newDataSL.sendSms, params)
        .then((res) => {
          if (res) {
            this.$message({
              message: "发送成功!",
              type: "success",
            });
            this.form.isSendManager = true;
          }
        });
    },
    confirmSubmit() {
      this.$confirm("是否发起工单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.onSubmit()
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "失败",
          // });
        });
    },
    onSubmit() {//这里就是提交后的表单需要弹出兄弟标签页组件并传入数据给父组件然后再通过父组件传入到其他兄弟工单标签页组件
      var obj = {
        sourceType: this.info.callType, // 电话来源ID0 入呼，1 外呼
        dialogId: this.info.dialogId, // 会话ID
        customId: this.info.customid, // 客户ID - 第一次没有  往后返回 id 后端是小写 这里注意
        contactId: this.info.contactId, // 会话客户信息ID
      };
      // let params = {};
      Object.assign(obj, this.form);
      this.$axios
        .post(this.$apis.ccweb.newDataSL.insertAcceptInfo, obj)
        .then((res) => {
          console.log("接收的值", res.data);
          this.form.id = res.data.id;
          this.$emit("showWorkOrderPage", res.data);
        });
    },
    getServiceType(code, type) {
      console.log(code, type); // code 是选中的值 type是自定义
    },
    handleClose() {
      this.$emit("input", false);
      this.form.call = "";
    },
  },
};
</script>
<style lang="stylus" scoped>
.el-textarea {
  textarea {
    padding: 8px; // 设置文本框的 padding
    height: $inputHeight; // 设置文本框的 height
    font-size: $inputFontSize;
    line-height: 21px;
  }
}

.shouliTab { // 表单框
  padding: 10px;
  overflow-y: scroll;
  height: 90%;
}

.hr {
  width: 100%;
  height: 1px;
  background: #ccc;
  margin: 10px 0;
}

.detail {
  p {
    padding-left: 10px;
    line-height: 30px;
    font-size: 16px;
    color: #606266;
  }
}
</style>

　兄弟组件----工单tab标签组件：

<template>
  <!-- 受理页工单 -->
  <div class="shouliTab">
    <el-form ref="workform" :model="workform" label-width="80px">
      <!-- 表格表单1 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="子公司:">
            <el-select v-model="workform.subsidiaryId" placeholder="子公司">
              <el-option
                v-for="item in zigongsiObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="片区:">
            <el-select v-model="workform.areaInfoId" placeholder="片区">
              <el-option
                v-for="item in pianquObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总代理信息">
            <el-input
              style="max-width: 200px"
              v-model="workform.areaManager"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="客户名称">
            <el-input
              style="max-width: 200px"
              v-model="workform.cusTomName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户电话">
            <el-input
              style="max-width: 200px"
              v-model="workform.cusTomPhone"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="投诉时间">
            <el-input
              style="max-width: 200px"
              v-model="workform.compTime"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="受理坐席">
            <el-input
              style="max-width: 200px"
              v-model="workform.acceptUserName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="投诉来源">
            <el-select v-model="workform.compSource" placeholder="投诉来源">
              <el-option
                v-for="item in yewulaiyuanObj"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客服电话">
            <el-input
              style="max-width: 200px"
              v-model="workform.acceptUserPhone"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="hr"></div>
      <!-- 表格表单2 -->
      <el-row class="overTab">
        <el-col :span="10">
          <el-form-item label="投诉类型">
            <el-cascader
              v-model="workform.compTypeId"
              :options="workoptions"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="投诉等级:">
            <el-select
              @change="changeCompType"
              v-model="workform.compLevelId"
              placeholder="投诉等级"
            >
              <el-option
                v-for="item in compLevel"
                :key="item.value"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="投诉备注">
            <el-input
              style="max-width: 600px"
              v-model="workform.remark"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="hr"></div>
      <!-- 表格表单3 -->
      <el-row>
        <el-col class="detail" :span="24">
          <el-form-item label="投诉内容" prop="desc">
            <el-input
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 8 }"
              v-model="workform.workContent"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="hr"></div>
      <!-- 提交 -->
      <el-form-item>
        <el-button type="primary" @click="confirmSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "workorderlog",
  props: {
    info: {
      type: Object,
    },
    subobj: {
      type: Object,
    },
  },
  watch: {
    subobj: function (n, o) {
      console.log(n, o);
      // console.log("兄弟组件传来了数据：", this.subobj, this.info);
      // console.log(this.workform, "*****");
      this.formatData(n);
      this.formatTreeDate(n);
      this.$forceUpdate();
    },
  },
  directives: {
    // 自定义指令-防止按钮频发点击
    preventClick: {
      inserted(el, binding) {
        el.addEventListener("click", () => {
          if (!el.disabled) {
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
            }, 6000);
          }
        });
      },
    },
  },
  data() {
    return {
      parentObj: {},
      workoptions: [],
      messageObj: {
        mobile: "",
        managerName: "",
        areaName: "",
        cusTomPhone: "",
        // dunaxin: "",
      },
      workform: {
        subsidiaryId: "", // 子公司
        areaInfoId: "", // 片区
        areaManager: "", // 总代理信息
        cusTomName: "", // 客户名称
        cusTomPhone: "", // 客户电话
        compTime: "", // 投诉时间
        acceptUserId: "", // 受理坐席ID
        acceptUserName: "", // 受理坐席姓名
        compSource: "", // 投诉来源
        acceptUserPhone: "", // 客服电话
        compTypeId: "", // 投诉类型ID
        compLevelId: "", // 投诉等级
        feedbackTime: "", // 反馈时间
        remark: "", // 投诉备注
        workContent: "", // 投诉内容
        dialogId: "", // 会话ID
        customId: "", // 客户ID
        acceptId: "", // 受理ID
        ccListMenId: "", // 抄送人ID 多个逗号分隔
        workOrderMenId: "", // 工单主负责人ID
        workOrderDeptId: "", // 主责人部门ID
      },
      rules: {
        name: [{ required: true, message: "请输入文字" }],
        phoneNumber: [{ required: true, message: "请输入号码" }],
      },
      yewulaiyuanObj: [],
      zigongsiObj: [],
      pianquObj: [],
      compLevel: [],
    };
  },
  created() {
    // this.yewuleixingObj = JSON.parse(sessionStorage.getItem('dics-getAllDatas')).HS_BUSI_TYPE
    // this.kehuleibieObj = JSON.parse(sessionStorage.getItem('dics-getAllDatas')).HS_CUSTOM_LEVEL
    this.yewulaiyuanObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).HS_BUSI_SOURCE;
    this.zigongsiObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).SUBDEPT;
    this.pianquObj = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).AREA_DICT;
    this.compLevel = JSON.parse(
      sessionStorage.getItem("dics-getAllDatas")
    ).COMPLAIN_LEVEL;
    console.log("subobj", this.subobj);
    // this.sourceTypeList = JSON.parse(sessionStorage.getItem('dics-getAllDatas')).SOURCE_TYPE
    this.getComplain();
  },
  mounted() {
    console.log(this.value, this.info, this.subobj);
    if (this.subobj) {
      this.workform = this.subobj;
      console.log("parentobj:", this.workform);
      this.formatTreeDate(this.workform);
      this.formatData(this.workform);
    }
  },
  methods: {
    formatData(formData) {
      if (formData) {
        console.log("工单数据传输", formData);
        this.getOnlineSeat(formData.apccetUserId); // 获取受理坐席姓名
        this.workform.subsidiaryId = formData.subsidiaryName;
        this.workform.areaInfoId = formData.areaInfo;
        this.workform.areaManager =
          formData.areaManagerName + ":" + this.subobj.areaManPhone;
        this.workform.cusTomName = formData.customName;
        this.workform.cusTomPhone = formData.phoneNumb;
        this.workform.compTime = formData.createTime;
        this.workform.acceptUserId = formData.apccetUserId;
        this.workform.compSource = formData.busiSoureId;
        this.workform.compTypeId = formData.complainType;
        this.workform.dialogId = formData.dialogId;
        this.workform.customId = formData.customId;
        this.workform.acceptId = formData.id;
        this.getThreeDate(3);
        this.formatTreeDate(this.workform);
      }
    },
    getThreeDate(date) {
      var num = date;
      var n = num;
      var d = new Date();
      var year = d.getFullYear();
      var mon = d.getMonth() + 1;
      var day = d.getDate();
      if (day <= n) {
        if (mon > 1) {
          mon = mon - 1;
        } else {
          year = year - 1;
          mon = 12;
        }
      }
      d.setDate(d.getDate() + n);
      year = d.getFullYear();
      mon = d.getMonth() + 1;
      day = d.getDate();
      var feedbackTime =
        year +
        "-" +
        (mon < 10 ? "0" + mon : mon) +
        "-" +
        (day < 10 ? "0" + day : day);
      return feedbackTime;
    },
    /**
     * 获取投诉类型等级备注
     */
    changeCompType() {
      this.workform.feedbackTime = this.getThreeDate(3);
      if (this.workform.compLevelId == "A") {
        this.workform.remark =
          "该投诉事件判定为A类投诉，请于" +
          this.workform.feedbackTime +
          "内填写并反馈本工单";
      } else if (this.workform.compLevelId == "B") {
        this.workform.remark =
          "该投诉事件判定为B类投诉，请于" +
          this.workform.feedbackTime +
          "内填写并反馈本工单";
      } else {
        this.workform.remark =
          "该投诉事件判定为B类投诉，请于" +
          this.workform.feedbackTime +
          "内填写并反馈本工单";
      }
    },
    formatTreeDate(data) {
      if (!data) return;
      var str = data.complainType;
      // console.log(typeof str)// obj '1,2' 看着是字符串其实是数组
      // str = JSON.stringify(str)
      // console.log(typeof str)// str 转成真正的字符串就不会报错了
      if (str) {
        str = str.split(",");
        this.workform.compTypeId = str;
        // this.form.complainType = JSON.parse(str);
      }
    },
    // 获取投诉类型接口
    getComplain() {
      this.$axios
        .post(this.$apis.ccweb.newDataSL.getComplainTree)
        .then((res) => {
          console.log(res.data);
          if (res.data) {
            this.workoptions = res.data;
          }
        });
    },
    // 根据用户ID获取用户姓名
    getOnlineSeat(id) {
      var obj = {
        userId: id,
      };
      this.$axios
        .post(this.$apis.ccweb.workOrder.getOnlineSeat, obj)
        .then((res) => {
          console.log(res.data);
          if (res.data) {
            this.workform.acceptUserName = res.data.realName;
            this.workform.acceptUserPhone = res.data.phone;
            console.log(
              "this.form.acceptUserPhone",
              this.workform.acceptUserPhone
            );
          }
        });
    },
    // 关闭工单
    closeTabwork() {
      this.$emit("closeTabwork");
    },
    confirmSubmit() {
      this.$confirm("是否发起工单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.onSubmit();
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "失败",
          // });
        });
    },
    onSubmit() {
      this.closeTabwork();
      var obj = {
        id: "", // id - 第一次没有  往后返回
        areaManPhone: "", // 片区经理姓名
        sourceType: "", // 电话来源ID0 入呼，1 外呼
        dialogId: "", // 会话ID
        customId: "", // 客户ID - 第一次没有  往后返回
        contactId: "", // 会话客户信息ID
      };
      // let params = {};
      Object.assign(obj, this.workform);
      console.log(obj);
      this.$axios
        .post(this.$apis.ccweb.workOrder.insertWorkInfo, obj)
        .then((res) => {
          console.log(res);
          this.workform.id = res.data.id;
          this.closeTabwork();
        });
    },
  },
};
</script>
<style lang="stylus" scoped>
.el-textarea {
  textarea {
    padding: 8px; // 设置文本框的 padding
    height: $inputHeight; // 设置文本框的 height
    font-size: $inputFontSize;
    line-height: 21px;
  }
}

.shouliTab { // 表单框
  padding: 10px;
  overflow-y: scroll;
  height: 90%;
}

.hr {
  width: 100%;
  height: 1px;
  background: #ccc;
  margin: 10px 0;
}

.detail {
  p {
    padding-left: 10px;
    line-height: 30px;
    font-size: 16px;
    color: #606266;
  }
}
</style>

这篇关于ccweb: 兄弟组件+强制刷新+实现tab切换提交表单的流程思路：代码同上篇随笔笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！