list.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. <template>
  2. <a-card size="small" :bordered="false" class="shelfSetList-wrap jg-page-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <!-- 搜索条件 -->
  5. <div ref="tableSearch" class="table-page-search-wrapper">
  6. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  7. <a-row :gutter="15">
  8. <a-col :md="6" :sm="24">
  9. <a-form-item label="货架名称">
  10. <shelfSList v-model="queryParam.shelfSn" id="shelfSetList-shelfName"></shelfSList>
  11. </a-form-item>
  12. </a-col>
  13. <a-col :md="6" :sm="24">
  14. <a-form-item label="关联客户">
  15. <custList ref="custList" id="shelfSetList-custList" @change="custChange" :isEnabled="true"></custList>
  16. </a-form-item>
  17. </a-col>
  18. <!-- <a-col :md="6" :sm="24">
  19. <a-form-item label="是否设置完成">
  20. <v-select
  21. v-model="queryParam.finishFlag"
  22. ref="finishFlag"
  23. id="shelfSetList-finishFlag"
  24. code="FLAG"
  25. placeholder="请选择"
  26. allowClear></v-select>
  27. </a-form-item>
  28. </a-col> -->
  29. <a-col :md="6" :sm="24" style="margin-bottom: 10px">
  30. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="shelfSetList-refresh">查询</a-button>
  31. <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="shelfSetList-reset">重置</a-button>
  32. </a-col>
  33. </a-row>
  34. </a-form>
  35. </div>
  36. <!-- 提示 -->
  37. <a-alert type="info" style="margin-bottom: 10px">
  38. <div slot="message">注意:只有当数字货架的“是否设置完成”为"是",修理厂才能正常下单。</div>
  39. </a-alert>
  40. <!-- 列表 -->
  41. <s-table
  42. class="sTable fixPagination"
  43. ref="table"
  44. :style="{ height: tableHeight+84.5+'px' }"
  45. size="small"
  46. :rowKey="(record) => record.id"
  47. :columns="columns"
  48. :data="loadData"
  49. :scroll="{ y: tableHeight }"
  50. :defaultLoadData="false"
  51. bordered>
  52. <!-- 货架名称 -->
  53. <template slot="shelfName" slot-scope="text, record">
  54. {{ record.shelfName }}
  55. <a-badge count="已注销" :number-style="{ zoom:'80%',marginLeft:'5px', color: '#fff',background:'#999' }" v-if="record.state=='WRITE_OFF'"></a-badge>
  56. <a-badge count="已暂停" :number-style="{ zoom:'80%',marginLeft:'5px', color: '#fff',background:'#999' }" v-if="record.state=='SUSPEND'"></a-badge>
  57. </template>
  58. <!-- 货位数量 -->
  59. <template slot="shelfPlaceNum" slot-scope="text, record">
  60. <p style="margin: 0;">
  61. <span style="color: red;">
  62. {{ record.shelfPlaceBindNum||record.shelfPlaceBindNum==0 ? record.shelfPlaceBindNum:'' }}</span> /
  63. {{ record.shelfPlaceNum }}
  64. </p>
  65. </template>
  66. <!-- 是否设置完成 -->
  67. <!-- <template slot="finishFlag" slot-scope="text, record">
  68. <a-switch
  69. checkedChildren="是"
  70. unCheckedChildren="否"
  71. :disabled="record.state=='WRITE_OFF'||record.state=='SUSPEND'"
  72. v-if="record.finishFlag!=undefined"
  73. @change="changeStatus(record)"
  74. :checked="record.finishFlag == 1"
  75. :id="'shelfSetList-finishFlag-'+record.id"
  76. />
  77. <span v-else :style="{ color: record.finishFlag == 1 ? '#00aa00' : '#999' }">
  78. {{ record.finishFlag == 1 ? '是' : (record.finishFlag!=undefined?'否':'--') }}
  79. </span>
  80. </template> -->
  81. <!-- 启用禁用 -->
  82. <template slot="enableFlag" slot-scope="text, record">
  83. <a-switch
  84. checkedChildren="启用"
  85. unCheckedChildren="停用"
  86. :disabled="record.state=='WRITE_OFF'||record.state=='SUSPEND'"
  87. v-if="$hasPermissions('B_shelfSet_enable')&&record.state!=undefined"
  88. @change="enableShelf(record)"
  89. :checked="record.state == 'ENABLE'"
  90. :id="'shelfSetList-state-'+record.id"
  91. />
  92. <span v-else :style="{ color: record.state == 'ENABLE' ? '#00aa00' : '#999' }">
  93. {{ record.state == 'ENABLE' ? '启用' : (record.state!=undefined&&record.state!='WRITE_OFF'&&record.state!='SUSPEND'?'停用':'--') }}
  94. </span>
  95. </template>
  96. <!-- 操作 -->
  97. <template slot="action" slot-scope="text, record">
  98. <div>
  99. <a-button
  100. id="shelfSetList-setView"
  101. size="small"
  102. type="link"
  103. class="button-primary"
  104. @click="handleSet(record)">{{ record.state!='WRITE_OFF'&&record.state!='SUSPEND'?'货架设置':'查看' }}</a-button>
  105. <a-button
  106. :id="'shelfSetList-cancel-'+record.id"
  107. size="small"
  108. type="link"
  109. class="button-primary"
  110. v-if="$hasPermissions('B_shelfSet_logout')&&record.state!='WRITE_OFF'&&record.state!='SUSPEND'"
  111. @click="handleCancel(record)">注销</a-button>
  112. </div>
  113. </template>
  114. </s-table>
  115. </a-spin>
  116. <!-- 基础设置 -->
  117. <basic-info-modal :type="0" :openModal="openModal" :nowData="nowData" @ok="handleOkToSet" @close="openModal=false" />
  118. <a-modal
  119. centered
  120. class="common-modal"
  121. :footer="null"
  122. :maskClosable="false"
  123. v-model="showTip"
  124. title="注销"
  125. @cancel="showTip=false"
  126. :width="416">
  127. <div style="text-align:center;">
  128. <div style="font-size:16px;">是否注销该数字货架?</div>
  129. <div style="font-size:14px;">点击确定,该数字货架就不可做任何操作,用户不可登陆</div>
  130. <div style="font-size:12px;color:#999;margin-top:10px;">如需要迁移该数字货架的数据,可去货架设置中导出货架信息</div>
  131. </div>
  132. <div class="btn-box" style="display: flex;align-items: center;justify-content: center;margin-top:25px;">
  133. <a-button id="shelfSetList-handle-ok" type="primary" @click="handleCommonOk">确定</a-button>
  134. <a-button id="shelfSetList-handle-cancel" type="default" class="button-warning" @click="showTip=false">取消</a-button>
  135. </div>
  136. </a-modal>
  137. </a-card>
  138. </template>
  139. <script>
  140. import { commonMixin } from '@/utils/mixin'
  141. import { STable, VSelect } from '@/components'
  142. import custList from '@/views/common/custList.vue' // 客户列表组件
  143. import shelfSList from '@/views/common/shelfList' // 货架列表组件
  144. import basicInfoModal from './basicInfoModal.vue' // 基本信息弹框
  145. import commonModal from '@/views/common/commonModal.vue' // 公共弹框
  146. import { shelfList, modifFinishFlag, shelfModifState } from '@/api/shelf' // 接口api
  147. export default {
  148. components: { STable, VSelect, custList, shelfSList, basicInfoModal, commonModal },
  149. mixins: [commonMixin],
  150. data () {
  151. return {
  152. spinning: false, // loading
  153. tableHeight: 0, // 表格高度
  154. disabled: false, // 查询、重置按钮是否可操作
  155. showTip: false, // 注销弹框
  156. queryParam: {
  157. shelfSn: undefined, // 货架sn
  158. customerSn: undefined, // 关联客户sn
  159. customerEntity: { // 关联客户名称
  160. customerName: undefined
  161. }
  162. },
  163. // 列定义
  164. columns: [
  165. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  166. { title: '货架名称', scopedSlots: { customRender: 'shelfName' }, width: '25%', align: 'left', ellipsis: true },
  167. { title: '关联客户', dataIndex: 'customerEntity.customerName', width: '25%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  168. { title: '货位数量', scopedSlots: { customRender: 'shelfPlaceNum' }, width: '15%', align: 'center' },
  169. // { title: '是否设置完成', scopedSlots: { customRender: 'finishFlag' }, width: '10%', align: 'center' },
  170. { title: '启用状态', scopedSlots: { customRender: 'enableFlag' }, width: '10%', align: 'center' },
  171. { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' }
  172. ],
  173. // 加载数据方法 必须为 Promise 对象
  174. loadData: parameter => {
  175. this.disabled = true
  176. this.spinning = true
  177. return shelfList(Object.assign(parameter, this.queryParam)).then(res => {
  178. let data
  179. if (res.status == 200) {
  180. data = res.data
  181. const no = (data.pageNo - 1) * data.pageSize
  182. for (var i = 0; i < data.list.length; i++) {
  183. data.list[i].no = no + i + 1
  184. }
  185. this.disabled = false
  186. }
  187. this.spinning = false
  188. return data
  189. })
  190. },
  191. openModal: false, // 新增编辑弹框
  192. nowData: null // 当前操作行数据
  193. }
  194. },
  195. methods: {
  196. // 设置/修改
  197. handleSet (row) {
  198. // 如果有关联客户跳转到设置页面
  199. if (row.customerSn) {
  200. this.handleOkToSet(row)
  201. } else {
  202. // 否则打开编辑弹框
  203. this.nowData = {
  204. shelfSn: row.shelfSn,
  205. shelfName: row.shelfName
  206. }
  207. this.openModal = true
  208. }
  209. },
  210. // 跳转到货架设置页面
  211. handleOkToSet (data) {
  212. this.$router.push({ path: `/numsGoodsShelves/shelfSet/set/${data.shelfSn}` })
  213. },
  214. // 选择关联客户
  215. custChange (obj, row) {
  216. if (row) {
  217. this.queryParam.customerSn = row && row.customerSn || undefined
  218. this.queryParam.customerEntity.customerName = undefined
  219. } else {
  220. this.queryParam.customerEntity.customerName = obj || undefined
  221. this.queryParam.customerSn = undefined
  222. }
  223. },
  224. // // 是否设置完成更改
  225. // changeStatus (record) {
  226. // const params = {
  227. // shelfSn: record.shelfSn,
  228. // finishFlag: record.finishFlag == 1 ? '0' : '1'
  229. // }
  230. // this.spinning = true
  231. // modifFinishFlag(params).then(res => {
  232. // if (res.status == 200) {
  233. // this.$message.success(res.message)
  234. // this.$refs.table.refresh()
  235. // this.spinning = false
  236. // } else {
  237. // this.spinning = false
  238. // }
  239. // })
  240. // },
  241. // 启用禁用
  242. enableShelf (record) {
  243. const params = {
  244. shelfSn: record.shelfSn,
  245. state: record.state == 'ENABLE' ? 'DISABLED' : 'ENABLE'
  246. }
  247. const _this = this
  248. _this.$confirm({
  249. title: '提示',
  250. content: <div style="text-align:center;">是否{(record.state == 'ENABLE' ? '停用' : '启用') + record.shelfName}</div>,
  251. centered: true,
  252. closable: true,
  253. class: 'confirm-center',
  254. onOk () {
  255. _this.updateState(params)
  256. }
  257. })
  258. },
  259. // 打开注销弹框
  260. handleCancel (record) {
  261. this.nowData = {
  262. shelfSn: record.shelfSn,
  263. state: 'WRITE_OFF'
  264. }
  265. this.showTip = true
  266. },
  267. // 确定注销
  268. handleCommonOk () {
  269. this.updateState(this.nowData)
  270. },
  271. // 更改货架状态
  272. updateState (params) {
  273. this.spinning = true
  274. shelfModifState(params).then(res => {
  275. if (res.status == 200) {
  276. this.$message.success(res.message)
  277. this.$refs.table.refresh()
  278. this.spinning = false
  279. } else {
  280. this.spinning = false
  281. }
  282. this.showTip = false
  283. })
  284. },
  285. // 重置列表查询
  286. resetSearchForm () {
  287. this.queryParam.shelfSn = undefined
  288. this.queryParam.customerSn = undefined
  289. this.queryParam.customerEntity.customerName = undefined
  290. this.$refs.custList.resetForm()
  291. this.$refs.table.refresh(true)
  292. },
  293. // 计算表格高度
  294. setTableH () {
  295. const tableSearchH = this.$refs.tableSearch.offsetHeight
  296. this.tableHeight = window.innerHeight - tableSearchH - 235
  297. },
  298. // 初始化页面
  299. pageInit () {
  300. const _this = this
  301. this.$nextTick(() => { // 页面渲染完成后的回调
  302. _this.setTableH()
  303. })
  304. }
  305. },
  306. mounted () {
  307. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  308. this.pageInit()
  309. this.resetSearchForm()
  310. }
  311. },
  312. watch: {
  313. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  314. this.setTableH()
  315. }
  316. },
  317. activated () {
  318. // 如果是新页签打开,则重置当前页面
  319. if (this.$store.state.app.isNewTab) {
  320. this.pageInit()
  321. this.resetSearchForm()
  322. }
  323. // 仅刷新列表,不重置页面
  324. if (this.$store.state.app.updateList) {
  325. this.pageInit()
  326. this.$refs.table.refresh()
  327. }
  328. }
  329. }
  330. </script>