|
|
@@ -0,0 +1,444 @@
|
|
|
+<template>
|
|
|
+ <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"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="specialtyId" label="参赛专业">
|
|
|
+ <el-cascader
|
|
|
+ class="width"
|
|
|
+ ref="artCascader"
|
|
|
+ v-model="formData.specialtyId"
|
|
|
+ :props="optionProps"
|
|
|
+ :options="artTypes"
|
|
|
+ :show-all-levels="false"
|
|
|
+ placeholder="请选择专业"
|
|
|
+ >
|
|
|
+ </el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="competitionGroup" label="参赛组别">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.competitionGroup"
|
|
|
+ class="width"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in competitionGroupOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="levelSettingId" label="参赛级别" v-if="formData.competitionGroup">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.levelSettingId"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ placeholder="请选择"
|
|
|
+ class="width"
|
|
|
+ v-if="formData.competitionGroup == 'SINGLE'"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in levelSingleOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ <span style="float: left">{{ item.label }}</span>
|
|
|
+ <span style="float: right; color: #8492a6; font-size: 13px">{{ item.desc }}</span>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ v-model="formData.levelSettingId"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ placeholder="请选择"
|
|
|
+ class="width"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in levelCollectiveOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ <span style="float: left">{{ item.label }}</span>
|
|
|
+ <span style="float: right; color: #8492a6; font-size: 13px">{{ item.desc }}</span>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="durationOfWork" label="作品时长">
|
|
|
+ <el-input v-model="formData.durationOfWork" class="width"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="instructor" label="指导老师">
|
|
|
+ <el-input v-model="formData.instructor" class="width"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="video" label="作品视频">
|
|
|
+ <video-upload v-model="formData.video" class="width"></video-upload>
|
|
|
+ </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-form-item prop="gradingOrganizationId" label="考级机构">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.gradingOrganizationId"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ placeholder="请选择"
|
|
|
+ class="width"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in gradingOrganizationIdOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="organizationId" label="承办单位">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.organizationId"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ placeholder="请选择"
|
|
|
+ class="width"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in organizationIdOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="examPoint" label="考级点">
|
|
|
+ <el-input v-model="formData.examPoint" class="width"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="contact" label="联系人">
|
|
|
+ <el-input v-model="formData.contact" class="width"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="phone" label="联系电话">
|
|
|
+ <el-input v-model="formData.phone" class="width"></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="name" label="姓名" min-width="100"> </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="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>
|
|
|
+ </el-card>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="$router.go(-1)">返回</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import delChild from '@/mixins/delChild';
|
|
|
+import { mapState } from 'vuex';
|
|
|
+export default {
|
|
|
+ name: 'ProgrammeShow',
|
|
|
+ mixins: [delChild],
|
|
|
+ created() {
|
|
|
+ if (this.$route.query.id) {
|
|
|
+ this.$http
|
|
|
+ .get('programme/get/' + this.$route.query.id)
|
|
|
+ .then(res => {
|
|
|
+ this.formData = res;
|
|
|
+
|
|
|
+ this.$http
|
|
|
+ .post(
|
|
|
+ '/participant/all',
|
|
|
+ { size: 100, query: { programmeId: this.$route.query.id } },
|
|
|
+ { body: 'json' }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ this.participants = res.content;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.$message.error(e.error);
|
|
|
+ });
|
|
|
+ } else if (this.organization) {
|
|
|
+ this.formData.organizationId = this.organization.id;
|
|
|
+ this.formData.contact = this.organization.owner;
|
|
|
+ this.formData.phone = this.organization.ownerPhone;
|
|
|
+ if (this.organization.gradingOrganizationId.length > 0) {
|
|
|
+ this.formData.gradingOrganizationId = this.organization.gradingOrganizationId[0];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$http
|
|
|
+ .post('/setting/byFlag', { flag: 3 })
|
|
|
+ .then(res => {
|
|
|
+ if (res.length > 0) {
|
|
|
+ res.forEach(item => {
|
|
|
+ this.levelSingleOptions.push({
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ desc: item.code
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.$message.error(e.error);
|
|
|
+ });
|
|
|
+ this.$http
|
|
|
+ .post('/setting/byFlag', { flag: 4 })
|
|
|
+ .then(res => {
|
|
|
+ if (res.length > 0) {
|
|
|
+ res.forEach(item => {
|
|
|
+ this.levelCollectiveOptions.push({
|
|
|
+ label: item.name,
|
|
|
+ value: item.id,
|
|
|
+ desc: item.code
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.$message.error(e.error);
|
|
|
+ });
|
|
|
+ this.$http
|
|
|
+ .post('/gradingOrganization/all', { size: 1000, query: { del: false } }, { body: 'json' })
|
|
|
+ .then(res => {
|
|
|
+ if (res.content.length > 0) {
|
|
|
+ res.content.forEach(item => {
|
|
|
+ this.gradingOrganizationIdOptions.push({
|
|
|
+ label: item.name,
|
|
|
+ value: item.id
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.$message.error(e.error);
|
|
|
+ });
|
|
|
+ this.$http
|
|
|
+ .post('/organization/all', { size: 1000, query: { del: false } }, { body: 'json' })
|
|
|
+ .then(res => {
|
|
|
+ if (res.content.length > 0) {
|
|
|
+ res.content.forEach(item => {
|
|
|
+ this.organizationIdOptions.push({
|
|
|
+ label: item.name,
|
|
|
+ value: item.id
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.$message.error(e.error);
|
|
|
+ });
|
|
|
+ this.$http
|
|
|
+ .post('/artType/allList')
|
|
|
+ .then(res => {
|
|
|
+ this.artTypes = this.delChild(res);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ saving: false,
|
|
|
+ formData: {},
|
|
|
+ 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: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['organization']),
|
|
|
+ saveOtherJson() {
|
|
|
+ return [...this.participants]
|
|
|
+ .filter(item => {
|
|
|
+ return !!item.name || !!item.sex || !!item.phone;
|
|
|
+ })
|
|
|
+ .map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ programmeId: this.programmeId
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ // return JSON.stringify(participants);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSave() {
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.submit();
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ let data = { ...this.formData };
|
|
|
+
|
|
|
+ this.saving = true;
|
|
|
+ this.$http
|
|
|
+ .post('/programme/save', data, { body: 'json' })
|
|
|
+ .then(res => {
|
|
|
+ this.saving = false;
|
|
|
+
|
|
|
+ this.programmeId = res.id;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$http.post('/participant/batchSave', this.saveOtherJson, { body: 'json' });
|
|
|
+ });
|
|
|
+ this.$message.success('成功');
|
|
|
+ this.$router.go(-1);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.saving = false;
|
|
|
+ this.$message.error(e.error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onDelete() {
|
|
|
+ this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
|
|
|
+ .then(() => {
|
|
|
+ return this.$http.post(`/programme/del/${this.formData.id}`);
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$message.success('删除成功');
|
|
|
+ this.$router.go(-1);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ if (e !== 'cancel') {
|
|
|
+ console.log(e);
|
|
|
+ this.$message.error((e || {}).error || '删除失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onAddOtherForm() {
|
|
|
+ console.log(this.participants.length);
|
|
|
+ if (this.formData.competitionGroup == 'SINGLE' && this.participants.length > 0) {
|
|
|
+ this.$alert('单人组别只能添加一个参赛人员信息', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ callback: action => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '添加失败'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.participants.push({
|
|
|
+ name: '',
|
|
|
+ sex: '',
|
|
|
+ birthday: '',
|
|
|
+ phone: '',
|
|
|
+ img: ''
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onDeleteOtherForm(info, index) {
|
|
|
+ this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'warning' })
|
|
|
+ .then(() => {
|
|
|
+ const schedules = [...this.schedules];
|
|
|
+ if (info.id) {
|
|
|
+ info.del = true;
|
|
|
+ schedules[index] = info;
|
|
|
+ } else {
|
|
|
+ schedules.splice(index, 1);
|
|
|
+ }
|
|
|
+ this.schedules = schedules;
|
|
|
+ this.$message.success('删除成功');
|
|
|
+ })
|
|
|
+ .catch(e => {});
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.edit-view {
|
|
|
+ padding: 0 0;
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+.add-con {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ width: 100%;
|
|
|
+ margin: 7px 0;
|
|
|
+ padding-top: 14px;
|
|
|
+}
|
|
|
+.width {
|
|
|
+ width: 260px;
|
|
|
+}
|
|
|
+</style>
|
