web_dist/src/views/hospitalization/zhu-yuan-yi-sheng/shou-shu-shen-qing/src/components/AddShouShuTable.vue

<script setup lang="ts">
import {useVModel} from "@vueuse/core";
import XEUtils from "xe-utils";
import {nextTick, onMounted, Ref, ref} from 'vue'
import XcComboGridV2 from "@/components/xiao-chan/combo-grid/XcComboGridV2.vue";
import {windowSizeStore} from "@/utils/store-public";
import {useCompRef} from "@/utils/useCompRef";
import {ElTable} from "element-plus";
// @ts-ignore
import Sortable from 'sortablejs';

const props = defineProps({
  data: Array,
  title: String,
  queryFunction: Function,
  queryData: Array
})
const emits = defineEmits(['update:data', 'update:queryData', 'changeList'])
const modelData = useVModel(props, 'data', emits) as Ref<any[]>
const queryDayaModel = useVModel(props, 'queryData', emits) as Ref<any[]>
const temp = ref({})

const findIndex = (arr: any[], name: string, value: string) => {
  return XEUtils.findIndexOf(arr, item => {
    return item[name] === value;
  })
}

const delClock = (index) => {
  modelData.value.splice(index, 1)
  emits('changeList')
}

const rowClick = (row) => {
  const index = findIndex(modelData.value, 'code', row.code)
  if (index > -1) {
    delClock(index);
  } else {
    modelData.value.push({
      code: row.code,
      name: row.name,
      opScale: row.opScale
    })
  }
  emits('changeList')
}

const tableRef = useCompRef(ElTable)

const initSortable = () => {
  const el = tableRef.value.$el.querySelector('tbody')
  const opt = {
    animation: 200,
    handle: '.el-table__row',
    onEnd({newIndex, oldIndex}) {
      const currRow = modelData.value.splice(oldIndex, 1)[0]
      modelData.value.splice(newIndex, 0, currRow)
      emits('changeList')
    }
  }
  Sortable.create(el, opt)
}

onMounted(async () => {
  await nextTick()
  initSortable();
})
</script>

<template>
  {{ props.title }}
  <br/>
  <el-table :data="props.data"
            row-key="code"
            ref="tableRef"
            :max-height="windowSizeStore.h  / 1.2 - 20">
    <el-table-column :label="`${props.title}名称`" prop="name">
      <template #default="{row,$index}">
        <span class="ss_text" :class="$index ===0? 'main' : 'secondary'">
          {{ $index === 0 ? '主' : '次' }}
        </span>
        {{ row.name }}
      </template>
    </el-table-column>
    <el-table-column>
      <template #default="{$index}">
        <el-button type="danger" @click="delClock($index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <XcComboGridV2 v-model="temp"
                 code-name="aa"
                 :row-click-hide="false"
                 @rowClick="rowClick"
                 v-model:data="queryDayaModel"
                 :query-data-func="props.queryFunction"/>
</template>

<style>

.ss_text {
  padding: 3px;
  border-radius: 5px;
  margin-right: 5px;

  &.main {
    background: red;
  }

  &.secondary {
    background: #8f8787;
  }
}

</style>