Skip to content

V
VueElementTemplate
Commit 1f57e8b1 authored by 杨柠瑞's avatar 杨柠瑞
Browse files
Options

coding

parents a3e39a05 b14b9dd1
Hide whitespace changes
Inline Side-by-side
Showing with 620 additions and 195 deletions
src/views/haomo/components/calendar/HmFullCalendar.vue
View file @ 1f57e8b1
<template> <template>
<div class="showcalender"> <div class="datebook-root" :style='componentW?"width:"+componentW+";":""'>
<div id='calendar'></div> <div class='top-panel'>
</div> <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> </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> <script>
import $ from 'jquery' /**
import 'fullcalendar' /* 选项参数：
export default { * width: 控制宽度，值为带单位的字符串，例如‘400px’，可不传，默认280px ；
name: 'calender', * schedules：行程安排数据（数组）格式如下：
// 继承其他组件 * [
extends: {}, * {
// 使用其它组件 * date:12212220000,//日期时间戳
components: { * title:'xxxxxx',//行程标题
* //更多其他字段，随意，事件发生时将全部回传。
}, * },
props: { * {
* 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() { data() {
return { return {
componentW: '', // 组件宽度
showTimeData: '', // 展示时间,时间戳格式
dateItems: '' // 当前月份所有日期的数据
} }
}, },
props: ['width', 'schedules', 'initTime', 'showActive'],
computed: { 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: { watch: { // 监控showTimeDate和schedules ; 其中任何一个改变，都要执行刷新日历面板的操作。
}, showTimeData: {// 负责刷新当前展示的月份数据
created() { handler() {
$(function() { if (this.showTimeData) {
$('#calendar').fullCalendar({ var dateObj = new Date(this.showTimeData)
header: { this.madePanel(dateObj)
left: 'prev,next today', }
center: 'title', },
right: 'month,agendaWeek,agendaDay,listWeek' deep: true
}, },
eventLimit: true, schedules: { // 负责刷新当前月份的日程安排
weekNumberCalculation: 'ISO', handler() {
dayClick: function() { if (this.schedules) {
alert('a day has been clicked!') var dateObj = new Date(this.showTimeData)
}, this.madePanel(dateObj)
views: {
month: { titleFormat: 'YYYY, MM, DD' }
} }
}) },
}) deep: true
}
}, },
methods: { 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> </script>
<style scoped>
</style>
src/views/haomo/components/calendar/index.vue
View file @ 1f57e8b1
<template> <template>
<div class="app-container calendar-list-container"> <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> </div>
</template> </template>
...@@ -15,7 +25,13 @@ ...@@ -15,7 +25,13 @@
'hm-full-calendar': HmFullCalendar 'hm-full-calendar': HmFullCalendar
}, },
data() { data() {
return {} return {
show: false,
width: '300px',
currentDate: '',
event: '',
schedules: [{ date: 1524043625000, title: '个梵蒂是的舞蹈服可接受的看似简单计算的话束带结发会计师对海口市记得回复是框架的看就好山东矿机会计师发送的甲方是看得见看见的说法开始冈地方' }, { date: 1523955299000, title: '个梵蒂冈地方' }]
}
}, },
filters: { filters: {
...@@ -23,7 +39,74 @@ ...@@ -23,7 +39,74 @@
created() { 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> </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>
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 1f57e8b1
<template> <template>
<div class="app-container documentation-container"> <!--class="app-container documentation-container"-->
<div>
<!--v-loading="Loading"--> <!--v-loading="Loading"-->
<el-row type="flex" class="hm-form" style="margin-top: 20px" > <el-row type="flex" class="hm-form" style="margin-top: 12px" >
<el-col :span="layout ? layout.left : 6"> <el-col :span="layout ? layout.left : 1">
<div></div> <div></div>
</el-col> </el-col>
<el-col :span="layout ? layout.middle : 12"> <el-col :span="layout ? layout.middle : 23">
<div> <!--表单部分-->
<!--表单部分--> <el-form ref="form"
<el-form ref="form" :label-position="formStyle && formStyle.formOptions && formStyle.formOptions.labelPosition || 'right'"
:label-position="formStyle && formStyle.formOptions && formStyle.formOptions.labelPosition || 'right'" element-loading-text="加载中"
element-loading-text="加载中" :label-width="formStyle && formStyle.formOptions && formStyle.formOptions.labelWidth || '163px'"
:label-width="formStyle && formStyle.formOptions && formStyle.formOptions.labelWidth || '170px'" :model="formModel"
:model="formModel" :rules="rules"
:rules="rules" :style=" formStyle && formStyle.formOptions && formStyle.formOptions.style || {width:'100%'}">
:style=" formStyle && formStyle.formOptions && formStyle.formOptions.style || {width:'80%',margin:'0 auto'}"> <el-form-item v-for="column in showUserColumns"
<el-form-item v-for="column in showUserColumns" v-show="!column.hide"
v-show="!column.hide" :key="column.id"
:key="column.id" :label="column.name"
:label="column.name" :rules="column.rule?column.rule:null"
:rules="column.rule?column.rule:null" :prop="column.codeCamel">
:prop="column.codeCamel"> <!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
<!--el-input<el-input v-if="column.codeCamel==='password'" type="password" v-model="formModel[column.codeCamel]"></el-input>-->
v-model="formModel[column.codeCamel]"></el-input>--> <!-- 2 日期选择 -->
<!-- 2 日期选择 --> <!-- -->
<!-- --> <el-date-picker v-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
<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"
v-model="formModel[column.codeCamel]" v-model="formModel[column.codeCamel]"
:style="formStyle && formStyle.quillEditor && formStyle.quillEditor.style || {width:'65%'}" :style="formStyle && formStyle.datePicker && formStyle.datePicker.style || {width: '70%'}"
:options="editorOption" :ref="column.ref || ''"
@blur="onEditorBlur($event)" :readonly="column.readonly"
@focus="onEditorFocus($event)" :type="column.dateType || 'date'"
@change="(column.change && column.change($event)) || onEditorChange" align="right" :disabled="column.disabled"
@ready="onEditorReady($event)"> @change="column.change && column.change($event)"
</quill-editor> :value-format="column.dateFormate || 'yyyy-MM-dd'"
<!-- 7 单选框 --> :picker-options="pickerOptions">
<el-radio-group v-else-if="column.widgetType === 7" </el-date-picker>
:disabled="column.disabled" <!-- 3 下拉框 -->
@change="column.change && column.change($event)" <el-select v-else-if="column.widgetType === 2"
v-model="formModel[column.codeCamel]"> :ref="column.ref || ''"
<el-radio v-for="option in column.options" v-model="formModel[column.codeCamel]"
:key="option.label" :label="option.label">{{option.value}}</el-radio> @change="column.change && column.change($event)"
</el-radio-group> :style="formStyle && formStyle.select && formStyle.select.style || {width: '70%'}"
<!-- 8 文件 --> :multiple="column.multiple"
<el-upload v-else-if="column.widgetType === 8" :disabled="column.disabled"
name="picture" style="width: 50%"
:action=" column.url || '/api/upload'" clearable>
:on-remove="handleRemove" <el-option v-for="(item,key) in column.options"
:on-change="column.change || handleChange" :key="key"
:file-list="fileList" :label="item.label"
:multiple="column.multiple" :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 || ''" :ref="column.ref || ''"
:on-success="uploadSuccess"> :disabled="column.disabled"
<el-button slot="trigger" size="small" type="primary" @change="column.change && column.change($event)"
:disabled="column.disabled">选取文件</el-button> true-label="1" false-label="0"></el-checkbox>
</el-upload> <el-checkbox-group v-else-if="column.widgetType === 3 && column.options"
<!-- 1 普通input --> v-model="formModel[column.codeCamel]"
<el-input v-else :ref="column.ref || ''"
:style="formStyle && formStyle.input && formStyle.input.style || {width:'65%'}" :disabled="column.disabled"
v-model="formModel[column.codeCamel]" @change="column.change && column.change($event)">
:disabled="column.disabled" <el-checkbox v-for="option in column.options"
:readonly="column.readonly" :label="option" :key="option">{{option}}</el-checkbox>
:ref="column.ref || ''" </el-checkbox-group>
@change="column.change && column.change($event,formModel)"></el-input> <!-- 6 富文本 -->
</el-form-item> <quill-editor v-else-if="column.widgetType === 5"
<!--按钮--> :ref="column.ref || ''" :disabled="column.disabled"
<el-form-item v-if="buttons && buttons.length > 0"> v-model="formModel[column.codeCamel]"
<el-col :span="24/buttons.length" v-for="(btn,key) in buttons" :key="key"> :style="formStyle && formStyle.quillEditor && formStyle.quillEditor.style || {width:'70%'}"
<el-button v-if="btn.type === 1" :options="editorOption"
type="primary" @blur="onEditorBlur($event)"
@click="onSubmit(btn.method,btn.beforeSubmit)">{{btn.text}}</el-button> @focus="onEditorFocus($event)"
<el-button v-if="btn.type === 2" @change="column.change && column.change($event)"
type="primary" @ready="onEditorReady($event)">
@click="resetForm(btn.method)">{{btn.text}}</el-button> </quill-editor>
<el-button v-if="btn.type === 3" <!-- 7 单选框 -->
type="primary" <el-radio-group v-else-if="column.widgetType === 7"
@click="cancel(btn.method)">{{btn.text}}</el-button> :disabled="column.disabled"
<el-button v-if="!btn.type" @change="column.change && column.change($event)"
type="primary" v-model="formModel[column.codeCamel]">
@click="cancel(btn.method)">{{btn.text}}</el-button> <el-radio v-for="option in column.options"
</el-col> :key="option.label" :label="option.label">{{option.value}}</el-radio>
</el-form-item> </el-radio-group>
</el-form> <!-- 8 文件 -->
</div> <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>
<el-col :span="layout ? layout.left : 6"> <el-col :span="layout ? layout.right : 0">
<div></div> <div></div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -183,6 +183,8 @@ ...@@ -183,6 +183,8 @@
* default属性可选(复选框不支持)，设置默认值，取值规范参考form/index.vue * default属性可选(复选框不支持)，设置默认值，取值规范参考form/index.vue
* hide属性可选，设置该表单字段是否显示,值为boolean * hide属性可选，设置该表单字段是否显示,值为boolean
* ref属性可选，用来获取当前表单dom节点 * ref属性可选，用来获取当前表单dom节点
* param属性可选，当表单类型为文件类型时，可传入param字段，值为后台规定必传参数，默认值为picture
* accept属性可选,当表单类型为文件类型时，可传入accept字段，限制限制上传文件类型，取值规范参考w3c
* widgetType属性可选，表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input * widgetType属性可选，表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input
* 取值1-8(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框，8表示文件上传)， * 取值1-8(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框，8表示文件上传)，
* 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项）， * 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），
...@@ -533,12 +535,12 @@ ...@@ -533,12 +535,12 @@
// textareaChange(val) { // textareaChange(val) {
// console.log(val) // console.log(val)
// }, // },
onEditorChange({ quill, html, text }) { // onEditorChange({ quill, html, text }) {
console.log(quill) // console.log(quill)
console.log(html) // console.log(html)
console.log(text) // console.log(text)
// this.content = html // // this.content = html
}, // },
onEditorBlur(val) { onEditorBlur(val) {
// console.log(val) // console.log(val)
}, },
...@@ -893,9 +895,9 @@ ...@@ -893,9 +895,9 @@
// self.partPropModel[key] = value.join('') // self.partPropModel[key] = value.join('')
// } // }
// }) // })
console.log('本表', self.nativeFormModel) // console.log('本表', self.nativeFormModel)
console.log('外表', self.foreignFormModel) // console.log('外表', self.foreignFormModel)
console.log('部分属性', self.partPropModel) // console.log('部分属性', self.partPropModel)
} }
// 发送新建请求 // 发送新建请求
console.log('请求之前', self.formModel) console.log('请求之前', self.formModel)
...@@ -913,8 +915,6 @@ ...@@ -913,8 +915,6 @@
} }
}).then(resp => { }).then(resp => {
console.log('创建成功', resp.data) console.log('创建成功', resp.data)
// 设置中间表与本表(主表)对应字段
// if (!self.relates || !self.relates.length) return
// 创建中间表数据 // 创建中间表数据
if (resp.data && self.relates && self.relates.length && self.relates[1].relateTable) { if (resp.data && self.relates && self.relates.length && self.relates[1].relateTable) {
self.$set(self.relateData, self.relates[1].relateKeys[0], resp.data.id) self.$set(self.relateData, self.relates[1].relateKeys[0], resp.data.id)
...@@ -953,7 +953,7 @@ ...@@ -953,7 +953,7 @@
} }
}) })
} }
console.log('外表公共属性partProp', self.partPropModel) // console.log('外表公共属性partProp', self.partPropModel)
// 把外表公共属性partProp的值写入foreignArray的每条数据对象 // 把外表公共属性partProp的值写入foreignArray的每条数据对象
if (self.foreignArray.length > 0) { if (self.foreignArray.length > 0) {
_.each(self.foreignArray, function(item, key) { _.each(self.foreignArray, function(item, key) {
...@@ -980,7 +980,7 @@ ...@@ -980,7 +980,7 @@
} }
item = Object.assign(item, tem) item = Object.assign(item, tem)
}) })
console.log('外表数据', self.foreignArray) // console.log('外表数据', self.foreignArray)
// 批量创建信息 // 批量创建信息
const url = _.keys(self.refers)[0] + 's' + '/create/batch' const url = _.keys(self.refers)[0] + 's' + '/create/batch'
// const string = self.transformRequest(self.foreignArray) // const string = self.transformRequest(self.foreignArray)
...@@ -1059,6 +1059,17 @@ ...@@ -1059,6 +1059,17 @@
} }
</script> </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> </style>
src/views/haomo/components/forms/index.vue
View file @ 1f57e8b1
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
], // default: 1 ], // default: 1
change: this.inputChange }, change: this.inputChange },
// 8文件 change: this.uploadChange // 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示例 // CcSubject示例
showUserColumns2: [ showUserColumns2: [
...@@ -188,8 +188,8 @@ ...@@ -188,8 +188,8 @@
console.log(125, object) console.log(125, object)
return object // 将数据返回 return object // 将数据返回
}, },
method1() { method1(formModel) {
console.log('method1') console.log('formModel')
}, },
method2() { method2() {
console.log('method2') console.log('method2')
......
src/views/haomo/components/tables/HmComplexTable.vue
View file @ 1f57e8b1
...@@ -137,7 +137,11 @@ ...@@ -137,7 +137,11 @@
<!-- 弹窗 --> <!-- 弹窗 -->
<!-- @TODO 补充详情弹窗 --> <!-- @TODO 补充详情弹窗 -->
<<<<<<< HEAD
=======
>>>>>>> b14b9dd1366e279bb016eabe5d84271fe8fbc513
<el-dialog :title="dialogName" :visible.sync="dialogFormVisible" :close-on-click-modal="closeOnClickModal" width="45%" v-if="dialogFormVisible"> <el-dialog :title="dialogName" :visible.sync="dialogFormVisible" :close-on-click-modal="closeOnClickModal" width="45%" v-if="dialogFormVisible">
<hm-complex-form :schema="HmComplexForm.formSchema" <hm-complex-form :schema="HmComplexForm.formSchema"
:columns="HmComplexForm.showUserColumns" :columns="HmComplexForm.showUserColumns"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment