wt_project_web_bak/src/views/store/component/info3.vue

<template>
  <div>
    <div class="padding top flex flex-center flex-justify-between">
      <span>入库附件清单</span>
    </div>
    <div class="padding-left padding-right mt-20" style="padding: 20px">
      <avue-crud
        :option="option"
        :data="data"
        ref="crud"
        v-model="form"
        v-model:page="page"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @on-load="onLoad"
      >
        <template #menu-left>
          <div>
            <el-dropdown @command="openFile">
              <el-button type="primary">
                上传附件
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="1"
                    >备案证/可研批复
                  </el-dropdown-item>
                  <el-dropdown-item command="2">合同</el-dropdown-item>
                  <el-dropdown-item command="3">工程量清单</el-dropdown-item>
                  <el-dropdown-item command="4">现场照片</el-dropdown-item>
                  <el-dropdown-item command="5"
                    >项目核实认定表
                  </el-dropdown-item>
                  <el-dropdown-item command="6">其他资料</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-button type="primary" plain @click="exportFile"
              >导 出</el-button
            >
          </div>
        </template>

        <template #menu-right>
          <el-button icon="Refresh" circle @click="onLoad"></el-button>
        </template>
        <template #menu="{ row }">
          <div>
            <el-button
              icon="Download"
              type="primary"
              size="mini"
              text
              @click="showDetail(row)"
              >查 看
            </el-button>
            <el-button
              icon="View"
              type="primary"
              size="mini"
              text
              @click="previewFile(row)"
              >预 览
            </el-button>

            <el-button
              icon="Download"
              type="primary"
              size="mini"
              text
              @click="downLoad(row)"
              >下 载
            </el-button>
            <el-button
              icon="Download"
              type="primary"
              size="mini"
              text
              @click="openFolder(row)"
              >打开文件夹
            </el-button>
            <el-button
              icon="Delete"
              type="primary"
              size="mini"
              text
              @click="rowDel(row)"
              >删 除
            </el-button>
          </div>
        </template>
      </avue-crud>
    </div>
    <el-image-viewer
      v-if="showImage"
      :url-list="preList"
      @close="showImage = false"
    />
    <!--dialog-->
    <el-dialog v-model="show" width="800px" title="附件要素">
      <el-descriptions title="合同">
        <el-descriptions-item label="Username"
          >kooriookami
        </el-descriptions-item>
        <el-descriptions-item label="Telephone"
          >18100000000
        </el-descriptions-item>
        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
        <el-descriptions-item label="Remarks">
          <el-tag size="small">School</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="Address"
          >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api/index.js'
import { ElMessageBox } from 'element-plus'
import subInfo from '@/views/store/component/subInfo.vue'
export default {
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  components: { subInfo },
  data() {
    return {
      pid: '',
      showImage: false,
      uploadShow: false,
      show: false,
      preList: [],
      form: {},
      data: [],
      page: {
        current: 1,
        size: 10
      },
      option: {
        align: 'center',
        menuWidth: 420,
        height: 525,
        size: 'mini',
        addBtn: false,
        delBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        labelWidth: 140,
        border: true,
        column: [
          {
            label: '附件类型',
            prop: 'type',
            type: 'select',
            dicData: [
              {
                label: '备案证/可研批复',
                value: 1
              },
              {
                label: '合同',
                value: 2
              },
              {
                label: '工程量清单',
                value: 3
              },
              {
                label: '现场照片',
                value: 4
              },
              {
                label: '项目核实认定表',
                value: 5
              },
              {
                label: '其他资料',
                value: 6
              }
            ]
          },
          {
            label: '附件名称',
            prop: 'title',
            type: 'input'
          },
          {
            label: '上传时间',
            prop: 'createTime'
          }
        ]
      }
    }
  },
  created() {
    this.pid = this.$route.query.id
  },
  methods: {
    onLoad() {
      const data = Object.assign(this.page, { id: this.pid })
      this.$api.store.fileList(data).then(res => {
        if (res.code === 200) {
          if (res.data.files.length === 0) {
            this.data.length = 0
            return
          }
          this.data = res.data.files.map(ele => {
            delete ele.fileId
            const tmp = ele.fileFolder
            tmp.folderId = tmp.id
            delete tmp.id
            return Object.assign(tmp, ele)
          })
        }
      })
    },
    currentChange(currentPage) {
      this.page.current = currentPage
    },
    sizeChange(pageSize) {
      this.page.size = pageSize
    },
    refreshChange() {
      this.onLoad()
    },
    /**
     * 文件下载
     * @param row
     */
    downLoad(row) {
      window.open(row.url, '_blank')
    },
    /**
     * 文件预览
     * @param item
     */
    previewFile(item) {
      if (api.offices.includes(item.suffix)) {
        const routeData = this.$router.resolve({
          path: '/home/file_detail',
          query: { id: item.fileId }
        })
        window.open(routeData.href, '_blank')
      } else {
        this.preList.length = 0
        this.preList.push(item.url)
        this.showImage = true
      }
    },
    /**
     * 打开文件夹
     * @param item
     */
    openFolder(item) {
      console.log(item)
      const data = this.$router.resolve({
        path: '/home/files',
        query: {
          id: item.parentId,
          projectId: item.projectId
        }
      })
      window.open(data.href, '_blank')
    },
    /**
     * 打开文件
     * @param row
     */
    openFile(row) {
      const routeUrl = this.$router.resolve({
        path: '/home/details',
        query: {
          pid: this.pid,
          id: this.info.id,
          dispatchType: row,
          type: 4
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    exportFile() {
      console.log('export')
      this.$api.store
        .exportFile({ projectId: this.info.projectId })
        .then(res => {
          if (res.code === 200) {
            ElMessageBox.alert(
              '智能生成文档中，生成完成后系统将会发送通知消息给您！',
              ''
            )
          }
        })
    },
    rowDel(row) {
      ElMessageBox.confirm('确定要执行删除操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        if (res === 'confirm') {
          const data = {
            id: row.id,
            projectId: row.projectId,
            fileId: row.folderId
          }
          this.$api.store.removeFile(data).then(res => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this.onLoad()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    /**
     * 查看 文件要素
     * @param row
     */
    showDetail(row) {
      this.$api.store
        .showDetail({ fileId: row.folderId, projectId: row.projectId })
        .then(res => {
          if (res.code === 200) {
            if (Object.keys(res.data).length === 0) {
              this.$message.error('文件正在解析中或者文件解析失败，暂无数据')
            } else {
              this.show = true
            }
          } else {
            this.$message.error(res.msg)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  height: 35px;
  border-radius: var(--el-card-border-radius);
  background-color: #f5f5f3;
}
</style>