116 lines
3.3 KiB
Vue
116 lines
3.3 KiB
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';
|
|
import { searchLanguageList } from '@/api/jyh'
|
|
|
|
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 = async() => {
|
|
const res: any = await searchLanguageList();
|
|
if (!res.error) {
|
|
languageList.value = res.data.data;
|
|
}
|
|
}
|
|
getLanguageList();
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style> |