wl-design-mobile 0.0.9 → 0.1.1

package/list/lambo-table-list.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="container">
+    <div class="table-head">
+      <div class="table-cell" :style="{'--width': item.width + 'px' || 'auto'}" v-for="(item,index) in columns" :key="index" >{{ item.title }}</div>
+    </div>
+    <van-list
+        ref="vanList1"
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+        offset="10"
+    >
+      <div class="table-row" v-for="(item,index) in list" :key="index">
+        <template v-for="column in columns">
+          <div v-if="column.type === 'index'" v-bind:key="column.key" class="table-cell table-cell-list" :style="{'--width': column.width + 'px' || 'auto'}">{{index + 1}}</div>
+          <div v-else class="table-cell table-cell-list" v-bind:key="column.key" :style="{'--width': column.width + 'px' || 'auto'}">{{item[column.key]}} </div>
+        </template>
+      </div>
+    </van-list>
+  </div>
+</template>
+<script>
+import {axios} from "../util/axios/index"
+import {Toast} from "vant"
+
+export default {
+  name: "LamboTableList",
+  components: {},
+  props: {
+    heightRatio: {
+      type: Number,
+      default: 0.5,
+    },
+    url: {
+      type: String
+    },
+    searchParams: {
+      type: Object
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      finished: true,
+      finishedTxt: "",
+      pageNum: 1, // 当前页数
+      pageSize: 10, // 每页数据条数
+      listHeight: '100vh', // 默认列表高度为视口高度的80%
+      refreshing: false,
+      offset: 0,
+      limit: 10,
+      list: [],
+    };
+  },
+  mounted() {
+    this.getListHeight();
+  },
+  watch: {
+    searchParams: {
+      handler: function (val, oldVal) {
+        console.log("searchParams -- val,oldVal:", {val, oldVal})
+        console.log("searchParams -- val===oldVal:", val === oldVal)
+        //查询时重置页码
+        this.pageNum = 1
+        this.offset = 0
+        this.limit = 10
+        this.list = []
+
+        this.onLoad()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    onLoad() {
+      if (this.refreshing) {
+        this.list = [];
+        this.refreshing = false;
+      }
+
+      let params = {offset: this.offset, limit: this.limit, ...this.searchParams}
+      axios.get(this.url, {params}).then(res => {
+        console.log("lambo-init-table-list -- onLoad -- loadData:", res)
+        if (res && res.code === 1) {
+          let pageData = res.data
+
+          if (pageData && pageData.rows.length > 0) {
+            for (let item of pageData.rows) {
+              if (this.list.length < pageData.total) {
+                this.list.push(item)
+                this.finished = false
+              } else {
+                this.finished = true // 数据加载完毕
+              }
+            }
+            this.offset = this.pageNum * 10
+            this.pageNum++;
+            this.finishedTxt = "没有更多了"
+          } else {
+            this.finished = true; // 数据加载完毕
+          }
+          this.loading = false; // 加载状态结束
+        } else {
+          console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]数据失败", res)
+          Toast.fail("查询[" + this.title + "]数据失败:" + res.data || '')
+        }
+      }).catch(err => {
+        console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]异常:", err)
+        Toast.fail("查询[" + this.url + "]数据异常")
+      })
+    },
+    getListHeight() {
+      const windowHeight = window.innerHeight;
+      this.listHeight = `${windowHeight * this.heightRatio}px`;
+    },
+    onRefresh() {
+      console.log("lambo-init-list -- onRefresh")
+
+      this.finished = false
+      this.pageNum = 1
+      this.offset = 0
+      this.limit = 10
+
+      this.loading = true
+      this.onLoad()
+    }
+  },
+  beforeDestroy() {
+    this.pageNum = 1
+    this.offset = 0
+    this.limit = 10
+    this.list = []
+  },
+};
+</script>
+<style scoped>
+:root {
+  --width: auto
+}
+
+.container {
+  background: var(--scl-white-1);
+}
+
+.table-head {
+  display: flex;
+  margin-bottom: 5px;
+  color: var(--scl-blue);
+}
+
+.table-row {
+  display: flex;
+}
+
+.table-cell {
+  flex: 0 0 var(--width);
+  text-align: center;
+  padding: 5px;
+  min-width: 0;
+  word-wrap: break-word;
+}
+
+.table-cell-list {
+  font-size: var(--ind-font-size-sm);
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wl-design-mobile",
-  "version": "0.0.9",
-  "description": "0.0.9",
+  "version": "0.1.1",
+  "description": "",
   "main": "index.js",
   "author": "finch",
   "license": "ISC",

package/styles/base.less

@@ -26,6 +26,7 @@
   --scl-white-4: #F5F5F5FF;
   --scl-white-5: #EDEDEDFF;
   --scl-white-6: #D7D7D7;
+  --scl-white-7: #F2F2F2;
 
   --scl-gray-1: #333333;
   --scl-gray-2: #666666;

package/styles/components/search.less

@@ -5,7 +5,7 @@
   margin-left: 1%;
   font-size: 14px;
   color: var(--scl-white-1);
-  border-radius: 6px;
+  border-radius: 3px;
   background-color: var(--scl-blue);
   border: none;
 }
@@ -22,7 +22,7 @@
   margin-right: 1%;
   font-size: 14px;
   color: var(--scl-blue);
-  border-radius: 6px;
+  border-radius: 3px;
   background-color: var(--scl-white-4);
   border: 1px solid var(--scl-blue);
 }

package/tag/lambo-tag.vue

@@ -3,7 +3,6 @@
     <van-tag :class="tagClass">{{ title }}</van-tag>
   </div>
 </template>
-
 <script>
 export default {
   name: "LamboTag",
@@ -19,7 +18,6 @@ export default {
   }
 }
 </script>
-
 <style scoped>
 
-</style>
+</style>

package/title/lambo-title1.vue

@@ -32,11 +32,11 @@ export default {
     },
     marginBottom: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     border: {
       type: Boolean,
-      default: false,
+      default: true,
     },
   },
   data() {
@@ -123,7 +123,7 @@ export default {
 /* 控制 .opt-btn-div 内的元素的右边距为 6px */
 .opt-btn-div > * {
   margin-right: 6px;
-  border-radius: 6px;
+  border-radius: 3px;
 }
 
 /* 控制 .opt-btn-div 内的最后一个元素的右边距为 0px */

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

@@ -1,176 +0,0 @@
-<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 "../../util/axios/index";
-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 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/img/lambo-img-upload.vue

@@ -1,109 +0,0 @@
-<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/upload-img.png';
-import {axios} from "../../util/axios/index";
-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>