提交logo同时提交标准库详情页

hailin

2023-07-14 190a64d69ad5d96781a61f70aaa9c7e1d42cf893

提交logo同时提交标准库详情页

 src/assets/404_images/logoHide.png

 src/router/index.js

@@ -55,12 +55,19 @@
  {
    path: '/standardLibrary',
    component: Layout,
    meta: { title: '标准库', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'index',
        name: 'StandardLibrary',
        component: () => import('@/views/standardLibrary/index'),
        meta: { title: '标准库', icon: 'form' }
      },
      {
        path: 'specificationDetails',
        name: 'SpecificationDetails',
        component: () => import('@/views/standardLibrary/SpecificationDetails'),
        meta: { title: '标准库详情', icon: 'form' }
      }
    ]
  },

 src/views/standardLibrary/SpecificationDetails.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,351 @@
<template>
  <div class="specificationDetail-main">
    <div class="page-header-tips">
      <div class="search-bar">
        <span :style="{marginRight:'12px', color:'#409EFF'}"> äº§å“åç§°ï¼šé’¢åŒ…钢心铝绞线</span>
        <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />V12</el-tag>
      </div>
      <div class="serve-btn">
        <el-button type="primary" icon="el-icon-plus">编辑</el-button>
        <el-button type="primary" icon="el-icon-plus">删除</el-button>
      </div>
    </div>
    <div class="content-main">
      <div class="specificationDetail-bom">
        <div class="bom-item">
          <div class="bom-item-search">
            <el-row>
              <el-col :span="19">
                <el-input
                  v-model="filterText"
                  placeholder="输入关键字进行过滤"
                />
              </el-col>
              <el-col :span="5">
                <el-button type="primary" size="small"><i class="el-icon-plus" /></el-button>
              </el-col>
            </el-row>
          </div>
          <el-tree
            ref="tree"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
          />
        </div>
        <div class="bom-item">
          <div class="bom-item-search">
            <el-row>
              <el-col :span="19">
                <div class="tips">
                  <span />
                  <div>项目/子项目</div>
                </div>
              </el-col>
              <el-col :span="5">
                <el-button type="primary" size="small" plain><i class="el-icon-plus" /></el-button>
              </el-col>
            </el-row>
          </div>
          <el-tree
            ref="tree"
            class="filter-tree"
            :data="item"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
          />
        </div>
      </div>
      <div class="specificationDetail-card">
        <div class="card-main">
          <div class="tips-main">
            <div class="tips">
              <span />
              <div>项目详情</div>
            </div>
            <div class="tips-btn">
              <span><i class="el-icon-edit" />操作：</span>
              <el-button type="text">编辑</el-button>
            </div>
          </div>
          <div class="message">
            <div class="message-item"><span><i class="el-icon-edit" />用户名：</span>121212121212</div>
            <div class="message-item">
              <span><i class="el-icon-edit" />姓名：</span>
              <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}"/>{{ 'jack' }}</el-tag>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />电话号码：</span>
              19825217196</div>
            <div class="message-item">
              <span><i class="el-icon-edit" />邮箱：</span>
              1212112</div>
          </div>
        </div>
        <div class="card-main">
          <div class="tips-main">
            <div class="tips">
              <span />
              <div>测试标准</div>
            </div>
            <div class="tips-btn">
              <span><i class="el-icon-edit" />操作：</span>
              <el-button type="text">编辑</el-button>
            </div>
          </div>
          <div class="message">
            <div class="message-item">
              <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}"/>单位：欧姆</el-tag>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />招标人员要求：＜3444</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />内控值：＜3444</span>
              1212112</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SpecificationDetail',
  data() {
    return {
    // é»˜è®¤å€¼
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // æ ‡å‡†è¯¦æƒ…分类
      data: [
        {
          id: 1,
          label: '一级 1'
        },
        {
          id: 2,
          label: '一级 1'
        },
        {
          id: 3,
          label: '一级 1'
        },
        {
          id: 4,
          label: '一级 1'
        }
      ],
      item: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }],
      searchData: {
        keyword: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
 .specificationDetail-main{
      // é¡µé¢å¤´éƒ¨æ¡ä»¶æœç´¢
  .page-header-tips{
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 24px 12px 24px;
     .search-bar{
      .el-radio-button.is-active{
        color: #409EFF !important;
        background: #ecf5ff !important;
        border-color: #b3d8ff !important;
      }
      >span{
        font-size: 20px;
      }
    }
  }
    // é¡µé¢ä¸­å¿ƒå†…容区域
    .content-main{
        display: flex;
        height: 100%;
        min-height: calc(100vh - 88px);
        // .specificationDetail-bom,.specificationDetail-card{
        //     padding: 20px;
        //     background: #fff;
        // }
        .specificationDetail-bom{
            flex: 50%;
            margin-right: 12px;
            display: flex;
                >div:nth-child(1){
                   flex: 43%;

                    margin-right: 12px;
                    padding: 20px;
                    background: #fff;
                }
                >div:nth-child(2){
                    flex: 57%;

                    margin-left: 12px;
                    background: #fff;
                    padding: 20px;

                }
            .bom-item{
                flex: 50%;
                .bom-item-search{
                    margin-bottom: 12px;
                    ::v-deep .el-input{
                        input{
                            height: 33px;
                            line-height: 33px;
                        }
                    }
                    .tips{
                        height: 33px !important;
                        display: flex;
                        height: 24px;
                        align-items: center;
                        font-size: 16px;
                        // margin-bottom: 12px;
                        >span{
                            display: inline-block;
                            margin-right: 10px;
                            width: 4px;
                            height: 16px;
                            background: #0077DB;
                        }
                        >div{
                            height: 100%;
                            line-height: 36px;
                        }
                        .el-button{
                            padding: 0;
                        }
                        }
                }
                .bom-item-search .el-row{
                    // display: flex;
                    .el-col{
                        text-align: right;
                    }
                }
            }
        }
        .specificationDetail-card{
            flex: 50%;
            margin-left: 12px;
            .card-main{
            background: #fff;
            // padding: 10px 20px 10px 20px;
            margin: 0;
            margin-bottom: 12px;
            border-radius: 6px;
            overflow: hidden;
            .tips-main{
            // margin: ;
            padding: 10px 20px 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            // height: ;
            &:hover{
                background: #85bff810;
                .tips-btn{
                display: block;
                left: 0;
                opacity:1;
                }
            }
            .tips-btn{
                height: 100%;
                // display: none;
                position: relative;
                opacity:0;
                left: 100px;
                transition: all 0.3s ease-in-out;
            }
            .tips{
            height: 100%;
            display: flex;
            height: 24px;
            align-items: center;
            font-size: 16px;
            // margin-bottom: 12px;
            >span{
                display: inline-block;
                margin-right: 10px;
                width: 4px;
                height: 16px;
                background: #0077DB;
            }
            >div{
                height: 100%;
                line-height: 26px;
            }
            .el-button{
                padding: 0;
            }
            }
            }

            // åŸºæœ¬ä¿¡æ¯å’Œä¼ä¸šä¿¡æ¯çš„每一个信息项样式
            .message{
            padding: 0px 20px 10px 20px;

            display: flex;
            flex-wrap: wrap;
            border-top: 1px solid #F2F6FC;
            // border-top: 1px solid #F2F6FC;
            >div{
                flex: 50%;
                max-width: 50%;
                padding: 8px;
                color: #606266;
                align-items: center;
                // height: 65px;
                font-size: 12px;
                height: 52px;
                display: flex;
                align-items: center;
                >span{
                color: #303133;
                font-size: 16px;
                //
                >i{
                    margin-right: 8px;
                }
                }
            }
            // >div:nth-child(5){
            //   flex: 60%;
            //   max-width: 60%;
            // }
            }
        }
        }
    }
}
</style>

 src/views/standardLibrary/index.vue

@@ -41,65 +41,60 @@
        </div>
        <div class="table-box">
          <el-table
            ref="personnerlTable"

            ref="standardLibraryTable"
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
            :data="personnerlTable"
            :data="standardLibraryTable"
            style="width: 100%"
          >
            <el-table-column
              prop="roleName"
              label="角色名称"
              min-width="120"
              type="index"
              label="序号"
              min-width="50"
            />
            <el-table-column
              prop="rolePermissions"
              label="角色权限"
              min-width="120"
            />
            <el-table-column
              prop="age"
              label="年龄"
              prop="name"
              label="产品名称"
              min-width="150"
            />
            <el-table-column
              prop="creatTime"
              label="创建时间"
              min-width="180"
              prop="username"
              label="更新人"
              min-width="100"
            />
            <el-table-column
              prop="phone"
              label="电话"
              min-width="200"
              prop="updateTime"
              label="更新时间"
              min-width="150"
            />
            <el-table-column
              prop="mailbox"
              label="邮箱"
              min-width="200"
              prop="vel"
              label="版本"
              min-width="100"
            />
            <el-table-column
              prop="incumbentStatus"
              label="在职状态"
              min-width="120"
              :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
              :filter-method="filterTag"
              filter-placement="bottom-end"
              prop="spe_state"
              label="状态"
              min-width="150"
            >
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.businessStatus === 0 ? 'primary' : 'success'"
                  :type="scope.row.spe_state === 0 ? 'primary' : 'success'"
                  disable-transitions
                >{{ scope.row.businessStatus === 0 ? '未同意' : '已同意' }}</el-tag>
                >{{ scope.row.spe_state === 0 ? '未同意' : '已同意' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              min-width="120"
              min-width="150"
            >
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                <!-- <el-button type="text" size="small">编辑</el-button> -->
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                >查看</el-button>
                <el-button type="text" size="small"><i class="el-icon-more" /></el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -124,6 +119,7 @@
export default {
  data() {
    return {
      // æ ‡å‡†åº“bom树
      data: [{
        id: 1,
        label: '一级 1',
@@ -139,13 +135,25 @@
          }]
        }]
      }],
      // é»˜è®¤å€¼
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // æŸ¥è¯¢æ¡ä»¶
      searchData: {
        keyword: ''
      }
      },
      standardLibraryTable: [
        {
          id: 2,
          name: 'AB',
          updateTime: '2023-07-12 00:00:12',
          username: '小小',
          vel: 'V1.0',
          spe_state: 1
        }
      ]
    }
  },
  watch: {