kd-aiot-frontend/src/views/material/BOMmanage/file/index.vue

<template>
  <el-dialog
    title="工艺文件"
    :visible.sync="visible"
    v-if="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
  >
    <div>
      <el-card shadow="never" v-loading="loading">
        <ele-split-layout
          width="240px"
          allow-collapse
          :right-style="{ overflow: 'hidden' }"
        >
          <div>
            <div class="ele-border-lighter sys-organization-list">
              <el-tree
                ref="treeRef"
                :data="fileTreeList"
                highlight-current
                :draggable="true"
                node-key="id"
                :props="{ label: 'name', children: 'sonDirectoryList' }"
                :expand-on-click-node="false"
                :default-expand-all="true"
                @node-click="onNodeClick"
                :allow-drop="allowDrop"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <div class="tree_lab">
                    <img src="@/assets/wjj.png" />
                    <span>{{ node.label }}</span></div
                  >
                </span>
              </el-tree>
            </div>
          </div>
          <template v-slot:content>
            <!-- 数据表格 -->
            <ele-pro-table
              ref="table"
              :columns="columns"
              :datasource="datasource"
              :initLoad="false"
              height="calc(60vh)"
              tool-class="ele-toolbar-form"
              :needPage="false"
              row-key="id"
              :selection.sync="selection"
              highlight-current-row
            >
            </ele-pro-table>
          </template>
        </ele-split-layout>
      </el-card>
    </div>

    <div slot="footer">
      <el-button type="primary" @click="handleSave"> 选择 </el-button>
      <el-button @click="handleClose"> 取消 </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getDocTreeListAPI, filePageAPI } from '@/api/material/file';
  import { mapGetters } from 'vuex';

  export default {
    components: {},
    mixins: [],

    data() {
      return {
        // 加载状态
        loading: false,
        // 表格选中数据
        selection: [],

        visible: true,
        fileTreeList: [],
        fileType: 0, //0：公共文档 1：个人文档 2：文档模板
        parentData: {},

        // 表格列配置
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            label: '编码',
            prop: 'code',
            width: 180,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '文档名称',
            align: 'center',
            slot: 'name',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'storagePath',
            label: '文件名称',
            align: 'center',

            showOverflowTooltip: true,
            minWidth: 200,
            formatter: (_row, _column, cellValue) => {
              return cellValue[0]?.name;
            }
          },
          {
            prop: 'version',
            label: '版本',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'checkOutUserName',
            label: '检出人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'checkOutStatus',
            label: '检出状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              return cellValue == 1 ? '已检出' : '';
            }
          },
          {
            prop: 'checkOutTime',
            label: '检出时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160
          },
          {
            prop: 'createUserName',
            label: '创建人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160
          },
          {
            prop: 'updateUserName',
            label: '修改人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'updateTime',
            label: '修改时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160
          },
          {
            prop: 'sizeUnit',
            label: '文档大小',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          }
        ]
      };
    },
    computed: {
      ...mapGetters(['user'])
    },
    mounted() {
      this.query();
    },
    methods: {
      query() {
        this.loading = true;
        let query = {
          type: this.fileType,
          currentUserId: this.user.info.userId
        };
        getDocTreeListAPI(query).then((res) => {
          this.fileTreeList = res;
          if (res.length > 0) {
            this.$nextTick(() => {
              this.parentData = res[0];
              this.$refs.treeRef.setCurrentKey(res[0].id);
              this.reload();
            });
          }
        });
        this.loading = false;
      },

      datasource({ page, limit, where }) {
        return filePageAPI({
          ...where,
          pageNum: page,
          size: limit,
          directoryId: this.parentData?.id,
          lcyStatus: 1,
          fileType: 0
        });
      },
      /* 刷新表格 */
      reload() {
        this.$refs.table.reload({
          pageNum: 1
        });
      },

      allowDrop(draggingNode, dropNode, type) {
        //拖拽限制
        return dropNode.parent.id == draggingNode.parent.id && type != 'inner';
      },

      /* 选择数据 */
      onNodeClick(row) {
        if (row) {
          this.parentData = row;
          this.$nextTick(() => {
            this.reload();
          });
        }
      },

      handleClose() {
        this.$emit('close', false);
      },
      handleSave() {
        if(this.selection.length == 0) return this.$message.warning('请选择一条数据')
        this.$emit('close', JSON.parse(JSON.stringify(this.selection)));
      },

      /* 表格操作按钮事件 */
      handleOperation(type, data) {
        switch (type) {
          case 'checkOut':
            this.checkOut(data);
            break;
          case 'checkIn':
            this.checkIn(data);
            break;
          default:
            break;
        }
      },

      // 检出文档
      checkOut(row) {
        let query = {
          id: row.id,
          userId: this.user.info.userId
        };
        checkOutAPI(query).then((res) => {
          this.$message({
            type: 'success',
            message: res.msg,
            duration: 1000
          });
          this.reload();
        });
      },

      // 归还文档
      checkIn(row) {
        let query = {
          id: row.id,
          userId: this.user.info
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .sys-organization-list {
    height: calc(100vh - 264px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }
  .tree_lab {
    display: flex;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
    }
  }
</style>