update: 高级搜索组件

2025-03-15 17:02:06 +08:00
parent 26d04feae8
commit 5afb84e6c0
3 changed files with 209 additions and 129 deletions
--- a/src/components/AdvanceSearch/index.vue
+++ b/src/components/AdvanceSearch/index.vue
@@ -1,70 +1,105 @@
 <template>
-  <div style="padding: 12PX;">
-    <span class="title">高级筛选</span>
-    <d-form style="margin-top: 20px" layout="vertical">
+  <div>
+    <slot name="title"></slot>
+    <d-form layout="vertical">
      <d-row :gutter="16">
        <d-col :span="8">
          <d-form-item field="license" label="license">
-            <d-input placeholder="请输入license" v-model="formData.license"/>
+            <d-input placeholder="请输入license名称" v-model="formData.licenseName"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="name" label="软件/组件名称">
-            <d-input placeholder="请输入软件/组件名称" v-model="formData.name"/>
+            <d-input placeholder="请输入软件/组件名称" v-model="formData.searchWord"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
-          <d-form-item field="licenseStrength" label="license强弱" help-tips="license强弱说明">
-            <d-input v-model="formData.licenseStrength"/>
+          <d-form-item field="licenseRisk" label="license集成风险" help-tips="license集成风险说明">
+            <d-select :options="licenseRiskList" v-model="formData.licenseStrengths"></d-select>
          </d-form-item>
        </d-col>
      </d-row>
      <d-row :gutter="16">
        <d-col :span="8">
          <d-form-item field="version" label="软件版本">
-            <d-input v-model="formData.version"/>
+            <d-input v-model="formData.softwareVersion"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="dependency" label="依赖软件">
-            <d-input v-model="formData.dependency"/>
+            <d-input v-model="formData.dependentSoftware"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="language" label="编程语言">
-            <d-input v-model="formData.language"/>
+            <d-select :options="languageList" v-model="formData.programmingLanguage"></d-select>
          </d-form-item>
        </d-col>
      </d-row>
      <d-row :gutter="16">
        <d-col :span="8">
          <d-form-item field="date" label="版本发布日期">
-            <d-input v-model="formData.date"/>
+            <d-range-date-picker-pro v-model="formData.dateRange"  style="width: 100%;"/>
          </d-form-item>
        </d-col>
      </d-row>
-      <gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
-        <d-button variant="solid" @click="submitForm">搜索</d-button>
-        <d-button @click="cancel">取消</d-button>
-      </gc-form-operation>
+
+      <slot name="operation">
+        <gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
+          <d-button variant="solid" @click="submitForm">搜索</d-button>
+          <d-button @click="cancel">取消</d-button>
+        </gc-form-operation>
+      </slot>
    </d-form>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, defineEmits } from 'vue';
+import { ref, defineEmits, defineProps, watch } from 'vue';
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({
+      licenseName: '',
+      searchWord: '',
+      licenseStrengths: '',
+      softwareVersion: '',
+      dependentSoftware: '',
+      programmingLanguage: '',
+      dateRange: ['', '']
+    })
+  }
+})
+const emit = defineEmits(['submit', 'cancel', 'update:modelValue']);
+const languageList = ref([]);
+const licenseRiskList = ref([
+  {
+    name: '高',
+    value: 'high'
+  },
+  {
+    name: '中',
+    value: 'medium'
+  },
+  {
+    name: '低',
+    value: 'low'
+  }
+])

-const emit = defineEmits(['submit', 'cancel']);
+const formData = ref({...props.modelValue});

-const formData = ref({
-  license: '',
-  name: '',
-  licenseStrength: '',
-  version: '',
-  dependency: '',
-  language: '',
-  date: ''
-});
+watch(() => props.modelValue, (newVal) => {
+  if (JSON.stringify(newVal) !== JSON.stringify(formData.value)) {
+    formData.value = {...newVal};
+  }
+}, { deep: true });
+
+watch(formData, (newVal) => {
+  if (JSON.stringify(newVal) !== JSON.stringify(props.modelValue)) {
+    emit('update:modelValue', {...newVal});
+  }
+}, { deep: true });

 const submitForm = () => {
  emit('submit', formData.value);
@@ -72,21 +107,48 @@ const submitForm = () => {

 const cancel = () => {
  formData.value = {
-    license: '',
-    name: '',
-    licenseStrength: '',
-    version: '',
-    dependency: '',
-    language: '',
-    date: ''
+    licenseName: '',
+    searchWord: '',
+    licenseStrengths: '',
+    softwareVersion: '',
+    dependentSoftware: '',
+    programmingLanguage: '',
+    dateRange: ['', '']
  }
  emit('cancel');
+  emit('update:modelValue', formData.value);
 }
+
+const getLanguageList = () => {
+  const mockData = [
+      {
+          "key": "c++",
+          "name": "C++"
+      },
+      {
+          "key": "C",
+          "name": "C"
+      },
+      {
+          "key": "PYTHON",
+          "name": "PYTHON"
+      },
+      {
+          "key": "JAVA",
+          "name": "JAVA"
+      }
+  ]
+
+  languageList.value = mockData.map(item => {
+    return {
+      name: item.name,
+      value: item.key
+    }
+  })
+}
+getLanguageList();
 </script>

 <style scoped lang="scss">
-.title {
-  font-size: 16px;
-  font-weight: bold;
-}
+
 </style>
--- a/src/views/Jyh/Home/index.vue
+++ b/src/views/Jyh/Home/index.vue
@@ -6,10 +6,33 @@
        <h1>可信开源代码库</h1>
      </div>
      <div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }">
-        <d-input ref="searchInput" placeholder="请输入搜索关键字" @focus="inputFocus" @blur="inputBlur"
+        <d-input ref="searchInput" placeholder="请输入搜索关键字" @focus="inputFocus" @blur="inputBlur" :autocomplete="'off'"
        v-model="searchStr">
          <template #prepend>
-            <d-select v-model="searchType" :options="searchOptions"></d-select>
+            <d-dropdown @toggle="onCateToggle($event)">
+              <div class="flex items-center gap-1 cursor-pointer">
+                {{ selectedCate }} 
+                <d-icon :rotate="cateRotate" name="icon-chevron-down-2"></d-icon>
+              </div>
+              <template #menu>
+                <ul class="list-menu">
+                  <li class="menu-item" @click="onCategoryChange('组件/软件')">组件/软件</li>
+                  <d-dropdown :position="position" :offset="0">
+                    <li class="menu-item">
+                      行业
+                      <i class="icon icon-chevron-right"></i>
+                    </li>
+                    <template #menu>
+                      <ul class="list-menu">
+                        <li class="menu-item" v-for="option in industryOptions" @click="onCategoryChange(option)">
+                            {{ option }}
+                        </li>
+                      </ul>
+                    </template>
+                  </d-dropdown>
+                </ul>
+              </template>
+            </d-dropdown>
          </template>
          <template #append>
            <div class="advanced-search" @click="openAdvancedSearch">
@@ -20,9 +43,13 @@
          </template>
        </d-input>
        <d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" close-scope="'blank'"
-        :offset="offset">
+        :offset="offset" :clickOutside="closeOutside">
          <div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px'}">
-            <AdvanceSearch @submit="submit($event)" @cancel="isOpen = false"/>
+            <AdvanceSearch @submit="submit($event)" @cancel="isOpen = false" class="p-20">
+              <template #title>
+                <span class="title">高级筛选</span>
+              </template>
+            </AdvanceSearch>
          </div>
        </d-dropdown-menu>
        <d-button color="primary" variant="solid" @click="search">搜索</d-button>
@@ -34,15 +61,15 @@
            <img src="@/assets/imgs/home/informIcon@2x.png">
            <span>信息公示</span>
          </div>
-          <a class="devui-link">更多 ></a>
+          <a class="devui-link" @click="checkMore">更多 ></a>
        </div>
        <div class="info-content">
          <d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">
-            <d-timeline-item style="cursor: pointer;" v-for="(item, index) in infoList" :key="index"
+            <d-timeline-item v-for="(item, index) in infoList" :key="index"
            :dot-color="item.dotColor" :line-color="'var(--devui-form-control-line-hover)'">
              <template #default>
                <div style="display: flex; justify-content: space-between;">
-                  <div>{{ item.text }}</div>
+                  <div class="cursor-pointer" @click="openWarningDetail(item.text)">{{ item.text }}</div>
                  <div style="display: flex;  align-items: center; gap: 8px;">
                    <d-icon name="icon-time"></d-icon>
                    {{ item.time }}
@@ -69,11 +96,14 @@ const route = useRoute();
 const router = useRouter();
 const inputGlow = ref(false);
 const searchStr = ref('');
+const position = ref(['right-start', 'right-end']);
+const industryOptions = ref(['通信', '军工', '金融', '能源'])
 const searchType = ref('组件/软件');
 const searchOptions = ref(['组件/软件']);
 const offset = ref({ mainAxis: 7 , crossAxis: -10 });
 const isOpen = ref(false);
 const rotate = ref(0);
+const cateRotate = ref(0);
 const infoList = ref([
  {
    text: '公告1',
@@ -97,7 +127,7 @@ const infoList = ref([

 const homeSearch = ref(null);
 const dropdownWidth = ref(0);
-
+const selectedCate = ref('组件/软件');

 const searchInput = ref(null);
 const openAdvancedSearch = () => {
@@ -106,9 +136,13 @@ const openAdvancedSearch = () => {
  inputGlow.value = isOpen.value;
 };

+const closeOutside = () => {
+  return false
+}
+
 const submit = (formData) => {
  isOpen.value = false;
-  router.push({ name: 'Search', query: { ...formData }});
+  router.push({ name: 'Search', query: { ...formData, searchType: selectedCate.value }});
 };

 const inputFocus = () => {
@@ -129,6 +163,22 @@ const search = () => {
  router.push({ name: 'Search', query: { val: searchStr.value || '', type: route?.query?.type || 'License' }});
 };

+const onCategoryChange = (cate) => {
+  selectedCate.value = cate;
+}
+
+const onCateToggle = (event) => {
+  cateRotate.value = event ? 180 : 0;
+}
+
+const checkMore = () => {
+  router.push({ name: 'PersonalCenter' });
+}
+
+const openWarningDetail = (event) => {
+  console.log(event)
+}
+
 let resizeObserver: ResizeObserver | null = null;

 onMounted(() => {
@@ -295,5 +345,27 @@ onBeforeUnmount(() => {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }

+.menu-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 4px;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--devui-list-item-hover-bg, #f2f5fc);
+      color: var(--devui-list-item-hover-text, #526ecc);
+    }
+}

+.list-menu {
+    padding: 8px;
+    margin: 0;
+    width: 100px;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 500;
+}
 </style>
--- a/src/views/Jyh/Search/Components/OssQuery.vue
+++ b/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;