dvcp_v2_webapp/project/pingchang/apps/AppCommunityMember/Add.vue

<template>
  <ai-detail class="Add">
    <ai-title slot="title" title="发起活动" isShowBack isShowBottomBorder @onBackClick="cancel"/>
    <template slot="content">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
        <ai-card title="活动信息">
          <template #content>
            <div class="ai-form">
              <el-form-item label="发布地区" prop="areaId" style="width: 100%">
                <ai-area-select
                  clearable
                  :instance="instance"
                  v-model="form.areaId"
                  @fullname="v => form.areaName = v"
                  always-show
                  area-level="5"
                  :disabledLevel="disabledLevel"
                />
              </el-form-item>
              <el-form-item label="标题" prop="title" style="width: 100%">
                <el-input
                  size="small"
                  v-model="form.title"
                  placeholder="请输入..."
                  clearabel
                  :maxLength="60"
                ></el-input>
              </el-form-item>
              <el-form-item label="活动地点" prop="address" style="width: 100%">
                <el-input
                  size="small"
                  v-model="form.address"
                  placeholder="请输入..."
                  clearabel
                  :maxLength="20"
                ></el-input>
              </el-form-item>
              <el-form-item label="参与名额" prop="total" style="width: 100%">
                <el-input-number v-model="form.total" :min="0" :max="1000" size="small"></el-input-number>
                <span class="text">*0表示不限制活动报名人数</span>
              </el-form-item>
              <el-form-item label="活动时间" prop="activeTimeList" style="width: 50%">
                <el-date-picker size="small" :picker-options="pickerOptions"
                  v-model="form.activeTimeList"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="报名截止时间" prop="stopSignupTime" style="width: 50%">
                <el-date-picker size="small" :picker-options="pickerOptions"
                  v-model="form.stopSignupTime"
                  type="date"
                  style="width: 100%"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="联系人" prop="contactPerson" style="width: 50%">
                <el-input
                  size="small"
                  v-model="form.contactPerson"
                  placeholder="请输入..."
                  clearabel
                  :maxLength="10"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="contactPhone" style="width: 50%">
                <el-input
                  size="small"
                  v-model="form.contactPhone"
                  placeholder="请输入..."
                  clearabel
                  :maxLength="11"
                ></el-input>
              </el-form-item>
              <el-form-item label="活动介绍" prop="content" style="width: 100%">
                <ai-editor v-model="form.content" :instance="instance" />
              </el-form-item>
            </div>
          </template>
        </ai-card>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
import {mapState} from "vuex";
export default {
  name: "Add",
  props: {
    instance: Function,
    dict: Object,
    selected: Object,
  },
  computed: {
    ...mapState(["user"]),
  },
  data() {
    return {
      disabledLevel: 0,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      rules: {
        areaId: [{ required: true, message: '请选择发布地区', trigger: 'change' },
          {
            validator: (r, v, cb) => {
              if (/.+0{3}$/.test(v)) {
                cb("发布地区必须选到村级")
              } else cb()
            }, trigger: "blur"
          }
        ],
        title: [{ required: true, message: '请输入标题', trigger: 'change' }],
        address: [{ required: true, message: '请选输入活动地点', trigger: 'change' }],
        total: [{ required: true, message: '请输入参与人员', trigger: 'change' }],
        activeTimeList: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
        stopSignupTime: [{ required: true, message: '请选择截止时间', trigger: 'change' }],
        contactPerson: [{ required: true, message: '请输入联系人', trigger: 'change' }],
        contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'change' }],
        content: [{ required: true, message: '请输入活动介绍', trigger: 'blur' }],
      },
      form: {
        areaId: '',
        areaName: '',
        title: '',
        address: '',
        total: '',
        activeTimeList: [],
        stopSignupTime: '',
        contactPerson: '',
        contactPhone: '',
        content: ''
      }
    };
  },
  created() {
    console.log(this.user)
    this.dict.load("education", "sex", "nation", "developStatus")
    this.disabledLevel = this.user.info.areaList.length
    this.form.areaId = this.user.info.areaId
  },
  methods: {
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.beginTime = this.form.activeTimeList[0]
          this.form.endTime = this.form.activeTimeList[1]
          this.instance.post(`/app/apppartyreport/addOrUpdate`, {...this.form}).then((res) => {
            if (res.code == 0) {
              this.$message.success('发起活动成功')
              setTimeout(() => {
                this.cancel()
              }, 600);
            }
          });
        }
      });
    },
    cancel() {
      this.$emit("goBack")
    },
  }
};
</script>
<style lang="scss" scoped>
  .Add {
    .ai-form {
      display: flex;
    }
    .text {
      display: inline-block;
      padding-left: 8px;
      color: #999;
    }
    :deep( .el-range-separator ){
      width: 28px!important;
    }
    :deep( .el-date-editor ){
      width: 100%;
    }
  }
</style>