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/styles/element-ui.scss
+34
View File
@@ -362,6 +362,40 @@
row-gap: 0;
}
// 7) 卡片式弹窗表单标准（与 vehicle/customer-archive 编辑弹窗一致）
// 在 el-dialog 上添加 class="dialog-form--carded" 即可生效
.dialog-form--carded {
.el-form-item {
align-items: center;
margin-bottom: 20px;
}
.el-form-item__label {
flex: 0 0 calc(6em + 24px) !important;
width: calc(6em + 24px) !important;
white-space: normal !important;
word-break: break-all;
overflow-wrap: anywhere;
line-height: 18px;
}
.el-form-item__content > .el-input,
.el-form-item__content > .el-select,
.el-form-item__content > .el-cascader,
.el-form-item__content > .el-tree-select,
.el-form-item__content > .el-input-number,
.el-form-item__content > .el-date-editor,
.el-form-item__content > .el-textarea {
width: 250px;
max-width: 100%;
}
.el-form-item__content > .el-radio-group,
.el-form-item__content > .el-checkbox-group {
width: auto;
}
}
.avue-crud__dialog .avue-dialog__footer > .el-button {
margin-left: 12px;
}
src/views/base/port-terminal.vue
+53 -12
View File
@@ -171,6 +171,27 @@
<template #detailAddress="{ row }">
<span class="port-terminal-page__detail-address">{{ row.detailAddress || '-' }}</span>
</template>
<template #detailAddress-form>
<el-input
v-model="form.detailAddress"
class="detail-address-input"
clearable
maxlength="255"
show-word-limit
placeholder="请输入"
/>
</template>
<template #remark-form>
<el-input
v-model="form.remark"
class="remark-input"
type="textarea"
:rows="2"
maxlength="200"
show-word-limit
placeholder="请输入"
/>
</template>
<template #longitude-form>
<el-input
v-model="form.longitude"
@@ -195,7 +216,7 @@
@load="onLoad(page, query)"
/>
<el-dialog title="港口码头主数据导入" append-to-body v-model="excelBox" width="555px">
<el-dialog title="港口码头主数据导入" append-to-body v-model="excelBox" width="500px">
<avue-form :option="excelOption" v-model="excelForm">
<template #excelTemplate>
<el-button type="primary" @click="handleTemplate">
@@ -369,6 +390,7 @@ export default {
height: 'auto',
calcHeight: 32,
dialogWidth: 980,
dialogCustomClass: 'port-terminal-edit-dialog',
labelPosition: 'right',
labelWidth: 'auto',
tip: false,
@@ -396,7 +418,7 @@ export default {
formslot: true,
width: 140,
span: 12,
order: 70,
order: 30,
placeholder: '请输入编码',
rules: [
{ required: true, message: '请输入编码', trigger: 'blur' },
@@ -412,7 +434,7 @@ export default {
search: true,
searchOrder: 7,
span: 12,
order: 80,
order: 20,
placeholder: '请输入',
rules: [{ required: true, message: '请输入港口/码头名称', trigger: 'blur' }],
},
@@ -424,7 +446,7 @@ export default {
searchOrder: 6,
formslot: true,
span: 24,
order: 100,
order: 10,
dicData: [
{ label: '全部', value: '' },
{ label: '港口', value: '港口' },
@@ -444,7 +466,7 @@ export default {
dicData: [],
hide: true,
span: 12,
order: 90,
order: 100,
placeholder: '请选择',
rules: [{ required: false, message: '请选择上级港口', trigger: 'change' }],
change: ({ value }) => this.handleParentChange(value),
@@ -478,7 +500,7 @@ export default {
filterable: true,
dicData: [],
span: 12,
order: 60,
order: 40,
minWidth: 140,
overHidden: false,
placeholder: '自动带出',
@@ -515,6 +537,7 @@ export default {
type: 'select',
formslot: true,
hide: true,
order: 60,
props: {
label: 'title',
value: 'id',
@@ -543,7 +566,7 @@ export default {
formslot: true,
minWidth: 130,
span: 12,
order: 20,
order: 80,
placeholder: '请输入',
overHidden: false,
rules: [
@@ -557,7 +580,7 @@ export default {
formslot: true,
minWidth: 130,
span: 12,
order: 10,
order: 90,
placeholder: '请输入',
overHidden: false,
rules: [
@@ -578,13 +601,12 @@ export default {
{
label: '详细地址',
prop: 'detailAddress',
type: 'textarea',
slot: true,
minRows: 3,
formslot: true,
span: 24,
minWidth: 220,
overHidden: false,
order: 30,
order: 70,
placeholder: '请输入',
maxlength: 255,
showWordLimit: true,
@@ -611,8 +633,9 @@ export default {
label: '备注',
prop: 'remark',
type: 'textarea',
minRows: 4,
minRows: 2,
span: 24,
formslot: true,
hide: true,
maxlength: 200,
showWordLimit: true,
@@ -1338,3 +1361,21 @@ export default {
padding: 4px 0;
}
</style>
<style lang="scss">
/* 港口码头编辑/新增弹窗：所有 input 文本框、select 下拉控件统一宽度 250px */
.port-terminal-edit-dialog {
.el-input,
.el-select {
width: 250px !important;
}
/* 详细地址为整行字段，放宽到占满整行 */
.detail-address-input {
width: 81% !important;
}
/* 备注宽度 80% */
.remark-input {
width: 80% !important;
}
}
</style>
src/views/business/components/waybill-import-dialog.vue
+12 -12
View File
@@ -31,14 +31,14 @@
<el-pagination v-model:current-page="detailPage.current" v-model:page-size="detailPage.size" layout="total, prev, pager, next, sizes" :page-sizes="[10, 20, 50]" :total="detailPage.total" @current-change="loadDetails" @size-change="loadDetails" />
</el-dialog>
<el-dialog v-model="createVisible" title="新建导入" width="85%" append-to-body destroy-on-close class="waybill-import-create">
<section class="waybill-import-create__form-panel">
<el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="auto" class="archive-form">
<el-row :gutter="20"><el-col :span="6"><el-form-item label="项目" prop="projectId"><el-select v-model="form.projectId" filterable clearable placeholder="模糊查询后选择" @change="projectChange"><el-option v-for="item in projects" :key="item.id" :label="item.projectName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="客户" prop="customerName"><el-input v-model="form.customerName" disabled placeholder="自动带出" /></el-form-item></el-col><el-col :span="6"><el-form-item label="客户合同" prop="contractId"><el-select v-model="form.contractId" filterable clearable placeholder="自动带出"><el-option v-for="item in contracts" :key="item.id" :label="item.contractName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运类型" prop="carrierType"><el-select v-model="form.carrierType"><el-option label="承运商" value="承运商" /><el-option label="自运" value="自运" /><el-option label="网货平台" value="网货平台" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运商"><el-select v-model="form.carrierIds" multiple filterable placeholder="自动带出，多个需选择"><el-option v-for="item in carriers" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入状态" prop="status"><el-select v-model="form.status"><el-option label="完成" value="completed" /><el-option label="进行中" value="processing" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入类型" prop="importType"><el-select v-model="form.importType"><el-option label="运单" value="waybill" /><el-option label="结算单" value="settlement" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="发货计划"><el-select v-model="form.planId" clearable filterable placeholder="请选择"><el-option v-for="item in plans" :key="item.id" :label="item.planName" :value="item.id" /></el-select></el-form-item></el-col></el-row>
<el-dialog v-model="createVisible" title="新建导入" width="85%" append-to-body destroy-on-close class="waybill-import-create dialog-form--carded">
<section-card title="导入信息">
<el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="calc(6em + 24px)">
<el-row :gutter="18"><el-col :span="6"><el-form-item label="项目" prop="projectId"><el-select v-model="form.projectId" filterable clearable placeholder="模糊查询后选择" @change="projectChange"><el-option v-for="item in projects" :key="item.id" :label="item.projectName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="客户" prop="customerName"><el-input v-model="form.customerName" disabled placeholder="自动带出" /></el-form-item></el-col><el-col :span="6"><el-form-item label="客户合同" prop="contractId"><el-select v-model="form.contractId" filterable clearable placeholder="自动带出"><el-option v-for="item in contracts" :key="item.id" :label="item.contractName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运类型" prop="carrierType"><el-select v-model="form.carrierType"><el-option label="承运商" value="承运商" /><el-option label="自运" value="自运" /><el-option label="网货平台" value="网货平台" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运商"><el-select v-model="form.carrierIds" multiple filterable placeholder="自动带出，多个需选择"><el-option v-for="item in carriers" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入状态" prop="status"><el-select v-model="form.status"><el-option label="完成" value="completed" /><el-option label="进行中" value="processing" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入类型" prop="importType"><el-select v-model="form.importType"><el-option label="运单" value="waybill" /><el-option label="结算单" value="settlement" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="发货计划"><el-select v-model="form.planId" clearable filterable placeholder="请选择"><el-option v-for="item in plans" :key="item.id" :label="item.planName" :value="item.id" /></el-select></el-form-item></el-col></el-row>
<el-form-item label="运单明细表" prop="file"><el-upload action="#" accept=".xls,.xlsx" :auto-upload="false" :limit="1" :file-list="files" :on-change="fileChange" :on-remove="fileRemove"><el-button type="primary">添加附件</el-button></el-upload><span class="waybill-import-create__file-tip">请上传运单明细表，仅支持 excel 格式</span><el-link type="primary" @click="downloadTemplate">下载模板</el-link></el-form-item>
</el-form>
<div class="waybill-import-create__form-actions"><el-button @click="createVisible = false">关闭</el-button><el-button @click="saveDraft">保存草稿</el-button><el-button type="primary" @click="confirmImport">确认导入</el-button></div>
</section>
</section-card>
<section class="waybill-import-create__detail-panel" v-if="rows.length"><div class="waybill-import-create__detail-head"><div class="dialog-section-title">导入数据明细</div><el-button type="danger" plain :disabled="!rowSelection.length" @click="removeSelectedRows">批量删除</el-button></div><el-tabs v-model="previewTab"><el-tab-pane :label="`运单数（${rows.length}）`" name="all" /><el-tab-pane :label="`疑似重复（${duplicateRows.length}）`" name="duplicate" /></el-tabs><el-table :data="previewRows" border max-height="440" @selection-change="rowSelection = $event"><el-table-column type="selection" width="55" /><el-table-column type="index" label="序号" width="65" /><el-table-column v-for="column in detailColumns" :key="column.prop" :prop="column.prop" :label="column.label" min-width="140" show-overflow-tooltip /><el-table-column label="操作" width="180" fixed="right"><template #default="{ row }"><el-link type="primary" @click="cancelRow(row)">取消</el-link><el-link type="primary" @click="saveRow(row)">保存</el-link><el-link type="primary" @click="editRow(row)">编辑</el-link><el-link type="danger" @click="deleteRow(row)">删除</el-link></template></el-table-column></el-table></section>
</el-dialog>
</template>
@@ -153,14 +153,14 @@ const confirmImport = async () => { await formRef.value?.validate(); if (!valida
}
.waybill-import-create {
&__form-panel,
&__detail-panel {
border: 1px solid #eff1f7;
padding: 20px 24px;
}
&__detail-panel { margin-top: 12px; }
&__form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
&__detail-panel {
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
padding: 14px 16px;
margin-top: 8px;
}
&__detail-head { display: flex; align-items: center; gap: 24px; margin-bottom: 8px; }
&__file-tip { margin: 0 24px; color: #606266; }
}
src/views/business/project-apply.vue
+5 -5
View File
@@ -1908,7 +1908,7 @@ export default {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 72px;
row-gap: 0;
margin-bottom: 16px;
margin-bottom: 8px;
background: #fff;
border-radius: 0 0 6px 6px;
padding: 14px 16px 4px;
@@ -1934,7 +1934,7 @@ export default {
&__table {
width: 100%;
margin-bottom: 16px;
margin-bottom: 8px;
background: #fff;
border-radius: 0 0 6px 6px;
padding: 12px;
@@ -1952,7 +1952,7 @@ export default {
}
&__textarea-list {
margin-bottom: 16px;
margin-bottom: 8px;
background: #fff;
border-radius: 0 0 6px 6px;
padding: 14px 16px 4px;
@@ -1975,7 +1975,7 @@ export default {
}
&__material-card {
margin-bottom: 16px;
margin-bottom: 8px;
background: #fff;
border-radius: 6px;
padding: 14px 16px;
@@ -2016,7 +2016,7 @@ export default {
margin: 0 0 16px;
background: #fff;
border-radius: 6px;
padding: 12px;
padding: 12px 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
src/views/flow/follow.vue
+18 -6
View File
@@ -21,12 +21,24 @@
<el-tag>{{ row.suspensionState === 1 ? '激活' : '挂起' }}</el-tag>
</template>
</avue-crud>
<el-dialog title="流程删除" append-to-body v-model="followBox" width="20%">
<el-form :model="form" ref="form" label-width="auto">
<el-form-item label="删除理由">
<el-input v-model="deleteReason" placeholder="请输入删除理由" />
</el-form-item>
</el-form>
<el-dialog
title="流程删除"
append-to-body
v-model="followBox"
width="400px"
class="dialog-form--carded"
>
<section-card title="删除理由">
<el-form :model="form" ref="form" label-position="right" label-width="calc(6em + 24px)">
<el-row :gutter="18">
<el-col :span="24">
<el-form-item label="删除理由">
<el-input v-model="deleteReason" placeholder="请输入删除理由" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</section-card>
<template #footer>
<span class="dialog-footer">
<el-button @click="followBox = false">关 闭</el-button>
src/views/flow/manager.vue
+26 -14
View File
@@ -81,20 +81,32 @@
</span>
</template>
</el-dialog>
<el-dialog title="流程变更" append-to-body v-model="stateBox" width="20%">
<el-form :model="form" ref="form" label-width="auto">
<el-form-item label="流程状态">
<el-select v-model="flowState" placeholder="请选择" value="">
<el-option
v-for="item in stateOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-form>
<el-dialog
title="流程变更"
append-to-body
v-model="stateBox"
width="400px"
class="dialog-form--carded"
>
<section-card title="流程状态">
<el-form :model="form" ref="form" label-position="right" label-width="calc(6em + 24px)">
<el-row :gutter="18">
<el-col :span="24">
<el-form-item label="流程状态">
<el-select v-model="flowState" placeholder="请选择" value="">
<el-option
v-for="item in stateOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</section-card>
<template #footer>
<span class="dialog-footer">
<el-button @click="stateBox = false">关 闭</el-button>
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>