提交

ruoyi-ui/src/components/DynamicForms/index.vue

@@ -0,0 +1,111 @@
+<template>
+    <el-form-item :label="formConfig.columnComment" style="display: inline-block;" :prop="formConfig.columnName">
+      <!-- 输入框 -->
+      <el-input v-if="formConfig.htmlType == 'input'" v-model="config[formConfig.columnName]" :placeholder="'请输入'+formConfig.columnComment"
+        clearable @keyup.enter.native="handleQuery" />
+      <!-- 多行输入框 -->
+      <el-input v-if="formConfig.htmlType == 'textarea'" type="textarea" v-model="config[formConfig.columnName]" :placeholder="'请输入'+formConfig.columnComment"
+        clearable @keyup.enter.native="handleQuery" />
+      <!-- 下拉框 -->
+      <el-select v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'select'" filterable :placeholder="'请输入'+formConfig.columnComment">
+        <el-option v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel" :value="itemChild.dictValue">
+        </el-option>
+      </el-select>
+      <!-- 复选框 -->
+      <el-checkbox-group v-model="formConfig.sysDictDatatwo" v-if="formConfig.htmlType == 'checkbox'">
+        <el-checkbox @change="handleCheckedCitiesChange" v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel"
+        :value="itemChild.dictValue" ></el-checkbox>
+      </el-checkbox-group>
+      <!-- 单选框 -->
+      <el-radio-group v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'radio'">
+        <el-radio v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel" :value="itemChild.dictValue"></el-radio>
+      </el-radio-group>
+      <!-- 时间控件 -->
+      <el-date-picker v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'datetime'" type="date" :placeholder="'请输入'+formConfig.columnComment">
+      </el-date-picker>
+      <!-- 上传图片 -->
+      <el-upload v-if="formConfig.htmlType == 'imageUpload'" :headers="{Authorization: 'Bearer ' + getToken()}" :action="process + '/boman-file/upload'" list-type="picture-card"
+        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
+        <i class="el-icon-plus"></i>
+      </el-upload>
+      <el-dialog :visible.sync="dialogVisible" v-if="formConfig.htmlType == 'imageUpload'">
+        <img width="100%" :src="dialogImageUrl" alt="">
+      </el-dialog>
+      <!-- 上传文件 -->
+      <el-upload
+        class="upload-demo"
+        :headers="{Authorization: 'Bearer ' + getToken()}"
+        v-if="formConfig.htmlType == 'fileUpload'"
+        :action="process + '/boman-file/upload'"
+        :on-change="handleChange"
+        :file-list="fileList">
+        <el-button size="small" type="primary">点击上传</el-button>
+        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+      </el-upload>
+      <!-- 富文本 -->
+      <editor v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'editor'" :min-height="192"/>
+    </el-form-item>
+</template>
+
+<script>
+  const defaultSettings = require('@/settings.js')
+  import Editor from '@/components/Editor';
+  import { getToken } from "@/utils/auth";
+  export default {
+    data() {
+      return {
+        fileList: [],
+        defaultSettings,
+        dialogImageUrl: '',
+        process: process.env.VUE_APP_BASE_API,
+        dialogVisible: false,
+        disabled: false,
+        config: {},
+      }
+    },
+    components: {
+      Editor
+    },
+    props: {
+      formConfig: {
+        type: Object,
+        required: true,
+        'default': {
+          sysDictData: []
+        }
+      },
+    },
+    created() {
+    console.log(this.formConfig)
+    },
+    mounted() {
+    },
+    methods: {
+      handleChange(file, fileList) {
+        this.fileList = fileList.slice(-3);
+      },
+      getToken() {
+        return getToken()
+      },
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      handleDownload(file) {
+        console.log(file);
+      },
+      handleQuery() {
+        this.$emit('btns')
+      },
+      handleCheckedCitiesChange(value){
+        console.log(value)
+      }
+    }
+  }
+</script>
+
+<style>
+</style>

ruoyi-ui/src/components/TabForm/index.vue

@@ -0,0 +1,113 @@
+<template>
+    <el-form-item :label="formConfig.columnComment" style="display: inline-block;" :prop="formConfig.columnName">
+      <!-- 输入框 -->
+      <el-input v-if="formConfig.htmlType == 'input'" v-model="config[formConfig.columnName]" :placeholder="'请输入'+formConfig.columnComment"
+        clearable @keyup.enter.native="handleQuery" />
+      <!-- 多行输入框 -->
+      <el-input v-if="formConfig.htmlType == 'textarea'" type="textarea" v-model="config[formConfig.columnName]" :placeholder="'请输入'+formConfig.columnComment"
+        clearable @keyup.enter.native="handleQuery" />
+      <!-- 下拉框 -->
+      <el-select v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'select'" filterable :placeholder="'请输入'+formConfig.columnComment">
+        <el-option v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel" :value="itemChild.dictValue">
+        </el-option>
+      </el-select>
+      <!-- 复选框 -->
+      <el-checkbox-group v-model="formConfig.sysDictDatatwo" v-if="formConfig.htmlType == 'checkbox'">
+        <el-checkbox @change="handleCheckedCitiesChange" v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel"
+        :value="itemChild.dictValue" ></el-checkbox>
+      </el-checkbox-group>
+      <!-- 单选框 -->
+      <el-radio-group v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'radio'">
+        <el-radio v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel" :value="itemChild.dictValue"></el-radio>
+      </el-radio-group>
+      <!-- 时间控件 -->
+      <el-date-picker v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'datetime'" type="date" :placeholder="'请输入'+formConfig.columnComment">
+      </el-date-picker>
+      <!-- 上传图片 -->
+      <el-upload v-if="formConfig.htmlType == 'imageUpload'" :headers="{Authorization: 'Bearer ' + getToken()}" :action="process + '/boman-file/upload'" list-type="picture-card"
+        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
+        <i class="el-icon-plus"></i>
+      </el-upload>
+      <el-dialog :visible.sync="dialogVisible" v-if="formConfig.htmlType == 'imageUpload'">
+        <img width="100%" :src="dialogImageUrl" alt="">
+      </el-dialog>
+      <!-- 上传文件 -->
+      <el-upload
+        class="upload-demo"
+        :headers="{Authorization: 'Bearer ' + getToken()}"
+        v-if="formConfig.htmlType == 'fileUpload'"
+        :action="process + '/boman-file/upload'"
+        :on-change="handleChange"
+        :file-list="fileList">
+        <el-button size="small" type="primary">点击上传</el-button>
+        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+      </el-upload>
+      <!-- 富文本 -->
+      <editor v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'editor'" :min-height="192"/>
+      123
+    </el-form-item>
+   
+</template>
+
+<script>
+  const defaultSettings = require('@/settings.js')
+  import Editor from '@/components/Editor';
+  import { getToken } from "@/utils/auth";
+  export default {
+    data() {
+      return {
+        fileList: [],
+        defaultSettings,
+        dialogImageUrl: '',
+        process: process.env.VUE_APP_BASE_API,
+        dialogVisible: false,
+        disabled: false,
+        config: {},
+      }
+    },
+    components: {
+      Editor
+    },
+    props: {
+      formConfig: {
+        type: Object,
+        required: true,
+        'default': {
+          sysDictData: []
+        }
+      },
+    },
+    created() {
+    console.log(this.formConfig)
+    },
+    mounted() {
+    },
+    methods: {
+      handleChange(file, fileList) {
+        this.fileList = fileList.slice(-3);
+      },
+      getToken() {
+        return getToken()
+      },
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      handleDownload(file) {
+        console.log(file);
+      },
+      handleQuery() {
+        this.$emit('btns')
+      },
+      handleCheckedCitiesChange(value){
+        console.log(value)
+      }
+    }
+  }
+</script>
+
+<style>
+</style>

ruoyi-ui/src/main.js

@@ -22,6 +22,7 @@ import Pagination from "@/components/Pagination";
 // 自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
 import DynamicForm from "@/components/DynamicForm"
+import DynamicForms from "@/components/DynamicForms"
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -50,6 +51,7 @@ Vue.prototype.msgInfo = function (msg) {
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
 Vue.component('DynamicForm', DynamicForm)
+Vue.component('DynamicForms', DynamicForms)
 
 Vue.use(permission)
 

ruoyi-ui/src/settings.js

@@ -1,7 +1,7 @@
 module.exports = {
   title: '博曼办公协作',
-  urls: `http://192.168.101.11:8090`,
-  // urls: `http://192.168.101.110:8090`,
+  // urls: `http://192.168.101.11:8090`,
+  urls: `http://192.168.101.110:8090`,
   // urls: `http://192.168.101.49:8080`,
 
   // urls: `http://192.168.101.10:8080`,

ruoyi-ui/src/views/index.vue

@@ -237,60 +237,11 @@
     </el-row>
     <!-- <el-divider /> -->
   <!-- 添加或修改公告对话框 -->
-  <el-dialog :title="title" :visible.sync="open" width="880px" append-to-body>
-    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+  <el-dialog :title="title" :visible.sync="open" width="980px" append-to-body>
+    <el-form ref="form" :model="form" :rules="rules" label-width="160px">
       <el-row>
-        <el-col :span="12" v-for="(item,index) in inputList" :key="index">
-          <el-form-item :label="item.columnComment" prop="noticeTitle">
-            <el-input :type="item.html_type" v-model="item.columnName" placeholder="请输入" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" v-for="(item,index) in dataList" :key="item.columnComment">
-          <el-form-item :label="item.columnComment" prop="noticeTitle">
-            <el-date-picker type="date" placeholder="选择日期" v-model="item.columnName" style="width: 100%;"></el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" v-for="(item,index) in selectList" :key="item.columnComment">
-          <el-form-item :label="item.columnComment" prop="columnName">
-            <el-select v-model="item.columnName" placeholder="请选择">
-              <el-option
-                v-for="dict in item.sysDictData"
-                :key="dict.dictValue"
-                :label="dict.dictLabel"
-                :value="dict.dictValue"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" v-for="(item,index) in radiolist " :key="item.columnComment">
-          <el-form-item label="状态">
-            <el-radio-group v-model="form.status">
-              <el-radio
-                v-for="dict in statusOptions"
-                :key="dict.dictValue"
-                :label="dict.dictValue"
-              >{{dict.dictLabel}}</el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" v-for="(item,index) in chekbosList " :key="item.columnComment">
-          <el-form-item label="状态">
-            <!-- <el-radio-group v-model="form.status">
-              <el-radio
-                v-for="dict in statusOptions"
-                :key="dict.dictValue"
-                :label="dict.dictValue"
-              >{{dict.dictLabel}}</el-radio>
-            </el-radio-group> -->
-             <el-checkbox-group v-model="form.type">
-                  <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
-             </el-checkbox-group>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" v-for="(item,index) in editorList" :key="item.columnComment">
-          <el-form-item label="内容">
-            <editor v-model="form.noticeContent" :min-height="192"/>
-          </el-form-item>
+        <el-col :span="24"  >
+            <dynamic-forms :config="form" @inputs = "changeFn" :formConfig="item" v-for="(item,index) in form.columns" :key='index' />
         </el-col>
       </el-row>
     </el-form>
@@ -435,6 +386,7 @@ export default {
 
   },
   computed: {
+
      // 时间高亮的数组
      brightDate () {
        // let ary = []
@@ -668,7 +620,7 @@ export default {
     },
     /** 提交按钮 */
     submitForm: function() {
-      console.log(this.inputList)
+      console.log(this.form)
       // this.$refs["form"].validate(valid => {
       //   if (valid) {
       //     if (this.form.id != undefined) {
@@ -687,6 +639,12 @@ export default {
       //   }
       // });
     },
+    // 弹框
+    changeFn(obj) {
+      for(let key in obj){
+        this.form[key] = obj[key]
+      }
+    },
   },
 };
 </script>

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

@@ -0,0 +1,200 @@
+<template>
+  <div class="table_total">
+    <div class="table_header">
+      <p>单表</p>
+      <el-divider></el-divider>
+      <div class="table_headerBtun" v-if="queryData.buttonList">
+        <el-button type="primary" plain v-for="(item,index) in queryData.buttonList.split('')" :key="index">{{item | btnConversion}}</el-button>
+      </div>
+
+    </div>
+    <!-- 内容 -->
+    <div class="table_nav headertable_nav">
+      <el-collapse v-model="activeNames" @change="handleChange">
+        <el-collapse-item :title="title" :name="index" v-for="(item,index) in 4" :key="index">
+          <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="120px">
+            <el-row :gutter="0">
+              <el-col :span="24"  :key="index">
+                  <dynamic-forms :config="queryParams" @inputs = "changeFn" :formConfig="item" v-for="(item,index) in queryData.queryList" :key='index' />
+              </el-col>
+              <!-- <el-col :span="6" v-for="(item,index) in 12" :key="index">
+                  <el-form-item :label="labletit" prop="dictName">
+                   <el-input
+                       v-model="queryParams.dictName"
+                       placeholder="请输入字典名称"
+                       clearable
+                       size="small"
+                       @keyup.enter.native="handleQuery"
+                  />
+                 </el-form-item>
+              </el-col> -->
+            </el-row>
+          </el-form>
+        </el-collapse-item>
+
+      </el-collapse>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+  import {
+    getTableQuery
+  } from '@/api/system/table.js'
+  export default {
+    name: "index",
+    data() {
+      return {
+        // 显示搜索条件
+        showSearch: true,
+        activeNames: ['1'],
+        title: '单表1',
+        queryData: {},
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+        },
+        labletit: '查询参数1233'
+      };
+    },
+    filters:{
+      btnConversion(val) {
+        switch(val){
+          case 'A':
+          return '新增';
+          case 'M':
+          return '修改';
+          case 'D':
+          return '删除';
+          case 'Q':
+          return '查询';
+          case 'S':
+          return '提交';
+          case 'U':
+          return '反提交';
+          case 'I':
+          return '导入';
+          case 'E':
+          return '导出';
+        }
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    methods: {
+      changeFn(obj) {
+        for(let key in obj){
+          this.queryParams[key] = obj[key]
+        }
+      },
+      resetQuery() {
+
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.getList();
+      },
+      getList() {
+
+      },
+      init() {
+        getTableQuery({
+          table: 'obj_test'
+        }).then(res => {
+          let data = res.data
+          this.queryData = data
+          console.log( this.queryData.queryList)
+          this.queryData.queryList.filter(route => {
+            if(route.htmlType == 'checkbox'){
+              route.sysDictDatatwo = []
+              route.sysDictDatatwo.push(route.columnName)
+              console.log(route.sysDictDatatwo,846)
+            }
+          })
+          console.log(this.queryData.queryList)
+        })
+      },
+      handleChange(val) {
+        console.log(val);
+      }
+    },
+  };
+</script>
+
+
+<style  lang="scss">
+  .table_header{
+    .el-divider--horizontal{
+      margin-top: 16px;
+    }
+  }
+  .headertable_nav{
+    .el-collapse-item__wrap{
+      border-bottom: 0;
+    }
+    .el-collapse-item__header{
+      border-bottom: 0;
+      font-size: 15px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #3C8DBC;
+      line-height: 36px;
+    }
+    // .el-form-item__content{
+    //   width: 55%;
+    // }
+    .el-collapse{
+      border-top: 0;
+    }
+  }
+
+</style>
+
+
+
+<style scoped lang="scss">
+  .app-main{
+     // background-color: #eef0ff !important;
+  }
+  .table_total{
+     background-color: #eef0ff;
+     height: 100%;
+     padding: 20px;
+     // 头部
+     .table_header{
+        background-color: #fff;
+        border-radius: 6px;
+        padding: 23px;
+        margin-bottom: 20px;
+      p{
+         font-size: 15px;
+         font-weight: bold;
+         color: #3C8DBC;
+         line-height: 36px;
+        }
+      p::before{
+        content: "";
+        display: block;
+        width: 18px;
+        height: 8px;
+        background: #3C8DBC;
+        border-radius: 3px;
+
+      }
+     }
+     // 内容
+     .headertable_nav{
+       background-color: #fff;
+       border-radius: 6px;
+       padding: 23px;
+     }
+  }
+  p{
+    margin: 0;
+
+  }
+</style>