Situation-Awareness-Platform-Frontend/src/components/AdvanceSearch/index.vue

<template>
  <div>
    <slot name="title"></slot>
    <d-form :layout="props.layout" :label-align="'end'">
      <d-row :gutter="16">
        <d-col :span="8">
          <d-form-item field="name" label="软件名称">
            <d-input placeholder="请输入软件名称" v-model="formData.searchWord"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="version" label="软件版本">
            <d-input v-model="formData.softwareVersion"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="license" label="license">
            <d-input placeholder="请输入license名称" v-model="formData.licenseName"/>
          </d-form-item>
        </d-col>
      </d-row>
      <d-row :gutter="16">
        <d-col :span="8">
          <d-form-item field="dependency" label="依赖软件名称">
            <d-input v-model="formData.dependentSoftware"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="language" label="编程语言">
            <d-select :options="languageList" v-model="formData.programmingLanguage"></d-select>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="date" label="版本发布日期">
            <d-range-date-picker-pro v-model="formData.dateRange"  style="width: 100%;"
            :placeholder="['开始日期', '结束日期']"/>
          </d-form-item>
        </d-col>
      </d-row>
      <slot name="operation">
        <gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
          <d-button style="width: 96px; height: 32px;" variant="solid" @click="submitForm">搜索</d-button>
          <d-button style="width: 96px; height: 32px;" @click="cancel">取消</d-button>
        </gc-form-operation>
      </slot>
    </d-form>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps, watch } from 'vue';
const props = defineProps({
  layout: {
    type: String,
    default: 'horizontal'
  },
  modelValue: {
    type: Object,
    default: () => ({
      licenseName: '',
      searchWord: '',
      softwareVersion: '',
      dependentSoftware: '',
      programmingLanguage: '',
      dateRange: ['', '']
    })
  }
})
const emit = defineEmits(['submit', 'cancel', 'update:modelValue']);
const languageList = ref([]);

const formData = ref({...props.modelValue});

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);
}

const cancel = () => {
  formData.value = {
    licenseName: '',
    searchWord: '',
    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">

</style>