guochanhua/jcjyhr/web/src/views/backend/hospital/hrpatient/myTable.vue

<template>
    <div class="ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
        <TableHeader
            from="hrMyTable"
            :buttons="['comSearch']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('hospital.hrpatient.quick Search Fields') })"
        >

          <el-tooltip v-if="baTable.auth('getMyHrpatientDetails')" :content="t('View detailed information')" placement="top">
              <el-button v-blur @click="onDetail()" :color="'var(--ba-vars-color-main-primary)'" :disabled="baTable.table.selection!.length > 0 ? false : true" class="table-header-operate view-detail" type="primary">
                  <span class="table-header-operate-text">{{ t('View detailed information') }}</span>
              </el-button>
          </el-tooltip>
        </TableHeader>

        <!-- 表格 -->
        <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
        <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
        <Table ref="tableRef" highlight-current-row></Table>

        <!-- 表单 -->
        <!-- <PopupForm /> -->
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref, watch, inject } from 'vue'
import { useI18n } from 'vue-i18n'
import { baTableApi } from '/@/api/common'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import { FormatUtil } from '/@/utils/format'
import {useLocalSelect} from '/@/stores/localSelect'
import { routePush } from '/@/utils/router'
import { useRoute } from 'vue-router'
import { useAdminInfo } from '/@/stores/adminInfo'
const { t } = useI18n()
const tableRef = ref()
const localSelect = useLocalSelect()
const route = useRoute()
const adminInfo = useAdminInfo()
/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/hospital.Hrpatient/'),
    {

        comSearchSort: true,
        filter: {
            'hospital_type': 'my'
        },
        showComSearch: false,
        column: [
            { fixed: true, label: t('hospital.hrpatient.index'), type: 'index', width: 52, align: 'center', operator: false },
            { fixed: true, comSearchWeight: 60, showOverflowTooltip: true, label: t('hospital.hrpatient.MPI'), prop: 'MPI', align: 'center', operatorPlaceholder: t('Accurate query'), operator: 'eq', sortable: 'custom', width: 120 },
            // { label: t('Serial number'), type: 'index', width: 70, align: 'center', operator: false },
            // { showOverflowTooltip: true, label: t('hospital.hrpatient.MPI'), prop: 'MPI', align: 'center', operator: 'LIKE', sortable: 'custom', },
            { fixed: true, operator: false, showOverflowTooltip: true, label: t('hospital.hrpatient.ENCOUNTER_DATE'), prop: 'ENCOUNTER_DATE', align: 'center', render: 'datetime', sortable: 'custom', width: 130, timeFormat: 'yyyy-mm-dd hh:MM' },
            { fixed: true, comSearchWeight: 100, comSearchLabel: t('hospital.hrpatient.Search_NAME'), showOverflowTooltip: true, label: t('hospital.hrpatient.NAME'), prop: 'NAME', align: 'center', operatorPlaceholder: t('Accurate query'), operator: 'eq', sortable: 'custom'},
            // {
            //     show: false,
            //     comSearchWeight: 90,
            //     label: t('hospital.hrpatient.status'),
            //     prop: 'status',
            //     render: 'tag',
            //     align: 'center',
            //     replaceValue: { '0': ' ', '1': '互认', '2': '不互认'},
            // },

            {
                fixed: true,
                show: false,
                comSearchWeight: 90,
                label: t('hospital.hrpatient.status'),
                prop: 'status',
                // render: 'tag',
                align: 'center',
                comSearchRender: 'localSelect',
                local: localSelect.HR_STATUS_LIST,
                // replaceValue: { '0': ' ', '1': '互认', '2': '不互认'},
            },
            
            { fixed: true, showOverflowTooltip: true, label: t('hospital.hrpatient.GENDER'), prop: 'GENDER', align: 'center', 
                operator: false, sortable: 'custom',
                // comSearchRender: 'localSelect',
                // local: localSelect.GENDER_LIST,
                // comSearchRender: 'remoteSelect', remote: {
                //     // TODO 后期看看需不需要传ID服务端做对应调整
                //     pk: "name",
                //     field: "name",
                //     params: {},
                //     multiple: true,
                //     remoteUrl: '/admin/option/getGENDERList',
                // }
            }, 
            {show: false, comSearchWeight: 80, showOverflowTooltip: true, label: t('hospital.hrpatient.AGE'), prop: 'AGE_DAY', align: 'center', operator: 'RANGE', sortable: 'custom',
                formatter: function(row, column, cellValue) {
                    return FormatUtil.AGE.display(cellValue)
                }
            },
            { fixed: true, comSearchWeight: 80, showOverflowTooltip: true, label: t('hospital.hrpatient.AGE'), prop: 'AGE', align: 'center', operator: false, sortable: 'custom',
                formatter: function(row, column, cellValue) {
                    return FormatUtil.AGE.display(cellValue)
                } 
            },
            { fixed: true, comSearchWeight: 70, showOverflowTooltip: true, label: t('hospital.hrpatient.ID_CARDNUM'), prop: 'ID_CARDNUM', align: 'center', operatorPlaceholder: t('Accurate query'), operator: 'eq', sortable: false, width: 90 },
            // { showOverflowTooltip: true, label: t('hospital.hrpatient.CHIEFCOMPLAINT'), prop: 'CHIEFCOMPLAINT', align: 'center', operator: 'LIKE', sortable: 'custom', },
            { fixed: true, comSearchWeight: 50, showOverflowTooltip: true, label: t('hospital.hrpatient.DIAGNOSENAME'), prop: 'DIAGNOSENAME', align: 'center', operator: 'LIKE', sortable: false, width: 150 },
            { comSearchWeight: 20, comSearchLabel: t('hospital.hrpatient.Search_LAB_ITEMNAME'), showOverflowTooltip: true, label: t('hospital.hrpatient.LAB_ITEMNAME'), prop: 'LAB_ITEMNAME', width: 130, align: 'center', operator: 'LIKE', sortable: false, },
            { comSearchWeight: 10, comSearchLabel: t('hospital.hrpatient.Search_EXAM_ITEMNAME'), showOverflowTooltip: true, label: t('hospital.hrpatient.EXAM_ITEMNAME'), prop: 'EXAM_ITEMNAME', width: 130, align: 'center', operator: 'LIKE', sortable: false, },
            { comSearchWeight: 30, comSearchLabel: t('hospital.hrpatient.Search_create_time'), showOverflowTooltip: true, label: t('hospital.hrpatient.create_time'), prop: 'create_time', align: 'center', render: 'datetime', operator: 'RANGE', sortable: 'custom', width: 130, timeFormat: 'yyyy-mm-dd hh:MM' },
            { comSearchWeight: 110, comSearchLabel: t('hospital.hrpatient.Search_MY_ORGNAME'), show: false, showOverflowTooltip: true, label: t('hospital.hrpatient.MY_ORGNAME'), prop: 'ORGCODE', align: 'center', operator: 'IN', 
                filterable: true,
                comSearchRender: 'localSelect',
                local: localSelect.INS_NAME_LIST,
                localExt: {
                    clearable: false,
                },
                width: 125,
                formatter(row, column, cellValue, index) {
                    return row.ORGNAME
                },
                // comSearchRender: 'remoteSelect', remote: {
                //     // TODO 后期看看需不需要传ID服务端做对应调整
                //     pk: "name",
                //     field: "name",
                //     params: {},
                //     multiple: true,
                //     remoteUrl: '/admin/option/getInsList',
                // }
            },
            { comSearchWeight: 40, comSearchLabel: t('hospital.hrpatient.Search_MY_HRORGNAME'), showOverflowTooltip: true, label: t('hospital.hrpatient.MY_HRORGNAME'), prop: 'HRORGNAME', width: 100, align: 'center',
                operator: 'LIKE'
                // operator: 'IN', 
                // comSearchRender: 'remoteSelect', remote: {
                //     // TODO 后期看看需不需要传ID服务端做对应调整
                //     pk: "name",
                //     field: "name",
                //     params: {},
                //     multiple: true,
                //     remoteUrl: '/admin/option/getInsList',
                // }
            },
        ],
        dblClickNotEditColumn: [undefined],
        defaultOrder: { prop: 'create_time', order: 'desc' },
    },
    {
        defaultItems: { ORGNAME: null, HRORGNAME: null, NAME: null, GENDER: null, AGE: null, ID_CARDNUM: null, MPI: null, ENCOUNTER_DATE: null, CHIEFCOMPLAINT: null, DIAGNOSENAME: null, LAB_ITEMNAME: null, EXAM_ITEMNAME: null },
    },
    {
        onTableHeaderAction: function({ data }) {
            if(!data || !(data.data instanceof Array)) {
                return true
            }
            for(const item of data?.data) {
                // console.log('item.field', item.field)
                // if(item.field == 'GENDER') {
                //     item.field = 'GENDER_CODE'
                // }
                if(item?.field == 'AGE') {
                    item.val =  FormatUtil.AGE.search(item.val)
                }
            }
            return true;
        }
    }
)
provide('baTable', baTable)
const onDetail = () => {
    const selecttion: any = baTable.table.selection
    const HR_CODE = selecttion[selecttion.length-1].HR_CODE
    routePush('/admin/hospital/hrpatient/myDetail?CODE=' + HR_CODE)
}
const showComSearchHandle = () => {
    baTable.table.showComSearch = !baTable.table.showComSearch
}
defineExpose({
    showComSearchHandle
});
const updateBaTable = inject('updateBaTable') as any

onMounted(async() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    await localSelect.initLISTS([localSelect._KEY.INS_NAME_LIST])
    baTable.comSearch.form['ORGNAME'] =  route.query.name ? route.query.name : adminInfo.institution
    if(baTable.onComSearch) {
        baTable.onComSearch()
        updateBaTable(baTable)
    }
    // baTable.form['ORGNAME']
    // baTable.getIndex()?.then(() => {
    //     baTable.initSort()
    //     baTable.dragSort()
    // })
})
watch(
    () => route.query.name,
    (newVal) => {
        setTimeout(() => {
            baTable.comSearch.form['ORGNAME'] =  newVal ? newVal : adminInfo.institution
        }, 100);
    },
    {deep: true}
)

</script>

<style scoped lang="scss">
.view-detail {
  position: fixed;
  top: 58px;
}
</style>