修改后台图纸管理列表页

main
jinna 2 years ago
parent 5132b5ed7d
commit a9489e9bf5
  1. 84
      src/api/equipment/drawManage.js
  2. 385
      src/views/equipment/drawManage.vue

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

@ -5,8 +5,18 @@
<div class="box"> <div class="box">
<el-scrollbar> <el-scrollbar>
<basic-container> <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> --> <!-- <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> </basic-container>
</el-scrollbar> </el-scrollbar>
</div> </div>
@ -47,9 +57,9 @@
end-placeholder="结束日期">> end-placeholder="结束日期">>
</el-date-picker> </el-date-picker>
</template> --> </template> -->
<template slot="type" slot-scope="scope"> <!-- <template slot="type" slot-scope="scope">
{{ scope.row.type == 1 ? '业务区' : '塔台' }} {{ scope.row.type == 1 ? '业务区' : '塔台' }}
</template> </template> -->
<template slot="url" slot-scope="scope"> <template slot="url" slot-scope="scope">
<div style="display:flex;flex-wrap:wrap;"> <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> <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> </avue-crud>
<el-dialog custom-class="drawClass" :title="dialogTitle" :visible.sync="dialogVisible" width="50%" :modal-append-to-body="false"> <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 ref="form" :model="dataForm" label-width="120px" :rules="dataRules">
<el-form-item label="图纸分类:" style="width: 100%;display: inline-block;" prop="draweClassId"> <el-form-item label="图纸分类:" style="width: 100%;display: inline-block;" prop="draweClass">
<el-select size="small" v-model="dataForm.draweClassId" style="width:50%"> <el-select size="small" v-model="dataForm.draweClass" style="width:50%" @change="changeDraweClass">
<el-option v-for="item in classifyData" :key="item.id" :value="item.id" :label="item.name"></el-option> <el-option v-for="item in classifyData" :key="item.dictKey" :value="item.dictKey" :label="item.dictValue"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="区域:" style="width: 100%;display: inline-block;" prop="type"> <el-form-item label="区域:" style="width: 100%;display: inline-block;" prop="region">
<el-select size="small" v-model="dataForm.type" style="width:50%" @change="changeArea"> <el-select size="small" v-model="dataForm.region" style="width:50%" @change="changeArea">
<el-option :value="1" label="业务区"></el-option> <el-option v-for="item in regionData" :key="item.dictKey" :value="item.dictKey" :label="item.dictValue" ></el-option>
<el-option :value="2" label="塔台"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="楼号:" style="width: 100%;display: inline-block;" prop="build"> <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-tooltip class="item" v-if="!dataForm.region" effect="dark" content="请先选择区域" placement="top">
<el-select disabled size="small" v-model="dataForm.build" style="width:50%" @change="changeBuild"> <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-option v-for="item in buildData" :key="item.dictKey" :value="item.dictKey" :label="item.dictValue"></el-option>
</el-select> </el-select>
</el-tooltip> </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-option v-for="item in floorData" :key="item.dictKey" :value="item.dictKey" :label="item.dictValue"></el-option>
</el-select> </el-select>
</el-form-item> </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-form-item label="图纸:" style="width:100%;display: inline-block;" prop="url">
<el-upload <el-upload
:class="imgList.length >= 5 ? 'hide' : ''" :class="imgList.length >= 1 ? 'hide' : ''"
action="/api/blade-desk/oss/put-file" action="/api/blade-desk/oss/put-file"
list-type="picture-card" list-type="picture-card"
:on-success="handleSuccess" :on-success="handleSuccess"
:before-remove="beforeRemove" :before-remove="beforeRemove"
:on-remove="handleRemove" :on-remove="handleRemove"
:file-list="fileList" :file-list="fileList"
:limit="5" :limit="1"
accept=".png,.PNg,.jpg,.JPG,.jpeg,.JPEG,.bmp,.BMP" accept=".png,.PNg,.jpg,.JPG,.jpeg,.JPEG,.bmp,.BMP"
> >
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
@ -146,6 +158,7 @@ import {getList} from '@/api/equipment/drawClassify'
url:'', url:'',
srcList:[], srcList:[],
classifyData:[], // classifyData:[], //
regionData:[],//
buildData:[], buildData:[],
floorData:[], floorData:[],
option: { option: {
@ -189,7 +202,7 @@ import {getList} from '@/api/equipment/drawClassify'
}, },
{ {
label: "区域", label: "区域",
prop: "type", prop: "regionName",
align: "center", align: "center",
addDisplay:false, addDisplay:false,
editDisplay:false, editDisplay:false,
@ -197,7 +210,7 @@ import {getList} from '@/api/equipment/drawClassify'
}, },
{ {
label: "图纸分类", label: "图纸分类",
prop: "draweClassId", prop: "draweClass",
type:'select', type:'select',
align: "center", align: "center",
hide:true, hide:true,
@ -218,6 +231,13 @@ import {getList} from '@/api/equipment/drawClassify'
align: "center", align: "center",
width:120, width:120,
}, },
{
label: "图纸名称",
prop: "originalName",
align: "center",
overHidden:true,
width:120,
},
{ {
label: "图纸", label: "图纸",
prop: "url", prop: "url",
@ -233,6 +253,7 @@ import {getList} from '@/api/equipment/drawClassify'
overHidden:true, overHidden:true,
width:120, width:120,
}, },
{ {
label: '图纸', label: '图纸',
prop: 'string', prop: 'string',
@ -284,7 +305,17 @@ import {getList} from '@/api/equipment/drawClassify'
data:[], data:[],
loading:false, loading:false,
treeOption:{ treeOption:{
filter:false filter:false,
props: {
labelText: '标题',
label: 'dictValue',
value: 'dictKey',
children: 'children'
}
},
defaultProps: {
children: 'children',
label: 'dictValue'
}, },
treeData:[ treeData:[
// { // {
@ -329,21 +360,17 @@ import {getList} from '@/api/equipment/drawClassify'
// ] // ]
// } // }
], ],
defaultProps: { draweClass:'',//id
children: 'children',
label: 'label'
},
draweClassId:'',//id
build:'',// build:'',//
floor:'', // floor:'', //
type:'',// type:'',//
dataRules:{ dataRules:{
draweClassId:[{ draweClass:[{
required:true, required:true,
message:'请选择图纸类型', message:'请选择图纸类型',
trigger:'blur' trigger:'blur'
}], }],
type:[{ region:[{
required:true, required:true,
message:'请选择区域', message:'请选择区域',
trigger:'blur' trigger:'blur'
@ -353,56 +380,101 @@ import {getList} from '@/api/equipment/drawClassify'
message:'请选择楼号', message:'请选择楼号',
trigger:'blur' trigger:'blur'
}], }],
originalName:[{
required:true,
message:'请输入图纸名称',
trigger:'blur'
}]
}, },
imgList:[], imgList:[],
fileList:[], fileList:[],
dialogType:'', dialogType:'',
editId:'', editId:'',
isChecked:false,
defaultTree:[],
currentKey:''
} }
}, },
created(){ created(){
this.getTypeList()
this.gettree() this.gettree()
}, },
methods:{ methods:{
getTypeList(){
getList({current:1,size:100}).then(res =>{
this.classifyData = res.data.data.records
console.log('data ======>',this.classifyData)
})
},
gettree(){ 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 =>{ getTerrData().then(res =>{
console.log('res =====>',res) console.log('res ===>',res)
this.treeData = res.data.data 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){ changeArea(val){
this.dataForm.build = '' this.dataForm.build = ''
if(val == 1){ let tmp = this.regionData.find(item => item.dictKey == val)
getDict({current:1,size:100,parentId: '1721347822365741058'}).then(res =>{ this.buildData = tmp ? tmp.children : []
console.log('res ====>',res) if(this.dataForm.region == '2-2' && this.dataForm.draweClass == '2'){
this.buildData = res.data.data this.dataRules.build[0].required = false
}) }else{
}else if(val == 2){ this.dataRules.build[0].required = true
getDict({current:1,size:100,parentId: '1721406335628627969'}).then(res =>{
console.log('res ====>',res)
this.buildData = res.data.data
})
} }
}, },
// //
handleAdd(){ handleAdd(){
this.dialogTitle = '新增图纸' this.dialogTitle = '新增图纸'
this.dialogType = 'add' this.dialogType = 'add'
this.dataForm = { this.$nextTick(() =>{
draweClassId:'', this.$refs.form.clearValidate()
type:'', })
build:'', this.dataRules.build[0].required = true
floor:'', if(this.isChecked){
url:'' 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 = {
draweClass:'',
region:'',
originalName:'',
build:'',
floor:'',
url:''
}
} }
this.imgList = [] this.imgList = []
this.fileList = [] this.fileList = []
setTimeout(() =>{ setTimeout(() =>{
@ -435,96 +507,99 @@ import {getList} from '@/api/equipment/drawClassify'
this.$refs['form'].validate((valid) => { this.$refs['form'].validate((valid) => {
console.log('form ====>',this.dataForm) console.log('form ====>',this.dataForm)
console.log('img ====>',this.imgList) console.log('img ====>',this.imgList)
if(this.dialogType == 'add'){ if(valid){
if(this.imgList.length == 0){ if(this.imgList.length == 0){
this.$message.error('请上传图片') this.$message.error('请上传图片')
}else{ }else{
let imgUrl = [] if(this.dialogType == 'add'){
let nameArr = [] let imgUrl = []
this.imgList.map(item =>{ let nameArr = []
imgUrl.push(item.url) this.imgList.map(item =>{
nameArr.push(item.name) imgUrl.push(item.url)
}) // nameArr.push(item.name)
let params = { })
draweClassId:this.dataForm.draweClassId, let params = {
type:this.dataForm.type, draweClass:this.dataForm.draweClass,
build:this.dataForm.build, region:this.dataForm.region,
floor:this.dataForm.floor, build:this.dataForm.build,
url:imgUrl.join(','), floor:this.dataForm.floor,
originalName:nameArr.join(','), url:imgUrl.join(','),
remark:this.dataForm.remark // originalName:nameArr.join(','),
} originalName:this.dataForm.originalName,
console.log('params ===>',params) remark:this.dataForm.remark
addDraw(params).then(res =>{
console.log('res ====>',res)
if(res.data.code == 200){
this.page.currentPage = 1;
this.onLoad()
this.$message.success('新增成功')
this.dialogVisible = false
}else{
this.onLoad()
this.$message.error('新增失败')
this.dialogVisible = false
} }
}).catch(err =>{ console.log('params =====>',params)
this.onLoad() addDraw(params).then(res =>{
this.$message({ console.log('res ====>',res)
type: 'error', if(res.data.code == 200){
message: err this.page.currentPage = 1;
}); this.onLoad()
this.dialogVisible = false this.gettree()
}) // this.$nextTick(() =>{
} // console.log('currentKey ====>',this.currentKey)
}else if(this.dialogType == 'edit'){ // this.$refs['tree'].setCurrentKey('3-1-1-7')
if(this.imgList.length == 0){ // })
this.$message.error('请上传图片') this.$message.success('新增成功')
}else{ this.dialogVisible = false
let imgUrl = [] }else{
let nameArr = [] this.onLoad()
this.imgList.map(item =>{ this.$message.error('新增失败')
imgUrl.push(item.url) this.dialogVisible = false
nameArr.push(item.name) }
}) }).catch(err =>{
let params = {
id:this.dataForm.id,
draweClassId:this.dataForm.draweClassId,
type:this.dataForm.type,
build:this.dataForm.build,
floor:this.dataForm.floor,
url:imgUrl.join(','),
originalName:nameArr.join(','),
remark:this.dataForm.remark
}
console.log('params ===>',params)
editDraw(params).then(res =>{
if(res.data.code == 200){
this.onLoad() this.onLoad()
this.$message.success('修改成功') this.$message({
type: 'error',
message: err
});
this.dialogVisible = false this.dialogVisible = false
}else{ })
}else if(this.dialogType == 'edit'){
let imgUrl = []
let nameArr = []
this.imgList.map(item =>{
imgUrl.push(item.url)
})
let params = {
id:this.dataForm.id,
draweClass:this.dataForm.draweClass,
type:this.dataForm.region,
build:this.dataForm.build,
floor:this.dataForm.floor,
url:imgUrl.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{
this.onLoad()
this.$message.error('修改失败')
this.dialogVisible = false
}
}).catch(err =>{
this.onLoad() this.onLoad()
this.$message.error('修改失败') this.$message({
type: 'error',
message: err
});
this.dialogVisible = false this.dialogVisible = false
} })
}).catch(err =>{ }
this.onLoad() }
this.$message({
type: 'error',
message: err
});
this.dialogVisible = false
})
}
} }
}) })
}, },
// //
changeBuild(val){ changeBuild(val){
this.dataForm.floor = '' this.dataForm.floor = ''
let tmp = this.buildData.find(item => item.dictKey == val) let tmp = this.buildData.find(item => item.dictKey == val)
this.floorData = tmp.children this.floorData = tmp ? tmp.children : []
}, },
searchChange(params, done) { searchChange(params, done) {
this.page.currentPage = 1; this.page.currentPage = 1;
@ -547,13 +622,7 @@ import {getList} from '@/api/equipment/drawClassify'
}, },
onLoad() { onLoad() {
this.loading = true; this.loading = true;
// this.data = [ getDrawList({current:this.page.currentPage,size:this.page.pageSize,draweClass:this.draweClass,region:this.type,build:this.build,floor:this.floor}).then(res =>{
// {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 =>{
this.data = res.data.data.records; this.data = res.data.data.records;
this.page.total = res.data.data.total; this.page.total = res.data.data.total;
this.loading = false this.loading = false
@ -570,36 +639,25 @@ import {getList} from '@/api/equipment/drawClassify'
}, },
// //
handleEdit(row){ handleEdit(row){
this.dataRules.build[0].required = true
this.dataForm = JSON.parse(JSON.stringify(row)); this.dataForm = JSON.parse(JSON.stringify(row));
this.dialogTitle = '编辑图纸' this.dialogTitle = '编辑图纸'
this.dialogType = 'edit' this.dialogType = 'edit'
this.fileList = [] this.fileList = []
this.imgList = [] 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 imgData = this.dataForm.url.split(',')
let nameData = this.dataForm.originalName.split(',')
imgData.map(item =>{ imgData.map(item =>{
this.fileList.push({url:item}) this.fileList.push({url:item})
this.imgList.push({url:item}) this.imgList.push({url:item})
}) })
nameData.map((item,index) =>{ this.regionData = this.classifyData ? this.classifyData.find(item => item.dictKey == this.dataForm.draweClass) ? this.classifyData.find(item => item.dictKey == this.dataForm.draweClass).children : [] : []
this.imgList[index].name = nameData[index] 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 : [] : []
console.log('img ====>',this.imgList) if(this.dataForm.draweClass == '2' && this.dataForm.region == '2-2'){
this.dataRules.build[0].required = false
}else{
this.dataRules.build[0].required = true
}
setTimeout(() =>{ setTimeout(() =>{
this.dialogVisible = true this.dialogVisible = true
},200) },200)
@ -615,20 +673,33 @@ import {getList} from '@/api/equipment/drawClassify'
}).then(res =>{ }).then(res =>{
if(res.data.code == 200){ if(res.data.code == 200){
this.onLoad(); this.onLoad();
this.gettree()
this.$message.success('删除成功') this.$message.success('删除成功')
} }
}) })
}, },
// //
nodeClick(data,node){ nodeClick(data,node){
this.currentKey = data.dictKey
this.isChecked = true
let result = this.findParent(this.treeData,data) let result = this.findParent(this.treeData,data)
this.draweClassId = result.find(item => item.type == 'classify') ? result.find(item => item.type == 'classify').id : '' this.draweClass = result[result.length - 1] ? result[result.length - 1].dictKey : ''
this.type = result.find(item => item.type == 'area') ? result.find(item => item.type == 'area').id : '' this.type = result[result.length - 2] ? result[result.length - 2].dictKey : ''
this.build = result.find(item => item.type == 'build') ? result.find(item => item.type == 'build').id : '' this.build = result[result.length - 3] ? result[result.length - 3].dictKey : ''
this.floor = result.find(item => item.type == 'floor') ? result.find(item => item.type == 'floor').id : '' this.floor = result[result.length - 4] ? result[result.length - 4].dictKey : ''
console.log('result ====>',result)
this.onLoad() 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) { findParent(data, val) {
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {

Loading…
Cancel
Save