bianyaqi
2 years ago
15 changed files with 1362 additions and 110 deletions
@ -1,37 +1,106 @@ |
|||||
<template> |
<template> |
||||
<div style="height: 100%"> |
|
||||
<el-form id="formDiagnosis" ref="form" :model="diagnosis" label-width="120px" style="margin-top: 32px"> |
|
||||
<el-form-item label="诊断：" style="width: 540px" prop="zd"> |
|
||||
<el-input v-model="diagnosis.zd" type="textarea" auto-complete="off" :rows="4" style="width: 420px" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="处理：" style="width: 540px" prop="cl"> |
|
||||
<el-input v-model="diagnosis.cl" type="textarea" auto-complete="off" :rows="4" style="width: 420px" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="治疗意见：" style="width: 540px" prop="zlyj"> |
|
||||
<el-input v-model="diagnosis.zlyj" type="textarea" auto-complete="off" :rows="4" style="width: 420px" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
|
<div style="height: 100%;display: flex"> |
||||
|
<div class="historyTaking"> |
||||
|
<el-form id="formDiagnosis" ref="form" :model="diagnosis" label-width="120px" style="margin-top: 32px"> |
||||
|
<el-form-item label="诊断：" style="width: 540px" prop="zd"> |
||||
|
<el-input v-model="diagnosis.zd" type="textarea" auto-complete="off" :rows="4" style="width: 420px" @focus="setCurWord('诊断')" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="处理：" style="width: 540px" prop="cl"> |
||||
|
<el-input v-model="diagnosis.cl" type="textarea" auto-complete="off" :rows="4" style="width: 420px" @focus="setCurWord('处理')" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="治疗意见：" style="width: 540px" prop="zlyj"> |
||||
|
<el-input v-model="diagnosis.zlyj" type="textarea" auto-complete="off" :rows="4" style="width: 420px" @focus="setCurWord('治疗意见')" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div v-if="curWord" class="rightText"> |
||||
|
<div style="text-align: left;margin-bottom: 16px"> |
||||
|
常用内容模板： |
||||
|
</div> |
||||
|
<div class="wordContent"> |
||||
|
<el-tooltip v-for="(item,index) in commonList" :key="index" effect="dark" placement="top-start"> |
||||
|
<span slot="content" class="tooltips">{{ item }}</span> |
||||
|
<el-button class="wordBtn" @click="combineWord(item)">{{ item }}</el-button> |
||||
|
</el-tooltip> |
||||
|
<el-button type="primary" @click="openTextTemplate">更多</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name: 'DiagnosisForm', |
name: 'DiagnosisForm', |
||||
props: ['diagnosis'], |
|
||||
|
props: ['diagnosis', 'commonList'], |
||||
|
data() { |
||||
|
return { |
||||
|
curWord: '' |
||||
|
} |
||||
|
}, |
||||
methods: { |
methods: { |
||||
reset() { |
reset() { |
||||
this.$nextTick(() => { |
this.$nextTick(() => { |
||||
this.$refs.form.resetFields() |
this.$refs.form.resetFields() |
||||
}) |
}) |
||||
|
}, |
||||
|
setCurWord(word) { |
||||
|
this.curWord = word |
||||
|
}, |
||||
|
combineWord(text) { |
||||
|
switch (this.curWord) { |
||||
|
case '诊断': |
||||
|
if (!this.diagnosis.zd) { |
||||
|
this.diagnosis.zd = '' |
||||
|
} |
||||
|
this.diagnosis.zd = this.diagnosis.zd + text |
||||
|
break |
||||
|
case '处理': |
||||
|
if (!this.diagnosis.cl) { |
||||
|
this.diagnosis.cl = '' |
||||
|
} |
||||
|
this.diagnosis.cl = this.diagnosis.cl + text |
||||
|
break |
||||
|
case '治疗意见': |
||||
|
if (!this.diagnosis.zlyj) { |
||||
|
this.diagnosis.zlyj = '' |
||||
|
} |
||||
|
this.diagnosis.zlyj = this.diagnosis.zlyj + text |
||||
|
break |
||||
|
} |
||||
|
}, |
||||
|
openTextTemplate() { |
||||
|
this.$emit('openDrawer', this.curWord) |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss"> |
|
||||
|
<style scoped lang="scss"> |
||||
#formDiagnosis{ |
#formDiagnosis{ |
||||
.el-textarea__inner{ |
.el-textarea__inner{ |
||||
font-size: 16px; |
font-size: 16px; |
||||
} |
} |
||||
} |
} |
||||
|
.wordContent{ |
||||
|
text-align: left; |
||||
|
} |
||||
|
.historyTaking{ |
||||
|
height: 100%; |
||||
|
padding: 16px 16px 0 0; |
||||
|
width: 50%; |
||||
|
overflow: hidden; |
||||
|
overflow-y: scroll; |
||||
|
} |
||||
|
.wordBtn{ |
||||
|
max-width: 200px; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
.rightText{ |
||||
|
width: 50%; |
||||
|
padding: 16px; |
||||
|
} |
||||
|
.tooltips{ |
||||
|
max-width: 200px !important; |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,93 @@ |
|||||
|
<template> |
||||
|
<div class="content"> |
||||
|
<div class="leftContent"> |
||||
|
<div |
||||
|
v-for="(item,index) in historyList" |
||||
|
:key="index" |
||||
|
:class="curIndex===index?'active':''" |
||||
|
class="dateItem" |
||||
|
@click="getCurRecord(item,index)" |
||||
|
> |
||||
|
{{ item.createDate }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="rightBox"> |
||||
|
<history-record-form :patient-data="patientData" :history-data="curRecord" @introduceHistory="introduceHistory" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import AllFormPrint from '@/components/360View/medicalRecord/outPatientRecord/allFormPrint.vue' |
||||
|
import HistoryRecordForm from '@/components/360View/medicalRecord/outPatientRecord/historyRecordForm.vue' |
||||
|
|
||||
|
export default { |
||||
|
name: 'HistoryCallRecord', |
||||
|
components: { HistoryRecordForm, AllFormPrint }, |
||||
|
props: ['patientId', 'patientData'], |
||||
|
data() { |
||||
|
return { |
||||
|
historyList: [], |
||||
|
curRecord: {}, |
||||
|
curIndex: '' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.queryPatientHistory() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 历史记录列表 |
||||
|
queryPatientHistory() { |
||||
|
this.$http.get('/mjz/getPatientMjzHistory', { |
||||
|
params: { |
||||
|
patientId: this.patientId |
||||
|
} |
||||
|
}).then(res => { |
||||
|
this.historyList = res.data.data |
||||
|
if (this.historyList.length) { |
||||
|
this.curIndex = 0 |
||||
|
this.curRecord = this.historyList[0] |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
getCurRecord(item, index) { |
||||
|
this.curIndex = index |
||||
|
this.curRecord = item |
||||
|
}, |
||||
|
// 引入 |
||||
|
introduceHistory(param) { |
||||
|
this.$emit('introduceHistory', param) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.dateItem{ |
||||
|
padding: 5px; |
||||
|
} |
||||
|
.active{ |
||||
|
background: #409EFF; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.content{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
height: 100%; |
||||
|
padding: 0 0 10px 0; |
||||
|
color: #000; |
||||
|
} |
||||
|
.leftContent{ |
||||
|
width: 20%; |
||||
|
text-align: left; |
||||
|
padding-right: 10px; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.rightBox{ |
||||
|
flex: 1; |
||||
|
text-align: left; |
||||
|
padding: 0 0 0 20px; |
||||
|
font-size: 16px; |
||||
|
border-left: 1px solid #ccc; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,123 @@ |
|||||
|
<template> |
||||
|
<div id="allForeForm"> |
||||
|
<div class="printTitle"> |
||||
|
门急诊病历 |
||||
|
</div> |
||||
|
<div v-if="patientData" class="patientInfo"> |
||||
|
<div> |
||||
|
姓名：{{ patientData.patientName }} |
||||
|
</div> |
||||
|
<div> |
||||
|
性别：{{ patientData.patientSex }} |
||||
|
</div> |
||||
|
<div> |
||||
|
年龄：{{ patientData.patientAge }} |
||||
|
</div> |
||||
|
<div> |
||||
|
登记号：{{ patientData.patientId }} |
||||
|
</div> |
||||
|
<div v-if="historyData"> |
||||
|
日期：{{ historyData.createDate }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="historyData"> |
||||
|
<div class="labelItem"> |
||||
|
<span>主诉：</span> |
||||
|
{{ historyData.zhuSu }} |
||||
|
<span v-if="historyData.zhuSu" @click="introduceHistory(historyData.zhuSu,'主诉')">【引入】</span> |
||||
|
</div> |
||||
|
<div class="labelItem"> |
||||
|
<span>现病史：</span> |
||||
|
{{ historyData.xbs }} |
||||
|
<span v-if="historyData.xbs" @click="introduceHistory(historyData.xbs,'现病史')">【引入】</span> |
||||
|
</div> |
||||
|
<div class="labelItem"> |
||||
|
<span>既往病史：</span> |
||||
|
{{ historyData.jws }} |
||||
|
<span v-if="historyData.jws" @click="introduceHistory(historyData.jws,'既往病史')">【引入】</span> |
||||
|
</div> |
||||
|
<div class="labelItem"> |
||||
|
<span>过敏史：</span> |
||||
|
{{ historyData.gms }} |
||||
|
<span v-if="historyData.gms" @click="introduceHistory(historyData.gms,'过敏史')">【引入】</span> |
||||
|
</div> |
||||
|
<div class="labelItem"> |
||||
|
<span>周身其他病史：</span> |
||||
|
{{ historyData.zsqtbs }} |
||||
|
<span v-if="historyData.zsqtbs" @click="introduceHistory(historyData.zsqtbs,'周身其他病史')">【引入】</span> |
||||
|
</div> |
||||
|
<div class="labelItem"> |
||||
|
<span>诊断：</span> |
||||
|
{{ historyData.zd }} |
||||
|
<span v-if="historyData.zd" @click="introduceHistory(historyData.zd,'诊断')">【引入】</span> |
||||
|
</div> |
||||
|
<div class="labelItem"> |
||||
|
<span>处理：</span> |
||||
|
{{ historyData.cl }} |
||||
|
<span v-if="historyData.cl" @click="introduceHistory(historyData.cl,'处理')">【引入】</span> |
||||
|
</div> |
||||
|
<div class="labelItem"> |
||||
|
<span>治疗意见：</span> |
||||
|
{{ historyData.zlyj }} |
||||
|
<span v-if="historyData.zlyj" @click="introduceHistory(historyData.zlyj,'治疗意见')">【引入】</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'HistoryRecordForm', |
||||
|
props: ['patientData', 'historyData'], |
||||
|
methods: { |
||||
|
introduceHistory(content, type) { |
||||
|
const param = { |
||||
|
content, |
||||
|
type |
||||
|
} |
||||
|
this.$emit('introduceHistory', param) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.title{ |
||||
|
text-align: center; |
||||
|
margin-top: 50px; |
||||
|
} |
||||
|
#allForeForm{ |
||||
|
text-align: left; |
||||
|
} |
||||
|
.fore{ |
||||
|
width: calc(100% - 10px); |
||||
|
} |
||||
|
.labelItem{ |
||||
|
font-size: 16px; |
||||
|
word-break: break-all; |
||||
|
margin: 5px 0; |
||||
|
span{ |
||||
|
display: inline-block; |
||||
|
} |
||||
|
span:nth-child(1){ |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
span:nth-child(2){ |
||||
|
color: #409EFF; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
.printTitle{ |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.patientInfo{ |
||||
|
display: flex; |
||||
|
border-bottom: 1px solid #000; |
||||
|
padding: 10px 0; |
||||
|
>div{ |
||||
|
padding-right: 20px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,5 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<router-view /> |
||||
|
</div> |
||||
|
</template> |
||||
@ -0,0 +1,151 @@ |
|||||
|
<template> |
||||
|
<div class="template-add-dialog"> |
||||
|
<el-dialog |
||||
|
width="40%" |
||||
|
:visible.sync="visible" |
||||
|
:title="!dataForm.id ? '新增模板分类' : '修改模板分类'" |
||||
|
:close-on-click-modal="false" |
||||
|
:close-on-press-escape="false" |
||||
|
@close="closeDialog" |
||||
|
> |
||||
|
<el-form |
||||
|
ref="dataForm" |
||||
|
:model="dataForm" |
||||
|
:rules="dataRule" |
||||
|
label-width="auto" |
||||
|
> |
||||
|
<el-form-item prop="content" label="分类名称"> |
||||
|
<el-input |
||||
|
v-model="dataForm.content" |
||||
|
placeholder="分类名称" |
||||
|
size="small" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<!-- 排序 --> |
||||
|
<el-form-item prop="sort" label="排序"> |
||||
|
<el-input-number v-model="dataForm.sort" controls-position="right" :min="0" label="排序" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template slot="footer"> |
||||
|
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
||||
|
<el-button type="primary" @click="dataFormSubmitHandle">{{ $t('confirm') }}</el-button> |
||||
|
<!-- <el-button type="primary" @click="exportContent">引入</el-button> --> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
systemInfo: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
visible: false, |
||||
|
modelType: '', |
||||
|
dataForm: { |
||||
|
pid: 0, |
||||
|
// 类型 1:科室，2:个人 |
||||
|
type: '', |
||||
|
sort: 0, |
||||
|
content: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
dataRule() { |
||||
|
return { |
||||
|
content: [ |
||||
|
{ required: true, message: '请输入内容', trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
init() { |
||||
|
this.visible = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.dataForm.resetFields() |
||||
|
if (this.dataForm.id) { |
||||
|
!this.modelType && this.getInfo() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取信息 |
||||
|
getInfo() { |
||||
|
this.$http.get('/bd/template/getTemplateById', { |
||||
|
params: { |
||||
|
id: this.dataForm.id |
||||
|
} |
||||
|
}).then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} |
||||
|
this.dataForm = res.data |
||||
|
}).catch(() => {}) |
||||
|
}, |
||||
|
// 表单提交 |
||||
|
dataFormSubmitHandle() { |
||||
|
this.$refs.dataForm.validate((valid) => { |
||||
|
if (!valid) { |
||||
|
return false |
||||
|
} |
||||
|
this.dataForm.type = parseFloat(this.dataForm.type) |
||||
|
let url = '' |
||||
|
if (this.dataForm.id) { |
||||
|
url = '/bd/template/updateBdTemplate' |
||||
|
} else { |
||||
|
url = '/bd/template/addBdTemplate' |
||||
|
} |
||||
|
this.$http.post(url, { ...this.dataForm }) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} |
||||
|
this.$message({ |
||||
|
message: this.$t('prompt.success'), |
||||
|
type: 'success', |
||||
|
duration: 500, |
||||
|
onClose: () => { |
||||
|
this.visible = false |
||||
|
this.$emit('refreshDataList') |
||||
|
} |
||||
|
}) |
||||
|
}).catch(() => {}) |
||||
|
}) |
||||
|
}, |
||||
|
closeDialog() { |
||||
|
this.$emit('closeDialog') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.template-add-dialog{ |
||||
|
.el-form-item { |
||||
|
margin-bottom:8px |
||||
|
} |
||||
|
.el-select { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.el-form-item__error { |
||||
|
top: 27% !important; |
||||
|
right: 10px !important; |
||||
|
left: auto; |
||||
|
} |
||||
|
.el-input-number { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.el-input__inner { |
||||
|
text-align: left; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,149 @@ |
|||||
|
<template> |
||||
|
<div class="template-add-dialog"> |
||||
|
<el-dialog |
||||
|
width="50%" |
||||
|
:visible.sync="visible" |
||||
|
:title="!dataForm.id ? '新增' : '编辑'" |
||||
|
:close-on-click-modal="false" |
||||
|
:close-on-press-escape="false" |
||||
|
@close="closeDialog" |
||||
|
> |
||||
|
<el-form |
||||
|
ref="dataForm" |
||||
|
:model="dataForm" |
||||
|
:rules="dataRule" |
||||
|
label-width="auto" |
||||
|
> |
||||
|
<el-form-item prop="contentValue" label="模板内容" style="margin-top:20px;"> |
||||
|
<el-input |
||||
|
v-model="dataForm.contentValue" |
||||
|
type="textarea" |
||||
|
:autosize="{ minRows: 18}" |
||||
|
placeholder="请输入内容" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<!-- 排序 --> |
||||
|
<el-form-item prop="sort" label="排序"> |
||||
|
<el-input-number v-model="dataForm.sort" controls-position="right" :min="0" label="排序" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template slot="footer"> |
||||
|
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
||||
|
<el-button type="primary" @click="dataFormSubmitHandle">{{ $t('confirm') }}</el-button> |
||||
|
<!-- <el-button type="primary" @click="exportContent">引入</el-button> --> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
systemInfo: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
visible: false, |
||||
|
type: '', |
||||
|
dataForm: { |
||||
|
treeId: '', |
||||
|
contentValue: '', |
||||
|
sort: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
dataRule() { |
||||
|
return { |
||||
|
contentValue: [ |
||||
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
init() { |
||||
|
this.visible = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.dataForm.resetFields() |
||||
|
if (this.dataForm.id) { |
||||
|
this.getInfo() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取信息 |
||||
|
getInfo() { |
||||
|
this.$http.get('/bd/template/getInfoById', { |
||||
|
params: { |
||||
|
id: this.dataForm.id |
||||
|
} |
||||
|
}).then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} |
||||
|
this.dataForm = res.data |
||||
|
}).catch(() => {}) |
||||
|
}, |
||||
|
// 表单提交 |
||||
|
dataFormSubmitHandle() { |
||||
|
this.$refs.dataForm.validate((valid) => { |
||||
|
if (!valid) { |
||||
|
return false |
||||
|
} |
||||
|
let url = '' |
||||
|
if (this.dataForm.id) { |
||||
|
url = '/bd/template/updateBdTemplateValue' |
||||
|
} else { |
||||
|
url = '/bd/template/addBdTemplateValue' |
||||
|
} |
||||
|
this.updateTemplate({ ...this.dataForm }, url) |
||||
|
}) |
||||
|
}, |
||||
|
// 新增/修改 |
||||
|
updateTemplate(dataForm, url) { |
||||
|
this.$http.post(url, { ...dataForm }).then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} |
||||
|
this.$message({ |
||||
|
message: this.$t('prompt.success'), |
||||
|
type: 'success', |
||||
|
duration: 500, |
||||
|
onClose: () => { |
||||
|
this.visible = false |
||||
|
this.$emit('refreshDataList') |
||||
|
} |
||||
|
}) |
||||
|
}).catch(() => {}) |
||||
|
}, |
||||
|
closeDialog() { |
||||
|
this.$emit('closeDialog') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.template-add-dialog{ |
||||
|
.el-form-item { |
||||
|
margin-bottom:8px |
||||
|
} |
||||
|
.el-select { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.el-form-item__error { |
||||
|
top: 27% !important; |
||||
|
right: 10px !important; |
||||
|
left: auto; |
||||
|
} |
||||
|
.el-input__inner { |
||||
|
text-align: left; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,64 @@ |
|||||
|
<template> |
||||
|
<div class="template-management-father"> |
||||
|
<div class="template-management"> |
||||
|
<el-tabs v-model="mainActiveName"> |
||||
|
<el-tab-pane label="科室" name="1" class="tab-p"> |
||||
|
<tabFun v-if="mainActiveName==='1'" ref="tabFunRef1" main-active-name="1" :page-title="pageTitle" @yinruTemplateClick="yinruTemplateClick" /> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="个人" name="2" class="tab-p"> |
||||
|
<tabFun v-if="mainActiveName==='2'" ref="tabFunRef2" main-active-name="2" :page-title="pageTitle" @yinruTemplateClick="yinruTemplateClick" /> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
<script> |
||||
|
import tabFun from './tab-fun.vue' |
||||
|
export default { |
||||
|
components: { |
||||
|
tabFun |
||||
|
}, |
||||
|
props: { |
||||
|
pageTitle: { |
||||
|
type: String, |
||||
|
default: '模板管理' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
mainActiveName: '1' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
methods: { |
||||
|
// 引入内容 |
||||
|
yinruTemplateClick(item) { |
||||
|
this.$emit('yinruTemplateClick', item) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.template-management-father { |
||||
|
height: calc(100vh - 50px - 32px); |
||||
|
width: 100%; |
||||
|
} |
||||
|
.template-management { |
||||
|
background: #fff; |
||||
|
padding: 12px; |
||||
|
width: 100%; |
||||
|
height: calc(100vh - 60px); |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" > |
||||
|
.template-management { |
||||
|
.el-tabs__nav-wrap::after { |
||||
|
height: 1px !important; |
||||
|
} |
||||
|
.el-tabs__header { |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,378 @@ |
|||||
|
<template> |
||||
|
<div class="tab-fun"> |
||||
|
<div class="leftlist"> |
||||
|
<div class="leftlist-ul" :class="pageTitle=='模板管理' ? 'leftlistMb' : 'leftlistDa'"> |
||||
|
<el-tree |
||||
|
ref="templateTree" |
||||
|
:data="fenleiList" |
||||
|
:props="defaultProps" |
||||
|
node-key="id" |
||||
|
accordion |
||||
|
highlight-current |
||||
|
default-expand-all |
||||
|
:expand-on-click-node="false" |
||||
|
> |
||||
|
<span slot-scope="{ node, data }" class="custom-tree-node treeItem" @click="leftListClick(data)"> |
||||
|
<el-tooltip show-overflow-tip class="item" effect="dark" placement="top-start"> |
||||
|
<div slot="content" class="tooltips">{{ node.label }}</div> |
||||
|
<span class="treeContent">{{ node.label }}</span> |
||||
|
</el-tooltip> |
||||
|
<span v-show="pageTitle=='模板管理'"> |
||||
|
<el-button |
||||
|
class="operateBtn" |
||||
|
type="text" |
||||
|
size="mini" |
||||
|
icon="el-icon-edit" |
||||
|
@click="() => addEditFenlei(data)" |
||||
|
/> |
||||
|
<el-button |
||||
|
class="operateBtn" |
||||
|
type="text" |
||||
|
size="mini" |
||||
|
icon="el-icon-plus" |
||||
|
@click="() => addEditFenlei(data,'新增子节点')" |
||||
|
/> |
||||
|
<el-button |
||||
|
class="operateBtn" |
||||
|
type="text" |
||||
|
size="mini" |
||||
|
icon="el-icon-delete" |
||||
|
@click="() => deleteFenleiClick(data,'分类')" |
||||
|
/> |
||||
|
</span> |
||||
|
</span> |
||||
|
</el-tree> |
||||
|
</div> |
||||
|
<el-button v-show="pageTitle=='模板管理'" type="primary" icon="el-icon-plus" class="plus-fenlei" circle @click="addEditFenlei" /> |
||||
|
</div> |
||||
|
<div class="rightlist"> |
||||
|
<div v-if="contentList.length" class="rightlist-ul" :class="pageTitle=='模板管理' ? 'rightlistMb' : 'rightlistDa'"> |
||||
|
<div v-for="(item,index) in contentList" :key="index" class="flex rightli" @dblclick="yinruTemplateClick(item)"> |
||||
|
<div class="rightContentli"> |
||||
|
<span>{{ item.contentValue }}</span> |
||||
|
</div> |
||||
|
<span v-if="pageTitle=='模板管理'" class="buttonli"> |
||||
|
<span |
||||
|
style="color: #1890ff; padding-right: 8px" |
||||
|
class="cursor" |
||||
|
@click="setOften(item)" |
||||
|
> |
||||
|
<el-icon :class="[item.usual?'el-icon-star-on':'el-icon-star-off',item.usual?'active':'']" /> |
||||
|
</span> |
||||
|
<span |
||||
|
style="color: #1890ff; padding-right: 8px" |
||||
|
class="cursor" |
||||
|
@click="addEditContent(item)" |
||||
|
>编辑</span> |
||||
|
<span |
||||
|
style="color: #ff4d4f;" |
||||
|
class="cursor" |
||||
|
@click="deleteFenleiClick(item)" |
||||
|
>删除</span> |
||||
|
</span> |
||||
|
<span v-else class="buttonli"> |
||||
|
<span |
||||
|
style="color: #1890ff; padding-right: 8px" |
||||
|
class="cursor" |
||||
|
@click="yinruTemplateClick(item)" |
||||
|
>引入</span> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-else class="nodata"> |
||||
|
<img src="@/assets/img/nodata.png" alt=""> |
||||
|
</div> |
||||
|
<el-button v-show="pageTitle=='模板管理'" type="primary" icon="el-icon-plus" class="plus" circle @click="addEditContent()" /> |
||||
|
</div> |
||||
|
<add-or-update |
||||
|
v-if="addContentVisible" |
||||
|
ref="addContentRef" |
||||
|
@refreshDataList="getContent" |
||||
|
@closeDialog="addContentVisible=false" |
||||
|
/> |
||||
|
<addFenlei |
||||
|
v-if="addfenleiVisible" |
||||
|
ref="addfenleiRef" |
||||
|
@refreshDataList="getfenleiList" |
||||
|
@closeDialog="addfenleiVisible=false" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
<script> |
||||
|
import addOrUpdate from './add-or-update.vue' |
||||
|
import mixinViewModule from '@/mixins/view-module' |
||||
|
import addFenlei from './add-fenlei.vue' |
||||
|
export default { |
||||
|
components: { |
||||
|
addOrUpdate, |
||||
|
addFenlei |
||||
|
}, |
||||
|
mixins: [mixinViewModule], |
||||
|
props: { |
||||
|
mainActiveName: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
pageTitle: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
addContentVisible: false, |
||||
|
addfenleiVisible: false, |
||||
|
fenleiList: [], |
||||
|
currentFenleiList: {}, |
||||
|
contentList: [], |
||||
|
currentContentList: {}, |
||||
|
defaultProps: { |
||||
|
children: 'childList', |
||||
|
label: 'content' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getfenleiList() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取分类列表 |
||||
|
async getfenleiList() { |
||||
|
const { data: res } = await this.$http.get('/bd/template/getListByType', { |
||||
|
params: { |
||||
|
type: this.mainActiveName |
||||
|
} |
||||
|
}) |
||||
|
if (res.code === 0) { |
||||
|
this.fenleiList = res.data |
||||
|
res.data && res.data.length > 0 ? this.currentFenleiList = res.data[0] : '' |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.templateTree.setCurrentKey(this.currentFenleiList.id) |
||||
|
}) |
||||
|
res.data && res.data.length > 0 ? this.getContent() : '' |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}, |
||||
|
// 获取内容 |
||||
|
async getContent() { |
||||
|
const { data: res } = await this.$http.get('/bd/template/getInfoByTreeId', { |
||||
|
params: { |
||||
|
treeId: this.currentFenleiList.id |
||||
|
} |
||||
|
}) |
||||
|
if (res.code === 0) { |
||||
|
this.contentList = res.data |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}, |
||||
|
// 点击tab |
||||
|
handleClick(item) { |
||||
|
this.getfenleiList() |
||||
|
}, |
||||
|
// 点击左侧列表 |
||||
|
leftListClick(formItem) { |
||||
|
this.currentFenleiList = formItem |
||||
|
this.getContent() |
||||
|
}, |
||||
|
// 新增/编辑分类 |
||||
|
addEditFenlei(item, other) { |
||||
|
this.addfenleiVisible = true |
||||
|
this.$nextTick(() => { |
||||
|
// 类型 1:科室，2:个人 |
||||
|
this.$refs.addfenleiRef.dataForm.type = this.mainActiveName |
||||
|
this.$refs.addfenleiRef.modelType = other |
||||
|
item && !other ? this.$refs.addfenleiRef.dataForm.id = item.id : '' |
||||
|
item && other ? this.$refs.addfenleiRef.dataForm.pid = item.id : '' |
||||
|
this.$refs.addfenleiRef.init() |
||||
|
}) |
||||
|
}, |
||||
|
// 设为常用 |
||||
|
setOften(item) { |
||||
|
const usual = !item.usual |
||||
|
this.$http.post('/bd/template/updateBdTemplateValue', { id: item.id, usual, sort: item.sort }).then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} |
||||
|
this.$message({ |
||||
|
message: this.$t('prompt.success'), |
||||
|
type: 'success', |
||||
|
duration: 500, |
||||
|
onClose: () => { |
||||
|
this.visible = false |
||||
|
this.getContent() |
||||
|
} |
||||
|
}) |
||||
|
}).catch(() => {}) |
||||
|
}, |
||||
|
// 新增内容 |
||||
|
addEditContent(item) { |
||||
|
this.addContentVisible = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.addContentRef.dataForm.treeId = this.currentFenleiList.id // 新增所需的树id |
||||
|
item ? this.$refs.addContentRef.dataForm.id = item.id : '' // 修改 |
||||
|
this.$refs.addContentRef.init() // 打开弹窗 |
||||
|
}) |
||||
|
}, |
||||
|
// 删除分类 |
||||
|
deleteFenleiClick(item, flag) { |
||||
|
const text = flag === '分类' ? '删除此分类将同时删除分类级下的所有内容，您确定要删除此模板分类吗？' : '您确定要删除此内容吗?' |
||||
|
const url = flag === '分类' ? '/bd/template/deleteBdTemplate' : '/bd/template/deleteBdTemplateValue' |
||||
|
this.$confirmFun(text).then(async() => { |
||||
|
const { data: res } = await this.$http.get(url, { |
||||
|
params: { |
||||
|
id: item.id |
||||
|
} |
||||
|
}) |
||||
|
if (res.code === 0) { |
||||
|
this.$message({ |
||||
|
message: this.$t('prompt.success'), |
||||
|
type: 'success', |
||||
|
duration: 500, |
||||
|
onClose: () => { |
||||
|
flag === '分类' ? (this.getfenleiList(), this.getContent()) : this.getContent() |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 引入内容 |
||||
|
yinruTemplateClick(item) { |
||||
|
this.$emit('yinruTemplateClick', item) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.nodata{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
::v-deep .el-icon-caret-right:before { |
||||
|
color: #262626; |
||||
|
} |
||||
|
.treeContent{ |
||||
|
width: 100px; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{ |
||||
|
background-color: #409EFF; |
||||
|
color: #FFFFFF; |
||||
|
button{ |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
.treeItem{ |
||||
|
width: 100%; |
||||
|
padding-right: 10px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
.operateBtn{ |
||||
|
font-size: 16px; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
.tooltips{ |
||||
|
max-width: 200px; |
||||
|
} |
||||
|
.tab-fun { |
||||
|
display: flex; |
||||
|
height: calc(100vh - 125px); |
||||
|
.flex{ |
||||
|
display: flex; |
||||
|
} |
||||
|
.active{ |
||||
|
font-size: 18px !important; |
||||
|
} |
||||
|
.leftlist { |
||||
|
width: 240px; |
||||
|
min-width: 200px; |
||||
|
border-right: 1px solid #ccc; |
||||
|
position: relative; |
||||
|
} |
||||
|
.leftlist-ul { |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.leftlistMb{ |
||||
|
height: calc(100vh - 160px); |
||||
|
|
||||
|
} |
||||
|
.leftlistDa { |
||||
|
height: calc(100vh - 110px); |
||||
|
} |
||||
|
.plus-fenlei { |
||||
|
position: absolute; |
||||
|
right: 10px; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
.rightlist { |
||||
|
flex: 1; |
||||
|
position: relative; |
||||
|
} |
||||
|
.rightlist-ul { |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.rightlistMb{ |
||||
|
height: calc(100vh - 160px); |
||||
|
|
||||
|
} |
||||
|
.rightlistDa { |
||||
|
height: calc(100vh - 110px); |
||||
|
} |
||||
|
.plus { |
||||
|
position: absolute; |
||||
|
right: 0px; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
.li { |
||||
|
padding: 6px 12px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
border-bottom: 1px solid #ccc; |
||||
|
} |
||||
|
.currentLi { |
||||
|
background: #1890ff; |
||||
|
color: #fff; |
||||
|
padding: 6px 12px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.rightli { |
||||
|
padding: 6px 10px; |
||||
|
text-align: left; |
||||
|
border-bottom: 1px solid #ebeef5; |
||||
|
white-space: normal; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
.buttonli { |
||||
|
display: inline-block; |
||||
|
text-align: center; |
||||
|
padding-left:20px; |
||||
|
} |
||||
|
.rightContentli { |
||||
|
flex: 1; |
||||
|
} |
||||
|
.rightContentli-title { |
||||
|
font-weight: 700; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.rightli:hover { |
||||
|
background: #f5f7fa; |
||||
|
} |
||||
|
.cursor { |
||||
|
cursor: pointer; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue