public-fuse/src/view/vrmodel/downloadLog.vue

<template>
  <com-head :options="[{ name: '下载记录', value: '2' }]" showCtrl>
    <el-form label-width="84px">
      <el-form-item label="所属架构：">
        <com-company v-model="state.query.deptId" />
      </el-form-item>
      <el-form-item label="用户姓名：">
        <el-input v-model="state.query.nickName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="用户账号：">
        <el-input v-model="state.query.userName" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="下载时间：">
        <el-date-picker
          type="daterange"
          format="YYYY-MM-DD"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          v-model="createTime"
          placeholder="请选择"
          :defaultTime="defaultTime"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="场景标题：">
        <el-input v-model="state.query.sceneTitle" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="场景码：">
        <el-input v-model="state.query.sceneNum" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="SN码：">
        <el-input v-model="state.query.snCode" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item class="searh-btns" style="grid-area: 1/4/4/5">
        <el-button type="primary" @click="refresh">查询</el-button>
        <el-button type="primary" plain @click="queryReset">重置</el-button>
      </el-form-item>
    </el-form>
  </com-head>

  <div class="body-layer" style="padding-top: 8px">
    <el-table
      class="user-table"
      :data="state.table.rows"
      style="width: 100%; max-height: 480px"
      size="large"
    >
      <el-table-column label="序号" width="100" v-slot:default="{ $index }">
        <span style="text-align: center">
          {{ state.pag.size * (state.pag.currentPage - 1) + $index + 1 }}
        </span>
      </el-table-column>
      <el-table-column label="组织名称" prop="deptName"></el-table-column>
      <el-table-column label="组织类型" prop="deptLevelStr"></el-table-column>
      <el-table-column label="用户姓名" prop="nickName"></el-table-column>
      <el-table-column label="用户账号" prop="userName"></el-table-column>
      <el-table-column label="下载时间" prop="createTime">
          <template #default="{ row }">
             {{ dateFormat(row.createTime, 'yyyy-MM-dd hh:mm') }}
          </template>
      </el-table-column>
      <el-table-column label="场景标题" prop="sceneTitle"></el-table-column>
      <el-table-column label="场景码" prop="sceneNum"></el-table-column>
      <el-table-column label="SN码" prop="snCode"></el-table-column>
    </el-table>

    <com-pagination
      @size-change="changPageSize"
      @current-change="changPageCurrent"
      :current-page="state.pag.currentPage"
      :page-size="state.pag.size"
      :total="state.pag.total"
    />
  </div>
</template>

<script setup lang="ts">
import { usePagging } from "@/hook/pagging";
import comHead from "@/components/head/index.vue";
import comCompany from "@/components/company-select/index.vue";
import comPagination from "@/components/pagination/index.vue";
import { getDownloadQuoteScene } from "@/store/scene";
import { ref, watchEffect } from "vue";
import { dateFormat } from "@/util";

const {
  state,
  queryReset: queryResetRaw,
  refresh,
  changPageCurrent,
  changPageSize,
} = usePagging({
  get: getDownloadQuoteScene,
  paramsTemlate: {
    nickName: "",
    deptId: "",
    userName: "",
    startCreateTime: "",
    endCreateTime: "",
    sceneTitle: "",
    sceneNum: "",
    snCode: "",
  },
});

const defaultTime: [Date, Date] = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
];
const createTime = ref<Date[] | null>(null);
watchEffect(() => {
  if (createTime.value && createTime.value.length === 2) {
    state.query.startCreateTime = dateFormat(createTime.value[0], "yyyy-MM-dd hh:mm:ss");
    state.query.endCreateTime = dateFormat(createTime.value[1], "yyyy-MM-dd hh:mm:ss");
  } else {
    state.query.startCreateTime = null as any;
    state.query.endCreateTime = null as any;
  }
});
const queryReset = () => {
  queryResetRaw();
  createTime.value = null;
};
</script>

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