feat : 需求征集新增公司筛选

src/views/project-demand/requirement/index.vue

@@ -1,56 +1,6 @@
 <template>
-  <el-form ref="formRef" :model="selectForm" class="search-form select-form" style="margin-top: 18px;margin-left: 16px">
-    <el-row>
-      <el-col :span="5">
-        <el-form-item prop="requirementName" label="征集名称">
-<!--          <el-input v-model="selectForm.requirementName" placeholder="请输入征集名称" clearable @keyup.enter.native="getList"-->
-<!--                    style="width: 100%"/>-->
-          <el-select v-model="selectForm.requirementName" placeholder="请输入征集名称"  filterable clearable remote :remote-method="getRequirementName"
-                       style="width: 100%" @change="changeName" >
-            <el-option
-                v-for="item in requirementNameOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="5" :offset="1">
-        <el-form-item prop="collectType" label="征集类型">
-          <el-select v-model="selectForm.collectType" ref="collectTypeSelectRef" placeholder="请选择征集类型" clearable
-                     filterable remote
-                     @change="getList">
-            <el-option
-                v-for="item in cacheStore.getDict('collect_type')"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="5" :offset="1">
-        <el-form-item prop="state" label="状态">
-          <el-select v-model="selectForm.state" placeholder="请选择状态" clearable filterable @change="getList" remote
-                     @visible-change="selectOptionVisibleChange">
-            <el-option
-                v-for="item in stateOption"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="6" :offset="1">
-        <el-form-item>
-          <el-button color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
-          <el-button @click="handleReset" :icon="Refresh">重置</el-button>
-        </el-form-item>
-      </el-col>
-    </el-row>
-  </el-form>
+  <fvSearchForm :searchConfig="searchConfig" @search="search" searchProp="state"  style="margin-left: 16px"></fvSearchForm>
+
 
   <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick">
     <template #empty>
@@ -65,16 +15,13 @@ import Tag from '@/components/Tag.vue'
 import {ElNotification} from "element-plus";
 import {useCacheStore} from '@/stores/cache.js'
 import {getRequirementStatePerm,filterRequirementName,deleteDemand} from "@/api/project-demand";
-import {Refresh, Search} from '@element-plus/icons-vue'
+import {getSubCompOpt} from "@/api/user/user";
+import fvSelect from "@/fvcomponents/fvSelect/index.vue";
 
 const cacheStore = useCacheStore()
 const authStore = useAuthStore()
 const router = useRouter()
-const selectForm = ref({})
 const tableIns = ref()
-const formRef = ref()
-const requirementNameOptions = ref([])
-const stateOption = ref([])
 const userInfo = ref(authStore.userinfo)
 const auths = {
   edit: ['mosr:requirement:resubmit'],
@@ -195,46 +142,85 @@ const tableConfig = reactive({
   params: {}
 })
 
-const changeName=(val)=>{
-  selectForm.value.requirementName=val
-  getList()
+
+const searchConfig = ref([
+  {
+    label: '征集名称',
+    prop: 'requirementName',
+    component: shallowRef(fvSelect),
+    props: {
+      placeholder: '请输入征集名称查询',
+      clearable: true,
+      filterable: true,
+      options: [],
+      remote: true,
+      remoteMethod:async (val)=>{
+        if(val){
+          const res=await filterRequirementName(val)
+          if(res.code==1000){
+            let optionObj={}
+            let options=[]
+            res.data.forEach(item=>{
+              optionObj={
+                value:item,
+                label:item
+              }
+              options.push(optionObj)
+            })
+            searchConfig.value.find(item => item.prop == 'requirementName').props.options = options
+          }
+        }
+      }
+    }
+  },
+  {
+    label: '征集类型',
+    prop: 'collectType',
+    component: shallowRef(fvSelect),
+    props: {
+      placeholder: '请选择征集类型',
+      cacheKey: 'collect_type',
+      clearable: true,
+      filterable: true,
+      remote: true
+    }
+  },
+  {
+    label: '征集公司',
+    prop: 'affiliatedCompanyId',
+    component: 'el-tree-select',
+    props: {
+      placeholder: '请输入征集公司查询',
+      clearable: true,
+      data: [],
+      filterable: true,
+      checkStrictly: true,
+      remote: true
+    }
+  },
+  {
+    label: '状态',
+    prop: 'state',
+    component: shallowRef(fvSelect),
+    props: {
+      placeholder: '请选择状态',
+      clearable: true,
+      filterable: true,
+      options: [],
+      remote: true,
+    }
+  },
+])
+
+const init = async () => {
+  const res = await getSubCompOpt()
+  searchConfig.value.find(item=>item.prop == 'affiliatedCompanyId').props.data = res.data
+  const res1 = await getRequirementStatePerm()
+  searchConfig.value.find(item=>item.prop == 'state').props.options = res1.data
 }
 
-const getRequirementName=async (val)=>{
-  if(val){
-    const res=await filterRequirementName(val)
-    if(res.code==1000){
-      let optionObj={}
-      let options=[]
-      res.data.forEach(item=>{
-        optionObj={
-          value:item,
-          label:item
-        }
-        options.push(optionObj)
-      })
-     requirementNameOptions.value= options
-    }
-  }
-}
-const selectOptionVisibleChange = (value) => {
-  console.log('value', value)
-}
-const getStatePerm = () => {
-  getRequirementStatePerm().then(res => {
-    stateOption.value = res.data
-  })
-}
-getStatePerm()
-//重置功能
-const handleReset = () => {
-  formRef.value.resetFields()
-  getList()
-}
-const getList = () => {
-  tableConfig.params = {...selectForm.value}
-  tableIns.value.refresh()
-}
+init()
+
 const search = (val) => {
   tableConfig.params = {...val}
   tableIns.value.refresh()