Merge branch 'develop' of www/km-web into master

.env.production

@@ -30,4 +30,7 @@ VITE_APP_RSA_PRIVATE_KEY = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAmc3C
 VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
 
 # 线上环境接口地址
-VITE_API_URL = "http://localhost:8080"
+VITE_API_URL = /api-pro
+
+# 开发环境跨域代理，支持配置多个
+VITE_PROXY = [["/api-pro","http://localhost:8080"]]

.prettierrc.cjs

@@ -2,7 +2,7 @@
 
 module.exports = {
   // 指定最大换行长度
-  printWidth: 130,
+  printWidth: 150,
   // 缩进制表符宽度 | 空格数
   tabWidth: 2,
   // 使用制表符而不是空格缩进行 (true：制表符，false：空格)

src/api/index.ts

@@ -110,10 +110,7 @@ class RequestHttp {
           // 生成一个 AES 密钥
           const aesKey = generateAesKey()
           config.headers[encryptHeader] = encrypt(encryptBase64(aesKey))
-          config.data =
-            typeof config.data === 'object'
-              ? encryptWithAes(JSON.stringify(config.data), aesKey)
-              : encryptWithAes(config.data, aesKey)
+          config.data = typeof config.data === 'object' ? encryptWithAes(JSON.stringify(config.data), aesKey) : encryptWithAes(config.data, aesKey)
         }
         return config
       },

src/api/modules/monitor/logininfor.ts

@@ -41,7 +41,7 @@ export const updateLogininforApi = (data: any) => {
  * @param infoId infoId
  * @returns returns
  */
-export const delLogininforApi = ({ infoId }: { infoId: any }) => {
+export const delLogininforApi = (infoId: any) => {
   return http.delete<any>(`/monitor/logininfor/${infoId}`)
 }
 

src/api/modules/monitor/operlog.ts

@@ -41,7 +41,7 @@ export const updateOperlogApi = (data: any) => {
  * @param operId operId
  * @returns returns
  */
-export const delOperlogApi = ({ operId }: { operId: any }) => {
+export const delOperlogApi = (operId: any) => {
   return http.delete<any>(`/monitor/operlog/${operId}`)
 }
 

src/api/modules/system/dict.ts

@@ -41,7 +41,7 @@ export const updateDictApi = (data: any) => {
  * @param dictId dictId
  * @returns returns
  */
-export const delDictApi = ({ id }: { id: any }) => {
+export const delDictApi = (id: any) => {
   return http.delete<any>(`/system/dict/type/${id}`)
 }
 

src/api/modules/system/dictData.ts

@@ -50,7 +50,7 @@ export const updateDataApi = (data: any) => {
  * @param dictCode dictCode
  * @returns returns
  */
-export const delDataApi = ({ id }: { id: any }) => {
+export const delDataApi = (id: any) => {
   return http.delete<any>(`/system/dict/data/${id}`)
 }
 

src/api/modules/system/menu.ts

@@ -78,7 +78,7 @@ export const exportApi = (data: any) => {
  * @name 查询菜单下拉树结构
  * @returns returns
  */
-export const treeselectApi = () => {
+export const treeSelectApi = () => {
   return http.get<any>(`/system/menu/treeselect`)
 }
 

src/api/modules/system/post.ts

@@ -41,7 +41,7 @@ export const updatePostApi = (data: any) => {
  * @param postId postId
  * @returns returns
  */
-export const delPostApi = ({ postId }: { postId: any }) => {
+export const delPostApi = (postId: any) => {
   return http.delete<any>(`/system/post/${postId}`)
 }
 

src/api/modules/system/role.ts

@@ -9,6 +9,24 @@ export const listRoleApi = (query: any) => {
   return http.get<any>('/system/role/list', query, { loading: true })
 }
 
+/**
+ * @name 根据角色ID查询部门树结构
+ * @param roleId 角色Id
+ * @returns 返回列表
+ */
+export const deptTreeSelectApi = (roleId: any) => {
+  return http.get<any>(`/system/role/deptTree/${roleId}`)
+}
+
+/**
+ * @name 根据角色ID查询菜单下拉树结构
+ * @param roleId 角色Id
+ * @returns 返回列表
+ */
+export const roleMenuTreeSelectApi = (roleId: any) => {
+  return http.get<any>(`/system/menu/roleMenuTreeselect/${roleId}`)
+}
+
 /**
  * @name 查询角色信息详细
  * @param roleId roleId
@@ -36,12 +54,30 @@ export const updateRoleApi = (data: any) => {
   return http.put<any>('/system/role', data, { loading: false })
 }
 
+/**
+ * @name 角色数据权限
+ * @param data data
+ * @returns returns
+ */
+export const dataScopeApi = (data: any) => {
+  return http.put<any>('/system/role/dataScope', data, { loading: false })
+}
+
+/**
+ * @name 修改角色状态
+ * @param data data
+ * @returns returns
+ */
+export const changeStatusApi = (data: any) => {
+  return http.put<any>('/system/role/changeStatus', data, { loading: false })
+}
+
 /**
  * @name 删除角色信息
  * @param roleId roleId
  * @returns returns
  */
-export const delRoleApi = ({ roleId }: { roleId: any }) => {
+export const delRoleApi = (roleId: any) => {
   return http.delete<any>(`/system/role/${roleId}`)
 }
 
@@ -68,3 +104,48 @@ export const importDataApi = (data: any) => {
 export const exportApi = (data: any) => {
   return http.downloadPost('/system/role/export', data)
 }
+
+/**
+ * @name 查询角色已授权用户列表
+ * @param query 参数
+ * @returns 返回列表
+ */
+export const allocatedUserListApi = (query: any) => {
+  return http.get<any>(`/system/role/authUser/allocatedList`, query, { loading: true })
+}
+
+/**
+ * @name 查询角色未授权用户列表
+ * @param query 参数
+ * @returns 返回列表
+ */
+export const unallocatedUserListApi = (query: any) => {
+  return http.get<any>(`/system/role/authUser/unallocatedList`, query, { loading: true })
+}
+
+/**
+ * @name 取消用户授权角色
+ * @param data data
+ * @returns returns
+ */
+export const authUserCancelApi = (data: any) => {
+  return http.put<any>('/system/role/authUser/cancel', data, { loading: false })
+}
+
+/**
+ * @name 批量取消用户授权角色
+ * @param data data
+ * @returns returns
+ */
+export const authUserCancelAllApi = (data: any) => {
+  return http.put<any>('/system/role/authUser/cancelAll', data, { loading: false })
+}
+
+/**
+ * @name 授权用户选择
+ * @param data data
+ * @returns returns
+ */
+export const authUserSelectAllApi = (data: any) => {
+  return http.put<any>('/system/role/authUser/selectAll', data, { loading: false })
+}

src/api/modules/system/user.ts

@@ -61,6 +61,15 @@ export const changeUserStatus = (data: any) => {
   return http.put<any>('/system/user/changeStatus', data, { loading: false })
 }
 
+/**
+ * @name 用户密码重置
+ * @param data data
+ * @returns returns
+ */
+export const resetUserPwdApi = (data: any) => {
+  return http.put<any>('/system/user/resetPwd', data, { loading: false })
+}
+
 /**
  * @name 下载模板
  * @returns returns

src/components/CustomDialog/index.vue

@@ -8,11 +8,12 @@
     :top="parameter.top"
     draggable
   >
-    <slot name="default" :model="parameter.model"></slot>
+    <slot name="default" :parameter="parameter"></slot>
     <template #footer>
       <span class="dialog-footer">
-        <el-button type="primary" v-if="parameter.isEdit" :loading="butLoading" @click="handleSubmit">确认</el-button>
-        <el-button @click="handleCancel">取消</el-button>
+        <slot name="footer" :parameter="parameter"></slot>
+        <!-- <el-button type="primary" v-if="parameter.isEdit" :loading="butLoading" @click="handleSubmit">确认</el-button>
+        <el-button @click="handleCancel">取消</el-button> -->
       </span>
     </template>
   </el-dialog>
@@ -20,7 +21,6 @@
 
 <script setup lang="ts" name="FormDialog">
 import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
 
 export interface FormParameterProps {
   title: string // 标题
@@ -43,18 +43,18 @@ const parameter = ref<FormParameterProps>({
   api: undefined
 })
 // 提交
-const handleSubmit = () => {
-  butLoading.value = true
-  parameter.value.api!(parameter.value.model).then(res => {
-    if (res.code == 200) {
-      ElMessage.success('操作成功')
-      dialogVisible.value = false
-    } else {
-      console.log('message', res.message)
-    }
-  })
-  butLoading.value = false
-}
+// const handleSubmit = () => {
+//   butLoading.value = true
+//   parameter.value.api!(parameter.value.model).then(res => {
+//     if (res.code == 200) {
+//       ElMessage.success('操作成功')
+//       dialogVisible.value = false
+//     } else {
+//       console.log('message', res.message)
+//     }
+//   })
+//   butLoading.value = false
+// }
 
 // 取消按钮，重置表单，关闭弹框
 const handleCancel = () => {
@@ -70,6 +70,7 @@ const openDialog = (params: FormParameterProps) => {
 }
 
 defineExpose({
-  openDialog
+  openDialog,
+  handleCancel
 })
 </script>

src/components/DialogOld/form.vue

@@ -1,96 +0,0 @@
-<template>
-  <el-dialog
-    v-model="dialogVisible"
-    :close-on-click-modal="false"
-    :title="parameter.title"
-    :destroy-on-close="true"
-    :width="parameter.width"
-    :top="parameter.top"
-    draggable
-  >
-    <ProFrom ref="proFormRef" :field-list="parameter.fieldList" :options="_options" :model="parameter.model" />
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button type="primary" v-if="parameter.isEdit" :loading="butLoading" @click="handleSubmit">确认</el-button>
-        <el-button @click="handleCancel">取消</el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup lang="ts" name="FormDialog">
-import { ref } from 'vue'
-import ProFrom from '@/components/ProFormOld/index.vue'
-import { ElMessage } from 'element-plus'
-
-export interface FormParameterProps {
-  title: string // 标题
-  width?: number // 弹框宽度
-  labelWidth?: number // label宽度
-  api?: (params: any) => Promise<any> // 表单提交api
-  fieldList: Form.FieldItem[] // 动态表单字段
-  isEdit?: boolean // 是否编辑
-  top?: string // 离顶部距离
-  model?: Record<string, any> // 表单数据对象
-  getTableList?: () => void // 获取表格数据的Api
-}
-// dialog状态
-const dialogVisible = ref(false)
-const butLoading = ref(false)
-// 父组件传过来的参数
-const parameter = ref<FormParameterProps>({
-  title: '',
-  width: 500,
-  top: '8vh',
-  fieldList: [],
-  isEdit: true
-})
-const _options: Form.Options = {
-  labelWidth: 100,
-  hasFooter: false,
-  disabled: false
-}
-const proFormRef = ref<InstanceType<typeof ProFrom> | null>(null)
-// 表单提交校验
-const handleSubmit = () => {
-  const formEl = proFormRef.value?.formRef
-  butLoading.value = true
-  if (!formEl) return
-  formEl.validate(valid => {
-    if (valid) {
-      parameter.value.api!(parameter.value.model).then(res => {
-        if (res.code == 200) {
-          proFormRef.value?.resetForm(formEl)
-          ElMessage.success('操作成功')
-          dialogVisible.value = false
-          parameter.value.getTableList && parameter.value.getTableList()
-        } else {
-          console.log('message', res.message)
-        }
-      })
-      butLoading.value = false
-    }
-  })
-}
-
-// 取消按钮，重置表单，关闭弹框
-const handleCancel = () => {
-  const formEl = proFormRef.value?.formRef
-  if (!formEl) return
-  proFormRef.value?.resetForm(formEl)
-  butLoading.value = false
-  dialogVisible.value = false
-}
-
-// 接收父组件参数
-const openDialog = (params: FormParameterProps) => {
-  parameter.value = { ...parameter.value, ...params }
-  _options.disabled = !parameter.value.isEdit
-  butLoading.value = false
-  dialogVisible.value = true
-}
-
-defineExpose({
-  openDialog
-})
-</script>

src/components/DictTag/index.vue

@@ -2,12 +2,7 @@
   <div>
     <template v-for="(item, index) in options">
       <template v-if="values.includes(item.value)">
-        <span
-          v-if="item.elTagType == 'default' || item.elTagType == ''"
-          :key="item.value"
-          :index="index"
-          :class="item.elTagClass"
-        >
+        <span v-if="item.elTagType == 'default' || item.elTagType == ''" :key="item.value" :index="index" :class="item.elTagClass">
           {{ item.label }}
         </span>
         <el-tag

src/components/ECharts/config/index.ts

@@ -23,12 +23,7 @@ import type {
   RadarSeriesOption,
   GaugeSeriesOption
 } from 'echarts/charts'
-import type {
-  TitleComponentOption,
-  TooltipComponentOption,
-  GridComponentOption,
-  DatasetComponentOption
-} from 'echarts/components'
+import type { TitleComponentOption, TooltipComponentOption, GridComponentOption, DatasetComponentOption } from 'echarts/components'
 import type { ComposeOption } from 'echarts/core'
 import 'echarts-liquidfill'
 

src/components/ECharts/index.vue

@@ -26,9 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const echartsStyle = computed(() => {
-  return props.width || props.height
-    ? { height: props.height + 'px', width: props.width + 'px' }
-    : { height: '100%', width: '100%' }
+  return props.width || props.height ? { height: props.height + 'px', width: props.width + 'px' } : { height: '100%', width: '100%' }
 })
 
 const chartRef = ref<HTMLDivElement | HTMLCanvasElement>()

src/components/Grid/components/GridItem.vue

@@ -58,9 +58,7 @@ const style = computed(() => {
     }
   } else {
     return {
-      gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${
-        span + offset > cols.value ? cols.value : span + offset
-      }`,
+      gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${span + offset > cols.value ? cols.value : span + offset}`,
       marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : 'unset'
     }
   }

src/components/Highlight/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <pre
-    :class="'hx-scroll ' + lineNumbers"
-  ><code :class="'language-'+ type" v-html="Prism.highlight(code, Prism.languages[type], type)"></code></pre>
+  <pre :class="'hx-scroll ' + lineNumbers"><code :class="'language-'+ type" v-html="Prism.highlight(code, Prism.languages[type], type)"></code></pre>
 </template>
 <script setup lang="ts">
 import { onMounted, computed } from 'vue'

src/components/HighlightDialog/index.vue

@@ -7,8 +7,7 @@
     :width="parameter.width"
     draggable
   >
-    <preview-code v-if="flag" :code="parameter.code" :type="parameter.type" :is-show-line-numbers="parameter.isShowLineNumbers">
-    </preview-code>
+    <preview-code v-if="flag" :code="parameter.code" :type="parameter.type" :is-show-line-numbers="parameter.isShowLineNumbers"> </preview-code>
     <template #footer>
       <span class="dialog-footer">
         <el-button type="primary" v-if="parameter.isEdit" :loading="butLoading">导出</el-button>

src/components/ImportExcel/index.vue

@@ -1,9 +1,6 @@
 <template>
-  <el-dialog v-model="dialogVisible" :title="`导入${parameter.title}`" :destroy-on-close="true" width="580px" draggable>
+  <el-dialog v-model="dialogVisible" :width="parameter.width" :top="parameter.top" :title="`${parameter.title}`" :destroy-on-close="true" draggable>
     <el-form class="drawer-multiColumn-form" label-width="100px">
-      <el-form-item label="模板下载">
-        <el-button type="primary" :icon="Download" @click="downloadTemp"> 点击下载 </el-button>
-      </el-form-item>
       <el-form-item label="文件上传">
         <el-upload
           ref="uploadRef"
@@ -29,14 +26,19 @@
           </slot>
           <template #tip>
             <slot name="tip">
-              <div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ parameter.fileSize }}M</div>
+              <div class="el-upload__tip text-center">
+                <el-checkbox v-model="isCover">是否更新已存在的数据</el-checkbox>
+              </div>
+              <div class="el-upload__tip text-center">
+                请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ parameter.fileSize }}M。
+                <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="downloadTemp">
+                  模板下载
+                </el-link>
+              </div>
             </slot>
           </template>
         </el-upload>
       </el-form-item>
-      <el-form-item label="数据覆盖">
-        <el-switch v-model="isCover" />
-      </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
@@ -50,13 +52,14 @@
 <script setup lang="ts" name="ImportExcel">
 import { ref } from 'vue'
 import { useDownload } from '@/hooks/useDownload'
-import { Download } from '@element-plus/icons-vue'
 import { ElNotification, UploadRequestOptions, UploadRawFile, UploadInstance } from 'element-plus'
 
 export interface ExcelParameterProps {
   title: string // 标题
   fileSize?: number // 上传文件的大小
   limit?: number // 上传文件个数
+  top?: string // 离顶部距离
+  width?: number // 弹框宽度
   multiple?: boolean // 是否支持多选文件
   fileType?: File.ExcelMimeType[] // 上传文件的类型
   tempApi?: (params: any) => Promise<any> // 下载模板的Api
@@ -72,6 +75,8 @@ const dialogVisible = ref(false)
 const parameter = ref<ExcelParameterProps>({
   title: '',
   limit: 1,
+  width: 500,
+  top: '20vh',
   multiple: false,
   fileSize: 5,
   fileType: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']

src/components/ProForm/components/Item.vue

@@ -19,22 +19,12 @@
       ></component>
     </template>
     <template v-if="item.compOptions.elTagName === 'radio-group'">
-      <component
-        :is="`el-radio`"
-        v-for="(col, index) in itemEnum"
-        :key="index"
-        :label="col[item.compOptions.valueKey || 'value']"
-      >
+      <component :is="`el-radio`" v-for="(col, index) in itemEnum" :key="index" :value="col[item.compOptions.valueKey || 'value']">
         {{ col[item.compOptions.labelKey || 'label'] }}
       </component>
     </template>
     <template v-if="item.compOptions.elTagName === 'radio-button'">
-      <component
-        :is="`el-radio-button`"
-        v-for="(col, index) in itemEnum"
-        :key="index"
-        :label="col[item.compOptions.valueKey || 'value']"
-      >
+      <component :is="`el-radio-button`" v-for="(col, index) in itemEnum" :key="index" :label="col[item.compOptions.valueKey || 'value']">
         {{ col[item.compOptions.labelKey || 'label'] }}
       </component>
     </template>
@@ -43,7 +33,7 @@
         :is="`el-checkbox`"
         v-for="col in itemEnum"
         :key="col[item.compOptions.valueKey || 'value']"
-        :label="col[item.compOptions.valueKey || 'value']"
+        :value="col[item.compOptions.valueKey || 'value']"
       >
         {{ col[item.compOptions.labelKey || 'label'] }}
       </component>
@@ -63,7 +53,7 @@ const _formModel = computed(() => props.formModel)
 const elTagNameValue = computed(() => {
   const val = props.item.compOptions.elTagName
   if ('radio-button' == val) return `el-radio-group`
-  return `el-${val}` || 'input'
+  return `el-${val || 'input'}`
 })
 // 接收 enumMap (el 为 select-v2 需单独处理 enumData)
 const enumMap = inject('enumMap', ref(new Map()))

src/components/ProForm/index.vue

@@ -14,14 +14,19 @@
                   <i :class="'iconfont icon-yiwen'"></i>
                 </el-tooltip>
               </el-space>
-              <span>{{ `${_formOptions.labelSuffix}` }}</span>
-            </template>
-            <template v-if="item.compOptions.elTagName === 'slot'">
-              <slot :name="item.prop" :form-model="formModel"></slot>
+              <span v-if="item.hideLabelSuffix">{{ `${item.hideLabelSuffix ? '' : ':'}` }}</span>
+              <span v-else>{{ `${_formOptions.labelSuffix}` }}</span>
             </template>
+            <!-- <template v-if="item.compOptions.elTagName === 'slot'"> -->
+            <slot :name="item.prop" :form-model="formModel"></slot>
+            <slot name="default" :form-model="formModel"></slot>
+            <!-- </template> -->
             <template v-if="item.compOptions.elTagName === 'icon'">
               <SelectIcon v-model:icon-value="formModel[item.prop]" />
             </template>
+            <template v-else-if="item.compOptions.elTagName === 'file-upload'">
+              <FileUpload v-model:model-value="formModel[item.prop]" />
+            </template>
             <Item v-else :item="item" :form-model="formModel" />
           </component>
         </el-col>
@@ -46,6 +51,7 @@ import { ref, computed, ComputedRef, watch, unref, provide } from 'vue'
 import type { FormInstance } from 'element-plus'
 import Item from '@/components/ProForm/components/Item.vue'
 import SelectIcon from '@/components/SelectIcon/index.vue'
+import FileUpload from '@/components/Upload/File.vue'
 // import { handleProp } from '@/utils'
 // 表单整体配置项
 export interface ProFormProps {
@@ -80,7 +86,7 @@ const _formOptions: ComputedRef<ProForm.FormOptions> = computed(() => {
     labelWidth: 120,
     disabled: false,
     hasFooter: true,
-    labelSuffix: ': ',
+    labelSuffix: ':',
     submitButtonText: '提交',
     resetButtonText: '重置',
     cancelButtonText: '取消'
@@ -128,8 +134,8 @@ watch(
   () => {
     props.itemsOptions.map((item: ProForm.ItemsOptions) => {
       // 如果类型为checkbox，默认值需要设置一个空数组
-      const value = ['checkbox', 'transfer'].includes(item.compOptions.elTagName!) ? [] : ''
-      props.model ? (formModel.value = props.model) : (formModel.value[item.prop] = item.value || value)
+      let value = ['checkbox', 'transfer'].includes(item.compOptions.elTagName!) ? [] : props.model[item.prop]
+      props.model[item.prop] ? (formModel.value = props.model) : (formModel.value[item.prop] = item.compOptions.value || value)
     })
   },
   { immediate: true }
@@ -162,6 +168,7 @@ const resetForm = (formEl: FormInstance | undefined) => {
 // 暴露方法给父组件使用
 defineExpose({
   proFormRef,
+  formModel,
   resetForm,
   onSubmit
 })

src/components/ProFormOld/index.vue

@@ -1,227 +0,0 @@
-<template>
-  <el-form @submit.prevent :model="formModel" v-bind="_options" ref="formRef">
-    <el-row :gutter="5">
-      <template v-for="(item, index) in fieldList" :key="index">
-        <el-col :span="item.span || 24">
-          <el-form-item :rules="item.rules" :title="item.label" :prop="[item.field]">
-            <template #label>
-              <el-space :size="1">
-                <span>{{ `${item.label}` }}</span>
-                <el-tooltip v-if="item?.tooltip" effect="dark" :content="item.tooltip" placement="top">
-                  <i :class="'iconfont icon-yiwen'"></i>
-                </el-tooltip>
-              </el-space>
-            </template>
-            <template #default>
-              <!-- 单选框 -->
-              <el-radio-group v-if="item.type === 'radio'" v-model="formModel[item.field]" :disabled="item.disabled">
-                <el-radio
-                  :label="val[item.options?.valueKey || 'value']"
-                  v-for="val in item.options?.data"
-                  :key="val[item.options?.valueKey || 'value']"
-                >
-                  {{ val[item.options?.labelKey || 'label'] }}
-                </el-radio>
-              </el-radio-group>
-              <!-- 复选框 -->
-              <el-checkbox-group v-else-if="item.type === 'checkbox'" v-model="formModel[item.field]" :disabled="item.disabled">
-                <el-checkbox
-                  v-for="val in item.options?.data"
-                  :key="val[item.options?.valueKey || 'value']"
-                  :label="val[item.options?.valueKey || 'value']"
-                  >{{ val[item.options?.labelKey || 'label'] }}
-                </el-checkbox>
-              </el-checkbox-group>
-              <!-- 下拉框 -->
-              <el-select
-                v-else-if="item.type === 'select'"
-                v-model="formModel[item.field]"
-                :placeholder="item.options?.placeholder || '请选择'"
-                :clearable="item.clearable"
-                :multiple="item.options?.multiple"
-                :filterable="item.options?.filterable"
-                :allow-create="item.options?.allowCreate"
-                :disabled="item.disabled"
-              >
-                <el-option
-                  v-for="val in item.options?.data"
-                  :key="val[item.options?.valueKey || 'value']"
-                  :label="val[item.options?.labelKey || 'label']"
-                  :value="val[item.options?.valueKey || 'value']"
-                />
-              </el-select>
-              <el-tree-select
-                v-else-if="item.type === 'select-tree'"
-                v-model="formModel[item.field]"
-                :data="item.options?.data"
-                :props="{
-                  label: `${item.options?.labelKey || 'label'}`,
-                  children: `${item.options?.children || 'children'}`
-                }"
-                :node-key="`${item.options?.valueKey || 'id'}`"
-                placeholder="请选择归属部门"
-                clearable
-                check-strictly
-              />
-              <!-- 时间 -->
-              <el-date-picker
-                v-else-if="item.type === 'date-picker'"
-                v-model="formModel[item.field]"
-                :readonly="item.readonly"
-                :type="item.options?.type ?? 'data'"
-                :placeholder="item.placeholder || item.label"
-                :disabled="item.disabled"
-                :value-format="item.options?.valueFormat ?? 'YYYY-MM-DD HH:mm:ss'"
-                :clearable="item.clearable"
-              />
-              <el-input-number
-                v-else-if="item.type === 'input-number'"
-                v-model="formModel[item.field]"
-                :min="item.options?.min"
-                :max="item.options?.max"
-                controls-position="right"
-              />
-              <SelectIcon v-else-if="item.type === 'select-icon'" v-model:icon-value="formModel[item.field]" />
-              <!-- 默认输入框 -->
-              <el-input
-                v-else
-                v-model="formModel[item.field]"
-                :readonly="item.readonly"
-                :type="item.type ?? 'text'"
-                :placeholder="item.placeholder || item.label"
-                :disabled="item.disabled"
-                :show-password="item.showPassword"
-                :clearable="item.clearable"
-                @keyup.enter="handleKeyUp(item.enterable)"
-              />
-            </template>
-          </el-form-item>
-        </el-col>
-      </template>
-    </el-row>
-    <el-form-item v-if="_options.hasFooter">
-      <slot name="buttons" :model="formModel" :form-ref="formRef">
-        <el-button type="primary" @click="onSubmit(formRef)">{{ _options.submitButtonText }}</el-button>
-        <el-button v-if="_options.showResetButton" type="info" @click="resetForm(formRef)">
-          {{ _options.resetButtonText }}
-        </el-button>
-        <el-button v-if="_options.showCancelButton" @click="emit('cancel')">
-          {{ _options.cancelButtonText }}
-        </el-button>
-      </slot>
-    </el-form-item>
-  </el-form>
-</template>
-<script setup lang="ts" name="ProFormOld">
-import type { FormInstance } from 'element-plus'
-import { ComputedRef, ref, computed, watch, unref } from 'vue'
-import SelectIcon from '@/components/SelectIcon/index.vue'
-// 父组件传递的值
-export interface ProFormProps {
-  fieldList: Form.FieldItem[]
-  model?: Record<Form.FieldItem['field'], Form.FieldItem['value']>
-  options?: Form.Options
-}
-
-// 表单的数据
-const formModel = ref<Record<string, any>>({})
-const formRef = ref<FormInstance>()
-const props = defineProps<ProFormProps>()
-
-// 设置option默认值，如果传入自定义的配置则合并option配置项
-const _options: ComputedRef<Form.Options> = computed(() => {
-  const option = {
-    labelPosition: 'right',
-    disabled: false,
-    hasFooter: true,
-    submitButtonText: '提交',
-    resetButtonText: '重置',
-    cancelButtonText: '取消'
-  }
-  return Object.assign(option, props?.options)
-})
-interface EmitEvent {
-  (e: 'submit', params: any): void
-  (e: 'reset'): void
-  (e: 'cancel'): void
-}
-const enumMap = ref(new Map<string, { [key: string]: any }[]>())
-const setEnumMap = async ({ field, enum: enumValue }: Form.FieldItem) => {
-  if (!enumValue) return
-
-  // 如果当前 enumMap 存在相同的值 return
-  if (enumMap.value.has(field!) && (typeof enumValue === 'function' || enumMap.value.get(field!) === enumValue)) return
-
-  // 当前 enum 为静态数据，则直接存储到 enumMap
-  if (typeof enumValue !== 'function') return enumMap.value.set(field!, unref(enumValue!))
-
-  // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
-  enumMap.value.set(field!, [])
-
-  // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
-  let { data } = await enumValue()
-  enumMap.value.set(field!, data)
-}
-
-// 处理枚举
-const handelEnum = (item: Form.FieldItem) => {
-  let enumData = enumMap.value.get(item.field)
-  if (!enumData) return []
-  // 返回对象类型
-  if (item.type === 'select-tree' && item.options?.labelKey && item.options?.valueKey) {
-    enumData = enumData.map((el: { [key: string]: any }) => {
-      return {
-        ...el,
-        label: el[item.options?.labelKey || 'label'],
-        children: el[item.options?.children || 'children'] || []
-      }
-    })
-  }
-  return enumData
-}
-// 处理表单项需要的参数
-props.fieldList.forEach(async item => {
-  await setEnumMap(item)
-  if (item.options) item.options.data = handelEnum(item)
-})
-const emit = defineEmits<EmitEvent>()
-// 根据fieldList初始化model， 如果formModel有传值就用传递的model数据模型，否则就给上面声明的formModel设置相应的(key,value) [item.field]， item.value是表单的默认值（选填）
-watch(
-  () => props.model,
-  () => {
-    props.fieldList.map((item: Form.FieldItem) => {
-      // 如果类型为checkbox，默认值需要设置一个空数组
-      const value = item.type === 'checkbox' ? [] : ''
-      props.model ? (formModel.value = props.model) : (formModel.value[item.field] = item.value || value)
-    })
-  },
-  { immediate: true }
-)
-
-// 提交按钮
-const onSubmit = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.validate(valid => {
-    if (valid) {
-      emit('submit', formModel.value)
-    } else {
-      return false
-    }
-  })
-}
-// 输入框回车事件
-const handleKeyUp = (enterable: boolean | undefined) => {
-  if (!enterable) return
-  onSubmit(formRef.value)
-}
-// 重置
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
-}
-defineExpose({
-  formRef,
-  resetForm,
-  onSubmit
-})
-</script>

src/components/ProTable/components/TableColumn.vue

@@ -29,11 +29,7 @@ const RenderTableColumn = (item: ColumnProps) => {
   return (
     <>
       {item.isShow && (
-        <el-table-column
-          {...item}
-          align={item.align ?? 'center'}
-          showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== 'operation'}
-        >
+        <el-table-column {...item} align={item.align ?? 'center'} showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== 'operation'}>
           {{
             default: (scope: RenderScope<any>) => {
               if (item._children) return item._children.map(child => RenderTableColumn(child))

src/components/ProTable/index.vue

@@ -1,13 +1,6 @@
 <template>
   <!-- 查询表单 -->
-  <SearchForm
-    v-show="isShowSearch"
-    :search="_search"
-    :reset="_reset"
-    :columns="searchColumns"
-    :search-param="searchParam"
-    :search-col="searchCol"
-  />
+  <SearchForm v-show="isShowSearch" :search="_search" :reset="_reset" :columns="searchColumns" :search-param="searchParam" :search-col="searchCol" />
 
   <!-- 表格主体 -->
   <div class="card table-main">
@@ -20,24 +13,12 @@
         <slot name="toolButton">
           <el-button v-if="showToolButton('refresh')" :icon="Refresh" circle @click="getTableList" />
           <el-button v-if="showToolButton('setting') && columns.length" :icon="Operation" circle @click="openColSetting" />
-          <el-button
-            v-if="showToolButton('search') && searchColumns?.length"
-            :icon="Search"
-            circle
-            @click="isShowSearch = !isShowSearch"
-          />
+          <el-button v-if="showToolButton('search') && searchColumns?.length" :icon="Search" circle @click="isShowSearch = !isShowSearch" />
         </slot>
       </div>
     </div>
     <!-- 表格主体 -->
-    <el-table
-      ref="tableRef"
-      v-bind="$attrs"
-      :data="processTableData"
-      :border="border"
-      :row-key="rowKey"
-      @selection-change="selectionChange"
-    >
+    <el-table ref="tableRef" v-bind="$attrs" :data="processTableData" :border="border" :row-key="rowKey" @selection-change="selectionChange">
       <!-- 默认插槽 -->
       <slot />
       <template v-for="item in tableColumns" :key="item">
@@ -87,12 +68,7 @@
     </el-table>
     <!-- 分页组件 -->
     <slot name="pagination">
-      <Pagination
-        v-if="pagination"
-        :pageable="pageable"
-        :handle-size-change="handleSizeChange"
-        :handle-current-change="handleCurrentChange"
-      />
+      <Pagination v-if="pagination" :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
     </slot>
   </div>
   <!-- 列设置 -->
@@ -165,8 +141,13 @@ const radio = ref('')
 const { selectionChange, selectedList, selectedListIds, isSelected } = useSelection(props.rowKey)
 
 // 表格操作 Hooks
-const { tableData, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
-  useTable(props.requestApi, props.initParam, props.pagination, props.dataCallback, props.requestError)
+const { tableData, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } = useTable(
+  props.requestApi,
+  props.initParam,
+  props.pagination,
+  props.dataCallback,
+  props.requestError
+)
 
 // 清空选中数据列表
 const clearSelection = () => tableRef.value!.clearSelection()
@@ -182,10 +163,7 @@ onMounted(() => {
 const processTableData = computed(() => {
   if (!props.data) return tableData.value
   if (!props.pagination) return props.data
-  return props.data.slice(
-    (pageable.value.pageNum - 1) * pageable.value.pageSize,
-    pageable.value.pageSize * pageable.value.pageNum
-  )
+  return props.data.slice((pageable.value.pageNum - 1) * pageable.value.pageSize, pageable.value.pageSize * pageable.value.pageNum)
 })
 
 // 监听页面 initParam 改化，重新获取表格数据
@@ -237,9 +215,7 @@ const flatColumnsFunc = (columns: ColumnProps[], flatArr: ColumnProps[] = []) =>
 
 // 过滤需要搜索的配置项 && 排序
 const searchColumns = computed(() => {
-  return flatColumns.value
-    ?.filter(item => item.search?.el || item.search?.render)
-    .sort((a, b) => a.search!.order! - b.search!.order!)
+  return flatColumns.value?.filter(item => item.search?.el || item.search?.render).sort((a, b) => a.search!.order! - b.search!.order!)
 })
 
 // 设置 搜索表单默认排序 && 搜索表单项的默认值

src/components/ProTable/interface/index.ts

@@ -68,8 +68,7 @@ export type HeaderRenderScope<T> = {
   [key: string]: any
 }
 
-export interface ColumnProps<T = any>
-  extends Partial<Omit<TableColumnCtx<T>, 'type' | 'children' | 'renderCell' | 'renderHeader'>> {
+export interface ColumnProps<T = any> extends Partial<Omit<TableColumnCtx<T>, 'type' | 'children' | 'renderCell' | 'renderHeader'>> {
   type?: TypeProps // 列类型
   tag?: boolean | Ref<boolean> // 是否是标签展示
   isShow?: boolean | Ref<boolean> // 是否显示在表格当中

src/components/SelectFilter/index.vue

@@ -11,9 +11,7 @@
             v-for="option in item.options"
             :key="option.value"
             :class="{
-              active:
-                option.value === selected[item.key] ||
-                (Array.isArray(selected[item.key]) && selected[item.key].includes(option.value))
+              active: option.value === selected[item.key] || (Array.isArray(selected[item.key]) && selected[item.key].includes(option.value))
             }"
             @click="select(item, option)"
           >

src/components/DialogOld/table.vue → src/components/TableDialog/index.vue

@@ -4,6 +4,7 @@
     :close-on-click-modal="false"
     :title="parameter.title"
     :destroy-on-close="true"
+    :append-to-body="true"
     :width="parameter.width"
     :top="parameter.top"
     draggable
@@ -13,9 +14,9 @@
       height="50vh"
       :tool-button="parameter.toolButton"
       :columns="parameter.columns"
-      row-key="roleId"
+      :row-key="parameter.rowKey"
       :request-api="parameter.getTableList"
-      :init-param="initParam"
+      :init-param="parameter.initParam"
     />
     <template #footer>
       <span class="dialog-footer">
@@ -27,7 +28,7 @@
 </template>
 
 <script setup lang="ts" name="FormDialog">
-import { ref, reactive } from 'vue'
+import { ref } from 'vue'
 import ProTable from '@/components/ProTable/index.vue'
 import { ElMessage } from 'element-plus'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
@@ -37,6 +38,9 @@ export interface TableParameterProps {
   width?: number // 弹框宽度
   top?: string // 离顶部距离
   toolButton?: boolean
+  initParam?: any // 初始化参数
+  apiParam?: (params?: any) => any
+  rowKey?: string
   api?: (params: any) => Promise<any> // 表单提交api
   columns?: ColumnProps[] // 动态表单字段
   getTableList?: (params: any) => Promise<any> // 获取表格数据的Api
@@ -45,7 +49,6 @@ export interface TableParameterProps {
 // dialog状态
 const dialogVisible = ref(false)
 const butLoading = ref(false)
-
 // 接受父组件参数，配置默认值
 // const parameter = ref<TableParameterProps>({
 //   title: '',
@@ -57,14 +60,14 @@ const butLoading = ref(false)
 let parameter = withDefaults(defineProps<TableParameterProps>(), {
   title: '',
   width: 600,
-  top: '5vh',
+  top: '10vh',
+  rowKey: 'id',
   toolButton: false,
+  initParam: {},
   columns: () => []
 })
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
-
-const initParam = reactive({ deptId: '' })
 // 定义 emit 事件
 const emit = defineEmits<{
   submitForm: []
@@ -72,8 +75,19 @@ const emit = defineEmits<{
 // 表单提交校验
 const handleSubmit = () => {
   butLoading.value = true
-  let tableNames: any[] | undefined = proTable.value?.selectedList.map(item => item.tableName)
-  parameter.api!(tableNames).then(res => {
+  if (!proTable.value?.selectedList.length) {
+    ElMessage.warning('请选择数据')
+    butLoading.value = false
+    return
+  }
+  let paramObj: any = undefined
+  let params: any[] | undefined = []
+  if (parameter.apiParam) {
+    paramObj = parameter.apiParam(proTable.value?.selectedList)
+  } else {
+    params = proTable.value?.selectedList.map(item => item[parameter.rowKey])
+  }
+  parameter.api!(paramObj || params).then(res => {
     if (res.code == 200) {
       ElMessage.success('操作成功')
       dialogVisible.value = false
@@ -99,7 +113,9 @@ const openDialog = (params: TableParameterProps) => {
 }
 
 defineExpose({
-  openDialog
+  openDialog,
+  proTable,
+  handleCancel
 })
 </script>
 <style scoped lang="scss"></style>

src/components/Upload/File.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="upload-file">
+    <el-upload
+      ref="uploadRef"
+      :action="uploadFileUrl"
+      v-model:file-list="_fileList"
+      class="upload-file-uploader"
+      :show-file-list="false"
+      :multiple="true"
+      :disabled="self_disabled"
+      :limit="limit"
+      :before-upload="beforeUpload"
+      :on-exceed="handleExceed"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :accept="fileType.join(',')"
+      :headers="headers"
+    >
+      <el-button :icon="icon" type="primary">{{ text }}</el-button>
+    </el-upload>
+    <!-- 上传提示 -->
+    <div class="el-upload__tip" v-if="showTip">
+      请上传
+      <template v-if="fileSize">
+        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+      </template>
+      <template v-if="fileType">
+        格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
+      </template>
+      的文件
+    </div>
+    <!-- 文件列表 -->
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in _fileList">
+        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
+          <span class="document">
+            {{ getFileName(file.name) }}
+          </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-link :underline="false" @click="handleRemove(index)" type="danger">删除</el-link>
+        </div>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script setup lang="ts" name="UploadImgs">
+import { ref, computed, inject, watch } from 'vue'
+import type { UploadProps, UploadFile, UploadUserFile } from 'element-plus'
+import { ElNotification, ElMessage, formContextKey, formItemContextKey, UploadInstance } from 'element-plus'
+import { getToken } from '@/utils/token'
+interface UploadFileProps {
+  modelValue?: any
+  disabled?: boolean // 是否禁用上传组件 ==> 非必传（默认为 false）
+  drag?: boolean // 是否支持拖拽上传 ==> 非必传（默认为 true）
+  limit?: number // 最大图片上传数 ==> 非必传（默认为 5张）
+  fileSize?: number // 图片大小限制 ==> 非必传（默认为 5M）
+  height?: string // 组件高度 ==> 非必传（默认为 150px）
+  width?: string // 组件宽度 ==> 非必传（默认为 150px）
+  borderRadius?: string // 组件边框圆角 ==> 非必传（默认为 8px）
+  isShowTip?: boolean // 是否显示提示信息 ==> 非必传（默认为 true）
+  text?: string // 按钮文字
+  icon?: string
+  fileList?: UploadUserFile[]
+  fileType?: Array<any>
+}
+// const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+const baseUrl = import.meta.env.VITE_API_URL
+const uploadFileUrl = ref(import.meta.env.VITE_API_URL + '/common/upload') // 上传文件服务器地址
+const headers = ref({ Authorization: 'Bearer ' + getToken() })
+const uploadRef = ref<UploadInstance>()
+const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize))
+const props = withDefaults(defineProps<UploadFileProps>(), {
+  fileList: () => [],
+  drag: true,
+  disabled: false,
+  limit: 1,
+  fileSize: 500,
+  fileType: () => ['doc', 'xls', 'xlsx', 'ppt', 'txt', 'pdf'],
+  height: '150px',
+  width: '150px',
+  borderRadius: '8px',
+  text: '文件上传',
+  isShowTip: false
+})
+
+// 获取 el-form 组件上下文
+const formContext = inject(formContextKey, void 0)
+// 获取 el-form-item 组件上下文
+const formItemContext = inject(formItemContextKey, void 0)
+// 判断是否禁用上传和删除
+const self_disabled = computed(() => {
+  return props.disabled || formContext?.disabled
+})
+
+const _fileList = ref<UploadUserFile[]>(props.fileList)
+
+// 获取文件名称
+const getFileName = name => {
+  if (name.lastIndexOf('/') > -1) {
+    return name.slice(name.lastIndexOf('/') + 1)
+  } else {
+    return ''
+  }
+}
+
+// 监听 props.fileList 列表默认值改变
+watch(
+  () => props.fileList,
+  (n: UploadUserFile[]) => {
+    _fileList.value = n
+  }
+)
+
+/**
+ * @description 文件上传之前判断
+ * @param rawFile 选择的文件
+ * */
+const beforeUpload: UploadProps['beforeUpload'] = rawFile => {
+  // 校验文件格式
+  const fileName = rawFile.name.split('.')
+  const fileExt = fileName[fileName.length - 1]
+  const isTypeOk = props.fileType.indexOf(fileExt) >= 0
+  // 校检文件大小
+  const isLt = rawFile.size / 1024 / 1024 < props.fileSize
+
+  if (!isTypeOk)
+    ElNotification({
+      title: '温馨提示',
+      message: '上传文件不符合所需的格式！',
+      type: 'warning'
+    })
+  if (!isLt)
+    setTimeout(() => {
+      ElNotification({
+        title: '温馨提示',
+        message: `上传文件大小不能超过 ${props.fileSize}M！`,
+        type: 'warning'
+      })
+    }, 0)
+  return isTypeOk && isLt
+}
+
+/**
+ * @description 文件上传成功
+ * @param response 上传响应结果
+ * @param uploadFile 上传的文件
+ * */
+const uploadSuccess = (response: any | undefined, uploadFile: UploadFile) => {
+  if (response.code === 200) {
+    uploadFile.url = response.url
+    uploadFile.name = response.fileName
+    emit('update:modelValue', _fileList.value)
+    // 调用 el-form 内部的校验方法（可自动校验）
+    formItemContext?.prop && formContext?.validateField([formItemContext.prop as string])
+    ElNotification({
+      title: '温馨提示',
+      message: '文件上传成功！',
+      type: 'success'
+    })
+  } else {
+    ElMessage.error(response.msg)
+    uploadRef.value?.handleRemove(uploadFile)
+  }
+  //   code: 200
+  // fileName: "/profile/upload/2024/04/19/demo_20240419154324A003.txt"
+  // msg: "操作成功"
+  // newFileName: "demo_20240419154324A003.txt"
+  // originalFilename: "demo.txt"
+  // url: "http://localhost:8080/profile/upload/2024/04/19/demo_20240419154324A003.txt"
+  // uploadList.push({ name: res.fileName, url: res.fileName });
+}
+
+/**
+ * @description 删除图片
+ * @param file 删除的文件
+ * */
+const handleRemove = (index: number) => {
+  // _fileList.value = _fileList.value.filter(item => item.url !== file.url || item.name !== file.name)
+  _fileList.value.splice(index, 1)
+  emit('update:modelValue', _fileList.value)
+}
+
+/**
+ * @description 文件上传错误
+ * */
+const uploadError = () => {
+  ElNotification({
+    title: '温馨提示',
+    message: '文件上传失败，请您重新上传！',
+    type: 'error'
+  })
+}
+
+/**
+ * @description 文件数超出
+ * */
+const handleExceed = () => {
+  ElNotification({
+    title: '温馨提示',
+    message: `当前最多只能上传 ${props.limit} 个文件 ，请移除后上传！`,
+    type: 'warning'
+  })
+}
+
+/**
+ * @description 图片预览
+ * @param file 预览的文件
+ * */
+// const viewImageUrl = ref('')
+// const imgViewVisible = ref(false)
+// const handlePictureCardPreview: UploadProps['onPreview'] = file => {
+//   viewImageUrl.value = file.url!
+//   imgViewVisible.value = true
+// }
+</script>
+
+<style scoped lang="scss">
+// .upload-file-uploader {
+//   margin-bottom: 5px;
+// }
+// .upload-file-list .el-upload-list__item {
+//   position: relative;
+//   margin-bottom: 10px;
+//   line-height: 2;
+//   border: 1px solid #e4e7ed;
+// }
+// .upload-file-list .ele-upload-list__item-content {
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+//   color: inherit;
+// }
+// .ele-upload-list__item-content-action .el-link {
+//   margin-right: 10px;
+// }
+// .is-error {
+//   .upload {
+//     :deep(.el-upload--picture-card),
+//     :deep(.el-upload-dragger) {
+//       border: 1px dashed var(--el-color-danger) !important;
+//       &:hover {
+//         border-color: var(--el-color-primary) !important;
+//       }
+//     }
+//   }
+// }
+// :deep(.disabled) {
+//   .el-upload--picture-card,
+//   .el-upload-dragger {
+//     cursor: not-allowed;
+//     background: var(--el-disabled-bg-color) !important;
+//     border: 1px dashed var(--el-border-color-darker);
+//     &:hover {
+//       border-color: var(--el-border-color-darker) !important;
+//     }
+//   }
+// }
+// .upload-box {
+//   .no-border {
+//     :deep(.el-upload--picture-card) {
+//       border: none !important;
+//     }
+//   }
+//   :deep(.upload) {
+//     .el-upload-dragger {
+//       display: flex;
+//       align-items: center;
+//       justify-content: center;
+//       width: 100%;
+//       height: 100%;
+//       padding: 0;
+//       overflow: hidden;
+//       border: 1px dashed var(--el-border-color-darker);
+//       border-radius: v-bind(borderRadius);
+//       &:hover {
+//         border: 1px dashed var(--el-color-primary);
+//       }
+//     }
+//     .el-upload-dragger.is-dragover {
+//       background-color: var(--el-color-primary-light-9);
+//       border: 2px dashed var(--el-color-primary) !important;
+//     }
+//     .el-upload-list__item,
+//     .el-upload--picture-card {
+//       width: v-bind(width);
+//       height: v-bind(height);
+//       background-color: transparent;
+//       border-radius: v-bind(borderRadius);
+//     }
+//     .upload-image {
+//       width: 100%;
+//       height: 100%;
+//       object-fit: contain;
+//     }
+//     .upload-handle {
+//       position: absolute;
+//       top: 0;
+//       right: 0;
+//       box-sizing: border-box;
+//       display: flex;
+//       align-items: center;
+//       justify-content: center;
+//       width: 100%;
+//       height: 100%;
+//       cursor: pointer;
+//       background: rgb(0 0 0 / 60%);
+//       opacity: 0;
+//       transition: var(--el-transition-duration-fast);
+//       .handle-icon {
+//         display: flex;
+//         flex-direction: column;
+//         align-items: center;
+//         justify-content: center;
+//         padding: 0 6%;
+//         color: aliceblue;
+//         .el-icon {
+//           margin-bottom: 15%;
+//           font-size: 140%;
+//         }
+//         span {
+//           font-size: 100%;
+//         }
+//       }
+//     }
+//     .el-upload-list__item {
+//       &:hover {
+//         .upload-handle {
+//           opacity: 1;
+//         }
+//       }
+//     }
+//     .upload-empty {
+//       display: flex;
+//       flex-direction: column;
+//       align-items: center;
+//       font-size: 12px;
+//       line-height: 30px;
+//       color: var(--el-color-info);
+//       .el-icon {
+//         font-size: 28px;
+//         color: var(--el-text-color-secondary);
+//       }
+//     }
+//   }
+//   .el-upload__tip {
+//     line-height: 15px;
+//     text-align: center;
+//   }
+// }
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+.upload-file-list .el-upload-list__item {
+  position: relative;
+  margin-bottom: 10px;
+  line-height: 2;
+  border: 1px solid #e4e7ed;
+}
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: inherit;
+}
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+</style>

src/hooks/useTheme.ts

@@ -33,10 +33,7 @@ export const useTheme = () => {
     }
     // 计算主题颜色变化
     document.documentElement.style.setProperty('--el-color-primary', val)
-    document.documentElement.style.setProperty(
-      '--el-color-primary-dark-2',
-      isDark.value ? `${getLightColor(val, 0.2)}` : `${getDarkColor(val, 0.3)}`
-    )
+    document.documentElement.style.setProperty('--el-color-primary-dark-2', isDark.value ? `${getLightColor(val, 0.2)}` : `${getDarkColor(val, 0.3)}`)
     for (let i = 1; i <= 9; i++) {
       const primaryColor = isDark.value ? `${getDarkColor(val, i / 10)}` : `${getLightColor(val, i / 10)}`
       document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor)

src/hooks/useTime.ts

@@ -20,15 +20,11 @@ export const useTime = () => {
     month.value = date.getMonth() + 1
     week.value = '日一二三四五六'.charAt(date.getDay())
     day.value = date.getDate()
-    hour.value =
-      (date.getHours() + '')?.padStart(2, '0') ||
-      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours())
+    hour.value = (date.getHours() + '')?.padStart(2, '0') || new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours())
     minute.value =
-      (date.getMinutes() + '')?.padStart(2, '0') ||
-      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes())
+      (date.getMinutes() + '')?.padStart(2, '0') || new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes())
     second.value =
-      (date.getSeconds() + '')?.padStart(2, '0') ||
-      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getSeconds())
+      (date.getSeconds() + '')?.padStart(2, '0') || new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getSeconds())
     nowTime.value = `${year.value}年${month.value}月${day.value} ${hour.value}:${minute.value}:${second.value}`
   }
 

src/layouts/LayoutClassic/index.vue

@@ -17,13 +17,7 @@
       <el-aside>
         <div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
           <el-scrollbar>
-            <el-menu
-              :router="false"
-              :default-active="activeMenu"
-              :collapse="isCollapse"
-              :unique-opened="accordion"
-              :collapse-transition="false"
-            >
+            <el-menu :router="false" :default-active="activeMenu" :collapse="isCollapse" :unique-opened="accordion" :collapse-transition="false">
               <SubMenu :menu-list="menuList" />
             </el-menu>
           </el-scrollbar>

src/layouts/LayoutColumns/index.vue

@@ -27,13 +27,7 @@
         <span v-show="subMenuList.length" class="logo-text">{{ isCollapse ? 'G' : title }}</span>
       </div>
       <el-scrollbar>
-        <el-menu
-          :router="false"
-          :default-active="activeMenu"
-          :collapse="isCollapse"
-          :unique-opened="accordion"
-          :collapse-transition="false"
-        >
+        <el-menu :router="false" :default-active="activeMenu" :collapse="isCollapse" :unique-opened="accordion" :collapse-transition="false">
           <SubMenu :menu-list="subMenuList" />
         </el-menu>
       </el-scrollbar>

src/layouts/LayoutVertical/index.vue

@@ -8,13 +8,7 @@
           <span v-show="!isCollapse" class="logo-text">{{ title }}</span>
         </div>
         <el-scrollbar>
-          <el-menu
-            :router="false"
-            :default-active="activeMenu"
-            :collapse="isCollapse"
-            :unique-opened="accordion"
-            :collapse-transition="false"
-          >
+          <el-menu :router="false" :default-active="activeMenu" :collapse="isCollapse" :unique-opened="accordion" :collapse-transition="false">
             <SubMenu :menu-list="menuList" />
           </el-menu>
         </el-scrollbar>

src/layouts/components/Header/components/AssemblySize.vue

@@ -3,12 +3,7 @@
     <i :class="'iconfont icon-contentright'" class="toolBar-icon"></i>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-dropdown-item
-          v-for="item in assemblySizeList"
-          :key="item.value"
-          :command="item.value"
-          :disabled="assemblySize === item.value"
-        >
+        <el-dropdown-item v-for="item in assemblySizeList" :key="item.value" :command="item.value" :disabled="assemblySize === item.value">
           {{ item.label }}
         </el-dropdown-item>
       </el-dropdown-menu>

src/layouts/components/Header/components/Breadcrumb.vue

@@ -3,14 +3,10 @@
     <el-breadcrumb :separator-icon="ArrowRight">
       <transition-group name="breadcrumb">
         <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
-          <div
-            class="el-breadcrumb__inner is-link"
-            :class="{ 'item-no-icon': !item.meta.icon }"
-            @click="onBreadcrumbClick(item, index)"
-          >
-            <el-icon v-if="item.meta.icon && globalStore.breadcrumbIcon" class="breadcrumb-icon">
+          <div class="el-breadcrumb__inner is-link" :class="{ 'item-no-icon': !item.meta.icon }" @click="onBreadcrumbClick(item, index)">
+            <!-- <el-icon v-if="item.meta.icon && globalStore.breadcrumbIcon" class="breadcrumb-icon">
               <component :is="item.meta.icon"></component>
-            </el-icon>
+            </el-icon> -->
             <span class="breadcrumb-title">{{ item.meta.title }}</span>
           </div>
         </el-breadcrumb-item>

src/layouts/components/Header/components/Language.vue

@@ -3,12 +3,7 @@
     <i :class="'iconfont icon-zhongyingwen'" class="toolBar-icon"></i>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-dropdown-item
-          v-for="item in languageList"
-          :key="item.value"
-          :command="item.value"
-          :disabled="language === item.value"
-        >
+        <el-dropdown-item v-for="item in languageList" :key="item.value" :command="item.value" :disabled="language === item.value">
           {{ item.label }}
         </el-dropdown-item>
       </el-dropdown-menu>

src/layouts/components/ThemeDrawer/index.vue

@@ -108,10 +108,10 @@
       <span>面包屑</span>
       <el-switch v-model="breadcrumb" />
     </div>
-    <div class="theme-item">
+    <!-- <div class="theme-item">
       <span>面包屑图标</span>
       <el-switch v-model="breadcrumbIcon" />
-    </div>
+    </div> -->
     <div class="theme-item">
       <span>标签栏</span>
       <el-switch v-model="tabs" />
@@ -140,35 +140,11 @@ import SwitchDark from '@/components/SwitchDark/index.vue'
 const { changePrimary, changeGreyOrWeak, setAsideTheme, setHeaderTheme } = useTheme()
 
 const globalStore = useGlobalStore()
-const {
-  layout,
-  primary,
-  isGrey,
-  isWeak,
-  asideInverted,
-  headerInverted,
-  isCollapse,
-  accordion,
-  breadcrumb,
-  breadcrumbIcon,
-  tabs,
-  tabsIcon,
-  footer
-} = storeToRefs(globalStore)
+const { layout, primary, isGrey, isWeak, asideInverted, headerInverted, isCollapse, accordion, breadcrumb, tabs, tabsIcon, footer } =
+  storeToRefs(globalStore)
 
 // 预定义主题颜色
-const colorList = [
-  DEFAULT_PRIMARY,
-  '#daa96e',
-  '#0c819f',
-  '#409eff',
-  '#27ae60',
-  '#ff5c93',
-  '#e74c3c',
-  '#fd726d',
-  '#f39c12',
-  '#9b59b6'
-]
+const colorList = [DEFAULT_PRIMARY, '#daa96e', '#0c819f', '#409eff', '#27ae60', '#ff5c93', '#e74c3c', '#fd726d', '#f39c12', '#9b59b6']
 
 // 设置布局方式
 const setLayout = (val: LayoutType) => {

src/routers/modules/routerData.json

@@ -3,11 +3,11 @@
   "data": [
     {
       "path": "/index",
-      "name": "home",
+      "name": "homeIndex",
       "component": "index",
       "hidden": false,
       "meta": {
-        "icon": "HomeFilled",
+        "icon": "",
         "title": "首页",
         "link": "",
         "full": false,
@@ -21,7 +21,7 @@
       "component": "system/dict/data",
       "hidden": true,
       "meta": {
-        "icon": "data",
+        "icon": "",
         "title": "字典数据",
         "activeMenu": "/system/dict",
         "link": "",
@@ -36,7 +36,7 @@
       "component": "tool/gen/editGenTable",
       "hidden": true,
       "meta": {
-        "icon": "data",
+        "icon": "",
         "title": "编辑生成配置",
         "activeMenu": "/tool/gen",
         "link": "",
@@ -44,6 +44,21 @@
         "affix": false,
         "noCache": true
       }
+    },
+    {
+      "path": "/system/role-auth/user/:roleId",
+      "name": "AuthUser",
+      "component": "system/role/authUser",
+      "hidden": true,
+      "meta": {
+        "icon": "",
+        "title": "分配用户",
+        "activeMenu": "/system/role",
+        "link": "",
+        "full": false,
+        "affix": false,
+        "noCache": true
+      }
     }
   ],
   "msg": "成功"

src/stores/modules/global.ts

@@ -33,7 +33,7 @@ export const useGlobalStore = defineStore('admin-global', {
     // 面包屑导航
     breadcrumb: true,
     // 面包屑导航图标
-    breadcrumbIcon: true,
+    breadcrumbIcon: false,
     // 标签页
     tabs: true,
     // 标签页图标

src/typings/ProForm.d.ts

@@ -24,6 +24,7 @@ declare namespace ProForm {
     | 'cascader'
     | 'radio-group'
     | 'radio-button'
+    | 'file-upload'
     | 'slot'
     | 'rate'
     | 'slider'
@@ -52,9 +53,9 @@ declare namespace ProForm {
     label?: string
     labelWidth?: string | number // 标签宽度，例如 '50px'。 可以使用 auto。
     prop: string // prop
-    value?: any // 默认值
     tooltip?: string // 问号，tooltip提示
     required?: boolean
+    hideLabelSuffix?: boolean // label后缀是否隐藏
     rules?: FormItemRule[]
     span?: number // 表单col宽度
     show?: (params?: any) => Promise<any> | boolean | string // 是否显示 默认显示
@@ -83,6 +84,7 @@ declare namespace ProForm {
     clearable?: boolean // 是否可清空
     showPassword?: boolean // 是否显示切换密码图标
     enum?: EnumProps[] | Ref<EnumProps[]> | ((params?: any) => Promise<any>) // 枚举字典
+    value?: string | number | boolean | any[] // 选项框值
     enumKey?: string
     labelKey?: string
     valueKey?: string
@@ -90,6 +92,7 @@ declare namespace ProForm {
     placeholder?: string
     data?: Record<string, any>[]
     multiple?: boolean
+    disabled?: boolean
     elTagName?: ElTagName
     type?: string
     rangeSeparator?: string // 时间范围分隔符
@@ -109,5 +112,16 @@ declare namespace ProForm {
     checkStrictly?: boolean // 可选
     renderAfterExpand?: boolean // 可选
     controlsPosition?: 'left' | 'right' // 可选
+    onChange?: (value: any) => void
+    onSelect?: (value: any) => void
+    onRemove?: (value: any) => void
+    onClear?: () => void
+    onFocus?: () => void
+    onBlur?: () => void
+    onInput?: (value: any) => void
+    onSearch?: (value: any) => void
+    onVisibleChange?: (value: any) => void
+    onExpand?: (value: any) => void
+    onCheck?: (value: any) => void
   }
 }

src/typings/ProFormOld.d.ts

@@ -1,77 +0,0 @@
-import { type FormItemRule } from 'element-plus'
-export = Form
-export as namespace Form
-export type FieldNamesProps = {
-  label: string
-  value: string
-  children?: string
-}
-export interface EnumProps {
-  label?: string // 选项框显示的文字
-  value?: string | number | boolean | any[] // 选项框值
-  disabled?: boolean // 是否禁用此选项
-  tagType?: string // 当 tag 为 true 时，此选择会指定 tag 显示类型
-  children?: EnumProps[] // 为树形选择时，可以通过 children 属性指定子选项
-  [key: string]: any
-}
-declare namespace Form {
-  type ItemType =
-    | 'password'
-    | 'text'
-    | 'textarea'
-    | 'radio'
-    | 'checkbox'
-    | 'select'
-    | 'select-v2'
-    | 'select-tree'
-    | 'date-picker'
-    | 'input-number'
-    | 'select-icon'
-  // 当FiledItem的type === 'radio' | 'checkbox'时的需要的参数类型
-  interface IFieldOptions {
-    labelKey?: string
-    valueKey?: string
-    children?: string
-    placeholder?: string
-    data?: Record<string, any>[]
-    multiple?: boolean
-    type?: IDatePickerType
-    max?: number
-    min?: number
-    filterable?: boolean
-    allowCreate?: boolean
-    clearable?: boolean
-    valueFormat?: string
-  }
-  interface Options {
-    labelWidth?: string | number
-    labelPosition?: 'left' | 'right' | 'top'
-    disabled?: boolean
-    size?: 'large' | 'small' | 'default'
-    showResetButton?: boolean // 是否展示重置按钮
-    showCancelButton?: boolean // 是否展示取消按钮
-    submitButtonText?: string
-    resetButtonText?: string
-    cancelButtonText?: string
-    blockSubmitButton?: boolean // 提交按钮是否以块级按钮呈现
-    hasFooter?: boolean // 表单是否有footer
-  }
-  interface FieldItem {
-    label?: string
-    labelWidth?: string | number // 标签宽度，例如 '50px'。 可以使用 auto。
-    field: string
-    type?: ItemType
-    tooltip?: string // 问号，tooltip提示
-    value?: any
-    placeholder?: string
-    disabled?: boolean
-    readonly?: boolean
-    options?: IFieldOptions
-    rules?: FormItemRule[]
-    clearable?: boolean // 是否可清空
-    showPassword?: boolean // 是否显示切换密码图标
-    enterable?: boolean // 当为输入框时，是否启用回车触发提交功能
-    span?: number // 表单col宽度
-    enum?: EnumProps[] | Ref<EnumProps[]> | ((params?: any) => Promise<any>) // 枚举字典
-  }
-}

src/utils/index.ts

@@ -291,9 +291,10 @@ export function filterEnum(callValue: any, enumData?: any, fieldNames?: FieldNam
   let filterData: { [key: string]: any } = {}
   // 判断 enumData 是否为数组
   if (Array.isArray(enumData)) filterData = findItemNested(enumData, callValue, value, children)
+
   // 判断是否输出的结果为 tag 类型
   if (type == 'tag') {
-    return filterData?.tagType ? filterData.tagType : ''
+    return filterData?.listClass ? filterData.listClass : 'primary'
   } else {
     return filterData ? filterData[label] : '--'
   }

src/views/login/components/LoginForm.vue

@@ -26,9 +26,7 @@
   </el-form>
   <div class="login-btn">
     <el-button :icon="CircleClose" round size="large" @click="resetForm(loginFormRef)"> 重置 </el-button>
-    <el-button :icon="UserFilled" round size="large" type="primary" :loading="loading" @click="handleLogin(loginFormRef)">
-      登录
-    </el-button>
+    <el-button :icon="UserFilled" round size="large" type="primary" :loading="loading" @click="handleLogin(loginFormRef)"> 登录 </el-button>
   </div>
 </template>
 

src/views/monitor/logininfor/index.vue

@@ -1,64 +1,16 @@
 <template>
   <div class="table-box">
-    <ProTable
-      ref="proTable"
-      :columns="columns"
-      row-key="infoId"
-      :request-api="listLogininforApi"
-      :init-param="initParam"
-      :data-callback="dataCallback"
-    >
-      <!-- 表格 header 按钮 -->
-      <template #tableHeader="scope">
-        <el-button
-          type="primary"
-          v-auth="['monitor:logininfor:add']"
-          :icon="CirclePlus"
-          @click="openDialog(1, '系统访问记录新增')"
-        >
-          新增
-        </el-button>
-        <el-button type="primary" v-auth="['monitor:logininfor:import']" :icon="Upload" plain @click="batchAdd"> 导入 </el-button>
-        <el-button type="primary" v-auth="['monitor:logininfor:export']" :icon="Download" plain @click="downloadFile">
-          导出
-        </el-button>
-        <el-button
-          type="danger"
-          v-auth="['system:user:remove']"
-          :icon="Delete"
-          plain
-          :disabled="!scope.isSelected"
-          @click="batchDelete(scope.selectedListIds)"
-        >
-          批量删除
-        </el-button>
-      </template>
-    </ProTable>
-    <FormDialog ref="formDialogRef" />
+    <ProTable ref="proTable" :columns="columns" row-key="infoId" :request-api="listLogininforApi" :init-param="initParam"> </ProTable>
     <ImportExcel ref="dialogRef" />
   </div>
 </template>
 
 <script setup lang="tsx" name="Logininfor">
 import { ref, reactive } from 'vue'
-import { useHandleData } from '@/hooks/useHandleData'
-import { useDownload } from '@/hooks/useDownload'
-import { ElMessageBox } from 'element-plus'
 import ProTable from '@/components/ProTable/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
-import FormDialog from '@/components/DialogOld/form.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
-import { Delete, Download, Upload, CirclePlus } from '@element-plus/icons-vue'
-import {
-  listLogininforApi,
-  delLogininforApi,
-  addLogininforApi,
-  updateLogininforApi,
-  importTemplateApi,
-  importDataApi,
-  exportApi,
-  getLogininforApi
-} from '@/api/modules/monitor/logininfor'
+import { listLogininforApi } from '@/api/modules/monitor/logininfor'
 import { getDictsApi } from '@/api/modules/system/dictData'
 
 // ProTable 实例
@@ -67,101 +19,46 @@ const proTable = ref<ProTableInstance>()
 // 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
 const initParam = reactive({ type: 1 })
 
-// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
-const dataCallback = (data: any) => {
-  return data
-}
-
-// 批量删除系统访问记录信息
-const batchDelete = async (id: string[]) => {
-  await useHandleData(delLogininforApi, { id }, '删除所选系统访问记录信息')
-  proTable.value?.clearSelection()
-  proTable.value?.getTableList()
-}
-
-// 导出系统访问记录列表
-const downloadFile = async () => {
-  ElMessageBox.confirm('确认导出系统访问记录数据?', '温馨提示', { type: 'warning' }).then(() =>
-    useDownload(exportApi, '系统访问记录列表', proTable.value?.searchParam)
-  )
-}
-
 // 批量添加系统访问记录
 const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
-const batchAdd = () => {
-  const params = {
-    title: '系统访问记录',
-    tempApi: importTemplateApi,
-    importApi: importDataApi,
-    getTableList: proTable.value?.getTableList
-  }
-  dialogRef.value?.acceptParams(params)
-}
-
-const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
-// 打开弹框的功能
-const openDialog = async (type: number, title: string, row?: any) => {
-  let res = { data: {} }
-  if (row?.infoId) {
-    res = await getLogininforApi(row?.infoId || null)
-  }
-  // 重置表单
-  setFieldList()
-  const params = {
-    title,
-    width: 580,
-    isEdit: type !== 3,
-    fieldList: fieldList,
-    model: type == 1 ? {} : res.data,
-    api: type == 1 ? addLogininforApi : updateLogininforApi,
-    getTableList: proTable.value?.getTableList
-  }
-  formDialogRef.value?.openDialog(params)
-}
 
 // 表格配置项
 const columns = reactive<ColumnProps<any>[]>([
-  { type: 'selection', fixed: 'left', width: 70 },
   { prop: 'infoId', label: '访问ID' },
   {
     prop: 'userName',
     label: '用户账号',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'ipaddr',
     label: '登录IP地址',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'loginLocation',
     label: '登录地点',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'browser',
     label: '浏览器类型',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'os',
     label: '操作系统',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'status',
@@ -174,16 +71,14 @@ const columns = reactive<ColumnProps<any>[]>([
     },
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'msg',
     label: '提示消息',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'loginTime',
@@ -191,55 +86,7 @@ const columns = reactive<ColumnProps<any>[]>([
     search: {
       el: 'date-picker',
       props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
-    },
-    width: 120
+    }
   }
 ])
-// 表单配置项
-let fieldList: Form.FieldItem[] = []
-const setFieldList = () => {
-  fieldList = [
-    {
-      label: '用户账号',
-      field: 'userName',
-      placeholder: '请输入用户账号'
-    },
-    {
-      label: '登录IP地址',
-      field: 'ipaddr',
-      placeholder: '请输入登录IP地址'
-    },
-    {
-      label: '登录地点',
-      field: 'loginLocation',
-      placeholder: '请输入登录地点'
-    },
-    {
-      label: '浏览器类型',
-      field: 'browser',
-      placeholder: '请输入浏览器类型'
-    },
-    {
-      label: '操作系统',
-      field: 'os',
-      placeholder: '请输入操作系统'
-    },
-    {
-      label: '登录状态',
-      field: 'status',
-      placeholder: '请输入登录状态'
-    },
-    {
-      label: '提示消息',
-      field: 'msg',
-      placeholder: '请输入提示消息'
-    },
-    {
-      label: '访问时间',
-      field: 'loginTime',
-      type: 'date-picker',
-      placeholder: '请选择访问时间'
-    }
-  ]
-}
 </script>

src/views/monitor/operlog/index.vue

@@ -1,83 +1,14 @@
 <template>
   <div class="table-box">
-    <ProTable
-      ref="proTable"
-      :columns="columns"
-      row-key="operId"
-      :request-api="listOperlogApi"
-      :init-param="initParam"
-      :data-callback="dataCallback"
-    >
-      <!-- 表格 header 按钮 -->
-      <template #tableHeader="scope">
-        <el-button type="primary" v-auth="['monitor:operlog:add']" :icon="CirclePlus" @click="openDialog(1, '操作日志记录新增')">
-          新增
-        </el-button>
-        <el-button type="primary" v-auth="['monitor:operlog:import']" :icon="Upload" plain @click="batchAdd"> 导入 </el-button>
-        <el-button type="primary" v-auth="['monitor:operlog:export']" :icon="Download" plain @click="downloadFile">
-          导出
-        </el-button>
-        <el-button
-          type="danger"
-          v-auth="['system:user:remove']"
-          :icon="Delete"
-          plain
-          :disabled="!scope.isSelected"
-          @click="batchDelete(scope.selectedListIds)"
-        >
-          批量删除
-        </el-button>
-      </template>
-      <!-- 表格操作 -->
-      <template #operation="scope">
-        <el-button
-          type="primary"
-          link
-          :icon="View"
-          v-auth="['monitor:operlog:query']"
-          @click="openDialog(3, '操作日志记录查看', scope.row)"
-        >
-          查看
-        </el-button>
-        <el-button
-          type="primary"
-          link
-          :icon="EditPen"
-          v-auth="['monitor:operlog:edit']"
-          @click="openDialog(2, '操作日志记录编辑', scope.row)"
-        >
-          编辑
-        </el-button>
-        <el-button type="primary" link :icon="Delete" v-auth="['monitor:operlog:remove']" @click="deleteOperlog(scope.row)">
-          删除
-        </el-button>
-      </template>
-    </ProTable>
-    <FormDialog ref="formDialogRef" />
-    <ImportExcel ref="dialogRef" />
+    <ProTable ref="proTable" :columns="columns" row-key="operId" :request-api="listOperlogApi" :init-param="initParam"> </ProTable>
   </div>
 </template>
 
 <script setup lang="tsx" name="Operlog">
 import { ref, reactive } from 'vue'
-import { useHandleData } from '@/hooks/useHandleData'
-import { useDownload } from '@/hooks/useDownload'
-import { ElMessageBox } from 'element-plus'
 import ProTable from '@/components/ProTable/index.vue'
-import ImportExcel from '@/components/ImportExcel/index.vue'
-import FormDialog from '@/components/DialogOld/form.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
-import { Delete, EditPen, Download, Upload, View, CirclePlus } from '@element-plus/icons-vue'
-import {
-  listOperlogApi,
-  delOperlogApi,
-  addOperlogApi,
-  updateOperlogApi,
-  importTemplateApi,
-  importDataApi,
-  exportApi,
-  getOperlogApi
-} from '@/api/modules/monitor/operlog'
+import { listOperlogApi } from '@/api/modules/monitor/operlog'
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
@@ -85,179 +16,106 @@ const proTable = ref<ProTableInstance>()
 // 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
 const initParam = reactive({ type: 1 })
 
-// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
-const dataCallback = (data: any) => {
-  return data
-}
-
-// 删除操作日志记录信息
-const deleteOperlog = async (params: any) => {
-  await useHandleData(delOperlogApi, { id: [params.operId] }, `删除【${params.id}】操作日志记录`)
-  proTable.value?.getTableList()
-}
-
-// 批量删除操作日志记录信息
-const batchDelete = async (id: string[]) => {
-  await useHandleData(delOperlogApi, { id }, '删除所选操作日志记录信息')
-  proTable.value?.clearSelection()
-  proTable.value?.getTableList()
-}
-
-// 导出操作日志记录列表
-const downloadFile = async () => {
-  ElMessageBox.confirm('确认导出操作日志记录数据?', '温馨提示', { type: 'warning' }).then(() =>
-    useDownload(exportApi, '操作日志记录列表', proTable.value?.searchParam)
-  )
-}
-
-// 批量添加操作日志记录
-const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
-const batchAdd = () => {
-  const params = {
-    title: '操作日志记录',
-    tempApi: importTemplateApi,
-    importApi: importDataApi,
-    getTableList: proTable.value?.getTableList
-  }
-  dialogRef.value?.acceptParams(params)
-}
-
-const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
-// 打开弹框的功能
-const openDialog = async (type: number, title: string, row?: any) => {
-  let res = { data: {} }
-  if (row?.operId) {
-    res = await getOperlogApi(row?.operId || null)
-  }
-  // 重置表单
-  setFieldList()
-  const params = {
-    title,
-    width: 580,
-    isEdit: type !== 3,
-    fieldList: fieldList,
-    model: type == 1 ? {} : res.data,
-    api: type == 1 ? addOperlogApi : updateOperlogApi,
-    getTableList: proTable.value?.getTableList
-  }
-  formDialogRef.value?.openDialog(params)
-}
-
 // 表格配置项
 const columns = reactive<ColumnProps<any>[]>([
-  { type: 'selection', fixed: 'left', width: 70 },
   { prop: 'operId', label: '日志主键' },
   {
     prop: 'title',
     label: '模块标题',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'businessType',
     label: '业务类型',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'method',
     label: '方法名称',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'requestMethod',
     label: '请求方式',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'operatorType',
     label: '操作类别',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'operName',
     label: '操作人员',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'deptName',
     label: '部门名称',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'operUrl',
     label: '请求URL',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'operIp',
     label: '主机地址',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'operLocation',
     label: '操作地点',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'operParam',
     label: '请求参数',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'jsonResult',
     label: '返回参数',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'status',
     label: '操作状态',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'errorMsg',
     label: '错误消息',
     search: {
       el: 'input'
-    },
-    width: 120
+    }
   },
   {
     prop: 'operTime',
@@ -265,104 +123,14 @@ const columns = reactive<ColumnProps<any>[]>([
     search: {
       el: 'date-picker',
       props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
-    },
-    width: 120
+    }
   },
   {
     prop: 'costTime',
     label: '消耗时间',
     search: {
       el: 'input'
-    },
-    width: 120
-  },
-  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
-])
-// 表单配置项
-let fieldList: Form.FieldItem[] = []
-const setFieldList = () => {
-  fieldList = [
-    {
-      label: '模块标题',
-      field: 'title',
-      placeholder: '请输入模块标题'
-    },
-    {
-      label: '业务类型',
-      field: 'businessType',
-      placeholder: '请输入业务类型'
-    },
-    {
-      label: '方法名称',
-      field: 'method',
-      placeholder: '请输入方法名称'
-    },
-    {
-      label: '请求方式',
-      field: 'requestMethod',
-      placeholder: '请输入请求方式'
-    },
-    {
-      label: '操作类别',
-      field: 'operatorType',
-      placeholder: '请输入操作类别'
-    },
-    {
-      label: '操作人员',
-      field: 'operName',
-      placeholder: '请输入操作人员'
-    },
-    {
-      label: '部门名称',
-      field: 'deptName',
-      placeholder: '请输入部门名称'
-    },
-    {
-      label: '请求URL',
-      field: 'operUrl',
-      placeholder: '请输入请求URL'
-    },
-    {
-      label: '主机地址',
-      field: 'operIp',
-      placeholder: '请输入主机地址'
-    },
-    {
-      label: '操作地点',
-      field: 'operLocation',
-      placeholder: '请输入操作地点'
-    },
-    {
-      label: '请求参数',
-      field: 'operParam',
-      placeholder: '请输入请求参数'
-    },
-    {
-      label: '返回参数',
-      field: 'jsonResult',
-      placeholder: '请输入返回参数'
-    },
-    {
-      label: '操作状态',
-      field: 'status',
-      placeholder: '请输入操作状态'
-    },
-    {
-      label: '错误消息',
-      field: 'errorMsg',
-      placeholder: '请输入错误消息'
-    },
-    {
-      label: '操作时间',
-      field: 'operTime',
-      type: 'date-picker',
-      placeholder: '请选择操作时间'
-    },
-    {
-      label: '消耗时间',
-      field: 'costTime',
-      placeholder: '请输入消耗时间'
     }
-  ]
-}
+  }
+])
 </script>

src/views/system/dept/index.vue

@@ -11,38 +11,15 @@
     >
       <!-- 表格 header 按钮 -->
       <template #tableHeader>
-        <el-button type="primary" v-auth="['system:dept:add']" :icon="CirclePlus" @click="openDialog(1, '部门新增')">
-          新增
-        </el-button>
+        <el-button type="primary" v-auth="['system:dept:add']" :icon="CirclePlus" @click="openDialog(1, '部门新增')"> 新增 </el-button>
       </template>
       <!-- 表格操作 -->
       <template #operation="scope">
-        <el-button
-          type="primary"
-          link
-          :icon="EditPen"
-          v-auth="['system:dept:edit']"
-          @click="openDialog(2, '部门编辑', scope.row)"
-        >
-          编辑
-        </el-button>
-        <el-button
-          type="primary"
-          link
-          :icon="CirclePlus"
-          v-auth="['system:dept:add']"
-          @click="openDialog(4, '部门新增', scope.row)"
-        >
+        <el-button type="primary" link :icon="EditPen" v-auth="['system:dept:edit']" @click="openDialog(2, '部门编辑', scope.row)"> 编辑 </el-button>
+        <el-button type="primary" link :icon="CirclePlus" v-auth="['system:dept:add']" @click="openDialog(4, '部门新增', scope.row)">
           新增
         </el-button>
-        <el-button
-          v-if="scope.row.parentId != 0"
-          type="primary"
-          link
-          :icon="Delete"
-          v-auth="['system:dept:remove']"
-          @click="deleteDept(scope.row)"
-        >
+        <el-button v-if="scope.row.parentId != 0" type="primary" link :icon="Delete" v-auth="['system:dept:remove']" @click="deleteDept(scope.row)">
           删除
         </el-button>
       </template>
@@ -57,11 +34,11 @@ import { ref, reactive } from 'vue'
 import { useHandleData } from '@/hooks/useHandleData'
 import ProTable from '@/components/ProTable/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
-import FormDialog from '@/components/DialogOld/form.vue'
+import FormDialog from '@/components/FormDialog/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { Delete, EditPen, CirclePlus } from '@element-plus/icons-vue'
 import { handleTree } from '@/utils/common'
-import { listDeptApi, delDeptApi, addDeptApi, updateDeptApi, getDeptApi } from '@/api/modules/system/dept'
+import { listDeptApi, delDeptApi, addDeptApi, updateDeptApi } from '@/api/modules/system/dept'
 import { getDictsApi } from '@/api/modules/system/dictData'
 
 // ProTable 实例
@@ -74,41 +51,35 @@ const deptOptions = ref<any[]>([])
 const dataCallback = (res: any) => {
   const data = handleTree(res, 'deptId')
   deptOptions.value = data
-  setFieldList()
+  setItemsOptions()
   return data
 }
 
 // 删除用户信息
 const deleteDept = async (params: any) => {
-  await useHandleData(delDeptApi, { id: [params.id] }, `删除【${params.deptName}】部门`)
+  await useHandleData(delDeptApi, params.deptId, `删除【${params.deptName}】部门`)
   proTable.value?.getTableList()
 }
 
 const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
 // 打开弹框的功能
 const openDialog = async (type: number, title: string, row?: any) => {
-  let res = { data: {} }
-  if (row?.deptId) {
-    res = await getDeptApi(row?.deptId || null)
-  }
-
   // 重置表单项
-  setFieldList()
+  setItemsOptions()
   if (row?.parentId == 0 && type == 2) {
-    fieldList.splice(0, 1)
+    itemsOptions.splice(0, 1)
   }
   // 增加子节点
-  if (type == 4 && row?.parentId) {
-    res.data = {
-      parentId: row?.parentId
-    }
+  if (type == 4) {
+    row = { parentId: row?.deptId }
   }
+
   const params = {
     title,
-    width: 500,
+    width: 700,
     isEdit: type !== 3,
-    fieldList: fieldList,
-    model: type == 1 ? {} : res.data,
+    itemsOptions: itemsOptions,
+    model: type == 1 ? {} : row,
     api: type == 1 || type == 4 ? addDeptApi : updateDeptApi,
     getTableList: proTable.value?.getTableList
   }
@@ -117,7 +88,6 @@ const openDialog = async (type: number, title: string, row?: any) => {
 
 // 表格配置项
 const columns = reactive<ColumnProps<any>[]>([
-  // { type: 'selection', fixed: 'left', width: 70 },
   {
     prop: 'deptName',
     label: '部门名称',
@@ -150,71 +120,83 @@ const columns = reactive<ColumnProps<any>[]>([
   },
   { prop: 'operation', label: '操作' }
 ])
-let fieldList: Form.FieldItem[] = []
-const setFieldList = () => {
-  fieldList = [
+
+// 表单配置项
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
     {
       label: '上级部门',
-      field: 'parentId',
-      enum: deptOptions.value,
-      type: 'select-tree',
-      rules: [{ required: true, message: '请选择上级部门', trigger: 'change' }],
-      options: {
+      prop: 'parentId',
+      compOptions: {
+        enum: deptOptions.value,
+        elTagName: 'tree-select',
         valueKey: 'deptId',
-        labelKey: 'deptName',
-        children: 'children'
-      },
-      placeholder: '请输入上级部门'
+        props: {
+          value: 'deptId',
+          label: 'deptName'
+        },
+        placeholder: '请输入上级部门'
+      }
     },
     {
       label: '部门名称',
-      field: 'deptName',
+      prop: 'deptName',
       rules: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
       span: 12,
-      placeholder: '请输入部门名称'
+      compOptions: {
+        placeholder: '请输入部门名称'
+      }
     },
     {
       label: '显示顺序',
-      field: 'orderNum',
-      type: 'input-number',
+      prop: 'orderNum',
       rules: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
-      options: {
-        min: 0
-      },
       span: 12,
-      placeholder: '请输入显示顺序'
+      compOptions: {
+        value: 0,
+        elTagName: 'input-number',
+        min: 0
+      }
     },
     {
       label: '负责人',
-      field: 'leader',
+      prop: 'leader',
       span: 12,
-      placeholder: '请输入负责人'
+      compOptions: {
+        placeholder: '请输入负责人'
+      }
     },
     {
       label: '联系电话',
-      field: 'phone',
+      prop: 'phone',
       span: 12,
       rules: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
-      placeholder: '请输入联系电话'
+      compOptions: {
+        placeholder: '请输入联系电话'
+      }
     },
     {
       label: '邮箱',
-      field: 'email',
+      prop: 'email',
       span: 12,
       rules: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
-      placeholder: '请输入邮箱'
+      compOptions: {
+        placeholder: '请输入邮箱'
+      }
     },
     {
       label: '部门状态',
-      field: 'status',
-      enum: () => getDictsApi('sys_normal_disable'),
-      type: 'radio',
-      options: {
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
-      },
+      prop: 'status',
       span: 12,
-      placeholder: '请选择部门状态'
+      compOptions: {
+        value: '0',
+        elTagName: 'radio-group',
+        enum: () => getDictsApi('sys_normal_disable'),
+        labelKey: 'dictLabel',
+        valueKey: 'dictValue',
+        placeholder: '请选择部门状态'
+      }
     }
   ]
 }

src/views/system/dict/data.vue

@@ -1,12 +1,10 @@
 <template>
   <div class="table-box">
-    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :init-param="initParam" :data-callback="dataCallback">
+    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :init-param="initParam">
       <!-- 表格 header 按钮 -->
       <template #tableHeader="scope">
         <el-button type="primary" v-auth="['system/dict:data:add']" @click="openDialog(1, '字典数据新增')">新增</el-button>
-        <el-button type="primary" v-auth="['system/dict:data:export']" :icon="Download" plain @click="downloadFile">
-          导出
-        </el-button>
+        <el-button type="primary" v-auth="['system/dict:data:export']" :icon="Download" plain @click="downloadFile"> 导出 </el-button>
         <el-button
           type="danger"
           v-auth="['system:user:remove']"
@@ -20,27 +18,13 @@
       </template>
       <!-- 表格操作 -->
       <template #operation="scope">
-        <el-button
-          type="primary"
-          link
-          :icon="View"
-          v-auth="['system/dict:data:query']"
-          @click="openDialog(3, '字典数据查看', scope.row)"
-        >
+        <el-button type="primary" link :icon="View" v-auth="['system/dict:data:query']" @click="openDialog(3, '字典数据查看', scope.row)">
           查看
         </el-button>
-        <el-button
-          type="primary"
-          link
-          :icon="EditPen"
-          v-auth="['system/dict:data:edit']"
-          @click="openDialog(2, '字典数据编辑', scope.row)"
-        >
+        <el-button type="primary" link :icon="EditPen" v-auth="['system/dict:data:edit']" @click="openDialog(2, '字典数据编辑', scope.row)">
           编辑
         </el-button>
-        <el-button type="primary" link :icon="Delete" v-auth="['system/dict:data:remove']" @click="deleteDictData(scope.row)">
-          删除
-        </el-button>
+        <el-button type="primary" link :icon="Delete" v-auth="['system/dict:data:remove']" @click="deleteDictData(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
     <FormDialog ref="formDialogRef" />
@@ -55,18 +39,10 @@ import { useDownload } from '@/hooks/useDownload'
 import { ElMessageBox } from 'element-plus'
 import ProTable from '@/components/ProTable/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
-import FormDialog from '@/components/DialogOld/form.vue'
+import FormDialog from '@/components/FormDialog/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { Delete, EditPen, Download, View } from '@element-plus/icons-vue'
-import {
-  listDataApi,
-  delDataApi,
-  addDataApi,
-  updateDataApi,
-  getDataApi,
-  exportApi,
-  getDictsApi
-} from '@/api/modules/system/dictData'
+import { listDataApi, delDataApi, addDataApi, updateDataApi, getDataApi, exportApi } from '@/api/modules/system/dictData'
 import { getDictApi } from '@/api/modules/system/dict'
 
 import { useRoute } from 'vue-router'
@@ -85,10 +61,7 @@ const listClassOptions = ref([
   { value: 'warning', label: '警告' },
   { value: 'danger', label: '危险' }
 ])
-// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
-const dataCallback = (data: any) => {
-  return data
-}
+
 const defaultDictType = ref('')
 const getTableList = async (params: any) => {
   const res = await getDictApi(route.params.dictId)
@@ -98,13 +71,13 @@ const getTableList = async (params: any) => {
 }
 // 删除用户信息
 const deleteDictData = async (params: any) => {
-  await useHandleData(delDataApi, { id: [params.dictId] }, `删除【${params.dictName}】字典数据`)
+  await useHandleData(delDataApi, params.dictCode, `删除【${params.dictName}】字典数据`)
   proTable.value?.getTableList()
 }
 
 // 批量删除用户信息
-const batchDelete = async (id: string[]) => {
-  await useHandleData(delDataApi, { id }, '删除所选字典数据信息')
+const batchDelete = async (ids: string[]) => {
+  await useHandleData(delDataApi, ids, '删除所选字典数据信息')
   proTable.value?.clearSelection()
   proTable.value?.getTableList()
 }
@@ -123,12 +96,13 @@ const openDialog = async (type: number, title: string, row?: any) => {
   if (row?.dictCode) {
     res = await getDataApi(row?.dictCode || null)
   }
+  setItemsOptions()
   const params = {
     title,
     width: 500,
     isEdit: type !== 3,
-    fieldList: fieldList,
-    model: type == 1 ? { dictType: defaultDictType.value } : res.data,
+    itemsOptions: itemsOptions,
+    model: type == 1 ? { dictType: defaultDictType.value, version: 0 } : { ...res.data, version: 0 },
     api: type == 1 ? addDataApi : updateDataApi,
     getTableList: proTable.value?.getTableList
   }
@@ -171,16 +145,6 @@ const columns = reactive<ColumnProps<any>[]>([
     },
     width: 120
   },
-  {
-    prop: 'status',
-    label: '状态',
-    tag: true,
-    enum: () => getDictsApi('sys_normal_disable'),
-    search: {
-      el: 'tree-select'
-    },
-    fieldNames: { label: 'dictLabel', value: 'dictValue' }
-  },
   {
     prop: 'createTime',
     label: '创建时间',
@@ -193,66 +157,70 @@ const columns = reactive<ColumnProps<any>[]>([
   },
   { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
 ])
-const fieldList: Form.FieldItem[] = [
-  {
-    label: '标签类型',
-    field: 'dictType',
-    disabled: true
-  },
-  {
-    label: '数据标签',
-    field: 'dictLabel',
-    rules: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
-    placeholder: '请输入数据标签'
-  },
-  {
-    label: '数据键值',
-    field: 'dictValue',
-    rules: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
-    placeholder: '请输入数据键值'
-  },
-  {
-    label: '显示排序',
-    field: 'dictSort',
-    rules: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
-    type: 'input-number',
-    options: {
-      min: 0
+
+// 表单配置项
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
+    {
+      label: '标签类型',
+      prop: 'dictType',
+      compOptions: {
+        disabled: true
+      }
     },
-    placeholder: '请输入显示排序'
-  },
-  {
-    label: '样式属性',
-    field: 'cssClass',
-    placeholder: '请输入样式属性'
-  },
-  {
-    label: '回显样式',
-    field: 'listClass',
-    type: 'select',
-    enum: listClassOptions,
-    options: {
-      valueKey: 'value',
-      labelKey: 'label'
+    {
+      label: '数据标签',
+      prop: 'dictLabel',
+      rules: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入数据标签'
+      }
     },
-    placeholder: '请输入回显样式'
-  },
-  {
-    label: '状态',
-    field: 'status',
-    enum: () => getDictsApi('sys_normal_disable'),
-    type: 'radio',
-    options: {
-      labelKey: 'dictLabel',
-      valueKey: 'dictValue'
+    {
+      label: '数据键值',
+      prop: 'dictValue',
+      rules: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入数据键值'
+      }
     },
-    placeholder: '请选择状态'
-  },
-  {
-    label: '备注',
-    field: 'remark',
-    type: 'textarea',
-    placeholder: '请输入备注'
-  }
-]
+    {
+      label: '显示排序',
+      prop: 'dictSort',
+      rules: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
+      compOptions: {
+        elTagName: 'input-number',
+        min: 0,
+        placeholder: '请输入显示排序'
+      }
+    },
+    {
+      label: '样式属性',
+      prop: 'cssClass',
+      compOptions: {
+        placeholder: '请输入样式属性'
+      }
+    },
+    {
+      label: '回显样式',
+      prop: 'listClass',
+      compOptions: {
+        elTagName: 'select',
+        enum: listClassOptions,
+        valueKey: 'value',
+        labelKey: 'label',
+        placeholder: '请输入回显样式'
+      }
+    },
+    {
+      label: '备注',
+      prop: 'remark',
+      compOptions: {
+        type: 'textarea',
+        placeholder: '请输入备注'
+      }
+    }
+  ]
+}
 </script>

src/views/system/dict/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="table-box">
-    <ProTable ref="proTable" :columns="columns" :request-api="listDictApi" :init-param="initParam" :data-callback="dataCallback">
+    <ProTable ref="proTable" :columns="columns" :request-api="listDictApi">
       <!-- 表格 header 按钮 -->
       <template #tableHeader="scope">
         <el-button type="primary" v-auth="['system:dict:add']" @click="openDialog(1, '字典类型新增')">新增</el-button>
@@ -18,18 +18,10 @@
       </template>
       <!-- 表格操作 -->
       <template #operation="scope">
-        <el-button
-          type="primary"
-          link
-          :icon="EditPen"
-          v-auth="['system:dict:edit']"
-          @click="openDialog(2, '字典类型编辑', scope.row)"
-        >
+        <el-button type="primary" link :icon="EditPen" v-auth="['system:dict:edit']" @click="openDialog(2, '字典类型编辑', scope.row)">
           编辑
         </el-button>
-        <el-button type="primary" link :icon="Delete" v-auth="['system:dict:remove']" @click="deleteDict(scope.row)">
-          删除
-        </el-button>
+        <el-button type="primary" link :icon="Delete" v-auth="['system:dict:remove']" @click="deleteDict(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
     <FormDialog ref="formDialogRef" />
@@ -45,32 +37,23 @@ import { useRouter } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
 import ProTable from '@/components/ProTable/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
-import FormDialog from '@/components/DialogOld/form.vue'
+import FormDialog from '@/components/FormDialog/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { Delete, EditPen, Download } from '@element-plus/icons-vue'
 import { listDictApi, delDictApi, addDictApi, updateDictApi, exportApi, getDictApi } from '@/api/modules/system/dict'
-import { getDictsApi } from '@/api/modules/system/dictData'
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
 
-// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
-const initParam = reactive({})
-
-// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
-const dataCallback = (data: any) => {
-  return data
-}
-
 // 删除用户信息
 const deleteDict = async (params: any) => {
-  await useHandleData(delDictApi, { id: [params.dictId] }, `删除【${params.dictName}】字典类型`)
+  await useHandleData(delDictApi, params.dictId, `删除【${params.dictName}】字典类型`)
   proTable.value?.getTableList()
 }
 
 // 批量删除用户信息
-const batchDelete = async (id: string[]) => {
-  await useHandleData(delDictApi, { id }, '删除所选字典类型信息')
+const batchDelete = async (ids: string[]) => {
+  await useHandleData(delDictApi, ids, '删除所选字典类型信息')
   proTable.value?.clearSelection()
   proTable.value?.getTableList()
 }
@@ -89,12 +72,13 @@ const openDialog = async (type: number, title: string, row?: any) => {
   if (row?.dictId) {
     res = await getDictApi(row?.dictId || null)
   }
+  setItemsOptions()
   const params = {
     title,
     width: 500,
     isEdit: type !== 3,
-    fieldList: fieldList,
-    model: type == 1 ? {} : res.data,
+    itemsOptions: itemsOptions,
+    model: type == 1 ? { version: 0 } : { ...res.data, version: 0 },
     api: type == 1 ? addDictApi : updateDictApi,
     getTableList: proTable.value?.getTableList
   }
@@ -133,17 +117,6 @@ const columns = reactive<ColumnProps<any>[]>([
     },
     width: 150
   },
-  {
-    prop: 'status',
-    label: '状态',
-    tag: true,
-    enum: () => getDictsApi('sys_normal_disable'),
-    search: {
-      el: 'tree-select'
-    },
-    fieldNames: { label: 'dictLabel', value: 'dictValue' },
-    width: 80
-  },
   {
     prop: 'createTime',
     label: '创建时间'
@@ -157,35 +130,35 @@ const columns = reactive<ColumnProps<any>[]>([
   },
   { prop: 'operation', label: '操作', width: 230 }
 ])
-const fieldList: Form.FieldItem[] = [
-  {
-    label: '字典名称',
-    field: 'dictName',
-    rules: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
-    placeholder: '请输入字典名称'
-  },
-  {
-    label: '字典类型',
-    field: 'dictType',
-    rules: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }],
-    placeholder: '请输入字典类型'
-  },
-  {
-    label: '状态',
-    field: 'status',
-    enum: () => getDictsApi('sys_normal_disable'),
-    type: 'radio',
-    options: {
-      labelKey: 'dictLabel',
-      valueKey: 'dictValue'
+
+// 表单配置项
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
+    {
+      label: '字典名称',
+      prop: 'dictName',
+      rules: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入字典名称'
+      }
     },
-    placeholder: '请选择状态'
-  },
-  {
-    label: '备注',
-    field: 'remark',
-    type: 'textarea',
-    placeholder: '请输入备注'
-  }
-]
+    {
+      label: '字典类型',
+      prop: 'dictType',
+      rules: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入字典类型'
+      }
+    },
+    {
+      label: '备注',
+      prop: 'remark',
+      compOptions: {
+        type: 'textarea',
+        placeholder: '请输入备注'
+      }
+    }
+  ]
+}
 </script>

src/views/system/menu/index.vue

@@ -15,35 +15,23 @@
         <el-button type="primary" v-auth="['system:menu:add']" @click="openDialog(1, '菜单新增')">新增</el-button>
       </template>
       <!-- 菜单图标 -->
-      <!-- <template #icon="scope">
+      <template #icon="scope">
         <el-icon :size="18">
           <component :is="scope.row.icon"></component>
         </el-icon>
-      </template> -->
+      </template>
       <!-- 表格操作 -->
       <template #operation="scope">
-        <el-button
-          type="primary"
-          link
-          :icon="EditPen"
-          v-auth="['system:menu:edit']"
-          @click="openDialog(2, '菜单编辑', scope.row)"
-        >
-          编辑
-        </el-button>
-        <el-button type="primary" link :icon="CirclePlus" v-auth="['system:menu:add']" @click="openDialog(1, '菜单新增')">
-          新增
-        </el-button>
-        <el-button type="primary" link :icon="Delete" v-auth="['system:menu:remove']" @click="deleteMenu(scope.row)">
-          删除
-        </el-button>
+        <el-button type="primary" link :icon="EditPen" v-auth="['system:menu:edit']" @click="openDialog(2, '菜单编辑', scope.row)"> 编辑 </el-button>
+        <el-button type="primary" link :icon="CirclePlus" v-auth="['system:menu:add']" @click="openDialog(1, '菜单新增')"> 新增 </el-button>
+        <el-button type="primary" link :icon="Delete" v-auth="['system:menu:remove']" @click="deleteMenu(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
     <FormDialog ref="formDialogRef" />
   </div>
 </template>
 
-<script setup lang="tsx" name="Menu">
+<script setup lang="tsx" name="MenuManage">
 import { ref, reactive } from 'vue'
 import { useHandleData } from '@/hooks/useHandleData'
 import ProTable from '@/components/ProTable/index.vue'
@@ -72,7 +60,7 @@ const dataCallback = (res: any) => {
   const menu: any = { menuId: 0, menuName: '主类目', children: [] }
   menu.children = data
   menuOptions.value.push(menu)
-  setFieldList()
+  setItemsOptions()
   return data
 }
 
@@ -103,7 +91,6 @@ const openDialog = async (type: number, title: string, row?: any) => {
 
 // 表格配置项
 const columns = reactive<ColumnProps<any>[]>([
-  { type: 'selection', fixed: 'left', width: 70 },
   {
     prop: 'menuName',
     label: '菜单名称',
@@ -167,7 +154,7 @@ const columns = reactive<ColumnProps<any>[]>([
   { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
 ])
 let itemsOptions: ProForm.ItemsOptions[] = []
-const setFieldList = () => {
+const setItemsOptions = () => {
   itemsOptions = [
     {
       label: '菜单类型',
@@ -186,6 +173,7 @@ const setFieldList = () => {
       span: 12,
       compOptions: {
         elTagName: 'radio-button',
+        value: '0',
         enum: () => getDictsApi('sys_normal_disable'),
         labelKey: 'dictLabel',
         valueKey: 'dictValue'
@@ -259,6 +247,7 @@ const setFieldList = () => {
       },
       compOptions: {
         elTagName: 'radio-button',
+        value: '0',
         enum: () => getDictsApi('sys_show_hide'),
         labelKey: 'dictLabel',
         valueKey: 'dictValue'

src/views/system/post/index.vue

@@ -1,18 +1,9 @@
 <template>
   <div class="table-box">
-    <ProTable
-      ref="proTable"
-      :columns="columns"
-      row-key="postId"
-      :request-api="listPostApi"
-      :init-param="initParam"
-      :data-callback="dataCallback"
-    >
+    <ProTable ref="proTable" :columns="columns" row-key="postId" :request-api="listPostApi">
       <!-- 表格 header 按钮 -->
       <template #tableHeader="scope">
-        <el-button type="primary" v-auth="['system:post:add']" :icon="CirclePlus" @click="openDialog(1, '岗位信息新增')">
-          新增
-        </el-button>
+        <el-button type="primary" v-auth="['system:post:add']" :icon="CirclePlus" @click="openDialog(1, '岗位信息新增')"> 新增 </el-button>
         <el-button type="primary" v-auth="['system:post:import']" :icon="Upload" plain @click="batchAdd"> 导入 </el-button>
         <el-button type="primary" v-auth="['system:post:export']" :icon="Download" plain @click="downloadFile"> 导出 </el-button>
         <el-button
@@ -28,27 +19,13 @@
       </template>
       <!-- 表格操作 -->
       <template #operation="scope">
-        <el-button
-          type="primary"
-          link
-          :icon="View"
-          v-auth="['system:post:query']"
-          @click="openDialog(3, '岗位信息查看', scope.row)"
-        >
+        <el-button type="primary" link :icon="View" v-auth="['system:post:query']" @click="openDialog(3, '岗位信息查看', scope.row)">
           查看
         </el-button>
-        <el-button
-          type="primary"
-          link
-          :icon="EditPen"
-          v-auth="['system:post:edit']"
-          @click="openDialog(2, '岗位信息编辑', scope.row)"
-        >
+        <el-button type="primary" link :icon="EditPen" v-auth="['system:post:edit']" @click="openDialog(2, '岗位信息编辑', scope.row)">
           编辑
         </el-button>
-        <el-button type="primary" link :icon="Delete" v-auth="['system:post:remove']" @click="deletePost(scope.row)">
-          删除
-        </el-button>
+        <el-button type="primary" link :icon="Delete" v-auth="['system:post:remove']" @click="deletePost(scope.row)"> 删除 </el-button>
       </template>
     </ProTable>
     <FormDialog ref="formDialogRef" />
@@ -56,14 +33,14 @@
   </div>
 </template>
 
-<script setup lang="tsx" name="Post">
+<script setup lang="tsx" name="PostManage">
 import { ref, reactive } from 'vue'
 import { useHandleData } from '@/hooks/useHandleData'
 import { useDownload } from '@/hooks/useDownload'
 import { ElMessageBox } from 'element-plus'
 import ProTable from '@/components/ProTable/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
-import FormDialog from '@/components/DialogOld/form.vue'
+import FormDialog from '@/components/FormDialog/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { Delete, EditPen, Download, Upload, View, CirclePlus } from '@element-plus/icons-vue'
 import {
@@ -76,27 +53,20 @@ import {
   exportApi,
   getPostApi
 } from '@/api/modules/system/post'
+import { getDictsApi } from '@/api/modules/system/dictData'
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
 
-// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
-const initParam = reactive({ type: 1 })
-
-// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
-const dataCallback = (data: any) => {
-  return data
-}
-
 // 删除岗位信息信息
 const deletePost = async (params: any) => {
-  await useHandleData(delPostApi, { id: [params.postId] }, `删除【${params.id}】岗位信息`)
+  await useHandleData(delPostApi, params.postId, `删除【${params.postId}】岗位信息`)
   proTable.value?.getTableList()
 }
 
 // 批量删除岗位信息信息
-const batchDelete = async (id: string[]) => {
-  await useHandleData(delPostApi, { id }, '删除所选岗位信息信息')
+const batchDelete = async (ids: string[]) => {
+  await useHandleData(delPostApi, ids, '删除所选岗位信息信息')
   proTable.value?.clearSelection()
   proTable.value?.getTableList()
 }
@@ -128,12 +98,12 @@ const openDialog = async (type: number, title: string, row?: any) => {
     res = await getPostApi(row?.postId || null)
   }
   // 重置表单
-  setFieldList()
+  setItemsOptions()
   const params = {
     title,
     width: 580,
     isEdit: type !== 3,
-    fieldList: fieldList,
+    itemsOptions: itemsOptions,
     model: type == 1 ? {} : res.data,
     api: type == 1 ? addPostApi : updatePostApi,
     getTableList: proTable.value?.getTableList
@@ -221,38 +191,54 @@ const columns = reactive<ColumnProps<any>[]>([
   },
   { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
 ])
+
 // 表单配置项
-let fieldList: Form.FieldItem[] = []
-const setFieldList = () => {
-  fieldList = [
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
     {
       label: '岗位编码',
-      field: 'postCode',
+      prop: 'postCode',
       rules: [{ required: true, message: '岗位编码不能为空', trigger: 'blur' }],
-      placeholder: '请输入岗位编码'
+      compOptions: {
+        placeholder: '请输入岗位编码'
+      }
     },
     {
       label: '岗位名称',
-      field: 'postName',
+      prop: 'postName',
       rules: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
-      placeholder: '请输入岗位名称'
+      compOptions: {
+        placeholder: '请输入岗位名称'
+      }
     },
     {
       label: '显示顺序',
-      field: 'postSort',
+      prop: 'postSort',
       rules: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }],
-      placeholder: '请输入显示顺序'
+      compOptions: {
+        elTagName: 'input-number',
+        min: 0
+      }
     },
     {
       label: '状态',
-      field: 'status',
+      prop: 'status',
       rules: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
-      placeholder: '请输入状态'
+      compOptions: {
+        elTagName: 'radio-group',
+        value: '0',
+        enum: () => getDictsApi('sys_normal_disable'),
+        labelKey: 'dictLabel',
+        valueKey: 'dictValue'
+      }
     },
     {
       label: '备注',
-      field: 'remark',
-      placeholder: '请输入备注'
+      prop: 'remark',
+      compOptions: {
+        placeholder: '请输入备注'
+      }
     }
   ]
 }

src/views/system/role/authRole.vue

@@ -1,317 +0,0 @@
-<template>
-  <div class="table-box">
-    <ProTable
-      ref="proTable"
-      :columns="columns"
-      row-key="roleId"
-      :request-api="listRoleApi"
-      :init-param="initParam"
-      :data-callback="dataCallback"
-    >
-      <!-- 表格 header 按钮 -->
-      <template #tableHeader="scope">
-        <el-button type="primary" v-auth="['system:role:add']" :icon="CirclePlus" @click="openDialog(1, '角色信息新增')">
-          新增
-        </el-button>
-        <el-button type="primary" v-auth="['system:role:import']" :icon="Upload" plain @click="batchAdd"> 导入 </el-button>
-        <el-button type="primary" v-auth="['system:role:export']" :icon="Download" plain @click="downloadFile"> 导出 </el-button>
-        <el-button
-          type="danger"
-          v-auth="['system:user:remove']"
-          :icon="Delete"
-          plain
-          :disabled="!scope.isSelected"
-          @click="batchDelete(scope.selectedListIds)"
-        >
-          批量删除
-        </el-button>
-      </template>
-      <!-- 表格操作 -->
-      <template #operation="scope">
-        <el-button
-          type="primary"
-          link
-          :icon="View"
-          v-auth="['system:role:query']"
-          @click="openDialog(3, '角色信息查看', scope.row)"
-        >
-          查看
-        </el-button>
-        <el-button
-          type="primary"
-          link
-          :icon="EditPen"
-          v-auth="['system:role:edit']"
-          @click="openDialog(2, '角色信息编辑', scope.row)"
-        >
-          编辑
-        </el-button>
-        <el-button type="primary" link :icon="Delete" v-auth="['system:role:remove']" @click="deleteRole(scope.row)">
-          删除
-        </el-button>
-      </template>
-    </ProTable>
-    <FormDialog ref="formDialogRef" />
-    <ImportExcel ref="dialogRef" />
-  </div>
-</template>
-
-<script setup lang="tsx" name="Role">
-import { ref, reactive } from 'vue'
-import { useHandleData } from '@/hooks/useHandleData'
-import { useDownload } from '@/hooks/useDownload'
-import { ElMessageBox } from 'element-plus'
-import ProTable from '@/components/ProTable/index.vue'
-import ImportExcel from '@/components/ImportExcel/index.vue'
-import FormDialog from '@/components/DialogOld/form.vue'
-import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
-import { Delete, EditPen, Download, Upload, View, CirclePlus } from '@element-plus/icons-vue'
-import {
-  listRoleApi,
-  delRoleApi,
-  addRoleApi,
-  updateRoleApi,
-  importTemplateApi,
-  importDataApi,
-  exportApi,
-  getRoleApi
-} from '@/api/modules/system/role'
-
-// ProTable 实例
-const proTable = ref<ProTableInstance>()
-
-// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
-const initParam = reactive({ type: 1 })
-
-// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
-const dataCallback = (data: any) => {
-  const page = proTable.value!.pageable
-  return {
-    list: data.data,
-    total: data.total,
-    pageNum: page.pageNum,
-    pageSize: page.pageSize
-  }
-}
-
-// 删除角色信息信息
-const deleteRole = async (params: any) => {
-  await useHandleData(delRoleApi, { id: [params.roleId] }, `删除【${params.id}】角色信息`)
-  proTable.value?.getTableList()
-}
-
-// 批量删除角色信息信息
-const batchDelete = async (id: string[]) => {
-  await useHandleData(delRoleApi, { id }, '删除所选角色信息信息')
-  proTable.value?.clearSelection()
-  proTable.value?.getTableList()
-}
-
-// 导出角色信息列表
-const downloadFile = async () => {
-  ElMessageBox.confirm('确认导出角色信息数据?', '温馨提示', { type: 'warning' }).then(() =>
-    useDownload(exportApi, '角色信息列表', proTable.value?.searchParam)
-  )
-}
-
-// 批量添加角色信息
-const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
-const batchAdd = () => {
-  const params = {
-    title: '角色信息',
-    tempApi: importTemplateApi,
-    importApi: importDataApi,
-    getTableList: proTable.value?.getTableList
-  }
-  dialogRef.value?.acceptParams(params)
-}
-
-const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
-// 打开弹框的功能
-const openDialog = async (type: number, title: string, row?: any) => {
-  let res = { data: {} }
-  if (row?.roleId) {
-    res = await getRoleApi(row?.roleId || null)
-  }
-  // 重置表单
-  setFieldList()
-  const params = {
-    title,
-    width: 580,
-    isEdit: type !== 3,
-    fieldList: fieldList,
-    model: type == 1 ? {} : res.data,
-    api: type == 1 ? addRoleApi : updateRoleApi,
-    getTableList: proTable.value?.getTableList
-  }
-  formDialogRef.value?.openDialog(params)
-}
-
-// 表格配置项
-const columns = reactive<ColumnProps<any>[]>([
-  { type: 'selection', fixed: 'left', width: 70 },
-  { prop: 'roleId', label: '角色ID' },
-  {
-    prop: 'roleName',
-    label: '角色名称',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
-  {
-    prop: 'roleKey',
-    label: '角色权限字符串',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
-  {
-    prop: 'roleSort',
-    label: '显示顺序',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
-  {
-    prop: 'dataScope',
-    label: '数据范围',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
-  {
-    prop: 'menuCheckStrictly',
-    label: '菜单树选择项是否关联显示',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
-  {
-    prop: 'deptCheckStrictly',
-    label: '部门树选择项是否关联显示',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
-  {
-    prop: 'status',
-    label: '角色状态',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
-  {
-    prop: 'delFlag',
-    label: '删除标志',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
-  {
-    prop: 'createBy',
-    label: '创建者',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
-  {
-    prop: 'createTime',
-    label: '创建时间',
-    search: {
-      el: 'date-picker',
-      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
-    },
-    width: 120
-  },
-  {
-    prop: 'updateBy',
-    label: '更新者',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
-  {
-    prop: 'updateTime',
-    label: '更新时间',
-    search: {
-      el: 'date-picker',
-      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
-    },
-    width: 120
-  },
-  {
-    prop: 'remark',
-    label: '备注',
-    search: {
-      el: 'input'
-    },
-    width: 120
-  },
-  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
-])
-// 表单配置项
-let fieldList: Form.FieldItem[] = []
-const setFieldList = () => {
-  fieldList = [
-    {
-      label: '角色名称',
-      field: 'roleName',
-      rules: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
-      placeholder: '请输入角色名称'
-    },
-    {
-      label: '角色权限字符串',
-      field: 'roleKey',
-      rules: [{ required: true, message: '角色权限字符串不能为空', trigger: 'blur' }],
-      placeholder: '请输入角色权限字符串'
-    },
-    {
-      label: '显示顺序',
-      field: 'roleSort',
-      rules: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }],
-      placeholder: '请输入显示顺序'
-    },
-    {
-      label: '数据范围',
-      field: 'dataScope',
-      placeholder: '请输入数据范围'
-    },
-    {
-      label: '菜单树选择项是否关联显示',
-      field: 'menuCheckStrictly',
-      placeholder: '请输入菜单树选择项是否关联显示'
-    },
-    {
-      label: '部门树选择项是否关联显示',
-      field: 'deptCheckStrictly',
-      placeholder: '请输入部门树选择项是否关联显示'
-    },
-    {
-      label: '角色状态',
-      field: 'status',
-      rules: [{ required: true, message: '角色状态不能为空', trigger: 'blur' }],
-      placeholder: '请输入角色状态'
-    },
-    {
-      label: '删除标志',
-      field: 'delFlag',
-      placeholder: '请输入删除标志'
-    },
-    {
-      label: '备注',
-      field: 'remark',
-      placeholder: '请输入备注'
-    }
-  ]
-}
-</script>

src/views/system/role/authUser.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="table-box">
+    <ProTable ref="proTable" :columns="columns" row-key="userId" :request-api="allocatedUserListApi" :init-param="initParam">
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader="scope">
+        <el-button type="primary" v-auth="['system:role:add']" :icon="CirclePlus" @click="addUser"> 添加用户 </el-button>
+        <el-button
+          type="danger"
+          v-auth="['system:role:import']"
+          :disabled="!scope.isSelected"
+          :icon="CircleClose"
+          plain
+          @click="cancelAuthUserAll(scope.selectedListIds)"
+        >
+          批量取消授权
+        </el-button>
+        <el-button type="warning" v-auth="['system:role:export']" :icon="Close" plain @click="closeCurrentTab"> 关闭 </el-button>
+      </template>
+      <!-- 表格操作 -->
+      <template #operation="scope">
+        <el-button type="primary" link :icon="CircleClose" v-auth="['system:role:query']" @click="cancelAuthUser(scope.row)"> 取消授权 </el-button>
+      </template>
+    </ProTable>
+    <TableDialog ref="tableDialogRef" @submit-form="submitForm" />
+  </div>
+</template>
+
+<script setup lang="tsx" name="Role">
+import { ref, reactive } from 'vue'
+import { useHandleData } from '@/hooks/useHandleData'
+import ProTable from '@/components/ProTable/index.vue'
+import TableDialog from '@/components/TableDialog/index.vue'
+import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
+import { CircleClose, Close, CirclePlus } from '@element-plus/icons-vue'
+import {
+  allocatedUserListApi,
+  unallocatedUserListApi,
+  authUserSelectAllApi,
+  authUserCancelApi,
+  authUserCancelAllApi
+} from '@/api/modules/system/role'
+import { useRoute } from 'vue-router'
+import { useTabsStore } from '@/stores/modules/tabs'
+import { getDictsApi } from '@/api/modules/system/dictData'
+const tabStore = useTabsStore()
+const route = useRoute()
+
+// ProTable 实例
+const proTable = ref<ProTableInstance>()
+
+// 如果表格需要初始化请求参数
+const initParam = reactive({ roleId: route.params.roleId })
+
+// 批量取消用户授权
+const cancelAuthUserAll = async (ids: string[]) => {
+  await useHandleData(authUserCancelAllApi, { userIds: ids, roleId: route.params.roleId }, '删除所选角色信息信息')
+  proTable.value?.clearSelection()
+  proTable.value?.getTableList()
+}
+
+// 取消用户授权
+const cancelAuthUser = async (params: any) => {
+  await useHandleData(authUserCancelApi, { userId: params.userId, roleId: route.params.roleId }, `删除【${params.userName}】角色信息`)
+  proTable.value?.getTableList()
+}
+
+// 批量添加
+const tableDialogRef = ref<InstanceType<typeof TableDialog> | null>(null)
+const addUser = () => {
+  const params = {
+    title: '选择用户',
+    width: 880,
+    toolButton: false,
+    columns: subColumns,
+    initParam: { roleId: route.params.roleId },
+    apiParam: val => {
+      const userIds = val.map((item: any) => item.userId)
+      return {
+        userIds,
+        roleId: route.params.roleId
+      }
+    },
+    rowKey: 'userId',
+    api: authUserSelectAllApi,
+    getTableList: unallocatedUserListApi,
+    backTableList: allocatedUserListApi
+  }
+  tableDialogRef.value?.openDialog(params)
+}
+
+// 表格弹框提交
+const submitForm = () => {
+  proTable.value?.getTableList()
+}
+
+const closeCurrentTab = () => {
+  if (route.meta.affix) return
+  tabStore.removeTabs(route.fullPath)
+}
+
+// 表格配置项
+const columns = reactive<ColumnProps<any>[]>([
+  { type: 'selection', fixed: 'left', width: 70 },
+  {
+    prop: 'userName',
+    label: '用户名称',
+    search: {
+      el: 'input'
+    }
+  },
+  {
+    prop: 'nickName',
+    label: '角色昵称'
+  },
+  {
+    prop: 'email',
+    label: '邮箱'
+  },
+  {
+    prop: 'phonenumber',
+    label: '手机',
+    search: {
+      el: 'input'
+    }
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    tag: true,
+    enum: () => getDictsApi('sys_normal_disable'),
+    fieldNames: { label: 'dictLabel', value: 'dictValue' }
+  },
+  {
+    prop: 'createTime',
+    label: '创建时间',
+    search: {
+      el: 'date-picker',
+      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
+    },
+    width: 120
+  },
+  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
+])
+
+// 表格配置项
+const subColumns: ColumnProps[] = [
+  { type: 'selection', fixed: 'left', width: 60 },
+  {
+    label: '用户名称',
+    prop: 'userName',
+    search: {
+      el: 'input'
+    }
+  },
+  {
+    label: '用户昵称',
+    prop: 'nickName'
+  },
+  {
+    label: '邮箱',
+    prop: 'email'
+  },
+  {
+    label: '手机',
+    prop: 'phonenumber'
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    tag: true,
+    enum: () => getDictsApi('sys_normal_disable'),
+    fieldNames: { label: 'dictLabel', value: 'dictValue' }
+  },
+  {
+    prop: 'createTime',
+    label: '创建时间'
+  }
+]
+</script>

src/views/system/role/index.scss

@@ -0,0 +1,8 @@
+/* tree border */
+.tree-border {
+  width: 100%;
+  margin-top: 5px;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 4px;
+}

src/views/system/role/index.vue

@@ -1,18 +1,9 @@
 <template>
   <div class="table-box">
-    <ProTable
-      ref="proTable"
-      :columns="columns"
-      row-key="roleId"
-      :request-api="listRoleApi"
-      :init-param="initParam"
-      :data-callback="dataCallback"
-    >
+    <ProTable ref="proTable" :columns="columns" row-key="roleId" :request-api="listRoleApi">
       <!-- 表格 header 按钮 -->
       <template #tableHeader="scope">
-        <el-button type="primary" v-auth="['system:role:add']" :icon="CirclePlus" @click="openDialog(1, '角色信息新增')">
-          新增
-        </el-button>
+        <el-button type="primary" v-auth="['system:role:add']" :icon="CirclePlus" @click="openDialog(1, '角色信息新增')"> 新增 </el-button>
         <el-button type="primary" v-auth="['system:role:import']" :icon="Upload" plain @click="batchAdd"> 导入 </el-button>
         <el-button type="primary" v-auth="['system:role:export']" :icon="Download" plain @click="downloadFile"> 导出 </el-button>
         <el-button
@@ -30,42 +21,98 @@
       <template #operation="scope">
         <el-button
           type="primary"
+          v-if="scope.row.roleId !== 1"
           link
-          :icon="View"
-          v-auth="['system:role:query']"
-          @click="openDialog(3, '角色信息查看', scope.row)"
+          :icon="EditPen"
+          v-auth="['system:role:edit']"
+          @click="openDialog(2, '角色编辑', scope.row)"
         >
-          查看
+          编辑
+        </el-button>
+        <el-button type="primary" v-if="scope.row.roleId !== 1" link :icon="Delete" v-auth="['system:role:remove']" @click="deleteRole(scope.row)">
+          删除
         </el-button>
         <el-button
           type="primary"
+          v-if="scope.row.roleId !== 1"
           link
-          :icon="EditPen"
+          :icon="CircleCheck"
           v-auth="['system:role:edit']"
-          @click="openDialog(2, '角色信息编辑', scope.row)"
+          @click="openDataDialog(3, '数据权限', scope.row)"
         >
-          编辑
+          数据权限
         </el-button>
-        <el-button type="primary" link :icon="Delete" v-auth="['system:role:remove']" @click="deleteRole(scope.row)">
-          删除
+        <el-button type="primary" v-if="scope.row.roleId !== 1" link :icon="User" v-auth="['system:role:edit']" @click="handleAuthUser(scope.row)">
+          分配用户
         </el-button>
       </template>
     </ProTable>
-    <FormDialog ref="formDialogRef" />
+    <FormDialog ref="formDialogRef">
+      <template #default="{ parameter }">
+        <ProFrom ref="proFormRef" :items-options="itemsOptions" :disabled="!parameter.isEdit" :form-options="_options" :model="parameter.model">
+          <template #menuCheckStrictly="{ formModel }">
+            <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+            <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+            <el-checkbox v-model="formModel.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')"> 父子联动 </el-checkbox>
+            <el-tree
+              class="tree-border"
+              :data="menuOptions"
+              show-checkbox
+              ref="menuRef"
+              node-key="id"
+              :check-strictly="!formModel.menuCheckStrictly"
+              empty-text="加载中，请稍后"
+              :props="{ label: 'label', children: 'children' }"
+            />
+          </template>
+        </ProFrom>
+      </template>
+      <template #footer="{ parameter }">
+        <el-button type="primary" :loading="butLoading" @click="handleSubmit(proFormRef, parameter, formDialogRef, '1')">确认</el-button>
+        <el-button @click="handleCancel(formDialogRef)">取消</el-button>
+      </template>
+    </FormDialog>
+    <FormDialog ref="formDataRef">
+      <template #default="{ parameter }">
+        <ProFrom ref="proFormDateRef" :items-options="itemsOptions" :form-options="_options" :model="parameter.model">
+          <template #deptCheckStrictly="{ formModel }">
+            <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
+            <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
+            <el-checkbox v-model="formModel.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')"> 父子联动 </el-checkbox>
+            <el-tree
+              class="tree-border"
+              :data="deptOptions"
+              show-checkbox
+              ref="deptRef"
+              default-expand-all
+              node-key="id"
+              :check-strictly="!formModel.deptCheckStrictly"
+              empty-text="加载中，请稍后"
+              :props="{ label: 'label', children: 'children' }"
+            />
+          </template>
+        </ProFrom>
+      </template>
+      <template #footer="{ parameter }">
+        <el-button type="primary" :loading="butLoading" @click="handleSubmit(proFormDateRef, parameter, formDataRef)">确认</el-button>
+        <el-button @click="handleCancel(formDataRef)">取消</el-button>
+      </template>
+    </FormDialog>
     <ImportExcel ref="dialogRef" />
   </div>
 </template>
 
-<script setup lang="tsx" name="Role">
-import { ref, reactive } from 'vue'
+<script setup lang="tsx" name="RoleManage">
+import { ref, reactive, nextTick } from 'vue'
 import { useHandleData } from '@/hooks/useHandleData'
 import { useDownload } from '@/hooks/useDownload'
-import { ElMessageBox } from 'element-plus'
+import { ElMessageBox, ElMessage } from 'element-plus'
 import ProTable from '@/components/ProTable/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
-import FormDialog from '@/components/DialogOld/form.vue'
+import FormDialog from '@/components/CustomDialog/index.vue'
+import ProFrom from '@/components/ProForm/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
-import { Delete, EditPen, Download, Upload, View, CirclePlus } from '@element-plus/icons-vue'
+import { Delete, EditPen, Download, Upload, CircleCheck, User, CirclePlus } from '@element-plus/icons-vue'
 import {
   listRoleApi,
   delRoleApi,
@@ -74,29 +121,77 @@ import {
   importTemplateApi,
   importDataApi,
   exportApi,
-  getRoleApi
+  changeStatusApi,
+  deptTreeSelectApi,
+  dataScopeApi,
+  roleMenuTreeSelectApi
 } from '@/api/modules/system/role'
+import { treeSelectApi } from '@/api/modules/system/menu'
+import { getDictsApi } from '@/api/modules/system/dictData'
+import { useRouter } from 'vue-router'
 
-// ProTable 实例
-const proTable = ref<ProTableInstance>()
+const router = useRouter()
+// 菜单列表
+const menuOptions = ref<any>()
+const menuExpand = ref(false)
+const menuNodeAll = ref(false)
+const deptExpand = ref(true)
+const deptNodeAll = ref(false)
+const menuRef = ref<any>(null)
+const proFormRef = ref<any>(null)
+const proFormDateRef = ref<any>(null)
+const deptOptions = ref<any[]>([])
+const deptRef = ref<any>(null)
+const butLoading = ref(false)
+// 数据范围选项
+const dataScopeOptions = ref([
+  { value: '1', label: '全部数据权限' },
+  { value: '2', label: '自定数据权限' },
+  { value: '3', label: '本部门数据权限' },
+  { value: '4', label: '本部门及以下数据权限' },
+  { value: '5', label: '仅本人数据权限' }
+])
 
-// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
-const initParam = reactive({ type: 1 })
+// 获取菜单
+const getMenuTreeSelect = () => {
+  treeSelectApi().then((response: any) => {
+    if (response.code === 200) {
+      menuOptions.value = response.data
+    }
+  })
+}
+getMenuTreeSelect()
 
-// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
-const dataCallback = (data: any) => {
-  return data
+// 根据角色ID查询菜单树结构
+const getRoleMenuTreeSelect = (roleId: any) => {
+  return roleMenuTreeSelectApi(roleId).then((res: any) => {
+    menuOptions.value = res.data.menus
+    return res
+  })
+}
+
+// 根据角色ID查询部门树结构
+const getDeptTree = (roleId: string) => {
+  return deptTreeSelectApi(roleId).then((res: any) => {
+    if (res.code === 200) {
+      deptOptions.value = res.data.depts
+      return res
+    }
+  })
 }
 
+// ProTable 实例
+const proTable = ref<ProTableInstance>()
+
 // 删除角色信息信息
 const deleteRole = async (params: any) => {
-  await useHandleData(delRoleApi, { id: [params.roleId] }, `删除【${params.id}】角色信息`)
+  await useHandleData(delRoleApi, params.roleId, `删除【${params.roleName}】角色信息`)
   proTable.value?.getTableList()
 }
 
 // 批量删除角色信息信息
-const batchDelete = async (id: string[]) => {
-  await useHandleData(delRoleApi, { id }, '删除所选角色信息信息')
+const batchDelete = async (ids: string[]) => {
+  await useHandleData(delRoleApi, ids, '删除所选角色信息信息')
   proTable.value?.clearSelection()
   proTable.value?.getTableList()
 }
@@ -123,22 +218,168 @@ const batchAdd = () => {
 const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
 // 打开弹框的功能
 const openDialog = async (type: number, title: string, row?: any) => {
-  let res = { data: {} }
-  if (row?.roleId) {
-    res = await getRoleApi(row?.roleId || null)
-  }
+  reset()
   // 重置表单
-  setFieldList()
+  setItemsOptions()
   const params = {
     title,
-    width: 580,
-    isEdit: type !== 3,
-    fieldList: fieldList,
-    model: type == 1 ? {} : res.data,
+    width: 720,
+    isEdit: true,
+    itemsOptions: itemsOptions,
+    model: type == 1 ? {} : row,
     api: type == 1 ? addRoleApi : updateRoleApi,
     getTableList: proTable.value?.getTableList
   }
   formDialogRef.value?.openDialog(params)
+  if (row?.roleId) {
+    getRoleMenuTreeSelect(row?.roleId).then(res => {
+      let checkedKeys = res.data.checkedKeys
+      checkedKeys.forEach((v: any) => {
+        nextTick(() => {
+          menuRef.value.setChecked(v, true, false)
+        })
+      })
+    })
+  }
+}
+const formDataRef = ref<InstanceType<typeof FormDialog> | null>(null)
+// 打开弹框的功能
+const openDataDialog = async (type: number, title: string, row?: any) => {
+  reset()
+  // 重置表单
+  setPerDataItemsOptions()
+  const params = {
+    title,
+    width: 720,
+    isEdit: true,
+    itemsOptions: itemsOptions,
+    model: type == 1 ? {} : row,
+    api: dataScopeApi,
+    getTableList: proTable.value?.getTableList
+  }
+
+  formDataRef.value?.openDialog(params)
+  if (row?.roleId) {
+    nextTick(() => {
+      getDeptTree(row?.roleId).then(res => {
+        nextTick(() => {
+          if (deptRef.value) {
+            deptRef.value.setCheckedKeys(res.data.checkedKeys)
+          }
+        })
+      })
+    })
+  }
+}
+
+// 树权限（展开/折叠
+const handleCheckedTreeExpand = (value: any, type: string) => {
+  if (type === 'menu') {
+    const nodes = menuRef.value.store._getAllNodes()
+    nodes.forEach(item => {
+      item.expanded = value
+    })
+  } else if (type === 'dept') {
+    const nodes = deptRef.value.store._getAllNodes()
+    nodes.forEach(item => {
+      item.expanded = value
+    })
+  }
+}
+
+// 树权限（全选/全不选）
+const handleCheckedTreeNodeAll = (value: any, type: string) => {
+  if (type === 'menu') {
+    menuRef.value.setCheckedNodes(value ? menuOptions.value : [])
+  } else if (type === 'dept') {
+    deptRef.value.setCheckedNodes(value ? deptOptions.value : [])
+  }
+}
+
+// 树权限（父子联动）
+const handleCheckedTreeConnect = (value: any, type: string) => {
+  if (type === 'menu') {
+    proFormRef.value.formModel.menuCheckStrictly = value ? true : false
+  } else if (type === 'dept') {
+    proFormDateRef.value.formModel.deptCheckStrictly = value ? true : false
+  }
+}
+
+// 分配用户
+function handleAuthUser(row: any) {
+  router.push('/system/role-auth/user/' + row.roleId)
+}
+
+// 切换绝俗状态
+const changeStatus = async (row: any) => {
+  await useHandleData(
+    changeStatusApi,
+    { roleId: row.roleId, version: row.version, status: row.status == '1' ? 0 : 1 },
+    `切换【${row.roleName}】角色状态`
+  )
+  proTable.value?.getTableList()
+}
+
+// 所有部门节点数据
+const getDeptAllCheckedKeys = () => {
+  // 目前被选中的部门节点
+  let checkedKeys = deptRef.value.getCheckedKeys()
+  // 半选中的部门节点
+  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys()
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+  return checkedKeys
+}
+
+// 所有菜单节点数据
+const getMenuAllCheckedKeys = () => {
+  // 目前被选中的菜单节点
+  let checkedKeys = menuRef.value.getCheckedKeys()
+  // 半选中的菜单节点
+  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys()
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+  return checkedKeys
+}
+// 提交
+const handleSubmit = (proFormRef: any, parameter: any, closeRefVal: any, type?: string) => {
+  const formEl = proFormRef.proFormRef
+  butLoading.value = true
+  if (!formEl) return
+  formEl.validate(valid => {
+    if (valid) {
+      if (type === '1') {
+        parameter.model.menuIds = getMenuAllCheckedKeys()
+      } else {
+        parameter.model.deptIds = getDeptAllCheckedKeys()
+      }
+      parameter.api!(parameter.model).then(res => {
+        if (res.code == 200) {
+          proFormRef?.resetForm(formEl)
+          ElMessage.success('操作成功')
+          handleCancel(closeRefVal)
+          proTable.value?.getTableList()
+        } else {
+          console.log('message', res.message)
+        }
+      })
+      butLoading.value = false
+    }
+    butLoading.value = false
+  })
+}
+
+// 取消按钮，重置表单，关闭弹框
+const handleCancel = (closeRefVal: any) => {
+  closeRefVal.handleCancel()
+}
+
+const reset = () => {
+  if (menuRef.value) {
+    menuRef.value.setCheckedKeys([])
+  }
+  menuExpand.value = false
+  menuNodeAll.value = false
+  deptExpand.value = true
+  deptNodeAll.value = false
 }
 
 // 表格配置项
@@ -147,30 +388,32 @@ const columns = reactive<ColumnProps<any>[]>([
   { prop: 'roleId', label: '角色编号' },
   {
     prop: 'roleName',
-    label: '角色名称',
-    search: {
-      el: 'input'
-    }
+    label: '角色名称'
   },
   {
     prop: 'roleKey',
-    label: '角色权限字符串',
-    search: {
-      el: 'input'
-    }
+    label: '角色权限字符串'
   },
   {
     prop: 'roleSort',
-    label: '显示顺序',
-    search: {
-      el: 'input'
-    }
+    label: '显示顺序'
   },
   {
     prop: 'status',
     label: '角色状态',
-    search: {
-      el: 'input'
+    enum: () => getDictsApi('sys_normal_disable'),
+    search: { el: 'tree-select' },
+    fieldNames: { label: 'dictLabel', value: 'dictValue' },
+    render: scope => {
+      return (
+        <el-switch
+          model-value={scope.row.status}
+          active-text={scope.row.status === '1' ? '禁用' : '启用'}
+          active-value={'0'}
+          inactive-value={'1'}
+          onClick={() => changeStatus(scope.row)}
+        />
+      )
     }
   },
   {
@@ -181,61 +424,116 @@ const columns = reactive<ColumnProps<any>[]>([
       props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
     }
   },
-  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
+  { prop: 'operation', label: '操作', width: 350, fixed: 'right' }
 ])
+let _options = ref<ProForm.FormOptions>({
+  labelWidth: 120,
+  hasFooter: false,
+  disabled: false
+})
+
 // 表单配置项
-let fieldList: Form.FieldItem[] = []
-const setFieldList = () => {
-  fieldList = [
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
     {
       label: '角色名称',
-      field: 'roleName',
+      prop: 'roleName',
       rules: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
-      placeholder: '请输入角色名称'
+      compOptions: {
+        placeholder: '请输入角色名称'
+      }
     },
     {
-      label: '角色权限字符串',
-      field: 'roleKey',
+      label: '角色权限',
+      prop: 'roleKey',
       rules: [{ required: true, message: '角色权限字符串不能为空', trigger: 'blur' }],
-      placeholder: '请输入角色权限字符串'
+      tooltip: '@PreAuthorize("@ss.hasPermi(`admin`)")',
+      compOptions: {
+        placeholder: '请输入角色权限字符串'
+      }
     },
     {
       label: '显示顺序',
-      field: 'roleSort',
+      prop: 'roleSort',
+      span: 12,
       rules: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }],
-      placeholder: '请输入显示顺序'
+      compOptions: {
+        elTagName: 'input-number'
+      }
     },
     {
-      label: '数据范围',
-      field: 'dataScope',
-      placeholder: '请输入数据范围'
+      label: '角色状态',
+      prop: 'status',
+      span: 12,
+      rules: [{ required: true, message: '角色状态不能为空', trigger: 'blur' }],
+      compOptions: {
+        elTagName: 'radio-group',
+        value: '0',
+        enum: () => getDictsApi('sys_normal_disable'),
+        labelKey: 'dictLabel',
+        valueKey: 'dictValue'
+      }
     },
     {
-      label: '菜单树选择项是否关联显示',
-      field: 'menuCheckStrictly',
-      placeholder: '请输入菜单树选择项是否关联显示'
+      label: '菜单权限',
+      prop: 'menuCheckStrictly',
+      hideLabelSuffix: true,
+      compOptions: {
+        elTagName: 'slot',
+        placeholder: '请输入菜单树选择项是否关联显示'
+      }
     },
     {
-      label: '部门树选择项是否关联显示',
-      field: 'deptCheckStrictly',
-      placeholder: '请输入部门树选择项是否关联显示'
+      label: '备注',
+      prop: 'remark',
+      compOptions: {
+        type: 'textarea',
+        placeholder: '请输入内容'
+      }
+    }
+  ]
+}
+const setPerDataItemsOptions = () => {
+  itemsOptions = [
+    {
+      label: '角色名称',
+      prop: 'roleName',
+      compOptions: {
+        disabled: true
+      }
     },
     {
-      label: '角色状态',
-      field: 'status',
-      rules: [{ required: true, message: '角色状态不能为空', trigger: 'blur' }],
-      placeholder: '请输入角色状态'
+      label: '权限字符',
+      prop: 'roleKey',
+      compOptions: {
+        disabled: true
+      }
     },
     {
-      label: '删除标志',
-      field: 'delFlag',
-      placeholder: '请输入删除标志'
+      label: '权限范围',
+      prop: 'dataScope',
+      compOptions: {
+        elTagName: 'select',
+        enum: dataScopeOptions.value,
+        onChange: (val: string) => {
+          if (val !== '2') {
+            deptRef.value.setCheckedKeys([])
+          }
+        }
+      }
     },
     {
-      label: '备注',
-      field: 'remark',
-      placeholder: '请输入备注'
+      label: '数据权限',
+      prop: 'deptCheckStrictly',
+      hideLabelSuffix: true,
+      compOptions: {
+        elTagName: 'slot'
+      }
     }
   ]
 }
 </script>
+<style scoped lang="scss">
+@import './index.scss';
+</style>

src/views/system/user/authUser.vue

@@ -1,338 +0,0 @@
-<template>
-  <div class="main-box">
-    <TreeFilter
-      title="部门列表"
-      :is-all="false"
-      :data="treeFilterData"
-      :default-value="initParam.deptId"
-      @change="changeTreeFilter"
-    />
-    <div class="table-box">
-      <ProTable
-        ref="proTable"
-        row-key="userId"
-        :indent="20"
-        :columns="columns"
-        :data-callback="dataCallback"
-        :request-api="listUserApi"
-        :request-auto="false"
-        :init-param="initParam"
-        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
-      >
-        <!-- 表格 header 按钮 -->
-        <template #tableHeader="scope">
-          <el-button type="primary" v-auth="['system:user:add']" :icon="CirclePlus" @click="openDialog(1, '用户新增')">
-            新增
-          </el-button>
-          <el-button type="primary" v-auth="['system:user:import']" :icon="Upload" plain @click="batchAdd">导入</el-button>
-          <el-button type="primary" v-auth="['system:user:export']" :icon="Download" plain @click="downloadFile">导出</el-button>
-          <el-button
-            type="danger"
-            v-auth="['system:user:remove']"
-            :icon="Delete"
-            plain
-            :disabled="!scope.isSelected"
-            @click="batchDelete(scope.selectedListIds)"
-          >
-            批量删除
-          </el-button>
-        </template>
-        <!-- 表格操作 -->
-        <template #operation="scope">
-          <el-button type="primary" link :icon="View" @click="openDialog(3, '用户查看', scope.row)">查看</el-button>
-          <el-button type="primary" link :icon="EditPen" @click="openDialog(2, '用户编辑', scope.row)">编辑</el-button>
-          <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
-        </template>
-      </ProTable>
-      <FormDialog ref="formDialogRef" />
-      <ImportExcel ref="dialogRef" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="tsx" name="treeProTable">
-import { onMounted, reactive, ref } from 'vue'
-import { User } from '@/api/interface'
-import { useDownload } from '@/hooks/useDownload'
-import { useHandleData } from '@/hooks/useHandleData'
-import { ElMessageBox } from 'element-plus'
-import ProTable from '@/components/ProTable/index.vue'
-import TreeFilter from '@/components/TreeFilter/index.vue'
-import ImportExcel from '@/components/ImportExcel/index.vue'
-import FormDialog from '@/components/DialogOld/form.vue'
-import { CirclePlus, Download, Upload, View, Delete, EditPen } from '@element-plus/icons-vue'
-import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
-import {
-  listUserApi,
-  delUserApi,
-  addUserApi,
-  updateUserApi,
-  changeUserStatus,
-  importTemplateApi,
-  importDataApi,
-  exportApi,
-  getUserApi,
-  deptTreeSelectApi
-} from '@/api/modules/system/user'
-import { getDictsApi } from '@/api/modules/system/dictData'
-onMounted(() => {
-  getTreeFilter()
-})
-
-// ProTable 实例
-const proTable = ref<ProTableInstance>()
-// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
-const initParam = reactive({ deptId: '' })
-
-// 获取 treeFilter 数据
-// 当 proTable 的 requestAuto 属性为 false，不会自动请求表格数据，等待 treeFilter 数据回来之后，更改 initParam.departmentId 的值，才会触发请求 proTable 数据
-const treeFilterData = ref<any>([])
-const getTreeFilter = async () => {
-  const { data } = await deptTreeSelectApi()
-  treeFilterData.value = data
-  initParam.deptId = treeFilterData.value[0].id
-}
-
-// 树形筛选切换
-const changeTreeFilter = (val: string) => {
-  // ElMessage.success('请注意查看请求参数变化 🤔')
-  proTable.value!.pageable.pageNum = 1
-  initParam.deptId = val
-}
-
-const dataCallback = (data: any) => {
-  const page = proTable.value!.pageable
-  return {
-    list: data.data,
-    total: data.total,
-    pageNum: page.pageNum,
-    pageSize: page.pageSize
-  }
-}
-
-// 切换用户状态
-const changeStatus = async (row: User.ResUserList) => {
-  await useHandleData(
-    changeUserStatus,
-    { userId: row.userId, status: row.status == '1' ? 0 : 1 },
-    `切换【${row.userName}】用户状态`
-  )
-  proTable.value?.getTableList()
-}
-
-// 删除用户信息
-const deleteAccount = async (params: User.ResUserList) => {
-  await useHandleData(delUserApi, { id: [params.id] }, `删除【${params.userName}】用户`)
-  proTable.value?.getTableList()
-}
-
-// 批量删除用户信息
-const batchDelete = async (id: string[]) => {
-  await useHandleData(delUserApi, { id }, '删除所选用户信息')
-  proTable.value?.clearSelection()
-  proTable.value?.getTableList()
-}
-
-// 导出用户列表
-const downloadFile = async () => {
-  ElMessageBox.confirm('确认导出用户数据?', '温馨提示', { type: 'warning' }).then(() =>
-    useDownload(exportApi, '用户列表', proTable.value?.searchParam)
-  )
-}
-
-// 批量添加用户
-const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
-const batchAdd = () => {
-  const params = {
-    title: '用户',
-    tempApi: importTemplateApi,
-    importApi: importDataApi,
-    getTableList: proTable.value?.getTableList
-  }
-  dialogRef.value?.acceptParams(params)
-}
-const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
-const postOptions = ref<any[]>([])
-const roleOptions = ref<any[]>([])
-// 打开弹框的功能
-const openDialog = async (type: number, title: string, row?: any) => {
-  let res = await getUserApi(row?.userId || null)
-
-  postOptions.value = res.data.posts
-  roleOptions.value = res.data.roles
-  // 表单项配置
-  const fieldList: Form.FieldItem[] = [
-    {
-      label: '用户昵称',
-      placeholder: '请输入用户昵称',
-      span: 12,
-      field: 'nickName',
-      rules: [{ required: true, message: '用户昵称不能为空' }]
-    },
-    {
-      label: '归属部门',
-      span: 12,
-      field: 'deptId',
-      placeholder: '请选择归属部门',
-      enum: () => deptTreeSelectApi(),
-      type: 'select-tree',
-      options: {
-        valueKey: 'id',
-        labelKey: 'label',
-        children: 'children'
-      }
-    },
-    {
-      label: '手机号码',
-      placeholder: '请输入手机号码',
-      span: 12,
-      field: 'phonenumber',
-      rules: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }]
-    },
-    {
-      label: '邮箱',
-      placeholder: '请输入邮箱',
-      span: 12,
-      field: 'email',
-      rules: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]
-    },
-    {
-      label: '性别',
-      span: 12,
-      field: 'sex',
-      enum: () => getDictsApi('sys_user_gender'),
-      type: 'select',
-      options: {
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
-      }
-    },
-    {
-      label: '状态',
-      span: 12,
-      field: 'status',
-      type: 'radio',
-      enum: () => getDictsApi('sys_normal_disable'),
-      options: {
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
-      }
-    },
-    {
-      label: '岗位',
-      span: 12,
-      field: 'postIds',
-      enum: postOptions.value,
-      type: 'select',
-      options: {
-        valueKey: 'postId',
-        labelKey: 'postName',
-        multiple: true
-      }
-    },
-    {
-      label: '角色',
-      span: 12,
-      field: 'roleIds',
-      enum: roleOptions.value,
-      type: 'select',
-      options: {
-        valueKey: 'roleId',
-        labelKey: 'roleName',
-        multiple: true
-      }
-    },
-    {
-      label: '备注',
-      placeholder: '请输入内容',
-      field: 'remark',
-      type: 'textarea'
-    }
-  ]
-  if (type == 1) {
-    fieldList.splice(
-      4,
-      0,
-      {
-        label: '用户名称',
-        placeholder: '请输入用户名称',
-        field: 'userName',
-        span: 12,
-        rules: [
-          { required: true, message: '用户名称不能为空' },
-          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
-        ]
-      },
-      {
-        label: '用户密码',
-        placeholder: '请输入密码',
-        field: 'password',
-        type: 'password',
-        showPassword: true,
-        span: 12,
-        rules: [
-          { required: true, message: '密码不能为空' },
-          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
-        ]
-      }
-    )
-  }
-  if (row?.userId) {
-    res.data.data.postIds = res.data.postIds
-    res.data.data.roleIds = res.data.roleIds
-  }
-
-  const params = {
-    title,
-    width: 680,
-    isEdit: type !== 3,
-    fieldList: fieldList,
-    model: type == 1 ? {} : res.data.data,
-    api: type == 1 ? addUserApi : updateUserApi,
-    getTableList: proTable.value?.getTableList
-  }
-  console.log('model', params.model)
-
-  formDialogRef.value?.openDialog(params)
-}
-// 表格配置项
-const columns = reactive<ColumnProps<User.ResUserList>[]>([
-  { type: 'selection', fixed: 'left', width: 70 },
-  { prop: 'userId', label: '用户编号' },
-  { prop: 'userName', label: '用户名称', search: { el: 'input' }, width: 120 },
-  { prop: 'nickName', label: '用户昵称', search: { el: 'input' }, width: 120 },
-  { prop: 'dept.deptName', label: '部门', width: 120 },
-  { prop: 'phonenumber', label: '手机号码', width: 120 },
-  {
-    prop: 'status',
-    label: '用户状态',
-    width: 120,
-    enum: () => getDictsApi('sys_normal_disable'),
-    search: { el: 'tree-select' },
-    fieldNames: { label: 'dictLabel', value: 'dictValue' },
-    render: scope => {
-      return (
-        <el-switch
-          model-value={scope.row.status}
-          active-text={scope.row.status === '1' ? '禁用' : '启用'}
-          active-value={'0'}
-          inactive-value={'1'}
-          onClick={() => changeStatus(scope.row)}
-        />
-      )
-    }
-  },
-  {
-    prop: 'sex',
-    label: '性别',
-    width: 120,
-    enum: () => getDictsApi('sys_user_gender'),
-    fieldNames: {
-      label: 'dictLabel',
-      value: 'dictValue'
-    }
-  },
-  { prop: 'createTime', label: '创建时间', width: 180 },
-  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
-])
-</script>

src/views/system/user/index.vue

@@ -1,19 +1,12 @@
 <template>
   <div class="main-box">
-    <TreeFilter
-      title="部门列表"
-      :is-all="false"
-      :data="treeFilterData"
-      :default-value="initParam.deptId"
-      @change="changeTreeFilter"
-    />
+    <TreeFilter title="部门列表" :is-all="false" :data="treeFilterData" :default-value="initParam.deptId" @change="changeTreeFilter" />
     <div class="table-box">
       <ProTable
         ref="proTable"
         row-key="userId"
         :indent="20"
         :columns="columns"
-        :data-callback="dataCallback"
         :request-api="listUserApi"
         :request-auto="false"
         :init-param="initParam"
@@ -21,9 +14,7 @@
       >
         <!-- 表格 header 按钮 -->
         <template #tableHeader="scope">
-          <el-button type="primary" v-auth="['system:user:add']" :icon="CirclePlus" @click="openDialog(1, '用户新增')">
-            新增
-          </el-button>
+          <el-button type="primary" v-auth="['system:user:add']" :icon="CirclePlus" @click="openDialog(1, '用户新增')"> 新增 </el-button>
           <el-button type="primary" v-auth="['system:user:import']" :icon="Upload" plain @click="batchAdd">导入</el-button>
           <el-button type="primary" v-auth="['system:user:export']" :icon="Download" plain @click="downloadFile">导出</el-button>
           <el-button
@@ -39,9 +30,9 @@
         </template>
         <!-- 表格操作 -->
         <template #operation="scope">
-          <el-button type="primary" link :icon="View" @click="openDialog(3, '用户查看', scope.row)">查看</el-button>
-          <el-button type="primary" link :icon="EditPen" @click="openDialog(2, '用户编辑', scope.row)">编辑</el-button>
-          <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
+          <el-button type="primary" link v-if="scope.row.userId !== 1" :icon="EditPen" @click="openDialog(2, '用户编辑', scope.row)">编辑</el-button>
+          <el-button type="primary" link v-if="scope.row.userId !== 1" :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
+          <el-button type="primary" link v-if="scope.row.userId !== 1" :icon="View" @click="handleResetPwd(scope.row)">重置密码</el-button>
         </template>
       </ProTable>
       <FormDialog ref="formDialogRef" />
@@ -50,16 +41,16 @@
   </div>
 </template>
 
-<script setup lang="tsx" name="treeProTable">
+<script setup lang="tsx" name="UserManage">
 import { onMounted, reactive, ref } from 'vue'
 import { User } from '@/api/interface'
 import { useDownload } from '@/hooks/useDownload'
 import { useHandleData } from '@/hooks/useHandleData'
-import { ElMessageBox } from 'element-plus'
+import { ElMessageBox, ElMessage } from 'element-plus'
 import ProTable from '@/components/ProTable/index.vue'
 import TreeFilter from '@/components/TreeFilter/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
-import FormDialog from '@/components/DialogOld/form.vue'
+import FormDialog from '@/components/FormDialog/index.vue'
 import { CirclePlus, Download, Upload, View, Delete, EditPen } from '@element-plus/icons-vue'
 import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
 import {
@@ -72,7 +63,8 @@ import {
   importDataApi,
   exportApi,
   getUserApi,
-  deptTreeSelectApi
+  deptTreeSelectApi,
+  resetUserPwdApi
 } from '@/api/modules/system/user'
 import { getDictsApi } from '@/api/modules/system/dictData'
 onMounted(() => {
@@ -100,33 +92,44 @@ const changeTreeFilter = (val: string) => {
   initParam.deptId = val
 }
 
-const dataCallback = (data: any) => {
-  return data
-}
-
 // 切换用户状态
 const changeStatus = async (row: User.ResUserList) => {
-  await useHandleData(
-    changeUserStatus,
-    { userId: row.userId, status: row.status == '1' ? 0 : 1 },
-    `切换【${row.userName}】用户状态`
-  )
+  await useHandleData(changeUserStatus, { userId: row.userId, status: row.status == '1' ? 0 : 1 }, `切换【${row.userName}】用户状态`)
   proTable.value?.getTableList()
 }
 
 // 删除用户信息
 const deleteAccount = async (params: User.ResUserList) => {
-  await useHandleData(delUserApi, { id: [params.id] }, `删除【${params.userName}】用户`)
+  await useHandleData(delUserApi, params.userId, `删除【${params.userName}】用户`)
   proTable.value?.getTableList()
 }
 
 // 批量删除用户信息
-const batchDelete = async (id: string[]) => {
-  await useHandleData(delUserApi, { id }, '删除所选用户信息')
+const batchDelete = async (ids: string[]) => {
+  await useHandleData(delUserApi, ids, '删除所选用户信息')
   proTable.value?.clearSelection()
   proTable.value?.getTableList()
 }
 
+function handleResetPwd(row: any) {
+  ElMessageBox.prompt('请输入"' + row.userName + '"的新密码', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    closeOnClickModal: false,
+    inputPattern: /^.{5,20}$/,
+    inputErrorMessage: '用户密码长度必须介于 5 和 20 之间'
+  })
+    .then(({ value }: any) => {
+      resetUserPwdApi({ userId: row.userId, password: value }).then(res => {
+        if (res.code == 200) ElMessage.success('修改成功，新密码是：' + value)
+        else ElMessage.error(res.msg)
+      })
+    })
+    .catch((e: any) => {
+      console.log(e)
+    })
+}
+
 // 导出用户列表
 const downloadFile = async () => {
   ElMessageBox.confirm('确认导出用户数据?', '温馨提示', { type: 'warning' }).then(() =>
@@ -151,136 +154,53 @@ const roleOptions = ref<any[]>([])
 // 打开弹框的功能
 const openDialog = async (type: number, title: string, row?: any) => {
   let res = await getUserApi(row?.userId || null)
-
+  debugger
   postOptions.value = res.data.posts
   roleOptions.value = res.data.roles
   // 表单项配置
-  const fieldList: Form.FieldItem[] = [
-    {
-      label: '用户昵称',
-      placeholder: '请输入用户昵称',
-      span: 12,
-      field: 'nickName',
-      rules: [{ required: true, message: '用户昵称不能为空' }]
-    },
-    {
-      label: '归属部门',
-      span: 12,
-      field: 'deptId',
-      placeholder: '请选择归属部门',
-      enum: () => deptTreeSelectApi(),
-      type: 'select-tree',
-      options: {
-        valueKey: 'id',
-        labelKey: 'label',
-        children: 'children'
-      }
-    },
-    {
-      label: '手机号码',
-      placeholder: '请输入手机号码',
-      span: 12,
-      field: 'phonenumber',
-      rules: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }]
-    },
-    {
-      label: '邮箱',
-      placeholder: '请输入邮箱',
-      span: 12,
-      field: 'email',
-      rules: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]
-    },
-    {
-      label: '性别',
-      span: 12,
-      field: 'sex',
-      enum: () => getDictsApi('sys_user_gender'),
-      type: 'select',
-      options: {
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
-      }
-    },
-    {
-      label: '状态',
-      span: 12,
-      field: 'status',
-      type: 'radio',
-      enum: () => getDictsApi('sys_normal_disable'),
-      options: {
-        labelKey: 'dictLabel',
-        valueKey: 'dictValue'
-      }
-    },
-    {
-      label: '岗位',
-      span: 12,
-      field: 'postIds',
-      enum: postOptions.value,
-      type: 'select',
-      options: {
-        valueKey: 'postId',
-        labelKey: 'postName',
-        multiple: true
-      }
-    },
-    {
-      label: '角色',
-      span: 12,
-      field: 'roleIds',
-      enum: roleOptions.value,
-      type: 'select',
-      options: {
-        valueKey: 'roleId',
-        labelKey: 'roleName',
-        multiple: true
-      }
-    },
-    {
-      label: '备注',
-      placeholder: '请输入内容',
-      field: 'remark',
-      type: 'textarea'
-    }
-  ]
+  setItemsOptions()
   if (type == 1) {
-    fieldList.splice(
+    itemsOptions.splice(
       4,
       0,
       {
         label: '用户名称',
-        placeholder: '请输入用户名称',
-        field: 'userName',
+        prop: 'userName',
         span: 12,
         rules: [
           { required: true, message: '用户名称不能为空' },
           { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
-        ]
+        ],
+        compOptions: {
+          placeholder: '请输入用户名称'
+        }
       },
       {
         label: '用户密码',
-        placeholder: '请输入密码',
-        field: 'password',
-        type: 'password',
-        showPassword: true,
+        prop: 'password',
         span: 12,
         rules: [
           { required: true, message: '密码不能为空' },
           { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
-        ]
+        ],
+        compOptions: {
+          showPassword: true,
+          type: 'password',
+          placeholder: '请输入密码'
+        }
       }
     )
   }
   if (row?.userId) {
-    res.data.postIds = res.data.postIds
-    res.data.roleIds = res.data.roleIds
+    res.data.user.postIds = res.data.postIds
+    res.data.user.roleIds = res.data.roleIds
   }
 
   const params = {
     title,
     width: 680,
     isEdit: type !== 3,
-    fieldList: fieldList,
+    itemsOptions: itemsOptions,
     model: type == 1 ? {} : res.data.user,
     api: type == 1 ? addUserApi : updateUserApi,
     getTableList: proTable.value?.getTableList
@@ -326,6 +246,108 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
     }
   },
   { prop: 'createTime', label: '创建时间', width: 180 },
-  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
+  { prop: 'operation', label: '操作', width: 240, fixed: 'right' }
 ])
+// 表单配置项
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
+    {
+      label: '用户昵称',
+      span: 12,
+      prop: 'nickName',
+      rules: [{ required: true, message: '用户昵称不能为空' }],
+      compOptions: {
+        placeholder: '请输入用户昵称'
+      }
+    },
+    {
+      label: '归属部门',
+      span: 12,
+      prop: 'deptId',
+      compOptions: {
+        elTagName: 'tree-select',
+        enum: () => deptTreeSelectApi(),
+        valueKey: 'id',
+        labelKey: 'label',
+        checkStrictly: true,
+        placeholder: '请选择归属部门'
+      }
+    },
+    {
+      label: '手机号码',
+      span: 12,
+      prop: 'phonenumber',
+      rules: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入手机号码'
+      }
+    },
+    {
+      label: '邮箱',
+      span: 12,
+      prop: 'email',
+      rules: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
+      compOptions: {
+        placeholder: '请输入邮箱'
+      }
+    },
+    {
+      label: '性别',
+      span: 12,
+      prop: 'sex',
+      compOptions: {
+        enum: () => getDictsApi('sys_user_gender'),
+        labelKey: 'dictLabel',
+        valueKey: 'dictValue',
+        placeholder: '请输入邮箱'
+      }
+    },
+    {
+      label: '状态',
+      span: 12,
+      prop: 'status',
+      compOptions: {
+        elTagName: 'radio-group',
+        value: '0',
+        enum: () => getDictsApi('sys_normal_disable'),
+        labelKey: 'dictLabel',
+        valueKey: 'dictValue'
+      }
+    },
+    {
+      label: '岗位',
+      span: 12,
+      prop: 'postIds',
+      compOptions: {
+        elTagName: 'select',
+        valueKey: 'postId',
+        labelKey: 'postName',
+        multiple: true,
+        enum: postOptions.value,
+        placeholder: '请选择岗位'
+      }
+    },
+    {
+      label: '角色',
+      span: 12,
+      prop: 'roleIds',
+      compOptions: {
+        elTagName: 'select',
+        enum: roleOptions.value,
+        valueKey: 'roleId',
+        labelKey: 'roleName',
+        multiple: true
+      }
+    },
+    {
+      label: '备注',
+      prop: 'remark',
+      compOptions: {
+        type: 'textarea',
+        placeholder: '请输入内容'
+      }
+    }
+  ]
+}
 </script>

src/views/tool/gen/index.vue

@@ -3,13 +3,7 @@
     <ProTable ref="proTable" :columns="columns" row-key="tableId" :request-api="listTableApi">
       <!-- 表格 header 按钮 -->
       <template #tableHeader="scope">
-        <el-button
-          type="primary"
-          v-auth="['tool:gen:code']"
-          :disabled="!scope.isSelected"
-          :icon="CirclePlus"
-          @click="handleGenTable()"
-        >
+        <el-button type="primary" v-auth="['tool:gen:code']" :disabled="!scope.isSelected" :icon="CirclePlus" @click="handleGenTable()">
           生成
         </el-button>
         <el-button type="primary" v-auth="['tool:gen:import']" :icon="Upload" plain @click="batchAdd"> 导入表 </el-button>
@@ -26,27 +20,19 @@
       </template>
       <!-- 表格操作 -->
       <template #operation="scope">
-        <el-button type="primary" link :icon="View" v-auth="['tool:gen:query']" @click="openDialog(1, '代码预览', scope.row)">
-          预览
-        </el-button>
+        <el-button type="primary" link :icon="View" v-auth="['tool:gen:query']" @click="openDialog(1, '代码预览', scope.row)"> 预览 </el-button>
         <el-button type="primary" link :icon="EditPen" v-auth="['tool:gen:edit']" @click="toDetail(scope.row)"> 编辑 </el-button>
-        <el-button type="primary" link :icon="Delete" v-auth="['tool:gen:remove']" @click="deleteRole(scope.row)">
-          删除
-        </el-button>
-        <el-button type="primary" link :icon="Refresh" v-auth="['tool:gen:edit']" @click="handleSyncDb(scope.row)">
-          同步
-        </el-button>
-        <el-button type="primary" link :icon="Download" v-auth="['tool:gen:code']" @click="handleGenTable(scope.row)">
-          生成代码
-        </el-button>
+        <el-button type="primary" link :icon="Delete" v-auth="['tool:gen:remove']" @click="deleteRole(scope.row)"> 删除 </el-button>
+        <el-button type="primary" link :icon="Refresh" v-auth="['tool:gen:edit']" @click="handleSyncDb(scope.row)"> 同步 </el-button>
+        <el-button type="primary" link :icon="Download" v-auth="['tool:gen:code']" @click="handleGenTable(scope.row)"> 生成代码 </el-button>
       </template>
     </ProTable>
     <FormDialog ref="formDialogRef">
-      <template #default="{ model }">
+      <template #default="{ parameter }">
         <div class="dialog-slot-c">
-          <el-tabs v-model="model.activeName" type="border-card">
+          <el-tabs v-model="parameter.model.activeName" type="border-card">
             <el-tab-pane
-              v-for="(value, key) in model.data"
+              v-for="(value, key) in parameter.model.data"
               :label="key.toString().substring(key.toString().lastIndexOf('/') + 1, key.toString().indexOf('.vm'))"
               :name="key.toString().substring(key.toString().lastIndexOf('/') + 1, key.toString().indexOf('.vm'))"
               :key="value"
@@ -62,8 +48,7 @@
                     : key
                         .toString()
                         .substring(key.toString().lastIndexOf('/') + 1, key.toString().indexOf('.vm'))
-                        .split('.')[1] ||
-                      key.toString().substring(key.toString().lastIndexOf('/') + 1, key.toString().indexOf('.vm'))
+                        .split('.')[1] || key.toString().substring(key.toString().lastIndexOf('/') + 1, key.toString().indexOf('.vm'))
                 "
               >
               </preview-code>
@@ -83,19 +68,11 @@ import { useDownload } from '@/hooks/useDownload'
 import { useRouter } from 'vue-router'
 import ProTable from '@/components/ProTable/index.vue'
 import FormDialog from '@/components/CustomDialog/index.vue'
-import TableDialog from '@/components/DialogOld/table.vue'
+import TableDialog from '@/components/TableDialog/index.vue'
 import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { Delete, EditPen, Download, Upload, Refresh, View, CirclePlus } from '@element-plus/icons-vue'
 import PreviewCode from '@/components/Highlight/index.vue'
-import {
-  listTableApi,
-  batchGenCodeApi,
-  listDbTableApi,
-  importTableApi,
-  previewTableApi,
-  delTableApi,
-  synchDbApi
-} from '@/api/modules/tool/gen'
+import { listTableApi, batchGenCodeApi, listDbTableApi, importTableApi, previewTableApi, delTableApi, synchDbApi } from '@/api/modules/tool/gen'
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
 const router = useRouter()
@@ -134,6 +111,7 @@ const batchAdd = () => {
     title: '导入表',
     width: 880,
     toolButton: false,
+    rowKey: 'tableName',
     columns: subColumns,
     api: importTableApi,
     getTableList: listDbTableApi,