@logwire/logwire-wms-pda-ui 3.1.3-zc-beta → 3.3.3

package/src/components/CellSearchSelectDel/index.vue

@@ -0,0 +1,414 @@
+<!--
+  行搜索选择删除组件
+  @author: 张文
+  @date: 2023-06-06
+-->
+<template>
+  <div
+    :class="[
+      (isRow && (!isRowStart && !isRowEnd)) && 'lw-global-row',
+      isRowStart && 'lw-global-row-start',
+      isRowEnd && 'lw-global-row-end',
+    ]"
+  >
+
+    <!-- 显示的行 -->
+    <div class="lw-global-flex-between" style="align-items: flex-start">
+
+      <div
+        :class="[
+          selectList.length ? 'lw-global-flex-start-start':'lw-global-flex-start'
+        ]"
+        style="flex: 1"
+      >
+
+        <!-- 标题 -->
+        <div
+          style="flex-shrink: 0;"
+          :class="[
+            'lw-global-title',
+            required && 'lw-global-required'
+          ]"
+        >
+          {{ title }}
+        </div>
+
+        <!-- 结果和输入框 -->
+        <div class="lw-global-flex-start" style="flex: 1;flex-wrap: wrap;margin-left: 5px">
+          <!-- 选中的结果 -->
+          <lw-tag
+            v-for="(i,k) in selectList"
+            :key="k"
+            :closeable="!i.disabled"
+            size="medium"
+            type="primary"
+            color="#888"
+            @close="delOption(k)"
+          >
+            {{ labelMsg(i) }}
+          </lw-tag>
+
+          <!-- 外部搜索框 -->
+          <lw-input
+            style="width: 100%;padding: 0;margin-left: 4px"
+            v-model="outSearch"
+            :get-focus.sync="outSearchFocus"
+            :placeholder="$lwLanguage.get('wms_project.pda.components.CellSearchSelectDel.index.kwqsjoha','搜索关键字')"
+            :show-bottom-border="false"
+            :create-rule="createRule"
+            :rule-key="ruleKey"
+            @confirm="outSearchConfirm"
+          >
+
+            <template #button>
+
+              <van-icon
+                style="flex-shrink: 0"
+                :name="icon"
+                size="22"
+                :color="iconColor"
+                @click="popup.show = true"
+              />
+
+            </template>
+
+          </lw-input>
+        </div>
+
+      </div>
+
+    </div>
+
+    <!-- 弹框 -->
+    <lw-popup
+      :title="$lwLanguage.get('wms_project.pda.components.CellSearchSelectDel.index.xhwwalvy','请选择') + title"
+      v-model="popup.show"
+      @open="popupOpen"
+      @closed="popupOff"
+    >
+      <!-- 搜索 -->
+      <lw-input
+        v-model="popup.search"
+        :placeholder="$lwLanguage.get('wms_project.pda.components.CellSearchSelectDel.index.kwqsjoha','搜索关键字')"
+        :create-rule="createRule"
+        :rule-key="ruleKey"
+        @confirm="popupSearch"
+      >
+        <template #button>
+          <lw-button
+            mini
+            round
+            @click="popupSearch"
+          >
+            {{ $lwLanguage.get('wms_project.pda.components.CellSearchSelectDel.index.rkerufrd', '搜索') }}
+          </lw-button>
+        </template>
+      </lw-input>
+
+      <div class="select-box">
+        <van-checkbox-group v-model="popup.result">
+          <van-checkbox
+            v-for="i in popup.list"
+            :key="i[valueKey]"
+            :name="i[valueKey]"
+          >
+            {{ labelMsg(i) }}
+          </van-checkbox>
+        </van-checkbox-group>
+      </div>
+
+      <lw-pagination
+        v-if="apiFn && needPage"
+        v-model="popup.pageNum"
+        :page-size.sync="popup.pageSize"
+        :page-total="popup.pageTotal"
+        @change="pageChange"
+      />
+
+      <lw-not-data
+        v-if="!popup.list.length"
+        :content="$lwLanguage.get('wms_project.pda.components.CellSearchSelectDel.index.nepyjhvj','没有可供选择的数据')"
+      />
+
+
+      <template #button>
+        <lw-button
+          @click="popupConfirm"
+        >{{ $lwLanguage.get('wms_project.pda.components.CellSearchSelectDel.index.ftjsrrcv', '确定') }}
+        </lw-button>
+      </template>
+    </lw-popup>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwCellSearchSelectDel",
+  props: {
+    // 标题
+    title: String,
+
+    // 选中的值
+    value: {
+      type: Array,
+      default: () => []
+    },
+
+    // 条码解析id
+    createRule: Object,
+    // 扫码解析规则
+    ruleKey: String,
+
+    // 按钮旁边的图标，仅支持 vant UI库图标
+    icon: {
+      type: String,
+      default: 'add-o'
+    },
+    // 按钮旁边的图标颜色
+    iconColor: {
+      type: String,
+      default: '#333333'
+    },
+    //是否必填
+    required: {
+      type: Boolean,
+      default: true
+    },
+    focus: {
+      type: Boolean,
+      default: false
+    },
+
+    // 是否显示行样式
+    isRow: {
+      type: Boolean,
+      default: true
+    },
+    // 是否是行起始
+    isRowStart: {
+      type: Boolean,
+      default: false
+    },
+    // 是否是行结尾
+    isRowEnd: {
+      type: Boolean,
+      default: false
+    },
+
+    // 获取数据的api 应当是异步函数，最优先
+    apiFn: Function,
+    // 提供选择的数据，优先
+    columns: Array,
+    // 字典键值，次优先
+    dictKey: String,
+
+    // 显示的键值名，允许使用多个key，用英文逗号隔开
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    // 取值的键值名
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    // 最大可选数
+    max: {
+      type: Number,
+      default: 0
+    },
+
+    // 是否需要分页，当 apiFn 为真时有效
+    needPage: Boolean,
+    // 函数调用时的数据取值key
+    apiDataKey: {
+      type: String,
+      default: 'datas'
+    },
+    // 函数调用时的总条数取值key
+    apiDataTotalKey: {
+      type: String,
+      default: 'total'
+    },
+  },
+  data() {
+    return {
+
+      // 外部输入框搜索
+      outSearch: '',
+
+      popup: {
+        show: false,
+        search: '',
+        result: [],
+        list: [],
+        pageNum: 1,
+        pageSize: 10,
+        pageTotal: 0,
+      }
+    }
+  },
+  computed: {
+    selectList: {
+      get() {
+        return this.value
+      },
+      set(v) {
+        this.$emit('input', v)
+      }
+    },
+    outSearchFocus: {
+      get() {
+        return this.focus
+      },
+      set(v) {
+        this.$emit('update:focus', v)
+      }
+    },
+  },
+  methods: {
+
+    // 显示值格式化
+    labelMsg(item) {
+      const k = this.labelKey.split(',')
+      let msg = ''
+      k.forEach(i => {
+        msg += `/ ${item[i]}`
+      })
+      return msg.substring(2)
+    },
+
+    // 获取数据
+    getData(keyword) {
+      if (this.apiFn) {
+        return this.apiFn({
+          keyword,
+          pageNum: this.popup.pageNum,
+          pageSize: this.popup.pageSize
+        })
+      }
+
+      let data = []
+      if (this.columns && this.columns.length) {
+        data = this.columns
+      } else if (this.dictKey) {
+        data = this.$lwDict.get(this.dictKey)
+      }
+      return data.filter(item => this.labelMsg(item).includes(keyword))
+    },
+
+    // 删除已选择项
+    delOption(index) {
+      this.selectList.splice(index, 1)
+    },
+
+    // 校验是否超过最大可选值
+    checkMax(num, selectNum) {
+      if (this.max > 0 && num > this.max) {
+        this.$lwToast.fail(
+          this.$lwLanguage.get('wms_project.pda.components.CellSearchSelectDel.index.ftjsrrcve', '超过最大可选量{num}，当前已选{selectNum}', {
+            num: this.max,
+            selectNum: selectNum || num
+          })
+        )
+        return false
+      }
+      return true
+    },
+
+    // 外部输入框搜索确认
+    async outSearchConfirm() {
+      if (!this.checkMax(this.selectList.length)) return
+
+      let res = await this.getData(this.outSearch)
+      if (this.apiFn) {
+        res = res[this.apiDataKey]
+      }
+
+      if (res.length === 1) {
+        this.selectList.push(res[0])
+        this.outSearch = ''
+        return
+      }
+
+      this.popup.search = this.outSearch
+      this.popup.show = true
+
+    },
+
+    // 弹框 - 打开
+    popupOpen() {
+      this.popup.pageNum = 1
+      this.popup.pageSize = 10
+      this.pageChange()
+    },
+    // 弹框 - 搜索
+    popupSearch() {
+      this.popupOpen()
+    },
+    // 弹框 - 页码改变
+    async pageChange() {
+      this.popup.result = []
+      let res = await this.getData(this.popup.search)
+      if (this.apiFn) {
+        res = res[this.apiDataKey]
+        this.needPage ? this.popup.pageTotal = res[this.apiDataTotalKey] : ''
+      }
+
+      this.popup.list = res
+    },
+    // 弹框 - 确认
+    popupConfirm() {
+
+      // 去重
+      for (let i = 0; i < this.selectList.length; i++) {
+        const k = this.popup.result.indexOf(this.selectList[i][this.valueKey])
+        if (k >= 0) {
+          this.popup.result.splice(k, 1)
+        }
+      }
+
+      const selectNum = this.selectList.length
+      if (!this.checkMax((selectNum + this.popup.result.length), selectNum)) return
+
+      this.popup.list.forEach(item => {
+        if (this.popup.result.includes(item[this.valueKey])) {
+          this.selectList.push(item)
+        }
+      })
+
+      this.popup.show = false
+    },
+    // 弹框 - 关闭
+    popupOff() {
+      this.outSearch = ''
+      this.outSearchFocus = true
+      this.popup.search = ''
+      this.popup.pageNum = 1
+      this.popup.pageSize = 10
+      this.popup.list = []
+      this.popup.result = []
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+@import "../../assets/css/var.less";
+
+.select-box {
+
+  /deep/ .van-checkbox {
+    padding: 5px;
+    font-size: 14px;
+
+    & + .van-checkbox {
+      //margin-top: 5px;
+      border-top: solid 1px @borderColor;
+    }
+  }
+
+}
+</style>

package/src/components/Input/index.vue

@@ -36,7 +36,7 @@
 
         <!-- 扫码 -->
         <img
-          v-if="!disabled && !readonly"
+          v-if="showScanIcon && !disabled && !readonly"
           class="lw-input-img"
           src="../../assets/img/lwInputIcon/scanIcon.png"
           alt="扫码"
@@ -51,7 +51,7 @@
           v-model="val"
           :name="name"
           :disabled="disabled"
-          :readonly="readonly"
+          :readonly="readonly || readonlyInp"
           :rows="rows"
           :maxlength="maxlength"
           :style="{
@@ -74,7 +74,7 @@
           :value="val"
           :maxlength="maxlength"
           :disabled="disabled"
-          :readonly="readonly"
+          :readonly="readonly || readonlyInp"
           :style="{
             textAlign:inputAlign
           }"
@@ -96,7 +96,7 @@
 
         <!-- 清除按钮 -->
         <van-icon
-          v-if="((showClear && !disabled && !readonly) || needShowClear ) && val"
+          v-if="((showClear && !disabled && !readonly && !readonlyInp) || needShowClear ) && val"
           class="lw-input-clear"
           name="clear"
           @click="clearClick"
@@ -244,10 +244,10 @@ export default {
       }
     },
 
-    // 是否通过双击键盘打开相机扫描功能
-    openCameraScan: {
+    // 是否显示扫描图标
+    showScanIcon: {
       type: Boolean,
-      default: false
+      default: true
     },
 
     // 输入完成后是否立刻失去焦点
@@ -321,6 +321,8 @@ export default {
   },
   data() {
     return {
+      // 用于禁止弹出键盘的临时标识
+      readonlyInp: false,
       // 是否通过点击键盘
       isClickKeyboard: false,
     }
@@ -372,12 +374,17 @@ export default {
     inputBlur() {
       if (this.val) this.val = this.val.toString().trim()
       this.focusVal = false
+      this.$emit('blur')
     },
 
     // 是否弹出键盘
     isOpenKeyboard() {
       if (this.notKeyboard) {
-        this.$lwAppPower.hideSoftInput(this)
+        this.readonlyInp = true
+        setTimeout(() => {
+          this.readonlyInp = false
+          this.$lwAppPower.hideSoftInput(this)
+        }, 200)
       }
     },
 

package/src/components/KeyboardOpenPlaceholder/index.js

@@ -0,0 +1,10 @@
+/*
+* 键盘弹出占位导出
+* @author: 张文
+* @date  2023-04-26
+* */
+import lwKeyboardOpenPlaceholder from './index.vue'
+
+lwKeyboardOpenPlaceholder.install = Vue => Vue.component(lwKeyboardOpenPlaceholder.name, lwKeyboardOpenPlaceholder)
+
+export default lwKeyboardOpenPlaceholder

package/src/components/KeyboardOpenPlaceholder/index.vue

@@ -0,0 +1,43 @@
+<!--
+  键盘弹出占位
+  @author: 张文
+  @date: 2023-04-26
+-->
+<template>
+  <div
+    class="lw-global-flex-center keyboard-placeholder"
+    :style="{ height: (height || keyboardHeight) + 'px' }"
+  >
+    <div style="margin-bottom: 50px">{{ msg || $lwLocalStorage.get('lwKeyboardMsg') }}</div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwKeyboardOpenPlaceholder",
+  props: {
+    height: Number,
+    msg: String
+  },
+  data() {
+    return {
+      keyboardHeight: 0
+    }
+  },
+  mounted() {
+    const viewH = document.documentElement.clientHeight
+    this.keyboardHeight = viewH * 0.4
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+.keyboard-placeholder {
+  width: 100%;
+  color: #ccc;
+  text-align: center;
+  font-size: 12px;
+}
+</style>

package/src/components/Pages/index.vue

@@ -178,7 +178,7 @@ export default {
 
   :deep(.van-pagination__page-desc){
     height: 30px;
-    border-bottom: solid 1px @baseColor;
+    //border-bottom: solid 1px @baseColor;
     box-sizing: border-box;
     margin: 0 10px;
   }

package/src/components/Popup/index.vue

@@ -31,6 +31,9 @@
 
       <div style="height: 10px" :id="anchor"><!-- 滚动到页面顶部的锚点 --></div>
       <slot></slot>
+
+      <!-- 键盘弹出占位符 -->
+      <lw-keyboard-open-placeholder v-if="showKeyboardPlaceholder"/>
     </div>
 
 
@@ -144,10 +147,16 @@ export default {
 
 
     // 是否显示底部操作栏
-    showBottomBar:{
+    showBottomBar: {
       type: Boolean,
       default: true
     },
+
+    // 是否显示键盘占位符
+    showKeyboardPlaceholder: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {

package/src/components/PopupCheckbox/index.vue

@@ -10,6 +10,7 @@
     v-model="show"
     :title="title"
     :height="height"
+    :show-keyboard-placeholder="false"
     :off-btn-text="$lwLanguage.get('wms_project.pda.common.cancel', '取消')"
   >
 
@@ -101,7 +102,7 @@ export default {
     columns: Array,
     // 字典键值
     dictKey: String,
-    // 显示的键值名，运行使用多个key，用英文逗号隔开
+    // 显示的键值名，允许使用多个key，用英文逗号隔开
     labelKey: {
       type: String,
       default: 'label'

package/src/components/PopupRadio/index.vue

@@ -9,6 +9,7 @@
     v-model="show"
     :title="title"
     height="auto"
+    :show-keyboard-placeholder="false"
     :off-btn-text="$lwLanguage.get('wms_project.pda.common.cancel', '取消')"
   >
     <van-picker
@@ -19,7 +20,7 @@
       :visible-item-count="5"
       @confirm="pickerConfirm"
     />
-    <lw-not-data v-else/>
+    <lw-not-data :content="nullMsg" v-else/>
 
     <template #button>
       <lw-button
@@ -57,6 +58,8 @@ export default {
       type: String,
       default: 'value'
     },
+    // 当数据为空时的显示文字
+    nullMsg: String,
   },
   computed: {
     show: {