<template>
|
<div class="encoding viewWrap">
|
<a ref="download" style="display: none" />
|
<h2>编码管理</h2>
|
<!-- 数据功能按钮区 -->
|
<el-button type="primary" icon="el-icon-download" style="width: 100px;" @click="handleExport">导出</el-button>
|
<!-- 数据表格区 -->
|
<el-table stripe :data="tableData" height="0" style="margin-top: 20px;">
|
<el-table-column type="index" label="序号"> </el-table-column>
|
<el-table-column prop="name" label="名称"> </el-table-column>
|
<el-table-column prop="code" label="编码"> </el-table-column>
|
<el-table-column label="二维码" width="120">
|
<template slot-scope="scope">
|
<el-button @click.native.prevent="handleShowCode(scope.row)" type="text" size="small">
|
<i class="iconfont icon-erweima" style="font-size: 12px;"></i>
|
查看二维码
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 二维码 -->
|
<div class="codeWrap" v-show="showCode" @click="handleCloseCode">
|
<transition name="el-zoom-in-center">
|
<img v-show="showCode" :src="imgBase64">
|
</transition>
|
<div class="codeMessage">点击屏幕关闭二维码</div>
|
</div>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.encoding {
|
padding: 20px;
|
}
|
</style>
|
|
<script>
|
export default {
|
name: "encoding",
|
components: {},
|
data() {
|
return {
|
tableData: [],
|
showCode: false,
|
codeObj: null,
|
imgBase64: null,
|
};
|
},
|
computed: {},
|
mounted() {
|
this.onGetTableData()
|
},
|
methods: {
|
// 获取表格数据
|
onGetTableData: function () {
|
var that = this;
|
that
|
.$axiosAdmin({
|
method: "get",
|
url: "base/markQrCode/show",
|
})
|
.then((res) => {
|
if (res.success == true) {
|
that.tableData = res.content;
|
} else {
|
that.$alert(res.content, "提示", {
|
confirmButtonText: "确定",
|
});
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 生成二维码
|
handleShowCode: function (row) {
|
this.imgBase64 = row.imgBase64
|
this.showCode = true;
|
},
|
// 关闭二维码
|
handleCloseCode: function () {
|
this.imgBase64 = null
|
this.showCode = false;
|
},
|
// 导出
|
handleExport: function () {
|
var that = this;
|
that
|
.$axiosAdmin({
|
method: "get",
|
responseType: "blob",
|
url: "base/markQrCode/download",
|
})
|
.then((res) => {
|
const blob = res;
|
that.$refs.download.href = window.URL.createObjectURL(new Blob([blob], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));
|
that.$refs.download.download = `标识类二维码.xlsx`;
|
that.$refs.download.click();
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
},
|
};
|
</script>
|
