form

src/views/haomo/components/forms/HmComplexForm.vue

@@ -28,6 +28,8 @@
               <el-date-picker v-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
                               v-model="formModel[column.codeCamel]"
                               :style="formStyle && formStyle.datePicker && formStyle.datePicker.style || {width: '65%'}"
+                              :ref="column.ref || ''"
+                              :readonly="column.readonly"
                               :type="column.dateType || 'date'"
                               align="right" :disabled="column.disabled"
                               @change="column.change && column.change($event)"
@@ -36,6 +38,7 @@
               </el-date-picker>
               <!-- 3 下拉框 -->
               <el-select v-else-if="column.widgetType === 2"
+                         :ref="column.ref || ''"
                          v-model="formModel[column.codeCamel]"
                          @change="column.change && column.change($event)"
                          :style="formStyle && formStyle.select && formStyle.select.style || {width: '65%'}"
@@ -51,6 +54,8 @@
               </el-select>
               <!-- 4 文本域 -->
               <el-input v-else-if="column.widgetType === 4"
+                        :ref="column.ref || ''"
+                        :readonly="column.readonly"
                         :style="formStyle && formStyle.textarea && formStyle.textarea.style || {width: '65%'}"
                         v-model="formModel[column.codeCamel]"
                         type="textarea" :disabled="column.disabled"
@@ -61,11 +66,13 @@
               <!-- 5 复选框 -->
               <el-checkbox v-else-if="column.widgetType === 3 && !column.options"
                            v-model="formModel[column.codeCamel]"
+                           :ref="column.ref || ''"
                            :disabled="column.disabled"
                            @change="column.change && column.change($event)"
                            true-label="1" false-label="0"></el-checkbox>
               <el-checkbox-group v-else-if="column.widgetType === 3 && column.options"
                                  v-model="formModel[column.codeCamel]"
+                                 :ref="column.ref || ''"
                                  :disabled="column.disabled"
                                  @change="column.change && column.change($event)">
                 <el-checkbox v-for="option in column.options"
@@ -73,7 +80,7 @@
               </el-checkbox-group>
               <!-- 6 富文本 -->
               <quill-editor v-else-if="column.widgetType === 5"
-                            ref="textEditor" :disabled="column.disabled"
+                            :ref="column.ref || ''" :disabled="column.disabled"
                             v-model="formModel[column.codeCamel]"
                             :style="formStyle && formStyle.quillEditor && formStyle.quillEditor.style || {width:'65%'}"
                             :options="editorOption"
@@ -97,7 +104,7 @@
                          :on-remove="handleRemove"
                          :file-list="fileList"
                          :multiple="column.multiple"
-                         ref="upload"
+                         :ref="column.ref || ''"
                          :on-success="uploadSuccess">
                 <el-button slot="trigger" size="small" type="primary"
                            :disabled="column.disabled">选取文件</el-button>
@@ -107,7 +114,9 @@
                         :style="formStyle && formStyle.input && formStyle.input.style || {width:'65%'}"
                         v-model="formModel[column.codeCamel]"
                         :disabled="column.disabled"
-                        @change="column.change && column.change($event)"></el-input>
+                        :readonly="column.readonly"
+                        :ref="column.ref || ''"
+                        @change="column.change && column.change($event,formModel)"></el-input>
             </el-form-item>
             <!--按钮-->
             <el-form-item v-if="buttons && buttons.length > 0">
@@ -172,6 +181,7 @@
        * change属性可选，值为函数类型，表示input的change事件的执行方法，参数即为input输入内容
        * default属性可选(复选框不支持)，设置默认值，取值规范参考form/index.vue
        * hide属性可选，设置该表单字段是否显示,值为boolean
+       * ref属性可选，用来获取当前表单dom节点
        * widgetType属性可选，表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input
        * 取值1-8(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框，8表示文件上传)，
        * 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），
@@ -464,7 +474,7 @@
       // 上传成功的回调函数
       uploadSuccess(response, file, fileList) {
         const self = this
-        console.log('上传成功')
+        // console.log('上传成功')
         // console.log(response)
         // console.log('fileList', fileList)
         // console.log(self.fileList)
@@ -472,12 +482,13 @@
           if (item.widgetType === 8) {
             _.forEach(self.formModel, function(value, key) {
               if (item.codeCamel === key) {
-                self.formModel[key] = response.message || response.visitName
+                // self.formModel[key] = response.message || response.visitName
+                self.formModel[key] = response.visitName + '/' + response.saveName
               }
             })
           }
         })
-        // console.log(404, self.formModel)
+        console.log('formModel', self.formModel)
       },
       // inputChange(val) {
       //   // console.log(event)

src/views/haomo/components/forms/index.vue

@@ -171,9 +171,10 @@
       this.tableId = 'b08d2220d2574bf2ac09ec4f470ed999'
     },
     methods: {
-      inputChange(val) {
-        // console.log(event)
+      inputChange(val, formModel) {
         console.log(val)
+        console.log(formModel)
+        // formModel.email = val.length
       },
       processData(object, isCancel) {
         isCancel.cancelSubmit = false // 如果要取消提交，设为true

src/views/haomo/components/tables/HmComplexTable.vue

@@ -81,7 +81,7 @@
 
         <!--预定义按钮-->
         <el-button-group v-if="buttonGroup">
-          <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
+          <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" v-if="isShowSearch" @click="handleFilter">搜索</el-button>
           <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" v-if="isShowExport" @click="handleDownload">导出</el-button>
           <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" v-if="isShowNewButton" @click="openDialog('newData')">新建</el-button>
           <el-button class="filter-item" type="primary" v-waves icon="el-icon-refresh" v-if="isShowRefresh" @click="refreshList">刷新</el-button>
@@ -108,11 +108,11 @@
       <el-table-column type="selection" width="55" v-if="isShowSelection"></el-table-column>
       <el-table-column v-for="(column,index) in showColumns" :key="index" align="center" :label="column.name"
                        :prop="column.codeCamel" :sortable="column.isSort" :width="column.width" :show-overflow-tooltip="showOverflowTooltip">
-      <template slot-scope="scope">
+        <template slot-scope="scope">
           <span v-if="(scope.row[column.codeCamel] !== false && scope.row[column.codeCamel] !== true )&& !column.render">{{ scope.row[column.codeCamel] }}</span>
           <el-checkbox v-if="(scope.row[column.codeCamel] === false || scope.row[column.codeCamel] === true) && !column.render" v-model="scope.row[column.codeCamel]"></el-checkbox>
           <span v-if='column.render' v-html="column.render(scope)"></span>
-      </template>
+        </template>
       </el-table-column>
       <el-table-column fixed="right" label="操作" :width="operationWidth" v-if="isShowEditDataButton || isShowDeleteButton || definedOperation.length">
         <template slot-scope="scope">
@@ -126,7 +126,7 @@
     <!-- end 表格 -->
 
     <!-- 翻页 -->
-    <div class="pagination-container">
+    <div class="pagination-container" v-if="isShowPagination">
       <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo"
                      :page-sizes="[10,20,50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
       </el-pagination>
@@ -282,13 +282,15 @@
         required: false
       },
       /**
-       * 表格的选项，包括：pageSize、showExport、sortItem、sortOrder、showRefresh、showDeleteButton、
+       * 表格的选项，包括：pageSize、showExport、sortItem、sortOrder、showRefresh、showDeleteButton、isShowPagination、isShowSearch
        * buttonGroup、showDetail、dataProcessing、promiseProcessing、changeValue、newData、editData完整的示例为：
        *  {
        *    "pageSize": 10, // 默认为10条数据/页
        *    "showExport": false,  // 默认为不显示导出按钮
        *    "sortItem": "create_time", // 默认为create_time字段的desc排序
        *    "sortOrder": "desc",
+       *    "isShowPagination": true, //默认显示分页
+       *    "sShowSearch": true, //默认显示搜索按钮
        *    "showRefresh": false, //默认不显示刷新按钮
        *    "showDeleteButton": false,  //默认不显示删除按钮
        *    "buttonGroup": false  //默认不以按钮组的方式呈现button
@@ -366,14 +368,16 @@
         isShowEditDataButton: false, // 是否显示编辑
         isShowDeleteButton: false, // 是否显示删除
         isShowExport: false, // 是否显示导出按钮
+        isShowPagination: true, // 是否显示分页
+        isShowSearch: true, // 是否显示搜索按钮
         HmComplexForm: { // 设置form组件
           formSchema: {}, // form弹窗的Schema定义
           showUserColumns: [], // form弹窗的Columns定义
           showUserButtons: [], // from弹窗显示按钮,
           layout: { left: 0, middle: 24, right: 0 }, // form弹窗的布局方式
           tableId: '',
-          formTips: '',
-          formStyle: '',
+          formTips: {},
+          formStyle: {},
           formRefers: {},
           foreignFormFields: [],
           formRelates: []
@@ -769,6 +773,12 @@
         if (self.options.showExport) { // 判断是否显示导出按钮
           self.isShowExport = self.options.showExport
         }
+        if (self.options.isShowSearch) { // 判断是否显示导出按钮
+          self.isShowSearch = self.options.isShowSearch
+        }
+        if (self.options.isShowPagination) { // 判断是否显示导出按钮
+          self.isShowPagination = self.options.isShowPagination
+        }
         if (self.options.showDeleteButton) { // 判断是否显示删除按钮
           self.isShowDeleteButton = self.options.showDeleteButton
           self.operationWidth += 50

src/views/haomo/components/tabs/HmTab.vue

@@ -14,15 +14,22 @@
       </el-col>
     </div>
   </el-row> -->
-  <swiper :options="swiperOption" style="padding: 20px 30px 0">
-    <swiper-slide v-for="(column,index) in schema['columns']" :key="index">
+  <swiper :options="swiperOption" style="padding: 0 30px 0">
+    <swiper-slide v-for="(tab,index) in tabData" :key="index">
       <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
-        <el-tab-pane :label="column.name" name="first">
-          <ul style="list-style: none;margin: 0;padding: 0;">
-            <li>第1条数据</li>
-            <li>第2条数据</li>
-            <li>第3条数据</li>
-          </ul>
+        <!--<el-tab-pane :label="tab.title" name="first" style="min-height: 54px">-->
+        <!--<ul style="list-style: none;margin: 0;padding: 0;">-->
+        <!--<li v-for="data in tab.column" class="clearfix">-->
+        <!--<span style="float: left;">{{data.title}}</span>-->
+        <!--<span style="float: right;">{{data.createTime}}</span>-->
+        <!--</li>-->
+        <!--</ul>-->
+        <!--</el-tab-pane>-->
+        <el-tab-pane :label="tab.title" name="first" style="height: 440px">
+          <hm-complex-table :schema="schema[tab.tableName]"
+                            :columns="tab.showUserColumns"
+                            :options="tab.userOptions">
+          </hm-complex-table>
         </el-tab-pane>
       </el-tabs>
     </swiper-slide>
@@ -32,9 +39,10 @@
 </template>
 
 <script>
-  // import _ from 'lodash'
-  // import request from '@/utils/request'
-  // import schema from '../../schemas/hm_org_schema'
+  import _ from 'lodash'
+  import request from '@/utils/request'
+  // import schema from '../haomo/schemas/hm_org_schema'
+  import HmComplexTable from '../tables/HmComplexTable.vue'
 
   /**
    * 毫末科技的选项卡组件.
@@ -47,7 +55,9 @@
     // 集成其他组件
     extends: {},
     // 使用其它组件
-    components: {},
+    components: {
+      'hm-complex-table': HmComplexTable
+    },
     // 混入公共对象
     mixins: [],
     /**
@@ -57,7 +67,11 @@
     props: {
       schema: {
         type: Object,
-        required: true
+        required: false
+      },
+      tabData: {
+        type: Array,
+        required: false
       }
     },
     data() {
@@ -73,18 +87,70 @@
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev'
           }
+        },
+        listQuery: {
+          pageNo: 1,
+          pageSize: 3,
+          sortItem: 'create_time',
+          sortOrder: 'desc',
+          filters: {}
         }
       }
     },
     created() {
       // this.validate()
       // console.log(this.schema)
+      // this.getList()
     },
     methods: {
       handleClick(tab, event) {
         console.log(tab, event)
         console.log(this.schema)
+      },
+      // 获取数据
+      getList() {
+        const self = this
+
+        // 处理过滤条件
+        const params = JSON.parse(JSON.stringify(self.listQuery))
+
+        // if (self.includes) {
+        //   params.includes = self.includes
+        // }
+        // if (self.refers) {
+        //   params.refers = self.refers
+        // }
+        // self.schema.modelUnderscorePlural
+        _.each(self.tabData, function(item, i) {
+          request(item.table, {
+            params: params
+          }).then(resp => {
+            console.log(resp.data)
+            self.$set(item, 'column', resp.data)
+          })
+        })
+        setTimeout(function() { console.log(self.tabData) }, 3000)
+        // request('cc_meetings', {
+        //   params: params
+        // }).then(resp => {
+        //   // if (resp.data.length !== 0 && resp.data[0].superior !== undefined && resp.data[0].includes !== undefined &&
+        //   //   resp.data[0].refers !== undefined && resp.data[0].relates !== undefined) {
+        //   //   self.list = []
+        //   //   _.each(resp.data, function(item, index) {
+        //   //     self.list.push(item.superior)
+        //   //   })
+        //   // } else {
+        //   //   self.list = resp.data
+        //   // }
+        //   // self.list = resp.data
+        //   console.log(resp.data)
+        //   // 数据库字段转化显示
+        //   // if (self.options && self.options.changeValue) {
+        //   //   self.list = self.changeValue(self.list)
+        //   // }
+        // })
       }
+
     }
   }
 </script>

src/views/haomo/components/tabs/index.vue

@@ -17,6 +17,8 @@
     },
     data() {
       return {
+        // 会议、通知通报、公文、会议请假、调班申请、议题征集申请
+        //
       }
     },
     computed: {