wl-design-mobile 0.0.1 → 0.0.2

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

@@ -1,103 +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>
+<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 '../../btn/lambo-big-button.vue'
+import LamboMediumButton from '../../btn/lambo-medium-button.vue'
+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";
+
+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>

package/edit/select/lambo-edit-date-range.vue

@@ -1,135 +1,135 @@
-<template>
-  <div class="edit-box">
-    <div class="edit-left-box">
-      <div class="edit-left-top">
-        <div v-if="required" class="edit-red-icon">
-          <lambo-required-red-star :required="required"></lambo-required-red-star>
-        </div>
-        <div class="edit-title">{{ title }}</div>
-      </div>
-      <van-field v-model="valName" :placeholder="placeholder" :readonly="true"
-                 class="edit-lambo-input" clear-trigger="focus"></van-field>
-      <van-calendar v-model:show="showBottom" :default-date="defaultDateArr" :max-date="maxDate" :min-date="minDate"
-                    :style="{ maxHeight: '65%' }" color="#0070D2" type="range" @confirm="onConfirm"/>
-    </div>
-    <div v-if="icon" class="edit-right-icon">
-      <lambo-vector-icon :icon="icon" @click="changeColor"></lambo-vector-icon>
-    </div>
-  </div>
-</template>
-<script>
-import LamboVectorIcon from '@/components/lambo/icon/lambo-vector-icon.vue'
-import LamboRequiredRedStar from '@/components/lambo/icon/lambo-required-red-star.vue'
-import moment from "moment/moment";
-import {deepCopy} from "@/libs/assist";
-
-export default {
-  name: 'LamboEditDateRange',
-  components: {LamboRequiredRedStar, LamboVectorIcon},
-  props: {
-    icon: {
-      type: String,
-      default: "date.png",
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: '请选择',
-    },
-    defaultDate: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      valName: '',
-      showBottom: false,
-      selectItem: {
-        date: [],
-        date8: []
-      },
-      minDate: new Date((new Date()).getFullYear() - 1, (new Date()).getMonth() + 1, (new Date()).getDate()),
-      maxDate: new Date((new Date()).getFullYear() + 1, (new Date()).getMonth() + 1, (new Date()).getDate()),
-      defaultDateArr: []
-    }
-  },
-  methods: {
-    changeColor() {
-      this.showBottom = !this.showBottom
-      let searchRows = document.querySelectorAll('.edit-box')
-      Array.from(searchRows).forEach(function (row, index) {
-        row.addEventListener('click', function () {
-          Array.from(searchRows).forEach(function (row) {
-            row.style.borderBottom = '1px solid var(--scl-white-2)'
-          })
-          row.style.borderBottom = '1px solid var(--scl-blue)'
-        })
-      })
-    },
-    onConfirm(time) {
-      console.log(" onConfirm time:", time)
-      if (Array.isArray(time)) {
-        if (time.length === 2) {
-          let startDate1 = moment(time[0]).format("yyyyMMDD") || ''
-          let endDate1 = moment(time[1]).format("yyyyMMDD") || ''
-          let startDateFormat = moment(time[0]).format('yyyy-MM-DD') || ''
-          let endDateFormat = moment(time[1]).format('yyyy-MM-DD') || ''
-          if (startDate1 && endDate1) {
-            this.selectItem.date8 = [startDate1, endDate1]
-            this.selectItem.date = [startDateFormat, endDateFormat]
-            this.valName = startDateFormat + "~" + endDateFormat
-            this.$emit("on-ok", this.selectItem)
-          }
-        }
-      }
-      this.showBottom = false
-    },
-    initDefaultVal() {
-      // 默认值处理
-      if (this.defaultDate && Array.isArray(this.defaultDate) && this.defaultDate.length === 2) {
-        let defDateArr = this.defaultDate
-        if (defDateArr && defDateArr.length === 2 && defDateArr[0] && defDateArr[1]) {
-          this.selectItem.date8 = deepCopy(defDateArr)
-
-          let startDate8 = defDateArr[0]
-          let endDate8 = defDateArr[1]
-          let startDateFormat = moment(startDate8).format('yyyy-MM-DD') || ''
-          let endDateFormat = moment(endDate8).format('yyyy-MM-DD') || ''
-
-          let startDate1 = moment(startDate8).format("yyyyMMDD") || ''
-          let endDate1 = moment(endDate8).format("yyyyMMDD") || ''
-
-          this.selectItem.date[0] = startDateFormat
-          this.selectItem.date[1] = endDateFormat
-
-          this.selectItem.date8 = [startDate1, endDate1]
-          this.valName = startDateFormat + " ~ " + endDateFormat
-
-          let startDateObj = moment(startDate8).toDate()
-          let endDateObj = moment(endDate8).toDate()
-          this.defaultDateArr = [startDateObj, endDateObj]
-
-          this.$emit("on-ok", this.selectItem)
-        }
-      }
-    }
-  },
-  created() {
-    this.initDefaultVal()
-  },
-  mounted() {
-  }
-}
-</script>
-<style scoped>
-@import "../../styles/index.less";
-@import "styles/css/index.css";
-</style>
+<template>
+  <div class="edit-box">
+    <div class="edit-left-box">
+      <div class="edit-left-top">
+        <div v-if="required" class="edit-red-icon">
+          <lambo-required-red-star :required="required"></lambo-required-red-star>
+        </div>
+        <div class="edit-title">{{ title }}</div>
+      </div>
+      <van-field v-model="valName" :placeholder="placeholder" :readonly="true"
+                 class="edit-lambo-input" clear-trigger="focus"></van-field>
+      <van-calendar v-model:show="showBottom" :default-date="defaultDateArr" :max-date="maxDate" :min-date="minDate"
+                    :style="{ maxHeight: '65%' }" color="#0070D2" type="range" @confirm="onConfirm"/>
+    </div>
+    <div v-if="icon" class="edit-right-icon">
+      <lambo-vector-icon :icon="icon" @click="changeColor"></lambo-vector-icon>
+    </div>
+  </div>
+</template>
+<script>
+import LamboVectorIcon from '../../icon/lambo-vector-icon.vue'
+import LamboRequiredRedStar from '../../icon/lambo-required-red-star.vue'
+import moment from "moment/moment";
+import {deepCopy} from "../util/assist";
+
+export default {
+  name: 'LamboEditDateRange',
+  components: {LamboRequiredRedStar, LamboVectorIcon},
+  props: {
+    icon: {
+      type: String,
+      default: "date.png",
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '请选择',
+    },
+    defaultDate: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      valName: '',
+      showBottom: false,
+      selectItem: {
+        date: [],
+        date8: []
+      },
+      minDate: new Date((new Date()).getFullYear() - 1, (new Date()).getMonth() + 1, (new Date()).getDate()),
+      maxDate: new Date((new Date()).getFullYear() + 1, (new Date()).getMonth() + 1, (new Date()).getDate()),
+      defaultDateArr: []
+    }
+  },
+  methods: {
+    changeColor() {
+      this.showBottom = !this.showBottom
+      let searchRows = document.querySelectorAll('.edit-box')
+      Array.from(searchRows).forEach(function (row, index) {
+        row.addEventListener('click', function () {
+          Array.from(searchRows).forEach(function (row) {
+            row.style.borderBottom = '1px solid var(--scl-white-2)'
+          })
+          row.style.borderBottom = '1px solid var(--scl-blue)'
+        })
+      })
+    },
+    onConfirm(time) {
+      console.log(" onConfirm time:", time)
+      if (Array.isArray(time)) {
+        if (time.length === 2) {
+          let startDate1 = moment(time[0]).format("yyyyMMDD") || ''
+          let endDate1 = moment(time[1]).format("yyyyMMDD") || ''
+          let startDateFormat = moment(time[0]).format('yyyy-MM-DD') || ''
+          let endDateFormat = moment(time[1]).format('yyyy-MM-DD') || ''
+          if (startDate1 && endDate1) {
+            this.selectItem.date8 = [startDate1, endDate1]
+            this.selectItem.date = [startDateFormat, endDateFormat]
+            this.valName = startDateFormat + "~" + endDateFormat
+            this.$emit("on-ok", this.selectItem)
+          }
+        }
+      }
+      this.showBottom = false
+    },
+    initDefaultVal() {
+      // 默认值处理
+      if (this.defaultDate && Array.isArray(this.defaultDate) && this.defaultDate.length === 2) {
+        let defDateArr = this.defaultDate
+        if (defDateArr && defDateArr.length === 2 && defDateArr[0] && defDateArr[1]) {
+          this.selectItem.date8 = deepCopy(defDateArr)
+
+          let startDate8 = defDateArr[0]
+          let endDate8 = defDateArr[1]
+          let startDateFormat = moment(startDate8).format('yyyy-MM-DD') || ''
+          let endDateFormat = moment(endDate8).format('yyyy-MM-DD') || ''
+
+          let startDate1 = moment(startDate8).format("yyyyMMDD") || ''
+          let endDate1 = moment(endDate8).format("yyyyMMDD") || ''
+
+          this.selectItem.date[0] = startDateFormat
+          this.selectItem.date[1] = endDateFormat
+
+          this.selectItem.date8 = [startDate1, endDate1]
+          this.valName = startDateFormat + " ~ " + endDateFormat
+
+          let startDateObj = moment(startDate8).toDate()
+          let endDateObj = moment(endDate8).toDate()
+          this.defaultDateArr = [startDateObj, endDateObj]
+
+          this.$emit("on-ok", this.selectItem)
+        }
+      }
+    }
+  },
+  created() {
+    this.initDefaultVal()
+  },
+  mounted() {
+  }
+}
+</script>
+<style scoped>
+@import "../../styles/index.less";
+@import "styles/css/index.css";
+</style>

package/edit/select/lambo-edit-date-time.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="edit-box">
+    <div class="edit-left-box">
+      <div class="edit-left-top">
+        <div v-if="required" class="edit-red-icon">
+          <lambo-required-red-star :required="required"></lambo-required-red-star>
+        </div>
+        <div class="edit-title">{{ title }}</div>
+      </div>
+      <van-field v-model="valName" :placeholder="placeholder" :readonly="true"
+                 class="edit-lambo-input" clear-trigger="focus"></van-field>
+      <van-popup v-model="showBottom" position="bottom" :style="{ maxHeight: '33%' }">
+        <van-datetime-picker :type="type" title="选择时间" @confirm="onConfirm"
+                             @cancel="onCancelTime"/>
+      </van-popup>
+    </div>
+    <div v-if="icon" class="edit-right-icon">
+      <lambo-vector-icon :icon="icon" @click="changeColor"></lambo-vector-icon>
+    </div>
+  </div>
+</template>
+<script>
+import LamboVectorIcon from '../../icon/lambo-vector-icon.vue'
+import LamboRequiredRedStar from '../../icon/lambo-required-red-star.vue'
+import moment from "moment/moment";
+
+export default {
+  name: 'LamboEditDateTime',
+  components: {LamboRequiredRedStar, LamboVectorIcon},
+  props: {
+    icon: {
+      type: String,
+      default: "timeicon.png",
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '请选择',
+    },
+    type: {
+      type: String,
+      default: 'datetime',
+    },
+  },
+  data() {
+    return {
+      valName: '',
+      showBottom: false,
+      selectItem: {
+        dateStr: '',
+        dateFormat: ''
+      },
+    }
+  },
+  methods: {
+    changeColor() {
+      this.showBottom = !this.showBottom
+      let searchRows = document.querySelectorAll('.edit-box')
+      Array.from(searchRows).forEach(function (row, index) {
+        row.addEventListener('click', function () {
+          Array.from(searchRows).forEach(function (row) {
+            row.style.borderBottom = '1px solid var(--scl-white-2)'
+          })
+          row.style.borderBottom = '1px solid var(--scl-blue)'
+        })
+      })
+    },
+    onConfirm(time) {
+      console.log(" onConfirm time:", time)
+      let dateStr = '';
+      let dateFormat = '';
+      if (this.type === 'time') {
+        let formattedTime = moment(time, 'HH:mm').format("HHmm");
+        dateStr = formattedTime || '';
+        dateFormat = time || '';
+      } else {
+        dateStr = moment(time).format("YYYYMMDDHHmmss") || ''
+        dateFormat = moment(time).format("YYYY-MM-DD HH:mm:ss") || ''
+      }
+      this.valName = dateFormat
+      this.selectItem.dateStr = dateStr
+      this.selectItem.dateFormat = dateFormat
+      this.$emit("on-ok", this.selectItem)
+      this.showBottom = false
+    },
+    onCancelTime() {
+      this.showBottom = false;
+    },
+  },
+  created() {
+  },
+  mounted() {
+  }
+}
+</script>
+<style scoped>
+@import "styles/css/index.css";
+</style>