formItem增加request属性，支持异步加载数据

.env.development

@@ -1,4 +1,4 @@
 NODE_ENV = 'development'
 
-VITE_BASE_API = /admin
+VITE_BASE_API = /apiSys
 VITE_BASE_PATH = http://10.8.8.100:10028

src/api/user.ts

@@ -1,9 +1,7 @@
 import request from '@/utils/request'
 
 export function login(data: any) {
-  return request.post('/login', data, {
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
-  })
+  return request.post('/login', data)
 }
 
 export function getUserInfo() {

src/components/ProCardList.vue

@@ -179,7 +179,7 @@ defineExpose({
                 :style="{ height: cardHeight }"
                 @click="handleCreate"
               >
-                <el-button link icon="plus">新增</el-button>
+                <el-icon :size="18" class="mr-2px"><plus></plus></el-icon>新增
               </div>
             </el-col>
             <el-col :span="span" v-bind="$attrs" v-for="(item, index) in tableData" :key="item.id" class="mb-10">
@@ -215,9 +215,15 @@ defineExpose({
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .card-list-item {
   border-color: var(--el-border-color-light);
   border-radius: var(--el-card-border-radius);
+  color: var(--el-text-color-regular);
+
+  &:hover {
+    color: var(--el-color-primary);
+    border-color: currentColor;
+  }
 }
 </style>

src/components/ProTable.vue

@@ -86,7 +86,7 @@ nextTick(() => {
   // 将表格和工具栏进行关联
   const $table = xTable.value
   const $toolbar = xToolbar.value
-  $table.connect($toolbar)
+  $toolbar && $table.connect($toolbar)
 })
 
 const getTableData = () => {

src/components/form/FormComp.vue

@@ -3,6 +3,7 @@
 import type { BasicFormItem } from '@/types/form'
 import type { UploadProps } from 'element-plus'
 import { useUserStore } from '@/stores/user'
+import { ACCESS_TOKEN } from '@/utils/constants'
 
 interface Props {
   modelValue: any
@@ -26,9 +27,15 @@ const placeholder = (item: BasicFormItem) => {
   }
 }
 
+if (props.item.request) {
+  props.item.request().then((res: any) => {
+    props.item.options = res
+  })
+}
+
 const user = useUserStore()
 const headers = reactive({
-  access_token: user.token
+  [ACCESS_TOKEN]: user.token
 })
 // 图片上传
 const handleUploadSuccess: UploadProps['onSuccess'] = response => {

src/types/form.ts

@@ -14,6 +14,7 @@ export type BasicFormItem = {
   span?: number
   props?: object
   events?: object
+  request?: Function
 }
 
 export type AdvancedFormItem = {

src/utils/constants.ts

@@ -67,3 +67,5 @@ export const themeStyleList: themeStyle[] = [
     textColor: '#BBB'
   }
 ]
+
+export const ACCESS_TOKEN = 'access_token'

src/utils/request.ts

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { useUserStore } from '@/stores/user'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { ACCESS_TOKEN } from '@/utils/constants'
 
 const request = axios.create({
   baseURL: import.meta.env.VITE_BASE_API
@@ -40,7 +41,7 @@ request.interceptors.request.use(config => {
   config.headers = config.headers || {}
 
   if (token) {
-    config.headers.access_token = token
+    config.headers[ACCESS_TOKEN] = token
   }
 
   return config

src/views/system/User.vue

@@ -30,20 +30,6 @@ const CRUD: ICRUD = {
   }
 }
 
-// 角色列表
-const roleList = ref<any>([])
-getRoleList({
-  pageSize: -1,
-  name: ''
-}).then((res: any) => {
-  roleList.value = res.rows.map((item: any) => {
-    return {
-      value: item.id,
-      label: item.name
-    }
-  })
-})
-
 const duplicate = (rule: any, value: any, callback: any) => {
   checkLoginName({
     oldLoginName: curRow.value?.loginName || '',
@@ -100,7 +86,19 @@ const formConfig = reactive<BasicForm>({
       value: '',
       name: 'roleIdList',
       type: 'select',
-      options: roleList,
+      request: () => {
+        return getRoleList({
+          pageSize: -1,
+          name: ''
+        }).then((res: any) => {
+          return res.rows.map((item: any) => {
+            return {
+              value: item.id,
+              label: item.name
+            }
+          })
+        })
+      },
       rules: [{ required: true, message: '请选择角色', trigger: 'blur' }],
       props: {
         multiple: true,