cnhis-design-vue 3.1.5 → 3.1.6

package/es/packages/chunk-upload/src/vod-chunk-upload/vod-chunk-upload.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1 @@
+import{defineComponent as e,reactive as s,computed as o,onMounted as i,openBlock as l,createElementBlock as a,withDirectives as t,normalizeClass as r,unref as n,createElementVNode as d,Fragment as u,vShow as c,createCommentVNode as m,createVNode as p,withCtx as v,normalizeStyle as g,toDisplayString as f,withModifiers as h,createBlock as y,createTextVNode as k}from"vue";import b from"vuedraggable";import U from"cnhis-design-vue/es/src/utils/vexutils";import{VodProps as C,VodState as L}from"../hooks/vod-data2.mjs";import{VodComputed as V}from"../hooks/vod-computed2.mjs";import w from"cnhis-design-vue/es/src/components/player-vod/video-modal";import O from"../vod-upload-modal2.mjs";import{NIcon as D,NButton as x}from"naive-ui";import{PlayCircleSharp as S,PlayCircleOutline as _,RemoveCircleSharp as z}from"@vicons/ionicons5";import F from"cnhis-design-vue/es/src/assets/img/video_default_cover.png";import M from"cnhis-design-vue/es/src/assets/img/video.png";import N from"cnhis-design-vue/es/src/assets/img/success.png";const A={class:"c-upload"},j={class:"chunk-btn-content"},J={class:"c-uploader-btn"},E=["src"],P=d("div",{class:"uploader-text"},[d("p",null,"点击上传"),d("span",{class:"guage-text"},"上传视频（不超过50M)")],-1),T=["src"],B=d("div",{class:"uploader-text"},[d("p",null,"上传视频")],-1),R={class:"vod-wrap c-uploader-preview-wrap"},G={key:0,class:"vod-def-bg vod-uploading"},H={class:"vod-def-bg vod-done"},K=["src"],$=["src"],q=k(" 上传成功 "),I={class:"c-icon-wrap"},Q={class:"vod-def-bg vod-error"},W=["src"],X={class:"tooltip-wrap error-wrap"},Y=k("确定"),Z=["onClick"];var ee=e({name:"vod-chunk-upload",props:{...C},emits:["vodFileList"],setup(e,{emit:k}){const C=e,ee=s({...L}),se={},{isShowBtn:oe,maskHeight:ie,showPercent:le,allow_format:ae,defaultValue:te,isDisabled:re,max_size:ne,maxlength:de}=V(C,ee,{mainForm:se});console.log(oe.value,"----isShowBtn---",C.formData.title),o((()=>ue()));const ue=()=>{const{formData:e}=C;let s=[];if(s="guage"===C.source?C.defFileList:null==se?void 0:se.handleSysParams(se.defaultValue[e.name]||e.default_val),s=JSON.parse(JSON.stringify(s)),!s)return[];let o=[];return Array.isArray(s)&&(o=[...s]),U.isJSON(s)&&(o=JSON.parse(s)),Array.isArray(o)?(o.forEach((e=>{e.thumbUrl=e.vodCoverUrl||void 0,e.uid=(-Math.random()).toString(),e.status="done"})),ee.fileList=o,console.log(ee.fileList,"----list---list"),ce(o),o):[]},ce=e=>{if(!Array.isArray(e))return"";const{formData:s,source:o}=C;let i=[];e.forEach((e=>{if("done"===e.status&&(e.response&&"00000"==e.response.code||e.url)){const{data:s={}}=e.response||{};e.url||s.videoUrl;let o=e.vodCoverUrl||s.vodCoverUrl;i.push({name:e.name,size:e.size,url:e.url||s.videoUrl,vodCoverUrl:o,uid:e.id||e.uid||(-Math.random()).toString()})}})),console.log(i,"---resList---",C.formData.title);let l=JSON.stringify(i);"guage"!==o?se.baseForm.setFieldsValue({[s.val_key]:l}):k("vodFileList",l,C.formData)},me=(e,s)=>{let o,i;if(e.type&&(i=e.type),e.url||e.videoUrl){if(o=e.url||e.videoUrl,!i){let e=o.split(".");i=`video/${e[e.length-1]}`}}else o=URL.createObjectURL(e.originFileObj);ee.playerOptions={sources:[{type:i,src:o}]},ee.videoVisible=!0},pe=()=>{ee.videoVisible=!1},ve=()=>{re.value||(ee.chunkUploadVisible=!0)},ge=e=>{let s=[];e.forEach((e=>{let o=e.videoCoverPic||void 0;s.push({name:e.videoName||e.name,url:e.videoUrl||e.url,size:e.size,vodCoverUrl:o,status:"done",uid:(-Math.random()).toString()})})),ee.fileList.push(...s),ce(ee.fileList)},fe=()=>{ce(ee.fileList)};return i((()=>{ue()})),(e,s)=>(l(),a("div",A,[e.isDetail?m("v-if",!0):t((l(),a("div",{key:0,class:r(["c-chunk-uploader-btn",{"disable-upload":n(re)}]),onClick:ve},[d("div",j,[d("div",J,["guage"==C.source?(l(),a(u,{key:0},[d("img",{src:n(M),class:"guage-img"},null,8,E),P],64)):(l(),a(u,{key:1},[d("img",{src:n(M),class:"guage-img"},null,8,T),B],64))])])],2)),[[c,n(oe)]]),p(n(b),{modelValue:ee.fileList,"onUpdate:modelValue":s[0]||(s[0]=e=>ee.fileList=e),animation:"150",itemKey:"uid",disabled:n(re).value,options:ee.draggableOptions,onUpdate:fe,class:"drag-content"},{item:v((({element:s,index:o})=>{return[d("div",R,[m(" 上传中 "),"uploading"===s.status?(l(),a("div",G,[m(" TODO: 封面图补充 "),d("div",{class:"uploading-mask",style:g({height:n(ie)(s)})},[d("span",null,f(n(le)(s.percent))+"%",1)],4)])):"done"===s.status?(l(),a(u,{key:1},[m(" 上传完成 "),d("div",H,[d("img",{src:(i=s,i.thumbUrl?i.thumbUrl:F),class:"vod-cover-img"},null,8,K),d("div",{class:r(["tooltip-wrap",{"is-new":s.isNew}])},[d("img",{src:n(N),class:"upload-img"},null,8,$),q],2),m(" 播放图标 "),d("div",I,[p(n(D),{component:n(S),class:"icon-play theme_filled",onClick:h((e=>me(s)),["prevent","stop"])},null,8,["component","onClick"]),p(n(D),{component:n(_),class:"icon-play theme_outlined",onClick:h((e=>me(s)),["prevent","stop"])},null,8,["component","onClick"])])])],64)):"error"===s.status?(l(),a(u,{key:2},[m(" 上传失败 "),d("div",Q,[d("img",{src:s.thumbUrl,class:"vod-cover-img"},null,8,W),d("div",X,[d("span",null,f(s.message?s.message:"上传失败，继续上传？"),1),p(n(x),{size:"small",onClick:h((e=>{}),["prevent","stop"])},{default:v((()=>[Y])),_:2},1032,["onClick"])])])],64)):m("v-if",!0),!["done","error"].includes(s.status)||n(re)||e.isDetail?m("v-if",!0):(l(),a("div",{key:3,onClick:h((e=>{return s=o,ee.fileList.splice(s,1),void ce(ee.fileList);var s}),["stop"]),class:"uploader-preview-delete"},[p(n(D),{class:"pre-delete",component:n(z)},null,8,["component"])],8,Z))])];var i})),_:1},8,["modelValue","disabled","options"]),ee.videoVisible?(l(),y(n(w),{key:1,visible:ee.videoVisible,formData:C.formData,playerOptions:ee.playerOptions,onCloseVideoModal:pe},null,8,["visible","formData","playerOptions"])):m("v-if",!0),p(n(O),{modelValue:ee.chunkUploadVisible,"onUpdate:modelValue":s[1]||(s[1]=e=>ee.chunkUploadVisible=e),modalTitle:C.formData.name,max_size:n(ne),maxLength:n(de),propsCategoryMap:n(ae),defaultList:ee.fileList,getChunkUploadConfig:e.getChunkUploadConfig,onGetSumbitList:ge},null,8,["modelValue","modalTitle","max_size","maxLength","propsCategoryMap","defaultList","getChunkUploadConfig"])]))}});export{ee as default};

package/es/packages/chunk-upload/src/vod-chunk-upload/vod-chunk-upload2.mjs

@@ -0,0 +1 @@
+import u from"./vod-chunk-upload.vue_vue_type_script_setup_true_lang.mjs";export{default}from"./vod-chunk-upload.vue_vue_type_script_setup_true_lang.mjs";u.__file="packages/chunk-upload/src/vod-chunk-upload/vod-chunk-upload.vue";

package/es/packages/chunk-upload/src/vod-upload-modal.d.ts

@@ -0,0 +1,25 @@
+declare const _default: import("vue").DefineComponent<{
+    modalTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modalTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: boolean;
+    modalTitle: string;
+}>;
+export default _default;

package/es/packages/chunk-upload/src/vod-upload-modal.mjs

@@ -0,0 +1 @@
+export{default}from"./vod-upload-modal2.mjs";

package/es/packages/chunk-upload/src/vod-upload-modal2.mjs

@@ -0,0 +1 @@
+import{defineComponent as e,ref as o,createVNode as l,resolveComponent as t,mergeProps as a,createTextVNode as d}from"vue";import{NModal as p,NCard as n,NButton as u}from"naive-ui";import"./chunk-upload-new2.mjs";import r from"./chunk-upload-new.vue_vue_type_script_setup_true_lang.mjs";var i=e({name:"vodUploadModal",components:{NModal:p,NCard:n,NButton:u,chunkUploadCom:r},props:{modalTitle:{type:String,default:"上传"},modelValue:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(e,{attrs:p,emit:n}){const u=o(null),i=()=>{var e;console.log(u.value),null==(e=u.value)||e.cancel()},m=()=>{n("update:modelValue",!1)},s=()=>{var e;null==(e=u.value)||e.confirm()};console.log(p);const c=()=>l(t("n-modal"),{show:e.modelValue,"onUpdate:show":o=>e.modelValue=o,style:{width:"860px",height:"auto"}},{default:()=>[l(t("n-card"),{style:{width:"860px",height:"770px"},title:e.modalTitle,size:"huge",role:"dialog","aria-modal":"true","header-style":"padding: 14px 16px;border-bottom:1px solid #e8e8e8;font-size:16px;","footer-style":"padding: 10px 16px;border-top:1px solid #e8e8e8;text-align:right;","content-style":"padding: 24px 24px 12px;"},{default:()=>l(r,a(p,{ref:u,uploaderType:"video",onCloseUpload:m}),null),footer:()=>l("div",null,[l(t("n-button"),{"on-click":i,style:{"margin-right":"8px"}},{default:()=>[d("取消")]}),l(t("n-button"),{type:"primary",onClick:s},{default:()=>[d("确定")]})])})]});return()=>c()}});export{i as default};

package/es/packages/chunk-upload/style/index.css

@@ -0,0 +1,363 @@
+.c-chunk-upload-container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: #fff;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.c-chunk-upload-container div.uploader-drop {
+  padding: 0;
+  border: none;
+}
+.c-chunk-upload-container ul,
+.c-chunk-upload-container li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.c-chunk-upload-container .uploader-app {
+  min-width: 250px;
+}
+.c-chunk-upload-container .upload-btn {
+  padding: 20px 0px;
+}
+.c-chunk-upload-container .upload-btn .mgl-10 {
+  margin-left: 10px;
+}
+.c-chunk-upload-container .no-file {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 16px;
+}
+.c-chunk-upload-container .uploader-file-actions > span {
+  margin-right: 6px;
+}
+.c-file-list-conatiner {
+  background-color: #fff;
+  height: 300px;
+  margin-top: 20px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.c-file-list-conatiner .uploader-file {
+  height: auto;
+  line-height: initial;
+  border-bottom: none;
+}
+.c-file-container .c-f-item {
+  display: flex;
+}
+.c-file-container .c-f-item-icon {
+  width: 50px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.c-file-container .c-f-item-info {
+  flex: 1;
+  line-height: 20px;
+}
+.c-file-container .c-f-item-info-title {
+  line-height: 24px;
+}
+.c-file-container .c-f-item-info-title .title {
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+}
+.c-file-container .c-f-item-info-title .size {
+  font-size: 12px;
+  color: #9d9d9d;
+}
+.c-file-container .c-f-item-info-time {
+  font-size: 12px;
+  color: #9d9d9d;
+}
+.c-file-container .c-f-item-btn {
+  width: 100px;
+  line-height: 40px;
+}
+.c-file-container .c-f-item-btn i {
+  padding: 0 5px;
+}
+.c-file-boder-bottom {
+  border-bottom: 1px solid #d5d5d5;
+}
+.c-drap-container {
+  position: relative;
+  padding-top: 45px;
+  overflow: hidden;
+  border-radius: 4px;
+  border: 1px dashed #5585f5;
+  background-color: #f9f9f9;
+  text-align: center;
+  height: 180px;
+  line-height: 1.5;
+  color: #5585f5;
+  cursor: pointer;
+}
+.c-drap-container i {
+  font-size: 56px;
+  margin-bottom: 20px;
+}
+.c-upload {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+.show-list {
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+.c-uploader-preview-wrap.vod-wrap {
+  position: relative;
+  display: inline-block;
+  width: 140px;
+  height: 120px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  border: 1px dashed #eeeeee;
+  border-radius: 4px;
+  background-color: #fff;
+}
+.c-uploader-preview-wrap.vod-wrap .vod-uploading {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #fafafa;
+}
+.c-uploader-preview-wrap.vod-wrap .vod-uploading .progress-wrap {
+  padding: 3px;
+}
+.c-uploader-preview-wrap.vod-wrap .vod-uploading .uploading-msg {
+  color: #333;
+  font-size: 12px;
+  text-align: center;
+}
+.c-uploader-preview-wrap.vod-wrap .vod-uploading .uploading-mask {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 20%;
+  background: rgba(0, 0, 0, 0.3);
+  color: #fff;
+  text-align: center;
+}
+.c-uploader-preview-wrap.vod-wrap .vod-def-bg {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(50, 50, 51, 0.5);
+}
+.c-uploader-preview-wrap.vod-wrap .vod-def-bg .icon-vod-def {
+  font-size: 40px;
+  opacity: 0.3;
+  transform: scale3d(2, 2, 2);
+  transition: all 0.25s ease-out;
+}
+.c-uploader-preview-wrap.vod-wrap .vod-def-bg .vod-cover-img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+.c-uploader-preview-wrap.vod-wrap .vod-def-bg .tooltip-wrap {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 120px;
+  height: 40px;
+  color: #fff;
+  background: #22de4b;
+  border-radius: 4px;
+}
+.c-uploader-preview-wrap.vod-wrap .vod-def-bg .tooltip-wrap .upload-img {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+.c-uploader-preview-wrap.vod-wrap .vod-def-bg .tooltip-wrap.error-wrap {
+  flex-direction: column;
+  width: 158px;
+  height: 72px;
+  background: #e02020;
+}
+.c-uploader-preview-wrap.vod-wrap .vod-def-bg .tooltip-wrap.error-wrap span {
+  height: 20px;
+  line-height: 20px;
+  margin-bottom: 8px;
+}
+.c-uploader-preview-wrap.vod-wrap .vod-def-bg.vod-done .tooltip-wrap {
+  opacity: 0;
+}
+.c-uploader-preview-wrap.vod-wrap .vod-def-bg.vod-done .tooltip-wrap.is-new {
+  animation: fadeOut 2.5s 1 both;
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.c-uploader-preview-wrap.vod-wrap .vod-def-bg.vod-done:hover .icon-wrap {
+  background: rgba(0, 0, 0, 0.2);
+}
+.c-uploader-preview-wrap.vod-wrap .vod-def-bg.vod-done:hover .theme_outlined {
+  display: none;
+}
+.c-uploader-preview-wrap.vod-wrap .vod-def-bg.vod-done:hover .theme_filled {
+  display: inline-block;
+}
+.c-uploader-preview-wrap .uploader-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  color: #fff;
+  background-color: rgba(50, 50, 51, 0.88);
+}
+.c-uploader-preview-wrap .uploader-mask .uploading-msg {
+  font-size: 12px;
+}
+.c-uploader-preview-wrap .uploader-preview-delete {
+  position: absolute;
+  top: -16px;
+  right: -7px;
+  width: 16px;
+  height: 16px;
+  z-index: 10;
+}
+.c-uploader-preview-wrap .uploader-preview-delete .pre-delete {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  color: #e02020;
+  font-size: 20px;
+  cursor: pointer;
+}
+.c-icon-wrap {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 28px;
+  z-index: 1;
+}
+.c-icon-wrap .icon-play {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transition: all 0.25s ease-out;
+}
+.c-icon-wrap .theme_outlined {
+  display: inline-block;
+}
+.c-icon-wrap .theme_filled {
+  display: none;
+}
+.c-chunk-uploader-btn {
+  display: table;
+  width: 140px;
+  height: 120px;
+  margin-right: 8px;
+  background: #fafafa;
+  text-align: center;
+  vertical-align: top;
+  border: 1px dashed #d5d5d5;
+  border-radius: 4px;
+  transition: border-color 0.3s ease;
+  -webkit-transition: border-color 0.3s ease;
+  cursor: pointer;
+}
+.c-chunk-uploader-btn.disable-upload {
+  cursor: not-allowed;
+}
+.c-chunk-uploader-btn .chunk-btn-content {
+  display: table-cell;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  vertical-align: middle;
+}
+.c-chunk-uploader-btn .chunk-btn-content .c-uploader-btn {
+  line-height: 1.2;
+}
+.c-chunk-uploader-btn .chunk-btn-content .c-uploader-btn img {
+  width: 32px;
+  height: 32px;
+}
+.c-chunk-uploader-btn .chunk-btn-content .c-uploader-btn .uploader-icon {
+  font-size: 30px;
+  color: #000000;
+}
+.c-chunk-uploader-btn .chunk-btn-content .c-uploader-btn .uploader-text {
+  width: 140px;
+}
+.c-chunk-uploader-btn .chunk-btn-content .c-uploader-btn .uploader-text p {
+  color: #585858;
+  margin-bottom: 0px;
+}
+.c-chunk-uploader-btn .chunk-btn-content .c-uploader-btn .uploader-text span {
+  color: #b6b6b6;
+  font-size: 12px;
+}
+.c-chunk-uploader-btn .chunk-btn-content .c-uploader-btn .uploader-text .guage-text {
+  color: #585858;
+  font-size: 14px;
+}
+.c-chunk-uploader-btn:hover {
+  background: #f3f7ff;
+  border-color: #5585f5;
+}
+.c-chunk-uploader-btn:hover .guage-img {
+  content: url('cnhis-design-vue/es/src/assets/img/video_hover.png');
+}
+.c-chunk-uploader-btn:hover .c-uploader-btn .uploader-icon,
+.c-chunk-uploader-btn:hover .c-uploader-btn .uploader-text p,
+.c-chunk-uploader-btn:hover .c-uploader-btn .uploader-text span,
+.c-chunk-uploader-btn:hover .c-uploader-btn .uploader-text .guage-text {
+  color: #5585f5;
+}