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

<template>
  <div>
    <retrievalForm :fields="retrievalFields" @submit="handleFormSubmit" @toggleCollapse="toggleCollapse" :dateType="3"
      @areaSelectChange="areaSelectChange"></retrievalForm>
    <kt-common-table :data="pageResult" :columns="columns1" element-loading-text="加载中..." v-loading="loading"
      :showBatchDelete="false" @findPage="findPage" ref="commonTable" :stripe="false"
       button3Name="转发" button3Type="text" @handleButton3="transmit"
        button2Name="报价轨迹" button2Type="text" @handleButton2="trajectory"
      button6Name="批单" button6Type="text" @handleButton6="batchOrder"
       button5Name="详情" button5Type="text" @handleButton5="detailFun" button4Name="转发记录" button4Type="text"
      @handleButton4="forwardingRecords" :operationWidth="300"></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>
    <el-dialog
      :visible.sync="dialogVisibleOrder"
      width="40%"
      :before-close="handleCloseOrder">
      <el-form ref="form" :model="formDataOrder" label-width="120px" size="small">
        <h4 class="form_title">车辆信息</h4>
        <el-row :gutter="20">
          <el-col :span="12"  v-for="f in formvehicleList" :key="f.prop">
            <el-form-item  :label="f.label" :prop="f.prop">
                <el-input v-model.trim="formDataOrder.carinfo[f.prop]"  :placeholder="'请输入' + f.label"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用性质" prop="carnature">
                <el-select v-model="formDataOrder.carinfo.carnature" placeholder="请选择使用性质" @change="natureFun">
                  <el-option :label="item.dictTag" :value="item.dictValue"
                    v-for="(item, index) in natureOfVehicleUseoptions" :key="index"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆用途" prop="vehicleUse">
                <el-select v-if="formDataOrder.carinfo.carnature == '02'" v-model="formDataOrder.carinfo.vehicleUse" placeholder="请选择使车辆用途">
                  <el-option :label="item.dictTag" :value="item.dictValue"
                    v-for="(item, index) in outOfBusinessVehicleUseoptions" :key="index"></el-option>
                </el-select>
                <el-select v-else v-model="formDataOrder.carinfo.vehicleUse" placeholder="请选择使车辆用途">
                  <el-option :label="item.dictTag" :value="item.dictValue"
                    v-for="(item, index) in businessVehicleUseoptions" :key="index"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆类型" prop="cartype">
                <el-select v-model="formDataOrder.carinfo.cartype" placeholder="请选择车辆种类" filterable clearable>
                  <el-option :label="item.dictValue + item.dictTag" :value="item.dictValue"
                    v-for="(item, index) in trafficManagementVehicleTypeoptions" :key="index"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆种类" prop="cimodelclass">
                <el-select v-model="formDataOrder.carinfo.cimodelclass" placeholder="请选择车辆种类" clearable>
                  <el-option :label="item.dictTag" :value="item.dictValue" v-for="(item, index) in vehicleTypeoptions"
                    :key="index"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="能源种类" prop="energyType">
                <el-select v-model="formDataOrder.carinfo.energyType" placeholder="请选择能源种类">
                  <el-option :label="item.dictTag" :value="item.dictValue" v-for="(item, index) in energyTypeoptions"
                    :key="index"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册日期" prop="registerDate">
                <el-date-picker v-dateFormat v-model="formDataOrder.carinfo.registerDate" :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd" type="date" placeholder="选择注册日期" placement="bottom-start"></el-date-picker>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发证日期" prop="issueDate">
                <el-date-picker v-dateFormat v-model="formDataOrder.carinfo.issueDate" :picker-options="issueDateOptions" type="date"
                  placeholder="选择发证日期" value-format="yyyy-MM-dd" placement="bottom-start"></el-date-picker>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="转移登记日期" prop="transferDate">
                <el-date-picker v-dateFormat v-model="formDataOrder.carinfo.transferDate" :picker-options="pickerOptions" type="date"
                  placeholder="选择日期" value-format="yyyy-MM-dd" placement="bottom-start"></el-date-picker>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否过户" prop="transferFlag">
                <el-select v-model="formDataOrder.carinfo.transferFlag" placeholder="请选择是否过户">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in whetheroptions"
                    :key="index"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商业险是否过户" prop="transferFlagBi">
                <el-select v-model="formDataOrder.carinfo.transferFlagBi" placeholder="请选择商业险是否过户">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in whetheroptions"
                    :key="index"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否脱保" prop="outOfInsurance">
                <el-select v-model="formDataOrder.carinfo.outOfInsurance" placeholder="请选择是否脱保">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in whetheroptions"
                    :key="index"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否二手车" prop="usedCar">
                <el-select v-model="formDataOrder.carinfo.usedCar" placeholder="请选择是否二手车">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in whetheroptions"
                    :key="index"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
        </el-row>
        <h4 class="form_title">车主信息</h4>
        <el-row>
          <el-col :span="12" v-for="f in formownersList" :key="f.prop">
            <el-form-item  :label="f.label" :prop="f.prop">
                <el-input  v-model.trim="formDataOrder.ownerinfo[f.prop]"  :placeholder="'请输入' + f.label"></el-input>
              </el-form-item>
          </el-col>
        </el-row>
        <h4 class="form_title">投保人信息</h4>
        <el-row>
          <el-col :span="12" v-for="f in formPolicyholderList" :key="f.prop">
            <el-form-item  :label="f.label" :prop="f.prop">
                <el-input  v-model.trim="formDataOrder.applyinfo[f.prop]"  :placeholder="'请输入' + f.label"></el-input>
              </el-form-item>
          </el-col>
        </el-row>
        <h4 class="form_title">被保人信息</h4>
        <el-row>
          <el-col :span="12" v-for="f in forminsureinfoList" :key="f.prop">
            <el-form-item  :label="f.label" :prop="f.prop">
                <el-input  v-model.trim="formDataOrder.insureinfo[f.prop]"  :placeholder="'请输入' + f.label"></el-input>
              </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisibleOrder = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitOrder">确 定</el-button>
      </span>
    </el-dialog>

  </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 { mixin } from "../mixin";

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

      ddgjdialogVisible:false,
      trajectoryTable:[],
      optionsStatus:[],
      columns1: [
        { 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: "licenseno", label: "车牌号", minWidth: 160 },
        { prop: "jqpremium", label: "交强险保费", minWidth: 160 },
        { prop: "sypremium", label: "商业险保费", minWidth: 160 },
        // { prop: "agreementName", label: "协议", minWidth: 160 },
        { prop: "taxamount", label: "车船税", minWidth: 160 },
        { prop: "jypremium", label: "驾意险保费", minWidth: 160 },
        // { prop: "isExternal", label: "外部订单", formatter: this.isExternalFormatter},
        { prop: "insuredname", 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: {

    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;
            this.$refs.commonTable.taskPool=true
          } 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) {
      this.dialogVisible = true;
      this.transmitValue = "";
      this.orderNo = row.row.orderno
      this.subOrderId = row.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];
      }
    },

  }
};
</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);
  }
}
.form_title{
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.width{
  width: 240px;
}
</style>