doum
2025-10-13 145dbc2a4f5bafcb432fb35d7bc91101aa3318d8
admin/src/components/business/cabinetDetails.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,199 @@
<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>