UI3/src/views/purify/washInfo_company.vue

<script setup lang="ts">
import configs from "@/core/config/Index"
import moment from "moment"
import { ref } from "vue"

const cols = ref([
  {
    name: "序号",
    width: 60,
    field: configs.TABLE_INDEX_FIELD,
  },
  {
    name: "净化器名称",
    field: "monitor_name",
  },
  {
    name: "天数",
    field: "day_condition",
  },
  {
    name: "开机小时",
    field: "hour_condition",
  },
  {
    name: "最后清洗时间",
    field: "last_clean_time",
  },
  {
    name: "经过天数",
    field: "run_day",
  },
  {
    name: "开机小时数",
    field: "run_hour",
  },
  {
    name: "剩余天数",
    field: "surplus_day",
  },
  {
    name: "剩余小时数",
    field: "surplus_hour",
  },
  {
    name: "清洗记录",
    field: "action",
  },
])
const queryParams = ref({})
const modal = ref()
const modalTable = ref()
const dateRange = ref<any>("")
const col2s = ref<Array<any>>([
  {
    name: "设备名称",
    field: "device_name",
  },
  {
    name: "清洗时间",
    field: "clean_start",
  },
  {
    name: "清洗照片",
    field: "pictures",
  },
])
const queryParam2s = ref<any>({
  device_id: "0",
})
const deviceId = ref("")
function cleanList(row: any) {
  deviceId.value = row.device_id
  query()
  modal.value.show()
}
function query() {
  const params: any = {
    device_id: deviceId.value + "",
  }
  if (dateRange.value[0]) {
    params.clean_start = moment(dateRange.value[0]).format("YYYYMMDD")
    params.clean_end = moment(dateRange.value[1]).format("YYYYMMDD")
  }
  //[moment(new Date()).add(-1, "M").toDate(), new Date()]
  queryParam2s.value = params
}
function reset() {
  dateRange.value = ""
  query()
}
</script>

<template>
  <VbDataTable
    url="sys/purifierCondition/getCompanyCleanList"
    :header="cols"
    :query-params="queryParams"
    method="post"
    :has-checkbox="false"
    :pagination="false"
  >
    <template #tableHeader>
      <thead>
        <tr class="text-center">
          <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">序号</th>
          <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">净化器名称</th>
          <th class="bg-light-primary" colspan="2">清洗周期</th>
          <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">最后清洗时间</th>
          <th class="bg-light-primary" colspan="2">上次清洗至今</th>
          <th class="bg-light-primary" colspan="2">距下次清洗</th>
          <th class="bg-light-primary" rowspan="2" style="vertical-align: middle">清洗记录</th>
        </tr>
        <tr class="text-center">
          <th class="bg-light-primary">天数</th>
          <th class="bg-light-primary">开机小时</th>
          <th class="bg-light-primary">经过天数</th>
          <th class="bg-light-primary">开机小时数</th>
          <th class="bg-light-primary">剩余天数</th>
          <th class="bg-light-primary">剩余小时数</th>
        </tr>
      </thead>
    </template>

    <template #last_clean_time="{ row }">
      {{ moment(row.last_clean_time, "YYYYMMDDHHmmss").format("YYYY-MM-DD") }}
    </template>
    <template #action="{ row }">
      <div class="text-danger text-center">
        <span class="table-action" @click="cleanList(row)">清洗记录</span>
      </div>
    </template>
  </VbDataTable>
  <VbModal
    v-model:modal="modal"
    title="清洗记录"
    close-btn-class="btn btn-primary"
    :confirm-btn="false"
    modal-dialog-style="max-width: 1100px;width: 1100px;"
  >
    <template #body>
      <VbDataTable
        ref="modalTable"
        :header="col2s"
        url="sys/purifierCondition/getEnterpriseCleanLog"
        method="post"
        :auto-search="false"
        :query-params="queryParam2s"
        :has-checkbox="false"
      >
        <template v-slot:table-tool>
          <el-form class="align-items-center" :inline="true">
            <el-form-item class="mb-0 me-0 align-items-center" label="日期">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                size="default"
              />
            </el-form-item>
            <el-form-item class="mb-0 me-0 align-items-center">
              <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="query">查询</el-button>
              <el-button class="ms-3 mt-0 btn btn-sm btn-light-primary btn-outline" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </template>
        <template #pictures="{ row }">
          <div class="d-flex h-100 justify-content-center align-items-center p-3">
            <el-image
              :src="`/api/file/upload/res/${row.pictures}`"
              :preview-src-list="[`/api/file/upload/res/${row.pictures}`]"
              :hide-on-click-modal="true"
              fit="cover"
              style="height: 50px; width: 75px; max-width: none; border-radius: 0.475rem"
              alt=""
            />
          </div>
        </template>
      </VbDataTable>
    </template>
  </VbModal>
</template>