apply_detail.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <template>
  2. <div class="detail-container">
  3. <div v-show="!isShowPrint">
  4. <el-page-header @back="goBack" content="详情"></el-page-header>
  5. <div class="main-title">
  6. <div class="title">发货申请单信息</div>
  7. </div>
  8. <div class="diy-table-1">
  9. <el-row>
  10. <el-col :span="8" class="item">
  11. <div class="label">发货申请单号</div>
  12. <div class="value">{{detailData.id}}</div>
  13. </el-col>
  14. <el-col :span="8" class="item">
  15. <div class="label">申请日期</div>
  16. <div class="value">{{detailData.createTime}}</div>
  17. </el-col>
  18. <el-col :span="8" class="item">
  19. <div class="label">单据状态</div>
  20. <div class="value">{{detailData.examineStatus | statusFilter}}</div>
  21. </el-col>
  22. <el-col :span="8" class="item">
  23. <div class="label">经销商编号</div>
  24. <div class="value">{{detailData.customerNumber}}</div>
  25. </el-col>
  26. <el-col :span="16" class="item">
  27. <div class="label">经销商名称</div>
  28. <div class="value">{{detailData.customerName}}</div>
  29. </el-col>
  30. <el-col :span="8" class="item">
  31. <div class="label">仓库</div>
  32. <div class="value">{{detailData.correspondName}}</div>
  33. </el-col>
  34. <el-col :span="16" class="item">
  35. <div class="label">备注</div>
  36. <div class="value">{{detailData.remark}}</div>
  37. </el-col>
  38. <el-col :span="24" class="item file">
  39. <div class="label">附件</div>
  40. <div class="value">
  41. <div class="file-list" v-if="detailData.fileUrl">
  42. <div class="file-item">
  43. <el-image v-if="checkFileType(detailData.fileUrl) == 'image'" class="img" :src="imageURL + detailData.fileUrl" :preview-src-list="[imageURL + detailData.fileUrl]"></el-image>
  44. <div v-else class="box2" @click="openLink(detailData.fileUrl)">
  45. <img src="@/assets/common/word.png" v-if="checkFileType(detailData.fileUrl) == 'word'" />
  46. <img src="@/assets/common/excel.png" v-if="checkFileType(detailData.fileUrl) == 'excel'" />
  47. <img src="@/assets/common/ppt.png" v-if="checkFileType(detailData.fileUrl) == 'ppt'" />
  48. <img src="@/assets/common/pdf.png" v-if="checkFileType(detailData.fileUrl) == 'pdf'" />
  49. <div class="name ellipsis-3">{{ detailData.fileName }}</div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </el-col>
  55. <el-col :span="6" class="item">
  56. <div class="label">制单人</div>
  57. <div class="value">{{detailData.createBy}}</div>
  58. </el-col>
  59. <el-col :span="6" class="item">
  60. <div class="label">制单日期</div>
  61. <div class="value">{{detailData.createTime}}</div>
  62. </el-col>
  63. <el-col :span="6" class="item">
  64. <div class="label">审核人</div>
  65. <div class="value">{{detailData.approvalName}}</div>
  66. </el-col>
  67. <el-col :span="6" class="item">
  68. <div class="label">审核日期</div>
  69. <div class="value">{{detailData.approvalTime}}</div>
  70. </el-col>
  71. <el-col :span="24" class="item">
  72. <div class="label">审批说明</div>
  73. <div class="value">{{detailData.approvalRemark}}</div>
  74. </el-col>
  75. </el-row>
  76. </div>
  77. <div class="main-title">
  78. <div class="title">货品信息</div>
  79. </div>
  80. <div class="table" style="margin-top: 20px">
  81. <el-table :data="detailData.orders" element-loading-text="Loading" border fit highlight-current-row stripe max-height="400">
  82. <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
  83. <el-table-column align="center" label="销售类型" prop="saleTypeName" min-width="100" show-overflow-tooltip></el-table-column>
  84. <el-table-column align="center" label="销售订单号" prop="mainOrderId" min-width="140" show-overflow-tooltip></el-table-column>
  85. <el-table-column align="center" label="物料编码" prop="materialCode" min-width="120" show-overflow-tooltip></el-table-column>
  86. <el-table-column align="center" label="产品编码" prop="materialOldNumber" min-width="120" show-overflow-tooltip></el-table-column>
  87. <el-table-column align="center" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip></el-table-column>
  88. <el-table-column align="center" label="规格型号" prop="specification" min-width="160" show-overflow-tooltip></el-table-column>
  89. <el-table-column align="center" label="计量单位" prop="unit" min-width="100" show-overflow-tooltip></el-table-column>
  90. <el-table-column align="center" label="申请数量" prop="invoiceNum" min-width="100" show-overflow-tooltip></el-table-column>
  91. <el-table-column align="center" label="审批数量" prop="approvalNumber" min-width="100" show-overflow-tooltip></el-table-column>
  92. <el-table-column align="center" label="已退数量" prop="retiredQty" min-width="100" show-overflow-tooltip></el-table-column>
  93. <el-table-column align="center" label="备注" prop="remark" min-width="160" show-overflow-tooltip></el-table-column>
  94. </el-table>
  95. </div>
  96. <div v-if="isExamine">
  97. <div class="main-title">
  98. <div class="title">审批记录</div>
  99. </div>
  100. <div class="diy-table-1">
  101. <el-row :gutter="0">
  102. <el-col :span="12" class="item">
  103. <div class="label">审批人</div>
  104. <div class="value">{{detailData.approvalName}}</div>
  105. </el-col>
  106. <el-col :span="12" class="item">
  107. <div class="label">审批结果</div>
  108. <div class="value">{{detailData.examineStatus | statusFilter}}</div>
  109. </el-col>
  110. <el-col :span="24" class="item">
  111. <div class="label">审批说明</div>
  112. <div class="value">{{detailData.approvalRemark}}</div>
  113. </el-col>
  114. </el-row>
  115. </div>
  116. </div>
  117. <div class="page-footer">
  118. <div class="footer">
  119. <el-button type="primary" icon="el-icon-printer" @click="toPrint" :disabled="detailData.examineStatus !== 'OK'">打 印</el-button>
  120. <el-popconfirm title="确定关闭吗?" @onConfirm="goBack" style="margin-left: 10px;">
  121. <el-button slot="reference">关 闭</el-button>
  122. </el-popconfirm>
  123. </div>
  124. </div>
  125. </div>
  126. <CommonPrint :printId="printId" :printType="printType" v-if="isShowPrint" @backDetail="backDetail" />
  127. </div>
  128. </template>
  129. <script>
  130. import { getApplyDetail } from "@/api/supply/apply";
  131. import { getFileUrl } from '@/api/common';
  132. import CommonPrint from "@/views/supply/deliver/components/common_print";
  133. export default {
  134. name: 'ApplyDetail',
  135. componentName: 'ApplyDetail',
  136. props: ['listItem'],
  137. components: {
  138. CommonPrint,
  139. },
  140. filters: {
  141. statusFilter(val) {
  142. const statusList = [
  143. { label: '已保存', value: 'SAVE' },
  144. { label: '待审核', value: 'WAIT' },
  145. { label: '审核通过', value: 'OK' },
  146. { label: '审核驳回', value: 'FAIL' },
  147. { label: '已关闭', value: 'CLOSE' },
  148. ];
  149. let obj = statusList.find(o => o.value == val);
  150. return obj ? obj.label : ''
  151. }
  152. },
  153. data() {
  154. return {
  155. imageURL: this.$imageUrl,
  156. detailData: {},
  157. printType: 1,
  158. printId: '',
  159. isShowPrint: false,
  160. }
  161. },
  162. computed: {
  163. isExamine() {
  164. return this.detailData.examineStatus === 'OK' || this.detailData.examineStatus === "FAIL"
  165. },
  166. },
  167. created() {
  168. this.getDetail();
  169. },
  170. methods: {
  171. // 返回列表
  172. goBack() {
  173. this.$emit('backListFormDetail');
  174. },
  175. // 获取详情
  176. getDetail() {
  177. getApplyDetail({id: this.listItem.id}).then(res => {
  178. this.detailData = res.data;
  179. })
  180. },
  181. // 检查文件类型
  182. checkFileType(url) {
  183. if(!url) return '';
  184. const fileSuffix = url.substring(url.lastIndexOf(".") + 1);
  185. if (['jpg', 'jpeg', 'png'].includes(fileSuffix)) {
  186. return 'image';
  187. }else if (['doc', 'docx', 'dot', 'wps', 'wpt'].includes(fileSuffix)) {
  188. return 'word';
  189. }else if(['xls', 'xlsx', 'xlt', 'et', 'ett'].includes(fileSuffix)) {
  190. return 'excel';
  191. }else if(['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'].includes(fileSuffix)) {
  192. return 'ppt';
  193. }else if(['pdf'].includes(fileSuffix)) {
  194. return 'pdf';
  195. }else {
  196. return '';
  197. }
  198. },
  199. // 打开链接
  200. openLink(url) {
  201. getFileUrl({key: url}).then(res => {
  202. window.open(res.data);
  203. })
  204. },
  205. // 点击打印
  206. toPrint() {
  207. this.printId = this.listItem.id;
  208. this.isShowPrint = true;
  209. },
  210. backDetail() {
  211. this.printId = '';
  212. this.isShowPrint = false;
  213. },
  214. }
  215. }
  216. </script>
  217. <style scoped lang="scss">
  218. .detail-container {
  219. width: 100%;
  220. height: 100%;
  221. }
  222. .main-title {
  223. display: flex;
  224. justify-content: space-between;
  225. align-items: center;
  226. margin-top: 20px;
  227. height: 60px;
  228. border-bottom: 1px solid #DCDFE6;
  229. margin-bottom: 20px;
  230. .title {
  231. font-size: 16px;
  232. font-weight: 600;
  233. padding-left: 10px;
  234. }
  235. }
  236. </style>