Skip to content

Commit 10a09af

Browse files
Liugq5713Liugq5713
committed
feat[snippet]: add type snippet
1 parent cd108a2 commit 10a09af

File tree

6 files changed

+106
-89
lines changed

6 files changed

+106
-89
lines changed

‎prettier.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
printWidth: 120
3+
};

‎src/components/Header/index.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
22
<div class="header">
3+
<div class="logo">
4+
<img width="200px" style="position:absolute;top:-80px;left:20px" :src="logo" alt="logo">
5+
</div>
36
<div style="padding-top:10px;float:right;padding-right:10px">
47
<router-link to="code-editor" target="_blank">
58
<el-button
@@ -25,9 +28,11 @@
2528
</template>
2629

2730
<script>
31+
import logo from "./just-font-monochrome-white.png";
2832
export default {
2933
data() {
3034
return {
35+
logo,
3136
lang: this.$i18n.locale
3237
};
3338
},

‎src/components/Header/just-font-monochrome-white.png‎

11.7 KB
Loading

‎src/views/FormEditor/FormCode/index.vue‎

Lines changed: 2 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,7 @@
4646

4747
<script>
4848
/* eslint-disable no-useless-escape */
49-
import {
50-
_rules,
51-
_ref,
52-
_genFormItems,
53-
_upsertBtn,
54-
_genData,
55-
_genRules,
56-
_genSubmitMethod
57-
} from "./vueSnippet.js";
49+
import { genVueFileWrapper } from "./vueSnippet.js";
5850
import Drawer from "@/components/Drawer";
5951
6052
export default {
@@ -123,42 +115,10 @@ export default {
123115
confirmed: form.confirmed,
124116
formItems: formItems
125117
};
126-
this.srcCode = this.genVueFileWrapper(data);
118+
this.srcCode = genVueFileWrapper(data);
127119
window.localStorage.removeItem("vue-element-form-gen-code");
128120
window.localStorage.setItem("vue-element-form-gen-code", this.srcCode);
129121
},
130-
genVueFileWrapper({
131-
formObj,
132-
validated,
133-
ref,
134-
method,
135-
confirmed,
136-
formItems
137-
} = {}) {
138-
return `
139-
<template>
140-
<el-form :model="${formObj}" ${_ref(validated, ref)} ${_rules(
141-
validated
142-
)} label-width="80px">
143-
${_genFormItems(formObj, validated, formItems)}
144-
${_upsertBtn(validated, ref, method)}
145-
</el-form>
146-
</template>
147-
<script>
148-
export default {
149-
data() {
150-
return {
151-
${_genData(formObj, formItems)},
152-
${_genRules(validated, formItems)}
153-
}
154-
},
155-
methods: {
156-
${_genSubmitMethod(validated, confirmed, formObj, method)}
157-
}
158-
}
159-
<\/script>
160-
`;
161-
},
162122
skipToEdit() {
163123
window.open(`./code-editor`, "_blank");
164124
},

‎src/views/FormEditor/FormCode/vueSnippet.js‎

Lines changed: 80 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1+
/* eslint-disable no-useless-escape */
12
import genFormItemCode from "./formSnippet.js";
23

3-
export const _rules=(validated)=>{
4-
if(validated){
5-
return `:rules='rules'`
6-
}else{
7-
return ''
4+
export const _rules = validated => {
5+
if (validated) {
6+
return `:rules='rules'`;
7+
} else {
8+
return "";
89
}
9-
}
10+
};
1011

11-
export const _ref =(validated,ref)=>{
12+
export const _ref = (validated, ref) => {
1213
if (validated) {
1314
return `ref='${ref}'`;
1415
} else {
1516
return `\u0020`;
1617
}
17-
}
18-
export const _genFormItems=(formObj, validated, formItems)=>{
18+
};
19+
export const _genFormItems = (formObj, validated, formItems) => {
1920
return formItems
20-
.map(item => {
21-
const func = genFormItemCode(item.type);
22-
return func(formObj, validated, item.props.label, item.props.value);
23-
})
24-
.join("\n");
25-
}
21+
.map(item => {
22+
const func = genFormItemCode(item.type);
23+
return func(formObj, validated, item.props.label, item.props.value);
24+
})
25+
.join("\n");
26+
};
2627

27-
28-
export const _upsertBtn=(validated, ref, method)=>{
28+
export const _upsertBtn = (validated, ref, method) => {
2929
if (validated) {
3030
return `
3131
<el-form-item>
@@ -36,43 +36,53 @@ export const _upsertBtn=(validated, ref, method)=>{
3636
<el-button size='mini' type='primary' @click='${method}'>创建</el-button>
3737
</el-form-item>`;
3838
}
39-
}
39+
};
4040

41-
export const _genData=( formObj, formItems)=>{
41+
export const _genData = (formObj, formItems) => {
4242
const formdata = formItems
43-
.map(item => {
44-
return `${item.props.value}:''`;
45-
})
46-
.join(",\n ");
47-
return `
43+
.map(item => {
44+
return `${item.props.value}:''`;
45+
})
46+
.join(",\n ");
47+
return `
4848
${formObj}:{
4949
${formdata}
5050
}`.trim();
51-
}
52-
export const _genRules=(validated, formItems)=>{
53-
if(!validated){
54-
return
51+
};
52+
export const _genRules = (validated, formItems) => {
53+
if (!validated) {
54+
return;
5555
}
56-
const formdata = formItems
57-
.filter(item => {
58-
return item.props.required;
59-
})
60-
.map(item => {
61-
return `
56+
const rulesContent = formItems
57+
.filter(item => {
58+
return item.props.required || item.props.type;
59+
})
60+
.map(item => {
61+
const trigger = item.type === "ESelect" ? "change" : "bulr";
62+
let requiredTpl = "";
63+
let typeTpl = "";
64+
if (item.props.required) {
65+
requiredTpl = `{ required: true, message: '${item.props.label}必填', trigger: '${trigger}' }`;
66+
}
67+
if (item.props.type) {
68+
typeTpl = `{ type: '${item.props.type}', message: '${item.props.label}格式为${
69+
item.props.type
70+
}', trigger: '${trigger}' }`;
71+
}
72+
return `
6273
${item.props.value}: [
63-
{ required: true, message: '${
64-
item.props.label
65-
}必填', trigger: 'blur' }
66-
]`.trim()
67-
})
68-
.join(",\n ");
69-
return `
74+
${requiredTpl}
75+
${typeTpl}
76+
]`.trim();
77+
})
78+
.join(",\n ");
79+
return `
7080
rules:{
71-
${formdata}
72-
}`.trim()
73-
}
81+
${rulesContent}
82+
}`.trim();
83+
};
7484

75-
export const _genSubmitMethod=(validated, confirmed, formObj, method)=>{
85+
export const _genSubmitMethod = (validated, confirmed, formObj, method) => {
7686
if (confirmed && validated) {
7787
return `
7888
${method}(formName) {
@@ -139,4 +149,28 @@ export const _genSubmitMethod=(validated, confirmed, formObj, method)=>{
139149
await ${method}(this.${formObj})
140150
this.$message.success('创建成功')
141151
}`.trim();
142-
}
152+
};
153+
154+
export const genVueFileWrapper = ({ formObj, validated, ref, method, confirmed, formItems } = {}) => {
155+
return `
156+
<template>
157+
<el-form :model="${formObj}" ${_ref(validated, ref)} ${_rules(validated)} label-width="80px">
158+
${_genFormItems(formObj, validated, formItems)}
159+
${_upsertBtn(validated, ref, method)}
160+
</el-form>
161+
</template>
162+
<script>
163+
export default {
164+
data() {
165+
return {
166+
${_genData(formObj, formItems)},
167+
${_genRules(validated, formItems)}
168+
}
169+
},
170+
methods: {
171+
${_genSubmitMethod(validated, confirmed, formObj, method)}
172+
}
173+
}
174+
<\/script>
175+
`;
176+
};

‎src/views/FormEditor/FormItemAttribute.vue‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,27 @@
3939
label="true"
4040
@change="setFormItemAttribute"
4141
>是否必填</el-checkbox>
42+
<el-select
43+
v-model="formItemAttribute.type"
44+
style="width:150px"
45+
clearable
46+
placeholder="数据类型"
47+
@change="setFormItemAttribute"
48+
>
49+
<el-option
50+
v-for="item in value_type_opts"
51+
:key="item.value"
52+
:label="item.label"
53+
:value="item.value"
54+
></el-option>
55+
</el-select>
4256
</el-form-item>
4357
</el-form>
4458
</el-card>
4559
</template>
4660

4761
<script>
48-
import { input_type_opts } from "./opt.js";
62+
import { input_type_opts, value_type_opts } from "./opt.js";
4963
export default {
5064
props: {
5165
store: {
@@ -58,6 +72,7 @@ export default {
5872
data() {
5973
return {
6074
input_type_opts,
75+
value_type_opts,
6176
idx: 0,
6277
opt: "",
6378
formItemAttribute: {},

0 commit comments

Comments
 (0)