eoss-ui 0.6.18 → 0.6.20

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

@@ -1,388 +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-jiantou-next' : 'es-icon-mm'
-                    "
-                  ></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-jiantou-next' : 'es-icon-mm'
-                    "
-                  ></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-jiantou-next' : 'es-icon-mm'
-                    "
-                  ></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>
+<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-jiantou-next' : 'es-icon-mm'
+                    "
+                  ></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-jiantou-next' : 'es-icon-mm'
+                    "
+                  ></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-jiantou-next' : 'es-icon-mm'
+                    "
+                  ></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>