地图草稿列表增加一键删除按钮

This commit is contained in:
yuan 2021-09-15 16:54:49 +08:00
parent d16a79e15d
commit 7b3a441b5d
4 changed files with 236 additions and 188 deletions

View File

@ -51,6 +51,14 @@ export function deleteMap(data) {
});
}
/** 删除所有草稿地图 */
export function deleteAllMap() {
return request({
url: `/api/mapBuild/delete/all`,
method: 'delete'
})
}
/** 保存草稿地图*/
export function saveMap(data) {
return request({

View File

@ -5,6 +5,7 @@ export default {
pleaseEnter: 'please input',
sketchMap: 'Draft map list',
newConstruction: 'Create',
deleteAllMap: 'Delete All',
importMap: 'Import the map',
createNewMap: 'A new map',
normalCreate: 'The normal to create',

View File

@ -5,6 +5,7 @@ export default {
pleaseEnter: '请输入',
sketchMap: '草稿地图列表',
newConstruction: '新建',
deleteAllMap: '清空',
bothCreate: '批量生成',
importMap: '导入',
createNewMap: '新建地图',

View File

@ -6,18 +6,30 @@
<div class="text_item">
<el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
<div class="tree_box">
<el-tree ref="tree" :data="treeList" node-key="id" :props="defaultProps" current-node-key highlight-current :span="22" :filter-node-method="filterNode" @node-click="clickEvent" @node-contextmenu="showContextMenu">
<span slot-scope="{ node:tnode, data }">
<span class="el-icon-tickets" :style="{color: data.valid ? 'green':''}" />
<el-tree
ref="tree"
:data="treeList"
node-key="id"
:props="defaultProps"
current-node-key
highlight-current
:span="22"
:filter-node-method="filterNode"
@node-click="clickEvent"
@node-contextmenu="showContextMenu"
>
<span slot-scope="{ node: tnode, data }">
<span class="el-icon-tickets" :style="{ color: data.valid ? 'green' : '' }" />
<span>&nbsp;{{ tnode.label }}</span>
</span>
</el-tree>
</div>
<div class="buttonList">
<el-button size="small" type="primary" class="eachButton uploadDemo " @click="importMap">
<el-button size="small" type="primary" class="eachButton uploadDemo" @click="importMap">
{{ $t('map.importMap') }}
</el-button>
<el-button size="small" type="primary" class="eachButton" @click="createMap">{{ $t('map.newConstruction') }}</el-button>
<el-button size="small" type="danger" class="eachButton" @click="deleteAllMap">{{ $t('map.deleteAllMap') }}</el-button>
</div>
<map-import ref="mapImport" @loadInitData="loadInitData" />
<map-operate-menu
@ -33,193 +45,219 @@
</div>
</template>
<script>
import { DeviceMenu } from '@/scripts/ConstDic';
import { listMap } from '@/api/jmap/mapdraft';
import { UrlConfig } from '@/scripts/ConstDic';
import { removeSessionStorage } from '@/utils/auth';
import MapOperateMenu from './mapmanage/operateMenu';
import MapImport from './mapmanage/mapImport';
import { getSessionStorage } from '@/utils/auth';
import { DeviceMenu } from '@/scripts/ConstDic'
import { listMap, deleteAllMap } from '@/api/jmap/mapdraft'
import { UrlConfig } from '@/scripts/ConstDic'
import { removeSessionStorage } from '@/utils/auth'
import MapOperateMenu from './mapmanage/operateMenu'
import MapImport from './mapmanage/mapImport'
import { getSessionStorage } from '@/utils/auth'
export default {
name: 'UserMapList',
components: {
MapOperateMenu,
MapImport
},
data() {
return {
loading: true,
defaultShowKeys: [],
filterText: '',
treeData: [],
treeList: [],
selected: {},
defaultProps: {
children: 'children',
label: 'name'
},
point: {
x: 0,
y: 0
},
editModel: {},
lineCode: '',
loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts']
};
},
computed: {
project() {
return getSessionStorage('project');
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
beforeDestroy () {
removeSessionStorage('demonList');
},
mounted() {
this.loadInitData();
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
createMap() {
this.$emit('createMap');
},
async loadInitData() {
this.loading = true;
this.treeData = this.treeList = [];
try {
const res = await listMap({ drawWay:true});
res.data && res.data.forEach(elem=>{
elem.type = 'map';
elem.children = [
{
id: '1',
name: this.$t('designPlatform.mapDesign'),
type: 'mapDesign',
mapId: elem.id,
mapName: elem.name,
lineCode: elem.lineCode
},
{
id: '2',
name: '系统配置绘图',
type: 'mapSystem',
mapId: elem.id,
mapName: elem.name,
lineCode: elem.lineCode
}
];
});
this.treeData = res.data;
this.treeList = this.filterText
? res.data.filter(elem => { return elem.name.includes(this.filterText); })
: res.data;
this.loading = false;
} catch (error) {
this.loading = false;
this.$messageBox(this.$t('error.refreshFailed'));
}
},
clickEvent(obj, data, ele) {
switch (obj.type) {
case 'mapDesign': {
if (this.loadingProjectList.includes(this.project)) {
this.$store.dispatch('app/transitionAnimations');
}
this.$router.push({ path: `${UrlConfig.newDesignuser.mapDraw}/${obj.mapId}/draft`, query: { name: obj.mapName, lineCode:obj.lineCode } });
break;
}
case 'mapSystem': {
if (this.loadingProjectList.includes(this.project)) {
this.$store.dispatch('app/transitionAnimations');
}
this.$router.push({ path: `/design/usermap/map/systemDraw/${obj.mapId}/draft`, query: { name: obj.mapName, lineCode:obj.lineCode } });
break;
}
}
},
showContextMenu(e, obj, node, vueElem) {
this.$refs.tree.setCurrentKey(obj.id);
this.$refs.tree.currentNode = node;
if (obj && obj.type == 'map') {
e.preventDefault();
const menu = DeviceMenu.Map;
this.point = {
x: e.clientX,
y: e.clientY
};
this.editModel = obj;
this.editModel.lineCode = obj.lineCode;
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
}
},
jlmap3d() {
this.$router.push({ path: '/design/jlmap3d/edit', query: { mapid: this.editModel.id } });
},
assetmanager3d() {
this.$router.push({ path: '/design/jlmap3d/assetmanager' });
},
importMap() {
this.$refs.mapImport.show();
}
name: 'UserMapList',
components: {
MapOperateMenu,
MapImport,
},
data() {
return {
loading: true,
defaultShowKeys: [],
filterText: '',
treeData: [],
treeList: [],
selected: {},
defaultProps: {
children: 'children',
label: 'name',
},
point: {
x: 0,
y: 0,
},
editModel: {},
lineCode: '',
loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts'],
}
};
},
computed: {
project() {
return getSessionStorage('project')
},
},
watch: {
filterText(val) {
this.$refs.tree.filter(val)
},
},
beforeDestroy() {
removeSessionStorage('demonList')
},
mounted() {
this.loadInitData()
},
methods: {
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
createMap() {
this.$emit('createMap')
},
deleteAllMap() {
this.$confirm('确定删除全部地图数据?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteAllMap().then(res => {
this.$message({
type: 'success',
message: '删除成功!',
})
this.loadInitData()
})
})
.catch(e => {})
},
async loadInitData() {
this.loading = true
this.treeData = this.treeList = []
try {
const res = await listMap({ drawWay: true })
res.data &&
res.data.forEach(elem => {
elem.type = 'map'
elem.children = [
{
id: '1',
name: this.$t('designPlatform.mapDesign'),
type: 'mapDesign',
mapId: elem.id,
mapName: elem.name,
lineCode: elem.lineCode,
},
{
id: '2',
name: '系统配置绘图',
type: 'mapSystem',
mapId: elem.id,
mapName: elem.name,
lineCode: elem.lineCode,
},
]
})
this.treeData = res.data
this.treeList = this.filterText
? res.data.filter(elem => {
return elem.name.includes(this.filterText)
})
: res.data
this.loading = false
} catch (error) {
this.loading = false
this.$messageBox(this.$t('error.refreshFailed'))
}
},
clickEvent(obj, data, ele) {
switch (obj.type) {
case 'mapDesign': {
if (this.loadingProjectList.includes(this.project)) {
this.$store.dispatch('app/transitionAnimations')
}
this.$router.push({
path: `${UrlConfig.newDesignuser.mapDraw}/${obj.mapId}/draft`,
query: { name: obj.mapName, lineCode: obj.lineCode },
})
break
}
case 'mapSystem': {
if (this.loadingProjectList.includes(this.project)) {
this.$store.dispatch('app/transitionAnimations')
}
this.$router.push({
path: `/design/usermap/map/systemDraw/${obj.mapId}/draft`,
query: { name: obj.mapName, lineCode: obj.lineCode },
})
break
}
}
},
showContextMenu(e, obj, node, vueElem) {
this.$refs.tree.setCurrentKey(obj.id)
this.$refs.tree.currentNode = node
if (obj && obj.type == 'map') {
e.preventDefault()
const menu = DeviceMenu.Map
this.point = {
x: e.clientX,
y: e.clientY,
}
this.editModel = obj
this.editModel.lineCode = obj.lineCode
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu })
}
},
jlmap3d() {
this.$router.push({ path: '/design/jlmap3d/edit', query: { mapid: this.editModel.id } })
},
assetmanager3d() {
this.$router.push({ path: '/design/jlmap3d/assetmanager' })
},
importMap() {
this.$refs.mapImport.show()
},
},
}
</script>
<style lang="scss" scoped>
.clearfix{
padding: 0 20px;
border-bottom: 1px solid #EBEEF5;
box-sizing: border-box;
height: 47px;
line-height: 47px;
position: absolute;
width:100%;
}
.text_item{
height: 100%;
padding-top: 47px;
.tree_box{
height: calc(100% - 89px);
overflow-y: auto;
}
}
.buttonList{
padding: 8px 0px 8px 0px;
border-top: 1px #ccc solid;
}
.eachButton{
margin-left:10px;
}
.uploadDemo {
position: relative;
overflow: hidden;
// float: right;
padding: 9px 15px;
margin-right: 3px;
cursor: pointer;
input {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
}
.map-list-main{
text-align:left;
height: 100%;
position: relative;
}
.clearfix {
padding: 0 20px;
border-bottom: 1px solid #ebeef5;
box-sizing: border-box;
height: 47px;
line-height: 47px;
position: absolute;
width: 100%;
}
.text_item {
height: 100%;
padding-top: 47px;
.tree_box {
height: calc(100% - 89px);
overflow-y: auto;
}
}
.buttonList {
padding: 8px 0px 8px 0px;
border-top: 1px #ccc solid;
}
.eachButton {
margin-left: 10px;
}
.uploadDemo {
position: relative;
overflow: hidden;
// float: right;
padding: 9px 15px;
margin-right: 3px;
cursor: pointer;
input {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
}
.map-list-main {
text-align: left;
height: 100%;
position: relative;
}
</style>