push
This commit is contained in:
293
resource-service/src/view/form/add.vue
Normal file
293
resource-service/src/view/form/add.vue
Normal 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: '取值范围在10~26348',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "数量",
|
||||
field: "count",
|
||||
component: "NsInputNumber",
|
||||
defaultValue: 1,
|
||||
rules: [
|
||||
{
|
||||
type: "number",
|
||||
required: true,
|
||||
message: '请输入数量',
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
min: 1,
|
||||
max: 15,
|
||||
message: '取值范围在1~15',
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
field: 'port',
|
||||
component: 'NsRange',
|
||||
label: '端口范围',
|
||||
componentProps: {
|
||||
min: {
|
||||
defaultValue: 10,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入最小值',
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
min: 5,
|
||||
max: 200,
|
||||
message: '取值范围在5~200',
|
||||
},
|
||||
]
|
||||
},
|
||||
max: {
|
||||
defaultValue: 150,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入最大值',
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
min: 1,
|
||||
max: 65535,
|
||||
message: '取值范围在1~65535',
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
const confirm = () => {
|
||||
NsModal.confirm({
|
||||
title: 'Confirm',
|
||||
content: 'Bla bla ...',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
return {
|
||||
formSchema,
|
||||
formLayout,
|
||||
confirm,
|
||||
};
|
||||
},
|
||||
beforeCreate() {
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
144
resource-service/src/view/form/index.vue
Normal file
144
resource-service/src/view/form/index.vue
Normal 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>
|
||||
96
resource-service/src/view/form/new.vue
Normal file
96
resource-service/src/view/form/new.vue
Normal 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>
|
||||
10
resource-service/src/view/product/product.vue
Normal file
10
resource-service/src/view/product/product.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div>测试内容</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Test',
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user