This commit is contained in:
xuziqiang
2024-05-15 17:29:42 +08:00
commit d0155dbe3c
7296 changed files with 1832517 additions and 0 deletions

View File

@@ -0,0 +1,293 @@
<template>
<ns-view-add-form :schemas="formSchema" :model="data" :formLayout="formLayout"
title="添加页面" api="123"
/>
</template>
<script lang="ts">
import {defineComponent, provide, reactive, ref} from 'vue';
import {NsModal} from '/nerv-lib/component/modal';
export default defineComponent({
props: {
data: Object
},
setup() {
const formLayout = 'ns-vertical-form';
let formSchema = ref([
{
field: 'volume',
label: '容量',
component: 'NsSlider',
componentProps: {
min: 1,
max: 150,
defaultValue: 10,
}
},
{
field: 'flavor',
label: '实例规格',
component: 'NsFilterTable',
componentProps: {
tableConfig: {
api: '/api/iaas/iaas/objs/Flavor',
rowSelection: {
type: 'radio',
},
params: {
pageSize: 100000,
},
columns: [
{
title: '规格名称',
dataIndex: 'name',
},
{
title: 'VCPU数量',
dataIndex: 'count',
},
{
title: '内存',
dataIndex: 'ram',
},
],
rowKey: 'ID',
},
formConfig: {
schemas: [
{
field: 'cpu',
label: 'CPU',
component: 'NsSelectApi',
defaultValue: ' ',
autoAddLink: true,
dynamicParams: {
ram: 'fieldLink.ram.ram',
},
immediate: true,
immediateName: 'onSelect',
componentProps: {
api: '/api/iaas/iaas/objs/FlavorCPU',
resultField: "data",
labelField: "cpuCount",
valueField: "cpuCount",
placeholder: "请选择CsPU",
firstOption: {
label: '全部',
value: ' ',
}
}
},
{
field: 'ram',
label: '内存',
component: 'NsSelectApi',
defaultValue: ' ',
autoAddLink: true,
dynamicParams: {
cpu: 'fieldLink.cpu.cpuCount',
},
immediate: true,
immediateName: 'onSelect',
componentProps: {
api: '/api/iaas/iaas/objs/FlavorRam',
resultField: "data",
labelField: "ram",
valueField: "ram",
placeholder: "请选择内存",
firstOption: {
label: '全部',
value: ' ',
}
}
},
],
}
}
},
{
field: 'system-disk',
label: '系统盘',
component: 'NsDiskCombination',
componentProps: {
remove: false,
combinationOptions: [
{
field: 'type',
label: '',
component: 'NsSelect',
componentProps: {
label: 'type',
options: [
{
"value": "ssd",
"label": "SSD"
},
{
"value": "local-ssd",
"label": "本地盘-SSD"
}
],
defaultValue: 'SSD',
}
},
{
field: 'size',
label: '大小',
component: 'NsInputNumber',
defaultValue: 10,
rules: [
{
"type": "number",
"required": true,
"message": "请输入大小"
},
{
"type": "number",
"min": 10,
"max": 16384
}
]
}
]
}
},
{
field: 'disk',
label: '数据盘',
component: 'NsDiskCombination',
componentProps: {
add: true,
addName: '增加一块数据盘',
// addIcon: 'add',
limitCount: 5,
limitMsg: '您还可以增加的数据盘块数为:',
combinationOptions: [
{
field: 'type',
label: '',
component: 'NsSelect',
componentProps: {
options: [
{
"value": "SSD",
"label": "SSD"
},
{
"value": "local-ssd",
"label": "本地盘-SSD"
}
],
defaultValue: 'SSD',
},
rules: [
{
required: true,
message: "请选择"
},
]
},
{
field: 'size',
label: '大小',
component: 'NsInputNumber',
defaultValue: 10,
rules: [
{
type: "number",
required: true,
message: "请输入大小"
},
{
type: "number",
min: 10,
max: 16384,
message: '取值范围在1026348',
}
]
},
{
label: "数量",
field: "count",
component: "NsInputNumber",
defaultValue: 1,
rules: [
{
type: "number",
required: true,
message: '请输入数量',
},
{
type: "number",
min: 1,
max: 15,
message: '取值范围在115',
}
]
},
]
}
},
{
field: 'port',
component: 'NsRange',
label: '端口范围',
componentProps: {
min: {
defaultValue: 10,
rules: [
{
required: true,
message: '请输入最小值',
},
{
type: "number",
min: 5,
max: 200,
message: '取值范围在5200',
},
]
},
max: {
defaultValue: 150,
rules: [
{
required: true,
message: '请输入最大值',
},
{
type: "number",
min: 1,
max: 65535,
message: '取值范围在165535',
}
],
}
}
}
]);
const confirm = () => {
NsModal.confirm({
title: 'Confirm',
content: 'Bla bla ...',
okText: '确认',
cancelText: '取消',
});
};
return {
formSchema,
formLayout,
confirm,
};
},
beforeCreate() {
},
});
</script>

View File

@@ -0,0 +1,144 @@
<template>
<!-- 按钮 -->
<NsButton>default</NsButton>
<ns-button type="primary" size="large">prime</ns-button>
<ns-button type="primary" size="large" :loading="true">loading</ns-button>
<!--复选框-->
<ns-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="onCheckAllChange">
Check all
</ns-checkbox>
<ns-checkbox-group v-model:value="checkedList" :options="plainOptions" />
<!--单选-->
<div style="margin-top: 20px">
<a-radio-group v-model:value="radio.radioValue" @change="onChangeRadio">
<a-radio :value="0">北京</a-radio>
<a-radio :value="1">上海</a-radio>
</a-radio-group>
</div>
<!--滑动输入条-->
<div style="margin-top: 20px; width: 300px">
<!--<a-slider :value="0" :min="1" :max="20" />-->
<ns-slider></ns-slider>
<!--<ns-slider></ns-slider>-->
</div>
<!--输入框-->
<div style="margin-top: 20px; width: 300px">
<ns-input placeholder="请输入" @change="inputChange" v-model:value="inputValue" />
</div>
<!--密码框-->
<div style="margin-top: 20px; width: 300px">
<ns-input-password />
</div>
<!--开关-->
<div style="margin-top: 20px">
<ns-switch
checked-children=""
un-checked-children=""
:checked="checked"
@change="onSwitchChange"
/>
</div>
<!--下拉选项-->
<div style="margin-top: 20px">
<ns-input>
<template #addonBefore>
<a-select v-model:value="value3" style="width: 90px">
<a-select-option value="Http://">Http://</a-select-option>
<a-select-option value="Https://">Https://</a-select-option>
</a-select>
</template>
<template #addonAfter>
<a-select style="width: 80px">
<a-select-option value=".com">.com</a-select-option>
<a-select-option value=".jp">.jp</a-select-option>
<a-select-option value=".cn">.cn</a-select-option>
<a-select-option value=".org">.org</a-select-option>
</a-select>
</template>
</ns-input>
</div>
<!-- 日期选择 -->
<div style="margin-top: 16px">
<a-space direction="vertical">
<ns-date-picker />
<ns-month-picker placeholder="Select month" />
<ns-range-picker />
<ns-week-picker placeholder="Select week" />
</a-space>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch } from 'vue';
const plainOptions = ['Apple', 'Pear', 'Orange'];
export default defineComponent({
setup: () => {
const value3 = ref<string>('jack');
//复选框
const state = reactive({
indeterminate: true,
checkAll: false,
checkedList: ['Apple', 'Orange'],
});
const onCheckAllChange = (e: any) => {
Object.assign(state, {
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
});
};
watch(
() => state.checkedList,
(val) => {
state.indeterminate = !!val.length && val.length < plainOptions.length;
state.checkAll = val.length === plainOptions.length;
}
);
// 单选
const radio = reactive({
radioValue: 1,
});
const onChangeRadio = function (e) {
console.log('radio: ' + e.target.value);
};
//开关
const switchState = reactive({
checked: true,
});
const onSwitchChange = function (e) {
switchState.checked = e;
};
//输入框
const inputState = reactive({
inputValue: 'hello',
});
const inputChange = function (e) {
console.log(e.target.value);
};
return {
...toRefs(state),
plainOptions,
onCheckAllChange,
...toRefs(switchState),
switchState,
onSwitchChange,
inputState,
inputChange,
value3,
radio,
onChangeRadio,
};
},
});
</script>

View File

@@ -0,0 +1,96 @@
<template>
<div>
<ns-form :schemas="formConfig.schemas" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'new',
setup() {
const formConfig = {
schemas: [
{
field: 'cpu',
label: 'CPU',
component: 'NsSelectApi',
autoAddLink: true,
dynamicParams: {
ram: 'fieldLink.ram.ram',
},
componentProps: {
api: '/api/iaas/iaas/objs/FlavorCPU',
resultField: 'data',
labelField: 'cpuCount',
valueField: 'cpuCount',
// immediate: true,
placeholder: '请选择CPU',
firstOption: {
label: '全部',
value: ' ',
},
},
},
{
field: 'ram',
label: '内存',
component: 'NsSelectApi',
autoAddLink: true,
// // 值依赖
dynamicParams: {
cpu: 'fieldLink.cpu.cpuCount',
},
componentProps: {
api: '/api/iaas/iaas/objs/FlavorRam',
resultField: 'data',
labelField: 'ram',
valueField: 'ram',
// immediate: true,
placeholder: '请选择内存',
firstOption: {
label: '全部',
value: ' ',
},
onSelect: () => {
// unref(nsTableRef).triggerSubmit();
},
},
},
{
field: 'ram1',
label: '内存11',
component: 'NsSelectApi',
autoAddLink: true,
// // 值依赖
// dynamicParams: {
// cpu: 'fieldLink.cpu.cpuCount',
// },
componentProps: {
api: '/api/iaas/iaas/objs/FlavorRam',
resultField: 'data',
labelField: 'ram',
valueField: 'ram',
// immediate: true,
placeholder: '请选择内存',
// firstOption: {
// label: '全部',
// value: ' ',
// },
onSelect: () => {
// unref(nsTableRef).triggerSubmit();
},
},
},
],
params: {},
};
return {
formConfig,
};
},
});
</script>
<style lang="scss" scoped></style>

View File

@@ -0,0 +1,10 @@
<template>
<div>测试内容</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Test',
});
</script>