cnhis-design-vue 3.1.5 → 3.1.6-beta.1

package/es/packages/info-header/src/info-header.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1 @@
+import{defineComponent as e,ref as t,nextTick as n,onMounted as o,watch as i,openBlock as l,createElementBlock as a,normalizeClass as s,normalizeStyle as r,createElementVNode as c,renderSlot as d,Fragment as f,toDisplayString as u,createCommentVNode as p,renderList as m,withDirectives as v,createBlock as h,unref as _,withCtx as y,createTextVNode as g,vShow as w,createVNode as b}from"vue";import{NTag as I,NDescriptions as k,NDescriptionsItem as $,NEllipsis as S}from"naive-ui";import{useThrottleFn as x,useEventListener as F}from"@vueuse/core";import C from"./slot-render2.mjs";import"./hidden-content2.mjs";import H from"./hidden-content.vue_vue_type_script_setup_true_lang.mjs";const W={class:"c-info-header__operation"},j=c("div",{class:"c-info-header__divider"},null,-1),L={class:"c-info-header__patient"},M={class:"c-info-header__patientHeader"},q={key:0,class:"c-info-header__patientHeader--name"},A={key:1,class:"c-info-header__patientHeader--sex"},z={key:2,class:"c-info-header__patientHeader--age"},N={class:"c-info-header__setting"},P=c("i",{class:"iconfont icon-bianji"},null,-1),B=c("i",{class:"iconfont icon-setting"},null,-1),O=c("i",{class:"iconfont icon-double_down"},null,-1);var R=e({name:"info-header",props:{compact:{type:Boolean,required:!0},separator:{type:String,default:":"},patientInfo:{type:Object,default:()=>({})},infoList:{type:Array,required:!0},labelField:{type:String,default:"label"},valueField:{type:String,default:"value"},minColumnWidth:{type:[String,Number],default:240},rowHeight:{type:[String,Number],default:32}},emits:["openPatientInfo","fieldSet","update:compact"],setup(e,{expose:R,emit:D}){const E=e;function G(){D("update:compact",!E.compact)}function J(){D("openPatientInfo")}function K(){D("fieldSet")}function Q(e){const t=Y.value[e]+"px";return{width:t,maxWidth:t}}function T(e){return["电话","身份证"].some((t=>{var n,o;return null==(o=null==(n=e[E.labelField])?void 0:n.includes)?void 0:o.call(n,t)}))}const U=t(),V=t(3),X=t(0),Y=t([]),Z=x((async function(){await n();const e=U.value;if(!e)return;const{clientWidth:t}=e;V.value=Math.floor(t/+E.minColumnWidth),X.value=Math.floor(t/V.value),await n();const o=e.querySelectorAll(".n-descriptions-table-content__label");o&&(Y.value=Array.from(o).map((e=>X.value-e.clientWidth-20)))}),100,!0,!1);return o(Z),i([()=>E.minColumnWidth,()=>E.infoList],Z,{flush:"post",deep:!0}),R({update:Z}),F(window,"resize",Z),(t,n)=>(l(),a("div",{class:s(["c-info-header",{"is-compact":e.compact}]),style:r({"--row-height":e.rowHeight,"--column-width":X.value})},[c("section",W,[d(t.$slots,"operation")]),j,c("section",L,[d(t.$slots,"patientModule"),t.$slots.avatarModule?p("v-if",!0):(l(),a(f,{key:0},[d(t.$slots,"avatar"),c("section",null,[c("header",M,[e.patientInfo.name?(l(),a("div",q,u(e.patientInfo.name),1)):p("v-if",!0),e.patientInfo.sex?(l(),a("div",A,"/ "+u(e.patientInfo.sex),1)):p("v-if",!0),e.patientInfo.age?(l(),a("div",z,"/ "+u(e.patientInfo.age)+"岁",1)):p("v-if",!0),(l(!0),a(f,null,m(e.patientInfo.tagList||[],(e=>{return v((l(),h(_(I),{key:e.content,size:"medium",bordered:!1,color:(t=e.type||"warning",{color:"warning"===t?"#fcc200":"rgba(45, 122, 255, 0.1)",textColor:"warning"===t?"#ffffff":"#2563F4"})},{default:y((()=>[g(u(e.content),1)])),_:2},1032,["color"])),[[w,e.content]]);var t})),128))]),d(t.$slots,"avatarInfo")])],64))]),c("section",{class:"c-info-header__info",style:r({"--row-num":e.compact?1:2}),ref_key:"infoRef",ref:U},[d(t.$slots,"info",{},(()=>[b(_(k),{"label-align":"right",style:{width:"100%"},"label-placement":"left",separator:":",column:V.value},{default:y((()=>[(l(!0),a(f,null,m(e.infoList,((n,o)=>(l(),h(_($),{key:n[e.labelField],label:n[e.labelField]},{default:y((()=>[n.slot?(l(),h(_(C),{key:0,renderer:n.slot,"root-slots":t.$slots,item:n,width:Y.value[o]},null,8,["renderer","root-slots","item","width"])):T(n)?(l(),h(H,{key:1,content:n[e.valueField],width:Y.value[o]},null,8,["content","width"])):(l(),h(_(S),{key:2,style:r(Q(o))},{default:y((()=>{var t;return[g(u(null!=(t=n[e.valueField])?t:"-"),1)]})),_:2},1032,["style"]))])),_:2},1032,["label"])))),128))])),_:1},8,["column"])]))],4),c("section",N,[d(t.$slots,"setting"),t.$slots.setting?p("v-if",!0):(l(),a(f,{key:0},[c("div",{class:"c-info-header__settingIcon",onClick:J},[d(t.$slots,"patientInfoIcon",{},(()=>[P]))]),c("div",{class:"c-info-header__settingIcon",onClick:K},[d(t.$slots,"fieldSetIcon",{},(()=>[B]))]),c("div",{class:"c-info-header__settingIcon",onClick:G},[d(t.$slots,"compactIcon",{},(()=>[O]))])],64))])],6))}});export{R as default};

package/es/packages/info-header/src/info-header2.mjs

@@ -0,0 +1 @@
+import e from"./info-header.vue_vue_type_script_setup_true_lang.mjs";export{default}from"./info-header.vue_vue_type_script_setup_true_lang.mjs";e.__file="packages/info-header/src/info-header.vue";

package/es/packages/info-header/src/slot-render.d.ts

@@ -0,0 +1,22 @@
+import { Func } from 'cnhis-design-vue/es/src/types';
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    renderer: {
+        type: (StringConstructor | FunctionConstructor)[];
+        required: true;
+    };
+    rootSlots: {
+        type: PropType<Record<string, Func<any[], any>>>;
+        required: true;
+    };
+}, () => any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    renderer: {
+        type: (StringConstructor | FunctionConstructor)[];
+        required: true;
+    };
+    rootSlots: {
+        type: PropType<Record<string, Func<any[], any>>>;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/es/packages/info-header/src/slot-render.mjs

@@ -0,0 +1 @@
+export{default}from"./slot-render2.mjs";

package/es/packages/info-header/src/slot-render2.mjs

@@ -0,0 +1 @@
+import{isString as r,isFunction as e}from"lodash-es";import{defineComponent as t}from"vue";var n=t({name:"SlotRender",props:{renderer:{type:[String,Function],required:!0},rootSlots:{type:Object,required:!0}},setup:(t,{attrs:n})=>()=>{const{renderer:o}=t;return r(o)?function(r){const o=t.rootSlots[r];return e(o)?o(n):null}(o):e(o)?function(r){return e(r)?r(n):null}(o):null}});export{n as default};

package/es/packages/info-header/style/index.css

@@ -0,0 +1,118 @@
+.c-info-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 16px;
+  box-shadow: 0 2px 4px 0 rgba(176, 176, 176, 0.46);
+  background: white;
+}
+@font-face {
+  font-family: "iconfont";
+  /* Project id 3468756 */
+  src: url('./iconfont.ttf?t=1655348824139') format('truetype');
+}
+.c-info-header .iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.c-info-header .icon-double_up:before {
+  content: "\e8c3";
+}
+.c-info-header .icon-guanbi-yanjing:before {
+  content: "\e6e3";
+}
+.c-info-header .icon-faxian-yanjing:before {
+  content: "\e6de";
+}
+.c-info-header .icon-bianji:before {
+  content: "\e600";
+}
+.c-info-header .icon-setting:before {
+  content: "\e785";
+}
+.c-info-header .icon-double_down:before {
+  content: "\e8c2";
+}
+.c-info-header__divider {
+  width: 1px;
+  background: #d5d5d566;
+  align-self: stretch;
+}
+.c-info-header__patient {
+  display: flex;
+  gap: 12px;
+  margin-right: 34px;
+}
+.c-info-header__patientHeader {
+  display: flex;
+  vertical-align: bottom;
+  align-items: baseline;
+  gap: 6px;
+}
+.c-info-header__patientHeader--name {
+  font-size: 20px;
+  font-weight: 700;
+  margin-right: 6px;
+}
+.c-info-header__patientHeader .n-tag {
+  align-self: flex-start;
+  border-radius: 4px;
+}
+.c-info-header__info {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  justify-content: flex-start;
+  height: calc(var(--row-height) * var(--row-num) * 1px);
+  font-size: 14px;
+}
+.c-info-header__info .n-descriptions-table-content {
+  padding-bottom: 0 !important;
+  height: calc(var(--row-height) * 1px);
+  vertical-align: middle !important;
+  max-width: calc(var(--column-width) * 1px);
+}
+.c-info-header__info .n-descriptions-table-content__content {
+  font-weight: 700;
+}
+.c-info-header__info .n-descriptions-table-content__label {
+  display: inline-block;
+}
+.c-info-header__setting {
+  display: flex;
+  align-self: flex-start;
+  gap: 8px;
+}
+.c-info-header__settingIcon {
+  cursor: pointer;
+}
+.c-info-header__setting .iconfont {
+  font-size: 20px;
+  color: black;
+  display: inline-block;
+  transition: all 0.2s ease-in-out;
+}
+.c-info-header.is-compact [compact-hidden] {
+  display: none !important;
+}
+.c-info-header.is-compact .icon-double_down {
+  transform: rotate(180deg);
+}
+.c-info-header__hidden {
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+.c-info-header__hidden--icon {
+  color: inherit !important;
+  cursor: pointer;
+  font-size: 14px;
+  text-decoration: none !important;
+}

package/es/packages/info-header/style/index.less

@@ -0,0 +1,149 @@
+.c-info-header {
+  @font-face {
+  font-family: "iconfont"; /* Project id 3468756 */
+  src: url('./iconfont.ttf?t=1655348824139') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-double_up:before {
+  content: "\e8c3";
+}
+
+.icon-guanbi-yanjing:before {
+  content: "\e6e3";
+}
+
+.icon-faxian-yanjing:before {
+  content: "\e6de";
+}
+
+.icon-bianji:before {
+  content: "\e600";
+}
+
+.icon-setting:before {
+  content: "\e785";
+}
+
+.icon-double_down:before {
+  content: "\e8c2";
+}
+
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 16px;
+  box-shadow: 0 2px 4px 0 rgba(176, 176, 176, 0.46);
+  background: white;
+
+  &__operation {
+    //
+  }
+
+  &__divider {
+    width: 1px;
+    background: #d5d5d566;
+    align-self: stretch;
+  }
+
+  &__patient {
+    display: flex;
+    gap: 12px;
+    margin-right: 34px;
+
+    &Header {
+      display: flex;
+      vertical-align: bottom;
+      align-items: baseline;
+      gap: 6px;
+
+      &--name {
+        font-size: 20px;
+        font-weight: 700;
+        margin-right: 6px;
+      }
+
+      .n-tag {
+        align-self: flex-start;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  &__info {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+    justify-content: flex-start;
+    height: calc(var(--row-height) * var(--row-num) * 1px);
+
+    font-size: 14px;
+
+    .n-descriptions-table-content {
+      padding-bottom: 0 !important;
+      height: calc(var(--row-height) * 1px);
+      vertical-align: middle !important;
+      max-width: calc(var(--column-width) * 1px);
+    }
+
+    .n-descriptions-table-content__content {
+      font-weight: 700;
+    }
+
+    .n-descriptions-table-content__label {
+      display: inline-block;
+    }
+  }
+
+  &__setting {
+    display: flex;
+    align-self: flex-start;
+    gap: 8px;
+
+    &Icon {
+      cursor: pointer;
+    }
+
+    .iconfont {
+      font-size: 20px;
+      color: black;
+      display: inline-block;
+      transition: all .2s ease-in-out;
+    }
+  }
+
+  &.is-compact {
+    [compact-hidden] {
+      display: none !important;
+    }
+
+    .icon-double_down {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__hidden{
+    display: inline-flex;
+    vertical-align: middle;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+
+    &--icon {
+      color: inherit !important;
+      cursor: pointer;
+      font-size: 14px;
+      text-decoration: none !important;
+    }
+  }
+}