sgxt_web/src/views/backOfficeSystem/Mechanics/AccidentVehicle/index.vue

<template>
  <div>
    <div class="titleBox">
      <PageTitle title="事故车辆附加信息" />
    </div>
    <!-- 搜索 -->
    <div ref="searchBox">
      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
    </div>
    <!-- 表格 -->
    <div class="tabBox">
      <MyTable
        :tableData="pageData.tableData"
        :tableColumn="pageData.tableColumn"
        :tableHeight="pageData.tableHeight"
        :key="pageData.keyCount"
        :tableConfiger="pageData.tableConfiger"
        :controlsWidth="pageData.controlsWidth"
        @chooseData="chooseData"
      >
        <!-- 事故照片 -->
        <template #accidentPhoto="{ row }">
          <el-image style="width: 50px; height: 50px" :src="row.accidentPhoto" :preview-src-list="[row.accidentPhoto]">
          </el-image>
        </template>
        <!-- 操作 -->
        <template #controls="{ row }">
          <el-button size="small" @click="addEdit('detail', row)">详情</el-button>
        </template>
      </MyTable>
      <Pages
        @changeNo="changeNo"
        @changeSize="changeSize"
        :tableHeight="pageData.tableHeight"
        :pageConfiger="{
          ...pageData.pageConfiger,
          total: pageData.total
        }"
      ></Pages>
    </div>
    <!-- 详情 -->
    <DetailForm ref="detailDiloag" />
  </div>
</template>

<script setup>
  import PageTitle from "@/components/aboutTable/PageTitle.vue";
  import MyTable from "@/components/aboutTable/MyTable.vue";
  import Pages from "@/components/aboutTable/Pages.vue";
  import Search from "@/components/aboutTable/Search.vue";
  import DetailForm from "./components/detailForm.vue";
  import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
  import { reactive, ref, onMounted, getCurrentInstance } from "vue";
  const { proxy } = getCurrentInstance();
  const detailDiloag = ref();
  const searchBox = ref(); //搜索框

  const searchConfiger = ref([
    { label: "业务流水号码", prop: "businessNo", placeholder: "请输入业务流水号码", showType: "input" },
    { label: "事故车辆发现时间", prop: "discoveryTime", placeholder: "请选择事故车辆发现时间", showType: "date" }
  ]);

  const queryFrom = ref({});
  const pageData = reactive({
    tableData: [
      {
        id: 1,
        businessNo: "01131213",
        registrantName: "张三",
        discoveryTime: "2025/1/20 10:00:00",
        accidentPhoto: "https://example.com/photo1.jpg"
      },
      {
        id: 2,
        businessNo: "01131213",
        registrantName: "张三",
        discoveryTime: "2025/1/20 10:00:00",
        accidentPhoto: "https://example.com/photo2.jpg"
      },
      {
        id: 3,
        businessNo: "01131213",
        registrantName: "张三",
        discoveryTime: "2025/1/20 10:00:00",
        accidentPhoto: "https://example.com/photo3.jpg"
      },
      {
        id: 4,
        businessNo: "01131213",
        registrantName: "张三",
        discoveryTime: "2025/1/20 10:00:00",
        accidentPhoto: "https://example.com/photo4.jpg"
      },
      {
        id: 5,
        businessNo: "01131213",
        registrantName: "张三",
        discoveryTime: "2025/1/20 10:00:00",
        accidentPhoto: "https://example.com/photo5.jpg"
      }
    ],
    keyCount: 0,
    tableConfiger: {
      rowHieght: 61,
      showSelectType: "null",
      loading: false
    },
    total: 0,
    pageConfiger: {
      pageSize: 20,
      pageCurrent: 1
    },
    controlsWidth: 120,
    tableColumn: [
      { label: "业务流水号码", prop: "businessNo" },
      { label: "登记人姓名", prop: "registrantName" },
      { label: "事故车辆发现时间", prop: "discoveryTime" },
      { label: "事故照片", prop: "accidentPhoto", slot: true }
    ]
  });

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

  //选择类型
  const handleType = val => {
    pageData.keyCount++;
    pageData.pageConfiger.pageCurrent = 1;
    getList();
  };
  // 搜索
  const onSearch = val => {
    queryFrom.value = { ...val };
    pageData.pageConfiger.pageCurrent = 1;
    getList();
  };

  const changeNo = val => {
    pageData.pageConfiger.pageNum = val;
    getList();
  };
  const changeSize = val => {
    pageData.pageConfiger.pageSize = val;
    getList();
  };

  // 获取列表
  const getList = val => {
    // pageData.tableConfiger.loading = true;
    let data = { ...pageData.pageConfiger, ...queryFrom.value };
    // let url = '/mosty-lzcj/tbDwMbkf/queryList';
    // qcckPost(data,url).then(res=>{
    //   pageData.tableData = res.records || [];
    //   pageData.total = res.total;
    //   pageData.tableConfiger.loading = false;
    // }).catch(()=>{ pageData.tableConfiger.loading = false; })
  };

  // 详情
  const addEdit = (type, row) => {
    detailDiloag.value.init(type, row);
  };

  // 表格高度计算
  const tabHeightFn = () => {
    pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
    window.onresize = function () {
      tabHeightFn();
    };
  };
</script>

<style>
  .el-loading-mask {
    background: rgba(0, 0, 0, 0.5) !important;
  }
</style>