新版-新建项目

src/views/components_web/project/newProj.vue

@@ -36,7 +36,7 @@
                                 </div>                    
                             </div>
                             <div>
-                                <input type="text" class="input_projname" placeholder="点击输入"/>
+                                <input type="text" class="input_projname" v-model="newProjData.projectData.projName" placeholder="点击输入"/>
                             </div>
                         </div>
                     </div>
@@ -49,10 +49,44 @@
                         :onBackBtnClick="enterProjNameInput"
                         title="选择项目名称"
                         >
-                        <el-button type="primary" class="nextbtn" slot="right">选定模板</el-button>
-                        </AppHeader>                        
+                        <el-button type="primary" class="slot_btn" slot="right" @click="enterTemplateImprove()">选定模板</el-button>
+                        </AppHeader>
+                        <div class="template_select_content">
+                            <div class="template_info" v-for="(item,index) in templateList" :key="item.Id" @click="isChecked(index,item)">
+                                <div class="check_box" :class="{checked:checkedIndex == index}"><i class="el-icon-check"></i></div>
+                                <span class="template_info_name">{{item.TempName}}</span>
+                            </div> 
+                        </div>  
+                     
+                    </div>
+                    <!-- 完善模板信息 -->
+                    <div class="template_improve" v-if="isTemImprove" >
+                        <AppHeader class="set_position"
+                        theme="white"
+                        showBackBtn
+                        backBtnTitle="选择模板"
+                        :onBackBtnClick="enterTemplateSelect"
+                        title="完善模板信息"
+                        >
+                        <el-button type="primary" class="slot_btn" slot="right" @click="createProject()">创建</el-button>
+                        </AppHeader>   
+                        <div class="template_improve_content" >
+                            <div class="template_improve_info">
+                                <div class="template_title">模板名称:</div>
+                                <div class="template_title_info">{{selectTemplate.TempName}}</div>
+                            </div>
+                            <div class="template_improve_info">
+                                <div class="template_title">创建时间:</div>
+                                <div class="template_title_info">{{createDate}}</div>
+                            </div>
+                            <div class="template_improve_info template_improve_infoInput"  v-for="prop in checkNewProjData.CustomProps" :key="prop.Id">
+                                <div class="template_title">{{prop.PropertyName+':'}}</div>
+                                <div class="template_title_info">
+                                    <input type="text" class="input_projname" placeholder="点击输入" v-model="prop.PropValue">
+                                </div>
+                            </div>
+                        </div>                     
                     </div>
-
                 </div>
             </div>
         </div>
@@ -63,29 +97,235 @@
 
 <script>
 import AppHeader from "@/components/app-header";
-
+import * as templateService from '@/services/template';
+import { fetchAddressBook, getUserListByNode } from '@/services/user.js';
+import { wrapOssProtocol, getFileUrl } from "@/services/oss";
+import FileUploader from "@/components/file-uploader";
 export default {
     components:{
-        AppHeader
+        AppHeader,
+        FileUploader
+
 
     },
     data(){
         return{
-            coverSrc:"",
             isProjName:true,
             isTemSelect:false,
+            isTemImprove:false,
+            checkedIndex:NaN,
+            selectTemplate:{},
+            srcIndex: 2, // 封面切换Index
+            coverSrc: 'static/img/faceImg/face01.png',
+            templateList:[],
+            createDate: new Date().toLocaleDateString(),
+            checkNewProjData: {
+            "Proj": {
+                "ProjName":"",
+                "CompanyId":"",
+                "Notice":"",
+                "ShowImgUrl":"",
+                "TemplateId":"",
+                "CreateUserId":"",
+                "ModifyUserId":""
+            },
+            "Node": {},
+            "CustomProps": []
+            },
+            newProjData: {
+            "projectData": {
+                "projID": "",
+                "projName": "",
+                "projCode": "",
+                "folderID": "",
+                "scale": "",
+                "address": "",
+                "showImgUrl": "",
+                "templateID": "",
+                "createUserID": "",
+                "modifyUserID": "",
+                "deleted": 0,
+                "listProjManager":[]
+            },
+            "listFolder": [],
+            "listProjProp": [],
+            "userId": "",
+            }, // 新建项目
 
+            
         }
     },
     methods:{
         enterTemplateSelect(){
+            if (this.newProjData.projectData.projName == undefined || this.newProjData.projectData.projName == null ||
+            this.newProjData.projectData.projName == "") {
+            this.$notify({           
+                message: "请输入项目名称。",
+                type: "warning",
+                offset: 100,
+                duration: 2500
+            });
+            return;
+            }
+            let rg = /[/\\]{1,}/g;
+            if (rg.test(this.newProjData.projectData.projName)) {
+            this.$notify({    
+                message: "项目名称请不要包含'/' '\\'等字符。",
+                type: "warning",
+                offset: 100,
+                duration: 2500
+            });
+            return;
+            }
+            if(this.newProjData.projectData.projName.length > 35){
+                this.$notify({    
+                message: "项目名称不得超出35个字符。",
+                type: "warning",
+                offset: 100,
+                duration: 2500
+                });
+                return;          
+            }
             this.isProjName = false;
             this.isTemSelect = true;
+            this.isTemImprove = false;
+            this.getSelectTemplateData();
         },
         enterProjNameInput(){
             this.isProjName = true;
             this.isTemSelect = false;
+        },
+        // 完善模板信息
+        enterTemplateImprove(){
+            this.isTemSelect = false;
+            this.isTemImprove = true;
+            templateService.queryTemplateById(this.selectTemplate.Id).then(res => {
+                res.Data.propertys.forEach((item, index) => {
+                this.checkNewProjData.CustomProps[index] = {};
+                this.checkNewProjData.CustomProps[index]['TempPropId'] = item.Id;
+                this.checkNewProjData.CustomProps[index]['PropertyName'] = item.PropertyName;
+                this.checkNewProjData.CustomProps[index]['PropValue'] = "";
+                let temp =  this.checkNewProjData.CustomProps;
+                this.checkNewProjData.CustomProps = [...temp];
+                })
+                this.checkNewProjData = [...this.checkNewProjData];
+            })            
+        },
+        isChecked(index,item){
+            this.checkedIndex = index;
+            this.selectTemplate = item;
+            //console.log(id);
+        },
+        /** 
+         * 设置随机封面
+         */
+        setSystemCoverRandom: function() {
+        var temp=Math.ceil(Math.random()*10);    
+        while(this.srcIndex ===temp){
+            temp=Math.ceil(Math.random()*10); 
+        }
+        this.srcIndex=temp;
+        if(this.srcIndex===10){
+            this.coverSrc = "static/img/faceImg/face" + this.srcIndex + ".png";
+        }else{
+            this.coverSrc = "static/img/faceImg/face0" + this.srcIndex + ".png";
         }
+            this.newProjData.projectData.showImgUrl = this.coverSrc;
+
+        },
+      /**
+       * 封面上传成功时
+       */
+      coverUploadSuccess: function(file) {
+        const filePath = wrapOssProtocol(file.ossUrl);
+        this.coverSrc = filePath;
+        this.newProjData.projectData.showImgUrl=filePath;
+      },
+      /**
+       * 获取模板列表数据
+       */
+      async getSelectTemplateData() {
+        const templateListRes = await templateService.queryTemplateList();
+        const templateList = templateListRes.Data || [];
+        this.templateList = templateList;
+        //debugger;
+        
+        if(this.templateList && this.templateList.length && JSON.stringify(this.selectTemplate) ==='{}') {
+          this.selectTemplate = templateList[0];
+          this.checkedIndex=0;
+        }
+      },
+      /**
+       * 获取模板列表子节点数据
+       */
+      async getSelectTemplateList(templateID) {
+        const { Data } = await templateService.queryTemplateNodeByTemplateId(templateID);
+        const headNodes = (Data.children || []);
+        this.newProjData.listFolder = [];
+        headNodes.forEach(node => {
+          const folder = {
+            folderID: "",
+            projID: "",
+            superID: "",
+            levelID: "",
+            firstFolderID: "",
+            tempNodeID: node.id,
+            folderName: node.topic,
+            fileCount: 0,
+            childCount: 0,
+            modifyUserID: "",
+            deleted: 0,
+            default: true,
+            listUser: [],
+            manageUser: []
+          };
+          this.newProjData.listFolder.push(folder);
+        });
+      },
+      /**
+       * 新建项目
+       */
+      async createProject() {
+        // this.isAllhide();
+        this.isDisableCreate = true;
+        this.newProjData.userId = sessionStorage.userId;
+        this.newProjData.projectData.templateID = this.selectTemplate.Id;
+        this.newProjData.projectData.showImgUrl=this.coverSrc;
+        var thisApp = this;
+         this.checkNewProjData.Proj.ProjName = this.newProjData.projectData.projName;
+         this.checkNewProjData.Proj.CompanyId = this.$store.state.currentCompanyId;
+         this.checkNewProjData.Proj.ShowImgUrl = String(this.newProjData.projectData.showImgUrl);
+         this.checkNewProjData.Proj.TemplateId =  this.selectTemplate.Id;
+         this.checkNewProjData.Proj.CreateUserId = sessionStorage.userId;
+         this.checkNewProjData.Proj.ModifyUserId = sessionStorage.userId;
+
+        const res = await templateService.queryTemplateNodeByTemplateId(this.selectTemplate.Id);
+        this.checkNewProjData.Node = res.Data;
+        this.$fetchApi('project/createProject', this.checkNewProjData).then(res => {
+          console.log(res);
+          if(res.Code === 0) {
+              thisApp.$notify({
+                message:  "新项目创建成功。",
+                type: "success",
+                offset: 100,
+                duration: 2500,
+              });
+              this.$router.push('/index')
+            //   let timer = setTimeout(() => {
+            //     this.$emit('createProjSuccess');
+            //     clearTimeout(timer);
+            //   },3000)
+          } else {
+              thisApp.$notify.error({
+                message: res.Msg,
+                offset: 100,
+                duration: 5000,
+              });
+          }
+        }).catch(err => console.log(err));
+
+    
+      },
 
     }
 }
@@ -146,7 +386,9 @@ export default {
      text-align: center;
     //height: 100%;
     //text-align: center;
-    .input_projname{
+
+}
+.input_projname{
         width: 424px;
         height: 44px;
         border-radius: 4px;
@@ -155,7 +397,6 @@ export default {
         font-size: 16px;
         padding-left:16px;
     }
-}
 .upload_img{
     text-align: center;
 }
@@ -187,6 +428,78 @@ export default {
 .set_position{
     position: relative;
 }
+.template_select{
+    height:calc(100% - 50px);
+}
+.template_select_content{
+    overflow-y:scroll;
+    height: 100%;
+    .template_info{
+        width: 100%;
+        line-height: 44px;
+        padding: 0px 24px;
+        position: relative;
+        box-sizing: border-box;
+        border-bottom: 1px solid #DEDEDF;
+        transition: all 0.3s;
+        cursor:pointer;
+        .template_info_name{
+        // display: inline-block;
+            margin-left: 38px;;
+            font-size: 14px;
+        }
+        .check_box{
+            &.checked{
+                background-color: #7850FF;
+                text-align: center;
+                line-height: 28px;
+                color: white;
+                .el-icon-check{
+                    display: inline-block;
+                }   
+            }
+            display:inline-block;
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            background-color: rgba(203, 203, 206, 1);
+            box-shadow: undefined, inset 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+                .el-icon-check{
+                    display: none;
+                }   
+        }
+    }
+}
+.template_info:hover{
+    background-color: rgba(50, 50, 60, 0.15);
+}
+.template_improve_content{
+    width: 100%;
+    padding: 0 8px;
+    box-sizing: border-box;
+    .template_improve_info{
+        line-height: 48px;
+        width: 100%;
+        color: rgba(0, 0, 0, 0.56);
+        .template_title{
+            width: 142px;
+            display: inline-block; 
+            text-align: right;
+               
+        }
+        .template_title_info{
+            display: inline-block;
+            margin-left: 8px;
+            color: rgba(50, 50, 60, 100);
+        }
+    }
+    .template_improve_infoInput{
+        line-height: 64px;
+    }
+}
 
 
 </style>