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.softwareName" />
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="version" label="软件版本">
            <d-input placeholder="请输入软件版本" 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 placeholder="请输入依赖软件名称" v-model="formData.dependentSoftware" />
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="language" label="编程语言">
            <d-select
              :options="languageList"
              :allow-clear="true"
              v-model="formData.programmingLanguage"
              placeholder="请选择编程语言"
            ></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>
      <d-row :gutter="16">
        <d-col :span="8">
          <d-form-item field="interestTag" label="兴趣标签">
            <d-input placeholder="请输入兴趣标签" v-model="formData.interestTag" />
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="industry" label="行业">
            <d-select
              :options="industryList"
              :allow-clear="true"
              v-model="formData.industry"
              placeholder="请选择行业"
            ></d-select>
<!--            <d-input v-model="formData.industry" 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, onMounted } from 'vue';
import { searchLanguageList } from '@/api/jyh';
import { useGlobalInfoStore } from '@/stores/Global';
const globalInfo = useGlobalInfoStore();
const industryList = globalInfo.industryList;
const props = defineProps({
  layout: {
    type: String,
    default: 'horizontal'
  },
  modelValue: {
    type: Object,
    default: () => ({
      licenseName: '',
      softwareName: '',
      softwareVersion: '',
      dependentSoftware: '',
      programmingLanguage: '',
      interestTag: '',
      industry: '',
      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 });
      localStorage.setItem('searchForm', JSON.stringify(newVal));
    }
  },
  { deep: true }
);

const submitForm = () => {
  emit('submit', formData.value);
};

const cancel = () => {
  formData.value = {
    licenseName: '',
    softwareName: '',
    softwareVersion: '',
    dependentSoftware: '',
    programmingLanguage: '',
    interestTag: '',
    industry: '',
    dateRange: ['', '']
  };
  emit('cancel');
  emit('update:modelValue', formData.value);
};

const getLanguageList = async () => {
  const res: any = await searchLanguageList();
  if (!res.error) {
    languageList.value = res.data.data;
  }
};
getLanguageList();

onMounted(() => {
  const _searchForm = localStorage.getItem('searchForm');
  if (_searchForm) {
    formData.value = JSON.parse(_searchForm);
  }
});
</script>

<style scoped lang="scss"></style>