xiaoshi_system/src/views/report/components/reportFile/reportFileTable.vue

<template>
  <div class="reportFileTable height_100">
    <el-container>
      <el-header style="display:flex;justify-content: space-between;">
        <div>
          <!-- <mySearch :SearchFields="searchFiled" @search="search" :searchValue="searchOption"></mySearch> -->
          <el-form :inline="true" class="margin-left_20">
            <el-form-item label="名称">
              <el-input v-model="searchOption.referencesName" size="small" placeholder="请输入当前名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="getList">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="margin-right_10">
          <el-button type="primary" size="small" @click="handleAdd()">新增</el-button>
        </div>
      </el-header>
      <el-main class="height_100">
        <el-table v-loading="loading" :data="tableData" style="width: 100%;" border
          header-row-class-name="custom-table-header" @sort-change="sortChange">
          <el-table-column label="#" align="center" width="80px">
            <template slot-scope="scope">
              <div>
                {{ (queryParams.current - 1) * queryParams.size + 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="item.noSort?false:'custom'" align="center">
            <template slot-scope="scope">
              <div v-if="['name'].includes(item.value)">
                <el-tooltip :content="$commonJS.getColumnData(scope.row, item)" placement="top">
                  <span v-html="$commonJS.getColumnData(scope.row, item)"></span>
                </el-tooltip>
              </div>
              <div v-else v-html="$commonJS.getColumnData(scope.row, item)"></div>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-dropdown split-button type="primary" size="small" @command="handleCommand($event, scope.row)">
                <span @click="handleCommand('e', scope.row)">编辑</span>

                <el-dropdown-menu slot="dropdown" class="text-align_center">
                  <el-dropdown-item command="0">下载</el-dropdown-item>
                  <el-dropdown-item command="1">预览</el-dropdown-item>
                  <el-dropdown-item command="2" divided style="color: red;">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

      </el-main>
      <el-footer>
        <div class="pagination">
          <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total"
            @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
        </div>
      </el-footer>
    </el-container>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" append-to-body destroy-on-close
      :close-on-click-modal="false" :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px" label-position="left">
        <el-form-item label="文件名称" prop="referencesName">
          <el-input v-model="form.referencesName" placeholder="请输入文件名称"></el-input>
        </el-form-item>
        <el-form-item label="文件选择" class="margin-bottom_0">
          <myUpload :file-list="form.systemFileList" @on-change="onchangeFile" @on-remove="onRemove" :multiple="false"
            style="height: 185px;" :autoUpload="true">
          </myUpload>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { downLoad2 } from "@/utils"
export default {
  props: ['projectId'],
  data() {
    return {
      // table数据
      tableData: [],
      // 分页及总数信息
      queryParams: {
        current: 1,
        size: 10,
      },
      total: 0,
      // 表格字段
      columnList: [
        {
          name: "名称",
          type: "String",
          value: "referencesName",
        },
        {
          name: "类型",
          type: "String",
          value: "type",
          noSort:true
        },
        {
          name: "所属项目",
          type: "String",
          value: "projectName",
        },
        {
          name: "创建人",
          type: "String",
          value: "createName",
        },
        {
          name: "创建时间",
          type: "String",
          value: "createTime",
        },
        {
          name: "备注",
          type: "String",
          value: "remark",
        },
      ],
      // 检索字段
      searchFiled: [
        {
          label: '名称',
          value: 'referencesName',
          type: 1,
          placeholder: '请输入名称'
        },
      ],
      // 检索字符串
      searchOption: {},
      //排序字段
      sort: [{ "orderBy": "createTime", "orderType": 1 }],
      // 表格loading
      loading: false,
      // 
      title: '',
      // 控制上传弹窗显示
      dialogVisible: false,
      // 表单数据
      form: {
        systemFileList: [],
      },
      // 表单校验
      rules: {
        referencesName: [{ required: true, message: '请输入文件名称', trigger: 'blur' },],
      },
    }
  },
  async mounted() {
    // 获取table栏位
    // this.columnList = await this.$commonJS.getCustomField('projectTask')
    // 获取栏位
    // await this.getColumn()
    // 获取数据
    this.getList()
  },
  methods: {
    // 弹窗确定
    submit() {
      // 判断文件是否都上传完毕
      this.$commonJS.allUploadFile(this.form)
      this.form.fileGuid=this.form.fileGuids[0]
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.form.id) {
            this.$api.addReferences(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success('新增成功')
                this.getList()
                this.handleClose()
              }
            }).catch(error => {

            })
          } else {
            this.$api.updateReferences(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success('编辑成功')
                this.getList()
                this.handleClose()
              }
            }).catch(error => {

            })
          }
        }
      })

    },
    // 关闭弹窗
    handleClose() {
      this.$refs.form.resetFields()
      this.form = {
        systemFileList: [],
      }
      this.dialogVisible = false
    },
    // 上传的文件监听
    onchangeFile(file, fileList) {
      if (this.form.systemFileList && this.form.systemFileList.length > 0) {
        return false
      }
      if (file) {
        this.$set(this.form, 'referencesName', file.name)
      }
      if (file.guid && this.form.systemFileList && this.form.systemFileList.length > 0) {
        let index = this.form.systemFileList.findIndex(item => {
          return item.uid == file.uid
        })
        if (index != -1) {
          this.form.systemFileList.splice(index, 1, file)
        } else {
          this.form.systemFileList.push(file.raw)
        }
      } else {
        this.form.systemFileList.push(file.raw)
      }
    },
    // 删除上传的文件
    onRemove(file, fileList) {
      let index = this.form.systemFileList.findIndex(item => {
        return item.uid == file.uid
      })
      if (index != -1) {
        this.form.systemFileList.splice(index, 1)
      }
    },
    // 新增
    handleAdd() {
      this.title='新增报告文档'
      this.form.projectId = this.projectId
      this.dialogVisible = true
    },
    getList() {
      
      let params = {
        projectId: this.projectId,//放在外面还是searchQuery里面??
        ...this.queryParams,//分页信息
        fileName:this.searchOption.referencesName,
        // searchQuery: this.$commonJS.objectToString(this.searchOption || {}),//检索条件
        orderDTOList: this.sort,//排序信息
      }
      this.loading = true
      this.$api.getReferences(params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data
          this.total = res.data.total
          this.loading = false
        }
      }).catch(error => {
        this.tableData = []
        this.total = 0
        this.loading = false
      })
    },
    // 分页
    handleCurrentChange(val) {
      this.queryParams.current = val
      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()
    },
    // 检索
    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 = params
      // 调用查询接口
      this.queryParams.current = 1
      this.getList()
    },
    // 编辑等下拉菜单
    handleCommand(ev, row) {
      switch (ev) {
        case 'e'://编辑
          this.handleEdit(row)
          break;
        case '0'://下载
          downLoad2(row.fileGuid)
          break;
        case '1'://预览
          row.fileName = row.referencesName
          this.$commonJS.previewFile(row,row.fileGuid,row.type)
          break;
        case '2'://删除
          this.handleDelete(row)
          break;

        default:
          break;
      }
    },
    // 编辑
    handleEdit(row) {
      row.systemFileList = [{
        name: row.referencesName,
        guid:row.guid,
      }]
      this.title='编辑报告文档'
      this.form = row
      this.dialogVisible = true
    },
    // 删除
    handleDelete(data) {
      this.handleDeletes([data.id])
    },
    handleDeletes(ids) {
      this.$confirm('删除后不可恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deleteReferences(ids).then(response => {
          if (response.code == 200) {
            this.$message.success('删除成功')
            this.queryParams.current = 1
            this.getList()
          }
        })
      }).catch(() => {
        this.$message.info('操作已取消')
      });
    },
  },
}
</script>

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