mirror of
https://gitee.com/ccnetcore/Yi
synced 2026-04-22 09:26:36 +08:00
feat:新增pure-admin前端
This commit is contained in:
chenchun
161
Yi.Pure.Vue3/src/views/schema-form/form/base.vue
Normal file
161
Yi.Pure.Vue3/src/views/schema-form/form/base.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
// https://plus-pro-components.com/components/form.html
|
||||
import "plus-pro-components/es/components/form/style/css";
|
||||
import {
|
||||
type PlusColumn,
|
||||
type FieldValues,
|
||||
PlusForm
|
||||
} from "plus-pro-components";
|
||||
|
||||
const state = ref<FieldValues>({
|
||||
status: "1",
|
||||
name: "",
|
||||
rate: 4,
|
||||
progress: 100,
|
||||
switch: true,
|
||||
time: new Date().toString(),
|
||||
endTime: []
|
||||
});
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入名称"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const columns: PlusColumn[] = [
|
||||
{
|
||||
label: "名称",
|
||||
width: 120,
|
||||
prop: "name",
|
||||
valueType: "copy",
|
||||
tooltip: "我是名称"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
width: 120,
|
||||
prop: "status",
|
||||
valueType: "select",
|
||||
options: [
|
||||
{
|
||||
label: "未解决",
|
||||
value: "0",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "已解决",
|
||||
value: "1",
|
||||
color: "blue"
|
||||
},
|
||||
{
|
||||
label: "解决中",
|
||||
value: "2",
|
||||
color: "yellow"
|
||||
},
|
||||
{
|
||||
label: "失败",
|
||||
value: "3",
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "执行进度",
|
||||
width: 200,
|
||||
prop: "progress"
|
||||
},
|
||||
{
|
||||
label: "评分",
|
||||
width: 200,
|
||||
prop: "rate",
|
||||
valueType: "rate"
|
||||
},
|
||||
{
|
||||
label: "是否显示",
|
||||
width: 100,
|
||||
prop: "switch",
|
||||
valueType: "switch"
|
||||
},
|
||||
{
|
||||
label: "时间",
|
||||
prop: "time",
|
||||
valueType: "date-picker"
|
||||
},
|
||||
{
|
||||
label: "数量",
|
||||
prop: "number",
|
||||
valueType: "input-number",
|
||||
fieldProps: { precision: 2, step: 2 }
|
||||
},
|
||||
{
|
||||
label: "梦想",
|
||||
prop: "gift",
|
||||
valueType: "radio",
|
||||
options: [
|
||||
{
|
||||
label: "诗",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "远方",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "美食",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "到期时间",
|
||||
prop: "endTime",
|
||||
valueType: "date-picker",
|
||||
fieldProps: {
|
||||
type: "datetimerange",
|
||||
startPlaceholder: "请选择开始时间",
|
||||
endPlaceholder: "请选择结束时间"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "说明",
|
||||
prop: "desc",
|
||||
valueType: "textarea",
|
||||
fieldProps: {
|
||||
maxlength: 10,
|
||||
showWordLimit: true,
|
||||
autosize: { minRows: 2, maxRows: 4 }
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const handleChange = (values: FieldValues, prop: PlusColumn) => {
|
||||
console.log(values, prop, "change");
|
||||
};
|
||||
const handleSubmit = (values: FieldValues) => {
|
||||
console.log(values, "Submit");
|
||||
};
|
||||
const handleSubmitError = (err: any) => {
|
||||
console.log(err, "err");
|
||||
};
|
||||
const handleReset = () => {
|
||||
console.log("handleReset");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PlusForm
|
||||
v-model="state"
|
||||
class="w-[450px] m-auto"
|
||||
:columns="columns"
|
||||
:rules="rules"
|
||||
label-position="right"
|
||||
@change="handleChange"
|
||||
@submit="handleSubmit"
|
||||
@submit-error="handleSubmitError"
|
||||
@reset="handleReset"
|
||||
/>
|
||||
</template>
|
||||
205
Yi.Pure.Vue3/src/views/schema-form/form/dialog.vue
Normal file
205
Yi.Pure.Vue3/src/views/schema-form/form/dialog.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
// https://plus-pro-components.com/components/dialog-form.html
|
||||
import "plus-pro-components/es/components/dialog-form/style/css";
|
||||
import {
|
||||
type PlusColumn,
|
||||
type FieldValues,
|
||||
PlusDialogForm
|
||||
} from "plus-pro-components";
|
||||
|
||||
const columns: PlusColumn[] = [
|
||||
{
|
||||
label: "名称",
|
||||
width: 120,
|
||||
prop: "name",
|
||||
valueType: "copy",
|
||||
tooltip: "名称最多显示6个字符"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
width: 120,
|
||||
prop: "status",
|
||||
valueType: "select",
|
||||
options: [
|
||||
{
|
||||
label: "未解决",
|
||||
value: "0",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "已解决",
|
||||
value: "1",
|
||||
color: "blue"
|
||||
},
|
||||
{
|
||||
label: "解决中",
|
||||
value: "2",
|
||||
color: "yellow"
|
||||
},
|
||||
{
|
||||
label: "失败",
|
||||
value: "3",
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "是否显示",
|
||||
width: 100,
|
||||
prop: "switch",
|
||||
valueType: "switch"
|
||||
},
|
||||
|
||||
{
|
||||
label: "时间",
|
||||
prop: "time",
|
||||
valueType: "date-picker"
|
||||
},
|
||||
{
|
||||
label: "数量",
|
||||
prop: "number",
|
||||
valueType: "input-number",
|
||||
fieldProps: { precision: 2, step: 2 }
|
||||
},
|
||||
{
|
||||
label: "城市",
|
||||
prop: "city",
|
||||
valueType: "cascader",
|
||||
options: [
|
||||
{
|
||||
value: "0",
|
||||
label: "陕西",
|
||||
children: [
|
||||
{
|
||||
value: "0-0",
|
||||
label: "西安",
|
||||
children: [
|
||||
{
|
||||
value: "0-0-0",
|
||||
label: "新城区"
|
||||
},
|
||||
{
|
||||
value: "0-0-1",
|
||||
label: "高新区"
|
||||
},
|
||||
{
|
||||
value: "0-0-2",
|
||||
label: "灞桥区"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "山西",
|
||||
children: [
|
||||
{
|
||||
value: "1-0",
|
||||
label: "太原",
|
||||
children: [
|
||||
{
|
||||
value: "1-0-0",
|
||||
label: "小店区"
|
||||
},
|
||||
{
|
||||
value: "1-0-1",
|
||||
label: "古交市"
|
||||
},
|
||||
{
|
||||
value: "1-0-2",
|
||||
label: "万柏林区"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "地区",
|
||||
prop: "place",
|
||||
tooltip: "请精确到门牌号",
|
||||
fieldProps: {
|
||||
placeholder: "请精确到门牌号"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "要求",
|
||||
prop: "demand",
|
||||
valueType: "checkbox",
|
||||
options: [
|
||||
{
|
||||
label: "四六级",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "计算机二级证书",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "普通话证书",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "梦想",
|
||||
prop: "gift",
|
||||
valueType: "radio",
|
||||
options: [
|
||||
{
|
||||
label: "诗",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "远方",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "美食",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "到期时间",
|
||||
prop: "endTime",
|
||||
valueType: "date-picker",
|
||||
fieldProps: {
|
||||
type: "datetimerange",
|
||||
startPlaceholder: "请选择开始时间",
|
||||
endPlaceholder: "请选择结束时间"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "说明",
|
||||
prop: "desc",
|
||||
valueType: "textarea",
|
||||
fieldProps: {
|
||||
maxlength: 10,
|
||||
showWordLimit: true,
|
||||
autosize: { minRows: 2, maxRows: 4 }
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const visible = ref(false);
|
||||
const values = ref<FieldValues>({});
|
||||
|
||||
const handleOpen = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="handleOpen">打开弹窗表单</el-button>
|
||||
<PlusDialogForm
|
||||
v-model:visible="visible"
|
||||
v-model="values"
|
||||
:form="{ columns }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
205
Yi.Pure.Vue3/src/views/schema-form/form/drawer.vue
Normal file
205
Yi.Pure.Vue3/src/views/schema-form/form/drawer.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
// https://plus-pro-components.com/components/drawer-form.html
|
||||
import "plus-pro-components/es/components/drawer-form/style/css";
|
||||
import {
|
||||
type PlusColumn,
|
||||
type FieldValues,
|
||||
PlusDrawerForm
|
||||
} from "plus-pro-components";
|
||||
|
||||
const columns: PlusColumn[] = [
|
||||
{
|
||||
label: "名称",
|
||||
width: 120,
|
||||
prop: "name",
|
||||
valueType: "copy",
|
||||
tooltip: "名称最多显示6个字符"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
width: 120,
|
||||
prop: "status",
|
||||
valueType: "select",
|
||||
options: [
|
||||
{
|
||||
label: "未解决",
|
||||
value: "0",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "已解决",
|
||||
value: "1",
|
||||
color: "blue"
|
||||
},
|
||||
{
|
||||
label: "解决中",
|
||||
value: "2",
|
||||
color: "yellow"
|
||||
},
|
||||
{
|
||||
label: "失败",
|
||||
value: "3",
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "是否显示",
|
||||
width: 100,
|
||||
prop: "switch",
|
||||
valueType: "switch"
|
||||
},
|
||||
|
||||
{
|
||||
label: "时间",
|
||||
prop: "time",
|
||||
valueType: "date-picker"
|
||||
},
|
||||
{
|
||||
label: "数量",
|
||||
prop: "number",
|
||||
valueType: "input-number",
|
||||
fieldProps: { precision: 2, step: 2 }
|
||||
},
|
||||
{
|
||||
label: "城市",
|
||||
prop: "city",
|
||||
valueType: "cascader",
|
||||
options: [
|
||||
{
|
||||
value: "0",
|
||||
label: "陕西",
|
||||
children: [
|
||||
{
|
||||
value: "0-0",
|
||||
label: "西安",
|
||||
children: [
|
||||
{
|
||||
value: "0-0-0",
|
||||
label: "新城区"
|
||||
},
|
||||
{
|
||||
value: "0-0-1",
|
||||
label: "高新区"
|
||||
},
|
||||
{
|
||||
value: "0-0-2",
|
||||
label: "灞桥区"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "山西",
|
||||
children: [
|
||||
{
|
||||
value: "1-0",
|
||||
label: "太原",
|
||||
children: [
|
||||
{
|
||||
value: "1-0-0",
|
||||
label: "小店区"
|
||||
},
|
||||
{
|
||||
value: "1-0-1",
|
||||
label: "古交市"
|
||||
},
|
||||
{
|
||||
value: "1-0-2",
|
||||
label: "万柏林区"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "地区",
|
||||
prop: "place",
|
||||
tooltip: "请精确到门牌号",
|
||||
fieldProps: {
|
||||
placeholder: "请精确到门牌号"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "要求",
|
||||
prop: "demand",
|
||||
valueType: "checkbox",
|
||||
options: [
|
||||
{
|
||||
label: "四六级",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "计算机二级证书",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "普通话证书",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "梦想",
|
||||
prop: "gift",
|
||||
valueType: "radio",
|
||||
options: [
|
||||
{
|
||||
label: "诗",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "远方",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "美食",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "到期时间",
|
||||
prop: "endTime",
|
||||
valueType: "date-picker",
|
||||
fieldProps: {
|
||||
type: "datetimerange",
|
||||
startPlaceholder: "请选择开始时间",
|
||||
endPlaceholder: "请选择结束时间"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "说明",
|
||||
prop: "desc",
|
||||
valueType: "textarea",
|
||||
fieldProps: {
|
||||
maxlength: 10,
|
||||
showWordLimit: true,
|
||||
autosize: { minRows: 2, maxRows: 4 }
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const visible = ref(false);
|
||||
const values = ref<FieldValues>({});
|
||||
|
||||
const handleOpen = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="handleOpen">打开抽屉表单</el-button>
|
||||
<PlusDrawerForm
|
||||
v-model:visible="visible"
|
||||
v-model="values"
|
||||
:form="{ columns }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
162
Yi.Pure.Vue3/src/views/schema-form/form/search.vue
Normal file
162
Yi.Pure.Vue3/src/views/schema-form/form/search.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
// https://plus-pro-components.com/components/search.html
|
||||
import "plus-pro-components/es/components/search/style/css";
|
||||
import { type PlusColumn, PlusSearch } from "plus-pro-components";
|
||||
|
||||
const state = ref({
|
||||
status: "0",
|
||||
time: new Date().toString()
|
||||
});
|
||||
|
||||
const columns: PlusColumn[] = [
|
||||
{
|
||||
label: "名称",
|
||||
prop: "name",
|
||||
valueType: "copy",
|
||||
tooltip: "名称最多显示6个字符"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
valueType: "select",
|
||||
options: [
|
||||
{
|
||||
label: "未解决",
|
||||
value: "0",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "已解决",
|
||||
value: "1",
|
||||
color: "blue"
|
||||
},
|
||||
{
|
||||
label: "解决中",
|
||||
value: "2",
|
||||
color: "yellow"
|
||||
},
|
||||
{
|
||||
label: "失败",
|
||||
value: "3",
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "时间",
|
||||
prop: "time",
|
||||
valueType: "date-picker"
|
||||
},
|
||||
{
|
||||
label: "数量",
|
||||
prop: "number",
|
||||
valueType: "input-number",
|
||||
fieldProps: { precision: 2, step: 2 }
|
||||
},
|
||||
{
|
||||
label: "城市",
|
||||
prop: "city",
|
||||
valueType: "cascader",
|
||||
options: [
|
||||
{
|
||||
value: "0",
|
||||
label: "陕西",
|
||||
children: [
|
||||
{
|
||||
value: "0-0",
|
||||
label: "西安",
|
||||
children: [
|
||||
{
|
||||
value: "0-0-0",
|
||||
label: "新城区"
|
||||
},
|
||||
{
|
||||
value: "0-0-1",
|
||||
label: "高新区"
|
||||
},
|
||||
{
|
||||
value: "0-0-2",
|
||||
label: "灞桥区"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "山西",
|
||||
children: [
|
||||
{
|
||||
value: "1-0",
|
||||
label: "太原",
|
||||
children: [
|
||||
{
|
||||
value: "1-0-0",
|
||||
label: "小店区"
|
||||
},
|
||||
{
|
||||
value: "1-0-1",
|
||||
label: "古交市"
|
||||
},
|
||||
{
|
||||
value: "1-0-2",
|
||||
label: "万柏林区"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "地区",
|
||||
prop: "place",
|
||||
tooltip: "请精确到门牌号",
|
||||
fieldProps: {
|
||||
placeholder: "请精确到门牌号"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "到期时间",
|
||||
prop: "endTime",
|
||||
valueType: "date-picker",
|
||||
fieldProps: {
|
||||
type: "datetimerange",
|
||||
startPlaceholder: "请选择",
|
||||
endPlaceholder: "请选择"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "奖励",
|
||||
prop: "price"
|
||||
},
|
||||
{
|
||||
label: "提成",
|
||||
prop: "percentage"
|
||||
}
|
||||
];
|
||||
|
||||
const handleChange = (values: any) => {
|
||||
console.log(values, "change");
|
||||
};
|
||||
const handleSearch = (values: any) => {
|
||||
console.log(values, "search");
|
||||
};
|
||||
const handleRest = () => {
|
||||
console.log("handleRest");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PlusSearch
|
||||
v-model="state"
|
||||
:columns="columns"
|
||||
:show-number="2"
|
||||
label-width="80"
|
||||
label-position="right"
|
||||
@change="handleChange"
|
||||
@search="handleSearch"
|
||||
@reset="handleRest"
|
||||
/>
|
||||
</template>
|
||||
204
Yi.Pure.Vue3/src/views/schema-form/form/steps.vue
Normal file
204
Yi.Pure.Vue3/src/views/schema-form/form/steps.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
// https://plus-pro-components.com/components/steps-form.html
|
||||
import "plus-pro-components/es/components/steps-form/style/css";
|
||||
import { PlusStepsForm } from "plus-pro-components";
|
||||
|
||||
const stepForm = ref([
|
||||
{
|
||||
title: "第一步",
|
||||
form: {
|
||||
labelPosition: "top",
|
||||
style: {
|
||||
width: "400px",
|
||||
margin: "40px auto"
|
||||
},
|
||||
modelValue: {},
|
||||
columns: [
|
||||
{
|
||||
label: "名称",
|
||||
width: 120,
|
||||
prop: "name",
|
||||
valueType: "copy",
|
||||
tooltip: "名称最多显示6个字符"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
width: 120,
|
||||
prop: "status",
|
||||
valueType: "select",
|
||||
options: [
|
||||
{
|
||||
label: "未解决",
|
||||
value: "0",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "已解决",
|
||||
value: "1",
|
||||
color: "blue"
|
||||
},
|
||||
{
|
||||
label: "解决中",
|
||||
value: "2",
|
||||
color: "yellow"
|
||||
},
|
||||
{
|
||||
label: "失败",
|
||||
value: "3",
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入名称"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "第二步",
|
||||
form: {
|
||||
labelPosition: "top",
|
||||
style: {
|
||||
width: "400px",
|
||||
margin: "40px auto"
|
||||
},
|
||||
labelWidth: "100",
|
||||
modelValue: {},
|
||||
columns: [
|
||||
{
|
||||
label: "标签",
|
||||
width: 120,
|
||||
prop: "tag"
|
||||
},
|
||||
{
|
||||
label: "执行进度",
|
||||
width: 200,
|
||||
prop: "progress"
|
||||
},
|
||||
{
|
||||
label: "评分",
|
||||
width: 200,
|
||||
prop: "rate",
|
||||
valueType: "rate"
|
||||
},
|
||||
{
|
||||
label: "是否显示",
|
||||
width: 100,
|
||||
prop: "switch",
|
||||
valueType: "switch"
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
tag: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入标签"
|
||||
}
|
||||
],
|
||||
progress: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入执行进度"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "第三步",
|
||||
form: {
|
||||
labelPosition: "top",
|
||||
style: {
|
||||
width: "400px",
|
||||
margin: "40px auto"
|
||||
},
|
||||
modelValue: {},
|
||||
columns: [
|
||||
{
|
||||
label: "时间",
|
||||
prop: "time",
|
||||
valueType: "date-picker"
|
||||
},
|
||||
{
|
||||
label: "要求",
|
||||
prop: "demand",
|
||||
valueType: "checkbox",
|
||||
options: [
|
||||
{
|
||||
label: "四六级",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "计算机二级证书",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "普通话证书",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "奖励",
|
||||
prop: "price"
|
||||
},
|
||||
{
|
||||
label: "提成",
|
||||
prop: "percentage"
|
||||
},
|
||||
{
|
||||
label: "说明",
|
||||
prop: "desc",
|
||||
valueType: "textarea",
|
||||
fieldProps: {
|
||||
maxlength: 10,
|
||||
showWordLimit: true,
|
||||
autosize: { minRows: 2, maxRows: 4 }
|
||||
}
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
time: [
|
||||
{
|
||||
required: true,
|
||||
trigger: "change",
|
||||
message: "请选择时间"
|
||||
}
|
||||
],
|
||||
demand: [
|
||||
{
|
||||
required: true,
|
||||
trigger: "change",
|
||||
message: "请选择要求"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
const active = ref(1);
|
||||
|
||||
const next = (actives: number, values: any) => {
|
||||
active.value = actives;
|
||||
console.log(active, values, stepForm.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PlusStepsForm
|
||||
v-model="active"
|
||||
simple
|
||||
class="w-[800px] m-auto"
|
||||
:data="stepForm as any"
|
||||
align-center
|
||||
@next="next"
|
||||
/>
|
||||
</template>
|
||||
Reference in New Issue
Block a user
