技术方案库
This commit is contained in:
parent
d73356a052
commit
f0f9b2d58a
|
|
@ -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;
|
||||
color: #333;
|
||||
background-color: #F1F6FF;
|
||||
color: #424242;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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: '创建时间' },
|
||||
]
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue