inventory-detail.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. <template>
  2. <!-- <el-dialog
  3. title="查看"
  4. width="70%"
  5. :close-on-click-modal="false"
  6. :visible.sync="visible"> -->
  7. <div>
  8. <div class="my-title">查看</div>
  9. <div style="margin-left: 20px;margin-right: 20px">
  10. <!-- 工作流 -->
  11. <div v-show="flowVisible">
  12. <el-steps :active="flowVisible?dataList[0].workFlowBusinessExt.workFlowProcessStepList.length + 2:0" align-center style="margin-bottom: 20px">
  13. <template v-for="(item, i) in stepList">
  14. <el-step :icon="item.icon" :title="item.title" :description="item.description"></el-step>
  15. </template>
  16. </el-steps>
  17. <el-collapse style="margin-bottom: 20px">
  18. <el-collapse-item>
  19. <template slot="title">
  20. <span style="color: red">审批日志(展开查看更多):</span>
  21. </template>
  22. <template v-for="(item, i) in logList">
  23. <div>{{++i}}:{{item.approverName}} {{item.createTime}} {{item.approvalValue}}</div>
  24. </template>
  25. </el-collapse-item>
  26. </el-collapse>
  27. </div>
  28. <div v-show="isFlow">
  29. <approve-component ref="approve" @approveFinished="approveFinished"/>
  30. </div>
  31. <e-desc title="基本信息" column="3">
  32. <e-desc-item label="盘点编码">{{dataForm.inventoryCode}}</e-desc-item>
  33. <e-desc-item label="盘点员">{{dataForm.checkerName}}</e-desc-item>
  34. <e-desc-item label="复核员">{{dataForm.dcheckerName}}</e-desc-item>
  35. <e-desc-item label="备注说明" span="3">{{dataForm.notes}}</e-desc-item>
  36. </e-desc>
  37. <el-row style="margin-top: 20px">
  38. <el-form :inline="true" :model="dataForm1" @keyup.enter.native="queryData()">
  39. <el-form-item label="仓库名称" prop="warehouseId">
  40. <warehouse-component v-model="dataForm1.warehouseId" :warehouse-id="dataForm1.warehouseId" @warehouseSelected="warehouseChanged"/>
  41. </el-form-item>
  42. <el-form-item label="货架名称" prop="shelveId">
  43. <shelve-component ref="shelveCom" v-model="dataForm1.shelveId" :warehouse-id="dataForm1.warehouseId" :shelve-id="dataForm1.shelveId"/>
  44. </el-form-item>
  45. <el-form-item>
  46. <el-button @click="queryData()">查询</el-button>
  47. </el-form-item>
  48. </el-form>
  49. <el-table
  50. :data="dataList"
  51. border
  52. v-loading="dataListLoading"
  53. @selection-change="selectionChangeHandle"
  54. style="width: 100%;">
  55. <el-table-column
  56. label="序号"
  57. type="index"
  58. width="50"
  59. align="center">
  60. </el-table-column>
  61. <el-table-column
  62. prop="warehouseName"
  63. header-align="center"
  64. align="center"
  65. label="仓库名称">
  66. </el-table-column>
  67. <el-table-column
  68. prop="materialName"
  69. header-align="center"
  70. align="center"
  71. min-width="160"
  72. label="物品名称">
  73. </el-table-column>
  74. <el-table-column
  75. prop="specifications"
  76. header-align="center"
  77. align="center"
  78. min-width="160"
  79. label="规格">
  80. </el-table-column>
  81. <el-table-column
  82. prop="unitName"
  83. header-align="center"
  84. align="center"
  85. label="单位">
  86. </el-table-column>
  87. <el-table-column
  88. prop="cnt"
  89. header-align="center"
  90. align="center"
  91. label="仓库库存数量">
  92. </el-table-column>
  93. <el-table-column
  94. prop="inventoryCnt"
  95. header-align="center"
  96. align="center"
  97. label="数量">
  98. </el-table-column>
  99. <el-table-column
  100. prop="inventoryState"
  101. header-align="center"
  102. align="center"
  103. :formatter="formatState"
  104. label="盘库状态">
  105. </el-table-column>
  106. <el-table-column
  107. prop="materialState"
  108. header-align="center"
  109. align="center"
  110. :formatter="formatMs"
  111. label="物品状态">
  112. </el-table-column>
  113. </el-table>
  114. <el-pagination
  115. @size-change="sizeChangeHandle"
  116. @current-change="currentChangeHandle"
  117. :current-page="pageIndex"
  118. :page-sizes="[10, 20, 50, 100]"
  119. :page-size="pageSize"
  120. :total="totalPage"
  121. layout="total, sizes, prev, pager, next, jumper">
  122. </el-pagination>
  123. </el-row>
  124. </div>
  125. <span slot="footer" class="dialog-footer">
  126. <el-button @click="onChose">返回</el-button>
  127. </span>
  128. </div>
  129. <!-- </el-dialog> -->
  130. </template>
  131. <script>
  132. import EDesc from '../common/e-desc'
  133. import EDescItem from '../common/e-desc-item'
  134. import uploadComponent from '../common/upload-component'
  135. import { dealStepData, dealStepLogs } from '@/api/util'
  136. import ApproveComponent from '../common/approve-component'
  137. import {getInventoryDetail} from '@/api/warehouse'
  138. import WarehouseComponent from '../common/warehouse-component'
  139. import ShelveComponent from '../common/shelve-component'
  140. export default {
  141. name: 'inventory-detail',
  142. components: {
  143. EDesc, EDescItem, uploadComponent, ApproveComponent, ShelveComponent, WarehouseComponent
  144. },
  145. data () {
  146. return {
  147. visible: false,
  148. flowVisible: false,
  149. isFlow: false,
  150. id: 0,
  151. dataForm: {},
  152. dataForm1: {},
  153. dataList: [],
  154. fileList: [],
  155. fileList1: [],
  156. stepList: [],
  157. logList: [],
  158. pageIndex: 1,
  159. pageSize: 10,
  160. totalPage: 0,
  161. dataListLoading: false,
  162. dataListSelections: [],
  163. optionsMs: [
  164. {
  165. code: '0',
  166. value: '正常'
  167. },
  168. {
  169. code: '1',
  170. value: '盘点中'
  171. }
  172. ],
  173. optionsState: [
  174. {
  175. code: '0',
  176. value: '正常'
  177. },
  178. {
  179. code: '-1',
  180. value: '盘亏'
  181. },
  182. {
  183. code: '1',
  184. value: '盘盈'
  185. }
  186. ]
  187. }
  188. },
  189. methods: {
  190. onChose () {
  191. this.$emit('onChose')
  192. },
  193. async init (id, businessType) {
  194. this.visible = true
  195. this.isFlow = !!(businessType && businessType !== '')
  196. this.id = id || 0
  197. this.dataForm = {}
  198. this.fileList = []
  199. this.fileList1 = []
  200. this.dataForm1 = {}
  201. // 获取详情
  202. this.queryData(businessType)
  203. },
  204. // 查询
  205. queryData (businessType) {
  206. this.pageIndex = 1
  207. this.stepList = []
  208. this.logList = []
  209. this.getDataList(businessType)
  210. },
  211. // 获取数据列表
  212. getDataList (businessType) {
  213. this.dataListLoading = true
  214. let params = {
  215. 'current': this.pageIndex,
  216. 'size': this.pageSize,
  217. 'inventoryId': this.id,
  218. 'warehouseId': this.dataForm1.warehouseId ? this.dataForm1.warehouseId : null,
  219. 'shelveId': this.dataForm1.shelveId ? this.dataForm1.shelveId : null
  220. }
  221. getInventoryDetail(params).then(({data}) => {
  222. if (data && data.code === '200') {
  223. this.dataList = data.data.records
  224. this.totalPage = Number(data.data.total)
  225. if (this.dataList.length > 0) {
  226. let item = this.dataList[0]
  227. this.dataForm.inventoryCode = item.inventoryCode
  228. this.dataForm.checkerName = item.checkerName
  229. this.dataForm.dcheckerName = item.dcheckerName
  230. this.dataForm.notes = item.notes
  231. // 流程图展示
  232. if (item.workFlowBusinessExt) {
  233. this.flowVisible = true
  234. dealStepData(this.dataList[0].workFlowBusinessExt.workFlowProcessStepList, this.stepList)
  235. dealStepLogs(this.dataList[0].workFlowBusinessExt.processLogList, this.logList)
  236. }
  237. // 初始化审批Form
  238. this.showApproveForm(businessType, this.id)
  239. }
  240. } else {
  241. this.dataList = []
  242. this.totalPage = 0
  243. }
  244. this.dataListLoading = false
  245. })
  246. },
  247. // 每页数
  248. sizeChangeHandle (val) {
  249. this.pageSize = val
  250. this.pageIndex = 1
  251. this.getDataList()
  252. },
  253. // 当前页
  254. currentChangeHandle (val) {
  255. this.pageIndex = val
  256. this.getDataList()
  257. },
  258. // 多选
  259. selectionChangeHandle (val) {
  260. this.dataListSelections = val
  261. },
  262. // 初始化审批Form
  263. showApproveForm (businessType, businessId) {
  264. if (this.isFlow) {
  265. this.$nextTick(() => {
  266. this.$refs.approve.init(businessType, businessId)
  267. })
  268. }
  269. },
  270. // 物品状态转换
  271. formatMs (row) {
  272. for (let i = 0; i < this.optionsMs.length; i++) {
  273. if (this.optionsMs[i].code === row.materialState) {
  274. return this.optionsMs[i].value
  275. }
  276. }
  277. },
  278. // 盘库状态转换
  279. formatState (row) {
  280. for (let i = 0; i < this.optionsState.length; i++) {
  281. if (this.optionsState[i].code === row.inventoryState) {
  282. return this.optionsState[i].value
  283. }
  284. }
  285. },
  286. // 审批完成
  287. approveFinished () {
  288. this.onChose()
  289. this.$emit('approveFinished')
  290. },
  291. warehouseChanged (item) {
  292. this.dataForm1.warehouseId = item
  293. this.$refs.shelveCom.init(item)
  294. }
  295. }
  296. }
  297. </script>
  298. <style scoped>
  299. .my-line{
  300. border-bottom: 1px solid #c0c4cc;
  301. margin-bottom: 10px;
  302. }
  303. .title{
  304. padding: 10px 0 ;
  305. }
  306. </style>