diff --git a/src/views/haomo/components/calendar/HmFullCalendar.vue b/src/views/haomo/components/calendar/HmFullCalendar.vue
index 60eccfe0b7a515e75630ad76823c34caab93292e..d47e4b483496a7abfe5fb8f2704d8a93e0ec9328 100644
--- a/src/views/haomo/components/calendar/HmFullCalendar.vue
+++ b/src/views/haomo/components/calendar/HmFullCalendar.vue
@@ -1,54 +1,381 @@
 <template>
-	<div class="showcalender">
-      <div id='calendar'></div>
-	</div>
+  <div class="datebook-root" :style='componentW?"width:"+componentW+";":""'>
+    <div class='top-panel'>
+      <ul>
+        <li class='btn left-btn' @click='monthChange(-1)'></li>
+        <li class='show-wrap'>{{showTimeStr}}</li>
+        <li class='btn right-btn' @click='monthChange(1)'></li>
+      </ul>
+    </div>
+    <div class='item-wrap'>
+      <div class="week-day">
+        <span>æ—¥</span>
+        <span>一</span>
+        <span>二</span>
+        <span>三</span>
+        <span>å››</span>
+        <span>五</span>
+        <span>å…­</span>
+      </div>
+      <ul class="date-item-wrap">
+        <li v-for='(day,index) in dateItems' :class="'date-item '+day.classStr" :key='"day_"+index' @click='dateChange(day)'>
+          <span class='item-content'>{{day.content}}</span>
+        </li>
+      
+      </ul>
+    </div>
+  </div>
 </template>
+<style>
+  ul li{
+    list-style: none;
+  }
+  .datebook-root{
+    box-sizing:border-box;
+    width: 280px;
+    border:1px solid #ececec;
+  }
+  .datebook-root .top-panel{
+    padding-top: 10px;
+    width: 100%;
+  }
+  .datebook-root .top-panel ul{
+    overflow: hidden;
+  }
+  .datebook-root .top-panel li{
+    float: left;
+  }
+  .datebook-root .top-panel li.btn{
+    width: 20%;
+    height: 40px;
+    line-height: 40px;
+    cursor: pointer;
+  }
+  .datebook-root .top-panel li.btn:before{
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #999 #999 transparent transparent ;
+    margin:15px auto;
+  }
+  .datebook-root .top-panel li.left-btn:before{
+    transform: rotate(-135deg);
+  }
+  .datebook-root .top-panel li.right-btn:before{
+    transform: rotate(45deg);
+  }
+  .datebook-root .top-panel li.show-wrap{
+    width: 60%;
+    height: 40px;
+    line-height: 40px;
+    color: #999 ;
+    font-size: 14px;
+    text-align: center;
+  }
+  .datebook-root .item-wrap{
+    box-sizing:border-box;
+    width: 100%;
+    padding: 6px;
+  }
+  .datebook-root .week-day{
+    width: 100%;
+    overflow: hidden;
+  }
+  .datebook-root .week-day span{
+    display: block;
+    float: left;
+    width: 14.2857%;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    font-size: 14px;
+    color: #999;
+  }
+  .datebook-root .date-item-wrap{
+    width: 100% ;
+    padding:10px 0;
+    overflow: hidden;
+  }
+  .datebook-root .date-item{
+    box-sizing:border-box;
+    float: left;
+    width: 14.2857%;
+    height: 0;
+    padding-bottom: 14.2857%;
+    margin: 2px 0;
+    font-size: 14px;
+    text-align: center;
+    user-select:none;
+    position: relative;
+    cursor: pointer;
+  }
+  .datebook-root .date-item .item-content{
+    box-sizing:border-box;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    padding: 0;
+    border: none;
+    left: 50%;
+    top: 50%;
+    -webkit-transform:translate(-50%,-50%);
+    -moz-transform:translate(-50%,-50%);
+    -ms-transform:translate(-50%,-50%);
+    -o-transform:translate(-50%,-50%);
+    transform:translate(-50%,-50%);
+  }
+  
+  .datebook-root .date-item.empty{
+    cursor: auto;
+  }
+  .datebook-root .date-item.today:before{
+    content: '';
+    display: block;
+    width: 12px;
+    height: 5px;
+    position: absolute;
+    bottom: 3px;
+    left: 50%;
+    margin-left: -6px;
+    background: #2db7f5;
+    border-radius: 50%;
+    opacity: .5 ;
+  }
+  .datebook-root .date-item.schedule:after{
+    content: '';
+    display: block;
+    box-sizing:border-box;
+    width: 100%;
+    height: 100%;
+    border:1px solid #2db7f5;
+    border-radius: 50%;
+    opacity: .5;
+    position: absolute;
+    left: 0;
+    top: 0;
+    cursor: pointer;
+  }
+  .datebook-root .date-item.schedule.active{
+    color: #333;
+  }
+  .datebook-root .date-item.schedule.active:after{
+    background: #2db7f5 ;
+  }
+</style>
 <script>
-  import $ from 'jquery'
-  import 'fullcalendar'
-  export default {
-    name: 'calender',
-    // 继承其他组件
-    extends: {},
-    // 使用其它组件
-    components: {
-
-    },
-    props: {
-
-    },
+  /**
+  /* 选项参数：
+		* width: 控制宽度，值为带单位的字符串，例如‘400px’，可不传，默认280px ；
+		* schedules：行程安排数据（数组）格式如下：
+			* [
+			* 	{
+			* 		date:12212220000,//日期时间戳
+			* 		title:'xxxxxx',//行程标题
+			* 		//更多其他字段，随意，事件发生时将全部回传。
+			* 	},
+			* 	{
+			* 		date:12242220000,//日期时间戳
+			* 		title:'xxxxxx',//行程标题
+			* 		//更多其他字段，随意。
+			* 	}
+			* ]
+			*
+		*initTime：初始化时间（时间戳格式），页面载入时展示该时间所在月份的日历，可不传，默认展示当前系统时间
+		*dateChange事件：用户点击一个带有日程安排的日期时触发（重复点击同一日期仅触发一次），将返回该日程数据；
+		*monthChange事件，切换月份时触发，刷新日历显示，并传回当前月份的数组，包含该月第一天的0:0:0 和 该月最后一天的23:59:59 的时间戳，例如，7月，返回 [1498838400000,1501516799000] ,对应：Sat Jul 01 2017 00:00:00 GMT+0800 (中国标准时间) 和 Mon Jul 31 2017 23:59:59 GMT+0800 (中国标准时间)
+	 */
+  export default{
     data() {
       return {
+        componentW: '', // 组件宽度
+        showTimeData: '', // 展示时间,时间戳格式
+        dateItems: '' // 当前月份所有日期的数据
       }
     },
+    props: ['width', 'schedules', 'initTime', 'showActive'],
     computed: {
+      showTimeStr() {
+        var result = ''
+        if (this.showTimeData) {
+          var dateObj = new Date(this.showTimeData)
+          var year = dateObj.getFullYear()
+          var month = dateObj.getMonth() + 1
+          var monthStr = month > 9 ? month : '0' + month
+          result = year + '-' + monthStr
+        }
+        return result
+      }
     },
-    filters: {
-    },
-    created() {
-      $(function() {
-        $('#calendar').fullCalendar({
-          header: {
-            left: 'prev,next today',
-            center: 'title',
-            right: 'month,agendaWeek,agendaDay,listWeek'
-          },
-          eventLimit: true,
-          weekNumberCalculation: 'ISO',
-          dayClick: function() {
-            alert('a day has been clicked!')
-          },
-          views: {
-            month: { titleFormat: 'YYYY, MM, DD' }
+    watch: { // 监控showTimeDate和schedules ; 其中任何一个改变，都要执行刷新日历面板的操作。
+      showTimeData: {// 负责刷新当前展示的月份数据
+        handler() {
+          if (this.showTimeData) {
+            var dateObj = new Date(this.showTimeData)
+            this.madePanel(dateObj)
+          }
+        },
+        deep: true
+      },
+      schedules: { // 负责刷新当前月份的日程安排
+        handler() {
+          if (this.schedules) {
+            var dateObj = new Date(this.showTimeData)
+            this.madePanel(dateObj)
           }
-        })
-      })
+        },
+        deep: true
+      }
     },
     methods: {
-
+      initData() {
+        this.componentW = this.width || ''
+        this.showTimeData = this.initTime || new Date().getTime()
+      },
+      madePanel(dateObj) {
+        // console.log('madePanel执行了')
+        if (!dateObj) {
+          return
+        }
+        // 今天的年月日
+        var now = new Date()
+        var nowYear = now.getFullYear()
+        var nowMonth = now.getMonth()
+        var nowDay = now.getDate()
+        // 传入的dateObj的年月日
+        var year = dateObj.getFullYear()
+        var month = dateObj.getMonth()
+        //        var day = dateObj.getDate()
+        // 本月拥有的总天数
+        var totalDays = new Date(year, month + 1, 0).getDate()
+        // 本月第一天是星期几：
+        var firstDay = new Date(year, month, 1).getDay()
+        // 循环生成本月的日期数据，固定生成42个，即6个星期的；
+        var arr = []
+        for (var i = 0; i < 42; i++) {
+          if (i < firstDay) { // 在第一天之前，为空span占位
+            var dayObj = {
+              content: null,
+              schedule: null,
+              active: false,
+              today: false,
+              classStr: 'empty'
+            }
+            arr.push(dayObj)
+          } else if (i >= firstDay && i < (totalDays + firstDay)) {
+            if (year === nowYear && month === nowMonth && (i - firstDay + 1) === nowDay) { // 年月日和now相同，即为‘今天’
+              dayObj = {
+                content: i - firstDay + 1,
+                schedule: null,
+                active: false,
+                today: true,
+                classStr: 'today'
+              }
+            } else {
+              dayObj = {
+                content: i - firstDay + 1,
+                schedule: null,
+                active: false,
+                today: false,
+                classStr: ''
+              }
+            }
+            // 添加schedules数据
+            if (this.schedules && this.schedules.length > 0) {
+              for (var j = 0; j < this.schedules.length; j++) {
+                var schedule = this.schedules[j]
+                var scheduleDate = new Date(schedule.date)
+                var scheduleYear = scheduleDate.getFullYear()
+                var scheduleMonth = scheduleDate.getMonth()
+                var scheduleDay = scheduleDate.getDate()
+                if (year === scheduleYear && month === scheduleMonth && (i - firstDay + 1) === scheduleDay) {
+                  dayObj.schedule = schedule
+                  dayObj.classStr += ' schedule'
+                }
+              }
+            }
+            arr.push(dayObj)
+          } else { // 余下的还是空span占位
+            const dayObj = {
+              content: null,
+              schedule: null,
+              active: false,
+              today: false,
+              classStr: 'empty'
+            }
+            arr.push(dayObj)
+          }
+        }
+        this.dateItems = arr
+      },
+      dateChange(dateItem) {
+        // console.log(dateItem)
+        var dateObj = new Date(this.showTimeData)
+        var year = dateObj.getFullYear()
+        var month = dateObj.getMonth()
+        var day = parseInt(dateItem.content)
+        var begin = new Date(year, month, day, 0, 0, 0).getTime()
+        var end = new Date(year, month, day, 23, 59, 59).getTime()
+        var result = {
+          date: [begin, end],
+          schedule: dateItem.schedule
+        }
+        if (!dateItem.schedule) { // 点击没有行程的，不作反应
+          this.$emit('dateChange', result)
+          return
+        } else {
+          if (!dateItem.active) { // 未激活行程提示的，则激活该行程，其他行程不激活
+            if (this.showActive) {
+              // 循环清除所有的active状态
+              for (var i = 0; i < this.dateItems.length; i++) {
+                if (this.dateItems[i].active) {
+                  this.dateItems[i].active = false
+                  this.dateItems[i].classStr = this.dateItems[i].classStr.replace('active', '').replace(/^\s+|\s+$/g, '')
+                } else {
+                  continue
+                }
+              }
+              // 当前行程添加active状态
+              dateItem.active = !dateItem.active
+              dateItem.classStr += ' active'
+            } else {
+              // 不需要展示active类（active状态还是要加的，数据上区分被激活和未被激活，激活的再次点击是无效的）
+              for (i = 0; i < this.dateItems.length; i++) {
+                if (this.dateItems[i].active) {
+                  this.dateItems[i].active = false
+                } else {
+                  continue
+                }
+              }
+              // 当前行程添加active状态
+              dateItem.active = !dateItem.active
+            }
+            // 向上发送本次点击的行程数据
+            this.$emit('dateChange', result)
+          } else { // 已激活行程提示的，不作反应
+            return
+          }
+        }
+      },
+      monthChange(step) {
+        var curDate = new Date(this.showTimeData)
+        var newDate = curDate.setMonth(curDate.getMonth() + step)
+        this.showTimeData = newDate
+        // 计算开始时间和结束时间
+        var dateObj = new Date(newDate)
+        var year = dateObj.getFullYear()
+        var month = dateObj.getMonth()
+        var totalDays = new Date(year, month + 1, 0).getDate() // 该月份共有多少天。
+        var begin = new Date(year, month, 1, 0, 0, 0)
+        var end = new Date(year, month, totalDays, 23, 59, 59)
+        this.$emit('monthChange', [begin.getTime(), end.getTime()])
+      }
+    },
+    mounted() {
+      this.initData()
     }
   }
 </script>
-<style scoped>
-</style>
-
diff --git a/src/views/haomo/components/calendar/index.vue b/src/views/haomo/components/calendar/index.vue
index 925a5c244abdaaf345b236979a7ba578d1e7b2b4..0701e5ed9f5b6557a650516e0f49cef26e3a5f7b 100644
--- a/src/views/haomo/components/calendar/index.vue
+++ b/src/views/haomo/components/calendar/index.vue
@@ -1,6 +1,16 @@
 <template>
   <div class="app-container calendar-list-container">
-    <hm-full-calendar></hm-full-calendar>
+    <hm-full-calendar
+      :width="width"
+      :schedules="schedules"
+      @dateChange="datechange"
+      @monthChange="monthchange"
+    ></hm-full-calendar>
+    <div v-if="show" class="incident">
+      <p>{{currentDate}}</p>
+      <span>{{event}}</span>
+      <span class="close" @click="closeEvent">X</span>
+    </div>
   </div>
 </template>
 
@@ -15,7 +25,13 @@
       'hm-full-calendar': HmFullCalendar
     },
     data() {
-      return {}
+      return {
+        show: false,
+        width: '300px',
+        currentDate: '',
+        event: '',
+        schedules: [{ date: 1524043625000, title: '个梵蒂是的舞蹈服可接受的看似简单计算的话束带结发会计师对海口市记得回复是框架的看就好山东矿机会计师发送的甲方是看得见看见的说法开始冈地方' }, { date: 1523955299000, title: '个梵蒂冈地方' }]
+      }
     },
     filters: {
 
@@ -23,7 +39,74 @@
     created() {
 
     },
-    methods: {}
+    methods: {
+      datechange(data) {
+        this.show = true
+        console.log(data)
+        if (data.schedule) {
+          const currentTime = this.timestampToTime(data.schedule.date)
+          console.log(currentTime)
+          this.currentDate = currentTime
+          this.event = data.schedule.title
+        }
+      },
+      closeEvent() {
+        this.show = false
+      },
+      monthchange(data) {
+        console.log(data, '--------')
+      },
+      timestampToTime(timestamp) {
+        var date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
+        const Y = date.getFullYear() + 'å¹´'
+        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月'
+        const D = date.getDate() + 'æ—¥'
+        return Y + M + D
+      }
+    }
   }
 </script>
+<style>
+  .calendar-list-container .incident{
+    top: -350px;
+    left:270px;
+    display:inline-block;
+    position:relative;
+    background-color:#202020;
+    width:180px;
+    padding:20px;
+    color:#CCC;
+    text-align:center;
+    font-size:14px;
+    font-family:微软雅黑;
+    border-radius:10px;
+    margin:50px;
+    box-shadow:1px 1px 2px #202020;
+    -o-box-shadow:1px 1px 2px #202020;
+    -moz-box-shadow:1px 1px 2px #202020;
+    -webkit-border-shadow:1px 1px 2px #202020;
+  }
+  .close{
+    position: absolute;
+    top:0;
+    cursor: pointer;
+    right:0;
+  }
+  .incident span {
+    font-size: 10px;
+    padding: 10px 20px;
+  }
+  .incident:before{
+    content:'';
+    position:absolute;
+    width:0;
+    height:0;
+    border:15px solid;
+    color:transparent;
+    border-right-color:#202020;
+    left:-30px;
+    top:50%;
+    margin-top:-15px;
+  }
+</style>
 
diff --git a/src/views/haomo/components/forms/HmComplexForm.vue b/src/views/haomo/components/forms/HmComplexForm.vue
index fe9cf77d167229914ccb7b7e0a8f710d952dbb65..b4c5a6f6d0479570d74925fb71a65018602637df 100644
--- a/src/views/haomo/components/forms/HmComplexForm.vue
+++ b/src/views/haomo/components/forms/HmComplexForm.vue
@@ -1,145 +1,145 @@
 <template>
-  <div class="app-container documentation-container">
+  <!--class="app-container documentation-container"-->
+  <div>
     <!--v-loading="Loading"-->
-    <el-row type="flex" class="hm-form" style="margin-top: 20px" >
-      <el-col :span="layout ? layout.left : 6">
+    <el-row type="flex" class="hm-form" style="margin-top: 12px" >
+      <el-col :span="layout ? layout.left : 1">
         <div></div>
       </el-col>
-      <el-col :span="layout ? layout.middle : 12">
-        <div>
-          <!--表单部分-->
-          <el-form ref="form"
-                   :label-position="formStyle && formStyle.formOptions && formStyle.formOptions.labelPosition || 'right'"
-                   element-loading-text="加载中"
-                   :label-width="formStyle && formStyle.formOptions && formStyle.formOptions.labelWidth || '170px'"
-                   :model="formModel"
-                   :rules="rules"
-                   :style=" formStyle && formStyle.formOptions && formStyle.formOptions.style || {width:'80%',margin:'0 auto'}">
-            <el-form-item v-for="column in showUserColumns"
-                          v-show="!column.hide"
-                          :key="column.id"
-                          :label="column.name"
-                          :rules="column.rule?column.rule:null"
-                          :prop="column.codeCamel">
-              <!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
-                        v-model="formModel[column.codeCamel]"></el-input>-->
-              <!-- 2 日期选择 -->
-              <!-- -->
-              <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)"
-                              :value-format="column.dateFormate || 'yyyy-MM-dd'"
-                              :picker-options="pickerOptions">
-              </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%'}"
-                         :multiple="column.multiple"
-                         :disabled="column.disabled"
-                         style="width: 50%"
-                         clearable>
-                <el-option v-for="(item,key) in column.options"
-                           :key="key"
-                           :label="item.label"
-                           :value="item.value">
-                </el-option>
-              </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"
-                        :resize="formStyle && formStyle.textarea && formStyle.textarea.resize || 'vertical'"
-                        :autosize="formStyle && formStyle.textarea && formStyle.textarea.autosize || { minRows: 4, maxRows: 6}"
-                        :rows="formStyle && formStyle.textarea && formStyle.textarea.rows || 4" @change="column.change && column.change($event)">
-              </el-input>
-              <!-- 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"
-                             :label="option" :key="option">{{option}}</el-checkbox>
-              </el-checkbox-group>
-              <!-- 6 富文本 -->
-              <quill-editor v-else-if="column.widgetType === 5"
-                            :ref="column.ref || 'textEditor'" :disabled="column.disabled"
+      <el-col :span="layout ? layout.middle : 23">
+        <!--表单部分-->
+        <el-form ref="form"
+                 :label-position="formStyle && formStyle.formOptions && formStyle.formOptions.labelPosition || 'right'"
+                 element-loading-text="加载中"
+                 :label-width="formStyle && formStyle.formOptions && formStyle.formOptions.labelWidth || '163px'"
+                 :model="formModel"
+                 :rules="rules"
+                 :style=" formStyle && formStyle.formOptions && formStyle.formOptions.style || {width:'100%'}">
+          <el-form-item v-for="column in showUserColumns"
+                        v-show="!column.hide"
+                        :key="column.id"
+                        :label="column.name"
+                        :rules="column.rule?column.rule:null"
+                        :prop="column.codeCamel">
+            <!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
+                      v-model="formModel[column.codeCamel]"></el-input>-->
+            <!-- 2 日期选择 -->
+            <!-- -->
+            <el-date-picker v-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
                             v-model="formModel[column.codeCamel]"
-                            :style="formStyle && formStyle.quillEditor && formStyle.quillEditor.style || {width:'65%'}"
-                            :options="editorOption"
-                            @blur="onEditorBlur($event)"
-                            @focus="onEditorFocus($event)"
-                            @change="(column.change && column.change($event)) || onEditorChange"
-                            @ready="onEditorReady($event)">
-              </quill-editor>
-              <!-- 7 单选框 -->
-              <el-radio-group v-else-if="column.widgetType === 7"
-                              :disabled="column.disabled"
-                              @change="column.change && column.change($event)"
-                              v-model="formModel[column.codeCamel]">
-                <el-radio v-for="option in column.options"
-                          :key="option.label" :label="option.label">{{option.value}}</el-radio>
-              </el-radio-group>
-              <!-- 8 文件 -->
-              <el-upload v-else-if="column.widgetType === 8"
-                         name="picture"
-                         :action=" column.url || '/api/upload'"
-                         :on-remove="handleRemove"
-                         :on-change="column.change || handleChange"
-                         :file-list="fileList"
-                         :multiple="column.multiple"
+                            :style="formStyle && formStyle.datePicker && formStyle.datePicker.style || {width: '70%'}"
+                            :ref="column.ref || ''"
+                            :readonly="column.readonly"
+                            :type="column.dateType || 'date'"
+                            align="right" :disabled="column.disabled"
+                            @change="column.change && column.change($event)"
+                            :value-format="column.dateFormate || 'yyyy-MM-dd'"
+                            :picker-options="pickerOptions">
+            </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: '70%'}"
+                       :multiple="column.multiple"
+                       :disabled="column.disabled"
+                       style="width: 50%"
+                       clearable>
+              <el-option v-for="(item,key) in column.options"
+                         :key="key"
+                         :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </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: '70%'}"
+                      v-model="formModel[column.codeCamel]"
+                      type="textarea" :disabled="column.disabled"
+                      :resize="formStyle && formStyle.textarea && formStyle.textarea.resize || 'vertical'"
+                      :autosize="formStyle && formStyle.textarea && formStyle.textarea.autosize || { minRows: 4, maxRows: 6}"
+                      :rows="formStyle && formStyle.textarea && formStyle.textarea.rows || 4" @change="column.change && column.change($event)">
+            </el-input>
+            <!-- 5 复选框 -->
+            <el-checkbox v-else-if="column.widgetType === 3 && !column.options"
+                         v-model="formModel[column.codeCamel]"
                          :ref="column.ref || ''"
-                         :on-success="uploadSuccess">
-                <el-button slot="trigger" size="small" type="primary"
-                           :disabled="column.disabled">选取文件</el-button>
-              </el-upload>
-              <!-- 1 普通input -->
-              <el-input v-else
-                        :style="formStyle && formStyle.input && formStyle.input.style || {width:'65%'}"
-                        v-model="formModel[column.codeCamel]"
-                        :disabled="column.disabled"
-                        :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">
-              <el-col :span="24/buttons.length" v-for="(btn,key) in buttons" :key="key">
-                <el-button v-if="btn.type === 1"
-                           type="primary"
-                           @click="onSubmit(btn.method,btn.beforeSubmit)">{{btn.text}}</el-button>
-                <el-button v-if="btn.type === 2"
-                           type="primary"
-                           @click="resetForm(btn.method)">{{btn.text}}</el-button>
-                <el-button v-if="btn.type === 3"
-                           type="primary"
-                           @click="cancel(btn.method)">{{btn.text}}</el-button>
-                <el-button v-if="!btn.type"
-                           type="primary"
-                           @click="cancel(btn.method)">{{btn.text}}</el-button>
-              </el-col>
-            </el-form-item>
-          </el-form>
-        </div>
+                         :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"
+                           :label="option" :key="option">{{option}}</el-checkbox>
+            </el-checkbox-group>
+            <!-- 6 富文本 -->
+            <quill-editor v-else-if="column.widgetType === 5"
+                          :ref="column.ref || ''" :disabled="column.disabled"
+                          v-model="formModel[column.codeCamel]"
+                          :style="formStyle && formStyle.quillEditor && formStyle.quillEditor.style || {width:'70%'}"
+                          :options="editorOption"
+                          @blur="onEditorBlur($event)"
+                          @focus="onEditorFocus($event)"
+                          @change="column.change && column.change($event)"
+                          @ready="onEditorReady($event)">
+            </quill-editor>
+            <!-- 7 单选框 -->
+            <el-radio-group v-else-if="column.widgetType === 7"
+                            :disabled="column.disabled"
+                            @change="column.change && column.change($event)"
+                            v-model="formModel[column.codeCamel]">
+              <el-radio v-for="option in column.options"
+                        :key="option.label" :label="option.label">{{option.value}}</el-radio>
+            </el-radio-group>
+            <!-- 8 文件 -->
+            <el-upload v-else-if="column.widgetType === 8"
+                       :accept="column.accept || '*/*'"
+                       :name="column.param || 'picture'"
+                       :action=" column.url || '/api/upload'"
+                       :on-remove="handleRemove"
+                       :on-change="column.change || handleChange"
+                       :file-list="fileList"
+                       :multiple="column.multiple"
+                       ref="upload"
+                       :on-success="uploadSuccess">
+              <el-button slot="trigger" size="small" type="primary"
+                         :disabled="column.disabled">选取文件</el-button>
+            </el-upload>
+            <!-- 1 普通input  || {width:'65%'}-->
+            <el-input v-else
+                      :style="formStyle && formStyle.input && formStyle.input.style || {width:'70%'}"
+                      v-model="formModel[column.codeCamel]"
+                      :disabled="column.disabled"
+                      :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">
+            <el-col :span="24/buttons.length" v-for="(btn,key) in buttons" :key="key">
+              <el-button v-if="btn.type === 1"
+                         type="primary"
+                         @click="onSubmit(btn.method,btn.beforeSubmit)">{{btn.text}}</el-button>
+              <el-button v-if="btn.type === 2"
+                         type="primary"
+                         @click="resetForm(btn.method)">{{btn.text}}</el-button>
+              <el-button v-if="btn.type === 3"
+                         type="primary"
+                         @click="cancel(btn.method)">{{btn.text}}</el-button>
+              <el-button v-if="!btn.type"
+                         type="primary"
+                         @click="cancel(btn.method)">{{btn.text}}</el-button>
+            </el-col>
+          </el-form-item>
+        </el-form>
       </el-col>
-      <el-col :span="layout ? layout.left : 6">
+      <el-col :span="layout ? layout.right : 0">
         <div></div>
       </el-col>
     </el-row>
@@ -183,6 +183,8 @@
        * default属性可选(复选框不支持)，设置默认值，取值规范参考form/index.vue
        * hide属性可选，设置该表单字段是否显示,值为boolean
        * ref属性可选，用来获取当前表单dom节点
+       * param属性可选，当表单类型为文件类型时，可传入param字段，值为后台规定必传参数，默认值为picture
+       * accept属性可选,当表单类型为文件类型时，可传入accept字段，限制限制上传文件类型，取值规范参考w3c
        * widgetType属性可选，表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input
        * 取值1-8(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框，8表示文件上传)，
        * 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），
@@ -533,12 +535,12 @@
       // textareaChange(val) {
       //   console.log(val)
       // },
-      onEditorChange({ quill, html, text }) {
-        console.log(quill)
-        console.log(html)
-        console.log(text)
-        // this.content = html
-      },
+      // onEditorChange({ quill, html, text }) {
+      //   console.log(quill)
+      //   console.log(html)
+      //   console.log(text)
+      //   // this.content = html
+      // },
       onEditorBlur(val) {
         // console.log(val)
       },
@@ -893,9 +895,9 @@
                 //     self.partPropModel[key] = value.join('')
                 //   }
                 // })
-                console.log('本表', self.nativeFormModel)
-                console.log('外表', self.foreignFormModel)
-                console.log('部分属性', self.partPropModel)
+                // console.log('本表', self.nativeFormModel)
+                // console.log('外表', self.foreignFormModel)
+                // console.log('部分属性', self.partPropModel)
               }
               // 发送新建请求
               console.log('请求之前', self.formModel)
@@ -913,8 +915,6 @@
                   }
               }).then(resp => {
                 console.log('创建成功', resp.data)
-                // 设置中间表与本表(主表)对应字段
-                // if (!self.relates || !self.relates.length) return
                 // 创建中间表数据
                 if (resp.data && self.relates && self.relates.length && self.relates[1].relateTable) {
                   self.$set(self.relateData, self.relates[1].relateKeys[0], resp.data.id)
@@ -953,7 +953,7 @@
                     }
                   })
                 }
-                console.log('外表公共属性partProp', self.partPropModel)
+                // console.log('外表公共属性partProp', self.partPropModel)
                 // 把外表公共属性partProp的值写入foreignArray的每条数据对象
                 if (self.foreignArray.length > 0) {
                   _.each(self.foreignArray, function(item, key) {
@@ -980,7 +980,7 @@
                     }
                     item = Object.assign(item, tem)
                   })
-                  console.log('外表数据', self.foreignArray)
+                  // console.log('外表数据', self.foreignArray)
                   // 批量创建信息
                   const url = _.keys(self.refers)[0] + 's' + '/create/batch'
                   // const string = self.transformRequest(self.foreignArray)
@@ -1059,6 +1059,17 @@
 
   }
 </script>
-<style scoped>
-
+<style>
+  .hm-form .el-form-item__content{
+    margin-left: 173px !important;
+  }
+  .hm-form .ql-toolbar.ql-snow .ql-formats{
+    margin-right: 3px;
+  }
+  .hm-form .ql-toolbar.ql-snow + .ql-container.ql-snow {
+    height: 150px;
+  }
+  .hm-form .ql-toolbar.ql-snow{
+    padding: 7px;
+  }
 </style>
diff --git a/src/views/haomo/components/forms/index.vue b/src/views/haomo/components/forms/index.vue
index 640a10891a8fa179621b45c59a52991e622b2c6f..0314df4f11c0e7fe2c5d84cb06ba630024167e74 100644
--- a/src/views/haomo/components/forms/index.vue
+++ b/src/views/haomo/components/forms/index.vue
@@ -75,7 +75,7 @@
             ], // default: 1
             change: this.inputChange },
           // 8文件 change: this.uploadChange
-          { name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload' } // url是后台接口地址
+          { name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload', param: 'picture', accept: 'image/*' } // url是后台接口地址
         ],
         // CcSubject示例
         showUserColumns2: [
@@ -188,8 +188,8 @@
         console.log(125, object)
         return object // 将数据返回
       },
-      method1() {
-        console.log('method1')
+      method1(formModel) {
+        console.log('formModel')
       },
       method2() {
         console.log('method2')
diff --git a/src/views/haomo/components/tables/HmComplexTable.vue b/src/views/haomo/components/tables/HmComplexTable.vue
index ec2821d8f95c7bc4bc6efb859a91000981a0c41e..747b76b08ec23bed929c7628142b664dca1cb269 100644
--- a/src/views/haomo/components/tables/HmComplexTable.vue
+++ b/src/views/haomo/components/tables/HmComplexTable.vue
@@ -137,7 +137,11 @@
 
     <!-- 弹窗 -->
     <!-- @TODO 补充详情弹窗 -->
+<<<<<<< HEAD
     
+=======
+
+>>>>>>> b14b9dd1366e279bb016eabe5d84271fe8fbc513
     <el-dialog :title="dialogName" :visible.sync="dialogFormVisible" :close-on-click-modal="closeOnClickModal" width="45%" v-if="dialogFormVisible">
       <hm-complex-form :schema="HmComplexForm.formSchema"
                        :columns="HmComplexForm.showUserColumns"