From 190a64d69ad5d96781a61f70aaa9c7e1d42cf893 Mon Sep 17 00:00:00 2001 From: hailin <1356886193@qq.com> Date: 星期五, 14 七月 2023 08:57:11 +0800 Subject: [PATCH] 提交logo同时提交标准库详情页 --- src/views/standardLibrary/index.vue | 76 +++++---- src/views/standardLibrary/SpecificationDetails.vue | 351 +++++++++++++++++++++++++++++++++++++++++++ src/router/index.js | 7 src/assets/404_images/logoHide.png | 0 4 files changed, 400 insertions(+), 34 deletions(-) diff --git a/src/assets/404_images/logoHide.png b/src/assets/404_images/logoHide.png new file mode 100644 index 0000000..db548cd --- /dev/null +++ b/src/assets/404_images/logoHide.png Binary files differ diff --git a/src/router/index.js b/src/router/index.js index c6a2b93..2f584ea 100644 --- a/src/router/index.js +++ b/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' } } ] }, diff --git a/src/views/standardLibrary/SpecificationDetails.vue b/src/views/standardLibrary/SpecificationDetails.vue new file mode 100644 index 0000000..46310fc --- /dev/null +++ b/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> diff --git a/src/views/standardLibrary/index.vue b/src/views/standardLibrary/index.vue index 2811310..f589079 100644 --- a/src/views/standardLibrary/index.vue +++ b/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 { + // 鏍囧噯搴揵om鏍� 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: { -- Gitblit v1.9.3