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>
+