nubomed-ui 1.0.1 → 1.0.3

package/src/bi-packages/components/Table/index copy.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-29 15:15:27
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-08-07 14:27:49
+ * @Description: 检测动作栏
+-->
+<template>
+  <div class="nb-table">
+    <!-- 表头 -->
+    <div class="nb-table__header-wrapper">
+      <table cellpadding="0" cellspacing="0" border="0">
+        <colgroup>
+          <col name="nb-table-1_column_1" width="300" />
+          <col name="nb-table-1_column_2" width="200" />
+          <col name="nb-table-1_column_3" width="100" />
+        </colgroup>
+        <thead class="nb-table__thead">
+          <tr>
+            <th v-for="item in columns" :key="item.prop" class="nb-table-1_column_1">
+            {{ item.label }}
+            </th>
+          </tr>
+        </thead>
+        <thead class="nb-table__thead">
+          <tr>
+            <th class="nb-table-1_column_1">耗材名称</th>
+            <th class="nb-table-1_column_2">唯一码</th>
+            <th class="nb-table-1_column_3">规格/型号</th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+    <!-- 表头体 -->
+    <div class="nb-table__body-wrapper">
+      <table cellpadding="0" cellspacing="0" border="0">
+        <colgroup>
+          <col name="nb-table-1_column_1" width="300" />
+          <col name="nb-table-1_column_2" width="200" />
+          <col name="nb-table-1_column_3" width="100" />
+        </colgroup>
+        <tbody class="nb-table__tbody">
+          <tr>
+            <td class="nb-table-1_column_1"><div>正压静脉留置针正压静脉留置针</div></td>
+            <td class="nb-table-1_column_2"><div>234343</div></td>
+            <td class="nb-table-1_column_3"><div>3</div></td>
+          </tr>
+          <tr>
+            <td class="nb-table-1_column_1"><div>正压静脉留置针正压静脉留置针正压静脉留置针正压静脉留置针正压静脉留置针正压静脉留置针</div></td>
+            <td class="nb-table-1_column_2"><div>234343</div></td>
+            <td class="nb-table-1_column_3"><div>3</div></td>
+          </tr>
+          <tr>
+            <td class="nb-table-1_column_1"><div>正压静脉留置针正压静脉留置针</div></td>
+            <td class="nb-table-1_column_2"><div>正压静脉留置针正压静脉留置针正压静脉留置针正压静脉留置针正压静脉留置针正压静脉留置针</div></td>
+            <td class="nb-table-1_column_3"><div>3</div></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots } from 'vue'
+import { createNamespace } from "../../../utils/create.js";
+
+defineOptions({
+  name: "NbTable",
+});
+
+const props = defineProps({
+  // 数据源
+  data: {
+    type: Array,
+    default: () => {
+      return []
+    },
+  }
+});
+
+const [name, bem] = createNamespace("action-bar");
+const slots = useSlots()
+
+// 样式
+const classes = bem([
+  {
+  },
+]);
+
+console.log(slots.default())
+
+const columns = computed(() => {
+  let list = []
+  slots.default().forEach(x => {
+    list.push({
+      label: x.props.label,
+      prop: x.props.prop
+    })
+  })
+  return list
+})
+</script>
+
+<style lang="scss">
+@import "./index.scss";
+</style>

package/src/bi-packages/components/Table/index.scss

@@ -0,0 +1,118 @@
+:root {
+  --nb-table-head-height: 64px; // 表头高度
+  --nb-table-head-padding: 6px 0;
+  --nb-table-body-height: 64px; // 标体单行高度
+  --nb-table-body-padding: 6px 0;
+}
+
+.nb-table {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+
+  // 表头
+  &__header-wrapper {
+    width: 100%;
+    min-height: var(--nb-table-head-height);
+
+    table {
+      width: 100%;
+    }
+  }
+
+  &__thead {
+    font-size: 20px;
+    line-height: 30px;
+    font-weight: 400;
+    color: #3abdff;
+
+    tr {
+      height: var(--nb-table-head-height);
+    }
+
+    th {
+      text-align: left;
+
+      &>div {
+        padding: var(--nb-table-head-padding);
+      }
+    }
+  }
+
+  // 表体
+  &__body-wrapper {
+    width: 100%;
+    flex: 1;
+    table {
+      width: 100%;
+    }
+
+    tr {
+      height: var(--nb-table-body-height);
+    }
+
+    tr:nth-child(odd) {
+      background-color: rgba(#3abdff, 0.04);
+    }
+
+    td {
+
+      &>div {
+        padding: var(--nb-table-body-padding);
+      }
+    }
+  }
+
+  // 上下轮播
+  &--vertical{
+    overflow: initial;
+    animation-name: upDown;
+    animation-duration: 5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+  }
+
+  &__thead,
+  &__tbody {
+
+    th,
+    td {
+      min-width: 0;
+      box-sizing: border-box;
+      text-overflow: ellipsis;
+      vertical-align: middle;
+      position: relative;
+      text-align: left;
+      z-index: 1;
+      padding-left: 30px;
+
+      &>div {
+        padding: var(--nb-table-head-padding);
+        box-sizing: border-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+        word-break: break-word;
+      }
+    }
+  }
+
+  &__tbody {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 400;
+    color: #3abdff;
+  }
+}
+@keyframes upDown {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    /* 平移自身宽度的50%，ul宽度的50%，剩下的那50%用来在下一次显示时占位 */
+    transform: translateY(-50%);
+  }
+}

package/src/bi-packages/components/Table/index.vue

@@ -0,0 +1,108 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-29 15:15:27
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-08-14 15:55:36
+ * @Description: 表格
+-->
+<template>
+  <div class="nb-table">
+    <!-- 表头 -->
+    <div class="nb-table__header-wrapper">
+      <table cellpadding="0" cellspacing="0" border="0">
+        <nb-table-colgroup :columns="columns" />
+        <thead class="nb-table__thead">
+          <tr>
+            <th
+              v-for="(item, index) in columns"
+              :key="item.prop"
+              :class="columnClass(item, index)"
+            >
+              {{ item.label }}
+            </th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+    <!-- 表头体 -->
+    <div class="nb-table__body-wrapper" :class="wraperClass">
+      <table cellpadding="0" cellspacing="0" border="0">
+        <nb-table-colgroup :columns="columns" />
+        <tbody class="nb-table__tbody">
+          <tr v-for="(row, rowIndex) in data" :key="rowIndex">
+            <td v-for="(column, columnIndex) in columns" :key="columnIndex">
+              <!-- <div>{{ row[column.prop] }}</div> -->
+              <!-- <nb-table-column>
+                <template #default="{ row, column, columnIndex }"></template>
+              </nb-table-column> -->
+              <!-- <nb-table-column :scope="{ row, column, columnIndex }" /> -->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots, ref, h } from 'vue'
+import { createNamespace } from '../../../utils/create.js'
+import NbTableColgroup from './TableColgroup.vue'
+import NbTableColumn from '../TableColumn/index.vue'
+
+defineOptions({
+  name: 'NbTable'
+})
+
+const props = defineProps({
+  // 数据源
+  data: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  // 轮播方式
+  swipe: {
+    type: String,
+    default: '' // vertical
+  }
+})
+
+const [name, bem] = createNamespace('table')
+const slots = useSlots()
+const dynamicSlotName = ref('')
+
+// 样式
+const wraperClass = bem([props.swipe, {
+  
+}])
+
+const columns = computed(() => {
+  let list = []
+  slots.default().forEach((x) => {
+    console.log(x.children?.default())
+    list.push({
+      ...x.props,
+      default: x.children?.default()
+    })
+  })
+  return list
+})
+
+console.log(slots.default(), columns.value)
+
+// 列的宽度
+const columnWidth = (column, index) => {
+  return column.minWidth
+}
+
+// 列的class名称
+const columnClass = (column, index) => {
+  return `nb-table-0_column_${index}`
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/src/bi-packages/components/TableColumn/index.scss

@@ -0,0 +1,7 @@
+:root {
+  // 通用
+  --nb-action-bar-height: 112px;
+}
+
+.nb-action-bar {
+}

package/src/bi-packages/components/TableColumn/index.vue

@@ -0,0 +1,60 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-29 15:15:27
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-08-14 15:53:34
+ * @Description: 检测动作栏
+-->
+<template>
+  <div class="2">
+    <slot>{{label}}2222</slot>
+  </div>
+</template>
+
+<script setup>
+import { createNamespace } from "../../../utils/create.js";
+
+defineOptions({
+  name: "NbTableColumn",
+});
+
+const props = defineProps({
+  scope: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  // 检测中的提示语
+  label: {
+    type: String,
+    default: "",
+  },
+  // 是否异常
+  prop: {
+    type: String,
+    default: '',
+  },
+  // 异常提示语
+  minWidth: {
+    type: [Number, String],
+    default: null,
+  },
+});
+
+const [name, bem] = createNamespace("table-colunm");
+
+// 样式
+const classes = bem([
+  {
+    fixed: props.fixed,
+    loading: props.loading,
+    abnormal: props.abnormal,
+    success: props.success,
+  },
+]);
+</script>
+
+<style lang="scss">
+@import "./index.scss";
+</style>

package/src/bi-packages/fonts/font.scss

@@ -0,0 +1,11 @@
+// 浏览器壳和Android壳均已集成字体文件，但处理方式不一样
+// 开发环境下，均需要引用字体文件
+// 生产环境下，Android包需要引入字体文件，但Android可会进行请求拦截
+// 生成环境下，Web包不需要引入字体文件，但要兼容-M和 M两种
+@font-face {
+  font-family: OPPOSans-M;src: url('./OPPOSans-M.ttf');
+}
+
+@font-face {
+  font-family: OPPOSans-B;src: url('./OPPOSans-B.ttf');
+}