From d16d10d94fddff86bdfd87113e7fd2cebe8b7cd7 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 24 Jan 2024 18:15:06 +0800
Subject: [PATCH] 居民监管样式调整
---
src/views/userHouse/houseList.vue | 233 ++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 170 insertions(+), 63 deletions(-)
diff --git a/src/views/userHouse/houseList.vue b/src/views/userHouse/houseList.vue
index 7140834..0ddc5df 100644
--- a/src/views/userHouse/houseList.vue
+++ b/src/views/userHouse/houseList.vue
@@ -8,40 +8,37 @@
@search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
@size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
<template slot="menuLeft">
- <el-button type="danger" size="small" plain icon="el-icon-delete" v-if="permission.user_delete"
+ <el-button type="danger" size="small" plain icon="el-icon-delete" v-if="permission.house_del"
@click="handleDelete">删 除
</el-button>
- <el-button type="success" size="small" plain v-if="userInfo.role_name.includes('admin')"
+ <!-- <el-button type="success" size="small" plain v-if="userInfo.role_name.includes('admin')"
icon="el-icon-upload2" @click="handleImport">导入
</el-button>
<el-button type="warning" size="small" plain v-if="userInfo.role_name.includes('admin')"
icon="el-icon-download" @click="handleExport">导出
- </el-button>
+ </el-button> -->
+ <!-- <el-button type="success" size="small" plain v-if="permission.house_import" icon="el-icon-upload2"
+ @click="handleImport">导入
+ </el-button> -->
+ <!-- <el-button type="warning" size="small" plain v-if="permission.house_export" icon="el-icon-download"
+ @click="handleExport">导出
+ </el-button> -->
</template>
- <template slot-scope="scope" slot="menu">
- <el-button type="text" icon="el-icon-circle-plus-outline" size="small"
- v-if="permission.househould_manager" @click="handleHouseholdManager(scope.row)">住户管理
+ <template slot-scope="{row}" slot="location">
+ <span v-text="showLocation(row.location)"></span>
+ </template>
+
+ <template slot-scope="{row, size}" slot="menu">
+ <el-button :size="size" type="text" icon="el-icon-circle-plus-outline"
+ v-if="permission.house_manager" @click="handleHouseholdManager(row)">住户管理
</el-button>
- <el-button type="text" icon="el-icon-circle-plus-outline" size="small"
- v-if="permission.househould_manager" @click="manageLabel(scope.row)">标签
+ <el-button :size="size" type="text" icon="el-icon-circle-plus-outline" v-if="permission.house_tag"
+ @click="manageLabel(row)">标签
</el-button>
</template>
- <template slot-scope="{row}" slot="tenantName">
- <el-tag>{{ row.tenantName }}</el-tag>
- </template>
- <template slot-scope="{row}" slot="roleName">
- <el-tag>{{ row.roleName }}</el-tag>
- </template>
- <template slot-scope="{row}" slot="deptName">
- <el-tag>{{ row.deptName }}</el-tag>
- </template>
- <template slot-scope="{row}" slot="userTypeName">
- <el-tag>{{ row.userTypeName }}</el-tag>
- </template>
-
- <template slot-scope="{row}" slot="phone">
- <el-button type="text" @click="showStringDispose(row, 'phoneflag')">
+ <template slot-scope="{row, size}" slot="phone">
+ <el-button :size="size" type="text" @click="showStringDispose(row, 'phoneflag')">
{{ textDispose(row, 'phoneflag', 'phone') }}
</el-button>
</template>
@@ -57,15 +54,15 @@
</el-tree>
<span slot="footer" class="dialog-footer">
- <el-button @click="roleBox = false">取 消</el-button>
- <el-button type="primary" @click="submitRole">确 定</el-button>
+ <el-button size="small" @click="roleBox = false">取 消</el-button>
+ <el-button size="small" type="primary" @click="submitRole">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="标签管理" append-to-body :visible.sync="labelFlag" center width="600px">
<div id="" class="grid-container2">
- <div class="grid-item" :style="{ backgroundColor: item.color }" v-for="(item, index) in labelData"
- :key="index" @click="changLabel(item)">
+ <div class="grid-item" v-for="(item, index) in labelData" :key="index" @click="changLabel(item)">
+ {{ item.color }}
{{ item.name }}
</div>
</div>
@@ -80,8 +77,8 @@
<avue-form :option="labelOption" v-model="labelForm" :submit="onsubmit">
</avue-form>
<span slot="footer" class="dialog-footer">
- <el-button @click="editLabelFlge = false">取 消</el-button>
- <el-button type="primary" @click="onsubmit">确 定</el-button>
+ <el-button size="small" @click="editLabelFlge = false">取 消</el-button>
+ <el-button size="small" type="primary" @click="onsubmit">确 定</el-button>
</span>
</el-dialog>
@@ -94,6 +91,7 @@
</template>
</avue-form>
</el-dialog>
+
<el-dialog title="住户管理" append-to-body :visible.sync="householdManagerVisible" width="70%" height="60%">
<householdManager ref="householdManager" />
</el-dialog>
@@ -101,8 +99,10 @@
</el-col>
</el-row>
</template>
-
+
<script>
+import { setLabelColor } from '@/util/util'
+
import {
getList,
remove,
@@ -136,7 +136,6 @@
} from "@/util/date"
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
-import func from "@/util/func"
import householdManager from "./components/householdManager"
import Qs from "qs"
export default {
@@ -144,6 +143,19 @@
householdManager
},
data () {
+
+ //手机号格式校验
+ let validatorPhone = function (rule, value, callback) {
+ if (value) {
+ if (!/^1[3456789]\d{9}$/.test(value)) {
+ callback(new Error('手机号格式有误！'))
+ } else {
+ callback()
+ }
+ }
+ callback()
+ }
+
return {
labelData: [],
labelForm: {},
@@ -160,16 +172,16 @@
row: true,
dicData: [{
label: '撤销',
- value: '#EBEDF0'
+ value: '#999'
}, {
label: '绿',
- value: '#30D17C'
+ value: 'green'
}, {
label: '黄',
- value: '#FFB42B'
+ value: 'yellow'
}, {
label: '红',
- value: '#EA1F1F'
+ value: 'red'
}],
rules: [{
required: true,
@@ -198,18 +210,21 @@
total: 0
},
option: {
+ labelWidth: 120,
+ searchLabelWidth: 96,
+ searchShow: true,
+ searchMenuSpan: 3,
+ menuWidth: 350,
+
height: 'auto',
calcHeight: 80,
tip: false,
- searchShow: true,
- searchMenuSpan: 3,
border: true,
index: true,
selection: true,
viewBtn: true,
dialogType: 'drawer',
dialogClickModal: false,
- menuWidth: 340,
column: [
{
label: "房屋编号",
@@ -219,18 +234,42 @@
display: false
},
{
- label: "地址",
+ // hide: true,
+ width: 220,
+ overHidden: true,
+ label: '地址',
+ parent: false,
prop: "address",
- width: 180,
- display: false
+ display: false,
+ searchLabelWidth: 66,
+ searchSpan: 4,
+ search: true,
+ },
+ {
+ overHidden: true,
+ slot: true,
+ label: "地址",
+ prop: "location",
+ type: 'map',
+ disabled: false,
+ dataType: "string",
+ searchLabelWidth: 66,
+ hide: true,
+ value: [117.966460, 28.431002, ""],
+ rules: [
+ {
+ required: true,
+ message: "请选择巡查地址",
+ trigger: "blur",
+ },
+ ],
},
{
+ hide: true,
parent: false,
label: "小区名称",
- prop: "districtName",
- searchSpan: 4,
- search: true,
+ prop: "districtCode",
type: 'tree',
dicUrl: `/api/blade-district/district/getDistrictTree`,
props: {
@@ -244,22 +283,34 @@
},
{
+ width: 220,
+ overHidden: true,
+ label: '小区名称',
+ parent: false,
+ prop: "districtName",
+ searchSpan: 4,
+ display: false,
+ search: true,
+ },
+
+ {
+ width: 110,
+ label: "所属街道",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
- width: 96,
- label: "所属街道",
prop: "townStreetName",
search: true,
searchSpan: 4
},
{
+ width: 156,
+ overHidden: true,
+ label: "所属社区",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
- width: 160,
- label: "所属社区",
prop: "neiName",
search: true,
searchSpan: 4,
@@ -272,18 +323,17 @@
{
hide: true,
+ parent: false,
label: "所属社区",
prop: "neiCode",
search: false,
- width: 150,
type: "tree",
dicUrl: "/api/blade-system/region/tree",
props: {
label: "name",
value: "id",
},
- parent: false,
- cascader: ["gridId"],
+ cascader: ["gridCode"],
rules: [
{
required: true,
@@ -294,11 +344,12 @@
},
{
+ width: 110,
+ overHidden: true,
+ label: "所属网格",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
- width: 96,
- label: "所属网格",
prop: "gridName",
rules: [{
required: true,
@@ -310,12 +361,12 @@
{
hide: true,
label: "所属网格",
- prop: "gridId",
+ prop: "gridCode",
type: "tree",
cell: true,
props: {
label: "gridName",
- value: "id",
+ value: "gridCode",
},
dicUrl:
"/api/blade-grid/grid/getGridList?communityCode={{neiCode}}",
@@ -331,7 +382,7 @@
{
label: "房屋照片",
prop: "imageUrls",
- width: 80,
+ width: 110,
type: "upload",
listType: "picture-card",
dataType: "string",
@@ -345,12 +396,20 @@
span: 24,
},
+
{
- width: 110,
+ width: 120,
label: "电话",
prop: "phone",
slot: true,
+ rules: [
+ {
+ validator: validatorPhone,
+ trigger: 'blur'
+ }
+ ],
},
+
{
label: "幢",
prop: "building",
@@ -392,6 +451,7 @@
},
{
width: 210,
+ overHidden: true,
label: "标签",
prop: "userHouseLabelVOList",
display: false
@@ -449,14 +509,30 @@
}
}
},
- watch: {},
+ watch: {
+ 'form.source': {
+ handler (newData) {
+
+ let locationColumn = this.findObject(
+ this.option.column,
+ 'location'
+ )
+
+ if (newData == 1) {
+ locationColumn.disabled = true
+ } else {
+ locationColumn.disabled = false
+ }
+ },
+ },
+ },
computed: {
...mapGetters(["userInfo", "permission"]),
permissionList () {
return {
addBtn: this.vaildData(this.permission.house_add, true),
viewBtn: this.vaildData(this.permission.house_view, true),
- delBtn: this.vaildData(this.permission.house_delete, true),
+ delBtn: this.vaildData(this.permission.house_del, true),
editBtn: this.vaildData(this.permission.house_edit, true)
}
},
@@ -474,15 +550,41 @@
}
}
},
+ showLocation () {
+ return (data) => {
+ if (data != null && data.indexOf(',') != -1) {
+ data = data.split(',')
+
+ return data[2]
+ } else {
+ return data || ''
+ }
+ }
+ },
labelDispose () {
return (list) => {
return list.map(item => item.labelName).join(',')
}
+ },
+
+ getColor () {
+ return (data) => {
+ return setLabelColor(data)
+ }
}
},
mounted () { },
methods: {
+ locationDispose (data) {
+ data = data.split(',')
+
+ return {
+ lng: data[0],
+ lat: data[1],
+ address: data[2]
+ }
+ },
onsubmit () {
if (this.labelForm.color === '#EBEDF0') {
@@ -523,6 +625,7 @@
this.labelForm.remark = item.remark
},
manageLabel (item) {
+ this.loading = true
this.currentRow = item
this.labelFlag = true
let params = {
@@ -531,7 +634,6 @@
// 查询标签
getLabelList(Object.assign(params)).then(res => {
const data = res.data.data
- this.loading = false
// 查询详情
getDetatils({
houseCode: item.houseCode
@@ -552,6 +654,7 @@
})
}
this.labelData = data
+ this.loading = false
})
})
},
@@ -573,7 +676,8 @@
row.imageUrls = urls.join(",")
}
- add(row).then(() => {
+ add({ ...row, ...this.locationDispose(row.location) }
+ ).then(() => {
this.initFlag = false
this.onLoad(this.page)
this.$message({
@@ -597,7 +701,7 @@
row.imageUrls = urls.join(",")
}
- update(row).then(() => {
+ update({ ...row, ...this.locationDispose(row.location) }).then(() => {
this.initFlag = false
this.onLoad(this.page)
this.$message({
@@ -707,6 +811,8 @@
}).then(res => {
this.form = res.data.data
+ this.form.location = [this.form.lng, this.form.lat, this.form.address].join(',')
+
if (this.form.imageUrls) {
if (this.form.imageUrls.length > 0) {
var urls = []
@@ -733,6 +839,7 @@
},
onLoad (page, params = {}) {
this.loading = true
+
getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
const data = {
...res.data.data,
@@ -766,7 +873,7 @@
}
}
</script>
-
+
<style>
.box {
height: 800px;
--
Gitblit v1.9.3