daofu-large-screen/src/views/home-page/left-side/dialog/workSituationDetails.vue

<template>
  <BaseDialog
    :dialogVisible="props.visible"
    @close="onclone"
    titleName="工作动态"
    width="50%"
    @onSubmit="handleSubmit"
    :footerclosed="true"
    :diafooter="true"
    :footerkeepnaem="props.readonly ? false : true"
  >
    <el-form
      ref="formRef"
      label-position="right"
      label-width="100"
      :disabled="readonly"
      :rules="ruleForm"
      :model="form"
      class="center-form"
    >
      <el-form-item label="动态标题" prop="title">
        <el-input :readonly="!readonly" v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="动态内容" prop="detail" style="width: 94%">
        <el-input
          :readonly="!readonly"
          type="textarea"
          rows="8"
          v-model="form.detail"
        ></el-input>
      </el-form-item>
      <el-form-item label="工作附件：" style="width: 100%">
        <el-upload
          class="avatar-uploader"
          ref="uploadAfter"
          action="#"
          list-type="upload-demo"
          :file-list="afterList"
          :http-request="handleUploadAfter"
        >
          <el-icon class="avatar-uploader-icon" :size="40">
            <Plus />
          </el-icon>
          <template #file="{ file }">
            <div>
              <span
                class="el-upload-list__item-actions"
                @click="handleDownload(file)"
              >
                <span class="el-upload-list__item-preview">
                  <el-icon> </el-icon>
                  <span>{{ file.realfilename }}</span>
                </span>
                <!-- <span
                  class="el-upload-list__item-preview"
                  @click="handleDownload(file)"
                >
                  <el-icon>
                    <Download />
                  </el-icon>
                </span> -->
              </span>
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
  </BaseDialog>
</template>

<script setup lang="ts" >
import { reactive, ref, onMounted, watch } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { areaTree, riskTypeList } from "@/api/account";
import { uploadFile, getFile, delFile } from "@/api/file";
import { FileType } from "@/utils/common";
import type { UploadUserFile } from "element-plus";
const formRef = ref<FormInstance>();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  form: Object,
  readonly: {
    type: Boolean,
    default: false,
  },
  id: String,
});
const form = ref<any>({ content: "" });
const emits = defineEmits(["close", "onSubmit"]);
const handleSubmit = () => {
  onclone();
};
//关闭弹窗
const onclone = () => {
  emits("close");
};
//获取地区
const orgList = ref([]);
const getareaTree = () => {
  areaTree().then((res: any) => {
    orgList.value = res.data;
  });
};
//点位类型
const types = ref([]);
const getRiskTypeList = () => {
  riskTypeList().then((res: any) => {
    types.value = res.data;
  });
};
// 文件上传
const afterList = ref<UploadUserFile[]>([]);
const handleUploadAfter = (file: any) => {
  // if (afterList.value.length != 0) {
  //   ElMessage.error("只能上传一份文件！");
  //   getCheckDangers(form.value.dynamicsId || uuid.value);
  // } else {
  // }
  const newFile = new FormData();
  newFile.append("file", file.file);
  uploadFile(
    userId.value,
    form.value.dynamicsId || uuid.value,
    FileType.resumptionAcs,
    newFile
  ).then((res) => {
    if (res) {
      ElMessage.success("上传成功！");
      getCheckDangers(form.value.dynamicsId || uuid.value);
    }
  });
};
//文件显示
const baseImgUrl = ref(import.meta.env.VITE_UPLOAD_URL);
const getCheckDangers = (id) => {
  getFile(id, FileType.resumptionAcs).then((res: any) => {
    afterList.value = res.data.map((item) => {
      let arr = item;
      let index = item.filepath.indexOf("."); //获取第一个"_"的位置
      let after1 = item.filepath.substring(index + 1);
      switch (after1) {
        case "xlsx":
          arr.url = "src/assets/images/exl.png";
          break;
        case "exl":
          arr.url = "src/assets/images/exl.png";
          break;
        case "pdf":
          arr.url = "src/assets/images/pdf.png";
          break;
        case "word":
          arr.url = "src/assets/images/word.png";
          break;
        default:
          arr.url = baseImgUrl.value + item.filepath;
          break;
      }
      return arr;
    });
  });
};
//下载附件
const handleDownload = (file) => {
  function text() {
    const x = new XMLHttpRequest();
    x.open("GET", baseImgUrl.value + file.filepath, true);
    x.responseType = "blob";
    x.onload = function () {
      const url = window.URL.createObjectURL(x.response);
      const a = document.createElement("a");
      a.href = url;
      a.download = file.name;
      a.click();
    };
    x.send();
  }
  let index = file.filepath.indexOf("."); //获取第一个"_"的位置
  let after1 = file.filepath.substring(index + 1);
  switch (after1) {
    case "xlsx":
      text();
      break;
    case "exl":
      text();
      break;
    case "pdf":
      text();
      break;
    case "word":
      text();
      break;
    default:
      window.open(baseImgUrl.value + file.filepath, "_blank");
      break;
  }
};
const upVisible = ref(false);
const upImageUrl = ref("");
onMounted(() => {
  getareaTree();
  getRiskTypeList();
});

watch(
  () => props.visible,
  () => {
    form.value = props.form;
    console.log(form.value, "form.value===>");
    getCheckDangers(form.value.dynamicsId);
  }
);
</script>

<style lang="scss" scoped>
::v-deep(.el-upload--upload-demo) {
  display: none;
}
.el-upload-list__item-actions {
  background: #fff;
  padding: 0px 20px;
  border-radius: 5px;
}
</style>