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

- 调整了多个组件的输入框、按钮等元素的样式
- 优化了部分对话框的布局结构
- 统一了表单项的样式
- 调整了部分字体大小和颜色
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

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>