123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- <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>
|