<template>
|
<div class="shop_work_box">
|
<div class="nav-title">
|
<div class="left-tab">
|
<span
|
:class="tabIndex == index ? 'active' : ''"
|
v-for="(item, index) in tabList"
|
:key="index"
|
@click="tabClick(index)"
|
>{{ item.text }}</span
|
>
|
</div>
|
<div class="right-tab">
|
<el-button @click="$router.back()">关闭</el-button>
|
<el-button type="primary" plain @click="sub">发布</el-button>
|
</div>
|
</div>
|
|
<div v-if="isShowadd">
|
<div class="lines">
|
<!-- <h6>基本信息</h6> -->
|
<div class="demo_form">
|
<section>
|
<p class="label" data-require>在线办理：</p>
|
<article>
|
<el-checkbox
|
style="margin-top:10px;"
|
:true-label="1"
|
:false-label="0"
|
v-model="canOnline"
|
@change="canOnlineChange"
|
>支持</el-checkbox
|
>
|
</article>
|
</section>
|
<section>
|
<p class="label" data-require>标题：</p>
|
<article>
|
<input
|
type="text"
|
class="m_inp"
|
placeholder="请输入标题"
|
maxlength="35"
|
v-model="os.title"
|
/>
|
</article>
|
</section>
|
<section>
|
<p class="label" data-require>所属分类：</p>
|
<article>
|
<el-select v-model="classifyId" filterable placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</article>
|
</section>
|
<section>
|
<p class="label" data-require>正文：</p>
|
<article>
|
<div class="edit">
|
<!-- <v-e :content="content" @input="onInputMessage"></v-e> -->
|
<quill-editor
|
@editorContext="onInputMessage"
|
:contentText="content"
|
></quill-editor>
|
</div>
|
</article>
|
</section>
|
</div>
|
</div>
|
<div class="lines">
|
<h6>常规信息</h6>
|
<div class="demo_form">
|
<section>
|
<p class="label">办理时间：</p>
|
<article>
|
<input
|
type="text"
|
class="m_inp"
|
placeholder="请输入办理时间"
|
maxlength="35"
|
v-model="os.timeAt"
|
/>
|
</article>
|
</section>
|
|
<section class="sec">
|
<p class="label" data-require>办理地点：</p>
|
<article>
|
<el-input
|
size="small"
|
placeholder="请选择办理地点"
|
v-model="os.address"
|
@input="onSelectAddress"
|
></el-input>
|
</article>
|
</section>
|
|
<section class="sec">
|
<p class="label"></p>
|
<article>
|
<div class="map" id="com-map-data"></div>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">纬度：</p>
|
<article>
|
<el-input size="small" readonly v-model="os.lat"></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">经度：</p>
|
<article>
|
<el-input size="small" readonly v-model="os.lon"></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label" data-require>咨询电话：</p>
|
<article>
|
<el-input
|
size="small"
|
placeholder="请填写咨询电话"
|
maxlength="20"
|
v-model="os.phone"
|
></el-input>
|
</article>
|
</section>
|
|
<!-- <section>
|
<p class="label">办理地点：</p>
|
<article>
|
<input
|
type="text"
|
maxlength="35"
|
placeholder="请填写办理地点"
|
v-model="os.address"
|
class="m_inp"
|
@input="onSelectAddress"
|
/>
|
<div class="map">
|
<v-m
|
:search="os.address"
|
:wait="mapSearch"
|
@on-click-dot="onMapClickDot"
|
@on-click="onMapClick"
|
@on-created="onMapInit"
|
></v-m>
|
</div>
|
</article>
|
</section>
|
<section>
|
<p class="label">咨询电话：</p>
|
<article>
|
<input
|
type="text"
|
maxlength="11"
|
placeholder="请填写咨询电话"
|
v-model="os.phone"
|
class="m_inp"
|
/>
|
</article>
|
</section> -->
|
</div>
|
</div>
|
<div class="lines">
|
<h6>申报材料</h6>
|
<v-tool-table :trs="trs" :tds="tds" endWidth="100px" end>
|
<template v-slot:end-th>
|
<div class="table_flex">
|
<span @click="onAddTd">添加材料</span>
|
</div>
|
</template>
|
<template v-slot:end-td="item">
|
<div class="table_flex">
|
<span @click="onDelTd(item.scope)">删除材料</span>
|
</div>
|
</template>
|
<template v-slot:name="item">
|
<div v-if="item.scope.sort" class="all_line">
|
{{ item.scope.val }}
|
</div>
|
<input
|
type="text"
|
class="m_inp texts"
|
placeholder="例：身份证、户口本及复印件"
|
maxlength="120"
|
v-model="item.scope.val"
|
v-else
|
/>
|
</template>
|
<template v-slot:id="item">
|
{{ item.scope.table_id + 1 }}
|
</template>
|
</v-tool-table>
|
</div>
|
</div>
|
|
<!-- 问卷内容 -->
|
<div class="form-box" v-show="isShowFrom">
|
<home ref="forms" @run="run" :list="list"></home>
|
<!-- <fc-designer ref="designer"/>-->
|
</div>
|
|
<!-- <div class="sub">
|
<button class="m_btn bgc_primary small" @click="sub">提交</button>
|
<button class="m_btn small" @click="$router.back()">取消</button>
|
</div> -->
|
<div class="end"></div>
|
</div>
|
</template>
|
|
<script>
|
// import vE from "com/editor/editor";
|
import QuillEditor from "com/editor/quilleditor"; //富文本组件
|
|
import vM from "com/map/map";
|
import $map from "js/map";
|
import home from "../../form/Home";
|
|
export default {
|
props: {
|
edit: { type: Boolean, default: false }
|
},
|
components: { vM, home, QuillEditor },
|
data() {
|
return {
|
trs: [
|
{ text: "序号", val: "btn", width: "50px", slot: "id" },
|
{ text: "材料名称", val: "btn", slot: "name" }
|
],
|
tds: [],
|
mapValue: "",
|
os: {
|
address: "",
|
content: "",
|
lat: "",
|
lon: "",
|
phone: "",
|
title: "",
|
timeAt: "",
|
materials: []
|
},
|
options: [],
|
classifyId: "",
|
content: "",
|
id: "",
|
maps: null,
|
mapSearch: 0,
|
$map: null,
|
isSearch: false,
|
map: null,
|
citys: [],
|
isShowFrom: false,
|
isShowadd: true,
|
fromData: [],
|
list: [],
|
tabIndex: 0,
|
canOnline: 0,
|
tabList: [
|
{
|
id: 1,
|
text: "基础信息"
|
}
|
]
|
};
|
},
|
watch: {},
|
methods: {
|
canOnlineChange(e) {
|
if (this.canOnline) {
|
this.tabList = [
|
{
|
id: 1,
|
text: "基础信息"
|
},
|
{
|
id: 1,
|
text: "问卷内容"
|
}
|
];
|
} else {
|
this.tabList = [
|
{
|
id: 1,
|
text: "基础信息"
|
}
|
];
|
}
|
},
|
tabClick(index) {
|
this.tabIndex = index;
|
if (index == "0") {
|
this.isShowFrom = false;
|
this.isShowadd = true;
|
} else {
|
this.isShowFrom = true;
|
this.isShowadd = false;
|
}
|
},
|
setCity() {
|
//解决编辑时所在地无法显示问题 注意不是 $map.setCity
|
let ts = this;
|
let v = ts.citys.filter(r => {
|
return r.districtName === ts.detail.areaName;
|
});
|
if (v[0]) {
|
ts.city = ["1", "2", v[0].id];
|
ts.$nextTick(() => {
|
$map.clearDot(ts.map);
|
$map.clickDot = $map.dot(ts.map, ts.detail);
|
ts.isSearch = false;
|
setTimeout(() => {
|
ts.map.setCenter([ts.detail.lng, ts.detail.lat]);
|
}, 300);
|
});
|
}
|
},
|
onSelectAddress(v) {
|
this.searchMap(v, true);
|
},
|
searchMap(v, flg) {
|
let ts = this;
|
if (ts.isSearch) return 0;
|
$map.search(
|
v,
|
e => {
|
if (e.code === 1000) {
|
ts.os.lat = e.e.lat;
|
ts.os.lon = e.e.lng;
|
if (flg) {
|
ts.os.address = e.e.address;
|
}
|
$map.clearDot(ts.map);
|
$map.clickDot = $map.dot(ts.map, e.e);
|
}
|
},
|
true,
|
ts.map
|
);
|
},
|
onMapInit(v) {
|
this.maps = v.event;
|
this.$map = v.map;
|
},
|
isNulls(v, msg) {
|
if (this.os[v] === "") {
|
demo.toast(msg);
|
return !1;
|
}
|
return !0;
|
},
|
// 提交
|
sub() {
|
if (!this.os.title) return demo.toast("请输入标题");
|
if (!this.os.content) return demo.toast("请输入正文");
|
if (!this.classifyId) return demo.toast("请选择所属分类");
|
if (!this.os.lat) return demo.toast("请选择办理地点");
|
if (!this.os.lon) return demo.toast("请选择办理地点");
|
let ts = this;
|
|
let vs = ts.tds.filter(r => {
|
return (r.val || "").split(" ").join("") !== "";
|
});
|
if (vs.length !== ts.tds.length) {
|
return demo.toast("请完整填写申报材料");
|
}
|
ts.os.materials = this.tds.map(r => {
|
return { materialName: r.val, id: r.id || 0 };
|
});
|
ts.os.classify = this.classifyId;
|
ts.os.isOnLine = this.canOnline;
|
|
if (this.canOnline) {
|
this.$refs.forms.run();
|
ts.os.jsonObject = JSON.stringify(this.fromData);
|
}
|
|
console.log("ts.os+++", JSON.stringify(ts.os));
|
if (ts.edit) {
|
ts.os.id = ts.id;
|
ts.$api.post("Jinhui/editworkguide", ts.os, e => {
|
demo.toast("编辑成功");
|
this.onGetEditDetail();
|
this.$router.back();
|
});
|
return 0;
|
}
|
ts.$api.post("Jinhui/addworkguide", ts.os, () => {
|
demo.toast("添加成功");
|
setTimeout(() => {
|
ts.$router.back();
|
}, 800);
|
});
|
},
|
// 富文本
|
onInputMessage(v) {
|
this.os.content = v;
|
},
|
// 点击地图
|
onMapClick(v) {
|
this.os.lon = v.lng;
|
this.os.lat = v.lat;
|
this.os.address = v.geo.formattedAddress;
|
},
|
// 点击小点
|
onMapClickDot(v) {
|
this.os.address = v.address;
|
this.os.lon = v.lng;
|
this.os.lat = v.lat;
|
},
|
onDelTd(v) {
|
if (v.val === "") {
|
this.tds = this.tds.filter(r => {
|
return r.table_id !== v.table_id;
|
});
|
return 0;
|
}
|
this.$js.model("删除", "是否删除申报材料", res => {
|
if (res) {
|
this.tds = this.tds.filter(r => {
|
return r.table_id !== v.table_id;
|
});
|
}
|
});
|
},
|
onAddTd() {
|
let vs = this.tds.filter(r => {
|
return (r.val || "").split(" ").join("") !== "";
|
});
|
if (vs.length !== this.tds.length) {
|
return demo.toast("请完整填写申报材料");
|
}
|
this.tds = this.tds.map(r => {
|
r.sort = 1;
|
return r;
|
});
|
this.tds.push({ val: "" });
|
},
|
run(e) {
|
this.fromData = e;
|
},
|
onGetEditDetail() {
|
this.$api.get("Jinhui/detailworkguide", { workGuideId: this.id }, e => {
|
if (e.id) {
|
this.setCity();
|
|
this.os = {
|
address: e.address,
|
content: e.content,
|
lat: e.lat,
|
lon: e.lon,
|
phone: e.phone,
|
title: e.title,
|
timeAt: e.timeAt,
|
materials: e.materials
|
};
|
|
this.canOnline = e.isOnLine * 1;
|
this.canOnlineChange();
|
this.list = JSON.parse(e.jsonObject);
|
|
(this.classifyId = e.classify), (this.content = e.content);
|
this.mapSearch++;
|
// this.$nextTick(() => {
|
// this.mapValue = e.address;
|
// });
|
this.tds = e.materials.map(r => {
|
return {
|
val: r.materialName,
|
id: r.id,
|
sort: 1
|
};
|
});
|
if (e.lat && e.lon && this.maps && !isNaN(e.lat) && !isNaN(e.lon)) {
|
this.maps.setCenter([e.lon, e.lat]);
|
this.$map.dot(this.maps, { lng: e.lon, lat: e.lat });
|
}
|
}
|
});
|
},
|
getStatus() {
|
this.$api.post("Jinhui/workGuide/classify/apage", {}, e => {
|
this.options = e.records.map(d => {
|
return {
|
value: d.id,
|
label: d.classifyName
|
};
|
});
|
});
|
}
|
},
|
mounted() {
|
if (this.edit) {
|
this.id = this.$route.params.id;
|
this.onGetEditDetail();
|
}
|
this.getStatus();
|
let ts = this;
|
|
ts.map = $map.init("com-map-data");
|
$map.click(ts.map, e => {
|
ts.os.lat = e.lat;
|
ts.os.lon = e.lng;
|
var geocoder = new AMap.Geocoder({
|
//地址逆向编码
|
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
});
|
var lnglat = [e.lng, e.lat];
|
|
geocoder.getAddress(lnglat, function(status, result) {
|
console.log(result.regeocode.formattedAddress);
|
ts.os.address = result.regeocode.formattedAddress;
|
if (status === "complete" && result.info === "OK") {
|
// result为对应的地理位置详细信息
|
}
|
});
|
});
|
$map.setCity("攀枝花", ts.map);
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.shop_work_box {
|
overflow-y: auto;
|
.sub {
|
display: flex;
|
margin: 20px 0 0;
|
.m_btn {
|
min-width: 80px;
|
margin-right: 10px;
|
}
|
}
|
.texts {
|
display: block;
|
width: 100%;
|
}
|
.end {
|
height: 100px;
|
}
|
.map {
|
height: 400px;
|
background-color: #eee;
|
margin: 5px 0 0;
|
border-radius: 5px;
|
overflow: hidden;
|
}
|
.edit {
|
height: 400px;
|
margin-bottom: 90px;
|
overflow: scroll;
|
}
|
.lines {
|
max-width: 700px;
|
position: relative;
|
margin-bottom: 18px;
|
h6 {
|
font-size: 16px;
|
padding: 10px 0;
|
}
|
}
|
.all_line {
|
word-break: break-all;
|
white-space: pre-wrap;
|
line-height: 1.2;
|
}
|
|
.nav-title {
|
width: 100%;
|
height: 50px;
|
line-height: 65px;
|
padding-bottom: 15px;
|
border-bottom: 1px #e6e6e6 solid;
|
margin-bottom: 30px;
|
.left-tab {
|
float: left;
|
span {
|
margin-right: 35px;
|
cursor: pointer;
|
color: #606266;
|
}
|
.active {
|
color: #409eff;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
}
|
.right-tab {
|
float: right;
|
}
|
}
|
}
|
</style>
|
