mooho-base-admin-plus 0.1.0

package/src/layouts/basic-layout/header-notice/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div style="display: inline-flex">
+    <span class="i-layout-header-trigger i-layout-header-trigger-min i-layout-header-trigger-in">
+      <Notification
+        :wide="isMobile"
+        :badge-props="badgeProps"
+        class="i-layout-header-notice"
+        :class="{ 'i-layout-header-notice-mobile': isMobile }"
+        auto-count
+        @on-load-more="handleLoadMore"
+        @on-clear="handleClear"
+      >
+        <template #icon>
+          <Icon custom="i-icon i-icon-notification" />
+        </template>
+
+        <NotificationTab
+          title="待办"
+          name="task"
+          :count="taskCount"
+          :loaded-all="taskFilter.page * taskFilter.per >= taskCount"
+          :loading="taskLoading"
+          :scroll-to-load="false"
+          :show-clear="false"
+        >
+          <NotificationItem
+            v-for="(item, index) in taskList"
+            :key="index"
+            :title="item.title"
+            :icon="item.icon"
+            :icon-color="item.iconColor"
+            :content="item.content"
+            :read="item.read"
+            @on-item-click="$refs.taskForm.open(item.task)"
+          />
+        </NotificationTab>
+        <NotificationTab
+          title="通知"
+          name="notification"
+          :count="unreadCount"
+          :loaded-all="notificationFilter.page * notificationFilter.per >= notificationCount"
+          :loading="notificationLoading"
+          :scroll-to-load="false"
+        >
+          <NotificationItem
+            v-for="(item, index) in notificationList"
+            :key="index"
+            :title="item.notification.title"
+            :icon="item.icon"
+            :icon-color="item.iconColor"
+            :time="item.notification.sendTime"
+            :read="item.notification.isRead ? 1 : 0"
+            @on-item-click="openNotification(item.notification)"
+          />
+        </NotificationTab>
+      </Notification>
+    </span>
+    <task-form ref="taskForm"></task-form>
+    <modal-form ref="notificationForm" view-code="NotificationView" :save-enable="false"></modal-form>
+  </div>
+</template>
+<script>
+  import { mapState } from 'vuex';
+  import taskApi from '../../../api/task';
+  import notificationApi from '../../../api/notification';
+  import mixinPage from '../../../mixins/page';
+  import taskForm from '../../../pages/common/task-form';
+
+  export default {
+    name: 'iHeaderNotice',
+    mixins: [mixinPage],
+    components: { taskForm },
+    data() {
+      return {
+        badgeProps: {
+          offset: [20, 0]
+        },
+        taskList: [],
+        taskLoading: false,
+        taskFilter: {},
+        taskCount: 0,
+        notificationList: [],
+        notificationLoading: false,
+        notificationFilter: {},
+        notificationCount: 0,
+        unreadCount: 0
+      };
+    },
+    computed: {
+      ...mapState('admin/layout', ['isMobile']),
+      unreadMessage() {
+        let unread = 0;
+        this.notificationList.forEach(item => {
+          if (!item.read) unread++;
+        });
+        return unread;
+      }
+    },
+    async mounted() {
+      this.init();
+    },
+    methods: {
+      // 初始化
+      init() {
+        this.taskList = [];
+        this.taskLoading = false;
+        this.taskFilter.page = 0;
+        this.taskFilter.per = 5;
+        this.taskFilter.orderBy = '-createTime';
+        this.taskCount = 0;
+
+        this.notificationList = [];
+        this.notificationLoading = false;
+        this.notificationFilter.page = 0;
+        this.notificationFilter.per = 5;
+        this.notificationFilter.orderBy = '-createTime';
+        this.notificationCount = 0;
+        this.unreadCount = 0;
+
+        this.loadMore('notification');
+        this.loadMore('task');
+      },
+      handleLoadMore(tab) {
+        this.loadMore(tab.name);
+      },
+      async loadMore(type) {
+        if (this[`${type}Loading`]) return;
+        this[`${type}Loading`] = true;
+
+        if (type == 'notification') {
+          this.notificationFilter.page++;
+          const res = await notificationApi.queryMy(this.notificationFilter);
+          this.unreadCount = res.unreadCount;
+          this.notificationCount = res.totalCount;
+
+          this.notificationList = this.notificationList.concat(
+            res.data.map(item => {
+              let icon = '';
+              let iconColor = '';
+              if (item.notificationType == 'Notification') {
+                icon = 'md-mail';
+                iconColor = '#3391e5';
+              } else if (item.notificationType == 'Notice') {
+                icon = 'md-home';
+                iconColor = '#87d068';
+              } else if (item.notificationType == 'Alert') {
+                icon = 'md-warning';
+                iconColor = '#fe5c57';
+              }
+
+              return {
+                icon: icon,
+                iconColor: iconColor,
+                notification: item
+              };
+            })
+          );
+        } else {
+          this.taskFilter.page++;
+          const res = await taskApi.queryMy(this.taskFilter);
+          this.taskCount = res.totalCount;
+
+          this.taskList = this.taskList.concat(
+            res.data.map(item => {
+              let icon = 'ios-create';
+              let iconColor = '#ff9900';
+              return {
+                icon: icon,
+                iconColor: iconColor,
+                title: item.processInst.applicationType.name + ' - ' + item.activityInst.activity.name,
+                content: item.processInst.title,
+                read: 1,
+                task: item
+              };
+            })
+          );
+        }
+
+        this[`${type}Loading`] = false;
+      },
+      handleClear(tab) {
+        this.clearUnread(tab.name);
+      },
+      clearUnread(type) {
+        if (type == 'notification') {
+          this.confirm('确定要清空收件箱吗？', async () => {
+            await notificationApi.clear();
+
+            this.notificationFilter.page = 1;
+            this.notificationCount = 0;
+            this.unreadCount = 0;
+            this.notificationList = [];
+            //this.$forceUpdate();
+          });
+        }
+
+        this[`${type}List`] = this[`${type}List`].map(item => {
+          item.read = 1;
+          return item;
+        });
+      },
+      loadTask() {
+        this.taskList = [];
+        this.taskFilter.page = 0;
+        this.loadMore('task');
+      },
+      openNotification(item) {
+        if (!item.isRead) {
+          this.unreadCount--;
+          item.isRead = true;
+          notificationApi.read(item.id);
+        }
+
+        this.$refs.notificationForm.open(item);
+      }
+    }
+  };
+</script>

package/src/layouts/basic-layout/header-reload/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <span class="i-layout-header-trigger" :class="{ 'i-layout-header-trigger-min': showSiderCollapse }" @click="handleReload">
+    <Icon custom="i-icon i-icon-refresh" />
+  </span>
+</template>
+<script>
+  import { mapState } from 'vuex';
+
+  export default {
+    name: 'iHeaderReload',
+    emits: ['on-reload'],
+    computed: {
+      ...mapState('admin/layout', ['isMobile', 'showSiderCollapse'])
+    },
+    methods: {
+      handleReload() {
+        this.$emit('on-reload');
+      }
+    }
+  };
+</script>

package/src/layouts/basic-layout/header-search/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <span v-if="isDesktop" class="i-layout-header-trigger i-layout-header-trigger-min i-layout-header-trigger-in i-layout-header-trigger-nohover">
+    <input class="i-layout-header-search" type="text" :placeholder="$t('basicLayout.search.placeholder')" />
+  </span>
+  <Dropdown v-else trigger="click" class="i-layout-header-search-drop" ref="dropdown">
+    <span class="i-layout-header-trigger i-layout-header-trigger-min">
+      <Icon type="ios-search" />
+    </span>
+    <template #list>
+      <DropdownMenu>
+        <Row align="middle">
+          <Col flex="auto" class="ivu-pl-4">
+            <Input size="large" prefix="ios-search" :placeholder="$t('basicLayout.search.placeholder')" />
+          </Col>
+          <Col flex="80px" class="ivu-text-center">
+            <span @click="handleCloseSearch">{{ $t('basicLayout.search.cancel') }}</span>
+          </Col>
+        </Row>
+      </DropdownMenu>
+    </template>
+  </Dropdown>
+</template>
+<script>
+  import { mapState } from 'vuex';
+
+  export default {
+    name: 'iHeaderSearch',
+    computed: {
+      ...mapState('admin/layout', ['isDesktop', 'headerMenu'])
+    },
+    methods: {
+      handleCloseSearch() {
+        this.$refs.dropdown.handleClick();
+      }
+    }
+  };
+</script>

package/src/layouts/basic-layout/header-setting/index.vue

@@ -0,0 +1,219 @@
+<template>
+  <span class="i-layout-header-trigger i-layout-header-trigger-min" @click="showSetting">
+    <Icon type="md-more" />
+
+    <Drawer v-model="visible" width="280">
+      <Divider size="small">主题风格设置</Divider>
+
+      <div class="i-layout-header-setting-item">
+        <div class="i-layout-header-setting-item-radio" :class="{ on: siderTheme === 'dark' }" @click="handleChangeSetting('siderTheme', 'dark')">
+          <Tooltip content="暗色侧边栏" placement="top" transfer>
+            <img src="../../../assets/svg/nav-theme-dark.svg" />
+          </Tooltip>
+        </div>
+        <div class="i-layout-header-setting-item-radio" :class="{ on: siderTheme === 'light' }" @click="handleChangeSetting('siderTheme', 'light')">
+          <Tooltip content="亮色侧边栏" placement="top" transfer>
+            <img src="../../../assets/svg/nav-theme-light.svg" />
+          </Tooltip>
+        </div>
+      </div>
+      <div class="i-layout-header-setting-item">
+        <div class="i-layout-header-setting-item-radio" :class="{ on: headerTheme === 'light' }" @click="handleChangeSetting('headerTheme', 'light')">
+          <Tooltip content="亮色顶栏" placement="top" transfer>
+            <img src="../../../assets/svg/nav-theme-dark.svg" />
+          </Tooltip>
+        </div>
+        <div class="i-layout-header-setting-item-radio" :class="{ on: headerTheme === 'dark' }" @click="handleChangeSetting('headerTheme', 'dark')">
+          <Tooltip content="暗色顶栏" placement="top" transfer>
+            <img src="../../../assets/svg/header-theme-dark.svg" />
+          </Tooltip>
+        </div>
+        <div class="i-layout-header-setting-item-radio" :class="{ on: headerTheme === 'primary' }" @click="handleChangeSetting('headerTheme', 'primary')">
+          <Tooltip content="主色顶栏" placement="top" transfer>
+            <img src="../../../assets/svg/header-theme-primary.svg" />
+          </Tooltip>
+        </div>
+      </div>
+
+      <Divider size="small">导航设置</Divider>
+
+      <div class="i-layout-header-setting-item">
+        <span class="i-layout-header-setting-item-desc">显示顶栏菜单</span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="headerMenu" @on-change="val => handleChangeSetting('headerMenu', val)" />
+        </span>
+      </div>
+      <div class="i-layout-header-setting-item">
+        <span class="i-layout-header-setting-item-desc">固定侧边栏</span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="siderFix" @on-change="val => handleChangeSetting('siderFix', val)" />
+        </span>
+      </div>
+      <div class="i-layout-header-setting-item">
+        <span class="i-layout-header-setting-item-desc">固定顶栏</span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="headerFix" @on-change="val => handleChangeSetting('headerFix', val)" />
+        </span>
+      </div>
+      <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !headerFix }">
+        <span class="i-layout-header-setting-item-desc">
+          下滑时隐藏顶栏
+          <Tooltip placement="top" content="需开启固定顶栏" transfer>
+            <Icon type="ios-help-circle-outline" />
+          </Tooltip>
+        </span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="headerHide" :disabled="!headerFix" @on-change="val => handleChangeSetting('headerHide', val)" />
+        </span>
+      </div>
+      <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !headerFix }">
+        <span class="i-layout-header-setting-item-desc">
+          置顶顶栏
+          <Tooltip placement="top" content="需开启固定顶栏" transfer>
+            <Icon type="ios-help-circle-outline" />
+          </Tooltip>
+        </span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="headerStick" :disabled="!headerFix" @on-change="val => handleChangeSetting('headerStick', val)" />
+        </span>
+      </div>
+      <div class="i-layout-header-setting-item">
+        <span class="i-layout-header-setting-item-desc">侧边栏开启手风琴模式</span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="menuAccordion" @on-change="val => handleChangeSetting('menuAccordion', val)" />
+        </span>
+      </div>
+      <div class="i-layout-header-setting-item">
+        <span class="i-layout-header-setting-item-desc">显示折叠侧边栏按钮</span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="showSiderCollapse" @on-change="val => handleChangeSetting('showSiderCollapse', val)" />
+        </span>
+      </div>
+      <div class="i-layout-header-setting-item">
+        <span class="i-layout-header-setting-item-desc">侧边栏折叠时显示父级菜单名</span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="showCollapseMenuTitle" @on-change="val => handleChangeSetting('showCollapseMenuTitle', val)" />
+        </span>
+      </div>
+      <div class="i-layout-header-setting-item">
+        <span class="i-layout-header-setting-item-desc">
+          显示全局面包屑导航
+          <Tooltip placement="top" content="headerMenu 开启时无效" transfer>
+            <Icon type="ios-help-circle-outline" />
+          </Tooltip>
+        </span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="showBreadcrumb" @on-change="val => handleChangeSetting('showBreadcrumb', val)" />
+        </span>
+      </div>
+      <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !showBreadcrumb }">
+        <span class="i-layout-header-setting-item-desc">
+          全局面包屑显示图标
+          <Tooltip placement="top" content="需开启全局面包屑导航" transfer>
+            <Icon type="ios-help-circle-outline" />
+          </Tooltip>
+        </span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="showBreadcrumbIcon" :disabled="!showBreadcrumb" @on-change="val => handleChangeSetting('showBreadcrumbIcon', val)" />
+        </span>
+      </div>
+      <div class="i-layout-header-setting-item">
+        <span class="i-layout-header-setting-item-desc">显示重载页面按钮</span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="showReload" @on-change="val => handleChangeSetting('showReload', val)" />
+        </span>
+      </div>
+      <div class="i-layout-header-setting-item">
+        <span class="i-layout-header-setting-item-desc">显示多语言选择</span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="showI18n" @on-change="val => handleChangeSetting('showI18n', val)" />
+        </span>
+      </div>
+
+      <Divider size="small">其它设置</Divider>
+
+      <div class="i-layout-header-setting-item">
+        <span class="i-layout-header-setting-item-desc">开启多页签</span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="tabs" @on-change="val => handleChangeSetting('tabs', val)" />
+        </span>
+      </div>
+      <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !tabs }">
+        <span class="i-layout-header-setting-item-desc">
+          多页签显示图标
+          <Tooltip placement="top" content="需开启多页签" transfer>
+            <Icon type="ios-help-circle-outline" />
+          </Tooltip>
+        </span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="showTabsIcon" :disabled="!tabs" @on-change="val => handleChangeSetting('showTabsIcon', val)" />
+        </span>
+      </div>
+      <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !tabs }">
+        <span class="i-layout-header-setting-item-desc">
+          固定多页签
+          <Tooltip placement="top" content="需开启多页签" transfer>
+            <Icon type="ios-help-circle-outline" />
+          </Tooltip>
+        </span>
+        <span class="i-layout-header-setting-item-action">
+          <Switch size="small" :model-value="tabsFix" :disabled="!tabs" @on-change="val => handleChangeSetting('tabsFix', val)" />
+        </span>
+      </div>
+      <Alert type="warning">
+        <template #desc>
+          <div>
+            该功能主要实时预览各种布局效果，更多完整配置在
+            <strong>setting.js</strong>
+            中设置。建议在生产环境关闭该布局预览功能。
+          </div>
+        </template>
+      </Alert>
+    </Drawer>
+  </span>
+</template>
+<script>
+  import { mapState, mapMutations } from 'vuex';
+
+  export default {
+    name: 'iHeaderSetting',
+    data() {
+      return {
+        visible: false
+      };
+    },
+    computed: {
+      ...mapState('admin/layout', [
+        'siderTheme',
+        'headerTheme',
+        'headerStick',
+        'headerMenu',
+        'siderFix',
+        'headerFix',
+        'headerHide',
+        'menuAccordion',
+        'showSiderCollapse',
+        'tabs',
+        'showTabsIcon',
+        'tabsFix',
+        'showBreadcrumb',
+        'showBreadcrumbIcon',
+        'showReload',
+        'showI18n',
+        'showCollapseMenuTitle'
+      ])
+    },
+    methods: {
+      ...mapMutations('admin/layout', ['updateLayoutSetting']),
+      showSetting() {
+        this.visible = true;
+      },
+      handleChangeSetting(key, value) {
+        this.updateLayoutSetting({
+          key,
+          value
+        });
+      }
+    }
+  };
+</script>

package/src/layouts/basic-layout/header-user/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <span class="i-layout-header-trigger i-layout-header-trigger-min">
+    <Dropdown :trigger="isMobile ? 'click' : 'hover'" class="i-layout-header-user" :class="{ 'i-layout-header-user-mobile': isMobile }" @on-click="handleClick">
+      <Avatar size="small" :src="info.avatar" v-if="info.avatar" />
+      <Icon type="md-person" v-if="!info.avatar" />
+      <span class="i-layout-header-user-name" v-if="!isMobile">{{ info.name }}</span>
+      <template #list>
+        <DropdownMenu>
+          <DropdownItem>
+            <label @click="resetPwdOpen">
+              <Icon type="ios-lock" />
+              <span>修改密码</span>
+            </label>
+          </DropdownItem>
+          <DropdownItem>
+            <label @click="$refs.form.open(info)">
+              <Icon type="ios-contact" />
+              <span>个人信息</span>
+            </label>
+          </DropdownItem>
+          <!-- <i-link to="/setting/user">
+                    <DropdownItem>
+                        <Icon type="ios-contact-outline" />
+                        <span>{{ $t('basicLayout.user.center') }}</span>
+                    </DropdownItem>
+                </i-link>
+                <i-link to="/setting/account">
+                    <DropdownItem>
+                        <Icon type="ios-settings-outline" />
+                        <span>{{ $t('basicLayout.user.setting') }}</span>
+                    </DropdownItem>
+                </i-link> -->
+          <DropdownItem divided name="logout">
+            <Icon type="ios-log-out" />
+            <span>{{ $t('basicLayout.user.logOut') }}</span>
+          </DropdownItem>
+        </DropdownMenu>
+      </template>
+    </Dropdown>
+    <template>
+      <Modal v-model="resetPwdOpened" scrollable>
+        <template #header>
+          <div>
+            <span class="title">修改密码</span>
+            <span class="description">Change Password</span>
+          </div>
+        </template>
+        <div class="ivu-ml-8 ivu-mr-8">
+          <Form ref="resetPwdForm" :model="resetPwdData" :rules="resetPwdRule" label-position="top" label-colon="：" class="ivu-mt" @submit.prevent>
+            <Row :gutter="24" type="flex">
+              <Col v-bind="grid24">
+                <FormItem label="旧密码" key="oldPwd" prop="oldPwd">
+                  <Input type="password" v-model="resetPwdData.oldPwd" />
+                </FormItem>
+              </Col>
+              <Col v-bind="grid24">
+                <FormItem label="新密码" key="newPwd" prop="newPwd">
+                  <Input type="password" v-model="resetPwdData.newPwd" />
+                </FormItem>
+              </Col>
+              <Col v-bind="grid24">
+                <FormItem label="确认新密码" key="checkPwd" prop="checkPwd">
+                  <Input type="password" v-model="resetPwdData.checkPwd" />
+                </FormItem>
+              </Col>
+            </Row>
+          </Form>
+        </div>
+        <template #footer>
+          <Button type="primary" custom-icon="fa fa-check" @click="submitChangePwd">保存</Button>
+        </template>
+      </Modal>
+    </template>
+    <modal-form ref="form" view-code="UserInfoEdit">
+      <template #footer>
+        <Button type="primary" custom-icon="fa fa-save" @click="submitUserInfo">保存</Button>
+      </template>
+    </modal-form>
+  </span>
+</template>
+<script>
+  import { mapState, mapActions } from 'vuex';
+  import userlApi from '../../../api/user';
+  import mixinPage from '../../../mixins/page';
+
+  export default {
+    components: {},
+    mixins: [mixinPage],
+    name: 'iHeaderUser',
+    data() {
+      return {
+        resetPwdOpened: false,
+        resetPwdData: {},
+        resetPwdRule: {
+          oldPwd: {
+            type: 'string',
+            required: true,
+            message: '请输入旧密码',
+            trigger: 'blur,change'
+          },
+          newPwd: {
+            type: 'string',
+            required: true,
+            message: '请输入新密码',
+            trigger: 'blur,change'
+          },
+          checkPwd: {
+            type: 'string',
+            required: true,
+            message: '请重复新密码',
+            trigger: 'blur,change'
+          }
+        }
+      };
+    },
+    computed: {
+      ...mapState('admin/user', ['info']),
+      ...mapState('admin/layout', ['isMobile', 'logoutConfirm'])
+    },
+    methods: {
+      ...mapActions('admin/account', ['logout']),
+      ...mapActions('admin/user', ['set']),
+      handleClick(name) {
+        if (name === 'logout') {
+          this.logout({
+            confirm: this.logoutConfirm,
+            vm: this
+          });
+        }
+      },
+      // 打开密码修改对话框
+      resetPwdOpen() {
+        this.resetPwdData = {
+          oldPwd: null,
+          newPwd: null,
+          checkPwd: null
+        };
+        this.$refs.resetPwdForm.resetFields();
+        this.resetPwdOpened = true;
+      },
+      // 修改密码提交保存
+      async submitChangePwd() {
+        let isOK = await this.$refs.resetPwdForm.validate();
+
+        if (!isOK) {
+          this.error('有内容不符合要求，请正确填写！');
+        } else {
+          if (this.resetPwdData.newPwd != this.resetPwdData.checkPwd) {
+            this.error('两次新密码输入不一致！');
+          } else {
+            await userlApi.updatePassword({
+              oldPassword: this.resetPwdData.oldPwd,
+              newPassword: this.resetPwdData.newPwd
+            });
+
+            this.success('修改成功!', () => {
+              this.resetPwdOpened = false;
+            });
+          }
+        }
+      },
+      // 保存用户信息
+      submitUserInfo() {
+        this.confirm('确定要保存吗？', async () => {
+          await userlApi.updateUser(this.$refs.form.data);
+
+          this.success('修改成功!', () => {
+            this.set(this.$refs.form.data);
+            this.$refs.form.opened = false;
+          });
+        });
+      }
+    }
+  };
+</script>