meishanshiwu/src/views/currentSystem/waterHotline/workbench/register.vue

<template>
  <div id="register_merge">
    <el-tabs type="border-card" class="tabs">
      <!-- 弹屏存在多用户的情况 -->
      <div class='moreUser' style='position: absolute;right: 0px;z-index: 2;border: solid 1px rgba(128,128,128,0.2);' v-if='userInfoList&&userInfoList.length>1'>
        <el-table highlight-current-row :data="userInfoList" stripe @row-click="changeUserInfo" style="width: 100%">
          <el-table-column prop="address" header-align="center" label="用户地址" width="200"> </el-table-column>
        </el-table>
      </div>
      <el-tab-pane label="工单登记" style="height: 100%">
        <RegisterMerges
          ref="RegisterMerges"
          :data="editData"
          :arrearsFlag='arrearsFlag'
          :work-order-type="workOrderType"
          :acceptance-department="acceptanceDepartment"
          :phone-number="phoneNumber"
          :register-formdata="registerForm"
          :number="number"
          :download="true"
          :is-rxlx="true"
          :change-user-table="true"
          @remind="remind"
          @getKhbh="getKhbh"
        />
      </el-tab-pane>
      <el-tab-pane label="人员情况" style="height: 100%">
        <currentWorkInfo />
      </el-tab-pane>
    </el-tabs>
    <el-tabs type="border-card" class="tabs" style="margin-top: 10px">
      <el-tab-pane label="来电记录" style="height: 100%">
        <CallRecords :phone-number="phoneNumber" />
      </el-tab-pane>
      <el-tab-pane label="历史工单" style="height: 100%">
        <Historical :phone-number="phoneNumber" />
      </el-tab-pane>
    </el-tabs>
    <!-- <el-tabs type="border-card" class="tabs" style="margin-top: 10px">
      <el-tab-pane label="用户信息" style="height: 100%">
        <message :userId="userId"/>
      </el-tab-pane>
    </el-tabs> -->
  </div>
</template>

<script>
import { getNames, getRegisterList, getPhoneUserInfo } from "@/api/work";
import RegisterMerges from "@/views/currentSystem/work/order/register/register_merge";
import Historical from "./components/historical";
import CallRecords from "./components/callRecords";
import { getSXJList } from "@/utils/request";
import { getMail } from "@/api/hotline";
import axios from 'axios'
import { lcInfo } from "staticPub/config";
import currentWorkInfo from "./currentWorkInfo.vue";
import message from "./message.vue";
import commonMe from '@/utils/common'
export default {
  name: "RegisterMerge",
  components: {
    currentWorkInfo,
    RegisterMerges,
    Historical,
    CallRecords,
    message,
  },
  props: {
    data: {
      // 编辑的数据
      type: Object,
      required: true,
    },
    disabled: {
      type: Boolean,
    },
    callNum: {
      type: Number,
      default: 0,
    },
    phoneNumber: {
      type: Number,
      default: 0,
    },
    workOrderType: {
      // 工单类型
      type: Array,
      required: true,
    },
    acceptanceDepartment: {
      // 部门
      type: Array,
      required: true,
    },
    modeltitle: {
      type: String,
      default: "工单登记",
    },
    code: {
      type: String,
      default: "1001",
    },
  },
  data() {
    return {
      userId: "",
      arrearsFlag:false,
      getMail: getMail,
      getUserList: getSXJList,
      rules: {
        gdlx: [{ required: true, message: " ", trigger: "change" }],
        gdxq: [{ required: true, message: " ", trigger: "change" }],
        jjcd: [{ required: true, message: " ", trigger: "change" }],
        slbm: [{ required: true, message: " ", trigger: "change" }],
        slry: [{ required: true, message: " ", trigger: "change" }],
        gddjZt: [{ required: true, message: " ", trigger: "change" }],
        gdms: [{ required: true, message: " ", trigger: "blur" }],
        lczzyy: [{ required: true, message: " ", trigger: "blur" }],
      },
      cxnr: "",
      cxtj: "",
      //  工单细分
      subdivide1: [],
      subdivide2: [],
      indexNum: 0,
      indexNumT: 0,
      number: 1,
      // 优先级别
      emergencyDegree: [
        {
          id: 82,
          cname: "一般",
        },
        {
          id: 83,
          cname: "重要",
        },
        {
          id: 84,
          cname: "非常急",
        },
      ],
      // 受理人员
      receiver: [],
      recordtotal: 0,
      totals: 0,
      pagination: { current: 1, size: 10 }, // 分页参数信息
      paginations: { current: 1, size: 10 }, // 分页参数信息
      recordpagination: { current: 1, size: 10, telephone: "" },
      total: 0,
      list: [],
      djryName: "",
      djsj: "",
      pageInfoShow:true,
      cellStyle: [
        {
          style: { color: "#67C23A", textAlign: "center" }, // 样式 绿
          field: "jjcdName",
          value: "一般",
          index: 4,
        },
        {
          style: { color: "#E6A23C", textAlign: "center" },
          field: "jjcdName",
          value: "紧急",
          index: 4,
        },
        {
          style: { color: "#F56C6C", textAlign: "center" }, // 样式 红
          field: "jjcdName",
          value: "重要",
          index: 4,
        },
      ],
      column: [
        {
          label: "客户编号",
          prop: "khbh",
        },
        {
          label: "客户姓名",
          prop: "khxm",
        },
        {
          label: "客户地址",
          prop: "khdz",
        },
        {
          label: "接单时限",
          prop: "wcsx",
        },
        {
          label: "联系电话",
          prop: "lxdh",
        },
      ],
      rejectedList: [],
      registerForm: {
        intabManName:'',
        id: "",
        gdbh: "",
        ldhm: "",
        slbm: "",
        slry: "",
        gdlx: "",
        gdxf: "",
        gdxf1: "",
        gdxf2: "",
        jjcd: "",
        rzsx: "",
        wcsx: "",
        gddjZt: "",
        gdms: "",
        khbh: "",
        khxm: "",
        lxdh: "",
        khdz: "",
        lcid: "",
        djsj: "",
        djryName: "",
        lczzyy: "",
        ysxz: "",
        sbbh: "",
        sbkj: "",
        sjdh: "",
        // 抢维修
        qwxTime: undefined, // 抢维修时间
        startTime: "", // 开始时间
        endTime: "", // 结束时间
        orderSource: "", // 工单来源 字典编码表，0计划、1自建、2热线
        typeId: "", // 维修类型,关联表TF_YWPN_REPAIRTYPE_D的关键值，查询维修类型
        respUser: "", // 维修人ID,主要负责人，查询维修人员接口
      },
      allLcjd: "",
      menuId: "",
      jdsx: "",
      wcsx: "",
      dialogVisible: false,
      clientDialog: false,
      difference: false,
      editData: {},
      dataform: {
        object: {
          CBPQ: "",
          CBB: "",
          YHBH: "",
          YHXM: "",
          YHDZ: "",
          LXDH: "",
          YHZT: "",
          SBBH: "",
          SING: "",
          ACTION: "query",
        },
        url: `api/Business/GetCustomerData`,
      },
      recordlist: [],
      recordcolumn: [
        {
          label: "被叫号码",
          prop: "sysphone",
          sortable: true,
        },
        {
          label: "主叫号码",
          prop: "telephone",
        },
        {
          label: "呼叫时间",
          prop: "callTime",
        },
        {
          label: "挂机时间",
          prop: "hangupTime",
        },
        {
          label: "接通时长(秒)",
          prop: "times",
        },
        {
          label: "呼叫类型",
          prop: "callTypeName",
        },
        {
          label: "处理工号",
          prop: "empName",
        },
      ],
      columns: [
        {
          label: "工单编号",
          prop: "gdbh",
          sortable: true,
        },
        {
          label: "工单状态",
          prop: "lcjdName",
        },
        {
          label: "工单类型",
          prop: "gdlxName",
        },
        {
          label: "工单细分",
          prop: "gdxf1Name",
        },
        {
          label: "优先级别",
          prop: "jjcdName",
        },
        {
          label: "登记人员",
          prop: "djryName",
        },
        {
          label: "登记时间",
          prop: "djsj",
        },
        {
          label: "接单时限",
          prop: "jdsx",
        },
      ],
      lists: [],
      userInfoList:[],
    };
  },
  computed: {},
  created() {
    var aData = new Date();
    this.djsj =
      aData.getFullYear() +
      "-" +
      (aData.getMonth() + 1) +
      "-" +
      aData.getDate() +
      " " +
      aData.getHours() +
      ":" +
      aData.getMinutes();

      this.fetchDatas();

    if (this.phoneNumber !== 0) {
      this.fetchData({ tel: this.phoneNumber });
    }
    this.difference = JSON.stringify(this.data) !== "{}";
    if (this.difference) {
      this.handleEdit();
      this.fetchReject();
    } else {
      this.registerForm.gddjZt = 54;
      this.registerForm.jjcd = 82;
      this.registerForm.ldhm = this.phoneNumber;
    }
    if (this.phoneNumber === 1) {
      this.registerForm.ldhm = "";
    }
    this.getSubdivide1();
    this.getSubdivide2();
    if (this.difference) {
      this.handleEdit();
    }
    this.recordpagination.telephone = this.phoneNumber;
    this.fetchDataPhone(this.recordpagination);
  },
  methods: {
    getKhbh(val) {
      this.userId = val;
    },
    handleCurrentChange(currentPage) {
      this.paginations.current = currentPage;
      this.fetchData();
    },
    handleSizeChange(pagesize) {
      this.paginations.size = pagesize;
      this.fetchData();
    },
    recordhandleCurrentChange(currentPage) {
      this.pagination.current = currentPage;
      this.fetchDatas();
    },
    recordhandleSizeChange(pagesize) {
      this.pagination.size = pagesize;
      this.fetchDatas();
    },
    // getReceiver() {
    //   switch (this.allLcjd[1]) {
    //     case '2':
    //       this.menuId = 2002
    //       break
    //     case '3':
    //       this.menuId = 2003
    //       break
    //     case '4':
    //       this.menuId = 2004
    //       break
    //     case '5':
    //       this.menuId = 2005
    //       break
    //     case '6':
    //       this.menuId = 4097
    //       break
    //     default:
    //       break
    //   }
    //   const data = {
    //     ids: this.menuId,
    //     departmentId: this.registerForm.slbm
    //   }
    //   if (this.registerForm.slbm) {
    //     getPersonnel(data).then(res => {
    //       this.receiver = res.result
    //       const arr = this.receiver.map(val => {
    //         return val.id
    //       })
    //       if (arr.indexOf(this.registerForm.slry) === -1) {
    //         this.registerForm.slry = ''
    //       }
    //     })
    //   }
    // },
    // 三级工单
    getSubdivide1() {
      this.subdivide1 = [];
      this.subdivide2 = [];
      this.registerForm.gdxf1 = "";
      this.registerForm.gdxf2 = "";
      for (let i = 0; i < this.workOrderType.length; i++) {
        if (this.workOrderType[i].id === this.registerForm.gdlx) {
          this.indexNum = i;
          break;
        }
      }

      this.subdivide1 = this.workOrderType[this.indexNum].gdglproblemdetails;
    },
    getSubdivide2() {
      this.subdivide2 = [];
      this.registerForm.gdxf2 = "";
      for (let i = 0; i < this.subdivide1.length; i++) {
        if (this.subdivide1[i].id === this.registerForm.gdxf1) {
          this.indexNumT = i;
          break;
        }
      }

      this.subdivide2 = this.subdivide1[this.indexNumT].gdglproblemdetails;
    },
    async fetchData(data) {
      // this.pageInfoShow=false;
      try {
        const newaxios = axios.create({
          withCredentials: true, // 跨域请求时发送cookiesokies
          timeout: 60000, // 请求超时
        });
        this.registerForm.lxdh=data.tel
        newaxios({
          method: "get",
          url: lcInfo.otherUrlUserdetail,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            Appkey: "oievemzt7bowa9v9sf2iczmg",
            AppSecret: "9rbbnwcs3idyyzfpvs2xv9aqr2g28hd7",
            // Appkey: "sz8ihx4tyyf56h2jn1zunhj7",
            // AppSecret: "ihzzm4cgog275557bw84jqfwwn2dggxt",
          },
          params: {
            start: 1,
            limit: 100,
            tel1:data.tel,
            // userid: "0101012064",
          },
        }).then((res) => {
          const tempData=res.data.result;
          this.userInfoList=[];
          console.log("接电话信息1-------",res);
          if(res&&res.data&&res.data.result&&tempData.data){
            let tableList = tempData.data;
            this.userInfoList=tableList;
            console.log("接电话信息2-------",this.userInfoList)
            this.userInfoList.forEach((item,index)=>{
              item.currentNum=index;
            })
            const currentNum=0;
            //子组件监听的是number，故最后改变number。先对registerForm进行赋值
            this.setRegisterForm(currentNum)
          }else{
            this.pageInfoShow=true;
          }
        });
      } catch (err) {
        console.log(err);
      }
    },
    /*改变用户*/
    changeUserInfo(data){
      this.setRegisterForm(data.currentNum);
    },
    /**赋值*/
    setRegisterForm(number){
      const data=this.userInfoList[number];
      const startTime = commonMe.getDayAppend(commonMe.getPreYaerDate('day'), 'start')
      const endTime = commonMe.getDayAppend(commonMe.getCurrentDate('day'), 'end')
      const newaxios = axios.create({
          withCredentials: true, // 跨域请求时发送cookiesokies
          timeout: 60000, // 请求超时
        });
        newaxios({
          method: "get",
          url: lcInfo.getWaterUserInfosDetails2,
          headers: {
            // "Content-Type": "application/x-www-form-urlencoded",
            Appkey: lcInfo.client_id2,
            AppSecret: lcInfo.client_secret2,
            // Appkey: "sz8ihx4tyyf56h2jn1zunhj7",
            // AppSecret: "ihzzm4cgog275557bw84jqfwwn2dggxt",
          },
          params: {
          userId: data.userid,
          startTime: startTime,
          endTime: endTime
            // userid: "0101012064",
          },
        }).then(res=>{
          let tempData = JSON.parse(res.data.result);
          console.log(tempData,'tempdata')
          // let lastChange = tempData.data[0].LastChange
          // let nowChange = tempData.data[0].NowChange
          // if(nowChange ==0){
          //   if(lastChange==0){
          //     this.registerForm.yue = 0
          //     this.arrearsFlag = false
          //   }else{
          //     this.registerForm.yue = lastChange
          //     this.arrearsFlag = true  
          //   }
          // }else{
          //   this.registerForm.yue = nowChange
          //   this.arrearsFlag = false
          // }
          // this.pageInfoShow=true;
          // this.number=number;
          this.registerForm.intabManName = tempData.data[0].InTabManName
          this.number=number;
          let lastChange = tempData.data[0].LastChange
          let totalMoney = tempData.data[0].TotMoneyDX
          let payMoney = tempData.data[0].PayMoney
          let yue = (lastChange + payMoney - totalMoney).toFixed(2)
          if(yue>=0){
            this.registerForm.yue = yue
            this.number=number;
          }else{
            this.registerForm.yue = yue
            this.arrearsFlag = true  
            this.number=number;
          }
          // this.pageInfoShow=true;
          // this.number=number;
        }
        ).catch(e=>{
          // this.pageInfoShow=true;
          this.number=number;
        })
        this.registerForm.khbh = data.userid;
        this.registerForm.khxm = data.username;
        this.registerForm.khdz =data.address;
        this.registerForm.sbbh = data.watertabid;
        this.registerForm.metertype = data.metertype;
        this.registerForm.lxdh = data.tel1;
        this.registerForm.ysxz = data.watertype1;
        debugger
        this.registerForm.sbkj=data.caliber
        this.registerForm.kaihutime=data.kaihutime;
        
    },
    /**
     * @description 来电记录
     */
    async fetchDataPhone(data) {
      try {
        const tableData = await this.getMail(data);
        this.recordlist = tableData.result.records;
        this.recordtotal = tableData.result.total;
        console.log(tableData);
        if (tableData.result.message) {
          this.$message(tableData.result.message);
        }
      } catch (err) {
        console.log(err);
      }
    },
    /**
     * @description 历史工单
     */
    fetchDatas() {
      const data = {
        current: this.paginations.current,
        size: this.paginations.size,
        ldhm: this.phoneNumber,
      };
      getRegisterList(data).then((res) => {
        this.totals = res.result.total;
        this.lists = res.result.records;
        for (var i = 0; i < this.lists.length; i++) {
          if (!this.lists[i].djsj) {
            this.lists[i].djsj = "无";
          }
        }
      });
    },

    search() {
      // debugger
      if (this.cxtj !== "" && this.cxnr !== "") {
        const data = {
          object: {
            CBPQ: "",
            CBB: "",
            YHBH: "0",
            YHXM: "",
            YHDZ: "",
            LXDH: "",
            YHZT: "",
            SBBH: "",
            SING: "",
            ACTION: "query",
          },
          url: "api/Business/GetCustomerData",
        };
        if (this.cxtj === 1) {
          data.object.YHBH = this.cxnr;
        } else if (this.cxtj === 2) {
          data.object.LXDH = this.cxnr;
        }

        getNames(data).then((res) => {
          console.log(res);
          if (res.code === 1) {
            this.list = res.result.records.map((v) => {
              return {
                khbh: v.YHBH,
                khxm: v.YHXM,
                lxdh: v.LXDH,
                khdz: v.YHDZ,
              };
            });
          }
        });
      } else {
        this.$message.error("请选择查询条件，并且输入6位以上查询");
      }
    },

    // 选择客户
    nameBtn() {
      this.clientDialog = true;
    },
    // 获取客户信息
    clientBtn(val) {
      this.clientDialog = false;
      this.registerForm = {
        ...this.registerForm,
        ...JSON.parse(JSON.stringify(val)),
      };
    },
    // 赋值
    handleEdit() {
      const data = JSON.parse(JSON.stringify(this.data));
      console.log("处理llllllllllllllllll", data);
      this.djryName = data.djryName;
      this.djsj = data.djsj;
      Object.keys(this.registerForm).forEach((key) => {
        this.registerForm[key] = data[key];
      });
    },
    // // 移除重置
    // resetFields() {
    //   this.$refs.registerForm.resetFields()
    // },
    // 工单等级提交
    submitForm() {
      this.$refs.RegisterMerges.submitForm(1);
    },
    remind() {
      this.$emit("remind", "成功");
    },
    // // 修改提交
    // editSubmit(data) {
    //   const _this = this

    //   editRegister(data).then((res) => {
    //     if (res.code === 1) {
    //       _this.$message.success('处理成功！')
    //       _this.$emit('remind', '成功')
    //       _this.resetFields()
    //     }
    //   })
    // }
  },
};
</script>

<style lang="scss" scoped>
#register_merge {
  .wrap {
    border: 1px solid rgba(57, 153, 243, 0.15);
    >>> .el-collapse-item__header {
      background: rgba(57, 153, 243, 0.15);
      font-size: 14px;
      height: 28px;
    }
  }
  .dialog_style {
    width: 100%;
    overflow-y: auto;
    /deep/ .el-table {
      text-align: center;
      vertical-align: middle;
    }
  }
  /deep/ .el-form-item {
    margin-bottom: 5px;
  }
  /deep/ .el-collapse-item__wrap {
    margin-top: 10px;
  }
}

.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 230px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #fff;
  font-size: 25px;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  border-radius: 60px;
}

.btn:hover {
  animation: animate 8s linear infinite;
}

@keyframes animate {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 400%;
  }
}

.btn::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  border-radius: 40px;
  opacity: 0;
  transition: 0.5s;
}

.btn:hover::before {
  filter: blur(20px);
  opacity: 1;
  animation: animate 8s linear infinite;
}
</style>