lis8.0-vue3/src/views/liswork/work/charge/index.vue

<!-- 收费项目列表 -->
<template>
  <div class="charge_box">
    <CustomTable ref="tableRef" :data="tableData" :columns="columns" :config="tableConfig" @row-click="rowHandle"
      :enableColumnDrag="true" @column-drag-end="handleColumnDragEnd">
      <template #jjzt="{ row }">
        <el-checkbox v-model="row.jjzt" true-value="1" disabled />
      </template>
      <template #zt="{ row }">
        {{ formatDict(row.zt, 'ST') }}
      </template>
      <template #sqys="{ row }">
        {{ formatDict(row.sqys, 'SRD') }}
      </template>
      <template #ksdh="{ row }">
        {{ formatDict(row.ksdh, 'DP') }}
      </template>
      <template #jsys="{ row }">
        {{ formatys(row.jsys) }}
      </template>
    </CustomTable>
    <el-table :data="bottomTableData" style="width: 100%" highlight-current-row border height="39vh" class="mt10"
      show-summary :summary-method="getSummaries" sum-text="项目数">
      <el-table-column prop="xmdh" label="报告项目" fixed align="center" />
      <el-table-column prop="xmmc" label="项目名称" fixed align="center" />
      <el-table-column prop="tdh" label="双工代号" fixed align="center" />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, watch, computed, onMounted, nextTick } from "vue";
// @ts-ignore
import { listUser } from '@/api/system/user.js'
import { reqdetail, reqdetailmx } from '@/api/liswork/work/LisWork'
import CustomTable from '@/components/elTable/index.vue'

const props = defineProps({
  // 主键
  queryParams: {
    type: Object,
    default: {}
  },
  dictData: {
    type: Object,
    default: () => { }
  },

})

watch(() => props.queryParams, (newValue) => {
  console.log('==>', newValue);
  nextTick(() => {
    getInfoList()
  })
}, { immediate: true })

// 解构 props
const { queryParams, dictData, } = toRefs(props);

const tableRef = ref()
const tableData = ref([])
const columns = ref([
  { prop: 'sqxmmc', label: '项目名称', align: 'center', width: 120, visible: true, },
  { prop: 'dj', label: '单价', align: 'center', visible: true, width: 100, },
  { prop: 'sl', label: '数量', align: 'center', visible: true, width: 60, },
  { prop: 'jjzt', label: '计价', align: 'center', visible: true, width: 60, slot: 'jjzt' },
  { prop: 'zt', label: '状态', align: 'center', visible: true, width: 60, slot: 'zt' },
  { prop: 'sqxmdh', label: '项目代号', align: 'center', visible: true, width: 120, },
  { prop: 'sqh', label: '申请号', align: 'center', visible: true, width: 120, },
  { type: 'index', label: '序号', align: 'center', visible: true, width: 60, },
  { prop: 'ksdh', label: '申请科室', align: 'center', visible: true, width: 120, slot: 'ksdh' },
  { prop: 'sqys', label: '申请医生', align: 'center', visible: true, slot: 'sqys' },
  { prop: 'sqsj', label: '申请时间', align: 'center', visible: true, width: 120, },
  { prop: 'jsys', label: '接受医生', align: 'center', visible: true, slot: 'jsys' },
  { prop: 'jssj', label: '接收时间', align: 'center', visible: true, width: 120, },
  { prop: 'brly', label: '病人来源', align: 'center', visible: true, },
  { prop: 'brdh', label: '病人编号', align: 'center', visible: true, },
  { prop: 'brxm', label: '病人姓名', align: 'center', visible: true, },
  { prop: 'bz1', label: '备注1', align: 'center', visible: true, },
  { prop: 'bz2', label: '备注2', align: 'center', visible: true, },
])
const tableConfig = ref({
  border: true, // 边框
  height: '40vh', // 高度
  highlightCurrentRow: true, // 高亮当前行
  summary: true,
  summaryField: ['dj'],//计算列总和
  sumText: '合计'
  // cellStyle: cellStyleHd
})


const bottomTableData = ref([])
const getInfoList = () => {
  reqdetail(queryParams.value).then((res: any) => {
    tableData.value = res.data
    if (res.data.length > 0) {
      nextTick(() => {
        tableRef.value?.setCurrentRow(res.data[0])
      })
      getMxInfo(res.data[0])
    }

  })
}

const getMxInfo = (row: any) => {
  const data = {
    yq: queryParams.value.yq,
    sqxmdh: row.sqxmdh
  }
  reqdetailmx(data).then((res: any) => {
    bottomTableData.value = res.data
  })
}

const userList = ref<{ [key: string]: any }>([])
onMounted(() => {
  const data = { status: 0, del_flag: 0, pageSize: 1000, pageNum: 1 }
  listUser(data).then((res: any) => {
    userList.value = res.rows;
  });
  // getInfoList()
})


const rowHandle = (row: any) => {
  console.log(row)
  getMxInfo(row)
}

const handleColumnDragEnd = (data: any) => {
  // 更新列配置
  columns.value = data.columns;
};

const formatDict = (v: string, dictType: string) => {
  return dictData.value[dictType]?.find((item: any) => item.value == v)?.label
}
const formatys = (v: string) => {
  return userList.value.find((item: any) => item.userName == v)?.nickName
}

const getSummaries = ({ columns, data }: { columns: any, data: any }) => {
  const summaries = columns.map(() => '');
  summaries[0] = '项目数';
  summaries[1] = bottomTableData.value.length;
  return summaries;
}
</script>

<style scoped lang="scss">
.charge_box {
  :deep(.el-table__cell) {
    padding: 0 !important;
  }
}
</style>