eoss-ui 0.5.79 → 0.5.81-beta

package/packages/main/src/simplicity/lists.vue

@@ -0,0 +1,84 @@
+<template>
+  <div v-for="(item, index) in data" :key="item.id" @click="handleClick(item)">
+    <div
+      class="es-simplicity-menus-item"
+      :class="{
+        'is-active': active === item.id,
+        'is-open': openId === item.id
+      }"
+    >
+      <es-icon
+        class="es-simplicity_apps-icon"
+        :style="setStyle(index)"
+        :contents="item.icons || item.icon || menuIcon"
+      ></es-icon>
+      <div class="es-simplicity-menus-tips" v-if="item.tips">
+        {{ item.tips > 99 ? '99+' : item.tips }}
+      </div>
+      <div class="es-simplicity_apps-text">
+        {{ item.text || item.name }}
+      </div>
+    </div>
+    <lists
+      v-if="
+        (item.children && item.children.length) ||
+        (item.fourthTabs && item.fourthTabs.length)
+      "
+      :menuIcon="menuIcon"
+      :color="color"
+      :backgroundColor="backgroundColor"
+      :data="[...(item.children || []), ...(item.fourthTabs || [])]"
+    ></lists>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Lists',
+  components: {},
+  props: {
+    menuIcon: String,
+    color: [String, Array],
+    backgroundColor: [String, Array],
+    data: Array
+  },
+  data() {
+    return {
+      active: '',
+      openId: ''
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    setStyle(num) {
+      let obj = {};
+      if (this.color) {
+        obj.color = this.color;
+        if (Array.isArray(this.color)) {
+          obj.color = this.color[num % this.color.length];
+        } else {
+          obj.color = this.color;
+        }
+      }
+      if (this.backgroundColor) {
+        if (Array.isArray(this.backgroundColor)) {
+          obj.backgroundColor =
+            this.backgroundColor[num % this.backgroundColor.length];
+        } else {
+          obj.backgroundColor = this.backgroundColor;
+        }
+      }
+      return obj;
+    },
+    handleClick(res) {
+      this.active = res.id;
+      this.$emit('command', res);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/packages/main/src/simplicity/menu-list.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-scrollbar>
+    <div
+      class="es-simplicity-menus-item"
+      v-for="(item, index) in data"
+      :key="item.id"
+      :class="{ 'is-active': active === item.id }"
+      @click="handleClick(item)"
+    >
+      <es-icon
+        class="es-simplicity_apps-icon"
+        :style="setStyle(index)"
+        :contents="item.icons || item.icon || menuIcon"
+      ></es-icon>
+      <div class="es-simplicity-menus-tips" v-if="item.tips">
+        {{ item.tips > 99 ? '99+' : item.tips }}
+      </div>
+      <div class="es-simplicity_apps-text">
+        {{ item.text || item.name }}
+      </div>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script>
+export default {
+  name: 'MenuList',
+  components: {},
+  props: {
+    index: [Number, String],
+    menuIcon: String,
+    color: [String, Array],
+    backgroundColor: [String, Array],
+    data: Array
+  },
+  data() {
+    return {
+      active: ''
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    setStyle(num) {
+      let obj = {};
+      if (this.color) {
+        obj.color = this.color;
+        if (Array.isArray(this.color)) {
+          obj.color = this.color[num % this.color.length];
+        } else {
+          obj.color = this.color;
+        }
+      }
+      if (this.backgroundColor) {
+        if (Array.isArray(this.backgroundColor)) {
+          obj.backgroundColor =
+            this.backgroundColor[num % this.backgroundColor.length];
+        } else {
+          obj.backgroundColor = this.backgroundColor;
+        }
+      }
+      return obj;
+    },
+    handleClick(res) {
+      this.active = res.id;
+      this.$emit('command', res, this.index);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/packages/main/src/simplicity/message.vue

@@ -0,0 +1,237 @@
+<template>
+  <el-drawer
+    class="es-msgs-box"
+    custom-class="es-msgs-main"
+    direction="rtl"
+    size="200px"
+    :modal="false"
+    :withHeader="false"
+    :visible.sync="show"
+  >
+    <div class="es-msg-header">
+      <span class="es-msg-title">消息提示</span>
+      <span class="es-overlook" @click="handleIgnoreAll">全部忽略</span>
+    </div>
+    <div class="es-msg-lists-box">
+      <div class="es-msg-lists">
+        <el-scrollbar class="es-scrollbar">
+          <div v-infinite-scroll="getMsg" :infinite-scroll-disabled="disabled">
+            <el-card
+              v-for="(item, index) in msgs"
+              :key="item.id"
+              class="es-msg-item"
+            >
+              <i
+                class="el-icon-circle-close"
+                title="忽略"
+                @click="handleIgnore(item, index)"
+              ></i>
+              <div class="es-msg-item-title">{{ item.title }}</div>
+              <div>
+                <span class="es-msg-item-time">{{ item.time }}</span>
+                <span
+                  class="es-overlook"
+                  v-show="item.handlerUrl"
+                  @click="handleMessage(item, index)"
+                  >处理</span
+                >
+              </div>
+            </el-card>
+            <p class="es-msg-tips" v-if="loading">加载中...</p>
+            <p class="es-msg-tips" v-if="noMore && count > 0">没有更多了</p>
+          </div>
+        </el-scrollbar>
+      </div>
+    </div>
+    <div class="es-msg-total">当前共有{{ count }}条消息记录</div>
+    <es-dialog
+      title="处理"
+      name="manage"
+      width="90%"
+      height="80%"
+      :visible.sync="dialog.show"
+      :url="dialog.url"
+      :param="dialog.params"
+    ></es-dialog>
+  </el-drawer>
+</template>
+<script>
+import {
+  sysMsgPage,
+  ignoreSysMsg,
+  ignoreAllSysMsg
+} from 'eoss-ui/src/config/api.js';
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'message',
+  provide() {
+    return {
+      deleteMessage: this.handleRemove
+    };
+  },
+  props: {
+    visible: Boolean,
+    total: {
+      type: Number,
+      default: 0
+    },
+    winopen: Boolean
+  },
+  computed: {
+    show: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+      }
+    },
+    count: {
+      get() {
+        return this.total;
+      },
+      set(val) {
+        this.$emit('update:total', val);
+      }
+    },
+    noMore() {
+      return this.msgs.length >= this.count;
+    },
+    disabled() {
+      return this.loading || this.noMore;
+    }
+  },
+  watch: {
+    total(val, old) {
+      if (parseInt(val, 10) < parseInt(old, 10) && this.index !== null) {
+        this.handleRemove();
+      }
+    }
+  },
+  data() {
+    return {
+      //加载数据
+      loading: false,
+      //消息页码
+      pageNum: 1,
+      pageSize: 20,
+      pageCount: 1,
+      //消息数据,
+      msgs: [],
+      dialog: {
+        params: {},
+        url: '',
+        show: false
+      },
+      index: null,
+      deleteId: null
+    };
+  },
+  mounted() {
+    util.win.deleteMsg = this.handleRemove;
+  },
+  methods: {
+    //获取消息列表
+    getMsg(reload) {
+      if (this.pageNum <= this.pageCount) {
+        this.loading = true;
+        util
+          .ajax({
+            url: sysMsgPage,
+            params: {
+              pageNum: reload ? 1 : this.pageNum,
+              pageSize: this.pageSize
+            }
+          })
+          .then((res) => {
+            if (res && res.rCode === 0) {
+              this.pageCount = res.results.pageCount;
+              this.loading = false;
+              if (reload || this.pageNum == 1) {
+                this.msgs = JSON.parse(JSON.stringify(res.results.records));
+              } else {
+                this.msgs = this.msgs.concat(res.results.records);
+              }
+              this.pageNum++;
+            } else {
+              let msg = res.msg || '系统错误，请联系管理员！';
+              this.$message.error(msg);
+            }
+          })
+          .catch((err) => {
+            this.loading = false;
+            if (err.message && err.message !== 'canceled') {
+              this.$message.error(err.message);
+            }
+          });
+      }
+    },
+    //忽略
+    handleIgnore(res, i) {
+      util
+        .ajax({
+          url: ignoreSysMsg,
+          params: {
+            id: res.id
+          }
+        })
+        .then((res) => {
+          if (res.rCode == 0) {
+            this.count -= 1;
+            this.msgs.splice(i, 1);
+          } else {
+            let msg = res.msg || '系统错误，请联系管理员！';
+            this.$message.error(msg);
+          }
+        });
+    },
+    //全部忽略
+    handleIgnoreAll() {
+      util
+        .ajax({
+          url: ignoreAllSysMsg
+        })
+        .then((res) => {
+          this.count = 0;
+          this.msgs = [];
+          this.$emit('ignore', { type: 'ignore', value: 'all' });
+        })
+        .catch((err) => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    //处理消息
+    handleMessage(item, index) {
+      this.count -= 1;
+      this.msgs.splice(index, 1);
+      if (this.winopen) {
+        util.win.open(item.handlerUrl);
+      } else {
+        this.dialog = {
+          show: true,
+          url: item.handlerUrl,
+          data: {
+            id: item.id,
+            pendingId: item.pendingId,
+            userId: item.userId
+          }
+        };
+        this.index = index;
+      }
+    },
+    handleRemove(id) {
+      if (this.index !== null) {
+        this.count -= 1;
+        this.msgs.splice(this.index, 1);
+        this.index = null;
+      }
+      if (id) {
+        this.$emit('handle', id);
+      }
+      this.dialog.show = false;
+    }
+  }
+};
+</script>

package/packages/main/src/simplicity/notice.vue

@@ -0,0 +1,145 @@
+<template>
+  <transition name="el-drawer-fade" @after-enter="handleMouse(false)">
+    <div
+      class="es-notice-box"
+      v-show="data.length"
+      @mouseover="handleMouse(true)"
+      @mouseout="handleMouse(false)"
+    >
+      <div class="es-msgs-box" :class="{ 'es-in': data.length }">
+        <div class="es-msg-header">
+          <span class="es-notice-title">通知消息</span>
+        </div>
+        <div class="es-msg-lists-box">
+          <div class="es-msg-lists">
+            <el-scrollbar class="es-scrollbar">
+              <el-card
+                v-for="(item, index) in data"
+                :key="item.id"
+                class="es-msg-item"
+              >
+                <div class="es-msg-item-title">{{ item.title }}</div>
+                <div>
+                  <span class="es-msg-item-time">{{ item.time }}</span>
+                  <span
+                    class="es-overlook"
+                    v-show="item.handlerUrl"
+                    @click="handleMessage(item, index)"
+                    >处理</span
+                  >
+                </div>
+              </el-card>
+            </el-scrollbar>
+          </div>
+        </div>
+        <div
+          class="es-notice-footer"
+          style="display:flex;justify-content: space-between;"
+        >
+          <span @click="handleIgnoreAll">忽略全部</span
+          ><span @click="afterEnter">我知道了</span>
+        </div>
+      </div>
+      <es-dialog
+        title="处理"
+        name="manage"
+        width="90%"
+        height="80%"
+        :visible.sync="dialog.show"
+        :url="dialog.url"
+        :param="dialog.params"
+      ></es-dialog>
+    </div>
+  </transition>
+</template>
+<script>
+import { ignoreAllSysMsg } from 'eoss-ui/src/config/api.js';
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'notice',
+  provide() {
+    return {
+      deleteNotice: this.handleRemove
+    };
+  },
+  props: {
+    visible: Boolean,
+    winopen: Boolean,
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  computed: {},
+  data() {
+    return {
+      //加载数据
+      loading: false,
+      //消息页码
+      pageNum: 1,
+      //消息数据,
+      msgs: [],
+      //即时消息
+      sysMsg: '',
+      dialog: {
+        params: {},
+        url: '',
+        show: false
+      },
+      index: null
+    };
+  },
+  methods: {
+    afterEnter() {
+      this.$emit('opened');
+    },
+    handleMouse(flag) {
+      this.$emit('opened', flag);
+    },
+    //全部忽略
+    handleIgnoreAll() {
+      util
+        .ajax({
+          url: ignoreAllSysMsg
+        })
+        .then(res => {
+          this.count = 0;
+          this.msgs = [];
+          this.$emit('ignore', { type: 'ignore', value: 'all' });
+          this.$emit('opened', false);
+        })
+        .catch(err => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    //处理消息
+    handleMessage(item, index) {
+      if (item.urlopenmode === 1 || this.winopen) {
+        util.win.open(item.handlerUrl);
+      } else {
+        this.dialog = {
+          show: true,
+          url: item.handlerUrl,
+          params: {
+            id: item.id,
+            pendingId: item.pendingId,
+            userId: item.userId
+          }
+        };
+        this.index = index;
+      }
+    },
+    handleRemove() {
+      if (this.index === null) {
+        this.count -= 1;
+        this.msgs = this.msgs.splice(this.index, 1);
+      }
+      this.dialog.show = false;
+    }
+  }
+};
+</script>

package/packages/main/src/simplicity/settings.vue

@@ -0,0 +1,119 @@
+<template>
+  <el-drawer
+    title="设置"
+    custom-class="es-sets-drawer"
+    size="280px"
+    :visible.sync="show"
+    :append-to-body="true"
+  >
+    <div class="es-setting-item">
+      <div class="es-setting-title">主题色</div>
+      <el-radio-group
+        v-if="themes"
+        v-model="color"
+        size="mini"
+        class="es-setting-theme"
+        @change="handleTheme"
+      >
+        <el-radio-button
+          v-for="(item, index) in themes"
+          :key="index"
+          :label="index"
+          :style="{ backgroundColor: item }"
+        >
+          <i class="el-icon-check"></i>
+        </el-radio-button>
+      </el-radio-group>
+      <div class="es-color-picker" v-else>
+        <el-color-picker
+          v-model="color"
+          :predefine="predefineColor"
+          @change="handleTheme"
+        ></el-color-picker>
+        <div class="el-color-picker-tip">请不要选择偏白或者偏黑的颜色</div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'message',
+  props: {
+    visible: Boolean,
+    //主题颜色选择颜色集合
+    themes: Array,
+    //默认主题色
+    theme: String,
+    //颜色板预设颜色
+    predefine: {
+      type: Array,
+      default() {
+        return ['#a60006', '#409eff'];
+      }
+    },
+    layout: {
+      type: String,
+      default: 'default'
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+      }
+    },
+    //颜色板预设颜色
+    predefineColor() {
+      if (
+        this.theme &&
+        this.predefine.indexOf(this.theme.toLowerCase()) === -1
+      ) {
+        let arry = this.predefine;
+        arry.push(this.theme);
+        return arry;
+      }
+      return this.predefine;
+    }
+  },
+  watch: {
+    theme: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.color = val;
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      color: '',
+      activeName: this.layout
+    };
+  },
+  mounted() {},
+  methods: {
+    //选择主题颜色
+    handleTheme(res) {
+      res = res.toLowerCase();
+      // const rgb = util.getRgb(res);
+      // const luma = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
+      util.updateTheme(res);
+      this.color = res;
+      this.$emit('change', { type: 'theme', value: res });
+      //this.setTheme(res);
+    },
+    //选择菜单布局
+    handleLayout(res) {
+      let old = this.activeName;
+      this.activeName = res;
+      this.$emit('update:layout', res);
+      this.$emit('layout', res, old);
+    }
+  }
+};
+</script>