233 lines
8.0 KiB
Vue
233 lines
8.0 KiB
Vue
<template>
|
||
<ai-detail class="ActiveAdd">
|
||
<!-- 返回按钮 -->
|
||
<template #title>
|
||
<ai-title title="发起活动" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||
</template>
|
||
|
||
<!-- 内容 -->
|
||
<template #content>
|
||
<el-form class="el-form" :model="formData" ref="ruleForm" :rules="formRules" label-width="100px" label-suffix="：" align-items="center">
|
||
<ai-card title="活动信息">
|
||
<div slot="content" class="ai-content">
|
||
<!-- 发布地区 -->
|
||
<el-form-item label="发布地区" prop="areaId" class="line">
|
||
<ai-area-select always-show clearable :instance="instance" v-model="formData.areaId" :areaLevel="5" size="small" @fullname="(name) => (areaName = name)" :disabled-level="user.info.areaList.length"> </ai-area-select>
|
||
</el-form-item>
|
||
|
||
<!-- 标题 -->
|
||
<el-form-item label="标题" prop="title" class="line">
|
||
<el-input placeholder="请输入..." v-model="formData.title" show-word-limit maxlength="60" size="small" clearable></el-input>
|
||
</el-form-item>
|
||
|
||
<div class="float">
|
||
<!-- 活动时间 -->
|
||
<el-form-item label="活动时间" prop="beginTime">
|
||
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.beginTime" type="datetime" placeholder="选择日期时间" size="small"> </el-date-picker>
|
||
</el-form-item>
|
||
|
||
<!-- 至 -->
|
||
<el-form-item label="至" prop="endTime">
|
||
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.endTime" type="datetime" placeholder="选择日期" size="small"> </el-date-picker>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 活动地点 -->
|
||
<el-form-item label="活动地点" prop="address" class="line">
|
||
<el-input placeholder="请输入..." v-model="formData.address" show-word-limit maxlength="20" size="small" clearable></el-input>
|
||
</el-form-item>
|
||
|
||
<!-- 参与名额 -->
|
||
<el-form-item label="参与名额" prop="total" class="width">
|
||
<el-input placeholder="请输入..." v-model="formData.total" size="small" clearable oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||
<span class="text">"0"表示不限制活动报名人数</span>
|
||
</el-form-item>
|
||
|
||
<!-- 截止日期 -->
|
||
<el-form-item label="截止日期" prop="stopSignupTime" class="line">
|
||
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.stopSignupTime" type="datetime" placeholder="选择日期" size="small"> </el-date-picker>
|
||
</el-form-item>
|
||
|
||
<div class="float">
|
||
<!-- 联系人 -->
|
||
<el-form-item label="联系人" prop="contactPerson" class="width">
|
||
<el-input placeholder="请输入..." v-model="formData.contactPerson" size="small" clearable></el-input>
|
||
</el-form-item>
|
||
|
||
<!-- 联系电话 -->
|
||
<el-form-item label="联系电话" prop="contactPhone" class="phonenumber">
|
||
<el-input placeholder="联系电话..." v-model.number="formData.contactPhone" size="small" clearable></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 活动介绍 -->
|
||
<el-form-item label="活动介绍" prop="content" class="line">
|
||
<ai-editor v-model="formData.content" :instance="instance" />
|
||
</el-form-item>
|
||
|
||
<!-- 略缩图 -->
|
||
<el-form-item label="略缩图" prop="imgUrl" class="line">
|
||
<ai-uploader :isShowTip="true" :instance="instance" v-model="formData.imgUrl" :limit="1" :cropOps="cropOps" is-crop>
|
||
<template slot="tips">
|
||
<p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
|
||
<p>图片比例：1.6：1</p>
|
||
</template>
|
||
</ai-uploader>
|
||
</el-form-item>
|
||
</div>
|
||
<!-- / -->
|
||
</ai-card>
|
||
</el-form>
|
||
</template>
|
||
|
||
<!-- 底部按钮 -->
|
||
<template #footer>
|
||
<el-button @click="cancel">取消</el-button>
|
||
<el-button type="primary" @click="confirm('ruleForm')">提交</el-button>
|
||
</template>
|
||
</ai-detail>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
|
||
export default {
|
||
name: 'ActiveAdd',
|
||
components: {},
|
||
props: { instance: Function, dict: Object, params: Object, disabledLevel: Number },
|
||
data() {
|
||
return {
|
||
formData: {
|
||
areaId: '',
|
||
title: '',
|
||
beginTime: '',
|
||
endTime: '',
|
||
address: '',
|
||
stopSignupTime: '',
|
||
total: '',
|
||
contactPerson: '',
|
||
contactPhone: '',
|
||
content: '',
|
||
imgUrl: [],
|
||
},
|
||
id: '',
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['user']),
|
||
|
||
isEdit() {
|
||
return !!this.params.id
|
||
},
|
||
|
||
cropOps() {
|
||
return {
|
||
width: '336px',
|
||
height: '210px',
|
||
}
|
||
},
|
||
|
||
formRules() {
|
||
return {
|
||
areaId: [
|
||
{ required: true, message: '请选择发布地区', trigger: 'change' },
|
||
{
|
||
validator: (r, v, cb) => (/0{3}$/g.test(v) ? cb('请选择到村') : cb()),
|
||
},
|
||
],
|
||
title: [{ required: true, message: '请输入标题', trigger: 'change' }],
|
||
beginTime: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
|
||
endTime: [{ required: true, message: '请选择至', trigger: 'change' }],
|
||
address: [{ required: true, message: '请输入活动地点', trigger: 'change' }],
|
||
stopSignupTime: [{ required: true, message: '请选择截止日期', trigger: 'change' }],
|
||
total: [{ required: true, message: '请输入参与名额', trigger: 'change' }],
|
||
contactPerson: [{ required: true, message: '请输入联系人', trigger: 'change' }],
|
||
contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'change' }],
|
||
content: [{ required: true, message: '请输入活动介绍', trigger: 'change' }],
|
||
imgUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
|
||
}
|
||
},
|
||
},
|
||
watch: {},
|
||
created() {
|
||
this.formData.areaId = this.user.info.areaId
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
// 确定新增
|
||
confirm() {
|
||
this.$refs['ruleForm'].validate((valid) => {
|
||
if (valid) {
|
||
this.instance
|
||
.post(`/app/apppartyreport/addOrUpdate`, {
|
||
areaId: this.formData.areaId,
|
||
title: this.formData.title,
|
||
beginTime: this.formData.beginTime,
|
||
endTime: this.formData.endTime,
|
||
address: this.formData.address,
|
||
|
||
stopSignupTime: this.formData.stopSignupTime,
|
||
total: this.formData.total,
|
||
contactPerson: this.formData.contactPerson,
|
||
contactPhone: this.formData.contactPhone,
|
||
content: this.formData.content,
|
||
imgUrl: this.formData.imgUrl[0].url,
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
this.$message.success('提交成功')
|
||
setTimeout(() => {
|
||
this.cancel(true)
|
||
}, 1000)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 返回按钮
|
||
cancel(isRefresh) {
|
||
this.$emit('change', {
|
||
type: 'list',
|
||
isRefresh: isRefresh ? true : false,
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.ActiveAdd {
|
||
.el-form {
|
||
.ai-card {
|
||
.ai-content {
|
||
.width {
|
||
.text {
|
||
margin-left: 50px;
|
||
color: #adadad;
|
||
}
|
||
.el-form-item__content {
|
||
.el-input {
|
||
width: 220px;
|
||
}
|
||
}
|
||
}
|
||
.float {
|
||
.width {
|
||
.el-form-item__content {
|
||
.el-input {
|
||
width: 220px;
|
||
}
|
||
}
|
||
}
|
||
display: flex;
|
||
.phonenumber {
|
||
margin-left: 45px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|