Skip to content

V
VueElementTemplate
Commit 86fc39d3 authored by 王康's avatar 王康
Browse files
Options

form

parent fb83d573
master storybook
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 119 additions and 29 deletions
src/assets/custom-theme/index.css
View file @ 86fc39d3
This diff is collapsed.
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 86fc39d3
......@@ -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
View file @ 86fc39d3
......@@ -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
View file @ 86fc39d3
......@@ -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
View file @ 86fc39d3
......@@ -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
View file @ 86fc39d3
......@@ -17,6 +17,8 @@
},
data() {
return {
// 会议、通知通报、公文、会议请假、调班申请、议题征集申请
//
}
},
computed: {
......
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