789 lines
20 KiB
Vue
789 lines
20 KiB
Vue
<template>
|
||
<!-- 楼层计划 -->
|
||
<div class="fullHeight positionPage">
|
||
<div class="left fullHeight whiteBlock">
|
||
<div class="title">
|
||
<span>楼层管理</span>
|
||
</div>
|
||
<div class="list_content">
|
||
<vue-scroll v-if="buildList.length > 0">
|
||
<div
|
||
class="flex content_data"
|
||
v-for="(item, index) in buildList"
|
||
:key="index"
|
||
:class="{ active: index == current && currentTwo == -1 }"
|
||
@click="next(item, index,$event,1)"
|
||
>
|
||
<div>{{ item.name }}</div>
|
||
<div class="flex2">
|
||
<img
|
||
@click.stop="editBuildFn(item)"
|
||
src="@/assets/images/icon-edit.png"
|
||
style="margin-right: 16px"
|
||
class="icon"
|
||
/>
|
||
<img
|
||
@click.stop="deleteBuildFn(item)"
|
||
src="@/assets/images/icon-delete.png"
|
||
class="icon"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
<div class="placeholderBox" v-else>
|
||
{{ $t("message.personnelPosition.mapManage.no_data") }}
|
||
</div>
|
||
</div>
|
||
<div class="addFirm" @click="addBtn">新增楼层</div>
|
||
</div>
|
||
<div class="system-right">
|
||
<div class="pageTitle" style="font-weight: 700">施工阶段管理</div>
|
||
<div class="searchDiv">
|
||
<el-form
|
||
:inline="true"
|
||
ref="searchForm"
|
||
:model="searchForm"
|
||
size="medium"
|
||
>
|
||
<el-form-item label="施工阶段" prop="state">
|
||
<el-input v-model="constructionPhase"></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button
|
||
style="margin-left: 50px"
|
||
type="primary"
|
||
plain
|
||
@click="loadDataTwo"
|
||
>查询</el-button
|
||
>
|
||
|
||
<el-button type="primary" size="medium" @click="addConstruction">
|
||
新增施工阶段
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="table_box" style="margin: -35px 10px">
|
||
<el-table height="552px" :data="threeData" class="tables">
|
||
<el-table-column
|
||
type="index"
|
||
label="序号"
|
||
width="100"
|
||
align="center"
|
||
></el-table-column>
|
||
|
||
<el-table-column
|
||
prop="constructionPhase"
|
||
label="施工阶段"
|
||
align="center"
|
||
>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
prop="major"
|
||
label="专业"
|
||
align="center"
|
||
:show-overflow-tooltip="true"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="startDate"
|
||
label="预计开始时间"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column prop="status" label="完成情况" align="center">
|
||
<template slot-scope="scope">
|
||
{{ getStatus(scope.row.status) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="progressRatio"
|
||
label="当前进度"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="endDate"
|
||
label="预计结束时间"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column label="操作" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
@click="edit1(scope.row, 3)"
|
||
type="text"
|
||
size="small"
|
||
icon="el-icon-edit"
|
||
>
|
||
<span style="font-size: 14px">编辑</span>
|
||
</el-button>
|
||
<el-button
|
||
@click="del1(scope.row.id, 3)"
|
||
type="text"
|
||
size="small"
|
||
style="color: red"
|
||
icon="el-icon-delete"
|
||
>
|
||
<span style="font-size: 14px">删除</span>
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<!-- <el-pagination
|
||
class="pagerBox"
|
||
style="margin: 150px 600px 0; text-align: right"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="page"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(total)"
|
||
background
|
||
></el-pagination> -->
|
||
</div>
|
||
<!-- 添加楼层弹框 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="dialogTitle"
|
||
:visible.sync="addBuildDialog"
|
||
width="667px"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-form
|
||
size="medium"
|
||
:model="addBuildForm"
|
||
ref="addBuildForm"
|
||
:rules="addBuildFormRules"
|
||
label-width="120px"
|
||
class="dialogFormBox"
|
||
>
|
||
<el-form-item label="楼层名称" prop="name">
|
||
<el-input
|
||
v-model="addBuildForm.name"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="addBuildDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>取消
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
size="medium"
|
||
@click="addBudBtn"
|
||
>确定
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 添加施工阶段弹框 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="floorDialogTitle"
|
||
:visible.sync="addFloorDialog"
|
||
width="667px"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-form
|
||
size="medium"
|
||
:model="floorForm"
|
||
ref="floorForm"
|
||
:rules="floorFormRules"
|
||
label-width="120px"
|
||
class="dialogFormBox"
|
||
>
|
||
<el-form-item label="楼层" prop="floorId">
|
||
<el-select v-model="floorId" placeholder="请选择">
|
||
<el-option
|
||
v-for="(item, index) in optionsList"
|
||
:key="index"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="施工阶段" prop="constructionPhase">
|
||
<el-input
|
||
v-model="floorForm.constructionPhase"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="专业" prop="major">
|
||
<el-input v-model="floorForm.major" placeholder="请输入"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="预计开始日期" prop="startDate">
|
||
<el-date-picker
|
||
v-model="floorForm.startDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="预计结束日期" prop="endDate">
|
||
<el-date-picker
|
||
v-model="floorForm.endDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="实际开始日期" prop="actualStartDate">
|
||
<el-date-picker
|
||
v-model="floorForm.actualStartDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="实际结束日期" prop="actualFinishDate">
|
||
<el-date-picker
|
||
v-model="floorForm.actualFinishDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="当前进度" prop="progressRatio">
|
||
<el-input-number
|
||
v-model="floorForm.progressRatio"
|
||
controls-position="right"
|
||
:min="0"
|
||
:max="100"
|
||
></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="阶段状态" prop="progressRatio">
|
||
<el-select v-model="floorForm.status" placeholder="请选择">
|
||
<el-option :value="0" label="未开始"> </el-option>
|
||
<el-option :value="1" label="进行中"> </el-option>
|
||
<el-option :value="2" label="已完成"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="addFloorDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>取消
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
size="medium"
|
||
@click="submit"
|
||
>确定
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getProjectFloorApi, //所有楼层计划-楼层
|
||
addProjectFloorApi, //新增楼层
|
||
updateProjectFloorApi, //编辑楼层
|
||
deleteProjectFloorApi, //删除楼层
|
||
getConstructionPhaseApi, //查询所有施工阶段
|
||
addConstructionPhaseApi, //新增施工阶段
|
||
updateConstructionPhaseApi, //修改施工阶段
|
||
deleteConstructionPhaseApi, //删除施工
|
||
} from "../../../assets/js/api/floorManagement";
|
||
export default {
|
||
data() {
|
||
return {
|
||
buildList: [],
|
||
threeData: [],
|
||
dialogTitle: "", //楼层
|
||
addBuildDialog: false, //楼层
|
||
addFloorDialog: false, //施工阶段
|
||
addBuildFormRules: {}, //施工阶段
|
||
floorDialogTitle: "",
|
||
searchForm: {},
|
||
addBuildForm: {
|
||
name: "",
|
||
}, //楼层
|
||
floorForm: {
|
||
floorId: 0, //楼层
|
||
constructionPhase: "", //施工阶段
|
||
major: "", //专业
|
||
startDate: "", //预计开始日期
|
||
endDate: "", //预计结束日期
|
||
actualStartDate: "", //实际开始日期
|
||
actualFinishDate: "", //实际结束日期
|
||
progressRatio: "", //当前进度
|
||
status: "", //阶段状态
|
||
},
|
||
floorId: "", //楼层id
|
||
current: 0,
|
||
currentTwo: -1,
|
||
floorFormRules: {},
|
||
constructionPhase:'',
|
||
// page: 1,
|
||
// pageSize: 10,
|
||
// total: 0,
|
||
projectSn: "",
|
||
optionsList: [], //消耗下拉
|
||
};
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.getBuildingData();
|
||
// this.getConstructionData();
|
||
},
|
||
methods: {
|
||
// 状态，0未开始 ,1进行中，2已完成 默认未开始
|
||
getStatus(status) {
|
||
if (status === 0) {
|
||
return "未开始";
|
||
} else if (status === 1) {
|
||
return "进行中";
|
||
} else {
|
||
return "已完成";
|
||
}
|
||
},
|
||
//查询所有楼层
|
||
getBuildingData() {
|
||
getProjectFloorApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
}).then((res) => {
|
||
console.log("查询所有楼层", res);
|
||
this.buildList = res.result;
|
||
this.optionsList = res.result;
|
||
this.floorId = this.optionsList[0].id;
|
||
this.getConstructionData(this.optionsList[0].id);
|
||
});
|
||
},
|
||
//查询施工阶段
|
||
getConstructionData(id) {
|
||
let param = {
|
||
floorId: id,
|
||
};
|
||
getConstructionPhaseApi(param).then((res) => {
|
||
console.log("查询施工阶段", res);
|
||
this.threeData = res.result;
|
||
});
|
||
},
|
||
//-----------------楼层
|
||
//新增楼层
|
||
addBtn() {
|
||
this.addBuildDialog = true;
|
||
this.dialogTitle = "新增楼层";
|
||
this.addBuildForm = {
|
||
name: "",
|
||
};
|
||
},
|
||
//编辑楼层
|
||
editBuildFn(val) {
|
||
console.log("编辑的内容", val);
|
||
this.addBuildDialog = true;
|
||
this.dialogTitle = "编辑楼层";
|
||
this.addBuildForm = JSON.parse(JSON.stringify(val));
|
||
},
|
||
//删除楼层
|
||
deleteBuildFn(val) {
|
||
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
deleteProjectFloorApi({ id: val.id }).then((res) => {
|
||
this.$message({
|
||
type: "success",
|
||
message: "删除成功!",
|
||
});
|
||
this.getBuildingData();
|
||
});
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: "info",
|
||
message: "已取消删除",
|
||
});
|
||
});
|
||
},
|
||
//新增或编辑楼层
|
||
addBudBtn() {
|
||
this.$refs.addBuildForm.validate((valid) => {
|
||
if (valid) {
|
||
if (this.dialogTitle == "新增楼层") {
|
||
addProjectFloorApi({
|
||
name: this.addBuildForm.name,
|
||
projectSn: this.projectSn,
|
||
}).then((res) => {
|
||
this.$message.success("新增成功");
|
||
this.addBuildDialog = false;
|
||
this.getBuildingData();
|
||
});
|
||
} else if (this.dialogTitle == "编辑楼层") {
|
||
updateProjectFloorApi(this.addBuildForm).then((res) => {
|
||
this.$message.success("编辑成功");
|
||
this.addBuildDialog = false;
|
||
this.getBuildingData();
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//-----------------施工阶段
|
||
//新增施工阶段
|
||
addConstruction() {
|
||
this.addFloorDialog = true;
|
||
this.floorDialogTitle = "新增施工阶段";
|
||
this.floorForm = {
|
||
floorId: "", //楼层
|
||
constructionPhase: "", //施工阶段
|
||
major: "", //专业
|
||
startDate: "", //预计开始日期
|
||
endDate: "", //预计结束日期
|
||
actualStartDate: "", //实际开始日期
|
||
actualFinishDate: "", //实际结束日期
|
||
progressRatio: "", //当前进度
|
||
status: "", //阶段状态
|
||
};
|
||
},
|
||
//编辑施工阶段
|
||
edit1(val) {
|
||
this.addFloorDialog = true;
|
||
this.floorDialogTitle = "编辑施工阶段";
|
||
this.floorForm = JSON.parse(JSON.stringify(val));
|
||
},
|
||
//删除施工阶段
|
||
del1(val) {
|
||
console.log("删除", val);
|
||
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
deleteConstructionPhaseApi({ id: val }).then((res) => {
|
||
this.$message({
|
||
type: "success",
|
||
message: "删除成功!",
|
||
});
|
||
this.getConstructionData(this.floorId);
|
||
});
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: "info",
|
||
message: "已取消删除",
|
||
});
|
||
});
|
||
},
|
||
//新增或编辑施工阶段
|
||
submit() {
|
||
this.floorForm.floorId = this.floorId;
|
||
this.$refs.floorForm.validate((valid) => {
|
||
if (valid) {
|
||
if (this.floorDialogTitle == "新增施工阶段") {
|
||
addConstructionPhaseApi(this.floorForm).then((res) => {
|
||
this.$message.success("新增成功");
|
||
this.addFloorDialog = false;
|
||
this.getConstructionData(this.floorId);
|
||
});
|
||
} else if (this.floorDialogTitle == "编辑施工阶段") {
|
||
updateConstructionPhaseApi(this.floorForm).then((res) => {
|
||
this.$message.success("修改成功");
|
||
this.addFloorDialog = false;
|
||
this.getConstructionData(this.floorId);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//切换类别
|
||
next(index, data,$event,type) {
|
||
console.log("data", this.buildList[data]);
|
||
this.threeData = [];
|
||
this.floorId = this.buildList[data].id;
|
||
this.current = index;
|
||
this.currentTwo = -1;
|
||
this.getConstructionData(this.floorId);
|
||
},
|
||
//查询
|
||
loadDataTwo() {
|
||
this.getConstructionData(this.floorId)
|
||
},
|
||
// //切换数量
|
||
// handleSizeChange(value) {
|
||
// this.pageSize = value;
|
||
// this.getInfoList();
|
||
// },
|
||
// handleCurrentChange(value) {
|
||
// this.page = value;
|
||
// this.getInfoList();
|
||
// },
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.title {
|
||
border-bottom: 1px solid rgba(220, 230, 253, 1);
|
||
color: @--color-primary;
|
||
padding-left: 24px;
|
||
font-size: 14px;
|
||
|
||
span {
|
||
position: relative;
|
||
padding: 16px 0 5px;
|
||
display: inline-block;
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -1px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2px;
|
||
background-color: @--color-primary;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
}
|
||
.searchDiv {
|
||
margin: 35px 48px;
|
||
}
|
||
.left {
|
||
width: 300px;
|
||
float: left;
|
||
}
|
||
.system-right {
|
||
float: right;
|
||
// margin-right: 1.5%;
|
||
margin-left: 20px;
|
||
width: calc(100% - 300px - 20px - 30px);
|
||
// min-height: 620px;
|
||
height: calc(100% - 40px);
|
||
// border: 1px solid #e9e9e9;
|
||
background-color: white;
|
||
padding: 20px 15px;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.flex2 {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.addFirm {
|
||
height: 45px;
|
||
line-height: 45px;
|
||
color: @--color-primary;
|
||
font-size: 15px;
|
||
text-align: center;
|
||
background: #fff;
|
||
border-top: 1px solid #dce6fd;
|
||
font-family: PingFangSC-Regular;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.list_content {
|
||
padding: 10px 0;
|
||
height: calc(100% - 87px - 20px);
|
||
position: relative;
|
||
}
|
||
|
||
.content_data {
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
height: 43px;
|
||
line-height: 43px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
|
||
&.active {
|
||
background-color: rgba(81, 129, 246, 0.1);
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 4px;
|
||
height: 100%;
|
||
background-color: @--color-primary;
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.floorBox {
|
||
margin-bottom: 10px;
|
||
// background-color: rgba(251, 251, 251, 1);
|
||
padding: 20px 20px 10px;
|
||
|
||
.addFloorBox {
|
||
line-height: 20px;
|
||
border: 1px solid @--color-primary;
|
||
|
||
i {
|
||
font-size: 25px;
|
||
margin-top: 20px;
|
||
color: @--color-primary;
|
||
}
|
||
|
||
p {
|
||
font-size: 0.75rem;
|
||
}
|
||
}
|
||
|
||
ul {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
li {
|
||
border: 1.2px solid rgba(0, 0, 0, 0.25);
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 3px;
|
||
text-align: center;
|
||
// background-color: rgba(41, 216, 180, 0.25);
|
||
display: inline-block;
|
||
margin: 0 10px 10px 0;
|
||
line-height: 60px;
|
||
font-size: 0.875rem;
|
||
cursor: pointer;
|
||
vertical-align: top;
|
||
|
||
&.more {
|
||
font-size: 1.6rem;
|
||
line-height: 65px;
|
||
}
|
||
|
||
&.active {
|
||
background-color: #d8e2f9;
|
||
// color: #fff;
|
||
border-color: @--color-primary-deep;
|
||
}
|
||
|
||
.floorName {
|
||
height: 50px;
|
||
line-height: 70px;
|
||
}
|
||
|
||
.caretIcon {
|
||
height: 20px;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.mapContainer {
|
||
height: calc(100% - 133px - 40px);
|
||
padding: 20px;
|
||
position: relative;
|
||
|
||
.infoDetail {
|
||
font-size: 14px;
|
||
margin-bottom: 16px;
|
||
|
||
span:first-child {
|
||
margin-right: 165px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.uploadBtn {
|
||
float: right;
|
||
margin-top: -5px;
|
||
}
|
||
}
|
||
|
||
.mapBox {
|
||
border: 1px solid rgba(151, 151, 151, 0.5);
|
||
height: calc(100% - 40px);
|
||
position: relative;
|
||
overflow: auto;
|
||
}
|
||
|
||
.mapContent {
|
||
position: relative;
|
||
// left: 0;
|
||
// top: 0;
|
||
// z-index: 3;
|
||
}
|
||
|
||
// .mapContent2{
|
||
// position: relative;
|
||
// }
|
||
.personBox {
|
||
position: absolute;
|
||
transition: 0.2s all;
|
||
|
||
img {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.redText {
|
||
margin-left: 20px;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.devDetail {
|
||
p {
|
||
margin-bottom: 10px;
|
||
|
||
.primaryText {
|
||
margin-right: 20px;
|
||
display: inline-block;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.operateBox {
|
||
// margin-bottom: 10px;
|
||
position: absolute;
|
||
right: 112px;
|
||
top: 11px;
|
||
|
||
img {
|
||
margin-right: 20px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.operateList {
|
||
font-size: 12px;
|
||
|
||
li {
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
justify-content: center;
|
||
|
||
img {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
&.last {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
</style> |