lh_firm_former/src/views/infosManage/externalFiles/externalFiles.vue

<template>
  <ibps-layout ref="layout">
    <!-- 外部 -->
    <div slot="west">
      <div class="box">
        <p class="title">文件类型</p>
        <el-input placeholder="输入关键字进行过滤"
                  v-model="filterText">
        </el-input>
        <div class="treeDiv">
          <el-tree ref="tree"
                   :data="typeData"
                   :props="defaultProps"
                   @node-click="handleNodeClick"
                   :filter-node-method="filterNode"></el-tree>
        </div>
      </div>
      <ibps-container :margin-left="width + 'px'"
                      class="page">
        <el-alert v-if="!show"
                  :closable="false"
                  title="请选择左边菜单右键进行操作！"
                  type="warning"
                  show-icon
                  style="height:50px;" />
        <template v-else>
          <ibps-crud key="istree"
                     ref="crud"
                     :data="tableData"
                     :toolbars="listConfig.toolbars"
                     :search-form="listConfig.searchForm"
                     :pk-key="pkKey"
                     :columns="listConfig.columns"
                     :loading="loading"
                     @sort-change="handleSortChange"
                     @action-event="handleAction">
            <template slot="wenjinachayue"
                      slot-scope="scope">
              <ibps-attachment :value="scope.row.wen_jian_id_"
                               readonly
                               allow-download
                               :download="false" />
            </template>
          </ibps-crud>
        </template>
      </ibps-container>

    </div>
  </ibps-layout>
</template>
<script>
import ActionUtils from '@/utils/action'
import { getFileType, getFileByUserId } from '@/api/permission/file'
import IbpsAttachment from '@/business/platform/file/attachment/selector'
import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'

export default {
  components: {
    'ibps-attachment': IbpsAttachment
  },
  data() {
    return {
      show: '',
      rightsArr: ['join', 'delete'],
      rowHandle: true,
      width: 230,
      orgId: '',
      oldorgId: '',
      orgName: '',
      loading: false,
      typeData: [
        { id: '0', label: '技术类' },
        { id: '1', label: '管理类' },
        { id: '2', label: '参考文献' },
        { id: '3', label: '设备说明资料' },
        { id: '4', label: '其它' }
      ],
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      pkKey: 'id', // 主键  如果主键不是pk需要传主键
      tableData: [],
      listTreeData: [],
      listConfig: {
        // 工具栏
        toolbars: [
          { key: 'search' }
        ],
        // 查询条件
        searchForm: {
          forms: [
            { prop: 'fileCode', label: '文件编号' },
            { prop: 'fileName', label: '文件名称' },
            // { prop: 'deptName', label: '部门' },
          ]
        },
        // 表格字段配置
        columns: [
          // { prop: 'zi_duan_yi_', label: '部门' },
          { prop: 'wen_jian_bian_hao', label: '文件编号', sortable: 'custom', width: 150 },
          { prop: 'wen_jian_ming_che', label: '文件名称' },
          { prop: 'ban_ben_hao_', label: '版本号', width: 150 },
          { prop: 'fa_bu_ri_qi_', label: '发布日期', width: 150, sortable: 'custom' },
          { prop: 'wen_jian_id_', label: '查阅', slotName: "wenjinachayue" }
        ]
      },
      listOptions: {
        border: true,
        stripe: true
      },
      pagination: {},
      sorts: {},
      // testData: [{
      //     zi_duan_yi_: '1',
      //     wen_jian_bian_hao: '2',
      //     wen_jian_ming_che: '3',
      //     ban_ben_hao_: '4',
      //     fa_bu_ri_qi_: '5',
      //     wen_jian_id_: '880481571788816384'
      // }]
    }
  },
  mounted() {
    // this.loadNode()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    loadNode() {
      this.loading = true
    },
    refreshData() {
      this.tableData = []
      this.getDatas(this.getSearcFormData())
    },

    handleNodeClick(data) {
      this.oldorgId = data
      this.show = 'detail'
      if (this.oldorgId == data.id) {
        return
      } else {
        this.getDatas({
          fileType: this.typeData[data.id].label,
          sorts: { 'wen_jian_bian_hao': 'desc' }
        })
      }
    },

    /**
     * 获取格式化参数
     */
    getSearcFormData() {
      const params = this.$refs['crud'] ? this.$refs['crud'].getSearcFormData() : {}
      params['fileType'] = this.typeData[this.oldorgId.id].label
      params['sorts'] = this.sorts
      return params
    },
    /**
     * 处理按钮事件
     */
    handleAction(command, position, selection, data) {
      switch (command) {
        case 'search':// 查询
          this.refreshData()
          break
        default:
          break
      }
    },
    /**
    * 处理排序
    */
    handleSortChange(sort) {
      ActionUtils.setSorts(this.sorts, sort)
      this.getDatas(this.getSearcFormData())
    },
    getDatas(sorts) {
      this.tableData = []
      let wheres = ''
      if (sorts.fileCode) {
        wheres = wheres + ` and wen_jian_bian_hao like '%${sorts.fileCode}%'`
      }

      if (sorts.fileType) {
        wheres = wheres + ` and wai_bu_wen_jian_l = '${sorts.fileType}'`
      }
      if (sorts.fileName) {
        wheres = wheres + ` and wen_jian_ming_che like '%${sorts.fileName}%'`
      }
      if (sorts.sorts) {
        if (JSON.stringify(sorts.sorts) !== "{}") {
          wheres = wheres + ` order by  ${Object.keys(sorts.sorts)}  ${Object.values(sorts.sorts)}`
        }
      }

      let sql = `select *FROM t_wjgl WHERE wen_jian_zhuang_t = '已发放' AND yi_gai_zuo_fei_='否' ${wheres} `
      curdPost('sql', sql).then(res => {
        this.tableData = res.variables.data
      }).catch(res => {
        this.loading = false
        this.tableData = []
      })
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
}
</script>
<style lang="less" scoped>
.box {
  width: 210px;
}

.title {
  font-size: 14px;
  margin: 21px 5px 5px;
  padding: 0;
}

.treeDiv {
  height: 800px;
  overflow-y: auto;
}

/deep/ .el-tree-node__content {
  display: block;
}
</style>