wt_project_web_bak/src/views/home/component/dispatch.vue

<template>
  <basic-container>
    <div class="flex flex-col padding-left" style="width: 95%">
      <div class="text-left grey-6 font-18 bold">
        {{ year }}年{{ month }}月项目进度信息填报
      </div>
      <!------进度描述------>
      <div>
        <div class="flex flex-center flex-justify-between mt-20">
          <span class="bold font-18 main-color">进度描述</span>
          <div class="flex flex-center">
            <base-button
              type="0"
              title="批量导出"
              icon="upload"
              @click="exportFile"
            />
            <base-button
              class="ml-10"
              :title="btnTitle"
              icon="upload"
              @click="edit"
            />
          </div>
        </div>
        <div class="mt-20">
          <el-input
            v-model="progress"
            :rows="10"
            type="textarea"
            :disabled="btnTitle === '编辑'"
            placeholder="填写项目进度信息"
          />
        </div>
      </div>
      <!------相关文件------>
      <div class="mt-20">
        <div class="flex flex-center flex-justify-between mt-20">
          <span class="bold font-18 main-color">相关文件</span>
        </div>
        <avue-crud
          ref="crud"
          v-model="form"
          v-model:page="page"
          :data="data"
          :option="option"
          :table-loading="loading"
          class="curd"
          :before-open="beforeOpen"
          @row-del="rowDel"
        >
          <template #menu="{ row }">
            <el-button icon="Upload" type="primary" text @click="openFile(row)">
              上传
            </el-button>
            <el-button
              text
              type="primary"
              icon="Download"
              @click="fileDownload(row)"
              >下载
            </el-button>
          </template>
          <template #menu-right>
            <div class="full-width">
              <el-button
                icon="el-icon-refresh"
                circle
                @click="detail"
              ></el-button>
            </div>
          </template>
          <template #isuploaded="{ row }">
            <div>
              {{ row.isUploaded === 1 ? '已上传' : '' }}
            </div>
          </template>
          <template #filefolder="{ row }">
            <div v-if="row.fileFolder">
              {{ row.fileFolder.title }}
            </div>
          </template>
        </avue-crud>
      </div>
      <!------现场图片------>
      <div class="mb-20">
        <div class="flex flex-center flex-justify-between mt-20">
          <span class="bold font-18 main-color">施工现场图</span>
          <div class="flex flex-center">
            <base-button
              type="0"
              title="上传"
              icon="upload"
              @click="
                openFile({
                  dispatchType: 4
                })
              "
            />
          </div>
        </div>
        <div class="mt-20">
          <el-empty description="暂无施工现场图" v-if="srcList.length === 0" />
          <el-carousel
            v-else
            autoplay
            :interval="4000"
            type="card"
            height="400px"
            :initial-index="0"
          >
            <el-carousel-item v-for="(item, index) in srcList" :key="item">
              <el-image
                :src="item"
                fit="cover"
                @click="showImageView(item, index)"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <el-image-viewer
      v-if="showImage"
      :url-list="preList"
      :initial-index="imageIndex"
      @close="showImage = false"
    />
  </basic-container>
</template>

<script>
import BasicContainer from '@/components/basic-container/main.vue'
import baseButton from '@/components/base-button.vue'
import api from '@/api/index.js'

export default {
  name: 'dispatch',
  components: { BasicContainer, baseButton },
  props: {
    year: {
      type: Number,
      default: 0
    },
    month: {
      type: Number,
      default: 0
    }
  },
  watch: {
    year: {
      handler(val) {
        if (val) {
          this.detail()
        }
      },
      immediate: false
    },
    month: {
      handler(val) {
        if (val) {
          this.detail()
        }
      },
      immediate: false
    }
  },
  data() {
    return {
      preList: [],
      projectId: '',
      btnTitle: '编辑',
      showImage: false,
      imageIndex: 0,
      progress: '',
      info: null,
      loading: false,
      srcList: [],
      data: [
        {
          fileName: '支付情况表',
          dispatchType: 1
        },
        {
          fileName: '工程完工月报表',
          dispatchType: 2
        },
        {
          fileName: '工程量清单',
          dispatchType: 3
        }
      ],
      form: {},
      option: {
        menuBtnTitle: '操作',
        refreshBtn: false,
        tip: false,
        columnBtn: false,
        selection: false,
        editBtn: true,
        editBtnText: '打开',
        editBtnIcon: 'FolderOpened',
        addBtn: false,
        delBtn: true,
        border: true,
        reserveSelection: true,
        align: 'center',
        viewBtn: true,
        menuWidth: 500,
        viewBtnText: '预览',
        dialogClickModal: false,
        column: [
          {
            label: '文件类别',
            prop: 'fileName'
          },
          {
            label: '文件名称',
            prop: 'fileFolder',
            slot: true
          },
          {
            label: '上传状态',
            prop: 'isUploaded',
            slot: true
          },
          {
            label: '上传时间',
            prop: 'createTime'
          }
        ]
      },
      images: []
    }
  },
  created() {
    this.projectId = this.$route.query.id
    this.detail()
  },
  methods: {
    detail() {
      this.data = [
        {
          fileName: '支付情况表',
          dispatchType: 1
        },
        {
          fileName: '工程完工月报表',
          dispatchType: 2
        },
        {
          fileName: '工程量清单',
          dispatchType: 3
        }
      ]
      this.srcList.length = 0
      const data = {
        projectId: this.projectId,
        year: this.year,
        month: this.month
      }
      this.$api.dispatch.home(data).then(res => {
        if (res.code === 200) {
          this.progress = res.data.processDescribe
          this.info = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
      this.$api.dispatch.homeFile(data).then(res => {
        if (res.code === 200) {
          const tmp = res.data
          if (tmp && tmp.length > 0) {
            this.data = this.data.map(sub => {
              const item = tmp.find(ele => ele.type === sub.dispatchType)
              if (item) {
                sub = Object.assign(sub, item)
              }
              return sub
            })
            const img = tmp.filter(ele => ele.type === 4)
            if (img && img.length > 0) {
              img.forEach(i => {
                this.srcList.push(i.fileFolder.url)
              })
            }
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    showImageView(res, index) {
      this.preList = this.srcList
      this.imageIndex = index
      this.showImage = true
    },
    edit() {
      if (this.btnTitle === '保存' && this.progress.length > 0) {
        const data = {
          projectId: this.projectId,
          year: this.year,
          month: this.month,
          processDescribe: this.progress,
          id: this.info ? this.info.id : ''
        }
        this.$api.dispatch.saveOrUpdate(data).then(res => {
          if (res.code === 200) {
            console.log(res)
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
      }
      this.btnTitle = this.btnTitle === '编辑' ? '保存' : '编辑'
    },
    beforeOpen(done, type) {
      if (type === 'view') {
        this.previewFile(this.form)
      } else if (type === 'edit') {
        if (!Object.hasOwn(this.form, 'fileFolder')) {
          this.$message.error('暂无文件')
          return
        }
        this.$router.push({
          path: '/home/files',
          query: {
            id: this.form.fileFolder.parentId,
            projectId: this.projectId
          }
        })
      } else {
        done()
      }
    },
    previewFile(item) {
      if (item.id === undefined || item.length === 0) {
        this.$message.error('暂无文件')
        return
      }
      if (api.offices.includes(item.fileFolder.suffix)) {
        const routeData = this.$router.resolve({
          path: '/home/file_detail',
          query: { id: item.fileFolder.fileId }
        })
        window.open(routeData.href, '_blank')
      } else {
        this.preList.length = 0
        this.preList.push(item.fileFolder.url)
        this.showImage = true
      }
    },
    rowDel(row, index, done) {
      if (!Object.hasOwn(row, 'fileFolder')) {
        this.$message.error('暂无文件')
        return
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.project.fileRemove({ ids: row.fileId, type: 2 }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.detail()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    openFile(row) {
      const routeUrl = this.$router.resolve({
        path: '/home/details',
        query: {
          id: this.projectId,
          dispatchType: row.dispatchType,
          type: 2,
          year: this.year,
          month: this.month
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    fileDownload(res) {
      if (Object.hasOwn(res, 'fileFolder')) {
        window.open(res.fileFolder.url)
      } else {
        this.$message.error('暂无文件')
      }
    },
    exportFile() {
      const data = {
        projectId: this.projectId,
        year: this.year,
        month: this.month
      }
      this.$api.dispatch.exportFile(data).then(res => {
        if (res.size === 0) {
          this.$message.error('下载错误，请稍后再试...')
          return
        }
        this.$message.success('开始下载,请稍后...')
        this.download(res)
      })
    },
    download(res) {
      const url = window.URL.createObjectURL(
        new Blob([res], { type: 'application/octet-stream;charset=UTF-8' })
      )
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      const excelName = this.year + '年' + this.month + '月.zip'
      link.setAttribute('download', excelName)
      document.body.appendChild(link)
      link.click()
      link.remove()
      this.diaType = -1
      this.$message.success('导出成功')
    }
  }
}
</script>

<style scoped></style>