|
@@ -1,31 +1,41 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="box"> |
|
|
<div class="box"> |
|
|
<div class="title">打印模板设计器</div> |
|
|
<div class="title">打印模板设计器</div> |
|
|
<div class="title">ID:{{ tenantId }}</div> |
|
|
|
|
|
<section> |
|
|
<section> |
|
|
<div class="section">模板管理</div> |
|
|
<div class="section">模板管理</div> |
|
|
<el-form :inline="true" :model="searchForm" size="small" label-width="80px" label-position="right"> |
|
|
<el-form :inline="true" :model="searchForm" size="small" label-width="80px" label-position="right"> |
|
|
<el-form-item label="模板名称" prop="name"> |
|
|
<el-form-item label="模板名称" prop="name"> |
|
|
<el-input v-model="searchForm.name"></el-input> |
|
|
|
|
|
|
|
|
<el-input v-model="searchForm.name" clearable></el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
<el-form-item label="模板类型" prop="type"> |
|
|
<el-form-item label="模板类型" prop="type"> |
|
|
<el-select v-model="searchForm.type"> |
|
|
|
|
|
|
|
|
<el-select v-model="searchForm.type" clearable> |
|
|
<el-option v-for="(item, index) in typeArr" :key="index" :label="item.name" :value="item.id"></el-option> |
|
|
<el-option v-for="(item, index) in typeArr" :key="index" :label="item.name" :value="item.id"></el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
|
|
<el-form-item label="状态" prop="isDel"> |
|
|
|
|
|
<el-select v-model="searchForm.isDel" clearable> |
|
|
|
|
|
<el-option v-for="(item, index) in isDelArr" :key="index" :label="item.name" :value="item.id"></el-option> |
|
|
|
|
|
</el-select> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
<el-form-item> |
|
|
<el-form-item> |
|
|
<el-button size="mini" type="primary" @click="getList">查询模板</el-button> |
|
|
<el-button size="mini" type="primary" @click="getList">查询模板</el-button> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</el-form> |
|
|
<el-table :data="tempList" style="width: 100%" size="mini" border> |
|
|
<el-table :data="tempList" style="width: 100%" size="mini" border> |
|
|
<el-table-column label="模板名称" prop="title"></el-table-column> |
|
|
<el-table-column label="模板名称" prop="title"></el-table-column> |
|
|
<!-- <el-table-column label="模板类型"> |
|
|
|
|
|
|
|
|
<el-table-column label="模板类型"> |
|
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
|
<span>{{ getType(scope.row.type) }}</span> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
<el-table-column label="模板状态"> |
|
|
<template slot-scope="scope"> |
|
|
<template slot-scope="scope"> |
|
|
<span>{{ scope.row.type == 1 ? '出库单' : '入库单' }}</span> |
|
|
|
|
|
|
|
|
<span>{{ getIsDel(scope.row.isDel) }}</span> |
|
|
</template> |
|
|
</template> |
|
|
</el-table-column> --> |
|
|
|
|
|
|
|
|
</el-table-column> |
|
|
<el-table-column label="模板宽高"> |
|
|
<el-table-column label="模板宽高"> |
|
|
<template slot-scope="scope"> |
|
|
<template slot-scope="scope"> |
|
|
<span>{{ scope.row.width + ' * ' + scope.row.height }}</span> |
|
|
<span>{{ scope.row.width + ' * ' + scope.row.height }}</span> |
|
@@ -41,10 +51,12 @@ |
|
|
<el-button size="mini" type="primary" @click="openCreate">创建模板</el-button> |
|
|
<el-button size="mini" type="primary" @click="openCreate">创建模板</el-button> |
|
|
</template> |
|
|
</template> |
|
|
<template slot-scope="scope"> |
|
|
<template slot-scope="scope"> |
|
|
<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="handleEdit(scope.row)">设计</el-button> |
|
|
|
|
|
<el-button type="text" size="mini" @click="handlePreview(scope.row)">预览</el-button> |
|
|
|
|
|
<el-button type="text" size="mini" @click="handlePrint(scope.row)">打印</el-button> |
|
|
|
|
|
<el-button v-if="scope.row.isDel" type="text" size="mini" @click="handleRecover(scope.row)">恢复</el-button> |
|
|
|
|
|
<el-button v-if="!scope.row.isDel" type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button> |
|
|
<el-button type="text" size="mini" @click="handleCopy(scope.row)">复制新增</el-button> |
|
|
<el-button type="text" size="mini" @click="handleCopy(scope.row)">复制新增</el-button> |
|
|
<el-button type="text" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button> |
|
|
|
|
|
</template> |
|
|
</template> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table> |
|
|
</el-table> |
|
@@ -53,13 +65,12 @@ |
|
|
<el-form-item label="模板名称" prop="title"> |
|
|
<el-form-item label="模板名称" prop="title"> |
|
|
<el-input v-model="form.title"></el-input> |
|
|
<el-input v-model="form.title"></el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<!-- <el-form-item label="模板类型" prop="type"> |
|
|
|
|
|
|
|
|
<el-form-item label="模板类型" prop="type"> |
|
|
<el-select v-model="form.type"> |
|
|
<el-select v-model="form.type"> |
|
|
<el-option label="出库单" :value="1"></el-option> |
|
|
|
|
|
<el-option label="入库单" :value="2"></el-option> |
|
|
|
|
|
|
|
|
<el-option v-for="(item, index) in typeArr" :key="index" :label="item.name" :value="item.id"></el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</el-form-item> --> |
|
|
|
|
|
<el-form-item label="模板宽度" prop="width"> |
|
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
<!-- <el-form-item label="模板宽度" prop="width"> |
|
|
<el-input v-model="form.width"></el-input> |
|
|
<el-input v-model="form.width"></el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="模板高度" prop="height"> |
|
|
<el-form-item label="模板高度" prop="height"> |
|
@@ -70,7 +81,7 @@ |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="纸张高度" prop="pageHeight"> |
|
|
<el-form-item label="纸张高度" prop="pageHeight"> |
|
|
<el-input v-model="form.pageHeight"></el-input> |
|
|
<el-input v-model="form.pageHeight"></el-input> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
</el-form-item> --> |
|
|
</el-form> |
|
|
</el-form> |
|
|
<div slot="footer" class="dialog-footer"> |
|
|
<div slot="footer" class="dialog-footer"> |
|
|
<el-button size="mini" @click="visible = false">取 消</el-button> |
|
|
<el-button size="mini" @click="visible = false">取 消</el-button> |
|
@@ -135,19 +146,24 @@ export default { |
|
|
typeArr: [], |
|
|
typeArr: [], |
|
|
searchForm: { |
|
|
searchForm: { |
|
|
name: '', |
|
|
name: '', |
|
|
type: 2, |
|
|
|
|
|
|
|
|
type: '', |
|
|
|
|
|
isDel: '' |
|
|
}, |
|
|
}, |
|
|
|
|
|
isDelArr: [ |
|
|
|
|
|
{ name: "正常", id: 0 }, |
|
|
|
|
|
{ name: "已删除", id: 1 }, |
|
|
|
|
|
], |
|
|
form: { |
|
|
form: { |
|
|
title: '', |
|
|
title: '', |
|
|
|
|
|
type: '', |
|
|
width: '', |
|
|
width: '', |
|
|
height: '', |
|
|
height: '', |
|
|
pageWidth: '', |
|
|
pageWidth: '', |
|
|
pageHeight: '', |
|
|
|
|
|
tempItems: [], |
|
|
|
|
|
|
|
|
pageHeight: '' |
|
|
}, |
|
|
}, |
|
|
rules: { |
|
|
rules: { |
|
|
title: { required: true, message: '请输入模板名称' }, |
|
|
title: { required: true, message: '请输入模板名称' }, |
|
|
// type: { required: true, message: '请选择模板类型' }, |
|
|
|
|
|
|
|
|
type: { required: true, message: '请选择模板类型' }, |
|
|
width: { required: true, message: '请输入模板宽度' }, |
|
|
width: { required: true, message: '请输入模板宽度' }, |
|
|
height: { required: true, message: '请输入模板高度' }, |
|
|
height: { required: true, message: '请输入模板高度' }, |
|
|
pageWidth: { required: true, message: '请输入纸张宽度' }, |
|
|
pageWidth: { required: true, message: '请输入纸张宽度' }, |
|
@@ -170,41 +186,119 @@ export default { |
|
|
|
|
|
|
|
|
methods: { |
|
|
methods: { |
|
|
// 预览 |
|
|
// 预览 |
|
|
handlePreview(index, row) { |
|
|
|
|
|
this.$lodop.previewTemp(row) |
|
|
|
|
|
|
|
|
handlePreview(row) { |
|
|
|
|
|
console.log(row, 'row') |
|
|
|
|
|
if (row.tempItems) { |
|
|
|
|
|
this.$lodop.previewTemp(row) |
|
|
|
|
|
} else { |
|
|
|
|
|
this.$message.error("空模板无法预览,请先点击设计添加模板数据!") |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 打印 |
|
|
|
|
|
handlePrint(row) { |
|
|
|
|
|
console.log(row, 'row') |
|
|
|
|
|
if (row.tempItems) { |
|
|
|
|
|
this.$lodop.print(row) |
|
|
|
|
|
} else { |
|
|
|
|
|
this.$message.error("空模板无法打印,请先点击设计添加模板数据!") |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 设计 |
|
|
// 设计 |
|
|
handleEdit(index, row) { |
|
|
|
|
|
|
|
|
handleEdit(row) { |
|
|
|
|
|
console.log(row, 'row') |
|
|
|
|
|
// 初次新增时,没有tempItems(Arry)字段,需要手动添加 |
|
|
|
|
|
if (!row.tempItems || !row.tempItems.length) { |
|
|
|
|
|
row.tempItems = [] |
|
|
|
|
|
} |
|
|
this.$router.push({ |
|
|
this.$router.push({ |
|
|
path: '/designer', |
|
|
path: '/designer', |
|
|
query: { |
|
|
query: { |
|
|
index: index, |
|
|
|
|
|
|
|
|
tenantId: this.tenantId, |
|
|
printData: row |
|
|
printData: row |
|
|
}, |
|
|
}, |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 恢复 |
|
|
|
|
|
handleRecover(row) { |
|
|
|
|
|
console.log(row, 'row') |
|
|
|
|
|
this.deleteOrRecover(row, 0) |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
// 删除 |
|
|
// 删除 |
|
|
handleDelete(index, row) { |
|
|
|
|
|
console.log(this.$message) |
|
|
|
|
|
if (row.default) { |
|
|
|
|
|
this.$message.error('默认模板无法删除!') |
|
|
|
|
|
} else { |
|
|
|
|
|
this.$confirm('删除该模板?, 是否继续?', '提示', { |
|
|
|
|
|
confirmButtonText: '确定', |
|
|
|
|
|
cancelButtonText: '取消', |
|
|
|
|
|
type: 'warning' |
|
|
|
|
|
}).then(() => { |
|
|
|
|
|
|
|
|
handleDelete(row) { |
|
|
|
|
|
console.log(row, 'row') |
|
|
|
|
|
this.$confirm('删除该模板?, 是否继续?', '提示', { |
|
|
|
|
|
confirmButtonText: '确定', |
|
|
|
|
|
cancelButtonText: '取消', |
|
|
|
|
|
type: 'warning' |
|
|
|
|
|
}).then(() => { |
|
|
|
|
|
this.deleteOrRecover(row, 1) |
|
|
|
|
|
}).catch(() => { |
|
|
|
|
|
|
|
|
}).catch(() => { |
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
deleteOrRecover(item, flag) { |
|
|
|
|
|
const data = { |
|
|
|
|
|
id: item.id, |
|
|
|
|
|
tenantId: this.tenantId, |
|
|
|
|
|
isDel: flag, |
|
|
} |
|
|
} |
|
|
|
|
|
this.$axios.post(baseUrl + "/print/setTemplatesDel", data) |
|
|
|
|
|
.then(res => { |
|
|
|
|
|
console.log(res, 'res') |
|
|
|
|
|
if (res.data.code == 200) { |
|
|
|
|
|
this.$message.success(flag ? "删除成功!" : "恢复成功!") |
|
|
|
|
|
this.getData() |
|
|
|
|
|
} else { |
|
|
|
|
|
this.$message.error(flag ? "删除失败!" : "恢复失败!") |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
.catch(err => { |
|
|
|
|
|
console.error(err); |
|
|
|
|
|
this.$message.error(flag ? "删除失败!" : "恢复失败!") |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
getType(num) { |
|
|
|
|
|
let name |
|
|
|
|
|
this.typeArr.forEach(item => { |
|
|
|
|
|
if (item.id == num) |
|
|
|
|
|
name = item.name |
|
|
|
|
|
}) |
|
|
|
|
|
return name |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
getIsDel(num) { |
|
|
|
|
|
let name |
|
|
|
|
|
this.isDelArr.forEach(item => { |
|
|
|
|
|
if (item.id == num) |
|
|
|
|
|
name = item.name |
|
|
|
|
|
}) |
|
|
|
|
|
return name |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
//复制新增 |
|
|
//复制新增 |
|
|
handleCopy(row) { |
|
|
handleCopy(row) { |
|
|
this.tempList.push(row) |
|
|
|
|
|
|
|
|
const data = { |
|
|
|
|
|
id: row.id |
|
|
|
|
|
} |
|
|
|
|
|
this.$axios.post(baseUrl + "/print/copyTemplates", data) |
|
|
|
|
|
.then(res => { |
|
|
|
|
|
if (res.data.code == 200) { |
|
|
|
|
|
this.$message.success("新增成功!") |
|
|
|
|
|
this.getData() |
|
|
|
|
|
} else { |
|
|
|
|
|
this.$message.error("新增失败!") |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
.catch(err => { |
|
|
|
|
|
console.error(err); |
|
|
|
|
|
this.$message.error("新增失败!") |
|
|
|
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 新增 |
|
|
// 新增 |
|
@@ -215,45 +309,32 @@ export default { |
|
|
savaTemp() { |
|
|
savaTemp() { |
|
|
this.$refs.form.validate((valid) => { |
|
|
this.$refs.form.validate((valid) => { |
|
|
if (valid) { |
|
|
if (valid) { |
|
|
this.addNewModel(this.form) |
|
|
|
|
|
this.visible = false |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
/** |
|
|
|
|
|
* 测试打印预览/直接打印 |
|
|
|
|
|
* flag 1:打印预览,2:直接打印 |
|
|
|
|
|
*/ |
|
|
|
|
|
printPreview(flag) { |
|
|
|
|
|
this.$refs.printForm.validate((valid) => { |
|
|
|
|
|
if (valid) { |
|
|
|
|
|
let printData |
|
|
|
|
|
try { |
|
|
|
|
|
printData = JSON.parse(this.printForm.data) |
|
|
|
|
|
} catch (err) { |
|
|
|
|
|
return this.$message('请输入正确格式的打印数据') |
|
|
|
|
|
} |
|
|
|
|
|
if (flag == 1) { |
|
|
|
|
|
console.log(this.tempList[this.printForm.tempIndex]) |
|
|
|
|
|
console.log(printData) |
|
|
|
|
|
this.$lodop.preview(this.tempList[this.printForm.tempIndex], printData) |
|
|
|
|
|
} else { |
|
|
|
|
|
this.$confirm('确认直接打印吗?', '确认信息') |
|
|
|
|
|
.then((isPass) => { |
|
|
|
|
|
if (isPass) { |
|
|
|
|
|
this.$lodop.print(this.tempList[this.printForm.tempIndex], printData) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
.catch((err) => { |
|
|
|
|
|
console.log(err) |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
const data = { |
|
|
|
|
|
tenantId: this.tenantId, |
|
|
|
|
|
title: this.form.title, |
|
|
|
|
|
type: this.form.type |
|
|
} |
|
|
} |
|
|
|
|
|
this.addNewModel(data) |
|
|
|
|
|
this.visible = false |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
addNewModel(data) { |
|
|
addNewModel(data) { |
|
|
|
|
|
|
|
|
|
|
|
this.$axios.post(baseUrl + "/print/saveTemplates", data) |
|
|
|
|
|
.then(res => { |
|
|
|
|
|
console.log(res, 'res') |
|
|
|
|
|
if (res.data.code == 200) { |
|
|
|
|
|
this.$message.success("新增成功!") |
|
|
|
|
|
this.getData() |
|
|
|
|
|
} else { |
|
|
|
|
|
this.$message.error("新增失败!") |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
.catch(err => { |
|
|
|
|
|
console.error(err); |
|
|
|
|
|
this.$message.error("新增失败!") |
|
|
|
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
getData() { |
|
|
getData() { |
|
@@ -274,7 +355,8 @@ export default { |
|
|
|
|
|
|
|
|
getList() { |
|
|
getList() { |
|
|
const url = baseUrl + |
|
|
const url = baseUrl + |
|
|
"/print/printTemplates?isDel=0" + |
|
|
|
|
|
|
|
|
"/print/printTemplates?isDel=" + |
|
|
|
|
|
this.searchForm.isDel + |
|
|
"&name=" + |
|
|
"&name=" + |
|
|
this.searchForm.name + |
|
|
this.searchForm.name + |
|
|
"&type=" + |
|
|
"&type=" + |
|
@@ -286,6 +368,7 @@ export default { |
|
|
console.log(res, 'res') |
|
|
console.log(res, 'res') |
|
|
const arr = [] |
|
|
const arr = [] |
|
|
res.data.data.forEach(item => { |
|
|
res.data.data.forEach(item => { |
|
|
|
|
|
item.contentJson.isDel = item.isDel |
|
|
arr.push(item.contentJson) |
|
|
arr.push(item.contentJson) |
|
|
}); |
|
|
}); |
|
|
this.tempList = arr |
|
|
this.tempList = arr |
|
|