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 class="text-align-c">
              <span class="mg-r-20">选择WBS</span>
              <el-select v-model="wbsId" @change="wbsChange" placeholder="请选择WBS" style="width:500px;">
                <el-option v-for="item in wbsList" :key="item.id" :label="item.wbsName" :value="item.id"></el-option>
              </el-select>
            </div>
            <tree-tree :left-tree-data="leftTreeData"></tree-tree>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分配项目人员" name="3">
          <div>
            <div class="flex jc-al-c">
              <span class="mg-r-10">项目名称</span>
              <el-input v-model="projectInfo.projectName" disabled style="width:300px;margin-right:30px;"></el-input>
              <span class="mg-r-10">合同段名称</span>
              <el-input v-model="contractForm.contractName" disabled style="width:300px;"></el-input>
            </div>
            <el-divider></el-divider>
            <div class="flex jc-al-c mg-b-10">
              <div>
                <span class="mg-r-10">角色方</span>
                <el-radio-group v-model="rId">
                  <el-radio-button v-for="(item) in roleList" :label="item.id" :key="item.key">{{item.title}}</el-radio-button>
                </el-radio-group>
              </div>
              <div>
                <span class="mg-r-10 mg-l-20">请选择岗位</span>
                <el-select v-model="postId" filterable placeholder="请输入搜索">
                  <el-option v-for="item in postList" :key="item.id" :label="item.postName"  :value="item.id"></el-option>
                </el-select>
              </div>
            </div>
            <div>
              <el-table  :data="contractUserList" border height="500" style="width: 100%">
                <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                <el-table-column prop="account" label="登录账号" align="center"></el-table-column>
                <el-table-column prop="password" label="密码" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-link class="mg-r-20" type="primary" @click="copyAccPas(scope.row)">复制</el-link>
                    <el-link class="mg-r-20" type="primary" @click="resetPassword(scope.row)">重置密码</el-link>
                    <el-link type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
                  </template>
                </el-table-column>
              </el-table>
               <el-input v-model="copyText" ref="copyInput" type="textarea" style='opacity: 0;position: absolute;height:1px;overflow:hidden;'></el-input>
            </div>
            <div class="flex jc-al-c mg-t-20">
              <span>添加项目人员</span>
              <el-select v-model="userId" filterable placeholder="请输入搜索">
                <el-option v-for="item in userList" :key="item.id" :label="item.name"  :value="item.id"></el-option>
              </el-select>
              <el-button type="success" @click="addUserToProject">添加</el-button>
              <el-button type="primary">创建新用户</el-button>
              <el-button type="danger" @click="handleDeletes">全部删除</el-button>
            </div>
            <el-divider></el-divider>
          </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" v-if="activeType != 1" @click="saveNext('p')">保存并返回上一步</el-button>
          <el-button type="info" size="medium" v-if="activeType != 3" @click="saveNext('n')">保存并进入下一步</el-button>
        </div>
      </div>
    </div>

  </basic-container>
</template>

<script>
  import {getProjectDeatil} from "@/api/manager/projectinfo";
  import {submitContractInfo,getContractInfo,delFileFromUrl,
          findJobByRoleId,findAllUserByCondition,findUserByName,
          saveUserInfoByProject,removeUsersByIds,resetPasswordByUserId} from "@/api/manager/contractinfo";
  import {getRoleTree} from "@/api/system/role";
  import {getList as getwbsList} from "@/api/manager/wbsinfo";
  import {getAlltree} from "@/api/manager/wbstree";
  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";

  import treeTree from "@/components/tree-tree/main"
  export default {
    components: {
      treeTree
    },
    data() {
      return {
        activeType:'1',
        typeChang:{
          1:false,
          2:false,
          3:false,
        },

        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:[],

        rId:'',
        roleList:[],
        postId:'',
        postList:[],
        contractUserList:[],
        userId:'',
        userList:[],
        copyText:'',

        wbsId:'',
        wbsList:[],
        leftTreeData:[],
      }
    },
    computed: {
      ...mapGetters(["userInfo"]),
    },
    watch:{
      contractForm:{
        handler: function() { // 此处注意，handler函数不能为箭头函数，this会取上下文，而不是组件里的this,此外，深度监听，必须为handler函数名，否则会无效果
          this.typeChang['1'] = true;
        },
        deep: true
      },
      activeType: function (newValue) {
        if(newValue == '3'){
          this.getRoleList();
          this.getUserByName();
        }else if(newValue == '2'){
          this.getWBSList();
        }
      },
      rId:function(newValue){
        findJobByRoleId(newValue).then((res)=>{
          this.postList = res.data.data;
        }).catch(()=>{
          this.postList = [];
        }).finally(()=>{
          this.postId = '';
        })
      },
      postId:function(newValue){
        if(newValue){
          this.findAllUserByCondition();
        }else{
          this.contractUserList = [];
        }
      }
    },
    created() {
      this.init();
      //console.log(this.userInfo)
    },
    mounted(){
      this.$nextTick(()=>{
        this.typeChang = {
          1:false,
          2:false,
          3:false,
        }
      })
    },
    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();
        }
        if(this.$route.query.type){
          this.activeType = this.$route.query.type;
        }

        this.getContractTypeList();
        this.getProjectDeatil();
        this.setHeaders(); 
      },
      beforeLeave(activeName, oldActiveName){
        if(oldActiveName == '1' && !this.contractForm.id){
          this.$message({
            type: "warning",
            message: "请先保存合同段后，再进行合同段的分配"
          });
          return false;
        }

       if(this.typeChang[oldActiveName]){
         this.$confirm('检测到新编辑内容, 是否保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '不用',
          type: 'warning'
        }).then(() => {
          switch (oldActiveName) {
            case '1':
              this.savecontract().then((res)=>{
                this.contractForm.id = res.data.data.id;
                this.$message({
                  type: "success",
                  message: "保存成功!"
                });
              });
              break;
          }
        })
       }
      },

      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]
          }
          this.$nextTick(()=>{
            this.typeChang['1'] = false;
          })
        })
      },

      async saveQuit(){
        if(this.activeType == '1'){
          await this.savecontract();
        }
        this.$message({
          type: "success",
          message: "保存成功!"
        });
        this.$router.go(-1);
      },
      async saveNext(type){
        if(this.activeType == '1'){
          let res = await this.savecontract();
          this.contractForm.id = res.data.data.id;
        }
        this.$message({
          type: "success",
          message: "保存成功!"
        });
        this.typeChang[this.activeType] = false;
        let num = Number(this.activeType);
        if(type == 'n'){
            num++;
        }else if(type == 'p'){
            num--;
        }

        this.activeType = num.toString();
      },

      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 = '';
          })
        })
      },

      addUserToProject(){
        if(!this.userId){
          this.$message({
              type: "warning",
              message: "请先选择用户再进行添加"
            });
          return;
        }
        if(!this.postId){
          this.$message({
              type: "warning",
              message: "请先选择岗位再进行添加"
            });
          return;
        }
        if(!this.rId){
          this.$message({
              type: "warning",
              message: "请先选择角色再进行添加"
            });
          return;
        }
        let list = [{
          projectId:this.pid,
          contractId:this.contractForm.id,
          userId:this.userId,
          postId:this.postId,
          roleId:this.rId
        }];
        saveUserInfoByProject(list).then(()=>{
          this.findAllUserByCondition();
        })
      },

      findAllUserByCondition(){
        findAllUserByCondition({
          "cId": this.contractForm.id,
          "pId": this.pid,
          "postId": this.postId,
          "rId": this.rId
        }).then((res)=>{
          this.contractUserList = res.data.data;
        })
      },

      handleDelete(index,row){
        this.$confirm('是否将该用户移除出合同段', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeUsersByIds(row.id).then(()=>{
            this.contractUserList.splice(index,1);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
        })
      },
      handleDeletes(){
        this.$confirm('是否将所有用户移除出合同段', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = [];
          this.contractUserList.forEach((element)=>{
            ids.push(element.id);
          })
          removeUsersByIds(ids.join(',')).then(()=>{
            this.contractUserList = [];
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
        })
      },

      copyAccPas(row){
        this.copyText = `姓名：${row.name}
账号：${row.account}
密码：${row.password}`;
        this.$nextTick(()=>{
          this.$refs.copyInput.select()
          document.execCommand('copy')
          this.$message({
            type: "success",
            message: "成功复制在剪贴板!"
          });
        })
 
      },

      resetPassword(row){
        this.$confirm('是否将用户【'+row.name+'】密码重置为123456', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          resetPasswordByUserId(row.uId).then(()=>{
            row.password = '123456';
            this.$message({
              type: "success",
              message: "重置成功!"
            });
          })
        })
      },

      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;
        })
      },

      getRoleList(){
        if(this.roleList.length > 1){
          return;
        }

        getRoleTree().then((res)=>{
          let list = [];
          res.data.data.forEach((element)=>{
            if(element.title == '监理方'||
               element.title == '业主方'){
                 list.push(element);
            }else if(element.title == '施工方'){
              //给个默认
              this.rId = element.id;
              list.push(element);
            }
          })
          this.roleList = list;
        })
      },
      getUserByName(){
       findUserByName('').then((res)=>{
         this.userList = res.data.data;
       })
     },

    getWBSList(){
      getwbsList().then((res)=>{
        this.wbsList = res.data.data.records;
      })
    },
    wbsChange(wbsid){
      getAlltree(this.userInfo.tenant_id,'',wbsid).then((res)=>{
        this.leftTreeData = res.data.data;
      })
    },

    }
  };
</script>

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