在职党员社区报到
This commit is contained in:
liuye
195
project/pingchang/apps/AppCommunityMember/Add.vue
Normal file
195
project/pingchang/apps/AppCommunityMember/Add.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<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="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd"
|
||||
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: 'change' }],
|
||||
},
|
||||
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 - 1
|
||||
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;
|
||||
}
|
||||
::v-deep .el-range-separator {
|
||||
width: 28px!important;
|
||||
}
|
||||
::v-deep .el-date-editor {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user