fix: 修改排床

src/components/Form/src/components/ApiSelect.vue

@@ -36,6 +36,7 @@
   export default defineComponent({
     name: 'ApiSelect',
     components: {
+      // eslint-disable-next-line vue/no-reserved-component-names
       Select,
       LoadingOutlined,
     },

src/components/XTForm/src/componentEnum.ts

@@ -7,6 +7,8 @@ export enum ComponentEnum {
   Input = 'Input',
   // DatePicker 日期选择框
   DatePicker = 'DatePicker',
+  // DatePicker 日期选择框
+  RangePicker = 'RangePicker',
   // InputNumber 数字输入框
   InputNumber = 'InputNumber',
   // Radio 单选框

src/views/biz/bed/near/index.vue

@@ -23,10 +23,15 @@
             </div>
           </div>
         </div>
-        <div class="container" ref="scrollEl">
+        <div class="content" ref="scrollEl">
           <div>
             <div
-              :class="['mb-2 container-head', Number(refY) > 100 ? 'container-head--fixed' : '']"
+              ref="headEl"
+              :class="[
+                'mb-2 content-head',
+                Number(refY) > 100 ? 'content-head--fixed' : '',
+                isEdit && Number(refY) > 100 ? 'content-head--edit' : '',
+              ]"
             >
               <div
                 class="head-item animate__animated animate__slideInLeft"
@@ -53,7 +58,7 @@
             </div>
           </div>
 
-          <div :class="['container-body', Number(refY) > 100 ? 'container-body--fixed' : '']">
+          <div :class="['content-body', Number(refY) > 100 ? 'content-body--fixed' : '']">
             <div class="flex mb-2" v-for="(c, cIdx) in cnt" :key="c.id">
               <div class="flex items-center" v-if="c.bed == bed[cIdx].bed">
                 <div class="body-list" v-for="(sa, idx) in c.sailings" :key="idx">
@@ -81,42 +86,67 @@
       </div>
     </div>
     <div class="edit animate__animated animate__slideInRight" v-if="isEdit">
-      {{ refX }} {{ refY }}
-
-      <div class="edit-not">
-        <div>未排床</div>
-        <div
-          v-for="item in bedNot"
-          :key="item.id"
-          :class="['edit-item', item.id == notBedId ? 'edit-item--not' : '']"
-          @click="handleNotBed(item)"
-        >
-          {{ item.name }}
+      <!-- {{ refX }} {{ refY }}
+      {{ headX }}
+      {{ Number(refX) > 100 }} -->
+      <div class="edit-tit"> 本周排床编辑 </div>
+      <div class="edit-cnt">
+        <div class="edit-cnt_tit">未排床</div>
+        <div class="edit-cnt_detail">
+          <div
+            v-for="item in bedNot"
+            :key="item.id"
+            :class="['edit-item', item.id == notBedId ? 'edit-item--not' : '']"
+            @click="handleNotBed(item)"
+          >
+            <div> {{ item.name }}</div>
+            <div class="edit-item_count"> {{ item.count }}次</div>
+          </div>
         </div>
       </div>
-      <div class="edit-has">
-        <div>已排床</div>
-        <div
-          v-for="item in bedHas"
-          :key="item.id"
-          :class="['edit-item', item.id == hasBedId ? 'edit-item--has' : '']"
-          @click="handleHasBed(item)"
-        >
-          {{ item.name }}
+      <div class="edit-cnt">
+        <div class="edit-cnt_tit">已排床</div>
+        <div class="mb-2">
+          <Select
+            show-search
+            allow-clear
+            class="w-full"
+            @search="searchBed"
+            @change="changeBed"
+            placelholder="搜索需要排班的患者"
+            :options="bedNot"
+            v-model:value="searchBedField"
+          >
+            <template #suffixIcon>
+              <i class="iconfont icon-xt-search ant-select-suffix" />
+            </template>
+          </Select>
+        </div>
+        <div class="edit-cnt_detail">
+          <div
+            v-for="item in bedHas"
+            :key="item.id"
+            :class="['edit-item', item.id == notBedId ? 'edit-item--has' : '']"
+            @click="handleNotBed(item)"
+          >
+            {{ item.name }}
+          </div>
         </div>
       </div>
-      <div class="flex items-center">
-        <a-button type="default" @click="handleReset">取消</a-button>
-        <a-button type="primary" @click="handleSubmit">确定</a-button>
+      <div class="flex items-center edit-foot">
+        <a-button class="edit-foot_btn" type="default" @click="handleReset">取消</a-button>
+        <a-button class="edit-foot_btn" disabled type="primary" @click="handleSubmit"
+          >保存</a-button
+        >
       </div>
-      <a-button @click="scrollX += 10"> Scroll right 10px </a-button>
-      <a-button @click="scrollY += 10"> Scroll down 10px </a-button>
+      <!-- <a-button @click="scrollX += 10"> Scroll right 10px </a-button> -->
+      <!-- <a-button @click="scrollY += 10"> Scroll down 10px </a-button> -->
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed, ref, onMounted, watch } from 'vue';
   import dayjs from 'dayjs';
   import { defaultHead, defaultBed, defaultData } from './data';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -124,7 +154,9 @@
   import _ from 'lodash-es';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   // import { useScroll } from '/@/hooks/event/useScroll';
-  import { useScroll } from '@vueuse/core';
+  import { useScroll, useThrottleFn } from '@vueuse/core';
+  import { Select } from 'ant-design-vue';
+
   const { getCollapsed, toggleCollapsed } = useMenuSetting();
   onMounted(() => {
     if (getCollapsed) {
@@ -132,7 +164,7 @@
     }
     // 滚动到指定位置
     scrollTo(0, 1);
-    // const scrollId = document.querySelector('.container');
+    // const scrollId = document.querySelector('.content');
     // console.log('🚀 ~ file: index.vue:133 ~ onMounted ~ scrollId:', scrollId);
     // scrollId.addEventListener('scroll', function (e) {
     //   console.log('e', e.target);
@@ -152,6 +184,7 @@
   const hasBedId = ref('');
   const filter = ref({}) as any;
   const isEdit = ref(false);
+  const searchBedField = ref('');
   const customWeekStartEndFormat = value =>
     `${dayjs(value).startOf('week').format('YYYY-MM-DD')} ~ ${dayjs(value)
       .endOf('week')
@@ -162,8 +195,10 @@
   };
   // scroll
   const scrollEl = ref(null);
+  const headEl = ref(null);
   const { x: scrollX } = useScroll(scrollEl, { behavior: 'smooth' });
   const { y: scrollY } = useScroll(document.body, { behavior: 'smooth' });
+  const { x: headX } = useScroll(headEl, { behavior: 'smooth' });
   const refY = computed({
     get() {
       return scrollY.value.toFixed(1);
@@ -175,27 +210,83 @@
   // 滚动到指定位置
   function scrollTo(x, y) {
     console.log('🚀 ~ file: index.vue:177 ~ scrollTo ~ x:', x);
-    scrollX.value = (x - 1) * 54 * 3;
+    // scrollX.value = (x - 1) * 54 * 3;
+    scrollX.value = x > 3 ? 107 : 0;
+    if (isEdit.value && scrollY.value > 100) {
+      headX.value = x > 3 ? 107 : 0;
+    }
     if (y == null) return;
     scrollY.value = (y - 1) * 54 + (y - 2) * 10 + (y > 10 ? 90 : 110);
   }
+  // 监听编辑状态下的页面竖向滚动
+  watch(
+    () => scrollY.value,
+    () => {
+      scrollThrott();
+    },
+  );
+  // 节流操作
+  const scrollThrott = useThrottleFn(() => {
+    if (isEdit.value && scrollY.value > 100) {
+      headX.value = scrollX.value > 100 ? 107 : 0;
+    }
+  }, 500);
 
-  const refX = computed(() => {
-    console.log('x', scrollX.value);
-    return scrollX.value.toFixed(1);
-  });
+  // const refX = computed(() => {
+  //   console.log('x', scrollX.value);
+  //   return scrollX.value.toFixed(1);
+  // });
 
   // const { x, y } = useScroll(document.body);
 
   // scroll
   const bedNot = [
+    {
+      id: 'n1',
+      name: '王雪（女｜38）',
+      label: '王雪（女｜38）',
+      count: 1,
+    },
+    {
+      id: 'n2',
+      name: '测试456456',
+      label: '测试456456',
+      count: 1,
+    },
+    {
+      id: 'n3',
+      name: '测试456456',
+      label: '测试123123',
+      count: 1,
+    },
+    {
+      id: 'n4',
+      name: '测试456456',
+      label: '测试456456',
+      count: 3,
+    },
+    {
+      id: 'n5',
+      name: '测试456456',
+      label: '测试123123',
+      count: 1,
+    },
+    {
+      id: 'n6',
+      name: '测试456456',
+      label: '测试456456',
+      count: 2,
+    },
     {
       id: 'n123123',
-      name: '测试123123',
+      name: '测试456456',
+      label: '测试123123',
+      count: 1,
     },
     {
       id: 'n456456',
       name: '测试456456',
+      label: '测试456456',
     },
   ];
   const bedHas = [
@@ -253,11 +344,6 @@
     hasBedId.value = null;
     setCnt();
   }
-  function handleHasBed(data) {
-    hasBedId.value = data.id;
-    notBedId.value = null;
-    setCnt();
-  }
   function callFilter(data) {
     console.log('🚀 ~ file: index.vue:173 ~ callFilter ~ data:', data);
     if (data.sailings || data.sailings == 0) {
@@ -373,6 +459,12 @@
       toggleCollapsed();
     }
   }
+  function searchBed(val) {
+    console.log('🚀 ~ file: index.vue:443 ~ searchBed ~ val:', val);
+  }
+  function changeBed(val) {
+    console.log('🚀 ~ file: index.vue:443 ~ changeBed ~ val:', val);
+  }
 </script>
 
 <style lang="less" scoped>
@@ -422,7 +514,7 @@
     }
   }
 
-  .container {
+  .content {
     display: flex;
     flex-direction: column;
     // max-width: calc(100vw - 430px);
@@ -438,6 +530,15 @@
         z-index: 8;
         padding-bottom: 4px;
       }
+
+      &--edit {
+        width: calc(100vw - 488px);
+        overflow-x: auto;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
     }
 
     &-body {
@@ -607,18 +708,84 @@
     right: 20px;
     min-width: 250px;
     height: calc(100vh - 120px);
+    padding: 14px 0;
     background-color: #fff;
     border-radius: 4px;
     z-index: 9;
 
+    &-tit {
+      padding: 0 20px 14px;
+      font-size: 16px;
+      font-weight: 600;
+      color: #000a18;
+      border-bottom: 1px solid #e1e5ea;
+    }
+
+    &-cnt {
+      height: calc(100vh - 580px);
+      padding: 20px;
+
+      &_detail {
+        height: 100%;
+        overflow-y: auto;
+      }
+
+      &_tit {
+        position: relative;
+        padding-bottom: 10px;
+        padding-left: 6px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #000a18;
+
+        &::after {
+          position: absolute;
+          top: 6px;
+          left: 0;
+          content: '';
+          width: 2px;
+          height: 12px;
+          background: #000a18;
+          border-radius: 1px;
+        }
+      }
+    }
+
+    &-foot {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      padding: 14px 20px;
+      border-top: 1px solid #e1e5ea;
+      display: flex;
+      justify-content: space-between;
+
+      &_btn {
+        width: 45%;
+      }
+    }
+
     &-item {
-      width: 210px;
+      min-width: 210px;
       height: 40px;
       line-height: 40px;
       background: #f4f6f9;
       border-radius: 4px;
       margin-bottom: 10px;
+      padding: 0 12px;
       cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      color: #000a18;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      &_count {
+        font-size: 12px;
+        font-weight: 400;
+        color: #818694;
+      }
 
       &--not {
         background: #effffb;