vue-insagent-pc/src/views/Task/AgentPoolChannel/AgentPoolChannel2.vue

<template>
  <div>
    <el-row class="queryFrom">
      <el-form ref="queryFormRef" :inline="true" :model="queryFrom" label-width="130px"   size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="业务员工号">
              <el-input v-model="queryFrom.operatorId" placeholder="请输入业务员工号" class="widths" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务员姓名">
              <el-input v-model="queryFrom.operatorName" placeholder="请输入业务员姓名" class="widths" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单号">
              <el-input v-model="queryFrom.orderNo" placeholder="请输入订单号" class="widths" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车牌号">
              <el-input v-model="queryFrom.licenseNo" placeholder="请输入车牌号" class="widths" clearable></el-input>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
          <el-col :span="6">
            <el-form-item label="车架号">
              <el-input v-model="queryFrom.frameNo" placeholder="请输入车架号" class="widths" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="投保人姓名">
              <el-input
                v-model="queryFrom.insuredName"
                placeholder="请输入投保人姓名"
                class="widths"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="机构名称">
              <el-cascader
                class="widths"
                :options="institutionOptions"
                v-model="queryFrom.deptId"
                :props="{
                  checkStrictly: true,
                  value: 'id',
                  label: 'name',
                }"
                @change="handleChange"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="录单日期">
              <el-date-picker
                v-model="queryFrom.data"
                type="daterange"
                @change="monthChange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                clearable
                style="width: 200px;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
          <el-row>
          <el-col :span="6">
            <el-form-item label="保险公司">
              <el-select v-model="queryFrom.companyId" filterable class="widths" clearable>
                <el-option
                  v-for="val in companyList"
                  :key="val.id"
                  :label="val.name"
                  :value="val.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label>
              <el-button size="small" type="primary" @click="queryStaffInfo">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <!-- button2Name="收回"
      button2Type="text"
      @handleButton2="takeBack" -->
    <kt-common-table
      v-loading="loading"
      element-loading-text="加载中..."
      :data="pageResult"
      :columns="columns"
      :showBatchDelete="false"
      @findPage="findPage"
      button3Name="转发"
      button3Type="text"
      @handleButton3="transmit"
      button5Name="详情"
      button5Type="text"
      @handleButton5="detailFun"
    ></kt-common-table>
    <el-dialog title="转发" :visible.sync="dialogVisible" width="30%">
        转发人：
      <el-select v-model="transmitValue" placeholder="请选择" filterable  clearable>
        <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" :orderInfo="queryOrders"></detailsDialog>
  </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";

export default {
  components: {
    KtCommonTable,
    detailsDialog
  },
  data() {
    return {
      pageRequest: {
        pageNum: 1,
        pageSize: 20
      },
      queryFrom: {},
      pageResult: {},
      queryOrders:{},
      columns: [
        // 数据列
        { prop: "orderno", label: "订单号", sortable: false },
        {
          prop: "username",
          label: "业务员",
          sortable: false
        },

        { prop: "deptname", label: "部门名称", sortable: false },

        { prop: "insCompany", label: "承保公司", sortable: false },
        {
          prop: "licenseno",
          label: "车牌号",
          sortable: false
        },
        { prop: "product", label: "投保险种", sortable: false },
        {
          prop: "insuredname",
          label: "投保人姓名",
          sortable: false
        },
        {
          prop: "orderstatus",
          label: "状态",
          sortable: false,
          formatter: this.statusFormatter
        }
      ],
      statusoptions: [],
      dialogVisible: false,
      companyList: [], //保险公司
      institutionOptions: [], //机构名称列表
      options: [],//转发人列表
      transmitValue: "", //选中的转发人
      orderNo:'', //主订单号
      subOrderId:'', //子订单号
      loading:false
    };
  },
  created() {
    this.$api.insCompany.dicType("insOrderStatus").then(res => {
      this.statusoptions = res.data.ddList;
    });
    this.$api.letter.gainTopList().then(res => {
      this.companyList = res.data;
    });
    this.$api.dept.findAllTree().then(res => {
      this.institutionOptions = res.data;
    });
  },
  methods: {
    queryStaffInfo() {
      this.findPage();
    },
    statusFormatter(row, column) {
      //协议类型
      let status = row.orderstatus;
      return CommonUtil.getDataName({
        dataList: this.statusoptions,
        value: "dictValue",
        label: "dictTag",
        data: status
      });
    },
    // 右侧列表的方法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
        .queryPageHospitalityLinkagent({
          ...this.pageRequest,
          ...this.queryFrom,
          orderStatus:2,
          userId: Cookies.get("user")
        })
        .then(res => {
          if (res.code == 200) {
            this.loading=false
            this.pageResult = res.data;
          } else {
            this.loading=false
            this.$message.error(res.msg);
          }
        });
    },
    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);
        }
      })
    },
    detailFun(row) {
      let params = {
        companyId: row.row.companyId
      };
      this.$api.letter.getByCompanyId(params).then(res => {
        if (res.code == "200") {
          var data = res.data;
          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);
    },
    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()
                    this.$message({
                      message: res.msg,
                      type: 'success'  
                   });
                }
                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>
  .widths {
  width: 200px;
}

</style>