taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): 优化多个组件的样式和布局

Browse Source 
- 调整了多个组件的输入框、按钮等元素的样式
- 优化了部分对话框的布局结构
- 统一了表单项的样式
- 调整了部分字体大小和颜色
This commit is contained in:
tcy
2025-09-09 21:12:04 +08:00
parent 78de3276d3
commit e6f235036e
7 changed files with 306 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/views/progress/plan/index.vue
View File

@ -1,12 +1,14 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="请选择项目：" prop="pid" label-width="100">
<el-select v-model="queryParams.projectId" placeholder="请选择" @change="handleChange" clearable>
<el-option v-for="item in matrixOptions" :key="item.projectId" :label="item.name" :value="item.projectId" />
<el-option v-for="item in matrixOptions" :key="item.projectId" :label="item.name"
:value="item.projectId" />
</el-select>
</el-form-item>
<el-form-item label="请选择方阵：" prop="pid" label-width="100" v-if="relevancyStructure == '2'">
@ -21,24 +23,16 @@
<el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane :label="item.name" v-for="item in tabList" :key="item.id" :name="item.id"></el-tab-pane>
<el-card shadow="never">
<el-table
ref="progressCategoryTableRef"
v-loading="loading"
:data="progressCategoryList"
row-key="id"
:default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
v-if="isExpand"
border
>
<el-table ref="progressCategoryTableRef" v-loading="loading" :data="progressCategoryList" row-key="id"
:default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
v-if="isExpand" border>
<el-table-column label="" width="50" type="expand">
<template #header>
<el-icon
class="cursor-pointer text-4! transform-rotate-z--90 transition-all-300"
<el-icon class="cursor-pointer text-4! transform-rotate-z--90 transition-all-300"
:class="!isExpandAll ? 'transform-rotate-z--90' : 'transform-rotate-z-90'"
@click="handleToggleExpandAll"
><Expand
/></el-icon>
@click="handleToggleExpandAll">
<Expand />
</el-icon>
</template>
<template #default="scope">
<el-card class="pl-25" shadow="hover">
@ -46,9 +40,8 @@
<el-table-column label="名称" align="center" prop="name" width="170">
<template #default="{ row }">
<el-tooltip :content="row.remark" placement="top" effect="dark" v-if="row.remark">
<span class="flex items-center justify-center"
><i class="iconfont icon-wenhao mr-0.5 text-3.5! text-#999"></i>{{ row.name }}</span
>
<span class="flex items-center justify-center"><i
class="iconfont icon-wenhao mr-0.5 text-3.5! text-#999"></i>{{ row.name }}</span>
</el-tooltip>
<span v-else>{{ row.name }}</span>
</template>
@ -60,7 +53,8 @@
</el-table-column>
<el-table-column label="是否延期" align="center" prop="isDelay" width="100">
<template #default="{ row }">
<el-tag :type="row.isDelay == '1' ? 'danger' : 'primary'">{{ row.isDelay == '1' ? '是' : '否' }}</el-tag>
<el-tag :type="row.isDelay == '1' ? 'danger' : 'primary'">{{ row.isDelay == '1' ? '是' : '否'
}}</el-tag>
</template>
</el-table-column>
<el-table-column label="计量方式" align="center" prop="unitType" width="100">
@ -71,7 +65,8 @@
<el-table-column label="总量" align="center" prop="total" width="100" />
<el-table-column label="总进度" align="center" prop="projectId">
<template #default="{ row }">
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage" status="success" />
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage"
status="success" />
</template>
</el-table-column>
<el-table-column label="计划总量" align="center" prop="planTotal" width="100" />
@ -87,35 +82,17 @@
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template #default="scope">
<el-button
type="warning"
icon="Download"
link
size="small"
v-if="scope.row.name === '光伏板'"
<el-button type="warning" icon="Download" link size="small" v-if="scope.row.name === '光伏板'"
@click="openDialog(scope.row, 'importTableStatus', '上传表格')"
v-hasPermi="['progress:progressCategory:add']"
>
v-hasPermi="['progress:progressCategory:add']">
导入表格
</el-button>
<el-button
type="success"
icon="Plus"
link
size="small"
@click="planRef.openDialog(scope.row)"
v-hasPermi="['progress:progressCategory:add']"
>
<el-button type="success" icon="Plus" link size="small" @click="planRef.openDialog(scope.row)"
v-hasPermi="['progress:progressCategory:add']">
计划
</el-button>
<el-button
type="primary"
icon="Plus"
link
size="small"
@click="handleDayAdd(scope.row)"
v-hasPermi="['progress:progressCategory:add']"
>
<el-button type="primary" icon="Plus" link size="small" @click="handleDayAdd(scope.row)"
v-hasPermi="['progress:progressCategory:add']">
日报
</el-button>
</template>
@ -132,7 +109,8 @@
</el-table-column>
<el-table-column label="总进度" align="center" prop="projectId">
<template #default="{ row }">
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage" status="success" />
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage"
status="success" />
</template>
</el-table-column>
</el-table>
@ -140,7 +118,8 @@
<el-table-column label="名称" align="center" prop="name" width="170">
<template #default="{ row }">
<el-tooltip :content="row.remark" placement="top" effect="dark" v-if="row.remark">
<span class="flex items-center justify-center"><i class="iconfont icon-wenhao mr-0.5 text-3.5! text-#999"></i>{{ row.name }}</span>
<span class="flex items-center justify-center"><i
class="iconfont icon-wenhao mr-0.5 text-3.5! text-#999"></i>{{ row.name }}</span>
</el-tooltip>
<span v-else>{{ row.name }}</span>
</template>
@ -163,7 +142,8 @@
<el-table-column label="总量" align="center" prop="total" width="100" />
<el-table-column label="总进度" align="center" prop="projectId">
<template #default="{ row }">
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage" status="success" />
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage"
status="success" />
</template>
</el-table-column>
<el-table-column label="计划总量" align="center" prop="planTotal" width="100" />
@ -179,28 +159,17 @@
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template #default="scope">
<el-button
type="warning"
icon="Download"
link
size="small"
v-if="scope.row.name === '光伏板'"
<el-button type="warning" icon="Download" link size="small" v-if="scope.row.name === '光伏板'"
@click="openDialog(scope.row, 'importTableStatus', '上传表格')"
v-hasPermi="['progress:progressCategory:add']"
>
v-hasPermi="['progress:progressCategory:add']">
导入表格
</el-button>
<el-button
type="success"
icon="Plus"
link
size="small"
@click="planRef.openDialog(scope.row)"
v-hasPermi="['progress:progressCategory:add']"
>
<el-button type="success" icon="Plus" link size="small" @click="planRef.openDialog(scope.row)"
v-hasPermi="['progress:progressCategory:add']">
计划
</el-button>
<el-button type="primary" icon="Plus" link size="small" @click="handleDayAdd(scope.row)" v-hasPermi="['progress:progressCategory:add']">
<el-button type="primary" icon="Plus" link size="small" @click="handleDayAdd(scope.row)"
v-hasPermi="['progress:progressCategory:add']">
日报
</el-button>
</template>
@ -211,7 +180,8 @@
<!-- 导入数据对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.importDataStatus" width="500px" append-to-body>
<file-upload class="pl-20 pt" v-model="dialog.file" :limit="20" :file-size="50" :file-type="['shp', 'shx', 'dbf']" />
<file-upload class="pl-20 pt" v-model="dialog.file" :limit="20" :file-size="50"
:file-type="['shp', 'shx', 'dbf']" />
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>

176
src/views/progress/progressCategory/index.vue
View File

@ -1,12 +1,14 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="请选择项目：" prop="pid" label-width="100">
<el-select v-model="queryParams.projectId" placeholder="请选择" @change="handleChange" clearable>
<el-option v-for="item in matrixOptions" :key="item.projectId" :label="item.name" :value="item.projectId" />
<el-option v-for="item in matrixOptions" :key="item.projectId" :label="item.name"
:value="item.projectId" />
</el-select>
</el-form-item>
<el-form-item label="请选择方阵：" prop="pid" label-width="100" v-if="relevancyStructure == '2'">
@ -27,13 +29,8 @@
<el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
</el-col>
<el-col :span="1.5">
<file-upload
upload-url="/progress/progressCategory/import"
v-model="file"
:limit="1"
:file-type="['xls', 'xlsx']"
:on-upload-success="handleSuccess"
>
<file-upload upload-url="/progress/progressCategory/import" v-model="file" :limit="1"
:file-type="['xls', 'xlsx']" :on-upload-success="handleSuccess">
<el-button type="primary" plain icon="upload">导入</el-button>
</file-upload>
</el-col>
@ -43,17 +40,39 @@
<el-col :span="1.5">
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
</el-col>
<el-col :span="6" :push="6">
<div class="summary-container">
<div class="summary-card owner-summary">
<div class="summary-icon">
<el-icon size="24">
<Money />
</el-icon>
</div>
<div class="summary-content">
<div class="summary-label">产值金额（业主）</div>
<div class="summary-value">{{ ownerOutputSum }}</div>
</div>
</div>
<div class="summary-card construction-summary">
<div class="summary-icon">
<el-icon size="24">
<Wallet />
</el-icon>
</div>
<div class="summary-content">
<div class="summary-label">产值金额（分包）</div>
<div class="summary-value">{{ constructionOutputSum }}</div>
</div>
</div>
</div>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table
ref="progressCategoryTableRef"
v-loading="loading"
:data="progressCategoryList"
row-key="id"
:default-expand-all="isExpandAll"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table ref="progressCategoryTableRef" v-loading="loading" :data="progressCategoryList" row-key="id"
:default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
max-height="550">
<!-- <el-table-column label="父类别id" prop="parentId" /> -->
<el-table-column label="类别名称" prop="name" width="230" />
<el-table-column label="计量方式" align="center" prop="unitType">
@ -102,10 +121,12 @@
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<div>
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['progress:progressCategory:edit']">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
v-hasPermi="['progress:progressCategory:edit']">
修改
</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['progress:progressCategory:remove']">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['progress:progressCategory:remove']">
删除
</el-button>
</div>
@ -119,14 +140,9 @@
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="progressCategoryFormRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="父类别" prop="parentId" v-if="!form.id">
<el-tree-select
v-model="form.parentId"
:data="progressCategoryOptions"
:props="{ value: 'id', label: 'name', children: 'children' }"
value-key="id"
placeholder="请选择父类别"
check-strictly
/>
<el-tree-select v-model="form.parentId" :data="progressCategoryOptions"
:props="{ value: 'id', label: 'name', children: 'children' }" value-key="id" placeholder="请选择父类别"
check-strictly />
</el-form-item>
<el-form-item label="计量方式" prop="unitType" v-if="!form.workType && form.unitType != '0'">
<el-select v-model="form.unitType" placeholder="请选择关联数据">
@ -191,6 +207,7 @@ import {
import { ProgressCategoryVO, ProgressCategoryQuery, ProgressCategoryForm } from '@/api/progress/progressCategory/types';
import { getTabList } from '@/api/progress/progressCategoryTemplate';
import { useUserStoreHook } from '@/store/modules/user';
import { Money, Wallet } from '@element-plus/icons-vue';
const { proxy } = getCurrentInstance() as any;
const { progress_unit_type, progress_work_type } = toRefs<any>(proxy?.useDict('progress_unit_type', 'progress_work_type'));
@ -225,7 +242,7 @@ const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const tempData = ref([])
const initFormData: ProgressCategoryForm = {
id: undefined,
parentId: undefined,
@ -291,7 +308,20 @@ const data = reactive<PageData<ProgressCategoryForm, ProgressCategoryQuery>>({
const { queryParams, form, rules } = toRefs(data);
const matrixIdList = ref([]);
const ownerOutputSum = computed(() => {
let sum = 0;
tempData.value.forEach(item => {
sum += Number(item.ownerOutputValue);
})
return proxy.formatPrice(sum);
});
const constructionOutputSum = computed(() => {
let sum = 0;
tempData.value.forEach(item => {
sum += Number(item.constructionOutputValue);
})
return proxy.formatPrice(sum);
});
/** 查询分项工程单价列表 */
const getList = async () => {
if (!queryParams.value.projectId) {
@ -310,6 +340,7 @@ const getList = async () => {
matrixId: item.projectId
};
});
if (!matrixValue.value) matrixValue.value = matrixList[0].id;
matrixOptions.value = matrixList;
queryParams.value.projectId = matrixList[0].projectId;
@ -325,6 +356,7 @@ const getList = async () => {
try {
const id = relevancyStructure.value == '2' ? matrixValue.value : activeTab.value;
const res = await listProgressCategory(id);
tempData.value = res.data;
const data = proxy?.handleTree<ProgressCategoryVO>(res.data, 'id', 'parentId');
if (data) {
progressCategoryList.value = data;
@ -506,3 +538,89 @@ onUnmounted(() => {
listeningProject();
});
</script>
<style scoped>
.summary-container {
display: flex;
gap: 16px;
justify-content: flex-end;
align-items: center;
}
.summary-card {
display: flex;
align-items: center;
padding: 16px 20px;
border-radius: 6px;
border: 1px solid #e4e7ed;
background: #ffffff;
min-width: 200px;
transition: all 0.2s ease;
}
.summary-card:hover {
border-color: #c0c4cc;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.owner-summary {
background: #f8f9fa;
border-color: #409eff;
color: #303133;
}
.construction-summary {
background: #f8f9fa;
border-color: #67c23a;
color: #303133;
}
.summary-icon {
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 4px;
background: #f0f2f5;
}
.owner-summary .summary-icon {
background: #e6f7ff;
color: #409eff;
}
.construction-summary .summary-icon {
background: #f0f9ff;
color: #67c23a;
}
.summary-content {
flex: 1;
}
.summary-label {
font-size: 13px;
color: #909399;
margin-bottom: 6px;
font-weight: 400;
}
.summary-value {
font-size: 16px;
font-weight: 600;
color: #303133;
}
@media (max-width: 768px) {
.summary-container {
flex-direction: column;
gap: 8px;
}
.summary-card {
min-width: 180px;
}
}
</style>