在职党员社区报到

project/pingchang/apps/AppCommunityMember/List.vue

@@ -0,0 +1,155 @@
+<template>
+  <ai-list class="partyList">
+    <template slot="content">
+      <ai-search-bar>
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd()">发起活动</el-button>
+          <ai-select v-model="search.actionStatus" placeholder="请选择活动状态" :selectList="dict.getDict('activityStatus')"
+            @change="getListInit"></ai-select>
+          <ai-select v-model="search.signupStatus" placeholder="请选择报名状态" :selectList="dict.getDict('partyReportSignupStatus')"
+            @change="getListInit"></ai-select>
+        </template>
+        <template slot="right">
+          <el-input
+              v-model="search.con"
+              size="small"
+              placeholder="请输入活动名称或发布地区"
+              clearable
+              @change="search.current=1,getList()"
+              suffix-icon="iconfont iconSearch"/>
+        </template>
+      </ai-search-bar>
+      <ai-table
+          :dict="dict"
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          v-loading="loading"
+          style="margin-top: 6px;"
+          :current.sync="search.current"
+          :size.sync="search.size"
+          @getList="getList">
+        <el-table-column slot="activeTime" width="220px" label="活动时间" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">{{row.beginTime.substring(0, 10)}}至{{row.endTime.substring(0, 10)}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column slot="options" width="220px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: 'List',
+
+  props: {
+    instance: Function,
+    permissions: Function,
+    dict: Object,
+    selected: Object,
+    areaId: String
+  },
+  data() {
+    return {
+      search: {
+        current: 1,
+        size: 10,
+        con: '',
+        actionStatus: '',
+        signupStatus: ''
+      },
+      orgName: '',
+      loading: false,
+      total: 0,
+      colConfigs: [
+        {prop: 'title', label: '活动名称', align: 'center'},
+        {prop: 'areaName', label: '发布地区', align: 'center'},
+        {slot: 'activeTime'},
+        {prop: 'total', label: '报名人数', align: 'center', width: 120},
+        {prop: 'signupStatus', label: '报名状态', align: 'center', dict: 'partyReportSignupStatus', width: 120},
+        {prop: 'actionStatus', label: '活动状态', align: 'center', dict: 'activityStatus', width: 120},
+        {slot: 'option'},
+      ],
+      tableData: [],
+      ids: '',
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  created() {
+    this.dict.load('activityStatus', 'partyReportSignupStatus').then(() => {
+      this.getList()
+    })
+    
+  },
+  methods: {
+    getListInit() {
+      this.current = 1
+      this.getList()
+    },
+    getList() {
+      this.instance.post(`/app/apppartyreport/list`, null, {
+        params: {...this.search, areaId: this.areaId}
+      }).then(res => {
+        this.loading = false
+        if (res?.data) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    
+    toDetail(id) {
+      this.$emit("showDetail", id)
+    },
+    toAdd() {
+      this.$emit("showDetail")
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.partyList {
+  .party-table__btns {
+    display: flex;
+    align-items: center;
+  }
+
+  ::v-deep .audit-0 {
+    color: #FF8822 !important;
+  }
+
+  ::v-deep .audit-1 {
+    color: #2EA222 !important;
+  }
+
+  ::v-deep .ai-list__content--right {
+    flex: 1;
+    min-width: 0;
+    margin-left: 1px;
+    box-shadow: none;
+
+    .ai-list__content--right-wrapper {
+      width: 100%;
+    }
+  }
+  ::v-deep .is-current>.el-tree-node__content{
+    width: 100%!important;
+    padding-right: 16px!important;
+  }
+}
+</style>