|
|
@@ -0,0 +1,328 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ v-loading="saving"
|
|
|
+ @close="closeDialog"
|
|
|
+ title="节目详情"
|
|
|
+ center
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="800px"
|
|
|
+ >
|
|
|
+ <div class="edit-view">
|
|
|
+ <el-form
|
|
|
+ :model="formData"
|
|
|
+ :rules="rules"
|
|
|
+ ref="form"
|
|
|
+ label-width="80px"
|
|
|
+ label-position="right"
|
|
|
+ size="small"
|
|
|
+ style="max-width: 700px;"
|
|
|
+ >
|
|
|
+ <el-timeline>
|
|
|
+ <el-timeline-item placement="top" size="normal" timestamp="节目信息">
|
|
|
+ <el-card shadow="hover" :body-style="{ padding: '20px' }">
|
|
|
+ <el-form-item prop="name" label="节目名称">
|
|
|
+ <el-input v-model="formData.name" class="width" readonly></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="specialtyId" label="参赛专业">
|
|
|
+ <el-input v-model="formData.specialty" class="width" readonly></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="competitionGroup" label="参赛组别">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.competitionGroup"
|
|
|
+ class="width"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ placeholder="请选择"
|
|
|
+ disabled
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in competitionGroupOptions"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="levelSettingId" label="参赛级别" v-if="formData.competitionGroup">
|
|
|
+ <el-input v-model="formData.level" class="width" readonly></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="durationOfWork"
|
|
|
+ label="作品时长"
|
|
|
+ v-if="
|
|
|
+ formData.specialtyId !== 187 &&
|
|
|
+ formData.specialtyId !== 188 &&
|
|
|
+ formData.specialtyId !== 189 &&
|
|
|
+ formData.specialtyId !== 190 &&
|
|
|
+ formData.specialtyId !== 191 &&
|
|
|
+ formData.specialtyId !== 192 &&
|
|
|
+ formData.specialtyId !== 193 &&
|
|
|
+ formData.specialtyId !== 194 &&
|
|
|
+ formData.specialtyId !== 589 &&
|
|
|
+ formData.specialtyId !== 590 &&
|
|
|
+ formData.specialtyId !== 591 &&
|
|
|
+ formData.specialtyId !== 592 &&
|
|
|
+ formData.specialtyId !== 593 &&
|
|
|
+ formData.specialtyId !== 594 &&
|
|
|
+ formData.specialtyId !== 595 &&
|
|
|
+ formData.specialtyId !== 596 &&
|
|
|
+ formData.specialtyId !== 597 &&
|
|
|
+ formData.specialtyId !== 598 &&
|
|
|
+ formData.specialtyId !== 599 &&
|
|
|
+ formData.specialtyId !== 600 &&
|
|
|
+ formData.specialtyId !== 601 &&
|
|
|
+ formData.specialtyId !== 602 &&
|
|
|
+ formData.specialtyId !== 603 &&
|
|
|
+ formData.specialtyId !== 604 &&
|
|
|
+ formData.specialtyId !== 605
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-input v-model="formData.durationOfWork" class="width" readonly></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="instructor" label="指导老师">
|
|
|
+ <el-input v-model="formData.instructor" class="width" readonly></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ formData.specialty == '中国画' ||
|
|
|
+ formData.specialty == '美术' ||
|
|
|
+ formData.specialty == '西画' ||
|
|
|
+ formData.specialty == '书法' ||
|
|
|
+ formData.specialty == '漫画' ||
|
|
|
+ formData.specialty == '手工技艺' ||
|
|
|
+ formData.specialty == '摄影' ||
|
|
|
+ formData.specialty == '篆刻' ||
|
|
|
+ formData.specialty == '人物' ||
|
|
|
+ formData.specialty == '山水' ||
|
|
|
+ formData.specialty == '花鸟' ||
|
|
|
+ formData.specialty == '素描' ||
|
|
|
+ formData.specialty == '速写' ||
|
|
|
+ formData.specialty == '水粉画' ||
|
|
|
+ formData.specialty == '水彩画' ||
|
|
|
+ formData.specialty == '油画' ||
|
|
|
+ formData.specialty == '软笔书法' ||
|
|
|
+ formData.specialty == '硬笔书法' ||
|
|
|
+ formData.specialty == '剪纸' ||
|
|
|
+ formData.specialty == '泥塑' ||
|
|
|
+ formData.specialty == '年画' ||
|
|
|
+ formData.specialty == '皮影制作' ||
|
|
|
+ formData.specialty == '陶艺' ||
|
|
|
+ formData.specialty == '染织' ||
|
|
|
+ formData.specialty == '版画'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-form-item prop="annex" v-if="formData.annex" label="作品图片">
|
|
|
+ <img class="imgBox" :src="formData.annex" alt="" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-form-item prop="video" label="作品视频" v-if="formData.video">
|
|
|
+ <video-upload v-model="videos" class="width" :readonly="true"></video-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-timeline-item>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div v-show="showMore">
|
|
|
+ <el-timeline-item placement="top" size="normal" timestamp="单位信息">
|
|
|
+ <el-card shadow="hover" :body-style="{ padding: '20px' }">
|
|
|
+ <el-form-item prop="gradingOrganizationId" label="考级机构">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.gradingOrganization"
|
|
|
+ class="width"
|
|
|
+ readonly
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="organizationId" label="承办单位">
|
|
|
+ <el-input v-model="formData.organization" class="width" readonly></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="examPoint" label="考级点">
|
|
|
+ <el-input v-model="formData.examPoint" class="width" readonly></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="contact" label="联系人">
|
|
|
+ <el-input v-model="formData.contact" class="width" readonly></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="phone" label="联系电话">
|
|
|
+ <el-input v-model="formData.phone" class="width" readonly></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-card>
|
|
|
+ </el-timeline-item>
|
|
|
+
|
|
|
+ <el-timeline-item placement="top" size="normal" timestamp="参演人员">
|
|
|
+ <el-card shadow="hover" :body-style="{ padding: '20px' }">
|
|
|
+ <el-table
|
|
|
+ :data="participants"
|
|
|
+ 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"
|
|
|
+ >
|
|
|
+ <el-table-column prop="img" label="证件照">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-image
|
|
|
+ style="width: 30px; height: 30px;"
|
|
|
+ :src="row.img"
|
|
|
+ fit="cover"
|
|
|
+ :preview-src-list="[row.img]"
|
|
|
+ ></el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="姓名" min-width="80"> </el-table-column>
|
|
|
+ <el-table-column prop="birthday" label="出生年月" min-width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="sex" label="性别" min-width="70"> </el-table-column>
|
|
|
+ <el-table-column prop="phone" label="联系方式" min-width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="certificate" label="考级证书">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-image
|
|
|
+ style="width: 30px; height: 30px;"
|
|
|
+ :src="row.certificate"
|
|
|
+ fit="cover"
|
|
|
+ :preview-src-list="[row.certificate]"
|
|
|
+ ></el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="idNo" label="身份证号" min-width="100">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </el-timeline-item>
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ <div style="width:100%;textAlign:center">
|
|
|
+ <el-button
|
|
|
+ class="more"
|
|
|
+ round
|
|
|
+ type="primary"
|
|
|
+ :plain="!showMore"
|
|
|
+ :icon="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
|
|
|
+ @click="showMore = !showMore"
|
|
|
+ ></el-button>
|
|
|
+ </div>
|
|
|
+ </el-timeline>
|
|
|
+ <!-- <el-form-item> </el-form-item> -->
|
|
|
+ </el-form>
|
|
|
+ <!-- <div class="btn">
|
|
|
+ <el-button @click="$router.go(-1)">返回</el-button>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import delChild from '@/mixins/delChild';
|
|
|
+import { mapState } from 'vuex';
|
|
|
+export default {
|
|
|
+ name: 'ProgrammeShow',
|
|
|
+ mixins: [delChild],
|
|
|
+ props: ['dialogVisible'],
|
|
|
+ created() {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ saving: false,
|
|
|
+ formData: {},
|
|
|
+ show: false,
|
|
|
+ showMore: false,
|
|
|
+ videos: {},
|
|
|
+ level: '',
|
|
|
+ rules: {
|
|
|
+ phone: [
|
|
|
+ {
|
|
|
+ pattern: /^1[3-9]\d{9}$/,
|
|
|
+ message: '请输入正确的手机号',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ competitionGroupOptions: [
|
|
|
+ { label: '个人', value: 'SINGLE' },
|
|
|
+ { label: '集体', value: 'COLLECTIVE' }
|
|
|
+ ],
|
|
|
+ levelSingleOptions: [],
|
|
|
+ levelCollectiveOptions: [],
|
|
|
+ gradingOrganizationIdOptions: [],
|
|
|
+ organizationIdOptions: [],
|
|
|
+ artTypes: [],
|
|
|
+ optionProps: {
|
|
|
+ value: 'id',
|
|
|
+ label: 'name',
|
|
|
+ children: 'children',
|
|
|
+ multiple: false,
|
|
|
+ emitPath: false,
|
|
|
+ checkStrictly: true,
|
|
|
+ expandTrigger: 'hover'
|
|
|
+ },
|
|
|
+ participants: [],
|
|
|
+ programmeId: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ dataApi(id) {
|
|
|
+ if (id) {
|
|
|
+ this.$http
|
|
|
+ .get('programme/getShow/' + id)
|
|
|
+ .then(res => {
|
|
|
+ this.formData = res;
|
|
|
+ this.participants = res.participants;
|
|
|
+ // console.log(res);
|
|
|
+ this.videos = {
|
|
|
+ src: res.video
|
|
|
+ };
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.$message.error(e.error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ closeDialog() {
|
|
|
+ this.$emit('close');
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.edit-view {
|
|
|
+ padding: 0 0;
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+.width {
|
|
|
+ width: 260px;
|
|
|
+}
|
|
|
+// /deep/ .el-timeline-item {
|
|
|
+// padding-bottom: 35px;
|
|
|
+// }
|
|
|
+.imgBox {
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+.btn {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ z-index: 999;
|
|
|
+ margin-left: -20px;
|
|
|
+ padding-left: 20px;
|
|
|
+}
|
|
|
+/deep/.el-input.is-disabled .el-input__inner {
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+/deep/.el-timeline-item__timestamp {
|
|
|
+ color: #0561d9;
|
|
|
+ line-height: 1;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+/deep/.el-timeline-item__node {
|
|
|
+ background-color: #5b9bed;
|
|
|
+}
|
|
|
+/deep/.el-timeline-item__tail {
|
|
|
+ border-left: 2px solid #7cace9;
|
|
|
+}
|
|
|
+</style>
|