136 lines
3.5 KiB
Vue
136 lines
3.5 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';
|
|
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>
|