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:245px;height:30px"
              :limit="2"
              :limit-text="count => `+${count}`"
            />
          </el-form-item>
          <el-form-item label="选择门类" prop="category" class="down-select">
            <el-select
              v-model="categoryValue"
              style="width: 245px;"
              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="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'
var menus = [
  {
    id: 1,
    label: '父区域',
    children: [
      // {
      //   id: 100,
      //   label: '子区域1',
      //   children: [
      {
        id: 1000,
        label: '设备1.1'
      },
      {
        id: 1001,
        label: '设备1.2'
      },
      {
        id: 1002,
        label: '设备1.3'
      },
      {
        id: 1003,
        label: '设备1.4'
      }
    ]
  },
  {
    id: 101,
    label: '子区域2',
    children: [
      {
        id: 1006,
        label: '设备2.1'
      },
      {
        id: 1007,
        label: '设备2.2'
      },
      {
        id: 1008,
        label: '设备2.3'
      },
      {
        id: 1011,
        label: '设备2.4'
      }
    ]
  }
  //   ]
  // }
]
export default {
  components: { Treeselect },
  data() {
    return {
      menusIds: [],
      tableData: [],
      checkForm: {},
      addFormVisible: false,
      selectAreaValue: [],
      selectArea: menus,
      defaultProps: { children: 'children', label: 'label' },
      nodeKey: 'id',
      defaultCheckedKeys: [],
      categoryValue: [0, 1, 2, 3],
      oldCategory: [0, 1, 2, 3],
      category: [
        { value: 0, label: '全部' },
        { value: 1, label: '档号' },
        { value: 2, label: '题名' },
        { value: 3, label: '位置' }
      ],
      showTags: true

    }
  },

  methods: {
    handleBuild() {
      console.log(this.$refs.dialogTable.$refs)
    },
    handleSave() {
      this.addFormVisible = false
    },
    // 选择门类
    selectChange(val) {
      // console.log(val)
      if (val[val.length - 1] === 0) { // 选择全选
        this.categoryValue = [0, 1, 2, 3]
        this.showTags = true
      } 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) // 除全选时都选中 此时加入全选
          this.showTags = true
        } else {
          this.categoryValue = this.categoryValue.filter(item => item !== 0) // 取消其他选项时 去除全选
          this.showTags = false
        }
      }
      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>