初始化
This commit is contained in:
aixianling
232
packages/wechat/AppReportServe/components/ActiveAdd.vue
Normal file
232
packages/wechat/AppReportServe/components/ActiveAdd.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user