设计强度搜索框

src/components/plugins/table-form/hc-form-select-search.vue

@@ -58,9 +58,9 @@ nextTick(() => {
 const setTableFormRemoteMethod = async (key, type) => {
     if (type === 'dap_site_data') {
         await getDapSiteDataApi(key)
-    } else if (type === 'strength_search') {
-        await getDesignStrengthListApi(key)
-    }
+    } 
+    
+  
 }
 
 //获取数据源
@@ -84,24 +84,7 @@ const getDapSiteDataApi = async (key) => {
         }
     }
 }
-const getDesignStrengthListApi = async (key) => {
-    const datas = selectDatas.value
-    if (datas.length > 0) {
-        return datas
-    } else {
-        const { error, code, data } = await getDesignStrengthList({
-            contractId: props.contractId,
-            key: key,
-        }, false)
-        //处理数据
-        const resData = getObjVal(data)
-        if (!error && code === 200 && resData) {
-            selectDatas.value = await objToArr(resData, key)
-        } else {
-            selectDatas.value = []
-        }
-    }
-}
+
 //对象转数组
 const objToArr = async (obj) => {
     let newArr = []

src/components/plugins/table-form/hc-form-select-search2.vue

@@ -0,0 +1,107 @@
+<template>
+    <ElSelect
+        :id="keyname" v-model="selectVal" :keyname="keyname" :placeholder="placeholder" clearable filterable
+        @change="formRemoteChange"
+    >
+        <ElOption v-for="item in selectDatas" :key="item.value" :label="item.label" :value="item.value" />
+    </ElSelect>
+</template>
+
+<script setup>
+import { nextTick, ref } from 'vue'
+import { getDapSiteData, getDesignStrengthList } from '~api/other'
+import { ElOption, ElSelect } from 'z-element-plus'
+import { arrIndex, getObjVal, getObjValue } from 'js-fast-way'
+
+const props = defineProps({
+    val: {
+        type: [Number, String],
+        default: '',
+    },
+    type: {
+        type: [Number, String],
+        default: '',
+    },
+    keyname: {
+        type: [Number, String],
+        default: '',
+    },
+    placeholder: {
+        type: [Number, String],
+        default: '搜索',
+    },
+    contractId: {
+        type: [Number, String],
+        default: '',
+    },
+    pkeyId: {
+        type: [Number, String],
+        default: '',
+    },
+})
+
+//事件
+const emit = defineEmits(['change'])
+
+//变量
+const selectVal = ref(props.val)
+
+//加载完成
+nextTick(() => {
+    console.log(props, 'props')
+    if (props.keyname && props.type) {
+        setTableFormRemoteMethod(props.keyname, props.type)
+    }
+})
+
+//获取下拉框设计强度筛选数据
+const setTableFormRemoteMethod = async (key, type) => {
+ if (type === 'strength_search') {
+        await getDesignStrengthListApi(key)//设计强度搜索
+    }
+}
+
+//获取数据源
+const selectDatas = ref([])
+const getDesignStrengthListApi = async (key) => {
+    const datas = selectDatas.value
+    if (datas.length > 0) {
+        return datas
+    } else {
+        const { error, code, data } = await getDesignStrengthList({
+            contractId: props.contractId,
+            key: key,
+        }, false)
+        //处理数据
+        const resData = getObjVal(data)
+        if (!error && code === 200 && resData) {
+            selectDatas.value = await objToArr(resData, key)
+        } else {
+            selectDatas.value = []
+        }
+    }
+}
+//对象转数组
+const objToArr = async (obj) => {
+    let newArr = []
+    Object.keys(obj).forEach(key => {
+        newArr.push({
+            label: key,
+            value: key,
+            data: {
+                ...obj[key],
+            },
+        })
+    })
+    return newArr
+}
+
+//当前被选中的事件
+const formRemoteChange = (val) => {
+    const datas = selectDatas.value
+    const index = arrIndex(datas, 'value', val)
+    if (index >= 0) {
+        emit('change', getObjValue(datas[index].data))
+    }
+}
+</script>

src/plugins/HTableForm.js

@@ -5,6 +5,7 @@ import { isArray, toParse } from 'js-fast-way'
 //自定义组件或二次封装的组件
 import HcTableFormUpload from '~com/plugins/table-form/hc-form-upload.vue'
 import HcFormSelectSearch from '~com/plugins/table-form/hc-form-select-search.vue'
+import HcFormSelectSearch2 from '~com/plugins/table-form/hc-form-select-search2.vue'
 import HcFormCheckboxGroup from '~com/plugins/table-form/hc-form-checkbox-group.vue'
 import ElTimePicker from '~com/plugins/table-form/hc-time-picker.vue'
 import ElDatePicker from '~com/plugins/table-form/hc-date-picker-1.vue'
@@ -19,7 +20,7 @@ import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 const components = {
     ElSelect, ElOption, ElDatePicker, ElTimePicker, HcTableFormUpload, ElRadioGroup,
-    HcFormSelectSearch, HcFormCheckboxGroup, HcEchart,
+    HcFormSelectSearch, HcFormSelectSearch2, HcFormCheckboxGroup, HcEchart,
 }
 
 //表单渲染