caseEditor/src/view/material/rollMaking.vue

<template>
  <div class="scene abstract">
    <!-- <el-button class="w-full my-4"  style="margin-left: 0; margin-right: 0">添加场景</el-button> -->
    <div class="scene-list">
      <div class="list">
        <div class="tabs1 flex justify-between content-center items-center">
          <el-tabs v-model="active1" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane
              v-for="(item, index) in list"
              :key="index"
              :label="item.filesTypeName"
              :name="index"
            >
            </el-tab-pane>
          </el-tabs>

          <div class="float-right">
            <el-button class="newbut" :icon="Plus" @click="handleAdd">新增</el-button>
          </div>
        </div>
        
        <div class="tabs1 flex justify-between content-center items-center">
        <el-tabs v-model="active2" class="demo-tabs" @tab-click="handleClick2">
          <el-tab-pane
            v-for="(childrenitem, indexs) in childrenList.list"
            :key="indexs"
            :label="childrenitem.filesTypeName"
            :name="indexs"
          >
          </el-tab-pane>
        </el-tabs>

          <!-- <div class="float-right">
            <el-button class="newbut" @click="handleAdd">视图截取</el-button>
            <el-button class="newbut" @click="handleAdd">上传</el-button>
          </div> -->
        </div>

        <viewImg
          :list="childrenList.caseFilesList || []"
          width="128px"
          height="128px"
          @handleItem="handleItem"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import viewImg from "@/components/viewImg/index.vue";
import { computed, ref } from "vue";
import { updateByTreeFileLists, getByTreeFileLists } from "@/store/case";
import { router } from "@/router";
import { addCaseFile, setTypeFile, addrollMaking } from "./quisk";
const caseId = computed(() => router.currentRoute.value?.params?.caseId);
import { Plus, Upload } from "@element-plus/icons-vue";
const active1 = ref(0);
const active2 = ref(0);
const active = ref(true);
const settype = ref(false);
const childrenList = ref({
  list: [],
  value: "",
  caseFilesList: [],
});
const showModal = ref(false);
const srcList = [
  "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
];
const list = ref([]);
const activeNames = ref(["1"]);
const handleChange = (val: string[]) => {
  console.log(val);
};
getList();
function handleActive(params) {
  console.log("handleActive", params);
}
function getList() {
  updateByTreeFileLists(caseId.value).then((res) => {
    let newlist =
      res.find((ele) => ele.filesTypeName == "三录材料")?.childrenList || [];
    list.value =
      newlist.find((ele) => ele.filesTypeName == "现场图")?.childrenList ||
      [];
    childrenList.value.list = list.value[0]?.childrenList || [];
    childrenList.value.caseFilesList =
      childrenList.value.list[0]?.childrenList || [];
  });
}
async function handleAdd() {
  let resImg = await addrollMaking({ caseId: caseId.value, filesTypeName: ["原始照片"] });
  getList();
}
const handleClick = (val) => {
  console.log("handleClick", list.value[val.index], val);
  childrenList.value.list = list.value[val.index]
    ? list.value[val.index].childrenList
    : [];
  childrenList.value.value = active.value;
  active2.value = 0;
};
const handleClick2 = (val) => {
  childrenList.value.caseFilesList =
    childrenList.value.list[val.index]?.caseFilesList || [];
  console.log("handleClick2", active2.value, val);
};
async function handleItem(type, item) {
  console.log("handleItem", type, item);
  if (type == "edit") {
    await setTypeFile({
      ...item,
      caseId: caseId.value,
      fileOptions: list.value,
    });
  }
  getList();
}
</script>
<style scoped lang="scss">
.scene {
  height: 100%;
  overflow-x: scroll;
  .scene-list {
    // height: 100%;
  }
  .title0 {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
  }
  .demo-tabs {
    padding: 12px 0 ;
  }
}
</style>