| | |
| | | <template> |
| | | <el-dialog class="ztzf-page-view-dialog" v-model="visible" :title="dialogTitle" @closed="handleClosed" destroy-on-close> |
| | | <el-dialog class="command-page-view-dialog" v-model="visible" :title="dialogTitle" @closed="handleClosed" destroy-on-close |
| | | :close-on-click-modal="false"> |
| | | <div class="detail-container" v-if="dialogReadonly"> |
| | | <div class="detail-title">用户详情</div> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <div class="label">登录账号</div> |
| | |
| | | <div class="label">账号状态</div> |
| | | <div class="val">{{ formData.statusName }}</div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="label">到期时间</div> |
| | | <div class="val">{{ formData.expireTime }}</div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="label">次数限制</div> |
| | | <div class="val">{{ formData.maxLoginNum }}</div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="label">飞行开始时间</div> |
| | | <div class="val">{{ formData.flightStartTime }}</div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="label">飞行结束时间</div> |
| | | <div class="val">{{ formData.flightEndTime }}</div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | |
| | | <el-form class="dialog-form" v-else ref="formRef" :model="formData" :rules="rules" label-width="110px"> |
| | | <el-divider content-position="left">基础信息</el-divider> |
| | | <div class="detail-title">基础信息</div> |
| | | <el-row :gutter="16"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="登录账号" prop="account"> |
| | | <el-input class="ztzf-data-cockpit-search-input" v-model="formData.account" maxlength="50" placeholder="请输入" clearable /> |
| | | <el-input class="command-input" v-model="formData.account" maxlength="50" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12" v-if="dialogMode === 'add'"> |
| | | <el-form-item label="密码" prop="password"> |
| | | <el-input |
| | | class="ztzf-data-cockpit-search-input" |
| | | class="command-input" |
| | | v-model="formData.password" |
| | | type="password" |
| | | maxlength="50" |
| | |
| | | <el-col :span="12" v-if="dialogMode === 'add'"> |
| | | <el-form-item label="确认密码" prop="password2"> |
| | | <el-input |
| | | class="ztzf-data-cockpit-search-input" |
| | | class="command-input" |
| | | v-model="formData.password2" |
| | | type="password" |
| | | maxlength="50" |
| | |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-divider content-position="left">详细信息</el-divider> |
| | | <div class="detail-title">详细信息</div> |
| | | <el-row :gutter="16"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="用户姓名" prop="realName"> |
| | | <el-input class="ztzf-data-cockpit-search-input" v-model="formData.realName" maxlength="50" placeholder="请输入" clearable /> |
| | | <el-input class="command-input" v-model="formData.realName" maxlength="50" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="手机号" prop="phone"> |
| | | <el-input class="ztzf-data-cockpit-search-input" v-model="formData.phone" maxlength="20" placeholder="请输入" clearable /> |
| | | <el-input class="command-input" v-model="formData.phone" maxlength="20" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="电子邮箱" prop="email"> |
| | | <el-input class="ztzf-data-cockpit-search-input" v-model="formData.email" maxlength="50" placeholder="请输入" clearable /> |
| | | <el-input class="command-input" v-model="formData.email" maxlength="50" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="用户性别" prop="sex"> |
| | | <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper" v-model="formData.sex" placeholder="请选择" clearable> |
| | | <el-select class="command-select" popper-class="command-select-popper" v-model="formData.sex" placeholder="请选择" clearable> |
| | | <el-option label="男" :value="1" /> |
| | | <el-option label="女" :value="2" /> |
| | | <el-option label="未知" :value="3" /> |
| | |
| | | <el-col :span="12"> |
| | | <el-form-item label="用户生日" prop="birthday"> |
| | | <el-date-picker |
| | | class="ztzf-data-cockpit-date-picker" |
| | | popper-class="ztzf-data-cockpit-date-picker-popper" |
| | | class="command-date-picker" |
| | | popper-class="command-date-picker-popper" |
| | | v-model="formData.birthday" |
| | | type="datetime" |
| | | placeholder="请选择" |
| | |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-divider content-position="left">职责信息</el-divider> |
| | | <div class="detail-title">职责信息</div> |
| | | <el-row :gutter="16"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="用户编号" prop="code"> |
| | | <el-input class="ztzf-data-cockpit-search-input" v-model="formData.code" maxlength="50" placeholder="请输入" clearable /> |
| | | <el-input class="command-input" v-model="formData.code" maxlength="50" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="所属角色" prop="roleId"> |
| | | <el-tree-select |
| | | class="ztzf-data-cockpit-select" |
| | | popper-class="ztzf-data-cockpit-tree-select-popper" |
| | | class="command-select" |
| | | popper-class="command-tree-select-popper" |
| | | v-model="formData.roleId" |
| | | :data="roleTree" |
| | | :props="treeProps" |
| | |
| | | <el-col :span="12"> |
| | | <el-form-item label="所属部门" prop="deptId"> |
| | | <el-tree-select |
| | | class="ztzf-data-cockpit-select" |
| | | popper-class="ztzf-data-cockpit-tree-select-popper" |
| | | class="command-select" |
| | | popper-class="command-tree-select-popper" |
| | | v-model="formData.deptId" |
| | | :data="deptTree" |
| | | :props="deptTreeSelectProps" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-divider content-position="left">登录限制</el-divider> |
| | | <el-row :gutter="16"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="到期时间" prop="expireTime"> |
| | | <el-date-picker |
| | | class="ztzf-data-cockpit-date-picker" |
| | | popper-class="ztzf-data-cockpit-date-picker-popper" |
| | | v-model="formData.expireTime" |
| | | type="datetime" |
| | | placeholder="请选择" |
| | | format="YYYY-MM-DD HH:mm:ss" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="次数限制" prop="maxLoginNum"> |
| | | <el-input class="ztzf-data-cockpit-search-input" v-model="formData.maxLoginNum" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="飞行开始时间" prop="flightStartTime"> |
| | | <el-time-picker |
| | | class="ztzf-data-cockpit-date-picker" |
| | | popper-class="ztzf-data-cockpit-date-picker-popper" |
| | | v-model="formData.flightStartTime" |
| | | placeholder="请选择" |
| | | format="HH:mm" |
| | | value-format="HH:mm" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="飞行结束时间" prop="flightEndTime"> |
| | | <el-time-picker |
| | | class="ztzf-data-cockpit-date-picker" |
| | | popper-class="ztzf-data-cockpit-date-picker-popper" |
| | | v-model="formData.flightEndTime" |
| | | placeholder="请选择" |
| | | format="HH:mm" |
| | | value-format="HH:mm" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | |
| | | <template #footer> |
| | | <el-button color="#2B2B4C" @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button> |
| | | <el-button v-if="dialogMode != 'view'" color="#2B2B4C" @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button> |
| | | <el-button color="#284FE3" v-if="!dialogReadonly" type="primary" :loading="submitting" :disabled="submitting" @click="handleSubmit"> |
| | | 保存 |
| | | </el-button> |
| | |
| | | import { getDeptTree } from '@/api/system/dept' |
| | | import { getRoleTree } from '@/api/system/role' |
| | | import func from '@/utils/func' |
| | | import { saveOperationLog } from '@ztzf/apis' |
| | | import { useRoute } from 'vue-router' |
| | | |
| | | const initForm = () => ({ |
| | | account: '', |
| | |
| | | code: '', |
| | | roleId: '', |
| | | deptId: '', |
| | | expireTime: '', |
| | | maxLoginNum: '', |
| | | flightStartTime: '', |
| | | flightEndTime: '', |
| | | }) |
| | | |
| | | const treeProps = { |
| | |
| | | }) |
| | | const roleTree = ref([]) |
| | | const deptTree = ref([]) |
| | | const route = useRoute() |
| | | |
| | | const validatePass = (rule, value, callback) => { |
| | | if (value === '') { |
| | |
| | | visible.value = false |
| | | } |
| | | |
| | | function validateFlightTime() { |
| | | if (formData.value.flightStartTime && formData.value.flightEndTime) { |
| | | const [startHours, startMinutes] = formData.value.flightStartTime.split(':').map(Number) |
| | | const [endHours, endMinutes] = formData.value.flightEndTime.split(':').map(Number) |
| | | const startTotalMinutes = startHours * 60 + startMinutes |
| | | const endTotalMinutes = endHours * 60 + endMinutes |
| | | if (endTotalMinutes < startTotalMinutes) { |
| | | ElMessage.error('飞行结束时间不能小于飞行开始时间') |
| | | return false |
| | | } |
| | | } |
| | | return true |
| | | } |
| | | |
| | | async function handleSubmit() { |
| | | const isValid = await formRef.value?.validate().catch(() => false) |
| | | if (!isValid) return |
| | | if (!validateFlightTime()) return |
| | | submitting.value = true |
| | | try { |
| | | const submitData = { ...formData.value } |
| | |
| | | submitData.name = submitData.realName |
| | | if (dialogMode.value === 'add') { |
| | | await add(submitData) |
| | | saveOperationLog({ |
| | | requestUri: route.path, |
| | | title: `${route.name || '用户管理'}-新增`, |
| | | type: 1 |
| | | }) |
| | | } else { |
| | | await update(submitData) |
| | | saveOperationLog({ |
| | | requestUri: route.path, |
| | | title: `${route.name || '用户管理'}-编辑`, |
| | | type: 1 |
| | | }) |
| | | } |
| | | ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功') |
| | | visible.value = false |