client-eam-v5/src/components/rfidRecord/AssetRfidRecord.vue

<template>
  <Navbar title="资产异常出入记录" :is-go-back="false" />
  <div class="globalMain">
    <ul class="siteList">
      <li class="site">
        <span class="labels">
          <span class="noRequired"> * </span>
          <label>资产名称</label>
        </span>
        <a-input
          v-model:value="searchParams.assetInstanceName"
          placeholder="请输入资产名称"
          style="width: 70%"
          @change="searchRecord"
        />
      </li>
      <li class="site">
        <span class="labels">
          <span class="noRequired"> * </span>
          <label>资产编号</label>
        </span>
        <a-input
          v-model:value="searchParams.assetInstanceNo"
          placeholder="请输入资产编号"
          style="width: 70%"
          @change="searchRecord"
        />
      </li>
      <li class="site">
        <span class="labels">
          <span class="noRequired"> * </span>
          <label>资产EPC</label>
        </span>
        <a-input
          v-model:value="searchParams.epc"
          placeholder="请输入资产EPC"
          style="width: 70%"
          @change="searchRecord"
        />
      </li>
      <li class="site">
        <span class="labels">
          <span class="noRequired"> * </span>
          <label>资产位置</label>
        </span>
        <a-input
          v-model:value="searchParams.position"
          placeholder="请输入资产位置"
          style="width: 70%"
          @change="searchRecord"
        />
      </li>
      <li class="site">
        <span class="labels">
          <span class="noRequired"> * </span>
          <label>异常类型</label>
        </span>
        <a-input
          v-model:value="searchParams.assetInstanceRecordType"
          placeholder="请输入异常类型"
          style="width: 70%"
          @change="searchRecord"
        />
      </li>
      <li class="site">
        <span class="labels">
          <span class="noRequired"> * </span>
          <label>开始日期</label>
        </span>
        <a-config-provider :locale="zhCN">
          <a-date-picker
            v-model:value="startValue"
            format="YYYY-MM-DD HH:mm:ss"
            :show-time="{
              format: 'HH:mm:ss',
              defaultValue: dayjs('00:00:00', 'HH:mm:ss'),
            }"
            style="width: 70%"
            placeholder="请选择开始时间"
            @change="startTimeChange"
          />
        </a-config-provider>
      </li>
      <li class="site">
        <span class="labels">
          <span class="noRequired"> * </span>
          <label>结束日期</label>
        </span>
        <a-config-provider :locale="zhCN">
          <a-date-picker
            v-model:value="endValue"
            format="YYYY-MM-DD HH:mm:ss"
            :show-time="{
              format: 'HH:mm:ss',
              defaultValue: dayjs('00:00:00', 'HH:mm:ss'),
            }"
            style="width: 70%"
            placeholder="请选择结束时间"
            @change="endTimeChange"
          />
        </a-config-provider>
      </li>
      <li class="site" style="display: flex">
        <div style="width: 300px">
          <a-button
            type="primary"
            style="margin-left: 20px"
            @click="searchRecord"
          >
            查询
          </a-button>
          <a-button type="dashed" style="margin-left: 8px" @click="clearParams">
            清空
          </a-button>
        </div>
      </li>
    </ul>
  </div>
  <CommonTable
    ref="table"
    :total="total"
    :columns="columns"
    :is-loading="isLoading"
    :data-source="dataSource"
    @get-pager="getPageParams"
  />
</template>
  
  
<script setup>
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import CommonTable from '../../common/CommonTable.vue';
import Common from '../../common/Common.js';
import { ref, reactive, onMounted } from 'vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { recordColumns, rfidQuery, debounce } from './configDatas.js';

dayjs.locale('zh-cn');
const total = ref(0);
const table = ref(null);
const endValue = ref(); // 日期
const startValue = ref(); // 日期
const dataSource = ref([]); //表格数据
const isLoading = ref(false); //表格loading
const columns = ref(recordColumns); //表格列

const searchParams = reactive({
  start: 1,
  epc: null,
  length: 20,
  endDate: null,
  position: null,
  startDate: null,
  assetInstanceNo: null,
  assetInstanceName: null,
  assetInstanceRecordType: null,
});

// 从子组件获取的分页参数
const getPageParams = (start, length) => {
  searchParams.start = start;
  searchParams.length = length;
  queryInfo();
};

// 查询回到第一页(防抖)
const searchRecord = debounce(() => {
  table.value.backFirstPage();
}, 500);

// 查询日期
const startTimeChange = (_, dateString) => {
  searchParams.startDate = dateString;
  searchRecord();
  console.log(dateString);
};
const endTimeChange = (_, dateString) => {
  searchParams.endDate = dateString;
  searchRecord();
};

// 查询表格数据
const queryInfo = () => {
  isLoading.value = true;
  const params = { ...searchParams };
  rfidQuery(params).then(
    success => {
      total.value = success.totalSize;
      dataSource.value = success.dataList;
      isLoading.value = false;
    },
    error => {
      Common.processException(error);
      isLoading.value = false;
    },
  );
};
onMounted(() => {
  searchRecord();
});

// 清空查询条件
const clearParams = () => {
  endValue.value = null;
  startValue.value = null;
  searchParams.epc = null;
  searchParams.endDate = null;
  searchParams.position = null;
  searchParams.startDate = null;
  searchParams.assetInstanceNo = null;
  searchParams.assetInstanceName = null;
  searchParams.assetInstanceRecordType = null;
  searchRecord();
};
</script>
  
<style scoped>

.globalMain {
  max-width: 99%;
  margin-left: auto;
  margin-right: auto;
  list-style: none;
  box-sizing: border-box;
  margin-top: 20px;
}

.labels {
  display: inline-block;
  width: 70px;
}
.required {
  width: 10px;
  color: red;
}
.noRequired {
  width: 10px;
  color: #f7f7f7;
}
.siteList {
  margin: -10px 0 -8px -24px !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.siteList .site {
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.siteList > li {
  margin-bottom: 8px;
  margin-left: 0px;
}

@media (min-width: 500px) {
  .siteList {
    margin-left: 0;
    margin-right: -25px;
    justify-content: flex-start;
  }
  .siteList > li {
    margin-right: 8px;
  }
}
</style>