<template>
|
<div class="verSionBox">
|
<My-bread
|
:list="[
|
`${$t('dataManage.dataManage')}`,
|
`${$t('dataManage.projectManage')}`,
|
]"
|
></My-bread>
|
<el-divider />
|
<div class="verSionContent">
|
<div class="verSion_leftTree">
|
<el-tree
|
ref="tree"
|
:props="defaultProps"
|
node-key="id"
|
:data="dirList"
|
:expand-on-click-node="false"
|
:default-expand-all="false"
|
draggable
|
@node-click="handleNodeClick"
|
>
|
</el-tree>
|
</div>
|
<div class="verSion_rightContent">
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item>
|
<el-button
|
v-if="btnStatus.insert"
|
icon="el-icon-plus"
|
@click="insertProject"
|
:disabled="count1 != 0 ? true : false"
|
type="success"
|
>{{ $t('common.append') }}</el-button
|
>
|
</el-form-item>
|
</el-form>
|
<el-divider class="eldivider" />
|
<div style="height: 82%; padding: 1%; overflow: auto">
|
<el-table
|
ref="filterTable"
|
:data="dbTableData"
|
height="90%"
|
border
|
style="width: 100%"
|
>
|
<el-table-column
|
width="60"
|
type="index"
|
:label="$t('common.index')"
|
/>
|
<el-table-column
|
prop="projname"
|
:label="$t('dataManage.projectObj.projname')"
|
/>
|
<el-table-column
|
prop="projtype"
|
:label="$t('dataManage.projectObj.projtype')"
|
/>
|
<el-table-column
|
prop="geom"
|
:label="$t('dataManage.projectObj.location')"
|
/>
|
<el-table-column
|
prop="province"
|
:label="$t('dataManage.projectObj.province')"
|
/>
|
<el-table-column
|
prop="country"
|
:label="$t('dataManage.projectObj.country')"
|
/>
|
<el-table-column
|
prop="corpname"
|
:label="$t('dataManage.projectObj.corpname')"
|
/>
|
<el-table-column
|
prop="department"
|
:label="$t('dataManage.projectObj.department')"
|
/>
|
<el-table-column
|
prop="conperiod"
|
:label="$t('dataManage.projectObj.conperiod')"
|
/>
|
<el-table-column
|
prop="contents"
|
:label="$t('dataManage.projectObj.contents')"
|
/>
|
<el-table-column
|
prop="projstate"
|
:label="$t('dataManage.projectObj.projstate')"
|
/>
|
<el-table-column
|
prop="remarks"
|
:label="$t('dataManage.projectObj.remarks')"
|
/>
|
<el-table-column label="操作" width="200">
|
<template slot-scope="scope">
|
<el-button
|
v-if="btnStatus.delete"
|
@click="deleteProject(scope.row)"
|
icon="el-icon-delete"
|
size="mini"
|
type="danger"
|
>{{ $t('common.delete') }}</el-button
|
>
|
<el-button
|
v-if="btnStatus.update"
|
@click="EditProject(scope.row)"
|
icon="el-icon-edit"
|
type="info"
|
size="mini"
|
>{{ $t('common.update') }}</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="margin-top: 10px" class="pagination_box">
|
<!-- <el-pagination
|
@size-change="handleLoaderSizeChange"
|
@current-change="handleLoaderCurrentChange"
|
:current-page="listLoader.pageIndex"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="listLoader.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="count1"
|
>
|
</el-pagination> -->
|
</div>
|
<!-- <el-form
|
class="projFrom"
|
ref="form"
|
:model="projectFrom"
|
label-width="200px"
|
>
|
<el-form-item :label="$t('dataManage.projectObj.projname')">
|
<el-input
|
:disabled="true"
|
v-model="projectFrom.projname"
|
></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.projtype')">
|
<el-input
|
:disabled="true"
|
v-model="projectFrom.projtype"
|
></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.location')">
|
<el-input
|
:disabled="true"
|
v-model="projectFrom.location"
|
></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.province')">
|
<el-input
|
:disabled="true"
|
v-model="projectFrom.province"
|
></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.country')">
|
<el-input
|
:disabled="true"
|
v-model="projectFrom.country"
|
></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.corpname')">
|
<el-input
|
:disabled="true"
|
v-model="projectFrom.corpname"
|
></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.department')">
|
<el-input
|
:disabled="true"
|
v-model="projectFrom.department"
|
></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.conperiod')">
|
<el-input
|
:disabled="true"
|
v-model="projectFrom.conperiod"
|
></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.contents')">
|
<el-input
|
:disabled="true"
|
v-model="projectFrom.contents"
|
></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.projstate')">
|
<el-input
|
:disabled="true"
|
v-model="projectFrom.projstate"
|
></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.remarks')">
|
<el-input
|
:disabled="true"
|
v-model="projectFrom.remarks"
|
></el-input>
|
</el-form-item>
|
</el-form> -->
|
</div>
|
</div>
|
</div>
|
<el-dialog
|
:title="
|
behavior == '新增项目'
|
? `${$t('dataManage.projectObj.newProj')}`
|
: `${$t('dataManage.projectObj.editProj')}`
|
"
|
:visible.sync="outerVisible"
|
:before-close="outerClose"
|
>
|
<el-dialog
|
width="60%"
|
:title="$t('dataManage.projectObj.location')"
|
:visible.sync="innerVisible"
|
append-to-body
|
:before-close="innerClose"
|
>
|
<div style="height: 540px">
|
<project-ol v-if="showMap"></project-ol>
|
</div>
|
</el-dialog>
|
<div style="height: 540px; overflow: auto; padding: 1%">
|
<el-form
|
class="editFrom1"
|
ref="form"
|
:model="editFrom"
|
label-width="200px"
|
>
|
<el-form-item :label="$t('dataManage.projectObj.projname')">
|
<el-input v-model="editFrom.projname"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.projtype')">
|
<el-input v-model="editFrom.projtype"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.location')">
|
<el-input :disabled="true" v-model="editFrom.geom"></el-input>
|
<el-link
|
@click="ShowInner"
|
style="color: white; margin-left: 20px"
|
icon="el-icon-plus"
|
>
|
</el-link>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.province')">
|
<el-input v-model="editFrom.province"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.country')">
|
<el-input v-model="editFrom.country"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.corpname')">
|
<el-input v-model="editFrom.corpname"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.department')">
|
<el-input v-model="editFrom.department"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.conperiod')">
|
<el-input v-model="editFrom.conperiod"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.contents')">
|
<el-input v-model="editFrom.contents"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.projstate')">
|
<el-input v-model="editFrom.projstate"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.remarks')">
|
<el-input v-model="editFrom.remarks"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button
|
type="info"
|
:disabled="behavior != '新增项目' ? true : false"
|
@click="setRestEditFrom"
|
>{{ $t('common.reset') }}</el-button
|
>
|
<el-button class="primary" @click="insertEditFrom">{{
|
$t('common.confirm')
|
}}</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
project_selectDirAll,
|
project_selectByDirid,
|
project_insert,
|
project_delete,
|
project_update,
|
} from '../../api/api';
|
import ProjectOl from '../../components/ProjectOl.vue';
|
import MyBread from '../../components/MyBread.vue';
|
import moment from 'moment';
|
|
export default {
|
name: 'versionManage',
|
components: { MyBread, ProjectOl },
|
data() {
|
return {
|
behavior: null,
|
outerVisible: false,
|
innerVisible: false,
|
showMap: false,
|
count: null,
|
projectFrom: {},
|
editFrom: { geom: ' ' },
|
dirId: null,
|
elProject: [],
|
dirList: [], //el树数据
|
defaultProps: {
|
children: 'children',
|
label: 'name',
|
},
|
dbTableData: [],
|
btnStatus: {
|
select: false,
|
delete: false,
|
upload: false,
|
download: false,
|
insert: false,
|
update: false,
|
},
|
listLoader: {
|
dirid: null,
|
pageIndex: 1,
|
pageSize: 10,
|
},
|
count1: 0,
|
};
|
},
|
created() {
|
this.showPermsBtn();
|
this.getSelectdirTab();
|
},
|
computed: {},
|
|
methods: {
|
showPermsBtn() {
|
let currentPerms = this.$store.state.currentPerms;
|
let permsEntity = this.$store.state.permsEntity;
|
permsEntity
|
.filter((item) => item.perms == currentPerms)
|
.map((item) => (this.btnStatus[item.tag.substr(1)] = true));
|
},
|
ShowInner() {
|
this.innerVisible = true;
|
this.showMap = true;
|
},
|
outerClose(done) {
|
this.$confirm('确认关闭？')
|
.then((_) => {
|
this.setRestEditFrom();
|
this.getSelectProject();
|
done();
|
})
|
.catch((_) => {});
|
},
|
innerClose() {
|
this.showMap = false;
|
this.innerVisible = false;
|
debugger;
|
this.editFrom.geom = this.$store.state.projeOl;
|
},
|
async insertEditFrom() {
|
if (this.behavior == '新增项目') {
|
this.editFrom.dirid = this.dirId;
|
const data = await project_insert(this.editFrom);
|
if (data.code != 200) {
|
this.$message.error('项目新增失败');
|
return;
|
}
|
this.outerVisible = false;
|
} else {
|
const data = await project_update(this.editFrom);
|
if (data.code != 200) {
|
this.$message.error('项目修改失败');
|
return;
|
}
|
this.outerVisible = false;
|
}
|
|
this.getSelectProject();
|
this.setRestEditFrom();
|
},
|
setRestEditFrom() {
|
this.editFrom = { geom: ' ' };
|
this.$store.state.projeOl = null;
|
},
|
|
//删除项目
|
async deleteProject(row) {
|
const data = await project_delete({ gid: row.gid });
|
if (data.code != 200) {
|
this.$message.error('项目删除失败');
|
return;
|
}
|
this.getSelectProject();
|
},
|
//修改项目
|
EditProject(row) {
|
this.behavior = '修改项目';
|
this.outerVisible = true;
|
this.editFrom = row;
|
this.$store.state.projeOl = row.geom;
|
},
|
//新增项目
|
insertProject() {
|
if (this.dirId == null) {
|
this.$message.error('请选择需要新增的目录');
|
return;
|
}
|
this.behavior = '新增项目';
|
this.outerVisible = true;
|
},
|
//目录树点击事件
|
handleNodeClick(data) {
|
//获取目录ID
|
this.dirId = data.id;
|
this.getSelectProject();
|
},
|
|
//列表数据获取
|
async getSelectProject() {
|
this.listLoader.dirid = this.dirId;
|
const data = await project_selectByDirid(this.listLoader);
|
if (data.code != 200) {
|
this.$message.error('列表获取失败');
|
return;
|
}
|
// this.count = data.result;
|
this.count1 = data.count;
|
this.dbTableData = data.result;
|
// if (this.count == null) {
|
// this.projectFrom = {};
|
// } else {
|
// this.projectFrom = data.result;
|
// }
|
},
|
//目录列表获取
|
async getSelectdirTab() {
|
const res = await project_selectDirAll();
|
if (res.code != 200) {
|
this.$message.error('目录列表获取失败');
|
return;
|
}
|
this.dirList = this.treeData(res.result);
|
},
|
|
//树列表生成
|
treeData(source) {
|
let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
|
return cloneData.filter((father) => {
|
// 循环所有项
|
let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
|
branchArr.length > 0 ? (father.children = branchArr) : ''; // 给父级添加一个children属性，并赋值
|
return father.pid == 0; // 返回一级菜单
|
});
|
},
|
},
|
watch: {},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.verSionBox {
|
height: 81%;
|
width: 97%;
|
position: absolute;
|
box-sizing: border-box;
|
.verSionContent {
|
width: 100%;
|
height: 92%;
|
display: flex;
|
justify-content: space-between;
|
.verSion_leftTree {
|
width: 15%;
|
height: 95%;
|
border: 1px solid white;
|
border-radius: 5px;
|
padding: 1%;
|
max-height: 670px;
|
overflow-y: auto;
|
}
|
.verSion_rightContent {
|
width: 80%;
|
height: 95%;
|
border: 1px solid white;
|
border-radius: 5px;
|
padding: 1%;
|
overflow-y: auto;
|
}
|
.projectli {
|
height: 46px;
|
padding: 12px 12px;
|
font-size: 14px;
|
color: white;
|
border-bottom: 1px solid white;
|
line-height: 46px;
|
}
|
}
|
.eldivider {
|
margin-top: 0px;
|
}
|
.projFrom {
|
.el-input {
|
width: 800px;
|
}
|
}
|
.editFrom1 {
|
.el-input {
|
width: 600px;
|
}
|
}
|
.primary {
|
background: #409eff;
|
border: #409eff;
|
color: white;
|
}
|
/deep/ .el-select .el-input__inner {
|
border-color: #fff !important;
|
}
|
.pagination_box {
|
margin-top: 20px;
|
/deep/.el-input__inner {
|
background-color: transparent !important;
|
border: 1px solid;
|
color: white;
|
}
|
/deep/.el-pagination__total {
|
color: white;
|
}
|
/deep/.el-pagination__jump {
|
color: white;
|
}
|
/deep/.el-pager li.active {
|
color: #409eff;
|
}
|
/deep/.el-pager li {
|
color: white;
|
background: transparent;
|
}
|
/deep/.el-pager li {
|
color: white;
|
}
|
/deep/.btn-prev {
|
background: transparent;
|
}
|
/deep/.btn-next {
|
background: transparent;
|
}
|
/deep/.btn-next i {
|
color: white;
|
}
|
/deep/.btn-prev i {
|
color: white;
|
}
|
}
|
|
/deep/.el-form-item__label {
|
color: white;
|
}
|
// 设置输入框的背景色、字体颜色、边框属性设置；
|
/deep/.el-input__inner {
|
background-color: transparent !important ;
|
color: #fff;
|
border: 1px solid;
|
}
|
/*修改table 表体的背景颜色和文字颜色*/
|
/deep/ .el-table {
|
background-color: transparent;
|
|
th,
|
td {
|
background-color: transparent;
|
}
|
.el-table__expanded-cell {
|
background-color: transparent !important;
|
}
|
|
// 表头背景色
|
th.el-table__cell {
|
background-color: #303030;
|
color: #fff;
|
}
|
tr > td {
|
background-color: #303030;
|
color: #fff;
|
}
|
|
// hover效果
|
tr:hover > td {
|
background-color: rgba(255, 255, 255, 0.3) !important;
|
}
|
|
tbody tr:hover {
|
background-color: rgba(255, 255, 255, 0.3) !important;
|
// text-align: center;
|
}
|
|
// 滚动条宽高
|
.el-table__body-wrapper::-webkit-scrollbar {
|
width: 5px;
|
height: 5px;
|
}
|
|
.el-table__body-wrapper::-webkit-scrollbar {
|
width: 5px;
|
/*滚动条宽度*/
|
height: 5px;
|
/*滚动条高度*/
|
}
|
/*定义滚动条轨道 内阴影+圆角*/
|
.el-table__body-wrapper::-webkit-scrollbar-track {
|
box-shadow: 0px 1px 3px #216fe6 inset;
|
/*滚动条的背景区域的内阴影*/
|
border-radius: 10px;
|
}
|
|
/*定义滑块 内阴影+圆角*/
|
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
box-shadow: 0px 1px 3px #216fe6 inset;
|
border-radius: 6px;
|
background-color: #216fe6;
|
}
|
}
|
}
|
/deep/ .el-dialog {
|
background: #303030;
|
}
|
/deep/.el-range-editor.is-active,
|
.el-range-editor.is-active:hover,
|
.el-select .el-input.is-focus .el-input__inner {
|
border: 1px solid;
|
}
|
/deep/.el-dialog__title {
|
color: white;
|
}
|
/deep/ .el-select .el-input__inner {
|
border-color: #fff !important;
|
}
|
/deep/.el-cascader .el-input__inner {
|
border-color: #fff !important;
|
}
|
</style>
|
<style scoped></style>
|
