Web/admin.ui.plus-master/src/views/admin/product/groupLogo/index.vue

<template>
  <div class="layout-pd">
    <el-row>
      <el-col>
        <el-card class="mt8" shadow="hover">
          <el-form :model="groupLogoKeyOnQuery.filter" @submit.stop.prevent>
            <el-form-item prop="name" style="width:100%">
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="GUID">
                  <el-input v-model="groupLogoKeyOnQuery.filter.keyGuid" placeholder="请输入GUID" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="团标状态">
                  <el-select v-model="groupLogoKeyOnQuery.filter.state" placeholder="请选择部件类型">
                    <el-option v-for="(value, key) in groupKeyGroupStatus" :key="key" :label="value[1].name"
                      :value="Number(value[1].value)" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="密钥类型">
                  <el-select v-model="groupLogoKeyOnQuery.filter.deviceType" placeholder="请选择部件类型">
                    <el-option v-for="(value, key) in groupLogoKeyKeyType" :key="key" :label="value[1].name"
                      :value="value[1].value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="厂商">
                  <el-input v-model="groupLogoKeyOnQuery.filter.manufacturer" placeholder="请输入厂商" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>

          <hr>

          <!-- 按钮 -->
          <el-row justify="space-between" class="submit-button">
            <el-row>
              <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
              <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
            </el-row>
          </el-row>

        </el-card>
      </el-col>
      <el-col :xs="24">
        <el-card class="mt8" shadow="hover">
          <el-table v-loading="state.loading" stripe :data="state.list" row-key="id" style="width: 100%">
            <el-table-column prop="keyGuid" label="GUID" />
            <el-table-column prop="state" label="状态">
              <template #default="{ row }">
                {{ getState(row.state).name }}
              </template>
            </el-table-column>
            <el-table-column prop="deviceType" label="密钥类型">
              <template #default="{ row }">
                {{ getDeviceType(row.deviceType).name }}
              </template>
            </el-table-column>

            <el-table-column prop="lastUpdate" label="最近同步时间" />
            <el-table-column prop="applicationTime" label="申请时间" />
            <el-table-column prop="recordTime" label="备案时间" />
            <el-table-column prop="manufacturer" label="厂商" />
            <el-table-column prop="remark" label="备注" />
          </el-table>
          <div class="my-flex my-flex-end" style="margin-top: 20px">
            <el-pagination v-model:currentPage="state.pageInput.currentPage"
              v-model:page-size="state.pageInput.pageSize" :total="state.total" :default-page-size="5"
              :page-sizes="[5, 10, 20, 50, 100]" small background @size-change="onSizeChange"
              @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">/**团标密钥数据对象*/

import { onMounted, reactive } from "vue";
import {
  groupLogoKeyFilterModel,
  groupLogoKeyPageInput, groupLogoKeyRequestBody,
} from "/@/api/admin/productionManagement/groupLogoKeyDto";
import { ref } from "vue-demi";
import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
import { GroupLogoKeyApi } from "/@/api/admin/productionManagement/groupLogoKeyApi";

/**
 * 团标密钥查询时需要的参数
 * */
const groupLogoKeyOnQuery = reactive({
  filter: {
    keyGuid: '',
    deviceType: '',
    lastUpdate: '',
    applicationTime: '',
    recordTime: '',
  } as groupLogoKeyFilterModel,
})

/**
 * 团标密钥数据对象
 */
const state = reactive({
  loading: false,
  list: [] as Array<groupLogoKeyFilterModel>,
  pageInput: {
    currentPage: 1,
    pageSize: 10,
  } as groupLogoKeyPageInput,
  total: 0
})

/**获取全局缓存*/
const globalCacheStore = useGlobalCacheStore()

/**生产管理 - 团标密钥 - 团标状态*/
const groupKeyGroupStatus = ref(globalCacheStore.getGlobalStore().get('groupKeyGroupStatus'))

/**生产管理 - 团标密钥 - 密钥类型*/
const groupLogoKeyKeyType = ref(globalCacheStore.getGlobalStore().get('groupLogoKeyKeyType'))

/**获取团标状态*/
const getState = (val) => {
  val = String(val)
  if (groupKeyGroupStatus.value.has(val)) {
    return groupKeyGroupStatus.value.get(val)
  } else {
    return val
  }
}

/**获取密钥类型*/
const getDeviceType = (val) => {
  val = String(val)
  if (groupLogoKeyKeyType.value.has(val)) {
    return groupLogoKeyKeyType.value.get(val)
  } else {
    return val
  }
}

/**
 * 页条变化
 * @param val
 */
const onSizeChange = (val: number) => {
  state.pageInput.pageSize = val
  onQuery()
}

/**
 * 页数 变化
 * @param val
 */
const onCurrentChange = (val: number) => {
  state.pageInput.currentPage = val
  onQuery()
}


const onQuery = async () => {
  state.loading = true
  const { data } = await new GroupLogoKeyApi().getPage({ ...state.pageInput, filter: groupLogoKeyOnQuery.filter } as groupLogoKeyRequestBody).catch(() => state.loading = false)
  state.list = data?.list ?? []
  state.total = data?.total ?? 0
  state.loading = false
}


onMounted(() => {
  onQuery()
})

const onReset = () => {
  groupLogoKeyOnQuery.filter = {
    keyGuid: '',
    deviceType: '',
    lastUpdate: '',
    applicationTime: '',
    recordTime: '',
  }
  state.pageInput.currentPage = 1
  onQuery()
}

</script>

<style scoped lang="scss">
@import '/@/theme/tableStyle.scss';
</style>