vue-insagent-pc/src/views/Task/CompanyPoolChannel/CompanyPoolChannel2.vue

<template>
  <div>
    <retrievalForm
      :fields="retrievalFields"
      @submit="handleFormSubmit"
      @toggleCollapse="toggleCollapse"
      @areaSelectChange="areaSelectChange"
      :dateType="1"
    ></retrievalForm>
    <kt-common-table
      :data="pageResult"
      :columns="columns"
      element-loading-text="加载中..."
      v-loading="loading"
      :showBatchDelete="false"
      @findPage="findPage"
      button3Name="状态更新"
      button3Type="text"
      @handleButton3="querystatus"
      button2Name="报价轨迹"
      button2Type="text"
      @handleButton2="trajectory"
      button5Name="详情"
      button5Type="text"
      @handleButton5="detailFun"
      button4Name="转发记录"
      button4Type="text"
      @handleButton4="forwardingRecords"
      :operationWidth="300"
      :buttonDropdown="dropdownOption"
    ></kt-common-table>
    <el-dialog title="转发" :visible.sync="dialogVisible" width="30%">
      转发人：
      <el-select
        v-model="transmitValue"
        filterable
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.userId"
          :label="item.name"
          :value="item.userId"
        ></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="transmitSumit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <detailsDialog
      ref="detailsDialog"
      :isTaskPool="true"
      :orderInfo="queryOrders"
      :isAuditing="isAuditing"
      :feeOrderNewVoList="feeOrderNewVoList"
    ></detailsDialog>
    <el-dialog :visible.sync="ddgjdialogVisible" width="430px">
      <div slot="title" class="dialog-title">
        <span>订单轨迹</span>
      </div>
      <div style="height: 300px; overflow-y: auto">
        <el-steps direction="vertical" :active="trajectoryTable.length - 1">
          <el-step
            v-for="item in trajectoryTable"
            :key="item.id"
            :title="getStatusText(item.orderStatus)"
          >
            <template slot="description">
              <span>保险公司：{{ item.insCompany }}</span>
              <span>提交人：{{ item.operator }}</span>
              <div>创建时间：{{ item.createTime }}</div>
              <div v-if="item.remark">状态更新：{{ item.remark }}</div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="forwardingRecordsdialogVisible"
      title="转发记录"
      width="70%"
    >
      <el-table
        :data="gridData"
        height="400"
        border
        v-loading="loading"
        highlight-current-row
        stripe
        :header-cell-style="{
          background: '#F2F7FC',
          fontWeight: '700',
          color: '#606266',
        }"
      >
        <el-table-column
          property="subOrderId"
          align="center"
          label="订单号"
          width="200"
        ></el-table-column>
        <el-table-column
          property="oldOperatorId"
          align="center"
          label="转发人"
          width="200"
        ></el-table-column>
        <el-table-column
          property="newOperatorId"
          align="center"
          label="接收人"
        ></el-table-column>
        <el-table-column
          property="remark"
          align="center"
          label="转发信息"
        ></el-table-column>
        <el-table-column
          property="createTime"
          align="center"
          label="转发时间"
        ></el-table-column>
      </el-table>
    </el-dialog>
    <qrCodedialog ref="qrCodedialog"></qrCodedialog>
  </div>
</template>
<script>
import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import Cookies from "js-cookie";
import CommonUtil from "@/utils/comutil.js";
import detailsDialog from "@/views/Core/components/detailsDialog.vue";
import retrievalForm from "@/components/Form/retrievalForm.vue";
import qrCodedialog from "../component/qrCode.vue";
import { mixin } from "../mixin";

export default {
  components: {
    KtCommonTable,
    detailsDialog,
    retrievalForm,
    qrCodedialog,
  },
  data() {
    return {
      pageRequest: {
        pageNum: 1,
        pageSize: 20,
        orderStatus: 2,
        userId: "",
      },

      ddgjdialogVisible: false,
      trajectoryTable: [],
      optionsStatus: [],
      subOrderId: "",
      dropdownOption: [
        {
          label: "二维码",
          click: (row) => this.carcode(row),
        },
        {
          label: "撤销二维码",
          click: (row) => this.revokeCode(row),
        },
        {
          label: "转发",
          click: (row) => this.transmit(row),
        },
        {
          label: "撤单",
          hide: (row) => {
            return row.insCompany == "紫金财险" ? true : false;
          },
          click: (row) => this.cancelorder(row),
        },
      ],
      columns: [
        { prop: "subOrderId", label: "订单号", minWidth: 180 },
        { prop: "product", label: "投保险种", minWidth: 100 },
        { prop: "areaInfo", label: "归属信息", minWidth: 150 },
        { prop: "username", label: "业务员姓名", minWidth: 180 },
        { prop: "leaderName", label: "管理人", minWidth: 160, },
        { prop: "managementSource", label: "业务来源", minWidth: 160, formatter: this.managementSourceFormatter },
        { prop: "entryStatus", label: "录入来源", minWidth: 160, formatter: this.entryStatusFormatter },
        // { prop: "insCompany", label: "保险公司", minWidth: 120 },
        { prop: "partnerCompaniesName", label: "合作公司", minWidth: 120 },
        // { prop: "agreementName", label: "协议", minWidth: 160 },
        { prop: "licenseno", label: "车牌号", minWidth: 160 },
        { prop: "insuredname", label: "投保人姓名", minWidth: 120 },
        { prop: "jqpremium", label: "交强险保费", minWidth: 120 },
        { prop: "sypremium", label: "商业险保费", minWidth: 120 },
        { prop: "taxamount", label: "车船税", minWidth: 120 },
        { prop: "jypremium", label: "驾意险保费", minWidth: 120 },
        {prop: "underwritingStatus", label: "核保通过方式", minWidth: 180, formatter: this.underwritingMethodFormatter },
        { prop: "userid", label: "业务员工号", minWidth: 180 },
        { prop: "createtime", label: "报价时间", minWidth: 160 },
        { prop: "underwritingTime", label: "核保时间", minWidth: 160 },
        { prop: "payDate", label: "缴费时间", minWidth: 160 },
        { prop: "updateStatusTime", label: "更新时间", minWidth: 160 },
        { prop: "updateStatus", label: "更新状态", minWidth: 160, formatter: this.updateStatusFormatter },
        { prop: "signingTime", label: "签单时间", minWidth: 160 },
      ],
    };
  },
  mixins: [mixin],
  created() {
    this.pageRequest.userId = Cookies.get("user");
    this.$api.insCompany.dicType("insOrderStatusAll").then((res) => {
      this.optionsStatus = res.data.ddList;
    });
    this.retrievalFields.push(
      {
        name: 'managementSource',
        label: '业务来源',
        type: 'select',
        Retained: true,
        options: [],
        optionsIabel: "dictTag",
        optionsValue: "dictValue",
      },
      {
        name: ["auditStartDateStr", "auditEndDateStr"],
        label: '核保时间',
        type: 'date',
        list: 'auditTimeList'
      },
      {
        name: ["payStartDateStr", "payEndDateStr"],
        label: '缴费时间',
        type: 'date',
        list: 'payDateList'
      },
      {
        name: ["updateStartDateStr", "updateEndDateStr"],
        label: '更新时间',
        type: 'date',
        list: 'updateDateList'
      },
      {
          name: 'updateStatus',
          label: '更新状态',
          type: 'select',
          Retained: true,
          optionsIabel: "label",
          optionsValue: "value",
          options: [
            {
              label: "手动更新",
              value: "1",
            },
            {
              label: "自动更新",
              value: "2",
            },
          ],
        },
    )
  },

  methods: {
    querystatus(item) {

      let inscompany = {
        国任财险: "updateOrderInfoGuoren",
        华泰财险: "updateOrderInfoHuatai",
        大家财险: "updateOrderInfoDajia",
        紫金财险: "getOrderDetail",
        中煤财险: "paymentEnquiry",
        渤海财险: "getOrderDetailboHai",
      };
      Object.keys(inscompany).forEach((val) => {
        if (val == item.row.insCompany) {
          this.$api.letter[inscompany[val]]({
            companyId: item.row.subOrderId,
          }).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg ? res.msg : "已刷新状态",
                type: "success",
              });
              this.findPage();
            } else {
              this.$message({ message: res.msg, type: "error" });
            }
          });
        }
      });
      if (item.row.insCompany == "永诚财险") {
        this.$api.letter.orderStatusyongcheng(item.row.subOrderId).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.findPage();
          } else {
            this.$message({ message: res.msg, type: "error" });
          }
        });
      }
      if (item.row.insCompany == "华泰财险") {
        let HtApiType =
          item.row.apiType == 2 ? "pychonverifyPayment" : "updateOrderInfoHuatai";

        this.$api.letter[HtApiType](
          item.row.apiType == 2 ? { subOrderNo: item.row.subOrderId } : item.row.id
        ).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg ? res.msg : "已刷新状态",
              type: "success",
            });
            this.findPage();
          } else {
            this.$message({ message: res.msg, type: "error" });
          }
        });
      }
      if (
        item.row.insCompany == "恒邦财险" ||
        item.row.insCompany == "众安财险" ||
        item.row.insCompany == "中国人寿" ||
        item.row.insCompany == "安盛天平" ||
        item.row.insCompany == "太平财险" ||
        item.row.insCompany == "华农财险"
      ) {
        this.$api.letter
          .pychonverifyPayment({ subOrderNo: item.row.subOrderId })
          .then((res) => {
            if (res.code == "200") {
              this.$message({
                message: "订单支付成功，正在更改状态",
                type: "success",
              });
              this.findPage();
            } else {
              this.$message({ message: res.msg, type: "error" });
            }
          });
      }
    },
    carcode(row) {
      this.$refs.qrCodedialog.carcode(row);
    },
    getStatusText(code) {
      return this.optionsStatus.find((val) => val.dictValue == code).dictTag;
    },
    handleFormSubmit(data) {
      let obj = Object.assign(this.pageRequest, data);
      this.pageRequest = obj;
      this.findPage();
    },
    toggleCollapse(data) {
      this.retrievalFields.map((val) => {
        if (val.Retained != null) val.Retained = data;
        return val;
      });
    },
    queryStaffInfo() {
      this.findPage();
    },
    // 右侧列表的方法Start
    findPage(data) {
      if (data && data.pageRequest) {
        this.pageRequest.pageNum = data.pageRequest.pageNum;
        this.pageRequest.pageSize = data.pageRequest.pageSize;
      }
      this.loading = true;
      this.$api.task
        .queryPageHospitalityByInsuranceCompany(this.pageRequest)
        .then((res) => {
          if (res.code == 200) {
            this.loading = false;
            this.pageResult = res.data;
          } else {
            this.loading = false;
            this.$message.error(res.msg);
          }
        });
    },
    trajectory(row) {
      this.$api.letter.queryBySuborder(row.row.subOrderId).then((res) => {
        if (res.code == 200 && res.data.length > 0) {
          this.ddgjdialogVisible = true;
          this.trajectoryTable = res.data;
        } else {
          this.$message({
            message: res.msg || "暂无数据！",
            type: "warning",
          });
        }
      });
    },
    transmit(row) {
      // console.log(row)
      this.dialogVisible = true;
      this.transmitValue = "";
      this.orderNo = row.orderno;
      this.subOrderId = row.subOrderId;
      this.$api.task.getCustomerUsers().then((res) => {
        if (res.code == 200) {
          this.options = res.data;
        }
      });
    },
    // 收回
    takeBack(row) {
      let orderNo = row.row.orderno;
      let subOrderId = row.row.subOrderId;
      this.$api.task.taskPoolsRecover({ orderNo, subOrderId }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    transmitSumit() {
      if (this.transmitValue) {
        this.$api.task
          .forwardingSubOrders({
            auditId: this.transmitValue,
            orderNo: this.orderNo,
            subOrderId: this.subOrderId,
          })
          .then((res) => {
            if (res.code == 200) {
              this.options = res.data;
              this.dialogVisible = false;
              this.findPage();
            } else {
              this.$message.error(res.msg);
            }
          });
      } else {
        this.$message.error("请选择转发人！");
      }
    },
    //联级选择器触发事件
    handleChange(val) {
      if (val.length !== 0) {
        this.queryFrom.deptId = val.at(-1);
      } else {
        this.queryFrom.deptId = "";
      }
    },
    monthChange(e) {
      if (e === null) {
        this.queryFrom.startDate = "";
        this.queryFrom.endDate = "";
      } else {
        this.queryFrom.startDate = e[0];
        this.queryFrom.endDate = e[1];
      }
    },
    // detailFun(row) {
    //   let params = {
    //     companyId: row.row.subOrderId
    //   };
    //   this.$api.letter.getByCompanyId(params).then(res => {
    //     if (res.code == "200") {
    //       var data = res.data;
    //       this.orderInfo = res.data;
    //       this.cpolicy();
    //       this.ImageList();
    //       data.kindinfo.map((ele, index) => {
    //         switch (ele.kindCode) {
    //           case "A":
    //             ele.amount = "投保";
    //             break;
    //           case "D4":
    //           case "SY_FJ_YBW2":
    //             ele.unitAmount = this.toChinesNum(ele.unitAmount);
    //             break;
    //           case "MJ1":
    //           case "MJ2":
    //           case "MJ3":
    //           case "MJ4":
    //             ele.deductibleRate = ele.deductibleRate + "%";
    //             break;
    //           default:
    //             ele.amount = this.toChinesNum(ele.amount);
    //         }
    //         return ele;
    //       });
    //       this.queryOrders = data;
    //       //赋值费用信息
    //       // this.feeDetailInfo=data.orderFeeResult;
    //     }
    //   });
    //   this.$refs.detailsDialog.setBackupVisible(true);
    // },
  },
};
</script>

<style scoped lang="scss">
/deep/ {
  .el-step__description.is-finish,
  .el-step__head.is-finish {
    color: #333;
    border: none;
  }
  .el-step__title,
  .el-step__icon-inner {
    color: var(--themeColor);
  }
  .el-step__line-inner {
    height: 0;
    display: none;
  }
  .is-flex {
    .el-step__icon {
      background: var(--themeColor);
    }
    .el-step__icon-inner {
      color: #fff;
    }
  }
  .el-step__icon.is-text {
    border: none;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
  }
}
</style>