| 1 |
- {"remainingRequest":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\src\\views\\system\\fromModeling\\package\\components\\KFormDesign\\index.vue?vue&type=style&index=0&id=cb847434&lang=css&","dependencies":[{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\src\\views\\system\\fromModeling\\package\\components\\KFormDesign\\index.vue","mtime":1688959515679},{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\node_modules\\css-loader\\dist\\cjs.js","mtime":1688725399018},{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1688725423149},{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\node_modules\\postcss-loader\\src\\index.js","mtime":1688725407590},{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1688725391035},{"path":"E:\\mec-cloud_IntelligentManufacturing_CRM\\mec-cloud_IntelligentManufacturing_CRM\\ruoyi-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":1688725415411}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgouZm9ybS1kZXNpZ25lci1jb250YWluZXItOTEzNjA3NjQ4Njg0MTUyNyAuY29udGVudCBhc2lkZSwgLmstZm9ybS1idWlsZC05MTM2MDc2NDg2ODQxNTI3IC5jb250ZW50IGFzaWRlIHsKICAgIC13ZWJraXQtYm94LXNoYWRvdzogMCAwIDFweCAxcHggI2NjYzsKICAgIGJveC1zaGFkb3c6IDAgMCAxcHggMXB4ICNjY2M7CiAgICB3aWR0aDogMzAwcHggIWltcG9ydGFudDsKICAgIGhlaWdodDogMTAwJTsKfQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6fA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/views/system/fromModeling/package/components/KFormDesign","sourcesContent":["<template>\n <a-config-provider :locale=\"locale\">\n <div class=\"form-designer-container-9136076486841527\" v-if=\"loadState\">\n <!-- <k-header v-if=\"showHead\" :title=\"title\" /> -->\n <!-- 操作区域 start -->\n <operatingArea\n v-if=\"toolbarsTop\"\n :showToolbarsText=\"showToolbarsText\"\n :toolbars=\"toolbars\"\n @handleSave=\"handleSave\"\n @handlePreview=\"handlePreview\"\n @handleOpenImportJsonModal=\"handleOpenImportJsonModal\"\n @handleOpenCodeModal=\"handleOpenCodeModal\"\n @handleOpenJsonModal=\"handleOpenJsonModal\"\n @handleReset=\"handleReset\"\n @handleClose=\"handleClose\"\n @handleUndo=\"handleUndo\"\n @handleRedo=\"handleRedo\"\n >\n <template slot=\"left-action\">\n <slot name=\"left-action\"></slot>\n </template>\n\n <template slot=\"right-action\">\n <slot name=\"right-action\"></slot>\n </template>\n </operatingArea>\n <!-- 操作区域 end -->\n <div\n class=\"content\"\n :class=\"{\n 'show-head': showHead,\n 'toolbars-top': toolbarsTop,\n 'show-head-and-toolbars-top': toolbarsTop && showHead\n }\"\n >\n <!-- 左侧控件区域 start -->\n <aside class=\"left\">\n <a-collapse\n @change=\"collapseChange\"\n :defaultActiveKey=\"collapseDefaultActiveKey\"\n >\n <!-- 基础控件 start -->\n <a-collapse-panel\n v-for=\"(item, index) in schemaGroup\"\n :header=\"item.title\"\n :key=\"index\"\n >\n <collapseItem\n :list=\"item.list\"\n @generateKey=\"generateKey\"\n @handleListPush=\"handleListPush\"\n @start=\"handleStart\"\n />\n </a-collapse-panel>\n <!-- 基础控件 end -->\n </a-collapse>\n </aside>\n <!-- 左侧控件区域 end -->\n\n <!-- 中间面板区域 start -->\n <section>\n <!-- 操作区域 start -->\n <operatingArea\n v-if=\"!toolbarsTop\"\n :showToolbarsText=\"showToolbarsText\"\n :toolbars=\"toolbars\"\n @handleSave=\"handleSave\"\n @handlePreview=\"handlePreview\"\n @handleOpenImportJsonModal=\"handleOpenImportJsonModal\"\n @handleOpenCodeModal=\"handleOpenCodeModal\"\n @handleOpenJsonModal=\"handleOpenJsonModal\"\n @handleReset=\"handleReset\"\n @handleClose=\"handleClose\"\n @handleUndo=\"handleUndo\"\n @handleRedo=\"handleRedo\"\n >\n <template slot=\"left-action\">\n <slot name=\"left-action\"></slot>\n </template>\n\n <template slot=\"right-action\">\n <slot name=\"right-action\"></slot>\n </template>\n </operatingArea>\n <!-- 操作区域 end -->\n <k-form-component-panel\n :class=\"{ 'no-toolbars-top': !toolbarsTop }\"\n :data=\"data\"\n :selectItem=\"selectItem\"\n :noModel=\"noModel\"\n :hideModel=\"hideModel\"\n :startType=\"startType\"\n ref=\"KFCP\"\n @handleSetSelectItem=\"handleSetSelectItem\"\n />\n <!-- 操作区域 start -->\n <k-json-modal ref=\"jsonModal\" />\n <k-code-modal ref=\"codeModal\" />\n <importJsonModal ref=\"importJsonModal\" />\n <previewModal ref=\"previewModal\" />\n </section>\n <!-- 中间面板区域 end -->\n\n <!-- 右侧控件属性区域 start -->\n <aside class=\"right\">\n <a-tabs\n :activeKey=\"activeKey\"\n @change=\"changeTab\"\n :tabBarStyle=\"{ margin: 0 }\"\n >\n <a-tab-pane :key=\"1\" tab=\"表单属性设置\">\n <formProperties\n :config=\"data.config\"\n :previewOptions=\"previewOptions\"\n />\n </a-tab-pane>\n <a-tab-pane :key=\"2\" tab=\"控件属性设置\">\n <formItemProperties\n class=\"form-item-properties\"\n :selectItem=\"selectItem\"\n :hideModel=\"hideModel\"\n />\n </a-tab-pane>\n </a-tabs>\n </aside>\n <!-- 右侧控件属性区域 end -->\n </div>\n <!-- <k-footer /> -->\n </div>\n </a-config-provider>\n</template>\n<script>\n/*\n * author kcz\n * date 2019-11-20\n * description 表单设计器\n */\nimport kHeader from \"./module/header\";\nimport operatingArea from \"./module/operatingArea\";\n\n// import kFooter from \"./module/footer\";\nimport kFormComponentPanel from \"./module/formComponentPanel\";\nimport kJsonModal from \"./module/jsonModal\";\nimport kCodeModal from \"./module/codeModal\";\nimport collapseItem from \"./module/collapseItem\";\nimport importJsonModal from \"./module/importJsonModal\";\nimport previewModal from \"../KFormPreview/index.vue\";\nimport zhCN from \"ant-design-vue/lib/locale-provider/zh_CN\";\nimport { Modal, message } from \"ant-design-vue\";\nimport { revoke, nodeSchema } from \"../../utils/index\";\nimport formItemProperties from \"./module/formItemProperties\";\nimport formProperties from \"./module/formProperties\";\n\nexport default {\n name: \"KFormDesign\",\n props: {\n title: {\n type: String,\n default: \"表单设计器22222 --by kcz\"\n },\n showHead: {\n type: Boolean,\n default: true\n },\n hideResetHint: {\n type: Boolean,\n default: false\n },\n toolbarsTop: {\n type: Boolean,\n default: false\n },\n toolbars: {\n type: Array,\n default: () => [\n \"save\",\n \"preview\",\n \"importJson\",\n \"exportJson\",\n \"exportCode\",\n \"reset\",\n \"close\",\n \"undo\",\n \"redo\"\n ]\n },\n showToolbarsText: {\n type: Boolean,\n default: false\n },\n hideModel: {\n // 隐藏数据字段\n type: Boolean,\n default: false\n }\n },\n data() {\n return {\n locale: zhCN,\n loadState: false,\n activeKey: 1,\n updateTime: 0,\n updateRecordTime: 0,\n startType: \"\",\n noModel: [\n \"button\",\n \"divider\",\n \"card\",\n \"grid\",\n \"tabs\",\n \"table\",\n \"alert\",\n \"text\",\n \"html\"\n ],\n schemaGroup: [],\n data: {\n list: [],\n config: {\n layout: \"horizontal\",\n labelCol: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4, xxl: 4 },\n labelWidth: 100,\n labelLayout: \"flex\",\n wrapperCol: { xs: 18, sm: 18, md: 18, lg: 18, xl: 18, xxl: 18 },\n hideRequiredMark: false,\n customStyle: \"\"\n }\n },\n previewOptions: {\n width: 850\n },\n selectItem: {\n key: \"\"\n }\n };\n },\n components: {\n kHeader,\n // kFooter,\n operatingArea,\n collapseItem,\n kJsonModal,\n kCodeModal,\n importJsonModal,\n previewModal,\n kFormComponentPanel,\n formItemProperties,\n formProperties\n },\n watch: {\n data: {\n handler(e) {\n this.$nextTick(() => {\n revoke.push(e);\n });\n },\n deep: true,\n immediate: true\n }\n },\n computed: {\n collapseDefaultActiveKey() {\n // 计算当前展开的控件列表\n const defaultActiveKey = window.localStorage.getItem(\n \"collapseDefaultActiveKey\"\n );\n if (defaultActiveKey) {\n return defaultActiveKey.split(\",\");\n } else {\n return [\"1\"];\n }\n }\n },\n methods: {\n generateKey(list, index) {\n // 生成key值\n const key = list[index].type + \"_\" + new Date().getTime();\n this.$set(list, index, {\n ...list[index],\n key,\n model: key\n });\n if (this.noModel.includes(list[index].type)) {\n // 删除不需要的model属性\n delete list[index].model;\n }\n },\n handleListPush(item) {\n // 双击控件按钮push到list\n // 生成key值\n if (!this.selectItem.key) {\n // 在没有选择表单时，将数据push到this.data.list\n const key = item.type + \"_\" + new Date().getTime();\n item = {\n ...item,\n key,\n model: key\n };\n if (this.noModel.includes(item.type)) {\n // 删除不需要的model属性\n delete item.model;\n }\n const itemString = JSON.stringify(item);\n const record = JSON.parse(itemString);\n // 删除icon及compoent属性\n delete record.icon;\n delete record.component;\n this.data.list.push(record);\n this.handleSetSelectItem(record);\n return false;\n }\n this.$refs.KFCP.handleCopy(false, item);\n },\n handleOpenJsonModal() {\n // 打开json预览模态框\n this.$refs.jsonModal.jsonData = this.data;\n this.$refs.jsonModal.visible = true;\n },\n handleOpenCodeModal() {\n // 打开代码预览模态框\n this.$refs.codeModal.jsonData = this.data;\n this.$refs.codeModal.visible = true;\n },\n handleOpenImportJsonModal() {\n // 打开json预览模态框\n this.$refs.importJsonModal.jsonData = this.data;\n this.$refs.importJsonModal.handleSetSelectItem = this.handleSetSelectItem;\n this.$refs.importJsonModal.visible = true;\n },\n handlePreview() {\n // 打开预览模态框\n this.$refs.previewModal.jsonData = this.data;\n this.$refs.previewModal.previewWidth = this.previewOptions.width;\n this.$refs.previewModal.visible = true;\n },\n handleReset() {\n // 清空\n if (this.hideResetHint) {\n // 不显示提示直接清空\n this.resetData();\n return;\n }\n\n Modal.confirm({\n title: \"警告\",\n content: \"是否确认清空内容?\",\n okText: \"是\",\n okType: \"danger\",\n cancelText: \"否\",\n onOk: () => {\n this.resetData();\n }\n });\n },\n resetData() {\n this.data = {\n list: [],\n config: {\n layout: \"horizontal\",\n labelCol: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4, xxl: 4 },\n labelWidth: 100,\n labelLayout: \"flex\",\n wrapperCol: { xs: 18, sm: 18, md: 18, lg: 18, xl: 18, xxl: 18 },\n hideRequiredMark: false,\n customStyle: \"\"\n }\n };\n this.handleSetSelectItem({ key: \"\" });\n message.success(\"已清空\");\n },\n handleSetSelectItem(record) {\n // 操作间隔不能低于100毫秒\n const newTime = new Date().getTime();\n if (newTime - this.updateTime < 100) {\n return false;\n }\n\n this.updateTime = newTime;\n\n // 设置selectItem的值\n this.selectItem = record;\n\n // 判断是否选中控件，如果选中则弹出属性面板，否则关闭属性面板\n if (record.key) {\n this.startType = record.type;\n this.changeTab(2);\n } else {\n this.changeTab(1);\n }\n },\n /**\n * @description: 切换属性设置面板\n * @param {*}\n * @return {*}\n */\n\n changeTab(e) {\n this.activeKey = e;\n },\n /**\n * @Author: kcz\n * @description: 遍历json结构，获取所有字段\n * @param {*}\n * @return {*} Array\n */\n getFieldSchema() {\n const fields = [];\n const traverse = array => {\n array.forEach(element => {\n if (element.type === \"grid\" || element.type === \"tabs\") {\n // 栅格布局\n element.columns.forEach(item => {\n traverse(item.list);\n });\n } else if (element.type === \"card\") {\n // 卡片布局\n traverse(element.list);\n } else if (element.type === \"batch\") {\n // 动态表格内复制\n traverse(element.list);\n } else if (element.type === \"table\") {\n // 表格布局\n element.trs.forEach(item => {\n item.tds.forEach(val => {\n traverse(val.list);\n });\n });\n } else {\n if (element.model) {\n fields.push(element);\n }\n }\n });\n };\n traverse(this.data.list);\n return fields;\n },\n handleSetData(data) {\n // 用于父组件赋值\n try {\n if (typeof data !== \"object\") {\n return false;\n } else {\n this.data = data;\n // 导入json数据后，需要清除已选择key\n this.handleSetSelectItem({ key: \"\" });\n }\n return true;\n } catch (error) {\n console.error(error);\n return false;\n }\n },\n collapseChange(val) {\n // 点击collapse时，保存当前collapse状态\n window.localStorage.setItem(\"collapseDefaultActiveKey\", val);\n },\n handleStart(type) {\n this.startType = type;\n },\n\n /**\n * @description: 撤销\n * @param {*}\n * @return {*}\n */\n handleUndo() {\n const record = revoke.undo();\n if (!record) {\n return false;\n }\n this.data = record;\n\n this.handleSetSelectItem({ key: \"\" });\n },\n\n /**\n * @description: 重做\n * @param {*}\n * @return {*}\n */\n handleRedo() {\n const record = revoke.redo();\n if (!record) {\n return false;\n }\n this.data = record;\n },\n\n handleSave() {\n // 保存函数\n this.$emit(\"save\", JSON.stringify(this.data));\n },\n getValue() {\n // 获取数据\n return this.data;\n },\n handleClose() {\n this.$emit(\"close\");\n }\n },\n created() {\n this.loadState = true;\n nodeSchema.addComputed(this.schemaGroup);\n }\n};\n</script>\n<style>\n.form-designer-container-9136076486841527 .content aside, .k-form-build-9136076486841527 .content aside {\n -webkit-box-shadow: 0 0 1px 1px #ccc;\n box-shadow: 0 0 1px 1px #ccc;\n width: 300px !important;\n height: 100%;\n}\n</style>"]}]}
|
