Compare commits
2 Commits
1e72f12edb
...
a6647dcefe
| Author | SHA1 | Date |
|---|---|---|
 shengwen.chen
|
a6647dcefe | 2 months ago |
|
shengwen.chen
|
559ceec399 | 2 months ago |
@ -1,6 +1,11 @@
|
||||
module.exports = {
|
||||
extends: ['@vue/eslint-config-standard'],
|
||||
root: true,
|
||||
extends: ['plugin:vue/vue3-essential', '@vue/eslint-config-standard-with-typescript'],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
},
|
||||
rules: {
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
},
|
||||
}
|
||||
|
||||
@ -0,0 +1,232 @@
|
||||
{
|
||||
"widgetList": [
|
||||
{
|
||||
"key": 47004,
|
||||
"type": "table",
|
||||
"category": "container",
|
||||
"icon": "table",
|
||||
"rows": [
|
||||
{
|
||||
"cols": [
|
||||
{
|
||||
"type": "table-cell",
|
||||
"category": "container",
|
||||
"icon": "table-cell",
|
||||
"internal": true,
|
||||
"widgetList": [],
|
||||
"merged": false,
|
||||
"options": {
|
||||
"name": "table-cell-89646",
|
||||
"cellWidth": "",
|
||||
"cellHeight": "",
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"wordBreak": false,
|
||||
"customClass": ""
|
||||
},
|
||||
"id": "table-cell-89646"
|
||||
},
|
||||
{
|
||||
"type": "table-cell",
|
||||
"category": "container",
|
||||
"icon": "table-cell",
|
||||
"internal": true,
|
||||
"widgetList": [],
|
||||
"merged": false,
|
||||
"options": {
|
||||
"name": "table-cell-94169",
|
||||
"cellWidth": "",
|
||||
"cellHeight": "",
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"wordBreak": false,
|
||||
"customClass": ""
|
||||
},
|
||||
"id": "table-cell-94169"
|
||||
}
|
||||
],
|
||||
"id": "table-row-17138",
|
||||
"merged": false
|
||||
},
|
||||
{
|
||||
"cols": [
|
||||
{
|
||||
"type": "table-cell",
|
||||
"category": "container",
|
||||
"icon": "table-cell",
|
||||
"internal": true,
|
||||
"widgetList": [
|
||||
{
|
||||
"key": 63447,
|
||||
"type": "input",
|
||||
"alias": "",
|
||||
"icon": "text-field",
|
||||
"formItemFlag": true,
|
||||
"options": {
|
||||
"name": "input52553",
|
||||
"keyNameEnabled": false,
|
||||
"keyName": "",
|
||||
"label": "input",
|
||||
"labelAlign": "",
|
||||
"type": "text",
|
||||
"defaultValue": "",
|
||||
"placeholder": "",
|
||||
"columnWidth": "200px",
|
||||
"size": "",
|
||||
"labelWidth": null,
|
||||
"labelHidden": false,
|
||||
"labelWrap": false,
|
||||
"readonly": false,
|
||||
"disabled": false,
|
||||
"hidden": false,
|
||||
"clearable": true,
|
||||
"showPassword": false,
|
||||
"required": false,
|
||||
"requiredHint": "",
|
||||
"validation": "",
|
||||
"validationHint": "",
|
||||
"customClass": "",
|
||||
"labelIconClass": null,
|
||||
"labelIconPosition": "rear",
|
||||
"labelTooltip": null,
|
||||
"minLength": null,
|
||||
"maxLength": null,
|
||||
"showWordLimit": false,
|
||||
"prefixIcon": "",
|
||||
"suffixIcon": "",
|
||||
"appendButton": false,
|
||||
"appendButtonDisabled": false,
|
||||
"buttonIcon": "custom-search",
|
||||
"appendText": false,
|
||||
"textForAppend": "",
|
||||
"onCreated": "",
|
||||
"onMounted": "",
|
||||
"onInput": "",
|
||||
"onChange": "",
|
||||
"onFocus": "",
|
||||
"onBlur": "",
|
||||
"onValidate": "",
|
||||
"onAppendButtonClick": ""
|
||||
},
|
||||
"id": "input52553"
|
||||
}
|
||||
],
|
||||
"merged": false,
|
||||
"options": {
|
||||
"name": "table-cell-57911",
|
||||
"cellWidth": "",
|
||||
"cellHeight": "",
|
||||
"colspan": 2,
|
||||
"rowspan": 1,
|
||||
"wordBreak": false,
|
||||
"customClass": ""
|
||||
},
|
||||
"id": "table-cell-57911"
|
||||
},
|
||||
{
|
||||
"type": "table-cell",
|
||||
"category": "container",
|
||||
"icon": "table-cell",
|
||||
"internal": true,
|
||||
"widgetList": [],
|
||||
"merged": true,
|
||||
"options": {
|
||||
"name": "table-cell-74240",
|
||||
"cellWidth": "",
|
||||
"cellHeight": "",
|
||||
"colspan": 2,
|
||||
"rowspan": 1,
|
||||
"wordBreak": false,
|
||||
"customClass": ""
|
||||
},
|
||||
"id": "table-cell-74240"
|
||||
}
|
||||
],
|
||||
"id": "table-row-57542",
|
||||
"merged": false
|
||||
}
|
||||
],
|
||||
"options": {
|
||||
"name": "table61396",
|
||||
"hidden": false,
|
||||
"customClass": []
|
||||
},
|
||||
"id": "table61396"
|
||||
},
|
||||
{
|
||||
"key": 63447,
|
||||
"type": "input",
|
||||
"alias": "",
|
||||
"icon": "text-field",
|
||||
"formItemFlag": true,
|
||||
"options": {
|
||||
"name": "input26255",
|
||||
"keyNameEnabled": false,
|
||||
"keyName": "",
|
||||
"label": "input",
|
||||
"labelAlign": "",
|
||||
"type": "text",
|
||||
"defaultValue": "",
|
||||
"placeholder": "",
|
||||
"columnWidth": "200px",
|
||||
"size": "",
|
||||
"labelWidth": null,
|
||||
"labelHidden": false,
|
||||
"labelWrap": false,
|
||||
"readonly": false,
|
||||
"disabled": false,
|
||||
"hidden": false,
|
||||
"clearable": true,
|
||||
"showPassword": false,
|
||||
"required": false,
|
||||
"requiredHint": "",
|
||||
"validation": "",
|
||||
"validationHint": "",
|
||||
"customClass": [],
|
||||
"labelIconClass": null,
|
||||
"labelIconPosition": "rear",
|
||||
"labelTooltip": null,
|
||||
"minLength": null,
|
||||
"maxLength": null,
|
||||
"showWordLimit": false,
|
||||
"prefixIcon": "",
|
||||
"suffixIcon": "",
|
||||
"appendButton": false,
|
||||
"appendButtonDisabled": false,
|
||||
"buttonIcon": "custom-search",
|
||||
"appendText": false,
|
||||
"textForAppend": "",
|
||||
"onCreated": "",
|
||||
"onMounted": "",
|
||||
"onInput": "",
|
||||
"onChange": "",
|
||||
"onFocus": "",
|
||||
"onBlur": "",
|
||||
"onValidate": "",
|
||||
"onAppendButtonClick": ""
|
||||
},
|
||||
"id": "input26255"
|
||||
}
|
||||
],
|
||||
"formConfig": {
|
||||
"modelName": "formData",
|
||||
"refName": "vForm",
|
||||
"rulesName": "rules",
|
||||
"labelWidth": 80,
|
||||
"labelPosition": "left",
|
||||
"h5LabelTop": false,
|
||||
"gridResponsive": false,
|
||||
"size": "",
|
||||
"labelAlign": "label-left-align",
|
||||
"cssCode": "",
|
||||
"customClass": [],
|
||||
"functions": "",
|
||||
"layoutType": "PC",
|
||||
"jsonVersion": 3,
|
||||
"dataSources": [],
|
||||
"onFormCreated": "",
|
||||
"onFormMounted": "",
|
||||
"onFormDataChange": "",
|
||||
"onFormValidate": ""
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { inject, defineProps } from 'vue'
|
||||
import type { IWidget } from '@/types/widgetsConfigInterface'
|
||||
import RendererDom from '@/components/RendererDom.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
itemData: IWidget
|
||||
}>()
|
||||
|
||||
// 文书表单
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const docForm = inject('docForm') as any
|
||||
|
||||
// 根据表单元素类型初始化对应的值
|
||||
if (props['itemData']['category'] == 'formItem') {
|
||||
docForm[props['itemData']['options']['name']] = props['itemData']['options']['defaultValue'] || ''
|
||||
// 针对数值输入框
|
||||
if (props['itemData']['type'] == 'el-input-number') {
|
||||
docForm[props['itemData']['options']['name']] = props['itemData']['options']['defaultValue'] || 0
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 针对表格容器 -->
|
||||
<template v-if="itemData['type'] == 'table'">
|
||||
<table border="1" cellpadding="10" cellspacing="0" class="w-full">
|
||||
<template v-for="(row, rowIndex) in itemData['rows']" :key="rowIndex">
|
||||
<tr>
|
||||
<RendererDom v-for="subData in row['cols']" :key="subData['id']" :itemData="subData" />
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<!-- 针对表格列 -->
|
||||
<template v-if="itemData['type'] == 'table-cell'">
|
||||
<td v-if="!itemData['merged']" :colspan="itemData['options']['colspan']" :rowspan="itemData['options']['rowspan']">
|
||||
<RendererDom v-for="subData in itemData['widgetList']" :key="subData['id']" :itemData="subData" />
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<!-- 针对普通输入框 -->
|
||||
<template v-if="itemData['type'] == 'el-input'">
|
||||
<el-form-item :label="itemData['options']['label']">
|
||||
<el-input v-model="docForm[itemData['options']['name']]" :placeholder="itemData['options']['placeholder']" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 针对数值输入框 -->
|
||||
<template v-if="itemData['type'] == 'el-input-number'">
|
||||
<el-form-item :label="itemData['options']['label']">
|
||||
<el-input-number v-model="docForm[itemData['options']['name']]" :placeholder="itemData['options']['placeholder']"
|
||||
:controls-position="'right'" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 针对单选框 -->
|
||||
<template v-if="itemData['type'] == 'el-radio'">
|
||||
<el-form-item :label="itemData['options']['label']">
|
||||
<el-radio-group v-model="docForm[itemData['options']['name']]">
|
||||
<template v-for="optionItem in itemData['options']['optionItems']" :key="optionItem['value']">
|
||||
<el-radio :label="optionItem['label']" :value="optionItem['value']" />
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, type Component } from 'vue'
|
||||
import * as icons from '@element-plus/icons-vue'
|
||||
import { QuestionFilled } from '@element-plus/icons-vue'
|
||||
|
||||
const props = defineProps<{
|
||||
iconName: string
|
||||
}>()
|
||||
|
||||
const iconComponent = computed<Component>(() => {
|
||||
return (icons as Record<string, Component>)[props.iconName] || QuestionFilled
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-icon>
|
||||
<component :is="iconComponent" />
|
||||
</el-icon>
|
||||
</template>
|
||||
@ -1,12 +0,0 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useCounterStore = defineStore('counter', () => {
|
||||
const count = ref(0)
|
||||
const doubleCount = computed(() => count.value * 2)
|
||||
function increment() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
return { count, doubleCount, increment }
|
||||
})
|
||||
@ -0,0 +1,9 @@
|
||||
import type { App } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
const store = createPinia();
|
||||
|
||||
export function setupStore(app: App<Element>) {
|
||||
app.use(store);
|
||||
}
|
||||
|
||||
export { store };
|
||||
@ -0,0 +1,17 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { store } from "@/stores";
|
||||
export const configStore = defineStore('formConfig', {
|
||||
state: () => ({
|
||||
formConfig: {}
|
||||
}),
|
||||
getters: {
|
||||
getFormConfig: (state) => state.formConfig,
|
||||
},
|
||||
actions: {
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
export function useConfigStore() {
|
||||
return configStore(store);
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { store } from "@/stores";
|
||||
export const widgetStore = defineStore('widget', {
|
||||
state: () => ({
|
||||
widgetList: [],
|
||||
}),
|
||||
getters: {
|
||||
getWidgetList: (state) => state.widgetList,
|
||||
},
|
||||
actions: {
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
export function useWidgetStore() {
|
||||
return widgetStore(store);
|
||||
}
|
||||
@ -0,0 +1,49 @@
|
||||
export interface IOption {
|
||||
// 元素唯一标识符
|
||||
name: string
|
||||
// 隐藏状态
|
||||
hidden: boolean
|
||||
// 自定义类名
|
||||
customClass?: string
|
||||
// 标签名称
|
||||
label?: string
|
||||
// 默认值
|
||||
defaultValue?: string | boolean | number | []
|
||||
// 提示词
|
||||
placeholder?: string
|
||||
// 选择项
|
||||
optionItems?: []
|
||||
// 行合并
|
||||
colspan?: number
|
||||
// 列合并
|
||||
rowspan?: number
|
||||
}
|
||||
|
||||
export type ICategory = 'container' | 'formItem'
|
||||
|
||||
export interface IWidget {
|
||||
// 元素唯一标识符
|
||||
key?: number
|
||||
// 元素id
|
||||
id?: string
|
||||
// 类别
|
||||
category: ICategory
|
||||
// 类型
|
||||
type: string
|
||||
// 展示名称
|
||||
displayName: string
|
||||
// 图标
|
||||
icon: string
|
||||
// 子类
|
||||
rows?: [{ cols: [IWidget] }]
|
||||
// 属性
|
||||
options: IOption
|
||||
// 子结构
|
||||
widgetList?: []
|
||||
// 单元格是否被合并
|
||||
merged?: boolean
|
||||
}
|
||||
|
||||
export interface IWidgetJson {
|
||||
widgetList: IWidget[]
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import melonJson from "./melon.json";
|
||||
/**
|
||||
* 初始化和重置文书结构
|
||||
* @param widgetJson
|
||||
*/
|
||||
export const initJson = (widgetJson: any) => {
|
||||
widgetJson['widgetList'] = []
|
||||
// widgetJson['formConfig'] = {}
|
||||
}
|
||||
|
||||
export const addItem = (fatherId = "", widgetJson: any) => {
|
||||
if (fatherId) { } else {
|
||||
widgetJson['widgetList'] = [melonJson]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,174 @@
|
||||
{
|
||||
"key": 47004,
|
||||
"id": "table-61396",
|
||||
"category": "container",
|
||||
"type": "table",
|
||||
"displayName": "表格",
|
||||
"icon": "Monitor",
|
||||
"rows": [
|
||||
{
|
||||
"cols": [
|
||||
{
|
||||
"key": 47005,
|
||||
"id": "table-cell-12332",
|
||||
"category": "container",
|
||||
"type": "table-cell",
|
||||
"displayName": "子单元格",
|
||||
"icon": "Monitor",
|
||||
"merged": false,
|
||||
"widgetList": [
|
||||
{
|
||||
"key": 47016,
|
||||
"id": "input-12355",
|
||||
"category": "formItem",
|
||||
"type": "el-input",
|
||||
"displayName": "输入框",
|
||||
"icon": "Folder",
|
||||
"options": {
|
||||
"name": "input-12355",
|
||||
"keyNameEnabled": false,
|
||||
"keyName": "",
|
||||
"label": "名称",
|
||||
"labelAlign": "",
|
||||
"type": "text",
|
||||
"defaultValue": "",
|
||||
"hidden": false,
|
||||
"customClass": "",
|
||||
"placeholder": "请输入名称"
|
||||
}
|
||||
}
|
||||
],
|
||||
"rows": [],
|
||||
"options": {
|
||||
"name": "table-cell-12332",
|
||||
"cellWidth": "",
|
||||
"cellHeight": "",
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"wordBreak": false,
|
||||
"customClass": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": 47015,
|
||||
"id": "table-cell-12344",
|
||||
"category": "container",
|
||||
"type": "table-cell",
|
||||
"displayName": "子单元格",
|
||||
"icon": "Monitor",
|
||||
"merged": false,
|
||||
"widgetList": [
|
||||
{
|
||||
"key": 47016,
|
||||
"id": "input-12366",
|
||||
"category": "formItem",
|
||||
"type": "el-input-number",
|
||||
"displayName": "输入框",
|
||||
"icon": "Folder",
|
||||
"options": {
|
||||
"name": "input-12366",
|
||||
"keyNameEnabled": false,
|
||||
"keyName": "",
|
||||
"label": "年龄",
|
||||
"labelAlign": "",
|
||||
"type": "number",
|
||||
"defaultValue": "",
|
||||
"hidden": false,
|
||||
"customClass": ""
|
||||
}
|
||||
}
|
||||
],
|
||||
"rows": [],
|
||||
"options": {
|
||||
"name": "table-cell-12344",
|
||||
"cellWidth": "",
|
||||
"cellHeight": "",
|
||||
"colspan": 1,
|
||||
"rowspan": 1,
|
||||
"wordBreak": false,
|
||||
"customClass": ""
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"cols": [
|
||||
{
|
||||
"key": 47015,
|
||||
"id": "table-cell-12344",
|
||||
"category": "container",
|
||||
"type": "table-cell",
|
||||
"displayName": "子单元格",
|
||||
"icon": "Monitor",
|
||||
"merged": false,
|
||||
"widgetList": [
|
||||
{
|
||||
"key": 47016,
|
||||
"id": "radio-12377",
|
||||
"category": "formItem",
|
||||
"type": "el-radio",
|
||||
"displayName": "单选框",
|
||||
"icon": "Folder",
|
||||
"options": {
|
||||
"name": "input-12377",
|
||||
"keyNameEnabled": false,
|
||||
"keyName": "",
|
||||
"label": "性别",
|
||||
"labelAlign": "",
|
||||
"type": "text",
|
||||
"defaultValue": "1",
|
||||
"hidden": false,
|
||||
"customClass": "",
|
||||
"optionItems": [
|
||||
{
|
||||
"label": "男",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"label": "女",
|
||||
"value": 2
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"rows": [],
|
||||
"options": {
|
||||
"name": "table-cell-12344",
|
||||
"cellWidth": "",
|
||||
"cellHeight": "",
|
||||
"colspan": 2,
|
||||
"rowspan": 1,
|
||||
"wordBreak": false,
|
||||
"customClass": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"key": 47018,
|
||||
"id": "table-cell-12399",
|
||||
"category": "container",
|
||||
"type": "table-cell",
|
||||
"displayName": "子单元格",
|
||||
"icon": "Monitor",
|
||||
"merged": true,
|
||||
"widgetList": [],
|
||||
"rows": [],
|
||||
"options": {
|
||||
"name": "table-cell-12399",
|
||||
"cellWidth": "",
|
||||
"cellHeight": "",
|
||||
"colspan": 2,
|
||||
"rowspan": 1,
|
||||
"wordBreak": false,
|
||||
"customClass": ""
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"options": {
|
||||
"name": "",
|
||||
"hidden": false,
|
||||
"customClass": ""
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
import type { IWidget } from "@/types/widgetsConfigInterface"
|
||||
|
||||
export const containers: IWidget[] = [
|
||||
{
|
||||
category: 'container',
|
||||
type: 'el-table',
|
||||
displayName: '表格',
|
||||
icon: 'Monitor',
|
||||
options: {
|
||||
name: '',
|
||||
hidden: false,
|
||||
}
|
||||
},
|
||||
{
|
||||
category: 'container',
|
||||
type: 'el-table-column',
|
||||
displayName: '子单元格',
|
||||
icon: 'Monitor',
|
||||
options: {
|
||||
name: '',
|
||||
hidden: false,
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
export const basicFields: IWidget[] = [
|
||||
{
|
||||
category: 'formItem',
|
||||
type: 'el-input',
|
||||
displayName: '输入框',
|
||||
icon: 'Folder',
|
||||
options: {
|
||||
name: '',
|
||||
hidden: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
category: 'formItem',
|
||||
type: 'el-input-number',
|
||||
displayName: '数值输入框',
|
||||
icon: 'Folder',
|
||||
options: {
|
||||
name: '',
|
||||
hidden: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
category: 'formItem',
|
||||
type: 'el-redio',
|
||||
displayName: ' 单选项',
|
||||
icon: 'Folder',
|
||||
options: {
|
||||
name: '',
|
||||
hidden: false,
|
||||
},
|
||||
},
|
||||
]
|
||||
@ -1,5 +1,24 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { provide, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import type { IWidgetJson } from '@/types/widgetsConfigInterface'
|
||||
import RendererDom from '@/components/RendererDom.vue'
|
||||
|
||||
// 文书结构
|
||||
const widgetJson = inject<IWidgetJson>('widgetJson')!
|
||||
|
||||
// 文书表单
|
||||
const docForm = reactive({})
|
||||
provide('docForm', docForm)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section></section>
|
||||
<section>
|
||||
<h1 class="text-sky-300">{{ widgetJson }}</h1>
|
||||
<el-form :model="docForm" label-width="80px">
|
||||
<template v-for="item in widgetJson['widgetList']" :key="item['id']">
|
||||
<RendererDom :itemData="item" />
|
||||
</template>
|
||||
</el-form>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in new issue