项目列表修改

src/views/manager/projectinfo/list copy.vue

@@ -0,0 +1,444 @@
+<template>
+  <basic-container>
+    <div>
+      <div class="pd-b-20 border-grey-b header-box">
+       <div>
+        <span class="mg-r-10">选择项目名称</span>
+        <el-select
+          v-model="projectId"
+          @change="projectChange"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in projectList"
+            :key="item.id"
+            :label="item.projectAlias"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+       </div>
+
+        <el-button type="primary" @click="syncLedger">同步台账</el-button>
+      </div>
+   
+      <div class="pd-t-20">
+        <el-row
+          :gutter="20"
+          style="height:calc(100vh - 290px)"
+        >
+          <el-col
+            :span="6"
+            v-for="(item,index) in projectPageList"
+            :key="item.id"
+            style="height:20%;"
+            class="mg-b-20 box-size-bb"
+          >
+            <el-card
+              @click.native="projectClick(item)"
+              class="box-card h-100p flex flex-center project_name"
+              :class="getBg(index)"
+            >
+              {{item.projectAlias}}
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+      <div>
+        <el-pagination
+          layout="prev, pager, next"
+          class="text-align-c"
+          @current-change="handleCurrentChange"
+          :current-page.sync="page.currentPage"
+          :total="page.total"
+          :page-size="page.pageSize"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <el-dialog
+      title="项目信息"
+      :visible.sync="projectVisible"
+      width="900px"
+      append-to-body
+    >
+      <div class="mg-b-10"><span class="flex1 mg-r-20">{{curProjiect.projectName}}</span></div>
+      <div class="flex jc-sb pd-b-10">
+        <span></span>
+        <div>
+          <el-button
+            size="small"
+            @click="measureTree"
+            style="background-color: #626aef;color: white;"
+          >计量管理</el-button>
+          <el-button
+            size="small"
+            @click="splitTree"
+            type="success"
+          >征拆划分</el-button>
+          <el-button
+            size="small"
+            @click="testTree"
+            type="success"
+          >试验划分</el-button>
+          <el-button
+            size="small"
+            @click="editTree"
+            type="success"
+          >WBS树管理</el-button>
+          <el-button
+            size="small"
+            @click="editLogTree"
+            type="success"
+          >日志WBS树管理</el-button>
+          <el-button
+            size="small"
+            @click="editProject"
+            type="primary"
+          >编辑项目信息</el-button>
+          <el-button
+            size="small"
+            @click="addContract"
+            type="info"
+          >创建新合同段</el-button>
+          <el-button
+            size="small"
+            @click="dellProject"
+            type="danger"
+          >删除项目</el-button>
+          <el-button
+          style="margin-top: 10px;"
+            size="small"
+            @click="projectVisible = false"
+          >返回</el-button>
+        </div>
+      </div>
+      <div
+        style="height:400px;overflow: auto;"
+        v-if="contractList.length > 0"
+      >
+        <el-card
+          shadow="never"
+          v-for="(item,index) in contractList"
+          :key="item.id"
+        >
+          <div class="flex jc-sb">
+            <div class="flex jc-al-c flex1">
+              <el-avatar
+                :size="50"
+                :class="getAvatarBg(item.contractType)"
+              >{{getFont(item.contractType)}}</el-avatar>
+              <span class="mg-l-10 flex1 mg-r-10">{{item.contractName}}</span>
+            </div>
+            <div class="flex jc-al-c">
+              <el-link
+                type="primary"
+                @click="editContract(item)"
+              >编辑合同段信息</el-link>
+              <el-link
+                type="primary"
+                class="mg-l-10"
+                v-if="item.contractType==1"
+                @click="contractDetail(item,'2',item.contractType)"
+              >分配WBS</el-link>
+              <el-link
+                type="primary"
+                class="mg-l-10"
+                @click="delContract(item,index)"
+              >删除</el-link>
+            </div>
+          </div>
+        </el-card>
+      </div>
+      <div
+        class="text-align-c pd-t-20"
+        v-else
+      >
+        暂无合同段，请先创建合同段
+      </div>
+    </el-dialog>
+  </basic-container>
+</template>
+
+<script>
+import { getProjectList, removeProject } from "@/api/manager/projectinfo";
+import { findContractByProjectId, removeContractInfo } from "@/api/manager/contractinfo";
+// import {getDictionary} from "@/api/system/dict";
+import { mapGetters } from "vuex";
+import { getStore, setStore } from "@/util/store";
+export default {
+  data () {
+    return {
+      projectId: '',
+      curProjiect: {},
+      projectList: [],
+      projectPageList: [],
+
+      projectVisible: false,
+      contractList: [],
+
+      page: {
+        currentPage: 1,
+        pageSize: 16,
+        total: 0
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(["userInfo"]),
+  },
+  created () {
+    this.init();
+    //console.log(this.userInfo)
+  },
+  methods: {
+    init () {
+      this.getProjectList();
+      this.getProjectPageList();
+    },
+
+    getProjectList () {
+      getProjectList(1, 999).then((res) => {
+        this.projectList = res.data.data.records;
+      })
+    },
+    getProjectPageList () {
+      getProjectList(this.page.currentPage, this.page.pageSize).then((res) => {
+        this.projectPageList = res.data.data.records;
+        this.page.total = res.data.data.total;
+      })
+    },
+
+    projectClick (item) {
+      this.curProjiect = item;
+      findContractByProjectId(this.curProjiect.id).then((res) => {
+        this.contractList = res.data.data;
+      })
+      this.projectVisible = true;
+    },
+
+    handleCurrentChange (val) {
+      this.getProjectPageList();
+      this.page.currentPage = val;
+    },
+
+    projectChange (id) {
+      for (let i = 0; i < this.projectList.length; i++) {
+        if (id == this.projectList[i].id) {
+          this.curProjiect = this.projectList[i];
+          findContractByProjectId(this.curProjiect.id).then((res) => {
+            this.contractList = res.data.data;
+          })
+          this.projectVisible = true;
+          return;
+        }
+      }
+    },
+
+    addContract () {
+      this.$router.push({
+        path: '/contract/detail',
+        query: { pid: this.curProjiect.id }
+      });
+    },
+    editContract (item) {
+      this.$router.push({
+        path: '/contract/detail1',
+        query: {
+          pid: item.pid,
+          cid: item.id,
+          contractType: item.contractType
+        }
+      });
+    },
+    editProject () {
+      this.$router.push({
+        path: '/manager/projectinfo/detail',
+        query: {
+          id: this.curProjiect.id
+        }
+      });
+    },
+    contractDetail (item, type, contractType) {
+      this.$router.push({
+        path: '/contract/detail',
+        query: {
+          pid: item.pid,
+          cid: item.id,
+          type,
+          contractType
+        }
+      })
+    },
+    testTree () {
+      this.$router.push({
+        path: '/project/tree',
+        query: {
+          pid: this.curProjiect.id,
+          wbsid: this.curProjiect.referenceWbsTemplateIdTrial,
+          projectName:this.curProjiect.projectName,
+          type: 2
+        }
+      });
+    },
+   splitTree () {
+      this.$router.push({
+        path: '/project/tree',
+        query: {
+          pid: this.curProjiect.id,
+          wbsid: this.curProjiect.referenceWbsTemplateIdLar,
+          projectName:this.curProjiect.projectName,
+          type: 5
+        }
+      });
+    },
+    measureTree(){
+      this.$router.push({
+        path: '/project/tree',
+        query: {
+          pid: this.curProjiect.id,
+          wbsid: this.curProjiect.referenceWbsTemplateIdMeter,
+          projectName:this.curProjiect.projectName,
+          type: 3
+        }
+      });
+    },
+    editTree () {
+      this.$router.push({
+        path: '/project/tree',
+        query: {
+          pid: this.curProjiect.id,
+          wbsid: this.curProjiect.referenceWbsTemplateId,
+          projectName:this.curProjiect.projectName
+        }
+      });
+    },
+    editLogTree () {
+      this.$router.push({
+        path: '/project/tree',
+        query: {
+          pid: this.curProjiect.id,
+          wbsid: this.curProjiect.referenceLogWbsTemplateId,
+          projectName:this.curProjiect.projectName,
+          type: 4
+        }
+      });
+    },
+
+    delContract (item, index) {
+      this.$confirm('是否删除【' + item.contractName + '】?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        removeContractInfo(item.id).then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!"
+          });
+          this.contractList.splice(index, 1);
+        })
+      })
+    },
+    dellProject () {
+      if (this.contractList.length) {
+        this.$message({
+          type: "warning",
+          message: "只能删除下面无合同段的项目!"
+        });
+        return;
+      }
+
+      this.$confirm('是否删除【' + this.curProjiect.projectName + '】?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        removeProject(this.curProjiect.id).then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!"
+          });
+          //删除后当前列表为空，且不是第一页，往前翻一页
+          if(this.projectPageList.length == 1 && this.page.currentPage >1){
+            this.page.currentPage--;
+          }
+          this.getProjectPageList();
+          this.projectVisible = false;
+        })
+      })
+    },
+
+    getFont (type) {
+      if (type == 1) {
+        return '施';
+      } else if (type == 2) {
+        return '监';
+      } else if (type == 3) {
+        return '业';
+      }
+      return '';
+    },
+    getAvatarBg (type) {
+      if (type == 1) {
+        return { 'abg1': true };
+      } else if (type == 2) {
+        return { 'abg2': true };
+      } else if (type == 3) {
+        return { 'abg3': true };
+      }
+      return {};
+    },
+    getBg (index) {
+      let num = Math.trunc(index / 4);
+      if ((num % 2) === 0) {//判定条件余数为0时为偶数
+        return {
+          'bg1': true
+        }
+      } else {
+        return {
+          'bg2': true
+        }
+      }
+    },
+    wbsManage () {//wbs树管理按钮
+      this.$router.push('/manager/privateWBS/' + 111)
+    },
+    //同步
+    syncLedger () {
+      this.$router.push('/manager/projectinfo/ledger' )
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.project_name {
+  font-size: 20px;
+  cursor: pointer;
+}
+.bg1 {
+  background-color: rgb(127, 164, 221);
+  border-color: rgb(187, 187, 187);
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
+}
+.bg2 {
+  background-color: rgb(239, 240, 229);
+  border-color: rgb(187, 187, 187);
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
+}
+.abg1 {
+  background-color: rgb(42, 155, 121);
+}
+.abg2 {
+  background-color: rgb(155, 108, 42);
+}
+.abg3 {
+  background-color: rgb(42, 53, 155);
+}
+.header-box{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+</style>

src/views/manager/projectinfo/list.vue

@@ -107,98 +107,106 @@
   
   <!-- 项目信息 -->
         <el-dialog
-          title="项目信息"
+        class="project-dialog"
+         
           :visible.sync="projectVisible"
-          width="900px"
+          width="65%"
           append-to-body
         >
-          <div class="mg-b-10"><span class="flex1 mg-r-20">{{curProjiect.projectName}}</span></div>
-          <div class="flex jc-sb pd-b-10">
-            <span></span>
-            <div>
-              <el-button
-                size="small"
-                @click="measureTree"
-                style="background-color: #626aef;color: white;"
-              >计量管理</el-button>
-              <el-button
-                size="small"
-                @click="splitTree"
-                type="success"
-              >征拆划分</el-button>
-              <el-button
-                size="small"
-                @click="testTree"
-                type="success"
-              >试验划分</el-button>
-              <el-button
-                size="small"
-                @click="editTree"
-                type="success"
-              >WBS树管理</el-button>
-              <el-button
-                size="small"
-                @click="editLogTree"
-                type="success"
-              >日志WBS树管理</el-button>
+         <span slot="title">
+            <i class="el-icon-s-cooperation" style="color: #2550A2;"></i>项目信息
+          </span>
+          <div class="mg-b-15">
+          <el-tag  size="small" type="danger"   class="custom-ellipse-tag1"   >进行中</el-tag>
+            <span>{{curProjiect.projectName}}</span>
+        </div>
+           <div class="mg-b-15">
+            <span>项目配置</span>
+        </div>
+           <div class="flex jc-sb pd-b-10">
+          
+            <div >
+           <el-button
+              v-for="wbsBtn in wbsButtons"
+              :key="wbsBtn.type"
+              :style="wbsBtn.style"
+              size="small"
+              @click="handleWbsClick(wbsBtn.type)"
+            >
+              <i :class="wbsBtn.icon"></i> {{ wbsBtn.label }}
+            </el-button>
+
+             
               <el-button
                 size="small"
                 @click="editProject"
-                type="primary"
-              >编辑项目信息</el-button>
+                style="  background-color: #2550A2;border-color: #2550A2 ;color: white;"
+              
+              ><i class="el-icon-edit"></i> 编辑项目信息</el-button>
               <el-button
                 size="small"
                 @click="addContract"
-                type="info"
-              >创建新合同段</el-button>
+                style="  background-color: #2550A2;border-color: #2550A2 ;color: white;"
+              ><i class="el-icon-circle-plus"></i> 创建新合同段</el-button>
+                <el-button
+                size="small"
+                @click="sortContract"
+                 style="  background-color: #FF7D43;border-color: #FF7D43 ;color: white;"
+            
+              ><i class="el-icon-sort"></i> 合同段排序</el-button>
               <el-button
                 size="small"
                 @click="dellProject"
                 type="danger"
-              >删除项目</el-button>
-              <el-button
-              style="margin-top: 10px;"
-                size="small"
-                @click="projectVisible = false"
-              >返回</el-button>
+              ><i class="el-icon-delete"></i> 删除项目</el-button>
+           
             </div>
           </div>
           <div
-            style="height:400px;overflow: auto;"
+          class="mt-15"
             v-if="contractList.length > 0"
           >
-            <el-card
-              shadow="never"
-              v-for="(item,index) in contractList"
-              :key="item.id"
-            >
-              <div class="flex jc-sb">
-                <div class="flex jc-al-c flex1">
-                  <el-avatar
-                    :size="50"
-                    :class="getAvatarBg(item.contractType)"
-                  >{{getFont(item.contractType)}}</el-avatar>
-                  <span class="mg-l-10 flex1 mg-r-10">{{item.contractName}}</span>
-                </div>
-                <div class="flex jc-al-c">
-                  <el-link
-                    type="primary"
-                    @click="editContract(item)"
-                  >编辑合同段信息</el-link>
+          <el-table
+              :data="contractList"
+               height="400"
+              style="width: 100%"
+                header-cell-class-name="custom-header"
+              >
+              <el-table-column
+                prop="contractName"
+                label="合同段名称"
+               >
+              </el-table-column>
+              <el-table-column
+                prop="contractNumber"
+                label="合同段编号"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="contractType"
+                label="合同段类型">
+              </el-table-column>
+               <el-table-column
+                prop=""
+                label="合同段权限">
+              </el-table-column>
+               <el-table-column
+               width="120px"
+                prop="address"
+                label="操作">
+                <template slot-scope="scope">
                   <el-link
-                    type="primary"
-                    class="mg-l-10"
-                    v-if="item.contractType==1"
-                    @click="contractDetail(item,'2',item.contractType)"
-                  >分配WBS</el-link>
+                   type="primary"
+                    size="mini"
+                    @click="handleEdit(scope.$index, scope.row)">编辑合同段信息</el-link>
                   <el-link
-                    type="primary"
-                    class="mg-l-10"
-                    @click="delContract(item,index)"
-                  >删除</el-link>
-                </div>
-              </div>
-            </el-card>
+                    size="mini"
+                    type="danger"
+                    class="ml-10"
+                    @click="handleDelete(scope.$index, scope.row)">删除</el-link>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
           <div
             class="text-align-c pd-t-20"
@@ -257,7 +265,60 @@ export default {
         currentPage: 1,
         pageSize: 12,
         total: 0
+      },
+      wbsButtons: [
+      {
+        label: '质检WBS',
+        type: 'quality',
+        style: { 
+          backgroundColor: '#3B83F6',
+          borderColor: '#3B83F6',
+          color: 'white'
+        },
+        icon: 'el-icon-s-order'
+      },
+      {
+        label: '试验WBS',
+        type: 'test',
+        style: {
+          backgroundColor: '#A856F8',
+          borderColor: '#A856F8',
+          color: 'white'
+        },
+         icon: 'el-icon-guide'
+      },
+      {
+        label: '日志WBS',
+        type: 'log',
+        style: {
+          backgroundColor: '#6367F1',
+          borderColor: '#6367F1',
+          color: 'white'
+        },
+         icon: 'el-icon-notebook-1'
+      },
+      {
+        label: '计量WBS',
+        type: 'measure',
+        style: {
+          backgroundColor: '#E7B214',
+          borderColor: '#E7B214',
+          color: 'white'
+        },
+         icon: 'el-icon-files'
+      },
+      {
+        label: '征拆WBS',
+        type: 'split',
+        style: {
+          backgroundColor: '#EC489A',
+          borderColor: '#EC489A',
+          color: 'white'
+        },
+         icon: 'el-icon-s-order'
       }
+    ]
+
     }
   },
   computed: {
@@ -277,6 +338,25 @@ export default {
       this.page.currentPage = 1;
       this.getProjectPageList();
     },
+  handleWbsClick(type) {
+    switch (type) {
+      case 'quality':
+        this.editTree();
+        break;
+      case 'test':
+        this.testTree();
+        break;
+      case 'log':
+        this.editLogTree();
+        break;
+      case 'measure':
+        this.measureTree();
+        break;
+      case 'split':
+        this.splitTree();
+        break;
+    }
+  },
     getProjectList () {
       getProjectList(1, 999).then((res) => {
         this.projectList = res.data.data.records;
@@ -573,12 +653,12 @@ export default {
 
 .project-info {
   font-size: 14px;
-  color: #666;
+   color: black;
 }
 
 .info-label {
   font-weight: bold;
-  color: #444;
+  color: black;
   display: inline-block;
   margin-bottom: 5px;
 
@@ -607,7 +687,12 @@ export default {
 .mr-3 {
   margin-right: 3px;
 }
-
+.mt-15 {
+  margin-top: 15px;
+}
+.mg-b-15 {
+  margin-bottom: 15px;
+}
 /* 更彻底的透明效果 */
 
 </style>
@@ -697,6 +782,18 @@ export default {
   margin-right: 4px;
   font-size: 12px;
 }
+.project-dialog {
+ .el-dialog__body {
+   color: black;
+  }
+  .el-dialog__header {
+   
+    border-bottom: 1px solid #e6e6e6;
+  }
 
+}
+.custom-header {
+  background-color: #F2F3F5 !important;
+}
 </style>