vue修改表数据，数据回显

ruoyi-ui/src/api/system/form.js

@@ -16,6 +16,13 @@ export function getForm(id) {
     method: 'get'
   })
 }
+// 查询【请填写功能名称】详细
+export function getForm1(action) {
+  return request({
+    url: '/system/form/action/' + action,
+    method: 'get'
+  })
+}
 
 // 新增【请填写功能名称】
 export function addForm(action,ms) {

ruoyi-ui/src/main.js

@@ -1,12 +1,12 @@
-import Vue from 'vue'
-
+//import Vue from 'vue'
+import Vue from'vue'
 import Cookies from 'js-cookie'
 
 import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
-
+import FormList from "./views/system/autoform/config/FormList";
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/ruoyi.scss' // ruoyi css
 import App from './App'
@@ -66,6 +66,9 @@ Vue.config.productionTip = false
 new Vue({
   el: '#app',
   router,
+  components: { App,FormList },
   store,
+  template: '<App/>',
   render: h => h(App)
+
 })

ruoyi-ui/src/router/index.js

@@ -127,7 +127,7 @@ export const constantRoutes = [
         component: (resolve) => require(['@/views/system/autoform/createform/index'], resolve),
         //component: (resolve) => require(['@/https://www.baidu.com'], resolve),
         name: 'FormEdit',
-        meta: { title: '修改表单生成' }
+        meta: { title: '表单构建' }
       }
     ]
   }
@@ -138,9 +138,9 @@ export const constantRoutes = [
     children: [
       {
         path: 'configIndex',
-        component: (resolve) => require(['@/views/system/autoform/configIndex/index'], resolve),
+        component: (resolve) => require(['@/views/system/autoform/configIndex/index11'], resolve),
         name: 'configIndex',
-        meta: { title: '修改表单生成' }
+        meta: { title: '数据列表' }
       }
     ]
   }

ruoyi-ui/src/views/system/autoform/configIndex/config/FormLists.vue

@@ -0,0 +1,99 @@
+<script>
+  import draggable from 'vuedraggable'
+  import render from '@/utils/generator/render'
+
+  const components = {
+    itemBtns(h, element, index, parent) {
+      const { copyItem, deleteItem } = this.$listeners
+      return [
+        <span class="drawing-item-copy" title="复制" onClick={event => {
+        copyItem(element, parent); event.stopPropagation()
+      }}>
+    <i class="el-icon-copy-document" />
+        </span>,
+        <span class="drawing-item-delete" title="删除" onClick={event => {
+        deleteItem(index, parent); event.stopPropagation()
+      }}>
+    <i class="el-icon-delete" />
+        </span>
+    ]
+    }
+  }
+  /* render 方法里去渲染出组件，*/
+  const layouts = {
+    colFormItem(h, element, index, parent) {
+      // const { activeItem } = this.$listeners
+      let className = this.activeId === element.formId ? 'drawing-item active-from-item' : 'drawing-item'
+      if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
+
+      return (
+        <el-col span={element.span} class={className} >
+          <el-form-item label-width={element.labelWidth ? `${element.labelWidth}px` : null}
+                        label={element.label} required={element.required}>
+
+            <render key={element.renderKey} conf={element} onInput={ event => {
+              this.$set(element, 'defaultValue', event)
+            }} />
+          </el-form-item>
+    </el-col>
+    )
+    },
+    rowFormItem(h, element, index, parent) {
+      // const { activeItem } = this.$listeners
+      const className = this.activeId === element.formId ? 'drawing-row-item active-from-item' : 'drawing-row-item'
+      let child = renderChildren.apply(this, arguments)
+      if (element.type === 'flex') {
+        child = <el-row type={element.type} justify={element.justify} align={element.align}>
+          {child}
+          </el-row>
+      }
+      return (
+        <el-col span={element.span}>
+        <el-row gutter={element.gutter} class={className} >
+    <span class="component-name">{element.componentName}</span>
+        <draggable list={element.children} animation={340} group="componentsGroup" class="drag-wrapper">
+        {child}
+        </draggable>
+    </el-row>
+      </el-col>
+    )
+    }
+  }
+
+  function renderChildren(h, element, index, parent) {
+    if (!Array.isArray(element.children)) return null
+    return element.children.map((el, i) => {
+      const layout = layouts[el.layout]
+      if (layout) {
+        return layout.call(this, h, el, i, element.children)
+      }
+      return layoutIsNotFound()
+    })
+  }
+
+  function layoutIsNotFound() {
+    throw new Error(`没有与${this.element.layout}匹配的layout`)
+  }
+
+  export default {
+    components: {
+      render,
+      draggable
+    },
+    props: [
+      'element',
+      'index',
+      'drawingList',
+      'activeId',
+      'formConf'
+    ],
+    render(h) {
+      const layout = layouts[this.element.layout]
+
+      if (layout) {
+        return layout.call(this, h, this.element, this.index, this.drawingList)
+      }
+      return layoutIsNotFound()
+    }
+  }
+</script>

ruoyi-ui/src/views/system/autoform/configIndex/index.vue

@@ -281,7 +281,7 @@
           this.title = "修改"+this.tableTitle;
         });
       },/** 新增按钮操作 */
-      handleAdd() { 
+      handleAdd() {
         this.reset();
         this.open = true;
         this.title = "添加"+this.tableTitle;

ruoyi-ui/src/views/system/autoform/configIndex/index11.vue

@@ -0,0 +1,427 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true">
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:role:add']"
+        >新增</el-button>
+      </el-col>
+
+      <!--      <el-col :span="1.5">-->
+      <!--        <el-button-->
+      <!--          type="success"-->
+      <!--          icon="el-icon-edit"-->
+      <!--          size="mini"-->
+      <!--          :disabled="single"-->
+      <!--          @click="handleUpdate"-->
+      <!--          v-hasPermi="['system:role:edit']"-->
+      <!--        >修改</el-button>-->
+      <!--      </el-col>-->
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:role:remove']"
+        >删除</el-button>
+      </el-col>
+      <!--<el-col :span="1.5">
+        <el-button
+          type="warning"
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:post:export']"
+        >导出</el-button>
+      </el-col>-->
+    </el-row>
+
+    <el-table v-loading="loading" :data="formList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column v-for="item in formFiled" :label="item.inputTitle" :prop="item.inputName" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:role:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:role:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!--    <pagination-->
+    <!--      v-show="total>0"-->
+    <!--      :total="total"-->
+    <!--      :page.sync="queryParams.pageNum"-->
+    <!--      :limit.sync="queryParams.pageSize"-->
+    <!--      @pagination="getList"-->
+    <!--    />-->
+
+    <el-dialog title=""  :visible.sync="open" width="800px" append-to-body>
+      <el-form  :model="tableMap"
+                :size="formConf.size"
+                :label-position="formConf.labelPosition"
+                :disabled="formConf.disabled"
+                :label-width="formConf.labelWidth + 'px'">
+        <form-list v-for="(element,index) in drawingList"
+                   :key="element.renderKey"
+                   :drawing-list="drawingList"
+                   :element="element"
+                   :index="index"
+                   :active-id="activeId"
+                   :form-conf="formConf"/>
+      </el-form>
+      <div  class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog title=""  :visible.sync="open1" width="800px" append-to-body>
+      <el-form  :model="tableMap"
+                :size="formConf.size"
+                :label-position="formConf.labelPosition"
+                :disabled="formConf.disabled"
+                :label-width="formConf.labelWidth + 'px'">
+        <form-list v-for="(element,index) in drawingList"
+                   :key="element.renderKey"
+                   :drawing-list="drawingList"
+                   :element="element"
+                   :index="index"
+                   :active-id="activeId"
+                   :form-conf="formConf"/>
+      </el-form>
+      <div  class="dialog-footer">
+        <el-button type="primary" @click="update11">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+    import {getFromList,getForm,updateForm,delForm,addFrom11} from "@/api/system/autoform";
+
+    import  {getForm1} from "@/api/system/form";
+    import FormList from "../config/FormList";
+
+    import {
+        formConf
+    } from '@/utils/generator/config'
+
+    export default {
+        name: 'Form',
+        components:{
+            FormList
+
+        },
+        data() {
+            return {
+                formConf,
+                // 遮罩层
+                loading: true,
+                // 选中数组
+                ids: [],
+
+                // 非单个禁用
+                single: true,
+                seeForm: false,
+                // 非多个禁用
+                multiple: true,
+                // 总条数
+                total: 0,
+
+                // 弹出层标题
+                title: "",
+                // 是否显示弹出层
+                open: false,
+                open1: false,
+                // 角色表格数据
+                formList: [],
+                formFiled: [],
+                tableMap:{},
+                drawingList:{},
+                formToList:{},
+                // 是否显示弹出层（数据权限）
+                openDataScope: false,
+                // 日期范围
+                dateRange: [],
+                // 状态数据字典
+                statusOptions: [],
+                // 数据范围选项
+                // dataScopeOptions: [
+                //     {
+                //         value: "1",
+                //         label: "全部数据权限"
+                //     },
+                //     {
+                //         value: "2",
+                //         label: "自定数据权限"
+                //     },
+                //     {
+                //         value: "3",
+                //         label: "本部门数据权限"
+                //     },
+                //     {
+                //         value: "4",
+                //         label: "本部门及以下数据权限"
+                //     },
+                //     {
+                //         value: "5",
+                //         label: "仅本人数据权限"
+                //     }
+                // ],
+                // 查询参数
+                queryParams: {
+                    pageNum: 1,
+                    pageSize: 10,
+                    status: undefined
+                },
+                // 表单参数
+                form: {},
+                activeId:6,
+                defaultProps: {
+                    children: "children",
+                    label: "label"
+                },
+                // 表单校验
+                rules: {
+                    roleName: [
+                        { required: true, message: "角色名称不能为空", trigger: "blur" }
+                    ],
+                    roleKey: [
+                        { required: true, message: "权限字符不能为空", trigger: "blur" }
+                    ],
+                    roleSort: [
+                        { required: true, message: "角色顺序不能为空", trigger: "blur" }
+                    ]
+                },
+                tableName: this.$route.query.tableName,
+                tableTitle: this.$route.query.tableTitle,
+
+            };
+        },
+
+        created() {
+            this.getList();
+            this.getDicts("sys_normal_disable").then(response => {
+                this.statusOptions = response.data;
+            });
+
+        },
+        methods: {
+
+            getList() {
+                this.loading = true;
+                var formdata=new FormData();
+                formdata.append("tableName",this.tableName)
+                formdata.append("pageNum",this.queryParams.pageNum)
+                formdata.append("pageSize",this.queryParams.pageSize)
+                getFromList(formdata).then(response => {
+                    this.formFiled=JSON.parse(response.msg);
+                    this.formList = response.rows;
+                    this.total = response.total;
+                    this.loading = false;
+                });
+            },
+
+            // 取消按钮
+            cancel() {
+                this.open = false;
+                this.open1 = false;
+                this.reset();
+            },
+            // 取消按钮（数据权限）
+            cancelDataScope() {
+                this.openDataScope = false;
+                this.reset();
+            },
+            // 表单重置
+            reset() {
+                if (this.$refs.menu != undefined) {
+                    this.$refs.menu.setCheckedKeys([]);
+                }
+                this.form = {
+                };
+                this.resetForm("form");
+            },
+
+
+
+            /** 搜索按钮操作 */
+            handleQuery() {
+                this.queryParams.pageNum = 1;
+                this.getList();
+            },
+            /** 重置按钮操作 */
+            resetQuery() {
+                this.dateRange = [];
+                this.resetForm("queryForm");
+                this.handleQuery();
+            },
+            // 多选框选中数据
+            handleSelectionChange(selection) {
+                this.ids = selection.map(item => item.id)
+                this.single = selection.length!=1
+                this.multiple = !selection.length
+            },
+            /** 查看按钮操作 */
+            selectForms() {
+
+                getForm(this.tableName,4).then(response => {
+                    this.formData = response.data;
+                    this.seeForm = true;
+                    this.title = "修改"+this.tableTitle;
+                });
+            },
+            /** 新增按钮操作 */
+            handleAdd() {
+                this.reset();
+                console.log(this.tableName)
+                getForm1(this.tableName).then(response => {
+                    this.drawingList=JSON.parse(response.data.vueJsonField);
+                    this.form = response.data;
+                    console.log( this.drawingList)
+                    this.open = true;
+                    this.title = "添加数据";
+                });
+
+
+            },
+            /** 修改按钮操作 */
+            handleUpdate(row) {
+                this.reset();
+                const id = row.id || this.ids
+                getForm(this.tableName,id).then(response => {
+
+                    this.drawingList=response.data.vueJson;
+                    console.log( this.drawingList)
+                    this.form = response.data;
+                    this.open1 = true;
+                    this.title = "修改数据";
+                });
+            },
+            /** 分配数据权限操作 */
+            handleDataScope(row) {
+                this.reset();
+                this.$nextTick(() => {
+                    this.getRoleDeptTreeselect(row.id);
+                });
+                getRole(row.id).then(response => {
+                    this.form = response.data;
+                    this.openDataScope = true;
+                    this.title = "分配数据权限";
+                });
+            },
+
+            /** 提交按钮（数据权限） */
+            submitDataScope: function() {
+                if (this.form.id != undefined) {
+                    this.form.deptIds = this.getDeptAllCheckedKeys();
+                    dataScope(this.form).then(response => {
+                        if (response.code === 200) {
+                            this.msgSuccess("修改成功");
+                            this.openDataScope = false;
+                            this.getList();
+                        }
+                    });
+                }
+            },
+            submitForm(){
+                console.log(JSON.stringify(this.drawingList))
+                addFrom11(this.tableName, JSON.stringify(this.drawingList)).then(response => {
+                    this.msgSuccess("添加成功");
+                    this.open = false;
+                    this.getList();
+                })
+            },
+            update11(){
+                console.log(JSON.stringify(this.drawingList))
+                updateForm(this.tableName,this.form.id, JSON.stringify(this.drawingList)).then(response => {
+                    if (response.code === 200) {
+                        this.msgSuccess("修改成功");
+                        this.open1 = false;
+                        this.getList();
+                    }
+                });
+            },
+            /** 提交按钮 */
+            // submitForm: function() {
+            //  this.$refs["tableMap"].validate(valid => {
+            //         if (valid) {
+            //             if (this.form.id != undefined) {
+            //                 updateForm(this.tableName,this.form.id,this.form).then(response => {
+            //                     if (response.code === 200) {
+            //                         this.msgSuccess("修改成功");
+            //                         this.open = false;
+            //                         this.getList();
+            //                     }
+            //                 });
+            //             } else {
+            //                 addFrom11(this.tableName,JSON.stringify(this.drawingList)).then(response => {
+            //                     if (response.code === 200) {
+            //                         this.msgSuccess("新增成功");
+            //                         this.open = false;
+            //                         this.getList();
+            //                     }
+            //                 });
+            //             }
+            //         }
+            //     });
+            // },
+            /** 删除按钮操作 */
+            handleDelete(row) {
+                var tabname=this.tableName
+                const ids = row.id || this.ids;
+                this.$confirm('是否确认删除'+this.tableTitle+'编号为"' + ids + '"的数据项?', "警告", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                }).then(function() {
+                    return delForm(tabname , ids);
+                }).then(() => {
+                    this.getList();
+                    this.msgSuccess("删除成功");
+                }) ;
+            },
+            /** 导出按钮操作 */
+            handleExport() {
+                const queryParams = this.queryParams;
+                this.$confirm('是否确认导出所有'+this.tableTitle+'数据项?', "警告", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                }).then(function() {
+                    return exportRole(queryParams);
+                }).then(response => {
+                    this.download(response.msg);
+                }).catch(function() {});
+            }
+        },
+        components:{
+            FormList
+
+        }
+
+    };
+</script>

ruoyi-ui/src/views/system/autoform/index.vue

@@ -75,6 +75,7 @@
       <el-table-column type="selection" width="55" align="center"/>
       <el-table-column label="表单名称" align="center" prop="action"/><!--onblur="check($event)"-->
       <el-table-column label="表描述" align="center" prop="formTitle"/>
+      <el-table-column label="创建时间" align="center" prop="createTime"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -206,6 +207,7 @@
                    :form-conf="formConf"
         />
 
+
       </el-form>
       <div  class="dialog-footer">
         <el-button type="primary" @click="addFrom">添 加</el-button>
@@ -377,30 +379,15 @@
             },
 
             addFrom(){
-                //  alert(JSON.stringify(this.tableMap))
+
                 console.log(JSON.stringify(this.drawingList))
-                alert(this.drawingList)
-                // addFrom11(this.formToList.action, this.drawingList).then(response => {
-                //         this.msgSuccess("添加成功");
+
                 addFrom11(this.formToList.action,JSON.stringify(this.drawingList)).then(response => {
                     this.msgSuccess("添加成功");
                     this.open3 = false;
                     this.open2 = false;
-
                 })
-
-
             },
-            //     addFromData(this.form.action, JSON.stringify(this.drawingList)).then(response => {
-            //         if (response.code === 200) {
-            //             alert()
-            //             this.msgSuccess("新增成功");
-            //             this.open3 = false;
-            //             this.getList();
-            //         }
-            //     });
-            // },
-
             /** 搜索按钮操作 */
             handleQuery() {
                 this.queryParams.pageNum = 1;
@@ -446,7 +433,7 @@
                     this.form = response.data;
                     this.open1 = true;
                     this.title = "修改";
-                    this.diasabledInput = false;
+                    this.diasabledInput = true;
                 });
             },
             /** 表单设计按钮操作 */
@@ -457,25 +444,9 @@
             },
             /** 表单详情按钮操作 */
             handleUpdate2(row) {
-                this.$router.push(
-                    {
-                        path: '/autoform/configIndex/',
-                        props: route => ({tableName: this.queryParams.action, title: this.queryParams.formTitle})
-                    }
-                )
+                // 数据列表地址
+                this.$router.push({path: '/autoforms/configIndex/', query: {tableName: row.action, tableTitle: row.formTitle}})
             },
-            /** 表单添加操作 */
-            // handleUpdate3(row) {
-            //     this.$router.push(
-            //         {path: '/autoform/config/',props: route => ({ tableName: this.queryParams.action, title: this.queryParams.formTitle})}
-            //     )
-            // },
-            // /** 表单修改按钮操作 */
-            // handleUpdate4(row) {
-            //     this.$router.push(
-            //         {path: '/autoform/configEdit/',props: route => ({ tableName: this.queryParams.action, title: this.queryParams.formTitle})}
-            //     )
-            // },
             /** 配置地址按钮操作 */
             handleUpdate3(row) {
                 this.reset();
@@ -483,7 +454,6 @@
                 this.asd = "/autoforms/configIndex?tableName=" + row.action + "&tableTitle=" + row.formTitle
                 this.asd1 = "/autoforms/configIndex?tableName=" + row.action + "&tableTitle=" + row.formTitle
                 this.asd2 = "/autoforms/configIndex?tableName=" + row.action + "&tableTitle=" + row.formTitle
-
                 const id = row.id || this.ids
                 getForm(id).then(response => {
                     this.form = response.data;