UI3/src/views/purify/qxyw_detail.vue

<script setup lang="ts">
import configs from "@/core/config/Index"
import { ElDatePicker } from "element-plus"
import moment from "moment"
import { ref } from "vue"
import VbUpload from "@/components/Upload/VbUpload.vue"
import { useRoute } from "vue-router"
import type { VbFormItem } from "@/components/Forms/models"
import RequestService from "@/core/services/RequestService"
const route = useRoute()
const table = ref()
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({
  company_id: route.query.company_id as string,
})
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()
}

const uploadEl = ref()
function clean(row: any) {
  uploadEl.value?.clearFiles()
  formData.value = Object.assign({}, row)
  formData.value.picture_name = ""
  formData.value.clean_end = new Date()

  modal2.value.show()
}
const validatePic = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error("请选择附件"))
  } else {
    callback()
  }
}
const modal2 = ref()
const formData = ref<any>({})
const formItems = ref<Array<VbFormItem>>([
  {
    label: "设施名称：",
    field: "monitor_name",
    component: "innerText",
  },
  {
    label: "清洗时间：",
    field: "clean_end",
    placeholder: "请选择清洗时间",
    class: "w-100",
    required: true,
    component: ElDatePicker,
    props: {
      type: "date",
      disabledDate: (v: any) => {
        return (
          (v && v > moment().endOf("day")) ||
          v < moment(formData.value.last_clean_time, "YYYYMMDD").add(1, "days").toDate()
        )
      },
    },
  },
  {
    label: "清洗图片：",
    field: "picture_name",
    component: VbUpload,
    rules: [{ validator: validatePic, trigger: "change" }],
  },
])
function onSave() {
  const data = {
    company_id: route.query.company_id,
    device_id: formData.value.device_id,
    clean_end: moment(formData.value.clean_end).format("YYYYMMDD"),
    picture_name: formData.value.picture_name,
  }
  RequestService.post("sys/operationMerchant/newCleanLog", { data }).then(() => {
    table.value.search()
  })
}
</script>

<template>
  <h2 class="text-primary mb-3">{{ route.query.company_name }}</h2>
  <VbDataTable
    ref="table"
    url="sys/operationMerchant/getPurifierList"
    :header="cols"
    :query-params="queryParams"
    method="post"
    :has-checkbox="false"
    :pagination="true"
  >
    <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 }">
      <span class="table-action" @click="cleanList(row)">清洗记录</span>
      <span class="table-action" @click="clean(row)">填报记录</span>
    </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/operationMerchant/selectCleanLog"
        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
              v-for="(pic, i) in row.pictures?.split(',')"
              :key="i"
              :src="`/api/file/upload/res/${pic}`"
              :preview-src-list="row.pictures.split(',').map((v:any)=>{
                return `/api/file/upload/res/${v}`
              })"
              :hide-on-click-modal="true"
              fit="cover"
              style="height: 50px; width: 75px; max-width: none; border-radius: 0.475rem; margin-left: 5px"
              alt=""
            />
          </div>
        </template>
      </VbDataTable>
    </template>
  </VbModal>
  <VbModal v-model:modal="modal2" title="清洗填报" :form-data="formData" :form-items="formItems" @confirm="onSave">
    <template #picture_name_form>
      <VbUpload ref="uploadEl" v-model="formData.picture_name"></VbUpload>
    </template>
  </VbModal>
</template>