elink-star
/
epmet-oper-gov
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'dev-jichu' of http://git.elinkit.com.cn:7070/r/epmet-oper-gov into dev-jichu

shibei_prod
13176889840 4 years ago
parent
fc0666d8d3 7282eb36d2
commit
227e319a53
6 changed files with 2451 additions and 574 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/views/modules/base/community/community.vue
  2. 652
      src/views/modules/communityParty/regionalParty/activitys.vue
  3. 550
      src/views/modules/communityParty/regionalParty/activitysForm.vue
  4. 694
      src/views/modules/communityParty/regionalParty/units.vue
  5. 553
      src/views/modules/communityParty/regionalParty/unitsForm.vue
  6. 572
      src/views/modules/workPc/guidance/DetailForm copy.vue

4
src/views/modules/base/community/community.vue
View File

@ -292,9 +292,9 @@ export default {
</style>
<style>
.aui-content > .el-tabs > .el-tabs__content {
/* .aui-content > .el-tabs > .el-tabs__content {
padding: 0px;
}
} */
.el-scrollbar__wrap {
overflow-x: hidden !important;
}

652
src/views/modules/communityParty/regionalParty/activitys.vue
View File

@ -0,0 +1,652 @@
<template>
<div class="div_main">
<div class="div_search">
<el-form :inline="true"
:model="formData"
ref="ref_searchform"
:label-width="'100px'">
<div>
<el-form-item label="单位名称"
prop="unitId">
<el-select class="item_width_1"
v-model="formData.unitId"
placeholder="全部"
clearable>
<el-option v-for="item in unitList"
:key="item.unitId"
:label="item.unitName"
:value="item.unitId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间"
prop="startTime">
<el-date-picker v-model="timeRange"
type="daterange"
@change="handleTimeChange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
</div>
<div>
<el-form-item label="活动标题"
prop="title">
<el-input v-model="formData.title"
class="item_width_1"
size="small"
clearable
placeholder="请输入内容">
</el-input>
</el-form-item>
<el-form-item label="服务事项"
prop="serviceMatter">
<el-select class="item_width_1"
v-model="formData.serviceMatter"
placeholder="请选择"
clearable>
<el-option v-for="item in serviceList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-button style="margin-left:10px"
type="primary"
size="small"
@click="handleSearch">查询</el-button>
<el-button style="margin-left:10px"
type="yellow"
size="small"
@click="resetSearch">重置</el-button>
</div>
</el-form>
</div>
<div class="div_table">
<div class="div_btn">
<el-button style="float:left"
type="green"
size="small"
@click="handleAdd">新增</el-button>
<el-upload ref="upload"
:multiple='false'
:show-file-list='false'
:before-upload="beforeUpload"
action=""
accept=".xls,.xlsx"
:limit="1"
:on-exceed="handleExceed"
:http-request="uploadFile">
<el-button style="margin-left:10px"
size="small"
type="red">导入</el-button>
<el-button style="float:left"
type="yellow"
size="small"
@click="handleExport">导出</el-button>
</el-upload>
</div>
<el-table class="table"
:data="tableData"
border
:height="tableHeight"
v-loading="tableLoading"
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
style="width: 100%">
<el-table-column label="序号"
header-align="center"
align="center"
type="index"
width="50"></el-table-column>
<el-table-column prop="unitName"
header-align="center"
align="center"
label="单位名称"
width="180">
</el-table-column>
<el-table-column prop="title"
header-align="center"
align="center"
label="活动标题"
min-width="180">
</el-table-column>
<el-table-column prop="address"
header-align="center"
align="center"
label="活动地址"
min-width="230">
</el-table-column>
<el-table-column prop="peopleCount"
header-align="center"
align="center"
label="服务人数"
width="100">
</el-table-column>
<el-table-column prop="activityTime"
header-align="center"
align="center"
label="活动时间"
width="230">
</el-table-column>
<el-table-column label="操作"
fixed="right"
width="140"
header-align="center"
align="center"
class="operate">
<template slot-scope="scope">
<el-button type="text"
style="color:#1C6AFD;text-decoration: underline;"
size="small"
@click="handleDetail(scope.row)">查看</el-button>
<el-button type="text"
style="color:#00A7A9;text-decoration: underline;"
size="small"
@click="handleEdit(scope.row)">修改</el-button>
<el-button type="text"
style="color:#D51010;text-decoration: underline;"
size="small"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pageNo"
:page-sizes="[10, 20, 50]"
:page-size="pageSize"
layout="sizes, prev, pager, next, total"
:total="total">
</el-pagination>
</div>
</div>
<!-- 修改弹出框 -->
<el-dialog :visible.sync="formShow"
:close-on-click-modal="false"
:close-on-press-escape="false"
:title="formTitle"
width="850px"
top="5vh"
@closed="diaClose">
<activitys-form ref="ref_form"
:unitList="unitList"
:serviceList="serviceList"
@dialogCancle="addFormCancle"
@dialogOk="addFormOk"></activitys-form>
</el-dialog>
</div>
</template>
<script>
import activitysForm from './activitysForm'
import util from '@js/util.js';
import { requestPost } from "@/js/dai/request";
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
let loading // 加载动画
export default {
data () {
return {
loading: false,
total: 0,
pageSize: 10,
pageNo: 0,
tableLoading: false,
agencyId: '',
unitList: [],//单位list
serviceList: [
{
id: "1",
name: '积极配合社区安全巡查员进行场所消防、安全等方面的检查。'
},
{
id: "2",
name: '积极配合'
},
{
id: "3",
name: '积极配合社区安全巡查员进行'
},
{
id: "4",
name: '积极配合社区安全巡查员进行场所消防、安全等方面的检查。并具备安全意识及设备设施'
},
],//服务list
pickerOptions: { //控制时间范围
disabledDate (time) {
return time.getTime() > (Date.now() - (24 * 60 * 60 * 1000))
}
},
timeRange: [],
unitId: '',
formData: {
unitId: '',
title: '',
serviceMatter: '',
startTime: '',
endTime: ''
},
tableData: [],
//form相关
formShow: false,
formTitle: '新增单位',
files: "",
fileName: "",
uploadUlr: window.SITE_CONFIG['apiURL'] + '/gov/org/neighborhood/import'
}
},
components: {
activitysForm
},
async created () {
},
async mounted () {
//获取服务事项
await this.loadService()
const { user } = this.$store.state
this.agencyId = user.agencyId
//获取建联单位
await this.loadUnit()
//获取网格下拉框数据
await this.loadTable()
},
methods: {
handleSearch () {
this.loadTable()
},
async loadUnit () {
// const url = "/heart/icpartyunit/option"
const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/option"
let params = {
agencyId: this.agencyId
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.unitList = data
} else {
this.$message.error(msg)
}
},
//获取服务事项下拉框
async loadService () {
// const url = "/heart/icresidemanddict/subcodelist"
const url = "http://yapi.elinkservice.cn/mock/245/heart/icresidemanddict/subcodelist"
let params = {
parentCategoryCode: '1010'
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.serviceList = data
} else {
this.$message.error(msg)
}
},
async loadTable () {
this.tableLoading = true
// const url = "/heart/icpartyactivity/list"
const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
let params = {
agencyId: this.agencyId,
pageSize: this.pageSize,
pageNo: this.pageNo,
...this.formData
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.total = data.total
this.tableData = data.list
} else {
this.$message.error(msg)
}
this.tableLoading = false
},
diaClose () {
this.$refs.ref_form.resetData()
this.formShow = false
},
handleDetail (row) {
this.formTitle = '详情'
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('detail', row.id)
})
},
handleAdd () {
this.formTitle = '新增'
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('add', null)
})
},
handleEdit (row) {
this.formTitle = '修改'
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('edit', row.id)
})
},
addFormCancle () {
this.formShow = false
},
addFormOk () {
this.formShow = false
this.loadTable()
},
async handleDelete (row) {
this.$confirm("确认删除?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.deleteUnit(row)
})
.catch(err => {
if (err == "cancel") {
}
});
},
async deleteUnit (row) {
// const url = "/heart/icpartyactivity/delete"
const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/delete"
let params = {
id: row.id
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.$message({
type: "success",
message: "删除成功"
});
this.loadTable()
} else {
this.$message.error(msg)
}
},
//重置搜索条件
resetSearch () {
this.timeRange = []
this.formData = {
gridId: '',
unitName: '',
serviceMatter: '',
type: '',
contact: '',
contactMobile: ''
}
},
//导出表格
async handleExport () {
let title = '—联建活动列表'
const url = "/heart/icpartyactivity/export"
let params = {
ownerName: this.ownerName,
ownerPhone: this.ownerPhone,
level: this.agencyObj.level,
id: this.agencyObj.id
}
app.ajax.exportFilePost(
url,
params,
(data, rspMsg) => {
this.download(data, title + '.xls')
},
(rspMsg, data) => {
this.$message.error(rspMsg);
}
);
},
// 下载文件
download (data, fileName) {
if (!data) {
return
}
var csvData = new Blob([data])
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(csvData, fileName);
}
// for Non-IE (chrome, firefox etc.)
else {
var a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
var url = window.URL.createObjectURL(csvData);
a.href = url;
a.download = fileName;
a.click();
a.remove();
window.URL.revokeObjectURL(url);
}
},
// 上传文件之前的钩子
beforeUpload (file) {
this.files = file;
const isText = file.type === 'application/vnd.ms-excel'
const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
if (!isText && !isTextComputer) {
this.$message.error('请选择正确格式的文件')
return false
} else {
this.fileName = file.name;
return true
}
},
// 上传文件个数超过定义的数量
handleExceed (files, fileList) {
this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`)
},
async uploadFile () {
this.loading = true
if (this.fileName == "") {
this.$message.warning('请选择要上传的文件！')
return false
}
//清空上传列表
this.$refs['upload'].clearFiles()
var url = '/heart/icpartyactivity/import'
let fileFormData = new FormData();
fileFormData.append('file', this.files);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
const { data, code, msg } = await requestPost(url, fileFormData)
if (code === 0) {
this.$message({
type: "success",
message: "导入成功"
});
this.loadTable()
} else {
this.$message.error(msg)
}
},
handleTimeChange (time) {
if (time) {
const startTimeArray = util.dateFormatter(time[0], 'date').split('-')
const endTimeArray = util.dateFormatter(time[1], 'date').split('-')
this.formData.startTime = startTimeArray[0] + startTimeArray[1] + startTimeArray[2]
this.formData.endTime = endTimeArray[0] + endTimeArray[1] + endTimeArray[2]
// this.startTimeShow = startTimeArray[0] + '年' + startTimeArray[1] + '月' + startTimeArray[2] + '日'
// this.endTimeShow = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日'
} else {
this.formData.startTime = ''
this.formData.endTime = ''
// this.startTimeShow = ''
// this.endTimeShow = ''
}
},
handleSizeChange (val) {
this.pageSize = val
this.pageNo = 1
this.loadTable()
},
handleCurrentChange (val) {
this.pageNo = val
this.loadTable()
},
// 开启加载动画
startLoading () {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close()
}
}
},
computed: {
tableHeight () {
return (this.clientHeight - 460)
},
rowHeight () {
return (this.clientHeight - 200) + 'px'
},
...mapGetters(['clientHeight'])
},
watch: {
},
props: {
}
}
</script>
<style lang="scss" scoped >
@import "@/assets/scss/buttonstyle.scss";
.div_main {
width: 100%;
}
.div_search {
background: #ffffff;
border-radius: 4px;
padding: 35px 20px;
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
}
.item_width_1 {
width: 260px;
}
.div_table {
background: #ffffff;
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin-top: 20px;
padding: 23px 30px 10px;
.table {
margin-top: 20px;
}
}
.div_btn {
}
.el-row {
/* margin-bottom: 20px; */
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin-right: 50px;
}
</style>

550
src/views/modules/communityParty/regionalParty/activitysForm.vue
View File

@ -0,0 +1,550 @@
<template>
<div>
<div>
<div>
<el-form ref="ref_form"
:inline="true"
:model="formData"
:rules="dataRule"
:disabled="formType === 'detail'"
class="form">
<el-form-item label="服务事项"
label-width="150px"
prop="serviceMatter">
<el-select class="item_width_1"
v-model="formData.serviceMatter"
placeholder="请选择"
clearable>
<el-option v-for="item in serviceList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="单位名称"
prop="unitId"
label-width="150px"
style="display: block">
<el-select class="item_width_1"
v-model="formData.unitId"
placeholder="请选择"
clearable>
<el-option v-for="item in unitList"
:key="item.unitId"
:label="item.unitName"
:value="item.unitId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="活动标题"
prop="title"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入活动标题"
v-model="formData.title">
</el-input>
</el-form-item>
<el-form-item label="活动目标"
prop="target"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
type="textarea"
maxlength="100"
show-word-limit
:rows="3"
placeholder="请输入活动目标，不超过100字"
v-model="formData.target"></el-input>
</el-form-item>
<el-form-item label="活动内容"
prop="target"
label-width="150px"
style="display: block">
<div class="item_width_1">
<Tinymce class="tinymce_view "
v-if="formType!='detail'"
v-model="formData.content"
:height="250"
placeholder="在这里输入文字" />
<p v-else
class="text_p"
v-html="item.content"></p>
</div>
</el-form-item>
<el-form-item label="服务人数"
style="display: block"
prop="peopleCount"
label-width="150px">
<el-input-number class="item_width_1"
v-model="formData.peopleCount"
:min="0"
label="服务人数"></el-input-number>
</el-form-item>
<el-form-item label="活动时间"
style="display: block"
prop="activityTime"
label-width="150px">
<el-date-picker v-model="formData.activityTime"
value-format="yyyyMMdd"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="活动坐标"
prop="longitude"
label-width="150px"
style="display: block">
<div class="item_width_1">
<div class="div_map">
<div id="app">
</div>
<div class="div_searchmap">
<el-input class="item_width_4"
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 style="margin-top: 10px">
<span>经度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入经度"
v-model="formData.longitude">
</el-input>
<span style="margin-left: 20px">纬度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入纬度"
v-model="formData.latitude">
</el-input>
</div>
</div>
</el-form-item>
<el-form-item label="活动地址"
prop="address"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
v-model="formData.address">
</el-input>
</el-form-item>
<el-form-item label="活动结果"
prop="result"
label-width="150px"
style="display: block">
<div class="item_width_1">
<Tinymce class="tinymce_view "
v-if="formType!='detail'"
v-model="formData.result"
:height="250"
placeholder="在这里输入文字" />
<p v-else
class="text_p"
v-html="item.result"></p>
</div>
</el-form-item>
</el-form>
</div>
</div>
<div class="div_btn">
<el-button @click="handleCancle">取 消</el-button>
<el-button v-if="formType != 'detail'"
type="primary"
:disabled="btnDisable"
@click="handleComfirm">确 定</el-button>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'
import Tinymce from '@c/tinymce/index.vue'
var map
var search
var markers
var infoWindowList
var geocoder // 新建一个正逆地址解析类
let loading // 加载动画
export default {
data () {
return {
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
btnDisable: false,
keyWords: '',
activityId: '',
formData: {
serviceMatter: '',//服务事项
unitId: '',//单位ID
title: '',//活动标题
target: '',//活动目标
contact: '',//活动内容
activityTime: '',//活动时间
peopleCount: 0,//服务人数
result: '', //活动结果
address: '', //详细地址
longitude: 36.0722275, //经度
latitude: 120.38945519 //纬度
},
}
},
components: { Tinymce },
mounted () {
this.initMap()
},
methods: {
async initForm (type, activityId) {
this.$refs.ref_form.resetFields();
// debugger
// map.setCenter(new TMap.LatLng(agencyObj.latitude, agencyObj.longitude))
this.formType = type
if (activityId) {
this.activityId = activityId
this.formData.id = activityId
await this.loadFormData()
}
},
//加载组织
async loadFormData () {
// const url = '/heart/icpartyactivity/detail'
const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/detail'
let params = {
id: this.activityId
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.formData = data
} else {
this.$message.error(msg)
}
},
async handleComfirm () {
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 {
this.addActivity()
}
})
},
async addActivity () {
// let url = '/heart/icpartyactivity/save'
let url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/save"
const { data, code, msg } = await requestPost(url, this.formData)
if (code === 0) {
this.$message({
type: 'success',
message: '新增联建单位成功'
})
this.resetData()
this.$emit('dialogOk')
this.btnDisable = false
} else {
this.btnDisable = false
this.$message.error(msg)
}
},
handleCancle () {
this.resetData()
this.$emit('dialogCancle')
},
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap () {
// 定义地图中心点坐标
var center = new window.TMap.LatLng(36.0722275, 120.38945519)
// 定义map变量，调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById('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()
},
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.formData.latitude = lat
this.formData.longitude = lng
this.convert()
} else {
this.$message.error('未检索到相关位置坐标')
}
})
},
handleMoveCenter () {
//修改地图中心点
const center = map.getCenter()
const lat = center.getLat()
const lng = center.getLng()
this.formData.latitude = lat
this.formData.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.formData.latitude, this.formData.longitude);
}
// map.setCenter(location);
markers.updateGeometries([
{
id: 'main', // 点标注数据数组
position: location,
},
]);
geocoder
.getAddress({ location: location }) // 将给定的坐标位置转换为地址
.then((result) => {
this.formData.address = result.result.address
// 显示搜索到的地址
});
},
resetData () {
this.activityId = ''
this.keyWords = ''
this.formData = {
serviceMatter: '',//服务事项
unitId: '',//单位ID
title: '',//活动标题
target: '',//活动目标
contact: '',//活动内容
activityTime: '',//活动时间
peopleCount: 0,//服务人数
result: '', //活动结果
address: '', //详细地址
longitude: 36.0722275, //经度
latitude: 120.38945519 //纬度
}
},
// 开启加载动画
startLoading () {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close()
}
}
},
computed: {
dataRule () {
return {
serviceMatter: [
{ required: true, message: '服务事项不能为空', trigger: 'blur' }
],
unitId: [
{ required: true, message: '单位名称不能为空', trigger: 'blur' },
],
title: [
{ required: true, message: '活动标题不能为空', trigger: 'blur' }
],
target: [
{ required: true, message: '活动目标不能为空', trigger: 'blur' }
],
content: [
{ required: true, message: '活动内容不能为空', trigger: 'blur' }
],
activityTime: [
{ required: true, message: '活动时间不能为空', trigger: 'blur' }
],
result: [
{ required: true, message: '活动结果不能为空', trigger: 'blur' }
],
address: [
{ required: true, message: '详细地址不能为空', trigger: 'blur' }
],
longitude: [
{ required: true, message: '坐标不能为空', trigger: 'blur' }
]
}
},
},
props: {
unitList: {
type: Array,
default: []
},
serviceList: {
type: Array,
default: []
},
}
}
</script>
<style scoped>
.item_width_1 {
width: 560px;
}
.item_width_2 {
width: 600px;
}
.item_width_3 {
margin-left: 10px;
width: 200px;
}
.item_width_4 {
width: 200px;
}
.div_map {
position: relative;
}
.div_searchmap {
z-index: 5000;
position: absolute;
top: 5px;
left: 5px;
}
.div_btn {
display: flex;
justify-content: flex-end;
}
.el-upload__tip {
color: rgb(155, 155, 155);
margin: 0;
}
.form {
margin-top: 30px;
}
.tinymce_view {
height: 400px;
overflow: auto;
}
</style>
<style lang=scss>
.el-dialog__body {
padding: 0 10px 20px !important;
}
</style>

694
src/views/modules/communityParty/regionalParty/units.vue
View File

@ -0,0 +1,694 @@
<template>
<div class="div_main">
<div class="div_search">
<el-form :inline="true"
:model="formData"
ref="ref_searchform"
:label-width="'100px'">
<div>
<el-form-item label="所属网格"
prop="gridId">
<el-select class="item_width_1"
v-model="formData.gridId"
placeholder="全部"
clearable>
<el-option v-for="item in gridList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="单位名称"
prop="unitName">
<el-input v-model="formData.unitName"
class="item_width_1"
size="small"
clearable
placeholder="请输入内容">
</el-input>
</el-form-item>
<el-form-item label="服务事项"
prop="serviceMatter">
<el-select class="item_width_1"
v-model="formData.serviceMatter"
placeholder="请选择"
clearable>
<el-option v-for="item in serviceList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="分类"
prop="type">
<el-select class="item_width_1"
v-model="formData.type"
placeholder="请选择"
clearable>
<el-option v-for="item in typeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="联系人"
prop="contact">
<el-input v-model="formData.contact"
class="item_width_1"
size="small"
clearable
placeholder="请输入内容">
</el-input>
</el-form-item>
<el-form-item label="联系电话"
prop="contactMobile">
<el-input v-model="formData.contactMobile"
class="item_width_1"
size="small"
clearable
placeholder="请输入内容">
</el-input>
</el-form-item>
<el-button style="margin-left:10px"
type="primary"
size="small"
@click="handleSearch">查询</el-button>
<el-button style="margin-left:10px"
type="yellow"
size="small"
@click="resetSearch">重置</el-button>
</div>
</el-form>
</div>
<div class="div_table">
<div class="div_btn">
<el-button style="float:left"
type="green"
size="small"
@click="handleAdd">新增</el-button>
<el-upload ref="upload"
:multiple='false'
:show-file-list='false'
:before-upload="beforeUpload"
action=""
accept=".xls,.xlsx"
:limit="1"
:on-exceed="handleExceed"
:http-request="uploadFile">
<el-button style="margin-left:10px"
size="small"
type="red">导入</el-button>
<el-button style="float:left"
type="yellow"
size="small"
@click="handleExport">导出</el-button>
</el-upload>
</div>
<el-table class="table"
:data="tableData"
border
:height="tableHeight"
v-loading="tableLoading"
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
style="width: 100%">
<el-table-column label="序号"
header-align="center"
align="center"
type="index"
width="50"></el-table-column>
<el-table-column prop="gridName"
header-align="center"
align="center"
label="所属网格"
width="180">
</el-table-column>
<el-table-column prop="unitName"
header-align="center"
align="center"
label="单位名称"
width="180">
</el-table-column>
<el-table-column prop="type"
header-align="center"
align="center"
label="分类"
width="180">
</el-table-column>
<el-table-column prop="serviceMatter"
header-align="center"
align="center"
label="服务事项"
width="180">
</el-table-column>
<el-table-column prop="contact"
header-align="center"
align="center"
label="联系人"
width="100">
</el-table-column>
<el-table-column prop="contactMobile"
header-align="center"
align="center"
label="联系电话"
width="110">
</el-table-column>
<el-table-column prop="memberCount"
header-align="center"
align="center"
label="在职党员数"
width="150">
</el-table-column>
<el-table-column prop="satisfaction"
header-align="center"
align="center"
label="群众满意度"
width="150">
</el-table-column>
<el-table-column prop="remark"
header-align="center"
align="center"
label="备注"
:show-overflow-tooltip="true"
width="150">
</el-table-column>
<el-table-column label="操作"
fixed="right"
width="140"
header-align="center"
align="center"
class="operate">
<template slot-scope="scope">
<el-button type="text"
style="color:#1C6AFD;text-decoration: underline;"
size="small"
@click="handleDetail(scope.row)">查看</el-button>
<el-button type="text"
style="color:#00A7A9;text-decoration: underline;"
size="small"
@click="handleEdit(scope.row)">修改</el-button>
<el-button type="text"
style="color:#D51010;text-decoration: underline;"
size="small"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pageNo"
:page-sizes="[10, 20, 50]"
:page-size="pageSize"
layout="sizes, prev, pager, next, total"
:total="total">
</el-pagination>
</div>
</div>
<!-- 修改弹出框 -->
<el-dialog :visible.sync="formShow"
:close-on-click-modal="false"
:close-on-press-escape="false"
:title="formTitle"
width="850px"
top="5vh"
@closed="diaClose">
<units-form ref="ref_form"
:gridList="gridList"
:serviceList="serviceList"
:typeList="typeList"
@dialogCancle="addFormCancle"
@dialogOk="addFormOk"></units-form>
</el-dialog>
</div>
</template>
<script>
import unitsForm from './unitsForm'
import { requestPost } from "@/js/dai/request";
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
let loading // 加载动画
export default {
data () {
return {
loading: false,
total: 0,
pageSize: 10,
pageNo: 0,
tableLoading: false,
agencyId: '',
gridList: [],//所属网格list
unitList: [],//单位list
serviceList: [
{
id: "1",
name: '积极配合社区安全巡查员进行场所消防、安全等方面的检查。'
},
{
id: "2",
name: '积极配合'
},
{
id: "3",
name: '积极配合社区安全巡查员进行'
},
{
id: "4",
name: '积极配合社区安全巡查员进行场所消防、安全等方面的检查。并具备安全意识及设备设施'
},
],//服务list
typeList: [],//分类list
unitId: '',
formData: {
gridId: '',
unitName: '',
serviceMatter: '',
type: '',
contact: '',
contactMobile: ''
},
tableData: [],
//form相关
formShow: false,
formTitle: '新增单位',
files: "",
fileName: "",
uploadUlr: window.SITE_CONFIG['apiURL'] + '/gov/org/neighborhood/import'
}
},
components: {
unitsForm
},
async created () {
},
async mounted () {
//获取服务事项
await this.loadService()
//获取分类
await this.loadType()
const { user } = this.$store.state
this.agencyId = user.agencyId
//获取网格下拉框数据
await this.loadGrid()
await this.loadTable()
},
methods: {
handleSearch () {
this.loadTable()
},
async loadGrid () {
const url = "/gov/org/customergrid/gridoption"
let params = {
agencyId: this.agencyId
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.gridList = data
} else {
this.$message.error(msg)
}
},
//获取服务事项下拉框
async loadService () {
// const url = "/heart/icresidemanddict/subcodelist"
const url = "http://yapi.elinkservice.cn/mock/245/heart/icresidemanddict/subcodelist"
let params = {
parentCategoryCode: '1010'
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.serviceList = data
} else {
this.$message.error(msg)
}
},
//获取分类
async loadType () {
const url = "/sys/dict/data/dictlist"
let params = {
dictType: 'party_unit_type'
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.typeList = data
} else {
this.$message.error(msg)
}
},
async loadTable () {
this.tableLoading = true
// const url = "/heart/icpartyunit/list"
const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/list"
let params = {
pageSize: this.pageSize,
pageNo: this.pageNo,
agencyId: this.agencyId,
...this.formData
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.total = data.total
this.tableData = data.list
} else {
this.$message.error(msg)
}
this.tableLoading = false
},
diaClose () {
this.$refs.ref_form.resetData()
this.formShow = false
},
handleDetail (row) {
this.formTitle = '详情'
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('detail', row.id)
})
},
handleAdd () {
this.formTitle = '新增'
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('add', null)
})
},
handleEdit (row) {
this.formTitle = '修改'
this.formShow = true
this.$nextTick(() => {
this.$refs.ref_form.initForm('edit', row.id)
})
},
addFormCancle () {
this.formShow = false
},
addFormOk () {
this.formShow = false
this.loadTable()
},
async handleDelete (row) {
this.$confirm("确认删除?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.deleteUnit(row)
})
.catch(err => {
if (err == "cancel") {
}
});
},
async deleteUnit (row) {
// const url = "/heart/icpartyunit/delete"
const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/delete"
let params = {
id: row.id
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.$message({
type: "success",
message: "删除成功"
});
this.loadTable()
} else {
this.$message.error(msg)
}
},
//重置搜索条件
resetSearch () {
this.formData = {
gridId: '',
unitName: '',
serviceMatter: '',
type: '',
contact: '',
contactMobile: ''
}
},
//导出表格
async handleExport () {
let title = '联建单位列表'
const url = "/partyunit/export"
let params = {
ownerName: this.ownerName,
ownerPhone: this.ownerPhone,
level: this.agencyObj.level,
id: this.agencyObj.id
}
app.ajax.exportFilePost(
url,
params,
(data, rspMsg) => {
this.download(data, title + '.xls')
},
(rspMsg, data) => {
this.$message.error(rspMsg);
}
);
},
// 下载文件
download (data, fileName) {
if (!data) {
return
}
var csvData = new Blob([data])
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(csvData, fileName);
}
// for Non-IE (chrome, firefox etc.)
else {
var a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
var url = window.URL.createObjectURL(csvData);
a.href = url;
a.download = fileName;
a.click();
a.remove();
window.URL.revokeObjectURL(url);
}
},
// 上传文件之前的钩子
beforeUpload (file) {
this.files = file;
const isText = file.type === 'application/vnd.ms-excel'
const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
if (!isText && !isTextComputer) {
this.$message.error('请选择正确格式的文件')
return false
} else {
this.fileName = file.name;
return true
}
},
// 上传文件个数超过定义的数量
handleExceed (files, fileList) {
this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`)
},
async uploadFile () {
this.loading = true
if (this.fileName == "") {
this.$message.warning('请选择要上传的文件！')
return false
}
//清空上传列表
this.$refs['upload'].clearFiles()
var url = '/partyunit/import'
let fileFormData = new FormData();
fileFormData.append('file', this.files);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
const { data, code, msg } = await requestPost(url, fileFormData)
if (code === 0) {
this.$message({
type: "success",
message: "导入成功"
});
this.loadTable()
} else {
this.$message.error(msg)
}
},
handleSizeChange (val) {
this.pageSize = val
this.pageNo = 1
this.loadTable()
},
handleCurrentChange (val) {
this.pageNo = val
this.loadTable()
},
// 开启加载动画
startLoading () {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close()
}
}
},
computed: {
tableHeight () {
return (this.clientHeight - 460)
},
rowHeight () {
return (this.clientHeight - 200) + 'px'
},
...mapGetters(['clientHeight'])
},
watch: {
},
props: {
}
}
</script>
<style lang="scss" scoped >
@import "@/assets/scss/buttonstyle.scss";
.div_main {
width: 100%;
}
.div_search {
background: #ffffff;
border-radius: 4px;
padding: 35px 20px;
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
}
.item_width_1 {
width: 260px;
}
.div_table {
background: #ffffff;
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin-top: 20px;
padding: 23px 30px 10px;
.table {
margin-top: 20px;
}
}
.div_btn {
}
.el-row {
/* margin-bottom: 20px; */
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin-right: 50px;
}
</style>

553
src/views/modules/communityParty/regionalParty/unitsForm.vue
View File

@ -0,0 +1,553 @@
<template>
<div>
<div>
<div>
<el-form ref="ref_form"
:inline="true"
:model="formData"
:rules="dataRule"
:disabled="formType === 'detail'"
class="form">
<el-form-item label="所属网格"
prop="gridId"
label-width="150px"
style="display: block">
<el-select class="item_width_1"
v-model="formData.gridId"
placeholder="全部"
clearable>
<el-option v-for="item in gridList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="单位名称"
prop="unitName"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入单位名称"
v-model="formData.unitName">
</el-input>
</el-form-item>
<el-form-item label="分类"
prop="type"
label-width="150px"
style="display: block">
<el-select class="item_width_1"
v-model="formData.type"
placeholder="请选择"
filterable
clearable>
<el-option v-for="item in typeList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="服务事项"
prop="serviceMatter"
label-width="150px"
style="display: block">
<el-checkbox-group class="item_width_1"
style="display:flex;flex-wrap:wrap"
v-model="formData.serviceMatter">
<el-checkbox v-for="item in serviceList"
:key="item.value"
:label="item.value">{{item.label}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="联系人"
prop="contact"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
placeholder="请输入联系人姓名"
v-model="formData.contact">
</el-input>
</el-form-item>
<el-form-item label="联系电话"
prop="contactMobile"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
placeholder="请输入联系人电话"
v-model="formData.contactMobile">
</el-input>
</el-form-item>
<el-form-item label="在职党员"
style="display: block"
prop="memberCount"
label-width="150px">
<el-input-number class="item_width_1"
v-model="formData.memberCount"
:min="1"
label="单元数"></el-input-number>
</el-form-item>
<el-form-item label="备注"
prop="remark"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
type="textarea"
maxlength="500"
show-word-limit
:rows="3"
placeholder="请输入备注，不超过500字"
v-model="formData.remark"></el-input>
</el-form-item>
<el-form-item label="位置坐标"
prop="longitude"
label-width="150px"
style="display: block">
<div style="width:500px">
<div class="div_map">
<div id="app">
</div>
<div class="div_searchmap">
<el-input class="item_width_4"
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 style="margin-top: 10px">
<span>经度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入经度"
v-model="formData.longitude">
</el-input>
<span style="margin-left: 20px">纬度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入纬度"
v-model="formData.latitude">
</el-input>
</div>
</div>
</el-form-item>
<el-form-item label="地理位置"
prop="address"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
v-model="formData.address">
</el-input>
</el-form-item>
</el-form>
</div>
</div>
<div class="div_btn">
<el-button @click="handleCancle">取 消</el-button>
<el-button v-if="formType != 'detail'"
type="primary"
:disabled="btnDisable"
@click="handleComfirm">确 定</el-button>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'
var map
var search
var markers
var infoWindowList
var geocoder // 新建一个正逆地址解析类
let loading // 加载动画
export default {
data () {
return {
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
btnDisable: false,
unitId: '',
keyWords: '',
formData: {
gridId: '',
unitName: '',
serviceMatter: [],
type: '',
contact: '',
contactMobile: '',
memberCount: 0,
remark: '', //备注【最大500字】
address: '', //详细地址
longitude: 36.0722275, //经度
latitude: 120.38945519 //纬度
},
}
},
components: {},
mounted () {
this.initMap()
},
methods: {
async initForm (type, unitId) {
this.$refs.ref_form.resetFields();
// debugger
// map.setCenter(new TMap.LatLng(agencyObj.latitude, agencyObj.longitude))
this.formType = type
if (unitId) {
this.unitId = unitId
this.formData.id = unitId
await this.loadFormData()
}
},
//加载组织
async loadFormData () {
// const url = '/heart/icpartyunit/detail'
const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/detail'
let params = {
id: this.unitId
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.formData = data
} else {
this.$message.error(msg)
}
},
async handleComfirm () {
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 {
this.addUnit()
}
})
},
async addUnit () {
// const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码
// if (regPhone.test(this.formData.contactMobile) === false) {
// this.btnDisable = false
// this.$message({
// type: 'warning',
// message: '请输入正确的手机号码'
// })
// return false;
// }
// let url = '/heart/icpartyunit/save'
let url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/save"
// if (this.formType === 'edit') {
// this.formData.id = this.unitId
// }
const { data, code, msg } = await requestPost(url, this.formData)
if (code === 0) {
this.$message({
type: 'success',
message: '新增联建单位成功'
})
this.resetData()
this.$emit('dialogOk')
this.btnDisable = false
} else {
this.btnDisable = false
this.$message.error(msg)
}
},
handleCancle () {
this.resetData()
this.$emit('dialogCancle')
},
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap () {
// 定义地图中心点坐标
var center = new window.TMap.LatLng(36.0722275, 120.38945519)
// 定义map变量，调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById('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()
},
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.formData.latitude = lat
this.formData.longitude = lng
this.convert()
} else {
this.$message.error('未检索到相关位置坐标')
}
})
},
handleMoveCenter () {
//修改地图中心点
const center = map.getCenter()
const lat = center.getLat()
const lng = center.getLng()
this.formData.latitude = lat
this.formData.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.formData.latitude, this.formData.longitude);
}
// map.setCenter(location);
markers.updateGeometries([
{
id: 'main', // 点标注数据数组
position: location,
},
]);
geocoder
.getAddress({ location: location }) // 将给定的坐标位置转换为地址
.then((result) => {
this.formData.address = result.result.address
// 显示搜索到的地址
});
},
resetData () {
this.unitId = ''
this.keyWords = ''
this.formData = {
gridId: '',
unitName: '',
serviceMatter: [],
type: '',
contact: '',
contactMobile: '',
memberCount: 0,
remark: '', //备注【最大500字】
address: '', //详细地址
longitude: '', //经度
latitude: '' //纬度
}
},
// 开启加载动画
startLoading () {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close()
}
}
},
computed: {
dataRule () {
return {
gridId: [
{ required: true, message: '所属网格不能为空', trigger: 'blur' }
],
unitName: [
{ required: true, message: '单位名称不能为空', trigger: 'blur' },
],
type: [
{ required: true, message: '分类不能为空', trigger: 'blur' }
],
contact: [
{ required: true, message: '联系人不能为空', trigger: 'blur' }
],
contactMobile: [
{ required: true, message: '联系电话不能为空', trigger: 'blur' }
],
memberCount: [
{ required: true, message: '在职党员数不能为空', trigger: 'blur' }
],
address: [
{ required: true, message: '详细地址不能为空', trigger: 'blur' }
],
longitude: [
{ required: true, message: '坐标不能为空', trigger: 'blur' }
]
}
},
},
props: {
gridList: {
type: Array,
default: []
},
typeList: {
type: Array,
default: []
},
serviceList: {
type: Array,
default: []
},
}
}
</script>
<style scoped>
.item_width_1 {
width: 500px;
}
.item_width_2 {
width: 400px;
}
.item_width_3 {
margin-left: 10px;
width: 200px;
}
.item_width_4 {
width: 200px;
}
.div_map {
position: relative;
}
.div_searchmap {
z-index: 5000;
position: absolute;
top: 5px;
left: 5px;
}
.div_btn {
display: flex;
justify-content: flex-end;
}
.el-tabs {
margin: 0 20px;
}
.el-upload__tip {
color: rgb(155, 155, 155);
margin: 0;
}
.form {
margin-top: 30px;
}
</style>
<style lang=scss>
.el-dialog__body {
padding: 0 10px 20px !important;
}
</style>

572
src/views/modules/workPc/guidance/DetailForm copy.vue
View File

@ -1,572 +0,0 @@
<template>
<div class="div_main">
<div class="div_btn">
<el-button type="default"
size="mini"
@click="diaCancel">取消返回</el-button>
<el-button v-if="formType!='D'"
type="primary"
size="mini"
@click="saveForm">保存发布</el-button>
</div>
<div class="div_content">
<el-form :inline="true"
:model="dataForm"
:rules="dataRule"
ref="dataForm"
:disabled="formType=='D'"
:label-width="'120px'">
<el-form-item label="标题"
prop="title">
<el-input class="item_width_1"
v-model="dataForm.title"
placeholder="标题"></el-input>
</el-form-item>
<el-form-item label="分类"
prop="categoryCode">
<el-select class="item_width_1"
v-model="dataForm.categoryCode"
placeholder="请选择">
<el-option v-for="item in categoryList"
:key="item.categoryCode"
:label="item.categoryName"
:value="item.categoryCode">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="发布单位"
prop="orgId">
<el-select class="item_width_1"
v-model="dataForm.orgId"
placeholder="请选择">
<el-option v-for="(item,index) in orgList"
@click.native="orgChange(index)"
:key="item.orgId"
:label="item.orgName"
:value="item.orgId">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div class="div_editor">
<el-tabs v-model="activeName"
@tab-click="tabClick">
<el-tab-pane style="height:500px"
v-for="item in moduleArray"
:key="item.moduleId"
:label="item.moduleName"
:name="item.moduleId">
<quill-editor v-if="formType!='D'"
:ref="'text'+item.moduleId"
v-model="item.moduleContent"
:disabled="formType=='D'"
class="ql-container"
:options="item.editorOption"
@change="onEditorChange" />
<!-- <text v-else>{{item.moduleContent}}</text> -->
<p v-else
class="text_p"
v-html="item.moduleContent"></p>
</el-tab-pane>
</el-tabs>
</div>
<el-form :inline="true"
:model="externalLink"
ref="externalLink"
:disabled="formType=='D'"
:label-width="'120px'">
<el-form-item label="外链地址"
prop="externalLink">
<el-input class="item_width_1"
v-model="externalLink.externalLink"
placeholder="外链地址"></el-input>
</el-form-item>
<el-form-item label="地址说明"
prop="description">
<el-input class="item_width_1"
v-model="externalLink.description"
placeholder="地址说明"></el-input>
</el-form-item>
<div>
<el-form-item class="block"
label="附件"
prop="attach">
<el-upload class="upload-demo"
:action="uploadUlr"
:data="{customerId:customerId}"
accept=".doc,.pdf,.xls,.docx,.xlsx"
:on-success="handleFileSuccess"
:on-remove="handleFileRemove"
:on-preview="handleFileDownload"
:limit="3"
:before-upload="beforeUpload"
:file-list="fileList">
<el-button size="small"
type="primary">点击上传</el-button>
<div slot="tip"
class="el-upload__tip">只能上传word、excel、pdf文件</div>
</el-upload>
</el-form-item>
</div>
</el-form>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import Tinymce from '@c/tinymce/index.vue'
let loading// 加载动画
export default {
data () {
return {
customerId: '',
formType: '', // 操作类型A/U D(详情)
guideId: '', // 父组件传来功能id
categoryList: [],
orgList: [],
dataForm: {
guideId: '',
title: '',
categoryCode: '',
orgId: '',
orgType: '',
orgName: '',
moduleList: [],
externalLinks: [],
attachmentList: []
},
externalLink: {
externalLink: "",
description: ""
},
isLoaded: false,//是否加载结束
editorOption: {
placeholder: '编辑文章内容'
},
activeName: "",
moduleArray: [],
selTabIndex: 0,
fileList: [
// {
// name: 'food.jpeg',
// url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
// }, {
// name: 'food2.jpeg',
// url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
// }
],
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/upload-guide-file',
}
},
mounted () {
this.customerId = localStorage.getItem('customerId')
},
methods: {
saveProjectInfo () {
},
async initData (guideId, formType) {
this.startLoading()
this.formType = formType
this.guideId = guideId
this.resetData()
await this.loadOrg()
await this.getcategory()
await this.loadModule()
if (formType === 'A') {
} else {
this.guideId = guideId
this.dataForm.guideId = guideId
await this.loadFormData()
}
this.endLoading()
this.isLoaded = true
},
async getcategory () {
const url = '/gov/voice/guidecategory/getcategory'
// const url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guidecategory/getcategory'
const params = {
queryOrigin: 'saveorupdate'
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.categoryList = data
} else {
this.$message.error(msg)
}
},
async loadOrg () {
const url = '/gov/org/staff/orgList'
// const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/staff/orgList'
const params = {}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.orgList = data
if (data.length > 0) {
this.dataForm.orgId = data[0].orgId
this.dataForm.orgType = data[0].orgType
this.dataForm.orgName = data[0].orgName
}
} else {
this.$message.error(msg)
}
},
//获取模块tab
async loadModule () {
const url = '/gov/voice/guidemodule/list'
// const url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guidemodule/list'
const params = {}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.moduleArray = data
this.moduleArray.forEach(element => {
element.editorOption = {
placeholder: '输入' + element.moduleName
}
});
if (data.length > 0) {
this.activeName = data[0].moduleId
}
} else {
this.$message.error(msg)
}
},
//单位下拉框改变
orgChange (index) {
console.log(index)
this.dataForm.orgName = this.orgList[index].orgName
this.dataForm.orgType = this.orgList[index].orgType
},
tabClick (selTab) {
console.log(selTab.index)
this.selTabIndex = selTab.index
},
onEditorChange ({ editor, html, text }) {
if (this.isLoaded) {
this.moduleArray[this.selTabIndex].moduleContent = html
}
},
async loadFormData () {
this.isLoaded = false
// const url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guide/detail'
const url = '/gov/voice/guide/detail'
let params = {
guideId: this.guideId
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.dataForm = data
// debugger
if (data.externalLinks && data.externalLinks.length > 0) {
this.externalLink = data.externalLinks[0]
}
if (data.attachmentList) {
this.fileList = data.attachmentList
}
if (data.moduleList && data.moduleList.length > 0) {
this.moduleArray = data.moduleList
}
console.log(this.moduleArray)
} else {
this.$message.error(msg)
}
},
saveForm () {
this.dataForm.moduleList = []
this.moduleArray.forEach(element => {
if (element.moduleContent) {
this.dataForm.moduleList.push(element)
}
});
if (this.externalLink.externalLink && this.externalLink.description) {
this.dataForm.externalLinks = []
this.dataForm.externalLinks.push(this.externalLink)
} else if (!this.externalLink.externalLink && !this.externalLink.description) {
this.dataForm.externalLinks = []
} else {
this.$message({
type: 'error',
message: '链接地址和地址说明必须同时填写'
})
}
if (this.fileList.length > 0) {
this.dataForm.attachmentList = this.fileList
}
if (this.moduleArray.length === 0 && this.dataForm.externalLinks.length === 0 && this.fileList.length === 0) {
this.$message({
type: 'error',
message: '文档内容、外链、附件至少填写一样'
})
return false
}
console.log(this.dataForm)
// return false
this.$refs['dataForm'].validate((valid, messageObj) => {
if (!valid) {
app.util.validateRule(messageObj)
} else {
let url = ''
if (this.formType === 'U') {
url = '/gov/voice/guide/edit'
// url = 'http://yapi.elinkservice.cn/mock/102/gov/voice/guide/edit'
} else {
url = "/gov/voice/guide/add"
// url = "http://yapi.elinkservice.cn/mock/102/gov/voice/guide/add"
}
window.app.ajax.post(url, this.dataForm,
(data, rspMsg) => {
this.$message({
type: 'success',
message: '保存成功'
})
this.$emit('refresh')
this.$emit('cancleBack')
},
(rspMsg, data) => {
this.endLoading()
this.$message.error(rspMsg)
})
}
})
},
resetData () {
this.moduleArray = []
// this.moduleArray.forEach(element => {
// if (element.moduleContent) {
// element.moduleContent = ''
// }
// });
this.externalLink = {
externalLink: "",
description: ""
}
this.fileList = []
this.dataForm = {
guideId: '',
title: '',
categoryCode: '',
orgId: '',
orgType: '',
orgName: '',
moduleList: [],
externalLinks: [],
attachmentList: []
}
},
// 取消
diaCancel () {
this.resetData()
this.$emit('cancleBack')
},
beforeUpload (file) {
const array = file.name.split('.')
const extension = array[array.length - 1]
if (extension !== 'xls'
&& extension !== 'xlsx'
&& extension !== 'doc'
&& extension !== 'docx'
&& extension !== 'pdf') {
this.$message.error('只能上传word、excel、pdf文件！')
return false
}
// if (!isLt2M) {
// this.$message.warning('上传模板大小不能超过 5MB!')
// return
// }
// return false // 返回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]
file.url = res.data.url
file.type = fileType
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);
},
// 开启加载动画
startLoading () {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close()
}
}
},
components: {
quillEditor, Tinymce
},
computed: {
dataRule () {
return {
categoryCode: [
{ required: true, message: '分类不能为空', trigger: 'blur' }
],
orgId: [
{ required: true, message: '发布单位不能为空', trigger: 'blur' }
],
title: [
{ required: true, message: '标题不能为空', trigger: 'blur' }
]
}
},
...mapGetters(['clientHeight', 'resolution']),
},
}
</script>
<style lang="css" scoped>
.div_btn {
z-index: 10;
position: absolute;
right: 50px;
top: 20px;
/* margin: 0 0 20px 0; */
}
.div_editor {
margin-left: 60px;
width: 90%;
}
.div_editor >>> .el-tabs--card > .el-tabs__header .el-tabs__nav {
border: none;
}
.el-tabs__nav-wrap::after {
background-color: white;
}
.el-tabs__active-bar {
background-color: white;
}
.div_content {
margin-top: 30px;
}
.item_width_1 {
width: 300px;
}
.item_width_2 {
width: 500px;
}
.block {
display: block;
}
.text_p {
height: 400px;
overflow: auto;
}
</style>
<style>
.aui-content .ql-container {
height: 400px;
}
</style>
Write Preview
Loading…
Cancel
Save