对接口

MrShi

昨天 39fc2d6754953e41a7334a2166347baacfcfb40a

 admin/src/components/business/cabinetDetails.vue

@@ -6,8 +6,8 @@
        :withFooter="false"
    >
        <el-form ref="searchForm" :model="searchForm" label-width="100px" inline>
            <el-form-item label="钥匙" prop="keyId">
                <el-input v-model="searchForm.keyId" placeholder="请输入钥匙编码或名称" @keypress.enter.native="getList"></el-input>
            <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">
@@ -31,19 +31,42 @@
            </el-form-item>
        </el-form>
        <ul class="toolbar">
            <li><el-button type="primary">批量解绑</el-button></li>
            <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="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"></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"
@@ -64,33 +87,15 @@
                    <el-link type="success" v-if="row.bindStatus === 1">已绑定</el-link>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                min-width="100"
                fixed="right"
            >
                <template slot-scope="{row}">
                    <el-button type="text" v-if="row.bindStatus === 0">绑定</el-button>
                    <el-button type="text" v-if="row.bindStatus === 1">解绑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="width: 100%; text-align: right; margin-top: 20px">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </GlobalWindow>
</template>

<script>
  import BaseOpera from '@/components/base/BaseOpera'
  import GlobalWindow from '@/components/common/GlobalWindow'
  import { fetchList } from '@/api/business/jkCabinetGrid'
  import { fetchList, updateStatusById, unBindKeys, updateById } from '@/api/business/jkCabinetGrid'
  import { list } from '@/api/business/jkKeys'
  export default {
    name: 'cabinetDetails',
    extends: BaseOpera,
@@ -100,13 +105,12 @@
        id: null,
        info: null,
        searchForm: {
          keyId: '',
          keyCode: '',
          status: '',
          bindStatus: ''
        },
        list: [],
        page: 1,
        total: 0,
        keysAll: [],
        loading: false
      }
    },
@@ -115,7 +119,53 @@
        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
@@ -125,14 +175,13 @@
        this.searchForm.keyId = ''
        this.searchForm.status = ''
        this.searchForm.workingStatus = ''
        this.page = 1
        this.getList()
      },
      getList() {
        this.loading = true
        fetchList({
          capacity: 10,
          page: this.page,
          capacity: 99999,
          page: 1,
          model: {
            cabinetId: this.id,
            keyId: this.searchForm.keyId,
@@ -140,9 +189,7 @@
            workingStatus: this.searchForm.workingStatus
          }
        }).then(res => {
          console.log(res)
          this.list = res.records
          this.total = res.total
        }).finally(() => {
          this.loading = false
        })