|
|
@@ -1,12 +1,24 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <van-nav-bar title="帮扶活动" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
|
|
|
+ <van-nav-bar
|
|
|
+ title="帮扶活动"
|
|
|
+ @click-left="$router.back()"
|
|
|
+ left-arrow
|
|
|
+ fixed
|
|
|
+ placeholder
|
|
|
+ safe-area-inset-top
|
|
|
+ />
|
|
|
<van-form @submit="lovingHelpSave">
|
|
|
<div class="main">
|
|
|
<van-row class="cell">
|
|
|
<van-col span="6">活动名称:</van-col>
|
|
|
<van-col span="18">
|
|
|
- <van-field v-model="form.name" :rules="[{ required: true}]" placeholder="活动名称" :disabled="id!=undefined" />
|
|
|
+ <van-field
|
|
|
+ v-model="form.name"
|
|
|
+ :rules="[{ required: true }]"
|
|
|
+ placeholder="活动名称"
|
|
|
+ :disabled="id != undefined"
|
|
|
+ />
|
|
|
</van-col>
|
|
|
</van-row>
|
|
|
|
|
|
@@ -14,27 +26,56 @@
|
|
|
<van-col span="6">活动时间:</van-col>
|
|
|
<van-col span="18" @click="clickdateshow">
|
|
|
<!-- {{form.workDate?form.workDate:'请选择'}} -->
|
|
|
- <van-field v-model="form.workDate" :rules="[{ required: true}]" placeholder="请选择" disabled />
|
|
|
+ <van-field
|
|
|
+ v-model="form.workDate"
|
|
|
+ :rules="[{ required: true }]"
|
|
|
+ placeholder="请选择"
|
|
|
+ />
|
|
|
</van-col>
|
|
|
<van-popup v-model="dateshow" position="bottom" :style="{ height: '50%' }">
|
|
|
- <van-datetime-picker @confirm="dateConfirm" @cancel="dateshow=false" v-model="workDate" type="date" :min-date="minDate" :max-date="maxDate" :columns-order="[ 'year','month', 'day']"
|
|
|
- :formatter="formatter" />
|
|
|
+ <van-datetime-picker
|
|
|
+ @confirm="dateConfirm"
|
|
|
+ @cancel="dateshow = false"
|
|
|
+ v-model="workDate"
|
|
|
+ type="date"
|
|
|
+ :min-date="minDate"
|
|
|
+ :max-date="maxDate"
|
|
|
+ :columns-order="['year', 'month', 'day']"
|
|
|
+ :formatter="formatter"
|
|
|
+ />
|
|
|
</van-popup>
|
|
|
</van-row>
|
|
|
<van-row class="cell">
|
|
|
<van-col span="6">选择街道:</van-col>
|
|
|
<van-col span="18">
|
|
|
- <van-field v-model="form.areaName" :rules="[{ required: true}]" @click="clickstreetShow" placeholder="请选择" disabled />
|
|
|
+ <van-field
|
|
|
+ v-model="form.areaName"
|
|
|
+ :rules="[{ required: true }]"
|
|
|
+ @click="clickstreetShow"
|
|
|
+ placeholder="请选择"
|
|
|
+ />
|
|
|
</van-col>
|
|
|
<!-- <van-col span="18" @click="streetshowPopup">{{form.streetName?form.streetName:'请选择'}}</van-col> -->
|
|
|
<van-popup v-model="streetShow" position="bottom" :style="{ height: '50%' }">
|
|
|
- <van-picker default-index="2" show-toolbar :columns="streetList" @confirm="onConfirm" @cancel="streetShow=false" value-key="name" />
|
|
|
+ <van-picker
|
|
|
+ default-index="2"
|
|
|
+ show-toolbar
|
|
|
+ :columns="streetList"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ @cancel="streetShow = false"
|
|
|
+ value-key="name"
|
|
|
+ />
|
|
|
</van-popup>
|
|
|
</van-row>
|
|
|
<van-row class="cell">
|
|
|
<van-col span="6">活动地址:</van-col>
|
|
|
<van-col span="18">
|
|
|
- <van-field v-model="form.address" :rules="[{ required: true}]" placeholder="请输入活动地址" :disabled="id!=undefined" />
|
|
|
+ <van-field
|
|
|
+ v-model="form.address"
|
|
|
+ :rules="[{ required: true }]"
|
|
|
+ placeholder="请输入活动地址"
|
|
|
+ :disabled="id != undefined"
|
|
|
+ />
|
|
|
</van-col>
|
|
|
</van-row>
|
|
|
<van-row class="cell">
|
|
|
@@ -42,20 +83,41 @@
|
|
|
<van-col span="18">
|
|
|
<div class="serviceTarget" @click="clickserviceTargetShow">
|
|
|
<!-- {{form.helpChildren?form.helpChildren:'请选择'}} -->
|
|
|
- <van-field v-model="form.helpChildren" :rules="[{ required: true}]" placeholder="请输入帮扶对象" :disabled="id!=undefined" />
|
|
|
+ <van-field
|
|
|
+ v-model="form.helpChildren"
|
|
|
+ :rules="[{ required: true }]"
|
|
|
+ placeholder="请输入帮扶对象"
|
|
|
+ :disabled="id != undefined"
|
|
|
+ />
|
|
|
</div>
|
|
|
<van-popup position="bottom" v-model="serviceTargetShow">
|
|
|
<div class="field">
|
|
|
- <div v-for="(item,index) in serviceTarget" :key="index">{{item}}
|
|
|
- <van-icon name="clear" color="#999" @click="clearserviceTarget(index)" />
|
|
|
+ <div v-for="(item, index) in serviceTarget" :key="index">
|
|
|
+ {{ item }}
|
|
|
+ <van-icon
|
|
|
+ name="clear"
|
|
|
+ color="#999"
|
|
|
+ @click="clearserviceTarget(index)"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <van-search placeholder="请输入姓名查询" @input="listChildInfoByName" v-model="positionSearch" />
|
|
|
- <van-picker cancel-button-text='取消' :confirm-button-text='childList.length>0?"选择":"确定"' value-key="title" show-toolbar :columns="childList" @confirm="onConfirmPicker"
|
|
|
- @cancel="serviceTargetShow = false">
|
|
|
+ <van-search
|
|
|
+ placeholder="请输入姓名查询"
|
|
|
+ @input="listChildInfoByName"
|
|
|
+ v-model="positionSearch"
|
|
|
+ />
|
|
|
+ <van-picker
|
|
|
+ cancel-button-text="取消"
|
|
|
+ :confirm-button-text="childList.length > 0 ? '选择' : '确定'"
|
|
|
+ value-key="title"
|
|
|
+ show-toolbar
|
|
|
+ :columns="childList"
|
|
|
+ @confirm="onConfirmPicker"
|
|
|
+ @cancel="serviceTargetShow = false"
|
|
|
+ >
|
|
|
<template #option="item">
|
|
|
- <span>{{item.name}}</span>
|
|
|
- <span>({{item.idCard}})</span>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <span>({{ item.idCard }})</span>
|
|
|
</template>
|
|
|
</van-picker>
|
|
|
</van-popup>
|
|
|
@@ -82,7 +144,15 @@
|
|
|
<van-row class="cell">
|
|
|
<van-col span="6">活动详情:</van-col>
|
|
|
<van-col span="18">
|
|
|
- <van-field class="textarea" :rules="[{ required: true}]" :disabled="id!=undefined" v-model="form.content" rows="1" type="textarea" placeholder="请输入活动详情" />
|
|
|
+ <van-field
|
|
|
+ class="textarea"
|
|
|
+ :rules="[{ required: true }]"
|
|
|
+ :disabled="id != undefined"
|
|
|
+ v-model="form.content"
|
|
|
+ rows="1"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入活动详情"
|
|
|
+ />
|
|
|
</van-col>
|
|
|
</van-row>
|
|
|
<div v-if="!id">
|
|
|
@@ -93,26 +163,54 @@
|
|
|
<div>
|
|
|
<p>照片:</p>
|
|
|
<div class="boximg">
|
|
|
- <div v-for="(item,index) in picsArr" :key="index">
|
|
|
- <van-image lazy-load fit="contain" :src="item" alt="" @click="showPopup(),startPosition=1" />
|
|
|
+ <div v-for="(item, index) in picsArr" :key="index">
|
|
|
+ <van-image
|
|
|
+ lazy-load
|
|
|
+ fit="contain"
|
|
|
+ :src="item"
|
|
|
+ alt=""
|
|
|
+ @click="showPopup(), (startPosition = 1)"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <van-image-preview closeable :startPosition="startPosition" v-model="show" :images="pics"></van-image-preview>
|
|
|
+ <van-image-preview
|
|
|
+ closeable
|
|
|
+ :startPosition="startPosition"
|
|
|
+ v-model="show"
|
|
|
+ :images="pics"
|
|
|
+ ></van-image-preview>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p>视频:</p>
|
|
|
<div class="boximg">
|
|
|
- <div v-for="(item,index) in videos" :key="index">
|
|
|
- <video @click="showvideoplay=true,videourl=item" style="object-fit:cover;" :src="item" poster='../../assets/video.png'></video>
|
|
|
+ <div v-for="(item, index) in videos" :key="index">
|
|
|
+ <video
|
|
|
+ @click="(showvideoplay = true), (videourl = item)"
|
|
|
+ style="object-fit: cover"
|
|
|
+ :src="item"
|
|
|
+ poster="../../assets/video.png"
|
|
|
+ ></video>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <van-dialog style="width:100%;border-radius:0;height:200px" v-model="showvideoplay" :show-cancel-button="false" :show-confirm-button="false" closeOnClickOverlay>
|
|
|
- <video controls preload="auto" style="width:100%;height:200px;object-fit: contain;" :src="videourl" v-if="videourl"></video>
|
|
|
+ <van-dialog
|
|
|
+ style="width: 100%; border-radius: 0; height: 200px"
|
|
|
+ v-model="showvideoplay"
|
|
|
+ :show-cancel-button="false"
|
|
|
+ :show-confirm-button="false"
|
|
|
+ closeOnClickOverlay
|
|
|
+ >
|
|
|
+ <video
|
|
|
+ controls
|
|
|
+ preload="auto"
|
|
|
+ style="width: 100%; height: 200px; object-fit: contain"
|
|
|
+ :src="videourl"
|
|
|
+ v-if="videourl"
|
|
|
+ ></video>
|
|
|
</van-dialog>
|
|
|
- <div style="text-align:center;" v-if="!id">
|
|
|
+ <div style="text-align: center" v-if="!id">
|
|
|
<van-button native-type="submit">确 定</van-button>
|
|
|
</div>
|
|
|
</van-form>
|
|
|
@@ -126,8 +224,8 @@ import {
|
|
|
uploadImage,
|
|
|
getStreetList,
|
|
|
lovingHelpDetail,
|
|
|
-} from '../../api/index.js'
|
|
|
-import vanUploader from '../../components/vanUploader.vue'
|
|
|
+} from "../../api/index.js";
|
|
|
+import vanUploader from "../../components/vanUploader.vue";
|
|
|
export default {
|
|
|
components: { vanUploader },
|
|
|
data() {
|
|
|
@@ -148,192 +246,192 @@ export default {
|
|
|
workDate: new Date(),
|
|
|
minDate: new Date(2020, 0, 1),
|
|
|
maxDate: new Date(),
|
|
|
- orglist: '',
|
|
|
- positionSearch: '',
|
|
|
+ orglist: "",
|
|
|
+ positionSearch: "",
|
|
|
serviceTarget: [],
|
|
|
childList: [],
|
|
|
- id: '',
|
|
|
- orgId: '',
|
|
|
+ id: "",
|
|
|
+ orgId: "",
|
|
|
pics: [],
|
|
|
picsArr: [],
|
|
|
videos: [],
|
|
|
- videourl: '',
|
|
|
- }
|
|
|
+ videourl: "",
|
|
|
+ };
|
|
|
},
|
|
|
created() {
|
|
|
- this.id = this.$route.query.id
|
|
|
- console.log(this.id, 'id')
|
|
|
- this.orgId = this.$route.query.orgId
|
|
|
- this.getStreetList()
|
|
|
- this.organizationDetail()
|
|
|
+ this.id = this.$route.query.id;
|
|
|
+ console.log(this.id, "id");
|
|
|
+ this.orgId = this.$route.query.orgId;
|
|
|
+ this.getStreetList();
|
|
|
+ this.organizationDetail();
|
|
|
|
|
|
if (this.id) {
|
|
|
- this.lovingHelpDetail()
|
|
|
+ this.lovingHelpDetail();
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
clearserviceTarget(index) {
|
|
|
- if (!this.form.serviceTarget) return
|
|
|
- var serviceTarget = this.form.serviceTarget.split(',')
|
|
|
- serviceTarget.splice(index, 1)
|
|
|
- this.serviceTarget.splice(index, 1)
|
|
|
- this.form.serviceTarget = serviceTarget.join(',')
|
|
|
+ if (!this.form.serviceTarget) return;
|
|
|
+ var serviceTarget = this.form.serviceTarget.split(",");
|
|
|
+ serviceTarget.splice(index, 1);
|
|
|
+ this.serviceTarget.splice(index, 1);
|
|
|
+ this.form.serviceTarget = serviceTarget.join(",");
|
|
|
},
|
|
|
clickdateshow() {
|
|
|
- if (this.id) return
|
|
|
- this.dateshow = !this.dateshow
|
|
|
+ if (this.id) return;
|
|
|
+ this.dateshow = !this.dateshow;
|
|
|
},
|
|
|
clickstreetShow() {
|
|
|
- if (this.id) return
|
|
|
- this.streetShow = !this.streetShow
|
|
|
+ if (this.id) return;
|
|
|
+ this.streetShow = !this.streetShow;
|
|
|
},
|
|
|
clickserviceTargetShow() {
|
|
|
- if (this.id) return
|
|
|
- this.serviceTargetShow = !this.serviceTargetShow
|
|
|
+ if (this.id) return;
|
|
|
+ this.serviceTargetShow = !this.serviceTargetShow;
|
|
|
},
|
|
|
async getStreetList() {
|
|
|
- const res = await getStreetList()
|
|
|
- this.streetList = res.data
|
|
|
+ const res = await getStreetList();
|
|
|
+ this.streetList = res.data;
|
|
|
},
|
|
|
async lovingHelpDetail() {
|
|
|
- const res = await lovingHelpDetail({ id: this.id })
|
|
|
- this.form = res.data
|
|
|
- this.pics = res.data.pics.split(',')
|
|
|
+ const res = await lovingHelpDetail({ id: this.id });
|
|
|
+ this.form = res.data;
|
|
|
+ this.pics = res.data.pics.split(",");
|
|
|
this.pics.forEach((item) => {
|
|
|
- console.log(item)
|
|
|
- if (item.indexOf('.jpg') || item.indexOf('.png')) {
|
|
|
- this.picsArr.push(item.replace('/cgpimage/', '/cgpimage/240x240/'))
|
|
|
+ console.log(item);
|
|
|
+ if (item.indexOf(".jpg") || item.indexOf(".png")) {
|
|
|
+ this.picsArr.push(item.replace("/cgpimage/", "/cgpimage/240x240/"));
|
|
|
}
|
|
|
- })
|
|
|
- if (!res.data.videos) return
|
|
|
- this.videos = res.data.videos.split(',')
|
|
|
+ });
|
|
|
+ if (!res.data.videos) return;
|
|
|
+ this.videos = res.data.videos.split(",");
|
|
|
},
|
|
|
async listChildInfoByName() {
|
|
|
- if (!this.positionSearch) return
|
|
|
- const res = await listChildInfoByName({ name: this.positionSearch })
|
|
|
- this.childList = res.data
|
|
|
+ if (!this.positionSearch) return;
|
|
|
+ const res = await listChildInfoByName({ name: this.positionSearch });
|
|
|
+ this.childList = res.data;
|
|
|
},
|
|
|
async organizationDetail() {
|
|
|
- console.log(this.orgId, 'this.orgId')
|
|
|
- const res = await organizationDetail({ id: this.orgId })
|
|
|
- this.orglist = res.data
|
|
|
+ console.log(this.orgId, "this.orgId");
|
|
|
+ const res = await organizationDetail({ id: this.orgId });
|
|
|
+ this.orglist = res.data;
|
|
|
},
|
|
|
onConfirm(value) {
|
|
|
- this.form.areaName = value.name
|
|
|
- this.form.areaId = value.id
|
|
|
- this.streetShow = false
|
|
|
+ this.form.areaName = value.name;
|
|
|
+ this.form.areaId = value.id;
|
|
|
+ this.streetShow = false;
|
|
|
},
|
|
|
dateConfirm(v) {
|
|
|
- console.log(v)
|
|
|
- this.form.workDate = this.timeFormat(v)
|
|
|
- this.dateshow = false
|
|
|
+ console.log(v);
|
|
|
+ this.form.workDate = this.timeFormat(v);
|
|
|
+ this.dateshow = false;
|
|
|
},
|
|
|
onConfirmPicker(value) {
|
|
|
if (!value) {
|
|
|
- console.log(value)
|
|
|
- this.serviceTargetShow = !this.serviceTargetShow
|
|
|
- return
|
|
|
+ console.log(value);
|
|
|
+ this.serviceTargetShow = !this.serviceTargetShow;
|
|
|
+ return;
|
|
|
}
|
|
|
- this.serviceTarget.push(value.name)
|
|
|
- this.$set(this.form, 'helpChildren', this.serviceTarget.join(','))
|
|
|
- this.childList = []
|
|
|
- this.positionSearch = ''
|
|
|
+ this.serviceTarget.push(value.name);
|
|
|
+ this.$set(this.form, "helpChildren", this.serviceTarget.join(","));
|
|
|
+ this.childList = [];
|
|
|
+ this.positionSearch = "";
|
|
|
},
|
|
|
getfileList(v, index) {
|
|
|
if (index == undefined) {
|
|
|
if (
|
|
|
- v.indexOf('.png') != -1 ||
|
|
|
- v.indexOf('.jpg') != -1 ||
|
|
|
- v.indexOf('.jpeg') != -1
|
|
|
+ v.indexOf(".png") != -1 ||
|
|
|
+ v.indexOf(".jpg") != -1 ||
|
|
|
+ v.indexOf(".jpeg") != -1
|
|
|
) {
|
|
|
- this.pics.push(v)
|
|
|
+ this.pics.push(v);
|
|
|
} else {
|
|
|
- this.videos.push(v)
|
|
|
+ this.videos.push(v);
|
|
|
}
|
|
|
} else {
|
|
|
- if (v == '图片') {
|
|
|
- this.pics.splice(index, 1)
|
|
|
+ if (v == "图片") {
|
|
|
+ this.pics.splice(index, 1);
|
|
|
} else {
|
|
|
- this.videos.splice(index, 1)
|
|
|
+ this.videos.splice(index, 1);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
async lovingHelpSave() {
|
|
|
if (this.pics.length == 0) {
|
|
|
- this.$toast.fail('请选择至少一张图片')
|
|
|
- return
|
|
|
+ this.$toast.fail("请选择至少一张图片");
|
|
|
+ return;
|
|
|
}
|
|
|
- this.form.pics = this.pics.join(',')
|
|
|
- this.form.videos = this.videos.join(',')
|
|
|
- var data = JSON.parse(JSON.stringify(this.form))
|
|
|
- data.workDate = data.workDate + ' 00:00:00'
|
|
|
- const res = await lovingHelpSave(data)
|
|
|
- if (res.code == '0000') {
|
|
|
- this.$toast.success('成功')
|
|
|
- this.$router.go(-1)
|
|
|
+ this.form.pics = this.pics.join(",");
|
|
|
+ this.form.videos = this.videos.join(",");
|
|
|
+ var data = JSON.parse(JSON.stringify(this.form));
|
|
|
+ data.workDate = data.workDate + " 00:00:00";
|
|
|
+ const res = await lovingHelpSave(data);
|
|
|
+ if (res.code == "0000") {
|
|
|
+ this.$toast.success("成功");
|
|
|
+ this.$router.go(-1);
|
|
|
}
|
|
|
},
|
|
|
showPopup() {
|
|
|
- this.show = true
|
|
|
+ this.show = true;
|
|
|
},
|
|
|
getPositionList() {},
|
|
|
async afterRead(file) {
|
|
|
- console.log(file.file)
|
|
|
- file.status = 'uploading'
|
|
|
- file.message = '上传中...'
|
|
|
- let formDate = new FormData()
|
|
|
+ console.log(file.file);
|
|
|
+ file.status = "uploading";
|
|
|
+ file.message = "上传中...";
|
|
|
+ let formDate = new FormData();
|
|
|
//添加入参
|
|
|
- formDate.append('file', file.file)
|
|
|
- const res = await uploadImage(formDate)
|
|
|
- if (res.code == '0000') {
|
|
|
- file.status = 'success'
|
|
|
- file.message = '成功'
|
|
|
+ formDate.append("file", file.file);
|
|
|
+ const res = await uploadImage(formDate);
|
|
|
+ if (res.code == "0000") {
|
|
|
+ file.status = "success";
|
|
|
+ file.message = "成功";
|
|
|
this.form.fileList.push({
|
|
|
url: res.data,
|
|
|
type: file.file.type,
|
|
|
- })
|
|
|
+ });
|
|
|
// 上传图片 设置col高度
|
|
|
if (this.form.fileList.length % 2 == 0) {
|
|
|
- var index = 3.2 * (this.form.fileList.length / 2 + 1) + 'rem'
|
|
|
- this.$refs.boxlist.style.height = index
|
|
|
+ var index = 3.2 * (this.form.fileList.length / 2 + 1) + "rem";
|
|
|
+ this.$refs.boxlist.style.height = index;
|
|
|
}
|
|
|
} else {
|
|
|
- file.status = 'failed'
|
|
|
- file.message = '上传失败'
|
|
|
+ file.status = "failed";
|
|
|
+ file.message = "上传失败";
|
|
|
}
|
|
|
},
|
|
|
deleteUploader(v, index) {
|
|
|
- console.log(index)
|
|
|
- this.form.fileList.splice(index.index, 1)
|
|
|
+ console.log(index);
|
|
|
+ this.form.fileList.splice(index.index, 1);
|
|
|
},
|
|
|
formatter(type, val) {
|
|
|
- if (type === 'year') {
|
|
|
- return val + '年'
|
|
|
+ if (type === "year") {
|
|
|
+ return val + "年";
|
|
|
}
|
|
|
- if (type === 'month') {
|
|
|
- return val + '月'
|
|
|
+ if (type === "month") {
|
|
|
+ return val + "月";
|
|
|
}
|
|
|
- if (type === 'day') {
|
|
|
- return val + '日'
|
|
|
+ if (type === "day") {
|
|
|
+ return val + "日";
|
|
|
}
|
|
|
- return val
|
|
|
+ return val;
|
|
|
},
|
|
|
timeFormat(time) {
|
|
|
// 时间格式化 2019-09-08
|
|
|
- let year = time.getFullYear()
|
|
|
- let month = time.getMonth() + 1
|
|
|
+ let year = time.getFullYear();
|
|
|
+ let month = time.getMonth() + 1;
|
|
|
if (month < 10) {
|
|
|
- month = '0' + month
|
|
|
+ month = "0" + month;
|
|
|
}
|
|
|
|
|
|
- let day = time.getDate()
|
|
|
+ let day = time.getDate();
|
|
|
if (day < 10) {
|
|
|
- day = '0' + day
|
|
|
+ day = "0" + day;
|
|
|
}
|
|
|
- return year + '-' + month + '-' + day
|
|
|
+ return year + "-" + month + "-" + day;
|
|
|
},
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.tx {
|
|
|
@@ -483,4 +581,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|