统一信息维护正式化外壳样式
This commit is contained in:
@@ -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 -->
|
||||
|
||||
Reference in New Issue
Block a user