目录代码整合

packages/party/AppMeetingChinaunion/AppMeetingChinaunion.vue

@@ -0,0 +1,592 @@
+<template>
+  <section class="AppMeetingChinaunion">
+    <ai-list v-if="showList">
+      <ai-title title="三会一课" isShowBottomBorder slot="title">
+        <template #rightBtn>
+          <ai-party :instance="instance" v-model="partyId" :topOrgId="topOrgId" :name.sync="partyOrgLabel"
+                    style="display:inline-block" @origin="changeParty" customClicker
+                    url="/app/partyOrganization/queryAllChildren">
+            <el-input size="small" v-model="partyOrgLabel" readonly placeholder="选择党组织">
+              <el-row slot="append" type="flex" class="partyPicker">
+                <i class="iconfont icondangyuan"/>
+                <div v-text="`切换党组织`"/>
+              </el-row>
+            </el-input>
+          </ai-party>
+          <el-button icon="iconfont iconNav_DataCenter" size="small" type="primary" @click="showStatistics()">会议统计
+          </el-button>
+          <!-- <el-button icon="iconfont iconSetting" size="small" type="primary" @click="toMeetSet()">设置</el-button> -->
+        </template>
+      </ai-title>
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <el-select size="small" v-model="search.meetingClassification" placeholder="会议分类"
+                       @change="$forceUpdate(),page.current=1,getAppThreeMeetingInfo()" clearable>
+              <el-option v-for="(op,j) in dict.getDict('meetingClassification')" :key="j" :label="op.dictName"
+                         :value="op.dictValue"/>
+            </el-select>
+            <el-select size="small" v-model="search.postStatus" placeholder="发布状态"
+                       @change="$forceUpdate(),page.current=1,getAppThreeMeetingInfo()" clearable>
+              <el-option v-for="(op,j) in dict.getDict('postStatus')" :key="j" :label="op.dictName"
+                         :value="op.dictValue"/>
+            </el-select>
+            <ai-search label="学习日期">
+              <el-date-picker size="small" placeholder="请选择" type="daterange"
+                              start-placeholder="开始日期"
+                              end-placeholder="结束日期"
+                              style="width: 258px;"
+                              value-format="yyyy-MM-dd"
+                              v-model="stuTime"
+                              @change="page.current=1,getAppThreeMeetingInfo()"/>
+            </ai-search>
+          </template>
+          <template #right>
+            <el-input size="small" v-model="search.meetingAgenda" placeholder="会议标题/创建人"
+                      suffix-icon="iconfont iconSearch" v-throttle="() => {page.current = 1, getAppThreeMeetingInfo()}" clearable @clear="search.meetingAgenda = '', page.current=1,getAppThreeMeetingInfo()"/>
+          </template>
+        </ai-search-bar>
+        <ai-search-bar>
+          <template #left>
+            <el-button type="primary" icon="iconfont iconAdd" v-if="$permissions('app_appthreemeetinginfo_edit')"
+                       @click="add">添加
+            </el-button>
+            <!-- <el-button icon="iconfont iconAdd" v-if="$permissions('app_appthreemeetinginfo_makeup')"
+                       @click="supplement">补录
+            </el-button> -->
+          </template>
+        </ai-search-bar>
+        <el-table ref="multipleTable" :data="tableData" style="margin-top:16px;"
+                  header-cell-class-name="table-header"
+                  tooltip-effect="dark" row-class-name="table-row" cell-class-name="table-cell">
+          <el-table-column prop="meetingAgenda" label="会议名称" show-overflow-tooltip align="center">
+            <div slot-scope="{row}">
+              {{ row.meetingAgenda || "-" }}
+            </div>
+          </el-table-column>
+          <el-table-column prop="meetingClassification" label="会议分类" align="center" show-overflow-tooltip>
+            <div slot-scope="{row}" v-if="row.meetingClassification.length">
+              <span v-for="(i,index) in dict.getDict('meetingClassification')" :key="index">
+                <span v-for="(b,indexs) in row.meetingClassification" :key="indexs" v-if="i.dictValue == b">
+                  {{ i.dictName }}
+                  <span v-if="indexs < (row.meetingClassification.length - 1) ">,</span>
+                </span>
+              </span>
+            </div>
+            <div v-else>-</div>
+          </el-table-column>
+          <el-table-column prop="organizationName" label="所属组织" align="center">
+            <template slot-scope="scope">
+              <el-tooltip effect="light" placement="top" content="请进入详情查看更多组织"
+                          v-if="scope.row.organizationName.length > 1">
+                <span>{{ scope.row.organizationName[0] }}...</span>
+              </el-tooltip>
+              <span v-else>{{ scope.row.organizationName[0] || '-' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="startTime" label="开始时间" align="center">
+            <div slot-scope="{row}"> {{ row.startTime || '-' }}</div>
+          </el-table-column>
+          <el-table-column prop="endTime" label="结束时间" align="center">
+            <div slot-scope="{row}">
+              {{ row.endTime || '-' }}
+            </div>
+          </el-table-column>
+          <el-table-column prop="createUserName" label="创建人" align="center">
+            <div slot-scope="{row}">
+              {{ row.createUserName || "-" }}
+            </div>
+          </el-table-column>
+          <el-table-column prop="postStatus" label="发布状态" align="center">
+            <div slot-scope="{row}" :style="{color:color[row.postStatus]}">
+              {{ dict.getLabel('postStatus', row.postStatus) || '-' }}
+            </div>
+          </el-table-column>
+          <el-table-column prop="operate" label="操作" align="center" width="160px" fixed="right">
+            <template slot-scope="{ row }">
+              <div class="table-options">
+                <el-button type="text" title="编辑" @click="gotoDetail(row)" v-if="row.postStatus=='0'">编辑</el-button>
+                <el-button type="text" title="详情" @click="gotoDetail(row)" v-else>详情</el-button>
+                <el-button type="text" title="删除" @click="delMeeting(row)">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+          <div slot="empty" class="no-data" style="height:160px;"/>
+        </el-table>
+        <div class="pagination">
+          <el-pagination background
+                         :current-page="page.current"
+                         @current-change="handleCurrentChange"
+                         @size-change="handleSizeChange"
+                         layout="total,prev, pager, next,sizes, jumper"
+                         :total="page.total"/>
+        </div>
+      </template>
+    </ai-list>
+    <div v-if="!$permissions('app_appthreemeetinginfo_detail')" class="no-permission"
+         style="display: flex;flex-direction:column;align-items: center;justify-content: center;height: calc(100% - 148px);font-size: 14px;">
+      <div style="height: 170px;"></div>
+      <p>暂无使用该应用的权限</p>
+    </div>
+    <el-dialog :visible.sync="dialogTableVisible" title="会议数据统计" width="520px" class="mask label-110"
+               :close-on-click-modal='false'>
+      <div class="content input-240">
+        <div class="flex">
+          <el-date-picker
+              v-model="searchYear"
+              type="year"
+              size="small"
+              style="width: 200px; margin-right: 10px;"
+              value-format="yyyy"
+              @change="getMeetStatistics"
+              placeholder="选择年份">
+          </el-date-picker>
+          <el-select style="width: 200px" v-model="searchMonth" placeholder="全部" size="small" clearable
+                     class="timeSelect"
+                     @change="getMeetStatistics">
+            <el-option v-for="(op,j) in dict.getDict('monthList')" :key="j" :label="op.dictName"
+                       :value="op.dictValue"/>
+          </el-select>
+        </div>
+        <ul class="totalTitle">
+          <li v-for="(item,index) in totalTitleList" :key="index">
+            <span>{{ item.num }}</span>
+            <span>{{ item.title }}</span>
+          </li>
+        </ul>
+        <el-row type="flex" justify="space-between" style="margin-top: 40px;">
+          <el-col style="width: 160px;height: 160px;">
+            <pieChart :chart-data="pieChart" :colorList="colorList"></pieChart>
+          </el-col>
+          <el-col class="pieList">
+            <ul>
+              <li v-for="(item,index) in pieData.dataStatistics" :key="index">
+                <div class="colorWrap">
+                  <div :style="{background:colorList[index]}"></div>
+                  <span>{{ item.name }}</span>
+                </div>
+                <span class="num">{{ item.v1 }}</span>
+              </li>
+            </ul>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="operation">
+        <el-button class="delete-btn" @click="dialogTableVisible = false" size="mini">关闭</el-button>
+      </div>
+    </el-dialog>
+    <appThreeMeetingUser :instance="instance" :dict="dict" v-if="showMeetingUser" :meetingId="meetingId"
+                         :meetingStatus="meetingStatus"
+                         :detail="detail"/>
+    <add :instance="instance" :dict="dict" :detail="detail" v-if="showAdd"/>
+    <meetingDetail :instance="instance" :dict="dict" :detail="detail" v-if="showDetail"/>
+    <meetingSet :instance="instance" :dict="dict" :partyId="partyId" :partyName="search.partyName"
+                v-if="showSet"/>
+    <supplement :instance="instance" :dict="dict" v-if="showSupplement"/>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import moment from "dayjs";
+import appThreeMeetingUser from "./components/appThreeMeetingUser";
+import meetingSet from "./components/meetingSet";
+import supplement from "./components/supplement";
+import pieChart from "./components/pieChart";
+import add from "./components/add";
+import meetingDetail from "./components/meetingDetail";
+
+export default {
+  name: "AppMeetingChinaunion",
+  label: "三会一课",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  components: {appThreeMeetingUser, meetingSet, supplement, pieChart, add, meetingDetail},
+  data() {
+    return {
+      searchTime: '',
+      tableData: [],
+      search: {
+        meetingAgenda: "",
+        meetingClassification: "",
+        postStatus: "",
+        partyName: "",
+        searchParamYM: '',
+      },
+      partyId: '',
+      page: {
+        current: 1,
+        size: 10,
+        total: 0,
+      },
+      detail: {},
+      showSet: false,   //设置
+      showMeetingUser: false,   //统计
+      showSupplement: false, //补录
+      showDetail: false,  //详情
+      showAdd: false,    //添加
+      showList: true,    //列表
+      meetingId: "",//会议id
+      meetingStatus: '', //会议状态
+      partyType: '', //2表示支部可进支部党组织设置
+      dialogTableVisible: false,
+      topOrgId: '',
+      stuTime: "",
+      searchMonth: "",
+      searchYear: String(new Date().getFullYear()),
+      colorList: ["#FF4466", "#37A62B", "#4B87FE", "#FFAA44"],
+      totalTitleList: [],
+      pieData: {},
+      pieChart: [],
+      partyOrgLabel: ""
+    }
+  },
+  methods: {
+    add() {
+      this.detail = {};
+      this.showList = false;
+      this.showAdd = true;
+    },
+    supplement() {
+      this.showList = false;
+      this.showSupplement = true;
+    },
+    showStatistics() {
+      if (this.partyType != '2') {
+        return this.$message.error("所属组织不是支部党组织");
+      }
+      this.dialogTableVisible = true
+      this.getMeetStatistics();
+    },
+    /**
+     * 获取统计
+     * */
+    getMeetStatistics() {
+      this.instance.post(`/app/appthreemeetinginfo/statistics-branch-Per-month?month=${this.searchMonth}&year=${this.searchYear || ''}&partyOrgId=${this.partyId}`).then(res => {
+        if (res && res.data) {
+          const {type0, type1, type2, type3, total} = res.data;
+          let chartData = [];
+          this.totalTitleList = [
+            {title: "共计会议", num: total},
+            {title: "支部党员大会", num: type0},
+            {title: "支部委员会", num: type1},
+            {title: "党小组会", num: type2},
+            {title: "党课", num: type3}
+          ]
+          res.data.dataStatistics.map(e => {
+            chartData.push({value: e.v1, name: e.name})
+          })
+          this.pieChart = chartData;
+          this.pieData = res.data;
+        }
+      })
+    },
+    /**
+     * 切换党组织
+     * @param e
+     */
+    changeParty(e) {
+      if (!e.length) return
+      this.partyType = e[0].partyType
+      this.page.current = 1
+      this.search.partyName = e[0].name
+      this.getAppThreeMeetingInfo()
+    },
+    delMeeting(item) {
+      this.$confirm(`是否要删除会议?`, {
+        type: 'warning'
+      }).then(() => {
+        this.instance.post(`/app/appthreemeetinginfo/delete?ids=${item.id}`, null, {}).then(res => {
+          if (res && res.code == 0) {
+            this.$message.success("删除成功!")
+            this.getAppThreeMeetingInfo()
+          }
+        })
+      })
+    },
+
+    //分页
+    handleCurrentChange(val) {
+      this.page.current = val;
+      this.getAppThreeMeetingInfo();
+    },
+    //分页
+    handleSizeChange(val) {
+      this.page.size = val
+      this.page.current = 1
+      this.getAppThreeMeetingInfo()
+    },
+
+    //重置
+    resetSearch() {
+      this.page.current = 1
+      this.page.size = 10
+      this.searchTime = ''
+      this.stuTime = ""
+      this.search.meetingClassification = "";
+      this.search.postStatus = "";
+      this.search.meetingAgenda = "";
+      this.$nextTick(() => {
+        this.getAppThreeMeetingInfo()
+      })
+    },
+    //列表
+    getAppThreeMeetingInfo() {
+      const date = this.stuTime ? {
+        startTimeStart: this.stuTime[0],
+        startTimeEnd: this.stuTime[1]
+      } : {}
+      this.instance.post("/app/appthreemeetinginfo/list", null, {
+        params: {
+          ...this.search,
+          ...this.page,
+          ...date,
+          organizationId: this.partyId,
+        }
+      }).then(res => {
+        if (res && res.code == 0) {
+          if (res.data.records.length) {
+            res.data.records.map((item) => {
+              item.organizationName = item.organizationName.split('/')
+            })
+          }
+          this.tableData = res.data.records;
+          this.page.total = res.data.total;
+        }
+      })
+    },
+
+    //返回
+    goBack() {
+      this.showSet = false;
+      this.showMeetingUser = false;
+      this.showSupplement = false;
+      this.showDetail = false;
+      this.showAdd = false;
+      this.showList = true;
+      this.getAppThreeMeetingInfo()
+    },
+    //跳转详请
+    gotoDetail(row) {
+      if (row.postStatus == '0') {
+        this.detail = row;
+        this.$nextTick(() => {
+          this.showSet = false;
+          this.showList = false;
+          this.showDetail = false;
+          this.showAdd = true;
+        })
+      } else {
+        this.detail = row;
+
+        this.$nextTick(() => {
+          this.showSet = false;
+          this.showList = false;
+          this.showDetail = true;
+        })
+      }
+//       this.detail = row;
+//       this.showList = false;
+//       this.showDetail = true;
+    },
+    /**
+     * 设置
+     * @returns {ElMessageComponent}
+     */
+    toMeetSet() {
+      if (this.partyType != '2') {
+        return this.$message.error("所属组织不是支部党组织");
+      }
+      this.showList = false;
+      this.showDetail = false
+      this.showSet = true;
+    },
+  },
+  created() {
+    this.topOrgId = this.user.info.organizationId;
+    this.partyId = this.user.info.organizationId;
+    this.search.partyName = this.user.info.organizationName;
+    this.dict.load('meetingClassification', 'monthList', "meetingChangeYear", "postStatus").then(() => this.resetSearch());
+  },
+  computed: {
+    ...mapState(['user']),
+    color() {
+      return ["#A722FF", "#FF8822", "#2266FF", "#999999"]
+    },
+  },
+  filters: {
+    formatTime(time) {
+      return moment(time).format("YYYY-MM-DD HH:mm");
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.AppMeetingChinaunion {
+  height: 100%;
+
+  ::v-deep .ai-partyorg {
+    .el-dialog__header, .el-dialog__footer {
+      line-height: 1 !important;
+    }
+
+    .el-input-group__append {
+      background: rgba(245, 245, 245, 1);
+    }
+
+    .el-input__inner {
+      direction: rtl;
+    }
+
+    .partyPicker {
+      gap: 8px;
+      align-items: center;
+    }
+  }
+
+  .pieList {
+    width: 215px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 30px;
+
+    ul {
+      width: 100%;
+      height: 100%;
+
+      li {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+
+        .colorWrap {
+          display: flex;
+          align-items: center;
+
+          div {
+            width: 8px;
+            height: 8px;
+          }
+
+          span {
+            font-size: 14px;
+            color: #666666;
+            line-height: 20px;
+            margin-left: 16px;
+          }
+        }
+      }
+
+      .num {
+        font-size: 14px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 20px;
+      }
+    }
+  }
+
+  .btn {
+    ::v-deep .el-button [class*=iconfont] + span {
+      margin-left: 0;
+    }
+  }
+
+  .timeSelect {
+    .el-input__inner {
+      width: 120px !important;
+    }
+  }
+
+  .operation {
+    overflow: hidden;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 64px;
+    line-height: 64px;
+    display: flex;
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+    background-color: #f3f6f9;
+    box-shadow: inset 0 1px 0 0 #eeeeee;
+
+    button {
+      width: 92px;
+      height: 32px;
+      padding: 0 !important;
+    }
+
+    .delete-btn {
+      background-color: #fff;
+    }
+  }
+
+  .mask {
+    .content {
+      padding-bottom: 100px;
+    }
+
+    .el-table {
+      border: 1px solid #D8E0E8;
+      border-bottom: 0;
+    }
+
+    p {
+      line-height: 28px;
+      text-align: right;
+      width: 88px;
+      float: right;
+      padding-bottom: 8px;
+    }
+
+    .el-dialog__header {
+      text-align: center;
+    }
+  }
+
+  .el-table thead.is-group th {
+    background: #fff;
+  }
+
+  .totalTitle {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 16px 0;
+    border-bottom: 1px solid rgb(238, 238, 238);
+
+    li {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      span:nth-child(1) {
+        font-size: 24px;
+        font-weight: bold;
+        color: #E03416;
+        line-height: 28px;
+      }
+
+      span:nth-child(2) {
+        font-size: 12px;
+        color: #666666;
+        line-height: 16px;
+      }
+    }
+  }
+
+}
+</style>
+
+
+