|
@@ -6,131 +6,265 @@
|
|
|
<p class="miniTitle">基础信息</p>
|
|
|
<van-cell-group>
|
|
|
<van-field
|
|
|
- v-model="placeActivity.religion"
|
|
|
+ v-model="placeActivity.placeData.religiousType"
|
|
|
readonly
|
|
|
label="所属宗教:"
|
|
|
placeholder="请选择宗教"
|
|
|
input-align="right"
|
|
|
right-icon="arrow-down"
|
|
|
- @click="showPlace = true"
|
|
|
+ @click="showPicker = true"
|
|
|
/>
|
|
|
- <van-popup v-model:show="showPlace" round position="bottom">
|
|
|
+ <van-popup v-model:show="showPicker" round position="bottom">
|
|
|
<van-picker
|
|
|
- title="宗教选择"
|
|
|
+ title="请选择宗教类型"
|
|
|
:columns="places"
|
|
|
- @cancel="showPlace = false"
|
|
|
+ @cancel="showPicker = false"
|
|
|
@confirm="getPlace"
|
|
|
/>
|
|
|
</van-popup>
|
|
|
</van-cell-group>
|
|
|
<van-cell-group>
|
|
|
<van-field
|
|
|
- v-model="placeActivity.district"
|
|
|
+ v-model="placeActivity.placeData.name"
|
|
|
+ center
|
|
|
+ label="场所名称:"
|
|
|
+ placeholder="请填写场所名称"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.placeData.contact"
|
|
|
+ center
|
|
|
+ label="场所联系人:"
|
|
|
+ placeholder="请填写场所联系人"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.placeData.contactNumber"
|
|
|
+ center
|
|
|
+ label="联系电话:"
|
|
|
+ placeholder="请填写联系电话"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.placeData.placeSelectName"
|
|
|
center
|
|
|
readonly
|
|
|
- label="所属县(区):"
|
|
|
- placeholder="请填写所属县(区)"
|
|
|
+ label="场所地点:"
|
|
|
+ placeholder="请填写场所地点"
|
|
|
input-align="right"
|
|
|
right-icon="arrow-down"
|
|
|
- @click="showArea = true"
|
|
|
+ @click="showPlace1 = true"
|
|
|
/>
|
|
|
- <van-popup v-model:show="showArea" round position="bottom">
|
|
|
- <van-cascader
|
|
|
- v-model="cascaderValue"
|
|
|
- title="请选择所在地区"
|
|
|
- :options="options"
|
|
|
- @close="showArea = false"
|
|
|
- @finish="onFinish"
|
|
|
+ <van-popup v-model:show="showPlace1" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="活动场所"
|
|
|
+ :columns="options"
|
|
|
+ :columns-field-names="customFieldName"
|
|
|
+ @cancel="showPlace1 = false"
|
|
|
+ @confirm="getPlace1"
|
|
|
/>
|
|
|
</van-popup>
|
|
|
</van-cell-group>
|
|
|
<van-cell-group>
|
|
|
<van-field
|
|
|
- v-model="placeActivity.address"
|
|
|
+ v-model="placeActivity.placeData.place"
|
|
|
center
|
|
|
- label="具体地址:"
|
|
|
- placeholder="请填写具体地址"
|
|
|
+ label="详细场所地点:"
|
|
|
+ placeholder="请填写详细场所地点"
|
|
|
input-align="right"
|
|
|
right-icon="location"
|
|
|
/>
|
|
|
</van-cell-group>
|
|
|
<van-cell-group>
|
|
|
<van-field
|
|
|
- v-model="placeActivity.place"
|
|
|
+ v-model="placeActivity.placeData.siteType"
|
|
|
+ readonly
|
|
|
+ label="场所类型:"
|
|
|
+ placeholder="请选择场所类型"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ @click="showPicker1 = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="showPicker1" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="请选择场所类型"
|
|
|
+ :columns="placeType"
|
|
|
+ @cancel="showPicker1 = false"
|
|
|
+ @confirm="getplaceType"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.placeData.constructionStage"
|
|
|
+ readonly
|
|
|
+ label="场所建设阶段:"
|
|
|
+ placeholder="请选择场所建设阶段"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ @click="showPicker2 = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="showPicker2" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="请选择场所建设阶段"
|
|
|
+ :columns="construction"
|
|
|
+ @cancel="showPicker2 = false"
|
|
|
+ @confirm="getConstruction"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.placeData.nature"
|
|
|
+ readonly
|
|
|
+ label="场所性质:"
|
|
|
+ placeholder="请选择场所性质"
|
|
|
+ input-align="right"
|
|
|
+ right-icon="arrow-down"
|
|
|
+ @click="showPicker3 = true"
|
|
|
+ />
|
|
|
+ <van-popup v-model:show="showPicker3" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="场所性质选择"
|
|
|
+ :columns="property"
|
|
|
+ @cancel="showPicker3 = false"
|
|
|
+ @confirm="getproperty"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ v-model="placeActivity.placeData.religiousDeptManaUserName"
|
|
|
center
|
|
|
- label="场所名称:"
|
|
|
- placeholder="请填写场所名称"
|
|
|
+ label="宗教部门管理人员:"
|
|
|
+ placeholder="请填写宗教部门管理人员"
|
|
|
input-align="right"
|
|
|
/>
|
|
|
</van-cell-group>
|
|
|
<van-cell-group>
|
|
|
<van-field
|
|
|
- v-model="placeActivity.name"
|
|
|
+ v-model="placeActivity.placeData.securityDeptManaUserName"
|
|
|
center
|
|
|
- label="联络人姓名:"
|
|
|
- placeholder="请填写联络人姓名"
|
|
|
+ label="公安部门管理人员:"
|
|
|
+ placeholder="请填写公安部门管理人员"
|
|
|
input-align="right"
|
|
|
/>
|
|
|
</van-cell-group>
|
|
|
<van-cell-group>
|
|
|
<van-field
|
|
|
- v-model="placeActivity.tel"
|
|
|
+ v-model="placeActivity.placeData.peopleThreshold"
|
|
|
center
|
|
|
- label="联系方式:"
|
|
|
- placeholder="请填写联络人联系方式"
|
|
|
+ label="场所活动人数阈值:"
|
|
|
+ placeholder="请填写场所活动人数阈值"
|
|
|
input-align="right"
|
|
|
/>
|
|
|
</van-cell-group>
|
|
|
<van-cell-group>
|
|
|
<van-field name="uploader" label="外景照片:">
|
|
|
<template #input>
|
|
|
- <van-uploader v-model="placeActivity.fileList1" :after-read="afterRead" />
|
|
|
+ <van-uploader
|
|
|
+ v-model="placeActivity.fileList1"
|
|
|
+ :after-read="afterRead"
|
|
|
+ />
|
|
|
</template>
|
|
|
</van-field>
|
|
|
</van-cell-group>
|
|
|
<van-cell-group>
|
|
|
<van-field name="uploader" label="内景照片:">
|
|
|
<template #input>
|
|
|
- <van-uploader v-model="placeActivity.fileList2" :after-read="afterRead" />
|
|
|
+ <van-uploader
|
|
|
+ v-model="placeActivity.fileList2"
|
|
|
+ :after-read="afterRead"
|
|
|
+ />
|
|
|
</template>
|
|
|
</van-field>
|
|
|
</van-cell-group>
|
|
|
</div>
|
|
|
<div class="subbtn">
|
|
|
- <van-button type="primary">提交</van-button>
|
|
|
- <van-button type="default" hairline>取消</van-button>
|
|
|
+ <van-button type="primary" @click="submit">提交</van-button>
|
|
|
+ <van-button @click="goback" type="default" hairline>取消</van-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { reactive, ref } from "vue";
|
|
|
+import PlaceRegister from "@/api/placeRegister/placeRegister";
|
|
|
+import router from '@/router';
|
|
|
export default {
|
|
|
setup() {
|
|
|
const goback = () => {
|
|
|
history.back();
|
|
|
};
|
|
|
+
|
|
|
//场所录入
|
|
|
const placeActivity = reactive({
|
|
|
- religion: "",//所属宗教
|
|
|
- district: "",//所属县区
|
|
|
- address: "",//具体地址
|
|
|
- place: "",//场所
|
|
|
- name: "",//联系人姓名
|
|
|
- tel: "",//联系方式
|
|
|
- fileList1:[],//外景图片
|
|
|
- fileList2: [],//内景图片
|
|
|
+ placeData: {
|
|
|
+ religiousType: "", //所属宗教
|
|
|
+ name: "", //场所名称
|
|
|
+ contact: "", //场所联系人
|
|
|
+ contactNumber: "", //联系电话
|
|
|
+ placeSelectName: "", //场所地点
|
|
|
+ place: "", //详细场所地点
|
|
|
+ siteType: "", //场所类型
|
|
|
+ constructionStage: "", //场所建设阶段
|
|
|
+ nature: "", //场所性质
|
|
|
+ religiousDeptManaUserName: "", //宗教部门管理人员
|
|
|
+ securityDeptManaUserName: "", //公安部门管理人员
|
|
|
+ peopleThreshold: "", //场所活动人数
|
|
|
+ scenesImage:""//内外景图片
|
|
|
+ },
|
|
|
+ fileList1: [], //外景图片
|
|
|
+ fileList2: [], //内景图片
|
|
|
});
|
|
|
// 宗教名称
|
|
|
const places = [
|
|
|
+ { text: "伊斯兰教", value: "伊斯兰教" },
|
|
|
{ text: "基督教", value: "基督教" },
|
|
|
+ { text: "天主教", value: "天主教" },
|
|
|
{ text: "佛教", value: "佛教" },
|
|
|
- { text: "伊斯兰教", value: "伊斯兰教" },
|
|
|
+ { text: "道教", value: "道教" },
|
|
|
];
|
|
|
- let showPlace = ref(false);
|
|
|
+ let showPicker = ref(false);
|
|
|
const getPlace = ({ selectedOptions }) => {
|
|
|
- showPlace.value = false;
|
|
|
- placeActivity.place = selectedOptions[0].text;
|
|
|
+ showPicker.value = false;
|
|
|
+ placeActivity.placeData.religiousType = selectedOptions[0].text;
|
|
|
+ };
|
|
|
+ // 场所类型
|
|
|
+ const placeType = [
|
|
|
+ { text: "线下", value: "线下" },
|
|
|
+ { text: "线上", value: "线上" },
|
|
|
+ ];
|
|
|
+ let showPicker1 = ref(false);
|
|
|
+ const getplaceType = ({ selectedOptions }) => {
|
|
|
+ showPicker1.value = false;
|
|
|
+ placeActivity.placeData.siteType = selectedOptions[0].text;
|
|
|
+ };
|
|
|
+ // 场所建设
|
|
|
+ const construction = [
|
|
|
+ { text: "筹备", value: "筹备" },
|
|
|
+ { text: "建设完成", value: "建设完成" },
|
|
|
+ ];
|
|
|
+ let showPicker2 = ref(false);
|
|
|
+ const getConstruction = ({ selectedOptions }) => {
|
|
|
+ showPicker2.value = false;
|
|
|
+ placeActivity.placeData.constructionStage = selectedOptions[0].text;
|
|
|
+ };
|
|
|
+ // 场所性质
|
|
|
+ const property = [
|
|
|
+ { text: "固定场所", value: "固定场所" },
|
|
|
+ { text: "寺观教堂", value: "寺观教堂" },
|
|
|
+ ];
|
|
|
+ let showPicker3 = ref(false);
|
|
|
+ const getproperty = ({ selectedOptions }) => {
|
|
|
+ showPicker3.value = false;
|
|
|
+ placeActivity.placeData.nature = selectedOptions[0].text;
|
|
|
};
|
|
|
//图片上传
|
|
|
const afterRead = (file) => {
|
|
@@ -139,43 +273,67 @@ export default {
|
|
|
};
|
|
|
|
|
|
// 地区选择
|
|
|
- let showArea = ref(false);
|
|
|
- const cascaderValue = ref("");
|
|
|
+ const customFieldName = {
|
|
|
+ text: "name",
|
|
|
+ value: "id",
|
|
|
+ };
|
|
|
// 选项列表,children 代表子选项,支持多级嵌套
|
|
|
- const options = [
|
|
|
- {
|
|
|
- text: "浙江省",
|
|
|
- value: "330000",
|
|
|
- children: [{ text: "杭州市", value: "330100" }],
|
|
|
- },
|
|
|
- {
|
|
|
- text: "江苏省",
|
|
|
- value: "320000",
|
|
|
- children: [{ text: "南京市", value: "320100" }],
|
|
|
- },
|
|
|
- ];
|
|
|
- // 全部选项选择完毕后,会触发 finish 事件
|
|
|
- const onFinish = ({ selectedOptions }) => {
|
|
|
- showArea.value = false;
|
|
|
- placeActivity.activityPlace = selectedOptions
|
|
|
- .map((option) => option.text)
|
|
|
- .join("/");
|
|
|
+ const options = ref([]);
|
|
|
+ // 获取地区数据树
|
|
|
+ new PlaceRegister().treeDate().then((res) => {
|
|
|
+ options.value.push(...res);
|
|
|
+ });
|
|
|
+ let showPlace1 = ref(false);
|
|
|
+ const getPlace1 = ({ selectedOptions }) => {
|
|
|
+ showPlace1.value = false;
|
|
|
+ placeActivity.placeData.placeSelectName =
|
|
|
+ selectedOptions[0].name +
|
|
|
+ "/" +
|
|
|
+ selectedOptions[1].name +
|
|
|
+ "/" +
|
|
|
+ selectedOptions[2].name;
|
|
|
};
|
|
|
+ //数据提交
|
|
|
+ const submit = ()=>{
|
|
|
+ // console.log(placeActivity.placeData.scenesImage);
|
|
|
+ new PlaceRegister().sava(placeActivity.placeData).then((res)=>{
|
|
|
+ console.log("提交成功",res);
|
|
|
+ router.push({
|
|
|
+ path:'/tabAll'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
return {
|
|
|
placeActivity,
|
|
|
// 活动场所
|
|
|
- showPlace,
|
|
|
+ showPicker,
|
|
|
places,
|
|
|
getPlace,
|
|
|
+ //场所类型
|
|
|
+ showPicker1,
|
|
|
+ placeType,
|
|
|
+ getplaceType,
|
|
|
+ //场所建设阶段
|
|
|
+ showPicker2,
|
|
|
+ construction,
|
|
|
+ getConstruction,
|
|
|
+ //场所性质
|
|
|
+ showPicker3,
|
|
|
+ property,
|
|
|
+ getproperty,
|
|
|
//图片上传
|
|
|
afterRead,
|
|
|
// 返回
|
|
|
goback,
|
|
|
// 地区选择
|
|
|
- showArea,
|
|
|
+ customFieldName,
|
|
|
+ showPlace1,
|
|
|
+ getPlace1,
|
|
|
options,
|
|
|
- onFinish,
|
|
|
- cascaderValue,
|
|
|
+ //数据提交
|
|
|
+ submit
|
|
|
};
|
|
|
},
|
|
|
};
|