富茂A端打印模板内嵌编辑器
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

428 lines
13 KiB

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