zhywpt-web/src/views/onlineBusinessHall/informationManagement/carInfo/index.vue

<template>
  <div>
    <crud-template ref="crudRef" class="as-weight" :homeData="field" :tableData="tableData" @btnSearch="btnSearch"
      @handleEdit="handleEdit" @handleInfo="handleInfo" @cancel="cancel" @CurrentChange="handleCurrentChange"
      @refreshLeft="refreshLeft" @submit="submit">
      <template #search>
        <el-select clearable v-model="searchForm.customerIdType" style="width: 200px;" placeholder="请选择用户证件号类型">
          <el-option v-for="item in CERTIFICATE_TYPE" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input maxlength="60" v-trim clearable v-model="searchForm.customerIdNum" style="width: 200px"
          placeholder="请输入证件号" />
        <el-input maxlength="60" v-trim clearable v-model="searchForm.customerId" style="width: 200px"
          placeholder="请输入用户编号" />
        <!-- <el-input maxlength="60"v-trim clearable v-model="searchForm.vehicleId" style="width: 200px" placeholder="请输入车辆编号" /> -->
        <el-input maxlength="60" v-trim clearable v-model="searchForm.vehiclePlate" placeholder="请输入车牌号"
          :style="{ width: '320px', margin: '0 10px 10px 0' }">
          <template #append>
            <el-select clearable v-model="searchForm.vehiclePlateColor" placeholder="请选择车牌颜色" style="width: 150px">
              <el-option :label="item.label" :key="item.label" :value="item.value" v-for="item in VEHICLE_COLOR_TYPE" />
            </el-select>
          </template>
        </el-input>
      </template>
    </crud-template>
  </div>
</template>
<!-- 车辆信息查询 -->

<script setup lang="ts">
  import { ref, toRaw, onMounted, computed } from "vue";
  // @ts-ignore crudFrom模板
  import CrudTemplate from "@/crud/index.vue";
  import $storeinitData from "@/store/initData"; //引入tab vuex
  import BaseService from "@/utils/baseService"; //引入接口请求
  import { ElMessage } from "element-plus"; //提示
  import {
    carInfoQuery,
    carInfoEdit
  } from "@/api/onlineBusinessHall/informationManagement";
  import { useRoute } from 'vue-router';
  import { IsPermission } from "@/router/routerUtil";
  import { getDictLabel } from "@/utils/utils";
  import { dataDesensitization } from "@/utils/utils";
  //或取路由传入过来的对象数据
  const route = useRoute();

  const crudRef = ref();
  //启用状态
  const VEHICLE_COLOR_TYPE = computed(() => {
    return $storeinitData.state.dictData["VEHICLE_COLOR_TYPE"] ?? [];
  }); //车牌颜色
  const VEHICLE_MODEL_TYPE = computed(() => {
    return $storeinitData.state.dictData["VEHICLE_MODEL_TYPE"] ?? [];
  }); //车型
  const CERTIFICATE_TYPE = computed(() => {
    return $storeinitData.state.dictData["CERTIFICATE_TYPE"] ?? [];
  }); //用户证件类型
  const EMERGENCY_VEHICLE_TYPE = computed(() => {
    return $storeinitData.state.dictData["EMERGENCY_VEHICLE_TYPE"] || [];
  }); // 应急车标识
  const USER_TYPE = computed(() => {
    return $storeinitData.state.dictData["FROM_DATA_USEUSERTYPE"] || [];
  }); // 用户类型
  const VEHICLE_CONTRACT_TYPE = computed(() => {
    return $storeinitData.state.dictData["VEHICLE_CONTRACT_TYPE"] || [];
  }); // 车辆签约
  const NATURE_VEHICLE_USE = computed(() => {
    return $storeinitData.state.dictData["NATURE_VEHICLE_USE"] || [];
  }); // 车辆签约

  //查询参数
  const searchForm = ref({
    customerIdType: "",
    customerIdNum: "",
    customerId: "",
    vehicleId: "",
    vehiclePlateColor: '',
    vehiclePlate: '',
  });
  let tableData: any = ref([]);
  const typeOption = ref("");

  onMounted(() => {
    getList();
  });
  // 搜索按钮
  function btnSearch() {
    field.value.paging.currentPage = 1;
    getList();
  }
  // 编辑按钮
  function handleEdit(idx: any, row: any) {
    typeOption.value = "edit";
    // 货车
    if (row.type == 11 || row.type == 12 || row.type == 13 || row.type == 14 || row.type == 15 || row.type == 16) {
      field.value.dialogArray.forEach(item => {
        if (item.prop == 'tractorSign' || item.prop == 'roadTransportPermitPicUrl' || item.prop == 'axisType'
          || item.prop == 'axleDistance'
          || item.prop == 'wheelCount') {
          item.form.hideEdit = false
        }
      });
    } else {
      field.value.dialogArray.forEach(item => {
        if (item.prop == 'tractorSign' || item.prop == 'roadTransportPermitPicUrl' || item.prop == 'axisType'
          || item.prop == 'axleDistance'
          || item.prop == 'wheelCount') {
          item.form.hideEdit = true
        }
      });
    }
  }

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

  // 搜索重置
  function refreshLeft() {
    searchForm.value = {
      customerIdType: "",
      customerIdNum: "",
      customerId: "",
      vehicleId: "",
      vehiclePlateColor: '',
      vehiclePlate: '',
    };
    field.value.paging.currentPage = 1;
    getList();
  }
  // 详情
  function handleInfo(idx: number, row: any) {
    // 货车
    if (row.type == 11 || row.type == 12 || row.type == 13 || row.type == 14 || row.type == 15 || row.type == 16) {
      field.value.dialogArray.forEach(item => {
        if (item.prop == 'tractorSign' || item.prop == 'roadTransportPermitPicUrl' || item.prop == 'axisType'
          || item.prop == 'axleDistance'
          || item.prop == 'wheelCount') {
          item.form.hideInfo = false
        }
      });
    } else {
      field.value.dialogArray.forEach(item => {
        if (item.prop == 'tractorSign' || item.prop == 'roadTransportPermitPicUrl' || item.prop == 'axisType'
          || item.prop == 'axleDistance'
          || item.prop == 'wheelCount') {
          item.form.hideInfo = true
        }
      });
    }
  }
  //编辑与添加提交
  function submit(data: any) {
    data.ownPosImgUrl = data.ownerPosImgUrl
    data.ownNegImgUrl = data.ownerNegImgUrl
    let datas = JSON.parse(JSON.stringify(toRaw(data)));
    BaseService.post('/iaw/aftersale/vehicleInfoChange/changeApply', datas).then((res: any) => {
      if (res && res.statusCode === 0) {
        ElMessage.success("修改信息成功，请等待审核通过后展示数据！");
        getList();
        cancel();
      } else {
        ElMessage.error(res.message);
      }
    });
  }
  //获取列表
  function getList() {
    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];
      }
    }
    // if (!falg) {
    //   ElMessage.error('请输入查询条件')
    //   return
    // }
    crudRef.value.tableLoding = true;
    BaseService.post('/managew/vehicle/info/query', params).then((res: any) => {
      if (res && res.statusCode === 0) {
        //数据转换
        let bizContent = res.data
        let data = bizContent.data || [];
        //数据渲染
        tableData.value = data;
        crudRef.value.tableLoding = false;
        console.log(data, 'datadata')
        //分页总数
        field.value.paging.total = bizContent.totalCount;
      } else {
        tableData.value = []
        crudRef.value.tableLoding = false;
        ElMessage.error(res.message);
      }
    });
  }
  let formLabelWidth = "180px";

  //表单数据配置
  let field: any = ref({
    dialogInfo: true, //是否展示详情 (默认false)
    // dialogCustom: true,
    paginStart: true, //是否显示分页查询 (默认false)
    border: true, //是否添加边框(默认false)
    searchShow: IsPermission(route, 'QUERY_BASE'), //搜索展示
    operateFixed: true,
    dialogWidth: "60%",
    operateWidth: "150", //操作栏宽度
    operateTitle: '操作', //操作栏标题(默认为"")
    crud: {
      add: false,
    },
    operate: {
      info: IsPermission(route, 'INFO_LIST'),
      edit: IsPermission(route, 'EDIT_LIST'), //是否编辑(默认true)
      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: "80px",
      },
    ],
    field: [
      {
        prop: "customerId",
        label: "用户编号",
      },
      {
        prop: "ownerName",
        label: "客户名称",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          required: true,
        }
      },
      {
        prop: "ownerIdType",
        label: "客户证件类型",
        listData: CERTIFICATE_TYPE,
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'select',
          listData: CERTIFICATE_TYPE,
          required: true,
        }
      },
      {
        prop: "ownerIdNum",
        label: "客户证件号码",
        funRuleStarts: true,
            funRule: (val) => {
                return dataDesensitization(val)
            },
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          idVerification: true,
          checkContent: 'integer',
          integerlength: 25,
          required: true,
        }
      },
      {
        hide: true,
        prop: "ownerTel",
        label: "客户联系方式",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          phoneVerification: true,
          required: true,
        }
      },
      {
        hide: true,
        prop: "ownerAddress",
        label: "客户联系地址",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          required: true,
        }
      },
      {
        hide: true,
        prop: "contacts",
        label: "指定联系人姓名",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          required: true,
        }
      },
      {
        hide: true,
        prop: "ownerPosImgUrl",
        label: "客户证件照正面",
        type: 'img',
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'uploadImg',
          required: true,
        }
      },
      {
        hide: true,
        prop: "ownerNegImgUrl",
        label: "客户证件照反面",
        type: 'img',
        span: 2,
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'uploadImg',
          required: true,
        }
      },
      {
        hide: true,
        label: '车辆信息',
        form: {
          width: '90%',
          type: 'title',
          required: true,
        },
      },
      // {
      //   prop: "vehicleId",
      //   label: "车辆编号",
      //   form: {
      //     hide: true,
      //     width: '45%',
      //     formLabelWidth: formLabelWidth,
      //     type: 'input',
      //     required: true,
      //   }
      // },
      {
        prop: "vehiclePlate",
        label: "车牌号码",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          hideEdit: true,
          required: true,
        }
      },
      {
        prop: "vehiclePlateColor",
        label: "车牌颜色",
        listData: VEHICLE_COLOR_TYPE,
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'select',
          listData: VEHICLE_COLOR_TYPE,
          hideEdit: true,
          required: true,
        }
      },
      {
        prop: "updateTime",
        label: "更新时间",
        funRuleStarts: true,
        funRule: (val: any) => {
          if (val) {
            return val.replaceAll('T', ' ')
          }
          return val
        },
      },
    ],
    dialogArray: [
      // {
      //   hide: true,
      //   prop: "useUserType",
      //   label: "车辆用户类型",
      //   listData: USER_TYPE,
      //   form: {
      //     width: '90%',
      //     hideEdit: true,
      //     type: 'select',
      //     formLabelWidth: formLabelWidth,
      //     listData: USER_TYPE,
      //   }
      // },
      {
        hide: true,
        prop: "useCharacter",
        label: "车辆使用性质",
        listData: NATURE_VEHICLE_USE,
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'select',
          listData: NATURE_VEHICLE_USE,
          required: true,
        }
      },
      {
        prop: "type",
        label: "车型",
        listData: VEHICLE_MODEL_TYPE,
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'select',
          listData: VEHICLE_MODEL_TYPE,
          required: true,
          disabled: true
        }
      },
      {
        hide: true,
        prop: "approvedCount",
        label: "核定载人数",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          checkContent: 'integer',
          integerlength: 10,
          required: true,
        }
      },

      {
        hide: true,
        prop: "permittedWeight",
        label: "核定载重(kg)",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          checkContent: 'integer',
          integerlength: 20,
          required: true,
        }
      },
      {
        hide: true,
        prop: "vehicleModel",
        label: "行驶证品牌型号",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          required: true,
        }
      },
      {
        hide: true,
        prop: "vin",
        label: "车辆识别代号",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          required: true,
        }
      },
      {
        hide: true,
        prop: "engineNum",
        label: "发动机编号",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          required: true,
        }
      },
      {
        hide: true,
        prop: "registerDate",
        label: "注册日期",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'date',
          valueFormat: 'YYYY-MM-DD',
          required: true,
        }
      }, {
        hide: true,
        prop: "issueDate",
        label: "发证日期",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'date',
          valueFormat: 'YYYY-MM-DD',
          required: true,
        }
      },
      {
        hide: true,
        prop: "fileNum",
        label: "档案编号",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        hide: true,
        prop: "maintenaceMass",
        label: "整备质量(kg)",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          checkContent: 'integer',
          integerlength: 20,
          required: true,
        }
      },
      {
        hide: true,
        prop: "totalMass",
        label: "总质量(kg)",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          checkContent: 'integer',
          required: true,
        }
      },
      {
        hide: true,
        prop: "permittedTowWeight",
        label: "准牵引总质量(kg)",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          integerlength: 20,
          required: true,
        }
      },
      {
        hide: true,
        prop: "testRecord",
        label: "检验记录",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        hide: true,
        prop: "axisType",
        label: "轴型",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          required: true,
          hideEdit: true
        }
      },
      {
        hide: true,
        prop: "axleDistance",
        label: "轴距(mm)",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          checkContent: 'integer',
          integerlength: 10,
          required: true,
          hideEdit: true
        }
      },
      {
        hide: true,
        prop: "axleCount",
        label: "车轴数",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          checkContent: 'integer',
          integerlength: 5,
          required: true,
        }
      },
      {
        hide: true,
        prop: "wheelCount",
        label: "车轮数",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          checkContent: 'integer',
          integerlength: 3,
          required: true,
          hideEdit: true
        }
      },
      {
        hide: true,
        prop: "vehicleDimensions",
        label: "车辆尺寸(长x宽x高)(mm)",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          required: true,
        }
      },
      {
        hide: true,
        prop: "tractorSign",
        label: "牵引车标识",
        form: {
          width: '45%',
          formLabelWidth: formLabelWidth,
          type: 'select',
          hideEide: false,
          hideInfo: false,
          required: true,
          listData: [
            {
              label: '否',
              value: '0'
            },
            {
              label: '是',
              value: '1'
            },
          ],
        }
      },
      {
        hide: true,
        prop: "roadTransportPermitPicUrl",
        label: "道路运输许可证图片",
        type: 'img',
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'uploadImg',
          hideEide: false,
          required: true,
          hideInfo: false,
        }
      },
      {
        hide: true,
        prop: "vehBodyUrl",
        label: "车身45°照片",
        type: 'img',
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'uploadImg',
          required: true,
        }
      },
      {
        hide: true,
        prop: "vehPosImgUrl",
        label: "行驶证正面照",
        type: 'img',
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'uploadImg',
          required: true,
        }
      }, {
        hide: true,
        prop: "vehNegImgUrl",
        label: "行驶证反面照",
        type: 'img',
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'uploadImg',
          required: true,
        }
      },
      // {
      //   hide: true,
      //   prop: "vehicleSign",
      //   label: "车辆签约",
      //   listData: VEHICLE_CONTRACT_TYPE,
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     type: 'select',
      //     formLabelWidth: formLabelWidth,
      //     listData: VEHICLE_CONTRACT_TYPE
      //   }
      // },
      // {
      //   hide: true,
      //   prop: "vehicleType",
      //   label: "行驶证车辆类型",
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     formLabelWidth: formLabelWidth,
      //     type: 'input',
      //   }
      // },
      // {
      //   hide: true,
      //   prop: "agreementId",
      //   label: "签约编号",
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     formLabelWidth: formLabelWidth,
      //     type: 'input',
      //   }
      // }, {
      //   hide: true,
      //   prop: "channelId",
      //   label: "添加渠道编号",
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     formLabelWidth: formLabelWidth,
      //     type: 'input',
      //   }
      // }, {
      //   hide: true,
      //   prop: "scenePayType",
      //   label: "代扣协议支撑服务场景",
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     formLabelWidth: formLabelWidth,
      //     type: 'input',
      //   }
      // }, {
      //   hide: true,
      //   prop: "transportIdNum",
      //   label: "道路运输证编号",
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     formLabelWidth: formLabelWidth,
      //     type: 'input',
      //   }
      // }, {
      //   hide: true,
      //   prop: "licenseIdNum",
      //   label: "经营许可证编号",
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     formLabelWidth: formLabelWidth,
      //     type: 'input',
      //   }
      // },
      // {
      //   hide: true,
      //   prop: "proxyUrl",
      //   label: "委托书地址",
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     formLabelWidth: formLabelWidth,
      //     type: 'input',
      //   }
      // }, {
      //   hide: true,
      //   prop: "emergencyFlag",
      //   label: "应急车辆标识",
      //   listData: EMERGENCY_VEHICLE_TYPE,
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     formLabelWidth: formLabelWidth,
      //     type: 'select',
      //     listData: EMERGENCY_VEHICLE_TYPE,
      //   }
      // },
      // {
      //   hide: true,
      //   prop: "registeredTime",
      //   label: "录入时间",
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     formLabelWidth: formLabelWidth,
      //     type: 'input',
      //   }
      // },
      // {
      //   hide: true,
      //   prop: "uploadStatus",
      //   label: "上传状态",
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     formLabelWidth: formLabelWidth,
      //     type: 'input',
      //   }
      // }, {
      //   hide: true,
      //   prop: "daspVehicleId",
      //   label: "认证监管平台车辆编号",
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     formLabelWidth: formLabelWidth,
      //     type: 'input',
      //   }
      // }, {
      //   hide: true,
      //   prop: "daspSign",
      //   label: "是否认证监管平台",
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     formLabelWidth: formLabelWidth,
      //     type: 'input',
      //   }
      // }, {
      //   hide: true,
      //   prop: "daspAccept",
      //   label: "认证监管平台",
      //   form: {
      //     width: '45%',
      //     hideEdit: true,
      //     formLabelWidth: formLabelWidth,
      //     type: 'input',
      //   }
      // }
    ],
  });
</script>

<style lang="scss" scoped></style>