lis8.0-vue3/src/views/checkCode/index.vue

<template>
  <div class="app-container ">
    <div ref="compactForm">
      <el-row :gutter="10" class="compact-form" v-show="showSearch">
        <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="queryRules">
          <el-form-item label="日期：" prop="failed1">
            <el-date-picker v-model="queryParams.failed1" type="daterange" range-separator="-" start-placeholder="开始时间"
              end-placeholder="结束时间" />
          </el-form-item>

          <el-form-item label="医疗机构：" prop="failed2">
            <el-select v-model="queryParams.failed2" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="条码状态：" prop="failed3">
            <el-select v-model="queryParams.failed3" placeholder="请选择" style="width: 120px;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="failed4">
            <el-select v-model="queryParams.failed4" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="failed5">
            <el-input v-model="queryParams.failed5" clearable placeholder="条件搜索" @keyup.enter="handleQuery"
              @clear="handleQuery" />
          </el-form-item>

          <el-form-item label="">
            <el-button icon="search" type="primary" @click="handleQuery">
              搜索
            </el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>

    </div>

    <el-row :gutter="10">
      <el-col :span="16" class="right-table">
        <div class="title"> 条码生成 </div>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus">生成条码</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Edit">选中所有未打印</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain>打印</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain icon="Upload" @click="openBlock">采样登记</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain @click="openSj">送检登记</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain @click="goReport">报告查询</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain>条码作废</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain>打印机设置</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain>清单打印</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @updateColumns="updateColumns" @queryTable="handleQuery"
            :columns="columns"></right-toolbar>
        </el-row>

        <CustomTable :data="tableData" :columns="columns" :config="tableConfig" :loading="loading">
          <template #tfailed5="{ row }">
            {{ row.tfailed5 }}
          </template>
        </CustomTable>

      </el-col>
      <el-col :span="8" class="right-table">
        <div class="title"> 项目 </div>
        <el-button type="danger" class="mb10">拆分选中项目</el-button>
        <CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig" :loading="loading">
        </CustomTable>
      </el-col>
    </el-row>


    <!-- 采样登记 -->
    <el-dialog v-model="dialogVisible" title="采样登记" draggable :close-on-click-modal="false">
      <div class="flex-between">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-input v-model="queryParams.failed5" clearable placeholder="条形码" @keyup.enter="handleQuery"
              @clear="handleQuery" />
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" plain>读取</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="delete">删除选中行</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain>打印</el-button>
          </el-col>
        </el-row>
        <el-button type="primary" plain>保存</el-button>
      </div>
      <CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig" :loading="loading">
      </CustomTable>

    </el-dialog>
    <!-- 送检登记 -->
    <el-dialog v-model="dialogSjVisible" title="送检登记" draggable :close-on-click-modal="false">
      <div class="flex-between">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-input v-model="queryParams.failed5" clearable placeholder="条形码" @keyup.enter="handleQuery"
              @clear="handleQuery" />
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" plain>读取</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="delete">删除选中行</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain>打印</el-button>
          </el-col>
        </el-row>
        <el-button type="primary" plain>保存</el-button>
      </div>
      <CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig" :loading="loading">
      </CustomTable>

    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRaw, computed, watch, nextTick, onMounted } from 'vue';
import CustomTable from '@/components/tableCom/index.vue'
import { useRouter } from 'vue-router'
// import { download } from '@/api/liswork/dict/LabInstr.js'
const router = useRouter()
const compactForm = ref<HTMLElement | null>(null);
const heightForm = ref(90);
const dialogVisible = ref(false)
const openBlock = () => {
  dialogVisible.value = true
}

const dialogSjVisible = ref(false)
const openSj = () => {
  dialogSjVisible.value = true
}
// 提交表单数据
const queryParams = reactive({
  failed1: [],
  failed2: '',
  failed3: '',
  failed4: '',
  failed5: '',
});
const showSearch = ref(true);
const queryRef = ref()
// 定义校验规则
const queryRules = ref({
  // clientId: [
  //   { required: true, message: '编号不能为空', trigger: 'blur' },

  // ],

  // failed3: [
  //   { required: true, message: '条码状态不能为空', trigger: 'change' },
  // ],
})
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },

]
const handleQuery = async () => {
  const valid = await queryRef.value.validate().catch(() => { });
  if (!valid) return false;
}
// 重置
const resetQuery = () => {
  queryRef.value?.resetFields();
  // download([20221201167817]).then(() => {
  //   console.log('重置成功');
  // }).catch(() => {
  //   console.log('重置失败');
  // });

}

const loading = false;



// 数据源
const tableData = [
  {
    id: 1, tfailed2: '张三', tfailed1: 24, tfailed3: '男', tfailed4: '血常规', tfailed5: '常规检查',
    tfailed6: '无', tfailed7: '否', tfailed8: '血液样本', tfailed9: '1234567890', tfailed10: '内科', tfailed11: 'A1234567890',
    tfailed12: '待处理', tfailed13: '门诊', tfailed14: '王医生', tfailed15: '2023-10-01 10:00', tfailed16: '计价标志', tfailed17: '执行医生', tfailed18: '送检人', tfailed19: '医疗机构'
  },
  {
    id: 2, tfailed2: '李四', tfailed1: 25, tfailed3: '男', tfailed4: '血常规', tfailed5: '常规检查',
    tfailed6: '无', tfailed7: '否', tfailed8: '血液样本', tfailed9: '1234567890', tfailed10: '内科', tfailed11: 'A1234567890',
    tfailed12: '待处理', tfailed13: '门诊', tfailed14: '王医生', tfailed15: '2023-10-01 10:00', tfailed16: '计价标志', tfailed17: '执行医生', tfailed18: '送检人', tfailed19: '医疗机构'
  }
]
// 配置项
const columns = ref([
  { prop: 'tfailed1', label: '床号', visible: true, key: 0, sortable: true, width: '110px' },
  { prop: 'tfailed2', label: '姓名', visible: true, key: 1, width: '110px' },
  { prop: 'tfailed3', label: '性别', align: 'center', visible: true, key: 2, },
  { prop: 'tfailed4', label: '项目名称', align: 'center', visible: true, key: 3, width: '110px' },
  { prop: 'tfailed5', label: '类别', align: 'center', visible: true, key: 4, slot: 'tfailed5', width: '110px' },
  { prop: 'tfailed6', label: '采样提示', align: 'center', visible: true, key: 5, width: '110px' },
  { prop: 'tfailed7', label: '急诊', align: 'center', visible: true, key: 6, width: '110px' },
  { prop: 'tfailed8', label: '样本类型', align: 'center', visible: true, key: 7, width: '110px' },
  { prop: 'tfailed9', label: '病人号', align: 'center', visible: true, key: 8, width: '110px' },
  { prop: 'tfailed10', label: '科室名称', align: 'center', visible: true, key: 9, width: '110px' },
  { prop: 'tfailed11', label: '申请号/条码', align: 'center', visible: true, key: 10, width: '110px' },
  { prop: 'tfailed12', label: '状态', align: 'center', visible: true, key: 11, width: '110px' },
  { prop: 'tfailed13', label: '病人来源', align: 'center', visible: true, key: 12, width: '110px' },
  { prop: 'tfailed14', label: '申请医生', align: 'center', visible: true, key: 13, width: '110px' },
  { prop: 'tfailed15', label: '申请时间', align: 'center', visible: true, key: 14, width: '150px' },
  { prop: 'tfailed16', label: '计价标志', align: 'center', visible: true, key: 15, width: '110px' },
  { prop: 'tfailed17', label: '执行医生', align: 'center', visible: true, key: 16, width: '110px' },
  { prop: 'tfailed18', label: '送检人', align: 'center', visible: true, key: 17, width: '110px' },
  { prop: 'tfailed19', label: '医疗机构', align: 'center', visible: true, key: 18, width: '110px' },
])


// 单元格样式
const cellStyleHd = ({ row, column, rowIndex, columnIndex }: {
  row: any;
  column: any;
  rowIndex: number;
  columnIndex: number;
}) => {
  // console.log(row, column, rowIndex, columnIndex);
  if (row.tfailed5 == "常规检查" && columnIndex == 5) {
    // console.log(row, column, rowIndex, columnIndex);
    return { background: '#f00  !important', color: '#fff' };
  }
};

const rowClassNameHd = ({ row, rowIndex }: {
  row: any;
  rowIndex: number;
}) => {
  return 'custom-row-class'; // 返回自定义类名
};
// 表格配置
const tableConfig = ref({
  // stripe: true, // 斑马纹
  border: false, // 边框
  selection: true, // 多选框
  index: false, // 序号
  height: '100%', // 高度
  highlightCurrentRow: true, // 高亮当前行
  cellStyle: cellStyleHd,
  rowClassName: rowClassNameHd,
  fit: true
})



interface ColumnItem {
  prop: string;
  label: string;
  visible: boolean;
  key: number;
  align: string;
  slot: string;
  width: string;
}
// 更新列
const updateColumns = (arr: Array<ColumnItem>) => {
  columns.value = arr
};



// 右侧数据源
const rightTableData = [
  {
    id: 1, tfailed1: 'P001', tfailed2: '项目A', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
  },
  {
    id: 1, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
  },
]
// 配置项
const rightColumns = ref([
  { prop: 'tfailed1', label: '项目代号', visible: true, key: 0, sortable: true, width: '110px' },
  { prop: 'tfailed2', label: '项目名称', visible: true, key: 1 },
  { prop: 'tfailed3', label: '单价', align: 'center', visible: true, key: 2 },
  { prop: 'tfailed4', label: '数量', align: 'center', visible: true, key: 3 },
  { prop: 'tfailed5', label: '状态', align: 'center', visible: true, key: 4 },
  { prop: 'tfailed6', label: '计价标志', align: 'center', visible: true, key: 5 },

])
// 表格配置
const rightTableConfig = ref({
  // stripe: true, // 斑马纹
  border: false, // 边框
  selection: true, // 多选框
  index: false, // 序号
  height: '100%', // 高度
  highlightCurrentRow: true, // 高亮当前行
})


const goReport = () => {
  // 跳转到报告查询页面
  router.push('/report')
};


onMounted(() => {
  adjustTableHeight();

});

// 计算table高度
watch(showSearch, () => {
  nextTick(() => {
    adjustTableHeight();
  })
}, { immediate: true });

function adjustTableHeight() {
  if (compactForm.value) {
    // 获取高度
    heightForm.value = compactForm.value.offsetHeight;
    tableConfig.value.height = `calc(75vh - ${heightForm.value}px)`; // 设置表格容器的高度
    rightTableConfig.value.height = `calc(75vh - ${heightForm.value}px)`; // 设置表格容器的高度
  }
}
</script>

<style scoped lang="scss">
.custom-row-class {
  background-color: #c6c3ff !important;
  /* 设置行背景色 */
}

.right-table {
  border: 1px solid #dcdfe6;
}

.title {
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 10px;
  padding: 10px;
  font-weight: 700;
}
</style>