3 changed files with 340 additions and 1 deletions
@ -0,0 +1,338 @@ |
|||||
|
<template> |
||||
|
<view class="page-body"> |
||||
|
<!-- 页面内容开始 --> |
||||
|
|
||||
|
<!-- 表格搜索组件开始 --> |
||||
|
<vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns" |
||||
|
@search="search"></vk-data-table-query> |
||||
|
<!-- 表格搜索组件结束 --> |
||||
|
|
||||
|
<!-- 自定义按钮区域开始 --> |
||||
|
<view> |
||||
|
<el-row> |
||||
|
<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button> |
||||
|
<!-- 批量操作 --> |
||||
|
<el-dropdown v-if="table1.multipleSelection" :split-button="false" trigger="click" @command="batchBtn"> |
||||
|
<!-- <el-button type="danger" size="small" style="margin-left: 20rpx;" |
||||
|
:disabled="table1.multipleSelection.length === 0"> |
||||
|
批量操作<i class="el-icon-arrow-down el-icon--right"></i> |
||||
|
</el-button> --> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<!-- <el-dropdown-item :command="1">批量操作1</el-dropdown-item> |
||||
|
<el-dropdown-item :command="2">批量操作2</el-dropdown-item> --> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</el-row> |
||||
|
</view> |
||||
|
<!-- 自定义按钮区域结束 --> |
||||
|
|
||||
|
<!-- 表格组件开始 --> |
||||
|
<vk-data-table ref="table1" :action="table1.action" :columns="table1.columns" :query-form-param="queryForm1" |
||||
|
:right-btns="['detail_auto','update','delete']" :default-expand-all="false" @update="updateBtn" |
||||
|
@delete="deleteBtn" @current-change="currentChange" @selection-change="selectionChange"></vk-data-table> |
||||
|
<!-- 表格组件结束 --> |
||||
|
|
||||
|
<!-- 添加或编辑的弹窗开始 --> |
||||
|
<vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="500px" mode="form" |
||||
|
:close-on-click-modal="false"> |
||||
|
<vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action" |
||||
|
:form-type="form1.props.formType" :columns='form1.props.columns' label-width="120px" |
||||
|
@success="form1.props.show = false;refresh();"></vk-data-form> |
||||
|
</vk-data-dialog> |
||||
|
<!-- 添加或编辑的弹窗结束 --> |
||||
|
|
||||
|
<!-- 页面内容结束 --> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
var that; // 当前页面对象 |
||||
|
var vk = uni.vk; // vk实例 |
||||
|
var originalForms = {}; // 表单初始化数据 |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
// 页面数据变量 |
||||
|
return { |
||||
|
// 页面是否请求中或加载中 |
||||
|
loading: false, |
||||
|
// init请求返回的数据 |
||||
|
data: { |
||||
|
|
||||
|
}, |
||||
|
// 表格相关开始 ----------------------------------------------------------- |
||||
|
table1: { |
||||
|
// 表格数据请求地址 |
||||
|
action: "admin/contract/template/sys/getList", |
||||
|
// 表格字段显示规则 |
||||
|
columns: [ |
||||
|
// { |
||||
|
// key: "_id", |
||||
|
// title: "id", |
||||
|
// type: "text", |
||||
|
// width: 220 |
||||
|
// }, |
||||
|
{ |
||||
|
key: "name", |
||||
|
title: "名称", |
||||
|
type: "text", |
||||
|
width: 220, |
||||
|
align: "left", |
||||
|
}, |
||||
|
// { |
||||
|
// key: "parent_id", |
||||
|
// title: "上级id", |
||||
|
// type: "text", |
||||
|
// width: 220, |
||||
|
// }, |
||||
|
{ |
||||
|
key: "remark", |
||||
|
title: "备注", |
||||
|
type: "text", |
||||
|
align: "left", |
||||
|
width: 220 |
||||
|
}, |
||||
|
{ |
||||
|
key: "sort", |
||||
|
title: "排序", |
||||
|
type: "number", |
||||
|
align: "left", |
||||
|
width: 80, |
||||
|
}, |
||||
|
{ |
||||
|
key: "_add_time", |
||||
|
title: "添加时间", |
||||
|
type: "time", |
||||
|
align: "left", |
||||
|
width: 160, |
||||
|
sortable: "custom" |
||||
|
}, |
||||
|
{ |
||||
|
key: "_add_time", |
||||
|
title: "距离现在", |
||||
|
type: "dateDiff", |
||||
|
align: "left", |
||||
|
width: 120 |
||||
|
}, |
||||
|
], |
||||
|
// 多选框选中的值 |
||||
|
multipleSelection: [], |
||||
|
// 当前高亮的记录 |
||||
|
selectItem: "" |
||||
|
}, |
||||
|
// 表格相关结束 ----------------------------------------------------------- |
||||
|
// 表单相关开始 ----------------------------------------------------------- |
||||
|
// 查询表单请求数据 |
||||
|
queryForm1: { |
||||
|
// 查询表单数据源，可在此设置默认值 |
||||
|
formData: { |
||||
|
|
||||
|
}, |
||||
|
// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key |
||||
|
columns: [ |
||||
|
// { |
||||
|
// key: "name", |
||||
|
// title: "名称", |
||||
|
// type: "text", |
||||
|
// width: 160, |
||||
|
// mode: "%%" |
||||
|
// }, |
||||
|
// { |
||||
|
// key: "remark", |
||||
|
// title: "备注", |
||||
|
// type: "text", |
||||
|
// width: 160, |
||||
|
// mode: "%%" |
||||
|
// }, |
||||
|
// { |
||||
|
// key: "_add_time", |
||||
|
// title: "添加时间", |
||||
|
// type: "datetimerange", |
||||
|
// width: 400, |
||||
|
// mode: "[]" |
||||
|
// }, |
||||
|
] |
||||
|
}, |
||||
|
form1: { |
||||
|
// 表单请求数据，此处可以设置默认值 |
||||
|
data: { |
||||
|
sort: 0 |
||||
|
}, |
||||
|
// 表单属性 |
||||
|
props: { |
||||
|
// 表单请求地址 |
||||
|
action: "", |
||||
|
// 表单字段显示规则 |
||||
|
columns: [{ |
||||
|
key: "name", |
||||
|
title: "名称", |
||||
|
type: "text", |
||||
|
placeholder: "请输入分类名称" |
||||
|
}, |
||||
|
{ |
||||
|
key: "icon", |
||||
|
title: "图标", |
||||
|
type: "icon", |
||||
|
placeholder: "请选择图标" |
||||
|
}, |
||||
|
{ |
||||
|
key: "parent_id", |
||||
|
title: "上级分类", |
||||
|
type: "tree-select", |
||||
|
placeholder: "请选择上级分类", |
||||
|
action: "admin/spot/category/sys/getTree", |
||||
|
props: { |
||||
|
list: "rows", |
||||
|
value: "_id", |
||||
|
label: "name", |
||||
|
children: "children" |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
key: "remark", |
||||
|
title: "备注", |
||||
|
type: "textarea", |
||||
|
maxlength: "99", |
||||
|
showWordLimit: true, |
||||
|
autosize: { |
||||
|
minRows: 2, |
||||
|
maxRows: 10 |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
key: "sort", |
||||
|
title: "排序", |
||||
|
type: "number", |
||||
|
precision: 0, |
||||
|
placeholder: "请输入排序值", |
||||
|
}, |
||||
|
], |
||||
|
// 表单验证规则 |
||||
|
rules: { |
||||
|
sort: [{ |
||||
|
type: 'number', |
||||
|
message: '排序值必须为数字' |
||||
|
}], |
||||
|
name:[ |
||||
|
{ required:true, message:'分类名称不能为空', trigger:'blur' }, |
||||
|
], |
||||
|
}, |
||||
|
// add 代表添加 update 代表修改 |
||||
|
formType: "", |
||||
|
// 是否显示表单的弹窗 |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
// 其他弹窗表单 |
||||
|
formDatas: {}, |
||||
|
// 表单相关结束 ----------------------------------------------------------- |
||||
|
}; |
||||
|
}, |
||||
|
// 监听 - 页面每次【加载时】执行(如：前进) |
||||
|
onLoad(options = {}) { |
||||
|
that = this; |
||||
|
vk = that.vk; |
||||
|
that.options = options; |
||||
|
that.init(options); |
||||
|
}, |
||||
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发 |
||||
|
onReady() {}, |
||||
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面) |
||||
|
onShow() {}, |
||||
|
// 监听 - 页面每次【隐藏时】执行(如：返回) |
||||
|
onHide() {}, |
||||
|
// 函数 |
||||
|
methods: { |
||||
|
// 页面数据初始化函数 |
||||
|
init(options) { |
||||
|
originalForms["form1"] = vk.pubfn.copyObject(that.form1); |
||||
|
}, |
||||
|
// 页面跳转 |
||||
|
pageTo(path) { |
||||
|
vk.navigateTo(path); |
||||
|
}, |
||||
|
// 表单重置 |
||||
|
resetForm() { |
||||
|
vk.pubfn.resetForm(originalForms, that); |
||||
|
}, |
||||
|
// 搜索 |
||||
|
search() { |
||||
|
that.$refs.table1.search(); |
||||
|
}, |
||||
|
// 刷新 |
||||
|
refresh() { |
||||
|
that.$refs.table1.refresh(); |
||||
|
}, |
||||
|
// 获取当前选中的行的数据 |
||||
|
getCurrentRow() { |
||||
|
return that.$refs.table1.getCurrentRow(); |
||||
|
}, |
||||
|
// 监听 - 行的选中高亮事件 |
||||
|
currentChange(val) { |
||||
|
that.table1.selectItem = val; |
||||
|
}, |
||||
|
// 当选择项发生变化时会触发该事件 |
||||
|
selectionChange(list) { |
||||
|
that.table1.multipleSelection = list; |
||||
|
}, |
||||
|
// 显示添加页面 |
||||
|
addBtn() { |
||||
|
that.resetForm(); |
||||
|
that.form1.props.action = 'admin/contract/template/sys/add'; |
||||
|
that.form1.props.formType = 'add'; |
||||
|
that.form1.props.title = '添加'; |
||||
|
that.form1.props.show = true; |
||||
|
}, |
||||
|
// 显示修改页面 |
||||
|
updateBtn({ |
||||
|
item |
||||
|
}) { |
||||
|
that.form1.props.action = 'admin/contract/template/sys/update'; |
||||
|
that.form1.props.formType = 'update'; |
||||
|
that.form1.props.title = '编辑'; |
||||
|
that.form1.props.show = true; |
||||
|
that.form1.data = item; |
||||
|
}, |
||||
|
// 删除按钮 |
||||
|
deleteBtn({ |
||||
|
item, |
||||
|
deleteFn |
||||
|
}) { |
||||
|
deleteFn({ |
||||
|
action: "admin/contract/template/sys/delete", |
||||
|
data: { |
||||
|
_id: item._id |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
// 监听 - 批量操作的按钮点击事件 |
||||
|
batchBtn(index) { |
||||
|
switch (index) { |
||||
|
case 1: |
||||
|
vk.toast("批量操作按钮1"); |
||||
|
break; |
||||
|
case 2: |
||||
|
vk.toast("批量操作按钮2"); |
||||
|
break; |
||||
|
default: |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 监听属性 |
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
// 过滤器 |
||||
|
filters: { |
||||
|
|
||||
|
}, |
||||
|
// 计算属性 |
||||
|
computed: { |
||||
|
|
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.page-body {} |
||||
|
</style> |
||||
Loading…
Reference in new issue