12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <template>
- <el-dialog v-model="visible" title="选择设备" width="800px" :close-on-click-modal="false" @close="onCancel">
- <div style="margin-bottom: 12px">
- <el-input v-model="search" placeholder="输入关键字搜索" style="width: 240px; margin-right: 8px" @keyup.enter="fetchData(true)" />
- <el-button type="primary" @click="fetchData(true)">搜索</el-button>
- </div>
- <el-table :data="tableData" border style="width: 100%" @selection-change="onSelectionChange" ref="tableRef">
- <el-table-column type="selection" width="50" />
- <el-table-column type="index" label="序号" width="60" />
- <el-table-column prop="category_name" label="设备分类" />
- <el-table-column prop="warehouse" label="存放仓库" />
- </el-table>
- <el-pagination
- style="margin-top: 12px; text-align: right"
- :current-page="page"
- :page-size="pageSize"
- :total="total"
- @current-change="onPageChange"
- />
- <template #footer>
- <el-button @click="onCancel">取消</el-button>
- <el-button type="primary" @click="onConfirm">确定</el-button>
- </template>
- </el-dialog>
- </template>
- <script setup lang="ts">
- import { ref, watch, defineProps, defineEmits } from 'vue';
- import * as deviceApi from '../../../../device/api';
- import * as storeapi from '../../../../storelist/api';
- const props = defineProps<{ visible: boolean }>();
- const emit = defineEmits(['update:visible', 'confirm']);
- const visible = ref(props.visible);
- watch(
- () => props.visible,
- (v) => (visible.value = v)
- );
- const search = ref('');
- const page = ref(1);
- const pageSize = ref(10);
- const total = ref(0);
- const tableData = ref([]);
- const selectedRows = ref([]);
- const warehouseMap = ref<Record<number, string>>({});
- function fetchWarehouseMap() {
- storeapi.GetPermission().then((res) => {
- const map: Record<number, string> = {};
- res.data.forEach((item) => {
- map[item.id] = item.name;
- });
- warehouseMap.value = map;
- });
- }
- async function fetchData(resetPage = false) {
- if (resetPage) page.value = 1;
- await fetchWarehouseMap();
- deviceApi.GetList({ page: page.value, limit: pageSize.value, category_name: search.value })
- .then((res) => {
- const devices = res.data
- .filter(device => device.available_quantity > 0)
- .map((device) => ({
- ...device,
- warehouse: `${warehouseMap.value[device.warehouse] || `ID:${device.warehouse}`} (${device.available_quantity})`
- }));
- tableData.value = devices;
- // tableData.value = [...res.data];
- total.value = res.total;
- });
- }
- function onSelectionChange(val) {
- selectedRows.value = val;
- }
- function onPageChange(val) {
- page.value = val;
- fetchData();
- }
- function onConfirm() {
- emit('confirm', selectedRows.value);
- emit('update:visible', false);
- }
- function onCancel() {
- emit('update:visible', false);
- }
- watch([visible, page], (v) => {
- if (visible.value) fetchData();
- });
- </script>
|