[fix] init
This commit is contained in:
938
example/index.html
Normal file
938
example/index.html
Normal file
@@ -0,0 +1,938 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user