@logwire/logwire-wms-pda-ui 1.2.0 → 3.1.0

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

@@ -1,259 +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>
+<!--
+  @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: null,
+
+    // 点击后跳转的页面
+    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

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

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

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

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

@@ -0,0 +1,158 @@
+<!--
+  行加多选弹出框
+  @author: 张文
+  @date: 2022-12-08
+-->
+<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="openPopup"
+      @clear="$emit('clear')"
+    />
+
+    <lw-popup-checkbox
+      v-model="showPopup"
+      :title="popupTitle || title"
+      :columns="columns"
+      :dict-key="dictKey"
+      :label-key="labelKey"
+      :value-key="valueKey"
+      :selected="selected"
+      :max="max"
+      @confirm="popupConfirm"
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "lwCellPopupCheckbox",
+  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'
+    },
+    // 最大可选项
+    max: {
+      type: Number,
+      default: 0
+    }
+  },
+  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() {
+      }
+    },
+    // 复选框弹框选择的数据
+    selected() {
+      if (!this.val) return []
+      return this.val.split(',')
+    }
+  },
+  data() {
+    return {
+      // 显示弹出层
+      showPopup: false,
+    }
+  },
+  methods: {
+    // 获取label的显示值
+    getLabel(arr = []) {
+
+      let valList = this.val.split(',')
+
+      let label = []
+      arr.forEach(item => {
+        if (valList.includes(item[this.valueKey])) {
+          label.push(item[this.labelKey])
+        }
+      })
+
+      return label.join(',')
+    },
+
+    // 打开弹出层
+    openPopup() {
+
+      this.showPopup = true
+    },
+
+    // 弹出层点击确定
+    popupConfirm(val, label, arr) {
+      this.val = val
+      this.$emit('confirm', val, label, arr)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>