<template>
|
<div class="verSionBox">
|
<My-bread
|
:list="[
|
`${$t('dataManage.dataManage')}`,
|
`${$t('dataManage.projectManage')}`,
|
]"
|
></My-bread>
|
<el-divider />
|
<div class="verSionContent">
|
<div class="verSion_leftTree subpage_Div">
|
<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 subpage_Div">
|
<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"
|
size="small"
|
>{{ $t("common.append") }}</el-button
|
>
|
</el-form-item>
|
</el-form>
|
<!-- <el-divider class="eldivider" /> -->
|
<div class="table_box" style="height:calc(100% - 89px)">
|
<el-table
|
ref="filterTable"
|
:data="dbTableData"
|
height="calc(100% - 57px)"
|
|
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="corpname"
|
:label="$t('dataManage.projectObj.corpname')"
|
/>
|
<el-table-column
|
prop="country"
|
:label="$t('dataManage.projectObj.country')"
|
/>
|
<el-table-column
|
prop="province"
|
:label="$t('dataManage.projectObj.province')"
|
/>
|
<el-table-column
|
prop="location"
|
:label="$t('dataManage.projectObj.county')"
|
/>
|
<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="small"
|
type="danger"
|
>{{ $t("common.delete") }}</el-button
|
>
|
<el-button
|
v-if="btnStatus.update"
|
@click="EditProject(scope.row)"
|
icon="el-icon-edit"
|
type="info"
|
size="small"
|
>{{ $t("common.update") }}</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="margin-top: 10px" class="pagination_box"></div>
|
</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"
|
:modal="false"
|
: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="margin-left: 20px"
|
icon="el-icon-plus"
|
>
|
</el-link>
|
</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.province')">
|
<el-input v-model="editFrom.province"></el-input>
|
</el-form-item>
|
<el-form-item :label="$t('dataManage.projectObj.county')">
|
<el-input v-model="editFrom.location"></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"
|
size="small"
|
:disabled="behavior != '新增项目' ? true : false"
|
@click="setRestEditFrom"
|
>{{ $t("common.reset") }}</el-button
|
>
|
<el-button size="small" type="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,
|
project_selectLocation,
|
} 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((_) => {});
|
},
|
async innerClose() {
|
this.showMap = false;
|
this.innerVisible = false;
|
|
var wkt = this.$wkt.parse(this.$store.state.projeOl);
|
|
const data = await project_selectLocation({
|
x: wkt.coordinates[0],
|
y: wkt.coordinates[1],
|
});
|
console.log(data.result);
|
if (data.code == 200) {
|
for (var i in data.result) {
|
var key = data.result[i].key;
|
var val = data.result[i].value;
|
if (key == "国") {
|
this.editFrom.country = val;
|
} else if (key == "省") {
|
this.editFrom.province = val;
|
} else if (key == "市") {
|
this.editFrom.location = val;
|
}
|
}
|
}
|
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) {
|
this.$confirm("此操作将永久删除该项目, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(async () => {
|
const data = await project_delete({ gid: row.gid });
|
if (data.code == 200) {
|
this.$message({
|
message: "删除成功！",
|
type: "success",
|
});
|
this.getRoleTabelData();
|
} else {
|
this.$message({
|
message: "删除失败！",
|
type: "warning",
|
});
|
}
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除",
|
});
|
});
|
},
|
//修改项目
|
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: 98%;
|
width: 98%;
|
padding: 1%;
|
.verSionContent {
|
width: 100%;
|
height: calc(100% - 75px);
|
display: flex;
|
justify-content: space-between;
|
.verSion_leftTree {
|
width: calc(23% - 0px);
|
height: 100%;
|
padding: 10px;
|
border-radius: 5px;
|
box-sizing: border-box;
|
overflow-y: auto;
|
}
|
.verSion_rightContent {
|
width: 75%;
|
height: 100%;
|
border-radius: 5px;
|
padding: 10px;
|
box-sizing: border-box;
|
border: 1px solid #dcdfe6;
|
}
|
.projectli {
|
height: 46px;
|
padding: 12px 12px;
|
font-size: 14px;
|
|
border-bottom: 1px solid white;
|
line-height: 46px;
|
}
|
}
|
.eldivider {
|
margin-top: 0px;
|
}
|
.projFrom {
|
.el-input {
|
width: 800px;
|
}
|
}
|
.editFrom1 {
|
.el-input {
|
width: 600px;
|
}
|
}
|
}
|
.demo-form-inline{
|
padding: 8px;
|
// margin-top: 10px;
|
border-radius: 5px;
|
border: 1px solid #dcdfe6;
|
margin-bottom: 20px;
|
text-align: right;
|
.el-form-item {
|
margin: 5px;
|
}
|
}
|
</style>
|
