@idooel/components 0.0.1-beta.103 → 0.0.1-beta.105

package/dist/@idooel/components.esm.js

@@ -2727,7 +2727,7 @@ var script$A = {
     },
     setCurrentTableSelection(props = {}) {
       if (this.currentTableMode === 'radio') {
-        this.$set(this, 'currentTableSelection', type.isObject(props) ? props : {});
+        this.$set(this, 'currentTableSelection', type.isArray(props) && props.length > 0 ? props[0] : type.isObject(props) ? props : {});
       } else {
         this.$set(this, 'currentTableSelection', type.isArray(props) ? props : []);
       }
@@ -3144,11 +3144,11 @@ __vue_render__$A._withStripped = true;
   /* style */
   const __vue_inject_styles__$A = function (inject) {
     if (!inject) return
-    inject("data-v-7209faac_0", { source: ".ele.model__tree-table[data-v-7209faac] {\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper[data-v-7209faac] {\n  width: 240px;\n  background: #fff;\n  flex-shrink: 0;\n  padding: 16px;\n  box-sizing: border-box;\n  margin-right: 16px;\n  overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container[data-v-7209faac] {\n  width: 100%;\n  min-width: 0;\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar[data-v-7209faac] {\n  width: 100%;\n  height: 8px;\n  background: var(--idooel-primary-color);\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text[data-v-7209faac] {\n  text-align: left;\n  padding: 16px;\n  font-size: 16px;\n  font-weight: bold;\n  background: #fff;\n  border-bottom: 1px solid;\n  border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper[data-v-7209faac] {\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-7209faac] {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 16px;\n  padding-bottom: 8px;\n  padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm[data-v-7209faac] {\n  cursor: pointer;\n  color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/models/tree-table-model/src/index.vue","index.vue"],"names":[],"mappings":"AAonBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACnnBA;ADqnBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACnnBA;ADsnBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACpnBA;ADsnBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACpnBA;ADsnBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACpnBA;ADunBA;EACA,gBAAA;ACrnBA;ADsnBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACpnBA;ADunBA;EACA,eAAA;EACA,kCAAA;ACrnBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <section class=\"ele model__tree-table\">\n    <section class=\"model__tree-table--container\" v-if=\"showTree\">\n      <div class=\"model__tree--title\"></div>\n      <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\n        <ele-tree\n          :tree-data=\"treeData\"\n          :defaultExpandedKeys=\"defaultExpandedKeys\"\n          :defaultSelectedKeys=\"defaultSelectedKeys\"\n          @select=\"selectTreeNode\"\n          :replace-fields=\"mapFields\">\n        </ele-tree>\n      </section>\n    </section>\n    <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\n      <div class=\"model__table--title\" v-if=\"title\">\n        <template v-if=\"titleMode\">\n          <div :class=\"[`model__table-title--${titleMode}`]\"></div>\n        </template>\n        <template v-else>\n          <div class=\"model__table-title--text\">{{ title }}</div>\n        </template>\n      </div>\n      <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\n        <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\n        <div class=\"button-row__area\">\n          <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\n          <slot name=\"tags\"></slot>\n          <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\n        </div>\n        <ele-table\n          v-on=\"overrideTableEvent\"\n          :ref=\"tableRef\"\n          :row-selection=\"rowSelection\"\n          :loading=\"loading\" \n          :columns=\"columns\"\n          :total=\"total\"\n          :x=\"x\"\n          :y=\"y\"\n          :bordered=\"setBorder\"\n          :height=\"tableHeight\"\n          :width=\"tableWidth\"\n          :actions=\"actions\"\n          :pageSize=\"pageSize\"\n          :pageSizeOptions=\"pageSizeOptions\"\n          :data-source=\"tableData\"\n          @change-page=\"onChangePage\"\n        ></ele-table>\n      </section>\n    </section>\n    <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\n    <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\n    <ele-modal-table\n      :meta=\"modalTableMeta\"\n      v-model=\"modalTableValue\"\n      v-on=\"overrideModalTableEvent\"\n    ></ele-modal-table>\n  </section>\n</template>\n\n<script>\nimport { type, net, util } from '@idooel/shared'\nimport { v4 as uuidv4 } from 'uuid'\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\nexport default {\n  name: 'ele-tree-table-model',\n  props: {\n    title: {\n      type: [Object, String]\n    },\n    overHeight: {\n      type: Number,\n      default: 0\n    },\n    treeMeta: {\n      type: Object,\n      default: () => ({})\n    },\n    searchMeta: {\n      type: Object,\n      default: () => ({})\n    },\n    buttonGroupMeta: {\n      typeof: Object,\n      default: () => ({})\n    },\n    tableMeta: {\n      type: Object,\n      default: () => ({})\n    },\n    createMeta: {\n      type: Object\n    },\n    editMeta: {\n      type: Object\n    }\n  },\n  provide () {\n    return {\n      requestTreeData: this.requestTreeData,\n      requestTableData: this.requestTableData,\n      [CONTEXT]: () => {\n        return {\n          exposed: this.exposed\n        }\n      }\n    }\n  },\n  data () {\n    return {\n      tableHeight: 0,\n      tableWidth: 0,\n      modalFormMeta: {},\n      modalFormValue: false,\n      treeData: [],\n      tableData: [],\n      defaultExpandedKeys: [],\n      defaultSelectedKeys: [],\n      replaceFields: {\n        title: 'title',\n        children: 'children',\n        key: 'id'\n      },\n      loading: false,\n      total: 0,\n      tableQuerys: {},\n      resizeObserverModelTableWrapper: null,\n      modelTableWrapperHeight: 0,\n      currentTreeNodeData: {},\n      currentRowData: {},\n      treeWrapperHeight: 0,\n      currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\n      showFsmModal: false,\n      fsmMeta: {},\n      fsmContextProp: {},\n      modalTableValue: false,\n      modalTableMeta: {}\n    }\n  },\n  computed: {\n    setBorder () {\n      return this.tableMeta.bordered === false ? false : true\n    },\n    rowSelection () {\n      if (!this.currentTableMode) return void 0\n      return {\n        columnTitle: this.currentSelectionColumn.columnTitle,\n        fixed: true,\n        type: this.currentTableMode,\n        onChange: this.onChangeTableSelection\n      }\n    },\n    currentSelectionColumn () {\n      const { multiple } = this.tableMeta\n      const target = this.columns.find(item => Object.keys(item).includes('multiple'))\n      const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\n      if (target) {\n        return target\n      } else if (isGlobalExistMultiple) {\n        return { multiple }\n      }\n      return void 0\n    },\n    x () {\n      const { x } = this.tableMeta\n      return x\n    },\n    y () {\n      const { y } = this.tableMeta\n      return y\n    },\n    currentTableMode () {\n      if (!this.currentSelectionColumn) return void 0\n      const { multiple } = this.currentSelectionColumn\n      if (type.isBool(multiple)) {\n        if (multiple) {\n          return 'checkbox'\n        } else {\n          return 'radio'\n        }\n      } else {\n        return void 0\n      }\n    },\n    modelTableContainerRef () {\n      return uuidv4()\n    },\n    titleMode () {\n      if (type.isObject(this.title)) {\n        const { mode = '' } = this.title\n        return mode\n      }\n      return void 0\n    },\n    tableRef () {\n      return uuidv4()\n    },\n    exposed () {\n      return {\n        showModalForm: this.showModalForm,\n        closeModalForm: this.closeModalForm,\n        showModalTable: this.showModalTable,\n        closeModalTable: this.closeModalTable,\n        currentTableSelection: this.currentTableSelection,\n        currentTreeNode: this.currentTreeNodeData,\n        requestTableData: this.requestTableData,\n        refreshTreeData: this.refreshTreeData,\n        querys: this.tableQuerys,\n        currentRowData: this.currentRowData,\n        getCurrentRowData: this.getCurrentRowData,\n        setCurrentRowData: this.setCurrentRowData,\n        setCurrentTableSelection: this.setCurrentTableSelection,\n        getCurrentTableSelection: this.getCurrentTableSelection,\n        cleanCurrentModelEffect: this.cleanCurrentModelEffect,\n        route: this.$route,\n        _route: this.$route.query,\n        _routeMeta: this.$route.meta\n      }\n    },\n    overrideTableEvent () {\n      const events = this.actions.reduce((ret, action) => {\n        ret[action.eventName || action.key] = (e) => {\n          this.setCurrentRowData(e.exposed.currentRowData)\n          const { target } = action\n          const targetMeta = this.findMetaByKey(target)\n          const { mode } = targetMeta\n          mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\n          this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\n        }\n        return ret\n      }, {})\n      return {\n        ...this.$listeners,\n        ...events,\n        [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\n      }\n    },\n    overrideModalFormEvent () {\n      const { footerMeta } = this.modalFormMeta\n      const { elements = [] } = footerMeta || {}\n      const eles = type.isFunction(elements) ? elements.call(this) : elements\n      const events = eles.reduce((ret, ele) => {\n        ret[ele.eventName] = (e = {}) => {\n          if (ele.eventName === 'cancel') {\n            this.closeModalForm()\n          } else {\n            const { exposed = {} } = e\n            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\n          }\n        }\n        return ret\n      }, {})\n      return {\n        ...events\n      }\n    },\n    overrideModalTableEvent () {\n      const { footerMeta } = this.modalTableMeta\n      const { elements = [] } = footerMeta || {}\n      const eles = type.isFunction(elements) ? elements.call(this) : elements\n      const events = eles.reduce((ret, ele) => {\n        ret[ele.eventName] = (e = {}) => {\n          if (ele.eventName === 'cancel') {\n            this.closeModalTable()\n          } else {\n            const { exposed = {} } = e\n            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\n          }\n        }\n        return ret\n      }, {})\n      return {\n        ...events,\n        exposed: this.exposed\n      }\n    },\n    overrideButtonGroupEvent () {\n      const events = this.getButtonGroupElements.reduce((ret, ele) => {\n        ret[ele.eventName] = (e) => {\n          this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\n        }\n        return ret\n      }, {})\n      return {\n        ...this.$listeners,\n        ...events,\n        [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\n        exposed: this.exposed\n      }\n    },\n    showTree () {\n      return !!Object.keys(this.treeMeta).length\n    },\n    buttonGroup () {\n      return uuidv4()\n    },\n    searchArea () {\n      return uuidv4()\n    },\n    modelTreeWrapper () {\n      return uuidv4()\n    },\n    modelTableWrapper () {\n      return uuidv4()\n    },\n    actions () {\n      const { operations } = this.tableMeta\n      if (operations) {\n        return operations.elements\n      } else {\n        return []\n      }\n    },\n    pageSize () {\n      const { page = {} } = this.tableMeta\n      return page.pageSize || 10\n    },\n    pageSizeOptions () {\n      const { page = {} } = this.tableMeta\n      return page.pageSizeOptions || ['10', '20', '30', '40']\n    },\n    columns () {\n      const { columns, operations } = this.tableMeta\n      if (type.get(columns) === 'array') {\n        const columnsOptions = columns.map(item => {\n          const { mode = 'text' } = item\n          if (item.render) {\n            return {\n              ...item,\n              customRender: (text, record, index) => {\n                const { $createElement } = this\n                return item.render.call(this, \n                  { h: $createElement, ctx: this },\n                  text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \n                  record, index)\n              }\n            }\n          } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\n            const { [`${mode}Meta`]: modeMeta } = item\n            return {\n              ...item,\n              customRender: (text, record, index) => {\n                return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\n              }\n            }\n          }\n          return {\n            ...item\n          }\n        })\n        if (operations) {\n          return [\n            ...columnsOptions,\n            {\n              title: '操作',\n              width: operations.width,\n              key: 'action',\n              fixed: 'right',\n              scopedSlots: { customRender: 'action' }\n            }\n          ]\n        }\n        return columnsOptions\n      } else {\n        console.error('Error: columns is invalid, please check it')\n        return []\n      }\n    },\n    getButtonGroupElements () {\n      const { elements } = this.buttonGroupMeta\n      if (type.get(elements) === 'function') {\n        return elements.call(this)\n      } else if (type.get(elements) === 'array') {\n        return elements\n      } else {\n        return []\n      }\n    },\n    mapFields () {\n      const { replaceFields = {} } = this.treeMeta\n      const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\n      return mapFields\n    }\n  },\n  async created () {\n    if (this.showTree) {\n      this.treeData = await this.requestTreeData()\n      const [defaultTreeNode = {}] = this.treeData\n      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.currentTreeNodeData = defaultTreeNode\n    }\n    const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\n    const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\n    const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\n    if (overrideInit) {\n      this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\n    } else {\n      this.tableData = await this.requestTableData(initQuerys)\n    }\n  },\n  methods: {\n    async refreshTreeData () {\n      this.treeData = await this.requestTreeData()\n      const [defaultTreeNode = {}] = this.treeData\n      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.currentTreeNodeData = defaultTreeNode\n    },\n    dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\n      switch (mode) {\n        case BUILT_IN_TRIGGER.FSM:\n          this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { \n            url: 'api-fsm/workbench/fsm/auditFlow',\n            requestType: 'GET',\n            fieldMap: {\n              modelCode: 'modelCode',\n              businessId: 'businessId'\n            }\n          } : modeMeta)\n          break\n        case BUILT_IN_TRIGGER.ELE_MODAL_FORM:\n          this.modalFormMeta = modeMeta\n          this.showModalForm(modeMeta)\n          break\n        case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:\n          this.modalTableMeta = modeMeta\n          this.showModalTable(modeMeta)\n          break\n        default:\n          break\n      }\n    },\n    handleCloseFsmModal () {\n      this.showFsmModal = false\n    },\n    [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\n      this.fsmMeta = meta\n      this.fsmContextProp = record\n      this.showFsmModal = true\n    },\n    onChangeTableSelection (_, selectedRows = []) {\n      if (this.currentTableMode === 'radio') {\n        this.setCurrentTableSelection(selectedRows)\n        this.$emit('on-change-table-selection', this.currentTableSelection)\n        this.$emit('x:refresh-exposed', { exposed: this.exposed })\n      } else {\n        this.setCurrentTableSelection(selectedRows)\n        this.$emit('on-change-table-selection', this.currentTableSelection)\n        this.$emit('x:refresh-exposed', { exposed: this.exposed })\n      }\n    },\n    setCurrentTableSelection (props = {}) {\n      if (this.currentTableMode === 'radio') {\n        this.$set(this, 'currentTableSelection', type.isObject(props) ? props : {})\n      } else {\n        this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])\n      }\n    },\n    getCurrentTableSelection () {\n      return this.currentTableSelection\n    },\n    setCurrentRowData (props = {}) {\n      this.currentRowData = props\n    },\n    getCurrentRowData () {\n      return this.currentRowData\n    },\n    cleanCurrentModelEffect () {\n      this.setCurrentTableSelection()\n      this.setCurrentRowData({})\n    },\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\n      this.cleanCurrentModelEffect()\n      this.requestTableData()\n    },\n    [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\n      const { record = {} } = props\n      this.currentRowData = record\n      this.setCurrentRowData(record)\n      this.modalFormMeta = this.editMeta\n      this.modalFormValue = true\n    },\n    [BUILT_IN_EVENT_NAMES.CREATE] () {\n      this.modalFormMeta = this.createMeta\n      this.modalFormValue = true\n    },\n    showModalForm (modeMeta = {}) {\n      if (type.isStr(modeMeta)) {\n        const targetMeta = this.findMetaByKey(modeMeta)\n        this.modalFormMeta = targetMeta\n      } else {\n        this.modalFormMeta = modeMeta\n      }\n      this.modalFormValue = true\n    },\n    showModalTable (modeMeta = {}) {\n      console.log('showModalTable', modeMeta)\n      if (type.isStr(modeMeta)) {\n        const targetMeta = this.findMetaByKey(modeMeta)\n        this.modalTableMeta = targetMeta\n      } else {\n        this.modalTableMeta = modeMeta\n      }\n      this.modalTableValue = true\n    },\n    closeModalForm () {\n      this.modalFormValue = false\n    },\n    closeModalTable () {\n      console.log('closeModalTable')\n      this.modalTableValue = false\n    },\n    findMetaByKey (key) {\n      return this.$attrs[key] || {}\n    },\n    handleClickButtonGroup (props) {\n      const { eventName, target } = props\n      const targetMeta = this.findMetaByKey(target)\n      const { mode } = targetMeta\n      mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })\n      this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })\n    },\n    watchViewPort () {\n      const modelTableWrapper = this.$refs[this.modelTableWrapper]\n      const { top } = modelTableWrapper.getBoundingClientRect()\n      this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\n    },\n    async onSearch (props) {\n      const { overrideInit = false } = this.tableMeta\n      this.tableQuerys = Object.assign(this.tableQuerys, props)\n      if (overrideInit) {\n        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n      } else {\n        this.tableData = await this.requestTableData()\n      }\n    },\n    async selectTreeNode (selectedKeys, e) {\n      const { fieldMap } = this.tableMeta\n      this.currentTreeNodeData = e.node.$vnode.data.props.dataRef || {}\n      //@deprecated '_' namespace is deprecated, please use 'exposed' instead\n      const execFieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, exposed: this.exposed, _route: this.exposed._route })\n      const { overrideInit = false } = this.tableMeta\n      if (overrideInit) {\n        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n      } else {\n        this.tableData = await this.requestTableData(execFieldMapRet)\n      }\n    },\n    async requestTreeData () {\n      const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\n      const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\n      const ret = await net[requestType.toLowerCase()](\n        url,\n        { ...params, ...fieldMapRet }\n      ).then(resp => {\n        const { data } = resp || {}\n        return data\n      })\n      return ret\n    },\n    async onChangePage (page, pageSize) {\n      this.tableData = await this.requestTableData({ currentPage: page, pageSize })\n    },\n    async requestTableData (props = {}) {\n      const { url, requestType = 'GET', page = {} } = this.tableMeta\n      const { pageSize = 10 } = page\n      this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)\n      this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\n      this.loading = true\n      const ret = await net[requestType.toLowerCase()](\n        url,\n        this.tableQuerys\n      ).then(resp => {\n        const { data = [], count } = resp || {}\n        this.total = count\n        this.loading = false\n        return (data || []).map(item => {\n          delete item.children\n          return {\n            key: uuidv4(),\n            ...item\n          }\n        })\n      })\n      this.cleanCurrentModelEffect()\n      this.tableData = ret\n      return ret\n    },\n    refreshTreeStatus (props = {}) {},\n    refreshTableStatus (props = {}) {},\n    calculateTableHeight () {\n      const currentViewportHeight = window.innerHeight\n      const tableRef = this.$refs[this.tableRef]\n      const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\n      this.tableWidth = width\n      this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\n    },\n    calculateTreeHeight () {\n      if (!this.showTree) return\n      const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\n      const { height } = modelTableContainerRef.getBoundingClientRect()\n      this.treeWrapperHeight = height\n    }\n  },\n  mounted () {\n    this.calculateTableHeight()\n    this.$nextTick(() => {\n      this.calculateTreeHeight()\n    })\n    this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\n      for (const _ of entries) {\n        requestAnimationFrame(() => {\n          this.calculateTableHeight()\n        })\n      }\n    })\n    this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\n  },\n  destroyed () {\n    this.resizeObserverModelTableWrapper.disconnect()\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n  &.model__tree-table {\n    background: transparent;                                                                                                                                                                                                                 \n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    .model__tree-table--container {\n      .model__tree--wrapper {\n        width: 240px;\n        background: #fff;\n        flex-shrink: 0;\n        padding: 16px;\n        box-sizing: border-box;\n        margin-right: 16px;\n        overflow-y: auto;\n      }\n    }\n    .model__table--container {\n      width: 100%;\n      min-width: 0;\n      background: #fff;\n      .model__table--title {\n        .model__table-title--bar {\n          width: 100%;\n          height: 8px;\n          background: var(--idooel-primary-color);\n          border-top-left-radius: 4px;\n          border-top-right-radius: 4px;\n        }\n        .model__table-title--text {\n          text-align: left;\n          padding: 16px;\n          font-size: 16px;\n          font-weight: bold;\n          background: #fff;\n          border-bottom: 1px solid;\n          border-color: var(--idoole-black-016);\n        }\n      }\n      .model__table--wrapper {\n        background: #fff;\n        .button-row__area {\n          width: 100%;\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          justify-content: space-between;\n          padding-top: 16px;\n          padding-bottom: 8px;\n          padding-right: 16px;\n        }\n        .g-table__wrapper {\n          .fsm {\n            cursor: pointer;\n            color: var(--idooel-primary-color);\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n",".ele.model__tree-table {\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper {\n  width: 240px;\n  background: #fff;\n  flex-shrink: 0;\n  padding: 16px;\n  box-sizing: border-box;\n  margin-right: 16px;\n  overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container {\n  width: 100%;\n  min-width: 0;\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar {\n  width: 100%;\n  height: 8px;\n  background: var(--idooel-primary-color);\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text {\n  text-align: left;\n  padding: 16px;\n  font-size: 16px;\n  font-weight: bold;\n  background: #fff;\n  border-bottom: 1px solid;\n  border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper {\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 16px;\n  padding-bottom: 8px;\n  padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm {\n  cursor: pointer;\n  color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-34cddd52_0", { source: ".ele.model__tree-table[data-v-34cddd52] {\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper[data-v-34cddd52] {\n  width: 240px;\n  background: #fff;\n  flex-shrink: 0;\n  padding: 16px;\n  box-sizing: border-box;\n  margin-right: 16px;\n  overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container[data-v-34cddd52] {\n  width: 100%;\n  min-width: 0;\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar[data-v-34cddd52] {\n  width: 100%;\n  height: 8px;\n  background: var(--idooel-primary-color);\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text[data-v-34cddd52] {\n  text-align: left;\n  padding: 16px;\n  font-size: 16px;\n  font-weight: bold;\n  background: #fff;\n  border-bottom: 1px solid;\n  border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper[data-v-34cddd52] {\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-34cddd52] {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 16px;\n  padding-bottom: 8px;\n  padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm[data-v-34cddd52] {\n  cursor: pointer;\n  color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/models/tree-table-model/src/index.vue","index.vue"],"names":[],"mappings":"AAonBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACnnBA;ADqnBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACnnBA;ADsnBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACpnBA;ADsnBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACpnBA;ADsnBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACpnBA;ADunBA;EACA,gBAAA;ACrnBA;ADsnBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACpnBA;ADunBA;EACA,eAAA;EACA,kCAAA;ACrnBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <section class=\"ele model__tree-table\">\n    <section class=\"model__tree-table--container\" v-if=\"showTree\">\n      <div class=\"model__tree--title\"></div>\n      <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\n        <ele-tree\n          :tree-data=\"treeData\"\n          :defaultExpandedKeys=\"defaultExpandedKeys\"\n          :defaultSelectedKeys=\"defaultSelectedKeys\"\n          @select=\"selectTreeNode\"\n          :replace-fields=\"mapFields\">\n        </ele-tree>\n      </section>\n    </section>\n    <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\n      <div class=\"model__table--title\" v-if=\"title\">\n        <template v-if=\"titleMode\">\n          <div :class=\"[`model__table-title--${titleMode}`]\"></div>\n        </template>\n        <template v-else>\n          <div class=\"model__table-title--text\">{{ title }}</div>\n        </template>\n      </div>\n      <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\n        <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\n        <div class=\"button-row__area\">\n          <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\n          <slot name=\"tags\"></slot>\n          <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\n        </div>\n        <ele-table\n          v-on=\"overrideTableEvent\"\n          :ref=\"tableRef\"\n          :row-selection=\"rowSelection\"\n          :loading=\"loading\" \n          :columns=\"columns\"\n          :total=\"total\"\n          :x=\"x\"\n          :y=\"y\"\n          :bordered=\"setBorder\"\n          :height=\"tableHeight\"\n          :width=\"tableWidth\"\n          :actions=\"actions\"\n          :pageSize=\"pageSize\"\n          :pageSizeOptions=\"pageSizeOptions\"\n          :data-source=\"tableData\"\n          @change-page=\"onChangePage\"\n        ></ele-table>\n      </section>\n    </section>\n    <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\n    <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\n    <ele-modal-table\n      :meta=\"modalTableMeta\"\n      v-model=\"modalTableValue\"\n      v-on=\"overrideModalTableEvent\"\n    ></ele-modal-table>\n  </section>\n</template>\n\n<script>\nimport { type, net, util } from '@idooel/shared'\nimport { v4 as uuidv4 } from 'uuid'\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\nexport default {\n  name: 'ele-tree-table-model',\n  props: {\n    title: {\n      type: [Object, String]\n    },\n    overHeight: {\n      type: Number,\n      default: 0\n    },\n    treeMeta: {\n      type: Object,\n      default: () => ({})\n    },\n    searchMeta: {\n      type: Object,\n      default: () => ({})\n    },\n    buttonGroupMeta: {\n      typeof: Object,\n      default: () => ({})\n    },\n    tableMeta: {\n      type: Object,\n      default: () => ({})\n    },\n    createMeta: {\n      type: Object\n    },\n    editMeta: {\n      type: Object\n    }\n  },\n  provide () {\n    return {\n      requestTreeData: this.requestTreeData,\n      requestTableData: this.requestTableData,\n      [CONTEXT]: () => {\n        return {\n          exposed: this.exposed\n        }\n      }\n    }\n  },\n  data () {\n    return {\n      tableHeight: 0,\n      tableWidth: 0,\n      modalFormMeta: {},\n      modalFormValue: false,\n      treeData: [],\n      tableData: [],\n      defaultExpandedKeys: [],\n      defaultSelectedKeys: [],\n      replaceFields: {\n        title: 'title',\n        children: 'children',\n        key: 'id'\n      },\n      loading: false,\n      total: 0,\n      tableQuerys: {},\n      resizeObserverModelTableWrapper: null,\n      modelTableWrapperHeight: 0,\n      currentTreeNodeData: {},\n      currentRowData: {},\n      treeWrapperHeight: 0,\n      currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\n      showFsmModal: false,\n      fsmMeta: {},\n      fsmContextProp: {},\n      modalTableValue: false,\n      modalTableMeta: {}\n    }\n  },\n  computed: {\n    setBorder () {\n      return this.tableMeta.bordered === false ? false : true\n    },\n    rowSelection () {\n      if (!this.currentTableMode) return void 0\n      return {\n        columnTitle: this.currentSelectionColumn.columnTitle,\n        fixed: true,\n        type: this.currentTableMode,\n        onChange: this.onChangeTableSelection\n      }\n    },\n    currentSelectionColumn () {\n      const { multiple } = this.tableMeta\n      const target = this.columns.find(item => Object.keys(item).includes('multiple'))\n      const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\n      if (target) {\n        return target\n      } else if (isGlobalExistMultiple) {\n        return { multiple }\n      }\n      return void 0\n    },\n    x () {\n      const { x } = this.tableMeta\n      return x\n    },\n    y () {\n      const { y } = this.tableMeta\n      return y\n    },\n    currentTableMode () {\n      if (!this.currentSelectionColumn) return void 0\n      const { multiple } = this.currentSelectionColumn\n      if (type.isBool(multiple)) {\n        if (multiple) {\n          return 'checkbox'\n        } else {\n          return 'radio'\n        }\n      } else {\n        return void 0\n      }\n    },\n    modelTableContainerRef () {\n      return uuidv4()\n    },\n    titleMode () {\n      if (type.isObject(this.title)) {\n        const { mode = '' } = this.title\n        return mode\n      }\n      return void 0\n    },\n    tableRef () {\n      return uuidv4()\n    },\n    exposed () {\n      return {\n        showModalForm: this.showModalForm,\n        closeModalForm: this.closeModalForm,\n        showModalTable: this.showModalTable,\n        closeModalTable: this.closeModalTable,\n        currentTableSelection: this.currentTableSelection,\n        currentTreeNode: this.currentTreeNodeData,\n        requestTableData: this.requestTableData,\n        refreshTreeData: this.refreshTreeData,\n        querys: this.tableQuerys,\n        currentRowData: this.currentRowData,\n        getCurrentRowData: this.getCurrentRowData,\n        setCurrentRowData: this.setCurrentRowData,\n        setCurrentTableSelection: this.setCurrentTableSelection,\n        getCurrentTableSelection: this.getCurrentTableSelection,\n        cleanCurrentModelEffect: this.cleanCurrentModelEffect,\n        route: this.$route,\n        _route: this.$route.query,\n        _routeMeta: this.$route.meta\n      }\n    },\n    overrideTableEvent () {\n      const events = this.actions.reduce((ret, action) => {\n        ret[action.eventName || action.key] = (e) => {\n          this.setCurrentRowData(e.exposed.currentRowData)\n          const { target } = action\n          const targetMeta = this.findMetaByKey(target)\n          const { mode } = targetMeta\n          mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\n          this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\n        }\n        return ret\n      }, {})\n      return {\n        ...this.$listeners,\n        ...events,\n        [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\n      }\n    },\n    overrideModalFormEvent () {\n      const { footerMeta } = this.modalFormMeta\n      const { elements = [] } = footerMeta || {}\n      const eles = type.isFunction(elements) ? elements.call(this) : elements\n      const events = eles.reduce((ret, ele) => {\n        ret[ele.eventName] = (e = {}) => {\n          if (ele.eventName === 'cancel') {\n            this.closeModalForm()\n          } else {\n            const { exposed = {} } = e\n            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\n          }\n        }\n        return ret\n      }, {})\n      return {\n        ...events\n      }\n    },\n    overrideModalTableEvent () {\n      const { footerMeta } = this.modalTableMeta\n      const { elements = [] } = footerMeta || {}\n      const eles = type.isFunction(elements) ? elements.call(this) : elements\n      const events = eles.reduce((ret, ele) => {\n        ret[ele.eventName] = (e = {}) => {\n          if (ele.eventName === 'cancel') {\n            this.closeModalTable()\n          } else {\n            const { exposed = {} } = e\n            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\n          }\n        }\n        return ret\n      }, {})\n      return {\n        ...events,\n        exposed: this.exposed\n      }\n    },\n    overrideButtonGroupEvent () {\n      const events = this.getButtonGroupElements.reduce((ret, ele) => {\n        ret[ele.eventName] = (e) => {\n          this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\n        }\n        return ret\n      }, {})\n      return {\n        ...this.$listeners,\n        ...events,\n        [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\n        exposed: this.exposed\n      }\n    },\n    showTree () {\n      return !!Object.keys(this.treeMeta).length\n    },\n    buttonGroup () {\n      return uuidv4()\n    },\n    searchArea () {\n      return uuidv4()\n    },\n    modelTreeWrapper () {\n      return uuidv4()\n    },\n    modelTableWrapper () {\n      return uuidv4()\n    },\n    actions () {\n      const { operations } = this.tableMeta\n      if (operations) {\n        return operations.elements\n      } else {\n        return []\n      }\n    },\n    pageSize () {\n      const { page = {} } = this.tableMeta\n      return page.pageSize || 10\n    },\n    pageSizeOptions () {\n      const { page = {} } = this.tableMeta\n      return page.pageSizeOptions || ['10', '20', '30', '40']\n    },\n    columns () {\n      const { columns, operations } = this.tableMeta\n      if (type.get(columns) === 'array') {\n        const columnsOptions = columns.map(item => {\n          const { mode = 'text' } = item\n          if (item.render) {\n            return {\n              ...item,\n              customRender: (text, record, index) => {\n                const { $createElement } = this\n                return item.render.call(this, \n                  { h: $createElement, ctx: this },\n                  text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \n                  record, index)\n              }\n            }\n          } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\n            const { [`${mode}Meta`]: modeMeta } = item\n            return {\n              ...item,\n              customRender: (text, record, index) => {\n                return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\n              }\n            }\n          }\n          return {\n            ...item\n          }\n        })\n        if (operations) {\n          return [\n            ...columnsOptions,\n            {\n              title: '操作',\n              width: operations.width,\n              key: 'action',\n              fixed: 'right',\n              scopedSlots: { customRender: 'action' }\n            }\n          ]\n        }\n        return columnsOptions\n      } else {\n        console.error('Error: columns is invalid, please check it')\n        return []\n      }\n    },\n    getButtonGroupElements () {\n      const { elements } = this.buttonGroupMeta\n      if (type.get(elements) === 'function') {\n        return elements.call(this)\n      } else if (type.get(elements) === 'array') {\n        return elements\n      } else {\n        return []\n      }\n    },\n    mapFields () {\n      const { replaceFields = {} } = this.treeMeta\n      const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\n      return mapFields\n    }\n  },\n  async created () {\n    if (this.showTree) {\n      this.treeData = await this.requestTreeData()\n      const [defaultTreeNode = {}] = this.treeData\n      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.currentTreeNodeData = defaultTreeNode\n    }\n    const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\n    const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\n    const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\n    if (overrideInit) {\n      this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\n    } else {\n      this.tableData = await this.requestTableData(initQuerys)\n    }\n  },\n  methods: {\n    async refreshTreeData () {\n      this.treeData = await this.requestTreeData()\n      const [defaultTreeNode = {}] = this.treeData\n      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.currentTreeNodeData = defaultTreeNode\n    },\n    dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\n      switch (mode) {\n        case BUILT_IN_TRIGGER.FSM:\n          this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { \n            url: 'api-fsm/workbench/fsm/auditFlow',\n            requestType: 'GET',\n            fieldMap: {\n              modelCode: 'modelCode',\n              businessId: 'businessId'\n            }\n          } : modeMeta)\n          break\n        case BUILT_IN_TRIGGER.ELE_MODAL_FORM:\n          this.modalFormMeta = modeMeta\n          this.showModalForm(modeMeta)\n          break\n        case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:\n          this.modalTableMeta = modeMeta\n          this.showModalTable(modeMeta)\n          break\n        default:\n          break\n      }\n    },\n    handleCloseFsmModal () {\n      this.showFsmModal = false\n    },\n    [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\n      this.fsmMeta = meta\n      this.fsmContextProp = record\n      this.showFsmModal = true\n    },\n    onChangeTableSelection (_, selectedRows = []) {\n      if (this.currentTableMode === 'radio') {\n        this.setCurrentTableSelection(selectedRows)\n        this.$emit('on-change-table-selection', this.currentTableSelection)\n        this.$emit('x:refresh-exposed', { exposed: this.exposed })\n      } else {\n        this.setCurrentTableSelection(selectedRows)\n        this.$emit('on-change-table-selection', this.currentTableSelection)\n        this.$emit('x:refresh-exposed', { exposed: this.exposed })\n      }\n    },\n    setCurrentTableSelection (props = {}) {\n      if (this.currentTableMode === 'radio') {\n        this.$set(this, 'currentTableSelection', (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {})\n      } else {\n        this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])\n      }\n    },\n    getCurrentTableSelection () {\n      return this.currentTableSelection\n    },\n    setCurrentRowData (props = {}) {\n      this.currentRowData = props\n    },\n    getCurrentRowData () {\n      return this.currentRowData\n    },\n    cleanCurrentModelEffect () {\n      this.setCurrentTableSelection()\n      this.setCurrentRowData({})\n    },\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\n      this.cleanCurrentModelEffect()\n      this.requestTableData()\n    },\n    [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\n      const { record = {} } = props\n      this.currentRowData = record\n      this.setCurrentRowData(record)\n      this.modalFormMeta = this.editMeta\n      this.modalFormValue = true\n    },\n    [BUILT_IN_EVENT_NAMES.CREATE] () {\n      this.modalFormMeta = this.createMeta\n      this.modalFormValue = true\n    },\n    showModalForm (modeMeta = {}) {\n      if (type.isStr(modeMeta)) {\n        const targetMeta = this.findMetaByKey(modeMeta)\n        this.modalFormMeta = targetMeta\n      } else {\n        this.modalFormMeta = modeMeta\n      }\n      this.modalFormValue = true\n    },\n    showModalTable (modeMeta = {}) {\n      console.log('showModalTable', modeMeta)\n      if (type.isStr(modeMeta)) {\n        const targetMeta = this.findMetaByKey(modeMeta)\n        this.modalTableMeta = targetMeta\n      } else {\n        this.modalTableMeta = modeMeta\n      }\n      this.modalTableValue = true\n    },\n    closeModalForm () {\n      this.modalFormValue = false\n    },\n    closeModalTable () {\n      console.log('closeModalTable')\n      this.modalTableValue = false\n    },\n    findMetaByKey (key) {\n      return this.$attrs[key] || {}\n    },\n    handleClickButtonGroup (props) {\n      const { eventName, target } = props\n      const targetMeta = this.findMetaByKey(target)\n      const { mode } = targetMeta\n      mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })\n      this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })\n    },\n    watchViewPort () {\n      const modelTableWrapper = this.$refs[this.modelTableWrapper]\n      const { top } = modelTableWrapper.getBoundingClientRect()\n      this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\n    },\n    async onSearch (props) {\n      const { overrideInit = false } = this.tableMeta\n      this.tableQuerys = Object.assign(this.tableQuerys, props)\n      if (overrideInit) {\n        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n      } else {\n        this.tableData = await this.requestTableData()\n      }\n    },\n    async selectTreeNode (selectedKeys, e) {\n      const { fieldMap } = this.tableMeta\n      this.currentTreeNodeData = e.node.$vnode.data.props.dataRef || {}\n      //@deprecated '_' namespace is deprecated, please use 'exposed' instead\n      const execFieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, exposed: this.exposed, _route: this.exposed._route })\n      const { overrideInit = false } = this.tableMeta\n      if (overrideInit) {\n        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n      } else {\n        this.tableData = await this.requestTableData(execFieldMapRet)\n      }\n    },\n    async requestTreeData () {\n      const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\n      const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\n      const ret = await net[requestType.toLowerCase()](\n        url,\n        { ...params, ...fieldMapRet }\n      ).then(resp => {\n        const { data } = resp || {}\n        return data\n      })\n      return ret\n    },\n    async onChangePage (page, pageSize) {\n      this.tableData = await this.requestTableData({ currentPage: page, pageSize })\n    },\n    async requestTableData (props = {}) {\n      const { url, requestType = 'GET', page = {} } = this.tableMeta\n      const { pageSize = 10 } = page\n      this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)\n      this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\n      this.loading = true\n      const ret = await net[requestType.toLowerCase()](\n        url,\n        this.tableQuerys\n      ).then(resp => {\n        const { data = [], count } = resp || {}\n        this.total = count\n        this.loading = false\n        return (data || []).map(item => {\n          delete item.children\n          return {\n            key: uuidv4(),\n            ...item\n          }\n        })\n      })\n      this.cleanCurrentModelEffect()\n      this.tableData = ret\n      return ret\n    },\n    refreshTreeStatus (props = {}) {},\n    refreshTableStatus (props = {}) {},\n    calculateTableHeight () {\n      const currentViewportHeight = window.innerHeight\n      const tableRef = this.$refs[this.tableRef]\n      const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\n      this.tableWidth = width\n      this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\n    },\n    calculateTreeHeight () {\n      if (!this.showTree) return\n      const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\n      const { height } = modelTableContainerRef.getBoundingClientRect()\n      this.treeWrapperHeight = height\n    }\n  },\n  mounted () {\n    this.calculateTableHeight()\n    this.$nextTick(() => {\n      this.calculateTreeHeight()\n    })\n    this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\n      for (const _ of entries) {\n        requestAnimationFrame(() => {\n          this.calculateTableHeight()\n        })\n      }\n    })\n    this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\n  },\n  destroyed () {\n    this.resizeObserverModelTableWrapper.disconnect()\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n  &.model__tree-table {\n    background: transparent;                                                                                                                                                                                                                 \n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    .model__tree-table--container {\n      .model__tree--wrapper {\n        width: 240px;\n        background: #fff;\n        flex-shrink: 0;\n        padding: 16px;\n        box-sizing: border-box;\n        margin-right: 16px;\n        overflow-y: auto;\n      }\n    }\n    .model__table--container {\n      width: 100%;\n      min-width: 0;\n      background: #fff;\n      .model__table--title {\n        .model__table-title--bar {\n          width: 100%;\n          height: 8px;\n          background: var(--idooel-primary-color);\n          border-top-left-radius: 4px;\n          border-top-right-radius: 4px;\n        }\n        .model__table-title--text {\n          text-align: left;\n          padding: 16px;\n          font-size: 16px;\n          font-weight: bold;\n          background: #fff;\n          border-bottom: 1px solid;\n          border-color: var(--idoole-black-016);\n        }\n      }\n      .model__table--wrapper {\n        background: #fff;\n        .button-row__area {\n          width: 100%;\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          justify-content: space-between;\n          padding-top: 16px;\n          padding-bottom: 8px;\n          padding-right: 16px;\n        }\n        .g-table__wrapper {\n          .fsm {\n            cursor: pointer;\n            color: var(--idooel-primary-color);\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n",".ele.model__tree-table {\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper {\n  width: 240px;\n  background: #fff;\n  flex-shrink: 0;\n  padding: 16px;\n  box-sizing: border-box;\n  margin-right: 16px;\n  overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container {\n  width: 100%;\n  min-width: 0;\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar {\n  width: 100%;\n  height: 8px;\n  background: var(--idooel-primary-color);\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text {\n  text-align: left;\n  padding: 16px;\n  font-size: 16px;\n  font-weight: bold;\n  background: #fff;\n  border-bottom: 1px solid;\n  border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper {\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 16px;\n  padding-bottom: 8px;\n  padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm {\n  cursor: pointer;\n  color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$A = "data-v-7209faac";
+  const __vue_scope_id__$A = "data-v-34cddd52";
   /* module identifier */
   const __vue_module_identifier__$A = undefined;
   /* functional template */
@@ -4976,6 +4976,7 @@ var __vue_render__$v = function () {
                                         width: ele.width,
                                         height: ele.height,
                                         "modal-title": ele.modalTitle,
+                                        "cropper-config": ele.cropperConfig,
                                         "oper-text": ele.operText,
                                         disabled: _vm.executeExpression(
                                           ele._disabled
@@ -5108,11 +5109,11 @@ __vue_render__$v._withStripped = true;
   /* style */
   const __vue_inject_styles__$v = function (inject) {
     if (!inject) return
-    inject("data-v-784922a8_0", { source: ".ele__form--wrapper[data-v-784922a8] {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/form/src/index.vue","index.vue"],"names":[],"mappings":"AAwTA;EACA,gBAAA;ACvTA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele__form--wrapper\">\n    <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\n      <a-row :gutter=\"24\">\n        <template v-for=\"ele in elements\">\n          <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\n            <template v-if=\"ele.type == 'Input'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-input \n                  @change=\"onChange($event, ele)\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  :max-length=\"ele.maxLength\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-input>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Textarea'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-textarea \n                  @change=\"onChange($event, ele)\"\n                  :max-length=\"ele.maxLength\"\n                  :autosize=\"ele.autosize\"\n                  :disabled=\"executeExpression(ele._disabled)\"\n                  :allow-clear=\"ele.allowClear\"\n                  :placeholder=\"ele.placeholder\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\n                  style=\"width:100%;\">\n                </ele-textarea>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Select'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-select \n                  :data-source=\"ele.optionList\" \n                  :disabled=\"executeExpression(ele._disabled)\"\n                  :multiple=\"ele.multiple\"\n                  :mode=\"ele.mode\"\n                  :code=\"ele.code\"\n                  :init=\"ele.init\"\n                  :url=\"ele.url\"\n                  :params=\"ele.params\" \n                  @change=\"onChange($event, ele)\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-select>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-upload'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  :ext=\"ele.ext\"\n                  :multiple=\"ele.multiple\"\n                  :accept=\"ele.accept\"\n                  :extensions=\"ele.extensions\"\n                  :size=\"ele.size\"\n                  :icon=\"ele.icon\"\n                  :url=\"ele.url\"\n                  :message=\"ele.message\" \n                  style=\"width:100%;\">\n                </ele-upload>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-date-range'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-date-range \n                :disabled=\"executeExpression(ele._disabled)\" \n                v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                style=\"width:100%;\">\n              </ele-date-range>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-date'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-date\n                  :format=\"ele.format\"\n                  :mode=\"ele.mode\"\n                  :show-time=\"ele.showTime\"\n                  :show-today=\"ele.showToday\"\n                  :value-format=\"ele.valueFormat\"\n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-date>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'SelectEntity'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-select-entity \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-select-entity>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-input-number \n                  @change=\"onChange($event, ele)\" \n                  :precision=\"ele.precision\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  v-bind=\"ele.props\" \n                  style=\"width:100%;\">\n                </ele-input-number>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Checkbox'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-checkbox \n                  :data-source=\"ele.optionList\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-checkbox>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Radio'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-radio \n                  @change=\"onChange($event, ele)\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  :data-source=\"ele.optionList\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-radio>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-form-img-crop\n                  @change=\"onChange($event, ele)\"\n                  :width=\"ele.width\"\n                  :height=\"ele.height\"\n                  :modal-title=\"ele.modalTitle\"\n                  :oper-text=\"ele.operText\"\n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-form-img-crop>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-tree-select'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-tree-select\n                  @change=\"onChange($event, ele)\"\n                  :disabled=\"executeExpression(ele._disabled)\"\n                  v-bind=\"ele.meta\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-tree-select>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-select-entity-modal-table\n                  @change=\"onChange($event, ele)\"\n                  :disabled=\"executeExpression(ele._disabled)\"\n                  v-bind=\"ele.meta\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-select-entity-modal-table>\n              </a-form-item>\n            </template>\n          </a-col>\n        </template>\n      </a-row>\n    </a-form>\n  </div>\n</template>\n\n<script>\nimport { parse } from '@idooel/expression'\nimport { type } from '@idooel/shared'\nimport { CONTEXT } from '../../utils'\nexport default {\n  name: 'ele-form',\n  props: {\n    value: {\n      type: Object,\n      default: () => ({})\n    },\n    disabled: {\n      type: [Boolean, String],\n      default: '_routeMeta.disabled'\n    },\n    formName: {\n      type: [Number, String],\n      default: 'coordinated'\n    },\n    elements: {\n      type: Array,\n      default: () => []\n    }\n  },\n  data () {\n    return {\n      formModel: {}\n    }\n  },\n  inject: {\n    [CONTEXT]: {\n      default: () => (() => ({}))\n    }\n  },\n  computed: {\n    contextData () {\n      return this[CONTEXT].call(this)\n    },\n    globalDisabled () {\n      return this.executeExpression(this.disabled)\n    },\n    form () {\n      const ref = this.$form.createForm(this, { name: this.formName })\n      return ref\n    },\n    exposedMethods () {\n      return {\n        setFieldsValue: this.setFieldsValue,\n        getFieldsValue: this.getFieldsValue\n      }\n    }\n  },\n  created () {\n    this.setDefaultValues()\n  },\n  methods: {\n    setFormModel (props = {}) {\n      this.formModel = props\n      this.dispatchExpression()\n    },\n    rebuildRules (rules = []) {\n      //TODO\n      rules.map(rule => {\n        const { validator } = rule\n        if (validator) {\n          validator.formModel = this.getFieldsValue()\n          validator.exposed = this.exposedMethods\n        }\n      })\n      return rules\n    },\n    dispatchExpression () {\n      this.evalDisabledExpression()\n      this.evalShowExpression()\n    },\n    evalDisabledExpression () {\n      this.elements.forEach(ele => {\n        if (this.globalDisabled) return this.$set(ele, '_disabled', true)\n        const { disabled } = ele\n        const ret = this.executeExpression(disabled)\n        this.$set(ele, '_disabled', ret)\n      })\n    },\n    evalShowExpression () {\n      this.elements.forEach(ele => {\n        const { show = true } = ele\n        const ret = this.executeExpression(show)\n        this.$set(ele, '_show', ret)\n      })\n    },\n    executeExpression (expression) {\n      if (type.isBool(expression)) return expression\n      if (type.isEmpty(expression)) return false\n      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\n    },\n    onChange (value, props) {\n      const { name } = props\n      this.$set(this.formModel, name, value)\n      this.dispatchExpression()\n      this.setFieldsValue({ [name]: value })\n      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\n    },\n    collectDefaultValues () {\n      const ret = this.elements.reduce((ret, props) => {\n        const { name, defaultValue } = props\n        if (defaultValue) {\n          ret[name] = defaultValue\n        }\n        return ret\n      }, {})\n      return ret\n    },\n    //TODO deprecated in the future, need to be implemented in the outer component\n    setDefaultValues () {\n      const defaultValues = this.collectDefaultValues()\n      this.setFormModel(defaultValues)\n      this.setFieldsValue(defaultValues)\n    },\n    validateFields () {\n      let ret = false\n      this.form.validateFields((error, values) => {\n        ret = !error\n      })\n      return ret\n    },\n    setFieldsValue (props = {}) {\n      this.$nextTick(() => {\n        this.form.setFieldsValue(props)\n      })\n    },\n    getFieldsValue (fieldNames) {\n      return this.form.getFieldsValue(fieldNames)\n    }\n  },\n  mounted() {\n    this.$emit('x:mounted', { setFormModel: this.setFormModel })\n    this.dispatchExpression()\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele__form--wrapper {\n  background: #fff;\n  .ant-form-item {\n  }\n}\n</style>",".ele__form--wrapper {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-190866fc_0", { source: ".ele__form--wrapper[data-v-190866fc] {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/form/src/index.vue","index.vue"],"names":[],"mappings":"AAyTA;EACA,gBAAA;ACxTA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele__form--wrapper\">\n    <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\n      <a-row :gutter=\"24\">\n        <template v-for=\"ele in elements\">\n          <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\n            <template v-if=\"ele.type == 'Input'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-input \n                  @change=\"onChange($event, ele)\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  :max-length=\"ele.maxLength\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-input>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Textarea'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-textarea \n                  @change=\"onChange($event, ele)\"\n                  :max-length=\"ele.maxLength\"\n                  :autosize=\"ele.autosize\"\n                  :disabled=\"executeExpression(ele._disabled)\"\n                  :allow-clear=\"ele.allowClear\"\n                  :placeholder=\"ele.placeholder\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\n                  style=\"width:100%;\">\n                </ele-textarea>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Select'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-select \n                  :data-source=\"ele.optionList\" \n                  :disabled=\"executeExpression(ele._disabled)\"\n                  :multiple=\"ele.multiple\"\n                  :mode=\"ele.mode\"\n                  :code=\"ele.code\"\n                  :init=\"ele.init\"\n                  :url=\"ele.url\"\n                  :params=\"ele.params\" \n                  @change=\"onChange($event, ele)\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-select>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-upload'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  :ext=\"ele.ext\"\n                  :multiple=\"ele.multiple\"\n                  :accept=\"ele.accept\"\n                  :extensions=\"ele.extensions\"\n                  :size=\"ele.size\"\n                  :icon=\"ele.icon\"\n                  :url=\"ele.url\"\n                  :message=\"ele.message\" \n                  style=\"width:100%;\">\n                </ele-upload>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-date-range'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-date-range \n                :disabled=\"executeExpression(ele._disabled)\" \n                v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                style=\"width:100%;\">\n              </ele-date-range>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-date'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-date\n                  :format=\"ele.format\"\n                  :mode=\"ele.mode\"\n                  :show-time=\"ele.showTime\"\n                  :show-today=\"ele.showToday\"\n                  :value-format=\"ele.valueFormat\"\n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-date>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'SelectEntity'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-select-entity \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-select-entity>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-input-number \n                  @change=\"onChange($event, ele)\" \n                  :precision=\"ele.precision\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  v-bind=\"ele.props\" \n                  style=\"width:100%;\">\n                </ele-input-number>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Checkbox'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-checkbox \n                  :data-source=\"ele.optionList\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-checkbox>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Radio'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-radio \n                  @change=\"onChange($event, ele)\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  :data-source=\"ele.optionList\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-radio>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-form-img-crop\n                  @change=\"onChange($event, ele)\"\n                  :width=\"ele.width\"\n                  :height=\"ele.height\"\n                  :modal-title=\"ele.modalTitle\"\n                  :cropper-config=\"ele.cropperConfig\"\n                  :oper-text=\"ele.operText\"\n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-form-img-crop>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-tree-select'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-tree-select\n                  @change=\"onChange($event, ele)\"\n                  :disabled=\"executeExpression(ele._disabled)\"\n                  v-bind=\"ele.meta\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-tree-select>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-select-entity-modal-table\n                  @change=\"onChange($event, ele)\"\n                  :disabled=\"executeExpression(ele._disabled)\"\n                  v-bind=\"ele.meta\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-select-entity-modal-table>\n              </a-form-item>\n            </template>\n          </a-col>\n        </template>\n      </a-row>\n    </a-form>\n  </div>\n</template>\n\n<script>\nimport { parse } from '@idooel/expression'\nimport { type } from '@idooel/shared'\nimport { CONTEXT } from '../../utils'\nexport default {\n  name: 'ele-form',\n  props: {\n    value: {\n      type: Object,\n      default: () => ({})\n    },\n    disabled: {\n      type: [Boolean, String],\n      default: '_routeMeta.disabled'\n    },\n    formName: {\n      type: [Number, String],\n      default: 'coordinated'\n    },\n    elements: {\n      type: Array,\n      default: () => []\n    }\n  },\n  data () {\n    return {\n      formModel: {}\n    }\n  },\n  inject: {\n    [CONTEXT]: {\n      default: () => (() => ({}))\n    }\n  },\n  computed: {\n    contextData () {\n      return this[CONTEXT].call(this)\n    },\n    globalDisabled () {\n      return this.executeExpression(this.disabled)\n    },\n    form () {\n      const ref = this.$form.createForm(this, { name: this.formName })\n      return ref\n    },\n    exposedMethods () {\n      return {\n        setFieldsValue: this.setFieldsValue,\n        getFieldsValue: this.getFieldsValue\n      }\n    }\n  },\n  created () {\n    this.setDefaultValues()\n  },\n  methods: {\n    setFormModel (props = {}) {\n      this.formModel = props\n      this.dispatchExpression()\n    },\n    rebuildRules (rules = []) {\n      //TODO\n      rules.map(rule => {\n        const { validator } = rule\n        if (validator) {\n          validator.formModel = this.getFieldsValue()\n          validator.exposed = this.exposedMethods\n        }\n      })\n      return rules\n    },\n    dispatchExpression () {\n      this.evalDisabledExpression()\n      this.evalShowExpression()\n    },\n    evalDisabledExpression () {\n      this.elements.forEach(ele => {\n        if (this.globalDisabled) return this.$set(ele, '_disabled', true)\n        const { disabled } = ele\n        const ret = this.executeExpression(disabled)\n        this.$set(ele, '_disabled', ret)\n      })\n    },\n    evalShowExpression () {\n      this.elements.forEach(ele => {\n        const { show = true } = ele\n        const ret = this.executeExpression(show)\n        this.$set(ele, '_show', ret)\n      })\n    },\n    executeExpression (expression) {\n      if (type.isBool(expression)) return expression\n      if (type.isEmpty(expression)) return false\n      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\n    },\n    onChange (value, props) {\n      const { name } = props\n      this.$set(this.formModel, name, value)\n      this.dispatchExpression()\n      this.setFieldsValue({ [name]: value })\n      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\n    },\n    collectDefaultValues () {\n      const ret = this.elements.reduce((ret, props) => {\n        const { name, defaultValue } = props\n        if (defaultValue) {\n          ret[name] = defaultValue\n        }\n        return ret\n      }, {})\n      return ret\n    },\n    //TODO deprecated in the future, need to be implemented in the outer component\n    setDefaultValues () {\n      const defaultValues = this.collectDefaultValues()\n      this.setFormModel(defaultValues)\n      this.setFieldsValue(defaultValues)\n    },\n    validateFields () {\n      let ret = false\n      this.form.validateFields((error, values) => {\n        ret = !error\n      })\n      return ret\n    },\n    setFieldsValue (props = {}) {\n      this.$nextTick(() => {\n        this.form.setFieldsValue(props)\n      })\n    },\n    getFieldsValue (fieldNames) {\n      return this.form.getFieldsValue(fieldNames)\n    }\n  },\n  mounted() {\n    this.$emit('x:mounted', { setFormModel: this.setFormModel })\n    this.dispatchExpression()\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele__form--wrapper {\n  background: #fff;\n  .ant-form-item {\n  }\n}\n</style>",".ele__form--wrapper {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$v = "data-v-784922a8";
+  const __vue_scope_id__$v = "data-v-190866fc";
   /* module identifier */
   const __vue_module_identifier__$v = undefined;
   /* functional template */
@@ -5497,7 +5498,7 @@ var script$t = {
     async saveToServerAsyncPage(payloads = {}) {
       net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, {
         headers: {
-          'Content-Type': 'multipart/form-data'
+          'Content-Type': 'application/json'
         }
       }).then(resp => {
         const {
@@ -5747,11 +5748,11 @@ __vue_render__$t._withStripped = true;
   /* style */
   const __vue_inject_styles__$t = function (inject) {
     if (!inject) return
-    inject("data-v-d2929816_0", { source: "[data-v-d2929816] .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n[data-v-d2929816] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-d2929816] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-d2929816] {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-d2929816] {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-d2929816] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-d2929816] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-d2929816] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-d2929816] {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-d2929816] {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-d2929816] {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-d2929816] {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-d2929816] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-d2929816] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-d2929816] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/upload/src/index.vue","index.vue"],"names":[],"mappings":"AA2WA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;AC7WA;AD0WA;EACA,0DAAA;ACxWA;AD4WA;EACA,WAAA;ACzWA;AD0WA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACxWA;ADyWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACvWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADyWA;EACA,iBAAA;ACvWA;ADwWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACtWA;ADwWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACtWA;AD2WA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACzWA;AD2WA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,uBAAA;ACxWA;AD2WA;EACA,gBAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,eAAA;ACxWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele-upload__wrapper\">\n    <FileUpload\n      class=\"ele-upload__inner\"\n      v-show=\"isShowUploadContainer\"\n      v-model=\"files\"\n      :ref=\"uploadRef\"\n      :drop=\"drop\"\n      :chunk-enabled=\"chunkEnabled\"\n      :chunk=\"chunkConfig\"\n      :accept=\"accept\"\n      :extensions=\"extensions\"\n      :size=\"fileSizeLimit\"\n      :post-action=\"postAction\"\n      :multiple=\"multiple\"\n      :headers=\"headers\"\n      :maximum=\"getMaximum\"\n      @input-file=\"onWatchInputFiles\"\n      @input=\"onWatchFiles\"\n      style=\"width: 100%;\">\n      <section class=\"ele-upload__area\">\n        <div class=\"ele-upload__area--icon\">\n          <template v-if=\"iconIsZhWrod\">\n            {{ icon }}\n          </template>\n          <template v-else>\n            <ele-icon :type=\"icon\"></ele-icon>\n          </template>\n        </div>\n        <div class=\"ele-upload__area--text\">\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\n        </div>\n      </section>\n    </FileUpload>\n    <section class=\"ele-files__wrapper\">\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\n          <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\n          </div>\n        </div>\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nimport FileUpload from 'vue-upload-component'\nimport { v4 as uuidv4 } from 'uuid'\nimport { route, net, type } from '@idooel/shared'\nexport default {\n  name: 'ele-upload',\n  components: {\n    FileUpload\n  },\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    url: {\n      type: String,\n      //TODO\n      default: `zuul/api-file/workbench/file`\n    },\n    icon: {\n      type: String,\n      default: '上传'\n    },\n    size: {\n      type: Number,\n      default: 100\n    },\n    message: {\n      type: String,\n      default: '单击或拖动文件到该区域以上传'\n    },\n    ext: {\n      type: String\n    },\n    extensions: {\n      type: String\n    },\n    accept: {\n      type: String\n    },\n    maximum: {\n      type: Number,\n      default: 10\n    },\n    multiple: {\n      type: Boolean,\n      default: false\n    },\n    drop: {\n      type: Boolean,\n      default: true\n    },\n    value: {\n      type: [String, Array]\n    },\n    querys: {\n      type: Object,\n      default: () => ({\n        _csrf: localStorage.getItem('token'),\n        _t: new Date().valueOf()\n      })\n    },\n    headers: {\n      type: Object,\n      default: () => ({\n        'X-XSRF-TOKEN': localStorage.getItem('token')\n      })\n    },\n    byteConversion: {\n      type: Number,\n      default: 1024 * 1024\n    },\n    chunkEnabled: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      files: [],\n      buildedFiles: [],\n      saveToServerAsyncPageTimer: null\n    }\n  },\n  watch: {\n    value: {\n      async handler (value) {\n        if (type.isArray(value)) {\n          // multiple\n        } else if (type.isEmpty(value)) {\n          this.files = []\n          this.buildedFiles = []\n        } else {\n          // single\n          this.fetchFileWithFileId()\n        }\n      },\n      immediate: true\n    }\n  },\n  computed: {\n    prefixPath () {\n      return window.prefixPath\n    },\n    iconIsZhWrod () {\n      return type.isZhWord(this.icon)\n    },\n    getPayloads () {\n      return {\n        override: false\n      }\n    },\n    chunkConfig () {\n      return {\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\n        headers: {\n          ...this.headers\n        },\n        minSize: 3 * this.byteConversion,\n        maxActive: 3,\n        maxRetries: 5,\n        startBody: {\n          override: true,\n          path: '/cw'\n        },\n        uploadBody: {\n          override: true,\n          path: '/cw'\n        },\n        finishBody: {\n          override: true,\n          path: '/cw'\n        }\n      }\n    },\n    isFileUploadSuccessed () {\n      return this.files.every(file => file.success)\n    },\n    isShowUploadContainer () {\n      if (this.multiple) {\n        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\n          return false\n        } else {\n          return true\n        }\n      } else {\n        const [file = {}] = this.buildedFiles\n        if (this.buildedFiles.length < 1) {\n          return true\n        }\n        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\n          return false\n        } else {\n          return true\n        }\n      }\n    },\n    getMaximum () {\n      return this.multiple ? this.maximum : 1\n    },\n    fileSizeLimit () {\n      return this.size * this.byteConversion\n    },\n    postAction () {\n      const ret = route.toQueryString(this.querys)\n      return `${this.prefixPath}${this.url}?${ret}`\n    },\n    uploadRef () {\n      return uuidv4()\n    },\n    fileSuffixIcon () {\n      return {\n        'doc': { name: 'icon-doc' },\n        'html': { name: 'icon-html' },\n        'mp4': { name: 'icon-mp' },\n        'pdf': { name: 'icon-pdf' },\n        'ppt': { name: 'icon-ppt' },\n        'psd': { name: 'icon-psd' },\n        'rtf': { name: 'icon-rtf' },\n        'txt': { name: 'icon-txt' },\n        'vis': { name: 'icon-vis' },\n        'xls': { name: 'icon-xls' },\n        'xml': { name: 'icon-xml' },\n        'zip': { name: 'icon-zip' },\n        'jpg': { name: 'icon-img' },\n        'mp3': { name: 'icon-mp1' },\n      }\n    },\n    fileIds () {\n      const fileIds = this.buildedFiles.map(file => {\n        return file.fileID\n      })\n      return this.multiple ? fileIds : fileIds[0]\n    },\n    fileResponseData () {\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\n    }\n  },\n  methods: {\n    async fetchFileWithFileId () {\n      if (!this.value) return\n      await net.get(\n        `/api-file/file/${this.value}`\n      ).then(resp => {\n        const { data } = resp\n        this.buildedFiles = [data]\n        this.files = [data]\n      })\n    },\n    handleClickDownload (file) {\n      const { fileID: fileId } = file\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\n    },\n    handleClickDelete (file) {\n      this.$refs[this.uploadRef].remove(file)\n      const { fileID } = file\n      this.files = this.files.filter(file => file.fileID !== fileID)\n      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\n      this.$emit('change', this.fileIds)\n    },\n    onWatchFiles (files) {\n      this.files = files\n      this.buildedFiles = this.files.map(file => {\n        return {\n          ...file.response.data,\n          ...file\n        }\n      })\n      if (this.isFileUploadSuccessed) {\n        this.$emit('change', this.fileIds)\n        this.$emit('on-success', this.fileResponseData)\n      }\n    },\n    async saveToServerAsyncPage (payloads = {}) {\n      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \n        headers: {\n          'Content-Type': 'multipart/form-data'\n        }\n      }).then(resp =>{\n        const { data } = resp\n        if (data !== 'saveToServerAsyncPage') {\n          clearInterval(this.saveToServerAsyncPageTimer)\n        }\n      })\n      // const ret = await net.post({\n      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\n      //   method: 'POST',\n      //   data: { ...payloads }\n      // }).then(resp => {\n      //   const { data: { data, code, message } } = resp\n      //   if (code !== '2000') {\n      //     this.$Message.error(message)\n      //     return\n      //   }\n      //   if (data !== 'saveToServerAsyncPage') {\n      //     clearInterval(timer)\n      //     const { fileID, size } = data\n      //     this.$emit('on-success', { ...data, fileId: fileID })\n      //     this.$Message.success('同步成功')\n      //     return { fileId: fileID, size }\n      //   }\n      // })\n      // return ret\n    },\n    onWatchInputFiles (newFile, oldFile) {\n      if (newFile && !oldFile) {\n        // add file\n        console.log('add', newFile)\n      }\n      if (newFile && oldFile) {\n        // update file\n        console.log('update', newFile)\n        const { success, active, chunk, response } = newFile\n        if (chunk && success && !active) {\n          console.log('chunk end')\n          const { data: { file, type } } = response\n          const payloads = {\n            filePath: file.match(/\\/cw(.*)/)[0],\n            asyncID: uuidv4(),\n            isDeleteOrigin: false,\n            toImage: type === 'pdf' ? true : false,\n            unzip: type === 'zip' ? true : false,\n            _csrf: localStorage.getItem('token')\n          }\n          this.saveToServerAsyncPageTimer = setInterval(() => {\n            this.saveToServerAsyncPage(payloads)\n          }, 2000)\n        }\n      }\n      if (!newFile && oldFile) {\n        // delete file\n        console.log('delete')\n      }\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\n        if (!this.$refs[this.uploadRef].active) {\n          this.$refs[this.uploadRef].active = true\n        }\n      }\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  &:hover {\n    border-color: var(--idooel-form-upload-border-hover-color);\n  }\n  border-radius: var(--idooel-form-border-radius);\n}\n.ele-upload__wrapper {\n  width: 100%;\n  .ele-upload__area {\n    padding: 16px;\n    width: 100%;\n    height: 80px;\n    display: flex;\n    flex-direction: row;\n    .ele-upload__area--icon {\n      color: var(--idooel-primary-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      font-size: 16x;\n      .anticon-cloud-upload {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n      .anticon {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n    }\n    .ele-upload__area--text {\n      margin-left: 16px;\n      .ele-upload__message {\n        font-size: 16px;\n        color: var(--idoole-black-088);\n        text-align: left;\n      }\n      .ele-upload__ext {\n        text-align: left;\n        font-size: 14px;\n        color: var(--idoole-black-06);\n      }\n    }\n  }\n  .ele-files__wrapper {\n    .ele-file__item {\n      width: 100%;\n      margin-top: 8px;\n      padding: 8px 12px;\n      border-radius: var(--idooel-form-border-radius);\n      background: var(--idooel-form-upload-bg-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      .ele-file__suffix--icon {}\n      .ele-file__name {\n        flex: 1;\n        text-align: left;\n        white-space: nowrap;\n        overflow: hidden;\n        font-size: 14px;\n        margin-left: 8px;\n        cursor: pointer;\n        .ele-file__inner {\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n      .ele-file__delete {\n        margin-left: 8px;\n        .ele-file__delete--icon {\n          margin-left: 8px;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>","::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-3e301bd4_0", { source: "[data-v-3e301bd4] .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n[data-v-3e301bd4] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-3e301bd4] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-3e301bd4] {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-3e301bd4] {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-3e301bd4] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-3e301bd4] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-3e301bd4] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-3e301bd4] {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-3e301bd4] {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-3e301bd4] {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-3e301bd4] {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-3e301bd4] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-3e301bd4] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-3e301bd4] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/upload/src/index.vue","index.vue"],"names":[],"mappings":"AA2WA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;AC7WA;AD0WA;EACA,0DAAA;ACxWA;AD4WA;EACA,WAAA;ACzWA;AD0WA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACxWA;ADyWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACvWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADyWA;EACA,iBAAA;ACvWA;ADwWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACtWA;ADwWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACtWA;AD2WA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACzWA;AD2WA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,uBAAA;ACxWA;AD2WA;EACA,gBAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,eAAA;ACxWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele-upload__wrapper\">\n    <FileUpload\n      class=\"ele-upload__inner\"\n      v-show=\"isShowUploadContainer\"\n      v-model=\"files\"\n      :ref=\"uploadRef\"\n      :drop=\"drop\"\n      :chunk-enabled=\"chunkEnabled\"\n      :chunk=\"chunkConfig\"\n      :accept=\"accept\"\n      :extensions=\"extensions\"\n      :size=\"fileSizeLimit\"\n      :post-action=\"postAction\"\n      :multiple=\"multiple\"\n      :headers=\"headers\"\n      :maximum=\"getMaximum\"\n      @input-file=\"onWatchInputFiles\"\n      @input=\"onWatchFiles\"\n      style=\"width: 100%;\">\n      <section class=\"ele-upload__area\">\n        <div class=\"ele-upload__area--icon\">\n          <template v-if=\"iconIsZhWrod\">\n            {{ icon }}\n          </template>\n          <template v-else>\n            <ele-icon :type=\"icon\"></ele-icon>\n          </template>\n        </div>\n        <div class=\"ele-upload__area--text\">\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\n        </div>\n      </section>\n    </FileUpload>\n    <section class=\"ele-files__wrapper\">\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\n          <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\n          </div>\n        </div>\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nimport FileUpload from 'vue-upload-component'\nimport { v4 as uuidv4 } from 'uuid'\nimport { route, net, type } from '@idooel/shared'\nexport default {\n  name: 'ele-upload',\n  components: {\n    FileUpload\n  },\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    url: {\n      type: String,\n      //TODO\n      default: `zuul/api-file/workbench/file`\n    },\n    icon: {\n      type: String,\n      default: '上传'\n    },\n    size: {\n      type: Number,\n      default: 100\n    },\n    message: {\n      type: String,\n      default: '单击或拖动文件到该区域以上传'\n    },\n    ext: {\n      type: String\n    },\n    extensions: {\n      type: String\n    },\n    accept: {\n      type: String\n    },\n    maximum: {\n      type: Number,\n      default: 10\n    },\n    multiple: {\n      type: Boolean,\n      default: false\n    },\n    drop: {\n      type: Boolean,\n      default: true\n    },\n    value: {\n      type: [String, Array]\n    },\n    querys: {\n      type: Object,\n      default: () => ({\n        _csrf: localStorage.getItem('token'),\n        _t: new Date().valueOf()\n      })\n    },\n    headers: {\n      type: Object,\n      default: () => ({\n        'X-XSRF-TOKEN': localStorage.getItem('token')\n      })\n    },\n    byteConversion: {\n      type: Number,\n      default: 1024 * 1024\n    },\n    chunkEnabled: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      files: [],\n      buildedFiles: [],\n      saveToServerAsyncPageTimer: null\n    }\n  },\n  watch: {\n    value: {\n      async handler (value) {\n        if (type.isArray(value)) {\n          // multiple\n        } else if (type.isEmpty(value)) {\n          this.files = []\n          this.buildedFiles = []\n        } else {\n          // single\n          this.fetchFileWithFileId()\n        }\n      },\n      immediate: true\n    }\n  },\n  computed: {\n    prefixPath () {\n      return window.prefixPath\n    },\n    iconIsZhWrod () {\n      return type.isZhWord(this.icon)\n    },\n    getPayloads () {\n      return {\n        override: false\n      }\n    },\n    chunkConfig () {\n      return {\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\n        headers: {\n          ...this.headers\n        },\n        minSize: 3 * this.byteConversion,\n        maxActive: 3,\n        maxRetries: 5,\n        startBody: {\n          override: true,\n          path: '/cw'\n        },\n        uploadBody: {\n          override: true,\n          path: '/cw'\n        },\n        finishBody: {\n          override: true,\n          path: '/cw'\n        }\n      }\n    },\n    isFileUploadSuccessed () {\n      return this.files.every(file => file.success)\n    },\n    isShowUploadContainer () {\n      if (this.multiple) {\n        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\n          return false\n        } else {\n          return true\n        }\n      } else {\n        const [file = {}] = this.buildedFiles\n        if (this.buildedFiles.length < 1) {\n          return true\n        }\n        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\n          return false\n        } else {\n          return true\n        }\n      }\n    },\n    getMaximum () {\n      return this.multiple ? this.maximum : 1\n    },\n    fileSizeLimit () {\n      return this.size * this.byteConversion\n    },\n    postAction () {\n      const ret = route.toQueryString(this.querys)\n      return `${this.prefixPath}${this.url}?${ret}`\n    },\n    uploadRef () {\n      return uuidv4()\n    },\n    fileSuffixIcon () {\n      return {\n        'doc': { name: 'icon-doc' },\n        'html': { name: 'icon-html' },\n        'mp4': { name: 'icon-mp' },\n        'pdf': { name: 'icon-pdf' },\n        'ppt': { name: 'icon-ppt' },\n        'psd': { name: 'icon-psd' },\n        'rtf': { name: 'icon-rtf' },\n        'txt': { name: 'icon-txt' },\n        'vis': { name: 'icon-vis' },\n        'xls': { name: 'icon-xls' },\n        'xml': { name: 'icon-xml' },\n        'zip': { name: 'icon-zip' },\n        'jpg': { name: 'icon-img' },\n        'mp3': { name: 'icon-mp1' },\n      }\n    },\n    fileIds () {\n      const fileIds = this.buildedFiles.map(file => {\n        return file.fileID\n      })\n      return this.multiple ? fileIds : fileIds[0]\n    },\n    fileResponseData () {\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\n    }\n  },\n  methods: {\n    async fetchFileWithFileId () {\n      if (!this.value) return\n      await net.get(\n        `/api-file/file/${this.value}`\n      ).then(resp => {\n        const { data } = resp\n        this.buildedFiles = [data]\n        this.files = [data]\n      })\n    },\n    handleClickDownload (file) {\n      const { fileID: fileId } = file\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\n    },\n    handleClickDelete (file) {\n      this.$refs[this.uploadRef].remove(file)\n      const { fileID } = file\n      this.files = this.files.filter(file => file.fileID !== fileID)\n      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\n      this.$emit('change', this.fileIds)\n    },\n    onWatchFiles (files) {\n      this.files = files\n      this.buildedFiles = this.files.map(file => {\n        return {\n          ...file.response.data,\n          ...file\n        }\n      })\n      if (this.isFileUploadSuccessed) {\n        this.$emit('change', this.fileIds)\n        this.$emit('on-success', this.fileResponseData)\n      }\n    },\n    async saveToServerAsyncPage (payloads = {}) {\n      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \n        headers: {\n          'Content-Type': 'application/json'\n        }\n      }).then(resp =>{\n        const { data } = resp\n        if (data !== 'saveToServerAsyncPage') {\n          clearInterval(this.saveToServerAsyncPageTimer)\n        }\n      })\n      // const ret = await net.post({\n      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\n      //   method: 'POST',\n      //   data: { ...payloads }\n      // }).then(resp => {\n      //   const { data: { data, code, message } } = resp\n      //   if (code !== '2000') {\n      //     this.$Message.error(message)\n      //     return\n      //   }\n      //   if (data !== 'saveToServerAsyncPage') {\n      //     clearInterval(timer)\n      //     const { fileID, size } = data\n      //     this.$emit('on-success', { ...data, fileId: fileID })\n      //     this.$Message.success('同步成功')\n      //     return { fileId: fileID, size }\n      //   }\n      // })\n      // return ret\n    },\n    onWatchInputFiles (newFile, oldFile) {\n      if (newFile && !oldFile) {\n        // add file\n        console.log('add', newFile)\n      }\n      if (newFile && oldFile) {\n        // update file\n        console.log('update', newFile)\n        const { success, active, chunk, response } = newFile\n        if (chunk && success && !active) {\n          console.log('chunk end')\n          const { data: { file, type } } = response\n          const payloads = {\n            filePath: file.match(/\\/cw(.*)/)[0],\n            asyncID: uuidv4(),\n            isDeleteOrigin: false,\n            toImage: type === 'pdf' ? true : false,\n            unzip: type === 'zip' ? true : false,\n            _csrf: localStorage.getItem('token')\n          }\n          this.saveToServerAsyncPageTimer = setInterval(() => {\n            this.saveToServerAsyncPage(payloads)\n          }, 2000)\n        }\n      }\n      if (!newFile && oldFile) {\n        // delete file\n        console.log('delete')\n      }\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\n        if (!this.$refs[this.uploadRef].active) {\n          this.$refs[this.uploadRef].active = true\n        }\n      }\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  &:hover {\n    border-color: var(--idooel-form-upload-border-hover-color);\n  }\n  border-radius: var(--idooel-form-border-radius);\n}\n.ele-upload__wrapper {\n  width: 100%;\n  .ele-upload__area {\n    padding: 16px;\n    width: 100%;\n    height: 80px;\n    display: flex;\n    flex-direction: row;\n    .ele-upload__area--icon {\n      color: var(--idooel-primary-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      font-size: 16x;\n      .anticon-cloud-upload {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n      .anticon {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n    }\n    .ele-upload__area--text {\n      margin-left: 16px;\n      .ele-upload__message {\n        font-size: 16px;\n        color: var(--idoole-black-088);\n        text-align: left;\n      }\n      .ele-upload__ext {\n        text-align: left;\n        font-size: 14px;\n        color: var(--idoole-black-06);\n      }\n    }\n  }\n  .ele-files__wrapper {\n    .ele-file__item {\n      width: 100%;\n      margin-top: 8px;\n      padding: 8px 12px;\n      border-radius: var(--idooel-form-border-radius);\n      background: var(--idooel-form-upload-bg-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      .ele-file__suffix--icon {}\n      .ele-file__name {\n        flex: 1;\n        text-align: left;\n        white-space: nowrap;\n        overflow: hidden;\n        font-size: 14px;\n        margin-left: 8px;\n        cursor: pointer;\n        .ele-file__inner {\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n      .ele-file__delete {\n        margin-left: 8px;\n        .ele-file__delete--icon {\n          margin-left: 8px;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>","::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$t = "data-v-d2929816";
+  const __vue_scope_id__$t = "data-v-3e301bd4";
   /* module identifier */
   const __vue_module_identifier__$t = undefined;
   /* functional template */
@@ -13390,6 +13391,7 @@ __vue_component__$6.install = Vue => Vue.component(__vue_component__$6.name, __v
 //
 //
 //
+//
 
 var script$5 = {
   name: 'ele-form-img-crop',
@@ -13415,6 +13417,14 @@ var script$5 = {
     height: {
       type: [Number, String],
       default: 200
+    },
+    cropperConfig: {
+      type: Object,
+      default: () => {
+        return {
+          aspectRatio: 16 / 9
+        };
+      }
     }
   },
   data() {
@@ -13492,7 +13502,11 @@ var __vue_render__$5 = function () {
       ),
       _vm._v(" "),
       _c("ele-modal-img-crop", {
-        attrs: { imageId: _vm.value, title: _vm.modalTitle },
+        attrs: {
+          cropperConfig: _vm.cropperConfig,
+          imageId: _vm.value,
+          title: _vm.modalTitle,
+        },
         on: { change: _vm.onChangeModalCropImg },
         model: {
           value: _vm.showModalImgCropValue,
@@ -13512,11 +13526,11 @@ __vue_render__$5._withStripped = true;
   /* style */
   const __vue_inject_styles__$5 = function (inject) {
     if (!inject) return
-    inject("data-v-20595afc_0", { source: ".ele__img--form .form__img--wrapper[data-v-20595afc] {\n  cursor: pointer;\n  border-radius: 4px;\n  background: #000;\n  opacity: 0.3;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n.ele__img--form .form__img--wrapper .form__img--preivew[data-v-20595afc] {\n  position: absolute;\n  color: red;\n  width: 100%;\n  height: 100%;\n  border-radius: 4px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper[data-v-20595afc] {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  color: #fff;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon--oper[data-v-20595afc] {\n  font-size: 40px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon__text--oper[data-v-20595afc] {\n  font-size: 16px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/form-img-crop/src/index.vue","index.vue"],"names":[],"mappings":"AA+EA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;AC9EA;AD+EA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;AC7EA;AD+EA;EACA,kBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;AC7EA;AD8EA;EACA,eAAA;AC5EA;AD8EA;EACA,eAAA;AC5EA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele__img--form\">\n    <div class=\"form__img--wrapper\" \n      @click=\"handleClick\" \n      :style=\"style\">\n      <div class=\"form__img--preivew\" v-if=\"value\">\n        <img style=\"width:100%;height:100%\" :src=\"imageUrl\" alt=\"\" srcset=\"\">\n      </div>\n      <div class=\"form__icon--wrapper\">\n        <ele-icon class=\"icon--oper\" type=\"icon-camera\"></ele-icon>\n        <span class=\"icon__text--oper\">{{ operText }}</span>\n      </div>\n    </div>\n    <ele-modal-img-crop \n      v-model=\"showModalImgCropValue\"\n      @change=\"onChangeModalCropImg\"\n      :imageId=\"value\"\n      :title=\"modalTitle\">\n    </ele-modal-img-crop>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'ele-form-img-crop',\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    value: {\n      type: [String, Number]\n    },\n    modalTitle: {\n      type: String\n    },\n    operText: {\n      type: String,\n      default: '更改头像'\n    },\n    width: {\n      type: [Number, String],\n      default: 200\n    },\n    height: {\n      type: [Number, String],\n      default: 200\n    }\n  },\n  data() {\n    return {\n      showModalImgCropValue: false\n    }\n  },\n  computed: {\n    style () {\n      return {\n        width: this.width + 'px',\n        height: this.height + 'px'\n      }\n    },\n    imageUrl () {\n      return `/api-file/workbench/file/stream/${this.value}?origin=true`\n    }\n  },\n  methods: {\n    handleClick () {\n      this.showModalImgCropValue = true\n    },\n    onChangeModalCropImg (fileId) {\n      console.log('fileId', fileId)\n      this.$emit('change', fileId)\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele__img--form {\n  .form__img--wrapper {\n    cursor: pointer;\n    border-radius: 4px;\n    background: #000;\n    opacity: 0.3;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    .form__img--preivew {\n      position: absolute;\n      color: red;\n      width: 100%;\n      height: 100%;\n      border-radius: 4px;\n    }\n    .form__icon--wrapper {\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      color: #fff;\n      .icon--oper {\n        font-size: 40px;\n      }\n      .icon__text--oper {\n        font-size: 16px;\n      }\n    }\n  }\n}\n</style>",".ele__img--form .form__img--wrapper {\n  cursor: pointer;\n  border-radius: 4px;\n  background: #000;\n  opacity: 0.3;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n.ele__img--form .form__img--wrapper .form__img--preivew {\n  position: absolute;\n  color: red;\n  width: 100%;\n  height: 100%;\n  border-radius: 4px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  color: #fff;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon--oper {\n  font-size: 40px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon__text--oper {\n  font-size: 16px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-5a602a76_0", { source: ".ele__img--form .form__img--wrapper[data-v-5a602a76] {\n  cursor: pointer;\n  border-radius: 4px;\n  background: #000;\n  opacity: 0.3;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n.ele__img--form .form__img--wrapper .form__img--preivew[data-v-5a602a76] {\n  position: absolute;\n  color: red;\n  width: 100%;\n  height: 100%;\n  border-radius: 4px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper[data-v-5a602a76] {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  color: #fff;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon--oper[data-v-5a602a76] {\n  font-size: 40px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon__text--oper[data-v-5a602a76] {\n  font-size: 16px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/form-img-crop/src/index.vue","index.vue"],"names":[],"mappings":"AAwFA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;ACvFA;ADwFA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;ACtFA;ADwFA;EACA,kBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;ACtFA;ADuFA;EACA,eAAA;ACrFA;ADuFA;EACA,eAAA;ACrFA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele__img--form\">\n    <div class=\"form__img--wrapper\" \n      @click=\"handleClick\" \n      :style=\"style\">\n      <div class=\"form__img--preivew\" v-if=\"value\">\n        <img style=\"width:100%;height:100%\" :src=\"imageUrl\" alt=\"\" srcset=\"\">\n      </div>\n      <div class=\"form__icon--wrapper\">\n        <ele-icon class=\"icon--oper\" type=\"icon-camera\"></ele-icon>\n        <span class=\"icon__text--oper\">{{ operText }}</span>\n      </div>\n    </div>\n    <ele-modal-img-crop \n      v-model=\"showModalImgCropValue\"\n      @change=\"onChangeModalCropImg\"\n      :cropperConfig=\"cropperConfig\"\n      :imageId=\"value\"\n      :title=\"modalTitle\">\n    </ele-modal-img-crop>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'ele-form-img-crop',\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    value: {\n      type: [String, Number]\n    },\n    modalTitle: {\n      type: String\n    },\n    operText: {\n      type: String,\n      default: '更改头像'\n    },\n    width: {\n      type: [Number, String],\n      default: 200\n    },\n    height: {\n      type: [Number, String],\n      default: 200\n    },\n    cropperConfig: {\n      type: Object,\n      default: () => {\n        return {\n          aspectRatio: 16 / 9\n        }\n      }\n    }\n  },\n  data() {\n    return {\n      showModalImgCropValue: false\n    }\n  },\n  computed: {\n    style () {\n      return {\n        width: this.width + 'px',\n        height: this.height + 'px'\n      }\n    },\n    imageUrl () {\n      return `/api-file/workbench/file/stream/${this.value}?origin=true`\n    }\n  },\n  methods: {\n    handleClick () {\n      this.showModalImgCropValue = true\n    },\n    onChangeModalCropImg (fileId) {\n      console.log('fileId', fileId)\n      this.$emit('change', fileId)\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele__img--form {\n  .form__img--wrapper {\n    cursor: pointer;\n    border-radius: 4px;\n    background: #000;\n    opacity: 0.3;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    .form__img--preivew {\n      position: absolute;\n      color: red;\n      width: 100%;\n      height: 100%;\n      border-radius: 4px;\n    }\n    .form__icon--wrapper {\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      color: #fff;\n      .icon--oper {\n        font-size: 40px;\n      }\n      .icon__text--oper {\n        font-size: 16px;\n      }\n    }\n  }\n}\n</style>",".ele__img--form .form__img--wrapper {\n  cursor: pointer;\n  border-radius: 4px;\n  background: #000;\n  opacity: 0.3;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n.ele__img--form .form__img--wrapper .form__img--preivew {\n  position: absolute;\n  color: red;\n  width: 100%;\n  height: 100%;\n  border-radius: 4px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  color: #fff;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon--oper {\n  font-size: 40px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon__text--oper {\n  font-size: 16px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$5 = "data-v-20595afc";
+  const __vue_scope_id__$5 = "data-v-5a602a76";
   /* module identifier */
   const __vue_module_identifier__$5 = undefined;
   /* functional template */

package/dist/@idooel/components.umd.js

@@ -2734,7 +2734,7 @@
       },
       setCurrentTableSelection(props = {}) {
         if (this.currentTableMode === 'radio') {
-          this.$set(this, 'currentTableSelection', shared.type.isObject(props) ? props : {});
+          this.$set(this, 'currentTableSelection', shared.type.isArray(props) && props.length > 0 ? props[0] : shared.type.isObject(props) ? props : {});
         } else {
           this.$set(this, 'currentTableSelection', shared.type.isArray(props) ? props : []);
         }
@@ -3151,11 +3151,11 @@
     /* style */
     const __vue_inject_styles__$A = function (inject) {
       if (!inject) return
-      inject("data-v-7209faac_0", { source: ".ele.model__tree-table[data-v-7209faac] {\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper[data-v-7209faac] {\n  width: 240px;\n  background: #fff;\n  flex-shrink: 0;\n  padding: 16px;\n  box-sizing: border-box;\n  margin-right: 16px;\n  overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container[data-v-7209faac] {\n  width: 100%;\n  min-width: 0;\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar[data-v-7209faac] {\n  width: 100%;\n  height: 8px;\n  background: var(--idooel-primary-color);\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text[data-v-7209faac] {\n  text-align: left;\n  padding: 16px;\n  font-size: 16px;\n  font-weight: bold;\n  background: #fff;\n  border-bottom: 1px solid;\n  border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper[data-v-7209faac] {\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-7209faac] {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 16px;\n  padding-bottom: 8px;\n  padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm[data-v-7209faac] {\n  cursor: pointer;\n  color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/models/tree-table-model/src/index.vue","index.vue"],"names":[],"mappings":"AAonBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACnnBA;ADqnBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACnnBA;ADsnBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACpnBA;ADsnBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACpnBA;ADsnBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACpnBA;ADunBA;EACA,gBAAA;ACrnBA;ADsnBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACpnBA;ADunBA;EACA,eAAA;EACA,kCAAA;ACrnBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <section class=\"ele model__tree-table\">\n    <section class=\"model__tree-table--container\" v-if=\"showTree\">\n      <div class=\"model__tree--title\"></div>\n      <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\n        <ele-tree\n          :tree-data=\"treeData\"\n          :defaultExpandedKeys=\"defaultExpandedKeys\"\n          :defaultSelectedKeys=\"defaultSelectedKeys\"\n          @select=\"selectTreeNode\"\n          :replace-fields=\"mapFields\">\n        </ele-tree>\n      </section>\n    </section>\n    <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\n      <div class=\"model__table--title\" v-if=\"title\">\n        <template v-if=\"titleMode\">\n          <div :class=\"[`model__table-title--${titleMode}`]\"></div>\n        </template>\n        <template v-else>\n          <div class=\"model__table-title--text\">{{ title }}</div>\n        </template>\n      </div>\n      <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\n        <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\n        <div class=\"button-row__area\">\n          <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\n          <slot name=\"tags\"></slot>\n          <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\n        </div>\n        <ele-table\n          v-on=\"overrideTableEvent\"\n          :ref=\"tableRef\"\n          :row-selection=\"rowSelection\"\n          :loading=\"loading\" \n          :columns=\"columns\"\n          :total=\"total\"\n          :x=\"x\"\n          :y=\"y\"\n          :bordered=\"setBorder\"\n          :height=\"tableHeight\"\n          :width=\"tableWidth\"\n          :actions=\"actions\"\n          :pageSize=\"pageSize\"\n          :pageSizeOptions=\"pageSizeOptions\"\n          :data-source=\"tableData\"\n          @change-page=\"onChangePage\"\n        ></ele-table>\n      </section>\n    </section>\n    <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\n    <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\n    <ele-modal-table\n      :meta=\"modalTableMeta\"\n      v-model=\"modalTableValue\"\n      v-on=\"overrideModalTableEvent\"\n    ></ele-modal-table>\n  </section>\n</template>\n\n<script>\nimport { type, net, util } from '@idooel/shared'\nimport { v4 as uuidv4 } from 'uuid'\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\nexport default {\n  name: 'ele-tree-table-model',\n  props: {\n    title: {\n      type: [Object, String]\n    },\n    overHeight: {\n      type: Number,\n      default: 0\n    },\n    treeMeta: {\n      type: Object,\n      default: () => ({})\n    },\n    searchMeta: {\n      type: Object,\n      default: () => ({})\n    },\n    buttonGroupMeta: {\n      typeof: Object,\n      default: () => ({})\n    },\n    tableMeta: {\n      type: Object,\n      default: () => ({})\n    },\n    createMeta: {\n      type: Object\n    },\n    editMeta: {\n      type: Object\n    }\n  },\n  provide () {\n    return {\n      requestTreeData: this.requestTreeData,\n      requestTableData: this.requestTableData,\n      [CONTEXT]: () => {\n        return {\n          exposed: this.exposed\n        }\n      }\n    }\n  },\n  data () {\n    return {\n      tableHeight: 0,\n      tableWidth: 0,\n      modalFormMeta: {},\n      modalFormValue: false,\n      treeData: [],\n      tableData: [],\n      defaultExpandedKeys: [],\n      defaultSelectedKeys: [],\n      replaceFields: {\n        title: 'title',\n        children: 'children',\n        key: 'id'\n      },\n      loading: false,\n      total: 0,\n      tableQuerys: {},\n      resizeObserverModelTableWrapper: null,\n      modelTableWrapperHeight: 0,\n      currentTreeNodeData: {},\n      currentRowData: {},\n      treeWrapperHeight: 0,\n      currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\n      showFsmModal: false,\n      fsmMeta: {},\n      fsmContextProp: {},\n      modalTableValue: false,\n      modalTableMeta: {}\n    }\n  },\n  computed: {\n    setBorder () {\n      return this.tableMeta.bordered === false ? false : true\n    },\n    rowSelection () {\n      if (!this.currentTableMode) return void 0\n      return {\n        columnTitle: this.currentSelectionColumn.columnTitle,\n        fixed: true,\n        type: this.currentTableMode,\n        onChange: this.onChangeTableSelection\n      }\n    },\n    currentSelectionColumn () {\n      const { multiple } = this.tableMeta\n      const target = this.columns.find(item => Object.keys(item).includes('multiple'))\n      const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\n      if (target) {\n        return target\n      } else if (isGlobalExistMultiple) {\n        return { multiple }\n      }\n      return void 0\n    },\n    x () {\n      const { x } = this.tableMeta\n      return x\n    },\n    y () {\n      const { y } = this.tableMeta\n      return y\n    },\n    currentTableMode () {\n      if (!this.currentSelectionColumn) return void 0\n      const { multiple } = this.currentSelectionColumn\n      if (type.isBool(multiple)) {\n        if (multiple) {\n          return 'checkbox'\n        } else {\n          return 'radio'\n        }\n      } else {\n        return void 0\n      }\n    },\n    modelTableContainerRef () {\n      return uuidv4()\n    },\n    titleMode () {\n      if (type.isObject(this.title)) {\n        const { mode = '' } = this.title\n        return mode\n      }\n      return void 0\n    },\n    tableRef () {\n      return uuidv4()\n    },\n    exposed () {\n      return {\n        showModalForm: this.showModalForm,\n        closeModalForm: this.closeModalForm,\n        showModalTable: this.showModalTable,\n        closeModalTable: this.closeModalTable,\n        currentTableSelection: this.currentTableSelection,\n        currentTreeNode: this.currentTreeNodeData,\n        requestTableData: this.requestTableData,\n        refreshTreeData: this.refreshTreeData,\n        querys: this.tableQuerys,\n        currentRowData: this.currentRowData,\n        getCurrentRowData: this.getCurrentRowData,\n        setCurrentRowData: this.setCurrentRowData,\n        setCurrentTableSelection: this.setCurrentTableSelection,\n        getCurrentTableSelection: this.getCurrentTableSelection,\n        cleanCurrentModelEffect: this.cleanCurrentModelEffect,\n        route: this.$route,\n        _route: this.$route.query,\n        _routeMeta: this.$route.meta\n      }\n    },\n    overrideTableEvent () {\n      const events = this.actions.reduce((ret, action) => {\n        ret[action.eventName || action.key] = (e) => {\n          this.setCurrentRowData(e.exposed.currentRowData)\n          const { target } = action\n          const targetMeta = this.findMetaByKey(target)\n          const { mode } = targetMeta\n          mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\n          this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\n        }\n        return ret\n      }, {})\n      return {\n        ...this.$listeners,\n        ...events,\n        [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\n      }\n    },\n    overrideModalFormEvent () {\n      const { footerMeta } = this.modalFormMeta\n      const { elements = [] } = footerMeta || {}\n      const eles = type.isFunction(elements) ? elements.call(this) : elements\n      const events = eles.reduce((ret, ele) => {\n        ret[ele.eventName] = (e = {}) => {\n          if (ele.eventName === 'cancel') {\n            this.closeModalForm()\n          } else {\n            const { exposed = {} } = e\n            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\n          }\n        }\n        return ret\n      }, {})\n      return {\n        ...events\n      }\n    },\n    overrideModalTableEvent () {\n      const { footerMeta } = this.modalTableMeta\n      const { elements = [] } = footerMeta || {}\n      const eles = type.isFunction(elements) ? elements.call(this) : elements\n      const events = eles.reduce((ret, ele) => {\n        ret[ele.eventName] = (e = {}) => {\n          if (ele.eventName === 'cancel') {\n            this.closeModalTable()\n          } else {\n            const { exposed = {} } = e\n            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\n          }\n        }\n        return ret\n      }, {})\n      return {\n        ...events,\n        exposed: this.exposed\n      }\n    },\n    overrideButtonGroupEvent () {\n      const events = this.getButtonGroupElements.reduce((ret, ele) => {\n        ret[ele.eventName] = (e) => {\n          this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\n        }\n        return ret\n      }, {})\n      return {\n        ...this.$listeners,\n        ...events,\n        [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\n        exposed: this.exposed\n      }\n    },\n    showTree () {\n      return !!Object.keys(this.treeMeta).length\n    },\n    buttonGroup () {\n      return uuidv4()\n    },\n    searchArea () {\n      return uuidv4()\n    },\n    modelTreeWrapper () {\n      return uuidv4()\n    },\n    modelTableWrapper () {\n      return uuidv4()\n    },\n    actions () {\n      const { operations } = this.tableMeta\n      if (operations) {\n        return operations.elements\n      } else {\n        return []\n      }\n    },\n    pageSize () {\n      const { page = {} } = this.tableMeta\n      return page.pageSize || 10\n    },\n    pageSizeOptions () {\n      const { page = {} } = this.tableMeta\n      return page.pageSizeOptions || ['10', '20', '30', '40']\n    },\n    columns () {\n      const { columns, operations } = this.tableMeta\n      if (type.get(columns) === 'array') {\n        const columnsOptions = columns.map(item => {\n          const { mode = 'text' } = item\n          if (item.render) {\n            return {\n              ...item,\n              customRender: (text, record, index) => {\n                const { $createElement } = this\n                return item.render.call(this, \n                  { h: $createElement, ctx: this },\n                  text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \n                  record, index)\n              }\n            }\n          } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\n            const { [`${mode}Meta`]: modeMeta } = item\n            return {\n              ...item,\n              customRender: (text, record, index) => {\n                return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\n              }\n            }\n          }\n          return {\n            ...item\n          }\n        })\n        if (operations) {\n          return [\n            ...columnsOptions,\n            {\n              title: '操作',\n              width: operations.width,\n              key: 'action',\n              fixed: 'right',\n              scopedSlots: { customRender: 'action' }\n            }\n          ]\n        }\n        return columnsOptions\n      } else {\n        console.error('Error: columns is invalid, please check it')\n        return []\n      }\n    },\n    getButtonGroupElements () {\n      const { elements } = this.buttonGroupMeta\n      if (type.get(elements) === 'function') {\n        return elements.call(this)\n      } else if (type.get(elements) === 'array') {\n        return elements\n      } else {\n        return []\n      }\n    },\n    mapFields () {\n      const { replaceFields = {} } = this.treeMeta\n      const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\n      return mapFields\n    }\n  },\n  async created () {\n    if (this.showTree) {\n      this.treeData = await this.requestTreeData()\n      const [defaultTreeNode = {}] = this.treeData\n      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.currentTreeNodeData = defaultTreeNode\n    }\n    const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\n    const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\n    const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\n    if (overrideInit) {\n      this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\n    } else {\n      this.tableData = await this.requestTableData(initQuerys)\n    }\n  },\n  methods: {\n    async refreshTreeData () {\n      this.treeData = await this.requestTreeData()\n      const [defaultTreeNode = {}] = this.treeData\n      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.currentTreeNodeData = defaultTreeNode\n    },\n    dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\n      switch (mode) {\n        case BUILT_IN_TRIGGER.FSM:\n          this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { \n            url: 'api-fsm/workbench/fsm/auditFlow',\n            requestType: 'GET',\n            fieldMap: {\n              modelCode: 'modelCode',\n              businessId: 'businessId'\n            }\n          } : modeMeta)\n          break\n        case BUILT_IN_TRIGGER.ELE_MODAL_FORM:\n          this.modalFormMeta = modeMeta\n          this.showModalForm(modeMeta)\n          break\n        case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:\n          this.modalTableMeta = modeMeta\n          this.showModalTable(modeMeta)\n          break\n        default:\n          break\n      }\n    },\n    handleCloseFsmModal () {\n      this.showFsmModal = false\n    },\n    [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\n      this.fsmMeta = meta\n      this.fsmContextProp = record\n      this.showFsmModal = true\n    },\n    onChangeTableSelection (_, selectedRows = []) {\n      if (this.currentTableMode === 'radio') {\n        this.setCurrentTableSelection(selectedRows)\n        this.$emit('on-change-table-selection', this.currentTableSelection)\n        this.$emit('x:refresh-exposed', { exposed: this.exposed })\n      } else {\n        this.setCurrentTableSelection(selectedRows)\n        this.$emit('on-change-table-selection', this.currentTableSelection)\n        this.$emit('x:refresh-exposed', { exposed: this.exposed })\n      }\n    },\n    setCurrentTableSelection (props = {}) {\n      if (this.currentTableMode === 'radio') {\n        this.$set(this, 'currentTableSelection', type.isObject(props) ? props : {})\n      } else {\n        this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])\n      }\n    },\n    getCurrentTableSelection () {\n      return this.currentTableSelection\n    },\n    setCurrentRowData (props = {}) {\n      this.currentRowData = props\n    },\n    getCurrentRowData () {\n      return this.currentRowData\n    },\n    cleanCurrentModelEffect () {\n      this.setCurrentTableSelection()\n      this.setCurrentRowData({})\n    },\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\n      this.cleanCurrentModelEffect()\n      this.requestTableData()\n    },\n    [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\n      const { record = {} } = props\n      this.currentRowData = record\n      this.setCurrentRowData(record)\n      this.modalFormMeta = this.editMeta\n      this.modalFormValue = true\n    },\n    [BUILT_IN_EVENT_NAMES.CREATE] () {\n      this.modalFormMeta = this.createMeta\n      this.modalFormValue = true\n    },\n    showModalForm (modeMeta = {}) {\n      if (type.isStr(modeMeta)) {\n        const targetMeta = this.findMetaByKey(modeMeta)\n        this.modalFormMeta = targetMeta\n      } else {\n        this.modalFormMeta = modeMeta\n      }\n      this.modalFormValue = true\n    },\n    showModalTable (modeMeta = {}) {\n      console.log('showModalTable', modeMeta)\n      if (type.isStr(modeMeta)) {\n        const targetMeta = this.findMetaByKey(modeMeta)\n        this.modalTableMeta = targetMeta\n      } else {\n        this.modalTableMeta = modeMeta\n      }\n      this.modalTableValue = true\n    },\n    closeModalForm () {\n      this.modalFormValue = false\n    },\n    closeModalTable () {\n      console.log('closeModalTable')\n      this.modalTableValue = false\n    },\n    findMetaByKey (key) {\n      return this.$attrs[key] || {}\n    },\n    handleClickButtonGroup (props) {\n      const { eventName, target } = props\n      const targetMeta = this.findMetaByKey(target)\n      const { mode } = targetMeta\n      mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })\n      this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })\n    },\n    watchViewPort () {\n      const modelTableWrapper = this.$refs[this.modelTableWrapper]\n      const { top } = modelTableWrapper.getBoundingClientRect()\n      this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\n    },\n    async onSearch (props) {\n      const { overrideInit = false } = this.tableMeta\n      this.tableQuerys = Object.assign(this.tableQuerys, props)\n      if (overrideInit) {\n        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n      } else {\n        this.tableData = await this.requestTableData()\n      }\n    },\n    async selectTreeNode (selectedKeys, e) {\n      const { fieldMap } = this.tableMeta\n      this.currentTreeNodeData = e.node.$vnode.data.props.dataRef || {}\n      //@deprecated '_' namespace is deprecated, please use 'exposed' instead\n      const execFieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, exposed: this.exposed, _route: this.exposed._route })\n      const { overrideInit = false } = this.tableMeta\n      if (overrideInit) {\n        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n      } else {\n        this.tableData = await this.requestTableData(execFieldMapRet)\n      }\n    },\n    async requestTreeData () {\n      const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\n      const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\n      const ret = await net[requestType.toLowerCase()](\n        url,\n        { ...params, ...fieldMapRet }\n      ).then(resp => {\n        const { data } = resp || {}\n        return data\n      })\n      return ret\n    },\n    async onChangePage (page, pageSize) {\n      this.tableData = await this.requestTableData({ currentPage: page, pageSize })\n    },\n    async requestTableData (props = {}) {\n      const { url, requestType = 'GET', page = {} } = this.tableMeta\n      const { pageSize = 10 } = page\n      this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)\n      this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\n      this.loading = true\n      const ret = await net[requestType.toLowerCase()](\n        url,\n        this.tableQuerys\n      ).then(resp => {\n        const { data = [], count } = resp || {}\n        this.total = count\n        this.loading = false\n        return (data || []).map(item => {\n          delete item.children\n          return {\n            key: uuidv4(),\n            ...item\n          }\n        })\n      })\n      this.cleanCurrentModelEffect()\n      this.tableData = ret\n      return ret\n    },\n    refreshTreeStatus (props = {}) {},\n    refreshTableStatus (props = {}) {},\n    calculateTableHeight () {\n      const currentViewportHeight = window.innerHeight\n      const tableRef = this.$refs[this.tableRef]\n      const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\n      this.tableWidth = width\n      this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\n    },\n    calculateTreeHeight () {\n      if (!this.showTree) return\n      const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\n      const { height } = modelTableContainerRef.getBoundingClientRect()\n      this.treeWrapperHeight = height\n    }\n  },\n  mounted () {\n    this.calculateTableHeight()\n    this.$nextTick(() => {\n      this.calculateTreeHeight()\n    })\n    this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\n      for (const _ of entries) {\n        requestAnimationFrame(() => {\n          this.calculateTableHeight()\n        })\n      }\n    })\n    this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\n  },\n  destroyed () {\n    this.resizeObserverModelTableWrapper.disconnect()\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n  &.model__tree-table {\n    background: transparent;                                                                                                                                                                                                                 \n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    .model__tree-table--container {\n      .model__tree--wrapper {\n        width: 240px;\n        background: #fff;\n        flex-shrink: 0;\n        padding: 16px;\n        box-sizing: border-box;\n        margin-right: 16px;\n        overflow-y: auto;\n      }\n    }\n    .model__table--container {\n      width: 100%;\n      min-width: 0;\n      background: #fff;\n      .model__table--title {\n        .model__table-title--bar {\n          width: 100%;\n          height: 8px;\n          background: var(--idooel-primary-color);\n          border-top-left-radius: 4px;\n          border-top-right-radius: 4px;\n        }\n        .model__table-title--text {\n          text-align: left;\n          padding: 16px;\n          font-size: 16px;\n          font-weight: bold;\n          background: #fff;\n          border-bottom: 1px solid;\n          border-color: var(--idoole-black-016);\n        }\n      }\n      .model__table--wrapper {\n        background: #fff;\n        .button-row__area {\n          width: 100%;\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          justify-content: space-between;\n          padding-top: 16px;\n          padding-bottom: 8px;\n          padding-right: 16px;\n        }\n        .g-table__wrapper {\n          .fsm {\n            cursor: pointer;\n            color: var(--idooel-primary-color);\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n",".ele.model__tree-table {\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper {\n  width: 240px;\n  background: #fff;\n  flex-shrink: 0;\n  padding: 16px;\n  box-sizing: border-box;\n  margin-right: 16px;\n  overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container {\n  width: 100%;\n  min-width: 0;\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar {\n  width: 100%;\n  height: 8px;\n  background: var(--idooel-primary-color);\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text {\n  text-align: left;\n  padding: 16px;\n  font-size: 16px;\n  font-weight: bold;\n  background: #fff;\n  border-bottom: 1px solid;\n  border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper {\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 16px;\n  padding-bottom: 8px;\n  padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm {\n  cursor: pointer;\n  color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-34cddd52_0", { source: ".ele.model__tree-table[data-v-34cddd52] {\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper[data-v-34cddd52] {\n  width: 240px;\n  background: #fff;\n  flex-shrink: 0;\n  padding: 16px;\n  box-sizing: border-box;\n  margin-right: 16px;\n  overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container[data-v-34cddd52] {\n  width: 100%;\n  min-width: 0;\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar[data-v-34cddd52] {\n  width: 100%;\n  height: 8px;\n  background: var(--idooel-primary-color);\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text[data-v-34cddd52] {\n  text-align: left;\n  padding: 16px;\n  font-size: 16px;\n  font-weight: bold;\n  background: #fff;\n  border-bottom: 1px solid;\n  border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper[data-v-34cddd52] {\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-34cddd52] {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 16px;\n  padding-bottom: 8px;\n  padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm[data-v-34cddd52] {\n  cursor: pointer;\n  color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/models/tree-table-model/src/index.vue","index.vue"],"names":[],"mappings":"AAonBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACnnBA;ADqnBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACnnBA;ADsnBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACpnBA;ADsnBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACpnBA;ADsnBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACpnBA;ADunBA;EACA,gBAAA;ACrnBA;ADsnBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACpnBA;ADunBA;EACA,eAAA;EACA,kCAAA;ACrnBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <section class=\"ele model__tree-table\">\n    <section class=\"model__tree-table--container\" v-if=\"showTree\">\n      <div class=\"model__tree--title\"></div>\n      <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\n        <ele-tree\n          :tree-data=\"treeData\"\n          :defaultExpandedKeys=\"defaultExpandedKeys\"\n          :defaultSelectedKeys=\"defaultSelectedKeys\"\n          @select=\"selectTreeNode\"\n          :replace-fields=\"mapFields\">\n        </ele-tree>\n      </section>\n    </section>\n    <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\n      <div class=\"model__table--title\" v-if=\"title\">\n        <template v-if=\"titleMode\">\n          <div :class=\"[`model__table-title--${titleMode}`]\"></div>\n        </template>\n        <template v-else>\n          <div class=\"model__table-title--text\">{{ title }}</div>\n        </template>\n      </div>\n      <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\n        <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\n        <div class=\"button-row__area\">\n          <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\n          <slot name=\"tags\"></slot>\n          <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\n        </div>\n        <ele-table\n          v-on=\"overrideTableEvent\"\n          :ref=\"tableRef\"\n          :row-selection=\"rowSelection\"\n          :loading=\"loading\" \n          :columns=\"columns\"\n          :total=\"total\"\n          :x=\"x\"\n          :y=\"y\"\n          :bordered=\"setBorder\"\n          :height=\"tableHeight\"\n          :width=\"tableWidth\"\n          :actions=\"actions\"\n          :pageSize=\"pageSize\"\n          :pageSizeOptions=\"pageSizeOptions\"\n          :data-source=\"tableData\"\n          @change-page=\"onChangePage\"\n        ></ele-table>\n      </section>\n    </section>\n    <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\n    <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\n    <ele-modal-table\n      :meta=\"modalTableMeta\"\n      v-model=\"modalTableValue\"\n      v-on=\"overrideModalTableEvent\"\n    ></ele-modal-table>\n  </section>\n</template>\n\n<script>\nimport { type, net, util } from '@idooel/shared'\nimport { v4 as uuidv4 } from 'uuid'\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\nexport default {\n  name: 'ele-tree-table-model',\n  props: {\n    title: {\n      type: [Object, String]\n    },\n    overHeight: {\n      type: Number,\n      default: 0\n    },\n    treeMeta: {\n      type: Object,\n      default: () => ({})\n    },\n    searchMeta: {\n      type: Object,\n      default: () => ({})\n    },\n    buttonGroupMeta: {\n      typeof: Object,\n      default: () => ({})\n    },\n    tableMeta: {\n      type: Object,\n      default: () => ({})\n    },\n    createMeta: {\n      type: Object\n    },\n    editMeta: {\n      type: Object\n    }\n  },\n  provide () {\n    return {\n      requestTreeData: this.requestTreeData,\n      requestTableData: this.requestTableData,\n      [CONTEXT]: () => {\n        return {\n          exposed: this.exposed\n        }\n      }\n    }\n  },\n  data () {\n    return {\n      tableHeight: 0,\n      tableWidth: 0,\n      modalFormMeta: {},\n      modalFormValue: false,\n      treeData: [],\n      tableData: [],\n      defaultExpandedKeys: [],\n      defaultSelectedKeys: [],\n      replaceFields: {\n        title: 'title',\n        children: 'children',\n        key: 'id'\n      },\n      loading: false,\n      total: 0,\n      tableQuerys: {},\n      resizeObserverModelTableWrapper: null,\n      modelTableWrapperHeight: 0,\n      currentTreeNodeData: {},\n      currentRowData: {},\n      treeWrapperHeight: 0,\n      currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\n      showFsmModal: false,\n      fsmMeta: {},\n      fsmContextProp: {},\n      modalTableValue: false,\n      modalTableMeta: {}\n    }\n  },\n  computed: {\n    setBorder () {\n      return this.tableMeta.bordered === false ? false : true\n    },\n    rowSelection () {\n      if (!this.currentTableMode) return void 0\n      return {\n        columnTitle: this.currentSelectionColumn.columnTitle,\n        fixed: true,\n        type: this.currentTableMode,\n        onChange: this.onChangeTableSelection\n      }\n    },\n    currentSelectionColumn () {\n      const { multiple } = this.tableMeta\n      const target = this.columns.find(item => Object.keys(item).includes('multiple'))\n      const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\n      if (target) {\n        return target\n      } else if (isGlobalExistMultiple) {\n        return { multiple }\n      }\n      return void 0\n    },\n    x () {\n      const { x } = this.tableMeta\n      return x\n    },\n    y () {\n      const { y } = this.tableMeta\n      return y\n    },\n    currentTableMode () {\n      if (!this.currentSelectionColumn) return void 0\n      const { multiple } = this.currentSelectionColumn\n      if (type.isBool(multiple)) {\n        if (multiple) {\n          return 'checkbox'\n        } else {\n          return 'radio'\n        }\n      } else {\n        return void 0\n      }\n    },\n    modelTableContainerRef () {\n      return uuidv4()\n    },\n    titleMode () {\n      if (type.isObject(this.title)) {\n        const { mode = '' } = this.title\n        return mode\n      }\n      return void 0\n    },\n    tableRef () {\n      return uuidv4()\n    },\n    exposed () {\n      return {\n        showModalForm: this.showModalForm,\n        closeModalForm: this.closeModalForm,\n        showModalTable: this.showModalTable,\n        closeModalTable: this.closeModalTable,\n        currentTableSelection: this.currentTableSelection,\n        currentTreeNode: this.currentTreeNodeData,\n        requestTableData: this.requestTableData,\n        refreshTreeData: this.refreshTreeData,\n        querys: this.tableQuerys,\n        currentRowData: this.currentRowData,\n        getCurrentRowData: this.getCurrentRowData,\n        setCurrentRowData: this.setCurrentRowData,\n        setCurrentTableSelection: this.setCurrentTableSelection,\n        getCurrentTableSelection: this.getCurrentTableSelection,\n        cleanCurrentModelEffect: this.cleanCurrentModelEffect,\n        route: this.$route,\n        _route: this.$route.query,\n        _routeMeta: this.$route.meta\n      }\n    },\n    overrideTableEvent () {\n      const events = this.actions.reduce((ret, action) => {\n        ret[action.eventName || action.key] = (e) => {\n          this.setCurrentRowData(e.exposed.currentRowData)\n          const { target } = action\n          const targetMeta = this.findMetaByKey(target)\n          const { mode } = targetMeta\n          mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\n          this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\n        }\n        return ret\n      }, {})\n      return {\n        ...this.$listeners,\n        ...events,\n        [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\n      }\n    },\n    overrideModalFormEvent () {\n      const { footerMeta } = this.modalFormMeta\n      const { elements = [] } = footerMeta || {}\n      const eles = type.isFunction(elements) ? elements.call(this) : elements\n      const events = eles.reduce((ret, ele) => {\n        ret[ele.eventName] = (e = {}) => {\n          if (ele.eventName === 'cancel') {\n            this.closeModalForm()\n          } else {\n            const { exposed = {} } = e\n            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\n          }\n        }\n        return ret\n      }, {})\n      return {\n        ...events\n      }\n    },\n    overrideModalTableEvent () {\n      const { footerMeta } = this.modalTableMeta\n      const { elements = [] } = footerMeta || {}\n      const eles = type.isFunction(elements) ? elements.call(this) : elements\n      const events = eles.reduce((ret, ele) => {\n        ret[ele.eventName] = (e = {}) => {\n          if (ele.eventName === 'cancel') {\n            this.closeModalTable()\n          } else {\n            const { exposed = {} } = e\n            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\n          }\n        }\n        return ret\n      }, {})\n      return {\n        ...events,\n        exposed: this.exposed\n      }\n    },\n    overrideButtonGroupEvent () {\n      const events = this.getButtonGroupElements.reduce((ret, ele) => {\n        ret[ele.eventName] = (e) => {\n          this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\n        }\n        return ret\n      }, {})\n      return {\n        ...this.$listeners,\n        ...events,\n        [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\n        exposed: this.exposed\n      }\n    },\n    showTree () {\n      return !!Object.keys(this.treeMeta).length\n    },\n    buttonGroup () {\n      return uuidv4()\n    },\n    searchArea () {\n      return uuidv4()\n    },\n    modelTreeWrapper () {\n      return uuidv4()\n    },\n    modelTableWrapper () {\n      return uuidv4()\n    },\n    actions () {\n      const { operations } = this.tableMeta\n      if (operations) {\n        return operations.elements\n      } else {\n        return []\n      }\n    },\n    pageSize () {\n      const { page = {} } = this.tableMeta\n      return page.pageSize || 10\n    },\n    pageSizeOptions () {\n      const { page = {} } = this.tableMeta\n      return page.pageSizeOptions || ['10', '20', '30', '40']\n    },\n    columns () {\n      const { columns, operations } = this.tableMeta\n      if (type.get(columns) === 'array') {\n        const columnsOptions = columns.map(item => {\n          const { mode = 'text' } = item\n          if (item.render) {\n            return {\n              ...item,\n              customRender: (text, record, index) => {\n                const { $createElement } = this\n                return item.render.call(this, \n                  { h: $createElement, ctx: this },\n                  text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \n                  record, index)\n              }\n            }\n          } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\n            const { [`${mode}Meta`]: modeMeta } = item\n            return {\n              ...item,\n              customRender: (text, record, index) => {\n                return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\n              }\n            }\n          }\n          return {\n            ...item\n          }\n        })\n        if (operations) {\n          return [\n            ...columnsOptions,\n            {\n              title: '操作',\n              width: operations.width,\n              key: 'action',\n              fixed: 'right',\n              scopedSlots: { customRender: 'action' }\n            }\n          ]\n        }\n        return columnsOptions\n      } else {\n        console.error('Error: columns is invalid, please check it')\n        return []\n      }\n    },\n    getButtonGroupElements () {\n      const { elements } = this.buttonGroupMeta\n      if (type.get(elements) === 'function') {\n        return elements.call(this)\n      } else if (type.get(elements) === 'array') {\n        return elements\n      } else {\n        return []\n      }\n    },\n    mapFields () {\n      const { replaceFields = {} } = this.treeMeta\n      const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\n      return mapFields\n    }\n  },\n  async created () {\n    if (this.showTree) {\n      this.treeData = await this.requestTreeData()\n      const [defaultTreeNode = {}] = this.treeData\n      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.currentTreeNodeData = defaultTreeNode\n    }\n    const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\n    const ctx = { ...this.currentTreeNodeData, _route: this.$route.query }\n    const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\n    if (overrideInit) {\n      this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\n    } else {\n      this.tableData = await this.requestTableData(initQuerys)\n    }\n  },\n  methods: {\n    async refreshTreeData () {\n      this.treeData = await this.requestTreeData()\n      const [defaultTreeNode = {}] = this.treeData\n      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\n      this.currentTreeNodeData = defaultTreeNode\n    },\n    dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\n      switch (mode) {\n        case BUILT_IN_TRIGGER.FSM:\n          this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { \n            url: 'api-fsm/workbench/fsm/auditFlow',\n            requestType: 'GET',\n            fieldMap: {\n              modelCode: 'modelCode',\n              businessId: 'businessId'\n            }\n          } : modeMeta)\n          break\n        case BUILT_IN_TRIGGER.ELE_MODAL_FORM:\n          this.modalFormMeta = modeMeta\n          this.showModalForm(modeMeta)\n          break\n        case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:\n          this.modalTableMeta = modeMeta\n          this.showModalTable(modeMeta)\n          break\n        default:\n          break\n      }\n    },\n    handleCloseFsmModal () {\n      this.showFsmModal = false\n    },\n    [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\n      this.fsmMeta = meta\n      this.fsmContextProp = record\n      this.showFsmModal = true\n    },\n    onChangeTableSelection (_, selectedRows = []) {\n      if (this.currentTableMode === 'radio') {\n        this.setCurrentTableSelection(selectedRows)\n        this.$emit('on-change-table-selection', this.currentTableSelection)\n        this.$emit('x:refresh-exposed', { exposed: this.exposed })\n      } else {\n        this.setCurrentTableSelection(selectedRows)\n        this.$emit('on-change-table-selection', this.currentTableSelection)\n        this.$emit('x:refresh-exposed', { exposed: this.exposed })\n      }\n    },\n    setCurrentTableSelection (props = {}) {\n      if (this.currentTableMode === 'radio') {\n        this.$set(this, 'currentTableSelection', (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {})\n      } else {\n        this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])\n      }\n    },\n    getCurrentTableSelection () {\n      return this.currentTableSelection\n    },\n    setCurrentRowData (props = {}) {\n      this.currentRowData = props\n    },\n    getCurrentRowData () {\n      return this.currentRowData\n    },\n    cleanCurrentModelEffect () {\n      this.setCurrentTableSelection()\n      this.setCurrentRowData({})\n    },\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\n      this.cleanCurrentModelEffect()\n      this.requestTableData()\n    },\n    [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\n      const { record = {} } = props\n      this.currentRowData = record\n      this.setCurrentRowData(record)\n      this.modalFormMeta = this.editMeta\n      this.modalFormValue = true\n    },\n    [BUILT_IN_EVENT_NAMES.CREATE] () {\n      this.modalFormMeta = this.createMeta\n      this.modalFormValue = true\n    },\n    showModalForm (modeMeta = {}) {\n      if (type.isStr(modeMeta)) {\n        const targetMeta = this.findMetaByKey(modeMeta)\n        this.modalFormMeta = targetMeta\n      } else {\n        this.modalFormMeta = modeMeta\n      }\n      this.modalFormValue = true\n    },\n    showModalTable (modeMeta = {}) {\n      console.log('showModalTable', modeMeta)\n      if (type.isStr(modeMeta)) {\n        const targetMeta = this.findMetaByKey(modeMeta)\n        this.modalTableMeta = targetMeta\n      } else {\n        this.modalTableMeta = modeMeta\n      }\n      this.modalTableValue = true\n    },\n    closeModalForm () {\n      this.modalFormValue = false\n    },\n    closeModalTable () {\n      console.log('closeModalTable')\n      this.modalTableValue = false\n    },\n    findMetaByKey (key) {\n      return this.$attrs[key] || {}\n    },\n    handleClickButtonGroup (props) {\n      const { eventName, target } = props\n      const targetMeta = this.findMetaByKey(target)\n      const { mode } = targetMeta\n      mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })\n      this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })\n    },\n    watchViewPort () {\n      const modelTableWrapper = this.$refs[this.modelTableWrapper]\n      const { top } = modelTableWrapper.getBoundingClientRect()\n      this.$refs[this.modelTreeWrapper].style.height = `calc(100vh - ${top}px)`\n    },\n    async onSearch (props) {\n      const { overrideInit = false } = this.tableMeta\n      this.tableQuerys = Object.assign(this.tableQuerys, props)\n      if (overrideInit) {\n        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n      } else {\n        this.tableData = await this.requestTableData()\n      }\n    },\n    async selectTreeNode (selectedKeys, e) {\n      const { fieldMap } = this.tableMeta\n      this.currentTreeNodeData = e.node.$vnode.data.props.dataRef || {}\n      //@deprecated '_' namespace is deprecated, please use 'exposed' instead\n      const execFieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, exposed: this.exposed, _route: this.exposed._route })\n      const { overrideInit = false } = this.tableMeta\n      if (overrideInit) {\n        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\n      } else {\n        this.tableData = await this.requestTableData(execFieldMapRet)\n      }\n    },\n    async requestTreeData () {\n      const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\n      const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\n      const ret = await net[requestType.toLowerCase()](\n        url,\n        { ...params, ...fieldMapRet }\n      ).then(resp => {\n        const { data } = resp || {}\n        return data\n      })\n      return ret\n    },\n    async onChangePage (page, pageSize) {\n      this.tableData = await this.requestTableData({ currentPage: page, pageSize })\n    },\n    async requestTableData (props = {}) {\n      const { url, requestType = 'GET', page = {} } = this.tableMeta\n      const { pageSize = 10 } = page\n      this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: 1, pageSize }, props)\n      this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\n      this.loading = true\n      const ret = await net[requestType.toLowerCase()](\n        url,\n        this.tableQuerys\n      ).then(resp => {\n        const { data = [], count } = resp || {}\n        this.total = count\n        this.loading = false\n        return (data || []).map(item => {\n          delete item.children\n          return {\n            key: uuidv4(),\n            ...item\n          }\n        })\n      })\n      this.cleanCurrentModelEffect()\n      this.tableData = ret\n      return ret\n    },\n    refreshTreeStatus (props = {}) {},\n    refreshTableStatus (props = {}) {},\n    calculateTableHeight () {\n      const currentViewportHeight = window.innerHeight\n      const tableRef = this.$refs[this.tableRef]\n      const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\n      this.tableWidth = width\n      this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\n    },\n    calculateTreeHeight () {\n      if (!this.showTree) return\n      const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\n      const { height } = modelTableContainerRef.getBoundingClientRect()\n      this.treeWrapperHeight = height\n    }\n  },\n  mounted () {\n    this.calculateTableHeight()\n    this.$nextTick(() => {\n      this.calculateTreeHeight()\n    })\n    this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\n      for (const _ of entries) {\n        requestAnimationFrame(() => {\n          this.calculateTableHeight()\n        })\n      }\n    })\n    this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\n  },\n  destroyed () {\n    this.resizeObserverModelTableWrapper.disconnect()\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n  &.model__tree-table {\n    background: transparent;                                                                                                                                                                                                                 \n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    .model__tree-table--container {\n      .model__tree--wrapper {\n        width: 240px;\n        background: #fff;\n        flex-shrink: 0;\n        padding: 16px;\n        box-sizing: border-box;\n        margin-right: 16px;\n        overflow-y: auto;\n      }\n    }\n    .model__table--container {\n      width: 100%;\n      min-width: 0;\n      background: #fff;\n      .model__table--title {\n        .model__table-title--bar {\n          width: 100%;\n          height: 8px;\n          background: var(--idooel-primary-color);\n          border-top-left-radius: 4px;\n          border-top-right-radius: 4px;\n        }\n        .model__table-title--text {\n          text-align: left;\n          padding: 16px;\n          font-size: 16px;\n          font-weight: bold;\n          background: #fff;\n          border-bottom: 1px solid;\n          border-color: var(--idoole-black-016);\n        }\n      }\n      .model__table--wrapper {\n        background: #fff;\n        .button-row__area {\n          width: 100%;\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          justify-content: space-between;\n          padding-top: 16px;\n          padding-bottom: 8px;\n          padding-right: 16px;\n        }\n        .g-table__wrapper {\n          .fsm {\n            cursor: pointer;\n            color: var(--idooel-primary-color);\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n",".ele.model__tree-table {\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper {\n  width: 240px;\n  background: #fff;\n  flex-shrink: 0;\n  padding: 16px;\n  box-sizing: border-box;\n  margin-right: 16px;\n  overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container {\n  width: 100%;\n  min-width: 0;\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar {\n  width: 100%;\n  height: 8px;\n  background: var(--idooel-primary-color);\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text {\n  text-align: left;\n  padding: 16px;\n  font-size: 16px;\n  font-weight: bold;\n  background: #fff;\n  border-bottom: 1px solid;\n  border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper {\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 16px;\n  padding-bottom: 8px;\n  padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm {\n  cursor: pointer;\n  color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$A = "data-v-7209faac";
+    const __vue_scope_id__$A = "data-v-34cddd52";
     /* module identifier */
     const __vue_module_identifier__$A = undefined;
     /* functional template */
@@ -4983,6 +4983,7 @@
                                           width: ele.width,
                                           height: ele.height,
                                           "modal-title": ele.modalTitle,
+                                          "cropper-config": ele.cropperConfig,
                                           "oper-text": ele.operText,
                                           disabled: _vm.executeExpression(
                                             ele._disabled
@@ -5115,11 +5116,11 @@
     /* style */
     const __vue_inject_styles__$v = function (inject) {
       if (!inject) return
-      inject("data-v-784922a8_0", { source: ".ele__form--wrapper[data-v-784922a8] {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/form/src/index.vue","index.vue"],"names":[],"mappings":"AAwTA;EACA,gBAAA;ACvTA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele__form--wrapper\">\n    <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\n      <a-row :gutter=\"24\">\n        <template v-for=\"ele in elements\">\n          <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\n            <template v-if=\"ele.type == 'Input'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-input \n                  @change=\"onChange($event, ele)\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  :max-length=\"ele.maxLength\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-input>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Textarea'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-textarea \n                  @change=\"onChange($event, ele)\"\n                  :max-length=\"ele.maxLength\"\n                  :autosize=\"ele.autosize\"\n                  :disabled=\"executeExpression(ele._disabled)\"\n                  :allow-clear=\"ele.allowClear\"\n                  :placeholder=\"ele.placeholder\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\n                  style=\"width:100%;\">\n                </ele-textarea>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Select'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-select \n                  :data-source=\"ele.optionList\" \n                  :disabled=\"executeExpression(ele._disabled)\"\n                  :multiple=\"ele.multiple\"\n                  :mode=\"ele.mode\"\n                  :code=\"ele.code\"\n                  :init=\"ele.init\"\n                  :url=\"ele.url\"\n                  :params=\"ele.params\" \n                  @change=\"onChange($event, ele)\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-select>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-upload'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  :ext=\"ele.ext\"\n                  :multiple=\"ele.multiple\"\n                  :accept=\"ele.accept\"\n                  :extensions=\"ele.extensions\"\n                  :size=\"ele.size\"\n                  :icon=\"ele.icon\"\n                  :url=\"ele.url\"\n                  :message=\"ele.message\" \n                  style=\"width:100%;\">\n                </ele-upload>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-date-range'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-date-range \n                :disabled=\"executeExpression(ele._disabled)\" \n                v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                style=\"width:100%;\">\n              </ele-date-range>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-date'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-date\n                  :format=\"ele.format\"\n                  :mode=\"ele.mode\"\n                  :show-time=\"ele.showTime\"\n                  :show-today=\"ele.showToday\"\n                  :value-format=\"ele.valueFormat\"\n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-date>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'SelectEntity'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-select-entity \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-select-entity>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-input-number \n                  @change=\"onChange($event, ele)\" \n                  :precision=\"ele.precision\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  v-bind=\"ele.props\" \n                  style=\"width:100%;\">\n                </ele-input-number>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Checkbox'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-checkbox \n                  :data-source=\"ele.optionList\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-checkbox>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Radio'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-radio \n                  @change=\"onChange($event, ele)\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  :data-source=\"ele.optionList\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-radio>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-form-img-crop\n                  @change=\"onChange($event, ele)\"\n                  :width=\"ele.width\"\n                  :height=\"ele.height\"\n                  :modal-title=\"ele.modalTitle\"\n                  :oper-text=\"ele.operText\"\n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-form-img-crop>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-tree-select'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-tree-select\n                  @change=\"onChange($event, ele)\"\n                  :disabled=\"executeExpression(ele._disabled)\"\n                  v-bind=\"ele.meta\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-tree-select>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-select-entity-modal-table\n                  @change=\"onChange($event, ele)\"\n                  :disabled=\"executeExpression(ele._disabled)\"\n                  v-bind=\"ele.meta\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-select-entity-modal-table>\n              </a-form-item>\n            </template>\n          </a-col>\n        </template>\n      </a-row>\n    </a-form>\n  </div>\n</template>\n\n<script>\nimport { parse } from '@idooel/expression'\nimport { type } from '@idooel/shared'\nimport { CONTEXT } from '../../utils'\nexport default {\n  name: 'ele-form',\n  props: {\n    value: {\n      type: Object,\n      default: () => ({})\n    },\n    disabled: {\n      type: [Boolean, String],\n      default: '_routeMeta.disabled'\n    },\n    formName: {\n      type: [Number, String],\n      default: 'coordinated'\n    },\n    elements: {\n      type: Array,\n      default: () => []\n    }\n  },\n  data () {\n    return {\n      formModel: {}\n    }\n  },\n  inject: {\n    [CONTEXT]: {\n      default: () => (() => ({}))\n    }\n  },\n  computed: {\n    contextData () {\n      return this[CONTEXT].call(this)\n    },\n    globalDisabled () {\n      return this.executeExpression(this.disabled)\n    },\n    form () {\n      const ref = this.$form.createForm(this, { name: this.formName })\n      return ref\n    },\n    exposedMethods () {\n      return {\n        setFieldsValue: this.setFieldsValue,\n        getFieldsValue: this.getFieldsValue\n      }\n    }\n  },\n  created () {\n    this.setDefaultValues()\n  },\n  methods: {\n    setFormModel (props = {}) {\n      this.formModel = props\n      this.dispatchExpression()\n    },\n    rebuildRules (rules = []) {\n      //TODO\n      rules.map(rule => {\n        const { validator } = rule\n        if (validator) {\n          validator.formModel = this.getFieldsValue()\n          validator.exposed = this.exposedMethods\n        }\n      })\n      return rules\n    },\n    dispatchExpression () {\n      this.evalDisabledExpression()\n      this.evalShowExpression()\n    },\n    evalDisabledExpression () {\n      this.elements.forEach(ele => {\n        if (this.globalDisabled) return this.$set(ele, '_disabled', true)\n        const { disabled } = ele\n        const ret = this.executeExpression(disabled)\n        this.$set(ele, '_disabled', ret)\n      })\n    },\n    evalShowExpression () {\n      this.elements.forEach(ele => {\n        const { show = true } = ele\n        const ret = this.executeExpression(show)\n        this.$set(ele, '_show', ret)\n      })\n    },\n    executeExpression (expression) {\n      if (type.isBool(expression)) return expression\n      if (type.isEmpty(expression)) return false\n      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\n    },\n    onChange (value, props) {\n      const { name } = props\n      this.$set(this.formModel, name, value)\n      this.dispatchExpression()\n      this.setFieldsValue({ [name]: value })\n      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\n    },\n    collectDefaultValues () {\n      const ret = this.elements.reduce((ret, props) => {\n        const { name, defaultValue } = props\n        if (defaultValue) {\n          ret[name] = defaultValue\n        }\n        return ret\n      }, {})\n      return ret\n    },\n    //TODO deprecated in the future, need to be implemented in the outer component\n    setDefaultValues () {\n      const defaultValues = this.collectDefaultValues()\n      this.setFormModel(defaultValues)\n      this.setFieldsValue(defaultValues)\n    },\n    validateFields () {\n      let ret = false\n      this.form.validateFields((error, values) => {\n        ret = !error\n      })\n      return ret\n    },\n    setFieldsValue (props = {}) {\n      this.$nextTick(() => {\n        this.form.setFieldsValue(props)\n      })\n    },\n    getFieldsValue (fieldNames) {\n      return this.form.getFieldsValue(fieldNames)\n    }\n  },\n  mounted() {\n    this.$emit('x:mounted', { setFormModel: this.setFormModel })\n    this.dispatchExpression()\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele__form--wrapper {\n  background: #fff;\n  .ant-form-item {\n  }\n}\n</style>",".ele__form--wrapper {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-190866fc_0", { source: ".ele__form--wrapper[data-v-190866fc] {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/form/src/index.vue","index.vue"],"names":[],"mappings":"AAyTA;EACA,gBAAA;ACxTA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele__form--wrapper\">\n    <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\n      <a-row :gutter=\"24\">\n        <template v-for=\"ele in elements\">\n          <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\n            <template v-if=\"ele.type == 'Input'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-input \n                  @change=\"onChange($event, ele)\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  :max-length=\"ele.maxLength\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-input>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Textarea'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-textarea \n                  @change=\"onChange($event, ele)\"\n                  :max-length=\"ele.maxLength\"\n                  :autosize=\"ele.autosize\"\n                  :disabled=\"executeExpression(ele._disabled)\"\n                  :allow-clear=\"ele.allowClear\"\n                  :placeholder=\"ele.placeholder\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\n                  style=\"width:100%;\">\n                </ele-textarea>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Select'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-select \n                  :data-source=\"ele.optionList\" \n                  :disabled=\"executeExpression(ele._disabled)\"\n                  :multiple=\"ele.multiple\"\n                  :mode=\"ele.mode\"\n                  :code=\"ele.code\"\n                  :init=\"ele.init\"\n                  :url=\"ele.url\"\n                  :params=\"ele.params\" \n                  @change=\"onChange($event, ele)\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-select>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-upload'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  :ext=\"ele.ext\"\n                  :multiple=\"ele.multiple\"\n                  :accept=\"ele.accept\"\n                  :extensions=\"ele.extensions\"\n                  :size=\"ele.size\"\n                  :icon=\"ele.icon\"\n                  :url=\"ele.url\"\n                  :message=\"ele.message\" \n                  style=\"width:100%;\">\n                </ele-upload>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-date-range'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-date-range \n                :disabled=\"executeExpression(ele._disabled)\" \n                v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                style=\"width:100%;\">\n              </ele-date-range>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-date'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-date\n                  :format=\"ele.format\"\n                  :mode=\"ele.mode\"\n                  :show-time=\"ele.showTime\"\n                  :show-today=\"ele.showToday\"\n                  :value-format=\"ele.valueFormat\"\n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-date>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'SelectEntity'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-select-entity \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-select-entity>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-input-number \n                  @change=\"onChange($event, ele)\" \n                  :precision=\"ele.precision\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  v-bind=\"ele.props\" \n                  style=\"width:100%;\">\n                </ele-input-number>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Checkbox'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-checkbox \n                  :data-source=\"ele.optionList\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-checkbox>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'Radio'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-radio \n                  @change=\"onChange($event, ele)\" \n                  :disabled=\"executeExpression(ele._disabled)\" \n                  :data-source=\"ele.optionList\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-radio>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-form-img-crop\n                  @change=\"onChange($event, ele)\"\n                  :width=\"ele.width\"\n                  :height=\"ele.height\"\n                  :modal-title=\"ele.modalTitle\"\n                  :cropper-config=\"ele.cropperConfig\"\n                  :oper-text=\"ele.operText\"\n                  :disabled=\"executeExpression(ele._disabled)\" \n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-form-img-crop>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-tree-select'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-tree-select\n                  @change=\"onChange($event, ele)\"\n                  :disabled=\"executeExpression(ele._disabled)\"\n                  v-bind=\"ele.meta\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-tree-select>\n              </a-form-item>\n            </template>\n            <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\n              <a-form-item :label=\"`${ele.label}：`\">\n                <ele-select-entity-modal-table\n                  @change=\"onChange($event, ele)\"\n                  :disabled=\"executeExpression(ele._disabled)\"\n                  v-bind=\"ele.meta\"\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \n                  style=\"width:100%;\">\n                </ele-select-entity-modal-table>\n              </a-form-item>\n            </template>\n          </a-col>\n        </template>\n      </a-row>\n    </a-form>\n  </div>\n</template>\n\n<script>\nimport { parse } from '@idooel/expression'\nimport { type } from '@idooel/shared'\nimport { CONTEXT } from '../../utils'\nexport default {\n  name: 'ele-form',\n  props: {\n    value: {\n      type: Object,\n      default: () => ({})\n    },\n    disabled: {\n      type: [Boolean, String],\n      default: '_routeMeta.disabled'\n    },\n    formName: {\n      type: [Number, String],\n      default: 'coordinated'\n    },\n    elements: {\n      type: Array,\n      default: () => []\n    }\n  },\n  data () {\n    return {\n      formModel: {}\n    }\n  },\n  inject: {\n    [CONTEXT]: {\n      default: () => (() => ({}))\n    }\n  },\n  computed: {\n    contextData () {\n      return this[CONTEXT].call(this)\n    },\n    globalDisabled () {\n      return this.executeExpression(this.disabled)\n    },\n    form () {\n      const ref = this.$form.createForm(this, { name: this.formName })\n      return ref\n    },\n    exposedMethods () {\n      return {\n        setFieldsValue: this.setFieldsValue,\n        getFieldsValue: this.getFieldsValue\n      }\n    }\n  },\n  created () {\n    this.setDefaultValues()\n  },\n  methods: {\n    setFormModel (props = {}) {\n      this.formModel = props\n      this.dispatchExpression()\n    },\n    rebuildRules (rules = []) {\n      //TODO\n      rules.map(rule => {\n        const { validator } = rule\n        if (validator) {\n          validator.formModel = this.getFieldsValue()\n          validator.exposed = this.exposedMethods\n        }\n      })\n      return rules\n    },\n    dispatchExpression () {\n      this.evalDisabledExpression()\n      this.evalShowExpression()\n    },\n    evalDisabledExpression () {\n      this.elements.forEach(ele => {\n        if (this.globalDisabled) return this.$set(ele, '_disabled', true)\n        const { disabled } = ele\n        const ret = this.executeExpression(disabled)\n        this.$set(ele, '_disabled', ret)\n      })\n    },\n    evalShowExpression () {\n      this.elements.forEach(ele => {\n        const { show = true } = ele\n        const ret = this.executeExpression(show)\n        this.$set(ele, '_show', ret)\n      })\n    },\n    executeExpression (expression) {\n      if (type.isBool(expression)) return expression\n      if (type.isEmpty(expression)) return false\n      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\n    },\n    onChange (value, props) {\n      const { name } = props\n      this.$set(this.formModel, name, value)\n      this.dispatchExpression()\n      this.setFieldsValue({ [name]: value })\n      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\n    },\n    collectDefaultValues () {\n      const ret = this.elements.reduce((ret, props) => {\n        const { name, defaultValue } = props\n        if (defaultValue) {\n          ret[name] = defaultValue\n        }\n        return ret\n      }, {})\n      return ret\n    },\n    //TODO deprecated in the future, need to be implemented in the outer component\n    setDefaultValues () {\n      const defaultValues = this.collectDefaultValues()\n      this.setFormModel(defaultValues)\n      this.setFieldsValue(defaultValues)\n    },\n    validateFields () {\n      let ret = false\n      this.form.validateFields((error, values) => {\n        ret = !error\n      })\n      return ret\n    },\n    setFieldsValue (props = {}) {\n      this.$nextTick(() => {\n        this.form.setFieldsValue(props)\n      })\n    },\n    getFieldsValue (fieldNames) {\n      return this.form.getFieldsValue(fieldNames)\n    }\n  },\n  mounted() {\n    this.$emit('x:mounted', { setFormModel: this.setFormModel })\n    this.dispatchExpression()\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele__form--wrapper {\n  background: #fff;\n  .ant-form-item {\n  }\n}\n</style>",".ele__form--wrapper {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$v = "data-v-784922a8";
+    const __vue_scope_id__$v = "data-v-190866fc";
     /* module identifier */
     const __vue_module_identifier__$v = undefined;
     /* functional template */
@@ -5504,7 +5505,7 @@
       async saveToServerAsyncPage(payloads = {}) {
         shared.net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, {
           headers: {
-            'Content-Type': 'multipart/form-data'
+            'Content-Type': 'application/json'
           }
         }).then(resp => {
           const {
@@ -5754,11 +5755,11 @@
     /* style */
     const __vue_inject_styles__$t = function (inject) {
       if (!inject) return
-      inject("data-v-d2929816_0", { source: "[data-v-d2929816] .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n[data-v-d2929816] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-d2929816] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-d2929816] {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-d2929816] {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-d2929816] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-d2929816] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-d2929816] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-d2929816] {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-d2929816] {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-d2929816] {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-d2929816] {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-d2929816] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-d2929816] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-d2929816] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/upload/src/index.vue","index.vue"],"names":[],"mappings":"AA2WA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;AC7WA;AD0WA;EACA,0DAAA;ACxWA;AD4WA;EACA,WAAA;ACzWA;AD0WA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACxWA;ADyWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACvWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADyWA;EACA,iBAAA;ACvWA;ADwWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACtWA;ADwWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACtWA;AD2WA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACzWA;AD2WA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,uBAAA;ACxWA;AD2WA;EACA,gBAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,eAAA;ACxWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele-upload__wrapper\">\n    <FileUpload\n      class=\"ele-upload__inner\"\n      v-show=\"isShowUploadContainer\"\n      v-model=\"files\"\n      :ref=\"uploadRef\"\n      :drop=\"drop\"\n      :chunk-enabled=\"chunkEnabled\"\n      :chunk=\"chunkConfig\"\n      :accept=\"accept\"\n      :extensions=\"extensions\"\n      :size=\"fileSizeLimit\"\n      :post-action=\"postAction\"\n      :multiple=\"multiple\"\n      :headers=\"headers\"\n      :maximum=\"getMaximum\"\n      @input-file=\"onWatchInputFiles\"\n      @input=\"onWatchFiles\"\n      style=\"width: 100%;\">\n      <section class=\"ele-upload__area\">\n        <div class=\"ele-upload__area--icon\">\n          <template v-if=\"iconIsZhWrod\">\n            {{ icon }}\n          </template>\n          <template v-else>\n            <ele-icon :type=\"icon\"></ele-icon>\n          </template>\n        </div>\n        <div class=\"ele-upload__area--text\">\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\n        </div>\n      </section>\n    </FileUpload>\n    <section class=\"ele-files__wrapper\">\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\n          <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\n          </div>\n        </div>\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nimport FileUpload from 'vue-upload-component'\nimport { v4 as uuidv4 } from 'uuid'\nimport { route, net, type } from '@idooel/shared'\nexport default {\n  name: 'ele-upload',\n  components: {\n    FileUpload\n  },\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    url: {\n      type: String,\n      //TODO\n      default: `zuul/api-file/workbench/file`\n    },\n    icon: {\n      type: String,\n      default: '上传'\n    },\n    size: {\n      type: Number,\n      default: 100\n    },\n    message: {\n      type: String,\n      default: '单击或拖动文件到该区域以上传'\n    },\n    ext: {\n      type: String\n    },\n    extensions: {\n      type: String\n    },\n    accept: {\n      type: String\n    },\n    maximum: {\n      type: Number,\n      default: 10\n    },\n    multiple: {\n      type: Boolean,\n      default: false\n    },\n    drop: {\n      type: Boolean,\n      default: true\n    },\n    value: {\n      type: [String, Array]\n    },\n    querys: {\n      type: Object,\n      default: () => ({\n        _csrf: localStorage.getItem('token'),\n        _t: new Date().valueOf()\n      })\n    },\n    headers: {\n      type: Object,\n      default: () => ({\n        'X-XSRF-TOKEN': localStorage.getItem('token')\n      })\n    },\n    byteConversion: {\n      type: Number,\n      default: 1024 * 1024\n    },\n    chunkEnabled: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      files: [],\n      buildedFiles: [],\n      saveToServerAsyncPageTimer: null\n    }\n  },\n  watch: {\n    value: {\n      async handler (value) {\n        if (type.isArray(value)) {\n          // multiple\n        } else if (type.isEmpty(value)) {\n          this.files = []\n          this.buildedFiles = []\n        } else {\n          // single\n          this.fetchFileWithFileId()\n        }\n      },\n      immediate: true\n    }\n  },\n  computed: {\n    prefixPath () {\n      return window.prefixPath\n    },\n    iconIsZhWrod () {\n      return type.isZhWord(this.icon)\n    },\n    getPayloads () {\n      return {\n        override: false\n      }\n    },\n    chunkConfig () {\n      return {\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\n        headers: {\n          ...this.headers\n        },\n        minSize: 3 * this.byteConversion,\n        maxActive: 3,\n        maxRetries: 5,\n        startBody: {\n          override: true,\n          path: '/cw'\n        },\n        uploadBody: {\n          override: true,\n          path: '/cw'\n        },\n        finishBody: {\n          override: true,\n          path: '/cw'\n        }\n      }\n    },\n    isFileUploadSuccessed () {\n      return this.files.every(file => file.success)\n    },\n    isShowUploadContainer () {\n      if (this.multiple) {\n        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\n          return false\n        } else {\n          return true\n        }\n      } else {\n        const [file = {}] = this.buildedFiles\n        if (this.buildedFiles.length < 1) {\n          return true\n        }\n        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\n          return false\n        } else {\n          return true\n        }\n      }\n    },\n    getMaximum () {\n      return this.multiple ? this.maximum : 1\n    },\n    fileSizeLimit () {\n      return this.size * this.byteConversion\n    },\n    postAction () {\n      const ret = route.toQueryString(this.querys)\n      return `${this.prefixPath}${this.url}?${ret}`\n    },\n    uploadRef () {\n      return uuidv4()\n    },\n    fileSuffixIcon () {\n      return {\n        'doc': { name: 'icon-doc' },\n        'html': { name: 'icon-html' },\n        'mp4': { name: 'icon-mp' },\n        'pdf': { name: 'icon-pdf' },\n        'ppt': { name: 'icon-ppt' },\n        'psd': { name: 'icon-psd' },\n        'rtf': { name: 'icon-rtf' },\n        'txt': { name: 'icon-txt' },\n        'vis': { name: 'icon-vis' },\n        'xls': { name: 'icon-xls' },\n        'xml': { name: 'icon-xml' },\n        'zip': { name: 'icon-zip' },\n        'jpg': { name: 'icon-img' },\n        'mp3': { name: 'icon-mp1' },\n      }\n    },\n    fileIds () {\n      const fileIds = this.buildedFiles.map(file => {\n        return file.fileID\n      })\n      return this.multiple ? fileIds : fileIds[0]\n    },\n    fileResponseData () {\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\n    }\n  },\n  methods: {\n    async fetchFileWithFileId () {\n      if (!this.value) return\n      await net.get(\n        `/api-file/file/${this.value}`\n      ).then(resp => {\n        const { data } = resp\n        this.buildedFiles = [data]\n        this.files = [data]\n      })\n    },\n    handleClickDownload (file) {\n      const { fileID: fileId } = file\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\n    },\n    handleClickDelete (file) {\n      this.$refs[this.uploadRef].remove(file)\n      const { fileID } = file\n      this.files = this.files.filter(file => file.fileID !== fileID)\n      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\n      this.$emit('change', this.fileIds)\n    },\n    onWatchFiles (files) {\n      this.files = files\n      this.buildedFiles = this.files.map(file => {\n        return {\n          ...file.response.data,\n          ...file\n        }\n      })\n      if (this.isFileUploadSuccessed) {\n        this.$emit('change', this.fileIds)\n        this.$emit('on-success', this.fileResponseData)\n      }\n    },\n    async saveToServerAsyncPage (payloads = {}) {\n      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \n        headers: {\n          'Content-Type': 'multipart/form-data'\n        }\n      }).then(resp =>{\n        const { data } = resp\n        if (data !== 'saveToServerAsyncPage') {\n          clearInterval(this.saveToServerAsyncPageTimer)\n        }\n      })\n      // const ret = await net.post({\n      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\n      //   method: 'POST',\n      //   data: { ...payloads }\n      // }).then(resp => {\n      //   const { data: { data, code, message } } = resp\n      //   if (code !== '2000') {\n      //     this.$Message.error(message)\n      //     return\n      //   }\n      //   if (data !== 'saveToServerAsyncPage') {\n      //     clearInterval(timer)\n      //     const { fileID, size } = data\n      //     this.$emit('on-success', { ...data, fileId: fileID })\n      //     this.$Message.success('同步成功')\n      //     return { fileId: fileID, size }\n      //   }\n      // })\n      // return ret\n    },\n    onWatchInputFiles (newFile, oldFile) {\n      if (newFile && !oldFile) {\n        // add file\n        console.log('add', newFile)\n      }\n      if (newFile && oldFile) {\n        // update file\n        console.log('update', newFile)\n        const { success, active, chunk, response } = newFile\n        if (chunk && success && !active) {\n          console.log('chunk end')\n          const { data: { file, type } } = response\n          const payloads = {\n            filePath: file.match(/\\/cw(.*)/)[0],\n            asyncID: uuidv4(),\n            isDeleteOrigin: false,\n            toImage: type === 'pdf' ? true : false,\n            unzip: type === 'zip' ? true : false,\n            _csrf: localStorage.getItem('token')\n          }\n          this.saveToServerAsyncPageTimer = setInterval(() => {\n            this.saveToServerAsyncPage(payloads)\n          }, 2000)\n        }\n      }\n      if (!newFile && oldFile) {\n        // delete file\n        console.log('delete')\n      }\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\n        if (!this.$refs[this.uploadRef].active) {\n          this.$refs[this.uploadRef].active = true\n        }\n      }\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  &:hover {\n    border-color: var(--idooel-form-upload-border-hover-color);\n  }\n  border-radius: var(--idooel-form-border-radius);\n}\n.ele-upload__wrapper {\n  width: 100%;\n  .ele-upload__area {\n    padding: 16px;\n    width: 100%;\n    height: 80px;\n    display: flex;\n    flex-direction: row;\n    .ele-upload__area--icon {\n      color: var(--idooel-primary-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      font-size: 16x;\n      .anticon-cloud-upload {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n      .anticon {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n    }\n    .ele-upload__area--text {\n      margin-left: 16px;\n      .ele-upload__message {\n        font-size: 16px;\n        color: var(--idoole-black-088);\n        text-align: left;\n      }\n      .ele-upload__ext {\n        text-align: left;\n        font-size: 14px;\n        color: var(--idoole-black-06);\n      }\n    }\n  }\n  .ele-files__wrapper {\n    .ele-file__item {\n      width: 100%;\n      margin-top: 8px;\n      padding: 8px 12px;\n      border-radius: var(--idooel-form-border-radius);\n      background: var(--idooel-form-upload-bg-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      .ele-file__suffix--icon {}\n      .ele-file__name {\n        flex: 1;\n        text-align: left;\n        white-space: nowrap;\n        overflow: hidden;\n        font-size: 14px;\n        margin-left: 8px;\n        cursor: pointer;\n        .ele-file__inner {\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n      .ele-file__delete {\n        margin-left: 8px;\n        .ele-file__delete--icon {\n          margin-left: 8px;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>","::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-3e301bd4_0", { source: "[data-v-3e301bd4] .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n[data-v-3e301bd4] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-3e301bd4] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-3e301bd4] {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-3e301bd4] {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-3e301bd4] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-3e301bd4] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-3e301bd4] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-3e301bd4] {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-3e301bd4] {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-3e301bd4] {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-3e301bd4] {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-3e301bd4] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-3e301bd4] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-3e301bd4] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/upload/src/index.vue","index.vue"],"names":[],"mappings":"AA2WA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;AC7WA;AD0WA;EACA,0DAAA;ACxWA;AD4WA;EACA,WAAA;ACzWA;AD0WA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACxWA;ADyWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACvWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADyWA;EACA,iBAAA;ACvWA;ADwWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACtWA;ADwWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACtWA;AD2WA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACzWA;AD2WA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,uBAAA;ACxWA;AD2WA;EACA,gBAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,eAAA;ACxWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele-upload__wrapper\">\n    <FileUpload\n      class=\"ele-upload__inner\"\n      v-show=\"isShowUploadContainer\"\n      v-model=\"files\"\n      :ref=\"uploadRef\"\n      :drop=\"drop\"\n      :chunk-enabled=\"chunkEnabled\"\n      :chunk=\"chunkConfig\"\n      :accept=\"accept\"\n      :extensions=\"extensions\"\n      :size=\"fileSizeLimit\"\n      :post-action=\"postAction\"\n      :multiple=\"multiple\"\n      :headers=\"headers\"\n      :maximum=\"getMaximum\"\n      @input-file=\"onWatchInputFiles\"\n      @input=\"onWatchFiles\"\n      style=\"width: 100%;\">\n      <section class=\"ele-upload__area\">\n        <div class=\"ele-upload__area--icon\">\n          <template v-if=\"iconIsZhWrod\">\n            {{ icon }}\n          </template>\n          <template v-else>\n            <ele-icon :type=\"icon\"></ele-icon>\n          </template>\n        </div>\n        <div class=\"ele-upload__area--text\">\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\n        </div>\n      </section>\n    </FileUpload>\n    <section class=\"ele-files__wrapper\">\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\n        <div class=\"ele-file__suffix--icon\">\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\n        </div>\n        <div class=\"ele-file__name\">\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\n          <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\n          </div>\n        </div>\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\n            <ele-icon type=\"delete\"></ele-icon>\n          </span>\n        </div>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nimport FileUpload from 'vue-upload-component'\nimport { v4 as uuidv4 } from 'uuid'\nimport { route, net, type } from '@idooel/shared'\nexport default {\n  name: 'ele-upload',\n  components: {\n    FileUpload\n  },\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    url: {\n      type: String,\n      //TODO\n      default: `zuul/api-file/workbench/file`\n    },\n    icon: {\n      type: String,\n      default: '上传'\n    },\n    size: {\n      type: Number,\n      default: 100\n    },\n    message: {\n      type: String,\n      default: '单击或拖动文件到该区域以上传'\n    },\n    ext: {\n      type: String\n    },\n    extensions: {\n      type: String\n    },\n    accept: {\n      type: String\n    },\n    maximum: {\n      type: Number,\n      default: 10\n    },\n    multiple: {\n      type: Boolean,\n      default: false\n    },\n    drop: {\n      type: Boolean,\n      default: true\n    },\n    value: {\n      type: [String, Array]\n    },\n    querys: {\n      type: Object,\n      default: () => ({\n        _csrf: localStorage.getItem('token'),\n        _t: new Date().valueOf()\n      })\n    },\n    headers: {\n      type: Object,\n      default: () => ({\n        'X-XSRF-TOKEN': localStorage.getItem('token')\n      })\n    },\n    byteConversion: {\n      type: Number,\n      default: 1024 * 1024\n    },\n    chunkEnabled: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {\n      files: [],\n      buildedFiles: [],\n      saveToServerAsyncPageTimer: null\n    }\n  },\n  watch: {\n    value: {\n      async handler (value) {\n        if (type.isArray(value)) {\n          // multiple\n        } else if (type.isEmpty(value)) {\n          this.files = []\n          this.buildedFiles = []\n        } else {\n          // single\n          this.fetchFileWithFileId()\n        }\n      },\n      immediate: true\n    }\n  },\n  computed: {\n    prefixPath () {\n      return window.prefixPath\n    },\n    iconIsZhWrod () {\n      return type.isZhWord(this.icon)\n    },\n    getPayloads () {\n      return {\n        override: false\n      }\n    },\n    chunkConfig () {\n      return {\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\n        headers: {\n          ...this.headers\n        },\n        minSize: 3 * this.byteConversion,\n        maxActive: 3,\n        maxRetries: 5,\n        startBody: {\n          override: true,\n          path: '/cw'\n        },\n        uploadBody: {\n          override: true,\n          path: '/cw'\n        },\n        finishBody: {\n          override: true,\n          path: '/cw'\n        }\n      }\n    },\n    isFileUploadSuccessed () {\n      return this.files.every(file => file.success)\n    },\n    isShowUploadContainer () {\n      if (this.multiple) {\n        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\n          return false\n        } else {\n          return true\n        }\n      } else {\n        const [file = {}] = this.buildedFiles\n        if (this.buildedFiles.length < 1) {\n          return true\n        }\n        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\n          return false\n        } else {\n          return true\n        }\n      }\n    },\n    getMaximum () {\n      return this.multiple ? this.maximum : 1\n    },\n    fileSizeLimit () {\n      return this.size * this.byteConversion\n    },\n    postAction () {\n      const ret = route.toQueryString(this.querys)\n      return `${this.prefixPath}${this.url}?${ret}`\n    },\n    uploadRef () {\n      return uuidv4()\n    },\n    fileSuffixIcon () {\n      return {\n        'doc': { name: 'icon-doc' },\n        'html': { name: 'icon-html' },\n        'mp4': { name: 'icon-mp' },\n        'pdf': { name: 'icon-pdf' },\n        'ppt': { name: 'icon-ppt' },\n        'psd': { name: 'icon-psd' },\n        'rtf': { name: 'icon-rtf' },\n        'txt': { name: 'icon-txt' },\n        'vis': { name: 'icon-vis' },\n        'xls': { name: 'icon-xls' },\n        'xml': { name: 'icon-xml' },\n        'zip': { name: 'icon-zip' },\n        'jpg': { name: 'icon-img' },\n        'mp3': { name: 'icon-mp1' },\n      }\n    },\n    fileIds () {\n      const fileIds = this.buildedFiles.map(file => {\n        return file.fileID\n      })\n      return this.multiple ? fileIds : fileIds[0]\n    },\n    fileResponseData () {\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\n    }\n  },\n  methods: {\n    async fetchFileWithFileId () {\n      if (!this.value) return\n      await net.get(\n        `/api-file/file/${this.value}`\n      ).then(resp => {\n        const { data } = resp\n        this.buildedFiles = [data]\n        this.files = [data]\n      })\n    },\n    handleClickDownload (file) {\n      const { fileID: fileId } = file\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\n    },\n    handleClickDelete (file) {\n      this.$refs[this.uploadRef].remove(file)\n      const { fileID } = file\n      this.files = this.files.filter(file => file.fileID !== fileID)\n      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\n      this.$emit('change', this.fileIds)\n    },\n    onWatchFiles (files) {\n      this.files = files\n      this.buildedFiles = this.files.map(file => {\n        return {\n          ...file.response.data,\n          ...file\n        }\n      })\n      if (this.isFileUploadSuccessed) {\n        this.$emit('change', this.fileIds)\n        this.$emit('on-success', this.fileResponseData)\n      }\n    },\n    async saveToServerAsyncPage (payloads = {}) {\n      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \n        headers: {\n          'Content-Type': 'application/json'\n        }\n      }).then(resp =>{\n        const { data } = resp\n        if (data !== 'saveToServerAsyncPage') {\n          clearInterval(this.saveToServerAsyncPageTimer)\n        }\n      })\n      // const ret = await net.post({\n      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\n      //   method: 'POST',\n      //   data: { ...payloads }\n      // }).then(resp => {\n      //   const { data: { data, code, message } } = resp\n      //   if (code !== '2000') {\n      //     this.$Message.error(message)\n      //     return\n      //   }\n      //   if (data !== 'saveToServerAsyncPage') {\n      //     clearInterval(timer)\n      //     const { fileID, size } = data\n      //     this.$emit('on-success', { ...data, fileId: fileID })\n      //     this.$Message.success('同步成功')\n      //     return { fileId: fileID, size }\n      //   }\n      // })\n      // return ret\n    },\n    onWatchInputFiles (newFile, oldFile) {\n      if (newFile && !oldFile) {\n        // add file\n        console.log('add', newFile)\n      }\n      if (newFile && oldFile) {\n        // update file\n        console.log('update', newFile)\n        const { success, active, chunk, response } = newFile\n        if (chunk && success && !active) {\n          console.log('chunk end')\n          const { data: { file, type } } = response\n          const payloads = {\n            filePath: file.match(/\\/cw(.*)/)[0],\n            asyncID: uuidv4(),\n            isDeleteOrigin: false,\n            toImage: type === 'pdf' ? true : false,\n            unzip: type === 'zip' ? true : false,\n            _csrf: localStorage.getItem('token')\n          }\n          this.saveToServerAsyncPageTimer = setInterval(() => {\n            this.saveToServerAsyncPage(payloads)\n          }, 2000)\n        }\n      }\n      if (!newFile && oldFile) {\n        // delete file\n        console.log('delete')\n      }\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\n        if (!this.$refs[this.uploadRef].active) {\n          this.$refs[this.uploadRef].active = true\n        }\n      }\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  &:hover {\n    border-color: var(--idooel-form-upload-border-hover-color);\n  }\n  border-radius: var(--idooel-form-border-radius);\n}\n.ele-upload__wrapper {\n  width: 100%;\n  .ele-upload__area {\n    padding: 16px;\n    width: 100%;\n    height: 80px;\n    display: flex;\n    flex-direction: row;\n    .ele-upload__area--icon {\n      color: var(--idooel-primary-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      font-size: 16x;\n      .anticon-cloud-upload {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n      .anticon {\n        font-size: 48px;\n        color: var(--idooel-primary-color);\n      }\n    }\n    .ele-upload__area--text {\n      margin-left: 16px;\n      .ele-upload__message {\n        font-size: 16px;\n        color: var(--idoole-black-088);\n        text-align: left;\n      }\n      .ele-upload__ext {\n        text-align: left;\n        font-size: 14px;\n        color: var(--idoole-black-06);\n      }\n    }\n  }\n  .ele-files__wrapper {\n    .ele-file__item {\n      width: 100%;\n      margin-top: 8px;\n      padding: 8px 12px;\n      border-radius: var(--idooel-form-border-radius);\n      background: var(--idooel-form-upload-bg-color);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      .ele-file__suffix--icon {}\n      .ele-file__name {\n        flex: 1;\n        text-align: left;\n        white-space: nowrap;\n        overflow: hidden;\n        font-size: 14px;\n        margin-left: 8px;\n        cursor: pointer;\n        .ele-file__inner {\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n      }\n      .ele-file__delete {\n        margin-left: 8px;\n        .ele-file__delete--icon {\n          margin-left: 8px;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n}\n</style>","::v-deep .ele-upload__inner {\n  opacity: 1 !important;\n  cursor: pointer;\n  border: 1px dashed var(--idooel-form-title-border-color);\n  background: var(--idooel-form-upload-bg-color) !important;\n  border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n  padding: 16px;\n  width: 100%;\n  height: 80px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n  color: var(--idooel-primary-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n  font-size: 16px;\n  color: var(--idoole-black-088);\n  text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n  text-align: left;\n  font-size: 14px;\n  color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  border-radius: var(--idooel-form-border-radius);\n  background: var(--idooel-form-upload-bg-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n  flex: 1;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  font-size: 14px;\n  margin-left: 8px;\n  cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$t = "data-v-d2929816";
+    const __vue_scope_id__$t = "data-v-3e301bd4";
     /* module identifier */
     const __vue_module_identifier__$t = undefined;
     /* functional template */
@@ -13397,6 +13398,7 @@
   //
   //
   //
+  //
 
   var script$5 = {
     name: 'ele-form-img-crop',
@@ -13422,6 +13424,14 @@
       height: {
         type: [Number, String],
         default: 200
+      },
+      cropperConfig: {
+        type: Object,
+        default: () => {
+          return {
+            aspectRatio: 16 / 9
+          };
+        }
       }
     },
     data() {
@@ -13499,7 +13509,11 @@
         ),
         _vm._v(" "),
         _c("ele-modal-img-crop", {
-          attrs: { imageId: _vm.value, title: _vm.modalTitle },
+          attrs: {
+            cropperConfig: _vm.cropperConfig,
+            imageId: _vm.value,
+            title: _vm.modalTitle,
+          },
           on: { change: _vm.onChangeModalCropImg },
           model: {
             value: _vm.showModalImgCropValue,
@@ -13519,11 +13533,11 @@
     /* style */
     const __vue_inject_styles__$5 = function (inject) {
       if (!inject) return
-      inject("data-v-20595afc_0", { source: ".ele__img--form .form__img--wrapper[data-v-20595afc] {\n  cursor: pointer;\n  border-radius: 4px;\n  background: #000;\n  opacity: 0.3;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n.ele__img--form .form__img--wrapper .form__img--preivew[data-v-20595afc] {\n  position: absolute;\n  color: red;\n  width: 100%;\n  height: 100%;\n  border-radius: 4px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper[data-v-20595afc] {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  color: #fff;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon--oper[data-v-20595afc] {\n  font-size: 40px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon__text--oper[data-v-20595afc] {\n  font-size: 16px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/form-img-crop/src/index.vue","index.vue"],"names":[],"mappings":"AA+EA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;AC9EA;AD+EA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;AC7EA;AD+EA;EACA,kBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;AC7EA;AD8EA;EACA,eAAA;AC5EA;AD8EA;EACA,eAAA;AC5EA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele__img--form\">\n    <div class=\"form__img--wrapper\" \n      @click=\"handleClick\" \n      :style=\"style\">\n      <div class=\"form__img--preivew\" v-if=\"value\">\n        <img style=\"width:100%;height:100%\" :src=\"imageUrl\" alt=\"\" srcset=\"\">\n      </div>\n      <div class=\"form__icon--wrapper\">\n        <ele-icon class=\"icon--oper\" type=\"icon-camera\"></ele-icon>\n        <span class=\"icon__text--oper\">{{ operText }}</span>\n      </div>\n    </div>\n    <ele-modal-img-crop \n      v-model=\"showModalImgCropValue\"\n      @change=\"onChangeModalCropImg\"\n      :imageId=\"value\"\n      :title=\"modalTitle\">\n    </ele-modal-img-crop>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'ele-form-img-crop',\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    value: {\n      type: [String, Number]\n    },\n    modalTitle: {\n      type: String\n    },\n    operText: {\n      type: String,\n      default: '更改头像'\n    },\n    width: {\n      type: [Number, String],\n      default: 200\n    },\n    height: {\n      type: [Number, String],\n      default: 200\n    }\n  },\n  data() {\n    return {\n      showModalImgCropValue: false\n    }\n  },\n  computed: {\n    style () {\n      return {\n        width: this.width + 'px',\n        height: this.height + 'px'\n      }\n    },\n    imageUrl () {\n      return `/api-file/workbench/file/stream/${this.value}?origin=true`\n    }\n  },\n  methods: {\n    handleClick () {\n      this.showModalImgCropValue = true\n    },\n    onChangeModalCropImg (fileId) {\n      console.log('fileId', fileId)\n      this.$emit('change', fileId)\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele__img--form {\n  .form__img--wrapper {\n    cursor: pointer;\n    border-radius: 4px;\n    background: #000;\n    opacity: 0.3;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    .form__img--preivew {\n      position: absolute;\n      color: red;\n      width: 100%;\n      height: 100%;\n      border-radius: 4px;\n    }\n    .form__icon--wrapper {\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      color: #fff;\n      .icon--oper {\n        font-size: 40px;\n      }\n      .icon__text--oper {\n        font-size: 16px;\n      }\n    }\n  }\n}\n</style>",".ele__img--form .form__img--wrapper {\n  cursor: pointer;\n  border-radius: 4px;\n  background: #000;\n  opacity: 0.3;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n.ele__img--form .form__img--wrapper .form__img--preivew {\n  position: absolute;\n  color: red;\n  width: 100%;\n  height: 100%;\n  border-radius: 4px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  color: #fff;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon--oper {\n  font-size: 40px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon__text--oper {\n  font-size: 16px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-5a602a76_0", { source: ".ele__img--form .form__img--wrapper[data-v-5a602a76] {\n  cursor: pointer;\n  border-radius: 4px;\n  background: #000;\n  opacity: 0.3;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n.ele__img--form .form__img--wrapper .form__img--preivew[data-v-5a602a76] {\n  position: absolute;\n  color: red;\n  width: 100%;\n  height: 100%;\n  border-radius: 4px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper[data-v-5a602a76] {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  color: #fff;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon--oper[data-v-5a602a76] {\n  font-size: 40px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon__text--oper[data-v-5a602a76] {\n  font-size: 16px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/composite-components/form-img-crop/src/index.vue","index.vue"],"names":[],"mappings":"AAwFA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;ACvFA;ADwFA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;ACtFA;ADwFA;EACA,kBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;ACtFA;ADuFA;EACA,eAAA;ACrFA;ADuFA;EACA,eAAA;ACrFA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n  <div class=\"ele__img--form\">\n    <div class=\"form__img--wrapper\" \n      @click=\"handleClick\" \n      :style=\"style\">\n      <div class=\"form__img--preivew\" v-if=\"value\">\n        <img style=\"width:100%;height:100%\" :src=\"imageUrl\" alt=\"\" srcset=\"\">\n      </div>\n      <div class=\"form__icon--wrapper\">\n        <ele-icon class=\"icon--oper\" type=\"icon-camera\"></ele-icon>\n        <span class=\"icon__text--oper\">{{ operText }}</span>\n      </div>\n    </div>\n    <ele-modal-img-crop \n      v-model=\"showModalImgCropValue\"\n      @change=\"onChangeModalCropImg\"\n      :cropperConfig=\"cropperConfig\"\n      :imageId=\"value\"\n      :title=\"modalTitle\">\n    </ele-modal-img-crop>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'ele-form-img-crop',\n  model: {\n    prop: 'value',\n    event: 'change'\n  },\n  props: {\n    value: {\n      type: [String, Number]\n    },\n    modalTitle: {\n      type: String\n    },\n    operText: {\n      type: String,\n      default: '更改头像'\n    },\n    width: {\n      type: [Number, String],\n      default: 200\n    },\n    height: {\n      type: [Number, String],\n      default: 200\n    },\n    cropperConfig: {\n      type: Object,\n      default: () => {\n        return {\n          aspectRatio: 16 / 9\n        }\n      }\n    }\n  },\n  data() {\n    return {\n      showModalImgCropValue: false\n    }\n  },\n  computed: {\n    style () {\n      return {\n        width: this.width + 'px',\n        height: this.height + 'px'\n      }\n    },\n    imageUrl () {\n      return `/api-file/workbench/file/stream/${this.value}?origin=true`\n    }\n  },\n  methods: {\n    handleClick () {\n      this.showModalImgCropValue = true\n    },\n    onChangeModalCropImg (fileId) {\n      console.log('fileId', fileId)\n      this.$emit('change', fileId)\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele__img--form {\n  .form__img--wrapper {\n    cursor: pointer;\n    border-radius: 4px;\n    background: #000;\n    opacity: 0.3;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    .form__img--preivew {\n      position: absolute;\n      color: red;\n      width: 100%;\n      height: 100%;\n      border-radius: 4px;\n    }\n    .form__icon--wrapper {\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      color: #fff;\n      .icon--oper {\n        font-size: 40px;\n      }\n      .icon__text--oper {\n        font-size: 16px;\n      }\n    }\n  }\n}\n</style>",".ele__img--form .form__img--wrapper {\n  cursor: pointer;\n  border-radius: 4px;\n  background: #000;\n  opacity: 0.3;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n.ele__img--form .form__img--wrapper .form__img--preivew {\n  position: absolute;\n  color: red;\n  width: 100%;\n  height: 100%;\n  border-radius: 4px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  color: #fff;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon--oper {\n  font-size: 40px;\n}\n.ele__img--form .form__img--wrapper .form__icon--wrapper .icon__text--oper {\n  font-size: 16px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$5 = "data-v-20595afc";
+    const __vue_scope_id__$5 = "data-v-5a602a76";
     /* module identifier */
     const __vue_module_identifier__$5 = undefined;
     /* functional template */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idooel/components",
-  "version": "0.0.1-beta.103",
+  "version": "0.0.1-beta.105",
   "description": "",
   "private": false,
   "main": "dist/@idooel/components.umd.js",

package/packages/composite-components/form-img-crop/src/index.vue

@@ -14,6 +14,7 @@
     <ele-modal-img-crop 
       v-model="showModalImgCropValue"
       @change="onChangeModalCropImg"
+      :cropperConfig="cropperConfig"
       :imageId="value"
       :title="modalTitle">
     </ele-modal-img-crop>
@@ -45,6 +46,14 @@ export default {
     height: {
       type: [Number, String],
       default: 200
+    },
+    cropperConfig: {
+      type: Object,
+      default: () => {
+        return {
+          aspectRatio: 16 / 9
+        }
+      }
     }
   },
   data() {

package/packages/form/src/index.vue

@@ -132,6 +132,7 @@
                   :width="ele.width"
                   :height="ele.height"
                   :modal-title="ele.modalTitle"
+                  :cropper-config="ele.cropperConfig"
                   :oper-text="ele.operText"
                   :disabled="executeExpression(ele._disabled)" 
                   v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 

package/packages/models/tree-table-model/src/index.vue

@@ -453,7 +453,7 @@ export default {
     },
     setCurrentTableSelection (props = {}) {
       if (this.currentTableMode === 'radio') {
-        this.$set(this, 'currentTableSelection', type.isObject(props) ? props : {})
+        this.$set(this, 'currentTableSelection', (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {})
       } else {
         this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])
       }

package/packages/upload/src/index.vue

@@ -293,7 +293,7 @@ export default {
     async saveToServerAsyncPage (payloads = {}) {
       net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { 
         headers: {
-          'Content-Type': 'multipart/form-data'
+          'Content-Type': 'application/json'
         }
       }).then(resp =>{
         const { data } = resp