eoss-mobiles 0.1.13

package/packages/picker/src/main.vue

@@ -0,0 +1,500 @@
+<template>
+  <div class="em-picker">
+    <em-input
+      v-if="!isCheck"
+      readonly
+      clickable
+      v-bind="$attrs"
+      :label="label"
+      :value="pickerValue"
+      :required="required"
+      :label-width="labelWidth"
+      :disabled="disabled"
+      :hideLabel="hideLabel"
+      @click="handlePicker"
+    >
+      <!-- :placeholder="disabled ? '暂无数据' : placeholder" -->
+      <template slot="input">
+        <span :style="`color:${!pickerValue ? 'rgb(150, 151, 153)' : ''}`">{{
+          pickerValue
+            ? pickerValue
+            : disabled
+            ? '暂无数据'
+            : placeholder
+            ? placeholder
+            : `请选择${label}`
+        }}</span>
+      </template>
+    </em-input>
+    <em-input
+      v-else
+      readonly
+      clickable
+      :label="label"
+      :required="required"
+      :disabled="disabled"
+      :label-width="labelWidth"
+      :hideLabel="hideLabel"
+      @click="handlePicker"
+    >
+      <template slot="input">
+        <div style="width:100%">
+          <slot name="textTop"></slot>
+          <div v-if="pickerValue.length > 0">
+            <em-tag
+              v-for="(r, i) in pickerValue"
+              :closeable="!disabled"
+              type="primary"
+              :key="i"
+              @click.stop="handleClick(r)"
+              @close="deleteList(i, r)"
+              >{{ r[labelKey] || r.name }}</em-tag
+            >
+          </div>
+          <div v-else style="color:#969799">
+            {{
+              disabled
+                ? ' 暂无数据'
+                : !placeholder
+                ? '请选择' + label
+                : placeholder
+            }}
+          </div>
+        </div>
+      </template>
+    </em-input>
+    <van-popup v-model="showPicker" round position="bottom">
+      <van-picker
+        v-if="!isCheck"
+        show-toolbar
+        :loading="newLoading"
+        :columns="newColumns"
+        v-bind="$attrs"
+        v-on="$listeners"
+        :valueKey="labelKey"
+        :defaultIndex="newDefaultIndex"
+        @cancel="showPicker = false"
+        @confirm="onConfirm($event, true)"
+      >
+        <template v-for="(index, name) in $slots" :slot="name">
+          <slot :name="name" />
+        </template>
+      </van-picker>
+      <van-picker
+        v-else
+        show-toolbar
+        class="check-picker"
+        :loading="newLoading"
+        :columns="newColumns"
+        v-bind="$attrs"
+        v-on="$listeners"
+        :valueKey="labelKey"
+        :defaultIndex="newDefaultIndex"
+        @cancel="onConfirm"
+        @confirm="onConfirm($event, true)"
+      >
+        <template slot="columns-top">
+          <div class="em-picker__columns">
+            <em-list
+              v-model="listLoading"
+              :finished="listFinished"
+              :finished-text="sysAppCode || url ? '没有更多了' : ''"
+              @load="onLoad"
+              :offset="50"
+            >
+              <van-checkbox-group v-model="checkList">
+                <em-cell
+                  v-for="(item, index) in newColumns"
+                  clickable
+                  :key="item[valueKey]"
+                  :isGroup="false"
+                  :title="item[labelKey]"
+                  @click="toggle(index)"
+                >
+                  <template #right-icon>
+                    <van-checkbox :name="item[valueKey]" ref="checkboxes" />
+                  </template>
+                </em-cell>
+              </van-checkbox-group>
+            </em-list>
+          </div>
+        </template>
+      </van-picker>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { findSysCode } from '../../../src/config/api';
+import request from '../../../src/utils/http.js';
+export default {
+  name: 'EmPicker',
+  inheritAttrs: false,
+  data() {
+    return {
+      showPicker: false,
+      newLoading: false,
+      newLabelKey: '',
+      newValueKey: '',
+      listLoading: false,
+      listFinished: false,
+      newColumns: [],
+      checkList: [],
+      newDefaultIndex: 0,
+      pageIndex: 1,
+      total: -1
+    };
+  },
+  props: {
+    // 绑定值
+    value: {
+      type: [String, Array, Object],
+      default: ''
+    },
+    hideLabel: {
+      type: Boolean,
+      default: false
+    },
+    isCheck: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 展示标题
+    label: {
+      type: String,
+      default: '城市'
+    },
+    // 输入框占位提示文字
+    placeholder: {
+      type: String,
+      default: undefined
+    },
+    // 多级选择展示拼接字符
+    joinStr: {
+      type: String,
+      default: '/'
+    },
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    labelKey: {
+      type: String,
+      default: 'name'
+    },
+    sysAppCode: {
+      type: String,
+      default: ''
+    },
+    resultsName: {
+      type: String,
+      default: ''
+    },
+    method: {
+      type: String,
+      default: 'get'
+    },
+    url: {
+      type: String
+    },
+    param: {
+      type: Object,
+      default: () => {}
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    defaultIndex: {
+      type: [Number, String]
+    },
+    labelWidth: {
+      type: [Number, String],
+      default: '4em'
+    },
+    isTable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    pickerValue: {
+      get() {
+        return this.getValue();
+      },
+      set(val) {
+        this.$emit('input', val);
+      }
+    }
+  },
+  watch: {
+    labelKey: {
+      handler(val) {
+        this.newLabelKey = val;
+      },
+      deep: true,
+      immediate: true
+    },
+    valueKey: {
+      handler(val) {
+        this.newValueKey = val;
+      },
+      deep: true,
+      immediate: true
+    },
+    columns: {
+      handler(val) {
+        if(this.sysAppCode) return
+        this.newColumns = val;
+      },
+      deep: true,
+      immediate: true
+    },
+    defaultIndex: {
+      handler(val) {
+        this.newDefaultIndex = val;
+      },
+      deep: true,
+      immediate: true
+    },
+    loading: {
+      handler(val) {
+        this.newLoading = val;
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {
+    if (
+      (this.sysAppCode || this.url) &&
+      this.newColumns.length == 0 &&
+      !this.isCheck
+    ) {
+      this.getSysCode();
+    }
+    if (this.defaultIndex != undefined) {
+      let data = this.columns[this.defaultIndex];
+      if (typeof data === 'string' && data) {
+        this.pickerValue = data;
+      } else if (typeof data === 'object') {
+        this.pickerValue = data[this.newValueKey];
+      }
+    } else if (this.isCheck) {
+      let data = this.value;
+      data.map(item => {
+        this.checkList.push(item[this.valueKey] || item.value || item);
+      });
+    }
+  },
+  methods: {
+    handleClick(val) {
+      this.$emit('tagClick', val);
+    },
+    onLoad() {
+      if (
+        (this.sysAppCode || this.url) &&
+        this.newColumns.length != this.total &&
+        this.isCheck
+      ) {
+        this.getSysCode();
+      } else {
+        this.listFinished = true;
+      }
+    },
+    /**
+     * deleteList
+     * @desc:删除选中的数据
+     * @date 2023年4月20日
+     * @author liufan
+     * @param {String} val 当前数据的下标
+     */
+    deleteList(val, res) {
+      if (this.disabled) return;
+      this.pickerValue.splice(val, 1);
+      this.checkList = this.checkList.filter(x => x != res.value);
+      this.$emit('input', this.pickerValue);
+      this.$emit('tagDelete', this.pickerValue);
+    },
+    toggle(index) {
+      this.$refs.checkboxes[index].toggle();
+    },
+    onConfirm(value, isConfirm) {
+      if (isConfirm) {
+        if (this.isCheck) {
+          let data = [];
+          this.newColumns.filter(x => {
+            this.checkList.find(y => {
+              if (x.value === y) {
+                data.push(x);
+              }
+            });
+          });
+          this.pickerValue = data;
+        } else {
+          this.pickerValue = value;
+        }
+      } else {
+        this.checkList = [];
+        this.pickerValue.map(x => {
+          this.checkList.push(x.value);
+        });
+      }
+
+      this.showPicker = false;
+    },
+    getValue() {
+      let value = '';
+      if (this.isCheck) {
+        let val = [];
+        if (this.newColumns && this.newColumns.length > 0) {
+          this.newColumns.filter(x => {
+            this.value.find(y => {
+              if (x[this.valueKey] == y || x[this.valueKey] == y.value) {
+                val.push(x);
+              }
+            });
+          });
+        } else {
+          val = this.value;
+        }
+        value = val;
+      } else {
+        if (Array.isArray(this.value) || this.value instanceof Object) {
+          if (!Array.isArray(this.value)) {
+            value = this.value[this.labelKey] || this.value[this.newValueKey];
+            let index = 0;
+            value && (value = value.replace(/<[^>]+>/g, ''));
+            this.newColumns.map((x, i) => {
+              if (typeof x === 'string' && value.indexOf(x) != -1) {
+                index = i;
+              } else if (
+                x[this.newValueKey] == value ||
+                x[this.newValueKey].indexOf(value) != -1
+              ) {
+                index = i;
+              }
+            });
+            this.newDefaultIndex = index;
+          } else {
+            let list = [];
+            this.value.map(item => {
+              if (item[this.labelKey] || item[this.newValueKey]) {
+                list.push(item[this.labelKey] || item[this.newValueKey]);
+              } else if (typeof item === 'string') {
+                list.push(item);
+              }
+            });
+            value = list.join(this.joinStr);
+            let index = 0;
+            this.newColumns.map((x, i) => {
+              if (typeof x === 'string' && value.indexOf(x) != -1) {
+                index = i;
+              } else if (x[this.newValueKey] === value) {
+                index = i;
+              }
+            });
+            this.newDefaultIndex = index;
+          }
+        } else {
+          let index = 0;
+          value = this.value;
+          this.newColumns.map((x, i) => {
+            if (typeof x === 'string' && value.indexOf(x) != -1) {
+              index = i;
+              value = x;
+            } else if (x[this.newValueKey] === value) {
+              index = i;
+              value = x[this.labelKey] || x[this.newValueKey];
+            }
+          });
+          this.newDefaultIndex = index;
+        }
+        value && (value = value.replace(/<[^>]+>/g, ''));
+      }
+      return value;
+    },
+    getSysCode() {
+      const { url, method, sysAppCode, param } = this;
+      let params = {
+        url: url || findSysCode,
+        type: method,
+        params: {
+          sysAppCode,
+          pageIndex: this.pageIndex,
+          ...param
+        }
+      };
+      this.newLoading = true;
+      request(params)
+        .then(res => {
+          const { rCode, results, msg } = res;
+          this.listLoading = false;
+          if (rCode == 0) {
+            let info = this.resultsName ? results[this.resultsName] : results;
+            info.map(x => {
+              if (this.isCheck) {
+                x.name =
+                  x[
+                    (this.labelKey != 'name' && this.labelKey) || 'shortName'
+                  ] &&
+                  x[
+                    (this.labelKey != 'name' && this.labelKey) || 'shortName'
+                  ].replace(/<[^>]+>/g, '');
+              } else {
+                x.name =
+                  x[(this.labelKey != 'name' && this.labelKey) || 'shortName'];
+              }
+              x.value =
+                x[(this.valueKey != 'value' && this.valueKey) || 'cciValue'];
+            });
+            if (results.totalCount) {
+              this.total = results.totalCount;
+              if (results.totalCount === this.newColumns.length) {
+                this.listFinished = true;
+              } else {
+                if (this.newColumns.length != 0) {
+                  this.newColumns.push.apply(this.newColumns, info);
+                } else {
+                  this.newColumns = info;
+                }
+                this.pageIndex = res.results.nextPageNo;
+              }
+            } else {
+              this.listFinished = true;
+              this.newColumns = info;
+            }
+            if (this.isTable) this.$emit('tableColumns', this.newColumns);
+            this.getValue();
+          } else {
+            this.$toast(msg);
+          }
+          this.newLoading = false;
+        })
+        .catch(err => {
+          this.$toast(err.message);
+        });
+    },
+    handlePicker() {
+      if (this.disabled) return;
+      this.showPicker = true;
+
+      this.$emit('showPicker');
+    }
+  }
+};
+</script>
+
+<style></style>

package/packages/popover/index.js

@@ -0,0 +1,5 @@
+import EmPopover from './src/main';
+
+EmPopover.install = Vue => Vue.component(EmPopover.name, EmPopover);
+
+export default EmPopover;

package/packages/popover/src/main.vue

@@ -0,0 +1,32 @@
+<template>
+  <van-popover
+    v-model="newValue"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template v-for="(index, name) in $slots" :slot="name">
+          <slot :name="name" />
+        </template>
+  </van-popover>
+</template>
+
+<script>
+export default {
+  name: 'EmPopover',
+  props:{
+    value:Boolean
+  },
+  computed:{
+    newValue:{
+      get(){
+        return this.value
+      },
+      set(val){
+        return val
+      }
+    }
+  }
+};
+</script>
+
+<style></style>

package/packages/popup/index.js

@@ -0,0 +1,5 @@
+import EmPopup from './src/main';
+
+EmPopup.install = Vue => Vue.component(EmPopup.name, EmPopup);
+
+export default EmPopup;

package/packages/popup/src/main.vue

@@ -0,0 +1,27 @@
+<template>
+    <van-popup v-model="newValue" v-bind="$attrs" v-on="$listeners" >
+      <template>
+        <slot name="default" />
+      </template>
+    </van-popup>
+</template>
+
+<script>
+export default {
+  name: 'EmPopup',
+  inheritAttrs: false,
+  props: {
+    value: Boolean
+  },
+  computed: {
+    newValue: {
+      get() {
+        return this.value;
+      },
+      set(val) {}
+    }
+  }
+};
+</script>
+
+<style></style>

package/packages/radio/index.js

@@ -0,0 +1,5 @@
+import EmRadioGroup from './src/main';
+
+EmRadioGroup.install = Vue => Vue.component(EmRadioGroup.name, EmRadioGroup);
+
+export default EmRadioGroup;