nubomed-ui 1.0.2 → 1.0.3

package/src/demos/Dialog.vue

@@ -0,0 +1,255 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-30 22:07:34
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-04 20:46:16
+ * @Description: 
+-->
+<template>
+  <div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">大尺寸对话框Modal（宽1600px，高900px）</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-button @click="openLarge(1)">打开大对话框</nb-button>
+        <nb-button @click="openLarge(2)">打开大对话框</nb-button>
+        <nb-dialog v-model="largeDialogVisible1" size="large" title="大对话框" show-close @closed="handleClosedLarge(1)"
+          >自定义内容</nb-dialog
+        >
+        <nb-dialog
+          v-model="largeDialogVisible2"
+          size="large"
+          title="大对话框"
+          footerTips="自定义footerTips"
+          :title-center="true"
+          @closed="handleClosedLarge"
+          @cancel="handleClosedLarge(2)"
+          >自定义内容</nb-dialog
+        >
+      </div>
+    </div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">中尺寸对话框Modal（宽1000px，高640px）</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-button @click="openLarge(3)">打开对话框</nb-button>
+        <nb-dialog
+          v-model="largeDialogVisible3"
+          size="medium"
+          title="中尺寸对话框Modal"
+          show-close
+          @closed="handleClosedLarge(3)"
+          >自定义内容</nb-dialog
+        >
+      </div>
+    </div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">小尺寸对话框Modal（宽720px，高520px）</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-button @click="openMini(1)">打开mini对话框</nb-button>
+        <nb-button @click="openMini(2)">打开mini对话框</nb-button>
+        <nb-dialog
+          v-model="miniDialogVisible1"
+          center
+          size="mini"
+          message="是否确定保存盘点数据"
+          desc="提示哦"
+          @cancel="handleClosedMini(1)"
+          @confirm="handleClosedMini(1)"
+          @closed="handleClosedMini(1)"
+        ></nb-dialog>
+        <nb-dialog
+          v-model="miniDialogVisible2"
+          center
+          size="mini"
+          message="是否确定保存盘点数据"
+          desc="提示哦"
+          cancel-button-text="我知道了"
+          cancel-button-color="#0066E0"
+          :show-confirm-button="false"
+          @cancel="handleClosedMini(2)"
+          @closed="handleClosedMini(2)"
+        >
+          <div v-html="`您有 36 件试剂取用未归还，<br>请及时归还。`" class="nb-dialog__body__message"></div>
+        </nb-dialog>
+        <nb-button @click="openMini(3)">mini-成功</nb-button>
+        <nb-button @click="openMini(4)">mini-异常</nb-button>
+        <nb-button @click="openMini(5)">mini-异常</nb-button>
+        <nb-button @click="openMini(7)">mini-异常</nb-button>
+        <nb-dialog
+          v-model="miniDialogVisible3"
+          center
+          size="mini"
+          icon="success"
+          message="操作成功！"
+          @cancel="handleClosedMini(3)"
+          @confirm="handleClosedMini(3)"
+          @closed="handleClosedMini(3)"
+        />
+        <nb-dialog
+          v-model="miniDialogVisible4"
+          center
+          size="mini"
+          icon="warning-red"
+          message="存在未完成数据，是否确定继续"
+          desc="*跳转后当前业务数据将被清除"
+          desc-color="#00A572"
+          @cancel="handleClosedMini(4)"
+          @confirm="handleClosedMini(4)"
+          @closed="handleClosedMini(4)"
+        />
+        <nb-dialog
+          v-model="miniDialogVisible5"
+          center
+          size="mini"
+          icon="warning-red"
+          message="耗材异常出入库<br>请开柜处理！"
+          cancel-button-text="忽略并删除"
+          cancel-button-color="#E52D3E"
+          confirm-button-text="开柜"
+          @cancel="handleClosedMini(5)"
+          @confirm="handleClosedMini(5)"
+          @closed="handleClosedMini(5)"
+        />
+        <nb-dialog
+          v-model="miniDialogVisible7"
+          center
+          size="mini"
+          icon="warning-yellow"
+          message="60秒后开始自动盘点"
+          cancel-button-text="我知道了"
+          cancel-button-color="#0066E0"
+          :show-confirm-button="false"
+          :cancel-button-time="5"
+          @cancel="handleClosedMini(7)"
+          @closed="handleClosedMini(7)"
+        />
+        <nb-button @click="openMini(6)">mini-表单</nb-button>
+        <nb-dialog
+          v-model="miniDialogVisible6"
+          size="mini"
+          center
+          title="请备注患者信息"
+          @cancel="handleClosedMini(6)"
+          @confirm="handleSubmitForm"
+          @closed="handleClosedMini(6)"
+        >
+          <nb-form ref="formRef">
+            <nb-form-item
+              label="患者号"
+              prop="name"
+              :rules="[
+                { required: true, message: '患者号 is required' },
+                { type: 'number', message: '患者号 must be a number' }
+              ]"
+            >
+              <nb-input v-model="formModel.name" size="large" placeholder="请输入住院号/门诊号" />
+            </nb-form-item>
+            <nb-form-item label="姓名">
+              <nb-input size="large" placeholder="请输入住院号/门诊号" />
+            </nb-form-item>
+          </nb-form>
+        </nb-dialog>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+const largeDialogVisible1 = ref(false)
+const largeDialogVisible2 = ref(false)
+const largeDialogVisible3 = ref(false)
+
+const miniDialogVisible1 = ref(false)
+const miniDialogVisible2 = ref(false)
+
+const miniDialogVisible3 = ref(false)
+const miniDialogVisible4 = ref(false)
+const miniDialogVisible5 = ref(false)
+
+const miniDialogVisible6 = ref(false)
+const miniDialogVisible7 = ref(false)
+
+const formRef = ref()
+const formModel = reactive({
+  name: '',
+  password: ''
+})
+
+const openLarge = (index) => {
+  setLargeVisible(index, true)
+}
+
+const openMini = (index) => {
+  setMiniVisible(index, true)
+}
+
+// 关闭
+const handleClosedLarge = (index) => {
+  console.log('关闭弹框', index)
+  setLargeVisible(index, false)
+}
+
+// 关闭
+const handleClosedMini = (index) => {
+  console.log('关闭弹框', index)
+  setMiniVisible(index, false)
+}
+
+const handleSubmitForm = () => {
+  formRef.value && formRef.value.validate(() => {})
+}
+
+function setLargeVisible(index, visible) {
+  switch (index) {
+    case 1:
+      largeDialogVisible1.value = visible
+      break
+    case 2:
+      largeDialogVisible2.value = visible
+      break
+    case 3:
+      largeDialogVisible3.value = visible
+      break
+  }
+}
+
+function setMiniVisible(index, visible) {
+  switch (index) {
+    case 1:
+      miniDialogVisible1.value = visible
+      break
+    case 2:
+      miniDialogVisible2.value = visible
+      break
+    case 3:
+      miniDialogVisible3.value = visible
+      break
+    case 4:
+      miniDialogVisible4.value = visible
+      break
+    case 5:
+      miniDialogVisible5.value = visible
+      break
+    case 6:
+      miniDialogVisible6.value = visible
+      break
+    case 7:
+      miniDialogVisible7.value = visible
+      break
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.demo-box-content {
+  .nb-button {
+    margin: 0 30px 30px 0;
+  }
+}
+</style>

package/src/demos/Empty.vue

@@ -0,0 +1,38 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-07-05 15:26:05
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-14 17:52:04
+ * @Description: 
+-->
+<template>
+  <div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">Empty 空状态（宽高自适应居中显示）</span>
+        <span class="demo-box-title-desc">空状态时的占位提示。</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-empty />
+        <nb-empty text="未查询到相关数据" />
+        <nb-empty text="未查询到相关数据">
+          <nb-button type="primary" plain size="small" svg-icon="refresh">刷新</nb-button>
+        </nb-empty>
+      </div>
+      <div class="demo-box-content">
+        <nb-empty icon="search" text="未查询到相关数据" />
+        <nb-empty icon="data" text="未检测到出入库数据" />
+        <nb-empty icon="abnormal" text="未检测到出入库数据" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.demo-box-content {
+  height: 900px;
+  display: flex;
+}
+</style>

package/src/demos/FooterMenu.vue

@@ -0,0 +1,49 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-07-04 20:47:56
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-06 09:53:04
+ * @Description: 
+-->
+<template>
+  <div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">底部导航（高度96px）</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-menu position="footer" :data="menus" :active="activeMenu" @change="handleChangeMenu" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const menus = ref(
+  [
+    { text: "修改密码", value: '修改密码' },
+    { text: "工卡绑定", value: '工卡绑定'},
+    { text: "指纹绑定", value: '指纹绑定'},
+    { text: "人脸绑定", value: '人脸绑定', import: true},
+    { text: "取用未归还记录", value: '取用未归还记录', disabled: true },
+    { text: "日清统计", value: '日清统计', badge: 5 },
+  ]
+);
+const activeMenu = ref(menus.value[0].value)
+const handleChangeMenu = (item) => {
+  activeMenu.value = item.value
+}
+</script>
+
+<style lang="scss" scoped>
+.demo-box-content {
+  display: flex;
+  flex-direction: column;
+  .nb-menu {
+    margin-bottom: 30px;
+  }
+}
+
+</style>

package/src/demos/Header.vue

@@ -0,0 +1,71 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-07-04 20:47:56
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-25 15:27:38
+ * @Description: 
+-->
+<template>
+  <div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">标题栏（高度80px）</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-menu position="header" title="取还" @back="handleBack" @logout="handleLogout" />
+        <nb-menu position="header" title="取还详情" :show-back="false" :show-logout="false" />
+        <nb-menu position="header" title="取还详情" backText="返回主页" :show-logout="false" @logout="handleLogout" />
+        <nb-menu position="header" :data="menus" :active="activeMenu" @change="handleChangeMenu" @back="handleBack" @logout="handleLogout" />
+        <nb-menu position="header">
+          <template #left>
+            <div class="header-left">当前用户：管理员</div>
+          </template>
+          <template #title>自定义标题</template>
+          <template #right>
+            <div class="header-right">
+              <span>账盘</span>
+              <strong>4000</strong>
+              <span>实盘</span>
+              <strong>333</strong>
+            </div>
+          </template>
+        </nb-menu>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const menus = ref(
+  [
+    { text: "按柜取还", value: '按柜取还' },
+    { text: "自由取还", value: '自由取还'},
+    { text: "检索取还", value: '检索取还'}
+  ]
+);
+const activeMenu = ref(menus.value[0].value)
+const handleChangeMenu = (item) => {
+  activeMenu.value = item.value
+}
+const handleBack = () => {
+  alert('返回')
+}
+const handleLogout = () => {
+  alert('退出登录')
+}
+</script>
+
+<style lang="scss" scoped>
+.demo-box-content {
+  display: flex;
+  flex-direction: column;
+  .nb-menu {
+    margin-bottom: 30px;
+  }
+  .header-left{flex: 1;font-size: 32px;line-height: 42px;margin-left: 16px;}
+  .header-right{flex: 1;display: flex;align-items: center;justify-content: flex-end;text-align: right;font-size: 24px;line-height: 42px;}
+}
+
+</style>