Pre Merge pull request !765 from 宿命的风/master

run.bat

@@ -0,0 +1,2 @@
+title Ç°¶Ë·þÎñ
+npm run dev

src/components/FormCreate/src/components/DeptTreeSelect.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-tree-select
+    v-bind="attrs"
+    :data="deptList"
+    :props="defaultProps"
+    check-strictly
+    node-key="id"
+    placeholder="请选择"
+    :multiple="multiple"
+    :show-checkbox="showCheckbox"
+    :filterable="filterable"
+    :clearable="clearable"
+  />
+</template>
+
+<script lang="ts" setup>
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as DeptApi from '@/api/system/dept'
+
+defineOptions({ name: 'DeptTreeSelect' })
+
+const attrs = useAttrs()
+
+// 接受父组件参数
+interface Props {
+  multiple: boolean, //是否多选
+  showCheckbox: boolean, //是否多选
+  filterable:boolean, //是否允许搜索
+  formCreateInject?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+   multiple: false,
+   showCheckbox: false,
+   filterable:false,
+   clearable:false
+})
+
+ 
+const deptList = ref<Tree[]>([]) // 树形结构
+onMounted(async () => {
+  const rule =  props.formCreateInject.rule
+  const data = await DeptApi.getSimpleDeptList()	//1.调用后端接口获取数据
+  if (!data || data.length === 0) {
+    return
+  }
+  deptList.value = handleTree(data)
+  rule.options= data
+})
+
+</script>

src/components/FormCreate/src/components/DictSelect.vue

@@ -45,15 +45,18 @@ const props = withDefaults(defineProps<Props>(), {
 
 // 获得字典配置
 const getDictOptions = computed(() => {
-  switch (props.valueType) {
-    case 'str':
-      return getStrDictOptions(props.dictType)
-    case 'int':
-      return getIntDictOptions(props.dictType)
-    case 'bool':
-      return getBoolDictOptions(props.dictType)
-    default:
-      return []
+  const rule =  props.formCreateInject.rule
+  let options
+  if(props.valueType === 'str'){
+    options = getStrDictOptions(props.dictType)
+  }else  if(props.valueType === 'int'){
+    options = getIntDictOptions(props.dictType)
+  }else   if(props.valueType === 'bool'){
+    options = getBoolDictOptions(props.dictType)
+  }else {
+    options = []
   }
+  rule.options= options
+  return options
 })
 </script>

src/components/FormCreate/src/components/useApiSelect.tsx

@@ -2,6 +2,7 @@ import request from '@/config/axios'
 import { isEmpty } from '@/utils/is'
 import { ApiSelectProps } from '@/components/FormCreate/src/type'
 import { jsonParse } from '@/utils'
+import { object } from 'vue-types'
 
 export const useApiSelect = (option: ApiSelectProps) => {
   return defineComponent({
@@ -95,6 +96,9 @@ export const useApiSelect = (option: ApiSelectProps) => {
       }
 
       function parseOptions(data: any) {
+        const api = props.formCreateInject.api
+        api.setData(props.formCreateInject.field,data)
+
         //  情况一：如果有自定义解析函数优先使用自定义解析
         if (!isEmpty(props.parseFunc)) {
           options.value = parseFunc()?.(data)
@@ -111,6 +115,7 @@ export const useApiSelect = (option: ApiSelectProps) => {
           parseOptions0(data)
           return
         }
+        
         // 情况三：不是 yudao-vue-pro 标准返回
         console.warn(
           `接口[${props.url}] 返回结果不是 yudao-vue-pro 标准返回建议采用自定义解析函数处理`

src/components/FormCreate/src/config/index.ts

@@ -2,6 +2,7 @@ import { useUploadFileRule } from './useUploadFileRule'
 import { useUploadImgRule } from './useUploadImgRule'
 import { useUploadImgsRule } from './useUploadImgsRule'
 import { useDictSelectRule } from './useDictSelectRule'
+import { useDeptTreeSelectRule } from './useDeptTreeSelectRule'
 import { useEditorRule } from './useEditorRule'
 import { useSelectRule } from './useSelectRule'
 
@@ -10,6 +11,7 @@ export {
   useUploadImgRule,
   useUploadImgsRule,
   useDictSelectRule,
+  useDeptTreeSelectRule,
   useEditorRule,
   useSelectRule
 }

src/components/FormCreate/src/config/useDeptTreeSelectRule.ts

@@ -0,0 +1,36 @@
+import { generateUUID } from '@/utils'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+import { selectRule } from '@/components/FormCreate/src/config/selectRule'
+import { cloneDeep } from 'lodash-es'
+
+/**
+ * 部门树选择器规则，如果规则使用到动态数据则需要单独配置不能使用 useSelectRule
+ */
+export const useDeptTreeSelectRule = () => {
+  const label = '部门树选择'
+  const name = 'DeptTreeSelect'
+  const event = ['click','change','visibleChange','clear','blur','focus']
+  const rules = cloneDeep(selectRule)
+  return {
+    icon: 'icon-doc-text',
+    label,
+    name,
+    event: event,
+    rule() {
+      return {
+        type: name,
+        field: generateUUID(),
+        title: label,
+        info: '',
+        $required: false
+      }
+    },
+    props(_, { t }) {
+      return localeProps(t, name + '.props', [
+        makeRequiredRule(),
+        { type: 'switch', field: 'showCheckbox', title: '是否显示复选框' },
+        ...rules
+      ])
+    }
+  }
+}

src/components/FormCreate/src/config/useDictSelectRule.ts

@@ -12,6 +12,7 @@ export const useDictSelectRule = () => {
   const name = 'DictSelect'
   const rules = cloneDeep(selectRule)
   const dictOptions = ref<{ label: string; value: string }[]>([]) // 字典类型下拉数据
+  const event = ['click','change','visibleChange','clear','blur','focus']
   onMounted(async () => {
     const data = await DictDataApi.getSimpleDictTypeList()
     if (!data || data.length === 0) {
@@ -27,6 +28,7 @@ export const useDictSelectRule = () => {
     icon: 'icon-doc-text',
     label,
     name,
+    event: event,
     rule() {
       return {
         type: name,

src/components/FormCreate/src/useFormCreateDesigner.ts

@@ -1,10 +1,12 @@
 import {
   useDictSelectRule,
+  useDeptTreeSelectRule,
   useEditorRule,
   useSelectRule,
   useUploadFileRule,
   useUploadImgRule,
-  useUploadImgsRule
+  useUploadImgsRule,
+  useTreeSelectRule
 } from './config'
 import { Ref } from 'vue'
 import { Menu } from '@/components/FormCreate/src/type'
@@ -19,6 +21,8 @@ import { apiSelectRule } from '@/components/FormCreate/src/config/selectRule'
  * - 字典选择器
  * - 用户选择器
  * - 部门选择器
+ * - 部门树选择器
+ * - 岗位选择器
  * - 富文本
  */
 export const useFormCreateDesigner = async (designer: Ref) => {
@@ -48,23 +52,33 @@ export const useFormCreateDesigner = async (designer: Ref) => {
     })
   }
 
+  const event = ['click','change','visibleChange','clear','blur','focus']
   const userSelectRule = useSelectRule({
     name: 'UserSelect',
     label: '用户选择器',
-    icon: 'icon-user-o'
+    icon: 'icon-user-o',
+    event: event,
   })
   const deptSelectRule = useSelectRule({
     name: 'DeptSelect',
     label: '部门选择器',
-    icon: 'icon-address-card-o'
+    icon: 'icon-address-card-o',
+    event: event,
   })
   const dictSelectRule = useDictSelectRule()
+  const deptTreeSelectRule = useDeptTreeSelectRule()
   const apiSelectRule0 = useSelectRule({
     name: 'ApiSelect',
     label: '接口选择器',
     icon: 'icon-server',
     props: [...apiSelectRule],
-    event: ['click', 'change', 'visibleChange', 'clear', 'blur', 'focus']
+    event: event,
+  })
+  const postSelectRule = useSelectRule({
+    name: 'PostSelect',
+    label: '岗位选择器',
+    icon: 'icon-address-card-o',
+    event: event,
   })
 
   /**
@@ -75,7 +89,7 @@ export const useFormCreateDesigner = async (designer: Ref) => {
     // designer.value?.removeMenuItem('select')
     // designer.value?.removeMenuItem('radio')
     // designer.value?.removeMenuItem('checkbox')
-    const components = [userSelectRule, deptSelectRule, dictSelectRule, apiSelectRule0]
+    const components = [userSelectRule, deptSelectRule, dictSelectRule, apiSelectRule0,deptTreeSelectRule,postSelectRule]
     const menu: Menu = {
       name: 'system',
       title: '系统字段',

src/plugins/formCreate/index.ts

@@ -1,5 +1,7 @@
 import type { App } from 'vue'
-// 👇使用 form-create 需额外全局引入 element plus 组件
+import { getAccessToken,  getTenantId } from '@/utils/auth'
+import { config } from '@/config/axios/config'
+// <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD>使用 form-create 需额外全局引入 element plus 组件
 import {
   // ElAutocomplete,
   // ElButton,
@@ -67,6 +69,7 @@ import { UploadFile, UploadImg, UploadImgs } from '@/components/UploadFile'
 import { useApiSelect } from '@/components/FormCreate'
 import { Editor } from '@/components/Editor'
 import DictSelect from '@/components/FormCreate/src/components/DictSelect.vue'
+import DeptTreeSelect from '@/components/FormCreate/src/components/DeptTreeSelect.vue'
 
 const UserSelect = useApiSelect({
   name: 'UserSelect',
@@ -84,6 +87,13 @@ const ApiSelect = useApiSelect({
   name: 'ApiSelect'
 })
 
+const PostSelect = useApiSelect({
+  name: 'PostSelect',
+  labelField: 'name',
+  valueField: 'id',
+  url: '/system/post/simple-list'
+})
+
 const components = [
   ElAlert,
   ElTransfer,
@@ -114,6 +124,7 @@ const components = [
   UploadImgs,
   UploadFile,
   DictSelect,
+  DeptTreeSelect,
   UserSelect,
   DeptSelect,
   ApiSelect,
@@ -121,6 +132,7 @@ const components = [
   ElCollapse,
   ElCollapseItem,
   ElCard,
+  PostSelect,
 ]
 
 // 参考 http://www.form-create.com/v3/element-ui/auto-import.html 文档
@@ -132,3 +144,54 @@ export const setupFormCreate = (app: App<Element>) => {
   app.use(formCreate)
   app.use(FcDesigner)
 }
+
+formCreate.setData('globalToken',getAccessToken())
+formCreate.setData('tenantId',getTenantId())
+
+const { default_headers } = config
+
+// 重写 formCreate 的内置 fetch 方法
+formCreate.fetch = (options) => {
+  const { dataType } = options
+  // 获取或生成 Token
+  const token = getAccessToken(); // 这里的 token 可以从 Vuex、localStorage 或其他地方获取
+  const tenantId = getTenantId()
+  let headers = {}
+// 设置请求头，附加 Authorization token
+  const action = options.action.trim().toLowerCase()
+  if(action.startsWith('http://') || action.startsWith('https://') )
+  {
+    console.log("URL带有http:// 或 https:// 开头，无需进行处理")
+    headers = {
+      'Content-Type': dataType || default_headers,
+      ...options.headers,
+    };
+  }else
+  {
+    options.action = config.base_url+action
+    headers = {
+        'Content-Type': dataType || default_headers,
+        ...options.headers,
+        Authorization: `Bearer ${token}`,
+        'tenant-id': tenantId
+    };
+  }
+
+// 发起请求
+  fetch(options.action, {
+      method: options.method || 'GET', // 默认请求方法为 GET
+      headers: headers,                 // 包含 Authorization 的请求头
+      body: options.method !== 'GET' ? JSON.stringify(options.data) : null, // 如果是 POST 或其他方法，添加请求体
+  })
+  .then(response => response.json())  // 解析响应为 JSON
+  .then(data => {
+      if (options.onSuccess) {
+          options.onSuccess(data);  // 成功回调
+      }
+  })
+  .catch(error => {
+      if (options.onError) {
+          options.onError(error);  // 失败回调
+      }
+  });
+};