cl-crud/example/index.html

939 lines
20 KiB
HTML
Raw Permalink Normal View History

2022-06-07 09:04:28 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CRUD Example</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="./vue2.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../dist/cl-crud2.min.js"></script>
<style>
html,
body,
#app {
height: 100%;
width: 100%;
}
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="app">
<cl-crud ref="crud" @load="onLoad">
<el-row type="flex" align="middle">
<cl-refresh-btn></cl-refresh-btn>
<cl-add-btn></cl-add-btn>
<cl-multi-delete-btn></cl-multi-delete-btn>
<cl-query
:list="[
{
label: '启用',
value: 1
},
{
label: '禁用',
value: 0
}
]"
></cl-query>
<cl-filter label="状态">
<el-select
size="mini"
v-model="selects.status"
@change="val => {
refresh({
status: val,
page: 1
})
}"
>
<el-option value="" label="全部"></el-option>
<el-option value="0" label="禁用"></el-option>
<el-option value="1" label="启用"></el-option>
</el-select>
</cl-filter>
<el-button size="mini" @click="openForm">自定义测试表单</el-button>
<el-button size="mini" @click="openDialog">自定义对话框</el-button>
<cl-flex1></cl-flex1>
<cl-search-key
field="name"
:field-list="[
{
label: '姓名',
value: 'name'
},
{
label: '身份证',
value: 'idCard'
}
]"
></cl-search-key>
<cl-adv-btn></cl-adv-btn>
</el-row>
<el-row>
<cl-table ref="table" v-bind="table.props" v-on="table.on"> </cl-table>
</el-row>
<el-row>
<cl-pagination></cl-pagination>
</el-row>
<!-- 高级搜索 -->
<cl-adv-search ref="adv-search" v-bind="advSearch.props" v-on="advSearch.on">
</cl-adv-search>
<!-- 编辑、新增 -->
<cl-upsert
v-model="upsert.form"
ref="upsert"
v-bind="upsert.props"
v-on="upsert.on"
>
</cl-upsert>
<!-- 自定义表单 -->
<cl-form ref="form">
<!-- 动态增减表单验证 -->
<template #slot-validate="{scope}">
<el-form-item
v-for="(item, index) in scope.vads"
:key="index"
:prop="'vads.' + index + '.val'"
:rules="{ required: true, message: '请输入' }"
>
<el-input v-model="item.val"></el-input>
</el-form-item>
<el-button @click="addVad(scope.vads)">添加行</el-button>
</template>
<!-- 测试设置表单值 -->
<template #slot-var="{ scope }">
<el-input v-model="scope._name"></el-input>
<el-button @click="setFormValue(scope)">设置</el-button>
</template>
<!-- 内嵌crud -->
<template #slot-crud="{scope}">
<cl-crud @load="onUpsertCrudLoad">
<cl-table
:props="{
'max-height': '300px'
}"
:columns="[
{
label: '姓名',
prop: 'name'
},
{
label: '存款',
prop: 'price',
},
{
label: '创建时间',
prop: 'createTime'
},
]"
></cl-table>
</cl-crud>
</template>
</cl-form>
<!-- 自定义对话框 -->
<cl-dialog
title="自定义对话框"
:visible.sync="dialog.visible"
v-bind="dialog.props"
v-on="dialog.on"
>
<p>自定义对话框</p>
<test></test>
</cl-dialog>
</cl-crud>
</div>
<script>
// 表格数据
const userList = [
{
id: 1,
name: "刘一",
process: 42.2,
createTime: "2019年09月02日",
price: 75.99,
salesRate: 52.2,
status: 1,
images: [
"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/1.jpg"
]
},
{
id: 2,
name: "陈二",
process: 35.2,
createTime: "2019年09月05日",
price: 242.1,
salesRate: 72.1,
status: 1,
images: [
"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/2.jpg"
]
},
{
id: 3,
name: "张三",
process: 10.2,
createTime: "2019年09月12日",
price: 74.11,
salesRate: 23.9,
status: 0,
images: [
"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/3.jpg"
]
},
{
id: 4,
name: "李四",
process: 75.5,
createTime: "2019年09月13日",
price: 276.64,
salesRate: 47.2,
status: 0,
images: [
"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/4.jpg"
]
},
{
id: 5,
name: "王五",
process: 25.4,
createTime: "2019年09月18日",
price: 160.23,
salesRate: 28.3,
status: 1,
images: [
"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/5.jpg"
]
}
];
// 网络请求
const testService = {
page: p => {
console.log("GET[page]", p);
return Promise.resolve({
list: userList,
pagination: {
page: p.page,
size: p.size,
total: 5
}
});
},
info: d => {
console.log("GET[info]", d);
return new Promise(resolve => {
resolve({
id: 1,
name: d.id,
price: 100,
ids: "0,3,2"
});
});
},
add: d => {
console.log("POST[add]", d);
return Promise.resolve();
},
delete: d => {
console.log("POST[delete]", d);
return Promise.resolve();
},
update: d => {
console.log("POST[update]", d);
return Promise.resolve();
}
};
// 注册组件
Vue.use(CRUD, {
crud: {
event: {
refresh: (data, { app }) => {
app.refresh(data);
}
},
dict: {
label: {
add: "添加",
update: "更新",
delete: "移除",
multiDelete: "批量移除",
advSearch: "过滤",
saveButtonText: "确认"
// closeButtonText: "取消"
}
}
}
});
Vue.component("test", {
data() {
return {
text: ""
};
},
mounted() {
console.log("test load");
setInterval(() => {
this.text = Math.random();
}, 1000);
},
render(h) {
return h("p", this.text);
}
});
new Vue({
el: "#app",
data() {
return {
selects: {
status: ""
},
table: {
on: {
"row-click": row => {
console.log("行点击", row);
}
},
props: {
columns: [
{
type: "selection",
align: "center",
width: 60
},
{
label: "姓名",
prop: "name",
align: "center",
"min-width": 120
},
{
label: "存款",
prop: "price",
sortable: true,
align: "center",
"min-width": 120
},
{
label: "状态",
prop: "status",
align: "center",
"min-width": 120,
dict: [
{
label: "启用",
value: 1,
type: "primary"
},
{
label: "禁用",
value: 0,
type: "danger"
}
]
},
{
label: "创建时间",
prop: "createTime",
align: "center",
"min-width": 150
},
{
label: "操作",
type: "op",
align: "center",
layout: [
"edit",
"delete",
({ h }) => {
return h(
"el-button",
{
props: {
type: "text",
size: "mini"
},
on: {
click: () => {
this.$refs["crud"].rowAppend({
name: "icssoa append"
});
}
}
},
"追加"
);
}
]
}
]
}
},
upsert: {
on: {
open(isEdit, data) {
console.log("cl-upsert 打开", isEdit, data.name);
},
close() {
console.log("cl-upsert 关闭");
}
},
props: {
props: {
width: "1000px",
"label-position": "top"
},
onOpen: (isEdit, data, { done, submit, close }) => {
console.log("cl-upsert 打开钩子", isEdit, data);
},
onClose(done) {
console.log("cl-upsert 关闭钩子");
done();
},
onInfo(data, { next, done, close }) {
console.log("cl-upsert 详情钩子", data);
next(data);
},
onSubmit(isEdit, data, { next, close, done }) {
console.log("cl-upsert 提交钩子", `是否编辑 ${isEdit}`, data);
next(data);
},
items: [
{
label: "姓名",
prop: "name",
component: {
name: "el-input"
},
rules: {
required: true,
message: "姓名不能为空"
}
},
{
label: "是否显示存款",
prop: "isPrice",
flex: false,
component: {
name: "el-switch"
}
},
{
label: "存款",
prop: "price",
hidden: "@isPrice",
component: {
name: "el-input-number"
},
rules: {
required: true,
message: "存款不能为空"
}
}
],
op: {
layout: [
"close",
"save",
({ h }) => {
return h(
"el-button",
{
props: {
size: "small"
},
on: {
click: () => {
// this.$refs["upsert"].setForm(
// "name",
// "神仙都没用"
// );
this.upsert.form.name = "神仙都没用";
}
}
},
"设置名称"
);
}
]
},
hdr: {
opList: ["fullscreen", "close"]
}
},
form: {
name: "xxxx"
}
},
advSearch: {
on: {
open(data) {
console.log("adv-search 打开", data);
},
close() {
console.log("adv-search 关闭");
},
reset() {
console.log("adv-search 重置");
},
clear() {
console.log("adv-search 清空");
}
},
props: {
onOpen(data, { next }) {
console.log("adv-search 打开钩子", data);
next();
},
onClose(done) {
console.log("adv-search 关闭钩子");
done();
},
onSearch(data, { next, close }) {
console.log("adv-search 搜索钩子", data);
next(data);
},
opList: ["search", "reset", "clear", "close"],
items: [
{
label: "金额",
prop: "price",
value: 100,
component: {
name: "el-input-number",
props: {
min: 1,
max: 1000000
}
}
},
{
label: "销售率",
prop: "salesRate",
component: {
name: "el-input-number",
props: {
precision: 2,
min: 0,
max: 100
}
}
}
]
}
},
dialog: {
visible: false,
props: {
title: "自定义对话框",
props: {
"before-close"(done) {
console.log("dialog before-close");
setTimeout(() => {
done();
}, 300);
}
}
},
on: {
open() {
console.log("dialog open");
},
closed() {
console.log("dialog closed");
},
opened() {
console.log("dialog opened");
},
close() {
console.log("dialog close");
}
}
}
};
},
methods: {
openForm() {
const { open, setForm } = this.$refs["form"];
const rd = Math.random();
open({
props: {
title: "自定义表单",
"label-width": "150px",
width: "1000px"
},
form: {
qs: [1],
_name: "羊姜" + rd
},
items: [
{
label: "表单名称",
prop: "name",
component: {
name: "test"
}
},
{
props: {
"label-width": "0px"
},
component: ({ h }) => {
return h(
"el-divider",
{
props: {
"content-position": "left"
}
},
"测试设置表单值"
);
}
},
{
component: {
name: "slot-var"
}
},
{
props: {
"label-width": "0px"
},
component: ({ h }) => {
return h(
"el-divider",
{
props: {
"content-position": "left"
}
},
"测试验证el-select 清空表单"
);
}
},
{
label: "类型",
prop: "type",
component: {
name: "el-select",
on: {
change: v => {
setForm("name", v);
}
},
options: [
{
label: "羊姜",
value: "羊姜"
},
{
label: "神仙都没用",
value: "神仙都没用"
}
]
}
},
{
props: {
"label-width": "0px"
},
component: ({ h }) => {
return h(
"el-divider",
{
props: {
"content-position": "left"
}
},
"测试内嵌CRUD"
);
}
},
{
props: {
"label-width": "0px"
},
component: {
name: "slot-crud"
}
},
{
props: {
"label-width": "0px"
},
component: ({ h }) => {
return h(
"el-divider",
{
props: {
"content-position": "left"
}
},
"测试验证规则"
);
}
},
{
prop: "vads",
value: [],
label: "动态增减表单验证",
component: {
name: "slot-validate"
}
},
{
props: {
"label-width": "0px"
},
component: ({ h }) => {
return h(
"el-divider",
{
props: {
"content-position": "left"
}
},
"测试显隐"
);
}
},
{
label: "奇术",
prop: "qs",
value: [],
component: {
name: "el-select",
attrs: {
placeholder: "请选择奇术"
},
props: {
multiple: true
},
options: [
{
label: "烟水还魂",
value: 1
},
{
label: "雨恨云愁",
value: 2
}
]
}
},
{
label: "技能",
prop: "jn",
value: 1,
component: {
name: "el-select",
attrs: {
placeholder: "请选择技能"
},
options: [
{
label: "飞羽箭",
value: 1
},
{
label: "落星式",
value: 2
}
]
}
},
{
label: "五行",
prop: "wx",
value: 0,
hidden: ({ scope }) => {
return scope.jn == 1;
},
component: {
name: "el-radio-group",
options: [
{
label: "水",
value: 0
},
{
label: "火",
value: 1
},
{
label: "雷",
value: 2
},
{
label: "风",
value: 3
},
{
label: "土",
value: 4
}
]
}
},
{
label: "雨润",
prop: "s1",
hidden: ({ scope }) => {
return scope.wx != 0;
},
component: ({ h }) => {
return h("p", "以甘甜雨露的滋润使人精力充沛");
}
},
{
label: "风雪冰天",
prop: "s2",
hidden: ({ scope }) => {
return scope.wx != 0;
},
component: ({ h }) => {
return h("p", "召唤漫天风雪,对敌方造成巨大的杀伤力");
}
},
{
label: "三昧真火",
prop: "h",
hidden: ({ scope }) => {
return scope.wx != 1;
},
component: ({ h }) => {
return h("p", "召唤三昧真火焚烧敌方的仙术");
}
},
{
label: "惊雷闪",
prop: "l",
hidden: ({ scope }) => {
return scope.wx != 2;
},
component: ({ h }) => {
return h(
"p",
"召唤惊雷无数,对敌方全体进行攻击,是十分强力的仙术"
);
}
},
{
label: "如沐春风",
prop: "f",
hidden: ({ scope }) => {
return scope.wx != 3;
},
component: ({ h }) => {
return h("p", "温暖柔和的复苏春风,使人回复活力");
}
},
{
label: "艮山壁障",
prop: "t",
hidden: ({ scope }) => {
return scope.wx != 4;
},
component: ({ h }) => {
return h(
"p",
"以艮山之灵形成一道壁障,受此壁障守护者刀枪不入"
);
}
}
],
on: {
open: (data, { close, submit, done }) => {
console.log("cl-form open", data);
},
close(done) {
done();
console.log("cl-form close");
},
submit: (data, { close, done, next }) => {
console.log("cl-form submit", data);
setTimeout(() => {
this.$message.success("提交成功");
close();
}, 1500);
}
}
});
},
openDialog() {
this.dialog.visible = true;
},
setFormValue(scope) {
this.$refs["form"].setForm("_name", "神仙");
},
onLoad({ ctx, app }) {
ctx.service(testService)
.permission(() => {
return {
add: true,
update: true,
delete: true
};
})
.done();
app.refresh();
},
refresh(params) {
this.$refs["crud"].refresh(params);
},
onUpsertCrudLoad({ ctx, app }) {
ctx.service(testService).done();
app.refresh();
},
addVad(list) {
list.push({
val: ""
});
}
}
});
</script>
</body>
</html>