@logwire/logwire-wms-pda-ui 1.1.15

package/src/components/ui/Cell/index.vue

@@ -0,0 +1,259 @@
+<!--
+  @name: lwCell
+  @description: -
+  @author 张文
+  @date: 2022-01-18
+-->
+<template>
+  <div
+    class="lw-global-flex-between lw-cell-box"
+    :style="{borderBottom: !border ? 'none' : ''}"
+  >
+
+    <div
+      :class="[
+        'lw-global-flex-between',
+        isLink ? 'lw-global-click-style' : '',
+        'lw-cell-boss'
+      ]"
+      @click="click"
+    >
+      <div
+        :class="[
+          'lw-cell-title-box',
+          required?'lw-global-required':'',
+          showColon?'lw-global-show-colon':''
+        ]"
+        :style="{
+          textAlign:titleAlign,
+          width:typeof titleWidth === 'number' ? titleWidth + 'px' : titleWidth,
+          flexShrink:titleWidth !== 'auto' ? 0 :'',
+          flex: titleWidth !== 'auto' ? 'initial' : 1
+        }"
+      >
+        <slot name="title">{{ title }}</slot>
+      </div>
+
+      <div
+        class="lw-cell-value-box"
+        :style="{
+          textAlign: valueAlign,
+          width:typeof valueWidth === 'number' ? valueWidth + 'px' : valueWidth,
+          flexShrink:valueWidth !== 'auto' ? 0 :'',
+          flex: valueWidth !== 'auto' ? 'initial' : 1
+        }"
+      >
+        <slot name="value">
+          <span v-if="value">{{ value }}</span>
+        </slot>
+        <span
+          v-if="!value && isEdit"
+          class="lw-cell-placeholder"
+        >{{ placeholder ? placeholder : $lwLanguage.get('wms_project.pda.component.cell.select','请选择') + title }}</span>
+      </div>
+
+      <van-icon
+        class="lw-cell-icon"
+        v-if="isLink && (!isEdit || !value)"
+        name="arrow"
+      />
+
+    </div>
+
+    <template v-if="isEdit">
+      <van-icon
+        class="lw-cell-icon"
+        v-if="isEdit && value"
+        name="clear"
+        @click="clear"
+      />
+    </template>
+
+    <!-- 用于储存提交数据的值 -->
+    <input
+      class="lw-cell-inp"
+      type="text"
+      :value="formVal"
+      :name="name"
+    >
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwCell",
+  props: {
+
+    // 当前是否是编辑模式，开启后当右侧有值时会自动显示清除按钮
+    isEdit:{
+      type: Boolean,
+      default: false
+    },
+
+    // 标题
+    title: String,
+    // 标题对齐方式
+    titleAlign: {
+      type: String,
+      default: 'left'
+    },
+    // 标题宽度
+    titleWidth: {
+      type: [String, Number],
+      default: 'auto'
+    },
+
+    // 右侧显示内容
+    value: [String, Number],
+    // 右侧内容对齐方式
+    valueAlign: {
+      type: String,
+      default: 'right'
+    },
+    // 标题宽度
+    valueWidth: {
+      type: [String, Number],
+      default: 'auto'
+    },
+
+    // 占位提示文字
+    placeholder: String,
+
+    // 是否显示边框
+    border: {
+      type: Boolean,
+      default: true
+    },
+    // 是否展示右侧箭头并开启点击反馈
+    isLink: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示必填星号
+    required: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示冒号
+    showColon: {
+      type: Boolean,
+      default: false
+    },
+
+    // 表单提交时显示的name名字
+    name: String,
+    // 表单提交的数据是否同 value 的值一致
+    submitValue:{
+      type: Boolean,
+      default: true
+    },
+    // 表单提交的数据
+    formValue: String,
+
+    // 点击后跳转的页面
+    path: String,
+    // 点击跳转后携带的参数
+    query:{
+      type: Object,
+      default: () => {}
+    }
+  },
+  computed:{
+    val:{
+      get(){
+        return this.value
+      },
+      set(v){
+        this.$emit('input', v)
+      }
+    },
+    formVal:{
+      get(){
+        if (this.submitValue){
+          return this.value
+        }
+        return this.formValue
+      },
+      set(v){
+        !this.submitValue && this.$emit('update:formValue', v)
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 清除按钮
+    clear() {
+      this.val = ''
+      this.formVal = ''
+      this.$emit('clear')
+    },
+
+    // 点击
+    click(ev){
+      if (!this.isLink) return
+
+      if (this.isLink && this.path){
+        this.$router.push({
+          path: this.path,
+          query: this.query
+        })
+        return
+      }
+
+      this.$emit('click', ev)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "../../../assets/css/var.less";
+
+.lw-cell-box{
+  border-bottom: solid 1px @borderColor;
+  position: relative;
+  font-size: 14px;
+  padding: 5px 0;
+}
+
+.lw-cell-boss{
+  flex: 1;
+  width: calc(100% - 28px);
+  padding: 5px 0;
+}
+
+.lw-cell-title-box{
+  color: @titleColor;
+}
+
+.lw-cell-value-box{
+  margin: 0 6px;
+  color: @fontColor;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.lw-cell-placeholder{
+  color: #cdcdcd;
+  font-size: 14px;
+}
+
+.lw-cell-icon{
+  color: #cdcdcd;
+  font-size: 18px;
+}
+
+.lw-cell-inp{
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+}
+
+</style>

package/src/components/ui/Cell//345/215/225/345/205/203/346/240/274.md

@@ -0,0 +1 @@
+# 单元格 [查看文档](https://www.yuque.com/docs/share/b72d82d1-fa89-47aa-82a4-38d7bf95f8c6)

package/src/components/ui/CellPopupDate/index.js

@@ -0,0 +1,11 @@
+/*
+* 单元行加时间选择器
+* @author: 张文
+* @date  2022-03-30
+* */
+
+import lwCellPopupDate from "./index.vue";
+
+lwCellPopupDate.install = Vue => Vue.component(lwCellPopupDate.name, lwCellPopupDate)
+
+export default lwCellPopupDate

package/src/components/ui/CellPopupDate/index.vue

@@ -0,0 +1,167 @@
+<!--
+  单元行加时间选择器
+  @author: 张文
+  @date: 2022-03-30
+-->
+<template>
+  <div>
+    <lw-cell
+      v-model="val"
+      :title="title || $lwLanguage.get('wms_project.pda.component.cellPopupDate.date','日期')"
+      :is-edit="!disabled"
+      :is-link="!disabled"
+      :placeholder="placeholder"
+      :required="required"
+      :name="name"
+      :border="border"
+      @click="cellClick"
+      @clear="$emit('clear')"
+    />
+
+    <lw-popup
+      v-model="show"
+      height="auto"
+      :title="dateTitle || (title || $lwLanguage.get('wms_project.pda.component.cellPopupDate.date','日期'))"
+    >
+
+      <van-datetime-picker
+        ref="date"
+        v-model="dateValue"
+        :type="type"
+        :show-toolbar="false"
+        :filter="filter"
+        :min-hour="minHour"
+        :max-hour="maxHour"
+        :min-minute="minMinute"
+        :max-minute="maxMinute"
+        visible-item-count="3"
+        @confirm="dateConfirm"
+      />
+
+      <template #button>
+        <lw-button
+          @click="confirm"
+        >{{ $lwLanguage.get('wms_project.pda.common.confirm', '确定') }}</lw-button>
+      </template>
+    </lw-popup>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwCellPopupDate",
+  props:{
+    // 标题
+    title: String,
+    // 是否可禁用
+    disabled:{
+      type: Boolean,
+      default: false
+    },
+    // 绑定的值
+    value:{
+      type: String,
+      default: ''
+    },
+    // 占位提示
+    placeholder:String,
+    // 是否显示必填星号
+    required: Boolean,
+    // 表单提交时的键值
+    name: String,
+    // 是否显示下边框
+    border: {
+      type: Boolean,
+      default: true
+    },
+
+    // 时间类型
+    type:{
+      type: String,
+      default: 'date'
+    },
+    // 时间选择器弹出框标题
+    dateTitle: String,
+    // 时间回显的格式
+    format: String,
+
+    // type=time时生效
+    minHour:{
+      type: [String,Number],
+      default: 0
+    },
+    maxHour:{
+      type: [String,Number],
+      default: 23
+    },
+    minMinute:{
+      type: [String,Number],
+      default: 0
+    },
+    maxMinute:{
+      type: [String,Number],
+      default: 59
+    },
+    // 选项过滤函数
+    filter: {
+      type: Function,
+      default: (type, val) =>{
+        return val
+      }
+    }
+
+  },
+  computed:{
+    val:{
+      get(){
+        return this.value
+      },
+      set(v){
+        this.$emit('input', v)
+      }
+    }
+  },
+  data() {
+    return {
+      show: false,
+      dateValue:'',
+      formatInit:{
+        'date': 'yyyy-MM-dd',
+        'year-month': 'yyyy-MM',
+        'month-day': 'MM-dd',
+        'datehour': 'yyyy-MM-dd hh',
+        'datetime': 'yyyy-MM-dd hh:mm'
+      }
+    }
+  },
+  methods: {
+    // 行点击
+    cellClick(){
+      this.show = true
+
+      if (this.type === 'time'){
+        this.dateValue = this.val
+      }else {
+        this.dateValue = this.val ? new Date(this.val) : new Date()
+      }
+    },
+
+    // 弹窗口确定按钮
+    confirm(){
+      this.$refs.date.getPicker().confirm()
+    },
+    // 获取当前选中的值
+    dateConfirm(v){
+      const date = this.type === 'time' ? v : this.$lwDate.format(v, this.format || this.formatInit[this.type])
+      this.val = date
+      this.$emit('confirm', date, v)
+      this.show = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

package/src/components/ui/CellPopupDate//345/215/225/345/205/203/350/241/214/345/212/240/346/227/266/351/227/264/351/200/211/346/213/251/345/231/250.md

@@ -0,0 +1 @@
+# 单元行和时间选择器 [查看文档](https://www.yuque.com/docs/share/a15e09b1-9a23-46a8-886c-3ffcbc24d916)

package/src/components/ui/CellPopupRadio/index.js

@@ -0,0 +1,11 @@
+/*
+* 行加单选弹出框
+* @author: 张文
+* @date  2022-03-09
+* */
+
+import lwCellPopupRadio from "./index.vue";
+
+lwCellPopupRadio.install = Vue => Vue.component(lwCellPopupRadio.name, lwCellPopupRadio)
+
+export default lwCellPopupRadio

package/src/components/ui/CellPopupRadio/index.vue

@@ -0,0 +1,136 @@
+<!--
+  行加单选弹出框
+  @author: 张文
+  @date: 2022-03-09
+-->
+<template>
+  <div>
+    <lw-cell
+      :title="title"
+      v-model="label"
+      :form-value.sync="val"
+      :submit-value="false"
+      :placeholder="placeholder"
+      :is-link="!disabled"
+      :required="required"
+      :name="name"
+      :is-edit="!disabled"
+      :border="border"
+      @click="showPopup = true"
+      @clear="$emit('clear')"
+    />
+
+    <lw-popup-radio
+      v-model="showPopup"
+      :title="popupTitle || title"
+      :columns="columns"
+      :dict-key="dictKey"
+      :label-key="labelKey"
+      :value-key="valueKey"
+      @confirm="popupConfirm"
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwCellPopupRadio",
+  props:{
+    // 递交的初始数据
+    value: String,
+    // 行的title
+    title: String,
+    // 行占位提示文字
+    placeholder: String,
+    // 是否禁用
+    disabled:{
+      type: Boolean,
+      default: false
+    },
+    // 是否显示必填星号
+    required:{
+      type: Boolean,
+      default: false
+    },
+    // 表单提交时的key
+    name:String,
+    // 是否显示下边框
+    border:{
+      type:Boolean,
+      default: true
+    },
+
+
+
+    // 弹框的title
+    popupTitle: String,
+    // 提供选择的数据
+    columns: Array,
+    // 取值字典时的key
+    dictKey: String,
+    // 单选显示的值的key
+    labelKey: {
+      type:String,
+      default: 'label'
+    },
+    // 单选选中的值的key
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+  },
+  computed:{
+    val:{
+      get(){
+        return this.value
+      },
+      set(v){
+        this.$emit('input', v)
+      }
+    },
+    // 右侧显示的数据
+    label:{
+      get(){
+        if (!this.val) return ''
+
+        if (this.columns) return this.getLabel(this.columns)
+
+        const list = this.dictKey && this.$lwDict.get(this.dictKey)
+        if (Array.isArray(list)) return this.getLabel(list)
+
+        return this.val
+      },
+      set() {}
+    }
+  },
+  data() {
+    return {
+      // 显示弹出层
+      showPopup: false,
+    }
+  },
+  methods: {
+    // 获取label的显示值
+    getLabel(arr=[]){
+      for (let i = 0; i < arr.length; i++) {
+        if(arr[i][this.valueKey] === this.val){
+          return arr[i][this.labelKey]
+        }
+      }
+      return ''
+    },
+
+    // 弹出层点击确定
+    popupConfirm(item){
+      this.label = item[this.labelKey]
+      this.val = item[this.valueKey]
+      this.$emit('confirm', item)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

package/src/components/ui/CellPopupRadio//350/241/214/345/212/240/345/215/225/351/200/211/345/274/271/345/207/272/346/241/206.md

@@ -0,0 +1 @@
+# 行加单选弹出框 [查看文档](https://www.yuque.com/docs/share/d6cfe8bb-7525-4f1c-83ea-d18970c59f5a)

package/src/components/ui/CutCard/index.js

@@ -0,0 +1,11 @@
+/*
+* 切换卡片页面
+* @author: 张文
+* @date  2022-05-19
+* */
+
+import lwCutCard from "./index.vue";
+
+lwCutCard.install = Vue => Vue.component(lwCutCard.name, lwCutCard)
+
+export default lwCutCard