项目部位维护

wwl

2025-05-23 cf5c251714eb8574518777063afa339f95dcbda6

 src/views/hosp/biaoben/index.vue

@@ -1,123 +1,320 @@
<template>
    <div class="app-container">

        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
    <el-row :gutter="24">
      <!-- 第一列：单选标本 -->
      <el-col :span="8" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="68px"
          style="height: 45px"
          @submit.native.prevent
        >
            <el-form-item label="项目名称" prop="tjh">
                <el-input v-model="queryParams.tjh" placeholder="请输入项目名称" clearable />
            <el-input
              v-model="queryParams.tjh"
              placeholder="请输入项目名称"
              clearable
              @keyup.enter.native="handleManual"
            />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="handleManual">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table border v-loading="loading" :data="partList" height="350">

        <!-- 标本单选表格（带多选框样式） -->
        <el-table
          border
          v-loading="loading"
          :data="filteredSpecimenData"
          height="478"
          style="width: 100%"
          ref="specimenTable"
          :row-key="row => row.value"
          @select="handleSpecimenSelect"
        >
            <el-table-column type="selection" width="40px" align="center" />
            <el-table-column label="序号" align="center" prop="newID" width="50px" />
            <el-table-column label="项目名称" align="center" prop="groupingName" />
          <el-table-column label="序号" align="center" type="index" width="50px" />
          <el-table-column label="标本名称" align="center" prop="label" show-overflow-tooltip />
        </el-table>
      </el-col>


        <el-dialog :title="title" :visible.sync="openOne" width="1400px" append-to-body :close-on-click-modal="false">
            <el-row :gutter="24">
                <el-col :span="15" :xs="24">
                    <el-form :model="form" ref="queryForm" size="small" :inline="true" label-width="46px"
                        style="height: 35px" @submit.native.prevent>
                        <el-form-item label="标本类型">
                            <el-input ref="inputName" v-model="form.price" placeholder="标本类型" clearable
                                style="width: 140px" />
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuerys">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table border v-loading="loading" :data="OnenewpacName" :row-class-name="tableRowClassName"
                        height="478">
                        <el-table-column label="原价" align="center" prop="proPrice" width="85"></el-table-column>
      <!-- 第二列：中间选中项目列表 -->
      <el-col :span="8" :xs="24">
        <el-form :model="form" size="small" :inline="true" label-width="68px" style="height: 45px" @submit.native.prevent />
        <el-table
          border
          v-loading="loading"
          :data="OnenewpacName"
          height="478"
          style="width: 100%"
        >
          <el-table-column label="已选项目列表" align="center" prop="proName" />
                        <el-table-column label="操作" align="center" width="85">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" icon="el-icon-delete"
                                    @click="handledbelete(scope.row)">删除</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handledbelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>

                <el-col :span="7" :xs="24">
                    <el-form :model="queryParams1" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                        label-width="68px" @submit.native.prevent>


                        <el-form-item label="项目名称" prop="proName">
                            <el-input ref="inputName" v-model="queryParams1.proName" placeholder="请输入项目名称" clearable
                                @keyup.enter.native="handleSearchFor" style="width: 140px" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini"
                                @click="handleSearchFor">搜索</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table border v-loading="loading" ref="tre" :data="Treedata"
                        @selection-change="handleChangesingle" height="478" style="width: 100%">
                        <el-table-column type="selection" width="40px" align="center" />
                        <el-table-column label="项目名称" align="center" prop="proName" width="230px" />
                        <el-table-column label="项目价格/元" align="center" prop="proPrice" width="100px" />
                    </el-table>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer1">
        <div class="dialog-footer1" style="margin-top: 60px; text-align: center;">
                <el-button type="primary" @click="submitrighr">确认并保存</el-button>
                <el-button @click="cancell">取 消</el-button>
            </div>
        </el-dialog>
      </el-col>

      <!-- 第三列：搜索 + 项目选择 -->
      <el-col :span="8" :xs="24">
        <el-form
          :model="queryParams1"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
          style="height: 45px"
          @submit.native.prevent
        >
          <el-form-item label="项目名称" prop="proName">
            <el-input
              ref="inputName"
              v-model="queryParams1.proName"
              placeholder="请输入项目名称"
              clearable
              @keyup.enter.native="handleSearchFor"
              style="width: 140px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchFor">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table
          border
          v-loading="loading"
          ref="tre"
          :data="Treedata"
          @selection-change="handleChangesingle"
          height="478"
          style="width: 100%"
        >
          <el-table-column type="selection" width="40px" align="center" />
          <el-table-column label="项目名称" align="center" prop="proName" show-overflow-tooltip />
        </el-table>
      </el-col>
    </el-row>
    </div>
</template>

<script>
// import {  } from "@/api/system/menu";
import { searchBiaoben, delBiaoben, editBiaoben } from "@/api/hosp/biaoben";
import { debounce } from 'lodash';

export default {
    name: "Part",
    //   dicts: [
    //     "",
    //   ],
    data() {
        return {
            loading: false,
            openOne: false,
            partList: [],
      OnenewpacName: [],
            Treedata: [],
      originalTreedata: [],
            queryParams: {

        tjh: '',
        tjCategory: null,
            },
            queryParams1: {

        proName: '',
            },
            form: {

        price: '',
            },

      showSearch: true,
      filteredSpecimenData: [],
      originalSpecimenData: [],
    };
  },
  dicts: ["sys_dict_specimen"],
  created() {
    this.fetchInitialBiaobenData();
    this.initializeSpecimenData();
    this.debouncedFetchBiaobenData = debounce(this.fetchBiaobenData, 300);
  },
  watch: {
    'dict.type.sys_dict_specimen': {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          console.log('标本字典数据加载:', newVal);
          this.originalSpecimenData = [...newVal];
          this.filteredSpecimenData = [...newVal];
        } else {
          console.warn('标本字典数据为空或未加载');
        }
    },
    created() {
      deep: true,
      immediate: true,
    },
    },
    methods: {
        getList() {

    initializeSpecimenData() {
      if (this.dict?.type?.sys_dict_specimen) {
        this.originalSpecimenData = [...this.dict.type.sys_dict_specimen];
        this.filteredSpecimenData = [...this.originalSpecimenData];
        console.log('初始化标本数据:', this.originalSpecimenData);
      } else {
        this.$message.warning('标本数据未加载，请检查字典配置');
        this.originalSpecimenData = [];
        this.filteredSpecimenData = [];
      }
    },
    handleSearchFor() {
      const searchText = this.queryParams1.proName?.trim().toLowerCase() || '';
      if (searchText) {
        this.Treedata = this.originalTreedata.filter(item =>
          item.proName.toLowerCase().includes(searchText)
        );
        this.Treedata.length
          ? this.$message.success('查询成功')
          : this.$message.warning('未找到匹配的项目');
      } else {
        this.Treedata = [...this.originalTreedata];
        this.$message.info('已显示所有项目');
      }
      this.$refs.tre.clearSelection();
        },
        resetQuery() {
            this.resetForm("queryForm");
      this.$refs.queryForm.resetFields();
      this.queryParams.tjh = '';
      this.queryParams.tjCategory = null;
      this.OnenewpacName = [];
      this.filteredSpecimenData = [...this.originalSpecimenData];
      this.$refs.specimenTable.clearSelection();
      this.$message.success('已重置查询条件和标本数据');
        },
        handleManual() {
      const searchText = this.queryParams.tjh?.trim().toLowerCase() || '';
      this.filteredSpecimenData = searchText
        ? this.originalSpecimenData.filter(item => item.label.toLowerCase().includes(searchText))
        : [...this.originalSpecimenData];

      this.queryParams.tjCategory = null;
      this.OnenewpacName = [];
      this.$refs.specimenTable.clearSelection();

      this.$message[this.filteredSpecimenData.length ? 'success' : 'warning'](
        this.filteredSpecimenData.length ? '查询成功' : '未找到匹配的标本'
      );
    },
    handleSpecimenSelect(selection, row) {
      console.log('标本选择触发:', { selection, row });
      this.$refs.specimenTable.clearSelection();
      if (selection.includes(row)) {
        this.$refs.specimenTable.toggleRowSelection(row, true);
        if (this.queryParams.tjCategory !== row.value) {
          this.queryParams.tjCategory = row.value;
          console.log('选中的标本 value:', this.queryParams.tjCategory);
          this.debouncedFetchBiaobenData(row.value);
        }
      } else {
        this.queryParams.tjCategory = null;
        this.OnenewpacName = [];
        console.log('标本选择已清空');
      }
        },
        handleChangesingle(selection) {

      if (selection.length > 0) {
        selection.forEach(item => {
          if (!this.OnenewpacName.some(existing => existing.proId === item.proId)) {
            this.OnenewpacName.push({ ...item });
          }
        });
        this.$refs.tre.clearSelection();
      }
        },
        cancell() {
            this.openOne = false
      this.openOne = false;
        },
        submitrighr() {

        },
      if (!this.queryParams.tjCategory) {
        this.$message.error('请先选择一个标本');
        return;
    }
      if (!this.OnenewpacName.length) {
        this.$message.error('请至少选择一个项目');
        return;
      }
      const proIds = this.OnenewpacName.map(item => item.proId);
      const bblx = this.queryParams.tjCategory;
      this.loading = true;
      editBiaoben({ proIds, bblx })
        .then(() => {
          this.$message.success('保存成功');
          this.OnenewpacName = [];
          this.queryParams.tjCategory = null;
          this.$refs.specimenTable.clearSelection();
          this.loading = false;
        })
        .catch(error => {
          this.$message.error('保存失败');
          console.error(error);
          this.loading = false;
        });
    },
    handledbelete(row) {
      this.loading = true;
      delBiaoben({ proId: row.proId })
        .then(() => {
          this.OnenewpacName = this.OnenewpacName.filter(item => item.proId !== row.proId);
          this.$message.success('删除成功');
          this.loading = false;
        })
        .catch(error => {
          this.$message.error('删除失败');
          console.error(error);
          this.loading = false;
        });
    },
    fetchBiaobenData(bblx) {
      console.log('调用 searchBiaoben（中间表格），参数:', { bblx });
      this.loading = true;
      searchBiaoben({ bblx })
        .then(response => {
          this.OnenewpacName = response.data || [];
          this.loading = false;
        })
        .catch(error => {
          this.$message.error('获取标本数据失败');
          console.error(error);
          this.loading = false;
        });
    },
    fetchInitialBiaobenData() {
      console.log('调用 searchBiaoben（初始加载，右侧表格），参数: {}');
      this.loading = true;
      searchBiaoben({})
        .then(response => {
          this.originalTreedata = response.data || [];
          this.Treedata = [...this.originalTreedata];
          this.loading = false;
        })
        .catch(error => {
          this.$message.error('获取初始项目数据失败');
          console.error(error);
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.dialog-footer1 {
  margin-top: 60px;
  text-align: center;
}
</style>