吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
applications/drone-command/src/views/permissionManage/permissionUser/FormDiaLog.vue
@@ -1,7 +1,7 @@
<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>
@@ -43,37 +43,21 @@
               <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"
@@ -86,7 +70,7 @@
            <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"
@@ -98,26 +82,26 @@
            </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" />
@@ -127,8 +111,8 @@
            <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="请选择"
@@ -140,18 +124,18 @@
            </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"
@@ -165,8 +149,8 @@
            <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"
@@ -178,59 +162,10 @@
               </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>
@@ -245,6 +180,8 @@
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: '',
@@ -258,10 +195,6 @@
   code: '',
   roleId: '',
   deptId: '',
   expireTime: '',
   maxLoginNum: '',
   flightStartTime: '',
   flightEndTime: '',
})
const treeProps = {
@@ -288,6 +221,7 @@
})
const roleTree = ref([])
const deptTree = ref([])
const route = useRoute()
const validatePass = (rule, value, callback) => {
   if (value === '') {
@@ -337,24 +271,9 @@
   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 }
@@ -362,8 +281,18 @@
      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