vue-wiring-diagram 1.1.22 → 1.1.24

package/packages/components/image-control/image-management.vue

@@ -1,213 +1,213 @@
-/**
-* @Author: HuaYJ
-* @Date: 2025/2/6 15:35
-*/
-<template>
-    <div class="form-container">
-        <el-button type="primary" @click="addGroup" size="small">新增图片分组</el-button>
-        <el-table :data="record.items" border height="500">
-            <el-table-column type="expand">
-                <template #default="props">
-                    <div style="padding: 0 10px;display: flex;flex-direction: column;gap: 5px;align-items: flex-start">
-                        <el-button type="primary" size="small" @click="addPicture(props.row.id)">新增图片</el-button>
-                        <el-table :data="props.row.pictureList" border size="small">
-                            <el-table-column label="名称" prop="imageName" align="center"></el-table-column>
-                            <el-table-column label="图片" prop="imageUrl" align="center">
-                                <template #default="scope">
-                                    <img :src="isSunOs ? scope.row.imageUrl : setSunCloudImageUrl(scope.row.imageUrl)"
-                                         alt="" style="width: 64px; height: 64px;">
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="排序" prop="sort" align="center"></el-table-column>
-                            <el-table-column label="是否显示" prop="isShow" align="center">
-                                <template #default="scope">
-                                    {{ scope.row.isShow === 1 ? '是' : '否' }}
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="操作" align="center">
-                                <template #default="scope">
-                                    <el-button type="primary" size="small" @click="editPicture(scope.row)">编辑
-                                    </el-button>
-                                    <el-button type="danger" size="small" @click="deletePicture(scope.row.id)">删除
-                                    </el-button>
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                    </div>
-                </template>
-            </el-table-column>
-            <el-table-column label="分组名称" prop="groupName" align="center"></el-table-column>
-            <el-table-column label="排序" prop="sort" align="center"></el-table-column>
-            <el-table-column label="是否显示" prop="isShow" align="center">
-                <template #default="scope">
-                    {{ scope.row.isShow === 1 ? '是' : '否' }}
-                </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center">
-                <template #default="scope">
-                    <el-button type="primary" size="small" @click="editGroup(scope.row)">编辑</el-button>
-                    <el-button type="danger" size="small" @click="deleteGroup(scope.row.id)">删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <el-dialog v-model="groupDialog.show" :title="groupDialog.title" width="300" :close-on-click-modal="false"
-                   :close-on-press-escape="false">
-            <group-form v-if="groupDialog.show" :payload="groupDialog.payload" @close="closeDialog"/>
-        </el-dialog>
-        <el-dialog v-model="imageDialog.show" :title="imageDialog.title" width="300" :close-on-click-modal="false"
-                   :close-on-press-escape="false">
-            <image-form v-if="imageDialog.show" :payload="imageDialog.payload" @close="closeDialog"/>
-        </el-dialog>
-    </div>
-</template>
-
-<script setup>
-import {onMounted, reactive} from "vue";
-import groupForm from "./group-form.vue";
-import imageForm from "./image-form.vue";
-import {get, del, instance, post} from "../../http.js";
-import {ElMessage, ElMessageBox} from "element-plus";
-import {isSunOs} from "packages";
-import {setSunCloudImageUrl} from "packages/components/tools.js";
-
-// 数据集
-const record = reactive({
-    items: []
-})
-
-/**
- * 加载图片分组
- */
-const loadImageRecord = () => {
-    get('/custom/groupList').then(res => {
-        record.items = res.data
-    })
-}
-
-// 分组表单
-const groupDialog = reactive({
-    show: false,
-    title: '新增图片分组',
-    payload: null,
-})
-
-/**
- * 添加图片分组
- */
-const addGroup = () => {
-    groupDialog.show = true
-    groupDialog.title = '新增图片分组'
-    groupDialog.payload = null
-}
-
-/**
- * 编辑图片分组
- * @param row
- */
-const editGroup = (row) => {
-    groupDialog.show = true
-    groupDialog.title = '编辑图片分组'
-    groupDialog.payload = {
-        id: row.id,
-        groupName: row.groupName,
-        sort: row.sort,
-        isShow: row.isShow
-    }
-}
-
-/**
- * 删除图片分组
- * @param id
- */
-const deleteGroup = (id) => {
-    const method = isSunOs ? get : del
-    method('/custom/removeGroup/' + id).then(res => {
-        if (res.code === 200) {
-            ElMessage.success('删除成功')
-            loadImageRecord()
-        } else {
-            ElMessage.error(res.msg || '删除失败')
-        }
-    })
-}
-
-// 图片表单
-const imageDialog = reactive({
-    show: false,
-    title: '新增图片',
-    payload: null,
-})
-
-/**
- * 添加图片
- * @param id
- */
-const addPicture = (id) => {
-    imageDialog.show = true
-    imageDialog.title = '新增图片'
-    imageDialog.payload = {
-        groupId: id
-    }
-}
-
-/**
- * 编辑图片
- * @param row
- */
-const editPicture = (row) => {
-    imageDialog.show = true
-    imageDialog.title = '编辑图片'
-    imageDialog.payload = {
-        id: row.id,
-        groupId: row.groupId,
-        imageName: row.imageName,
-        sort: row.sort,
-        isShow: row.isShow,
-        imageUrl: row.imageUrl
-    }
-}
-
-/**
- * 删除图片
- * @param id
- */
-const deletePicture = (id) => {
-    const method = isSunOs ? get : del
-    method('/custom/removePicture/' + id).then(res => {
-        if (res.code === 200) {
-            ElMessage.success('删除成功')
-            loadImageRecord()
-        } else {
-            ElMessage.error(res.msg || '删除失败')
-        }
-    })
-}
-
-/**
- * 关闭弹窗
- * @param action
- */
-const closeDialog = (action) => {
-    groupDialog.show = false
-    imageDialog.show = false
-    if (action) {
-        loadImageRecord()
-    }
-}
-
-onMounted(() => {
-    loadImageRecord()
-})
-</script>
-
-<style scoped lang="scss">
-@use '/packages/styles/elPath.scss';
-
-.form-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-}
-
-</style>
+/**
+* @Author: HuaYJ
+* @Date: 2025/2/6 15:35
+*/
+<template>
+    <div class="form-container">
+        <el-button type="primary" @click="addGroup" size="small">新增图片分组</el-button>
+        <el-table :data="record.items" border height="500">
+            <el-table-column type="expand">
+                <template #default="props">
+                    <div style="padding: 0 10px;display: flex;flex-direction: column;gap: 5px;align-items: flex-start">
+                        <el-button type="primary" size="small" @click="addPicture(props.row.id)">新增图片</el-button>
+                        <el-table :data="props.row.pictureList" border size="small">
+                            <el-table-column label="名称" prop="imageName" align="center"></el-table-column>
+                            <el-table-column label="图片" prop="imageUrl" align="center">
+                                <template #default="scope">
+                                    <img :src="isSunOs ? scope.row.imageUrl : setSunCloudImageUrl(scope.row.imageUrl)"
+                                         alt="" style="width: 64px; height: 64px;">
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="排序" prop="sort" align="center"></el-table-column>
+                            <el-table-column label="是否显示" prop="isShow" align="center">
+                                <template #default="scope">
+                                    {{ scope.row.isShow === 1 ? '是' : '否' }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="操作" align="center">
+                                <template #default="scope">
+                                    <el-button type="primary" size="small" @click="editPicture(scope.row)">编辑
+                                    </el-button>
+                                    <el-button type="danger" size="small" @click="deletePicture(scope.row.id)">删除
+                                    </el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column label="分组名称" prop="groupName" align="center"></el-table-column>
+            <el-table-column label="排序" prop="sort" align="center"></el-table-column>
+            <el-table-column label="是否显示" prop="isShow" align="center">
+                <template #default="scope">
+                    {{ scope.row.isShow === 1 ? '是' : '否' }}
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center">
+                <template #default="scope">
+                    <el-button type="primary" size="small" @click="editGroup(scope.row)">编辑</el-button>
+                    <el-button type="danger" size="small" @click="deleteGroup(scope.row.id)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-dialog v-model="groupDialog.show" :title="groupDialog.title" width="300" :close-on-click-modal="false"
+                   :close-on-press-escape="false">
+            <group-form v-if="groupDialog.show" :payload="groupDialog.payload" @close="closeDialog"/>
+        </el-dialog>
+        <el-dialog v-model="imageDialog.show" :title="imageDialog.title" width="300" :close-on-click-modal="false"
+                   :close-on-press-escape="false">
+            <image-form v-if="imageDialog.show" :payload="imageDialog.payload" @close="closeDialog"/>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup>
+import {onMounted, reactive} from "vue";
+import groupForm from "./group-form.vue";
+import imageForm from "./image-form.vue";
+import {get, del, instance, post} from "../../http.js";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {isSunOs} from "packages";
+import {setSunCloudImageUrl} from "packages/components/tools.js";
+
+// 数据集
+const record = reactive({
+    items: []
+})
+
+/**
+ * 加载图片分组
+ */
+const loadImageRecord = () => {
+    get('/custom/groupList').then(res => {
+        record.items = res.data
+    })
+}
+
+// 分组表单
+const groupDialog = reactive({
+    show: false,
+    title: '新增图片分组',
+    payload: null,
+})
+
+/**
+ * 添加图片分组
+ */
+const addGroup = () => {
+    groupDialog.show = true
+    groupDialog.title = '新增图片分组'
+    groupDialog.payload = null
+}
+
+/**
+ * 编辑图片分组
+ * @param row
+ */
+const editGroup = (row) => {
+    groupDialog.show = true
+    groupDialog.title = '编辑图片分组'
+    groupDialog.payload = {
+        id: row.id,
+        groupName: row.groupName,
+        sort: row.sort,
+        isShow: row.isShow
+    }
+}
+
+/**
+ * 删除图片分组
+ * @param id
+ */
+const deleteGroup = (id) => {
+    const method = isSunOs ? get : del
+    method('/custom/removeGroup/' + id).then(res => {
+        if (res.code === 200) {
+            ElMessage.success('删除成功')
+            loadImageRecord()
+        } else {
+            ElMessage.error(res.msg || '删除失败')
+        }
+    })
+}
+
+// 图片表单
+const imageDialog = reactive({
+    show: false,
+    title: '新增图片',
+    payload: null,
+})
+
+/**
+ * 添加图片
+ * @param id
+ */
+const addPicture = (id) => {
+    imageDialog.show = true
+    imageDialog.title = '新增图片'
+    imageDialog.payload = {
+        groupId: id
+    }
+}
+
+/**
+ * 编辑图片
+ * @param row
+ */
+const editPicture = (row) => {
+    imageDialog.show = true
+    imageDialog.title = '编辑图片'
+    imageDialog.payload = {
+        id: row.id,
+        groupId: row.groupId,
+        imageName: row.imageName,
+        sort: row.sort,
+        isShow: row.isShow,
+        imageUrl: row.imageUrl
+    }
+}
+
+/**
+ * 删除图片
+ * @param id
+ */
+const deletePicture = (id) => {
+    const method = isSunOs ? get : del
+    method('/custom/removePicture/' + id).then(res => {
+        if (res.code === 200) {
+            ElMessage.success('删除成功')
+            loadImageRecord()
+        } else {
+            ElMessage.error(res.msg || '删除失败')
+        }
+    })
+}
+
+/**
+ * 关闭弹窗
+ * @param action
+ */
+const closeDialog = (action) => {
+    groupDialog.show = false
+    imageDialog.show = false
+    if (action) {
+        loadImageRecord()
+    }
+}
+
+onMounted(() => {
+    loadImageRecord()
+})
+</script>
+
+<style scoped lang="scss">
+@use '/packages/styles/elPath.scss';
+
+.form-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+</style>