yxk-storeroom-system/src/views/archivesManage/recycleBin/index.vue

<template>
  <div class="app-container">
    <el-row class="container-main" :gutter="20">
      <!--左侧树状数据-->
      <el-col class="container-left" :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
        <span class="right-top-line" />
        <span class="left-bottom-line" />
        <div class="head-container" style="color:#fff">
          档案门类
        </div>
        <el-tree ref="archivesTree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick" />

      </el-col>
      <!--用户数据-->
      <el-col class="container-right" :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
        <span class="right-top-line" />
        <span class="left-bottom-line" />
        <!--工具栏-->
        <div class="head-container">
          <el-button icon="el-icon-delete" size="mini" @click="handleDelete">彻底删除</el-button>
          <el-button size="mini" style="margin-right:10px" @click="handleRestore">
            <svg-icon icon-class="huanyuan-fanbai" class-name="svg-style" />还原</el-button>
          <!-- 搜索 -->
          <!-- <div v-if="crud.props.searchToggle" class="head-search"> -->
          <el-input
            v-model="query.blurry"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            placeholder="请输入关键词"
            style="width: 200px;margin-right:10px"
            class="filter-item"
          />
          <rrOperation />
          <!-- </div> -->
        </div>
        <!--表格渲染-->
        <el-table
          ref="table"
          :data="tableData"
          style="min-width: 100%"
          height="calc(100vh - 355px)"
          @selection-change="selectionChangeHandler"
          @row-click="clickRowHandler"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" label="序号" width="55" />
          <el-table-column prop="" label="文件" min-width="55" />
          <el-table-column prop="" label="全宗名" min-width="85" />
          <el-table-column prop="archivesID" :show-overflow-tooltip="true" label="档号" min-width="110" />
          <el-table-column prop="" label="部门名称" min-width="85" />
          <el-table-column prop="" label="件号" min-width="55" />
          <el-table-column :show-overflow-tooltip="true" prop="titleName" label="题名" min-width="100" />
          <el-table-column prop="" label="成文日期" min-width="80" />
          <el-table-column prop="" label="机构(问题)" :show-overflow-tooltip="true" min-width="80" />
          <el-table-column prop="" label="页号" min-width="60" />
          <el-table-column prop="" label="责任者" min-width="85" />
          <el-table-column prop="" label="保管期限" min-width="85" />
          <el-table-column prop="" label="备注" min-width="85" />
        </el-table>
        <!-- 删除模态框 -->
        <el-dialog title="确认删除" :visible.sync="deleteVisible">
          <span class="dialog-right-top" />
          <span class="dialog-left-bottom" />
          <div class="setting-dialog">
            <p><span style="color:#fff;">确定要彻底删除当前档案数据吗?</span></p>
            <p><span style="color:#fff;">数据来源:文件1条数据</span></p>
            <p><span style="color:#f00;">提示:确定彻底删除后，该档案数据及所属文件不能还原</span></p>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click.native="handleDelConfirm">确定</el-button>
            </div>
          </div>
        </el-dialog>
        <!-- 还原模态框 -->
        <el-dialog title="确认还原" :visible.sync="restoreVisible">
          <span class="dialog-right-top" />
          <span class="dialog-left-bottom" />
          <div class="setting-dialog">
            <p><span style="color:#fff;">确定将当前选择的档案数据进行还原?</span></p>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click.native="handleRestoreConfirm">确定</el-button>
            </div>
          </div>
        </el-dialog>
        <!--分页组件-->
        <pagination />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CRUD, { presenter, header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import data1 from '../lendManage/data1.json'
import crudCategory from '@/api/category/category'

export default {
  name: 'RecycleBin',
  components: { rrOperation, pagination },
  cruds() {
    return CRUD({
      title: '门类',
      url: 'api/archives-type/menu',
      crudMethod: { ...crudCategory },
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: true,
        group: false
      }
    })
  },
  mixins: [presenter(), header(), crud()],
  // 数据字典
  dicts: ['user_status'],
  data() {
    return {
      selections: [], // 选中列表
      deleteVisible: false,
      restoreVisible: false,
      tableData: [],
      defaultProps: { children: 'children', label: 'cnName' }

    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取表格数据
    getData() {
      this.tableData = data1.rows
    },
    // 切换菜单
    handleNodeClick(data) {
      console.log(data)
    },
    // 彻底删除
    handleDelete() {
      if (this.selections.length > 0) {
        this.deleteVisible = true
      } else {
        this.$message({
          message: '请选择要删除的数据',
          type: 'warning'
        })
      }
    },
    // 还原
    handleRestore() {
      if (this.selections.length > 0) {
        this.restoreVisible = true
      } else {
        this.$message({
          message: '请选择要还原的数据',
          type: 'warning'
        })
      }
    },
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row) // 单击选中
    },
    selectionChangeHandler(val) {
      this.selections = val
    },
    handleDelConfirm() {
      this.deleteVisible = false
    },
    handleRestoreConfirm() {
      this.restoreVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
    height: 30px;
    line-height: 30px;
  }
  ::v-deep .head-container .filter-item input{
    height: 30px;
    line-height: 30px;
  }
  .svg-style{
    margin-right: 5px;
  }
</style>