在职党员社区报到

project/pingchang/apps/AppCommunityMember/Add.vue

@@ -0,0 +1,195 @@
+<template>
+  <ai-detail class="Add">
+    <ai-title slot="title" title="发起活动" isShowBack isShowBottomBorder @onBackClick="cancel"/>
+    <template slot="content">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
+        <ai-card title="活动信息">
+          <template #content>
+            <div class="ai-form">
+              <el-form-item label="发布地区" prop="areaId" style="width: 100%">
+                <ai-area-select
+                  clearable
+                  :instance="instance"
+                  v-model="form.areaId"
+                  @fullname="v => form.areaName = v"
+                  always-show
+                  area-level="5"
+                  :disabledLevel="disabledLevel"
+                />
+              </el-form-item>
+              <el-form-item label="标题" prop="title" style="width: 100%">
+                <el-input
+                    size="small"
+                    v-model="form.title"
+                    placeholder="请输入..."
+                    clearabel
+                    :maxLength="60"
+                ></el-input>
+              </el-form-item>
+              <el-form-item label="活动地点" prop="address" style="width: 100%">
+                <el-input
+                    size="small"
+                    v-model="form.address"
+                    placeholder="请输入..."
+                    clearabel
+                    :maxLength="20"
+                ></el-input>
+              </el-form-item>
+              <el-form-item label="参与名额" prop="total" style="width: 100%">
+                <el-input-number v-model="form.total" :min="0" :max="1000" size="small"></el-input-number>
+                <span class="text">*0表示不限制活动报名人数</span>
+              </el-form-item>
+              <el-form-item label="活动时间" prop="activeTimeList" style="width: 50%">
+                <el-date-picker size="small" :picker-options="pickerOptions"
+                  v-model="form.activeTimeList"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  format="yyyy-MM-dd"
+                  value-format="yyyy-MM-dd HH:mm:ss">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="截至时间" prop="stopSignupTime" style="width: 50%">
+                <el-date-picker size="small" :picker-options="pickerOptions"
+                  v-model="form.stopSignupTime"
+                  type="date"
+                  style="width: 100%"
+                  placeholder="选择日期"
+                  format="yyyy-MM-dd"
+                  value-format="yyyy-MM-dd HH:mm:ss">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="联系人" prop="contactPerson" style="width: 50%">
+                <el-input
+                    size="small"
+                    v-model="form.contactPerson"
+                    placeholder="请输入..."
+                    clearabel
+                    :maxLength="10"
+                ></el-input>
+              </el-form-item>
+              <el-form-item label="联系电话" prop="contactPhone" style="width: 50%">
+                <el-input
+                    size="small"
+                    v-model="form.contactPhone"
+                    placeholder="请输入..."
+                    clearabel
+                    :maxLength="11"
+                ></el-input>
+              </el-form-item>
+              <el-form-item label="活动介绍" prop="content" style="width: 100%">
+                <ai-editor v-model="form.content" :instance="instance"/>
+              </el-form-item>
+            </div>
+          </template>
+        </ai-card>
+      </el-form>
+    </template>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="confirm">提交</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+import {mapState} from "vuex";
+export default {
+  name: "Add",
+  props: {
+    instance: Function,
+    dict: Object,
+    selected: Object,
+  },
+  computed: {
+    ...mapState(["user"]),
+  },
+  data() {
+    return {
+      disabledLevel: 0,
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() < Date.now();
+        },
+      },
+      rules: {
+        areaId: [{ required: true, message: '请选择发布地区', trigger: 'change' },
+          {
+            validator: (r, v, cb) => {
+              if (/.+0{3}$/.test(v)) {
+                cb("发布地区必须选到村级")
+              } else cb()
+            }, trigger: "blur"
+          }
+        ],
+        title: [{ required: true, message: '请输入标题', trigger: 'change' }],
+        address: [{ required: true, message: '请选输入活动地点', trigger: 'change' }],
+        total: [{ required: true, message: '请输入参与人员', trigger: 'change' }],
+        activeTimeList: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
+        stopSignupTime: [{ required: true, message: '请选择截止时间', trigger: 'change' }],
+        contactPerson: [{ required: true, message: '请输入联系人', trigger: 'change' }],
+        contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'change' }],
+        content: [{ required: true, message: '请输入活动介绍', trigger: 'change' }],
+      },
+      form: {
+        areaId: '',
+        areaName: '',
+        title: '',
+        address: '',
+        total: '',
+        activeTimeList: [],
+        stopSignupTime: '',
+        contactPerson: '',
+        contactPhone: '',
+        content: ''
+      }
+    };
+  },
+  created() {
+    console.log(this.user)
+    this.dict.load("education", "sex", "nation", "developStatus")
+    this.disabledLevel = this.user.info.areaList.length - 1
+    this.form.areaId = this.user.info.areaId
+  },
+  methods: {
+    confirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.form.beginTime = this.form.activeTimeList[0]
+          this.form.endTime = this.form.activeTimeList[1]
+          this.instance.post(`/app/apppartyreport/addOrUpdate`, {...this.form}).then((res) => {
+            if (res.code == 0) {
+              this.$message.success('发起活动成功')
+              setTimeout(() => {
+                this.cancel()
+              }, 600);
+            }
+          });
+        }
+      });
+    },
+    cancel() {
+      this.$emit("goBack")
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+  .Add {
+    .ai-form {
+      display: flex;
+    }
+    .text {
+      display: inline-block;
+      padding-left: 8px;
+      color: #999;
+    }
+    ::v-deep .el-range-separator {
+      width: 28px!important;
+    }
+    ::v-deep .el-date-editor {
+      width: 100%;
+    }
+  }
+</style>

project/pingchang/apps/AppCommunityMember/AppCommunityMember.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="AppCommunityMember">
+    <ai-list v-show="!detailShow">
+      <template slot="title">
+        <ai-title title="报到服务" :isShowBottomBorder="false" :instance="instance" :isShowArea="currIndex == 0 ? true : false" v-model="areaId" @change="changeArea"></ai-title>
+      </template>
+      <template slot="tabs">
+        <el-tabs v-model="currIndex">
+          <el-tab-pane v-for="(tab,i) in tabs" :key="i" :name="String(i)" :label="tab.label">
+            <component
+              :is="tab.comp"
+              v-if="currIndex === String(i)"
+              :areaId="areaId"
+              :ref="tab.name"
+              @showDetail="showDetail"
+              :instance="instance"
+              :dict="dict"
+              :permissions="permissions" />
+          </el-tab-pane>
+        </el-tabs>
+      </template>
+    </ai-list>
+    <component v-if="detailShow" :is="currDet" :areaId="areaId" :id="id" @goBack="goBack" :instance="instance" :dict="dict" :permissions="permissions"/>
+  </div>
+</template>
+
+<script>
+import List from './List'
+import Statistics from './Statistics'
+import Organization from './Organization'
+import Add from './Add'
+import Detail from './Detail'
+
+import {mapState} from 'vuex'
+
+export default {
+  name: "AppCommunityMember",
+  label: "在职党员社区报到",
+  components: {List, Statistics, Organization, Add, Detail},
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+
+  computed: {
+    tabs() {
+      return [
+        {
+          label: "社区活动管理",
+          name: "List",
+          comp: List,
+        },
+        {
+          label: "报到数据",
+          name: "Statistics",
+          comp: Statistics,
+        },
+        {
+          label: "报到组织管理",
+          name: "Organization",
+          comp: Organization,
+        },
+      ]
+    },
+    ...mapState(['user']),
+    currDet() {
+      return this.id ? Detail : Add
+    }
+  },
+  created() {
+    this.areaId = this.user.info.areaId;
+  },
+  data() {
+    return {
+      activeName: "List",
+      currIndex: 0,
+      areaId: '',
+      detailShow: false,
+      id: ''
+    }
+  },
+  methods: {
+    goBack() {
+      this.detailShow = false;
+      this.$nextTick(() => {
+        this.$refs.List[0].getListInit()
+      })
+    },
+    showDetail(id) {
+      this.id = id || ''
+      this.detailShow = true
+    },
+    changeArea() {
+      this.$nextTick(() => {
+        this.$refs.List[0].getListInit()
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.AppCommunityMember {
+  width: 100%;
+  height: 100%;
+}
+</style>

project/pingchang/apps/AppCommunityMember/Detail.vue

@@ -0,0 +1,89 @@
+<template>
+  <ai-detail class="party-detail">
+    <template slot="title">
+      <ai-title
+        title="活动详情"
+        isShowBack
+        isShowBottomBorder
+        @onBackClick="cancel()"
+      ></ai-title>
+    </template>
+    <template slot="content">
+      <div>
+        <ai-card title="活动信息">
+          <template #content>
+            <ai-wrapper label-width="120px">
+              <ai-info-item isLine label="发布地区">{{ info.areaName }}</ai-info-item>
+              <ai-info-item isLine label="标题">{{ info.title }}</ai-info-item>
+              <ai-info-item isLine label="活动地点">{{ info.address }}</ai-info-item>
+              <ai-info-item isLine label="参与名额">{{ info.total }}</ai-info-item>
+              <ai-info-item label="报名状态">{{ dict.getLabel('partyReportSignupStatus', info.signupStatus) }}</ai-info-item>
+              <ai-info-item label="活动状态">{{ dict.getLabel('activityStatus', info.actionStatus) }}</ai-info-item>
+              <ai-info-item label="活动时间">{{ info.beginTime.substring(0, 10) }} 至 {{ info.endTime.substring(0, 10) }}</ai-info-item>
+              <ai-info-item label="截至时间">{{ info.stopSignupTime }}</ai-info-item>
+              <ai-info-item label="联系人">{{ info.contactPerson }}</ai-info-item>
+              <ai-info-item label="联系电话">{{ info.contactPhone }}</ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <ai-card title="活动介绍">
+          <template #content>
+            <p v-html="info.content"></p>
+          </template>
+        </ai-card>
+        <ai-card title="报名情况">
+          <template #content>
+            <p v-html="info.content"></p>
+          </template>
+        </ai-card>
+      </div>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "detail",
+
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object,
+    id: String
+  },
+
+  data() {
+    return {
+      info: {},
+    }
+  },
+
+  computed: {
+    ...mapState(["user"]),
+  },
+
+  created() {
+    this.dict.load('activityStatus', 'partyReportSignupStatus').then(() => {
+      this.getInfo()
+    })
+  },
+
+  methods: {
+    getInfo() {
+      this.instance.post(`/app/apppartyreport/queryDetailById?id=${this.id}`).then((res) => {
+        if (res?.data) {
+          this.info = res.data;
+          if (this.info.birthday) {
+            this.info.birthday = this.info.birthday.substring(0, 10);
+          }
+        }
+      });
+    },
+    cancel() {
+      this.$emit("goBack")
+    },
+  },
+};
+</script>

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>