富茂A端打印模板内嵌编辑器
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 

267 行
9.1 KiB

  1. <template>
  2. <div class="box">
  3. <div class="title">打印模板设计器 {{ currentID }}</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. currentID: "",
  125. value: {},
  126. tempList: [],
  127. form: defaultTemp(),
  128. rules: {
  129. title: { required: true, message: '请输入模板名称' },
  130. type: { required: true, message: '请选择模板类型' },
  131. width: { required: true, message: '请输入模板宽度' },
  132. height: { required: true, message: '请输入模板高度' },
  133. pageWidth: { required: true, message: '请输入纸张宽度' },
  134. pageHeight: { required: true, message: '请输入纸张高度' },
  135. },
  136. printForm: {
  137. tempIndex: '',
  138. data: '',
  139. },
  140. printRules: {
  141. tempIndex: { required: true, message: '请选择模板' },
  142. data: { required: true, message: '请输入模板测试数据' },
  143. },
  144. testData: {
  145. OutStock: JSON.stringify(OutStockData),
  146. InStock: JSON.stringify(InStockData),
  147. },
  148. }
  149. },
  150. created() {
  151. Vue.use(Table)
  152. Vue.use(TableColumn)
  153. Vue.use(Dialog)
  154. this.tempList = JSON.parse(localStorage.getItem('tempList')) || []
  155. },
  156. methods: {
  157. // 预览
  158. handlePreview(index, row) {
  159. this.$lodop.previewTemp(row)
  160. },
  161. // 设计
  162. handleEdit(index, row) {
  163. this.$router.push({
  164. path: '/designer',
  165. query: {
  166. index: index,
  167. },
  168. })
  169. },
  170. // 删除
  171. handleDelete(index, row) {
  172. this.$confirm('确认删除该条数据吗?', '确认信息')
  173. .then((isPass) => {
  174. if (isPass) {
  175. this.tempList.splice(index, 1)
  176. localStorage.setItem('tempList', JSON.stringify(this.tempList))
  177. }
  178. })
  179. .catch()
  180. },
  181. handleCopy(row) {
  182. let copyTemp = JSON.parse(JSON.stringify(row))
  183. copyTemp.title = copyTemp.title + '_copy'
  184. copyTemp.default = false
  185. this.tempList.push(copyTemp)
  186. localStorage.setItem('tempList', JSON.stringify(this.tempList))
  187. },
  188. // 新增
  189. openCreate() {
  190. this.form = defaultTemp()
  191. this.visible = true
  192. },
  193. // 保存新增
  194. savaTemp() {
  195. this.$refs.form.validate((valid) => {
  196. if (valid) {
  197. this.tempList.push(this.form)
  198. localStorage.setItem('tempList', JSON.stringify(this.tempList))
  199. this.visible = false
  200. }
  201. })
  202. },
  203. /**
  204. * 测试打印预览/直接打印
  205. * flag 1:打印预览,2:直接打印
  206. */
  207. printPreview(flag) {
  208. this.$refs.printForm.validate((valid) => {
  209. if (valid) {
  210. let printData
  211. try {
  212. printData = JSON.parse(this.printForm.data)
  213. } catch (err) {
  214. return this.$message('请输入正确格式的打印数据')
  215. }
  216. if (flag == 1) {
  217. console.log(this.tempList[this.printForm.tempIndex])
  218. console.log(printData)
  219. this.$lodop.preview(this.tempList[this.printForm.tempIndex], printData)
  220. } else {
  221. this.$confirm('确认直接打印吗?', '确认信息')
  222. .then((isPass) => {
  223. if (isPass) {
  224. this.$lodop.print(this.tempList[this.printForm.tempIndex], printData)
  225. }
  226. })
  227. .catch((err) => {
  228. console.log(err)
  229. })
  230. }
  231. }
  232. })
  233. },
  234. },
  235. created() {
  236. const id = this.$route.query.id
  237. if (id) {
  238. this.currentID = id
  239. }
  240. }
  241. }
  242. </script>
  243. <style scoped>
  244. .box {
  245. width: 1000px;
  246. margin: auto;
  247. padding: 10px 0;
  248. font-family: Arial, Helvetica, sans-serif;
  249. }
  250. .title {
  251. text-align: center;
  252. font-size: 24px;
  253. color: #1890ff;
  254. margin: 20px;
  255. font-weight: bold;
  256. }
  257. .section {
  258. font-size: 18px;
  259. color: #333333;
  260. padding: 10px 0;
  261. }
  262. </style>