城阳pc工作端前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

1077 lines
31 KiB

<template>
<div>
<div class="dialog-h-content scroll-h">
<el-form v-if="formType==='add'"
ref="ref_form"
:inline="true"
:model="formData"
:rules="dataRule"
class="div_form">
<el-form-item label="服务名称"
prop="serviceName"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
placeholder="请输入服务名称"
v-model="formData.serviceName">
</el-input>
</el-form-item>
<el-form-item label="服务组织"
prop="serviceOrgId"
label-width="150px"
style="display: block">
<el-select v-model="formData.serviceOrgType"
class="input-width-small"
placeholder="请选择"
clearable
@change="handleServiceChange('add', $event)">
<el-option v-for="item in serviceOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
-
<el-select v-model="formData.serviceOrgId"
class="input-width-middle"
filterable
placeholder="请选择"
clearable>
<el-option v-for="item in serviceOptiondList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="服务范围"
prop="objList"
label-width="150px"
style="display: block">
<el-cascader class="item_width_1"
ref="myCascader"
v-model="scopeIdArray"
:key="iscascaderShow"
:options="casOptions"
:props="optionProps"
:show-all-levels="false"
@change="handleChangeScope"></el-cascader>
</el-form-item>
<el-form-item label="政策依据"
prop="policyId"
label-width="150px"
style="display: block">
<el-select v-model="formData.policyId"
class="input-width-small"
placeholder="请选择"
clearable>
<el-option v-for="item in policyList"
:key="item.policyId"
:label="item.title"
:value="item.policyId">
</el-option>
</el-select>
<el-button style="margin-left: 10px"
type="primary"
size="small"
@click="handlePersonList">预览</el-button>
</el-form-item>
<el-form-item label="经办人"
prop="principalName"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
placeholder="请输入联系人姓名"
v-model="formData.principalName">
</el-input>
</el-form-item>
<el-form-item label="联系方式"
prop="principalContact"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
placeholder="请输入联系人电话"
v-model="formData.principalContact">
</el-input>
</el-form-item>
<el-form-item label="服务时间"
label-width="150px"
prop="serviceTimeStart">
<el-date-picker v-model="formData.serviceTimeStart"
:picker-options="startPickerOptions"
class="item_width_2"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
value="yyyy-MM-dd"
placeholder="开始时间">
</el-date-picker>
<span class="data-tag">至</span>
<el-date-picker v-model="formData.serviceTimeEnd"
:picker-options="endPickerOptions"
class="item_width_2 data-tag"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
value="yyyy-MM-dd"
placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item label="备注"
prop="remark"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
type="textarea"
maxlength="1000"
show-word-limit
:rows="3"
placeholder="请输入备注,不超过1000字"
v-model="formData.remark"></el-input>
</el-form-item>
<el-form-item label="直接反馈"
prop="remark"
label-width="150px"
style="display: block">
<el-checkbox :label="'是'"
v-model="showFeedback"
@change="handleChangeFeedback"></el-checkbox>
</el-form-item>
</el-form>
<div v-show="formType==='feedback'||showFeedback">
<!-- <h3 class="d-h3">反馈内容</h3> -->
<el-form ref="ref_form_feedback"
:inline="true"
:model="feedbackFormData"
:rules="feedbackDataRule"
class="div_form">
<el-form-item label="服务目标"
prop="serviceGoal"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
type="textarea"
maxlength="1000"
show-word-limit
:rows="3"
placeholder="请输入服务目标,不超过1000字"
v-model="feedbackFormData.serviceGoal"></el-input>
</el-form-item>
<el-form-item label="服务效果"
prop="serviceEffect"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
type="textarea"
maxlength="1000"
show-word-limit
:rows="3"
placeholder="请输入服务效果,不超过1000字"
v-model="feedbackFormData.serviceEffect"></el-input>
</el-form-item>
<el-form-item label="服务人数"
style="display: block"
prop="servicePeopleNumber"
label-width="150px">
<el-input-number class="item_width_2"
v-model="feedbackFormData.servicePeopleNumber"
:min="0"
:max="9999"
label="服务人数"></el-input-number>
</el-form-item>
<el-form-item label="服务状态"
style="display: block"
label-width="150px"
prop="serviceStatus">
<span>已完成</span>
<!-- <el-select class="item_width_1"
v-model="feedbackFormData.serviceStatus"
placeholder="全部"
clearable>
<el-option v-for="item in statusArray"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select> -->
</el-form-item>
<el-form-item label="满意度"
style="display: block"
label-width="150px"
prop="satisfaction">
<el-select class="item_width_2"
v-model="feedbackFormData.satisfaction"
placeholder="全部"
clearable>
<el-option v-for="item in satisfyArray"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="地址"
prop="address"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
v-model="feedbackFormData.address"></el-input>
</el-form-item>
<el-form-item label="地图位置"
label-width="150px"
style="display: block">
<div style="width:500px">
<div class="div_map">
<div id="map_app">
</div>
<div class="div_searchmap">
<el-input maxlength="50"
size="mini"
placeholder="请输入关键字"
v-model="keyWords">
</el-input>
<el-button style="margin-left: 10px"
type="primary"
size="mini"
@click="handleSearchMap">查询</el-button>
</div>
</div>
</div>
</el-form-item>
<el-form-item class="block"
label="附件"
label-width="150px"
prop="attach">
<el-upload class="upload-demo"
:action="uploadUlr"
accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3"
:on-success="handleFileSuccess"
:on-remove="handleFileRemove"
:limit="3"
:before-upload="beforeUpload"
:file-list="fileList">
<el-button size="small"
:disabled="fileList.length===3"
type="primary">点击上传</el-button>
<div slot="tip"
class="el-upload__tip">支持图片、word、pdf</div>
</el-upload>
</el-form-item>
</el-form>
</div>
</div>
<div class="div_btn">
<el-button size="small"
@click="handleCancle">取 消</el-button>
<el-button size="small"
type="primary"
:disabled="btnDisable"
@click="handleComfirm">确 定</el-button>
</div>
<el-dialog v-if="showPersonList"
:visible.sync="showPersonList"
:append-to-body="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
:title="'政策预览'"
width="1150px"
top="5vh"
class="dialog-h"
@closed="showPersonList = false">
<person-list ref="ref_detail_form"
:policyId="policyId"
:ruleList="ruleList"
@handleOk="handleOk"
@handleClose="handleClose">
</person-list>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'
import personList from "../policy/personList";
var map
var search
var markers
var infoWindowList
var geocoder // 新建一个正逆地址解析类
let loading // 加载动画
export default {
data () {
let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面,这是动态改变区间的关键
let nowData = Date.now()
if (this.formData.serviceTimeStart) {
let serviceTimeStart = new Date(this.formData.serviceTimeStart)
return time.getTime() > nowData || time.getTime() < serviceTimeStart || time.getTime() === serviceTimeStart
} else {
return time.getTime() > nowData
}
}
let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面,这是动态改变区间的关键
let nowData = Date.now()
return time.getTime() > nowData
}
return {
btnDisable: false,
casOptions: [],
scopeIdArray: [],
iscascaderShow: 0,
optionProps: {
multiple: true,
value: 'objectId',
label: 'objectName',
children: 'children',
checkStrictly: true
},
keyWords: '',
formData: {
serviceName: '',//服务名称
serviceOrgType: '',//服务组织类型 社区自组织:community_org, 志愿者:ic_user_volunteer, 联建单位:party_unit
serviceOrgId: '',//服务组织Id
objList: [],//
policyId: '',
principalName: '',//经办人(责任人)姓名
principalContact: '',//经办人联系方式
serviceTimeStart: '',//服务起始时间yyyy-MM-dd
serviceTimeEnd: '',//服务截止时间yyyy-MM-dd
remark: '',//
feedback: {},//反馈。允许发起服务的时候直接填写反馈,完成服务。
},
feedbackFormData: {
serviceGoal: '',// 服务目标
serviceEffect: '',// 服务效果
servicePeopleNumber: null,// 服务人数
serviceStatus: 'completed',// 服务状态。in_service服务中;completed:已完成
satisfaction: '',//满意度。不满意:bad、基本满意:good、非常满意:perfect
longitude: '',// 经度
latitude: '',// 维度
address: '',
fileList: [],// 附件列表
},
endPickerOptions: {
disabledDate: endDisabledDate
},
startPickerOptions: {
disabledDate: startDisabledDate
},
showFeedback: false,
serviceOptions: [],
serviceOptiondList: [],
policyList: [],
fileList: [],
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile',
policyId: '',
showPersonList: false,
ruleList: [],
firstInitMap: true,
statusArray: [
{
value: "in_service",
label: "进行中",
},
{
value: "completed",
label: "已完成",
},
],
satisfyArray: [
{
value: "bad",
label: "不满意",
},
{
value: "good",
label: "基本满意",
},
{
value: "perfect",
label: "非常满意",
},
],
}
},
watch: {
"formData.serviceTimeEnd": function (val) {
if (val && val != '') {
let arrayTemp = val.split(' ')
this.formData.serviceTimeEnd = arrayTemp[0] + ' 23:59:59'
}
},
},
components: { personList },
async mounted () {
this.startLoading()
this.getDictOptions();
this.getPolicyList();
if (this.showFeedback) {
this.initMap()
this.$refs.ref_form_feedback.resetFields();
}
if (this.formType === 'add') {
this.$refs.ref_form.resetFields();
await this.loadScopeTree()
} else {
}
this.endLoading()
},
methods: {
//加载组织数据
async handlePersonList () {
if (!this.formData.policyId) {
this.$message.info('请先选择政策')
return false
}
this.policyId = this.formData.policyId
await this.loadRuleList()
this.showPersonList = true;
},
async loadRuleList () {
const url = "/heart/policy/rulelist/" + this.policyId
let params = {}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.ruleList = data
} else {
this.$message.error(msg)
}
},
handleClose () {
this.showPersonList = false
},
handleOk () {
this.showPersonList = false
},
async getPolicyList () {
const url = '/heart/policy/policyListSelect'
let params = {}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.policyList = data
} else {
this.$message.error(msg)
}
},
async getDictOptions () {
this.$http
.post("/sys/dict/data/dictlist", {
dictType: "user_demand_service_type",
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
} else {
this.serviceOptions = res.data;
}
})
.catch(() => {
return this.$message.error("网络错误");
});
},
handleServiceChange (type, val) {
if (val === "social_org") {
if (type === "add") this.getServiceuserList(val, "add_demand");
else this.getServiceuserList(val, "query_demand");
} else this.getServiceuserList(val, "");
},
async getServiceuserList (serviceType, query) {
if (!serviceType) return false;
const params = {
serviceName: "",
serviceType: serviceType,
queryPurpose: query,
};
await this.$http
.post("/heart/userdemand/servicelist", params)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
} else {
this.serviceOptiondList = res.data
}
})
.catch(() => {
return this.$message.error("网络错误");
});
},
handleChangeFeedback (val) {
this.showFeedback = val
if (this.firstInitMap) {
this.$nextTick(() => {
this.initMap()
})
}
},
// 获取服务范围树
loadScopeTree () {
const url = '/gov/org/icServiceProject/service/serviceScopeTree'
// const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree'
let params = {}
window.app.ajax.post(
url,
params,
(data, rspMsg) => {
//组织级联数据
++this.iscascaderShow
this.casOptions = []
this.scopeIdArray = []
this.casOptions.push(data)
},
(rspMsg, data) => {
this.$message.error(rspMsg)
}
)
},
handleChangeScope (value) {
this.formData.objList = []
let selArray = this.$refs["myCascader"].getCheckedNodes()
selArray.forEach(element => {
let obj = {
objectType: element.data.objectType === 'grid' ? 'grid' : element.data.objectType === 'neighborhood' ? 'neighborhood' : 'agency',
objectId: element.data.objectId,
objectName: element.data.objectName,
}
this.formData.objList.push(obj)
});
},
async handleComfirm () {
if (this.formType === 'add') {
this.handleAdd()
} else if (this.formType === 'feedback') {
this.handleFeedback()
}
},
async handleAdd () {
this.btnDisable = true
setTimeout(() => {
this.btnDisable = false
}, 10000)
this.$refs['ref_form'].validate((valid, messageObj) => {
if (!valid) {
app.util.validateRule(messageObj)
this.btnDisable = false
} else {
var oDate1 = new Date(this.formData.serviceTimeStart);
var oDate2 = new Date(this.formData.serviceTimeEnd);
if (oDate1.getTime() > oDate2.getTime()) {
this.$message.error('服务截止时间必须大于服务开始时间')
return false
}
if (this.showFeedback) {
this.$refs['ref_form_feedback'].validate((valid, messageObj) => {
if (!valid) {
app.util.validateRule(messageObj)
this.btnDisable = false
} else {
this.formData.feedback = { ...this.feedbackFormData }
this.addFuwu()
}
})
} else {
this.addFuwu()
}
}
})
},
async addFuwu () {
if (this.showFeedback) {
this.feedbackFormData.fileList = []
this.feedbackFormData.fileList = [...this.fileList]
this.formData.feedback = { ... this.feedbackFormData }
} else {
this.formData.feedback = null
}
console.log(this.formData)
// return false
const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码
if (this.formData.principalContact && regPhone.test(this.formData.principalContact) === false) {
this.btnDisable = false
this.$message({
type: 'warning',
message: '请输入正确的手机号码'
})
return false;
}
const url = '/heart/icServiceRecordV2/add'
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/icServiceProject/service/initiate'
let params = {
serviceCategoryKey: this.serviceCategoryKey,
...this.formData
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.$message.success('发起成功')
this.resetData()
this.$emit('handleOk')
} else {
this.$message.error(msg)
}
},
async handleFeedback () {
this.btnDisable = true
setTimeout(() => {
this.btnDisable = false
}, 10000)
this.$refs['ref_form_feedback'].validate((valid, messageObj) => {
if (!valid) {
app.util.validateRule(messageObj)
this.btnDisable = false
} else {
this.addFeecback()
}
})
},
async addFeecback () {
this.feedbackFormData.fileList = []
this.feedbackFormData.fileList = [...this.fileList]
this.feedbackFormData.serviceRecordId = this.serviceRecordId
console.log(this.feedbackFormData)
// return false
const url = '/heart/icServiceFeedbackV2/add'
let params = {
...this.feedbackFormData
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.$message.success('反馈成功')
this.resetData()
this.$emit('handleOk')
} else {
this.$message.error(msg)
}
},
beforeUpload (file) {
const array = file.name.split('.')
const extension = array[array.length - 1]
const formatarray = ['jpg', 'png', 'jpeg', 'bmp', 'mp4', 'wma', 'm4a', 'mp3', 'doc', 'docx', 'xls', 'xlsx', 'pdf']
if (formatarray.indexOf(extension) === -1) {
this.$message.error('只支持图片、word、pdf')
return false
}
},
handleFileRemove (file) {
if (file && file.status === "success") {
this.fileList.splice(this.fileList.findIndex(item => item.uid === file.uid), 1)
}
},
handleFileSuccess (res, file) {
if (res.code === 0 && res.msg === 'success') {
const array = file.name.split('.')
const fileType = array[array.length - 1]
const picArray = ['jpg', 'png', 'jpeg', 'bmp']
const videoarray = ['mp4', 'wma', 'm4a']
const docArray = ['doc', 'docx', 'xls', 'xlsx', 'pdf']
const mp3Array = ['mp3']
if (picArray.indexOf(fileType) > -1) {
file.format = 'image'
} else if (videoarray.indexOf(fileType) > -1) {
file.format = 'video'
} else if (docArray.indexOf(fileType) > -1) {
file.format = 'doc'
} else if (mp3Array.indexOf(fileType) > -1) {
file.format = 'voice'
}
file.url = res.data.url
file.type = fileType
file.name = file.name
file.type = file.type
file.url = file.url
this.fileList.push(file)
console.log(this.fileList)
} else this.$message.error(res.msg)
},
//下载
handleFileDownload (file) {
var a = document.createElement('a');
var event = new MouseEvent('click');
a.download = file.name;
console.log(a)
a.href = file.url;
a.dispatchEvent(event);
},
handleCancle () {
this.resetData()
this.$emit('handleClose')
},
// 地图初始化函数,本例取名为init,开发者可根据实际情况定义
initMap () {
// 定义地图中心点坐标
var center = new window.TMap.LatLng(36.0722275, 120.38945519)
// 定义map变量,调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById('map_app'), {
center: center, // 设置地图中心点坐标
zoom: 17.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45 // 设置地图旋转角度
})
search = new window.TMap.service.Search({ pageSize: 10 })
// 新建一个地点搜索类
markers = new TMap.MultiMarker({
map: map,
geometries: []
})
infoWindowList = Array(10)
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
// 监听地图平移结束
map.on('panend', () => {
this.handleMoveCenter()
})
this.handleMoveCenter()
this.convert()
this.firstInitMap = false
},
setMarker (lat, lng) {
markers.setGeometries([])
markers.add([
{
id: '4',
styleId: 'marker',
position: new TMap.LatLng(lat, lng),
properties: {
title: 'marker4'
}
}
])
},
handleSearchMap () {
infoWindowList.forEach((infoWindow) => {
infoWindow.close()
})
infoWindowList.length = 0
markers.setGeometries([])
// 在地图显示范围内以给定的关键字搜索地点
search
.searchRectangle({
keyword: this.keyWords,
bounds: map.getBounds()
})
.then((result) => {
let { data } = result
if (Array.isArray(data) && data.length > 0) {
const {
location: { lat, lng }
} = data[0]
map.setCenter(new TMap.LatLng(lat, lng))
this.setMarker(lat, lng)
this.feedbackFormData.latitude = lat
this.feedbackFormData.longitude = lng
this.convert()
} else {
this.$message.error('未检索到相关位置坐标')
}
})
},
handleMoveCenter () {
//修改地图中心点
const center = map.getCenter()
const lat = center.getLat()
const lng = center.getLng()
this.feedbackFormData.latitude = lat
this.feedbackFormData.longitude = lng
this.setMarker(lat, lng)
this.convert(lat, lng)
},
convert (lat, lng) {
markers.setGeometries([]);
// var input = document.getElementById('location').value.split(',');
let location
if (lat && lng) {
location = new TMap.LatLng(lat, lng);
} else {
location = new TMap.LatLng(this.feedbackFormData.latitude, this.feedbackFormData.longitude);
}
// map.setCenter(location);
markers.updateGeometries([
{
id: 'main', // 点标注数据数组
position: location,
},
]);
geocoder
.getAddress({ location: location }) // 将给定的坐标位置转换为地址
.then((result) => {
this.feedbackFormData.address = result.result.address
// 显示搜索到的地址
});
},
resetData () {
this.formData = {
objList: [],//
principalName: '',//经办人(责任人)姓名
principalContact: '',//经办人联系方式
serviceTimeStart: '',//服务起始时间yyyy-MM-dd
serviceTimeEnd: '',//服务截止时间yyyy-MM-dd
remark: '',//
feedback: {},//反馈。允许发起服务的时候直接填写反馈,完成服务。
}
this.feedbackFormData = {
serviceGoal: '',// 服务目标
serviceEffect: '',// 服务效果
servicePeopleNumber: null,// 服务人数
serviceStatus: 'completed',// 服务状态。in_service服务中;completed:已完成
satisfaction: '',//满意度。不满意:bad、基本满意:good、非常满意:perfect
longitude: '',// 经度
latitude: '',// 维度
address: '',
fileList: [],// 附件列表
}
},
// 开启加载动画
startLoading () {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close()
}
}
},
computed: {
dataRule () {
return {
serviceName: [
{ required: true, message: '服务名称不能为空', trigger: 'change' }
],
serviceOrgId: [
{ required: true, message: '服务组织不能为空', trigger: 'change' }
],
serviceTimeStart: [
{ required: true, message: '服务时间不能为空', trigger: 'change' }
],
objList: [
{ required: true, message: '服务范围不能为空', trigger: 'change' }
],
}
},
feedbackDataRule () {
return {
serviceGoal: [
{ required: true, message: '服务目标不能为空', trigger: 'blur' }
],
serviceEffect: [
{ required: true, message: '服务效果不能为空', trigger: 'blur' }
],
servicePeopleNumber: [
{ required: true, message: '服务人数不能为空', trigger: 'blur' }
],
serviceStatus: [
{ required: true, message: '服务状态不能为空', trigger: 'blur' }
],
satisfaction: [
{ required: true, message: '满意度不能为空', trigger: 'blur' }
],
address: [
{ required: true, message: '地址不能为空', trigger: 'blur' }
]
}
},
},
props: {
serviceRecordId: {
type: String,
required: ''
},
serviceCategoryKey: {
type: String,
required: ''
},
serviceProjectName: {//服务项目名称
type: String,
required: false,
default: ''
},
formType: { //表单操作类型 add新增,edit编辑,detail详情,feedback反馈
type: String,
required: ''
},
categrayArray: {
type: Array,
default () {
return []
}
},
}
}
</script>
<style lang="scss" scoped >
@import "@/assets/scss/modules/management/form-main.scss";
</style>