技术方案库

src/components/TableModel2/index.vue

@@ -135,7 +135,6 @@
             ref="tableRef"
             :data="tableList"
             style="width: 100%"
-            :height="tableHeight"
             v-loading="loading"
             select-on-indeterminate
             @selection-change="handleSelectionChange"
@@ -309,15 +308,6 @@ export default {
                 flexDirection: 'column'
             }
         },
-        /* 表格自适应高度 */
-        tableHeight() {
-            const baseHeight = this.showSearch ? 200 : 120; // 搜索区域高度
-            const toolbarHeight = this.showRightTools ? 40 : 0; // 工具栏高度
-            const paginationHeight = 60; // 分页高度
-            const cardPadding = 40; // 卡片内边距
-            const tableHeight = `calc(100vh - ${baseHeight + toolbarHeight + paginationHeight + cardPadding}px)`;
-            return tableHeight;
-        }
     },
     watch: {
         columnsList: {
@@ -636,14 +626,14 @@ export default {
         box-shadow: 0px 4px 8px 0px rgba(76,76,76,0.2);
         border-radius: 4px 4px 4px 4px;
         color: #333;
-        border: 1px solid #d9d9d9;
+        border: none;
         font-size: 14px;
         transition: all 0.3s;
 
         &:hover {
             background: #f5f5f5;
             box-shadow: 0px 6px 12px 0px rgba(76,76,76,0.3);
-            border-color: #40a9ff;
+            color: #40a9ff;
         }
     }
 }
@@ -658,10 +648,13 @@ export default {
 
     ::v-deep .el-table {
         width: 100%;
+        margin-bottom: 0;
     }
 
     ::v-deep .el-pagination {
-        margin-top: 20px;
+        margin-top: 0;
+        padding-top: 16px;
+        text-align: right;
     }
 }
 
@@ -700,8 +693,9 @@ export default {
     // 表头样式
     thead {
         th {
-            background-color: #fafafa;
+            background-color: #F1F6FF;
-            color: #333;
+            color: #424242;
+            font-size: 16px;
             font-weight: 600;
         }
     }

src/router/index.js

@@ -274,7 +274,21 @@ export const dynamicRoutes = [
         meta: { title: '人员详情', activeMenu: '/enterpriseLibrary/personnel', noCache: true }
       }
     ]
+  },
+  {
+    path: '/technical',
+    component: Layout,
+    hidden: true,
+    permissions: ['enterpriseLibrary:technical:list'],
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/enterpriseLibrary/technical/index'),
+        name: 'Technical',
+        meta: { title: '技术方案库', activeMenu: '/enterpriseLibrary/technical', noCache: true }
       }
+    ]
+  },
 
 ]
 

src/views/enterpriseLibrary/enterprise/components/EnterpriseKnowledge.vue

@@ -98,13 +98,10 @@ export default {
     
     // 卡片点击事件
     handleCardClick(card) {
-      console.log('点击了知识库类型:', card.type)
-      
       // 查找对应的卡片数据
       if (card && card.path) {
         // 如果有路径，则跳转到对应页面
         this.$router.push({
-        //   path: card.path,
           name: card.name,
           query: {
             enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
@@ -186,7 +183,7 @@ export default {
   &:hover {
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     transform: translateY(-2px);
-    border-color: #409EFF;
+    // border-color: #409EFF;
   }
 
   .card-icon {
@@ -228,88 +225,4 @@ export default {
     }
   }
 }
-
-// 响应式设计
-@media (max-width: 1400px) {
-  .knowledge-grid {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 14px;
-  }
-}
-
-@media (max-width: 1000px) {
-  .knowledge-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 12px;
-  }
-}
-
-@media (max-width: 768px) {
-  .app-container {
-    padding: 15px;
-  }
-
-  .back-container {
-    margin-bottom: 20px;
-  }
-
-  .knowledge-grid {
-    grid-template-columns: 1fr;
-    gap: 12px;
-    padding: 0 5px;
-  }
-
-  .knowledge-card {
-    padding: 16px;
-    min-height: 100px;
-
-    .card-icon {
-      margin-right: 12px;
-
-      img {
-        width: auto;
-        height: auto;
-        max-width: 100%;
-        max-height: 100%;
-      }
-    }
-
-    .card-content {
-      .card-title {
-        font-size: 16px;
-        margin-bottom: 10px;
-      }
-
-      .card-description {
-        font-size: 13px;
-      }
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  .knowledge-card {
-    padding: 16px;
-    min-height: 160px;
-
-    .card-icon {
-      img {
-        width: auto;
-        height: auto;
-        max-width: 100%;
-        max-height: 100%;
-      }
-    }
-
-    .card-content {
-      .card-title {
-        font-size: 15px;
-      }
-
-      .card-description {
-        font-size: 12px;
-      }
-    }
-  }
-}
 </style>

src/views/enterpriseLibrary/enterprise/index.vue

@@ -474,7 +474,7 @@ export default {
 
     .stat-label {
       display: block;
-      font-size: 12px;
+      font-size: 14px;
       color: #666;
       margin-bottom: 4px;
     }
@@ -502,7 +502,7 @@ export default {
     padding: 12px 8px;
     border-radius: 6px;
     font-size: 12px;
-    font-weight: 500;
+    font-weight: normal;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     cursor: pointer;
@@ -516,8 +516,9 @@ export default {
     }
     
     span {
-      font-size: 12px;
+      font-size: 16px;
       white-space: nowrap;
+      font-weight: normal;
     }
   }
 

src/views/enterpriseLibrary/personnel/index.vue

@@ -2,14 +2,14 @@
     <div class="app-container">
         <!-- 返回按钮 -->
         <div class="back-container">
-            <el-button type="default" size="small" @click="handleBack" class="back-btn">
+            <el-button type="default" @click="handleBack" class="back-btn">
                 返回
             </el-button>
         </div>
 
         <!-- 搜索区域 -->
         <div class="search-container">
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+            <el-form :model="queryParams" ref="queryForm" :inline="true">
                 <el-form-item prop="personnelName">
                     <el-input v-model="queryParams.personnelName" placeholder="请输入姓名" clearable maxlength="32"
                         class="search-input" @keyup.enter.native="handleQuery">
@@ -150,7 +150,7 @@ export default {
         // 重置
         resetQuery() {
             this.queryParams.personnelName = ''
-            this.queryParams.position = ''
+            this.queryParams.personnelPosition = ''
             this.handleQuery()
         },
 
@@ -451,7 +451,7 @@ export default {
         }
 
         span {
-            font-size: 12px;
+            font-size: 16px;
             white-space: nowrap;
         }
 

src/views/enterpriseLibrary/technical/components/LeftType.vue

@@ -0,0 +1,177 @@
+<template>
+    <el-card class="sidebar-card">
+        <div class="add-btn" @click="handleAddCategory">
+            + 添加
+        </div>
+        <div class="category-list">
+            <div v-for="item in categoryList" :key="item.id" class="category-item"
+                :class="{ active: activeCategory === item.id }" @click="handleCategoryClick(item.id)">
+                <i class="el-icon-folder" style="margin-right: 8px; color: #666;"></i>
+                <span class="category-name">{{ item.name }}</span>
+                <el-dropdown trigger="click" @command="handleCategoryCommand">
+                    <span class="el-dropdown-link">
+                        <i class="el-icon-more"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item :command="{ type: 'edit', id: item.id }">编辑</el-dropdown-item>
+                        <el-dropdown-item :command="{ type: 'delete', id: item.id }">删除</el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+            </div>
+        </div>
+    </el-card>
+</template>
+
+<script>
+export default {
+    name: 'LeftTypeTechnical',
+    props: {
+        value: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            activeCategory: 'dev',
+            categoryList: [
+                { id: 'substation', name: '变电站' },
+                { id: 'swapping', name: '换电站' },
+                { id: 'line', name: '线路' },
+                { id: 'commitment', name: '对招标人项目通过评价审核验收的承诺' },
+            ]
+        }
+    },
+    watch: {
+        value(newVal) {
+            if (newVal) {
+                this.activeCategory = newVal
+            }
+        }
+    },
+    mounted() {
+        if (this.value) {
+            this.activeCategory = this.value
+        }
+    },
+    methods: {
+        handleAddCategory() {
+            this.$emit('add-category')
+        },
+        handleCategoryClick(id) {
+            this.activeCategory = id
+            this.$emit('change', id)
+        },
+        handleCategoryCommand(command) {
+            this.$emit('category-command', command)
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.sidebar-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin: 20px;
+
+    ::v-deep .el-card__body {
+        height: 100%;
+        overflow-y: hidden;
+        padding: 20px;
+        padding-right: 12px;
+        transition: overflow-y 0.3s ease;
+    }
+
+    &:hover ::v-deep .el-card__body {
+        overflow-y: auto;
+    }
+
+    // 自定义滚动条样式
+    ::v-deep .el-card__body::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    ::v-deep .el-card__body::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    ::v-deep .el-card__body::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 3px;
+    }
+
+    ::v-deep .el-card__body::-webkit-scrollbar-thumb:hover {
+        background: #a8a8a8;
+    }
+
+    .add-btn {
+        width: 121px;
+        height: 36px;
+        background: #1F72EA;
+        box-shadow: 0px 4px 8px 0px rgba(51,135,255,0.5);
+        border-radius: 4px 4px 4px 4px;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        font-size: 14px;
+        margin-bottom: 20px;
+        transition: all 0.3s;
+
+        &:hover {
+            background: #4A8BFF;
+            box-shadow: 0px 6px 12px 0px rgba(51,135,255,0.6);
+        }
+    }
+
+    .category-list {
+        .category-item {
+            display: flex;
+            align-items: center;
+            padding: 10px 12px;
+            margin-bottom: 4px;
+            cursor: pointer;
+            border-radius: 4px;
+            transition: all 0.3s;
+            background: transparent;
+
+            .category-name {
+                flex: 1;
+                color: #333;
+                font-size: 14px;
+            }
+
+            .el-dropdown-link {
+                color: #666;
+                cursor: pointer;
+                opacity: 0;
+                transition: opacity 0.3s;
+            }
+
+            &:hover {
+                background: #e0e0e0;
+
+                .el-dropdown-link {
+                    opacity: 1;
+                }
+            }
+
+            &.active {
+                background: #e3f2fd;
+
+                .category-name {
+                    color: #1F72EA;
+                    font-weight: 500;
+                }
+
+                i {
+                    color: #1F72EA !important;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/enterpriseLibrary/technical/components/RightTable.vue

@@ -0,0 +1,138 @@
+<template>
+    <!-- 用户管理 -->
+    <div class="app-container">
+        <TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="false" ref="userTableRef"
+            :columnsList="columnsList" :request-api="listUser">
+            <template slot="btn">
+                <!-- <el-button plain size="mini" type="primary" icon="el-icon-plus" v-hasPermi="['system:user:add']"
+                    @click="handleAdd">
+                    新增
+                </el-button> -->
+            </template>
+            <template slot="deptName" slot-scope="{ data }">
+                <span>{{ data.dept.deptName || '--' }}</span>
+            </template>
+            <template slot="handle" slot-scope="{ data }">
+                <el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['system:user:edit']"
+                    @click="handleUpdate(data)">
+                    修改
+                </el-button>
+                <el-button plain size="mini" type="danger" icon="el-icon-delete" v-hasPermi="['system:user:remove']"
+                    @click="handleDelete(data)" v-if="!data.admin">
+                    删除
+                </el-button>
+            </template>
+        </TableModel>
+    </div>
+</template>
+
+<script>
+import TableModel from '@/components/TableModel2'
+import { columnsList, formLabel } from './config'
+import {
+    listUser,
+    delUser,
+} from '@/api/system/user'
+
+
+export default {
+    name: 'RightTableTechnical',
+    components: {
+        TableModel,
+    },
+    data() {
+        return {
+            formLabel,
+            columnsList,
+            listUser,
+            title: "",
+            isflag: false,
+            isAdd: '',
+            row: {},
+            loading: false,
+            treeDataList: [],
+        }
+    },
+
+    created() {
+        this.initData();
+
+    },
+
+    methods: {
+        async initData() {
+            await getDeptSelectApi().then(res => {
+                this.treeDataList = this.convertToVueTree(res.data);
+            });
+            const item = this.formLabel.find(item => item.f_model === 'roleId');
+            await getRoleSelectApi().then(res => {
+                res.data.forEach(item => {
+                    item.label = item.name;
+                    item.value = item.id;
+                });
+                this.$set(item, 'f_selList', res.data)
+            });
+        },
+
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.title = "新增";
+            this.isAdd = 'add';
+            this.isflag = true;
+        },
+        closeDialog() {
+            this.isflag = false;
+        },
+        showColose() {
+            this.isflag = false;
+        },
+        /** 修改操作 */
+        handleUpdate(row) {
+            this.title = "修改";
+            this.isAdd = 'edit';
+            this.row = row;
+            this.isflag = true;
+        },
+        /* 搜索操作 */
+        handleQuery() {
+            this.$refs.userTableRef.getTableList()
+        },
+        /** 删除操作 */
+        handleDelete(row) {
+            this.$modal.confirm(`是否确认删除此数据项？`).then(() => {
+                // 显示加载遮罩
+                this.$modal.loading("正在删除，请稍候...");
+                delUser({ userId: row.userId }).then(res => {
+                    this.$modal.closeLoading();
+                    if (res.code === 200) {
+                        this.$modal.msgSuccess("删除成功");
+                        this.handleQuery();
+                    } else {
+                        this.$modal.msgError(res.msg);
+                    }
+                }).catch(error => {
+                    this.$modal.closeLoading();
+                    this.$modal.msgError(error);
+                });
+            }).catch(() => {
+                // 用户取消删除，不需要处理
+            });
+        },
+    },
+}
+</script>
+<style scoped lang="scss">
+.app-container {
+    padding: 20px 20px 20px 0;
+}
+
+.right-table-card {
+    height: 100%;
+    overflow-y: hidden;
+    transition: overflow-y 0.3s ease;
+
+    &:hover {
+        overflow-y: auto;
+    }
+}
+</style>

src/views/enterpriseLibrary/technical/components/config.js

@@ -0,0 +1,32 @@
+export const formLabel = [
+    {
+        isShow: false, // 是否展示label
+        f_type: 'ipt',
+        f_label: '用户账号',
+        f_model: 'userName',
+        f_max: 32,
+    },
+    {
+        isShow: false, // 是否展示label
+        f_type: 'ipt',
+        f_label: '手机号',
+        f_model: 'phonenumber',
+        f_max: 32,
+    },
+    {
+        isShow: false, // 是否展示label
+        f_type: 'sel',
+        f_label: '角色',
+        f_model: 'roleId',
+        f_selList: [],
+    },
+]
+
+export const columnsList = [
+    { t_props: 'userName', t_label: '方案名称' },
+    { t_props: 'nickName', t_label: '建设性质' },
+    { t_props: 'phonenumberDes', t_label: '结构形式' },
+    { t_props: 'phonenumberDes', t_label: '基础形式' },
+    { t_props: 'phonenumberDes', t_label: '文件状态' },
+    { t_slot: 'deptName', t_label: '创建时间' },
+]

src/views/enterpriseLibrary/technical/index.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="technical-container">
+        <div class="layout-container">
+            <el-row>
+                <el-col :span="5" class="left-col">
+                    <LeftType :value="activeCategory" @change="handleCategoryChange" @add-category="handleAddCategory"
+                        @category-command="handleCategoryCommand" />
+                </el-col>
+                <el-col :span="19" class="right-col">
+                    <RightTable :category-id="activeCategory" @add-scheme="handleAddScheme" @view="handleView"
+                        @edit="handleEdit" @delete="handleDelete" />
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script>
+import LeftType from './components/LeftType.vue'
+import RightTable from './components/RightTable.vue'
+
+export default {
+    name: 'Technical',
+    components: {
+        LeftType,
+        RightTable
+    },
+    data() {
+        return {
+            activeCategory: 'dev'
+        }
+    },
+    methods: {
+        handleCategoryChange(categoryId) {
+            this.activeCategory = categoryId
+            console.log('切换到分类:', categoryId)
+        },
+        handleAddCategory() {
+            console.log('添加分类')
+        },
+        handleCategoryCommand(command) {
+            if (command.type === 'edit') {
+                console.log('编辑分类:', command.id)
+            } else if (command.type === 'delete') {
+                console.log('删除分类:', command.id)
+            }
+        },
+        handleAddScheme() {
+            console.log('新增方案')
+        },
+        handleView(row) {
+            console.log('查看:', row)
+        },
+        handleEdit(row) {
+            console.log('编辑:', row)
+        },
+        handleDelete(row) {
+            console.log('删除:', row)
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.technical-container {
+    height: calc(100vh - 84px);
+    overflow: hidden;
+    background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
+}
+
+.layout-container {
+    display: flex;
+    height: 100%;
+}
+
+.left-col {
+    height: calc(100vh - 120px);
+}
+
+.right-col {
+    height: calc(100vh - 120px);
+}
+</style>