1 line
13 KiB
JSON
1 line
13 KiB
JSON
{"remainingRequest":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\src\\views\\system\\build\\index.vue?vue&type=script&lang=js","dependencies":[{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\src\\views\\system\\build\\index.vue","mtime":1732871026723},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1732872824662},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\babel-loader\\lib\\index.js","mtime":1732872825017},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1732872824662},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":1732872825835}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport draggable from 'vuedraggable'\r\nimport { debounce } from 'throttle-debounce'\r\nimport { saveAs } from 'file-saver' // 版本可能不同\r\nimport ClipboardJS from 'clipboard'\r\nimport render from '@/views/system/build/render/render'\r\nimport { inputComponents, selectComponents, layoutComponents, formConf } from './generator/config'\r\nimport { titleCase, deepClone, isObjectObject, beautifierConf } from './utils/index'\r\nimport { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/views/system/build/generator/html'\r\nimport { makeUpJs } from '@/views/system/build/generator/js'\r\nimport { makeUpCss } from '@/views/system/build/generator/css'\r\nimport { getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf } from './utils/db'\r\nimport drawingDefalut from './generator/drawingDefalut'\r\nimport DraggableItem from '@/views/system/build/components/DraggableItem'\r\nimport RightPanel from '@/views/system/build/components/RightPanel'\r\nimport FormDrawer from '@/views/system/build/components/FormDrawer'\r\nimport JsonDrawer from '@/views/system/build/components/JsonDrawer'\r\nimport CodeTypeDialog from '@/views/system/build/components/CodeTypeDialog'\r\nimport loadBeautifier from './utils/loadBeautifier'\r\n\r\nlet beautifier\r\nconst emptyActiveData = { style: {}, autosize: {}}\r\nlet oldActiveId\r\nlet tempActiveData\r\nconst drawingListInDB = getDrawingList()\r\nconst formConfInDB = getFormConf()\r\nconst idGlobal = getIdGlobal()\r\nexport default {\r\n components: {\r\n draggable,\r\n render,\r\n FormDrawer,\r\n JsonDrawer,\r\n RightPanel,\r\n CodeTypeDialog,\r\n DraggableItem\r\n },\r\n data() {\r\n return {\r\n idGlobal,\r\n formConf,\r\n inputComponents,\r\n selectComponents,\r\n layoutComponents,\r\n labelWidth: 100,\r\n drawingList: drawingDefalut,\r\n drawingData: {},\r\n activeId: drawingDefalut[0].formId,\r\n drawerVisible: false,\r\n formData: {},\r\n dialogVisible: false,\r\n jsonDrawerVisible: false,\r\n generateConf: null,\r\n showFileName: false,\r\n activeData: drawingDefalut[0],\r\n saveDrawingListDebounce: debounce(340, saveDrawingList),\r\n saveIdGlobalDebounce: debounce(340, saveIdGlobal),\r\n leftComponents: [\r\n {\r\n title: '输入型组件',\r\n list: inputComponents\r\n },\r\n {\r\n title: '选择型组件',\r\n list: selectComponents\r\n },\r\n {\r\n title: '布局型组件',\r\n list: layoutComponents\r\n }\r\n ]\r\n }\r\n },\r\n computed: {\r\n },\r\n watch: {\r\n // eslint-disable-next-line func-names\r\n 'activeData.__config__.label': function(val, oldVal) {\r\n if (\r\n this.activeData.placeholder === undefined || !this.activeData.__config__.tag || oldActiveId !== this.activeId\r\n ) {\r\n return\r\n }\r\n this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val\r\n },\r\n activeId: {\r\n handler(val) {\r\n oldActiveId = val\r\n },\r\n immediate: true\r\n },\r\n drawingList: {\r\n handler(val) {\r\n this.saveDrawingListDebounce(val)\r\n if (val.length === 0) this.idGlobal = 100\r\n },\r\n deep: true\r\n },\r\n idGlobal: {\r\n handler(val) {\r\n this.saveIdGlobalDebounce(val)\r\n },\r\n immediate: true\r\n }\r\n },\r\n mounted() {\r\n if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {\r\n this.drawingList = drawingListInDB\r\n } else {\r\n this.drawingList = drawingDefalut\r\n }\r\n this.activeFormItem(this.drawingList[0])\r\n if (formConfInDB) {\r\n this.formConf = formConfInDB\r\n }\r\n loadBeautifier(btf => {\r\n beautifier = btf\r\n })\r\n const clipboard = new ClipboardJS('#copyNode', {\r\n text: trigger => {\r\n const codeStr = this.generateCode()\r\n this.$notify({\r\n title: '成功',\r\n message: '代码已复制到剪切板，可粘贴。',\r\n type: 'success'\r\n })\r\n return codeStr\r\n }\r\n })\r\n clipboard.on('error', e => {\r\n this.$message.error('代码复制失败')\r\n })\r\n },\r\n methods: {\r\n setObjectValueReduce(obj, strKeys, data) {\r\n const arr = strKeys.split('.')\r\n arr.reduce((pre, item, i) => {\r\n if (arr.length === i + 1) {\r\n pre[item] = data\r\n } else if (!isObjectObject(pre[item])) {\r\n pre[item] = {}\r\n }\r\n return pre[item]\r\n }, obj)\r\n },\r\n setRespData(component, resp) {\r\n const { dataPath, renderKey, dataConsumer } = component.__config__\r\n if (!dataPath || !dataConsumer) return\r\n const respData = dataPath.split('.').reduce((pre, item) => pre[item], resp)\r\n\r\n // 将请求回来的数据，赋值到指定属性。\r\n // 以el-tabel为例，根据Element文档，应该将数据赋值给el-tabel的data属性，所以dataConsumer的值应为'data';\r\n // 此时赋值代码可写成 component[dataConsumer] = respData；\r\n // 但为支持更深层级的赋值（如：dataConsumer的值为'options.data'）,使用setObjectValueReduce\r\n this.setObjectValueReduce(component, dataConsumer, respData)\r\n const i = this.drawingList.findIndex(item => item.__config__.renderKey === renderKey)\r\n if (i > -1) this.$set(this.drawingList, i, component)\r\n },\r\n fetchData(component) {\r\n const { dataType, method, url } = component.__config__\r\n if (dataType === 'dynamic' && method && url) {\r\n this.setLoading(component, true)\r\n this.$axios({\r\n method,\r\n url\r\n }).then(resp => {\r\n this.setLoading(component, false)\r\n this.setRespData(component, resp.data)\r\n })\r\n }\r\n },\r\n setLoading(component, val) {\r\n const { directives } = component\r\n if (Array.isArray(directives)) {\r\n const t = directives.find(d => d.name === 'loading')\r\n if (t) t.value = val\r\n }\r\n },\r\n activeFormItem(currentItem) {\r\n this.activeData = currentItem\r\n this.activeId = currentItem.__config__.formId\r\n },\r\n onEnd(obj) {\r\n if (obj.from !== obj.to) {\r\n this.fetchData(tempActiveData)\r\n this.activeData = tempActiveData\r\n this.activeId = this.idGlobal\r\n }\r\n },\r\n addComponent(item) {\r\n const clone = this.cloneComponent(item)\r\n this.fetchData(clone)\r\n this.drawingList.push(clone)\r\n this.activeFormItem(clone)\r\n },\r\n cloneComponent(origin) {\r\n const clone = deepClone(origin)\r\n const config = clone.__config__\r\n config.span = this.formConf.span // 生成代码时，会根据span做精简判断\r\n this.createIdAndKey(clone)\r\n clone.placeholder !== undefined && (clone.placeholder += config.label)\r\n tempActiveData = clone\r\n return tempActiveData\r\n },\r\n createIdAndKey(item) {\r\n const config = item.__config__\r\n config.formId = ++this.idGlobal\r\n config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件\r\n if (config.layout === 'colFormItem') {\r\n item.__vModel__ = `field${this.idGlobal}`\r\n } else if (config.layout === 'rowFormItem') {\r\n config.componentName = `row${this.idGlobal}`\r\n !Array.isArray(config.children) && (config.children = [])\r\n delete config.label // rowFormItem无需配置label属性\r\n }\r\n if (Array.isArray(config.children)) {\r\n config.children = config.children.map(childItem => this.createIdAndKey(childItem))\r\n }\r\n return item\r\n },\r\n AssembleFormData() {\r\n this.formData = {\r\n fields: deepClone(this.drawingList),\r\n ...this.formConf\r\n }\r\n },\r\n generate(data) {\r\n // 设置要运行的方法\r\n const func = this[`exec${titleCase(this.operationType)}`]\r\n this.generateConf = data\r\n // 运行方法\r\n func && func(data)\r\n },\r\n execRun(data) {\r\n this.AssembleFormData()\r\n this.drawerVisible = true\r\n },\r\n execDownload(data) {\r\n // console.log(data)\r\n const codeStr = this.generateCode()\r\n const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })\r\n saveAs(blob, data.fileName)\r\n },\r\n execCopy(data) {\r\n document.getElementById('copyNode').click()\r\n },\r\n empty() {\r\n this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(\r\n () => {\r\n this.drawingList = []\r\n this.idGlobal = 100\r\n }).catch(() => {})\r\n },\r\n drawingItemCopy(item, list) {\r\n let clone = deepClone(item)\r\n clone = this.createIdAndKey(clone)\r\n list.push(clone)\r\n this.activeFormItem(clone)\r\n },\r\n drawingItemDelete(index, list) {\r\n list.splice(index, 1)\r\n this.$nextTick(() => {\r\n const len = this.drawingList.length\r\n if (len) {\r\n this.activeFormItem(this.drawingList[len - 1])\r\n }\r\n })\r\n },\r\n generateCode() {\r\n const { type } = this.generateConf\r\n this.AssembleFormData()\r\n const script = vueScript(makeUpJs(this.formData, type))\r\n const html = vueTemplate(makeUpHtml(this.formData, type))\r\n const css = cssStyle(makeUpCss(this.formData))\r\n return beautifier.html(html + script + css, beautifierConf.html)\r\n },\r\n showJson() {\r\n this.AssembleFormData() // 拷贝值到this.formData\r\n this.jsonDrawerVisible = true\r\n },\r\n download() {\r\n this.dialogVisible = true\r\n this.showFileName = true\r\n this.operationType = 'download'\r\n },\r\n run() {\r\n this.dialogVisible = true\r\n this.showFileName = false\r\n this.operationType = 'run'\r\n },\r\n copy() {\r\n this.dialogVisible = true\r\n this.showFileName = false\r\n this.operationType = 'copy'\r\n },\r\n tagChange(newTag) {\r\n newTag = this.cloneComponent(newTag)\r\n const config = newTag.__config__\r\n newTag.__vModel__ = this.activeData.__vModel__\r\n config.formId = this.activeId\r\n config.span = this.activeData.__config__.span\r\n this.activeData.__config__.tag = config.tag\r\n this.activeData.__config__.tagIcon = config.tagIcon\r\n this.activeData.__config__.document = config.document\r\n if (typeof this.activeData.__config__.defaultValue === typeof config.defaultValue) {\r\n config.defaultValue = this.activeData.__config__.defaultValue\r\n }\r\n Object.keys(newTag).forEach(key => {\r\n if (this.activeData[key] !== undefined) {\r\n newTag[key] = this.activeData[key]\r\n }\r\n })\r\n this.activeData = newTag\r\n this.updateDrawingList(newTag, this.drawingList)\r\n },\r\n updateDrawingList(newTag, list) {\r\n const index = list.findIndex(item => item.__config__.formId === this.activeId)\r\n if (index > -1) {\r\n list.splice(index, 1, newTag)\r\n } else {\r\n list.forEach(item => {\r\n if (Array.isArray(item.__config__.children)) this.updateDrawingList(newTag, item.__config__.children)\r\n })\r\n }\r\n },\r\n refreshJson(data) {\r\n this.drawingList = deepClone(data.fields)\r\n delete data.fields\r\n this.formConf = data\r\n }\r\n }\r\n}\r\n",null]} |