From 5e2aafeede13d337380f736567caf74f49713be7 Mon Sep 17 00:00:00 2001
From: linwe <872216996@qq.com>
Date: Fri, 09 Aug 2024 14:38:32 +0800
Subject: [PATCH] 代码优化
---
src/views/userHouse/houseList.vue | 627 +++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 474 insertions(+), 153 deletions(-)
diff --git a/src/views/userHouse/houseList.vue b/src/views/userHouse/houseList.vue
index 4220ab9..0c7f79c 100644
--- a/src/views/userHouse/houseList.vue
+++ b/src/views/userHouse/houseList.vue
@@ -8,36 +8,43 @@
@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')"
- 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 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 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 slot-scope="{row, size}" slot="phone">
+ <el-button :size="size" type="text" @click="showStringDispose(row, 'phoneflag')">
+ {{ textDispose(row, 'phoneflag', 'phone') }}
+ </el-button>
</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 slot-scope="{row}" slot="userHouseLabelVOList">
+ {{ labelDispose(row.userHouseLabelVOList) }}
</template>
</avue-crud>
<el-dialog title="用户角色配置" append-to-body :visible.sync="roleBox" width="345px">
@@ -47,16 +54,16 @@
</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 "
- @click="changLabel(item)">
- {{item.name}}
+ <div class="grid-item" :style="{ backgroundColor: getColor(item.color) }" v-for="(item, index) in labelData"
+ :key="index" @click="changLabel(item)">
+ {{ item.name }}
</div>
</div>
<!-- <span slot="footer" class="dialog-footer">
@@ -65,12 +72,12 @@
</span> -->
</el-dialog>
- <el-dialog :title="'编辑标签 ' + currentLabel.name" append-to-body :visible.sync="editLabelFlge" width="655px">
+ <el-dialog :title="'编辑标签 ' + currentLabel.name" append-to-body :visible.sync="editLabelFlge" width="655px">
<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>
@@ -83,6 +90,7 @@
</template>
</avue-form>
</el-dialog>
+
<el-dialog title="住户管理" append-to-body :visible.sync="householdManagerVisible" width="70%" height="60%">
<householdManager ref="householdManager" />
</el-dialog>
@@ -93,46 +101,62 @@
<script>
import {
+ setHouseLabelColor
+ } from '@/util/util'
+
+ import {
getList,
remove,
add,
update,
getDetatil,
getDetatils
- } from "@/api/userHouse/list/house.js";
+ } from "@/api/userHouse/list/house.js"
import {
removeHouseholdLabel,
- saveOrUpdateHouseholdLabel
- } from "@/api/userHouse/list/userHouseList.js";
+ saveOrUpdateHouseLabelInfo
+ } from "@/api/userHouse/list/userHouseList.js"
import {
getLabelList,
} from '@/api/label/label'
import {
exportBlob
- } from "@/api/common";
+ } from "@/api/common"
import {
mapGetters
- } from "vuex";
- import website from '@/config/website';
+ } from "vuex"
+ import website from '@/config/website'
import {
getToken
- } from '@/util/auth';
+ } from '@/util/auth'
import {
downloadXls
- } from "@/util/util";
+ } from "@/util/util"
import {
dateNow
- } 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";
+ } from "@/util/date"
+ import NProgress from 'nprogress'
+ import 'nprogress/nprogress.css'
+ import householdManager from "./components/householdManager"
+ import Qs from "qs"
export default {
components: {
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: {},
@@ -149,16 +173,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,
@@ -187,18 +211,21 @@
total: 0
},
option: {
+ labelWidth: 120,
+ searchLabelWidth: 96,
+ searchShow: true,
+ searchMenuSpan: 3,
+ menuWidth: 350,
+
height: 'auto',
calcHeight: 80,
tip: false,
- searchShow: true,
- searchMenuSpan: 6,
border: true,
index: true,
selection: true,
viewBtn: true,
dialogType: 'drawer',
dialogClickModal: false,
- menuWidth: 280,
column: [{
label: "房屋编号",
prop: "houseCode",
@@ -207,44 +234,184 @@
display: false
},
{
- label: "地址",
+ // hide: true,
+ width: 220,
+ overHidden: true,
+ label: '地址',
+ parent: false,
prop: "address",
- width: 180,
- display: false
- },
- {
- label: "小区",
- prop: "districtName",
+ display: false,
+ searchLabelWidth: 46,
+ searchSpan: 4,
search: true,
- rules: [{
- required: true,
- message: "请选择小区",
- trigger: "blur",
- }, ],
},
{
- label: "手机",
- prop: "phone",
+ 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: "请输入绑定手机",
+ message: "请选择巡查地址",
trigger: "blur",
}, ],
},
+
+ {
+ hide: true,
+ parent: false,
+ label: "小区名称",
+ prop: "districtCode",
+ type: 'tree',
+ dicUrl: `/api/blade-district/district/getDistrictTree?id={{key}}`,
+ props: {
+ label: "name",
+ value: "id"
+ },
+ defaultExpandedKeys: ["361102003"],
+ span: 12,
+ width: 220,
+ overHidden: true,
+ },
+
+ {
+ width: 220,
+ overHidden: true,
+ label: '小区名称',
+ parent: false,
+ prop: "districtName",
+ searchSpan: 4,
+ display: false,
+ search: true,
+ },
+
+ {
+ width: 110,
+ label: "所属街道",
+ addDisplay: false,
+ editDisplay: false,
+ viewDisplay: false,
+ prop: "townStreetName",
+ search: true,
+ searchSpan: 4
+ },
+
+ {
+ width: 156,
+ overHidden: true,
+ label: "所属社区",
+ addDisplay: false,
+ editDisplay: false,
+ viewDisplay: false,
+ prop: "neiName",
+ search: true,
+ searchSpan: 4,
+ rules: [{
+ required: true,
+ message: "请选择所属社区",
+ trigger: "blur",
+ }],
+ },
+
+ {
+ hide: true,
+ parent: false,
+ label: "所属社区",
+ prop: "neiCode",
+ search: false,
+ type: "tree",
+ dicUrl: "/api/blade-system/region/treeToCommunity",
+ props: {
+ label: "name",
+ value: "id",
+ },
+ cascader: ["gridCode"],
+ rules: [{
+ required: true,
+ message: "请选择所属社区",
+ trigger: "blur",
+ }, ],
+ },
+
+ {
+ width: 110,
+ overHidden: true,
+ label: "所属网格",
+ addDisplay: false,
+ editDisplay: false,
+ viewDisplay: false,
+ prop: "gridName",
+ rules: [{
+ required: true,
+ message: "请选择所属网格",
+ trigger: "blur",
+ }],
+ },
+
+ {
+ hide: true,
+ label: "所属网格",
+ prop: "gridCode",
+ type: "tree",
+ cell: true,
+ props: {
+ label: "gridName",
+ value: "gridCode",
+ },
+ dicUrl: "/api/blade-grid/grid/getGridList?communityCode={{neiCode}}",
+ rules: [{
+ required: true,
+ message: "请选择所属网格",
+ trigger: "blur",
+ }, ],
+ },
+
+ {
+ label: "房屋照片",
+ prop: "imageUrls",
+ width: 110,
+ type: "upload",
+ listType: "picture-card",
+ dataType: "string",
+ multiple: true,
+ action: "/api/blade-resource/oss/endpoint/put-file",
+ propsHttp: {
+ res: "data",
+ name: 'name',
+ url: "link",
+ },
+ span: 24,
+ },
+
+
+ {
+ width: 120,
+ label: "电话",
+ prop: "phone",
+ slot: true,
+ rules: [{
+ validator: validatorPhone,
+ trigger: 'blur'
+ }],
+ },
+
{
label: "幢",
prop: "building",
- hide: true
},
{
label: "单元",
prop: "unit",
- hide: true
},
{
label: "室",
prop: "room",
- hide: true
},
{
label: "楼层",
@@ -272,6 +439,13 @@
type: "datetime",
format: "yyyy-MM-dd",
valueFormat: "yyyy-MM-dd",
+ },
+ {
+ width: 210,
+ overHidden: true,
+ label: "标签",
+ prop: "userHouseLabelVOList",
+ display: false
},
]
},
@@ -324,25 +498,87 @@
}
]
}
- };
+ }
},
- 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)
- };
+ }
+ },
+
+ textDispose() {
+ return (row, flag, type) => {
+ if (row[flag] || row[type] == null) {
+ return row[type]
+ } else {
+ if (type == 'idCard') {
+ return row[type].replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
+ } else {
+ return row[type].replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
+ }
+ }
+ }
+ },
+ 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 setHouseLabelColor(data)
+ }
}
},
mounted() {},
methods: {
+ locationDispose(data) {
+ data = data.split(',')
+
+ return {
+ lng: data[0],
+ lat: data[1],
+ address: data[2]
+ }
+ },
onsubmit() {
- if (this.labelForm.color === '#EBEDF0') {
+ if (this.labelForm.color === '#999') {
let params = {
householdId: this.currentRow.id,
labelId: this.currentLabel.id
@@ -351,35 +587,58 @@
this.$message({
type: "success",
message: "操作成功!"
- });
+ })
this.editLabelFlge = false
this.manageLabel(this.currentRow)
- this.loading = false;
+ this.loading = false
})
} else {
this.labelForm.houseCode = this.currentRow.houseCode
this.labelForm.householdId = this.currentRow.id
this.labelForm.labelId = this.currentLabel.id
this.labelForm.lableType = 2
- saveOrUpdateHouseholdLabel(this.labelForm).then(res => {
+ saveOrUpdateHouseLabelInfo(this.labelForm).then(res => {
this.$message({
type: "success",
message: "操作成功!"
- });
+ })
this.editLabelFlge = false
this.manageLabel(this.currentRow)
- this.loading = false;
+ this.loading = false
})
}
},
changLabel(item) {
- this.editLabelFlge = true
- this.currentLabel = item;
- this.labelForm.color = item.color
- this.labelForm.remark = item.remark
+ // this.editLabelFlge = true
+ this.currentLabel = item
+ // this.labelForm.color = item.color
+ // this.labelForm.remark = item.remark
+ // console.log(item,9999)
+ if (item.name == '闲置') {
+ this.labelForm.color = 'green'
+ }
+ if (item.name == '自住') {
+ this.labelForm.color = 'blue'
+ }
+ if (item.name == '出租') {
+ this.labelForm.color = 'yellow'
+ }
+ this.labelForm.houseCode = this.currentRow.houseCode
+ this.labelForm.labelId = this.currentLabel.id
+ this.labelForm.lableType = 2
+ saveOrUpdateHouseLabelInfo(this.labelForm).then(res => {
+ this.$message({
+ type: "success",
+ message: "操作成功!"
+ })
+ // this.editLabelFlge = false
+ this.manageLabel(this.currentRow)
+ this.loading = false
+ })
},
manageLabel(item) {
+ this.loading = true
this.currentRow = item
this.labelFlag = true
let params = {
@@ -387,15 +646,14 @@
}
// 查询标签
getLabelList(Object.assign(params)).then(res => {
- const data = res.data.data;
- this.loading = false;
+ const data = res.data.data
// 查询详情
getDetatils({
houseCode: item.houseCode
}).then(res => {
if (res.data.data) {
- this.userHouseLabelVOList = res.data.data.userHouseLabelVOList;
- this.loading = false;
+ this.userHouseLabelVOList = res.data.data.userHouseLabelVOList
+ this.loading = false
// 将细类放到一起
data.forEach(f => {
if (this.userHouseLabelVOList.length > 0) {
@@ -408,9 +666,10 @@
}
})
}
- this.labelData = data;
- });
- });
+ this.labelData = data
+ this.loading = false
+ })
+ })
},
handleHouseholdManager(row) {
var that = this
@@ -420,32 +679,58 @@
})
},
rowSave(row, done, loading) {
- add(row).then(() => {
- this.initFlag = false;
- this.onLoad(this.page);
+ if (row.imageUrls.length > 0) {
+ var urls = []
+ var split = row.imageUrls.split(",")
+ split.forEach(url => {
+ var names = url.split("jczz/")
+ urls.push(names[1])
+ })
+ row.imageUrls = urls.join(",")
+ }
+
+ add({
+ ...row,
+ ...this.locationDispose(row.location)
+ }).then(() => {
+ this.initFlag = false
+ this.onLoad(this.page)
this.$message({
type: "success",
message: "操作成功!"
- });
- done();
+ })
+ done()
}, error => {
- window.console.log(error);
- loading();
- });
+ window.console.log(error)
+ loading()
+ })
},
rowUpdate(row, index, done, loading) {
- update(row).then(() => {
- this.initFlag = false;
- this.onLoad(this.page);
+ if (row.imageUrls.length > 0) {
+ var urls = []
+ var split = row.imageUrls.split(",")
+ split.forEach(url => {
+ var names = url.split("jczz/")
+ urls.push(names[1])
+ })
+ row.imageUrls = urls.join(",")
+ }
+
+ update({
+ ...row,
+ ...this.locationDispose(row.location)
+ }).then(() => {
+ this.initFlag = false
+ this.onLoad(this.page)
this.$message({
type: "success",
message: "操作成功!"
- });
- done();
+ })
+ done()
}, error => {
- window.console.log(error);
- loading();
- });
+ window.console.log(error)
+ loading()
+ })
},
rowDel(row) {
this.$confirm("确定将选择数据删除?", {
@@ -454,38 +739,38 @@
type: "warning"
})
.then(() => {
- return remove(row.id);
+ return remove(row.id)
})
.then(() => {
- this.onLoad(this.page);
+ this.onLoad(this.page)
this.$message({
type: "success",
message: "操作成功!"
- });
- });
+ })
+ })
},
searchReset() {
- this.query = {};
- this.treeDeptId = '';
- this.onLoad(this.page);
+ this.query = {}
+ this.treeDeptId = ''
+ this.onLoad(this.page)
},
searchChange(params, done) {
- this.query = params;
- this.page.currentPage = 1;
- this.onLoad(this.page, params);
- done();
+ this.query = params
+ this.page.currentPage = 1
+ this.onLoad(this.page, params)
+ done()
},
selectionChange(list) {
- this.selectionList = list;
+ this.selectionList = list
},
selectionClear() {
- this.selectionList = [];
- this.$refs.crud.toggleSelection();
+ this.selectionList = []
+ this.$refs.crud.toggleSelection()
},
handleDelete() {
if (this.selectionList.length === 0) {
- this.$message.warning("请选择至少一条数据");
- return;
+ this.$message.warning("请选择至少一条数据")
+ return
}
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
@@ -493,25 +778,25 @@
type: "warning"
})
.then(() => {
- return remove(this.ids);
+ return remove(this.ids)
})
.then(() => {
- this.onLoad(this.page);
+ this.onLoad(this.page)
this.$message({
type: "success",
message: "操作成功!"
- });
- this.$refs.crud.toggleSelection();
- });
+ })
+ this.$refs.crud.toggleSelection()
+ })
},
handleImport() {
- this.excelBox = true;
+ this.excelBox = true
},
uploadAfter(res, done, loading, column) {
- window.console.log(column);
- this.excelBox = false;
- this.refreshChange();
- done();
+ window.console.log(column)
+ this.excelBox = false
+ this.refreshChange()
+ done()
},
handleExport() {
this.$confirm("是否导出房屋数据?", "提示", {
@@ -519,22 +804,22 @@
cancelButtonText: "取消",
type: "warning"
}).then(() => {
- NProgress.start();
+ NProgress.start()
var data = {
...this.query
}
- data = Qs.stringify(data);
+ data = Qs.stringify(data)
exportBlob(
`/api/blade-house/house/export-house?${this.website.tokenHeader}=${getToken()}&` + data
).then(res => {
- downloadXls(res.data, `房屋数据表${dateNow()}.xlsx`);
- NProgress.done();
+ downloadXls(res.data, `房屋数据表${dateNow()}.xlsx`)
+ NProgress.done()
})
- });
+ })
},
handleTemplate() {
exportBlob(`/api/blade-system/user/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
- downloadXls(res.data, "房屋数据模板.xlsx");
+ downloadXls(res.data, "房屋数据模板.xlsx")
})
},
beforeOpen(done, type) {
@@ -542,33 +827,69 @@
getDetatil({
id: this.form.id
}).then(res => {
- this.form = res.data.data;
- });
+ 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 = []
+ var names = this.form.imageUrls.split(",")
+ names.forEach(name => {
+ urls.push(website.minioUrl + name)
+ })
+ this.form.imageUrls = urls.join(",")
+ }
+ }
+ })
}
- this.initFlag = true;
- done();
+ this.initFlag = true
+ done()
},
currentChange(currentPage) {
- this.page.currentPage = currentPage;
+ this.page.currentPage = currentPage
},
sizeChange(pageSize) {
- this.page.pageSize = pageSize;
+ this.page.pageSize = pageSize
},
refreshChange() {
- this.onLoad(this.page, this.query);
+ this.onLoad(this.page, this.query)
},
onLoad(page, params = {}) {
- this.loading = true;
+ this.loading = true
+
getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
- const data = res.data.data;
- this.page.total = data.total;
- this.data = data.records;
- this.loading = false;
- this.selectionClear();
- });
+ const data = {
+ ...res.data.data,
+ records: res.data.data.records.map(item => {
+ if (item.imageUrls) {
+ if (item.imageUrls.length > 0) {
+ var urls = []
+ var names = item.imageUrls.split(",")
+ names.forEach(name => {
+ urls.push(website.minioUrl + name)
+ })
+ item.imageUrls = urls.join(",")
+ }
+ }
+
+ return {
+ ...item,
+ 'phoneflag': false,
+ }
+ })
+ }
+ this.page.total = data.total
+ this.data = data.records
+ this.loading = false
+ this.selectionClear()
+ })
+ },
+ showStringDispose(row, type) {
+ row[type] = !row[type]
}
}
- };
+ }
</script>
<style>
--
Gitblit v1.9.3