<!-- * @Author: zwq * @Date: 2020-12-29 15:41:11 * @LastEditors: fzq * @LastEditTime: 2022-03-10 21:00:58 * @Description: --> <template> <div class="app-container"> <!-- <div style="margin:10px 50px"> <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button> <el-button type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button> </div> --> <head-form :placeholder-name="placeholderName" :key-name="keyNameAdd" @getDataList="getList" @add="addNew" /> <div style="title">货架编码:{{ shCode }} 货架名称:{{ shName }} 库存量:{{ num }} <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button> </div> <base-table :page="listQuery.current" :limit="listQuery.size" :table-config="tableProps" :table-data="list" :is-loading="listLoading" > <method-btn slot="handleBtn" :width="trueWidth" :method-list="tableBtn" @clickBtn="handleClick" /> </base-table> <locationAttr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :shelf-id="listQuery.shelfId" @refreshDataList="getList" /> </div> </template> <script>import i18n from '@/lang' import HeadForm from '@/components/basicData/HeadForm' import { locationList, locationDelete } from '@/api/basicData/Cache/location' import locationAttrAdd from './locationAttr-add.vue' import BaseTable from '@/components/BaseTable' import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn' /** * 表格表头配置项 TypeScript接口注释 * tableConfig<ConfigItem> = [] * * Interface ConfigItem = { * prop: string, * label: string, * width: string, * align: string, * subcomponent: function, * filter: function * } * * */ const tableBtn = [ { type: 'edit', btnName: 'btn.edit' }, { type: 'delete', btnName: 'btn.delete' } ] const tableProps = [ // { // prop: 'createTime', // label: i18n.t('module.basicData.factory.createTime'), // filter: timeFormatter, // align: 'center' // }, { prop: 'locationName', label: i18n.t('module.basicData.cache.LocationName'), align: 'center' }, { prop: 'code', label: i18n.t('module.basicData.cache.LocationCode'), align: 'center' }, { prop: 'locationNameAlias', label: i18n.t('module.basicData.cache.anotherName'), align: 'center' }, { prop: 'layers', label: i18n.t('module.basicData.cache.rowMark'), align: 'center' }, { prop: 'columns', label: i18n.t('module.basicData.cache.columnMark'), align: 'center' }, { prop: 'locationType', label: i18n.t('module.basicData.cache.locationType'), align: 'center' }, { prop: 'statusName', label: i18n.t('module.basicData.cache.status'), align: 'center' } ] export default { name: 'Location', components: { BaseTable, MethodBtn, locationAttrAdd, HeadForm }, filters: { statusFilter(status) { const statusMap = { published: 'success', draft: 'info', deleted: 'danger' } return statusMap[status] } }, data() { return { shCode: '', shName: '', num: 0, addOrUpdateVisible: false, keyNameAdd: i18n.t('module.basicData.visual.keyword'), placeholderName: this.$t('module.basicData.cache.LocationName'), tableBtn, trueWidth: 200, tableProps, list: [{ statusName: '' }], listLoading: true, listQuery: { current: 1, size: 990, shelfId: '', id: '' } } }, created() { this.listQuery.shelfId = this.$route.query.id this.shCode = this.$route.query.code this.shName = this.$route.query.shelfName this.num = this.$route.query.columnNum this.getList() }, methods: { handleClick(raw) { if (raw.type === 'delete') { console.log(raw.data) this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.locationName}]?`, this.$t('module.basicData.visual.Tips'), { confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'), cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'), type: 'warning' }).then(() => { locationDelete(raw.data.id).then(response => { this.$message({ message: this.$t('module.basicData.visual.success'), type: 'success', duration: 1500, onClose: () => { this.getList() } }) }) }).catch(() => {}) } else { this.addNew(raw.data.id) } }, getList(key) { this.listLoading = true this.listQuery.name = key // shelfId与查询参数id关联 this.listQuery.id = this.listQuery.shelfId locationList(this.listQuery).then(response => { if (response.data.records) { this.list = response.data.records console.log(this.list) // 1是Working Port,2是Buffer Port,3是Exception Port与status进行替换 for (var x = 0; x < this.list.length; x++) { if (this.list[x].status === 1) { this.list[x].statusName = 'Working Port' } else if (this.list[x].status === 2) { this.list[x].statusName = 'Buffer Port' } else if (this.list[x].status === 3) { this.list[x].statusName = 'Exception Port' } } } else { this.list.splice(0, this.list.length) } this.listLoading = false }) }, // 新增 / 修改 addNew(shelfId) { this.addOrUpdateVisible = true this.$nextTick(() => { this.$refs.addOrUpdate.init(shelfId) }) }, goback() { this.$router.go(-1) } } } </script> <style scoped> .edit-input { padding-right: 100px; } .cancel-btn { position: absolute; right: 15px; top: 10px; } </style>