tianheng-ui 0.0.56 → 0.0.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (238) hide show
  1. package/lib/039af9192b9bb277966ceb4e4ce29c41.js +16 -0
  2. package/lib/{c755e7fc08446566ee8dd3a8aa8fe43f.js → 2d84c80112a372bc149cad3464e90fa3.js} +404 -502
  3. package/lib/5977b934a4c6b480790864ea01303173.js +10834 -0
  4. package/lib/7745f3e776488705a38e62f85adad54d.js +16 -0
  5. package/lib/de8dee841ffdaaede3a2254deef30376.js +15395 -0
  6. package/lib/e78eab250e7f8ccac3d918dfdb06ca10.js +8904 -0
  7. package/lib/index.js +4 -2
  8. package/lib/theme-chalk/fonts/PingFang.ttf +0 -0
  9. package/lib/theme-chalk/fonts/bpmn.eot +0 -0
  10. package/lib/theme-chalk/fonts/bpmn.svg +224 -0
  11. package/lib/theme-chalk/fonts/bpmn.ttf +0 -0
  12. package/lib/theme-chalk/fonts/bpmn.woff +0 -0
  13. package/lib/theme-chalk/fonts/bpmn.woff2 +0 -0
  14. package/lib/theme-chalk/fonts/fontawesome-webfont.eot +0 -0
  15. package/lib/theme-chalk/fonts/fontawesome-webfont.svg +2671 -0
  16. package/lib/theme-chalk/fonts/fontawesome-webfont.ttf +0 -0
  17. package/lib/theme-chalk/fonts/fontawesome-webfont.woff +0 -0
  18. package/lib/theme-chalk/fonts/fontawesome-webfont.woff2 +0 -0
  19. package/lib/{iconfont.eot → theme-chalk/fonts/iconfont.eot} +0 -0
  20. package/lib/{iconfont.svg → theme-chalk/fonts/iconfont.svg} +0 -0
  21. package/lib/theme-chalk/fonts/iconfont.ttf +0 -0
  22. package/lib/theme-chalk/fonts/iconfont.woff +0 -0
  23. package/lib/theme-chalk/images/notData.png +0 -0
  24. package/lib/theme-chalk/index.scss +29 -0
  25. package/lib/theme-chalk/styles/button.scss +501 -0
  26. package/lib/theme-chalk/styles/card.scss +29 -0
  27. package/lib/theme-chalk/styles/cell.scss +54 -0
  28. package/lib/theme-chalk/styles/codeEditor.scss +9 -0
  29. package/lib/theme-chalk/styles/col.scss +151 -0
  30. package/lib/theme-chalk/styles/dialog.scss +59 -0
  31. package/lib/theme-chalk/styles/empty.scss +22 -0
  32. package/lib/theme-chalk/styles/feature.scss +42 -0
  33. package/lib/theme-chalk/styles/font.css +7 -0
  34. package/lib/theme-chalk/{icon.css → styles/icon.css} +3 -3
  35. package/lib/theme-chalk/styles/imagePreview.scss +113 -0
  36. package/lib/theme-chalk/styles/img.scss +35 -0
  37. package/lib/theme-chalk/styles/reset.scss +8 -0
  38. package/lib/theme-chalk/{root.css → styles/root.css} +2 -35
  39. package/lib/theme-chalk/styles/row.scss +23 -0
  40. package/lib/theme-chalk/styles/variable.scss +80 -0
  41. package/lib/tianheng-ui.js +71 -9
  42. package/package.json +24 -4
  43. package/packages/Button/index.js +8 -0
  44. package/packages/Button/index.vue +80 -0
  45. package/packages/Card/index.js +8 -0
  46. package/packages/Card/index.vue +37 -0
  47. package/packages/{cell → Cell}/index.js +0 -0
  48. package/packages/Cell/index.vue +68 -0
  49. package/packages/{codeEditor → CodeEditor}/index.js +0 -0
  50. package/packages/{codeEditor → CodeEditor}/index.vue +73 -108
  51. package/packages/Col/index.js +8 -0
  52. package/packages/Col/index.vue +41 -0
  53. package/packages/{dialog → Dialog}/index.js +0 -0
  54. package/packages/{dialog → Dialog}/index.vue +19 -10
  55. package/packages/Empty/images/notData.png +0 -0
  56. package/packages/{empty → Empty}/index.js +0 -0
  57. package/packages/Empty/index.vue +35 -0
  58. package/packages/FormMaking/Container.vue +1907 -0
  59. package/packages/{formMaking → FormMaking}/FormConfig.vue +22 -6
  60. package/packages/FormMaking/GenerateForm.vue +246 -0
  61. package/packages/{formMaking → FormMaking}/GenerateFormItem.vue +340 -172
  62. package/packages/FormMaking/GenerateFormItemH5.vue +828 -0
  63. package/packages/{formMaking → FormMaking}/Upload/index.vue +0 -0
  64. package/packages/FormMaking/WidgetConfig.vue +473 -0
  65. package/packages/{formMaking → FormMaking}/WidgetForm.vue +49 -31
  66. package/packages/FormMaking/WidgetFormItem.vue +157 -0
  67. package/packages/{formMaking/componentsConfig.js → FormMaking/custom/config.js} +379 -163
  68. package/packages/FormMaking/custom/configs/alliance.vue +0 -0
  69. package/packages/FormMaking/custom/configs/blank.vue +54 -0
  70. package/packages/FormMaking/custom/configs/button.vue +144 -0
  71. package/packages/FormMaking/custom/configs/cascader.vue +182 -0
  72. package/packages/FormMaking/custom/configs/cell.vue +81 -0
  73. package/packages/FormMaking/custom/configs/checkbox.vue +237 -0
  74. package/packages/FormMaking/custom/configs/color.vue +137 -0
  75. package/packages/FormMaking/custom/configs/date.vue +158 -0
  76. package/packages/FormMaking/custom/configs/divider.vue +61 -0
  77. package/packages/FormMaking/custom/configs/editor.vue +71 -0
  78. package/packages/FormMaking/custom/configs/filler.vue +52 -0
  79. package/packages/FormMaking/custom/configs/grid.vue +103 -0
  80. package/packages/FormMaking/custom/configs/image.vue +148 -0
  81. package/packages/FormMaking/custom/configs/input.vue +176 -0
  82. package/packages/FormMaking/custom/configs/number.vue +140 -0
  83. package/packages/FormMaking/custom/configs/radio.vue +215 -0
  84. package/packages/FormMaking/custom/configs/rate.vue +109 -0
  85. package/packages/FormMaking/custom/configs/select.vue +308 -0
  86. package/packages/FormMaking/custom/configs/slider.vue +142 -0
  87. package/packages/FormMaking/custom/configs/switch.vue +130 -0
  88. package/packages/FormMaking/custom/configs/table.vue +105 -0
  89. package/packages/FormMaking/custom/configs/table_h5.vue +102 -0
  90. package/packages/FormMaking/custom/configs/tabs.vue +175 -0
  91. package/packages/FormMaking/custom/configs/text.vue +71 -0
  92. package/packages/FormMaking/custom/configs/textarea.vue +167 -0
  93. package/packages/FormMaking/custom/configs/time.vue +153 -0
  94. package/packages/FormMaking/custom/configs/upload.vue +150 -0
  95. package/packages/FormMaking/custom/index.js +33 -0
  96. package/packages/FormMaking/custom/items/alliance.vue +132 -0
  97. package/packages/FormMaking/custom/items/blank.vue +16 -0
  98. package/packages/FormMaking/custom/items/button.vue +27 -0
  99. package/packages/FormMaking/custom/items/cascader.vue +29 -0
  100. package/packages/FormMaking/custom/items/cell.vue +18 -0
  101. package/packages/FormMaking/custom/items/checkbox.vue +46 -0
  102. package/packages/FormMaking/custom/items/color.vue +19 -0
  103. package/packages/FormMaking/custom/items/date.vue +29 -0
  104. package/packages/FormMaking/custom/items/divider.vue +14 -0
  105. package/packages/FormMaking/custom/items/editor.vue +22 -0
  106. package/packages/FormMaking/custom/items/filler.vue +17 -0
  107. package/packages/FormMaking/custom/items/grid.vue +129 -0
  108. package/packages/FormMaking/custom/items/image.vue +42 -0
  109. package/packages/FormMaking/custom/items/input.vue +36 -0
  110. package/packages/FormMaking/custom/items/login.vue +13 -0
  111. package/packages/FormMaking/custom/items/number.vue +24 -0
  112. package/packages/FormMaking/custom/items/radio.vue +44 -0
  113. package/packages/FormMaking/custom/items/rate.vue +20 -0
  114. package/packages/FormMaking/custom/items/select.vue +32 -0
  115. package/packages/FormMaking/custom/items/slider.vue +34 -0
  116. package/packages/FormMaking/custom/items/switch.vue +22 -0
  117. package/packages/FormMaking/custom/items/table.vue +106 -0
  118. package/packages/FormMaking/custom/items/table_h5.vue +126 -0
  119. package/packages/FormMaking/custom/items/tabs.vue +145 -0
  120. package/packages/FormMaking/custom/items/text.vue +18 -0
  121. package/packages/FormMaking/custom/items/textarea.vue +37 -0
  122. package/packages/FormMaking/custom/items/time.vue +32 -0
  123. package/packages/FormMaking/custom/items/upload.vue +83 -0
  124. package/packages/FormMaking/custom/mixins/index.js +61 -0
  125. package/packages/FormMaking/custom/register.js +18 -0
  126. package/packages/{formMaking → FormMaking}/iconfont/demo.css +0 -0
  127. package/packages/{formMaking → FormMaking}/iconfont/demo_index.html +0 -0
  128. package/packages/{formMaking → FormMaking}/iconfont/iconfont.css +0 -0
  129. package/packages/{formMaking → FormMaking}/iconfont/iconfont.eot +0 -0
  130. package/packages/{formMaking → FormMaking}/iconfont/iconfont.js +0 -0
  131. package/packages/{formMaking → FormMaking}/iconfont/iconfont.svg +0 -0
  132. package/{lib → packages/FormMaking/iconfont}/iconfont.ttf +0 -0
  133. package/{lib → packages/FormMaking/iconfont}/iconfont.woff +0 -0
  134. package/packages/{formMaking → FormMaking}/iconfont/iconfont.woff2 +0 -0
  135. package/packages/FormMaking/index.js +35 -0
  136. package/packages/{formMaking → FormMaking}/lang/en-US.js +1 -1
  137. package/packages/{formMaking → FormMaking}/lang/zh-CN.js +1 -1
  138. package/packages/{formMaking → FormMaking}/styles/cover.scss +1 -1
  139. package/packages/{formMaking → FormMaking}/styles/index.scss +445 -429
  140. package/packages/{formMaking → FormMaking/util}/generateCode.js +5 -5
  141. package/packages/{formMaking → FormMaking}/util/index.js +0 -0
  142. package/packages/{formMaking → FormMaking}/util/request.js +0 -0
  143. package/packages/{icons → Icons}/index.js +0 -0
  144. package/packages/{icons → Icons}/index.vue +26 -9
  145. package/packages/Image/index.js +8 -0
  146. package/packages/Image/index.vue +146 -0
  147. package/packages/ImagePreview/index.js +8 -0
  148. package/packages/ImagePreview/index.vue +386 -0
  149. package/packages/Row/index.js +8 -0
  150. package/packages/Row/index.vue +35 -0
  151. package/packages/{table → Table}/action.js +0 -0
  152. package/packages/{table → Table}/action.vue +1 -1
  153. package/packages/Table/column.vue +63 -0
  154. package/packages/{table → Table}/index.js +0 -0
  155. package/packages/{table → Table}/index.vue +25 -23
  156. package/packages/{table → Table}/search.js +0 -0
  157. package/packages/{table → Table}/search.vue +2 -2
  158. package/packages/{table → Table}/tools.js +0 -0
  159. package/packages/{table → Table}/tools.vue +0 -0
  160. package/packages/Workflow/Log.js +99 -0
  161. package/packages/Workflow/designer/ProcessDesigner.vue +628 -0
  162. package/packages/Workflow/designer/index.js +7 -0
  163. package/packages/Workflow/designer/plugins/content-pad/contentPadProvider.js +390 -0
  164. package/packages/Workflow/designer/plugins/content-pad/index.js +6 -0
  165. package/packages/Workflow/designer/plugins/defaultEmpty.js +24 -0
  166. package/packages/Workflow/designer/plugins/descriptor/activitiDescriptor.json +1071 -0
  167. package/packages/Workflow/designer/plugins/descriptor/camundaDescriptor.json +1087 -0
  168. package/packages/Workflow/designer/plugins/descriptor/flowableDescriptor.json +1215 -0
  169. package/packages/Workflow/designer/plugins/extension-moddle/activiti/activitiExtension.js +74 -0
  170. package/packages/Workflow/designer/plugins/extension-moddle/activiti/index.js +9 -0
  171. package/packages/Workflow/designer/plugins/extension-moddle/camunda/extension.js +148 -0
  172. package/packages/Workflow/designer/plugins/extension-moddle/camunda/index.js +6 -0
  173. package/packages/Workflow/designer/plugins/extension-moddle/flowable/flowableExtension.js +74 -0
  174. package/packages/Workflow/designer/plugins/extension-moddle/flowable/index.js +9 -0
  175. package/packages/Workflow/designer/plugins/palette/CustomPalette.js +156 -0
  176. package/packages/Workflow/designer/plugins/palette/index.js +6 -0
  177. package/packages/Workflow/designer/plugins/palette/paletteProvider.js +160 -0
  178. package/packages/Workflow/designer/plugins/translate/customTranslate.js +41 -0
  179. package/packages/Workflow/designer/plugins/translate/zh.js +238 -0
  180. package/packages/Workflow/highlight/index.js +5 -0
  181. package/packages/Workflow/index.js +26 -0
  182. package/packages/Workflow/index.vue +394 -0
  183. package/packages/Workflow/modules/auto-place/CustomAutoPlace.js +81 -0
  184. package/packages/Workflow/modules/auto-place/index.js +6 -0
  185. package/packages/Workflow/modules/custom-renderer/CustomRenderer.js +17 -0
  186. package/packages/Workflow/modules/custom-renderer/index.js +6 -0
  187. package/packages/Workflow/modules/rules/CustomRules.js +16 -0
  188. package/packages/Workflow/modules/rules/index.js +6 -0
  189. package/packages/Workflow/palette/ProcessPalette.vue +106 -0
  190. package/packages/Workflow/palette/index.js +7 -0
  191. package/packages/Workflow/penal/PropertiesPanel.vue +247 -0
  192. package/packages/Workflow/penal/base/ElementBaseInfo.vue +80 -0
  193. package/packages/Workflow/penal/flow-condition/FlowCondition.vue +142 -0
  194. package/packages/Workflow/penal/form/ElementForm.vue +367 -0
  195. package/packages/Workflow/penal/index.js +7 -0
  196. package/packages/Workflow/penal/listeners/ElementListeners.vue +299 -0
  197. package/packages/Workflow/penal/listeners/UserTaskListeners.vue +322 -0
  198. package/packages/Workflow/penal/listeners/template.js +178 -0
  199. package/packages/Workflow/penal/listeners/utilSelf.js +62 -0
  200. package/packages/Workflow/penal/multi-instance/ElementMultiInstance.vue +200 -0
  201. package/packages/Workflow/penal/other/ElementOtherConfig.vue +59 -0
  202. package/packages/Workflow/penal/properties/ElementProperties.vue +135 -0
  203. package/packages/Workflow/penal/signal-message/SignalAndMessage.vue +104 -0
  204. package/packages/Workflow/penal/task/ElementTask.vue +73 -0
  205. package/packages/Workflow/penal/task/task-components/ReceiveTask.vue +97 -0
  206. package/packages/Workflow/penal/task/task-components/ScriptTask.vue +85 -0
  207. package/packages/Workflow/penal/task/task-components/UserTask.vue +535 -0
  208. package/packages/Workflow/theme/element-variables.scss +70 -0
  209. package/packages/Workflow/theme/index.scss +2 -0
  210. package/packages/Workflow/theme/process-designer.scss +157 -0
  211. package/packages/Workflow/theme/process-panel.scss +107 -0
  212. package/packages/Workflow/translations.js +25 -0
  213. package/packages/Workflow/utils.js +71 -0
  214. package/packages/upload/ajax.js +85 -0
  215. package/packages/upload/index.js +8 -0
  216. package/packages/upload/index.vue +325 -0
  217. package/packages/upload/locale.js +9 -0
  218. package/packages/upload/upload-dragger.vue +70 -0
  219. package/packages/upload/upload-list.vue +101 -0
  220. package/packages/upload/upload.vue +211 -0
  221. package/lib/03250ed25fc1b305e9980cf7cf0dfb09.js +0 -1
  222. package/lib/theme-chalk/cell.css +0 -53
  223. package/lib/theme-chalk/dialog.css +0 -41
  224. package/lib/theme-chalk/empty.css +0 -27
  225. package/lib/theme-chalk/index.css +0 -6
  226. package/lib/theme-chalk/reset.css +0 -4
  227. package/lib/tianheng-ui.js.map +0 -1
  228. package/packages/cell/index.vue +0 -116
  229. package/packages/empty/index.vue +0 -33
  230. package/packages/formMaking/Container.vue +0 -591
  231. package/packages/formMaking/CusDialog.vue +0 -134
  232. package/packages/formMaking/GenerateForm.vue +0 -174
  233. package/packages/formMaking/WidgetConfig.vue +0 -1539
  234. package/packages/formMaking/WidgetFormItem.vue +0 -817
  235. package/packages/formMaking/iconfont/iconfont.ttf +0 -0
  236. package/packages/formMaking/iconfont/iconfont.woff +0 -0
  237. package/packages/formMaking/index.js +0 -77
  238. package/packages/table/column.vue +0 -111
package/packages/{formMaking → FormMaking/util}/generateCode.js RENAMED
@@ -20,7 +20,7 @@ function findRemoteFunc(list, funcList, tokenFuncList, blankList) {
20
20
  label: list[i].name
21
21
  });
22
22
  }
23
- } else if (list[i].type == "imgupload") {
23
+ } else if (list[i].type == "upload") {
24
24
  if (list[i].options.tokenFunc) {
25
25
  tokenFuncList.push({
26
26
  func: list[i].options.tokenFunc,
@@ -87,9 +87,9 @@ export default function(data, type = "vue") {
87
87
  return `
88
88
  <template>
89
89
  <div>
90
- <fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm">
90
+ <th-generate-form :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm">
91
91
  ${blankTemplate}
92
- </fm-generate-form>
92
+ </th-generate-form>
93
93
  <el-button type="primary" @click="handleSubmit">提交</el-button>
94
94
  </div>
95
95
  </template>
@@ -127,9 +127,9 @@ export default function(data, type = "vue") {
127
127
  </head>
128
128
  <body>
129
129
  <div id="app">
130
- <fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm">
130
+ <th-generate-form :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm">
131
131
  ${blankTemplate}
132
- </fm-generate-form>
132
+ </th-generate-form>
133
133
  <el-button type="primary" @click="handleSubmit">提交</el-button>
134
134
  </div>
135
135
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
package/packages/{icons → Icons}/index.js RENAMED
File without changes
package/packages/{icons → Icons}/index.vue RENAMED
@@ -2,30 +2,30 @@
2
2
  <div>
3
3
  <el-popover
4
4
  placement="bottom-start"
5
- title="Element图标库"
6
- :width="width || 400"
5
+ :title="title"
6
+ :width="width"
7
7
  trigger="click"
8
8
  >
9
9
  <el-input
10
- slot="reference"
11
10
  :value="value"
11
+ slot="reference"
12
12
  placeholder="请选择图标"
13
13
  clearable
14
14
  @clear="handleInputClear"
15
15
  >
16
16
  <div v-if="value" class="input-prefix" slot="prefix">
17
- <i :class="value" class="icon"> </i>
17
+ <i :class="value" class="icon" />
18
18
  </div>
19
19
  </el-input>
20
20
 
21
21
  <div class="th-icons">
22
22
  <i
23
- class="icon"
24
23
  v-for="(icon, index) in icons"
25
- :key="index"
24
+ class="icon"
26
25
  :class="icon"
26
+ :key="index"
27
27
  @click="handleIconClick(icon)"
28
- ></i>
28
+ />
29
29
  </div>
30
30
  </el-popover>
31
31
  </div>
@@ -33,8 +33,25 @@
33
33
 
34
34
  <script>
35
35
  export default {
36
- name:'ThIcons',
37
- props: ["value", "width"],
36
+ name: "ThIcons",
37
+ model: {
38
+ event: "input",
39
+ prop: "value"
40
+ },
41
+ props: {
42
+ title: {
43
+ type: String,
44
+ default: "Element图标库"
45
+ },
46
+ value: {
47
+ type: String,
48
+ default: ""
49
+ },
50
+ width: {
51
+ type: Number,
52
+ default: 400
53
+ }
54
+ },
38
55
  data() {
39
56
  return {
40
57
  icons: [
package/packages/Image/index.js ADDED
@@ -0,0 +1,8 @@
1
+ import Image from "./index.vue";
2
+
3
+ /* istanbul ignore next */
4
+ Image.install = function(Vue) {
5
+ Vue.component(Image.name, Image);
6
+ };
7
+
8
+ export default Image;
package/packages/Image/index.vue ADDED
@@ -0,0 +1,146 @@
1
+ <template>
2
+ <div class="th-img" :class="divStyle">
3
+ <slot v-if="loading" name="placeholder">
4
+ <div class="th-image__placeholder">
5
+ <i class="el-icon-loading"></i>
6
+ </div>
7
+ </slot>
8
+ <slot v-else-if="error" name="error">
9
+ <div class="th-image__error" v-if="!errorSrc">加载失败</div>
10
+ <img
11
+ v-if="errorSrc && !loading"
12
+ :src="srcKey ? src[srcKey] : errorSrc"
13
+ alt=""
14
+ class="th-image__error"
15
+ />
16
+ </slot>
17
+ <img
18
+ v-else
19
+ class="th-img-item"
20
+ :src="srcKey ? src[srcKey] : src"
21
+ :alt="alt"
22
+ :style="imgStyle"
23
+ @click="clickHandler(srcKey ? src[srcKey] : '')"
24
+ />
25
+ <template v-if="preview">
26
+ <th-image-preview
27
+ v-if="showViewer"
28
+ :imgArr="previewList"
29
+ :on-close="closeViewer"
30
+ :src-key="srcKey"
31
+ :start-index="startIndex"
32
+ :src="srcInfo"
33
+ />
34
+ </template>
35
+ </div>
36
+ </template>
37
+
38
+ <script>
39
+ import ThImagePreview from "ui/imagePreview/index.vue";
40
+
41
+ let prevOverflow = "";
42
+
43
+ export default {
44
+ name: "ThImage",
45
+ components: {
46
+ ThImagePreview
47
+ },
48
+ props: {
49
+ src: String | Object,
50
+ width: {
51
+ type: String | Number,
52
+ default: "100%"
53
+ },
54
+ height: {
55
+ type: String | Number,
56
+ default: "100%"
57
+ },
58
+ fit: String,
59
+ borderRadius: String,
60
+ alt: String,
61
+ errorSrc: String,
62
+ srcKey: String,
63
+ previewList: Array,
64
+ startIndex: Number,
65
+ displayStyle: String,
66
+ isLoding: Boolean
67
+ },
68
+ data() {
69
+ return {
70
+ loading: false,
71
+ error: false,
72
+ showViewer: false,
73
+ srcInfo: ""
74
+ };
75
+ },
76
+ computed: {
77
+ preview() {
78
+ const { previewList } = this;
79
+ return Array.isArray(previewList) && previewList.length > 0;
80
+ },
81
+ imgStyle() {
82
+ const style = {
83
+ width: typeof this.width === "string" ? this.width : this.width + "px",
84
+ height:
85
+ typeof this.height === "string" ? this.height : this.height + "px",
86
+ borderRadius: this.borderRadius,
87
+ objectFit: this.fit
88
+ };
89
+ return style;
90
+ },
91
+ divStyle() {
92
+ let className = "th-image--";
93
+ if (this.displayStyle) className = `${className}${this.displayStyle}`;
94
+
95
+ return className;
96
+ }
97
+ },
98
+ mounted() {
99
+ this.loadImg();
100
+ },
101
+ methods: {
102
+ loadImg() {
103
+ if (this.isLoding) {
104
+ this.loading = true;
105
+ }
106
+ this.error = false;
107
+
108
+ const img = new Image();
109
+ img.onload = e => this.imgLoad();
110
+ img.onerror = this.imgErr.bind(this);
111
+
112
+ img.src = this.srcKey ? this.src[this.srcKey] : this.src;
113
+ },
114
+ imgLoad() {
115
+ this.loading = false;
116
+ this.error = false;
117
+ this.$emit("on-load");
118
+ },
119
+ imgErr() {
120
+ this.loading = false;
121
+ this.error = true;
122
+ this.$emit("on-error");
123
+ },
124
+ clickHandler(e) {
125
+ if (!this.srcKey) {
126
+ return;
127
+ }
128
+ if (!this.preview) {
129
+ return;
130
+ }
131
+ if (this.srcKey) {
132
+ this.srcInfo = e;
133
+ }
134
+ prevOverflow = document.body.style.overflow;
135
+ document.body.style.overflow = "hidden";
136
+ this.showViewer = true;
137
+ },
138
+ closeViewer() {
139
+ document.body.style.overflow = prevOverflow;
140
+ this.showViewer = false;
141
+ }
142
+ }
143
+ };
144
+ </script>
145
+
146
+ <style lang="less" scoped></style>
package/packages/ImagePreview/index.js ADDED
@@ -0,0 +1,8 @@
1
+ import ImagePreview from "./index.vue";
2
+
3
+ /* istanbul ignore next */
4
+ ImagePreview.install = function(Vue) {
5
+ Vue.component(ImagePreview.name, ImagePreview);
6
+ };
7
+
8
+ export default ImagePreview;
package/packages/ImagePreview/index.vue ADDED
@@ -0,0 +1,386 @@
1
+ <template>
2
+ <div class="th-image-preview">
3
+ <!-- 预览外层图片 -->
4
+ <div class="th-preview">
5
+ <div
6
+ v-for="(item, index) in imgArr"
7
+ v-if="!startIndex && startIndex !== 0 && !src"
8
+ :key="srcKey ? index : item"
9
+ class="th-preview-item-out"
10
+ @click="clickHandler(index)"
11
+ >
12
+ <img
13
+ :src="srcKey ? item[srcKey] : imgArr[index]"
14
+ class="th-preview-item-image-out"
15
+ @click="onClick"
16
+ />
17
+ </div>
18
+ </div>
19
+
20
+ <!-- 预览组件 -->
21
+ <transition name="viewer-fade">
22
+ <template v-if="showViewer">
23
+ <div class="th-image-viewer__wrapper">
24
+ <!-- 阴影外层遮罩 -->
25
+ <div class="th-image-viewer__mask" @click="onClose"></div>
26
+ <!-- 关闭按钮 -->
27
+ <span
28
+ class="th-image-viewer__btn th-image-viewer__close"
29
+ @click="onClose"
30
+ >
31
+ <i class="el-icon-close"></i>
32
+ </span>
33
+
34
+ <div class="th-image-viewer__item" v-if="this.topList">
35
+ <div
36
+ v-for="(item, index) in imgArr"
37
+ :key="srcKey ? index : item"
38
+ class="th-preview-item-ins zindex"
39
+ @click="clickHandler(index)"
40
+ >
41
+ <img
42
+ :src="srcKey ? item[srcKey] : item"
43
+ class="th-preview-item-image-ins"
44
+ />
45
+ </div>
46
+ </div>
47
+
48
+ <!-- 图片前进后退 -->
49
+ <template v-if="!isSingle">
50
+ <span
51
+ class="th-image-viewer__btn th-image-viewer__prev"
52
+ @click="prev"
53
+ >
54
+ <i class="th-icon-arrow-left" />
55
+ </span>
56
+ <span
57
+ class="th-image-viewer__btn th-image-viewer__next"
58
+ @click="next"
59
+ >
60
+ <i class="th-icon-arrow-right" />
61
+ </span>
62
+ </template>
63
+
64
+ <!-- 旋转等操作按钮 -->
65
+ <div class="th-image-viewer__btn th-image-viewer__actions">
66
+ <div class="el-image-viewer__actions__inner">
67
+ <i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
68
+ <i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
69
+ <i class="el-image-viewer__actions__divider"></i>
70
+ <i :class="mode.icon" @click="toggleMode"></i>
71
+ <i :class="showIcon" @click="showList"></i>
72
+ <i class="el-image-viewer__actions__divider"></i>
73
+ <i
74
+ class="el-icon-refresh-left"
75
+ @click="handleActions('anticlocelise')"
76
+ ></i>
77
+ <i
78
+ class="el-icon-refresh-right"
79
+ @click="handleActions('clocelise')"
80
+ ></i>
81
+ </div>
82
+ </div>
83
+ <!-- 中心大图 -->
84
+ <div class="th-image-viewer__canvas">
85
+ <img
86
+ v-for="(url, i) in imgArr"
87
+ v-if="i === index"
88
+ ref="img"
89
+ class="th-image-viewer__img"
90
+ :key="srcKey ? i : url"
91
+ :src="srcKey ? url[srcKey] : imgArr[index]"
92
+ :style="imgStyle()"
93
+ @mousedown="handleMouseDown"
94
+ @load="changeImg(url)"
95
+ />
96
+ </div>
97
+ </div>
98
+ </template>
99
+ </transition>
100
+ </div>
101
+ </template>
102
+
103
+ <script>
104
+ const Mode = {
105
+ CONTAIN: {
106
+ name: "contain",
107
+ icon: "el-icon-full-screen"
108
+ },
109
+ ORIGINAL: {
110
+ name: "original",
111
+ icon: "el-icon-c-scale-to-original"
112
+ }
113
+ };
114
+
115
+ const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
116
+
117
+ import { rafThrottle, isFirefox } from "element-ui/src/utils/util";
118
+ import { on, off } from "element-ui/src/utils/dom";
119
+
120
+ export default {
121
+ name: "ThImagePreview",
122
+ props: {
123
+ imgArr: Array,
124
+ srcKey: String,
125
+ startIndex: Number,
126
+ src: String,
127
+ onClose: {
128
+ type: Function,
129
+ default: () => {}
130
+ },
131
+ onClick: {
132
+ type: Function,
133
+ default: () => {}
134
+ },
135
+ showViewer: {
136
+ type: Boolean,
137
+ default: true
138
+ }
139
+ },
140
+ data() {
141
+ return {
142
+ srcNum: null,
143
+ firstNum: 0,
144
+ topList: false,
145
+ showIcon: "el-icon-picture-outline",
146
+ showView: false,
147
+ index: this.startIndex,
148
+ mode: Mode.CONTAIN,
149
+ transform: {
150
+ scale: 1,
151
+ deg: 0,
152
+ offsetX: 0,
153
+ offsetY: 0,
154
+ enableTransition: false
155
+ }
156
+ };
157
+ },
158
+ computed: {
159
+ isSingle() {
160
+ if (!this.srcKey) {
161
+ return;
162
+ }
163
+ return this.imgArr.length <= 1;
164
+ },
165
+ currentImg() {
166
+ return this.srcKey ? this.imgArr[this.srcKey] : this.imgArr;
167
+ },
168
+ isFirst() {
169
+ return this.index === 0;
170
+ },
171
+ isLast() {
172
+ if (!this.srcKey) {
173
+ return;
174
+ }
175
+ return this.index === this.imgArr.length - 1;
176
+ }
177
+ },
178
+ watch: {
179
+ currentImg(val) {
180
+ this.$nextTick(_ => {
181
+ const $img = this.$refs.img[0];
182
+ // if (!$img.complete) {
183
+ // this.loading = true;
184
+ // }
185
+ });
186
+ },
187
+ showViewer() {
188
+ if (!this.showViewer) {
189
+ this.firstNum = 0;
190
+ this.showIcon = "el-icon-picture-outline";
191
+ this.topList = false;
192
+ }
193
+ if (this.showViewer) {
194
+ let bodyStyle = document.body.style;
195
+ bodyStyle.overflow = "hidden";
196
+ }
197
+ }
198
+ },
199
+ mounted() {
200
+ this.deviceSupportInstall();
201
+ this.srcClick();
202
+ },
203
+ methods: {
204
+ // 监听键盘事件
205
+ deviceSupportInstall() {
206
+ this._keyDownHandler = e => {
207
+ e.stopPropagation();
208
+ const keyCode = e.keyCode;
209
+ switch (keyCode) {
210
+ // ESC
211
+ case 27:
212
+ this.onClose();
213
+ break;
214
+ // SPACE
215
+ case 32:
216
+ this.toggleMode();
217
+ break;
218
+ // LEFT_ARROW
219
+ case 37:
220
+ this.prev();
221
+ break;
222
+ // UP_ARROW
223
+ case 38:
224
+ this.handleActions("zoomIn");
225
+ break;
226
+ // RIGHT_ARROW
227
+ case 39:
228
+ this.next();
229
+ break;
230
+ // DOWN_ARROW
231
+ case 40:
232
+ this.handleActions("zoomOut");
233
+ break;
234
+ }
235
+ };
236
+ this._mouseWheelHandler = rafThrottle(e => {
237
+ const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
238
+ if (delta > 0) {
239
+ this.handleActions("zoomIn", {
240
+ zoomRate: 0.015,
241
+ enableTransition: false
242
+ });
243
+ } else {
244
+ this.handleActions("zoomOut", {
245
+ zoomRate: 0.015,
246
+ enableTransition: false
247
+ });
248
+ }
249
+ });
250
+ on(document, "keydown", this._keyDownHandler);
251
+ on(document, mousewheelEventName, this._mouseWheelHandler);
252
+ },
253
+ deviceSupportUninstall() {
254
+ off(document, "keydown", this._keyDownHandler);
255
+ off(document, mousewheelEventName, this._mouseWheelHandler);
256
+ this._keyDownHandler = null;
257
+ this._mouseWheelHandler = null;
258
+ },
259
+ handleMouseDown(e) {
260
+ // if (this.loading || e.button !== 0) return;
261
+
262
+ const { offsetX, offsetY } = this.transform;
263
+ const startX = e.pageX;
264
+ const startY = e.pageY;
265
+ this._dragHandler = rafThrottle(ev => {
266
+ this.transform.offsetX = offsetX + ev.pageX - startX;
267
+ this.transform.offsetY = offsetY + ev.pageY - startY;
268
+ });
269
+ on(document, "mousemove", this._dragHandler);
270
+ on(document, "mouseup", ev => {
271
+ off(document, "mousemove", this._dragHandler);
272
+ });
273
+
274
+ e.preventDefault();
275
+ },
276
+ // 显示隐藏这招内图片列表
277
+ showList() {
278
+ if (!this.topList) {
279
+ this.showIcon = "el-icon-picture";
280
+ this.topList = true;
281
+ } else {
282
+ this.showIcon = "el-icon-picture-outline";
283
+ this.topList = false;
284
+ }
285
+ },
286
+ clickHandler(i) {
287
+ this.prevOverflow = document.body.style.overflow;
288
+ this.index = i;
289
+ this.$emit("on-click");
290
+ },
291
+ // 后退
292
+ prev() {
293
+ if (this.isFirst && !this.infinite) return;
294
+ const len = this.imgArr.length;
295
+ this.index = (this.index - 1 + len) % len;
296
+ },
297
+ // 前进
298
+ next() {
299
+ if (this.isLast && !this.infinite) return;
300
+ const len = this.imgArr.length;
301
+ this.index = (this.index + 1) % len;
302
+ },
303
+ changeImg(e) {
304
+ this.firstNum += 1;
305
+ if (this.firstNum !== 1) {
306
+ this.$emit("on-change", e);
307
+ }
308
+ },
309
+ // 图片放大缩小样式
310
+ imgStyle() {
311
+ const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
312
+ const style = {
313
+ transform: `scale(${scale}) rotate(${deg}deg)`,
314
+ transition: enableTransition ? "transform .3s" : "",
315
+ "margin-left": `${offsetX}px`,
316
+ "margin-top": `${offsetY}px`
317
+ };
318
+ if (this.mode === Mode.CONTAIN) {
319
+ style.maxWidth = style.maxHeight = "100%";
320
+ }
321
+ return style;
322
+ },
323
+ // 重置图片大小
324
+ reset() {
325
+ this.transform = {
326
+ scale: 1,
327
+ deg: 0,
328
+ offsetX: 0,
329
+ offsetY: 0,
330
+ enableTransition: false
331
+ };
332
+ },
333
+ toggleMode() {
334
+ const modeNames = Object.keys(Mode);
335
+ const modeValues = Object.values(Mode);
336
+ const index = modeValues.indexOf(this.mode);
337
+ const nextIndex = (index + 1) % modeNames.length;
338
+ this.mode = Mode[modeNames[nextIndex]];
339
+ this.reset();
340
+ },
341
+ // 点击操作列表
342
+ handleActions(action, options = {}) {
343
+ const { zoomRate, rotateDeg, enableTransition } = {
344
+ zoomRate: 0.2,
345
+ rotateDeg: 90,
346
+ enableTransition: true,
347
+ ...options
348
+ };
349
+ const { transform } = this;
350
+ switch (action) {
351
+ case "zoomOut":
352
+ if (transform.scale > 0.2) {
353
+ transform.scale = parseFloat(
354
+ (transform.scale - zoomRate).toFixed(3)
355
+ );
356
+ }
357
+ break;
358
+ case "zoomIn":
359
+ transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
360
+ break;
361
+ case "clocelise":
362
+ transform.deg += rotateDeg;
363
+ break;
364
+ case "anticlocelise":
365
+ transform.deg -= rotateDeg;
366
+ break;
367
+ }
368
+ transform.enableTransition = enableTransition;
369
+ },
370
+ srcClick() {
371
+ if (this.srcKey) {
372
+ if (!this.startIndex) {
373
+ // console.log(this.src,this.imgArr);
374
+ this.imgArr.forEach((item, index) => {
375
+ if (item[this.srcKey] === this.src) {
376
+ this.index = index;
377
+ }
378
+ });
379
+ }
380
+ }
381
+ }
382
+ }
383
+ };
384
+ </script>
385
+
386
+ <style lang="less" scoped></style>
package/packages/Row/index.js ADDED
@@ -0,0 +1,8 @@
1
+ import Row from "./index.vue";
2
+
3
+ /* istanbul ignore next */
4
+ Row.install = function(Vue) {
5
+ Vue.component(Row.name, Row);
6
+ };
7
+
8
+ export default Row;
package/packages/Row/index.vue ADDED
@@ -0,0 +1,35 @@
1
+ <template>
2
+ <div :class="selfClass" :style="selfStyle">
3
+ <slot />
4
+ </div>
5
+ </template>
6
+
7
+ <script>
8
+ export default {
9
+ name: "ThRow",
10
+ props: { gutter: Number, flex: Boolean, justify: String, align: String },
11
+ computed: {
12
+ selfClass() {
13
+ let className = "th-row";
14
+ if (this.flex) className = `${className} th-row-flex`;
15
+ return className;
16
+ },
17
+ selfStyle() {
18
+ const style = {};
19
+ if (this.gutter) {
20
+ style.marginLeft = `-${this.gutter / 2}px`;
21
+ style.marginRight = style.marginLeft;
22
+ }
23
+ if (this.justify) {
24
+ style.justifyContent = this.justify;
25
+ }
26
+ if (this.align) {
27
+ style.alignItems = this.align;
28
+ }
29
+ return style;
30
+ }
31
+ }
32
+ };
33
+ </script>
34
+
35
+ <style></style>
package/packages/{table → Table}/action.js RENAMED
File without changes