<template>
|
<div class="listStyle">
|
<list-condition-template ref="table" v-loading="isLoading" element-loading-text="数据加载中"
|
:form="listQuery" :formLabel="formLabel" :tableData="tableData"
|
:total="total" @page-info-change="handlePageInfoChange" labelWidth="120px">
|
<template slot="otherElement">
|
<el-col :xs='12' :sm='12' :md='12' :lg='6' :xl='12' :offset="0">
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</template>
|
<template slot="operationSection">
|
<el-button size="mini" type="success" @click="addItem">新增批次</el-button>
|
</template>
|
<template slot="columns">
|
<el-table-column label="二维码批次" min-width="180px" prop="batchName" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="批次编号" prop="batchNum" show-overflow-tooltip width="120px">
|
</el-table-column>
|
<el-table-column label="批次描述" prop="batchDesc" show-overflow-tooltip min-width="220px">
|
</el-table-column>
|
<el-table-column label="关联活动" width="150px" prop="batchPromotion" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="箱码数量" width="150px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
总数：{{scope.row.map['箱码总数']}}
|
<br />
|
已用：{{scope.row.map['箱码已使用']}}
|
</template>
|
</el-table-column>
|
<el-table-column label="瓶码数量" width="150px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
总数：{{scope.row.map['瓶码总数']}}
|
<br />
|
已用：{{scope.row.map['瓶码已使用']}}
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" prop="createTime" width="170px">
|
</el-table-column>
|
<el-table-column label="操作" :width="`${2 * $store.getters.colSize + 80}px`" fixed="right">
|
<template slot-scope="scope">
|
<wly-btn type="warning" @click="addCode(scope.row,scope.$index)">添加二维码</wly-btn>
|
<wly-btn type="danger" icon="el-icon-upload2"
|
@click="exportData(scope.row,scope.$index)">导出</wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<add-batch :show.sync="batchShow" :title="batchTitle"></add-batch>
|
<add-QR-code :show.sync="codeShow" :title="codeTitle" :batchInfo='batchInfo'></add-QR-code>
|
</div>
|
</template>
|
<script>
|
import QRCodeApi from '@/api/QRCode'
|
import addBatch from '@/views/codeMgt/addBatch.vue'
|
import addQRCode from '@/views/codeMgt/info.vue'
|
import { downloadFile } from '@/utils/downloadFile'
|
|
export default {
|
components: {
|
addBatch,
|
addQRCode
|
},
|
data() {
|
return {
|
batchShow: false,
|
batchTitle: null,
|
codeShow: false,
|
codeTitle: null,
|
tableData: [],
|
total: 0,
|
dialogVisible: false,
|
listQuery: {
|
batchSelect: null
|
},
|
form: {},
|
formLabel: [
|
{
|
model: 'batchSelect',
|
label: '批次/编号',
|
type: 'input'
|
}
|
],
|
batchInfo: {},
|
isLoading: false
|
}
|
},
|
mounted() {
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
/*
|
* 数据变化后刷新列表
|
*/
|
activated() {
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
methods: {
|
async exportData(row, index) {
|
this.isLoading = true
|
const config = {
|
url: `wly-qrcode-service/qrExport/listExp?batchId=${row.id}`,
|
data: null,
|
fileName: `${row.batchName}`,
|
type: '.zip'
|
}
|
const res = await downloadFile(config)
|
if (res) {
|
this.isLoading = false
|
} else {
|
this.isLoading = false
|
}
|
},
|
/**
|
* 新增二维码
|
*/
|
addCode(row) {
|
this.codeShow = true
|
this.codeTitle = '新增二维码'
|
this.batchInfo = row
|
},
|
/**
|
* 新增
|
*/
|
addItem() {
|
this.batchShow = true
|
this.batchTitle = '新增批次'
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 查询列表
|
*/
|
queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
QRCodeApi.getList({ ...this.listQuery, ...pageInfo }).then(res => {
|
if (res.data) {
|
this.tableData = res.data.list
|
this.total = res.data.total
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.listStyle {
|
background-color: #f2f2f2;
|
}
|
</style>
|
