Skip to content

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

coding

parents a3e39a05 b14b9dd1
Expand all Show whitespace changes
Inline Side-by-side
Showing with 620 additions and 195 deletions
src/views/haomo/components/calendar/index.vue
View file @ 1f57e8b1
<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>
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 1f57e8b1
<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-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 || '170px'"
:label-width="formStyle && formStyle.formOptions && formStyle.formOptions.labelWidth || '163px'"
:model="formModel"
:rules="rules"
:style=" formStyle && formStyle.formOptions && formStyle.formOptions.style || {width:'80%',margin:'0 auto'}">
:style=" formStyle && formStyle.formOptions && formStyle.formOptions.style || {width:'100%'}">
<el-form-item v-for="column in showUserColumns"
v-show="!column.hide"
:key="column.id"
......@@ -27,7 +27,7 @@
<!-- -->
<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%'}"
:style="formStyle && formStyle.datePicker && formStyle.datePicker.style || {width: '70%'}"
:ref="column.ref || ''"
:readonly="column.readonly"
:type="column.dateType || 'date'"
......@@ -41,7 +41,7 @@
:ref="column.ref || ''"
v-model="formModel[column.codeCamel]"
@change="column.change && column.change($event)"
:style="formStyle && formStyle.select && formStyle.select.style || {width: '65%'}"
:style="formStyle && formStyle.select && formStyle.select.style || {width: '70%'}"
:multiple="column.multiple"
:disabled="column.disabled"
style="width: 50%"
......@@ -56,7 +56,7 @@
<el-input v-else-if="column.widgetType === 4"
:ref="column.ref || ''"
:readonly="column.readonly"
:style="formStyle && formStyle.textarea && formStyle.textarea.style || {width: '65%'}"
: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'"
......@@ -80,13 +80,13 @@
</el-checkbox-group>
<!-- 6 富文本 -->
<quill-editor v-else-if="column.widgetType === 5"
:ref="column.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%'}"
:style="formStyle && formStyle.quillEditor && formStyle.quillEditor.style || {width:'70%'}"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="(column.change && column.change($event)) || onEditorChange"
@change="column.change && column.change($event)"
@ready="onEditorReady($event)">
</quill-editor>
<!-- 7 单选框 -->
......@@ -99,20 +99,21 @@
</el-radio-group>
<!-- 8 文件 -->
<el-upload v-else-if="column.widgetType === 8"
name="picture"
: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="column.ref || ''"
ref="upload"
:on-success="uploadSuccess">
<el-button slot="trigger" size="small" type="primary"
:disabled="column.disabled">选取文件</el-button>
</el-upload>
<!-- 1 普通input -->
<!-- 1 普通input || {width:'65%'}-->
<el-input v-else
:style="formStyle && formStyle.input && formStyle.input.style || {width:'65%'}"
:style="formStyle && formStyle.input && formStyle.input.style || {width:'70%'}"
v-model="formModel[column.codeCamel]"
:disabled="column.disabled"
:readonly="column.readonly"
......@@ -137,9 +138,8 @@
</el-col>
</el-form-item>
</el-form>
</div>
</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>
src/views/haomo/components/forms/index.vue
View file @ 1f57e8b1
......@@ -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')
......
src/views/haomo/components/tables/HmComplexTable.vue
View file @ 1f57e8b1
......@@ -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"
......
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