@@ -1,85 +1,120 @@
< template >
< template >
< div class = "app-container" >
< div class = "app-container" >
<!-- 搜索工作栏 -- >
<!-- 搜索工作栏 -- >
< el-form :model = "queryParams" ref = "queryForm" size = "small" :inline = "true" v-show = "showSearch" label-width="68px" >
< el-form :model = "queryParams" ref = "queryForm" size = "small" :inline = "true" v-show = "showSearch" label-width="68px" >
< el -form -item label = "大楼名称" prop = "name" >
< el -form -item label = "大楼名称" prop = "name" >
< el-input v-model = "queryParams.name" placeholder="请输入大楼名称" clearable @keyup.enter.native="handleQuery" />
< el-input v-model = "queryParams.name" placeholder="请输入大楼名称" clearable @keyup.enter.native="handleQuery" />
< / el -form -item >
< / el -form -item >
< el-form-item label = "父大楼id" prop = "parentId" >
< el-input v-model = "queryParams.parentId" placeholder="请输入父大楼id" clearable @keyup.enter.native="handleQuery" />
< / el -form -item >
< el-form-item label = "大楼状态" prop = "status" >
< el-form-item label = "大楼状态" prop = "status" >
< el-select v-model = "queryParams.status" placeholder="请选择大楼状态( 0正常 1停用) " clearable size="small" >
< el-select v-model = "queryParams.status" placeholder="请选择大楼状态" clearable size="small" >
< el -option v-for = "dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)" />
< el -option v-for = "dict in this.getDictDatas(DICT_TYPE.BUILDING_STATUS)"
:key = "dict.value" :label = "dict.label" :value = "dict.value" / >
< / el-select >
< / el-select >
< / el-form-item >
< / el-form-item >
< el-form-item label = "楼层id" prop = "fid" >
< el-input v-model = "queryParams.fid" placeholder="请输入楼层id" clearable @keyup.enter.native="handleQuery" />
< / el -form -item >
< el-form-item label = "创建时间" prop = "createTime" >
< el-date-picker v-model = "queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
range -separator = " - " start -placeholder = " 开始日期 " end -placeholder = " 结束日期 " : default -time = " [ ' 00 : 00 : 00 ' , ' 23 : 59 : 59 ' ] " / >
< / el-form-item >
< el-form-item label = "方位" prop = "direction" >
< el-select v-model = "queryParams.direction" placeholder="请选择方位" clearable size="small" >
< el -option v-for = "dict in this.getDictDatas(DICT_TYPE.BUILDING_DIRECTION)"
:key = "dict.value" :label = "dict.label" :value = "dict.value" / >
< / el-select >
< / el-form-item >
< el-form-item label = "位置图" prop = "imgurl" >
< el-input v-model = "queryParams.imgurl" placeholder="请输入位置图" clearable @keyup.enter.native="handleQuery" />
< / el -form -item >
< el-form-item >
< el-form-item >
< el-button type = "primary" icon = "el-icon-search" @click ="handleQuery" > 搜索 < / el -button >
< el-button type = "primary" icon = "el-icon-search" @click ="handleQuery" > 搜索 < / el -button >
< el-button icon = "el-icon-refresh" @click ="resetQuery" > 重置 < / el -button >
< el-button icon = "el-icon-refresh" @click ="resetQuery" > 重置 < / el -button >
< / el-form-item >
< / el-form-item >
< / el-form >
< / el-form >
<!-- 操作工具栏 -- >
< el-row :gutter = "10" class = "mb8" >
< el-row :gutter = "10" class = "mb8" >
< el-col :span = "1.5" >
< el-col :span = "1.5" >
< el-button type = "primary" plain icon = "el-icon-plus" size = "mini" @click ="handleAdd"
< el-button type = "primary" plain icon = "el-icon-plus" size = "mini" @click ="handleAdd"
v-hasPermi = "['system:building:create']" > 新增 < / el -button >
v-hasPermi = "['system:building:create']" > 新增 < / el -button >
< / el-col >
< / el-col >
< el-col :span = "1.5" >
< el-col :span = "1.5" >
< el-button type = "info " plain icon = "el-icon-sort " size = "mini" @click ="togg leExpandAll" > 展开 / 折叠 < / el -button >
< el-button type = "warning " plain icon = "el-icon-download " size = "mini" @click ="hand leExport" :loading = "exportLoading"
v-hasPermi = "['system:building:export']" > 导出 < / el -button >
< / el-col >
< / el-col >
< right-toolbar :showSearch.sync = "showSearch" @queryTable ="getList" > < / right -toolbar >
< right-toolbar :showSearch.sync = "showSearch" @queryTable ="getList" > < / right -toolbar >
< / el-row >
< / el-row >
<!-- 列表 -- >
<!-- 列表 -- >
<!-- < el-table v-loading = "loading" :data="list" > - - >
< el-table v-loading = "loading" :data="list" >
< el-table v-if = "refreshTable" v-loading="loading" :data="list" row-key="id" :default-expand-all="isExpandAll"
< el -table -column label = "大楼id" align = "center" prop = "id" / >
: tree -props = " { children : ' children ' , hasChildren : ' hasChildren ' } " >
< el-table-column label = "大楼名称" align = "center" prop = "name" / >
< el-table-column label = "父大楼id" align = "center" prop = "parentId" / >
<!-- < el-table-column label = "大楼id " align = "center" prop = "id" / > -- >
< el-table-column label = "大楼状态 " align = "center" prop = "status" >
< el-table-column label = "大楼名称" prop = "name" / >
<!-- < el-table-column label = "父大楼id" align = "center" prop = "parentId" / > -- >
< el-table-column label = "楼层" align = "center" prop = "fid" / >
< el-table-column label = "大楼状态" align = "center" prop = "status" >
< template slot -scope = " scope " >
< template slot -scope = " scope " >
< dict-tag :type = "DICT_TYPE.COMMON _STATUS" :value = "scope.row.status" / >
< dict-tag :type = "DICT_TYPE.BUILDING _STATUS" :value = "scope.row.status" / >
< / template >
< / template >
< / el-table-column >
< / el-table-column >
< el-table-column label = "楼层id" align = "center" prop = "fid" / >
< el-table-column label = "创建时间" align = "center" prop = "createTime" width = "180" >
< el-table-column label = "创建时间" align = "center" prop = "createTime" width = "180" >
< template slot -scope = " scope " >
< template slot -scope = " scope " >
< span > { { parseTime ( scope . row . createTime ) } } < / span >
< span > { { parseTime ( scope . row . createTime ) } } < / span >
< / template >
< / template >
< / el-table-column >
< / el-table-column >
< el-table-column label = "方位" align = "center" prop = "direction" >
< template slot -scope = " scope " >
< dict-tag :type = "DICT_TYPE.BUILDING_DIRECTION" :value = "scope.row.direction" / >
< / template >
< / el-table-column >
< el-table-column label = "位置图" align = "center" prop = "imgurl" >
< template slot -scope = " scope " >
< img v-if = "scope.row.imgurl" :src="scope.row.imgurl" class="location-img" @click="showImagePreview(scope.row.imgurl)" / >
< / template >
< / el-table-column >
< el-table-column label = "操作" align = "center" class -name = " small -padding fixed -width " >
< el-table-column label = "操作" align = "center" class -name = " small -padding fixed -width " >
< template slot -scope = " scope " >
< template slot -scope = " scope " >
< el-button size = "mini" type = "text" icon = "el-icon-edit" @click ="handleUpdate(scope.row)"
< el-button size = "mini" type = "text" icon = "el-icon-edit" @click ="handleUpdate(scope.row)"
v-hasPermi = "['system:building:update']" > 修改 < / el -button >
v-hasPermi = "['system:building:update']" > 修改 < / el -button >
< el-button size = "mini" type = "text" icon = "el-icon-delete" @click ="handleDelete(scope.row)"
< el-button v-if = "scope.row.parentId == 0" size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
v-hasPermi = "['system:building:delete']" > 删除 < / el -button >
v-hasPermi = "['system:building:create']" > 新增 < / el -button >
< el-button v-if = "scope.row.parentId !== 0" size="mini" type="text" icon="el-icon-delete"
@click ="handleDelete(scope.row)" v-hasPermi = "['system:building:delete']" > 删除 < / el -button >
< / template >
< / template >
< / el-table-column >
< / el-table-column >
< / el-table >
< / el-table >
<!-- 分页组件 -- >
<!-- 分页组件 -- >
<!-- < pagination v-show = "total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
< pagination v-show = "total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination ="getList" /> - - >
@pagination ="getList" />
< ! - - 对话框 ( 添加 / 修改 ) - - >
< ! - - 对话框 ( 添加 / 修改 ) - - >
< el-dialog :title = "title" :visible.sync = "open" width = "500px" append -to -body >
< el-dialog :title = "title" :visible.sync = "open" width = "500px" append -to -body >
< el-form ref = "form" :model = "form" :rules = "rules" label -width = " 80px " >
< el-form ref = "form" :model = "form" :rules = "rules" label -width = " 80px " >
< el-form-item label = "所属 大楼" prop = "parentId " >
< el-form-item label = "大楼名称 " prop = "name " >
< treeselect v-model = "form.parentId" :options="buildingOptions" :normalizer="normalizer" :flat="true" placeholder="选择大楼" / >
< / el-form-item >
< el-form-item label = "名称" prop = "name" >
< el-input v-model = "form.name" placeholder="请输入大楼名称" / >
< el-input v-model = "form.name" placeholder="请输入大楼名称" / >
< / el-form-item >
< / el-form-item >
< el-form-item label = "状态 " prop = "status " >
< el-form-item label = "父大楼id " prop = "parentId " >
< el-selec t v-model = "form.status " placeholder="请选择状态( 0正常 1停用) " clearable size="small" >
< el-inpu t v-model = "form.parentId " placeholder="请输入父大楼id" / >
< el -option v-for = "dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)" />
< / el -select >
< / el-form-item >
< / el-form-item >
< el-form-item label = "楼层 " prop = "fid " >
< el-form-item label = "大楼状态 " prop = "status " >
< el-inpu t v-model = "form.fid " placeholder="请输入楼层id,初始为0" / >
< el-selec t v-model = "form.status " placeholder="请选择大楼状态" >
< el -option v-for = "dict in this.getDictDatas(DICT_TYPE.BUILDING_STATUS)"
:key = "dict.value" :label = "dict.label" :value = "parseInt(dict.value)" / >
< / el-select >
< / el-form-item >
< el-form-item label = "楼层id" prop = "fid" >
< el-input v-model = "form.fid" placeholder="请输入楼层id" / >
< / el-form-item >
< el-form-item label = "方位" prop = "direction" >
< el-select v-model = "form.direction" placeholder="请选择方位" >
< el -option v-for = "dict in this.getDictDatas(DICT_TYPE.BUILDING_DIRECTION)"
:key = "dict.value" :label = "dict.label" :value = "dict.value" / >
< / el-select >
< / el-form-item >
< el-form-item label = "位置图" prop = "imgurl" >
< el-input v-model = "form.imgurl" placeholder="请输入位置图" / >
< / el-form-item >
< / el-form-item >
< / el-form >
< / el-form >
< div slot = "footer" class = "dialog-footer" >
< div slot = "footer" class = "dialog-footer" >
@@ -87,21 +122,31 @@
< el-button @click ="cancel" > 取 消 < / el -button >
< el-button @click ="cancel" > 取 消 < / el -button >
< / div >
< / div >
< / el-dialog >
< / el-dialog >
<!-- 图片预览对话框 -- >
< el-dialog
title = "图片预览"
:visible.sync = "imagePreviewVisible"
width = "80%"
append -to -body
>
< div class = "image-preview-container" >
< img :src = "previewImageUrl" class = "preview-image" >
< / div >
< / el-dialog >
< / div >
< / div >
< / template >
< / template >
< script >
< script >
import { listBuilding , listSimpleBuildings , createBuilding, updateBuilding , deleteBuilding , getBuilding , getBuildingPage , exportBuildingExcel } from "@/api/system/building" ;
import { createBuilding , updateBuilding , deleteBuilding , getBuilding , getBuildingPage , exportBuildingExcel } from "@/api/system/building" ;
import { DICT _TYPE , getDictDatas } from "@/utils/dict" ;
import Treeselect from "@riophae/vue-treeselect " ;
import DictTag from "@/components/DictTag " ;
import "@riophae/vue-treeselect/dist/vue-treeselect.css" ;
import { getDictDatas , DICT _TYPE } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
export default {
export default {
name : "Building" ,
name : "Building" ,
components : {
components : {
Treeselect
DictTag
} ,
} ,
data ( ) {
data ( ) {
return {
return {
@@ -112,72 +157,58 @@ export default {
// 显示搜索条件
// 显示搜索条件
showSearch : true ,
showSearch : true ,
// 总条数
// 总条数
// total: 0,
total: 0 ,
// 楼层导视列表
// 楼层导视列表
list : [ ] ,
list : [ ] ,
// 部门树选项
buildingOptions : [ ] ,
// 弹出层标题
// 弹出层标题
title : "" ,
title : "" ,
// 是否显示弹出层
// 是否显示弹出层
open : false ,
open : false ,
// 是否展开,默认全部展开
isExpandAll : true ,
// 重新渲染表格状态
refreshTable : true ,
// 是否展开
expand : false ,
// 查询参数
// 查询参数
queryParams : {
queryParams : {
// pageNo: 1,
pageNo: 1 ,
// pageSize: 10,
pageSize: 10 ,
// parentId: null,
name : null ,
name : null ,
parentId : null ,
status : null ,
status : null ,
// fid: null,
fid : null ,
// createTime: [],
createTime: [ ] ,
direction : null ,
imgurl : null ,
} ,
} ,
// 表单参数
// 表单参数
form : { } ,
form : { } ,
// 表单校验
// 表单校验
rules : {
rules : {
name : [ { required : true , message : "大楼名称不能为空" , trigger : "blur" } ] ,
name : [ { required : true , message : "大楼名称不能为空" , trigger : "blur" } ] ,
// parentId: [{ required: true, message: "父大楼id不能为空", trigger: "blur" }],
parentId: [ { required : true , message: "父大楼id不能为空", trigger: "blur" } ] ,
status : [ { required : true , message : "大楼状态( 0正常 1停用) 不能为空" , trigger : "blur " } ] ,
status : [ { required : true , message : "大楼状态不能为空" , trigger : "change " } ] ,
} ,
} ,
// 枚举
// 图片预览相关
CommonStatusEnum : CommonStatusEnum ,
imagePreviewVisible : false ,
// 数据字典
previewImageUrl : ''
statusDictDatas : getDictDatas ( DICT _TYPE . BUILDING _STATUS )
} ;
} ;
} ,
} ,
created ( ) {
created ( ) {
this . getList ( ) ;
this . getList ( ) ;
} ,
} ,
methods : {
methods : {
/** 显示图片预览 */
showImagePreview ( url ) {
this . previewImageUrl = url ;
this . imagePreviewVisible = true ;
} ,
/** 查询列表 */
/** 查询列表 */
getList ( ) {
getList ( ) {
this . loading = true ;
this . loading = true ;
// 执行查询
// 执行查询
lis tBuilding( this . queryParams ) . then ( response => {
ge tBuildingPage ( this . queryParams ) . then ( response => {
// this.list = response.data.list;
console . log ( response . data . list ) ;
this . list = this . handleTree ( response . data , "id" ) ;
this . list = response . data . list ;
// this.total = response.data. total;
this . total = response . data . total;
this . loading = false ;
this . loading = false ;
} ) ;
} ) ;
} ,
} ,
/** 转换数据结构 */
normalizer ( node ) {
if ( node . children && ! node . children . length ) {
delete node . children ;
}
return {
id : node . id ,
label : node . name ,
isDisabled : node . parentId != 0 ,
children : node . children
} ;
} ,
/** 取消按钮 */
/** 取消按钮 */
cancel ( ) {
cancel ( ) {
this . open = false ;
this . open = false ;
@@ -191,7 +222,8 @@ export default {
parentId : undefined ,
parentId : undefined ,
status : undefined ,
status : undefined ,
fid : undefined ,
fid : undefined ,
status : CommonStatusEnum . ENABLE ,
direction : undefined ,
imgurl : undefined ,
} ;
} ;
this . resetForm ( "form" ) ;
this . resetForm ( "form" ) ;
} ,
} ,
@@ -206,49 +238,20 @@ export default {
this . handleQuery ( ) ;
this . handleQuery ( ) ;
} ,
} ,
/** 新增按钮操作 */
/** 新增按钮操作 */
handleAdd ( row ) {
handleAdd ( ) {
this . reset ( ) ;
this . reset ( ) ;
if ( row !== undefined ) {
this . form . parentId = row . id ;
}
this . open = true ;
this . open = true ;
this . title = "添加" ;
this . title = "添加楼层导视 " ;
getBuildingPage ( ) . then ( response => {
this . buildingOptions = this . handleTree ( response . data . list , "id" ) ;
} ) ;
} ,
} ,
/** 展开/折叠操作 */
toggleExpandAll ( ) {
this . refreshTable = false ;
this . isExpandAll = ! this . isExpandAll ;
this . $nextTick ( ( ) => {
this . refreshTable = true ;
} ) ;
} ,
/** 修改按钮操作 */
/** 修改按钮操作 */
handleUpdate ( row ) {
handleUpdate ( row ) {
this . reset ( ) ;
this . reset ( ) ;
const id = row . id ;
getBuilding ( row . id) . then ( response => {
getBuilding ( id ) . then ( response => {
this . form = response . data ;
this . form = response . data ;
if ( this . form . parentId === 0 ) { // 无父部门时,标记为 undefined, 避免展示为 Unknown
this . form . parentId = undefined ;
}
this . open = true ;
this . open = true ;
this . title = "修改部门 " ;
this . title = "修改楼层导视 " ;
} ) ;
} ) ;
listBuilding ( row . id ) . then ( response => {
this . buildingOptions = this . handleTree ( response . data , "id" ) ;
} ) ;
// const id = row.id;
// getBuilding(id).then(response => {
// this.form = response.data;
// this.open = true;
// this.title = "修改楼层导视";
// });
} ,
} ,
/** 提交按钮 */
/** 提交按钮 */
submitForm ( ) {
submitForm ( ) {
@@ -275,37 +278,51 @@ export default {
} ,
} ,
/** 删除按钮操作 */
/** 删除按钮操作 */
handleDelete ( row ) {
handleDelete ( row ) {
const id = row . id ;
this . $modal . confirm ( '是否确认删除名称 为"' + row . name + '"的数据项?' ) . then ( function ( ) {
this . $modal . confirm ( '是否确认删除楼层导视编号 为"' + id + '"的数据项?' ) . then ( function ( ) {
return deleteBuilding ( row . id) ;
return deleteBuilding ( id ) ;
} ) . then ( ( ) => {
} ) . then ( ( ) => {
this . getList ( ) ;
this . getList ( ) ;
this . $modal . msgSuccess ( "删除成功" ) ;
this . $modal . msgSuccess ( "删除成功" ) ;
} ) . catch ( ( ) => { } ) ;
} ) . catch ( ( ) => { } ) ;
} ,
// const id = row.id;
// this.$modal.confirm('是否确认删除楼层导视编号为"' + id + '"的数据项?').then(function() {
// return deleteBuilding(id);
// }).then(() => {
// this.getList();
// this.$modal.msgSuccess("删除成功");
// }).catch(() => {});
}
/** 导出按钮操作 */
/** 导出按钮操作 */
// handleExport() {
handleExport( ) {
// // 处理查询参数
// 处理查询参数
// let params = { ...this. queryParams};
let params = { ... this. queryParams} ;
// params. pageNo = undefined;
params. pageNo = undefined;
// params. pageSize = undefined;
params. pageSize = undefined;
// this. $modal. confirm( '是否确认导出所有楼层导视数据项?').then(() => {
this. $modal. confirm( '是否确认导出所有楼层导视数据项?') . then ( ( ) => {
// this. exportLoading = true;
this. exportLoading = true ;
// return exportBuildingExcel( params);
return exportBuildingExcel( params) ;
// }).then(response => {
} ) . then ( response => {
// this. $download.excel( response, '楼层导视.xls');
this. $download. excel ( response, '楼层导视.xls') ;
// this. exportLoading = false;
this. exportLoading = false;
// }).catch(() => {});
} ) . catch ( ( ) => { } ) ;
// }
}
}
}
} ;
} ;
< / script >
< / script >
< style scoped >
/* 位置图样式 */
. location - img {
width : 100 px ;
height : 80 px ;
object - fit : cover ;
cursor : pointer ;
border - radius : 4 px ;
border : 1 px solid # e6e6e6 ;
}
/* 图片预览样式 */
. image - preview - container {
text - align : center ;
padding : 20 px ;
}
. preview - image {
max - width : 100 % ;
max - height : 80 vh ;
object - fit : contain ;
}
< / style >