From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/FormCreate/src/components/useApiSelect.tsx | 270 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 270 insertions(+), 0 deletions(-)
diff --git a/src/components/FormCreate/src/components/useApiSelect.tsx b/src/components/FormCreate/src/components/useApiSelect.tsx
new file mode 100644
index 0000000..89a7e8d
--- /dev/null
+++ b/src/components/FormCreate/src/components/useApiSelect.tsx
@@ -0,0 +1,270 @@
+import request from '@/config/axios'
+import { isEmpty } from '@/utils/is'
+import { ApiSelectProps } from '@/components/FormCreate/src/type'
+import { jsonParse } from '@/utils'
+
+export const useApiSelect = (option: ApiSelectProps) => {
+ return defineComponent({
+ name: option.name,
+ props: {
+ // 閫夐」鏍囩
+ labelField: {
+ type: String,
+ default: () => option.labelField ?? 'label'
+ },
+ // 閫夐」鐨勫��
+ valueField: {
+ type: String,
+ default: () => option.valueField ?? 'value'
+ },
+ // api 鎺ュ彛
+ url: {
+ type: String,
+ default: () => option.url ?? ''
+ },
+ // 璇锋眰绫诲瀷
+ method: {
+ type: String,
+ default: 'GET'
+ },
+ // 閫夐」瑙ｆ瀽鍑芥暟
+ parseFunc: {
+ type: String,
+ default: ''
+ },
+ // 璇锋眰鍙傛暟
+ data: {
+ type: String,
+ default: ''
+ },
+ // 閫夋嫨鍣ㄧ被鍨嬶紝涓嬫媺妗� select銆佸閫夋 checkbox銆佸崟閫夋 radio
+ selectType: {
+ type: String,
+ default: 'select'
+ },
+ // 鏄惁澶氶��
+ multiple: {
+ type: Boolean,
+ default: false
+ },
+ // 鏄惁杩滅▼鎼滅储
+ remote: {
+ type: Boolean,
+ default: false
+ },
+ // 杩滅▼鎼滅储鏃舵惡甯︾殑鍙傛暟
+ remoteField: {
+ type: String,
+ default: 'label'
+ },
+ // 杩斿洖鍊肩被鍨嬶紙鐢ㄤ簬閮ㄩ棬閫夋嫨鍣ㄧ瓑锛夛細id 杩斿洖 ID锛宯ame 杩斿洖鍚嶇О
+ returnType: {
+ type: String,
+ default: 'id'
+ }
+ },
+ setup(props) {
+ const attrs = useAttrs()
+ const options = ref<any[]>([]) // 涓嬫媺鏁版嵁
+ const loading = ref(false) // 鏄惁姝ｅ湪浠庤繙绋嬭幏鍙栨暟鎹�
+ const queryParam = ref<any>() // 褰撳墠杈撳叆鐨勫��
+ const getOptions = async () => {
+ options.value = []
+ // 鎺ュ彛閫夋嫨鍣�
+ if (isEmpty(props.url)) {
+ return
+ }
+
+ switch (props.method) {
+ case 'GET':
+ let url: string = props.url
+ if (props.remote) {
+ if (queryParam.value != undefined) {
+ if (url.includes('?')) {
+ url = `${url}&${props.remoteField}=${queryParam.value}`
+ } else {
+ url = `${url}?${props.remoteField}=${queryParam.value}`
+ }
+ }
+ }
+ parseOptions(await request.get({ url: url }))
+ break
+ case 'POST':
+ const data: any = jsonParse(props.data)
+ if (props.remote) {
+ data[props.remoteField] = queryParam.value
+ }
+ parseOptions(await request.post({ url: props.url, data: data }))
+ break
+ }
+ }
+
+ function parseOptions(data: any) {
+ // 鎯呭喌涓�锛氬鏋滄湁鑷畾涔夎В鏋愬嚱鏁颁紭鍏堜娇鐢ㄨ嚜瀹氫箟瑙ｆ瀽
+ if (!isEmpty(props.parseFunc)) {
+ options.value = parseFunc()?.(data)
+ return
+ }
+ // 鎯呭喌浜岋細杩斿洖鐨勭洿鎺ユ槸涓�涓垪琛�
+ if (Array.isArray(data)) {
+ parseOptions0(data)
+ return
+ }
+ // 鎯呭喌浜岋細杩斿洖鐨勬槸鍒嗛〉鏁版嵁,灏濊瘯璇诲彇 list
+ data = data.list
+ if (!!data && Array.isArray(data)) {
+ parseOptions0(data)
+ return
+ }
+ // 鎯呭喌涓夛細涓嶆槸 yudao-vue-pro 鏍囧噯杩斿洖
+ console.warn(
+ `鎺ュ彛[${props.url}] 杩斿洖缁撴灉涓嶆槸 yudao-vue-pro 鏍囧噯杩斿洖寤鸿閲囩敤鑷畾涔夎В鏋愬嚱鏁板鐞哷
+ )
+ }
+
+ function parseOptions0(data: any[]) {
+ if (Array.isArray(data)) {
+ options.value = data.map((item: any) => {
+ const label = parseExpression(item, props.labelField)
+ let value = parseExpression(item, props.valueField)
+
+ // 鏍规嵁 returnType 鍐冲畾杩斿洖鍊�
+ // 濡傛灉璁剧疆浜� returnType 涓� 'name'锛屽垯杩斿洖 label 浣滀负 value
+ if (props.returnType === 'name') {
+ value = label
+ }
+
+ return {
+ label: label,
+ value: value
+ }
+ })
+ return
+ }
+ console.warn(`鎺ュ彛[${props.url}] 杩斿洖缁撴灉涓嶆槸涓�涓暟缁刞)
+ }
+
+ function parseFunc() {
+ let parse: any = null
+ if (!!props.parseFunc) {
+ // 瑙ｆ瀽瀛楃涓插嚱鏁�
+ parse = new Function(`return ${props.parseFunc}`)()
+ }
+ return parse
+ }
+
+ function parseExpression(data: any, template: string) {
+ // 妫�娴嬫槸鍚︿娇鐢ㄤ簡琛ㄨ揪寮�
+ if (template.indexOf('${') === -1) {
+ return data[template]
+ }
+ // 姝ｅ垯琛ㄨ揪寮忓尮閰嶆ā鏉垮瓧绗︿覆涓殑 ${...}
+ const pattern = /\$\{([^}]*)}/g
+ // 浣跨敤replace鍑芥暟閰嶅悎姝ｅ垯琛ㄨ揪寮忓拰鍥炶皟鍑芥暟鏉ヨ繘琛屾浛鎹�
+ return template.replace(pattern, (_, expr) => {
+ // expr 鏄尮閰嶅埌鐨� ${} 鍐呯殑琛ㄨ揪寮忥紙杩欓噷鏄睘鎬у悕锛夛紝浠� data 涓幏鍙栧搴旂殑鍊�
+ const result = data[expr.trim()] // 鍘婚櫎鍓嶅悗绌虹櫧锛屼互闃茬敤鎴疯緭鍏ュ甫绌烘牸鐨勫睘鎬у悕
+ if (!result) {
+ console.warn(
+ `鎺ュ彛閫夋嫨鍣ㄩ�夐」妯＄増[${template}][${expr.trim()}] 瑙ｆ瀽鍊煎け璐ョ粨鏋滀负[${result}], 璇锋鏌ュ睘鎬у悕绉版槸鍚﹀瓨鍦ㄤ簬鎺ュ彛杩斿洖鍊间腑,瀛樺湪鍒欏拷鐣ユ鏉★紒锛侊紒`
+ )
+ }
+ return result
+ })
+ }
+
+ const remoteMethod = async (query: any) => {
+ if (!query) {
+ return
+ }
+ loading.value = true
+ try {
+ queryParam.value = query
+ await getOptions()
+ } finally {
+ loading.value = false
+ }
+ }
+
+ onMounted(async () => {
+ await getOptions()
+ })
+
+ const buildSelect = () => {
+ if (props.multiple) {
+ // fix锛氬鍐欐姝ユ槸涓轰簡瑙ｅ喅 multiple 灞炴�ч棶棰�
+ return (
+ <el-select
+ class="w-1/1"
+ multiple
+ loading={loading.value}
+ {...attrs}
+ remote={props.remote}
+ {...(props.remote && { remoteMethod: remoteMethod })}
+ >
+ {options.value.map((item, index) => (
+ <el-option key={index} label={item.label} value={item.value} />
+ ))}
+ </el-select>
+ )
+ }
+ return (
+ <el-select
+ class="w-1/1"
+ loading={loading.value}
+ {...attrs}
+ remote={props.remote}
+ {...(props.remote && { remoteMethod: remoteMethod })}
+ >
+ {options.value.map((item, index) => (
+ <el-option key={index} label={item.label} value={item.value} />
+ ))}
+ </el-select>
+ )
+ }
+ const buildCheckbox = () => {
+ if (isEmpty(options.value)) {
+ options.value = [
+ { label: '閫夐」1', value: '閫夐」1' },
+ { label: '閫夐」2', value: '閫夐」2' }
+ ]
+ }
+ return (
+ <el-checkbox-group class="w-1/1" {...attrs}>
+ {options.value.map((item, index) => (
+ <el-checkbox key={index} label={item.label} value={item.value} />
+ ))}
+ </el-checkbox-group>
+ )
+ }
+ const buildRadio = () => {
+ if (isEmpty(options.value)) {
+ options.value = [
+ { label: '閫夐」1', value: '閫夐」1' },
+ { label: '閫夐」2', value: '閫夐」2' }
+ ]
+ }
+ return (
+ <el-radio-group class="w-1/1" {...attrs}>
+ {options.value.map((item, index) => (
+ <el-radio key={index} value={item.value}>
+ {item.label}
+ </el-radio>
+ ))}
+ </el-radio-group>
+ )
+ }
+ return () => (
+ <>
+ {props.selectType === 'select'
+ ? buildSelect()
+ : props.selectType === 'radio'
+ ? buildRadio()
+ : props.selectType === 'checkbox'
+ ? buildCheckbox()
+ : buildSelect()}
+ </>
+ )
+ }
+ })
+}
--
Gitblit v1.8.0