From db6c8388b3493c5f5a7d2582480f9c1d2cb1a59a Mon Sep 17 00:00:00 2001
From: zmj <1493694146@qq.com>
Date: Thu, 4 Jul 2024 10:11:38 +0800
Subject: [PATCH] add
---
package-lock.json | 98 ++++++++
src/components/generateTable/genBtn.vue | 39 +++
src/components/generateTable/index.vue | 236 ++++++++++++++++++
.../components/header/user-drop-down.vue | 2 +-
src/views/workbench/{index.vue => index..vue} | 0
src/views/workbench/index2.vue | 25 ++
src/views/workbench/index3.vue | 220 ++++++++++++++++
7 files changed, 619 insertions(+), 1 deletion(-)
create mode 100644 src/components/generateTable/genBtn.vue
create mode 100644 src/components/generateTable/index.vue
rename src/views/workbench/{index.vue => index..vue} (100%)
create mode 100644 src/views/workbench/index2.vue
create mode 100644 src/views/workbench/index3.vue
diff --git a/package-lock.json b/package-lock.json
index c7558e2..ef8d5fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"license": "MIT",
"dependencies": {
"@element-plus/icons-vue": "^2.0.6",
+ "@form-create/element-ui": "^3.2.0",
"@highlightjs/vue-plugin": "^2.1.0",
"@wangeditor/editor": "^5.1.12",
"@wangeditor/editor-for-vue": "^5.1.12",
@@ -704,6 +705,103 @@
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
},
+ "node_modules/@form-create/component-elm-checkbox": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmmirror.com/@form-create/component-elm-checkbox/-/component-elm-checkbox-3.2.0.tgz",
+ "integrity": "sha512-6F6iWzTf0+km4cGKTS8GGe8vXl7Goao2GdmwZWBOG0tsMrx52m/ZGgcWCYHqKx3zkibPpXdqyxuMnLYvb1epfw==",
+ "dependencies": {
+ "@form-create/utils": "^3.2.0"
+ }
+ },
+ "node_modules/@form-create/component-elm-frame": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmmirror.com/@form-create/component-elm-frame/-/component-elm-frame-3.2.0.tgz",
+ "integrity": "sha512-XJnYRwZBaViqSF4oQpPucmQiMctG9mAPeNpggUJG8rYZv/IxPb4qNovWaZsqfiCY8wyKtRTkWqqZFe9r9ubGUg==",
+ "dependencies": {
+ "@form-create/utils": "^3.2.0"
+ }
+ },
+ "node_modules/@form-create/component-elm-group": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmmirror.com/@form-create/component-elm-group/-/component-elm-group-3.2.0.tgz",
+ "integrity": "sha512-3Vjdi/zro0HCOnsb2LgQQy7V+vcJxJNrDMn0npYjqARN/ragovHrdSAUqIZ4Ixelo/q3+6vr488tW/SCQjFUSg==",
+ "dependencies": {
+ "@form-create/utils": "^3.2.0"
+ }
+ },
+ "node_modules/@form-create/component-elm-radio": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmmirror.com/@form-create/component-elm-radio/-/component-elm-radio-3.2.0.tgz",
+ "integrity": "sha512-oIdkRxFQmwcN2fZDZul0qgIPHjb/0RvrmnZsDU2PYG7aJjxfGY1ZTdtyW21q3Un1ug7FircwqZK7zlbrVXMOWw==",
+ "dependencies": {
+ "@form-create/utils": "^3.2.0"
+ }
+ },
+ "node_modules/@form-create/component-elm-select": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmmirror.com/@form-create/component-elm-select/-/component-elm-select-3.2.0.tgz",
+ "integrity": "sha512-jzrrUyLSVDRZHTap3MYVqNub/A00X+hpLn2DCiFj6hNPZC63fuScHhIKWjkQSF4KBDGPYNfi69kFI7SCYPhhjQ==",
+ "dependencies": {
+ "@form-create/utils": "^3.2.0"
+ }
+ },
+ "node_modules/@form-create/component-elm-tree": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmmirror.com/@form-create/component-elm-tree/-/component-elm-tree-3.2.0.tgz",
+ "integrity": "sha512-7Cc6XaRcIc88XuOVs8pVHg9uuoByGqa56f8bQy05GsyQTBESV7tIXY78qWXCuDvc+MzE9BtTD7EEdK1YONqYmQ==",
+ "dependencies": {
+ "@form-create/utils": "^3.2.0"
+ }
+ },
+ "node_modules/@form-create/component-elm-upload": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmmirror.com/@form-create/component-elm-upload/-/component-elm-upload-3.2.0.tgz",
+ "integrity": "sha512-gg/195vj5PDi1U+0KBOXArTzYnwW63fxlRHyNpb8uolD+Bf9mGwAyLu9V1IfjFSyR33zw6ftQ7K8Q5W2HvN6CA==",
+ "dependencies": {
+ "@form-create/utils": "^3.2.0"
+ }
+ },
+ "node_modules/@form-create/component-subform": {
+ "version": "3.1.34",
+ "resolved": "https://registry.npmmirror.com/@form-create/component-subform/-/component-subform-3.1.34.tgz",
+ "integrity": "sha512-OJcFH/7MTHx7JLEjDK/weS27qfuFWAI+OK+gXTJ2jIt9aZkGWF/EWkjetiJLt5a0KMw4Z15wOS2XCY9pVK9vlA=="
+ },
+ "node_modules/@form-create/core": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmmirror.com/@form-create/core/-/core-3.2.0.tgz",
+ "integrity": "sha512-Mp/rxbbvBN1SXfIgpmJeRAgzhlNebCjUnzOzmUg9BvpZeKoxCiBkqDnqRfohMoBNTjDjUtg37WoiyDuzi4L0DQ==",
+ "dependencies": {
+ "@form-create/utils": "^3.2.0"
+ },
+ "peerDependencies": {
+ "vue": "^3.1.0"
+ }
+ },
+ "node_modules/@form-create/element-ui": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmmirror.com/@form-create/element-ui/-/element-ui-3.2.0.tgz",
+ "integrity": "sha512-r722YiMbSog6yN9rJxA6BdutExEj4ukHyTMAISnEDuwgCgy90oDXp4fSUHUscA6AqLh1+SKK5Rl3RMbp6jLzaA==",
+ "dependencies": {
+ "@form-create/component-elm-checkbox": "^3.2.0",
+ "@form-create/component-elm-frame": "^3.2.0",
+ "@form-create/component-elm-group": "^3.2.0",
+ "@form-create/component-elm-radio": "^3.2.0",
+ "@form-create/component-elm-select": "^3.2.0",
+ "@form-create/component-elm-tree": "^3.2.0",
+ "@form-create/component-elm-upload": "^3.2.0",
+ "@form-create/component-subform": "^3.1.34",
+ "@form-create/core": "^3.2.0",
+ "@form-create/utils": "^3.2.0"
+ },
+ "peerDependencies": {
+ "vue": "^3.1.0"
+ }
+ },
+ "node_modules/@form-create/utils": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmmirror.com/@form-create/utils/-/utils-3.2.0.tgz",
+ "integrity": "sha512-fqc7/l+US76NhloxMF3xE7UafYgxA8jU+t5WrAhmjaIAJ0vUNp6ScL/kdwN4nfOvjByZ/Q8BFQT0wqrp4lcgtw=="
+ },
"node_modules/@highlightjs/vue-plugin": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz",
diff --git a/src/components/generateTable/genBtn.vue b/src/components/generateTable/genBtn.vue
new file mode 100644
index 0000000..86e1321
--- /dev/null
+++ b/src/components/generateTable/genBtn.vue
@@ -0,0 +1,39 @@
+<template>
+ <el-button :type="config.type" :size="config.size" @click="emetClikc(config.click)">
+ <template #icon v-if="config.icon">
+ <icon :name="config.icon" />
+ </template>
+ {{ config.label }}
+ </el-button>
+</template>
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+const props = defineProps({
+ config: {
+ type: Object,
+ default: () => { }
+ }
+})
+
+
+const emits = defineEmits(['add', 'edit', 'del'])
+
+const emetClikc = (event) => {
+ switch (event) {
+ case 'handleCreate':
+ emits("add");
+ break;
+ case 'handleUpdate':
+ emits("edit");
+ break;
+ default:
+ emits("del");
+ break;
+ }
+ // emit(props.config.click)
+
+}
+
+
+
+</script>
\ No newline at end of file
diff --git a/src/components/generateTable/index.vue b/src/components/generateTable/index.vue
new file mode 100644
index 0000000..312a0ed
--- /dev/null
+++ b/src/components/generateTable/index.vue
@@ -0,0 +1,236 @@
+
+<!-- <template>
+ <el-card class="!border-none" shadow="never">
+ <el-form class="mb-[-16px]" :model="queryParams" inline>
+ <el-form-item :label="item.label" v-for="(item, index) in config.serchList" :key="index">
+ <el-select v-model="queryParams[item.value]" v-if="item.select" :disabled="isDisabled(item.value)">
+ <el-option :label="i.name" :value="i.value" v-for="i in item.select"
+ v-if="Array.isArray(item.select)"></el-option>
+ <el-option v-for="(i, index) in dictData[item.select]" :key="index" :label="i.name"
+ :value="parseInt(i.value)" v-else />
+ </el-select>
+ <el-input class="w-[280px]" v-model="queryParams[item.value]" clearable :placeholder="`请输入${item.label}`"
+ v-else />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="resetPage">查询</el-button>
+ <el-button @click="resetParams">重置</el-button>
+ </el-form-item>
+ </el-form>
+ </el-card>
+
+
+ <el-card class="!border-none mt-5" v-loading="pager.loading" shadow="never">
+ <div class="mt-4">
+ <el-table :data="pager.lists" @cell-click="handleCurrentChange" row-key="id"
+ @selection-change="handleSelectionChange">
+
+ <el-table-column type="selection" width="55" v-if="multipleChoice" />
+ <el-table-column :label="item[(Object.keys(item))[0]]" show-overflow-tooltip
+ v-for="item in config.tableList ">
+ <template #default="{ row }">
+ {{ (Object.keys(item))[0].includes('.') ?
+ row[(Object.keys(item))[0].split(".")[0]][(Object.keys(item))[0].split(".")[1]] :
+ row[(Object.keys(item))[0]] }}
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <div class="flex justify-end mt-4">
+ <pagination v-model="pager" @change="getLists" />
+ </div>
+ <div class="flex justify-end mt-4" v-if="multipleChoice">
+ <el-button type="primary" @click="confirm">确定</el-button>
+ </div>
+ </el-card>
+</template>
+
+<script lang="ts" setup>
+import { usePaging } from "@/hooks/usePaging"
+import { defineEmits } from "vue"
+import { useDictData } from '@/hooks/useDictOptions'
+
+const props = defineProps({
+ config: {
+ type: Object,
+ required: true
+ },
+ query: Object,
+ multipleChoice: Boolean
+})
+
+
+/**根据传入的config生成queryParmas */
+const getParmasFn = () => {
+ const arr = props.config.serchList.map((item: any) => (item.value))
+ const result = arr.reduce((acc: any, curr: any) => {
+ acc[curr] = '';
+ return acc;
+ }, {});
+ const mergedObj = Object.assign({}, result, props.query);
+ return mergedObj
+}
+
+
+/**判断是否需要disabled的搜索框*/
+const isDisabled = (key: String) => {
+ if (!props.query) return
+ return Object.keys(props.query).includes(key)
+}
+
+
+// 查询条件
+const queryParams = reactive({
+ ...getParmasFn()
+});
+
+// const { dictData } = useDictData(props.config.dictData)
+
+// 选中数据
+const emits = defineEmits(["customEvent"]);
+
+// 选中数据子父传递
+const handleCurrentChange = (value: any) => {
+ if (props.multipleChoice) return
+ emits("customEvent", value);
+};
+
+// 多选
+const multipleSelection = ref([])
+
+const handleSelectionChange = (val: any) => {
+ multipleSelection.value = val
+}
+
+const confirm = () => {
+ emits("customEvent", multipleSelection.value);
+}
+
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+ fetchFun: props.config.fetchFn,
+ params: queryParams,
+});
+
+getLists();
+</script> -->
+
+<template>
+ {{ queryParams }}
+ <el-card class="!border-none" shadow="never">
+ <el-form class="mb-[-16px]" :model="queryParams" inline>
+ <el-form-item :label="item.title" v-for="(item, index) in config.search" :key="index">
+ <el-input class="w-[280px]" v-model="queryParams[item.field]" clearable
+ :placeholder="item.props.placeholder" v-if="item.type == 'input'" />
+ <el-select v-if="item.type == 'select'" v-model="queryParams[item.field]">
+ <el-option :label="i.label" :value="i.value" v-for="i in item.options"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="resetPage">查询</el-button>
+ <el-button @click="resetParams">重置</el-button>
+ </el-form-item>
+ </el-form>
+ </el-card>
+ <el-card class="!border-none mt-5" shadow="never">
+ <genBtn :config="btn" v-for="btn in config.actions" @add="handAdd" />
+ <div class="mt-4">
+ <el-table :data="pager.lists">
+ <el-table-column :label="item.label" :prop="item.prop" v-show="item.show" show-overflow-tooltip
+ v-for="item in config.headers" :width="item.width && item.width" :fixed="item.fixed && item.fixed">
+ <!-- 图片 -->
+ <template #default="{ row }" v-if="item.component">
+ <el-image
+ :style="{ width: item.component[0].options.width, height: item.component[0].options.height }"
+ :src="row[item.prop]" />
+ </template>
+ <!-- 图片结束 -->
+
+ <!-- 操作按钮 -->
+ <template #default="{ row }" v-if="item.action">
+ <genBtn :config="btn" v-for="btn in item.action" @edit="handEdit(row)" @del="handDel(row)" />
+ </template>
+ <!-- 操作按钮结束 -->
+
+ </el-table-column>
+ </el-table>
+ </div>
+ <div class="flex justify-end mt-4">
+ <pagination v-model="pager" @change="getLists" />
+ </div>
+ </el-card>
+</template>
+
+<script setup name="asd">
+import { defineEmits, defineProps, ref, reactive } from "vue"
+import genBtn from "./genBtn.vue"
+import { usePaging } from "@/hooks/usePaging"
+
+const props = defineProps({
+ config: {
+ type: Object,
+ required: true
+ },
+ tabFetchFn: {
+ type: Function,
+ required: true
+ }
+})
+
+
+/**根据传入的config.serch生成queryParmas,主要用于重置按钮 */
+const getParmasFn = () => {
+ const arr = props.config.search.map((item) => (item.field))
+ const result = arr.reduce((acc, curr) => {
+ acc[curr] = '';
+ return acc;
+ }, {});
+ const mergedObj = Object.assign({}, result, props.query);
+
+ return mergedObj
+}
+
+
+
+const queryParams = reactive(
+ {
+ ...getParmasFn()
+ }
+)
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+ fetchFun: props.tabFetchFn,
+ params: queryParams,
+});
+
+
+
+//add
+const handAdd = () => {
+ // console.log9
+ alert("add")
+}
+
+// edit
+const handEdit = (row) => {
+ console.log(row)
+}
+
+
+// del
+const handdEL = (row) => {
+ console.log('DEL')
+}
+
+
+
+
+
+
+
+
+
+getLists();
+</script>
diff --git a/src/layout/default/components/header/user-drop-down.vue b/src/layout/default/components/header/user-drop-down.vue
index 371bfda..2077ede 100644
--- a/src/layout/default/components/header/user-drop-down.vue
+++ b/src/layout/default/components/header/user-drop-down.vue
@@ -2,7 +2,7 @@
<el-dropdown class="px-2" @command="handleCommand">
<div class="flex items-center">
<el-avatar :size="34" :src="userInfo.avatar" />
- <div class="ml-3 mr-1">{{ userInfo.name }}</div>
+ <div class="ml-3 mr-1">{{ userInfo.staff_name }}</div>
<icon name="el-icon-ArrowDown" />
</div>
diff --git a/src/views/workbench/index.vue b/src/views/workbench/index..vue
similarity index 100%
rename from src/views/workbench/index.vue
rename to src/views/workbench/index..vue
diff --git a/src/views/workbench/index2.vue b/src/views/workbench/index2.vue
new file mode 100644
index 0000000..57e05ed
--- /dev/null
+++ b/src/views/workbench/index2.vue
@@ -0,0 +1,25 @@
+<template>
+ <generateTable v-if="config.ref" :config="config" :tabFetchFn="apiGoodsListLists"></generateTable>
+</template>
+<script setup>
+import { apiDeliveryLists } from "@/api/delivery";
+import { ref, reactive } from "vue"
+import axios from "axios"
+import { apiGoodsListLists } from '@/api/goodsList'
+
+const config = ref({})
+axios.get('http://192.168.1.22:8544/index/view ')
+ .then(function (response) {
+ config.value = response.data
+ // 处理成功情况
+ console.log(response.data);
+ })
+ .catch(function (error) {
+ // 处理错误情况
+ console.log(error);
+ })
+ .finally(function () {
+ // 总是会执行
+ });
+</script>
+
diff --git a/src/views/workbench/index3.vue b/src/views/workbench/index3.vue
new file mode 100644
index 0000000..c51341f
--- /dev/null
+++ b/src/views/workbench/index3.vue
@@ -0,0 +1,220 @@
+<!--
+ * @Author: oneMiu
+ * @Date: 2022-05-17 14:33:56
+ * @LastEditors: oneMiu
+ * @LastEditTime: 2022-05-18 11:30:03
+ * @Desc:
+-->
+
+<template>
+ <section>
+ <FormCreate v-model="fApi" :rule="rule" :option="option" />
+ </section>
+</template>
+<script lang="ts">
+import {
+ defineComponent,
+ ref,
+ onMounted
+} from "vue";
+export default defineComponent({
+ name: "FormCreateFoarmat",
+ peops: ["formJson"],
+ setup(props, { emit }) {
+ let fApi = ref({})
+ console.log(props.formJson)
+ let rule = ref([{
+ "type": "select", // 生成组件的名称(就是表单的名称：如input，radio，checkbox，select，slider等)
+ "field": "s705v90rbcg3", // 表单组件的字段名称(就是表单的name属性，注：该必须唯一),自定义组件可以不配置
+ "title": "请假类型", // 组件的名称, 选填
+ "info": "", //提示信息
+ "effect": {
+ "fetch": ""
+ },
+ "props": {
+ // input的表单类型 <input type="">：注：有些表单类型form-create和element-ui专门做成了组件，可以在上面的type中直接用，所以下面有些类型如（radio）在这里会无效哦！！
+
+ // text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
+ // button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
+ // checkbox 定义复选框。
+ // color 定义拾色器。
+ // date 定义日期字段（带有 calendar 控件）
+ // datetime 定义日期字段（带有 calendar 和 time 控件）
+ // datetime-local 定义日期字段（带有 calendar 和 time 控件）
+ // month 定义日期字段的月（带有 calendar 控件）
+ // week 定义日期字段的周（带有 calendar 控件）
+ // time 定义日期字段的时、分、秒（带有 time 控件）
+ // email 定义用于 e-mail 地址的文本字段
+ // file 定义输入字段和 "浏览..." 按钮，供文件上传
+ // hidden 定义隐藏输入字段
+ // image 定义图像作为提交按钮
+ // number 定义带有 spinner 控件的数字字段
+ // password 定义密码字段。字段中的字符会被遮蔽。
+ // radio 定义单选按钮。
+ // range 定义带有 slider 控件的数字字段。
+ // reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
+ // search 定义用于搜索的文本字段。
+ // submit 定义提交按钮。提交按钮向服务器发送数据。
+ // tel 定义用于电话号码的文本字段。
+ // url 定义用于 URL 的文本字段。
+ "clearable": true
+ },
+ "options": [{
+ "value": "1",
+ "label": "事假"
+ },
+ {
+ "value": "2",
+ "label": "调休"
+ },
+ {
+ "label": "病假",
+ "value": "3"
+ },
+ {
+ "label": "年假",
+ "value": "4"
+ },
+ {
+ "label": "产假",
+ "value": "5"
+ },
+ {
+ "label": "陪产假",
+ "value": "6"
+ },
+ {
+ "label": "婚嫁",
+ "value": "7"
+ },
+ {
+ "label": "例假",
+ "value": "8"
+ },
+ {
+ "label": "丧假",
+ "value": "9"
+ },
+ {
+ "label": "哺乳假",
+ "value": "10"
+ }
+ ],
+ "_fc_drag_tag": "select",
+ "hidden": false,
+ "display": true,
+ "$required": ""
+ },
+ {
+ "type": "datePicker",
+ "field": "7su1moi7tfy8o",
+ "title": "开始时间",
+ "info": "",
+ "props": {
+ "type": "datetime",
+ "placeholder": "请选择开始时间"
+ },
+ "_fc_drag_tag": "datePicker",
+ "hidden": false,
+ "display": true,
+ "$required": "请选择开始时间"
+ },
+ {
+ "type": "datePicker",
+ "field": "3wm1moi7vuyvt",
+ "title": "结束时间",
+ "info": "",
+ "props": {
+ "type": "datetime",
+ "placeholder": "请选择结束时间"
+ },
+ "_fc_drag_tag": "datePicker",
+ "hidden": false,
+ "display": true,
+ "$required": "请选择结束时间"
+ },
+ {
+ "type": "input",
+ "field": "dyg1moi7xxx16",
+ "title": "时长（小时）",
+ "info": "",
+ "props": {
+ "type": "number",
+ "placeholder": "请输入时长",
+ "readonly": true
+ },
+ "_fc_drag_tag": "input",
+ "hidden": false,
+ "display": true,
+ "$required": "请输入时长"
+ },
+ {
+ "type": "input",
+ "field": "3qs1moi80lnhh",
+ "title": "请假事由",
+ "info": "",
+ "props": {
+ "type": "textarea",
+ "placeholder": "请输入请假事由",
+ "rows": 3
+ },
+ "_fc_drag_tag": "input",
+ "hidden": false,
+ "display": true,
+ "$required": ""
+ }
+ ])
+ let option = ref({
+ // 显示重置表单按扭
+ resetBtn: true,
+
+ // 表单提交按扭事件
+ onSubmit: formData => {
+ // alert(JSON.stringify(formData));
+
+ // console.log("获取表单中的数据：", formData);
+ emit('submitForm', formData)
+ //按钮进入提交状态
+ // this.fApi.btn.loading();
+
+ //重置按钮禁用
+ // this.fApi.resetBtn.disabled();
+
+ //按钮进入可点击状态
+ // this.fApi.btn.finish();
+ }
+ })
+ //获取Form表单 model对象
+ function getFormModelFn() {
+ console.log("Form表单 model对象：", this.fApi.model());
+ }
+
+ function getUserNameChange(e) {
+ this.$nextTick(() => {
+ this.rule[2].value = this.rule[0].value;
+ });
+ console.log(this.fApi.getValue("userName"));
+ }
+ onMounted(() => {
+
+ });
+ return {
+ option,
+ getFormModelFn,
+ rule,
+ fApi
+ };
+ },
+});
+</script>
+<style scoped>
+.el-form {
+ padding: 20px 30px 20px 0;
+ width: 100vw;
+ height: 500px;
+ overflow-y: scroll;
+ height: calc(100vh - 100px);
+ background-color: #fff;
+}
+</style>
+