goodsAllocationSet.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. <template>
  2. <div class="goodsAllocationSet-page">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="goodsAllocationSet-baseInfo">
  5. <template slot="subTitle">
  6. <a href="javascript:;" @click="handleBack" id="goodsAllocationSet-handleBack">
  7. <a-icon type="left"></a-icon> 返回列表
  8. </a>
  9. <span style="margin: 0 15px;color: #666;font-weight: bold;">{{ pageInfo&&pageInfo.shelfName?pageInfo.shelfName:'--' }}</span>
  10. </template>
  11. </a-page-header>
  12. <a-card :bordered="false" size="small" class="goodsAllocationSet-baseInfo">
  13. <a-collapse :activeKey="['1']">
  14. <a-collapse-panel key="1" header="基础信息">
  15. <a-descriptions size="small" :column="3">
  16. <a-descriptions-item label="配件经销商">{{ pageInfo&&pageInfo.dealerName?pageInfo.dealerName:'--' }}</a-descriptions-item>
  17. <a-descriptions-item label="汽车修理厂">{{ pageInfo&&pageInfo.storeName?pageInfo.storeName:'--' }}</a-descriptions-item>
  18. <a-descriptions-item label="货架归属">{{ pageInfo&&pageInfo.ownerType==0?'自有':'平台' }}</a-descriptions-item>
  19. <a-descriptions-item label="货架图片" v-if="pageInfo&&pageInfo.ownerType==0">
  20. <div v-if="pageInfo && images&&images.length>0">
  21. <img :src="images[0]|| ''" width="30" height="30" class="imageUrl" @click="inited(images)" /> {{ '共'+images?images.length+'张':'' }}
  22. </div>
  23. <span v-else>--</span>
  24. </a-descriptions-item>
  25. <a-descriptions-item label="备注">{{ pageInfo&&pageInfo.remarks?pageInfo.remarks:'--' }}</a-descriptions-item>
  26. </a-descriptions>
  27. </a-collapse-panel>
  28. </a-collapse>
  29. </a-card>
  30. <a-card :bordered="false" size="small" class="pages-wrap">
  31. <div class="goodsAllocationSet-baseInfo">
  32. <a-button id="goodsAllocationSet-addHW" @click="pageInfo&&pageInfo.state=='NOT_ENABLE'? addHW(0,pageInfo):addHW(1,pageInfo)" type="primary">{{ pageInfo&&pageInfo.state=='NOT_ENABLE'? '批量导入货位':'新增货位' }}</a-button>
  33. </div>
  34. <a-table
  35. class="sTable fixPagination"
  36. ref="table"
  37. size="small"
  38. :pagination="false"
  39. :columns="pageInfo&&pageInfo.state=='NOT_ENABLE'?columns:columnsDat"
  40. :data-source="loadData"
  41. bordered>
  42. <template slot="status" slot-scope="text, record">
  43. <a-button size="small" type="link" id="goodsAllocationSet-handleEdit" @click="handleEdit(record)" v-if=" !record.shelfProductEntity">编辑</a-button>
  44. <a-button size="small" type="link" id="goodsAllocationSet-handleDel" @click="handleDel(record)" v-if=" !record.shelfProductEntity">删除</a-button>
  45. <span v-if="record.shelfProductEntity" style="display: inline-block;padding-left: 7px;">--</span>
  46. <!-- <span v-if="!($hasPermissions('B_powerMD_user_edit') && record.superAdmin!=1) && !(record.loginFlag==1 && record.ownerOrgFlag==1 && $hasPermissions('B_powerMD_user_restPwd')) && !(record.loginFlag==0 && record.ownerOrgFlag==1 && $hasPermissions('B_powerMD_user_del'))">--</span> -->
  47. </template>
  48. </a-table>
  49. </a-card>
  50. <!-- 导入货位模板 -->
  51. <importHuoweiModal :openModal="openModal" @close="openModal=false" @refresh="getHwList" :shelfSn="shelfSn" @ok="handleOk"></importHuoweiModal>
  52. <!-- 新增货位 -->
  53. <addHWModal :openHWModal="openHWModal" @refresh="getHwList" :shelfSn="shelfSn" :nowData="itemData" @close="openHWModal=false"></addHWModal>
  54. </a-spin>
  55. </div>
  56. </template>
  57. <script>
  58. import {
  59. STable
  60. } from '@/components'
  61. import { shelfDetail, shelfHWList, delHw } from '@/api/shelf.js'
  62. import importHuoweiModal from './importHuoweiModal.vue'
  63. import addHWModal from './addHWModal.vue'
  64. export default {
  65. components: {
  66. STable, importHuoweiModal, addHWModal },
  67. data () {
  68. return {
  69. spinning: false,
  70. openModal: false, // 货位模板弹窗初始状态(批量导入)
  71. openHWModal: false, // 新增货位初始弹窗
  72. pageInfo: null,
  73. itemData: null,
  74. shelfSn: '', // 货架sn
  75. images: [], // 货架图片
  76. // 表头
  77. columns: [{
  78. title: '序号',
  79. width: '4%',
  80. align: 'center',
  81. customRender: function (text, record, index) {
  82. return index + 1
  83. }
  84. },
  85. {
  86. title: '货位号',
  87. dataIndex: 'shelfPlaceCode',
  88. width: '11%',
  89. align: 'center',
  90. customRender: function (text) {
  91. return text || '--'
  92. }
  93. },
  94. {
  95. title: '创建时间',
  96. dataIndex: 'createDate',
  97. width: '13%',
  98. align: 'center',
  99. customRender: function (text) {
  100. return text || '--'
  101. }
  102. },
  103. {
  104. title: '最后修改时间',
  105. dataIndex: 'updateDate',
  106. width: '18%',
  107. align: 'center',
  108. customRender: function (text) {
  109. return text || '--'
  110. },
  111. ellipsis: true
  112. },
  113. {
  114. title: '操作',
  115. width: '9%',
  116. align: 'left',
  117. scopedSlots: {
  118. customRender: 'status'
  119. }
  120. }
  121. ],
  122. columnsDat: [
  123. {
  124. title: '序号',
  125. width: '4%',
  126. align: 'center',
  127. customRender: function (text, record, index) {
  128. return index + 1
  129. }
  130. },
  131. {
  132. title: '货位号',
  133. dataIndex: 'shelfPlaceCode',
  134. width: '11%',
  135. align: 'center',
  136. customRender: function (text) {
  137. return text || '--'
  138. }
  139. },
  140. {
  141. title: '绑定产品编码',
  142. dataIndex: 'shelfProductEntity.productCode',
  143. width: '10%',
  144. align: 'center',
  145. customRender: function (text) {
  146. return text || ''
  147. }
  148. },
  149. {
  150. title: '绑定产品',
  151. dataIndex: 'shelfProductEntity.productName',
  152. width: '16%',
  153. align: 'left',
  154. customRender: function (text) {
  155. return text || ''
  156. }
  157. },
  158. {
  159. title: '创建时间',
  160. dataIndex: 'createDate',
  161. width: '18%',
  162. align: 'center',
  163. customRender: function (text) {
  164. return text || '--'
  165. },
  166. ellipsis: true
  167. },
  168. {
  169. title: '操作',
  170. width: '9%',
  171. align: 'left',
  172. scopedSlots: {
  173. customRender: 'status'
  174. }
  175. }
  176. ],
  177. loadData: []
  178. }
  179. },
  180. methods: {
  181. handleBack () {
  182. this.$router.go(-1)
  183. },
  184. // 查看图片
  185. inited (viewer) {
  186. if (viewer) {
  187. const imageUrl = []
  188. viewer.map(item => {
  189. imageUrl.push(item)
  190. })
  191. this.$viewerApi({
  192. images: imageUrl
  193. })
  194. }
  195. },
  196. // 导入或新增
  197. addHW (type, val) {
  198. console.log(type, val, '=========val')
  199. this.shelfSn = val.shelfSn
  200. if (type == 0) {
  201. this.openModal = true
  202. } else {
  203. this.itemData = null
  204. this.openHWModal = true
  205. }
  206. },
  207. // 获取货位列表
  208. getHwList () {
  209. this.spinning = true
  210. shelfHWList(Object.assign({ shelfSn: this.$route.params.shelfSn, shelfProductEntity: {} })).then(res => {
  211. if (res.status == 200) {
  212. this.loadData = res.data
  213. }
  214. this.spinning = false
  215. })
  216. },
  217. // 删除
  218. handleDel (row) {
  219. const _this = this
  220. this.$confirm({
  221. title: '警告',
  222. content: '删除后无法恢复,确认删除?',
  223. centered: true,
  224. onOk () {
  225. _this.spinning = true
  226. delHw({
  227. shelfPlaceSn: row.shelfPlaceSn
  228. }).then(res => {
  229. if (res.status == 200) {
  230. _this.$message.success(res.message)
  231. _this.getHwList()
  232. }
  233. _this.spinning = false
  234. })
  235. }
  236. })
  237. },
  238. // 编辑
  239. handleEdit (row) {
  240. // this.shelfPlaceSn = row.shelfPlaceSn
  241. this.shelfSn = row.shelfSn
  242. this.itemData = row
  243. this.openHWModal = true
  244. },
  245. // 货架详情
  246. getShelfDetail () {
  247. this.spinning = true
  248. shelfDetail({
  249. shelfSn: this.$route.params.shelfSn
  250. }).then(res => {
  251. if (res.status == 200) {
  252. this.pageInfo = Object.assign({}, res.data)
  253. if (res.data.ownerType == 0 && res.data.images) {
  254. this.images = res.data.images.split(',')
  255. }
  256. } else {
  257. this.pageInfo = null
  258. }
  259. this.spinning = false
  260. })
  261. },
  262. // 货位导入成功
  263. handleOk (obj) {
  264. console.log(obj, 'obj')
  265. this.getHwList()
  266. },
  267. pageInit () {
  268. this.getShelfDetail()
  269. this.getHwList()
  270. }
  271. },
  272. mounted () {
  273. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  274. this.pageInit()
  275. }
  276. },
  277. activated () {
  278. // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
  279. if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
  280. this.pageInit()
  281. }
  282. },
  283. beforeRouteEnter (to, from, next) {
  284. next(vm => {})
  285. }
  286. }
  287. </script>
  288. <style lang="less">
  289. .goodsAllocationSet-page {
  290. position: relative;
  291. height: 100%;
  292. padding-bottom: 51px;
  293. box-sizing: border-box;
  294. .goodsAllocationSet-baseInfo {
  295. margin-bottom: 10px;
  296. }
  297. }
  298. </style>