zhgdyun/src/views/projectFront/projectSummary/floorManagement.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="checkBuildingId == index ? 'active' : ''"
            @click="selectMenu(index, item.id)"
          >
            <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: [], //消耗下拉
      threeIndex: -1,
      checkBuildingId: 0
    }
  },
  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() {
      let param = {
        floorId: this.floorId
      }
      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.current = index
    //   this.currentTwo = -1
    //   this.getConstructionData(this.floorId)
    // },
    selectMenu(val, id) {
      console.log(id)
      console.log(val)
      this.floorId = this.buildList[val].id
      this.checkBuildingId = val
      this.getConstructionData(this.floorId)
    },
    //查询
    loadDataTwo() {
      this.getConstructionData()
    }
    // //切换数量
    // 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;
    }
  }
}
.active {
  background-color: #d8e2f9;
  // color: #fff;
  border-color: @--color-primary-deep;
}
</style>