wl-design-mobile 0.0.1

package/doc/file/lambo-file-upload.vue

@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <div class="fileUplodaContainer">
+      <div class="setUploader">
+        <div class="fileUplodaTitle"><p>{{ title }}</p></div>
+        <van-uploader v-model="fileList" :after-read="afterRead" :before-read="beforeRead" accept="*">
+          <van-button :icon="fileImg" type="primary"></van-button>
+        </van-uploader>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import fileImg from '../assets/icon/fileImg.png';
+import {axios} from "@indfnd/utils";
+import {fileUploadUrl} from "@/api/doc";
+import {Toast} from "vant";
+import excelIcon from "../assets/img/doc/excel.png";
+import mp3Icon from "../assets/img/doc/mp3.png";
+import otherIcon from "../assets/img/doc/other.png";
+import pdfIcon from "../assets/img/doc/pdf.png";
+import photoIcon from "../assets/img/doc/photo.png";
+import pptIcon from "../assets/img/doc/ppt.png";
+import txtIcon from "../assets/img/doc/txt.png";
+import videoIcon from "../assets/img/doc/video.png";
+import wordIcon from "../assets/img/doc/word.png";
+import zipIcon from "../assets/img/doc/zip.png";
+
+export default {
+  name: 'LamboFileUpload',
+  components: {},
+  props: {
+    title: {
+      type: String,
+      default: ' '
+    },
+  },
+  data() {
+    return {
+      fileImg: fileImg,
+      fileList: [],
+      resultFileList: []
+    }
+  },
+  methods: {
+    afterRead(files, detail) {
+      console.log(files, detail);
+      let file = files.file;
+      let formData = new FormData();
+      formData.append('file', file);
+      axios.post(fileUploadUrl, formData, {}).then(response => {
+        if (response && response.code == "1") {
+          let fileData = response.data;
+          if (fileData && fileData.length > 0) {
+            let file1 = fileData[0]
+            if (file1 && file1.fileId) {
+              let resFile = fileData[0]
+              let fileName = resFile.fileName || ''
+              let suffix = ''
+              if (fileName.indexOf(".") > -1) {
+                suffix = fileName.split('.')[1]
+              }
+              this.updateFileIcon(suffix);
+              let item = {
+                fileId: resFile.fileId,
+                lastModified: file.lastModified,
+                fileName: fileName,
+                fileSuffix: suffix
+              }
+              this.resultFileList.push(item)
+              Toast.success('上传文件成功');
+              this.$emit("onSuccess", this.resultFileList);
+            } else {
+              Toast.fail("上传文件为空，上传失败")
+              this.$emit("on-failed", null);
+            }
+          } else {
+            Toast.fail("上传文件为空，上传失败")
+            this.$emit("on-failed", null);
+          }
+        } else {
+          Toast.fail("上传失败，请联系管理员")
+          this.$emit("on-failed", null);
+        }
+      }).catch((e) => {
+        Toast.fail("文件上传异常!");
+        console.error("文件上传异常:", e)
+      });
+    },
+    beforeRead(file) {
+      let fileName = file.name;
+      let type = fileName.substring(fileName.lastIndexOf('.') + 1);
+      const fileList = ['mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv',
+        'mp3', 'wav', 'wma', 'ogg', 'aac', 'flac',
+        'doc', 'pages', 'epub', 'docx', 'pdf', 'txt', 'numbers', 'csv', 'xls', 'xlsx',
+        'keynote', 'ppt', 'pptx', 'zip',
+        'jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'tif', 'psd', 'webp', 'svg', 'raw'
+      ];
+      let result = fileList.includes(type.toLowerCase());
+      if (!result) {
+        Toast.fail("文件类型不支持！（请选择'mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv','mp3', 'wav', 'wma', 'ogg', 'aac', 'flac','doc', 'pages', 'epub', 'docx', 'pdf', 'txt', 'numbers', 'csv', 'xls', 'xlsx','keynote', 'ppt', 'pptx', 'zip','jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'tif', 'psd', 'webp', 'svg', 'raw'）")
+      }
+      return result;
+    },
+    updateFileIcon(suffix) {
+      const fileIcons = document.querySelectorAll('.van-uploader__file-icon');
+      switch (suffix) {
+        case 'mp4':
+        case 'm3u8':
+        case 'rmvb':
+        case 'avi':
+        case 'swf':
+        case '3gp':
+        case 'mkv':
+        case 'flv':
+          fileIcons[fileIcons.length - 1].style.content = 'url("' + videoIcon + '")';
+          break;
+        case 'mp3':
+        case 'wav':
+        case 'wma':
+        case 'ogg':
+        case 'aac':
+        case 'flac':
+          fileIcons[fileIcons.length - 1].style.content = 'url("' + mp3Icon + '")';
+          break;
+        case 'doc':
+        case 'pages':
+        case 'epub':
+        case 'docx':
+          fileIcons[fileIcons.length - 1].style.content = 'url("' + wordIcon + '")';
+          break;
+        case 'pdf':
+          fileIcons[fileIcons.length - 1].style.content = 'url("' + pdfIcon + '")';
+          break;
+        case 'txt':
+          fileIcons[fileIcons.length - 1].style.content = 'url("' + txtIcon + '")';
+          break;
+        case 'numbers':
+        case 'csv':
+        case 'xls':
+        case 'xlsx':
+          fileIcons[fileIcons.length - 1].style.content = 'url("' + excelIcon + '")';
+          break;
+        case 'keynote':
+        case 'ppt':
+        case 'pptx':
+          fileIcons[fileIcons.length - 1].style.content = 'url("' + pptIcon + '")';
+          break;
+        case 'zip':
+          fileIcons[fileIcons.length - 1].style.content = 'url("' + zipIcon + '")';
+          break;
+        case 'jpg':
+        case 'jpeg':
+        case 'png':
+        case 'gif':
+        case 'bmp':
+        case 'tiff':
+        case 'tif':
+        case 'psd':
+        case 'webp':
+        case 'svg':
+        case 'raw':
+          // fileIcons[fileIcons.length - 1].style.content = 'url("' + photoIcon + '")';
+          break;
+        default:
+          fileIcons[fileIcons.length - 1].style.content = 'url("' + otherIcon + '")';
+          break;
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+@import "../../styles/index.less";
+@import './styles/css/index.css';
+
+
+</style>

package/doc/file/styles/css/index.css

@@ -0,0 +1,118 @@
+.fileUplodaContainer {
+    padding: 12px 14px;
+    background: var(--scl-white-1);
+}
+
+.fileUplodaTitle {
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.fileUplodaTitle p {
+    width: 100%;
+    color: var(--scl-gray-3);
+    font-size: 14px;
+    position: absolute;
+    top: -2px;
+}
+
+.fileUplodaTitle img {
+    width: 20px;
+    height: 20px;
+    display: block;
+}
+
+/*右上角上传按钮样式*/
+/deep/ .van-button--primary {
+    background: none;
+    border: none;
+    height: auto;
+}
+
+/*右上角上传按钮位置*/
+/deep/ .van-uploader__input-wrapper, .van-uploader {
+    width: 100%;
+    position: static;
+}
+
+/*上传按钮首次进页面控制图标大小*/
+/deep/ .van-icon__image {
+    width: 1em;
+}
+
+/*图片上传区域占位及右上角上传按钮占位*/
+/deep/ .setUploader {
+    position: relative;
+    margin-bottom: 10px;
+}
+
+/*右上角上传按钮位置*/
+/deep/ .van-button--normal {
+    width: 20px;
+    position: absolute;
+    top: -1px;
+    right: -8px;
+}
+
+/*文件列表整体位置*/
+/deep/ .van-uploader__wrapper {
+    margin-top: 20px;
+}
+
+/*文件预览框样式*/
+/deep/ .van-uploader__file {
+    width: 101%;
+    height: 38px;
+    background-color: #F2F2F2;
+    display: flex;
+    flex-wrap: wrap;
+    border-radius: 5px;
+    align-items: stretch;
+    align-content: space-around;
+    flex-direction: row;
+}
+
+/*文件名样式*/
+/deep/ .van-uploader__file-name {
+    width: 92%;
+    margin-top: 1px;
+    text-align: left;
+    font-size: 14px;
+}
+
+/*文件类型icon样式*/
+/deep/ .van-uploader__file-icon {
+    width: 17px;
+    height: 20px;
+}
+
+/*控制多文件换行样式*/
+/deep/ .van-uploader__preview {
+    width: 100%;
+    margin: 0 0 10px 0;
+}
+
+/*覆盖旧删除按钮样式*/
+/deep/ .van-uploader__preview-delete {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0)
+}
+
+/*新删除按钮图标样式*/
+/deep/ .van-uploader__preview-delete-icon {
+    top: 6px;
+    right: 4px;
+    color: var(--scl-gray-2);
+    font-size: 28px;
+}
+
+/*控制上传功能覆盖区域*/
+/deep/ .van-uploader__input {
+    height: 25px;
+    width: 25px;
+    position: absolute;
+    left: 95%;
+}

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

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <div class="imgUplodaContainer">
+      <div class="setUploader">
+        <div class="imgUplodaTitle"><p>{{ title }}</p></div>
+        <van-uploader v-model="fileList" :after-read="afterRead" :before-read="beforeRead" accept="image/*">
+          <van-button :icon="uploadImg" type="primary"></van-button>
+        </van-uploader>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import uploadImg from '../assets/icon/uploadImg.png';
+import {axios} from "@indfnd/utils";
+import {fileUploadUrl} from "@/api/doc";
+import {Toast} from "vant";
+
+export default {
+  name: 'LamboImgUpload',
+  components: {},
+  props: {
+    title: {
+      type: String,
+      default: ' '
+    },
+  },
+  data() {
+    return {
+      uploadImg: uploadImg,
+      fileList: [],
+      resultFileList: []
+    }
+  },
+  methods: {
+    afterRead(files, detail) {
+      console.log(files, detail);
+      let file = files.file;
+      let formData = new FormData();
+      formData.append('file', file);
+      axios.post(fileUploadUrl, formData, {}).then(response => {
+        console.log("doUpload -- response:", response)
+        if (response && response.code == "1") {
+          let fileData = response.data;
+          if (fileData && fileData.length > 0) {
+            let file1 = fileData[0]
+            if (file1 && file1.fileId) {
+              let resFile = fileData[0]
+              let fileName = resFile.fileName || ''
+              let suffix = ''
+              if (fileName.indexOf(".") > -1) {
+                suffix = fileName.split('.')[1]
+              }
+              let item = {
+                fileId: resFile.fileId,
+                lastModified: file.lastModified,
+                fileName: fileName,
+                fileSuffix: suffix
+              }
+              this.resultFileList.push(item)
+              Toast.success('上传图片成功');
+              this.$emit("onSuccess", this.resultFileList);
+            } else {
+              Toast.fail("上传图片为空,上传失败")
+              this.$emit("on-failed", null);
+            }
+          } else {
+            Toast.fail("上传图片为空,上传失败")
+            this.$emit("on-failed", null);
+          }
+        } else {
+          Toast.fail("上传失败,请联系管理员")
+          this.$emit("on-failed", null);
+        }
+      }).catch((e) => {
+        Toast.fail("图片上传异常！");
+        console.error("图片上传异常:", e)
+      });
+    },
+    beforeRead(file) {
+      let fileName = file.name;
+      let type = fileName.substring(fileName.lastIndexOf('.') + 1);
+      let result = false;
+      const imgList = ['bmp', 'jpg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'wmf', 'webp', 'avif', 'apng', 'jpeg',
+        'BMP', 'JPG', 'PNG', 'TIF', 'GIF', 'PCX', 'TGA', 'EXIF', 'FPX', 'SVG', 'PSD', 'CDR', 'PCD', 'DXF', 'UFO', 'EPS', 'AI', 'RAW', 'WMF', 'WEBP', 'AVIF', 'APNG', 'JPEG'];
+      // 进行图片匹配
+      result = imgList.some(function (item) {
+        return item === type
+      })
+      if (!result) {
+        Toast.fail("请上传图片！")
+      }
+      return result
+    }
+  }
+  ,
+  created() {
+
+  }
+  ,
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../../styles/index.less";
+@import './styles/css/index.css';
+</style>

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

@@ -0,0 +1,98 @@
+.imgUplodaContainer {
+    padding: 12px 14px;
+    background: var(--scl-white-1);
+}
+
+.imgUplodaTitle {
+    /*margin-bottom: 18px;*/
+    display: flex;
+    justify-content: space-between;
+}
+
+.imgUplodaTitle p {
+    width: 100%;
+    color: var(--scl-gray-3);
+    font-size: 14px;
+    position: absolute;
+    top: -2px;
+}
+
+.imgUplodaTitle img {
+    width: 20px;
+    height: 20px;
+    display: block;
+}
+
+/*右上角上传按钮样式*/
+/deep/ .van-button--primary {
+    background: none;
+    border: none;
+    height: auto;
+}
+
+/*右上角上传按钮位置*/
+/deep/ .van-uploader__input-wrapper, .van-uploader {
+    width: 100%;
+    position: static;
+}
+
+/*上传按钮首次进页面控制图标大小*/
+/deep/ .van-icon__image {
+    width: 1em;
+}
+
+/*图片上传区域及右上角上传按钮*/
+/deep/ .setUploader {
+    position: relative;
+    margin-bottom: 10px;
+}
+
+/*图片整体位置*/
+/deep/ .van-uploader__wrapper {
+    margin-top: 30px;
+    display: grid;
+    justify-content: space-between;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 10px;
+}
+
+/*右上角上传按钮位置*/
+/deep/ .van-button--normal {
+    width: 20px;
+    position: absolute;
+    top: -1px;
+    right: -8px;
+}
+
+/*/deep/ .van-uploader__preview {*/
+/*    width: 23%;*/
+/*    height: auto;*/
+/*    padding-left: 8px;*/
+/*    margin: 8px 0 0 0;*/
+/*}*/
+
+/*预览图片样式*/
+/*/deep/ .van-uploader__preview-image {*/
+/*    display: block;*/
+/*    width: auto;*/
+/*    height: 100px;*/
+/*    overflow: hidden;*/
+/*    border: 1px solid #515a6e38;*/
+/*}*/
+
+/*控制上传功能覆盖区域*/
+/deep/ .van-uploader__input {
+    height: 20px;
+    width: 20px;
+    position: absolute;
+    left: 95%;
+}
+
+/deep/ .van-uploader__preview {
+    margin: 0;
+}
+
+/deep/ .van-uploader__preview-image {
+    width: auto;
+    height: 95px;
+}

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

@@ -0,0 +1,90 @@
+<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-medium-button :disabled="false" :type="type" style="margin-top: -5px" text="删除"
+                               @click="deleteSpart"></lambo-medium-button>
+        </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-big-button :disabled="false" :type="type" text="新增一条" @click="addSpart"></lambo-big-button>
+  </div>
+</template>
+<script>
+import LamboBigButton from '@/components/lambo/btn/lambo-big-button.vue'
+import LamboMediumButton from '@/components/lambo/btn/lambo-medium-button.vue'
+import LamboEditSingleSelect from "@/components/lambo/edit/select/lambo-edit-single-select.vue";
+import LamboEditMultiSelect from "@/components/lambo/edit/select/lambo-edit-multi-select.vue";
+import LamboEditInput from "@/components/lambo/edit/select/lambo-edit-input.vue";
+
+export default {
+  name: 'LamboEditList',
+  components: {
+    LamboEditInput, LamboEditMultiSelect, LamboEditSingleSelect,
+    LamboBigButton,
+    LamboMediumButton
+  },
+  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>

package/edit/list/lambo-edit-card-group.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <van-collapse v-model="activeNames">
+      <van-collapse-item :name="activeNames.toString()">
+        <div slot="title">
+          <div class="indicator-title">
+            <div class="color-line"/>
+            {{ title + (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-medium-button :disabled="false" :type="type" style="margin-top: -5px" text="删除"
+                               @click="deleteSpart(index)"></lambo-medium-button>
+        </div>
+        <slot></slot>
+      </van-collapse-item>
+    </van-collapse>
+  </div>
+</template>
+<script>
+import LamboBigButton from '@/components/lambo/btn/lambo-big-button.vue'
+import LamboMediumButton from '@/components/lambo/btn/lambo-medium-button.vue'
+import LamboEditSingleSelect from "@/components/lambo/edit/select/lambo-edit-single-select.vue";
+import LamboEditMultiSelect from "@/components/lambo/edit/select/lambo-edit-multi-select.vue";
+import LamboEditInput from "@/components/lambo/edit/select/lambo-edit-input.vue";
+
+export default {
+  name: 'LamboEditCardGroup',
+  components: {
+    LamboEditInput, LamboEditMultiSelect, LamboEditSingleSelect,
+    LamboBigButton,
+    LamboMediumButton
+  },
+  props: {
+    lineList: {
+      type: Array,
+      default: () => []
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    index: {
+      type: Number,
+      default:
+          1,
+    }
+  },
+// watch: {
+//   lineList: function (val, oldVal) {
+//   },
+// },
+  data() {
+    return {
+      type: 'default',
+      // lineList: [],
+      activeNames: ['0'],
+      singleKv: [],
+      defaultItem: {},
+
+      multiKv: [],
+      multiDefaultItem: {},
+      multiIcon: 'boxs.png',
+    }
+  }
+  ,
+  methods: {
+    deleteSpart(index) {
+      console.log("删除--", index)
+      this.lineList.splice(index, 1);
+      // for (var i = 0; i < this.materialChangeList.length; i++) {
+      //   let obj = this.materialChangeList[i];
+      //   if (obj.line_no === item.line_no) {
+      //     this.materialChangeList.splice(i, 1);
+      //   }
+      // }
+      // for (var i = 0; i < this.materialChangeList.length; i++) {
+      //   let obj = this.materialChangeList[i];
+      //   obj.line_no = i + 1;
+      //   obj.title = '第' + obj.line_no + '个物资';
+      // }
+    }
+    ,
+    addSpart() {
+      this.lineList.push({})
+    }
+  }
+  ,
+  created() {
+
+  }
+  ,
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+@import "../../styles/index.less";
+@import './styles/css/index.css';
+</style>