富茂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.
 
 
 

335 line
11 KiB

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