{"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>"]}]}