SCopperUpload.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. var C = (l, r, t) => new Promise((m, c) => {
  2. var f = (a) => {
  3. try {
  4. p(t.next(a));
  5. } catch (u) {
  6. c(u);
  7. }
  8. }, n = (a) => {
  9. try {
  10. p(t.throw(a));
  11. } catch (u) {
  12. c(u);
  13. }
  14. }, p = (a) => a.done ? m(a.value) : Promise.resolve(a.value).then(f, n);
  15. p((t = t.apply(l, r)).next());
  16. });
  17. import { ref as i, reactive as z, watch as b, resolveComponent as g, openBlock as I, createElementBlock as x, createElementVNode as d, toDisplayString as D, createCommentVNode as E, createVNode as v, withCtx as k, pushScopeId as A, popScopeId as $ } from "vue";
  18. import { r as q, v as V } from "./index2.js";
  19. import { d as F, p as G } from "./upload.js";
  20. import H from "./CropperModal.js";
  21. import { _ as K } from "./index6.js";
  22. import { M as W } from "./index7.js";
  23. const J = (l) => (A("data-v-31ce420f"), l = l(), $(), l), Q = { class: "s-file-upload-common" }, X = { class: "head" }, Y = {
  24. key: 0,
  25. class: "label"
  26. }, Z = /* @__PURE__ */ J(() => /* @__PURE__ */ d("div", null, "图片上传", -1)), ee = { class: "preview-content" }, te = ["src"], oe = {
  27. __name: "SCopperUpload",
  28. props: {
  29. /**
  30. * 文件列表
  31. * @list
  32. */
  33. list: {
  34. type: Array,
  35. default: () => []
  36. },
  37. /**
  38. * 标题
  39. * @label
  40. */
  41. label: {
  42. type: String,
  43. default: ""
  44. },
  45. /**
  46. * 只读
  47. * @readonly
  48. */
  49. readonly: {
  50. type: Boolean,
  51. default: !1
  52. },
  53. /**
  54. * 是否显示删除
  55. * @delete
  56. */
  57. showRemoveIcon: {
  58. type: Boolean,
  59. default: !1
  60. },
  61. /**
  62. * 是否显示新增
  63. * @add
  64. */
  65. add: {
  66. type: Boolean,
  67. default: !1
  68. },
  69. maxFileCount: {
  70. type: Number,
  71. default: 3
  72. },
  73. sizeLimit: {
  74. type: Number,
  75. default: 50
  76. },
  77. options: {
  78. type: Object,
  79. default: function() {
  80. return {
  81. autoCrop: !0,
  82. // 是否默认生成截图框
  83. autoCropWidth: 180,
  84. // 默认生成截图框宽度
  85. autoCropHeight: 180,
  86. // 默认生成截图框高度
  87. fixedBox: !1,
  88. // 是否固定截图框大小 不允许改变
  89. previewsCircle: !1,
  90. // 预览图是否是原圆形
  91. businessTableName: "sys_user",
  92. title: "",
  93. invariantId: ""
  94. };
  95. }
  96. },
  97. businessTableName: {
  98. type: String,
  99. default: void 0
  100. },
  101. businessKey: {
  102. type: String,
  103. default: void 0
  104. }
  105. },
  106. setup(l) {
  107. const r = l, t = i([
  108. // {
  109. // uid: '-1',
  110. // name: 'xxx.png',
  111. // status: 'done',
  112. // url: 'https://www.sapit.com.cn/img/title-bg.cbbd159b.png',
  113. // thumbUrl: 'https://www.sapit.com.cn/img/title-bg.cbbd159b.png',
  114. // },
  115. // {
  116. // uid: '-2',
  117. // name: 'yyy.png',
  118. // status: 'done',
  119. // url: 'https://www.sapit.com.cn/img/title-bg.9b284669.png',
  120. // thumbUrl: 'https://www.sapit.com.cn/img/title-bg.9b284669.png',
  121. // }
  122. ]), m = i(!1), c = i(""), f = i(""), n = i(0), p = i(!1), a = z({}), u = i(""), w = i();
  123. b(() => r.list, (e) => {
  124. e && e.length && (t.value = e);
  125. }, { immediate: !0 }), b(() => r.options, (e) => {
  126. a.value = e;
  127. }, { immediate: !0 });
  128. const L = (e) => {
  129. const o = e.size / 1024 / 1024 < r.sizeLimit;
  130. return o || V.warn({
  131. key: "only-you",
  132. message: "提醒",
  133. description: `文件不能大于${r.sizeLimit}MB!`
  134. }), o;
  135. }, S = (o) => C(this, [o], function* ({ file: e }) {
  136. let s = setTimeout(() => {
  137. a.value.invariantId = u.value;
  138. const h = Object.assign({}, a.value, {
  139. img: e.thumbUrl
  140. });
  141. h.img && w.value.edit(h), clearTimeout(s);
  142. }, 500);
  143. }), N = ({ file: e }) => {
  144. u.value = e.uid;
  145. }, O = (e) => {
  146. const o = document.createElement("a");
  147. o.href = F(e.uid), o.download = "test", o.click();
  148. }, U = () => {
  149. p.value = !1;
  150. for (let e = t.value.length - 1; e >= 0; e--)
  151. t.value[e].uid === u.value && t.value[e].status != "done" && t.value.splice(e, 1);
  152. }, B = (e, o) => {
  153. p.value = !1, t.value && t.value.length > 0 && t.value.forEach((s) => {
  154. s.uid == e && (s.status = "done", s.thumbUrl = o, s.url = G(s.uid));
  155. });
  156. }, M = (e) => {
  157. n.value = t.value.findIndex((o) => o.uid === e.uid), m.value = !0, f.value = e.name || "预览", c.value = e.url || e.thumbUrl;
  158. }, P = () => {
  159. m.value = !1;
  160. }, y = (e) => {
  161. n.value = n.value + e < 0 ? 0 : n.value + e > t.value.length - 1 ? t.value.length - 1 : n.value + e, f.value = t.value[n.value].name || "预览", c.value = t.value[n.value].url;
  162. };
  163. return (e, o) => {
  164. const s = g("PlusOutlined"), h = K, R = g("LeftOutlined"), T = g("RightOutlined"), j = W;
  165. return I(), x("div", Q, [
  166. d("div", X, [
  167. l.label ? (I(), x("div", Y, D(l.label), 1)) : E("", !0)
  168. ]),
  169. v(h, {
  170. "list-type": "picture-card",
  171. accept: ".jpg, .png, .jpeg, .PNG, .gif",
  172. onPreview: M,
  173. "before-upload": L,
  174. "file-list": t.value,
  175. "onUpdate:fileList": o[0] || (o[0] = (_) => t.value = _),
  176. "custom-request": N,
  177. onChange: S,
  178. disabled: l.readonly,
  179. onDownload: O,
  180. showUploadList: {
  181. showRemoveIcon: l.showRemoveIcon,
  182. showDownloadIcon: !0
  183. }
  184. }, {
  185. default: k(() => [
  186. d("span", null, [
  187. v(s),
  188. Z
  189. ])
  190. ]),
  191. _: 1
  192. }, 8, ["file-list", "disabled", "showUploadList"]),
  193. v(j, {
  194. open: m.value,
  195. title: f.value,
  196. footer: null,
  197. onCancel: P,
  198. width: "800px"
  199. }, {
  200. default: k(() => [
  201. d("div", ee, [
  202. d("div", {
  203. class: "prev",
  204. onClick: o[1] || (o[1] = (_) => y(-1))
  205. }, [
  206. v(R)
  207. ]),
  208. d("img", {
  209. alt: "example",
  210. class: "view",
  211. src: c.value
  212. }, null, 8, te),
  213. d("div", {
  214. class: "next",
  215. onClick: o[2] || (o[2] = (_) => y(1))
  216. }, [
  217. v(T)
  218. ])
  219. ])
  220. ]),
  221. _: 1
  222. }, 8, ["open", "title"]),
  223. v(H, {
  224. ref_key: "cropperModal",
  225. ref: w,
  226. onCropperNo: U,
  227. onCropperOk: B
  228. }, null, 512)
  229. ]);
  230. };
  231. }
  232. }, re = /* @__PURE__ */ q(oe, [["__scopeId", "data-v-31ce420f"]]);
  233. export {
  234. re as default
  235. };