wl-design-mobile 0.2.9 → 0.3.1

package/list/components/table/lambo-table-head.vue

@@ -1,48 +0,0 @@
-<template>
-  <div>
-    <div class="table-header" ref="listRowDiv">
-      <div v-for="(item, index) in columns" :key="index" class="header-cell" :style="{
-        gridColumn: index + 1,
-        textAlign: item.align || 'left' }">
-        {{ item.title }}
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'LamboTableHead',
-  props: {
-    columns: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    return {}
-  },
-}
-</script>
-<style scoped lang="css">
-.table-header {
-  width: 100%;
-  display: grid;
-  grid-auto-rows: 30px;
-  gap: 1px;
-  align-items: end;
-  justify-content: stretch;
-  align-content: start;
-}
-
-.header-cell {
-  box-sizing: border-box;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  font-size: 14px;
-  white-space: nowrap;
-  place-items: center;
-  display: flex;
-  align-items: center;
-}
-</style>
-

package/list/components/table/lambo-table-row.vue

@@ -1,72 +0,0 @@
-<template>
-  <div class="table-row" ref="listRowDiv">
-    <div v-for="(item, index) in columns" :key="index" class="table-cell" :style="{
-      gridColumn: index + 1,
-
-      textAlign: item.align || 'left' }">
-      <p v-if="item?.type === 'index'">{{seq + 1}}</p>
-      <p v-else> {{ data[item.key] }} </p>
-    </div>
-  </div>
-</template>
-<script>
-// width: item.width,
-export default {
-  name: 'LamboTableRow',
-  props: {
-    columns: {
-      type: Array,
-      required: true
-    },
-    data: {
-      type: Object,
-      required: true
-    },
-    seq: {
-      type: Number,
-      required: true
-    }
-  },
-  data() {
-    return {
-      itemWidth: ''
-    }
-  },
-  mounted() {
-    this.setBodyWidth()
-  },
-  methods: {
-    setBodyWidth() {
-      const headerItems = this.$refs.listRowDiv
-      if (headerItems && headerItems.length) {
-        const widths = headerItems.map(item => item.offsetWidth);
-        const maxWidth = Math.max(...widths) + 'px'; // 获取最大宽度
-        this.itemWidth = maxWidth; // 设置表体宽度
-      }
-    }
-  }
-}
-</script>
-<style scoped lang="css">
-.table-row {
-  width: 100%;
-  display: grid;
-  grid-auto-rows: 30px;
-  gap: 1px;
-  align-items: center;
-  justify-content: stretch;
-  align-content: start;
-}
-
-.table-cell {
-  box-sizing: border-box;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  font-size: 14px;
-/*  white-space: nowrap;*/
-  place-items: center;
-  display: inline-block;
-  align-items: center;
-}
-</style>
-

package/list/lambo-table-list.vue

@@ -1,185 +0,0 @@
-<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;
-      }
-      this.list =  [
-        {
-          "distCtId": "000000000000O0000000000000000051",
-          "carCode": "JN2408220001",
-          "carName": "123",
-          "distCtName": "济南烟草卷烟配送中心"
-        },
-        {
-          "distCtId": "000000000000O0000000000000000051",
-          "carCode": "JN2408220002",
-          "carName": "1",
-          "distCtName": "济南烟草卷烟配送中心"
-        },
-        {
-          "distCtId": "000000000000O0000000000000000051",
-          "carCode": "JN2408290001",
-          "carName": "14",
-          "distCtName": "济南烟草卷烟配送中心"
-        }
-      ]
-
-      // 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/list/lambo-table-list2.vue

@@ -1,211 +0,0 @@
-<template>
-  <div>
-    <lambo-table-head :columns="columns"></lambo-table-head>
-    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-      <van-list v-model="loading" :finished="finished" :finished-text="finishedTxt" :offset="200" @load="onLoad">
-        <div v-for="(item, index) in list" :key="index">
-          <lambo-table-row :seq="index" v-bind:key="index" :data="item" :columns="columns"></lambo-table-row>
-        </div>
-      </van-list>
-    </van-pull-refresh>
-    <lambo-table-footer v-if="tableFooter" :footer-data="footerData"></lambo-table-footer>
-  </div>
-</template>
-<script>
-import {axios} from "../util/axios/index"
-import {Toast} from "vant"
-import LamboTableHead from "../list/components/table/lambo-table-head.vue";
-import LamboTableRow from "../list/components/table/lambo-table-row.vue";
-import LamboTableFooter from "../list/components/table/lambo-table-footer.vue";
-
-export default {
-  name: "LamboTableList2",
-  components: {
-    LamboTableHead,
-    LamboTableRow,
-    LamboTableFooter
-  },
-  props: {
-    heightRatio: {
-      type: Number,
-      default: 0.5,
-    },
-    url: {
-      type: String
-    },
-    searchParams: {
-      type: Object
-    },
-    testMode: {
-      type: Boolean,
-      default: false
-    },
-    tableFooter: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    footerData: {
-      type: Object,
-      default: () => {
-        return {
-          label: '',
-          value: '',
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      loading: false,
-      finished: true,
-      finishedTxt: "",
-      pageNum: 1, // 当前页数
-      pageSize: 10, // 每页数据条数
-      refreshing: false,
-      offset: 0,
-      limit: 10,
-      list: [
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部XXXXXX", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部XXXXXXXXXXXXXXXXXXXXX", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-        {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-      ]
-    };
-  },
-  mounted() {
-  },
-  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;
-      }
-      if (this.testMode === true) {
-        let arr = [
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
-          {title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
-        ]
-        this.list.push(...arr)
-        this.finished = false
-        this.offset = this.pageNum * 10
-        this.pageNum++;
-      }else{
-        let params = {offset: this.offset, limit: this.limit, ...this.searchParams}
-        axios.get(this.url, {params}).then(res => {
-          console.log("lambo-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 + "]数据异常")
-        })
-      }
-    },
-    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>
-@import "../styles/index.less";
-
-/* 设置滚动条轨道颜色 */
-::-webkit-scrollbar-track {
-  background: rgba(231, 242, 250, 0.4);
-  border-radius: 3px;
-}
-
-/* 设置滚动条滑块颜色 */
-::-webkit-scrollbar-thumb {
-  background: rgba(45, 140, 240, 0.6);
-}
-
-/* 设置滚动条宽度 */
-::-webkit-scrollbar {
-  width: 6px;
-}
-
-.custom-list {
-  overflow-y: auto;
-  background-color: var(--scl-white-1);
-  padding: 0 8px 0 14px;
-  margin-top: -6px;
-}
-
-.list-item {
-  border-bottom: 1px solid var(--scl-gray-5);
-}
-
-
-
-</style>