Cold_erp_web/src/views/storehouse/inventory/Device.vue

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { GlobalStore } from '@/stores/index'
import Dialog from '@/components/dialog/Dialog.vue'
import TableBase from '@/components/TableBase/index.vue'
import type { ColumnProps } from '@/components/TableBase/interface/index'
import { Storehouse_Device_List } from '@/api/storehouse/index'

const globalStore = GlobalStore()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)

const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'T_contract_number', label: '合同编号', ellipsis: true },
  { prop: 'T_out_number', label: '出库单号', ellipsis: true },
  { prop: 'T_product_img', label: '产品图片', name: 'T_product_img' },
  { prop: 'T_product_name', label: '产品名称' },
  { prop: 'T_product_class_name', label: '产品分类' },
  { prop: 'T_product_model', label: '产品型号', ellipsis: true },
  { prop: 'T_product_spec', label: '产品规格' },
  { prop: 'T_sn', label: '设备SN', ellipsis: true },
  { prop: 'T_imei', label: '模组imei', ellipsis: true },
  { prop: 'T_iccid', label: '物联网卡号', ellipsis: true },
  { prop: 'T_State', label: '状态', name: 'T_State' }
]

// 查看图片
const url = ref('')
const srcList = ref<any[]>([])
const dialog = ref<InstanceType<typeof Dialog> | null>(null)
const previewImg = (str: string) => {
  dialog.value?.DialogOpen()
  url.value = str
  srcList.value.push(str)
}

// 搜索
const options = reactive([
  { name: '已出库', id: 1 },
  { name: '未出库', id: 2 }
])
const initParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_name: '',
  T_state: ''
})
const searchHandle = () => {
  TableRef.value?.searchTable()
}
</script>

<template>
  <div class="Device">
    <TableBase ref="TableRef" :columns="columns" :requestApi="Storehouse_Device_List" :initParam="initParam">
      <template #table-header>
        <div class="input-suffix">
          <el-row :gutter="20" style="margin-bottom: 0">
            <el-col :xl="6" :lg="8" :md="10">
              <span class="inline-flex items-center">关键字：</span>
              <el-input
                v-model="initParam.T_name"
                type="text"
                class="w-50 m-2"
                placeholder="按合同编号、出库单号、SN搜索"
                @change="searchHandle"
              />
            </el-col>
            <el-col :xl="10" :md="12">
              <span class="inline-flex items-center">状态：</span>
              <el-select v-model="initParam.T_state" class="w-50" clearable placeholder="请选择状态~">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-button type="primary" @click="searchHandle">搜索</el-button>
            </el-col>
          </el-row>
        </div>
      </template>
      <template #T_State="{ row }">
        <el-tag v-if="row.T_State === 1" type="success" effect="dark"> 已出库 </el-tag>
        <el-tag v-else type="danger" effect="dark"> 未出库 </el-tag>
      </template>
      <template #T_product_img="{ row }">
        <el-image
          v-if="row.T_product_img"
          style="height: 50px"
          :src="row.T_product_img"
          fit="cover"
          @click="previewImg(row.T_product_img)"
        />
      </template>
    </TableBase>
    <Dialog ref="dialog" width="50%">
      <el-image :src="url" :zoom-rate="1.2" :preview-src-list="srcList" fit="cover" />
    </Dialog>
  </div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';

.Device {
  @include f-direction;

  .input-suffix {
    width: 100%;
    .inline-flex {
      white-space: nowrap;
    }
    .w-50 {
      width: 14.5rem;
    }
  }
}
</style>