wl-design-mobile 0.8.19 → 0.8.21

package/doc/img/comonents/lambo-img-grid.vue

@@ -1,109 +1,109 @@
-<template>
-  <div>
-    <div class="img-grid-container">
-      <van-grid :border="false" :column-num="5" :gutter="0">
-        <van-grid-item v-for="(item, index) in data" :key="index" @click="imgMore(item)">
-          <div class="img-cell-div">
-            <van-image class="img-cell-content" :src="fileGetUrl() + item.fileId"/>
-            <span v-if="ifDelete" class="remove-x" @click.stop="deleteImg(item, index)">×</span>
-          </div>
-        </van-grid-item>
-      </van-grid>
-    </div>
-  </div>
-</template>
-<script>
-import {ImagePreview, Toast} from 'vant';
-import {fileGetUrl} from "../../../api/doc";
-
-export default {
-  components: {
-
-  },
-  props: {
-    data: {
-      type: Array,
-      default: () => []
-    },
-    ifDelete: {
-      type: Boolean,
-      default: false
-    },
-    width: {
-      type: String,
-      default: "10rem"
-    },
-    height: {
-      type: String,
-      default: "10rem"
-    }
-  },
-  data() {
-    return {}
-  },
-  methods: {
-    deleteImg(item, index) {
-      console.log("lambo-img-grid deleteImg item:", item)
-      console.log("lambo-img-grid deleteImg index:", index)
-      this.data.splice(index, 1)
-      this.$emit("on-delete", {...item, index: index});
-    },
-    imgMore(item) {
-      console.log("imgMore:", item)
-      if (item && item.fileId) {
-        ImagePreview([
-          fileGetUrl + item.fileId
-        ])
-      } else {
-        Toast.fail("图片资源无效，无法预览")
-      }
-    },
-    fileGetUrl() {
-      return fileGetUrl
-    }
-  }
-}
-</script>
-<style scoped>
-.img-grid-container {
-  margin: 0px 14px 10px 14px;
-}
-
-/deep/ .img-grid-container .van-grid-item__content {
-  padding: 0px 5px 5px 0px;
-}
-
-.img-cell-div {
-  width: 68px;
-  height: 68px;
-  position: relative;
-  display: inline-block;
-  border-radius: 3px;
-}
-
-.img-cell-content {
-  width: 100%;
-  height: 100%;
-}
-
-.remove-x {
-  position: absolute;
-  top: -2px; /* 图标距离顶部的距离 */
-  right: -2px; /* 图标距离右侧的距离 */
-  background: rgb(204, 204, 204, 0.5); /* 半透明背景色 */
-  color: white;
-  border: none;
-  border-radius: 50%; /* 圆形图标 */
-  width: 16px; /* 图标宽度 */
-  height: 16px; /* 图标高度 */
-  text-align: center;
-  line-height: 16px; /* 垂直居中 */
-  cursor: pointer;
-  font-size: 12px; /* 图标大小 */
-  z-index: 50; /* 确保图标在图片之上 */
-}
-
-.remove-x:hover {
-  background: rgb(204, 204, 204, 1); /* 半透明背景色 */
-}
-</style>
+<template>
+  <div>
+    <div class="img-grid-container">
+      <van-grid :border="false" :column-num="5" :gutter="0">
+        <van-grid-item v-for="(item, index) in data" :key="index" @click="imgMore(item)">
+          <div class="img-cell-div">
+            <van-image class="img-cell-content" :src="fileGetUrl() + item.fileId"/>
+            <span v-if="ifDelete" class="remove-x" @click.stop="deleteImg(item, index)">×</span>
+          </div>
+        </van-grid-item>
+      </van-grid>
+    </div>
+  </div>
+</template>
+<script>
+import {ImagePreview, Toast} from 'vant';
+import {fileGetUrl} from "../../../api/doc";
+
+export default {
+  components: {
+
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    ifDelete: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: String,
+      default: "10rem"
+    },
+    height: {
+      type: String,
+      default: "10rem"
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    deleteImg(item, index) {
+      console.log("lambo-img-grid deleteImg item:", item)
+      console.log("lambo-img-grid deleteImg index:", index)
+      this.data.splice(index, 1)
+      this.$emit("on-delete", {...item, index: index});
+    },
+    imgMore(item) {
+      console.log("imgMore:", item)
+      if (item && item.fileId) {
+        ImagePreview([
+          fileGetUrl + item.fileId
+        ])
+      } else {
+        Toast.fail("图片资源无效，无法预览")
+      }
+    },
+    fileGetUrl() {
+      return fileGetUrl
+    }
+  }
+}
+</script>
+<style scoped>
+.img-grid-container {
+  margin: 0px 14px 10px 14px;
+}
+
+/deep/ .img-grid-container .van-grid-item__content {
+  padding: 0px 5px 5px 0px;
+}
+
+.img-cell-div {
+  width: 68px;
+  height: 68px;
+  position: relative;
+  display: inline-block;
+  border-radius: 3px;
+}
+
+.img-cell-content {
+  width: 100%;
+  height: 100%;
+}
+
+.remove-x {
+  position: absolute;
+  top: -2px; /* 图标距离顶部的距离 */
+  right: -2px; /* 图标距离右侧的距离 */
+  background: rgb(204, 204, 204, 0.5); /* 半透明背景色 */
+  color: white;
+  border: none;
+  border-radius: 50%; /* 圆形图标 */
+  width: 16px; /* 图标宽度 */
+  height: 16px; /* 图标高度 */
+  text-align: center;
+  line-height: 16px; /* 垂直居中 */
+  cursor: pointer;
+  font-size: 12px; /* 图标大小 */
+  z-index: 50; /* 确保图标在图片之上 */
+}
+
+.remove-x:hover {
+  background: rgb(204, 204, 204, 1); /* 半透明背景色 */
+}
+</style>

package/doc/img/lambo-img-upload-collapse.vue

@@ -1,107 +1,107 @@
-<template>
-  <div>
-    <lambo-collapse :title="title">
-      <template #right-icon>
-        <van-uploader v-model="fileArr" :show-upload="false" :preview-image="false" accept="*" :after-read="afterRead"
-                      @click-upload.stop="handleStopUploaderClick">
-          <lambo-icon-btn :icon="'upload-img.png'" :border="false"></lambo-icon-btn>
-        </van-uploader>
-      </template>
-      <lambo-img-grid :data.sync="data" :if-delete="ifDelete" @on-delete="handleDeleteImg($event)"></lambo-img-grid>
-    </lambo-collapse>
-  </div>
-</template>
-<script>
-import LamboCollapse from "../../collapse/lambo-collapse.vue";
-import LamboIconBtn from "../../btn/lambo-icon-btn.vue";
-import {axios} from "../../util/axios";
-import {fileUploadUrl} from "../../api/doc";
-import {Toast} from "vant";
-import LamboImgGrid from "../../doc/img/comonents/lambo-img-grid.vue";
-
-export default {
-  name: 'LamboImgUploadCollapse',
-  components: {LamboImgGrid, LamboIconBtn, LamboCollapse},
-  props: {
-    title: {
-      type: String,
-      default: "图片上传"
-    },
-    data: {
-      type: Array,
-      default: () => []
-    },
-    ifDelete: {
-      type: Boolean,
-      default: false
-    },
-  },
-  data() {
-    return {
-      fileArr: []
-    }
-  },
-  methods: {
-    handleStopUploaderClick() {
-      console.log('handleStopUploaderClick click stop!');
-    },
-    afterRead(fileObj, detail) {
-      console.log(fileObj, detail)
-      let file = fileObj.file;
-
-/*
-      // 测试使用代码
-      let item = {
-        fileId: "123",
-        fileName: file.name,
-      }
-      this.data.push(item)
-      Toast.success('上传图片成功');
-      this.$emit("on-success", this.fileList)
-*/
-
-      let formData = new FormData();
-      formData.append('file', file);
-      console.log("lambo-img-upload-collapse afterRead 上传路径:", fileUploadUrl)
-      axios.post(fileUploadUrl, formData, {}).then(res => {
-        console.log("lambo-img-upload-collapse afterRead 上传结果:", res)
-        if (res && res.code == "1") {
-          let fileData = res.data;
-          if (fileData && fileData.length > 0) {
-            let resFile = fileData[0]
-            if (resFile && resFile.fileId) {
-              let item = {
-                fileId: resFile.fileId,
-                fileName: resFile.fileName || file.name
-              }
-              this.data.push(item)
-              Toast.success(file.name + '上传成功');
-              this.$emit("on-success", this.data)
-            } else {
-              Toast.fail("图片" + file.name + "为空，上传失败")
-              this.$emit("on-failed", null);
-            }
-          } else {
-            Toast.fail("图片" + file.name + "为空，上传失败")
-            this.$emit("on-failed", null);
-          }
-        } else {
-          Toast.fail("上传图片" + file.name + "失败，请联系管理员")
-          this.$emit("on-failed", null);
-        }
-      }).catch((e) => {
-        Toast.fail("上传图片" + file.name + "异常!");
-        console.error("图片上传异常:", e)
-      })
-    },
-    handleDeleteImg(obj) {
-      console.log("lambo-img-upload-collapse handleDeleteImg obj.fileId:", obj.fileId)
-      console.log("lambo-img-upload-collapse handleDeleteImg obj.fileName:", obj.fileName)
-      console.log("lambo-img-upload-collapse handleDeleteImg index:", obj.index)
-      this.$emit("on-delete", obj);
-    }
-  }
-}
-</script>
-<style scoped>
-</style>
+<template>
+  <div>
+    <lambo-collapse :title="title">
+      <template #right-icon>
+        <van-uploader v-model="fileArr" :show-upload="false" :preview-image="false" accept="*" :after-read="afterRead"
+                      @click-upload.stop="handleStopUploaderClick">
+          <lambo-icon-btn :icon="'upload-img.png'" :border="false"></lambo-icon-btn>
+        </van-uploader>
+      </template>
+      <lambo-img-grid :data.sync="data" :if-delete="ifDelete" @on-delete="handleDeleteImg($event)"></lambo-img-grid>
+    </lambo-collapse>
+  </div>
+</template>
+<script>
+import LamboCollapse from "../../collapse/lambo-collapse.vue";
+import LamboIconBtn from "../../btn/lambo-icon-btn.vue";
+import {axios} from "../../util/axios";
+import {fileUploadUrl} from "../../api/doc";
+import {Toast} from "vant";
+import LamboImgGrid from "../../doc/img/comonents/lambo-img-grid.vue";
+
+export default {
+  name: 'LamboImgUploadCollapse',
+  components: {LamboImgGrid, LamboIconBtn, LamboCollapse},
+  props: {
+    title: {
+      type: String,
+      default: "图片上传"
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    ifDelete: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      fileArr: []
+    }
+  },
+  methods: {
+    handleStopUploaderClick() {
+      console.log('handleStopUploaderClick click stop!');
+    },
+    afterRead(fileObj, detail) {
+      console.log(fileObj, detail)
+      let file = fileObj.file;
+
+/*
+      // 测试使用代码
+      let item = {
+        fileId: "123",
+        fileName: file.name,
+      }
+      this.data.push(item)
+      Toast.success('上传图片成功');
+      this.$emit("on-success", this.fileList)
+*/
+
+      let formData = new FormData();
+      formData.append('file', file);
+      console.log("lambo-img-upload-collapse afterRead 上传路径:", fileUploadUrl)
+      axios.post(fileUploadUrl, formData, {}).then(res => {
+        console.log("lambo-img-upload-collapse afterRead 上传结果:", res)
+        if (res && res.code == "1") {
+          let fileData = res.data;
+          if (fileData && fileData.length > 0) {
+            let resFile = fileData[0]
+            if (resFile && resFile.fileId) {
+              let item = {
+                fileId: resFile.fileId,
+                fileName: resFile.fileName || file.name
+              }
+              this.data.push(item)
+              Toast.success(file.name + '上传成功');
+              this.$emit("on-success", this.data)
+            } else {
+              Toast.fail("图片" + file.name + "为空，上传失败")
+              this.$emit("on-failed", null);
+            }
+          } else {
+            Toast.fail("图片" + file.name + "为空，上传失败")
+            this.$emit("on-failed", null);
+          }
+        } else {
+          Toast.fail("上传图片" + file.name + "失败，请联系管理员")
+          this.$emit("on-failed", null);
+        }
+      }).catch((e) => {
+        Toast.fail("上传图片" + file.name + "异常!");
+        console.error("图片上传异常:", e)
+      })
+    },
+    handleDeleteImg(obj) {
+      console.log("lambo-img-upload-collapse handleDeleteImg obj.fileId:", obj.fileId)
+      console.log("lambo-img-upload-collapse handleDeleteImg obj.fileName:", obj.fileName)
+      console.log("lambo-img-upload-collapse handleDeleteImg index:", obj.index)
+      this.$emit("on-delete", obj);
+    }
+  }
+}
+</script>
+<style scoped>
+</style>

package/doc/img/styles/css/index.css

@@ -1,3 +1,3 @@
-.img-upload-container {
-    padding: 0px 14px 12px 14px;
-}
+.img-upload-container {
+    padding: 0px 14px 12px 14px;
+}

package/edit/list/Lambo-edit-list.vue

@@ -1,87 +1,87 @@
-<template>
-  <div>
-    <van-collapse v-model="activeNames">
-      <van-collapse-item v-for="(item, index) in lineList" :name="index.toString()">
-        <div slot="title">
-          <div class="indicator-title">
-            <div class="color-line"/>
-            {{ '第' + (index + 1) + '个维修项目' }}
-          </div>
-        </div>
-        <div slot="right-icon" class="coll-title-icon">
-          <van-icon :color="'#0070D2'" class="van-icon van-cell__right-icon" name="play"
-                    style="position:absolute;left: 1px;"/>
-          <lambo-btn :type="'text'" :text="'删除'" :size="'normal'" style="margin-top: -5px" @click="deleteSpart"></lambo-btn>
-        </div>
-        <lambo-edit-single-select :data="singleKv" :default-item="defaultItem" :required="true"
-                                  :title="'单选框'"></lambo-edit-single-select>
-        <lambo-edit-multi-select :data="multiKv" :default-item="multiDefaultItem" :icon="multiIcon"
-                                 :required="true" :title="'多选框'"></lambo-edit-multi-select>
-        <lambo-edit-input :title="'输入框'"></lambo-edit-input>
-        <slot></slot>
-      </van-collapse-item>
-    </van-collapse>
-    <lambo-btn :type="'text'" :text="'新增一条'" :size="'big'" @click="addSpart"></lambo-btn>
-  </div>
-</template>
-<script>
-import LamboEditSingleSelect from "../../edit/select/lambo-edit-single-select.vue";
-import LamboEditMultiSelect from "../../edit/select/lambo-edit-multi-select.vue";
-import LamboEditInput from "../../edit/select/lambo-edit-input.vue";
-import LamboBtn from "../../btn/lambo-btn.vue";
-
-export default {
-  name: 'LamboEditList',
-  components: {
-    LamboBtn,
-    LamboEditInput, LamboEditMultiSelect, LamboEditSingleSelect,
-  },
-  props: {},
-  data() {
-    return {
-      type: 'default',
-      lineList: [{
-        "maintenanceItems": "",
-        "materialCost": 1,
-        "hourCost": 0,
-        "maintenanceDesc": "",
-      }, {
-        "maintenanceItems": "cscsc  ",
-        "materialCost": 1,
-        "hourCost": 0,
-        "maintenanceDesc": "",
-      }],
-      activeNames: ['0'],
-      singleKv: [],
-      defaultItem: {},
-
-      multiKv: [],
-      multiDefaultItem: {},
-      multiIcon: 'boxs.png',
-    }
-  },
-  methods: {
-    deleteSpart(index) {
-      this.lineList.splice(index, 1);
-    },
-    addSpart() {
-      this.lineList.push({
-        "maintenanceItems": "cscsc  ",
-        "materialCost": 1,
-        "hourCost": 0,
-        "maintenanceDesc": "",
-      })
-    }
-  },
-  created() {
-
-  },
-  mounted() {
-
-  }
-}
-</script>
-<style scoped>
-@import "../../styles/index.less";
-@import './styles/css/index.css';
-</style>
+<template>
+  <div>
+    <van-collapse v-model="activeNames">
+      <van-collapse-item v-for="(item, index) in lineList" :name="index.toString()">
+        <div slot="title">
+          <div class="indicator-title">
+            <div class="color-line"/>
+            {{ '第' + (index + 1) + '个维修项目' }}
+          </div>
+        </div>
+        <div slot="right-icon" class="coll-title-icon">
+          <van-icon :color="'#0070D2'" class="van-icon van-cell__right-icon" name="play"
+                    style="position:absolute;left: 1px;"/>
+          <lambo-btn :type="'text'" :text="'删除'" :size="'normal'" style="margin-top: -5px" @click="deleteSpart"></lambo-btn>
+        </div>
+        <lambo-edit-single-select :data="singleKv" :default-item="defaultItem" :required="true"
+                                  :title="'单选框'"></lambo-edit-single-select>
+        <lambo-edit-multi-select :data="multiKv" :default-item="multiDefaultItem" :icon="multiIcon"
+                                 :required="true" :title="'多选框'"></lambo-edit-multi-select>
+        <lambo-edit-input :title="'输入框'"></lambo-edit-input>
+        <slot></slot>
+      </van-collapse-item>
+    </van-collapse>
+    <lambo-btn :type="'text'" :text="'新增一条'" :size="'big'" @click="addSpart"></lambo-btn>
+  </div>
+</template>
+<script>
+import LamboEditSingleSelect from "../../edit/select/lambo-edit-single-select.vue";
+import LamboEditMultiSelect from "../../edit/select/lambo-edit-multi-select.vue";
+import LamboEditInput from "../../edit/select/lambo-edit-input.vue";
+import LamboBtn from "../../btn/lambo-btn.vue";
+
+export default {
+  name: 'LamboEditList',
+  components: {
+    LamboBtn,
+    LamboEditInput, LamboEditMultiSelect, LamboEditSingleSelect,
+  },
+  props: {},
+  data() {
+    return {
+      type: 'default',
+      lineList: [{
+        "maintenanceItems": "",
+        "materialCost": 1,
+        "hourCost": 0,
+        "maintenanceDesc": "",
+      }, {
+        "maintenanceItems": "cscsc  ",
+        "materialCost": 1,
+        "hourCost": 0,
+        "maintenanceDesc": "",
+      }],
+      activeNames: ['0'],
+      singleKv: [],
+      defaultItem: {},
+
+      multiKv: [],
+      multiDefaultItem: {},
+      multiIcon: 'boxs.png',
+    }
+  },
+  methods: {
+    deleteSpart(index) {
+      this.lineList.splice(index, 1);
+    },
+    addSpart() {
+      this.lineList.push({
+        "maintenanceItems": "cscsc  ",
+        "materialCost": 1,
+        "hourCost": 0,
+        "maintenanceDesc": "",
+      })
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../../styles/index.less";
+@import './styles/css/index.css';
+</style>