提交 a824d5d6 authored 作者: 刘旭's avatar 刘旭

表单设计迁移

上级 7c69cf85
......@@ -9,6 +9,9 @@
},
"dependencies": {
"@element-plus/icons-vue": "^1.1.4",
"@wangeditor/editor": "^5.1.21",
"@wangeditor/editor-for-vue": "^1.0.2",
"ace-builds": "^1.11.2",
"axios": "^0.24.0",
"echarts": "^5.3.0",
"element-plus": "^2.2.12",
......@@ -20,13 +23,15 @@
"nprogress": "^0.2.0",
"qs": "^6.10.3",
"socket.io-client": "^4.5.0",
"stylus": "^0.59.0",
"vue": "^3.2.33",
"vue-demi": "^0.13.1",
"vue-i18n": "^9.1.10",
"vue-router": "4",
"vue-socket.io": "^3.0.10",
"vue3-cron": "^1.1.8",
"vuex": "^4.0.2"
"vuedraggable": "4.0.1",
"vuex": "^4.0.2",
"wangeditor": "^4.7.15"
},
"devDependencies": {
"@types/lodash": "^4.14.182",
......
......@@ -23,6 +23,8 @@ import { permission } from './directives/permission'
import SocketService from '@/socket/main'
// SocketService.Instance.connect();
import DesignForm from "../src/vueFormCreate";
// 国际化
import i18n from "@/lang/index";
......@@ -78,6 +80,7 @@ Object.keys(ElIconModules).forEach((key) => {
app.use(store, key)
app.use(router);
app.use(ElementPlus)
app.use(DesignForm);
app.use(i18n);
app.mount('#app');
//注册
......
import { request } from "../../config";
export function getStructureList(formId?: string, pageNo?: number, pageSize?: number) {
return request({
url: "/api/form/table/structure/list",
method: "get",
params: { formId, pageNo, pageSize }
});
}
export function getStructureData(formId: string, pageNo?: number, pageSize?: number) {
return request({
url: "/api/form/table/structure/data",
method: "get",
params: { formId, pageNo, pageSize }
});
}
export function saveStructure(data: any, id?: number) {
return request({
url: "/api/form/table/structure/create",
method: "post",
data: { data, id }
});
}
export function deleteStructure(id: number, dbTableName: string) {
return request({
url: "/api/form/table/structure/delete",
method: "delete",
params: { id, dbTableName }
});
}
\ No newline at end of file
<template>
<div class="app-container">
<el-button type="primary" @click="handleAdd" style="margin-bottom: 20px;">添加</el-button>
<el-table v-loading="loading" :data="tableList" border stripe style="width: 100%">
<el-table-column prop="formId" label="表单标识" align="center" />
<el-table-column prop="dbTableName" label="数据库表名称" align="center" />
<el-table-column prop="dbTableComment" label="数据库表注释" align="center" />
<el-table-column prop="createTime" label="创建时间" align="center" />
<el-table-column label="操作" align="center" width="200">
<template #default="scope">
<el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
<el-divider direction="vertical"></el-divider>
<el-button link type="primary" size="small" @click="handleDetails(scope.row)">详情</el-button>
<el-divider direction="vertical"></el-divider>
<el-button link type="primary" size="small" @click="handleQuery(scope.row)">数据</el-button>
<el-divider direction="vertical"></el-divider>
<el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 详情页面 -->
<el-drawer v-model="visible" :title="title" size="80%" @close="handleClose">
<!-- <el-space v-if="title !== '详情'" style="margin-bottom: 20px;">
<span>表单标识</span>
<el-input v-model="fromIdValue" />
</el-space> -->
<ElDesignForm ref="jsonRef" />
<template #footer>
<span>
<el-button @click="handleClose">关闭</el-button>
<el-button v-if="title !== '详情'" type="primary" @click="onConfirm">确认</el-button>
</span>
</template>
</el-drawer>
<!-- 数据页面 -->
<el-dialog v-model="dialogVisible" title="数据" witch="50%">
123
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { getStructureList, saveStructure, getStructureData, deleteStructure } from '@/services/api/systemApi/formConfiguration/formConfiguration'
const visible = ref(false)
const dialogVisible = ref(false)
const loading = ref(true)
const tableList = ref()
const jsonRef = ref()
const title = ref('详情')
const structureId = ref()
const handleAdd = () => {
title.value = '添加'
visible.value = true
}
const handleDetails = (row: any) => {
title.value = '详情'
visible.value = true
nextTick(() => jsonRef.value.detailJson(row.formJson))
}
const handleEdit = (row: any) => {
title.value = '编辑'
structureId.value = row.id
visible.value = true
nextTick(() => jsonRef.value.detailJson(row.formJson))
}
const handleQuery = (row: any) => {
getStructureData(row.formId).then((res: any) => {
console.log(res);
})
dialogVisible.value = true
}
const handleDelete = (row: any) => {
ElMessageBox.confirm(
'确定删除?',
'数据',
{ confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' })
.then(() => {
deleteStructure(row.id, row.dbTableName).then((res: any) => {
if(res.code === 200) init()
})
}).catch(() => { return false })
}
const onConfirm = () => {
const json = jsonRef.value.state.widgetForm
if (title.value === '添加') {
saveStructure(json).then((res: any) => {
if (res.code === 200) {
jsonRef.value.clear()
init()
visible.value = false
}
})
} else {
saveStructure(json, structureId.value).then((res: any) => {
if (res.code === 200) {
jsonRef.value.clear()
init()
visible.value = false
}
})
}
}
const handleClose = () => {
jsonRef.value.clear()
visible.value = false
}
const init = () => {
getStructureList().then((res: any) => {
if (res.code === 200) {
loading.value = false
tableList.value = res.data.records
}
console.log(res);
})
}
init()
</script>
<style lang="scss">
.fc-style {
height: 800px;
border: 1px solid #ccc;
}
</style>
\ No newline at end of file
<template>
<div ref="aceRef" style="width: 100%; height: 350px;"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
// Ace 是一个用 JavaScript 编写的代码编辑器 仅生成文件
import ace, { Ace } from 'ace-builds'
interface State {
aceRef?: HTMLElement
codeEditor?: Ace.Editor
}
export default defineComponent({
name: 'CodeEditor',
props: {
value: {
type: String,
default: ''
},
language: {
type: String,
default: 'javascript'
},
theme: {
tyle: String,
default: 'github'
},
readonly: {
type: Boolean,
default: false
}
},
emits: ['update:value'],
setup(props, context) {
const state = reactive<State>({
aceRef: undefined,
codeEditor: undefined
})
onMounted(() => {
state.codeEditor = ace.edit(state.aceRef!, {
mode: `ace/mode/${props.language}`,
theme: `ace/theme/${props.theme}`,
value: props.value,
readOnly: props.readonly,
fontSize: 12,
tabSize: 2
})
state.codeEditor.on('change', () =>
context.emit('update:value', state.codeEditor?.getValue())
)
})
watch(
() => props.value,
val => {
if (state.codeEditor) {
const currentPosition = state.codeEditor?.selection.getCursor()
state.codeEditor.setValue(val)
state.codeEditor.clearSelection()
state.codeEditor.gotoLine(
currentPosition.row + 1,
currentPosition.column,
true
)
}
}
)
return {
...toRefs(state)
}
}
})
</script>
<template>
<div class="widget-cate">{{ title }}</div>
<Draggable
tag="ul"
item-key="type"
ghostClass="ghost"
:group="{ name: 'people', pull: 'clone', put: false }"
:sort="false"
:list="list"
>
<template #item="{ element }">
<li
v-if="fields.includes(element.type)"
class="form-edit-widget-label"
:class="{ 'no-put': element.tpye === 'divider' }"
>
<a>
<SvgIcon :iconClass="element.type" />
<span>{{ element.label }}</span>
</a>
</li>
</template>
</Draggable>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import Draggable from 'vuedraggable'
import SvgIcon from './SvgIcon.vue'
export default defineComponent({
name: 'ComponentGroup',
components: {
Draggable,
SvgIcon
},
props: {
title: {
type: String,
required: true
},
fields: {
type: Array as PropType<Array<string>>,
required: true
},
list: {
required: true
}
}
})
</script>
<template>
<div ref="editor"></div>
</template>
<script lang="ts">
import {
computed,
defineComponent,
onBeforeUnmount,
onMounted,
ref,
watchEffect
} from 'vue'
import WangEditor from 'wangeditor'
export default defineComponent({
name: 'RichTextEditor',
props: {
value: {
type: String,
default: ''
},
disable: {
type: Boolean,
default: false
}
},
emits: ['update:value'],
setup(props, context) {
const editor = ref()
const content = computed({
set: val => context.emit('update:value', val),
get: () => props.value
})
let instance: WangEditor | null
onMounted(() => {
instance = new WangEditor(editor.value)
Object.assign(instance.config, {
zIndex: 9,
onchange: (html: string) => (content.value = html)
})
instance.create()
watchEffect(() =>
instance && props.disable ? instance.disable() : instance?.enable()
)
})
onBeforeUnmount(() => {
instance && instance.destroy()
instance = null
})
return {
editor
}
}
})
</script>
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$attrs" />
<svg v-else :class="svgClass" arig-hidden="true" v-on="$attrs">
<use :href="iconName" />
</svg>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import * as utils from '../utils'
export default defineComponent({
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
setup(props) {
const isExternal = computed(() => utils.isExternal(props.iconClass))
const iconName = computed(() => `#icon-${props.iconClass}`)
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${props.className}`
} else {
return 'svg-icon'
}
})
const styleExternalIcon = computed(() => ({
mask: `url(${props.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`
}))
return {
isExternal,
iconName,
svgClass,
styleExternalIcon
}
}
})
</script>
<style lang="scss" scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
.svg-external-icon {
background-color: currentColor;
mask-size: cover !important;
display: inline-block;
}
}
</style>
export interface Rules {
trigger: string
enum: string
len?: number
max?: number
message: string
min?: number
pattern: string
required: boolean
type: string
}
export interface WidgetForm {
list: any[]
config: {
size: any
hideRequiredAsterisk: boolean
labelWidth: number
labelPosition: string
dbTableName: string
dbTableComment: string,
formId: string
}
}
const rules: Rules = {
trigger: 'blur',
enum: '',
len: undefined,
max: undefined,
message: '',
min: undefined,
pattern: '',
required: false,
type: 'any'
}
export const widgetForm: WidgetForm = {
list: [],
config: {
size: 'default',
hideRequiredAsterisk: false,
labelWidth: 100,
labelPosition: 'right',
dbTableComment: '',
dbTableName: '',
formId: ''
}
}
export const put = () => {
console.log('widgetForm', widgetForm);
}
export const basicComponents = [
{
label: '单行文本',
type: 'input',
options: {
width: '100%',
defaultValue: '',
placeholder: '',
maxlength: null,
prefix: '',
suffix: '',
prepend: '',
append: '',
disabled: false,
clearable: false,
readonly: false,
rules
}
},
{
label: '密码框',
type: 'password',
options: {
width: '100%',
defaultValue: '',
placeholder: '',
maxlength: null,
prefix: '',
suffix: '',
prepend: '',
append: '',
showPassword: true,
disabled: false,
clearable: false,
readonly: false,
rules
}
},
{
label: '多行文本',
type: 'textarea',
options: {
width: '100%',
defaultValue: '',
placeholder: '',
maxlength: null,
rows: 4,
autosize: false,
showWordLimit: false,
disabled: false,
clearable: false,
readonly: false,
rules
}
},
{
label: '计数器',
type: 'number',
options: {
width: '',
defaultValue: 0,
min: 0,
max: 100,
step: 1,
disabled: false,
rules
}
},
{
label: '单选框组',
type: 'radio',
options: {
defaultValue: '',
width: '',
inline: true,
remote: false,
showLabel: false,
remoteFunc:
'https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json',
options: [
{
value: 'Option 1',
label: 'Option 1'
},
{
value: 'Option 2',
label: 'Option 2'
},
{
value: 'Option 3',
label: 'Option 3'
}
],
remoteOptions: [],
props: {
value: 'value',
label: 'label'
},
disabled: false,
rules
}
},
{
label: '多选框组',
type: 'checkbox',
options: {
defaultValue: [],
width: '',
inline: true,
remote: false,
showLabel: false,
remoteFunc:
'https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json',
options: [
{
label: 'Option 1',
value: 'Option 1'
},
{
label: 'Option 2',
value: 'Option 2'
},
{
label: 'Option 3',
value: 'Option 3'
}
],
remoteOptions: [],
props: {
value: 'value',
label: 'label'
},
disabled: false,
rules
}
},
{
label: '时间选择器',
type: 'time',
options: {
defaultValue: '',
width: '',
placeholder: '请选择时间',
format: 'HH:mm:ss',
valueFormat: 'HH:mm:ss',
readonly: false,
editable: true,
clearable: true,
disabled: false,
rules
}
},
{
label: '日期选择器',
type: 'date',
options: {
defaultValue: '',
width: '',
placeholder: '请选择时间',
format: 'YYYY-MM-DD',
readonly: false,
editable: true,
clearable: true,
disabled: false,
rules
}
},
{
label: '评分',
type: 'rate',
options: {
defaultValue: 0,
max: 5,
allowHalf: false,
disabled: false,
rules
}
},
{
label: '下拉选择框',
type: 'select',
options: {
defaultValue: '',
width: '200px',
multiple: false,
placeholder: '',
remote: false,
showLabel: false,
filterable: false,
clearable: false,
disabled: false,
props: {
label: 'label',
value: 'value'
},
options: [
{
label: 'Option 1',
value: 'Option 1'
},
{
label: 'Option 2',
value: 'Option 2'
},
{
label: 'Option 3',
value: 'Option 3'
}
],
remoteOptions: [],
remoteFunc:
'https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json',
rules
}
},
{
label: '开关',
type: 'switch',
options: {
defaultValue: false,
disabled: false,
activeText: '',
inactiveText: '',
rules
}
},
{
label: '滑块',
type: 'slider',
options: {
defaultValue: 0,
width: '',
min: 0,
max: 100,
step: 1,
disabled: false,
range: false,
rules
}
},
{
label: '文字',
type: 'text',
options: {
defaultValue: 'This is a text'
}
}
]
export const advanceComponents = [
{
label: '图片',
type: 'img-upload',
options: {
defaultValue: [],
name: 'file',
action: 'http://example.com/upload',
method: 'post',
listType: 'text',
accept: 'image/*',
limit: 3,
multiple: false,
disabled: false,
rules
}
},
{
label: '富文本编辑器',
type: 'richtext-editor',
options: {
defaultValue: '',
width: '',
disabled: false
}
},
{
label: '级联选择器',
type: 'cascader',
options: {
defaultValue: [],
width: '200px',
placeholder: '',
disabled: false,
clearable: false,
filterable: false,
remote: true,
remoteOptions: [],
props: {
label: 'label',
value: 'value',
children: 'children'
},
remoteFunc:
'https://raw.githubusercontent.com/fuchengwei/vue-form-create/master/mock/mock.json',
rules
}
}
]
export const layoutComponents = [
{
label: '栅格布局',
type: 'grid',
columns: [
{
span: 12,
list: []
},
{
span: 12,
list: []
}
],
options: {
gutter: 0,
justify: 'start',
align: 'top'
}
}
]
import * as element from './element'
export { element }
<template>
<!-- <el-header class="btn-bar">
<slot></slot>
<el-button
v-if="$attrs.uploadJson"
type="text"
@click="$emit('uploadJson')"
>
<template #icon>
<SvgIcon iconClass="upload" />
</template>
导入JSON
</el-button>
<el-button
v-if="$attrs.clearable"
type="text"
@click="$emit('clearable')"
>
<template #icon>
<SvgIcon iconClass="clearable" />
</template>
清空
</el-button>
<el-button
v-if="$attrs.preview"
type="text"
@click="$emit('preview')"
>
<template #icon>
<SvgIcon iconClass="preview" />
</template>
预览
</el-button>
<el-button
v-if="$attrs.generateJson"
type="text"
@click="$emit('generateJson')"
>
<template #icon>
<SvgIcon iconClass="generate-json" />
</template>
生成JSON
</el-button>
<el-button
v-if="$attrs.generateCode"
type="text"
@click="$emit('generateCode')"
>
<template #icon>
<SvgIcon iconClass="generate-code" />
</template>
生成代码
</el-button>
</el-header> -->
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import SvgIcon from '../../components/SvgIcon.vue'
export default defineComponent({
name: 'CustomHeader',
components: {
SvgIcon
},
emits: ['uploadJson', 'clearable', 'preview', 'generateJson', 'generateCode']
})
</script>
<template>
<div class="form-config-container">
<el-form label-position="top">
<el-form-item label="表单标识">
<el-input v-model="data.formId"></el-input>
</el-form-item>
<el-form-item label="表单名称">
<el-input v-model="data.dbTableName"></el-input>
</el-form-item>
<el-form-item label="表单注释">
<el-input v-model="data.dbTableComment"></el-input>
</el-form-item>
<el-form-item label="标签对齐方式">
<el-radio-group v-model="data.labelPosition">
<el-radio-button label="left">左对齐</el-radio-button>
<el-radio-button label="right">右对齐</el-radio-button>
<el-radio-button label="top">顶部对齐</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model.number="data.labelWidth" :min="0" />
</el-form-item>
<el-form-item label="组件尺寸">
<el-radio-group v-model="data.size">
<el-radio-button label="large"></el-radio-button>
<el-radio-button label="default">默认</el-radio-button>
<el-radio-button label="small"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="隐藏必选标记">
<el-switch v-model="data.hideRequiredAsterisk" />
</el-form-item>
</el-form>
</div>
</template>
<script lang="ts">
import { put, widgetForm, WidgetForm } from '../../config/element'
import { element } from '../../config'
import { defineComponent, PropType, ref, watch } from 'vue'
export default defineComponent({
name: 'ElFormConfig',
props: {
config: {
type: Object as PropType<WidgetForm['config']>,
required: true
}
},
emits: ['update:config'],
setup(props, context) {
const data = ref(props.config)
watch(data, () => {
console.log(data);
context.emit('update:config', data)
})
const state = ref<any>({
widgetForm: element.widgetForm
})
// 深度监听 widgetForm.config 表单属性的值,获取最新的数据
watch(() => data.value, (newVal) => {
widgetForm.config = newVal
}, { deep: true })
return {
data,
state
}
}
})
</script>
<template>
<div class="fc-style">
<el-form ref="generateForm" label-suffix=":" :model="model" :rules="rules" :size="widgetForm.config.size"
:label-position="widgetForm.config.labelPosition" :label-width="`${widgetForm.config.labelWidth}px`"
:hide-required-asterisk="widgetForm.config.hideRequiredAsterisk">
<template v-for="(element, index) of widgetForm.list">
<template v-if="element.type === 'grid'">
<el-row type="flex" v-if="element.key" :key="element.key" :gutter="element.options.gutter ?? 0"
:justify="element.options.justify" :align="element.options.align">
<el-col v-for="(col, colIndex) of element.columns" :key="colIndex" :span="col.span ?? 0">
<ElGenerateFormItem v-for="colItem of col.list" :model="model" :key="colItem.key" :element="colItem"
:config="data.config" :disabled="disabled" />
</el-col>
</el-row>
</template>
<ElGenerateFormItem v-else :model="model" :key="element.key" :element="widgetForm.list[index]"
:config="data.config" :disabled="disabled" />
</template>
</el-form>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'
import ElGenerateFormItem from './ElGenerateFormItem.vue'
import { element } from '../../config'
export default defineComponent({
name: 'ElGenerateForm',
components: {
ElGenerateFormItem
},
props: {
data: {
type: Object,
default: element.widgetForm
},
value: {
type: Object
},
disabled: {
type: Boolean,
default: false
}
},
setup(props) {
const state = reactive({
generateForm: null as any,
model: {} as any,
rules: {} as any,
widgetForm:
(props.data && JSON.parse(JSON.stringify(props.data))) ??
element.widgetForm
})
const generateModel = (list: any[]) => {
for (let index = 0; index < list.length; index++) {
const model = list[index].model
if (!model) {
return
}
if (list[index].type === 'grid') {
list[index].columns.forEach((col: any) => generateModel(col.list))
} else {
if (props.value && Object.keys(props.value).includes(model)) {
state.model[model] = props.value[model]
} else {
state.model[model] = list[index].options.defaultValue
}
state.rules[model] = list[index].options.rules
}
}
}
const generateOptions = (list: any[]) => {
list.forEach(item => {
if (item.type === 'grid') {
item.columns.forEach((col: any) => generateOptions(col.list))
} else {
if (item.options.remote && item.options.remoteFunc) {
fetch(item.options.remoteFunc)
.then(resp => resp.json())
.then(json => {
if (json instanceof Array) {
item.options.remoteOptions = json.map(data => ({
label: data[item.options.props.label],
value: data[item.options.props.value],
children: data[item.options.props.children]
}))
}
})
}
}
})
}
watch(
() => props.data,
val => {
state.widgetForm =
(val && JSON.parse(JSON.stringify(val))) ?? element.widgetForm
state.model = {}
state.rules = {}
generateModel(state.widgetForm.list)
generateOptions(state.widgetForm.list)
},
{ deep: true, immediate: true }
)
onMounted(() => {
generateModel(state.widgetForm?.list ?? [])
generateOptions(state.widgetForm?.list ?? [])
})
const getData = () => {
return new Promise((resolve, reject) => {
state.generateForm
.validate()
.then((validate: boolean) => {
if (validate) {
resolve(state.model)
} else {
ElMessage.error('验证失败')
}
})
.catch((error: Error) => {
reject(error)
})
})
}
const reset = () => {
state.generateForm.resetFields()
}
return {
...toRefs(state),
getData,
reset
}
}
})
</script>
<template>
<el-form-item v-if="element" :key="element.key" :label="element.label" :prop="element.model">
<template v-if="element.type === 'input'">
<el-input
v-model="data"
:style="{ width: element.options.width }"
:placeholder="element.options.placeholder"
:maxlength="parseInt(element.options.maxlength)"
:clearable="element.options.clearable"
:readonly="element.options.readonly"
:disabled="disabled || element.options.disabled"
>
<template #prefix v-if="element.options.prefix">{{ element.options.prefix }}</template>
<template #suffix v-if="element.options.suffix">{{ element.options.suffix }}</template>
<template #prepend v-if="element.options.prepend">{{ element.options.prepend }}</template>
<template #append v-if="element.options.append">{{ element.options.append }}</template>
</el-input>
</template>
<template v-if="element.type === 'password'">
<el-input
v-model="data"
:style="{ width: element.options.width }"
:placeholder="element.options.placeholder"
:maxlength="parseInt(element.options.maxlength)"
:clearable="element.options.clearable"
:disabled="disabled || element.options.disabled"
:readonly="element.options.readonly"
:show-password="element.options.showPassword"
>
<template #prefix v-if="element.options.prefix">{{ element.options.prefix }}</template>
<template #suffix v-if="element.options.suffix">{{ element.options.suffix }}</template>
<template #prepend v-if="element.options.prepend">{{ element.options.prepend }}</template>
<template #append v-if="element.options.append">{{ element.options.append }}</template>
</el-input>
</template>
<template v-if="element.type === 'textarea'">
<el-input
type="textarea"
resize="none"
v-model="data"
:rows="element.options.rows"
:style="{ width: element.options.width }"
:placeholder="element.options.placeholder"
:maxlength="parseInt(element.options.maxlength)"
:show-word-limit="element.options.showWordLimit"
:autosize="element.options.autosize"
:clearable="element.options.clearable"
:readonly="element.options.readonly"
:disabled="disabled || element.options.disabled"
/>
</template>
<template v-if="element.type === 'number'">
<el-input-number
v-model="data"
:style="{ width: element.options.width }"
:max="element.options.max"
:min="element.options.min"
:disabled="disabled || element.options.disabled"
/>
</template>
<template v-if="element.type === 'radio'">
<el-radio-group
v-model="data"
:style="{ width: element.options.width }"
:disabled="disabled || element.options.disabled"
>
<el-radio
v-for="item of element.options.remote
? element.options.remoteOptions
: element.options.options"
:key="item.value"
:label="item.value"
:style="{
display: element.options.inline ? 'inline-block' : 'block'
}"
>{{ element.options.showLabel ? item.label : item.value }}</el-radio>
</el-radio-group>
</template>
<template v-if="element.type === 'checkbox' && data">
<el-checkbox-group
v-model="data"
:style="{ width: element.options.width }"
:disabled="disabled || element.options.disabled"
>
<el-checkbox
v-for="item of element.options.remote
? element.options.remoteOptions
: element.options.options"
:key="item.value"
:value="item.value"
:style="{
display: element.options.inline ? 'inline-block' : 'block'
}"
>
{{
element.options.showLabel ? item.label : item.value
}}
</el-checkbox>
</el-checkbox-group>
</template>
<template v-if="element.type === 'time'">
<el-time-picker
v-model="data"
:placeholder="element.options.placeholder"
:readonly="element.options.readonly"
:editable="element.options.editable"
:clearable="element.options.clearable"
:format="element.options.format"
:disabled="disabled || element.options.disabled"
:style="{ width: element.options.width }"
/>
</template>
<template v-if="element.type === 'date'">
<el-date-picker
v-model="data"
:placeholder="element.options.placeholder"
:readonly="element.options.readonly"
:editable="element.options.editable"
:clearable="element.options.clearable"
:format="element.options.format"
:disabled="disabled || element.options.disabled"
:style="{ width: element.options.width }"
/>
</template>
<template v-if="element.type === 'rate'">
<el-rate
v-model="data"
:max="element.options.max"
:allowHalf="element.options.allowHalf"
:disabled="disabled || element.options.disabled"
/>
</template>
<template v-if="element.type === 'select'">
<el-select
v-model="data"
:multiple="element.options.multiple"
:placeholder="element.options.placeholder"
:clearable="element.options.clearable"
:filterable="element.options.filterable"
:disabled="disabled || element.options.disabled"
:style="{ width: element.options.width }"
>
<el-option
v-for="item of element.options.remote
? element.options.remoteOptions
: element.options.options"
:key="item.value"
:value="item.value"
:label="element.options.showLabel ? item.label : item.value"
/>
</el-select>
</template>
<template v-if="element.type === 'switch'">
<el-switch
v-model="data"
:active-text="element.options.activeText"
:inactive-text="element.options.inactiveText"
:disabled="disabled || element.options.disabled"
/>
</template>
<template v-if="element.type === 'slider'">
<el-slider
v-model="data"
:min="element.options.min"
:max="element.options.max"
:step="element.options.step"
:range="element.options.range"
:disabled="disabled || element.options.disabled"
:style="{ width: element.options.width }"
/>
</template>
<template v-if="element.type == 'text'">
<span>{{ element.options.defaultValue }}</span>
</template>
<template v-if="element.type === 'img-upload'">
<el-upload
:name="element.options.file"
:action="element.options.action"
:accept="element.options.accept"
:file-list="element.options.defaultValue"
:listType="element.options.listType"
:multiple="element.options.multiple"
:limit="element.options.limit"
:disabled="disabled || element.options.disabled"
:on-success="handleUploadSuccess"
>
<SvgIcon v-if="element.options.listType === 'picture-card'" iconClass="insert" />
<el-button v-else>
<SvgIcon iconClass="img-upload" style="margin-right: 10px;" />点击上传
</el-button>
</el-upload>
</template>
<template v-if="element.type === 'richtext-editor'">
<RichTextEditor
v-model:value="data"
:disable="disabled || element.options.disabled"
:style="{ width: element.options.width }"
/>
</template>
<template v-if="element.type === 'cascader'">
<el-cascader
v-model="data"
:options="element.options.remoteOptions"
:placeholder="element.options.placeholder"
:filterable="element.options.filterable"
:clearable="element.options.clearable"
:disabled="disabled || element.options.disabled"
:style="{ width: element.options.width }"
/>
</template>
</el-form-item>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import SvgIcon from '../../components/SvgIcon.vue'
import RichTextEditor from '../../components/RichTextEditor.vue'
import { WidgetForm } from '../../config/element'
export default defineComponent({
name: 'ElGenerateFormItem',
components: {
SvgIcon,
RichTextEditor
},
props: {
config: {
type: Object as PropType<WidgetForm['config']>,
required: true
},
element: {
type: Object,
required: true
},
model: {
type: Object,
required: true
},
disabled: {
type: Boolean,
required: true
}
},
setup(props) {
const data = computed({
get: () => props.model[props.element.model],
set: val => {
// eslint-disable-next-line vue/no-mutating-props
props.model[props.element.model] = val
}
})
const handleFilterOption = (input: string, option: { label: string }) =>
option.label.toLowerCase().includes(input)
const handleUploadSuccess = (_res: any, _file: any, fileList: any[]) => {
data.value = fileList
}
return {
data,
handleFilterOption,
handleUploadSuccess
}
}
})
</script>
<template>
<div class="widget-form-container">
<div v-if="!widgetForm.list" class="form-empty">从左侧拖拽来添加字段</div>
<el-form
label-suffix=":"
:size="widgetForm.config.size"
:label-position="widgetForm.config.labelPosition"
:label-width="`${widgetForm.config.labelWidth}px`"
:hide-required-asterisk="widgetForm.config.hideRequiredAsterisk"
>
<Draggable
class="widget-form-list"
item-key="key"
ghostClass="ghost"
handle=".drag-widget"
:animation="200"
:group="{ name: 'people' }"
:list="widgetForm.list"
@add="handleMoveAdd"
>
<template #item="{ element, index }">
<transition-group name="fade" tag="div">
<template v-if="element.type === 'grid'">
<el-row
class="widget-col widget-view"
type="flex"
v-if="element.key"
:key="element.key"
:class="{ active: widgetFormSelect?.key === element.key }"
:gutter="element.options.gutter ?? 0"
:justify="element.options.justify"
:align="element.options.align"
@click="handleItemClick(element)"
>
<el-col
v-for="(col, colIndex) of element.columns"
:key="colIndex"
:span="col.span ?? 0"
>
<Draggable
class="widget-col-list"
item-key="key"
ghostClass="ghost"
handle=".drag-widget"
:animation="200"
:group="{ name: 'people' }"
:no-transition-on-drag="true"
:list="col.list"
@add="handleColMoveAdd($event, element, colIndex)"
>
<template #item="{ element, index }">
<transition-group name="fade" tag="div">
<ElWidgetFormItem
v-if="element.key"
:key="element.key"
:element="element"
:config="widgetForm.config"
:selectWidget="widgetFormSelect"
@click.stop="handleItemClick(element)"
@copy="handleCopyClick(index, col.list)"
@delete="handleDeleteClick(index, col.list)"
/>
</transition-group>
</template>
</Draggable>
</el-col>
<div
class="widget-view-action widget-col-action"
v-if="widgetFormSelect?.key === element.key"
>
<SvgIcon
iconClass="delete"
@click.stop="handleDeleteClick(index, widgetForm.list)"
/>
</div>
<div
class="widget-view-drag widget-col-drag"
v-if="widgetFormSelect?.key === element.key"
>
<SvgIcon iconClass="move" className="drag-widget" />
</div>
</el-row>
</template>
<template v-else>
<ElWidgetFormItem
v-if="element.key"
:key="element.key"
:element="element"
:config="widgetForm.config"
:selectWidget="widgetFormSelect"
@click="handleItemClick(element)"
@copy="handleCopyClick(index, widgetForm.list)"
@delete="handleDeleteClick(index, widgetForm.list)"
/>
</template>
</transition-group>
</template>
</Draggable>
</el-form>
</div>
</template>
<script lang="ts">
import { defineComponent, nextTick, PropType } from 'vue'
import Draggable from 'vuedraggable'
import { v4 } from 'uuid'
import ElWidgetFormItem from './ElWidgetFormItem.vue'
import SvgIcon from '../../components/SvgIcon.vue'
import { WidgetForm } from '../../config/element'
const handleListInsert = (key: string, list: any[], obj: any) => {
const newList: any[] = []
list.forEach(item => {
if (item.key === key) {
newList.push(item)
newList.push(obj)
} else {
if (item.columns) {
item.columns = item.columns.map((col: any) => ({
...col,
list: handleListInsert(key, col.list, obj)
}))
}
newList.push(item)
}
})
return newList
}
const handleListDelete = (key: string, list: any[]) => {
const newList: any[] = []
list.forEach(item => {
if (item.key !== key) {
if (item.columns) {
item.columns = item.columns.map((col: any) => ({
...col,
list: handleListDelete(key, col.list)
}))
}
newList.push(item)
}
})
return newList
}
export default defineComponent({
name: 'ElWidgetForm',
components: {
SvgIcon,
Draggable,
ElWidgetFormItem
},
props: {
widgetForm: {
type: Object as PropType<WidgetForm>,
required: true
},
widgetFormSelect: {
type: Object
}
},
emits: ['update:widgetForm', 'update:widgetFormSelect'],
setup(props, context) {
const handleItemClick = (row: any) => {
context.emit('update:widgetFormSelect', row)
}
const handleCopyClick = (index: number, list: any[]) => {
const key = v4().replaceAll('-', '')
const oldList = JSON.parse(JSON.stringify(props.widgetForm.list))
let copyData = {
...list[index],
key,
model: `${list[index].type}_${key}`,
rules: list[index].rules ?? []
}
if (
list[index].type === 'radio' ||
list[index].type === 'checkbox' ||
list[index].type === 'select'
) {
copyData = {
...copyData,
options: {
...copyData.options,
options: copyData.options.options.map((item: any) => ({ ...item }))
}
}
}
context.emit('update:widgetForm', {
...props.widgetForm,
list: handleListInsert(list[index].key, oldList, copyData)
})
context.emit('update:widgetFormSelect', copyData)
}
const handleDeleteClick = (index: number, list: any[]) => {
const oldList = JSON.parse(JSON.stringify(props.widgetForm.list))
if (list.length - 1 === index) {
if (index === 0) {
nextTick(() => context.emit('update:widgetFormSelect', null))
} else {
context.emit('update:widgetFormSelect', list[index - 1])
}
} else {
context.emit('update:widgetFormSelect', list[index + 1])
}
context.emit('update:widgetForm', {
...props.widgetForm,
list: handleListDelete(list[index].key, oldList)
})
}
const handleMoveAdd = (event: any) => {
const { newIndex } = event
const key = v4().replaceAll('-', '')
const list = JSON.parse(JSON.stringify(props.widgetForm.list))
list[newIndex] = {
...list[newIndex],
key,
model: `${list[newIndex].type}_${key}`,
rules: []
}
if (
list[newIndex].type === 'radio' ||
list[newIndex].type === 'checkbox' ||
list[newIndex].type === 'select'
) {
list[newIndex] = {
...list[newIndex],
options: {
...list[newIndex].options,
options: list[newIndex].options.options.map((item: any) => ({
...item
}))
}
}
}
if (list[newIndex].type === 'grid') {
list[newIndex] = {
...list[newIndex],
columns: list[newIndex].columns.map((item: any) => ({ ...item }))
}
}
context.emit('update:widgetForm', { ...props.widgetForm, list })
context.emit('update:widgetFormSelect', list[newIndex])
}
const handleColMoveAdd = (
event: any,
row: any,
index: string | number | symbol
) => {
const { newIndex, oldIndex, item } = event
const list = JSON.parse(JSON.stringify(props.widgetForm.list))
if (item.className.includes('data-grid')) {
item.tagName === 'DIV' &&
list.splice(oldIndex, 0, row.columns[index].list[newIndex])
row.columns[index].list.splice(newIndex, 1)
return false
}
const key = v4().replaceAll('-', '')
row.columns[index].list[newIndex] = {
...row.columns[index].list[newIndex],
key,
model: `${row.columns[index].list[newIndex].type}_${key}`,
rules: []
}
if (
row.columns[index].list[newIndex].type === 'radio' ||
row.columns[index].list[newIndex].type === 'checkbox' ||
row.columns[index].list[newIndex].type === 'select'
) {
row.columns[index].list[newIndex] = {
...row.columns[index].list[newIndex],
options: {
...row.columns[index].list[newIndex].options,
options: row.columns[index].list[
newIndex
].options.options.map((item: any) => ({ ...item }))
}
}
}
context.emit('update:widgetFormSelect', row.columns[index].list[newIndex])
}
return {
handleItemClick,
handleCopyClick,
handleDeleteClick,
handleMoveAdd,
handleColMoveAdd
}
}
})
</script>
<template>
<div class="widget-item-container">
<el-form-item
class="widget-view"
v-if="element"
:key="element.key"
:class="{ active: selectWidget?.key === element.key }"
:label="element.label"
:rules="element.options.rules"
>
<template v-if="element.type === 'input'">
<el-input
readonly
:modelValue="element.options.defaultValue"
:style="{ width: element.options.width }"
:placeholder="element.options.placeholder"
:maxlength="parseInt(element.options.maxlength)"
:clearable="element.options.clearable"
:disabled="element.options.disabled"
>
<template #prefix v-if="element.options.prefix">
{{ element.options.prefix }}
</template>
<template #suffix v-if="element.options.suffix">
{{ element.options.suffix }}
</template>
<template #prepend v-if="element.options.prepend">
{{ element.options.prepend }}
</template>
<template #append v-if="element.options.append">
{{ element.options.append }}
</template>
</el-input>
</template>
<template v-if="element.type === 'password'">
<el-input
readonly
:modelValue="element.options.defaultValue"
:style="{ width: element.options.width }"
:placeholder="element.options.placeholder"
:maxlength="parseInt(element.options.maxlength)"
:clearable="element.options.clearable"
:disabled="element.options.disabled"
:show-password="element.options.showPassword"
>
<template #prefix v-if="element.options.prefix">
{{ element.options.prefix }}
</template>
<template #suffix v-if="element.options.suffix">
{{ element.options.suffix }}
</template>
<template #prepend v-if="element.options.prepend">
{{ element.options.prepend }}
</template>
<template #append v-if="element.options.append">
{{ element.options.append }}
</template>
</el-input>
</template>
<template v-if="element.type === 'textarea'">
<el-input
type="textarea"
resize="none"
readonly
:rows="element.options.rows"
:modelValue="element.options.defaultValue"
:style="{ width: element.options.width }"
:placeholder="element.options.placeholder"
:maxlength="parseInt(element.options.maxlength)"
:show-word-limit="element.options.showWordLimit"
:autosize="element.options.autosize"
:clearable="element.options.clearable"
:disabled="element.options.disabled"
/>
</template>
<template v-if="element.type === 'number'">
<el-input-number
:modelValue="element.options.defaultValue"
:style="{ width: element.options.width }"
:max="element.options.max"
:min="element.options.min"
:disabled="element.options.disabled"
/>
</template>
<template v-if="element.type === 'radio'">
<el-radio-group
:modelValue="element.options.defaultValue"
:style="{ width: element.options.width }"
:disabled="element.options.disabled"
>
<el-radio
v-for="item of element.options.options"
:key="item.value"
:label="item.value"
:style="{
display: element.options.inline ? 'inline-block' : 'block'
}"
>{{ element.options.showLabel ? item.label : item.value }}</el-radio
>
</el-radio-group>
</template>
<template v-if="element.type === 'checkbox'">
<el-checkbox-group
:modelValue="element.options.defaultValue"
:style="{ width: element.options.width }"
:disabled="element.options.disabled"
>
<el-checkbox
v-for="item of element.options.options"
:key="item.value"
:label="item.value"
:style="{
display: element.options.inline ? 'inline-block' : 'block'
}"
>{{ element.options.showLabel ? item.label : item.value }}
</el-checkbox>
</el-checkbox-group>
</template>
<template v-if="element.type === 'time'">
<el-time-picker
:modelValue="element.options.defaultValue"
:placeholder="element.options.placeholder"
:readonly="element.options.readonly"
:editable="element.options.editable"
:clearable="element.options.clearable"
:format="element.options.format"
:disabled="element.options.disabled"
:style="{ width: element.options.width }"
/>
</template>
<template v-if="element.type === 'date'">
<el-date-picker
:modelValue="element.options.defaultValue"
:placeholder="element.options.placeholder"
:readonly="element.options.readonly"
:editable="element.options.editable"
:clearable="element.options.clearable"
:format="element.options.format"
:disabled="element.options.disabled"
:style="{ width: element.options.width }"
/>
</template>
<template v-if="element.type === 'rate'">
<el-rate
:modelValue="element.options.defaultValue"
:max="element.options.max"
:allowHalf="element.options.allowHalf"
:disabled="element.options.disabled"
/>
</template>
<template v-if="element.type === 'select'">
<el-select
:modelValue="element.options.defaultValue"
:multiple="element.options.multiple"
:placeholder="element.options.placeholder"
:clearable="element.options.clearable"
:filterable="element.options.filterable"
:disabled="element.options.disabled"
:style="{ width: element.options.width }"
>
<el-option
v-for="item of element.options.options"
:key="item.value"
:value="item.value"
:label="element.options.showLabel ? item.label : item.value"
/>
</el-select>
</template>
<template v-if="element.type === 'switch'">
<el-switch
:modelValue="element.options.defaultValue"
:active-text="element.options.activeText"
:inactive-text="element.options.inactiveText"
:disabled="element.options.disabled"
/>
</template>
<template v-if="element.type === 'slider'">
<el-slider
:modelValue="element.options.defaultValue"
:min="element.options.min"
:max="element.options.max"
:step="element.options.step"
:range="element.options.range"
:disabled="element.options.disabled"
:style="{ width: element.options.width }"
/>
</template>
<template v-if="element.type == 'text'">
<span>{{ element.options.defaultValue }}</span>
</template>
<template v-if="element.type === 'img-upload'">
<el-upload
:name="element.options.file"
:action="element.options.action"
:accept="element.options.accept"
:file-list="element.options.defaultValue"
:listType="element.options.listType"
:multiple="element.options.multiple"
:limit="element.options.limit"
:disabled="element.options.disabled"
>
<SvgIcon
v-if="element.options.listType === 'picture-card'"
iconClass="insert"
/>
<el-button v-else>
<SvgIcon iconClass="img-upload" style="margin-right: 10px;" />
点击上传
</el-button>
</el-upload>
</template>
<template v-if="element.type === 'richtext-editor'">
<RichTextEditor
:value="element.options.defaultValue"
:disable="element.options.disabled"
:style="{ width: element.options.width }"
/>
</template>
<template v-if="element.type === 'cascader'">
<el-cascader
:modelValue="element.options.defaultValue"
:options="element.options.remoteOptions"
:placeholder="element.options.placeholder"
:filterable="element.options.filterable"
:clearable="element.options.clearable"
:disabled="element.options.disabled"
:style="{ width: element.options.width }"
/>
</template>
</el-form-item>
<div class="widget-view-action" v-if="selectWidget?.key === element.key">
<SvgIcon iconClass="copy" @click.stop="$emit('copy')" />
<SvgIcon iconClass="delete" @click.stop="$emit('delete')" />
</div>
<div class="widget-view-drag" v-if="selectWidget?.key === element.key">
<SvgIcon iconClass="move" className="drag-widget" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import SvgIcon from '../../components/SvgIcon.vue'
import RichTextEditor from '../../components/RichTextEditor.vue'
import { WidgetForm } from '../../config/element'
export default defineComponent({
name: 'ElWidgetFormItem',
components: {
SvgIcon,
RichTextEditor
},
props: {
config: {
type: Object as PropType<WidgetForm['config']>,
required: true
},
element: {
type: Object,
required: true
},
selectWidget: {
type: Object
}
},
emits: ['copy', 'delete']
})
</script>
export enum CodeType {
Vue = 'vue',
Html = 'html'
}
export enum PlatformType {
Element
}
export default {
install: () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
//const context = require.context('./svg', false, /\.svg$/)
//context.keys().map(context)
}
}
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616397416223" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5853" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M204.8 512V281.6c0-12.8 10.24-25.6 25.6-25.6h307.2c15.36 0 25.6 10.24 25.6 25.6V512c0 12.8-10.24 25.6-25.6 25.6H512v51.2h51.2c28.16 0 51.2-23.04 51.2-51.2V256c0-28.16-23.04-51.2-51.2-51.2H204.8c-28.16 0-51.2 23.04-51.2 51.2v281.6c0 28.16 23.04 51.2 51.2 51.2h153.6v-51.2h-128c-12.8 0-25.6-10.24-25.6-25.6z m0 0" p-id="5854"></path><path d="M819.2 435.2H665.6v51.2h128c15.36 0 25.6 10.24 25.6 25.6v230.4c0 12.8-10.24 25.6-25.6 25.6H486.4c-15.36 0-25.6-10.24-25.6-25.6V512c0-12.8 10.24-25.6 25.6-25.6H512v-51.2h-51.2c-28.16 0-51.2 23.04-51.2 51.2V768c0 28.16 23.04 51.2 51.2 51.2h358.4c28.16 0 51.2-23.04 51.2-51.2V486.4c0-28.16-23.04-51.2-51.2-51.2z m0 0" p-id="5855"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616134146824" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2148" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M708.14 344.43L452.97 597.69l-135.2-152.34-41.89 38.08 173.28 196.13L748.13 384.4l-39.99-39.97z m0 0" p-id="2149"></path><path d="M794.17 147.91c45.16 0.2 81.71 36.76 81.92 81.92v564.34c-0.2 45.16-36.76 81.71-81.92 81.92H229.83c-45.16-0.2-81.71-36.76-81.92-81.92V229.83c0.2-45.16 36.76-81.71 81.92-81.92h564.34m0-45.51H229.83c-70.09 0-127.43 57.34-127.43 127.43v564.34c0 70.08 57.34 127.43 127.43 127.43h564.34c70.08 0 127.43-57.34 127.43-127.43V229.83c0-70.09-57.34-127.43-127.43-127.43z m0 0" p-id="2150"></path><path d="M794.17 102.4H229.83c-70.09 0-127.43 57.34-127.43 127.43v564.34h45.51V229.83c0.2-45.16 36.76-81.71 81.92-81.92h564.34V102.4m0 0" p-id="2151"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616407151368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2814" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M799.2 874.4c0 34.4-28 62.4-62.368 62.4H287.2a62.496 62.496 0 0 1-62.4-62.4V212h574.4v662.4zM349.6 100c0-7.2 5.6-12.8 12.8-12.8h300c7.2 0 12.768 5.6 12.768 12.8v37.6H349.6V100z m636.8 37.6H749.6V100c0-48-39.2-87.2-87.2-87.2h-300a87.392 87.392 0 0 0-87.2 87.2v37.6H37.6C16.8 137.6 0 154.4 0 175.2s16.8 37.6 37.6 37.6h112v661.6A137.6 137.6 0 0 0 287.2 1012h449.6a137.6 137.6 0 0 0 137.6-137.6V212h112c20.8 0 37.6-16.8 37.6-37.6s-16.8-36.8-37.6-36.8zM512 824c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.768-37.6-37.6-37.6-20.8 0-37.6 16.8-37.6 37.6v400c0 20.8 16.8 37.6 37.6 37.6m-175.2 0c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0.8 20.8 17.6 37.6 37.6 37.6m350.4 0c20.8 0 37.632-16.8 37.632-37.6v-400c0-20.8-16.8-37.6-37.632-37.6-20.768 0-37.6 16.8-37.6 37.6v400c0 20.8 16.8 37.6 37.6 37.6" p-id="2815"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616134250659" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5955" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M465.499307 1021.354667c-21.504 0-44.117333-2.048-68.693334-5.12l-6.144-1.024c-174.336-26.624-293.290667-195.925333-298.410666-203.093334C-76.026027 555.776 8.11264 296.277333 167.08864 152.661333 325.04064 9.045333 588.635307-52.48 819.37664 133.205333c148.736 119.978667 193.877333 286.122667 195.925333 293.290667v2.048c21.504 116.906667 4.096 203.093333-52.309333 258.474667-86.186667 83.114667-228.693333 56.405333-248.234667 52.309333-26.709333-3.072-46.165333 5.12-60.501333 22.528-15.36 19.456-18.432 45.141333-13.312 60.501333 14.336 43.093333 16.384 75.861333 6.144 100.522667-29.781333 64.682667-90.282667 98.474667-181.589333 98.474667z m-65.621334-67.669334l6.144 1.024c99.498667 15.36 160-4.096 184.576-59.477333 0-1.024 5.12-14.336-8.192-55.381333-13.312-36.949333-3.072-85.162667 23.552-117.930667 27.733333-34.901333 68.693333-50.261333 116.906667-45.141333l3.072 1.024c1.024 0 128.170667 27.648 193.877333-35.925334 40.021333-38.997333 52.309333-106.666667 34.901334-201.045333-4.096-13.312-48.213333-157.952-175.36-259.498667C578.309973 17.322667 347.56864 71.68 208.04864 197.802667 79.877973 314.709333-14.500693 537.258667 143.451307 778.325333c1.024 0 108.714667 153.856 256.426666 175.36z m0 0" p-id="5956"></path><path d="M158.89664 538.282667c0 33.962667 27.562667 61.525333 61.525333 61.525333s61.525333-27.562667 61.525334-61.525333-27.562667-61.525333-61.525334-61.525334c-34.048 0-61.525333 27.562667-61.525333 61.525334z m71.765333-184.576c0 33.962667 27.562667 61.525333 61.525334 61.525333s61.525333-27.562667 61.525333-61.525333-27.562667-61.525333-61.525333-61.525334-61.525333 27.562667-61.525334 61.525334z m184.576-102.570667c0 33.962667 27.562667 61.525333 61.525334 61.525333s61.525333-27.562667 61.525333-61.525333-27.562667-61.525333-61.525333-61.525333-61.525333 27.562667-61.525334 61.525333z m205.141334 51.285333c0 33.962667 27.562667 61.525333 61.525333 61.525334s61.525333-27.562667 61.525333-61.525334-27.562667-61.525333-61.525333-61.525333-61.525333 27.562667-61.525333 61.525333z m102.570666 164.096c0 33.962667 27.562667 61.525333 61.525334 61.525334s61.525333-27.562667 61.525333-61.525334-27.562667-61.525333-61.525333-61.525333-61.525333 27.562667-61.525334 61.525333z m0 0" p-id="5957"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616746013904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2051" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M202.496 821.504H69.802667A44.202667 44.202667 0 0 1 25.6 777.386667V69.973333C25.6 45.312 45.397333 25.6 69.802667 25.6H777.386667a44.202667 44.202667 0 0 1 44.202666 44.202667v132.693333h132.693334c24.405333 0 44.202667 19.797333 44.202666 44.202667v707.413333a44.202667 44.202667 0 0 1-44.202666 44.288H246.613333a44.202667 44.202667 0 0 1-44.202666-44.202667V821.504zM733.013333 202.496V114.005333H114.005333v619.093334h88.490667v-486.4a44.202667 44.202667 0 0 1 44.202667-44.202667h486.4zM290.901333 290.901333v619.093334h619.093334V290.901333H290.901333z" p-id="2052"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616134188521" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3908" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M290.4576 0a35.84 35.84 0 0 1 35.84 35.84v67.0208h384.8704v-66.56a35.84 35.84 0 0 1 71.68 0v66.56H921.6a102.4 102.4 0 0 1 102.4 102.3488v716.4416A102.4 102.4 0 0 1 921.6 1024H102.4a102.4 102.4 0 0 1-102.4-102.3488V205.2096a102.4 102.4 0 0 1 102.4-102.3488h152.2176V35.7888a35.84 35.84 0 0 1 35.84-35.7888zM71.68 396.3904v525.2608a30.72 30.72 0 0 0 30.72 30.72h819.2a30.72 30.72 0 0 0 30.72-30.72V397.1072L71.68 396.3904z m269.6704 352.1024v85.2992H256v-85.2992h85.3504z m213.2992 0v85.2992H469.3504v-85.2992h85.2992z m213.3504 0v85.2992h-85.3504v-85.2992H768z m-426.6496-203.6224v85.2992H256v-85.2992h85.3504z m213.2992 0v85.2992H469.3504v-85.2992h85.2992z m213.3504 0v85.2992h-85.3504v-85.2992H768zM254.6176 174.4896H102.4a30.72 30.72 0 0 0-30.72 30.72v119.552l880.64 0.7168V205.2096a30.72 30.72 0 0 0-30.72-30.72h-138.752v47.5648a35.84 35.84 0 0 1-71.68 0v-47.5648H326.2976v47.104a35.84 35.84 0 0 1-71.68 0v-47.104z" p-id="3909"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616746033782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2814" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M517.59 21.609c-100.299 0-181.703 79.514-185.167 179.34H98.603c-25.979 0-47.235 21.099-47.235 47.236 0 25.98 21.099 47.237 47.236 47.237h52.117v528.416c0 99.196 67.233 180.285 150.37 180.285h423.55c82.98 0 150.37-80.616 150.37-180.285V295.737h47.236c25.98 0 47.236-21.1 47.236-47.237 0-25.98-21.099-47.236-47.236-47.236H702.441C699.449 101.124 617.888 21.61 517.59 21.61z m-96.677 179.34c3.464-51.172 45.19-90.85 96.834-90.85s93.37 39.835 96.362 90.85H420.913z m-119.98 714.842c-29.444 0-61.88-37.789-61.88-91.953V295.737h547.311V824.31c0 54.007-32.436 91.954-61.88 91.954H300.933v-0.473z m0 0" p-id="2815"></path><path d="M364.387 802.267c21.57 0 39.363-21.571 39.363-48.653V476.022c0-27.082-17.635-48.654-39.363-48.654-21.572 0-39.364 21.572-39.364 48.654v277.592c0 26.924 17.32 48.653 39.364 48.653z m142.496 0c21.571 0 39.363-21.571 39.363-48.653V476.022c0-27.082-17.635-48.654-39.363-48.654-21.571 0-39.364 21.572-39.364 48.654v277.592c0 26.924 17.793 48.653 39.364 48.653z m149.896 0c21.571 0 39.364-21.571 39.364-48.653V476.022c0-27.082-17.635-48.654-39.364-48.654-21.571 0-39.363 21.572-39.363 48.654v277.592c0 26.924 17.162 48.653 39.363 48.653z m0 0" p-id="2816"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616408010660" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1600" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M518.4 819.2h281.6c6.4 0 19.2-6.4 25.6-6.4 6.4-6.4 6.4-12.8 6.4-25.6V268.8c0-19.2-12.8-32-32-32h-576c-6.4 0-19.2 6.4-25.6 6.4 0 6.4-6.4 19.2-6.4 25.6v518.4c0 19.2 12.8 32 32 32h294.4z m12.8 64H224c-51.2 0-96-44.8-96-96V268.8c0-25.6 12.8-51.2 25.6-70.4s44.8-25.6 70.4-25.6h576c51.2 0 96 44.8 96 96v518.4c0 25.6-12.8 51.2-25.6 70.4-19.2 19.2-44.8 25.6-70.4 25.6H531.2z m153.6-358.4" p-id="1601"></path><path d="M441.6 672c-19.2 19.2-38.4 0-38.4 0L288 537.6c-6.4-6.4-6.4-12.8 0-19.2L403.2 384s25.6-19.2 38.4 0c19.2 19.2 0 38.4 0 38.4L352 531.2 441.6 640c0-6.4 12.8 19.2 0 32z m51.2 19.2c-25.6-6.4-19.2-32-19.2-32l25.6-281.6c0-6.4 6.4-32 32-25.6 25.6 6.4 25.6 32 25.6 32l-32 281.6c-6.4 6.4-12.8 32-32 25.6z m128-19.2s-19.2 19.2-38.4 0 0-38.4 0-38.4l89.6-108.8-89.6-102.4s-12.8-19.2 0-38.4c19.2-19.2 38.4 0 38.4 0l115.2 134.4c6.4 6.4 6.4 12.8 0 19.2l-115.2 134.4z" p-id="1602"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616408360339" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7143" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M902.4 397.866667c-9.6-9.6-22.933333-14.933333-36.266667-14.933334h-21.866666V277.333333v-2.133333c0-4.266667-1.6-8.533333-4.266667-11.733333l-176.533333-147.733334c-1.6-1.6-3.2-2.666667-4.8-3.733333-1.066667-0.533333-2.133333-1.066667-3.733334-1.6-0.533333 0-0.533333 0-1.066666-0.533333-1.6-0.533333-2.666667-0.533333-4.266667-0.533334H216c-19.733333 0-35.733333 16-35.733333 35.733334v237.333333h-21.866667c-13.866667 0-26.666667 5.333333-36.266667 14.933333-10.133333 10.133333-15.466667 22.933333-15.466666 36.8v265.6c0 28.266667 22.933333 51.2 51.2 51.2h21.866666v133.866667c0 19.733333 16 35.733333 35.733334 35.733333h592.533333c19.733333 0 35.733333-16 35.733333-35.733333v-133.866667h21.866667c28.266667 0 51.2-22.933333 51.2-51.2V434.133333c0.533333-13.866667-4.8-26.666667-14.4-36.266666z m-666.666667-236.266667h394.666667v114.133333c0 4.8 2.133333 9.066667 5.333333 12.8 3.2 3.2 8 5.333333 12.8 5.333334h142.4V373.333333H235.733333V161.6z m437.333334 397.333333c0 36.8-8.533333 65.066667-25.066667 85.866667-16.533333 20.8-38.933333 30.933333-66.666667 30.933333-28.266667 0-50.666667-10.133333-67.2-30.933333-16.533333-20.8-25.066667-49.066667-25.066666-84.8 0-22.933333 2.666667-42.666667 8.533333-58.133333 4.266667-11.733333 10.133333-21.866667 17.6-30.933334 7.466667-9.066667 15.466667-16 24.533333-20.266666 11.733333-5.866667 25.6-9.066667 40.533334-9.066667 27.733333 0 50.133333 10.133333 66.666666 30.933333s26.133333 49.066667 26.133334 86.4zM423.466667 592c-2.666667-3.733333-7.466667-6.933333-13.866667-9.6-4.266667-1.6-14.4-5.333333-30.4-10.133333-20.266667-5.866667-34.666667-13.333333-43.2-22.4-11.733333-12.266667-17.6-27.733333-17.6-45.866667 0-11.733333 2.666667-22.4 8-32.533333 5.333333-10.133333 13.333333-17.6 23.466667-22.933334s22.933333-8 37.333333-8c23.466667 0 41.6 6.4 53.333333 18.666667s18.133333 29.333333 18.666667 50.133333l-37.333333 2.666667c-1.6-11.733333-5.333333-20.266667-10.666667-25.066667-5.333333-5.333333-13.333333-7.466667-24-7.466666-11.2 0-19.733333 2.666667-26.133333 8-4.266667 3.733333-5.866667 8-5.866667 13.866666 0 5.333333 2.133333 10.133333 5.866667 13.866667 4.8 4.8 16.533333 10.133333 35.2 14.933333 18.666667 5.333333 32.533333 10.666667 41.066666 16.533334s16 13.333333 20.8 22.933333c4.8 9.6 7.466667 21.866667 7.466667 36.266667 0 12.8-3.2 25.066667-9.066667 36.266666-5.866667 11.2-14.4 19.733333-25.6 25.066667s-24.533333 8.533333-41.066666 8.533333c-24 0-42.133333-6.4-54.933334-19.733333-12.8-13.333333-20.266667-32.533333-22.933333-58.133333l37.333333-4.266667c2.133333 14.933333 6.933333 26.133333 13.333334 33.066667 6.933333 6.933333 16 10.666667 27.733333 10.666666 12.266667 0 21.333333-3.2 27.733333-9.6 6.4-6.4 9.6-13.333333 9.6-21.866666-0.533333-5.333333-1.6-10.133333-4.266666-13.866667z m-248.533334 65.066667c-10.133333-12.266667-14.933333-30.933333-15.466666-54.933334l35.733333-4.8c0.533333 12.8 2.133333 22.4 4.8 27.733334 4.266667 8 10.133333 12.266667 18.666667 12.266666s14.4-2.666667 18.133333-8.533333c3.733333-5.866667 5.333333-18.133333 5.333333-36.266667V444.8h37.866667v143.466667c0 18.666667-1.6 33.066667-4.266667 43.2-3.733333 13.333333-10.666667 24-20.266666 32-9.6 8-22.4 11.733333-38.4 11.733333-17.6 0.533333-32-5.866667-42.133334-18.133333z m616 202.133333H235.733333v-98.133333h555.733334v98.133333zM853.333333 672h-38.4l-76.266666-147.733333V672h-35.2V444.8h37.333333l77.333333 151.466667V444.8h35.2V672z" p-id="7144"></path><path d="M581.333333 480.533333c-15.466667 0-28.266667 6.4-37.866666 19.2-9.6 12.8-14.4 32.533333-14.4 58.666667 0 25.6 4.8 45.333333 14.933333 58.133333 10.133333 13.333333 22.4 19.733333 37.866667 19.733334 15.466667 0 27.733333-6.4 37.333333-19.733334 9.6-13.333333 14.4-33.066667 14.4-59.2 0-26.133333-4.8-45.333333-14.4-58.133333-9.6-12.266667-21.866667-18.666667-37.866667-18.666667z" p-id="7145"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616397448118" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6518" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M939.4 139.6H550c-11.6 0-21.2 9.6-21.2 21.2V474c0 11.9 9.6 21.2 21.2 21.2h389.5c11.4 0 20.9-9.3 20.9-21.2V160.8c0-11.6-9.6-21.2-21-21.2z m-21.7 313.2h-346V182.2h346.1v270.6h-0.1zM474.3 139.6h-389c-12.1 0-21.7 9.6-21.7 21.2v702.7c0 11.6 9.6 20.9 21.7 20.9h389c11.6 0 21.2-9.3 21.2-20.9V160.8c0-11.6-9.6-21.2-21.2-21.2z m-21.5 702.2H106.5V182.2h346.3v659.6z m486.6-308.5H550c-11.6 0-21.2 9.8-21.2 21.4v308.7c0 11.6 9.6 20.9 21.2 20.9h389.5c11.4 0 20.9-9.3 20.9-20.9V554.8c0-11.6-9.6-21.5-21-21.5z m-21.7 308.5h-346V575.9h346.1v265.9h-0.1zM209.9 448.1c8.6 8.3 22.2 8.3 30 0l49.2-48.7 42.9 42.9c8.6 8.1 21.7 8.1 30 0s8.3-22.2 0-30l-43.1-43.1 49.2-48.9h-0.3c2.5-2 4.5-5.3 5.3-8.6 3.8-11.1-2.3-22.7-13.4-26.7L171 224.5c-4-1.3-8.8-1.3-13.1 0-11.1 4-17.2 16.1-13.6 26.7l60 187.2c1.1 3.6 3.1 6.9 5.6 9.7z m103.2-133.2l-38.6 38.6v0.5h-0.5l-0.5 1-38.8 38.4-37.3-115.8 115.7 37.3z" p-id="6519"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616397202972" class="icon" viewBox="0 0 1108 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4265" xmlns:xlink="http://www.w3.org/1999/xlink" width="216.40625" height="200"><defs><style type="text/css"></style></defs><path d="M950.158133 0.000356H157.9625A157.677947 157.677947 0 0 0 0 157.358181v709.283994a157.677947 157.677947 0 0 0 157.9625 157.357825h792.195633a157.677947 157.677947 0 0 0 157.962501-157.357825V157.358181A157.677947 157.677947 0 0 0 950.158133 0.000356z m78.963466 867.886738a78.821189 78.821189 0 0 1-78.963466 78.678913H157.9625a76.509196 76.509196 0 0 1-67.190084-39.908562l265.238993-264.207488 128.511261 128.048863a48.97869 48.97869 0 0 0 67.190084-7.113826l279.359937-278.292862 198.048908 197.266387z m0-293.587587l-172.119014-171.4432a37.809984 37.809984 0 0 0-54.207352 0c-1.173781 1.173781-1.173781 4.695125-2.347562 5.868906l-285.299981 284.197338-133.206387-132.708419a37.845553 37.845553 0 0 0-54.242921 0c-1.173781 1.173781-1.173781 4.695125-2.347562 5.868906l-246.387354 245.426988V157.358181a78.821189 78.821189 0 0 1 78.963465-78.678913h792.160064a78.821189 78.821189 0 0 1 78.963466 78.678913v416.870187zM475.061282 157.429319a157.357825 157.357825 0 1 0 157.9625 157.357825 157.677947 157.677947 0 0 0-157.9625-157.428963z m0 237.210519a78.678913 78.678913 0 1 1 78.963466-78.678913 78.821189 78.821189 0 0 1-78.963466 78.607775z" p-id="4266"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616132989306" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="964" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M118.784 727.04h778.24v-430.08h-778.24v430.08z m-40.96-471.04h860.16v512h-860.16v-512z m116.736 153.6v204.8c0 12.288 8.192 20.48 20.48 20.48s20.48-8.192 20.48-20.48v-204.8c0-12.288-8.192-20.48-20.48-20.48s-20.48 8.192-20.48 20.48z" p-id="965"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1617247026838" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2064" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M900.7 432.2H548.4V109.3c0-20.2-16.5-36.7-36.7-36.7-20.2 0-36.7 16.5-36.7 36.7v322.9H122.8c-20.2 0-36.7 16.5-36.7 36.7 0 20.2 16.5 36.7 36.7 36.7h352.3v381.6c0 20.2 16.5 36.7 36.7 36.7 20.2 0 36.7-16.5 36.7-36.7V505.6h352.3c20.2 0 36.7-16.5 36.7-36.7-0.1-20.2-16.6-36.7-36.8-36.7z" fill="" p-id="2065"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616837392769" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2194" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M320 288.13h0.07l607.13-1.34c17.67-0.04 31.97-14.4 31.93-32.07-0.04-17.65-14.36-31.93-32-31.93h-0.07l-607.13 1.34c-17.67 0.04-31.97 14.4-31.93 32.07 0.04 17.65 14.36 31.93 32 31.93zM112.02 304c26.51 0 48-21.49 48-48s-21.49-48-48-48-48 20.15-48 46.66c0 26.51 21.49 49.34 48 49.34zM320 544l607.13-0.06c17.67 0 32-14.33 32-32s-14.33-32-32-32L320 480c-17.67 0-32 14.33-32 32s14.33 32 32 32zM112.01 560c26.51 0 47.98-20.96 47.98-47.47 0-26.51-21.47-48.53-47.98-48.53-26.51 0-48 21.49-48 48s21.49 48 48 48zM929.53 736H320c-17.67 0-32 14.33-32 32s14.33 32 32 32h609.53c17.67 0 32-14.33 32-32s-14.32-32-32-32z" p-id="2195"></path><path d="M112.02 769.53m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="2196"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616746043522" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3630" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M945.96 478.06L814.09 346.19c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L857.4 480H544V166.6l88.56 88.56c6.25 6.25 14.44 9.38 22.62 9.38s16.38-3.12 22.62-9.38c12.5-12.5 12.5-32.75 0-45.25L545.94 78.04c-18.69-18.72-49.19-18.72-67.88 0L346.19 209.91c-12.5 12.5-12.5 32.75 0 45.25s32.75 12.5 45.25 0L480 166.6V480H166.6l88.56-88.56c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0L78.04 478.06c-18.72 18.69-18.72 49.19 0 67.88l131.88 131.88c12.5 12.5 32.75 12.5 45.25 0 6.25-6.25 9.38-14.44 9.38-22.62s-3.12-16.38-9.38-22.62L166.6 544H480v313.4l-88.56-88.56c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25l131.88 131.88c18.69 18.72 49.19 18.72 67.88 0l131.88-131.88c12.5-12.5 12.5-32.75 0-45.25-6.25-6.25-14.44-9.38-22.62-9.38s-16.38 3.12-22.62 9.38L544 857.4V544h313.4l-88.56 88.56c-6.25 6.25-9.38 14.44-9.38 22.62s3.12 16.38 9.38 22.62c12.5 12.5 32.75 12.5 45.25 0l131.88-131.88c18.71-18.67 18.71-49.17-0.01-67.86z" p-id="3631"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616134071489" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1128" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M787.692308 590.769231a78.769231 78.769231 0 0 1 78.76923 78.769231v118.153846a78.769231 78.769231 0 0 1-78.76923 78.76923H236.307692a78.769231 78.769231 0 0 1-78.76923-78.76923v-118.153846a78.769231 78.769231 0 0 1 78.76923-78.769231h551.384616z m0 31.507692H236.307692a47.261538 47.261538 0 0 0-47.02523 42.417231L189.046154 669.538462v118.153846a47.261538 47.261538 0 0 0 42.417231 47.02523L236.307692 834.953846h551.384616a47.261538 47.261538 0 0 0 47.02523-42.417231L834.953846 787.692308v-118.153846a47.261538 47.261538 0 0 0-42.417231-47.025231L787.692308 622.276923z m-98.461539 11.815385a15.753846 15.753846 0 0 1 15.438769 12.603077l0.315077 3.150769-0.039384 62.976 63.054769 0.039384a15.753846 15.753846 0 0 1 3.150769 31.192616l-3.150769 0.315077-63.054769-0.039385 0.039384 63.054769a15.753846 15.753846 0 0 1-31.192615 3.15077l-0.315077-3.15077-0.039385-63.054769-62.976 0.039385a15.753846 15.753846 0 0 1-3.150769-31.192616l3.150769-0.315077 62.976-0.039384 0.039385-62.976c0-8.664615 7.089231-15.753846 15.753846-15.753846zM787.692308 157.538462a78.769231 78.769231 0 0 1 78.76923 78.76923v118.153846a78.769231 78.769231 0 0 1-78.76923 78.769231H236.307692a78.769231 78.769231 0 0 1-78.76923-78.769231V236.307692a78.769231 78.769231 0 0 1 78.76923-78.76923h551.384616z m0 31.507692H236.307692a47.261538 47.261538 0 0 0-47.02523 42.417231L189.046154 236.307692v118.153846a47.261538 47.261538 0 0 0 42.417231 47.025231L236.307692 401.723077h551.384616a47.261538 47.261538 0 0 0 47.02523-42.417231L834.953846 354.461538V236.307692a47.261538 47.261538 0 0 0-42.417231-47.02523L787.692308 189.046154z m-354.461539 90.584615a15.753846 15.753846 0 0 1 3.150769 31.192616L433.230769 311.138462H275.692308a15.753846 15.753846 0 0 1-3.15077-31.192616L275.692308 279.630769h157.538461z" p-id="1129"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616743017848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2044" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M780.8 437.521c41.13 0 74.479 33.348 74.479 74.479v347.546a74.479 74.479 0 0 1-74.479 74.479H234.667a74.479 74.479 0 0 1-74.48-74.48V512c0-41.13 33.349-74.479 74.48-74.479H780.8m0-74.479H234.667A148.958 148.958 0 0 0 85.709 512v347.546a148.958 148.958 0 0 0 148.958 148.923H780.8a148.958 148.958 0 0 0 148.958-148.923V512A148.958 148.958 0 0 0 780.8 363.042zM507.733 89.975a173.739 173.739 0 0 1 173.739 173.773v99.328H334.029v-99.328A173.739 173.739 0 0 1 507.767 90.01m0-74.48a248.252 248.252 0 0 0-248.251 248.218v173.773h496.503V263.782A248.252 248.252 0 0 0 507.733 15.497z m0 781.961a37.205 37.205 0 0 1-37.205-37.24V611.295a37.205 37.205 0 0 1 74.41 0v148.958a37.205 37.205 0 0 1-37.205 37.205z" p-id="2045"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616407187054" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3595" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 736a224 224 0 1 1 0-448 224 224 0 0 1 0 448z m0-64a160 160 0 1 0 0-320 160 160 0 0 0 0 320z" p-id="3596"></path><path d="M512 864C323.232 864 154.144 751.264 5.44 529.856a32 32 0 0 1 0-35.712C154.144 272.704 323.2 160 512 160c188.768 0 357.856 112.736 506.56 334.144a32 32 0 0 1 0 35.712C869.856 751.296 700.8 864 512 864z m0-64c159.84 0 306.72-94.784 441.248-288C818.72 318.784 671.84 224 512 224c-159.84 0-306.72 94.784-441.248 288C205.28 705.216 352.16 800 512 800z" p-id="3597"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616134111818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1697" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M957.91 512.93c0 247.03-200.26 447.29-447.29 447.29S63.33 759.97 63.33 512.93 263.59 65.65 510.62 65.65 957.91 265.9 957.91 512.93zM510.62 155.1c-197.62 0-357.83 160.21-357.83 357.83S313 870.77 510.62 870.77s357.83-160.21 357.83-357.83S708.25 155.1 510.62 155.1z" p-id="1698"></path><path d="M510.62 512.93m-178.92 0a178.92 178.92 0 1 0 357.84 0 178.92 178.92 0 1 0-357.84 0Z" p-id="1699"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616134220980" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4676" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M545.8 786.6l181.9 93.1c8.5 4.2 16.9 4.2 25.4 0s12.7-16.9 8.5-25.4l-33.8-198.8c-4.2-25.4 4.2-50.8 21.2-67.7L892.8 444c8.5-8.5 8.5-16.9 4.2-25.4s-12.7-16.9-21.2-16.9l-203-29.6c-25.4-4.2-46.5-16.9-55-42.3L529 147.9c-4.2-8.5-12.7-12.7-21.2-12.7s-16.9 4.2-21.2 12.7L401.9 334c-12.7 21.2-33.8 38.1-59.2 42.3l-198.8 29.6c-8.5 0-16.9 8.5-21.2 16.9-4.2 8.5 0 16.9 4.2 25.4L270.8 592c16.9 16.9 25.4 42.3 21.2 67.7l-33.8 198.8c0 8.5 4.2 16.9 8.5 25.4 4.2 8.5 16.9 4.2 25.4 0L474 790.8c25.2-16.9 50.6-16.9 71.8-4.2zM313.6 943.7c-26.5 13.2-57.3 13.2-83.8-4.4-22-17.6-35.3-48.5-30.9-75l35.3-207.2c0-8.8 0-17.6-8.8-22L75.5 480.7c-17.6-22-26.5-52.9-17.6-79.4s35.3-48.5 61.7-52.9l211.6-30.9c8.8 0 17.6-4.4 17.6-13.2l92.6-189.6c13.2-26.5 39.7-44.1 70.5-44.1s57.3 17.6 70.5 44.1L675 304.3c4.4 8.8 13.2 13.2 17.6 13.2l211.6 30.9c30.9 4.4 52.9 26.5 61.7 52.9 8.8 26.5 0 57.3-17.6 79.4L798.6 630.6c-4.4 4.4-8.8 13.2-8.8 22L825 859.9c4.4 30.9-8.8 57.3-30.9 75-22 17.6-57.3 17.6-83.8 4.4l-189.6-97c-8.8-4.4-17.6-4.4-22 0L313.6 943.7z" p-id="4677"></path><path d="M617.3 703.5H405.4c-19.3 0-38.5-15.9-38.5-31.8s19.3-31.8 38.5-31.8h211.9c19.3 0 38.5 15.9 38.5 31.8s-19.3 31.8-38.5 31.8z" p-id="4678"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616397264104" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5680" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M874.1 97.9H149.91a52.06 52.06 0 0 0-52 52v724.2a52.06 52.06 0 0 0 52 52H874.1a52.06 52.06 0 0 0 52-52V149.9a52.06 52.06 0 0 0-52-52z m-20 756.19H169.91V169.9H854.1z" p-id="5681"></path><path d="M256.23 291.65h60v188a36 36 0 0 0 72 0v-188h60a36 36 0 0 0 0-72h-192a36 36 0 1 0 0 72zM576.23 291.65h192a36 36 0 0 0 0-72h-192a36 36 0 1 0 0 72zM576.23 419.65h192a36 36 0 0 0 0-72h-192a36 36 0 0 0 0 72zM576.23 547.65h192a36 36 0 0 0 0-72h-192a36 36 0 0 0 0 72zM256.23 676.13h512a36 36 0 0 0 0-72h-512a36 36 0 1 0 0 72zM256.23 804.13h512a36 36 0 0 0 0-72h-512a36 36 0 1 0 0 72z" p-id="5682"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616134352374" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6720" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M610.496 622.336l0.085333 0.085333-60.352 60.330667-196.096-196.096 60.330667-60.330667 135.68 135.68L810.666667 301.44V170.666667H213.333333v682.666666h597.333334V543.914667l85.333333-93.226667V938.666667H128V85.333333h768v251.306667l-18.56 18.56 0.106667 0.085333-267.050667 267.050667z" p-id="6721"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616134429151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7902" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1024 191.8v64H388c-2.2 0-4 1.8-4 4V288c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32v-28.3c0-2.2-1.8-4-4-4H0v-64h124c2.2 0 4-1.8 4-4V160c0-17.7 14.3-32 32-32h192c17.7 0 32 14.3 32 32v27.8c0 2.2 1.8 4 4 4h636zM1024 480v64H772c-2.2 0-4 1.8-4 4v28c0 17.7-14.3 32-32 32H544c-17.7 0-32-14.3-32-32v-28c0-2.2-1.8-4-4-4H0v-64h508c2.2 0 4-1.8 4-4v-28c0-17.7 14.3-32 32-32h192c17.7 0 32 14.3 32 32v28c0 2.2 1.8 4 4 4h252zM1024 768.3v64H484c-2.2 0-4 1.8-4 4V864c0 17.7-14.3 32-32 32H256c-17.7 0-32-14.3-32-32v-27.8c0-2.2-1.8-4-4-4H0v-64h220c2.2 0 4-1.8 4-4V736c0-17.7 14.3-32 32-32h192c17.7 0 32 14.3 32 32v28.3c0 2.2 1.8 4 4 4h540z" p-id="7903"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616134402767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7661" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M751.36 768H272.64a271.36 271.36 0 0 1 0-542.72h478.72a271.36 271.36 0 0 1 0 542.72zM272.64 287.36a207.36 207.36 0 0 0 0 414.72h478.72a207.36 207.36 0 0 0 0-414.72z" fill="#323333" p-id="7662"></path><path d="M735.36 494.72m-158.08 0a158.08 158.08 0 1 0 316.16 0 158.08 158.08 0 1 0-316.16 0Z" p-id="7663"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616134446685" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8730" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M859 201H165c-19.8 0-36-16.2-36-36s16.2-36 36-36h694c19.8 0 36 16.2 36 36s-16.2 36-36 36z" p-id="8731"></path><path d="M476 859V165c0-19.8 16.2-36 36-36s36 16.2 36 36v694c0 19.8-16.2 36-36 36s-36-16.2-36-36z" p-id="8732"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616132968487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="744" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M118.784 778.24h778.24v-532.48h-778.24v532.48z m-40.96-573.44h860.16v614.4h-860.16v-614.4z m778.24 409.6l-122.88 122.88h122.88v-122.88zM194.56 358.4v204.8c0 12.288 8.192 20.48 20.48 20.48s20.48-8.192 20.48-20.48v-204.8c0-12.288-8.192-20.48-20.48-20.48s-20.48 8.192-20.48 20.48z" p-id="745"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616134172392" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2961" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 64C264.58 64 64 264.58 64 512s200.58 448 448 448 448-200.58 448-448S759.42 64 512 64z m0 832c-211.74 0-384-172.26-384-384s172.26-384 384-384 384 172.26 384 384-172.26 384-384 384z" p-id="2962"></path><path d="M544 498.47V256a32 32 0 0 0-64 0v256a31.58 31.58 0 0 0 10.93 23.68c0.31 0.34 0.41 0.79 0.75 1.12l135.69 135.69a32 32 0 0 0 45.32-45.32z" p-id="2963"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616406104682" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2036" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M864 554.666667a32 32 0 0 1 32 32v234.666666a32 32 0 0 1-27.648 31.701334L864 853.333333H160a32 32 0 0 1-32-32v-234.666666a32 32 0 1 1 64 0v202.624l640 0.042666v-202.666666a32 32 0 0 1 32-32z m-340.522667-380.074667l2.773334 2.56 193.194666 211.797333a23.210667 23.210667 0 0 1 5.888 15.616c0 10.837333-7.125333 19.882667-16.512 21.76l-3.626666 0.341334H576v170.666666a21.333333 21.333333 0 0 1-21.333333 21.333334h-85.333334a21.333333 21.333333 0 0 1-21.333333-21.333334v-170.666666H318.805333a18.986667 18.986667 0 0 1-11.818666-4.224l-2.432-2.261334a23.722667 23.722667 0 0 1-2.56-27.733333l2.56-3.498667 193.194666-211.797333c6.997333-7.68 17.834667-8.533333 25.728-2.56z" p-id="2037"></path></svg>
\ No newline at end of file
import { App, DefineComponent } from 'vue'
declare namespace FormCreate {
export function install(app: App): void
export const ElDesignForm: DefineComponent
export const ElGenerateForm: DefineComponent
}
export as namespace FormCreate
export = FormCreate
import { App } from 'vue'
import ElDesignForm from './core/element/ElDesignForm.vue'
import ElGenerateForm from './core/element/ElGenerateForm.vue'
import Icons from './icons'
import './styles/index.styl'
Icons.install()
ElDesignForm.install = (app: App) => {
app.component(ElDesignForm.name, ElDesignForm)
}
ElGenerateForm.install = (app: App) => {
app.component(ElGenerateForm.name, ElGenerateForm)
}
const components = [
ElDesignForm,
ElGenerateForm
]
const install = (app: App) => {
components.forEach(component => app.component(component.name, component))
}
export {
install,
ElDesignForm,
ElGenerateForm
}
export default {
install,
ElDesignForm,
ElGenerateForm
}
.fc-style
.el-main
padding 0
.el-dialog__header
border-bottom 1px solid #f0f0f0
.el-dialog__body
padding 15px 20px
.el-dialog__footer
border-top 1px solid #F2F6FC
padding 10px 15px
.config-content
.el-radio-group
margin-top 10px
vertical-align super
.el-radio
margin-bottom 10px
.el-rate
margin-top 6px
.el-checkbox
line-height 32px
\ No newline at end of file
@import './scrollbar.styl'
@import './element.styl'
$primary-color = #409EFF
$primary-background-color = #ecf5ff
html, body
height 100%
margin 0
#app
font-family 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
color #2c3e50
min-height 100%
height 100%
.fc-style
height 100%
*, :after, :before
-webkit-box-sizing border-box
-moz-box-sizing border-box
box-sizing border-box
.fc-container
background #fff
height 100%
.ant-layout, .el-container
height 100% !important
&>.ant-layout, .el-container
background #fff
.fc-main
position relative
&>.ant-layout, .el-container
position absolute
top 0
bottom 0
left 0
right 0
.center-container
border-left 1px solid #e0e0e0
border-right 1px solid #e0e0e0
.btn-bar
height 45px !important
line-height 45px
font-size 18px
border-bottom 2px solid #e4e7ed
text-align right
background-color white
padding 0 10px
.svg-icon
font-size 16px
margin-right 5px
.ant-layout-content, .el-main
height calc(100% - 45px)
padding 0
position relative
background #fafafa
.components
padding 8px 0
width 100%
height 100%
.widget-cate
padding 8px 12px
font-size 13px
ul
position relative
overflow hidden
padding 0 10px 10px
margin 0
.form-edit-widget-label
font-size 12px
display block
width 48%
line-height 26px
position relative
float left
left 0
overflow hidden
text-overflow ellipsis
white-space nowrap
margin 1%
border 1px solid #F4F6FC
&:hover
border 1px dashed $primary-color
&>a
color $primary-color
&>a
color #333
display block
cursor move
background #f4f6fc
border 1px solid #f4f6fc
.svg-icon
margin-right 6px
margin-left 8px
font-size 14px
display inline-block
vertical-align middle
span
display inline-block
vertical-align middle
.widget-form-container
position absolute
top 0
left 0
right 0
bottom 0
.widget-form-list
background #fff
border 1px dashed #999
min-height calc(100vh - 65px)
margin 10px
.widget-item-container
position relative
.widget-view-action
position absolute
right 0
bottom -2px
height 28px
line-height 28px
background $primary-color
z-index 10
.svg-icon
font-size 14px
color #fff
margin 0 5px
cursor pointer
.widget-view-drag
position absolute
height 28px
left 0
top -2px
line-height 28px
background $primary-color
z-index 10
.svg-icon
font-size 14px
color #fff
margin 0 5px
cursor move
.widget-col-list
min-height 50px
border 1px dashed #ccc
background #fff
.widget-view
padding-bottom 18px
position relative
border 1px dashed rgba(170, 170, 170, 0.7)
background-color rgba(236, 245, 255, 0.3)
margin 2px
.widget-view-description
height 15px
line-height 15px
font-size 13px
margin-top 6px
color #909399
&:after
position absolute
left 0
right 0
top 0
bottom 0
display block
&:hover
background $primary-background-color
outline 1px solid $primary-color
outline-offset 0
&.active
outline 2px solid $primary-color
border 1px solid $primary-color
outline-offset 0
.widget-view-drag
display block
&.active
outline 2px solid $primary-color
border 1px solid $primary-color
&.ghost
background #f56c6c
border 2px solid #f56c6c
outline-width 0
height 3px
box-sizing border-box
font-size 0
content ''
overflow hidden
padding 0
.widget-col
padding 5px
background-color rgba(253, 246, 236, 0.3)
&.active
outline 2px solid #e6a23c
border 1px solid #e6a23c
&:hover
background #fdf6ec
outline 1px solid #e6a23c
outline-offset 0px
&.active
outline 2px solid #e6a23c
border 1px solid #e6a23c
outline-offset 0
&.ghost
background #f56c6c
border 2px solid #f56c6c
outline-width 0
height 3px
box-sizing border-box
font-size 0
content ''
overflow hidden
padding 0
.widget-view-action.widget-col-action
position absolute
height 28px
right -2px
bottom -2px
line-height 28px
background #e6a23c
z-index 10
.svg-icon
font-size 14px
color #fff
margin 0 5px
cursor move
.widget-view-drag.widget-col-drag
position absolute
height 28px
left -2px
top -2px
line-height 28px
background #e6a23c
z-index 10
.svg-icon
font-size 14px
color #fff
margin 0 5px
cursor move
&::after
display none
.ghost
background #f56c6c
border 2px solid #f56c6c
outline-width 0
height 3px
box-sizing border-box
font-size 0
content ''
overflow hidden
padding 0
.ghost
background #f56c6c
border 2px solid #f56c6c
position relative
&::after
background #f56c6c
li.ghost
height 5px
list-style none
font-size 0
overflow hidden
.widget-config-container
position relative
.ant-layout-header, .el-header
border-bottom 2px solid #e4e7ed
padding 0 5px
height 45px !important
line-height 45px !important
background-color #fff
.config-tab
height 41px
line-height 41px
display inline-block
width 145px
text-align center
font-size 14px
font-weight 500
position relative
cursor pointer
&.active
border-bottom 2px solid $primary-color
.config-content
padding 10px
background #fff
overflow auto
.ant-form-item-label, .el-form-item__label
font-weight 500
.el-form-item__label
padding 0
.ant-form-item, .el-form-item, h4
padding-bottom 10px
border-bottom 1px solid #e1e1e1
.label
font-size 14px
font-weight 500
margin 0 5px
&:first-child
margin-left 0
.drag-item
font-size 16px
margin 0 5px
cursor move
.ghost
background #fff
border 1px dashed $primary-color
&::after
background #fff
display block
content ''
position absolute
top 0
left 0
right 0
bottom 0
ul
margin 0
padding 0
li.ghost
list-style none
font-size 0
display block
position relative
.form-empty
position absolute
text-align center
width 300px
font-size 20px
top 200px
left 50%
margin-left -150px
color #ccc
.widget-empty
background-position 50%
::-webkit-scrollbar
width 5px
height 5px
::-webkit-scrollbar-thumb
border-radius 1em
background-color rgba(50, 50, 50, 0.3)
::-webkit-scrollbar-track
border-radius 1em
background-color rgba(50, 50, 50, 0.1)
\ No newline at end of file
import { CodeType, PlatformType } from '../enums'
export default function(
widgetForm: any,
codeType: CodeType,
platformType: PlatformType
) {
if (codeType === CodeType.Vue) {
return `<template>
${`<el-generate-form ref="generateFormRef" :data="widgetForm">
</el-generate-form>
<el-button type="primary" @click="handleSubmit">提交</el-button>`
}
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
setup() {
const state = reactive({
generateFormRef: null,
widgetForm: ${JSON.stringify(widgetForm)}
})
const handleSubmit = () => {
state.generateFormRef.getData().then(data => {
console.log(data)
// data success
// data 表单数据
}).catch(error => {
// data failed
})
}
return {
...toRefs(state),
handleSubmit
}
}
})
</script>
`
}
if (codeType === CodeType.Html) {
return `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
${'<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css" />'
}
</head>
<body>
<div id="app">
${`<el-generate-form ref="generateFormRef" :data="widgetForm">
</el-generate-form>
<el-button type="primary" @click="handleSubmit">提交</el-button>`
}
</div>
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-form-create/dist/formCreate.umd.min.js"></script>
<script src="https://unpkg.com/ace-builds/src-noconflict/ace.js"></script>
${'<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>'
}
<script>
const { createApp, reactive, toRefs } = Vue
createApp({
setup() {
const state = reactive({
generateFormRef: null,
widgetForm: ${JSON.stringify(widgetForm)}
})
const handleSubmit = () => {
state.generateFormRef.getData().then(data => {
console.log(data)
// data success
// data 表单数据
}).catch(error => {
// data failed
})
}
return {
...toRefs(state),
handleSubmit
}
}
})
.use(${'ElementPlus'})
.use(formCreate)
.mount('#app')
</script>
</body>
</html>
`
}
}
// 验证是否外部地址
export function isExternal(path: string) {
return /^(https?:|mailto:|tel:)/.test(path)
}
// 复制文本
export function copy(text: string) {
const input = document.createElement('textarea')
input.value = text
document.body.appendChild(input)
input.select()
document.execCommand('copy')
document.body.removeChild(input)
}
......@@ -24,7 +24,10 @@ export default ({ command, mode }) => {
vue(),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
iconDirs: [
path.resolve(process.cwd(), "src/assets/icons"),
path.resolve(process.cwd(), "src/vueFormCreate/icons/svg")
],
// 指定symbolId格式
symbolId: "icon-[dir]-[name]",
}),
......
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论