| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <GlobalWindow |
| | | :title="title" |
| | | width="100%" |
| | | :visible.sync="visible" |
| | | :withFooter="false" |
| | | > |
| | | <el-form ref="searchForm" :model="searchForm" label-width="100px" inline> |
| | | <el-form-item label="é¥å" prop="keyCode"> |
| | | <el-input v-model="searchForm.keyCode" placeholder="请è¾å
¥é¥åç¼ç æåç§°" @keypress.enter.native="getList"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="ç¶æ" prop="status"> |
| | | <el-select v-model="searchForm.status" placeholder="è¯·éæ©" @change="getList"> |
| | | <el-option label="å
¨é¨" value=""></el-option> |
| | | <el-option label="å¯ç¨" :value="0"></el-option> |
| | | <el-option label="ç¦ç¨" :value="1"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="ææ ¼ç¶æ" prop="bindStatus"> |
| | | <el-select v-model="searchForm.bindStatus" placeholder="è¯·éæ©" @change="getList"> |
| | | <el-option label="å
¨é¨" value=""></el-option> |
| | | <el-option label="æªç»å®" :value="0"></el-option> |
| | | <el-option label="å·²ç»å®" :value="1"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="getList">æç´¢</el-button> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button @click="reset">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <ul class="toolbar"> |
| | | <li><el-button type="primary" @click="bathUnBindKeys">æ¹éè§£ç»</el-button></li> |
| | | </ul> |
| | | <el-table |
| | | v-loading="loading" |
| | | :data="list" |
| | | stripe |
| | | > |
| | | <el-table-column prop="code" label="ææ ¼ç¼ç " min-width="100px"></el-table-column> |
| | | <el-table-column prop="cabinetName" label="æå±é¥åæ" min-width="100px"></el-table-column> |
| | | <el-table-column prop="keyId" label="ç»å®é¥å" min-width="100px"> |
| | | <template slot-scope="{row}"> |
| | | <el-select v-model="row.keyId" placeholder="è¯·éæ©" @change="blurFunc($event, row, 1)"> |
| | | <el-option |
| | | v-for="item in keysAll" |
| | | :key="item.id" |
| | | :label="item.code" |
| | | :value="item.id" |
| | | :disabled="item.isBinding === 1"> |
| | | </el-option> |
| | | </el-select> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="æ¿å·" min-width="100px"> |
| | | <template slot-scope="{row}"> |
| | | <el-input v-model="row.boardCode" @blur="blurFunc($event, row, 2)" placeholder="请è¾å
¥æ¿å·"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="ééå·" min-width="100px"> |
| | | <template slot-scope="{row}"> |
| | | <el-input v-model="row.channelCode" @blur="blurFunc($event, row, 3)" placeholder="请è¾å
¥ééå·"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="ç¶æ" min-width="100px"> |
| | | <template slot-scope="{row}"> |
| | | <el-switch |
| | | @change="changeStatus($event, row.id)" |
| | | v-model="row.status" |
| | | active-color="#13ce66" |
| | | inactive-color="#ff4949" |
| | | :active-value="0" |
| | | :inactive-value="1"> |
| | | </el-switch> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="è¿è¡ç¶æ" min-width="100px"> |
| | | <template slot-scope="{row}"> |
| | | <el-link type="success" v-if="row.workingStatus === 0">æ£å¸¸</el-link> |
| | | <el-link type="warning" v-if="row.workingStatus === 1">æ
é</el-link> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="ææ ¼ç¶æ" min-width="100px"> |
| | | <template slot-scope="{row}"> |
| | | <el-link type="warning" v-if="row.bindStatus === 0">æªç»å®</el-link> |
| | | <el-link type="success" v-if="row.bindStatus === 1">å·²ç»å®</el-link> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </GlobalWindow> |
| | | </template> |
| | | |
| | | <script> |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import { fetchList, updateStatusById, unBindKeys, updateById } from '@/api/business/jkCabinetGrid' |
| | | import { list } from '@/api/business/jkKeys' |
| | | export default { |
| | | name: 'cabinetDetails', |
| | | extends: BaseOpera, |
| | | components: { GlobalWindow }, |
| | | data () { |
| | | return { |
| | | id: null, |
| | | info: null, |
| | | searchForm: { |
| | | keyCode: '', |
| | | status: '', |
| | | bindStatus: '' |
| | | }, |
| | | list: [], |
| | | keysAll: [], |
| | | loading: false |
| | | } |
| | | }, |
| | | methods: { |
| | | open (title, id) { |
| | | this.title = title |
| | | this.id = id |
| | | this.getList() |
| | | this.getKeysAll() |
| | | this.visible = true |
| | | }, |
| | | getKeysAll() { |
| | | list({ }) |
| | | .then(res => { |
| | | this.keysAll = res |
| | | }) |
| | | }, |
| | | blurFunc(e, row, type) { |
| | | let obj = { |
| | | id: row.id |
| | | } |
| | | if (type === 1) { |
| | | obj.keyId = row.keyId |
| | | } else if (type === 2) { |
| | | obj.boardCode = row.boardCode |
| | | } else if (type === 3) { |
| | | obj.channelCode = row.channelCode |
| | | } |
| | | updateById(obj) |
| | | .then(res => { |
| | | this.getList() |
| | | if (type === 1) { |
| | | this.getKeysAll() |
| | | } |
| | | }) |
| | | }, |
| | | bathUnBindKeys() { |
| | | this.$confirm('确认æ¹éè§£ç»å?', 'æç¤º', { |
| | | confirmButtonText: 'ç¡®å®', |
| | | cancelButtonText: 'åæ¶', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | unBindKeys(this.list.map(item => item.id)) |
| | | .then(res => { |
| | | this.getList() |
| | | }) |
| | | }).catch(() => { |
| | | |
| | | }); |
| | | }, |
| | | changeStatus(status, id) { |
| | | updateStatusById({ id, status }) |
| | | .then(res => { |
| | | this.getList() |
| | | }) |
| | | }, |
| | | handleCurrentChange(e) { |
| | | this.page = e |
| | | this.getList() |
| | | }, |
| | | reset() { |
| | | this.searchForm.keyId = '' |
| | | this.searchForm.status = '' |
| | | this.searchForm.workingStatus = '' |
| | | this.getList() |
| | | }, |
| | | getList() { |
| | | this.loading = true |
| | | fetchList({ |
| | | capacity: 99999, |
| | | page: 1, |
| | | model: { |
| | | cabinetId: this.id, |
| | | keyId: this.searchForm.keyId, |
| | | status: this.searchForm.status, |
| | | workingStatus: this.searchForm.workingStatus |
| | | } |
| | | }).then(res => { |
| | | this.list = res.records |
| | | }).finally(() => { |
| | | this.loading = false |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |