bianyaqi
3 years ago
135 changed files with 996 additions and 59499 deletions
@ -1,99 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog title="添加数据" class="addInfo" :visible.sync="visible" append-to-body @close="closedDialog"> |
|
||||
123 |
|
||||
</el-dialog> |
|
||||
|
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import dialogjs from '@/mixins/dialog' |
|
||||
import infoDetail from './infoDetail' |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
infoDetail |
|
||||
}, |
|
||||
mixins: [dialogjs], |
|
||||
props: { |
|
||||
patientIdNumber: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
tableData: [ |
|
||||
{ |
|
||||
date: '2016-05-02', |
|
||||
name: '王小虎1', |
|
||||
address: '上海市普陀区金沙江路 1518 弄' |
|
||||
}, { |
|
||||
date: '2016-05-04', |
|
||||
name: '王小虎2', |
|
||||
address: '上海市普陀区金沙江路 1517 弄' |
|
||||
}, { |
|
||||
date: '2016-05-01', |
|
||||
name: '王小虎3', |
|
||||
address: '上海市普陀区金沙江路 1519 弄' |
|
||||
}, { |
|
||||
date: '2016-05-03', |
|
||||
name: '王小虎4', |
|
||||
address: '上海市普陀区金沙江路 1516 弄' |
|
||||
}], |
|
||||
setPlanList: [], |
|
||||
addFollowList: [], |
|
||||
patientInfoHeadHeight: '', |
|
||||
crfSelectVisible: false |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
|
|
||||
}, |
|
||||
created() { |
|
||||
|
|
||||
}, |
|
||||
mounted() { |
|
||||
|
|
||||
}, |
|
||||
methods: { |
|
||||
closedDialog() { |
|
||||
|
|
||||
}, |
|
||||
// 上下移动 |
|
||||
handleMove(scope, moveType, list) { |
|
||||
const { $index } = scope |
|
||||
if (moveType === 'up') { |
|
||||
if ($index === 0) return |
|
||||
const isUp = list[$index - 1] |
|
||||
list.splice($index - 1, 1) |
|
||||
list.splice($index, 0, isUp) |
|
||||
} else { |
|
||||
if ($index === list.length - 1) return |
|
||||
const isDown = list[$index + 1] |
|
||||
list.splice($index + 1, 1) |
|
||||
list.splice($index, 0, isDown) |
|
||||
} |
|
||||
}, |
|
||||
handleDel(scope, moveType, list) { |
|
||||
console.log(scope) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" > |
|
||||
|
|
||||
</style> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.info { |
|
||||
width: 600px; |
|
||||
.cell-cursor { |
|
||||
cursor: pointer; |
|
||||
color: #1e79ff; |
|
||||
} |
|
||||
.table-column-disable { |
|
||||
color: #dddd; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,118 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
title="选择表单" |
|
||||
:visible.sync="visible" |
|
||||
append-to-body |
|
||||
> |
|
||||
<el-table |
|
||||
v-loading="dataListLoading" |
|
||||
:data="dataList" |
|
||||
row-key="id" |
|
||||
border |
|
||||
style="width: 100%;" |
|
||||
> |
|
||||
<!-- 名称 --> |
|
||||
<el-table-column prop="name" :label="'名称'" /> |
|
||||
<!-- 操作 --> |
|
||||
<el-table-column |
|
||||
prop="operation" |
|
||||
:label="$t('handle')" |
|
||||
fixed="right" |
|
||||
width="150" |
|
||||
> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-button |
|
||||
type="text" |
|
||||
size="small" |
|
||||
@click="preview(scope.row.id)" |
|
||||
>{{ $t('preview') }}</el-button> |
|
||||
<el-button |
|
||||
type="text" |
|
||||
size="small" |
|
||||
@click="followUp(scope.row.id)" |
|
||||
>{{ '填写' }}</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
|
|
||||
<template slot="footer"> |
|
||||
<el-button @click="visible = false">{{ $t('close') }}</el-button> |
|
||||
</template> |
|
||||
|
|
||||
<!-- 预览 --> |
|
||||
<preview v-if="previewVisible" ref="preview" /> |
|
||||
<!-- 填写 --> |
|
||||
<follow-up v-if="followUpVisible" ref="followUp" /> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import preview from '@/components/hm-crf/preview' |
|
||||
import followUp from '@/components/hm-crf/followUp' |
|
||||
|
|
||||
export default { |
|
||||
components: { preview, followUp }, |
|
||||
props: { |
|
||||
patientIdNumber: { |
|
||||
type: String, |
|
||||
required: true |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
previewVisible: false, |
|
||||
followUpVisible: false, |
|
||||
dataListLoading: false, |
|
||||
dataList: [] |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
|
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.dataListLoading = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$http.get('/crf/page', { |
|
||||
params: { |
|
||||
projectId: window.SITE_CONFIG['projectId'], |
|
||||
order: '', |
|
||||
orderField: '', |
|
||||
page: 1, |
|
||||
limit: 1000 |
|
||||
} |
|
||||
}).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.dataList = res.data.list |
|
||||
this.dataListLoading = false |
|
||||
} |
|
||||
}).catch(() => {}) |
|
||||
}) |
|
||||
}, |
|
||||
preview(id) { |
|
||||
this.previewVisible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.preview.dataForm.id = id |
|
||||
this.$refs.preview.init() |
|
||||
}) |
|
||||
}, |
|
||||
followUp(id) { |
|
||||
this.followUpVisible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.followUp.crfId = id |
|
||||
this.$refs.followUp.patientIdNumber = this.patientIdNumber |
|
||||
this.$refs.followUp.init() |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
|
|
||||
</style> |
|
||||
@ -1,855 +0,0 @@ |
|||||
<template> |
|
||||
<div class="foreBox"> |
|
||||
<div class="moveIcon"> |
|
||||
<p @click="moveAll(1)"><i class="el-icon-back" /></p> |
|
||||
<p style="margin-top: 5px" @click="moveAll(2)"><i class="el-icon-back" style="transform: rotateY(180deg)" /></p> |
|
||||
</div> |
|
||||
<div style="display: flex;margin-top: 32px"> |
|
||||
<div style="width: 200px;padding-right: 8px;text-align: left;overflow-x: auto"> |
|
||||
<p style="font-weight: bold;margin-bottom: 12px;text-align: left">描述项模板</p> |
|
||||
<el-button v-if="!treeCaseList.length" type="primary" size="small" @click="append(1)">+新增</el-button> |
|
||||
<el-tree |
|
||||
ref="tree" |
|
||||
:data="treeCaseList" |
|
||||
:props="treeProps" |
|
||||
:default-expand-all="true" |
|
||||
:expand-on-click-node="false" |
|
||||
node-key="id" |
|
||||
highlight-current |
|
||||
@node-click="templateData" |
|
||||
> |
|
||||
<span slot-scope="{ node, data }" class="custom-tree-node"> |
|
||||
<span style="display: inline-block;min-width: 80px"> |
|
||||
<span>{{ node.label }}</span> |
|
||||
</span> |
|
||||
<span> |
|
||||
<el-button v-if="!data.treeId" icon="el-icon-plus" style="font-size: 12px;color: #409EFF" type="text" @click.stop="append(2, data)"></el-button> |
|
||||
<el-button icon="el-icon-delete" style="font-size: 12px;color: #F56C6C" type="text" @click.stop="remove(node, data)"></el-button> |
|
||||
</span> |
|
||||
</span> |
|
||||
</el-tree> |
|
||||
</div> |
|
||||
<el-table |
|
||||
id="foreCheck" |
|
||||
ref="multipleTable" |
|
||||
:data="tableData" |
|
||||
style="margin: 8px 8px 0 0" |
|
||||
@select="selection" |
|
||||
> |
|
||||
<el-table-column |
|
||||
type="selection" |
|
||||
width="55" |
|
||||
/> |
|
||||
<el-table-column |
|
||||
align="center" |
|
||||
label="OD" |
|
||||
> |
|
||||
<template slot-scope="scope"> |
|
||||
<div> |
|
||||
<span v-if="scope.row.sort === 1"> |
|
||||
<span style="margin-right: 16px">结膜：充血</span><treeSelect |
|
||||
v-model="scope.row.od" |
|
||||
:props="treeProps" |
|
||||
style="display: inline-block;width: 60%" |
|
||||
:options="scope.row.data" |
|
||||
:multiple="true" |
|
||||
:filterable="true" |
|
||||
:check-strictly="true" |
|
||||
:default-expand-all="true" |
|
||||
@handleNode="handleNode(scope.$index,'od', $event)" |
|
||||
@add="addTree(scope.row, $event)" |
|
||||
@remove="removeTree" |
|
||||
/> |
|
||||
</span> |
|
||||
<span v-if="scope.row.sort === 2"> |
|
||||
<span style="margin-right: 16px">结膜：分泌物</span><treeSelect |
|
||||
v-model="scope.row.od" |
|
||||
:props="treeProps" |
|
||||
style="display: inline-block;width: 60%" |
|
||||
:options="scope.row.data" |
|
||||
:multiple="true" |
|
||||
:filterable="true" |
|
||||
:check-strictly="true" |
|
||||
:default-expand-all="true" |
|
||||
@handleNode="handleNode(scope.$index,'od', $event)" |
|
||||
@add="addTree(scope.row, $event)" |
|
||||
@remove="removeTree" |
|
||||
/> |
|
||||
</span> |
|
||||
<span v-if="scope.row.sort === 99"> |
|
||||
<treeSelect v-model="scope.row.od" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'od', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|
||||
</span> |
|
||||
<span v-if="!scope.row.sort && !scope.row.id">{{ scope.row.name }}</span> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
class="move" |
|
||||
align="center" |
|
||||
width="120" |
|
||||
> |
|
||||
<template slot-scope="scope"> |
|
||||
<div> |
|
||||
<p @click="moveHandle(scope.$index,1, scope.row)"><i class="el-icon-back" /></p> |
|
||||
<p style="margin-top: 5px" @click="moveHandle(scope.$index,2, scope.row)"><i class="el-icon-back" style="transform: rotateY(180deg)" /></p> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column |
|
||||
align="center" |
|
||||
label="OS" |
|
||||
width="300" |
|
||||
> |
|
||||
<template slot-scope="scope"> |
|
||||
<div> |
|
||||
<span v-if="scope.row.sort === 1"> |
|
||||
<span style="margin-right: 16px">结膜：充血</span><treeSelect |
|
||||
v-model="scope.row.os" |
|
||||
:props="treeProps" |
|
||||
style="display: inline-block;width: 60%" |
|
||||
:options="scope.row.data" |
|
||||
:multiple="true" |
|
||||
:filterable="true" |
|
||||
:check-strictly="true" |
|
||||
:default-expand-all="true" |
|
||||
@handleNode="handleNode(scope.$index,'os', $event)" |
|
||||
@add="addTree(scope.row, $event)" |
|
||||
@remove="removeTree" |
|
||||
/> |
|
||||
</span> |
|
||||
<span v-if="scope.row.sort === 2"> |
|
||||
<span style="margin-right: 16px">结膜：分泌物</span><treeSelect |
|
||||
v-model="scope.row.os" |
|
||||
:props="treeProps" |
|
||||
style="display: inline-block;width: 60%" |
|
||||
:options="scope.row.data" |
|
||||
:multiple="true" |
|
||||
:filterable="true" |
|
||||
:check-strictly="true" |
|
||||
:default-expand-all="true" |
|
||||
@handleNode="handleNode(scope.$index,'os', $event)" |
|
||||
@add="addTree(scope.row, $event)" |
|
||||
@remove="removeTree" |
|
||||
/> |
|
||||
</span> |
|
||||
<span v-if="scope.row.sort === 99"> |
|
||||
<treeSelect v-model="scope.row.os" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'os', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|
||||
</span> |
|
||||
<span v-if="!scope.row.sort && !scope.row.id">{{ scope.row.name }}</span> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
<el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%"> |
|
||||
<el-form :model="form" style="margin-top: 16px"> |
|
||||
<el-form-item label="名称：" label-width="120px"> |
|
||||
<el-input v-model="form.name" auto-complete="off" style="width: 300px" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<div slot="footer" class="dialog-footer"> |
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button> |
|
||||
<el-button type="primary" @click="handSaveBtn">确 定</el-button> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
<el-dialog title="新建模板" :visible.sync="templateFlag" width="40%"> |
|
||||
<el-form :model="form" style="margin-top: 16px"> |
|
||||
<el-form-item label="名称：" label-width="120px"> |
|
||||
<el-input v-model="form.name" auto-complete="off" style="width: 300px" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="目录：" label-width="120px"> |
|
||||
<el-tree |
|
||||
ref="tree" |
|
||||
:data="treeTemplate" |
|
||||
:props="treeProps" |
|
||||
:default-expand-all="true" |
|
||||
:expand-on-click-node="false" |
|
||||
node-key="id" |
|
||||
highlight-current |
|
||||
@node-click="templateNodeClick" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<div slot="footer" class="dialog-footer"> |
|
||||
<el-button @click="templateFlag = false">取 消</el-button> |
|
||||
<el-button type="primary" @click="saveTreeTemplete">确 定</el-button> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import _ from 'lodash' |
|
||||
import eventBus from '@/page-subspecialty/utils/eventBus' |
|
||||
import treeSelect from '@/components/360View/itemSelect' |
|
||||
import axios from 'axios' |
|
||||
import Cookies from 'js-cookie' |
|
||||
import ForeForm from '@/components/360View/medicalRecord/outPatientRecord/foreForm.vue' |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
export default { |
|
||||
components: { |
|
||||
treeSelect |
|
||||
}, |
|
||||
mixins: [], |
|
||||
props: { |
|
||||
patientIdNumber: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
patientId: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
isSearch: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
}, |
|
||||
inject: ['refresh'], |
|
||||
data() { |
|
||||
return { |
|
||||
userData: {}, |
|
||||
title: '', |
|
||||
sourceData: [], |
|
||||
treeCaseList: [], |
|
||||
treeTemplate: [], |
|
||||
addType: '', |
|
||||
treeProps: { |
|
||||
value: 'id', |
|
||||
label: 'name', |
|
||||
children: 'child' |
|
||||
}, |
|
||||
type: '', |
|
||||
doctorId: '', |
|
||||
deleteId: '', |
|
||||
treeId: '', |
|
||||
treeFlag: '', |
|
||||
treeName: '', |
|
||||
weight: '', |
|
||||
parentId: 0, |
|
||||
collectId: '', |
|
||||
form: { |
|
||||
name: '' |
|
||||
}, |
|
||||
multipleSelection: [], |
|
||||
templateFlag: false, |
|
||||
dialogFormVisible: false, |
|
||||
tableData: [ |
|
||||
{ |
|
||||
name: '眼睑' |
|
||||
}, { |
|
||||
name: '眼睑', |
|
||||
sort: 99, |
|
||||
id: 1, |
|
||||
type: 'anion', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}, { |
|
||||
name: '结膜' |
|
||||
}, { |
|
||||
name: '结膜', |
|
||||
id: 2, |
|
||||
sort: 1, |
|
||||
type: 'jimmy', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}, { |
|
||||
name: '结膜', |
|
||||
id: 3, |
|
||||
sort: 2, |
|
||||
type: 'jimmy', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}, { |
|
||||
name: '泪器' |
|
||||
}, { |
|
||||
name: '泪器', |
|
||||
sort: 99, |
|
||||
id: 4, |
|
||||
type: 'liq', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}, { |
|
||||
name: '角膜' |
|
||||
}, { |
|
||||
name: '角膜', |
|
||||
sort: 99, |
|
||||
id: 5, |
|
||||
type: 'Giacomo', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}, { |
|
||||
name: '前房' |
|
||||
}, { |
|
||||
name: '前房', |
|
||||
sort: 99, |
|
||||
id: 6, |
|
||||
type: 'Jianfeng', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}, { |
|
||||
name: '虹膜' |
|
||||
}, { |
|
||||
name: '虹膜', |
|
||||
sort: 99, |
|
||||
id: 7, |
|
||||
type: 'mongo', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}, { |
|
||||
name: '瞳孔' |
|
||||
}, { |
|
||||
name: '瞳孔', |
|
||||
sort: 99, |
|
||||
id: 8, |
|
||||
type: 'tonguing', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}, { |
|
||||
name: '晶状体' |
|
||||
}, { |
|
||||
name: '晶状体', |
|
||||
sort: 99, |
|
||||
id: 9, |
|
||||
type: 'jingling', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}, { |
|
||||
name: '睫状体' |
|
||||
}, { |
|
||||
name: '睫状体', |
|
||||
sort: 99, |
|
||||
id: 10, |
|
||||
type: 'jingles', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}, { |
|
||||
name: '眼位' |
|
||||
}, { |
|
||||
name: '眼位', |
|
||||
sort: 99, |
|
||||
id: 11, |
|
||||
type: 'yawn', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}, { |
|
||||
name: '眼眶' |
|
||||
}, { |
|
||||
name: '眼眶', |
|
||||
sort: 99, |
|
||||
id: 12, |
|
||||
type: 'yanking', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}, { |
|
||||
name: '眼球运动' |
|
||||
}, { |
|
||||
name: '眼球运动', |
|
||||
sort: 99, |
|
||||
id: 13, |
|
||||
type: 'yang', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}] |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
tableData: { |
|
||||
deep: true, |
|
||||
handler: (value) => { |
|
||||
if (value) { |
|
||||
eventBus.$emit('getForeData', value) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.userData = JSON.parse(window.localStorage.getItem('qg-userData')) |
|
||||
this.doctorId = this.userData.id |
|
||||
this.getforeList('2').then(() => { |
|
||||
this.queryOptions() |
|
||||
}) |
|
||||
// 查询左侧病历树 |
|
||||
this.queryTreeCase() |
|
||||
}, |
|
||||
methods: { |
|
||||
async getforeList(flag) { |
|
||||
const { data: res } = await this.$http.get('/case/getCase', { |
|
||||
params: { |
|
||||
patientId: this.patientId, |
|
||||
platform: this.isSearch, |
|
||||
flag: flag // 1病史采集2前段检查3后段检查4专科检查 |
|
||||
} |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.tableData = res.data ? JSON.parse(res.data.jsonText) : [] |
|
||||
this.tableData.forEach(item => { |
|
||||
item.flag = false |
|
||||
}) |
|
||||
console.log(123, this.tableData) |
|
||||
this.collectId = res.data ? res.data.id : '' |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 表格复选框 |
|
||||
selection(selection, val) { |
|
||||
if (!val.id) { |
|
||||
const data = this.tableData.filter(item => item.name === val.name) |
|
||||
if (val.flag) { |
|
||||
data.forEach(row => { |
|
||||
row.flag = false |
|
||||
this.$refs.multipleTable.toggleRowSelection(row, false) |
|
||||
}) |
|
||||
} else { |
|
||||
data.forEach(row => { |
|
||||
row.flag = true |
|
||||
this.$refs.multipleTable.toggleRowSelection(row, true) |
|
||||
}) |
|
||||
} |
|
||||
} else { |
|
||||
const data = this.tableData.filter(item => item.id === val.id) |
|
||||
if (val.flag) { |
|
||||
data.forEach(row => { |
|
||||
row.flag = false |
|
||||
}) |
|
||||
} else { |
|
||||
data.forEach(row => { |
|
||||
row.flag = true |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
// 保留下拉框的label，添加到数据集用于展示 |
|
||||
handleNode(index, type, event) { |
|
||||
if (type === 'os') { |
|
||||
this.tableData[index].osValue = event |
|
||||
} else { |
|
||||
this.tableData[index].odValue = event |
|
||||
} |
|
||||
}, |
|
||||
// 添加数据集 |
|
||||
addForeData() { |
|
||||
const selectData = this.tableData.filter(item => item.flag === true) |
|
||||
if (!selectData.length) return this.$message.warning('请勾选数据!') |
|
||||
const data = selectData.filter(item => { |
|
||||
return item.type !== undefined |
|
||||
}) |
|
||||
eventBus.$emit('sendForData', data) |
|
||||
}, |
|
||||
// 获取下拉选择项,把数据封装进表格中 |
|
||||
queryOptions() { |
|
||||
const treeList = [] |
|
||||
this.tableData.forEach(item => { |
|
||||
if (item.type) { |
|
||||
const p = this.queryTree(item.type) |
|
||||
treeList.push(p) |
|
||||
} |
|
||||
}) |
|
||||
Promise.all(treeList).then((result) => { |
|
||||
if (result.length) { |
|
||||
result.forEach(item => { |
|
||||
item.forEach(row => { |
|
||||
this.tableData.forEach(e => { |
|
||||
if (e.type === row.type) { |
|
||||
e.data = item |
|
||||
const sort = item.sort |
|
||||
item.sort = '' |
|
||||
this.$nextTick(() => { |
|
||||
item.sort = sort |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
}) |
|
||||
} |
|
||||
this.sourceData = _.cloneDeep(this.tableData) || [] |
|
||||
eventBus.$emit('getForeData', this.tableData) |
|
||||
}).catch((error) => { |
|
||||
}) |
|
||||
}, |
|
||||
// 全部移动 |
|
||||
moveAll(type) { |
|
||||
if (type === 1) { |
|
||||
this.tableData.forEach(item => { |
|
||||
if (item.sort) { |
|
||||
item.od = item.os |
|
||||
item.odValue = item.osValue |
|
||||
const sort = item.sort |
|
||||
item.sort = '' |
|
||||
this.$nextTick(() => { |
|
||||
item.sort = sort |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
} else { |
|
||||
this.tableData.forEach(item => { |
|
||||
if (item.sort) { |
|
||||
item.os = item.od |
|
||||
item.osValue = item.odValue |
|
||||
const sort = item.sort |
|
||||
item.sort = '' |
|
||||
this.$nextTick(() => { |
|
||||
item.sort = sort |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
// 移动 |
|
||||
moveHandle(index, type, row) { |
|
||||
if (row.id) { |
|
||||
if (type === 1) { |
|
||||
this.tableData[index].od = row.os |
|
||||
this.tableData[index].odValue = row.osValue |
|
||||
} else { |
|
||||
this.tableData[index].os = row.od |
|
||||
this.tableData[index].osValue = row.odValue |
|
||||
} |
|
||||
const sort = this.tableData[index].sort |
|
||||
this.tableData[index].sort = '' |
|
||||
this.$nextTick(() => { |
|
||||
this.tableData[index].sort = sort |
|
||||
}) |
|
||||
} else { |
|
||||
if (type === 1) { |
|
||||
this.tableData.forEach(item => { |
|
||||
if (item.name === row.name) { |
|
||||
item.od = item.os |
|
||||
item.odValue = item.osValue |
|
||||
const sort = item.sort |
|
||||
item.sort = '' |
|
||||
this.$nextTick(() => { |
|
||||
item.sort = sort |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
} else { |
|
||||
this.tableData.forEach(item => { |
|
||||
if (item.name === row.name) { |
|
||||
item.os = item.od |
|
||||
item.osValue = item.odValue |
|
||||
const sort = item.sort |
|
||||
item.sort = '' |
|
||||
this.$nextTick(() => { |
|
||||
item.sort = sort |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
// 保存前段检查 |
|
||||
async saveFore() { |
|
||||
const params = { |
|
||||
flag: '2', // 1病史采集2前段检查3后段检查4专科检查 |
|
||||
jsonText: JSON.stringify(this.tableData), |
|
||||
name: '前段检查', |
|
||||
patientId: this.patientId, |
|
||||
platform: this.isSearch |
|
||||
} |
|
||||
let url = '' |
|
||||
if (this.collectId) { |
|
||||
url = '/case/update' |
|
||||
params.id = this.collectId |
|
||||
} else { |
|
||||
url = '/case/save' |
|
||||
} |
|
||||
const { data: res } = await this.$http.post(url, params) |
|
||||
if (res.code === 0) { |
|
||||
this.$message.success('保存成功') |
|
||||
await this.getforeList('2') |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
handSaveBtn() { |
|
||||
if (this.addType === 1) { |
|
||||
this.handleSaveTree() |
|
||||
} else { |
|
||||
this.handleSaveCase() |
|
||||
} |
|
||||
}, |
|
||||
// 新增选择下拉树 |
|
||||
addTree(item, event) { |
|
||||
this.title = '新增子级' |
|
||||
this.addType = 1 |
|
||||
this.form.name = '' |
|
||||
this.type = event.type |
|
||||
this.parentId = event.id |
|
||||
this.treeFlag = event.flag |
|
||||
this.dialogFormVisible = true |
|
||||
}, |
|
||||
// 新增保存树-眼睛部位下拉选择 |
|
||||
async handleSaveTree() { |
|
||||
const params = { |
|
||||
doctorId: this.doctorId, |
|
||||
name: this.form.name, |
|
||||
flag: this.treeFlag, // // 1公共树,2个人树 |
|
||||
type: this.type, |
|
||||
parentId: this.parentId, |
|
||||
platform: this.isSearch |
|
||||
} |
|
||||
const { data: res } = await this.$http.post('/treetag/addTree', params) |
|
||||
if (res.code === 0) { |
|
||||
this.dialogFormVisible = false |
|
||||
this.updataList() |
|
||||
this.$message.success('保存成功') |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 删除选择下拉树 |
|
||||
removeTree(item) { |
|
||||
this.type = item.type |
|
||||
this.deleteId = item.id |
|
||||
this.$confirm('确定删除该节点?', '提示', { |
|
||||
confirmButtonText: '确定', |
|
||||
cancelButtonText: '取消', |
|
||||
type: 'warning' |
|
||||
}).then(() => { |
|
||||
this.handleRemove() |
|
||||
}).catch(() => { |
|
||||
|
|
||||
}) |
|
||||
}, |
|
||||
// 删除选择下拉树 |
|
||||
async handleRemove() { |
|
||||
const params = { |
|
||||
id: this.deleteId |
|
||||
} |
|
||||
const { data: res } = await this.$http.post('/treetag/deleteTree', params) |
|
||||
if (res.code === 0) { |
|
||||
this.$message.success('删除成功') |
|
||||
this.updataList() |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 刷新单个选择下拉树 |
|
||||
updataList() { |
|
||||
this.queryTree(this.type).then((res) => { |
|
||||
this.tableData.forEach(item => { |
|
||||
if (item.type === this.type) { |
|
||||
const sort = item.sort |
|
||||
item.sort = '' |
|
||||
this.$nextTick(() => { |
|
||||
item.sort = sort |
|
||||
}) |
|
||||
item.data = res |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
// 封装查询单个下拉选择树 |
|
||||
queryTree(type) { |
|
||||
// http://47.110.224.240:8036/xiangan-crf/treetag/findTree |
|
||||
// 47.110.224.240:8036 |
|
||||
// 192.168.4.83:8036 |
|
||||
return new Promise((resolve, reject) => { |
|
||||
axios.defaults.headers.common['token'] = Cookies.get('xa-token') || '' |
|
||||
axios.get('http://192.168.4.83:8036/xiangan-crf/treetag/findTree', { |
|
||||
params: { |
|
||||
doctorId: this.doctorId, |
|
||||
type: type, |
|
||||
platform: this.isSearch |
|
||||
} |
|
||||
}).then(res => { |
|
||||
if (res.data.code === 0) { |
|
||||
const data = res.data |
|
||||
resolve(data.data) |
|
||||
} |
|
||||
}) |
|
||||
.catch(error => { |
|
||||
reject(error) |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
// 点击左侧模板数据覆盖表格内容 |
|
||||
templateData(data, node) { |
|
||||
if (data && data.caseJson) { |
|
||||
this.tableData = JSON.parse(data.caseJson) |
|
||||
// 回显表格复选框 |
|
||||
this.$nextTick(() => { |
|
||||
this.tableData.forEach(item => { |
|
||||
if (item.flag) { |
|
||||
this.$refs.multipleTable.toggleRowSelection(item, true) |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
} else { |
|
||||
this.tableData = _.cloneDeep(this.sourceData) |
|
||||
} |
|
||||
}, |
|
||||
// 点击保存模板后弹框 |
|
||||
handleTemplate() { |
|
||||
// if (!this.multipleSelection.length) return this.$message.warning('请勾选模板内容!') |
|
||||
this.form.name = '' |
|
||||
this.queryTemplate() |
|
||||
this.templateFlag = true |
|
||||
}, |
|
||||
// 保存模板时选择树节点 |
|
||||
templateNodeClick(node) { |
|
||||
this.treeId = node.id |
|
||||
}, |
|
||||
// 保存模板树 |
|
||||
async saveTreeTemplete() { |
|
||||
if (!this.treeId) return this.$message.warning('请选择目录!') |
|
||||
const params = { |
|
||||
caseJson: JSON.stringify(this.tableData), |
|
||||
doctorId: this.doctorId, |
|
||||
name: this.form.name, |
|
||||
type: 2, // 2前段检查 3后段检查 |
|
||||
treeId: this.treeId |
|
||||
} |
|
||||
const { data: res } = await this.$http.post('/treetemplate/addTreeCase', params) |
|
||||
if (res.code === 0) { |
|
||||
this.templateFlag = false |
|
||||
this.queryTreeCase() |
|
||||
this.$message.success('保存成功') |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 新增左侧描述项树弹框 |
|
||||
append(type, data) { |
|
||||
this.addType = 2 |
|
||||
this.form.name = '' |
|
||||
type === 1 ? this.title = '新增父级' : this.title = '新增子级' |
|
||||
type === 1 ? this.parentId = 0 : this.parentId = data.id |
|
||||
this.dialogFormVisible = true |
|
||||
}, |
|
||||
// 新增左侧描述项树 |
|
||||
async handleSaveCase() { |
|
||||
const params = { |
|
||||
doctorId: this.doctorId, |
|
||||
name: this.form.name, |
|
||||
weight: this.weight, |
|
||||
parentId: this.parentId, |
|
||||
platform: this.isSearch |
|
||||
} |
|
||||
const { data: res } = await this.$http.post('/treetemplate/addTree', params) |
|
||||
if (res.code === 0) { |
|
||||
this.dialogFormVisible = false |
|
||||
this.queryTreeCase() |
|
||||
this.$message.success('保存成功') |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 删除左侧树/模板节点弹框 |
|
||||
remove(node, data) { |
|
||||
this.deleteId = data.id |
|
||||
let url = '' |
|
||||
if (data.type) { |
|
||||
// 模板节点 |
|
||||
url = '/treetemplate/deleteTreeCase' |
|
||||
} else { |
|
||||
// 树节点 |
|
||||
url = '/treetemplate/deleteTree' |
|
||||
} |
|
||||
this.$confirm('确定删除该节点?', '提示', { |
|
||||
confirmButtonText: '确定', |
|
||||
cancelButtonText: '取消', |
|
||||
type: 'warning' |
|
||||
}).then(() => { |
|
||||
this.removeTemplate(url) |
|
||||
}).catch(() => { |
|
||||
|
|
||||
}) |
|
||||
}, |
|
||||
// 删除左侧树/模板节点 |
|
||||
async removeTemplate(url) { |
|
||||
const params = { |
|
||||
id: this.deleteId |
|
||||
} |
|
||||
const { data: res } = await this.$http.post(url, params) |
|
||||
if (res.code === 0) { |
|
||||
this.$message.success('删除成功') |
|
||||
this.queryTreeCase() |
|
||||
this.getforeList('2') |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 查询弹框模板树 |
|
||||
async queryTemplate() { |
|
||||
const { data: res } = await this.$http.get('/treetemplate/findTree', { |
|
||||
params: { |
|
||||
platform: this.isSearch, |
|
||||
doctorId: this.doctorId |
|
||||
} |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.treeTemplate = res.data |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 使用递归遍历树，合并模板节点和child节点 |
|
||||
fn(data) { |
|
||||
data.forEach((item, i) => { |
|
||||
if (item.list && item.list.length) { |
|
||||
item.child = item.child.concat(item.list) |
|
||||
// 调用递归函数 |
|
||||
} |
|
||||
if (item.child) { |
|
||||
this.fn(item.child) |
|
||||
} |
|
||||
}) |
|
||||
return data |
|
||||
}, |
|
||||
// 查询左侧病历树 |
|
||||
async queryTreeCase() { |
|
||||
const { data: res } = await this.$http.get('/treetemplate/findTreeCase', { |
|
||||
params: { |
|
||||
type: 2, |
|
||||
platform: this.isSearch, |
|
||||
doctorId: this.doctorId |
|
||||
} |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.treeCaseList = this.fn(res.data) |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.foreBox{ |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
overflow-y: auto; |
|
||||
position: relative; |
|
||||
.btnBox{ |
|
||||
position: fixed; |
|
||||
right: 84px; |
|
||||
text-align: right; |
|
||||
margin-right: 16px; |
|
||||
background-color: white; |
|
||||
z-index: 999; |
|
||||
} |
|
||||
.moveIcon{ |
|
||||
position: absolute; |
|
||||
left: calc(50% + 120px); |
|
||||
top: 40px; |
|
||||
z-index: 9; |
|
||||
} |
|
||||
.custom-tree-node{ |
|
||||
width: 100%; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.foreBox{ |
|
||||
.el-form-item__content{ |
|
||||
text-align: left; |
|
||||
} |
|
||||
.el-tree-node>.el-tree-node__children{ |
|
||||
overflow-x: auto; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
File diff suppressed because it is too large
@ -1,279 +0,0 @@ |
|||||
<template> |
|
||||
<div class="Info-detail"> |
|
||||
<div v-for="(item,index) in timeAxisNodeInfo" :key="index"> |
|
||||
<template v-if="item.type=='用药'"> |
|
||||
<!-- 用药 --> |
|
||||
<div v-for="(medicItem,medicIndex) in item.data" :key="medicIndex"> |
|
||||
<!-- 一天的用药次数循环 --> |
|
||||
<div class="medticTitle">{{ medicItem.createTime | dateFilterTwo }}</div> |
|
||||
<el-table :data="medicItem.list" style="width: 100%" max-height="500"> |
|
||||
<el-table-column prop="medName" label="商品名" /> |
|
||||
<el-table-column prop="socName" label="通用名" /> |
|
||||
<!-- <el-table-column width="120px" prop="spec" label="规格" /> |
|
||||
<el-table-column width="120px" prop="frequency" label="给药频率" /> |
|
||||
<el-table-column width="120px" label="用药数量"> |
|
||||
<template slot-scope="scope"> |
|
||||
<span v-if="scope.row.numberUse"> |
|
||||
{{ scope.row.numberUse }} {{ scope.row.unit }} / 次 |
|
||||
</span> |
|
||||
<span v-else>空</span> |
|
||||
</template> |
|
||||
</el-table-column> --> |
|
||||
<el-table-column prop="site" label="部位" /> |
|
||||
<el-table-column width="100px" prop="itemType" label="门诊/住院" /> |
|
||||
<!-- <div slot="empty" class="emptyBg"> |
|
||||
<p>没有记录哦~</p> |
|
||||
</div> --> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</template> |
|
||||
<template v-if="item.type=='诊断'"> |
|
||||
<!-- 诊断 --> |
|
||||
<div v-for="(diagnosisItem,diagnosisIndex) in item.data" :key="diagnosisIndex"> |
|
||||
<!-- 一天的用药次数循环 --> |
|
||||
<div class="medticTitle">{{ diagnosisItem.createTime | dateFilterTwo }}</div> |
|
||||
<el-table :data="diagnosisItem.list" style="width: 100%" max-height="300"> |
|
||||
<el-table-column prop="diagName" label="诊断内容" /> |
|
||||
<el-table-column label="主诊断" width="120px"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.isMain=='1' ? '是':'否' }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</template> |
|
||||
<template v-if="item.type=='检查'"> |
|
||||
<!-- 检查 --> |
|
||||
<div v-for="(inspectsItem,inspectIndex) in item.data" :key="inspectIndex"> |
|
||||
<!-- 一天的用药次数循环 --> |
|
||||
<div class="medticTitle">{{ inspectsItem.createTime | dateFilterTwo }}</div> |
|
||||
<!-- 临床数据 --> |
|
||||
<div class="clin-info divider"> |
|
||||
<p class="title">临床数据</p> |
|
||||
<div class="clinical-content"> |
|
||||
<div class="clinical-content-objective"> |
|
||||
<span class="tip blod">临床目的：</span> |
|
||||
<span class="content">{{ inspectsItem.clinAim || '空' }}</span> |
|
||||
</div> |
|
||||
<div class="clinical-content-symptom"> |
|
||||
<span class="tip blod">临床症状：</span> |
|
||||
<span class="content">{{ inspectsItem.clinSymp||'空' }}</span> |
|
||||
</div> |
|
||||
<div class="clinical-content-diagnosis"> |
|
||||
<span class="tip blod">临床诊断：</span> |
|
||||
<span class="content">{{ inspectsItem.clinDiag||'空' }}</span> |
|
||||
</div> |
|
||||
<div class="clinical-content-zhusu"> |
|
||||
<span class="tip blod">临床主诉：</span> |
|
||||
<span class="content">{{ inspectsItem.clinComplain||'空' }}</span> |
|
||||
</div> |
|
||||
<div class="clinical-content-beizhu"> |
|
||||
<span class="tip blod">临床备注：</span> |
|
||||
<span class="content">{{ inspectsItem.clinOther||'空' }}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 检查项目(部位) --> |
|
||||
<div class="exam-list"> |
|
||||
<p class="title">检查项目(部位)</p> |
|
||||
<el-table :data="inspectsItem.list" style="width: 100%" max-height="300"> |
|
||||
<el-table-column prop="examineItem" label="检查项目" /> |
|
||||
<el-table-column label="操作" width="120px"> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-link type="primary" :underline="false" @click="showReport(scope.row)">查看报告</el-link> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</div> |
|
||||
<el-dialog |
|
||||
width="85%" |
|
||||
top="5vh" |
|
||||
class="dialog-iframe" |
|
||||
:title="examItem.examineItem" |
|
||||
:visible.sync="dialogVisible" |
|
||||
append-to-body |
|
||||
> |
|
||||
<iframe |
|
||||
:src="`http://c2.njhuimu.com:8094/file/default1.asp?pid=${examItem.patientId}&examdate=(''${examItem.examTime}${examItem.examItemCode}'')&itemcode=x&risNo=${examItem.risNo}&examNo=${examItem.examNo}`" |
|
||||
width="100%" |
|
||||
height="100%" |
|
||||
frameborder="0" |
|
||||
scrolling="yes" |
|
||||
/> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
<template v-if="item.type=='手术'"> |
|
||||
<!-- 手术 --> |
|
||||
<div v-for="(operationItem,operationIndex) in item.data" :key="operationIndex"> |
|
||||
<!-- 一天的手术次数循环 --> |
|
||||
<div class="medticTitle">{{ operationItem.createTime | dateFilterTwo }}</div> |
|
||||
<el-table :data="operationItem.list" style="width: 100%" max-height="300"> |
|
||||
<el-table-column prop="bedNo" width="60px" label="床号" /> |
|
||||
<el-table-column prop="deptName" label="部门名" /> |
|
||||
<el-table-column prop="wardName" label="病区名" /> |
|
||||
<el-table-column prop="mainDrName" label="主刀医生姓名" /> |
|
||||
<el-table-column prop="opName" label="手术名称" width="200px" /> |
|
||||
<el-table-column prop="opPartName" label="手术部位" /> |
|
||||
<el-table-column label="手术时间"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.opTime |dateFilterTwo }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="主手术"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.isMain=='1' ? '是':'否' }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</template> |
|
||||
<template v-if="item.type=='住院'"> |
|
||||
<!-- 手术 --> |
|
||||
<div v-for="(hospitalizationItem,hospitalizationIndex) in item.data" :key="hospitalizationIndex"> |
|
||||
<!-- 一天的手术次数循环 --> |
|
||||
<div class="medticTitle">{{ hospitalizationItem.createTime | dateFilterTwo }}</div> |
|
||||
<el-table :data="hospitalizationItem.list" style="width: 100%" max-height="300"> |
|
||||
<el-table-column prop="deptName" label="部门名称" /> |
|
||||
<el-table-column prop="wardName" label="病区名称" /> |
|
||||
<el-table-column prop="diagName" label="诊断名称" /> |
|
||||
<el-table-column label="住院日期"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.inDate |dateFilterTwo }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="出院日期"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.outDate |dateFilterTwo }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</template> |
|
||||
<template v-if="item.type=='随访'"> |
|
||||
<el-tabs v-model="item.activeTabsValue" type="card"> |
|
||||
<el-tab-pane v-for="(item2,index2) in item.data" :key="index2" :label="item2.crfTemplateName" :name="item2.id" style="background:#fff;padding:0 10px"> |
|
||||
<crf :id="item2.id" ref="crf" /> |
|
||||
</el-tab-pane> |
|
||||
</el-tabs> |
|
||||
</template> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import crf from '@/components/hm-crf/load_crf' |
|
||||
export default { |
|
||||
components: { crf }, |
|
||||
props: { |
|
||||
timeAxisNodeInfo: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
examItem: {}, |
|
||||
dialogVisible: false |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
timeAxisNodeInfo: { |
|
||||
handler(newVal, oldVal) { |
|
||||
// console.log(newVal, oldVal) |
|
||||
this.timeAxisNodeInfo.forEach(item => { |
|
||||
if (item.type === '随访') { |
|
||||
if (this.timeAxisNodeInfo[0] && this.timeAxisNodeInfo[0].data) { |
|
||||
item.activeTabsValue = this.timeAxisNodeInfo[0].data[0].id |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.crf.forEach(item => { |
|
||||
item.init() |
|
||||
}) |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
immediate: true |
|
||||
} |
|
||||
}, |
|
||||
// mounted() { |
|
||||
// console.log('0') |
|
||||
// }, |
|
||||
// activated() { |
|
||||
// console.log('1') |
|
||||
// }, |
|
||||
// updated() { |
|
||||
// console.log('2') |
|
||||
// }, |
|
||||
methods: { |
|
||||
showReport(scopeRow) { |
|
||||
this.examItem = JSON.parse(JSON.stringify(scopeRow)) |
|
||||
this.examItem.examTime = this.$options.filters['dateFilterThree'](scopeRow.examTime) |
|
||||
this.dialogVisible = true |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.Info-detail { |
|
||||
.medticTitle { |
|
||||
color: #fff; |
|
||||
font-size: 20px; |
|
||||
font-weight: 700; |
|
||||
margin-bottom: 10px; |
|
||||
margin-top: 16px; |
|
||||
} |
|
||||
// 临床数据 |
|
||||
.clin-info, |
|
||||
.exam-list { |
|
||||
.title { |
|
||||
color: #fff; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
.clinical-content { |
|
||||
background: rgba(213, 213, 215, 0.17); |
|
||||
margin-top: 10px; |
|
||||
padding: 10px; |
|
||||
color: rgb(255, 255, 255, 0.6); |
|
||||
} |
|
||||
.content { |
|
||||
color: rgb(255, 255, 255, 0.6); |
|
||||
} |
|
||||
} |
|
||||
.exam-list { |
|
||||
margin-top: 16px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.Info-detail { |
|
||||
.el-table th, |
|
||||
.el-table tr { |
|
||||
color: #fff; |
|
||||
background: none; |
|
||||
} |
|
||||
.el-table td, |
|
||||
.el-table th.is-leaf { |
|
||||
border-bottom: 1px solid #5a5d61; |
|
||||
} |
|
||||
.el-table { |
|
||||
background: rgba(255, 255, 255, 0.02); |
|
||||
border: 1px solid #5a5d61; |
|
||||
} |
|
||||
.el-table thead { |
|
||||
background: rgba(255, 255, 255, 0.08); |
|
||||
} |
|
||||
.el-table::before { |
|
||||
height: 0; |
|
||||
} |
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td { |
|
||||
background: rgba(255, 255, 255, 0.2); |
|
||||
} |
|
||||
|
|
||||
.el-tabs__header { |
|
||||
margin: 0; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -1,108 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 弹框 --> |
|
||||
<el-dialog |
|
||||
title="分配人员" |
|
||||
:visible.sync="dialogVisible" |
|
||||
width="650px" |
|
||||
@close="ClosedDialog" |
|
||||
> |
|
||||
<div style="text-align: center"> |
|
||||
<el-transfer |
|
||||
v-model="rightValue" |
|
||||
style="text-align: left; display: inline-block" |
|
||||
:render-content="renderFunc" |
|
||||
:format="{ |
|
||||
noChecked: '${total}', |
|
||||
hasChecked: '${checked}/${total}', |
|
||||
}" |
|
||||
:titles="['未加入', '已加入项目']" |
|
||||
:props="{ key: 'userId', label: 'realName' }" |
|
||||
:data="allJoinedPeopleList" |
|
||||
@change="handleChange" |
|
||||
/> |
|
||||
</div> |
|
||||
<span slot="footer" class="dialog-footer"> |
|
||||
<el-button @click="cancelClick">取 消</el-button> |
|
||||
<el-button type="primary" @click="sureJoinedPeopleClick">确 定</el-button> |
|
||||
</span> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
dialogVisible: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
}, |
|
||||
currentPeopleId: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
joinedPeopleList: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
}, |
|
||||
notJoinedPeopleList: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
}, |
|
||||
rightValue: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
}, |
|
||||
allJoinedPeopleList: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
renderFunc(h, option) { |
|
||||
return <span>{option.realName}</span> |
|
||||
}, |
|
||||
joinedListUserId: [] |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
dialogVisible(value) { |
|
||||
this.ceshishow = value |
|
||||
}, |
|
||||
joinedPeopleList(value) { |
|
||||
}, |
|
||||
notJoinedPeopleList(value) { |
|
||||
}, |
|
||||
rightValue(value) { |
|
||||
}, |
|
||||
allJoinedPeopleList(value) { |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
handleChange(value) { |
|
||||
this.joinedListUserId = value |
|
||||
}, |
|
||||
// 确定分配人员 |
|
||||
async sureJoinedPeopleClick() { |
|
||||
this.$emit('IsDialogVisible', false) |
|
||||
const { data: res } = await this.$http.post('projectUser', { |
|
||||
projectId: this.currentPeopleId, |
|
||||
userIdList: this.joinedListUserId |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.$message({ |
|
||||
type: 'success', |
|
||||
message: '分配成功' |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
cancelClick() { |
|
||||
this.$emit('IsDialogVisible', false) |
|
||||
}, |
|
||||
ClosedDialog() { |
|
||||
this.$emit('IsDialogVisible', false) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
</style> |
|
||||
@ -1,349 +0,0 @@ |
|||||
<template lang="pug"> |
|
||||
svg.vch__wrapper(:viewBox="viewbox") |
|
||||
g.vch__months__labels__wrapper(:transform="monthsLabelWrapperTransform[position]") |
|
||||
text.vch__month__label( |
|
||||
v-for="(month, index) in heatmap.firstFullWeekOfMonths", |
|
||||
:x="getMonthLabelPostion(month).x", |
|
||||
:y="getMonthLabelPostion(month).y" |
|
||||
) {{ lo.months[month.value] }} |
|
||||
|
|
||||
g.vch__days__labels__wrapper(:transform="daysLabelWrapperTransform[position]") |
|
||||
//- text.vch__day__label( |
|
||||
//- :x="vertical ? SQUARE_SIZE * 0 : 0", |
|
||||
//- :y="vertical ? SQUARE_SIZE - SQUARE_BORDER_SIZE : 8" |
|
||||
//- ) {{ lo.days[0] }} |
|
||||
text.vch__day__label( |
|
||||
:x="vertical ? SQUARE_SIZE * 1 : 0", |
|
||||
:y="vertical ? SQUARE_SIZE - SQUARE_BORDER_SIZE : 20" |
|
||||
) {{ lo.days[1] }} |
|
||||
//- text.vch__day__label( |
|
||||
//- :x="vertical ? SQUARE_SIZE * 2 : 0", |
|
||||
//- :y="vertical ? SQUARE_SIZE - SQUARE_BORDER_SIZE : 32" |
|
||||
//- ) {{ lo.days[2] }} |
|
||||
text.vch__day__label( |
|
||||
:x="vertical ? SQUARE_SIZE * 3 : 0", |
|
||||
:y="vertical ? SQUARE_SIZE - SQUARE_BORDER_SIZE : 44" |
|
||||
) {{ lo.days[3] }} |
|
||||
//- text.vch__day__label( |
|
||||
//- :x="vertical ? SQUARE_SIZE * 4 : 0", |
|
||||
//- :y="vertical ? SQUARE_SIZE - SQUARE_BORDER_SIZE : 56" |
|
||||
//- ) {{ lo.days[4] }} |
|
||||
text.vch__day__label( |
|
||||
:x="vertical ? SQUARE_SIZE * 5 : 0", |
|
||||
:y="vertical ? SQUARE_SIZE - SQUARE_BORDER_SIZE : 69" |
|
||||
) {{ lo.days[5] }} |
|
||||
//- text.vch__day__label( |
|
||||
//- :x="vertical ? SQUARE_SIZE * 6 : 0", |
|
||||
//- :y="vertical ? SQUARE_SIZE - SQUARE_BORDER_SIZE : 81" |
|
||||
//- ) {{ lo.days[6] }} |
|
||||
|
|
||||
g.vch__legend__wrapper(:transform="legendWrapperTransform[position]") |
|
||||
text( |
|
||||
:x="vertical ? SQUARE_SIZE * 1.25 : -25" |
|
||||
:y="vertical ? 8 : SQUARE_SIZE + 1" |
|
||||
) {{ lo.less }} |
|
||||
rect( |
|
||||
v-for="(color, index) in rangeColor", |
|
||||
:key="index", |
|
||||
:style="{ fill: color }", |
|
||||
:width="SQUARE_SIZE - SQUARE_BORDER_SIZE", |
|
||||
:height="SQUARE_SIZE - SQUARE_BORDER_SIZE", |
|
||||
:x="vertical ? SQUARE_SIZE * 1.75 : SQUARE_SIZE * index", |
|
||||
:y="vertical ? SQUARE_SIZE * (index + 1) : 5" |
|
||||
) |
|
||||
text( |
|
||||
:x="vertical ? SQUARE_SIZE * 1.25 : SQUARE_SIZE * rangeColor.length + 1", |
|
||||
:y="vertical ? SQUARE_SIZE * (rangeColor.length + 2) - SQUARE_BORDER_SIZE : SQUARE_SIZE + 1" |
|
||||
) {{ lo.more }} |
|
||||
g.vch__year__wrapper(:transform="yearWrapperTransform") |
|
||||
g.vch__month__wrapper( |
|
||||
v-for="(week, weekIndex) in heatmap.calendar", |
|
||||
:key="weekIndex", |
|
||||
:transform="getWeekPosition(weekIndex)" |
|
||||
) |
|
||||
rect.vch__day__square( |
|
||||
v-for="(day, dayIndex) in week", |
|
||||
|
|
||||
:key="dayIndex", |
|
||||
:transform="getDayPosition(dayIndex)" |
|
||||
:width="SQUARE_SIZE - SQUARE_BORDER_SIZE", |
|
||||
:height="SQUARE_SIZE - SQUARE_BORDER_SIZE", |
|
||||
:style="{ fill: rangeColor[day.colorIndex] }", |
|
||||
v-tooltip="tooltipOptions(day)", |
|
||||
@click="$emit('day-click', day)" |
|
||||
) |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
// v-if="day.date < now" |
|
||||
import { formatDate } from '@/utils' |
|
||||
import { VTooltip } from 'v-tooltip' |
|
||||
import Heatmap from './Heatmap' |
|
||||
import { DAYS_IN_WEEK, DEFAULT_LOCALE, DEFAULT_RANGE_COLOR, DEFAULT_TOOLTIP_UNIT, SQUARE_SIZE } from './consts.js' |
|
||||
|
|
||||
VTooltip.enabled = window.innerWidth > 768 |
|
||||
|
|
||||
export default { |
|
||||
directives: { |
|
||||
tooltip: VTooltip |
|
||||
}, |
|
||||
|
|
||||
props: { |
|
||||
endDate: { type: String, required: true }, |
|
||||
values: { type: Array, required: true }, |
|
||||
max: { type: Number, default: 10 }, |
|
||||
rangeColor: { type: Array, default: () => DEFAULT_RANGE_COLOR }, |
|
||||
locale: { type: Object, default: () => {} }, |
|
||||
tooltip: { type: Boolean, default: true }, |
|
||||
tooltipUnit: { type: String, default: DEFAULT_TOOLTIP_UNIT }, |
|
||||
vertical: { type: Boolean, default: false }, |
|
||||
noDataText: { type: String, default: null } |
|
||||
}, |
|
||||
|
|
||||
data() { |
|
||||
return { |
|
||||
now: new Date() |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
computed: { |
|
||||
position() { |
|
||||
return this.vertical ? 'vertical' : 'horizontal' |
|
||||
}, |
|
||||
tooltipTransform() { |
|
||||
return `translate(${this.tooltipX}, ${this.tooltipY})` |
|
||||
}, |
|
||||
heatmap() { |
|
||||
return new Heatmap(this.endDate, this.values, this.max) |
|
||||
}, |
|
||||
width() { |
|
||||
return { |
|
||||
horizontal: this.LEFT_SECTION_WIDTH + (this.SQUARE_SIZE * this.heatmap.weekCount) + this.SQUARE_BORDER_SIZE, |
|
||||
vertical: this.LEFT_SECTION_WIDTH + (this.SQUARE_SIZE * DAYS_IN_WEEK) + this.RIGHT_SECTION_WIDTH |
|
||||
} |
|
||||
}, |
|
||||
heigth() { |
|
||||
return { |
|
||||
horizontal: this.TOP_SECTION_HEIGTH + (this.SQUARE_SIZE * DAYS_IN_WEEK) + this.SQUARE_BORDER_SIZE + this.BOTTOM_SECTION_HEIGTH, |
|
||||
vertical: this.TOP_SECTION_HEIGTH + (this.SQUARE_SIZE * this.heatmap.weekCount) + this.SQUARE_BORDER_SIZE |
|
||||
} |
|
||||
}, |
|
||||
viewbox() { |
|
||||
return `0 0 ${this.width[this.position]} ${this.heigth[this.position]}` |
|
||||
}, |
|
||||
daysLabelWrapperTransform() { |
|
||||
return { |
|
||||
horizontal: `translate(0, ${this.TOP_SECTION_HEIGTH})`, |
|
||||
vertical: `translate(${this.LEFT_SECTION_WIDTH}, 0)` |
|
||||
} |
|
||||
}, |
|
||||
monthsLabelWrapperTransform() { |
|
||||
return { |
|
||||
horizontal: `translate(${this.LEFT_SECTION_WIDTH}, 0)`, |
|
||||
vertical: `translate(0, ${this.TOP_SECTION_HEIGTH})` |
|
||||
} |
|
||||
}, |
|
||||
legendWrapperTransform() { |
|
||||
return { |
|
||||
horizontal: `translate(${this.width[this.position] - (this.SQUARE_SIZE * this.rangeColor.length) - 30}, ${this.heigth[this.position] - this.BOTTOM_SECTION_HEIGTH})`, |
|
||||
vertical: `translate(${this.LEFT_SECTION_WIDTH + (this.SQUARE_SIZE * DAYS_IN_WEEK)}, ${this.TOP_SECTION_HEIGTH})` |
|
||||
} |
|
||||
}, |
|
||||
yearWrapperTransform() { |
|
||||
return `translate(${this.LEFT_SECTION_WIDTH}, ${this.TOP_SECTION_HEIGTH})` |
|
||||
}, |
|
||||
|
|
||||
SQUARE_BORDER_SIZE: () => SQUARE_SIZE / 5, |
|
||||
SQUARE_SIZE() { return SQUARE_SIZE + this.SQUARE_BORDER_SIZE }, |
|
||||
TOP_SECTION_HEIGTH() { return SQUARE_SIZE + (SQUARE_SIZE / 2) }, |
|
||||
RIGHT_SECTION_WIDTH() { return this.SQUARE_SIZE * 3 }, |
|
||||
BOTTOM_SECTION_HEIGTH() { return SQUARE_SIZE + (SQUARE_SIZE / 2) }, |
|
||||
LEFT_SECTION_WIDTH() { return Math.ceil(SQUARE_SIZE * 2.5) }, |
|
||||
|
|
||||
lo() { |
|
||||
if (this.locale) { |
|
||||
return { |
|
||||
months: this.locale.months || DEFAULT_LOCALE.months, |
|
||||
days: this.locale.days || DEFAULT_LOCALE.days, |
|
||||
on: this.locale.on || DEFAULT_LOCALE.on, |
|
||||
less: this.locale.less || DEFAULT_LOCALE.less, |
|
||||
more: this.locale.more || DEFAULT_LOCALE.more |
|
||||
} |
|
||||
} |
|
||||
return DEFAULT_LOCALE |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
tooltipOptions(day) { |
|
||||
if (this.tooltip) { |
|
||||
if (day.count != null) { |
|
||||
return { |
|
||||
// content: `<b>${day.count} ${this.tooltipUnit}</b> ${this.lo.on} ${this.lo.months[day.date.getMonth()]} ${day.date.getDate()}, ${day.date.getFullYear()}`, |
|
||||
content: `${formatDate(day.date)} 提取报告,数量：${day.count}`, |
|
||||
delay: { show: 150, hide: 50 } |
|
||||
} |
|
||||
} else if (this.noDataText) { |
|
||||
return { |
|
||||
content: `${this.noDataText}`, |
|
||||
delay: { show: 150, hide: 50 } |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
return false |
|
||||
}, |
|
||||
getWeekPosition(index) { |
|
||||
if (this.vertical) { |
|
||||
return `translate(0, ${(this.SQUARE_SIZE * this.heatmap.weekCount) - ((index + 1) * this.SQUARE_SIZE)})` |
|
||||
} |
|
||||
return `translate(${index * this.SQUARE_SIZE}, 0)` |
|
||||
}, |
|
||||
getDayPosition(index) { |
|
||||
if (this.vertical) { |
|
||||
return `translate(${index * this.SQUARE_SIZE}, 0)` |
|
||||
} |
|
||||
return `translate(0, ${index * this.SQUARE_SIZE})` |
|
||||
}, |
|
||||
getMonthLabelPostion(month) { |
|
||||
const position = { x: 0, y: 0 } |
|
||||
position.x = this.vertical ? 3 : this.SQUARE_SIZE * month.index |
|
||||
position.y = this.vertical ? (this.SQUARE_SIZE * this.heatmap.weekCount) - (this.SQUARE_SIZE * (month.index)) - (this.SQUARE_SIZE / 4) : this.SQUARE_SIZE - this.SQUARE_BORDER_SIZE |
|
||||
return position |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
svg.vch__wrapper { |
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
|
||||
line-height: 10px; |
|
||||
} |
|
||||
|
|
||||
svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label { |
|
||||
font-size: 10px; |
|
||||
} |
|
||||
|
|
||||
svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label, |
|
||||
svg.vch__wrapper .vch__legend__wrapper text { |
|
||||
font-size: 9px; |
|
||||
} |
|
||||
|
|
||||
svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label, |
|
||||
svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label, |
|
||||
svg.vch__wrapper .vch__legend__wrapper text { |
|
||||
fill: #767676; |
|
||||
} |
|
||||
|
|
||||
svg.vch__wrapper rect.vch__day__square:hover { |
|
||||
stroke: #555; |
|
||||
stroke-width: 1px; |
|
||||
} |
|
||||
|
|
||||
svg.vch__wrapper rect.vch__day__square:focus { |
|
||||
outline: none; |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
<style> |
|
||||
.vue-tooltip-theme.tooltip { |
|
||||
display: block !important; |
|
||||
z-index: 10000; |
|
||||
} |
|
||||
|
|
||||
.vue-tooltip-theme.tooltip .tooltip-inner { |
|
||||
background: rgba(0, 0, 0, .7); |
|
||||
border-radius: 3px; |
|
||||
color: #ebedf0; |
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
|
||||
font-size: 12px; |
|
||||
line-height: 16px; |
|
||||
padding: 14px 10px; |
|
||||
} |
|
||||
|
|
||||
.vue-tooltip-theme.tooltip .tooltip-inner b { |
|
||||
color: white; |
|
||||
} |
|
||||
|
|
||||
.vue-tooltip-theme.tooltip .tooltip-arrow { |
|
||||
width: 0; |
|
||||
height: 0; |
|
||||
border-style: solid; |
|
||||
position: absolute; |
|
||||
margin: 5px; |
|
||||
border-color: black; |
|
||||
z-index: 1; |
|
||||
} |
|
||||
|
|
||||
.vue-tooltip-theme.tooltip[x-placement^="top"] { |
|
||||
margin-bottom: 5px; |
|
||||
} |
|
||||
|
|
||||
.vue-tooltip-theme.tooltip[x-placement^="top"] .tooltip-arrow { |
|
||||
border-width: 5px 5px 0 5px; |
|
||||
border-left-color: transparent !important; |
|
||||
border-right-color: transparent !important; |
|
||||
border-bottom-color: transparent !important; |
|
||||
bottom: -5px; |
|
||||
left: calc(50% - 5px); |
|
||||
margin-top: 0; |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
|
|
||||
.vue-tooltip-theme.tooltip[x-placement^="bottom"] { |
|
||||
margin-top: 5px; |
|
||||
} |
|
||||
|
|
||||
.vue-tooltip-theme.tooltip[x-placement^="bottom"] .tooltip-arrow { |
|
||||
border-width: 0 5px 5px 5px; |
|
||||
border-left-color: transparent !important; |
|
||||
border-right-color: transparent !important; |
|
||||
border-top-color: transparent !important; |
|
||||
top: -5px; |
|
||||
left: calc(50% - 5px); |
|
||||
margin-top: 0; |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
|
|
||||
.vue-tooltip-theme.tooltip[x-placement^="right"] { |
|
||||
margin-left: 5px; |
|
||||
} |
|
||||
|
|
||||
.vue-tooltip-theme.tooltip[x-placement^="right"] .tooltip-arrow { |
|
||||
border-width: 5px 5px 5px 0; |
|
||||
border-left-color: transparent !important; |
|
||||
border-top-color: transparent !important; |
|
||||
border-bottom-color: transparent !important; |
|
||||
left: -5px; |
|
||||
top: calc(50% - 5px); |
|
||||
margin-left: 0; |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
|
|
||||
.vue-tooltip-theme.tooltip[x-placement^="left"] { |
|
||||
margin-right: 5px; |
|
||||
} |
|
||||
|
|
||||
.vue-tooltip-theme.tooltip[x-placement^="left"] .tooltip-arrow { |
|
||||
border-width: 5px 0 5px 5px; |
|
||||
border-top-color: transparent !important; |
|
||||
border-right-color: transparent !important; |
|
||||
border-bottom-color: transparent !important; |
|
||||
right: -5px; |
|
||||
top: calc(50% - 5px); |
|
||||
margin-left: 0; |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
|
|
||||
.vue-tooltip-theme.tooltip[aria-hidden='true'] { |
|
||||
visibility: hidden; |
|
||||
opacity: 0; |
|
||||
transition: opacity .15s, visibility .15s; |
|
||||
} |
|
||||
|
|
||||
.vue-tooltip-theme.tooltip[aria-hidden='false'] { |
|
||||
visibility: visible; |
|
||||
opacity: 1; |
|
||||
transition: opacity .15s; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,95 +0,0 @@ |
|||||
import { DAYS_IN_ONE_YEAR, DAYS_IN_WEEK } from './consts' |
|
||||
|
|
||||
export default class CalendarHeatmap { |
|
||||
constructor(endDate, values, max) { |
|
||||
this.endDate = this._parseDate(endDate) |
|
||||
this.max = max || Math.ceil((Math.max(...values.map(day => day.count)) / 5) * 4) |
|
||||
this.startDate = this._shiftDate(endDate, -DAYS_IN_ONE_YEAR) |
|
||||
this.values = values |
|
||||
} |
|
||||
|
|
||||
get activities() { |
|
||||
return this.values.reduce((newValues, day) => { |
|
||||
newValues[this._keyDayParser(day.date)] = { |
|
||||
count: day.count, |
|
||||
colorIndex: this.getColorIndex(day.count) |
|
||||
} |
|
||||
return newValues |
|
||||
}, {}) |
|
||||
} |
|
||||
|
|
||||
get weekCount() { |
|
||||
return this.getDaysCount() / DAYS_IN_WEEK |
|
||||
} |
|
||||
|
|
||||
get calendar() { |
|
||||
const date = this._shiftDate(this.startDate, -this.getCountEmptyDaysAtStart()) |
|
||||
return Array.from({ length: this.weekCount }, |
|
||||
() => Array.from({ length: DAYS_IN_WEEK }, |
|
||||
() => { |
|
||||
const dDate = new Date(date.getFullYear(), date.getMonth(), date.getDate()) |
|
||||
const dayValues = this.activities[this._keyDayParser(dDate)] |
|
||||
date.setDate(date.getDate() + 1) |
|
||||
return { |
|
||||
date: dDate, |
|
||||
count: dayValues ? dayValues.count : null, |
|
||||
colorIndex: dayValues ? dayValues.colorIndex : 0 |
|
||||
} |
|
||||
} |
|
||||
) |
|
||||
) |
|
||||
} |
|
||||
|
|
||||
get firstFullWeekOfMonths() { |
|
||||
return this.calendar.reduce((months, week, index, weeks) => { |
|
||||
if (index > 0) { |
|
||||
const lastWeek = weeks[index - 1][0].date |
|
||||
const currentWeek = week[0].date |
|
||||
if (lastWeek.getFullYear() < currentWeek.getFullYear() || lastWeek.getMonth() < currentWeek.getMonth()) { |
|
||||
months.push({ value: currentWeek.getMonth(), index }) |
|
||||
} |
|
||||
} |
|
||||
return months |
|
||||
}, []) |
|
||||
} |
|
||||
|
|
||||
// 【数值颜色匹配】
|
|
||||
getColorIndex(value) { |
|
||||
if (value == null || value === undefined) { |
|
||||
return 0 |
|
||||
} else if (value <= 0) { |
|
||||
return 1 |
|
||||
} else if (value >= this.max) { |
|
||||
return 5 |
|
||||
} else { |
|
||||
return (Math.ceil(((value * 100) / this.max) * (0.03))) + 1 |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
getCountEmptyDaysAtStart() { |
|
||||
return this.startDate.getDay() |
|
||||
} |
|
||||
|
|
||||
getCountEmptyDaysAtEnd() { |
|
||||
return (DAYS_IN_WEEK - 1) - this.endDate.getDay() |
|
||||
} |
|
||||
|
|
||||
getDaysCount() { |
|
||||
return DAYS_IN_ONE_YEAR + 1 + this.getCountEmptyDaysAtStart() + this.getCountEmptyDaysAtEnd() |
|
||||
} |
|
||||
|
|
||||
_shiftDate(date, numDays) { |
|
||||
const newDate = new Date(date) |
|
||||
newDate.setDate(newDate.getDate() + numDays) |
|
||||
return newDate |
|
||||
} |
|
||||
|
|
||||
_parseDate(entry) { |
|
||||
return (entry instanceof Date) ? entry : (new Date(entry)) |
|
||||
} |
|
||||
|
|
||||
_keyDayParser(date) { |
|
||||
const day = this._parseDate(date) |
|
||||
return `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}` |
|
||||
} |
|
||||
} |
|
||||
@ -1,17 +0,0 @@ |
|||||
export const DEFAULT_RANGE_COLOR = ['#ebedf0', '#dae2ef', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'] |
|
||||
|
|
||||
export const DEFAULT_LOCALE = { |
|
||||
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], |
|
||||
days: ['周 日', '周 一', '周 二', '周 三', '周 四', '周 五', '周 六'], |
|
||||
on: 'on', |
|
||||
less: '', // 少
|
|
||||
more: '200' // 多
|
|
||||
} |
|
||||
|
|
||||
export const DEFAULT_TOOLTIP_UNIT = 'contributions' |
|
||||
|
|
||||
export const DAYS_IN_ONE_YEAR = 365 |
|
||||
|
|
||||
export const DAYS_IN_WEEK = 7 |
|
||||
|
|
||||
export const SQUARE_SIZE = 10 |
|
||||
@ -1,30 +0,0 @@ |
|||||
<template> |
|
||||
<CalendarHeatmap |
|
||||
:values="dataList" |
|
||||
:end-date="endDate" |
|
||||
:max="max" |
|
||||
@day-click="$emit('day-click', $event)" |
|
||||
/> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import CalendarHeatmap from './CalendarHeatmap.vue' |
|
||||
// import { formatDate } from '@/utils/index.js' |
|
||||
|
|
||||
export default { |
|
||||
components: { CalendarHeatmap }, |
|
||||
props: { |
|
||||
dataList: { type: Array, required: true }, |
|
||||
endDate: { type: String, default: String((new Date()).getFullYear()) + '-12-31' }, |
|
||||
max: { type: Number, default: 200 } |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
|
|
||||
</style> |
|
||||
@ -1,269 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 纳排条件管理 --> |
|
||||
<!-- 内容 --> |
|
||||
<div class="content"> |
|
||||
<!-- 或并 --> |
|
||||
<el-table :data="formContent" style="width: 100%" :show-header="false"> |
|
||||
<el-table-column width="120"> |
|
||||
<template slot-scope="scope"> |
|
||||
<!-- v-show="scope.$index!=0" --> |
|
||||
<el-select |
|
||||
v-model="filterItemList[scope.$index].connection" |
|
||||
placeholder="请选择" |
|
||||
class="select-join" |
|
||||
size="small" |
|
||||
clearable |
|
||||
@change="joinContentChange(scope.$index,$event)" |
|
||||
> |
|
||||
<el-option |
|
||||
v-for="item in scope.row.joinContent[0].join" |
|
||||
:key="item.value" |
|
||||
:label="item.label" |
|
||||
:value="item.value" |
|
||||
:style="{'display': item.value==='should'&& pageName=='condition' ? 'none' : 'block'}" |
|
||||
:disabled="item.value==='should'&& pageName=='condition' ? true :false" |
|
||||
/> |
|
||||
</el-select> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<!-- 患者信息 --> |
|
||||
<el-table-column width="350"> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-select |
|
||||
v-model="filterItemList[scope.$index].id" |
|
||||
filterable |
|
||||
placeholder="请选择" |
|
||||
class="select-info" |
|
||||
size="small" |
|
||||
clearable |
|
||||
@change="patientInfoChange(scope.$index,$event)" |
|
||||
> |
|
||||
<el-option-group |
|
||||
v-for="group in scope.row.patientInfoContent[0].patientInfo" |
|
||||
:key="group.tableDescription" |
|
||||
:label="group.tableDescription" |
|
||||
class="select-group" |
|
||||
> |
|
||||
<el-option |
|
||||
v-for="item in group.list" |
|
||||
:key="item.id" |
|
||||
:label="item.fieldDescription" |
|
||||
:value="item.id" |
|
||||
/> |
|
||||
</el-option-group> |
|
||||
</el-select> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<!-- 匹配 --> |
|
||||
<el-table-column width="200"> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-select |
|
||||
v-model="filterItemList[scope.$index].queryType" |
|
||||
placeholder="请选择" |
|
||||
class="select-matching" |
|
||||
size="small" |
|
||||
clearable |
|
||||
@change="matchingChange(scope.$index,$event)" |
|
||||
> |
|
||||
<el-option |
|
||||
v-for="item in scope.row.matchingContent[0].matching" |
|
||||
:key="item.value" |
|
||||
:label="item.label" |
|
||||
:value="item.value" |
|
||||
:disabled="item.disabled" |
|
||||
/> |
|
||||
</el-select> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<!-- 大于等于符号 --> |
|
||||
<!-- <el-table-column width="160"> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-select v-model="scope.row.symbolContent[0].selectValueArr[scope.$index]" |
|
||||
placeholder="请选择" class="select-symbol" size="small"> |
|
||||
<el-option v-for="item in scope.row.symbolContent[0].symbol" :key="item.value" |
|
||||
:label="item.label" :value="item.value"> |
|
||||
</el-option> |
|
||||
</el-select> |
|
||||
</template> |
|
||||
</el-table-column> --> |
|
||||
|
|
||||
<!-- 输入字符串/日期/范围--> |
|
||||
<el-table-column width="400"> |
|
||||
<template slot-scope="scope"> |
|
||||
<!-- 字符串 --> |
|
||||
<el-input |
|
||||
v-show="scope.row.patientInfoContent[0].showMode[scope.$index]!='date' && scope.row.patientInfoContent[0].showMode[scope.$index]!='number'" |
|
||||
v-model="filterItemList[scope.$index].queryValue.eq" |
|
||||
placeholder="请输入内容" |
|
||||
class="patient-input-content" |
|
||||
size="small" |
|
||||
clearable |
|
||||
@input="stringInput(scope.$index,$event)" |
|
||||
/> |
|
||||
<!-- 日期 --> |
|
||||
<el-date-picker |
|
||||
v-show="scope.row.patientInfoContent[0].showMode[scope.$index]=='date'" |
|
||||
v-model="scope.row.InputData[0].dataRange[scope.$index]" |
|
||||
type="daterange" |
|
||||
range-separator="至" |
|
||||
start-placeholder="开始日期" |
|
||||
end-placeholder="结束日期" |
|
||||
size="small" |
|
||||
clearable |
|
||||
@change="dateChange(scope.$index,$event)" |
|
||||
/> |
|
||||
|
|
||||
<!-- 范围 --> |
|
||||
<div v-show="scope.row.patientInfoContent[0].showMode[scope.$index]=='number'" class="number-range"> |
|
||||
<el-input |
|
||||
v-model="filterItemList[scope.$index].queryValue.gte" |
|
||||
placeholder="区间范围" |
|
||||
class="patient-number-content" |
|
||||
size="small" |
|
||||
clearable |
|
||||
@input="numberOneInput(scope.$index,$event)" |
|
||||
/> |
|
||||
<span class="number-line">-</span> |
|
||||
<el-input |
|
||||
v-model="filterItemList[scope.$index].queryValue.lte" |
|
||||
placeholder="区间范围" |
|
||||
class="patient-number-content" |
|
||||
size="small" |
|
||||
clearable |
|
||||
@input="numberTwoInput(scope.$index,$event)" |
|
||||
/> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column> |
|
||||
<template slot-scope="scope"> |
|
||||
<span v-show="scope.row.iconState[scope.$index].state!=true"> |
|
||||
<slot name="check" :index="scope.$index" /> |
|
||||
</span> |
|
||||
<span> |
|
||||
<slot name="close" :index="scope.$index" /> |
|
||||
</span> |
|
||||
<span v-show="scope.row.iconState[scope.$index].state==true"> |
|
||||
<slot name="plus" :index="scope.$index" /> |
|
||||
</span> |
|
||||
|
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
filterItemList: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
}, |
|
||||
formContent: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
}, |
|
||||
conditionObj: { |
|
||||
type: Object, |
|
||||
default: () => { |
|
||||
return {} |
|
||||
} |
|
||||
}, |
|
||||
pageName: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
// 或并选择 |
|
||||
joinContentChange(index, e) { |
|
||||
this.$emit('setIconStateFalse', index) |
|
||||
}, |
|
||||
// 患者信息选择 |
|
||||
patientInfoChange(index, e) { |
|
||||
// 患者数据只要发生改变就可以从新查询 |
|
||||
this.$emit('setIconStateFalse', index) |
|
||||
this.$emit('patientInfoChange', index, e) |
|
||||
}, |
|
||||
// 匹配选择 |
|
||||
matchingChange(index, e) { |
|
||||
this.$emit('setIconStateFalse', index) |
|
||||
}, |
|
||||
// 字符串输入框内容发生变化时 |
|
||||
stringInput(index, e) { |
|
||||
this.$emit('setIconStateFalse', index) |
|
||||
}, |
|
||||
// 范围1-输入框内容发生变化时 |
|
||||
numberOneInput(index, e) { |
|
||||
this.$emit('setIconStateFalse', index) |
|
||||
}, |
|
||||
// 范围2-输入框内容发生变化时 |
|
||||
numberTwoInput(index, e) { |
|
||||
this.$emit('setIconStateFalse', index) |
|
||||
}, |
|
||||
// 日期区间 |
|
||||
dateChange(index, e) { |
|
||||
console.log(index, e) |
|
||||
this.$emit('setIconStateFalse', index) |
|
||||
// this.$parent.setIconStateFalse(index, e) |
|
||||
this.filterItemList[index].queryValue.gte = this.$moment(e[0]).format('l') |
|
||||
this.filterItemList[index].queryValue.lte = this.$moment(e[1]).format('l') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang='scss' scoped> |
|
||||
.content { |
|
||||
// padding: 16px; |
|
||||
.el-select { |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
.select-symbol { |
|
||||
margin-right: 5px; |
|
||||
} |
|
||||
.el-icon-close { |
|
||||
font-size: 30px; |
|
||||
color: #ff4d4f; |
|
||||
} |
|
||||
.el-icon-plus { |
|
||||
font-size: 26px; |
|
||||
color: #1890ff; |
|
||||
} |
|
||||
.el-icon-check { |
|
||||
font-size: 30px; |
|
||||
color: #52c41a; |
|
||||
} |
|
||||
.number-range { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
.number-line { |
|
||||
padding: 0 8px; |
|
||||
} |
|
||||
} |
|
||||
.select-group >>> .el-select-group__title { |
|
||||
font-size: 14px; |
|
||||
font-weight: 600; |
|
||||
color: #409eff; |
|
||||
/* background-color: aliceblue; */ |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.content { |
|
||||
.el-table .cell { |
|
||||
padding-right: 0 !important; |
|
||||
} |
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td { |
|
||||
background: none; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,295 +0,0 @@ |
|||||
<template> |
|
||||
<div :id="idName" :style="{ height: height, width: width }" /> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
idName: { type: String, default: 'chart' }, |
|
||||
width: { type: String, default: '100%' }, |
|
||||
height: { type: String, default: '200px' }, |
|
||||
chartData: { type: Array, default: () => [] } |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
date: [], |
|
||||
legendData: [], |
|
||||
seriesData: [], |
|
||||
disabled: false, |
|
||||
sexWidth: '120', |
|
||||
sexHeight: '120', |
|
||||
startAngle: 50, |
|
||||
timer: null, |
|
||||
isBig: true, |
|
||||
minradius: 24, |
|
||||
radius: 24, |
|
||||
maxradius: 28, |
|
||||
sumTotal: null, |
|
||||
centerImage: require('@/assets/img/age-echarts.png'), |
|
||||
border: require('@/assets/img/sex-echarts.png') |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
chartData: { |
|
||||
handler(val, olVal) { |
|
||||
this.initFun() |
|
||||
}, |
|
||||
deep: true |
|
||||
}, |
|
||||
sexWidth(val) { |
|
||||
this.initFun() |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.sexWidth = document.querySelector(`#${this.idName}`) ? document.querySelector(`#${this.idName}`).offsetWidth : '' |
|
||||
this.sexHeight = document.querySelector(`#${this.idName}`) ? document.querySelector(`#${this.idName}`).offsetHeight : '' |
|
||||
}, |
|
||||
methods: { |
|
||||
initFun() { |
|
||||
const ceshi = [ |
|
||||
{ name: '1-10岁', value: 8939 }, |
|
||||
{ name: '11-25岁', value: 11452 }, |
|
||||
{ name: '26-40岁', value: 3000 }, |
|
||||
{ name: '41-60岁', value: 15 }, |
|
||||
{ name: '60岁以上', value: 6 }] |
|
||||
if (this.chartData && this.chartData.length > 0) { |
|
||||
this.sumTotal = this.chartData.reduce((a, b) => { return a + b.value }, 0) |
|
||||
} |
|
||||
this.$nextTick(() => { |
|
||||
this.visionFun() |
|
||||
}) |
|
||||
}, |
|
||||
visionFun() { |
|
||||
const ceshi = [ |
|
||||
{ name: '1-10岁', value: 3939 }, |
|
||||
{ name: '11-25岁', value: 11452 }, |
|
||||
{ name: '26-40岁', value: 24 }, |
|
||||
{ name: '41-60岁', value: 15 }, |
|
||||
{ name: '60岁以上', value: 6 }] |
|
||||
// 基于准备好的dom，初始化echarts实例 |
|
||||
const sexCountEcharts = this.$echarts.init(document.getElementById(this.idName)) |
|
||||
// console.log(this.chartData) |
|
||||
var data = [] |
|
||||
this.angle = this.angle + 15 |
|
||||
var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000'] |
|
||||
for (var i = 0; i < this.chartData.length; i++) { |
|
||||
data.push({ |
|
||||
value: this.chartData[i].value, |
|
||||
name: this.chartData[i].name, |
|
||||
// 饼图外边圆样式 |
|
||||
itemStyle: { |
|
||||
borderWidth: 5, |
|
||||
shadowBlur: 20, |
|
||||
borderColor: color[i], |
|
||||
shadowColor: color[i] |
|
||||
} |
|
||||
}, |
|
||||
// 断间距 |
|
||||
{ |
|
||||
value: this.sumTotal / 10, |
|
||||
name: '', |
|
||||
itemStyle: { |
|
||||
label: { |
|
||||
show: false // 隐藏文本标签 |
|
||||
}, |
|
||||
labelLine: { |
|
||||
show: false // 隐藏文本标签线 |
|
||||
}, |
|
||||
color: 'rgba(0, 0, 0, 0)', |
|
||||
borderColor: 'rgba(0, 0, 0, 0)', |
|
||||
borderWidth: 0 |
|
||||
} |
|
||||
} |
|
||||
) |
|
||||
} |
|
||||
// 基于准备好的dom，初始化echarts实例 |
|
||||
sexCountEcharts.setOption({ |
|
||||
backgroundColor: 'transparent', |
|
||||
color: color, |
|
||||
// 中间文字 |
|
||||
title: { |
|
||||
text: '年龄分布', |
|
||||
top: '60%', |
|
||||
textAlign: 'center', |
|
||||
left: '49%', |
|
||||
textStyle: { |
|
||||
color: '#fff', |
|
||||
fontSize: 14, |
|
||||
fontWeight: '400' |
|
||||
} |
|
||||
}, |
|
||||
// 配置图形元素 |
|
||||
graphic: { |
|
||||
elements: [ |
|
||||
// { |
|
||||
// type: 'image', |
|
||||
// z: 3, |
|
||||
// style: { |
|
||||
// image: border, // 自定义圆线 |
|
||||
// width: this.sexWidth * 0.38, |
|
||||
// height: this.sexWidth * 0.38 |
|
||||
// }, |
|
||||
// left: 'center', |
|
||||
// top: 'center' |
|
||||
// }, |
|
||||
{ |
|
||||
type: 'image', |
|
||||
z: 3, |
|
||||
style: { |
|
||||
image: this.centerImage, // 自定义中间图片 |
|
||||
width: this.sexWidth * 0.13, |
|
||||
height: this.sexWidth * 0.13 |
|
||||
}, |
|
||||
left: 'center', |
|
||||
top: '38%' |
|
||||
}] |
|
||||
}, |
|
||||
tooltip: { |
|
||||
show: true, |
|
||||
formatter: (params) => { |
|
||||
// console.log(params) |
|
||||
// console.log((params.value / this.sumTotal).toFixed(5)) |
|
||||
var percent = ((params.value / this.sumTotal) * 100).toFixed(2) |
|
||||
if (params.name !== '') { |
|
||||
return params.marker + params.name + ': ' + percent + '%' |
|
||||
} else { |
|
||||
return '' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
toolbox: { |
|
||||
show: false |
|
||||
}, |
|
||||
series: [{ |
|
||||
name: '', |
|
||||
type: 'pie', |
|
||||
top: '8%', |
|
||||
clockwise: false, |
|
||||
radius: [this.sexWidth * 0.24, this.sexWidth * 0.235], // 圆的半径 |
|
||||
emphasis: { |
|
||||
scale: true |
|
||||
}, |
|
||||
label: { |
|
||||
show: true, |
|
||||
position: 'outside', |
|
||||
color: '#ddd', |
|
||||
overflow: 'none', |
|
||||
// padding: [0, -55], // 文字在线上 |
|
||||
// 文字格式化 |
|
||||
formatter: (params) => { |
|
||||
return params.name |
|
||||
// console.log(params) |
|
||||
// console.log((params.value / this.sumTotal).toFixed(5)) |
|
||||
// var percent = ((params.value / this.sumTotal) * 100).toFixed(2) |
|
||||
// if (params.name !== '') { |
|
||||
// return params.name + '\n' + '\n' + percent + '%' |
|
||||
// } else { |
|
||||
// return '' |
|
||||
// } |
|
||||
} |
|
||||
}, |
|
||||
// // 标签的视觉引导线 |
|
||||
// labelLine: { |
|
||||
// length: 20, |
|
||||
// length2: 65, |
|
||||
// show: true, |
|
||||
// color: '#00ffff' |
|
||||
// }, |
|
||||
// 数据 |
|
||||
data |
|
||||
}, { |
|
||||
type: 'pie', |
|
||||
name: '旋转圆', |
|
||||
top: '8%', |
|
||||
zlevel: 20, |
|
||||
silent: true, |
|
||||
radius: [this.sexWidth * 0.21, this.sexWidth * 0.205], |
|
||||
emphasis: { |
|
||||
scale: false |
|
||||
}, |
|
||||
startAngle: this.startAngle, |
|
||||
data: this.generateData(50, 40, 10, '#2dc0c9'), |
|
||||
label: { |
|
||||
show: false |
|
||||
}, |
|
||||
labelLine: { |
|
||||
show: false |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
type: 'pie', |
|
||||
name: '旋转圆', |
|
||||
top: '8%', |
|
||||
zlevel: 20, |
|
||||
silent: true, |
|
||||
radius: [this.sexWidth * 0.19, this.sexWidth * 0.185], |
|
||||
emphasis: { |
|
||||
scale: false |
|
||||
}, |
|
||||
data: this.generateData(1, 40, 10, '#2dc0c9'), |
|
||||
label: { |
|
||||
show: false |
|
||||
}, |
|
||||
labelLine: { |
|
||||
show: false |
|
||||
} |
|
||||
}] |
|
||||
}) |
|
||||
window.addEventListener('resize', () => { |
|
||||
this.sexWidth = document.querySelector(`#${this.idName}`) ? document.querySelector(`#${this.idName}`).offsetWidth : '' |
|
||||
this.sexHeight = document.querySelector(`#${this.idName}`) ? document.querySelector(`#${this.idName}`).offsetHeight : '' |
|
||||
sexCountEcharts.resize() |
|
||||
}) |
|
||||
if (this.timer) { |
|
||||
clearInterval(this.timer) |
|
||||
} |
|
||||
this.timer = setInterval(() => { |
|
||||
this.draw() |
|
||||
}, 200) |
|
||||
}, |
|
||||
generateData(totalNum, bigvalue, smallvalue, color) { |
|
||||
const dataArr = [] |
|
||||
for (var i = 0; i < totalNum; i++) { |
|
||||
if (i % 2 === 0) { |
|
||||
dataArr.push({ |
|
||||
name: (i + 1).toString(), |
|
||||
value: bigvalue, |
|
||||
itemStyle: { |
|
||||
color: color, |
|
||||
borderWidth: 0 |
|
||||
} |
|
||||
}) |
|
||||
} else { |
|
||||
dataArr.push({ |
|
||||
name: (i + 1).toString(), |
|
||||
value: smallvalue, |
|
||||
itemStyle: { |
|
||||
shadowBlur: 20, |
|
||||
color: 'rgba(0,0,0,0)', |
|
||||
borderWidth: 0 |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
return dataArr |
|
||||
}, |
|
||||
draw() { |
|
||||
this.startAngle = this.startAngle - 5 |
|
||||
if (this.isBig) { |
|
||||
this.radius = this.radius + 0.5 |
|
||||
if (this.radius > this.maxradius) { |
|
||||
this.isBig = false |
|
||||
} |
|
||||
} else { |
|
||||
this.radius = this.radius - 0.5 |
|
||||
if (this.radius < this.minradius) { |
|
||||
this.isBig = true |
|
||||
} |
|
||||
} |
|
||||
// this.visionFun() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
<style style="scss" scoped> |
|
||||
</style> |
|
||||
@ -1,177 +0,0 @@ |
|||||
<template> |
|
||||
<div :id="idName" :style="{ height: height, width: width }" /> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
idName: { type: String, default: 'chart' }, |
|
||||
width: { type: String, default: '100%' }, |
|
||||
height: { type: String, default: '100%' }, |
|
||||
chartData: { type: Array, default: () => [] }, |
|
||||
desc: { type: String, default: '' } |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
dataX: [], |
|
||||
dataY: [], |
|
||||
legend: [], |
|
||||
seriesList: [], |
|
||||
disabled: false, |
|
||||
color: ['#5721f0', '#ff5c00', '#e33283', '#00ffff', '#1c76fd', '#ff5c00', '#d357ff', '#89b277', '#ffe000'] |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
chartData: { |
|
||||
handler(val, olVal) { |
|
||||
this.initFun() |
|
||||
}, |
|
||||
deep: true |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.initFun() |
|
||||
}, |
|
||||
methods: { |
|
||||
initFun() { |
|
||||
if (this.chartData && this.chartData.length > 0) { |
|
||||
this.seriesList = [] |
|
||||
this.dataX = [] |
|
||||
this.dataY = [] |
|
||||
this.legend = [] |
|
||||
this.chartData.forEach((item, i) => { |
|
||||
this.legend.push(item.userName) |
|
||||
this.seriesList.push({ |
|
||||
name: item.userName, |
|
||||
type: 'line', |
|
||||
stack: 'Total', |
|
||||
symbolSize: 8, // 设定实心点的大小 |
|
||||
// 设置小圆点的颜色 |
|
||||
itemStyle: { |
|
||||
color: this.color[i] |
|
||||
}, |
|
||||
lineStyle: { |
|
||||
color: this.color[i] |
|
||||
}, |
|
||||
// areaStyle: { |
|
||||
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 2, [{ |
|
||||
// offset: 0, |
|
||||
// color: this.color[i] |
|
||||
// }, { |
|
||||
// offset: 1, |
|
||||
// color: 'transparent' |
|
||||
// }]) |
|
||||
// }, |
|
||||
emphasis: { |
|
||||
focus: 'series' |
|
||||
}, |
|
||||
// endLabel: { |
|
||||
// show: true, |
|
||||
// color: '#fff', |
|
||||
// borderColor: 'none', |
|
||||
// formatter: function(params) { |
|
||||
// console.log(params) |
|
||||
// return params.seriesName + ':' + params.value |
|
||||
// } |
|
||||
// }, |
|
||||
data: item.date.map(iten => iten.num) |
|
||||
}) |
|
||||
}) |
|
||||
// console.log(this.seriesList) |
|
||||
this.chartData[0].date.forEach(item => { |
|
||||
this.dataX.push(item.month) |
|
||||
}) |
|
||||
} |
|
||||
this.$nextTick(() => { |
|
||||
this.visionFun() |
|
||||
}) |
|
||||
}, |
|
||||
visionFun() { |
|
||||
// 基于准备好的dom，初始化echarts实例 |
|
||||
const historyEcharts = this.$echarts.init(document.getElementById(this.idName)) |
|
||||
historyEcharts.setOption({ |
|
||||
backgroundColor: 'transparent', |
|
||||
animationDuration: 3000, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross', |
|
||||
label: { |
|
||||
backgroundColor: '#6a7985' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
legend: { |
|
||||
type: 'scroll', |
|
||||
data: this.legend, |
|
||||
icon: 'circle', |
|
||||
right: 0, |
|
||||
itemHeight: 9, // 设置icont图形大小 |
|
||||
// 设置字体样式 |
|
||||
textStyle: { |
|
||||
fontSize: 12, |
|
||||
color: '#fff', |
|
||||
padding: [0, 0, 0, -8] // 修改文字和图标距离 |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
left: '3%', |
|
||||
right: '8%', |
|
||||
bottom: '3%', |
|
||||
top: '18%', |
|
||||
containLabel: true |
|
||||
}, |
|
||||
dataZoom: [ |
|
||||
{ |
|
||||
type: 'inside' |
|
||||
} |
|
||||
], |
|
||||
xAxis: [ |
|
||||
{ |
|
||||
type: 'category', |
|
||||
boundaryGap: false, |
|
||||
data: this.dataX, |
|
||||
axisLine: { |
|
||||
lineStyle: { |
|
||||
color: '#fff' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
], |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
type: 'value', |
|
||||
axisLine: { |
|
||||
show: false, |
|
||||
lineStyle: { |
|
||||
color: 'white' |
|
||||
} |
|
||||
}, |
|
||||
offset: 10, |
|
||||
axisTick: { |
|
||||
show: false, |
|
||||
length: 9, |
|
||||
alignWithLabel: true, |
|
||||
lineStyle: { |
|
||||
color: '#7DFFFD' |
|
||||
} |
|
||||
}, |
|
||||
splitLine: { |
|
||||
show: true, |
|
||||
lineStyle: { |
|
||||
type: 'dashed', |
|
||||
color: '#6b7284' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
], |
|
||||
series: this.seriesList |
|
||||
}) |
|
||||
window.addEventListener('resize', () => { historyEcharts.resize() }) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
<style style="scss" scoped> |
|
||||
</style> |
|
||||
@ -1,650 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog class="data-vision" :fullscreen="true" :visible.sync="visible" :modal-append-to-body="false" @close="closedDialog"> |
|
||||
<!-- 上 --> |
|
||||
<div class="data-vision-top" /> |
|
||||
<!-- 中 --> |
|
||||
<div class="data-vision-middle"> |
|
||||
<el-row :gutter="16"> |
|
||||
<el-col :span="6"> |
|
||||
<!-- 左侧 --> |
|
||||
<div class="data-vision-middle-left"> |
|
||||
<!-- 今日数据 --> |
|
||||
<div class="today-data"> |
|
||||
<p class="title"> |
|
||||
<svg-icon icon-class="icon-three-xiexian" /> |
|
||||
<span style="padding-left:10px;">今日数据</span> |
|
||||
</p> |
|
||||
<div class="today-data-content"> |
|
||||
<div class="dp data-flex"> |
|
||||
<p>手术患者数量</p> |
|
||||
<p class="patientData" /> |
|
||||
</div> |
|
||||
<div class="dh data-flex"> |
|
||||
<p>新增档案</p> |
|
||||
<p class="addArchivesData" /> |
|
||||
</div> |
|
||||
<div class="qj data-flex"> |
|
||||
<p>检查项目数</p> |
|
||||
<p class="inspectionData" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 当月手术top5 --> |
|
||||
<div class="month-operation-top5"> |
|
||||
<p class="title"> |
|
||||
<svg-icon icon-class="icon-three-xiexian" /> |
|
||||
<span style="padding-left:10px;">当月手术医生TOP 5</span> |
|
||||
</p> |
|
||||
<div class="month-operation-content"> |
|
||||
<month-top-echarts |
|
||||
v-if="monthOperationContentHeight" |
|
||||
id-name="month-top-echarts" |
|
||||
:height="monthOperationContentHeight" |
|
||||
:chart-data="monthOperationTopList" |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 历史数据录入 --> |
|
||||
<div class="history-data"> |
|
||||
<p class="title"> |
|
||||
<svg-icon icon-class="icon-three-xiexian" /> |
|
||||
<span style="padding-left:10px;">历史手术记录</span> |
|
||||
</p> |
|
||||
<div class="history-data-content"> |
|
||||
<history-data-echarts id-name="history-data-echarts" :chart-data="historyDataList" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :span="12"> |
|
||||
<!-- 中间 --> |
|
||||
<div class="data-vision-middle-middle"> |
|
||||
<p class="title"> |
|
||||
<svg-icon icon-class="icon-three-xiexian" /> |
|
||||
<span style="padding-left:10px;">患者信息</span> |
|
||||
</p> |
|
||||
<div class="patient-bank-count"> |
|
||||
<div class="sex-age-count"> |
|
||||
<div class="age-count-left"> |
|
||||
<p> |
|
||||
<span>患者总数</span> |
|
||||
<span class="patientTotal" /> |
|
||||
</p> |
|
||||
<p> |
|
||||
<span>档案总数</span> |
|
||||
<span class="archivesTotal" /> |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="sex-age-count-right"> |
|
||||
<div class="sex-count"> |
|
||||
<sex-count-echarts v-if="sexCountHeight" id-name="sex-count-echarts" :height="sexCountHeight" :chart-data="patientAnalyseList.sexAnalyse" /> |
|
||||
</div> |
|
||||
<div class="age-count"> |
|
||||
<age-count-echarts v-if="sexCountHeight" id-name="age-count-echarts" :height="sexCountHeight" :chart-data="patientAnalyseList.ageAnalyse" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="yanya"> |
|
||||
<p class="patient-bank-title"> |
|
||||
<svg-icon icon-class="icon-three-xiexian" /> |
|
||||
<span>眼压分布</span> |
|
||||
</p> |
|
||||
<div class="yanya-content"> |
|
||||
<qipao-echarts v-if="yanyaContentHeight" :height="yanyaContentHeight" id-name="yanya-echarts" :chart-data="yanyaList" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="shili"> |
|
||||
<p class="patient-bank-title"> |
|
||||
<svg-icon icon-class="icon-three-xiexian" /> |
|
||||
<span>视力分布</span> |
|
||||
</p> |
|
||||
<div class="shili-content"> |
|
||||
<qipao-echarts v-if="yanyaContentHeight" :height="yanyaContentHeight" id-name="shili-echarts" :chart-data="shiliList" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="yanzhou"> |
|
||||
<p class="patient-bank-title"> |
|
||||
<svg-icon icon-class="icon-three-xiexian" /> |
|
||||
<span>眼轴分布</span> |
|
||||
</p> |
|
||||
<div class="yanzhou-content"> |
|
||||
<qipao-echarts v-if="yanyaContentHeight" :height="yanyaContentHeight" id-name="yanzhou-echarts" :chart-data="yanzhouList" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="patient-bank-count-bottom" /> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :span="6"> |
|
||||
<!-- 右侧 --> |
|
||||
<div class="data-vision-middle-right"> |
|
||||
<!-- 手术诊断用药 --> |
|
||||
<div class="medication"> |
|
||||
<p class="title"> |
|
||||
<svg-icon icon-class="icon-three-xiexian" /> |
|
||||
<span style="padding-left:10px;">手术-诊断-用药</span> |
|
||||
</p> |
|
||||
<div class="medication-diagnosis-content"> |
|
||||
<medication-diagosis-echarts v-if="medicationDiagContentHeight" :height="medicationDiagContentHeight" id-name="medication-diagosis-echarts" :chart-data="medicationList" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 收费项统计 --> |
|
||||
<!-- <div class="charge-statistics"> |
|
||||
<p class="title"> |
|
||||
<svg-icon icon-class="icon-three-xiexian" /> |
|
||||
<span style="padding-left:10px;">收费项统计</span> |
|
||||
</p> |
|
||||
<div class="charge-statistics-content"> |
|
||||
<month-top-echarts |
|
||||
v-if="chargeStatisticsHeight" |
|
||||
id-name="charge-statistics-echarts" |
|
||||
:height="chargeStatisticsHeight" |
|
||||
:chart-data="monthOperationTopList" |
|
||||
/> |
|
||||
</div> |
|
||||
</div> --> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row /> |
|
||||
</div> |
|
||||
<!-- 下 --> |
|
||||
<div class="data-vision-bottom" /> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import monthTopEcharts from './month-top-echarts.vue' |
|
||||
import historyDataEcharts from './history-data-echarts.vue' |
|
||||
import sexCountEcharts from './sex-count-echarts.vue' |
|
||||
import ageCountEcharts from './age-count-echarts.vue' |
|
||||
import qipaoEcharts from './qipao-echarts.vue' |
|
||||
import medicationDiagosisEcharts from './medication-diagnosis-echarts.vue' |
|
||||
export default { |
|
||||
components: { monthTopEcharts, historyDataEcharts, sexCountEcharts, ageCountEcharts, qipaoEcharts, medicationDiagosisEcharts }, |
|
||||
props: { |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
drgsName: window.localStorage.getItem('identity'), |
|
||||
monthOperationContentHeight: '', |
|
||||
sexCountHeight: '', |
|
||||
yanyaContentHeight: '', |
|
||||
medicationDiagContentHeight: '', |
|
||||
chargeStatisticsHeight: '', |
|
||||
todayDataList: [{ |
|
||||
name: '手术患者数据', |
|
||||
value: '1000' |
|
||||
}, |
|
||||
{ |
|
||||
name: '新增档案', |
|
||||
value: '100' |
|
||||
}, { |
|
||||
name: '检查项目数', |
|
||||
value: '3000' |
|
||||
}, { |
|
||||
name: '患者总数', |
|
||||
value: '12000' |
|
||||
}, { |
|
||||
name: '档案总数', |
|
||||
value: '13000' |
|
||||
}], |
|
||||
monthOperationTopList: [{ |
|
||||
name: '孟医生', |
|
||||
value: 15 |
|
||||
}, { |
|
||||
name: '张医生', |
|
||||
value: 12 |
|
||||
}, { |
|
||||
name: '刘医生', |
|
||||
value: 10 |
|
||||
}, { |
|
||||
name: '李医生', |
|
||||
value: 8 |
|
||||
}, { |
|
||||
name: '葛医生', |
|
||||
value: 6 |
|
||||
}], |
|
||||
historyDataList: [], |
|
||||
patientAnalyseList: [], |
|
||||
yanyaList: {}, |
|
||||
shiliList: {}, |
|
||||
yanzhouList: {}, |
|
||||
medicationList: {}, |
|
||||
diagnosenList: [] |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
|
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.$nextTick(() => { |
|
||||
// 今日数据 |
|
||||
this.getTodayDataList() |
|
||||
// 当月手术top5 |
|
||||
// this.getMonthOperationTop() |
|
||||
// 获取历史录入数据 |
|
||||
this.getHistoryDataList() |
|
||||
// 获取患者分析数据 |
|
||||
this.getPatientSnalyse() |
|
||||
// 获取眼压分布 |
|
||||
this.getYanyaList() |
|
||||
// 获取视力分布 |
|
||||
this.getShiliList() |
|
||||
// 获取眼轴分布 |
|
||||
this.getYanzhouList() |
|
||||
// 获取用药分析 |
|
||||
this.medication() |
|
||||
// 获取诊断分析 |
|
||||
this.getDiagnosis() |
|
||||
this.monthOperationContentHeight = document.querySelector('.month-operation-content') ? document.querySelector('.month-operation-content').offsetHeight + 'px' : '' |
|
||||
this.sexCountHeight = document.querySelector('.sex-count') ? document.querySelector('.sex-count').offsetHeight + 'px' : '' |
|
||||
this.yanyaContentHeight = document.querySelector('.yanya-content') ? document.querySelector('.yanya-content').offsetHeight + 'px' : '' |
|
||||
this.medicationDiagContentHeight = document.querySelector('.medication-diagnosis-content') ? document.querySelector('.medication-diagnosis-content').offsetHeight + 'px' : '' |
|
||||
}) |
|
||||
}, |
|
||||
// 获取今日数据 |
|
||||
async getTodayDataList() { |
|
||||
// const { data: res } = await this.$http.get('/data/analyse/todayDpAnalyse') |
|
||||
// if (res.code === 0) { |
|
||||
// this.todayDataList = JSON.parse(JSON.stringify(res.data)) |
|
||||
// this.todayDataList.forEach(item => { |
|
||||
// item.innerHTML = [0, item.value] |
|
||||
// item.name === '订片' ? item.targets = '.dpData' : '' |
|
||||
// item.name === '到货' ? item.targets = '.dhData' : '' |
|
||||
// item.name === '取镜' ? item.targets = '.qjData' : '' |
|
||||
// item.name === '总数' ? item.targets = '.patientTotal' : '' |
|
||||
// item.name === '今日新增' ? item.targets = '.patientTodayAdd' : '' |
|
||||
// }) |
|
||||
// this.todayDataAnime() |
|
||||
// } else { |
|
||||
// this.$message.error(res.msg) |
|
||||
// } |
|
||||
this.todayDataList.forEach(item => { |
|
||||
item.innerHTML = [0, item.value] |
|
||||
item.name === '手术患者数据' ? item.targets = '.patientData' : '' |
|
||||
item.name === '新增档案' ? item.targets = '.addArchivesData' : '' |
|
||||
item.name === '检查项目数' ? item.targets = '.inspectionData' : '' |
|
||||
item.name === '患者总数' ? item.targets = '.patientTotal' : '' |
|
||||
item.name === '档案总数' ? item.targets = '.archivesTotal' : '' |
|
||||
}) |
|
||||
this.todayDataAnime() |
|
||||
}, |
|
||||
// 数据动画 |
|
||||
todayDataAnime() { |
|
||||
this.todayDataList.forEach(item => { |
|
||||
this.$anime({ |
|
||||
targets: item.targets, |
|
||||
innerHTML: item.innerHTML, |
|
||||
easing: 'linear', |
|
||||
round: 1, // 去除小数点 |
|
||||
duration: 1500 |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
// 当月订片top5 |
|
||||
async getMonthOperationTop() { |
|
||||
const { data: res } = await this.$http.get('/data/analyse/monthDpTop5') |
|
||||
if (res.code === 0) { |
|
||||
this.monthOperationTopList = res.data |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 获取历史录入数据 |
|
||||
async getHistoryDataList() { |
|
||||
const { data: res } = await this.$http.get('/data/analyse/historyInsert') |
|
||||
if (res.code === 0) { |
|
||||
this.historyDataList = res.data |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 获取患者分析数据 |
|
||||
async getPatientSnalyse() { |
|
||||
const { data: res } = await this.$http.get('/data/analyse/patientAnalyse') |
|
||||
if (res.code === 0) { |
|
||||
this.patientAnalyseList = res.data |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 获取眼压分布 |
|
||||
async getYanyaList() { |
|
||||
const { data: res } = await this.$http.get('/data/analyse/IOPAnalyse') |
|
||||
if (res.code === 0) { |
|
||||
this.yanyaList = res.data |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 获取视力分布 |
|
||||
async getShiliList() { |
|
||||
const { data: res } = await this.$http.get('/data/analyse/VAAnalyse') |
|
||||
if (res.code === 0) { |
|
||||
this.shiliList = res.data |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 获取眼轴分布 |
|
||||
async getYanzhouList() { |
|
||||
const { data: res } = await this.$http.get('/data/analyse/ALAnalyse') |
|
||||
if (res.code === 0) { |
|
||||
this.yanzhouList = res.data |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 获取用药分析 |
|
||||
async medication() { |
|
||||
const { data: res } = await this.$http.get('/data/analyse/medicationAnalyse') |
|
||||
if (res.code === 0) { |
|
||||
this.medicationList = res.data |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 获取诊断分析 |
|
||||
async getDiagnosis() { |
|
||||
const { data: res } = await this.$http.get('/data/analyse/diagnoseAnalyse') |
|
||||
if (res.code === 0) { |
|
||||
this.diagnosenList = res.data |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
closedDialog() { |
|
||||
this.$emit('dataVisionVisible') |
|
||||
this.visible = false |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.data-vision { |
|
||||
.data-vision-top, |
|
||||
.data-vision-bottom, |
|
||||
.today-data { |
|
||||
image-rendering: -moz-crisp-edges; |
|
||||
image-rendering: -o-crisp-edges; |
|
||||
image-rendering: -webkit-optimize-contrast; |
|
||||
image-rendering: crisp-edges; |
|
||||
-ms-interpolation-mode: nearest-neighbor; |
|
||||
} |
|
||||
.data-vision-top { |
|
||||
height: 70px; |
|
||||
background: url(../../assets/img/data-vision-head.png) no-repeat top center; |
|
||||
background-size: 100% 100px; |
|
||||
position: fixed; |
|
||||
left: 0; |
|
||||
width: 100%; |
|
||||
top: 0; |
|
||||
} |
|
||||
.data-vision-bottom { |
|
||||
height: 60px; |
|
||||
background: url(../../assets/img/data-vision-bottom.png) no-repeat top |
|
||||
center; |
|
||||
background-size: 100% 60px; |
|
||||
position: fixed; |
|
||||
left: 0; |
|
||||
width: 100%; |
|
||||
bottom: 0; |
|
||||
} |
|
||||
.data-vision-middle { |
|
||||
height: calc(100vh - 70px - 60px); |
|
||||
padding: 0 24px; |
|
||||
margin-top: 85px; |
|
||||
// display: flex; |
|
||||
color: #fff; |
|
||||
.title { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
font-size: 16px; |
|
||||
padding: 0 16px; |
|
||||
height: 36px; |
|
||||
background: url(../../assets/img/data-vision-left-head.png) no-repeat top |
|
||||
center; |
|
||||
background-size: 100% 48px; |
|
||||
} |
|
||||
.svg-icon { |
|
||||
width: 24px; |
|
||||
} |
|
||||
.today-data-content, |
|
||||
.month-operation-content, |
|
||||
.history-data-content,.medication-diagnosis-content,.charge-statistics-content { |
|
||||
padding: 16px; |
|
||||
width: 100%; |
|
||||
flex: 1; |
|
||||
background: rgba(14, 33, 84, 0.6); |
|
||||
box-shadow: inset 0px 0px 32px rgba(108, 167, 255, 0.4); |
|
||||
border: 1px solid #3d91e4; |
|
||||
border-image: -webkit-linear-gradient( |
|
||||
184deg, |
|
||||
#3d91e4 50%, |
|
||||
#133b72, |
|
||||
#3d91e4, |
|
||||
#133b72 |
|
||||
) |
|
||||
5 5; |
|
||||
border-image: -moz-linear-gradient( |
|
||||
184deg, |
|
||||
#3d91e4 50%, |
|
||||
#133b72, |
|
||||
#3d91e4, |
|
||||
#133b72 |
|
||||
) |
|
||||
5 5; |
|
||||
border-image: linear-gradient( |
|
||||
184deg, |
|
||||
#3d91e4 50%, |
|
||||
#133b72, |
|
||||
#3d91e4, |
|
||||
#133b72 |
|
||||
) |
|
||||
5 5; |
|
||||
} |
|
||||
.data-vision-middle-left { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
height: 100%; |
|
||||
.today-data { |
|
||||
width: 100%; |
|
||||
flex: 25%; |
|
||||
line-height: 30px; |
|
||||
margin-bottom: 16px; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
.month-operation-top5 { |
|
||||
flex: 35%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
.history-data { |
|
||||
flex: 40%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
.today-data-content { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
.data-flex { |
|
||||
flex: 33.33%; |
|
||||
text-align: center; |
|
||||
p:nth-child(1) { |
|
||||
color: #00ffff; |
|
||||
font-size: 14px; |
|
||||
white-space: nowrap; // 段落不换行 |
|
||||
text-overflow: ellipsis; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
p:nth-child(2) { |
|
||||
color: #ffc700; |
|
||||
font-size: 24px; |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
} |
|
||||
.dp, |
|
||||
.dh { |
|
||||
border-right: 2px solid #3d91e4; |
|
||||
border-image: -webkit-linear-gradient( |
|
||||
transparent, |
|
||||
#17a5e5, |
|
||||
transparent |
|
||||
) |
|
||||
5 5; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.month-operation-content { |
|
||||
padding: 0; |
|
||||
margin-bottom: 16px; |
|
||||
} |
|
||||
.history-data-content { |
|
||||
} |
|
||||
} |
|
||||
.data-vision-middle-middle { |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
.title { |
|
||||
background: url(../../assets/img/data-vision-middle.png) no-repeat top |
|
||||
center; |
|
||||
background-size: 100% 48px; |
|
||||
} |
|
||||
.patient-bank-count { |
|
||||
padding: 0 20px; |
|
||||
border-bottom: 0; |
|
||||
flex: 1; |
|
||||
border-top: 1px solid #3d91e4; |
|
||||
background: url(../../assets/img/data-vision-middle-two.png) repeat-y bottom; |
|
||||
background-size: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
.sex-age-count { |
|
||||
display: flex; |
|
||||
flex: 35%; |
|
||||
} |
|
||||
.age-count-left { |
|
||||
width: 20%; |
|
||||
text-align: center; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
border-right: 2px solid #3d91e4; |
|
||||
border-image: -webkit-linear-gradient( |
|
||||
transparent, |
|
||||
#17a5e5, |
|
||||
transparent |
|
||||
) |
|
||||
5 5; |
|
||||
p { |
|
||||
span { |
|
||||
display: block; |
|
||||
} |
|
||||
span:nth-child(1) { |
|
||||
color: #00FFFF; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
span:nth-child(2) { |
|
||||
color: #FFC700; |
|
||||
font-size: 24px; |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
p:nth-child(1) { |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
.sex-age-count-right { |
|
||||
flex: 1; |
|
||||
height: 100%; |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
.sex-count,.age-count { |
|
||||
flex: 50%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
.yanya,.shili,.yanzhou { |
|
||||
flex: 21.6%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
margin-bottom: 6px; |
|
||||
} |
|
||||
.yanzhou { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
.patient-bank-title { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
height: 20px; |
|
||||
span { |
|
||||
padding-left: 4px; |
|
||||
color: #00ffff; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
} |
|
||||
.yanya-content { |
|
||||
flex: 1; |
|
||||
} |
|
||||
} |
|
||||
.patient-bank-count-bottom { |
|
||||
width: 100%; |
|
||||
height: 33px; |
|
||||
background: url(../../assets/img/data-vision-middle-bottom.png) no-repeat bottom; |
|
||||
background-size: 100% 33px; |
|
||||
} |
|
||||
} |
|
||||
.data-vision-middle-right { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
height: 100%; |
|
||||
.medication { |
|
||||
flex: 60%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
.medication-diagnosis-content { |
|
||||
padding: 0; |
|
||||
// margin-bottom: 16px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.charge-statistics { |
|
||||
flex: 40%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
.data-vision { |
|
||||
.el-dialog__header, |
|
||||
.el-dialog__body { |
|
||||
padding: 0; |
|
||||
} |
|
||||
.el-dialog__headerbtn { |
|
||||
z-index: 99; |
|
||||
} |
|
||||
.el-dialog.is-fullscreen { |
|
||||
background: #000000; |
|
||||
} |
|
||||
.el-row, |
|
||||
.el-col { |
|
||||
height: 100%; |
|
||||
} |
|
||||
.el-dialog.is-fullscreen { |
|
||||
height: 100vh; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
@ -1,141 +0,0 @@ |
|||||
<template> |
|
||||
<div :id="idName" :style="{ height: height, width: width }" /> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
idName: { type: String, default: 'chart' }, |
|
||||
width: { type: String, default: '100%' }, |
|
||||
height: { type: String, default: '200px' }, |
|
||||
chartData: { type: Object, default: () => { return {} } }, |
|
||||
desc: { type: String, default: '' } |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
date: [], |
|
||||
legendData: [], |
|
||||
seriesData: [], |
|
||||
disabled: false, |
|
||||
colorLeft: ['#1c76fd', '#e33283', '#d357ff', '#1c76fd', '#e33283', '#d357ff', '#1c76fd', '#e33283', '#d357ff', '#1c76fd'], |
|
||||
colorRight: ['#4c94ff', '#ff5c00', '#5721f0', '#4c94ff', '#ff5c00', '#5721f0', '#4c94ff', '#ff5c00', '#5721f0', '#4c94ff'], |
|
||||
colorListObj: {} |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
chartData: { |
|
||||
handler(val, olVal) { |
|
||||
this.initFun() |
|
||||
}, |
|
||||
deep: true |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.initFun() |
|
||||
}, |
|
||||
methods: { |
|
||||
initFun() { |
|
||||
if (this.chartData.medication && this.chartData.medication.length > 0) { |
|
||||
this.chartData.medication.forEach((item, i) => { |
|
||||
// console.log(item) |
|
||||
item === '其他' ? this.colorListObj[`用药-${item}`] = this.colorLeft[i] : this.colorListObj[`用药-${item}`] = this.colorLeft[i] |
|
||||
this.colorListObj[`用药-${item}`] = this.colorLeft[i] |
|
||||
if (i === this.chartData.medication.length - 1) { |
|
||||
this.chartData.diag.forEach((iten, index) => { |
|
||||
iten === '其他' ? this.colorListObj[`诊断-${iten}`] = this.colorRight[index] : this.colorListObj[`诊断-${iten}`] = this.colorRight[index] |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
// console.log(this.colorListObj) |
|
||||
this.$nextTick(() => { |
|
||||
this.visionFun() |
|
||||
}) |
|
||||
}, |
|
||||
visionFun() { |
|
||||
// 基于准备好的dom，初始化echarts实例 |
|
||||
const sankeyEcharts = this.$echarts.init(document.getElementById(this.idName)) |
|
||||
var colorListArr = [] |
|
||||
// 遍历city |
|
||||
for (var key in this.colorListObj) { |
|
||||
if (this.chartData.dataList && this.chartData.dataList.length > 0) { |
|
||||
this.seriesData = this.chartData.dataList |
|
||||
this.seriesData.forEach(item => { |
|
||||
if (key.includes(item.source)) { |
|
||||
item.source = key |
|
||||
} |
|
||||
if (key.includes(item.target)) { |
|
||||
item.target = key |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
// 构造节点对象，包括name和itemStyle |
|
||||
colorListArr.push({ |
|
||||
name: key, |
|
||||
itemStyle: { |
|
||||
color: this.colorListObj[key] |
|
||||
}, |
|
||||
label: { |
|
||||
position: key.includes('用药') ? 'right' : 'left', |
|
||||
fontSize: '14', |
|
||||
color: '#fff' |
|
||||
} |
|
||||
} |
|
||||
) |
|
||||
} |
|
||||
// console.log(colorListArr) |
|
||||
var data = [] |
|
||||
for (var i = 0; i < this.seriesData.length; i++) { |
|
||||
var color = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ |
|
||||
offset: 0, |
|
||||
color: this.colorListObj[this.seriesData[i].source] // 获取起始节点的颜色属性 |
|
||||
}, { |
|
||||
offset: 1, |
|
||||
color: this.colorListObj[this.seriesData[i].target] // 获取结尾节点的颜色属性 |
|
||||
}] |
|
||||
) |
|
||||
data.push({ |
|
||||
source: this.seriesData[i].source, |
|
||||
target: this.seriesData[i].target, |
|
||||
value: this.seriesData[i].value, |
|
||||
lineStyle: { // 添加样式配置 |
|
||||
color: color |
|
||||
} |
|
||||
} |
|
||||
) |
|
||||
} |
|
||||
// console.log(data) |
|
||||
// 基于准备好的dom，初始化echarts实例 |
|
||||
sankeyEcharts.setOption({ |
|
||||
backgroundColor: 'transparent', |
|
||||
tooltip: { |
|
||||
trigger: 'item', |
|
||||
triggerOn: 'mousemove' |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
type: 'sankey', |
|
||||
data: colorListArr, |
|
||||
// 按照原始 data 中的顺序排列 |
|
||||
layoutIterations: 0, |
|
||||
links: data, |
|
||||
left: '4%', |
|
||||
right: '4%', |
|
||||
top: '2%', |
|
||||
bottom: '2%', |
|
||||
focus: 'Adjacence', |
|
||||
// focusNodeAdjacency: 'allEdges', |
|
||||
lineStyle: { |
|
||||
color: 'source', |
|
||||
opacity: 0.2 |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
}) |
|
||||
window.addEventListener('resize', () => { sankeyEcharts.resize() }) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
<style style="scss" scoped> |
|
||||
</style> |
|
||||
@ -1,308 +0,0 @@ |
|||||
<template> |
|
||||
<div :id="idName" :style="{ height: height, width: width }" /> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
idName: { type: String, default: 'chart' }, |
|
||||
width: { type: String, default: '100%' }, |
|
||||
height: { type: String, default: '183px' }, |
|
||||
chartData: { type: Array, default: () => [] }, |
|
||||
desc: { type: String, default: '' } |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
dataX: [], |
|
||||
dataY: [], |
|
||||
maxData: [], |
|
||||
disabled: false |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
chartData: { |
|
||||
handler(val, olVal) { |
|
||||
this.initFun() |
|
||||
}, |
|
||||
deep: true |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.initFun() |
|
||||
}, |
|
||||
methods: { |
|
||||
initFun() { |
|
||||
if (this.chartData && this.chartData.length > 0) { |
|
||||
this.dataX = [] |
|
||||
this.dataY = [] |
|
||||
this.chartData.forEach(item => { |
|
||||
this.dataX.unshift(item.value) |
|
||||
this.dataY.unshift(item.name) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
this.$nextTick(() => { |
|
||||
this.chartData.forEach(item => { |
|
||||
this.maxData.unshift({ |
|
||||
value: Math.max(...this.dataX), |
|
||||
name: item.name, |
|
||||
values: item.value |
|
||||
}) |
|
||||
}) |
|
||||
this.visionFun() |
|
||||
}) |
|
||||
}, |
|
||||
visionFun() { |
|
||||
// 基于准备好的dom，初始化echarts实例 |
|
||||
const monthTopEcharts = this.$echarts.init(document.getElementById(this.idName)) |
|
||||
// 定义图形 |
|
||||
const CubeLeft = this.$echarts.graphic.extendShape({ |
|
||||
shape: { |
|
||||
x: 0, |
|
||||
y: 0 |
|
||||
}, |
|
||||
buildPath: function(ctx, shape) { |
|
||||
// console.log(ctx, shape) |
|
||||
const yAxisPoint = shape.yAxisPoint |
|
||||
const c0 = [shape.x, shape.y] |
|
||||
const c1 = [shape.x + 4, shape.y - 4] |
|
||||
const c2 = [yAxisPoint[0] + 4, yAxisPoint[1] - 4] |
|
||||
const c3 = [yAxisPoint[0], yAxisPoint[1]] |
|
||||
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath() |
|
||||
} |
|
||||
}) |
|
||||
const CubeRight = this.$echarts.graphic.extendShape({ |
|
||||
shape: { |
|
||||
x: 0, |
|
||||
y: 0 |
|
||||
}, |
|
||||
buildPath: function(ctx, shape) { |
|
||||
const yAxisPoint = shape.yAxisPoint |
|
||||
const c1 = [shape.x, shape.y] |
|
||||
const c2 = [yAxisPoint[0], yAxisPoint[1]] |
|
||||
const c3 = [yAxisPoint[0] + 4, yAxisPoint[1] + 8] |
|
||||
const c4 = [shape.x + 4, shape.y + 8] |
|
||||
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath() |
|
||||
} |
|
||||
}) |
|
||||
const CubeTop = this.$echarts.graphic.extendShape({ |
|
||||
shape: { |
|
||||
x: 0, |
|
||||
y: 0 |
|
||||
}, |
|
||||
buildPath: function(ctx, shape) { |
|
||||
const c1 = [shape.x, shape.y] |
|
||||
const c2 = [shape.x + 4, shape.y + 8] |
|
||||
const c3 = [shape.x + 8, shape.y + 4] |
|
||||
const c4 = [shape.x + 4, shape.y - 4] |
|
||||
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath() |
|
||||
} |
|
||||
}) |
|
||||
this.$echarts.graphic.registerShape('CubeLeft', CubeLeft) |
|
||||
this.$echarts.graphic.registerShape('CubeRight', CubeRight) |
|
||||
this.$echarts.graphic.registerShape('CubeTop', CubeTop) |
|
||||
// 基于准备好的dom，初始化echarts实例 |
|
||||
monthTopEcharts.setOption({ |
|
||||
backgroundColor: 'transparent', |
|
||||
yAxis: { |
|
||||
type: 'category', |
|
||||
data: this.dataY, |
|
||||
axisLine: { |
|
||||
show: false, |
|
||||
lineStyle: { |
|
||||
color: 'white' |
|
||||
} |
|
||||
}, |
|
||||
axisTick: { |
|
||||
show: false |
|
||||
}, |
|
||||
offset: 5, |
|
||||
axisLabel: { |
|
||||
show: true, |
|
||||
margin: 6, |
|
||||
formatter: (params) => { |
|
||||
var val = '' |
|
||||
if (params.length > 5) { |
|
||||
val = params.substr(0, 5) + '...' |
|
||||
return val |
|
||||
} else { |
|
||||
return params |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
xAxis: { |
|
||||
type: 'value', |
|
||||
show: false |
|
||||
}, |
|
||||
tooltip: { |
|
||||
show: true, |
|
||||
// backgroundColor: '#fff', // 通过设置rgba调节背景颜色与透明度 |
|
||||
formatter: '{b}', |
|
||||
position: 'left' |
|
||||
// color: '#000' |
|
||||
}, |
|
||||
grid: { |
|
||||
left: '20%', |
|
||||
right: '25%', |
|
||||
bottom: '2%', |
|
||||
top: '3%' |
|
||||
}, |
|
||||
series: [ |
|
||||
// 下面背景立体图 |
|
||||
{ |
|
||||
type: 'custom', |
|
||||
emphasis: { |
|
||||
scale: false |
|
||||
}, |
|
||||
// 图形渲染的逻辑 |
|
||||
renderItem: function(params, api) { |
|
||||
const location = api.coord([api.value(0), api.value(1)]) |
|
||||
// 一组图形元素--每个图形元素是一个 object |
|
||||
return { |
|
||||
type: 'group', // 一组 |
|
||||
children: [{ |
|
||||
type: 'CubeLeft', // 上方自定义的图形 |
|
||||
shape: { |
|
||||
api, |
|
||||
xValue: api.value(0), |
|
||||
yValue: api.value(1), |
|
||||
x: location[0], |
|
||||
y: location[1], |
|
||||
yAxisPoint: api.coord([0, api.value(1)]) |
|
||||
}, |
|
||||
style: { |
|
||||
fill: 'rgba(7,29,97,.6)' |
|
||||
} |
|
||||
}, { |
|
||||
type: 'CubeRight', // 上方自定义的图形 |
|
||||
shape: { |
|
||||
api, |
|
||||
xValue: api.value(0), |
|
||||
yValue: api.value(1), |
|
||||
x: location[0], |
|
||||
y: location[1], |
|
||||
yAxisPoint: api.coord([0, api.value(1)]) |
|
||||
}, |
|
||||
style: { |
|
||||
fill: 'rgba(10,35,108,.7)' |
|
||||
} |
|
||||
}, { |
|
||||
type: 'CubeTop', // 上方自定义的图形 |
|
||||
shape: { |
|
||||
api, |
|
||||
xValue: api.value(0), |
|
||||
yValue: api.value(1), |
|
||||
x: location[0], |
|
||||
y: location[1], |
|
||||
yAxisPoint: api.coord([0, api.value(1)]) |
|
||||
}, |
|
||||
style: { |
|
||||
fill: 'rgba(11,42,106,.8)' |
|
||||
} |
|
||||
}] |
|
||||
} |
|
||||
}, |
|
||||
data: this.maxData |
|
||||
}, |
|
||||
// 上面实际数据 |
|
||||
{ |
|
||||
type: 'custom', |
|
||||
renderItem: (params, api) => { |
|
||||
const location = api.coord([api.value(0), api.value(1)]) |
|
||||
return { |
|
||||
type: 'group', |
|
||||
children: [{ |
|
||||
type: 'CubeLeft', |
|
||||
shape: { |
|
||||
api, |
|
||||
xValue: api.value(0), |
|
||||
yValue: api.value(1), |
|
||||
x: location[0], |
|
||||
y: location[1], |
|
||||
yAxisPoint: api.coord([0, api.value(1)]) |
|
||||
}, |
|
||||
style: { |
|
||||
fill: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{ |
|
||||
offset: 0, |
|
||||
color: '#00FFFF' |
|
||||
}, |
|
||||
{ |
|
||||
offset: 1, |
|
||||
color: '#49BDE5' |
|
||||
} |
|
||||
]) |
|
||||
} |
|
||||
}, { |
|
||||
type: 'CubeRight', |
|
||||
shape: { |
|
||||
api, |
|
||||
xValue: api.value(0), |
|
||||
yValue: api.value(1), |
|
||||
x: location[0], |
|
||||
y: location[1], |
|
||||
yAxisPoint: api.coord([0, api.value(1)]) |
|
||||
}, |
|
||||
style: { |
|
||||
fill: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{ |
|
||||
offset: 0, |
|
||||
color: '#00FFFF' |
|
||||
}, |
|
||||
{ |
|
||||
offset: 1, |
|
||||
color: ' #49BDE5' |
|
||||
} |
|
||||
]) |
|
||||
} |
|
||||
}, { |
|
||||
type: 'CubeTop', |
|
||||
shape: { |
|
||||
api, |
|
||||
xValue: api.value(0), |
|
||||
yValue: api.value(1), |
|
||||
x: location[0], |
|
||||
y: location[1], |
|
||||
yAxisPoint: api.coord([0, api.value(1)]) |
|
||||
}, |
|
||||
style: { |
|
||||
fill: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{ |
|
||||
offset: 0, |
|
||||
color: '#00FFFF' |
|
||||
}, |
|
||||
{ |
|
||||
offset: 1, |
|
||||
color: '#49BDE5' |
|
||||
} |
|
||||
]) |
|
||||
} |
|
||||
}] |
|
||||
} |
|
||||
}, |
|
||||
data: this.dataX |
|
||||
}, |
|
||||
// 数值显示 |
|
||||
{ |
|
||||
type: 'bar', |
|
||||
label: { |
|
||||
show: true, |
|
||||
position: 'right', |
|
||||
offset: [20, 3], |
|
||||
fontSize: 16, |
|
||||
color: '#FFC700', |
|
||||
formatter: (params) => { |
|
||||
return params.data.values |
|
||||
} |
|
||||
}, |
|
||||
itemStyle: { |
|
||||
color: 'transparent' |
|
||||
}, |
|
||||
data: this.maxData |
|
||||
}] |
|
||||
}) |
|
||||
window.addEventListener('resize', () => { monthTopEcharts.resize() }) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
<style style="scss" scoped> |
|
||||
</style> |
|
||||
@ -1,210 +0,0 @@ |
|||||
<template> |
|
||||
<div :id="idName" :style="{ height: height, width: width }" /> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
idName: { type: String, default: 'chart' }, |
|
||||
width: { type: String, default: '100%' }, |
|
||||
height: { type: String, default: '200px' }, |
|
||||
chartData: { |
|
||||
type: Object, |
|
||||
default: () => { |
|
||||
return {} |
|
||||
} |
|
||||
}, |
|
||||
desc: { type: String, default: '' } |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
date: [], |
|
||||
legendData: [], |
|
||||
seriesData: [[], []], |
|
||||
disabled: false |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
chartData: { |
|
||||
handler(val, olVal) { |
|
||||
this.initFun() |
|
||||
}, |
|
||||
deep: true |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.initFun() |
|
||||
}, |
|
||||
methods: { |
|
||||
initFun() { |
|
||||
if ((this.chartData.OD && this.chartData.OD.length > 0) || (this.chartData.OS && this.chartData.OS.length > 0)) { |
|
||||
this.chartData.OD.forEach(item => { |
|
||||
this.seriesData[0].push([item.x, item.y, item.num, item.eyeType]) |
|
||||
}) |
|
||||
this.chartData.OS.forEach(item => { |
|
||||
this.seriesData[1].push([item.x, item.y, item.num, item.eyeType]) |
|
||||
}) |
|
||||
} |
|
||||
this.$nextTick(() => { |
|
||||
this.visionFun() |
|
||||
}) |
|
||||
}, |
|
||||
visionFun() { |
|
||||
// 基于准备好的dom，初始化echarts实例 |
|
||||
const qipaoEcharts = this.$echarts.init(document.getElementById(this.idName)) |
|
||||
// const data = [ |
|
||||
// [ |
|
||||
// [60, 1.0, 100, 'OD'], |
|
||||
// [20, 0.5, 200, 'OD'], |
|
||||
// [10, 2.0, 150, 'OD'], |
|
||||
// [50, 2.5, 120, 'OD'], |
|
||||
// [80, 0.6, 10, 'OD'], |
|
||||
// [70, 0.8, 40, 'OD'], |
|
||||
// [76, 1.5, 60, 'OD'], |
|
||||
// [67, 5.0, 90, 'OD'], |
|
||||
// [83, 4.1, 130, 'OD'], |
|
||||
// [42, 0.9, 180, 'OD'], |
|
||||
// [23, 0.8, 150, 'OD'], |
|
||||
// [45, 2.0, 160, 'OD'] |
|
||||
// ], |
|
||||
// [ |
|
||||
// [60, 0.2, 100, 'OS'], |
|
||||
// [20, 0.9, 50, 'OS'], |
|
||||
// [10, 2.6, 80, 'OS'], |
|
||||
// [50, 2.0, 90, 'OS'], |
|
||||
// [80, 0.6, 120, 'OS'], |
|
||||
// [70, 1.8, 150, 'OS'], |
|
||||
// [76, 2.5, 107, 'OS'], |
|
||||
// [67, 3.0, 60, 'OS'], |
|
||||
// [83, 1.1, 80, 'OS'], |
|
||||
// [42, 2.9, 30, 'OS'], |
|
||||
// [23, 2.8, 140, 'OS'], |
|
||||
// [45, 5.0, 170, 'OS'] |
|
||||
// ] |
|
||||
// ] |
|
||||
// 基于准备好的dom，初始化echarts实例 |
|
||||
qipaoEcharts.setOption({ |
|
||||
backgroundColor: 'transparent', |
|
||||
grid: { |
|
||||
left: '4%', |
|
||||
right: '10%', |
|
||||
top: '10%', |
|
||||
bottom: '24%' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
show: true, |
|
||||
confine: true |
|
||||
}, |
|
||||
legend: { |
|
||||
orient: 'vertical', |
|
||||
right: '0', |
|
||||
top: '20%', |
|
||||
data: ['OD', 'OS'], |
|
||||
textStyle: { |
|
||||
color: '#fff' |
|
||||
} |
|
||||
}, |
|
||||
dataZoom: [ |
|
||||
{ |
|
||||
type: 'inside' |
|
||||
} |
|
||||
], |
|
||||
xAxis: { |
|
||||
splitLine: { |
|
||||
show: false |
|
||||
}, |
|
||||
axisLine: { |
|
||||
lineStyle: { |
|
||||
color: '#fff' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
yAxis: { |
|
||||
offset: 5, |
|
||||
splitLine: { |
|
||||
lineStyle: { |
|
||||
type: 'dashed', |
|
||||
color: '#6b7284' |
|
||||
} |
|
||||
}, |
|
||||
axisLine: { |
|
||||
lineStyle: { |
|
||||
color: '#fff' |
|
||||
} |
|
||||
}, |
|
||||
scale: true |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
name: 'OD', |
|
||||
data: this.seriesData[0], |
|
||||
type: 'scatter', |
|
||||
symbolSize: (data) => { |
|
||||
// console.log(data) |
|
||||
return data[2] * 8 // 控制气泡大小 |
|
||||
}, |
|
||||
emphasis: { |
|
||||
focus: 'series' |
|
||||
// label: { |
|
||||
// show: true, |
|
||||
// color: '#fff', |
|
||||
// formatter: (param) => { |
|
||||
// return param.data[1] |
|
||||
// }, |
|
||||
// position: 'top' |
|
||||
// } |
|
||||
}, |
|
||||
itemStyle: { |
|
||||
color: new this.$echarts.graphic.RadialGradient(0.5, 0.5, 1, [ |
|
||||
{ |
|
||||
offset: 0, |
|
||||
color: '#193668' |
|
||||
}, |
|
||||
{ |
|
||||
offset: 0.5, |
|
||||
// this.idName === 'yanya-echarts' ? '#4b6fd9' : (this.idName === 'shili-echarts' ? '#9ac880 ' : '#4ebab8') |
|
||||
color: '#4b6fd9' |
|
||||
} |
|
||||
]) |
|
||||
} |
|
||||
}, { |
|
||||
name: 'OS', |
|
||||
data: this.seriesData[1], |
|
||||
type: 'scatter', |
|
||||
symbolSize: (data) => { |
|
||||
// console.log(data) |
|
||||
return data[2] * 8 // 控制气泡大小 |
|
||||
}, |
|
||||
emphasis: { |
|
||||
focus: 'series', |
|
||||
label: { |
|
||||
show: true, |
|
||||
color: '#fff', |
|
||||
formatter: (param) => { |
|
||||
return param.data[1] |
|
||||
}, |
|
||||
position: 'top' |
|
||||
} |
|
||||
}, |
|
||||
itemStyle: { |
|
||||
color: new this.$echarts.graphic.RadialGradient(0.5, 0.5, 1, [ |
|
||||
{ |
|
||||
offset: 0, |
|
||||
color: '#193668' |
|
||||
}, |
|
||||
{ |
|
||||
offset: 0.5, |
|
||||
color: '#9ac880' |
|
||||
} |
|
||||
]) |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
}) |
|
||||
window.addEventListener('resize', () => { qipaoEcharts.resize() }) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
<style style="scss" scoped> |
|
||||
</style> |
|
||||
@ -1,291 +0,0 @@ |
|||||
<template> |
|
||||
<div :id="idName" :style="{ height: height, width: width }" /> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
idName: { type: String, default: 'chart' }, |
|
||||
width: { type: String, default: '100%' }, |
|
||||
height: { type: String, default: '200px' }, |
|
||||
chartData: { type: Array, default: () => [] }, |
|
||||
desc: { type: String, default: '' } |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
date: [], |
|
||||
legendData: [], |
|
||||
seriesData: [], |
|
||||
color: ['#00FFFF', '#FF24CF'], |
|
||||
seriesDataList: [], |
|
||||
disabled: false, |
|
||||
sexWidth: '120', |
|
||||
sexHeight: '120', |
|
||||
startAngle: 50, |
|
||||
timer: null, |
|
||||
isBig: true, |
|
||||
minradius: 24, |
|
||||
radius: 24, |
|
||||
maxradius: 28, |
|
||||
centerImage: require('@/assets/img/sex-echarts-two.png'), |
|
||||
border: require('@/assets/img/sex-echarts.png'), |
|
||||
sumTotal: null |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
chartData: { |
|
||||
handler(val, olVal) { |
|
||||
this.initFun() |
|
||||
}, |
|
||||
deep: true |
|
||||
}, |
|
||||
sexWidth(val) { |
|
||||
this.initFun() |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.sexWidth = document.querySelector(`#${this.idName}`) ? document.querySelector(`#${this.idName}`).offsetWidth : '' |
|
||||
this.sexHeight = document.querySelector(`#${this.idName}`) ? document.querySelector(`#${this.idName}`).offsetHeight : '' |
|
||||
}, |
|
||||
methods: { |
|
||||
initFun() { |
|
||||
// const ceshi = [{ |
|
||||
// name: '男', |
|
||||
// value: 14000 |
|
||||
// }, { |
|
||||
// name: '女', |
|
||||
// value: 9000 |
|
||||
// }] |
|
||||
if (this.chartData && this.chartData.length > 0) { |
|
||||
// console.log(this.chartData) |
|
||||
this.sumTotal = this.chartData.reduce((a, b) => { return a + b.value }, 0) |
|
||||
this.seriesDataList = [] |
|
||||
this.chartData.forEach((item, i) => { |
|
||||
this.seriesDataList.push({ |
|
||||
value: this.chartData[i].value, |
|
||||
name: this.chartData[i].name, |
|
||||
// 饼图外边圆样式 |
|
||||
itemStyle: { |
|
||||
borderWidth: 5, |
|
||||
shadowBlur: 20, |
|
||||
borderColor: this.color[i], |
|
||||
shadowColor: this.color[i] |
|
||||
} |
|
||||
}, |
|
||||
// 断间距 |
|
||||
{ |
|
||||
value: this.sumTotal / 10, |
|
||||
name: '', |
|
||||
label: { |
|
||||
show: false // 隐藏文本标签 |
|
||||
}, |
|
||||
labelLine: { |
|
||||
show: false // 隐藏文本标签线 |
|
||||
}, |
|
||||
itemStyle: { |
|
||||
color: 'rgba(0, 0, 0, 0)', |
|
||||
borderColor: 'rgba(0, 0, 0, 0)', |
|
||||
borderWidth: 0 |
|
||||
} |
|
||||
} |
|
||||
) |
|
||||
}) |
|
||||
} |
|
||||
this.$nextTick(() => { |
|
||||
this.visionFun() |
|
||||
}) |
|
||||
}, |
|
||||
visionFun() { |
|
||||
// 基于准备好的dom，初始化echarts实例 |
|
||||
const sexCountEcharts = this.$echarts.init(document.getElementById(this.idName)) |
|
||||
// 基于准备好的dom，初始化echarts实例 |
|
||||
sexCountEcharts.setOption({ |
|
||||
backgroundColor: 'transparent', |
|
||||
color: this.color, |
|
||||
// 中间文字 |
|
||||
title: { |
|
||||
text: '性别分布', |
|
||||
top: '60%', |
|
||||
textAlign: 'center', |
|
||||
left: '49%', |
|
||||
textStyle: { |
|
||||
color: '#fff', |
|
||||
fontSize: 14, |
|
||||
fontWeight: '400' |
|
||||
} |
|
||||
}, |
|
||||
// 配置图形元素 |
|
||||
graphic: { |
|
||||
elements: [ |
|
||||
// { |
|
||||
// type: 'image', |
|
||||
// z: 3, |
|
||||
// style: { |
|
||||
// image: border, // 自定义圆线 |
|
||||
// width: this.sexWidth * 0.38, |
|
||||
// height: this.sexWidth * 0.38 |
|
||||
// }, |
|
||||
// left: 'center', |
|
||||
// top: 'center' |
|
||||
// }, |
|
||||
{ |
|
||||
type: 'image', |
|
||||
z: 3, |
|
||||
style: { |
|
||||
image: this.centerImage, // 自定义中间图片 |
|
||||
width: this.sexWidth * 0.13, |
|
||||
height: this.sexWidth * 0.13 |
|
||||
}, |
|
||||
left: 'center', |
|
||||
top: '38%' |
|
||||
}] |
|
||||
}, |
|
||||
tooltip: { |
|
||||
show: true, |
|
||||
formatter: (params) => { |
|
||||
// console.log(params) |
|
||||
var percent = ((params.value / this.sumTotal) * 100).toFixed(2) |
|
||||
return `${params.marker} ${params.name} - ${params.value}人 : ${percent}% ` |
|
||||
} |
|
||||
}, |
|
||||
toolbox: { |
|
||||
show: false |
|
||||
}, |
|
||||
series: [{ |
|
||||
name: '', |
|
||||
type: 'pie', |
|
||||
top: '8%', |
|
||||
clockwise: false, |
|
||||
radius: [this.sexWidth * 0.24, this.sexWidth * 0.235], // 圆的半径 |
|
||||
startAngle: 30, // 起始角度 |
|
||||
emphasis: { |
|
||||
scale: true // 鼠标经过放大 |
|
||||
}, |
|
||||
// itemStyle: { |
|
||||
// borderColor: '#081432', |
|
||||
// borderWidth: 10 |
|
||||
// }, |
|
||||
// 饼图图形上的文本标签 |
|
||||
label: { |
|
||||
show: true, |
|
||||
fontSize: 12, |
|
||||
lineHeight: 35, |
|
||||
overflow: 'none', |
|
||||
textBorderColor: 'transparent', |
|
||||
color: '#fff', |
|
||||
// padding: [0, -60], // 文字在线上 |
|
||||
formatter: (params) => { |
|
||||
return params.name |
|
||||
// var percent = ((params.value / this.sumTotal) * 100).toFixed(2) |
|
||||
// return `${params.value}人 ${params.name} \n ${percent}% ` |
|
||||
} |
|
||||
}, |
|
||||
// // 标签的视觉引导线 |
|
||||
labelLine: { |
|
||||
width: 4, |
|
||||
length: 15, |
|
||||
length2: 25, |
|
||||
show: true, |
|
||||
color: '#00ffff' |
|
||||
}, |
|
||||
// 数据 |
|
||||
data: [...this.seriesDataList] |
|
||||
}, |
|
||||
|
|
||||
{ |
|
||||
type: 'pie', |
|
||||
name: '旋转圆', |
|
||||
top: '8%', |
|
||||
zlevel: 20, |
|
||||
silent: true, |
|
||||
radius: [this.sexWidth * 0.21, this.sexWidth * 0.205], |
|
||||
emphasis: { |
|
||||
scale: false |
|
||||
}, |
|
||||
startAngle: this.startAngle, |
|
||||
data: this.generateData(50, 40, 10, '#2dc0c9'), |
|
||||
label: { |
|
||||
show: false |
|
||||
}, |
|
||||
labelLine: { |
|
||||
show: false |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
type: 'pie', |
|
||||
name: '旋转圆', |
|
||||
top: '8%', |
|
||||
zlevel: 20, |
|
||||
silent: true, |
|
||||
radius: [this.sexWidth * 0.19, this.sexWidth * 0.185], |
|
||||
emphasis: { |
|
||||
scale: false |
|
||||
}, |
|
||||
data: this.generateData(1, 40, 10, '#2dc0c9'), |
|
||||
label: { |
|
||||
show: false |
|
||||
}, |
|
||||
labelLine: { |
|
||||
show: false |
|
||||
} |
|
||||
}] |
|
||||
}) |
|
||||
window.addEventListener('resize', () => { |
|
||||
this.sexWidth = document.querySelector(`#${this.idName}`) ? document.querySelector(`#${this.idName}`).offsetWidth : '' |
|
||||
this.sexHeight = document.querySelector(`#${this.idName}`) ? document.querySelector(`#${this.idName}`).offsetHeight : '' |
|
||||
sexCountEcharts.resize() |
|
||||
}) |
|
||||
if (this.timer) { |
|
||||
clearInterval(this.timer) |
|
||||
} |
|
||||
this.timer = setInterval(() => { |
|
||||
this.draw() |
|
||||
}, 200) |
|
||||
}, |
|
||||
generateData(totalNum, bigvalue, smallvalue, color) { |
|
||||
const dataArr = [] |
|
||||
for (var i = 0; i < totalNum; i++) { |
|
||||
if (i % 2 === 0) { |
|
||||
dataArr.push({ |
|
||||
name: (i + 1).toString(), |
|
||||
value: bigvalue, |
|
||||
itemStyle: { |
|
||||
color: color, |
|
||||
borderWidth: 0 |
|
||||
} |
|
||||
}) |
|
||||
} else { |
|
||||
dataArr.push({ |
|
||||
name: (i + 1).toString(), |
|
||||
value: smallvalue, |
|
||||
itemStyle: { |
|
||||
shadowBlur: 20, |
|
||||
color: 'rgba(0,0,0,0)', |
|
||||
borderWidth: 0 |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
return dataArr |
|
||||
}, |
|
||||
draw() { |
|
||||
this.startAngle = this.startAngle - 5 |
|
||||
if (this.isBig) { |
|
||||
this.radius = this.radius + 0.5 |
|
||||
if (this.radius > this.maxradius) { |
|
||||
this.isBig = false |
|
||||
} |
|
||||
} else { |
|
||||
this.radius = this.radius - 0.5 |
|
||||
if (this.radius < this.minradius) { |
|
||||
this.isBig = true |
|
||||
} |
|
||||
} |
|
||||
// this.visionFun() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
<style style="scss" scoped> |
|
||||
</style> |
|
||||
@ -1,132 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog title="test" top="3vh" :visible.sync="visible" append-to-body> |
|
||||
<div class="exam-info-container clearfix"> |
|
||||
<div class="exam-title">{{ examName }}</div> |
|
||||
<div class="exam-date-time-list"> |
|
||||
<el-select |
|
||||
ref="select" |
|
||||
v-model="activeRecId" |
|
||||
placeholder="请选择" |
|
||||
size="small" |
|
||||
popper-class="c-el-select-popper" |
|
||||
:popper-append-to-body="false" |
|
||||
@visible-change="selectVisibleHandle" |
|
||||
> |
|
||||
<el-option |
|
||||
v-for="item in list" |
|
||||
:key="item.recId" |
|
||||
:label="item.time" |
|
||||
:value="item.recId" |
|
||||
@mouseover.native="preview(item)" |
|
||||
@mouseout.native="restore()" |
|
||||
/> |
|
||||
</el-select> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="dialog-container"> |
|
||||
<el-table :data="activeObj.data" :span-method="arraySpanMethod" border style="width: 100%"> |
|
||||
<el-table-column align="center" show-overflow-tooltip label="" prop="name" width="180" /> |
|
||||
<el-table-column align="center" show-overflow-tooltip label="OD"> |
|
||||
<template slot-scope="scope"> |
|
||||
<span>{{ scope.row.both||scope.row.od }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" show-overflow-tooltip label="OS"> |
|
||||
<template slot-scope="scope"> |
|
||||
<span>{{ scope.row.both||scope.row.os }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
|
|
||||
<template slot="footer"> |
|
||||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
examName: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
list: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
activeRecId: '', |
|
||||
activeObj: { |
|
||||
type: '', |
|
||||
time: null, |
|
||||
recId: '', |
|
||||
data: [] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
activeRecId(val) { |
|
||||
this.activeObj = this.list.find((item, index, array) => item.recId === val) |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.activeRecId = this.list[0].recId |
|
||||
}, |
|
||||
arraySpanMethod({ row, column, rowIndex, columnIndex }) { |
|
||||
if (row.both && column.property !== 'name') { |
|
||||
// od列1,os列2.(合并od，隐藏os) |
|
||||
if (columnIndex === 1) { |
|
||||
return [1, 2] |
|
||||
} else if (columnIndex === 2) { |
|
||||
return [0, 0] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
preview(item) { |
|
||||
this.activeObj = item |
|
||||
}, |
|
||||
restore() { |
|
||||
this.activeObj = this.list.find((item, index, array) => item.recId === this.activeRecId) |
|
||||
}, |
|
||||
selectVisibleHandle(val) { |
|
||||
if (val) { |
|
||||
const selectInputDom = this.$refs.select.$el |
|
||||
const width = selectInputDom.offsetWidth |
|
||||
const selectPoper = selectInputDom.getElementsByClassName('c-el-select-popper')[0] |
|
||||
const arrowDom = selectInputDom.getElementsByClassName('popper__arrow')[0] |
|
||||
this.$nextTick(function() { |
|
||||
const left = parseInt(selectPoper.style.left) |
|
||||
selectPoper.style.left = (left + width - 25) + 'px' |
|
||||
arrowDom.style.left = '10px' |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.exam-info-container { |
|
||||
margin-bottom: 5px; |
|
||||
|
|
||||
.exam-title { |
|
||||
float: left; |
|
||||
margin-top: 5px; |
|
||||
font-size: 16px; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
.exam-date-time-list { |
|
||||
float: right; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,154 +0,0 @@ |
|||||
<template> |
|
||||
<div class="crf-data-container"> |
|
||||
<div class="exam-info-container clearfix"> |
|
||||
<div class="exam-title">{{ examName }}</div> |
|
||||
<div class="exam-date-time-list" /> |
|
||||
</div> |
|
||||
|
|
||||
<div class="dialog-container"> |
|
||||
<el-table :data="activeObj.data" :span-method="arraySpanMethod" border style="width: 100%"> |
|
||||
<el-table-column align="center" show-overflow-tooltip width="150px"> |
|
||||
<template slot="header" slot-scope="scope"> |
|
||||
<el-select |
|
||||
ref="select" |
|
||||
v-model="activeRecId" |
|
||||
placeholder="请选择" |
|
||||
popper-class="c-el-select-popper" |
|
||||
:popper-append-to-body="false" |
|
||||
@visible-change="selectVisibleHandle" |
|
||||
> |
|
||||
<el-option |
|
||||
v-for="item in list" |
|
||||
:key="item.recId" |
|
||||
:label="item.time" |
|
||||
:value="item.recId" |
|
||||
@mouseover.native="preview(item)" |
|
||||
@mouseout.native="restore()" |
|
||||
/> |
|
||||
</el-select> |
|
||||
</template> |
|
||||
<template slot-scope="scope"> |
|
||||
<span>{{ scope.row.name }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" show-overflow-tooltip label="OD"> |
|
||||
<template slot-scope="scope"> |
|
||||
<span>{{ (scope.row.both||scope.row.od)|f_null }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column align="center" show-overflow-tooltip label="OS"> |
|
||||
<template slot-scope="scope"> |
|
||||
<span>{{ (scope.row.both||scope.row.os)|f_null }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
filters: { |
|
||||
f_null(val) { |
|
||||
if ((!val) || val === 'null') { return '' } else { return val } |
|
||||
} |
|
||||
}, |
|
||||
props: { |
|
||||
examName: { type: String, default: '' }, |
|
||||
list: { type: Array, default: () => [] }, |
|
||||
value: { type: Object, default: () => { } } |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
activeRecId: '', |
|
||||
activeObj: { |
|
||||
type: '', |
|
||||
time: null, |
|
||||
recId: '', |
|
||||
data: [] |
|
||||
}, |
|
||||
values: '' |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
activeRecId(val) { |
|
||||
this.activeObj = this.list.find((item, index, array) => item.recId === val) |
|
||||
this.$emit('input', this.activeObj) |
|
||||
}, |
|
||||
list(val) { |
|
||||
this.init() |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
if (this.list.length > 0) { this.init() } |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.activeRecId = this.list[0].recId |
|
||||
}, |
|
||||
arraySpanMethod({ row, column, rowIndex, columnIndex }) { |
|
||||
if (row.both && column.property !== 'name') { |
|
||||
// od列1,os列2.(合并od，隐藏os) |
|
||||
if (columnIndex === 1) { |
|
||||
return [1, 2] |
|
||||
} else if (columnIndex === 2) { |
|
||||
return [0, 0] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
preview(item) { |
|
||||
this.activeObj = item |
|
||||
}, |
|
||||
restore() { |
|
||||
this.activeObj = this.list.find((item, index, array) => item.recId === this.activeRecId) |
|
||||
}, |
|
||||
selectVisibleHandle(val) { |
|
||||
if (val && this.list.length > 0) { |
|
||||
const selectInputDom = this.$refs.select.$el |
|
||||
// 偏移量 |
|
||||
const width = selectInputDom.offsetWidth |
|
||||
const selectPoper = selectInputDom.getElementsByClassName('c-el-select-popper')[0] |
|
||||
const arrowDom = selectInputDom.getElementsByClassName('popper__arrow')[0] |
|
||||
this.$nextTick(function() { |
|
||||
const left = parseInt(selectPoper.style.left) |
|
||||
|
|
||||
// 偏右 |
|
||||
// arrowDom.style.left = '10px' |
|
||||
// selectPoper.style.left = (left + width - 25) + 'px' |
|
||||
|
|
||||
// 偏左 |
|
||||
arrowDom.style.left = (width + 20) + 'px' |
|
||||
selectPoper.style.left = (left - width - 10) + 'px' |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.crf-data-container { |
|
||||
margin-bottom: 5px; |
|
||||
.exam-info-container { |
|
||||
margin-bottom: 5px; |
|
||||
|
|
||||
.exam-title { |
|
||||
float: left; |
|
||||
margin-top: 5px; |
|
||||
font-size: 16px; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
.exam-date-time-list { |
|
||||
float: right; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.crf-data-container { |
|
||||
.el-table { |
|
||||
z-index: inherit !important; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -1,436 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
width="90%" |
|
||||
top="2vh" |
|
||||
fullscreen |
|
||||
append-to-body |
|
||||
:visible.sync="visible" |
|
||||
:title="dataForm.title||(!dataForm.id ? $t('add') : $t('update'))" |
|
||||
:close-on-click-modal="false" |
|
||||
:close-on-press-escape="false" |
|
||||
class="edit-full-case-template-dialog" |
|
||||
@close="closeDialog" |
|
||||
> |
|
||||
<div class="crf-edit-full-content"> |
|
||||
<crf-editor |
|
||||
ref="crf" |
|
||||
v-model="dataForm.content" |
|
||||
v-loading="CRFLoading" |
|
||||
:height="height" |
|
||||
:is-p="true" |
|
||||
class="crf-editor-full" |
|
||||
:toolbar="toolbar" |
|
||||
:is-sign="true" |
|
||||
element-loading-text="智能填充中，请稍等" |
|
||||
v-on="$listeners" |
|
||||
@setTabSwitch="setTabSwitch" |
|
||||
/> |
|
||||
<div class="case-template-data"> |
|
||||
<el-tabs v-model="TabActiveName" @tab-click="handleClick"> |
|
||||
<el-tab-pane label="病历模板" name="病历模板"> |
|
||||
<div class="tabs"> |
|
||||
<span |
|
||||
v-for="(item,index) in tabList" |
|
||||
:key="index" |
|
||||
class="tab-span" |
|
||||
:class="tabCurrentIndex===index ? 'tab-span-active':''" |
|
||||
@click="tabSpanClick(index)" |
|
||||
>{{ item }}</span> |
|
||||
<div class="tabContent"> |
|
||||
<template v-if="!nodataShow"> |
|
||||
<p |
|
||||
v-for="(itemList,itemListIndex) in tabItemList" |
|
||||
:key="itemListIndex" |
|
||||
class="tab-content-item" |
|
||||
:class="currentItemListIndex ===itemListIndex ? 'tab-content-active' : ''" |
|
||||
@click="exportContent(itemList)" |
|
||||
> |
|
||||
<span>{{ itemList.name }}</span> |
|
||||
<span>引入</span> |
|
||||
</p> |
|
||||
</template> |
|
||||
<template v-else> |
|
||||
<span>暂无数据</span> |
|
||||
</template> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-tab-pane> |
|
||||
<el-tab-pane label="智能填充" name="智能填充"> |
|
||||
<div class="crf-data"> |
|
||||
<div> |
|
||||
<template v-if="examData.length>0"> |
|
||||
<div v-for="(item,index) in examData" :key="index"> |
|
||||
<crf-data |
|
||||
v-if="crfDataVisible" |
|
||||
ref="crfDataRef" |
|
||||
v-model="item.value" |
|
||||
:exam-name="item.name" |
|
||||
:list="item.exams" |
|
||||
/> |
|
||||
</div> |
|
||||
</template> |
|
||||
<div v-else class="nodata"> |
|
||||
<img src="@/assets/img/nodata.png" alt=""> |
|
||||
</div> |
|
||||
</div> |
|
||||
<el-button type="primary" class="button-full" @click="fullClick">一键填充</el-button> |
|
||||
</div> |
|
||||
</el-tab-pane> |
|
||||
</el-tabs> |
|
||||
<!-- <el-button type="primary" plain class="button" @click="managementTemplateHandle">内容模板</el-button> --> |
|
||||
</div> |
|
||||
</div> |
|
||||
<template slot="footer"> |
|
||||
<el-button v-if="dataForm.formName.includes('复诊')" size="small" @click="referenceLastData">引用上次病例</el-button> |
|
||||
<el-button size="small" @click="visible = false">{{ $t('cancel') }}</el-button> |
|
||||
<el-button type="primary" size="small" @click="submit">{{ $t('confirm') }}</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
|
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import Vue from 'vue' |
|
||||
import crfEditor from '@/components/hm-crf' |
|
||||
import crfData from '@/components/hm-crf/crf-data.vue' |
|
||||
import IntelligentFill from '@/mixins/IntelligentFill' |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
|
|
||||
export default { |
|
||||
components: { crfEditor, crfData }, |
|
||||
mixins: [IntelligentFill], |
|
||||
props: { |
|
||||
systemInfo: { |
|
||||
type: Object, |
|
||||
default: () => { |
|
||||
return {} |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: true, |
|
||||
height: 'calc(100vh - 130px)', |
|
||||
dataForm: { |
|
||||
id: '', |
|
||||
type: '', |
|
||||
formName: '', |
|
||||
description: '', |
|
||||
patientCentreId: '', |
|
||||
patientIdNumber: '', |
|
||||
content: '' |
|
||||
}, |
|
||||
TabActiveName: '病历模板', |
|
||||
// 获取的检查数据，【item.value】为v-model绑定值，即用于填充左侧iframe |
|
||||
examData: [], |
|
||||
crfDataVisible: true, |
|
||||
tabList: ['辅助检查', '现病史', '处理意见', '初检主诉', '复诊主诉', '专科检查'], |
|
||||
tabCurrentIndex: 0, |
|
||||
currentItemListIndex: 0, |
|
||||
tabItemList: [], |
|
||||
activeName: '辅助检查', |
|
||||
nodataShow: false, |
|
||||
toolbar: `hminput hmcheckbox hmradio hmbutton | hmpreview | |
|
||||
image table | |
|
||||
code | letterspacing | formatselect | fontsizeselect | |
|
||||
bold italic forecolor backcolor | |
|
||||
lineheight | |
|
||||
alignleft aligncenter alignright alignjustify | |
|
||||
bullist numlist outdent indent`, |
|
||||
timerDate: null, |
|
||||
CRFLoading: false |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.$nextTick(() => { |
|
||||
if (this.dataForm.id) { |
|
||||
this.getInfo() |
|
||||
// 获取病例模板tab类型 |
|
||||
this.getTypeTemplate() |
|
||||
// 获取右侧智能填充数据 |
|
||||
this.getMedicalValue() |
|
||||
} else { |
|
||||
this.dataForm = { ...this.dataForm } |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 获取信息 |
|
||||
getInfo() { |
|
||||
this.$http.get(`/visit/record/${this.dataForm.id}`).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.dataForm.formName = res.data.formName |
|
||||
this.dataForm.content = Base64.decode(res.data.formContent) |
|
||||
this.$refs['crf'].renderContent() |
|
||||
res.data.isWrite === 0 ? (this.getFirstFeedbackData('病历模板', this.dataForm.id), this.setQmDate()) : '' |
|
||||
} |
|
||||
}).catch(() => { }) |
|
||||
}, |
|
||||
// 设置签名日期 |
|
||||
setQmDate() { |
|
||||
const ifr = document.getElementsByClassName('tox-edit-area__iframe')[0] |
|
||||
this.timerDate = setInterval(() => { |
|
||||
if (ifr.contentWindow.dataFill) { |
|
||||
ifr.contentWindow.dataFill('', this.$moment().format('YYYY-MM-DD')) |
|
||||
clearInterval(this.timerDate) |
|
||||
} |
|
||||
}, 500) |
|
||||
}, |
|
||||
// 管理模板 |
|
||||
managementTemplateHandle() { |
|
||||
this.$router.push({ name: 'templateManagement' }) |
|
||||
}, |
|
||||
// tab切换 |
|
||||
handleClick() { |
|
||||
|
|
||||
}, |
|
||||
// 点击tabspan |
|
||||
tabSpanClick(index, name) { |
|
||||
this.tabCurrentIndex = index |
|
||||
this.activeName = name || this.tabList[index] |
|
||||
this.getTypeTemplate() |
|
||||
}, |
|
||||
// 获取病例模板tab类型 |
|
||||
async getTypeTemplate() { |
|
||||
this.nodataShow = false |
|
||||
const { data: res } = await this.$http.get(`/medical/record/template/getListByType/${this.activeName}`) |
|
||||
if (res.code === 0) { |
|
||||
this.typeTemplateList = res.data |
|
||||
this.tabItemList = res.data |
|
||||
this.nodataShow = !(res.data.length > 0) |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 获取右侧智能填充数据 |
|
||||
async getMedicalValue() { |
|
||||
const { data: res } = await this.$http.get(`/medical/record/template/getValue/${this.dataForm.patientIdNumber}`) |
|
||||
if (res.code === 0) { |
|
||||
this.examData = res.data |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 一键填充 |
|
||||
fullClick() { |
|
||||
// 过滤数据 |
|
||||
const dataSelect = [] |
|
||||
let fillItemList = [] |
|
||||
this.examData.forEach(item => { |
|
||||
if (item.value) { |
|
||||
dataSelect.push(item.value) |
|
||||
if (item.value.data) { |
|
||||
const examItemList = item.value.data.map((obj, index, arr) => { |
|
||||
obj.recId = item.value.recId |
|
||||
obj.time = item.value.time |
|
||||
return obj |
|
||||
}) |
|
||||
fillItemList = fillItemList.concat(examItemList) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
const ifr = document.getElementsByClassName('tox-edit-area__iframe')[0] |
|
||||
const ifrWin = ifr.contentWindow |
|
||||
ifrWin.dataFill(fillItemList) |
|
||||
}, |
|
||||
// hm-crf子组件调用setTabSwitch,根据光标定位切换tab |
|
||||
setTabSwitch(trClassName) { |
|
||||
trClassName === 'fzjc' ? this.tabSpanClick(0, '辅助检查') |
|
||||
: (trClassName === 'xbs' ? this.tabSpanClick(1, '现病史') |
|
||||
: (trClassName === 'clyj' ? this.tabSpanClick(2, '处理意见') |
|
||||
: (trClassName === 'zhusu' ? this.tabSpanClick(3, '初检主诉') |
|
||||
: (trClassName === 'fzzs' ? this.tabSpanClick(4, '复诊主诉') |
|
||||
: (trClassName === 'zkjc' ? this.tabSpanClick(5, '专科检查') : ''))))) |
|
||||
}, |
|
||||
// 抽屉关闭 |
|
||||
handleClose(done) { |
|
||||
this.$emit('drawerClose', false) |
|
||||
}, |
|
||||
// 引入内容 |
|
||||
exportContent(item) { |
|
||||
const content = Base64.decode(item.content) |
|
||||
this.$refs.crf.fullContent(content) |
|
||||
setTimeout(() => { |
|
||||
this.fullClick() |
|
||||
}, 1000) |
|
||||
}, |
|
||||
// 引用上次病例 |
|
||||
async referenceLastData() { |
|
||||
const { data: res } = await this.$http.get(`/from/data/getLastERMData/${this.dataForm.patientCentreId}/${this.dataForm.patientIdNumber}`) |
|
||||
if (res.code === 0) { |
|
||||
this.dataForm.content = Base64.decode(res.data.formContent) |
|
||||
// console.log(this.dataForm.content) |
|
||||
this.$refs['crf'].renderContent() |
|
||||
// 引用上次数据时把里面的数据清除！变态！！！ |
|
||||
this.$nextTick(() => { |
|
||||
const ifr = document.getElementsByClassName('tox-edit-area__iframe')[0] |
|
||||
const clearValueDOC = ifr.contentWindow.document.getElementsByClassName('clearValue')[0] |
|
||||
// console.log(clearValueDOC.getElementsByTagName('input')) |
|
||||
const inputArr = Array.prototype.slice.call(clearValueDOC.getElementsByTagName('input')) // 转换成数组 |
|
||||
inputArr.forEach(item => { |
|
||||
// item.value = '' |
|
||||
this.$(item).attr('value', '') |
|
||||
}) |
|
||||
}) |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 门诊电子病历截取text |
|
||||
getText(dom) { |
|
||||
var allText = '' |
|
||||
allText = dom.innerHTML |
|
||||
// console.log(allText) |
|
||||
allText = allText.replace(/<\/?.+?\/?>/g, '')// 去除标签 |
|
||||
allText = allText.replace(/\s+/g, '')// 去除空格 |
|
||||
// const ceshi = allText.repeat(/<input[^>]+?value=(\"|\')([^>]*)\1[^>]+?>/gi) |
|
||||
if (allText === '') return |
|
||||
console.log(allText) |
|
||||
// console.log(ceshi) |
|
||||
return allText |
|
||||
}, |
|
||||
// 表单提交 |
|
||||
// 把编辑的内容保存 |
|
||||
submit() { |
|
||||
// this.insertDOM() |
|
||||
// 判断是否签字 |
|
||||
const ifr = document.querySelector('#myEditor_ifr') |
|
||||
// const zhusu = ifr.contentWindow.document.getElementById('zhusu-td') |
|
||||
// const zkjc = ifr.contentWindow.document.getElementById('zkjc-td') |
|
||||
// const fzjc = ifr.contentWindow.document.getElementById('fzjc-td') |
|
||||
// const clyj = ifr.contentWindow.document.getElementById('clyj-td') |
|
||||
// this.getText(zhusu) |
|
||||
// this.getText(zkjc) |
|
||||
// this.getText(fzjc) |
|
||||
// this.getText(clyj) |
|
||||
// return |
|
||||
if (ifr.contentWindow.isSignSuccess()) { |
|
||||
this.$http.post('/visit/record/saveWriteVisit', { |
|
||||
ermData: { |
|
||||
zhsbsh: '', // 主诉病史 |
|
||||
zhkjch: '', // 专科检查 |
|
||||
fzhjch: '', // 辅助检查 |
|
||||
chlyj: '' // 处理意见 |
|
||||
}, |
|
||||
formContent: Base64.encode(this.dataForm.content), |
|
||||
id: this.dataForm.id |
|
||||
}).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') |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
} else { |
|
||||
this.$message({ |
|
||||
message: '请让患者签名后再保存哦', |
|
||||
type: 'warning' |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
closeDialog() { |
|
||||
this.$emit('closeDialog') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
.edit-full-case-template-dialog { |
|
||||
.el-form-item { |
|
||||
margin-bottom: 8px; |
|
||||
} |
|
||||
.crf-editor-full { |
|
||||
flex: 1; |
|
||||
} |
|
||||
.crf-edit-full-content { |
|
||||
display: flex; |
|
||||
} |
|
||||
.case-template-data { |
|
||||
padding: 0 0 0 16px; |
|
||||
position: relative; |
|
||||
width: 400px; |
|
||||
.tabs { |
|
||||
text-align: left; |
|
||||
} |
|
||||
.tab-span { |
|
||||
display: inline-block; |
|
||||
padding: 4px 8px; |
|
||||
background: #f2f3f5; |
|
||||
color: #4e5969; |
|
||||
margin-right: 6px; |
|
||||
margin-bottom: 8px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.tab-span-active { |
|
||||
color: #fff; |
|
||||
background: #1e79ff; |
|
||||
} |
|
||||
.tabContent { |
|
||||
margin-top: 10px; |
|
||||
} |
|
||||
.tab-content-item { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
padding: 6px 12px; |
|
||||
cursor: pointer; |
|
||||
span:nth-child(2) { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
.tab-content-item:hover { |
|
||||
background: #f7f8fa; |
|
||||
span:nth-child(2) { |
|
||||
color: #1e79ff; |
|
||||
display: inline-block; |
|
||||
} |
|
||||
} |
|
||||
.button { |
|
||||
width: 95%; |
|
||||
text-align: center; |
|
||||
border-radius: 4px; |
|
||||
position: absolute; |
|
||||
bottom: 0; |
|
||||
left: 12px; |
|
||||
} |
|
||||
.nodata { |
|
||||
width: 300px; |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
img { |
|
||||
width: 300px; |
|
||||
} |
|
||||
} |
|
||||
.crf-data { |
|
||||
position: relative; |
|
||||
height: 100%; |
|
||||
.button-full { |
|
||||
position: absolute; |
|
||||
left: 50%; |
|
||||
transform: translateX(-50%); |
|
||||
bottom: 0; |
|
||||
width: 95%; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.el-tabs__content { |
|
||||
height: 93%; |
|
||||
} |
|
||||
.el-tab-pane,.el-tabs { |
|
||||
height: 100%; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,188 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
title="填写表单" |
|
||||
top="1vh" |
|
||||
width="95%" |
|
||||
:visible.sync="visible" |
|
||||
append-to-body |
|
||||
> |
|
||||
<div class="dialog-container"> |
|
||||
<div class="crf-container"> |
|
||||
<div class="crf-content"> |
|
||||
<crf v-if="crfVisible" ref="crfComponent" :value="content" :height="'100%'" :js-arr="jsArr" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- <div v-if="examData.length>0" class="crf-data"> |
|
||||
<div v-for="(item,index) in examData" :key="index"> |
|
||||
<crf-data v-if="crfDataVisible&&item.exams.length>0" v-model="item.value" :exam-name="item.name" :list="item.exams" /> |
|
||||
</div> |
|
||||
|
|
||||
</div> --> |
|
||||
</div> |
|
||||
|
|
||||
<template slot="footer"> |
|
||||
<el-button type="primary" class="btn-fill" @click="fillCrf">{{ '一键填充' }}</el-button> |
|
||||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|
||||
<el-button type="primary" @click="submit">{{ $t('confirm') }}</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
|
|
||||
import crf from './load_content.vue' |
|
||||
// import crfData from './crf-data.vue' |
|
||||
import { formatDate } from '@/utils/index.js' |
|
||||
|
|
||||
export default { |
|
||||
components: { crf }, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
crfVisible: false, |
|
||||
crfDataVisible: false, |
|
||||
jsArr: [], |
|
||||
inputDate: formatDate(new Date(), 'yyyy-MM-dd'), |
|
||||
crfId: '', |
|
||||
patientIdNumber: '', |
|
||||
// CRF内容，填充用 |
|
||||
content: '', |
|
||||
// 获取的检查数据，【item.value】为v-model绑定值，即用于填充左侧iframe |
|
||||
examData: [] |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.crfVisible = false |
|
||||
this.crfDataVisible = false |
|
||||
this.$nextTick(() => { |
|
||||
this.$http.get('/crf/template', { params: { crfId: this.crfId }}).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.content = Base64.decode(res.data.content) |
|
||||
this.crfVisible = true |
|
||||
} |
|
||||
}).catch(() => {}) |
|
||||
|
|
||||
// 获取绑定数据 |
|
||||
this.$http.get('/crf/fillData', { |
|
||||
params: { |
|
||||
crfId: this.crfId, |
|
||||
idNumber: this.patientIdNumber |
|
||||
} |
|
||||
}).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.examData = res.data |
|
||||
this.crfDataVisible = true |
|
||||
setTimeout(() => { |
|
||||
this.fillCrf() |
|
||||
}, 1000) |
|
||||
} |
|
||||
}).catch(() => {}) |
|
||||
}) |
|
||||
}, |
|
||||
// 把获取的数据进行填充到CRF表单中 |
|
||||
fillCrf() { |
|
||||
const dataSelect = [] |
|
||||
let fillItemList = [] |
|
||||
this.examData.forEach(item => { |
|
||||
console.log(item.value) |
|
||||
if (item.exams[0]) { |
|
||||
dataSelect.push(item.exams[0]) |
|
||||
if (item.exams[0].data) { |
|
||||
const examItemList = item.exams[0].data.map((obj, index, arr) => { |
|
||||
obj.recId = item.exams[0].recId |
|
||||
obj.time = item.exams[0].time |
|
||||
return obj |
|
||||
}) |
|
||||
fillItemList = fillItemList.concat(examItemList) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
const ifr = this.$refs.crfComponent.$el |
|
||||
const ifrWin = ifr.contentWindow |
|
||||
ifrWin.dataFill(fillItemList) |
|
||||
}, |
|
||||
// 把编辑的内容保存 |
|
||||
submit() { |
|
||||
const ifr = this.$refs.crfComponent.$el |
|
||||
const ifrDoc = ifr.contentWindow.document || ifr.contentDocument |
|
||||
const body = ifrDoc.getElementsByTagName('body')[0] |
|
||||
const crfContent = body.innerHTML |
|
||||
this.$http.post('/crf/form', { |
|
||||
crfId: this.crfId, |
|
||||
dataContent: Base64.encode(crfContent), |
|
||||
idNumber: this.patientIdNumber, |
|
||||
inputDate: this.inputDate, |
|
||||
projectId: window.SITE_CONFIG['projectId'] |
|
||||
}).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
this.updateVisitPlan() |
|
||||
this.$message({ |
|
||||
message: this.$t('prompt.success'), |
|
||||
type: 'success', |
|
||||
duration: 500, |
|
||||
onClose: () => { |
|
||||
this.visible = false |
|
||||
this.$emit('refreshDataList') |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
updateVisitPlan() { |
|
||||
this.$http.post('/visit/list/updateVisitPlan', { |
|
||||
patientIdNumber: this.patientIdNumber, |
|
||||
projectId: window.SITE_CONFIG['projectId'] |
|
||||
}).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.dialog-container { |
|
||||
height: calc(100vh - 1vh - 54px - 70px); |
|
||||
|
|
||||
.crf-container { |
|
||||
display: inline-block; |
|
||||
vertical-align: top; |
|
||||
width: 960px; |
|
||||
height: 100%; |
|
||||
// background-color: aquamarine; |
|
||||
border: 1px solid; |
|
||||
|
|
||||
.crf-content { |
|
||||
text-align: center; |
|
||||
height: 100%; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.crf-data { |
|
||||
display: inline-block; |
|
||||
vertical-align: top; |
|
||||
width: calc(100% - 960px); |
|
||||
height: 100%; |
|
||||
overflow: auto; |
|
||||
padding:0 20px 0 20px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.btn-fill{ |
|
||||
margin-right: calc(100% - 960px - 160px); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,159 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
title="填写表单" |
|
||||
top="1vh" |
|
||||
width="95%" |
|
||||
:visible.sync="visible" |
|
||||
append-to-body |
|
||||
@closed="closeDialog" |
|
||||
> |
|
||||
<div class="dialog-container"> |
|
||||
<div class="crf-container"> |
|
||||
<div class="crf-content"> |
|
||||
<crf v-if="crfVisible" ref="crfComponent" :value="content" :height="'100%'" :js-arr="jsArr" :body-style-show="false" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<template slot="footer"> |
|
||||
<el-button @click="visible = false">取消</el-button> |
|
||||
<el-button type="primary" @click="submit">确定</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import Cookies from 'js-cookie' |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
import crf from './load_content.vue' |
|
||||
import { formatDate } from '@/utils/index.js' |
|
||||
export default { |
|
||||
components: { crf }, |
|
||||
props: { |
|
||||
patientId: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
crfId: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
formId: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
crfVisible: false, |
|
||||
jsArr: [], |
|
||||
inputDate: formatDate(new Date(), 'yyyy-MM-dd'), |
|
||||
content: '' |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.crfVisible = false |
|
||||
this.queryForm() |
|
||||
// this.queryMzinfo() |
|
||||
}, |
|
||||
async queryForm() { |
|
||||
this.crfVisible = false |
|
||||
await this.$http.get('/crf/getForm', { |
|
||||
params: { |
|
||||
formId: this.formId, |
|
||||
patientId: this.patientId |
|
||||
}}) |
|
||||
.then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.crfVisible = true |
|
||||
this.content = Base64.decode(res.data.content) |
|
||||
if (this.$route.path === '/patientDetail') { |
|
||||
window.localStorage.setItem('firstVisit', JSON.stringify(res.data.firstVisit)) |
|
||||
} else { |
|
||||
window.localStorage.setItem('firstVisit', '') |
|
||||
} |
|
||||
this.$forceUpdate() |
|
||||
} |
|
||||
}).catch(() => {}) |
|
||||
}, |
|
||||
async queryMzinfo() { |
|
||||
await this.$http.get('/base/mq/getMzInfo', { |
|
||||
params: { |
|
||||
patid: this.patientId |
|
||||
}}) |
|
||||
.then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
console.log(res.data) |
|
||||
if (this.$route.path === '/patientDetail') { |
|
||||
window.localStorage.setItem('mzInfo', JSON.stringify(res.data)) |
|
||||
} else { |
|
||||
window.localStorage.setItem('mzInfo', []) |
|
||||
} |
|
||||
} |
|
||||
}).catch(() => {}) |
|
||||
}, |
|
||||
// 获取crf内容 |
|
||||
getCrfcontent() { |
|
||||
const ifr = this.$refs.crfComponent.$el |
|
||||
const ifrDoc = ifr.contentWindow.document || ifr.contentDocument |
|
||||
const body = ifrDoc.getElementsByTagName('body')[0] |
|
||||
const crfContent = body.innerHTML |
|
||||
return crfContent |
|
||||
}, |
|
||||
// 把编辑的内容保存 |
|
||||
async submit() { |
|
||||
await this.$http.post('/crf/saveForm', { |
|
||||
dataContent: Base64.encode(this.getCrfcontent()), |
|
||||
crfId: this.crfId, |
|
||||
formId: this.formId, |
|
||||
patientId: this.patientId, |
|
||||
isWrite: 1 |
|
||||
}).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
this.visible = false |
|
||||
this.$emit('refreshDataList') |
|
||||
}) |
|
||||
}, |
|
||||
closeDialog() { |
|
||||
this.visible = false |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.dialog-container { |
|
||||
height: calc(100vh - 1vh - 54px - 70px); |
|
||||
|
|
||||
.crf-container { |
|
||||
display: inline-block; |
|
||||
vertical-align: top; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
border: 1px solid; |
|
||||
|
|
||||
.crf-content { |
|
||||
text-align: center; |
|
||||
height: 100%; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.btn-fill{ |
|
||||
margin-right: calc(100% - 960px - 160px); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,282 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
title="图片编辑3" |
|
||||
top="1vh" |
|
||||
width="95%" |
|
||||
:visible.sync="visible" |
|
||||
fullscreen |
|
||||
append-to-body |
|
||||
class="img-editor" |
|
||||
@closed="closeDialog" |
|
||||
> |
|
||||
<i class="el-icon-picture-outline replace-picture" /> |
|
||||
<input id="inputFile" class="replace-picture" type="file" name="" accept="image/jpeg,image/jpg,image/png" @change="replaceHandle"> |
|
||||
<div class="dialog-container"> |
|
||||
<div id="tui-image-editor" /> |
|
||||
</div> |
|
||||
<template slot="footer"> |
|
||||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|
||||
<el-button type="primary" @click="submit">{{ $t('confirm') }}</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import 'tui-image-editor/dist/tui-image-editor.css' |
|
||||
import 'tui-color-picker/dist/tui-color-picker.css' |
|
||||
import ImageEditor from 'tui-image-editor' |
|
||||
// 汉化 |
|
||||
const locale_zh = { |
|
||||
// override default English locale to your custom |
|
||||
Crop: '裁剪', |
|
||||
Resize: '调整大小', |
|
||||
ZoomIn: '放大', |
|
||||
Hand: '拖拽', |
|
||||
History: '历史记录', |
|
||||
ZoomOut: '缩小', |
|
||||
DeleteAll: '全部删除', |
|
||||
Delete: '删除', |
|
||||
Undo: '撤销', |
|
||||
Redo: '反撤销', |
|
||||
Reset: '重置', |
|
||||
Flip: '镜像', |
|
||||
Rotate: '旋转', |
|
||||
Draw: '画', |
|
||||
Shape: '形状标注', |
|
||||
Icon: '图标标注', |
|
||||
Text: '文字标注', |
|
||||
Mask: '遮罩', |
|
||||
Filter: '滤镜', |
|
||||
Bold: '加粗', |
|
||||
Italic: '斜体', |
|
||||
Underline: '下划线', |
|
||||
Left: '左对齐', |
|
||||
Center: '居中', |
|
||||
Right: '右对齐', |
|
||||
Color: '颜色', |
|
||||
'Text size': '字体大小', |
|
||||
Custom: '自定义', |
|
||||
Square: '正方形', |
|
||||
Apply: '应用', |
|
||||
Cancel: '取消', |
|
||||
'Flip X': 'X 轴', |
|
||||
'Flip Y': 'Y 轴', |
|
||||
Range: '区间', |
|
||||
Stroke: '描边', |
|
||||
Fill: '填充', |
|
||||
Circle: '圆', |
|
||||
Triangle: '三角', |
|
||||
Rectangle: '矩形', |
|
||||
Free: '曲线', |
|
||||
Straight: '直线', |
|
||||
Arrow: '箭头', |
|
||||
'Arrow-2': '箭头2', |
|
||||
'Arrow-3': '箭头3', |
|
||||
'Star-1': '星星1', |
|
||||
'Star-2': '星星2', |
|
||||
Polygon: '多边形', |
|
||||
Location: '定位', |
|
||||
Heart: '心形', |
|
||||
Bubble: '气泡', |
|
||||
'Custom icon': '自定义图标', |
|
||||
'Load Mask Image': '加载蒙层图片', |
|
||||
Grayscale: '灰度', |
|
||||
Blur: '模糊', |
|
||||
Sharpen: '锐化', |
|
||||
Emboss: '浮雕', |
|
||||
'Remove White': '除去白色', |
|
||||
Distance: '距离', |
|
||||
Brightness: '亮度', |
|
||||
Noise: '噪音', |
|
||||
'Color Filter': '彩色滤镜', |
|
||||
Sepia: '棕色', |
|
||||
Sepia2: '棕色2', |
|
||||
Invert: '负片', |
|
||||
Pixelate: '像素化', |
|
||||
Threshold: '阈值', |
|
||||
Tint: '色调', |
|
||||
Multiply: '正片叠底', |
|
||||
Blend: '混合色' |
|
||||
// etc... |
|
||||
} |
|
||||
// 去除不需要的右上角的Load和Download和左上角这个默认的logo |
|
||||
const customTheme = { |
|
||||
// image 坐上角度图片 |
|
||||
'common.bi.image': '', // 在这里换上你喜欢的logo图片 |
|
||||
'common.bisize.width': '0px', |
|
||||
'common.bisize.height': '0px', |
|
||||
'common.backgroundImage': 'none', |
|
||||
'common.backgroundColor': '#f3f4f6', |
|
||||
'common.border': '1px solid #444', |
|
||||
|
|
||||
// header |
|
||||
'header.backgroundImage': 'none', |
|
||||
'header.backgroundColor': '#f3f4f6', |
|
||||
'header.border': '0px', |
|
||||
'header.display': 'none', |
|
||||
|
|
||||
// load button |
|
||||
'loadButton.backgroundColor': '#fff', |
|
||||
'loadButton.border': '1px solid #ddd', |
|
||||
'loadButton.color': '#222', |
|
||||
'loadButton.fontFamily': 'NotoSans, sans-serif', |
|
||||
'loadButton.fontSize': '12px', |
|
||||
'loadButton.display': 'none', // 可以直接隐藏掉 |
|
||||
|
|
||||
// download button |
|
||||
'downloadButton.backgroundColor': '#fdba3b', |
|
||||
'downloadButton.border': '1px solid #fdba3b', |
|
||||
'downloadButton.color': '#fff', |
|
||||
'downloadButton.fontFamily': 'NotoSans, sans-serif', |
|
||||
'downloadButton.fontSize': '12px', |
|
||||
'downloadButton.display': 'none', // 可以直接隐藏掉 |
|
||||
|
|
||||
// icons default |
|
||||
'menu.normalIcon.color': '#8a8a8a', |
|
||||
'menu.activeIcon.color': '#555555', |
|
||||
'menu.disabledIcon.color': '#434343', |
|
||||
'menu.hoverIcon.color': '#e9e9e9', |
|
||||
'submenu.normalIcon.color': '#8a8a8a', |
|
||||
'submenu.activeIcon.color': '#e9e9e9', |
|
||||
|
|
||||
'menu.iconSize.width': '24px', |
|
||||
'menu.iconSize.height': '24px', |
|
||||
'submenu.iconSize.width': '32px', |
|
||||
'submenu.iconSize.height': '32px', |
|
||||
|
|
||||
// submenu primary color |
|
||||
'submenu.backgroundColor': '#1e1e1e', |
|
||||
'submenu.partition.color': '#858585', |
|
||||
|
|
||||
// submenu labels |
|
||||
'submenu.normalLabel.color': '#858585', |
|
||||
'submenu.normalLabel.fontWeight': 'lighter', |
|
||||
'submenu.activeLabel.color': '#fff', |
|
||||
'submenu.activeLabel.fontWeight': 'lighter', |
|
||||
|
|
||||
// checkbox style |
|
||||
'checkbox.border': '1px solid #ccc', |
|
||||
'checkbox.backgroundColor': '#fff', |
|
||||
|
|
||||
// rango style |
|
||||
'range.pointer.color': '#fff', |
|
||||
'range.bar.color': '#666', |
|
||||
'range.subbar.color': '#d1d1d1', |
|
||||
|
|
||||
'range.disabledPointer.color': '#414141', |
|
||||
'range.disabledBar.color': '#282828', |
|
||||
'range.disabledSubbar.color': '#414141', |
|
||||
|
|
||||
'range.value.color': '#fff', |
|
||||
'range.value.fontWeight': 'lighter', |
|
||||
'range.value.fontSize': '11px', |
|
||||
'range.value.border': '1px solid #353535', |
|
||||
'range.value.backgroundColor': '#151515', |
|
||||
'range.title.color': '#fff', |
|
||||
'range.title.fontWeight': 'lighter', |
|
||||
|
|
||||
// colorpicker style |
|
||||
'colorpicker.button.border': '1px solid #1e1e1e', |
|
||||
'colorpicker.title.color': '#fff' |
|
||||
} |
|
||||
export default { |
|
||||
props: { |
|
||||
bodyStyleShow: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
}, |
|
||||
// 是否为病例模板 |
|
||||
title: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
imgUrl: '', |
|
||||
imgAlt: '', |
|
||||
instance: null |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.$nextTick(() => { |
|
||||
// console.log(this.imgUrl) |
|
||||
this.instance = new ImageEditor( |
|
||||
document.querySelector('#tui-image-editor'), |
|
||||
{ |
|
||||
includeUI: { |
|
||||
loadImage: { |
|
||||
path: this.imgUrl, |
|
||||
name: 'image' |
|
||||
}, |
|
||||
// menu: ['crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask |
|
||||
initMenu: 'draw', |
|
||||
menuBarPosition: 'bottom', |
|
||||
locale: locale_zh, // 本地化语言为中文 |
|
||||
theme: customTheme // 自定义主题 |
|
||||
} |
|
||||
} |
|
||||
) |
|
||||
// document.querySelector('.tie-btn-resize').style.display = 'none' // 隐藏顶部重置按钮 |
|
||||
document.querySelector('.tie-btn-mask').style.display = 'none' // 隐藏遮罩按钮 |
|
||||
}) |
|
||||
}, |
|
||||
submit() { |
|
||||
const base64String = this.instance.toDataURL() |
|
||||
// console.log(base64String) |
|
||||
this.$emit('fullImgBack', base64String, this.imgAlt) |
|
||||
this.visible = false |
|
||||
// 掉后台接口存入后台 --- 暂时用不到 |
|
||||
// const data = window.atob(base64String.split(',')[1]) |
|
||||
// const ia = new Uint8Array(data.length) |
|
||||
// for (let i = 0; i < data.length; i++) { |
|
||||
// ia[i] = data.charCodeAt(i) |
|
||||
// } |
|
||||
// const blob = new Blob([ia], { type: 'image/png' }) |
|
||||
// const fd = new FormData() |
|
||||
// fd.append('image', blob) |
|
||||
// upload fd |
|
||||
}, |
|
||||
// 替换图片 |
|
||||
replaceHandle(e) { |
|
||||
var file = e.target.files[0] |
|
||||
console.log(file) |
|
||||
var reader = new FileReader() |
|
||||
var that = this |
|
||||
reader.readAsDataURL(file) |
|
||||
console.log(reader) |
|
||||
reader.onload = function(e) { |
|
||||
that.imgUrl = reader.result |
|
||||
that.init() |
|
||||
} |
|
||||
}, |
|
||||
closeDialog() { |
|
||||
this.$emit('closeDialog') |
|
||||
this.visible = false |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.img-editor{ |
|
||||
.replace-picture { |
|
||||
z-index: 999; |
|
||||
position: fixed; |
|
||||
right:35px; |
|
||||
top: 73px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.dialog-container { |
|
||||
height: calc(100vh - 1vh - 54px - 70px); |
|
||||
} |
|
||||
#inputFile { |
|
||||
opacity: 0; |
|
||||
} |
|
||||
.el-icon-picture-outline { |
|
||||
font-size: 28px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,297 +0,0 @@ |
|||||
<template> |
|
||||
<div id="tinymceContainer" ref="ceshi" class="tinymce-editor"> |
|
||||
<editor v-if="isshow" :id="'myEditor' + editorIDName" v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
// import Cookies from 'js-cookie' |
|
||||
import tinymce from 'tinymce' |
|
||||
import Editor from '@tinymce/tinymce-vue' |
|
||||
// import 'tinymce/skins/content/default/content.min.css' |
|
||||
import 'tinymce/icons/default/icons' |
|
||||
import 'tinymce/plugins/image' |
|
||||
import 'tinymce/plugins/media' |
|
||||
import 'tinymce/plugins/table' |
|
||||
import 'tinymce/plugins/lists' |
|
||||
import 'tinymce/plugins/contextmenu' |
|
||||
import 'tinymce/plugins/colorpicker' |
|
||||
import 'tinymce/plugins/textcolor' |
|
||||
import 'tinymce/plugins/code' |
|
||||
import 'tinymce/plugins/print' |
|
||||
import 'tinymce/plugins/anchor' |
|
||||
import 'tinymce/plugins/quickbars' |
|
||||
|
|
||||
/** |
|
||||
* 自定义部分 |
|
||||
*/ |
|
||||
import './tinymce/themes/silver' |
|
||||
import './tinymce/icons' |
|
||||
import './tinymce/plugins/letterspacing' |
|
||||
import './tinymce/plugins/hm_preview' |
|
||||
import './tinymce/plugins/hm_input' |
|
||||
import './tinymce/plugins/hm_checkbox' |
|
||||
import './tinymce/plugins/hm_radio' |
|
||||
import './tinymce/plugins/hm_button' |
|
||||
import './tinymce/plugins/hm_select' |
|
||||
import './tinymce/plugins/hm_select_multiple' |
|
||||
|
|
||||
import { isInclude } from './tinymce/plugins/hm_utils' |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
Editor |
|
||||
}, |
|
||||
props: { |
|
||||
value: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
height: { |
|
||||
type: String, |
|
||||
default: '500px' |
|
||||
}, |
|
||||
disabled: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
}, |
|
||||
editorIDName: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
plugins: { |
|
||||
type: [String, Array], |
|
||||
default: 'hminput hmcheckbox hmradio hmbutton hmselect hmselectmultiple quickbars print hmpreview lists image media table code letterspacing anchor'// paste contextmenu colorpicker textcolor |
|
||||
}, |
|
||||
toolbar: { |
|
||||
type: [String, Array], |
|
||||
default: |
|
||||
`hminput hmcheckbox hmradio hmbutton hmselect hmselectmultiple anchor| hmpreview print | |
|
||||
image table | |
|
||||
code | letterspacing | formatselect | fontsizeselect | |
|
||||
bold italic forecolor backcolor | |
|
||||
lineheight | |
|
||||
alignleft aligncenter alignright alignjustify | |
|
||||
bullist numlist outdent indent` |
|
||||
// media removeformat |
|
||||
}, |
|
||||
contextmenu: { |
|
||||
type: [String, Array], |
|
||||
default: 'hminput hmcheckbox hmradio hmbutton hmselect hmselectmultiple image imagetools table spellchecker lists' |
|
||||
}, |
|
||||
// 删除首尾自动添加的P标签 |
|
||||
isP: { |
|
||||
type: Boolean, |
|
||||
default: true |
|
||||
}, |
|
||||
// 是否有签字功能 |
|
||||
isSign: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
init: { |
|
||||
selector: '#myEditor' + this.editorIDName, |
|
||||
icons: 'custom', |
|
||||
language_url: '/static/tinymce/langs/zh_CN.js', |
|
||||
language: 'zh_CN', |
|
||||
skin_url: '/static/tinymce/skins/ui/oxide', // oxide-dark',//暗色系 |
|
||||
theme: 'silver', // 主题：负责编辑器的框架构建、如编辑器上下左右，垂直水平、内外部等行为 |
|
||||
height: this.height, // '100vh', |
|
||||
statusbar: false, // 底栏 |
|
||||
// -------------------------------【菜单栏】------------------------------- |
|
||||
menubar: false, |
|
||||
// -------------------------------【右键菜单栏】------------------------------- |
|
||||
contextmenu_never_use_native: true, |
|
||||
contextmenu: this.contextmenu, |
|
||||
// -------------------------------【插件】------------------------------- |
|
||||
plugins: this.plugins, |
|
||||
// -------------------------------【工具栏】------------------------------- |
|
||||
toolbar_mode: 'wrap', // 工具栏模式: 默认 floating/sliding/scrolling/wrap |
|
||||
toolbar: this.toolbar, // 工具栏 |
|
||||
// -------------------------------【快速工具栏】------------------------------- |
|
||||
quickbars_selection_toolbar: false, |
|
||||
// quickbars_selection_toolbar: 'bold italic underline strikethrough | code fontsizeselect ', |
|
||||
paste_data_images: true, |
|
||||
// images_upload_url: "/demo/eUpload.php", |
|
||||
images_upload_base_path: '', // "/demo/" |
|
||||
// forced_root_block: '', // 删除首尾自动添加的P标签 |
|
||||
images_upload_handler: function(blobInfo, succFun, failFun) { |
|
||||
// 自定义插入图片函数 |
|
||||
// blobInfo: 本地图片blob对象 |
|
||||
// succFun(url|string)： 成功回调（插入图片链接到文本中） |
|
||||
// failFun(string)：失败回调 |
|
||||
var file = blobInfo.blob() |
|
||||
var reader = new FileReader() |
|
||||
reader.onload = function(e) { |
|
||||
succFun(e.target.result) |
|
||||
} |
|
||||
reader.readAsDataURL(file) |
|
||||
}, |
|
||||
content_css: '/static/css/hmcrf.css', |
|
||||
setup: (editor) => { |
|
||||
editor.on('click', e => { |
|
||||
// console.log(tinymce.activeEditor.selection.getNode().parentNode.className) |
|
||||
// const childNodesText = tinymce.activeEditor.selection.getNode().childNodes[0].textContent |
|
||||
// const clickNodeID = tinymce.activeEditor.selection.getNode().childNodes[0].id |
|
||||
// 父节点的class |
|
||||
const trClassName = tinymce.activeEditor.selection.getNode().parentNode.className |
|
||||
// console.log(tinymce.activeEditor.selection.getNode().parentNode) |
|
||||
this.$listeners.setTabSwitch ? this.$listeners.setTabSwitch(trClassName) : '' |
|
||||
}) |
|
||||
// editor.hmBaseCss = ['/static/css/hmcrf.css']; |
|
||||
editor.hmBaseScripts = [ |
|
||||
'/static/js/jquery-3.5.1/jquery.min.js', |
|
||||
'/static/js/hmcrf.js' |
|
||||
] |
|
||||
}, |
|
||||
init_instance_callback: (editor) => { |
|
||||
}, |
|
||||
init: () => { |
|
||||
} |
|
||||
}, |
|
||||
myValue: this.value, |
|
||||
isshow: true |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
value(newValue) { |
|
||||
this.myValue = newValue |
|
||||
}, |
|
||||
myValue(newValue) { |
|
||||
this.$emit('input', newValue) |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
// 删除首尾自动添加的P标签 |
|
||||
this.isP ? '' : this.init.forced_root_block = '' |
|
||||
}, |
|
||||
mounted() { |
|
||||
// Cookies.set('qg-token', '9def6f4db676363e9f01990d56e62929') |
|
||||
this.$http.get(`/sys/table/dict/getList`, { |
|
||||
params: { |
|
||||
isCrf: 1 |
|
||||
} |
|
||||
}).then(({ data: res }) => { |
|
||||
if (res.code === 0) { |
|
||||
const data = res.data |
|
||||
window.localStorage.setItem('dictField', JSON.stringify(data)) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
this.$nextTick(() => { |
|
||||
}) |
|
||||
}, |
|
||||
methods: { |
|
||||
// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events |
|
||||
onClick(e) { |
|
||||
this.$emit('onClick', e, tinymce) |
|
||||
}, |
|
||||
clear() { |
|
||||
this.myValue = '' |
|
||||
}, |
|
||||
setReadOnly() { |
|
||||
tinymce.editors[this.init.selector].setMode('readonly') |
|
||||
}, |
|
||||
setDesign() { |
|
||||
tinymce.editors[this.init.selector].setMode('design') |
|
||||
}, |
|
||||
exportHtml() { |
|
||||
this.fileDown(tinymce.editors[this.init.selector].getDoc().documentElement.outerHTML, '文件.html') |
|
||||
}, |
|
||||
fileDown(content, filename) { |
|
||||
const eleLink = document.createElement('a') |
|
||||
eleLink.download = filename |
|
||||
eleLink.style.display = 'none' |
|
||||
const blob = new Blob([content]) |
|
||||
eleLink.href = URL.createObjectURL(blob) |
|
||||
document.body.appendChild(eleLink) |
|
||||
eleLink.click() |
|
||||
document.body.removeChild(eleLink) |
|
||||
}, |
|
||||
// 渲染内容 |
|
||||
renderContent() { |
|
||||
const baseUrl = window.location.origin |
|
||||
const ifr = document.getElementsByClassName('tox-edit-area__iframe')[0] |
|
||||
const doc = ifr.contentWindow.document |
|
||||
const head = doc.getElementsByTagName('head')[0] |
|
||||
const jsHeadArr = ['jquery-3.5.1/jquery.min.js', 'js-NSV.js'] |
|
||||
jsHeadArr.forEach(item => { |
|
||||
if (!isInclude(item, doc)) { |
|
||||
const script = document.createElement('script') |
|
||||
script.type = 'text/javascript' |
|
||||
script.src = baseUrl + '/static/js/' + item |
|
||||
head.appendChild(script) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// 由于append方式追加js，无法确定jQuery和js-NSV.js是否加载完成，故设置定时--没有加载插件完成，执行其他js会报错 |
|
||||
setTimeout(() => { |
|
||||
const jsHeadArr2 = ['hmcrf.js'] |
|
||||
this.isSign ? jsHeadArr2.push('sign.js') : '' |
|
||||
jsHeadArr2.forEach(src => { |
|
||||
if (!isInclude(src, doc)) { |
|
||||
const script = document.createElement('script') |
|
||||
script.type = 'text/javascript' |
|
||||
script.id = src === 'hmcrf.js' ? 'hmcrfJs' |
|
||||
: (src === 'sign.js' ? 'signJs' : '') |
|
||||
script.src = baseUrl + '/static/js/' + src |
|
||||
head.appendChild(script) |
|
||||
} |
|
||||
}) |
|
||||
}, 1000) |
|
||||
}, |
|
||||
|
|
||||
// 填充 |
|
||||
fullContent(fullcontent) { |
|
||||
// ----------解决input上value值不更新和签名失效的问题 |
|
||||
const ifr = document.getElementsByClassName('tox-edit-area__iframe')[0] |
|
||||
const doc = ifr.contentWindow.document |
|
||||
ifr.contentWindow.destroyPlugin() // 销毁签字笔--解决重复调用的问题 |
|
||||
const jsHeadArr2 = ['hmcrf.js', 'sign.js'] |
|
||||
const head = doc.getElementsByTagName('head')[0] |
|
||||
const headRemove = [] |
|
||||
head.childNodes.forEach(item => { |
|
||||
item.id === 'hmcrfJs' ? headRemove.push(item) : '' |
|
||||
item.id === 'signJs' ? headRemove.push(item) : '' |
|
||||
}) |
|
||||
head.removeChild(headRemove[0]) |
|
||||
head.removeChild(headRemove[1]) |
|
||||
setTimeout(() => { |
|
||||
tinymce.execCommand('mceInsertContent', false, fullcontent) |
|
||||
jsHeadArr2.forEach(item => { |
|
||||
const baseUrl = window.location.origin |
|
||||
const script = document.createElement('script') |
|
||||
script.type = 'text/javascript' |
|
||||
script.id = item === 'hmcrf.js' ? 'hmcrfJs' |
|
||||
: (item === 'sign.js' ? 'signJs' : '') |
|
||||
script.src = baseUrl + '/static/js/' + item |
|
||||
head.appendChild(script) |
|
||||
}) |
|
||||
// ----------解决input上value值不更新和签名失效的问题 |
|
||||
}, 500) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
/*没有申请key的话会出现一个弹窗要去申请key,在这里把那个弹窗隐藏，当然也可以自己申请key再使用 */ |
|
||||
.tox-notifications-container { |
|
||||
display: none; |
|
||||
} |
|
||||
/* 在页面正常使用时不用加这个样式，在弹窗使用时，要加这个样式，因为使用弹窗，z-index层数比较低，工具栏的一些工具不能使用，要将z-index层数提高。 */ |
|
||||
.tox-tinymce-aux { |
|
||||
z-index: 5000 !important; |
|
||||
} |
|
||||
button { |
|
||||
margin: 0px 5px 5px 0px; |
|
||||
} |
|
||||
|
|
||||
/* 弹窗微调 */ |
|
||||
.tox-dialog-wrap .tox-dialog .tox-dialog__header { |
|
||||
padding: 0 16px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,339 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
title="填写表单" |
|
||||
top="1vh" |
|
||||
width="95%" |
|
||||
:visible.sync="visible" |
|
||||
fullscreen |
|
||||
append-to-body |
|
||||
class="intelligent-full" |
|
||||
@closed="closeDialog" |
|
||||
> |
|
||||
<div class="dialog-container"> |
|
||||
<div v-loading="CRFLoading" element-loading-text="智能填充中，请稍等" class="crf-container"> |
|
||||
<div class="crf-content"> |
|
||||
<crf |
|
||||
v-if="crfVisible" |
|
||||
ref="crfComponent" |
|
||||
:is-sign="isSign" |
|
||||
:value="content" |
|
||||
:height="'100%'" |
|
||||
:js-arr="jsArr" |
|
||||
:body-style-show="false" |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 智能填充--暂时不让用户自己选择--先使用最新数据填充 --> |
|
||||
<!-- <div v-if="dataForm.crfType!=='其他'" class="crf-data"> |
|
||||
<div> |
|
||||
<template v-if="examData.length>0"> |
|
||||
<div v-for="(item,index) in examData" :key="index"> |
|
||||
<crf-data |
|
||||
v-if="crfDataVisible && item.exams.length>0" |
|
||||
v-model="item.value" |
|
||||
:exam-name="item.name" |
|
||||
:list="item.exams" |
|
||||
/> |
|
||||
</div> |
|
||||
</template> |
|
||||
<div v-else class="nodata"> |
|
||||
<img src="@/assets/img/nodata.png" alt=""> |
|
||||
</div> |
|
||||
</div> |
|
||||
<el-button type="primary" class="button-full">一键填充</el-button> |
|
||||
</div> --> |
|
||||
</div> |
|
||||
<template slot="footer"> |
|
||||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|
||||
<el-button type="primary" @click="submit">{{ $t('confirm') }}</el-button> |
|
||||
</template> |
|
||||
<img-editor |
|
||||
v-if="imgEditorVisible" |
|
||||
ref="imgEditorRef" |
|
||||
@fullImgBack="fullImgBack" |
|
||||
@closeDialog="imgEditorVisible=false" |
|
||||
/> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
import crf from './load_content.vue' |
|
||||
import crfData from '@/components/hm-crf/crf-data.vue' |
|
||||
import { formatDate } from '@/utils/index.js' |
|
||||
import imgEditor from './img-editor.vue' |
|
||||
import IntelligentFill from '@/mixins/IntelligentFill' |
|
||||
export default { |
|
||||
components: { crf, crfData, imgEditor }, |
|
||||
mixins: [IntelligentFill], |
|
||||
props: { |
|
||||
title: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
// 是否有签字功能 |
|
||||
isSign: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
}, |
|
||||
// 更新父组件哪个文件 |
|
||||
updataFile: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
// 是否判断签名 |
|
||||
isJudgeSign: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
crfVisible: false, |
|
||||
crfDataVisible: true, |
|
||||
imgEditorVisible: false, |
|
||||
jsArr: [], |
|
||||
inputDate: formatDate(new Date(), 'yyyy-MM-dd'), |
|
||||
// CRF内容，填充用 |
|
||||
content: '', |
|
||||
dataForm: { |
|
||||
name: '', |
|
||||
description: '', |
|
||||
content: '', |
|
||||
formId: '', |
|
||||
id: '' |
|
||||
}, |
|
||||
// 获取的检查数据，【item.value】为v-model绑定值，即用于填充左侧iframe |
|
||||
examData: [], |
|
||||
fillData: [], |
|
||||
timerDate: null, |
|
||||
operaList: [], |
|
||||
surgicalSiteList: [], |
|
||||
operaListInterval: null, |
|
||||
surgicalSiteInterval: null |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
|
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.crfVisible = false |
|
||||
this.$nextTick(() => { |
|
||||
this.getOperaList() |
|
||||
this.getSurgicalSiteList() |
|
||||
this.getsaveOperaList(this.dataForm.formId) |
|
||||
}) |
|
||||
// iframe调取vue中的方法 |
|
||||
window['goBack'] = (imgUrl, imgAlt) => { |
|
||||
// console.log(imgUrl) |
|
||||
this.imgEditorVisible = true |
|
||||
this.$nextTick(() => { |
|
||||
// 获取已保存的手术列表 |
|
||||
if (this.$refs.imgEditorRef) { |
|
||||
this.$refs.imgEditorRef.imgUrl = imgUrl |
|
||||
this.$refs.imgEditorRef.imgAlt = imgAlt |
|
||||
this.$refs.imgEditorRef.init() |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
// console.log(this.dataForm) |
|
||||
this.$nextTick(() => { |
|
||||
this.$http.get(`/visit/record/${this.dataForm.formId}`).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
console.log(res.data) |
|
||||
res.data.formId = res.data.id |
|
||||
delete res.data.id |
|
||||
this.dataForm = { ...res.data } |
|
||||
this.content = Base64.decode(res.data.formContent) |
|
||||
this.crfVisible = true |
|
||||
this.dataForm.isWrite === 0 ? (this.getFirstFeedbackData('智能填充', this.dataForm.formId), this.setQmDate()) : '' |
|
||||
} |
|
||||
}).catch(() => { }) |
|
||||
}) |
|
||||
}, |
|
||||
// 获取术士项目列表 |
|
||||
async getOperaList() { |
|
||||
const { data: res } = await this.$http.get('/opera/patient/getOperaList') |
|
||||
if (res.code === 0) { |
|
||||
res.data.forEach(item => { |
|
||||
item.name = item.operaName |
|
||||
item.id = item.operaId |
|
||||
}) |
|
||||
this.operaList = res.data |
|
||||
this.operaListInterval = setInterval(() => { |
|
||||
if (this.$refs.crfComponent && this.$refs.crfComponent.$el.contentWindow.multipleSelect) { |
|
||||
console.log(this.$refs.crfComponent.$el) |
|
||||
clearInterval(this.operaListInterval) |
|
||||
this.$refs.crfComponent.$el.contentWindow.multipleSelect(this.operaList, 'operationProject') |
|
||||
} |
|
||||
}, 500) |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 获取术士部位列表 |
|
||||
async getSurgicalSiteList() { |
|
||||
// 类型 1:职位，2:手术间，3:麻醉方式,4麻醉会诊,5手术切口等级,6手术部位 |
|
||||
const { data: res } = await this.$http.get('/sys/param/getList', { |
|
||||
params: { |
|
||||
type: 6 |
|
||||
} |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.surgicalSiteList = res.data |
|
||||
this.surgicalSiteInterval = setInterval(() => { |
|
||||
if (this.$refs.crfComponent && this.$refs.crfComponent.$el.contentWindow.multipleSelect) { |
|
||||
console.log(this.$refs.crfComponent.$el) |
|
||||
clearInterval(this.surgicalSiteInterval) |
|
||||
this.$refs.crfComponent.$el.contentWindow.multipleSelect(this.surgicalSiteList, 'surgicalSite') |
|
||||
} |
|
||||
}, 500) |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 设置签名日期 |
|
||||
setQmDate() { |
|
||||
this.timerDate = setInterval(() => { |
|
||||
if (this.$refs.crfComponent && this.$refs.crfComponent.$el.contentWindow.dataFill) { |
|
||||
this.$refs.crfComponent.$el.contentWindow.dataFill('', this.$moment().format('YYYY-MM-DD')) |
|
||||
clearInterval(this.timerDate) |
|
||||
} |
|
||||
}, 1000) |
|
||||
}, |
|
||||
// 将图片填充回iframe |
|
||||
fullImgBack(base64String, imgAlt) { |
|
||||
this.$refs.crfComponent.$el.contentWindow.imgEditFull(base64String, imgAlt) |
|
||||
}, |
|
||||
// 把编辑的内容保存 |
|
||||
submit() { |
|
||||
// 如果isJudgeSign为true,需要签名后保存并且没有签名不予通过 return |
|
||||
if (this.isJudgeSign && !this.$refs.crfComponent.$el.contentWindow.isSignSuccess()) { |
|
||||
this.$message({ |
|
||||
message: '请让患者签名后再保存哦', |
|
||||
type: 'warning' |
|
||||
}) |
|
||||
return |
|
||||
} |
|
||||
this.saveOrderScheduled() |
|
||||
}, |
|
||||
// 保存表单 |
|
||||
saveForm() { |
|
||||
const ifr = this.$refs.crfComponent.$el |
|
||||
const ifrDoc = ifr.contentWindow.document || ifr.contentDocument |
|
||||
const body = ifrDoc.getElementsByTagName('body')[0] |
|
||||
const crfContent = body.innerHTML |
|
||||
this.$http.post('/visit/record/saveWriteVisit', { |
|
||||
formContent: Base64.encode(crfContent), |
|
||||
// inputDate: this.inputDate, |
|
||||
id: this.dataForm.formId |
|
||||
}).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(this.updataFile) |
|
||||
}) |
|
||||
}, |
|
||||
// 保存预约手术信息 |
|
||||
async saveOrderScheduled() { |
|
||||
console.log(this.$refs.crfComponent.$el.contentWindow.getFormValue()) |
|
||||
const FormValue = this.$refs.crfComponent.$el.contentWindow.getFormValue().hmselectmultipleValue |
|
||||
console.log(FormValue) |
|
||||
// return |
|
||||
// 如果没选择手术不需要掉保存手术方式接口 |
|
||||
if (FormValue.operationProjectOD.length <= 0 && FormValue.operationProjectOS.length <= 0 && FormValue.operationProjectOU.length <= 0) { |
|
||||
this.saveForm() |
|
||||
} else { |
|
||||
const { data: res } = await this.$http.post('/opera/patient/save', { |
|
||||
crfFormId: this.dataForm.formId, |
|
||||
operaODOS: [{ |
|
||||
eyeType: 'OD', |
|
||||
operaList: FormValue.operationProjectOD, |
|
||||
operationPositionName: FormValue.operationProjectOD ? '右眼' : '' |
|
||||
}, { |
|
||||
eyeType: 'OS', |
|
||||
operaList: FormValue.operationProjectOS, |
|
||||
operationPositionName: FormValue.operationProjectOS ? '左眼' : '' |
|
||||
}, { |
|
||||
eyeType: 'OU', |
|
||||
operaList: FormValue.operationProjectOU, |
|
||||
operationPositionName: FormValue.operationProjectOU ? '双眼' : '' |
|
||||
}], |
|
||||
patientIdNumber: this.dataForm.patientIdNumber |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.saveForm() |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
closeDialog() { |
|
||||
this.visible = false |
|
||||
this.imgEditorVisible = false |
|
||||
this.$emit('closeDialog', false) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.intelligent-full { |
|
||||
.dialog-container { |
|
||||
height: calc(100vh - 1vh - 54px - 70px); |
|
||||
display: flex; |
|
||||
.crf-container { |
|
||||
display: inline-block; |
|
||||
vertical-align: top; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
// background-color: aquamarine; |
|
||||
border: 1px solid; |
|
||||
|
|
||||
.crf-content { |
|
||||
text-align: center; |
|
||||
height: 100%; |
|
||||
} |
|
||||
} |
|
||||
.crf-data { |
|
||||
position: relative; |
|
||||
margin-left: 24px; |
|
||||
width: 30%; |
|
||||
.nodata { |
|
||||
width: 300px; |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
img { |
|
||||
width: 300px; |
|
||||
} |
|
||||
} |
|
||||
.button-full { |
|
||||
position: absolute; |
|
||||
left: 50%; |
|
||||
transform: translateX(-50%); |
|
||||
bottom: 0; |
|
||||
width: 95%; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.btn-fill { |
|
||||
margin-right: calc(100% - 960px - 160px); |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,99 +0,0 @@ |
|||||
<template> |
|
||||
<iframe |
|
||||
ref="ifrCRF" |
|
||||
style="margin: 0;padding:0px;width: 100%;" |
|
||||
:style="{ height: height,border:border }" |
|
||||
scrolling="auto" |
|
||||
frameborder="0" |
|
||||
/> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'IfrCRF', |
|
||||
props: { |
|
||||
value: { |
|
||||
type: String, |
|
||||
default: '', |
|
||||
required: true |
|
||||
}, |
|
||||
height: { |
|
||||
type: String, |
|
||||
default: '600px' |
|
||||
}, |
|
||||
border: { |
|
||||
type: String, |
|
||||
default: 'none' |
|
||||
}, |
|
||||
jsArr: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
}, |
|
||||
bodyStyleShow: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
}, |
|
||||
isSign: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
// content: '' |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.init() |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
const baseUrl = window.location.origin |
|
||||
// const ifr = document.getElementById('ifrCRF') => this.$refs.ifrCRF |
|
||||
const ifr = this.$refs.ifrCRF |
|
||||
const doc = ifr.contentWindow.document || ifr.contentDocument |
|
||||
const head = doc.getElementsByTagName('head')[0] |
|
||||
const body = doc.getElementsByTagName('body')[0] |
|
||||
|
|
||||
const cssArr = ['skins-tinymce/ui/oxide/content.min.css', 'hmcrf.css'] |
|
||||
const jsHeadArr = ['jquery-3.5.1/jquery.min.js', 'laydate/laydate.js'] |
|
||||
this.bodyStyleShow ? cssArr.push('hmcrf-add.css') : '' |
|
||||
cssArr.forEach(href => { |
|
||||
const css = document.createElement('link') |
|
||||
css.type = 'text/css' |
|
||||
css.rel = 'stylesheet' |
|
||||
css.href = baseUrl + '/static/css/' + href |
|
||||
head.appendChild(css) |
|
||||
}) |
|
||||
|
|
||||
jsHeadArr.forEach(src => { |
|
||||
const script = document.createElement('script') |
|
||||
script.type = 'text/javascript' |
|
||||
script.src = baseUrl + '/static/js/' + src |
|
||||
head.appendChild(script) |
|
||||
}) |
|
||||
|
|
||||
body.innerHTML = this.value |
|
||||
// this.bodyStyleShow ? body.style.pointerEvents = 'none' : '' |
|
||||
// 给textarea去除右下角拖拽键 |
|
||||
// const textarea = doc.getElementsByTagName('textarea') |
|
||||
// this.bodyStyleShow ? Array.from(textarea).forEach(item => { |
|
||||
// item.style.resize = 'none ' |
|
||||
// }) : '' |
|
||||
setTimeout(() => { |
|
||||
const jsArr = ['hmcrf.js', ...this.jsArr] |
|
||||
// this.isSign ? jsArr.push('sign.js') : '' |
|
||||
jsArr.forEach(src => { |
|
||||
const script = document.createElement('script') |
|
||||
script.type = 'text/javascript' |
|
||||
script.src = baseUrl + '/static/js/' + src |
|
||||
head.appendChild(script) |
|
||||
}) |
|
||||
}, 500) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
|
|
||||
</style> |
|
||||
@ -1,53 +0,0 @@ |
|||||
<template> |
|
||||
<hm-preview v-if="content" :value="content" /> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import hmPreview from './load_content' |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
|
|
||||
export default { |
|
||||
components: { hmPreview }, |
|
||||
props: { |
|
||||
id: { |
|
||||
type: String, |
|
||||
required: true |
|
||||
}, |
|
||||
height: { |
|
||||
type: String, |
|
||||
default: '100%' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
content: '' |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
id(val) { |
|
||||
console.log(val) |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getInfo() |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.content = '' |
|
||||
this.getInfo() |
|
||||
}, |
|
||||
// 获取信息 |
|
||||
getInfo() { |
|
||||
this.$http.get('/crf/form', { params: { id: this.id }}) |
|
||||
.then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.content = Base64.decode(res.data.content) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,112 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
width="90%" |
|
||||
top="2vh" |
|
||||
:visible.sync="visible" |
|
||||
:title="'预览'" |
|
||||
:close-on-click-modal="false" |
|
||||
:close-on-press-escape="false" |
|
||||
append-to-body |
|
||||
> |
|
||||
<iframe |
|
||||
ref="ifrCRF" |
|
||||
style="margin: 0;padding: 0;width: 100%;border: 1px solid #000;" |
|
||||
:style="{ height: height }" |
|
||||
/> |
|
||||
<template slot="footer"> |
|
||||
<el-button @click="visible = false">取消</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
|
|
||||
export default { |
|
||||
props: { |
|
||||
bodyStyleShow: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
}, |
|
||||
crfId: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
height: 'calc(100vh - 200px)', |
|
||||
dataForm: { |
|
||||
id: '', |
|
||||
name: '', |
|
||||
content: '' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.getInfo() |
|
||||
}) |
|
||||
}, |
|
||||
// 获取信息 |
|
||||
getInfo() { |
|
||||
this.$http.get('/crf/template/' + this.crfId).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.dataForm.content = Base64.decode(res.data.content) |
|
||||
this.dataForm = { ...this.dataForm } |
|
||||
this.render() |
|
||||
} |
|
||||
}).catch(() => {}) |
|
||||
}, |
|
||||
render() { |
|
||||
const baseUrl = window.location.origin |
|
||||
// const ifr = document.getElementById('crfPreview') |
|
||||
const ifr = this.$refs.ifrCRF |
|
||||
const doc = ifr.contentWindow.document || ifr.contentDocument |
|
||||
const head = doc.getElementsByTagName('head')[0] |
|
||||
const body = doc.getElementsByTagName('body')[0] |
|
||||
|
|
||||
const cssArr = ['skins-tinymce/ui/oxide/content.min.css', 'hmcrf.css'] |
|
||||
const jsHeadArr = ['jquery-3.5.1/jquery.min.js', 'laydate/laydate.js'] |
|
||||
|
|
||||
cssArr.forEach(href => { |
|
||||
const css = document.createElement('link') |
|
||||
css.type = 'text/css' |
|
||||
css.rel = 'stylesheet' |
|
||||
css.href = baseUrl + '/static/css/' + href |
|
||||
head.appendChild(css) |
|
||||
}) |
|
||||
|
|
||||
jsHeadArr.forEach(src => { |
|
||||
const script = document.createElement('script') |
|
||||
script.type = 'text/javascript' |
|
||||
script.src = baseUrl + '/static/js/' + src |
|
||||
head.appendChild(script) |
|
||||
}) |
|
||||
|
|
||||
body.innerHTML = this.dataForm.content |
|
||||
this.bodyStyleShow ? body.style.pointerEvents = 'none' : '' |
|
||||
// 给textarea去除右下角拖拽键 |
|
||||
const textarea = doc.getElementsByTagName('textarea') |
|
||||
this.bodyStyleShow ? Array.from(textarea).forEach(item => { |
|
||||
item.style.resize = 'none ' |
|
||||
}) : '' |
|
||||
setTimeout(() => { |
|
||||
const jsBodyArr = ['hmcrf.js'] |
|
||||
jsBodyArr.forEach(src => { |
|
||||
const script = document.createElement('script') |
|
||||
script.type = 'text/javascript' |
|
||||
script.src = baseUrl + '/static/js/' + src |
|
||||
body.appendChild(script) |
|
||||
}) |
|
||||
}, 500) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,58 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
width="90%" |
|
||||
top="2vh" |
|
||||
:visible.sync="visible" |
|
||||
:title="'预览'" |
|
||||
:close-on-click-modal="false" |
|
||||
:close-on-press-escape="false" |
|
||||
> |
|
||||
<hm-preview v-if="dataForm.content" :content="dataForm.content" :height="height" /> |
|
||||
<template slot="footer"> |
|
||||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import hmPreview from './load_content' |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
|
|
||||
export default { |
|
||||
components: { hmPreview }, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
height: 'calc(100vh - 200px)', |
|
||||
dataForm: { |
|
||||
id: '', |
|
||||
projectId: '', |
|
||||
name: '', |
|
||||
description: '', |
|
||||
content: '' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.dataForm.projectId = window.SITE_CONFIG['projectId'] |
|
||||
this.getInfo() |
|
||||
}) |
|
||||
}, |
|
||||
// 获取信息 |
|
||||
getInfo() { |
|
||||
this.$http.get('/crf/template', { params: { crfId: this.dataForm.id }}).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.dataForm.content = Base64.decode(res.data.content) |
|
||||
this.dataForm = { ...this.dataForm } |
|
||||
} |
|
||||
}).catch(() => {}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,13 +0,0 @@ |
|||||
// eslint-disable-next-line no-undef
|
|
||||
tinymce.IconManager.add('custom', { |
|
||||
icons: { |
|
||||
'input-date': '<svg t="1623053598045" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="839" width="32" height="32"><path d="M950.4 182.4H73.6C32 182.4 0 214.4 0 256v512c0 41.6 32 73.6 73.6 73.6h876.8c41.6 0 73.6-32 73.6-73.6V256c0-41.6-32-73.6-73.6-73.6z m0 550.4c0 22.4-16 35.2-35.2 35.2H108.8c-22.4 0-35.2-16-35.2-35.2V291.2c0-19.2 12.8-35.2 35.2-35.2h803.2c22.4 0 35.2 16 35.2 35.2v441.6h3.2z" p-id="840"></path><path d="M771.2 320h44.8v70.4h-44.8zM588.8 320h44.8v70.4h-44.8z" p-id="841"></path><path d="M860.8 364.8h-22.4v44.8h-89.6v-44.8h-89.6v44.8h-89.6v-44.8H544c-12.8 0-22.4 9.6-22.4 22.4v294.4c0 12.8 9.6 22.4 22.4 22.4h316.8c12.8 0 22.4-9.6 22.4-22.4v-294.4c0-12.8-9.6-22.4-22.4-22.4z m-230.4 249.6h-44.8v-44.8h44.8v44.8z m0-89.6h-44.8V480h44.8v44.8z m92.8 89.6h-44.8v-44.8h44.8v44.8z m0-89.6h-44.8V480h44.8v44.8z m89.6 89.6H768v-44.8h44.8v44.8z m0-89.6H768V480h44.8v44.8zM230.4 352h-64c-19.2 0-32 12.8-32 32v256c0 16 12.8 32 32 32h64c19.2 0 32-12.8 32-32v-256c0-16-12.8-32-32-32z" p-id="842"></path></svg>', |
|
||||
'input': '<svg t="1623053714556" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5638" width="32" height="32"><path d="M73.142857 731.428571h877.714286V292.571429H73.142857v438.857142z m0-512h877.714286c43.885714 0 73.142857 29.257143 73.142857 73.142858v438.857142c0 43.885714-29.257143 73.142857-73.142857 73.142858H73.142857c-43.885714 0-73.142857-29.257143-73.142857-73.142858V292.571429c0-43.885714 29.257143-73.142857 73.142857-73.142858z m131.657143 146.285715h73.142857v292.571428h-73.142857V365.714286z" p-id="5639"></path></svg>', |
|
||||
'radio': '<svg t="1623292373056" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5458" width="16" height="16"><path d="M512 256c-143.36 0-256 112.64-256 256S368.64 768 512 768 768 655.36 768 512 655.36 256 512 256zM512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 921.6c-225.28 0-409.6-184.32-409.6-409.6S286.72 102.4 512 102.4s409.6 184.32 409.6 409.6-184.32 409.6-409.6 409.6z" p-id="5459"></path></svg>', |
|
||||
'checkbox': '<svg t="1623292420789" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" width="16" height="16"><path d="M278.755556 403.911111l-79.644445 79.644445L455.111111 739.555556l568.888889-568.888889-79.644444-79.644445L455.111111 580.266667l-176.355555-176.355556zM910.222222 910.222222H113.777778V113.777778h568.888889V0H113.777778C51.2 0 0 51.2 0 113.777778v796.444444c0 62.577778 51.2 113.777778 113.777778 113.777778h796.444444c62.577778 0 113.777778-51.2 113.777778-113.777778V455.111111h-113.777778v455.111111z" p-id="5718"></path></svg>', |
|
||||
'textarea': '<svg t="1623773458085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4996" width="40" height="24"><path d="M29.866667 85.333333v853.333334h968.533333V85.333333H29.866667z m883.2 597.333334L768 827.733333H110.933333V196.266667h802.133334V682.666667z" p-id="4997"></path><path d="M196.266667 337.066667c8.533333-29.866667 8.533333-29.866667 42.666666-29.866667V469.333333h-38.4v46.933334h136.533334V469.333333H298.666667V307.2h12.8c21.333333 0 25.6 0 29.866666 29.866667v17.066666l42.666667-8.533333v-25.6c0-17.066667-4.266667-38.4 0-51.2v-21.333333h-38.4L341.333333 256H196.266667l-4.266667-8.533333h-38.4v21.333333c0 17.066667 0 38.4-4.266667 59.733333v21.333334h42.666667l4.266667-12.8z m473.6 409.6l179.2-179.2 29.866666 29.866666-179.2 179.2-29.866666-29.866666z" p-id="4998"></path></svg>', |
|
||||
'button': '<svg t="1644572388809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2279" width="26" height="26"><path d="M800 256h-64a32 32 0 0 0-31.84-32H159.84C142.4 224 128 238.432 128 256.224v415.552A32 32 0 0 0 159.84 704H160v64H128c-35.328 0-64-28.48-64-63.904V223.904C64 188.608 92.864 160 128 160h608c35.328 0 64 28.48 64 63.904V256zM192 351.84A64 64 0 0 1 256.16 288h639.68A64 64 0 0 1 960 351.84v448.32A64 64 0 0 1 895.84 864H256.16A64 64 0 0 1 192 800.16v-448.32z m64 32.384v383.552A31.968 31.968 0 0 0 287.744 800h576.512c17.184 0 31.744-14.4 31.744-32.224V384.224A31.968 31.968 0 0 0 864.256 352H287.744C270.56 352 256 366.4 256 384.224z m219.232 238.4c0 12.16-1.92 23.168-5.76 32.96-3.808 9.792-9.12 18.048-15.872 24.8-6.752 6.72-14.592 11.904-23.52 15.488a76.064 76.064 0 0 1-28.576 5.344H320V448h72.384c8.576 0 16.64 1.6 24.192 4.768 7.552 3.2 14.24 7.616 20.128 13.28 5.856 5.696 10.464 12.704 13.856 21.056a73.824 73.824 0 0 1 3.872 39.872c-0.768 4.256-1.92 8.288-3.36 12.128-1.472 3.84-3.328 7.328-5.6 10.496a27.776 27.776 0 0 1-7.776 7.552c4.512 1.6 9.024 4.48 13.536 8.736 4.48 4.224 8.576 9.28 12.16 15.072a80.736 80.736 0 0 1 11.84 41.664z m-50.72 0c0-11.104-3.264-19.36-9.824-24.8a33.568 33.568 0 0 0-21.984-8.128h-25.024v65.472h25.024c4.064 0 8-0.64 11.84-1.984a29.184 29.184 0 0 0 10.144-5.952 29.28 29.28 0 0 0 7.104-10.112c1.824-4.096 2.72-8.928 2.72-14.496z m-16.576-103.584c0-9.28-2.432-15.872-7.264-19.84a25.216 25.216 0 0 0-16.416-5.952h-16.576v51.2h16.576c6.08 0 11.552-1.92 16.416-5.76 4.832-3.84 7.264-10.368 7.264-19.648z m166.528-21.824v204h-52.064v-204.384h-65.28V448h182.304v49.216h-64.96zM792.16 704l-78.336-143.424v140.64H661.44V448h42.272l75.904 128v-128H832v256h-39.84z" fill="#333333" p-id="2280"></path></svg>', |
|
||||
'select': '<svg t="1673256254263" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15141" width="20" height="20"><path d="M938.24 280.32h-133.12a33.28 33.28 0 1 1 0-64h133.12a33.28 33.28 0 0 1 0 64z m-266.24 0H539.52a33.28 33.28 0 1 1 0-64h132.48a33.28 33.28 0 1 1 0 64z m-265.6 0H273.28a33.28 33.28 0 0 1 0-64h133.12a33.28 33.28 0 1 1 0 64z m-266.24 0h-54.4A72.96 72.96 0 0 1 12.8 207.36V192a33.28 33.28 0 0 1 64 0v16a6.4 6.4 0 0 0 6.4 6.4h54.4a33.28 33.28 0 0 1 0 64z m837.76-94.08a33.28 33.28 0 0 1-33.28-33.28V128a6.4 6.4 0 0 0-6.4-6.4h-46.72a33.28 33.28 0 0 1 0-64h46.72A72.96 72.96 0 0 1 1011.2 128v24.32a33.28 33.28 0 0 1-33.28 33.92z m-218.88-64H625.92a33.28 33.28 0 1 1 0-64h133.12a33.28 33.28 0 1 1 0 64z m-266.24 0H359.68a33.28 33.28 0 1 1 0-64H492.8a33.28 33.28 0 0 1 0 64z m-265.6 0H94.08a33.28 33.28 0 0 1 0-64h133.12a33.28 33.28 0 1 1 0 64zM938.24 627.84H85.76A72.96 72.96 0 0 1 12.8 554.88V476.16A72.96 72.96 0 0 1 85.76 403.2h852.48a72.96 72.96 0 0 1 72.96 72.96v78.72a72.96 72.96 0 0 1-72.96 72.96zM85.76 469.76a6.4 6.4 0 0 0-6.4 6.4v78.72a6.4 6.4 0 0 0 6.4 6.4h852.48a6.4 6.4 0 0 0 6.4-6.4V476.16a6.4 6.4 0 0 0-6.4-6.4zM938.24 975.36h-133.12a33.28 33.28 0 0 1 0-64h133.12a33.28 33.28 0 1 1 0 64z m-266.24 0H539.52a33.28 33.28 0 0 1 0-64h132.48a33.28 33.28 0 1 1 0 64z m-265.6 0H273.28a33.28 33.28 0 0 1 0-64h133.12a33.28 33.28 0 0 1 0 64z m-266.24 0h-54.4A72.96 72.96 0 0 1 12.8 902.4v-16a33.28 33.28 0 0 1 64 0v16a5.76 5.76 0 0 0 6.4 6.4h54.4a33.28 33.28 0 1 1 0 64z m837.76-94.08a33.28 33.28 0 0 1-33.28-33.28v-24.32a6.4 6.4 0 0 0-6.4-6.4h-46.72a33.28 33.28 0 0 1-33.28-33.28 33.92 33.92 0 0 1 33.28-33.28h46.72a73.6 73.6 0 0 1 72.96 72.96v24.32a33.28 33.28 0 0 1-33.28 33.28z m-218.88-64H625.92a33.28 33.28 0 0 1-33.28-33.28 33.28 33.28 0 0 1 33.28-33.28h133.12a33.28 33.28 0 0 1 32.64 33.28 32.64 32.64 0 0 1-32.64 33.28z m-266.24 0H359.68a33.28 33.28 0 0 1-33.28-33.28 33.92 33.92 0 0 1 33.28-33.28H492.8a33.28 33.28 0 0 1 33.28 33.28 33.28 33.28 0 0 1-33.28 33.28z m-266.24 0H94.08a33.28 33.28 0 0 1-30.08-33.28 33.28 33.28 0 0 1 33.28-33.28h129.28a33.28 33.28 0 0 1 33.28 33.28 33.28 33.28 0 0 1-33.28 33.28z" fill="#323333" p-id="15142"></path></svg>', |
|
||||
'selectMultiple': '<svg t="1673255546597" class="icon" viewBox="0 0 1117 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6257" width="20" height="20"><path d="M340.267533 68.40185m49.970214 0l677.328501 0q49.970214 0 49.970214 49.970214l0-0.136531q0 49.970214-49.970214 49.970214l-677.328501 0q-49.970214 0-49.970214-49.970214l0 0.136531q0-49.970214 49.970214-49.970214Z" fill="#4D4D4D" p-id="6258"></path><path d="M340.267533 474.853563m49.970214 0l677.328501 0q49.970214 0 49.970214 49.970214l0-0.136531q0 49.970214-49.970214 49.970214l-677.328501 0q-49.970214 0-49.970214-49.970214l0 0.136531q0-49.970214 49.970214-49.970214Z" fill="#4D4D4D" p-id="6259"></path><path d="M340.267533 881.441806m49.970214 0l677.328501 0q49.970214 0 49.970214 49.970214l0-0.136531q0 49.970214-49.970214 49.970214l-677.328501 0q-49.970214 0-49.970214-49.970214l0 0.136531q0-49.970214 49.970214-49.970214Z" fill="#4D4D4D" p-id="6260"></path><path d="M301.21977 10.64939A36.044089 36.044089 0 0 0 275.688541 0a35.907558 35.907558 0 0 0-25.53123 10.64939L123.047286 138.032476 61.745029 76.184097a36.044089 36.044089 0 0 0-25.531229-10.64939A36.180619 36.180619 0 0 0 10.68257 127.246556l87.106548 87.516139A35.771027 35.771027 0 0 0 123.047286 225.275555a35.224905 35.224905 0 0 0 25.394699-10.64939L301.21977 61.575318a36.31715 36.31715 0 0 0 0-50.925928zM301.21977 423.244981a35.907558 35.907558 0 0 0-25.531229-10.512859 35.771027 35.771027 0 0 0-25.53123 10.512859L123.047286 550.491537l-61.302257-61.84838A36.044089 36.044089 0 0 0 36.2138 477.857237a36.180619 36.180619 0 0 0-25.53123 61.848379l87.106548 87.37961a35.771027 35.771027 0 0 0 50.925928 0l152.504724-153.050847a36.453681 36.453681 0 0 0 0-50.789398zM301.21977 809.353629a36.044089 36.044089 0 0 0-25.531229-10.64939 35.907558 35.907558 0 0 0-25.53123 10.64939L123.047286 936.736715l-61.302257-61.848379a35.907558 35.907558 0 0 0-25.531229-10.51286 35.771027 35.771027 0 0 0-25.53123 10.51286 36.180619 36.180619 0 0 0 0 51.062459l87.106548 87.516139a36.044089 36.044089 0 0 0 50.925928 0L301.21977 860.143027a36.453681 36.453681 0 0 0 0-50.789398z" fill="#4D4D4D" p-id="6261"></path></svg>' |
|
||||
} |
|
||||
}) |
|
||||
@ -1,7 +0,0 @@ |
|||||
// Exports the "default" icons for usage with module loaders
|
|
||||
// Usage:
|
|
||||
// CommonJS:
|
|
||||
// require('tinymce/icons/default')
|
|
||||
// ES2015:
|
|
||||
// import 'tinymce/icons/default'
|
|
||||
require('./icons.js') |
|
||||
@ -1,7 +0,0 @@ |
|||||
// Exports the "anchor" plugin for usage with module loaders
|
|
||||
// Usage:
|
|
||||
// CommonJS:
|
|
||||
// require('tinymce/plugins/anchor')
|
|
||||
// ES2015:
|
|
||||
// import 'tinymce/plugins/anchor'
|
|
||||
require('./plugin.js') |
|
||||
@ -1,257 +0,0 @@ |
|||||
|
|
||||
import { |
|
||||
loadJS_ifrEditArea, |
|
||||
loadCSS_ifrEditArea, |
|
||||
isPlugin, |
|
||||
// updateElm,
|
|
||||
updateAttrib, |
|
||||
getIdByClassName, |
|
||||
__assign, |
|
||||
isElm |
|
||||
// dataFormToElmPartStr,
|
|
||||
// elmToDataForm,
|
|
||||
// hasElm
|
|
||||
} |
|
||||
from '../hm_utils/index' |
|
||||
|
|
||||
(function() { |
|
||||
'use strict' |
|
||||
|
|
||||
const pluginOptions = { |
|
||||
jsArr: [], |
|
||||
cssArr: [], |
|
||||
name: 'hmbutton', |
|
||||
className: 'hmbutton', // 判断依据，建议和name值一致
|
|
||||
cmdName: 'cmdhmbutton', |
|
||||
editName: 'hmbutton_edit', |
|
||||
dataForm: { |
|
||||
'data-hm_id': '', |
|
||||
'data-hm_type': 'button', |
|
||||
'img': '', |
|
||||
'value': '', |
|
||||
'style.marginTop': '' |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const global = tinymce.util.Tools.resolve('tinymce.PluginManager') |
|
||||
|
|
||||
// 初始设置
|
|
||||
const setup = function(editor) { |
|
||||
// 编辑器初始化后执行
|
|
||||
editor.on('init', function() { |
|
||||
loadJS_ifrEditArea(editor, pluginOptions.jsArr) |
|
||||
loadCSS_ifrEditArea(editor, pluginOptions.cssArr) |
|
||||
}) |
|
||||
// 右键菜单，选定目标
|
|
||||
editor.on('contextmenu', function(evt) { |
|
||||
const elm = evt.target |
|
||||
editor.selection.select(elm) |
|
||||
}, true) |
|
||||
} |
|
||||
|
|
||||
const open = function(editor) { |
|
||||
editor.windowManager.open({ |
|
||||
title: '新增按钮', |
|
||||
size: 'normal', // 'normal', 'medium' or 'large'
|
|
||||
body: { |
|
||||
type: 'panel', |
|
||||
items: [ |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'data-hm_id', |
|
||||
label: '名称', |
|
||||
placeholder: '按钮名称' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'id', |
|
||||
label: '唯一ID', |
|
||||
placeholder: '唯一ID' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'class', |
|
||||
label: '样式名', |
|
||||
placeholder: '样式名' |
|
||||
} |
|
||||
// {
|
|
||||
// type: 'input',
|
|
||||
// name: 'spacing',
|
|
||||
// label: '间距',
|
|
||||
// placeholder: '距离顶部的间距'
|
|
||||
// }
|
|
||||
] |
|
||||
}, |
|
||||
initialData: elmToDataForm(editor, pluginOptions.dataForm, pluginOptions.className), |
|
||||
buttons: [ |
|
||||
{ |
|
||||
type: 'cancel', |
|
||||
name: 'cancel', |
|
||||
text: '取消' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'submit', |
|
||||
name: 'save', |
|
||||
text: '确定', |
|
||||
primary: true |
|
||||
} |
|
||||
], |
|
||||
onSubmit: function(api) { |
|
||||
const dataForm = api.getData() |
|
||||
// console.log(dataForm)
|
|
||||
dataForm['data-hm_type'] = pluginOptions.dataForm['data-hm_type'] |
|
||||
const hmType = dataForm['data-hm_type'] |
|
||||
const className = pluginOptions.className |
|
||||
const elm = editor.selection.getNode() |
|
||||
|
|
||||
let ele_button, elm_img |
|
||||
if (elm.className.indexOf(className + '-img') >= 0) { |
|
||||
ele_button = isElm(elm.previousElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined |
|
||||
elm_img = elm |
|
||||
} else if (elm.className.indexOf(className) >= 0 && isElm(elm, 'data-hm_type', hmType)) { |
|
||||
ele_button = elm |
|
||||
elm_img = isElm(elm, 'data-hm_type', hmType) ? elm.nextElementSibling : undefined |
|
||||
} |
|
||||
|
|
||||
if (elm && isPlugin(elm, className)) { |
|
||||
// console.log('更新', elm)
|
|
||||
// 更新
|
|
||||
updateElm(editor, ele_button, elm_img, dataForm, changeHandler) |
|
||||
api.close() |
|
||||
} else { |
|
||||
// 插入
|
|
||||
// console.log('插入', dataForm)
|
|
||||
insertElm(editor, dataForm) |
|
||||
api.close() |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 右击编辑弹框回显
|
|
||||
const elmToDataForm = function(editor, initDataForm, pluginClassName) { |
|
||||
const elm = editor.selection.getNode() |
|
||||
const dataForm = __assign({}, initDataForm) |
|
||||
// console.log(dataForm)
|
|
||||
const hmType = initDataForm['data-hm_type'] |
|
||||
if (isPlugin(elm, pluginClassName)) { |
|
||||
let ele_button, elm_img |
|
||||
if (elm.className.indexOf(pluginClassName + '-img') >= 0) { |
|
||||
ele_button = isElm(elm.previousElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined |
|
||||
elm_img = elm |
|
||||
} else if (elm.className.indexOf(pluginClassName) >= 0 && isElm(elm, 'data-hm_type', hmType)) { |
|
||||
ele_button = elm |
|
||||
elm_img = isElm(elm, 'data-hm_type', hmType) ? elm.nextElementSibling : undefined |
|
||||
} |
|
||||
// console.log(elm_img)
|
|
||||
// console.log(ele_button)
|
|
||||
dataForm['data-hm_id'] = ele_button.getAttribute('data-hm_id') |
|
||||
dataForm['id'] = ele_button.getAttribute('id') |
|
||||
dataForm['class'] = ele_button.getAttribute('class') ? ele_button.getAttribute('class').split(' ')[1] : '' |
|
||||
// dataForm['spacing'] = elm.parentNode.style ? elm.parentNode.style.marginTop.replace('px', '') : ''
|
|
||||
} |
|
||||
return dataForm |
|
||||
} |
|
||||
|
|
||||
const insertElm = function(editor, dataForm) { |
|
||||
// console.log(dataForm)
|
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const className = pluginOptions.className |
|
||||
console.log(doc) |
|
||||
console.log(className) |
|
||||
const id = getIdByClassName(doc, className) |
|
||||
const name = dataForm['data-hm_id'] |
|
||||
const hmType = dataForm['data-hm_type'] |
|
||||
const ID = dataForm['id'] |
|
||||
const customClass = dataForm['class'] |
|
||||
// const spacing = dataForm['spacing']
|
|
||||
const win = editor.contentWindow |
|
||||
const domStr_button = `<input type="submit" id="${ID}" class="${className} ${customClass}" data-hm_type="${hmType}" data-hm_id="${name}" value="${name}"></input>` |
|
||||
// const domStr_img = ``
|
|
||||
// const divs = `<div id="div-${ID}" class="div-buttons" style="margin-top:${spacing}px;">${domStr_button}</div>`
|
|
||||
editor.insertContent(domStr_button) |
|
||||
// 渲染控件
|
|
||||
renderElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
} |
|
||||
|
|
||||
const updateElm = function(editor, ele_button, ele_img, dataForm, changeHandler) { |
|
||||
console.log(123, dataForm['data-hm_id']) |
|
||||
const name = dataForm['data-hm_id'] |
|
||||
const ID = dataForm['id'] |
|
||||
// const spacing = dataForm['spacing']
|
|
||||
const className = pluginOptions.className |
|
||||
const customClass = dataForm['class'] |
|
||||
if (ele_button) { |
|
||||
updateAttrib(ele_button, 'data-hm_id', name) |
|
||||
updateAttrib(ele_button, 'id', ID) |
|
||||
updateAttrib(ele_button, 'value', name) |
|
||||
updateAttrib(ele_button, 'class', `${className} ${customClass}`) |
|
||||
// ele_button.parentNode.style.marginTop = spacing + 'px'
|
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 编辑控件状态后，触发处理逻辑
|
|
||||
const changeHandler = function(editor, elm, dataForm) { |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const win = editor.contentWindow |
|
||||
const id = editor.dom.getAttrib(elm, 'id') |
|
||||
|
|
||||
renderElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
} |
|
||||
|
|
||||
const renderElm = function(doc, win, id, type) { |
|
||||
} |
|
||||
|
|
||||
const register = function(editor) { |
|
||||
editor.addCommand(pluginOptions.cmdName, function() { |
|
||||
open(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const register$1 = function(editor) { |
|
||||
// 工具栏
|
|
||||
editor.ui.registry.addButton(pluginOptions.name, { |
|
||||
icon: 'button', |
|
||||
title: '按钮', |
|
||||
tooltip: '按钮', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
}, |
|
||||
onSetup: function(buttonApi) { |
|
||||
} |
|
||||
}) |
|
||||
// 菜单栏
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.name, { |
|
||||
icon: 'button', |
|
||||
text: '按钮', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// 菜单栏（编辑）
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.editName, { |
|
||||
icon: 'button', |
|
||||
text: '编辑', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
editor.ui.registry.addContextMenu(pluginOptions.name, { |
|
||||
update: function(elm) { |
|
||||
return isPlugin(elm, pluginOptions.className) ? [pluginOptions.editName] : [] |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
function Plugin() { |
|
||||
global.add(pluginOptions.name, function(editor) { |
|
||||
setup(editor) |
|
||||
register(editor) |
|
||||
register$1(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
Plugin() |
|
||||
}()) |
|
||||
@ -1,7 +0,0 @@ |
|||||
// Exports the "anchor" plugin for usage with module loaders
|
|
||||
// Usage:
|
|
||||
// CommonJS:
|
|
||||
// require('tinymce/plugins/anchor')
|
|
||||
// ES2015:
|
|
||||
// import 'tinymce/plugins/anchor'
|
|
||||
require('./plugin.js') |
|
||||
@ -1,244 +0,0 @@ |
|||||
import { |
|
||||
loadJS_ifrEditArea, |
|
||||
loadCSS_ifrEditArea, |
|
||||
isPlugin, |
|
||||
// updateElm,
|
|
||||
updateAttrib, |
|
||||
getIdByClassName, |
|
||||
__assign, |
|
||||
isElm, |
|
||||
getListbox_Field |
|
||||
// dataFormToElmPartStr,
|
|
||||
// elmToDataForm,
|
|
||||
// hasElm
|
|
||||
} |
|
||||
from '../hm_utils/index' |
|
||||
|
|
||||
(function() { |
|
||||
'use strict' |
|
||||
|
|
||||
const pluginOptions = { |
|
||||
jsArr: [], |
|
||||
cssArr: [], |
|
||||
name: 'hmcheckbox', |
|
||||
className: 'hmcheckbox', // 判断依据，建议和name值一致
|
|
||||
cmdName: 'cmdhmcheckbox', |
|
||||
editName: 'hmcheckbox_edit', |
|
||||
dataForm: { |
|
||||
'data-hm_id': '', |
|
||||
'data-hm_type': 'checkbox', |
|
||||
'label': '', |
|
||||
'value': '' |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const global = tinymce.util.Tools.resolve('tinymce.PluginManager') |
|
||||
|
|
||||
// 初始设置
|
|
||||
const setup = function(editor) { |
|
||||
// 编辑器初始化后执行
|
|
||||
editor.on('init', function() { |
|
||||
loadJS_ifrEditArea(editor, pluginOptions.jsArr) |
|
||||
loadCSS_ifrEditArea(editor, pluginOptions.cssArr) |
|
||||
}) |
|
||||
// 右键菜单，选定目标
|
|
||||
editor.on('contextmenu', function(evt) { |
|
||||
const elm = evt.target |
|
||||
editor.selection.select(elm) |
|
||||
}, true) |
|
||||
} |
|
||||
|
|
||||
const open = function(editor) { |
|
||||
editor.windowManager.open({ |
|
||||
title: '新增', |
|
||||
size: 'normal', // 'normal', 'medium' or 'large'
|
|
||||
body: { |
|
||||
type: 'panel', |
|
||||
items: [ |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'data-hm_id', |
|
||||
label: '组号', |
|
||||
placeholder: '分组编号' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'label', |
|
||||
label: '选项名' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'value', |
|
||||
label: '选项值' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'listbox', |
|
||||
name: 'data-hm_bd_id', |
|
||||
label: '绑定字段', |
|
||||
items: getListbox_Field() |
|
||||
} |
|
||||
] |
|
||||
|
|
||||
}, |
|
||||
initialData: elmToDataForm(editor, pluginOptions.dataForm, pluginOptions.className), |
|
||||
buttons: [ |
|
||||
{ |
|
||||
type: 'cancel', |
|
||||
name: 'cancel', |
|
||||
text: '取消' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'submit', |
|
||||
name: 'save', |
|
||||
text: '确定', |
|
||||
primary: true |
|
||||
} |
|
||||
], |
|
||||
onSubmit: function(api) { |
|
||||
const dataForm = api.getData() |
|
||||
dataForm['data-hm_type'] = pluginOptions.dataForm['data-hm_type'] |
|
||||
const hmType = dataForm['data-hm_type'] |
|
||||
const className = pluginOptions.className |
|
||||
const elm = editor.selection.getNode() |
|
||||
|
|
||||
let elm_input, elm_label |
|
||||
if (elm.className.indexOf(className + '-label') >= 0) { |
|
||||
elm_input = isElm(elm.previousElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined |
|
||||
elm_label = elm |
|
||||
} else if (elm.className.indexOf(className) >= 0 && isElm(elm, 'data-hm_type', hmType)) { |
|
||||
elm_input = elm |
|
||||
elm_label = isElm(elm.nextElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined |
|
||||
} |
|
||||
|
|
||||
if (elm && isPlugin(elm, className)) { |
|
||||
// 更新
|
|
||||
updateElm(editor, elm_input, elm_label, dataForm, changeHandler) |
|
||||
api.close() |
|
||||
} else { |
|
||||
// 插入
|
|
||||
insertElm(editor, dataForm) |
|
||||
api.close() |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const elmToDataForm = function(editor, initDataForm, pluginClassName) { |
|
||||
const elm = editor.selection.getNode() |
|
||||
const dataForm = __assign({}, initDataForm) |
|
||||
const hmType = initDataForm['data-hm_type'] |
|
||||
if (isPlugin(elm, pluginClassName)) { |
|
||||
let elm_input, elm_label |
|
||||
if (elm.className.indexOf(pluginClassName + '-label') >= 0) { |
|
||||
elm_input = isElm(elm.previousElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined |
|
||||
elm_label = elm |
|
||||
} else if (elm.className.indexOf(pluginClassName) >= 0 && isElm(elm, 'data-hm_type', hmType)) { |
|
||||
elm_input = elm |
|
||||
elm_label = isElm(elm.nextElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined |
|
||||
} |
|
||||
dataForm['data-hm_id'] = elm_input.getAttribute('data-hm_id') |
|
||||
dataForm['label'] = elm_label.innerText |
|
||||
dataForm['value'] = elm_input.getAttribute('value') |
|
||||
dataForm['data-hm_bd_id'] = elm_input.getAttribute('data-hm_bd_id') ? elm_input.getAttribute('data-hm_bd_id') : '' |
|
||||
} |
|
||||
return dataForm |
|
||||
} |
|
||||
|
|
||||
const insertElm = function(editor, dataForm) { |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const className = pluginOptions.className |
|
||||
const id = getIdByClassName(doc, className) |
|
||||
const name = dataForm['data-hm_id'] |
|
||||
const hmType = dataForm['data-hm_type'] |
|
||||
const label = dataForm['label'] |
|
||||
const value = dataForm['value'] || label |
|
||||
const win = editor.contentWindow |
|
||||
|
|
||||
const domStr_input = `<input type="checkbox" id="${id}" class="${className}" name="${name}" value="${value}" data-hm_id="${name}" data-hm_type="${hmType}">` |
|
||||
const domStr_label = `<label class="${className}-label" for="${id}">${label}</label></input>` |
|
||||
editor.insertContent(domStr_input + domStr_label) |
|
||||
// 渲染控件
|
|
||||
renderElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
} |
|
||||
|
|
||||
const updateElm = function(editor, elm_input, elm_label, dataForm, changeHandler) { |
|
||||
const name = dataForm['data-hm_id'] |
|
||||
const label = dataForm['label'] |
|
||||
const value = dataForm['value'] || label |
|
||||
const BDID = dataForm['data-hm_bd_id'] |
|
||||
if (elm_input) { |
|
||||
updateAttrib(elm_input, 'name', name) |
|
||||
updateAttrib(elm_input, 'value', value) |
|
||||
updateAttrib(elm_input, 'data-hm_id', name) |
|
||||
updateAttrib(elm_input, 'data-hm_bd_id', BDID) |
|
||||
} |
|
||||
if (elm_label) { |
|
||||
elm_label.innerText = label |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 编辑控件状态后，触发处理逻辑
|
|
||||
const changeHandler = function(editor, elm, dataForm) { |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const win = editor.contentWindow |
|
||||
const id = editor.dom.getAttrib(elm, 'id') |
|
||||
|
|
||||
renderElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
} |
|
||||
|
|
||||
const renderElm = function(doc, win, id, type) { |
|
||||
} |
|
||||
|
|
||||
const register = function(editor) { |
|
||||
editor.addCommand(pluginOptions.cmdName, function() { |
|
||||
open(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const register$1 = function(editor) { |
|
||||
// 工具栏
|
|
||||
editor.ui.registry.addButton(pluginOptions.name, { |
|
||||
icon: 'checkbox', |
|
||||
title: '复选框', |
|
||||
tooltip: '复选框', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
}, |
|
||||
onSetup: function(buttonApi) { |
|
||||
} |
|
||||
}) |
|
||||
// 菜单栏
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.name, { |
|
||||
icon: 'checkbox', |
|
||||
text: '复选框', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// 菜单栏（编辑）
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.editName, { |
|
||||
icon: 'checkbox', |
|
||||
text: '编辑', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
editor.ui.registry.addContextMenu(pluginOptions.name, { |
|
||||
update: function(elm) { |
|
||||
return isPlugin(elm, pluginOptions.className) ? [pluginOptions.editName] : [] |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
function Plugin() { |
|
||||
global.add(pluginOptions.name, function(editor) { |
|
||||
setup(editor) |
|
||||
register(editor) |
|
||||
register$1(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
Plugin() |
|
||||
}()) |
|
||||
@ -1,7 +0,0 @@ |
|||||
// Exports the "anchor" plugin for usage with module loaders
|
|
||||
// Usage:
|
|
||||
// CommonJS:
|
|
||||
// require('tinymce/plugins/anchor')
|
|
||||
// ES2015:
|
|
||||
// import 'tinymce/plugins/anchor'
|
|
||||
require('./plugin.js') |
|
||||
@ -1,360 +0,0 @@ |
|||||
/* eslint-disable no-useless-escape */ |
|
||||
/* eslint-disable no-undef */ |
|
||||
/* eslint-disable no-unused-vars */ |
|
||||
import { |
|
||||
loadJS_ifrEditArea, |
|
||||
loadCSS_ifrEditArea, |
|
||||
isPlugin, |
|
||||
updateElm, |
|
||||
dataFormToElmPartStr, |
|
||||
elmToDataForm, |
|
||||
getIdByClassName, |
|
||||
getListbox_Field, |
|
||||
hasElm, |
|
||||
__assign |
|
||||
} |
|
||||
from '../hm_utils/index' |
|
||||
|
|
||||
(function() { |
|
||||
'use strict' |
|
||||
|
|
||||
const pluginOptions = { |
|
||||
jsArr: ['/static/js/laydate/laydate.js'], |
|
||||
cssArr: [], // '/static/css/hmcrf.css'
|
|
||||
name: 'hminput', |
|
||||
className: 'hminput', // 判断依据，建议和name值一致
|
|
||||
cmdName: 'cmdhminput', |
|
||||
editName: 'hminput_edit', |
|
||||
dataForm: { |
|
||||
'data-hm_id': '', |
|
||||
'data-hm_type': '', |
|
||||
'data-hm_required': 'false', |
|
||||
'data-hm_bd_eye_type': '', |
|
||||
'data-hm_bd_id': '', |
|
||||
'placeholder': '', |
|
||||
'title': '', |
|
||||
'class.border': '', |
|
||||
'style.width': '120', |
|
||||
'style.height': '18', |
|
||||
'style.text-align': 'center', |
|
||||
'style.background-color': '' |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const global = tinymce.util.Tools.resolve('tinymce.PluginManager') |
|
||||
|
|
||||
// 初始设置
|
|
||||
const setup = function(editor) { |
|
||||
// 编辑器初始化后执行
|
|
||||
editor.on('init', function() { |
|
||||
loadJS_ifrEditArea(editor, pluginOptions.jsArr) |
|
||||
loadCSS_ifrEditArea(editor, pluginOptions.cssArr) |
|
||||
}) |
|
||||
// 右键菜单，选定目标
|
|
||||
editor.on('contextmenu', function(evt) { |
|
||||
console.log(evt) |
|
||||
const target = evt.target |
|
||||
editor.selection.select(target) |
|
||||
}, true) |
|
||||
} |
|
||||
const dialogBody = function() { |
|
||||
return { |
|
||||
type: 'panel', |
|
||||
items: [ |
|
||||
{ |
|
||||
type: 'grid', |
|
||||
columns: 2, |
|
||||
items: [ |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'data-hm_id', |
|
||||
label: '编号 (ID)', |
|
||||
// other: 't1',
|
|
||||
placeholder: '唯一编号' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'selectbox', |
|
||||
name: 'data-hm_type', |
|
||||
label: '类型', |
|
||||
size: 1, |
|
||||
disabled: false, |
|
||||
items: [ |
|
||||
{ value: 'text', text: '文本' }, |
|
||||
{ value: 'textarea', text: '文本域', hmto: 'textarea' }, |
|
||||
{ value: 'number', text: '数字' }, |
|
||||
{ value: 'date', text: '日期' }, |
|
||||
{ value: 'datetime', text: '日期时间' }, |
|
||||
{ value: 'time', text: '时间' } |
|
||||
] |
|
||||
}, |
|
||||
// --------
|
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'style.width', |
|
||||
label: '宽度 (px或%)' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'style.height', |
|
||||
label: '高度 (px或%)' |
|
||||
}, |
|
||||
// --------
|
|
||||
{ |
|
||||
type: 'selectbox', |
|
||||
name: 'style.text-align', |
|
||||
label: '对齐方式', |
|
||||
size: 1, |
|
||||
items: [ |
|
||||
{ value: 'left', text: '居左' }, |
|
||||
{ value: 'center', text: '居中' }, |
|
||||
{ value: 'right', text: '居右' } |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
type: 'selectbox', |
|
||||
name: 'class.border', |
|
||||
label: '边框', |
|
||||
size: 1, |
|
||||
items: [ |
|
||||
// 必须是class.X的【X-】形式命名选项值
|
|
||||
{ value: 'border-1', text: '下划线' }, |
|
||||
{ value: 'border-2', text: '可见' }, |
|
||||
{ value: 'border-3', text: '不可见' } |
|
||||
] |
|
||||
}, |
|
||||
// --------
|
|
||||
{ |
|
||||
type: 'colorinput', |
|
||||
name: 'style.background-color', |
|
||||
label: '背景色' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'selectbox', |
|
||||
name: 'data-hm_required', |
|
||||
label: '必填', |
|
||||
size: 1, |
|
||||
items: [ |
|
||||
{ value: 'false', text: '否' }, |
|
||||
{ value: 'true', text: '是' } |
|
||||
] |
|
||||
}, |
|
||||
// --------
|
|
||||
{ |
|
||||
type: 'listbox', |
|
||||
name: 'data-hm_bd_id', |
|
||||
label: '绑定字段', |
|
||||
items: getListbox_Field() |
|
||||
}, |
|
||||
{ |
|
||||
type: 'selectbox', |
|
||||
name: 'data-hm_bd_eye_type', |
|
||||
label: '绑定眼别', |
|
||||
size: 1, |
|
||||
items: [ |
|
||||
{ value: '', text: '----无----' }, |
|
||||
{ value: 'os', text: '左眼（OS）' }, |
|
||||
{ value: 'od', text: '右眼（OD）' } |
|
||||
] |
|
||||
}, |
|
||||
// --------
|
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'placeholder', |
|
||||
label: '背景文字' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'title', |
|
||||
label: '提示' |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
} |
|
||||
const open = function(editor) { |
|
||||
editor.windowManager.open({ |
|
||||
title: '新增', |
|
||||
size: 'medium', // 'normal', 'medium' or 'large'
|
|
||||
// height:500,
|
|
||||
body: dialogBody(), |
|
||||
initialData: elmToDataForm(editor, pluginOptions.dataForm, pluginOptions.className, init), |
|
||||
buttons: [ |
|
||||
{ |
|
||||
type: 'cancel', |
|
||||
name: 'cancel', |
|
||||
text: '取消' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'submit', |
|
||||
name: 'save', |
|
||||
text: '确定', |
|
||||
primary: true |
|
||||
} |
|
||||
|
|
||||
], |
|
||||
onChange: function(api, details) { |
|
||||
// const dataForm = api.getData()
|
|
||||
// console.log(details, dataForm[details.name])
|
|
||||
}, |
|
||||
onSubmit: function(api) { |
|
||||
const dataForm = api.getData() |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const className = pluginOptions.className |
|
||||
const hmType = dataForm['data-hm_type'] |
|
||||
|
|
||||
const elm = editor.selection.getNode() |
|
||||
if (dataForm['data-hm_id'].length === 0) { |
|
||||
tinymce.activeEditor.windowManager.alert('请填写编号') |
|
||||
} else { |
|
||||
if (elm && isPlugin(elm, className)) { |
|
||||
const elmHmType = editor.dom.getAttrib(elm, 'data-hm_type') |
|
||||
if (elmHmType !== hmType) { |
|
||||
// 先插后删
|
|
||||
insertElm(editor, dataForm) |
|
||||
elm.remove() |
|
||||
} else { |
|
||||
// 更新
|
|
||||
updateElm(editor, elm, className, dataForm, changeHandler) |
|
||||
} |
|
||||
|
|
||||
api.close() |
|
||||
} else { |
|
||||
// 判读是否存在相同编号ID的控件
|
|
||||
if (hasElm(doc, 'data-hm_id', dataForm['data-hm_id'])) { |
|
||||
tinymce.activeEditor.windowManager.confirm('已存在，请使用其他编号？', function(s) { |
|
||||
// tinymce.activeEditor.windowManager.alert("Ok");
|
|
||||
return |
|
||||
}) |
|
||||
} else { |
|
||||
// 插入
|
|
||||
insertElm(editor, dataForm) |
|
||||
api.close() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
const init = function(editor, dataForm) { |
|
||||
// const elm = editor.selection.getNode()
|
|
||||
// const hmType = editor.dom.getAttrib(elm, 'data-hm_type')
|
|
||||
// if (hmType === 'number' || hmType === 'textarea') {
|
|
||||
// dataForm['data-hm_type']
|
|
||||
// }
|
|
||||
|
|
||||
// const tempDataForm = JSON.parse(window.localStorage.getItem('crfInputOptions'))
|
|
||||
// if (tempDataForm) {
|
|
||||
// dataForm = __assign({}, dataForm, tempDataForm)
|
|
||||
// return dataForm
|
|
||||
// }
|
|
||||
} |
|
||||
|
|
||||
const insertElm = function(editor, dataForm) { |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const className = pluginOptions.className |
|
||||
const id = getIdByClassName(doc, className) |
|
||||
const name = dataForm['data-hm_id'] |
|
||||
const win = editor.contentWindow |
|
||||
|
|
||||
let domStr = '' |
|
||||
switch (dataForm['data-hm_type']) { |
|
||||
case 'number': |
|
||||
domStr = `<input type="number" name="${name}" id="${name}" value="" ${dataFormToElmPartStr(dataForm, className)}
|
|
||||
autocomplete="off" |
|
||||
onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode) ) )" |
|
||||
onkeyup="this.value=this.value.replace(/[^\d]/g,'');"></input>` |
|
||||
break |
|
||||
case 'textarea': |
|
||||
domStr = `<textarea name="${name}" id="${name}" autocomplete="off" value="" ${dataFormToElmPartStr(dataForm, className)} ></textarea>` |
|
||||
break |
|
||||
default: |
|
||||
domStr = `<input type="text" name="${name}" id="${name}" autocomplete="off" value="" ${dataFormToElmPartStr(dataForm, className)}></input>` |
|
||||
break |
|
||||
} |
|
||||
// console.log(domStr)
|
|
||||
|
|
||||
editor.insertContent(domStr) |
|
||||
|
|
||||
// const ifr = document.getElementsByClassName('tox-edit-area__iframe')[0]
|
|
||||
// 【ifr.contentDocument = ifr.contentWindow.document】
|
|
||||
// 【editor.contentDocument = editor.contentWindow.document】
|
|
||||
|
|
||||
// 渲染控件
|
|
||||
initElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
|
|
||||
// // 记录此次配置，方便下次新增
|
|
||||
// window.localStorage.setItem('crfInputOptions', JSON.stringify(dataForm))
|
|
||||
} |
|
||||
|
|
||||
// 编辑控件状态后，触发处理逻辑
|
|
||||
const changeHandler = function(editor, elm, dataForm) { |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const win = editor.contentWindow |
|
||||
const id = editor.dom.getAttrib(elm, 'id') |
|
||||
// 二次渲染重置处理，【失败】，暂时保留BUG // elm.removeAttribute('lay-key');
|
|
||||
initElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
} |
|
||||
|
|
||||
const initElm = function(doc, win, id, type) { |
|
||||
if (type === 'date' || type === 'datetime' || type === 'time') { |
|
||||
win.laydate.render({ |
|
||||
elem: '#' + id, |
|
||||
type: type |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const register = function(editor) { |
|
||||
editor.addCommand(pluginOptions.cmdName, function() { |
|
||||
open(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const register$1 = function(editor) { |
|
||||
// 工具栏
|
|
||||
editor.ui.registry.addButton(pluginOptions.name, { |
|
||||
icon: 'input', |
|
||||
title: '输入框', |
|
||||
tooltip: '输入框', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
}, |
|
||||
onSetup: function(buttonApi) { |
|
||||
} |
|
||||
}) |
|
||||
// 菜单栏
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.name, { |
|
||||
icon: 'duplicate-row', |
|
||||
text: '属性', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// 菜单栏（编辑）
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.editName, { |
|
||||
icon: 'duplicate-row', |
|
||||
text: '编辑', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
editor.ui.registry.addContextMenu(pluginOptions.name, { |
|
||||
update: function(element) { |
|
||||
return isPlugin(element, pluginOptions.className) ? [pluginOptions.editName] : [] |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
function Plugin() { |
|
||||
global.add(pluginOptions.name, function(editor) { |
|
||||
setup(editor) |
|
||||
register(editor) |
|
||||
register$1(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
Plugin() |
|
||||
}()) |
|
||||
@ -1,7 +0,0 @@ |
|||||
// Exports the "preview" plugin for usage with module loaders
|
|
||||
// Usage:
|
|
||||
// CommonJS:
|
|
||||
// require('tinymce/plugins/preview')
|
|
||||
// ES2015:
|
|
||||
// import 'tinymce/plugins/preview'
|
|
||||
require('./plugin.js') |
|
||||
@ -1,143 +0,0 @@ |
|||||
/* eslint-disable no-undef */ |
|
||||
/** |
|
||||
* Copyright (c) Tiny Technologies, Inc. All rights reserved. |
|
||||
* Licensed under the LGPL or a commercial license. |
|
||||
* For LGPL see License.txt in the project root for license information. |
|
||||
* For commercial licenses see https://www.tiny.cloud/
|
|
||||
* |
|
||||
* Version: 5.7.0 (2021-02-10) |
|
||||
*/ |
|
||||
|
|
||||
(function() { |
|
||||
'use strict' |
|
||||
|
|
||||
var global = tinymce.util.Tools.resolve('tinymce.PluginManager') |
|
||||
|
|
||||
var global$1 = tinymce.util.Tools.resolve('tinymce.Env') |
|
||||
|
|
||||
var global$2 = tinymce.util.Tools.resolve('tinymce.util.Tools') |
|
||||
|
|
||||
var getContentStyle = function(editor) { |
|
||||
return editor.getParam('content_style', '', 'string') |
|
||||
} |
|
||||
var shouldUseContentCssCors = function(editor) { |
|
||||
return editor.getParam('content_css_cors', false, 'boolean') |
|
||||
} |
|
||||
var getBodyClassByHash = function(editor) { |
|
||||
var bodyClass = editor.getParam('body_class', '', 'hash') |
|
||||
return bodyClass[editor.id] || '' |
|
||||
} |
|
||||
var getBodyClass = function(editor) { |
|
||||
var bodyClass = editor.getParam('body_class', '', 'string') |
|
||||
if (bodyClass.indexOf('=') === -1) { |
|
||||
return bodyClass |
|
||||
} else { |
|
||||
return getBodyClassByHash(editor) |
|
||||
} |
|
||||
} |
|
||||
var getBodyIdByHash = function(editor) { |
|
||||
var bodyId = editor.getParam('body_id', '', 'hash') |
|
||||
return bodyId[editor.id] || bodyId |
|
||||
} |
|
||||
var getBodyId = function(editor) { |
|
||||
var bodyId = editor.getParam('body_id', 'tinymce', 'string') |
|
||||
if (bodyId.indexOf('=') === -1) { |
|
||||
return bodyId |
|
||||
} else { |
|
||||
return getBodyIdByHash(editor) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
var getPreviewHtml = function(editor) { |
|
||||
console.log(editor) |
|
||||
var headHtml = '' |
|
||||
var encode = editor.dom.encode |
|
||||
var contentStyle = getContentStyle(editor) |
|
||||
headHtml += '<base href="' + encode(editor.documentBaseURI.getURI()) + '">' |
|
||||
var cors = shouldUseContentCssCors(editor) ? ' crossorigin="anonymous"' : '' |
|
||||
global$2.each(editor.contentCSS, function(url) { |
|
||||
headHtml += '<link type="text/css" rel="stylesheet" href="' + encode(editor.documentBaseURI.toAbsolute(url)) + '"' + cors + '>' |
|
||||
}) |
|
||||
if (contentStyle) { |
|
||||
headHtml += '<style type="text/css">' + contentStyle + '</style>' |
|
||||
} |
|
||||
|
|
||||
// ----------------------------------
|
|
||||
global$2.each(editor.hmPluginCss, function(url) { |
|
||||
headHtml += `<link type="text/css" rel="stylesheet" href="${encode(editor.documentBaseURI.toAbsolute(url))}" ${cors}/>` |
|
||||
}) |
|
||||
|
|
||||
global$2.each(editor.hmBaseScripts, function(src) { |
|
||||
headHtml += `<script src="${encode(editor.documentBaseURI.toAbsolute(src))}" ${cors}></script>` |
|
||||
}) |
|
||||
|
|
||||
global$2.each(editor.hmPluginScript, function(src) { |
|
||||
headHtml += `<script src="${encode(editor.documentBaseURI.toAbsolute(src))}" ${cors}></script>` |
|
||||
}) |
|
||||
|
|
||||
var bodyId = getBodyId(editor) |
|
||||
var bodyClass = getBodyClass(editor) |
|
||||
var isMetaKeyPressed = global$1.mac ? 'e.metaKey' : 'e.ctrlKey && !e.altKey' |
|
||||
var preventClicksOnLinksScript = '<script>' + 'document.addEventListener && document.addEventListener("click", function(e) {' + 'for (var elm = e.target; elm; elm = elm.parentNode) {' + 'if (elm.nodeName === "A" && !(' + isMetaKeyPressed + ')) {' + 'e.preventDefault();' + '}' + '}' + '}, false);' + '</script> ' |
|
||||
var directionality = editor.getBody().dir |
|
||||
var dirAttr = directionality ? ' dir="' + encode(directionality) + '"' : '' |
|
||||
var previewHtml = '<!DOCTYPE html>' + '<html>' + '<head>' + headHtml + '</head>' + '<body id="' + encode(bodyId) + '" class="mce-content-body ' + encode(bodyClass) + '"' + dirAttr + '>' + editor.getContent() + preventClicksOnLinksScript + '</body>' + '</html>' |
|
||||
return previewHtml |
|
||||
} |
|
||||
|
|
||||
var open = function(editor) { |
|
||||
var content = getPreviewHtml(editor) |
|
||||
var dataApi = editor.windowManager.open({ |
|
||||
title: 'Preview', |
|
||||
size: 'large', |
|
||||
body: { |
|
||||
type: 'panel', |
|
||||
items: [{ |
|
||||
name: 'preview', |
|
||||
type: 'iframe', |
|
||||
sandboxed: true |
|
||||
}] |
|
||||
}, |
|
||||
buttons: [{ |
|
||||
type: 'cancel', |
|
||||
name: 'close', |
|
||||
text: 'Close', |
|
||||
primary: true |
|
||||
}], |
|
||||
initialData: { preview: content } |
|
||||
}) |
|
||||
dataApi.focus('close') |
|
||||
} |
|
||||
|
|
||||
var register = function(editor) { |
|
||||
editor.addCommand('cmdhmpreview', function() { |
|
||||
open(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
var register$1 = function(editor) { |
|
||||
editor.ui.registry.addButton('hmpreview', { |
|
||||
icon: 'preview', |
|
||||
tooltip: 'Preview', |
|
||||
onAction: function() { |
|
||||
return editor.execCommand('cmdhmpreview') |
|
||||
} |
|
||||
}) |
|
||||
editor.ui.registry.addMenuItem('hmpreview', { |
|
||||
icon: 'preview', |
|
||||
text: 'Preview', |
|
||||
onAction: function() { |
|
||||
return editor.execCommand('cmdhmpreview') |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
function Plugin() { |
|
||||
global.add('hmpreview', function(editor) { |
|
||||
register(editor) |
|
||||
register$1(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
Plugin() |
|
||||
}()) |
|
||||
@ -1,7 +0,0 @@ |
|||||
// Exports the "anchor" plugin for usage with module loaders
|
|
||||
// Usage:
|
|
||||
// CommonJS:
|
|
||||
// require('tinymce/plugins/anchor')
|
|
||||
// ES2015:
|
|
||||
// import 'tinymce/plugins/anchor'
|
|
||||
require('./plugin.js') |
|
||||
@ -1,258 +0,0 @@ |
|||||
|
|
||||
import { |
|
||||
loadJS_ifrEditArea, |
|
||||
loadCSS_ifrEditArea, |
|
||||
isPlugin, |
|
||||
// updateElm,
|
|
||||
updateAttrib, |
|
||||
getIdByClassName, |
|
||||
__assign, |
|
||||
isElm, |
|
||||
getListbox_Field |
|
||||
// dataFormToElmPartStr,
|
|
||||
// elmToDataForm,
|
|
||||
// hasElm
|
|
||||
} |
|
||||
from '../hm_utils/index' |
|
||||
|
|
||||
(function() { |
|
||||
'use strict' |
|
||||
|
|
||||
const pluginOptions = { |
|
||||
jsArr: [], |
|
||||
cssArr: [], |
|
||||
name: 'hmradio', |
|
||||
className: 'hmradio', // 判断依据，建议和name值一致
|
|
||||
cmdName: 'cmdhmradio', |
|
||||
editName: 'hmradio_edit', |
|
||||
dataForm: { |
|
||||
'data-hm_id': '', |
|
||||
'data-hm_type': 'radio', |
|
||||
'data-hm_bd_id': '', |
|
||||
'label': '', |
|
||||
'value': '' |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const global = tinymce.util.Tools.resolve('tinymce.PluginManager') |
|
||||
|
|
||||
// 初始设置
|
|
||||
const setup = function(editor) { |
|
||||
// 编辑器初始化后执行
|
|
||||
editor.on('init', function() { |
|
||||
loadJS_ifrEditArea(editor, pluginOptions.jsArr) |
|
||||
loadCSS_ifrEditArea(editor, pluginOptions.cssArr) |
|
||||
}) |
|
||||
// 右键菜单，选定目标
|
|
||||
editor.on('contextmenu', function(evt) { |
|
||||
const elm = evt.target |
|
||||
editor.selection.select(elm) |
|
||||
}, true) |
|
||||
} |
|
||||
|
|
||||
const open = function(editor) { |
|
||||
editor.windowManager.open({ |
|
||||
title: '新增', |
|
||||
size: 'normal', // 'normal', 'medium' or 'large'
|
|
||||
body: { |
|
||||
type: 'panel', |
|
||||
items: [ |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'data-hm_id', |
|
||||
label: '组号', |
|
||||
placeholder: '分组编号' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'label', |
|
||||
label: '选项名' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'value', |
|
||||
label: '选项值' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'listbox', |
|
||||
name: 'data-hm_bd_id', |
|
||||
label: '绑定字段', |
|
||||
items: getListbox_Field() |
|
||||
} |
|
||||
] |
|
||||
|
|
||||
}, |
|
||||
initialData: elmToDataForm(editor, pluginOptions.dataForm, pluginOptions.className), |
|
||||
buttons: [ |
|
||||
{ |
|
||||
type: 'cancel', |
|
||||
name: 'cancel', |
|
||||
text: '取消' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'submit', |
|
||||
name: 'save', |
|
||||
text: '确定', |
|
||||
primary: true |
|
||||
} |
|
||||
], |
|
||||
onSubmit: function(api) { |
|
||||
const dataForm = api.getData() |
|
||||
dataForm['data-hm_type'] = pluginOptions.dataForm['data-hm_type'] |
|
||||
const hmType = dataForm['data-hm_type'] |
|
||||
const className = pluginOptions.className |
|
||||
const elm = editor.selection.getNode() |
|
||||
|
|
||||
let elm_input, elm_label |
|
||||
if (elm.className.indexOf(className + '-label') >= 0) { |
|
||||
console.log(elm) |
|
||||
elm_input = isElm(elm.previousElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined |
|
||||
elm_label = elm |
|
||||
} else if (elm.className.indexOf(className) >= 0 && isElm(elm, 'data-hm_type', hmType)) { |
|
||||
// console.log(elm)
|
|
||||
elm_input = elm |
|
||||
elm_label = isElm(elm, 'data-hm_type', hmType) ? elm.nextElementSibling : undefined |
|
||||
} |
|
||||
|
|
||||
if (elm && isPlugin(elm, className)) { |
|
||||
// 更新
|
|
||||
updateElm(editor, elm_input, elm_label, dataForm, changeHandler) |
|
||||
api.close() |
|
||||
console.log('更新') |
|
||||
} else { |
|
||||
console.log('插入', dataForm) |
|
||||
// 插入
|
|
||||
insertElm(editor, dataForm) |
|
||||
api.close() |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const elmToDataForm = function(editor, initDataForm, pluginClassName) { |
|
||||
const elm = editor.selection.getNode() |
|
||||
const dataForm = __assign({}, initDataForm) |
|
||||
// console.log(dataForm)
|
|
||||
const hmType = initDataForm['data-hm_type'] |
|
||||
if (isPlugin(elm, pluginClassName)) { |
|
||||
let elm_input, elm_label |
|
||||
if (elm.className.indexOf(pluginClassName + '-label') >= 0) { |
|
||||
// console.log(elm.previousElementSibling)
|
|
||||
// console.log(hmType)
|
|
||||
elm_input = isElm(elm.previousElementSibling, 'data-hm_type', hmType) ? elm.previousElementSibling : undefined |
|
||||
elm_label = elm |
|
||||
// console.log(elm_input)
|
|
||||
// console.log(elm_label)
|
|
||||
} else if (elm.className.indexOf(pluginClassName) >= 0 && isElm(elm, 'data-hm_type', hmType)) { |
|
||||
// console.log(elm)
|
|
||||
// console.log(elm.nextElementSibling)
|
|
||||
// console.log(hmType)
|
|
||||
elm_input = elm |
|
||||
elm_label = isElm(elm, 'data-hm_type', hmType) ? elm.nextElementSibling : undefined |
|
||||
} |
|
||||
dataForm['data-hm_id'] = elm_input.getAttribute('data-hm_id') |
|
||||
dataForm['label'] = elm_label.innerText |
|
||||
dataForm['value'] = elm_input.getAttribute('value') |
|
||||
dataForm['data-hm_bd_id'] = elm_input.getAttribute('data-hm_bd_id') ? elm_input.getAttribute('data-hm_bd_id') : '' |
|
||||
} |
|
||||
return dataForm |
|
||||
} |
|
||||
|
|
||||
const insertElm = function(editor, dataForm) { |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const className = pluginOptions.className |
|
||||
const id = getIdByClassName(doc, className) |
|
||||
const name = dataForm['data-hm_id'] |
|
||||
const hmType = dataForm['data-hm_type'] |
|
||||
const hmBdDID = dataForm['data-hm_bd_id'] |
|
||||
const label = dataForm['label'] |
|
||||
const value = dataForm['value'] || label |
|
||||
const win = editor.contentWindow |
|
||||
const domStr_input = `<input type="radio" id="${name}-${value}" class="${className}" name="${name}" value="${value}" data-hm_id="${name}" data-hm_type="${hmType}" data-hm_bd_id="${hmBdDID}"/>` |
|
||||
const domStr_label = `<label class="${className}-label" for="${name}-${value}">${label}</label>` |
|
||||
editor.insertContent(domStr_input + domStr_label) |
|
||||
// 渲染控件
|
|
||||
renderElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
} |
|
||||
|
|
||||
const updateElm = function(editor, elm_input, elm_label, dataForm, changeHandler) { |
|
||||
const name = dataForm['data-hm_id'] |
|
||||
const label = dataForm['label'] |
|
||||
const value = dataForm['value'] || label |
|
||||
const BDID = dataForm['data-hm_bd_id'] |
|
||||
if (elm_input) { |
|
||||
updateAttrib(elm_input, 'name', name) |
|
||||
updateAttrib(elm_input, 'value', value) |
|
||||
updateAttrib(elm_input, 'data-hm_id', name) |
|
||||
updateAttrib(elm_input, 'data-hm_bd_id', BDID) |
|
||||
} |
|
||||
if (elm_label) { |
|
||||
elm_label.innerText = label |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 编辑控件状态后，触发处理逻辑
|
|
||||
const changeHandler = function(editor, elm, dataForm) { |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const win = editor.contentWindow |
|
||||
const id = editor.dom.getAttrib(elm, 'id') |
|
||||
|
|
||||
renderElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
} |
|
||||
|
|
||||
const renderElm = function(doc, win, id, type) { |
|
||||
} |
|
||||
|
|
||||
const register = function(editor) { |
|
||||
editor.addCommand(pluginOptions.cmdName, function() { |
|
||||
open(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const register$1 = function(editor) { |
|
||||
// 工具栏
|
|
||||
editor.ui.registry.addButton(pluginOptions.name, { |
|
||||
icon: 'radio', |
|
||||
title: '单选框', |
|
||||
tooltip: '单选框', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
}, |
|
||||
onSetup: function(buttonApi) { |
|
||||
} |
|
||||
}) |
|
||||
// 菜单栏
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.name, { |
|
||||
icon: 'radio', |
|
||||
text: '单选框', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// 菜单栏（编辑）
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.editName, { |
|
||||
icon: 'radio', |
|
||||
text: '编辑', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
editor.ui.registry.addContextMenu(pluginOptions.name, { |
|
||||
update: function(elm) { |
|
||||
return isPlugin(elm, pluginOptions.className) ? [pluginOptions.editName] : [] |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
function Plugin() { |
|
||||
global.add(pluginOptions.name, function(editor) { |
|
||||
setup(editor) |
|
||||
register(editor) |
|
||||
register$1(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
Plugin() |
|
||||
}()) |
|
||||
@ -1,7 +0,0 @@ |
|||||
// Exports the "anchor" plugin for usage with module loaders
|
|
||||
// Usage:
|
|
||||
// CommonJS:
|
|
||||
// require('tinymce/plugins/anchor')
|
|
||||
// ES2015:
|
|
||||
// import 'tinymce/plugins/anchor'
|
|
||||
require('./plugin.js') |
|
||||
@ -1,272 +0,0 @@ |
|||||
/* eslint-disable no-useless-escape */ |
|
||||
/* eslint-disable no-undef */ |
|
||||
/* eslint-disable no-unused-vars */ |
|
||||
import { |
|
||||
loadJS_ifrEditArea, |
|
||||
loadCSS_ifrEditArea, |
|
||||
isPlugin, |
|
||||
updateElm, |
|
||||
dataFormToElmPartStr, |
|
||||
elmToDataForm, |
|
||||
getIdByClassName, |
|
||||
getListbox_Field, |
|
||||
hasElm, |
|
||||
__assign |
|
||||
} |
|
||||
from '../hm_utils/index' |
|
||||
|
|
||||
(function() { |
|
||||
'use strict' |
|
||||
|
|
||||
const pluginOptions = { |
|
||||
jsArr: ['/static/js/laydate/laydate.js'], |
|
||||
cssArr: [], // '/static/css/hmcrf.css'
|
|
||||
name: 'hmselect', |
|
||||
className: 'hmselect', // 判断依据，建议和name值一致
|
|
||||
cmdName: 'cmdhmselect', |
|
||||
editName: 'hmselect_edit', |
|
||||
dataForm: { |
|
||||
'data-hm_id': '', |
|
||||
'data-hm_type': '', |
|
||||
'data-hm_required': 'false', |
|
||||
'data-hm_bd_eye_type': '', |
|
||||
'data-hm_bd_id': '', |
|
||||
'placeholder': '', |
|
||||
'title': '', |
|
||||
'class.border': '', |
|
||||
'style.width': '120', |
|
||||
'style.height': '18', |
|
||||
'style.text-align': 'center', |
|
||||
'style.background-color': '' |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const global = tinymce.util.Tools.resolve('tinymce.PluginManager') |
|
||||
|
|
||||
// 初始设置
|
|
||||
const setup = function(editor) { |
|
||||
// 编辑器初始化后执行
|
|
||||
editor.on('init', function() { |
|
||||
loadJS_ifrEditArea(editor, pluginOptions.jsArr) |
|
||||
loadCSS_ifrEditArea(editor, pluginOptions.cssArr) |
|
||||
}) |
|
||||
// 右键菜单，选定目标
|
|
||||
editor.on('contextmenu', function(evt) { |
|
||||
console.log(evt) |
|
||||
const target = evt.target |
|
||||
editor.selection.select(target) |
|
||||
}, true) |
|
||||
} |
|
||||
const dialogBody = function() { |
|
||||
return { |
|
||||
type: 'panel', |
|
||||
items: [ |
|
||||
{ |
|
||||
type: 'grid', |
|
||||
columns: 2, |
|
||||
items: [ |
|
||||
{ |
|
||||
type: 'select', |
|
||||
name: 'data-hm_id', |
|
||||
label: '编号 (ID)', |
|
||||
// other: 't1',
|
|
||||
placeholder: '唯一编号' |
|
||||
}, |
|
||||
// --------
|
|
||||
{ |
|
||||
type: 'select', |
|
||||
name: 'style.width', |
|
||||
label: '宽度 (px或%)' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'select', |
|
||||
name: 'style.height', |
|
||||
label: '高度 (px或%)' |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
} |
|
||||
const open = function(editor) { |
|
||||
editor.windowManager.open({ |
|
||||
title: '新增', |
|
||||
size: 'medium', // 'normal', 'medium' or 'large'
|
|
||||
// height:500,
|
|
||||
body: dialogBody(), |
|
||||
initialData: elmToDataForm(editor, pluginOptions.dataForm, pluginOptions.className, init), |
|
||||
buttons: [ |
|
||||
{ |
|
||||
type: 'cancel', |
|
||||
name: 'cancel', |
|
||||
text: '取消' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'submit', |
|
||||
name: 'save', |
|
||||
text: '确定', |
|
||||
primary: true |
|
||||
} |
|
||||
|
|
||||
], |
|
||||
onChange: function(api, details) { |
|
||||
// const dataForm = api.getData()
|
|
||||
// console.log(details, dataForm[details.name])
|
|
||||
}, |
|
||||
onSubmit: function(api) { |
|
||||
const dataForm = api.getData() |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const className = pluginOptions.className |
|
||||
const hmType = dataForm['data-hm_type'] |
|
||||
|
|
||||
const elm = editor.selection.getNode() |
|
||||
if (dataForm['data-hm_id'].length === 0) { |
|
||||
tinymce.activeEditor.windowManager.alert('请填写编号') |
|
||||
} else { |
|
||||
if (elm && isPlugin(elm, className)) { |
|
||||
const elmHmType = editor.dom.getAttrib(elm, 'data-hm_type') |
|
||||
if (elmHmType !== hmType) { |
|
||||
// 先插后删
|
|
||||
insertElm(editor, dataForm) |
|
||||
elm.remove() |
|
||||
} else { |
|
||||
// 更新
|
|
||||
updateElm(editor, elm, className, dataForm, changeHandler) |
|
||||
} |
|
||||
|
|
||||
api.close() |
|
||||
} else { |
|
||||
// 判读是否存在相同编号ID的控件
|
|
||||
if (hasElm(doc, 'data-hm_id', dataForm['data-hm_id'])) { |
|
||||
tinymce.activeEditor.windowManager.confirm('已存在，请使用其他编号？', function(s) { |
|
||||
// tinymce.activeEditor.windowManager.alert("Ok");
|
|
||||
return |
|
||||
}) |
|
||||
} else { |
|
||||
// 插入
|
|
||||
insertElm(editor, dataForm) |
|
||||
api.close() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
const init = function(editor, dataForm) { |
|
||||
// const elm = editor.selection.getNode()
|
|
||||
// const hmType = editor.dom.getAttrib(elm, 'data-hm_type')
|
|
||||
// if (hmType === 'number' || hmType === 'textarea') {
|
|
||||
// dataForm['data-hm_type']
|
|
||||
// }
|
|
||||
|
|
||||
// const tempDataForm = JSON.parse(window.localStorage.getItem('crfInputOptions'))
|
|
||||
// if (tempDataForm) {
|
|
||||
// dataForm = __assign({}, dataForm, tempDataForm)
|
|
||||
// return dataForm
|
|
||||
// }
|
|
||||
} |
|
||||
|
|
||||
const insertElm = function(editor, dataForm) { |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const className = pluginOptions.className |
|
||||
const id = getIdByClassName(doc, className) |
|
||||
const name = dataForm['data-hm_id'] |
|
||||
const win = editor.contentWindow |
|
||||
|
|
||||
let domStr = '' |
|
||||
switch (dataForm['data-hm_type']) { |
|
||||
default: |
|
||||
domStr = ` |
|
||||
<select type="text" name="${name}" id="${name}" autocomplete="off" value="" ${dataFormToElmPartStr(dataForm, className)}> |
|
||||
<option>18岁以下</option> |
|
||||
<option>18岁以下</option> |
|
||||
</select> |
|
||||
` |
|
||||
break |
|
||||
} |
|
||||
// console.log(domStr)
|
|
||||
|
|
||||
editor.insertContent(domStr) |
|
||||
|
|
||||
// const ifr = document.getElementsByClassName('tox-edit-area__iframe')[0]
|
|
||||
// 【ifr.contentDocument = ifr.contentWindow.document】
|
|
||||
// 【editor.contentDocument = editor.contentWindow.document】
|
|
||||
|
|
||||
// 渲染控件
|
|
||||
initElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
|
|
||||
// // 记录此次配置，方便下次新增
|
|
||||
// window.localStorage.setItem('crfInputOptions', JSON.stringify(dataForm))
|
|
||||
} |
|
||||
|
|
||||
// 编辑控件状态后，触发处理逻辑
|
|
||||
const changeHandler = function(editor, elm, dataForm) { |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const win = editor.contentWindow |
|
||||
const id = editor.dom.getAttrib(elm, 'id') |
|
||||
// 二次渲染重置处理，【失败】，暂时保留BUG // elm.removeAttribute('lay-key');
|
|
||||
initElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
} |
|
||||
|
|
||||
const initElm = function(doc, win, id, type) { |
|
||||
if (type === 'date' || type === 'datetime' || type === 'time') { |
|
||||
win.laydate.render({ |
|
||||
elem: '#' + id, |
|
||||
type: type |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const register = function(editor) { |
|
||||
editor.addCommand(pluginOptions.cmdName, function() { |
|
||||
open(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const register$1 = function(editor) { |
|
||||
// 工具栏
|
|
||||
editor.ui.registry.addButton(pluginOptions.name, { |
|
||||
icon: 'select', |
|
||||
title: '下拉框', |
|
||||
tooltip: '下拉框', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
}, |
|
||||
onSetup: function(buttonApi) { |
|
||||
} |
|
||||
}) |
|
||||
// 菜单栏
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.name, { |
|
||||
icon: 'select', |
|
||||
text: '属性', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// 菜单栏（编辑）
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.editName, { |
|
||||
icon: 'select', |
|
||||
text: '编辑', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
editor.ui.registry.addContextMenu(pluginOptions.name, { |
|
||||
update: function(element) { |
|
||||
return isPlugin(element, pluginOptions.className) ? [pluginOptions.editName] : [] |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
function Plugin() { |
|
||||
global.add(pluginOptions.name, function(editor) { |
|
||||
setup(editor) |
|
||||
register(editor) |
|
||||
register$1(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
Plugin() |
|
||||
}()) |
|
||||
@ -1,333 +0,0 @@ |
|||||
/* eslint-disable no-useless-escape */ |
|
||||
/* eslint-disable no-undef */ |
|
||||
/* eslint-disable no-unused-vars */ |
|
||||
import { create } from 'lodash' |
|
||||
import { |
|
||||
loadJS_ifrEditArea, |
|
||||
loadCSS_ifrEditArea, |
|
||||
isPlugin, |
|
||||
updateElm, |
|
||||
dataFormToElmPartStr, |
|
||||
elmToDataForm, |
|
||||
getIdByClassName, |
|
||||
getListbox_Field, |
|
||||
hasElm, |
|
||||
__assign |
|
||||
} |
|
||||
from '../hm_utils/index' |
|
||||
|
|
||||
(function() { |
|
||||
'use strict' |
|
||||
|
|
||||
const pluginOptions = { |
|
||||
jsArr: ['/static/js/laydate/laydate.js'], |
|
||||
cssArr: [], // '/static/css/hmcrf.css'
|
|
||||
name: 'hmselect', |
|
||||
className: 'hmselect', // 判断依据，建议和name值一致
|
|
||||
cmdName: 'cmdhmselect', |
|
||||
editName: 'hmselect_edit', |
|
||||
dataForm: { |
|
||||
'data-hm_id': '', |
|
||||
'data-hm_type': 'select', |
|
||||
'data-hm_required': 'false', |
|
||||
'data-hm_select': '', |
|
||||
'data-hm_select_value': '', |
|
||||
'data-hm_bd_eye_type': '', |
|
||||
'data-hm_bd_id': '', |
|
||||
'placeholder': '', |
|
||||
'title': '', |
|
||||
'class.border': '', |
|
||||
'style.width': '120', |
|
||||
'style.height': '18', |
|
||||
'style.text-align': 'center', |
|
||||
'style.background-color': '' |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const global = tinymce.util.Tools.resolve('tinymce.PluginManager') |
|
||||
|
|
||||
// 初始设置
|
|
||||
const setup = function(editor) { |
|
||||
// 编辑器初始化后执行
|
|
||||
editor.on('init', function() { |
|
||||
loadJS_ifrEditArea(editor, pluginOptions.jsArr) |
|
||||
loadCSS_ifrEditArea(editor, pluginOptions.cssArr) |
|
||||
}) |
|
||||
// 右键菜单，选定目标
|
|
||||
editor.on('contextmenu', function(evt) { |
|
||||
console.log(evt) |
|
||||
const target = evt.target |
|
||||
editor.selection.select(target) |
|
||||
}, true) |
|
||||
} |
|
||||
const dialogBody = function() { |
|
||||
return { |
|
||||
type: 'panel', |
|
||||
items: [ |
|
||||
{ |
|
||||
type: 'grid', |
|
||||
columns: 2, |
|
||||
items: [ |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'data-hm_id', |
|
||||
label: '编号 (ID)', |
|
||||
// other: 't1',
|
|
||||
placeholder: '唯一编号' |
|
||||
}, |
|
||||
// --------
|
|
||||
{ |
|
||||
type: 'listbox', |
|
||||
name: 'data-hm_bd_id', |
|
||||
label: '绑定字段', |
|
||||
items: getListbox_Field() |
|
||||
}, |
|
||||
// --------
|
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'style.width', |
|
||||
label: '宽度 (px或%)' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'style.height', |
|
||||
label: '高度 (px或%)' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'selectbox', |
|
||||
name: 'data-hm_required', |
|
||||
label: '必填', |
|
||||
size: 1, |
|
||||
items: [ |
|
||||
{ value: 'false', text: '否' }, |
|
||||
{ value: 'true', text: '是' } |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'data-hm_select', |
|
||||
label: '选项 (每一项使用“、”号分割)', |
|
||||
// other: 't1',
|
|
||||
placeholder: '例如：li、li、li' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'data-hm_select_value', |
|
||||
label: '默认值' |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
} |
|
||||
const open = function(editor) { |
|
||||
editor.windowManager.open({ |
|
||||
title: '新增', |
|
||||
size: 'medium', // 'normal', 'medium' or 'large'
|
|
||||
// height:500,
|
|
||||
body: dialogBody(), |
|
||||
initialData: elmToDataForm(editor, pluginOptions.dataForm, pluginOptions.className, init), |
|
||||
buttons: [ |
|
||||
{ |
|
||||
type: 'cancel', |
|
||||
name: 'cancel', |
|
||||
text: '取消' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'submit', |
|
||||
name: 'save', |
|
||||
text: '确定', |
|
||||
primary: true |
|
||||
} |
|
||||
|
|
||||
], |
|
||||
onChange: function(api, details) { |
|
||||
// const dataForm = api.getData()
|
|
||||
// console.log(details, dataForm[details.name])
|
|
||||
}, |
|
||||
onSubmit: function(api) { |
|
||||
const dataForm = api.getData() |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const hmID = dataForm['data-hm_id'] |
|
||||
doc.querySelector('#' + hmID) ? doc.querySelector('#' + hmID).remove() : '' |
|
||||
const className = pluginOptions.className |
|
||||
const hmType = dataForm['data-hm_type'] |
|
||||
// ----------动态设置下拉菜单参数
|
|
||||
const selectList = dataForm['data-hm_select'].split('、') |
|
||||
setTimeout(() => { |
|
||||
var selectlistDOM = doc.querySelector('#' + hmID) |
|
||||
console.log(selectlistDOM) |
|
||||
selectList.forEach((item, index) => { |
|
||||
var option = doc.createElement('option') |
|
||||
option.innerHTML = item |
|
||||
selectlistDOM.appendChild(option) |
|
||||
if (selectList.length - 1 === index) { |
|
||||
var childs = Array.from(selectlistDOM.children) |
|
||||
for (var i = 0; i < childs.length; i++) { |
|
||||
selectlistDOM.removeChild(childs[i]) |
|
||||
console.log(i) |
|
||||
console.log(childs.length) |
|
||||
if (i === childs.length - 1) { |
|
||||
selectList.forEach(item => { |
|
||||
var option = doc.createElement('option') |
|
||||
option.innerHTML = item |
|
||||
selectlistDOM.appendChild(option) |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
}, 100) |
|
||||
// ----------动态设置下拉菜单参数
|
|
||||
const elm = editor.selection.getNode() |
|
||||
if (dataForm['data-hm_id'].length === 0) { |
|
||||
tinymce.activeEditor.windowManager.alert('请填写编号') |
|
||||
} else { |
|
||||
if (elm && isPlugin(elm, className)) { |
|
||||
const elmHmType = editor.dom.getAttrib(elm, 'data-hm_type') |
|
||||
if (elmHmType !== hmType) { |
|
||||
// 先插后删
|
|
||||
insertElm(editor, dataForm) |
|
||||
elm.remove() |
|
||||
} else { |
|
||||
// 更新
|
|
||||
updateElm(editor, elm, className, dataForm, changeHandler) |
|
||||
} |
|
||||
|
|
||||
api.close() |
|
||||
} else { |
|
||||
// 判读是否存在相同编号ID的控件
|
|
||||
if (hasElm(doc, 'data-hm_id', dataForm['data-hm_id'])) { |
|
||||
tinymce.activeEditor.windowManager.confirm('已存在，请使用其他编号？', function(s) { |
|
||||
// tinymce.activeEditor.windowManager.alert("Ok");
|
|
||||
return |
|
||||
}) |
|
||||
} else { |
|
||||
// 插入
|
|
||||
insertElm(editor, dataForm) |
|
||||
api.close() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
const init = function(editor, dataForm) { |
|
||||
// const elm = editor.selection.getNode()
|
|
||||
// const hmType = editor.dom.getAttrib(elm, 'data-hm_type')
|
|
||||
// if (hmType === 'number' || hmType === 'textarea') {
|
|
||||
// dataForm['data-hm_type']
|
|
||||
// }
|
|
||||
|
|
||||
// const tempDataForm = JSON.parse(window.localStorage.getItem('crfInputOptions'))
|
|
||||
// if (tempDataForm) {
|
|
||||
// dataForm = __assign({}, dataForm, tempDataForm)
|
|
||||
// return dataForm
|
|
||||
// }
|
|
||||
} |
|
||||
|
|
||||
const insertElm = function(editor, dataForm) { |
|
||||
console.log(dataForm) |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const className = pluginOptions.className |
|
||||
const id = getIdByClassName(doc, className) |
|
||||
const name = dataForm['data-hm_id'] |
|
||||
const defaultValue = dataForm['data-hm_select_value'] |
|
||||
const win = editor.contentWindow |
|
||||
|
|
||||
let domStr = '' |
|
||||
switch (dataForm['data-hm_type']) { |
|
||||
default: |
|
||||
domStr = |
|
||||
` |
|
||||
<input id="${name}-input" class="select-input" type="text" autocomplete='off' list="${name}" style="padding: 0.5em; border-radius: 5px" value="" placeholder="请选择" ${dataFormToElmPartStr(dataForm, className)} /> |
|
||||
<datalist id="${name}"></datalist> |
|
||||
` |
|
||||
break |
|
||||
} |
|
||||
// console.log(domStr)
|
|
||||
|
|
||||
editor.insertContent(domStr) |
|
||||
|
|
||||
// const ifr = document.getElementsByClassName('tox-edit-area__iframe')[0]
|
|
||||
// 【ifr.contentDocument = ifr.contentWindow.document】
|
|
||||
// 【editor.contentDocument = editor.contentWindow.document】
|
|
||||
|
|
||||
// 渲染控件
|
|
||||
initElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
|
|
||||
// // 记录此次配置，方便下次新增
|
|
||||
// window.localStorage.setItem('crfInputOptions', JSON.stringify(dataForm))
|
|
||||
} |
|
||||
|
|
||||
// 编辑控件状态后，触发处理逻辑
|
|
||||
const changeHandler = function(editor, elm, dataForm) { |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const win = editor.contentWindow |
|
||||
const id = editor.dom.getAttrib(elm, 'id') |
|
||||
// 二次渲染重置处理，【失败】，暂时保留BUG // elm.removeAttribute('lay-key');
|
|
||||
initElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
} |
|
||||
|
|
||||
const initElm = function(doc, win, id, type) { |
|
||||
if (type === 'date' || type === 'datetime' || type === 'time') { |
|
||||
win.laydate.render({ |
|
||||
elem: '#' + id, |
|
||||
type: type |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const register = function(editor) { |
|
||||
editor.addCommand(pluginOptions.cmdName, function() { |
|
||||
open(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const register$1 = function(editor) { |
|
||||
// 工具栏
|
|
||||
editor.ui.registry.addButton(pluginOptions.name, { |
|
||||
icon: 'select', |
|
||||
title: '下拉单选', |
|
||||
tooltip: '下拉单选', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
}, |
|
||||
onSetup: function(buttonApi) { |
|
||||
} |
|
||||
}) |
|
||||
// 菜单栏
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.name, { |
|
||||
icon: 'select', |
|
||||
text: '属性', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// 菜单栏（编辑）
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.editName, { |
|
||||
icon: 'select', |
|
||||
text: '编辑', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
editor.ui.registry.addContextMenu(pluginOptions.name, { |
|
||||
update: function(element) { |
|
||||
return isPlugin(element, pluginOptions.className) ? [pluginOptions.editName] : [] |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
function Plugin() { |
|
||||
global.add(pluginOptions.name, function(editor) { |
|
||||
setup(editor) |
|
||||
register(editor) |
|
||||
register$1(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
Plugin() |
|
||||
}()) |
|
||||
@ -1,7 +0,0 @@ |
|||||
// Exports the "anchor" plugin for usage with module loaders
|
|
||||
// Usage:
|
|
||||
// CommonJS:
|
|
||||
// require('tinymce/plugins/anchor')
|
|
||||
// ES2015:
|
|
||||
// import 'tinymce/plugins/anchor'
|
|
||||
require('./plugin.js') |
|
||||
@ -1,322 +0,0 @@ |
|||||
/* eslint-disable no-useless-escape */ |
|
||||
/* eslint-disable no-undef */ |
|
||||
/* eslint-disable no-unused-vars */ |
|
||||
import { create } from 'lodash' |
|
||||
import http from '@/page-subspecialty/utils/request' |
|
||||
import { |
|
||||
loadJS_ifrEditArea, |
|
||||
loadCSS_ifrEditArea, |
|
||||
isPlugin, |
|
||||
updateElm, |
|
||||
dataFormToElmPartStr, |
|
||||
elmToDataForm, |
|
||||
getIdByClassName, |
|
||||
getListbox_Field, |
|
||||
hasElm, |
|
||||
__assign |
|
||||
} |
|
||||
from '../hm_utils/index' |
|
||||
|
|
||||
(function() { |
|
||||
'use strict' |
|
||||
|
|
||||
const pluginOptions = { |
|
||||
jsArr: ['/static/js/laydate/laydate.js'], |
|
||||
cssArr: [], // '/static/css/hmcrf.css'
|
|
||||
name: 'hmselectmultiple', |
|
||||
className: 'hmselectmultiple', // 判断依据，建议和name值一致
|
|
||||
cmdName: 'cmdhmselectmultiple', |
|
||||
editName: 'hmselectmultiple_edit', |
|
||||
dataForm: { |
|
||||
'data-hm_id': '', |
|
||||
'data-hm_type': 'select', |
|
||||
'data-hm_required': 'false', |
|
||||
'data-hm_select': '', |
|
||||
'data-hm_select_value': '', |
|
||||
'data-hm_bd_eye_type': '', |
|
||||
'data-hm_bd_id': '', |
|
||||
'placeholder': '', |
|
||||
'title': '', |
|
||||
'class.border': '', |
|
||||
'style.width': '120', |
|
||||
'style.height': '18', |
|
||||
'style.text-align': 'center', |
|
||||
'style.background-color': '' |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const global = tinymce.util.Tools.resolve('tinymce.PluginManager') |
|
||||
|
|
||||
// 初始设置
|
|
||||
const setup = function(editor) { |
|
||||
// 编辑器初始化后执行
|
|
||||
editor.on('init', function() { |
|
||||
loadJS_ifrEditArea(editor, pluginOptions.jsArr) |
|
||||
loadCSS_ifrEditArea(editor, pluginOptions.cssArr) |
|
||||
}) |
|
||||
// 右键菜单，选定目标
|
|
||||
editor.on('contextmenu', function(evt) { |
|
||||
console.log(evt) |
|
||||
const target = evt.target |
|
||||
editor.selection.select(target) |
|
||||
}, true) |
|
||||
} |
|
||||
const dialogBody = function() { |
|
||||
return { |
|
||||
type: 'panel', |
|
||||
items: [ |
|
||||
{ |
|
||||
type: 'grid', |
|
||||
columns: 2, |
|
||||
items: [ |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'data-hm_id', |
|
||||
label: '编号 (ID:operationProjectOD/OS、surgicalSiteOD/OS)', |
|
||||
// other: 't1',
|
|
||||
placeholder: '唯一编号' |
|
||||
}, |
|
||||
// --------
|
|
||||
{ |
|
||||
type: 'listbox', |
|
||||
name: 'data-hm_bd_id', |
|
||||
label: '绑定字段', |
|
||||
items: getListbox_Field() |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'style.height', |
|
||||
label: '高度 (px或%)' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'selectbox', |
|
||||
name: 'data-hm_required', |
|
||||
label: '必填', |
|
||||
size: 1, |
|
||||
items: [ |
|
||||
{ value: 'false', text: '否' }, |
|
||||
{ value: 'true', text: '是' } |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'data-hm_select', |
|
||||
label: '选项 (每一项使用“、”号分割)', |
|
||||
// other: 't1',
|
|
||||
placeholder: '例如：li、li、li' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'data-hm_select_value', |
|
||||
label: '默认值' |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
} |
|
||||
const open = function(editor) { |
|
||||
editor.windowManager.open({ |
|
||||
title: '新增', |
|
||||
size: 'medium', // 'normal', 'medium' or 'large'
|
|
||||
// height:500,
|
|
||||
body: dialogBody(), |
|
||||
initialData: elmToDataForm(editor, pluginOptions.dataForm, pluginOptions.className, init), |
|
||||
buttons: [ |
|
||||
{ |
|
||||
type: 'cancel', |
|
||||
name: 'cancel', |
|
||||
text: '取消' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'submit', |
|
||||
name: 'save', |
|
||||
text: '确定', |
|
||||
primary: true |
|
||||
} |
|
||||
|
|
||||
], |
|
||||
onChange: function(api, details) { |
|
||||
// const dataForm = api.getData()
|
|
||||
// console.log(details, dataForm[details.name])
|
|
||||
}, |
|
||||
onSubmit: function(api) { |
|
||||
const dataForm = api.getData() |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const hmID = dataForm['data-hm_id'] |
|
||||
console.log(hmID) |
|
||||
const className = pluginOptions.className |
|
||||
console.log(className) |
|
||||
const hmType = dataForm['data-hm_type'] |
|
||||
// ----------动态设置下拉菜单参数
|
|
||||
// http.get('/opera/patient/getOperaList').then(({ data: res }) => {
|
|
||||
// if (res.code === 0) {
|
|
||||
// var selectList = res.data
|
|
||||
// window.sessionStorage.setItem('selectList', JSON.stringify(selectList))
|
|
||||
// setTimeout(() => {
|
|
||||
// var selectlistDOM = doc.querySelector('.hmselectmultiple')
|
|
||||
// console.log(selectlistDOM)
|
|
||||
// selectList.forEach((item, index) => {
|
|
||||
// var option = doc.createElement('option')
|
|
||||
// option.innerHTML = item.operaName
|
|
||||
// option.value = item.operaId
|
|
||||
// selectlistDOM.appendChild(option)
|
|
||||
// })
|
|
||||
// }, 100)
|
|
||||
// }
|
|
||||
// }).catch(() => { })
|
|
||||
|
|
||||
// ---------------------------------------------
|
|
||||
const elm = editor.selection.getNode() |
|
||||
if (dataForm['data-hm_id'].length === 0) { |
|
||||
tinymce.activeEditor.windowManager.alert('请填写编号') |
|
||||
} else { |
|
||||
if (elm && isPlugin(elm, className)) { |
|
||||
const elmHmType = editor.dom.getAttrib(elm, 'data-hm_type') |
|
||||
if (elmHmType !== hmType) { |
|
||||
// 先插后删
|
|
||||
insertElm(editor, dataForm) |
|
||||
elm.remove() |
|
||||
} else { |
|
||||
// 更新
|
|
||||
updateElm(editor, elm, className, dataForm, changeHandler) |
|
||||
} |
|
||||
|
|
||||
api.close() |
|
||||
} else { |
|
||||
// 判读是否存在相同编号ID的控件
|
|
||||
if (hasElm(doc, 'data-hm_id', dataForm['data-hm_id'])) { |
|
||||
tinymce.activeEditor.windowManager.confirm('已存在，请使用其他编号？', function(s) { |
|
||||
// tinymce.activeEditor.windowManager.alert("Ok");
|
|
||||
return |
|
||||
}) |
|
||||
} else { |
|
||||
// 插入
|
|
||||
insertElm(editor, dataForm) |
|
||||
api.close() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
const init = function(editor, dataForm) { |
|
||||
// const elm = editor.selection.getNode()
|
|
||||
// const hmType = editor.dom.getAttrib(elm, 'data-hm_type')
|
|
||||
// if (hmType === 'number' || hmType === 'textarea') {
|
|
||||
// dataForm['data-hm_type']
|
|
||||
// }
|
|
||||
|
|
||||
// const tempDataForm = JSON.parse(window.localStorage.getItem('crfInputOptions'))
|
|
||||
// if (tempDataForm) {
|
|
||||
// dataForm = __assign({}, dataForm, tempDataForm)
|
|
||||
// return dataForm
|
|
||||
// }
|
|
||||
} |
|
||||
// orderScheduled
|
|
||||
const insertElm = function(editor, dataForm) { |
|
||||
console.log(dataForm) |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const className = pluginOptions.className |
|
||||
const id = getIdByClassName(doc, className) |
|
||||
const name = dataForm['data-hm_id'] |
|
||||
const defaultValue = dataForm['data-hm_select_value'] |
|
||||
const win = editor.contentWindow |
|
||||
// <option selected="selected" disabled="disabled" style="display: none" value="" />
|
|
||||
let domStr = '' |
|
||||
const customStyle = 'max-width:600px;' |
|
||||
switch (dataForm['data-hm_type']) { |
|
||||
default: |
|
||||
domStr = |
|
||||
`<select id="${name}-input" class="multipleSelect" ${dataFormToElmPartStr(dataForm, className, '', customStyle)}>
|
|
||||
|
|
||||
</select> |
|
||||
` |
|
||||
break |
|
||||
} |
|
||||
// console.log(domStr)
|
|
||||
|
|
||||
editor.insertContent(domStr) |
|
||||
|
|
||||
// const ifr = document.getElementsByClassName('tox-edit-area__iframe')[0]
|
|
||||
// 【ifr.contentDocument = ifr.contentWindow.document】
|
|
||||
// 【editor.contentDocument = editor.contentWindow.document】
|
|
||||
|
|
||||
// 渲染控件
|
|
||||
initElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
|
|
||||
// // 记录此次配置，方便下次新增
|
|
||||
// window.localStorage.setItem('crfInputOptions', JSON.stringify(dataForm))
|
|
||||
} |
|
||||
|
|
||||
// 编辑控件状态后，触发处理逻辑
|
|
||||
const changeHandler = function(editor, elm, dataForm) { |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const win = editor.contentWindow |
|
||||
const id = editor.dom.getAttrib(elm, 'id') |
|
||||
// 二次渲染重置处理，【失败】，暂时保留BUG // elm.removeAttribute('lay-key');
|
|
||||
initElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
} |
|
||||
|
|
||||
const initElm = function(doc, win, id, type) { |
|
||||
if (type === 'date' || type === 'datetime' || type === 'time') { |
|
||||
win.laydate.render({ |
|
||||
elem: '#' + id, |
|
||||
type: type |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const register = function(editor) { |
|
||||
editor.addCommand(pluginOptions.cmdName, function() { |
|
||||
open(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const register$1 = function(editor) { |
|
||||
// 工具栏 --名称
|
|
||||
editor.ui.registry.addButton(pluginOptions.name, { |
|
||||
icon: 'selectMultiple', |
|
||||
title: '下拉多选', |
|
||||
tooltip: '下拉多选', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
}, |
|
||||
onSetup: function(buttonApi) { |
|
||||
} |
|
||||
}) |
|
||||
// 菜单栏
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.name, { |
|
||||
icon: 'selectMultiple', |
|
||||
text: '属性', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// 菜单栏（编辑）
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.editName, { |
|
||||
icon: 'selectMultiple', |
|
||||
text: '编辑', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
editor.ui.registry.addContextMenu(pluginOptions.name, { |
|
||||
update: function(element) { |
|
||||
return isPlugin(element, pluginOptions.className) ? [pluginOptions.editName] : [] |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
function Plugin() { |
|
||||
global.add(pluginOptions.name, function(editor) { |
|
||||
setup(editor) |
|
||||
register(editor) |
|
||||
register$1(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
Plugin() |
|
||||
}()) |
|
||||
@ -1,327 +0,0 @@ |
|||||
/* eslint-disable no-useless-escape */ |
|
||||
/* eslint-disable no-undef */ |
|
||||
/* eslint-disable no-unused-vars */ |
|
||||
import { create } from 'lodash' |
|
||||
import http from '@/page-subspecialty/utils/request' |
|
||||
import { |
|
||||
loadJS_ifrEditArea, |
|
||||
loadCSS_ifrEditArea, |
|
||||
isPlugin, |
|
||||
updateElm, |
|
||||
dataFormToElmPartStr, |
|
||||
elmToDataForm, |
|
||||
getIdByClassName, |
|
||||
getListbox_Field, |
|
||||
hasElm, |
|
||||
__assign |
|
||||
} |
|
||||
from '../hm_utils/index' |
|
||||
|
|
||||
(function() { |
|
||||
'use strict' |
|
||||
|
|
||||
const pluginOptions = { |
|
||||
jsArr: ['/static/js/laydate/laydate.js'], |
|
||||
cssArr: [], // '/static/css/hmcrf.css'
|
|
||||
name: 'hmselectmultiple', |
|
||||
className: 'hmselectmultiple', // 判断依据，建议和name值一致
|
|
||||
cmdName: 'cmdhmselectmultiple', |
|
||||
editName: 'hmselectmultiple_edit', |
|
||||
dataForm: { |
|
||||
'data-hm_id': '', |
|
||||
'data-hm_type': 'select', |
|
||||
'data-hm_required': 'false', |
|
||||
'data-hm_select': '', |
|
||||
'data-hm_select_value': '', |
|
||||
'data-hm_bd_eye_type': '', |
|
||||
'data-hm_bd_id': '', |
|
||||
'placeholder': '', |
|
||||
'title': '', |
|
||||
'class.border': '', |
|
||||
'style.width': '120', |
|
||||
'style.height': '18', |
|
||||
'style.text-align': 'center', |
|
||||
'style.background-color': '' |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const global = tinymce.util.Tools.resolve('tinymce.PluginManager') |
|
||||
|
|
||||
// 初始设置
|
|
||||
const setup = function(editor) { |
|
||||
// 编辑器初始化后执行
|
|
||||
editor.on('init', function() { |
|
||||
loadJS_ifrEditArea(editor, pluginOptions.jsArr) |
|
||||
loadCSS_ifrEditArea(editor, pluginOptions.cssArr) |
|
||||
}) |
|
||||
// 右键菜单，选定目标
|
|
||||
editor.on('contextmenu', function(evt) { |
|
||||
console.log(evt) |
|
||||
const target = evt.target |
|
||||
editor.selection.select(target) |
|
||||
}, true) |
|
||||
} |
|
||||
const dialogBody = function() { |
|
||||
return { |
|
||||
type: 'panel', |
|
||||
items: [ |
|
||||
{ |
|
||||
type: 'grid', |
|
||||
columns: 2, |
|
||||
items: [ |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'data-hm_id', |
|
||||
label: '编号 (ID)', |
|
||||
// other: 't1',
|
|
||||
placeholder: '唯一编号' |
|
||||
}, |
|
||||
// --------
|
|
||||
{ |
|
||||
type: 'listbox', |
|
||||
name: 'data-hm_bd_id', |
|
||||
label: '绑定字段', |
|
||||
items: getListbox_Field() |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'style.height', |
|
||||
label: '高度 (px或%)' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'selectbox', |
|
||||
name: 'data-hm_required', |
|
||||
label: '必填', |
|
||||
size: 1, |
|
||||
items: [ |
|
||||
{ value: 'false', text: '否' }, |
|
||||
{ value: 'true', text: '是' } |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'data-hm_select', |
|
||||
label: '选项 (每一项使用“、”号分割)', |
|
||||
// other: 't1',
|
|
||||
placeholder: '例如：li、li、li' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'input', |
|
||||
name: 'data-hm_select_value', |
|
||||
label: '默认值' |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
} |
|
||||
const open = function(editor) { |
|
||||
editor.windowManager.open({ |
|
||||
title: '新增', |
|
||||
size: 'medium', // 'normal', 'medium' or 'large'
|
|
||||
// height:500,
|
|
||||
body: dialogBody(), |
|
||||
initialData: elmToDataForm(editor, pluginOptions.dataForm, pluginOptions.className, init), |
|
||||
buttons: [ |
|
||||
{ |
|
||||
type: 'cancel', |
|
||||
name: 'cancel', |
|
||||
text: '取消' |
|
||||
}, |
|
||||
{ |
|
||||
type: 'submit', |
|
||||
name: 'save', |
|
||||
text: '确定', |
|
||||
primary: true |
|
||||
} |
|
||||
|
|
||||
], |
|
||||
onChange: function(api, details) { |
|
||||
// const dataForm = api.getData()
|
|
||||
// console.log(details, dataForm[details.name])
|
|
||||
}, |
|
||||
onSubmit: function(api) { |
|
||||
const dataForm = api.getData() |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const hmID = dataForm['data-hm_id'] |
|
||||
console.log(hmID) |
|
||||
const className = pluginOptions.className |
|
||||
console.log(className) |
|
||||
const hmType = dataForm['data-hm_type'] |
|
||||
// ----------动态设置下拉菜单参数
|
|
||||
// http.get('/opera/patient/getOperaList').then(({ data: res }) => {
|
|
||||
// if (res.code === 0) {
|
|
||||
// var selectList = res.data
|
|
||||
// window.sessionStorage.setItem('selectList', JSON.stringify(selectList))
|
|
||||
// setTimeout(() => {
|
|
||||
// var selectlistDOM = doc.querySelector('.hmselectmultiple')
|
|
||||
// console.log(selectlistDOM)
|
|
||||
// selectList.forEach((item, index) => {
|
|
||||
// var option = doc.createElement('option')
|
|
||||
// option.innerHTML = item.operaName
|
|
||||
// option.value = item.operaId
|
|
||||
// selectlistDOM.appendChild(option)
|
|
||||
// })
|
|
||||
// }, 100)
|
|
||||
// }
|
|
||||
// }).catch(() => { })
|
|
||||
|
|
||||
// ---------------------------------------------
|
|
||||
const elm = editor.selection.getNode() |
|
||||
if (dataForm['data-hm_id'].length === 0) { |
|
||||
tinymce.activeEditor.windowManager.alert('请填写编号') |
|
||||
} else { |
|
||||
if (elm && isPlugin(elm, className)) { |
|
||||
const elmHmType = editor.dom.getAttrib(elm, 'data-hm_type') |
|
||||
if (elmHmType !== hmType) { |
|
||||
// 先插后删
|
|
||||
insertElm(editor, dataForm) |
|
||||
elm.remove() |
|
||||
} else { |
|
||||
// 更新
|
|
||||
updateElm(editor, elm, className, dataForm, changeHandler) |
|
||||
} |
|
||||
|
|
||||
api.close() |
|
||||
} else { |
|
||||
// 判读是否存在相同编号ID的控件
|
|
||||
if (hasElm(doc, 'data-hm_id', dataForm['data-hm_id'])) { |
|
||||
tinymce.activeEditor.windowManager.confirm('已存在，请使用其他编号？', function(s) { |
|
||||
// tinymce.activeEditor.windowManager.alert("Ok");
|
|
||||
return |
|
||||
}) |
|
||||
} else { |
|
||||
// 插入
|
|
||||
insertElm(editor, dataForm) |
|
||||
api.close() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
const init = function(editor, dataForm) { |
|
||||
// const elm = editor.selection.getNode()
|
|
||||
// const hmType = editor.dom.getAttrib(elm, 'data-hm_type')
|
|
||||
// if (hmType === 'number' || hmType === 'textarea') {
|
|
||||
// dataForm['data-hm_type']
|
|
||||
// }
|
|
||||
|
|
||||
// const tempDataForm = JSON.parse(window.localStorage.getItem('crfInputOptions'))
|
|
||||
// if (tempDataForm) {
|
|
||||
// dataForm = __assign({}, dataForm, tempDataForm)
|
|
||||
// return dataForm
|
|
||||
// }
|
|
||||
} |
|
||||
|
|
||||
const insertElm = function(editor, dataForm) { |
|
||||
console.log(dataForm) |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const className = pluginOptions.className |
|
||||
const id = getIdByClassName(doc, className) |
|
||||
const name = dataForm['data-hm_id'] |
|
||||
const defaultValue = dataForm['data-hm_select_value'] |
|
||||
const win = editor.contentWindow |
|
||||
// orderScheduled
|
|
||||
console.log(dataForm['style.height']) |
|
||||
let domStr = '' |
|
||||
const customStyle = 'min-width:180px;' |
|
||||
switch (dataForm) { |
|
||||
default: |
|
||||
domStr = |
|
||||
` |
|
||||
<div class="select-Input" style="position:relative;width:300px"> |
|
||||
<select id="${name}-input" class="multipleSelect" ${dataFormToElmPartStr(dataForm, className, '', customStyle)}> |
|
||||
<option selected="selected" disabled="disabled" style="display: none" value="" class="displayOption"/> |
|
||||
</select> |
|
||||
<input type="text" class="multipleInput" value="请输入检索内容" style="border:none;position:absolute;right:10px;height:${dataForm['style.height']}px;"> |
|
||||
</div> |
|
||||
` |
|
||||
break |
|
||||
} |
|
||||
// console.log(domStr)
|
|
||||
|
|
||||
editor.insertContent(domStr) |
|
||||
|
|
||||
// const ifr = document.getElementsByClassName('tox-edit-area__iframe')[0]
|
|
||||
// 【ifr.contentDocument = ifr.contentWindow.document】
|
|
||||
// 【editor.contentDocument = editor.contentWindow.document】
|
|
||||
|
|
||||
// 渲染控件
|
|
||||
initElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
|
|
||||
// // 记录此次配置，方便下次新增
|
|
||||
// window.localStorage.setItem('crfInputOptions', JSON.stringify(dataForm))
|
|
||||
} |
|
||||
|
|
||||
// 编辑控件状态后，触发处理逻辑
|
|
||||
const changeHandler = function(editor, elm, dataForm) { |
|
||||
const doc = editor.contentDocument || editor.contentWindow.document |
|
||||
const win = editor.contentWindow |
|
||||
const id = editor.dom.getAttrib(elm, 'id') |
|
||||
// 二次渲染重置处理，【失败】，暂时保留BUG // elm.removeAttribute('lay-key');
|
|
||||
initElm(doc, win, id, dataForm['data-hm_type']) |
|
||||
} |
|
||||
|
|
||||
const initElm = function(doc, win, id, type) { |
|
||||
if (type === 'date' || type === 'datetime' || type === 'time') { |
|
||||
win.laydate.render({ |
|
||||
elem: '#' + id, |
|
||||
type: type |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const register = function(editor) { |
|
||||
editor.addCommand(pluginOptions.cmdName, function() { |
|
||||
open(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const register$1 = function(editor) { |
|
||||
// 工具栏
|
|
||||
editor.ui.registry.addButton(pluginOptions.name, { |
|
||||
icon: 'select', |
|
||||
title: '下拉框', |
|
||||
tooltip: '下拉框', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
}, |
|
||||
onSetup: function(buttonApi) { |
|
||||
} |
|
||||
}) |
|
||||
// 菜单栏
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.name, { |
|
||||
icon: 'select', |
|
||||
text: '属性', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// 菜单栏（编辑）
|
|
||||
editor.ui.registry.addMenuItem(pluginOptions.editName, { |
|
||||
icon: 'select', |
|
||||
text: '编辑', |
|
||||
onAction: function() { |
|
||||
open(editor) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
editor.ui.registry.addContextMenu(pluginOptions.name, { |
|
||||
update: function(element) { |
|
||||
return isPlugin(element, pluginOptions.className) ? [pluginOptions.editName] : [] |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
function Plugin() { |
|
||||
global.add(pluginOptions.name, function(editor) { |
|
||||
setup(editor) |
|
||||
register(editor) |
|
||||
register$1(editor) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
Plugin() |
|
||||
}()) |
|
||||
@ -1,309 +0,0 @@ |
|||||
|
|
||||
// 判断是否已引用
|
|
||||
export const isInclude = function(name, doc) { |
|
||||
doc = doc || document |
|
||||
var js = /js$/i.test(name) |
|
||||
var es = doc.getElementsByTagName(js ? 'script' : 'link') |
|
||||
for (var i = 0; i < es.length; i++) { if (es[i][js ? 'src' : 'href'].indexOf(name) !== -1) return true } |
|
||||
return false |
|
||||
} |
|
||||
|
|
||||
// 加载插件所需js
|
|
||||
export const loadJS_ifrEditArea = function(editor, jsArr) { |
|
||||
if (jsArr.length > 0) { |
|
||||
const nodeList = document.getElementsByClassName('tox-edit-area__iframe') |
|
||||
nodeList.forEach(node => { |
|
||||
const ifr = node.contentWindow.document |
|
||||
const head = ifr.getElementsByTagName('head')[0] |
|
||||
jsArr.forEach(src => { |
|
||||
if (!isInclude(src, ifr)) { |
|
||||
const script = document.createElement('script') |
|
||||
script.type = 'text/javascript' |
|
||||
script.src = editor.dom.encode(editor.documentBaseURI.toAbsolute(src)) |
|
||||
head.appendChild(script) |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
editor.hmPluginScript = (editor.hmPluginScript || []).concat(jsArr) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 加载插件所需css
|
|
||||
export const loadCSS_ifrEditArea = function(editor, cssArr) { |
|
||||
if (cssArr.length > 0) { |
|
||||
const nodeList = document.getElementsByClassName('tox-edit-area__iframe') |
|
||||
nodeList.forEach(node => { |
|
||||
const ifr = node.contentWindow.document |
|
||||
const head = ifr.getElementsByTagName('head')[0] |
|
||||
cssArr.forEach(href => { |
|
||||
if (!isInclude(href, ifr)) { |
|
||||
const css = document.createElement('link') |
|
||||
css.type = 'text/css' |
|
||||
css.rel = 'stylesheet' |
|
||||
css.href = editor.dom.encode(editor.documentBaseURI.toAbsolute(href)) |
|
||||
head.appendChild(css) |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
editor.hmPluginCss = (editor.hmPluginCss || []).concat(cssArr) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 生成dom对象id（取最大值+1） |
|
||||
* @param {*} doc document对象 |
|
||||
* @param {*} className 样式名(插件名) |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const getIdByClassName = function(doc, className) { |
|
||||
let i = 0 |
|
||||
doc.querySelectorAll('.' + className).forEach(elm => { |
|
||||
const j = Number(elm.id && elm.id.replace(className, '') || 0) |
|
||||
if (i <= j) { |
|
||||
i = j |
|
||||
} |
|
||||
}) |
|
||||
return className + (i + 1) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 判断是否已存在相应的dom对象 |
|
||||
* @param {*} doc document对象 |
|
||||
* @param {*} attrName 属性名 |
|
||||
* @param {*} attrValue 属性值 |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const hasElm = function(doc, attrName, attrValue) { |
|
||||
return attrValue !== '' && (doc.querySelectorAll(`[${attrName}='${attrValue}']`).length > 0) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 判断element对象 |
|
||||
* @param {*} elm element对象 |
|
||||
* @param {*} attrName 属性名 |
|
||||
* @param {*} attrValue 属性值 |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const isElm = function(elm, attrName, attrValue) { |
|
||||
// console.log(elm.getAttribute(attrName))
|
|
||||
// console.log(elm.hasAttribute(attrName))
|
|
||||
// console.log(attrValue)
|
|
||||
return elm.hasAttribute(attrName) && elm.getAttribute(attrName) === attrValue |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 判断插件(根据样式) |
|
||||
* @param {*} element dom对象 |
|
||||
* @param {*} pluginClassName 插件名 |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const isPlugin = function(elm, pluginClassName) { |
|
||||
if (elm.className && elm.className.indexOf(pluginClassName) >= 0) { |
|
||||
return true |
|
||||
} |
|
||||
return false |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 字典表：样式单位匹配 |
|
||||
*/ |
|
||||
export const styleUnitMap = { |
|
||||
width: 'px', |
|
||||
height: 'px' |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 属性更新 |
|
||||
* @param {*} elm dom节点 |
|
||||
* @param {*} name 属性名 |
|
||||
* @param {*} value 属性值 |
|
||||
*/ |
|
||||
export const updateAttrib = function(elm, name, value) { |
|
||||
if (value === '') { |
|
||||
elm.removeAttribute(name) |
|
||||
} else { |
|
||||
elm.setAttribute(name, value) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 更新dom对象 |
|
||||
* @param {*} editor 编辑器 |
|
||||
* @param {*} elm dom对象 |
|
||||
* @param {*} dataForm 新数据集合对象 |
|
||||
* @param {*} initHandler 初始化执行函数 |
|
||||
*/ |
|
||||
export const updateElm = function(editor, elm, className, dataForm, initHandler) { |
|
||||
const styleObj = {} |
|
||||
let classes = className + ' ' |
|
||||
for (const key of Object.keys(dataForm)) { |
|
||||
if (key.indexOf('style.') >= 0) { |
|
||||
const styleName = key.replace('style.', '') |
|
||||
let styleValue = dataForm[key] |
|
||||
if (styleName === 'width' || styleName === 'height') { |
|
||||
if (dataForm[key].indexOf('%') > 0 || dataForm[key].indexOf('px') > 0) { |
|
||||
styleValue = dataForm[key] |
|
||||
} else { |
|
||||
styleValue = dataForm[key] + 'px' |
|
||||
} |
|
||||
} |
|
||||
styleObj[styleName] = styleValue |
|
||||
} else if (key.indexOf('class.') >= 0) { |
|
||||
if (dataForm[key] !== '') { |
|
||||
classes += dataForm[key] + ' ' |
|
||||
} |
|
||||
} else { |
|
||||
if (dataForm[key] !== editor.dom.getAttrib(elm, key)) { |
|
||||
updateAttrib(elm, key, dataForm[key]) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
editor.dom.setStyles(elm, styleObj) |
|
||||
elm.className = classes |
|
||||
// 初始化控件
|
|
||||
if (initHandler) { initHandler(editor, elm, dataForm) } |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 根据数据集合对象转换成dom对象代码片段 |
|
||||
* @param {*} dataForm 数据集合对象 |
|
||||
* @returns dom对象代码片段 |
|
||||
*/ |
|
||||
export const dataFormToElmPartStr = function(dataForm, className, title, customStyle) { |
|
||||
console.log(customStyle) |
|
||||
let attributes = '' |
|
||||
let styles = '' |
|
||||
let classes = className + ' ' |
|
||||
for (const key of Object.keys(dataForm)) { |
|
||||
if (key.indexOf('style.') === 0) { |
|
||||
if (dataForm[key] !== '') { |
|
||||
const styleName = key.replace('style.', '') |
|
||||
let styleValue = dataForm[key] |
|
||||
if (styleName === 'width' || styleName === 'height') { |
|
||||
console.log(dataForm[key]) |
|
||||
if (dataForm[key].indexOf('%') > 0 || dataForm[key].indexOf('px') > 0) { |
|
||||
styleValue = dataForm[key] |
|
||||
} else { |
|
||||
styleValue = dataForm[key] + 'px' |
|
||||
} |
|
||||
} |
|
||||
styles += `${styleName}:${styleValue};` |
|
||||
} |
|
||||
} else if (key.indexOf('class.') === 0) { |
|
||||
if (dataForm[key] !== '') { |
|
||||
classes += dataForm[key] + ' ' |
|
||||
} |
|
||||
} else { |
|
||||
attributes += `${key}="${dataForm[key]}" ` |
|
||||
} |
|
||||
} |
|
||||
return `class="${classes}" style="${styles} ${customStyle}" ${attributes} ` |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* dom对象提取数据集合对象 |
|
||||
* @param {*} editor 编辑器 |
|
||||
* @param {*} initDataForm 原始数据对象 |
|
||||
* @param {*} pluginClassName 插件名 |
|
||||
* @returns 数据集合对象 |
|
||||
*/ |
|
||||
export const elmToDataForm = function(editor, initDataForm, pluginClassName, customHandle) { |
|
||||
const elm = editor.selection.getNode() |
|
||||
const dataForm = __assign({}, initDataForm) |
|
||||
if (isPlugin(elm, pluginClassName)) { |
|
||||
for (const key of Object.keys(dataForm)) { |
|
||||
if (key.indexOf('style.') >= 0) { |
|
||||
const styleName = key.replace('style.', '') |
|
||||
dataForm[key] = editor.dom.getStyle(elm, styleName).replace(styleUnitMap[styleName] || '', '') |
|
||||
} else if (key.indexOf('class.') >= 0) { |
|
||||
dataForm[key] = classMap(elm.className, key) || '' |
|
||||
} else { |
|
||||
dataForm[key] = editor.dom.getAttrib(elm, key) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
customHandle ? customHandle(editor, dataForm) : null |
|
||||
return dataForm |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 根据id获取选项具体信息 |
|
||||
* @param {*} id 匹配字段，对应listbox中的value |
|
||||
* @returns 对象 |
|
||||
*/ |
|
||||
export const getItemInfo_Field = function(id) { |
|
||||
if (window.localStorage.getItem('dictField')) { |
|
||||
const dict = Array.from(JSON.parse(window.localStorage.getItem('dictField'))) |
|
||||
dict.forEach(item => { |
|
||||
if (item.id && item.id === id) { |
|
||||
return item |
|
||||
} else { |
|
||||
item.list.forEach(item2 => { |
|
||||
if (item2.id && item2.id === id) { |
|
||||
return id |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
return null |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 获取字段字典表的listbox格式的数据 |
|
||||
* @returns listbox数组 |
|
||||
*/ |
|
||||
export const getListbox_Field = function() { |
|
||||
const selectbox = [{ text: '----无----', value: '' }] |
|
||||
if (window.localStorage.getItem('dictField')) { |
|
||||
const dict = Array.from(JSON.parse(window.localStorage.getItem('dictField'))) |
|
||||
dict.forEach(table => { |
|
||||
const obj = { |
|
||||
text: '', |
|
||||
items: [] |
|
||||
} |
|
||||
obj.text = table.tableDescription |
|
||||
if (table.list && table.list.length > 0) { |
|
||||
table.list.forEach(field => { |
|
||||
obj.items.push({ |
|
||||
text: field.fieldDescription, |
|
||||
value: field.id |
|
||||
}) |
|
||||
}) |
|
||||
} |
|
||||
selectbox.push(obj) |
|
||||
}) |
|
||||
} |
|
||||
return selectbox |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 根据dom的className匹配属性选项值 |
|
||||
* 如：className中的【XXX-1】 => dataForm["class.XXX"]=XXX-1 |
|
||||
* @param {*} className dom元素的className |
|
||||
* @param {*} dataFormKey 需要匹配的属性 |
|
||||
* @returns |
|
||||
*/ |
|
||||
export const classMap = function(className, dataFormKey) { |
|
||||
const classList = className.split(' ') |
|
||||
const temp = dataFormKey.replace('class.', '') |
|
||||
for (let i = 0; i < classList.length; i++) { |
|
||||
if (classList[i].indexOf(temp + '-') === 0) { |
|
||||
return classList[i] |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 浅拷贝
|
|
||||
export let __assign = function() { |
|
||||
__assign = Object.assign || function __assign(t) { |
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) { |
|
||||
s = arguments[i] |
|
||||
for (var p in s) { |
|
||||
if (Object.prototype.hasOwnProperty.call(s, p)) { t[p] = s[p] } |
|
||||
} |
|
||||
} |
|
||||
return t |
|
||||
} |
|
||||
return __assign.apply(this, arguments) |
|
||||
} |
|
||||
@ -1,56 +0,0 @@ |
|||||
/* eslint-disable no-unused-vars */ |
|
||||
/* eslint-disable no-undef */ |
|
||||
tinymce.PluginManager.add('letterspacing', function(editor, url) { |
|
||||
var pluginName = '字间距' |
|
||||
var global$1 = tinymce.util.Tools.resolve('tinymce.util.Tools') |
|
||||
var letterspacing_val = editor.getParam('letterspacing_val', '1px 2px 3px 4px 5px') |
|
||||
|
|
||||
editor.on('init', function() { |
|
||||
editor.formatter.register({ |
|
||||
letterspacing: { inline: 'span', styles: { 'letter-spacing': '%value' }} |
|
||||
}) |
|
||||
}) |
|
||||
|
|
||||
var doAct = function(value) { |
|
||||
editor.formatter.apply('letterspacing', { value: value }) |
|
||||
editor.fire('change', {}) |
|
||||
} |
|
||||
|
|
||||
editor.ui.registry.addMenuButton('letterspacing', { |
|
||||
text: '<svg t="1570979572631" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12244" width="20" height="20" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M33.450667 3.413333h102.4v956.8256H33.450667V3.413333z m887.330133 1.8432h102.4v957.713067h-102.4V5.188267z m-425.301333 200.704h108.9536l223.6416 584.977067h-102.4l-53.248-146.6368H427.485867l-53.248 146.6368h-102.4l223.6416-584.9088z m-39.3216 359.697067H643.754667L552.004267 309.248h-3.2768L456.157867 565.6576z" fill="#2c2c2c" p-id="12245"></path></svg>', |
|
||||
tooltip: pluginName, |
|
||||
fetch: function(callback) { |
|
||||
var dom = editor.dom |
|
||||
var blocks = editor.selection.getSelectedBlocks() |
|
||||
var lhv = 0 |
|
||||
global$1.each(blocks, function(block) { |
|
||||
if (lhv === 0) { |
|
||||
lhv = dom.getStyle(block, 'letterspacing') ? dom.getStyle(block, 'letterspacing') : 0 |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
var items = letterspacing_val.split(' ').map(function(item) { |
|
||||
var text = item |
|
||||
var value = item |
|
||||
return { |
|
||||
type: 'togglemenuitem', |
|
||||
text: text, |
|
||||
active: lhv === value, |
|
||||
onAction: function() { |
|
||||
doAct(value) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
callback(items) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
return { |
|
||||
getMetadata: function() { |
|
||||
return { |
|
||||
name: pluginName, |
|
||||
url: 'http://tinymce.ax-z.cn/more-plugins/lineheight.php' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
@ -1,7 +0,0 @@ |
|||||
// Exports the "silver" theme for usage with module loaders
|
|
||||
// Usage:
|
|
||||
// CommonJS:
|
|
||||
// require('tinymce/themes/silver')
|
|
||||
// ES2015:
|
|
||||
// import 'tinymce/themes/silver'
|
|
||||
require('./theme.js') |
|
||||
File diff suppressed because it is too large
@ -1,146 +0,0 @@ |
|||||
<template> |
|
||||
<div class="crf-add-dialog"> |
|
||||
<el-dialog |
|
||||
top="2vh" |
|
||||
fullscreen |
|
||||
:visible.sync="visible" |
|
||||
:title="dataForm.title||(!dataForm.id ? $t('add') : $t('update'))" |
|
||||
:close-on-click-modal="false" |
|
||||
:close-on-press-escape="false" |
|
||||
@close="closeDialog" |
|
||||
> |
|
||||
<el-form |
|
||||
ref="dataForm" |
|
||||
:model="dataForm" |
|
||||
:rules="dataRule" |
|
||||
label-width="auto" |
|
||||
@keyup.enter.native="initBaseInfo()" |
|
||||
> |
|
||||
<el-form-item prop="name" :label="'名称'"> |
|
||||
<el-input |
|
||||
v-model="dataForm.name" |
|
||||
:placeholder="'文章名称'" |
|
||||
size="small" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="substance" :label="'内容'" style="margin-top:20px;"> |
|
||||
<crf-editor ref="crf" v-model="dataForm.substance" :height="height" :is-p="true" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<template slot="footer"> |
|
||||
<el-button size="small" @click="visible = false">{{ $t('cancel') }}</el-button> |
|
||||
<el-button type="primary" size="small" @click="dataFormSubmitHandle()">发布文章</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
|
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import debounce from 'lodash/debounce' |
|
||||
import crfEditor from '@/components/hm-crf' |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
|
|
||||
export default { |
|
||||
components: { crfEditor }, |
|
||||
props: { |
|
||||
systemInfo: { |
|
||||
type: Object, |
|
||||
default: () => { |
|
||||
return {} |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
height: 'calc(100vh - 200px)', |
|
||||
dataForm: { |
|
||||
id: '', |
|
||||
name: '', |
|
||||
substance: '' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
dataRule() { |
|
||||
var validate_substance = (rule, value, callback) => { |
|
||||
if (this.dataForm.content === '') { |
|
||||
return callback(new Error('请填写文章内容')) |
|
||||
} |
|
||||
callback() |
|
||||
} |
|
||||
return { |
|
||||
name: [ |
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|
||||
], |
|
||||
substance: [ |
|
||||
{ required: true, validator: validate_substance, trigger: 'change' } |
|
||||
] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.dataForm.resetFields() |
|
||||
console.log(this.dataForm) |
|
||||
if (this.dataForm.id) { |
|
||||
this.getInfo() |
|
||||
} else { |
|
||||
this.dataForm = { ...this.dataForm } |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 获取信息 |
|
||||
getInfo() { |
|
||||
this.$http.get(`/article/${this.dataForm.id}`).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.dataForm.name = res.data.name |
|
||||
this.dataForm.substance = Base64.decode(res.data.substance) |
|
||||
this.$refs['crf'].renderContent() |
|
||||
} |
|
||||
}).catch(() => {}) |
|
||||
}, |
|
||||
// 表单提交 |
|
||||
dataFormSubmitHandle: debounce(function() { |
|
||||
this.$refs.dataForm.validate((valid) => { |
|
||||
if (!valid) { |
|
||||
return false |
|
||||
} |
|
||||
this.$http[!this.dataForm.id ? 'post' : 'put']('/article', { ...this.dataForm, substance: Base64.encode(this.dataForm.substance) }).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(() => {}) |
|
||||
}) |
|
||||
}, 1000, { leading: true, trailing: false }), |
|
||||
|
|
||||
// 关闭弹框时 |
|
||||
closeDialog() { |
|
||||
this.$emit('closeDialog') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
.crf-add-dialog { |
|
||||
.el-form-item { |
|
||||
margin-bottom:8px |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,65 +0,0 @@ |
|||||
<template> |
|
||||
<div class="articleContent"> |
|
||||
<div class="text">{{ dataForm.name }}</div> |
|
||||
<div class="date"> |
|
||||
<span>发布日期：{{ dataForm.createDate }}</span> |
|
||||
</div> |
|
||||
<div class="content" v-html="dataForm.substance " /> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
dataForm: {} |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.dataForm.id = this.$route.query.id |
|
||||
this.getInfo() |
|
||||
}, |
|
||||
methods: { |
|
||||
getInfo() { |
|
||||
this.$http.get(`/article/${this.dataForm.id}`).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.dataForm = res.data |
|
||||
this.dataForm.substance = Base64.decode(res.data.substance) |
|
||||
} |
|
||||
}).catch(() => {}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.articleContent { |
|
||||
height: 100vh; |
|
||||
width: 70vw; |
|
||||
margin: 0 auto; |
|
||||
overflow-y: auto; |
|
||||
padding: 40px 30px; |
|
||||
background: rgb(237, 237, 237); |
|
||||
|
|
||||
.text{ |
|
||||
font-size: 34px; |
|
||||
font-weight: 700; |
|
||||
margin-bottom: 20px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.content,.date { |
|
||||
margin-top: 10px; |
|
||||
font-size: 16px; |
|
||||
text-indent:2em |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.content { |
|
||||
p,span{ |
|
||||
background-color: transparent !important; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,99 +0,0 @@ |
|||||
<template> |
|
||||
<div class="article"> |
|
||||
<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle(null,null,'新建文章')">新建文章</el-button> |
|
||||
<div class="article-list"> |
|
||||
<div v-if="dataList.length>0" class="list-ul"> |
|
||||
<div v-for="(item,index) in dataList" :key="index" class="list-li" @click="articleHandle(item)"> |
|
||||
<span class="list-li-left"> |
|
||||
<span>{{ item.name }}</span> |
|
||||
<span>发布时间：{{ item.createDate }}</span> |
|
||||
</span> |
|
||||
<span class="list-li-right"> |
|
||||
<span @click.stop="addOrUpdateHandle(item.id)">修改</span> |
|
||||
<span @click.stop="deleteHandle(item.id)">删除</span> |
|
||||
</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-else>暂无数据</div> |
|
||||
</div> |
|
||||
<el-pagination background layout="total,prev, pager, next" :total="total" :current-page.sync="page" @current-change="pageCurrentChangeHandle" /> |
|
||||
<!-- 弹窗, 新增 / 修改 --> |
|
||||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @closeDialog="addOrUpdateVisible=false" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import mixinViewModule from '@/mixins/view-module' |
|
||||
import AddOrUpdate from './add-or-update.vue' |
|
||||
export default { |
|
||||
components: { |
|
||||
AddOrUpdate |
|
||||
}, |
|
||||
mixins: [mixinViewModule], |
|
||||
data() { |
|
||||
return { |
|
||||
mixinViewModuleOptions: { |
|
||||
getDataListURL: '/article/page', |
|
||||
deleteURL: '/article', |
|
||||
getDataListIsPage: true |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
methods: { |
|
||||
// 新建文章 |
|
||||
addArticleHandle() { |
|
||||
}, |
|
||||
// 点击文章跳转 |
|
||||
articleHandle(item) { |
|
||||
console.log(item) |
|
||||
this.$router.push({ |
|
||||
name: 'articleContent', |
|
||||
query: { |
|
||||
id: item.id |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.article { |
|
||||
background: #fff; |
|
||||
width: 100%; |
|
||||
padding: 16px; |
|
||||
.article-list { |
|
||||
margin-top: 25px; |
|
||||
} |
|
||||
.list-li { |
|
||||
display: flex; |
|
||||
cursor: pointer; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
padding: 10px 10px; |
|
||||
border-bottom: 1px solid rgb(237, 236, 236); |
|
||||
} |
|
||||
.list-li:hover { |
|
||||
background: #eef0f2; |
|
||||
} |
|
||||
.list-li-left { |
|
||||
span { |
|
||||
display: block; |
|
||||
} |
|
||||
span:nth-child(1) { |
|
||||
font-size: 18px; |
|
||||
font-weight: 700; |
|
||||
padding-bottom: 6px; |
|
||||
} |
|
||||
} |
|
||||
.list-li-right { |
|
||||
span:nth-child(1) { |
|
||||
padding-right: 8px; |
|
||||
color: rgb(24, 144, 255); |
|
||||
} |
|
||||
span:nth-child(2) { |
|
||||
color: rgb(253, 77, 79); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,223 +0,0 @@ |
|||||
<template> |
|
||||
<div class="computer-inspect"> |
|
||||
<div class="computer-head"> |
|
||||
<el-form :inline="true" :model="dataForm" class="demo-form-inline" @keyup.enter.native="getDataListInitial()"> |
|
||||
<el-form-item label="患者ID:"> |
|
||||
<el-input v-model="dataForm.patientId" placeholder="患者ID" size="small" clearable @clear="getDataListInitial()" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="患者姓名:"> |
|
||||
<el-input v-model="dataForm.patientName" placeholder="患者姓名" size="small" clearable @clear="getDataListInitial()" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="dateRange" label="检查起止日期:" class="check-date"> |
|
||||
<el-date-picker |
|
||||
v-model="nextVisitTime" |
|
||||
size="small" |
|
||||
type="daterange" |
|
||||
range-separator="-" |
|
||||
start-placeholder="开始日期" |
|
||||
end-placeholder="结束日期" |
|
||||
value-format="yyyy-MM-dd" |
|
||||
@change="dateChange" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<!-- <el-form-item label="眼别:" class="eye-radio"> |
|
||||
<el-radio-group v-model="dataForm.eyeType" @change="getDataList()"> |
|
||||
<el-radio label="">全部</el-radio> |
|
||||
<el-radio label="R">右眼</el-radio> |
|
||||
<el-radio label="L">左眼</el-radio> |
|
||||
</el-radio-group> |
|
||||
</el-form-item> --> |
|
||||
<el-form-item style="flex:1"> |
|
||||
<el-button type="primary" icon="el-icon-search" size="small" @click="getDataListInitial()">查询</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
<div class="computer-table"> |
|
||||
<el-table |
|
||||
ref="multipleTable" |
|
||||
:data="dataList" |
|
||||
tooltip-effect="dark" |
|
||||
style="width: 100%" |
|
||||
@selection-change="handleSelectionChange" |
|
||||
> |
|
||||
<el-table-column type="selection" width="45" /> |
|
||||
<el-table-column prop="patientId" label="患者ID " header-align="center" align="center" /> |
|
||||
<el-table-column prop="patientName" label="患者姓名" header-align="center" align="center" /> |
|
||||
<el-table-column prop="birthday" label="出生日期" header-align="center" align="center" /> |
|
||||
<el-table-column prop="examItem" label="检查项目" header-align="center" align="center" /> |
|
||||
<!-- <el-table-column prop="eyeType" label="眼别" header-align="center" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.eyeType =='L' ? '左眼': (scope.row.eyeType == 'R' ? '右眼' : '-') }} |
|
||||
</template> |
|
||||
</el-table-column> --> |
|
||||
<el-table-column |
|
||||
prop="examTime" |
|
||||
label="检查日期" |
|
||||
sortable |
|
||||
width="110px" |
|
||||
header-align="center" |
|
||||
align="center" |
|
||||
/> |
|
||||
<el-table-column prop="fileName" label="检查报告文件名" header-align="center" align="center" /> |
|
||||
<el-table-column prop="operation" label="操作" header-align="center" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-button |
|
||||
type="text" |
|
||||
size="small" |
|
||||
@click="browseClick(scope.row)" |
|
||||
>浏览</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<el-pagination background layout="total,prev, pager, next" :total="total" @current-change="pageCurrentChangeHandle" /> |
|
||||
<!-- 底部全选反选 --> |
|
||||
<checked-footer |
|
||||
ref="checkfooter" |
|
||||
table-ref="multipleTable" |
|
||||
:current-table-list="currentTableList" |
|
||||
:data-list="dataList" |
|
||||
> |
|
||||
<div class="batch_button"> |
|
||||
<div class="batch_button"> |
|
||||
<el-button type="primary" size="small" :disabled="currentTableList.length > 0 ? false :true" @click="exportFileHandle">导出文件 |
|
||||
</el-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</checked-footer> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import checked from '@/mixins/checked' |
|
||||
import mixinViewModule from '@/mixins/view-module' |
|
||||
import checkedFooter from '@/components/checked-footer' |
|
||||
import { formatDate } from '@/utils/index.js' |
|
||||
export default { |
|
||||
components: { checkedFooter }, |
|
||||
mixins: [checked, mixinViewModule], |
|
||||
data() { |
|
||||
return { |
|
||||
mixinViewModuleOptions: { |
|
||||
getDataListURL: '/vision/find', |
|
||||
deleteURL: '/pat/Manage', |
|
||||
getDataListIsPage: true |
|
||||
}, |
|
||||
dataForm: { |
|
||||
patientId: '', |
|
||||
patientName: '', |
|
||||
beginDate: '', |
|
||||
endDate: '', |
|
||||
eyeType: '' |
|
||||
}, |
|
||||
nextVisitTime: '', |
|
||||
selectedData: 0, |
|
||||
currentTableList: [] |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
methods: { |
|
||||
// 日期改变时 |
|
||||
dateChange(e) { |
|
||||
this.dataForm.beginDate = e ? e[0] : '' |
|
||||
this.dataForm.endDate = e ? e[1] : '' |
|
||||
this.getDataList() |
|
||||
}, |
|
||||
// 浏览 |
|
||||
browseClick(scopeRow) { |
|
||||
window.open(scopeRow.filePath, '_blank') |
|
||||
}, |
|
||||
// 导出文件 |
|
||||
exportFileHandle() { |
|
||||
const loading = this.$loading({ |
|
||||
lock: true, |
|
||||
text: '导出数据生成中，请稍等...', |
|
||||
spinner: 'el-icon-loading', |
|
||||
background: 'rgba(0, 0, 0, 0.7)', |
|
||||
customClass: 'export-loading' |
|
||||
}) |
|
||||
this.$http.post('/vision/exportExcel', |
|
||||
{ |
|
||||
recIds: this.currentTableList.map(item => item.recId) |
|
||||
}, |
|
||||
{ |
|
||||
responseType: 'blob', |
|
||||
timeout: 60000 * 10 |
|
||||
} |
|
||||
).then(({ data: res }) => { |
|
||||
loading.close() |
|
||||
const link = document.createElement('a') |
|
||||
// 第一个参数是后台返回的文件流变量，第二个参数是要转换的类型，由type的值来决定。 |
|
||||
const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) |
|
||||
link.style.display = 'none' |
|
||||
link.href = URL.createObjectURL(blob) |
|
||||
link.setAttribute('download', `视野计检查报告数据导出_${formatDate(new Date(), 'yyyy-MM-dd')}`) |
|
||||
document.body.appendChild(link) |
|
||||
link.click() |
|
||||
document.body.removeChild(link) |
|
||||
this.checkList = [] |
|
||||
this.visible = false |
|
||||
// this.$refs.multipleTable.clearSelection() |
|
||||
}).catch((error) => { |
|
||||
this.$message.error(error) |
|
||||
loading.close() |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.computer-inspect { |
|
||||
.select-data,.export { |
|
||||
display: inline-block; |
|
||||
color: #1F78FF; |
|
||||
} |
|
||||
.select-data { |
|
||||
padding: 0 6px; |
|
||||
} |
|
||||
.export { |
|
||||
padding-left: 16px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.computer-table { |
|
||||
padding:16px 16px 45px 16px; |
|
||||
} |
|
||||
.computer-table-title { |
|
||||
margin-bottom: 16px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.computer-head { |
|
||||
padding-top: 16px; |
|
||||
.el-form { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
.el-form-item { |
|
||||
display: flex; |
|
||||
} |
|
||||
.el-form-item { |
|
||||
margin-bottom: 0; |
|
||||
width: 25%; |
|
||||
} |
|
||||
.el-form-item__label { |
|
||||
min-width: 75px; |
|
||||
} |
|
||||
.check-date .el-form-item__label { |
|
||||
min-width: 100px; |
|
||||
} |
|
||||
.eye-radio .el-form-item__label { |
|
||||
min-width: 50px; |
|
||||
} |
|
||||
.el-form-item__content, |
|
||||
.el-select, |
|
||||
.el-range-editor--small.el-input__inner { |
|
||||
width: 100%; |
|
||||
} |
|
||||
.el-radio { |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,58 +0,0 @@ |
|||||
<template> |
|
||||
<div class="data-management"> |
|
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick"> |
|
||||
<el-tab-pane label="电脑视野计检查报告" name="computerInspect"> |
|
||||
<computer-inspect /> |
|
||||
</el-tab-pane> |
|
||||
<!-- <el-tab-pane label="OCT眼底彩照检查报告" name="octInspect"> |
|
||||
<oct-inspect /> |
|
||||
</el-tab-pane> --> |
|
||||
</el-tabs> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import computerInspect from './computerInspect.vue' |
|
||||
// import octInspect from './octInspect.vue' |
|
||||
export default { |
|
||||
components: { |
|
||||
computerInspect |
|
||||
// octInspect |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
activeName: 'computerInspect' |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
methods: { |
|
||||
handleClick() { |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
|
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.data-management { |
|
||||
background: #fff; |
|
||||
.el-tabs__header { |
|
||||
margin: 0; |
|
||||
} |
|
||||
.el-tabs__nav { |
|
||||
background: #fff; |
|
||||
} |
|
||||
.el-tab-pane { |
|
||||
// display: block !important; |
|
||||
height: 100%; |
|
||||
} |
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__nav { |
|
||||
border: 1px solid #f0f0f0; |
|
||||
} |
|
||||
.el-tabs--card > .el-tabs__header { |
|
||||
border-bottom: 0; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,17 +0,0 @@ |
|||||
<template> |
|
||||
<div>456</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
methods: { |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
</style> |
|
||||
@ -1,33 +0,0 @@ |
|||||
<template> |
|
||||
<div class="home" /> |
|
||||
</template> |
|
||||
<script> |
|
||||
|
|
||||
export default { |
|
||||
inject: ['refresh'], |
|
||||
components: { |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
searchInput: '', |
|
||||
doctorId: '', |
|
||||
cracorId: '', // 管理师id |
|
||||
doctorName: '全部', |
|
||||
doctorList: [], |
|
||||
drgsName: window.localStorage.getItem('identity') |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
methods: { |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.home { |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.home { |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,600 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 就诊 --> |
|
||||
<div class="patientDetail"> |
|
||||
<el-tabs v-model="tapName"> |
|
||||
<el-tab-pane label="档案" name="first"> |
|
||||
<div class="recordBox"> |
|
||||
<div class="leftRecord"> |
|
||||
<el-card class="box-card"> |
|
||||
<div v-for="(item,index) in recordList" :key="'card' + index" class="card" @click="handleForm(item)"> |
|
||||
{{ item.crfName }} |
|
||||
</div> |
|
||||
<div style="margin-top: 16px"> |
|
||||
<span class="formText">常用表单</span> |
|
||||
<span style="color: #e5e6eb"> —— </span> |
|
||||
<el-checkbox v-model="checkTime" style="margin-left: 4px">默认新建今日</el-checkbox> |
|
||||
</div> |
|
||||
<div v-for="(item,idx) in formList" :key="idx" class="caseList" @click="selectForm(item)"> |
|
||||
<span style="margin-left: 8px">{{ item.name }}</span> |
|
||||
<span style="margin-right: 8px"><i class="el-icon-plus" @click.stop="addForm(item)" /></span> |
|
||||
</div> |
|
||||
<el-button class="backtBtn" type="danger" size="small" @click="backPageClick">返回上一页</el-button> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
<div class="rightRecord"> |
|
||||
<head-template v-if="btnFlag" head-left=""> |
|
||||
<el-button type="primary" size="small" @click="previewHandle">预览</el-button> |
|
||||
</head-template> |
|
||||
<head-template v-else head-left=""> |
|
||||
<el-button type="primary" size="small" @click="editForm">修改</el-button> |
|
||||
<el-button type="danger" plain size="small" @click="deleteHandle">删除</el-button> |
|
||||
<el-button class="printer" plain size="small" @click="printerHandle">打印</el-button> |
|
||||
</head-template> |
|
||||
<crf |
|
||||
v-if="crfVisible" |
|
||||
ref="crfComponent" |
|
||||
:value="dataContent" |
|
||||
:height="'100%'" |
|
||||
:js-arr="jsArr" |
|
||||
style="margin: 0;padding: 20px 0;width: 100%;border: 1px solid #000;background:#fff;" |
|
||||
:body-style-show="true" |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-tab-pane> |
|
||||
<!-- <el-tab-pane label="电子病历PDF报告" name="third">--> |
|
||||
<!-- <div class="recordBox">--> |
|
||||
<!-- <div class="leftRecord">--> |
|
||||
<!-- <el-card class="box-card">--> |
|
||||
<!-- <el-tree :data="fileList" :props="defaultProps" :default-expand-all="true" @node-click="handleNodeClick" />--> |
|
||||
<!-- </el-card>--> |
|
||||
<!-- </div>--> |
|
||||
<!-- <div class="rightRecord">--> |
|
||||
<!-- <iframe id="ifr1" :src="pageUrl" frameborder="0" style="width: 100%; height: 100%" />--> |
|
||||
<!-- </div>--> |
|
||||
<!-- </div>--> |
|
||||
<!-- </el-tab-pane>--> |
|
||||
</el-tabs> |
|
||||
<el-dialog |
|
||||
title="新增病例" |
|
||||
width="35%" |
|
||||
:visible.sync="visible" |
|
||||
append-to-body |
|
||||
> |
|
||||
<div class="dialog-container"> |
|
||||
<div class="crf-container"> |
|
||||
<el-date-picker |
|
||||
v-model="date" |
|
||||
type="date" |
|
||||
value-format="yyyy-MM-dd" |
|
||||
placeholder="选择日期" |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
<template slot="footer"> |
|
||||
<el-button @click="visible = false"> 取消 </el-button> |
|
||||
<el-button type="primary" @click="submitForm()"> 确定 </el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
<follow-up v-if="followUpVisible" ref="followUp" :patient-id="patientId" :crf-id="crfId" :form-id="formId" @refreshDataList="queryFormInfo" /> |
|
||||
<preview v-if="previewVisible" ref="preview" :body-style-show="true" :crf-id="formId" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import headTemplate from '@/components/head' |
|
||||
import crf from '@/components/hm-crf/load_content.vue' |
|
||||
import followUp from '@/components/hm-crf/followUp.vue' |
|
||||
import preview from '@/components/hm-crf/preview' |
|
||||
import Cookies from 'js-cookie' |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
import axios from 'axios' // 引入原生的axios,不作封装处理 |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
followUp, |
|
||||
preview, |
|
||||
headTemplate, |
|
||||
crf |
|
||||
}, |
|
||||
filters: { |
|
||||
eyeTypeStatus(value) { |
|
||||
switch (value) { |
|
||||
case 0: |
|
||||
return |
|
||||
case 1: |
|
||||
return 'OD' |
|
||||
case 2: |
|
||||
return 'OS' |
|
||||
case 3: |
|
||||
return 'OU' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
doctorId: '', |
|
||||
doctorKey: '', |
|
||||
qrcodeSrc: '', |
|
||||
pageUrl: '', |
|
||||
defaultProps: { |
|
||||
children: 'list', |
|
||||
label: 'type' |
|
||||
}, |
|
||||
defaultExpandKeys: [], |
|
||||
fileList: [], |
|
||||
examTime: [], |
|
||||
dataList: [], |
|
||||
formList: [], |
|
||||
recordList: [], |
|
||||
jsArr: [], |
|
||||
date: '', |
|
||||
crfId: '', |
|
||||
dataContent: '', |
|
||||
formId: '', |
|
||||
isWrite: '', |
|
||||
btnFlag: false, |
|
||||
checkTime: false, |
|
||||
crfVisible: false, |
|
||||
visible: false, |
|
||||
followUpVisible: false, |
|
||||
previewVisible: false, |
|
||||
patientInfoObj: {}, |
|
||||
dataForm: { |
|
||||
limit: 10, |
|
||||
page: 1 |
|
||||
}, |
|
||||
tapName: 'first', |
|
||||
url: '', |
|
||||
activeName: 'OCT', |
|
||||
beginDate: '', |
|
||||
endDate: '', |
|
||||
patientId: '', |
|
||||
patientName: '', |
|
||||
patientSex: '', |
|
||||
patientAge: '', |
|
||||
patientBirthday: '', |
|
||||
pageSize: 15, |
|
||||
pageNumber: 1, |
|
||||
total: 0, |
|
||||
pageParams: {}, |
|
||||
oct: '', |
|
||||
iol: '', |
|
||||
cec: '', |
|
||||
rsd: '', |
|
||||
ecg: '', |
|
||||
ora: '', |
|
||||
vfa: '', |
|
||||
vep: '', |
|
||||
vqai: '', |
|
||||
vqa: '', |
|
||||
ctg: '', |
|
||||
ous: '' |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
created() { |
|
||||
this.url = '/base/oct/page' |
|
||||
if (this.$route.query.bstr) { |
|
||||
this.loginPacs().then(() => { |
|
||||
this.queryFormList() |
|
||||
this.queryMedicalRecords() |
|
||||
this.queryPatientInfo() |
|
||||
this.pageCurrentChangeHandle(1) |
|
||||
// this.queryFiles() |
|
||||
}) |
|
||||
} else { |
|
||||
this.pageParams = JSON.parse(this.$Base64.decode(this.$route.query.info)) |
|
||||
console.log('info',this.pageParams) |
|
||||
this.patientId = this.pageParams.patientId |
|
||||
// this.patientName = this.pageParams.patientInfo.patientName |
|
||||
// this.patientSex = this.pageParams.patientInfo.patientSex |
|
||||
// this.patientAge = this.pageParams.patientInfo.patientAge |
|
||||
// this.patientBirthday = this.pageParams.patientInfo.patientBirthday ? this.pageParams.patientInfo.patientBirthday.substring(0, 11) : '' |
|
||||
this.queryFormList() |
|
||||
this.queryMedicalRecords() |
|
||||
// this.pageCurrentChangeHandle(1) |
|
||||
// this.queryFiles() |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
async loginPacs() { |
|
||||
const bstr = JSON.parse(this.$Base64.decode(this.$route.query.bstr)) |
|
||||
const { data: res } = await this.$http.post('/base/loginPacs', { |
|
||||
doctorId: bstr.doctorId, |
|
||||
doctorKey: bstr.doctorKey, |
|
||||
patientId: bstr.patientId |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.patientId = res.data.patientId |
|
||||
Cookies.set('token', res.data.token) |
|
||||
window.localStorage.setItem('token', JSON.stringify(res.data.token)) |
|
||||
window.localStorage.setItem('doctorName', JSON.stringify(res.data.doctorName)) |
|
||||
window.localStorage.setItem('activeIndex', 1) |
|
||||
} else { |
|
||||
this.loading = false |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
handleNodeClick(item) { |
|
||||
const url = item.pdfpath |
|
||||
this.previewPdf(url) |
|
||||
}, |
|
||||
// 获取pdf文件列表 |
|
||||
async queryFiles() { |
|
||||
const { data: res } = await this.$http.get('/base/mq/getHisPdf', { |
|
||||
params: { patid: this.patientId } |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
if (res.data.length) { |
|
||||
for (let i = 0; i < res.data.length; i++) { |
|
||||
const list = res.data[i].list |
|
||||
for (let j = 0; j < list.length; j++) { |
|
||||
const temp = list[j] |
|
||||
temp.type = temp.fdesc |
|
||||
} |
|
||||
} |
|
||||
this.fileList = res.data |
|
||||
const url = res.data[0].list[0].pdfpath |
|
||||
this.previewPdf(url) |
|
||||
} else { |
|
||||
this.fileList = [] |
|
||||
} |
|
||||
} else { |
|
||||
this.loading = false |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 展示pdf文件 |
|
||||
async previewPdf(url) { |
|
||||
const baseUrl = 'http://172.20.63.224:83' |
|
||||
// const baseUrl = 'http://192.168.4.24:8035' |
|
||||
// const url = '/music/b.pdf' |
|
||||
const token = Cookies.get('xa-token') |
|
||||
await axios({ |
|
||||
method: 'POST', |
|
||||
headers: { token }, |
|
||||
url: `${baseUrl}/base/aa/readPdfFile`, |
|
||||
params: { path: url }, |
|
||||
responseType: 'blob' // 更改responseType类型为 blob |
|
||||
}).then(res => { |
|
||||
const url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' })) |
|
||||
this.pageUrl = url |
|
||||
}).catch(err => { |
|
||||
}) |
|
||||
}, |
|
||||
// 获取病人信息 |
|
||||
async queryPatientInfo() { |
|
||||
const { data: res } = await this.$http.get('/patient/getPatientInfo', { |
|
||||
params: { patientId: this.patientId } |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.patientName = res.data.patientName |
|
||||
this.patientSex = res.data.patientSex |
|
||||
this.patientAge = res.data.patientAge |
|
||||
this.patientBirthday = res.data.patientBirthday ? res.data.patientBirthday.substring(0, 10) : '' |
|
||||
} else { |
|
||||
this.loading = false |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
pageCurrentChangeHandle(num) { |
|
||||
this.pageNumber = num |
|
||||
this.queryDataList(this.url) |
|
||||
}, |
|
||||
// 查询 |
|
||||
queryDataList(url) { |
|
||||
this.$http.get(url, { |
|
||||
params: { |
|
||||
limit: this.pageSize, |
|
||||
page: this.pageNumber, |
|
||||
beginDate: this.examTime ? this.examTime[0] : '', |
|
||||
endDate: this.examTime ? this.examTime[1] : '', |
|
||||
patientId: this.patientId |
|
||||
} |
|
||||
}) |
|
||||
.then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.dataList = res.data.list || [] |
|
||||
this.total = res.data.total || 0 |
|
||||
} |
|
||||
}).catch(() => { }) |
|
||||
}, |
|
||||
// 查询常用表单列表 |
|
||||
async queryFormList() { |
|
||||
const { data: res } = await this.$http.get('/crf/template/page', { |
|
||||
params: this.dataForm |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.formList = res.data.list || [] |
|
||||
if (this.formList.length) { |
|
||||
this.btnFlag = true |
|
||||
this.formId = this.formList[0].id |
|
||||
console.log(this.formId) |
|
||||
window.localStorage.setItem('firstVisit', '') |
|
||||
// window.localStorage.setItem('mzInfo', []) |
|
||||
this.getInfo() |
|
||||
} |
|
||||
} else { |
|
||||
this.loading = false |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 查询病历列表 |
|
||||
async queryMedicalRecords() { |
|
||||
const { data: res } = await this.$http.get('/crf/findFormByPatientId', { |
|
||||
params: { |
|
||||
patientId: this.patientId |
|
||||
} |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.recordList = res.data || [] |
|
||||
if (this.recordList.length) { |
|
||||
this.formId = this.recordList[0].id |
|
||||
// this.queryFormInfo() |
|
||||
} |
|
||||
} else { |
|
||||
this.loading = false |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
addForm(item) { |
|
||||
this.crfId = item.id |
|
||||
this.formId = '' |
|
||||
this.isWrite = 0 |
|
||||
if (this.checkTime) { |
|
||||
this.date = this.getNowFormatDate() |
|
||||
this.submitForm() |
|
||||
} else { |
|
||||
this.visible = true |
|
||||
this.date = '' |
|
||||
} |
|
||||
}, |
|
||||
// 查询下面表单模板 |
|
||||
selectForm(item) { |
|
||||
console.log(item) |
|
||||
this.formId = item.id |
|
||||
this.btnFlag = true |
|
||||
window.localStorage.setItem('firstVisit', '') |
|
||||
window.localStorage.setItem('mzInfo', []) |
|
||||
this.getInfo() |
|
||||
}, |
|
||||
// 获取模板信息 |
|
||||
getInfo() { |
|
||||
this.crfVisible = false |
|
||||
this.$http.get('/crf/template/' + this.formId).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.dataContent = Base64.decode(res.data.content) |
|
||||
this.crfVisible = true |
|
||||
} |
|
||||
}).catch(() => {}) |
|
||||
}, |
|
||||
async submitForm() { |
|
||||
const { data: res } = await this.$http.post('/crf/saveForm', { |
|
||||
crfId: this.crfId, |
|
||||
dataContent: Base64.encode(this.dataContent), |
|
||||
formId: this.formId, |
|
||||
inputDate: this.date, |
|
||||
isWrite: this.isWrite, |
|
||||
patientId: this.patientId |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.visible = false |
|
||||
this.queryMedicalRecords() |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
getNowFormatDate() { |
|
||||
const date = new Date() |
|
||||
const seperator1 = '-' // 格式分隔符 |
|
||||
const year = date.getFullYear() // 获取完整的年份(4位) |
|
||||
let month = date.getMonth() + 1 // 获取当前月份(0-11,0代表1月) |
|
||||
let strDate = date.getDate() // 获取当前日(1-31) |
|
||||
if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0 |
|
||||
if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0 |
|
||||
|
|
||||
const currentdate = year + seperator1 + month + seperator1 + strDate |
|
||||
return currentdate |
|
||||
}, |
|
||||
// 查询上面表单 |
|
||||
handleForm(item) { |
|
||||
this.crfId = item.crfId |
|
||||
this.formId = item.id |
|
||||
this.btnFlag = false |
|
||||
this.queryFormInfo() |
|
||||
}, |
|
||||
// 查询表单信息 |
|
||||
async queryFormInfo() { |
|
||||
this.crfVisible = false |
|
||||
const { data: res } = await this.$http.get('/crf/getForm', { |
|
||||
params: { |
|
||||
patientId: this.patientId, |
|
||||
formId: this.formId |
|
||||
} |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.dataContent = Base64.decode(res.data.content) |
|
||||
window.localStorage.setItem('firstVisit', JSON.stringify(res.data.firstVisit)) |
|
||||
this.crfVisible = true |
|
||||
} |
|
||||
}, |
|
||||
// 新增弹框及传值 |
|
||||
editForm() { |
|
||||
this.followUpVisible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.followUp.patientId = this.patientId |
|
||||
this.$refs.followUp.formId = this.formId |
|
||||
this.$refs.followUp.init() |
|
||||
}) |
|
||||
}, |
|
||||
// 打印 |
|
||||
printerHandle() { |
|
||||
this.$refs.crfComponent.$el.contentWindow.print() |
|
||||
}, |
|
||||
// 删除 |
|
||||
async deleteHandle() { |
|
||||
this.$confirmFun('你确定要删除该表单吗？').then(async() => { |
|
||||
if (!this.formId) { |
|
||||
return this.$message.error('模板不能删除!') |
|
||||
} |
|
||||
const { data: res } = await this.$http.delete('/crf/deleteCrfFormInfo', { |
|
||||
params: { |
|
||||
formId: this.formId |
|
||||
} |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.$message({ |
|
||||
message: '删除成功!', |
|
||||
type: 'success', |
|
||||
duration: 500, |
|
||||
onClose: () => { |
|
||||
this.queryMedicalRecords() |
|
||||
} |
|
||||
}) |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 预览 |
|
||||
previewHandle() { |
|
||||
this.previewVisible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.preview.init() |
|
||||
}) |
|
||||
}, |
|
||||
// 返回上一页 |
|
||||
backPageClick() { |
|
||||
this.$router.back() |
|
||||
// this.$router.push({ name: 'search' }) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.patientDetail { |
|
||||
width: 100%; |
|
||||
height: calc(100vh - 60px); |
|
||||
box-sizing: border-box; |
|
||||
position: relative; |
|
||||
.exportBtn{ |
|
||||
position: absolute; |
|
||||
left: 119px; |
|
||||
bottom: 60px; |
|
||||
} |
|
||||
.backtBtn{ |
|
||||
width: 280px; |
|
||||
position: absolute; |
|
||||
left: 0px; |
|
||||
bottom: 8px; |
|
||||
} |
|
||||
.see-docto-right{ |
|
||||
height: 100%; |
|
||||
width: 100%; |
|
||||
padding: 8px 0; |
|
||||
background-color: white; |
|
||||
box-sizing: border-box; |
|
||||
.info{ |
|
||||
width: 80%; |
|
||||
line-height: 40px; |
|
||||
display: flex; |
|
||||
justify-content: flex-start; |
|
||||
|
|
||||
.mr200{ |
|
||||
margin-right: 60px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.headBtn{ |
|
||||
z-index: 99999; |
|
||||
} |
|
||||
.recordBox{ |
|
||||
display: flex; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
|
|
||||
.leftRecord{ |
|
||||
width: 280px; |
|
||||
height: 100%; |
|
||||
.box-card{ |
|
||||
height: 100%; |
|
||||
//min-height: 400px; |
|
||||
overflow: auto; |
|
||||
} |
|
||||
.card{ |
|
||||
height: 46px; |
|
||||
line-height: 46px; |
|
||||
cursor: pointer; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
.card:hover{ |
|
||||
background-color: #f4f8fb; |
|
||||
color: #1d2129; |
|
||||
} |
|
||||
.formText{ |
|
||||
font-size: 16px; |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.caseList{ |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
height: 40px; |
|
||||
line-height: 40px; |
|
||||
cursor: pointer; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
.caseList:hover{ |
|
||||
background-color: #f4f8fb; |
|
||||
color: #1d2129; |
|
||||
} |
|
||||
} |
|
||||
.rightRecord{ |
|
||||
flex: 1; |
|
||||
height: 100%; |
|
||||
padding: 8px; |
|
||||
background-color: white; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
.patientDetail { |
|
||||
.el-tabs{ |
|
||||
height: 100%; |
|
||||
} |
|
||||
.el-tabs__header { |
|
||||
margin: 0; |
|
||||
background: #fff; |
|
||||
} |
|
||||
.el-tabs__content{ |
|
||||
height: calc(100% - 40px); |
|
||||
} |
|
||||
.dataTap .el-tabs__content { |
|
||||
padding: 8px; |
|
||||
background: #fff; |
|
||||
height: 100%; |
|
||||
overflow-y: auto; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
.el-tab-pane{ |
|
||||
height: 100%; |
|
||||
} |
|
||||
.el-tabs__item{ |
|
||||
padding-left: 20px !important; |
|
||||
} |
|
||||
.el-card__body{ |
|
||||
padding: 12px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,150 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
class="HIS-dialog" |
|
||||
:visible.sync="visible" |
|
||||
width="60%" |
|
||||
title="HIS查询" |
|
||||
> |
|
||||
<el-form ref="dataFormHis" :inline="true" :model="dataFormHis" class="demo-form-inline" :rules="dataRule" @keyup.enter.native="findHandle(2)"> |
|
||||
<el-form-item prop="patientId"> |
|
||||
<el-input v-model="dataFormHis.patientId" placeholder="请输入病历号" clearable @clear="findHandle(1)" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="patientName"> |
|
||||
<el-input v-model="dataFormHis.patientName" placeholder="请输入姓名" clearable @clear="findHandle(1)" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item prop="patientIdNumber"> |
|
||||
<el-input v-model="dataFormHis.patientIdNumber" placeholder="请输入身份证号" clearable @clear="findHandle(1)" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" @click="findHandle(2)">查询</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<el-table v-loading="loading" :data="tableData"> |
|
||||
<template slot="empty"> |
|
||||
<span style="color: #969799;">{{ tableText }}</span> |
|
||||
</template> |
|
||||
<el-table-column property="patientId" label="病历号" width="100" /> |
|
||||
<el-table-column property="patientName" label="患者姓名" width="100" /> |
|
||||
<el-table-column property="patientIdNumber" label="身份证号" /> |
|
||||
<el-table-column property="patientPhone" label="联系电话" /> |
|
||||
<el-table-column property="patientAddress" label="家庭地址" /> |
|
||||
<el-table-column label="操作" width="80"> |
|
||||
<template slot-scope="scope"> |
|
||||
<p class="introduce" @click="introduceHandle(scope.row)">引入</p> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
patientTypeList: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
dataFormHis: { |
|
||||
patientId: '', |
|
||||
patientName: '', |
|
||||
patientIdNumber: '' |
|
||||
}, |
|
||||
dataForm: {}, |
|
||||
tableData: [], |
|
||||
tableText: '请查询所需数据', |
|
||||
loading: false |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
dataRule() { |
|
||||
return { |
|
||||
patientId: [ |
|
||||
{ message: '请输入病历号', trigger: 'blur' } |
|
||||
], |
|
||||
patientName: [ |
|
||||
{ message: '请输入姓名', trigger: 'blur' } |
|
||||
], |
|
||||
patientIdNumber: [ |
|
||||
{ message: '请输入身份证号', trigger: 'blur' } |
|
||||
] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.tableText = '请查询所需数据' |
|
||||
this.$refs.dataFormHis.resetFields() // 重置表单 |
|
||||
this.tableData = [] |
|
||||
}) |
|
||||
}, |
|
||||
// His查询按钮 |
|
||||
async findHandle(flag) { |
|
||||
this.loading = true |
|
||||
if (flag === 2 && !this.dataFormHis.patientId && !this.dataFormHis.patientName && !this.dataFormHis.patientIdNumber) { |
|
||||
return this.$message.error('搜索内容不能为空') |
|
||||
} |
|
||||
const { data: res } = await this.$http.get('/patient/manage/getHisPatientList', { |
|
||||
params: this.dataFormHis |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.loading = false |
|
||||
this.tableData = res.data |
|
||||
if (res.data.length <= 0 && flag === 2) { |
|
||||
this.tableText = '查询成功，未查询到相关数据' |
|
||||
} else if (res.data.length <= 0 && flag === 1) { |
|
||||
this.tableText = '请查询所需数据' |
|
||||
} |
|
||||
} else { |
|
||||
this.loading = false |
|
||||
this.tableText = res.msg |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 点击引入按钮 |
|
||||
introduceHandle(scopwRow) { |
|
||||
this.$parent.addOrUpdateHandle('', scopwRow, 'HIS引入') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.HIS-dialog { |
|
||||
.cycle-display { |
|
||||
.el-form-item__content { |
|
||||
display: flex; |
|
||||
} |
|
||||
.el-input-number { |
|
||||
width: 100px; |
|
||||
margin-right: 16px; |
|
||||
} |
|
||||
} |
|
||||
.introduce { |
|
||||
color: #1F78FF; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.HIS-dialog { |
|
||||
.el-form { |
|
||||
display: flex; |
|
||||
} |
|
||||
.el-dialog__header { |
|
||||
margin-bottom:12px |
|
||||
} |
|
||||
.el-dialog__body { |
|
||||
padding-right: 30px; |
|
||||
} |
|
||||
.formItemOne .el-form-item__content { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,113 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
class="patientDialog" |
|
||||
:visible.sync="visible" |
|
||||
width="30%" |
|
||||
title="修改身份证" |
|
||||
@close="closedDialog" |
|
||||
> |
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule"> |
|
||||
<el-form-item label="身份证号:" label-width="90px" prop="newIdNumber" class="formItemOne"> |
|
||||
<el-input v-model="dataForm.newIdNumber" placeholder="请输入患者身份证号" /> |
|
||||
</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> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import debounce from 'lodash/debounce' |
|
||||
export default { |
|
||||
props: { |
|
||||
patientTypeList: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
dataForm: { |
|
||||
newIdNumber: '', |
|
||||
oldIdNumber: '', |
|
||||
drgsName: window.localStorage.getItem('identity') |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
dataRule() { |
|
||||
return { |
|
||||
newIdNumber: [ |
|
||||
{ required: true, message: '请输入身份证号', trigger: 'blur' } |
|
||||
] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.dataForm.resetFields() // 重置表单 |
|
||||
}) |
|
||||
}, |
|
||||
// 表单提交 |
|
||||
dataFormSubmitHandle: debounce(function() { |
|
||||
this.$refs.dataForm.validate((valid) => { |
|
||||
if (!valid) { |
|
||||
return false |
|
||||
} |
|
||||
this.$http.post('/pat/Manage/updateIdNumber', 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(() => {}) |
|
||||
}) |
|
||||
}, 1000, { leading: true, trailing: false }), |
|
||||
|
|
||||
// 关闭dialog |
|
||||
closedDialog() { |
|
||||
this.$emit('editPatidVisible') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.patientDialog { |
|
||||
.cycle-display { |
|
||||
.el-form-item__content { |
|
||||
display: flex; |
|
||||
} |
|
||||
.el-input-number { |
|
||||
width: 100px; |
|
||||
margin-right: 16px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.patientDialog { |
|
||||
.el-dialog__header { |
|
||||
margin-bottom:12px |
|
||||
} |
|
||||
.el-dialog__body { |
|
||||
padding-right: 30px; |
|
||||
} |
|
||||
.formItemOne .el-form-item__content { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,581 +0,0 @@ |
|||||
<template> |
|
||||
<div id="operation-record" style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always"> |
|
||||
<p style="color:#000000;font-size:32px;margin:0 0 30px 0;text-align:center;"> |
|
||||
验光报告单 |
|
||||
</p> |
|
||||
<div> |
|
||||
<span style="margin-right: 32px;">登记号：<el-input v-model="dataForm.patientId" style="width: 120px" size="small" clearable placeholder="" /></span> |
|
||||
<span style="margin-right: 32px;">姓名：<el-input v-model="dataForm.patientId" style="width: 120px" size="small" clearable placeholder="" /></span> |
|
||||
<span style="margin-right: 32px;">性别：<el-input v-model="dataForm.patientId" style="width: 120px" size="small" clearable placeholder="" /></span> |
|
||||
<span style="margin-right: 32px;">年龄：<el-input v-model="dataForm.patientId" style="width: 120px" size="small" clearable placeholder="" /></span> |
|
||||
<span style="margin-right: 32px;">屈光发育档案：<el-input v-model="dataForm.patientId" style="width: 120px" size="small" clearable placeholder="" /></span> |
|
||||
<span style="margin-right: 32px;">档案号：<el-input v-model="dataForm.patientId" style="width: 120px" size="small" clearable placeholder="" /></span> |
|
||||
</div> |
|
||||
<div class="operation-record-table"> |
|
||||
<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"> |
|
||||
<el-table-column label="" width="" align="center" :resizable="false"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.name == 1"> |
|
||||
<div class="width-180 center"> |
|
||||
瞳孔 |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-else-if="scope.row.name == 2"> |
|
||||
<div class="width-180 center"> |
|
||||
检查方法 |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-else-if="scope.row.name == 3"> |
|
||||
<div class="width-180 center"> |
|
||||
右眼 |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-else-if="scope.row.name == 4"> |
|
||||
<div class="width-180 center"> |
|
||||
左眼 |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-else-if="scope.row.name == 5"> |
|
||||
<div class="width-180 center"> |
|
||||
右眼 |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-else-if="scope.row.name == 6"> |
|
||||
<div class="width-180 center"> |
|
||||
左眼 |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-else-if="scope.row.name == 7"> |
|
||||
<div class="width-180 center"> |
|
||||
左眼 |
|
||||
</div> |
|
||||
</div> |
|
||||
<p v-else>{{ scope.row.name }}</p> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="" width="" :resizable="false"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.name == '1'"> |
|
||||
<div class="width-180"> |
|
||||
<el-checkbox-group v-model="dataForm.yghcValue"> |
|
||||
<el-checkbox label="正常瞳孔" /> |
|
||||
<el-checkbox label="复方托吡卡胺" /> |
|
||||
<el-checkbox label="美多丽" /> |
|
||||
<el-checkbox label="赛飞杰" /> |
|
||||
<el-checkbox label="阿托品" /> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '2'"> |
|
||||
<div class="width-180"> |
|
||||
<el-checkbox-group v-model="dataForm.yghcValue"> |
|
||||
<el-checkbox label="检影" /> |
|
||||
<el-checkbox label="综合" /> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '3'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '4'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '5'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '6'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '基本信息'"> |
|
||||
<div class="width-180 center"> |
|
||||
裸眼视力 |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '最终处方'"> |
|
||||
<div class="width-180"> |
|
||||
<el-checkbox-group v-model="dataForm.yghcValue"> |
|
||||
<el-checkbox label="远用" /> |
|
||||
<el-checkbox label="近用" /> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '配镜建议'"> |
|
||||
<div class="width-180"> |
|
||||
<div style="display: flex"> |
|
||||
<el-checkbox-group v-model="dataForm.yghcValue"> |
|
||||
<el-checkbox label="单光" /> |
|
||||
<el-checkbox label="离焦镜片" /> |
|
||||
<el-checkbox label="软镜" /> |
|
||||
<el-checkbox label="RGP" /> |
|
||||
<el-checkbox label="OK镜" /> |
|
||||
</el-checkbox-group> |
|
||||
<p style="margin-left: 16px"> |
|
||||
其他：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '备注'"> |
|
||||
<div class="width-180"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="" width="" :resizable="false"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.name == '基本信息'"> |
|
||||
<div class="width-180 center"> |
|
||||
右眼 |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '验光检查'"> |
|
||||
<div class="width-180 center"> |
|
||||
球镜(DS) |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '3'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '4'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '5'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '6'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '最终处方'"> |
|
||||
<div class="width-180 center"> |
|
||||
恢复点：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '立体视(stereo)'"> |
|
||||
<div class="width-180 center"> |
|
||||
TNO(近)：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="" width="" :resizable="false"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.name == '基本信息'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '验光检查'"> |
|
||||
<div class="width-180 center"> |
|
||||
柱镜(DC) |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '3'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '4'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '5'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '6'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="" width="" :resizable="false"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.name == '基本信息'"> |
|
||||
<div class="width-180 center"> |
|
||||
左眼 |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '验光检查'"> |
|
||||
<div class="width-180 center"> |
|
||||
轴位(A) |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '3'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '4'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '5'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '6'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="" width="" :resizable="false"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.name == '基本信息'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '验光检查'"> |
|
||||
<div class="width-180 center"> |
|
||||
矫正视力(VA) |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '3'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '4'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '5'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '6'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="" width="" :resizable="false"> |
|
||||
<template slot-scope="scope"> |
|
||||
<!-- {{scope.row}}--> |
|
||||
<div v-if="scope.row.name == '验光检查'"> |
|
||||
<div class="width-180 center"> |
|
||||
下加光(ADD) |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '3'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '4'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '5'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '6'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
archiveCaseCRFItem: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
}, |
|
||||
formContent: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
dataForm: { |
|
||||
yghcValue: '', |
|
||||
operationListValueOD: [] |
|
||||
}, |
|
||||
tableData: [ |
|
||||
{ |
|
||||
name: '基本信息', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '1', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '2', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '验光检查', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '3', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '4', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '最终处方', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '5', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '6', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '配镜建议', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '备注' |
|
||||
}, { |
|
||||
name: '7' |
|
||||
}] |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
operationRecord: { |
|
||||
get() { |
|
||||
return this.$store.getters.operationRecord |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
operationRecord: { |
|
||||
handler(value) { |
|
||||
console.log(value) |
|
||||
}, |
|
||||
deep: true, |
|
||||
immediate: true |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.queryData() |
|
||||
}, |
|
||||
methods: { |
|
||||
queryData() { |
|
||||
const ws = new WebSocket('ws://192.168.4.24:8036/xiangan-crf/websocket/0071') |
|
||||
ws.onopen = function() { |
|
||||
console.log('连接成功') |
|
||||
} |
|
||||
ws.onerror = function() { |
|
||||
console.log('连接失败') |
|
||||
} |
|
||||
// ws.send() |
|
||||
ws.onmessage = function(msg) { |
|
||||
const data = JSON.parse(JSON.stringify(msg.data)) |
|
||||
// console.log(msg.data) |
|
||||
console.log(data) |
|
||||
} |
|
||||
}, |
|
||||
// 签名 |
|
||||
singHandle(text) { |
|
||||
const value = { |
|
||||
text: text, |
|
||||
pageName: 'operationRecord' |
|
||||
} |
|
||||
this.$store.commit('beginSign', value) |
|
||||
}, |
|
||||
objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
|
||||
if (columnIndex === 0) { |
|
||||
if (rowIndex === 0 || rowIndex === 3 || rowIndex === 6) { |
|
||||
return { |
|
||||
rowspan: 3, |
|
||||
colspan: 1 |
|
||||
} |
|
||||
} |
|
||||
if (rowIndex === 11) { |
|
||||
return { |
|
||||
rowspan: 1, |
|
||||
colspan: 7 |
|
||||
} |
|
||||
} |
|
||||
} else if (columnIndex === 1) { |
|
||||
if (rowIndex === 6 || rowIndex === 9 || rowIndex === 10) { |
|
||||
return { |
|
||||
rowspan: 1, |
|
||||
colspan: 6 |
|
||||
} |
|
||||
} |
|
||||
if (rowIndex === 1 || rowIndex === 2) { |
|
||||
return { |
|
||||
rowspan: 1, |
|
||||
colspan: 6 |
|
||||
} |
|
||||
} |
|
||||
} else if (columnIndex === 4) { |
|
||||
if (rowIndex === 0) { |
|
||||
return { |
|
||||
rowspan: 1, |
|
||||
colspan: 2 |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
#operation-record { |
|
||||
//height: 93%; |
|
||||
// overflow: auto; |
|
||||
.operation-record-table { |
|
||||
width: 100%; |
|
||||
.operation-text { |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.text { |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.sign { |
|
||||
cursor: pointer; |
|
||||
color: #46a1ff; |
|
||||
font-weight: 400; |
|
||||
} |
|
||||
} |
|
||||
.center { |
|
||||
text-align: center; |
|
||||
} |
|
||||
.left { |
|
||||
text-align: left; |
|
||||
} |
|
||||
|
|
||||
.width-50 { |
|
||||
.el-input { |
|
||||
width: 50px; |
|
||||
} |
|
||||
} |
|
||||
.width-70 { |
|
||||
.el-input { |
|
||||
width: 70px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.width-100 { |
|
||||
.el-input { |
|
||||
width: 100px; |
|
||||
} |
|
||||
} |
|
||||
.width-120 { |
|
||||
.el-input { |
|
||||
width: 120px; |
|
||||
} |
|
||||
} |
|
||||
.width-180 { |
|
||||
.el-input { |
|
||||
width: 180px; |
|
||||
} |
|
||||
} |
|
||||
.el-input__inner { |
|
||||
border: none; |
|
||||
height: 26px !important; |
|
||||
line-height: 26px !important; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.el-input__inner { |
|
||||
border-bottom: 1px solid #ccc; |
|
||||
border-radius: 0; |
|
||||
padding: 0; |
|
||||
} |
|
||||
.el-input__prefix { |
|
||||
display: none; |
|
||||
} |
|
||||
.el-date-editor.el-input, |
|
||||
.el-date-editor.el-input__inner { |
|
||||
width: 140px; |
|
||||
} |
|
||||
.el-input__suffix { |
|
||||
top: -7px; |
|
||||
} |
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label { |
|
||||
color: #606266; |
|
||||
} |
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner, |
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner { |
|
||||
background: #767676; |
|
||||
border-color: #767676; |
|
||||
} |
|
||||
.el-checkbox__inner:hover, |
|
||||
.el-checkbox__inner { |
|
||||
border-color: #767676; |
|
||||
} |
|
||||
.el-radio__input.is-checked + .el-radio__label { |
|
||||
color: #606266; |
|
||||
} |
|
||||
.el-radio__input.is-checked .el-radio__inner { |
|
||||
background: #767676; |
|
||||
border-color: #767676; |
|
||||
} |
|
||||
.el-radio { |
|
||||
margin-right: 8px; |
|
||||
display: block; |
|
||||
} |
|
||||
.el-radio__inner { |
|
||||
border: 1px solid #767676 !important; |
|
||||
} |
|
||||
.el-radio__inner:hover { |
|
||||
border-color: #767676; |
|
||||
} |
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { |
|
||||
background: none !important; |
|
||||
} |
|
||||
.has-gutter { |
|
||||
display: none; |
|
||||
.cell { |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.el-table__cell { |
|
||||
background: #ced4d9; |
|
||||
} |
|
||||
} |
|
||||
// .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed { |
|
||||
// border-right: 1px solid #808080; |
|
||||
// } |
|
||||
// .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf { |
|
||||
// border-bottom: 1px solid #808080 !important; |
|
||||
// } |
|
||||
// .el-table--border, .el-table--group { |
|
||||
// border: 1px solid #808080; |
|
||||
// } |
|
||||
// .el-table--border { |
|
||||
// border-bottom: 0; |
|
||||
// } |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,480 +0,0 @@ |
|||||
<template> |
|
||||
<div id="operation-record" style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always"> |
|
||||
<p style="color:#000000;font-size:32px;margin:0 0 30px 0;text-align:center;"> |
|
||||
双眼视功能检查报告单 |
|
||||
</p> |
|
||||
<div> |
|
||||
<span style="margin-right: 32px;">登记号：<el-input v-model="dataForm.patientId" style="width: 180px" size="small" clearable placeholder="" /></span> |
|
||||
<span style="margin-right: 32px;">姓名：<el-input v-model="dataForm.patientId" style="width: 180px" size="small" clearable placeholder="" /></span> |
|
||||
<span style="margin-right: 32px;">性别：<el-input v-model="dataForm.patientId" style="width: 180px" size="small" clearable placeholder="" /></span> |
|
||||
<span style="margin-right: 32px;">年龄：<el-input v-model="dataForm.patientId" style="width: 180px" size="small" clearable placeholder="" /></span> |
|
||||
</div> |
|
||||
<div class="operation-record-table"> |
|
||||
<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"> |
|
||||
<el-table-column label="" width="" align="center" :resizable="false"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.name == 1"> |
|
||||
<div class="width-180 center"> |
|
||||
OS：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-else-if="scope.row.name == 'FV'"> |
|
||||
<div class="width-180 center"> |
|
||||
远BO：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<p v-else>{{ scope.row.name }}</p> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="" width="" :resizable="false" prop="type"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.name == '1'"> |
|
||||
<div class="width-180 center"> |
|
||||
VA：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '屈光状态'"> |
|
||||
<div class="width-180 center"> |
|
||||
OD：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '交替遮盖试验(CT)'"> |
|
||||
<div class="width-180 center"> |
|
||||
远：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
近：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '集合近点(NPC)'"> |
|
||||
<div class="width-180 center"> |
|
||||
破裂点：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == 'Worth-4-dot'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
@D( |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
) |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '立体视(stereo)'"> |
|
||||
<div class="width-180 center"> |
|
||||
RDD(远)：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '眼位'"> |
|
||||
<div class="width-180 center"> |
|
||||
远：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '梯度性AC/A'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '融像性聚散(FV)'"> |
|
||||
<div class="width-180 center"> |
|
||||
远BI：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == 'FV'"> |
|
||||
<div class="width-180 center"> |
|
||||
近BO：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '相对调节(RA)'"> |
|
||||
<div class="width-180 center"> |
|
||||
NRA：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '调节幅度(AMP)'"> |
|
||||
<div class="width-180 center"> |
|
||||
OD：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
OS：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '调节灵活度(AF)'"> |
|
||||
<div class="width-180 center"> |
|
||||
OD：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
OS：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '调节反应(FCC)'"> |
|
||||
<div class="width-180 center"> |
|
||||
OD：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
OS：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '初步诊断'"> |
|
||||
<div class="width-180"> |
|
||||
<div> |
|
||||
<el-checkbox v-model="dataForm.yghcValue">正常</el-checkbox> |
|
||||
</div> |
|
||||
<div style="display: flex"> |
|
||||
<p style="width: 120px;">聚散功能异常：</p> |
|
||||
<el-checkbox-group v-model="dataForm.yghcValue"> |
|
||||
<el-checkbox label="集合不足"></el-checkbox> |
|
||||
<el-checkbox label="集合过度"></el-checkbox> |
|
||||
<el-checkbox label="散开不足"></el-checkbox> |
|
||||
<el-checkbox label="散开过度"></el-checkbox> |
|
||||
<el-checkbox label="内隐科"></el-checkbox> |
|
||||
<el-checkbox label="外隐科"></el-checkbox> |
|
||||
<el-checkbox label="假性集合不足"></el-checkbox> |
|
||||
<el-checkbox label="融像性聚散功能异常"></el-checkbox> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
<div style="display: flex"> |
|
||||
<p style="width: 120px;">调节功能异常：</p> |
|
||||
<el-checkbox-group v-model="dataForm.yghcValue"> |
|
||||
<el-checkbox label="调节灵敏度下降"></el-checkbox> |
|
||||
<el-checkbox label="调节不能持久"></el-checkbox> |
|
||||
<el-checkbox label="调节不足"></el-checkbox> |
|
||||
<el-checkbox label="调节过度"></el-checkbox> |
|
||||
<el-checkbox label="调节麻痹"></el-checkbox> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
<div style="display: flex"> |
|
||||
<span>斜视：</span> |
|
||||
<el-checkbox-group v-model="dataForm.yghcValue"> |
|
||||
<el-checkbox label="内斜视"></el-checkbox> |
|
||||
<el-checkbox label="外斜视"></el-checkbox> |
|
||||
<el-checkbox label="间歇性外斜视"></el-checkbox> |
|
||||
<el-checkbox label="垂直斜"></el-checkbox> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- <!– 签字 –>--> |
|
||||
<!-- <div v-if="scope.row" class="sign center">--> |
|
||||
<!-- <!– <span v-if="!operationRecord.doctorSignImg" class="sign" @click="singHandle('doctorSignImg')">点击签字</span>–>--> |
|
||||
<!-- <!– <img v-if="operationRecord.doctorSignImg" :src="operationRecord.doctorSignImg" alt="" width="90px" @click="singHandle('doctorSignImg')">–>--> |
|
||||
<!-- </div>--> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="" width="" :resizable="false"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.name == '屈光状态'"> |
|
||||
<div class="width-180 center"> |
|
||||
VA：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '交替遮盖试验(CT)'"> |
|
||||
<div class="width-180 center"> |
|
||||
眼球运动：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '集合近点(NPC)'"> |
|
||||
<div class="width-180 center"> |
|
||||
恢复点：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '立体视(stereo)'"> |
|
||||
<div class="width-180 center"> |
|
||||
TNO(近)：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '眼位'"> |
|
||||
<div class="width-180 center"> |
|
||||
近：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '梯度性AC/A'"> |
|
||||
<div class="width-180 center"> |
|
||||
计算性AC/A：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '融像性聚散(FV)'"> |
|
||||
<div class="width-180 center"> |
|
||||
近BI：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '相对调节(RA)'"> |
|
||||
<div class="width-180 center"> |
|
||||
PRA：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '调节幅度(AMP)'"> |
|
||||
<div class="width-180 center"> |
|
||||
OU：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '调节灵活度(AF)'"> |
|
||||
<div class="width-180 center"> |
|
||||
OU：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '调节反应(FCC)'"> |
|
||||
<div class="width-180 center"> |
|
||||
OU：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- <!– 签字 –>--> |
|
||||
<!-- <div v-if="scope.row" class="sign center">--> |
|
||||
<!-- <!– <span v-if="!operationRecord.doctorSignImg" class="sign" @click="singHandle('doctorSignImg')">点击签字</span>–>--> |
|
||||
<!-- <!– <img v-if="operationRecord.doctorSignImg" :src="operationRecord.doctorSignImg" alt="" width="90px" @click="singHandle('doctorSignImg')">–>--> |
|
||||
<!-- </div>--> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<!-- <el-table-column label="手术记录" :resizable="false">--> |
|
||||
<!-- <template slot-scope="scope">--> |
|
||||
<!-- <span v-if="scope.row.name !=='手术日期/主刀签字'">--> |
|
||||
<!--<!– <span v-if="!operationRecord.nurseSignImgOne" class="sign" @click="singHandle('nurseSignImgOne')">点击签字</span>–>--> |
|
||||
<!--<!– <img v-if="operationRecord.nurseSignImgOne" :src="operationRecord.nurseSignImgOne" alt="" width="90px" @click="singHandle('nurseSignImgOne')">–>--> |
|
||||
<!-- </span>--> |
|
||||
<!-- </template>--> |
|
||||
<!-- </el-table-column>--> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
archiveCaseCRFItem: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
}, |
|
||||
formContent: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
dataForm: { |
|
||||
yghcValue: '', |
|
||||
operationListValueOD: [] |
|
||||
}, |
|
||||
tableData: [{ |
|
||||
name: '屈光状态', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '1', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '交替遮盖试验(CT)', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '集合近点(NPC)', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: 'Worth-4-dot', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '立体视(stereo)', |
|
||||
}, { |
|
||||
name: '眼位', |
|
||||
}, { |
|
||||
name: '梯度性AC/A', |
|
||||
}, { |
|
||||
name: '融像性聚散(FV)', |
|
||||
}, { |
|
||||
name: 'FV', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '相对调节(RA)', |
|
||||
}, { |
|
||||
name: '调节幅度(AMP)', |
|
||||
}, { |
|
||||
name: '调节灵活度(AF)', |
|
||||
}, { |
|
||||
name: '调节反应(FCC)', |
|
||||
}, { |
|
||||
name: '初步诊断', |
|
||||
}, { |
|
||||
name: '2', |
|
||||
}, { |
|
||||
name: '3', |
|
||||
}, { |
|
||||
name: '4', |
|
||||
}] |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
operationRecord: { |
|
||||
get() { |
|
||||
return this.$store.getters.operationRecord |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
operationRecord: { |
|
||||
handler(value) { |
|
||||
console.log(value) |
|
||||
}, |
|
||||
deep: true, |
|
||||
immediate: true |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
methods: { |
|
||||
// 签名 |
|
||||
singHandle(text) { |
|
||||
const value = { |
|
||||
text: text, |
|
||||
pageName: 'operationRecord' |
|
||||
} |
|
||||
this.$store.commit('beginSign', value) |
|
||||
}, |
|
||||
objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
|
||||
if (columnIndex === 0) { |
|
||||
if (rowIndex === 0 || rowIndex === 8) { |
|
||||
return { |
|
||||
rowspan: 2, |
|
||||
colspan: 1 |
|
||||
} |
|
||||
} |
|
||||
} else if (rowIndex === 4) { |
|
||||
if (columnIndex === 1) { |
|
||||
return { |
|
||||
rowspan: 1, |
|
||||
colspan: 2 |
|
||||
} |
|
||||
} |
|
||||
} else if (rowIndex === 14) { |
|
||||
if (columnIndex === 1) { |
|
||||
return { |
|
||||
rowspan: 1, |
|
||||
colspan: 2 |
|
||||
} |
|
||||
} |
|
||||
} else if (rowIndex === 15) { |
|
||||
return { |
|
||||
rowspan: 1 |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
#operation-record { |
|
||||
//height: 93%; |
|
||||
// overflow: auto; |
|
||||
.operation-record-table { |
|
||||
width: 100%; |
|
||||
.operation-text { |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.text { |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.sign { |
|
||||
cursor: pointer; |
|
||||
color: #46a1ff; |
|
||||
font-weight: 400; |
|
||||
} |
|
||||
} |
|
||||
.center { |
|
||||
text-align: center; |
|
||||
} |
|
||||
.left { |
|
||||
text-align: left; |
|
||||
} |
|
||||
|
|
||||
.width-50 { |
|
||||
.el-input { |
|
||||
width: 50px; |
|
||||
} |
|
||||
} |
|
||||
.width-70 { |
|
||||
.el-input { |
|
||||
width: 70px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.width-100 { |
|
||||
.el-input { |
|
||||
width: 100px; |
|
||||
} |
|
||||
} |
|
||||
.width-120 { |
|
||||
.el-input { |
|
||||
width: 120px; |
|
||||
} |
|
||||
} |
|
||||
.width-180 { |
|
||||
.el-input { |
|
||||
width: 180px; |
|
||||
} |
|
||||
} |
|
||||
.el-input__inner { |
|
||||
border: none; |
|
||||
height: 26px !important; |
|
||||
line-height: 26px !important; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.el-input__inner { |
|
||||
border-bottom: 1px solid #ccc; |
|
||||
border-radius: 0; |
|
||||
padding: 0; |
|
||||
} |
|
||||
.el-input__prefix { |
|
||||
display: none; |
|
||||
} |
|
||||
.el-date-editor.el-input, |
|
||||
.el-date-editor.el-input__inner { |
|
||||
width: 140px; |
|
||||
} |
|
||||
.el-input__suffix { |
|
||||
top: -7px; |
|
||||
} |
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label { |
|
||||
color: #606266; |
|
||||
} |
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner, |
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner { |
|
||||
background: #767676; |
|
||||
border-color: #767676; |
|
||||
} |
|
||||
.el-checkbox__inner:hover, |
|
||||
.el-checkbox__inner { |
|
||||
border-color: #767676; |
|
||||
} |
|
||||
.el-radio__input.is-checked + .el-radio__label { |
|
||||
color: #606266; |
|
||||
} |
|
||||
.el-radio__input.is-checked .el-radio__inner { |
|
||||
background: #767676; |
|
||||
border-color: #767676; |
|
||||
} |
|
||||
.el-radio { |
|
||||
margin-right: 8px; |
|
||||
display: block; |
|
||||
} |
|
||||
.el-radio__inner { |
|
||||
border: 1px solid #767676 !important; |
|
||||
} |
|
||||
.el-radio__inner:hover { |
|
||||
border-color: #767676; |
|
||||
} |
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { |
|
||||
background: none !important; |
|
||||
} |
|
||||
.has-gutter { |
|
||||
display: none; |
|
||||
.cell { |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.el-table__cell { |
|
||||
background: #ced4d9; |
|
||||
} |
|
||||
} |
|
||||
// .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed { |
|
||||
// border-right: 1px solid #808080; |
|
||||
// } |
|
||||
// .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf { |
|
||||
// border-bottom: 1px solid #808080 !important; |
|
||||
// } |
|
||||
// .el-table--border, .el-table--group { |
|
||||
// border: 1px solid #808080; |
|
||||
// } |
|
||||
// .el-table--border { |
|
||||
// border-bottom: 0; |
|
||||
// } |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,481 +0,0 @@ |
|||||
<template> |
|
||||
<div id="operation-record" style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always"> |
|
||||
<p style="color:#000000;font-size:32px;margin:0 0 30px 0;text-align:center;"> |
|
||||
三级视功能检查报告单 |
|
||||
</p> |
|
||||
<div> |
|
||||
<span style="margin-right: 32px;">登记号：<el-input v-model="dataForm.patientId" style="width: 180px" size="small" clearable placeholder="" /></span> |
|
||||
<span style="margin-right: 32px;">姓名：<el-input v-model="dataForm.patientId" style="width: 180px" size="small" clearable placeholder="" /></span> |
|
||||
<span style="margin-right: 32px;">性别：<el-input v-model="dataForm.patientId" style="width: 180px" size="small" clearable placeholder="" /></span> |
|
||||
<span style="margin-right: 32px;">年龄：<el-input v-model="dataForm.patientId" style="width: 180px" size="small" clearable placeholder="" /></span> |
|
||||
</div> |
|
||||
<div class="operation-record-table"> |
|
||||
<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"> |
|
||||
<el-table-column label="" width="" align="center" :resizable="false"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.name == 1"> |
|
||||
<div class="width-180 center"> |
|
||||
OS：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-else-if="scope.row.name == 'FV'"> |
|
||||
<div class="width-180 center"> |
|
||||
远BO：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<p v-else>{{ scope.row.name }}</p> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="" width="" :resizable="false" prop="type"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.name == '1'"> |
|
||||
<div class="width-180 center"> |
|
||||
VA：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '屈光状态'"> |
|
||||
<div class="width-180 center"> |
|
||||
OD：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '交替遮盖试验(CT)'"> |
|
||||
<div class="width-180 center"> |
|
||||
远：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
近：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '集合近点(NPC)'"> |
|
||||
<div class="width-180 center"> |
|
||||
破裂点：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == 'Worth-4-dot'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
@D( |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
) |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '立体视(stereo)'"> |
|
||||
<div class="width-180 center"> |
|
||||
RDD(远)：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '眼位'"> |
|
||||
<div class="width-180 center"> |
|
||||
远：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '梯度性AC/A'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '融像性聚散(FV)'"> |
|
||||
<div class="width-180 center"> |
|
||||
远BI：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == 'FV'"> |
|
||||
<div class="width-180 center"> |
|
||||
近BO：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '相对调节(RA)'"> |
|
||||
<div class="width-180 center"> |
|
||||
NRA：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '调节幅度(AMP)'"> |
|
||||
<div class="width-180 center"> |
|
||||
OD：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
OS：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '调节灵活度(AF)'"> |
|
||||
<div class="width-180 center"> |
|
||||
OD：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
OS：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '调节反应(FCC)'"> |
|
||||
<div class="width-180 center"> |
|
||||
OD：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
OS：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '初步诊断'"> |
|
||||
<div class="width-180"> |
|
||||
<div> |
|
||||
<el-checkbox v-model="dataForm.yghcValue">正常</el-checkbox> |
|
||||
</div> |
|
||||
<div style="display: flex"> |
|
||||
<p style="width: 120px;">聚散功能异常：</p> |
|
||||
<el-checkbox-group v-model="dataForm.yghcValue"> |
|
||||
<el-checkbox label="集合不足"></el-checkbox> |
|
||||
<el-checkbox label="集合过度"></el-checkbox> |
|
||||
<el-checkbox label="散开不足"></el-checkbox> |
|
||||
<el-checkbox label="散开过度"></el-checkbox> |
|
||||
<el-checkbox label="内隐科"></el-checkbox> |
|
||||
<el-checkbox label="外隐科"></el-checkbox> |
|
||||
<el-checkbox label="假性集合不足"></el-checkbox> |
|
||||
<el-checkbox label="融像性聚散功能异常"></el-checkbox> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
<div style="display: flex"> |
|
||||
<p style="width: 120px;">调节功能异常：</p> |
|
||||
<el-checkbox-group v-model="dataForm.yghcValue"> |
|
||||
<el-checkbox label="调节灵敏度下降"></el-checkbox> |
|
||||
<el-checkbox label="调节不能持久"></el-checkbox> |
|
||||
<el-checkbox label="调节不足"></el-checkbox> |
|
||||
<el-checkbox label="调节过度"></el-checkbox> |
|
||||
<el-checkbox label="调节麻痹"></el-checkbox> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
<div style="display: flex"> |
|
||||
<span>斜视：</span> |
|
||||
<el-checkbox-group v-model="dataForm.yghcValue"> |
|
||||
<el-checkbox label="内斜视"></el-checkbox> |
|
||||
<el-checkbox label="外斜视"></el-checkbox> |
|
||||
<el-checkbox label="间歇性外斜视"></el-checkbox> |
|
||||
<el-checkbox label="垂直斜"></el-checkbox> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- <!– 签字 –>--> |
|
||||
<!-- <div v-if="scope.row" class="sign center">--> |
|
||||
<!-- <!– <span v-if="!operationRecord.doctorSignImg" class="sign" @click="singHandle('doctorSignImg')">点击签字</span>–>--> |
|
||||
<!-- <!– <img v-if="operationRecord.doctorSignImg" :src="operationRecord.doctorSignImg" alt="" width="90px" @click="singHandle('doctorSignImg')">–>--> |
|
||||
<!-- </div>--> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="" width="" :resizable="false"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.name == '屈光状态'"> |
|
||||
<div class="width-180 center"> |
|
||||
VA：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '交替遮盖试验(CT)'"> |
|
||||
<div class="width-180 center"> |
|
||||
眼球运动：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '集合近点(NPC)'"> |
|
||||
<div class="width-180 center"> |
|
||||
恢复点：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '立体视(stereo)'"> |
|
||||
<div class="width-180 center"> |
|
||||
TNO(近)：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '眼位'"> |
|
||||
<div class="width-180 center"> |
|
||||
近：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '梯度性AC/A'"> |
|
||||
<div class="width-180 center"> |
|
||||
计算性AC/A：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '融像性聚散(FV)'"> |
|
||||
<div class="width-180 center"> |
|
||||
近BI：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '相对调节(RA)'"> |
|
||||
<div class="width-180 center"> |
|
||||
PRA：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '调节幅度(AMP)'"> |
|
||||
<div class="width-180 center"> |
|
||||
OU：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '调节灵活度(AF)'"> |
|
||||
<div class="width-180 center"> |
|
||||
OU：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '调节反应(FCC)'"> |
|
||||
<div class="width-180 center"> |
|
||||
OU：<el-input v-model="dataForm.yghcValue" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- <!– 签字 –>--> |
|
||||
<!-- <div v-if="scope.row" class="sign center">--> |
|
||||
<!-- <!– <span v-if="!operationRecord.doctorSignImg" class="sign" @click="singHandle('doctorSignImg')">点击签字</span>–>--> |
|
||||
<!-- <!– <img v-if="operationRecord.doctorSignImg" :src="operationRecord.doctorSignImg" alt="" width="90px" @click="singHandle('doctorSignImg')">–>--> |
|
||||
<!-- </div>--> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<!-- <el-table-column label="手术记录" :resizable="false">--> |
|
||||
<!-- <template slot-scope="scope">--> |
|
||||
<!-- <span v-if="scope.row.name !=='手术日期/主刀签字'">--> |
|
||||
<!--<!– <span v-if="!operationRecord.nurseSignImgOne" class="sign" @click="singHandle('nurseSignImgOne')">点击签字</span>–>--> |
|
||||
<!--<!– <img v-if="operationRecord.nurseSignImgOne" :src="operationRecord.nurseSignImgOne" alt="" width="90px" @click="singHandle('nurseSignImgOne')">–>--> |
|
||||
<!-- </span>--> |
|
||||
<!-- </template>--> |
|
||||
<!-- </el-table-column>--> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
archiveCaseCRFItem: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
}, |
|
||||
formContent: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
dataForm: { |
|
||||
yghcValue: '', |
|
||||
operationListValueOD: [] |
|
||||
}, |
|
||||
tableData: [{ |
|
||||
name: '屈光状态', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '1', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '交替遮盖试验(CT)', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '集合近点(NPC)', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: 'Worth-4-dot', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '立体视(stereo)', |
|
||||
}, { |
|
||||
name: '眼位', |
|
||||
}, { |
|
||||
name: '梯度性AC/A', |
|
||||
}, { |
|
||||
name: '融像性聚散(FV)', |
|
||||
}, { |
|
||||
name: 'FV', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '相对调节(RA)', |
|
||||
}, { |
|
||||
name: '调节幅度(AMP)', |
|
||||
}, { |
|
||||
name: '调节灵活度(AF)', |
|
||||
}, { |
|
||||
name: '调节反应(FCC)', |
|
||||
}, { |
|
||||
name: '初步诊断', |
|
||||
}, { |
|
||||
name: '2', |
|
||||
}, { |
|
||||
name: '3', |
|
||||
}, { |
|
||||
name: '4', |
|
||||
}] |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
operationRecord: { |
|
||||
get() { |
|
||||
return this.$store.getters.operationRecord |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
operationRecord: { |
|
||||
handler(value) { |
|
||||
console.log(value) |
|
||||
}, |
|
||||
deep: true, |
|
||||
immediate: true |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
methods: { |
|
||||
// 签名 |
|
||||
singHandle(text) { |
|
||||
const value = { |
|
||||
text: text, |
|
||||
pageName: 'operationRecord' |
|
||||
} |
|
||||
this.$store.commit('beginSign', value) |
|
||||
}, |
|
||||
objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
|
||||
if (columnIndex === 0) { |
|
||||
if (rowIndex === 0 || rowIndex === 8) { |
|
||||
return { |
|
||||
rowspan: 2, |
|
||||
colspan: 1 |
|
||||
} |
|
||||
} |
|
||||
} else if (rowIndex === 4) { |
|
||||
if (columnIndex === 1) { |
|
||||
return { |
|
||||
rowspan: 1, |
|
||||
colspan: 2 |
|
||||
} |
|
||||
} |
|
||||
} else if (rowIndex === 14) { |
|
||||
if (columnIndex === 1) { |
|
||||
return { |
|
||||
rowspan: 1, |
|
||||
colspan: 2 |
|
||||
} |
|
||||
} |
|
||||
} else if (rowIndex === 15) { |
|
||||
return { |
|
||||
rowspan: 1, |
|
||||
colspan: 3 |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
#operation-record { |
|
||||
//height: 93%; |
|
||||
// overflow: auto; |
|
||||
.operation-record-table { |
|
||||
width: 100%; |
|
||||
.operation-text { |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.text { |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.sign { |
|
||||
cursor: pointer; |
|
||||
color: #46a1ff; |
|
||||
font-weight: 400; |
|
||||
} |
|
||||
} |
|
||||
.center { |
|
||||
text-align: center; |
|
||||
} |
|
||||
.left { |
|
||||
text-align: left; |
|
||||
} |
|
||||
|
|
||||
.width-50 { |
|
||||
.el-input { |
|
||||
width: 50px; |
|
||||
} |
|
||||
} |
|
||||
.width-70 { |
|
||||
.el-input { |
|
||||
width: 70px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.width-100 { |
|
||||
.el-input { |
|
||||
width: 100px; |
|
||||
} |
|
||||
} |
|
||||
.width-120 { |
|
||||
.el-input { |
|
||||
width: 120px; |
|
||||
} |
|
||||
} |
|
||||
.width-180 { |
|
||||
.el-input { |
|
||||
width: 180px; |
|
||||
} |
|
||||
} |
|
||||
.el-input__inner { |
|
||||
border: none; |
|
||||
height: 26px !important; |
|
||||
line-height: 26px !important; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.el-input__inner { |
|
||||
border-bottom: 1px solid #ccc; |
|
||||
border-radius: 0; |
|
||||
padding: 0; |
|
||||
} |
|
||||
.el-input__prefix { |
|
||||
display: none; |
|
||||
} |
|
||||
.el-date-editor.el-input, |
|
||||
.el-date-editor.el-input__inner { |
|
||||
width: 140px; |
|
||||
} |
|
||||
.el-input__suffix { |
|
||||
top: -7px; |
|
||||
} |
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label { |
|
||||
color: #606266; |
|
||||
} |
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner, |
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner { |
|
||||
background: #767676; |
|
||||
border-color: #767676; |
|
||||
} |
|
||||
.el-checkbox__inner:hover, |
|
||||
.el-checkbox__inner { |
|
||||
border-color: #767676; |
|
||||
} |
|
||||
.el-radio__input.is-checked + .el-radio__label { |
|
||||
color: #606266; |
|
||||
} |
|
||||
.el-radio__input.is-checked .el-radio__inner { |
|
||||
background: #767676; |
|
||||
border-color: #767676; |
|
||||
} |
|
||||
.el-radio { |
|
||||
margin-right: 8px; |
|
||||
display: block; |
|
||||
} |
|
||||
.el-radio__inner { |
|
||||
border: 1px solid #767676 !important; |
|
||||
} |
|
||||
.el-radio__inner:hover { |
|
||||
border-color: #767676; |
|
||||
} |
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { |
|
||||
background: none !important; |
|
||||
} |
|
||||
.has-gutter { |
|
||||
display: none; |
|
||||
.cell { |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.el-table__cell { |
|
||||
background: #ced4d9; |
|
||||
} |
|
||||
} |
|
||||
// .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed { |
|
||||
// border-right: 1px solid #808080; |
|
||||
// } |
|
||||
// .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf { |
|
||||
// border-bottom: 1px solid #808080 !important; |
|
||||
// } |
|
||||
// .el-table--border, .el-table--group { |
|
||||
// border: 1px solid #808080; |
|
||||
// } |
|
||||
// .el-table--border { |
|
||||
// border-bottom: 0; |
|
||||
// } |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,329 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 分诊管理 --> |
|
||||
<div class="patient-info"> |
|
||||
<template v-if="isShowPatient"> |
|
||||
<div v-if="!detailViewVisible"> |
|
||||
<div class="patient-info-head"> |
|
||||
<el-form :inline="true" :model="dataForm" class="demo-form-inline" @keyup.enter.native="getDataListInitial()"> |
|
||||
<el-form-item label="病历号:"> |
|
||||
<el-input v-model="dataForm.patientId" size="small" clearable placeholder="病历号" @clear="getDataListInitial()" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="患者姓名:"> |
|
||||
<el-input v-model="dataForm.patientName" placeholder="患者姓名" size="small" clearable @clear="getDataListInitial()" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="身份证:"> |
|
||||
<el-input v-model="dataForm.patientIdNumber" size="small" clearable placeholder="身份证" @clear="getDataListInitial()" /> |
|
||||
</el-form-item> |
|
||||
<!-- <el-form-item label="管理师:"> |
|
||||
<el-select v-model="dataForm.doctorName" placeholder="管理师" size="small" clearable @clear="getDataListInitial()" @change="getDataListInitial()"> |
|
||||
<el-option v-for="(item,index) in doctorNameList" :key="index" :label="item" :value="item" /> |
|
||||
</el-select> |
|
||||
</el-form-item> --> |
|
||||
<!-- <el-form-item label="患者类别:"> |
|
||||
<el-select v-model="dataForm.patType" placeholder="患者类别" size="small" clearable @clear="getDataList()"> |
|
||||
<el-option v-for="(item,index) in patientTypeList" :key="index" :label="item" :value="item" /> |
|
||||
</el-select> |
|
||||
</el-form-item> --> |
|
||||
<!-- <el-form-item prop="dateRange" label="收录日期" class="form-item-date"> |
|
||||
<el-date-picker |
|
||||
v-model="nextVisitTime" |
|
||||
size="small" |
|
||||
type="daterange" |
|
||||
range-separator="-" |
|
||||
start-placeholder="开始日期" |
|
||||
end-placeholder="结束日期" |
|
||||
value-format="yyyy-MM-dd" |
|
||||
@change="dateChange" |
|
||||
/> |
|
||||
</el-form-item> --> |
|
||||
<!-- <el-form-item label="诊断内容:"> |
|
||||
<el-input v-model="dataForm.diagNoseName" size="small" clearable @clear="getDataList()" /> |
|
||||
</el-form-item> --> |
|
||||
<el-form-item style="flex:1"> |
|
||||
<el-button type="primary" icon="el-icon-search" size="small" @click="getDataListInitial()">查询</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
<div class="patient-info-content"> |
|
||||
<head-template head-left="患者列表"> |
|
||||
<!-- <el-button plain icon="el-icon-user" size="small">授权</el-button> --> |
|
||||
<!-- <el-button size="small"> |
|
||||
<svg-icon icon-class="icon-export" style="font-size:12px;" /> |
|
||||
<span style="padding-left:5px;vertical-align: middle;">导出</span> |
|
||||
</el-button> --> |
|
||||
<!-- <el-button size="small" icon="el-icon-plus" @click="addOrUpdateHandle('','','新增患者')">新增</el-button>--> |
|
||||
<!-- <el-button type="primary" size="small" @click="HISHandle">--> |
|
||||
<!-- <svg-icon icon-class="icon-HIS-up" style="font-size:12px;" />--> |
|
||||
<!-- <span style="padding-left:5px;vertical-align: middle;">HIS引入</span>--> |
|
||||
<!-- </el-button>--> |
|
||||
</head-template> |
|
||||
<el-table |
|
||||
ref="multipleTable" |
|
||||
:data="dataList" |
|
||||
tooltip-effect="dark" |
|
||||
style="width: 100%" |
|
||||
:height="tableHeight" |
|
||||
@selection-change="handleSelectionChange" |
|
||||
@sort-change="dataListSortChangeHandle" |
|
||||
> |
|
||||
<!-- <el-table-column type="selection" width="45" /> --> |
|
||||
<!-- <el-table-column v-if="dataForm.drgsName=='眼视光'" prop="patType" label="患者类别" header-align="center" align="center" width="140" /> --> |
|
||||
<el-table-column prop="patientId" label="病历号 " header-align="center" align="center" /> |
|
||||
<el-table-column prop="patientName" label="患者姓名" header-align="center" align="center" /> |
|
||||
<el-table-column prop="patientSex" label="患者性别" header-align="center" align="center" /> |
|
||||
<el-table-column label="出生日期" header-align="center" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.patientBirthday ? $options.filters.dateFilterTwo( scope.row.patientBirthday): '- ' }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<!-- <el-table-column prop="doctorName" label="管理师" header-align="center" align="center" />--> |
|
||||
<el-table-column prop="operation" label="操作" header-align="center" align="center" width="220"> |
|
||||
<template slot-scope="scope"> |
|
||||
<span |
|
||||
style="color: #1890ff; padding-right: 8px" |
|
||||
class="operation-details" |
|
||||
@click="showDetail(scope.row)" |
|
||||
>病历</span> |
|
||||
<span |
|
||||
style="color: #1890ff; padding-right: 8px" |
|
||||
class="operation-details" |
|
||||
@click="browseClick(scope.row)" |
|
||||
>详情</span> |
|
||||
<!-- <span--> |
|
||||
<!-- style="color: #1890ff; padding-right: 8px"--> |
|
||||
<!-- class="operation-details"--> |
|
||||
<!-- @click="addOrUpdateHandle(scope.row.patientIdNumber,scope.row,'修改患者')"--> |
|
||||
<!-- >编辑</span>--> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<el-pagination background layout="total,prev, pager, next" :total="total" :current-page.sync="page" @current-change="pageCurrentChangeHandle" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<detail-view v-if="detailViewVisible" :id="detailId" ref="viewRef" :patient-id="patientId" is-search="" @detailViewVisible="detailViewVisible=false" /> |
|
||||
<!-- 弹窗, 新增 / 修改 --> |
|
||||
<add-or-up date v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataListInitial" @closeDialog="addOrUpdateVisible=false" /> |
|
||||
<!-- 修改身份证 --> |
|
||||
<edit-patid v-if="editPatidVisible" ref="editPatidRef" @editPatidVisible="editPatidVisible=false" @refreshDataList="getDataListInitial" /> |
|
||||
<!-- HIS引入弹框 --> |
|
||||
<!-- <his-add v-if="HisAddVisible" ref="HisAddRef" />--> |
|
||||
<!-- 加入分组弹框 --> |
|
||||
<!-- <add-group v-if="addGroupVisible" ref="addGroupRef" @cancelClick="cancelClick" />--> |
|
||||
<!-- 详情页 --> |
|
||||
</template> |
|
||||
<router-view v-else /> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import checked from '@/mixins/checked' |
|
||||
import tableAutoHeight from '@/mixins/tableAutoHeight' |
|
||||
import headTemplate from '@/components/head' |
|
||||
import mixinViewModule from '@/mixins/view-module' |
|
||||
import AddOrUpdate from './patient-add-or-update' |
|
||||
import editPatid from './editPatid' |
|
||||
import hisAdd from './HIS-add' |
|
||||
import detailView from '@/components/360View/index1' // 360试图 |
|
||||
export default { |
|
||||
components: { |
|
||||
headTemplate, |
|
||||
AddOrUpdate, |
|
||||
editPatid, |
|
||||
detailView, |
|
||||
hisAdd |
|
||||
}, |
|
||||
mixins: [checked, mixinViewModule, tableAutoHeight], |
|
||||
data() { |
|
||||
return { |
|
||||
mixinViewModuleOptions: { |
|
||||
getDataListURL: '/patient/page', |
|
||||
deleteURL: '/patient/manage', |
|
||||
getDataListIsPage: true |
|
||||
}, |
|
||||
cheackAllFooter: false, |
|
||||
nextVisitTime: [], |
|
||||
isShowPatient: true, |
|
||||
detailViewVisible: false, |
|
||||
HisAddVisible: false, |
|
||||
editPatidVisible: false, |
|
||||
dataForm: { |
|
||||
patientId: '', |
|
||||
patientName: '', |
|
||||
// doctorName: '', |
|
||||
// beginDate: '', |
|
||||
// endDate: '', |
|
||||
patientIdNumber: '' |
|
||||
}, |
|
||||
doctorNameList: [], |
|
||||
currentTableList: [], |
|
||||
addGroupVisible: false, |
|
||||
patientId: '', |
|
||||
detailId: '' |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
$route(val) { |
|
||||
// 如果两级以上就隐藏父级 |
|
||||
this.isShowPatient = !(val.matched.length > 2) |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.isShowPatient = !(this.$route.matched.length > 2) |
|
||||
// this.getDoctorName() |
|
||||
// this.gettPatType() |
|
||||
}, |
|
||||
methods: { |
|
||||
// 浏览 |
|
||||
browseClick(scopeRow) { |
|
||||
window.sessionStorage.removeItem('itemCurrentIndex') |
|
||||
window.sessionStorage.removeItem('itemListIndex') |
|
||||
this.$router.push({ |
|
||||
path: '/patientDetail', |
|
||||
query: { |
|
||||
info: this.$Base64.encode(JSON.stringify({ |
|
||||
patientIdNumber: scopeRow.patientIdNumber, |
|
||||
patientCentreId: scopeRow.patientCentreId, |
|
||||
patientId: scopeRow.patientId, |
|
||||
title: '分诊' |
|
||||
// crfId: scopeRow.crfId, |
|
||||
})) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 日期改变时 |
|
||||
dateChange(e) { |
|
||||
if (this.dataForm.drgsName === '青光眼') { |
|
||||
this.dataForm.beginDate = e ? e[0] : '' |
|
||||
this.dataForm.endDate = e ? e[1] : '' |
|
||||
} else { |
|
||||
this.dataForm.slBeginDate = e ? e[0] : '' |
|
||||
this.dataForm.slEndDate = e ? e[1] : '' |
|
||||
} |
|
||||
this.getDataListInitial() |
|
||||
}, |
|
||||
// 获取管理师 |
|
||||
// async getDoctorName() { |
|
||||
// const { data: res } = await this.$http.get('/pat/Manage/selectDoctorName', { |
|
||||
// params: { |
|
||||
// drgsName: window.localStorage.getItem('identity') |
|
||||
// } |
|
||||
// }) |
|
||||
// if (res.code === 0) { |
|
||||
// this.doctorNameList = res.data |
|
||||
// } else { |
|
||||
// this.$message.error(res.msg) |
|
||||
// } |
|
||||
// }, |
|
||||
// His引入 |
|
||||
// HISHandle() { |
|
||||
// this.HisAddVisible = true |
|
||||
// this.$nextTick(() => { |
|
||||
// this.$refs.HisAddRef.init() |
|
||||
// }) |
|
||||
// }, |
|
||||
// 查看详情 |
|
||||
showDetail(scopeRow) { |
|
||||
console.log(scopeRow) |
|
||||
this.detailViewVisible = true |
|
||||
this.patientId = scopeRow.patientId |
|
||||
this.$nextTick(() => { |
|
||||
// this.$refs.viewRef.drawer = false |
|
||||
// // 根据id获取患者信息--中间上侧患者信息 |
|
||||
// this.$refs.viewRef.getPatientData() |
|
||||
// // 获取时间轴数据--左侧时间轴 |
|
||||
// this.$refs.viewRef.getTimeAxisData() |
|
||||
// // 设置时间轴索引和tab在第一项 |
|
||||
// this.$refs.viewRef.visible = true |
|
||||
// this.$refs.viewRef.drawer = true |
|
||||
// this.$refs.viewRef.isActive = 1 |
|
||||
// this.$refs.viewRef.init() |
|
||||
// this.$refs.viewRef.setIndex() |
|
||||
}) |
|
||||
}, |
|
||||
// 加入分组 |
|
||||
// addGroupHandle() { |
|
||||
// this.addGroupVisible = true |
|
||||
// this.$nextTick(() => { |
|
||||
// const patientIdNumberList = [] |
|
||||
// this.currentTableList.forEach(item => { |
|
||||
// patientIdNumberList.push(item.patientIdNumber) |
|
||||
// }) |
|
||||
// this.$refs.addGroupRef.dataForm.patientIdNumberList = patientIdNumberList |
|
||||
// this.$refs.addGroupRef.init() |
|
||||
// }) |
|
||||
// }, |
|
||||
// 取消table勾选 |
|
||||
cancelClick() { |
|
||||
this.cheackAllFooter = false |
|
||||
this.cheackReverseFooter = false |
|
||||
this.$refs.multipleTable.clearSelection() |
|
||||
} |
|
||||
// 发送问卷 |
|
||||
// async sendQuestionHandle(scopeRow) { |
|
||||
// const { data: res } = await this.$http.get(`/patient/manage/callbackWechat/${scopeRow.patientCentreId}/${scopeRow.patientIdNumber}/${scopeRow.patientId}`) |
|
||||
// if (res.code === 0) { |
|
||||
// this.$message({ |
|
||||
// message: '发送问卷成功', |
|
||||
// type: 'success' |
|
||||
// }) |
|
||||
// } else { |
|
||||
// this.$message.error(res.msg) |
|
||||
// } |
|
||||
// } |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.patient-info { |
|
||||
|
|
||||
.patient-info-head, |
|
||||
.patient-info-content { |
|
||||
background: #fff; |
|
||||
.head { |
|
||||
padding-bottom: 10px; |
|
||||
} |
|
||||
} |
|
||||
.patient-info-content { |
|
||||
padding: 10px 16px; |
|
||||
} |
|
||||
.patient-info-head { |
|
||||
margin-bottom: 10px; |
|
||||
padding: 10px 16px; |
|
||||
} |
|
||||
.operation-delete, |
|
||||
.operation-details { |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.patient-info { |
|
||||
.patient-info-head { |
|
||||
.el-form { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
.el-form-item { |
|
||||
display: flex; |
|
||||
} |
|
||||
.el-form-item__label { |
|
||||
min-width: 75px; |
|
||||
} |
|
||||
.el-form-item { |
|
||||
margin-bottom: 0; |
|
||||
width: 25%; |
|
||||
} |
|
||||
.el-form-item__content, |
|
||||
.el-select, |
|
||||
.el-range-editor--small.el-input__inner { |
|
||||
width: 100%; |
|
||||
} |
|
||||
.form-item-date .el-form-item__content { |
|
||||
min-width: 180px; |
|
||||
} |
|
||||
} |
|
||||
.el-select { |
|
||||
width: 100%; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,216 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
class="patientDialog" |
|
||||
:visible.sync="visible" |
|
||||
width="40%" |
|
||||
:title="dataForm.title" |
|
||||
@close="closeDialog" |
|
||||
> |
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule"> |
|
||||
<el-form-item label="病历号:" label-width="90px" prop="patientId" class="formItemOne"> |
|
||||
<el-input v-model="dataForm.patientId" placeholder="请输入病历号" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="患者姓名:" label-width="90px" prop="patientName"> |
|
||||
<el-input v-model="dataForm.patientName" placeholder="请输入姓名" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="身份证号:" label-width="90px" prop="patientIdNumber"> |
|
||||
<el-input v-model="dataForm.patientIdNumber" placeholder="请输入身份证号 " /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="出生日期:" label-width="90px" prop="patientBirthday"> |
|
||||
<el-date-picker |
|
||||
v-model="dataForm.patientBirthday" |
|
||||
align="right" |
|
||||
type="date" |
|
||||
placeholder="选择日期" |
|
||||
value-format="yyyy-MM-dd" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="性别:" label-width="90px" prop="gender"> |
|
||||
<el-radio-group v-model="dataForm.patientSex" size="medium"> |
|
||||
<el-radio-button label="男">男</el-radio-button> |
|
||||
<el-radio-button label="女">女</el-radio-button> |
|
||||
<el-radio-button label="保密">保密</el-radio-button> |
|
||||
</el-radio-group> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="联系电话:" label-width="90px" prop="patientPhone"> |
|
||||
<el-input v-model="dataForm.patientPhone" placeholder="请输入手机号" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="家庭地址:" label-width="90px" prop="patientAddress"> |
|
||||
<el-input v-model="dataForm.patientAddress" placeholder="请输入地址" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="随访方案:" label-width="90px" prop="visitId"> |
|
||||
<el-select v-model="dataForm.visitId" placeholder="请选择随访方案"> |
|
||||
<el-option v-for="item in visitList" :key="item.id" :label="item.name" :value="item.id" /> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="备注:" label-width="90px" prop="remarks"> |
|
||||
<el-input v-model="dataForm.remarks" type="textarea" /> |
|
||||
</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> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import debounce from 'lodash/debounce' |
|
||||
import { isMobile, isIDNumber } from '@/utils/validate' |
|
||||
export default { |
|
||||
props: { |
|
||||
patientTypeList: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
dataForm: { |
|
||||
patientId: '', |
|
||||
patientName: '', |
|
||||
patientIdNumber: '', |
|
||||
patientSex: '男', |
|
||||
patientPhone: '', |
|
||||
patientAddress: '', |
|
||||
patientBirthday: '', |
|
||||
visitId: '', |
|
||||
remarks: '' |
|
||||
}, |
|
||||
params: {}, |
|
||||
visitList: [] |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
dataRule() { |
|
||||
var validataMobile = (rule, value, callback) => { |
|
||||
if (value && !isMobile(value)) { |
|
||||
return callback(new Error('您输入的手机号格式不正确')) |
|
||||
} |
|
||||
callback() |
|
||||
} |
|
||||
// var validataIDNumber = (rule, value, callback) => { |
|
||||
// if (value && !isIDNumber(value)) { |
|
||||
// return callback(new Error('您输入的身份证格式不正确')) |
|
||||
// } else if (!value) { |
|
||||
// return callback(new Error('请输入身份证号')) |
|
||||
// } |
|
||||
// callback() |
|
||||
// } |
|
||||
return { |
|
||||
patientId: [ |
|
||||
{ required: true, message: '请输入病历号', trigger: 'blur' } |
|
||||
], |
|
||||
patientName: [ |
|
||||
{ required: true, message: '请输入患者姓名', trigger: 'blur' } |
|
||||
], |
|
||||
patientIdNumber: [ |
|
||||
{ required: true, message: '请输入患者身份证号', trigger: 'blur' } |
|
||||
] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.dataForm.resetFields() // 重置表单 |
|
||||
this.getVisitList() // 获取随访列表 |
|
||||
if (this.params.patientIdNumber && this.dataForm.title !== 'HIS引入') { |
|
||||
this.getInfo() |
|
||||
} else if (this.dataForm.title === 'HIS引入') { |
|
||||
this.getHisInfo() |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 获取信息 |
|
||||
getInfo() { |
|
||||
this.$http.get(`/patient/manage/${this.params.patientCentreId}/${this.params.patientIdNumber}`).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
this.dataForm = { |
|
||||
...this.dataForm, |
|
||||
...res.data |
|
||||
} |
|
||||
}).catch(() => {}) |
|
||||
}, |
|
||||
// 获取His信息 |
|
||||
getHisInfo() { |
|
||||
this.dataForm = { ...this.dataForm, ...this.params } |
|
||||
this.dataForm.revisitCycles = this.dataForm.revisitCycles ? this.dataForm.revisitCycles : '1' |
|
||||
this.dataForm.revisitCyclesUnit = this.dataForm.revisitCyclesUnit ? this.dataForm.revisitCyclesUnit : '3' |
|
||||
console.log(this.dataForm) |
|
||||
}, |
|
||||
// 获取随访列表 |
|
||||
async getVisitList() { |
|
||||
const { data: res } = await this.$http.get('/visit/getList') |
|
||||
if (res.code === 0) { |
|
||||
this.visitList = res.data |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 表单提交 |
|
||||
dataFormSubmitHandle: debounce(function() { |
|
||||
if (this.dataForm.title === 'HIS引入') { |
|
||||
// this.$parent.HisAddVisible = false |
|
||||
} |
|
||||
this.$refs.dataForm.validate((valid) => { |
|
||||
if (!valid) { |
|
||||
return false |
|
||||
} |
|
||||
this.$http[!this.dataForm.id ? 'post' : 'put']('/patient/manage', 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(() => {}) |
|
||||
}) |
|
||||
}, 1000, { leading: true, trailing: false }), |
|
||||
// 关闭弹框 |
|
||||
closeDialog() { |
|
||||
this.$emit('closeDialog') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.patientDialog { |
|
||||
.cycle-display { |
|
||||
.el-form-item__content { |
|
||||
display: flex; |
|
||||
} |
|
||||
.el-input-number { |
|
||||
width: 100px; |
|
||||
margin-right: 16px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.patientDialog { |
|
||||
.el-dialog__header { |
|
||||
margin-bottom:12px |
|
||||
} |
|
||||
.el-dialog__body { |
|
||||
padding-right: 30px; |
|
||||
} |
|
||||
.formItemOne .el-form-item__content { |
|
||||
display: flex; |
|
||||
} |
|
||||
.el-date-editor.el-input, .el-date-editor.el-input__inner { |
|
||||
width: 100%; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,123 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
class="add-archivs-dialog" |
|
||||
:visible.sync="visible" |
|
||||
width="30%" |
|
||||
title="新增档案" |
|
||||
@close="closedDialog" |
|
||||
> |
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule"> |
|
||||
<!-- <el-form-item label="姓名:" label-width="90px" prop="patientName"> |
|
||||
<el-input v-model="dataForm.patientName" disabled /> |
|
||||
</el-form-item> --> |
|
||||
<el-form-item label="建档时间:" label-width="90px" prop="checkDate"> |
|
||||
<el-date-picker |
|
||||
v-model="dataForm.checkDate" |
|
||||
type="date" |
|
||||
placeholder="选择日期" |
|
||||
value-format="yyyy-MM-dd" |
|
||||
class="checkDate-picker" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<!-- <el-form-item label="眼别:" label-width="90px" prop="patientType"> |
|
||||
<el-radio-group v-model="dataForm.eyeType" size="small"> |
|
||||
<el-radio-button label="双眼" /> |
|
||||
<el-radio-button label="OD" /> |
|
||||
<el-radio-button label="OS" /> |
|
||||
</el-radio-group> |
|
||||
</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> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import debounce from 'lodash/debounce' |
|
||||
import loginVue from '../../../pages/login.vue' |
|
||||
export default { |
|
||||
props: { |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
dataForm: { |
|
||||
id: '', |
|
||||
patientCentreId: '', |
|
||||
patientIdNumber: '', |
|
||||
checkDate: '', |
|
||||
remark: '' |
|
||||
// eyeType: '双眼' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
dataRule() { |
|
||||
return { |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.dataForm.checkDate = this.$moment().format('YYYY-MM-DD') |
|
||||
this.visible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.dataForm.resetFields() // 重置表单 |
|
||||
}) |
|
||||
}, |
|
||||
// 获取信息 |
|
||||
getInfo() { |
|
||||
}, |
|
||||
// 表单提交 |
|
||||
dataFormSubmitHandle: debounce(function() { |
|
||||
this.$refs.dataForm.validate((valid) => { |
|
||||
if (!valid) { |
|
||||
return false |
|
||||
} |
|
||||
this.$http[!this.dataForm.id ? 'post' : 'put']('/patient/archive', 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('getArchiveList') |
|
||||
} |
|
||||
}) |
|
||||
}).catch(() => {}) |
|
||||
}) |
|
||||
}, 1000, { leading: true, trailing: false }), |
|
||||
// 关闭表单 |
|
||||
closedDialog() { |
|
||||
this.$emit('addArchivsVisible') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.add-archivs-dialog { |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.add-archivs-dialog { |
|
||||
.checkDate-picker { |
|
||||
width: 100%; |
|
||||
} |
|
||||
.el-dialog__header { |
|
||||
margin-bottom:12px |
|
||||
} |
|
||||
.el-dialog__body { |
|
||||
padding-right: 30px; |
|
||||
} |
|
||||
.formItemOne .el-form-item__content { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,111 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
class="add-caseform-dialog" |
|
||||
:visible.sync="visible" |
|
||||
width="30%" |
|
||||
title="新增病历" |
|
||||
@close="closedDialog" |
|
||||
> |
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule"> |
|
||||
<el-form-item label="病历时间:" label-width="90px" prop="formDate"> |
|
||||
<el-date-picker |
|
||||
v-model="dataForm.formDate" |
|
||||
type="date" |
|
||||
placeholder="选择日期" |
|
||||
value-format="yyyy-MM-dd" |
|
||||
class="formDate-picker" |
|
||||
/> |
|
||||
</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> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import debounce from 'lodash/debounce' |
|
||||
export default { |
|
||||
props: { |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
dataForm: { |
|
||||
archiveId: '', |
|
||||
crfId: '', |
|
||||
formDate: '', |
|
||||
patientCentreId: '', |
|
||||
patientIdNumber: '' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
dataRule() { |
|
||||
return { |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.dataForm.resetFields() // 重置表单 |
|
||||
}) |
|
||||
}, |
|
||||
// 获取信息 |
|
||||
getInfo() { |
|
||||
}, |
|
||||
// 表单提交 |
|
||||
dataFormSubmitHandle: debounce(function() { |
|
||||
this.$refs.dataForm.validate((valid) => { |
|
||||
if (!valid) { |
|
||||
return false |
|
||||
} |
|
||||
this.$http.post('/medical/record', 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('getArchiveCaseList', res.data.archiveId) |
|
||||
} |
|
||||
}) |
|
||||
}).catch(() => {}) |
|
||||
}) |
|
||||
}, 1000, { leading: true, trailing: false }), |
|
||||
// 关闭表单 |
|
||||
closedDialog() { |
|
||||
this.$emit('addArchivsVisible') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.add-caseform-dialog { |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.add-caseform-dialog { |
|
||||
.formDate-picker { |
|
||||
width: 100%; |
|
||||
} |
|
||||
.el-dialog__header { |
|
||||
margin-bottom:12px; |
|
||||
text-align: left; |
|
||||
} |
|
||||
.el-dialog__body { |
|
||||
padding-right: 30px; |
|
||||
} |
|
||||
.formItemOne .el-form-item__content { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,199 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog fullscreen class="add-print" :visible.sync="visible" width="60%" title="批量打印" @close="closedDialog"> |
|
||||
<div class="print-content"> |
|
||||
<el-table |
|
||||
ref="multipleTable" |
|
||||
:data="commeFormList" |
|
||||
tooltip-effect="dark" |
|
||||
style="width: 100%" |
|
||||
class="table-class" |
|
||||
@selection-change="handleSelectionChange" |
|
||||
> |
|
||||
<el-table-column |
|
||||
type="selection" |
|
||||
width="55" |
|
||||
/> |
|
||||
<el-table-column |
|
||||
prop="formName" |
|
||||
label="表单名称" |
|
||||
/> |
|
||||
<el-table-column |
|
||||
prop="formType" |
|
||||
label="表单类型" |
|
||||
/> |
|
||||
</el-table> |
|
||||
<div class="crf-father"> |
|
||||
<div v-if="!crfIframeVisible" class="print-img">打印预览区域</div> |
|
||||
<crf |
|
||||
v-if="crfIframeVisible" |
|
||||
ref="crfComponent" |
|
||||
:value="printformContent" |
|
||||
:height="'100%'" |
|
||||
:js-arr="jsArr" |
|
||||
style="margin: 0;padding: 40px 0;width: 100%;border: 1px solid #000;background:#fff;" |
|
||||
:body-style-show="true" |
|
||||
/> |
|
||||
<div v-for="(item,index) in archiveCaseCRFItemArr" v-show="false" :key="index"> |
|
||||
<!-- 手术前问卷调查 --> |
|
||||
<before-operation-question v-if="item.isH5===1 && item.formName==='手术前问卷调查'" :archive-case-c-r-f-item="item" /> |
|
||||
<!-- 眼科病史问卷调查 --> |
|
||||
<eye-question v-if="item.isH5===1 && item.formName==='眼科病史问卷调查'" :archive-case-c-r-f-item="item" :question-list="item.formContent.questionList" /> |
|
||||
<safety-checklist v-if="item.isH5===1 && item.formName==='屈光中心手术安全核查表'" :archive-case-c-r-f-item="item" :form-content="item.formContent" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<template slot="footer"> |
|
||||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|
||||
<el-button type="primary" @click="printerHandle">批量打印</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import crf from '@/components/hm-crf/load_content.vue' |
|
||||
import eyeQuestion from './eye-question.vue' |
|
||||
import beforeOperationQuestion from './before-operation-question.vue' |
|
||||
import safetyChecklist from './safety-checklist.vue' |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
export default { |
|
||||
components: { |
|
||||
crf, |
|
||||
eyeQuestion, |
|
||||
beforeOperationQuestion, |
|
||||
safetyChecklist |
|
||||
}, |
|
||||
props: { |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
visible: false, |
|
||||
dataForm: { |
|
||||
}, |
|
||||
commeFormList: [], |
|
||||
crfIframeVisible: true, |
|
||||
archiveId: '', |
|
||||
currentTableList: [], |
|
||||
printformContent: '', |
|
||||
jsArr: [], |
|
||||
flag: 1, |
|
||||
archiveCaseCRFItemArr: [] |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
dataRule() { |
|
||||
return { |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.visible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.getListForPrint() |
|
||||
}) |
|
||||
}, |
|
||||
async getListForPrint(type) { |
|
||||
const { data: res } = await this.$http.get(`/medical/record/getListForPrint/${this.archiveId}`) |
|
||||
if (res.code === 0) { |
|
||||
this.commeFormList = res.data |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// check选择变化时 |
|
||||
handleSelectionChange(val) { |
|
||||
// console.log(val) |
|
||||
this.crfIframeVisible = false |
|
||||
var printContent = [] |
|
||||
let i = 0 |
|
||||
val.forEach(item => { |
|
||||
i++ |
|
||||
console.log(item) |
|
||||
if (item.isH5 === 0) { |
|
||||
item.isWrite === 0 ? this.getFirstFeedbackData(item) : '' |
|
||||
printContent.push(Base64.decode(item.formContent)) |
|
||||
} else { |
|
||||
// console.log(item.formContent) |
|
||||
item.formContent = item.formContent.questionList || item.formContent.data ? item.formContent : JSON.parse(item.formContent) |
|
||||
this.archiveCaseCRFItemArr.push(item) |
|
||||
this.$nextTick(() => { |
|
||||
item.formName === '眼科病史问卷调查' ? printContent.push(document.querySelector('#eyeQuestionPrint').outerHTML) |
|
||||
: (item.formName === '手术前问卷调查' ? printContent.push(document.querySelector('#beforeOperationPrint').outerHTML) |
|
||||
: (item.formName === '屈光中心手术安全核查表' ? printContent.push(document.querySelector('#safetyChecklist').outerHTML) : '')) |
|
||||
}) |
|
||||
} |
|
||||
if (i === val.length) { |
|
||||
setTimeout(() => { |
|
||||
console.log(printContent) |
|
||||
this.printformContent = printContent.join(' ') |
|
||||
// console.log(this.printformContent) |
|
||||
this.crfIframeVisible = true |
|
||||
}, 1000) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 智能填充 |
|
||||
getFirstFeedbackData(item) { |
|
||||
if (this.flag === 1) { |
|
||||
this.flag++ // 解决多次调用定时器清除不掉的问题 |
|
||||
this.$http.get(`/from/data/getFirstFeedbackData/${item.formName}/${item.patientIdNumber}/${item.formId}`).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
const fillData = res.data |
|
||||
this.timer = setInterval(() => { |
|
||||
if (this.$refs.crfComponent && this.$refs.crfComponent.$el.contentWindow.dataFill) { |
|
||||
this.$refs.crfComponent.$el.contentWindow.dataFill(fillData) |
|
||||
clearInterval(this.timer) |
|
||||
this.flag = 1 |
|
||||
} |
|
||||
}, 200) |
|
||||
} |
|
||||
}).catch(() => { }) |
|
||||
} |
|
||||
}, |
|
||||
// 打印 |
|
||||
printerHandle() { |
|
||||
this.$refs.crfComponent.$el.contentWindow.print() |
|
||||
}, |
|
||||
// 关闭表单 |
|
||||
closedDialog() { |
|
||||
this.$emit('closedDialog') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.add-print { |
|
||||
.print-content { |
|
||||
height: calc(100vh - 140px); |
|
||||
display: flex; |
|
||||
} |
|
||||
.table-class { |
|
||||
margin-right: 16px; |
|
||||
flex: 40%; |
|
||||
} |
|
||||
.crf-father { |
|
||||
flex: 60%; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.add-print { |
|
||||
.el-dialog__header { |
|
||||
margin-bottom: 12px; |
|
||||
text-align: left; |
|
||||
} |
|
||||
.el-dialog__body { |
|
||||
padding-right: 30px; |
|
||||
} |
|
||||
.formItemOne .el-form-item__content { |
|
||||
display: flex; |
|
||||
} |
|
||||
.el-table th.el-table__cell>.cell { |
|
||||
padding-left: 15px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,274 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<audio :ref="childRef" controls style="display: none" @timeupdate="updateProgress"> |
|
||||
<source :src="fileurl" type="audio/mpeg"> |
|
||||
您的浏览器不支持音频播放 |
|
||||
</audio> |
|
||||
<div class="audio-right"> |
|
||||
<!-- 播放按钮和时间显示 --> |
|
||||
<div class="audio-right-top"> |
|
||||
<svg-icon :icon-class="audioStatus !== 'pause' ? 'icon-record-play':'icon-record-zanting'" class="dialogAudioPlay" @click="playAudio" /> |
|
||||
<div class="audio-time" style="min-height: 10px"> |
|
||||
<span id="audioCurTime" class="audio-length-current">{{ audioStart }} /</span> |
|
||||
<span class="audio-length-total">{{ duration }}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 进度条 --> |
|
||||
<div :id="'progressBarBg' + childRef" v-dragto="setAudioIcon" class="progress-bar-bg"> |
|
||||
<div :id="'progressBar' + childRef" class="progress-bar" /> |
|
||||
</div> |
|
||||
<div class="volume"> |
|
||||
<div |
|
||||
v-show="audioHuds" |
|
||||
class="volume-progress" |
|
||||
@click.stop=" |
|
||||
() => { |
|
||||
return false |
|
||||
} |
|
||||
" |
|
||||
> |
|
||||
<div :id="'volumeBarBg' + childRef" v-adjuster="handleShowMuteIcon" class="volume-bar-bg"> |
|
||||
<div :id="'volumeBar' + childRef" class="volume-bar" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 音量调整 暂时用不到--> |
|
||||
<!-- <i class="iconfont pl-1" :class="audioIcon" @click.stop="audioHuds = !audioHuds" /> --> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
|
|
||||
directives: { |
|
||||
dragto: { |
|
||||
inserted: function(el, binding, vnode) { |
|
||||
el.addEventListener( |
|
||||
'click', |
|
||||
(e) => { |
|
||||
const wdiv = document.getElementById(`progressBarBg${this.childRef}`).clientWidth |
|
||||
const audio = vnode.context.$refs[this.childRef] |
|
||||
// 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以 |
|
||||
const ratemin = e.offsetX / wdiv |
|
||||
const rate = ratemin * 100 |
|
||||
document.getElementById(`progressBar${this.childRef}`).style.width = rate + '%' |
|
||||
audio.currentTime = audio.duration * ratemin |
|
||||
audio.play() |
|
||||
binding.value() |
|
||||
}, |
|
||||
false |
|
||||
) |
|
||||
} |
|
||||
}, |
|
||||
adjuster: { |
|
||||
inserted: function(el, binding, vnode) { |
|
||||
el.addEventListener( |
|
||||
'click', |
|
||||
(e) => { |
|
||||
const hdiv = document.getElementById(`volumeBarBg${this.childRef}`).clientHeight |
|
||||
const audio = vnode.context.$refs[this.childRef] |
|
||||
// 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以 |
|
||||
const ratemin = e.offsetY / hdiv |
|
||||
const rate = ratemin * 100 |
|
||||
document.getElementById(`volumeBar${this.childRef}`).style.height = rate + '%' |
|
||||
audio.volume = ratemin |
|
||||
binding.value(rate / 100) |
|
||||
}, |
|
||||
false |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
props: { |
|
||||
fileurl: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
childRef: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
audioStatus: 'play', |
|
||||
audioStart: '0:00', |
|
||||
duration: '0:00', |
|
||||
audioVolume: 0.5, |
|
||||
audioHuds: false |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
// 音量 |
|
||||
// audioIcon() { |
|
||||
// if (this.audioHuds) { |
|
||||
// return this.audioVolume < 0.01 ? 'checked icon-jingyin' : 'checked icon-shengyin' |
|
||||
// } else { |
|
||||
// return 'icon-shengyin' |
|
||||
// } |
|
||||
// } |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.fetch() |
|
||||
}, |
|
||||
methods: { |
|
||||
fetch() { |
|
||||
const that = this |
|
||||
var myVid = this.$refs[this.childRef] |
|
||||
myVid.loop = false |
|
||||
// 监听音频播放完毕 |
|
||||
myVid.addEventListener( |
|
||||
'ended', |
|
||||
function() { |
|
||||
that.audioStatus = 'play' // 显示播放icon |
|
||||
// console.log(document.getElementById(`progressBar${this.childRef}`)) |
|
||||
// document.getElementById(`progressBar${this.childRef}`).style.width = '0%' // 进度条初始化 |
|
||||
}, |
|
||||
false |
|
||||
) |
|
||||
if (myVid != null) { |
|
||||
myVid.oncanplay = function() { |
|
||||
that.duration = that.transTime(myVid.duration) // 计算音频时长 |
|
||||
} |
|
||||
myVid.volume = 0.5 // 设置音量50% |
|
||||
} |
|
||||
}, |
|
||||
// 播放暂停控制 |
|
||||
playAudio() { |
|
||||
const recordAudio = this.$refs[this.childRef] // 获取audio元素 |
|
||||
if (recordAudio.paused) { |
|
||||
recordAudio.play() |
|
||||
this.audioStatus = 'pause' |
|
||||
} else { |
|
||||
recordAudio.pause() |
|
||||
this.audioStatus = 'play' |
|
||||
} |
|
||||
}, |
|
||||
// 更新进度条与当前播放时间 |
|
||||
updateProgress(e) { |
|
||||
var value = e.target.currentTime / e.target.duration |
|
||||
if (document.getElementById(`progressBar${this.childRef}`)) { |
|
||||
// console.log('--------', document.getElementById(`progressBar${this.childRef}`)) |
|
||||
document.getElementById(`progressBar${this.childRef}`).style.width = value * 100 + '%' |
|
||||
if (e.target.currentTime === e.target.duration) { |
|
||||
this.audioStatus = 'pause' |
|
||||
} |
|
||||
} else { |
|
||||
this.audioStatus = 'pause' |
|
||||
} |
|
||||
|
|
||||
this.audioStart = this.transTime(this.$refs[this.childRef].currentTime) |
|
||||
}, |
|
||||
/** |
|
||||
* 音频播放时间换算 |
|
||||
* @param {number} value - 音频当前播放时间，单位秒 |
|
||||
*/ |
|
||||
transTime(time) { |
|
||||
var duration = parseInt(time) |
|
||||
var minute = parseInt(duration / 60) |
|
||||
var sec = (duration % 60) + '' |
|
||||
var isM0 = ':' |
|
||||
if (minute === 0) { |
|
||||
minute = '00' |
|
||||
} else if (minute < 10) { |
|
||||
minute = '0' + minute |
|
||||
} |
|
||||
if (sec.length === 1) { |
|
||||
sec = '0' + sec |
|
||||
} |
|
||||
return minute + isM0 + sec |
|
||||
}, |
|
||||
setAudioIcon() { |
|
||||
this.audioStatus = 'pause' |
|
||||
}, |
|
||||
handleShowMuteIcon(val) { |
|
||||
this.audioVolume = val |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.volume { |
|
||||
position: relative; |
|
||||
.volume-progress { |
|
||||
position: absolute; |
|
||||
top: -150px; |
|
||||
width: 32px; |
|
||||
height: 140px; |
|
||||
background: #f6f6f6; |
|
||||
border-radius: 4px; |
|
||||
padding-top: 10px; |
|
||||
} |
|
||||
.volume-bar-bg { |
|
||||
margin: 0 auto; |
|
||||
width: 6px; |
|
||||
height: 120px; |
|
||||
background: #dcdcdc; |
|
||||
border-radius: 100px; |
|
||||
flex: 1; |
|
||||
position: relative; |
|
||||
transform: rotate(180deg); |
|
||||
cursor: pointer; |
|
||||
.volume-bar { |
|
||||
width: 6px; |
|
||||
height: 50%; |
|
||||
background: #56bf8b; |
|
||||
border-radius: 100px; |
|
||||
} |
|
||||
} |
|
||||
.checked { |
|
||||
color: #56bf8b; |
|
||||
} |
|
||||
} |
|
||||
.audio-right { |
|
||||
width: 100%; |
|
||||
height: 36px; |
|
||||
background: #1e79ff; |
|
||||
border-radius: 6px; |
|
||||
padding: 4px 8px; |
|
||||
position: relative; |
|
||||
.audio-right-top { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
.dialogAudioPlay { |
|
||||
cursor: pointer; |
|
||||
color: #5c5e66; |
|
||||
font-size: 20px; |
|
||||
} |
|
||||
.progress-bar-bg { |
|
||||
background-color: #fff; |
|
||||
flex: 1; |
|
||||
height: 2px; |
|
||||
margin-top: -1px; |
|
||||
cursor: pointer; |
|
||||
position: absolute; |
|
||||
bottom: 4px; |
|
||||
left: 12px; |
|
||||
width:85%; |
|
||||
} |
|
||||
.progress-bar { |
|
||||
background-color: #56bf8b; |
|
||||
width: 0%; |
|
||||
height: 2px; |
|
||||
border-radius: 5px; |
|
||||
} |
|
||||
|
|
||||
.audio-time { |
|
||||
overflow: hidden; |
|
||||
font-size: 14px; |
|
||||
color:#fff; |
|
||||
margin-left: 10px; |
|
||||
.audio-length-total { |
|
||||
padding-left: 4px; |
|
||||
float: right; |
|
||||
} |
|
||||
.audio-length-current { |
|
||||
float: left; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
@ -1,54 +0,0 @@ |
|||||
<template> |
|
||||
<div |
|
||||
id="beforeOperationPrint" |
|
||||
style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always" |
|
||||
> |
|
||||
<p style="color:#4c9ef5;font-size:38px;font-weight:700;margin:12px 0 34px 0;text-align:center;"> |
|
||||
屈光手术前问卷调查</p> |
|
||||
<div |
|
||||
v-for="(item,index) in archiveCaseCRFItem.formContent.questionList" |
|
||||
:key="index" |
|
||||
style="text-align:left;margin-bottom:18px;" |
|
||||
> |
|
||||
<p style="font-size:16px;margin-bottom:16px;">{{ (index + 1) + '、' + item.name }}</p> |
|
||||
<el-radio |
|
||||
v-for="(iten,i) in item.list" |
|
||||
:key="i" |
|
||||
v-model="item.radio" |
|
||||
:label="iten.value" |
|
||||
style="display:block;margin-bottom:10px;" |
|
||||
> |
|
||||
{{ iten.name }}</el-radio> |
|
||||
</div> |
|
||||
<div style="text-align:right;width:100%;display:flex;flex-direction:column;align-items:flex-end;"> |
|
||||
<div style="width:140px;text-align:left;"> |
|
||||
<span style="font-weight:700;">签名:</span> |
|
||||
<img :src="archiveCaseCRFItem.formContent.qmImg" alt="" style="width:80px;"> |
|
||||
<p> |
|
||||
<span style="font-weight:700;padding-right:16px;">评分:</span> |
|
||||
<span>{{ archiveCaseCRFItem.formContent.score }}分</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
archiveCaseCRFItem: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
methods: { |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
</style> |
|
||||
@ -1,146 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 病历模板 --> |
|
||||
<el-drawer |
|
||||
title="我是标题" |
|
||||
:visible.sync="drawer" |
|
||||
:with-header="false" |
|
||||
:before-close="handleClose" |
|
||||
class="case-drawer-dialog" |
|
||||
> |
|
||||
<div class="case-template-content"> |
|
||||
<div class="tabs"> |
|
||||
<span v-for="(item,index) in tabList" :key="index" class="tab-span" :class="tabCurrentIndex===index ? 'tab-span-active':''" @click="tabSpanClick(item,index)">{{ item }}</span> |
|
||||
<div class="tabContent"> |
|
||||
<template v-if="!nodataShow"> |
|
||||
<p v-for="(itemList,itemListIndex) in tabItemList" :key="itemListIndex" class="tab-content-item" :class="currentItemListIndex ===itemListIndex ? 'tab-content-active' : ''"> |
|
||||
<span>{{ itemList.name }}</span> |
|
||||
<span @click="introduceClick(itemList)">引入</span> |
|
||||
</p> |
|
||||
</template> |
|
||||
<template v-else> |
|
||||
<span>暂无数据</span> |
|
||||
</template> |
|
||||
</div> |
|
||||
</div> |
|
||||
<el-button type="primary" plain class="button" @click="managementTemplateHandle">管理模板</el-button> |
|
||||
</div> |
|
||||
</el-drawer> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
drawer: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
tabCurrentIndex: 0, |
|
||||
currentItemListIndex: 0, |
|
||||
tabList: ['辅助检查', '现病史', '处理意见', '初检主诉', '复诊主诉', '专科检查'], |
|
||||
tabItemList: [], |
|
||||
activeName: '辅助检查', |
|
||||
nodataShow: false |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.getTypeTemplate() |
|
||||
}, |
|
||||
methods: { |
|
||||
// 管理模板 |
|
||||
managementTemplateHandle() { |
|
||||
this.$router.push({ name: 'templateManagement' }) |
|
||||
}, |
|
||||
// 点击tabspan |
|
||||
tabSpanClick(item, index) { |
|
||||
this.tabCurrentIndex = index |
|
||||
this.activeName = this.tabList[index] |
|
||||
this.getTypeTemplate() |
|
||||
}, |
|
||||
async getTypeTemplate() { |
|
||||
this.nodataShow = false |
|
||||
const { data: res } = await this.$http.get(`/medical/record/template/getListByType/${this.activeName}`) |
|
||||
if (res.code === 0) { |
|
||||
this.typeTemplateList = res.data |
|
||||
this.tabItemList = res.data |
|
||||
this.nodataShow = !(res.data.length > 0) |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 引入 |
|
||||
introduceClick(itemList) { |
|
||||
console.log(itemList) |
|
||||
this.$emit('introduceClick', itemList) |
|
||||
}, |
|
||||
// 抽屉关闭 |
|
||||
handleClose(done) { |
|
||||
this.$emit('drawerClose', false) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.case-drawer-dialog { |
|
||||
height: 100%; |
|
||||
.case-template-content { |
|
||||
padding: 16px; |
|
||||
position: relative; |
|
||||
height: 100%; |
|
||||
} |
|
||||
.tabs{ |
|
||||
text-align: left; |
|
||||
} |
|
||||
.tab-span { |
|
||||
display: inline-block; |
|
||||
padding: 4px 8px; |
|
||||
background: #F2F3F5; |
|
||||
color: #4E5969; |
|
||||
margin-right: 6px; |
|
||||
margin-bottom: 8px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.tab-span-active { |
|
||||
color: #fff; |
|
||||
background: #1e79ff; |
|
||||
} |
|
||||
.tabContent { |
|
||||
margin-top: 10px; |
|
||||
} |
|
||||
.tab-content-item { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
padding: 6px 12px; |
|
||||
cursor: pointer; |
|
||||
span:nth-child(2) { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
.tab-content-item:hover { |
|
||||
background: #F7F8FA; |
|
||||
span:nth-child(2) { |
|
||||
color: #1e79ff; |
|
||||
display: inline-block; |
|
||||
} |
|
||||
} |
|
||||
.button { |
|
||||
width: 95%; |
|
||||
text-align: center; |
|
||||
border-radius: 4px; |
|
||||
position: absolute; |
|
||||
bottom: 10px; |
|
||||
left: 12px; |
|
||||
} |
|
||||
.nodata { |
|
||||
width: 300px; |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
img{ |
|
||||
width:300px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -1,215 +0,0 @@ |
|||||
<template> |
|
||||
<div |
|
||||
id="eyeQuestionPrint" |
|
||||
style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always" |
|
||||
> |
|
||||
<p style="color:#4c9ef5;font-size:38px;font-weight:700;margin:12px 0 34px 0;text-align:center;"> |
|
||||
屈光眼科病史问卷调查</p> |
|
||||
<div class="qustion-content" style="font-size:16px;text-align:left;"> |
|
||||
<div class="li-row" style="margin-bottom:18px;display:flex;"> |
|
||||
<div style="display:flex;align-items:center;"><span style="font-weight:700;">1、视力减退：</span> |
|
||||
<input-number :input-number-value="questionList.visionLoss" name="visionLoss" @inputValue="inputValue" /> |
|
||||
<!-- <el-input-number v-model="questionList.visionLoss" size="small" /> --> |
|
||||
<span style="padding-left:10px;">年</span> |
|
||||
</div> |
|
||||
<div style="display:flex;align-items: center;"><span style="font-weight:700;padding-left:26px;">戴眼镜：</span> |
|
||||
<input-number :input-number-value="questionList.wearGlasses" name="wearGlasses" /> |
|
||||
<!-- <el-input-number v-model="questionList.wearGlasses" size="small" /> --> |
|
||||
<span style="padding-left:10px;">年</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="li-row" style="margin-bottom:24px"> |
|
||||
<div style="margin-bottom:10px;"> |
|
||||
<span style="font-weight:700;">2、现镜度数：</span> |
|
||||
<el-radio-group v-model="questionList.degreeValue" style="display:inline-block;"> |
|
||||
<el-radio label="测量">测量</el-radio> |
|
||||
<el-radio label="未测量">未测量</el-radio> |
|
||||
</el-radio-group> |
|
||||
</div> |
|
||||
<div style="display:flex; margin-bottom:16px;"> |
|
||||
<span style="display:flex; align-items: center;padding-left:26px;">OD： |
|
||||
<el-input v-model="questionList.ODValue" placeholder="请输入内容" size="small" /> |
|
||||
</span> |
|
||||
<span style="display:flex; align-items: center;padding-left:16px;">OS： |
|
||||
<el-input v-model="questionList.OSValue" placeholder="请输入内容" size="small" /> |
|
||||
</span> |
|
||||
</div> |
|
||||
<div style="display:flex;align-items: center;"><span style="padding-left:26px;">现镜配置时间：</span> |
|
||||
<input-number :input-number-value="questionList.nowDegreeTime" name="nowDegreeTime" /> |
|
||||
<!-- <el-input-number v-model="questionList.nowDegreeTime" size="small" /> --> |
|
||||
<span style="padding-left:10px;">年</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="li-row" style="margin-bottom:24px;"> |
|
||||
<div style="margin-bottom:12px;display:flex;align-items: center;"><span style="font-weight:700;">3、带接触镜：</span> |
|
||||
<input-number :input-number-value="questionList.contactLens" name="contactLens" /> |
|
||||
<!-- <el-input-number v-model="questionList.contactLens" size="small" /> --> |
|
||||
</div> |
|
||||
<div style="padding-left:26px;margin-bottom:12px;"><span>类型：</span> |
|
||||
<el-radio-group v-model="questionList.contactLensType"> |
|
||||
<el-radio label="硬镜">硬镜</el-radio> |
|
||||
<el-radio label="软镜">软镜</el-radio> |
|
||||
</el-radio-group> |
|
||||
</div> |
|
||||
<div style="padding-left:26px;"><span>频率：</span> |
|
||||
<el-radio-group v-model="questionList.contactLensTypePL"> |
|
||||
<el-radio label="常带">常带</el-radio> |
|
||||
<el-radio label="偶尔">偶尔</el-radio> |
|
||||
</el-radio-group> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="li-row" style="margin-bottom:24px"> |
|
||||
<div style="display:flex;align-items: center;"><span style="font-weight:700;">4、脱镜时间：</span> |
|
||||
<input-number :input-number-value="questionList.mirrorTime" name="mirrorTime" /> |
|
||||
<!-- <el-input-number v-model="questionList.mirrorTime" size="small" /> --> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="li-row" style="margin-bottom:24px"> |
|
||||
<div><span style="font-weight:700;">5、2年内稳定情况：</span> |
|
||||
<el-radio-group v-model="questionList.stableSituation"> |
|
||||
<el-radio label="稳定">稳定</el-radio> |
|
||||
<el-radio label="不稳定">不稳定</el-radio> |
|
||||
</el-radio-group> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="li-row" style="margin-bottom:24px"> |
|
||||
<div style="margin-bottom:12px;"><span style="font-weight:700;">6、其他屈光手术史：</span></div> |
|
||||
<el-input |
|
||||
v-model="questionList.surgicalHistory" |
|
||||
type="textarea" |
|
||||
autosize |
|
||||
:rows="2" |
|
||||
placeholder="请输入其他屈光手术史" |
|
||||
/> |
|
||||
</div> |
|
||||
<div class="li-row" style="margin-bottom:24px"> |
|
||||
<p style="margin-bottom:12px;"><span style="font-weight:700;">7、眼病及眼科手术史：</span></p> |
|
||||
<el-input |
|
||||
v-model="questionList.ophthalmicSurgeryHistory" |
|
||||
type="textarea" |
|
||||
autosize |
|
||||
:rows="2" |
|
||||
placeholder="请输入眼病及眼科手术史" |
|
||||
/> |
|
||||
</div> |
|
||||
<div class="li-row li-row-checkbox" style="margin-bottom:24px"> |
|
||||
<p style="margin-bottom:12px;"><span style="font-weight:700;">8、视觉症状：</span></p> |
|
||||
<el-checkbox-group v-model="questionList.visualSymptomsCheckbox"> |
|
||||
<el-checkbox |
|
||||
v-for="(item,index) in questionList.visualSymptomslist" |
|
||||
:key="index" |
|
||||
:label="item" |
|
||||
/> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
<div class="li-row" style="margin-bottom:24px"> |
|
||||
<p style="margin-bottom:12px;"><span style="font-weight:700;">9、要求手术原因：</span></p> |
|
||||
<el-checkbox-group v-model="questionList.causesOperationCheckbox"> |
|
||||
<el-checkbox |
|
||||
v-for="(item,index) in questionList.causesOperationlist" |
|
||||
:key="index" |
|
||||
:label="item" |
|
||||
/> |
|
||||
</el-checkbox-group> |
|
||||
<p style="margin:12px 0;">其他：</p> |
|
||||
<el-input |
|
||||
v-model="questionList.causesOperationOther" |
|
||||
type="textarea" |
|
||||
autosize |
|
||||
:rows="2" |
|
||||
placeholder="请输入其他原因" |
|
||||
/> |
|
||||
</div> |
|
||||
<div class="li-row" style="margin-bottom:24px"> |
|
||||
<p style="margin-bottom:12px;"><span style="font-weight:700;">10、外伤/手术史：</span></p> |
|
||||
<el-input |
|
||||
v-model="questionList.traumaSurgicalHistory" |
|
||||
type="textarea" |
|
||||
autosize |
|
||||
:rows="2" |
|
||||
placeholder="请输入外伤/手术史" |
|
||||
/> |
|
||||
</div> |
|
||||
<div class="li-row" style="margin-bottom:24px"> |
|
||||
<p style="margin-bottom:12px;"><span style="font-weight:700;">11、药物过敏史：</span></p> |
|
||||
<el-input |
|
||||
v-model="questionList.drugAllergyHistory" |
|
||||
type="textarea" |
|
||||
autosize |
|
||||
:rows="2" |
|
||||
placeholder="请输入药物过敏史" |
|
||||
/> |
|
||||
</div> |
|
||||
<div class="li-row" style="margin-bottom:24px"> |
|
||||
<p style="margin-bottom:12px;"><span style="font-weight:700;">12、瘢痕体质：</span></p> |
|
||||
<el-input |
|
||||
v-model="questionList.scarConstitution" |
|
||||
type="textarea" |
|
||||
autosize |
|
||||
:rows="2" |
|
||||
placeholder="请输入瘢痕体质" |
|
||||
/> |
|
||||
</div> |
|
||||
<div class="li-row" style="margin-bottom:24px"> |
|
||||
<p style="margin-bottom:12px;"><span style="font-weight:700;">13、其他全身病史：</span></p> |
|
||||
<el-input |
|
||||
v-model="questionList.otherSystemicHistory" |
|
||||
type="textarea" |
|
||||
autosize |
|
||||
:rows="2" |
|
||||
placeholder="请输入其他全身病史" |
|
||||
/> |
|
||||
</div> |
|
||||
<div class="li-row" style="margin-bottom:24px"> |
|
||||
<p style="margin-bottom:12px;"><span style="font-weight:700;">14、近期服药史：</span></p> |
|
||||
<el-input |
|
||||
v-model="questionList.recentMedicationHistory" |
|
||||
type="textarea" |
|
||||
autosize |
|
||||
:rows="2" |
|
||||
placeholder="请输入近期服药史" |
|
||||
/> |
|
||||
</div> |
|
||||
<div class="li-row" style="margin-bottom:24px"> |
|
||||
<p style="margin-bottom:12px;"><span style="font-weight:700;">15、家族史：</span></p> |
|
||||
<el-input |
|
||||
v-model="questionList.familyHistory" |
|
||||
type="textarea" |
|
||||
autosize |
|
||||
:rows="2" |
|
||||
placeholder="请输入家族史" |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import inputNumber from './input-number.vue' |
|
||||
export default { |
|
||||
components: { |
|
||||
inputNumber |
|
||||
}, |
|
||||
props: { |
|
||||
archiveCaseCRFItem: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
}, |
|
||||
questionList: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
methods: { |
|
||||
inputValue(val) { |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
</style> |
|
||||
@ -1,800 +0,0 @@ |
|||||
<template> |
|
||||
<div class="archives"> |
|
||||
<!-- 档案内容 --> |
|
||||
<div class="archives-content"> |
|
||||
<div class="content-left"> |
|
||||
<div class="content-left-top"> |
|
||||
<el-tree |
|
||||
ref="my-tree" |
|
||||
:data="archiveCaseCRFList" |
|
||||
:props="defaultProps" |
|
||||
default-expand-all |
|
||||
:current-node-key="currentNodeKey" |
|
||||
node-key="id" |
|
||||
@node-click="handleMoveCopyNodeClick" |
|
||||
> |
|
||||
|
|
||||
<span slot-scope="{ node, data }" class="custom-tree-node"> |
|
||||
<span v-if="node.level === 1">{{ data.crfType ? data.crfType : 'H5问卷调查' }}</span> |
|
||||
<div |
|
||||
v-if="node.level !== 1" |
|
||||
class="tree-children" |
|
||||
:class="data.id === currentNodeKey ? 'CRFList-list-active' : ''" |
|
||||
@click="CRFListClick(data)" |
|
||||
> |
|
||||
<span |
|
||||
class="tree-date" |
|
||||
:class="data.id === currentNodeKey ? 'tree-date-active' : ''" |
|
||||
>{{ data.formDate }}</span> |
|
||||
<p class="tree-forname">{{ data.formName }}</p> |
|
||||
<el-button |
|
||||
type="text" |
|
||||
size="mini" |
|
||||
class="tree-button" |
|
||||
:class="data.id === currentNodeKey ? 'tree-button-active':''" |
|
||||
@click.stop="deleteCRFList(data)" |
|
||||
> |
|
||||
<i class="el-icon-delete" /> |
|
||||
</el-button> |
|
||||
</div> |
|
||||
</span> |
|
||||
</el-tree> |
|
||||
<img v-if="noDataShow" src="@/assets/img/nodata.png" alt="" class="nodata"> |
|
||||
<!-- <div class="button"><i class="el-icon-plus" /> 新建表单</div> --> |
|
||||
</div> |
|
||||
<div v-if="queryList.title !=='分诊'" class="content-left-bottom"> |
|
||||
<div class="commonForm-text "> |
|
||||
<span>常用表单</span> |
|
||||
<span class="line" /> |
|
||||
<el-checkbox v-model="defaultChecked">默认新建今日</el-checkbox> |
|
||||
</div> |
|
||||
<div class="comonForm-tab"> |
|
||||
<el-tabs v-model="comonFormActive" stretch @tab-click="handleClick"> |
|
||||
<el-tab-pane |
|
||||
v-for="(item,index) in commeFormTabs" |
|
||||
:key="index" |
|
||||
:label="item.name" |
|
||||
:name="item.name" |
|
||||
class="comonForm-tab-Pane" |
|
||||
> |
|
||||
<div |
|
||||
v-for="(commeFormItem, commeFormLIndex) in commeFormList" |
|
||||
:key="commeFormLIndex" |
|
||||
class="comonForm-list" |
|
||||
@click="comonFormListClick(commeFormLIndex,commeFormItem)" |
|
||||
> |
|
||||
<div class="text-ellipsis"> |
|
||||
<el-tooltip |
|
||||
v-if="commeFormItem.name.length >= 12" |
|
||||
class="item" |
|
||||
effect="dark" |
|
||||
:content="commeFormItem.name" |
|
||||
placement="top-end" |
|
||||
> |
|
||||
<span>{{ commeFormItem.name }}</span> |
|
||||
</el-tooltip> |
|
||||
<span v-else>{{ commeFormItem.name }}</span> |
|
||||
</div> |
|
||||
<i class="el-icon-plus comonForm-icon" /> |
|
||||
</div> |
|
||||
</el-tab-pane> |
|
||||
</el-tabs> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="content-right"> |
|
||||
<div v-show="!noDataShow" class="content-right-buttonClick"> |
|
||||
<el-button v-if="archiveCaseCRFItem.isH5 !==1" type="primary" size="small" @click="addOrUpdateHandle">编辑 |
|
||||
</el-button> |
|
||||
<el-button |
|
||||
v-show="archiveCaseCRFItem.crfDescription === '病历模板'" |
|
||||
type="primary" |
|
||||
size="small" |
|
||||
@click="addTemplateHandle" |
|
||||
>内容模板</el-button> |
|
||||
<el-button v-show="archiveCaseCRFItem.isH5 === 1 && (archiveCaseCRFItem.formName==='眼科病史问卷调查' || archiveCaseCRFItem.formName==='屈光中心手术安全核查表')" type="primary" size="small" @click="saveH5">保存</el-button> |
|
||||
<!-- <el-button type="primary" size="small" @click="allPrintPreview">批量打印</el-button> --> |
|
||||
<el-button v-show="archiveCaseCRFItem.isH5 !==1" type="warning" size="small" @click="printerHandle">打印</el-button> |
|
||||
<el-button |
|
||||
v-show="archiveCaseCRFItem.isH5 === 1" |
|
||||
v-print="'#printH5'" |
|
||||
type="warning" |
|
||||
size="small" |
|
||||
>打印</el-button> |
|
||||
</div> |
|
||||
<div |
|
||||
v-loading="CRFLoading" |
|
||||
element-loading-text="智能填充中，请稍等" |
|
||||
class="content-right-CRF" |
|
||||
:class="archiveCaseCRFItem.formName === '谈话记录' ? 'content-right-CRF-class' :''" |
|
||||
> |
|
||||
|
|
||||
<div v-if="archiveCaseCRFItem.isH5 !==1" class="editor-CRF"> |
|
||||
<crf |
|
||||
v-if="crfIframeVisible" |
|
||||
ref="crfComponent" |
|
||||
:value="dataForm.content" |
|
||||
:height="'100%'" |
|
||||
:js-arr="jsArr" |
|
||||
style="margin: 0;padding: 40px 0;width: 95%;border: 1px solid #000;background:#fff;" |
|
||||
:body-style-show="true" |
|
||||
/> |
|
||||
</div> |
|
||||
<div id="printH5"> |
|
||||
<!-- 手术前问卷调查 --> |
|
||||
<before-operation-question v-if="archiveCaseCRFItem.isH5===1 && archiveCaseCRFItem.formName==='手术前问卷调查'" :archive-case-c-r-f-item="archiveCaseCRFItem" /> |
|
||||
<!-- 眼科病史问卷调查 --> |
|
||||
<eye-question v-if="archiveCaseCRFItem.isH5===1 && archiveCaseCRFItem.formName==='眼科病史问卷调查'" :archive-case-c-r-f-item="archiveCaseCRFItem" :question-list="archiveCaseCRFItem.formContent.questionList" /> |
|
||||
<safety-checklist v-if="archiveCaseCRFItem.isH5===1 && archiveCaseCRFItem.formName==='屈光中心手术安全核查表'" :archive-case-c-r-f-item="archiveCaseCRFItem" :form-content="archiveCaseCRFItem.formContent" /> |
|
||||
</div> |
|
||||
|
|
||||
<!-- <template v-if="!noDataShow"> |
|
||||
<div v-if="archiveCaseCRFItem.name !== '谈话记录'" class="suspension-button"> |
|
||||
<div |
|
||||
v-show="archiveCaseCRFItem.crfDescription === '智能填充'" |
|
||||
class="intelligent-filling" |
|
||||
@click="drawerhandle" |
|
||||
> |
|
||||
<i class="el-icon-arrow-left" /> |
|
||||
<span>智能填充</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> --> |
|
||||
|
|
||||
<!-- 录音 --> |
|
||||
<record-file |
|
||||
v-if="archiveCaseCRFItem.formName === '谈话记录'" |
|
||||
:crf-item="archiveCaseCRFItem" |
|
||||
:form-id="archiveCaseCRFItem.id" |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 添加病历模板 --> |
|
||||
<add-case-form |
|
||||
v-if="addCaseFormVisible" |
|
||||
ref="addCaseFormRef" |
|
||||
@closeDialog="addCaseFormVisible=false" |
|
||||
@getArchiveCaseList="getArchiveCaseList($event)" |
|
||||
/> |
|
||||
<!-- 弹窗, 新增 / 修改 --> |
|
||||
<follow-up |
|
||||
v-if="followUpVisible" |
|
||||
ref="followUp" |
|
||||
updata-file="init" |
|
||||
:is-sign="true" |
|
||||
@init="init" |
|
||||
@closeDialog="followUpVisible=false" |
|
||||
/> |
|
||||
<!-- 智能填充 --> |
|
||||
<intelligent-full |
|
||||
v-if="intelligentFullVisible" |
|
||||
ref="intelligentFullRef" |
|
||||
updata-file="init" |
|
||||
:is-sign="true" |
|
||||
:is-judge-sign="isJudgeSign" |
|
||||
@init="init" |
|
||||
@closeDialog="intelligentFullVisible=false" |
|
||||
/> |
|
||||
<!-- 修改填充病历模板 --> |
|
||||
<edit-full-case-template |
|
||||
v-if="editFullCaseTemplateVisible" |
|
||||
ref="editFullCaseTemplateRef" |
|
||||
@refreshDataList="init()" |
|
||||
@closeDialog="editFullCaseTemplateVisible=false" |
|
||||
/> |
|
||||
</div> |
|
||||
<!-- 批量打印 --> |
|
||||
<add-print v-if="addPrintVisible" ref="addPrintRef" @closedDialog="addPrintVisible=false" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
// import eventBus from '@/page-subspecialty/utils/eventBus' |
|
||||
import { dateFilterTwo } from '@/filters/index.js' |
|
||||
import crf from '@/components/hm-crf/load_content.vue' |
|
||||
import followUp from '@/components/hm-crf/followUp.vue' |
|
||||
import intelligentFull from '@/components/hm-crf/intelligent-full' |
|
||||
import editFullCaseTemplate from '@/components/hm-crf/edit-full-case-template.vue' |
|
||||
import recordFile from './record-file.vue' |
|
||||
import addCaseForm from './add-caseForm.vue' |
|
||||
import IntelligentFill from '@/mixins/IntelligentFill.js' |
|
||||
import eyeQuestion from './eye-question.vue' |
|
||||
import beforeOperationQuestion from './before-operation-question.vue' |
|
||||
import safetyChecklist from './safety-checklist.vue' |
|
||||
import addPrint from './all-print.vue' |
|
||||
import { setTimeout } from '../../../../../components/hm-crf/tinymce/themes/silver/theme' |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
export default { |
|
||||
components: { |
|
||||
crf, |
|
||||
followUp, |
|
||||
editFullCaseTemplate, |
|
||||
recordFile, |
|
||||
addCaseForm, |
|
||||
intelligentFull, |
|
||||
eyeQuestion, |
|
||||
beforeOperationQuestion, |
|
||||
safetyChecklist, |
|
||||
addPrint |
|
||||
}, |
|
||||
mixins: [IntelligentFill], |
|
||||
props: { |
|
||||
editorIDName: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
patientIdNumber: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
patientId: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
currentArchiveList: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
} |
|
||||
}, |
|
||||
inject: ['refresh'], |
|
||||
data() { |
|
||||
return { |
|
||||
crfIframeVisible: false, |
|
||||
addCaseFormVisible: false, |
|
||||
followUpVisible: false, |
|
||||
editFullCaseTemplateVisible: false, |
|
||||
intelligentFullVisible: false, |
|
||||
defaultChecked: true, |
|
||||
jsArr: [], |
|
||||
dataForm: {}, |
|
||||
realVisitType: '', |
|
||||
realVisitTime: '', |
|
||||
height: 'calc(100vh - 230px)', |
|
||||
archiveCaseCRFList: [], |
|
||||
archiveCaseCRFItem: {}, |
|
||||
comonFormActive: '门诊', |
|
||||
comonFormCurrentIndex: 0, |
|
||||
commeFormTabs: [], |
|
||||
commeFormList: [], |
|
||||
IntelligentDrawer: false, |
|
||||
drawerVisible: false, |
|
||||
noDataShow: false, |
|
||||
defaultProps: { |
|
||||
children: 'list' |
|
||||
}, |
|
||||
currentNodeKey: '', |
|
||||
timer: null, |
|
||||
isEyeQuestionShow: false, |
|
||||
isJudgeSign: false, |
|
||||
addPrintVisible: false, |
|
||||
userData: {}, |
|
||||
queryList: {}, |
|
||||
isClick: true, |
|
||||
oldCRFListItem: {} |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
currentNodeKey(id) { |
|
||||
this.currentNodeKey = id |
|
||||
console.log(id) |
|
||||
// Tree 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。可以用 $refs 获取 Tree 实例 |
|
||||
if (id && id.toString()) { |
|
||||
this.$refs['my-tree'].setCurrentKey(id) |
|
||||
} else { |
|
||||
this.$refs['my-tree'].setCurrentKey(null) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.queryList = JSON.parse(this.$Base64.decode(this.$route.query.info)) |
|
||||
console.log(this.queryList) |
|
||||
this.userData = JSON.parse(window.localStorage.getItem('qg-userData')) |
|
||||
const doctorTabList = [{ name: '门诊' }, { name: '其他' }] |
|
||||
const HSTabList = [{ name: '手术' }] |
|
||||
const positionName = this.userData.positionList.length > 0 ? this.userData.positionList[0].positionName : '' |
|
||||
this.commeFormTabs = positionName.includes('医生') ? doctorTabList : HSTabList |
|
||||
this.comonFormActive = positionName.includes('医生') ? '门诊' : '手术' |
|
||||
this.getCRFList(this.comonFormActive) |
|
||||
// 被随访记录兄弟组件调用 |
|
||||
// eventBus.$on('getArchiveCaseList', () => { |
|
||||
// this.getArchiveCaseList(this.archiveCaseCRFItem.archiveId) |
|
||||
// }) |
|
||||
}, |
|
||||
methods: { |
|
||||
setQuestionList(val, name) { |
|
||||
this.archiveCaseCRFItem.formContent.questionList[name] = val |
|
||||
console.log(val, name) |
|
||||
}, |
|
||||
// 节点被点击时的回调 |
|
||||
// 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
|
||||
handleMoveCopyNodeClick(data) { |
|
||||
this.currentNodeKey = data.id |
|
||||
}, |
|
||||
// 获取档案下的病例列表 |
|
||||
async getArchiveCaseList(archiveId, dataList) { |
|
||||
console.log(archiveId) |
|
||||
// this.crfIframeVisible = false |
|
||||
this.noDataShow = false |
|
||||
const { data: res } = await this.$http.get(`/medical/record/getList/${archiveId}`) |
|
||||
if (res.code === 0) { |
|
||||
this.archiveCaseCRFList = JSON.parse(JSON.stringify(res.data)) |
|
||||
if (res.data.length > 0) { |
|
||||
dataList ? this.init(dataList) : this.init(res.data[0].list[0]) |
|
||||
// this.archiveCaseCRFItem = res.data[0].list[0] |
|
||||
this.currentNodeKey = dataList ? dataList.id : res.data[0].list[0].id |
|
||||
this.noDataShow = false |
|
||||
} else { |
|
||||
this.crfIframeVisible = false |
|
||||
this.noDataShow = true |
|
||||
this.archiveCaseCRFItem = [] |
|
||||
this.CRFLoading = false |
|
||||
return |
|
||||
} |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 点击crf列表 |
|
||||
CRFListClick(item) { |
|
||||
// console.log(item) |
|
||||
// console.log(this.oldCRFListItem) |
|
||||
this.isClick = item.id !== this.oldCRFListItem.id |
|
||||
if (this.isClick) { |
|
||||
this.oldCRFListItem = item |
|
||||
console.log('点击crf列表', item) |
|
||||
this.isClick = false |
|
||||
item.isH5 === 1 ? this.$store.commit('initPlugin') : '' |
|
||||
this.init(item) |
|
||||
} |
|
||||
}, |
|
||||
// 显示当前随访表单 |
|
||||
init(item) { |
|
||||
// console.log(item)questionList |
|
||||
item ? this.dataForm = { ...this.dataForm, ...item } : '' |
|
||||
this.crfIframeVisible = false |
|
||||
this.$nextTick(() => { |
|
||||
this.$http.get(`/visit/record/${this.dataForm.id}`) |
|
||||
.then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.archiveCaseCRFItem = JSON.parse(JSON.stringify(res.data)) |
|
||||
res.data.isH5 ? this.archiveCaseCRFItem.formContent = JSON.parse(this.archiveCaseCRFItem.formContent) : this.archiveCaseCRFItem = res.data |
|
||||
this.isEyeQuestionShow = true |
|
||||
this.dataForm = { ...this.dataForm, ...res.data } |
|
||||
this.dataForm.content = res.data.isH5 ? '' : Base64.decode(res.data.formContent) |
|
||||
this.crfIframeVisible = true |
|
||||
// console.log(this.dataForm) |
|
||||
this.dataForm.isWrite === 0 && (this.dataForm.crfDescription === '智能填充' || this.dataForm.crfDescription === '病历模板') ? this.getFirstFeedbackData('智能填充', this.dataForm.id) : this.CRFLoading = false |
|
||||
this.dataForm.crfDescription === '智能填充' ? this.getsaveOperaList(this.dataForm.id) : '' |
|
||||
} |
|
||||
}).catch(() => { }) |
|
||||
}) |
|
||||
}, |
|
||||
// 删除CRF列表数据 |
|
||||
deleteCRFList(item) { |
|
||||
// console.log(item) |
|
||||
this.$confirmFun('你确定要删除此病例吗？').then(async() => { |
|
||||
const { data: res } = await this.$http.delete(`/medical/record/${item.id}`) |
|
||||
if (res.code === 0) { |
|
||||
this.getArchiveCaseList(this.currentArchiveList.id) |
|
||||
this.$message({ |
|
||||
showClose: true, |
|
||||
message: '您已删除成功', |
|
||||
type: 'success' |
|
||||
}) |
|
||||
} else { |
|
||||
this.$$message.error(res.msg) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 填写修改CRF表单 |
|
||||
addOrUpdateHandle() { |
|
||||
this.$store.commit('destroyPlugin') |
|
||||
if (this.archiveCaseCRFItem.crfDescription === '病历模板') { |
|
||||
this.editFullCaseTemplateVisible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.editFullCaseTemplateRef.dataForm.description = this.archiveCaseCRFItem.crfDescription |
|
||||
this.$refs.editFullCaseTemplateRef.dataForm.patientIdNumber = this.archiveCaseCRFItem.patientIdNumber |
|
||||
this.$refs.editFullCaseTemplateRef.dataForm.patientCentreId = this.archiveCaseCRFItem.patientCentreId |
|
||||
this.$refs.editFullCaseTemplateRef.dataForm.id = this.archiveCaseCRFItem.id |
|
||||
this.$refs.editFullCaseTemplateRef.dataForm.formDate = this.archiveCaseCRFItem.formDate |
|
||||
this.$refs.editFullCaseTemplateRef.init() |
|
||||
}) |
|
||||
} else if (this.archiveCaseCRFItem.crfDescription === '智能填充') { |
|
||||
this.intelligentFullVisible = true |
|
||||
this.isJudgeSign = this.archiveCaseCRFItem.formName === '告知书' |
|
||||
console.log(this.archiveCaseCRFItem) |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.intelligentFullRef.dataForm.crfId = this.archiveCaseCRFItem.crfId |
|
||||
this.$refs.intelligentFullRef.dataForm.formId = this.archiveCaseCRFItem.id |
|
||||
this.$refs.intelligentFullRef.dataForm.formName = this.archiveCaseCRFItem.formName |
|
||||
this.$refs.intelligentFullRef.dataForm.isWrite = this.archiveCaseCRFItem.isWrite |
|
||||
this.$refs.intelligentFullRef.dataForm.patientIdNumber = this.archiveCaseCRFItem.patientIdNumber |
|
||||
this.$refs.intelligentFullRef.dataForm.formDate = this.archiveCaseCRFItem.formDate |
|
||||
this.$refs.intelligentFullRef.init() |
|
||||
}) |
|
||||
} else { |
|
||||
this.followUpVisible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.followUp.dataForm.crfId = this.archiveCaseCRFItem.crfId |
|
||||
this.$refs.followUp.dataForm.formId = this.archiveCaseCRFItem.id |
|
||||
this.$refs.followUp.dataForm.isWrite = this.archiveCaseCRFItem.isWrite |
|
||||
this.$refs.followUp.init() |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
// 点击常用表单列表 |
|
||||
comonFormListClick(index, item) { |
|
||||
this.comonFormCurrentIndex = index |
|
||||
this.addComonFormHandle(item) |
|
||||
}, |
|
||||
// 添加常用表单 |
|
||||
async addComonFormHandle(item) { |
|
||||
console.log(item) |
|
||||
const date = dateFilterTwo(this.$moment().format('L')) // 2022/04/29 |
|
||||
if (this.defaultChecked) { |
|
||||
const { data: res } = await this.$http.post('/medical/record', { |
|
||||
archiveId: this.currentArchiveList.id, |
|
||||
crfId: item.id, |
|
||||
formDate: date, |
|
||||
patientCentreId: this.currentArchiveList.patientCentreId, |
|
||||
patientIdNumber: this.currentArchiveList.patientIdNumber |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.getArchiveCaseList(res.data.archiveId, res.data) |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
} else { |
|
||||
this.addCaseFormVisible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.addCaseFormRef.dataForm.archiveId = this.currentArchiveList.id |
|
||||
this.$refs.addCaseFormRef.dataForm.crfId = item.id |
|
||||
this.$refs.addCaseFormRef.dataForm.patientCentreId = this.currentArchiveList.patientCentreId |
|
||||
this.$refs.addCaseFormRef.dataForm.patientIdNumber = this.currentArchiveList.patientIdNumber |
|
||||
this.$refs.addCaseFormRef.init() |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
// tab切换 |
|
||||
handleClick(el) { |
|
||||
this.comonFormCurrentIndex = 0 |
|
||||
this.getCRFList(el.label) |
|
||||
}, |
|
||||
// 根据类型获取模板列表 |
|
||||
async getCRFList(type) { |
|
||||
const { data: res } = await this.$http.get(`/crf/template/getListByType/${type}`) |
|
||||
if (res.code === 0) { |
|
||||
this.commeFormList = res.data |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 抽屉切换 |
|
||||
drawerhandle(flag) { |
|
||||
// 智能填充 |
|
||||
this.drawerVisible = true |
|
||||
this.IntelligentDrawer = true |
|
||||
}, |
|
||||
// CRF打印 |
|
||||
printerHandle() { |
|
||||
this.$refs.crfComponent.$el.contentWindow.print() |
|
||||
}, |
|
||||
// 批量打印 |
|
||||
allPrintPreview() { |
|
||||
this.addPrintVisible = true |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.addPrintRef.archiveId = this.currentArchiveList.id |
|
||||
this.$refs.addPrintRef.init() |
|
||||
}) |
|
||||
}, |
|
||||
// 问卷调查打印 |
|
||||
handlePrint() { |
|
||||
this.archiveCaseCRFItem.formName === '眼科病史问卷调查' ? this.printPage('eyeQuestionPrint') : this.printPage('beforeOperationPrint') |
|
||||
}, |
|
||||
// 新增模板跳转 |
|
||||
addTemplateHandle() { |
|
||||
this.$router.push({ |
|
||||
path: '/templateManagement', |
|
||||
query: { |
|
||||
info: this.$Base64.encode(JSON.stringify(this.queryList)) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 引入 |
|
||||
introduceClick(itemList) { |
|
||||
console.log(itemList) |
|
||||
this.$refs.crfEditorComponent.fullContent('右眼<input id="youyan" class="hminput border-1 " style="width: 120px; height: 18px; text-align: center;" title="" autocomplete="off" name="youyan" type="text" placeholder="" data-hm_id="youyan" data-hm_type="text" data-hm_required="false" data-hm_bd_id="DAT1_VA.OD_VAN" data-hm_bd_eye_type="" />左眼<input id="zuoyan" class="hminput border-1 " style="width: 120px; height: 18px; text-align: center;" title="" autocomplete="off" name="zuoyan" type="text" placeholder="" data-hm_id="zuoyan" data-hm_type="text" data-hm_required="false" data-hm_bd_id="DAT1_VA.OS_VAN" data-hm_bd_eye_type="" />') |
|
||||
}, |
|
||||
async saveH5() { |
|
||||
const { data: res } = await this.$http.post('/visit/record/saveWriteVisit', { |
|
||||
formContent: JSON.stringify(this.archiveCaseCRFItem.formContent), |
|
||||
// inputDate: this.inputDate, |
|
||||
id: this.archiveCaseCRFItem.id |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.$message({ |
|
||||
message: '您已保存成功', |
|
||||
type: 'success' |
|
||||
}) |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.archives { |
|
||||
height: 100%; |
|
||||
.text-ellipsis { |
|
||||
white-space: nowrap; // 段落不换行 |
|
||||
text-overflow: ellipsis; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.printer { |
|
||||
border: 1px solid #ccc; |
|
||||
width: 56px; |
|
||||
height: 32px; |
|
||||
border-radius: 3px; |
|
||||
margin: 0; |
|
||||
margin-left: 10px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.archives-content { |
|
||||
display: flex; |
|
||||
height: 100%; |
|
||||
overflow: hidden; |
|
||||
.content-left { |
|
||||
width: 185px; |
|
||||
height: 100%; |
|
||||
margin-right: 14px; |
|
||||
.nodata { |
|
||||
width: 230px; |
|
||||
margin-top: 30px; |
|
||||
} |
|
||||
.content-left-top, |
|
||||
.content-left-bottom { |
|
||||
height: 50%; |
|
||||
} |
|
||||
.tree-botton-arr { |
|
||||
margin-left: 10px; |
|
||||
} |
|
||||
.tree-date { |
|
||||
padding-right: 10px; |
|
||||
} |
|
||||
.content-left-top { |
|
||||
overflow-y: auto; |
|
||||
margin-bottom: 16px; |
|
||||
.CRFList-list { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
padding-left: 24px; |
|
||||
padding-right: 16px; |
|
||||
color: #000; |
|
||||
} |
|
||||
.CRFList-list { |
|
||||
height: 40px; |
|
||||
line-height: 40px; |
|
||||
font-size: 14px; |
|
||||
cursor: pointer; |
|
||||
.el-icon-more { |
|
||||
transform: rotate(90deg); |
|
||||
} |
|
||||
} |
|
||||
.CRFList-icon:hover { |
|
||||
color: #ff2929; |
|
||||
} |
|
||||
.CRFList-list-active { |
|
||||
background-color: #1890ff; |
|
||||
color: #fff; |
|
||||
.el-icon-more { |
|
||||
color: #fff; |
|
||||
} |
|
||||
} |
|
||||
.button { |
|
||||
margin-top: 16px; |
|
||||
background: #f2f3f5; |
|
||||
border-radius: 4px; |
|
||||
height: 40px; |
|
||||
line-height: 40px; |
|
||||
text-align: center; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.button:hover, |
|
||||
.el-icon-plus:hover { |
|
||||
color: #1890ff; |
|
||||
} |
|
||||
} |
|
||||
.content-left-bottom { |
|
||||
.commonForm-text { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
font-size: 14px; |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
.line { |
|
||||
border-bottom: 1px solid #e5e6eb; |
|
||||
flex: 1; |
|
||||
display: inline-block; |
|
||||
margin: 0 10px; |
|
||||
} |
|
||||
.comonForm-tab { |
|
||||
margin-top: 10px; |
|
||||
} |
|
||||
.comonForm-tab-Pane { |
|
||||
margin-top: 10px; |
|
||||
} |
|
||||
.comonForm-list { |
|
||||
height: 40px; |
|
||||
line-height: 40px; |
|
||||
font-size: 14px; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
padding: 0 10px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.comonForm-list:hover { |
|
||||
background-color: #f4f8fb; |
|
||||
color: #1d2129; |
|
||||
} |
|
||||
.comonForm-icon:hover { |
|
||||
color: #1890ff; |
|
||||
font-weight: 700; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.content-right { |
|
||||
position: relative; |
|
||||
flex: 1; |
|
||||
text-align: center; |
|
||||
// min-width: 810px; |
|
||||
overflow-y: hidden; |
|
||||
.content-right-buttonClick { |
|
||||
display: flex; |
|
||||
justify-content: flex-end; |
|
||||
background: #2e2e2e; |
|
||||
padding: 10px; |
|
||||
} |
|
||||
.editor-CRF { |
|
||||
height: 93%; |
|
||||
} |
|
||||
.content-right-CRF { |
|
||||
background: #5c5c5c; |
|
||||
overflow-x: auto; |
|
||||
padding: 16px 16px 16px 16px; |
|
||||
position: relative; |
|
||||
height: 100%; |
|
||||
} |
|
||||
.content-right-CRF-class { |
|
||||
padding-right: 178px; |
|
||||
} |
|
||||
.suspension-button { |
|
||||
position: absolute; |
|
||||
right: 10px; |
|
||||
top: 10px; |
|
||||
z-index: 1; |
|
||||
} |
|
||||
.case-template, |
|
||||
.intelligent-filling { |
|
||||
cursor: pointer; |
|
||||
height: 140px; |
|
||||
width: 32px; |
|
||||
background: #fff; |
|
||||
border-radius: 4px; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: space-around; |
|
||||
align-items: center; |
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); |
|
||||
span { |
|
||||
writing-mode: vertical-rl; |
|
||||
letter-spacing: 6px; |
|
||||
} |
|
||||
} |
|
||||
.case-template:hover, |
|
||||
.intelligent-filling:hover { |
|
||||
background: linear-gradient(270deg, #f4f8fb 0%, #deebff 66.15%); |
|
||||
} |
|
||||
.case-template { |
|
||||
margin-bottom: 6px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.archives { |
|
||||
.el-button .el-button--text .el-button--mini { |
|
||||
padding: 0; |
|
||||
} |
|
||||
.tree-date { |
|
||||
font-size: 14px; |
|
||||
color: #ccc; |
|
||||
} |
|
||||
.tree-date-active { |
|
||||
color: #e4e4e4; |
|
||||
} |
|
||||
.el-tree-node { |
|
||||
margin-bottom: 6px; |
|
||||
} |
|
||||
.el-tree-node__content { |
|
||||
margin-bottom: 4px; |
|
||||
height: 35px; |
|
||||
padding-left: 0 !important; |
|
||||
} |
|
||||
.tree-children { |
|
||||
padding: 2px 0 2px 20px; |
|
||||
position: relative; |
|
||||
} |
|
||||
.el-tree-node__expand-icon.is-leaf { |
|
||||
display: none; |
|
||||
} |
|
||||
.tree-children:hover { |
|
||||
.tree-button { |
|
||||
display: inline-block; |
|
||||
} |
|
||||
} |
|
||||
.tree-button { |
|
||||
position: absolute; |
|
||||
bottom: 6px; |
|
||||
right: 4px; |
|
||||
display: none; |
|
||||
} |
|
||||
.tree-button-active { |
|
||||
color: #fff; |
|
||||
} |
|
||||
.custom-tree-node { |
|
||||
flex: 1; |
|
||||
padding-top: 6px; |
|
||||
} |
|
||||
.tree-forname { |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
overflow: hidden; |
|
||||
width: 90%; |
|
||||
} |
|
||||
.el-tree-node__content:hover, |
|
||||
.el-upload-list__item:hover { |
|
||||
background: none; |
|
||||
} |
|
||||
.el-icon-caret-right:before { |
|
||||
color: #262626; |
|
||||
} |
|
||||
} |
|
||||
.comonForm-tab { |
|
||||
#tab-mz { |
|
||||
padding-left: 14px !important; |
|
||||
} |
|
||||
.el-tabs__nav-wrap::after { |
|
||||
height: 0; |
|
||||
} |
|
||||
.el-tabs__header { |
|
||||
padding-right: 0 !important; |
|
||||
} |
|
||||
.el-tabs__item.is-active { |
|
||||
color: #fff; |
|
||||
background: #1890ff; |
|
||||
} |
|
||||
.el-tabs__item { |
|
||||
background: #f2f3f5; |
|
||||
padding: 0 14px; |
|
||||
margin-left: 1px; |
|
||||
height: 35px; |
|
||||
line-height: 35px; |
|
||||
} |
|
||||
.el-tabs__content { |
|
||||
padding: 0 !important; |
|
||||
} |
|
||||
} |
|
||||
.see-doctor .comonForm-tab .el-tabs__item:last-child { |
|
||||
padding-right: 14px !important; |
|
||||
} |
|
||||
.see-doctor .comonForm-tab .el-tabs__item:nth-child(2) { |
|
||||
padding-left: 14px !important; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,67 +0,0 @@ |
|||||
<template> |
|
||||
<div style="position: relative;width:80px;margin:0 20px;" class="input-number"> |
|
||||
<el-input v-model="inputValue" size="small" style="width:80px;" @input="inputChange" /> |
|
||||
<span |
|
||||
style="position: absolute;left:-20px;top:0;background:#f5f7fa;width:30px;height:32px;text-align:center;border: 1px solid #DCDFE6;font-size:12px;box-sizing: border-box;display: flex;align-items: center;justify-content: center;" |
|
||||
@click="subtractHandle" |
|
||||
><i class="el-icon-minus" /></span> |
|
||||
<span |
|
||||
style="position: absolute;right:-20px;top:0;background:#f5f7fa;width:30px;height:32px;text-align:center;border: 1px solid #DCDFE6;font-size:12px;box-sizing: border-box;display: flex;align-items: center;justify-content: center;" |
|
||||
@click="addHandle" |
|
||||
><i class="el-icon-plus" /></span> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
inputNumberValue: { |
|
||||
type: Number, |
|
||||
default: null |
|
||||
}, |
|
||||
name: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
inputValue: null |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.inputValue = this.inputNumberValue |
|
||||
}, |
|
||||
methods: { |
|
||||
inputChange(val) { |
|
||||
// this.$('input').on('input', function() { |
|
||||
// console.log(11111) |
|
||||
// console.log(this.$(this)) |
|
||||
// }) |
|
||||
// const input = this.$('input') |
|
||||
// input.each(function() { |
|
||||
// console.log(123) |
|
||||
// .attr('value', 123) |
|
||||
// }) |
|
||||
this.$parent.$parent.setQuestionList(Number(val), this.name) |
|
||||
}, |
|
||||
subtractHandle() { |
|
||||
this.inputValue > 0 ? this.inputValue-- : 0 |
|
||||
this.inputChange(this.inputValue) |
|
||||
}, |
|
||||
addHandle() { |
|
||||
this.inputValue++ |
|
||||
this.inputChange(this.inputValue) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss"> |
|
||||
.input-number { |
|
||||
.el-input__inner { |
|
||||
text-align: center; |
|
||||
} |
|
||||
span { |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,230 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 智能填充 --> |
|
||||
<el-drawer |
|
||||
title="我是标题" |
|
||||
:visible.sync="drawer" |
|
||||
:with-header="false" |
|
||||
:before-close="handleClose" |
|
||||
class="intelligent-drawer-dialog" |
|
||||
> |
|
||||
<div class="crf-data"> |
|
||||
<template v-if="examData.length>0"> |
|
||||
<div v-for="(item,index) in examData" :key="index"> |
|
||||
<crf-data |
|
||||
v-if="crfDataVisible && item.exams.length>0" |
|
||||
v-model="item.value" |
|
||||
:exam-name="item.name" |
|
||||
:list="item.exams" |
|
||||
/> |
|
||||
</div> |
|
||||
</template> |
|
||||
<div v-else class="nodata"> |
|
||||
<img src="@/assets/img/nodata.png" alt=""> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-drawer> |
|
||||
</template> |
|
||||
<script> |
|
||||
const Base64 = require('js-base64').Base64 |
|
||||
import crfData from '@/components/hm-crf/crf-data.vue' |
|
||||
export default { |
|
||||
components: { crfData }, |
|
||||
props: { |
|
||||
drawer: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
}, |
|
||||
title: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
// 获取的检查数据，【item.value】为v-model绑定值，即用于填充左侧iframe |
|
||||
examData: [{ |
|
||||
exams: [{ |
|
||||
time: '2021-07-16', |
|
||||
recId: '1', |
|
||||
type: null, |
|
||||
data: [{ |
|
||||
both: null, |
|
||||
id: '1', |
|
||||
name: '等效球镜', |
|
||||
od: '-0.25', |
|
||||
os: '1.5' |
|
||||
}] |
|
||||
}, { |
|
||||
time: '2021-07-17', |
|
||||
recId: '2', |
|
||||
type: null, |
|
||||
data: [{ |
|
||||
both: null, |
|
||||
id: '2', |
|
||||
name: '等效球镜', |
|
||||
od: '-0.25', |
|
||||
os: '1.5' |
|
||||
}] |
|
||||
}, { |
|
||||
time: '2021-07-18', |
|
||||
recId: '3', |
|
||||
type: null, |
|
||||
data: [{ |
|
||||
both: null, |
|
||||
id: '3', |
|
||||
name: '等效球镜', |
|
||||
od: '-0.25', |
|
||||
os: '1.5' |
|
||||
}] |
|
||||
}], |
|
||||
id: '验光', |
|
||||
name: '验光' |
|
||||
}, { |
|
||||
exams: [{ |
|
||||
time: '2021-07-16', |
|
||||
recId: '4', |
|
||||
type: null, |
|
||||
data: [{ |
|
||||
both: null, |
|
||||
id: '4', |
|
||||
name: '等效球镜', |
|
||||
od: '-0.25', |
|
||||
os: '1.5' |
|
||||
}] |
|
||||
}, { |
|
||||
time: '2021-07-17', |
|
||||
recId: '5', |
|
||||
type: null, |
|
||||
data: [{ |
|
||||
both: null, |
|
||||
id: '5', |
|
||||
name: '等效球镜', |
|
||||
od: '-0.25', |
|
||||
os: '1.5' |
|
||||
}] |
|
||||
}, { |
|
||||
time: '2021-07-18', |
|
||||
recId: '6', |
|
||||
type: null, |
|
||||
data: [{ |
|
||||
both: null, |
|
||||
id: '6', |
|
||||
name: '等效球镜', |
|
||||
od: '-0.25', |
|
||||
os: '1.5' |
|
||||
}] |
|
||||
}], |
|
||||
id: '验光', |
|
||||
name: '验光' |
|
||||
}], |
|
||||
crfDataVisible: true |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
console.log(4444) |
|
||||
// this.init() |
|
||||
}, |
|
||||
methods: { |
|
||||
handleClose(done) { |
|
||||
this.$emit('drawerClose', false) |
|
||||
}, |
|
||||
init() { |
|
||||
this.$nextTick(() => { |
|
||||
this.$http.get('/crf/template', { params: { crfId: this.crfId }}).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
if (res.data) { |
|
||||
this.content = Base64.decode(res.data.content) |
|
||||
this.crfVisible = true |
|
||||
} |
|
||||
}).catch(() => { }) |
|
||||
|
|
||||
// this.$http.get(`/from/data/getFirstFeedbackData/${this.patientIdNumber}`).then(({ data: res }) => { |
|
||||
// if (res.code !== 0) { |
|
||||
// return this.$message.error(res.msg) |
|
||||
// } |
|
||||
// if (res.data) { |
|
||||
// this.examData = res.data |
|
||||
// this.crfDataVisible = true |
|
||||
// // setTimeout(() => { |
|
||||
// // this.fillCrf() |
|
||||
// // }, 1000) |
|
||||
// } |
|
||||
// }).catch(() => { }) |
|
||||
}) |
|
||||
}, |
|
||||
fillCrf() { |
|
||||
// 过滤数据 |
|
||||
const dataSelect = [] |
|
||||
let fillItemList = [] |
|
||||
this.examData.forEach(item => { |
|
||||
if (item.value) { |
|
||||
dataSelect.push(item.value) |
|
||||
if (item.value.data) { |
|
||||
const examItemList = item.value.data.map((obj, index, arr) => { |
|
||||
obj.recId = item.value.recId |
|
||||
obj.time = item.value.time |
|
||||
return obj |
|
||||
}) |
|
||||
fillItemList = fillItemList.concat(examItemList) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
const ifr = this.$refs.hmCrf.$el |
|
||||
const ifrWin = ifr.contentWindow |
|
||||
ifrWin.dataFill(fillItemList) |
|
||||
}, |
|
||||
submit() { |
|
||||
const ifr = this.$refs.hmCrf.$el |
|
||||
const ifrDoc = ifr.contentWindow.document || ifr.contentDocument |
|
||||
const body = ifrDoc.getElementsByTagName('body')[0] |
|
||||
const crfContent = body.innerHTML |
|
||||
this.$http.post('/crf/form', { |
|
||||
crfId: this.crfId, |
|
||||
dataContent: Base64.encode(crfContent), |
|
||||
idNumber: this.patientIdNumber, |
|
||||
inputDate: this.inputDate, |
|
||||
projectId: window.SITE_CONFIG['projectId'] |
|
||||
}).then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
// this.updateVisitPlan() |
|
||||
this.$message({ |
|
||||
message: this.$t('prompt.success'), |
|
||||
type: 'success', |
|
||||
duration: 500, |
|
||||
onClose: () => { |
|
||||
this.visible = false |
|
||||
this.$emit('refreshData') |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.intelligent-drawer-dialog { |
|
||||
height: 100%; |
|
||||
.nodata { |
|
||||
width: 300px; |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
img{ |
|
||||
width:300px; |
|
||||
} |
|
||||
} |
|
||||
.crf-data { |
|
||||
display: inline-block; |
|
||||
vertical-align: top; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
overflow: auto; |
|
||||
padding: 0 20px 0 20px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -1,605 +0,0 @@ |
|||||
<template> |
|
||||
<div v-loading="loading" class="record-files"> |
|
||||
<div class="record-top"> |
|
||||
<!-- <div @click="getMp3Data">下载录音</div> --> |
|
||||
<!-- 录音工具 --> |
|
||||
<div class="record-tool"> |
|
||||
<div v-if="playRecordIsShow" class="start-record" @click="startRecorder"> |
|
||||
<svg-icon icon-class="icon-record-microphone" class="microphone-bule" /> |
|
||||
<span>开始录音</span> |
|
||||
</div> |
|
||||
<div v-if="!playRecordIsShow" class="in-record"> |
|
||||
<p class="in-record-left"> |
|
||||
<svg-icon icon-class="icon-record-microphone" style="font-size:24px;" :class="showRecordPause ? 'microphone-green':'microphone-grey'" /> |
|
||||
<span>{{ showRecordPause ? '正在录音' : '已经暂停' }}</span> |
|
||||
</p> |
|
||||
<!-- 暂停录音 --> |
|
||||
<svg-icon v-show="showRecordPause" icon-class="icon-record-zanting" class="svg-zanting" @click="pauseRecorder" /> |
|
||||
<svg-icon v-show="!showRecordPause" icon-class="icon-record-resume" class="svg-zanting" @click="resumeRecorder" /> |
|
||||
<!-- 停止录音 --> |
|
||||
<svg-icon icon-class="icon-record-stop" class="svg-stop" @click="endRecorder" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 录音动画 --> |
|
||||
<div class="record-animation"> |
|
||||
<svg-icon icon-class="icon-record-voice" class="voice-blue" /> |
|
||||
<span class="record-time">{{ recordDuration }}</span> |
|
||||
<canvas id="canvas" style="width:100%;height:25px;" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="record-content"> |
|
||||
<div class="talk-list"> |
|
||||
<p class="title">谈话清单</p> |
|
||||
<div class="checkboxs"> |
|
||||
<el-checkbox-group v-model="checkList" class="check-list" @change="checkboxChangeHandle"> |
|
||||
<el-checkbox v-for="item in talkList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="record-list-father"> |
|
||||
<p class="title">录音文件</p> |
|
||||
<div v-if="recordFlag" class="record-lists"> |
|
||||
<div v-for="(item,index) in recordList" :key="index" class="record-list"> |
|
||||
<p class="record-date">● {{ item.createDate }}</p> |
|
||||
<audio-player ref="audio" class="audio-box" :fileurl="item.filePath" :child-ref="'RudioRef'+index" /> |
|
||||
<!-- <p class="record-file"> |
|
||||
<svg-icon icon-class="icon-record-voice" class="currentColor" /> |
|
||||
<span>{{ item.duration }}</span> |
|
||||
<svg-icon :icon-class="audioPlayShow ? 'icon-record-play':'icon-record-zanting'" class="svg-play" @click="playHandle(item)" /> |
|
||||
</p> --> |
|
||||
</div> |
|
||||
</div> |
|
||||
<img v-show="imgShow" src="@/assets/img/nodata.png" alt="" width="150px" class="record-img"> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import lamejs from 'lamejs' |
|
||||
import AudioPlayer from './audioplayer.vue' |
|
||||
const audio = new Audio() |
|
||||
export default { |
|
||||
components: { |
|
||||
AudioPlayer |
|
||||
}, |
|
||||
props: { |
|
||||
crfItem: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
}, |
|
||||
formId: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
recordList: [], |
|
||||
playRecordIsShow: true, |
|
||||
// 波浪图-录音 |
|
||||
drawRecordId: null, |
|
||||
oCanvas: null, |
|
||||
ctx: null, |
|
||||
// 波浪图-播放 |
|
||||
drawPlayId: null, |
|
||||
pCanvas: null, |
|
||||
pCtx: null, |
|
||||
// 录音暂停是否显示 |
|
||||
showRecordPause: true, |
|
||||
// 录音时长 |
|
||||
recordDuration: '00:00:00', |
|
||||
audioPlayShow: true, |
|
||||
recordFlag: true, |
|
||||
imgShow: false, |
|
||||
loading: false, |
|
||||
talkList: [{ |
|
||||
name: '谈话记录1', |
|
||||
id: 1 |
|
||||
}, { |
|
||||
name: '谈话记录1', |
|
||||
id: 2 |
|
||||
}, { |
|
||||
name: '谈话记录1', |
|
||||
id: 3 |
|
||||
}, { |
|
||||
name: '谈话记录1', |
|
||||
id: 4 |
|
||||
}], |
|
||||
checkList: [] |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
// 绑定事件-打印的是当前录音数据 |
|
||||
this.$recorder.onprogress = (params) => { |
|
||||
// console.log('--------------START---------------') |
|
||||
this.recordDuration = this.timeToFormat(params.duration) |
|
||||
// console.log('录音时长(秒)', params.duration) |
|
||||
// console.log('录音大小(字节)', params.fileSize) |
|
||||
// console.log('录音音量百分比(%)', params.vol) |
|
||||
// console.log('当前录音的总数据([DataView, DataView...])', params.data) |
|
||||
// console.log('--------------END---------------') |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.startCanvas() |
|
||||
this.getTalkTecord() |
|
||||
// 获取谈话清单 |
|
||||
this.getTalkList() |
|
||||
}, |
|
||||
methods: { |
|
||||
// 保存谈话清单 |
|
||||
async checkboxChangeHandle(value) { |
|
||||
console.log(value) |
|
||||
const { data: res } = await this.$http.post('/medical/record/saveTalkList', { |
|
||||
formId: this.formId, |
|
||||
dataJson: JSON.stringify(value) |
|
||||
}) |
|
||||
}, |
|
||||
// 获取谈话清单 |
|
||||
async getTalkList() { |
|
||||
const { data: res } = await this.$http.get(`/medical/record/getTalkList/${this.formId}`) |
|
||||
if (res.code === 0) { |
|
||||
this.checkList = res.data ? JSON.parse(res.data) : [] |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
timeToFormat(times) { |
|
||||
var result = '00:00:00' |
|
||||
var hour, minute, second |
|
||||
if (times > 0) { |
|
||||
hour = Math.floor(times / 3600) |
|
||||
if (hour < 10) { |
|
||||
hour = '0' + hour |
|
||||
} |
|
||||
minute = Math.floor((times - 3600 * hour) / 60) |
|
||||
if (minute < 10) { |
|
||||
minute = '0' + minute |
|
||||
} |
|
||||
|
|
||||
second = Math.floor((times - 3600 * hour - 60 * minute) % 60) |
|
||||
if (second < 10) { |
|
||||
second = '0' + second |
|
||||
} |
|
||||
result = hour + ':' + minute + ':' + second |
|
||||
} |
|
||||
return result |
|
||||
}, |
|
||||
// 波浪图配置 |
|
||||
startCanvas() { |
|
||||
// 录音波浪 |
|
||||
this.oCanvas = document.getElementById('canvas') |
|
||||
console.log(this.oCanvas) |
|
||||
console.log(this.oCanvas.width) |
|
||||
this.ctx = this.oCanvas.getContext('2d') |
|
||||
// 播放波浪 |
|
||||
// this.pCanvas = document.getElementById('playChart') |
|
||||
// this.pCtx = this.pCanvas.getContext('2d') |
|
||||
}, |
|
||||
// 开始录音 |
|
||||
startRecorder() { |
|
||||
this.$recorder.start().then(() => { |
|
||||
this.playRecordIsShow = false |
|
||||
// 开始录音 |
|
||||
this.drawRecord() // 开始绘制波浪图 |
|
||||
}, (error) => { |
|
||||
// 出错了 |
|
||||
console.log(`${error.name} : ${error.message}`) |
|
||||
}) |
|
||||
}, |
|
||||
// 暂停录音 |
|
||||
pauseRecorder() { |
|
||||
this.showRecordPause = false |
|
||||
this.$recorder.pause() |
|
||||
this.drawRecordId && cancelAnimationFrame(this.drawRecordId) |
|
||||
this.drawRecordId = null |
|
||||
}, |
|
||||
// 播放录音 |
|
||||
playRecorder() { |
|
||||
this.$recorder.play() |
|
||||
this.drawPlay() // 绘制波浪图 |
|
||||
}, |
|
||||
// 暂停播放 |
|
||||
pausePlayRecorder() { |
|
||||
this.$recorder.pausePlay() |
|
||||
}, |
|
||||
// 恢复录音播放 |
|
||||
resumePlayRecorder() { |
|
||||
this.$recorder.resumePlay() |
|
||||
this.drawPlay() // 绘制波浪图 |
|
||||
}, |
|
||||
// 继续录音 |
|
||||
resumeRecorder() { |
|
||||
this.showRecordPause = true |
|
||||
this.$recorder.resume() |
|
||||
this.drawRecord() // 开始绘制波浪图 |
|
||||
}, |
|
||||
// 结束录音 |
|
||||
endRecorder() { |
|
||||
console.log('结束录音') |
|
||||
this.loading = true |
|
||||
this.$recorder.stop() |
|
||||
this.drawRecordId && cancelAnimationFrame(this.drawRecordId) |
|
||||
this.drawRecordId = null |
|
||||
this.playRecordIsShow = true |
|
||||
this.recordDuration = '00:00:00' |
|
||||
this.uploadFile() |
|
||||
}, |
|
||||
// 上传录音 |
|
||||
async uploadFile() { |
|
||||
const mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3') |
|
||||
const formData = new FormData() |
|
||||
let file = this.convertToMp3(this.$recorder.getWAV()) |
|
||||
file = new File([file], mp3Name) |
|
||||
formData.append('file', file) |
|
||||
formData.append('mp3Name', mp3Name) |
|
||||
formData.append('formId', this.formId) |
|
||||
this.$http({ |
|
||||
method: 'post', |
|
||||
url: '/medical/record/saveTalkRecord', |
|
||||
headers: { |
|
||||
'Content-Type': 'multipart/form-data' |
|
||||
}, |
|
||||
data: formData |
|
||||
}).then((res) => { |
|
||||
if (res.data.code === 0) { |
|
||||
this.getTalkTecord() |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 获取谈话记录 |
|
||||
async getTalkTecord() { |
|
||||
this.recordFlag = false |
|
||||
const { data: res } = await this.$http.get(`/medical/record/getTalkRecord/${this.formId}`) |
|
||||
if (res.code === 0) { |
|
||||
this.recordList = res.data |
|
||||
this.recordFlag = true |
|
||||
this.imgShow = !(res.data.length > 0) |
|
||||
this.loading = false |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 点击录音文件 播放-暂停 |
|
||||
// playHandle(item) { |
|
||||
// console.log('play') |
|
||||
// if (audio.paused) { |
|
||||
// this.audioPlayShow = false |
|
||||
// audio.src = item.filePath |
|
||||
// audio.play() |
|
||||
// } else { |
|
||||
// console.log('pause') |
|
||||
// this.audioPlayShow = true |
|
||||
// audio.pause() |
|
||||
// } |
|
||||
// console.log(audio.paused) |
|
||||
// }, |
|
||||
// 绘制波浪图-录音 |
|
||||
drawRecord() { |
|
||||
// 用requestAnimationFrame稳定60fps绘制 |
|
||||
this.drawRecordId = requestAnimationFrame(this.drawRecord) |
|
||||
|
|
||||
// 实时获取音频大小数据 |
|
||||
const dataArray = this.$recorder.getRecordAnalyseData() |
|
||||
const bufferLength = dataArray.length |
|
||||
|
|
||||
// 填充背景色 |
|
||||
// this.ctx.fillStyle = 'rgb(255, 255, 255)' |
|
||||
// createLineGradient(x1,y1,x2,y2)x1=x2 纵向渐变 y1=y2横向渐变 |
|
||||
var grad = this.ctx.createLinearGradient(0, 0, 0, 400) |
|
||||
grad.addColorStop(0, 'rgb(206, 240, 255)') |
|
||||
grad.addColorStop(0.5, 'rgb(255, 255, 255)') |
|
||||
this.ctx.fillStyle = grad |
|
||||
this.ctx.fillRect(0, 0, this.oCanvas.width, this.oCanvas.height) |
|
||||
|
|
||||
// 设定波形绘制颜色 |
|
||||
this.ctx.lineWidth = 2 |
|
||||
this.ctx.strokeStyle = 'rgb(152, 199, 255)' |
|
||||
|
|
||||
this.ctx.beginPath() |
|
||||
|
|
||||
var sliceWidth = this.oCanvas.width * 1.0 / bufferLength // 一个点占多少位置，共有bufferLength个点要绘制 |
|
||||
var x = 0 // 绘制点的x轴位置 |
|
||||
|
|
||||
for (var i = 0; i < bufferLength; i++) { |
|
||||
var v = dataArray[i] / 128.0 |
|
||||
var y = v * this.oCanvas.height / 2 |
|
||||
|
|
||||
if (i === 0) { |
|
||||
// 第一个点 |
|
||||
this.ctx.moveTo(x, y) |
|
||||
} else { |
|
||||
// 剩余的点 |
|
||||
this.ctx.lineTo(x, y) |
|
||||
} |
|
||||
// 依次平移，绘制所有点 |
|
||||
x += sliceWidth |
|
||||
} |
|
||||
|
|
||||
this.ctx.lineTo(this.oCanvas.width, this.oCanvas.height / 2) |
|
||||
this.ctx.stroke() |
|
||||
}, |
|
||||
// 绘制波浪图-播放 |
|
||||
drawPlay() { |
|
||||
// 用requestAnimationFrame稳定60fps绘制 |
|
||||
this.drawPlayId = requestAnimationFrame(this.drawPlay) |
|
||||
|
|
||||
// 实时获取音频大小数据 |
|
||||
const dataArray = this.$recorder.getPlayAnalyseData() |
|
||||
const bufferLength = dataArray.length |
|
||||
|
|
||||
// 填充背景色 |
|
||||
// this.pCtx.fillStyle = 'rgb(255, 255, 255)' |
|
||||
// createLineGradient(x1,y1,x2,y2)x1=x2 纵向渐变 y1=y2横向渐变 |
|
||||
var grad = this.ctx.createLinearGradient(0, 0, 0, 400) |
|
||||
grad.addColorStop(0, 'rgb(206, 240, 255)') |
|
||||
grad.addColorStop(0.5, 'rgb(255, 255, 255)') |
|
||||
this.ctx.fillStyle = grad |
|
||||
this.pCtx.fillRect(0, 0, this.pCanvas.width, this.pCanvas.height) |
|
||||
|
|
||||
// 设定波形绘制颜色 |
|
||||
this.pCtx.lineWidth = 2 |
|
||||
this.pCtx.strokeStyle = 'rgb(152, 199, 255)' |
|
||||
|
|
||||
this.pCtx.beginPath() |
|
||||
|
|
||||
var sliceWidth = this.pCanvas.width * 1.0 / bufferLength // 一个点占多少位置，共有bufferLength个点要绘制 |
|
||||
var x = 0 // 绘制点的x轴位置 |
|
||||
|
|
||||
for (var i = 0; i < bufferLength; i++) { |
|
||||
var v = dataArray[i] / 128.0 |
|
||||
var y = v * this.pCanvas.height / 2 |
|
||||
|
|
||||
if (i === 0) { |
|
||||
// 第一个点 |
|
||||
this.pCtx.moveTo(x, y) |
|
||||
} else { |
|
||||
// 剩余的点 |
|
||||
this.pCtx.lineTo(x, y) |
|
||||
} |
|
||||
// 依次平移，绘制所有点 |
|
||||
x += sliceWidth |
|
||||
} |
|
||||
|
|
||||
this.pCtx.lineTo(this.pCanvas.width, this.pCanvas.height / 2) |
|
||||
this.pCtx.stroke() |
|
||||
}, |
|
||||
// 下载mp3 |
|
||||
getMp3Data() { |
|
||||
const mp3Blob = this.convertToMp3(this.$recorder.getWAV()) |
|
||||
this.$recorder.download(mp3Blob, 'recorder', 'mp3') |
|
||||
}, |
|
||||
// 转mp3 |
|
||||
convertToMp3(wavDataView) { |
|
||||
// 获取wav头信息 |
|
||||
const wav = lamejs.WavHeader.readHeader(wavDataView) // 此处其实可以不用去读wav头信息，毕竟有对应的config配置 |
|
||||
const { channels, sampleRate } = wav |
|
||||
const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128) |
|
||||
// 获取左右通道数据 |
|
||||
const result = this.$recorder.getChannelData() |
|
||||
const buffer = [] |
|
||||
|
|
||||
const leftData = result.left && new Int16Array(result.left.buffer, 0, result.left.byteLength / 2) |
|
||||
const rightData = result.right && new Int16Array(result.right.buffer, 0, result.right.byteLength / 2) |
|
||||
const remaining = leftData.length + (rightData ? rightData.length : 0) |
|
||||
|
|
||||
const maxSamples = 1152 |
|
||||
for (let i = 0; i < remaining; i += maxSamples) { |
|
||||
const left = leftData.subarray(i, i + maxSamples) |
|
||||
let right = null |
|
||||
let mp3buf = null |
|
||||
|
|
||||
if (channels === 2) { |
|
||||
right = rightData.subarray(i, i + maxSamples) |
|
||||
mp3buf = mp3enc.encodeBuffer(left, right) |
|
||||
} else { |
|
||||
mp3buf = mp3enc.encodeBuffer(left) |
|
||||
} |
|
||||
|
|
||||
if (mp3buf.length > 0) { |
|
||||
buffer.push(mp3buf) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const enc = mp3enc.flush() |
|
||||
|
|
||||
if (enc.length > 0) { |
|
||||
buffer.push(enc) |
|
||||
} |
|
||||
|
|
||||
return new Blob(buffer, { type: 'audio/mp3' }) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.record-files { |
|
||||
position: absolute; |
|
||||
top: 10px; |
|
||||
right: 10px; |
|
||||
} |
|
||||
.record-top { |
|
||||
height: 85px; |
|
||||
border-radius: 6px; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.record-tool { |
|
||||
height: 60px; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
background: #fff; |
|
||||
.start-record { |
|
||||
width: 80%; |
|
||||
height: 32px; |
|
||||
line-height: 32px; |
|
||||
background: #dfe6ec; |
|
||||
border-radius: 16px; |
|
||||
cursor: pointer; |
|
||||
span { |
|
||||
padding-left: 10px; |
|
||||
} |
|
||||
} |
|
||||
.start-record:hover { |
|
||||
box-shadow: 4px 4px 10px 0.1px rgba(0, 0, 0, 0.3); |
|
||||
} |
|
||||
.in-record { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
.svg-zanting { |
|
||||
margin: 0 8px; |
|
||||
} |
|
||||
.svg-zanting, |
|
||||
.svg-stop { |
|
||||
font-size: 32px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.in-record-left { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
} |
|
||||
} |
|
||||
.record-animation { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
height: 25px; |
|
||||
background: linear-gradient(180deg, #cdf0ff 0%, #ffffff 100%); |
|
||||
.voice-blue { |
|
||||
position: absolute; |
|
||||
left: 4px; |
|
||||
top:4px; |
|
||||
z-index: 99; |
|
||||
color:#1e79ff; |
|
||||
} |
|
||||
.record-time { |
|
||||
position: absolute; |
|
||||
left:28px; |
|
||||
top: 1px; |
|
||||
z-index: 99; |
|
||||
} |
|
||||
#canvas { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.record-content { |
|
||||
margin-top: 10px; |
|
||||
height: calc(100vh - 50px - 32px - 42px - 195px); |
|
||||
padding: 16px; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
.record-img { |
|
||||
margin-top: 20px; |
|
||||
} |
|
||||
.title { |
|
||||
font-size: 16px; |
|
||||
font-weight: 700; |
|
||||
text-align: left; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
.record-list-father { |
|
||||
flex: 65%; |
|
||||
margin-bottom: 10px; |
|
||||
width: 110%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.record-lists { |
|
||||
overflow-y: auto; |
|
||||
} |
|
||||
.record-list { |
|
||||
width: 93%; |
|
||||
} |
|
||||
.record-date { |
|
||||
font-size: 14px; |
|
||||
color: #8e8e8e; |
|
||||
text-align: left; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
.record-file { |
|
||||
background: #1e79ff; |
|
||||
color: #fff; |
|
||||
width: 100%; |
|
||||
height: 24px; |
|
||||
border-radius: 4px; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
padding: 4px 10px; |
|
||||
} |
|
||||
.svg-play { |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.talk-list { |
|
||||
margin-bottom: 20px; |
|
||||
flex: 35%; |
|
||||
overflow: hidden; |
|
||||
width: 110%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
.checkboxs { |
|
||||
overflow-y: auto; |
|
||||
overflow-x: hidden; |
|
||||
} |
|
||||
.check-list { |
|
||||
width: 93%; |
|
||||
} |
|
||||
} |
|
||||
.record-top, |
|
||||
.record-content { |
|
||||
width: 175px; |
|
||||
border-radius: 4px; |
|
||||
background: #fff; |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss"> |
|
||||
.record-files { |
|
||||
.microphone-bule { |
|
||||
color: #1e79ff; |
|
||||
} |
|
||||
.microphone-green { |
|
||||
color: #00B91E; |
|
||||
} |
|
||||
.microphone-grey { |
|
||||
color: #C9CDD4; |
|
||||
} |
|
||||
.voice-white { |
|
||||
color: #fff; |
|
||||
} |
|
||||
.el-checkbox-group{ |
|
||||
text-align: left; |
|
||||
} |
|
||||
.el-checkbox__label { |
|
||||
white-space: pre-wrap; |
|
||||
} |
|
||||
.el-checkbox { |
|
||||
margin-bottom: 6px; |
|
||||
margin-right: 0; |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
color: #ff4d4f !important; |
|
||||
} |
|
||||
.el-checkbox__input { |
|
||||
padding-top: 3px; |
|
||||
} |
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner { |
|
||||
background-color: #058b2b; |
|
||||
border-color: #058b2b; |
|
||||
} |
|
||||
.el-checkbox__input.is-checked+.el-checkbox__label { |
|
||||
color: #058b2b; |
|
||||
} |
|
||||
.el-checkbox__inner:hover { |
|
||||
border-color:#DCDFE6; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,284 +0,0 @@ |
|||||
<template> |
|
||||
<div |
|
||||
id="safetyChecklist" |
|
||||
style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always" |
|
||||
> |
|
||||
<p style="color:#4c9ef5;font-size:32px;font-weight:700;margin:12px 0 34px 0;text-align:center;"> |
|
||||
屈光中心手术安全核查表</p> |
|
||||
<div style="font-size:16px;"> |
|
||||
<!-- 患者信息 --> |
|
||||
<div style="text-align:center;"> |
|
||||
<div style="margin-bottom:16px;"> |
|
||||
<span style="margin-right:24px;"> |
|
||||
患者姓名： |
|
||||
<span style="display:inline-block;width:100px;border-bottom:1px solid #ccc;text-align:center;">{{ patientInfo.patientName }}</span> |
|
||||
</span> |
|
||||
<span style="margin-right:24px;"> |
|
||||
性别： |
|
||||
<span style="display:inline-block;width:100px;border-bottom:1px solid #ccc;text-align:center;">{{ patientInfo.patientSex }}</span> |
|
||||
</span> |
|
||||
<span> |
|
||||
年龄： |
|
||||
<span style="display:inline-block;width:100px;border-bottom:1px solid #ccc;text-align:center;">{{ patientInfo.patientAge }}岁</span> |
|
||||
</span> |
|
||||
</div> |
|
||||
<div> |
|
||||
<span style="margin-right:24px;"> |
|
||||
手术日期： |
|
||||
<span style="display:inline-block;width:100px;border-bottom:1px solid #ccc;text-align:center;">{{ $options.filters.dateFilterTwo( formContent.data[0].data.date) }}</span> |
|
||||
</span> |
|
||||
<span style="margin-right:24px;"> |
|
||||
拟施手术方式： |
|
||||
<span style="display:inline-block;width:195px;border-bottom:1px solid #ccc;text-align:center;">{{ patientInfo.operaName }}</span> |
|
||||
</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 表格内容 --> |
|
||||
<div style="display:flex;"> |
|
||||
<!-- 手术准备前 --> |
|
||||
<div style="text-align:left;margin-top:14px;border:1px solid #ccc;border-right:0;padding:4px;flex:33.33%;"> |
|
||||
<div> |
|
||||
<p style="font-size:18px;border-bottom:1px solid #ccc;padding-bottom:5px;text-align:center;">手术准备前</p> |
|
||||
<!-- 手术准备前内容 --> |
|
||||
<div> |
|
||||
<!-- 确认患者姓名，年龄 --> |
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<span>患者姓名\年龄</span> |
|
||||
<span style="margin-left:10px;"> |
|
||||
<el-radio v-for="(item,index) in operationZBQ.checkListJudge" :key="index" v-model="item.checked" :label="true">{{ item.name }}</el-radio> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 手术方式确认 --> |
|
||||
<div style="align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p style="margin-bottom:6px;">手术方式确认：</p> |
|
||||
<span> |
|
||||
<el-radio v-for="(item,index) in operationZBQ.checkListSurgicalMethod" :key="index" v-model="item.checked" style="margin-bottom:4px;" :label="true">{{ item.name }}</el-radio> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 手术眼别 --> |
|
||||
<div style="border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p>手术眼别：</p> |
|
||||
<div style="margin-top:5px;"> |
|
||||
<el-radio v-for="(item,index) in operationZBQ.checkListEYe" :key="index" v-model="item.checked" :label="true">{{ item.name }}</el-radio> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 手术知情同意 --> |
|
||||
<div style="margin-top:8px;display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<span>手术知情同意：</span> |
|
||||
<span> |
|
||||
<el-radio v-for="(item,index) in operationZBQ.checkListInformedConsent" :key="index" v-model="item.checked" :label="true">{{ item.name }}</el-radio> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 隐形眼镜 --> |
|
||||
<div style="display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p style="width:140px;">隐形眼镜：</p> |
|
||||
<span style="display:flex;"> |
|
||||
<el-radio v-for="(item,index) in operationZBQ.checkListContactLenses" :key="index" v-model="item.checked" :label="true">{{ item.name }}</el-radio> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 体温 --> |
|
||||
<div style="display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p>体温：</p> |
|
||||
<span style="display:flex;align-items: center;"> |
|
||||
<el-input v-model="operationZBQ.twValue" placeholder="请输入内容" style="border:none;" /> |
|
||||
<span style="color:#409eff">℃</span> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 血压 --> |
|
||||
<div style="display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p style="width:140px;">血压：</p> |
|
||||
<span style="display:flex;align-items: center;"> |
|
||||
<el-input v-model="operationZBQ.xyValue" placeholder="请输入内容" style="border:none;" /> |
|
||||
<span style="color:#409eff">mmHg</span> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 脉搏 --> |
|
||||
<div style="display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p style="width:140px;">脉搏：</p> |
|
||||
<span style="display:flex;align-items: center;"> |
|
||||
<el-input v-model="operationZBQ.mbValue" placeholder="请输入内容" style="border:none;" /> |
|
||||
<span style="color:#409eff;width:50px;">次/分</span> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 签字 --> |
|
||||
<div style="margin-top:50px;"> |
|
||||
<span>护士签字：</span> |
|
||||
<img :src="operationZBQ.signImgBase" alt="" width="50px"> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 手术开始前 --> |
|
||||
<div style="text-align:left;margin-top:14px;border:1px solid #ccc;border-right:0;padding:4px;flex:33.33%;"> |
|
||||
<div> |
|
||||
<p style="font-size:18px;border-bottom:1px solid #ccc;padding-bottom:5px;text-align:center;">手术开始前</p> |
|
||||
<!-- 手术准备前内容 --> |
|
||||
<div> |
|
||||
<!-- 确认患者姓名，年龄 --> |
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<span>患者姓名\年龄</span> |
|
||||
<span style="margin-left:10px;"> |
|
||||
<el-radio v-for="(item,index) in operationKSQ.checkListJudge" :key="index" v-model="item.checked" :label="true">{{ item.name }}</el-radio> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 手术方式确认 --> |
|
||||
<div style="align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p style="margin-bottom:6px;">手术方式确认：</p> |
|
||||
<span> |
|
||||
<el-radio v-for="(item,index) in operationKSQ.checkListSurgicalMethod" :key="index" v-model="item.checked" style="margin-bottom:4px;" :label="true">{{ item.name }}</el-radio> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 手术眼别 --> |
|
||||
<div style="border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p>手术眼别：</p> |
|
||||
<div style="margin-top:5px;"> |
|
||||
<el-radio v-for="(item,index) in operationKSQ.checkListEYe" :key="index" v-model="item.checked" :label="true">{{ item.name }}</el-radio> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 技师与手术医生核对陈述 --> |
|
||||
<div style="border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p style="margin-bottom:10px;">技师与手术医生核对陈述：</p> |
|
||||
<span style="display:flex;"> |
|
||||
<el-radio v-for="(item,index) in operationKSQ.checkListDescribe" :key="index" v-model="item.checked" :label="true">{{ item.name }}</el-radio> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 签字 --> |
|
||||
<div style="margin-top:50px;"> |
|
||||
<span>技师签字：</span> |
|
||||
<img :src="operationKSQ.signImgBase" alt="" width="50px"> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 患者离开手术室前 --> |
|
||||
<div style="text-align:left;margin-top:14px;border:1px solid #ccc;border-right:0;padding:4px;flex:33.33%;"> |
|
||||
<div> |
|
||||
<p style="font-size:18px;border-bottom:1px solid #ccc;padding-bottom:5px;text-align:center;">患者离开手术室前</p> |
|
||||
<!-- 手术准备前内容 --> |
|
||||
<div> |
|
||||
<!-- 确认患者姓名，年龄 --> |
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<span>患者姓名\年龄</span> |
|
||||
<span style="margin-left:10px;"> |
|
||||
<el-radio v-for="(item,index) in operationLKQ.checkListJudge" :key="index" v-model="item.checked" :label="true">{{ item.name }}</el-radio> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 手术方式确认 --> |
|
||||
<div style="align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p style="margin-bottom:6px;">手术方式确认：</p> |
|
||||
<span> |
|
||||
<el-radio v-for="(item,index) in operationLKQ.checkListSurgicalMethod" :key="index" v-model="item.checked" style="margin-bottom:4px;" :label="true">{{ item.name }}</el-radio> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 手术眼别 --> |
|
||||
<div style="border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p>手术眼别：</p> |
|
||||
<div style="margin-top:5px;"> |
|
||||
<el-radio v-for="(item,index) in operationLKQ.checkListEYe" :key="index" v-model="item.checked" :label="true">{{ item.name }}</el-radio> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 手术用药核查 --> |
|
||||
<div style="display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p style="width:140px;">手术用药核查：</p> |
|
||||
<span style="display:flex;"> |
|
||||
<el-radio v-for="(item,index) in operationLKQ.checkListMedicationVerification" :key="index" v-model="item.checked" :label="true">{{ item.name }}</el-radio> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 术中特殊用药 --> |
|
||||
<div style="border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<div style="display:flex;justify-content: space-between;align-items: center;"> |
|
||||
<p style="width:140px;">术中特殊用药：</p> |
|
||||
<span style="display:flex;"> |
|
||||
<el-radio v-for="(item,index) in operationLKQ.checkListSpecialMedication" :key="index" v-model="item.checked" :label="true">{{ item.name }}</el-radio> |
|
||||
</span> |
|
||||
</div> |
|
||||
<div style="margin-top:10px;"> |
|
||||
<p>其他：</p> |
|
||||
<el-input v-model="operationLKQ.otherDrugs" type="textarea" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 隐形眼镜 --> |
|
||||
<div style="display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p style="width:140px;">隐形眼镜：</p> |
|
||||
<span style="display:flex;"> |
|
||||
<el-radio v-for="(item,index) in operationZBQ.checkListContactLenses" :key="index" v-model="item.checked" :label="true">{{ item.name }}</el-radio> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 血压 --> |
|
||||
<div style="display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p style="width:140px;">血压：</p> |
|
||||
<span style="display:flex;align-items: center;"> |
|
||||
<el-input v-model="operationLKQ.xyValue" placeholder="请输入内容" style="border:none;" /> |
|
||||
<span style="color:#409eff">mmHg</span> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 脉搏 --> |
|
||||
<div style="display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #ccc;padding:8px 0;"> |
|
||||
<p style="width:140px;">脉搏：</p> |
|
||||
<span style="display:flex;align-items: center;"> |
|
||||
<el-input v-model="operationLKQ.mbValue" placeholder="请输入内容" style="border:none;" /> |
|
||||
<span style="color:#409eff;width:50px;">次/分</span> |
|
||||
</span> |
|
||||
</div> |
|
||||
<!-- 签字 --> |
|
||||
<div style="margin-top:50px;"> |
|
||||
<span>护士签字：</span> |
|
||||
<img :src="operationLKQ.signImgBase" alt="" width="50px"> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
archiveCaseCRFItem: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
}, |
|
||||
formContent: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
patientInfo: {}, |
|
||||
// 手术准备前 |
|
||||
operationZBQ: {}, |
|
||||
// 手术开始前 |
|
||||
operationKSQ: {}, |
|
||||
// 患者离开手术室前 |
|
||||
operationLKQ: {} |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.patientInfo = this.formContent.data[0].data.patientInfo |
|
||||
this.formContent.data.forEach(item => { |
|
||||
item.checkType === '手术准备前' ? this.operationZBQ = item.data.formList : '' |
|
||||
item.checkType === '手术开始前' ? this.operationKSQ = item.data.formList : '' |
|
||||
item.checkType === '患者离开手术室前' ? this.operationLKQ = item.data.formList : '' |
|
||||
}) |
|
||||
}, |
|
||||
methods: { |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss"> |
|
||||
.ceship{ |
|
||||
|
|
||||
} |
|
||||
#safetyChecklist{ |
|
||||
.el-input__inner { |
|
||||
border: none; |
|
||||
text-align: right; |
|
||||
} |
|
||||
.el-radio { |
|
||||
margin-right: 8px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue