yxk-storeroom-system/src/views/archivesManage/archivesCheck/module/addCheck.vue

<template>
  <div>
    <el-dialog ref="dialogTable" title="新增盘点" :visible.sync="addFormVisible" class="dialog-table">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-form
          ref="form"
          :model="checkForm"
          size="small"
          label-width="80px"
        >
          <el-form-item label="选择区域" prop="selectArea" class="down-select" style="padding-top:1px">
            <treeselect
              v-model="selectAreaValue"
              :options="selectArea"
              multiple
              placeholder="请选择"
              style="width:280px;height:30px"
              :limit="1"
              :limit-text="count => `+${count}`"
            />
          </el-form-item>
          <el-form-item label="选择门类" prop="category" class="down-select">
            <el-select
              v-model="categoryValue"
              style="width: 280px;"
              multiple
              filterable
              clearable
              placeholder="请选择"
              :collapse-tags="showTags"
              @change="selectChange"
            >
              <el-option
                v-for="item in category"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" size="mini" style="margin:0 0 0 10px;height:30px" @click="handleBuild">生成盘点单</el-button>
        </el-form>
        <el-table :data="tableData" height="calc(100vh - 595px)" :cell-class-name="cell">
          <el-table-column type="index" align="center" label="序号" width="80" />
          <el-table-column prop="checkState" align="center" label="状态" width="120">
            <template slot-scope="scope">
              <!-- 未盘点 -->
              <span class="clear">{{ scope.row.checkState }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" align="center" label="子条数目" width="100" />
          <el-table-column prop="" align="center" label="门类级别" width="100" />
          <el-table-column prop="" align="center" label="门类名称" width="120" />
          <el-table-column prop="" align="center" label="全宗号" width="100" />
          <el-table-column prop="" align="center" label="档号" width="180" />
          <el-table-column prop="" align="center" label="归档年度" width="100" />
          <el-table-column prop="" label="题名" align="center" width="180" />
          <el-table-column prop="" label="保密程度" align="center" width="85" />
          <el-table-column prop="" label="部门" align="center" width="120" />
          <el-table-column prop="" label="盒名称" align="center" width="85" />
          <el-table-column prop="" label="所在位置" align="center" width="150" />
          <el-table-column prop="" label="创建时间" align="center" width="150" />
        </el-table>
        <!-- 分页器 记得加上!!!!!!!!!!!!!!!!!!!!!! -->
        <!-- !!!!!!!!!!!!!!!!!!!!!!!! -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleSave">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { menu } from '@/api/storeManage/levelManage/level'
import { getCategoryTree } from '@/api/category/category'
export default {
  name: 'AddCheck',
  components: { Treeselect },
  data() {
    return {
      menusIds: [],
      tableData: [],
      checkForm: {},
      addFormVisible: false,
      selectAreaValue: [],
      selectArea: [],
      // deviceTree:[],
      defaultProps: { children: 'children', label: 'label' },
      nodeKey: 'id',
      defaultCheckedKeys: [],
      categoryValue: [],
      oldCategory: [],
      allCategory: [],
      category: [],
      showTags: true

    }
  },
  created() {
    this.getTreeMenu()
    this.getCateMenu()
  },
  methods: {
    getTreeMenu() {
      menu().then(data => {
        const deviceTree = []
        let storeroom = {}
        let devices = []
        // deviceTree.splice(0, deviceTree.length)
        data.forEach((item, i) => {
          if (!storeroom.id) {
            item.storeroomId.label = item.storeroomId.name
            storeroom = item.storeroomId
            item.label = item.deviceName
            devices.push(item)
          } else if (storeroom.id !== item.storeroomId.id) {
            item.storeroomId.label = item.storeroomId.name
            storeroom.children = devices
            deviceTree.push(storeroom)
            devices = []
            item.label = item.deviceName
            devices.push(item)
            storeroom = item.storeroomId
          } else {
            item.storeroomId.label = item.storeroomId.name
            item.label = item.deviceName
            devices.push(item)
          }
          if (i === data.length - 1) {
            item.storeroomId.label = item.storeroomId.name
            storeroom.children = devices
            deviceTree.push(storeroom)
          }
          this.selectArea = deviceTree
        })
      })
    },
    getCateMenu() {
      getCategoryTree().then(res => {
        this.category = res[0].children
        this.category.forEach(item => {
          item.value = item.id
          item.label = item.cnName
        })
        this.category.unshift({ value: 0, label: '全选' })
        this.allCategory = this.category.map(item => { return item.value })
        this.categoryValue = JSON.parse(JSON.stringify(this.allCategory))
        this.oldCategory = JSON.parse(JSON.stringify(this.allCategory))
      })
    },
    handleBuild() {
      console.log(this.selectArea, this.category)
      console.log(this.selectAreaValue, this.categoryValue)
    },
    handleSave() {
      this.addFormVisible = false
    },
    // 选择门类
    selectChange(val) {
      // console.log(val)
      const allCategory = JSON.parse(JSON.stringify(this.allCategory))
      if (val[val.length - 1] === 0) { // 选择全选
        this.categoryValue = allCategory
      } else {
        const arr1 = this.oldCategory.filter(item => item !== 0)
        const arr2 = val.filter(item => item !== 0)
        if (arr1.length === arr2.length) { // 取消全选
          this.categoryValue = []
        } else if (arr1.length < arr2.length && arr2.length === this.category.length - 1) {
          this.categoryValue.unshift(0) // 除全选时都选中 此时加入全选
        } else {
          this.categoryValue = this.categoryValue.filter(item => item !== 0) // 取消其他选项时 去除全选
        }
      }
      this.oldCategory = this.categoryValue
    },
    // 单元格样式
    cell({ row, columnIndex }) {
      if (columnIndex === 1) {
        return 'fail-clear'
      }
    }

  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';

.el-form{
    display: flex;
    padding-left: 12px;
}
::v-deep .el-dialog{
  width: 950px;
  height: 520px;
}
::v-deep .el-dialog .el-dialog__header .el-dialog__close::before{
    position: absolute;
    right: -160px;
    bottom: -12px;
}
::v-deep .el-dialog__body{
  padding: 30px 0;
}
::v-deep .el-tag.el-tag--info{
  height: 26px;
  line-height: 26px;
  background-color: #13439E;
  border: none;
  color: #fff;
}
::v-deep .el-tag.el-tag--info .el-tag__close{
  background-color: #fff;
}
::v-deep .el-input__inner{
  height: 30px !important;
}
//滚动条
::v-deep ::-webkit-scrollbar-corner{
  background: transparent;
}
// 树形选择器
::v-deep .vue-treeselect--has-value .vue-treeselect__multi-value{
  margin-bottom: 0;
}
::v-deep .vue-treeselect__multi-value-item-container{
  padding-top: 2px;
  line-height: 20px;
}

::v-deep .el-dialog .el-form .vue-treeselect__control{
  line-height: 18px;
}
::v-deep .vue-treeselect__limit-tip{
  background: #13439E;
  border-radius: 3px;
  margin: 2px;
  padding: 0 3px;
  .vue-treeselect__limit-tip-text{
    padding: 2px 2px;
    color: #fff;
  }
}
</style>