富茂A端打印模板内嵌编辑器
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

264 lines
9.1 KiB

  1. <template>
  2. <div class="box">
  3. <div class="title">打印模板设计器</div>
  4. <div class="title">ID:{{ currentID }}</div>
  5. <section>
  6. <div class="section">模板管理</div>
  7. <el-table :data="tempList" style="width: 100%" size="mini" border>
  8. <el-table-column label="模板名称" prop="title"></el-table-column>
  9. <el-table-column label="模板类型">
  10. <template slot-scope="scope">
  11. <span>{{ scope.row.type == 1 ? '出库单' : '入库单' }}</span>
  12. </template>
  13. </el-table-column>
  14. <el-table-column label="模板宽高">
  15. <template slot-scope="scope">
  16. <span>{{ scope.row.width + ' * ' + scope.row.height }}</span>
  17. </template>
  18. </el-table-column>
  19. <el-table-column label="纸张大小">
  20. <template slot-scope="scope">
  21. <span>{{ scope.row.pageWidth + 'mm * ' + scope.row.pageHeight + 'mm' }}</span>
  22. </template>
  23. </el-table-column>
  24. <el-table-column align="right">
  25. <template slot="header">
  26. <el-button size="mini" type="primary" @click="openCreate">创建模板</el-button>
  27. </template>
  28. <template slot-scope="scope">
  29. <el-button type="text" size="mini" @click="handleEdit(scope.$index, scope.row)">设计</el-button>
  30. <el-button type="text" size="mini" @click="handlePreview(scope.$index, scope.row)">预览</el-button>
  31. <el-button type="text" size="mini" @click="handleCopy(scope.row)">复制新增</el-button>
  32. <el-button v-if="!scope.row.default" type="text" size="mini"
  33. @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  34. </template>
  35. </el-table-column>
  36. </el-table>
  37. <el-dialog title="添加模板" :visible.sync="visible" width="310px">
  38. <el-form ref="form" :model="form" size="small" :rules="rules" label-width="80px">
  39. <el-form-item label="模板名称" prop="title">
  40. <el-input v-model="form.title"></el-input>
  41. </el-form-item>
  42. <el-form-item label="模板类型" prop="type">
  43. <el-select v-model="form.type">
  44. <el-option label="出库单" :value="1"></el-option>
  45. <el-option label="入库单" :value="2"></el-option>
  46. </el-select>
  47. </el-form-item>
  48. <el-form-item label="模板宽度" prop="width">
  49. <el-input v-model="form.width"></el-input>
  50. </el-form-item>
  51. <el-form-item label="模板高度" prop="height">
  52. <el-input v-model="form.height"></el-input>
  53. </el-form-item>
  54. <el-form-item label="纸张宽度" prop="pageWidth">
  55. <el-input v-model="form.pageWidth"></el-input>
  56. </el-form-item>
  57. <el-form-item label="纸张高度" prop="pageHeight">
  58. <el-input v-model="form.pageHeight"></el-input>
  59. </el-form-item>
  60. </el-form>
  61. <div slot="footer" class="dialog-footer">
  62. <el-button size="mini" @click="visible = false">取 消</el-button>
  63. <el-button type="primary" size="mini" @click="savaTemp">确 定</el-button>
  64. </div>
  65. </el-dialog>
  66. </section>
  67. <section>
  68. <div class="section">模板打印测试</div>
  69. <el-form ref="printForm" :model="printForm" size="small" :rules="printRules" :inline="true">
  70. <el-form-item label="打印模板" prop="tempIndex">
  71. <el-select v-model="printForm.tempIndex">
  72. <el-option v-for="(item, index) in tempList" :key="index" :label="item.title" :value="index"></el-option>
  73. </el-select>
  74. </el-form-item>
  75. <el-form-item label="测试数据" prop="data">
  76. <el-input type="textarea" style="width:520px" :rows="6" v-model="printForm.data"
  77. placeholder="数据模板对应的数据,数据格式为json对象"></el-input>
  78. </el-form-item>
  79. <el-form-item>
  80. <div>
  81. <el-button size="mini" type="primary" @click="printPreview(1)">打印预览</el-button>
  82. </div>
  83. <div style="margin-top:10px">
  84. <el-button size="mini" type="success" @click="printPreview(2)">直接打印</el-button>
  85. </div>
  86. </el-form-item>
  87. </el-form>
  88. </section>
  89. <section>
  90. <el-collapse>
  91. <el-collapse-item title="测试数据" name="1">
  92. <el-form ref="testData" :model="testData" size="small" :inline="true">
  93. <el-form-item label="出库数据">
  94. <el-input type="textarea" style="width:920px" :rows="8" v-model="testData.OutStock"
  95. placeholder="数据模板对应的数据,数据格式为json对象"></el-input>
  96. </el-form-item>
  97. <el-form-item label="入库数据">
  98. <el-input type="textarea" style="width:920px" :rows="8" v-model="testData.InStock"
  99. placeholder="数据模板对应的数据,数据格式为json对象"></el-input>
  100. </el-form-item>
  101. </el-form>
  102. </el-collapse-item>
  103. </el-collapse>
  104. </section>
  105. </div>
  106. </template>
  107. <script>
  108. import { Table, TableColumn, Dialog, MessageBox } from 'element-ui'
  109. import Vue from 'vue'
  110. Vue.prototype.$confirm = (...args) => MessageBox.confirm(...args)
  111. const defaultTemp = () => ({
  112. title: '',
  113. type: 1, // 模板类型 1:出库单;2:入库单
  114. width: '',
  115. height: '',
  116. pageWidth: '',
  117. pageHeight: '',
  118. tempItems: [],
  119. })
  120. import { OutStockData, InStockData } from '../data/test'
  121. export default {
  122. data() {
  123. return {
  124. visible: false,
  125. currentID: "",
  126. value: {},
  127. tempList: [],
  128. form: defaultTemp(),
  129. rules: {
  130. title: { required: true, message: '请输入模板名称' },
  131. type: { required: true, message: '请选择模板类型' },
  132. width: { required: true, message: '请输入模板宽度' },
  133. height: { required: true, message: '请输入模板高度' },
  134. pageWidth: { required: true, message: '请输入纸张宽度' },
  135. pageHeight: { required: true, message: '请输入纸张高度' },
  136. },
  137. printForm: {
  138. tempIndex: '',
  139. data: '',
  140. },
  141. printRules: {
  142. tempIndex: { required: true, message: '请选择模板' },
  143. data: { required: true, message: '请输入模板测试数据' },
  144. },
  145. testData: {
  146. OutStock: JSON.stringify(OutStockData),
  147. InStock: JSON.stringify(InStockData),
  148. },
  149. }
  150. },
  151. created() {
  152. Vue.use(Table)
  153. Vue.use(TableColumn)
  154. Vue.use(Dialog)
  155. this.tempList = JSON.parse(localStorage.getItem('tempList')) || []
  156. const id = this.$route.query.id
  157. if (id) this.currentID = id
  158. },
  159. methods: {
  160. // 预览
  161. handlePreview(index, row) {
  162. this.$lodop.previewTemp(row)
  163. },
  164. // 设计
  165. handleEdit(index, row) {
  166. this.$router.push({
  167. path: '/designer',
  168. query: {
  169. index: index,
  170. },
  171. })
  172. },
  173. // 删除
  174. handleDelete(index, row) {
  175. this.$confirm('确认删除该条数据吗?', '确认信息')
  176. .then((isPass) => {
  177. if (isPass) {
  178. this.tempList.splice(index, 1)
  179. localStorage.setItem('tempList', JSON.stringify(this.tempList))
  180. }
  181. })
  182. .catch()
  183. },
  184. handleCopy(row) {
  185. let copyTemp = JSON.parse(JSON.stringify(row))
  186. copyTemp.title = copyTemp.title + '_copy'
  187. copyTemp.default = false
  188. this.tempList.push(copyTemp)
  189. localStorage.setItem('tempList', JSON.stringify(this.tempList))
  190. },
  191. // 新增
  192. openCreate() {
  193. this.form = defaultTemp()
  194. this.visible = true
  195. },
  196. // 保存新增
  197. savaTemp() {
  198. this.$refs.form.validate((valid) => {
  199. if (valid) {
  200. this.tempList.push(this.form)
  201. localStorage.setItem('tempList', JSON.stringify(this.tempList))
  202. this.visible = false
  203. }
  204. })
  205. },
  206. /**
  207. * 测试打印预览/直接打印
  208. * flag 1:打印预览,2:直接打印
  209. */
  210. printPreview(flag) {
  211. this.$refs.printForm.validate((valid) => {
  212. if (valid) {
  213. let printData
  214. try {
  215. printData = JSON.parse(this.printForm.data)
  216. } catch (err) {
  217. return this.$message('请输入正确格式的打印数据')
  218. }
  219. if (flag == 1) {
  220. console.log(this.tempList[this.printForm.tempIndex])
  221. console.log(printData)
  222. this.$lodop.preview(this.tempList[this.printForm.tempIndex], printData)
  223. } else {
  224. this.$confirm('确认直接打印吗?', '确认信息')
  225. .then((isPass) => {
  226. if (isPass) {
  227. this.$lodop.print(this.tempList[this.printForm.tempIndex], printData)
  228. }
  229. })
  230. .catch((err) => {
  231. console.log(err)
  232. })
  233. }
  234. }
  235. })
  236. },
  237. },
  238. }
  239. </script>
  240. <style scoped>
  241. .box {
  242. width: 1000px;
  243. margin: auto;
  244. padding: 10px 0;
  245. font-family: Arial, Helvetica, sans-serif;
  246. }
  247. .title {
  248. text-align: center;
  249. font-size: 24px;
  250. color: #1890ff;
  251. margin: 20px;
  252. font-weight: bold;
  253. }
  254. .section {
  255. font-size: 18px;
  256. color: #333333;
  257. padding: 10px 0;
  258. }
  259. </style>