939 lines
20 KiB
HTML
939 lines
20 KiB
HTML
<!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>
|