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

<template>
  
 <el-container class="pro-container">
  <el-header class="search-box">
    <div class="search-box-item-title">
      <el-input v-model="searchForm.name" placeholder="请输入内容" clearable size="small"></el-input>
    </div>
    <div class="ml-10">
      <el-button type="primary" @click="searchChange" class="custom-primary-btn" size="small">查询</el-button>
    </div>
    <div class="ml-10">
      <el-select v-model="searchForm.type" placeholder="项目状态" style="width: 120px;" size="small">
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="ml-10">
      <el-select v-model="searchForm.type" placeholder="默认排序" style="width: 120px;" size="small">
        <el-option
          v-for="item in sortOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="ml-10">
      <el-button type="warning" icon="el-icon-sort" size="small" @click="sortPro">排序</el-button>
    </div>
    <div class="ml-10">
      <el-button type="warning" icon="el-icon-star-off" size="small" class="custom-primary-btn">收藏夹</el-button>
    </div>
  </el-header>
  
  <el-main class="main-box">
    <div class="project-list-container">
    
      <el-card class="project-card" shadow="hover"  v-for="item in projectPageList"
            :key="item.id">
        <div class="project-top">
          <div class="project-tag">
             <el-tag
              size="small"
              v-for="item in tagItems"
              :key="item.label"
              :type="item.type"
              effect="dark"
              class="mr-3 custom-ellipse-tag"
               :class="`custom-tag-type-${item.type}`"
              >
              <i class=" el-icon-success"></i>
              {{ item.label }}
            </el-tag>
          </div>
          <div class="project-like">
            <i class="el-icon-star-on"  v-if="item.isLiked"     @click="toggleLike(item)"></i>
            <i class="el-icon-star-off" v-else></i>
          </div>
        </div>
       <div class="project-title" >
            <el-tooltip 
              v-if="item.projectAlias.length > 20" 
              :content="item.projectAlias" 
              placement="top"
            >
              <span>{{ item.projectAlias }}</span>
            </el-tooltip>
            <span v-else>{{ item.projectAlias }}</span>
          </div>
        <div class="project-info">
          <div><span class="info-label"><i class="el-icon-user"></i>负责人：</span>李田</div>
          <div><span class="info-label"><i class="el-icon-edit-outline"></i>电签类别：</span>安心签</div>
          <div><span class="info-label"><i class="el-icon-coordinate"></i>电签方式：</span>流程审批</div>
        </div>
        <div class="project-actions">
          <el-link type="primary" size="small" @click="projectClick(item)">
           
            查看详情 <i class="el-icon-right"></i>
          </el-link>
         
         <el-tag  size="small" type="danger"   class="custom-ellipse-tag1"   >进行中</el-tag>

        </div>
      </el-card>
      

      
      <!-- 其他项目卡片... -->
    </div>
  </el-main>
  
  <el-footer class="footer-box">
    <el-pagination
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :current-page.sync="page.currentPage"
      :total="page.total"
      :page-size="page.pageSize"
      class="transparent-pagination"
    >
    </el-pagination>
  </el-footer>
  
  <!-- 项目信息 -->
        <el-dialog
        class="project-dialog"
         
          :visible.sync="projectVisible"
          width="65%"
          append-to-body
        >
         <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"
                style="  background-color: #2550A2;border-color: #2550A2 ;color: white;"
              
              ><i class="el-icon-edit"></i> 编辑项目信息</el-button>
              <el-button
                size="small"
                @click="addContract"
                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"
              ><i class="el-icon-delete"></i> 删除项目</el-button>
           
            </div>
          </div>
          <div
          class="mt-15"
            v-if="contractList.length > 0"
          >
          <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="合同段类型"
                width="100px"
                
                >
                  <template slot-scope="scope">
                     <el-tag  size="small" type="danger"   class="custom-ellipse-tag1"   >{{ scope.row.contractType===1?'施工':scope.row.contractType===2?'监理':'指挥' }}</el-tag>
                  </template>
                
              </el-table-column>
               <el-table-column
                prop=""
                label="合同段权限">
              </el-table-column>
               <el-table-column
               width="180px"
                prop="address"
                label="操作">
                <template slot-scope="scope">
                  <el-link
                   type="primary"
                    size="mini"
                     @click="editContract(scope.row)">编辑合同段信息</el-link>
                  <el-link
                    size="mini"
                    type="danger"
                    class="ml-10"
                    @click="delContract(scope.row,sortOptionscope.$index)">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div
            class="text-align-c pd-t-20"
            v-else
          >
            暂无合同段，请先创建合同段
          </div>
        </el-dialog>

        <!-- 合同段排序弹窗 -->
        <ContractSort 
         ref="contractSortRef"
         :title="sortTitle"

        @confirm="handleSortConfirm"
      />
</el-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";
import ContractSort from './ContractSort.vue'
export default {
  data () {
    return {
      showTooltip: false, // 控制 tooltip 显示
      searchForm: {
        name: ''
      },
      typeOptions:[
        { value: '1', label: '未开始' },
        { value: '2', label: '配置中' },
        { value: '3', label: '进行中' },  
        { value: '4', label: '已完成' },
      ],
      sortOptions:[
        { value: '1', label: '收藏优先' },
        { value: '2', label: '创建时间' },
        { value: '3', label: '我负责的' },  
        
      ],
       tagItems: [
          { type: '1', label: '质检' },
          { type: '2', label: '试验' },
          { type: '3', label: '日志' },
          { type: '4', label: '计量' },
          { type: '5', label: '征拆' }
       ],
      projectId: '',
      curProjiect: {},
      projectList: [],
      projectPageList: [],

      projectVisible: false,
      contractList: [],

      page: {
        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'
      }
    ],
      sortContractVisible: false, // 合同段排序弹窗
      sortContractList: [],
      sortTitle: '合同段排序',

    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  components: {
    ContractSort
  },
  created () {
    this.init();
    //console.log(this.userInfo)
  },
  methods: {
    init () {
      this.getProjectList();
      this.getProjectPageList();
    },
  
    searchChange () {
      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;
      })
    },
    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' )
    },
    toggleLike(item){
      item.isLiked = !item.isLiked;
    },
    //合同段排序
    sortContract(){
      // this.sortContractVisible = true;
      this.sortContractList = JSON.parse(JSON.stringify(this.contractList));
     this.sortTitle = '合同段排序';

      this.$nextTick(() => {
        this.$refs.contractSortRef.show(this.sortContractList);
      });
    },
        // 处理排序确认
    handleSortConfirm(sortedList) {
      // 这里处理排序后的数据
      console.log('排序后的列表:', sortedList);
      // TODO: 调用接口保存排序结果
      this.contractList = [...sortedList];
      this.$message.success('排序成功');
    },
    sortPro(){
        this.sortContractList = JSON.parse(JSON.stringify(this.projectList));
        this.sortTitle = '项目排序';

      this.$nextTick(() => {
        this.$refs.contractSortRef.show(this.sortContractList);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.pro-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  
  .search-box {
    // padding: 0 !important; /* 取消内边距 */
    height: auto !important; /* 取消固定高度 */
    min-height: auto !important; /* 取消最小高度 */
    display: flex;
    align-items: center; /* 垂直居中 */
    flex-wrap: wrap; /* 允许换行 */
    
    .search-box-item-title {
      flex: 1; /* 输入框占据剩余空间 */
      min-width: 200px; /* 最小宽度 */
    }
    
    .ml-10 {
      margin-left: 10px;
   
    }
  }
  .footer-box{
    
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center;
  }
}

/* 自定义按钮样式 */
.custom-primary-btn {
  background-color: #2550A2 !important;
  border-color: #2550A2 !important;
}

/* 项目列表容器样式 */
.project-list-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  padding: 15px;
}

/* 项目卡片样式 */
.project-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.project-top{
  display: flex;
  justify-content: space-between; /* 左右对齐 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 10px;


}
.project-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%; /* 确保宽度限制 */
}

.project-info {
  font-size: 14px;
   color: black;
}

.info-label {
  font-weight: bold;
  color: black;
  display: inline-block;
  margin-bottom: 5px;

}
.project-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 搜索框样式 */
.search-box {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e6e6e6;
}

.ml-10 {
  margin-left: 10px;
}
.mr-5 {
  margin-right: 5px;
}
.mr-3 {
  margin-right: 3px;
}
.mt-15 {
  margin-top: 15px;
}
.mg-b-15 {
  margin-bottom: 15px;
}
/* 更彻底的透明效果 */

</style>
<style lang="scss">
/* 完全透明分页样式 */
.footer-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  background: transparent;
}

/* 移除所有按钮和页码的背景色 */
.transparent-pagination .btn-prev,
.transparent-pagination .btn-next,
.transparent-pagination .el-pager li {
  background: transparent !important;
  border: none !important;
}

/* 移除鼠标悬停时的背景色 */
.transparent-pagination .btn-prev:hover,
.transparent-pagination .btn-next:hover,
.transparent-pagination .el-pager li:hover {
  background: transparent !important;
}

/* 移除当前选中页的背景色，仅保留文字颜色 */
.transparent-pagination .el-pager li.active {
  background: transparent !important;
  color: #409EFF; /* 选中页的文字颜色 */
}

/* 移除整个分页组件的背景 */
.transparent-pagination {
  background: transparent !important;
}
.custom-ellipse-tag {
  border-radius: 15px !important;
  padding: 0 8px !important;
  margin-right: 8px !important;
  height: 24px;
  line-height: 24px;
  display: inline-flex;
  align-items: center;
  color: white !important; /* 文字颜色统一为白色 */
  border: none !important;
}
.custom-ellipse-tag1{
   border-radius: 15px !important;
  padding: 0 8px !important;
  margin-right: 8px !important;
  height: 24px;
  line-height: 24px;
  display: inline-flex;
  align-items: center;

  border: none !important;
}

/* 根据 type 设置背景色 */
.custom-tag-type-1 {
  background-color: #3B83F6 !important; /* 质检 - 蓝色 */
}
.custom-tag-type-2 {
  background-color: #A856F8 !important; /* 试验 - 紫色 */
}
.custom-tag-type-3 {
  background-color: #6367F1 !important; /* 日志 - 靛蓝 */
}
.custom-tag-type-4 {
  background-color: #E7B214 !important; /* 计量 - 黄色 */
}
.custom-tag-type-5 {
  background-color: #EC489A !important; /* 征拆 - 粉色 */
}

/* 图标样式 */
.custom-ellipse-tag .el-icon-success {
  margin-right: 4px;
  font-size: 12px;
}

/* 图标样式 */
.custom-ellipse-tag .el-icon-success {
  margin-right: 4px;
  font-size: 12px;
}
.project-dialog {
 .el-dialog__body {
   color: black;
   padding: 10px 20px 20px 20px !important;
  }
  .el-dialog__header {
   
    border-bottom: 1px solid #e6e6e6;
  }

}
.custom-header {
  background-color: #F2F3F5 !important;
}
</style>