ezhizao_dms_vue/src/views/business/storageCode/index.vue

<template>
  <div class="page-container row-container">
    <section class="list-part-container" style="flex: 2">
      <el-form class="list-search-container" :model="storageCodeParams" ref="queryRef" :inline="true">
        <el-form-item class="section-title" label="存储码管理" />
        <el-form-item label="年份：">
          <el-input placeholder="请输入年份" clearable style="width: 120px"
            v-model.trim="storageCodeParams.year" @keydown.enter.prevent />
        </el-form-item>
        <el-form-item label="存储码编号：">
          <el-input placeholder="请输入存储码编号" clearable style="width: 120px"
            v-model.trim="storageCodeParams.code" @keydown.enter.prevent />
        </el-form-item>
        <el-form-item label="打印状态：">
          <el-select placeholder="请选择打印状态" clearable style="width: 140px" v-model.trim="storageCodeParams.isPrint">
            <el-option v-for="dict in printStatus" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleQueryStorageCode">
            搜索
          </el-button>
          <el-button type="primary" icon="Plus" @click="handleShowDialog">
            新增
          </el-button>
          <el-button :disabled="selections.length == 0" type="warning" icon="Printer"
            @click="handleBatchPrintQrCode">打印</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table v-loading="storageCodeLoading" row-key="id" @selection-change="handleSelectionChange"
            :data="storageCodeList" height="100%">
            <el-table-column type="selection" width="40" align="center" :reserve-selection="true" />
            <el-table-column type="index" label="行号"  align="center" />
            <el-table-column prop="year" label="年份"  align="center" />
            <el-table-column prop="code" label="编号"  align="center" />
            <el-table-column label="是否打印"  align="center">
              <template #default="scope">
                {{ scope.row.isPrint == 1 ? '已打印' : '未打印' }}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center">
              <template #default="scope">
                {{
                  proxy
                    .moment(scope.row.createTime)
                    .format("YYYY-MM-DD HH:mm:ss")
                }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <pagination v-show="storageCodeTotal > 0" :total="storageCodeTotal" v-model:page="storageCodeParams.pageNum"
        v-model:limit="storageCodeParams.pageSize" @pagination="getStorageCode" />
    </section>

    <!-- 载具类别表单 -->
    <storage-code-form ref="storageCodeRef" @handleSaveSuccess="getStorageCode" />
    <div id="image-group" style="height: 0px; width: 0px">
      <el-image v-for="item in selections" :key="item.id" :src="webHost + item.qcCode" fit="cover"
        style="width: 100mm; height: 100mm">
      </el-image>
    </div>
  </div>
</template>

<script setup name="storageCode">
import {
  listStorageCode,
  printUpdate
} from "@/api/business/storageCode";
import printJS from "print-js";
import storageCodeForm from "./form";
import { nextTick } from "vue";
import JSZip from "jszip";
import { saveAs } from "file-saver";
const { proxy } = getCurrentInstance();
const storageCodeList = ref([]);
const storageCodeLoading = ref(false);
const storageCodeTotal = ref(0);
const selections = ref([]);
const printStatus = ref([{
  label: '未打印',
  value: 0
}, {
  label: '已打印',
  value: 1
}])
const data = reactive({
  form: {},
  storageCodeParams: {
    code: "",
    pageNum: 1,
    pageSize: 10,
  },
});

const { storageCodeParams } = toRefs(data);

/****************************  存储托盘吗相关事件  ****************************/

/**打开载具类别弹窗 */
function handleShowDialog() {
    proxy.$refs.storageCodeRef.open();
}

const getStorageCode = () => {
  listStorageCode(storageCodeParams.value).then((res) => {
    storageCodeLoading.value = false;
    storageCodeList.value = res.rows;
    storageCodeTotal.value = res.total;
  });
};

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  selections.value = selection;
  console.log(selections.value);
}
/**刷新载具 */
const handleRefreshStorageCode = () => {
  getStorageCode();
};
/**载具查询 */
const handleQueryStorageCode = () => {
  storageCodeParams.value.pageNum = 1;
  handleRefreshStorageCode();
};


const handleBatchPrintQrCode = async () => {
  if (selections.value.length > 0) {
    let index = selections.value.findIndex(l=>l.isPrint == 1)
    if (index != -1) {
      proxy.$modal.msgError('不能重复打印存储码')
      return
    }
      const imageGroup = document.getElementById("image-group");
      const res1 = await printUpdate(selections.value.map(e => e.id))
      if (res1.code == 200) {
        handleRefreshStorageCode()
        printJS({
          printable: "image-group", // 这里是你要打印内容的DOM元素的id
          type: "html",
          style: "@page { size: auto;  margin: 0mm; }", // 可以添加打印样式
        });
      }
  }
};

onMounted(() => {
  getStorageCode();
});
</script>
<style scoped>
:deep(.el-tree-node__label) {
  font-size: 14px !important;
  display: inline-block;
  width: 100%;
}

:deep(.el-tree-node__content) {
  height: 40px;
  border-bottom: 1px solid #ebeef5;
  padding: 8px 0;
  line-height: 23px;
}
</style>