微调

2024-11-07 19:25:45 +08:00
parent 4b32e1f215
commit f72b5300be
7 changed files with 201 additions and 220 deletions
--- a/frontend/src/api/user/interface/index.ts
+++ b/frontend/src/api/user/interface/index.ts
@@ -1,5 +1,5 @@
 // 登录模块
-import type { ReqPage } from '@/api/interface'
+import type { ReqPage,ResPage } from '@/api/interface'

 export namespace Login {
  export interface ReqLoginForm {
@@ -18,21 +18,42 @@ export namespace Login {
 // 用户管理模块
 export namespace User {

+   /**
+   * 用户数据表格分页查询参数
+   */
+   export interface ReqUserParams extends ReqPage{
+    id: string; // 装置序号用户ID 必填
+    name: string;     //用户名(别名)
+    loginTime?: string;//最后一次登录时间
+  }
+
  // 用户接口
-  export interface UserBO {
-    id?: string;       //用户ID，作为唯一标识
+  export interface ResUser {
+    id: string;       //用户ID，作为唯一标识
    name: string;     //用户名(别名)
    loginName: string;//登录名
+    deptId?: number;//部门ID
    password: string; //密码
    phone?: string;    //手机号
    email?: string;    //邮箱
    loginTime?: string;//最后一次登录时间
    loginErrorTimes: number;//登录错误次数
    lockTime?: string; //用户密码错误锁定时间
+    createBy?: string;//创建用户
+    createTime?: string;//创建时间
+    updateBy?: string;//更新用户
+    updateTime?: string;//更新时间
  }
-   // 用户+分页
-   export interface ReqUserParams extends ReqPage,UserBO {
+
+  /**
+   * 用户表格查询分页返回的对象；
+   */
+       export interface ResUserPage extends ResPage<ResUser> {

       }
+  //  // 用户+分页
+  //  export interface ReqUserParams extends ReqPage,UserBO {
+
+  //  }
 }

--- a/frontend/src/api/user/user.ts
+++ b/frontend/src/api/user/user.ts
@@ -1,5 +1,5 @@
-import { ResPage } from '@/api/interface'
-import { User } from './interface'
+import type { ResPage } from '@/api/interface'
+import type { User } from './interface'
 import { ADMIN as rePrefix } from '@/api/config/serviceName'
 import http from '@/api'

@@ -8,7 +8,7 @@ import http from '@/api'
 */
 // 获取用户列表
 export const getUserList = (params: User.ReqUserParams) => {
-  return http.post<ResPage<User.UserBO>>(`/user/list`, params)
+  return http.post(`/user/list`, params)
 }

 // 获取树形用户列表
@@ -17,22 +17,22 @@ export const getUserList = (params: User.ReqUserParams) => {
 // }

 // 新增用户
-export const addUser = (params: User.UserBO) => {
+export const addUser = (params: User.ResUser) => {
  return http.post(`/user/add`, params)
 }

 // 批量添加用户
-export const BatchAddUser = (params: FormData) => {
-  return http.post(`${rePrefix}/user/import`, params)
+export const BatchAddUser = (params: User.ReqUserParams) => {
+  return http.post(`$/user/import`, params)
 }

 // 编辑用户
-export const editUser = (params: User.UserBO) => {
-  return http.post(`/user/edit`, params)
+export const updateUser = (params: User.ResUser) => {
+  return http.post(`/user/update`, params)
 }

 // 删除用户
-export const deleteUser = (params: { id: string[] }) => {
+export const deleteUser = (params:  string[] ) => {
  return http.post(`/user/delete`, params)
 }

--- a/frontend/src/components/TimeControl/index.vue
+++ b/frontend/src/components/TimeControl/index.vue
@@ -138,6 +138,7 @@ const updateDateRange = () => {
  } else if (timeUnit.value === '周') {
    startDate.value = getStartOfWeek(today.value)
    endDate.value = getEndOfWeek(today.value)
+    console.log(endDate.value.toLocaleDateString())
  } else if (timeUnit.value === '月') {
    startDate.value = new Date(today.value.getFullYear(), today.value.getMonth(), 1)
    endDate.value = new Date(today.value.getFullYear(), today.value.getMonth() + 1, 0)
--- a/frontend/src/views/authority/user/components/userPopup.vue
+++ b/frontend/src/views/authority/user/components/userPopup.vue
@@ -1,41 +1,41 @@
 <template>
    <!-- 基础信息弹出框 -->
-  <el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogSmall" @close="handleCancel" width="500" draggable>
+  <el-dialog v-model='dialogVisible' :title="dialogTitle" v-bind="dialogSmall" @close="close">
    <div>
-        <el-form :model="data"
+        <el-form :model="formContent"
                  ref='formRuleRef'
                  :rules='rules'
                  >
        <el-form-item label="用户名" prop='name' :label-width="100">
-          <el-input v-model="data.name" placeholder="请输入用户名" autocomplete="off" />
+          <el-input v-model="formContent.name" placeholder="请输入用户名" autocomplete="off" />
        </el-form-item>
        <el-form-item label="登录名" prop='loginName'  :label-width="100">
-          <el-input v-model="data.loginName" placeholder="请输入登录名" autocomplete="off" />
+          <el-input v-model="formContent.loginName" placeholder="请输入登录名" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop='password' :label-width="100">
-          <el-input type="password" v-model="data.password" placeholder="请输入密码" autocomplete="off" />
+          <el-input type="password" v-model="formContent.password" placeholder="请输入密码" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号码" prop='phone' :label-width="100">
-          <el-input v-model="data.phone" placeholder="请输入手机号码" autocomplete="off" />
+          <el-input v-model="formContent.phone" placeholder="请输入手机号码" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱地址" prop='email' :label-width="100">
-          <el-input v-model="data.email" placeholder="请输入邮箱地址" autocomplete="off" />
+          <el-input v-model="formContent.email" placeholder="请输入邮箱地址" autocomplete="off" />
        </el-form-item>
        <el-form-item label="最后一次登录时间" prop='loginTime' :label-width="100">
-          <el-input v-model="data.loginTime" placeholder="请输入最后一次登录时间" autocomplete="off" />
+          <el-input v-model="formContent.loginTime" placeholder="请输入最后一次登录时间" autocomplete="off" />
        </el-form-item>
        <el-form-item label="登录错误次数" prop='loginErrorTimes' :label-width="100">
-          <el-input v-model="data.loginErrorTimes" placeholder="请输入登录错误次数" autocomplete="off" />
+          <el-input v-model="formContent.loginErrorTimes" placeholder="请输入登录错误次数" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户密码错误锁定时间" prop='lockTime' :label-width="100">
-          <el-input v-model="data.lockTime" placeholder="请输入用户密码错误锁定时间" autocomplete="off" />
+          <el-input v-model="formContent.lockTime" placeholder="请输入用户密码错误锁定时间" autocomplete="off" />
        </el-form-item>
      </el-form>
      </div>
    <template #footer>
      <div class="dialog-footer">
-        <el-button @click="handleCancel">取消</el-button>
-        <el-button type="primary" @click="handleOK">
+        <el-button @click="close()">取消</el-button>
+        <el-button type="primary" @click="save()">
          保存
        </el-button>
      </div>
@@ -45,31 +45,56 @@
  </template>
  
  <script lang="ts" setup>
-  import { ref,computed  } from 'vue'
+  import { ref,computed, type Ref  } from 'vue'
  import {dialogSmall} from '@/utils/elementBind'
-  import { FormInstance,FormItemRule } from 'element-plus'
+  import { ElMessage, type FormInstance,type FormItemRule } from 'element-plus'
  import {
    addUser,
-    editUser,
+    updateUser
  } from '@/api/user/user'
+  // 使用 dayjs 库格式化
+  import dayjs from 'dayjs';
+  import { type User } from '@/api/user/interface';
+  // 定义弹出组件元信息
+  const dialogFormRef = ref()

-  const {dialogVisible,title,data,openType,getTableList}  = defineProps<{
-    dialogVisible:boolean;
-    title:string;
-    openType:string;
-    getTableList:Function;
-    data:{
-      id?: string;       //用户ID，作为唯一标识
-      name: string;     //用户名(别名)
-      loginName: string;//登录名
-      password: string; //密码
-      phone?: string;    //手机号
-      email?: string;    //邮箱
-      loginTime?: string;//最后一次登录时间
-      loginErrorTimes: number;//登录错误次数
-      lockTime?: string; //用户密码错误锁定时间
+  function useMetaInfo() {
+    const dialogVisible = ref(false)
+    const titleType = ref('add')
+    const formContent = ref<User.ResUser>({
+      id: '',       //用户ID，作为唯一标识
+      name: '',     //用户名(别名)
+      loginName: '',//登录名
+      password: '',//密码
+      phone: '',    //手机号
+      email: '',   //邮箱
+      loginTime: '',//最后一次登录时间
+      loginErrorTimes: 0,//登录错误次数
+      lockTime: '', //用户密码错误锁定时间
+    })
+    return { dialogVisible, titleType, formContent }
  }
-  }>();
+  
+  const { dialogVisible, titleType, formContent } = useMetaInfo()
+  // 清空formContent
+  const resetFormContent = () => {
+    formContent.value = {
+      id: '',       //用户ID，作为唯一标识
+      name: '',     //用户名(别名)
+      loginName: '',//登录名
+      password: '',//密码
+      phone: '',    //手机号
+      email: '',   //邮箱
+      loginTime: '',//最后一次登录时间
+      loginErrorTimes: 0,//登录错误次数
+      lockTime: '', //用户密码错误锁定时间
+    }
+  }
+  
+  let dialogTitle = computed(() => {
+    return titleType.value === 'add' ? '新增用户' : '编辑用户'
+  })
+

    //定义规则
    const formRuleRef = ref<FormInstance>()
@@ -80,63 +105,64 @@
    password: [{ required: true, message: '密码必填！', trigger: 'blur' }],
    loginErrorTimes: [{ required: true, message: '登录错误次数必填！', trigger: 'blur' }],
  })
-  // const value = computed({
-  //   get: () => data.status === 1,
-  //   set: (value: boolean) => data.status = value ? 1 : 0
-  // })
 
-  const emit = defineEmits<{
-  (e:'update:visible',value:boolean):void;
-  }>();
  
-  const handleCancel = () => {
-    emit('update:visible',false)
+ // 关闭弹窗
+ const close = () => {
+    dialogVisible.value = false
+    // 清空dialogForm中的值
+    resetFormContent()
+    // 重置表单
+    dialogFormRef.value?.resetFields()
  }
  
-  const handleOK = () => {
-
-    ElMessage.info('用户数据提交')
+  // 保存数据
+  const save = () => {
    try {
-      formRuleRef.value?.validate((valid: boolean) => {
+        dialogFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
-        // 将表单数据转为json,发送到后端
-        // let confirmFormData = JSON.parse(JSON.stringify(form.value))
-        // console.log(confirmFormData)
-        if(openType === "add")
-        {
-          addUser(data).then(res => {
-            if(res.code === "200")
-            {
-              ElMessage.success(res.message)
-              getTableList()
+          formContent.value.lockTime = dayjs(formContent.value.lockTime).format('YYYY-MM-DD');
+          if (formContent.value.id) {
+                const result = await updateUser(formContent.value);
+                if(result.code != 'A0000'){
+                  ElMessage.error({ message: result.message})
+                }else{
+                  ElMessage.success({ message: `${dialogTitle.value}成功！` })
                }
-            else
-              ElMessage.error(res.message)
-          })
-        }
-          
-        if(openType === "edit")
-        {
-          editUser(data).then(res => {
-            if(res.code === "200")
-            {
-              ElMessage.success(res.message)
-              getTableList()
-            }
-            else
-              ElMessage.error(res.message)
-          })
-        }
-        
-        emit('update:visible',false)
            } else {
-        ElMessage.error('表单验证失败！')
-        
+                const result = await addUser(formContent.value);
+               if(result.code != 'A0000'){
+                  ElMessage.error({ message: result.message})
+                }else{
+                  ElMessage.success({ message: `${dialogTitle.value}成功！` })
+                }
+          }
+          close()
+          // 刷新表格
+          await props.refreshTable!()
        }
-
      })
-    } catch (error) {
-    console.error('验证过程中发生错误', error)
+    } catch (err) {
+      console.error('验证过程中出现错误', err)
    }
-}
+  }
+  
+  // 打开弹窗，可能是新增，也可能是编辑
+  const open = (sign: string, data: User.ResUser) => {
+    titleType.value = sign
+    dialogVisible.value = true
+    if (data.id) {
+      formContent.value = { ...data }
+    } else {
+      resetFormContent()
+    }
+  }
+  
+  // 对外映射
+  defineExpose({ open })
+  const props = defineProps<{
+    refreshTable: (() => Promise<void>) | undefined;
+  }>()
+  
+
  </script>
--- a/frontend/src/views/authority/user/index.vue
+++ b/frontend/src/views/authority/user/index.vue
@@ -1,16 +1,14 @@
 <template>
-    <div class='table-box'>
+    <div class='table-box' ref='popupBaseView'>
      <ProTable
        ref='proTable'
        :columns='columns'
        :request-api="getTableList"
-        :data-callback="dataCallback"
      >
      <!-- :data='userData' -->
        <!-- 表格 header 按钮 -->
        <template #tableHeader='scope'>
-          <el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增用户')">新增</el-button>
-          <el-button type='primary' :icon='Download' plain >导出数据</el-button>
+          <el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
          <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
                     @click='batchDelete(scope.selectedListIds)'>
            批量删除
@@ -18,88 +16,48 @@
        </template>
        <!-- 表格操作 -->
        <template #operation='scope'>
-          <el-button type='primary' link :icon='View' @click="openDrawer('查看用户', scope.row)">查看</el-button>
-          <el-button type='primary' link :icon='EditPen' @click="openDrawer('编辑用户', scope.row)">编辑</el-button>
-          <el-button type='primary' link :icon='Delete' @click='deleteAccount(scope.row)'>删除</el-button>
+          <el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
+          <el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
          </template>

      </ProTable>
    </div>
-   <userPopup 
-   :dialogVisible = userPopupVisible 
-   :title = userPopupTitle 
-   :data = userPopupData 
-   :openType=openType
-   :getTableList="proTable?.getTableList || (() => {})"
-   @update:visible="userPopupVisible = $event"
-   />
+    <UserPopup :refresh-table='proTable?.getTableList' ref='userPopup' />
    </template>

  <script setup lang='tsx' name='useRole'>
-  import { User } from '@/api/user/interface'
+  import TimeControl from '@/components/TimeControl/index.vue'
+  import { type User } from '@/api/user/interface'
  import { useHandleData } from '@/hooks/useHandleData'
  import { useDownload } from '@/hooks/useDownload'
  import { useAuthButtons } from '@/hooks/useAuthButtons'
  import ProTable from '@/components/ProTable/index.vue'
-  import userPopup from './components/userPopup.vue'
+  import UserPopup from './components/userPopup.vue'
  import ImportExcel from '@/components/ImportExcel/index.vue'
-  import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
-
-  import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
-  import userDataList from '@/api/user/userData'
+  import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
+  import { CirclePlus, Delete, EditPen} from '@element-plus/icons-vue'
  import { useDictStore } from '@/stores/modules/dict'
-   import {
-    getUserList,
-    addUser,
-    BatchAddUser,
-    editUser,
-    deleteUser,
-  } from '@/api/user/user'
-
-  const {userPopupVisible,userPopupTitle,userPopupData} = useCount();
-  function useCount() {
-    const userPopupVisible = ref(false)
-    const userPopupTitle = ref()
-    const userPopupData = ref<User.UserBO>({} as User.UserBO)
-    return {userPopupVisible,userPopupTitle,userPopupData};
-  }
+  import {getUserList, deleteUser,} from '@/api/user/user'
+  import { reactive, ref } from 'vue'

  const dictStore = useDictStore()
-  let openType = ''
-  // const userData = userDataList
-
+  const userPopup = ref()
  // ProTable 实例
  const proTable = ref<ProTableInstance>()

-  // 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
-  // const initParam = reactive({ type: 1 })
-
-  // dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
-  // 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
-  const dataCallback = (data: any) => {
-    return {
-      list: data.list,
-      total: data.total,
-      pageNum: data.pageNum,
-      pageSize: data.pageSize,
-    }
-  }
-
  // 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
  // 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
  const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params))
-    newParams.createTime && (newParams.startTime = newParams.createTime[0])
-    newParams.createTime && (newParams.endTime = newParams.createTime[1])
-    delete newParams.createTime
+  newParams.searchEndTime = endDate.value
+  newParams.searchBeginTime = startDate.value
  return getUserList(newParams)
-  }
+}
+

-  // 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
-  const { BUTTONS } = useAuthButtons()

  // 表格配置项
-  const columns = reactive<ColumnProps<User.UserBO>[]>([
+  const columns = reactive<ColumnProps<User.ResUser>[]>([
    { type: 'selection', fixed: 'left', width: 70 },
    { type: 'index', fixed: 'left', width: 70, label: '序号' },
    {
@@ -111,7 +69,6 @@
    {
      prop: 'loginName',
      label: '登录名',
-      search: { el: 'input' },
      minWidth: 180,
    },
    {
@@ -133,6 +90,19 @@
      prop: 'loginTime',
      label: '最后一次登录时间',
      minWidth: 180,
+      search: {
+      render: () => {
+        return (
+            <div class='flx-flex-start'>
+              <TimeControl
+                  include={['日', '周', '月', '自定义']}
+                  default={'月'}
+                  onUpdate-dates={handleDateChange}
+              />
+            </div>
+        )
+      },
+    },
    },
    {
      prop: 'loginErrorTimes',
@@ -147,8 +117,23 @@
    { prop: 'operation', label: '操作', fixed: 'right', width: 330 },
  ])

+
+  // 处理日期变化的回调函数
+const startDate = ref('')
+const endDate = ref('')
+const handleDateChange = (startDateTemp: string, endDateTemp: string) => {
+  startDate.value = startDateTemp
+  endDate.value = endDateTemp
+}
+
+// 打开 drawer(新增、编辑)
+const openDialog = (titleType: string, row: Partial<User.ResUser> = {}) => {
+ userPopup.value?.open(titleType, row)
+
+}
+
  // 删除用户信息
-  const deleteAccount = async (params: User.UserBO) => {
+  const handleDelete = async (params: User.ResUser) => {
    await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.name}】用户`)
    proTable.value?.getTableList()
  }
@@ -161,57 +146,8 @@
  }


-  // 导出角色列表
-  // const downloadFile = async () => {
-  //   ElMessageBox.confirm('确认导出角色数据?', '温馨提示', { type: 'warning' }).then(() =>
-  //     useDownload(exportUserInfo, '角色列表', proTable.value?.searchParam),
-  //   )
-  // }

-  // 批量添加角色
-  const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
-  const batchAdd = () => {
-    // const params = {
-    //   title: '角色',
-    //   tempApi: exportUserInfo,
-    //   importApi: BatchAddUser,
-    //   getTableList: proTable.value?.getTableList,
-    // }
-    // dialogRef.value?.acceptParams(params)
-  }

-  // 打开 drawer(新增、查看、编辑)
-  const openDrawer = (title: string, row: Partial<User.UserBO> = {}) => {
-    if(title === "查看用户" ||title === "新增用户" || title === '编辑用户' )
-    {
-      if (title === '查看用户')
-        openType = 'view'
-      else if (title === '新增用户')
-        openType = 'add'
-      else if (title === '编辑用户')
-        openType = 'edit'

-        userPopupVisible.value = true
-        userPopupTitle.value = title
-    
-      if (row) {
-      // 确保 row 的所有属性都符合 User.ResUserList 的要求
-      const safeRow: User.UserBO = {
-        id: row.id || '',
-        name: row.name || '',
-        loginName: row.loginName || '',
-        password: row.password || '',
-        phone: row.phone || '',
-        email: row.email || '',
-        loginTime: row.loginTime || '',
-        loginErrorTimes: row.loginErrorTimes || 0,
-        lockTime: row.lockTime || '',
-      };
-
-      userPopupData.value = safeRow;
-    }
-    }
-    
-  }
  </script>
  
--- a/frontend/src/views/machine/device/components/devicePopup.vue
+++ b/frontend/src/views/machine/device/components/devicePopup.vue
@@ -137,7 +137,6 @@
            </el-form>            
        </div>        
    
-
        <template #footer>
            <div >
                <el-button @click='close()'>取 消</el-button>
--- a/frontend/src/views/machine/device/index.vue
+++ b/frontend/src/views/machine/device/index.vue
@@ -33,13 +33,11 @@ import TimeControl from '@/components/TimeControl/index.vue'
 import { type Device } from '@/api/device/interface'
 import { useHandleData } from '@/hooks/useHandleData'
 import { useDownload } from '@/hooks/useDownload'
-import { useAuthButtons } from '@/hooks/useAuthButtons'
 import ProTable from '@/components/ProTable/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
 import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
 import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
-import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
-import deviceDataList from '@/api/device/deviceData'
+import { CirclePlus, Delete, EditPen, Download, Upload } from '@element-plus/icons-vue'
 import { useDictStore } from '@/stores/modules/dict'
 import {getPqDevList, deletePqDev, exportPqDev, importPqDev} from '@/api/device/device.ts'
 import { reactive, ref } from 'vue'
@@ -127,8 +125,8 @@ const endDate = ref('')
 const handleDateChange = (startDateTemp: string, endDateTemp: string) => {
  startDate.value = startDateTemp
  endDate.value = endDateTemp
-  console.log(startDateTemp)
-  console.log(endDateTemp)
+  //console.log(startDateTemp)
+  //console.log(endDateTemp)
 }
 // 打开 drawer(新增、编辑)
 const openDialog = (titleType: string, row: Partial<Device.ResPqDev> = {}) => {