cloud-web-corejs 1.0.54-dev.315 → 1.0.54-dev.317

package/src/views/user/home/default2.vue

@@ -0,0 +1,1035 @@
+<template>
+  <div class="index-home">
+    <el-row>
+      <el-col :span="8">
+        <div class="i-user-info">
+          <img class="img" v-if="headPhotoUrl" :src="headPhotoUrl"/>
+          <p class="name">{{ $t1('您好') }}，{{ userInfo.nickName }}</p>
+          <p>{{ companyInfo.companyName }}</p>
+        </div>
+        <div class="notice-box">
+          <div class="txt" @click="openMoreNotifyMessage()">
+            <i class="iconfont icon-xiaoxitongzhi"></i>
+            <span v-if="unreadMessageNum>0"
+                  v-html="$t1('您 有{number}条 未读消息，请及时查看。',{number: `<b>${(unreadMessageNum > 99 ? '99+' : unreadMessageNum)}</b>`})">
+            </span>
+            <span v-else-if="unreadMessageNum==0">
+            {{ $t1('您 暂无 未读消息。') }}
+            </span>
+          </div>
+          <el-tooltip class="item" effect="dark" :content="$t1('刷新')" placement="top">
+            <el-button type="text" @click="getUnreadMessageNum(true)"><i class="el-icon-refresh"></i></el-button>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="$t1('查看更多')" placement="top">
+            <el-button type="text" @click="openMoreNotifyMessage()" class="more">
+              <i class="el-icon-news"></i>
+            </el-button>
+          </el-tooltip>
+        </div>
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span style="float:left">
+              <i class="el-icon-chat-line-round ico"></i>
+              {{ $t1('公告') }}
+            </span>
+            <el-button type="text" @click="openSystemNoticeDialog()"><span class="more">MORE+</span></el-button>
+          </div>
+          <div class="home-notice-list">
+            <div v-for="(systemNotice,index) in systemNotices" :key="index" class="item"
+                 @click="openSystemNoticeDialog(systemNotice)"
+                 :title="systemNotice.title">
+              {{ systemNotice.title }}
+              <span class="time">{{ systemNotice.modifyDate.substring(0, 10) }}</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="homeConfig.toDoSpan || 16" style="padding-left:6px;">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span style="float:left">
+              <i class="el-icon-chat-line-round ico"></i>
+              {{ $t1('待办事项') }}
+            </span>
+            <el-tooltip class="item" effect="dark" :content="$t1('刷新')" placement="top">
+              <el-button type="text" @click="getWfInfoList(true)" class="more" style="right:107px">
+                <i class="el-icon-refresh"></i>
+              </el-button>
+            </el-tooltip>
+            <el-button type="text" @click="toWfManageList" class="more">
+              <i class="el-icon-news"></i>
+              <span>{{ $t1('查看更多+') }}</span>
+            </el-button>
+          </div>
+          <div class="need-to">
+            <vxe-grid :data="unDoWfRows" ref="table-wf" v-bind="wfOption"
+                      @resizable-change="$vxeTableUtil.onColumnWitchChange"
+                      @custom="$vxeTableUtil.customHandle"></vxe-grid>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" v-show="homeConfig.showFastTrack!==false">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+                  <span style="float:left">
+                    <i class="el-icon-star-off ico"></i>
+                    {{ $t1('快捷通道') }}
+                  </span>
+            <el-button type="text" @click="showCommMenuDialog = true"><span class="more">MORE+</span></el-button>
+          </div>
+          <div class="fast-box">
+            <div class="item" v-for="commMenu in commMenus" :key="commMenu.id">
+              <a href="javascript:void(0);" @click="rourteTo(commMenu)">
+                <p><i :class="!!commMenu.menuImg?('iconfont '+commMenu.menuImg):null"></i><span>{{
+                    commMenu.menuName
+                  }}</span></p>
+              </a>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="24">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+                  <span style="float:left">
+                    <i class="el-icon-message ico"></i>
+                    消息通知
+                  </span>
+            <!-- <el-button type="text" @click="openNotifyTemplateGroupDialog" class="more" style="right:100px">
+              <i class="el-icon-receiving"></i>
+              <span>选择分组</span>
+            </el-button> -->
+            <el-tooltip class="item" effect="dark" :content="$t1('刷新')" placement="top">
+              <el-button type="text" @click="initNotifyMessage(true)" class="more" style="right:107px">
+                <i class="el-icon-refresh"></i>
+              </el-button>
+            </el-tooltip>
+            <el-button type="text" @click="openMoreNotifyMessage()" class="more">
+              <i class="el-icon-news"></i>
+              <span>查看更多+</span>
+            </el-button>
+          </div>
+          <div class="home-notice-list to-reed" style="height: 400px;">
+            <div v-for="(notifyMessage,index) in notifyMessages" class="item" :key="index"
+                 :class="{noread:notifyMessage.readed == 0}"
+                 :title="notifyMessage.content"  @click="checkNotifyMessage(notifyMessage,index)">
+              <div class="clearfix">
+                <el-tag type="warning">{{
+                    notifyMessage.notifyTypeName
+                  }}
+                </el-tag>
+                <span class="time">{{
+                    notifyMessage.createDate
+                  }}</span>
+                <div class="btns fr">
+                  <el-link type="primary" @click.stop="openNotifyMessageDialog(notifyMessage)"><i class="el-icon-files"></i>
+                  </el-link>
+                </div>
+              </div>
+              <span class="name">{{ notifyMessage.content }}</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <slot></slot>
+    <systemNoticeInfoDialog v-if="showSystemNoticeInfoDialog" :visiable.sync="showSystemNoticeInfoDialog"
+                            :param="csnRow" :appendToTop="true"></systemNoticeInfoDialog>
+
+    <commMenuDialog v-if="showCommMenuDialog" :visiable.sync="showCommMenuDialog"
+                    @confirm="commMenuCallBack"></commMenuDialog>
+    <wfContentDialog v-if="showWfDialog" :visible.sync="showWfDialog" @close="wfClose"
+                     :option.sync="wfContentOption"></wfContentDialog>
+
+    <notifyMessageDialog ref="notifyMessageDialog"></notifyMessageDialog>
+
+    <notifyMessageInfoDialog v-if="showNoticeDialog" :visiable.sync="showNoticeDialog"
+                             :dataId.sync="notifyMessageInfoId"
+                             @readHanlde="notifyMessageReadHanlde"></notifyMessageInfoDialog>
+
+
+    <el-dialog
+      :title="$t1('选择分组')"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      :close-on-click-modal="false"
+      v-if="showGroupDialog"
+      :visible.sync="showGroupDialog"
+      :modal="false"
+      custom-class="el-dialog dialog-style list-dialog"
+      width="355px"
+      :destroy-on-close="true"
+    >
+      <div class="cont group-list">
+        <div class="item" v-for="(notifyTemplate,index) in notifyTemplates" :key="index"
+             @click="openMoreNotifyMessage(notifyTemplate.notifyType)">
+          <i class="iconfont icon-fenzu"></i>
+          <span class="name">{{ notifyTemplate.ntName }}</span>
+          <!--          <span class="nums">99+</span>-->
+        </div>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import systemNoticeInfoDialog from '@base/views/user/system_notice/infoDialog.vue';
+import commMenuDialog from '@base/views/user/commMenu/index.vue';
+import notifyMessageDialog from '@base/views/user/notify_message/dialog.vue';
+import notifyMessageInfoDialog from '@base/views/user/notify_message/infoDialog';
+
+import {getToken} from "@base/utils/auth";
+import wfContentDialog from "@base/views/user/wf/wf_manage/wfContentDialog";
+import corejsConfig from "@/corejsConfig";
+
+export default {
+  name: 'home',
+  props: {
+    wf_manage_url: String
+  },
+  components: {
+    systemNoticeInfoDialog,
+    commMenuDialog,
+    notifyMessageDialog,
+    notifyMessageInfoDialog,
+    wfContentDialog
+  },
+  data() {
+    return {
+      showNoticeDialog: false,
+      showGroupDialog: false,
+      notifyTemplates: [],
+      userInfo: {},
+      companyInfo: {},
+      systemNotices: [],
+      showSystemNoticeInfoDialog: false,
+      csnRow: null,
+      headPhotoUrl: '',
+      dialogVisible: true,
+      unDoWfRows: [],
+      wfOption: {},
+      showWfDialog: false,
+      wfContentOption: {},
+      showWfContent: true,
+      wfContent: null,
+      wfDataId: '',
+      showCommMenuDialog: false,
+      commMenus: [],
+      notifyMessages: [],
+      notifyMessageInfoIndex: null,
+      notifyMessageInfoId: null,
+      unreadMessageNum: 0,
+      activating: true,
+      wfTimer: null,
+      homeConfig: corejsConfig.homeConfig || {}
+    };
+  },
+  activated() {
+    this.activating = true;
+    if (this.wfTimer) {
+      this.timerExcFun(true);
+    }
+  },
+  deactivated() {
+    this.activating = false;
+  },
+  beforeDestroy() {
+    this.clearTimer();
+  },
+  created() {
+    this.getUserInfo();
+    this.initSystemNotice();
+    this.initCommMenu();
+    this.initNotifyMessage();
+    this.initWfParam();
+    this.initWfTimer();
+  },
+  methods: {
+    wfClose() {
+      this.timerExcFun(true);
+    },
+    initWfTimer() {
+      this.wfTimer = setInterval(() => {
+        this.timerExcFun(false);
+      }, 10000);
+      this.timerExcFun(true);
+    },
+    timerExcFun(isLoading) {
+      if (!this.activating) {
+        return;
+      }
+      this.getWfInfoList(isLoading);
+      this.getUnreadMessageNum(isLoading);
+      this.initNotifyMessage(isLoading)
+      this.$emit('timerHandle')
+    },
+    clearTimer() {
+      clearInterval(this.wfTimer);
+      this.wfTimer = null;
+    },
+    getUserInfo() {
+      this.$http({
+        url: USER_PREFIX + '/user/currentUser',
+        method: 'post',
+        success: res => {
+          let userInfo = res.objx;
+          this.headPhotoUrl = userInfo.headPhotoUrl ? userInfo.headPhotoUrl : require('@/resources/images' + '/default-header.png');
+
+          this.userInfo = userInfo;
+        }
+      });
+      this.$http({
+        url: USER_PREFIX + '/company_info/getCurrent',
+        method: `post`,
+        success: res => {
+          this.companyInfo = res.objx || {};
+        }
+      });
+    },
+    initSystemNotice() {
+      this.$http({
+        url: USER_PREFIX + '/system_notice/listPage',
+        data: {publish: true, searchCount: false},
+        method: 'post',
+        success: res => {
+          this.systemNotices = res.objx && res.objx.records ? res.objx.records : [];
+        }
+      });
+    },
+    openSystemNoticeDialog(row) {
+      this.csnRow = row || null;
+      this.showSystemNoticeInfoDialog = true;
+    },
+    initUnDoWfInfo() {
+      this.$http({
+        url: AGILEBPM_PREFIX + '/wf_manage/listPage',
+        data: {type: 0, searchCount: false},
+        method: 'post',
+        success: res => {
+          this.unDoWfRows = res.objx.records || [];
+        }
+      });
+    },
+    initWfTableList() {
+      let that = this;
+      let paramColumns = this.wfParamDTOs.map(item => {
+        return {
+          title: this.$t1(item.paramName),
+          field: item.paramKey,
+          width: 150
+        };
+      })
+      var statuses = {running: this.$t1('审核中'), back: this.$t1('已驳回'), end: this.$t1('已完成')};
+      let tableOption = {
+        vue: this,
+        tableRef: 'table-wf',
+        tableName: 'home-table-wf',
+        config: {
+          height: 'auto'
+        },
+        columns: [
+          {type: 'checkbox', width: 48, resizable: false, fixed: 'left'},
+          {
+            title: this.$t1('单据类型'),
+            field: 'objTypeName',
+            width: 150,
+            fixed: 'left'
+          },
+          {
+            title: this.$t1('流程主题'),
+            field: 'name',
+            width: 150
+          },
+          {
+            title: this.$t1('启动人'),
+            field: 'starterName',
+            width: 150
+          },
+          {
+            title: this.$t1('当前任务'),
+            field: 'taskName',
+            width: 150
+          },
+          {
+            title: this.$t1('当前任务用户'),
+            field: 'candidateNames',
+            width: 150
+          },
+          {
+            title: this.$t1('启动时间'),
+            field: 'createDate',
+            width: 150
+          },
+          ...paramColumns,
+          {
+            width: 47,
+            fixed: 'right',
+            title: '',
+            sortable: false,
+            slots: {
+              default: ({row}) => {
+                return [
+                  <a
+                    href="javascript:void(0);"
+                    class="a-link"
+                    onclick={() => {
+                      this.openWfDialog(row);
+                    }}
+                  >
+                    <el-tooltip enterable={false} effect="dark" content={this.$t1('查看')} placement="top"
+                                popper-class="tooltip-skin">
+                      <i class="el-icon-edit"/>
+                    </el-tooltip>
+                  </a>
+                ];
+              }
+            }
+          }
+        ]
+      };
+      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
+        this.wfOption = opts;
+      });
+    },
+    openWfDialog(row) {
+      this.wfContentOption = {
+        objId: row.objId,
+        url: row.url,
+        objTypeCode: row.objTypeCode
+      };
+      this.showWfDialog = true;
+    },
+    commMenuCallBack(datas) {
+      this.commMenus = datas || [];
+    },
+    initCommMenu() {
+      this.$http({
+        url: USER_PREFIX + '/comm_menu/currentList',
+        data: {longOne: 0},
+        method: 'POST'
+      }).then(resultMsg => {
+        this.commMenus = resultMsg.objx || [];
+      });
+    },
+    initNotifyMessage(isLoading) {
+      this.$http({
+        url: USER_PREFIX + '/notify_message/listPage',
+        data: {
+          // readed: 0,
+          searchCount: false,
+          pageSize: 10
+        },
+        method: 'post',
+        isLoading,
+        success: res => {
+          this.notifyMessages = res.objx && res.objx.records ? res.objx.records : [];
+        }
+      });
+    },
+    openNotifyMessageDialog(row) {
+      if (row.jumpContent) {
+        this.$refs.notifyMessageDialog.open(row, () => {
+          row.readed = 1;
+        });
+      }
+    },
+    openMoreNotifyMessage(notifyType) {
+      let data = {notifyType: (notifyType || '')};
+      let view = {
+        name: 'notify_message:list',
+        query: data
+      };
+      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
+        this.$router.replace(view);
+      });
+
+      if (notifyType) {
+        this.showGroupDialog = false;
+      }
+    },
+    checkNotifyMessage(row, index) {
+      this.showNoticeDialog = true;
+      this.notifyMessageInfoIndex = index;
+      this.notifyMessageInfoId = row.id;
+    },
+    notifyMessageReadHanlde() {
+      this.notifyMessages[this.notifyMessageInfoIndex].readed = 1;
+    },
+    openNotifyTemplateGroupDialog() {
+      this.$http({
+        url: USER_PREFIX + `/notify_template/listPage`,
+        method: `post`,
+        data: {searchCount: false},
+        isLoading: true,
+        // loadingTarget: document.body,
+        success: res => {
+          this.notifyTemplates = res.objx && res.objx.records ? res.objx.records : [];
+          this.showGroupDialog = true;
+        }
+      });
+    },
+    rourteTo(route) {
+      if (route.type == 4) {
+        this.jumpOutLink(route)
+      } else if (route.type == 3) {
+        let menuCode = route.menuCode;
+        let path = "/user/outLink/index/" + menuCode;
+        this.$router.push({path: path, query: {url: route.url}});
+      } else {
+        let path = this.getPath(route)
+        if (!path) return
+        this.$router.push(path);
+      }
+    },
+    getPath(route3) {
+      let item = null;
+      let path = null
+      if (route3.type == 0) {
+        //普通菜单
+        if (route3.url) {
+          path = route3.route || route3.url;
+          let str = "/report/vform/render/";
+          if (path.indexOf(str) == 0) {
+          } else {
+            let pIndex = path.indexOf('?');
+            if (pIndex > 0) {
+              path = path.substring(0, pIndex);
+            }
+          }
+        }
+      } else if (route3.type == 5) {
+        //动态表单
+        let url = route3.route || route3.url;
+        path = url;
+      }
+      if (path && path.startsWith("@")) {
+        path = null
+      }
+      return path;
+    },
+    jumpOutLink(route) {
+      let path = route.url;
+      if (route.type == 4 && path) {
+        if (path.indexOf('token={token}') >= 0) {
+          path = path.replace('token={token}', 'token=' + getToken())
+        }
+        window.open(path);
+      }
+    },
+    initWfParam() {
+      return this.$http({
+        url: USER_PREFIX + '/wf_param/list',
+        method: `post`,
+        data: {},
+        isLoading: true,
+        // loadingTarget: document.body,
+        modalStrictly: true,
+        success: res => {
+          this.wfParamDTOs = res.objx || [];
+          this.initWfTableList();
+        }
+      });
+    },
+    getWfInfoList(isLoading) {
+      if (!this.activating) {
+        return;
+      }
+      this.$http({
+        url: USER_PREFIX + '/wf_info/listPage',
+        data: {type: 0, size: 20, searchCount: false},
+        method: 'post',
+        isLoading: isLoading,
+        modal: isLoading || false,
+        // loadingTarget: document.body,
+        success: res => {
+          this.unDoWfRows = res.objx && res.objx.records ? res.objx.records : [];
+        },
+        failMsg: false,
+        errorMsg: false,
+        fail: (res, response) => {
+          if (response && response.status == 200) {
+            this.$errorMsg(res);
+          }
+        }
+      });
+    },
+    getUnreadMessageNum(isLoading) {
+      if (!this.activating) {
+        return;
+      }
+      return this.$http({
+        url: USER_PREFIX + '/notify_message/countMessage',
+        method: `post`,
+        data: {},
+        isLoading: isLoading,
+        modal: isLoading || false,
+        // loadingTarget: document.body,
+        success: res => {
+          this.unreadMessageNum = res.objx || 0;
+        },
+        failMsg: false,
+        errorMsg: false,
+        fail: (res, response) => {
+          if (response && response.status == 200) {
+            this.$errorMsg(res);
+          }
+        }
+      });
+    },
+    wfhandleCallback(flag) {
+      if ([1, 2, 3].includes(flag)) {
+        this.showWfDialog = false;
+        this.wfClose();
+      }
+    },
+    toWfManageList() {
+      let url = this.wf_manage_url || '/basic/wf/wf_manage/list'
+      this.$router.push(url)
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import '~@/styles/variables.scss';
+
+body #app .index-home {
+  margin: 3px 10px;
+  height: calc(100vh - 38px);
+  overflow: auto;
+
+  #containt {
+    margin: 0;
+    background: none;
+    height: auto;
+    box-shadow: none;
+  }
+
+  .i-user-info {
+    background: url(~@/resources/images/home-img.png) #2a6494 no-repeat 116% 45px;
+    margin-bottom: 6px;
+    background-size: 181px;
+    padding: 14px 38px 11px 16px;
+    border-radius: 4px 4px;
+    color: #fff;
+    font-size: 12px;
+    margin-top: 3px;
+    height: 95px;
+    overflow: hidden;
+
+    .name {
+      opacity: 1;
+      font-weight: 600;
+      margin: 9px 0 14px;
+      font-size: 14px;
+    }
+
+    .img {
+      width: 60px;
+      height: 60px;
+      float: left;
+      border-radius: 50%;
+      border: solid 4px rgba(255, 255, 255, 0.28);
+      margin-right: 10px;
+    }
+  }
+
+  .home-notice-list {
+    height: 182px;
+    margin: 0 -12px;
+
+    .item {
+      padding: 6px 12px;
+      font-size: 12px;
+      cursor: pointer;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .time {
+        color: #b9b9b9;
+        font-size: 12px;
+        right: 12px;
+      }
+
+      &:hover {
+        color: $baseColor;
+        background-color: transparentize($baseColor, 0.97);
+
+        .time {
+          color: $baseColor
+        }
+      }
+
+      &.no-read:before {
+        content: "";
+        width: 6px;
+        height: 6px;
+        background-color: $red;
+        border-radius: 50%;
+        vertical-align: middle;
+        display: inline-block;
+        margin-bottom: 1px;
+      }
+    }
+
+    &.to-reed {
+      height: 300px;
+      overflow: auto;
+      margin: -8px -12px;
+
+
+      .item {
+        white-space: initial;
+        padding: 8px 22px 2px;
+        position: relative;
+
+        &:after {
+          content: "";
+          position: absolute;
+          left: 22px;
+          right: 22px;
+          border-top: dashed 1px #eee;
+          height: 1px;
+          bottom: 0;
+        }
+
+        &.noread {
+          &:before {
+            content: "";
+            width: 6px;
+            height: 6px;
+            background-color: $red;
+            border-radius: 50%;
+            margin-right: 5px;
+            display: inline-block;
+            position: absolute;
+            left: 10px;
+            top: 16px;
+          }
+        }
+
+        .el-tag {
+          zoom: 0.95;
+          padding: 0 5px;
+          height: 24px;
+          line-height: 24px;
+        }
+
+        // .noread{
+        // 	position: absolute;right:0;top:0;
+        // 	span{transform: rotate(47deg);
+        // 	-ms-transform: rotate(47deg);
+        // 	-moz-transform: rotate(47deg);
+        // 	-webkit-transform: rotate(47deg);
+        // 	-o-transform: rotate(47deg);
+        // 	z-index: 3;
+        // 	color: #FFF;
+        // 	position: absolute;
+        // 	right: 1px;
+        // 	top: 2px;}
+        // 	&:after{
+        // 		content: "\e618";
+        // 		font-size: 62px;
+        // 		font-family: "iconfont";
+        // 		color:$red
+        // 	}
+        // }
+        .time {
+          position: relative;
+          right: 0;
+          margin-left: 12px;
+        }
+
+        .name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-top: 3px;
+          display: block;
+          margin-bottom: 4px;
+        }
+
+        &:hover .name {
+          color: $baseColor
+        }
+
+        &:first-child:before {
+          border-top: none
+        }
+
+        .btns {
+          text-align: right;
+
+          .el-link {
+            font-size: 12px;
+            display: inline-block;
+            margin-left: 14px;
+
+            i {
+              font-size: 12px;
+              margin-right: 3px;
+            }
+          }
+        }
+      }
+
+    }
+  }
+
+  .fast-box {
+    margin: 6px 4px 4px;
+    overflow: hidden;
+
+    .item {
+      width: 118px;
+      text-align: center;
+      float: left;
+      margin-right: 14px;
+
+      p {
+        color: #2a6494;
+        border: solid 1px #e2e2e2;
+        margin: 3.5px 4px;
+        width: calc(100% - 4px);
+        border-radius: 6px;
+        position: relative;
+        height: 54px;
+        line-height: 54px;
+        text-align: left;
+        padding-left: 14px;
+        font-size: 12px;
+
+        i {
+          font-size: 14px;
+          vertical-align: middle;
+          margin-right: 2px;
+        }
+
+        span {
+          vertical-align: middle;
+        }
+
+        &:before {
+          content: '';
+          width: 4px;
+          height: 24px;
+          display: inline-block;
+          background: #225279b8;
+          position: absolute;
+          left: -1px;
+          top: 50%;
+          margin-top: -12px;
+        }
+
+        &:hover {
+          background-color: $baseColor;
+          color: #fff;
+          border-color: $baseColor;
+
+          &:before {
+            background: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  .need-to {
+    height: 332px;
+  }
+
+  .table-box {
+    width: 100%;
+    font-size: 12px;
+
+    th {
+      line-height: 32px;
+      background: #f7f7f7;
+      font-weight: 400;
+      color: #808080;
+      padding: 0 6px;
+    }
+
+    td {
+      text-align: center;
+      line-height: 34px;
+      color: #424242;
+      border-bottom: solid 1px #eee;
+      padding: 0 6px;
+    }
+
+    tr:last-child td {
+      border-bottom: none;
+    }
+  }
+}
+
+.box-card .more {
+  background-color: #f7f7f7;
+}
+
+.group-list {
+  padding: 18px 18px 6px 32px !important;
+  height: 400px;
+  overflow: auto;
+
+  .item {
+    position: relative;
+    height: 36px;
+    border: solid 1px #eee;
+    line-height: 34px;
+    border-radius: 2px;
+    padding: 0 42px 0 14px;
+    margin-bottom: 10px;
+    cursor: pointer;
+
+    &::before {
+      content: "";
+      width: 8px;
+      height: 8px;
+      border: solid 1px #eee;
+      border-radius: 50%;
+      display: inline-block;
+      position: absolute;
+      left: -16px;
+      top: 13px;
+    }
+
+    &.checked {
+      &:before {
+        content: "";
+        background-color: $baseColor;
+        border-color: $baseColor
+      }
+
+      background-color: transparentize($baseColor, 0.9);
+      color: $baseColor;
+      border-color: $baseColor;
+    }
+
+    i {
+      font-size: 12px;
+      vertical-align: middle;
+    }
+
+    .name {
+      font-size: 12px;
+      margin-left: 8px;
+      vertical-align: middle;
+    }
+
+    .nums {
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+      display: inline-block;
+      position: absolute;
+      right: 5px;
+      top: 6px;
+      color: #FFF;
+      font-size: 12px;
+      background-color: $red;
+      line-height: 22px;
+      text-align: center;
+    }
+  }
+}
+
+.notice-box {
+  background-color: #2a649429;
+  border-radius: 0 0 4px 4px;
+  padding: 9px 12px;
+  margin-bottom: 5px;
+  margin-top: -6px;
+  position: relative;
+  z-index: 2;
+  font-size: 13px;
+  color: #212121;
+  overflow: hidden;
+
+  .txt {
+    line-height: 28px;
+    font-size: 12px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+
+    &:before {
+      content: "";
+      background-color: $baseColor;
+      width: 4px;
+      height: 20px;
+      border-radius: 2px;
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 18px;
+    }
+
+    i {
+      font-size: 14px;
+      margin-right: 12px;
+      vertical-align: middle;
+    }
+
+    > span {
+      vertical-align: middle;
+      height: 22px;
+      line-height: 22px;
+      display: inline-block;
+
+      b {
+        color: #FFF;
+        margin: 0 4px;
+        font-size: 16px;
+        vertical-align: middle;
+        background: #FF5615;
+        border-radius: 50%;
+        display: inline-block;
+        padding: 4px;
+        font-weight: 200;
+        line-height: 1;
+      }
+    }
+
+  }
+
+  .el-button {
+    position: absolute;
+    right: 46px;
+    padding: 0;
+    height: 22px;
+    line-height: 22px;
+    min-width: 22px;
+    text-align: center;
+    border-radius: 2px;
+    top: 50%;
+    margin-top: -11px;
+
+    i {
+      font-size: 15px;
+    }
+
+    &:hover {
+      background-color: $baseColor;
+      color: #FFF;
+    }
+
+    &.more {
+      right: 12px;
+      background: #f7f7f7;
+
+      &:hover {
+        color: $baseColor
+      }
+    }
+  }
+
+  ::v-deep .el-card.is-always-shadow {
+    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 6%);
+  }
+}
+</style>