integrated_traffic_vue/src/views/archives/semester/components/archives_zip.vue

<template>
  <div>
    <el-dialog
      v-if="type === 6 || type === 7"
      :model-value="type === 6 || type === 7"
      :title="title"
      :before-close="fnClose"
    >
      <el-space wrap>
        <layout-upload
          v-model:file-list="data.form.file"
          accept=".zip"
          :show-file-list="false"
          auto-upload
          :http-request="fnUploadArchivesFile"
          :limit="99"
        >
          <template #tip>只能上传zip文件</template>
        </layout-upload>
      </el-space>

      <br /><br />

      <template v-for="(row, index) in data.fileList" :key="index">
        <el-row>
          <el-col :span="16">
            {{ row.FILE_NAME }}
          </el-col>
          <el-col :span="8">
            <el-button
              type="primary"
              text
              link
              @click="useDownloadFile(row.FILE_PATH)"
            >
              下载
            </el-button>
            <el-button
              type="primary"
              text
              link
              @click="fnDeleteArchivesFile(row)"
            >
              删除
            </el-button>
          </el-col>
        </el-row>
      </template>
      <template #footer>
        <el-button @click="fnClose">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  uploadArchivesFile,
  getArchivesFileList,
  deleteArchivesFile,
} from "@/request/archives.js";
import LayoutUpload from "@/components/upload/index.vue";
import { reactive } from "vue";
import { useVModels } from "@vueuse/core";
import useDownloadFile from "@/assets/js/useDownloadFile.js";
import { ElMessageBox } from "element-plus";

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: "",
  },
  year: {
    type: String,
    required: false,
    default: "",
  },
  type: {
    type: Number,
    required: true,
  },
  studyTaskId: {
    type: String,
    required: false,
    default: "",
  },
});
const { title, year, type, studyTaskId } = useVModels(props);

const data = reactive({
  form: {
    file: [],
  },
  fileList: [],
  currentFile: "",
});

const emits = defineEmits(["update:visible", "update:current"]);

const fnClear = () => {
  data.currentFile = "";
  data.form.file = [];
  data.fileList = [];
};

const fnUploadArchivesFile = async (item) => {
  const formData = new FormData();
  formData.append("FFILE", item.file);
  formData.append("TYPE", type.value);
  if (year.value && year.value.length > 0) {
    formData.append("YEAR", year.value);
  }
  if (studyTaskId.value && studyTaskId.value.length > 0) {
    formData.append("STUDYTASK_ID", studyTaskId.value);
  }
  await uploadArchivesFile(formData);
  await fnGetArchivesFileList();
};

const fnGetArchivesFileList = async () => {
  fnClear();
  const params = {
    TYPE: type.value,
  };
  if (studyTaskId.value && studyTaskId.value.length > 0) {
    params.STUDYTASK_ID = studyTaskId.value;
  }
  if (year.value && year.value.length > 0) {
    params.YEAR = year.value;
  }
  const resData = await getArchivesFileList(params);
  if (resData && resData.varList) {
    data.fileList = resData.varList;
    data.form.file = resData.varList;
  }
};
await fnGetArchivesFileList();

const fnDeleteArchivesFile = async (row) => {
  if (row) {
    await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
    const resData = await deleteArchivesFile({
      ARCHIVESFILES_ID: row.ARCHIVESFILES_ID,
      FILE_PATH: row.FILE_PATH,
    });
    if (resData && resData.result === "success") {
      await fnGetArchivesFileList();
    }
  }
};

const fnClose = () => {
  emits("update:current", undefined);
};
</script>

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