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" />
            <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"
          @row-del="rowDel"
          @on-load="onLoad"
        >
          <template #menu="{ row }">
            <el-button icon="Upload" type="primary" text @click="openFile(row)">
              上传
            </el-button>
            <el-button
              text
              type="primary"
              icon="Download"
              @click="projectReport(row)"
              >下载
            </el-button>
          </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" />
          </div>
        </div>
        <div class="mt-20">
          <el-carousel :interval="4000" type="card" height="400px">
            <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="srcList"
      :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'

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 {
      projectId: '',
      btnTitle: '编辑',
      showImage: false,
      imageIndex: 0,
      progress: '',
      loading: false,
      srcList: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
      ],
      data: [
        {
          fileName: '支付情况表'
        },
        {
          fileName: '工程完工月报表'
        },
        {
          fileName: '工程量清单'
        }
      ],
      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: 'year'
          },
          {
            label: '上传时间',
            prop: 'year'
          }
        ]
      },
      images: []
    }
  },
  created() {
    this.projectId = this.$route.query.id
    this.detail()
  },
  methods: {
    detail() {
      this.$api.dispatch
        .home({
          projectId: this.projectId,
          year: this.year,
          month: this.month
        })
        .then(res => {
          if (res.code === 200) {
            this.progress = res.data.processDescribe
          } else {
            this.$message.error(res.msg)
          }
        })
    },
    showImageView(res, index) {
      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
        }
        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 === '编辑' ? '保存' : '编辑'
    },
    rowDel(row, index, done) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return this.$api.inspect.remove({ ids: row.id })
        })
        .then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          // 数据回调进行刷新
          done(row)
          this.onLoad()
        })
        .catch(() => {})
    },
    openFile(row) {
      const routeUrl = this.$router.resolve({
        path: '/home/details',
        query: {
          id: this.projectId,
          type: '0'
        }
      })
      window.open(routeUrl.href, '_blank')
    }
  }
}
</script>

<style scoped></style>