抽奖活动功能提交

src/api/luckyDraw/LuckyDrawEventsService.js

@@ -0,0 +1,47 @@
+import request from "@/utils/httpRequest";
+import { PUBLIC_MODULES_PATH as prefix } from "@/api/AppPath";
+
+export default class LuckyDrawEventsService {
+  list (params) {
+    return request({
+      url: prefix + '/luckyDraw/events/list',
+      method: 'get',
+      params: params
+    })
+  }
+  save (param) {
+    return request({
+      url: prefix + '/luckyDraw/events/save',
+      method: 'post',
+      data: param
+    })
+  }
+  queryById (id) {
+    return request({
+      url: prefix + '/luckyDraw/events/queryById',
+      method: 'get',
+      params: {id: id}
+    })
+  }
+  delete (ids) {
+    return request({
+      url: prefix + '/luckyDraw/events/delete',
+      method: 'delete',
+      params: {ids: ids}
+    })
+  }
+  openEvent (id) {
+    return request({
+      url: prefix + '/luckyDraw/events/openEvent',
+      method: 'get',
+      params: {id: id}
+    })
+  }
+  closeEvent (id) {
+    return request({
+      url: prefix + '/luckyDraw/events/closeEvent',
+      method: 'get',
+      params: {id: id}
+    })
+  }
+}

src/api/luckyDraw/LuckyDrawInfoService.js

@@ -0,0 +1,33 @@
+import request from "@/utils/httpRequest";
+import { PUBLIC_MODULES_PATH as prefix } from "@/api/AppPath";
+
+export default class LuckyDrawInfoService {
+  save (param) {
+    return request({
+      url: prefix + '/luckyDraw/info/luckyDraw',
+      method: 'post',
+      data: param
+    })
+  }
+  findByEventId (id) {
+    return request({
+      url: prefix + '/luckyDraw/info/findByEventId',
+      method: 'get',
+      params: {id: id}
+    })
+  }
+  list (params) {
+    return request({
+      url: prefix + '/luckyDraw/info/list',
+      method: 'get',
+      params: params
+    })
+  }
+  pjList (params) {
+    return request({
+      url: prefix + '/luckyDraw/info/pjList',
+      method: 'get',
+      params: params
+    })
+  }
+}

src/api/luckyDraw/LuckyDrawMemberService.js

@@ -0,0 +1,33 @@
+import request from "@/utils/httpRequest";
+import { PUBLIC_MODULES_PATH as prefix } from "@/api/AppPath";
+
+export default class LuckyDrawMemberService {
+  list (params) {
+    return request({
+      url: prefix + '/luckyDraw/member/list',
+      method: 'get',
+      params: params
+    })
+  }
+  save (param) {
+    return request({
+      url: prefix + '/luckyDraw/member/save',
+      method: 'post',
+      data: param
+    })
+  }
+  findById (id) {
+    return request({
+      url: prefix + '/luckyDraw/member/findById',
+      method: 'get',
+      params: {id: id}
+    })
+  }
+  remove (ids) {
+    return request({
+      url: prefix + '/luckyDraw/member/remove',
+      method: 'delete',
+      params: {ids: ids}
+    })
+  }
+}

src/views/luckyDraw/LuckyDrawEventsForm.vue

@@ -0,0 +1,231 @@
+<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+  <el-dialog
+    :title="title"
+    :close-on-click-modal="false"
+	draggable
+    width="900px"
+    v-model="visible">
+    <el-form size="small" :model="inputForm" ref="inputForm" @keyup.enter.native="doSubmit()"
+             label-width="95px" v-loading="loading" :class="method==='view'?'readonly':''" :disabled="method==='view'" @submit.native.prevent>
+      <el-divider content-position="left"><i class="el-icon-document"></i> 活动信息</el-divider>
+      <el-row :gutter="15">
+        <el-col :span="12">
+          <el-form-item label="活动名称" :rules="[{required: true, message: '活动名称不能为空', trigger: 'blur'}]" prop="name">
+            <el-input size="large" v-model="inputForm.name" placeholder="请输入活动名称"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="活动详情" :rules="[{required: true, message: '活动详情不能为空', trigger: 'blur'}]" prop="detail">
+            <el-input size="large" v-model="inputForm.detail" :autosize="{minRows: 2, maxRows: 8}" type="textarea" maxlength="200" placeholder="请输入活动详情" show-word-limit></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-divider content-position="left"><i class="el-icon-document"></i>
+        活动奖项
+        <el-button style="margin-left: 20px" type="primary" :disabled="method==='view'" size="small" @click="insertEvent()" plain>
+          新增
+        </el-button>
+      </el-divider>
+      <el-row  :gutter="15">
+        <el-col :span="24">
+			<vxe-table
+				border
+				show-overflow
+				show-footer
+				ref="luckyTable"
+				class="vxe-table-element"
+				:data="inputForm.luckyDrawAwardsDTOList"
+				style="margin-left: 1em"
+				@cell-click=""
+				@edit-closed=""
+				:key="tableKey"
+				highlight-current-row
+				:edit-rules="validRules"
+				:edit-config="{trigger: 'click', mode: 'row', showStatus: false, autoClear: true, icon: '#'}"
+			>
+				<vxe-table-column field="name" min-width="180" align="center" title="奖项名称" :edit-render="{}">
+					<template #default="scope">
+						<vxe-input v-model="scope.row.name" placeholder="奖项名称"></vxe-input>
+					</template>
+				</vxe-table-column>
+				<vxe-table-column field="number" min-width="180" align="center" title="奖品数量" :edit-render="{}">
+					<template #default="scope">
+						<vxe-input v-model="scope.row.number" type="number" placeholder="奖品数量"></vxe-input>
+					</template>
+				</vxe-table-column>
+				<vxe-table-column field="prizeName" min-width="180" align="center" title="奖品名称" :edit-render="{}">
+					<template #default="scope">
+						<vxe-input v-model="scope.row.prizeName" placeholder="奖品名称"></vxe-input>
+					</template>
+				</vxe-table-column>
+				<vxe-table-column title="操作" width="100" align="center">
+					<template #default="scope">
+						<el-button size="small" type="danger" @click="removeEvent(scope.row,scope.$rowIndex)">删除</el-button>
+					</template>
+				</vxe-table-column>
+			</vxe-table>
+		</el-col>
+      </el-row>
+    </el-form>
+	  <template #footer>
+		  <span class="dialog-footer">
+			  <el-button size="small" @click="visible = false" icon="el-icon-circle-close">关闭</el-button>
+			  <el-button size="small" type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
+		  </span>
+	  </template>
+
+  </el-dialog>
+</template>
+
+<script>
+  import LuckyDrawEventsService from '@/api/luckyDraw/LuckyDrawEventsService'
+  export default {
+    data () {
+      return {
+        visible: false,
+        loading: false,
+        title: '',
+        method: '',
+        inputForm: {
+          id: '',
+          name: '',
+          detail: '',
+          luckyDrawAwardsDTOList: []
+        },
+        tableKey: '',
+        validRules: {
+          name: [
+            {required: true, message: '奖项类型不能为空'}
+          ],
+          number: [
+            {required: true, message: '奖品数量不能为空'}
+          ],
+          prizeName: [
+            {required: true, message: '奖品名称不能为空'}
+          ]
+        }
+      }
+    },
+    luckyDrawEventsService: null,
+    created () {
+      this.luckyDrawEventsService = new LuckyDrawEventsService()
+    },
+    mounted () {
+    },
+    components: {
+    },
+    methods: {
+      init (method, id) {
+        this.method = method
+        this.inputForm = {
+          id: '',
+          name: '',
+          detail: '',
+          luckyDrawAwardsDTOList: []
+        }
+        this.inputForm.id = id
+        if (method === 'add') {
+          this.title = `新建活动`
+        } else if (method === 'edit') {
+          this.title = '修改活动信息'
+        } else if (method === 'view') {
+          this.title = '查看活动详情'
+        }
+        this.visible = true
+        this.$nextTick(() => {
+			this.$refs.inputForm.resetFields()
+          if (method === 'edit' || method === 'view') { // 修改或者查看
+            this.loading = true
+
+            this.luckyDrawEventsService.queryById(this.inputForm.id).then((data) => {
+              this.inputForm = this.recover(this.inputForm, data)
+              if (this.commonJS.isEmpty(this.inputForm.luckyDrawAwardsDTOList)) {
+                this.inputForm.luckyDrawAwardsDTOList = []
+              }
+              this.loading = false
+            })
+          }
+        })
+      },
+      // 表单提交
+      doSubmit () {
+        this.$refs['inputForm'].validate((valid) => {
+          if (valid) {
+            this.loading = true
+            if (this.commonJS.isEmpty(this.inputForm.luckyDrawAwardsDTOList)) {
+              this.inputForm.luckyDrawAwardsDTOList = []
+              this.$message.error('活动奖项未填写')
+              this.loading = false
+              throw new Error('活动奖项未填写')
+            }
+            this.inputForm.luckyDrawAwardsDTOList.forEach((item, index) => {
+              if (this.commonJS.isEmpty(item.name)) {
+                this.$message.error('活动奖项中第' + (index + 1) + '条数据的“奖项名称”未填写')
+                this.loading = false
+                throw new Error()
+              }
+              if (this.commonJS.isEmpty(item.number) || item.number === 0 || item.number === '0') {
+                this.$message.error('活动奖项中第' + (index + 1) + '条数据的“奖品数量”不可以为空或“0”')
+                this.loading = false
+                throw new Error()
+              }
+              if (this.commonJS.isEmpty(item.prizeName)) {
+                this.$message.error('活动奖项中第' + (index + 1) + '条数据的“奖品名称”未填写')
+                this.loading = false
+                throw new Error()
+              }
+            })
+            this.luckyDrawEventsService.save(this.inputForm).then((data) => {
+              this.$message.success(data)
+              this.loading = false
+              this.visible = false
+              this.$emit('refreshDataList')
+            }).catch(() => {
+              this.loading = false
+            })
+          }
+        })
+      },
+      // 新增
+      insertEvent () {
+        let d = {
+          name: '',
+          number: '',
+          prizeName: ''
+        }
+        if (this.commonJS.isEmpty(this.inputForm.luckyDrawAwardsDTOList)) {
+          this.inputForm.luckyDrawAwardsDTOList = []
+        }
+        this.$refs.luckyTable.insertAt(d)
+        this.inputForm.luckyDrawAwardsDTOList.push(d)
+        this.tableKey = Math.random()
+      },
+      // 删除
+      removeEvent (row, rowIndex) {
+        this.$refs.luckyTable.remove(row)
+        this.inputForm.luckyDrawAwardsDTOList.splice(rowIndex, 1)
+      },
+      close () {
+        this.inputForm = {
+          id: '',
+          name: '',
+          detail: '',
+          luckyDrawAwardsDTOList: []
+        }
+        this.$refs.inputForm.resetFields()
+        this.tableKey = Math.random()
+        this.visible = false
+        this.loading = false
+      }
+    }
+  }
+</script>
+<style scoped>
+  .avatar{
+    height: 100px;
+  }
+  .el-divider__text {
+    font-weight: bold;
+    font-size: 16px;
+  }
+</style>

src/views/luckyDraw/LuckyDrawEventsList.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="page">
+    <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
+      <el-form-item prop="name">
+        <el-input size="small" v-model="searchForm.name" placeholder="活动名称" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button  type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
+        <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="jp-table top" style="">
+      <vxe-toolbar   :refresh="{query: refreshList}" custom>
+        <template #buttons>
+          <el-button v-if="hasPermission('lucky_draw:events:add')" icon="el-icon-plus" type="primary" size="small"  @click="add()">新建</el-button>
+          <el-button v-if="hasPermission('lucky_draw:events:del')" icon="el-icon-delete" type="danger"  size="small"  @click="del()" :disabled="$refs.luckyTable && $refs.luckyTable.getCheckboxRecords().length === 0" plain>删除</el-button>
+        </template>
+      </vxe-toolbar>
+      <div style="height: calc(100% - 90px);">
+        <vxe-table
+          border="inner"
+          auto-resize
+          resizable
+          height="auto"
+          :loading="loading"
+          size="small"
+          ref="luckyTable"
+          show-header-overflow
+          show-overflow
+          highlight-hover-row
+          :print-config="{}"
+          :import-config="{}"
+          :export-config="{}"
+          :sort-config="{remote:true}"
+          :data="dataList"
+          :expand-config="{iconOpen: 'el-icon-caret-top', iconClose: 'el-icon-caret-right', accordion: true}"
+        >
+          <vxe-column type="seq" width="60" title="序号"></vxe-column>
+          <vxe-column type="checkbox"  width="40px"></vxe-column>
+          <vxe-column min-width="150" title="活动名称" type="expand" field="name" align="left">
+            <template #default="{ row, rowIndex }">
+              <span>{{ row.name }}</span>
+            </template>
+            <template #content="{ row, rowIndex }">
+              <div class="expand-wrapper">
+                <vxe-table
+                  border
+                  :data="row.luckyDrawAwardsDTOList">
+                  <vxe-column field="name" title="奖项名称" align="center"></vxe-column>
+                  <vxe-column field="number" title="奖品数量" align="center"></vxe-column>
+                  <vxe-column field="prizeName" title="奖品名称" align="center"></vxe-column>
+                </vxe-table>
+              </div>
+            </template>
+          </vxe-column>
+          <vxe-column min-width="180" title="活动详情" field="detail" align="left"></vxe-column>
+          <vxe-column width="90" title="状态" field="switchFlag" align="center">
+            <template #default="scope">
+              <span v-if="scope.row.switchFlag === '1'" style="color: #67C23A">已开启</span>
+              <span v-if="scope.row.switchFlag === '0'" style="color: #F56C6C">已关闭</span>
+            </template>
+          </vxe-column>
+          <vxe-column title="操作" width="200" fixed="right" align="center">
+            <template #default="scope">
+              <el-button v-if="hasPermission('lucky_draw:events:edit')" text type="primary" size="small" @click="edit(scope.row.id)">修改</el-button>
+              <el-button v-if="hasPermission('lucky_draw:events:edit')" text type="primary" size="small" @click="changeSwitch(scope.row)">
+                {{scope.row.switchFlag === '1' ? '关闭活动' : '开启活动'}}
+              </el-button>
+              <!--<el-button v-if="hasPermission('lucky_draw:events:edit')" text type="primary" size="small" @click="luckyDraw(scope.row.id)">抽奖</el-button>-->
+              <el-button v-if="hasPermission('lucky_draw:events:del')" text type="primary" size="small" @click="del(scope.row.id)">删除</el-button>
+
+            </template>
+          </vxe-column>
+        </vxe-table>
+        <vxe-pager
+          background
+          size="small"
+          :current-page="tablePage.currentPage"
+          :page-size="tablePage.pageSize"
+          :total="tablePage.total"
+          :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
+          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+          @page-change="currentChangeHandle">
+        </vxe-pager>
+      </div>
+      <!-- 弹窗, 新增 / 修改 -->
+      <LuckyDrawEventsForm  ref="luckyDrawEventsForm" @refreshDataList="refreshList"></LuckyDrawEventsForm>
+    </div>
+  </div>
+</template>
+
+<script>
+  import LuckyDrawEventsForm from './LuckyDrawEventsForm'
+  import LuckyDrawEventsService from '@/api/luckyDraw/LuckyDrawEventsService'
+
+  export default {
+    data () {
+      return {
+        searchForm: {
+          name: ''
+        },
+        dataList: [],
+        tablePage: {
+          total: 0,
+          currentPage: 1,
+          pageSize: 10,
+          orders: []
+        },
+        loading: false
+      }
+    },
+    components: {
+      LuckyDrawEventsForm
+    },
+    luckyDrawEventsService: null,
+    created () {
+      this.luckyDrawEventsService = new LuckyDrawEventsService()
+    },
+    activated () {
+      this.refreshList()
+    },
+    watch: {
+    },
+    methods: {
+      // 获取数据列表
+      refreshList () {
+        this.loading = true
+        this.luckyDrawEventsService.list({
+          'current': this.tablePage.currentPage,
+          'size': this.tablePage.pageSize,
+          'orders': this.tablePage.orders,
+          ...this.searchForm
+        }).then((data) => {
+          this.dataList = data.records
+          this.tablePage.total = data.total
+          this.loading = false
+        })
+      },
+      // 当前页
+      currentChangeHandle ({ currentPage, pageSize }) {
+        this.tablePage.currentPage = currentPage
+        this.tablePage.pageSize = pageSize
+        this.refreshList()
+      },
+      // 新建
+      add () {
+        this.$refs.luckyDrawEventsForm.init('add')
+      },
+      // 修改
+      edit (id) {
+        id = id || this.$refs.luckyTable.getCheckboxRecords().map(item => {
+          return item.id
+        })[0]
+        this.$refs.luckyDrawEventsForm.init('edit', id)
+      },
+      // 查看
+      view (id) {
+        this.$refs.luckyDrawEventsForm.init('view', id)
+      },
+      resetSearch () {
+        this.$refs.searchForm.resetFields()
+        this.refreshList()
+      },
+      changeSwitch (row) {
+        if (row.switchFlag === '0') {
+          this.$confirm(`确定开启此活动吗?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.luckyDrawEventsService.openEvent(row.id).then((data) => {
+              this.$message.success(data)
+              this.refreshList()
+            })
+          }).catch(() => {
+            this.refreshList()
+          })
+        } else if (row.switchFlag === '1') {
+          this.$confirm(`确定关闭此活动吗?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.luckyDrawEventsService.closeEvent(row.id).then((data) => {
+              this.$message.success(data)
+              this.refreshList()
+            })
+          }).catch(() => {
+            this.refreshList()
+          })
+        }
+      },
+      // 删除
+      del (id) {
+        let ids = id || this.$refs.luckyTable.getCheckboxRecords().map(item => {
+          return item.id
+        }).join(',')
+        this.$confirm(`确定删除所选项吗?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.loading = true
+          this.luckyDrawEventsService.delete(ids).then((data) => {
+            this.$message.success(data)
+            this.refreshList()
+            this.loading = false
+          })
+        })
+      },
+      luckyDraw (id) {
+        console.log('id', id)
+        this.$router.push({path: './LuckyDrawInfoList', query: {id: id}})
+      }
+    }
+  }
+</script>
+<style lang="scss">
+  .el-card__body {
+    overflow: auto;
+  }
+</style>
+<style>
+  .expand-wrapper {
+    padding: 10px;
+  }
+</style>

src/views/luckyDraw/LuckyDrawInfoList.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="page">
+    <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
+      <el-form-item prop="awardsName">
+        <el-input size="small" v-model="searchForm.awardsName" placeholder="奖项名称" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button  type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
+        <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="bg-white top">
+      <vxe-toolbar   :refresh="{query: refreshList}" custom>
+        <template #buttons>
+          <el-button v-if="hasPermission('lucky_draw:events:add')" icon="el-icon-plus" type="primary" size="small"  @click="add()">新建</el-button>
+          <el-button v-if="hasPermission('lucky_draw:events:del')" icon="el-icon-delete" type="danger"  size="small"  @click="del()" :disabled="$refs.luckyTable && $refs.luckyTable.getCheckboxRecords().length === 0" plain>删除</el-button>
+        </template>
+      </vxe-toolbar>
+      <div style="height: calc(100% - 80px);">
+        <vxe-table
+          border="inner"
+          auto-resize
+          resizable
+          height="auto"
+          :loading="loading"
+          size="small"
+          ref="luckyTable"
+          show-header-overflow
+          show-overflow
+          highlight-hover-row
+          :print-config="{}"
+          :import-config="{}"
+          :export-config="{}"
+          :sort-config="{remote:true}"
+          :data="dataList"
+          :expand-config="{iconOpen: 'el-icon-caret-top', iconClose: 'el-icon-caret-right', accordion: true}"
+        >
+          <vxe-column type="seq" width="60" title="序号"></vxe-column>
+          <vxe-column type="checkbox"  width="40px"></vxe-column>
+          <vxe-column min-width="150" title="奖项名称" type="expand" field="awardsName" align="left">
+            <template #default="{ row, rowIndex }">
+              <span>{{ row.awardsName }}</span>
+            </template>
+            <template #content="{ row, rowIndex }">
+              <div class="expand-wrapper">
+                <vxe-table
+                  border
+                  :data="row.luckyDrawMembersDtos">
+                  <vxe-column field="name" title="姓名" align="center"></vxe-column>
+                  <vxe-column field="officeName" title="部门" align="center"></vxe-column>
+                  <vxe-column field="phone" title="手机号" align="center"></vxe-column>
+                </vxe-table>
+              </div>
+            </template>
+          </vxe-column>
+          <vxe-column min-width="180" title="奖品名称" field="prizeName" align="left"></vxe-column>
+          <vxe-column min-width="180" title="奖品数量" field="number" align="left"></vxe-column>
+          <vxe-column title="操作" width="200" fixed="right" align="center">
+            <template #default="scope">
+              <el-button v-if="hasPermission('lucky_draw:events:edit')" text type="primary" size="small" @click="luckyDraw(scope.row.eventsId,scope.row.number,scope.row.id)">抽奖</el-button>
+
+            </template>
+          </vxe-column>
+        </vxe-table>
+        <vxe-pager
+          background
+          size="small"
+          :current-page="tablePage.currentPage"
+          :page-size="tablePage.pageSize"
+          :total="tablePage.total"
+          :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
+          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+          @page-change="currentChangeHandle">
+        </vxe-pager>
+      </div>
+      <!-- 弹窗, 新增 / 修改 -->
+      <LuckyDrawEventsForm  ref="luckyDrawEventsForm" @refreshDataList="refreshList"></LuckyDrawEventsForm>
+    </div>
+  </div>
+</template>
+
+<script>
+  import LuckyDrawEventsForm from './LuckyDrawEventsForm'
+  import LuckyDrawEventsService from '@/api/luckyDraw/LuckyDrawEventsService'
+  import LuckyDrawInfoService from '@/api/luckyDraw/LuckyDrawInfoService'
+
+  export default {
+    data () {
+      return {
+        searchForm: {
+          id: '',
+          awardsName: ''
+        },
+        dataList: [],
+        tablePage: {
+          total: 0,
+          currentPage: 1,
+          pageSize: 10,
+          orders: []
+        },
+        loading: false
+      }
+    },
+    components: {
+      LuckyDrawEventsForm
+    },
+    luckyDrawEventsService: null,
+    luckyDrawInfoService: null,
+    created () {
+      this.luckyDrawEventsService = new LuckyDrawEventsService()
+      this.luckyDrawInfoService = new LuckyDrawInfoService()
+    },
+    activated () {
+      this.refreshList()
+    },
+    watch: {
+    },
+    methods: {
+      // 获取数据列表
+      refreshList () {
+        this.searchForm.id = this.$route.query.id
+        console.log('this.$route.query.id', this.$route.query.id)
+        this.loading = true
+        this.luckyDrawInfoService.list({
+          'current': this.tablePage.currentPage,
+          'size': this.tablePage.pageSize,
+          'orders': this.tablePage.orders,
+          ...this.searchForm
+        }).then((data) => {
+          this.dataList = data.records
+          this.tablePage.total = data.total
+          this.loading = false
+        })
+      },
+      // 当前页
+      currentChangeHandle ({ currentPage, pageSize }) {
+        this.tablePage.currentPage = currentPage
+        this.tablePage.pageSize = pageSize
+        this.refreshList()
+      },
+      // 新建
+      add () {
+        this.$refs.luckyDrawEventsForm.init('add')
+      },
+      // 抽奖
+      luckyDraw (id, number, awardId) {
+        let param = {id: id, number: number, awardId: awardId}
+        this.luckyDrawInfoService.save(param)
+        this.refreshList()
+      },
+      // 查看
+      view (id) {
+        this.$refs.luckyDrawEventsForm.init('view', id)
+      },
+      resetSearch () {
+        this.$refs.searchForm.resetFields()
+        this.refreshList()
+      }
+    }
+  }
+</script>
+<style lang="scss">
+  .el-card__body {
+    overflow: auto;
+  }
+</style>
+<style>
+  .expand-wrapper {
+    padding: 10px;
+  }
+</style>

src/views/luckyDraw/LuckyDrawMemberList.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="page">
+    <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
+      <!-- 搜索框-->
+      <el-form-item label="活动" prop="eventName">
+        <el-input size="small" v-model="searchForm.eventName" placeholder="请输入活动名称" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="姓名" prop="name">
+        <el-input size="small" v-model="searchForm.name" placeholder="请输入姓名" clearable></el-input>
+      </el-form-item>
+      <el-form-item v-if="showHideItem" label="手机号" prop="phone">
+        <el-input size="small" v-model="searchForm.phone" placeholder="请输入手机号" clearable></el-input>
+      </el-form-item>
+		<el-form-item v-if="showHideItem" label="部门" prop="officeName">
+			<el-input size="small" v-model="searchForm.officeName" placeholder="请输入手机号" clearable></el-input>
+		</el-form-item>
+      <el-form-item v-if="showHideItem" label="公司" prop="companyName">
+        <el-select v-model="searchForm.companyName" placeholder="请选择公司" clearable>
+          <el-option label="评估公司" value="评估公司"></el-option>
+          <el-option label="会计师事务所" value="会计师事务所"></el-option>
+          <el-option label="中审分所" value="中审分所"></el-option>
+          <el-option label="项目公司" value="项目公司"></el-option>
+          <el-option label="咨询公司" value="咨询公司"></el-option>
+          <el-option label="其他" value="其他"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="default" @click="showHide" size="small" :icon="showHideIcon">{{showHideName}}</el-button>
+        <el-button type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
+        <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="jp-table top" style="">
+      <vxe-toolbar   :refresh="{query: refreshList}" custom>
+        <template #buttons>
+          <el-button v-if="hasPermission('luckyDraw:member:del')" icon="el-icon-delete" type="danger"  size="small"  @click="del()" :disabled="$refs.luckyTable && $refs.luckyTable.getCheckboxRecords().length === 0" plain>删除</el-button>
+        </template>
+      </vxe-toolbar>
+      <div style="height: calc(100% - 90px)">
+        <vxe-table
+          :key="tableKey"
+          border="inner"
+          auto-resize
+          resizable
+          height="auto"
+          :loading="loading"
+          size="small"
+          ref="clientTable"
+          show-header-overflow
+          show-overflow
+          highlight-hover-row
+          :menu-config="{}"
+          @sort-change="sortChangeHandle"
+          :sort-config="{remote:true}"
+          :data="dataList"
+          :checkbox-config="{}">
+          <vxe-column type="checkbox"  width="40px"></vxe-column>
+          <vxe-column type="seq" width="60" title="序号"></vxe-column>
+          <vxe-column min-width="160" align="center" title="活动" field="eventName"></vxe-column>
+          <vxe-column min-width="160" align="center" title="姓名" field="name"></vxe-column>
+          <vxe-column min-width="160" align="center" title="手机号" field="phone"></vxe-column>
+			<vxe-column min-width="160" align="center" title="公司" field="companyName"></vxe-column>
+          <vxe-column min-width="160" align="center" title="部门" field="officeName">
+          </vxe-column>
+          <vxe-column title="操作" width="120px" fixed="right" align="center">
+            <template  #default="scope">
+              <el-button v-if="hasPermission('luckyDraw:member:edit')" text type="primary"  size="small" @click="edit(scope.row.id)">修改</el-button>
+              <el-button v-if="hasPermission('luckyDraw:member:del')" text type="primary"   size="small" @click="del(scope.row.id)">删除</el-button>
+            </template>
+          </vxe-column>
+        </vxe-table>
+        <vxe-pager
+          background
+          size="small"
+          :current-page="tablePage.currentPage"
+          :page-size="tablePage.pageSize"
+          :total="tablePage.total"
+          :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
+          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+          @page-change="currentChangeHandle">
+        </vxe-pager>
+        <LuckyDrawMemberUpdateForm ref="luckyDrawMemberUpdateForm" @refreshList="refreshList"></LuckyDrawMemberUpdateForm>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import LuckyDrawMemberUpdateForm from './LuckyDrawMemberUpdateForm'
+  import LuckyDrawMemberService from '@/api/luckyDraw/LuckyDrawMemberService'
+  import userService from '@/api/sys/UserService'
+  export default {
+    data () {
+      return {
+        showHideItem: false,
+        showHideIcon: 'el-icon-arrow-down',
+        showHideName: '展示',
+        num: 0,
+        searchForm: {
+          eventId: '',
+          eventName: '',
+          officeName: '',
+			companyName: '',
+          phone: '',
+          name: ''
+        },
+        dataList: [],
+        tablePage: {
+          total: 0,
+          currentPage: 1,
+          pageSize: 10,
+          orders: []
+        },
+        tableKey: '',
+        loading: false,
+        processDefinitionAuditId: '',
+        procDefAuditKey: '',
+        isAdmin: false,
+        create: ''
+      }
+    },
+    luckyDrawMemberService: null,
+    created () {
+      this.luckyDrawMemberService = new LuckyDrawMemberService()
+    },
+    components: {
+      LuckyDrawMemberUpdateForm
+    },
+    computed: {
+      userName () {
+        return JSON.parse(localStorage.getItem('user')).name
+      },
+      user () {
+        this.createName = JSON.parse(localStorage.getItem('user')).name
+        return JSON.parse(localStorage.getItem('user'))
+      }
+    },
+    mounted () {
+      this.refreshList()
+    },
+    activated () {
+      this.refreshList()
+    },
+    methods: {
+      showHide () {
+        if (this.showHideItem === false) {
+          this.showHideItem = true
+          this.showHideIcon = 'el-icon-arrow-up'
+          this.showHideName = '隐藏'
+        } else {
+          this.showHideItem = false
+          this.showHideIcon = 'el-icon-arrow-down'
+          this.showHideName = '展示'
+        }
+      },
+      // 查询当前用户是否是管理员用户
+      checkIsAdmin () {
+        userService.is().then((data) => {
+          this.isAdmin = data
+        })
+      },
+      // 获取数据列表
+      refreshList () {
+        this.loading = true
+        this.luckyDrawMemberService.list({
+          'current': this.tablePage.currentPage,
+          'size': this.tablePage.pageSize,
+          'orders': this.tablePage.orders,
+          ...this.searchForm
+        }).then((data) => {
+          this.dataList = data.records
+          this.tablePage.total = data.total
+          this.tableKey = Math.random()
+          this.loading = false
+        })
+        this.checkIsAdmin()
+      },
+      // 当前页
+      currentChangeHandle ({ currentPage, pageSize }) {
+        this.tablePage.currentPage = currentPage
+        this.tablePage.pageSize = pageSize
+        this.refreshList()
+      },
+      // 排序
+      sortChangeHandle (column) {
+        this.tablePage.orders = []
+        if (column.order != null) {
+          this.tablePage.orders.push({column: this.$utils.toLine(column.property), asc: column.order === 'asc'})
+        }
+        this.refreshList()
+      },
+      resetSearch () {
+        this.$refs.searchForm.resetFields()
+        this.refreshList()
+      },
+      // 修改
+      edit (id) {
+        id = id || this.$refs.clientTable.getCheckboxRecords().map(item => {
+          return item.id
+        })[0]
+        this.$refs.luckyDrawMemberUpdateForm.init('edit', id)
+      },
+      // 删除
+      del (id) {
+        console.log(123)
+        let ids = id || this.$refs.clientTable.getCheckboxRecords().map(item => {
+          return item.id
+        }).join(',')
+        this.$confirm(`确定删除所选项吗?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.loading = true
+          this.luckyDrawMemberService.remove(ids).then((data) => {
+            this.$message.success(data)
+            this.refreshList()
+            this.loading = false
+          })
+        })
+      }
+    }
+  }
+</script>

src/views/luckyDraw/LuckyDrawMemberUpdateForm.vue

@@ -0,0 +1,204 @@
+<template>
+  <div>
+    <el-dialog
+      :title="title"
+      :close-on-click-modal="false"
+      draggable
+      width="1500px"
+      @close="close"
+      @keyup.enter.native="doSubmit"
+      v-model="visible">
+      <el-form size="default" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
+               label-width="100px" @submit.native.prevent>
+        <el-row :gutter="26">
+          <el-col :span="12">
+            <el-form-item label="活动" prop="eventName">
+              <el-input placeholder="活动" v-model="inputForm.eventName" :disabled="true"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="姓名" prop="name">
+              <el-input placeholder="姓名" v-model="inputForm.name"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="手机号" prop="phone">
+              <el-input placeholder="手机号" v-model="inputForm.phone"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门" prop="officeName">
+              <el-select v-model="inputForm.officeName" size="default" placeholder="请选择"  style="width: 100%;">
+                <el-option
+                  v-for="(item, index) in  columnTypes"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-form>
+      <!-- 附件 -->
+		<template #footer>
+			<span class="dialog-footer">
+			  <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
+			  <el-button size="small" type="primary" v-if="method !== 'view'" @click="doSubmit()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
+			</span>
+		</template>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import CollectService from '@/api/materialManagement/CollectService'
+  import LuckyDrawMemberService from '@/api/luckyDraw/LuckyDrawMemberService'
+  import SelectTree from '@/components/treeSelect/treeSelect.vue'
+  import MaterialManagementService from '@/api/materialManagement/MaterialManagementService'
+  export default {
+    data () {
+      return {
+        title: '',
+        method: '',
+        visible: false,
+        loading: false,
+        columnTypes: [
+          {
+            label: '工程一部',
+            value: '工程一部'
+          },
+          {
+            label: '工程二部',
+            value: '工程二部'
+          },
+          {
+            label: '工程三部',
+            value: '工程三部'
+          },
+          {
+            label: '工程四部',
+            value: '工程四部'
+          },
+          {
+            label: '工程五部',
+            value: '工程五部'
+          },
+          {
+            label: '招标代理部',
+            value: '招标代理部'
+          },
+          {
+            label: '兴光评估',
+            value: '兴光评估'
+          },
+          {
+            label: '其他',
+            value: '其他'
+          }
+        ],
+        inputForm: {
+          eventId: '',
+          id: '',
+          officeName: '',
+          eventName: '',
+          phone: '',
+          name: ''
+        }
+      }
+    },
+    CollectService: null,
+    LuckyDrawMemberService: null,
+    MaterialManagementService: null,
+    created () {
+      this.collectService = new CollectService()
+      this.luckyDrawMemberService = new LuckyDrawMemberService()
+      this.materialManagementService = new MaterialManagementService()
+    },
+    props: {
+      businessId: {
+        type: String,
+        default: ''
+      },
+      formReadOnly: {
+        type: Boolean,
+        default: false
+      },
+      status: {
+        type: String,
+        default: ''
+      }
+    },
+    components: {
+      SelectTree
+    },
+    computed: {
+      bus: {
+        get () {
+          return this.businessId
+        },
+        set (val) {
+          this.businessId = val
+        }
+      }
+    },
+    methods: {
+      init (method, id) {
+        this.method = method
+        this.inputForm = {
+          eventId: '',
+          id: '',
+          officeName: '',
+          eventName: '',
+          phone: '',
+          name: ''
+        }
+        if (method === 'add') {
+          this.title = `新建人员信息`
+        } else if (method === 'edit') {
+          this.inputForm.id = id
+          this.title = '修改人员信息'
+        } else if (method === 'view') {
+          this.inputForm.id = id
+          this.title = '查看人员信息'
+        }
+        this.visible = true
+        this.loading = false
+        this.$nextTick(() => {
+          if (method === 'edit' || method === 'view') { // 修改或者查看
+            this.loading = true
+            this.$refs.inputForm.resetFields()
+            this.luckyDrawMemberService.findById(this.inputForm.id).then((data) => {
+              this.inputForm = this.recover(this.inputForm, data)
+              this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
+              this.loading = false
+            })
+          }
+        })
+      },
+      // 表单提交
+      doSubmit () {
+        this.$refs['inputForm'].validate((valid) => {
+          if (valid) {
+            this.loading = true
+            this.luckyDrawMemberService.save(this.inputForm).then((data) => {
+              this.$message.success(data)
+              this.$emit('refreshList')
+              this.loading = false
+              this.close()
+            }).catch(() => {
+              // this.$refs.inputForm.resetFields()
+              this.loading = false
+            })
+          }
+        })
+      },
+      close () {
+        this.$refs.inputForm.resetFields()
+        this.visible = false
+      }
+    }
+  }
+</script>