mirror of https://github.com/1Panel-dev/1Panel
parent
22d9bdacf6
commit
d4c1caa26a
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div v-for="(p, index) in paramObjs" :key="index">
|
||||
<el-form-item :label="getLabel(p)" :prop="p.prop">
|
||||
<el-select
|
||||
v-model="form[p.key]"
|
||||
v-if="p.type == 'select'"
|
||||
:multiple="p.multiple"
|
||||
filterable
|
||||
@change="updateParam"
|
||||
>
|
||||
<el-option
|
||||
v-for="service in p.values"
|
||||
:key="service.label"
|
||||
:value="service.value"
|
||||
:label="service.label"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { App } from '@/api/interface/app';
|
||||
import { Rules } from '@/global/form-rules';
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
interface ParamObj extends App.InstallParams {
|
||||
prop: string;
|
||||
}
|
||||
const props = defineProps({
|
||||
form: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
params: {
|
||||
type: Array<App.InstallParams>,
|
||||
default: function () {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
let form = reactive({});
|
||||
let rules = reactive({});
|
||||
const params = computed({
|
||||
get() {
|
||||
return props.params;
|
||||
},
|
||||
set() {},
|
||||
});
|
||||
const emit = defineEmits(['update:form', 'update:rules']);
|
||||
const updateParam = () => {
|
||||
emit('update:form', form);
|
||||
};
|
||||
const paramObjs = ref<ParamObj[]>([]);
|
||||
|
||||
const handleParams = () => {
|
||||
rules = props.rules;
|
||||
if (params.value != undefined) {
|
||||
for (const p of params.value) {
|
||||
form[p.key] = p.value;
|
||||
paramObjs.value.push({
|
||||
prop: p.key,
|
||||
labelEn: p.labelEn,
|
||||
labelZh: p.labelZh,
|
||||
values: p.values,
|
||||
value: p.value,
|
||||
required: p.required,
|
||||
edit: p.edit,
|
||||
key: p.key,
|
||||
rule: p.rule,
|
||||
type: p.type,
|
||||
multiple: p.multiple,
|
||||
});
|
||||
if (p.required) {
|
||||
if (p.type === 'select') {
|
||||
rules[p.key] = [Rules.requiredSelect];
|
||||
} else {
|
||||
rules[p.key] = [Rules.requiredInput];
|
||||
}
|
||||
}
|
||||
}
|
||||
emit('update:rules', rules);
|
||||
updateParam();
|
||||
}
|
||||
};
|
||||
|
||||
const getLabel = (row: ParamObj): string => {
|
||||
const language = useI18n().locale.value;
|
||||
if (language == 'zh') {
|
||||
return row.labelZh;
|
||||
} else {
|
||||
return row.labelEn;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
handleParams();
|
||||
});
|
||||
</script>
|
Loading…
Reference in new issue