[add] - 国际研讨会生成随机码功能的开发

2022-06-21 16:02:37 +08:00
parent 00974692c9
commit 05f0b31edc
4 changed files with 523 additions and 2 deletions
@@ -104,6 +104,7 @@
        <span slot="action" slot-scope="text, record" class="action-span-cell">
            <!--会议需要发布才能让企业人员看见 已发布状态禁用按钮 -->
 <!--          <a @click="releaseMeeing(record)" v-has=" 'internalMeeting:release' " :disabled="record.isRelease === 1 ">发布</a>-->
+           <a @click="generateCodePage(record)" v-has="'internalMeeting:randomCode'">随机码</a>
          <a @click="handleUploadFile(record,'1')" v-has=" 'internalMeeting:uploadCouncil' ">会议纪要</a>
          <a @click="handleUploadFile(record,'2')" v-has="'internalMeeting:upload'">上传文件</a>
 <!--          <a @click="handleSignup(record)">报名信息</a>-->
@@ -319,6 +320,15 @@ export default {
      }
      return startValue.valueOf() > endValue.valueOf()
    },
+    // 跳转到生成密码的详情页
+    generateCodePage(record) {
+      this.$router.push({
+        path: '/projectManagement/InternationalSeminarGenerateCode',
+        query: {
+          id: record.id,
+        }
+      })
+    }
  }
 }
 </script>
@@ -0,0 +1,157 @@
+<!-- 国际研讨会 生成随机码页面-->
+<template>
+  <div class="generate-code-container">
+    <page-header-title :is-level-one="false" :level-two-title="title"></page-header-title>
+    <a-card :bordered="false">
+      <!-- 查询区域 -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :xl="8" :lg="8" :md="10" :sm="24">
+              <a-form-item label="嘉宾类型">
+                <j-dict-select-tag placeholder="请选择嘉宾类型" dict-code="guest_type" v-model="queryParam.guestType"></j-dict-select-tag>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="8" :lg="8" :md="10" :sm="24">
+              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                <a-button type="primary" @click="searchQuery" icon="search" v-has="'internationalSeminarGenerateCode:search'">查询</a-button>
+                <a-button @click="searchReset" icon="reload" class="reset-button" style="margin-left: 8px">重置</a-button>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!-- 查询区域-END -->
+      <!-- 操作按钮区域 -->
+      <div class="table-operator">
+        <a-button @click="handleAdd" type="primary" icon="plus" v-has="'internationalSeminarGenerateCode:add'">新增</a-button>
+        <a-button type="primary" icon="download" @click="handleExportXls(meetingInfo.meetingName + '随机码')" v-has="'internationalSeminarGenerateCode:export'">导出</a-button>
+      </div>
+
+
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="randomCodeId"
+        :scroll="{x: 800}"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="false"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        class="j-table-force-nowrap"
+        @change="handleTableChange">
+
+        <template slot="text" slot-scope="text">
+          <a-tooltip>
+            <template slot="title">{{ text }}</template>
+            <div class="table-text">{{ text }}</div>
+          </a-tooltip>
+        </template>
+        <span slot="action" slot-scope="text, record" class="action-span-cell">
+          <a @click="handleEdit(record)" v-has="'internationalSeminarGenerateCode:edit'">编辑</a>
+        </span>
+      </a-table>
+
+    </a-card>
+    <generate-code-modal ref="modalForm" :meeting-id="meetingInfo.id"  @ok="modalFormOk"></generate-code-modal>
+
+  </div>
+</template>
+
+
+<script>
+
+import {getMeetInfoById} from '../../api/incomeMeetingApi'
+import {JeroListMixin} from '@/mixins/JeroListMixin'
+import JDictSelectTag from '@comp/dict/JDictSelectTag'
+import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
+import GenerateCodeModal from './modules/InternationalSeminarGenerateCodeModal'
+export default {
+  name: 'InternationalSeminarGenerateCode',
+  mixins: [JeroListMixin],
+  components: {
+    JDictSelectTag,
+    GenerateCodeModal,
+    PageHeaderTitle
+  },
+  data() {
+    return {
+      // 当前会议的相关信息
+      meetingInfo: {},
+      title: '随机码设置',
+      confirmLoading: false,
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        },
+        {
+          title: '嘉宾类型',
+          align: 'center',
+          dataIndex: 'guestType_dictText',
+          scopedSlots: {customRender: 'text'},
+        },
+        {
+          title: '随机数个数',
+          align: 'center',
+          dataIndex: 'randomCodeCount',
+          width: 120,
+          scopedSlots: {customRender: 'text'}
+        },
+        {
+          title: '使用个数',
+          align: 'center',
+          dataIndex: 'useCount',
+          width: 120,
+          scopedSlots: {customRender: 'text'},
+        },
+        {
+          title: '操作',
+          align: 'center',
+          fixed: 'right',
+          width: 180,
+          scopedSlots: {customRender: 'action'}
+        },
+      ],
+      url: {
+        list: '/meeting/randomCode/page',
+        exportXlsUrl: '/meeting/randomCode/exportXls'
+      },
+    }
+  },
+  mounted() {
+    this.disableMixinCreated = true
+    if(!this.$route.query.id) return
+    this.meetingInfo.id = this.$route.query.id
+    this.getMeetingInfo()
+    this.dataSource = [{}]
+  },
+  methods: {
+    getMeetingInfo() {
+      getMeetInfoById({id: this.meetingInfo.id}).then(res => {
+        if (res.success) {
+          this.meetingInfo = res.result
+          this.title = this.meetingInfo.meetingName + '随机码设置'
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+/*表格滚动条*/
+/deep/.ant-table-body {
+  overflow-x: auto!important;
+}
+
+</style>
@@ -0,0 +1,341 @@
+<!--国际研讨会 生成随机码模态框-->
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="嘉宾类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <j-dict-select-tag
+                placeholder="请选择嘉宾类型"
+                dict-code="guest_type"
+                :triggerChange="true"
+                v-decorator="['guestType', validatorRules.guestType]"
+                :disabled="isEdit"
+              >
+              </j-dict-select-tag>
+            </a-form-item>
+          </a-col>
+
+        </a-row>
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="随机码个数" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input
+                placeholder="请输入数字"
+                v-decorator="['randomCodeCount', validatorRules.randomCodeCount]"
+                :maxLength='50'
+                @change="e => {e.target.value = (e.target.value.replace(/[^0-9.]/g, '')).trim()}"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="8" :sm="12">
+            <a-form-item label="" class="ope-form-item" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-button type="primary" @click="generateCode">生成</a-button>
+              <a-button type="primary" @click="appendCode">追加</a-button>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="randomCode"
+        :scroll="{x:false}"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        class="j-table-force-nowrap"
+        @change="handleTableChange">
+
+        <template slot="text" slot-scope="text">
+          <j-ellipsis v-if="text" :value="text" :length="20"></j-ellipsis>
+          <span v-else></span>
+        </template>
+      </a-table>
+    </a-spin>
+
+  </j-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import {getGeneratedCodeList, generateCode, addGenerateCodeList, editGenerateCodeList} from '../../../api/incomeMeetingApi'
+import {filterObj} from '@/utils/util'
+
+export default {
+  name: 'InternationalSeminarGenerateCodeModal',
+  props: {
+    meetingId: {
+      type: String,
+      default: '',
+      require: true
+    }
+  },
+  data() {
+    return {
+      title: '操作',
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      loading: false, // 表格加载
+      form: this.$form.createForm(this),
+      disableMixinCreated: true,
+      // 工作组发布提醒 表头
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        },
+        {
+          title: '随机码',
+          align: 'center',
+          dataIndex: 'randomCode',
+          scopedSlots: {customRender: 'text'}
+        },
+        {
+          title: '状态',
+          align: 'center',
+          dataIndex: 'useFlag_dictText',
+          width: 200,
+          scopedSlots: {customRender: 'text'}
+        }
+      ],
+      dataSource: [], // 表格中的数据
+      model: {},
+      labelCol: {
+        xs: {span: 24},
+        sm: {span: 6}
+      },
+      wrapperCol: {
+        xs: {span: 24},
+        sm: {span: 18}
+      },
+      validatorRules: {
+        guestType: {
+          rules: [{required: true, message: '请选择嘉宾类型'}],
+          validateTrigger: 'change'
+        },
+        randomCodeCount: {
+          rules: [{required: true, message: '请输入数字'}],
+          validateTrigger: 'blur'
+        }
+      },
+      /* 分页参数 */
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' 共' + total + '条'
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      isEdit: false,
+      otherFilters: {} // 其他的查询条件
+    }
+  },
+  methods: {
+    add() {
+      this.edit({})
+    },
+    edit(record) {
+      this.initData()
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.visible = true
+      if (record.randomCodeId) {
+        this.isEdit = true
+        this.otherFilters.randomCodeId = record.randomCodeId
+        this.loadData()
+      } else {
+        this.isEdit = false
+      }
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'guestType', 'randomCodeCount'))
+      })
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+    },
+    initData() {
+      this.ipagination.pageSize = 10
+      this.ipagination.current = 1
+      this.ipagination.total = 0
+      this.initDataSource = []
+      this.dataSource = []
+    },
+    handleOk() {
+      if (this.confirmLoading || this.loading) {
+        return
+      }
+      if(this.initDataSource.length === 0) {
+        this.$message.warning('请先生成随机码')
+        return
+      }
+      this.form.validateFields(['guestType'], (err, values) => {
+        if(!err) {
+          let params = {
+            guestType: values.guestType,
+            meetingId: this.meetingId, // 会议id
+            randomCodeLinkList: this.initDataSource // 所有的随机码数据 {id:'', randomCode: '', useFlag: '', randomCodeId: ''}
+          }
+          let requestFunc = null
+          if(this.isEdit) {
+            params.randomCodeId = this.model.randomCodeId // 当前随机码列表页数据的id
+            requestFunc = editGenerateCodeList
+          } else {
+            requestFunc = addGenerateCodeList
+          }
+          this.confirmLoading = true
+          requestFunc(params).then(res => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.$emit('ok')
+              this.handleCancel()
+            } else {
+              this.$message.warn(res.message)
+            }
+          }).finally(() => {
+            setTimeout(() => {
+              this.confirmLoading = false
+            }, 1000)
+          })
+        }
+      })
+
+
+    },
+    handleCancel() {
+      this.close()
+    },
+    generateCode() {
+      let _this = this
+      this.form.validateFields(['randomCodeCount'], (err, values) => {
+        if(!err) {
+          // let formData = Object.assign({}, values)
+          let params = {
+            randomCodeCount: values.randomCodeCount
+          }
+          if(_this.isEdit) {
+            params.randomCodeId = this.model.randomCodeId
+          }
+          this.loading = true
+          generateCode(params).then(res => {
+            if(res.success) {
+              this.initDataSource = res.result || []
+              this.handleTableData(this.initDataSource)
+              this.ipagination.total = this.initDataSource.length
+              this.pageChangeLoadData(1)
+            }
+          }).finally(() => {
+            setTimeout(() => {
+              this.loading = false
+            }, 1000)
+          })
+        }
+      })
+      //   请求生成的接口，获取数据后，表格中的数据 直接全部覆盖
+    },
+    // 追加
+    appendCode() {
+      //  追加 新的随机码，生成后直接拼接到表格中
+      this.form.validateFields(['randomCodeCount'], (err, values) => {
+        if(!err) {
+          let params = {
+            randomCodeCount: values.randomCodeCount
+          }
+          this.loading = true
+          generateCode(params).then(res => {
+            if(res.success) {
+              let initDataSource = res.result || []
+              this.handleTableData(initDataSource)
+              this.initDataSource = [...this.initDataSource, ...initDataSource]
+              this.ipagination.total = this.initDataSource.length
+              this.pageChangeLoadData(1)
+            }
+          }).finally(() => {
+            setTimeout(() => {
+              this.loading = false
+            }, 1000)
+          })
+        }
+      })
+
+    },
+    // 处理生成的code数据
+    handleTableData(data) {
+      data.map(tt => {
+        tt.useFlag_dictText = tt.useFlag === 1 && '已使用' || '未使用'
+      })
+    },
+    getQueryParams() {
+      let param = Object.assign({}, this.otherFilters)
+      param.pageNo = -1
+      param.pageSize = -1
+      return filterObj(param)
+    },
+    loadData() {
+      this.loading = true
+      let params = this.getQueryParams() //查询条件
+      getGeneratedCodeList(params).then(res => {
+        if(res.success) {
+          this.initDataSource = res.result.records || res.result
+          this.pageChangeLoadData(1)
+          this.ipagination.total = this.initDataSource.length
+        }
+      }).finally(() => {
+        setTimeout(() => {
+          this.loading = false
+        }, 1000)
+      })
+    },
+    // 处理当前表格中显示数据
+    pageChangeLoadData(arg) {
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let startIndex = (this.ipagination.current - 1) * this.ipagination.pageSize
+      let endIndex = startIndex + this.ipagination.pageSize
+      this.dataSource = this.initDataSource.slice(startIndex, endIndex)
+    },
+    // 分页发生变化时触发
+    handleTableChange(pagination) {
+      this.ipagination = pagination
+      this.pageChangeLoadData()
+    }
+  },
+  created() {
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+.ope-form-item{
+  margin-left: 20px;
+  button + button {
+    margin-left: 20px;
+  }
+}
+
+</style>