eoss-ui 0.7.64 → 0.7.66

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

@@ -1,84 +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>
+<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/router-page.vue

@@ -1,45 +1,45 @@
-<template>
-  <div style="height: 100%">
-    <router-view :key="keys || appCode" :name="appCode" />
-  </div>
-</template>
-
-<script>
-import util from 'eoss-ui/src/utils/util';
-export default {
-  name: 'RouterPage',
-  components: {},
-  props: {
-    appCode: String,
-    path: String,
-    url: String,
-    query: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    keys: String
-  },
-  data() {
-    return {};
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {
-    this.jump();
-  },
-  methods: {
-    jump() {
-      let params = util.getParams({ url: this.url });
-      this.$router.push({
-        path: this.path,
-        query: { ...this.query, ...params }
-      });
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <div style="height: 100%">
+    <router-view :key="keys || appCode" :name="appCode" />
+  </div>
+</template>
+
+<script>
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'RouterPage',
+  components: {},
+  props: {
+    appCode: String,
+    path: String,
+    url: String,
+    query: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    keys: String
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.jump();
+  },
+  methods: {
+    jump() {
+      let params = util.getParams({ url: this.url });
+      this.$router.push({
+        path: this.path,
+        query: { ...this.query, ...params }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/packages/main/src/simplicityTop/apps.vue

@@ -0,0 +1,388 @@
+<template>
+  <el-drawer
+    class="es-simplicity-apps"
+    direction="ltr"
+    modal-class="es-simplicity-apps-modal"
+    size="90%"
+    :modal-append-to-body="false"
+    :with-header="false"
+    :visible.sync="show"
+  >
+    <div class="es-simplicity_apps">
+      <div class="es-simplicity_apps-all">
+        <div class="es-simplicity_apps-title">
+          所有业务系统
+          <el-input
+            class="es-simplicity_apps-search"
+            size="medium"
+            placeholder="请输入关键字"
+            prefix-icon="el-icon-search"
+            v-model="value"
+          >
+          </el-input>
+        </div>
+        <div class="es-simplicity_apps-box" @mousewheel="handleWheel">
+          <ul class="es-simplicity_apps-list">
+            <li
+              v-for="item in _applications"
+              class="es-simplicity_apps-list-item"
+              :key="item.id"
+            >
+              <div
+                class="es-simplicity_apps-list-content"
+                :class="{ 'es-simplicity_apps-disabled': !item.permission }"
+                @click="handleClick(item)"
+              >
+                <el-badge v-bind="getBadge(item)">
+                  <es-icon
+                    class="es-simplicity_apps-icon"
+                    :contents="item.icons || item.icon || menuIcon"
+                  ></es-icon>
+                </el-badge>
+                <div class="es-simplicity_apps-text">
+                  {{ item.text || item.name }}
+                </div>
+                <div class="es-simplicity_apps-hover">
+                  <es-icon
+                    class="es-simplicity_apps-icon"
+                    :contents="
+                      item.permission ? 'es-icon-solid-you' : 'es-icon-mima'
+                    "
+                  ></es-icon>
+                  <div class="es-simplicity_apps-text">
+                    {{ item.permission ? '进入系统' : '暂无权限' }}
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <el-pagination
+          class="es-simplicity_apps-pagination"
+          background
+          layout="total,prev, pager, next"
+          total-text="共 {total} 个业务系统"
+          :page-size="appSize"
+          :total="apps.length"
+          :current-page.sync="appNum"
+          @current-change="
+            (res) => {
+              this.handleChange(res, 0);
+            }
+          "
+        >
+        </el-pagination>
+      </div>
+      <div class="es-simplicity_apps-other">
+        <div class="es-simplicity_apps-business">
+          <div class="es-simplicity_apps-title">专项业务系统</div>
+          <ul class="es-simplicity_apps-list">
+            <li
+              v-for="(item, index) in _business"
+              class="es-simplicity_apps-list-item"
+              :key="item.id"
+            >
+              <div
+                class="es-simplicity_apps-list-content"
+                :class="{ 'es-simplicity_apps-disabled': !item.permission }"
+                @click="handleClick(item)"
+              >
+                <es-icon
+                  class="es-simplicity_app-icon"
+                  :style="setStyle(index)"
+                  :contents="item.icons || item.icon || menuIcon"
+                ></es-icon>
+                <el-badge
+                  v-bind="getBadge(item)"
+                  class="es-simplicity_apps-texts"
+                >
+                  <div class="es-simplicity_apps-text">
+                    {{ item.text || item.name }}
+                  </div>
+                </el-badge>
+                <div class="es-simplicity_apps-hover">
+                  <es-icon
+                    class="es-simplicity_apps-icon"
+                    :contents="
+                      item.permission ? 'es-icon-solid-you' : 'es-icon-mima'
+                    "
+                  ></es-icon>
+                  <div class="es-simplicity_apps-text">
+                    {{ item.permission ? '进入系统' : '暂无权限' }}
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <el-pagination
+            class="es-simplicity_apps-pagination"
+            background
+            layout="total,prev, pager, next"
+            total-text="共 {total} 专项业务系统"
+            :page-size="bsSize"
+            :total="business.length"
+            @current-change="
+              (res) => {
+                this.handleChange(res, 1);
+              }
+            "
+          >
+          </el-pagination>
+        </div>
+        <div class="es-simplicity_apps-systems">
+          <div class="es-simplicity_apps-title">系统设置</div>
+          <ul class="es-simplicity_apps-list">
+            <li
+              v-for="(item, index) in _systems"
+              class="es-simplicity_apps-list-item"
+              :key="item.id"
+            >
+              <div
+                class="es-simplicity_apps-list-content"
+                :class="{ 'es-simplicity_apps-disabled': !item.permission }"
+                @click="handleClick(item)"
+              >
+                <es-icon
+                  class="es-simplicity_app-icon"
+                  :style="setStyle(index)"
+                  :contents="item.icons || item.icon || menuIcon"
+                ></es-icon>
+                <el-badge
+                  v-bind="getBadge(item)"
+                  class="es-simplicity_apps-texts"
+                >
+                  <div class="es-simplicity_apps-text">
+                    {{ item.text || item.name }}
+                  </div>
+                </el-badge>
+                <div class="es-simplicity_apps-hover">
+                  <es-icon
+                    class="es-simplicity_apps-icon"
+                    :contents="
+                      item.permission ? 'es-icon-solid-you' : 'es-icon-mima'
+                    "
+                  ></es-icon>
+                  <div class="es-simplicity_apps-text">
+                    {{ item.permission ? '进入系统' : '暂无权限' }}
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <el-pagination
+            class="es-simplicity_apps-pagination"
+            background
+            layout="total,prev, pager, next"
+            total-text="共 {total} 系统设置"
+            hide-on-single-page
+            :page-size="sysSize"
+            :total="systems.length"
+            @current-change="
+              (res) => {
+                this.handleChange(res, 2);
+              }
+            "
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import util from 'eoss-ui/src/utils/util';
+import { debounce } from 'throttle-debounce';
+import { recordUserApp } from 'eoss-ui/src/config/api.js';
+export default {
+  name: 'Apps',
+  components: {},
+  props: {
+    user: Object,
+    visible: Boolean,
+    //菜单、应用默认图标
+    menuIcon: String,
+    color: {
+      type: [String, Array],
+      default: '#fff'
+    },
+    backgroundColor: {
+      type: [String, Array],
+      default() {
+        return [
+          '#0B3978',
+          '#2591F7',
+          '#69C0FF',
+          '#E34D59',
+          '#2591F7',
+          '#FF9C52',
+          '#17C27B'
+        ];
+      }
+    },
+    applications: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    //业务系统
+    business: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    //系统管理
+    systems: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      value: '',
+      apps: [],
+      appSize: 20,
+      appNum: 1,
+      bsSize: 8,
+      bsNum: 1,
+      sysSize: 2,
+      sysNum: 1
+    };
+  },
+  computed: {
+    show: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+        return val;
+      }
+    },
+    _applications() {
+      return this.apps.filter((item, index) => {
+        return (
+          index > (this.appNum - 1) * this.appSize - 1 &&
+          index < this.appNum * this.appSize
+        );
+      });
+    },
+    _business() {
+      return this.business.filter((item, index) => {
+        return (
+          index > (this.bsNum - 1) * this.bsSize - 1 &&
+          index < this.bsNum * this.bsSize
+        );
+      });
+    },
+    _systems() {
+      return this.systems.filter((item, index) => {
+        return (
+          index > (this.sysNum - 1) * this.sysSize - 1 &&
+          index < this.sysNum * this.sysSize
+        );
+      });
+    }
+  },
+  watch: {
+    applications: {
+      deep: true,
+      handler() {
+        this.getApps();
+      }
+    },
+    value() {
+      this.getApps();
+    }
+  },
+  beforeCreate() {
+    this.getApps = debounce(500, () => {
+      this.getApp();
+    });
+  },
+  created() {},
+  mounted() {
+    this.getApps();
+  },
+  methods: {
+    getApp() {
+      this.apps = this.value
+        ? this.applications.filter((item) => {
+            return (item.name || item.text).indexOf(this.value) > -1;
+          })
+        : this.applications;
+    },
+    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;
+    },
+    handleChange(res, index) {
+      let name = ['appNum', 'bsNum', 'sysNum'];
+      this[name[index]] = res;
+    },
+    handleWheel(e) {
+      let direction = e.deltaY > 0 ? 'down' : 'up'; //deltaY为正则滚轮向下，为负滚轮向上
+      let total = Math.ceil(this.apps.length / this.appSize);
+      if (direction == 'up' && this.appNum > 1) {
+        this.appNum -= 1;
+      }
+      if (direction == 'down' && this.appNum < total) {
+        this.appNum += 1;
+      }
+    },
+    handleClick(res) {
+      util
+        .ajax({
+          url: recordUserApp,
+          params: {
+            userId: this.user.userId,
+            appId: res.id
+          }
+        })
+        .then(() => {})
+        .catch(() => {});
+      this.$emit('click', res);
+    },
+    /**
+     * @desc:获取气泡提醒
+     * @author huangbo
+     * @date 2024年9月7日
+     **/
+    getBadge(res) {
+      let num = res.tips || 0;
+      return num === true
+        ? {
+            isDot: true
+            //hidden: item.tips
+          }
+        : {
+            value: num,
+            max: 99,
+            hidden: !num
+          };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>