qx
2025-07-01 76af820e2e11366b322705b51c351ace3d40608a
src/views/hosp/biaoben/index.vue
@@ -2,41 +2,22 @@
  <div class="app-container">
    <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-col :span="6" :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
              @keyup.enter.native="handleManual"
            />
            <el-input style="width: 140px" 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-button  type="primary" size="mini" @click="handleAdd">新增</el-button>
          </el-form-item>
        </el-form>
        <!-- 标本单选表格(带多选框样式) -->
        <el-table
          border
          v-loading="loading"
          :data="filteredSpecimenData"
          height="478"
          style="width: 100%"
          ref="specimenTable"
          :row-key="row => row.value"
          @select="handleSpecimenSelect"
        >
        <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" type="index" width="50px" />
          <el-table-column label="标本名称" align="center" prop="label" show-overflow-tooltip />
@@ -44,15 +25,18 @@
      </el-col>
      <!-- 第二列:中间选中项目列表 -->
      <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-col :span="9" :xs="24">
        <el-form :model="queryParams2" 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="queryParams2.proName" placeholder="请输入项目名称" clearable
              @keyup.enter.native="handleyixuan" style="width: 140px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleyixuan">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table border v-loading="loading" :data="OnenewpacName" height="478" ref="tres" style="width: 100%">
          <el-table-column label="已选项目列表" align="center" prop="proName" />
          <el-table-column label="操作" align="center" width="85">
            <template slot-scope="scope">
@@ -67,60 +51,94 @@
      </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-col :span="9" :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-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 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-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="字典类型">
            <el-input v-model="form.dictType" :disabled="true" />
          </el-form-item>
          <el-form-item label="数据名称" prop="dictLabel">
            <el-input v-model="form.dictLabel" placeholder="请输入数据名称" />
          </el-form-item>
          <el-form-item label="数据键值" prop="dictValue">
            <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
          </el-form-item>
          <el-form-item label="样式属性" prop="cssClass">
            <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
          </el-form-item>
          <el-form-item label="显示排序" prop="dictSort">
            <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
          </el-form-item>
          <el-form-item label="回显样式" prop="listClass">
            <el-select v-model="form.listClass">
              <el-option v-for="item in listClassOptions" :key="item.value" :label="item.label + '(' + item.value + ')'"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
import { searchBiaoben, delBiaoben, editBiaoben } from "@/api/hosp/biaoben";
import { getDicts, addData, updateData } from "@/api/system/dict/data";
import { debounce } from 'lodash';
export default {
  name: "Part",
  data() {
    let checkPhoneNum = (rule, value, callback) => {
      console.log(value)
      let patter = new RegExp(/^1\s*[3456789]\s*(\d\s*){9}$/);
      if (value == "" && value == undefined && !value) {
        return callback('');
      } else if (value != undefined && value != "") {
        return callback();
      } else if (!patter.test(value)) {
        return callback('');
      }
    };
    return {
      loading: false,
      open: false,
      OnenewpacName: [],
      Treedata: [],
      originalTreedata: [],
      Treedatas: [],
      queryParams: {
        tjh: '',
        tjCategory: null,
@@ -128,15 +146,57 @@
      queryParams1: {
        proName: '',
      },
      form: {
        price: '',
      queryParams2: {
        proName: '',
      },
      // 表单参数
      form: {},
      title: "",
      // 数据标签回显样式
      listClassOptions: [
        {
          value: "default",
          label: "默认"
        },
        {
          value: "primary",
          label: "主要"
        },
        {
          value: "success",
          label: "成功"
        },
        {
          value: "info",
          label: "信息"
        },
        {
          value: "warning",
          label: "警告"
        },
        {
          value: "danger",
          label: "危险"
        }
      ],
      // 表单校验
      rules: {
        dictLabel: [
          { required: true, validator: checkPhoneNum, trigger: "blur" }
        ],
        dictValue: [
          { required: true, validator: checkPhoneNum, trigger: "blur" }
        ],
        dictSort: [
          { required: true, validator: checkPhoneNum, trigger: "blur" }
        ]
      },
      showSearch: true,
      filteredSpecimenData: [],
      originalSpecimenData: [],
    };
  },
  dicts: ["sys_dict_specimen"],
  dicts: ["sys_dict_specimen", "sys_normal_disable"],
  created() {
    this.fetchInitialBiaobenData();
    this.initializeSpecimenData();
@@ -168,6 +228,22 @@
        this.originalSpecimenData = [];
        this.filteredSpecimenData = [];
      }
    },
    handleyixuan() {
      const searchText = this.queryParams2.proName?.trim().toLowerCase() || '';
      if (searchText) {
        this.OnenewpacName = this.Treedatas.filter(item =>
          item.proName.toLowerCase().includes(searchText)
        );
        this.OnenewpacName.length
          ? this.$message.success('查询成功')
          : this.$message.warning('未找到匹配的项目');
      } else {
        this.OnenewpacName = [...this.Treedatas];
        this.$message.info('已显示所有项目');
      }
      this.$refs.tres.clearSelection();
    },
    handleSearchFor() {
      const searchText = this.queryParams1.proName?.trim().toLowerCase() || '';
@@ -233,6 +309,13 @@
        this.$refs.tre.clearSelection();
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.title = "添加字典数据";
      this.form.dictType = "sys_dict_specimen";
    },
    cancell() {
      this.openOne = false;
    },
@@ -281,7 +364,8 @@
      this.loading = true;
      searchBiaoben({ bblx })
        .then(response => {
          this.OnenewpacName = response.data || [];
          this.Treedatas = response.data || [];
          this.OnenewpacName = [...this.Treedatas];
          this.loading = false;
        })
        .catch(error => {
@@ -305,6 +389,38 @@
          this.loading = false;
        });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.dictCode != undefined) {
            updateData(this.form).then(response => {
              this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addData(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              let dictType = "sys_dict_specimen"
                getDicts(dictType).then(response => {
                  this.originalSpecimenData=  response.rows ||[]
                  this.filteredSpecimenData =[...this.originalSpecimenData];
                });
            });
          }
        }
      });
    },
  },
};
</script>
@@ -313,6 +429,7 @@
.app-container {
  padding: 20px;
}
.dialog-footer1 {
  margin-top: 60px;
  text-align: center;