list.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  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="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 id="shelfSetList-setView" size="small" type="link" class="button-primary" @click="handleSet(record)">{{ record.state!='WRITE_OFF'&&record.state!='SUSPEND'?'货架设置':'查看' }}</a-button>
  100. <a-button
  101. :id="'shelfSetList-cancel-'+record.id"
  102. size="small"
  103. type="link"
  104. class="button-primary"
  105. v-if="record.state!='WRITE_OFF'&&record.state!='SUSPEND'"
  106. @click="handleCancel(record)">注销</a-button>
  107. </div>
  108. </template>
  109. </s-table>
  110. </a-spin>
  111. <!-- 基础设置 -->
  112. <basic-info-modal :type="0" :openModal="openModal" :nowData="nowData" @ok="handleOkToSet" @close="openModal=false" />
  113. <a-modal
  114. centered
  115. class="common-modal"
  116. :footer="null"
  117. :maskClosable="false"
  118. v-model="showTip"
  119. title="注销"
  120. @cancel="showTip=false"
  121. :width="416">
  122. <div style="text-align:center;">
  123. <div style="font-size:16px;">是否注销该数字货架?</div>
  124. <div style="font-size:14px;">点击确定,该数字货架就不可做任何操作,用户不可登陆</div>
  125. <div style="font-size:12px;color:#999;margin-top:10px;">如需要迁移该数字货架的数据,可去货架设置中导出货架信息</div>
  126. </div>
  127. <div class="btn-box" style="display: flex;align-items: center;justify-content: center;margin-top:25px;">
  128. <a-button id="shelfSetList-handle-ok" type="primary" @click="handleCommonOk">确定</a-button>
  129. <a-button id="shelfSetList-handle-cancel" type="default" class="button-warning" @click="showTip=false">取消</a-button>
  130. </div>
  131. </a-modal>
  132. </a-card>
  133. </template>
  134. <script>
  135. import { commonMixin } from '@/utils/mixin'
  136. import { STable, VSelect } from '@/components'
  137. import custList from '@/views/common/custList.vue' // 客户列表组件
  138. import shelfSList from '@/views/common/shelfList' // 货架列表组件
  139. import basicInfoModal from './basicInfoModal.vue' // 基本信息弹框
  140. import commonModal from '@/views/common/commonModal.vue' // 公共弹框
  141. import { shelfList, modifFinishFlag, shelfModifState } from '@/api/shelf' // 接口api
  142. export default {
  143. components: { STable, VSelect, custList, shelfSList, basicInfoModal, commonModal },
  144. mixins: [commonMixin],
  145. data () {
  146. return {
  147. spinning: false, // loading
  148. tableHeight: 0, // 表格高度
  149. disabled: false, // 查询、重置按钮是否可操作
  150. showTip: false, // 注销弹框
  151. queryParam: {
  152. shelfSn: undefined, // 货架sn
  153. customerSn: undefined, // 关联客户sn
  154. finishFlag: undefined, // 是否完成设置
  155. customerEntity: { // 关联客户名称
  156. customerName: undefined
  157. }
  158. },
  159. // 列定义
  160. columns: [
  161. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  162. { title: '货架名称', scopedSlots: { customRender: 'shelfName' }, width: '25%', align: 'left', ellipsis: true },
  163. { title: '关联客户', dataIndex: 'customerEntity.customerName', width: '25%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  164. { title: '货位数量', scopedSlots: { customRender: 'shelfPlaceNum' }, width: '15%', align: 'center' },
  165. { title: '是否设置完成', scopedSlots: { customRender: 'finishFlag' }, width: '10%', align: 'center' },
  166. { title: '启用状态', scopedSlots: { customRender: 'enableFlag' }, width: '10%', align: 'center' },
  167. { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' }
  168. ],
  169. // 加载数据方法 必须为 Promise 对象
  170. loadData: parameter => {
  171. this.disabled = true
  172. this.spinning = true
  173. return shelfList(Object.assign(parameter, this.queryParam)).then(res => {
  174. let data
  175. if (res.status == 200) {
  176. data = res.data
  177. const no = (data.pageNo - 1) * data.pageSize
  178. for (var i = 0; i < data.list.length; i++) {
  179. data.list[i].no = no + i + 1
  180. }
  181. this.disabled = false
  182. }
  183. this.spinning = false
  184. return data
  185. })
  186. },
  187. openModal: false, // 新增编辑弹框
  188. nowData: null // 当前操作行数据
  189. }
  190. },
  191. methods: {
  192. // 设置/修改
  193. handleSet (row) {
  194. // 如果有关联客户跳转到设置页面
  195. if (row.customerSn) {
  196. this.handleOkToSet(row)
  197. } else {
  198. // 否则打开编辑弹框
  199. this.nowData = {
  200. shelfSn: row.shelfSn,
  201. shelfName: row.shelfName
  202. }
  203. this.openModal = true
  204. }
  205. },
  206. // 跳转到货架设置页面
  207. handleOkToSet (data) {
  208. this.$router.push({ path: `/numsGoodsShelves/shelfSet/set/${data.shelfSn}` })
  209. },
  210. // 选择关联客户
  211. custChange (obj, row) {
  212. if (row) {
  213. this.queryParam.customerSn = row && row.customerSn || undefined
  214. this.queryParam.customerEntity.customerName = undefined
  215. } else {
  216. this.queryParam.customerEntity.customerName = obj || undefined
  217. this.queryParam.customerSn = undefined
  218. }
  219. },
  220. // 是否设置完成更改
  221. changeStatus (record) {
  222. const params = {
  223. shelfSn: record.shelfSn,
  224. finishFlag: record.finishFlag == 1 ? '0' : '1'
  225. }
  226. this.spinning = true
  227. modifFinishFlag(params).then(res => {
  228. if (res.status == 200) {
  229. this.$message.success(res.message)
  230. this.$refs.table.refresh()
  231. this.spinning = false
  232. } else {
  233. this.spinning = false
  234. }
  235. })
  236. },
  237. // 启用禁用
  238. enableShelf (record) {
  239. const params = {
  240. shelfSn: record.shelfSn,
  241. state: record.state == 'ENABLE' ? 'DISABLED' : 'ENABLE'
  242. }
  243. const _this = this
  244. _this.$confirm({
  245. title: '提示',
  246. content: <div style="text-align:center;">是否{(record.state == 'ENABLE' ? '停用' : '启用') + record.shelfName}</div>,
  247. centered: true,
  248. closable: true,
  249. class: 'confirm-center',
  250. onOk () {
  251. _this.updateState(params)
  252. }
  253. })
  254. },
  255. // 打开注销弹框
  256. handleCancel (record) {
  257. this.nowData = {
  258. shelfSn: record.shelfSn,
  259. state: 'WRITE_OFF'
  260. }
  261. this.showTip = true
  262. },
  263. // 确定注销
  264. handleCommonOk () {
  265. this.updateState(this.nowData)
  266. },
  267. // 更改货架状态
  268. updateState (params) {
  269. this.spinning = true
  270. shelfModifState(params).then(res => {
  271. if (res.status == 200) {
  272. this.$message.success(res.message)
  273. this.$refs.table.refresh()
  274. this.spinning = false
  275. } else {
  276. this.spinning = false
  277. }
  278. this.showTip = false
  279. })
  280. },
  281. // 重置列表查询
  282. resetSearchForm () {
  283. this.queryParam.shelfSn = undefined
  284. this.queryParam.customerSn = undefined
  285. this.queryParam.customerEntity.customerName = undefined
  286. this.$refs.custList.resetForm()
  287. this.queryParam.finishFlag = undefined
  288. this.$refs.table.refresh(true)
  289. },
  290. // 计算表格高度
  291. setTableH () {
  292. const tableSearchH = this.$refs.tableSearch.offsetHeight
  293. this.tableHeight = window.innerHeight - tableSearchH - 235
  294. },
  295. // 初始化页面
  296. pageInit () {
  297. const _this = this
  298. this.$nextTick(() => { // 页面渲染完成后的回调
  299. _this.setTableH()
  300. })
  301. }
  302. },
  303. mounted () {
  304. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  305. this.pageInit()
  306. this.resetSearchForm()
  307. }
  308. },
  309. watch: {
  310. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  311. this.setTableH()
  312. }
  313. },
  314. activated () {
  315. // 如果是新页签打开,则重置当前页面
  316. if (this.$store.state.app.isNewTab) {
  317. this.pageInit()
  318. this.resetSearchForm()
  319. }
  320. // 仅刷新列表,不重置页面
  321. if (this.$store.state.app.updateList) {
  322. this.pageInit()
  323. this.$refs.table.refresh()
  324. }
  325. }
  326. }
  327. </script>