school_office/src/views/xxgzjc/tjtj/detail.vue

<script>
import { defineComponent, ref, getCurrentInstance, reactive } from "@vue/composition-api";
import request, { download } from '~/utils/request';
import { Message } from 'element-ui'
import pie from './components/pie.vue';
import FileUpload from '@/components/FileUpload/indey.vue';
import { user } from '@/stores/user';

export default defineComponent({
  props: ['id'],
  components: { pie, FileUpload },
  setup(props) {
    // #region (constant)
    const TABLE_KEY = 'jxj_id'
    const URL_CUT = '/jdbg/xxgzjc_jcrw'
    // #endregion


    // #region (variable)
    const loading = ref(true)
    // #endregion


    function detailApi() {
      return request({
        url: URL_CUT + '/detail',
        data: {
          [TABLE_KEY]: props.id,
        }
      })
    }

    const detail_Data = ref()

    // #region (page init)
    async function init() {
      await Promise.all([
        new Promise(async resolve => {
          const res = await detailApi(props.id)
          return resolve(detail_Data.value = (res.data.one_info))
        }),
        queryTableData()
      ])

      loading.value = false
    }
    // #endregion

    const loading_table = ref(false)
    const tableData = ref([])
    const multipleSelection = ref([])
    const handleSelectionChange = (val) => {
      multipleSelection.value = val
    }
    function handleTableColBtn_detail(scope) {
      download(scope.row.jxjtl_path)
    }


    function handleRemind() {
      request({
        url: '/jdbg/xxgzjc_jcrw/send',
        data: {
          jxj_id: props.id
        }
      }).then(res => {
        if (res.code === '1') {
          Message.success('已提醒')
        }
      })
    }



    function handleTableColBtn_download() {
      if (multipleSelection.value?.length) {
        request({
          url: '/upload/main/download_batch',
          data: {
            files: multipleSelection.value.map(({ jxjtl_path }) => jxjtl_path)
          }
        }).then(res => {
          if (res.code === '1') {
            download(res.data.download_url)
          }
        })
      } else {
        Message.info("请先勾选下载的文件")
      }

    }

    const total = ref(0)
    const limit = ref(10)

    const currentPage = ref(1)
    function handleCurrentChange() {
      queryTableData()
    }

    function queryTableData() {
      return request({
        url: '/jdbg/xxgzjc_jcrw_tjjl/index',
        data: {
          jxj_id: props.id,
          limit: limit.value,
          page: currentPage.value,
          jxjx_to_id: user.uo_id
        }
      }).then(res => {
        if (res.code === '1') {
          tableData.value = res.data.page_data
          total.value = res.data.total_rows * 1
        }
      })
    }
    init()


    function handleChange(files) {
      const file = files[0]
      // console.log('file :>> ', file);
      // console.log('object :>> ', {
      //   jxjtl_name: file.name,
      //   jxjtl_scr: user.real_name,
      //   jxjtl_date: new Date().toLocaleDateString(),
      //   jxj_id: props.id,
      //   jxjx_id: undefined,
      //   jxjx_to_id: user.uo_id,
      //   jxjtl_path: file.part_url,
      // });
      request({
        url: '/jdbg/xxgzjc_jcrw_tjjl/add',
        data: {
          jdbg_xxgzjc_jcrw_tjjl: {
            jxjtl_name: file.name,
            jxjtl_scr: user.real_name,
            jxjtl_date: new Date().toLocaleDateString(),
            jxj_id: props.id,
            jxjx_id: undefined,
            jxjx_to_id: user.uo_id,
            jxjtl_path: file.url,
          }
        }
      }).then(res => {
        if (res.code === '1') {
          queryTableData()
        }
      })
    }

    // function handleBeforeUpload(file) {
    //   console.log('file :>> ', file);
    //   return false
    // }

    return {
      loading,
      detail_Data,

      loading_table,
      tableData,
      handleSelectionChange,
      handleTableColBtn_detail,

      handleRemind,
      handleTableColBtn_download,

      currentPage,
      total,
      limit,
      handleCurrentChange,
      handleChange,
      // handleBeforeUpload
    }
  }
})




</script>

<template>
  <div :loading="loading" :key="loading" class="text-sm p-6">
    <template v-if="detail_Data">
      <!--<div class="flex">
          <!~~ <div>检查任务标题</div> ~~>
          <div class="text-2xl">{{ detail_Data.jxj_title }}</div>
        </div>
        <div class="flex">
          <div class="w-3/5">
            <!~~ <div class="flex">
                <div>发起人</div>
                <div>{{ detail_Data.jxj_fqr }}</div>
              </div> ~~>
            <div class="flex mt-6">
              <div>任务结束时间</div>
              <div class="text-hex-969696 ml-3">{{ detail_Data.jxj_wcsj }}</div>
            </div>
            <!~~ <div class="flex">
                <div>完成情况</div>
                <div>{{ detail_Data.jxj_wcqk }}</div>
              </div> ~~>
            <div class="flex mt-8">
              <!~~ <div>检查任务内容</div> ~~>
              <div class="text-base text-hex-AEAEAE">{{ detail_Data.jxj_content }}</div>
            </div>
            <!~~ <div class="flex">
                <div>下发对象JSON</div>
                <div>{{ detail_Data.jxj_xfdx_json }}</div>
              </div>
              <div class="flex">
                <div>归档状态</div>
                <div>{{ detail_Data.jxj_id }}</div>
              </div> ~~>

          </div>

          <!~~ <div class="flex flex-col items-end">
                  <el-button @click="handleRemind" type="primary">提醒</el-button>
                  <pie class="w-2/5 min-w-600px h-300px" :d="detail_Data.progress" />
                </div> ~~>
        </div>-->
      <table class="Tb" width="100%" cellspacing="0" cellpadding="0">
        <tr>
          <td class="titleOpt">检查任务标题：</td>
          <td>{{ detail_Data.jxj_title }}</td>
        </tr>
        <tr>
          <td class="titleOpt">任务结束时间：</td>
          <td>{{ detail_Data.jxj_wcsj }}</td>
        </tr>
        <tr>
          <td class="titleOpt">检查任务内容：</td>
          <td>{{ detail_Data.jxj_content }}</td>
        </tr>
      </table>
      <el-divider></el-divider>
      <file-upload :full="total !== 0 ? `${tableData[0].jxjtl_path}|${tableData[0].jxjtl_name}` : undefined" :limit="1"
        @success="handleChange">
        <el-button type="success" icon="el-icon-plus">提交文件材料</el-button>
      </file-upload>

      <!-- <el-table :data="tableData" @selection-change="handleSelectionChange" element-loading-background="#ffffff70">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="jxjtl_name" label="文件" width="auto" show-overflow-tooltip></el-table-column>
                <el-table-column prop="org_name" label="上传学校" width="auto" show-overflow-tooltip></el-table-column>
                <el-table-column prop="jxjtl_scr" label="上传者" width="auto" show-overflow-tooltip></el-table-column>
                <el-table-column prop="jxjtl_date" label="时间" width="auto" show-overflow-tooltip></el-table-column>
                <el-table-column fixed="right">
                  <template #header>
                    <el-button link :auto-insert-space="false" @click="handleTableColBtn_download()" type="text">批量下载
                    </el-button>
                  </template>
                  <template #default="scope">
                    <el-button link :auto-insert-space="false" @click="handleTableColBtn_detail(scope)" type="text">详情
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <div class="flex justify-end mt-10 py-4">
                <el-pagination :page-size="limit" :current-page.sync="currentPage" @current-change="handleCurrentChange"
                  background layout="total, prev, pager, next" :total="total" />
              </div> -->
    </template>
  </div>
</template>

<style scoped>
@import "@/styles/singleTable.scss";
</style>