index.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <el-dialog v-model="visible" title="选择设备" width="800px" :close-on-click-modal="false" @close="onCancel">
  3. <div style="margin-bottom: 12px">
  4. <el-input ref="searchInput" v-model="search" placeholder="输入关键字搜索" style="width: 240px; margin-right: 8px" @keyup.enter="fetchData(true)" />
  5. <el-button type="primary" @click="fetchData(true)">搜索</el-button>
  6. </div>
  7. <el-table :data="tableData" border style="width: 100%" @selection-change="onSelectionChange" ref="tableRef">
  8. <el-table-column type="selection" width="50" />
  9. <el-table-column type="index" label="序号" width="60" />
  10. <el-table-column prop="name" label="设备名称" />
  11. <el-table-column prop="inventory.available_quantity" label="可用数量" />
  12. <!-- <el-table-column prop="category_name" label="设备分类" /> -->
  13. <el-table-column prop="warehouse" label="存放仓库" />
  14. </el-table>
  15. <el-pagination
  16. style="margin-top: 12px; text-align: right"
  17. :current-page="page"
  18. :page-size="pageSize"
  19. :total="total"
  20. @current-change="onPageChange"
  21. />
  22. <template #footer>
  23. <el-button @click="onCancel">取消</el-button>
  24. <el-button type="primary" @click="onConfirm">确定</el-button>
  25. </template>
  26. </el-dialog>
  27. </template>
  28. <script setup lang="ts">
  29. import { ref, watch, defineProps, defineEmits, nextTick } from 'vue';
  30. import * as deviceApi from '../../../../device/api';
  31. import * as storeapi from '../../../../storelist/api';
  32. import { status } from 'nprogress';
  33. const props = defineProps<{ visible: boolean }>();
  34. const emit = defineEmits(['update:visible', 'confirm']);
  35. const visible = ref(props.visible);
  36. watch(
  37. () => props.visible,
  38. (v) => (visible.value = v)
  39. );
  40. const search = ref('');
  41. const page = ref(1);
  42. const pageSize = ref(10);
  43. const total = ref(0);
  44. const tableData = ref([]);
  45. const selectedRows = ref([]);
  46. const warehouseMap = ref<Record<number, string>>({});
  47. const searchInput = ref<HTMLInputElement | null>(null);
  48. function fetchWarehouseMap() {
  49. storeapi.GetPermission().then((res) => {
  50. const map: Record<number, string> = {};
  51. res.data.forEach((item) => {
  52. map[item.id] = item.name;
  53. });
  54. warehouseMap.value = map;
  55. });
  56. }
  57. async function fetchData(resetPage = false) {
  58. if (resetPage) page.value = 1;
  59. await fetchWarehouseMap();
  60. deviceApi.GetList({ page: page.value, limit: pageSize.value, code: search.value,status:1 })
  61. .then((res) => {
  62. const devices = res.data
  63. .filter(device => device.available_quantity > 0)
  64. .map((device) => ({
  65. ...device,
  66. warehouse: `${warehouseMap.value[device.warehouse] || `ID:${device.warehouse}`} (${device.available_quantity})`
  67. }));
  68. tableData.value = devices;
  69. // tableData.value = [...res.data];
  70. total.value = res.total;
  71. });
  72. }
  73. function onSelectionChange(val) {
  74. selectedRows.value = val;
  75. }
  76. function onPageChange(val) {
  77. page.value = val;
  78. fetchData();
  79. }
  80. function onConfirm() {
  81. emit('confirm', selectedRows.value);
  82. emit('update:visible', false);
  83. }
  84. function onCancel() {
  85. emit('update:visible', false);
  86. }
  87. watch([visible], async (v) => {
  88. if (visible.value) {
  89. await fetchData();
  90. nextTick(() => {
  91. searchInput.value?.focus();
  92. });
  93. }
  94. });
  95. </script>