njzscloud-dispose-web/src/pages/cst/truck/Truck.vue

<template>
  <Page>
    <ElForm v-show="showSearchForm" inline @submit.prevent="paging">
      <ElFormItem label="车牌">
        <ElInput v-model="searchForm.licensePlate" placeholder="车牌" />
      </ElFormItem>

      <ElFormItem label="车架号">
        <ElInput v-model="searchForm.vnCode" placeholder="车架号" />
      </ElFormItem>

      <ElFormItem>
        <ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
        <ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
      </ElFormItem>
    </ElForm>

    <div class="tool-bar">
      <div></div>
      <!-- <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton> -->
      <ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm" />
    </div>

    <ElTable v-loading="searching" :data="tableData" cell-class-name="table-cell" class="table-list" empty-text="暂无数据" header-row-class-name="table-header" row-key="id">
      <ElTableColumn label="车牌" prop="licensePlate"  width="100px"/>
      <!-- <ElTableColumn label="行驶证图片" prop="truckLicense" /> -->
      <ElTableColumn label="行驶证图片" width="100px">
        <template #default="{ row }">
          <el-image :preview-src-list="[AppApi.fileUrl(row.truckLicense[0])]"
            :src="AppApi.fileUrl(row.truckLicense[0])"
            preview-teleported
            show-progress style="width: 60px; height: 60px"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="车架号" prop="vnCode" />
      <!-- <ElTableColumn label="合格证图片" prop="qualification" /> -->
      <ElTableColumn label="合格证图片" width="100px">
        <template #default="{ row }">
          <el-image :preview-src-list="[AppApi.fileUrl(row.qualification[0])]" :src="AppApi.fileUrl(row.qualification[0])" preview-teleported show-progress style="width: 60px; height: 60px"></el-image>
        </template>
      </ElTableColumn>
      <!-- <ElTableColumn label="最大载重（千克）" prop="carryingCapacity" /> -->

      <ElTableColumn label="行驶证有效期" width="120px">
        <template #default="{ row }"> {{ row.licenseStartDate }} ~ {{ row.licenseEndDate }} </template>
      </ElTableColumn>


      <ElTableColumn label="合格证有效期" width="120px">
        <template #default="{ row }"> {{ row.qualificationStartDate }} ~ {{ row.qualificationEndDate }} </template>
      </ElTableColumn>

      <ElTableColumn label="车辆类型" prop="truckCategory" />
      <ElTableColumn label="车辆图片" width="100px">
        <template #default="{ row }">
          <el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 60px; height: 60px"></el-image>
        </template>
      </ElTableColumn>

      <ElTableColumn label="状态" prop="busy">
        <template #default="{ row }">
          {{ row.busy?'运输中':'空闲' }}
        </template>
      </ElTableColumn>

      <ElTableColumn label="创建时间" prop="createTime"  width="100px"/>
      <ElTableColumn label="修改时间" prop="modifyTime"  width="100px"/>
      <ElTableColumn label="操作" width="180" fixed="right">
        <template #default="scope">
          <div class="action-btn">
            <ElPopconfirm confirm-button-text="是" cancel-button-text="否" confirm-button-type="danger" cancel-button-type="primary" placement="top" title="是否删除当前数据?" width="180" @confirm="delHandler(scope)">
              <template #reference>
                <ElButton text type="danger" :loading="deling">删除</ElButton>
              </template>
            </ElPopconfirm>
            <!-- <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton> -->
            <ElButton text type="primary" @click="showDetail(scope)">详情</ElButton>
          </div>
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination layout="->, sizes, total, prev, pager, next" v-model:current-page="searchForm.current" v-model:page-size="searchForm.size" :total="totalCount" :page-sizes="[10, 20, 50, 100, 500]" :hide-on-single-page="false" :teleported="false" @change="paging" />
    <TruckForm ref="truckForm" @edit-succ="paging" />
    <TruckDetail ref="truckDetail"  />
  </Page>
</template>

<script lang="ts" setup>
import TruckApi from '@/pages/cst/truck/truck-api.ts'
import TruckForm from '@/pages/cst/truck/TruckForm.vue'
import TruckDetail from '@/pages/cst/truck/TruckDetail.vue'
import Page from '@/components/page/Page.vue'
import { elIcons } from '@/common/element/element.ts'
import AppApi from '@/common/app/app-api.ts'

const totalCount = ref(0);
const tableData = ref<TruckTypes.SearchTruckResult[]>([]);
const searchForm = ref<TruckTypes.SearchTruckParam>({
  current: 1,
  size: 20,
});

const searching = ref(false);
const deling = ref(false);
const showSearchForm = ref(true);
const truckFormIns = useTemplateRef<InstanceType<typeof TruckForm>>("truckForm");
const truckDetailIns = useTemplateRef<InstanceType<typeof TruckDetail>>("truckDetail");

function showDialog(data?: TruckTypes.SearchTruckResult) {
  truckDetailIns.value?.open(data);
}

function delHandler({ row }: { row: TruckTypes.SearchTruckResult }) {
  deling.value = true;
  TruckApi.del([row.id!])
    .then(() => {
      ElMessage.success("删除成功");
      paging();
    })
    .finally(() => {
      deling.value = false;
    });
}

function showDetail({row}: { row: ProjectTypes.SearchProjectResult }) {
    truckDetailIns.value?.open(row)
}
// function modifyHandler({ row }: { row: TruckTypes.SearchTruckResult }) {
//   showDialog(row);
// }

// function addHandler() {
//   showDialog();
// }

function reset() {
  searchForm.value = {
    current: 1,
    size: 20,
  };
  paging();
}

function paging() {
  searching.value = true;
  TruckApi.paging(searchForm.value)
    .then((res) => {
      totalCount.value = res.data?.total ?? 0;
      tableData.value = res.data?.records ?? [];
    })
    .finally(() => {
      searching.value = false;
    });
}
onMounted(() => {
  paging();
});
</script>

<style lang="stylus" scoped>
.table-list {
  flex 1;
  margin 0 0 20px 0
  width 100%

  :deep(.table-header) {
    color #454C59

    th {
      background-color #EDF1F7
      font-weight 500
      position relative

      & > div {
        display flex
        gap 5px
        align-items center
      }

      &:not(:first-child) > div::before {
        position: absolute;
        top: 50%;
        left: 1px;
        width: 1px;
        background-color: #D3D7DE;
        transform: translateY(-50%);
        content: "";
        height 50%
      }
    }
  }

  :deep(.table-cell) {
    color #2F3540
  }
  .action-btn {
    width 100%
    display flex
    flex-wrap wrap

    & > button {
      margin 0
    }
  }
}

.tool-bar {
  display flex
  justify-content space-between
  margin 0 0 20px 0
}
</style>