<template>
|
<div class="app-container">
|
<el-row :gutter="24">
|
<!-- 第一列：单选标本 -->
|
<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 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 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-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 />
|
</el-table>
|
</el-col>
|
|
<!-- 第二列：中间选中项目列表 -->
|
<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">
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handledbelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<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-col>
|
|
<!-- 第三列：搜索 + 项目选择 -->
|
<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-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-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,
|
},
|
queryParams1: {
|
proName: '',
|
},
|
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", "sys_normal_disable"],
|
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('标本字典数据为空或未加载');
|
}
|
},
|
deep: true,
|
immediate: true,
|
},
|
},
|
methods: {
|
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 = [];
|
}
|
},
|
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() || '';
|
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.$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();
|
}
|
},
|
|
/** 新增按钮操作 */
|
handleAdd() {
|
this.open = true;
|
this.title = "添加字典数据";
|
this.form.dictType = "sys_dict_specimen";
|
},
|
cancell() {
|
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.Treedatas = response.data || [];
|
this.OnenewpacName = [...this.Treedatas];
|
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;
|
});
|
},
|
|
// 取消按钮
|
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>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
|
.dialog-footer1 {
|
margin-top: 60px;
|
text-align: center;
|
}
|
</style>
|
