|
|
@@ -1,16 +1,31 @@ |
|
|
|
<template> |
|
|
|
<div class="box"> |
|
|
|
<div class="title">打印模板设计器</div> |
|
|
|
<div class="title">ID:{{ currentID }}</div> |
|
|
|
<div class="title">ID:{{ tenantId }}</div> |
|
|
|
<section> |
|
|
|
<div class="section">模板管理</div> |
|
|
|
<el-form :inline="true" :model="searchForm" size="small" label-width="80px" label-position="right"> |
|
|
|
<el-form-item label="模板名称" prop="name"> |
|
|
|
<el-input v-model="searchForm.name"></el-input> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="模板类型" prop="type"> |
|
|
|
<el-select v-model="searchForm.type"> |
|
|
|
<el-option v-for="(item, index) in typeArr" :key="index" :label="item.name" :value="item.id"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item> |
|
|
|
<el-button size="mini" type="primary" @click="getList">查询模板</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-table :data="tempList" style="width: 100%" size="mini" border> |
|
|
|
<el-table-column label="模板名称" prop="title"></el-table-column> |
|
|
|
<el-table-column label="模板类型"> |
|
|
|
<!-- <el-table-column label="模板类型"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span>{{ scope.row.type == 1 ? '出库单' : '入库单' }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table-column> --> |
|
|
|
<el-table-column label="模板宽高"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span>{{ scope.row.width + ' * ' + scope.row.height }}</span> |
|
|
@@ -29,8 +44,7 @@ |
|
|
|
<el-button type="text" size="mini" @click="handleEdit(scope.$index, scope.row)">设计</el-button> |
|
|
|
<el-button type="text" size="mini" @click="handlePreview(scope.$index, scope.row)">预览</el-button> |
|
|
|
<el-button type="text" size="mini" @click="handleCopy(scope.row)">复制新增</el-button> |
|
|
|
<el-button v-if="!scope.row.default" type="text" size="mini" |
|
|
|
@click="handleDelete(scope.$index, scope.row)">删除</el-button> |
|
|
|
<el-button type="text" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
@@ -39,12 +53,12 @@ |
|
|
|
<el-form-item label="模板名称" prop="title"> |
|
|
|
<el-input v-model="form.title"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="模板类型" prop="type"> |
|
|
|
<!-- <el-form-item label="模板类型" prop="type"> |
|
|
|
<el-select v-model="form.type"> |
|
|
|
<el-option label="出库单" :value="1"></el-option> |
|
|
|
<el-option label="入库单" :value="2"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> --> |
|
|
|
<el-form-item label="模板宽度" prop="width"> |
|
|
|
<el-input v-model="form.width"></el-input> |
|
|
|
</el-form-item> |
|
|
@@ -64,7 +78,7 @@ |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</section> |
|
|
|
<section> |
|
|
|
<!-- <section v-if="false"> |
|
|
|
<div class="section">模板打印测试</div> |
|
|
|
<el-form ref="printForm" :model="printForm" size="small" :rules="printRules" :inline="true"> |
|
|
|
<el-form-item label="打印模板" prop="tempIndex"> |
|
|
@@ -86,7 +100,7 @@ |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</section> |
|
|
|
<section> |
|
|
|
<section v-if="false"> |
|
|
|
<el-collapse> |
|
|
|
<el-collapse-item title="测试数据" name="1"> |
|
|
|
<el-form ref="testData" :model="testData" size="small" :inline="true"> |
|
|
@@ -101,34 +115,39 @@ |
|
|
|
</el-form> |
|
|
|
</el-collapse-item> |
|
|
|
</el-collapse> |
|
|
|
</section> |
|
|
|
</section> --> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { Table, TableColumn, Dialog, MessageBox } from 'element-ui' |
|
|
|
import { Table, TableColumn, Dialog, MessageBox, Message } from 'element-ui' |
|
|
|
import Vue from 'vue' |
|
|
|
Vue.prototype.$confirm = (...args) => MessageBox.confirm(...args) |
|
|
|
const defaultTemp = () => ({ |
|
|
|
title: '', |
|
|
|
type: 1, // 模板类型 1:出库单;2:入库单 |
|
|
|
width: '', |
|
|
|
height: '', |
|
|
|
pageWidth: '', |
|
|
|
pageHeight: '', |
|
|
|
tempItems: [], |
|
|
|
}) |
|
|
|
Vue.prototype.$message = Message |
|
|
|
const baseUrl = process.env.VUE_APP_BASE_API; |
|
|
|
import { OutStockData, InStockData } from '../data/test' |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
visible: false, |
|
|
|
currentID: "", |
|
|
|
tenantId: "", |
|
|
|
value: {}, |
|
|
|
tempList: [], |
|
|
|
form: defaultTemp(), |
|
|
|
typeArr: [], |
|
|
|
searchForm: { |
|
|
|
name: '', |
|
|
|
type: 2, |
|
|
|
}, |
|
|
|
form: { |
|
|
|
title: '', |
|
|
|
width: '', |
|
|
|
height: '', |
|
|
|
pageWidth: '', |
|
|
|
pageHeight: '', |
|
|
|
tempItems: [], |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
title: { required: true, message: '请输入模板名称' }, |
|
|
|
type: { required: true, message: '请选择模板类型' }, |
|
|
|
// type: { required: true, message: '请选择模板类型' }, |
|
|
|
width: { required: true, message: '请输入模板宽度' }, |
|
|
|
height: { required: true, message: '请输入模板高度' }, |
|
|
|
pageWidth: { required: true, message: '请输入纸张宽度' }, |
|
|
@@ -148,14 +167,6 @@ export default { |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
Vue.use(Table) |
|
|
|
Vue.use(TableColumn) |
|
|
|
Vue.use(Dialog) |
|
|
|
this.tempList = JSON.parse(localStorage.getItem('tempList')) || [] |
|
|
|
const id = this.$route.query.id |
|
|
|
if (id) this.currentID = id |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
// 预览 |
|
|
@@ -168,39 +179,43 @@ export default { |
|
|
|
path: '/designer', |
|
|
|
query: { |
|
|
|
index: index, |
|
|
|
printData: row |
|
|
|
}, |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 删除 |
|
|
|
handleDelete(index, row) { |
|
|
|
this.$confirm('确认删除该条数据吗?', '确认信息') |
|
|
|
.then((isPass) => { |
|
|
|
if (isPass) { |
|
|
|
this.tempList.splice(index, 1) |
|
|
|
localStorage.setItem('tempList', JSON.stringify(this.tempList)) |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch() |
|
|
|
console.log(this.$message) |
|
|
|
if (row.default) { |
|
|
|
this.$message.error('默认模板无法删除!') |
|
|
|
} else { |
|
|
|
this.$confirm('删除该模板?, 是否继续?', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
|
|
|
|
}).catch(() => { |
|
|
|
|
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
//复制新增 |
|
|
|
handleCopy(row) { |
|
|
|
let copyTemp = JSON.parse(JSON.stringify(row)) |
|
|
|
copyTemp.title = copyTemp.title + '_copy' |
|
|
|
copyTemp.default = false |
|
|
|
this.tempList.push(copyTemp) |
|
|
|
localStorage.setItem('tempList', JSON.stringify(this.tempList)) |
|
|
|
this.tempList.push(row) |
|
|
|
}, |
|
|
|
|
|
|
|
// 新增 |
|
|
|
openCreate() { |
|
|
|
this.form = defaultTemp() |
|
|
|
this.visible = true |
|
|
|
}, |
|
|
|
// 保存新增 |
|
|
|
savaTemp() { |
|
|
|
this.$refs.form.validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
this.tempList.push(this.form) |
|
|
|
localStorage.setItem('tempList', JSON.stringify(this.tempList)) |
|
|
|
this.addNewModel(this.form) |
|
|
|
this.visible = false |
|
|
|
} |
|
|
|
}) |
|
|
@@ -236,10 +251,62 @@ export default { |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
addNewModel(data) { |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
getData() { |
|
|
|
this.getPrintTypes() |
|
|
|
this.getList() |
|
|
|
}, |
|
|
|
|
|
|
|
getPrintTypes() { |
|
|
|
this.$axios.get(baseUrl + "/print/types") |
|
|
|
.then(res => { |
|
|
|
console.log(res, 'res') |
|
|
|
this.typeArr = res.data.data |
|
|
|
}) |
|
|
|
.catch(err => { |
|
|
|
console.error(err); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
getList() { |
|
|
|
const url = baseUrl + |
|
|
|
"/print/printTemplates?isDel=0" + |
|
|
|
"&name=" + |
|
|
|
this.searchForm.name + |
|
|
|
"&type=" + |
|
|
|
this.searchForm.type + |
|
|
|
"&tenantId=" + |
|
|
|
this.tenantId |
|
|
|
this.$axios.get(url) |
|
|
|
.then(res => { |
|
|
|
console.log(res, 'res') |
|
|
|
const arr = [] |
|
|
|
res.data.data.forEach(item => { |
|
|
|
arr.push(item.contentJson) |
|
|
|
}); |
|
|
|
this.tempList = arr |
|
|
|
}) |
|
|
|
.catch(err => { |
|
|
|
console.error(err); |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
Vue.use(Table) |
|
|
|
Vue.use(TableColumn) |
|
|
|
Vue.use(Dialog) |
|
|
|
this.tempList = [] |
|
|
|
const tenantId = this.$route.query.tenantId |
|
|
|
if (tenantId) this.tenantId = tenantId |
|
|
|
this.getData() |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.box { |
|
|
|
width: 1000px; |
|
|
|
margin: auto; |
|
|
@@ -260,4 +327,8 @@ export default { |
|
|
|
color: #333333; |
|
|
|
padding: 10px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.el-message-box { |
|
|
|
background-color: #1890ff; |
|
|
|
} |
|
|
|
</style> |