From 86e93bb02c6b42fd44e18c95bc1471f23564757c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=BE=89?= <814457906@qq.com>
Date: Mon, 25 Mar 2024 09:45:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/components/wangEditor.vue    | 299 ++++++++++++++++++
 src/views/system/specialDiseaseNode/index.vue | 157 +++++++++
 .../system/specialDiseaseRoute/index.vue      | 195 +++++++++---
 3 files changed, 599 insertions(+), 52 deletions(-)
 create mode 100644 src/views/system/components/wangEditor.vue
 create mode 100644 src/views/system/specialDiseaseNode/index.vue

diff --git a/src/views/system/components/wangEditor.vue b/src/views/system/components/wangEditor.vue
new file mode 100644
index 0000000..409b273
--- /dev/null
+++ b/src/views/system/components/wangEditor.vue
@@ -0,0 +1,299 @@
+<template>
+    <div style="border: 1px solid #ccc;">
+        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
+        <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
+            @onChange="onChange" @onCreated="onCreated" @onFocus="handleFocus" />
+        <el-dialog title="提示" :visible.sync="show" width="70%">
+            <el-cascader-panel :options="options"></el-cascader-panel>
+            <div @click="click">确定</div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { Boot } from '@wangeditor/editor'
+// import menuConf from "./ModalMenu";
+export default ({
+    components: { Editor, Toolbar },
+    data() {
+        return {
+            options: [{
+                value: 'zhinan',
+                label: '指南',
+                children: [{
+                    value: 'shejiyuanze',
+                    label: '设计原则',
+                    children: [{
+                        value: 'yizhi',
+                        label: '一致'
+                    }, {
+                        value: 'fankui',
+                        label: '反馈'
+                    }, {
+                        value: 'xiaolv',
+                        label: '效率'
+                    }, {
+                        value: 'kekong',
+                        label: '可控'
+                    }]
+                }, {
+                    value: 'daohang',
+                    label: '导航',
+                    children: [{
+                        value: 'cexiangdaohang',
+                        label: '侧向导航'
+                    }, {
+                        value: 'dingbudaohang',
+                        label: '顶部导航'
+                    }]
+                }]
+            }, {
+                value: 'zujian',
+                label: '组件',
+                children: [{
+                    value: 'basic',
+                    label: 'Basic',
+                    children: [{
+                        value: 'layout',
+                        label: 'Layout 布局'
+                    }, {
+                        value: 'color',
+                        label: 'Color 色彩'
+                    }, {
+                        value: 'typography',
+                        label: 'Typography 字体'
+                    }, {
+                        value: 'icon',
+                        label: 'Icon 图标'
+                    }, {
+                        value: 'button',
+                        label: 'Button 按钮'
+                    }]
+                }, {
+                    value: 'form',
+                    label: 'Form',
+                    children: [{
+                        value: 'radio',
+                        label: 'Radio 单选框'
+                    }, {
+                        value: 'checkbox',
+                        label: 'Checkbox 多选框'
+                    }, {
+                        value: 'input',
+                        label: 'Input 输入框'
+                    }, {
+                        value: 'input-number',
+                        label: 'InputNumber 计数器'
+                    }, {
+                        value: 'select',
+                        label: 'Select 选择器'
+                    }, {
+                        value: 'cascader',
+                        label: 'Cascader 级联选择器'
+                    }, {
+                        value: 'switch',
+                        label: 'Switch 开关'
+                    }, {
+                        value: 'slider',
+                        label: 'Slider 滑块'
+                    }, {
+                        value: 'time-picker',
+                        label: 'TimePicker 时间选择器'
+                    }, {
+                        value: 'date-picker',
+                        label: 'DatePicker 日期选择器'
+                    }, {
+                        value: 'datetime-picker',
+                        label: 'DateTimePicker 日期时间选择器'
+                    }, {
+                        value: 'upload',
+                        label: 'Upload 上传'
+                    }, {
+                        value: 'rate',
+                        label: 'Rate 评分'
+                    }, {
+                        value: 'form',
+                        label: 'Form 表单'
+                    }]
+                }, {
+                    value: 'data',
+                    label: 'Data',
+                    children: [{
+                        value: 'table',
+                        label: 'Table 表格'
+                    }, {
+                        value: 'tag',
+                        label: 'Tag 标签'
+                    }, {
+                        value: 'progress',
+                        label: 'Progress 进度条'
+                    }, {
+                        value: 'tree',
+                        label: 'Tree 树形控件'
+                    }, {
+                        value: 'pagination',
+                        label: 'Pagination 分页'
+                    }, {
+                        value: 'badge',
+                        label: 'Badge 标记'
+                    }]
+                }, {
+                    value: 'notice',
+                    label: 'Notice',
+                    children: [{
+                        value: 'alert',
+                        label: 'Alert 警告'
+                    }, {
+                        value: 'loading',
+                        label: 'Loading 加载'
+                    }, {
+                        value: 'message',
+                        label: 'Message 消息提示'
+                    }, {
+                        value: 'message-box',
+                        label: 'MessageBox 弹框'
+                    }, {
+                        value: 'notification',
+                        label: 'Notification 通知'
+                    }]
+                }, {
+                    value: 'navigation',
+                    label: 'Navigation',
+                    children: [{
+                        value: 'menu',
+                        label: 'NavMenu 导航菜单'
+                    }, {
+                        value: 'tabs',
+                        label: 'Tabs 标签页'
+                    }, {
+                        value: 'breadcrumb',
+                        label: 'Breadcrumb 面包屑'
+                    }, {
+                        value: 'dropdown',
+                        label: 'Dropdown 下拉菜单'
+                    }, {
+                        value: 'steps',
+                        label: 'Steps 步骤条'
+                    }]
+                }, {
+                    value: 'others',
+                    label: 'Others',
+                    children: [{
+                        value: 'dialog',
+                        label: 'Dialog 对话框'
+                    }, {
+                        value: 'tooltip',
+                        label: 'Tooltip 文字提示'
+                    }, {
+                        value: 'popover',
+                        label: 'Popover 弹出框'
+                    }, {
+                        value: 'card',
+                        label: 'Card 卡片'
+                    }, {
+                        value: 'carousel',
+                        label: 'Carousel 走马灯'
+                    }, {
+                        value: 'collapse',
+                        label: 'Collapse 折叠面板'
+                    }]
+                }]
+            }, {
+                value: 'ziyuan',
+                label: '资源',
+                children: [{
+                    value: 'axure',
+                    label: 'Axure Components'
+                }, {
+                    value: 'sketch',
+                    label: 'Sketch Templates'
+                }, {
+                    value: 'jiaohu',
+                    label: '组件交互文档'
+                }]
+            }],
+            editor: null,
+            toolbarConfig: {
+                insertKeys: {
+                    index: 30,
+                    keys: ['MyButtonMenu']
+                }
+            },
+            html: "<p><span style='color:red'>22222222</span></p>",
+            editorConfig: { placeholder: '请输入内容...' },
+            mode: 'simple', // or 'simple'
+            show: false,
+            timer: '',
+        }
+    },
+    methods: {
+        click() {
+            this.show = false
+            this.editor.focus()
+            this.timer = setInterval(() => {
+                if (this.editor.isFocused()) {
+                    this.editor.insertText('Hello Vue!')
+                    clearInterval(this.timer)
+                }
+            }, 200);
+        },
+        onCreated(editor) {
+            console.log("created", editor);
+            this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
+        },
+        onChange(editor) {
+            console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
+        },
+        handleFocus(editor) {
+            console.log("focus", editor);
+        },
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+        const editor = this.editor
+        if (editor == null) return
+        editor.destroy() // 组件销毁时，及时销毁编辑器
+    },
+    created() {
+        let that = this
+        const menuConf = {
+            key: 'MyButtonMenu', // 定义 menu key ：要保证唯一、不重复（重要）
+            factory() {
+                return new MyButtonMenu(that)
+            },
+        };
+        Boot.registerMenu(menuConf)
+    }
+})
+
+class MyButtonMenu {                       // JS 语法
+    constructor(vueInstance) {
+        this.vueInstance = vueInstance
+        this.title = '添加画像标签字段'
+        // this.iconSvg = '<svg >...</svg>'
+        this.tag = 'button'
+        this.showModal = true
+    }
+    // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
+    isActive(editor) {
+        return false;
+    }
+    // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
+    getValue(editor) {
+        return "";
+    }
+    // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
+    isDisabled(editor) {
+        return false;
+    }
+    // 点击菜单时触发的函数
+    exec(editor, value) {
+        this.vueInstance.show = true
+    }
+}
+</script>
+
+<style src="@wangeditor/editor/dist/css/style.css"></style>
diff --git a/src/views/system/specialDiseaseNode/index.vue b/src/views/system/specialDiseaseNode/index.vue
new file mode 100644
index 0000000..5c78c0a
--- /dev/null
+++ b/src/views/system/specialDiseaseNode/index.vue
@@ -0,0 +1,157 @@
+<template>
+    <div class="app-container">
+        <wangeditor style="height:300px;width:40%;margin-left:40%" ref="editor" />
+        <el-timeline style="width:25%">
+            <el-timeline-item v-for="(item, index) in timelinelist" :key="index"
+                :color="listindex == index ? '#409EFF' : ''">
+                <div class="top" @click="topclickevent(index)">
+                    <div class="toptop">
+                        <el-select v-model="value" style="width:90px">
+                            <el-option label="出院后" value="item.value">
+                            </el-option>
+                        </el-select>
+                        <el-input v-model="input" style="width: 60px;"></el-input>
+                        <span>天</span>
+                    </div>
+                    <div>
+                        <i class="el-icon-delete"></i>
+                        <i class="el-icon-circle-plus-outline"></i>
+                    </div>
+                </div>
+                <el-card v-for="(uitem, uindex) in item.list" :key="uitem.id"
+                    @click.native='bottomclickevent(index, uindex)'
+                    :class="listindex == index && itemindex == uindex ? 'cards' : ''">
+                    <h4>{{ uitem.title }}</h4>
+                    <p>{{ uitem.text }}</p>
+                </el-card>
+            </el-timeline-item>
+        </el-timeline>
+    </div>
+</template>
+
+<script>
+import wangeditor from '../components/wangEditor.vue'
+export default {
+    components: { wangeditor },
+    name: "specialDiseaseNode",
+    data() {
+        return {
+            itemindex: 0,
+            listindex: 0,
+            timelinelist: [{
+                title: '选项1',
+                text: '黄金糕',
+                list: [
+                    {
+                        title: '选项1',
+                        text: '黄金糕',
+                    },
+                    {
+                        title: '选项1',
+                        text: '黄金糕',
+                    },
+                ],
+            }, {
+                title: '选项2',
+                text: '双皮奶',
+                list: [
+                    {
+                        title: '选项1',
+                        text: '黄金糕',
+                    },
+                ],
+            }, {
+                title: '选项3',
+                text: '蚵仔煎',
+                list: [
+                    {
+                        title: '选项1',
+                        text: '黄金糕',
+                    },
+                    {
+                        title: '选项1',
+                        text: '黄金糕',
+                    },
+                ],
+            }, {
+                title: '选项4',
+                text: '龙须面'
+            }, {
+                title: '选项5',
+                text: '北京烤鸭',
+                list: [
+                    {
+                        title: '选项1',
+                        text: '黄金糕',
+                    },
+                    {
+                        title: '选项1',
+                        text: '黄金糕',
+                    },
+                ],
+            }],
+            value: '',
+            input: '',
+        };
+    },
+    created() {
+    },
+    watch: {
+    },
+    mounted() {
+        console.log(this.$refs.editor.html)
+    },
+    methods: {
+        topclickevent(index) {
+            this.listindex = index
+            this.itemindex = 0
+        },
+        bottomclickevent(index, uindex) {
+            this.listindex = index
+            this.itemindex = uindex
+        },
+        handleStep() {
+            this.active = 2
+        },
+    }
+};
+</script>
+<style scoped lang="scss">
+.cards {
+    border: 1px solid #409EFF;
+    border-left: 5px solid #409EFF;
+}
+
+.top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .toptop {
+        display: flex;
+        align-items: center;
+    }
+
+    span {
+        padding: 0 10px;
+    }
+
+    i {
+        padding-left: 12px;
+        font-size: 17px;
+    }
+}
+
+::v-deep .el-timeline-item__timestamp {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+::v-deep .el-timeline-item__content {
+    transform: translateY(-2%);
+}
+
+::v-deep .el-card {
+    margin-top: 20px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/specialDiseaseRoute/index.vue b/src/views/system/specialDiseaseRoute/index.vue
index 58bcef4..2731e0d 100644
--- a/src/views/system/specialDiseaseRoute/index.vue
+++ b/src/views/system/specialDiseaseRoute/index.vue
@@ -1,7 +1,24 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="所属科室id" prop="departmentId">
+    <el-row :gutter="20">
+      <el-col :span="5">
+        <div class="left" ref="box">
+          <div class="name">科室名称</div>
+          <div style="padding: 10px 0;">
+            <el-input v-model="departmentName" placeholder="请输入科室名称" clearable @keyup.enter.native="handleQuery" />
+          </div>
+          <div class="listitem" v-for="(item, index) in DepartmentoList" :key="index" @click="clickDepartmenitem(item)">
+            <div :class="queryParams.departmentId == item.id ? 'allactive' : 'all'">
+              {{ item.departmentName }}
+            </div>
+            <span class="count">{{ item.countNum }}</span>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="19">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px">
+          <!-- <el-form-item label="所属科室id" prop="departmentId">
         <el-input v-model="queryParams.departmentId" placeholder="请输入所属科室id" clearable
           @keyup.enter.native="handleQuery" />
       </el-form-item>
@@ -25,14 +42,23 @@
       </el-form-item>
       <el-form-item label="版本号" prop="version">
         <el-input v-model="queryParams.version" placeholder="请输入版本号" clearable @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item label="路径分类，全部：ALL，科室管理路径：DEPARTMENT_MANAGE_PATH，专病管理路径：SPECIAL_DIEASE_MANAGE_PATH"
-        prop="routeClassify">
-        <el-input v-model="queryParams.routeClassify"
-          placeholder="请输入路径分类，全部：ALL，科室管理路径：DEPARTMENT_MANAGE_PATH，专病管理路径：SPECIAL_DIEASE_MANAGE_PATH" clearable
-          @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item
+      </el-form-item>-->
+          <el-form-item label="发布状态" prop="releaseStatus">
+            <el-select v-model="queryParams.releaseStatus" placeholder="请选择">
+              <el-option label="全部" value="ALL" />
+              <el-option label="已发布" value="PUBLISHED" />
+              <el-option label="未发布" value="UNPUBLISHED" />
+            </el-select>
+          </el-form-item>
+          <!-- ，全部：ALL，科室管理路径：DEPARTMENT_MANAGE_PATH，专病管理路径：SPECIAL_DIEASE_MANAGE_PATH -->
+          <el-form-item label="路径分类" prop="routeClassify">
+            <el-select v-model="queryParams.routeClassify" placeholder="请选择">
+              <el-option label="全部" value="ALL" />
+              <el-option label="科室管理路径" value="DEPARTMENT_MANAGE_PATH" />
+              <el-option label="专病管理路径" value="SPECIAL_DIEASE_MANAGE_PATH" />
+            </el-select>
+          </el-form-item>
+          <!-- <el-form-item
         label="适用范围，在院：IN_THE_HOSPITAL，出院：DISCHARGE，门诊：OUTPATIENT_SERVICE，门诊+出院：OUTPATIENT_SERVICE_DISCHARGE"
         prop="suitRange">
         <el-input v-model="queryParams.suitRange"
@@ -44,14 +70,13 @@
       </el-form-item>
       <el-form-item label="备注信息" prop="routeRemark">
         <el-input v-model="queryParams.routeRemark" placeholder="请输入备注信息" clearable @keyup.enter.native="handleQuery" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
+      </el-form-item> -->
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <!-- <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
           v-hasPermi="['system:specialDiseaseRoute:add']">新增</el-button>
@@ -69,39 +94,44 @@
           v-hasPermi="['system:specialDiseaseRoute:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="specialDiseaseRouteList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键id" align="center" prop="id" />
-      <el-table-column label="所属科室id" align="center" prop="departmentId" />
-      <el-table-column label="所属科室名称" align="center" prop="departmentName" />
-      <el-table-column label="病种id" align="center" prop="diseaseTypeId" />
-      <el-table-column label="病种名称" align="center" prop="diseaseTypeName" />
-      <el-table-column label="路径名称" align="center" prop="routeName" />
-      <el-table-column label="路径编码" align="center" prop="routeCode" />
-      <el-table-column label="版本号" align="center" prop="version" />
-      <el-table-column label="路径分类，全部：ALL，科室管理路径：DEPARTMENT_MANAGE_PATH，专病管理路径：SPECIAL_DIEASE_MANAGE_PATH"
-        align="center" prop="routeClassify" />
-      <el-table-column label="发布状态，全部：ALL，已发布：PUBLISHED，未发布：UNPUBLISHED" align="center" prop="releaseStatus" />
-      <el-table-column
+    </el-row> -->
+        <el-table v-loading="loading" :data="specialDiseaseRouteList" @selection-change="handleSelectionChange">
+          <el-table-column label="序号" type="index" width="55" align="center" />
+          <el-table-column label="路径名称" align="center" prop="routeName" />
+          <el-table-column label="版本号" align="center" prop="version" />
+          <el-table-column label="路径分类" align="center" prop="routeClassify">
+            <template slot-scope="scope">
+              {{ scope.row.routeClassify == 'ALL' ? '全部' : '' }}
+              {{ scope.row.routeClassify == 'DEPARTMENT_MANAGE_PATH' ? '科室管理路径' : '' }}
+              {{ scope.row.routeClassify == 'SPECIAL_DIEASE_MANAGE_PATH' ? '专病管理路径' : '' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="发布状态" align="center" prop="releaseStatus">
+            <template slot-scope="scope">
+              {{ scope.row.releaseStatus == 'ALL' ? '全部' : '' }}
+              {{ scope.row.releaseStatus == 'PUBLISHED' ? '已发布' : '' }}
+              {{ scope.row.releaseStatus == 'UNPUBLISHED' ? '未发布' : '' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="更新时间" align="center" prop="updateTime" />
+          <el-table-column label="病种名称" align="center" prop="diseaseTypeName" />
+          <!-- <el-table-column
         label="适用范围，在院：IN_THE_HOSPITAL，出院：DISCHARGE，门诊：OUTPATIENT_SERVICE，门诊+出院：OUTPATIENT_SERVICE_DISCHARGE"
-        align="center" prop="suitRange" />
-      <el-table-column label="排序" align="center" prop="routeSort" />
-      <el-table-column label="备注信息" align="center" prop="routeRemark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:specialDiseaseRoute:edit']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-            v-hasPermi="['system:specialDiseaseRoute:remove']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      @pagination="getList" />
-
+        align="center" prop="suitRange" /> -->
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text">复制</el-button>
+              <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:specialDiseaseRoute:edit']">修改</el-button>
+              <el-button size="mini" type="text" @click="handleDelete(scope.row)"
+                v-hasPermi="['system:specialDiseaseRoute:remove']">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize" @pagination="getList" />
+      </el-col>
+    </el-row>
     <!-- 添加或修改专病路径信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -154,7 +184,9 @@
 
 <script>
 import { listSpecialDiseaseRoute, getSpecialDiseaseRoute, delSpecialDiseaseRoute, addSpecialDiseaseRoute, updateSpecialDiseaseRoute } from "@/api/system/specialDiseaseRoute";
-
+import {
+  selectDiseaseCount,
+} from "@/api/system/departmentDisease";
 export default {
   name: "SpecialDiseaseRoute",
   data() {
@@ -201,13 +233,32 @@ export default {
         departmentId: [
           { required: true, message: "所属科室id不能为空", trigger: "blur" }
         ],
-      }
+      },
+      DepartmentoList: [],
+      departmentName: '',
     };
   },
   created() {
     this.getList();
+    this.infolists();
+  },
+  watch: {
+    departmentName(val) {
+      this.infolists();
+    },
   },
   methods: {
+    clickDepartmenitem(item) {
+      this.loading = true;
+      this.queryParams.departmentId = item.id;
+      this.getList();
+    },
+    //科室
+    infolists() {
+      selectDiseaseCount(this.departmentName).then((res) => {
+        this.DepartmentoList = res.data;
+      });
+    },
     /** 查询专病路径信息列表 */
     getList() {
       this.loading = true;
@@ -316,3 +367,43 @@ export default {
   }
 };
 </script>
+<style scoped lang="scss">
+.left {
+  height: 500px;
+  overflow: auto;
+
+  .name {
+    font-weight: 700;
+    margin-bottom: 10px;
+  }
+
+  .listitem {
+    width: 100%;
+    height: 50px;
+    border-bottom: 1px solid #dcdfe6;
+
+    .count {
+      display: inline-block;
+      position: relative;
+      left: 210px;
+      color: #a4a6aa;
+      top: -35px;
+      font-size: 13px;
+    }
+
+    .all {
+      height: 50px;
+      line-height: 50px;
+      padding-left: 13px;
+    }
+
+    .allactive {
+      background: #e8f4ff;
+      height: 50px;
+      line-height: 50px;
+      padding-left: 13px;
+      border-left: 3px solid #4d9de7;
+    }
+  }
+}
+</style>