detail.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. <template>
  2. <div class="billOfLadingDetail-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="billOfLadingDetail-header" >
  5. <!-- 自定义的二级文字标题 -->
  6. <template slot="subTitle">
  7. <a id="billOfLadingDetail-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
  8. </template>
  9. <!-- 操作区,位于 title 行的行尾 -->
  10. <template slot="extra">
  11. <a-button
  12. key="3"
  13. type="default"
  14. class="button-info"
  15. v-if="$hasPermissions('B_printPickUp')"
  16. id="billOfLadingDetail-preview-btn"
  17. @click="handlePrint('preview')">打印预览</a-button>
  18. <a-button
  19. key="2"
  20. type="primary"
  21. class="button-info"
  22. v-if="$hasPermissions('B_printPickUp')"
  23. id="billOfLadingDetail-print-btn"
  24. @click="handlePrint('print')">快捷打印</a-button>
  25. <a-divider type="vertical" />
  26. <a-button
  27. key="1"
  28. type="default"
  29. class="button-warning"
  30. v-if="$hasPermissions('B_exportPickUp')"
  31. id="billOfLadingDetail-export-btn"
  32. @click="handlePrint('export')">导出Excel</a-button>
  33. </template>
  34. </a-page-header>
  35. <a-form-model
  36. ref="ruleForm"
  37. :model="form"
  38. :rules="rules"
  39. :label-col="formItemLayout.labelCol"
  40. :wrapper-col="formItemLayout.wrapperCol">
  41. <a-card :bordered="false" class="billOfLadingDetail-cont" v-if="form">
  42. <a-row>
  43. <a-col :span="8">
  44. <a-form-model-item style="margin-bottom:0" label="提货单号">
  45. {{ form.pickUpNo||'--' }}
  46. </a-form-model-item>
  47. </a-col>
  48. <a-col :span="8">
  49. <a-form-model-item style="margin-bottom:0" label="创建时间">
  50. {{ form.createDate||'--' }}
  51. </a-form-model-item>
  52. </a-col>
  53. <a-col :span="8">
  54. <a-form-model-item style="margin-bottom:0" label="审核时间">
  55. {{ form.auditDate||'--' }}
  56. </a-form-model-item>
  57. </a-col>
  58. <a-col :span="8">
  59. <a-form-model-item style="margin-bottom:0" label="状态">
  60. {{ form.stateDictValue||'--' }}
  61. </a-form-model-item>
  62. </a-col>
  63. <a-col :span="8">
  64. <a-form-model-item style="margin-bottom:0" label="申请人">
  65. {{ form.applyPersonName||'--' }}
  66. </a-form-model-item>
  67. </a-col>
  68. <a-col :span="8">
  69. <a-form-model-item style="margin-bottom:0" label="主题">
  70. {{ form.theme||'--' }}
  71. </a-form-model-item>
  72. </a-col>
  73. <a-col :span="8">
  74. <a-form-model-item style="margin-bottom:0" label="物流公司">
  75. {{ form.logisticsCompany||'--' }}
  76. </a-form-model-item>
  77. </a-col>
  78. <a-col :span="8">
  79. <a-form-model-item style="margin-bottom:0" label="物流点">
  80. {{ form.logisticsPoint||'--' }}
  81. </a-form-model-item>
  82. </a-col>
  83. <a-col :span="8">
  84. <a-form-model-item style="margin-bottom:0" label="发货方">
  85. {{ form.dealerEntity&&form.dealerEntity.dealerName||'--' }}
  86. </a-form-model-item>
  87. </a-col>
  88. <a-col :span="8">
  89. <a-form-model-item style="margin-bottom:0" label="收货人">
  90. {{ form.receiverName||'--' }}
  91. </a-form-model-item>
  92. </a-col>
  93. <a-col :span="8">
  94. <a-form-model-item style="margin-bottom:0" label="电话">
  95. {{ form.receiverPhone||'--' }}
  96. </a-form-model-item>
  97. </a-col>
  98. <a-col :span="8">
  99. <a-form-model-item style="margin-bottom:0" label="件数">
  100. {{ form.goodsNum||'--' }} 件
  101. </a-form-model-item>
  102. </a-col>
  103. <a-col :span="8">
  104. <a-form-model-item style="margin-bottom:0" label="运费">
  105. {{ form.freight||'--' }}
  106. </a-form-model-item>
  107. </a-col>
  108. <a-col :span="8">
  109. <a-form-model-item style="margin-bottom:0" label="退货仓库" prop="warehouseName">
  110. {{ form.warehouseName||'--' }}
  111. </a-form-model-item>
  112. </a-col>
  113. </a-row>
  114. <a-row>
  115. <a-col :span="16">
  116. <a-form-model-item style="margin-bottom:0" label="备注" prop="size" :label-col="{span:2}" :wrapper-col="{span:22}">
  117. <div style="word-break: break-all;line-height:normal;padding-top:10px;">{{ form.remarks||'--' }}</div>
  118. </a-form-model-item>
  119. </a-col>
  120. <a-col :span="16">
  121. <a-form-model-item style="margin-bottom:10px" label="附件" :label-col="{span:2}" :wrapper-col="{span:22}">
  122. <div style="line-height:26px;">
  123. <div v-for="item in form.attachmentList" :key="item.id">
  124. <a href="javascript:;" @click="openLink(item.filePath)">{{ item.fileName }}</a>
  125. </div>
  126. </div>
  127. </a-form-model-item>
  128. </a-col>
  129. <a-col :span="24">
  130. <a-form-model-item label="关联销退单" :label-col="{span:2}" :wrapper-col="{span:20}">
  131. <a-table :columns="columns" :scroll="{ y: 400 }" :pagination="false" :data-source="chooseData" bordered>
  132. <!-- 编号 -->
  133. <template slot="no" slot-scope="text, record,index">
  134. <span>{{ index+1 }}</span>
  135. </template>
  136. <!-- 单号 -->
  137. <template slot="salesReturnBillNo" slot-scope="text, record">
  138. <span>{{ record.salesReturnBillNo }}</span>
  139. </template>
  140. </a-table>
  141. </a-form-model-item>
  142. </a-col>
  143. <a-col :span="24" v-if="$hasPermissions('B_auditPickUp')&&form.state != 'WAIT_SUBMIT'">
  144. <a-form-model-item label="审核进度" :label-col="{span:2}" :wrapper-col="{span:20}">
  145. <div>以下信息来自钉钉</div>
  146. <s-table
  147. class="sTable fixPagination"
  148. ref="table"
  149. size="small"
  150. :rowKey="(record) => record.id"
  151. :columns="auditColumns"
  152. :data="loadData"
  153. :scroll="{ y: 400 }"
  154. :showPagination="false"
  155. :defaultLoadData="false"
  156. bordered>
  157. </s-table>
  158. </a-form-model-item>
  159. </a-col>
  160. </a-row>
  161. </a-card>
  162. </a-form-model>
  163. </a-spin>
  164. </div>
  165. </template>
  166. <script>
  167. import { commonMixin } from '@/utils/mixin'
  168. import { STable, VSelect, Upload } from '@/components'
  169. import { printFun, exportExcel } from '@/libs/JGPrint.js'
  170. import { pickUpDetail, pickUpDetailQueryList, pickUpExport, pickUpDetailPrint } from '@/api/pickUp'
  171. import { getProcessInstance } from '@/api/expenseManagement'
  172. export default {
  173. name: 'ProductInfoEdit',
  174. mixins: [commonMixin],
  175. components: { VSelect, Upload, STable },
  176. data () {
  177. return {
  178. spinning: false,
  179. showXtModal: false,
  180. formItemLayout: {
  181. labelCol: { span: 4 },
  182. wrapperCol: { span: 16 }
  183. },
  184. form: {
  185. applyPersonSn: undefined, // 申请人
  186. applyPersonName: undefined,
  187. theme: '', // 主题
  188. logisticsCompany: undefined, // 物流公司
  189. logisticsPoint: undefined, // 物流点
  190. senderName: '', // 发货方
  191. senderSn: '',
  192. receiverName: '', // 收货人
  193. receiverPhone: '', // 电话
  194. goodsNum: '', // 件数
  195. freight: '', // 运费
  196. remarks: '',
  197. attachmentList: [] // 附件
  198. },
  199. rules: {},
  200. chooseData: [],
  201. columns: [
  202. { title: '序号', scopedSlots: { customRender: 'no' }, width: '8%', align: 'center' },
  203. { title: '总部销退单号', dataIndex: 'salesReturnBillNo', width: '15%', align: 'center' },
  204. { title: '客户名称', dataIndex: 'buyerName', width: '20%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  205. { title: '申请退货数量', dataIndex: 'totalInitialQty', width: '15%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  206. { title: '审核时间', dataIndex: 'auditTime', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  207. { title: '业务状态', dataIndex: 'billStatusDictValue', width: '15%', align: 'center', customRender: function (text) { return text || '--' } }
  208. ],
  209. auditData: [],
  210. auditColumns: [
  211. { title: '序号', dataIndex: 'no', width: '8%', align: 'center' },
  212. { title: '人员姓名', width: '12%', dataIndex: 'userName', align: 'center', customRender: function (text) { return text || '--' } },
  213. { title: '人员类型', dataIndex: 'userType', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  214. { title: '状态', dataIndex: 'state', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  215. { title: '审批意见', dataIndex: 'remark', width: '20%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  216. { title: '附件', dataIndex: 'hasAttachments', width: '20%', align: 'center', customRender: function (text) { return text != '0' ? '请在钉钉中查看附件内容' : '--' } },
  217. { title: '操作时间', dataIndex: 'date', width: '20%', align: 'center', customRender: function (text) { return text || '--' } }
  218. ],
  219. // 加载数据方法 必须为 Promise 对象
  220. loadData: parameter => {
  221. this.spinning = true
  222. delete parameter.tableId
  223. delete parameter.index
  224. return getProcessInstance({ businessType: 'PICK_UP', businessSn: this.$route.params.sn }).then(res => {
  225. let data
  226. if (res.status == 200) {
  227. data = res.data
  228. const no = 0
  229. for (var i = 0; i < data.length; i++) {
  230. data[i].no = no + i + 1
  231. }
  232. this.disabled = false
  233. } else {
  234. this.isShow = false
  235. return []
  236. }
  237. this.spinning = false
  238. return data
  239. })
  240. }
  241. }
  242. },
  243. methods: {
  244. openLink (url) {
  245. window.open(url)
  246. },
  247. // 打印预览/快捷打印
  248. handlePrint (type) {
  249. const _this = this
  250. const params = { pickUpSn: this.$route.params.sn }
  251. _this.spinning = true
  252. // 导出
  253. if (type == 'export') {
  254. exportExcel(pickUpExport, params, '提货单', function () {
  255. _this.spinning = false
  256. })
  257. } else {
  258. // 打印或预览
  259. printFun(pickUpDetailPrint, params, type, '提货单', () => { _this.spinning = false })
  260. }
  261. },
  262. // 关联销售退货单
  263. getReturnOrderList () {
  264. pickUpDetailQueryList({ pickUpSn: this.$route.params.sn }).then(res => {
  265. this.chooseData = []
  266. res.data.map(item => {
  267. this.chooseData.push(item.salesReturnBillEntity)
  268. })
  269. })
  270. },
  271. // 详情
  272. getDetail () {
  273. this.spinning = true
  274. this.disabled = true
  275. pickUpDetail({ pickUpSn: this.$route.params.sn }).then(res => {
  276. if (res.status == 200) {
  277. const data = res.data
  278. this.form = Object.assign(this.form, data)
  279. if (this.form.state != 'WAIT_SUBMIT') {
  280. this.$refs.table.refresh()
  281. }
  282. } else {
  283. this.$refs.ruleForm.resetFields()
  284. }
  285. this.spinning = false
  286. this.disabled = false
  287. })
  288. },
  289. // 返回
  290. handleBack () {
  291. // this.$router.push({ name: 'billOfLadingList' })
  292. this.$router.go(-1)
  293. },
  294. pageInit () {
  295. this.form = {
  296. applyPersonSn: undefined, // 申请人
  297. applyPersonName: undefined,
  298. theme: '', // 主题
  299. logisticsCompany: undefined, // 物流公司
  300. logisticsPoint: undefined, // 物流点
  301. senderName: '', // 发货方
  302. senderSn: '',
  303. receiverName: '', // 收货人
  304. receiverPhone: '', // 电话
  305. goodsNum: '', // 件数
  306. freight: '', // 运费
  307. remarks: '',
  308. attachmentList: [] // 附件
  309. }
  310. this.$refs.ruleForm.resetFields()
  311. if (this.$route.params.sn) { // 编辑页
  312. this.getDetail()
  313. this.getReturnOrderList()
  314. }
  315. }
  316. },
  317. mounted () {
  318. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  319. this.pageInit()
  320. }
  321. },
  322. activated () {
  323. this.pageInit()
  324. },
  325. beforeRouteEnter (to, from, next) {
  326. next(vm => {})
  327. }
  328. }
  329. </script>
  330. <style lang="less">
  331. .billOfLadingDetail-wrap{
  332. position: relative;
  333. height: 100%;
  334. background-color:#fff;
  335. .billOfLadingDetail-cont{
  336. height:100%;
  337. overflow: auto;
  338. }
  339. .billOfLadingDetail-header{
  340. border-bottom: 6px solid #eee;
  341. }
  342. .affix{
  343. .ant-affix{
  344. z-index: 101;
  345. }
  346. }
  347. }
  348. </style>