sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.优化上传组件批量删除 

sws 2024-08-19
v1.0.0
sws 2024-08-19 09:51:15 +08:00
parent bc611830e8
commit 5938d0f152
8 changed files with 48 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/upload.ts
View File

@ -1,5 +1,4 @@
import request from '@/utils/request';
import { AxiosRequestConfig } from 'axios';
class UploadAPI {
/** 分类查询接口*/

7
src/components/base/image-empty/index.vue
View File

@ -1,5 +1,5 @@
<template>
<el-image :src="image?.url || ''" class="flex align-c jc-c">
<el-image :src="image?.url || ''" class="flex align-c jc-c" @load="on_load">
<template #error>
<div class="image-slot" :style="errorStyle">
<img :src="error_image" :style="errorImgStyle" />
@ -20,6 +20,11 @@ const props = defineProps({
});
const image = defineModel({ type: Object, default: () => {} });
const error_image = ref(new URL(`../../../assets/images/empty.png`, import.meta.url).href);
const emit = defineEmits(['load']);
const on_load = (e: any) => {
const { width, height } = e.target;
emit('load', width, height);
};
</script>
<style lang="scss" scoped>
.image-slot {

9
src/components/common/upload/index.vue
View File

@ -49,11 +49,11 @@
<el-button @click="mult_del_event">删除{{ upload_type_name }}</el-button>
<!-- <el-cascader :show-all-levels="false" clearable></el-cascader> -->
<div class="right-classify ml-12">
<transform-category :data="type_data_list" :check-img-ids="check_img_ids" :placeholder="upload_type_name + '移动至'"></transform-category>
<transform-category :data="type_data_list" :check-img-ids="check_img_ids" :placeholder="upload_type_name + '移动至'" @call-back="transform_category_event"></transform-category>
</div>
</div>
<div class="right-search">
<el-input v-model="search_name" :placeholder="'请输入' + upload_type_name + '名称'" @input="get_attachment_list('1')">
<el-input v-model="search_name" :placeholder="'请输入' + upload_type_name + '名称'" @change="get_attachment_list('1')">
<template #suffix>
<icon name="search" size="18"></icon>
</template>
@ -496,12 +496,17 @@ const mult_del_event = () => {
ElMessage.success('删除成功!');
// 调用查询接口
get_attachment_list();
check_img_ids.value = '';
});
});
} else {
ElMessage.warning('请先选择图片!');
}
};
const transform_category_event = () => {
check_img_ids.value = '';
get_attachment_list();
};
//#endregion 附件 ----------------------------------------------------------end

3
src/components/common/upload/transform-category.vue
View File

@ -69,7 +69,6 @@ watch(
}
}
);
const emit = defineEmits(['update:modelValue']);
const clear_model_value = () => {
label.value = '';
temp_label.value = '';
@ -100,6 +99,7 @@ const get_label = (item: any, val: any) => {
}
});
};
const emit = defineEmits(['call-back']);
// 确定提交事件
const confirm = () => {
console.log(props.checkImgIds);
@ -113,6 +113,7 @@ const confirm = () => {
UploadAPI.moveTree(new_data).then((res) => {
visible_dialog.value = false;
label.value = cloneDeep(temp_label.value);
emit('call-back');
ElMessage.success('转移成功!');
});
});

87
src/components/model-hot-zone/index copy.vue
View File

@ -1,87 +0,0 @@
<template>
<div ref="containerRef" class="oh" :style="style_container">
<div ref="hotRef" class="hot re" :style="style">
<image-empty v-model="img" class="w" error-img-style="width:10rem;height:10rem;" error-style="padding:15rem 0;"></image-empty>
<div v-for="(item, index) in hot_data" :key="index" class="hot_box" :style="rect_style(item.drag_start, item.drag_end)"></div>
</div>
</div>
</template>
<script setup lang="ts">
import { common_styles_computer } from '@/utils';
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
});
const containerRef = ref<HTMLElement | null>(null);
const hotRef = ref<HTMLElement | null>(null);
const style = ref('');
const style_container = ref('');
const img = ref('');
const hot_data = ref<hotListData[]>([]);
// 热区组件图片的宽高
const img_width = ref(1);
const img_height = ref(1);
const container_ref_h = ref(0);
const container_ref_w = ref(0);
const hot_ref_w = ref(0);
const hot_ref_h = ref(0);
watch(
props.value,
(newVal, oldValue) => {
const new_content = newVal?.content || {};
const new_style = newVal?.style || {};
img.value = new_content?.img[0];
img_width.value = new_content?.hot.img_width || 1;
img_height.value = new_content?.hot.img_height || 1;
style_container.value = common_styles_computer(new_style.common_style);
hot_data.value = new_content?.hot?.data || [];
console.log(1);
},
{ immediate: true, deep: true }
);
onMounted(() => {
nextTick(() => {
console.log(2);
container_ref_h.value = containerRef.value?.clientHeight || 0;
container_ref_w.value = containerRef.value?.clientWidth || 0;
hot_ref_w.value = hotRef.value?.clientWidth || 0;
hot_ref_h.value = hotRef.value?.clientHeight || 0;
console.log(container_ref_h.value, container_ref_w.value, hot_ref_w.value, hot_ref_h.value);
});
});
// containerRef的宽高
const w_scale1 = computed(() => {
return container_ref_h.value / img_width.value;
});
const h_scale1 = computed(() => {
return container_ref_h.value / img_height.value;
});
// hotRef的宽高
const w_scale2 = computed(() => {
return hot_ref_w.value / container_ref_h.value;
});
const h_scale2 = computed(() => {
return hot_ref_h.value / container_ref_h.value;
});
const rect_style = computed(() => {
return (start: rectCoords, end: rectCoords) => {
return `left: ${start.x * w_scale1.value * w_scale2.value}px;top: ${start.y * h_scale1.value * h_scale2.value}px;width: ${Math.max(end.width * w_scale1.value * w_scale2.value, 1)}px;height: ${Math.max(end.height * h_scale1.value * h_scale2.value, 1)}px;display: flex;`;
};
});
</script>
<style lang="scss" scoped>
.hot {
min-height: 1rem;
.hot_box {
background: rgba(42, 148, 255, 0.25);
border: 1px dashed #8ec6ff;
position: absolute;
opacity: 0.6;
}
}
</style>

48
src/components/model-hot-zone/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div ref="containerRef" class="oh" :style="style_container">
<div ref="hotRef" class="hot re" :style="style">
<image-empty v-model="img" class="w" error-img-style="width:10rem;height:10rem;" error-style="padding:15rem 0;"></image-empty>
<image-empty v-model="img" class="w" error-img-style="width:10rem;height:10rem;" error-style="padding:15rem 0;" @load="on_load_img"></image-empty>
<div v-for="(item, index) in hot_data" :key="index" class="hot_box" :style="rect_style(item.drag_start, item.drag_end)"></div>
</div>
</div>
@ -23,12 +23,11 @@ const hot_data = ref<hotListData[]>([]);
// 热区组件图片的宽高
const img_width = ref(1);
const img_height = ref(1);
// containerRef的宽高
const w_scale1 = ref(1);
const h_scale1 = ref(1);
// hotRef的宽高
const w_scale2 = ref(1);
const h_scale2 = ref(1);
const container_ref_h = ref(0);
const container_ref_w = ref(0);
const hot_ref_w = ref(0);
const hot_ref_h = ref(0);
watch(
props.value,
(newVal, oldValue) => {
@ -38,22 +37,33 @@ watch(
img_width.value = new_content?.hot.img_width || 1;
img_height.value = new_content?.hot.img_height || 1;
style_container.value = common_styles_computer(new_style.common_style);
setTimeout(() => {
hot_data.value = new_content?.hot?.data || [];
if (containerRef.value && hotRef.value) {
// 原图片的宽和高和实际展示的图片宽和高的比例
w_scale1.value = containerRef.value?.clientWidth / img_width.value;
h_scale1.value = containerRef.value?.clientHeight / img_height.value;
// 坐标缩小比例 containerRef的宽高除以hotRef的宽高
w_scale2.value = hotRef.value?.clientWidth / containerRef.value?.clientWidth;
h_scale2.value = hotRef.value?.clientHeight / containerRef.value?.clientHeight;
}
}, 200);
hot_data.value = new_content?.hot?.data || [];
console.log(1);
},
{ immediate: true, deep: true }
);
const on_load_img = () => {
container_ref_h.value = containerRef.value?.clientHeight || 0;
container_ref_w.value = containerRef.value?.clientWidth || 0;
hot_ref_w.value = hotRef.value?.clientWidth || 0;
hot_ref_h.value = hotRef.value?.clientHeight || 0;
};
// containerRef的宽高
const w_scale1 = computed(() => {
return container_ref_h.value / img_width.value;
});
const h_scale1 = computed(() => {
return container_ref_h.value / img_height.value;
});
// hotRef的宽高
const w_scale2 = computed(() => {
return hot_ref_w.value / container_ref_h.value;
});
const h_scale2 = computed(() => {
return hot_ref_h.value / container_ref_h.value;
});
const rect_style = computed(() => {
return (start: rectCoords, end: rectCoords) => {
return `left: ${start.x * w_scale1.value * w_scale2.value}px;top: ${start.y * h_scale1.value * h_scale2.value}px;width: ${Math.max(end.width * w_scale1.value * w_scale2.value, 1)}px;height: ${Math.max(end.height * h_scale1.value * h_scale2.value, 1)}px;display: flex;`;

6
src/utils/request.ts
View File

@ -2,10 +2,10 @@ import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { get_cookie } from './index';
// 创建 axios 实例
const index = window.location.href.lastIndexOf('?');
const index = window.location.href.lastIndexOf('?s=');
const pro_url = window.location.href.substring(0, index);
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API == '/dev-api' ? import.meta.env.VITE_APP_BASE_API : pro_url,
baseURL: import.meta.env.VITE_APP_BASE_API == '/dev-api' ? import.meta.env.VITE_APP_BASE_API : pro_url + '?s=',
timeout: 50000,
headers: { 'Content-Type': 'application/json;charset=utf-8' },
});
@ -19,7 +19,7 @@ service.interceptors.request.use(
config.url = config.url + '?token=' + 'f714594929c39071f21856b885f91556';
} else {
if (cookie) {
config.url = config.url + '?token=' + JSON.parse(cookie).token;
config.url = config.url + '&token=' + JSON.parse(cookie).token;
}
}
return config;

2
vite.config.ts
View File

@ -97,7 +97,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
terserOptions: {
compress: {
// 移除console
drop_console: true,
drop_console: false,
// 移除debugger
drop_debugger: true,
},