@idooel/components 0.0.1-beta.43 → 0.0.1-beta.45

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

@@ -3405,7 +3405,7 @@ var script$s = {
       });
     },
     executeExpressionForUrl(url) {
-      return this.executeExpression(url) ? this.executeExpression(url) : url;
+      return type.isApi(url) ? url : this.executeExpression(url);
     },
     setFieldsValue(props) {
       this.$refs[this.formRef].setFieldsValue(props);
@@ -3498,11 +3498,11 @@ __vue_render__$s._withStripped = true;
   /* style */
   const __vue_inject_styles__$s = function (inject) {
     if (!inject) return
-    inject("data-v-22c624b4_0", { source: ".form__model--wrapper[data-v-22c624b4] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-22c624b4] {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content[data-v-22c624b4] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-22c624b4] {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA6KA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC5KA;AD6KA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC3KA;AD6KA;EACA,aAAA;AC3KA;AD6KA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC3KA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"form__model--wrapper\">\r\n    <div class=\"form-model__title\" v-if=\"title\">\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"form-model__content\">\r\n      <ele-alert style=\"margin-bottom: 16px;\" v-if=\"alertMeta\" v-bind=\"alertMeta\"></ele-alert>\r\n      <ele-form :ref=\"formRef\" :elements=\"elements\" :disabled=\"globalDisabled\"></ele-form>\r\n    </div>\r\n    <div class=\"form-model__footer\" v-if=\"footerMeta\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net, type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n  name: 'ele-form-model',\r\n  props: {\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    title: {\r\n      type: String\r\n    },\r\n    formMeta: {\r\n      type: Object\r\n    },\r\n    footerMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        validateFields: this.validateFields\r\n      }\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]\r\n      }\r\n    },\r\n    elements () {\r\n      const { elements } = this.formMeta\r\n      return elements\r\n    },\r\n    preRequest () {\r\n      const { preRequest = {} } = this.formMeta\r\n      return preRequest\r\n    },\r\n    infoRequest () {\r\n      const { infoRequest = {} } = this.formMeta\r\n      return infoRequest\r\n    },\r\n    alertMeta () {\r\n      const { alert = {} } = this.formMeta\r\n      return type.isEmpty(alert) ? null : alert\r\n    },\r\n    submitRequest () {\r\n      const { submitRequest = {} } = this.formMeta\r\n      return submitRequest\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    expressionData () {\r\n      return {\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta\r\n      }\r\n    },\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    }\r\n  },\r\n  methods: {\r\n    formModels () {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue() : {}\r\n    },\r\n    executeExpression (expression, dataSource = {}) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n    },\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})\r\n      return ret\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (PAGE_STATUS.CREATE == this.routeMetaMode) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        this.setFieldsValue(data)\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    executeExpressionForUrl (url) {\r\n      return this.executeExpression(url) ? this.executeExpression(url) : url\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\r\n    },\r\n    validateFields () {\r\n      return this.$refs[this.formRef].validateFields()\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      if (this.globalDisabled) return\r\n      const status = this.$refs[this.formRef].validateFields()\r\n      if (status) {\r\n        //TODO fieldMap\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    }\r\n  },\r\n  async mounted() {\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: auto;\r\n  background: #fff;\r\n  .form-model__title {\r\n    height: 56px;\r\n    padding: 0 16px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n  }\r\n  .form-model__content {\r\n    padding: 16px;\r\n  }\r\n  .form-model__footer {\r\n    /* width: 100%; */\r\n    height: 64px;\r\n    position: fixed;\r\n    bottom: 0;\r\n    display: flex;\r\n    float: right;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: end;\r\n  }\r\n}\r\n</style>",".form__model--wrapper {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-31eee433_0", { source: ".form__model--wrapper[data-v-31eee433] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-31eee433] {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content[data-v-31eee433] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-31eee433] {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA6KA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC5KA;AD6KA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC3KA;AD6KA;EACA,aAAA;AC3KA;AD6KA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC3KA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"form__model--wrapper\">\r\n    <div class=\"form-model__title\" v-if=\"title\">\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"form-model__content\">\r\n      <ele-alert style=\"margin-bottom: 16px;\" v-if=\"alertMeta\" v-bind=\"alertMeta\"></ele-alert>\r\n      <ele-form :ref=\"formRef\" :elements=\"elements\" :disabled=\"globalDisabled\"></ele-form>\r\n    </div>\r\n    <div class=\"form-model__footer\" v-if=\"footerMeta\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net, type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n  name: 'ele-form-model',\r\n  props: {\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    title: {\r\n      type: String\r\n    },\r\n    formMeta: {\r\n      type: Object\r\n    },\r\n    footerMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        validateFields: this.validateFields\r\n      }\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]\r\n      }\r\n    },\r\n    elements () {\r\n      const { elements } = this.formMeta\r\n      return elements\r\n    },\r\n    preRequest () {\r\n      const { preRequest = {} } = this.formMeta\r\n      return preRequest\r\n    },\r\n    infoRequest () {\r\n      const { infoRequest = {} } = this.formMeta\r\n      return infoRequest\r\n    },\r\n    alertMeta () {\r\n      const { alert = {} } = this.formMeta\r\n      return type.isEmpty(alert) ? null : alert\r\n    },\r\n    submitRequest () {\r\n      const { submitRequest = {} } = this.formMeta\r\n      return submitRequest\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    expressionData () {\r\n      return {\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta\r\n      }\r\n    },\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    }\r\n  },\r\n  methods: {\r\n    formModels () {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue() : {}\r\n    },\r\n    executeExpression (expression, dataSource = {}) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n    },\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})\r\n      return ret\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (PAGE_STATUS.CREATE == this.routeMetaMode) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        this.setFieldsValue(data)\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    executeExpressionForUrl (url) {\r\n      return type.isApi(url) ? url : this.executeExpression(url)\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\r\n    },\r\n    validateFields () {\r\n      return this.$refs[this.formRef].validateFields()\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      if (this.globalDisabled) return\r\n      const status = this.$refs[this.formRef].validateFields()\r\n      if (status) {\r\n        //TODO fieldMap\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    }\r\n  },\r\n  async mounted() {\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: auto;\r\n  background: #fff;\r\n  .form-model__title {\r\n    height: 56px;\r\n    padding: 0 16px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n  }\r\n  .form-model__content {\r\n    padding: 16px;\r\n  }\r\n  .form-model__footer {\r\n    /* width: 100%; */\r\n    height: 64px;\r\n    position: fixed;\r\n    bottom: 0;\r\n    display: flex;\r\n    float: right;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: end;\r\n  }\r\n}\r\n</style>",".form__model--wrapper {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$s = "data-v-22c624b4";
+  const __vue_scope_id__$s = "data-v-31eee433";
   /* module identifier */
   const __vue_module_identifier__$s = undefined;
   /* functional template */
@@ -4813,7 +4813,7 @@ var script$n = {
       const {
         fileID: fileId
       } = file;
-      window.open(`api-file/workbench/file/stream/${fileId}?origin=true`);
+      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`);
     },
     handleClickDelete(file) {
       this.$refs[this.uploadRef].remove(file);
@@ -5089,11 +5089,11 @@ __vue_render__$n._withStripped = true;
   /* style */
   const __vue_inject_styles__$n = function (inject) {
     if (!inject) return
-    inject("data-v-424e9c01_0", { source: "[data-v-424e9c01] .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-424e9c01] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-424e9c01] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-424e9c01] {\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-424e9c01] {\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-424e9c01] {\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-424e9c01] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-424e9c01] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-424e9c01] {\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-424e9c01] {\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-424e9c01] {\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-424e9c01] {\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-424e9c01] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-424e9c01] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-424e9c01] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\upload\\src\\index.vue","index.vue"],"names":[],"mappings":"AAuWA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;ACzWA;ADsWA;EACA,0DAAA;ACpWA;ADwWA;EACA,WAAA;ACrWA;ADsWA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACpWA;ADqWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACnWA;ADoWA;EACA,eAAA;EACA,kCAAA;AClWA;ADoWA;EACA,eAAA;EACA,kCAAA;AClWA;ADqWA;EACA,iBAAA;ACnWA;ADoWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;AClWA;ADoWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;AClWA;ADuWA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACrWA;ADuWA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACrWA;ADsWA;EACA,gBAAA;EACA,uBAAA;ACpWA;ADuWA;EACA,gBAAA;ACrWA;ADsWA;EACA,gBAAA;EACA,eAAA;ACpWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele-upload__wrapper\">\r\n    <FileUpload\r\n      class=\"ele-upload__inner\"\r\n      v-show=\"isShowUploadContainer\"\r\n      v-model=\"files\"\r\n      :ref=\"uploadRef\"\r\n      :drop=\"drop\"\r\n      :chunk-enabled=\"chunkEnabled\"\r\n      :chunk=\"chunkConfig\"\r\n      :accept=\"accept\"\r\n      :size=\"fileSizeLimit\"\r\n      :post-action=\"postAction\"\r\n      :multiple=\"multiple\"\r\n      :headers=\"headers\"\r\n      :maximum=\"getMaximum\"\r\n      @input-file=\"onWatchInputFiles\"\r\n      @input=\"onWatchFiles\"\r\n      style=\"width: 100%;\">\r\n      <section class=\"ele-upload__area\">\r\n        <div class=\"ele-upload__area--icon\">\r\n          <template v-if=\"iconIsZhWrod\">\r\n            {{ icon }}\r\n          </template>\r\n          <template v-else>\r\n            <ele-icon :type=\"icon\"></ele-icon>\r\n          </template>\r\n        </div>\r\n        <div class=\"ele-upload__area--text\">\r\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\r\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\r\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\r\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\r\n        </div>\r\n      </section>\r\n    </FileUpload>\r\n    <section class=\"ele-files__wrapper\">\r\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\r\n        <div class=\"ele-file__suffix--icon\">\r\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\r\n        </div>\r\n        <div class=\"ele-file__name\">\r\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\r\n          <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\r\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\r\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\r\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\r\n            <ele-icon type=\"delete\"></ele-icon>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport FileUpload from 'vue-upload-component'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { route, net, type } from '@idooel/shared'\r\nexport default {\r\n  name: 'ele-upload',\r\n  components: {\r\n    FileUpload\r\n  },\r\n  model: {\r\n    prop: 'value',\r\n    event: 'change'\r\n  },\r\n  props: {\r\n    url: {\r\n      type: String,\r\n      //TODO\r\n      default: `zuul/api-file/workbench/file`\r\n    },\r\n    icon: {\r\n      type: String,\r\n      default: '上传'\r\n    },\r\n    size: {\r\n      type: Number,\r\n      default: 100\r\n    },\r\n    message: {\r\n      type: String,\r\n      default: '单击或拖动文件到该区域以上传'\r\n    },\r\n    ext: {\r\n      type: String\r\n    },\r\n    accept: {\r\n      type: String\r\n    },\r\n    maximum: {\r\n      type: Number,\r\n      default: 10\r\n    },\r\n    multiple: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    drop: {\r\n      type: Boolean,\r\n      default: true\r\n    },\r\n    value: {\r\n      type: [String, Array]\r\n    },\r\n    querys: {\r\n      type: Object,\r\n      default: () => ({\r\n        _csrf: localStorage.getItem('token'),\r\n        _t: new Date().valueOf()\r\n      })\r\n    },\r\n    headers: {\r\n      type: Object,\r\n      default: () => ({\r\n        'X-XSRF-TOKEN': localStorage.getItem('token')\r\n      })\r\n    },\r\n    byteConversion: {\r\n      type: Number,\r\n      default: 1024 * 1024\r\n    },\r\n    chunkEnabled: {\r\n      type: Boolean,\r\n      default: true\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      files: [],\r\n      buildedFiles: [],\r\n      saveToServerAsyncPageTimer: null\r\n    }\r\n  },\r\n  watch: {\r\n    value: {\r\n      async handler (value) {\r\n        if (type.isArray(value)) {\r\n          // multiple\r\n        } else if (type.isEmpty(value)) {\r\n          this.files = []\r\n          this.buildedFiles = []\r\n        } else {\r\n          // single\r\n          this.fetchFileWithFileId()\r\n        }\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  computed: {\r\n    prefixPath () {\r\n      return window.prefixPath\r\n    },\r\n    iconIsZhWrod () {\r\n      return type.isZhWord(this.icon)\r\n    },\r\n    getPayloads () {\r\n      return {\r\n        override: false\r\n      }\r\n    },\r\n    chunkConfig () {\r\n      return {\r\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\r\n        headers: {\r\n          ...this.headers\r\n        },\r\n        minSize: 3 * this.byteConversion,\r\n        maxActive: 3,\r\n        maxRetries: 5,\r\n        startBody: {\r\n          override: true,\r\n          path: '/cw'\r\n        },\r\n        uploadBody: {\r\n          override: true,\r\n          path: '/cw'\r\n        },\r\n        finishBody: {\r\n          override: true,\r\n          path: '/cw'\r\n        }\r\n      }\r\n    },\r\n    isFileUploadSuccessed () {\r\n      return this.files.every(file => file.success)\r\n    },\r\n    isShowUploadContainer () {\r\n      if (this.multiple) {\r\n        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\r\n          return false\r\n        } else {\r\n          return true\r\n        }\r\n      } else {\r\n        const [file = {}] = this.buildedFiles\r\n        if (this.buildedFiles.length < 1) {\r\n          return true\r\n        }\r\n        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\r\n          return false\r\n        } else {\r\n          return true\r\n        }\r\n      }\r\n    },\r\n    getMaximum () {\r\n      return this.multiple ? this.maximum : 1\r\n    },\r\n    fileSizeLimit () {\r\n      return this.size * this.byteConversion\r\n    },\r\n    postAction () {\r\n      const ret = route.toQueryString(this.querys)\r\n      return `${this.prefixPath}${this.url}?${ret}`\r\n    },\r\n    uploadRef () {\r\n      return uuidv4()\r\n    },\r\n    fileSuffixIcon () {\r\n      return {\r\n        'doc': { name: 'icon-doc' },\r\n        'html': { name: 'icon-html' },\r\n        'mp4': { name: 'icon-mp' },\r\n        'pdf': { name: 'icon-pdf' },\r\n        'ppt': { name: 'icon-ppt' },\r\n        'psd': { name: 'icon-psd' },\r\n        'rtf': { name: 'icon-rtf' },\r\n        'txt': { name: 'icon-txt' },\r\n        'vis': { name: 'icon-vis' },\r\n        'xls': { name: 'icon-xls' },\r\n        'xml': { name: 'icon-xml' },\r\n        'zip': { name: 'icon-zip' },\r\n        'jpg': { name: 'icon-img' },\r\n        'mp3': { name: 'icon-mp1' },\r\n      }\r\n    },\r\n    fileIds () {\r\n      const fileIds = this.buildedFiles.map(file => {\r\n        return file.fileID\r\n      })\r\n      return this.multiple ? fileIds : fileIds[0]\r\n    },\r\n    fileResponseData () {\r\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\r\n    }\r\n  },\r\n  methods: {\r\n    async fetchFileWithFileId () {\r\n      if (!this.value) return\r\n      await net.get(\r\n        `/api-file/file/${this.value}`\r\n      ).then(resp => {\r\n        const { data } = resp\r\n        this.buildedFiles = [data]\r\n        this.files = [data]\r\n      })\r\n    },\r\n    handleClickDownload (file) {\r\n      const { fileID: fileId } = file\r\n      window.open(`api-file/workbench/file/stream/${fileId}?origin=true`)\r\n    },\r\n    handleClickDelete (file) {\r\n      this.$refs[this.uploadRef].remove(file)\r\n      const { fileID } = file\r\n      this.files = this.files.filter(file => file.fileID !== fileID)\r\n      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\r\n      this.$emit('change', this.fileIds)\r\n    },\r\n    onWatchFiles (files) {\r\n      this.files = files\r\n      this.buildedFiles = this.files.map(file => {\r\n        return {\r\n          ...file.response.data,\r\n          ...file\r\n        }\r\n      })\r\n      if (this.isFileUploadSuccessed) {\r\n        this.$emit('change', this.fileIds)\r\n        this.$emit('on-success', this.fileResponseData)\r\n      }\r\n    },\r\n    async saveToServerAsyncPage (payloads = {}) {\r\n      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \r\n        headers: {\r\n          'Content-Type': 'multipart/form-data'\r\n        }\r\n      }).then(resp =>{\r\n        const { data } = resp\r\n        if (data !== 'saveToServerAsyncPage') {\r\n          clearInterval(this.saveToServerAsyncPageTimer)\r\n        }\r\n      })\r\n      // const ret = await net.post({\r\n      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\r\n      //   method: 'POST',\r\n      //   data: { ...payloads }\r\n      // }).then(resp => {\r\n      //   const { data: { data, code, message } } = resp\r\n      //   if (code !== '2000') {\r\n      //     this.$Message.error(message)\r\n      //     return\r\n      //   }\r\n      //   if (data !== 'saveToServerAsyncPage') {\r\n      //     clearInterval(timer)\r\n      //     const { fileID, size } = data\r\n      //     this.$emit('on-success', { ...data, fileId: fileID })\r\n      //     this.$Message.success('同步成功')\r\n      //     return { fileId: fileID, size }\r\n      //   }\r\n      // })\r\n      // return ret\r\n    },\r\n    onWatchInputFiles (newFile, oldFile) {\r\n      if (newFile && !oldFile) {\r\n        // add file\r\n        console.log('add', newFile)\r\n      }\r\n      if (newFile && oldFile) {\r\n        // update file\r\n        console.log('update', newFile)\r\n        const { success, active, chunk, response } = newFile\r\n        if (chunk && success && !active) {\r\n          console.log('chunk end')\r\n          const { data: { file, type } } = response\r\n          const payloads = {\r\n            filePath: file.match(/\\/cw(.*)/)[0],\r\n            asyncID: uuidv4(),\r\n            isDeleteOrigin: false,\r\n            toImage: type === 'pdf' ? true : false,\r\n            unzip: type === 'zip' ? true : false,\r\n            _csrf: localStorage.getItem('token')\r\n          }\r\n          this.saveToServerAsyncPageTimer = setInterval(() => {\r\n            this.saveToServerAsyncPage(payloads)\r\n          }, 2000)\r\n        }\r\n      }\r\n      if (!newFile && oldFile) {\r\n        // delete file\r\n        console.log('delete')\r\n      }\r\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\r\n        if (!this.$refs[this.uploadRef].active) {\r\n          this.$refs[this.uploadRef].active = true\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n::v-deep .ele-upload__inner {\r\n  opacity: 1 !important;\r\n  cursor: pointer;\r\n  border: 1px dashed var(--idooel-form-title-border-color);\r\n  background: var(--idooel-form-upload-bg-color) !important;\r\n  &:hover {\r\n    border-color: var(--idooel-form-upload-border-hover-color);\r\n  }\r\n  border-radius: var(--idooel-form-border-radius);\r\n}\r\n.ele-upload__wrapper {\r\n  width: 100%;\r\n  .ele-upload__area {\r\n    padding: 16px;\r\n    width: 100%;\r\n    height: 80px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    .ele-upload__area--icon {\r\n      color: var(--idooel-primary-color);\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      font-size: 16x;\r\n      .anticon-cloud-upload {\r\n        font-size: 48px;\r\n        color: var(--idooel-primary-color);\r\n      }\r\n      .anticon {\r\n        font-size: 48px;\r\n        color: var(--idooel-primary-color);\r\n      }\r\n    }\r\n    .ele-upload__area--text {\r\n      margin-left: 16px;\r\n      .ele-upload__message {\r\n        font-size: 16px;\r\n        color: var(--idoole-black-088);\r\n        text-align: left;\r\n      }\r\n      .ele-upload__ext {\r\n        text-align: left;\r\n        font-size: 14px;\r\n        color: var(--idoole-black-06);\r\n      }\r\n    }\r\n  }\r\n  .ele-files__wrapper {\r\n    .ele-file__item {\r\n      width: 100%;\r\n      margin-top: 8px;\r\n      padding: 8px 12px;\r\n      border-radius: var(--idooel-form-border-radius);\r\n      background: var(--idooel-form-upload-bg-color);\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      .ele-file__suffix--icon {}\r\n      .ele-file__name {\r\n        flex: 1;\r\n        text-align: left;\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        font-size: 14px;\r\n        margin-left: 8px;\r\n        cursor: pointer;\r\n        .ele-file__inner {\r\n          overflow: hidden;\r\n          text-overflow: ellipsis;\r\n        }\r\n      }\r\n      .ele-file__delete {\r\n        margin-left: 8px;\r\n        .ele-file__delete--icon {\r\n          margin-left: 8px;\r\n          cursor: pointer;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\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-5206d60c_0", { source: "[data-v-5206d60c] .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-5206d60c] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-5206d60c] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-5206d60c] {\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-5206d60c] {\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-5206d60c] {\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-5206d60c] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-5206d60c] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-5206d60c] {\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-5206d60c] {\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-5206d60c] {\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-5206d60c] {\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-5206d60c] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-5206d60c] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-5206d60c] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\upload\\src\\index.vue","index.vue"],"names":[],"mappings":"AAuWA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;ACzWA;ADsWA;EACA,0DAAA;ACpWA;ADwWA;EACA,WAAA;ACrWA;ADsWA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACpWA;ADqWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACnWA;ADoWA;EACA,eAAA;EACA,kCAAA;AClWA;ADoWA;EACA,eAAA;EACA,kCAAA;AClWA;ADqWA;EACA,iBAAA;ACnWA;ADoWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;AClWA;ADoWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;AClWA;ADuWA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACrWA;ADuWA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACrWA;ADsWA;EACA,gBAAA;EACA,uBAAA;ACpWA;ADuWA;EACA,gBAAA;ACrWA;ADsWA;EACA,gBAAA;EACA,eAAA;ACpWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele-upload__wrapper\">\r\n    <FileUpload\r\n      class=\"ele-upload__inner\"\r\n      v-show=\"isShowUploadContainer\"\r\n      v-model=\"files\"\r\n      :ref=\"uploadRef\"\r\n      :drop=\"drop\"\r\n      :chunk-enabled=\"chunkEnabled\"\r\n      :chunk=\"chunkConfig\"\r\n      :accept=\"accept\"\r\n      :size=\"fileSizeLimit\"\r\n      :post-action=\"postAction\"\r\n      :multiple=\"multiple\"\r\n      :headers=\"headers\"\r\n      :maximum=\"getMaximum\"\r\n      @input-file=\"onWatchInputFiles\"\r\n      @input=\"onWatchFiles\"\r\n      style=\"width: 100%;\">\r\n      <section class=\"ele-upload__area\">\r\n        <div class=\"ele-upload__area--icon\">\r\n          <template v-if=\"iconIsZhWrod\">\r\n            {{ icon }}\r\n          </template>\r\n          <template v-else>\r\n            <ele-icon :type=\"icon\"></ele-icon>\r\n          </template>\r\n        </div>\r\n        <div class=\"ele-upload__area--text\">\r\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\r\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\r\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\r\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\r\n        </div>\r\n      </section>\r\n    </FileUpload>\r\n    <section class=\"ele-files__wrapper\">\r\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\r\n        <div class=\"ele-file__suffix--icon\">\r\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\r\n        </div>\r\n        <div class=\"ele-file__name\">\r\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\r\n          <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\r\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\r\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\r\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\r\n            <ele-icon type=\"delete\"></ele-icon>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport FileUpload from 'vue-upload-component'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { route, net, type } from '@idooel/shared'\r\nexport default {\r\n  name: 'ele-upload',\r\n  components: {\r\n    FileUpload\r\n  },\r\n  model: {\r\n    prop: 'value',\r\n    event: 'change'\r\n  },\r\n  props: {\r\n    url: {\r\n      type: String,\r\n      //TODO\r\n      default: `zuul/api-file/workbench/file`\r\n    },\r\n    icon: {\r\n      type: String,\r\n      default: '上传'\r\n    },\r\n    size: {\r\n      type: Number,\r\n      default: 100\r\n    },\r\n    message: {\r\n      type: String,\r\n      default: '单击或拖动文件到该区域以上传'\r\n    },\r\n    ext: {\r\n      type: String\r\n    },\r\n    accept: {\r\n      type: String\r\n    },\r\n    maximum: {\r\n      type: Number,\r\n      default: 10\r\n    },\r\n    multiple: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    drop: {\r\n      type: Boolean,\r\n      default: true\r\n    },\r\n    value: {\r\n      type: [String, Array]\r\n    },\r\n    querys: {\r\n      type: Object,\r\n      default: () => ({\r\n        _csrf: localStorage.getItem('token'),\r\n        _t: new Date().valueOf()\r\n      })\r\n    },\r\n    headers: {\r\n      type: Object,\r\n      default: () => ({\r\n        'X-XSRF-TOKEN': localStorage.getItem('token')\r\n      })\r\n    },\r\n    byteConversion: {\r\n      type: Number,\r\n      default: 1024 * 1024\r\n    },\r\n    chunkEnabled: {\r\n      type: Boolean,\r\n      default: true\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      files: [],\r\n      buildedFiles: [],\r\n      saveToServerAsyncPageTimer: null\r\n    }\r\n  },\r\n  watch: {\r\n    value: {\r\n      async handler (value) {\r\n        if (type.isArray(value)) {\r\n          // multiple\r\n        } else if (type.isEmpty(value)) {\r\n          this.files = []\r\n          this.buildedFiles = []\r\n        } else {\r\n          // single\r\n          this.fetchFileWithFileId()\r\n        }\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  computed: {\r\n    prefixPath () {\r\n      return window.prefixPath\r\n    },\r\n    iconIsZhWrod () {\r\n      return type.isZhWord(this.icon)\r\n    },\r\n    getPayloads () {\r\n      return {\r\n        override: false\r\n      }\r\n    },\r\n    chunkConfig () {\r\n      return {\r\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\r\n        headers: {\r\n          ...this.headers\r\n        },\r\n        minSize: 3 * this.byteConversion,\r\n        maxActive: 3,\r\n        maxRetries: 5,\r\n        startBody: {\r\n          override: true,\r\n          path: '/cw'\r\n        },\r\n        uploadBody: {\r\n          override: true,\r\n          path: '/cw'\r\n        },\r\n        finishBody: {\r\n          override: true,\r\n          path: '/cw'\r\n        }\r\n      }\r\n    },\r\n    isFileUploadSuccessed () {\r\n      return this.files.every(file => file.success)\r\n    },\r\n    isShowUploadContainer () {\r\n      if (this.multiple) {\r\n        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\r\n          return false\r\n        } else {\r\n          return true\r\n        }\r\n      } else {\r\n        const [file = {}] = this.buildedFiles\r\n        if (this.buildedFiles.length < 1) {\r\n          return true\r\n        }\r\n        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\r\n          return false\r\n        } else {\r\n          return true\r\n        }\r\n      }\r\n    },\r\n    getMaximum () {\r\n      return this.multiple ? this.maximum : 1\r\n    },\r\n    fileSizeLimit () {\r\n      return this.size * this.byteConversion\r\n    },\r\n    postAction () {\r\n      const ret = route.toQueryString(this.querys)\r\n      return `${this.prefixPath}${this.url}?${ret}`\r\n    },\r\n    uploadRef () {\r\n      return uuidv4()\r\n    },\r\n    fileSuffixIcon () {\r\n      return {\r\n        'doc': { name: 'icon-doc' },\r\n        'html': { name: 'icon-html' },\r\n        'mp4': { name: 'icon-mp' },\r\n        'pdf': { name: 'icon-pdf' },\r\n        'ppt': { name: 'icon-ppt' },\r\n        'psd': { name: 'icon-psd' },\r\n        'rtf': { name: 'icon-rtf' },\r\n        'txt': { name: 'icon-txt' },\r\n        'vis': { name: 'icon-vis' },\r\n        'xls': { name: 'icon-xls' },\r\n        'xml': { name: 'icon-xml' },\r\n        'zip': { name: 'icon-zip' },\r\n        'jpg': { name: 'icon-img' },\r\n        'mp3': { name: 'icon-mp1' },\r\n      }\r\n    },\r\n    fileIds () {\r\n      const fileIds = this.buildedFiles.map(file => {\r\n        return file.fileID\r\n      })\r\n      return this.multiple ? fileIds : fileIds[0]\r\n    },\r\n    fileResponseData () {\r\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\r\n    }\r\n  },\r\n  methods: {\r\n    async fetchFileWithFileId () {\r\n      if (!this.value) return\r\n      await net.get(\r\n        `/api-file/file/${this.value}`\r\n      ).then(resp => {\r\n        const { data } = resp\r\n        this.buildedFiles = [data]\r\n        this.files = [data]\r\n      })\r\n    },\r\n    handleClickDownload (file) {\r\n      const { fileID: fileId } = file\r\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\r\n    },\r\n    handleClickDelete (file) {\r\n      this.$refs[this.uploadRef].remove(file)\r\n      const { fileID } = file\r\n      this.files = this.files.filter(file => file.fileID !== fileID)\r\n      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\r\n      this.$emit('change', this.fileIds)\r\n    },\r\n    onWatchFiles (files) {\r\n      this.files = files\r\n      this.buildedFiles = this.files.map(file => {\r\n        return {\r\n          ...file.response.data,\r\n          ...file\r\n        }\r\n      })\r\n      if (this.isFileUploadSuccessed) {\r\n        this.$emit('change', this.fileIds)\r\n        this.$emit('on-success', this.fileResponseData)\r\n      }\r\n    },\r\n    async saveToServerAsyncPage (payloads = {}) {\r\n      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \r\n        headers: {\r\n          'Content-Type': 'multipart/form-data'\r\n        }\r\n      }).then(resp =>{\r\n        const { data } = resp\r\n        if (data !== 'saveToServerAsyncPage') {\r\n          clearInterval(this.saveToServerAsyncPageTimer)\r\n        }\r\n      })\r\n      // const ret = await net.post({\r\n      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\r\n      //   method: 'POST',\r\n      //   data: { ...payloads }\r\n      // }).then(resp => {\r\n      //   const { data: { data, code, message } } = resp\r\n      //   if (code !== '2000') {\r\n      //     this.$Message.error(message)\r\n      //     return\r\n      //   }\r\n      //   if (data !== 'saveToServerAsyncPage') {\r\n      //     clearInterval(timer)\r\n      //     const { fileID, size } = data\r\n      //     this.$emit('on-success', { ...data, fileId: fileID })\r\n      //     this.$Message.success('同步成功')\r\n      //     return { fileId: fileID, size }\r\n      //   }\r\n      // })\r\n      // return ret\r\n    },\r\n    onWatchInputFiles (newFile, oldFile) {\r\n      if (newFile && !oldFile) {\r\n        // add file\r\n        console.log('add', newFile)\r\n      }\r\n      if (newFile && oldFile) {\r\n        // update file\r\n        console.log('update', newFile)\r\n        const { success, active, chunk, response } = newFile\r\n        if (chunk && success && !active) {\r\n          console.log('chunk end')\r\n          const { data: { file, type } } = response\r\n          const payloads = {\r\n            filePath: file.match(/\\/cw(.*)/)[0],\r\n            asyncID: uuidv4(),\r\n            isDeleteOrigin: false,\r\n            toImage: type === 'pdf' ? true : false,\r\n            unzip: type === 'zip' ? true : false,\r\n            _csrf: localStorage.getItem('token')\r\n          }\r\n          this.saveToServerAsyncPageTimer = setInterval(() => {\r\n            this.saveToServerAsyncPage(payloads)\r\n          }, 2000)\r\n        }\r\n      }\r\n      if (!newFile && oldFile) {\r\n        // delete file\r\n        console.log('delete')\r\n      }\r\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\r\n        if (!this.$refs[this.uploadRef].active) {\r\n          this.$refs[this.uploadRef].active = true\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n::v-deep .ele-upload__inner {\r\n  opacity: 1 !important;\r\n  cursor: pointer;\r\n  border: 1px dashed var(--idooel-form-title-border-color);\r\n  background: var(--idooel-form-upload-bg-color) !important;\r\n  &:hover {\r\n    border-color: var(--idooel-form-upload-border-hover-color);\r\n  }\r\n  border-radius: var(--idooel-form-border-radius);\r\n}\r\n.ele-upload__wrapper {\r\n  width: 100%;\r\n  .ele-upload__area {\r\n    padding: 16px;\r\n    width: 100%;\r\n    height: 80px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    .ele-upload__area--icon {\r\n      color: var(--idooel-primary-color);\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      font-size: 16x;\r\n      .anticon-cloud-upload {\r\n        font-size: 48px;\r\n        color: var(--idooel-primary-color);\r\n      }\r\n      .anticon {\r\n        font-size: 48px;\r\n        color: var(--idooel-primary-color);\r\n      }\r\n    }\r\n    .ele-upload__area--text {\r\n      margin-left: 16px;\r\n      .ele-upload__message {\r\n        font-size: 16px;\r\n        color: var(--idoole-black-088);\r\n        text-align: left;\r\n      }\r\n      .ele-upload__ext {\r\n        text-align: left;\r\n        font-size: 14px;\r\n        color: var(--idoole-black-06);\r\n      }\r\n    }\r\n  }\r\n  .ele-files__wrapper {\r\n    .ele-file__item {\r\n      width: 100%;\r\n      margin-top: 8px;\r\n      padding: 8px 12px;\r\n      border-radius: var(--idooel-form-border-radius);\r\n      background: var(--idooel-form-upload-bg-color);\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      .ele-file__suffix--icon {}\r\n      .ele-file__name {\r\n        flex: 1;\r\n        text-align: left;\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        font-size: 14px;\r\n        margin-left: 8px;\r\n        cursor: pointer;\r\n        .ele-file__inner {\r\n          overflow: hidden;\r\n          text-overflow: ellipsis;\r\n        }\r\n      }\r\n      .ele-file__delete {\r\n        margin-left: 8px;\r\n        .ele-file__delete--icon {\r\n          margin-left: 8px;\r\n          cursor: pointer;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\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__$n = "data-v-424e9c01";
+  const __vue_scope_id__$n = "data-v-5206d60c";
   /* module identifier */
   const __vue_module_identifier__$n = undefined;
   /* functional template */

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

@@ -3412,7 +3412,7 @@
         });
       },
       executeExpressionForUrl(url) {
-        return this.executeExpression(url) ? this.executeExpression(url) : url;
+        return shared.type.isApi(url) ? url : this.executeExpression(url);
       },
       setFieldsValue(props) {
         this.$refs[this.formRef].setFieldsValue(props);
@@ -3505,11 +3505,11 @@
     /* style */
     const __vue_inject_styles__$s = function (inject) {
       if (!inject) return
-      inject("data-v-22c624b4_0", { source: ".form__model--wrapper[data-v-22c624b4] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-22c624b4] {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content[data-v-22c624b4] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-22c624b4] {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA6KA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC5KA;AD6KA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC3KA;AD6KA;EACA,aAAA;AC3KA;AD6KA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC3KA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"form__model--wrapper\">\r\n    <div class=\"form-model__title\" v-if=\"title\">\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"form-model__content\">\r\n      <ele-alert style=\"margin-bottom: 16px;\" v-if=\"alertMeta\" v-bind=\"alertMeta\"></ele-alert>\r\n      <ele-form :ref=\"formRef\" :elements=\"elements\" :disabled=\"globalDisabled\"></ele-form>\r\n    </div>\r\n    <div class=\"form-model__footer\" v-if=\"footerMeta\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net, type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n  name: 'ele-form-model',\r\n  props: {\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    title: {\r\n      type: String\r\n    },\r\n    formMeta: {\r\n      type: Object\r\n    },\r\n    footerMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        validateFields: this.validateFields\r\n      }\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]\r\n      }\r\n    },\r\n    elements () {\r\n      const { elements } = this.formMeta\r\n      return elements\r\n    },\r\n    preRequest () {\r\n      const { preRequest = {} } = this.formMeta\r\n      return preRequest\r\n    },\r\n    infoRequest () {\r\n      const { infoRequest = {} } = this.formMeta\r\n      return infoRequest\r\n    },\r\n    alertMeta () {\r\n      const { alert = {} } = this.formMeta\r\n      return type.isEmpty(alert) ? null : alert\r\n    },\r\n    submitRequest () {\r\n      const { submitRequest = {} } = this.formMeta\r\n      return submitRequest\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    expressionData () {\r\n      return {\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta\r\n      }\r\n    },\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    }\r\n  },\r\n  methods: {\r\n    formModels () {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue() : {}\r\n    },\r\n    executeExpression (expression, dataSource = {}) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n    },\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})\r\n      return ret\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (PAGE_STATUS.CREATE == this.routeMetaMode) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        this.setFieldsValue(data)\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    executeExpressionForUrl (url) {\r\n      return this.executeExpression(url) ? this.executeExpression(url) : url\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\r\n    },\r\n    validateFields () {\r\n      return this.$refs[this.formRef].validateFields()\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      if (this.globalDisabled) return\r\n      const status = this.$refs[this.formRef].validateFields()\r\n      if (status) {\r\n        //TODO fieldMap\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    }\r\n  },\r\n  async mounted() {\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: auto;\r\n  background: #fff;\r\n  .form-model__title {\r\n    height: 56px;\r\n    padding: 0 16px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n  }\r\n  .form-model__content {\r\n    padding: 16px;\r\n  }\r\n  .form-model__footer {\r\n    /* width: 100%; */\r\n    height: 64px;\r\n    position: fixed;\r\n    bottom: 0;\r\n    display: flex;\r\n    float: right;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: end;\r\n  }\r\n}\r\n</style>",".form__model--wrapper {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-31eee433_0", { source: ".form__model--wrapper[data-v-31eee433] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-31eee433] {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content[data-v-31eee433] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-31eee433] {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA6KA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC5KA;AD6KA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC3KA;AD6KA;EACA,aAAA;AC3KA;AD6KA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC3KA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"form__model--wrapper\">\r\n    <div class=\"form-model__title\" v-if=\"title\">\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"form-model__content\">\r\n      <ele-alert style=\"margin-bottom: 16px;\" v-if=\"alertMeta\" v-bind=\"alertMeta\"></ele-alert>\r\n      <ele-form :ref=\"formRef\" :elements=\"elements\" :disabled=\"globalDisabled\"></ele-form>\r\n    </div>\r\n    <div class=\"form-model__footer\" v-if=\"footerMeta\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net, type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n  name: 'ele-form-model',\r\n  props: {\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    title: {\r\n      type: String\r\n    },\r\n    formMeta: {\r\n      type: Object\r\n    },\r\n    footerMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        validateFields: this.validateFields\r\n      }\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]\r\n      }\r\n    },\r\n    elements () {\r\n      const { elements } = this.formMeta\r\n      return elements\r\n    },\r\n    preRequest () {\r\n      const { preRequest = {} } = this.formMeta\r\n      return preRequest\r\n    },\r\n    infoRequest () {\r\n      const { infoRequest = {} } = this.formMeta\r\n      return infoRequest\r\n    },\r\n    alertMeta () {\r\n      const { alert = {} } = this.formMeta\r\n      return type.isEmpty(alert) ? null : alert\r\n    },\r\n    submitRequest () {\r\n      const { submitRequest = {} } = this.formMeta\r\n      return submitRequest\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    expressionData () {\r\n      return {\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta\r\n      }\r\n    },\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    }\r\n  },\r\n  methods: {\r\n    formModels () {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue() : {}\r\n    },\r\n    executeExpression (expression, dataSource = {}) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n    },\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})\r\n      return ret\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (PAGE_STATUS.CREATE == this.routeMetaMode) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        this.setFieldsValue(data)\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    executeExpressionForUrl (url) {\r\n      return type.isApi(url) ? url : this.executeExpression(url)\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\r\n    },\r\n    validateFields () {\r\n      return this.$refs[this.formRef].validateFields()\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      if (this.globalDisabled) return\r\n      const status = this.$refs[this.formRef].validateFields()\r\n      if (status) {\r\n        //TODO fieldMap\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    }\r\n  },\r\n  async mounted() {\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: auto;\r\n  background: #fff;\r\n  .form-model__title {\r\n    height: 56px;\r\n    padding: 0 16px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n  }\r\n  .form-model__content {\r\n    padding: 16px;\r\n  }\r\n  .form-model__footer {\r\n    /* width: 100%; */\r\n    height: 64px;\r\n    position: fixed;\r\n    bottom: 0;\r\n    display: flex;\r\n    float: right;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: end;\r\n  }\r\n}\r\n</style>",".form__model--wrapper {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$s = "data-v-22c624b4";
+    const __vue_scope_id__$s = "data-v-31eee433";
     /* module identifier */
     const __vue_module_identifier__$s = undefined;
     /* functional template */
@@ -4820,7 +4820,7 @@
         const {
           fileID: fileId
         } = file;
-        window.open(`api-file/workbench/file/stream/${fileId}?origin=true`);
+        window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`);
       },
       handleClickDelete(file) {
         this.$refs[this.uploadRef].remove(file);
@@ -5096,11 +5096,11 @@
     /* style */
     const __vue_inject_styles__$n = function (inject) {
       if (!inject) return
-      inject("data-v-424e9c01_0", { source: "[data-v-424e9c01] .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-424e9c01] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-424e9c01] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-424e9c01] {\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-424e9c01] {\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-424e9c01] {\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-424e9c01] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-424e9c01] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-424e9c01] {\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-424e9c01] {\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-424e9c01] {\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-424e9c01] {\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-424e9c01] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-424e9c01] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-424e9c01] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\upload\\src\\index.vue","index.vue"],"names":[],"mappings":"AAuWA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;ACzWA;ADsWA;EACA,0DAAA;ACpWA;ADwWA;EACA,WAAA;ACrWA;ADsWA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACpWA;ADqWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACnWA;ADoWA;EACA,eAAA;EACA,kCAAA;AClWA;ADoWA;EACA,eAAA;EACA,kCAAA;AClWA;ADqWA;EACA,iBAAA;ACnWA;ADoWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;AClWA;ADoWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;AClWA;ADuWA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACrWA;ADuWA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACrWA;ADsWA;EACA,gBAAA;EACA,uBAAA;ACpWA;ADuWA;EACA,gBAAA;ACrWA;ADsWA;EACA,gBAAA;EACA,eAAA;ACpWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele-upload__wrapper\">\r\n    <FileUpload\r\n      class=\"ele-upload__inner\"\r\n      v-show=\"isShowUploadContainer\"\r\n      v-model=\"files\"\r\n      :ref=\"uploadRef\"\r\n      :drop=\"drop\"\r\n      :chunk-enabled=\"chunkEnabled\"\r\n      :chunk=\"chunkConfig\"\r\n      :accept=\"accept\"\r\n      :size=\"fileSizeLimit\"\r\n      :post-action=\"postAction\"\r\n      :multiple=\"multiple\"\r\n      :headers=\"headers\"\r\n      :maximum=\"getMaximum\"\r\n      @input-file=\"onWatchInputFiles\"\r\n      @input=\"onWatchFiles\"\r\n      style=\"width: 100%;\">\r\n      <section class=\"ele-upload__area\">\r\n        <div class=\"ele-upload__area--icon\">\r\n          <template v-if=\"iconIsZhWrod\">\r\n            {{ icon }}\r\n          </template>\r\n          <template v-else>\r\n            <ele-icon :type=\"icon\"></ele-icon>\r\n          </template>\r\n        </div>\r\n        <div class=\"ele-upload__area--text\">\r\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\r\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\r\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\r\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\r\n        </div>\r\n      </section>\r\n    </FileUpload>\r\n    <section class=\"ele-files__wrapper\">\r\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\r\n        <div class=\"ele-file__suffix--icon\">\r\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\r\n        </div>\r\n        <div class=\"ele-file__name\">\r\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\r\n          <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\r\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\r\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\r\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\r\n            <ele-icon type=\"delete\"></ele-icon>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport FileUpload from 'vue-upload-component'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { route, net, type } from '@idooel/shared'\r\nexport default {\r\n  name: 'ele-upload',\r\n  components: {\r\n    FileUpload\r\n  },\r\n  model: {\r\n    prop: 'value',\r\n    event: 'change'\r\n  },\r\n  props: {\r\n    url: {\r\n      type: String,\r\n      //TODO\r\n      default: `zuul/api-file/workbench/file`\r\n    },\r\n    icon: {\r\n      type: String,\r\n      default: '上传'\r\n    },\r\n    size: {\r\n      type: Number,\r\n      default: 100\r\n    },\r\n    message: {\r\n      type: String,\r\n      default: '单击或拖动文件到该区域以上传'\r\n    },\r\n    ext: {\r\n      type: String\r\n    },\r\n    accept: {\r\n      type: String\r\n    },\r\n    maximum: {\r\n      type: Number,\r\n      default: 10\r\n    },\r\n    multiple: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    drop: {\r\n      type: Boolean,\r\n      default: true\r\n    },\r\n    value: {\r\n      type: [String, Array]\r\n    },\r\n    querys: {\r\n      type: Object,\r\n      default: () => ({\r\n        _csrf: localStorage.getItem('token'),\r\n        _t: new Date().valueOf()\r\n      })\r\n    },\r\n    headers: {\r\n      type: Object,\r\n      default: () => ({\r\n        'X-XSRF-TOKEN': localStorage.getItem('token')\r\n      })\r\n    },\r\n    byteConversion: {\r\n      type: Number,\r\n      default: 1024 * 1024\r\n    },\r\n    chunkEnabled: {\r\n      type: Boolean,\r\n      default: true\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      files: [],\r\n      buildedFiles: [],\r\n      saveToServerAsyncPageTimer: null\r\n    }\r\n  },\r\n  watch: {\r\n    value: {\r\n      async handler (value) {\r\n        if (type.isArray(value)) {\r\n          // multiple\r\n        } else if (type.isEmpty(value)) {\r\n          this.files = []\r\n          this.buildedFiles = []\r\n        } else {\r\n          // single\r\n          this.fetchFileWithFileId()\r\n        }\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  computed: {\r\n    prefixPath () {\r\n      return window.prefixPath\r\n    },\r\n    iconIsZhWrod () {\r\n      return type.isZhWord(this.icon)\r\n    },\r\n    getPayloads () {\r\n      return {\r\n        override: false\r\n      }\r\n    },\r\n    chunkConfig () {\r\n      return {\r\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\r\n        headers: {\r\n          ...this.headers\r\n        },\r\n        minSize: 3 * this.byteConversion,\r\n        maxActive: 3,\r\n        maxRetries: 5,\r\n        startBody: {\r\n          override: true,\r\n          path: '/cw'\r\n        },\r\n        uploadBody: {\r\n          override: true,\r\n          path: '/cw'\r\n        },\r\n        finishBody: {\r\n          override: true,\r\n          path: '/cw'\r\n        }\r\n      }\r\n    },\r\n    isFileUploadSuccessed () {\r\n      return this.files.every(file => file.success)\r\n    },\r\n    isShowUploadContainer () {\r\n      if (this.multiple) {\r\n        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\r\n          return false\r\n        } else {\r\n          return true\r\n        }\r\n      } else {\r\n        const [file = {}] = this.buildedFiles\r\n        if (this.buildedFiles.length < 1) {\r\n          return true\r\n        }\r\n        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\r\n          return false\r\n        } else {\r\n          return true\r\n        }\r\n      }\r\n    },\r\n    getMaximum () {\r\n      return this.multiple ? this.maximum : 1\r\n    },\r\n    fileSizeLimit () {\r\n      return this.size * this.byteConversion\r\n    },\r\n    postAction () {\r\n      const ret = route.toQueryString(this.querys)\r\n      return `${this.prefixPath}${this.url}?${ret}`\r\n    },\r\n    uploadRef () {\r\n      return uuidv4()\r\n    },\r\n    fileSuffixIcon () {\r\n      return {\r\n        'doc': { name: 'icon-doc' },\r\n        'html': { name: 'icon-html' },\r\n        'mp4': { name: 'icon-mp' },\r\n        'pdf': { name: 'icon-pdf' },\r\n        'ppt': { name: 'icon-ppt' },\r\n        'psd': { name: 'icon-psd' },\r\n        'rtf': { name: 'icon-rtf' },\r\n        'txt': { name: 'icon-txt' },\r\n        'vis': { name: 'icon-vis' },\r\n        'xls': { name: 'icon-xls' },\r\n        'xml': { name: 'icon-xml' },\r\n        'zip': { name: 'icon-zip' },\r\n        'jpg': { name: 'icon-img' },\r\n        'mp3': { name: 'icon-mp1' },\r\n      }\r\n    },\r\n    fileIds () {\r\n      const fileIds = this.buildedFiles.map(file => {\r\n        return file.fileID\r\n      })\r\n      return this.multiple ? fileIds : fileIds[0]\r\n    },\r\n    fileResponseData () {\r\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\r\n    }\r\n  },\r\n  methods: {\r\n    async fetchFileWithFileId () {\r\n      if (!this.value) return\r\n      await net.get(\r\n        `/api-file/file/${this.value}`\r\n      ).then(resp => {\r\n        const { data } = resp\r\n        this.buildedFiles = [data]\r\n        this.files = [data]\r\n      })\r\n    },\r\n    handleClickDownload (file) {\r\n      const { fileID: fileId } = file\r\n      window.open(`api-file/workbench/file/stream/${fileId}?origin=true`)\r\n    },\r\n    handleClickDelete (file) {\r\n      this.$refs[this.uploadRef].remove(file)\r\n      const { fileID } = file\r\n      this.files = this.files.filter(file => file.fileID !== fileID)\r\n      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\r\n      this.$emit('change', this.fileIds)\r\n    },\r\n    onWatchFiles (files) {\r\n      this.files = files\r\n      this.buildedFiles = this.files.map(file => {\r\n        return {\r\n          ...file.response.data,\r\n          ...file\r\n        }\r\n      })\r\n      if (this.isFileUploadSuccessed) {\r\n        this.$emit('change', this.fileIds)\r\n        this.$emit('on-success', this.fileResponseData)\r\n      }\r\n    },\r\n    async saveToServerAsyncPage (payloads = {}) {\r\n      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \r\n        headers: {\r\n          'Content-Type': 'multipart/form-data'\r\n        }\r\n      }).then(resp =>{\r\n        const { data } = resp\r\n        if (data !== 'saveToServerAsyncPage') {\r\n          clearInterval(this.saveToServerAsyncPageTimer)\r\n        }\r\n      })\r\n      // const ret = await net.post({\r\n      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\r\n      //   method: 'POST',\r\n      //   data: { ...payloads }\r\n      // }).then(resp => {\r\n      //   const { data: { data, code, message } } = resp\r\n      //   if (code !== '2000') {\r\n      //     this.$Message.error(message)\r\n      //     return\r\n      //   }\r\n      //   if (data !== 'saveToServerAsyncPage') {\r\n      //     clearInterval(timer)\r\n      //     const { fileID, size } = data\r\n      //     this.$emit('on-success', { ...data, fileId: fileID })\r\n      //     this.$Message.success('同步成功')\r\n      //     return { fileId: fileID, size }\r\n      //   }\r\n      // })\r\n      // return ret\r\n    },\r\n    onWatchInputFiles (newFile, oldFile) {\r\n      if (newFile && !oldFile) {\r\n        // add file\r\n        console.log('add', newFile)\r\n      }\r\n      if (newFile && oldFile) {\r\n        // update file\r\n        console.log('update', newFile)\r\n        const { success, active, chunk, response } = newFile\r\n        if (chunk && success && !active) {\r\n          console.log('chunk end')\r\n          const { data: { file, type } } = response\r\n          const payloads = {\r\n            filePath: file.match(/\\/cw(.*)/)[0],\r\n            asyncID: uuidv4(),\r\n            isDeleteOrigin: false,\r\n            toImage: type === 'pdf' ? true : false,\r\n            unzip: type === 'zip' ? true : false,\r\n            _csrf: localStorage.getItem('token')\r\n          }\r\n          this.saveToServerAsyncPageTimer = setInterval(() => {\r\n            this.saveToServerAsyncPage(payloads)\r\n          }, 2000)\r\n        }\r\n      }\r\n      if (!newFile && oldFile) {\r\n        // delete file\r\n        console.log('delete')\r\n      }\r\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\r\n        if (!this.$refs[this.uploadRef].active) {\r\n          this.$refs[this.uploadRef].active = true\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n::v-deep .ele-upload__inner {\r\n  opacity: 1 !important;\r\n  cursor: pointer;\r\n  border: 1px dashed var(--idooel-form-title-border-color);\r\n  background: var(--idooel-form-upload-bg-color) !important;\r\n  &:hover {\r\n    border-color: var(--idooel-form-upload-border-hover-color);\r\n  }\r\n  border-radius: var(--idooel-form-border-radius);\r\n}\r\n.ele-upload__wrapper {\r\n  width: 100%;\r\n  .ele-upload__area {\r\n    padding: 16px;\r\n    width: 100%;\r\n    height: 80px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    .ele-upload__area--icon {\r\n      color: var(--idooel-primary-color);\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      font-size: 16x;\r\n      .anticon-cloud-upload {\r\n        font-size: 48px;\r\n        color: var(--idooel-primary-color);\r\n      }\r\n      .anticon {\r\n        font-size: 48px;\r\n        color: var(--idooel-primary-color);\r\n      }\r\n    }\r\n    .ele-upload__area--text {\r\n      margin-left: 16px;\r\n      .ele-upload__message {\r\n        font-size: 16px;\r\n        color: var(--idoole-black-088);\r\n        text-align: left;\r\n      }\r\n      .ele-upload__ext {\r\n        text-align: left;\r\n        font-size: 14px;\r\n        color: var(--idoole-black-06);\r\n      }\r\n    }\r\n  }\r\n  .ele-files__wrapper {\r\n    .ele-file__item {\r\n      width: 100%;\r\n      margin-top: 8px;\r\n      padding: 8px 12px;\r\n      border-radius: var(--idooel-form-border-radius);\r\n      background: var(--idooel-form-upload-bg-color);\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      .ele-file__suffix--icon {}\r\n      .ele-file__name {\r\n        flex: 1;\r\n        text-align: left;\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        font-size: 14px;\r\n        margin-left: 8px;\r\n        cursor: pointer;\r\n        .ele-file__inner {\r\n          overflow: hidden;\r\n          text-overflow: ellipsis;\r\n        }\r\n      }\r\n      .ele-file__delete {\r\n        margin-left: 8px;\r\n        .ele-file__delete--icon {\r\n          margin-left: 8px;\r\n          cursor: pointer;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\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-5206d60c_0", { source: "[data-v-5206d60c] .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-5206d60c] .ele-upload__inner:hover {\n  border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-5206d60c] {\n  width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-5206d60c] {\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-5206d60c] {\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-5206d60c] {\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-5206d60c] {\n  font-size: 48px;\n  color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-5206d60c] {\n  margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-5206d60c] {\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-5206d60c] {\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-5206d60c] {\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-5206d60c] {\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-5206d60c] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-5206d60c] {\n  margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-5206d60c] {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\upload\\src\\index.vue","index.vue"],"names":[],"mappings":"AAuWA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;ACzWA;ADsWA;EACA,0DAAA;ACpWA;ADwWA;EACA,WAAA;ACrWA;ADsWA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACpWA;ADqWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACnWA;ADoWA;EACA,eAAA;EACA,kCAAA;AClWA;ADoWA;EACA,eAAA;EACA,kCAAA;AClWA;ADqWA;EACA,iBAAA;ACnWA;ADoWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;AClWA;ADoWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;AClWA;ADuWA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACrWA;ADuWA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACrWA;ADsWA;EACA,gBAAA;EACA,uBAAA;ACpWA;ADuWA;EACA,gBAAA;ACrWA;ADsWA;EACA,gBAAA;EACA,eAAA;ACpWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele-upload__wrapper\">\r\n    <FileUpload\r\n      class=\"ele-upload__inner\"\r\n      v-show=\"isShowUploadContainer\"\r\n      v-model=\"files\"\r\n      :ref=\"uploadRef\"\r\n      :drop=\"drop\"\r\n      :chunk-enabled=\"chunkEnabled\"\r\n      :chunk=\"chunkConfig\"\r\n      :accept=\"accept\"\r\n      :size=\"fileSizeLimit\"\r\n      :post-action=\"postAction\"\r\n      :multiple=\"multiple\"\r\n      :headers=\"headers\"\r\n      :maximum=\"getMaximum\"\r\n      @input-file=\"onWatchInputFiles\"\r\n      @input=\"onWatchFiles\"\r\n      style=\"width: 100%;\">\r\n      <section class=\"ele-upload__area\">\r\n        <div class=\"ele-upload__area--icon\">\r\n          <template v-if=\"iconIsZhWrod\">\r\n            {{ icon }}\r\n          </template>\r\n          <template v-else>\r\n            <ele-icon :type=\"icon\"></ele-icon>\r\n          </template>\r\n        </div>\r\n        <div class=\"ele-upload__area--text\">\r\n          <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\r\n          <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\r\n          <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\r\n          <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\r\n        </div>\r\n      </section>\r\n    </FileUpload>\r\n    <section class=\"ele-files__wrapper\">\r\n      <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\r\n        <div class=\"ele-file__suffix--icon\">\r\n          <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\r\n        </div>\r\n        <div class=\"ele-file__name\">\r\n          <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\r\n          <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\r\n            <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\r\n          <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\r\n          <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\r\n            <ele-icon type=\"delete\"></ele-icon>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport FileUpload from 'vue-upload-component'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { route, net, type } from '@idooel/shared'\r\nexport default {\r\n  name: 'ele-upload',\r\n  components: {\r\n    FileUpload\r\n  },\r\n  model: {\r\n    prop: 'value',\r\n    event: 'change'\r\n  },\r\n  props: {\r\n    url: {\r\n      type: String,\r\n      //TODO\r\n      default: `zuul/api-file/workbench/file`\r\n    },\r\n    icon: {\r\n      type: String,\r\n      default: '上传'\r\n    },\r\n    size: {\r\n      type: Number,\r\n      default: 100\r\n    },\r\n    message: {\r\n      type: String,\r\n      default: '单击或拖动文件到该区域以上传'\r\n    },\r\n    ext: {\r\n      type: String\r\n    },\r\n    accept: {\r\n      type: String\r\n    },\r\n    maximum: {\r\n      type: Number,\r\n      default: 10\r\n    },\r\n    multiple: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    drop: {\r\n      type: Boolean,\r\n      default: true\r\n    },\r\n    value: {\r\n      type: [String, Array]\r\n    },\r\n    querys: {\r\n      type: Object,\r\n      default: () => ({\r\n        _csrf: localStorage.getItem('token'),\r\n        _t: new Date().valueOf()\r\n      })\r\n    },\r\n    headers: {\r\n      type: Object,\r\n      default: () => ({\r\n        'X-XSRF-TOKEN': localStorage.getItem('token')\r\n      })\r\n    },\r\n    byteConversion: {\r\n      type: Number,\r\n      default: 1024 * 1024\r\n    },\r\n    chunkEnabled: {\r\n      type: Boolean,\r\n      default: true\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      files: [],\r\n      buildedFiles: [],\r\n      saveToServerAsyncPageTimer: null\r\n    }\r\n  },\r\n  watch: {\r\n    value: {\r\n      async handler (value) {\r\n        if (type.isArray(value)) {\r\n          // multiple\r\n        } else if (type.isEmpty(value)) {\r\n          this.files = []\r\n          this.buildedFiles = []\r\n        } else {\r\n          // single\r\n          this.fetchFileWithFileId()\r\n        }\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  computed: {\r\n    prefixPath () {\r\n      return window.prefixPath\r\n    },\r\n    iconIsZhWrod () {\r\n      return type.isZhWord(this.icon)\r\n    },\r\n    getPayloads () {\r\n      return {\r\n        override: false\r\n      }\r\n    },\r\n    chunkConfig () {\r\n      return {\r\n        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\r\n        headers: {\r\n          ...this.headers\r\n        },\r\n        minSize: 3 * this.byteConversion,\r\n        maxActive: 3,\r\n        maxRetries: 5,\r\n        startBody: {\r\n          override: true,\r\n          path: '/cw'\r\n        },\r\n        uploadBody: {\r\n          override: true,\r\n          path: '/cw'\r\n        },\r\n        finishBody: {\r\n          override: true,\r\n          path: '/cw'\r\n        }\r\n      }\r\n    },\r\n    isFileUploadSuccessed () {\r\n      return this.files.every(file => file.success)\r\n    },\r\n    isShowUploadContainer () {\r\n      if (this.multiple) {\r\n        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\r\n          return false\r\n        } else {\r\n          return true\r\n        }\r\n      } else {\r\n        const [file = {}] = this.buildedFiles\r\n        if (this.buildedFiles.length < 1) {\r\n          return true\r\n        }\r\n        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\r\n          return false\r\n        } else {\r\n          return true\r\n        }\r\n      }\r\n    },\r\n    getMaximum () {\r\n      return this.multiple ? this.maximum : 1\r\n    },\r\n    fileSizeLimit () {\r\n      return this.size * this.byteConversion\r\n    },\r\n    postAction () {\r\n      const ret = route.toQueryString(this.querys)\r\n      return `${this.prefixPath}${this.url}?${ret}`\r\n    },\r\n    uploadRef () {\r\n      return uuidv4()\r\n    },\r\n    fileSuffixIcon () {\r\n      return {\r\n        'doc': { name: 'icon-doc' },\r\n        'html': { name: 'icon-html' },\r\n        'mp4': { name: 'icon-mp' },\r\n        'pdf': { name: 'icon-pdf' },\r\n        'ppt': { name: 'icon-ppt' },\r\n        'psd': { name: 'icon-psd' },\r\n        'rtf': { name: 'icon-rtf' },\r\n        'txt': { name: 'icon-txt' },\r\n        'vis': { name: 'icon-vis' },\r\n        'xls': { name: 'icon-xls' },\r\n        'xml': { name: 'icon-xml' },\r\n        'zip': { name: 'icon-zip' },\r\n        'jpg': { name: 'icon-img' },\r\n        'mp3': { name: 'icon-mp1' },\r\n      }\r\n    },\r\n    fileIds () {\r\n      const fileIds = this.buildedFiles.map(file => {\r\n        return file.fileID\r\n      })\r\n      return this.multiple ? fileIds : fileIds[0]\r\n    },\r\n    fileResponseData () {\r\n      return this.multiple ? this.buildedFiles : this.buildedFiles[0]\r\n    }\r\n  },\r\n  methods: {\r\n    async fetchFileWithFileId () {\r\n      if (!this.value) return\r\n      await net.get(\r\n        `/api-file/file/${this.value}`\r\n      ).then(resp => {\r\n        const { data } = resp\r\n        this.buildedFiles = [data]\r\n        this.files = [data]\r\n      })\r\n    },\r\n    handleClickDownload (file) {\r\n      const { fileID: fileId } = file\r\n      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\r\n    },\r\n    handleClickDelete (file) {\r\n      this.$refs[this.uploadRef].remove(file)\r\n      const { fileID } = file\r\n      this.files = this.files.filter(file => file.fileID !== fileID)\r\n      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\r\n      this.$emit('change', this.fileIds)\r\n    },\r\n    onWatchFiles (files) {\r\n      this.files = files\r\n      this.buildedFiles = this.files.map(file => {\r\n        return {\r\n          ...file.response.data,\r\n          ...file\r\n        }\r\n      })\r\n      if (this.isFileUploadSuccessed) {\r\n        this.$emit('change', this.fileIds)\r\n        this.$emit('on-success', this.fileResponseData)\r\n      }\r\n    },\r\n    async saveToServerAsyncPage (payloads = {}) {\r\n      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \r\n        headers: {\r\n          'Content-Type': 'multipart/form-data'\r\n        }\r\n      }).then(resp =>{\r\n        const { data } = resp\r\n        if (data !== 'saveToServerAsyncPage') {\r\n          clearInterval(this.saveToServerAsyncPageTimer)\r\n        }\r\n      })\r\n      // const ret = await net.post({\r\n      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\r\n      //   method: 'POST',\r\n      //   data: { ...payloads }\r\n      // }).then(resp => {\r\n      //   const { data: { data, code, message } } = resp\r\n      //   if (code !== '2000') {\r\n      //     this.$Message.error(message)\r\n      //     return\r\n      //   }\r\n      //   if (data !== 'saveToServerAsyncPage') {\r\n      //     clearInterval(timer)\r\n      //     const { fileID, size } = data\r\n      //     this.$emit('on-success', { ...data, fileId: fileID })\r\n      //     this.$Message.success('同步成功')\r\n      //     return { fileId: fileID, size }\r\n      //   }\r\n      // })\r\n      // return ret\r\n    },\r\n    onWatchInputFiles (newFile, oldFile) {\r\n      if (newFile && !oldFile) {\r\n        // add file\r\n        console.log('add', newFile)\r\n      }\r\n      if (newFile && oldFile) {\r\n        // update file\r\n        console.log('update', newFile)\r\n        const { success, active, chunk, response } = newFile\r\n        if (chunk && success && !active) {\r\n          console.log('chunk end')\r\n          const { data: { file, type } } = response\r\n          const payloads = {\r\n            filePath: file.match(/\\/cw(.*)/)[0],\r\n            asyncID: uuidv4(),\r\n            isDeleteOrigin: false,\r\n            toImage: type === 'pdf' ? true : false,\r\n            unzip: type === 'zip' ? true : false,\r\n            _csrf: localStorage.getItem('token')\r\n          }\r\n          this.saveToServerAsyncPageTimer = setInterval(() => {\r\n            this.saveToServerAsyncPage(payloads)\r\n          }, 2000)\r\n        }\r\n      }\r\n      if (!newFile && oldFile) {\r\n        // delete file\r\n        console.log('delete')\r\n      }\r\n      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\r\n        if (!this.$refs[this.uploadRef].active) {\r\n          this.$refs[this.uploadRef].active = true\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n::v-deep .ele-upload__inner {\r\n  opacity: 1 !important;\r\n  cursor: pointer;\r\n  border: 1px dashed var(--idooel-form-title-border-color);\r\n  background: var(--idooel-form-upload-bg-color) !important;\r\n  &:hover {\r\n    border-color: var(--idooel-form-upload-border-hover-color);\r\n  }\r\n  border-radius: var(--idooel-form-border-radius);\r\n}\r\n.ele-upload__wrapper {\r\n  width: 100%;\r\n  .ele-upload__area {\r\n    padding: 16px;\r\n    width: 100%;\r\n    height: 80px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    .ele-upload__area--icon {\r\n      color: var(--idooel-primary-color);\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      font-size: 16x;\r\n      .anticon-cloud-upload {\r\n        font-size: 48px;\r\n        color: var(--idooel-primary-color);\r\n      }\r\n      .anticon {\r\n        font-size: 48px;\r\n        color: var(--idooel-primary-color);\r\n      }\r\n    }\r\n    .ele-upload__area--text {\r\n      margin-left: 16px;\r\n      .ele-upload__message {\r\n        font-size: 16px;\r\n        color: var(--idoole-black-088);\r\n        text-align: left;\r\n      }\r\n      .ele-upload__ext {\r\n        text-align: left;\r\n        font-size: 14px;\r\n        color: var(--idoole-black-06);\r\n      }\r\n    }\r\n  }\r\n  .ele-files__wrapper {\r\n    .ele-file__item {\r\n      width: 100%;\r\n      margin-top: 8px;\r\n      padding: 8px 12px;\r\n      border-radius: var(--idooel-form-border-radius);\r\n      background: var(--idooel-form-upload-bg-color);\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      .ele-file__suffix--icon {}\r\n      .ele-file__name {\r\n        flex: 1;\r\n        text-align: left;\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        font-size: 14px;\r\n        margin-left: 8px;\r\n        cursor: pointer;\r\n        .ele-file__inner {\r\n          overflow: hidden;\r\n          text-overflow: ellipsis;\r\n        }\r\n      }\r\n      .ele-file__delete {\r\n        margin-left: 8px;\r\n        .ele-file__delete--icon {\r\n          margin-left: 8px;\r\n          cursor: pointer;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\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__$n = "data-v-424e9c01";
+    const __vue_scope_id__$n = "data-v-5206d60c";
     /* module identifier */
     const __vue_module_identifier__$n = undefined;
     /* functional template */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idooel/components",
-  "version": "0.0.1-beta.43",
+  "version": "0.0.1-beta.45",
   "description": "",
   "private": false,
   "main": "dist/@idooel/components.umd.js",
@@ -17,7 +17,7 @@
   "license": "ISC",
   "peerDependencies": {
     "@idooel/expression": "0.0.1-beta.1",
-    "@idooel/shared": "0.0.1-beta.5",
+    "@idooel/shared": "0.0.1-beta.6",
     "ant-design-vue": "1.7.8",
     "cropperjs": "1.4.1",
     "moment": "^2.30.1",

package/packages/models/form-model/src/index.vue

@@ -141,7 +141,7 @@ export default {
       this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
     },
     executeExpressionForUrl (url) {
-      return this.executeExpression(url) ? this.executeExpression(url) : url
+      return type.isApi(url) ? url : this.executeExpression(url)
     },
     setFieldsValue (props) {
       this.$refs[this.formRef].setFieldsValue(props)

package/packages/upload/src/index.vue

@@ -264,7 +264,7 @@ export default {
     },
     handleClickDownload (file) {
       const { fileID: fileId } = file
-      window.open(`api-file/workbench/file/stream/${fileId}?origin=true`)
+      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)
     },
     handleClickDelete (file) {
       this.$refs[this.uploadRef].remove(file)