|
|
@@ -0,0 +1,214 @@
|
|
|
+<template>
|
|
|
+ <div class="qrCodeManagement">
|
|
|
+ <di class="qrCodeManagement-header">
|
|
|
+ <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.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.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: 100%" border @selection-change="handleSelectionChange" :loading="tableLoading">
|
|
|
+ <el-table-column type="selection" width="55" />
|
|
|
+ <el-table-column prop="orderId" label="项目号" />
|
|
|
+ <el-table-column prop="projectId" label="项目名" />
|
|
|
+ <el-table-column prop="projectName" 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', this.$t('projectexport') + '.xlsx');// 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 = {};
|
|
|
+ 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,
|
|
|
+ ...this.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>
|
