报到数据

project/pingchang/apps/AppCommunityMember/Statistics.vue

@@ -1,35 +1,22 @@
 <template>
-  <section class="Statistics">
+  <ai-list class="Statistics">
-    <div class="left">
+    <template #left>
-      <header>应报到单位名单</header>
+      <ai-tree-menu
-      <div class="left_tree">
+        title="应报到单位名单"
-        <el-input
+        searchPlaceholder="请输入单位..."
-          size="small"
+        @search="onSearch"
-          v-model="filterText"
+      >
-          placeholder="请输入单位..."
+        <ai-party-tree
-          suffix-icon="iconfont iconSearch"
+          :filter-node-method="filterNode"
-          clearable
+          ref="tree"
-        ></el-input>
+          :instance="instance"
-        <div class="left_cont">
+          :root="user.info.organizationId"
-          <el-tree
+          :current-node-key="selected.id"
-            :data="treeData"
+          @select="handleNodeClick"
-            :props="defaultProps"
+        />
-            ref="tree"
+      </ai-tree-menu>
-            node-key="partyOrgId"
+    </template>
-            empty-text="搜索不到相关内容"
+    <template slot="content">
-            @node-click="handleNodeClick"
-            :default-expanded-keys="[user.info.organizationId]"
-            :filter-node-method="filterNode"
-            :highlight-current="true"
-            :current-node-key="defaultArr"
-            v-if="treeData.length > 0"
-          >
-          </el-tree>
-          <div v-else class="no-data" style="height: 70%"></div>
-        </div>
-      </div>
-    </div>
-    <div class="right">
       <div class="top">
         <header>近12个月学员活动参与情况统计</header>
         <div class="month" id="month"></div>
@@ -96,13 +83,8 @@
             <span ref="border"></span>
           </ul>
         </header>
-        <el-row
+        <ai-search-bar>
-          type="flex"
+          <template #left>
-          justify="space-between"
-          align="middle"
-          style="padding: 8px 16px"
-        >
-          <el-col>
             <el-date-picker
               v-model="searchObj.ymd"
               type="month"
@@ -121,116 +103,37 @@
               :disabled="!Boolean(tableData.length)"
               >导出
             </el-button>
-          </el-col>
+          </template>
-          <el-col style="display: flex; justify-content: space-between">
+          <template #right>
             <el-input
-              size="small"
               v-model="searchObj.name"
-              placeholder="姓名"
+              size="small"
-              prefix-icon="iconfont iconSearch"
+              placeholder="请输入姓名"
               clearable
-              style="width: 220px; margin-right: 4px"
+              @change="(search.current = 1), searchList()"
-              @keyup.enter.native="searchList()"
+              suffix-icon="iconfont iconSearch"
             />
-            <el-button
+          </template>
-              type="primary"
+        </ai-search-bar>
-              icon="iconfont iconSearch"
+        <ai-table
-              size="small"
+          :dict="dict"
-              @click="searchList()"
+          :tableData="tableData"
-              >查询</el-button
+          :col-configs="colConfigs"
-            >
+          :total="page.total"
-            <el-button
+          style="margin-top: 6px"
-              icon="el-icon-refresh-right"
+          :current.sync="page.current"
-              size="small"
+          :size.sync="page.size"
-              @click="(searchObj.name = ''), searchList()"
+          @getList="searchList"
-              >重置</el-button
+        >
-            >
+        </ai-table>
-          </el-col>
-        </el-row>
-        <div style="padding: 0 16px; box-sizing: border-box">
-          <el-table
-            :data="tableData"
-            header-cell-class-name="table-header"
-            tooltip-effect="light"
-            row-class-name="table-row"
-            cell-class-name="table-cell"
-            height="260"
-          >
-            <el-table-column
-              prop="name"
-              label="姓名"
-              show-tooltip-when-overflow
-            >
-              <span slot-scope="{ row }">{{ row.name || "-" }}</span>
-            </el-table-column>
-            <el-table-column
-              prop="sex"
-              label="性别"
-              show-tooltip-when-overflow
-              align="center"
-            >
-              <span slot-scope="{ row }">
-                {{ dict.getLabel("sex", row.sex) || "-" }}
-              </span>
-            </el-table-column>
-            <el-table-column
-              prop="partyOrg"
-              label="所属组织"
-              show-tooltip-when-overflow
-            >
-              <span slot-scope="{ row }">{{ row.partyOrg || "-" }}</span>
-            </el-table-column>
-            <el-table-column
-              prop="signupCount"
-              label="报名次数"
-              show-tooltip-when-overflow
-              align="center"
-            >
-              <span slot-scope="{ row }">{{ row.signupCount }}</span>
-            </el-table-column>
-            <el-table-column
-              prop="partakeCount"
-              label="参与次数"
-              show-tooltip-when-overflow
-              align="center"
-            >
-              <span slot-scope="{ row }">{{ row.partakeCount }}</span>
-            </el-table-column>
-            <div slot="empty" class="no-data" style="height: 160px"></div>
-          </el-table>
-        </div>
-        <div class="pagination">
-          <el-pagination
-            background
-            @current-change="
-              (v) => {
-                page.current = v;
-                searchList();
-              }
-            "
-            @size-change="
-              (v) => {
-                page.size = v;
-                page.current = 1;
-                searchList();
-              }
-            "
-            :current-page.sync="page.current"
-            :total="page.total"
-            layout="total,prev, pager, next,sizes, jumper"
-            :page-size="page.size"
-            :page-sizes="[5, 10, 20, 50, 100]"
-          >
-          </el-pagination>
-        </div>
       </div>
-    </div>
+    </template>
-  </section>
+  </ai-list>
 </template>
 
 <script>
-import { mapState } from "vuex"
+import { mapState } from "vuex";
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
 
 export default {
   name: "Statistics",
@@ -241,7 +144,6 @@ export default {
   },
   data() {
     return {
-      treeData: [],
       filterText: "",
       defaultArr: "",
       partyOrgId: "", //当前选中的id
@@ -260,6 +162,19 @@ export default {
         current: 1,
         total: 0,
       },
+      selected: {},
+      colConfigs: [
+        { prop: "name", label: "姓名", align: "center" },
+        { prop: "sex", label: "性别", align: "center", dict: "sex" },
+        { prop: "partyOrg", label: "所属组织", align: "center" },
+        { prop: "signupCount", label: "报名次数", align: "center", width: 150 },
+        {
+          prop: "partakeCount",
+          label: "参与次数",
+          align: "center",
+          width: 150,
+        },
+      ],
     };
   },
   watch: {
@@ -281,10 +196,14 @@ export default {
         label: "label",
       };
     },
+    orgTree() {
+      return this.$refs.tree?.$refs?.partyTree;
+    },
   },
   methods: {
     handleNodeClick(data) {
-      this.partyOrgId = data.partyOrgId;
+      this.selected = data;
+      this.partyOrgId = data.id;
       this.activeId = "0";
       this.searchObj.name = "";
       this.searchObj.listType = "0";
@@ -296,39 +215,7 @@ export default {
     },
     filterNode(value, data) {
       if (!value) return true;
-      return data.label.indexOf(value) !== -1;
+      return data.name.indexOf(value) !== -1;
-    },
-    // 根据登录用户单位查 树形结构
-    searchSysAll() {
-      this.treeData = [];
-      this.instance
-        .post("/app/apppartyreportconfig/party-list", null, {
-          params: { id: this.user.info.organizationId },
-        })
-        .then((res) => {
-          if (res && res.code == 0) {
-            res.data = res.data.map((a) => {
-              if (a.partyMemberCount) {
-                return {
-                  ...a,
-                  label: `${a.partyOrgName}（${a.partyMemberCount}）`,
-                };
-              } else {
-                return { ...a, label: a.partyOrgName };
-              }
-              // ${a.partyOrgName}（${a.partyMemberCount}）
-            });
-            this.treeData = res.data.filter(
-              (e) => e.partyOrgId == this.user.info.organizationId
-            );
-            this.handleNodeClick(this.treeData[0]);
-            this.$nextTick(() => {
-              this.$refs.tree.setCurrentKey(this.treeData[0].partyOrgId);
-            });
-            this.defaultArr = this.treeData[0].partyOrgId;
-            this.treeData.map((t) => this.addChildParty(t, res.data));
-          }
-        });
     },
     month12() {
       this.instance
@@ -563,9 +450,12 @@ export default {
       let year = mydate.getFullYear();
       return `${year}-${mymonth}-01`;
     },
+
+    onSearch(v) {
+      this.orgTree.filter(v);
+    },
   },
   mounted() {
-    this.searchSysAll();
     this.partyOrgId = this.user.info.organizationId;
     this.dict.load("partyReportSignupReportType", "sex");
     this.selectMonth = this.getNowDate();
@@ -586,247 +476,170 @@ export default {
   padding: 16px;
   box-sizing: border-box;
   overflow: auto;
-  .left {
+
-    width: 264px;
+  .top {
+    width: 100%;
+    height: 288px;
     background-color: #fff;
     border-radius: 4px;
-    height: 1104px;
-    border: 1px solid rgba(216, 220, 227, 1);
-    float: left;
 
     header {
+      color: #333333;
       padding: 0 16px;
-      color: #222;
-      height: 40px;
-      line-height: 40px;
-      background: #eeeff1;
-      border-bottom: 1px solid #e5e5e5;
-      font-size: 14px;
-      font-weight: 700;
-      border-radius: 4px 4px 0 0;
-    }
-
-    .left_tree {
-      padding: 8px;
-      width: 100%;
-      height: 100%;
       box-sizing: border-box;
-      display: flex;
+      height: 47px;
-      flex-direction: column;
+      font-size: 16px;
-
+      font-weight: bold;
-      .left_cont {
+      line-height: 47px;
-        width: 100%;
+      background: rgba(255, 255, 255, 1);
-        margin-top: 8px;
+      border-bottom: 1px solid #eee;
-        overflow-y: auto;
-        height: calc(100% - 60px);
-
-        ::v-deep .el-tree {
-          background-color: #fff;
-          width: 600px;
-        }
-
-        .right_btn {
-          width: 96px;
-          background: #fff;
-          border-radius: 2px;
-          font-size: 12px;
-          padding: 4px 0;
-          position: fixed;
-          z-index: 999;
-
-          li {
-            height: 28px;
-            line-height: 28px;
-            cursor: pointer;
-            text-indent: 12px;
-          }
-
-          li:hover {
-            background-color: #eff6ff;
-            color: #5088ff;
-          }
-        }
-      }
     }
 
-    ::v-deep .el-input__inner {
+    .month {
-      border-radius: 0px;
+      width: 100%;
-    }
+      padding: 16px;
-
+      box-sizing: border-box;
-    ::v-deep .el-tree-node__children {
+      height: calc(100% - 47px);
-      width: 240px;
-      overflow-x: scroll;
     }
   }
 
-  .right {
+  .middle {
-    width: calc(100% - 280px);
+    width: 100%;
-    float: right;
+    height: 320px;
-    height: 1104px;
+    margin-top: 16px;
+    background-color: #fff;
+    border-radius: 4px;
 
-    .top {
+    header {
-      width: 100%;
+      padding: 0 16px;
-      height: 288px;
+      box-sizing: border-box;
-      background-color: #fff;
+      height: 48px;
-      border-radius: 4px;
+      display: flex;
-
+      align-items: center;
-      header {
-        color: #333333;
-        padding: 0 16px;
-        box-sizing: border-box;
-        height: 47px;
-        font-size: 16px;
-        font-weight: bold;
-        line-height: 47px;
-        background: rgba(255, 255, 255, 1);
-        border-bottom: 1px solid #eee;
-      }
-
-      .month {
-        width: 100%;
-        padding: 16px;
-        box-sizing: border-box;
-        height: calc(100% - 47px);
-      }
     }
 
-    .middle {
+    .content {
       width: 100%;
-      height: 320px;
+      padding: 16px;
-      margin-top: 16px;
+      box-sizing: border-box;
-      background-color: #fff;
+      height: calc(100% - 48px);
-      border-radius: 4px;
 
-      header {
+      .middle-left {
-        padding: 0 16px;
+        width: 50%;
-        box-sizing: border-box;
+        height: 100%;
-        height: 48px;
+        float: left;
-        display: flex;
-        align-items: center;
-      }
-
-      .content {
-        width: 100%;
-        padding: 16px;
-        box-sizing: border-box;
-        height: calc(100% - 48px);
-
-        .middle-left {
-          width: 50%;
-          height: 100%;
-          float: left;
-
-          ul {
-            overflow: hidden;
-            width: 95%;
-            height: 100%;
-            display: flex;
-            flex-wrap: wrap;
-
-            li {
-              width: 48%;
-              height: 112px;
-              padding: 8px;
-              box-sizing: border-box;
-              background: rgba(249, 249, 249, 1);
-              border-radius: 2px;
-              margin-bottom: 16px;
-              margin-left: 4%;
-
-              &:nth-of-type(2n - 1) {
-                margin-left: 0;
-              }
-
-              p {
-                color: #333333;
-                font-size: 16px;
-                height: 32px;
-                font-weight: bold;
-              }
-
-              .num {
-                height: 80px;
-                line-height: 60px;
-
-                span:nth-of-type(1) {
-                  color: #2266ff;
-                  font-size: 32px;
-                }
-
-                span:nth-of-type(2) {
-                  font-size: 16px;
-                  color: rgba(153, 153, 153, 1);
-                }
-              }
-            }
-          }
-        }
-
-        .middle-right {
-          width: 50%;
-          height: 100%;
-          float: left;
-          padding: 4px;
-          box-sizing: border-box;
-          background: rgba(249, 249, 249, 1);
-          border-radius: 2px;
-        }
-      }
-    }
-
-    .bottom {
-      width: 100%;
-      height: 464px;
-      margin-top: 16px;
-      background-color: #fff;
-      border-radius: 4px;
-
-      header {
-        width: 100%;
-        height: 56px;
-        padding: 0 16px;
-        box-sizing: border-box;
-        border-bottom: 1px solid rgb(241, 237, 237);
 
         ul {
-          width: 100%;
+          overflow: hidden;
+          width: 95%;
           height: 100%;
-          position: relative;
+          display: flex;
+          flex-wrap: wrap;
 
           li {
-            width: 160px;
+            width: 48%;
-            height: 56px;
+            height: 112px;
-            line-height: 56px;
+            padding: 8px;
-            float: left;
+            box-sizing: border-box;
-            text-align: center;
+            background: rgba(249, 249, 249, 1);
-            font-size: 16px;
+            border-radius: 2px;
-            color: #333333;
+            margin-bottom: 16px;
-            position: relative;
+            margin-left: 4%;
-            transition: opacity 1s;
-            cursor: pointer;
-            opacity: 0.7;
 
-            &:hover {
+            &:nth-of-type(2n - 1) {
-              color: rgba(34, 102, 255, 1);
+              margin-left: 0;
+            }
+
+            p {
+              color: #333333;
+              font-size: 16px;
+              height: 32px;
+              font-weight: bold;
+            }
+
+            .num {
+              height: 80px;
+              line-height: 60px;
+
+              span:nth-of-type(1) {
+                color: #2266ff;
+                font-size: 32px;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 16px;
+                color: rgba(153, 153, 153, 1);
+              }
             }
           }
+        }
+      }
 
-          .activeNav {
+      .middle-right {
-            opacity: 1;
+        width: 50%;
-            font-weight: bold;
+        height: 100%;
+        float: left;
+        padding: 4px;
+        box-sizing: border-box;
+        background: rgba(249, 249, 249, 1);
+        border-radius: 2px;
+      }
+    }
+  }
+
+  .bottom {
+    width: 100%;
+    height: 464px;
+    margin-top: 16px;
+    background-color: #fff;
+    border-radius: 4px;
+
+    header {
+      width: 100%;
+      height: 56px;
+      padding: 0 16px;
+      box-sizing: border-box;
+      border-bottom: 1px solid rgb(241, 237, 237);
+      margin-bottom: 16px;
+
+      ul {
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        li {
+          width: 160px;
+          height: 56px;
+          line-height: 56px;
+          float: left;
+          text-align: center;
+          font-size: 16px;
+          color: #333333;
+          position: relative;
+          transition: opacity 1s;
+          cursor: pointer;
+          opacity: 0.7;
+
+          &:hover {
             color: rgba(34, 102, 255, 1);
           }
+        }
 
-          span {
+        .activeNav {
-            width: 160px;
+          opacity: 1;
-            height: 3px;
+          font-weight: bold;
-            display: block;
+          color: rgba(34, 102, 255, 1);
-            background-color: rgba(34, 102, 255, 1);
+        }
-            transition: left 0.5s;
+
-            position: absolute;
+        span {
-            bottom: 0;
+          width: 160px;
-            left: 0;
+          height: 3px;
-          }
+          display: block;
+          background-color: rgba(34, 102, 255, 1);
+          transition: left 0.5s;
+          position: absolute;
+          bottom: 0;
+          left: 0;
         }
       }
     }
@@ -836,4 +649,4 @@ export default {
     width: auto;
   }
 }
-</style>
+</style>