vue-wiring-diagram 1.1.22 → 1.1.23

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

@@ -0,0 +1,117 @@
+/**
+* @Author: HuaYJ
+* @Date: 2024/12/10 10:23
+*/
+<template>
+  <div class="form-container">
+    <el-button type="primary" size="small" @click="addItemBtnClick" style="margin-bottom: 10px">添加条件</el-button>
+    <el-table :data="items" size="small" border>
+      <el-table-column prop="min" label="最小值" width="150" align="center">
+        <template #default="scope">
+          <el-input-number v-model="scope.row.min" size="small" controls-position="right"></el-input-number>
+        </template>
+      </el-table-column>
+      <el-table-column prop="max" label="最大值" width="150" align="center">
+        <template #default="scope">
+          <el-input-number v-model="scope.row.max" size="small" controls-position="right"></el-input-number>
+        </template>
+      </el-table-column>
+      <el-table-column prop="imageUrl" label="更换元件" width="120" align="center">
+        <template #default="scope">
+          <el-select v-model="scope.row.imageUrl" placeholder="请选择元件" size="small" filterable clearable>
+            <el-option v-for="item in imageList" :key="item.imageUrl" :label="item.imageName" :value="item.imageUrl"></el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button type="danger" size="small" @click="deleteItemBtnClick(scope.$index)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="footer" style="margin-top: 10px">
+      <el-button type="primary" @click="saveBtnClick">保存</el-button>
+      <el-button @click="cancelBtnClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, onMounted} from "vue";
+import {get} from "packages/http.js";
+
+const props = defineProps({
+  payload: {
+    type: Array,
+  },
+  type: {
+    type: String,
+  }
+})
+
+const items = ref(props.payload)
+const imageList = ref([]) // 图片列表
+
+/**
+ * 获取图片列表
+ */
+const getImageList = async () => {
+  try {
+    const res = await get('/custom/groupList')
+    const data = res?.data || []
+    const allImages = []
+    data.forEach(group => {
+      if (group?.pictureList) {
+        allImages.push(...group.pictureList)
+      }
+    })
+    imageList.value = allImages
+  } catch (error) {
+    console.error('获取图片列表失败:', error)
+  }
+}
+
+/**
+ * 添加条件
+ */
+const addItemBtnClick = () => {
+  items.value.push({
+    min: 0,
+    max: 100,
+    imageUrl: ''
+  })
+}
+
+/**
+ * 删除条件
+ * @param index
+ */
+const deleteItemBtnClick = (index) => {
+  items.value.splice(index, 1)
+}
+
+const emit = defineEmits(['close'])
+
+/**
+ * 保存
+ */
+const saveBtnClick = () => {
+  emit('close', items.value)
+}
+
+/**
+ * 取消
+ */
+const cancelBtnClick = () => {
+  emit('close', false)
+}
+
+onMounted(() => {
+  getImageList()
+})
+</script>
+
+<style scoped lang="scss">
+@use '/packages/styles/elPath.scss';
+@use '/packages/styles/dialog.scss';
+</style>

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

@@ -1,184 +1,184 @@
-/**
-* @Author: HuaYJ
-* @Date: 2025/2/8 10:24
-*/
-<template>
-  <div class="form-container">
-    <el-form ref="form" :model="model" :rules="rules" label-width="90px" label-suffix=":">
-      <el-form-item label="图片名称" prop="imageName">
-        <el-input v-model="model.imageName" placeholder="请输入图片名称"></el-input>
-      </el-form-item>
-      <el-form-item label="排序" prop="sort">
-        <el-input-number v-model="model.sort" :min="0" :max="999" :step="1" controls-position="right"/>
-      </el-form-item>
-      <el-form-item label="是否显示" prop="isShow">
-        <el-switch v-model="model.isShow" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"/>
-      </el-form-item>
-      <el-form-item label="上传" prop="image">
-        <el-upload
-            action=""
-            list-type="picture"
-            class="avatar-uploader"
-            :show-file-list="false"
-            :on-change="changeImage"
-            :auto-upload="false"
-        >
-          <el-image v-if="imageUrl" :src="imageUrl" fit="cover" style="width: 64px; height: 64px;"/>
-          <el-icon v-else class="avatar-uploader-icon">
-            <Plus/>
-          </el-icon>
-        </el-upload>
-      </el-form-item>
-      <div class="footer">
-        <el-button type="primary" @click="saveBtnClick">保存</el-button>
-        <el-button @click="cancelBtnClick">取消</el-button>
-      </div>
-    </el-form>
-  </div>
-</template>
-
-<script setup>
-import {onMounted, reactive, ref, shallowRef} from 'vue'
-import {ElMessage} from "element-plus";
-import {instance, post, upload} from "packages/http.js";
-import {Plus} from "@element-plus/icons-vue";
-import {isSunOs} from "packages";
-import {setSunCloudImageUrl} from "packages/components/tools.js";
-
-const emits = defineEmits(['close'])
-const props = defineProps({
-  payload: {
-    type: Object,
-    default: () => {
-      return {}
-    }
-  }
-})
-const form = shallowRef(null)
-const model = reactive({
-  groupId: '',
-  id: '',
-  imageName: '',
-  sort: 0,
-  isShow: 1,
-  imageUrl: '',
-})
-const rules = ({
-  imageName: [
-    {required: true, message: '请输入图片名称', trigger: 'blur'},
-    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
-  ],
-  sort: [
-    {required: true, message: '请输入排序', trigger: 'blur'},
-    {type: 'number', message: '排序必须为数字值'}
-  ]
-})
-
-const imageUrl = ref('')
-
-/**
- * 图片改变事件
- * @param file
- */
-const changeImage = (file) => {
-  if (file.raw.type.indexOf('image') === -1) {
-    ElMessage.error('请上传图片格式的文件')
-    return
-  }
-  const formData = new FormData();
-  formData.append('file', file.raw);
-  upload('/file/fileUpload', formData).then(res => {
-    if (res?.isOk) {
-      if (isSunOs) {
-        imageUrl.value = res?.data
-        model.imageUrl = res?.data
-      } else {
-        imageUrl.value = instance.defaults.baseURL + '/upload/' + res?.data
-        model.imageUrl = res?.data
-      }
-    } else {
-      ElMessage.error(res?.msg || '上传失败')
-    }
-  })
-}
-
-
-/**
- * 保存按钮点击事件
- */
-const saveBtnClick = () => {
-  console.log(model)
-  form.value.validate((valid) => {
-    if (valid) {
-      post('/custom/savePicture', model).then(res => {
-        if (res?.isOk) {
-          ElMessage.success('保存成功')
-          emits('close', true)
-        } else {
-          ElMessage.error(res?.msg || '保存失败')
-        }
-      })
-    } else {
-      return false;
-    }
-  })
-}
-
-/**
- * 取消按钮点击事件
- */
-const cancelBtnClick = () => {
-  emits('close', false)
-}
-
-onMounted(() => {
-  if (props.payload?.id) {
-    model.id = props.payload.id
-    model.imageName = props.payload.imageName
-    model.sort = props.payload.sort
-    model.isShow = props.payload.isShow
-    model.imageUrl = isSunOs  ? props.payload.imageUrl : setSunCloudImageUrl(props.payload.imageUrl)
-    imageUrl.value = model.imageUrl
-  }
-  model.groupId = props.payload.groupId
-})
-</script>
-
-<style scoped lang="scss">
-@use "../../styles/dialog.scss";
-
-.avatar-uploader {
-  width: 64px;
-  height: 64px;
-
-
-  :deep(.el-upload) {
-    width: 100%;
-    height: 100%;
-    border: 1px dashed rgb(35, 100, 221);
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-    transition: var(--el-transition-duration-fast);
-
-    :deep(.el-upload:hover) {
-      border-color: var(--el-color-primary);
-    }
-
-    .el-icon {
-      color: rgb(35, 100, 221);
-    }
-
-
-    :deep(.el-icon).avatar-uploader-icon {
-      font-size: 28px;
-      color: rgb(35, 100, 221);
-      width: 178px;
-      height: 178px;
-      text-align: center;
-    }
-  }
-}
-
-</style>
+/**
+* @Author: HuaYJ
+* @Date: 2025/2/8 10:24
+*/
+<template>
+  <div class="form-container">
+    <el-form ref="form" :model="model" :rules="rules" label-width="90px" label-suffix=":">
+      <el-form-item label="图片名称" prop="imageName">
+        <el-input v-model="model.imageName" placeholder="请输入图片名称"></el-input>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="model.sort" :min="0" :max="999" :step="1" controls-position="right"/>
+      </el-form-item>
+      <el-form-item label="是否显示" prop="isShow">
+        <el-switch v-model="model.isShow" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"/>
+      </el-form-item>
+      <el-form-item label="上传" prop="image">
+        <el-upload
+            action=""
+            list-type="picture"
+            class="avatar-uploader"
+            :show-file-list="false"
+            :on-change="changeImage"
+            :auto-upload="false"
+        >
+          <el-image v-if="imageUrl" :src="imageUrl" fit="cover" style="width: 64px; height: 64px;"/>
+          <el-icon v-else class="avatar-uploader-icon">
+            <Plus/>
+          </el-icon>
+        </el-upload>
+      </el-form-item>
+      <div class="footer">
+        <el-button type="primary" @click="saveBtnClick">保存</el-button>
+        <el-button @click="cancelBtnClick">取消</el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, reactive, ref, shallowRef} from 'vue'
+import {ElMessage} from "element-plus";
+import {instance, post, upload} from "packages/http.js";
+import {Plus} from "@element-plus/icons-vue";
+import {isSunOs} from "packages";
+import {setSunCloudImageUrl} from "packages/components/tools.js";
+
+const emits = defineEmits(['close'])
+const props = defineProps({
+  payload: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
+const form = shallowRef(null)
+const model = reactive({
+  groupId: '',
+  id: '',
+  imageName: '',
+  sort: 0,
+  isShow: 1,
+  imageUrl: '',
+})
+const rules = ({
+  imageName: [
+    {required: true, message: '请输入图片名称', trigger: 'blur'},
+    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
+  ],
+  sort: [
+    {required: true, message: '请输入排序', trigger: 'blur'},
+    {type: 'number', message: '排序必须为数字值'}
+  ]
+})
+
+const imageUrl = ref('')
+
+/**
+ * 图片改变事件
+ * @param file
+ */
+const changeImage = (file) => {
+  if (file.raw.type.indexOf('image') === -1) {
+    ElMessage.error('请上传图片格式的文件')
+    return
+  }
+  const formData = new FormData();
+  formData.append('file', file.raw);
+  upload('/file/fileUpload', formData).then(res => {
+    if (res?.isOk) {
+      if (isSunOs) {
+        imageUrl.value = res?.data
+        model.imageUrl = res?.data
+      } else {
+        imageUrl.value = instance.defaults.baseURL + '/upload/' + res?.data
+        model.imageUrl = res?.data
+      }
+    } else {
+      ElMessage.error(res?.msg || '上传失败')
+    }
+  })
+}
+
+
+/**
+ * 保存按钮点击事件
+ */
+const saveBtnClick = () => {
+  console.log(model)
+  form.value.validate((valid) => {
+    if (valid) {
+      post('/custom/savePicture', model).then(res => {
+        if (res?.isOk) {
+          ElMessage.success('保存成功')
+          emits('close', true)
+        } else {
+          ElMessage.error(res?.msg || '保存失败')
+        }
+      })
+    } else {
+      return false;
+    }
+  })
+}
+
+/**
+ * 取消按钮点击事件
+ */
+const cancelBtnClick = () => {
+  emits('close', false)
+}
+
+onMounted(() => {
+  if (props.payload?.id) {
+    model.id = props.payload.id
+    model.imageName = props.payload.imageName
+    model.sort = props.payload.sort
+    model.isShow = props.payload.isShow
+    model.imageUrl = isSunOs  ? props.payload.imageUrl : setSunCloudImageUrl(props.payload.imageUrl)
+    imageUrl.value = model.imageUrl
+  }
+  model.groupId = props.payload.groupId
+})
+</script>
+
+<style scoped lang="scss">
+@use "../../styles/dialog.scss";
+
+.avatar-uploader {
+  width: 64px;
+  height: 64px;
+
+
+  :deep(.el-upload) {
+    width: 100%;
+    height: 100%;
+    border: 1px dashed rgb(35, 100, 221);
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+
+    :deep(.el-upload:hover) {
+      border-color: var(--el-color-primary);
+    }
+
+    .el-icon {
+      color: rgb(35, 100, 221);
+    }
+
+
+    :deep(.el-icon).avatar-uploader-icon {
+      font-size: 28px;
+      color: rgb(35, 100, 221);
+      width: 178px;
+      height: 178px;
+      text-align: center;
+    }
+  }
+}
+
+</style>