在线打印
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

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