富茂A端打印模板内嵌编辑器
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 

260 wiersze
9.0 KiB

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