index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. <template>
  2. <div class="page">
  3. <template-page v-show="!formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
  4. :table-events="tableEvents" :operationColumnWidth="140" :options-evens-group="optionsEvensGroup"
  5. :moreParameters="moreParameters" :column-parsing="columnParsing" :operation="operation()" :exportList="exportList">
  6. <div slot="moreSearch">
  7. <el-radio-group v-model="flag" size="mini" @change="changeType">
  8. <el-radio-button label="">全部</el-radio-button>
  9. <el-radio-button label="SAVE">保存</el-radio-button>
  10. <el-radio-button label="SUBMIT">提交</el-radio-button>
  11. <el-radio-button label="PAY_NOT_TAKE">已支付未提货</el-radio-button>
  12. <el-radio-button label="PAY_TAKE">已支付已提货</el-radio-button>
  13. <el-radio-button label="CANCEL">取消订单</el-radio-button>
  14. </el-radio-group>
  15. <br><br>
  16. </div>
  17. </template-page>
  18. <div class="detail" v-if="formDialog">
  19. <attachmentSalesOrderDetail :id="id" @back="backList" :formType="formDialogType"
  20. :title="'配件销售订单' + formDialogTitles[formDialogType]"></attachmentSalesOrderDetail>
  21. </div>
  22. <print-preview ref="preView" @initPrint="handleInitPrint" @refreshList="handleRefreshList" />
  23. </div>
  24. </template>
  25. <script>
  26. import TemplatePage from '@/components/template/template-page-1.vue'
  27. import attachmentSalesOrderDetail from '../components/attachmentSalesOrderDetail.vue'
  28. import import_mixin from '@/components/template/import_mixin.js'
  29. import ImageUpload from '@/components/file-upload'
  30. import { downloadFiles } from '@/utils/util'
  31. import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
  32. import { listPageV2, pageExport, getDetail, add, edit, submit } from "@/api/auxiliaryFittings/auxiliarySalesOrder";
  33. import { getWebsit } from "@/api/customerManagement";
  34. import printPreview from '../components/preview.vue'
  35. import { disAutoConnect, hiprint } from 'vue-plugin-hiprint'
  36. import operation_mixin from '@/components/template/operation_mixin.js'
  37. disAutoConnect()
  38. export default {
  39. components: { TemplatePage, ImageUpload, attachmentSalesOrderDetail, printPreview },
  40. mixins: [import_mixin,operation_mixin],
  41. data() {
  42. return {
  43. // 表格属性
  44. tableAttributes: {
  45. // 启用勾选列
  46. selectColumn: true
  47. },
  48. // 表格事件
  49. tableEvents: {
  50. 'selection-change': this.selectionChange
  51. },
  52. // 勾选选中行
  53. recordSelected: [],
  54. /** 表单变量 */
  55. formDialogType: 0,
  56. formDialogTitles: ["新增", "编辑", "详情"],
  57. formDialog: false,
  58. id: '',
  59. flag: '',
  60. websitList: []
  61. }
  62. },
  63. computed: {
  64. // 事件组合
  65. optionsEvensGroup() {
  66. return [
  67. [
  68. [
  69. this.optionsEvensAuth("add", {
  70. click: this.addData
  71. }),
  72. ]
  73. ]
  74. ]
  75. },
  76. // 更多参数
  77. moreParameters() {
  78. return []
  79. },
  80. formItems() { },
  81. filterArr() {
  82. return function (arr, size) {
  83. //判断如果不是数组(就没有length),或者size没有传值,size小于1,就返回空数组
  84. if (!arr.length || !size || size < 1) return []
  85. let [start, end, result] = [null, null, []]
  86. for (let i = 0; i < Math.ceil(arr.length / size); i++) {
  87. start = i * size
  88. end = start + size
  89. result.push(arr.slice(start, end))
  90. }
  91. return result
  92. }
  93. }
  94. },
  95. created(){
  96. if(this.$route.query.id){
  97. this.id = this.$route.query.id
  98. this.formDialogType = 2
  99. this.openForm()
  100. }
  101. },
  102. methods: {
  103. // 切换状态
  104. changeType(val) {
  105. this.$refs.pageRef.refreshList()
  106. },
  107. backList() {
  108. this.id = ''
  109. this.formDialog = false;
  110. this.$refs.pageRef.refreshList()
  111. },
  112. // 列表请求函数
  113. getList(p, cb) {
  114. try {
  115. var pam = JSON.parse(JSON.stringify(p))
  116. pam.params.push({ "param": "a.goods_type", "compare": "=", "value": 'P' }, { 'param': 'a.flag', "compare": "=", "value": this.flag })
  117. cb && cb(pam)
  118. return listPageV2(pam)
  119. } catch (error) {
  120. console.log(error)
  121. }
  122. },
  123. // 列表导出函数
  124. exportList: pageExport,
  125. // 表格列解析渲染数据更改
  126. columnParsing(item, defaultData) {
  127. if (item.jname === 'idCardImg') {
  128. defaultData.render = (h, { row, index, column }) => {
  129. return (
  130. <div style="padding:0 6px;cursor: pointer;">
  131. {row.idCardImg ? row.idCardImg.split(",").map(url => <el-image src={url} preview-src-list={[url]} fit="fit" style="width:80px;height:80px;" />) : null}
  132. </div>
  133. )
  134. }
  135. }
  136. return defaultData
  137. },
  138. // 监听勾选变化
  139. selectionChange(data) {
  140. this.recordSelected = data
  141. },
  142. operation() {
  143. return this.operationBtn({
  144. edit: {
  145. conditions: ({ row, index, column }) => {
  146. return row.flag == 'SAVE'
  147. },
  148. click: ({ row, index, column }) => {
  149. this.id = row.salesId
  150. this.formDialogType = 1
  151. this.openForm()
  152. }
  153. },
  154. detail: {
  155. conditions: ({ row, index, column }) => {
  156. return row.flag != 'SAVE'
  157. },
  158. click: ({ row, index, column }) => {
  159. this.id = row.salesId
  160. this.formDialogType = 2
  161. this.openForm()
  162. }
  163. },
  164. verify: {
  165. conditions: ({ row, index, column }) => {
  166. return row.flag == 'PAY_NOT_TAKE'
  167. },
  168. click: ({ row, index, column }) => {
  169. this.id = row.salesId
  170. this.formDialogType = row.flag == 'SAVE' ? 1 : 2
  171. this.openForm()
  172. }
  173. },
  174. print: {
  175. click: ({ row, index, column }) => {
  176. this.toPrint(row, 2)
  177. }
  178. },
  179. })
  180. },
  181. addData() {
  182. this.formDialogType = 0
  183. this.openForm()
  184. },
  185. openForm() {
  186. this.formDialog = true;
  187. },
  188. getWebsit() {
  189. getWebsit({ type: 'C' }).then(res => {
  190. this.websitList = res.data
  191. })
  192. },
  193. // 点击打印
  194. async toPrint(row, type) {
  195. this.getWebsit()
  196. let pagingData = []
  197. const { data } = await getDetail({
  198. salesId: row.salesId
  199. })
  200. pagingData = this.filterArr(data.items, 4)
  201. // 初始化模板,否则生成的模板叠加
  202. hiprint.init()
  203. this.hiprintTemplate = new hiprint.PrintTemplate()
  204. // 兼容批量打印
  205. // let params = !type ? this.filterArr() : [row.salesId]
  206. let len = pagingData.length
  207. let loadingLen = len
  208. // 使用 i-- 提升for效率
  209. this.$startLoading()
  210. for (let i = 0; i < len; i++) {
  211. try {
  212. let websitHtml = ''
  213. let html = ''
  214. let num = 0
  215. let totalAmount = 0
  216. pagingData[i].forEach(item => {
  217. totalAmount = (Number(item.saleAmount) * 100 + totalAmount * 100) / 100
  218. num += Number(item.salesQty)
  219. html += `
  220. <tr align="center">
  221. <td>${item.goodsName || ''}</td>
  222. <td>${item.goodsSpecification || ''}</td>
  223. <td>${item.goodsSalesUnit || ''}</td>
  224. <td>${item.salesQty || ''}</td>
  225. <td>${item.price || ''}</td>
  226. <td>${item.saleAmount || ''}</td>
  227. <td></td>
  228. <td></td>
  229. </tr>
  230. `
  231. })
  232. this.websitList.slice(0, 5).forEach(item => {
  233. websitHtml += `
  234. <div style="display: flex;font-size: 14px;margin-bottom: 6px;">
  235. <div style="margin-right: 10px;">${item.name}</div>
  236. <div style="margin-right: 10px;">${item.websitPhone}</div>
  237. <div>地址: ${item.address}</div>
  238. </div>
  239. `
  240. })
  241. // 模板基础配置
  242. this.panel = this.hiprintTemplate.addPrintPanel({
  243. height: 140,
  244. width: 241,
  245. fontFamily: '黑体',
  246. fontSize: 13,
  247. paperFooter: 340,
  248. paperHeader: 10,
  249. paperNumberDisabled: true
  250. })
  251. // 获取收款单模板和基础配置
  252. this.panel.addPrintHtml({
  253. options: {
  254. width: 633,
  255. top: 30,
  256. left: 20,
  257. fontFamily: '黑体',
  258. fontSize: 13,
  259. content: this.setTableDom(data, html, websitHtml, totalAmount, num, len, i)
  260. }
  261. })
  262. loadingLen--
  263. } catch (error) {
  264. console.log(999, error)
  265. this.$endLoading()
  266. return
  267. }
  268. }
  269. if (loadingLen === 0) {
  270. this.$endLoading()
  271. }
  272. console.log(333)
  273. // 预览打印内容
  274. this.$refs.preView.show(this.hiprintTemplate, this.panel)
  275. },
  276. // 打印模板
  277. setTableDom(data, html, websitHtml, totalAmount, num, length, page) {
  278. return `
  279. <div style="font-family:'黑体';font-size: 16px;">
  280. <div style="display: flex;justify-content: space-between;align-items: center;">
  281. <div style="width: 28%;"></div>
  282. <h1 style="text-align:center;margin: 10px 0;">${data.websitName}销售单</h1>
  283. <div>共 ${length}页 第 ${page + 1} 页</div>
  284. </div>
  285. <div style="display: flex;justify-content: space-between;">
  286. <div style="width: 28%;"></div>
  287. <div>单据日期: ${data.createTime}</div>
  288. <div>单据编号: ${data.salesId}</div>
  289. </div>
  290. <div style="display: flex;justify-content: space-between;font-size: 16px;margin: 10px 0;">
  291. <div>客户: ${data.workerName}</div>
  292. <div>摘要: ${data.payType == 'CASH' ? '现金' : '微信'}</div>
  293. </div>
  294. <div style="display: flex;justify-content: space-between;font-size: 16px;margin-bottom: 10px;">
  295. <div>联系电话: ${data.workerMobile}</div>
  296. <div>收货地址: </div>
  297. <div style="width: 28%;"></div>
  298. </div>
  299. <div >
  300. <table border=".5" cellspacing="0" width="856"
  301. style="border-color: rgb(0,0,0);
  302. border-collapse: collapse;
  303. border-style: none;
  304. border: 1px solid rgb(0,0,0);
  305. font-weight: normal;
  306. text-decoration: none;
  307. vertical-align: middle;
  308. box-sizing: border-box;
  309. word-wrap: break-word;
  310. word-break: break-all;">
  311. <tr align="center">
  312. <td>商品名称</td>
  313. <td>规格</td>
  314. <td>单位</td>
  315. <td>数量</td>
  316. <td>单价</td>
  317. <td>金额</td>
  318. <td>仓库</td>
  319. <td>备注</td>
  320. </tr>
  321. ${html}
  322. <tr align="center" align="center">
  323. <td>小计: </td>
  324. <td colspan="2"></td>
  325. <td>${num}</td>
  326. <td></td>
  327. <td>${totalAmount}</td>
  328. <td colspan="2">金额总计: ${totalAmount}</td>
  329. </tr>
  330. </table>
  331. </div>
  332. <div style="display: flex;justify-content: space-between;font-size: 16px;margin: 10px 0;">
  333. <div>制单人: ${data.createBy || ''}</div>
  334. <div>审核人: ${data.confirmBy || ''}</div>
  335. <div>业务员: </div>
  336. <div>签收人: </div>
  337. </div>
  338. ${websitHtml}
  339. <div style="margin:100px 0 0 0">
  340. <div></div>
  341. </div>
  342. </div>
  343. `
  344. },
  345. handleRefreshList() {
  346. this.recordSelected = []
  347. this.$refs.pageRef.refreshList()
  348. },
  349. handleInitPrint() {
  350. this.$nextTick(() => {
  351. this.initPrint()
  352. })
  353. },
  354. // 下载导入模版
  355. handleDownload() {
  356. // downloadFiles('charging/standard/download');
  357. },
  358. }
  359. }
  360. </script>
  361. <style lang="scss" scoped>
  362. .page {
  363. height: 100%;
  364. }
  365. .tab {
  366. padding: 20px 20px 0 20px;
  367. }
  368. </style>