Merge branch 'table'

src/components/xiao-chan/select-v2/XcSelectV2.vue

@@ -1,134 +0,0 @@
-<template>
-  <div class="xc-select-v3__main">
-    <div>
-      <el-input ref="inputRef" @focus="focus" @blur="blur"/>
-    </div>
-    <div class="xc-select-v3-ui__main">
-      <el-scrollbar @scroll="scroll">
-        <div
-            v-show="isShow"
-            :style="{
-              height:virtualizationHeight
-            }">
-          <ul :style="{transform: `translateY(${translateY})`}">
-            <li v-for="(item,index) in tempData"
-                :title="item.name"
-                @mouseover="mouseover($event)">
-              <slot name="defalut" :item="item" v-if="isSlot"/>
-              <span v-else>
-                {{ item.name }}
-              </span>
-
-            </li>
-          </ul>
-        </div>
-      </el-scrollbar>
-    </div>
-  </div>
-</template>
-
-<script setup name='XcSelectV2' lang="ts">
-import {ref, watch,  nextTick, computed, onMounted, useSlots} from 'vue'
-import {Ref} from "vue";
-
-const props = defineProps({
-  data: {
-    type: Array,
-    default: []
-  }
-})
-
-const inputRef: Ref<HTMLElement> = ref({})
-const isShow = ref(true)
-const virtualizationHeight = ref('400px')
-const itemHeight = 34
-const startIndex = ref(0)
-const displayNumber = ref(10)
-const translateY = ref('0px')
-const isSlot = ref(false)
-
-const focus = () => {
-  isShow.value = true
-}
-
-const blur = () => {
-  // isShow.value = false
-}
-
-const mouseover = (e) => {
-  // console.log(e)
-}
-
-const tempData = computed(() => {
-  return props.data.slice(startIndex.value, startIndex.value + displayNumber.value)
-})
-
-const scroll = ({scrollTop}) => {
-  translateY.value = scrollTop + 'px'
-  startIndex.value = Math.floor(scrollTop / itemHeight)
-}
-
-
-watch(() => props.data, async () => {
-  await nextTick()
-  virtualizationHeight.value = props.data.length * itemHeight + 'px'
-}, {immediate: true})
-
-const node = ref(null)
-onMounted(() => {
-  try {
-    isSlot.value = !!useSlots().defalut;
-  } catch (e) {
-    console.error(e)
-  }
-})
-
-</script>
-
-<style scoped lang="scss">
-.xc-select-v3__main {
-  width: max-content;
-  position: absolute;
-}
-
-.xc-select-v3-ui__main {
-  overflow: hidden;
-  background-color: white;
-  color: black;
-  height: 170px;
-  position: relative;
-  top: 4px;
-
-  .xc-select-v3__list {
-    position: relative;
-    will-change: transform;
-    direction: ltr;
-    height: 100%;
-    width: 214px;
-    list-style: none;
-    padding: 6px 0;
-    margin: 0;
-    box-sizing: border-box;
-  }
-
-  li {
-    padding: 0 32px 0 20px;
-    position: relative;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: #606266;
-    height: 34px;
-    line-height: 34px;
-    box-sizing: border-box;
-    cursor: pointer;
-  }
-
-  .option_hover {
-    background-color: #f5f7fa !important;
-  }
-
-}
-
-
-</style>

src/components/xiao-chan/select/XcSelect.vue

@@ -1,22 +1,26 @@
 <template>
   <el-select
-    v-model="modelObj"
+    :model-value="props.modelValue[props.name[0]]"
+    @update:model-value="
+      value => {
+        changeStaff(value);
+      }
+    "
     :clearable="props.clearable"
     :remote="props.remote"
     :id="props.id"
     :remote-method="xcMethod"
-    :style="{ width: props.width + 'px' }"
+    :style="{ width: XEUtils.addUnit(props.width) }"
     ref="selectRef"
     filterable
-    @change="el => changeStaff(el)"
     @clear="clear"
     @focus="getFocus"
   >
     <el-option
       v-for="(item, index) in props.data"
-      :key="item.index"
-      :label="item.name"
-      :value="item.code"
+      :key="`${uuid + index}`"
+      :value="item[props.keys[0]]"
+      :label="item[props.keys[1]]"
     >
       <template
         v-for="(opitem, index) in optionList"
@@ -26,9 +30,9 @@
         <span :style="opitem.style">{{ item[opitem.label] }}</span>
       </template>
       <template v-else>
-        <span>{{ item.code }}</span>
+        <span>{{ item[props.keys[0]] }}</span>
         <el-divider direction="vertical"></el-divider>
-        <span>{{ item.name }}</span>
+        <span>{{ item[props.keys[1]] }}</span>
       </template>
     </el-option>
   </el-select>
@@ -37,9 +41,10 @@
 <script setup>
 import { debounce } from "@/utils/debounce";
 import { stringNotBlank } from "@/utils/blank-utils";
-import { onMounted, watch } from "vue";
+import { onMounted, watch, useId } from "vue";
 import useCompRef from "@/utils/useCompRef";
 import { ElSelect } from "element-plus";
+import XEUtils from "xe-utils";
 
 const props = defineProps({
   modelValue: {
@@ -50,7 +55,7 @@ const props = defineProps({
     default: ["code", "name"],
   },
   width: {
-    type: Number,
+    type: [Number, String],
     default: 120,
   },
   data: {
@@ -68,10 +73,15 @@ const props = defineProps({
   id: {
     type: String,
   },
+  keys: {
+    type: Array,
+    default: ["code", "name"],
+  },
 });
 
 const emit = defineEmits(["method", "change", "focus"]);
 
+const uuid = useId();
 const modelObj = ref(null);
 const selectRef = useCompRef(ElSelect);
 const optionList = ref([]);
@@ -83,20 +93,14 @@ const colorList = {
   warning: "#E6A23C",
 };
 
-const changeStaff = el => {
-  nextTick(() => {
-    props.modelValue[props.name[0]] = el;
-    props.modelValue[props.name[1]] =
-      selectRef.value?.states.selected?.currentLabel;
-  });
-  emit(
-    "change",
-    props.data.find(i => i.code === modelObj.value)
-  );
+const changeStaff = value => {
+  const find = props.data.find(i => i.code === value);
+  props.modelValue[props.name[0]] = find[props.keys[0]];
+  props.modelValue[props.name[1]] = find[props.keys[1]];
+  emit("change", find);
 };
 
 const clear = () => {
-  modelObj.value = null;
   props.modelValue[props.name[0]] = null;
   props.modelValue[props.name[1]] = null;
 };
@@ -150,10 +154,9 @@ const blur = () => {
 defineExpose({ focus, blur });
 
 onMounted(() => {
-  nextTick(() => {
-    modelObj.value = props.modelValue[props.name[0]];
-  });
-
+  // nextTick(() => {
+  //   modelObj.value = props.modelValue[props.name[0]];
+  // });
   // 判断组件是否使用了 slot
   if (!!useSlots().default) {
     // 判断 slot 有没有想要的值
@@ -179,5 +182,3 @@ onMounted(() => {
   }
 });
 </script>
-
-<style scoped></style>

src/utils/list-utlis.ts

@@ -1,36 +1,43 @@
 import XEUtils from "xe-utils";
 
 export function ArrayIsEqual(arr1: any[], arr2: any[]) {
-    return JSON.stringify(arr1) === JSON.stringify(arr2);
+  return JSON.stringify(arr1) === JSON.stringify(arr2);
 }
 
 const isEnglish = (str: string) => {
-    return /^[a-zA-Z]+$/.test(str);
-}
+  return /^[a-zA-Z]+$/.test(str);
+};
 
-export const notNullAndLike = (data: any, likeValue: string, keyName: string[] = ['pyCode', 'dcode', 'code', 'name', 'value', 'label']) => {
-    for (let i = 0; i < keyName.length; i++) {
-        let itemKey = keyName[i];
-        let tempVal = data[itemKey]
-        if (isEnglish(likeValue)) {
-            likeValue = likeValue.toUpperCase();
-        }
-        if (tempVal) {
-            try {
-                // 去除前后空格
-                tempVal = XEUtils.trim(tempVal)
-                if (tempVal.indexOf(likeValue) > -1) {
-                    return true
-                }
-            } catch {
-            }
+export const notNullAndLike = (
+  data: any,
+  likeValue: string,
+  keyName: string[] = ["pyCode", "dcode", "code", "name", "value", "label"]
+) => {
+  for (let i = 0; i < keyName.length; i++) {
+    let itemKey = keyName[i];
+    let tempVal = data[itemKey];
+    if (isEnglish(likeValue)) {
+      likeValue = likeValue.toUpperCase();
+    }
+    if (tempVal) {
+      try {
+        // 去除前后空格
+        tempVal = XEUtils.trim(tempVal);
+        if (tempVal.indexOf(likeValue) > -1) {
+          return true;
         }
+      } catch {}
     }
-    return false
-}
+  }
+  return false;
+};
 
-export function listFilter(data: any[], likeValue: string, keyName: string[] = ['pyCode', 'dcode', 'code', 'name', 'value', 'label']) {
-    return XEUtils.filter(data, (item) => {
-        return notNullAndLike(item, likeValue, keyName)
-    });
+export function listFilter(
+  data: any[],
+  likeValue: string,
+  keyName: string[] = ["pyCode", "dcode", "code", "name", "value", "label"]
+) {
+  return XEUtils.filter(data, item => {
+    return notNullAndLike(item, likeValue, keyName);
+  });
 }

src/views/dictionary/orderZdMaintain/components/supply-type/index.vue

@@ -7,7 +7,6 @@ import {
   updateSupplyType,
   YzSupplyTypeDTO,
 } from "@/api/orderZdMaintain";
-import XcElOption from "@/components/xiao-chan/xc-el-option/XcElOption.vue";
 import XEUtils from "xe-utils";
 import { VxeTablePropTypes } from "vxe-table";
 import { useVxeTableRef } from "@/utils/useCompRef";
@@ -15,6 +14,7 @@ import { xcMessage } from "@/utils/xiaochan-element-plus";
 import { getPyCode } from "@/api/inpatient/xiang-mu-lu-ru";
 import { useDialog } from "@/components/cy/CyDialog/index";
 import BindChargeDialog from "./BindChargeDialog.vue";
+import XcSelect from "@/components/xiao-chan/select/XcSelect.vue";
 
 const store = reactive({
   supplyClass: [],
@@ -110,11 +110,14 @@ async function handleSave() {
   const errMap = await tableRef.value.validate(false);
   if (errMap) {
     xcMessage.error("请检查错误位置");
+    return;
   }
 
   const insert = tableRef.value.getInsertRecords();
   const update = tableRef.value.getUpdateRecords();
 
+  console.log(insert, update);
+
   insert.forEach(item => {
     insertSupplyType(item).catch(res => {});
   });
@@ -158,6 +161,7 @@ onMounted(() => {
     store.supplyClass = res;
   });
   handleGetData();
+  console.log(store);
 });
 </script>
 
@@ -182,6 +186,8 @@ onMounted(() => {
           trigger: 'click',
           autoClear: false,
           showStatus: true,
+          showUpdateStatus: true,
+          showInsertStatus: true,
         }"
       >
         <vxe-column field="delFlag" title="停用" width="50">
@@ -213,10 +219,14 @@ onMounted(() => {
           width="100"
           :edit-render="{}"
         >
-          <template #edit="{ row }">
-            <el-select v-model="row.classs">
-              <xc-el-option :data="store.supplyClass" />
-            </el-select>
+          <template #edit="params">
+            <xc-select
+              width="100%"
+              v-model="params.row"
+              :name="['classs', 'classsName']"
+              :data="store.supplyClass"
+            >
+            </xc-select>
           </template>
         </vxe-column>
 
@@ -231,52 +241,40 @@ onMounted(() => {
           title="子给药方式"
           :edit-render="{}"
         >
-          <template #edit="{ row }">
-            <el-select v-model="row.supplyChild">
-              <xc-el-option :data="store.supplyChild" />
-            </el-select>
+          <template #edit="params">
+            <xc-select
+              width="100%"
+              v-model="params.row"
+              :name="['supplyChild', 'supplyChildName']"
+              :data="store.supplyChild"
+            >
+            </xc-select>
           </template>
         </vxe-column>
 
         <vxe-column field="selfBuyName" title="医嘱标志" :edit-render="{}">
-          <template #edit="{ row }">
-            <el-select
+          <template #edit="params">
+            <xc-select
               clearable
-              @clear="
-                () => {
-                  row.selfBuy = null;
-                }
-              "
-              :model-value="row.selfBuy"
-              @update:model-value="
-                val => {
-                  row.selfBuy = val;
-                }
-              "
+              width="100%"
+              v-model="params.row"
+              :name="['selfBuy', 'selfBuyName']"
+              :data="selfBuys"
             >
-              <xc-el-option :data="selfBuys" />
-            </el-select>
+            </xc-select>
           </template>
         </vxe-column>
 
         <vxe-column field="psFlagName" title="皮试标志" :edit-render="{}">
-          <template #edit="{ row }">
-            <el-select
+          <template #edit="params">
+            <xc-select
               clearable
-              @clear="
-                () => {
-                  row.psFlag = null;
-                }
-              "
-              :model-value="row.psFlag"
-              @update:model-value="
-                val => {
-                  row.psFlag = val;
-                }
-              "
+              width="100%"
+              v-model="params.row"
+              :name="['psFlag', 'psFlagName']"
+              :data="psFlags"
             >
-              <xc-el-option :data="psFlags" />
-            </el-select>
+            </xc-select>
           </template>
         </vxe-column>