newPeter7
3 years ago
135 changed files with 997 additions and 59500 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