style(dialogs): 统一全站自定义表单弹窗样式为客商档案风格
- 新增全局弹窗表单标准类 .dialog-form--carded，实现卡片白底分组风格 - 规范表单标签宽度为 calc(6em + 24px)，右对齐且垂直居中 - 统一 input/select/cascader/tree-select/date-editor/textarea 等控件宽度为 250px - 保持 radio/checkbox 组宽度自适应 - 应用样式改造多个弹窗组件：流程变更、流程删除、参数编辑、锁定用户、解锁确认、用户编辑与修改密码、新建导入 - 港口码头编辑弹窗内 input 宽度统一为 250px，调整详细地址为单行输入框并放宽宽度 - 调整备注字段文本域高度，优化整体弹窗表单布局与风格统一
This commit is contained in:
+53
-34
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user