update: 高级搜索组件

src/views/Jyh/Search/Components/OssQuery.vue

@@ -1,86 +1,15 @@
 <template>
   <div class="secret-container">
     <div class="search-form">
-      <d-form
-        label-size="lg"
-        class="jyh-form"
-        ref="formRef"
-        :data="formData"
-        :pop-postion="['right']"
-        :rules="formRules"
-      >
-        <d-row :gutter="25" type="flex" class="docs-devui-row mb-4">
-          <d-col style="flex: 1">
-            <d-form-item field="title" label="当前页面搜索关键字" :show-feedback="false">
-              <d-input
-                style="width: 100%"
-                v-model="formData.title"
-                placeholder="License编码模糊搜索"
-                maxLength="50"
-                minLength="2"
-              />
-            </d-form-item>
-          </d-col>
-          <d-col style="flex: 1">
-            <d-form-item field="type" label="主/依赖类型" :show-feedback="false">
-              <gc-checkbox-group class="jyh-checkbox-group" v-model="formData.type" :options="typeOptions" direction="row"></gc-checkbox-group>
-            </d-form-item>
-          </d-col>
-          <d-col style="flex: 1">
-            <d-form-item field="version" label="选型版本火车名称" help-tips="选型版本火车名称" :show-feedback="false">
-              <d-select class="jyh-select-multiple" v-model="formData.version" :multiple="true" :options="typeOptions" :allow-clear="true" />
-            </d-form-item>
-          </d-col>
-          <d-col style="flex: 1">
-            <d-form-item field="title" label="软件编码" :show-feedback="false">
-              <d-input
-                style="width: 100%"
-                v-model="formData.code"
-                placeholder="软件编码模糊搜索"
-                maxLength="50"
-                minLength="2"
-              />
-            </d-form-item>
-          </d-col>
-        </d-row>
-        <d-row :gutter="25" type="flex" class="docs-devui-row mb-5">
-          <d-col style="flex: 1">
-            <d-form-item field="name" label="软件名称" :show-feedback="false">
-              <d-input
-                style="width: 100%"
-                v-model="formData.name"
-                placeholder="软件名称模糊搜索"
-                maxLength="50"
-                minLength="2"
-              />
-            </d-form-item>
-          </d-col>
-          <d-col style="flex: 1">
-            <d-form-item field="versionCode" label="版本编码" :show-feedback="false">
-              <d-input
-                style="width: 100%"
-                v-model="formData.versionCode"
-                placeholder="版本编码模糊搜索"
-                maxLength="50"
-                minLength="2"
-              />
-            </d-form-item>
-          </d-col>
-          <d-col style="flex: 1">
-            <d-form-item field="pulishTime" label="发布时间" :show-feedback="false">
-              <d-date-picker-pro v-model="formData.pulishTime" :showTime="true"
-                                 placeholder="请选择日期与时间"
-                                 format="YYYY-MM-DD HH:mm:ss" />
-            </d-form-item>
-          </d-col>
-          <d-col style="flex: 1"></d-col>
-        </d-row>
-        <gc-form-operation class="jyh-form-operation">
-          <d-button class="mr-2" variant="solid">筛选</d-button>
-          <d-button variant="solid" color="secondary">清空</d-button>
-        </gc-form-operation>
-        <d-button class="output-btn" icon="icon-share" variant="text">导出</d-button>
-      </d-form>
+      <AdvanceSearch v-model="newFormData" class="px-20">
+        <template #operation>
+          <gc-form-operation class="jyh-form-operation">
+            <d-button class="mr-2" variant="solid">筛选</d-button>
+            <d-button variant="solid" color="secondary">清空</d-button>
+          </gc-form-operation>
+          <d-button class="output-btn" icon="icon-share" variant="text">导出</d-button>
+        </template>
+      </AdvanceSearch>
     </div>
     <div class="mt-3 px-20">
       <d-table class="jyh-table" v-if="tableData.length" :striped="false" :data="tableData" table-layout="auto">
@@ -173,9 +102,10 @@
 </template>
 
 <script setup lang="ts">
+import AdvanceSearch from '@/components/AdvanceSearch/index.vue'
 import SettingTitle from '@/components/Setting/SettingTitle/index.vue';
 import SettingText from '@/components/Setting/SettingText/index.vue';
-import { ref,reactive } from 'vue';
+import { ref,reactive, onMounted } from 'vue';
 import { getGroupClaList, setGroupClaStatus, deleteGroupCla } from '@/api/cla';
 import { useRouter, useRoute } from 'vue-router';
 import { GModal } from '@/components/Setting/index';
@@ -202,6 +132,16 @@ const riskOptions = reactive(['低', '中', '高']);
 const useTypeOptions = reactive(['软件', '文档', '文档+软件']);
 const isUseOptions = reactive(['是', '否']);
 
+const newFormData = ref({
+  licenseName: '',
+  searchWord: '',
+  licenseStrengths: '',
+  softwareVersion: '',
+  dependentSoftware: '',
+  programmingLanguage: '',
+  dateRange: ['', '']
+})
+
 const pager = ref({
   total: 10,
   pageIndex: 1,
@@ -219,7 +159,7 @@ const openDelete = (row: any) => {
 };
 
 const router = useRouter();
-
+const route = useRoute();
 // 跳转
 const gotoDetail = (row) => {
   // 后续请换成params，暂时params传参没传过去
@@ -296,6 +236,13 @@ const setClaStatus = async (row: any) => {
 const signCla = (row: any) => {
   router.push('/cla/' + row.object_id);
 };
+
+onMounted(() => {
+  const query: any = route.query;
+  newFormData.value = {
+    ...query
+  };
+});
 </script>
 
 <style scoped lang="scss">
@@ -354,7 +301,6 @@ const signCla = (row: any) => {
 
 .search-form {
   position: relative;
-  padding: 12px 20px 12px 0;
   border-radius: 8px 0px 8px 8px;
   //background: #F2F5FC;