manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/project/qrCodeManagement.vue

<template>
  <div class="qrCodeManagement">
    <di class="qrCodeManagement-header">
      <div class="header-filter">
        <div>项目号：</div>
        <el-input v-model="filterValForm.projectId" placeholder="请输入" size="small" style="width: 150px;"></el-input>
      </div>
      <div class="header-filter">
        <div>项目名：</div>
        <el-input v-model="filterValForm.projectName" placeholder="请输入" size="small" style="width: 150px;"></el-input>
      </div>
      <div class="header-filter">
        <div>生产工单号：</div>
        <el-input v-model="filterValForm.orderId" placeholder="请输入" size="small" style="width: 150px;"></el-input>
      </div>
      <div class="header-filter">
        <div>行号：</div>
        <el-input v-model="filterValForm.line" placeholder="请输入" size="small" style="width: 150px;"></el-input>
      </div>
      <div class="header-filter">
        <div>生产工单日期：</div>
        <el-date-picker v-model="filterValForm.relsDate" type="date" placeholder="选择日期" size="small"
          style="width: 150px;" value-format="YYYY-MM-dd">
        </el-date-picker>
      </div>
    </di>
    <div class="qrCodeManagement-con">
      <el-table :data="tableData" style="width: 100%" height="58vh" border @selection-change="handleSelectionChange" :loading="tableLoading">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="projectId" label="项目号" />
        <el-table-column prop="projectName" label="项目名" />
        <el-table-column prop="orderId" label="生产工单号" />
        <el-table-column prop="line" label="行号" />
      </el-table>
    </div>
    <div class="qrCodeManagement-bon">
      <el-button type="primary" size="small" :disabled="!multipleSelection.length" @click="exportQrCode()"
        :loading="exportQrCodeLoading">导出二维码</el-button>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"
        :page-sizes="[100, 200, 300, 400, 500]" :page-size="pageSize" layout="total, prev, pager, next, sizes, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("user")),
      permissions: JSON.parse(sessionStorage.getItem("permissions")),
      tableData: [],
      multipleSelection: [],
      filterValForm: {
        orderId: '',
        projectId: '',
        projectName: '',
        line: '',
        relsDate: ''
      },
      pageIndex: 1,
      pageSize: 100,
      total: 0,
      exportQrCodeLoading: false,
      tableLoading: false,
      debounceTimer: null,
    };
  },
  watch: {
    filterValForm: {
      handler() {
        this.debounceGeTableData();
      },
      deep: true
    }
  },
  mounted() { },
  methods: {
    // 重置数据并加载
    resetData() {
      this.filterValForm = {
        orderId: '',
        projectId: '',
        projectName: '',
        line: '',
        relsDate: ''
      }
      this.pageIndex = 1
      this.pageSize = 100
      this.debounceGeTableData()
    },
    exportQrCode() {
      this.exportQrCodeLoading = true
      this.postData('/qrCode/generateQRCodeByErpIds', {
        erpIds: this.multipleSelection.map(item => item.id).join(',')
      }).then(res => {
        console.log('res', res)
        this.$message({
          message: '导出成功，下载中...',
          type: 'success'
        });
        var filePath = res.data;
        const a = document.createElement('a'); // 创建a标签
        a.setAttribute('download', '二维码' + '.zip');// download属性
        a.setAttribute('href', filePath);// href链接
        a.click(); //自执行点击事件
        a.remove();
      }).finally(() => {
        this.exportQrCodeLoading = false
      })
    },
    // 赛选条件改动执行
    debounceGeTableData() {
      clearTimeout(this.debounceTimer);
      this.debounceTimer = setTimeout(() => {
        this.geTableData();
      }, 500);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.pageIndex = 1
      this.pageSize = val
      this.geTableData()
    },
    handleCurrentChange(val) {
      this.pageIndex = val
      this.geTableData()
    },
    geTableData() {
      const filteredParams = {};
      console.log(this.filterValForm, '<==== this.filterValForm')
      for (const key in this.filterValForm) {
        const val = this.filterValForm[key];
        if (val !== '' && val !== null && val !== undefined) {
          filteredParams[key] = val;
        }
      }
      this.tableLoading = true
      this.postData('/erpOrderInfo/getInfoPage', {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        ...filteredParams
      }).then(res => {
        console.log('res', res)
        console.log(res.data.data, '<======= 数据')
        this.tableData = res.data.data || []
        this.total = res.data.total || 0
      }).finally(() => {
        this.tableLoading = false
      })
    },
    async postData(urls, param) {
      return new Promise((resolve, reject) => {
        this.http.post(urls, { ...param },
          res => {
            if (res.code == 'ok') {
              resolve(res)
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
              reject(res)
            }
            resolve(res)
          },
          error => {
            this.$message({
              message: error,
              type: "error"
            });
            reject(error)
          }
        )
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.qrCodeManagement {
  width: 100%;
  height: 70vh;

  .qrCodeManagement-header {
    display: flex;
    align-items: center;
    height: 8%;

    .header-filter {
      display: flex;
      align-items: center;
      margin-left: 14px;
    }
  }

  .qrCodeManagement-con {
    height: 84%;
  }

  .qrCodeManagement-bon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 8%;
  }
}
</style>