xiaoshi_system/src/views/patentMining/components/fileMessage.vue

<template>
  <!-- 详情文件 -->
  <div class="height_100">
    <el-container>
      <el-header style="display: flex;justify-content: space-between;align-items: center;">
        <div>
          <!-- <mySearch :SearchFields="searchFiled" @search="search" :searchValue="searchOption"></mySearch> -->
        </div>
        <div style="display:flex;margin-right:10px">
          <!-- <el-button-group class="margin-left_10">
                    <el-button :type="queryShowType === '0' ? 'primary' : ''" @click="onChange2('0')" size="small">列表</el-button>
                    <el-button :type="queryShowType === '1' ? 'primary' : ''" @click="onChange2('1')" size="small">卡片</el-button>
                  </el-button-group> -->
          <el-button type="primary" size="small" @click="uploadFile">上传文件</el-button>
        </div>
      </el-header>
      <el-main>
        <el-table :data="tableData" style="width: 100%;" border header-row-class-name="custom-table-header"
         >
          <el-table-column label="#" align="center" width="100px">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + 1 }}
              </div>
            </template>
          </el-table-column>


          <el-table-column v-for="item in columnList" :key="item.value" :prop="item.value"
            :render-header="$commonJS.renderHeaderMethods" :label="item.name" sortable align="center">
            <template slot-scope="scope">
              <div v-if="['name'].includes(item.value)">
                <!-- <el-link @click="handleItem(scope.row, item.value)"> -->
                <span v-html="$commonJS.getColumnData(scope.row, item)"></span>
                <!-- </el-link> -->
              </div>
              <div v-else-if="['ifFinal'].includes(item.value)"
                v-html="$commonJS.getColumnData(scope.row, item, null, { data: ifFinal })"></div>
              <!-- <div v-else-if="['type'].includes(item.value)"
                v-html="$commonJS.getColumnData(scope.row, item, null, { data: taskType })"></div>
              <div v-else-if="['status'].includes(item.value)"
                v-html="$commonJS.getColumnData(scope.row, item, null, { data: taskStatus })"></div> -->
              <div v-else v-html="$commonJS.getColumnData(scope.row, item)"></div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="150px">
            <template slot-scope="scope">
              <div>
                <!-- <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button> -->
                <!-- <el-button type="danger"  @click="handleDelete(scope.row)">删除</el-button> -->
                <el-dropdown split-button type="primary" size="small" @command="handleCommand($event,scope.row)" @click="handleCommand('0',scope.row)">
                  预览
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">下载</el-dropdown-item>
                    <el-dropdown-item command="2" divided style="color: red;" v-if="scope.row.id">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- <el-footer class="pagination">
        <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
          :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="queryParams.total">
        </el-pagination>
      </el-footer> -->
    </el-container>

    <uploadFile ref="uploadFile" @isSuccess="isSuccess" :processId="processId"></uploadFile>
  </div>
</template>

<script>
import { optionsData } from './mixins/index2'
import uploadFile from './dialog/uploadFile.vue'
import {File} from '@/utils/model/menu/mixins'
export default {
  props: ['id', 'processId'],
  mixins: [optionsData,File],
  components: {
    uploadFile
  },
  data() {
    return {
      ifFinal: {
        false: '否',
        true: '是',
      },
      // 数据源
      tableData: [],
      // table栏位信息
      columnList: [
        {
          name: "文件流程",
          type: "String",
          value: "path",
        },
        {
          name: "文件上传人",
          type: "Integer",
          value: "createName",
        },
        {
          name: "文件上传时间",
          type: "DateTime",
          value: "createTime",
        },
        {
          name: "文件类型",
          type: "String",
          value: "type",
        },
        {
          name: "是否最终文件",
          type: "DateTime",
          value: "endFile",
        },
        {
          name: "说明",
          type: "DateTime",
          value: "description",
        },
      ],
      // 分页信息
      queryParams: {
        current: 1,
        size: 10,
        total: 0,
      },
      // 检索字段
      searchFiled: [],
      // 检索字符串
      searchOption: {},
      //排序字段
      sort: [{ "orderBy": "createTime", "orderType": 1 }],
      // 复制传过来的参数
      pathObjCopy: this.processId,
    }
  },
  watch: {
    processId(val) {
      if (val) {
        this.pathObjCopy = val
        this.getList()
      }
    },
  },
  computed: {
  },
  async mounted() {
    // 获取table栏位
    this.columnList = await this.$commonJS.getCustomField('patentDigProjectFiles')
    // 获取栏位
    // await this.getColumn()
    // 获取数据
    await this.getList()
  },
  methods: {
    // 新增/更新文件列表成功
    isSuccess(val) {
      this.getList()
    },
    // 获取检索及分组栏位
    async getColumn() {
      let params = ['patentDigProjectFiles']
      await this.$api.getParamsCommon(params).then(res => {
        if (res.code == 200) {
          let conditionDTOList = JSON.parse(JSON.stringify(res.data[0].conditionDTOList))
          // 检索字段
          this.searchFiled = this.$commonJS.getField(conditionDTOList, (u) => u.ifSearch == true, {
            label: 'name',
            value: 'value',
            type: 'type',
          })
          //为所属流程及最终文件添加选项
          let arr = ["processId", 'ifFinal']
          arr.forEach(item => {
            var obj = this.searchFiled.find(item2 => { return item2.value == item })
            if(obj){
              if (item == "processId") {//所属流程
                obj.options = this.pathOptions
              } else {//最终文件
                let isFile = [
                  {label:'是',value:true},
                  {label:'否',value:false},
                ]
                obj.options = isFile
              }
            }
            
          })
          
        }
      })
    },
    // 获取数据
    async getList() {
      let searchOption2 = {
        processId: this.pathObjCopy,//流程节点id
        projectId: this.id,//固有检索
        // ...this.searchOption
      }
      var searchFiled2 = this.$commonJS.objectToArray(searchOption2)
      var searchOption1 = this.searchOption
      if (this.searchOption.constructor == Object) {
        searchOption1 = this.$commonJS.objectToArray(this.searchOption)
      }
      let searchOption = [
        ...searchFiled2,//固有检索字段
        ...searchOption1
      ]
      let params = {
        ...this.queryParams,//分页信息
        searchQuery: this.$commonJS.objectToString(searchOption || {}),//检索条件
        orderDTOList: this.sort,//排序信息
      }

      this.$api.queryPatentDigProjectFiles(searchOption2).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data
          this.queryParams.total = this.tableData.length
        }
      }).catch(error => {
        this.tableData = []
        this.queryParams.total = 0
      })
    },
    // 搜索
    search(val) {
      let params = {}
      val.forEach(item => {
        if (item.type == 3) {
          params[item.value] = item.searchValue.map(itemValue => {
            return itemValue.value
          })
        } else {
          params[item.value] = item.searchValue.label
        }
      })
      // 返回字符串
      this.searchOption = this.$commonJS.ArrayToArray(val)
      // 调用查询接口
      this.queryParams.current = 1
      this.getList()
    },
    //排序
    sortChange({ column, prop, order }) {
      //如需要多个字段排序，则不需要清空
      var params = {
        sort: this.sort,
        column,
        prop,
        order,
      }
      this.sort = this.$commonJS.getSortData(params)
      this.queryParams.current = 1
      this.getList()
    },
    // 上传文件按钮
    uploadFile() {
      this.$refs.uploadFile.open(null, this.id)
    },
    // 编辑文件按钮
    handleEdit(row) {
      this.$refs.uploadFile.open(row)
    },
    // 删除
    handleCommand(event, row) {
      row.guid = row.fileGuid
      switch (event) {
        case '0'://预览
          this.preview(row)
          break;
        case '1'://下载
          this.downLoad(row)
          break;
        case '2'://删除
          this.handleDeletes([row.id])
          break;
      
        default:
          break;
      }
    },
    handleDeletes(ids) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deletePatentDigProjectFiles(ids).then(res => {
          if (res.code == 200) {
            this.$message.success('删除文件成功')
            this.queryParams.current = 1
            this.getList()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      });

    },
    // 分页
    handleCurrentChange(val) {
      this.queryParams.current = val
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped></style>