zhgdyun/src/views/projectFront/projectSummary/extendInfo.vue

<template>
  <!-- 表格形式的项目信息页面  -- 简易版 -->
  <div class="extendInfo whiteBlock">
    <vue-scroll style="width: 100%">
      <div class="btn_wrap">
        <el-button type="primary" size="medium" @click="editBtn">{{
          $t("message.companyDiagram.Table.edit")
        }}</el-button>
      </div>
      <div>
        <div class="custom_tab">
          <div class="title">
            {{ $t("message.extendInfo.projectExtension") }}
          </div>
          <div class="flex4">
            <div class="type_content">
              <div class="flex3">
                <span class="width_35">
                  {{ $t("message.extendInfo.contractPrice") }}
                </span>
                <span class="width_65">{{ projectDetail.contractPrice }}</span>
              </div>
              <div class="flex3">
                <span class="width_35">
                  {{ $t("message.extendInfo.contractSigning") }}
                </span>
                <span class="width_65">{{
                  projectDetail.contractSignTime
                }}</span>
              </div>
              <div class="flex3">
                <span class="width_35">
                  {{ $t("message.extendInfo.contractProjectTime") }}
                </span>
                <span class="width_65 bg_color"
                  >{{ projectDetail.contractPeriodStartTime }} /
                  {{ projectDetail.contractPeriodEndTime }}</span
                >
              </div>
              <div class="flex3">
                <span class="width_35">
                  {{ $t("message.extendInfo.actualConstructionTime") }}
                </span>
                <span class="width_65"
                  >{{ projectDetail.realPeriodStartTime }} /
                  {{ projectDetail.realPeriodEndTime }}
                </span>
              </div>
              <div class="flex3">
                <span class="width_35">
                  {{ $t("message.extendInfo.toryBurchOnSale") }}
                </span>
                <span class="width_65 bg_color">{{
                  projectDetail.bidWinner
                }}</span>
              </div>
              <div class="flex3">
                <span class="width_35">
                  {{ $t("message.extendInfo.architect") }}
                </span>
                <span class="width_65">{{ projectDetail.designUnit }}</span>
              </div>
              <div class="flex3">
                <span class="width_35">
                  {{ $t("message.extendInfo.ownersUnit") }}
                </span>
                <span class="bg_color position" style="padding: 0 15px">{{
                  projectDetail.ownerUnit
                }}</span>
              </div>

              <div class="flex3" style="height: 120px">
                <span class="width_35">
                  {{ $t("message.extendInfo.projectProfile") }}
                </span>
                <span
                  class="position"
                  style="padding: 0 15px; box-sizing: border-box"
                  >{{ projectDetail.projectOverview }}</span
                >
              </div>
            </div>
            <div class="type_content">
              <div class="flex3">
                <!-- <span class="width_35"></span> -->
                <span class="width_65"></span>
              </div>
              <div class="flex3">
                <!-- <span class="width_35"></span> -->
                <span class="width_65"></span>
              </div>
              <div class="flex3">
                <span
                  class="width_35 bg_color"
                  style="width: 35%; height: 60px; border: none"
                ></span>
                <span class="width_65 bg_color"></span>
              </div>
              <div class="flex3">
                <!-- <span class="width_35"></span> -->
                <span class="width_65"></span>
              </div>
              <div class="flex3">
                <span class="width_35 border_l">
                  {{ $t("message.extendInfo.constructionUnit") }}
                </span>
                <span class="width_65 bg_color">{{
                  projectDetail.constructionUnit
                }}</span>
              </div>
              <div class="flex3">
                <span class="width_35 border_l">
                  {{ $t("message.extendInfo.supervisingUnit") }}
                </span>
                <span class="width_65">{{ projectDetail.supervisorUnit }}</span>
              </div>
              <!-- <div class="flex3">
                <span class="width_35 border_l">
                  {{'代建单位'}}
                </span>
                <span class="width_65">{{ projectDetail.supervisorUnit }}</span>
              </div> -->
              <div class="flex3">
                <span
                  class=""
                  style="width: 35%; height: 60px; border: none"
                ></span>
                <span class="width_65"></span>
              </div>
              <div class="flex3" style="height: 120px">
                <span class=""></span>
                <span class="width_65"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </vue-scroll>
    <!-- 项目弹框 -->
    <el-dialog
      :modal-append-to-body="false"
      class="projectDialog"
      :title="projectDialogTitle"
      :visible.sync="editProjectDialog"
      width="700px"
      :close-on-click-modal="false"
    >
      <div class="dialog_content" style="padding: 0 100px">
        <el-form
          ref="editProjectForm"
          :model="editProjectForm"
          label-width="120px"
          :rules="editProjectFormRules"
          size="medium"
        >
          <el-form-item
            :label="$t('message.extendInfo.contractPrice')"
            prop="contractPrice"
          >
            <el-input-number
              style="width: 100%"
              v-model="editProjectForm.contractPrice"
              :min="0"
              :placeholder="$t('message.extendInfo.pleaseEnter')"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            :label="$t('message.extendInfo.contractSigning')"
            prop="contractSignTime"
          >
            <el-date-picker
              style="width: 100%"
              v-model="editProjectForm.contractSignTime"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('message.extendInfo.optionDate')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            :label="$t('message.extendInfo.contractProjectTime')"
            prop="contractPeriodEndTime"
          >
            <!-- 合同 -->
            <el-date-picker
             v-model="editProjectForm.contractTime"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              @input="getContractTime"
            >
            </el-date-picker>
       
          </el-form-item>
          <el-form-item
            :label="$t('message.extendInfo.actualConstructionTime')"
            prop="realPeriodStartTime"
          >
            <!-- 实际 -->
            <el-date-picker
              v-model="editProjectForm.realTime"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              @input="getRealTime"
            >
            </el-date-picker>
            <!-- <el-date-picker
              style="width: 100%"
              v-model="editProjectForm.realTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              :range-separator="$t('message.extendInfo.to')"
              :start-placeholder="$t('message.extendInfo.startDate')"
              :end-placeholder="$t('message.extendInfo.endingDate')"
              @change="getRealTime"
            >
            </el-date-picker> -->
          </el-form-item>
          <el-form-item
            :label="$t('message.extendInfo.toryBurchOnSale')"
            prop="bidWinner"
          >
            <el-input
              v-model="editProjectForm.bidWinner"
              :placeholder="$t('message.extendInfo.pleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.extendInfo.architect')"
            prop="designUnit"
          >
            <el-input
              v-model="editProjectForm.designUnit"
              :placeholder="$t('message.extendInfo.pleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.extendInfo.constructionUnit')"
            prop="constructionUnit"
          >
            <el-input
              v-model="editProjectForm.constructionUnit"
              :placeholder="$t('message.extendInfo.pleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.extendInfo.supervisingUnit')"
            prop="supervisorUnit"
          >
            <el-input
              v-model="editProjectForm.supervisorUnit"
              :placeholder="$t('message.extendInfo.pleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.extendInfo.ownersUnit')"
            prop="ownerUnit"
          >
            <el-input
              v-model="editProjectForm.ownerUnit"
              :placeholder="$t('message.extendInfo.pleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.extendInfo.projectProfile')"
            prop="projectOverview"
          >
            <el-input
              v-model="editProjectForm.projectOverview"
              :placeholder="$t('message.extendInfo.pleaseEnter')"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button
            class="cancleBtn"
            @click="editProjectDialog = false"
            icon="el-icon-circle-close"
            size="medium"
            >{{ $t("message.companyDiagram.cancel") }}</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-circle-check"
            size="medium"
            @click="onSubmit('editProjectForm')"
            >{{ $t("message.companyDiagram.determine") }}</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 查看大图 -->
    <el-dialog :modal-append-to-body="false" :visible.sync="bigImageDialog">
      <img width="100%" :src="bigImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
import {
  getProjectExtendInfoApi,
  editProjectExtendApi,
} from "@/assets/js/api/baseInfo.js";
export default {
  name: "extendInfo",
  data() {
    return {
      projectDialogTitle: this.$t("message.extendInfo.editProjectInfo"),
      editProjectDialog: false,
      editProjectForm: {
        contractTime: ["", ""],
        realTime: [],
        contractSignTime: "",
        contractPeriodEndTime: "",
        contractPeriodStartTime: "",
        realPeriodStartTime: "",
        realPeriodEndTime: "",
        bidWinner: "",
        designUnit: "",
        constructionUnit: "",
        supervisorUnit: "",
        ownerUnit: "",
        projectOverview: "",
        contractPrice: "",
      },
      editProjectFormRules: this.$t("message.extendInfo.editProjectFormRules"),
      projectSn: "",
      projectDetail: {},

      bigImageDialog: false,
      bigImageUrl: "",
      provincesCityArr: [],
      provincesCityList: [],
      cascaderProps: {
        label: "name",
        children: "childrenlist",
        value: "code",
      },
      showMap: false,
     
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.getProjectExtendInfo();
  },
  methods: {
   
    //获取列表信息
    getProjectExtendInfo() {
      let data = {
        projectSn: this.projectSn,
      };
      getProjectExtendInfoApi(data).then((res) => {
        if (res.code == 200) {
          this.projectDetail = res.result
            ? JSON.parse(JSON.stringify(res.result))
            : this.editProjectForm;
          this.editProjectForm = res.result
            ? JSON.parse(JSON.stringify(res.result))
            : this.editProjectForm;
        }
      });
    },

    // 编辑按钮
    editBtn() {
      this.editProjectDialog = true;
      if (this.editProjectForm.id) {
        let data = JSON.parse(JSON.stringify(this.editProjectForm));
        data.contractTime = [];
        data.realTime = [];
        this.editProjectForm = data;
        this.editProjectForm.contractTime = [
          data.contractPeriodStartTime,
          data.contractPeriodEndTime,
        ];
        this.editProjectForm.realTime = [
          data.realPeriodStartTime,
          data.realPeriodEndTime,
        ];
      }
    },

    //获取合同工期
    getContractTime(value) {
      if (value) {
        this.editProjectForm.contractPeriodStartTime = value[0];
        this.editProjectForm.contractPeriodEndTime = value[1];
      } else {
        this.editProjectForm.contractPeriodStartTime = "";
        this.editProjectForm.contractPeriodEndTime = "";
      }
    },
    //获取实际工期
    getRealTime(value) {
      if (value) {
        this.editProjectForm.realPeriodStartTime = value[0];
        this.editProjectForm.realPeriodEndTime = value[1];
      } else {
        this.editProjectForm.realPeriodStartTime = "";
        this.editProjectForm.realPeriodEndTime = "";
      }
    },

    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = this.editProjectForm;
          data.projectSn = this.projectSn;
          editProjectExtendApi(data).then((res) => {
            if (res.code == 200) {
              this.$message.success(
                this.$t("message.extendInfo.modifySuccessfully")
              );
              this.editProjectDialog = false;
              this.getProjectExtendInfo();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex2 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.flex3 {
  display: flex;
  align-items: center;
}
.flex4 {
  display: flex;
  justify-content: space-between;
}
.flex5 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.extendInfo {
  width: 100%;
  height: 100%;
  // background: #ffffff;
  padding: 15px;
  box-sizing: border-box;
  .btn_wrap {
    text-align: right;
  }
  .custom_tab {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(148, 148, 148, 0.5);
    border-bottom: none;
    margin-top: 30px;
    // color: #333;
    .title {
      width: 100%;
      font-size: 14px;
      padding: 12px 20px;
      border-bottom: 1px solid rgba(148, 148, 148, 0.5);
      box-sizing: border-box;
      height: 60px;
      background: #eeeeee;
      line-height: 35px;
    }

    .type_content {
      width: 50%;
      div {
        font-size: 14px;
        // padding: 12px 0;
        height: 60px;
        // line-height: 60px;
        // display: inline-flex;
        // align-items: center;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(148, 148, 148, 0.5);
      }
    }

    .width_65 {
      width: 65%;
      display: inline-flex;
      align-items: center;
      box-sizing: border-box;
      height: 100%;
      padding: 0 15px;
      word-break: break-all;
    }
    .width_35 {
      height: 100%;
      width: 35%;
      display: inline-flex;
      align-items: center;
      box-sizing: border-box;
      border-right: 1px solid rgba(148, 148, 148, 0.5);
      padding: 0 15px;
      text-align: right;
      background: rgba(235, 234, 234, 0.5);
    }
  }
  .bg_color {
    background: rgba(235, 234, 234, 0.5);
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }
  .border_l {
    border-left: 1px solid rgba(148, 148, 148, 0.5);
  }

  /deep/ .el-dialog {
    margin-top: 80px !important;
  }
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    // overflow: hidden;
    height: 178px;
  }

  .avatar-uploader:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .imgBox {
    position: relative;

    .el-icon-error {
      font-size: 20px;
      position: absolute;
      right: -10px;
      top: -10px;
      cursor: pointer;
    }
  }
  .position {
    position: absolute;
    right: 0;
    width: calc(100% - 17.5%);
    z-index: 2;
    height: 60px;
    top: auto;
    display: inline-flex;
    align-items: center;
  }
}
</style>