b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style(dialogs): 统一全站自定义表单弹窗样式为客商档案风格

Browse Source 
- 新增全局弹窗表单标准类 .dialog-form--carded，实现卡片白底分组风格
- 规范表单标签宽度为 calc(6em + 24px)，右对齐且垂直居中
- 统一 input/select/cascader/tree-select/date-editor/textarea 等控件宽度为 250px
- 保持 radio/checkbox 组宽度自适应
- 应用样式改造多个弹窗组件：流程变更、流程删除、参数编辑、锁定用户、解锁确认、用户编辑与修改密码、新建导入
- 港口码头编辑弹窗内 input 宽度统一为 250px，调整详细地址为单行输入框并放宽宽度
- 调整备注字段文本域高度，优化整体弹窗表单布局与风格统一
This commit is contained in:
赵忠林
2026-08-13 00:02:31 +08:00
parent 748dd80d4a
commit 563909fafa
11 changed files with 371 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/system/authlock.vue
+81 -43
View File
@@ -61,38 +61,60 @@
</el-drawer>
<!-- 手动锁定用户 -->
<el-dialog title="锁定用户" append-to-body v-model="lockUserBox" width="500px">
<el-form :model="lockUserForm" label-width="auto" :rules="lockUserRules" ref="lockUserFormRef">
<el-form-item label="用户账号">
<el-input :model-value="lockUserForm.account" disabled />
</el-form-item>
<el-form-item label="锁定原因" prop="lockReason">
<el-input
v-model="lockUserForm.lockReason"
type="textarea"
:rows="3"
placeholder="请输入锁定原因"
/>
</el-form-item>
<el-form-item label="锁定开始" prop="lockBeginTime">
<el-date-picker
v-model="lockUserForm.lockBeginTime"
type="datetime"
placeholder="不填则立即生效"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="锁定结束" prop="lockEndTime">
<el-date-picker
v-model="lockUserForm.lockEndTime"
type="datetime"
placeholder="不填则永久锁定"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
/>
</el-form-item>
</el-form>
<el-dialog
title="锁定用户"
append-to-body
v-model="lockUserBox"
width="520px"
class="dialog-form--carded"
>
<section-card title="锁定信息">
<el-form
:model="lockUserForm"
label-position="right"
label-width="calc(6em + 24px)"
:rules="lockUserRules"
ref="lockUserFormRef"
>
<el-row :gutter="18">
<el-col :span="24">
<el-form-item label="用户账号">
<el-input :model-value="lockUserForm.account" disabled />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="锁定原因" prop="lockReason">
<el-input
v-model="lockUserForm.lockReason"
type="textarea"
:rows="3"
placeholder="请输入锁定原因"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="锁定开始" prop="lockBeginTime">
<el-date-picker
v-model="lockUserForm.lockBeginTime"
type="datetime"
placeholder="不填则立即生效"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="锁定结束" prop="lockEndTime">
<el-date-picker
v-model="lockUserForm.lockEndTime"
type="datetime"
placeholder="不填则永久锁定"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</section-card>
<template #footer>
<span class="dialog-footer">
<el-button @click="lockUserBox = false">取 消</el-button>
@@ -102,17 +124,33 @@
</el-dialog>
<!-- 解锁原因确认 -->
<el-dialog title="解锁确认" append-to-body v-model="unlockReasonBox" width="450px">
<el-form :model="unlockReasonForm" label-width="auto">
<el-form-item label="解锁原因">
<el-input
v-model="unlockReasonForm.unlockReason"
type="textarea"
:rows="3"
placeholder="请输入解锁原因（可选）"
/>
</el-form-item>
</el-form>
<el-dialog
title="解锁确认"
append-to-body
v-model="unlockReasonBox"
width="520px"
class="dialog-form--carded"
>
<section-card title="解锁原因">
<el-form
:model="unlockReasonForm"
label-position="right"
label-width="calc(6em + 24px)"
>
<el-row :gutter="18">
<el-col :span="24">
<el-form-item label="解锁原因">
<el-input
v-model="unlockReasonForm.unlockReason"
type="textarea"
:rows="3"
placeholder="请输入解锁原因（可选）"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</section-card>
<template #footer>
<span class="dialog-footer">
<el-button @click="unlockReasonBox = false">取 消</el-button>
src/views/system/param.vue
+46 -28
View File
@@ -126,37 +126,55 @@
<el-dialog
:title="title"
v-model="box"
width="50%"
width="560px"
:before-close="beforeClose"
append-to-body
class="dialog-form--carded"
>
<el-form :disabled="view" ref="form" :model="form" label-width="auto">
<!-- 表单字段 -->
<el-form-item label="参数名:" prop="paramName">
<el-input v-model="form.paramName" placeholder="请输入参数名" />
</el-form-item>
<el-form-item prop="paramKey">
<template #label>
<el-tooltip content="参数键为系统内部唯一标识，请勿随意修改" placement="top">
<el-icon style="margin-right: 4px; vertical-align: middle; color: #909399; cursor: pointer"><el-icon-question-filled /></el-icon>
</el-tooltip>
<span>参数键:</span>
</template>
<el-input v-model="form.paramKey" placeholder="请输入参数键" />
</el-form-item>
<el-form-item prop="paramValue">
<template #label>
<el-tooltip content="包含敏感关键词的配置不展示具体数值" placement="top">
<el-icon style="margin-right: 4px; vertical-align: middle; color: #909399; cursor: pointer"><el-icon-question-filled /></el-icon>
</el-tooltip>
<span>参数值:</span>
</template>
<el-input v-model="form.paramValue" placeholder="请输入参数值" />
</el-form-item>
<el-form-item label="备注:" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<section-card title="参数信息">
<el-form
:disabled="view"
ref="form"
:model="form"
label-position="right"
label-width="calc(6em + 24px)"
>
<el-row :gutter="18">
<el-col :span="24">
<el-form-item label="参数名" prop="paramName">
<el-input v-model="form.paramName" placeholder="请输入参数名" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item prop="paramKey">
<template #label>
<el-tooltip content="参数键为系统内部唯一标识，请勿随意修改" placement="top">
<el-icon style="margin-right: 4px; vertical-align: middle; color: #909399; cursor: pointer"><el-icon-question-filled /></el-icon>
</el-tooltip>
<span>参数键</span>
</template>
<el-input v-model="form.paramKey" placeholder="请输入参数键" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item prop="paramValue">
<template #label>
<el-tooltip content="包含敏感关键词的配置不展示具体数值" placement="top">
<el-icon style="margin-right: 4px; vertical-align: middle; color: #909399; cursor: pointer"><el-icon-question-filled /></el-icon>
</el-tooltip>
<span>参数值</span>
</template>
<el-input v-model="form.paramValue" placeholder="请输入参数值" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</section-card>
<!-- 表单按钮 -->
<template #footer>
<span v-if="!view" class="dialog-footer">
src/views/system/user.vue
+53 -34
View File
@@ -181,27 +181,29 @@
top="5vh"
append-to-body
destroy-on-close
class="user-edit-dialog"
class="user-edit-dialog dialog-form--carded"
>
<template #header>
<span class="dialog-title">{{ userDialogMode === 'add' ? '新增用户' : '编辑用户' }}</span>
</template>
<el-form ref="userFormRef" :model="form" :rules="userRules" label-position="right" label-width="120px">
<el-row :gutter="20">
<el-col :span="6"><el-form-item label="账号名" prop="account"><el-input v-model="form.account" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="姓名" prop="realName"><el-input v-model="form.realName" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="手机号" prop="phone"><el-input v-model="form.phone" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="邮箱"><el-input v-model="form.email" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="性别"><el-select v-model="form.sex" class="full-width"><el-option label="男" :value="1" /><el-option label="女" :value="2" /><el-option label="未知" :value="3" /></el-select></el-form-item></el-col>
<el-col :span="6"><el-form-item label="岗位" prop="postId"><el-tree-select v-model="form.postId" :data="postList" :props="{ label: 'postName', value: 'id' }" check-strictly class="full-width" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="所属组织" prop="deptId"><el-tree-select v-model="form.deptId" :data="permissionDeptTree" :props="{ label: 'title', value: 'id' }" multiple check-strictly show-checkbox class="full-width" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="工号"><el-input v-model="form.code" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="人员类别"><el-select v-model="form.personCategory" class="full-width"><el-option label="内部员工" :value="1" /><el-option label="承运商" :value="2" /></el-select></el-form-item></el-col>
<el-col :span="18"><el-form-item label="数据权限范围"><el-radio-group v-model="form.dataScopeRange"><el-radio :value="1">仅所属组织</el-radio><el-radio :value="2">全部组织</el-radio><el-radio :value="3">自定义</el-radio></el-radio-group></el-form-item></el-col>
<el-col :span="18" :offset="6"><el-form-item label="数据层级范围"><el-radio-group v-model="form.dataLevelRange"><el-radio :value="1">包含下级</el-radio><el-radio :value="2">仅本级</el-radio></el-radio-group></el-form-item></el-col>
<el-col :span="24"><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="200" show-word-limit /></el-form-item></el-col>
</el-row>
</el-form>
<section-card title="用户信息">
<el-form ref="userFormRef" :model="form" :rules="userRules" label-position="right" label-width="calc(6em + 24px)">
<el-row :gutter="18">
<el-col :span="6"><el-form-item label="账号名" prop="account"><el-input v-model="form.account" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="姓名" prop="realName"><el-input v-model="form.realName" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="手机号" prop="phone"><el-input v-model="form.phone" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="邮箱"><el-input v-model="form.email" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="性别"><el-select v-model="form.sex"><el-option label="男" :value="1" /><el-option label="女" :value="2" /><el-option label="未知" :value="3" /></el-select></el-form-item></el-col>
<el-col :span="6"><el-form-item label="岗位" prop="postId"><el-tree-select v-model="form.postId" :data="postList" :props="{ label: 'postName', value: 'id' }" check-strictly /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="所属组织" prop="deptId"><el-tree-select v-model="form.deptId" :data="permissionDeptTree" :props="{ label: 'title', value: 'id' }" multiple check-strictly show-checkbox /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="工号"><el-input v-model="form.code" /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="人员类别"><el-select v-model="form.personCategory"><el-option label="内部员工" :value="1" /><el-option label="承运商" :value="2" /></el-select></el-form-item></el-col>
<el-col :span="18"><el-form-item label="数据权限范围"><el-radio-group v-model="form.dataScopeRange"><el-radio :value="1">仅所属组织</el-radio><el-radio :value="2">全部组织</el-radio><el-radio :value="3">自定义</el-radio></el-radio-group></el-form-item></el-col>
<el-col :span="18" :offset="6"><el-form-item label="数据层级范围"><el-radio-group v-model="form.dataLevelRange"><el-radio :value="1">包含下级</el-radio><el-radio :value="2">仅本级</el-radio></el-radio-group></el-form-item></el-col>
<el-col :span="24"><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="200" show-word-limit /></el-form-item></el-col>
</el-row>
</el-form>
</section-card>
<el-tabs class="user-permission-tabs">
<el-tab-pane label="已拥有角色">
<el-table :data="formRoleList" border>
@@ -288,23 +290,40 @@
</el-dialog>
<!-- 管理员修改密码 -->
<el-dialog title="修改密码" append-to-body v-model="passwordBox" width="460px">
<el-form
ref="passwordFormRef"
:model="passwordForm"
:rules="passwordRules"
label-width="auto"
>
<el-form-item label="账号名">
<el-input v-model="passwordForm.account" disabled />
</el-form-item>
<el-form-item label="新密码" prop="password">
<el-input v-model="passwordForm.password" type="password" show-password />
</el-form-item>
<el-form-item label="确认密码" prop="password2">
<el-input v-model="passwordForm.password2" type="password" show-password />
</el-form-item>
</el-form>
<el-dialog
title="修改密码"
append-to-body
v-model="passwordBox"
width="520px"
class="dialog-form--carded"
>
<section-card title="密码信息">
<el-form
ref="passwordFormRef"
:model="passwordForm"
:rules="passwordRules"
label-position="right"
label-width="calc(6em + 24px)"
>
<el-row :gutter="18">
<el-col :span="24">
<el-form-item label="账号名">
<el-input v-model="passwordForm.account" disabled />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="新密码" prop="password">
<el-input v-model="passwordForm.password" type="password" show-password />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="确认密码" prop="password2">
<el-input v-model="passwordForm.password2" type="password" show-password />
</el-form-item>
</el-col>
</el-row>
</el-form>
</section-card>
<template #footer>
<span class="dialog-footer">
<el-button @click="passwordBox = false">取 消</el-button>