suojin
/
smartpark-front
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改后台图纸管理列表页

Browse Source
main
jinna 2 years ago
parent 5132b5ed7d
commit a9489e9bf5
2 changed files with 270 additions and 199 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 64
      src/api/equipment/drawManage.js
  2. 255
      src/views/equipment/drawManage.vue

64
src/api/equipment/drawManage.js
Unescape View File

@ -1,13 +1,13 @@
import request from "@/router/axios";
// 获取字典数据
export const getDict = (query) =>{
export const getDict = (query) => {
return request({
url:'/api/blade-system/dict-biz/child-list',
method:'get',
params:query
})
}
url: "/api/blade-system/dict-biz/child-list",
method: "get",
params: query,
});
};
// 获取图纸列表
export const getDrawList = (query) => {
@ -19,39 +19,39 @@ export const getDrawList = (query) => {
};
// 上传图纸
export const addDraw = (data) =>{
export const addDraw = (data) => {
return request({
url:"/api/blade-desk/drawe/save",
method:'post',
data
})
}
url: "/api/blade-desk/drawe/save",
method: "post",
data,
});
};
// 编辑图纸
export const editDraw = (data) =>{
export const editDraw = (data) => {
return request({
url:'/api/blade-desk/drawe/update',
method:'post',
data
})
}
url: "/api/blade-desk/drawe/update",
method: "post",
data,
});
};
// 图纸删除
export const deleteDraw = (ids) =>{
export const deleteDraw = (ids) => {
return request({
url:'/api/blade-desk/drawe/remove',
method:'post',
params:{
ids
}
})
}
url: "/api/blade-desk/drawe/remove",
method: "post",
params: {
ids,
},
});
};
// 树状结构数据
export const getTerrData = (query) =>{
export const getTerrData = (query) => {
return request({
url:'/api/blade-desk/drawe/class/tree',
method:'get',
params:query
})
}
url: "/api/blade-desk/drawe/tree",
method: "get",
params: query,
});
};

255
src/views/equipment/drawManage.vue
Unescape View File

@ -5,8 +5,18 @@
<div class="box">
<el-scrollbar>
<basic-container>
<avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>
<!-- <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick">
<template slot-scope="scope" slot="menuBtn">
<p >自定义按钮</p>
</template>
</avue-tree> -->
<!-- <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"></avue-tree> -->
<el-tree ref="tree" :current-node-key="currentKey" :highlight-current='true' node-key="dictKey" :data="treeData" :props="defaultProps" :default-expanded-keys="defaultTree" @node-click="nodeClick" :expand-on-click-node="false" @node-expand="nodeExpand" @node-collapse="nodeCollapse">
<span class="custom-tree-node" slot-scope="{ node, data }" style="width:100%;display: flex;align-items: center;justify-content: space-between;">
<span> {{ data.dictValue }}</span>
<span v-show="data.count > 0"> {{ data.count }}</span>
</span>
</el-tree>
</basic-container>
</el-scrollbar>
</div>
@ -47,9 +57,9 @@
end-placeholder="结束日期">>
</el-date-picker>
</template> -->
<template slot="type" slot-scope="scope">
<!-- <template slot="type" slot-scope="scope">
{{ scope.row.type == 1 ? '业务区' : '塔台' }}
</template>
</template> -->
<template slot="url" slot-scope="scope">
<div style="display:flex;flex-wrap:wrap;">
<img v-for="item in scope.row.url.split(',')" :key="item" :src="item" style="width:100px;height:100px;margin:0 3px;"></img>
@ -66,20 +76,19 @@
</avue-crud>
<el-dialog custom-class="drawClass" :title="dialogTitle" :visible.sync="dialogVisible" width="50%" :modal-append-to-body="false">
<el-form ref="form" :model="dataForm" label-width="120px" :rules="dataRules">
<el-form-item label="图纸分类:" style="width: 100%;display: inline-block;" prop="draweClassId">
<el-select size="small" v-model="dataForm.draweClassId" style="width:50%">
<el-option v-for="item in classifyData" :key="item.id" :value="item.id" :label="item.name"></el-option>
<el-form-item label="图纸分类:" style="width: 100%;display: inline-block;" prop="draweClass">
<el-select size="small" v-model="dataForm.draweClass" style="width:50%" @change="changeDraweClass">
<el-option v-for="item in classifyData" :key="item.dictKey" :value="item.dictKey" :label="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="区域:" style="width: 100%;display: inline-block;" prop="type">
<el-select size="small" v-model="dataForm.type" style="width:50%" @change="changeArea">
<el-option :value="1" label="业务区"></el-option>
<el-option :value="2" label="塔台"></el-option>
<el-form-item label="区域:" style="width: 100%;display: inline-block;" prop="region">
<el-select size="small" v-model="dataForm.region" style="width:50%" @change="changeArea">
<el-option v-for="item in regionData" :key="item.dictKey" :value="item.dictKey" :label="item.dictValue" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="楼号:" style="width: 100%;display: inline-block;" prop="build">
<el-tooltip class="item" v-if="!dataForm.type" effect="dark" content="请先选择区域" placement="top">
<el-select disabled size="small" v-model="dataForm.build" style="width:50%" @change="changeBuild">
<el-tooltip class="item" v-if="!dataForm.region" effect="dark" content="请先选择区域" placement="top">
<el-select disabled size="small" v-model="dataForm.build" style="width:50%">
<el-option v-for="item in buildData" :key="item.dictKey" :value="item.dictKey" :label="item.dictValue"></el-option>
</el-select>
</el-tooltip>
@ -97,16 +106,19 @@
<el-option v-for="item in floorData" :key="item.dictKey" :value="item.dictKey" :label="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="图纸名称:" style="width:100%;display:inline-block;" prop="originalName">
<el-input v-model="dataForm.originalName" size="small" style="width:50%"></el-input>
</el-form-item>
<el-form-item label="图纸:" style="width:100%;display: inline-block;" prop="url">
<el-upload
:class="imgList.length >= 5 ? 'hide' : ''"
:class="imgList.length >= 1 ? 'hide' : ''"
action="/api/blade-desk/oss/put-file"
list-type="picture-card"
:on-success="handleSuccess"
:before-remove="beforeRemove"
:on-remove="handleRemove"
:file-list="fileList"
:limit="5"
:limit="1"
accept=".png,.PNg,.jpg,.JPG,.jpeg,.JPEG,.bmp,.BMP"
>
<i class="el-icon-plus"></i>
@ -146,6 +158,7 @@ import {getList} from '@/api/equipment/drawClassify'
url:'',
srcList:[],
classifyData:[], //图纸分类数组
regionData:[],//区域数组
buildData:[],
floorData:[],
option: {
@ -189,7 +202,7 @@ import {getList} from '@/api/equipment/drawClassify'
},
{
label: "区域",
prop: "type",
prop: "regionName",
align: "center",
addDisplay:false,
editDisplay:false,
@ -197,7 +210,7 @@ import {getList} from '@/api/equipment/drawClassify'
},
{
label: "图纸分类",
prop: "draweClassId",
prop: "draweClass",
type:'select',
align: "center",
hide:true,
@ -218,6 +231,13 @@ import {getList} from '@/api/equipment/drawClassify'
align: "center",
width:120,
},
{
label: "图纸名称",
prop: "originalName",
align: "center",
overHidden:true,
width:120,
},
{
label: "图纸",
prop: "url",
@ -233,6 +253,7 @@ import {getList} from '@/api/equipment/drawClassify'
overHidden:true,
width:120,
},
{
label: '图纸',
prop: 'string',
@ -284,7 +305,17 @@ import {getList} from '@/api/equipment/drawClassify'
data:[],
loading:false,
treeOption:{
filter:false
filter:false,
props: {
labelText: '标题',
label: 'dictValue',
value: 'dictKey',
children: 'children'
}
},
defaultProps: {
children: 'children',
label: 'dictValue'
},
treeData:[
// {
@ -329,21 +360,17 @@ import {getList} from '@/api/equipment/drawClassify'
// ]
// }
],
defaultProps: {
children: 'children',
label: 'label'
},
draweClassId:'',//图纸分类id
draweClass:'',//图纸分类id
build:'',//楼号键值
floor:'', //楼层键值
type:'',//区域类型
dataRules:{
draweClassId:[{
draweClass:[{
required:true,
message:'请选择图纸类型',
trigger:'blur'
}],
type:[{
region:[{
required:true,
message:'请选择区域',
trigger:'blur'
@ -353,56 +380,101 @@ import {getList} from '@/api/equipment/drawClassify'
message:'请选择楼号',
trigger:'blur'
}],
originalName:[{
required:true,
message:'请输入图纸名称',
trigger:'blur'
}]
},
imgList:[],
fileList:[],
dialogType:'',
editId:'',
isChecked:false,
defaultTree:[],
currentKey:''
}
},
created(){
this.getTypeList()
this.gettree()
},
methods:{
getTypeList(){
getList({current:1,size:100}).then(res =>{
this.classifyData = res.data.data.records
console.log('data ======>',this.classifyData)
})
},
gettree(){
this.classifyData = []
// getDict({current:1,size:20,parentId:'1723979109371080705'}).then(res =>{
// this.treeData = res.data.data
// res.data.data.map(item =>{
// this.classifyData.push(item)
// })
// })
getTerrData().then(res =>{
console.log('res =====>',res)
console.log('res ===>',res)
this.treeData = res.data.data
res.data.data.map(item =>{
this.classifyData.push(item)
})
this.$nextTick(() =>{
console.log('currentKey ====>',this.currentKey)
this.$refs['tree'].setCurrentKey(this.currentKey)
})
})
},
// 切换专业分类
changeDraweClass(val){
this.dataForm.region = ''
let tmp = this.classifyData.find(item => item.dictKey == val)
this.regionData = tmp ? tmp.children : []
},
// 切换区域数据
changeArea(val){
this.dataForm.build = ''
if(val == 1){
getDict({current:1,size:100,parentId: '1721347822365741058'}).then(res =>{
console.log('res ====>',res)
this.buildData = res.data.data
})
}else if(val == 2){
getDict({current:1,size:100,parentId: '1721406335628627969'}).then(res =>{
console.log('res ====>',res)
this.buildData = res.data.data
})
let tmp = this.regionData.find(item => item.dictKey == val)
this.buildData = tmp ? tmp.children : []
if(this.dataForm.region == '2-2' && this.dataForm.draweClass == '2'){
this.dataRules.build[0].required = false
}else{
this.dataRules.build[0].required = true
}
},
// 点击新增按钮
handleAdd(){
this.dialogTitle = '新增图纸'
this.dialogType = 'add'
this.$nextTick(() =>{
this.$refs.form.clearValidate()
})
this.dataRules.build[0].required = true
if(this.isChecked){
this.regionData = this.classifyData ? this.classifyData.find(item => item.dictKey == this.draweClass) ? this.classifyData.find(item => item.dictKey == this.draweClass).children : [] : []
this.buildData = this.regionData ? this.regionData.find(item => item.dictKey == this.type) ? this.regionData.find(item => item.dictKey == this.type).children : [] : []
this.floorData = this.buildData ? this.buildData.find(item => item.dictKey == this.build) ? this.buildData.find(item => item.dictKey == this.build).children : [] : []
console.log('type ===>',this.type)
this.dataForm = {
draweClass:this.draweClass,
region:this.type,
originalName:'',
build:this.build,
floor:this.floor,
url:''
}
if(this.dataForm.region == '2-2' && this.dataForm.draweClass == '2'){
this.dataRules.build[0].required = false
}else{
this.dataRules.build[0].required = true
}
}else{
this.dataForm = {
draweClassId:'',
type:'',
draweClass:'',
region:'',
originalName:'',
build:'',
floor:'',
url:''
}
}
this.imgList = []
this.fileList = []
setTimeout(() =>{
@ -435,31 +507,38 @@ import {getList} from '@/api/equipment/drawClassify'
this.$refs['form'].validate((valid) => {
console.log('form ====>',this.dataForm)
console.log('img ====>',this.imgList)
if(this.dialogType == 'add'){
if(valid){
if(this.imgList.length == 0){
this.$message.error('请上传图片')
}else{
if(this.dialogType == 'add'){
let imgUrl = []
let nameArr = []
this.imgList.map(item =>{
imgUrl.push(item.url)
nameArr.push(item.name)
// nameArr.push(item.name)
})
let params = {
draweClassId:this.dataForm.draweClassId,
type:this.dataForm.type,
draweClass:this.dataForm.draweClass,
region:this.dataForm.region,
build:this.dataForm.build,
floor:this.dataForm.floor,
url:imgUrl.join(','),
originalName:nameArr.join(','),
// originalName:nameArr.join(','),
originalName:this.dataForm.originalName,
remark:this.dataForm.remark
}
console.log('params ===>',params)
console.log('params =====>',params)
addDraw(params).then(res =>{
console.log('res ====>',res)
if(res.data.code == 200){
this.page.currentPage = 1;
this.onLoad()
this.gettree()
// this.$nextTick(() =>{
// console.log('currentKey ====>',this.currentKey)
// this.$refs['tree'].setCurrentKey('3-1-1-7')
// })
this.$message.success('新增成功')
this.dialogVisible = false
}else{
@ -475,31 +554,27 @@ import {getList} from '@/api/equipment/drawClassify'
});
this.dialogVisible = false
})
}
}else if(this.dialogType == 'edit'){
if(this.imgList.length == 0){
this.$message.error('请上传图片')
}else{
let imgUrl = []
let nameArr = []
this.imgList.map(item =>{
imgUrl.push(item.url)
nameArr.push(item.name)
})
let params = {
id:this.dataForm.id,
draweClassId:this.dataForm.draweClassId,
type:this.dataForm.type,
draweClass:this.dataForm.draweClass,
type:this.dataForm.region,
build:this.dataForm.build,
floor:this.dataForm.floor,
url:imgUrl.join(','),
originalName:nameArr.join(','),
originalName:this.dataForm.originalName,
remark:this.dataForm.remark
}
console.log('params ===>',params)
editDraw(params).then(res =>{
if(res.data.code == 200){
this.onLoad()
this.gettree()
this.$message.success('修改成功')
this.dialogVisible = false
}else{
@ -517,14 +592,14 @@ import {getList} from '@/api/equipment/drawClassify'
})
}
}
}
})
},
// 切换楼号
changeBuild(val){
this.dataForm.floor = ''
let tmp = this.buildData.find(item => item.dictKey == val)
this.floorData = tmp.children
this.floorData = tmp ? tmp.children : []
},
searchChange(params, done) {
this.page.currentPage = 1;
@ -547,13 +622,7 @@ import {getList} from '@/api/equipment/drawClassify'
},
onLoad() {
this.loading = true;
// this.data = [
// {name:'分类一',build:'1号楼',floor:'1层',img:'../../../img/cad/peidian/4DS001.png'},
// {name:'分类二',build:"1号楼",floor:'2层',img:'../../../img/cad/peidianxiang/6BS005.png'},
// ];
// this.page.total = this.data.length;
// this.loading = false
getDrawList({current:this.page.currentPage,size:this.page.pageSize,draweClassId:this.draweClassId,type:this.type,build:this.build,floor:this.floor}).then(res =>{
getDrawList({current:this.page.currentPage,size:this.page.pageSize,draweClass:this.draweClass,region:this.type,build:this.build,floor:this.floor}).then(res =>{
this.data = res.data.data.records;
this.page.total = res.data.data.total;
this.loading = false
@ -570,36 +639,25 @@ import {getList} from '@/api/equipment/drawClassify'
},
// 编辑按钮
handleEdit(row){
this.dataRules.build[0].required = true
this.dataForm = JSON.parse(JSON.stringify(row));
this.dialogTitle = '编辑图纸'
this.dialogType = 'edit'
this.fileList = []
this.imgList = []
if(this.dataForm.type == 1){
getDict({current:1,size:100,parentId: '1721347822365741058'}).then(res =>{
console.log('res ====>',res)
this.buildData = res.data.data
let tmp = this.buildData.find(item => item.dictKey == this.dataForm.build)
this.floorData = tmp.children;
})
}else if(this.dataForm.type == 2){
getDict({current:1,size:100,parentId: '1721406335628627969'}).then(res =>{
console.log('res ====>',res)
this.buildData = res.data.data
let tmp = this.buildData.find(item => item.dictKey == this.dataForm.build)
this.floorData = tmp.children;
})
}
let imgData = this.dataForm.url.split(',')
let nameData = this.dataForm.originalName.split(',')
imgData.map(item =>{
this.fileList.push({url:item})
this.imgList.push({url:item})
})
nameData.map((item,index) =>{
this.imgList[index].name = nameData[index]
})
console.log('img ====>',this.imgList)
this.regionData = this.classifyData ? this.classifyData.find(item => item.dictKey == this.dataForm.draweClass) ? this.classifyData.find(item => item.dictKey == this.dataForm.draweClass).children : [] : []
this.buildData = this.regionData ? this.regionData.find(item => item.dictKey == this.dataForm.region) ? this.regionData.find(item => item.dictKey == this.dataForm.region).children : [] : []
this.floorData = this.buildData ? this.buildData.find(item => item.dictKey == this.dataForm.build) ? this.buildData.find(item => item.dictKey == this.dataForm.build).children : [] : []
if(this.dataForm.draweClass == '2' && this.dataForm.region == '2-2'){
this.dataRules.build[0].required = false
}else{
this.dataRules.build[0].required = true
}
setTimeout(() =>{
this.dialogVisible = true
},200)
@ -615,20 +673,33 @@ import {getList} from '@/api/equipment/drawClassify'
}).then(res =>{
if(res.data.code == 200){
this.onLoad();
this.gettree()
this.$message.success('删除成功')
}
})
},
// 树节点点击
nodeClick(data,node){
this.currentKey = data.dictKey
this.isChecked = true
let result = this.findParent(this.treeData,data)
this.draweClassId = result.find(item => item.type == 'classify') ? result.find(item => item.type == 'classify').id : ''
this.type = result.find(item => item.type == 'area') ? result.find(item => item.type == 'area').id : ''
this.build = result.find(item => item.type == 'build') ? result.find(item => item.type == 'build').id : ''
this.floor = result.find(item => item.type == 'floor') ? result.find(item => item.type == 'floor').id : ''
console.log('result ====>',result)
this.draweClass = result[result.length - 1] ? result[result.length - 1].dictKey : ''
this.type = result[result.length - 2] ? result[result.length - 2].dictKey : ''
this.build = result[result.length - 3] ? result[result.length - 3].dictKey : ''
this.floor = result[result.length - 4] ? result[result.length - 4].dictKey : ''
this.onLoad()
},
// 树节点被展开
nodeExpand(data,node){
this.defaultTree.push(data.dictKey)
},
// 树节点关闭
nodeCollapse(data,node){
console.log('default ====>',this.defaultTree)
console.log('data ====>',data)
let arr = this.defaultTree.filter(item => item !== data.dictKey)
this.defaultTree = arr
},
// 根据子节点查找父节点
findParent(data, val) {
for (let i = 0; i < data.length; i++) {

Write Preview
Loading…
Cancel
Save