saber/src/views/manager/contractinfo/detail.vue

<template>
  <basic-container>
    <div>
      <el-tabs v-model="activeType" :before-leave="beforeLeave">
        <el-tab-pane label="合同段信息" name="1">
          <div>
            <el-form :model="contractForm" :rules="contractRules" ref="contractForm" label-width="120px">
              <el-form-item label="项目名称">
                <el-input v-model="projectInfo.projectName" disabled></el-input>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="合同段类型" prop="contractType">
                    <el-select v-model="contractForm.contractType" placeholder="请选择" class="w-100p">
                      <el-option v-for="item in contractTypeList" :key="item.id" :label="item.dictValue"  :value="item.dictKey"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同段编号" prop="contractNumber">
                    <el-input v-model="contractForm.contractNumber"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="合同段名称" prop="contractName">
                    <el-input v-model="contractForm.contractName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="参与方进场日期" prop="contractorJoinTime">
                    <el-date-picker  v-model="contractForm.contractorJoinTime"  type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd HH:mm:ss"  placeholder="选择日期"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="计划开工日期" prop="planStartTime">
                    <el-date-picker  v-model="contractForm.planStartTime"  type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="计划完工日期" prop="planEndTime">
                    <el-date-picker  v-model="contractForm.planEndTime"  type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="实际开工日期" prop="actualStartTime">
                    <el-date-picker  v-model="contractForm.actualStartTime"  type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="实际完工日期" prop="actualEndTime">
                    <el-date-picker  v-model="contractForm.actualEndTime"  type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="业主单位名称" prop="contractorUnitName">
                    <el-input v-model="contractForm.contractorUnitName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同金额" prop="contractAmount">
                    <el-input v-model="contractForm.contractAmount">
                      <template slot="append">万元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="施工单位名称" prop="constructionUnitName">
                    <el-input v-model="contractForm.constructionUnitName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="上传开工令" prop="startFileUrl">
                    <template v-if="isBackShow">
                      <el-link type="primary" @click="downloadFile">开工令</el-link>
                      <el-button @click="delFile" class="mg-l-10" style="color:red" type="text" icon="el-icon-circle-close"></el-button>
                    </template>
                    <template v-else>
                      <el-upload
                        action="/api/blade-resource/oss/endpoint/put-file-attach"
                        :on-remove="handleRemove"
                        :limit="1" :headers=headers
                        :on-exceed="handleExceed"
                        :on-success="handleSuccess"
                        :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload>
                    </template>
                    
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="监理单位名称" prop="supervisionUnitName">
                    <el-input v-model="contractForm.supervisionUnitName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                </el-col>
              </el-row>
            </el-form>
            <el-divider></el-divider>
            <el-row :gutter="20">
              <el-col :span="12">
                <div>组卷归档默认信息</div>
                <el-form label-width="90px">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="立卷人" prop="filer">
                        <el-input v-model="contractForm.filer"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="保管期限" prop="storagePeriod">
                        <el-select v-model="contractForm.storagePeriod" placeholder="请选择" class="w-100p">
                          <el-option label="10年"  value="10年"></el-option>
                          <el-option label="30年"  value="30年"></el-option>
                          <el-option label="永久"  value="永久"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="审核人" prop="reviewer">
                        <el-input v-model="contractForm.reviewer"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="保管密级" prop="securityLevel">
                        <el-select v-model="contractForm.securityLevel" placeholder="请选择" class="w-100p">
                          <el-option label="机密"  value="机密"></el-option>
                          <el-option label="绝密"  value="绝密"></el-option>
                          <el-option label="秘密"  value="秘密"></el-option>
                          <el-option label="公开"  value="公开"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="档案前缀" prop="prefix">
                        <el-input v-model="contractForm.prefix"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      
                    </el-col>
                  </el-row>
                </el-form>
              </el-col>
              <el-col :span="12">
                <div>附加信息</div>
                <el-form label-width="90px">
                  <el-form-item label="项目地址" prop="projectPlace">
                    <!-- <el-input v-model="contractForm.projectPlace" placeholder="点击后面地图选取地址">
                      <el-button slot="append" icon="el-icon-map-location" @click="mapDialogVisible = true"></el-button>
                    </el-input> -->
                    <avue-input-map  :params="params" placeholder="请选择地图" v-model="flageData" ></avue-input-map>
                  </el-form-item>
                  <el-form-item label="起始桩号" prop="startStation">
                    <el-input v-model="contractForm.startStation"></el-input>
                  </el-form-item>
                  <el-form-item label="结束桩号" prop="endStation">
                    <el-input v-model="contractForm.endStation"></el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分配WBS" name="2">
          <div>
            
          </div>
        </el-tab-pane>
        <el-tab-pane label="分配项目人员" name="3">
          <div>
            
          </div>
        </el-tab-pane>
      </el-tabs>

      <div class="flex jc-sb">
        <div></div>
        <div>
          <el-button type="success" size="medium" @click="saveQuit">保存并退出</el-button>
          <el-button type="info" size="medium" @click="saveNext">保存并进入下一步</el-button>
        </div>
      </div>
    </div>

  </basic-container>
</template>

<script>
  import {getProjectDeatil} from "@/api/manager/projectinfo";
  import {submitContractInfo,getContractInfo,delFileFromUrl} from "@/api/manager/contractinfo";
  import {getDictionary} from "@/api/system/dict";
  import {remove as removeFile} from "@/api/resource/attach";
  import website from '@/config/website';
  import {Base64} from 'js-base64';
  import {getToken} from '@/util/auth';
  import {mapGetters} from "vuex";
  export default {
    data() {
      return {
        activeType:'1',

        pid:'',
        cid:'',
        projectInfo:{},

        contractTypeList:[],
        fileList:[],
        headers:{},
        isBackShow:false,

        contractForm:{},
        contractRules:{
          contractName: [
            { required: true, message: '请输入合同段名称', trigger: 'blur' },
          ],
        },

        mapDialogVisible:false,
        params:{
          zoom: 10,
          // zoomEnable: false,
          // dragEnable: false,
        },
        flageData:[],
      }
    },
    computed: {
      ...mapGetters(["userInfo"]),
    },
    created() {
      this.init();
      //console.log(this.userInfo)
    },
    methods: {
      init(){
        this.pid = this.$route.query.pid;
        this.cid = this.$route.query.cid;
        if(!this.cid){
          this.contractForm.pid = this.pid;
        }else{
          this.getContractInfo();
        }
        this.getContractTypeList();
        this.getProjectDeatil();
        this.setHeaders(); 
      },
      beforeLeave(activeName, oldActiveName){
        console.log(oldActiveName,'oldActiveName');
        console.log(this.activeType);
      },

      getProjectDeatil(){
        getProjectDeatil(this.pid).then((res)=>{
          this.projectInfo = res.data.data;
        })
      },
      getContractInfo(){
        getContractInfo(this.cid).then((res)=>{
          this.contractForm = res.data.data;
          if(this.contractForm.startFileUrl){
            this.isBackShow = true;
          }
          if(this.contractForm.projectPlace){
            this.flageData = ['','',this.contractForm.projectPlace]
          }
        })
      },

      saveQuit(){
        this.savecontract().then((res)=>{
          this.contractForm.id = res.data.data.id;
          this.$message({
            type: "success",
            message: "保存成功!"
          });
          this.$router.go(-1);
        }).catch((res)=>{
          console.log(res)
        })
      },
      saveNext(){

      },
      savecontract(){
        return new Promise((resolve, reject) => {
          this.$refs['contractForm'].validate((valid) => {
          if (valid) {
            if(this.flageData.length ==3){
              this.contractForm.projectPlace = this.flageData[2];
            }
            resolve(submitContractInfo(this.contractForm))
          }else{
            reject('验证失败')
          }
        })
        })
      },

      handleRemove(file) {
        //console.log(file, fileList);
        removeFile(file.response.data.attachId).then(()=>{
          this.contractForm.startFileUrl = '';
        })
      },
      handleExceed() {
        this.$message.warning(`当前限制选择 1 个文件，请先移除后，再次上传`);
      },
      handleSuccess(res){
        this.contractForm.startFileUrl = res.data.link;
      },
      setHeaders(){
        this.headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`;
        this.headers[website.tokenHeader] = 'bearer ' + getToken()
      },

      downloadFile(){
        window.open(this.contractForm.startFileUrl);
      },
      delFile(){
        this.$confirm('是否删除该文件?', '删除开工令', {
          distinguishCancelAndClose: true,
          confirmButtonText: '删除',
          cancelButtonText: '取消'
        }).then(() => {
          delFileFromUrl(this.contractForm.startFileUrl).then(()=>{
            this.isBackShow = false;
            this.contractForm.startFileUrl = '';
          })
        })
      },

      getContractTypeList(){
        if(this.contractTypeList.length >1){
          return;
        }
        getDictionary({
          code:'contract_type'
        }).then((res)=>{
          res.data.data.forEach(element => {
            element.dictKey = Number(element.dictKey)
          });
          this.contractTypeList = res.data.data;
        })
      },

    }
  };
</script>

<style scoped lang="scss">
  .bm-view {
    width: 100%;
    height: 300px;
  }
</style>