yxk-storeroom-system/src/views/storeManage/levelManage/index.vue

<template>
  <div class="app-container">
    <binding-tag-dlg ref="bindingTag" :binding-id="crud.selections[0] && crud.selections[0].id" :binding-type="3" binding-txt="层架位" @refresh="crud.refresh" />
    <div class="head-container">
      <p class="warning">
        <svg-icon icon-class="warning" />
        <span>温馨提示：如需配置层位，请直接前往库房设备管理进行设备维护</span>
      </p>
      <div>
        <el-button type="primary" class="iconfont icon-jiechubangding-fanbai" size="mini" :disabled="crud.selections.length !== 1" @click="bindingTag(crud.selections)">绑定标签</el-button>
      </div>
    </div>
    <el-row class="container-main">
      <el-col class="curd-in-out" :xs="10" :sm="8" :md="5" :lg="6" :xl="5">
        <div class="container-left left-tree-item" style="height:calc(100vh - 240px)">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <!--树状结构-->
          <device-tree @nodeClick="handleNodeClick" />
        </div>
      </el-col>
      <!-- 档案管理列表 -->
      <el-col class="container-right" style="min-height: calc(100vh - 240px);" :xs="14" :sm="18" :md="19" :lg="18" :xl="19">
        <span class="right-top-line" />
        <span class="left-bottom-line" />
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" height="calc(100vh - 295px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
          <el-table-column align="center" type="selection" width="55" />
          <el-table-column align="center" type="index" label="序号" width="55" />
          <!-- <el-table-column align="center" label="库房">
            <template>
              {{ storeroomName }}
            </template>
          </el-table-column> -->
          <el-table-column align="center" prop="position_name" label="层位名称" />
          <el-table-column align="center" prop="position" label="层位编号" />
          <el-table-column align="center" prop="storeroomCode" label="库房代码" />
          <el-table-column v-if="deviceInfo.deviceTypeId && deviceInfo.deviceTypeId.name === '密集架'" align="center" prop="areaNo" label="区号" width="80" />
          <el-table-column v-if="deviceInfo.deviceTypeId && deviceInfo.deviceTypeId.name === '回转柜'" align="center" prop="cupboardNo" label="柜号" width="80" />
          <el-table-column v-if="deviceInfo.deviceTypeId && deviceInfo.deviceTypeId.name === '密集架'" align="center" prop="columnRowNo" label="列号" width="80" />
          <el-table-column v-if="deviceInfo.deviceTypeId && deviceInfo.deviceTypeId.name === '密集架'" align="center" prop="partNo" label="节号" width="80" />
          <el-table-column align="center" prop="rowNo" label="层号" width="80" />
          <el-table-column v-if="deviceInfo.deviceTypeId && deviceInfo.deviceTypeId.name === '回转柜'" align="center" prop="columnRowNo" label="列号" width="80" />
          <el-table-column v-if="deviceInfo.deviceTypeId && deviceInfo.deviceTypeId.name === '密集架'" align="center" prop="direction" label="方向" width="80" />
          <el-table-column align="center" prop="tid" label="标签" />
          <el-table-column align="center" prop="update_time" label="操作时间" width="150">
            <template slot-scope="scope">
              <div>{{ scope.row.update_time | parseTime }}</div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DeviceTree from '@/views/components/DeviceTree'
import BindingTagDlg from '@/views/components/BindingTagDlg'
import CRUD, { presenter } from '@crud/crud'
import pagination from '@crud/Pagination'
export default {
  name: 'LevelManage',
  components: { DeviceTree, pagination, BindingTagDlg },
  mixins: [presenter()],
  cruds() {
    return [
      CRUD({
        url: 'api/tag/list',
        queryOnPresenterCreated: false,
        sort: ['areaNo,asc', 'columnRowNo,asc', 'partNo,asc', 'rowNo,asc', 'position,asc']
      })
    ]
  },
  data() {
    return {
      deviceInfo: {},
      storeroomName: ''
    }
  },
  created() {
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.query.deviceInfoId = this.deviceInfo.id
    },
    handleNodeClick(data) {
      this.deviceInfo = data
      this.crud.toQuery()
      this.storeroomName = data.storeroomId.name
    },
    // 参数绑定
    handleBindParam() {
    },
    clickRowHandler(row) {
      this.$refs.table.clearSelection()
      this.$refs.table.toggleRowSelection(row)
    },
    selectionChangeHandler(val) {
      if (val.length > 1) {
        // 取出最后val的最后一个返回出来
        const finalVal = val.pop()
        // 清除所有选中
        this.$refs.table.clearSelection()
        // 给最后一个加上选中
        this.$refs.table.toggleRowSelection(finalVal)
        this.crud.selectionChangeHandler([finalVal])
      } else {
        this.crud.selectionChangeHandler(val)
      }
    },
    bindingTag(data) {
      if (data[0].tid) {
        this.$refs.bindingTag.isBinding = true
        this.$refs.bindingTag.tidCode = data[0].tid
      }
      this.$refs.bindingTag.bindingVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.head-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-button {
    width: 106px;
    height: 30px;
    background-color: #1aae93;
    border: none;
    &:disabled {
      background-color: #0D5649;
      color: #666;
    }
    &::before {
      padding-right: 5px;
    }
  }
}
::v-deep .el-icon-more:before {
  margin-right: 8px;
}
.app-container {
  margin-top: 0;
}
.warning {
  font-size: 14px;
  color: #3a99fd;
  span {
    margin-left: 5px;
  }
}
::v-deep thead .el-table-column--selection .cell {
  display: none;
}
</style>