From aee8da950b09cba4148fa016f06cefaa9fdd375c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Fri, 21 Feb 2025 17:35:25 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=A1=A8=E5=8D=95=E6=9E=84?= =?UTF-8?q?=E5=BB=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/index.ts | 5 ++ src/views/tool/draggable/demo.vue | 50 ++++++++++++++ src/views/tool/draggable/exportConfig/form.js | 66 +++++++++++++++++++ .../tool/draggable/exportConfig/index.js | 27 +++++++- .../tool/draggable/exportConfig/input.js | 39 +++++++++-- .../tool/draggable/exportConfig/script.js | 34 +++++++++- .../tool/draggable/exportConfig/template.js | 7 +- src/views/tool/draggable/index.vue | 16 +++++ 8 files changed, 234 insertions(+), 10 deletions(-) create mode 100644 src/views/tool/draggable/demo.vue diff --git a/src/router/index.ts b/src/router/index.ts index 31b78b9..572cabd 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -31,6 +31,11 @@ export const constantRoutes: RouteRecordRaw[] = [ hidden: true, component: () => import('@/views/board/index.vue') }, + { + path: '/formCs', + hidden: true, + component: () => import('@/views/tool/draggable/demo.vue') + }, { path: '/board2', hidden: true, diff --git a/src/views/tool/draggable/demo.vue b/src/views/tool/draggable/demo.vue new file mode 100644 index 0000000..d125435 --- /dev/null +++ b/src/views/tool/draggable/demo.vue @@ -0,0 +1,50 @@ + + + diff --git a/src/views/tool/draggable/exportConfig/form.js b/src/views/tool/draggable/exportConfig/form.js index e69de29..2f1cd92 100644 --- a/src/views/tool/draggable/exportConfig/form.js +++ b/src/views/tool/draggable/exportConfig/form.js @@ -0,0 +1,66 @@ +import { + addVariables +} from './script.js'; + +import { + addCode +} from './template.js'; + +import { + getInputCode +} from './input.js'; + +const elementEnum = { + 'hw-input': getInputCode +}; + +const getFormCode = (data) => { + let code = ``; + let variablesCode = ``; + let functionCode = ``; + let isForm = data.isForm || false; + let formData = data.elementData || {}; + let tier = data.tier || []; + let parentData = data.formData || {}; + addVariables(tier, formData.options.key || ('form-' + formData.options.uuid), {}); + if (isForm) { + // code += ``; + addCode(``); + } else { + console.log(123123); + // code += `
`; + addCode(`
`); + } + tier.push(formData.options.key || ('form-' + formData.options.uuid)); + // code += ``; + addCode(``); + + formData.tasks.forEach(task => { + console.log(task); + if (task.type === 'hw-form') { + getFormCode({ + isForm: true, formData: formData, elementData: task, tier + }); + } else { + elementEnum[task.type]({ + isForm: true, formData: formData, elementData: task, tier + }); + } + }); + + // code += ``; + addCode(``); + if (isForm) { + // code += ``; + addCode(``); + } else { + // code += `
`; + addCode(`
`); + } + addCode(code); + +}; + +export { + getFormCode +}; diff --git a/src/views/tool/draggable/exportConfig/index.js b/src/views/tool/draggable/exportConfig/index.js index a686227..eeee75d 100644 --- a/src/views/tool/draggable/exportConfig/index.js +++ b/src/views/tool/draggable/exportConfig/index.js @@ -1,7 +1,32 @@ -import { addCode, combined } from '@/views/tool/draggable/exportConfig/template.js'; +import { addCode, templateCombined, resetTemplate } from './template.js'; +import { getInputCode } from './input.js'; +import { getFormCode } from './form.js'; +import { scriptCombined, resetScript } from './script.js'; +import Download from '@/plugins/download'; + +const reset = () => { + resetScript(); + resetTemplate(); +}; + +const elementEnum = { + 'hw-input': getInputCode, 'hw-form': getFormCode +}; const exportConfig = (e) => { + reset(); console.log(e); + e.map(v => { + elementEnum[v.type]({ + isForm: false, elementData: v, formData: {} + }); + }); + let template = templateCombined(); + let script = scriptCombined(); + let codeStr = template + script; + console.log(codeStr); + const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' }); + // Download.saveAs(blob, Date.now() + '.vue'); }; diff --git a/src/views/tool/draggable/exportConfig/input.js b/src/views/tool/draggable/exportConfig/input.js index 225abcf..0bde140 100644 --- a/src/views/tool/draggable/exportConfig/input.js +++ b/src/views/tool/draggable/exportConfig/input.js @@ -2,20 +2,51 @@ import { addVariables, addFunction } from './script.js'; -const getInput = (data) => { +import { + addCode +} from './template.js'; + +const getFormField = (tier, formData, elementData) => { + let res = `pageForm`; + if (tier && tier.length > 0) { + tier.forEach((item, index) => { + res += `['${item}']`; + }); + } + // if (formData !== '') { + // res += `['${formData}']`; + // } + if (elementData !== '') { + res += `['${elementData}']`; + } + return res; +}; + +const getInputCode = (data) => { let code = ``; let variablesCode = ``; let functionCode = ``; let isForm = data.isForm || false; + let tier = data.tier || []; let inputData = data.elementData || {}; let formData = data.formData || {}; if (isForm) { - code += ``; + code += ``; + } else { + code += `
${inputData.options.name}`; } - code += ``; + addVariables(tier, inputData.options.key || ('input-' + inputData.options.uuid), ''); + code += ``; if (isForm) { code += ``; + } else { + code += `
`; } + addCode(code); + +}; +export { + getInputCode }; diff --git a/src/views/tool/draggable/exportConfig/script.js b/src/views/tool/draggable/exportConfig/script.js index 78384d8..a977b38 100644 --- a/src/views/tool/draggable/exportConfig/script.js +++ b/src/views/tool/draggable/exportConfig/script.js @@ -2,15 +2,43 @@ const start = ``; let variablesData = ``; let functionData = ``; +const scriptCombined = () => { + return ` +${start} +${getVariablesData()} +${functionData} +${end} +`; +}; + +let variablesStructure = {}; + -const addVariables = (code) => { - variablesData += code; +const addVariables = (tier, key, type) => { + debugger + let obj = variablesStructure; + if (tier.length > 0) { + tier.forEach((t) => { + obj = obj[t]; + }); + obj[key] = type; + } else { + obj[key] = type; + } +}; +const getVariablesData = () => { + return `const pageForm = ref(${JSON.stringify(variablesStructure)})`; }; const addFunction = (code) => { functionData += code; }; +const resetScript = (data) => { + variablesData = ``; + variablesStructure = {}; + functionData = ``; +}; export { - addVariables, addFunction + addVariables, addFunction, scriptCombined, resetScript }; diff --git a/src/views/tool/draggable/exportConfig/template.js b/src/views/tool/draggable/exportConfig/template.js index 4ce2b44..49699fb 100644 --- a/src/views/tool/draggable/exportConfig/template.js +++ b/src/views/tool/draggable/exportConfig/template.js @@ -1,7 +1,7 @@ const start = ``; let content = ``; -const combined = () => { +const templateCombined = () => { return ` ${start} ${content} @@ -12,7 +12,10 @@ ${end} const addCode = (code) => { content += code; }; +const resetTemplate = (data) => { + content = ``; +}; export { - combined, addCode + templateCombined, addCode, resetTemplate }; diff --git a/src/views/tool/draggable/index.vue b/src/views/tool/draggable/index.vue index fa02bd9..b8bed19 100644 --- a/src/views/tool/draggable/index.vue +++ b/src/views/tool/draggable/index.vue @@ -220,6 +220,22 @@ const exportFile = () => { let data = exportConfig(widgetList.value); console.log(data); }; + +// const + +const aa = ref({ a: 1 }); +const bb = (v) => { + console.log(v); + v.a += 1; + console.log(v); +}; + +setTimeout(() => { + bb(aa.value); + setTimeout(() => { + console.log(aa.value); + }, 100); +}, 100);