Skip to content

V
VueElementTemplate
Commit 7d7b539f authored by 杨柠瑞's avatar 杨柠瑞
Browse files
Options

coding

parent 83196622
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 34 deletions
src/views/haomo/components/tables/HmComplexTable.vue
View file @ 7d7b539f
......@@ -2,6 +2,7 @@
<div class="app-container calendar-list-container">
<!-- 过滤 -->
<div class="filter-container">
<el-form :inline="true">
<!-- 过滤条件 -->
<span v-for="filter in filters" class="hm-complex-table__filter-span">
<el-input @keyup.enter.native="handleFilter"
......@@ -29,7 +30,7 @@
<el-date-picker type="datetime"
align="right"
class="filter-item"
class="filter-item hm-complex-table__filter-span"
@keyup.enter.native="handleFilter"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
......@@ -50,6 +51,7 @@
</span>
<!-- end 过滤条件 -->
<!--预定义按钮-->
<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" :loading="downloadLoading" v-waves icon="el-icon-download" v-if="isShowExport" @click="handleDownload">导出</el-button>
......@@ -65,7 +67,42 @@
<el-button class="filter-item" type="primary" v-waves icon="el-icon-close" v-if="multipleSelection.length" @click="BatchRemove">批量删除</el-button>
</span>
<!--自定义-->
<span v-if="definedOperate.length" v-for="operate in definedOperate">
<!--自定义按钮-->
<el-button v-if="operate.type == 'button'" class="filter-item" type="primary" v-waves :icon="operate.icon" @click="operate.func">{{operate.label}}</el-button>
<!--自定义下拉选择-->
<el-form-item v-if="operate.type == 'select'" :label="operate.label">
<el-select v-model="operate.value" :placeholder="operate.placeholder">
<el-option v-for="o in operate.options" :label="o.label" :value="o.code"></el-option>
</el-select>
</el-form-item>
<!--自定义输入框-->
<el-form-item v-if="operate.type == 'input'" :label="operate.label">
<el-input @keyup.enter.native="handleFilter"
style="width: 200px;"
class="filter-item"
:placeholder="operate.placeholder"
v-model="operate.value">
</el-input>
</el-form-item>
<!--自定义时间选择-->
<el-form-item v-if="operate.type == 'datetime'" :label="operate.label">
<el-date-picker type="datetime"
align="right"
class="filter-item"
@keyup.enter.native="handleFilter"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
:placeholder="operate.placeholder"
v-model="operate.value">
</el-date-picker>
</el-form-item>
</span>
</el-form>
</div>
<!-- end 过滤 -->
......@@ -99,7 +136,7 @@
<!-- end翻页 -->
<!-- 弹窗 -->
<!-- @TODO 补充弹窗 -->
<!-- @TODO 补充详情弹窗 -->
<el-dialog :title="dialogName" :visible.sync="dialogFormVisible" :close-on-click-modal="closeOnClickModal" width="dialogWidth">
<el-form v-if="dialogName == '详情'">
......@@ -244,7 +281,8 @@
required: false
},
/**
* 表格的选项，包括：pageSize。完整的示例为：
* 表格的选项，包括：pageSize、showExport、sortItem、sortOrder、showRefresh、showDeleteButton、
* buttonGroup、showDetail、dataProcessing、changeValue、newData、editData完整的示例为：
* {
* "pageSize": 10, // 默认为10条数据/页
* "showExport": false, // 默认为不显示导出按钮
......@@ -278,6 +316,21 @@
options: {
type: Object,
required: false
},
/**
* 自定义表格选项，包括：definedParams、definedOperate、完整的示例为：
* {
* definedParams(params, operate){return params} // 自定义查询数据时的Params
* definedOperate: [ // 自定义table顶部的操作，如果要根据多选框、输入框、时间选择器的值查询，需在自定义definedParams()方法中添加
* { type: 'select', label:'', placeholder: '', options:[{label: '', code: ''}], value:''}, // 自定义多选框
* { type: 'input', label:'', placeholder: '', code:'', value:''}, // 自定义输入框
* { type: 'datetime', label:'', placeholder: '', code:'', value:''}, // 自定义时间选择器
* { type: 'button', label:'', icon:'', func: this.dropDown}] // 自定义按钮
* }
*/
userDefined: {
type: Object,
required: false
}
},
directives: {
......@@ -323,6 +376,8 @@
operationWidth: 0, // 操作栏的宽度
isShowDetail: false, // 是否显示详情按钮
definedOperate: [], // 自定义操作
pickerOptions: { // 日期选项配置
disabledDate(time) {
return time.getTime() > Date.now()
......@@ -446,45 +501,28 @@
if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api'
}
if (!self.options) {
return false
if (self.options) {
self.setOptions()
}
self.options.pageSize ? this.listQuery.pageSize = self.options.pageSize : this.listQuery.pageSize // 配置pageSize
self.options.sortItem ? this.listQuery.sortItem = self.options.sortItem : this.listQuery.sortItem // sortItem
self.options.sortOrder ? this.listQuery.sortOrder = self.options.sortOrder : this.listQuery.sortOrder // sortOrder
if (self.options.newData && self.options.newData.isShow) { // 判断是否显示新建按钮
self.isShowNewButton = self.options.newData.isShow
}
if (self.options.editData && self.options.editData.isShow) { // 判断是否显示编辑按钮
self.isShowEditDataButton = self.options.editData.isShow
self.operationWidth += 50
}
if (self.options.showRefresh) { // 判断是否显示刷新按钮
self.isShowRefresh = self.options.showRefresh
}
if (self.options.showExport) { // 判断是否显示导出按钮
self.isShowExport = self.options.showExport
}
if (self.options.showDeleteButton) { // 判断是否显示删除按钮
self.isShowDeleteButton = self.options.showDeleteButton
self.operationWidth += 50
}
if (self.options.buttonGroup) { // 设置按钮是否以按钮组呈现
self.buttonGroup = self.options.buttonGroup
}
if (self.options.showDetail && self.options.showDetail.isShow) { // 设置按钮是否以按钮组呈现
self.isShowDetail = self.options.showDetail.isShow
self.operationWidth += 50
if (self.userDefined) {
self.setDefinedOperate()
}
console.log(request.defaults)
console.log(`request.defaults.baseURL: ${request.defaults.baseURL}`)
},
setDefinedOperate() {
const self = this
if (self.userDefined.definedOperate) {
self.definedOperate = self.userDefined.definedOperate
}
},
getList() {
const self = this
self.listLoading = true
// 处理过滤条件
const params = JSON.parse(JSON.stringify(self.listQuery))
let params = JSON.parse(JSON.stringify(self.listQuery))
params.filters = self.filterParams
params.filters = this.deleteFilter(params.filters)
......@@ -495,6 +533,10 @@
params.refers = self.refers
}
if (self.userDefined && self.userDefined.definedParams) {
params = self.userDefined.definedParams(params, self.definedOperate)
}
request(self.schema.modelUnderscorePlural, {
params: params
}).then(resp => {
......@@ -677,6 +719,36 @@
})
})
},
setOptions() {
const self = this
self.options.pageSize ? this.listQuery.pageSize = self.options.pageSize : this.listQuery.pageSize // 配置pageSize
self.options.sortItem ? this.listQuery.sortItem = self.options.sortItem : this.listQuery.sortItem // sortItem
self.options.sortOrder ? this.listQuery.sortOrder = self.options.sortOrder : this.listQuery.sortOrder // sortOrder
if (self.options.newData && self.options.newData.isShow) { // 判断是否显示新建按钮
self.isShowNewButton = self.options.newData.isShow
}
if (self.options.editData && self.options.editData.isShow) { // 判断是否显示编辑按钮
self.isShowEditDataButton = self.options.editData.isShow
self.operationWidth += 50
}
if (self.options.showRefresh) { // 判断是否显示刷新按钮
self.isShowRefresh = self.options.showRefresh
}
if (self.options.showExport) { // 判断是否显示导出按钮
self.isShowExport = self.options.showExport
}
if (self.options.showDeleteButton) { // 判断是否显示删除按钮
self.isShowDeleteButton = self.options.showDeleteButton
self.operationWidth += 50
}
if (self.options.buttonGroup) { // 设置按钮是否以按钮组呈现
self.buttonGroup = self.options.buttonGroup
}
if (self.options.showDetail && self.options.showDetail.isShow) { // 设置按钮是否以按钮组呈现
self.isShowDetail = self.options.showDetail.isShow
self.operationWidth += 50
}
},
handleSelectionChange(val) {
this.multipleSelection = val
},
......
src/views/haomo/components/tables/index.vue
View file @ 7d7b539f
......@@ -5,7 +5,8 @@
:filters="userFilters"
:includes="userIncludes"
:refers="userRefers"
:options="userOptions"></hm-complex-table>
:options="userOptions"
:userDefined="userDefined"></hm-complex-table>
</div>
</template>
......@@ -76,13 +77,26 @@
isShow: true,
showColumns: ['mobile', 'loginid', 'username', 'email']
}
// dataProcessing(value) {}
// dataProcessing(value) {} // 处理返回后的数据,必须return 处理后的数据
}
this.userDefined = {
definedParams(params, operate) {
return params
},
definedOperate: [
{ type: 'select', label: '', placeholder: '类型', options: [{ label: '姓名', code: 'username' }, { label: '登录ID', code: 'loginid' }], value: '' },
{ type: 'input', label: '', placeholder: '邮箱', code: 'email', value: '' },
{ type: 'datetime', label: '', placeholder: '创建时间', code: 'createTime', value: '' },
{ type: 'button', label: '搜索', icon: 'el-icon-search', func: this.dropDown }]
}
},
methods: {
method1() {
this.dialogFormVisible = false
console.log('method1')
},
dropDown() {
console.log('输出一些东西')
}
}
}
......
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