caseEditor/src/view/other/index.vue

<template>
  <div class="abstract">
    <el-button class="w-full" @click="handleAdd">上传</el-button>
    <!-- <div class="blfrom">
      <div class="fromTitle">侦查实验</div>
      <el-upload
        class="upload-demo"
        :multiple="false"
        drag
        :show-file-list="false"
        :before-upload="upload"
        :file-list="fileList"
        :http-request="uploadNewFile"
        :on-success="handleSuccess"
        :on-preview="previewFile"
        :accept="accept"
        :before-remove="removeFile"
      >
        <div type="primary" :disabled="!!file">
          <div>点击或拖拽文件上传</div>
          <div class="">支持{{ fileInfo.DrawFormatDesc }}格式上传</div>
        </div>
      </el-upload>
    </div>
    <div class="blfrom">
      <div class="fromTitle">其他材料</div>
      <el-upload
        class="upload-demo"
        :multiple="false"
        drag
        :before-upload="upload"
        :file-list="fileList"
            :show-file-list="false"
        :http-request="uploadNewFile"
        :on-success="handleSuccess1"
        :on-preview="previewFile"
        :accept="accept"
        :before-remove="removeFile"
      >
        <div type="primary" :disabled="!!file">
          <div>点击或拖拽文件上传</div>
          <div class="">支持{{ fileInfo.DrawFormatDesc }}格式上传</div>
        </div>
      </el-upload>
    </div> -->
    <div class="blList">
      <div class="listItem py-4" v-for="(item, index) in list" :key="index" v-show="item.caseFilesList?.length">
        <div class="title1">{{ item.filesTypeName }}</div>
        <viewImg :list="item.caseFilesList || []" @handleItem="handleItem" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, reactive } from "vue";
import { addCaseFile } from "../originalPhoto/quisk";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUpload } from "@/hook/upload";
import { addByMediaLiBrary } from "@/store/case";
import { updateByTreeFileLists } from "@/store/case";
import { delCaseFile, } from "@/store/caseFile";
import { router } from "@/router";
import viewImg from "@/components/viewImg/index.vue";
import { Delete, Edit } from "@element-plus/icons-vue";
const active = ref(true);
const caseId = computed(() => router.currentRoute.value?.params?.caseId);
const srcList = [
  "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
];
const settype = ref(false);
const ruleFormRef = ref(null);
const activeName = ref("1");
const xzclId = ref(0);
const qtclId = ref(0);
const list = ref([]);
const fileInfo = ref({
  accept: ".jpg, .jpeg, .png, .mp4",
  formats: [".jpg", ".jpeg", ".png", ".mp4"],
  DrawFormatDesc: "jpg、png、jpeg、mp4上传",
  fileSize: 10 * 1024 * 1024,
});
getList();
const showModal = ref(false);
const { size, fileList, upload, removeFile, previewFile, file, accept } =
  useUpload({
    formats: fileInfo.value.formats,
    maxSize: fileInfo.value.fileSize,
  });
const handleClick = (tab) => {
  console.log(tab);
};
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
async function handleAdd() {
  await addCaseFile({ caseId: caseId.value, fileInfo: fileInfo.value, filesTypeName: ['其他资料'] });
  getList();
}
function getList() {
  updateByTreeFileLists(caseId.value).then((res) => {
    let newlist = res.find((ele) => ele.filesTypeName == "其他资料") || [];
    console.log("updateByTreeFileLists", newlist);
    list.value = newlist.childrenList || [];
    xzclId.value = newlist.childrenList.find(
      (ele) => ele.filesTypeName == "侦查实验"
    ).filesTypeId;
    qtclId.value = newlist.childrenList.find(
      (ele) => ele.filesTypeName == "其他材料"
    ).filesTypeId;
    console.log("list.value", list.value);
  });
}
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
function handleActive(params) {
  console.log("handleActive", params);
}

function handleSuccess(item) {
  let uploadId = item?.data.id;
  addByMediaLiBrary({ caseId: caseId.value, filesTypeId: xzclId.value, uploadId }).then((res) => {
    getList();
  });
}
function handleSuccess1(item) {
  let uploadId = item?.data.id;
  addByMediaLiBrary({ caseId: caseId.value, filesTypeId: qtclId.value, uploadId }).then((res) => {
    getList();
  });
}
function handleDel(item) {
  ElMessageBox.confirm("确定删除？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await delCaseFile({ caseId: caseId.value, filesId: item.filesId });
    ElMessage({
      type: "success",
      message: "删除成功",
    });
  });
}
function handleItem(type, item) {
  console.log("handleItem", type, item);
}
</script>
<style lang="scss" scoped>
.abstract {
  height: 100%;
  .el-form-item--label-top {
    margin-bottom: 14px;
  }
  .form-content {
    height: calc(100vh - 225px);
    overflow-y: scroll;
  }
  .demo-tabs {
    .el-tabs__item {
      height: 32px;
      line-height: 32px;
    }
  }
}
</style>