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.
1170 lines
32 KiB
1170 lines
32 KiB
<template>
|
|
<div>
|
|
<div
|
|
class="dialog-h-content scroll-h"
|
|
:class="{ 'visiual-form': source === 'visiual' }"
|
|
>
|
|
<el-form
|
|
v-if="formType === 'add'"
|
|
ref="ref_form"
|
|
:inline="true"
|
|
:model="formData"
|
|
:rules="dataRule"
|
|
class="div_form"
|
|
>
|
|
<el-form-item
|
|
label="服务分类"
|
|
prop="serviceCategoryKey"
|
|
label-width="150px"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
style="display: block"
|
|
>
|
|
<el-select
|
|
v-model="formData.serviceCategoryKey"
|
|
class="item_width_1"
|
|
placeholder="请选择"
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="item in categrayOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="服务名称"
|
|
prop="serviceName"
|
|
label-width="150px"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
prop="serviceTimeStart"
|
|
>
|
|
<el-date-picker
|
|
v-model="formData.serviceTimeStart"
|
|
:picker-options="startPickerOptions"
|
|
class="item_width_2"
|
|
style="width: 220px"
|
|
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"
|
|
style="width: 220px"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
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"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
style="display: block"
|
|
>
|
|
<div style="width: 500px">
|
|
<div class="div_map">
|
|
<div id="map_app"></div>
|
|
<div class="div_searchmap">
|
|
<el-input
|
|
maxlength="50"
|
|
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="附件"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
label-width="150px"
|
|
prop="attach"
|
|
>
|
|
<el-upload
|
|
:headers="$getElUploadHeaders()"
|
|
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";
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
import daiMap from "@/utils/dai-map";
|
|
|
|
let loading; // 加载动画
|
|
let map;
|
|
|
|
export default {
|
|
props: {
|
|
defaultData: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
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 [];
|
|
},
|
|
},
|
|
source: {
|
|
//展示来源：manage 管理平台 visiual 可视化平台
|
|
type: String,
|
|
default: "manage",
|
|
},
|
|
},
|
|
|
|
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,
|
|
emitPath: false,
|
|
},
|
|
|
|
keyWords: "",
|
|
formData: {
|
|
serviceCategoryKey: "",
|
|
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,
|
|
|
|
categrayOptions: [],
|
|
statusArray: [
|
|
{
|
|
value: "in_service",
|
|
label: "进行中",
|
|
},
|
|
{
|
|
value: "completed",
|
|
label: "已完成",
|
|
},
|
|
],
|
|
satisfyArray: [
|
|
{
|
|
value: "bad",
|
|
label: "不满意",
|
|
},
|
|
{
|
|
value: "good",
|
|
label: "基本满意",
|
|
},
|
|
{
|
|
value: "perfect",
|
|
label: "非常满意",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
|
|
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" }],
|
|
};
|
|
},
|
|
},
|
|
|
|
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();
|
|
// 都已经重置了，还放在prop里干嘛，我不理解
|
|
this.categrayOptions = this.categrayArray;
|
|
|
|
this.getCategrayList();
|
|
this.getDictOptions();
|
|
this.getPolicyList();
|
|
if (this.formType === "feedback" || this.showFeedback) {
|
|
this.initMap();
|
|
this.$refs.ref_form_feedback.resetFields();
|
|
}
|
|
|
|
if (this.formType === "add") {
|
|
this.$refs.ref_form.resetFields();
|
|
await this.loadScopeTree();
|
|
} else {
|
|
}
|
|
|
|
await this.iniDefaultData();
|
|
|
|
this.endLoading();
|
|
},
|
|
|
|
methods: {
|
|
async iniDefaultData() {
|
|
const { defaultData } = this;
|
|
console.log("iniDefaultData3", defaultData);
|
|
if (defaultData) {
|
|
const { serviceOrgType, serviceOrgId, scopeIdArray } = defaultData;
|
|
if (serviceOrgType) {
|
|
this.formData.serviceOrgType = serviceOrgType;
|
|
await this.getServiceuserList(serviceOrgType, "add_demand");
|
|
}
|
|
if (serviceOrgId) {
|
|
this.formData.serviceOrgId = serviceOrgId;
|
|
}
|
|
if (scopeIdArray) {
|
|
this.scopeIdArray = scopeIdArray;
|
|
await nextTick();
|
|
this.handleChangeScope();
|
|
}
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
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("网络错误");
|
|
});
|
|
},
|
|
|
|
// 字典
|
|
async getCategrayList() {
|
|
const url = "/sys/dict/data/dictlist";
|
|
|
|
let params = {
|
|
dictType: "ic_service_type",
|
|
};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
this.categrayOptions = data;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
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();
|
|
});
|
|
}
|
|
},
|
|
|
|
// 获取服务范围树
|
|
async loadScopeTree() {
|
|
const url = "/gov/org/icServiceProject/service/serviceScopeTree";
|
|
// const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree'
|
|
let params = {};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
++this.iscascaderShow;
|
|
this.casOptions = [];
|
|
this.scopeIdArray = [];
|
|
this.casOptions.push(data);
|
|
} else {
|
|
this.$message.error(rspMsg);
|
|
}
|
|
},
|
|
|
|
handleChangeScope(value) {
|
|
this.formData.objList = [];
|
|
let selArray = this.$refs["myCascader"].getCheckedNodes();
|
|
console.log("handleChangeScope", selArray);
|
|
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;
|
|
}
|
|
|
|
if (this.source === "manage") {
|
|
this.formData.serviceCategoryKey = this.serviceCategoryKey;
|
|
}
|
|
const url = "/heart/icServiceRecordV2/add";
|
|
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/icServiceProject/service/initiate'
|
|
let params = {
|
|
...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() {
|
|
let { latitude, longitude } = this.$store.state.user;
|
|
|
|
map = new daiMap(
|
|
document.getElementById("map_app"),
|
|
{ latitude, longitude },
|
|
{
|
|
zoom: 16.2, // 设置地图缩放级别
|
|
pitch: 43.5, // 设置俯仰角
|
|
rotation: 45, // 设置地图旋转角度
|
|
}
|
|
);
|
|
|
|
// 监听地图平移结束
|
|
map.on("dragend", (e) => {
|
|
this.handleMoveCenter(e);
|
|
});
|
|
|
|
map.setCenter(latitude, longitude);
|
|
map.setMarker(latitude, longitude);
|
|
},
|
|
|
|
async handleMoveCenter() {
|
|
//修改地图中心点
|
|
const { lat, lng } = map.getCenter();
|
|
this.feedbackFormData.latitude = lat;
|
|
this.feedbackFormData.longitude = lng;
|
|
map.setMarker(lat, lng);
|
|
|
|
let { msg, data } = await map.getAddress(lat, lng);
|
|
if (msg == "success") {
|
|
this.feedbackFormData.address = data.address;
|
|
}
|
|
},
|
|
|
|
async handleSearchMap() {
|
|
const { msg, data } = await map.searchNearby(this.keyWords);
|
|
if (msg == "success") {
|
|
const { lat, lng } = data;
|
|
map.setCenter(lat, lng);
|
|
map.setMarker(lat, lng);
|
|
this.feedbackFormData.latitude = lat;
|
|
this.feedbackFormData.longitude = lng;
|
|
} else {
|
|
this.$message.error("未检索到相关位置坐标");
|
|
}
|
|
},
|
|
|
|
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();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/scss/modules/management/form-main.scss";
|
|
@import "@/assets/scss/modules/visual/a_customize.scss";
|
|
|
|
.form-item::v-deep .el-form-item__label {
|
|
color: #fff;
|
|
}
|
|
.form-item {
|
|
.el-radio {
|
|
color: #fff;
|
|
}
|
|
|
|
.el-checkbox {
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|
|
|