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

<template>
  <div class="app-container">
    <!--表单组件-->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="区域名称" prop="name">
            <el-input v-model="form.name" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="删除区域" :visible.sync="deleteVisible" :before-close="handleClose">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <div class="dialog-delt">
          <p><span>确定要删除当前区域吗？</span></p>
          <p v-show="!allowDelete" class="delt-tip"><span>提示：该区域已绑定设备，不可删除，请先删除设备</span></p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" :disabled="!allowDelete" @click.native="handleConfirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 区域列表 -->
    <el-row class="container-main" :gutter="20">
      <el-col class="curd-in-out" style="height: calc(100vh - 190px)" :xs="10" :sm="8" :md="5" :lg="6" :xl="4">
        <div class="crud-opts">
          <div class="crud-opts-left">
            <el-button v-permission="permission.add" size="mini" icon="el-icon-plus" :disabled="crud.selections[0] && crud.selections[0].id && crud.selections[0].id !== defaultExpandedKeys[0]" @click="crud.toAdd">
              新增
            </el-button>
            <el-button v-permission="permission.edit" size="mini" icon="el-icon-edit" :disabled="crud.selections.length !== 1 || crud.selections[0].id && crud.selections[0].id === defaultExpandedKeys[0]" @click="crud.toEdit(crud.selections[0])">
              修改
            </el-button>
            <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length !== 1 || crud.selections[0].id && crud.selections[0].id === defaultExpandedKeys[0]" @click="toDelete(crud.selections)">删除</el-button>
          </div>
        </div>
        <!--区域树状结构-->
        <div class="container-left" style="min-height: calc(100vh - 242px);margin:20px 0 0 0">
          <span class="right-top-line" />
          <span class="left-bottom-line" />
          <div class="tree-scroll">
            <el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :default-expanded-keys="defaultExpandedKeys" highlight-current @node-click="handleNodeClick" />
          </div>
        </div>
      </el-col>
      <!-- 设备详情列表 -->
      <!-- <el-col class="container-right" :xs="14" :sm="16" :md="19" :lg="18" :xl="20"> -->
      <el-col :xs="14" :sm="16" :md="19" :lg="18" :xl="20">
        <deviceDetail ref="deviceDetail" :permission="permission" :active-add-btn="activeRightBtn" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import deviceDetail from './module/deviceDetail'
import crudMethod from '@/api/storeManage/deviceManage/storeroom'
import CRUD, { presenter, form } from '@crud/crud'
import Vue from 'vue'

const defaultForm = { id: null, name: null, sort: null }

export default {
  name: 'Device',
  components: { deviceDetail },
  cruds() {
    return [
      CRUD({
        title: '区域', url: 'api/storeroom/tree',
        crudMethod: { ...crudMethod },
        sort: ['sort,asc']
      })
    ]
  },
  mixins: [presenter(), form(defaultForm)],
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入区域名称', trigger: 'blur' }
        ]
      },
      permission: {
        add: ['admin', 'deviceManage:add'],
        edit: ['admin', 'deviceManage:edit'],
        del: ['admin', 'deviceManage:del']
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      activeRightBtn: false,
      deleteVisible: false,
      deleteData: {},
      allowDelete: false, // 是否允许删除当前区域
      defaultExpandedKeys: []
    }
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      if (this.$refs.deviceDetail) {
        this.$refs.deviceDetail.query.id = ''
      }
      return true
    },
    [CRUD.HOOK.afterRefresh]() {
      Vue.set(this.defaultExpandedKeys, 0, this.crud.data[0].id)
      this.$refs.tree.setCurrentKey(this.crud.data[0].id)
      this.$refs.deviceDetail.storeroomId = this.crud.data[0].id
      this.crud.selections = [this.crud.data[0]]
    },
    // 选中区域后，显示设备详情数据
    handleNodeClick(val) {
      if (val) {
        this.crud.selectionChangeHandler([val])
        this.$refs.deviceDetail.query.id = val.id
        this.$refs.deviceDetail.storeroomId = val
        // this.$refs.deviceDetail.crud.toQuery()
        this.activeRightBtn = true
      }
    },
    // 编辑前将区域临时清空，避免日志入库数据过长
    [CRUD.HOOK.beforeToEdit](crud, form) {
      form.deviceDetails = null
    },
    [CRUD.HOOK.beforeSubmit]() {
      this.crud.form.pid = this.defaultExpandedKeys[0]
      this.crud.form.remark = this.crud.form.name
      if (!this.crud.form.sort) {
        this.crud.form.sort = this.crud.data[0].children.reduce((prev, cur) => { return { sort: Math.max(prev.sort, cur.sort) } }).sort + 1
      }
    },
    toDelete(data) {
      this.deleteData = data
      this.deleteVisible = true
      this.allowDelete = this.$refs.deviceDetail.crud.data && this.$refs.deviceDetail.crud.data.length === 0
    },
    handleConfirm() {
      this.deleteVisible = false
      this.crud.delAllLoading = true
      this.crud.doDelete(this.deleteData)
    },
    handleClose(done) {
      this.deleteData = {}
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-scroll {
  height: calc(100vh - 275px);
  overflow-y: scroll;
  overflow-x: hidden;
}
</style>