merge junjie_dev into master

update: 高级搜索组件

Created-by: user8949
Commit-by: @user8949
Merged-by: user8949
Description: update: 高级搜索组件

See merge request: hk_openRepo/OpenRepo_Portal!10

src/components/AdvanceSearch/index.vue

@@ -1,70 +1,109 @@
 <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="props.layout" :label-size="'lg'">
       <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({
+  layout: {
+    type: String,
+    default: 'horizontal'
+  },
+  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 +111,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>