无等级网格版合并
This commit is contained in:
aixianling
@@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<component
|
||||
v-if="hasApp && configLoaded"
|
||||
:is="componentName"
|
||||
:params="params"
|
||||
:backType="backType"
|
||||
:instance="instance"
|
||||
:dict="dict"
|
||||
:appType="appType"
|
||||
:appId="appId"
|
||||
:configs="configs"
|
||||
@change="changePage" />
|
||||
<ai-empty v-else-if="hasApp">应用配置加载中...</ai-empty>
|
||||
<ai-empty v-else>读取应用失败</ai-empty>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Add from './components/Add.vue'
|
||||
import Detail from './components/Detail.vue'
|
||||
import List from './components/List.vue'
|
||||
|
||||
export default {
|
||||
label: '代码生成',
|
||||
name: 'AppCodeGeneration',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
components: {Add, Detail, List},
|
||||
computed: {
|
||||
appId() {
|
||||
return this.$route.query.app
|
||||
},
|
||||
hasApp() {
|
||||
return !!this.appId
|
||||
},
|
||||
configLoaded() {
|
||||
return !!this.configs.id
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
componentName: 'list',
|
||||
params: {},
|
||||
backType: '',
|
||||
configs: {},
|
||||
appType: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changePage(data) {
|
||||
this.componentName = data.type
|
||||
this.params = data.params
|
||||
this.backType = data.backType || ''
|
||||
},
|
||||
getConfigs() {
|
||||
this.instance.post(`/app/appapplicationinfo/queryApplicationInfo`, null, {
|
||||
params: {appId: this.appId}
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
this.appType = res.data.appType
|
||||
this.configs = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getConfigs()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,230 +0,0 @@
|
||||
<template>
|
||||
<ai-card title="走访记录" class="visit" v-loading="loading">
|
||||
<el-button slot="right" icon="iconfont iconAdd" type="text" @click="isShow = true">添加走访记录</el-button>
|
||||
<template #content>
|
||||
<div class="visit-list">
|
||||
<div class="visit-item" v-for="(item, index) in list" :key="index">
|
||||
<div class="visit-item__top">
|
||||
<div class="left">
|
||||
<div class="avatar">{{ item.name.substr(item.name.length - 2) }}</div>
|
||||
<h2>{{ item.name }}</h2>
|
||||
</div>
|
||||
<span>{{ item.visitTime }}</span>
|
||||
</div>
|
||||
<b>{{ item.title }}</b>
|
||||
<p>{{ item.description }}</p>
|
||||
<div class="visit-imgs" v-if="item.images.length">
|
||||
<ai-uploader v-model="item.images" :instance="instance" :limit="9" disabled/>
|
||||
</div>
|
||||
<div class="visit-status">
|
||||
<span>现实状态：</span>
|
||||
<i>{{ dict.getLabel('visitCondolenceReality', item.reality) }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<ai-empty v-if="!list.length"></ai-empty>
|
||||
</div>
|
||||
<ai-dialog
|
||||
:visible.sync="isShow"
|
||||
width="1000px"
|
||||
height="500px"
|
||||
title="添加走访记录"
|
||||
@close="onClose"
|
||||
@onConfirm="onConfirm">
|
||||
<el-form ref="form" :model="form" label-width="110px" label-position="right" size="small">
|
||||
<ai-bar title="走访记录"></ai-bar>
|
||||
<div class="ai-form" :model="form" label-width="110px" label-position="right">
|
||||
<el-form-item label="走访时间" prop="visitTime"
|
||||
:rules="[{ required: true, message: '请选择走访时间', trigger: 'change' }]">
|
||||
<el-date-picker
|
||||
v-model="form.visitTime"
|
||||
type="datetime"
|
||||
style="width: 100%;"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择走访时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="现实状态" prop="reality"
|
||||
:rules="[{ required: true, message: '请选择现实状态', trigger: 'change' }]">
|
||||
<ai-select
|
||||
v-model="form.reality"
|
||||
:selectList="dict.getDict('visitCondolenceReality')"
|
||||
laceholder="请选择现实状态">
|
||||
</ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="入户走访事项" prop="title" style="width: 100%;"
|
||||
:rules="[{ required: true, message: '请输入 入户走访事项'}]">
|
||||
<el-input placeholder="请输入 入户走访事项" v-model="form.title" maxlength="30" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="入户走访内容" prop="description" style="width: 100%;">
|
||||
<el-input type="textarea" placeholder="请输入 入户走访内容" v-model="form.description" :rows="4" maxlength="500"
|
||||
show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="images" style="width: 100%;">
|
||||
<ai-uploader v-model="form.images" :instance="instance" :limit="9" isShowTip/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'visit',
|
||||
|
||||
props: ['id', 'dict', 'instance', 'appId', 'name', 'areaId'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
appList: [],
|
||||
list: [],
|
||||
loading: false,
|
||||
isShow: false,
|
||||
form: {
|
||||
visitTime: '',
|
||||
reality: '',
|
||||
images: [],
|
||||
description: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.dict.load('visitCondolenceReality').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.instance.post(`/app/appvisitvondolence/list?optionId=${this.id}&size=10000`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.list = res.data.records.map(item => {
|
||||
return {
|
||||
...item,
|
||||
images: item.images ? JSON.parse(item.images) : []
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance.post(`/app/appvisitvondolence/addOrUpdate`, {
|
||||
...this.form,
|
||||
optionId: this.id,
|
||||
images: JSON.stringify(this.form.images),
|
||||
applicationId: this.appId,
|
||||
name: this.name,
|
||||
areaId: this.areaId
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success('添加成功')
|
||||
this.isShow = false
|
||||
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.form = {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.visit {
|
||||
.visit-list {
|
||||
.visit-item {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.visit-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
|
||||
span {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #999;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
& > p {
|
||||
line-height: 1.4;
|
||||
margin-bottom: 4px;
|
||||
text-align: justify;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.visit-item__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img, .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background: #26f;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,542 +0,0 @@
|
||||
<template>
|
||||
<ai-detail v-if="pageShow" class="add-form">
|
||||
<template #title>
|
||||
<ai-title :title="params.id ? '编辑'+colData.applicationName : '新增' + colData.applicationName" isShowBottomBorder
|
||||
isShowBack @onBackClick="onBack(true)"></ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<el-form ref="formData" class="ai-form" :rules="rules" :model="formData" label-width="110px" size="small">
|
||||
<ai-card :title="items[0].groupName" v-for="(items, indexs) in formDataList" :key="indexs" v-if="items.length">
|
||||
<template slot="content">
|
||||
<div v-for="(item, index) in items" :key="index" :style="item.grid == 1 ? 'width: 100%;' : 'width: 50%;'"
|
||||
class="form-div">
|
||||
<el-form-item :label="item.fieldName" :prop="item.fieldDbName" style="width: 100%">
|
||||
<!-- 字典下拉选择 -->
|
||||
<template v-if="item.type == 'dict'">
|
||||
<ai-select v-model="formData[item.fieldDbName]" :placeholder="item.fieldName" :selectList="dict.getDict(item.dict)"
|
||||
:disabled="item.disable == 1 || !!(formData.resident_id && item.isInit)"/>
|
||||
</template>
|
||||
<!-- 单选radio -->
|
||||
<template v-else-if="item.type == 'radio'">
|
||||
<el-radio-group v-model="formData[item.fieldDbName]" :disabled="item.disable == 1 || !!(formData.resident_id && item.isInit)">
|
||||
<el-radio :label="item.dictValue" v-for="(item, i) in dict.getDict(item.dict)" :key="i">{{ item.dictName }}</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<!-- 开关onOff -->
|
||||
<template v-else-if="item.type == 'onOff'">
|
||||
<el-switch v-model="formData[item.fieldDbName]" active-color="#26f" inactive-color="#ddd" active-value="1" inactive-value="0"
|
||||
:disabled="item.disable == 1 || !!(formData.resident_id && item.isInit)"></el-switch>
|
||||
</template>
|
||||
<!-- 多选checkbox -->
|
||||
<template v-else-if="item.type == 'checkbox'">
|
||||
<el-checkbox-group v-model="formData[item.fieldDbName]" :disabled="item.disable == 1 || !!(formData.resident_id && item.isInit)">
|
||||
<el-checkbox v-for="(item, i) in dict.getDict(item.dict)" :label="item.dictValue" :key="i">
|
||||
{{ item.dictName }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<!-- 网格 -->
|
||||
<template v-else-if="item.type === 'gird'">
|
||||
<el-input disabled :value="girdName" size="small" placeholder="请选择网格">
|
||||
<template slot="append">
|
||||
<el-button size="small"
|
||||
@click="showGrid = true, treeObj.checkedKeys = formData[item.fieldDbName] ? [formData[item.fieldDbName]] : [], gridFieldName = item.fieldDbName">
|
||||
选择网格
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'resident'">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
:placeholder="'请选择'+item.fieldName">
|
||||
<template slot="append">
|
||||
<ai-person-select
|
||||
:instance="instance"
|
||||
:disabled="!!params.id"
|
||||
:url="'/app/appresident/list?auditType=1&areaId=' + user.info.areaId"
|
||||
:isMultiple="false" dialogTitle="选择" @selectPerson="onChange">
|
||||
<template name="option" v-slot:option="{ item }">
|
||||
<span class="iconfont iconProlife">{{ item.name }}</span>
|
||||
<ai-id mode="show" :show-eyes="false" :value="item.idNumber"/>
|
||||
</template>
|
||||
</ai-person-select>
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
<template v-else-if="item.type == 'idNumber'">
|
||||
<ai-id v-model="formData[item.fieldDbName]" :disabled="item.disable == 1 || !!(formData.resident_id && item.isInit)"/>
|
||||
</template>
|
||||
<!-- input输入框 -->
|
||||
<template v-else-if="item.type == 'input' || item.type == 'name' || item.type == 'phone'">
|
||||
<el-input v-model="formData[item.fieldDbName]" :placeholder="'请输入'+item.fieldName" clearable
|
||||
:disabled="item.disable == 1 || !!(formData.resident_id && item.isInit)"
|
||||
:maxlength="item.maxLength" show-word-limit></el-input>
|
||||
</template>
|
||||
<!-- number 输入框 -->
|
||||
<template v-else-if="item.type == 'number'">
|
||||
<el-input-number v-model="formData[item.fieldDbName]" :label="'请输入'+item.fieldName"
|
||||
:disabled="item.disable == 1 || !!(formData.resident_id && item.isInit)" :precision="item.decimalPlaces" :max="item.maxValue"
|
||||
:min="item.minValue"></el-input-number>
|
||||
</template>
|
||||
<!-- textarea输入框 -->
|
||||
<template v-else-if="item.type == 'textarea' || item.type == 'text'">
|
||||
<el-input v-model="formData[item.fieldDbName]" :placeholder="'请输入'+item.fieldName" clearable
|
||||
:disabled="item.disable == 1 || !!(formData.resident_id && item.isInit)"
|
||||
:maxlength="item.maxLength" type="textarea" show-word-limit :rows="3"></el-input>
|
||||
</template>
|
||||
<!-- 日期选择 -->
|
||||
<template v-else-if="item.type == 'date'">
|
||||
<el-date-picker style="width: 100%;" v-model="formData[item.fieldDbName]" type="date" placeholder="请选择"
|
||||
:disabled="item.disable == 1 || !!(formData.resident_id && item.isInit)"
|
||||
:value-format="item.timePattern"></el-date-picker>
|
||||
</template>
|
||||
<!-- 日期带时分秒选择 -->
|
||||
<template v-else-if="item.type == 'datetime'">
|
||||
<el-date-picker v-model="formData[item.fieldDbName]" type="datetime" placeholder="选择日期时间"
|
||||
:disabled="item.disable == 1 || !!(formData.resident_id && item.isInit)"
|
||||
:value-format="item.timePattern"></el-date-picker>
|
||||
</template>
|
||||
<!-- 时间-时分秒选择 -->
|
||||
<template v-else-if="item.type == 'time'">
|
||||
<el-time-picker v-model="formData[item.fieldDbName]" placeholder="请选择"
|
||||
:disabled="item.disable == 1 || !!(formData.resident_id && item.isInit)"
|
||||
:value-format="item.timePattern"></el-time-picker>
|
||||
</template>
|
||||
<!-- 附件 -->
|
||||
<template v-else-if="item.type == 'upload'">
|
||||
<ai-uploader :instance="instance" isShowTip fileType="file" v-model="formData[item.fieldDbName]" :disabled="item.disable == 1"
|
||||
acceptType=".zip,.rar,.doc,.docx,.xls,.ppt,.pptx,.pdf,.txt,.jpg,.png,.xlsx"
|
||||
:limit="item.fileMaxCount" :maxSize="item.fileChoseSize"></ai-uploader>
|
||||
</template>
|
||||
<!-- 富文本 -->
|
||||
<template v-else-if="item.type == 'rtf'">
|
||||
<ai-editor v-model="formData[item.fieldDbName]" :instance="instance"
|
||||
:disabled="item.disable == 1 || !!(formData.resident_id && item.isInit)"/>
|
||||
</template>
|
||||
<!-- 地区选择 -->
|
||||
<template v-else-if="item.type == 'area'">
|
||||
<ai-area-get :instance="instance" v-model="formData[item.fieldDbName]" :name.sync="formData[item.fieldDbName +'_name']"
|
||||
:disabled="item.disable == 1 || !!(formData.resident_id && item.isInit)"/>
|
||||
</template>
|
||||
<!-- 人员选择 -->
|
||||
<div class="especial" v-else-if="item.type == 'user'">
|
||||
<span class="icon"> </span>
|
||||
<span class="people">{{ item.fieldName }}:</span>
|
||||
<ai-wechat-selecter slot="append" isShowUser :instance="instance"
|
||||
v-model="formData[item.fieldDbName]"></ai-wechat-selecter>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
</el-form>
|
||||
<ai-dialog
|
||||
title="选择网格"
|
||||
:visible.sync="showGrid"
|
||||
:destroyOnClose="true"
|
||||
@close="showGrid = false"
|
||||
@onConfirm="getCheckedTree"
|
||||
width="720px">
|
||||
<div class="grid">
|
||||
<el-tree
|
||||
:data="treeObj.treeList"
|
||||
:props="treeObj.defaultProps"
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
:check-strictly="true"
|
||||
show-checkbox
|
||||
:default-checked-keys="treeObj.checkedKeys"
|
||||
default-expand-all
|
||||
@check="onCheckChange">
|
||||
</el-tree>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button class="delete-btn footer-btn" @click="onBack">取消</el-button>
|
||||
<el-button class="footer-btn" type="primary" :loading="isLoading" @click="submit('formData')">提交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Add',
|
||||
props: {
|
||||
instance: Function,
|
||||
params: Object,
|
||||
dict: Object,
|
||||
appId: String,
|
||||
backType: String,
|
||||
configs: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
age: 2
|
||||
},
|
||||
pickerOptions0: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() < Date.now() - 8.64e7;
|
||||
}
|
||||
},
|
||||
isLoading: false,
|
||||
girdName: '',
|
||||
gridFieldName: '',
|
||||
showGrid: false,
|
||||
formDataList: [],
|
||||
pageShow: true,
|
||||
treeObj: {
|
||||
treeList: [],
|
||||
defaultProps: {
|
||||
children: "girdList",
|
||||
label: "girdName",
|
||||
},
|
||||
checkedKeys: [],
|
||||
},
|
||||
colData: {},
|
||||
areaId: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
rules() {
|
||||
let rules = {}
|
||||
this.colData?.tableInfos?.map(e => {
|
||||
rules[e.fieldDbName] = []
|
||||
if (e.mustFill == 1) {//是否必填
|
||||
rules[e.fieldDbName]?.push({required: true, message: e.fieldTips})
|
||||
}
|
||||
})
|
||||
return rules
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getGridList()
|
||||
this.getFormData()
|
||||
if (this.params.id) {
|
||||
this.getDetail()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getGridList() {
|
||||
this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.treeObj.treeList = this.format(res.data)
|
||||
if (this.formData.girdId) {
|
||||
this.$set(this.treeObj, 'checkedKeys', [this.formData.girdId])
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onChange(e) {
|
||||
this.formData.resident_id = e.id
|
||||
Object.keys(this.formData).forEach(item => {
|
||||
for (var p in e) {
|
||||
if (item === p) {
|
||||
this.$set(this.formData, item, e[item])
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const idNumberInfo = this.idCardNoUtil.getIdCardInfo(e.idNumber)
|
||||
this.$set(this.formData, 'birthDate', idNumberInfo.birthday)
|
||||
this.formData.photo = e.photo ? [{
|
||||
url: e.photo
|
||||
}] : []
|
||||
},
|
||||
getCheckedTree() {
|
||||
const gird = this.$refs.tree.getCheckedNodes()
|
||||
|
||||
if (gird.length) {
|
||||
this.girdName = gird[0].girdName
|
||||
this.formData[this.gridFieldName] = gird[0].id
|
||||
} else {
|
||||
this.girdName = ''
|
||||
this.formData[this.gridFieldName] = ''
|
||||
}
|
||||
|
||||
this.showGrid = false
|
||||
},
|
||||
|
||||
onCheckChange(e) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.getCheckedKeys().forEach(v => {
|
||||
this.$refs.tree.setChecked(v, false)
|
||||
})
|
||||
this.$refs.tree.setChecked(e.id, true)
|
||||
})
|
||||
},
|
||||
|
||||
format(list) {
|
||||
return list.map(item => {
|
||||
if (item.girdList && item.girdList.length) {
|
||||
item.girdList = this.format(item.girdList)
|
||||
}
|
||||
return item
|
||||
})
|
||||
},
|
||||
|
||||
initForm(data) {
|
||||
this.colData = data
|
||||
let dictList = []
|
||||
let formList = {}
|
||||
data.tableInfos.map((item) => {
|
||||
let colItem
|
||||
if (item.dictionaryCode) {
|
||||
dictList.push(item.dictionaryCode)
|
||||
}
|
||||
if (item.dictionaryCode && item.type != 'radio' && item.type != 'checkbox' && item.type != 'onOff') {
|
||||
colItem = {
|
||||
...item,
|
||||
type: 'dict',
|
||||
dict: item.dictionaryCode
|
||||
}
|
||||
if (!this.params.id) {
|
||||
colItem.fieldValue = item.defaultValue || ''
|
||||
}
|
||||
} else if (item.type == 'radio') {
|
||||
colItem = {
|
||||
...item,
|
||||
dict: item.dictionaryCode,
|
||||
}
|
||||
if (!this.params.id) {
|
||||
colItem.fieldValue = item.defaultValue || ''
|
||||
}
|
||||
} else if (item.type == 'checkbox') {
|
||||
colItem = {
|
||||
...item,
|
||||
dict: item.dictionaryCode,
|
||||
fieldValue: []
|
||||
}
|
||||
if (!this.params.id && item.defaultValue) {
|
||||
var val = item.defaultValue?.split('`')
|
||||
colItem.fieldValue = val
|
||||
}
|
||||
|
||||
} else if (item.type === 'upload') {
|
||||
colItem = {
|
||||
...item,
|
||||
fieldValue: []
|
||||
}
|
||||
} else if (item.type == 'onOff') {
|
||||
colItem = {
|
||||
...item,
|
||||
}
|
||||
if (!this.params.id) {
|
||||
colItem.fieldValue = item.defaultValue || 0
|
||||
}
|
||||
} else if (item.type == 'number') {
|
||||
colItem = {
|
||||
...item,
|
||||
type: item.type,
|
||||
min: item.minValue || 1,
|
||||
max: item.maxValue || 1000000000,
|
||||
minValue: item.minValue || 1,
|
||||
maxValue: item.maxValue || 1000000000
|
||||
}
|
||||
if (!this.params.id) {
|
||||
colItem.fieldValue = Number(item.defaultValue) || 0
|
||||
}
|
||||
} else {
|
||||
if (item.type == 'date' && !item.timePattern) {
|
||||
item.timePattern = 'yyyy-MM-dd'
|
||||
}
|
||||
if (item.type == 'datetime' && !item.timePattern) {
|
||||
item.timePattern = 'yyyy-MM-dd HH:mm:ss'
|
||||
}
|
||||
if (item.type == 'time' && !item.timePattern) {
|
||||
item.timePattern = 'HH:mm:ss'
|
||||
}
|
||||
|
||||
colItem = {
|
||||
...item,
|
||||
type: item.type,
|
||||
}
|
||||
if (!this.params.id) {
|
||||
colItem.fieldValue = item.defaultValue || ''
|
||||
}
|
||||
}
|
||||
// console.log(colItem)
|
||||
formList[item.groupIndex]?.push(colItem) || (formList[item.groupIndex] = [colItem])
|
||||
if (item.type === 'number') {
|
||||
this.$set(this.formData, item.fieldDbName, 1)
|
||||
} else {
|
||||
this.$set(this.formData, item.fieldDbName, colItem.fieldValue || '')
|
||||
}
|
||||
})
|
||||
this.formDataList = Object.values(formList)
|
||||
|
||||
this.$forceUpdate()
|
||||
|
||||
if (dictList.length) {
|
||||
this.getDictList(dictList)
|
||||
} else {
|
||||
this.pageShow = true
|
||||
}
|
||||
},
|
||||
getFormData() {
|
||||
this.initForm(this.configs)
|
||||
},
|
||||
getDetail() {
|
||||
this.instance.post(`/app/appapplicationinfo/queryDetailById?appId=${this.appId}&id=${this.params.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.configs.tableInfos.map((item) => {
|
||||
this.formData[item.fieldDbName] = res.data[item.fieldDbName] || ''
|
||||
if (item.type == 'checkbox') {
|
||||
var checkList = this.formData[item.fieldDbName]?.split(',')
|
||||
this.formData[item.fieldDbName] = checkList
|
||||
}
|
||||
|
||||
if (item.type === 'gird' && this.formData[item.fieldDbName]) {
|
||||
this.girdName = res.data[`${item.fieldDbName}_name`]
|
||||
}
|
||||
|
||||
if (item.type === 'upload' && !this.formData[item.fieldDbName]) {
|
||||
this.formData[item.fieldDbName] = []
|
||||
}
|
||||
|
||||
if (item.type === 'upload' && this.formData[item.fieldDbName]) {
|
||||
this.formData[item.fieldDbName] = this.formData[item.fieldDbName].split(',').map(v => {
|
||||
return {
|
||||
url: v
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getDictList(listName) {
|
||||
this.dict.load(listName.join(',')).then(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
this.$refs.formData?.validate((valid) => {
|
||||
if (valid) {
|
||||
this.isLoading = true
|
||||
this.formDataList.map((item) => {
|
||||
if (item.length) {
|
||||
item.map((items) => {
|
||||
if (items.type == 'checkbox' && this.formData[items.fieldDbName].length) { //多选
|
||||
this.formData[items.fieldDbName] = this.formData[items.fieldDbName]?.toString()
|
||||
}
|
||||
if (items.type == 'upload') {
|
||||
this.formData[items.fieldDbName] = this.formData[items.fieldDbName].map(v => v.url).join(',')
|
||||
}
|
||||
|
||||
if (items.type == 'gird' && this.formData[items.fieldDbName]) {
|
||||
this.formData[items.fieldDbName] = this.formData[items.fieldDbName] + '_' + this.girdName
|
||||
}
|
||||
if (items.type == 'area' && this.formData[items.fieldDbName]) {
|
||||
var area = []
|
||||
area.push(this.formData[items.fieldDbName])
|
||||
area.push(this.formData[items.fieldDbName + '_name'])
|
||||
this.formData[items.fieldDbName] = area.join('_')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
this.instance.post(`/app/appapplicationinfo/addOrUpdate?appId=${this.appId}`, {
|
||||
...this.formData,
|
||||
id: this.params.id || ''
|
||||
}).then((res) => {
|
||||
this.isLoading = false
|
||||
if (res.code == 0) {
|
||||
this.$message.success('提交成功')
|
||||
setTimeout(() => {
|
||||
this.onBack(true)
|
||||
}, 600)
|
||||
}
|
||||
}).catch(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
onBack(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: this.backType == 'Detail' ? 'detail' : 'list',
|
||||
params: this.params,
|
||||
isRefresh: !!isRefresh,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .ai-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-div {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.add-form {
|
||||
::v-deep .AiPersonSelect {
|
||||
.el-button {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.especial {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.icon {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
margin-left: 20px;
|
||||
color: #f46;
|
||||
}
|
||||
|
||||
.people {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
padding-right: 12px;
|
||||
vertical-align: top;
|
||||
width: 64px;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.AiWechatSelecter {
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.mar-r40 {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.w80 {
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
.AiWechatSelecter {
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
</style>
|
||||
@@ -1,257 +0,0 @@
|
||||
<template>
|
||||
<ai-detail v-loading="pageShow" isHasSidebar>
|
||||
<template #title>
|
||||
<ai-title :title="colData.applicationName+'详情'" isShowBottomBorder isShowBack @onBackClick="onBack(true)"></ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<AiSidebar :tabTitle="tabTitle" v-model="currIndex" v-if="appType"></AiSidebar>
|
||||
<ai-card v-show="currIndex === 0" :title="items[0].groupName" v-for="(items, indexs) in formDataList" :key="indexs">
|
||||
<template slot="content">
|
||||
<ai-wrapper>
|
||||
<ai-info-item :label="item.fieldName" v-show="item.type !== 'resident'" v-for="(item, index) in items" :key="index" :isLine="item.grid == 1">
|
||||
<span v-if="item.dict && item.type != 'checkbox'">{{$dict.getLabel(item.dict, formData[item.fieldDbName]) || '-'}}</span>
|
||||
<span v-else-if="item.type == 'checkbox'">{{formData[item.fieldDbName]}}</span>
|
||||
<span v-else-if="item.type == 'rtf'" v-html="formData[item.fieldDbName]"></span>
|
||||
<ai-file-list :fileList="formData[item.fieldDbName]" v-else-if="item.type == 'upload'" :fileOps="{name: 'name', size: 'fileSizeStr'}"></ai-file-list>
|
||||
<span v-else-if="item.type == 'area'">{{ formData[item.fieldDbName + '_name'] }}</span>
|
||||
<span v-else-if="item.type == 'gird'">{{ formData[item.fieldDbName + '_name'] }}</span>
|
||||
<span v-else>{{ formData[item.fieldDbName] || '-' }}</span>
|
||||
</ai-info-item>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</ai-card>
|
||||
<component
|
||||
:is="component"
|
||||
:name="params.name || params.name00"
|
||||
:areaId="formData.area"
|
||||
:id="params.id"
|
||||
:appId="appId"
|
||||
:dict="dict"
|
||||
:instance="instance"
|
||||
v-if="currIndex === 1">
|
||||
</component>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Visit from '../app/visit/Visit'
|
||||
|
||||
export default {
|
||||
name: 'Detail',
|
||||
|
||||
props: {
|
||||
dict: Object,
|
||||
appId: String,
|
||||
params: Object,
|
||||
configs: Object,
|
||||
appType: String,
|
||||
instance: Function
|
||||
},
|
||||
|
||||
components: {
|
||||
Visit
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
formData: {},
|
||||
colData: {},
|
||||
formDataList: [],
|
||||
tabTitle: ['人员信息'],
|
||||
pageShow: false,
|
||||
currIndex: 0,
|
||||
component: ''
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
|
||||
created () {
|
||||
if (!this.appType) return
|
||||
|
||||
if (this.appType === '0') {
|
||||
this.component = 'Visit'
|
||||
}
|
||||
this.dict.load('diyAppType').then(() => {
|
||||
this.tabTitle.push(this.dict.getLabel('diyAppType', this.appType))
|
||||
})
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.pageShow = true
|
||||
this.getDetail()
|
||||
},
|
||||
|
||||
methods: {
|
||||
initForm (data) {
|
||||
this.colData = data
|
||||
let dictList = []
|
||||
let formList = {}
|
||||
data.tableInfos.map((item) => {
|
||||
let colItem
|
||||
if (item.dictionaryCode) {
|
||||
dictList.push(item.dictionaryCode)
|
||||
}
|
||||
if (item.dictionaryCode && item.type != 'radio' && item.type != 'checkbox') {
|
||||
colItem = {
|
||||
...item,
|
||||
type: 'dict',
|
||||
dict: item.dictionaryCode
|
||||
}
|
||||
} else if (item.type == 'radio') {
|
||||
colItem = {
|
||||
...item,
|
||||
dict: item.dictionaryCode,
|
||||
}
|
||||
} else if (item.type == 'checkbox') {
|
||||
colItem = {
|
||||
...item,
|
||||
dict: item.dictionaryCode,
|
||||
fieldValue: item.fieldValue?.split(',') || []
|
||||
}
|
||||
} else if (item.type == 'onOff') {
|
||||
colItem = {
|
||||
...item,
|
||||
fieldValue: 0
|
||||
}
|
||||
} else {
|
||||
if (item.type == 'date' && !item.timePattern) {
|
||||
item.timePattern = 'yyyy-MM-dd'
|
||||
}
|
||||
if (item.type == 'datetime' && !item.timePattern) {
|
||||
item.timePattern = 'HH:mm:ss yyyy-MM-dd'
|
||||
}
|
||||
if (item.type == 'time' && !item.timePattern) {
|
||||
item.timePattern = 'HH:mm:ss'
|
||||
}
|
||||
|
||||
colItem = {
|
||||
...item,
|
||||
type: item.type,
|
||||
}
|
||||
}
|
||||
formList[item.groupIndex]?.push(colItem) || (formList[item.groupIndex] = [colItem])
|
||||
if (item.type === 'upload') {
|
||||
this.$set(this.formData, colItem.fieldDbName, this.formData[colItem.fieldDbName] ? this.formData[colItem.fieldDbName].split(',').map(v => {
|
||||
return {
|
||||
url: v
|
||||
}
|
||||
}) : [])
|
||||
} else {
|
||||
this.$set(this.formData, colItem.fieldDbName, this.formData[colItem.fieldDbName] || "")
|
||||
}
|
||||
})
|
||||
this.formDataList = Object.values(formList)
|
||||
|
||||
this.$forceUpdate()
|
||||
|
||||
if (dictList.length) {
|
||||
this.getDictList(dictList)
|
||||
} else {
|
||||
this.pageShow = true
|
||||
}
|
||||
},
|
||||
|
||||
getFormData () {
|
||||
this.initForm(this.configs)
|
||||
},
|
||||
|
||||
getDetail () {
|
||||
this.instance.post(`/app/appapplicationinfo/queryDetailById?appId=${this.appId}&id=${this.params.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
this.formData = res.data
|
||||
this.getFormData()
|
||||
|
||||
this.pageShow = false
|
||||
}
|
||||
}).catch(() => {
|
||||
this.pageShow = false
|
||||
})
|
||||
},
|
||||
|
||||
getDictList (listName) {
|
||||
this.dict.load(listName.join(',')).then(() => {
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
onBack (isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh,
|
||||
})
|
||||
},
|
||||
|
||||
toEdit () {
|
||||
this.$emit('change', {
|
||||
type: 'Add',
|
||||
params: this.params,
|
||||
backType: 'Detail'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.form-div{
|
||||
display: inline-block;
|
||||
}
|
||||
.especial {
|
||||
margin-bottom: 12px;
|
||||
.icon {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
margin-left: 20px;
|
||||
color: #f46;
|
||||
}
|
||||
.people {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-right: 16px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.AiWechatSelecter {
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.hint {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.mar-r40{
|
||||
margin-right: 40px;
|
||||
}
|
||||
.w80{
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
.add-icon{
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
i{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.color1{
|
||||
color:#4B87FE;
|
||||
}
|
||||
.color2{
|
||||
color:#2EA222;
|
||||
}
|
||||
.color3{
|
||||
color:#999999;
|
||||
}
|
||||
.AiWechatSelecter{
|
||||
width: calc(100% - 150px);
|
||||
}
|
||||
</style>
|
||||
@@ -1,307 +0,0 @@
|
||||
<template>
|
||||
<ai-list v-if="pageShow">
|
||||
<template slot="title">
|
||||
<ai-title :title="configs.applicationName" isShowBottomBorder></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar v-if="searchList.length" bottomBorder style="margin-bottom: 12px;">
|
||||
<template #left>
|
||||
<div v-for="(item, index) in searchList" :key="index">
|
||||
<ai-select
|
||||
v-model="search[item.searchValue]"
|
||||
:placeholder="'请选择'+item.label" clearable
|
||||
@change="$forceUpdate();(page.current = 1), getList()"
|
||||
:selectList="dict.getDict(item.dict)"
|
||||
v-if="item.type == 'dict'">
|
||||
</ai-select>
|
||||
<ai-search v-else-if="item.type == 'date'" :label="item.label">
|
||||
<el-date-picker size="small" v-model="search[item.searchValue]" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期"
|
||||
@change="$forceUpdate();(page.current = 1), getList()"
|
||||
value-format="yyyy-MM-dd"/>
|
||||
</ai-search>
|
||||
<ai-search v-else-if="item.type == 'time'" :label="item.label">
|
||||
<el-time-picker is-range size="small" v-model="search[item.searchValue]" range-separator="至"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"
|
||||
@change="$forceUpdate();(page.current = 1), getList()"
|
||||
value-format="HH:mm:ss"></el-time-picker>
|
||||
</ai-search>
|
||||
<ai-search v-else-if="item.type == 'area'" :label="item.label">
|
||||
<ai-area-get :instance="instance" v-model="search[item.searchValue]"/>
|
||||
</ai-search>
|
||||
</div>
|
||||
</template>
|
||||
<template #right v-if="showRightInput">
|
||||
<el-input :placeholder="placeholder" v-model="search.searchParam" size="small"
|
||||
@keyup.enter.native="$forceUpdate();(page.current = 1), getList()"
|
||||
@clear="$forceUpdate();(page.current = 1), getList()"
|
||||
@change="$forceUpdate();(page.current = 1), getList()" clearable prefix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-button type="primary" icon="iconfont iconAdd" size="small"
|
||||
v-if="configs.insertEnable == 1" @click="toAdd('', 'Add')">添加
|
||||
</el-button>
|
||||
<el-button icon="iconfont iconDelete" size="small" :disabled="ids.length == 0"
|
||||
v-if="configs.batchDelEnable == 1" @click="delAll()">删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #right>
|
||||
<ai-import :instance="instance" v-if="configs.importEnable == 1" type="appapplicationinfo"
|
||||
:importParams="{appId}" :tplParams="{appId}" :name="configs.applicationName" @success="getList()">
|
||||
<el-button icon="iconfont iconImport">导入</el-button>
|
||||
</ai-import>
|
||||
<el-button icon="iconfont iconExported" size="small" v-if="configs.exportEnalbe == 1" @click="down()"
|
||||
>导出
|
||||
</el-button>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table class="ai-table" :tableData="tableData" :col-configs="colConfigs" :total="page.total"
|
||||
:current.sync="page.current" :size.sync="page.size" @getList="getList" :dict="dict"
|
||||
@selection-change="(v) => (ids = v.map((e) => e.id))">
|
||||
<el-table-column v-for="(item, indexs) in colConfigs" :key="indexs" :slot="item.slot" :label="item.label"
|
||||
show-overflow-tooltip
|
||||
align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div v-if="item.type != 'checkbox' && item.dict">
|
||||
{{ $dict.getLabel(item.dict, row[item.fieldDbName]) || '-' }}
|
||||
</div>
|
||||
<div v-if="item.type == 'rtf'" v-html="row[item.fieldDbName]"></div>
|
||||
<div v-if="item.type == 'checkbox'">{{ row[item.fieldDbName] }}</div>
|
||||
<div v-if="item.type == 'gird'">{{ row[item.fieldDbName + '_name'] }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" label="操作" fixed="right" align="center" width="160">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="toDetail(row, 'Detail')">详情</el-button>
|
||||
<el-button type="text" @click="toDetail(row, 'Add')" v-if="configs.editEnable == 1">编辑</el-button>
|
||||
<el-button type="text" @click="del(row.id)" v-if="configs.deleteEnable == 1">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'List',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
params: Object,
|
||||
appId: String,
|
||||
configs: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageShow: false,
|
||||
tableData: [],
|
||||
colConfigs: [],
|
||||
page: {
|
||||
size: 10,
|
||||
current: 1,
|
||||
total: 0,
|
||||
},
|
||||
search: {
|
||||
searchParam: '',
|
||||
},
|
||||
searchList: [],
|
||||
ids: [],
|
||||
showRightInput: false,
|
||||
placeholder: '请输入',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initConfigs()
|
||||
},
|
||||
methods: {
|
||||
initConfigs() {
|
||||
var dictList = []
|
||||
var colList = []
|
||||
var searchList = []
|
||||
var placeholderList = []
|
||||
this.configs.showListFields.map((item) => {
|
||||
var colItem
|
||||
if (item.dictionaryCode) {
|
||||
dictList.push(item.dictionaryCode)
|
||||
colItem = {
|
||||
slot: item.fieldDbName,
|
||||
label: item.fieldName,
|
||||
dict: item.dictionaryCode,
|
||||
fieldDbName: item.fieldDbName,
|
||||
type: item.type
|
||||
}
|
||||
} else if (item.type == 'rtf') {
|
||||
colItem = {label: item.fieldName, type: item.type, slot: item.fieldDbName, fieldDbName: item.fieldDbName}
|
||||
} else if (item.type == 'area') {
|
||||
colItem = {prop: item.fieldDbName + '_name', label: item.fieldName, align: "center"}
|
||||
} else if (item.type == 'gird') {
|
||||
colItem = {prop: item.fieldDbName + '_name', label: item.fieldName, align: "center"}
|
||||
}else {
|
||||
colItem = {prop: item.fieldDbName, label: item.fieldName, align: "center"}
|
||||
}
|
||||
colList.push(colItem)
|
||||
})
|
||||
this.configs.fuzzyQueryFields.map((item) => {
|
||||
var searchItem = {}
|
||||
if (item.dictionaryCode) {
|
||||
searchItem = {
|
||||
type: 'dict',
|
||||
label: item.fieldName,
|
||||
dict: item.dictionaryCode,
|
||||
searchValue: item.fieldDbName
|
||||
}
|
||||
}
|
||||
|
||||
if (item.type == 'input' || item.type == 'name' || item.type == 'idNumber' || item.type == 'phone') {
|
||||
placeholderList.push(item.fieldName)
|
||||
this.showRightInput = true
|
||||
}
|
||||
|
||||
if (item.type == 'date') {
|
||||
searchItem = {
|
||||
type: 'date',
|
||||
label: item.fieldName,
|
||||
searchValue: item.fieldDbName
|
||||
}
|
||||
}
|
||||
|
||||
if (item.type == 'time') {
|
||||
searchItem = {
|
||||
type: 'time',
|
||||
label: item.fieldName,
|
||||
searchValue: item.fieldDbName
|
||||
}
|
||||
}
|
||||
|
||||
if (item.type == 'area') {
|
||||
searchItem = {
|
||||
type: 'area',
|
||||
label: item.fieldName,
|
||||
searchValue: item.fieldDbName
|
||||
}
|
||||
}
|
||||
|
||||
this.$set(this.search, item.fieldDbName, '')
|
||||
searchList.push(searchItem)
|
||||
})
|
||||
|
||||
this.colConfigs = colList
|
||||
this.searchList = searchList
|
||||
this.$forceUpdate()
|
||||
|
||||
var text = placeholderList.join('/')
|
||||
this.placeholder = this.placeholder + text
|
||||
|
||||
if (this.configs.batchDelEnable == 1) {
|
||||
this.colConfigs.unshift({type: 'selection', width: 100})
|
||||
}
|
||||
if (dictList.length) {
|
||||
this.getDictList(dictList)
|
||||
} else {
|
||||
this.pageShow = true
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
getDictList(listName) {
|
||||
this.dict.load(listName.join(',')).then(() => {
|
||||
this.pageShow = true
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.instance.post(`/app/appapplicationinfo/list?appId=${this.appId}¤t=${this.page.current}&size=${this.page.size}`, {...this.search}).then((res) => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.page.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
toDetail(item, type) {
|
||||
this.$emit('change', {
|
||||
type: type,
|
||||
params: item,
|
||||
backType: 'List'
|
||||
})
|
||||
},
|
||||
toAdd() {
|
||||
this.$emit('change', {
|
||||
type: 'Add',
|
||||
params: {
|
||||
type: 'Add',
|
||||
}
|
||||
})
|
||||
},
|
||||
del(id) {
|
||||
this.$confirm("删除后不可恢复，是否要删除？", {
|
||||
type: 'error'
|
||||
}).then(() => {
|
||||
this.instance.post(`/app/appapplicationinfo/delete?appId=${this.appId}&ids=${id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success("删除成功！");
|
||||
this.getList();
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
delAll() {
|
||||
if (this.ids.length > 100) {
|
||||
return this.$message.error("删除的数据最多不能超过100条！");
|
||||
}
|
||||
var id = this.ids.join(',')
|
||||
this.del(id)
|
||||
},
|
||||
|
||||
reset() {
|
||||
Object.keys(this.search).forEach((e) => {
|
||||
this.search[e] = ''
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
down() {
|
||||
var id = ''
|
||||
if (this.ids.length) {
|
||||
id = this.ids.join(',')
|
||||
}
|
||||
this.instance.post(`/app/appapplicationinfo/export?appId=${this.appId}&ids=${id}`, this.search, {
|
||||
responseType: 'blob',
|
||||
timeout: 100000
|
||||
}).then(res => {
|
||||
if (res?.type == "application/json") {
|
||||
let reader = new FileReader()
|
||||
reader.readAsText(res, "utf-8")
|
||||
reader.onload = e => {
|
||||
if (e.target.readyState === 2) {
|
||||
let ret = JSON.parse(e.target.result)
|
||||
if (ret?.code == 0) {
|
||||
this.$message.success(ret.msg)
|
||||
} else this.$message.error(ret.msg)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const link = document.createElement('a')
|
||||
let blob = new Blob([res], {type: res.type})
|
||||
link.style.display = 'none'
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.setAttribute('download', this.configs.applicationName + '.xls')
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
}).catch((err) => {
|
||||
this.$error.success(err)
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mar-b10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div class="AppBuildManage">
|
||||
<keep-alive :include="['List']">
|
||||
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/List'
|
||||
import Add from './components/Add'
|
||||
import BuildMsg from './components/BuildMsg'
|
||||
|
||||
export default {
|
||||
label: '楼栋管理',
|
||||
name: 'AppBuildManage',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {},
|
||||
include: [],
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
Add,
|
||||
List,
|
||||
BuildMsg,
|
||||
},
|
||||
methods: {
|
||||
onChange(data) {
|
||||
if (data.type === 'add') {
|
||||
this.component = 'Add'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type === 'buildmsg') {
|
||||
this.component = 'BuildMsg'
|
||||
this.params = { ...data.params }
|
||||
}
|
||||
|
||||
if (data.type == 'list') {
|
||||
this.component = 'List'
|
||||
this.params = data.params
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppBuildManage {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,402 +0,0 @@
|
||||
<template>
|
||||
<section style="height: 100%" class="AppBuildManage">
|
||||
<ai-detail class="Add">
|
||||
<!-- 返回按钮 -->
|
||||
<template #title>
|
||||
<ai-title :title="isEdit ? '编辑楼栋信息' : '添加楼栋'" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix="：" align-items="center">
|
||||
<!-- 小区名称 -->
|
||||
<ai-bar title="基础信息"></ai-bar>
|
||||
<el-form-item label="小区名称" prop="communityName" class="line" ref="communityNameContent">
|
||||
<!-- 选择小区 -->
|
||||
<ai-select v-if="instance" :instance="instance" v-model="formData.communityId" action="/app/appcommunityinfo/listAll" :prop="{ label: 'communityName' }"></ai-select>
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex">
|
||||
<!-- 楼栋号 -->
|
||||
<el-form-item label="楼栋号" prop="buildingNumber" :rules="[{ required: true, message: '请输入楼栋号', trigger: 'blur' }]">
|
||||
<el-input size="small" v-model="formData.buildingNumber" placeholder="请输入" clearable :disabled="isEdit" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 单元数 -->
|
||||
<el-form-item label="单元数" prop="unitNumber">
|
||||
<el-input size="small" v-model.number="formData.unitNumber" placeholder="请输入" clearable :disabled="isEdit" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 起始计数层数 -->
|
||||
<el-form-item label="起始计数层数" prop="layerStart">
|
||||
<el-input size="small" v-model.number="formData.layerStart" placeholder="请输入" clearable :disabled="isEdit"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 最高层数 -->
|
||||
<el-form-item label="最高层数" prop="layerNumber">
|
||||
<el-input size="small" v-model.number="formData.layerNumber" placeholder="请输入" clearable :disabled="isEdit"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 起始计数户数 -->
|
||||
<el-form-item label="起始计数户数" prop="householdStart">
|
||||
<el-input size="small" v-model.number="formData.householdStart" placeholder="请输入" clearable :disabled="isEdit"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 每层户数 -->
|
||||
<el-form-item label="每层户数" prop="householdNumber">
|
||||
<el-input size="small" v-model.number="formData.householdNumber" placeholder="请输入" clearable :disabled="isEdit"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 楼栋长姓名 -->
|
||||
<el-form-item label="楼栋长姓名" prop="managerName">
|
||||
<el-input size="small" v-model="formData.managerName" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 楼栋长联系方式 -->
|
||||
<el-form-item label="楼栋长联系方式" prop="managerPhone">
|
||||
<el-input size="small" v-model.number="formData.managerPhone" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 房屋类别 -->
|
||||
<el-form-item label="房屋类别" prop="buildingType" class="buildingTypes">
|
||||
<el-radio-group v-model="formData.buildingType">
|
||||
<el-radio label="0">单元（公寓）楼</el-radio>
|
||||
<el-radio label="1">筒子楼</el-radio>
|
||||
<el-radio label="2">别墅</el-radio>
|
||||
|
||||
<el-radio label="3">自建楼</el-radio>
|
||||
<el-radio label="4">平房</el-radio>
|
||||
<el-radio label="5">高层公共建筑</el-radio>
|
||||
|
||||
<el-radio label="6">商住两用</el-radio>
|
||||
<el-radio label="7">其它</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 楼栋经度坐标 -->
|
||||
<el-form-item label="楼栋经度坐标" prop="lng">
|
||||
<el-input size="small" v-model="formData.lng" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 楼栋纬度坐标 -->
|
||||
<el-form-item label="楼栋纬度坐标" prop="lat">
|
||||
<el-input size="small" v-model="formData.lat" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 地图位置 -->
|
||||
<el-form-item label="地图位置" prop="lat">
|
||||
<el-button @click="showMap = true">地图标绘</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<template #footer>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="confirm()">提交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
<ai-dialog title="地图" :visible.sync="showMap" @opened="getCorpLocation" width="800px" class="mapDialog" @onConfirm="selectMap">
|
||||
<div id="map"></div>
|
||||
<el-form label-width="80px" style="padding: 10px 20px 0 20px;">
|
||||
<el-row type="flex" justify="space-between">
|
||||
<el-form-item label="经度">
|
||||
<el-input disabled size="small" v-model="placeDetail.lng"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度">
|
||||
<el-input disabled size="small" v-model="placeDetail.lat"></el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字">
|
||||
<el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button>
|
||||
</el-input>
|
||||
<div id="searchPlaceOutput" />
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||
|
||||
export default {
|
||||
name: 'Add',
|
||||
components: {},
|
||||
props: {
|
||||
dict: Object,
|
||||
params: Object,
|
||||
instance: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
communityName: '',
|
||||
buildingNumber: '',
|
||||
unitNumber: '',
|
||||
layerStart: '1',
|
||||
layerNumber: '',
|
||||
householdStart: '1',
|
||||
householdNumber: '',
|
||||
managerName: '',
|
||||
managerPhone: '',
|
||||
lng: '',
|
||||
lat: '',
|
||||
id: '', // 小区编号
|
||||
buildingType: '0',
|
||||
communityId: '',
|
||||
},
|
||||
formRules: {
|
||||
unitNumber: [
|
||||
{ required: true, message: '请输入单元数', trigger: 'change' },
|
||||
{
|
||||
validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
|
||||
},
|
||||
],
|
||||
layerStart: [
|
||||
{ required: true, message: '请输入起始计数层数', trigger: 'change' },
|
||||
{
|
||||
validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
|
||||
},
|
||||
],
|
||||
|
||||
layerNumber: [
|
||||
{ required: true, message: '请输入最高层数', trigger: 'change' },
|
||||
{
|
||||
validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
|
||||
},
|
||||
],
|
||||
householdStart: [
|
||||
{ required: true, message: '请输入起始计数户数', trigger: 'change' },
|
||||
{
|
||||
validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
|
||||
},
|
||||
],
|
||||
|
||||
householdNumber: [
|
||||
{ required: true, message: '请输入每层户数', trigger: 'change' },
|
||||
{
|
||||
validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
|
||||
},
|
||||
],
|
||||
},
|
||||
plot: [],
|
||||
dialogVisible: false,
|
||||
treeData: [],
|
||||
map: null,
|
||||
placeDetail: {
|
||||
lng: '',
|
||||
lat: '',
|
||||
},
|
||||
showMap: false,
|
||||
searchPlace: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
isEdit() {
|
||||
return !!this.params.id
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.formData.communityId = this.params.communityId
|
||||
this.getListinfo()
|
||||
},
|
||||
methods: {
|
||||
selectMap() {
|
||||
this.formData.lng = this.placeDetail.lng
|
||||
this.formData.lat = this.placeDetail.lat
|
||||
this.showMap = false
|
||||
},
|
||||
getCorpLocation() {
|
||||
this.instance.post('/app/appdvcpconfig/getCorpLocation').then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.initMap(res.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
initMap({ lng, lat }) {
|
||||
AMapLoader.load({
|
||||
key: 'b553334ba34f7ac3cd09df9bc8b539dc',
|
||||
version: '2.0',
|
||||
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
|
||||
}).then((AMap) => {
|
||||
this.placeDetail.lng = this.formData.lng
|
||||
this.placeDetail.lat = this.formData.lat
|
||||
this.map = new AMap.Map('map', {
|
||||
resizeEnable: true,
|
||||
zooms: [6, 20],
|
||||
center: [lng, lat],
|
||||
zoom: 11,
|
||||
})
|
||||
this.placeSearch = new AMap.PlaceSearch({ map: this.map })
|
||||
new AMap.AutoComplete({
|
||||
input: 'searchPlaceInput',
|
||||
output: 'searchPlaceOutput',
|
||||
}).on('select', (e) => {
|
||||
if (e?.poi) {
|
||||
this.placeSearch.setCity(e.poi.adcode)
|
||||
this.movePosition(e.poi.location)
|
||||
}
|
||||
})
|
||||
this.map.on('click', (e) => {
|
||||
new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => {
|
||||
if (res?.regeocode) {
|
||||
this.placeDetail = {
|
||||
lng: e.lnglat?.lng,
|
||||
lat: e.lnglat?.lat,
|
||||
address: res.regeocode.formattedAddress,
|
||||
}
|
||||
}
|
||||
})
|
||||
this.movePosition(e.lnglat)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
movePosition(center) {
|
||||
if (this.map) {
|
||||
this.map.clearMap()
|
||||
this.map.panTo(center)
|
||||
this.map.add([
|
||||
new AMap.Marker({
|
||||
position: center,
|
||||
clickable: true,
|
||||
}),
|
||||
])
|
||||
this.map.setFitView()
|
||||
}
|
||||
},
|
||||
|
||||
getListinfo() {
|
||||
return this.instance
|
||||
.post('/app/appcommunitybuildinginfo/queryDetailById', null, {
|
||||
params: {
|
||||
id: this.params.id,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
this.formData = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
confirm() {
|
||||
this.$refs['ruleForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance
|
||||
.post(`/app/appcommunitybuildinginfo/addOrUpdate`, {
|
||||
...this.formData,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('提交成功')
|
||||
setTimeout(() => {
|
||||
this.cancel(true)
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 返回按钮
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh,
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
communityNameContent: {
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppBuildManage {
|
||||
::v-deep .amap-logo {
|
||||
display: none!important;
|
||||
}
|
||||
::v-deep .amap-copyright {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
.Add {
|
||||
height: 100%;
|
||||
.ai-detail__title {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ai-detail__content {
|
||||
.ai-detail__content--wrapper {
|
||||
.el-form {
|
||||
background-color: #fff;
|
||||
padding: 0 60px;
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
width: 48%;
|
||||
}
|
||||
.buildingTypes {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .mapDialog {
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
|
||||
.ai-dialog__content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ai-dialog__content--wrapper {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.searchPlaceInput {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
top: 30px;
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
#searchPlaceOutput {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
left: 25px;
|
||||
height: initial;
|
||||
top: 80px;
|
||||
background: white;
|
||||
z-index: 250;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
|
||||
.auto-item {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,750 +0,0 @@
|
||||
<template>
|
||||
<ai-list class="BuildMsg">
|
||||
<!-- 标题 -->
|
||||
<template #title>
|
||||
<ai-title :title="params.communityName + '-' + params.buildingNumber + '号楼房屋信息'" isShowBack isShowBottomBorder
|
||||
@onBackClick="cancel(false)"></ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<!-- 性别下拉选择框 -->
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<ai-select v-model="search.livingStatus" placeholder="房屋状态" clearable @change=";(page.current = 1), getList()"
|
||||
:selectList="dict.getDict('houselivingStatus')"></ai-select>
|
||||
|
||||
<ai-select v-model="search.existFlow" placeholder="有无流动人口" clearable @change=";(page.current = 1), getList()"
|
||||
:selectList="dict.getDict('yesOrNo')"></ai-select>
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<el-input v-model="search.houseCode" size="small" placeholder="请输入户号/户主" clearable
|
||||
v-throttle="() => {page.current = 1, getList()}"
|
||||
@clear=";(page.current = 1), (search.houseCode = ''), getList()" suffix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<div style="height: 32px"/>
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<ai-import :instance="instance" :dict="dict" type="appcommunityhouseinfo" :importParams="houseImpParam" name="房屋信息"
|
||||
@success="getList()">
|
||||
<el-button icon="iconfont iconImport">导入房屋信息</el-button>
|
||||
</ai-import>
|
||||
<ai-download :instance="instance" url="/app/appcommunityhouseinfo/listExport" :params="houseExpParam"
|
||||
fileName="房屋信息" style="margin-right: 10px">
|
||||
<el-button icon="iconfont iconExported">导出房屋信息</el-button>
|
||||
</ai-download>
|
||||
<ai-import :instance="instance" :dict="dict" type="appcommunityhouseresident" :importParams="houseImpParam" name="人口信息"
|
||||
@success="getList()">
|
||||
<el-button icon="iconfont iconImport">导入人口信息</el-button>
|
||||
</ai-import>
|
||||
<ai-download :instance="instance" url="/app/appcommunityhouseresident/listExport" :params="houseExpParam"
|
||||
fileName="人口信息">
|
||||
<el-button icon="iconfont iconExported">导出人口信息</el-button>
|
||||
</ai-download>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
|
||||
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex"
|
||||
:current.sync="page.current" :size.sync="page.size" @getList="getList"
|
||||
@selection-change="(v) => (ids = v.map((e) => e.id))">
|
||||
<el-table-column slot="owner" label="房主" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span v-for="(item, i) in row.owner" :key="i" v-if="item.name">
|
||||
<span v-if="i < 2" style="margin-right: 5px;">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="owner" label="联系方式" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span v-for="(item, i) in row.owner" :key="i" v-if="item.phone">
|
||||
<span v-if="i < 1">
|
||||
{{ item.phone }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="livingStatus" label="房屋状态" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
{{ dict.getLabel('houselivingStatus', row.livingStatus) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="owner" label="流动人口" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span>{{ row.existFlow == 1 ? '有' : '无' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="options" label="操作" align="center" fixed="right" width="140">
|
||||
<div class="table-options" slot-scope="{ row }">
|
||||
<el-button type="text" @click="toEdit(row.id, 'edit')">编辑</el-button>
|
||||
<el-button type="text" @click="toEdit(row.id, 'detail')">详情</el-button>
|
||||
</div>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
|
||||
<ai-dialog :title="isEdit ? '编辑居民户' : '居民户详情'" :visible.sync="dialogVisible" width="800px" customFooter>
|
||||
<ai-wrapper label>
|
||||
<div class="bulidmsg">
|
||||
<span class="icon"></span>
|
||||
<span class="bulidtext">房屋信息</span>
|
||||
</div>
|
||||
|
||||
<ai-info-item label="所属社区">
|
||||
{{ forms.areaName }}
|
||||
</ai-info-item>
|
||||
|
||||
<ai-info-item label="房屋地址">
|
||||
{{ forms.createAddress }}
|
||||
</ai-info-item>
|
||||
|
||||
<ai-info-item label="房屋类型">
|
||||
{{ dict.getLabel('communityBuildingType', forms.buildingType) }}
|
||||
</ai-info-item>
|
||||
|
||||
<template v-if="!isEdit">
|
||||
<ai-info-item label="房屋面积" prop="houseArea" class="line">
|
||||
<span>{{ forms.houseArea }}</span
|
||||
> <span v-if="forms.houseArea">m²</span>
|
||||
</ai-info-item>
|
||||
|
||||
<ai-info-item label="居住现状" prop="livingStatus">
|
||||
<span>{{ dict.getLabel('houselivingStatus', forms.livingStatus) }}</span>
|
||||
</ai-info-item>
|
||||
|
||||
<ai-info-item label="房屋用途" prop="houseUse">
|
||||
<span>{{ dict.getLabel('houseUseStatus', forms.houseUse) }}</span>
|
||||
</ai-info-item>
|
||||
|
||||
<ai-info-item label="承租情况" prop="leaseSituation">
|
||||
<span>{{ dict.getLabel('houseLeaseSituation', forms.leaseSituation) }}</span>
|
||||
</ai-info-item>
|
||||
|
||||
<ai-info-item label="起租日期" prop="startDate">
|
||||
{{ $dateFormat(forms.startDate) }}
|
||||
</ai-info-item>
|
||||
|
||||
<ai-info-item label="备案证明" prop="isFilingCertificate">
|
||||
<span>{{ dict.getLabel('isFilingCertificateStatus', forms.isFilingCertificate) }}</span>
|
||||
</ai-info-item>
|
||||
</template>
|
||||
</ai-wrapper>
|
||||
|
||||
<el-form v-if="isEdit" :model="forms" ref="ruleForm" label-width="100px" label-suffix="：" align-items="center"
|
||||
size="small">
|
||||
<template>
|
||||
<el-form-item label="房屋面积" prop="houseArea" class="house">
|
||||
<el-input v-model="forms.houseArea" type="text" size="small" placeholder="请输入" suffix="m²">
|
||||
<template slot="suffix">m²</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div class="family-hose">
|
||||
<el-form-item label="居住现状">
|
||||
<el-radio-group v-model="forms.livingStatus">
|
||||
<el-radio label="0">自用</el-radio>
|
||||
<el-radio label="1">出租</el-radio>
|
||||
<el-radio label="2">闲置</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="房屋用途">
|
||||
<el-radio-group v-model="forms.houseUse">
|
||||
<el-radio label="0">居住</el-radio>
|
||||
<el-radio label="1">闲置</el-radio>
|
||||
<el-radio label="2">经营</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="family-hose">
|
||||
<el-form-item label="承租情况" prop="leaseSituation">
|
||||
<ai-select v-model="forms.leaseSituation" placeholder="请选择" clearable
|
||||
@change=";(page.current = 1), getList()" :selectList="dict.getDict('houseLeaseSituation')"
|
||||
size="small"></ai-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="起租日期" prop="startDate">
|
||||
<el-date-picker v-model="forms.startDate" type="date" placeholder="选择日期" size="small"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="备案证明" prop="isFilingCertificate">
|
||||
<el-radio-group v-model="forms.isFilingCertificate">
|
||||
<el-radio label="0">有租赁房备案证明</el-radio>
|
||||
<el-radio label="1">无租赁房备案证明</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<!-- 房主信息 -->
|
||||
<div class="table">
|
||||
<div class="msg">
|
||||
<b class="house-msg">
|
||||
<span class="icon"></span>
|
||||
<span class="msg">房主信息</span>
|
||||
</b>
|
||||
|
||||
<div class="button">
|
||||
<ai-person-select :instance="instance" @selectPerson="getOwners" ref="getOwner" :chooseUserList="owners"
|
||||
:isMultiple="true" v-if="isEdit"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ai-table :tableData="owners" :col-configs="owner" ref="aitableex">
|
||||
<el-table-column slot="owner" label="居民类型" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
{{ dict.getLabel('BulidResidentType', row.residentType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="owner" label="特殊人群" align="center" v-if="!isEdit">
|
||||
<template slot-scope="{ row }">
|
||||
{{ row.tips }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="owner" label="与户主关系" align="center" v-if="isEdit">
|
||||
<template slot-scope="{ row }">
|
||||
<ai-select v-model="row.relation" placeholder="与户主关系" clearable
|
||||
:selectList="$dict.getDict('householdRelation')"></ai-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="owner" label="与户主关系" align="center" v-if="!isEdit">
|
||||
<template slot-scope="{ row }">
|
||||
{{ dict.getLabel('householdRelation', row.relation) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="options" label="操作" align="center" v-if="isEdit">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="remove(scope.$index, 'owners')">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</div>
|
||||
|
||||
<!-- 承租人信息 -->
|
||||
<div class="table">
|
||||
<div class="msg">
|
||||
<b class="house-msg">
|
||||
<span class="icon"></span>
|
||||
<span class="msg">承租人信息</span>
|
||||
</b>
|
||||
|
||||
<div class="button">
|
||||
<ai-person-select :instance="instance" @selectPerson="getRenters" :chooseUserList="renters"
|
||||
:isMultiple="true" v-if="isEdit"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ai-table :tableData="renters" :col-configs="renter" ref="aitableex">
|
||||
<el-table-column slot="renters" label="居民类型" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
{{ dict.getLabel('BulidResidentType', row.residentType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="renters" label="特殊人群" align="center" v-if="!isEdit">
|
||||
<template slot-scope="{ row }">
|
||||
{{ row.tips }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="renters" label="与户主关系" align="center" v-if="isEdit">
|
||||
<template slot-scope="{ row }">
|
||||
<ai-select v-model="row.relation" placeholder="与户主关系" clearable
|
||||
:selectList="$dict.getDict('householdRelation')"></ai-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="renters" label="与户主关系" align="center" v-if="!isEdit">
|
||||
<template slot-scope="{ row }">
|
||||
{{ dict.getLabel('householdRelation', row.relation) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="options" label="操作" align="center" v-if="isEdit">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="remove(scope.$index, 'renters')">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</div>
|
||||
|
||||
<!-- 实际居住人员 -->
|
||||
<div class="table">
|
||||
<div class="msg">
|
||||
<b class="house-msg">
|
||||
<span class="icon"></span>
|
||||
<span class="msg">实际居住人员</span>
|
||||
</b>
|
||||
|
||||
<div class="button" v-if="isEdit">
|
||||
<ai-person-select :instance="instance" @selectPerson="getLives" :isMultiple="true"
|
||||
:chooseUserList="lives"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ai-table :tableData="lives" :col-configs="live" ref="aitableex">
|
||||
<el-table-column slot="lives" label="居民类型" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
{{ dict.getLabel('BulidResidentType', row.residentType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="lives" label="特殊人群" align="center" v-if="!isEdit">
|
||||
<template slot-scope="{ row }">
|
||||
{{ row.tips }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="lives" label="与户主关系" align="center" v-if="isEdit">
|
||||
<template slot-scope="{ row }">
|
||||
<ai-select v-model="row.relation" placeholder="与户主关系" clearable
|
||||
:selectList="$dict.getDict('householdRelation')"></ai-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="lives" label="与户主关系" align="center" v-if="!isEdit">
|
||||
<template slot-scope="{ row }">
|
||||
{{ dict.getLabel('householdRelation', row.relation) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="options" label="操作" align="center" v-if="isEdit">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="remove(scope.$index, 'lives')">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">{{ isEdit ? '取消' : '关闭' }}</el-button>
|
||||
<el-button type="primary" @click="report" v-if="isEdit">确认</el-button>
|
||||
</span>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BuildMsg',
|
||||
components: {},
|
||||
props: {
|
||||
dict: Object,
|
||||
params: Object,
|
||||
instance: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
total: 0,
|
||||
search: {
|
||||
livingStatus: '',
|
||||
houseCode: '',
|
||||
},
|
||||
colConfigs: [
|
||||
{prop: 'unitNumber', label: '单元', align: 'center'},
|
||||
{prop: 'houseCode', label: '户号', align: 'center'},
|
||||
{prop: 'livingNumber', label: '住户数', align: 'center'},
|
||||
{slot: 'owner', label: '户主', align: 'center'},
|
||||
{slot: 'livingStatus', align: 'center'},
|
||||
{slot: 'options', label: '操作', align: 'center'},
|
||||
],
|
||||
tableData: [],
|
||||
dialogVisible: false,
|
||||
forms: {
|
||||
houseArea: '',
|
||||
livingStatus: 0,
|
||||
houseUse: 0,
|
||||
leaseSituation: '',
|
||||
isFilingCertificate: '',
|
||||
},
|
||||
owners: [],
|
||||
owner: [
|
||||
{prop: 'name', label: '姓名', align: 'center'},
|
||||
{prop: 'idNumber', label: '身份证号', align: 'center'},
|
||||
{prop: 'phone', label: '联系方式', align: 'center'},
|
||||
{slot: 'owner', align: 'center'},
|
||||
{
|
||||
slot: 'relation',
|
||||
align: 'center',
|
||||
},
|
||||
{slot: 'options', label: '操作', align: 'center'},
|
||||
],
|
||||
renters: [],
|
||||
renter: [
|
||||
{prop: 'name', label: '姓名', align: 'center'},
|
||||
{prop: 'idNumber', label: '身份证号', align: 'center'},
|
||||
{prop: 'phone', label: '联系方式', align: 'center'},
|
||||
{
|
||||
slot: 'relation',
|
||||
align: 'center',
|
||||
},
|
||||
{slot: 'renters', align: 'center'},
|
||||
{slot: 'options', label: '操作', align: 'center'},
|
||||
],
|
||||
lives: [],
|
||||
live: [
|
||||
{prop: 'name', label: '姓名', align: 'center'},
|
||||
{prop: 'idNumber', label: '身份证号', align: 'center'},
|
||||
{prop: 'phone', label: '联系方式', align: 'center'},
|
||||
{
|
||||
slot: 'relation',
|
||||
align: 'center',
|
||||
},
|
||||
{slot: 'lives', align: 'center'},
|
||||
{slot: 'options', label: '操作', align: 'center'},
|
||||
],
|
||||
type: '',
|
||||
ids: '',
|
||||
buildingId: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
houseImpParam() {
|
||||
return {
|
||||
buildingId: this.params.id,
|
||||
}
|
||||
},
|
||||
houseExpParam() {
|
||||
return {
|
||||
buildingId: this.params.id,
|
||||
}
|
||||
},
|
||||
isEdit() {
|
||||
return this.type == 'edit'
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
this.dict.load('yesOrNo', 'houselivingStatus', 'houseLeaseSituation', 'isFilingCertificateStatus', 'houseUseStatus', 'BulidResidentType', 'communityBuildingType', 'householdRelation').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance
|
||||
.post(`/app/appcommunityhouseinfo/list`, null, {
|
||||
params: {
|
||||
...this.page,
|
||||
...this.search,
|
||||
buildingId: this.params.id,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 返回按钮
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh,
|
||||
})
|
||||
},
|
||||
|
||||
// 确认增加和编辑
|
||||
report() {
|
||||
this.instance
|
||||
.post(`/app/appcommunityhouseinfo/update`, {
|
||||
...this.forms,
|
||||
id: this.id,
|
||||
owner: this.owners,
|
||||
renter: this.renters,
|
||||
live: this.lives,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('提交成功')
|
||||
|
||||
this.dialogVisible = false
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 详情 和 编辑
|
||||
toEdit(id, type) {
|
||||
this.id = id
|
||||
this.type = type
|
||||
this.instance.post(`/app/appcommunityhouseinfo/queryDetailById?&id=${id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.forms = res.data
|
||||
|
||||
this.owners = this.forms.owner
|
||||
this.renters = this.forms.renter
|
||||
this.lives = this.forms.live
|
||||
}
|
||||
})
|
||||
this.dialogVisible = true
|
||||
},
|
||||
|
||||
// 删除
|
||||
remove(index, source) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this[source].splice(index, 1)
|
||||
})
|
||||
},
|
||||
|
||||
// 选择人员
|
||||
getOwners(val) {
|
||||
let listNew = []
|
||||
let newName = []
|
||||
for (var i = 0; i < val.length; i++) {
|
||||
if (newName.indexOf(val[i].name) == -1) {
|
||||
newName.push(val[i].name)
|
||||
listNew.push(val[i])
|
||||
}
|
||||
}
|
||||
|
||||
this.owners = listNew
|
||||
},
|
||||
|
||||
getRenters(val) {
|
||||
let listNew = []
|
||||
let newName = []
|
||||
for (var i = 0; i < val.length; i++) {
|
||||
if (newName.indexOf(val[i].name) == -1) {
|
||||
newName.push(val[i].name)
|
||||
listNew.push(val[i])
|
||||
}
|
||||
}
|
||||
|
||||
this.renters = listNew
|
||||
},
|
||||
|
||||
getLives(val) {
|
||||
let listNew = []
|
||||
let newName = []
|
||||
for (var i = 0; i < val.length; i++) {
|
||||
if (newName.indexOf(val[i].name) == -1) {
|
||||
newName.push(val[i].name)
|
||||
listNew.push(val[i])
|
||||
}
|
||||
}
|
||||
|
||||
this.lives = listNew
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.BuildMsg {
|
||||
::v-deep .ai-list__title {
|
||||
background-color: #fff;
|
||||
margin: 0 !important;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
::v-deep .ai-list__content {
|
||||
.ai-list__content--right {
|
||||
.ai-list__content--right-wrapper {
|
||||
.search-select {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.left {
|
||||
width: 30%;
|
||||
|
||||
.ai-select {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ai-select:first-child {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
|
||||
.export {
|
||||
.ai-import {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ai-download {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.import {
|
||||
.ai-import {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ai-download {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ai-dialog__wrapper {
|
||||
background-color: #fff;
|
||||
|
||||
.el-dialog__wrapper {
|
||||
.el-dialog__body {
|
||||
.ai-dialog__content {
|
||||
.ai-dialog__content--wrapper {
|
||||
.ai-wrapper {
|
||||
padding-left: 0 !important;
|
||||
|
||||
.bulidmsg {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: 100%;
|
||||
margin: 0 0 15px 20px;
|
||||
|
||||
.icon {
|
||||
border-left: 2px solid #2266ff;
|
||||
}
|
||||
|
||||
.bulidtext {
|
||||
display: inline-block;
|
||||
margin-left: 9px;
|
||||
color: #222;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
.create {
|
||||
width: 100% !important;
|
||||
|
||||
.ai-info-item__left {
|
||||
width: 78px;
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.Address {
|
||||
.ai-info-item__left {
|
||||
width: 78px;
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.building {
|
||||
padding-left: 40px;
|
||||
|
||||
.ai-info-item__left {
|
||||
width: 78px;
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form {
|
||||
padding: 20px 0 0 0;
|
||||
|
||||
.house {
|
||||
width: 50%;
|
||||
|
||||
.el-form-item__content {
|
||||
width: 63%;
|
||||
}
|
||||
}
|
||||
|
||||
.family-hose {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 50% !important;
|
||||
padding-right: 40px;
|
||||
|
||||
.el-form-item__content {
|
||||
.el-input {
|
||||
.el-input__suffix {
|
||||
color: #666;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
padding: 20px 20px 0 20px;
|
||||
|
||||
.msg {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.house-msg {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
|
||||
.icon {
|
||||
border-left: 2px solid #2266ff;
|
||||
}
|
||||
|
||||
.msg {
|
||||
display: inline-block;
|
||||
color: #222;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
margin-left: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
// .button {
|
||||
// }
|
||||
}
|
||||
|
||||
.ai-table {
|
||||
margin-top: 10px;
|
||||
// .el-table {
|
||||
// }
|
||||
.pagination {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,324 +0,0 @@
|
||||
<template>
|
||||
<section class="AppPetitionManage">
|
||||
<ai-detail>
|
||||
<!-- 标题 -->
|
||||
<ai-title slot="title" title="楼栋管理" isShowBottomBorder />
|
||||
<template #content>
|
||||
<ai-tree-menu title="楼栋管理" @search="(v) => $refs.gridTree.filter(v)">
|
||||
<el-tree :data="treeData" ref="gridTree" :filter-node-method="handleTreeFilter" @node-click="handleSelectGrid" highlight-current node-key="id" :props="{ label: 'name', children: 'children' }" :default-expanded-keys="[defaultShowNodes]" />
|
||||
</ai-tree-menu>
|
||||
|
||||
<div class="flex">
|
||||
<ai-search-bar bottomBorder>
|
||||
<template slot="left">
|
||||
<!-- 定位状态 -->
|
||||
<ai-select v-model="search.locationStatus" placeholder="定位状态" clearable :selectList="$dict.getDict('BuildLocationStatus')" @change=";(page.current = 1), getList()"></ai-select>
|
||||
</template>
|
||||
|
||||
<!-- 搜索 -->
|
||||
<template slot="right">
|
||||
<el-input
|
||||
v-model="search.managerName"
|
||||
size="small"
|
||||
placeholder="楼栋号/楼长/联系方式"
|
||||
clearable
|
||||
v-throttle="() => {page.current = 1, getList()}"
|
||||
@clear=";(page.current = 1), (search.managerName = ''), getList()"
|
||||
suffix-icon="iconfont iconSearch" />
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
|
||||
<ai-search-bar class="ai-search-ba">
|
||||
<template slot="left">
|
||||
<el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')" :disabled="!isAdd">添加 </el-button>
|
||||
<el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button>
|
||||
</template>
|
||||
|
||||
<!-- 导入导出 -->
|
||||
<template #right>
|
||||
<ai-import :instance="instance" :dict="dict" type="appcommunitybuildinginfo" :importParams="{ areaId: user.info && user.info.areaId }" name="楼栋管理" @success="getList()">
|
||||
<el-button icon="iconfont iconImport">导入</el-button>
|
||||
</ai-import>
|
||||
<ai-download :instance="instance" url="/app/appcommunitybuildinginfo/listExport" :params="param" fileName="楼栋管理模板" :disabled="tableData.length == 0">
|
||||
<el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
|
||||
</ai-download>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
|
||||
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" style="margin-top: 20px;" :current.sync="page.current" :size.sync="page.size" @getList="getList" @selection-change="(v) => (ids = v.map((e) => e.id))">
|
||||
<el-table-column slot="locationStatus" label="定位状态" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span style="color:red" v-if="row.locationStatus == 0">{{ dict.getLabel('BuildLocationStatus', row.locationStatus) }}</span>
|
||||
<span style="color:green" v-if="row.locationStatus == 1">{{ dict.getLabel('BuildLocationStatus', row.locationStatus) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="options" label="操作" align="center" width="240px" fixed="right">
|
||||
<div class="table-options" slot-scope="{ row }">
|
||||
<el-button type="text" @click="onAdd(row.id)">编辑</el-button>
|
||||
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||
<el-button type="text" @click="toBuildMsg(row)">房屋信息</el-button>
|
||||
<el-button type="text" @click="$router.push({ name: '63', query: { communityId: row.communityId, buildingId: row.id, unitNum: 1, buildingNumber: row.buildingNumber } })">
|
||||
楼栋模型
|
||||
</el-button>
|
||||
</div>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</div>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
props: {
|
||||
dict: Object,
|
||||
instance: Function,
|
||||
params: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isAdd: false,
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
total: 0,
|
||||
search: {
|
||||
locationStatus: '',
|
||||
managerName: '',
|
||||
},
|
||||
id: '',
|
||||
ids: [],
|
||||
colConfigs: [
|
||||
{ type: 'selection' },
|
||||
{
|
||||
prop: 'communityName',
|
||||
label: '小区名称',
|
||||
},
|
||||
{
|
||||
prop: 'buildingNumber',
|
||||
label: '楼栋号',
|
||||
align: 'center',
|
||||
},
|
||||
{ prop: 'unitNumber', label: '单元数', align: 'center' },
|
||||
{
|
||||
prop: 'layerNumber',
|
||||
label: '最高层数',
|
||||
align: 'center',
|
||||
},
|
||||
{ prop: 'householdNumber', label: '每层户数', align: 'center' },
|
||||
{
|
||||
prop: 'houseNum',
|
||||
label: '实有户数',
|
||||
align: 'center',
|
||||
},
|
||||
{ prop: 'residentNum', label: '实有人口', align: 'center' },
|
||||
{
|
||||
prop: 'managerName',
|
||||
label: '楼栋长名',
|
||||
align: 'center',
|
||||
},
|
||||
{ prop: 'managerPhone', label: '楼栋长联系方式', align: 'center', width: '150' },
|
||||
{ slot: 'locationStatus' },
|
||||
{
|
||||
slot: 'options',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
organizationId: '',
|
||||
meta: [],
|
||||
treeData: [],
|
||||
areaId: '',
|
||||
communityId: null,
|
||||
buildingTypeStatus: '',
|
||||
defaultShowNodes: [],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
param() {
|
||||
return {
|
||||
...this.search,
|
||||
communityId: this.communityId,
|
||||
areaId: this.user.info?.areaId,
|
||||
ids: this.ids,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.dict.load('BuildLocationStatus').then(() => {
|
||||
this.getList()
|
||||
this.getListinfo()
|
||||
})
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
getListinfo() {
|
||||
return this.instance.post(`/app/appcommunityinfo/queryCommunityTree?id=${this.user.info?.areaId}`).then((res) => {
|
||||
if (res.data) {
|
||||
this.treeData = [res.data]
|
||||
this.$nextTick(() => {
|
||||
this.defaultShowNodes = this.treeData[0].id
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.instance
|
||||
.post(`/app/appcommunitybuildinginfo/list`, null, {
|
||||
params: {
|
||||
...this.page,
|
||||
...this.search,
|
||||
communityId: this.communityId,
|
||||
areaId: this.areaId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 添加
|
||||
onAdd(id) {
|
||||
this.$emit('change', {
|
||||
type: 'add',
|
||||
params: {
|
||||
id: id || '',
|
||||
bulidId: this.id,
|
||||
communityId: this.communityId,
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 房屋信息
|
||||
toBuildMsg(row) {
|
||||
this.$emit('change', {
|
||||
type: 'buildmsg',
|
||||
params: {
|
||||
...row,
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 删除
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据?').then(() => {
|
||||
this.instance.post(`/app/appcommunitybuildinginfo/delete?ids=${id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
removeAll() {
|
||||
var id = this.ids.join(',')
|
||||
this.remove(id)
|
||||
},
|
||||
|
||||
handleTreeFilter(v, data) {
|
||||
return data?.name.indexOf(v) > -1
|
||||
},
|
||||
|
||||
handleSelectGrid(data) {
|
||||
this.isAdd = false
|
||||
if (data.type == 1) {
|
||||
this.isAdd = true
|
||||
this.communityId = data.id
|
||||
this.areaId = null
|
||||
} else if (data.type == 0) {
|
||||
this.communityId = null
|
||||
this.areaId = data.id
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppPetitionManage {
|
||||
height: 100%;
|
||||
|
||||
.ai-detail {
|
||||
::v-deep .ai-detail__content {
|
||||
.ai-detail__content--wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
padding: 15px;
|
||||
|
||||
.AiTreeMenu {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
.flex {
|
||||
width: 78%;
|
||||
margin-left: 10px;
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
|
||||
.ai-search-ba {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ai-table {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-tree {
|
||||
.el-tree-node__content {
|
||||
display: inline-flex;
|
||||
min-width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: #e8efff;
|
||||
color: #222222;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.is-current > .el-tree-node__content {
|
||||
background: #2266ff;
|
||||
min-width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: #2266ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .is-current>.el-tree-node__content{
|
||||
width: 100%!important;
|
||||
padding-right: 16px!important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,443 +0,0 @@
|
||||
<template>
|
||||
<section class="buildingStatistics">
|
||||
<ai-title v-if="!isFormDv" title="楼栋统计" isShowBack isShowBottomBorder @onBackClick="$router.push({query:{}}),$parent.info={},$parent.isShowInfo=false,$parent.house=null,$parent.chooseBuildId=''"/>
|
||||
<div class="buildingPane">
|
||||
<div class="bgItem tree"/>
|
||||
<div class="building">
|
||||
<template v-if="floorRooms.length>0">
|
||||
<div class="buildingSignboard">{{ `${currentBuilding.buildingNumber}栋 ${unitNumber}单元` }}
|
||||
</div>
|
||||
<el-scrollbar class="floors">
|
||||
<div class="floor" v-for="(fl,j) in floorRooms" :key="j">
|
||||
<div class="room" v-for="(op,i) in fl" :key="op.id" @click="handleSelectRoom(op,$event)" @touchstart="handleSelectRoom(op,$event)" :class="[{none:op.livingNumber==0,selected:selected.houseCode==op.houseCode},handleTipsHighlight(op.tips)]">
|
||||
{{ op.houseCode }}
|
||||
<div v-if="op.livingNumber==0">无人</div>
|
||||
<div v-show="op.id==selected.id" class="detail" @click.stop :style="{left:position.x,top:position.y}">
|
||||
<el-row class="popupHeader" type="flex" justify="space-between" align="middle">
|
||||
<span>{{selected.houseCode}}详情</span>
|
||||
<ai-icon icon="iconClean" @click.native.stop="selected={}"/>
|
||||
</el-row>
|
||||
<div class="family-member">
|
||||
<h2>房主信息</h2>
|
||||
<div v-for="(item,index) in selected.owner" :key="item.id">
|
||||
<div class="family-member__item">
|
||||
<div class="member-left">
|
||||
<label>{{item.name}}</label>
|
||||
</div>
|
||||
<span style="color: #2266FF">{{root.dict.getLabel("houseLivingType",item.livingType)}}</span>
|
||||
</div>
|
||||
<div class="family-member__item">
|
||||
<div class="member-left">
|
||||
<label>联系方式</label>
|
||||
</div>
|
||||
<span style="color: #2266FF;">{{item.phone}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>承租人信息</h2>
|
||||
<div v-for="(item,index) in selected.renter" :key="item.id">
|
||||
<div class="family-member__item" >
|
||||
<div class="member-left">
|
||||
<label>{{item.name}}</label>
|
||||
</div>
|
||||
<span style="color: #2266FF">{{root.dict.getLabel("houseLivingType",item.livingType)}}</span>
|
||||
</div>
|
||||
<div class="family-member__item">
|
||||
<div class="member-left">
|
||||
<label>联系方式</label>
|
||||
</div>
|
||||
<span>{{item.phone}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>实际居住人员</h2>
|
||||
<div v-for="(item,index) in selected.live" :key="item.id">
|
||||
<div class="family-member__item">
|
||||
<div class="member-left">
|
||||
<label>{{item.name}}</label>
|
||||
</div>
|
||||
<span>{{root.dict.getLabel("householdRelation",item.relation)}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<ai-empty v-else>请在【<b>小区总览</b>】中选取【楼栋单元】</ai-empty>
|
||||
<div class="bottom"/>
|
||||
</div>
|
||||
<building-tool-bar></building-tool-bar>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BuildingToolBar from "./buildingToolBar";
|
||||
|
||||
export default {
|
||||
name: "buildingStatistics",
|
||||
components: {BuildingToolBar},
|
||||
inject: ['root'],
|
||||
provide() {
|
||||
return {
|
||||
sta: this
|
||||
}
|
||||
},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
isFormDv: Boolean,
|
||||
query: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rooms: [],
|
||||
selected: {},
|
||||
currentBuilding: {},
|
||||
unitNumber:1,
|
||||
tips: [],
|
||||
position:{
|
||||
x:"",
|
||||
y:""
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
floorRooms() {
|
||||
let obj = {}
|
||||
this.rooms.map(e => {
|
||||
e.none = e.isNone == 0
|
||||
return obj[e.layerNumber]?.push(e) || (obj[e.layerNumber] = [e])
|
||||
})
|
||||
return Object.values(obj).reverse()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dict.load('householdRelation', 'residentTipType',"houseLivingType")
|
||||
if (this.isFormDv && this.query.buildingId) {
|
||||
this.getRoomsByBuilding(this.query.buildingId, this.query.unitNum)
|
||||
this.currentBuilding = { buildingNumber: this.query.buildingNumber}
|
||||
this.unitNumber = this.query.unitNum
|
||||
|
||||
return false
|
||||
}
|
||||
this.getRoomsByBuilding(this.$route.query?.buildingId,this.$route.query?.unitNum)
|
||||
this.currentBuilding = {buildingNumber: this.$route.query?.buildingNumber};
|
||||
this.unitNumber = this.$route.query?.unitNum;
|
||||
},
|
||||
methods: {
|
||||
handleSelectRoom(room, e) {
|
||||
console.log(e)
|
||||
if (room.livingNumber>0) {
|
||||
this.$nextTick(()=>{
|
||||
this.position.x = e.pageX + 40 + "px"
|
||||
this.position.y = e.pageY + "px"
|
||||
this.selected = room;
|
||||
this.$forceUpdate()
|
||||
})
|
||||
// this.getRoomDetail(room.id)
|
||||
}
|
||||
},
|
||||
selectedBuilding(building,unitNumber) {
|
||||
this.selected = {}
|
||||
this.tips = []
|
||||
this.$router.push({query: {...this.$route.query, buildingId: building.id,unitNum:unitNumber}}).catch(e=>{e})
|
||||
this.currentBuilding = building
|
||||
this.unitNumber = unitNumber
|
||||
this.getRoomsByBuilding(building.id,unitNumber)
|
||||
},
|
||||
getRoomsByBuilding(buildingId,unitNumber) {
|
||||
this.root.instance.post("/app/appcommunityhouseinfo/list", null, {
|
||||
params: {
|
||||
unitNumber,
|
||||
buildingId,
|
||||
size: 999
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.rooms = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
getRoomDetail(id) {
|
||||
return this.root.instance.post("/app/appcommunityhouseinfo/queryDetailById", null, {
|
||||
params: {id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
let {residents} = res.data
|
||||
this.selected = {
|
||||
...this.selected, ...res.data,
|
||||
residents: residents.map(e => {
|
||||
let {tips} = e
|
||||
//显示为户主
|
||||
let relationLabel = e.householdName == 1 ? "户主" : this.root.dict.getLabel("householdRelation", e.householdRelation)
|
||||
return {...e, tips: tips ? tips.split("|") : [], relationLabel}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleTipsHighlight(tip) {
|
||||
let flag = this.tips.length > 0 && !this.tips.some(t => tip?.split("|").includes(t))
|
||||
return flag ? 'tipsHighlight' : ''
|
||||
},
|
||||
selectedTips(tips) {
|
||||
this.tips = tips
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.buildingStatistics {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
::v-deep .ailist-title{
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.family-member {
|
||||
& > h2 {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
padding: 0 12px;
|
||||
color: #333333;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
background: #E3E8F1;
|
||||
}
|
||||
|
||||
.family-member__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
background: #F3F6F9;
|
||||
|
||||
.member-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: normal !important;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
label {
|
||||
color: #666666;
|
||||
font-weight: normal !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buildingPane {
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/cloud.png"), linear-gradient(3deg, #FFFFFF 0%, #3093FF 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 227px 43px, 100%;
|
||||
background-size: 788px 112px, 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding-right: 400px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
|
||||
.bgItem {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
|
||||
&.tree {
|
||||
left: calc(50% - 200px);
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
width: 580px;
|
||||
height: 71px;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/tree.png");
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.building {
|
||||
margin-left: 60px;
|
||||
flex-shrink: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 136px 0 0;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/roof.png"),
|
||||
url("https://cdn.cunwuyun.cn/buildSta/chimney.png");
|
||||
background-position: 0 121px, 70px 91px;
|
||||
background-size: 100% 105px, 70px;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
border-bottom: 10px solid #E9C28E;
|
||||
|
||||
.buildingSignboard {
|
||||
padding-top: 41px;
|
||||
width: 200px;
|
||||
height: 65px;
|
||||
text-align: center;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/buildingSignboard.png");
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #1D3296;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ai-empty {
|
||||
background: #FFECD9;
|
||||
margin: 90px 20px 0;
|
||||
padding: 0 10px 90px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
b {
|
||||
color: #26f
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
background: #FFECD9;
|
||||
height: 50px;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .floors {
|
||||
max-height: 520px;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.floor {
|
||||
margin: 0 20px;
|
||||
height: 105px;
|
||||
flex-shrink: 0;
|
||||
max-width: calc(100% - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/floor.png");
|
||||
background-size: 100% 105px;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
gap: 20px;
|
||||
|
||||
.room {
|
||||
width: 60px;
|
||||
height: 72px;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/room.png");
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
.detail {
|
||||
position: fixed;
|
||||
width: 320px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 11;
|
||||
transform: translateY(-100%);
|
||||
|
||||
.popupHeader {
|
||||
background: #D42222;
|
||||
padding: 0 12px;
|
||||
height: 32px;
|
||||
|
||||
.AiIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
height: 32px;
|
||||
|
||||
& > div {
|
||||
|
||||
}
|
||||
|
||||
&.title {
|
||||
background: #E3E8F1;
|
||||
}
|
||||
|
||||
&.stretch {
|
||||
background: #F3F6F9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.none {
|
||||
cursor: not-allowed;
|
||||
color: #f46;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/roomNone.png");
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/roomSelected.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buildingToolBar {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.tipsHighlight {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<section class="buildingToolBar">
|
||||
<div class="toolBar">
|
||||
<div class="nav" v-for="(op,i) in navs" :key="i" :class="{selected:i==active}" @click="active=i">
|
||||
<ai-icon :icon="op.icon"/>
|
||||
<div>{{ op.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="currentNav.comp" class="toolPane"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BuildingInfo from "./toolBar/buildingInfo";
|
||||
import CommunityOverview from "./toolBar/communityOverview";
|
||||
// import NearbyGCS from "./toolBar/nearbyGCS";
|
||||
import RecentEvents from "./toolBar/recentEvents";
|
||||
|
||||
export default {
|
||||
name: "buildingToolBar",
|
||||
components: {RecentEvents, CommunityOverview, BuildingInfo},
|
||||
computed: {
|
||||
navs() {
|
||||
return [
|
||||
{icon: 'icondanweiguanli', name: "单元统计", comp: BuildingInfo},
|
||||
{icon: 'icondanweiguanli', name: "单元切换", comp: CommunityOverview},
|
||||
// {icon: 'icondanweiguanli', name: "网格员", comp: NearbyGCS},
|
||||
// {icon: 'icondanweiguanli', name: "近期事件", comp: RecentEvents},
|
||||
]
|
||||
},
|
||||
currentNav() {
|
||||
return this.navs[this.active]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.buildingToolBar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.toolBar {
|
||||
height: 40px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
width: 400px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
align-self: flex-end;
|
||||
|
||||
.nav {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
color: #3A3A3A;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
.AiIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #2266FF;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: #E4F0FF;
|
||||
color: #2266FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolPane {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,239 +0,0 @@
|
||||
<template>
|
||||
<section class="buildingInfo">
|
||||
<ai-title title="人口信息"/>
|
||||
<div class="infoPane">
|
||||
<div class="staZone">
|
||||
<div v-for="(value, name) in staData" :key="name">
|
||||
<b>{{ value }}</b>
|
||||
<span>{{ name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ai-title title="房屋信息"/>
|
||||
<div class="infoPane">
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>所属社区</span>
|
||||
<span>{{build.areaName}}</span>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>所属小区</span>
|
||||
<span>{{build.communityName}}</span>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>房屋类型</span>
|
||||
<span>{{root.dict.getLabel("communityBuildingType",build.buildingType)}}</span>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>楼长姓名</span>
|
||||
<span>{{build.managerName}}</span>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>联系方式</span>
|
||||
<span>{{build.managerPhone}}</span>
|
||||
</el-row>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: "buildingInfo",
|
||||
inject: ['root', 'sta'],
|
||||
computed: {
|
||||
chartData() {
|
||||
return this.root.dict.getDict("residentTipType").map(e => ({
|
||||
name: e.dictName,
|
||||
key: e.dictValue,
|
||||
color: e.dictColor,
|
||||
v1: 0
|
||||
}))
|
||||
},
|
||||
colConfigs() {
|
||||
return [
|
||||
{prop:"areaName",label:"所属社区"}
|
||||
];
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
staData: {},
|
||||
tag:{},
|
||||
color:{},
|
||||
build:{},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart(data) {
|
||||
this.chart = echarts.init(document.getElementById("PersonStaChart"))
|
||||
let selected = {}, color = []
|
||||
this.chartData.map(e => {
|
||||
selected[e.name] = false
|
||||
color.push(e.color)
|
||||
})
|
||||
this.chart.setOption({
|
||||
grid: {top: 31, right: 0, height: 135},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
top: 185,
|
||||
left: 0,
|
||||
orient: "vertical",
|
||||
selected,
|
||||
itemWidth: 14,
|
||||
itemHeight: 14,
|
||||
itemGap: 12,
|
||||
icon: "rect",
|
||||
formatter: name => {
|
||||
let item = data.find(e => this.root.dict.getLabel('residentTipType', e.name) == name)
|
||||
return `{a|${name}} {b|${item.v1}}`
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {color: "#666", width: 123},
|
||||
b: {color: "#333", fontWeight: 'bold', align: 'right'}
|
||||
}
|
||||
}
|
||||
}, color,
|
||||
yAxis: {type: 'value', min: 0, minInterval: 1, axisTick: false, axisLine: false, axisLabel: {color: "#666"}},
|
||||
xAxis: {type: 'category', axisTick: false, axisLine: false, axisLabel: false},
|
||||
series: data.map(e => ({
|
||||
type: 'bar',
|
||||
barWidth: 8,
|
||||
barGap: '250%',
|
||||
name: this.root.dict.getLabel('residentTipType', e.name)
|
||||
}))
|
||||
})
|
||||
this.chart.on('legendselectchanged', ({selected}) => {
|
||||
let tips = Object.keys(selected)?.filter(e => selected[e])?.map(e => this.root.dict.getValue('residentTipType', e))
|
||||
this.sta?.selectedTips(tips)
|
||||
})
|
||||
this.getChartData(data)
|
||||
},
|
||||
getChartData(data) {
|
||||
this.chart?.setOption({
|
||||
series: data.map(e => ({data: [e.v1]}))
|
||||
})
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.root.dict?.load("communityBuildingType")
|
||||
},
|
||||
mounted() {
|
||||
this.root.instance.post("/app/appcommunitybuildinginfo/statistics", null, {
|
||||
params: {
|
||||
id: this.root.isFormDv ? this.root.info.id : this.$route.query.buildingId,
|
||||
unitNum: this.root.isFormDv ? this.root.info.unitNumber : this.$route.query.unitNum,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.staData = res.data.unit;
|
||||
this.tag = res.data.tag;
|
||||
this.color = res.data.color;
|
||||
this.build = res.data.build;
|
||||
// this.root.dict.load('residentTipType').then(() => {
|
||||
// this.initChart(res.data.lx)
|
||||
// })
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.buildingInfo {
|
||||
::v-deep .infoPane {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px;
|
||||
|
||||
.info-item{
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
align-items: center;
|
||||
|
||||
span:last-child{
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
&:nth-child(2n-1){
|
||||
background-color: #F3F6F9;
|
||||
}
|
||||
}
|
||||
|
||||
.static-wrap{
|
||||
width: 360px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.sta-item{
|
||||
width: 46%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.sta-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tag{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #DC1739;
|
||||
border-radius: 2px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
& > label{
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.num{
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.staZone {
|
||||
height: 80px;
|
||||
background: #F5F7F9;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
|
||||
b {
|
||||
font-size: 24px;
|
||||
font-family: DINAlternate-Bold, DINAlternate,serif;
|
||||
color: #2266FF;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
#PersonStaChart {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,116 +0,0 @@
|
||||
<template>
|
||||
<section class="communityOverview">
|
||||
<ai-title title="小区总览"/>
|
||||
<div class="units" v-if="Object.keys(buildingUnits).length>0">
|
||||
<div class="building" v-for="(value,name) in buildingUnits" :key="name">
|
||||
<div class="unit" v-for="(op,j) in value" :key="j" @click="sta.selectedBuilding(op,j+1)"
|
||||
:class="{selected:sta.unitNumber==j+1 && sta.currentBuilding.buildingNumber==name}">
|
||||
<b>{{ name}}栋</b>
|
||||
<div>{{ j+1 }}单元</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-else>暂无楼栋信息,请进入【楼栋管理】添加</AiEmpty>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "communityOverview",
|
||||
inject: ['root', 'sta'],
|
||||
computed: {
|
||||
buildingUnits() {
|
||||
let obj = {}
|
||||
this.units.map(e => {
|
||||
for(let i=0;i<e.unitNumber;i++){
|
||||
obj[e.buildingNumber]?.push(e) || (obj[e.buildingNumber] = [e])
|
||||
}
|
||||
})
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
units: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUnits(communityId) {
|
||||
this.root.instance.post("/app/appcommunitybuildinginfo/list", null, {
|
||||
params: {
|
||||
communityId,
|
||||
size: 999
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.units = res.data.records
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getUnits(this.root.isFormDv ? this.root.info.communityId : this.$route.query.communityId)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.communityOverview {
|
||||
max-width: 400px;
|
||||
|
||||
.units {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 20px 20px;
|
||||
align-items: flex-start;
|
||||
|
||||
.building {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.unit {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:nth-of-type(5) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
width: 64px;
|
||||
height: 56px;
|
||||
background: #F8FBFF;
|
||||
border-radius: 2px 0 0 2px;
|
||||
border: 1px solid #829CCF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
|
||||
b {
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: #fff;
|
||||
background: #2266FF;
|
||||
|
||||
b {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ai-empty {
|
||||
height: 240px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,129 +0,0 @@
|
||||
<template>
|
||||
<section class="nearbyGCS">
|
||||
<ai-title title="全部网格员"/>
|
||||
<div class="radarPane">
|
||||
<div class="radar">
|
||||
<div class="indicator"/>
|
||||
</div>
|
||||
<div class="gcsItem" v-for="(op,i) in userList" :key="i" :style="op.style">
|
||||
<i class="dot" :class="{offline:op.offline}"/>
|
||||
<span>{{ op.name }}</span>
|
||||
<ai-icon icon="iconIM"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "nearbyGCS",
|
||||
inject: ['root', 'sta'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
userList: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.getInfo()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo () {
|
||||
this.root.instance.post('/app/appgirdmemberinfo/queryGirdMemberByBuilding', null, {
|
||||
params: {buildingId: this.$route.query.buildingId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.gcsList(res.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
gcsList (data) {
|
||||
this.userList = data.map(e => ({
|
||||
...e,
|
||||
style: {
|
||||
transform: `translate(
|
||||
${Math.round(160 * (Math.random() - 0.5))}px,
|
||||
${Math.round(160 * (Math.random() - 0.5))}px)`}
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nearbyGCS {
|
||||
.radarPane {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.gcsItem {
|
||||
position: absolute;
|
||||
width: 92px;
|
||||
height: 28px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
gap: 8px;
|
||||
|
||||
.AiIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #30BC77;
|
||||
|
||||
&.offline {
|
||||
background: #FF4466;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radar {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/radarBg.png");
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform-origin: 100% 100%;
|
||||
background: linear-gradient(190deg, rgba(162, 255, 182, 0.5) 0%, rgba(162, 255, 215, 0) 100%);
|
||||
border-right: 1px solid #A2FFB6;
|
||||
animation: radar 5s linear infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes radar {
|
||||
0% {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<section class="recentEvents">
|
||||
<ai-title title="楼栋近期相关事件"/>
|
||||
<div class="recentEvents-list">
|
||||
<div class="recentEvents-item" v-for="(item, index) in 4" :key="index">
|
||||
<div class="recentEvents-item__top">
|
||||
<i>[已解决]</i>
|
||||
<span>102室与402室矛盾纠纷</span>
|
||||
</div>
|
||||
<div class="recentEvents-item__middle">
|
||||
<span>102室与402室矛盾纠纷</span>
|
||||
<em>[张三]</em>
|
||||
<span>接到了</span>
|
||||
<em>[矛盾调解]</em>
|
||||
<span>任务，事件目前</span>
|
||||
<i>[已完成]</i>
|
||||
</div>
|
||||
<div class="recentEvent-item__bottom">2019-06-18 13:35:45</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "recentEvents"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.recentEvents {
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
|
||||
.recentEvents-list {
|
||||
.recentEvents-item {
|
||||
border-bottom: 1px solid #E6E8EE;
|
||||
background: transparent;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.recentEvent-item__bottom {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
background: #EFF6FF;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.recentEvents-item__top {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.recentEvents-item__middle {
|
||||
margin: 6px 0 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
em {
|
||||
color: #2266FF;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: #2EA222;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<section class="AppCommunityManage ailist-wrapper">
|
||||
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/List'
|
||||
import Add from './components/Add'
|
||||
|
||||
export default {
|
||||
name: 'AppCommunityManage',
|
||||
label: '小区管理',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {},
|
||||
include: [],
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
Add,
|
||||
List,
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(data) {
|
||||
if (data.type === 'add') {
|
||||
this.component = 'Add'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type === 'list') {
|
||||
this.component = 'List'
|
||||
this.params = data.params
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppCommunityManage {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,284 +0,0 @@
|
||||
<template>
|
||||
<ai-detail showFooter class="add-detail">
|
||||
<template slot="title">
|
||||
<ai-title :title="isEdit ? '编辑小区信息' : '添加小区'" :isShowBack="true" @onBackClick="cancel()"
|
||||
:isShowBottomBorder="true"></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<div class="add-form">
|
||||
<ai-bar title="基础信息"></ai-bar>
|
||||
<el-form label-width="110px" style="padding-bottom: 80px;" :model="form" ref="form">
|
||||
<el-form-item label="小区名称" prop="communityName"
|
||||
:rules="[{ required: true, message: '请输入小区名称', trigger: 'blur' }]">
|
||||
<el-input size="small" v-model="form.communityName" :maxlength="50" placeholder="请输入小区名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="行政归属" prop="areaId" :rules="[
|
||||
{ required: true, message: '请选择行政归属', trigger: 'blur' },
|
||||
{ pattern:/[^0]0{0,2}$/g, message: '请选择到村/社区' }]">
|
||||
<ai-area-get :instance="instance" v-model="form.areaId" :root="user.info.areaId"
|
||||
@select="handleAreaSelect"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="小区地址" prop="address" :rules="[{ required: true, message: '请输入小区地址', trigger: 'blur' }]">
|
||||
<el-input size="small" v-model="form.address" placeholder="请输入小区地址" clearable/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="所属网格" prop="girdInfoList" style="margin-top: 8px;"
|
||||
:rules="[{ required: true, message: '请选择所属网格', trigger: 'blur' }]">
|
||||
<el-tag
|
||||
:key="index"
|
||||
v-for="(tag,index) in form.girdInfoList"
|
||||
closable
|
||||
style="margin-right: 16px;"
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(tag)">
|
||||
{{ tag.girdName }}
|
||||
</el-tag>
|
||||
<el-button size="small" @click="showGrid=true">选择网格</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true"
|
||||
@opened="beforeSelectTree" border width="720px">
|
||||
<div class="grid">
|
||||
<el-tree :data="treeObj.treeList" :props="treeObj.defaultProps" node-key="id" ref="tree"
|
||||
:check-strictly="true" show-checkbox
|
||||
:default-checked-keys="treeObj.checkedKeys" default-expand-all
|
||||
@check="onCheckChange">
|
||||
<template slot-scope="{node,data}">
|
||||
<el-tooltip :content="node.label">
|
||||
<div class="el-tree-node__label" v-text="node.label"/>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button size="medium" @click="showGrid=false">取消</el-button>
|
||||
<el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
<template slot="footer" class="footer">
|
||||
<el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
|
||||
<el-button class="footer-btn" type="primary" @click="onSubmit('0')">保存</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Add',
|
||||
|
||||
props: {
|
||||
dict: Object,
|
||||
params: Object,
|
||||
instance: Function,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
gridList: [],
|
||||
girdId: '',
|
||||
subGridId: '',
|
||||
subGridList: [],
|
||||
sonGridList: [],
|
||||
form: {
|
||||
communityName: '',
|
||||
areaName: '',
|
||||
areaId: '',
|
||||
girdId: '',
|
||||
dealOpinion: '',
|
||||
recordUser: '',
|
||||
address: '',
|
||||
girdInfoList: [],
|
||||
girdName: '',
|
||||
},
|
||||
showGrid: false,
|
||||
treeObj: {
|
||||
treeList: [],
|
||||
defaultProps: {
|
||||
children: "girdList",
|
||||
label: "girdName",
|
||||
},
|
||||
checkedKeys: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
isEdit() {
|
||||
return !!this.params.id
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.dict.load('cardType', 'sex', 'nation').then(() => {
|
||||
if (this.params && this.params.id) {
|
||||
this.getInfo(this.params.id)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
beforeSelectTree() {
|
||||
this.treeObj.checkedKeys = [];
|
||||
this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.treeObj.treeList = this.format(res.data)
|
||||
if (this.form.girdInfoList.length) {
|
||||
this.form.girdInfoList.map((e) => {
|
||||
this.treeObj.checkedKeys.push(e.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onCheckChange(e) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.getCheckedKeys().forEach(v => {
|
||||
this.$refs.tree.setChecked(v, false)
|
||||
})
|
||||
this.$refs.tree.setChecked(e.id, true)
|
||||
})
|
||||
},
|
||||
|
||||
format(list) {
|
||||
return list.map(item => {
|
||||
if (item.girdList && item.girdList.length) {
|
||||
item.girdList = this.format(item.girdList)
|
||||
}
|
||||
|
||||
return item
|
||||
})
|
||||
},
|
||||
getCheckedTree() {
|
||||
if (this.$refs.tree.getCheckedNodes().length > 1) {
|
||||
return this.$message.error('不能绑定多个网格')
|
||||
}
|
||||
this.form.girdInfoList = this.$refs.tree.getCheckedNodes();
|
||||
this.showGrid = false;
|
||||
},
|
||||
handleClose(tag) {
|
||||
this.form.girdInfoList.splice(this.form.girdInfoList.indexOf(tag), 1);
|
||||
},
|
||||
getInfo(id) {
|
||||
this.instance.post(`/app/appcommunityinfo/queryDetailById?id=${id}`).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.girdId = res.data.girdId0
|
||||
this.form.communityName = res.data.communityName
|
||||
this.form.address = res.data.address
|
||||
this.form.areaName = res.data.areaName
|
||||
this.form.girdId = res.data.girdId
|
||||
this.form.girdName = res.data.girdName
|
||||
this.form.girdInfoList = [{id: res.data.girdId, girdName: res.data.girdName}]
|
||||
this.$set(this.form, 'areaId', res.data.areaId)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onSubmit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.girdInfoList.length > 1) {
|
||||
return this.$message.error('不能绑定多个网格')
|
||||
}
|
||||
|
||||
this.form.girdName = this.form.girdInfoList[0].girdName
|
||||
this.form.girdId = this.form.girdInfoList[0].id
|
||||
this.instance
|
||||
.post(`/app/appcommunityinfo/addOrUpdate`, {
|
||||
...this.form,
|
||||
id: this.params ? this.params.id : '',
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success('提交成功')
|
||||
setTimeout(() => {
|
||||
this.cancel(true)
|
||||
}, 800)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh,
|
||||
})
|
||||
},
|
||||
handleAreaSelect(v) {
|
||||
this.form.areaName = v?.[0]?.label
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-detail {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #f2f4f6 !important;
|
||||
|
||||
.add-form__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
::v-deep .ai-detail__footer {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
::v-deep .ai-detail__content--active {
|
||||
padding: 20px;
|
||||
|
||||
.ai-detail__content--wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aibar {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
padding: 0 96px 0 50px;
|
||||
}
|
||||
|
||||
.add-form {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ai-wrapper {
|
||||
align-items: inherit !important;
|
||||
}
|
||||
|
||||
.user-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: contain;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,202 +0,0 @@
|
||||
<template>
|
||||
<ai-list class="AppPetitionManage">
|
||||
<template slot="title">
|
||||
<ai-title title="小区管理" isShowBottomBorder />
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar class="search-bar" bottomBorder>
|
||||
<template slot="left">
|
||||
<el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加</el-button>
|
||||
<el-button :disabled="!ids.length" icon="iconfont iconDelete" size="small" @click="removeAll">删除</el-button>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input @clear=";(search.current = 1), (search.communityName = ''), getList()" v-throttle="() => {search.current=1,getList()}" v-model="search.communityName" class="search-input" size="small" placeholder="小区名称" suffix-icon="iconfont iconSearch" clearable />
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
|
||||
<ai-search-bar style="margin-top: 15px;">
|
||||
<template #right>
|
||||
<!-- :importParams="{ areaId: user.info && user.info.areaId }" -->
|
||||
<ai-import :instance="instance" :dict="dict" type="appcommunityinfo" name="小区管理" @success="getList()">
|
||||
<el-button icon="iconfont iconImport">导入</el-button>
|
||||
</ai-import>
|
||||
<ai-download :instance="instance" url="/app/appcommunityinfo/listExport" :params="param" fileName="小区管理模板" :disabled="tableData.length == 0">
|
||||
<el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
|
||||
</ai-download>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<!-- <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="search.current" @selection-change="handleSelectionChange"> -->
|
||||
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="search.current" @selection-change="(v) => (ids = v.map((e) => e.id))" :size.sync="search.size" @getList="getList">
|
||||
<el-table-column slot="options" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span class="table-btn" title="编辑" @click="toEdit(row.id)">编辑</span>
|
||||
<span class="table-btn table-btn__remove" title="删除" @click="remove(row.id)">删除</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'List',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
communityName: '',
|
||||
},
|
||||
ids: [],
|
||||
total: 0,
|
||||
colConfigs: [
|
||||
{ type: 'selection' },
|
||||
{ prop: 'communityName', label: '小区名称', align: 'center', width: '200' },
|
||||
{ prop: 'areaName', label: '行政划分' },
|
||||
{ prop: 'address', label: '小区地址' },
|
||||
{ prop: 'girdName', label: '所属网格' },
|
||||
{ prop: 'buildingNumber', label: '总楼栋数（栋）', align: 'center' },
|
||||
{ prop: 'createUserName', label: '创建人', align: 'center' },
|
||||
{ prop: 'createTime', label: '创建时间', align: 'center' },
|
||||
{ slot: 'options', label: '操作', align: 'center' },
|
||||
],
|
||||
tableData: [],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
importParams() {
|
||||
return {
|
||||
name: this.search.name,
|
||||
ids: this.ids.map((v) => v.id).join(','),
|
||||
}
|
||||
},
|
||||
|
||||
param() {
|
||||
let params = {}
|
||||
|
||||
if (this.ids.length) {
|
||||
params = {
|
||||
...params,
|
||||
ids: this.ids,
|
||||
}
|
||||
} else {
|
||||
params = {
|
||||
...params,
|
||||
...this.search,
|
||||
ids: this.ids,
|
||||
}
|
||||
}
|
||||
return params
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance
|
||||
.post(`/app/appcommunityinfo/list`, null, {
|
||||
params: {
|
||||
...this.search,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSelectionChange(e) {
|
||||
this.ids = e
|
||||
},
|
||||
|
||||
toEdit(id) {
|
||||
this.$emit('change', {
|
||||
type: 'add',
|
||||
params: {
|
||||
id: id,
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
removeAll() {
|
||||
// this.remove(this.ids.map((v) => v.id).join(','))
|
||||
var id = this.ids.join(',')
|
||||
this.remove(id)
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appcommunityinfo/delete?ids=${id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onReset() {
|
||||
this.search.current = 1
|
||||
this.search.communityName = ''
|
||||
|
||||
this.getList()
|
||||
},
|
||||
|
||||
onAdd(id) {
|
||||
this.$emit('change', {
|
||||
type: 'add',
|
||||
params: {
|
||||
id: id,
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppPetitionManage {
|
||||
::v-deep th {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.table-btn {
|
||||
color: #2266ff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child:hover {
|
||||
color: #f46;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-right: 16px;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-color89B {
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div class="AppGridBlock">
|
||||
<component :is="currentPage" :instance="instance" :dict="dict"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from "./components/list";
|
||||
import Add from "./components/add";
|
||||
|
||||
export default {
|
||||
name: "AppGridBlock",
|
||||
label: "网格区块",
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
computed: {
|
||||
currentPage() {
|
||||
return this.$route.hash == "#add" ? Add : List
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
component: "List",
|
||||
};
|
||||
},
|
||||
components: {Add, List},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppGridBlock {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,216 +0,0 @@
|
||||
<template>
|
||||
<div class="add-block">
|
||||
<ai-detail>
|
||||
<template #title>
|
||||
<ai-title
|
||||
:title="pageTitle"
|
||||
:isShowBack="true"
|
||||
:isShowBottomBorder="true"
|
||||
@onBackClick="cancel(false)"
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<el-form ref="rules" :model="forms" :rules="formRules" size="small" label-suffix="：" label-width="120px">
|
||||
<ai-card title="基础信息">
|
||||
<template slot="content">
|
||||
<el-form-item label="网格名称" prop="girdName">
|
||||
<el-input v-model="forms.girdName" placeholder="请输入…" :maxlength="50" show-word-limit clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="网格长" prop="girdMemberManageList">
|
||||
<ai-user-picker :instance="instance" v-model="forms.girdMemberManageList" :props="{label:'name', id: 'id'}"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="网格员" prop="girdMemberList">
|
||||
<ai-user-picker :instance="instance" v-model="forms.girdMemberList" :props="{label:'name', id: 'id'}"/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="其他信息">
|
||||
<template slot="content">
|
||||
<el-row type="flex">
|
||||
<div class="fill">
|
||||
<el-form-item label="初始日期" prop="startDate">
|
||||
<el-date-picker
|
||||
v-model="forms.startDate"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="终止日期" prop="endDate">
|
||||
<el-date-picker v-model="forms.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="fill">
|
||||
<el-form-item label="面积" prop="area">
|
||||
<el-input v-model="forms.area" placeholder="面积㎡" clearable/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-form-item label="网格地址" prop="address">
|
||||
<el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="网格范围" prop="enclosure">
|
||||
<map-plotting v-model="forms.points">
|
||||
<el-button size="small">地图标绘</el-button>
|
||||
</map-plotting>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</ai-card>
|
||||
</el-form>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="cancel(false)" class="delete-btn footer-btn">
|
||||
取 消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="save()" class="footer-btn">
|
||||
提 交
|
||||
</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import MapPlotting from "./mapPlotting";
|
||||
import AiUserPicker from "../../components/AiUserPicker";
|
||||
|
||||
export default {
|
||||
name: "addBlock",
|
||||
components: {AiUserPicker, MapPlotting},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
params: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
forms: {
|
||||
girdMemberManageList: [],
|
||||
girdMemberList: []
|
||||
},
|
||||
options: [],
|
||||
parentGirdInfo: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user"]),
|
||||
formRules() {
|
||||
return {
|
||||
girdName: [
|
||||
{required: true, message: "请输入网格名称", trigger: "change"},
|
||||
],
|
||||
girdCode: [
|
||||
{required: true, message: "请输入网格编号"},
|
||||
{pattern: /^\d+$/g, message: "请输入数字"},
|
||||
]
|
||||
};
|
||||
},
|
||||
unitProps() {
|
||||
return {
|
||||
value: "id",
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
};
|
||||
},
|
||||
unitOps() {
|
||||
let initData = JSON.parse(JSON.stringify(this.options)),
|
||||
ops = initData.filter((e) => !e.parentId);
|
||||
ops.map((e) => this.addChild(e, initData));
|
||||
return ops;
|
||||
},
|
||||
pageTitle() {
|
||||
return this.isEdit ? "编辑网格区块" : "添加网格区块"
|
||||
},
|
||||
isEdit() {
|
||||
return !!this.$route.query.id;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.isEdit) {
|
||||
this.searchDetail();
|
||||
} else {
|
||||
this.forms = {
|
||||
...this.forms,
|
||||
...this.$route.query
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$router.push({})
|
||||
},
|
||||
// 获取所有单位
|
||||
getAllUnit(data) {
|
||||
this.options = [];
|
||||
this.instance.post("/admin/sysunit/getAll", null, {
|
||||
params: {areaId: data},
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
res.data = res.data.map((a) => {
|
||||
return {...a, label: a.name}
|
||||
});
|
||||
this.options = res.data.filter((e) => !e.parentId);
|
||||
this.options.map((t) => this.addChild(t, res.data));
|
||||
}
|
||||
});
|
||||
},
|
||||
save() {
|
||||
this.$refs["rules"].validate((valid) => {
|
||||
if (valid) {
|
||||
let {girdMemberManageList, girdMemberList} = this.forms
|
||||
this.instance.post(`/app/appgirdinfo/addOrUpdate`, {
|
||||
...this.forms,
|
||||
girdMemberManageList: girdMemberManageList?.map(v => ({wxUserId: v.id})) || [],
|
||||
girdMemberList: girdMemberList?.map(v => ({wxUserId: v.id})) || []
|
||||
}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.cancel(true)
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
searchDetail() {
|
||||
let {id} = this.$route.query
|
||||
this.instance.post(`/app/appgirdinfo/queryDetailById`, null, {
|
||||
params: {id},
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
this.forms = {
|
||||
...res.data,
|
||||
girdMemberManageList: res.data.girdMemberManageList ? res.data.girdMemberManageList.map(v => {
|
||||
return {
|
||||
...v,
|
||||
id: v.wxUserId
|
||||
}
|
||||
}) : [],
|
||||
girdMemberList: res.data.girdMemberList ? res.data.girdMemberList.map(v => {
|
||||
return {
|
||||
...v,
|
||||
id: v.wxUserId
|
||||
}
|
||||
}) : []
|
||||
};
|
||||
this.parentGirdInfo = res.data.parentGirdInfo;
|
||||
this.forms.parentGirdName = res.data.parentGirdInfo && res.data.parentGirdInfo.girdName;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-block {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.footer-btn {
|
||||
width: 92px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,454 +0,0 @@
|
||||
<template>
|
||||
<section class="app-grid-block">
|
||||
<ai-list>
|
||||
<template slot="title">
|
||||
<ai-title title="网格区块" :isShowBottomBorder="true"></ai-title>
|
||||
</template>
|
||||
<template slot="left">
|
||||
<ai-tree-menu title="网格层级" @search="v=> $refs.tree.filter(v)">
|
||||
<el-tree
|
||||
:data="treeObj.treeList"
|
||||
:props="treeObj.defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
:filter-node-method="filterNode"
|
||||
default-expand-all
|
||||
highlight-current>
|
||||
<template slot-scope="{node,data}">
|
||||
<div v-text="node.label"/>
|
||||
</template>
|
||||
</el-tree>
|
||||
</ai-tree-menu>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar>
|
||||
<template slot="left">
|
||||
<el-date-picker
|
||||
v-model="searchObj.createTimeStr"
|
||||
type="date"
|
||||
@change="(page.current = 1), getList()"
|
||||
value-format="yyyy-MM-dd"
|
||||
size="small"
|
||||
placeholder="创建时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input
|
||||
v-model="searchObj.girdName"
|
||||
size="small"
|
||||
placeholder="输入网格名称"
|
||||
@keyup.enter.native="(page.current = 1), getList()"
|
||||
clearable
|
||||
@clear="(searchObj.girdName = '', page.current = 1), getList()"
|
||||
suffix-icon="iconfont iconSearch"
|
||||
/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-search-bar bottomBorder>
|
||||
<template slot="left">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="iconfont iconAdd"
|
||||
@click="(isEdit = false), toAdd()"
|
||||
>新增
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="iconfont iconDelete"
|
||||
@click="deleteById(ids.join(','))"
|
||||
:disabled="!Boolean(ids.length)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<ai-download
|
||||
:instance="instance"
|
||||
url="/app/appgirdinfo/exportGirdInfo"
|
||||
:params="{ ...searchObj, ids: ids.join(',') }"
|
||||
fileName="网格区块"
|
||||
>
|
||||
<el-button icon="iconfont iconExported" size="small"
|
||||
>导出全部
|
||||
</el-button
|
||||
>
|
||||
</ai-download>
|
||||
<ai-import
|
||||
ref="import"
|
||||
title="导入"
|
||||
name="网格区块"
|
||||
url="/app/appgirdinfo/downloadGirdInfo"
|
||||
importUrl="/app/appgirdinfo/importGirdInfo"
|
||||
suffixName="xlsx"
|
||||
:customCliker="true"
|
||||
:instance="instance"
|
||||
>
|
||||
<template slot="tips">
|
||||
<p>
|
||||
如果表格中已经存在数据，则会被本次导入的数据覆盖；不存在数据，系统将生成新的标准记录；
|
||||
</p>
|
||||
</template>
|
||||
<el-button size="small" icon="iconfont iconImport"
|
||||
>导入
|
||||
</el-button
|
||||
>
|
||||
</ai-import>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
class="mt10"
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="page.total"
|
||||
ref="aitableex"
|
||||
:current.sync="page.current"
|
||||
:size.sync="page.size"
|
||||
@selection-change="v=>ids=v.map((e) => e.id)"
|
||||
@getList="getList()"
|
||||
:dict="dict">
|
||||
<el-table-column label="网格成员" slot="user" align="center" width="160">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="showGridMembers(row)">{{ row.girdMemberNumber || 0 }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
slot="options"
|
||||
align="center"
|
||||
fixed="right"
|
||||
width="160">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="showEdit(row.id)">编辑</el-button>
|
||||
<map-plotting :value="row.points" @change="v=>confirm(row,v)"/>
|
||||
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
<ai-dialog :title="`${gridInfo.girdName}网格成员`" :visible.sync="dialog" customFooter @closed="gridInfo={}"
|
||||
width="700px">
|
||||
<ai-table :tableData="gridInfo.tableData" :colConfigs="gridMemberColConfigs" :dict="dict"
|
||||
:isShowPagination="false" :show-header="false"/>
|
||||
<template #footer>
|
||||
<el-button @click="dialog=false">关闭</el-button>
|
||||
</template>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MapPlotting from "./mapPlotting";
|
||||
|
||||
export default {
|
||||
name: "List",
|
||||
components: {MapPlotting},
|
||||
label: "网格区块",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeObj: {
|
||||
treeList: [],
|
||||
defaultProps: {
|
||||
children: "girdList",
|
||||
label: "girdName",
|
||||
},
|
||||
defaultExpandedKeys: [],
|
||||
},
|
||||
filterText: "",
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
},
|
||||
searchObj: {
|
||||
createTimeStr: "",
|
||||
girdName: "",
|
||||
},
|
||||
tableData: [],
|
||||
info: {},
|
||||
ids: [],
|
||||
showMap: false,
|
||||
map: "",
|
||||
polyEditor: "",
|
||||
editRow: {},
|
||||
searchAddress: "",
|
||||
mouseTool: "",
|
||||
placeSearch: "",
|
||||
path: [],
|
||||
overlays: [],
|
||||
isEdit: false,
|
||||
fileList: [],
|
||||
dialog: false,
|
||||
gridInfo: {},
|
||||
gridMemberColConfigs: [
|
||||
{prop: "name"},
|
||||
{prop: "checkType", formart: v => v === '1' ? '网格员' : '网格长'}
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTreeList();
|
||||
this.getList();
|
||||
this.dict.load("girdType", "isLastLevel", "plottingStatus", "girdMemberType");
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
return [
|
||||
{type: 'selection'},
|
||||
{prop: "girdName", align: "left", label: "网格名称",},
|
||||
{slot: 'user'},
|
||||
{prop: "plottingStatus", align: "center", label: "标绘状态", dict: "plottingStatus"},
|
||||
{prop: "createTime", align: "center", label: "创建时间"},
|
||||
{slot: "options"}
|
||||
];
|
||||
},
|
||||
isTopGrid() {
|
||||
return this.info.id == this.treeObj.treeList?.[0]?.id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleNodeClick(val) {
|
||||
this.info = this.$copy(val);
|
||||
this.getList();
|
||||
},
|
||||
getTreeList() {
|
||||
this.instance.post("/app/appgirdinfo/listAllByTop").then(res => {
|
||||
if (res?.data) {
|
||||
this.treeObj.treeList = [res.data];
|
||||
this.info = res.data
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.setCurrentKey(this.info.id)
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.girdName.indexOf(value) !== -1;
|
||||
},
|
||||
deleteById(ids) {
|
||||
ids && this.$confirm("删除网格后，会清除网格内网格员的责任家庭信息，如有下级网格，会同步删除下级网格所有数据!", {
|
||||
type: "error",
|
||||
}).then(() => {
|
||||
this.instance.post("/app/appgirdinfo/delete", null, {params: {ids}}).then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
this.getList();
|
||||
this.getTreeList();
|
||||
}
|
||||
});
|
||||
}).catch(() => 0);
|
||||
},
|
||||
deleteTree(ids) {
|
||||
ids && this.$confirm("是否要删除该网格区块？", {
|
||||
type: "error",
|
||||
}).then(() => {
|
||||
this.instance.post("/app/appgirdinfo/delete", null, {
|
||||
params: {ids}
|
||||
}).then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
this.getTreeList();
|
||||
}
|
||||
});
|
||||
}).catch(() => 0);
|
||||
},
|
||||
getList() {
|
||||
this.instance.post("/app/appgirdinfo/list", null, {
|
||||
params: {
|
||||
...this.searchObj,
|
||||
...this.page,
|
||||
parentGirdId: this.isTopGrid ? '' : this.info.id,
|
||||
},
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data.records;
|
||||
this.page.total = res.data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.ids = [];
|
||||
val.map((e) => {
|
||||
this.ids.push(e.id);
|
||||
});
|
||||
},
|
||||
//添加二级网格
|
||||
addTwoLevel() {
|
||||
this.info = {...this.treeObj.treeList[0]};
|
||||
this.toAdd()
|
||||
},
|
||||
toAdd() {
|
||||
let {id: parentGirdId, girdName: parentGirdName} = this.info
|
||||
this.$router.push({
|
||||
hash: "#add", query: {parentGirdId, parentGirdName}
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
this.isAdd = false;
|
||||
this.$nextTick(() => {
|
||||
this.getList();
|
||||
this.getTreeList();
|
||||
});
|
||||
},
|
||||
showEdit(id) {
|
||||
this.$router.push({hash: "#add", query: {id}})
|
||||
},
|
||||
//map搜索
|
||||
confirm(row, points) {
|
||||
this.instance.post(`/app/appgirdinfo/addOrUpdate`, {...row, points}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success("提交成功!")
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
},
|
||||
resetSearch() {
|
||||
Object.keys(this.searchObj).map((e) => {
|
||||
this.searchObj[e] = "";
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
showGridMembers(row) {
|
||||
if (row.girdMemberNumber > 0) {
|
||||
this.gridInfo = this.$copy(row)
|
||||
this.instance.post("/app/appgirdmemberinfo/listByGirdIdByThree", null, {
|
||||
params: {girdId: row.id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.gridInfo.tableData = res.data
|
||||
this.dialog = true
|
||||
}
|
||||
})
|
||||
} else this.$message.warning("当前网格无成员")
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-grid-block {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
::v-deep .el-tree {
|
||||
background: transparent;
|
||||
|
||||
.el-tree-node__expand-icon.is-leaf {
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-tree__empty-text {
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-tree-node__children .el-tree-node__content {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
background: #E8EFFF;
|
||||
color: #222222;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.is-current > .el-tree-node__content {
|
||||
color: #fff !important;
|
||||
|
||||
&:hover {
|
||||
background: #2266FF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
background: #2266FF;
|
||||
|
||||
.el-tooltip {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
::v-deep.fullscreenMap {
|
||||
.el-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
.ai-dialog__content {
|
||||
max-height: unset !important;
|
||||
padding-bottom: 0;
|
||||
height: 100%;
|
||||
|
||||
.ai-dialog__content--wrapper {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .treePanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.el-tree {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,233 +0,0 @@
|
||||
<template>
|
||||
<section class="mapPlotting">
|
||||
<div class="clicker" @click="dialog=true,$emit('open')">
|
||||
<slot v-if="$slots.default"/>
|
||||
<el-button v-else type="text">标绘</el-button>
|
||||
</div>
|
||||
<ai-dialog :title="title" class="fullscreenMap"
|
||||
:visible.sync="dialog"
|
||||
:destroyOnClose="true"
|
||||
@close="points=[]"
|
||||
border fullscreen
|
||||
@open="initMap" :modal="false"
|
||||
@onConfirm="$emit('change',points.flat()),dialog=false">
|
||||
<div class="mapPanel">
|
||||
<div class="tipinput">
|
||||
<el-input
|
||||
v-model="searchAddress"
|
||||
@change="addressChange"
|
||||
clearable
|
||||
placeholder="请输入关键字"
|
||||
id="tipinput"
|
||||
size="medium"/>
|
||||
</div>
|
||||
<div id="panel"/>
|
||||
<div class="container fill" id="container"/>
|
||||
<div class="operationBtns" v-if="map">
|
||||
<el-alert type="success" title="操作说明:" :closable="false">
|
||||
<li>1.双击覆盖物即可编辑</li>
|
||||
<li>2.编辑状态,对点双击可删除该点</li>
|
||||
<li>3.绘制状态,右键结束绘制</li>
|
||||
<li>4.结束编辑才能保存绘制的覆盖物信息</li>
|
||||
</el-alert>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="handleAdd">新建</el-button>
|
||||
<el-button @click="polyEditor.close()">结束编辑</el-button>
|
||||
<el-button @click="clear()">清除绘制</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "mapPlotting",
|
||||
model: {
|
||||
prop: "value",
|
||||
event: "change"
|
||||
},
|
||||
props: {
|
||||
title: {default: "地图标绘"},
|
||||
value: Array
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
polyEditor: null,
|
||||
placeSearch: null,
|
||||
searchAddress: "",
|
||||
overlays: [],
|
||||
points: [],
|
||||
dialog: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addressChange(val) {
|
||||
this.placeSearch.search(val);
|
||||
},
|
||||
clear() {
|
||||
this.map.remove(this.overlays);
|
||||
this.overlays = [];
|
||||
this.points = []
|
||||
},
|
||||
handleAdd() {
|
||||
if (this.points?.length == 0) {
|
||||
let {polyEditor} = this
|
||||
polyEditor.close();
|
||||
polyEditor.setTarget();
|
||||
polyEditor.open();
|
||||
} else this.$message.error("请先清除已标绘图形!")
|
||||
},
|
||||
initMap() {
|
||||
setTimeout(() => AMapLoader.load({
|
||||
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ["AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
AMapUI: {
|
||||
// 是否加载 AMapUI，缺省不加载
|
||||
version: "1.1", // AMapUI 缺省 1.1
|
||||
plugins: [], // 需要加载的 AMapUI ui插件
|
||||
},
|
||||
}).then((AMap) => {
|
||||
this.map = new AMap.Map("container", {
|
||||
resizeEnable: true,
|
||||
});
|
||||
this.placeSearch = new AMap.PlaceSearch({
|
||||
pageSize: 5, // 单页显示结果条数
|
||||
pageIndex: 1, // 页码
|
||||
city: this.user.info.areaId?.substring(0, 6), // 兴趣点城市
|
||||
citylimit: true, //是否强制限制在设置的城市内搜索
|
||||
map: this.map, // 展现结果的地图实例
|
||||
panel: "panel", // 结果列表将在此容器中进行展示。
|
||||
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||
});
|
||||
this.polyEditor = new AMap.PolygonEditor(this.map).on('add', ({target}) => {
|
||||
this.polyEditor.addAdsorbPolygons(target)
|
||||
target.on("dblclick", () => {
|
||||
this.polyEditor.setTarget(target);
|
||||
this.polyEditor.open()
|
||||
})
|
||||
})
|
||||
this.polyEditor.on('end', ({target}) => {
|
||||
if (target) {
|
||||
this.overlays.push(target);
|
||||
this.points = target.getPath().map(e => ({lat: e.getLat(), lng: e.getLng()}))
|
||||
}
|
||||
});
|
||||
if (this.value?.length > 0) {
|
||||
let path = this.value.map(e => [e.lng, e.lat]);
|
||||
let polygon = new AMap.Polygon({
|
||||
path,
|
||||
strokeColor: "#FF33FF",
|
||||
strokeWeight: 6,
|
||||
strokeOpacity: 0.2,
|
||||
fillOpacity: 0.4,
|
||||
fillColor: "#1791fc",
|
||||
})
|
||||
this.map.add([polygon]);
|
||||
this.map.setFitView();
|
||||
this.polyEditor.addAdsorbPolygons(polygon)
|
||||
polygon.on('dblclick', () => {
|
||||
this.polyEditor.setTarget(polygon);
|
||||
this.polyEditor.open()
|
||||
});
|
||||
this.polyEditor.setTarget(polygon);
|
||||
this.polyEditor.open()
|
||||
} else {
|
||||
this.map.setCity(this.user.info.areaId?.substring(0, 6))
|
||||
this.map.setZoom(14, false, 600)
|
||||
}
|
||||
}), 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mapPlotting {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
|
||||
.clicker {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mapPanel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.container {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
#panel {
|
||||
position: absolute;
|
||||
height: 400px;
|
||||
right: 30px;
|
||||
top: 20px;
|
||||
width: 280px;
|
||||
overflow: hidden;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.tipinput {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 38px;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.operationBtns {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
z-index: 10000;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.fullscreenMap {
|
||||
.el-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
.ai-dialog__content {
|
||||
max-height: unset !important;
|
||||
padding-bottom: 0;
|
||||
height: 100%;
|
||||
|
||||
.ai-dialog__content--wrapper {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .amap-copyright {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .amap-logo {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div class="AppGridMap">
|
||||
<keep-alive :include="['List']">
|
||||
<component
|
||||
ref="component"
|
||||
:is="component"
|
||||
@change="onChange"
|
||||
:params="params"
|
||||
:instance="instance"
|
||||
:dict="dict"
|
||||
></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from "./components/list";
|
||||
|
||||
export default {
|
||||
name: "AppGridMap",
|
||||
label: "网格地图",
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: "List",
|
||||
params: {},
|
||||
include: [],
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
List,
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
onChange(data) {
|
||||
if (data.type === "Add") {
|
||||
this.component = "Add";
|
||||
this.params = data.params;
|
||||
}
|
||||
|
||||
if (data.type === "list") {
|
||||
this.component = "List";
|
||||
this.params = data.params;
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppGridMap {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,668 +0,0 @@
|
||||
<template>
|
||||
<div class="gridMap">
|
||||
<ai-t-map :map.sync="map" ref="AiTMap" :lib.sync="mapLib" @loaded="onMapInit" :libraries="['geometry','service', 'tools']"/>
|
||||
<div class="drawer" ref="drawer">
|
||||
<div v-if="show" class="drawer-content">
|
||||
<b>网格地图</b>
|
||||
<div class="tree">
|
||||
<div class="input">
|
||||
<el-input placeholder="请输入网格名称" v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
|
||||
</div>
|
||||
<header class="header">
|
||||
<span>网格列表</span>
|
||||
</header>
|
||||
<div class="tree-div">
|
||||
<el-tree
|
||||
:data="treeObj.treeList"
|
||||
:props="treeObj.defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
default-expand-all
|
||||
highlight-current>
|
||||
<template slot-scope="{node,data}">
|
||||
<el-tooltip :content="node.label">
|
||||
<div class="el-tree-node__label" v-text="node.label"/>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightBtn" :class="{show}" @click="show=!show">
|
||||
<i class="iconfont iconArrow_Right"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'AppGridMap',
|
||||
label: "网格地图",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
mapLib: null,
|
||||
show: true,
|
||||
retryMapCount: 0,
|
||||
polygons: [],
|
||||
|
||||
drawer: false,
|
||||
filterText: "",
|
||||
treeObj: {
|
||||
treeList: [],
|
||||
defaultProps: {
|
||||
children: "girdList",
|
||||
label: "girdName",
|
||||
},
|
||||
defaultExpandedKeys: [],
|
||||
},
|
||||
ops: {},
|
||||
|
||||
path: [],
|
||||
searchObj: {
|
||||
onlineStatus: "",
|
||||
girdMemberName: "",
|
||||
},
|
||||
member: {
|
||||
memberList: [],
|
||||
},
|
||||
currInfo: {},
|
||||
infoWindowHtml: "",
|
||||
marker: {},
|
||||
activeId: null,
|
||||
labels: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
created() {
|
||||
this.dict.load("onlineStatus")
|
||||
this.getTreeList().then(() => {
|
||||
this.getLeafNodes()
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.girdName.indexOf(value) !== -1;
|
||||
},
|
||||
getTreeList() {
|
||||
return this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.treeObj.treeList = res.data;
|
||||
|
||||
this.$nextTick(() => {
|
||||
res.data.length && this.$refs.tree.setCurrentKey(res.data[0].id)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onMapInit() {
|
||||
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
|
||||
if (res.code === 0) {
|
||||
this.map.setCenter(new this.mapLib.LatLng(res.data.lat, res.data.lng))
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getLeafNodes() {
|
||||
this.instance.post(`/app/appgirdinfo/listAll2`).then((res) => {
|
||||
if (res?.data) {
|
||||
const arr = res.data.map(v => {
|
||||
return {
|
||||
id: v.id,
|
||||
girdName: v.girdName,
|
||||
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
|
||||
}
|
||||
}).filter(v => v.points.length)
|
||||
|
||||
this.renderGridMap(arr)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleNodeClick(val) {
|
||||
this.instance.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${val.id}`).then((res) => {
|
||||
if (res?.data) {
|
||||
const arr = res.data.map(v => {
|
||||
return {
|
||||
id: v.id,
|
||||
girdName: v.girdName,
|
||||
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
|
||||
}
|
||||
}).filter(v => v.points.length)
|
||||
|
||||
if (!arr.length) {
|
||||
return this.$message.error('该网格还未标绘')
|
||||
}
|
||||
|
||||
this.renderGridMap(arr)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
fitBounds(latLngList, count = 0) {
|
||||
let {mapLib: TMap} = this
|
||||
if (TMap) {
|
||||
if (latLngList.length === 0) {
|
||||
return null;
|
||||
}
|
||||
let boundsN = latLngList[0].getLat();
|
||||
let boundsS = boundsN;
|
||||
let boundsW = latLngList[0].getLng();
|
||||
let boundsE = boundsW;
|
||||
latLngList.forEach((point) => {
|
||||
point.getLat() > boundsN && (boundsN = point.getLat());
|
||||
point.getLat() < boundsS && (boundsS = point.getLat());
|
||||
point.getLng() > boundsE && (boundsE = point.getLng());
|
||||
point.getLng() < boundsW && (boundsW = point.getLng());
|
||||
});
|
||||
return new TMap.LatLngBounds(
|
||||
new TMap.LatLng(boundsS, boundsW),
|
||||
new TMap.LatLng(boundsN, boundsE)
|
||||
);
|
||||
} else {
|
||||
if (count < 5) {
|
||||
this.fitBounds(latLngList, ++count)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
renderGridMap(paths) {
|
||||
let {map, mapLib: TMap} = this
|
||||
if (TMap) {
|
||||
if (this.polygons.length > 0) {
|
||||
this.polygons.forEach(e => e.destroy())
|
||||
this.labels.forEach(e => {
|
||||
e.destroy(e.id)
|
||||
})
|
||||
this.polygons = []
|
||||
this.labels = []
|
||||
}
|
||||
if (paths?.length > 0) {
|
||||
let bounds = []
|
||||
paths.forEach((path, i) => {
|
||||
let polygon = new TMap.MultiPolygon({
|
||||
map, styles: {
|
||||
default: new TMap.PolygonStyle({
|
||||
showBorder: true,
|
||||
borderColor: '#5088FF',
|
||||
borderWidth: 2,
|
||||
color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
|
||||
})
|
||||
},
|
||||
id: path.id,
|
||||
geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
|
||||
})
|
||||
this.polygons.push(polygon)
|
||||
bounds.push(this.fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0]))))
|
||||
|
||||
polygon.on('click', e => {
|
||||
// const id = e.target.id
|
||||
// this.getGridInfo(id)
|
||||
})
|
||||
|
||||
const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
|
||||
|
||||
var position = TMap.geometry.computeCentroid(points)
|
||||
|
||||
let label = new TMap.MultiLabel({
|
||||
id: `label~${path.id}`,
|
||||
data: path.id,
|
||||
map: map,
|
||||
styles: {
|
||||
building: new TMap.LabelStyle({
|
||||
color: '#3777FF',
|
||||
size: 20,
|
||||
alignment: 'center',
|
||||
verticalAlignment: 'middle'
|
||||
})
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
id: `label-class-${i}`,
|
||||
styleId: 'building',
|
||||
position: position,
|
||||
content: path.girdName,
|
||||
}
|
||||
]
|
||||
})
|
||||
this.labels.push(label)
|
||||
label.on('click', e => {
|
||||
// this.getGridInfo(e.target.id.split('~')[1])
|
||||
});
|
||||
})
|
||||
bounds = bounds.reduce((a, b) => {
|
||||
return this.fitBounds([
|
||||
a.getNorthEast(),
|
||||
a.getSouthWest(),
|
||||
b.getNorthEast(),
|
||||
b.getSouthWest(),
|
||||
]);
|
||||
});
|
||||
map.fitBounds(bounds, {padding: 100})
|
||||
}
|
||||
}
|
||||
},
|
||||
hasClass(ele, cls) {
|
||||
return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
|
||||
},
|
||||
addClass(ele, cls) {
|
||||
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
|
||||
},
|
||||
removeClass(ele, cls) {
|
||||
if (this.hasClass(ele, cls)) {
|
||||
const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
|
||||
ele.className = ele.className.replace(reg, " ");
|
||||
}
|
||||
},
|
||||
changClass(ele, className) {
|
||||
if (!this.hasClass(ele, className)) {
|
||||
this.addClass(ele, className);
|
||||
} else {
|
||||
this.removeClass(ele, className);
|
||||
}
|
||||
},
|
||||
percentage() {
|
||||
if (this.member.onlineNumber == 0) {
|
||||
return 0;
|
||||
} else {
|
||||
return (
|
||||
100 *
|
||||
(this.member.onlineNumber / this.member.allMemberNumber)
|
||||
).toFixed(2);
|
||||
}
|
||||
},
|
||||
getMemberList() {
|
||||
this.instance.post(`/app/appgirdmemberinfo/queryGirdMemberByMap`, this.searchObj).then((res) => {
|
||||
if (res.code == 0) {
|
||||
let markers = [];
|
||||
this.member = res.data;
|
||||
this.member.memberList.map((e) => {
|
||||
if (e.onlineStatus == "1") {
|
||||
markers.push({lng: e.lng, lat: e.lat, name: e.name});
|
||||
}
|
||||
});
|
||||
this.initMap(null, null, markers);
|
||||
}
|
||||
});
|
||||
},
|
||||
clickMember(marker) {
|
||||
if (marker.onlineStatus == 1) {
|
||||
this.activeId = marker.id;
|
||||
this.marker = marker;
|
||||
this.infoWindowContent(marker);
|
||||
}
|
||||
},
|
||||
infoWindowContent(marker) {
|
||||
this.instance
|
||||
.post(`/app/location/xyToAddress`, null, {
|
||||
params: {
|
||||
x: marker.lat,
|
||||
y: marker.lng,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.infoWindowHtml = `<div class="info">
|
||||
<p>
|
||||
<span class="name">${marker.name}</span>
|
||||
<span class="lat">${marker.lng},${marker.lat}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="lat">${res.data}</span>
|
||||
</p>
|
||||
<p class="address">
|
||||
<span class="iconfont iconarea" id="addressSpan">当日轨迹</span>
|
||||
</p>
|
||||
</div>`;
|
||||
this.initMap(false, marker);
|
||||
}
|
||||
});
|
||||
},
|
||||
queryTrajectory() {
|
||||
this.instance
|
||||
.post(`/app/appgirdmembertrajectory/queryTrajectory`, null, {
|
||||
params: {
|
||||
userId: this.marker.userId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
let path = [];
|
||||
if (res.data) {
|
||||
res.data.map((e, index) => {
|
||||
path[index] = [e.lng, e.lat];
|
||||
});
|
||||
}
|
||||
this.initMap(path, this.marker);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gridMap {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.drawer-btn {
|
||||
position: absolute;
|
||||
left: 280px;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
width: 20px;
|
||||
height: 24px;
|
||||
border-top: 40px solid transparent;
|
||||
border-bottom: 40px solid transparent;
|
||||
border-left: 16px solid #333c53;
|
||||
border-right: 0 solid transparent;
|
||||
transition: all 0.5s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
font-size: 26px;
|
||||
color: rgb(255, 255, 255);
|
||||
left: -21px;
|
||||
top: -14px;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-hide {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: all 0.5s ease-in-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.drawer-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
background: #333c53;
|
||||
|
||||
& > b {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.tree {
|
||||
height: calc(100% - 28px - 76px);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
.map-search {
|
||||
display: flex;
|
||||
padding: 8px 0;
|
||||
justify-content: space-between;
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.member-list {
|
||||
width: 100%;
|
||||
height: calc(100% - 44px - 28px);
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #1d2336;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background: #1a1e2c;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10px;
|
||||
background: #282f45;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 20px 0;
|
||||
color: #7a88bb;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
background: #3e4a69;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background-color: #282f45;
|
||||
border: 1px solid #282f45;
|
||||
}
|
||||
|
||||
.tree-div {
|
||||
width: 100%;
|
||||
height: calc(100% - 44px - 28px);
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background: #1a1e2c;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10px;
|
||||
background: #282f45;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-tree {
|
||||
width: 100%;
|
||||
|
||||
.el-tree__empty-block {
|
||||
background: #333c53;
|
||||
}
|
||||
|
||||
.el-tree-node__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
background: #333c53;
|
||||
}
|
||||
|
||||
.is-current > .el-tree-node__content {
|
||||
.el-tree-node__label {
|
||||
color: #5088ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
left: -280px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.rightBtn {
|
||||
width: 16px;
|
||||
height: 80px;
|
||||
background: url("https://cdn.cunwuyun.cn/monitor/drawerBtn.png");
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.iconfont {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
|
||||
&.show > .iconfont {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.map {
|
||||
.info {
|
||||
width: 280px;
|
||||
height: 98px;
|
||||
background: #fff;
|
||||
padding: 8px 0 0 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 20px;
|
||||
|
||||
.name {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lat {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.title_info {
|
||||
width: 68px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.amap-marker-label {
|
||||
border: 1px solid rgb(141, 139, 139);
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<keep-alive include="GmList">
|
||||
<component :is="currentPage" v-bind="$props" @change="onChange"/>
|
||||
</keep-alive>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/list'
|
||||
import ApplyList from './components/ApplyList'
|
||||
import Add from './components/add'
|
||||
import ApplyDetail from './components/ApplyDetail'
|
||||
import ApplyAdd from './components/ApplyAdd'
|
||||
import Family from './components/Family'
|
||||
import MonitorUser from './components/MonitorUser'
|
||||
import GmList from "./components/gmList";
|
||||
|
||||
export default {
|
||||
name: "AppGridMember",
|
||||
label: "网格管理员",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
computed: {
|
||||
currentPage() {
|
||||
let {hash} = this.$route
|
||||
return hash == "#Family" ? Family :
|
||||
hash == "#MonitorUser" ? MonitorUser :
|
||||
hash == "#Add" ? Add :
|
||||
hash == "#ApplyAdd" ? ApplyAdd :
|
||||
hash == "#ApplyDetail" ? ApplyDetail :
|
||||
GmList
|
||||
}
|
||||
},
|
||||
components: {
|
||||
GmList,
|
||||
Add,
|
||||
List,
|
||||
Family,
|
||||
ApplyList,
|
||||
ApplyDetail,
|
||||
MonitorUser,
|
||||
ApplyAdd
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(data) {
|
||||
let {type, params: query} = data,
|
||||
hash = ["ApplyList", "list"].includes(type) ? "" : "#" + type
|
||||
this.$router.push({hash, query})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppGridMember {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,106 +0,0 @@
|
||||
<template>
|
||||
<ai-detail class="content-add">
|
||||
<template slot="title">
|
||||
<ai-title :title="$route.query.id ? '编辑' : '添加'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||||
</ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-card title="基本信息">
|
||||
<template #content>
|
||||
<el-form class="ai-form" :model="form" label-width="120px" ref="form">
|
||||
<el-form-item label="姓名" style="width: 100%;" prop="name" :rules="[{required: true, message: '请输入姓名', trigger: 'blur'}]">
|
||||
<el-input size="small" v-model="form.name" placeholder="请输入..." :maxlength="20"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" style="width: 100%;" prop="phone" :rules="[{required: true, message: '请输入联系电话', trigger: 'blur'}]">
|
||||
<el-input size="small" v-model="form.phone" placeholder="请输入..." :maxlength="11"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="网格名称" style="width: 100%;" prop="girdName" :rules="[{required: true, message: '请输入网格名称', trigger: 'blur'}]">
|
||||
<el-input size="small" v-model="form.girdName" placeholder="请输入..." :maxlength="50"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</ai-card>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" :loading="isLoading" @click="confirm">提交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ApplyAdd',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
phone: '',
|
||||
gridName: ''
|
||||
},
|
||||
isLoading: false,
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
if ( this.$route.query.id) {
|
||||
this.id = this.$route.query.id
|
||||
this.getInfo(this.$route.query.id)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo (id) {
|
||||
this.instance.post(`/app/appcontentinfo/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onChange () {
|
||||
this.form.files = []
|
||||
},
|
||||
|
||||
confirm () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.isLoading = true
|
||||
this.instance.post(`/app/appgirdmemberapply/addOrUpdate`, {
|
||||
...this.form,
|
||||
id: this.$route.query.id || ''
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('提交成功')
|
||||
setTimeout(() => {
|
||||
this.cancel(true)
|
||||
}, 600)
|
||||
} else {
|
||||
this.isLoading = false
|
||||
}
|
||||
}).catch(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
cancel (isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@@ -1,64 +0,0 @@
|
||||
<template>
|
||||
<ai-detail>
|
||||
<template slot="title">
|
||||
<ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||||
</ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-card title="基本信息">
|
||||
<template #content>
|
||||
<ai-wrapper>
|
||||
<ai-info-item label="姓名" isLine :value="info.name"></ai-info-item>
|
||||
<ai-info-item label="联系电话" isLine :value="info.phone"></ai-info-item>
|
||||
<ai-info-item label="网格名称" isLine :value="info.girdName"></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</ai-card>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ApplyDetail',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
info: {},
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
if (this.$route.query.id) {
|
||||
this.id = this.$route.query.id
|
||||
this.getInfo(this.$route.query.id)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo(id) {
|
||||
this.instance.post(`/app/appgirdmemberapply/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'ApplyList',
|
||||
isRefresh: !!isRefresh
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@@ -1,175 +0,0 @@
|
||||
<template>
|
||||
<ai-list class="list" isTabs>
|
||||
<template slot="content">
|
||||
<ai-search-bar bottomBorder>
|
||||
<template slot="left">
|
||||
<el-button
|
||||
icon="iconfont iconAdd"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="add('')">添加</el-button>
|
||||
<el-button
|
||||
icon="iconfont iconDelete"
|
||||
@click="deleteById(ids.join(','))"
|
||||
:disabled="!Boolean(ids.length)">
|
||||
删除
|
||||
</el-button>
|
||||
<ai-import :instance="instance" :dict="dict" type="appgirdmemberapply" name="网格员申报" @success="getList()">
|
||||
<el-button icon="iconfont iconImport">导入</el-button>
|
||||
</ai-import>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input
|
||||
v-model="searchObj.name"
|
||||
size="small"
|
||||
placeholder="网格员/责任网格"
|
||||
@keyup.enter.native="(page.current = 1), getList()"
|
||||
clearable
|
||||
@clear="(searchObj.name = '', page.current = 1), getList()"
|
||||
suffix-icon="iconfont iconSearch" />
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="page.total"
|
||||
ref="aitableex"
|
||||
:current.sync="page.current"
|
||||
:size.sync="page.size"
|
||||
@selection-change="(v) => (ids = v.map((e) => e.id))"
|
||||
@getList="getList()">
|
||||
<el-table-column label="操作" slot="options" align="center" fixed="right" width="120">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="toDetail(row.id)">详情</el-button>
|
||||
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ApplyList',
|
||||
label: '网格员管理',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchObj: {
|
||||
name: "",
|
||||
selectionDate: "",
|
||||
},
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
},
|
||||
goAdd: false,
|
||||
tableData: [],
|
||||
fileList: [],
|
||||
ids: [],
|
||||
detail: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
|
||||
this.getList();
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
let _ = this;
|
||||
return [
|
||||
{
|
||||
type: "selection",
|
||||
},
|
||||
{
|
||||
prop: "name",
|
||||
label: "网格员姓名",
|
||||
},
|
||||
{
|
||||
prop: "girdName",
|
||||
align: "left",
|
||||
label: "责任网格",
|
||||
},
|
||||
{
|
||||
prop: "phone",
|
||||
align: "center",
|
||||
label: "联系电话",
|
||||
}
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance
|
||||
.post("/app/appgirdmemberapply/list", null, {
|
||||
params: {
|
||||
...this.searchObj,
|
||||
...this.page,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records;
|
||||
this.page.total = res.data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteById(ids) {
|
||||
ids &&
|
||||
this.$confirm("是否要删除该网格员？", {
|
||||
type: "error",
|
||||
})
|
||||
.then(() => {
|
||||
this.instance
|
||||
.post("/app/appgirdmemberapply/delete", null, {
|
||||
params: { ids },
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
add (id) {
|
||||
this.$emit('change', {
|
||||
type: 'ApplyAdd',
|
||||
params: {id}
|
||||
})
|
||||
},
|
||||
|
||||
toDetail (id) {
|
||||
this.$emit('change', {
|
||||
type: 'ApplyDetail',
|
||||
params: {id}
|
||||
})
|
||||
},
|
||||
|
||||
handleSelectionChange(val) {
|
||||
this.ids = [];
|
||||
val.map((e) => {
|
||||
this.ids.push(e.id);
|
||||
});
|
||||
},
|
||||
resetSearch() {
|
||||
Object.keys(this.searchObj).map((e) => {
|
||||
this.searchObj[e] = "";
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,222 +0,0 @@
|
||||
<template>
|
||||
<ai-list class="Family">
|
||||
<template slot="title">
|
||||
<ai-title title="责任家庭" isShowBack isShowBottomBorder @onBackClick="onBack"></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar class="search-bar">
|
||||
<template #left>
|
||||
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="dialog=true">添加</el-button>
|
||||
<el-button size="small" :disabled="!ids.length" icon="iconfont iconDelete" @click="removeAll">批量删除</el-button>
|
||||
<el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable @change="getListInit()">
|
||||
<el-option
|
||||
v-for="(item,i) in girdList"
|
||||
:key="i"
|
||||
:label="item.girdName"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
v-model="search.name"
|
||||
class="search-input"
|
||||
size="small"
|
||||
v-throttle="() => {search.current = 1, getList()}"
|
||||
placeholder="姓名/身份证/联系方式"
|
||||
clearable
|
||||
@clear="search.current = 1, search.name = '', getList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
style="margin-top: 6px;"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@handleSelectionChange="handleSelectionChange"
|
||||
@getList="getList">
|
||||
<el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="remove(row.gmrId)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
<ai-dialog
|
||||
:visible.sync="dialog"
|
||||
width="1100px"
|
||||
@close="closeDialog"
|
||||
title="添加户主"
|
||||
@onConfirm="onConfirm">
|
||||
<el-form ref="DialogForm" size="small" label-width="0">
|
||||
<el-form-item>
|
||||
<ai-area-select clearable always-show :instance="instance" v-model="areaId" :disabled-level="disabledLevel"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="网格：" required label-width="80px">
|
||||
<el-select size="small" v-model="girdId" placeholder="请选择网格" clearable>
|
||||
<el-option v-for="(item,i) in girdList" :key="i" :label="item.girdName" :value="item.id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<ai-table-select :instance="instance" :action="`/app/appresident/list?householdName=1&areaId=${areaId||''}&auditStatus=1`"
|
||||
@select="v=>chooseUser=v" multiple/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Family',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
name: '',
|
||||
girdId: ''
|
||||
},
|
||||
isLoading: false,
|
||||
form: {},
|
||||
chooseUser: [],
|
||||
dialog: false,
|
||||
total: 10,
|
||||
colConfigs: [
|
||||
{type: 'selection', label: ''},
|
||||
{prop: 'name', label: '户主姓名', align: 'left', width: '200px'},
|
||||
{prop: 'idNumber', label: '身份证号', align: 'center'},
|
||||
{prop: 'phone', label: '联系方式', align: 'center'},
|
||||
{prop: 'girdName', label: '所属网格', align: 'center'},
|
||||
{prop: 'createTime', label: '添加时间', align: 'center'},
|
||||
{slot: 'options', label: '操作', align: 'center'}
|
||||
],
|
||||
tableData: [],
|
||||
areaId: '',
|
||||
ids: [],
|
||||
disabledLevel: 0,
|
||||
girdList: [],
|
||||
girdId: '',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
created() {
|
||||
this.areaId = this.user.info.areaId || ""
|
||||
this.disabledLevel = this.user.info.areaList?.length || 0
|
||||
this.getGirdList()
|
||||
this.getList()
|
||||
this.dict.load('epidemicDangerousAreaLevel')
|
||||
},
|
||||
methods: {
|
||||
getGirdList() {
|
||||
this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.$route.query.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.girdList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getListInit() {
|
||||
this.search.current = 1
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.instance.post(`/app/appgirdmemberresident/listByGirdMember`, null, {
|
||||
params: {
|
||||
...this.search,
|
||||
girdMemberId: this.$route.query.id,
|
||||
areaId: this.areaId
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
removeAll() {
|
||||
if (!this.ids) {
|
||||
return this.$message.error('请选择户主')
|
||||
}
|
||||
this.remove(this.ids.join(','))
|
||||
},
|
||||
handleSelectionChange(e) {
|
||||
this.ids = e.map(v => v.gmrId)
|
||||
},
|
||||
onConfirm() {
|
||||
if (!this.girdId) {
|
||||
return this.$message.error('请选择网格')
|
||||
}
|
||||
|
||||
if (!this.chooseUser.length) {
|
||||
return this.$message.error('请选择户主')
|
||||
}
|
||||
|
||||
const residentList = this.chooseUser.map(v => {
|
||||
return {
|
||||
girdMemberId: this.$route.query.id,
|
||||
name: v.name,
|
||||
residentId: v.id,
|
||||
girdId: this.girdId
|
||||
}
|
||||
})
|
||||
this.instance.post(`/app/appgirdmemberresident/add`, {
|
||||
residentList
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
this.$message.success('添加成功')
|
||||
this.dialog = false
|
||||
}
|
||||
})
|
||||
},
|
||||
closeDialog() {
|
||||
this.chooseUser = []
|
||||
this.girdId = ''
|
||||
this.areaId = this.user.info.areaId
|
||||
},
|
||||
del(e) {
|
||||
this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
|
||||
},
|
||||
onBack() {
|
||||
this.$emit('change', {
|
||||
type: 'list'
|
||||
})
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appgirdmemberresident/delete?ids=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Family {
|
||||
}
|
||||
</style>
|
||||
@@ -1,421 +0,0 @@
|
||||
<template>
|
||||
<ai-list class="Family">
|
||||
<template slot="title">
|
||||
<ai-title title="监测对象" isShowBack isShowBottomBorder @onBackClick="onBack"></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar class="search-bar">
|
||||
<template #left>
|
||||
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShow = true">添加</el-button>
|
||||
<el-button size="small" :disabled="!ids.length" icon="iconfont iconDelete" @click="removeAll">批量删除</el-button>
|
||||
<el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable
|
||||
@change="getListInit()">
|
||||
<el-option
|
||||
v-for="(item,i) in girdList"
|
||||
:key="i"
|
||||
:label="item.girdName"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
v-model="search.name"
|
||||
class="search-input"
|
||||
size="small"
|
||||
v-throttle="() => {search.current = 1, getList()}"
|
||||
placeholder="姓名/身份证/联系方式"
|
||||
clearable
|
||||
@clear="search.current = 1, search.name = '', getList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
style="margin-top: 6px;"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@handleSelectionChange="handleSelectionChange"
|
||||
@getList="getList">
|
||||
<el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="remove(row.gmpId)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
<ai-dialog
|
||||
:visible.sync="isShow"
|
||||
width="1100px"
|
||||
@close="closeDialog"
|
||||
title="添加户主"
|
||||
@onConfirm="onConfirm">
|
||||
<el-form ref="DialogForm" size="small" label-width="0">
|
||||
<el-form-item>
|
||||
<ai-area-select clearable always-show :instance="instance" v-model="areaId" :disabled-level="disabledLevel"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="网格：" required label-width="80px">
|
||||
<el-select size="small" v-model="girdId" placeholder="请选择网格" clearable>
|
||||
<el-option v-for="(item,i) in girdList" :key="i" :label="item.girdName" :value="item.id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<ai-table-select :instance="instance" :action="`/app/appresident/list?householdName=1&areaId=${areaId}&auditStatus=1`"
|
||||
@select="v=>chooseUser=v" multiple/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Family',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
name: '',
|
||||
girdId: ''
|
||||
},
|
||||
form: {},
|
||||
name: '',
|
||||
chooseUser: [],
|
||||
isShow: false,
|
||||
total: 10,
|
||||
colConfigs: [
|
||||
{type: 'selection', label: ''},
|
||||
{prop: 'name', label: '户主姓名', align: 'left', width: '200px'},
|
||||
{prop: 'idNumber', label: '身份证号', align: 'center'},
|
||||
{prop: 'phone', label: '联系方式', align: 'center'},
|
||||
{prop: 'girdName', label: '所属网格', align: 'center'},
|
||||
{prop: 'createTime', label: '添加时间', align: 'center'},
|
||||
{slot: 'options', label: '操作', align: 'center'}
|
||||
],
|
||||
tableData: [],
|
||||
areaId: '',
|
||||
ids: [],
|
||||
disabledLevel: 0,
|
||||
girdList: [],
|
||||
girdId: '',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
created() {
|
||||
this.areaId = this.user.info.areaId
|
||||
this.disabledLevel = this.user.info.areaList.length
|
||||
this.dict.load('epidemicDangerousAreaLevel').then(() => {
|
||||
this.getGirdList()
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getGirdList() {
|
||||
this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.$route.query.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.girdList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getListInit() {
|
||||
this.search.current = 1
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.instance.post(`/app/appgirdmemberpoverty/listByGirdMemberByWeb`, null, {
|
||||
params: {
|
||||
...this.search,
|
||||
girdMemberId: this.$route.query.id,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
removeAll() {
|
||||
if (!this.ids) {
|
||||
return this.$message.error('请选择户主')
|
||||
}
|
||||
this.remove(this.ids.join(','))
|
||||
},
|
||||
handleSelectionChange(e) {
|
||||
this.ids = e.map(v => v.gmpId)
|
||||
},
|
||||
onConfirm() {
|
||||
if (!this.girdId) {
|
||||
return this.$message.error('请选择网格')
|
||||
}
|
||||
|
||||
if (!this.chooseUser.length) {
|
||||
return this.$message.error('请选择户主')
|
||||
}
|
||||
|
||||
const povertyList = this.chooseUser.map(v => {
|
||||
return {
|
||||
girdMemberId: this.$route.query.id,
|
||||
name: v.split('~')[0],
|
||||
girdId: this.girdId,
|
||||
povertyId: v.split('~')[1]
|
||||
}
|
||||
})
|
||||
this.instance.post(`/app/appgirdmemberpoverty/add`, {
|
||||
povertyList
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
this.$message.success('添加成功')
|
||||
this.closeDialog()
|
||||
}
|
||||
})
|
||||
},
|
||||
closeDialog() {
|
||||
this.isShow = false
|
||||
this.chooseUser = []
|
||||
this.girdId = ''
|
||||
this.name = ''
|
||||
this.areaId = this.user.info.areaId
|
||||
},
|
||||
onBack() {
|
||||
this.$emit('change', {
|
||||
type: 'list'
|
||||
})
|
||||
},
|
||||
remove(ids) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appgirdmemberpoverty/delete`, null, {
|
||||
params: {ids}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Family {
|
||||
.AiWechatSelecter-container {
|
||||
display: flex;
|
||||
height: 380px;
|
||||
margin-top: 20px;
|
||||
|
||||
::v-deep {
|
||||
.el-icon-circle-close {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
& > span {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tree-user__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-tree {
|
||||
background: transparent;
|
||||
|
||||
.el-tree-node {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
height: auto;
|
||||
margin-top: 2px;
|
||||
// align-items: inherit;
|
||||
}
|
||||
|
||||
.el-tree-node__expand-icon {
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mask-btn__wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mask-btn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.userlist-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 17px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.userlist-item__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 280px;
|
||||
background: #FCFCFC;
|
||||
border: 1px solid #D0D4DC;
|
||||
}
|
||||
|
||||
.AiWechatSelecter-list {
|
||||
height: calc(100% - 40px);
|
||||
padding: 8px 0;
|
||||
|
||||
::v-deep .el-scrollbar__wrap {
|
||||
margin-bottom: 0 !important;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox-group {
|
||||
padding: 0 8px;
|
||||
|
||||
.el-checkbox {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.AiWechatSelecter-container__left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.AiWechatSelecter-container__right {
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
|
||||
.AiWechatSelecter-list {
|
||||
.tags-wrapper {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
margin: 0 8px 8px 0px;
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.AiWechatSelecter-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding: 0 8px 0 0;
|
||||
border-bottom: 1px solid #D0D4DC;
|
||||
background: #F5F7FA;
|
||||
|
||||
.AiWechatSelecter-header__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
|
||||
h2 {
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.active {
|
||||
color: #2266FF;
|
||||
border-color: #2266FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
height: 28px;
|
||||
padding: 7px 5px;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.AiWechatSelecter-header__right {
|
||||
padding: 0 8px;
|
||||
|
||||
h2 {
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,534 +0,0 @@
|
||||
<template>
|
||||
<section style="height: 100%">
|
||||
<ai-detail class="add">
|
||||
<template #title>
|
||||
<ai-title :title="title" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="cancel(false)"></ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<el-form
|
||||
ref="rules"
|
||||
:model="forms"
|
||||
:rules="formRules"
|
||||
size="small"
|
||||
label-suffix="："
|
||||
label-width="136px">
|
||||
<ai-card title="基础信息">
|
||||
<template #right v-if="title=='网格员详情'">
|
||||
<span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editOne==false" @click="editOne=true">修改</span>
|
||||
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true"
|
||||
@click="searchDetail(),editOne=false">取消</span>
|
||||
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="save()">保存</span>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<div class="above" v-if="editOne==true">
|
||||
<div class="left">
|
||||
<el-form-item label="网格员姓名" prop="name">
|
||||
<el-input v-model="forms.name" placeholder="请选择网格员" disabled>
|
||||
<template #append>
|
||||
<ai-wechat-selecter :isMultiple="false" refs="addTags" :instance="instance" v-model="users" @change="getSelectPerson">
|
||||
<el-button size="small" type="primary"><span style="color: #fff">选择成员</span></el-button>
|
||||
</ai-wechat-selecter>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="idNumber">
|
||||
<el-input v-model="forms.idNumber" placeholder="请输入…" maxlength="18" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="照片" prop="photo">
|
||||
<!-- <ai-uploader :instance="instance" v-model="photoList" :limit="1" @change="photoChange"></ai-uploader> -->
|
||||
<ai-avatar :instance="instance" v-model="forms.photo"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="above" v-if="editOne==true">
|
||||
<div class="left">
|
||||
<el-form-item label="出生日期" prop="birthday">
|
||||
<el-date-picker
|
||||
v-model="forms.birthday"
|
||||
type="date"
|
||||
style="width: 100%"
|
||||
value-format="yyyy-MM-dd"
|
||||
size="medium"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input v-model.number="forms.phone" placeholder="请输入…" maxlength="11" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-select size="medium" style="width: 100%" v-model="forms.sex" placeholder="请选择..." clearable>
|
||||
<el-option
|
||||
v-for="(item,i) in dict.getDict('sex')"
|
||||
:key="i"
|
||||
:label="item.dictName"
|
||||
:value="item.dictValue"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电子邮箱" prop="mail">
|
||||
<el-input v-model="forms.mail" placeholder="请输入…"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="editOne==false">
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
||||
<ai-info-item label="网格员姓名："><span>{{ forms.name }}</span></ai-info-item>
|
||||
<ai-info-item label="身份证号："><span>{{ forms.idNumber }}</span></ai-info-item>
|
||||
<ai-info-item label="性别："><span>{{ dict.getLabel('sex', forms.sex) }}</span></ai-info-item>
|
||||
<ai-info-item label="出生日期："><span>{{ forms.birthday }}</span></ai-info-item>
|
||||
<ai-info-item label="电子邮箱："><span>{{ forms.mail }}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
|
||||
<ai-info-item label="照片：" v-if="forms.photo">
|
||||
<span>
|
||||
<ai-uploader :instance="instance" v-model="photoList" disabled :limit="1" @change="photoChange"></ai-uploader>
|
||||
</span>
|
||||
</ai-info-item>
|
||||
<ai-info-item label="联系电话："><span>{{ forms.phone }}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="关联信息">
|
||||
<template #right v-if="title=='网格员详情'">
|
||||
<span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editTwo==false" @click="editTwo=true">修改</span>
|
||||
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true"
|
||||
@click="searchDetail(),editTwo=false">取消</span>
|
||||
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="save()">保存</span>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<template v-if="editTwo==true">
|
||||
<el-form-item label="责任网格" prop="girdInfoList" style="margin-top: 8px;">
|
||||
<el-form-item style="width: 100%" label-width="80px" :label="'网格' + (index + 1)" v-for="(item, index) in forms.girdInfoList"
|
||||
:key="'选项' + (index + 1)">
|
||||
<div class="form-flex">
|
||||
<el-select v-model="item.checkType" placeholder="请选择网格角色">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-input disabled v-model="item.girdName" :maxlength="200" size="small" placeholder="请选择责任网格">
|
||||
<template slot="append">
|
||||
<el-button size="small" @click="currIndex = index, showGrid = true">选择网格</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button type="danger" size="small" @click="removeGrid(index)">删除</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-button type="primary" size="small" @click="addGrid">添加选项</el-button>
|
||||
<!-- <el-button size="small" @click="showGrid=true">选择网格</el-button> -->
|
||||
</el-form-item>
|
||||
<div class="above">
|
||||
<div class="left">
|
||||
<el-form-item label="是否特殊网格员" prop="isGirdMember">
|
||||
<el-radio-group v-model="forms.isGirdMember">
|
||||
<el-radio label="0">否</el-radio>
|
||||
<el-radio label="1">是</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="政治面貌" prop="politicsStatus">
|
||||
<el-select v-model="forms.politicsStatus" size="small" style="width: 100%" placeholder="请选择..." clearable>
|
||||
<el-option v-for="(item,i) in dict.getDict('politicsStatus')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-form-item label="特殊网格员" prop="girdMemberType" v-if="forms.isGirdMember==1">
|
||||
<el-select v-model="forms.girdMemberType" size="small" placeholder="请选择..." clearable>
|
||||
<el-option v-for="(item,i) in dict.getDict('girdMemberType')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="学历" prop="education">
|
||||
<el-select v-model="forms.education" style="width: 100%" size="small" placeholder="请选择..." clearable>
|
||||
<el-option v-for="(item,i) in dict.getDict('education')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="个人简介" prop="introduction">
|
||||
<el-input
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
:rows="4"
|
||||
placeholder="请输入内容"
|
||||
v-model="forms.introduction">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="人生格言" prop="motto">
|
||||
<el-input
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
:rows="4"
|
||||
placeholder="请输入内容"
|
||||
v-model="forms.motto">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="editTwo==false">
|
||||
<ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px;">
|
||||
<ai-info-item label="责任网格：" style="width: 100%;"><span v-html="girdInfoStr || '-'"></span></ai-info-item>
|
||||
<ai-info-item label="是否特殊网格员：">
|
||||
<span>{{ !forms.isGirdMember ? '-' : forms.isGirdMember === '0' ? '否' : '是' }}</span>
|
||||
</ai-info-item>
|
||||
<ai-info-item label="特殊网格员：" v-if="forms.isGirdMember==1"><span>{{ dict.getLabel('girdMemberType', forms.girdMemberType) }}</span>
|
||||
</ai-info-item>
|
||||
<ai-info-item label="政治面貌："><span>{{ dict.getLabel('politicsStatus', forms.politicsStatus) }}</span></ai-info-item>
|
||||
<ai-info-item label="学历："><span>{{ dict.getLabel('education', forms.education) }}</span></ai-info-item>
|
||||
<ai-info-item label="人生格言：" style="width: 100%;"><span>{{ forms.motto }}</span></ai-info-item>
|
||||
<ai-info-item label="个人简介：" style="width: 100%;"><span>{{ forms.introduction }}</span></ai-info-item>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</template>
|
||||
</ai-card>
|
||||
</el-form>
|
||||
<ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true" border width="720px">
|
||||
<div class="grid">
|
||||
<el-tree
|
||||
:data="treeObj.treeList"
|
||||
:props="treeObj.defaultProps"
|
||||
node-key="id"
|
||||
ref="tree"
|
||||
:check-strictly="true"
|
||||
show-checkbox
|
||||
:default-checked-keys="currCheckedKeys"
|
||||
default-expand-all
|
||||
@check="onCheckChange">
|
||||
</el-tree>
|
||||
</div>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button size="medium" @click="showGrid=false">取消</el-button>
|
||||
<el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
<template #footer v-if="title=='添加网格员'">
|
||||
<el-button @click="cancel(false)" class="delete-btn footer-btn">取 消</el-button>
|
||||
<el-button type="primary" @click="save()" class="footer-btn">提 交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "add",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
users: [],
|
||||
currIndex: 0,
|
||||
forms: {
|
||||
birthday: "",
|
||||
education: "",
|
||||
girdId: "",
|
||||
girdInfoList: [],
|
||||
girdMemberType: "",
|
||||
id: "",
|
||||
wxUserId: '',
|
||||
introduction: "",
|
||||
isGirdMember: "",
|
||||
mail: "",
|
||||
motto: "",
|
||||
name: "",
|
||||
phone: "",
|
||||
photo: "",
|
||||
politicsStatus: "",
|
||||
selectionDate: "",
|
||||
sex: "",
|
||||
userId: "",
|
||||
},
|
||||
options: [{
|
||||
value: '2',
|
||||
label: '网格长'
|
||||
}, {
|
||||
value: '1',
|
||||
label: '网格员'
|
||||
}],
|
||||
showGrid: false,
|
||||
treeObj: {
|
||||
treeList: [],
|
||||
defaultProps: {
|
||||
children: "girdList",
|
||||
label: "girdName",
|
||||
},
|
||||
checkedKeys: [],
|
||||
},
|
||||
girdInfoStr: '',
|
||||
photoList: [],
|
||||
title: "添加网格员",
|
||||
editOne: false,
|
||||
editTwo: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.beforeSelectTree()
|
||||
if (this.$route.query.id) {
|
||||
this.searchDetail();
|
||||
this.title = "网格员详情";
|
||||
this.editOne = false;
|
||||
this.editTwo = false;
|
||||
} else {
|
||||
this.title = "添加网格员";
|
||||
this.editOne = true;
|
||||
this.editTwo = true;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currCheckedKeys() {
|
||||
if (this.forms && this.forms.girdInfoList && this.forms.girdInfoList[this.currIndex] && this.forms.girdInfoList[this.currIndex].id) {
|
||||
return [this.forms.girdInfoList[this.currIndex].id]
|
||||
}
|
||||
|
||||
return []
|
||||
},
|
||||
formRules() {
|
||||
let phonePass = (rule, value, callback) => {
|
||||
let reg = /^(?:(?:\+|00)86)?1\d{10}$/;
|
||||
if (value) {
|
||||
if (reg.test(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("联系电话格式错误"));
|
||||
}
|
||||
} else {
|
||||
callback(new Error("请输入联系电话"));
|
||||
}
|
||||
};
|
||||
return {
|
||||
name: [
|
||||
{required: true, message: "请输入网格员姓名", trigger: "change"},
|
||||
],
|
||||
phone: [{required: true, validator: phonePass, trigger: "blur"}],
|
||||
girdInfoList: [
|
||||
{required: true, message: "请选择责任网络", trigger: "change"},
|
||||
],
|
||||
mail: [
|
||||
{
|
||||
type: "email",
|
||||
message: "请输入正确的邮箱地址",
|
||||
trigger: ["blur", "change"],
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh,
|
||||
})
|
||||
},
|
||||
|
||||
onCheckChange(e) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.getCheckedKeys().forEach(v => {
|
||||
this.$refs.tree.setChecked(v, false)
|
||||
})
|
||||
this.$refs.tree.setChecked(e.id, true)
|
||||
})
|
||||
},
|
||||
|
||||
removeGrid(index) {
|
||||
this.forms.girdInfoList.splice(index, 1)
|
||||
},
|
||||
|
||||
addGrid() {
|
||||
this.forms.girdInfoList.push({
|
||||
id: '',
|
||||
girdName: '',
|
||||
checkType: ''
|
||||
})
|
||||
},
|
||||
photoChange(val) {
|
||||
this.forms.photo = val[0].url;
|
||||
},
|
||||
getSelectPerson(val) {
|
||||
if (val.length) {
|
||||
this.forms.name = val[0].name;
|
||||
this.forms.phone = val[0].phone;
|
||||
this.forms.userId = val[0].sysUserId
|
||||
this.forms.wxUserId = val[0].id
|
||||
this.$refs.rules.validateField('name')
|
||||
}
|
||||
},
|
||||
getCheckedTree() {
|
||||
if (!this.$refs.tree.getCheckedNodes().length) {
|
||||
return this.$message.error('请选择网格')
|
||||
}
|
||||
|
||||
if (this.$refs.tree.getCheckedNodes().length > 1) {
|
||||
return this.$message.error('不支持多选')
|
||||
}
|
||||
this.$set(this.forms.girdInfoList, this.currIndex, {
|
||||
...this.$refs.tree.getCheckedNodes()[0],
|
||||
checkType: this.forms.girdInfoList[this.currIndex].checkType
|
||||
})
|
||||
this.showGrid = false;
|
||||
},
|
||||
handleClose(tag) {
|
||||
this.forms.girdInfoList.splice(this.forms.girdInfoList.indexOf(tag), 1);
|
||||
},
|
||||
beforeSelectTree() {
|
||||
this.treeObj.checkedKeys = [];
|
||||
this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.treeObj.treeList = res.data;
|
||||
this.forms.girdInfoList.map((e) => {
|
||||
this.treeObj.checkedKeys.push(e.id);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
save() {
|
||||
this.$refs["rules"].validate((valid) => {
|
||||
if (valid) {
|
||||
for (let i = 0; i < this.forms.girdInfoList.length; i++) {
|
||||
const currInfo = this.forms.girdInfoList[i]
|
||||
const arr = JSON.parse(JSON.stringify(this.forms.girdInfoList))
|
||||
arr.splice(i, 1)
|
||||
const sameInfo = arr.filter(v => v.id === currInfo.id)
|
||||
if (!currInfo.checkType) {
|
||||
return this.$message.error('请选择网格员类型')
|
||||
}
|
||||
|
||||
if (!currInfo.id) {
|
||||
return this.$message.error('请选择网格')
|
||||
}
|
||||
}
|
||||
|
||||
this.instance.post(`/app/appgirdmemberinfo/addOrUpdate`, {
|
||||
...this.forms,
|
||||
girdInfoListStr: this.forms.girdInfoList.map(v => v.girdName).join(',')
|
||||
}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
if (this.title == "添加网格员") {
|
||||
this.cancel(true)
|
||||
} else {
|
||||
this.editOne = false
|
||||
this.editTwo = false
|
||||
this.searchDetail()
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
});
|
||||
},
|
||||
searchDetail() {
|
||||
let {id} = this.$route.query
|
||||
this.instance.post(`/app/appgirdmemberinfo/queryDetailById`, null, {
|
||||
params: {id}
|
||||
}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.forms = {
|
||||
...res.data,
|
||||
girdInfoList: res.data.girdInfoList || []
|
||||
};
|
||||
this.users = [{
|
||||
name: res.data.name,
|
||||
phone: res.data.phone,
|
||||
userId: res.data.id,
|
||||
id: res.data.wxUserId
|
||||
}]
|
||||
this.girdInfoStr = ''
|
||||
this.photoList = [{url: this.forms.photo}];
|
||||
if (res.data.girdInfoList) {
|
||||
res.data.girdInfoList.forEach((e) => {
|
||||
this.girdInfoStr = this.girdInfoStr + `${e.checkType === '1' ? '网格员' : '网格长'}-${e.girdName} `
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add {
|
||||
height: 100%;
|
||||
|
||||
.form-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > .el-button {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 300px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ai-detail__title {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ai-detail__content {
|
||||
.ai-detail__content--wrapper {
|
||||
.el-form {
|
||||
// background-color: #fff;
|
||||
// padding: 0 60px;
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.el-form-item {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.buildingTypes {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-tag {
|
||||
margin-right: 8px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
width: 92px;
|
||||
}
|
||||
|
||||
.above {
|
||||
display: flex;
|
||||
|
||||
.left, .right {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<section class="gmList">
|
||||
<ai-list class="AppGridMember">
|
||||
<template slot="title">
|
||||
<ai-title title="网格员管理" :isShowBottomBorder="false"></ai-title>
|
||||
</template>
|
||||
<template slot="tabs">
|
||||
<el-tabs v-model="currIndex">
|
||||
<el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
|
||||
<component :ref="String(i)" v-if="currIndex == i" :is="tab.comp" lazy :instance="instance"
|
||||
:dict="dict" :permissions="permissions" v-on="$listeners"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
</ai-list>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from "./list";
|
||||
import ApplyList from "./ApplyList";
|
||||
|
||||
export default {
|
||||
name: "gmList",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return [
|
||||
{label: '网格员信息', name: 'List', comp: List, permission: ''},
|
||||
{label: '申报信息', name: 'ApplyList', comp: ApplyList, permission: 'app_appgirdmemberapply_detail'}
|
||||
].filter(item => {
|
||||
return item.name !== 'ApplyList' || this.permissions(item.permission)
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currIndex: '0',
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
created() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gmList {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,167 +0,0 @@
|
||||
<template>
|
||||
<ai-list class="list" isTabs>
|
||||
<template slot="content">
|
||||
<ai-search-bar style="padding: 16px 0 0">
|
||||
<template slot="left">
|
||||
<el-button
|
||||
icon="iconfont iconAdd"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="add('')"
|
||||
>添加
|
||||
</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="iconfont iconDelete"
|
||||
@click="deleteById(ids.join(','))"
|
||||
:disabled="!Boolean(ids.length)"
|
||||
>删除
|
||||
</el-button
|
||||
>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input
|
||||
v-model="searchObj.name"
|
||||
size="small"
|
||||
placeholder="网格员/责任网格"
|
||||
v-throttle="() => {page.current = 1, getList()}"
|
||||
clearable
|
||||
@clear="(searchObj.name = '', page.current = 1), getList()"
|
||||
suffix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="page.total"
|
||||
:current.sync="page.current"
|
||||
:size.sync="page.size"
|
||||
@selection-change="(v) => (ids = v.map((e) => e.id))"
|
||||
@getList="getList()">
|
||||
<el-table-column label="操作" slot="options" align="center" fixed="right" width="220">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="toFamily(row.id)">责任家庭</el-button>
|
||||
<el-button type="text" @click="toMonitorUser(row.id)" v-if="permissions('girdmemberpovertyconfig')">监测对象</el-button>
|
||||
<el-button type="text" @click="add(row.id)">详情</el-button>
|
||||
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "List",
|
||||
label: "网格员管理",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchObj: {
|
||||
name: "",
|
||||
selectionDate: "",
|
||||
},
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
},
|
||||
goAdd: false,
|
||||
tableData: [],
|
||||
fileList: [],
|
||||
ids: [],
|
||||
detail: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
|
||||
this.getList();
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
return [
|
||||
{type: "selection"},
|
||||
{prop: "name", label: "网格员姓名"},
|
||||
{prop: "girdInfoListStr", align: "center", label: "责任网格"},
|
||||
{prop: "phone", align: "center", label: "联系电话"},
|
||||
{prop: "createTime", align: "center", label: "创建时间"},
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance.post("/app/appgirdmemberinfo/list", null, {
|
||||
params: {...this.searchObj, ...this.page}
|
||||
}).then((res) => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data.records;
|
||||
this.page.total = res.data.total;
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteById(ids) {
|
||||
ids && this.$confirm("是否要删除该网格员？", {
|
||||
type: "error",
|
||||
}).then(() => {
|
||||
this.instance
|
||||
.post("/app/appgirdmemberinfo/delete", null, {
|
||||
params: {ids},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!");
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => 0);
|
||||
},
|
||||
add(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Add',
|
||||
params: {
|
||||
id: id || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
toMonitorUser(id) {
|
||||
this.$emit('change', {
|
||||
type: 'MonitorUser',
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
},
|
||||
toFamily(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Family',
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.ids = [];
|
||||
val.map((e) => {
|
||||
this.ids.push(e.id);
|
||||
});
|
||||
},
|
||||
resetSearch() {
|
||||
Object.keys(this.searchObj).map((e) => {
|
||||
this.searchObj[e] = "";
|
||||
});
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<div class="AppHomesteadManagement">
|
||||
<keep-alive :include="['List']">
|
||||
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/List'
|
||||
import Add from './components/Add'
|
||||
|
||||
export default {
|
||||
label: '宅基地管理',
|
||||
name: 'AppHomesteadManagement',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {},
|
||||
include: [],
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
Add,
|
||||
List,
|
||||
},
|
||||
methods: {
|
||||
onChange(data) {
|
||||
if (data.type === 'add') {
|
||||
this.component = 'Add'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type == 'list') {
|
||||
this.component = 'List'
|
||||
this.params = data.params
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppHomesteadManagement {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,475 +0,0 @@
|
||||
<template>
|
||||
<section style="height: 100%" class="AppHomesteadManagement">
|
||||
<ai-detail class="Add">
|
||||
<!-- 返回按钮 -->
|
||||
<template #title>
|
||||
<ai-title :title="isEdit ? '编辑宅基地信息' : '添加宅基地'" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix="：" align-items="center">
|
||||
<ai-card title="户主信息" >
|
||||
<template slot="content">
|
||||
<div class="flex">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input size="small" class="user-selecter" v-model="formData.name" placeholder="请输入" clearable>
|
||||
<template slot="append">
|
||||
<ai-person-select :instance="instance" @selectPerson="checkName">
|
||||
</ai-person-select>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号码" prop="idNumber">
|
||||
<ai-id size="small" v-model="formData.idNumber" @change="IdCard(formData.idNumber)"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<ai-select v-model="formData.sex" placeholder="请选择" :selectList="dict.getDict('sex')" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="年龄" prop="age">
|
||||
<el-input size="small" v-model="formData.age" placeholder="请输入" clearable disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input size="small" v-model="formData.phone" placeholder="请输入" clearable :maxlength="20"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="所属村" prop="areaId">
|
||||
<ai-area-get :instance="instance" v-model="formData.areaId" :name.sync="formData.areaName" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="宅基地情况" >
|
||||
<template slot="content">
|
||||
<div class="flex">
|
||||
<el-form-item label="宅基地面积">
|
||||
<el-input size="small" v-model="formData.homesteadArea" placeholder="请输入" clearable maxlength="10">
|
||||
<template slot="append">m²</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="房基占地面积">
|
||||
<el-input size="small" v-model="formData.houseArea" placeholder="请输入" clearable maxlength="10">
|
||||
<template slot="append">m²</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="宅基地地址">
|
||||
<el-input size="small" v-model="formData.homesteadAddress" placeholder="请输入" clearable maxlength="20"></el-input>
|
||||
</el-form-item>
|
||||
<div class="flex">
|
||||
<el-form-item label="四至-东至">
|
||||
<el-input size="small" v-model="formData.eastTo" placeholder="请输入" clearable maxlength="20"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="四至-南至">
|
||||
<el-input size="small" v-model="formData.southTo" placeholder="请输入" clearable maxlength="20"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="四至-西至">
|
||||
<el-input size="small" v-model="formData.westTo" placeholder="请输入" clearable maxlength="20"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="四至-北至">
|
||||
<el-input size="small" v-model="formData.northTo" placeholder="请输入" clearable maxlength="20"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="地类" class="buildingTypes">
|
||||
<el-radio-group v-model="formData.landType">
|
||||
<el-radio :label="item.dictValue" v-for="(item, index) in dict.getDict('homesteadLandType')" :key="index">{{item.dictName}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="性质" class="buildingTypes">
|
||||
<el-radio-group v-model="formData.houseType">
|
||||
<el-radio :label="item.dictValue" v-for="(item, index) in dict.getDict('homesteadHouseType')" :key="index">{{item.dictName}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<div class="flex">
|
||||
<el-form-item label="住宅建筑面积">
|
||||
<el-input size="small" v-model="formData.liveBuildingArea" placeholder="请输入" clearable maxlength="10">
|
||||
<template slot="append">m²</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="建筑层数">
|
||||
<el-input size="small" v-model="formData.buildingFloorNumber" placeholder="请输入" clearable maxlength="10">
|
||||
<template slot="append">层</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="建筑高度">
|
||||
<el-input size="small" v-model="formData.buildingHeight" placeholder="请输入" clearable maxlength="10">
|
||||
<template slot="append">m</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="位置信息" >
|
||||
<template slot="content">
|
||||
<div class="flex">
|
||||
<el-form-item label="楼栋经度">
|
||||
<el-input size="small" v-model="formData.lng" placeholder="请输入" clearable maxlength="10"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="楼栋纬度">
|
||||
<el-input size="small" v-model="formData.lat" placeholder="请输入" clearable maxlength="10"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="地图位置">
|
||||
<el-button @click="showMap = true">地图标绘</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</ai-card>
|
||||
</el-form>
|
||||
</template>
|
||||
<!-- 底部按钮 -->
|
||||
<template #footer>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="confirm()">提交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
<ai-dialog title="地图" :visible.sync="showMap" @opened="getCorpLocation" width="800px" class="mapDialog" @onConfirm="selectMap">
|
||||
<div id="map"></div>
|
||||
<el-form label-width="80px" style="padding: 10px 20px 0 20px;">
|
||||
<el-row type="flex" justify="space-between">
|
||||
<el-form-item label="经度">
|
||||
<el-input disabled size="small" v-model="placeDetail.lng"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度">
|
||||
<el-input disabled size="small" v-model="placeDetail.lat"></el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字">
|
||||
<el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button>
|
||||
</el-input>
|
||||
<div id="searchPlaceOutput" />
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||
|
||||
export default {
|
||||
name: 'Add',
|
||||
props: {
|
||||
dict: Object,
|
||||
params: Object,
|
||||
instance: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
name: '',
|
||||
idNumber: '',
|
||||
age: '',
|
||||
sex: '',
|
||||
phone: '',
|
||||
areaId: '',
|
||||
homesteadArea: '',
|
||||
houseArea: '',
|
||||
homesteadAddress: '',
|
||||
eastTo: '',
|
||||
southTo: '',
|
||||
westTo: '',
|
||||
northTo: '',
|
||||
landType: '0',
|
||||
houseType: '0',
|
||||
liveBuildingArea: '',
|
||||
buildingFloorNumber: '',
|
||||
buildingHeight: '',
|
||||
lng: '',
|
||||
lat: '',
|
||||
id: '',
|
||||
areaName: ''
|
||||
},
|
||||
formRules: {
|
||||
name: [
|
||||
{ required: true, message: '请选择人员', trigger: 'change' },
|
||||
],
|
||||
age: [
|
||||
{ required: true, message: '请输入年龄', trigger: 'change' },
|
||||
],
|
||||
sex: [
|
||||
{ required: true, message: '请选择性别', trigger: 'change' },
|
||||
],
|
||||
idNumber: [
|
||||
{ required: true, message: '请输入身份证号码', trigger: 'change' },
|
||||
],
|
||||
areaId: [
|
||||
{ required: true, message: '请选择所属村', trigger: 'change' },
|
||||
]
|
||||
},
|
||||
map: null,
|
||||
placeDetail: {
|
||||
lng: '',
|
||||
lat: '',
|
||||
},
|
||||
showMap: false,
|
||||
searchPlace: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
isEdit() {
|
||||
return !!this.params.id
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.dict.load('homesteadLocationStatus', 'homesteadHouseType', 'homesteadLandType', 'sex').then(() => {
|
||||
if(this.params.id) {
|
||||
this.getListinfo()
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
checkName(e) {
|
||||
this.formData.name = e.name
|
||||
this.formData.idNumber = e.idNumber
|
||||
this.formData.phone = e.phone
|
||||
this.formData.areaId = e.householdAreaId
|
||||
},
|
||||
IdCard(UUserCard) {
|
||||
if (UUserCard) {
|
||||
let arr = [];
|
||||
if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
|
||||
arr.push("1");
|
||||
} else {
|
||||
arr.push("0");
|
||||
}
|
||||
|
||||
const myDate = new Date();
|
||||
const month = myDate.getMonth() + 1;
|
||||
const day = myDate.getDate();
|
||||
let age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
|
||||
if (
|
||||
UUserCard.substring(10, 12) < month ||
|
||||
(UUserCard.substring(10, 12) == month &&
|
||||
UUserCard.substring(12, 14) <= day)
|
||||
) {
|
||||
age++;
|
||||
}
|
||||
arr.push(age);
|
||||
this.formData.sex = arr[0];
|
||||
this.formData.age = arr[1];
|
||||
}
|
||||
},
|
||||
decimalInput(name) {
|
||||
if(!/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/g.test(this.formData[name])){
|
||||
this.formData[name] = ''
|
||||
return this.$message.error('最多只保留两位小数点')
|
||||
}
|
||||
},
|
||||
numberInput(name) {
|
||||
if(!/^[1-9]\d*|0$/g.test(this.formData[name])){
|
||||
this.formData[name] = ''
|
||||
return this.$message.error('请输入正整数')
|
||||
}
|
||||
},
|
||||
selectMap() {
|
||||
this.formData.lng = this.placeDetail.lng
|
||||
this.formData.lat = this.placeDetail.lat
|
||||
this.showMap = false
|
||||
},
|
||||
getCorpLocation() {
|
||||
this.instance.post('/app/appdvcpconfig/getCorpLocation').then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.initMap(res.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
initMap({ lng, lat }) {
|
||||
AMapLoader.load({
|
||||
key: 'b553334ba34f7ac3cd09df9bc8b539dc',
|
||||
version: '2.0',
|
||||
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
|
||||
}).then((AMap) => {
|
||||
this.placeDetail.lng = this.formData.lng
|
||||
this.placeDetail.lat = this.formData.lat
|
||||
this.map = new AMap.Map('map', {
|
||||
resizeEnable: true,
|
||||
zooms: [6, 20],
|
||||
center: [lng, lat],
|
||||
zoom: 11,
|
||||
})
|
||||
this.placeSearch = new AMap.PlaceSearch({ map: this.map })
|
||||
new AMap.AutoComplete({
|
||||
input: 'searchPlaceInput',
|
||||
output: 'searchPlaceOutput',
|
||||
}).on('select', (e) => {
|
||||
if (e?.poi) {
|
||||
this.placeSearch.setCity(e.poi.adcode)
|
||||
this.movePosition(e.poi.location)
|
||||
}
|
||||
})
|
||||
this.map.on('click', (e) => {
|
||||
new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => {
|
||||
if (res?.regeocode) {
|
||||
this.placeDetail = {
|
||||
lng: e.lnglat?.lng,
|
||||
lat: e.lnglat?.lat,
|
||||
address: res.regeocode.formattedAddress,
|
||||
}
|
||||
}
|
||||
})
|
||||
this.movePosition(e.lnglat)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
movePosition(center) {
|
||||
if (this.map) {
|
||||
this.map.clearMap()
|
||||
this.map.panTo(center)
|
||||
this.map.add([
|
||||
new AMap.Marker({
|
||||
position: center,
|
||||
clickable: true,
|
||||
}),
|
||||
])
|
||||
this.map.setFitView()
|
||||
}
|
||||
},
|
||||
|
||||
getListinfo() {
|
||||
return this.instance
|
||||
.post('/app/apphomesteadinfo/queryDetailById', null, {
|
||||
params: {
|
||||
id: this.params.id,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
this.formData = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
confirm() {
|
||||
this.$refs['ruleForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance
|
||||
.post(`/app/apphomesteadinfo/addOrUpdate`, {
|
||||
...this.formData,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('提交成功')
|
||||
setTimeout(() => {
|
||||
this.cancel(true)
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 返回按钮
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh,
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
communityNameContent: {
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppHomesteadManagement {
|
||||
::v-deep .amap-logo {
|
||||
display: none!important;
|
||||
}
|
||||
::v-deep .amap-copyright {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
.Add {
|
||||
height: 100%;
|
||||
.ai-detail__title {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ai-detail__content {
|
||||
.ai-detail__content--wrapper {
|
||||
.el-form {
|
||||
// background-color: #fff;
|
||||
// padding: 0 60px;
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
width: 48%;
|
||||
}
|
||||
.buildingTypes {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-selecter {
|
||||
::v-deep .el-input-group__append {
|
||||
width: 68px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .mapDialog {
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
|
||||
.ai-dialog__content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ai-dialog__content--wrapper {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.searchPlaceInput {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
top: 30px;
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
#searchPlaceOutput {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
left: 25px;
|
||||
height: initial;
|
||||
top: 80px;
|
||||
background: white;
|
||||
z-index: 250;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
|
||||
.auto-item {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,204 +0,0 @@
|
||||
<template>
|
||||
<section class="AppPetitionManage">
|
||||
<ai-list>
|
||||
<!-- 标题 -->
|
||||
<ai-title slot="title" title="宅基地管理" isShowBottomBorder isShowArea v-model="areaId" :instance="instance" @change="page.current=1,getList()"/>
|
||||
<template #content>
|
||||
<ai-search-bar bottomBorder>
|
||||
<template slot="left">
|
||||
<!-- 定位状态 -->
|
||||
<ai-select v-model="search.locationStatus" placeholder="定位状态" clearable :selectList="$dict.getDict('homesteadLocationStatus')" @change=";(page.current = 1), getList()"></ai-select>
|
||||
</template>
|
||||
|
||||
<!-- 搜索 -->
|
||||
<template slot="right">
|
||||
<el-input v-model="search.name" size="small"
|
||||
v-throttle="() => {page.current = 1, getList()}" placeholder="户主/联系电话" clearable @clear=";(page.current = 1), (search.name = ''), getList()" suffix-icon="iconfont iconSearch" />
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
|
||||
<ai-search-bar class="ai-search-ba mar-t10">
|
||||
<template slot="left">
|
||||
<el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加 </el-button>
|
||||
<el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button>
|
||||
</template>
|
||||
|
||||
<!-- 导入导出 -->
|
||||
<template #right>
|
||||
<ai-import :instance="instance" :dict="dict" type="apphomesteadinfo" :importParams="{ areaId: user.info && user.info.areaId }" name="宅基地管理" @success="getList()">
|
||||
<el-button icon="iconfont iconImport">导入</el-button>
|
||||
</ai-import>
|
||||
<ai-download :instance="instance" url="/app/apphomesteadinfo/export" :params="param" fileName="宅基地管理模板" :disabled="tableData.length == 0">
|
||||
<el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
|
||||
</ai-download>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
|
||||
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="page.current" :size.sync="page.size" @getList="getList" @selection-change="(v) => (ids = v.map((e) => e.id))">
|
||||
<el-table-column slot="locationStatus" label="定位状态" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span style="color:red" v-if="row.locationStatus == 0">{{ dict.getLabel('homesteadLocationStatus', row.locationStatus) }}</span>
|
||||
<span style="color:green" v-if="row.locationStatus == 1">{{ dict.getLabel('homesteadLocationStatus', row.locationStatus) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="options" label="操作" align="center" width="180" fixed="right">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="onAdd(row.id)">编辑</el-button>
|
||||
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
props: {
|
||||
dict: Object,
|
||||
instance: Function,
|
||||
params: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isAdd: false,
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
total: 0,
|
||||
search: {
|
||||
locationStatus: '',
|
||||
name: '',
|
||||
},
|
||||
id: '',
|
||||
ids: [],
|
||||
colConfigs: [
|
||||
{ type: 'selection', width: 100, align: 'center'},
|
||||
{
|
||||
prop: 'areaName',
|
||||
label: '村/社区',
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '户主',
|
||||
align: 'center',
|
||||
},
|
||||
{ prop: 'phone', label: '联系电话', align: 'center' },
|
||||
{
|
||||
prop: 'sex',
|
||||
label: '性别',
|
||||
width: '100',
|
||||
align: 'center',
|
||||
render: (h, { row }) => {
|
||||
return h('span', null, this.dict.getLabel('sex', row.sex))
|
||||
},
|
||||
},
|
||||
{ prop: 'age', label: '年龄', align: 'center' },
|
||||
{
|
||||
prop: 'idNumber',
|
||||
label: '身份证号',
|
||||
align: 'center',
|
||||
},
|
||||
{ prop: 'liveBuildingArea', label: '建筑面积(m²)', align: 'center',width: 120 },
|
||||
{
|
||||
slot: 'locationStatus'
|
||||
},
|
||||
{
|
||||
slot: 'options',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
areaId: '',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
param() {
|
||||
return {
|
||||
...this.search,
|
||||
areaId: this.user.info?.areaId,
|
||||
ids: this.ids,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.areaId = this.user.info.areaId
|
||||
this.dict.load('homesteadLocationStatus', 'homesteadHouseType', 'homesteadLandType', 'sex').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance
|
||||
.post(`/app/apphomesteadinfo/list`, null, {
|
||||
params: {
|
||||
...this.page,
|
||||
...this.search,
|
||||
areaId: this.areaId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
if(res.data.records.length) {
|
||||
res.data.records.map((item) => {
|
||||
item.idNumber = item.idNumber.substring(0,10) + '****' + item.idNumber.substring(13,17)
|
||||
})
|
||||
}
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 添加
|
||||
onAdd(id) {
|
||||
this.$emit('change', {
|
||||
type: 'add',
|
||||
params: {
|
||||
id: id || '',
|
||||
areaId: this.areaId,
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 删除
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据?').then(() => {
|
||||
this.instance.post(`/app/apphomesteadinfo/delete?ids=${id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
removeAll() {
|
||||
var id = this.ids.join(',')
|
||||
this.remove(id)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppPetitionManage {
|
||||
height: 100%;
|
||||
.mar-t10{
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,443 +0,0 @@
|
||||
<template>
|
||||
<section class="buildingStatistics">
|
||||
<ai-title v-if="!isFormDv" title="楼栋统计" isShowBack isShowBottomBorder @onBackClick="$router.push({query:{}}),$parent.info={},$parent.isShowInfo=false,$parent.house=null,$parent.chooseBuildId='',$parent.showStatistics=false, $parent.type='0'"/>
|
||||
<div class="buildingPane">
|
||||
<div class="bgItem tree"/>
|
||||
<div class="building">
|
||||
<template v-if="floorRooms.length>0">
|
||||
<div class="buildingSignboard">{{ `${currentBuilding.buildingNumber}栋 ${unitNumber}单元` }}
|
||||
</div>
|
||||
<el-scrollbar class="floors">
|
||||
<div class="floor" v-for="(fl,j) in floorRooms" :key="j">
|
||||
<div class="room" v-for="(op,i) in fl" :key="op.id" @click="handleSelectRoom(op,$event)" @touchstart="handleSelectRoom(op,$event)" :class="[{none:op.livingNumber==0,selected:selected.houseCode==op.houseCode},handleTipsHighlight(op.tips)]">
|
||||
{{ op.houseCode }}
|
||||
<div v-if="op.livingNumber==0">无人</div>
|
||||
<div v-show="op.id==selected.id" class="detail" @click.stop :style="{left:position.x,top:position.y}">
|
||||
<el-row class="popupHeader" type="flex" justify="space-between" align="middle">
|
||||
<span>{{selected.houseCode}}详情</span>
|
||||
<ai-icon icon="iconClean" @click.native.stop="selected={}"/>
|
||||
</el-row>
|
||||
<div class="family-member">
|
||||
<h2>房主信息</h2>
|
||||
<div v-for="(item,index) in selected.owner" :key="item.id">
|
||||
<div class="family-member__item">
|
||||
<div class="member-left">
|
||||
<label>{{item.name}}</label>
|
||||
</div>
|
||||
<span style="color: #2266FF">{{root.dict.getLabel("houseLivingType",item.livingType)}}</span>
|
||||
</div>
|
||||
<div class="family-member__item">
|
||||
<div class="member-left">
|
||||
<label>联系方式</label>
|
||||
</div>
|
||||
<span style="color: #2266FF;">{{item.phone}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>承租人信息</h2>
|
||||
<div v-for="(item,index) in selected.renter" :key="item.id">
|
||||
<div class="family-member__item" >
|
||||
<div class="member-left">
|
||||
<label>{{item.name}}</label>
|
||||
</div>
|
||||
<span style="color: #2266FF">{{root.dict.getLabel("houseLivingType",item.livingType)}}</span>
|
||||
</div>
|
||||
<div class="family-member__item">
|
||||
<div class="member-left">
|
||||
<label>联系方式</label>
|
||||
</div>
|
||||
<span>{{item.phone}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>实际居住人员</h2>
|
||||
<div v-for="(item,index) in selected.live" :key="item.id">
|
||||
<div class="family-member__item">
|
||||
<div class="member-left">
|
||||
<label>{{item.name}}</label>
|
||||
</div>
|
||||
<span>{{root.dict.getLabel("householdRelation",item.relation)}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<ai-empty v-else>请在【<b>小区总览</b>】中选取【楼栋单元】</ai-empty>
|
||||
<div class="bottom"/>
|
||||
</div>
|
||||
<building-tool-bar></building-tool-bar>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BuildingToolBar from "./buildingToolBar";
|
||||
|
||||
export default {
|
||||
name: "buildingStatistics",
|
||||
components: {BuildingToolBar},
|
||||
inject: ['root'],
|
||||
provide() {
|
||||
return {
|
||||
sta: this
|
||||
}
|
||||
},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
isFormDv: Boolean,
|
||||
query: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rooms: [],
|
||||
selected: {},
|
||||
currentBuilding: {},
|
||||
unitNumber:1,
|
||||
tips: [],
|
||||
position:{
|
||||
x:"",
|
||||
y:""
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
floorRooms() {
|
||||
let obj = {}
|
||||
this.rooms.map(e => {
|
||||
e.none = e.isNone == 0
|
||||
return obj[e.layerNumber]?.push(e) || (obj[e.layerNumber] = [e])
|
||||
})
|
||||
return Object.values(obj).reverse()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dict.load('householdRelation', 'residentTipType',"houseLivingType")
|
||||
if (this.isFormDv && this.query.buildingId) {
|
||||
this.getRoomsByBuilding(this.query.buildingId, this.query.unitNum)
|
||||
this.currentBuilding = { buildingNumber: this.query.buildingNumber}
|
||||
this.unitNumber = this.query.unitNum
|
||||
|
||||
return false
|
||||
}
|
||||
this.getRoomsByBuilding(this.$route.query?.buildingId,this.$route.query?.unitNum)
|
||||
this.currentBuilding = {buildingNumber: this.$route.query?.buildingNumber};
|
||||
this.unitNumber = this.$route.query?.unitNum;
|
||||
},
|
||||
methods: {
|
||||
handleSelectRoom(room, e) {
|
||||
console.log(e)
|
||||
if (room.livingNumber>0) {
|
||||
this.$nextTick(()=>{
|
||||
this.position.x = e.pageX + 40 + "px"
|
||||
this.position.y = e.pageY + "px"
|
||||
this.selected = room;
|
||||
this.$forceUpdate()
|
||||
})
|
||||
// this.getRoomDetail(room.id)
|
||||
}
|
||||
},
|
||||
selectedBuilding(building,unitNumber) {
|
||||
this.selected = {}
|
||||
this.tips = []
|
||||
this.$router.push({query: {...this.$route.query, buildingId: building.id,unitNum:unitNumber}}).catch(e=>{e})
|
||||
this.currentBuilding = building
|
||||
this.unitNumber = unitNumber
|
||||
this.getRoomsByBuilding(building.id,unitNumber)
|
||||
},
|
||||
getRoomsByBuilding(buildingId,unitNumber) {
|
||||
this.root.instance.post("/app/appcommunityhouseinfo/list", null, {
|
||||
params: {
|
||||
unitNumber,
|
||||
buildingId,
|
||||
size: 999
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.rooms = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
getRoomDetail(id) {
|
||||
return this.root.instance.post("/app/appcommunityhouseinfo/queryDetailById", null, {
|
||||
params: {id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
let {residents} = res.data
|
||||
this.selected = {
|
||||
...this.selected, ...res.data,
|
||||
residents: residents.map(e => {
|
||||
let {tips} = e
|
||||
//显示为户主
|
||||
let relationLabel = e.householdName == 1 ? "户主" : this.root.dict.getLabel("householdRelation", e.householdRelation)
|
||||
return {...e, tips: tips ? tips.split("|") : [], relationLabel}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleTipsHighlight(tip) {
|
||||
let flag = this.tips.length > 0 && !this.tips.some(t => tip?.split("|").includes(t))
|
||||
return flag ? 'tipsHighlight' : ''
|
||||
},
|
||||
selectedTips(tips) {
|
||||
this.tips = tips
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.buildingStatistics {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
::v-deep .ailist-title{
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.family-member {
|
||||
& > h2 {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
padding: 0 12px;
|
||||
color: #333333;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
background: #E3E8F1;
|
||||
}
|
||||
|
||||
.family-member__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
background: #F3F6F9;
|
||||
|
||||
.member-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: normal !important;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
label {
|
||||
color: #666666;
|
||||
font-weight: normal !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buildingPane {
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/cloud.png"), linear-gradient(3deg, #FFFFFF 0%, #3093FF 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 227px 43px, 100%;
|
||||
background-size: 788px 112px, 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding-right: 400px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
|
||||
.bgItem {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
|
||||
&.tree {
|
||||
left: calc(50% - 200px);
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
width: 580px;
|
||||
height: 71px;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/tree.png");
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.building {
|
||||
margin-left: 60px;
|
||||
flex-shrink: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 136px 0 0;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/roof.png"),
|
||||
url("https://cdn.cunwuyun.cn/buildSta/chimney.png");
|
||||
background-position: 0 121px, 70px 91px;
|
||||
background-size: 100% 105px, 70px;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
border-bottom: 10px solid #E9C28E;
|
||||
|
||||
.buildingSignboard {
|
||||
padding-top: 41px;
|
||||
width: 200px;
|
||||
height: 65px;
|
||||
text-align: center;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/buildingSignboard.png");
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #1D3296;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ai-empty {
|
||||
background: #FFECD9;
|
||||
margin: 90px 20px 0;
|
||||
padding: 0 10px 90px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
b {
|
||||
color: #26f
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
background: #FFECD9;
|
||||
height: 50px;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .floors {
|
||||
max-height: 520px;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.floor {
|
||||
margin: 0 20px;
|
||||
height: 105px;
|
||||
flex-shrink: 0;
|
||||
max-width: calc(100% - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/floor.png");
|
||||
background-size: 100% 105px;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
gap: 20px;
|
||||
|
||||
.room {
|
||||
width: 60px;
|
||||
height: 72px;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/room.png");
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
.detail {
|
||||
position: fixed;
|
||||
width: 320px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 11;
|
||||
transform: translateY(-100%);
|
||||
|
||||
.popupHeader {
|
||||
background: #D42222;
|
||||
padding: 0 12px;
|
||||
height: 32px;
|
||||
|
||||
.AiIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
height: 32px;
|
||||
|
||||
& > div {
|
||||
|
||||
}
|
||||
|
||||
&.title {
|
||||
background: #E3E8F1;
|
||||
}
|
||||
|
||||
&.stretch {
|
||||
background: #F3F6F9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.none {
|
||||
cursor: not-allowed;
|
||||
color: #f46;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/roomNone.png");
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/roomSelected.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buildingToolBar {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.tipsHighlight {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<section class="buildingToolBar">
|
||||
<div class="toolBar">
|
||||
<div class="nav" v-for="(op,i) in navs" :key="i" :class="{selected:i==active}" @click="active=i">
|
||||
<ai-icon :icon="op.icon"/>
|
||||
<div>{{ op.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="currentNav.comp" class="toolPane"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BuildingInfo from "./toolBar/buildingInfo";
|
||||
import CommunityOverview from "./toolBar/communityOverview";
|
||||
// import NearbyGCS from "./toolBar/nearbyGCS";
|
||||
import RecentEvents from "./toolBar/recentEvents";
|
||||
|
||||
export default {
|
||||
name: "buildingToolBar",
|
||||
components: {RecentEvents, CommunityOverview, BuildingInfo},
|
||||
computed: {
|
||||
navs() {
|
||||
return [
|
||||
{icon: 'icondanweiguanli', name: "单元统计", comp: BuildingInfo},
|
||||
{icon: 'icondanweiguanli', name: "单元切换", comp: CommunityOverview},
|
||||
// {icon: 'icondanweiguanli', name: "网格员", comp: NearbyGCS},
|
||||
// {icon: 'icondanweiguanli', name: "近期事件", comp: RecentEvents},
|
||||
]
|
||||
},
|
||||
currentNav() {
|
||||
return this.navs[this.active]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.buildingToolBar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.toolBar {
|
||||
height: 40px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
width: 400px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
align-self: flex-end;
|
||||
|
||||
.nav {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
color: #3A3A3A;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
.AiIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #2266FF;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: #E4F0FF;
|
||||
color: #2266FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolPane {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,239 +0,0 @@
|
||||
<template>
|
||||
<section class="buildingInfo">
|
||||
<ai-title title="人口信息"/>
|
||||
<div class="infoPane">
|
||||
<div class="staZone">
|
||||
<div v-for="(value, name) in staData" :key="name">
|
||||
<b>{{ value }}</b>
|
||||
<span>{{ name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ai-title title="房屋信息"/>
|
||||
<div class="infoPane">
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>所属社区</span>
|
||||
<span>{{build.areaName}}</span>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>所属小区</span>
|
||||
<span>{{build.communityName}}</span>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>房屋类型</span>
|
||||
<span>{{root.dict.getLabel("communityBuildingType",build.buildingType)}}</span>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>楼长姓名</span>
|
||||
<span>{{build.managerName}}</span>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>联系方式</span>
|
||||
<span>{{build.managerPhone}}</span>
|
||||
</el-row>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: "buildingInfo",
|
||||
inject: ['root', 'sta'],
|
||||
computed: {
|
||||
chartData() {
|
||||
return this.root.dict.getDict("residentTipType").map(e => ({
|
||||
name: e.dictName,
|
||||
key: e.dictValue,
|
||||
color: e.dictColor,
|
||||
v1: 0
|
||||
}))
|
||||
},
|
||||
colConfigs() {
|
||||
return [
|
||||
{prop:"areaName",label:"所属社区"}
|
||||
];
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
staData: {},
|
||||
tag:{},
|
||||
color:{},
|
||||
build:{},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart(data) {
|
||||
this.chart = echarts.init(document.getElementById("PersonStaChart"))
|
||||
let selected = {}, color = []
|
||||
this.chartData.map(e => {
|
||||
selected[e.name] = false
|
||||
color.push(e.color)
|
||||
})
|
||||
this.chart.setOption({
|
||||
grid: {top: 31, right: 0, height: 135},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
top: 185,
|
||||
left: 0,
|
||||
orient: "vertical",
|
||||
selected,
|
||||
itemWidth: 14,
|
||||
itemHeight: 14,
|
||||
itemGap: 12,
|
||||
icon: "rect",
|
||||
formatter: name => {
|
||||
let item = data.find(e => this.root.dict.getLabel('residentTipType', e.name) == name)
|
||||
return `{a|${name}} {b|${item.v1}}`
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {color: "#666", width: 123},
|
||||
b: {color: "#333", fontWeight: 'bold', align: 'right'}
|
||||
}
|
||||
}
|
||||
}, color,
|
||||
yAxis: {type: 'value', min: 0, minInterval: 1, axisTick: false, axisLine: false, axisLabel: {color: "#666"}},
|
||||
xAxis: {type: 'category', axisTick: false, axisLine: false, axisLabel: false},
|
||||
series: data.map(e => ({
|
||||
type: 'bar',
|
||||
barWidth: 8,
|
||||
barGap: '250%',
|
||||
name: this.root.dict.getLabel('residentTipType', e.name)
|
||||
}))
|
||||
})
|
||||
this.chart.on('legendselectchanged', ({selected}) => {
|
||||
let tips = Object.keys(selected)?.filter(e => selected[e])?.map(e => this.root.dict.getValue('residentTipType', e))
|
||||
this.sta?.selectedTips(tips)
|
||||
})
|
||||
this.getChartData(data)
|
||||
},
|
||||
getChartData(data) {
|
||||
this.chart?.setOption({
|
||||
series: data.map(e => ({data: [e.v1]}))
|
||||
})
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.root.dict?.load("communityBuildingType")
|
||||
},
|
||||
mounted() {
|
||||
this.root.instance.post("/app/appcommunitybuildinginfo/statistics", null, {
|
||||
params: {
|
||||
id: this.root.isFormDv ? this.root.info.id : this.$route.query.buildingId,
|
||||
unitNum: this.root.isFormDv ? this.root.info.unitNumber : this.$route.query.unitNum,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.staData = res.data.unit;
|
||||
this.tag = res.data.tag;
|
||||
this.color = res.data.color;
|
||||
this.build = res.data.build;
|
||||
// this.root.dict.load('residentTipType').then(() => {
|
||||
// this.initChart(res.data.lx)
|
||||
// })
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.buildingInfo {
|
||||
::v-deep .infoPane {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px;
|
||||
|
||||
.info-item{
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
align-items: center;
|
||||
|
||||
span:last-child{
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
&:nth-child(2n-1){
|
||||
background-color: #F3F6F9;
|
||||
}
|
||||
}
|
||||
|
||||
.static-wrap{
|
||||
width: 360px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.sta-item{
|
||||
width: 46%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.sta-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tag{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #DC1739;
|
||||
border-radius: 2px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
& > label{
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.num{
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.staZone {
|
||||
height: 80px;
|
||||
background: #F5F7F9;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
|
||||
b {
|
||||
font-size: 24px;
|
||||
font-family: DINAlternate-Bold, DINAlternate,serif;
|
||||
color: #2266FF;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
#PersonStaChart {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,116 +0,0 @@
|
||||
<template>
|
||||
<section class="communityOverview">
|
||||
<ai-title title="小区总览"/>
|
||||
<div class="units" v-if="Object.keys(buildingUnits).length>0">
|
||||
<div class="building" v-for="(value,name) in buildingUnits" :key="name">
|
||||
<div class="unit" v-for="(op,j) in value" :key="j" @click="sta.selectedBuilding(op,j+1)"
|
||||
:class="{selected:sta.unitNumber==j+1 && sta.currentBuilding.buildingNumber==name}">
|
||||
<b>{{ name}}栋</b>
|
||||
<div>{{ j+1 }}单元</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-else>暂无楼栋信息,请进入【楼栋管理】添加</AiEmpty>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "communityOverview",
|
||||
inject: ['root', 'sta'],
|
||||
computed: {
|
||||
buildingUnits() {
|
||||
let obj = {}
|
||||
this.units.map(e => {
|
||||
for(let i=0;i<e.unitNumber;i++){
|
||||
obj[e.buildingNumber]?.push(e) || (obj[e.buildingNumber] = [e])
|
||||
}
|
||||
})
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
units: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUnits(communityId) {
|
||||
this.root.instance.post("/app/appcommunitybuildinginfo/list", null, {
|
||||
params: {
|
||||
communityId,
|
||||
size: 999
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.units = res.data.records
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getUnits(this.root.isFormDv ? this.root.info.communityId : this.$route.query.communityId)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.communityOverview {
|
||||
max-width: 400px;
|
||||
|
||||
.units {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 20px 20px;
|
||||
align-items: flex-start;
|
||||
|
||||
.building {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.unit {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:nth-of-type(5) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
width: 64px;
|
||||
height: 56px;
|
||||
background: #F8FBFF;
|
||||
border-radius: 2px 0 0 2px;
|
||||
border: 1px solid #829CCF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
|
||||
b {
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: #fff;
|
||||
background: #2266FF;
|
||||
|
||||
b {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ai-empty {
|
||||
height: 240px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,129 +0,0 @@
|
||||
<template>
|
||||
<section class="nearbyGCS">
|
||||
<ai-title title="全部网格员"/>
|
||||
<div class="radarPane">
|
||||
<div class="radar">
|
||||
<div class="indicator"/>
|
||||
</div>
|
||||
<div class="gcsItem" v-for="(op,i) in userList" :key="i" :style="op.style">
|
||||
<i class="dot" :class="{offline:op.offline}"/>
|
||||
<span>{{ op.name }}</span>
|
||||
<ai-icon icon="iconIM"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "nearbyGCS",
|
||||
inject: ['root', 'sta'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
userList: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.getInfo()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo () {
|
||||
this.root.instance.post('/app/appgirdmemberinfo/queryGirdMemberByBuilding', null, {
|
||||
params: {buildingId: this.$route.query.buildingId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.gcsList(res.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
gcsList (data) {
|
||||
this.userList = data.map(e => ({
|
||||
...e,
|
||||
style: {
|
||||
transform: `translate(
|
||||
${Math.round(160 * (Math.random() - 0.5))}px,
|
||||
${Math.round(160 * (Math.random() - 0.5))}px)`}
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nearbyGCS {
|
||||
.radarPane {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.gcsItem {
|
||||
position: absolute;
|
||||
width: 92px;
|
||||
height: 28px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
gap: 8px;
|
||||
|
||||
.AiIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #30BC77;
|
||||
|
||||
&.offline {
|
||||
background: #FF4466;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radar {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background-image: url("https://cdn.cunwuyun.cn/buildSta/radarBg.png");
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform-origin: 100% 100%;
|
||||
background: linear-gradient(190deg, rgba(162, 255, 182, 0.5) 0%, rgba(162, 255, 215, 0) 100%);
|
||||
border-right: 1px solid #A2FFB6;
|
||||
animation: radar 5s linear infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes radar {
|
||||
0% {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<section class="recentEvents">
|
||||
<ai-title title="楼栋近期相关事件"/>
|
||||
<div class="recentEvents-list">
|
||||
<div class="recentEvents-item" v-for="(item, index) in 4" :key="index">
|
||||
<div class="recentEvents-item__top">
|
||||
<i>[已解决]</i>
|
||||
<span>102室与402室矛盾纠纷</span>
|
||||
</div>
|
||||
<div class="recentEvents-item__middle">
|
||||
<span>102室与402室矛盾纠纷</span>
|
||||
<em>[张三]</em>
|
||||
<span>接到了</span>
|
||||
<em>[矛盾调解]</em>
|
||||
<span>任务，事件目前</span>
|
||||
<i>[已完成]</i>
|
||||
</div>
|
||||
<div class="recentEvent-item__bottom">2019-06-18 13:35:45</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "recentEvents"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.recentEvents {
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
|
||||
.recentEvents-list {
|
||||
.recentEvents-item {
|
||||
border-bottom: 1px solid #E6E8EE;
|
||||
background: transparent;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.recentEvent-item__bottom {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
background: #EFF6FF;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.recentEvents-item__top {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.recentEvents-item__middle {
|
||||
margin: 6px 0 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
em {
|
||||
color: #2266FF;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: #2EA222;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<div class="doc-circulation ailist-wrapper">
|
||||
<keep-alive :include="['List']">
|
||||
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/List'
|
||||
import Detail from './components/Detail'
|
||||
import Setting from './components/Setting'
|
||||
|
||||
export default {
|
||||
name: 'AppReportAtWill',
|
||||
label: '随手拍',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {}
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
List,
|
||||
Detail,
|
||||
Setting
|
||||
},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange (data) {
|
||||
if (data.type === 'Detail') {
|
||||
this.component = 'Detail'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type === 'Setting') {
|
||||
this.component = 'Setting'
|
||||
this.params = data.params
|
||||
}
|
||||
|
||||
if (data.type === 'list') {
|
||||
this.component = 'List'
|
||||
this.params = data.params
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (data.isRefresh) {
|
||||
this.$refs.component.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.doc-circulation {
|
||||
height: 100%;
|
||||
background: #F3F6F9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,587 +0,0 @@
|
||||
<template>
|
||||
<ai-detail class="reportAtWillDetail" v-loading="isLoading">
|
||||
<template #title>
|
||||
<ai-title title="随手拍详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||||
<template #rightBtn>
|
||||
<div class="title-btns">
|
||||
<el-button type="primary" icon="iconfont iconPerson_Transfered" @click="isShowForward = true" v-if="detail.eventStatus < 2">指派事件</el-button>
|
||||
<el-button type="primary" icon="iconfont iconRegister" @click="isShowAdd = true" v-if="detail.eventStatus < 2">处理事件</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="detail-content__wrapper">
|
||||
<ai-card class="detail-content__wrapper--left" title="基础信息">
|
||||
<template #content>
|
||||
<ai-wrapper>
|
||||
<ai-info-item label="上报人员" :value="detail.name"></ai-info-item>
|
||||
<ai-info-item label="当前状态" :value="dict.getLabel('clapEventStatus', detail.eventStatus)"></ai-info-item>
|
||||
<ai-info-item label="联系方式">{{ detail.phone }}</ai-info-item>
|
||||
<ai-info-item label="上报时间">{{ detail.createTime }}</ai-info-item>
|
||||
<ai-info-item label="事件类型">{{ detail.groupName }}</ai-info-item>
|
||||
<ai-info-item label="事件描述" isLine>{{ detail.content }}</ai-info-item>
|
||||
<ai-info-item label="现场照片" isLine>
|
||||
<ai-uploader :instance="instance" disabled v-model="detail.files"></ai-uploader>
|
||||
</ai-info-item>
|
||||
<ai-info-item label="所属网格">{{ detail.girdName }}</ai-info-item>
|
||||
<ai-info-item label="事件位置" isLine>
|
||||
<div id="map" style="width: 500px; height: 280px;"></div>
|
||||
</ai-info-item>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</ai-card>
|
||||
<div class="rightZone">
|
||||
<ai-card title="办理进度">
|
||||
<template #content>
|
||||
<el-steps direction="vertical" :active="1">
|
||||
<el-step
|
||||
v-for="(item, i) in processList"
|
||||
:key="i"
|
||||
:title="item.systemExplain"
|
||||
:description="item.doTime">
|
||||
<template #title>
|
||||
<h2 class="step-title" style="font-weight: 500; font-size: 14px;">
|
||||
{{ item.systemExplain }}
|
||||
</h2>
|
||||
</template>
|
||||
<template #description>
|
||||
<p style="color: #888; margin: 0 4px 10px 0; font-size: 14px;">{{ item.doTime }}</p>
|
||||
<div style="color: #444;margin-bottom: 10px;" v-if="item.doExplain">{{ item.doExplain }}</div>
|
||||
<ai-uploader :instance="instance" disabled v-model="item.files"></ai-uploader>
|
||||
</template>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
</template>
|
||||
</ai-card>
|
||||
</div>
|
||||
</div>
|
||||
<ai-dialog
|
||||
:visible.sync="isShowAdd"
|
||||
width="800px"
|
||||
title="事件处理"
|
||||
@closed="onClose"
|
||||
@onConfirm="handleEvent">
|
||||
<el-form class="ai-form" label-width="120px" :model="form" ref="form">
|
||||
<el-form-item label="事件分类" prop="groupId" style="width: 100%;" :rules="[{ required: true, message: '请选择事件分类' }]">
|
||||
<ai-select
|
||||
v-model="form.groupId"
|
||||
placeholder="请选择事件分类"
|
||||
:selectList="dictList">
|
||||
</ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="处理结果" prop="eventStatus" style="width: 100%;" :rules="[{ required: true, message: '请选择处理结果' }]">
|
||||
<el-radio-group v-model="form.eventStatus">
|
||||
<el-radio label="2">已办结</el-radio>
|
||||
<el-radio label="3">已拒绝</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="处理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入处理意见' }]">
|
||||
<el-input type="textarea" :rows="5" :maxlength="500" v-model="form.content" clearable placeholder="请输入处理意见" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="files" style="width: 100%;">
|
||||
<ai-uploader
|
||||
:instance="instance"
|
||||
isShowTip
|
||||
v-model="form.files"
|
||||
:limit="9">
|
||||
</ai-uploader>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
<ai-dialog
|
||||
:visible.sync="isShowForward"
|
||||
width="800px"
|
||||
@close="onClose"
|
||||
title="事件指派"
|
||||
@onConfirm="onForwardConfirm">
|
||||
<el-form class="ai-form" label-width="120px" :model="forwardForm" ref="forwardForm">
|
||||
<el-form-item label="转交" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请选择网格员或网格' }]">
|
||||
<el-input disabled size="small" v-model="forwardForm.name" clearable placeholder="请选择网格员或网格">
|
||||
<template slot="append">
|
||||
<el-button @click="isShowUser = true">选择</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="办理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入办理意见' }]">
|
||||
<el-input type="textarea" :rows="5" :maxlength="500" v-model="forwardForm.content" clearable placeholder="请输入办理意见" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="files" style="width: 100%;">
|
||||
<ai-uploader
|
||||
:instance="instance"
|
||||
v-model="forwardForm.files"
|
||||
isShowTip
|
||||
:limit="9">
|
||||
</ai-uploader>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
<ai-dialog
|
||||
:visible.sync="isShowUser"
|
||||
width="800px"
|
||||
title="选择网格或网格员"
|
||||
@onConfirm="onConfirm">
|
||||
<div class="grid-wrapper">
|
||||
<el-input
|
||||
style="margin-bottom: 10px;"
|
||||
size="small"
|
||||
placeholder="请输入网格名称/网格员姓名/网格员电话"
|
||||
v-model="name" @change="$refs.tree.filter(name)"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
<el-tree
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
:data="tree"
|
||||
highlight-current
|
||||
@current-change="onTreeChange">
|
||||
<div class="tree-container" slot-scope="{ data }">
|
||||
<div class="tree-container__user">
|
||||
<div class="tree-user__item">
|
||||
<span>{{ data.isUser ? `${data.name}-${data.phone}` : data.girdName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tree>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Detail',
|
||||
props: ['dict', 'instance', 'params'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
forwardForm: {
|
||||
content: '',
|
||||
girdId: '',
|
||||
girdName: '',
|
||||
girdMemberId: '',
|
||||
girdMemberName: '',
|
||||
name: ''
|
||||
},
|
||||
isLoading: true,
|
||||
name: '',
|
||||
detail: {},
|
||||
isShowUser: false,
|
||||
eventList: [],
|
||||
isShowAdd: false,
|
||||
userList: [],
|
||||
processList: [],
|
||||
dictList: [],
|
||||
defaultProps: {
|
||||
children: 'girdList',
|
||||
label: 'girdName'
|
||||
},
|
||||
isShowForward: false,
|
||||
tree: [],
|
||||
gridInfo: {},
|
||||
form: {
|
||||
files: [],
|
||||
groupId: '',
|
||||
groupName: '',
|
||||
content: [],
|
||||
eventStatus: '2'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getDict()
|
||||
this.getGirdList()
|
||||
this.dict.load('clapEventStatus').then(() => {
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.instance.post('/app/appclapeventinfo/queryDetailById', null, {
|
||||
params: {id: this.params.id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.detail = res.data
|
||||
this.processList = res.data.processList
|
||||
this.form.groupId = res.data.groupId
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initMap()
|
||||
})
|
||||
this.isLoading = false
|
||||
}
|
||||
}).catch(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
getGirdList() {
|
||||
this.instance.post(`/app/appgirdinfo/listAllByTop`).then(res => {
|
||||
if (res?.data) {
|
||||
this.tree = this.formatList([res.data])
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.form.files = []
|
||||
this.form.groupId = ''
|
||||
this.form.groupName = ''
|
||||
this.form.content = ''
|
||||
this.form.eventStatus = ''
|
||||
this.forwardForm.content = ''
|
||||
this.forwardForm.girdId = ''
|
||||
this.forwardForm.girdName = ''
|
||||
this.forwardForm.girdMemberId = ''
|
||||
this.forwardForm.girdMemberName = ''
|
||||
this.forwardForm.name = ''
|
||||
},
|
||||
|
||||
formatList(list) {
|
||||
let arr = []
|
||||
for (let item of list) {
|
||||
if (item.girdMemberList && item.girdMemberList.length) {
|
||||
let userList = JSON.parse(JSON.stringify(item.girdMemberList)).map(v => {
|
||||
return {
|
||||
...v,
|
||||
isUser: true,
|
||||
girdName: item.girdName,
|
||||
girdId: item.id
|
||||
}
|
||||
})
|
||||
|
||||
item.girdList = [
|
||||
...userList
|
||||
]
|
||||
delete item.girdMemberList
|
||||
}
|
||||
if (item.girdList && item.girdList.length) {
|
||||
this.formatList(item.girdList)
|
||||
}
|
||||
arr.push(item)
|
||||
}
|
||||
return arr
|
||||
},
|
||||
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
|
||||
return (data.girdName && data.girdName.indexOf(value) !== -1) || (data.name && data.name.indexOf(value) !== -1) || (data.name && data.phone.indexOf(value) !== -1)
|
||||
},
|
||||
|
||||
onTreeChange(e) {
|
||||
this.gridInfo = e
|
||||
},
|
||||
|
||||
onForwardConfirm() {
|
||||
this.$refs.forwardForm.validate(v => {
|
||||
if (v) {
|
||||
this.instance.post('/app/appclapeventinfo/transferByManager', {
|
||||
...this.forwardForm,
|
||||
id: this.params.id
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.isShowForward = false
|
||||
this.getDetail()
|
||||
this.$message.success('转交成功!')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
if (this.gridInfo.userId) {
|
||||
this.forwardForm.girdId = this.gridInfo.girdId
|
||||
this.forwardForm.girdName = this.gridInfo.girdName
|
||||
this.forwardForm.girdMemberId = this.gridInfo.id
|
||||
this.forwardForm.girdMemberName = this.gridInfo.name
|
||||
} else {
|
||||
this.forwardForm.girdId = this.gridInfo.id
|
||||
}
|
||||
this.forwardForm.girdName = this.gridInfo.girdName
|
||||
this.forwardForm.name = `${this.gridInfo.girdName}${this.gridInfo.name ? '-' + this.gridInfo.name : ''}`
|
||||
this.isShowUser = false
|
||||
},
|
||||
getDict() {
|
||||
this.instance.post(`/app/appclapeventgroup/list?current=1&size=100000`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.dictList = res.data.records.map(v => {
|
||||
return {
|
||||
dictValue: v.id,
|
||||
dictName: v.groupName
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$confirm('确定关闭该事件？').then(() => {
|
||||
this.instance.post(`/app/appmininotice/delete?ids=${this.params.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh
|
||||
})
|
||||
},
|
||||
|
||||
onChange(e) {
|
||||
this.instance.post(`/app/appvillagerintegralrule/list?size=1000&classification=${e}&ruleStatus=1`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form.ruleId = ''
|
||||
this.eventList = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
initMap() {
|
||||
let {lng, lat} = this.detail
|
||||
let center = [lng, lat]
|
||||
AMapLoader.load({
|
||||
key: 'b553334ba34f7ac3cd09df9bc8b539dc',
|
||||
version: '2.0'
|
||||
}).then(AMap => {
|
||||
let map = new AMap.Map('map', {
|
||||
center,
|
||||
zoom: 14
|
||||
})
|
||||
let marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(lng, lat),
|
||||
title: this.detail.address
|
||||
})
|
||||
map.add(marker)
|
||||
})
|
||||
},
|
||||
|
||||
handleEvent() {
|
||||
this.$refs.form.validate(v => {
|
||||
if (v) {
|
||||
this.instance.post('/app/appclapeventinfo/finishByManager', {
|
||||
...this.form,
|
||||
groupName: this.dictList.filter(v => v.dictValue === this.form.groupId)[0].dictName,
|
||||
id: this.params.id
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.isShowAdd = false
|
||||
this.getDetail()
|
||||
this.$message.success('处理成功!')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.reportAtWillDetail {
|
||||
height: 100%;
|
||||
|
||||
.grid-wrapper {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.title-btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
::v-deep .el-tree {
|
||||
background: transparent;
|
||||
|
||||
.el-tree-node__expand-icon.is-leaf {
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-tree__empty-text {
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-tree-node__children .el-tree-node__content {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
background: #E8EFFF;
|
||||
color: #222222;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.is-current > .el-tree-node__content {
|
||||
&:hover {
|
||||
background: #2266FF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
background: #2266FF;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-steps {
|
||||
::v-deep .el-step__icon {
|
||||
font-size: 12px;
|
||||
color: #555555;
|
||||
border-color: #d0d4dc;
|
||||
}
|
||||
|
||||
::v-deep .el-step__head.is-finish {
|
||||
.el-step__icon.is-text {
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
background: #2266ff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-step__line {
|
||||
background-color: #d0d4dc;
|
||||
}
|
||||
}
|
||||
|
||||
.imgs {
|
||||
font-size: 0;
|
||||
|
||||
img {
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 4px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .report-dialog {
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-step__head.is-process {
|
||||
color: #555;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
::v-deep .is-finish h2 {
|
||||
color: #2266ff;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.detail-content__wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.detail-content__wrapper--left {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ai-detail__content {
|
||||
background: #f3f6f9;
|
||||
|
||||
.ai-detail__content--wrapper {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > .el-card {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rightZone {
|
||||
width: 400px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-card {
|
||||
.el-card__header {
|
||||
padding: 12px 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#amap {
|
||||
width: 466px;
|
||||
height: 232px;
|
||||
}
|
||||
|
||||
.el-steps {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.imgFormItem > .el-form-item__content {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.el-image__inner {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,136 +0,0 @@
|
||||
<template>
|
||||
<ai-list>
|
||||
<template #title>
|
||||
<ai-title title="随手拍" isShowBottomBorder>
|
||||
<el-button type="primary" slot="rightBtn" @click="toSetting">设置</el-button>
|
||||
</ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<ai-select
|
||||
v-model="search.eventStatus"
|
||||
clearable
|
||||
placeholder="处理状态"
|
||||
:selectList="dict.getDict('clapEventStatus')"
|
||||
@change="search.current = 1, getList()">
|
||||
</ai-select>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
v-model="search.content"
|
||||
class="search-input"
|
||||
size="small"
|
||||
v-throttle="() => {search.current = 1, getList()}"
|
||||
placeholder="请输入内容描述/上报居民/联系方式"
|
||||
clearable
|
||||
@change="getList"
|
||||
@clear="search.current = 1, search.content = '', getList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="total" :current.sync="search.current" :size.sync="search.size" @getList="getList">
|
||||
<el-table-column slot="options" label="操作" fixed="right" width="120" align="center">
|
||||
<div class="table-options" slot-scope="{row}">
|
||||
<el-button type="text" title="详情" @click="toDetail(row.id)">详情</el-button>
|
||||
</div>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
label: "随手拍",
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
userList: [],
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
eventStatus: '',
|
||||
content: ''
|
||||
},
|
||||
total: 0,
|
||||
tableData: [],
|
||||
content: '',
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
colConfigs() {
|
||||
return [
|
||||
{ prop: 'content', label: '内容描述', width: '300px' },
|
||||
{ prop: 'groupName', label: '事件类型', align: 'center' },
|
||||
{ prop: 'girdName', label: '所属网格', align: 'center' },
|
||||
{ prop: 'createTime', label: '上报时间', align: 'center' },
|
||||
{ prop: 'name', label: '上报居民', align: 'center' },
|
||||
{ prop: 'phone', label: '联系方式', align: 'center' },
|
||||
{ prop: 'eventStatus', label: '处理状态', align: 'center', formart: v => this.dict.getLabel('clapEventStatus', v) },
|
||||
{ prop: 'processTime', label: '处理时长', align: 'center' },
|
||||
{ slot: 'options' }
|
||||
]
|
||||
},
|
||||
|
||||
handleStatusOps() {
|
||||
return this.dict.getDict("reportAtWillHandleStatus").map(e => ({label: e.dictName, value: e.dictValue}))
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.dict.load('clapEventStatus').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList () {
|
||||
this.instance.post(`/app/appclapeventinfo/list`, null, {
|
||||
params: {
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toDetail (id) {
|
||||
this.$emit('change', {
|
||||
type: 'Detail',
|
||||
params: {
|
||||
id: id || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toSetting () {
|
||||
this.$emit('change', {
|
||||
type: 'Setting',
|
||||
params: {
|
||||
id: ''
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,178 +0,0 @@
|
||||
<template>
|
||||
<ai-list class="notice">
|
||||
<template slot="title">
|
||||
<ai-title isShowBack isShowBottomBorder title="事件类型" @onBackClick="cancel(false)"></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar class="search-bar">
|
||||
<template #left>
|
||||
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShowAdd = true">添加事件类型</el-button>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input
|
||||
v-model="search.groupName"
|
||||
class="search-input"
|
||||
size="small"
|
||||
v-throttle="() => {search.current = 1, getList()}"
|
||||
placeholder="请输入事件类型名称"
|
||||
clearable
|
||||
@change="getList"
|
||||
@clear="search.current = 1, search.groupName = '', getList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
style="margin-top: 6px;"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@getList="getList">
|
||||
<el-table-column slot="tags" label="标签">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-tags">
|
||||
<el-tag type="info" v-for="(item, index) in row.tags" size="small" :key="index">{{ item }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
|
||||
<div class="table-options" slot-scope="{ row }">
|
||||
<el-button type="text" @click="edit(row)">编辑</el-button>
|
||||
<el-button type="text" @click="remove(row.id)">删除</el-button>
|
||||
</div>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
<ai-dialog
|
||||
:visible.sync="isShowAdd"
|
||||
width="780px"
|
||||
height="580px"
|
||||
:title="id ? '编辑事件类型' : '添加事件类型'"
|
||||
@close="onClose"
|
||||
@onConfirm="onConfirm">
|
||||
<el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
|
||||
<el-form-item label="事件类型" prop="groupName" style="width: 100%;" :rules="[{ required: true, message: '请输入事件类型名称', trigger: 'blur' }]">
|
||||
<el-input size="small" :maxlength="10" show-word-limit placeholder="请输入事件类型名称" v-model="form.groupName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="showIndex" style="width: 100%;" :rules="[{ required: true, message: '请输入排序', trigger: 'blur' }]">
|
||||
<el-input-number size="small" v-model="form.showIndex" :min="1" :max="100" label="请输入排序"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'List',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
groupName: ''
|
||||
},
|
||||
form: {
|
||||
groupName: '',
|
||||
showIndex: ''
|
||||
},
|
||||
id: '',
|
||||
isShowAdd: false,
|
||||
total: 0,
|
||||
colConfigs: [
|
||||
{prop: 'groupName', label: '事件类型', align: 'left'},
|
||||
{prop: 'showIndex', label: '排序', align: 'center'},
|
||||
{slot: 'options', label: '操作'}
|
||||
],
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance.post(`/app/appclapeventgroup/list`, null, {
|
||||
params: {
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
edit (e) {
|
||||
this.id = e.id
|
||||
this.form.groupName = e.groupName
|
||||
this.form.showIndex = ''
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.isShowAdd = true
|
||||
})
|
||||
},
|
||||
|
||||
onClose () {
|
||||
this.id = ''
|
||||
this.form.showIndex = ''
|
||||
this.form.groupName = ''
|
||||
},
|
||||
|
||||
onConfirm () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance.post(`/app/appclapeventgroup/addOrUpdate`, {
|
||||
...this.form,
|
||||
id: this.id || null
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success('添加成功')
|
||||
this.isShowAdd = false
|
||||
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
cancel (isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh
|
||||
})
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appclapeventgroup/delete?ids=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,163 +0,0 @@
|
||||
<template>
|
||||
<section class="AiUserPicker">
|
||||
<div v-if="$slots.default " @click="handleSelect">
|
||||
<slot/>
|
||||
</div>
|
||||
<div class="AiWechatSelecter-userlist" v-else>
|
||||
<div class="user-item" v-for="(item, index) in value" :key="index">
|
||||
<img :src="getAvatar(item)">
|
||||
<div class="itemLabel" v-text="item.name"/>
|
||||
<i class="iconfont iconwarning" @click="removeUser(index)"/>
|
||||
</div>
|
||||
<div class="user-add" @click="handleSelect">
|
||||
<div class="userlist-add__icon">
|
||||
<i class="el-icon-plus"/>
|
||||
</div>
|
||||
<span>选择</span>
|
||||
</div>
|
||||
</div>
|
||||
<ai-dialog title="选择人员" :visible.sync="dialog" width="1100px" @onConfirm="submit" @close="selected=[]">
|
||||
<ai-table-select :instance="instance" v-model="selected" multiple action="/app/wxcp/wxuser/list?status=1" valueObj extra="mobile"/>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "AiUserPicker",
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
props: {
|
||||
value: {default: () => []},
|
||||
instance: Function,
|
||||
multiple: {default: true},
|
||||
props: {
|
||||
default: () => ({
|
||||
label: 'name',
|
||||
id: 'id'
|
||||
})
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
selected: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
removeUser(i) {
|
||||
let list = this.$copy(this.value)
|
||||
list.splice(i, 1)
|
||||
this.$emit("change", list)
|
||||
},
|
||||
submit() {
|
||||
this.$emit("change", this.selected)
|
||||
this.dialog = false
|
||||
},
|
||||
handleSelect() {
|
||||
this.selected = this.$copy(this.value)
|
||||
this.dialog = true
|
||||
},
|
||||
getAvatar(row){
|
||||
return row.avatar||row.photo||'https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiUserPicker {
|
||||
.AiWechatSelecter-userlist {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.user-add {
|
||||
margin-bottom: 6px;
|
||||
|
||||
.userlist-add__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #CCCCCC;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #CCCCCC;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-item {
|
||||
position: relative;
|
||||
margin-bottom: 6px;
|
||||
margin-right: 16px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #CCCCCC;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 2px;
|
||||
font-size: 16px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transform: translate(40%, -100%);
|
||||
height: 16px;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.itemLabel {
|
||||
display: block;
|
||||
width: 60px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user