|
|
<template> <div style="display: flex;"> <div style="width:50%;"> <el-table id="tableSummary" row-key="id" :data="sumDoctorCheck.summaryList" width="100%" :height="sumHeight" border size="small"> <el-table-column type="index" width="20" align="center" /> <el-table-column prop="summaryTitle" label="综述"> <template slot-scope="scope"> <div> <el-input v-model="scope.row.summaryTitle" placeholder="请输入综述" disabled></el-input> <el-table :id="scope.row.id" :row-key="scope.$index + scope.row.id" style="margin-left: 10px;" :data="scope.row.details" border @row-click="rowClick" :show-header="false"> <el-table-column width="30"> <template slot-scope="scope2"> <div>{{ scope2.$index + 1 }})</div> </template> </el-table-column> <el-table-column prop="summaryContent" label="综述" min-width="200"> <template slot-scope="scope2"> <!--:autosize="{ minRows: 1, maxRows: 20 } "--> <el-input type="textarea" v-model="scope2.row.summaryContent" placeholder="请输入综述" disabled :autosize="{ minRows: 1, maxRows: 20 }"> </el-input> </template> </el-table-column> <el-table-column width="8" /> </el-table> </div> </template> </el-table-column> </el-table> </div> <div style="width:50%;"> <el-table id="tableSuggestion" row-key="id" :data="sumDoctorCheck.suggestionList" width="100%" :height="sumHeight" border size="small"> <el-table-column type="index" width="20" align="center"> </el-table-column> <el-table-column prop="suggestionTitle" label="建议"> <template slot-scope="scope"> <div> <div style="display: flex;"> <el-input v-model="scope.row.suggestionTitle" placeholder="请输入建议标题" :ref="scope.row.id" :id="scope.row.id" :disabled="sumDoctorCheck.sumPREdit.completeFlag == '3' || sumDoctorCheck.sumPREdit.isAudit == 'Y'"> </el-input> <el-button v-show="checkPagePriv(pagePriv.privs, '删除建议')" type="danger" icon="el-icon-delete" style="margin-left: 2px;min-width:21px;height:21px;padding:2px;" @click="delSugHead(scope.$index)" :disabled="sumDoctorCheck.sumPREdit.completeFlag == '3' || sumDoctorCheck.sumPREdit.isAudit == 'Y'"></el-button> </div> <div style="display: flex;margin-top: 2px;"> <div style="width:60px;">诊断</div> <el-select v-model="scope.row.diagnosisIds" multiple placeholder="请选择" style="width: 100%;" :disabled="sumDoctorCheck.sumPREdit.completeFlag == '3' || sumDoctorCheck.sumPREdit.isAudit == 'Y'" @change="changeDiagnosis"> <el-option v-for="item in diagnosises" :key="item.id" :value="item.id" :label="item.displayName" /> </el-select> <el-tooltip content="新增医学解释" placement="top"> <el-button v-show="checkPagePriv(pagePriv.privs, '新增医学解释')" type="success" icon="el-icon-plus" style="min-width:21px;height:21px;padding:2px;" @click="addSug(scope.$index, 0)" :disabled="sumDoctorCheck.sumPREdit.completeFlag == '3' || sumDoctorCheck.sumPREdit.isAudit == 'Y'"> </el-button> </el-tooltip> <el-tooltip content="新增常见原因" placement="top"> <el-button v-show="checkPagePriv(pagePriv.privs, '新增常见原因')" type="danger" icon="el-icon-plus" style="margin-left: 2px;min-width:21px;height:21px;padding:2px;" @click="addSug(scope.$index, 1)" :disabled="sumDoctorCheck.sumPREdit.completeFlag == '3' || sumDoctorCheck.sumPREdit.isAudit == 'Y'"> </el-button> </el-tooltip> <el-tooltip content="新增健康指导" placement="top"> <el-button v-show="checkPagePriv(pagePriv.privs, '新增健康指导')" type="danger" icon="el-icon-plus" style="margin-left: 2px;min-width:21px;height:21px;padding:2px;" @click="addSug(scope.$index, 2)" :disabled="sumDoctorCheck.sumPREdit.completeFlag == '3' || sumDoctorCheck.sumPREdit.isAudit == 'Y'"> </el-button> </el-tooltip> </div> <div style="display: flex;margin-top: 2px;"> <div style="width:60px;">医学解释</div> <el-table :id="'0_sug' + scope.row.id" row-key="displayOrder" style="margin-left: 10px;" :data="scope.row.medicalInterpretations" border @row-click="rowClickSug0" :show-header="false"> <el-table-column width="30"> <template slot-scope="scope2"> <div>{{ scope2.$index + 1 }}).</div> </template> </el-table-column> <el-table-column prop="suggestionContent" label="建议" min-width="200"> <template slot-scope="scope2"> <el-input type="textarea" v-model="scope2.row.suggestionContent" placeholder="请输入建议内容" :disabled="sumDoctorCheck.sumPREdit.completeFlag == '3' || sumDoctorCheck.sumPREdit.isAudit == 'Y'" :autosize="{ minRows: 1, maxRows: 10 }"> </el-input> </template> </el-table-column> <el-table-column label="操作" width="25"> <template slot-scope="scope2"> <el-button v-show="checkPagePriv(pagePriv.privs, '删除医学解释')" type="danger" style="min-width:21px;height:21px;padding:2px;" icon="el-icon-delete" @click="delSug(scope.row.medicalInterpretations, scope2.$index)" :disabled="sumDoctorCheck.sumPREdit.completeFlag == '3' || sumDoctorCheck.sumPREdit.isAudit == 'Y'" size="small"></el-button> </template> </el-table-column> </el-table> </div> <div style="display: flex;margin-top: 2px;"> <div style="width:60px;">常见原因</div> <el-table :id="'1_sug' + scope.row.id" row-key="displayOrder" style="margin-left: 10px;" :data="scope.row.commonReasons" border @row-click="rowClickSug1" :show-header="false"> <el-table-column width="30"> <template slot-scope="scope2"> <div>{{ scope2.$index + 1 }}).</div> </template> </el-table-column> <el-table-column prop="suggestionContent" label="建议" min-width="200"> <template slot-scope="scope2"> <el-input type="textarea" v-model="scope2.row.suggestionContent" placeholder="请输入建议内容" :disabled="sumDoctorCheck.sumPREdit.completeFlag == '3' || sumDoctorCheck.sumPREdit.isAudit == 'Y'" :autosize="{ minRows: 1, maxRows: 10 }"> </el-input> </template> </el-table-column> <el-table-column label="操作" width="25"> <template slot-scope="scope2"> <el-button v-show="checkPagePriv(pagePriv.privs, '删除常见原因')" type="danger" style="min-width:21px;height:21px;padding:2px;" icon="el-icon-delete" @click="delSug(scope.row.commonReasons, scope2.$index)" :disabled="sumDoctorCheck.sumPREdit.completeFlag == '3' || sumDoctorCheck.sumPREdit.isAudit == 'Y'" size="small"></el-button> </template> </el-table-column> </el-table> </div> <div style="display: flex;margin-top: 2px;"> <div style="width:60px;">健康指导</div> <el-table :id="'2_sug' + scope.row.id" row-key="displayOrder" style="margin-left: 10px;" :data="scope.row.healthGuidances" border @row-click="rowClickSug2" :show-header="false"> <el-table-column width="30"> <template slot-scope="scope2"> <div>{{ scope2.$index + 1 }}).</div> </template> </el-table-column> <el-table-column prop="suggestionContent" label="建议" min-width="200"> <template slot-scope="scope2"> <el-input type="textarea" v-model="scope2.row.suggestionContent" placeholder="请输入健康指导" :disabled="sumDoctorCheck.sumPREdit.completeFlag == '3' || sumDoctorCheck.sumPREdit.isAudit == 'Y'" :autosize="{ minRows: 1, maxRows: 10 }"> </el-input> </template> </el-table-column> <el-table-column label="操作" width="25"> <template slot-scope="scope2"> <el-button v-show="checkPagePriv(pagePriv.privs, '删除健康指导')" type="danger" style="min-width:21px;height:21px;padding:2px;" icon="el-icon-delete" @click="delSug(scope.row.healthGuidances, scope2.$index)" :disabled="sumDoctorCheck.sumPREdit.completeFlag == '3' || sumDoctorCheck.sumPREdit.isAudit == 'Y'" size="small"></el-button> </template> </el-table-column> </el-table> </div> </div> </template> </el-table-column> </el-table> </div> </div></template><script>import { mapState } from 'vuex';import Sortable from "sortablejs";import { getapi, postapi, putapi, deletapi } from "@/api/api";import { getPagePriv, checkPagePriv, deepCopy, arrayExistObj } from '../../utlis/proFunc';export default { components: {}, props: ["patientRegisterId", "curGetFocusSuggestionId"], data() { return { pagePriv: { routeUrlorPageName: 'sumDoctorCheck', //当前页面归属路由或归属页面权限名称
privs: [] // 页面权限
}, sumDetails: [], suggestionCurRow:0, //当前操作建议的行
diagnosises:[], // 诊断
}; },
created() { //获取用户当前页面的权限
let userPriv = window.sessionStorage.getItem('userPriv') if (userPriv) this.pagePriv.privs = deepCopy(getPagePriv(this.pagePriv.routeUrlorPageName)) },
//挂载完成
mounted() { this.rowDrop(); this.rowDropSuggestion();
this.dictInit() // document.addEventListener('DOMContentLoaded', function () {
// const textarea = document.querySelector('textarea');
// textarea.addEventListener('input', function () {
// // 当文本域内容变化时调整大小
// console.log('textarea.addEventListener',textarea.style.height)
// textarea.style.height = 'auto'; // 重置高度
// // textarea.style.height = textarea.scrollHeight + 'px'; // 根据滚动高度调整高度
// });
// });
this.summaryList(this.dataTransOpts.tableS.patient_register.id) this.suggestionList(this.dataTransOpts.tableS.patient_register.id) },
computed: { ...mapState(['window', 'dict', 'dataTransOpts', 'doctorCheck', 'sumDoctorCheck']),
sumHeight() { let tempHeight = this.window.pageHeight < 600 ? 600 : this.window.pageHeight return tempHeight - 335 }, },
methods: { checkPagePriv,
// textareaResize() {
// const textarea = document.querySelectorAll('textarea');
// textarea.forEach(e => {
// e.style.height = 'auto'; // 重置高度
// });
// },
// 获取诊断数据
dictInit() { postapi('/api/app/diagnosis/getlistinsuggestion', {}).then(res => { if (res.code > -1) { this.diagnosises = res.data } }) },
//获取综述
summaryList(RegisterId) { if (!RegisterId) { this.sumDoctorCheck.summaryList = []; return }
// 旧接口: console.log(`/api/app/sumsummaryheader/getsumsummarylist?PatientRegisterId=${RegisterId}`)
let body = { patientRegisterId: RegisterId, isGetExistData: 'Y', } postapi('/api/app/sumsummaryheader/getsumsummarylist', body) .then((res) => { console.log("summaryList", res.data); if (res.code > -1) { let summaryList = [] res.data.forEach((e, i) => { let details = [] e.details.forEach((e2, i2) => { details.push({ id: `summaryDetails_${i2}`, summaryContent: ' ' }) }); summaryList.push({ id: `summary_${i}`, summaryTitle: ' ', details }) }); this.sumDoctorCheck.summaryList = deepCopy(summaryList) // 自动高度有问题,需要这样处理一下
setTimeout(() => { this.sumDoctorCheck.summaryList = deepCopy(res.data); this.sumDoctorCheck.summaryList.forEach((e, i) => { e.id = `summary_${i}` e.details.forEach((e2, i2) => { e2.id = `summaryDetails_${i2}` }); }); }, 10); // this.sumDoctorCheck.summaryList = res.data;
// this.textareaResize()
} }) .catch((err) => { this.$message({ type: "error", message: `操作失败,原因:${err}` }); }); },
//获取建议
suggestionList(RegisterId) { if (!RegisterId) { this.sumDoctorCheck.suggestionList = []; return; };
// {
// "patientRegisterId": "3a11ee70-02cb-c5e6-a087-79ecdd0356b6",
// "isGetExistData": "Y"
// }
let body = { patientRegisterId: RegisterId, isGetExistData: 'Y', } // 旧接口: console.log(`/api/app/sumsuggestionheader/getsumsuggestionlist?PatientRegisterId=${RegisterId}`)
postapi('/api/app/sumsuggestionheader/getsumsuggestionlist', body) .then((res) => { console.log("suggestionList", res.data); if (res.code > -1) { this.sumDoctorCheck.suggestionList = res.data; // 处理拖动排序使用
this.sumDoctorCheck.suggestionList.forEach((e, i) => { e.id = `suggestion_${i}` if (e.medicalInterpretations) { e.medicalInterpretations.forEach((e0, i0) => { e0.sumSuggestionHeaderId = `suggestion_${i}` e0.id = `medicalInterpretations_${i0}` }); } if (e.commonReasons) { e.commonReasons.forEach((e0, i0) => { e0.sumSuggestionHeaderId = `suggestion_${i}` e0.id = `commonReasons_${i0}` }); } if (e.healthGuidances) { e.healthGuidances.forEach((e0, i0) => { e0.sumSuggestionHeaderId = `suggestion_${i}` e0.id = `healthGuidances_${i0}` }); } }); } }) .catch((err) => { this.$message({ type: "error", message: `操作失败,原因:${err}` }); }); },
// 诊断选择
changeDiagnosis(v){ console.log('changeDiagnosis',v) let suggestionTitle = [] if(v.length == 0){ this.sumDoctorCheck.suggestionList[this.suggestionCurRow]['suggestionTitle'] = '' return } //先找到是操作的建议行
let lv = `${v}` let suggestionList = deepCopy(this.sumDoctorCheck.suggestionList) suggestionList.forEach(e => { e.diagnosisIds = `${e.diagnosisIds}` }); let lfind = arrayExistObj(suggestionList,'diagnosisIds',lv) if(lfind == -1) return this.suggestionCurRow = lfind let sumSuggestionHeaderId = this.sumDoctorCheck.suggestionList[lfind].id v.forEach(e => { let ld = arrayExistObj(this.diagnosises,'id',e) if(ld > -1){ suggestionTitle.push(this.diagnosises[ld]["displayName"]) //添加医学解释
let medicalInterpretations = this.diagnosises[ld]['medicalInterpretations'] if(medicalInterpretations){ if(!this.sumDoctorCheck.suggestionList[lfind]['medicalInterpretations']) this.sumDoctorCheck.suggestionList[lfind]['medicalInterpretations'] = [] medicalInterpretations.forEach(e2 => { let lf = arrayExistObj(this.sumDoctorCheck.suggestionList[lfind]['medicalInterpretations'],"suggestionContent",e2.suggestionContent) if(lf == -1){ this.sumDoctorCheck.suggestionList[lfind]['medicalInterpretations'].push({ sumSuggestionHeaderId, suggestionContent:e2.suggestionContent, displayOrder: Math.random(), }) } }); }
//添加常见原因
let commonReasons = this.diagnosises[ld]['commonReasons'] if(commonReasons){ if(!this.sumDoctorCheck.suggestionList[lfind]['commonReasons']) this.sumDoctorCheck.suggestionList[lfind]['commonReasons'] = [] commonReasons.forEach(e2 => { let lf = arrayExistObj(this.sumDoctorCheck.suggestionList[lfind]['commonReasons'],"suggestionContent",e2.suggestionContent) if(lf == -1){ this.sumDoctorCheck.suggestionList[lfind]['commonReasons'].push({ sumSuggestionHeaderId, suggestionContent:e2.suggestionContent, displayOrder: Math.random(), }) } }); }
//添加常见原因
let healthGuidances = this.diagnosises[ld]['healthGuidances'] if(healthGuidances){ if(!this.sumDoctorCheck.suggestionList[lfind]['healthGuidances']) this.sumDoctorCheck.suggestionList[lfind]['healthGuidances'] = [] healthGuidances.forEach(e2 => { let lf = arrayExistObj(this.sumDoctorCheck.suggestionList[lfind]['healthGuidances'],"suggestionContent",e2.suggestionContent) if(lf == -1){ this.sumDoctorCheck.suggestionList[lfind]['healthGuidances'].push({ sumSuggestionHeaderId, suggestionContent:e2.suggestionContent, displayOrder: Math.random(), }) } }); } } }); this.sumDoctorCheck.suggestionList[this.suggestionCurRow]['suggestionTitle'] = `${suggestionTitle}` }, //增加建议明细
addSug(index, contentType) { this.suggestionCurRow = index
let lcontentType = 'healthGuidances' switch (contentType) { case 0: lcontentType = 'medicalInterpretations' break; case 1: lcontentType = 'commonReasons' break; default: break; } if (!this.sumDoctorCheck.suggestionList[index][lcontentType]) this.sumDoctorCheck.suggestionList[index][lcontentType] = [] this.sumDoctorCheck.suggestionList[index][lcontentType].push({ sumSuggestionHeaderId: this.sumDoctorCheck.suggestionList[index].id, // 拖拽用到
suggestionContent: '', displayOrder: Math.random(), }) console.log('this.sumDoctorCheck.suggestionList', index, this.sumDoctorCheck.suggestionList) },
//删除建议头及明细
delSugHead(index) { this.$confirm("此操作将删除该记录, 是否继续?", "提示", { confirmButtonText: "是", cancelButtonText: "否", type: "warning", }).then(() => { //删除建议
this.sumDoctorCheck.suggestionList.splice(index, 1) }).catch((err) => { if (err == 'cancel') { console.log(`已取消 ${err}`) } else { this.$message.error(`操作失败 ${err}`) } }); },
//删除建议明细
delSug(details, indexD) { this.$confirm("此操作将删除该记录, 是否继续?", "提示", { confirmButtonText: "是", cancelButtonText: "否", type: "warning", }).then(() => { //删除建议明细
details.splice(indexD, 1); }).catch((err) => { if (err == 'cancel') { console.log(`已取消 ${err}`) } else { this.$message.error(`操作失败 ${err}`) } });
}, //选择组合项目
rowClick(row) { console.log('rowClick row', row) let lfind = arrayExistObj(this.sumDoctorCheck.summaryList, 'id', row.sumSummaryHeaderId) if (lfind > -1) { this.sumDetails = this.sumDoctorCheck.summaryList[lfind].details this.rowDropSumDetail(row.sumSummaryHeaderId) } console.log('this.sumDetails', this.sumDetails) },
//综述明细拖拽
rowDropSumDetail(id) { this.$nextTick(() => { const fEl = document.getElementById(id) // document.querySelector(`#${id} tbody`) querySelector为静态方法不支持动态传参;
console.log('rowDropSumDetail tbody', fEl, fEl.children) //el.childNodes,el.children
const el = this.findEl(fEl, 'TBODY') console.log('rowDropSumDetail tbody', el) //el.childNodes,el.children
const that = this; Sortable.create(el, { animation: 150, // ms, number 单位:ms,定义排序动画的时间
//拖拽结束
onEnd({ newIndex, oldIndex }) { that.isshow = false; const currRow = that.sumDetails.splice(oldIndex, 1)[0]; that.sumDetails.splice(newIndex, 0, currRow); }, }); }); },
findEl(fEl, nodeName) { let el = null for (let i = 0; i < fEl.children.length; i++) { console.log(fEl.children[i].nodeName) if (fEl.children[i].nodeName == nodeName) { el = fEl.children[i] break } else { el = this.findEl(fEl.children[i], nodeName) } if (el) break } return el },
rowClickSug0(row) { this.rowClickSug(row, 0) }, rowClickSug1(row) { this.rowClickSug(row, 1) }, rowClickSug2(row) { this.rowClickSug(row, 2) },
rowClickSug(row, contentType) { console.log('rowClick row', row, contentType) let lcontentType = 'healthGuidances' switch (contentType) { case 0: lcontentType = 'medicalInterpretations' break; case 1: lcontentType = 'commonReasons' break; default: break; } let lfind = arrayExistObj(this.sumDoctorCheck.suggestionList, 'id', row.sumSuggestionHeaderId) if (lfind > -1) { this.sugDetails = this.sumDoctorCheck.suggestionList[lfind][lcontentType] this.rowDropSugDetail(contentType, row.sumSuggestionHeaderId) } console.log('this.sumDetails', lfind, this.sugDetails) },
//建议明细拖拽
rowDropSugDetail(contentType, id) { this.$nextTick(() => { const fEl = document.getElementById(`${contentType}_sug${id}`) // document.querySelector(`#${id} tbody`) querySelector为静态方法不支持动态传参;
console.log('rowDropSumDetail tbody', fEl, fEl.children) //el.childNodes,el.children
const el = this.findEl(fEl, 'TBODY') console.log('rowDropSumDetail tbody', el) //el.childNodes,el.children
const that = this; if (this.detailsDrag) this.detailsDrag.destroy() this.detailsDrag = Sortable.create(el, { animation: 150, // ms, number 单位:ms,定义排序动画的时间
//拖拽结束
onEnd({ newIndex, oldIndex }) { that.isshow = false; const currRow = that.sugDetails.splice(oldIndex, 1)[0]; that.sugDetails.splice(newIndex, 0, currRow); }, }); }); },
//拖拽
rowDrop() { this.$nextTick(() => { const el = document.querySelector("#tableSummary tbody"); console.log('tbody', el) const that = this; Sortable.create(el, { animation: 150, // ms, number 单位:ms,定义排序动画的时间
//拖拽结束
onEnd({ newIndex, oldIndex }) { that.isshow = false; const currRow = that.sumDoctorCheck.summaryList.splice(oldIndex, 1)[0]; that.sumDoctorCheck.summaryList.splice(newIndex, 0, currRow); }, }); }); },
//拖拽
rowDropSuggestion() { this.$nextTick(() => { const el = document.querySelector("#tableSuggestion tbody"); console.log('tbody', el) const that = this; Sortable.create(el, { animation: 150, // ms, number 单位:ms,定义排序动画的时间
//拖拽结束
onEnd({ newIndex, oldIndex }) { that.isshow = false; const currRow = that.sumDoctorCheck.suggestionList.splice(oldIndex, 1)[0]; that.sumDoctorCheck.suggestionList.splice(newIndex, 0, currRow); }, }); }); },
},
//监听事件
watch: { // 虚拟表 触发强制刷新 (sumDoctor.M 合并包含:综述、建议、对比、历史等,不包含总检诊断)
"dataTransOpts.refresh.sumDoctor.M": { // immediate:true,
handler(newVal, oldVal) { console.log(`watch 总检--综述建议 newVal: ${newVal}, oldVal: ${oldVal} patientRegisterId: ${this.dataTransOpts.tableS.patient_register.id}`); this.summaryList(this.dataTransOpts.tableS.patient_register.id) this.suggestionList(this.dataTransOpts.tableS.patient_register.id) } },
// 新增时,光标定位
"curGetFocusSuggestionId": { immediate: true, handler(newVal, oldVal) { console.log(`watch curGetFocusSuggestionId newVal: ${newVal}, oldVal: ${oldVal}`); if (newVal) { this.$nextTick(() => { this.$refs[newVal].focus(); }); } } }, },};</script><style scoped>@import '../../assets/css/global_table.css';
/* 设置单元格内内容顶对齐 */::v-deep .el-table__cell { display: table-cell; /* 使单元格表现为表格单元 */ vertical-align: top; /* 顶对齐 el-table_2_column_2 el-table__cell */}
::v-deep .el-textarea__inner { min-height: 23px; height: 23px; line-height: 1.25; padding: 1px 15px 1px 2px;}
::v-deep .el-input__inner { min-height: 23px; height: 23px; padding: 1px 15px 1px 2px;}</style>
|