lis8.0-vue3/src/views/liswork/components/combination/index.vue

<template>
  <div class="bination_box">
    <CustomTable ref="tableRef" :data="tableData" :columns="columns" :config="tableConfig"
      @row-dblclick="handleRowDblclick">
      <template #lxsr="{ row }">
        <el-checkbox v-model="row.lxsr" @change="changeLxsr(row)" />
      </template>
      <template #zdsr="{ row }">
        <el-checkbox :model-value="row.zdsr == 'Y'" readonly />
      </template>
    </CustomTable>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, toRefs, onMounted, computed } from 'vue'
import { inputmdl } from "@/api/liswork/work/LisWork";
import CustomTable from '@/components/elTable/index.vue'
import emitter from '@/utils/mitt'
import { useCommonStore } from '@/store/modules/commonStore';
const props = defineProps({
  // 主键
  queryParams: {
    type: Object,
    default: {}
  },
})
const mbStore = useCommonStore();
const { queryParams } = toRefs(props);
const tableData: any = ref([])
const columns = ref([
  { prop: 'mbmc', label: '批输入模板', visible: true, align: 'center', },
  { prop: 'yblx', label: '标本类型', visible: true, align: 'center', width: 80 },
  { prop: 'lxsr', label: '连续输入', visible: true, align: 'center', width: 80, slot: 'lxsr' },
  { prop: 'zdsr', label: '自动输入', visible: true, align: 'center', width: 80, slot: 'zdsr' },
  { prop: 'qsybh', label: '自动起始号', visible: true, align: 'center', width: 100 },
  { prop: 'jsybh', label: '自动结束号', visible: true, align: 'center', width: 100 },
  { prop: 'srbh', label: '输入编号', visible: true, align: 'center', width: 100 },
])

// 左侧表格配置
const tableConfig = ref({
  border: true, // 边框
  height: '', // 高度
  highlightCurrentRow: true, // 高亮当前行
})
const getCombination = () => {
  inputmdl(queryParams.value).then((res: any) => {
    if (res.code == 0) {
      tableData.value = res.data?.map((item: any) => {
        return {
          ...item,
          lxsr: mbStore.lxsrs.includes(item.mbmc) ? true : false,
        }
      })
    }
  })
};
watch(() => props.queryParams.yq, (newValue) => {
  getCombination()
}, { immediate: true })

const changeLxsr = (row: any) => {
  const lxsrs = tableData.value.filter((item: any) => item.lxsr).map((item: any) => item.mbmc);
  mbStore.setLxsrList(lxsrs);
}

const handleRowDblclick = (row: any) => {
  emitter.emit('dbMbHandle', row);
}

const clearLxsr = () => {
  tableData.value = tableData.value.map((item: any) => {
    return {
      ...item,
      lxsr: false,
    }
  })
  mbStore.setLxsrList([]);
}

onMounted(() => {
  // 模板渲染清楚标记
  emitter.on('clearLxsrList', () => {
    clearLxsr()
  })
})

</script>

<style scoped lang="scss">
.bination_box {
  height: 82vh;
  overflow-y: auto;
}
</style>