zhywpt-web/src/views/onlineBusinessHall/assOrderInfoBusinessAudit/index.vue

<template>
  <div>
    <crud-template ref="crudRef" class="as-weight" :homeData="field" :tableData="tableData" @btnSearch="btnSearch"
                   @unitClick="unitClick" @handleEdit="handleEdit" @handleInfo="handleInfo" @cancel="cancel"
                   @CurrentChange="handleCurrentChange" @refreshLeft="refreshLeft" @submit="submit">
      <template #search>
        <el-select clearable v-model="searchForm.orderType" style="width: 140px;" placeholder="业务类型">
          <el-option v-for="item in ORDER_TYPE" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
<!--        <el-select clearable v-model="searchForm.auditStatus" style="width: 140px;" placeholder="审核状态">-->
<!--          <el-option v-for="item in AUDIT_STATUS" :key="item.value" :label="item.label" :value="item.value"/>-->
<!--        </el-select>-->
        <el-input maxlength="30" v-trim clearable v-model="searchForm.customerName" style="width: 180px" placeholder="用户名称"/>
        <el-input maxlength="20" v-trim clearable v-model="searchForm.customerIdNum" style="width: 180px" placeholder="用户证件号码"/>
        <el-input maxlength="20" v-trim clearable v-model="searchForm.customerTel" style="width: 140px" placeholder="用户手机号"/>
        <el-input maxlength="60" v-trim clearable v-model="searchForm.vehiclePlate" placeholder="请输入车牌号"
                  :style="{ width: '240px', margin: '0 10px 10px 0' }">
          <template #append>
            <el-select clearable v-model="searchForm.vehiclePlateColor" placeholder="车牌颜色" style="width: 120px">
              <el-option :label="item.label" :key="item.label" :value="item.value" v-for="item in VEHICLE_COLOR_TYPE" />
            </el-select>
          </template>
        </el-input>
        <el-input maxlength="30" v-trim clearable v-model="searchForm.customerId" style="width: 180px" placeholder="用户编号"/>
      </template>

      <template #operation="{ scope }">
        <el-button v-if="IsPermission(route, 'CANCEL_LIST') && scope.row.orderStatus === 'NORMAL'" type="warning" size="small" class="code-btn" @click="auditCancel(scope.row)">取消</el-button>
        <el-button v-if="IsPermission(route, 'INFO_LIST')" type="success" size="small" class="code-btn" @click="showInfo(scope.row)">详情</el-button>
        <el-button v-if="IsPermission(route, 'AUDIT_LIST') && scope.row.orderStatus === 'NORMAL' && scope.row.orderStep === 'WAITING_AUDIT' &&
                   (scope.row.orderType === 'USER_UPDATE' || scope.row.orderType === 'LOSS' || scope.row.orderType === 'RELEASE_VEHICLE')
                   " type="primary" size="small" class="code-btn" @click="audit(scope.row)">审核</el-button>
      </template>

    </crud-template>

    <!--审核、查看-->
    <el-dialog v-model="auditDialog" :title="infoTitle" width="800" :before-close="handleClose">
      <div v-loading="auditLoading">
        <div v-if="operationType==='audit'">
          <el-button type="primary" @click="auditSubmit()">提 交</el-button>
          <el-button @click="refreshData">关 闭</el-button>
          <el-button type="warning" plain v-show="!auditShow" @click="showAudit(true)">审核提示</el-button>
        </div>

        <!--提示框-->
        <TipText v-if="tipTextStr" :text="tipTextStr" :auditShow="auditShow" :operationType="operationType" @showAudit="showAudit"/>

        <div v-if="operationType==='audit'">
          <h4>审核信息</h4>
          <el-form ref="auditFormRef" :model="auditForm" label-width="auto" :rules="rules">
            <el-row :gutter="15">
              <el-col :span="8">
                <el-form-item label="审核人" prop="auditName" :error="formErrors.auditName">
                  <el-input readonly disabled v-model="auditForm.auditName"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审核结果" prop="auditStatus" :error="formErrors.auditStatus">
                  <el-select v-model="auditForm.auditStatus" @change="handleAuditChange" placeholder="请选择审核结果">
                    <el-option label="通过" :value="true"/>
                    <el-option label="不通过" :value="false"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="audit-time" label="审核时间" prop="auditTime" :error="formErrors.auditTime">
                  <el-date-picker readonly disabled v-model="auditForm.auditTime" style="width: 100%" type="datetime"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="审核意见" prop="reason" :error="formErrors.reason">
                  <el-input v-model="auditForm.reason" maxlength="30" show-word-limit type="textarea" rows="3" placeholder="请输入审核意见"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div class="base-info">
          <div class="demo-collapse">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="审核信息" name="0" v-if="operationType==='info'">
                <AuditInfo v-if="assOrderInfo" :assOrderInfo="assOrderInfo"/>
              </el-collapse-item>

              <el-collapse-item title="基础信息" name="1">
                <BaseInfo v-if="orderType==='LOSS'" :baseInfo="assOrderInfo" :config="lossOrderInfoConfig"/>
                <BaseInfo v-else :baseInfo="assOrderInfo" :config="assOrderInfoConfig"/>
              </el-collapse-item>

              <!-- 客户变更信息 -->
              <el-collapse-item v-if="orderType==='USER_UPDATE'" title="客户变更信息" name="2">
                <ChangeInfo v-if="assOrderInfo" :auditChangeInfo="auditChangeInfo" :assOrderInfo="assOrderInfo"/>
              </el-collapse-item>

              <!-- 挂失/解除挂失信息 -->
              <el-collapse-item v-if="orderType==='LOSS'" title="挂失/解除挂失信息" name="2">
                <LossInfo v-if="lossInfo" :lossInfo="lossInfo" :config="lossInfoConfig"/>
              </el-collapse-item>

              <!-- 解除车牌占用信息 -->
              <el-collapse-item v-if="orderType==='RELEASE_VEHICLE'" title="申请人基本信息" name="2">
                <ReleasePlateInfo v-if="releaseBaseForm" :fields="releaseBaseConfig" :form-data="releaseBaseForm" :rules="releaseRules"/>
              </el-collapse-item>
              <el-collapse-item v-if="orderType==='RELEASE_VEHICLE'" title="行驶证信息" name="3">
                <ReleasePlateInfo v-if="drivingInfoForm" :fields="drivingInfoConfig" :form-data="drivingInfoForm" :rules="releaseRules"/>
              </el-collapse-item>
              <el-collapse-item v-if="orderType==='RELEASE_VEHICLE'" title="车主信息" name="4">
                <ReleasePlateInfo v-if="ownerInfoForm" :fields="ownerInfoConfig" :form-data="ownerInfoForm" :rules="releaseRules"/>
              </el-collapse-item>
              <el-collapse-item v-if="orderType==='RELEASE_VEHICLE'" title="车牌占用信息" name="5">
                <ReleasePlateInfo v-if="customerInfoForm" :fields="customerInfoConfig" :form-data="customerInfoForm" :rules="releaseRules"/>
              </el-collapse-item>
              <el-collapse-item v-if="orderType==='RELEASE_VEHICLE'" title="卡签信息" name="6">
                <ReleasePlateInfo v-if="cardObuForm" :fields="cardObuConfig" :form-data="cardObuForm" :rules="releaseRules"/>
              </el-collapse-item>


            </el-collapse>
          </div>
        </div>
        <div class="btn-bom" v-if="operationType==='info'">
          <el-button @click="refreshData">关 闭</el-button>
        </div>
      </div>
    </el-dialog>

    <!--取消-->
    <el-dialog v-model="cancelDialog" :title="cancelTitle" width="500">
      <div v-loading="cancelLoading">
        <el-form ref="cancelFormRef" :model="cancelForm" label-width="auto" :rules="rules">
          <el-form-item label="取消原因" prop="cancelReason">
            <el-input v-model="cancelForm.cancelReason" maxlength="30" show-word-limit type="textarea" rows="3" placeholder="请输入取消原因"/>
          </el-form-item>
        </el-form>

        <div class="btn-bom">
          <el-button type="primary" @click="cancelSubmit()">确 定</el-button>
          <el-button @click="cancelDialog = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>


  </div>
</template>
<!-- 用户信息修改审核 -->
<script setup lang="ts">
import {ref, toRaw, onMounted, computed, reactive, onUnmounted} from "vue";
// @ts-ignore crudFrom模板
import CrudTemplate from "@/crud/index.vue";
import TipText from "./TipText.vue";
import BaseInfo from "./BaseInfo.vue";
import AuditInfo from "./AuditInfo.vue";
import ChangeInfo from "./ChangeInfo.vue";
import LossInfo from "./LossInfo.vue";
import ReleasePlateInfo from "./ReleasePlateInfo.vue"
interface InfoConfigItem {
  prop: string;
  label: string;
  listData?: any[];
  span?: number;
  isImage?: boolean;
  isImageList?: boolean;
}

interface releaseConfigItem {
  prop: string;
  label: string;
  listData?: any[];
  span?: number;
  type?: string;
  disabled?: boolean;
  labelWidth?: number;
}

import $storeinitData from "@/store/initData"; //引入tab vuex
import BaseService from "@/utils/baseService"; //引入接口请求
import {ElMessage,ElMessageBox} from "element-plus"; //提示
import {useRoute} from 'vue-router';
import {IsPermission} from "@/router/routerUtil";
import {dataDesensitization,changeAddress,getDictLabel} from "@/utils/utils";
import type { CollapseModelValue } from 'element-plus'
import $storeInitData from "@/store/initData";
//或取路由传入过来的对象数据
const route = useRoute();
const crudRef = ref();
//启用状态
const VEHICLE_COLOR_TYPE = computed(() => {
  return $storeinitData.state.dictData["VEHICLE_COLOR_TYPE"] || [];
});
const SYSTEM_SORT = computed(() => {
  return $storeinitData.state.dictData["SOURCE_TYPE"] || [];
});
//用户证件类型
const CERTIFICATE_TYPE = computed(() => {
  return $storeinitData.state.dictData["ID_TYPE"] || [];
});

//订单状态
const ORDER_STATUS = computed(() => {
  return $storeinitData.state.dictData["ASS_ORDER_STATUS"] || [];
});
//审核状态
const AUDIT_STATUS = computed(() => {
  return $storeinitData.state.dictData["AUDIT_STATUS"] || [];
});

//用户类型
const USER_TYPE = computed(() => {
  return $storeinitData.state.dictData["ETC_USER_TYPE"] || [];
});

//订单类型
const ORDER_TYPE = computed(() => {
  return $storeinitData.state.dictData["ASS_ORDER_TYPE"] || [];
});

const DEVICE_LOSS_TYPE = computed(() => {
  return $storeinitData.state.dictData["DEVICE_LOSS_TYPE"] ?? [];
});

// 卡状态
const CARD_STATUS = computed(() => {
  return $storeinitData.state.dictData['CARD_STATUS'] || []
})

// 签状态
const OBU_STATUS = computed(() => {
  return $storeinitData.state.dictData['OBU_STATUS'] || []
})

const rules = reactive({
  auditStatus: [{required: true, message: '请选择审核结果', trigger: 'change'}],
  auditName: [{required: true, message: '审核人不能为空', trigger: 'blur'}],
  auditTime: [{required: true, message: '审核时间不能为空', trigger: 'blur'}],
  reason: [{required: false, message: '审核意见不能为空', trigger: 'blur'}],
  cancelReason: [{required: true, message: '取消原因不能为空', trigger: 'blur'}],
})

//查询参数
const searchForm = ref({
  customerId: '', // 用户编号
  customerName: '', // 用户名称
  customerIdType: '', // 用户证件号类型
  customerIdNum: '', // 用户证件号码
  customerTel: '', //  用户手机号
  orderType: '',
  orderStatus: '',
  vehiclePlate: '',
  vehiclePlateColor: '',
});

let tableData: any = ref([]);
const typeOption = ref("");
const auditDialog = ref(false);
const auditShow = ref(true);
const auditLoading = ref(true);
const infoTitle = ref('查看');
const auditFormRef = ref();
const formErrors = ref({
  reason: '',
  auditStatus: '',
  auditTime: '',
  auditName: '',
});
const auditForm = ref({
  orderNo: '',
  auditName: '',
  auditStatus: '',
  auditTime: '',
  reason: '',
});

const cancelFormRef = ref()
const cancelDialog = ref(false)
const cancelLoading = ref(false)
const cancelTitle = ref('取消')
const cancelForm = ref({
  orderNo: '',
  cancelReason: '',
});

//操作类型
const orderType = ref('')
const tipTextStr = ref('')
const operationType = ref('info')
const assOrderInfo = ref({});
const auditChangeInfo = ref({});
const lossInfo = ref({});
const name = computed(() => {
  return $storeInitData.getters.userName
})

function auditCancel(row:any){
  cancelTitle.value = getDictLabel(ORDER_TYPE, row.orderType)+'取消'
  cancelForm.value.orderNo = row.orderNo
  cancelForm.value.cancelReason = ''
  cancelDialog.value = true
  cancelFormRef.value.clearValidate();
}

function cancelSubmit(){
  cancelFormRef.value.validate().then((valid: any) => {
    if(valid){
      cancelLoading.value = true
      let params = {
        orderNo: cancelForm.value.orderNo,
        reason: cancelForm.value.cancelReason
      }
      BaseService.postN('/managew/api/assOrderinfo/cancel', params).then((res: any) => {
        if (res && res.statusCode === 0) {
          ElMessage.success("操作成功");
          cancelDialog.value = false
          cancelLoading.value = false
          getList();
        }
      }).catch((error) => {
        cancelLoading.value = false
      })
    }
  })
}

function showInfo(row:any){
  // console.log("row.assOrderType",row.orderType)
  infoTitle.value = getDictLabel(ORDER_TYPE, row.orderType)+'查看'
  orderType.value = row.orderType
  auditLoading.value = true;
  operationType.value = 'info'
  auditDialog.value = true;
  auditShow.value = true;
  tipTextStr.value = ''
  if(orderType.value === 'USER_UPDATE'){
    customerChangeInfoGet(row)
  }else if(orderType.value === 'LOSS'){
    let params = {
      orderNo: row.orderNo,
    };
    BaseService.postN('/managew/api/device/detail', params).then((res: any) => {
      if (res && res.statusCode === 0) {
        assOrderInfo.value = res.data.orderInfo
        tipTextStr.value = assOrderInfo.value.auditReason
        lossInfo.value = res.data.lossInfo;

        auditLoading.value = false;
        activeNames.value = ['1','0'];
      }
    }).catch((error) => {
      refreshData()
    }).finally(() => {
      auditLoading.value = false;
      crudRef.value.tableLoding = false;
    });
  }else if(orderType.value === 'RELEASE_VEHICLE'){
    assOrderInfo.value = row
    releasePlateInfoGet(row)
  }else {
    assOrderInfo.value = row
    crudRef.value.tableLoding = false;
    setTimeout(() => {
      auditLoading.value = false;
      activeNames.value = ['0'];
    }, 200)
    setTimeout(() => {
      activeNames.value = ['0','1'];
    }, 300)

  }
}

function audit(row:any){
  infoTitle.value = getDictLabel(ORDER_TYPE, row.orderType)+'审核'
  orderType.value = row.orderType
  operationType.value = 'audit'
  activeNames.value = ['1'];
  auditLoading.value = true;
  auditDialog.value = true;
  auditShow.value = true;
  auditForm.value = {
    orderNo: row.orderNo,
    auditName: name.value,
    auditStatus: true,
    auditTime: new Date(),
    reason:'',
  }
  if(orderType.value === 'USER_UPDATE'){
    customerChangeInfoGet(row);
  }else if(orderType.value === 'RELEASE_VEHICLE'){
    assOrderInfo.value = row
    releasePlateInfoGet(row);
  }
}

function customerChangeInfoGet(row:any){
  BaseService.postN('/managew/customerInfoChange/detail', {orderNo:row.orderNo}).then((res: any) => {
    if (res && res.statusCode === 0) {
      assOrderInfo.value = res.data.orderInfo
      tipTextStr.value = assOrderInfo.value.auditReason
      auditChangeInfo.value = res.data.changeInfo

      auditLoading.value = false;
      activeNames.value = ['1','0'];
    }
  }).catch((error) => {
    refreshData()
  }).finally(() => {
    auditLoading.value = false;
    crudRef.value.tableLoding = false;
  });
}

function releasePlateInfoGet(row:any){
  releaseBaseConfig.value.forEach((item:any) => {
    item.disabled = true;
  })
  drivingInfoConfig.value.forEach((item:any) => {
    item.disabled = true;
  })
  ownerInfoConfig.value.forEach((item:any) => {
    item.disabled = true;
  })
  cardObuConfig.value.forEach((item:any) => {
    item.disabled = true;
  })
  customerInfoConfig.value.forEach((item:any) => {
    item.disabled = true;
  })
  let params = {
    orderNo: row.orderNo,
  };
  BaseService.postN('/managew/api/afterSale/releasePlate/view', params).then((res: any) => {
    if (res && res.statusCode === 0) {
      const data = res.data;
      const applyInfo = data.applyInfo;
      const drivingInfo = data.drivingInfo;
      const ownerInfo = data.ownerInfo;
      const customerInfo = data.customerInfo;
      const cardInfo = data.cardInfo;
      const obuInfo = data.obuInfo;
      tipTextStr.value = data.tap;
      releaseBaseForm.value = {
        ...applyInfo,
      }
      drivingInfoForm.value = {
        ...drivingInfo
      }
      ownerInfoForm.value = {
        ...ownerInfo
      }
      customerInfoForm.value = {
        ...customerInfo
      }
      cardObuForm.value = {
        cardId: cardInfo.cardId,
        cardStatus: cardInfo.cardStatus,
        cardEnableTime: cardInfo.cardEnableTime,
        obuId: obuInfo.obuId,
        obuStatus: obuInfo.obuStatus,
        obuEnableTime: obuInfo.obuEnableTime,
      }

      auditLoading.value = false;
      activeNames.value = ['1','0'];
    }
  }).catch((error) => {
    refreshData()
  }).finally(() => {
    auditLoading.value = false;
    crudRef.value.tableLoding = false;
  });
}

const assOrderInfoConfig: InfoConfigItem[] = [
  { prop: 'orderNo', label: '订单号' },
  { prop: 'orderType', label: '订单类型', listData: ORDER_TYPE},
  { prop: 'customerId', label: '用户编号' },
  { prop: 'customerName', label: '姓名', },
  { prop: 'customerIdNum', label: '证件号码' },
  { prop: 'customerTel', label: '手机号码', },
  { prop: 'orderSource', label: '申请来源', listData: SYSTEM_SORT },
  { prop: 'applyTime', label: '申请时间', },
  { prop: 'orderStatus', label: '订单状态', listData: ORDER_STATUS},
  { prop: 'userType', label: '客户类型', listData: USER_TYPE},
]

const lossOrderInfoConfig: InfoConfigItem[] = [
  ...assOrderInfoConfig,
  { prop: 'vehiclePlate', label: '车牌号' },
  { prop: 'vehiclePlateColor', label: '车牌颜色', listData: VEHICLE_COLOR_TYPE },
  { prop: 'cardId', label: '卡编号' },
  { prop: 'obuId', label: '签编号' },
]

const lossInfoConfig: InfoConfigItem[] = [
  { prop: 'orderNo', label: '售后订单号',span:2 },
  { prop: 'lossOrderNo', label: '挂失订单号',span:2 },
  { prop: 'agencyId', label: '渠道编号'},
  { prop: 'vehicleType', label: '收费车型' },
  { prop: 'lossType', label: '挂失解挂类型',listData: DEVICE_LOSS_TYPE},
  { prop: 'applyTime', label: '挂失解挂时间' },
  { prop: 'vehPosImgUrl', label: '行驶证正面',isImage: true },
  { prop: 'vehNegImgUrl', label: '行驶证反面',isImage: true },
]

const releaseBaseConfig = ref<releaseConfigItem[]>([
  // { prop: 'userType', label: '用户类型', type: 'select', listData: USER_TYPE, disabled: false },
  { prop: 'mobile', label: '手机号码', type: 'text', disabled: false, span: 8 },
  { prop: 'name', label: '申请人姓名', type: 'text', disabled: false, span: 7 },
  { prop: 'customerIdNum', label: '申请人证件号', type: 'text', disabled: false, span: 9 },
  { prop: 'userPosImagesUrl', label: '申请人身份证正面', type: 'img', disabled: false },
  { prop: 'userNegImagesUrl', label: '申请人身份证背面', type: 'img', disabled: false },
])

const releaseBaseForm = ref({
  userType: '',
  mobile: '',
  name: '',
  customerIdNum: '',
  userPosImagesUrl: '',
  userNegImagesUrl: '',
});

const drivingInfoConfig = ref<releaseConfigItem[]>([
  { prop: 'vehicleOwnerName', label: '行驶证姓名', type: 'text', disabled: false, span:8 },
  { prop: 'plateNum', label: '车牌号', type: 'text', disabled: false, span:8 },
  { prop: 'plateColor', label: '车牌颜色', type: 'select', listData: VEHICLE_COLOR_TYPE, disabled: false,span:8 },
  { prop: 'vehPosImgUrl', label: '行驶证正面', type: 'img', disabled: false },
  { prop: 'vehNegImgUrl', label: '行驶证背面', type: 'img', disabled: false },
])

const drivingInfoForm = ref({
  plateNum: '',
  plateColor: '',
  vehicleOwnerName: '',
  vehPosImgUrl: '',
  vehNegImgUrl: '',
});

const ownerInfoConfig = ref<releaseConfigItem[]>([
  { prop: 'ownerName', label: '名称', type: 'text', disabled: false },
  { prop: 'ownerIdNum', label: '证件号', type: 'text', disabled: false },
  { prop: 'ownerPosImgUrl', label: '证件正面', type: 'img', disabled: false },
  { prop: 'ownerNegImgUrl', label: '证件反面', type: 'img', disabled: false },
  { prop: 'proxyUrl', label: '授权书', type: 'img', disabled: false },
])

const ownerInfoForm = ref({
  ownerIdNum:'',
  ownerName:'',
  ownerPosImgUrl:'',
  ownerNegImgUrl:'',
  proxyUrl:'',
});

const customerInfoConfig = ref<releaseConfigItem[]>([
  { prop: 'customerName', label: '名称', type: 'text', disabled: false },
  { prop: 'customerTel', label: '手机号', type: 'text', disabled: false },
  { prop: 'customerIdNum', label: '证件号', type: 'text', disabled: false },
  { prop: 'customerIdType', label: '证件类型', type: 'select', listData: CERTIFICATE_TYPE, disabled: false },
])

const customerInfoForm = ref({
  customerName:'',
  customerTel:'',
  customerIdNum:'',
  customerIdType:'',
});

const cardObuConfig = ref<releaseConfigItem[]>([
  { prop: 'cardId', label: '卡号', type: 'text', disabled: false, span: 8, labelWidth: '80px' },
  { prop: 'cardStatus', label: '卡状态', type: 'select', listData: CARD_STATUS, disabled: false, span: 7,labelWidth: '80px' },
  { prop: 'cardEnableTime', label: '卡启用时间', type: 'text', disabled: false, span: 9 },
  { prop: 'obuId', label: '签号', type: 'text', disabled: false, span: 8,labelWidth: '80px' },
  { prop: 'obuStatus', label: '签状态', type: 'select', listData: OBU_STATUS, disabled: false, span: 7,labelWidth: '80px' },
  { prop: 'obuEnableTime', label: '签启用时间', type: 'text', disabled: false, span: 9 },
])

const cardObuForm = ref({
  cardId: '',
  cardStatus: '',
  cardEnableTime: '',
  obuId: '',
  obuStatus: '',
  obuEnableTime: '',
});

const releaseRules = reactive({
  // userType: [{required: true, message: '请选择客户类型', trigger: 'change'}],
  // mobile: [{required: true, message: '请输入手机号码', trigger: 'blur'}],
  // vehiclePlate: [{required: true, message: '请输入车牌号', trigger: 'blur'}],
  // vehiclePlateColor: [{required: true, message: '请选择车牌颜色', trigger: 'change'}],
  // name: [{required: true, message: '请输入申请人姓名', trigger: 'blur'}],
  // customerIdNum: [{required: true, message: '请输入申请人证件号', trigger: 'blur'}],
  // userPosImagesUrl: [{required: true, message: '请上传申请人身份证正面', trigger: 'change'}],
  // userNegImagesUrl: [{required: true, message: '请上传申请人身份证背面', trigger: 'change'}],
})

function showAudit(show){
  auditShow.value = show;
}

function handleAuditChange(){
  let auditStatus = auditForm.value.auditStatus
  rules.reason = [{
    required: !auditStatus,
    message: '请输入审核意见',
    trigger: 'blur'
  }];
}

function auditSubmit(){
  formErrors.value = Object.keys(formErrors.value).reduce((acc, key) => {
    acc[key] = '';
    return acc;
  }, {} as Record<string, string>);
  auditFormRef.value.validate((valid: any) => {
    let params = {
      ...auditForm.value
    }
    delete params.auditTime;
    delete params.auditName;
    if (valid) {
      auditLoading.value = true;
      BaseService.postN('/managew/api/assOrderinfo/review', params).then((res: any) => {
        if (res && res.statusCode === 0) {
          ElMessage.success('操作成功');
          auditDialog.value = false;
          activeNames.value = [];
          auditLoading.value = false;
          getList();
        }
      }).catch((error) => {
        auditLoading.value = false;
        Object.keys(error).forEach((key) => {
          if (formErrors.value[key] !== undefined) {
            formErrors.value[key] = error[key];
          }
        });
      });
    }
  })
}

const handleClose = (done: () => void) => {
  if (operationType.value === 'info') {
    refreshData()
  } else {
    ElMessageBox.confirm('该审核未保存提交，确定要关闭吗？').then(() => {
      done()
      refreshData()
    }).catch(() => {
      // refreshData()
      // catch error
    })
  }
}

const activeNames = ref([])
const handleChange = (val: CollapseModelValue) => {
  // console.log(val)
}

onMounted(() => {
  getList();
});

// 搜索按钮
function btnSearch() {
  field.value.paging.currentPage = 1;
  getList();
}

const userType = ref() // 用户类型 1个人 2单位

// 编辑按钮
function handleEdit(idx: any, row: any) {

}

// 取消
function cancel() {
  crudRef.value.reset();
}

//分页
function handleCurrentChange(val: number) {
  field.value.paging.currentPage = val;
  getList();
}

// 搜索重置
function refreshLeft() {
  searchForm.value = {
    customerId: '',
    customerName: '',
    customerIdType: '',
    customerIdNum: '',
    customerTel: '',
    vehiclePlate: '',
    vehiclePlateColor: '',
  };
  field.value.paging.currentPage = 1;
  getList();
}

function refreshData(){
  auditDialog.value = false;
  orderType.value = ''
  operationType.value = 'info'
  assOrderInfo.value = {}
  auditChangeInfo.value = {}
  lossInfo.value = {}
  releaseBaseForm.value = {}
  drivingInfoForm.value = {}
  ownerInfoForm.value = {}
  customerInfoForm.value = {}
  cardObuForm.value = {}
  activeNames.value = [];
}

// 详情
function handleInfo(idx: any, row: any) {

}

//编辑与添加提交
function submit(data: any) {

}

//获取列表
function getList() {
  if(!IsPermission(route, 'QUERY_BASE')){
    ElMessage.error('您没有权限，请联系管理员！')
    return
  }
  let falg = false
  let params: any = {
    pageNo: field.value.paging.currentPage,
    pageSize: field.value.paging.pageSize,
  }
  let searchFormList = {...searchForm.value};
  for (let key in searchFormList) {
    if (searchFormList[key]) {
      falg = true
      params[key] = searchFormList[key];
    }
  }

  let vehiclePlate = params.vehiclePlate || ''
  let vehiclePlateColor = params.vehiclePlateColor || ''

  if(vehiclePlate !== '' && vehiclePlateColor !== ''){
    params.vehicleId = vehiclePlate + '_' + vehiclePlateColor
  }else if(vehiclePlate === '' && vehiclePlateColor !== ''){
    ElMessage.error("请输入车牌号");
    return
  } else if(vehiclePlate !== '' && vehiclePlateColor === ''){
    ElMessage.error("请选择车牌颜色");
    return
  }

  crudRef.value.tableLoding = true;
  BaseService.postN('/managew/api/assOrderinfo/page', params).then((res: any) => {
    if (res && res.statusCode === 0) {
      //数据转换
      let bizContent = res
      let data = bizContent.data.result || [];
      //数据渲染
      tableData.value = data;
      crudRef.value.tableLoding = false;
      field.value.paging.total = bizContent.data.totalCount;
    }
  }).catch((error) => {
    crudRef.value.tableLoding = false;
  });
}

let formLabelWidth = "180px";

//表单数据配置
let field: any = ref({
  dialogInfo: false, //是否展示详情 (默认false)
  dialogCustom: true,
  border: true, //是否添加边框(默认false)
  searchShow: IsPermission(route, 'QUERY_BASE'), //搜索展示
  crudChildShow: false,
  operateFixed: true,
  paginStart: true, //是否显示分页查询 (默认false)
  dialogWidth: "60%",
  operateWidth: "190", //操作栏宽度
  operateTitle: '操作', //操作栏标题(默认为"")
  crud: {
    add: false,
  },
  operate: {
    info: false,
    edit: false,
    delete: false, //是否删除(默认true)
    remark: false, // 查看
    announcement: false, // 公告
    forbidden: false, // 禁用
    enable: false, // 启用
    authorization: false, // 授权
    cancel: false, // 取消订单
  },
  tableSize: -1,
  paging: {
    pageSize: 10,
    currentPage: 1,
    total: 0,
  },
  extend: [
    {
      label: "序号",
      type: "index",
      width: "50px",
    },
  ],
  field: [
    {
      prop: "customerName",
      label: "用户名称",
    },
    {
      width: '150',
      prop: "customerId",
      label: "用户编号",
    },
    {
      width: '100',
      prop: "customerTel",
      label: "手机号",
      funRuleStarts: true,
      funRule: (value: any) => {
        return dataDesensitization(value)
      },
    },
    {
      width: '150',
      prop: "customerIdNum",
      label: "证件号码",
      funRuleStarts: true,
      funRule: (value: any) => {
        return dataDesensitization(value)
      },
    },
    {
      width: '100',
      prop: "orderType",
      label: "业务类型",
      listData: ORDER_TYPE,
    },
    {
      width: '140',
      prop: "applyTime",
      label: "申请时间",
    },
    // {
    //   prop: "auditStatus",
    //   label: "审核状态",
    //   width: '80',
    //   listData: AUDIT_STATUS,
    // },
    {
      width: '80',
      prop: "auditName",
      label: "审核人",
    },
    {
      width: '140',
      prop: "auditTime",
      label: "审核时间",
    },
  ],
});
</script>
<style scoped>
::v-deep.base-info .desc-label {
  width: 80px;
  text-align: right;
  font-size: 14px;
}
::v-deep.audit-time .el-input__prefix {
  display: none;
}
::v-deep.base-info .el-collapse-item__header{
  font-size: 14px;
  font-weight: bolder;
  color: #606266;
}

.btn-bom{
  margin-top: 20px;
  text-align: right;
}
</style>