|
|
@@ -0,0 +1,303 @@
|
|
|
+<template>
|
|
|
+ <div class="list-view">
|
|
|
+ <div class="filters-container">
|
|
|
+ <el-form :model="form" inline label-width="100px">
|
|
|
+ <el-row>
|
|
|
+ <el-form-item label="展演活动名称">
|
|
|
+ <el-select
|
|
|
+ v-model="performanceId"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ placeholder="展演活动名称"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in performances"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="活动日期">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="活动地点">
|
|
|
+ <el-select v-model="form.address">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in addresses"
|
|
|
+ :key="index"
|
|
|
+ :value="item"
|
|
|
+ :label="item"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="签到状态">
|
|
|
+ <el-select v-model="form.signedIn">
|
|
|
+ <el-option
|
|
|
+ v-for="item in signedInOptions"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :key="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="getData" type="primary" icon="el-icon-search">搜索 </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ row-key="id"
|
|
|
+ ref="table"
|
|
|
+ header-row-class-name="table-header-row"
|
|
|
+ header-cell-class-name="table-header-cell"
|
|
|
+ row-class-name="table-row"
|
|
|
+ cell-class-name="table-cell"
|
|
|
+ :height="tableHeight"
|
|
|
+ >
|
|
|
+ <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
|
|
|
+ <!-- <el-table-column prop="id" label="ID" width="100"> </el-table-column> -->
|
|
|
+ <el-table-column prop="arrangeName" label="分组" min-width="160"> </el-table-column>
|
|
|
+ <el-table-column prop="gradingOrganization" label="考级机构" show-overflow-tooltip min-width="160">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="organization" label="承办单位" min-width="160"> </el-table-column>
|
|
|
+ <el-table-column prop="name" label="节目名称" min-width="70"> </el-table-column>
|
|
|
+ <el-table-column label="表演时间" min-width="70"> </el-table-column>
|
|
|
+ <el-table-column prop="quantity" label="表演人数" min-width="70"> </el-table-column>
|
|
|
+ <el-table-column prop="contact" label="联系人" min-width="68"> </el-table-column>
|
|
|
+ <el-table-column prop="phone" label="联系电话" min-width="95"> </el-table-column>
|
|
|
+ <el-table-column prop="writerDirector" label="编导姓名"> </el-table-column>
|
|
|
+ <el-table-column prop="writerPhone" label="联系电话"> </el-table-column>
|
|
|
+ <el-table-column prop="signedIn" label="状态" :formatter="signedInFormatter"> </el-table-column>
|
|
|
+ <el-table-column label="操作" align="left" fixed="right" min-width="100">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-button @click="showSign(row)" size="mini" plain type="primary">签到处理</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="pagination-wrapper">
|
|
|
+ <!-- <div class="multiple-mode-wrapper">
|
|
|
+ <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
|
|
|
+ <el-button-group v-else>
|
|
|
+ <el-button @click="operation1">批量操作1</el-button>
|
|
|
+ <el-button @click="operation2">批量操作2</el-button>
|
|
|
+ <el-button @click="toggleMultipleMode(false)">取消</el-button>
|
|
|
+ </el-button-group>
|
|
|
+ </div> -->
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ @size-change="onSizeChange"
|
|
|
+ @current-change="onCurrentChange"
|
|
|
+ :current-page="page"
|
|
|
+ :page-sizes="[10, 20, 30, 40, 50]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="totalElements"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog title="签到处理" :visible.sync="dialogSign" width="600px" center>
|
|
|
+ <el-form :form="signForm" label-width="100px">
|
|
|
+ <el-form-item label="签到处理">
|
|
|
+ <el-select v-model="signForm.signedIn">
|
|
|
+ <el-option
|
|
|
+ v-for="item in signedInOptions"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :key="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="情况说明">
|
|
|
+ <el-input v-model="signForm.description" type="textarea" :rows="5" style="width: 400px"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="signIn">确定</el-button>
|
|
|
+ <el-button @click="dialogSign = false">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import delChild from '@/mixins/delChild';
|
|
|
+import { mapState } from 'vuex';
|
|
|
+import pageableTable from '@/mixins/pageableTable';
|
|
|
+import QrcodeVue from 'qrcode.vue';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ProgrammeScoreList',
|
|
|
+ mixins: [pageableTable, delChild],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ multipleMode: false,
|
|
|
+ search: '',
|
|
|
+ url: '/programme/byArrange',
|
|
|
+ downloading: false,
|
|
|
+ form: {},
|
|
|
+ dialogSign: false,
|
|
|
+ performanceId: '',
|
|
|
+ performances: [],
|
|
|
+ signedInOptions: [
|
|
|
+ { label: '已签到', value: 'SIGNED_IN' },
|
|
|
+ { label: '未签到', value: 'UNSIGNED' },
|
|
|
+ { label: '已调整', value: 'ADJUSTED' }
|
|
|
+ ],
|
|
|
+ signForm: {},
|
|
|
+ addresses: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$http
|
|
|
+ .post(
|
|
|
+ '/performance/all',
|
|
|
+ {
|
|
|
+ size: 1000,
|
|
|
+ sort: 'year,desc',
|
|
|
+ query: {
|
|
|
+ publish: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { body: 'json' }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ if (res.content.length > 0) {
|
|
|
+ res.content.forEach(item => {
|
|
|
+ this.performances.push({
|
|
|
+ label: item.name,
|
|
|
+ value: item.id
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.$message.error(e.error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ selection() {
|
|
|
+ return this.$refs.table.selection.map(i => i.id);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ signedInFormatter(row, column, cellValue, index) {
|
|
|
+ let selectedOption = this.signedInOptions.find(i => i.value === cellValue);
|
|
|
+ if (selectedOption) {
|
|
|
+ return selectedOption.label;
|
|
|
+ }
|
|
|
+ return '';
|
|
|
+ },
|
|
|
+ beforeGetData() {
|
|
|
+ let data = {
|
|
|
+ query: {}
|
|
|
+ };
|
|
|
+ if (this.performanceId) {
|
|
|
+ data.query.performanceId = this.performanceId;
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ toggleMultipleMode(multipleMode) {
|
|
|
+ this.multipleMode = multipleMode;
|
|
|
+ if (!multipleMode) {
|
|
|
+ this.$refs.table.clearSelection();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showSign(row) {
|
|
|
+ this.dialogSign = true;
|
|
|
+ this.signForm.id = row.id;
|
|
|
+ },
|
|
|
+ operation1() {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: this.selection
|
|
|
+ });
|
|
|
+ },
|
|
|
+ operation2() {
|
|
|
+ this.$message('操作2');
|
|
|
+ },
|
|
|
+ signIn() {
|
|
|
+ this.$alert('确认签到？', '提示', { type: 'primary' })
|
|
|
+ .then(() => {
|
|
|
+ return this.$http.post('/programme/signIn', {
|
|
|
+ id: this.signForm.id,
|
|
|
+ signedIn: this.signForm.signedIn,
|
|
|
+ description: this.signForm.description
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$message.success('签到成功');
|
|
|
+ this.dialogSign = false;
|
|
|
+ this.getData();
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ if (e !== 'cancel') {
|
|
|
+ this.$message.error(e.error);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.right {
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+/deep/.el-form-item--mini.el-form-item,
|
|
|
+.el-form-item--small.el-form-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.videoDialog {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .el-dialog {
|
|
|
+ max-width: 900px;
|
|
|
+ margin-top: 0px;
|
|
|
+
|
|
|
+ .close {
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ top: -42px;
|
|
|
+ width: 71px;
|
|
|
+ height: 32px;
|
|
|
+ background: #00000015;
|
|
|
+
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fdffff;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #00000055;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog__header {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ video {
|
|
|
+ display: block;
|
|
|
+ height: auto;
|
|
|
+ width: 100%;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
