vue-insagent-pc/src/views/Task/UpdateOrderData/Index.vue

<template>
  <div class="page">
    <retrievalForm :fields="retrievalFields" @submit="handleFormSubmit" @toggleCollapse="toggleCollapse"
      @areaSelectChange="areaSelectChange"></retrievalForm>
    <el-table size="small" :data="pageResult" height="590" border v-loading="loading" highlight-current-row
      @expand-change="handleRowChange" ref="expandTable"
      :header-cell-style="{ background: '#F2F7FC', fontWeight: '700', color: '#606266' }">
      <el-table-column prop="subOrderId" label="订单号" align="center"></el-table-column>
      <el-table-column prop="username" label="业务员工号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.userid }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="业务员名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="managementSource" label="业务来源" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.managementSource == '渠道'">渠道</el-tag>
          <el-tag v-if="scope.row.managementSource == '个代'" type="success">个代</el-tag>
          <el-tag v-if="scope.row.managementSource == '电销'" type="warning">电销</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="agreementName" label="协议" align="center" width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.agreementName }} - {{ scope.row.businessDescription }} - {{ scope.row.jobDescription }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="insCompany" label="承保公司" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.insCompany ? scope.row.insCompany : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dockingPerson" label="对接人" align="center"></el-table-column>
      <el-table-column prop="entryStatus" label="录入来源" align="center" width="100">
        <template slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.entryStatus == '1'" effect="dark">车险录入</el-tag>
          <el-tag size="mini" v-if="scope.row.entryStatus == '2'" effect="dark" type="success">代客录单</el-tag>
          <el-tag size="mini" v-if="scope.row.entryStatus == '3'" effect="dark" type="warning">外部订单</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isExternal" label="外部订单" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.isExternal == '1' ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="insCompany" label="合作公司" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.partnerCompaniesName ? scope.row.partnerCompaniesName : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="licenseno" label="车牌号" align="center"></el-table-column>
      <el-table-column prop="insuredname" label="被保险人" align="center"></el-table-column>
      <el-table-column prop="product" label="投保险种" align="center"></el-table-column>
      <el-table-column prop="operatorName" label="录入人" align="center"></el-table-column>
      <el-table-column prop="createtime" label="录单日期" align="center"></el-table-column>
      <el-table-column prop="signingTime" label="签单时间" align="center"></el-table-column>
      <el-table-column prop="payDate" label="支付时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center" min-width="170">
        <template slot-scope="scope">
          <kt-button label="上传保单" type="text" @click="uploadPolicy(scope.row)" /><br/>
          <kt-button label="保单Pdf详情" type="text"    @click="cpolicy(scope.row)" />
          <kt-button label="重新生成保单" type="text" @click="regenerate(scope.row)" />
          <kt-button label="保单时间更新" type="text"  @click="updateDate(scope.row)" />
          <kt-button label="更新时间记录" type="text" @click="udapteOrderDateRecord(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <div class="block">
      <el-pagination @size-change="applyhandleSizeChange" @current-change="applyhandleCurrentChange"
        :current-page="pageNum" :page-size="pageSize" :page-sizes="[20, 30, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper" :total="totalSize"></el-pagination>
    </div>
    <!-- 车辆报价新页面 -->
    <el-dialog title="保单信息" ref="detailsDialog" width="500"  height="500"  :visible.sync="cpolicyFlag" :close-on-click-modal="false" @close="closeCpolicyDialog">
          <div>
          <el-row class="premium-style " :gutter="20">
            <el-col v-if="warrantObj.jqPolicyNo" :span="12"><span>交强险保单号：</span>{{ warrantObj.jqPolicyNo }}</el-col>
            <el-col v-if="warrantObj.syPolicyNo" :span="12"><span>商业险保单号：</span>{{ warrantObj.syPolicyNo }}</el-col>
            <el-col :span="12" v-for="(oldfileItem, oldfileIndex) in warrantObj.oldfileList" :key="oldfileIndex">
              <span>{{ oldfileItem.fileTitle }} ：</span>{{ orderInfo.licenseno }}
              <el-button style="margin-left:30px" type="text" @click="viewfile(oldfileItem)">下载
              </el-button>
            </el-col>
            <el-col :span="12" v-for="(val, oldfileIndex) in warrantObj.businessList" :key="oldfileIndex">
              <span>{{ val.fileTitle }} ：</span>{{ orderInfo.licenseno }}
              <el-button style="margin-left:30px" type="text" @click="viewfile(val)">下载
              </el-button>
            </el-col>

          </el-row>
          <el-row class="premium-style " :gutter="20">
            <el-col :span="12" v-for="(oldfileItem, oldfileIndex) in warrantObj.accidentList" :key="oldfileIndex">
              <span>{{ oldfileItem.fileTitle }} ：</span>{{ orderInfo.licenseno }}
              <el-button style="margin-left:30px" type="text" @click="viewfile(oldfileItem)">下载
              </el-button>
            </el-col>
          </el-row>
        </div>
    </el-dialog>
    <!--  跟新记录  -->
    <el-dialog title="时间更新记录" ref="detailsUpdateDialog" width="500"  height="500"  :visible.sync="updateFlag" :close-on-click-modal="false" @close="closeUpdeteDialog">
      <div>
        <el-table :size="overSize"  ref="productTable" :data="updateDateRecord"  height="500"  highlight-current-row  stripe
          :header-cell-style="{ background: '#F2F7FC', fontWeight: '700',color: '#606266',}">
            <el-table-column prop="subOrderNo"  label="子订单号"  align="center" width="180"></el-table-column>
            <el-table-column  prop="createTime"  label="创建时间"  align="center"  width="150"></el-table-column>
            <el-table-column  prop="oldPayDate"  label="旧支付时间"  align="center"  width="150"></el-table-column>
            <el-table-column  prop="oldSignTime"  label="旧签单时间"  align="center"  width="150"></el-table-column>
            <el-table-column  prop="newPayDate"  label="新支付时间"  align="center"  width="150"></el-table-column>
            <el-table-column  prop="newSignTime"  label="新签单时间"  align="center"  width="150"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-drawer
      size="100%"
      :visible.sync="uploadPolicyDrawer"
      direction="rtl"
      title="上传保单"
    >
      <el-form :model="uploadPolicyForm" label-width="80" style="padding: 0 24px">
          <el-form-item prop="uploadPolicyForm.a" label="交强保单">
              <el-upload
                      action="#"
                      :auto-upload="false"
                      accept=".pdf"
                      :on-change="jqUpload">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form-item>
          <el-form-item prop="uploadPolicyForm.a" label="交强标志">
              <el-upload
                      action="#"
                      :auto-upload="false"
                      accept=".pdf"
                      :on-change="jqSignUpload">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form-item>
          <el-form-item prop="uploadPolicyForm.a" label="商业保单">
              <el-upload
                      action="#"
                      :auto-upload="false"
                      accept=".pdf"
                      :on-change="syUpload">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form-item>
          <el-form-item prop="uploadPolicyForm.a" label="驾意保单">
              <el-upload
                      action="#"
                      :auto-upload="false"
                      accept=".pdf"
                      :on-change="jyUpload">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>

import retrievalForm from "@/components/Form/retrievalForm.vue";
import Cookies from "js-cookie";
import KtButton from "@/views/Core/KtButton";//按钮权限组件
import detailsDialog from "@/views/Core/components/detailsDialog.vue";
import {uploadInsurancePolicy} from "../../../http/moudules/readPdf";
export default {
  components: {
    KtButton,
    detailsDialog,
    retrievalForm
  },
  data() {
    return {
      updateDateRecord:[],
      updateFlag:false,
      orderInfo:{},
      cpolicyFlag:false,
      isrejection: false,
      ddgjdialogVisible: false,
      trajectoryTable: [],
      feeOrderNewVoList: {},
      isAuditing: {},
      oldFeeInfo: [],//原始跟单费用比例
      adjustFeeDescInfo: {},//调整费用时使用对象
      adjustFeeFlag: false,
      queryOrders: "",
      value2: "",
      optionsStatus: [],
      quotedetailsdialogVisible: false,
      loading: false,
      pageNum: 1,//页数
      pageSize: 20,//条数
      totalSize: null,//总数
      peopleid: "",//工号
      pageResult: [],//列表
      pageRequest: {
        pageNum: 1,
        pageSize: 20,
        orderStatus: 0,
        userId: "",
      },
      retrievalFields: [
      {
          name: 'whole',
          label: '总机构',
          type: 'select',
          options: []
        },
        {
          name: 'provinceId',
          label: '省机构名称',
          type: 'select',
          options: []
        },
        {
          name: 'cityId',
          label: '市机构名称',
          type: 'select',
          options: []

        },
        {
          name: 'countyId',
          label: '区机构名称',
          type: 'select',
          options: []
        },
        {
          name: 'houseId',
          label: '门店名称',
          type: 'select',
          options: []
        },
        {
          name: 'orderNo',
          label: '订单号',
          type: 'input',

        },
        {
          name: 'managementSource',
          label: '业务来源',
          type: 'select',
          options: [],
          optionsIabel: "dictTag",
          optionsValue: "dictValue",
        },
        {
          name: 'companyId',
          label: '保险公司',
          type: 'select',
          options: []
        },
        {
          name: 'insuredName',
          label: '被保险人',
          type: 'input',
          Retained: true,
        },
        {
          name: 'licenseNo',
          label: '车牌号',
          type: 'input',
          Retained: true,

        },
        {
          name: 'frameNo',
          label: '车架号',
          type: 'input',
          Retained: true,

        },
        {
          name: 'engineNo',
          label: '发动机号',
          type: 'input',
          Retained: true,
        },

        {
          name: 'riskCode',
          label: '投保险种',
          type: 'select',
          Retained: true,
          options: [],
          optionsIabel: "dictTag",
          optionsValue: "dictTag",
        },
        {
          name: 'operatorId',
          label: '代理人工号',
          type: 'input',
          Retained: true,
        },
        {
          name: 'operatorName',
          label: '代理人姓名',
          type: 'input',
          Retained: true,
        },
        {
          name: 'auditId',
          label: '受理人工号',
          type: 'input',
          Retained: true,
        },

        {
          name: 'agreeId',
          label: '协议选择',
          type: 'select',
          options: [],
          optionsIabel: "agreementName",
        },



        {
          name: 'isExternal',
          label: '外部订单',
          type: 'select',
          optionsIabel: "label",
          optionsValue: "value",
          options: [
            {
              label: '是',
              value: '1'
            }, {
              label: '否',
              value: '0'
            },
          ],
        },
        {
          name: 'problemOrder',
          label: '疑问订单',
          type: 'select',
          optionsIabel: "label",
          optionsValue: "value",
          options: [
            {
              label: '是',
              value: '1'
            }, {
              label: '否',
              value: '0'
            },
          ],
        },
        {
          name: ["quoteStartDateStr", "quoteEndDateStr"],
          label: '报价时间',
          type: 'date',
          list: 'quoteList'
        },
        {
          name: ["attachStartDateStr", "attachEndDateStr"],
          label: '起保时间',
          type: 'date',
          list: 'attachList'
        },
        {
          name: ["signStartDateStr", "signEndDateStr"],
          label: '签单时间',
          type: 'date',
          list: 'signList'
        },
        {
          name: ["payStartDateStr", "payEndDateStr"],
          label: '支付时间',
          type: 'date',
          list: 'payList'
        },
        {
          name: 'jqPolicyNo',
          label: '交强保单号',
          type: 'input',
          Retained: true,
        },
        {
          name: 'syPolicyNo',
          label: '商业保单号',
          type: 'input',
          Retained: true,
        },
        {
          name: 'noPolicyNo',
          label: '非车保单号',
          type: 'input',
          Retained: true,
        },
      ],
      warrantObj: {

      },
      uploadPolicyDrawer: false, // 上传保单
      uploadPolicyForm: {
          a: ''
      },
      subOrderId: ''
    }
  },
  created() {
    this.pageRequest.userId = Cookies.get("user");
    this.areaqueryList(0, 9, "whole");
    this.CompanyList();
    this.agrmentlist();
    this.$api.insCompany.dicType('productsType').then(res => {
      if (res.code == 200) {
        this.selectDataMatching(this.retrievalFields, 'riskCode', res.data.ddList);
      }
    });
    this.$api.insCompany.dicType('organizationSource').then(res => {
      if (res.code == 200) {
        this.selectDataMatching(this.retrievalFields, 'managementSource', res.data.ddList);
      }
    });
    this.getDicType("natureOfVehicleUse");//车辆使用性质
    this.getDicType("businessVehicleUse"); //（车辆用途）营业
    this.getDicType("outOfBusinessVehicleUse"); //（车辆用途）非营业
    this.getDicType("vehicleType"); //车辆种类
    this.getDicType("trafficManagementVehicleType"); //车辆类型
    this.getDicType("energyType"); //能源种类
  },
  mounted() {
    window.addEventListener('resize', this.getDimensions);
  },
  unmounted() {
    window.removeEventListener('resize', this.getDimensions);
  },
  methods: {
    //获取机构数据
    areaqueryList(level, parentId, filed) {
      this.$api.task.queryListByParentId(level, parentId).then((res) => {
        this.selectDataMatching(this.retrievalFields, filed, res.data);
      });
    },
    CompanyList() {
      this.$api.letter.gainTopList().then((res) => {
        this.selectDataMatching(this.retrievalFields, 'companyId', res.data);
      })
    },
    agrmentlist() {
      this.$api.task.findPtlAgreementList().then((res) => {
        this.selectDataMatching(this.retrievalFields, 'agreeId', res.data);
      });
    },
    getDicType(type) {
      this.$api.insCompany.dicType(type).then(res => {
        if (res.code == 200) {
          this[type + 'options'] = res.data.ddList;
        }
      })
    },
    //下拉数据匹配
    selectDataMatching(files, name, data) {
      files.forEach(filed => {
        if (filed.name == name) {
          filed.options = data;
        }
      })
    },
    areaSelectChange(obj) {
      switch (obj.filed) {
        case "whole":
          this.areaqueryList(1, obj.id, "provinceId");
          break;
        case "provinceId":
          this.areaqueryList(2, obj.id, "cityId");
          break;
        case "cityId":
          this.areaqueryList(3, obj.id, "countyId");
          break;
        case "countyId":
          this.areaqueryList(4, obj.id, "houseId");
          break;
        default:
      }
    },
    handleFormSubmit(data) {
      this.pageRequest.pageNum = 1;
      this.pageRequest.pageSize = 20;
      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;
      })
    },
    toChinesNum(num) {
      let changeNum = [
        "零", "1", "2", "3", "4", "5", "6", "7", "8", "9"
      ];
      let unit = ["", "0", "00", "000", "0000"];
      num = parseInt(num);
      let getWan = temp => {
        let strArr = temp
          .toString()
          .split("")
          .reverse();
        let newNum = "";
        let newArr = [];
        strArr.forEach((item, index) => {
          newArr.unshift(
            item === "0" ? changeNum[item] : changeNum[item] + unit[index]
          );
        });
        let numArr = [];
        newArr.forEach((m, n) => {
          if (m !== "零") numArr.push(n);
        });
        if (newArr.length > 1) {
          newArr.forEach((m, n) => {
            if (newArr[newArr.length - 1] === "零") {
              if (n <= numArr[numArr.length - 1]) {
                newNum += m;
              }
            } else {
              newNum += m;
            }
          });
        } else {
          newNum = newArr[0];
        }
        return newNum;
      };
      let overWan = Math.floor(num / 10000);
      let noWan = num % 10000;
      if (noWan.toString().length < 4) {
        noWan = "0" + noWan;
      }
      return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
    },
    //联级选择器触发事件
    handleChange(val) {
      if (val.length !== 0) {
        this.pageRequest.deptId = val.at(-1);
      }
      else {
        this.pageRequest.deptId = ''
      }
    },
    getDimensions() {
      this.width = document.documentElement.clientWidth - 350 + 'px';
    },
    //使用性质
    natureOfVehicleUseCap(ele) {
      if (this.natureOfVehicleUseoptions.find(item => item.dictValue == ele)) {
        return this.natureOfVehicleUseoptions.find((item) => {
          return item.dictValue === ele;
        }).dictTag;
      }
      else {
        return ''
      }
    },
    //车辆类型
    trafficManagementVehicleTypeCap(ele) {
      if (this.trafficManagementVehicleTypeoptions.find(item => item.dictValue == ele)) {
        return this.trafficManagementVehicleTypeoptions.find((item) => {
          return item.dictValue === ele;
        }).dictTag;
      }
      else {
        return ''
      }
    },
    //车辆种类
    vehicleTypeCap(ele) {
      if (this.vehicleTypeoptions.find(item => item.dictValue == ele)) {
        return this.vehicleTypeoptions.find((item) => {
          return item.dictValue === ele;
        }).dictTag;
      }
      else {
        return ''
      }
    },
    //能源种类
    energyTypeCap(ele) {
      if (this.energyTypeoptions.find(item => item.dictValue == ele)) {
        return this.energyTypeoptions.find((item) => {
          return item.dictValue === ele;
        }).dictTag;
      }
      else {
        return ''
      }
    },
    //车辆用途
    outOfBusinessVehicleUseCap(type, ele) {
      switch (type) {
        case '非营业':
          if (this.outOfBusinessVehicleUseoptions.find(item => item.dictValue == ele)) {
            return this.outOfBusinessVehicleUseoptions.find((item) => {
              return item.dictValue === ele;
            }).dictTag;
          }
          else {
            return ''
          }
        case '营业':
          if (this.businessVehicleUseoptions.find(item => item.dictValue == ele)) {
            return this.businessVehicleUseoptions.find((item) => {
              return item.dictValue === ele;
            }).dictTag;
          }
          else {
            return ''
          }
        default:
      }

    },
    tableRowClassName(row) {
      if (row.row.problemOrder === 1) {
        return "flagRow";
      }
      else {
        return ''
      }
    },
    //关闭
    closeCpolicyDialog() {
      this.cpolicyFlag =false;
      this.warrantObj={};
    },
    uploadPolicy(row) {
      this.uploadPolicyDrawer = true
        this.subOrderId = row.subOrderId
    },
    jqUpload(file) {
        let files = file.raw;
        const params = new FormData(); // 声明formData数据类型
        params.append("file", files);
        params.append('subOrderId',this.subOrderId )
        params.append('policyType','1' )
        this.$api.readPdf.uploadInsurancePolicy(params).then((res) => {
            console.log(123123, res.data)
        })
    },
    syUpload(file) {
        let files = file.raw;
        const params = new FormData(); // 声明formData数据类型
        params.append("file", files);
        params.append('subOrderId',this.subOrderId )
        params.append('policyType','3' )
        this.$api.readPdf.uploadInsurancePolicy(params).then((res) => {
            console.log(123123, res.data)
        })
    },
    jyUpload(file) {
        let files = file.raw;
        const params = new FormData(); // 声明formData数据类型
        params.append("file", files);
        params.append('subOrderId',this.subOrderId )
        params.append('policyType','2' )
        this.$api.readPdf.uploadInsurancePolicy(params).then((res) => {
            console.log(123123, res.data)
        })
    },
    jqSignUpload(file) {
        let files = file.raw;
        const params = new FormData(); // 声明formData数据类型
        params.append("file", files);
        params.append('subOrderId',this.subOrderId )
        params.append('policyType','4' )
        this.$api.readPdf.uploadInsurancePolicy(params).then((res) => {
            console.log(123123, res.data)
        })
    },
    cpolicy(row) {
      this.cpolicyFlag =true;
       this.$api.readPdf.readPdfUrlList(row.subOrderId).then((res) => {
        console.log(res.data)
        if (res.code == 200) {
          console.log(res.data)
           this.warrantObj =res.data;
        } else{
          this.$message.error(res.msg);
        }
      });
    },
    //重新生成
    regenerate(row) {
      this.$confirm("确定要重新生成吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
           this.$api.readPdf.productOrderPdf(row.subOrderId).then((res) => {
              if (res.code == 200) {
                this.$message.info("重新生成成功");
                this.findPage();
              } else{
                this.$message.error("重新生成失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消",
          });
        });

    },
    //更新订单的签单和缴费时间
    updateDate(row) {
       this.$api.readPdf.updateOrderDate(row.subOrderId).then((res) => {
        if (res.code == 200) {
          this.$message.info(res.msg);
          this.findPage();
        } else{
          this.$message.error(res.msg);
        }
      });
    },
    //更新记录
    udapteOrderDateRecord(row) {
      this.updateFlag =true;
       this.$api.readPdf.updateOrderDateRecord(row.subOrderId).then((res) => {
        if (res.code == 200) {
          this.updateDateRecord =res.data;
          this.findPage();
        } else{
          this.$message.error(res.msg);
        }
      });
    },
    // 设置每页条数
    applyhandleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.pageRequest.pageNum = 1;
      this.pageRequest.pageSize = val;
      this.findPage();
    },
    // 当前页
    applyhandleCurrentChange(val) {
      this.pageNum = val;
      this.pageRequest.pageNum = val;
      this.findPage();
    },
    handleRowChange(row) {
      if (!row.expanded) {
        this.$api.letter.querySonOrders({ orderNo: row.orderno }).then(res => {
          if (res.code == '200' && res.data.length != 0) {
            this.pageResult.map(item => {
              if (item.orderno === row.orderno) {
                item.insAreaCompanyList = res.data;
              }
              return item;
            })
            row.expanded = !row.expanded;
            this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
          } else {
            this.$message.info("暂无数据");
          }
        })
      } else {
        row.expanded = !row.expanded;
        this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
      }
    },
    //数据
    findPage() {
      this.loading = true;
      this.$api.readPdf.queryPageOrder(this.pageRequest).then((res) => {
        if (res.code == "200") {
          this.loading = false;
          this.pageResult = res.data.content;
          this.pageNum = res.data.pageNum;
          this.totalSize = res.data.totalSize;
          this.pageResult.forEach(val => {
            this.$set(val, "expanded", false);
          });
        } else {
          this.loading = false;
        }
      })
    },
    //查询
    onSubmit() {
      this.pageRequest.pageNum = 1;
      this.pageRequest.pageSize = 20;
      this.findPage();
    },
    //时间js
    monthChange(e) {
      if (e === null) {
        this.pageRequest.startDate = e;
        this.pageRequest.endDate = e;
      } else {
        this.pageRequest.startDate = e[0];
        this.pageRequest.endDate = e[1];
      }

    },
    tableRowColor({ row, rowIndex }) {
      console.log(row.problemOrder);
      if (row.problemOrder  == 1) {
        return "blue-row";
      }
    },
    //预览文件
    viewfile(index) {
      console.log(index);
      let name = index.fileurl.lastIndexOf("/");
      fetch(index.fileurl)
        .then((response) => response.blob())
        .then((blob) => {
          this.saveAs(
            blob,
            index.fileurl.substring(name + 1, index.fileurl.length)
          );
        })
        .catch((error) => { });
    },
    saveAs(blob, filename) {
      var link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.target = "_ blank";
      link.download = filename;
      link.click();
    },
    //关闭更新时间记录
    closeUpdeteDialog(){
       this.updateFlag = flase;
    },
  }
}
</script>
<style lang="scss" scoped>
/deep/ {
  .el-table .row-expand-cover .cell .el-table__expand-icon {
    display: none;
  }

  .el-descriptions__body {
    padding: 10px 50px;
    box-sizing: border-box;
    color: rgb(226, 118, 10);
  }

  .el-descriptions-item__label {
    &:not(.is-bordered-label) {
      color: #333;
    }
  }

  .saomazhifucodeClass .el-dialog__body,
  .saomazhifucodeClass .el-dialog__header {
    padding: 0;
  }

  .el-input.is-disabled .el-input__inner {
    color: #333;
  }
}

.ORcodebody {
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.code_title {
  width: 100%;
  height: 50px;
  background-color: #fdcb08;
  justify-content: center;
}

.code_title>span {
  font-size: 22px;
  color: #000;
  font-weight: bold;
}

.ORcode {
  width: 100%;
  background: #fff;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;
  border-bottom: 6px dotted #fdcb08;
}

.ORcode>div {
  width: 180px;
  height: 180px;
  border: 1px solid #000;
  border-radius: 5px;
}

.ORtitle {
  background: #fff;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #f2f2f2;
}

.ORtitle>div {
  width: 100%;
  margin: 10px 0;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.ORtitle>div>span:nth-child(1) {
  color: #979797;
  text-align: end;
  width: 150px;
}

.ORtitle>div>span:nth-child(2) {
  color: #000;
  margin-left: 10px;
}
</style>
<style scoped>
#qqq {
  background-color: #111;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  /*水平居中*/
  position: relative;
}

#qrCode {
  display: inline-block;
  margin: 0 auto;
  /*水平居中*/
  position: relative;
  top: 15%;
}

#qrCode img {
  width: 200px;
  height: 200px;
  background-color: #fff;
  padding: 6px;
}

.leftContainer {
  width: 80px;
  position: fixed;
  top: 79px;
  left: 30px;
}

.leftContainer .el-col {
  width: 80px;
  height: 80px;
  border-bottom: 1px solid #4d5c6f;
  background: #526176;
  cursor: pointer;
  color: #a6aeb9;
  border-radius: 0;
}

.leftContainer .el-col a {
  display: block;
  color: #a6aeb9;
  text-decoration: none;
}

.leftContainer .el-col a:hover {
  color: #fff;
}

.leftContainer .el-col a.active {
  color: #fff;
}

.leftContainer .el-col i {
  font-size: 30px;
  margin: 15px 0px 5px;
}

.rightContainer {
  width: calc(100vw - 160px);
  margin-left: 100px;
}

.rightContainer .header .el-col {
  font-size: 18px;
  font-weight: bold;
}

.rightContainer .bodyTitle {
  height: 40px;
  background: #f3f3f3;
  border: 1px solid #dddddd;
}

.rightContainer .bodyTitle>label {
  margin: 0px 15px;
  font-weight: bold;
}

.rightContainer #demo2 .body,
.rightContainer #demo6 .body {
  border: 1px solid #ddd;
  padding: 15px;
  border-top: none;
}

.rightContainer .el-card {
  margin-bottom: 15px;
}



.body .el-row .el-col label {
  text-align: right;
  width: 80px;
  font-size: 14px;
  width: 100%;
  line-height: 36px;
  display: inline-block;
  box-sizing: border-box;
}

.disabledInput {
  width: 80% !important;
  background-color: #f5f7fa;
  text-align: center !important;
  max-width: 200px;
  border: 1px solid #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 0px 10px;
  height: 36px;
  margin: 20px 10%;
}

/* 上传图片样式Start */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}

.avatar {
  border: 1px dashed #d9d9d9;
  padding: 5px;
  border-radius: 6px;
  width: 100px;
  height: 100px;
  display: block;
}

.imageStyle {
  display: inline-block;
  width: 100px;
  height: 100px;
  box-shadow: #ddd 0px 0px 5px;
  margin-right: 20px;
}

/* 上传图片样式End */

.dis {
  display: flex;
}

.align {
  align-items: center;
}

.jus {
  justify-content: space-between;
}

.display {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.block {
  margin-top: 10px;
}

.page {
  padding: 14px;
  box-sizing: border-box;
}

.el-select--medium {
  vertical-align: bottom !important;
}

.widths {
  width: 220px;
}

.demo-table-expand {
  width: 100%;
  height: auto;
  padding: 10px 50px;
  font-size: 14px;
}

.demo-table-expand-time {
  width: 600px;
}

.demo-table-expand-time>div {
  margin: 0 10px;
}

.icon-img {
  display: block;
  width: 30px;
  height: 30px;
}

.Enclosure {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 15px;
  border-radius: 6px;
  border: 1px solid #ebeef5;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.headers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 5px 0;
  font-weight: bold;
  color: #333;
}

/* 内容待定 */
.headers_Custom>div {
  padding: 20px 40px;
  font-size: 16px;
}

.headers_Custom>div>span {
  color: rgb(226, 118, 10);
}

.back {
  color: #303133;
  font-weight: 700;
}

.u-f-ac {
  -webkit-box-align: center;
  align-items: center;
  /* padding: 10px; */
}

.bodyTitle {
  height: 40px;
  background: #f3f3f3;
  border: 1px solid #dddddd;
  line-height: 40px;
  padding: 0 20px;
  box-sizing: border-box;
}

.bjdbody {
  width: 100%;
  height: auto;
  background-color: rgb(199, 20, 45);
  padding: 20px 10px 0 10px;
  box-sizing: border-box;
  border-radius: 8px;
}

.bjdCarMessage,
.bjdCarSum {
  width: 100%;
  height: auto;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.bjdfooter {
  border-top: 1px solid #fff;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
}

.bjdCarSum>div {
  width: 100%;
  padding: 15px 20px;
  box-sizing: border-box;
  font-weight: bold;
  color: #000;
  border-bottom: 1px solid #f2f2f2;
}

.bjdCarMessage1 {
  height: 80px;
  padding: 16px;
  box-sizing: border-box;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  align-items: center;
  color: #000;


}

.bjdCarMessage1>.f-c>span:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
}

.bjdCarMessage1>img,
.bjdfooter>img {
  margin-right: 30px;
}

.bjdCarMessage1 .f-c>span:nth-child(2),
.bjdCarMessage1 .f-c>span:nth-child(3) {
  font-size: 12px;
  margin-top: 5px;
}

.bjdCarMessage2_car>span:nth-child(1) {
  color: #000;
  font-weight: bold;
}

.bjdCarMessage2_car>span:nth-child(2) {
  color: #999;
}

.bjdCarMessage2>ul>li {
  margin: 20px 0;
}

.Risk {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}

.Risk_title {
  width: 100%;
  height: 40px;
}

.Risk_title>div {
  background: rgb(199, 20, 45);
  color: rgb(255, 255, 255);
  height: 100%;
  font-weight: 500;
  width: 33.3%;
  padding: 10px 20px;
  box-sizing: border-box;
  border: #fff solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: none;

}


.Risk_title>div:nth-child(2) {
  border-left: none;
  border-right: none;
}

.Risk_data {
  width: 100%;
  height: 40px;
}

.Risk_data>div {
  background: #fbf6f7;
  color: rgb(51, 51, 51);
  height: 100%;
  font-weight: 500;
  width: 33.3%;
  padding: 10px 20px;
  box-sizing: border-box;
  border: #fff solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: none;
}

.Risk_data>div :nth-child(2) {
  border-left: none;
  border-right: none;
}

.Risk_title>div :nth-child(3) {
  border-top-right-radius: 10px;
}

.jyxStyle>span {
  display: inline-block;
  text-align: center;
}

.FeeEnclosure /deep/ table {
  width: 100% !important;
}

.FeeEnclosure /deep/ .cell {
  text-align: center;
}

.FeeEnclosure /deep/ .el-table__empty-block {
  width: 100% !important;
}

.FeeEnclosure .feeadjust-input {
  width: 35%;
  height: 20px;
  font-size: 13px;
}
/deep/ .el-table .el-table__row.blue-row {
  background: #409eff;
  opacity: .8;
  color: #fff;
}
/deep/.el-table .el-table__row.blue-row:hover{
  color: #000;
}
</style>