epmet-work-pc/src/views/modules/volunteer/activityArchive/add.vue

<template>
    <div>
        <div class="dialog-h-content scroll-h"
            style="display: flex; flex-direction: row; justify-content:space-between; padding: 20px;">
            <div style="width: 49%; ">
                <el-form ref="ref_form" :inline="true" :model="formData" :rules="dataRule" class="form">
                    <el-form-item label="主办方" prop="sponsor" required>
                        <el-select v-model.trim="formData.sponsor" placeholder="请选择" clearable>
                            <el-option v-for="item in sponsorList" :key="item.nametypeName" :label="item.typeName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动标题" prop="activityName">
                        <el-input type="textarea" placeholder="请输入活动标题，不超过50子" v-model="formData.activityName" maxlength="50"
                            show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="活动详情" prop="content" style="display: block">
                        <div class="item_width_1">
                            <Tinymce class="tinymce_view " v-model.trim="formData.content" :height="250"
                                placeholder="请输入活动内容" />
                        </div>
                    </el-form-item>
                    <el-form-item label="图片" prop="coverPic">
                        <el-upload action="#" list-type="picture-card" :auto-upload="false">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleDownload(file)">
                                        <i class="el-icon-download"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item label="活动时间" prop="activeTime">
                        <el-date-picker v-model.trim="formData.activeTime" type="datetimerange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" @change="handleTimeChange">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="活动名额" prop="points">
                        <div style="display: flex; flex-direction: column;">
                            <el-input-number vdisabled="radio === '1'? true:false" v-model.trim="formData.points" @change="handleChange" :min="1" :max="10"
                                label="描述文字"></el-input-number>
                            <el-radio style="margin-top: 20px;" v-model="radio" label="1">不限名额</el-radio>
                        </div>
                    </el-form-item>
                    <el-form-item label="活动类型" prop="typeId" required>
                        <el-select v-model.trim="formData.typeId" placeholder="请选择" clearable>
                            <el-option v-for="item in typeList" :key="item.nametypeName" :label="item.typeName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" 联系人" prop="contacts">
                        <el-input v-model="formData.contacts" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label=" 联系电话" prop="phone">
                        <el-input v-model="formData.phone" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div style="width: 49%;">
                <el-form ref="ref_form" :inline="true" :model="formData" :rules="dataRule" class="form">
                    <div>
                        <el-form-item label="活动积分" prop="integral">
                            <el-input-number v-model="formData.integral" @change="handleChange" :min="1" :max="10"
                                label="描述文字"></el-input-number>
                        </el-form-item>

                        <!-- <el-form-item label="所属项目" prop="typeId" required>
                            <el-select class="item_width_1" v-model.trim="formData.typeId" placeholder="请选择" clearable>
                                <el-option v-for="item in typeList" :key="item.nametypeName" :label="item.typeName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="报名条件" prop="condition" style="display: block">
                            <div class="item_width_1">
                                <Tinymce class="tinymce_view " v-model.trim="formData.condition" :height="250"
                                    placeholder="请输入活动内容" />
                            </div>
                        </el-form-item>
                        <el-form-item label="签到时间" prop="Checktime">
                        <el-date-picker v-model.trim="formData.Checktime" type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择签到时间"
                            style="width:280px">
                        </el-date-picker>
                    </el-form-item>
                        <el-form-item label="报名截止时间" prop="deadline" >
                            <el-date-picker v-model="formData.deadline" type="datetime" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item v-if="formType!=='records'" label="上线" style="display: block" prop="peopleCount">
                            <el-switch v-model="online" @change="handleOnlineRegistration"></el-switch>
                        </el-form-item>
                    </div>
                    <el-form-item label="赞助单位" prop="sponsor">
                        <el-input v-model="formData.sponsor" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label=" 联系电话" prop="number">
                        <el-input v-model="formData.number" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="活动地点" prop="address" style="display: block">
                        <div >
                            <el-select v-model.trim="formData.number" filterable  remote
                                :reserve-keyword="true" placeholder="请输入关键词" :remote-method="remoteMethod"
                                :loading="loading">
                                <el-option v-for="(item, index) in searchOptions" @click.native="handleClickKey(index)"
                                    :key="item.value || index" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                            <div id="app_activity" class="div_map"></div>
                        </div>
                    </el-form-item>
                </el-form>

            </div>
        </div>
        <div class="div_btn1">
            <el-button size="small" @click="handleCancle">取 消</el-button>
            <el-button size="small" v-if="formType != 'detail'" type="primary" :disabled="btnDisable"
                @click="handleComfirm">确 定</el-button>

        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost, requestGet } from '@/js/dai/request'
import fileList from '@/views/components/fileList'
import Tinymce from '@c/tinymce2/index.vue'
let loading // 加载动画
export default {
  data () {
    return {

      btnDisable: false,
      formData: {
        online:true,
        activityName:"",
        content:"",
        file:"",
        activeTime:"",
        points:"",
        radio:"",
        contacts:"",
        integral:"",
        condition:"",
        
      },
      fileList: [],
      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile',

    }
  },
  watch: {
    "formData.holdTime": function (val) {
      let array = val.split('-')
      this.formData.holdYearId = array[0]
      this.formData.holdMonthId = array[0] + array[1]
    }
  },
  components: { fileList,Tinymce },
  async mounted () {
    this.startLoading()
    await this.loadInfo()
    this.endLoading()
  },

  methods: {
    async loadInfo () {
      const url = `/resi/partymember/icPartyAct/act-detail/${this.icPartyActId}`;
      // const url = `http://yapi.elinkservice.cn/mock/245/resi/partymember/icPartyAct/act-detail/${this.icPartyActId}`;

      let params = {}

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.formData = { ...data }
        this.formData.publichIdArray = []
        if (data.publishOrgPathShow) {
          this.formData.publichIdArray = data.publishOrgPathShow.split(':')
        } else {
          let array = data.publishOrgPath.split(':')
          array.forEach(element => {
            if (this.isInTree(element)) {
              this.formData.publichIdArray.push(element)
            }

          });
        }

        this.formData.joinIdArray = []
        this.formData.joinNames = ''
        data.joinOrgList.forEach(element => {
          if (element.joinOrgPathShow) {
            this.formData.joinIdArray.push(element.joinOrgPathShow.split(':'))
          } else {
            let array = element.joinOrgPath.split(':')
            let joinIdTemp = []
            array.forEach(element => {
              if (this.isInTree(element)) {
                joinIdTemp.push(element)
              }

            });

            this.formData.joinIdArray.push(joinIdTemp)
          }

          this.formData.joinNames = this.formData.joinNames + element.joinOrgName + ','

        });

        console.log('info-joinIdArray', this.formData.joinIdArray)

        if (this.formData.joinNames) {
          this.formData.joinNames = this.formData.joinNames.substring(0, this.formData.joinNames.length - 1)
        }

        this.fileList = [... this.formData.attachmentList]

      } else {
        this.$message.error(msg)
      }
    },

    //剔除树上没有的id
    isInTree (id) {
      let inTree = false
      const fn = (obj) => {
        if (Array.isArray(obj)) {


          obj.forEach((item) => {
            //  
            if (item.id === id) {
              inTree = true
            } else {

            }

            fn(item.children);
          });

        }


      };
      fn(this.publishOptions);
      return inTree

    },






    handlePreview (src) {
      console.log(src)
      if (src) {
        window.open(src);
      }
    },


    beforeUpload (file) {
      const array = file.name.split('.')
      const extension = array[array.length - 1]

      const formatarray = ['jpg', 'png', 'jpeg', 'bmp', 'mp4', 'wma', 'm4a', 'mp3', 'doc', 'docx', 'xls', 'xlsx', 'pdf']

      if (formatarray.indexOf(extension) === -1) {
        this.$message.error('只支持图片、word、pdf')
        return false
      }

    },

    handleFileRemove (file) {

      if (file && file.status === "success") {
        this.fileList.splice(this.fileList.findIndex(item => item.uid === file.uid), 1)
      }
    },

    handleFileSuccess (res, file) {

      if (res.code === 0 && res.msg === 'success') {
        const array = file.name.split('.')
        const fileType = array[array.length - 1]

        const picArray = ['jpg', 'png', 'jpeg', 'bmp']
        const videoarray = ['mp4', 'wma', 'm4a']
        const docArray = ['doc', 'docx', 'xls', 'xlsx', 'pdf']
        const mp3Array = ['mp3']

        if (picArray.indexOf(fileType) > -1) {
          file.format = 'image'
        } else if (videoarray.indexOf(fileType) > -1) {
          file.format = 'video'
        } else if (docArray.indexOf(fileType) > -1) {
          file.format = 'doc'
        } else if (mp3Array.indexOf(fileType) > -1) {
          file.format = 'voice'
        }

        file.url = res.data.url
        file.type = fileType

        // file.attachmentName = file.name
        // file.attachmentType = file.type
        // file.attachmentUrl = file.url
        file.format = file.attachmentFormat


        this.fileList.push(file)
        console.log(this.fileList)
      } else this.$message.error(res.msg)
    },
    //下载
    handleFileDownload (file) {
      var a = document.createElement('a');
      var event = new MouseEvent('click');
      a.download = file.name;
      a.href = file.url;
      a.dispatchEvent(event);


    },
    handleCancle () {

      this.$emit('diaDetailClose')

    },



    resetData () {

      this.formData = {
        icPartyActId: '',//编辑活动时必传	
        actType: '',//	活动类型，来源于活动类型接口value	
        holdYearId: '',//活动开始时间所属年份：yyyy	
        holdMonthId: '',//活动开始时间所属月份：yyyyMM	
        holdTime: '',//活动开始时间：yyyy-MM-dd HH:mm:ss	
        topic: '',//	活动主题	
        address: '',//	活动地址	
        latitude: '',//活动地点纬度	
        longitude: '',//	活动地点经度	
        autoPublicType: '',//自动发布时间key; 来源于字典表接口	
        publishPartyOrgId: '',//	发布活动党组织id	
        publishPartyOrgName: '',//	发布活动党组织名称	
        publishOrgPid: '',//	参加活动党组织ID的上级节点	
        publishOrgType: '',//党组织类型 0省委,1市委,2区委,3党工委,4党委,5支部；6党小组	
        publishOrgPathShow: '',//PUBLISH_PARTY_ORG_ID的全路径，包含自身。方便前端回显	
        joinUserType: '',//参加人员类型，0：全体党员；1：支部委员	
        isAutoInform: '',//	是否自动通知参加人员，0否；1是	
        introduce: '',//	活动介绍
        joinOrgList: [],
        attachmentList: [],
        joinIdArray: [],
        publichIdArray: []

      }

    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    dataRule () {
      return {

        actType: [
          { required: true, message: '活动类型不能为空', trigger: 'change' },
        ],
        holdTime: [
          { required: true, message: '活动举办时间不能为空', trigger: 'change' }
        ],

        topic: [
          { required: true, message: '活动主题不能为空', trigger: 'change' }
        ],
        address: [
          { required: true, message: '活动地点不能为空', trigger: 'change' }
        ],
        autoPublicType: [
          { required: true, message: '自动发布时间不能为空', trigger: 'change' }
        ],
        joinUserType: [
          { required: true, message: '参加人员不能为空', trigger: 'change' }
        ],
        joinIdArray: [
          { required: true, message: '参加活动党组织不能为空', trigger: 'change' }
        ],
        publichIdArray: [
          { required: true, message: '发布活动党组织不能为空', trigger: 'change' }
        ],

      }
    },


  },
  props: {

    formType: { //表单操作类型 add新增，edit编辑，detail详情
      type: String,
      required: ''
    },
    icPartyActId: {
      type: String,
      required: ''
    },
    defaultTime: {
      type: String,
      required: ''
    },

  }
}
</script>
<style lang="scss" scoped>
.div_btn1{
    width: 100%;
    display: flex;
    justify-items: center;
}
</style>