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

<template>
  <basic-container>
    <div>
      <el-tabs v-model="activeType" :before-leave="beforeLeave">
        <el-tab-pane label="项目基本信息" name="1">
          <div>
            <el-form :model="projectForm" :rules="projectRules" ref="projectForm" label-width="120px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="项目名称" prop="projectName">
                    <el-input v-model="projectForm.projectName"></el-input>
                  </el-form-item>
                  <el-form-item label="项目别名" prop="projectAlias">
                    <el-input v-model="projectForm.projectAlias"></el-input>
                  </el-form-item>
                  <el-form-item label="项目编号" prop="projectNumber">
                    <el-input v-model="projectForm.projectNumber"></el-input>
                  </el-form-item>
                  <el-form-item label="公路等级" prop="projectGrade">
                    <el-select v-model="projectForm.projectGrade" placeholder="请选择" class="w-100p">
                      <el-option v-for="item in highwayGradeList" :key="item.id" :label="item.dictValue"  :value="item.dictKey"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="计划开工日期" prop="planStartTime">
                    <el-date-picker  v-model="projectForm.planStartTime"  type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="实际开工日期" prop="actualStartTime">
                    <el-date-picker  v-model="projectForm.actualStartTime"  type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="项目预算投资" prop="estimatedAmount">
                    <el-input v-model="projectForm.estimatedAmount">
                      <template slot="append">万元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目概况" prop="projectGist">
                    <el-input v-model="projectForm.projectGist" type="textarea" :rows="7"></el-input>
                  </el-form-item>
                  <el-form-item label="内置里程">
                    <el-radio-group v-model="radioType">
                      <el-radio-button label="总里程"></el-radio-button>
                      <el-radio-button label="路面"></el-radio-button>
                      <el-radio-button label="路基"></el-radio-button>
                    </el-radio-group>
                    <el-input-number v-model="projectForm.projectAllMileage" v-show="radioType == '总里程'" :min="0" label="总里程"></el-input-number>
                    <el-input-number v-model="projectForm.projectPavement" v-show="radioType == '路面'" :min="0" label="路面"></el-input-number>
                    <el-input-number v-model="projectForm.projectSubgrade" v-show="radioType == '路基'" :min="0" label="路基"></el-input-number>
                  </el-form-item>
                  <el-form-item label="计划完工日期" prop="planEndTime">
                    <el-date-picker  v-model="projectForm.planEndTime"  type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="实际完工日期" prop="actualEndTime">
                    <el-date-picker  v-model="projectForm.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-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分配WBS模版" name="2">
          <div>
            <div class="text-align-c">
              <el-radio-group v-model="templateType">
                <el-radio :label="2">试验</el-radio>
                <el-radio :label="1">质检</el-radio>
              </el-radio-group>
            </div>
            <div class="text-align-c mg-t-20">
              <span class="mg-r-20">选择WBS</span>
              <el-select v-model="wbsId" @change="wbsChange" placeholder="请选择WBS" style="width:500px;">
                <el-option-group
                  v-for="group in treeList"
                  :key="group.label"
                  :label="group.label">
                  <el-option
                    v-for="(item,index) in group.options"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-option-group>
              </el-select>
            </div>
            <tree-tree :left-tree-data="leftTreeData" scrollbarStyle="height:calc(100vh - 500px)" ref="treetotree" :show-all-check="true" @onAddTree="treeChang" @onDelTree="treeChang" @onCheckAll="treeChang"></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="projectForm.projectName" disabled style="width:300px;margin-right:30px;"></el-input>
              <span class="mg-r-10">合同段名称</span>
              <el-select v-model="cId" placeholder="请选择" @change="getUserByCondition">
                <el-option label="全部"  value=""></el-option>
                <el-option v-for="item in contractList" :key="item.id" :label="item.contractName"  :value="item.id"></el-option>
              </el-select>
            </div>
            <el-divider></el-divider>
            <div class="flex jc-al-c mg-b-10">
              <span>维护人员角色</span>
              <avue-input-tree :check-strictly="true" v-model="rId" placeholder="请选择" type="tree" :dic="roleList" :props="treeProps"></avue-input-tree>
              <!-- <el-select v-model="rId" clearable placeholder="请选择" @change="getUserByCondition">
                <el-option v-for="item in roleList" :key="item.id" :label="item.title"  :value="item.id"></el-option>
              </el-select> -->
            </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="postName" label="岗位" align="center"></el-table-column>
                <el-table-column prop="phone" label="电话" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </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 {submitProject,getProjectDeatil,findWbsTreeList,findProjectTree,submitWbsTreeInProject} from "@/api/manager/projectinfo";
  import {findContractByProjectId,saveUserInfoByProject,findUserListByCondition,
          findUserByName,removeUsersByIds} from "@/api/manager/contractinfo";
  import {getRoleTree} from "@/api/system/role";
  import {getAlltree} from "@/api/manager/wbstree";
  import {getDictionary} from "@/api/system/dict";
  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,
        },

        id:'',
        highwayGradeList:[],
        radioType:'总里程',

        projectForm:{},
        projectRules:{
          projectName: [
            { required: true, message: '请输入项目名称', trigger: 'blur' },
          ],
          projectAlias: [
            { required: true, message: '请输入项目别名', trigger: 'blur' },
          ],
        },

        contractList:[],
        cId:'',
        rId:'',
        roleList:[],
        userId:'',
        userList:[],
        contractUserList:[],

        treeProps:{
          label:"title",
          value:"id"
        },

        templateType:1,
        treeList:[],
        wbsId:'',
        leftTreeData:[],
      }
    },
    computed: {
      ...mapGetters(["userInfo"]),
    },
    watch:{
      projectForm:{
        handler: function() { // 此处注意，handler函数不能为箭头函数，this会取上下文，而不是组件里的this,此外，深度监听，必须为handler函数名，否则会无效果
          this.typeChang['1'] = true;
        },
        deep: true
      },
      activeType: async function (newValue) {
        if(newValue == '3'){
          this.getContractList();
          this.getRoleList();
          this.getUserByCondition();
          this.getUserByName();
        }else if(newValue == '2'){
          let refId = this.projectForm.referenceWbsTemplateId;
          if(refId && refId>0){
            //有引用id，回显
            this.wbsId = refId;
            let projectTree = await findProjectTree(this.projectForm.id,refId)
            if(Array.isArray(projectTree.data.data)){
              this.templateType = projectTree.data.data[0].wbsType;
              let leftData = await getAlltree(this.userInfo.tenant_id,'1',refId)
              if(Array.isArray(leftData.data.data)){
                this.leftTreeData = leftData.data.data;
              }else{
                this.leftTreeData = [];
              }
              this.$refs.treetotree.setRightTree(projectTree.data.data);
            }
          }
          
          this.getTreeList();
        }
      }
    },
    created() {
      this.init();
      //console.log(this.userInfo)
    },
    mounted(){
      this.$nextTick(()=>{
        this.typeChang = {
          1:false,
          2:false,
          3:false,
        }
      })
    },
    methods: {
     init(){
       this.getHighwayGradeList();
       this.id = this.$route.query.id;
       if(this.id){
         this.getProjectDeatil();
       }
     },
      beforeLeave(activeName, oldActiveName){
        if(oldActiveName == '1' && !this.projectForm.id){
          this.$message({
            type: "warning",
            message: "请先保存项目后，再进行项目的分配"
          });
          return false;
        }

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

     getProjectDeatil(){
        getProjectDeatil(this.id).then((res)=>{
          this.projectForm = res.data.data;
          this.$nextTick(()=>{
            this.typeChang['1'] = false;
          })
        })
      },

     async saveQuit(){
       if(this.activeType == '1'){
          await this.saveProject();
        }else if(this.activeType == '2'){
          await this.saveWbsTree();
        }
       this.$message({
          type: "success",
          message: "保存成功!"
        });
        this.$router.go(-1);
     },
     async saveNext(type){
        if(this.activeType == '1'){
          let res = await this.saveProject();
          this.projectForm.id = res.data.data.id;
        }else if(this.activeType == '2'){
          await this.saveWbsTree();
        }
        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();
     },

     saveProject(){
       return new Promise((resolve, reject) => {
         this.$refs['projectForm'].validate((valid) => {
          if (valid) {
            resolve(submitProject(this.projectForm))
          }else{
            reject('验证失败')
          }
        })
       })
     },

     saveWbsTree(){
      let obj = {};
      let ids = this.$refs.treetotree.getTreeAllId('rightTree');
      obj = {
        wbsId:this.wbsId,
        projectId:this.projectForm.id,
        wbsTreeIds:ids
      }
      return submitWbsTreeInProject(obj);
     },

     addUserToProject(){
       if(!this.userId){
         this.$message({
            type: "warning",
            message: "请先选择用户再进行添加"
          });
         return;
       }
       if(!this.rId){
         this.$message({
            type: "warning",
            message: "请先选择维护人员角色再进行添加"
          });
         return;
       }
       let list = [{
         projectId:this.projectForm.id,
         contractId:this.cId?this.cId:undefined,
         userId:this.userId,
         roleId:this.rId
       }];
       saveUserInfoByProject(list).then(()=>{
         this.getUserByCondition();
       })
     },

     getUserByCondition(){
       findUserListByCondition({
         cId:this.cId,
         pId:this.projectForm.id,
         postId:'',
         rId:this.rId,
       }).then((res)=>{
         this.contractUserList = res.data.data;
       })
     },

     getUserByName(){
       findUserByName('').then((res)=>{
         this.userList = 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: "删除成功!"
          });
        })
      })
     },

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

      getContractList(){
        if(this.contractList.length < 1){
          findContractByProjectId(this.projectForm.id).then((res)=>{
            this.contractList = res.data.data;
          })
        }
      },

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

        getRoleTree().then((res)=>{
          this.roleList = res.data.data
        })
      },

      wbsChange(value){
        //console.log(value)
        if(value.toString().indexOf(',') >= 0){
          //私有库
          let ids = value.toString().split(',');
          findProjectTree(ids[1],ids[0]).then((res)=>{
            if(Array.isArray(res.data.data)){
              this.leftTreeData = res.data.data;
            }else{
              this.leftTreeData = [];
            }
          })
        }else{
          //公有库
          getAlltree(this.userInfo.tenant_id,'1',value).then((res)=>{
            if(Array.isArray(res.data.data)){
              this.leftTreeData = res.data.data;
            }else{
              this.leftTreeData = [];
            }
          })
        }
      },

      getTreeList(){
        return new Promise((resolve)=>{
          if(this.treeList.length){
            resolve();
          }
          findWbsTreeList(this.templateType).then((res)=>{
            let arr = [{
              label:'公有库',
              options:[],
            },
            {
              label:'私有库',
              options:[],
            }];
            let data = res.data.data;
            if(data.wbsInfos && data.wbsInfos.length){
              data.wbsInfos.forEach((element)=>{
                element.label = element.wbsName;
                element.value = element.id;
              })
              arr[0].options = data.wbsInfos;
            }
            if(data.wbsTreePrivates && data.wbsTreePrivates.length){
              data.wbsTreePrivates.forEach((element)=>{
                element.label = element.projectName;
                element.value = element.wbsId +','+ element.projectId;
              })
              arr[1].options = data.wbsTreePrivates;
            }
            this.treeList = arr;
          }).finally(()=>{
            resolve();
          })
        })
      },

      treeChang(){
        this.typeChang[2] = true;
      }

    }
  };
</script>

<style scoped lang="scss">
  
</style>