Skip to content

Commit dc90f41

Browse files
SmallRuralDogSmallRuralDog
committed
添加 WangEditor 组件
添加 Divider 组件 完善 Input 组件 完善 Select 组件
1 parent 05a1c1e commit dc90f41

File tree

18 files changed

+5764
-405
lines changed

18 files changed

+5764
-405
lines changed

‎docs/form.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,17 @@ $form->item('username', '用户名')->serveRulesMessage(["required" => '必填']
192192
$form->item('username', '用户名')->help("help content")
193193
```
194194

195+
### 头部/底部组件
196+
197+
会在当前字段上下添加组件，常用于字段内部分块
198+
199+
```php
200+
$form->topComponent(Divider::make("详细信息"))
201+
$form->footerComponent(Divider::make("详细信息"));
202+
```
203+
204+
205+
195206
## 表单事件
196207

197208
## 关联模型

‎docs/grid.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,10 @@ $column->help('帮助内容');
327327
```php
328328
$column->displayComponent(Tag::make()->size("mini")->type("info"));
329329
```
330+
331+
330332
### 自定义数据
333+
331334
可以在后端自定义当前列的值
332335
- `$row`当前数据行的所有值
333336
- `$value`当前列的值
@@ -343,8 +346,8 @@ $grid->column('name')->customValue(function ($row, $value) {
343346

344347
会在值的前后以字符串形式拼接
345348

346-
```
347-
grid->column('name')->itemSuffix("折")
349+
```php
350+
$grid->column('name')->itemSuffix("折")
348351
```
349352

350353

‎package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,21 @@
1515
"babel-plugin-component": "^1.1.1",
1616
"babel-plugin-import": "^1.13.0",
1717
"cross-env": "^5.1",
18+
"element-ui": "^2.13.0",
1819
"laravel-mix": "^4.1.4",
1920
"lodash": "^4.17.15",
2021
"popper.js": "^1.12",
2122
"resolve-url-loader": "^2.3.1",
2223
"sass": "^1.20.1",
2324
"sass-loader": "7.*",
24-
"vue": "^2.6.11",
25-
"vue-clipboard2": "^0.3.1",
26-
"vue-happy-scroll": "^2.1.1",
27-
"vue-template-compiler": "^2.6.10",
28-
"element-ui": "^2.13.0",
2925
"view-design": "^4.1.3",
26+
"vue": "^2.6.11",
3027
"vue-bus": "^1.2.1",
28+
"vue-clipboard2": "^0.3.1",
3129
"vue-dplayer": "0.0.10",
30+
"vue-happy-scroll": "^2.1.1",
3231
"vue-router": "^3.1.6",
32+
"vue-template-compiler": "^2.6.10",
3333
"vue-waterfall2": "^1.9.6",
3434
"wangeditor": "^3.1.1"
3535
},

‎public/app.js

Lines changed: 5377 additions & 335 deletions
Large diffs are not rendered by default.

‎public/mix-manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"/app.js": "/app.js?id=2d454337af6b80d2e9ee",
2+
"/app.js": "/app.js?id=74fda92e3b50a4dc4b6a",
33
"/manifest.js": "/manifest.js?id=d9708e48a6c10ccee4bb",
44
"/vendor.js": "/vendor.js?id=f4679ac178c0e413cb28"
55
}

‎resources/js/components.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import ColorPicker from './components/widgets/ColorPicker'
3939
import TimePicker from './components/widgets/TimePicker'
4040
import DatePicker from './components/widgets/DatePicker'
4141
import DateTimePicker from './components/widgets/DateTimePicker'
42+
import WangEditor from './components/widgets/WangEditor'
4243

4344

4445

@@ -57,6 +58,7 @@ Vue.component('ColorPicker', ColorPicker);
5758
Vue.component('TimePicker', TimePicker);
5859
Vue.component('DatePicker', DatePicker);
5960
Vue.component('DateTimePicker', DateTimePicker);
61+
Vue.component('WangEditor', WangEditor);
6062

6163

6264

@@ -68,7 +70,7 @@ import Image from './components/widgets/Image'
6870
import Icon from './components/widgets/Icon'
6971

7072

71-
73+
//Grid
7274
Vue.component('Avatar', Avatar);
7375
Vue.component('Tag', Tag);
7476
Vue.component('Link', Link);
@@ -78,6 +80,7 @@ Vue.component('Icon', Icon);
7880

7981

8082

83+
8184
import MenuItem from './components/layout/MenuItem'
8285
Vue.component('MenuItem', MenuItem);
8386

@@ -93,4 +96,9 @@ Vue.component('DeleteAction', DeleteAction);
9396
import GridCreateButton from './components/widgets/Tools/Create'
9497
import VueRouteButton from './components/widgets/Tools/VueRouteButton'
9598
Vue.component('GridCreateButton', GridCreateButton);
96-
Vue.component('VueRouteButton', VueRouteButton);
99+
Vue.component('VueRouteButton', VueRouteButton);
100+
101+
102+
//Widget
103+
import Divider from './components/widgets/Divider'
104+
Vue.component('Divider', Divider)

‎resources/js/components/form/BaseForm.vue

Lines changed: 53 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -22,50 +22,61 @@
2222
:disabled="attrs.attrs.disabled"
2323
>
2424
<template v-for="(item, index) in attrs.formItems">
25-
<el-form-item
26-
:key="index"
27-
:label="item.label"
28-
:prop="item.prop"
29-
:label-width="item.labelWidth"
30-
:required="item.required"
31-
:rules="item.rules"
32-
:error="item.error"
33-
:show-message="item.showMessage"
34-
:inline-message="item.inlineMessage"
35-
:size="item.size"
36-
>
37-
<template>
38-
<el-row>
39-
<el-col :span="item.inputWidth">
40-
<template v-if="item.relationName">
41-
<ItemDiaplsy
42-
v-model="
43-
formData[item.relationName][item.relationValueKey]
44-
"
45-
:form_item="item"
46-
:form_items="attrs.formItems"
47-
:form_data="formData"
48-
/>
49-
</template>
50-
<template v-else>
51-
<ItemDiaplsy
52-
v-model="formData[item.prop]"
53-
:form_item="item"
54-
:form_data="formData"
55-
/>
56-
</template>
25+
<div :key="index">
26+
<component
27+
v-if="item.topComponent"
28+
:is="item.topComponent.componentName"
29+
:attrs="item.topComponent"
30+
/>
5731

58-
<div
59-
v-if="item.help"
60-
class="form-item-help"
61-
v-html="item.help"
62-
></div>
63-
</el-col>
64-
</el-row>
65-
</template>
66-
</el-form-item>
67-
</template>
32+
<el-form-item
33+
:label="item.label"
34+
:prop="item.prop"
35+
:label-width="item.labelWidth"
36+
:required="item.required"
37+
:rules="item.rules"
38+
:error="item.error"
39+
:show-message="item.showMessage"
40+
:inline-message="item.inlineMessage"
41+
:size="item.size"
42+
>
43+
<template>
44+
<el-row>
45+
<el-col :span="item.inputWidth">
46+
<template v-if="item.relationName">
47+
<ItemDiaplsy
48+
v-model="
49+
formData[item.relationName][item.relationValueKey]
50+
"
51+
:form_item="item"
52+
:form_items="attrs.formItems"
53+
:form_data="formData"
54+
/>
55+
</template>
56+
<template v-else>
57+
<ItemDiaplsy
58+
v-model="formData[item.prop]"
59+
:form_item="item"
60+
:form_data="formData"
61+
/>
62+
</template>
6863

64+
<div
65+
v-if="item.help"
66+
class="form-item-help"
67+
v-html="item.help"
68+
></div>
69+
</el-col>
70+
</el-row>
71+
</template>
72+
</el-form-item>
73+
<component
74+
v-if="item.footerComponent"
75+
:is="item.footerComponent.componentName"
76+
:attrs="item.footerComponent"
77+
/>
78+
</div>
79+
</template>
6980
<div class="form-bottom-actions">
7081
<div></div>
7182
<div>

‎resources/js/components/widgets/Divider.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<el-divider
3+
:direction="attrs.direction"
4+
:content-position="attrs.contentPosition"
5+
>{{ attrs.content }}</el-divider
6+
>
7+
</template>
8+
<script>
9+
export default {
10+
props: ["attrs"]
11+
};
12+
</script>

‎resources/js/components/widgets/Input.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,14 @@
2828
:validate-event="attrs.validateEvent"
2929
:value="value"
3030
@input="onChange"
31-
></el-input>
31+
>
32+
<template slot="prepend" v-if="attrs.prepend">{{ attrs.prepend }}</template>
33+
<template slot="append" v-if="attrs.append">{{ attrs.append }}</template>
34+
</el-input>
3235
</template>
3336
<script>
3437
export default {
35-
props: ['attrs', 'value','form_data'],
38+
props: ["attrs", "value", "form_data"],
3639
data() {
3740
return {};
3841
},
@@ -46,4 +49,4 @@ export default {
4649
}
4750
}
4851
};
49-
</script>
52+
</script>

‎resources/js/components/widgets/Select.vue

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,24 @@
2727
@change="onChange"
2828
>
2929
<el-option
30-
v-for="(item,index) in options"
30+
v-for="(item, index) in options"
3131
:key="index"
3232
:label="item.label"
3333
:value="item.value"
3434
:disabled="item.disabled"
3535
>
36-
<div class="flex-c">
37-
<el-avatar v-if="item.avatar" :size="25" :src="item.avatar" class="mr-5" />
38-
<span>{{item.label}}</span>
36+
37+
<div class="flex-c-sb">
38+
<div class="flex-c">
39+
<el-avatar
40+
v-if="item.avatar"
41+
:size="25"
42+
:src="item.avatar"
43+
class="mr-5"
44+
/>
45+
<span>{{ item.label }}</span>
46+
</div>
47+
<div class="flex-c" v-if="item.desc" v-html="item.desc"></div>
3948
</div>
4049
</el-option>
4150
</el-select>
@@ -63,4 +72,4 @@ export default {
6372
}
6473
}
6574
};
66-
</script>
75+
</script>

0 commit comments

Comments
 (0)