From b3e948aeead0c387bcf88c7e4309805a4fa98cf6 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Thu, 15 Aug 2024 14:57:00 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=B8=8A=E4=BC=A0=E9=99=84=E4=BB=B6=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=81=94=E8=B0=83=20sws=202024-08-15?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/upload.ts                             |  33 ++
 src/components/base/no-data/index.vue         |  28 ++
 src/components/base/noData/index.vue          |  16 -
 .../common/upload/form-upload-category.vue    |   2 +-
 src/components/common/upload/index.scss       |   5 +
 src/components/common/upload/index.vue        | 312 ++++++++++--------
 src/components/common/upload/upload-model.vue |  63 +---
 .../model-custom/components/index.vue         |  51 +--
 .../model-custom/model-custom-content.vue     |   2 +-
 src/store/modules/upload.ts                   |  20 +-
 10 files changed, 296 insertions(+), 236 deletions(-)
 create mode 100644 src/components/base/no-data/index.vue
 delete mode 100644 src/components/base/noData/index.vue

diff --git a/src/api/upload.ts b/src/api/upload.ts
index 0ad32387..8f31fab6 100644
--- a/src/api/upload.ts
+++ b/src/api/upload.ts
@@ -32,6 +32,39 @@ class UploadAPI {
             data,
         });
     }
+
+    // 附件列表
+    static getAttachmentList(data: any) {
+        return request({
+            url: `diyapi/attachmentlist`,
+            method: 'post',
+            data,
+        });
+    }
+    // 附件名称修改
+    static saveAttachmentName(data: any) {
+        return request({
+            url: `diyapi/attachmentsave`,
+            method: 'post',
+            data,
+        });
+    }
+    // 附件删除
+    static delAttachment(data: any) {
+        return request({
+            url: `diyapi/attachmentdelete`,
+            method: 'post',
+            data,
+        });
+    }
+    // 附件上传
+    static uploadAttachment(data: any) {
+        return request({
+            url: `diyapi/attachmentupload`,
+            method: 'post',
+            data,
+        });
+    }
 }
 
 export default UploadAPI;
diff --git a/src/components/base/no-data/index.vue b/src/components/base/no-data/index.vue
new file mode 100644
index 00000000..ace2f568
--- /dev/null
+++ b/src/components/base/no-data/index.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="flex-col align-c jc-c w h bg-f" :style="container_style">
+        <img :style="style" :src="noData_image" />
+        <p class="size-14 cr-c mt-12">暂无数据</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+    imgWidth?: string;
+    height?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+    imgWidth: '100',
+    height: '200',
+});
+const noData_image = ref(new URL(`../../../assets/images/noData.png`, import.meta.url).href);
+const style = computed(() => {
+    return {
+        width: props.imgWidth.search('px') > -1 ? props.imgWidth : props.imgWidth + 'px',
+    };
+});
+const container_style = computed(() => {
+    return {
+        height: props.height.search('px') > -1 ? props.height : props.height + 'px',
+    };
+});
+</script>
diff --git a/src/components/base/noData/index.vue b/src/components/base/noData/index.vue
deleted file mode 100644
index 250ad87a..00000000
--- a/src/components/base/noData/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <div class="flex-col align-c jc-c w h bg-f">
-        <img :style="{'width': props.imgWidth + 'rem'}" :src="noData_image" />
-        <p class="size-14 cr-c mt-12">暂无数据</p>
-    </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-    imgWidth?: number;
-}
-const props = withDefaults(defineProps<Props>(), {
-    imgWidth: 10,
-});
-const noData_image = ref(new URL(`../../../assets/images/noData.png`, import.meta.url).href);
-</script>
\ No newline at end of file
diff --git a/src/components/common/upload/form-upload-category.vue b/src/components/common/upload/form-upload-category.vue
index 8d8e8102..3d88f551 100644
--- a/src/components/common/upload/form-upload-category.vue
+++ b/src/components/common/upload/form-upload-category.vue
@@ -17,7 +17,7 @@
                     <el-input v-model="form.sort" placeholder="请输入排序"></el-input>
                 </el-form-item>
                 <el-form-item label="是否启用">
-                    <!-- <el-switch v-model="form.is_enable"></el-switch> -->
+                    <el-switch v-model="form.is_enable" :active-value="typeof form.is_enable == 'string' ? '1' : 1" :inactive-value="typeof form.is_enable == 'string' ? '0' : 0"></el-switch>
                 </el-form-item>
             </el-form>
         </div>
diff --git a/src/components/common/upload/index.scss b/src/components/common/upload/index.scss
index 10b85666..838405e9 100644
--- a/src/components/common/upload/index.scss
+++ b/src/components/common/upload/index.scss
@@ -11,6 +11,11 @@
                 color: $cr-primary;
             }
         }
+        .disabled {
+            position: relative;
+            cursor: not-allowed;
+            height: 100%;
+        }
     }
     .right-content {
         position: relative;
diff --git a/src/components/common/upload/index.vue b/src/components/common/upload/index.vue
index 4eb044e1..b35a7de4 100644
--- a/src/components/common/upload/index.vue
+++ b/src/components/common/upload/index.vue
@@ -22,14 +22,20 @@
                     <icon name="add" size="18" class="c-pointer" @click="add_type"></icon>
                 </div>
                 <el-scrollbar height="490px">
-                    <el-tree ref="treeRef" class="filter-tree" :data="type_data" node-key="id" highlight-current :expand-on-click-node="false" :props="defaultProps" empty-text="无数据" default-expand-all :filter-node-method="filter_node" @node-click="tree_node_event">
+                    <el-tree ref="treeRef" class="filter-tree" :data="type_data" node-key="id" highlight-current :props="defaultProps" empty-text="无数据" default-expand-all :filter-node-method="filter_node" @node-click="tree_node_event">
                         <template #default="{ node, data }">
-                            <div class="custom-tree-node flex-row jc-sb gap-10 align-c w pr-10">
+                            <div class="custom-tree-node flex-row jc-sb gap-10 align-c w pr-10" :class="data.is_enable == 0 || node.parent.data.is_enable == 0 ? 'disabled bg-red' : ''">
                                 <div class="flex-1 flex-width text-line-1 block">{{ data.name }}</div>
-                                <div class="flex-row gap-10 cr-9 category-oprate">
-                                    <icon v-if="data.pid == 0" class="icon" name="add" size="12" @click="append_type_event(data)"></icon>
-                                    <icon class="icon" name="edit" size="12" @click="edit_type_event(data)"></icon>
-                                    <icon class="icon" name="del" size="12" @click="remove_type_event(node, data)"></icon>
+                                <div v-if="data.id" class="flex-row gap-10 cr-9 category-oprate c-pointer">
+                                    <div v-if="data.pid == 0" @click.stop="append_type_event(data)">
+                                        <icon class="icon" name="add" size="12"></icon>
+                                    </div>
+                                    <div @click.stop="edit_type_event(data)">
+                                        <icon class="icon" name="edit" size="12"></icon>
+                                    </div>
+                                    <div @click.stop="remove_type_event(node, data)">
+                                        <icon class="icon" name="del" size="12"></icon>
+                                    </div>
                                 </div>
                             </div>
                         </template>
@@ -47,7 +53,7 @@
                         </div>
                     </div>
                     <div class="right-search">
-                        <el-input v-model="search_name" :placeholder="'请输入' + upload_type_name + '名称'" @input="get_list">
+                        <el-input v-model="search_name" :placeholder="'请输入' + upload_type_name + '名称'" @input="get_attachment_list('1')">
                             <template #suffix>
                                 <icon name="search" size="18"></icon>
                             </template>
@@ -57,7 +63,7 @@
                 <div class="img-content pr">
                     <!-- 574px -->
                     <el-scrollbar height="440px">
-                        <div class="flex-row flex-wrap align-c gap-y-15 gap-x-10 pa-10">
+                        <div v-if="upload_list.length > 0" class="flex-row flex-wrap align-c gap-y-15 gap-x-10 pa-10">
                             <div v-for="(item, index) in upload_list" :key="index" class="item" @click="check_img_event(item)">
                                 <el-badge :value="view_list_value.findIndex((i) => i.id === item.id) == -1 ? '' : view_list_value.findIndex((i) => i.id === item.id) + 1" class="badge flex-col gap-5 w" :hidden="view_list_value.findIndex((i) => i.id === item.id) == -1">
                                     <div class="item-content re br-f5 radius">
@@ -100,7 +106,7 @@
                                     </div>
                                     <div class="text-line-1 name">
                                         <template v-if="edit_index !== -1 && edit_index === index">
-                                            <el-input v-model="item.original" type="text" placeholder="请输入内容" size="small" @change="edit_input_change" @blur="edit_input_blur" />
+                                            <el-input v-model="item.original" type="text" placeholder="请输入内容" size="small" @change="edit_input_change" />
                                         </template>
                                         <template v-else>
                                             <div class="ptb-1 plr-7">
@@ -111,6 +117,9 @@
                                 </el-badge>
                             </div>
                         </div>
+                        <div v-else>
+                            <no-data height="440"></no-data>
+                        </div>
                     </el-scrollbar>
                     <div v-if="preview_switch_video && upload_type == 'video'">
                         <div class="middle clickable-area" :class="preview_url ? '' : 'hide'">
@@ -120,7 +129,7 @@
                         </div>
                     </div>
                     <div class="mt-10 flex-row jc-e">
-                        <el-pagination :current-page="page" :page-size="21" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
+                        <el-pagination :current-page="page" :page-size="21" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="current_page_change" />
                     </div>
                 </div>
             </div>
@@ -176,7 +185,6 @@
     <form-upload-category v-model="upload_category_model_visible" :value="upload_category_model" :type="upload_category_type" :category-id="upload_category_id" :category-pid="upload_category_pid" @confirm="upload_category_confirm"></form-upload-category>
 </template>
 <script lang="ts" setup>
-import { get_math } from '@/utils/index';
 import UploadAPI, { Tree } from '@/api/upload';
 import { uploadrStore } from '@/store';
 const upload_store = uploadrStore();
@@ -241,6 +249,7 @@ watch(
     (val) => {
         if (val) {
             type_data.value = upload_store.category;
+            get_attachment_list();
         }
     }
 );
@@ -311,127 +320,11 @@ const upload_type_name = computed(() => {
 const upload_type_change = (type: any) => {
     view_list_value.value = [];
 };
-// 名称查询
-const search_name = ref('');
-// 总页数
-// const page_total = ref(0);
-// 当前页
-const page = ref(1);
-// 总数量
-const data_total = ref(0);
 
-// 已上传数据的列表
-const upload_list = ref<uploadList[]>([
-    { id: 1, url: '/src/assets/images/layout/main/phone.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' },
-    { id: 2, url: '/src/assets/images/components/model-user-info/avatar.png', original: '头像2', ext: '.jpeg', type: 'img' },
-    { id: 3, url: '/src/assets/images/components/model-hot/test-1.png', original: '头像3', title: '头像3', ext: '.png', type: 'img' },
-    { id: 4, url: '/src/assets/images/components/model-hot/test-2.png', original: '头像4', ext: '.jpeg', type: 'img' },
-    { id: 5, url: '/src/assets/movie.mp4', original: '头像5', title: '头像5', ext: '.mp4', type: 'video' },
-    { id: 6, url: '/src/assets/movie.mp4', original: '头像6', title: '头像6', ext: '.docx', type: '.docx' },
-]);
-const check_img_ids = ref('');
-// 选择图片
-const check_img_event = (item: any) => {
-    const item_id = item.id;
-    const index = view_list_value.value.findIndex((item: any) => item.id === item_id);
-    if (index !== -1) {
-        view_list_value.value.splice(index, 1);
-    } else {
-        if (is_replace.value) {
-            view_list_value.value = [item];
-        } else {
-            if (props.limit == 1) {
-                view_list_value.value = [item];
-            } else {
-                view_list_value.value.push(item);
-            }
-        }
-    }
-    check_img_ids.value = view_list_value.value.map((item: any) => item.id).join(',');
-};
-// 预览开关
-const preview_switch_img = ref(false);
-const preview_switch_video = ref(false);
-// 视频预览的路径
-const preview_url = ref('');
-const edit_index = ref(-1);
-// 监听点击事件
-onMounted(() => {
-    document.addEventListener('click', video_show);
-});
-// 移除监听事件
-onUnmounted(() => {
-    document.removeEventListener('click', video_show);
-});
-// 预览视频
-const video_show = (event: any) => {
-    if (!preview_switch_video.value) return;
-
-    if (!event.target.closest('.clickable-area')) {
-        preview_switch_video.value = false;
-        preview_url.value = '';
-    }
-};
-// 编辑图片/视频/文件名称
-const edit_event = (item: any, index: number) => {
-    edit_index.value = index;
-};
-// 输入框 输入完成
-const edit_input_change = (val: string) => {
-    edit_index.value = -1;
-};
-// 输入框失去焦点
-const edit_input_blur = () => {
-    edit_index.value = -1;
-};
-// 预览图片/视频
-const preview_event = (item: any, index: number) => {
-    preview_url.value = item.url;
-    if (upload_type.value == 'img') {
-        preview_switch_img.value = true;
-    } else if (upload_type.value == 'video') {
-        preview_switch_video.value = true;
-    }
-};
-// 预览关闭
-const preview_close = () => {
-    preview_switch_img.value = false;
-};
-// 删除图片/视频/文件
-const del_event = (item: uploadList) => {
-    app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => {
-        ElMessage({
-            type: 'success',
-            message: '删除成功!',
-        });
-        // 调用删除接口，然后，更新数据
-    });
-};
 // 打开上传弹窗
 const upload_model_open = () => {
     upload_model_visible.value = true;
 };
-// 批量删除
-const mult_del_event = () => {
-    app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => {
-        ElMessage({
-            type: 'success',
-            message: '删除成功!',
-        });
-        // console.log('选中的数据 = ', view_list_value.value);
-        // 调用删除接口，然后，更新数据
-    });
-};
-// 查询文件
-const search_data = ref({
-    page: page.value,
-    type: '',
-    name: search_name.value,
-});
-// 查询文件
-const get_list = () => {
-    console.log('查询接口', search_data);
-};
 //#region 分类 ----------------------------------------------------------start
 const treeRef = ref();
 const defaultProps = {
@@ -448,18 +341,20 @@ const filter_node = (value: string, data: any): boolean => {
     return data.name.indexOf(value) !== -1;
 };
 const type_data = ref<Tree[]>([]);
-onMounted(() => {
-    if (!upload_store.is_category) {
-        upload_store.set_is_category(true);
-        get_tree();
-    } else {
-        type_data.value = upload_store.category;
-    }
-});
 // 查询分类列表
 const get_tree = () => {
     UploadAPI.getTree().then((res) => {
-        type_data.value = res.data.category_list;
+        const all_tree = {
+            id: '',
+            pid: '',
+            name: '全部',
+            path: '',
+            is_enable: 1,
+            sort: '',
+        };
+        // 将all_tree和res.data.category_list全部插入到type_data.value,all_tree放在数组最前面
+        type_data.value = [all_tree, ...res.data.category_list];
+
         upload_store.set_category(type_data.value);
     });
 };
@@ -489,10 +384,13 @@ const add_type = () => {
 const upload_category_confirm = () => {
     get_tree();
 };
+const category_id = ref('');
 // 左侧分类树结构节点点击事件
 const tree_node_event = (data: any) => {
-    // search_filter.value = data.id;
-    get_list();
+    // 判断是否开启状态，如果关闭则不可操作
+    // if (data.is_enable == 0) return;
+    category_id.value = data.id;
+    get_attachment_list();
 };
 const upload_category_id = ref<number | string>('');
 const upload_category_pid = ref<number | string>('');
@@ -528,6 +426,130 @@ const remove_type_event = (node: any, data: Tree) => {
 };
 //#endregion 分类 ----------------------------------------------------------end
 
+//#region 附件 ----------------------------------------------------------start
+// 总页数
+// const page_total = ref(0);
+// 当前页
+const page = ref(1);
+// 总数量
+const data_total = ref(0);
+// 名称查询
+const search_name = ref('');
+// 已上传数据的列表
+const upload_list = ref<uploadList[]>([]);
+// 附件列表
+const get_attachment_list = (type?: string) => {
+    const new_data = {
+        page: type ? 1 : page.value,
+        type: upload_type.value == 'img' ? 'image' : upload_type.value == 'video' ? 'video' : upload_type.value == 'file' ? 'file' : '',
+        keywords: search_name.value,
+        category_id: category_id.value,
+    };
+    UploadAPI.getAttachmentList(new_data).then((res) => {
+        const data = res.data;
+        data_total.value = data.data_total;
+        upload_list.value = data.data_list;
+    });
+};
+// 分页查询
+const current_page_change = (val: number) => {
+    page.value = val;
+    get_attachment_list();
+};
+
+const check_img_ids = ref('');
+// 选择图片
+const check_img_event = (item: any) => {
+    const item_id = item.id;
+    const index = view_list_value.value.findIndex((item: any) => item.id === item_id);
+    if (index !== -1) {
+        view_list_value.value.splice(index, 1);
+    } else {
+        if (is_replace.value) {
+            view_list_value.value = [item];
+        } else {
+            if (props.limit == 1) {
+                view_list_value.value = [item];
+            } else {
+                view_list_value.value.push(item);
+            }
+        }
+    }
+    check_img_ids.value = view_list_value.value.map((item: any) => item.id).join(',');
+};
+// 预览开关
+const preview_switch_img = ref(false);
+const preview_switch_video = ref(false);
+// 视频预览的路径
+const preview_url = ref('');
+// 预览视频
+const video_show = (event: any) => {
+    if (!preview_switch_video.value) return;
+
+    if (!event.target.closest('.clickable-area')) {
+        preview_switch_video.value = false;
+        preview_url.value = '';
+    }
+};
+// 预览图片/视频
+const preview_event = (item: any, index: number) => {
+    preview_url.value = item.url;
+    if (upload_type.value == 'img') {
+        preview_switch_img.value = true;
+    } else if (upload_type.value == 'video') {
+        preview_switch_video.value = true;
+    }
+};
+// 预览关闭
+const preview_close = () => {
+    preview_switch_img.value = false;
+};
+
+const edit_index = ref(-1);
+const edit_id = ref('');
+// 编辑图片/视频/文件名称
+const edit_event = (item: any, index: number) => {
+    edit_index.value = index;
+    edit_id.value = item.id;
+};
+// 输入框 输入完成
+const edit_input_change = (val: string) => {
+    edit_index.value = -1;
+    UploadAPI.saveAttachmentName({ id: edit_id.value, original: val }).then((res) => {
+        ElMessage.success('修改成功!');
+    });
+};
+
+// 删除图片/视频/文件
+const del_event = (item: uploadList) => {
+    app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => {
+        // 调用删除接口，然后，更新数据
+        UploadAPI.delAttachment({ ids: item.id }).then((res) => {
+            ElMessage.success('删除成功!');
+            // 调用查询接口
+            get_attachment_list();
+        });
+    });
+};
+
+// 附件批量删除
+const mult_del_event = () => {
+    if (check_img_ids.value) {
+        app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => {
+            // 调用删除接口，然后，更新数据
+            UploadAPI.delAttachment({ ids: check_img_ids.value }).then((res) => {
+                ElMessage.success('删除成功!');
+                // 调用查询接口
+                get_attachment_list();
+            });
+        });
+    } else {
+        ElMessage.warning('请先选择图片!');
+    }
+};
+
+//#endregion 附件 ----------------------------------------------------------end
+
 // 确认
 const confirm_event = () => {
     dialog_visible.value = false;
@@ -603,6 +625,20 @@ const close_upload_model = (data: any) => {
     }
 };
 //#endregion 上传组件回调 -----------------------------------------------end
+onMounted(() => {
+    // 监听点击事件
+    document.addEventListener('click', video_show);
+    if (!upload_store.is_upload_api) {
+        upload_store.set_is_upload_api(true);
+        get_tree();
+    } else {
+        type_data.value = upload_store.category;
+    }
+});
+onUnmounted(() => {
+    // 移除监听事件
+    document.removeEventListener('click', video_show);
+});
 </script>
 <style lang="scss" scoped>
 @import 'index.scss';
diff --git a/src/components/common/upload/upload-model.vue b/src/components/common/upload/upload-model.vue
index 80bd67bf..720df317 100644
--- a/src/components/common/upload/upload-model.vue
+++ b/src/components/common/upload/upload-model.vue
@@ -17,7 +17,7 @@
                 </el-form-item>
                 <el-form-item label="上传至分组" prop="group">
                     <div class="form-item-width">
-                        <el-cascader v-model="form.group" class="w" :options="classify" placeholder="请选择" :show-all-levels="false" @change="group_change"></el-cascader>
+                        <el-cascader v-model="form.group" class="w" :options="cascader_data" placeholder="请选择" :show-all-levels="false" @change="group_change"></el-cascader>
                     </div>
                 </el-form-item>
                 <template v-if="form.type == 'loc'">
@@ -125,8 +125,11 @@
     </el-dialog>
 </template>
 <script lang="ts" setup>
+import UploadAPI, { Tree } from '@/api/upload';
+import { uploadrStore } from '@/store';
+const upload_store = uploadrStore();
 import type { UploadFile, UploadFiles, UploadUserFile } from 'element-plus';
-import { annex_size_to_unit, ext_name, get_math } from '@/utils';
+import { annex_size_to_unit, ext_name } from '@/utils';
 /**
  * @description: 图片执行上传弹窗
  * @param close{String} 默认值
@@ -151,8 +154,6 @@ const props = defineProps({
     },
 });
 const dialogVisible = defineModel({ type: Boolean, default: false });
-// const v_model = defineModel({ type: Array, default: [] });
-// const dialogVisible = ref(false);
 // 上传类型
 const upload_type = ref(props.type);
 // 上传类型转换成name
@@ -206,49 +207,17 @@ const group_change = (val: any) => {
     }
 };
 
-// 图片/视频/文件移动至
-const classify = [
-    {
-        value: 'resource',
-        label: 'Resource',
-    },
-    {
-        value: 'resource',
-        label: 'Resource',
-        children: [
-            {
-                value: 'axure',
-                label: 'Axure Components',
-            },
-        ],
-    },
-    {
-        value: 'guide',
-        label: 'Guide',
-        children: [
-            {
-                value: 'disciplines',
-                label: 'Disciplines',
-                children: [
-                    {
-                        value: 'consistency',
-                        label: 'Consistency',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'side nav',
-                        label: 'Side Navigation',
-                    },
-                ],
-            },
-        ],
-    },
-];
+// 使用计算属性获取级联数据 // 图片/视频/文件移动至
+const cascader_data = computed(() => {
+    return upload_store.category.map((tree: Tree) => ({
+        value: tree.id,
+        label: tree.name,
+        children: tree.items?.map((item: Tree) => ({
+            value: item.id,
+            label: item.name,
+        })),
+    }));
+});
 
 //#region 本地上传 -----------------------------------------------start
 
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 0b2b26bc..9c926617 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -25,7 +25,7 @@
                 <div v-if="!isEmpty(diy_data)" class="flex-row flex-wrap gap-10">
                     <div v-for="(item, index) in diy_data" :key="index" class="item flex jc-sb align-c size-14 cr-3" :class="{ 'item-active': item.show_tabs }" @click="on_choose(index, item.show_tabs)">{{ item.name }}<icon name="close" color="3" size="10" class="c-pointer" @click="del(index)"></icon></div>
                 </div>
-                <NoData v-else :img-width="10"></NoData>
+                <no-data v-else></no-data>
             </div>
         </card-container>
     </div>
@@ -249,27 +249,31 @@ const drag_area_height = computed(() => center_height.value + 'px');
 const draggable_container = ref(true);
 let data = reactive<diy_content[]>([]);
 
-watch(() => center_height.value, () => {
-    data = diy_data.value;
-    // 从 DOM 中删除组件
-    draggable_container.value = false;
-    nextTick(() => {
-        // 在 DOM 中添加组件
-        draggable_container.value = true;
-        diy_data.value = data.map((item) => ({
-            ...item,
-            location: {
-                x: item.location.x,
-                y: item.location.staging_y,
-                staging_y: item.location.staging_y,
-            },
-            com_data: {
-                ...item.com_data,
-                com_height: item.com_data.staging_height,
-            }
-        }));
-    });
-},{ immediate: true, deep: true });
+watch(
+    () => center_height.value,
+    () => {
+        data = diy_data.value;
+        // 从 DOM 中删除组件
+        draggable_container.value = false;
+        nextTick(() => {
+            // 在 DOM 中添加组件
+            draggable_container.value = true;
+            diy_data.value = data.map((item) => ({
+                ...item,
+                location: {
+                    x: item.location.x,
+                    y: item.location.staging_y,
+                    staging_y: item.location.staging_y,
+                },
+                com_data: {
+                    ...item.com_data,
+                    com_height: item.com_data.staging_height,
+                },
+            }));
+        });
+    },
+    { immediate: true, deep: true }
+);
 //#endregion
 //#region 左侧拖拽过来的处理
 let draggedItem = ref<any>({});
@@ -384,7 +388,8 @@ defineExpose({
     overflow: hidden;
     :deep(.el-collapse) {
         border: 0;
-        .el-collapse-item__wrap, .el-collapse-item__header {
+        .el-collapse-item__wrap,
+        .el-collapse-item__header {
             border: 0;
         }
         .el-collapse-item__content {
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index ebaa78ce..34759589 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -26,7 +26,7 @@
                         <model-lines-style :key="key" v-model:height="center_height" :value="diy_data"></model-lines-style>
                     </template>
                     <template v-else>
-                        <NoData :img-width="10"></NoData>
+                        <no-data></no-data>
                     </template>
                 </div>
             </div>
diff --git a/src/store/modules/upload.ts b/src/store/modules/upload.ts
index 0dda680d..b8ebd459 100644
--- a/src/store/modules/upload.ts
+++ b/src/store/modules/upload.ts
@@ -2,24 +2,24 @@ import { ref, computed } from 'vue';
 import { defineStore } from 'pinia';
 
 export const uploadrStore = defineStore('upload', () => {
+    // 上传是否需要调接口判断
+    const is_upload_api = ref(false);
     // 上传分类列表
     const category = ref<any[]>([]);
-    // 上传分类是否有数据的判断
-    const is_category = ref(false);
     // 存储上传分类列表
-    function set_category(data: any[]) {
+    const set_category = (data: any[]) => {
         category.value = data;
-        is_category.value = true;
-    }
+        is_upload_api.value = true;
+    };
     // 如果为false 则转为true
-    function set_is_category(bool: boolean) {
-        is_category.value = bool;
-    }
+    const set_is_upload_api = (bool: boolean) => {
+        is_upload_api.value = bool;
+    };
 
     return {
         category,
-        is_category,
+        is_upload_api,
         set_category,
-        set_is_category,
+        set_is_upload_api,
     };
 });