ljf
/
shuili-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 图层目录管理

sy-water-data-board-ui
yantingyu 1 year ago
parent
2c59603d90
commit
352d15cf80
6 changed files with 570 additions and 3 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. 31
      src/api/aiSupervision/layerConfigApi.js
  2. 1
      src/utils/request.js
  3. 2
      src/views/aiSupervision/layerManage/index.vue
  4. 283
      src/views/aiSupervision/layerManage/resource/LayerDetails.vue
  5. 249
      src/views/aiSupervision/layerManage/resource/index.vue
  6. 7
      vue.config.js

31
src/api/aiSupervision/layerConfigApi.js
View File

@ -0,0 +1,31 @@
import request from '@/utils/request.js';
export function addOrEditDirectoryApi(options) {
return request({
url: `/map/layerDir/saveDir`,
method: 'post',
params: {
id: options.id || '',
name: options.name,
orderNm: -1,
parentId: 'root'
}
});
}
export function getDirectoryApi() {
return request({
url: `/map/layerDir/getAllTreeDir`,
method: 'get'
});
}
export function deleteDirectoryApi(id) {
return request({
url: `/map/layerDir/deleteDir`,
method: 'delete',
params: {
dirId: id
}
});
}

1
src/utils/request.js
View File

@ -95,5 +95,4 @@ service.interceptors.response.use(res => {
return Promise.reject(error)
}
)
export default service

2
src/views/aiSupervision/layerManage/index.vue
View File

@ -1,6 +1,6 @@
<template>
<Layout>
<router-view />
<!-- <router-view /> -->
</Layout>
</template>

283
src/views/aiSupervision/layerManage/resource/LayerDetails.vue
View File

@ -0,0 +1,283 @@
<template>
<div class="app-container">
<el-header>
<i class="el-icon-back" @click="goBack"></i>
资源目录管理
<span>/详情</span>
</el-header>
<el-container>
<div class="top">
<span class="title">图层资源目录详情</span>
<div class="directoryInfo">
<span> 图层资源目录名称：{{ directoryInfo.name }}</span>
<span> 图层资源目录编号： {{ directoryInfo.id }}</span>
<span> 图层数量： {{ (directoryInfo.children && directoryInfo.children.length) || 0 }}</span>
<span> 创建时间： {{ directoryInfo.pubDate }}</span>
<span> 创建人：{{ directoryInfo.createUser }} </span>
</div>
</div>
<div class="middle">
<el-button type="primary" plain>添加图层</el-button>
<div class="keyword-filter">
<el-input class="keyword-input" placeholder="请输入内容" v-model="keyword" clearable> </el-input>
<el-button class="search-btn">搜索</el-button>
</div>
</div>
<div class="content">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column type="index" label="序号" width="50" header-align="center"> </el-table-column>
<el-table-column prop="date" label="图层资源目录编号" width="180"> </el-table-column>
<el-table-column prop="name" label="图层资源目录名称" width="180"> </el-table-column>
<el-table-column prop="address" label="创建时间"> </el-table-column>
<el-table-column prop="address" label="创建人"> </el-table-column>
<el-table-column prop="address" label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination>
</div>
</el-container>
</div>
</template>
<script>
import { getDirectoryApi } from '@/api/aiSupervision/layerConfigApi.js';
export default {
props: ['directoryInfo'],
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
keyword: ''
};
},
mounted() {
console.log(this.directoryInfo);
},
methods: {
goBack() {
this.$emit('goback');
}
}
};
</script>
<style lang="scss" scoped>
.app-container {
display: flex;
flex-direction: column;
gap: 15px;
}
header,
.el-container,
aside {
background-color: #fff;
}
header {
display: flex;
align-items: center;
border-radius: 10px;
gap: 10px;
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
.el-icon-back {
cursor: pointer;
&:hover {
color: rgb(135, 231, 140);
}
}
span {
color: #999;
font-style: italic;
font-size: 14px;
}
}
.el-container {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
padding-top: 5px;
border-radius: 3px;
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
.top {
display: flex;
flex-direction: column;
gap: 15px;
padding: 20px 40px;
width: 100%;
border-bottom: 2px solid #d9d9d9;
.title {
font-weight: bold;
font-size: 16px;
}
.directoryInfo {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 5px 10px;
}
}
.middle {
display: flex;
justify-content: space-between;
.keyword-filter {
display: flex;
border-radius: 4px;
border: 1px solid #d9d9d9;
::v-deep .el-input__inner {
border: none;
}
.search-btn {
border: none;
border-radius: 0px;
border-left: 1px solid #d9d9d9;
}
}
}
}
</style>

249
src/views/aiSupervision/layerManage/resource/index.vue
View File

@ -1,3 +1,250 @@
<template>
<div class="app-container">资源目录</div>
<div class="app-container" v-if="!isShowLayerDetails">
<el-header>资源目录管理</el-header>
<el-container>
<el-main>
<div class="top">
<el-button type="primary" plain @click="dialogFormVisible = true">新增图层资源目录</el-button>
<el-dialog title="图层资源目录名称" :visible.sync="dialogFormVisible">
<el-form>
<el-form-item label="目录名称" :label-width="'120px'">
<el-input v-model="currentDirectory.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="addOrEditDirectory">确 定</el-button>
</div>
</el-dialog>
<div class="keyword-filter">
<el-input class="keyword-input" placeholder="请输入内容" v-model="keyword" clearable> </el-input>
<el-button class="search-btn">搜索</el-button>
</div>
</div>
<div class="table">
<el-table :data="filteredData" stripe style="width: 100%">
<el-table-column
type="index"
:index="(index) => index + (pageOptions.currentPage - 1) * pageOptions.pageSize + 1"
label="序号"
width="50"
header-align="center"
>
</el-table-column>
<el-table-column prop="id" label="图层资源目录编号" width="180"> </el-table-column>
<el-table-column prop="name" label="图层资源目录名称" width="180"> </el-table-column>
<el-table-column prop="relationSceneCount" label="关联场景" width="100"> </el-table-column>
<el-table-column prop="pubDate" label="创建时间"> </el-table-column>
<el-table-column prop="createUser" label="创建人"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="showDetails(scope.$index, scope.row)">详情</el-button>
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:current-page.sync="pageOptions.currentPage"
:total="dataAfterSearch.length"
:page-size="pageOptions.pageSize"
@current-change="pageChange"
>
</el-pagination>
</div>
</el-main>
</el-container>
</div>
<LayerDetailsVue v-else @goback="isShowLayerDetails = false" :directoryInfo="directoryInfo"></LayerDetailsVue>
</template>
<script>
import LayerDetailsVue from './LayerDetails.vue';
import { getDirectoryApi, addOrEditDirectoryApi, deleteDirectoryApi } from '@/api/aiSupervision/layerConfigApi.js';
export default {
components: {
LayerDetailsVue
},
data() {
return {
tableData: [],
currentDirectory: {
name: '',
id: null
},
pageOptions: {
currentPage: 1,
pageSize: 12
},
defaultProps: {
children: 'children',
label: 'label'
},
keyword: '',
dialogFormVisible: false, //是否显示 新增目录 对话框
isShowLayerDetails: false, //是否跳转 图层详情界面
directoryInfo: null //当前 详情界面 展示的信息对象
};
},
computed: {
dataAfterSearch() {
// 按关键字筛
return this.tableData.filter(
(data) => !this.keyword || data.name.toLowerCase().includes(this.keyword.toLowerCase())
);
},
filteredData() {
// 按页码筛
return this.dataAfterSearch.slice(
(this.pageOptions.currentPage - 1) * this.pageOptions.pageSize,
this.pageOptions.currentPage * this.pageOptions.pageSize
);
}
},
methods: {
showDetails(index, row) {
this.isShowLayerDetails = true;
this.directoryInfo = row;
},
pageChange(currentPage) {
this.pageOptions.currentPage = currentPage;
},
async getDirectory() {
const res = await getDirectoryApi();
this.tableData = res.data[0].children;
this.pageOptions.currentPage = 1;
},
closeDialog() {
this.currentDirectory.name = '';
this.currentDirectory.id = '';
this.dialogFormVisible = false;
},
handleEdit(index, row) {
console.log(row);
this.currentDirectory.name = row.name;
this.currentDirectory.id = row.id;
this.dialogFormVisible = true;
},
// 新增目录
async addOrEditDirectory() {
const reg = /^(\w|[\u4e00-\u9fa5]){3,30}$/g;
if (!reg.test(this.currentDirectory.name)) {
this.$message({
type: 'info',
message: '格式有误，目录名称仅支持中文、数字、字母、下划线，最大长度不超过30'
});
return;
}
const res = await addOrEditDirectoryApi(this.currentDirectory);
if (res.success) {
this.$message({
type: 'success',
message: '新增目录成功!'
});
this.getDirectory();
} else {
this.$message({
type: 'info',
message: '新增目录失败'
});
}
this.closeDialog();
},
handleDelete(row) {
this.$confirm(
'删除目录将同时删除该图层资源目录数据以及关联的图层数据，删除后将不可恢复，是否继续删除？',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(async () => {
const res = await deleteDirectoryApi(row.id);
if (res.success) {
this.getDirectory();
this.$message({
type: 'success',
message: '删除成功!'
});
}
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
mounted() {
this.getDirectory();
}
};
</script>
<style scoped lang="scss">
.app-container {
display: flex;
flex-direction: column;
gap: 15px;
}
.el-container {
flex: 1;
overflow-y: auto;
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
border-radius: 10px;
.el-main {
display: flex;
flex-direction: column;
.top {
display: flex;
justify-content: space-between;
::v-deep .el-dialog__body {
.el-input__inner {
width: 500px;
}
}
.keyword-filter {
display: flex;
border-radius: 4px;
border: 1px solid #d9d9d9;
::v-deep .el-input__inner {
border: none;
}
.search-btn {
border: none;
border-radius: 0px;
border-left: 1px solid #d9d9d9;
}
}
}
.table {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-evenly;
.el-pagination {
text-align: center;
}
}
}
}
header,
.el-container,
aside {
background-color: #fff;
}
header {
display: flex;
align-items: center;
border-radius: 3px;
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}
</style>

7
vue.config.js
View File

@ -51,6 +51,13 @@ module.exports = {
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '/tianhui-admin-web'
}
},
"iserver":{
target:"http://172.16.32.63:52111/iserver/services",
changeOrigin: true,
pathRewrite: {
'iserver': ''
}
}
},
disableHostCheck: true

Write Preview
Loading…
Cancel
Save