caseEditor/src/view/material/addScenes.vue

<template>
  <VRModelList :params="params">
    <template v-slot:header>
      <el-form-item label="名称：" style="grid-area: 1 / 1 / 2 / 4">
        <el-input v-model="params.pagging.state.query.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="分组：" style="grid-area: 1 / 1 / 2 / 4">
        <el-select
          v-model="params.pagging.state.query.dictId"
          placeholder="请选择"
          style="width: 200px"
          clearable

        >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.dictName"
          :value="item.id"
        />
        </el-select>
        <!-- <el-input  placeholder="请输入" /> -->
      </el-form-item>
    </template>
    <template v-slot:content>
      <el-table
        :data="params.pagging.state.table.rows"
        tooltip-effect="dark"
        ref="tableRef"
        style="width: 100%"
        size="large"
        @selection-change="changeSelection"
      >
        <el-table-column type="selection" width="50" :selectable="selectable"/>
        <el-table-column width="400" label="名称" v-slot:default="{ row }">
          <span class="truncate" :title="row.name || row.title">{{ row.name || row.title }}</span>
        </el-table-column>
        <el-table-column label="格式" prop="fileFormat"></el-table-column>
        <el-table-column width="140" label="大小" prop="fileSize" v-slot:default="{ row }">
          {{ formatSizeUnits(row.fileSize) }}
        </el-table-column>
        <el-table-column class="truncate" width="120" label="分组" prop="dictName" v-slot:default="{ row }">
          <span :title="row.dictName" class="truncate">{{ row.dictName }}</span>
        </el-table-column>
        <el-table-column
        label="操作"
        v-slot:default="{ row }"
      >
        <span
          class="oper-span"
          v-if="row.useType != 'animation'"
          @click="del(row)"
          style="color: var(--primaryColor)"
        >
          删除
        </span>
      </el-table-column>
      </el-table>
    </template>
  </VRModelList>
</template>

<script setup lang="ts">
import VRModelList from "./list.vue";
import { Scene } from "@/store/scene";
import { CaseScenes, getDictFileLists, delDictFileLists, addByMediaLiBrary, uploadNewFile } from "@/store/case";
import { useScenePaggingParams } from "./pagging";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, ref, watch, watchEffect } from "vue";
import {
  getCaseSceneList,
  getCaseScenes,
  getSceneKey,
  replaceCaseScenes,
} from "@/store/case";
import { QuiskExpose } from "@/helper/mount";
import { ElTable } from "element-plus";
const options = ref([]);
const props = defineProps<{ caseId: number, filesTypeId: number, formats: Array<string> ,fileTypes: Array<string>, }>();
const params = useScenePaggingParams(false);
console.log("formats", params);
const caseScenes = ref([]);
const tableRef = ref<InstanceType<typeof ElTable>>();
// const 
watch(
  () => params.pagging.state.query,
  () => {
    params.pagging.state.query.status = 2;
    params.pagging.state.query.fileTypes = props.fileTypes;
    params.pagging.state.query.caseId = props.caseId;
    if (props.fileTypes) params.pagging.state.query.fileTypes = props.fileTypes;
  },
  { immediate: true, deep: true }
);
// 复选框同步
watchEffect(() => {
  if (!tableRef.value) return;
  const selectKeys = caseScenes.value.map((item) => item.id);
  console.log('caseScenes.value', caseScenes.value);
  // caseScenes.value.find(
  //   (item) => item.type === params.pagging.state.query.type
  // )!.numList;
  params.pagging.state.table.rows.forEach((scene) => {
    tableRef.value!.toggleRowSelection(scene, selectKeys.includes(scene.id));
  });
});

const selectable = (row) => {
  let url  = row.listCover || row.fileUrl;
  if(!url) return
  console.log("row", row, url, props.formats);
  const fileType = url.substring(url.lastIndexOf(".")).toLowerCase();
  return props.formats && props.formats.includes(fileType);
} 

const del = async (row) => {
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await delDictFileLists(row.id);
    params.pagging.queryReset()
  });
}
const changeSelection = (selectScenes) => {
  if (params.pagging.loading) return;
  const pagScenes = params.pagging.state.table.rows;
  const type = params.pagging.state.query.type;
  caseScenes.value = selectScenes;
};
function formatSizeUnits(bytes){
  if      (bytes >= 1073741824) { bytes = (bytes / 1073741824).toFixed(2) + " GB"; }
  else if (bytes >= 1048576)    { bytes = (bytes / 1048576).toFixed(2) + " MB"; }
  else if (bytes >= 1024)       { bytes = (bytes / 1024).toFixed(2) + " KB"; }
  else if (bytes > 1)           { bytes = bytes + " bytes"; }
  else if (bytes == 1)          { bytes = bytes + " byte"; }
  else                          { bytes = "0 bytes"; }
  return bytes;
}
// 初始化数据
onMounted(async () => {
  const res = await getDictFileLists(1);
  console.log('onMounted', res);
  options.value = res;
});
const submit = async () => {
  return caseScenes.value.map((item) => item.uploadId || item.id);
  // () => replaceCaseScenes(props.caseId, caseScenes.value)
};
defineExpose<QuiskExpose>({
  submit,
});
</script>