yjhtgl-web/src/views/comprehensiveGuarantee/MaterialReserveManagement/BarcodeManagement.vue

<!--条码管理-->
<template>
  <div>
    <div class="app-container">
      <div>
        <transition name="fade">
          <div v-show="showSearch" class="mb-[10px]">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" icon="Plus">导出</el-button>
              </el-col>
            </el-row>
          </div>
        </transition>
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          border
          :max-height="maxHeight"
          style="width: 96%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" fixed />
          <el-table-column label="物资名称" align="center" prop="material_name" fixed show-overflow-tooltip />
          <el-table-column label="物资编号" align="center" prop="material_code" show-overflow-tooltip />
          <el-table-column label="条形码" align="center" prop="bar_code" show-overflow-tooltip>
            <template #default="scope">
              <el-button type="text" class="common-btn-text-primary" @click="showQRCode(scope.row.barcode)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="二维码" align="center" prop="qr_code" show-overflow-tooltip>
            <template #default="scope">
              <el-button type="text" class="common-btn-text-primary" @click="showQRCode(scope.row.qr_code)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="条码状态" align="center" prop="status" show-overflow-tooltip>
            <template #default="scope">
              <div>
                <span v-if="Number(scope.row.status) === 0">禁用</span>
                <span v-if="Number(scope.row.status) === 1">启用</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
            <template #default="scope">
              <div>
                <span v-if="Number(scope.row.status) === 1" class="common-btn-text-primary" @click="toggleStatus(scope.row, 0)">禁用</span>
                <span v-if="Number(scope.row.status) === 0" class="common-btn-text-primary" @click="toggleStatus(scope.row, 1)">启用</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog v-model="dialogVisible.visible" title="二维码">
          <div class="flex justify-center items-center h-[400px]">
            <img :src="baseUrl + downLoadApi + dialogVisible.qr_code" alt="二维码" class="w-[300px] h-[300px]" />
          </div>
        </el-dialog>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="fetchListData"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { getBarcodeManagementList, changeStatus } from '@/api/comprehensiveGuarantee/materialReserveManagement/BarcodeManagement';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const downLoadApi = import.meta.env.VITE_APP_BASE_DOWNLOAD_API;
const showSearch = ref(true);
const multiple = ref(true);
const ids = ref<Array<number | string>>([]);
const single = ref(true);
const tableData = ref();
// 定义响应式变量
const loading = ref(false);
const maxHeight = ref(window.innerHeight * 0.8);
const total = ref();
// 处理窗口大小变化
const handleResize = () => {
  maxHeight.value = window.innerHeight * 0.8;
};
const initFormData = reactive({
  material_name: '',
  material_code: '',
  barcode: '',
  qr_code: '',
  status: ''
});
const data = reactive({
  form: { ...initFormData },
  queryParams: {
    page: '1',
    pageSize: '10'
  }
});

const { queryParams, form } = toRefs(data);
const dialogVisible = ref({
  visible: false,
  qr_code: ''
});

const showQRCode = (qr_code) => {
  dialogVisible.value = { qr_code };
  dialogVisible.value.visible = true;
};
const fetchListData = () => {
  loading.value = true;
  getBarcodeManagementList(queryParams.value)
    .then((res) => {
      tableData.value = res.data;
      total.value = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id);
  selectedRow.value = selection.length === 1 ? selection[0] : null;
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};
const toggleStatus = (row, newStatus) => {
  const payload = {
    id: row.id,
    status: String(newStatus)
  };

  changeStatus(payload).then((response) => {
    // 更新成功后重新获取列表数据以刷新页面
    fetchListData();
  });
};
onMounted(() => {
  window.addEventListener('resize', handleResize);
  fetchListData();
});

// 在组件卸载前移除窗口大小变化监听器
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<style lang="scss" scoped></style>