eoss-mobiles 0.1.13

package/packages/radio/src/main.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="em-radio-group">
+    <van-radio-group v-model="newRadio" v-on="$listeners" v-bind="$attrs">
+      <van-radio
+        v-for="item of newData"
+        :key="item[valueKey]"
+        v-bind="item"
+        :name="item[valueKey]"
+      >
+        {{ item[labelKey] }}
+        <slot slot="icon" :checked="item[valueKey] == newRadio"></slot>
+      </van-radio>
+    </van-radio-group>
+  </div>
+</template>
+<script>
+import { findSysCode } from '../../../src/config/api';
+import request from '../../../src/utils/http.js';
+export default {
+  name: 'EmRadioGroup',
+  inheritAttrs: false,
+  data() {
+    return { newData: [] };
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    //所有单选框的选中状态颜色
+    groupCheckedColor: {
+      type: String,
+      default: '#1989fa'
+    },
+    //所有单选框的图标大小，默认单位为px
+    groupIconSize: {
+      type: [String, Number],
+      default: '20px'
+    },
+    //是否禁用所有单选框
+    groupDisabled: {
+      type: Boolean,
+      default: false
+    },
+    //排列方向，可选值为horizontal
+    groupDirection: {
+      type: String,
+      default: 'vertical'
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    sysAppCode: {
+      type: String,
+      default: ''
+    },
+    method: {
+      type: String,
+      default: 'get'
+    },
+    url: {
+      type: String
+    },
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    labelKey: {
+      type: String,
+      default: 'name'
+    },
+    param: {
+      type: Object,
+      default: () => {}
+    },
+    isTable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    newRadio: {
+      get() {
+        return this.value;
+      },
+
+      set(val) {
+        this.$emit('input', val);
+      }
+    }
+  },
+  watch: {
+    data: {
+      handler(val) {
+        this.newData = val;
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {
+    if ((this.sysAppCode || this.url) && this.data.length == 0) {
+      this.getSysCode();
+    }
+  },
+  methods: {
+    /**
+     * handleChange
+     * @desc:当绑定值变化时触发的事件
+     * @date 2023年3月6日
+     * @author liufan
+     */
+    // handleChange(val) {
+    //   this.$emit('change', val);
+    // },
+    getSysCode() {
+      const { url, method, sysAppCode, param } = this;
+      let params = {
+        url: url || findSysCode,
+        type: method,
+        params: {
+          sysAppCode,
+          ...param
+        }
+      };
+      request(params)
+        .then(res => {
+          const { rCode, results, msg } = res;
+          if (rCode == 0) {
+            results.map(item => {
+              item.name = item.shortName;
+              item.value = item.cciValue;
+            });
+            this.newData = results;
+            if (this.isTable) this.$emit('tableColumns', this.newData);
+          } else {
+            this.$toast(msg);
+          }
+        })
+        .catch(err => {
+          this.$toast(err.message);
+        });
+    }
+  }
+};
+</script>

package/packages/rate/index.js

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

package/packages/rate/src/main.vue

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

package/packages/search/index.js

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

package/packages/search/src/main.vue

@@ -0,0 +1,39 @@
+<template>
+  <van-search
+    v-model="newValue"
+    v-bind="$attrs"
+    v-on="$listeners"
+    :clearable="clearable"
+  >
+    <template v-for="(index, name) of $slots" :slot="name">
+      <slot :name="name" />
+    </template>
+  </van-search>
+</template>
+
+<script>
+export default {
+  name: 'EmSearch',
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: String
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    newValue: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit('input', val);
+      }
+    }
+  },
+  methods: {}
+};
+</script>

package/packages/selector/index.js

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

package/packages/selector/src/main.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="em-selector">
+    <selector-field
+      v-if="!this.$scopedSlots.input && !this.$slots.input"
+      v-bind="$attrs"
+      :data="selectList"
+      @change="handleChangeSel"
+      @click="handleSelector"
+    />
+    <slot v-else name="input" :click="handleSelector" />
+    <em-selector-tree
+      v-if="showSelectorTree"
+      v-bind="$attrs"
+      v-on="$listeners"
+      :selectList="selectList"
+      @dispose="handleDispose"
+      @close="handleDispose()"
+    ></em-selector-tree>
+  </div>
+</template>
+
+<script>
+import EmSelectorTree from './selector-tree.vue';
+import selectorField from './selector-field.vue';
+export default {
+  components: { EmSelectorTree, selectorField },
+  name: 'EmSelector',
+  inheritAttrs: false,
+  props: { value: { type: Array, default: () => [] } },
+  data() {
+    return {
+      showSelectorTree: false
+    };
+  },
+  computed: {
+    selectList: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit('input', val);
+      }
+    }
+  },
+
+  methods: {
+    handleSelector() {
+      if (this.$attrs.disabled) return;
+      this.showSelectorTree = !this.showSelectorTree;
+    },
+    /**
+     * handleDispose
+     * @desc:确认选人
+     * @date 2023年3月6日
+     * @author liufan
+     * @param {Object} val 选中的人员/单位
+     */
+    handleDispose(val) {
+      if (val) {
+        const { list } = val;
+        this.selectList = list;
+      }
+      this.showSelectorTree = false;
+    },
+    /**
+     * handleChangeSel
+     * @desc:输入框数据发生变化时
+     * @date 2023年3月6日
+     * @author liufan
+     * @param {Array} val 变化后的选中数据
+     */
+    handleChangeSel(val) {
+      this.$emit('input', val.list);
+    }
+  }
+};
+</script>

package/packages/selector/src/selector-field.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="selector-field">
+    <em-input
+    :class="{'hide-label':hideLabel}"
+      v-bind="$attrs"
+      readonly
+      clickable
+      right-icon="arrow"
+      :disabled="disabled"
+      @click="clickTree()"
+    >
+      <template slot="input">
+        <div style="width:100%">
+          <div @click.stop="handleClick" style="width:100%">
+            <div
+              v-if="newNextUserList.length > 0 && multiple"
+              class="selector-checkList"
+            >
+              <em-checkbox-group
+                style="margin-right:5px"
+                v-for="item of newNextUserList"
+                :key="item.id"
+                :isGroup="false"
+                v-model="item.checked"
+                :name="item.name"
+                direction="horizontal"
+                @change="handleChange($event, item)"
+              />
+            </div>
+
+            <em-radio-group
+              v-else-if="newNextUserList.length > 0"
+              v-model="selectValue"
+              :data="newNextUserList"
+              direction="horizontal"
+              @change="handleChange"
+            />
+          </div>
+          <div class="select-list" v-if="newSelectList.length > 0">
+            <div v-for="(r, i) in newSelectList" :key="i" class="item">
+              {{
+                r[labelKey].length > 10
+                  ? r[labelKey].slice(0, 10) + '...'
+                  : r[labelKey]
+              }}
+              <div class="delte" @click.stop="delteList(i, r)">
+                <img
+                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAABXxJREFUWEfVWUtIHVcY/v7YjVGSaBpFTAQ3JooLpSg+qxSapF30kY2bVshakNgo1rcmPioxtQSyDqTdZJMmXbSaQtH6RClmEWJ0I8SEEK1PfGxqTvkOM8PM3JnrnauF+sMFvXPmzDff+c/3/+e7giMSckRw4kBAlVJ5AEoAvA/gOIDTxt98/78BrADYMf4eFZHpaImJCqhSqhBAPYDPAz74MYBeEZkIeF8wRpVS+QD6AJQGfZBr/AiAWhGZinSeiBhVSnFZmwwWYyKdfJ9xe2QXQJeIMD3Cxr5AlVJxAP4AQDZDYnd3FwsLC3j58iXevHmjP4yUlBT9SUtLQ3p6OmJjY/2AkNWPRGQ7HNKwQJVS8QCGAHxgn0Qphbdv3+LJkyeYnp7GixcvsLa25vmchIQEXLhwAXl5ebh48SKSk5MhEvLYvwCUi8iWH1hfoEopUkAmC+w3r6+vY3BwEA8ePMDr16+xt8cV3D9iYmKQmpqKiooKXLp0CadOnXLfNGkwu+s1mydQA+TvAIrtNy0uLqKvrw/j4+Mgq9EE2SwqKkJtbS3OnTvnnmIMwMciEgLWD2insXmsiV69eoX29nY8ffo0Gnwh9+Tk5Oj5zp49677GzdXs/jIEqCHi4wDeMwevrq6io6MDY2N84cOL4uJitLW1ITEx0T7pPwCK3MXBC+ifdp3c3NzEjRs3MDw8HPVy+24QEZSVlaG1tRUnTpywDxsRkQ/tXziAGhWHbOpgHnLT3L59+9BBms9gzl6/fl1vMpcakFWrgrmBPrKXRWpiVVWV1kh3xMXFaTaooZQnv83Fh1OeqKVcle3tULmk1t69e1frri0ei8gX1gvZ2GOD4Shp9+/f1xN4SRA18ebNm2D+dnd3Y2SEVTE0SktL0djYqPOwpaVFa687KF0kpLKy0n0p38xVi1GlVA2A782RW1tbqKur04LuFVlZWVqqkpKSsLS0hJ6eHoyOjlrMksmSkhI0NDRYYyhJz58/95yPBeHWrVuIj2eNseIbEennf3agDkl69uwZqqurwc3kFSYQsnXmzBksLy+jq6tLg2UQZFNTk3WNrNtfxD0nN9OdO3eQnZ1tv2RJlR0okV8zRw0MDKC5OUTOQjCbS0uwZJZgGQRJtvkC4VLDPmFnZycuX75s/+oHEeFKOxj9EcBX5qh79+7p/IwkCNZcYuYsgzlppoRf/rrnZp5evXrV/vVPIvK1G+ivAD4xR5GFhw8fRoJTj3GLdzRF4sqVK3rj2eI3Efn0yAI9Mkt/ZDaTQ55mZ2e1PPk1xIctT2ywKU+ZmZn7ypND8Hd2dlBfX4+JCe8D4/nz59Hf3x9I8GtqajA3N+e5QQsLC9Hb24vjx3k8s8JT8AOVUOodW78gJZQtHfXZHYFKKG9WSv0MwGoEwjUlLHX5+fn6ODI/Px+2KcnIyNDHkKmpKbA0u8OnKXkkIl+aY49mm2ew6miceZhj1+OXqxFXBJ+BzE12Ya7DXvjG2QDKXHUcRXioY5c/MzNzUFyO+3Nzc3V37zrkRXYUMcB2A2iwz8pc5K4ks9GeQK18EwGZpKowd13RIyKOOuooofbBhoVD44HsWrGysqLBDg0N4d27d1Gxe+zYMZSXl2uQp0/T/HMEm18aESEWTzgDglbOsNsl2djY0BJzEAOC0nby5Ek3SLolZX7WTiSWDo0Ih1tit3QmJye1iPMFvIKAWBwKCgrCWTp0SWg8BLd0zIf6uSbmdR7WeMCjQeFlktFg4MGOh0Gf8HVH7OP3dfOMzUUfignODXaYtmMPgG4vC8f9UhEBtbH7/zZy3W9nGBXfAvgs4Nb/BcB3/7k17gGYDPPHBupMuB8b+KMDf2yI2Ao/0NIHZO9QhwfK0UN9csDJ/gXzxuhJ8IbhCwAAAABJRU5ErkJggg=="
+                />
+              </div>
+            </div>
+          </div>
+
+          <div v-else>
+            {{
+              disabled
+                ? ' 暂无数据'
+                : !$attrs.placeholder
+                ? '请选择' + $attrs.label
+                : $attrs.placeholder
+            }}
+          </div>
+        </div>
+      </template>
+    </em-input>
+  </div>
+</template>
+<script>
+export default {
+  name: 'selectorField',
+  data() {
+    return {
+      newSelectList: [],
+      newNextUserList: [],
+      selectValue: ''
+    };
+  },
+  props: {
+    hideLabel:{
+      type:Boolean,
+      default:false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    nextUserList: {
+      type: Array,
+      default: () => []
+    },
+    labelKey:{
+      type: String,
+      default:'showname'
+    },
+    valueKey:{
+      type: String,
+      default:'showid'
+    },
+    multiple: { type: Boolean, default: true }
+  },
+  inheritAttrs: false,
+  watch: {
+    nextUserList: {
+      handler(val) {
+        const _that = this
+        val.map(item => {
+          !item[_that.valueKey] && (item[_that.valueKey] = item.userId || item.userid);
+          !item[_that.labelKey] && (item[_that.labelKey] = item.username || item.userName);
+          item.name = item.username || item[_that.labelKey];
+          item.value = item.userId || item[_that.valueKey];
+        });
+        this.newNextUserList = val;
+      },
+      deep: true,
+      immediate: true
+    },
+    data: {
+      handler(val) {
+        this.getDefault();
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    handleClick() {},
+    getDefault() {
+      let selectArr = [];
+      const _that = this
+      if (this.multiple) {
+        this.data.map(item => {
+          !item[_that.valueKey] && (item[_that.valueKey] = item.userId || item.userid);
+          !item[_that.labelKey] && (item[_that.labelKey] = item.username || item.userName);
+        });
+        selectArr = this.newNextUserList.filter(
+          x => x.checked && this.multiple
+        );
+        this.newSelectList = [...this.data, ...selectArr];
+        this.newSelectList = this.arrDistinctByProp(
+          this.newSelectList,
+          _that.valueKey
+        );
+      } else {
+        this.selectValue = '';
+        this.data.map(item => {
+          !item[_that.valueKey] && (item[_that.valueKey] = item.userId || item.userid);
+          !item[_that.labelKey] && (item[_that.labelKey] = item.username || item.userName);
+          this.selectValue = item[_that.valueKey] || item.userId;
+        });
+
+        this.newSelectList = this.data;
+      }
+    },
+    arrDistinctByProp(arr, prop) {
+      let obj = {};
+      return arr.reduce(function(preValue, item) {
+        obj[item[prop]] ? '' : (obj[item[prop]] = true && preValue.push(item));
+        return preValue;
+      }, []);
+    },
+    handleChange(val, info) {
+      const _this = this;
+      if (_this.multiple) {
+        if (info.checked) {
+          if (this.newSelectList.length > 0 && !this.multiple) {
+            this.newSelectList = info;
+          } else {
+            this.newSelectList.push(info);
+          }
+        } else {
+          this.newSelectList = this.newSelectList.filter(obj => {
+            return obj[_this.valueKey] != info[_this.valueKey];
+          });
+        }
+      } else {
+        let data = this.newNextUserList.filter(
+          x => x.userId === val || x[_this.valueKey] === val
+        );
+        if (data.length > 0) this.newSelectList = data;
+      }
+
+      this.$parent.$emit('change', {list:_this.newSelectList});
+      this.$emit('change',  {list:_this.newSelectList});
+    },
+    /**
+     * clickTree
+     * @desc:打开选人/单位页面
+     * @date 2023年3月6日
+     * @author liufan
+     */
+    clickTree() {
+      if (this.disabled === true) {
+        return; // 表单禁用不显示弹窗
+      }
+      this.$emit('click');
+    },
+    /**
+     * delteList
+     * @desc:删除选中的数据
+     * @date 2023年3月6日
+     * @author liufan
+     * @param {String} val 当前数据的下标
+     */
+    delteList(val, res) {
+      if (this.disabled) return;
+      const _that = this
+      this.newSelectList.splice(val, 1);
+      this.$set(res, 'checked', false);
+      this.newNextUserList.map(x => {
+        if (x[_that.valueKey] === res[_that.valueKey]) {
+          x.checked = false;
+        }
+      });
+      !this.multiple && (this.selectValue = '');
+      let info = {list:this.newSelectList}
+      this.$parent.$emit('change', info);
+      this.$emit('change', info);
+    }
+  }
+};
+</script>