统一信息维护正式化外壳样式

This commit is contained in:
wjj
2026-04-29 17:19:45 +08:00
parent 95ac01d7dc
commit 6f2ea5994a
27 changed files with 2037 additions and 338 deletions

View File

@@ -112,64 +112,66 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="baseStaffList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true"/>
<el-table-column label="柜员号" align="center" prop="staffId" :show-overflow-tooltip="true"/>
<el-table-column label="身份证号" align="center" prop="idCard" :show-overflow-tooltip="true"/>
<el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true"/>
<el-table-column label="电话" align="center" prop="phone" width="120"/>
<el-table-column label="年收入" align="center" prop="annualIncome" width="140"/>
<el-table-column label="是否党员" align="center" prop="partyMember" width="100">
<template slot-scope="scope">
<span>{{ formatPartyMember(scope.row.partyMember) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status" width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.status === '0'" type="success">在职</el-tag>
<el-tag v-else type="danger"></el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
v-hasPermi="['ccdi:employee:query']"
>详情</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['ccdi:employee:edit']"
>编辑</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['ccdi:employee:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="formal-table-shell">
<el-table v-loading="loading" :data="baseStaffList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true"/>
<el-table-column label="柜员号" align="center" prop="staffId" :show-overflow-tooltip="true"/>
<el-table-column label="身份证号" align="center" prop="idCard" :show-overflow-tooltip="true"/>
<el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true"/>
<el-table-column label="电话" align="center" prop="phone" width="120"/>
<el-table-column label="年收入" align="center" prop="annualIncome" width="140"/>
<el-table-column label="是否党员" align="center" prop="partyMember" width="100">
<template slot-scope="scope">
<span>{{ formatPartyMember(scope.row.partyMember) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status" width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.status === '0'" type="success"></el-tag>
<el-tag v-else type="danger">离职</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
v-hasPermi="['ccdi:employee:query']"
>详情</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['ccdi:employee:edit']"
>编辑</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['ccdi:employee:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
<!-- 添加或修改对话框 -->
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body class="employee-edit-dialog">
@@ -1472,6 +1474,12 @@ export default {
</script>
<style scoped>
.app-container {
min-height: calc(100vh - 84px);
padding: 24px;
background: #f5f6f8;
}
.query-form ::v-deep .el-row {
display: flex;
flex-wrap: wrap;
@@ -1483,6 +1491,84 @@ export default {
.query-form ::v-deep .el-form-item {
margin-right: 0;
margin-bottom: 16px;
}
.query-form {
margin-bottom: 16px;
padding: 18px 20px 2px;
border: 1px solid #dde3ec;
border-radius: 3px;
background: #ffffff;
}
.query-form ::v-deep .el-form-item__label {
color: #637187;
font-weight: 600;
}
.query-form ::v-deep .el-input__inner,
.query-form ::v-deep .el-select .el-input__inner,
.query-form ::v-deep .vue-treeselect__control {
border-color: #dde3ec;
border-radius: 3px;
}
.mb8 {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 16px;
padding: 14px 20px;
border: 1px solid #dde3ec;
border-radius: 3px;
background: #ffffff;
}
.formal-table-shell {
padding: 4px 0 16px;
border: 1px solid #dde3ec;
border-radius: 3px;
background: #ffffff;
overflow: hidden;
}
.mb8 ::v-deep .el-button {
border-radius: 4px;
}
.mb8 ::v-deep .top-right-btn {
margin-left: auto;
}
.formal-table-shell ::v-deep .el-table th {
background: #f6f8fb;
color: #607086;
padding: 9px 0;
}
.formal-table-shell ::v-deep .el-table td,
.formal-table-shell ::v-deep .el-table th.is-leaf {
border-bottom-color: #edf1f5;
}
.formal-table-shell ::v-deep .el-table td {
padding: 8px 0;
}
.formal-table-shell ::v-deep .el-table th > .cell,
.formal-table-shell ::v-deep .el-table td > .cell {
text-align: left;
line-height: 1.4;
}
.formal-table-shell ::v-deep .fixed-width .cell,
.formal-table-shell ::v-deep .el-table-column--selection .cell {
text-align: center;
}
.formal-table-shell ::v-deep .pagination-container {
padding: 16px 20px 0;
}
.detail-form .el-form-item {
@@ -1495,8 +1581,9 @@ export default {
}
.employee-detail-dialog .info-section {
background: #f9fafb;
border-radius: 8px;
background: #ffffff;
border: 1px solid #dde3ec;
border-radius: 4px;
padding: 16px;
margin-bottom: 16px;
}
@@ -1509,7 +1596,7 @@ export default {
color: #303133;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #e4e7ed;
border-bottom: 1px solid #edf1f5;
}
.employee-detail-dialog .section-title i {
@@ -1567,9 +1654,9 @@ export default {
align-items: center;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid #e4e7ed;
border-bottom: 1px solid #edf1f5;
font-size: 14px;
font-weight: 500;
font-weight: 600;
color: #303133;
}
@@ -1650,6 +1737,23 @@ export default {
font-size: 13px;
margin-right: 8px;
}
.employee-edit-dialog ::v-deep .el-dialog,
.employee-detail-dialog ::v-deep .el-dialog {
border-radius: 6px;
overflow: hidden;
}
.employee-edit-dialog ::v-deep .el-dialog__header,
.employee-detail-dialog ::v-deep .el-dialog__header {
border-bottom: 1px solid #dde3ec;
background: #ffffff;
}
.employee-edit-dialog ::v-deep .el-dialog__body,
.employee-detail-dialog ::v-deep .el-dialog__body {
background: #f8fafc;
}
</style>
<!-- 导入结果弹窗已抽离为独立组件 ImportResultDialog -->