|
|
@@ -5,34 +5,31 @@
|
|
|
class="topBack"
|
|
|
linkTo="/admin/LT-YXSJWH-LBJGWH"
|
|
|
></crumbs>
|
|
|
- <div class="ChronicDiseaseAddWrap">
|
|
|
+ <div class="ChronicDiseaseAddWrap" @click="close">
|
|
|
<div class="ChronicDisease">
|
|
|
- <p class="ChronicDiseaseTop">
|
|
|
+ <p class="ChronicDiseaseTop" v-if="!editData.isEdit">
|
|
|
<span>选择量表标签：</span>
|
|
|
<input
|
|
|
type="text"
|
|
|
v-model="region"
|
|
|
+ @click.stop
|
|
|
>
|
|
|
- <i>搜索</i>
|
|
|
- <ul>
|
|
|
- <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
|
|
|
- <li>呵呵呵</li>
|
|
|
- <li>咯咯咯</li>
|
|
|
+ <i @click.stop="searchTagList">搜索</i>
|
|
|
+ <ul v-if="showLis">
|
|
|
+ <li v-for="item in AdscriptionsType" :key="item.id" @click="selectLis(item.id,item.tagName)">{{item.tagName}}</li>
|
|
|
</ul>
|
|
|
</p>
|
|
|
<p class="ChronicDiseaseBtm">
|
|
|
<span>已选择量表：</span>
|
|
|
- <i>{{region}}</i>
|
|
|
+ <i>{{selectName}}</i>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="ChronicDiseaseDetail">
|
|
|
<div class="ChronicDiseaseLeft">
|
|
|
<h4>操作栏：</h4>
|
|
|
- <ul>
|
|
|
- <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
|
|
|
- <li>呵呵呵</li>
|
|
|
- <li>咯咯咯</li>
|
|
|
- </ul>
|
|
|
+ <div class="parts" v-for="(item,idx) in parts" :class="selectLeftPart.id == item.id?'selectDom':null" :key="item.id" @click="selectPart(item,1)">
|
|
|
+ {{item.name}}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="bottomPartMid fl">
|
|
|
<p><span
|
|
|
@@ -46,22 +43,31 @@
|
|
|
</div>
|
|
|
<div class="ChronicDiseaseRight">
|
|
|
<h4>内容池：</h4>
|
|
|
- <ul>
|
|
|
- <li>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
|
|
|
- <li>呵呵呵</li>
|
|
|
- <li>咯咯咯</li>
|
|
|
- </ul>
|
|
|
+ <div class="contentWrap">
|
|
|
+ <div class="contentDetail clearfix" v-for="(item,idx) in contentPool" :class="selectRightPart.order == item.order?'selectDom':null" :key="item.order" @click="selectPart(item,2)">
|
|
|
+ <span>{{item.name}}：</span>
|
|
|
+ <div class="contentDetails">
|
|
|
+ <quillEditor v-model="item.content" :options="editorOption" v-if="item.val == 0"></quillEditor>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="bottomPartMid fl">
|
|
|
+ <div class="bottomPartMid upAndDown">
|
|
|
<p><span
|
|
|
class="el-icon-arrow-up"
|
|
|
- @click="toTopPool"
|
|
|
+ @click="movePool(1)"
|
|
|
></span></p>
|
|
|
<p><span
|
|
|
class="el-icon-arrow-down"
|
|
|
- @click="toBtmPool"
|
|
|
+ @click="movePool(2)"
|
|
|
></span></p>
|
|
|
</div>
|
|
|
+ <div class="btn">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="submitForm"
|
|
|
+ >确 定</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -69,69 +75,253 @@
|
|
|
<script>
|
|
|
import api from '@api/icss.js';
|
|
|
import utils from '@api/utils.js';
|
|
|
-
|
|
|
+import 'quill/dist/quill.core.css'
|
|
|
+import 'quill/dist/quill.snow.css'
|
|
|
+import 'quill/dist/quill.bubble.css'
|
|
|
+import {quillEditor, Quill} from 'vue-quill-editor'
|
|
|
+import config from '@api/config';
|
|
|
+import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module';
|
|
|
+Quill.register('modules/ImageExtend', ImageExtend);
|
|
|
/**
|
|
|
* 归属type
|
|
|
* 1：主诉模板 2：现病史模板 3：现病史空模板 4 : 其他史模板 5：嵌套模板 6：慢病模板
|
|
|
*/
|
|
|
-
|
|
|
-
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ editorOption: {
|
|
|
+ modules: {
|
|
|
+ toolbar: {
|
|
|
+ container: container
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
region: '', //量表标签
|
|
|
+ selectName:'',
|
|
|
+ selectId:'',
|
|
|
AdscriptionsType: [],
|
|
|
editData: {},
|
|
|
minTitle:'量表维护-添加量表',
|
|
|
+ showLis:false,
|
|
|
+ parts:[],
|
|
|
+ selectLeftPart:{},//左侧选中
|
|
|
+ selectRightPart:{},//右侧选中
|
|
|
+ contentPool:[], //内容池
|
|
|
}
|
|
|
},
|
|
|
+ beforeMount:function(){
|
|
|
+ let tmpPart = localStorage.getItem('DiseaseManage')
|
|
|
+ this.parts = JSON.parse(tmpPart)
|
|
|
+ },
|
|
|
mounted() {
|
|
|
- console.log(this.$route.params, 78787)
|
|
|
let tmpEditData = this.$route.params
|
|
|
- this.editData = tmpEditData
|
|
|
if (tmpEditData.isEdit) { //修改
|
|
|
- this.minTitle='量表维护-修改量表',
|
|
|
- this.form = Object.assign({}, this.form, editData);
|
|
|
- this.form.region1 = (editData.type + '')
|
|
|
- this.form.region2 = editData.name
|
|
|
+ this.editData = tmpEditData
|
|
|
+ this.minTitle='量表维护-修改量表'
|
|
|
+ this.selectName = tmpEditData.data.name
|
|
|
+ this.selectId = tmpEditData.data.id
|
|
|
+ let tmpScale = tmpEditData.data.scale
|
|
|
+ for(let i = 0;i < tmpScale.length;i++){
|
|
|
+ tmpScale[i].val = tmpScale[i].type
|
|
|
+ tmpScale[i].order = tmpScale[i].orderNo
|
|
|
+ tmpScale[i].name = tmpScale[i].type == 0?'文本模块':'推送模块'
|
|
|
+ }
|
|
|
+ this.contentPool = tmpScale
|
|
|
}
|
|
|
this.$emit('changeVal', this.form, false)
|
|
|
- // this.searchTagList()
|
|
|
},
|
|
|
methods: {
|
|
|
- sendData(val) {
|
|
|
- this.$emit('changeVal', this.form, false)
|
|
|
- },
|
|
|
toRightPool() {
|
|
|
-
|
|
|
+ let tmpLeft = JSON.parse(JSON.stringify(this.selectLeftPart))
|
|
|
+ let tmpPool = JSON.parse(JSON.stringify(this.contentPool))
|
|
|
+ if(JSON.stringify(tmpLeft) == '{}'){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(tmpLeft.val == 1){
|
|
|
+ for(let i = 0;i < tmpPool.length;i++){
|
|
|
+ if(tmpPool[i].val == 1){
|
|
|
+ // this.$message({
|
|
|
+ // message: '推送模块只能添加一次',
|
|
|
+ // type: 'warning'
|
|
|
+ // });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tmpPool.push(tmpLeft)
|
|
|
+ this.selectLeftPart = {}
|
|
|
+ for(let i = 0;i < tmpPool.length;i++){
|
|
|
+ tmpPool[i].order = i+1
|
|
|
+ }
|
|
|
+ this.contentPool = tmpPool
|
|
|
},
|
|
|
toLeftPool() {
|
|
|
-
|
|
|
+ let tmpRight = JSON.parse(JSON.stringify(this.selectRightPart))
|
|
|
+ let tmpPool = JSON.parse(JSON.stringify(this.contentPool))
|
|
|
+ if(JSON.stringify(tmpRight) == '{}'){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ tmpPool = tmpPool.filter((item)=>item.order != tmpRight.order)
|
|
|
+ for(let i = 0;i < tmpPool.length;i++){
|
|
|
+ tmpPool[i].order = i+1
|
|
|
+ }
|
|
|
+ this.contentPool = tmpPool
|
|
|
+ this.selectRightPart = {}
|
|
|
},
|
|
|
- toTopPool() {
|
|
|
-
|
|
|
+ movePool(dir) {
|
|
|
+ let tmpRight = JSON.parse(JSON.stringify(this.selectRightPart))
|
|
|
+ let tmpPool = JSON.parse(JSON.stringify(this.contentPool))
|
|
|
+ if((dir == 1 && tmpRight.order == 1) || (dir == 2 && tmpRight.order == tmpPool.length)){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(JSON.stringify(tmpRight) == '{}'){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ tmpPool = tmpPool.filter((item)=>item.order != tmpRight.order)
|
|
|
+ if(dir == 1){
|
|
|
+ tmpPool.splice(tmpRight.order-2,0,tmpRight)
|
|
|
+ for(let i = 0;i < tmpPool.length;i++){
|
|
|
+ tmpPool[i].order = i+1
|
|
|
+ }
|
|
|
+ }else if(dir == 2){
|
|
|
+ tmpPool.splice(tmpRight.order,0,tmpRight)
|
|
|
+ for(let i = 0;i < tmpPool.length;i++){
|
|
|
+ tmpPool[i].order = i+1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.selectRightPart = tmpRight
|
|
|
+ this.contentPool = tmpPool
|
|
|
},
|
|
|
- toBtmPool() {
|
|
|
-
|
|
|
+ selectPart(part,dir){
|
|
|
+ if(dir == 1){
|
|
|
+ if(this.selectLeftPart.val == part.val){
|
|
|
+ this.selectLeftPart = {}
|
|
|
+ }else{
|
|
|
+ this.selectLeftPart = part
|
|
|
+ }
|
|
|
+ }else if(dir == 2){
|
|
|
+ if(this.selectRightPart.order == part.order){
|
|
|
+ this.selectRightPart = {}
|
|
|
+ }else{
|
|
|
+ this.selectRightPart = part
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ close(){
|
|
|
+ this.showLis = false
|
|
|
},
|
|
|
- submitForm(formName) {
|
|
|
- this.$refs[formName].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- this.$emit('validatePass', this.form, false)
|
|
|
- } else {
|
|
|
- console.log('error submit!!');
|
|
|
- return false;
|
|
|
+ selectLis(id,name){
|
|
|
+ this.selectName = name
|
|
|
+ this.selectId = id
|
|
|
+ },
|
|
|
+ searchTagList() {
|
|
|
+ let param = {
|
|
|
+ "tagName": this.region,
|
|
|
+ "type": "21",
|
|
|
+ "filterList":[
|
|
|
+ "scale"
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ api.searchTagList(param).then((res) => {
|
|
|
+ if (res.data.code === '0') {
|
|
|
+ this.AdscriptionsType = res.data.data
|
|
|
+ this.showLis = this.AdscriptionsType.length > 0
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getParams(){
|
|
|
+ let tmpParams = []
|
|
|
+ let tmpPool = JSON.parse(JSON.stringify(this.contentPool))
|
|
|
+ for(let i = 0;i < tmpPool.length;i++){
|
|
|
+ if(tmpPool[i].val == 0 && !tmpPool[i].content){
|
|
|
+
|
|
|
+ }else{
|
|
|
+ let tmpObj = {
|
|
|
+ "content": "",
|
|
|
+ "orderNo": '',
|
|
|
+ "type": ''
|
|
|
+ }
|
|
|
+ tmpObj.content = tmpPool[i].content || ''
|
|
|
+ tmpObj.orderNo = tmpPool[i].order
|
|
|
+ tmpObj.type = tmpPool[i].val
|
|
|
+ tmpParams.push(tmpObj)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ "content": tmpParams,
|
|
|
+ "scaleId": this.selectId
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submitForm() {
|
|
|
+ if(this.selectName == ''){
|
|
|
+ this.$message({
|
|
|
+ message: '请选择量表标签',
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let param = this.getParams();
|
|
|
+ if(param.content.length == 0){
|
|
|
+ this.$message({
|
|
|
+ message: '请添加内容池内容',
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.showConfirmDialog('是否保存该标签组？', () => {
|
|
|
+ api.insertOrUpdate(param).then((res) => {
|
|
|
+ if (res.data.code === '0') {
|
|
|
+ this.warning(res.data.msg || '保存成功', 'success');
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$router.push({
|
|
|
+ path:'/admin/LT-YXSJWH-LBJGWH'
|
|
|
+ })
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
},
|
|
|
+ showConfirmDialog(msg, resolve) {
|
|
|
+ this.$alert(msg, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ resolve();
|
|
|
+ }).catch(() => {});
|
|
|
+ },
|
|
|
+ warning(msg, type,time) {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: msg,
|
|
|
+ type: type || 'warning',
|
|
|
+ duration:time || '3000'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ quillEditor
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+<style lang="less">
|
|
|
+.contentDetails{
|
|
|
+ .quill-editor .ql-toolbar.ql-snow .ql-formats .ql-image,
|
|
|
+ .quill-editor .ql-toolbar.ql-snow .ql-formats .ql-video,
|
|
|
+ .quill-editor .ql-toolbar.ql-snow .ql-formats .ql-link{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
<style lang="less" scoped>
|
|
|
@import "../../less/common.less";
|
|
|
.topBack {
|
|
|
top: 0;
|
|
|
}
|
|
|
+.btn {
|
|
|
+ text-align: right;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
.ChronicDiseaseAddWrap {
|
|
|
margin: 20px;
|
|
|
box-sizing: border-box;
|
|
|
@@ -159,20 +349,23 @@ export default {
|
|
|
width: 56px;
|
|
|
height: 34px;
|
|
|
line-height: 32px;
|
|
|
- border-left: 1px solid #ccc;
|
|
|
+ border-left: 1px solid @icssBorder;
|
|
|
position: relative;
|
|
|
left: -57px;
|
|
|
vertical-align: middle;
|
|
|
text-align: center;
|
|
|
- cursor: default;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
ul {
|
|
|
- margin-left: 160px;
|
|
|
width: 219px;
|
|
|
- border: 1px solid #ccc;
|
|
|
+ margin-left: 160px;
|
|
|
+ border: 1px solid @icssBorder;
|
|
|
background: #fff;
|
|
|
- max-height: 291px;
|
|
|
+ max-height: 200px;
|
|
|
overflow-y: auto;
|
|
|
+ height: auto;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9999;
|
|
|
li {
|
|
|
border: 1px solid #fff;
|
|
|
padding-left: 7px;
|
|
|
@@ -183,23 +376,23 @@ export default {
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
li:hover {
|
|
|
- border-color: #22ccc8;
|
|
|
+ border-color: @adminBase;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.ChronicDiseaseBtm {
|
|
|
- margin: 10px 0;
|
|
|
+ margin: 25px 0 10px 0;
|
|
|
}
|
|
|
}
|
|
|
.ChronicDiseaseDetail {
|
|
|
padding: 20px;
|
|
|
overflow: hidden;
|
|
|
- min-width: 650px;
|
|
|
+ position: relative;
|
|
|
h4 {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.bottomPartMid {
|
|
|
- width: 60px;
|
|
|
+ width: 80px;
|
|
|
margin-top: 60px;
|
|
|
p {
|
|
|
width: 100%;
|
|
|
@@ -217,34 +410,51 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .upAndDown {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
.ChronicDiseaseLeft {
|
|
|
float: left;
|
|
|
+ .parts {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 20px 0;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border: 1px solid @icssBorder;
|
|
|
+ padding: 10px 20px;
|
|
|
+ color: #333;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.ChronicDiseaseRight {
|
|
|
- float: left;
|
|
|
- ul {
|
|
|
- width: auto;
|
|
|
+ padding-right: 50px;
|
|
|
+ .contentWrap {
|
|
|
+ color: #333;
|
|
|
+ min-width: 400px;
|
|
|
+ min-height: 500px;
|
|
|
+ max-height: 600px;
|
|
|
+ border: 1px dashed @icssBorder;
|
|
|
+ background: #fff;
|
|
|
+ overflow-y: auto;
|
|
|
+ .contentDetail {
|
|
|
+ border: 1px solid #fff;
|
|
|
+ padding: 5px;
|
|
|
+ margin: 5px;
|
|
|
+ .contentDetails {
|
|
|
+ margin-top: 6px;
|
|
|
+ min-height: 60px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- ul {
|
|
|
- width: 219px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- background: #fff;
|
|
|
- height: 400px;
|
|
|
- overflow-y: auto;
|
|
|
- li {
|
|
|
- border: 1px solid #fff;
|
|
|
- padding: 0 7px;
|
|
|
- height: 27px;
|
|
|
- line-height: 27px;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- li:hover {
|
|
|
- border-color: #22ccc8;
|
|
|
- }
|
|
|
+ .selectDom {
|
|
|
+ border: 1px solid @adminBase !important;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
Luolei