|
|
@@ -0,0 +1,455 @@
|
|
|
+<template>
|
|
|
+ <div class="qcTypeWrapper commomSymptom clearfix">
|
|
|
+ <QCTipPop :name="curName" :example="curEmp" :show="showPop" :top="popTop" :left="popLeft" @close="closePop"></QCTipPop>
|
|
|
+ <div class="bottomPartLeft">
|
|
|
+ <p style="height: 26px;"> </p>
|
|
|
+ <div class="pool">
|
|
|
+ <ul class="tagList tagPool">
|
|
|
+ <li v-for="(item, index) in leftTagsList"
|
|
|
+ class = "tagItem"
|
|
|
+ :key='item.id'
|
|
|
+ :style="getStyle(item)?styles:null"
|
|
|
+ @click='selectLeftTag(item, index, $event)'
|
|
|
+ >
|
|
|
+ <p class="ellipsis" @click="closePop">
|
|
|
+ <span class="tagName">{{item.name}}</span>
|
|
|
+ <!-- <span :class="activeId==item.id?'tip-icon active':'tip-icon'" @click.stop="showTipPop(item,$event)"></span> -->
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottomPartMid fl">
|
|
|
+ <p><span class="el-icon-arrow-right" @click="toRightList"></span></p>
|
|
|
+ <p><span class="el-icon-arrow-left" @click="toLeftList"></span></p>
|
|
|
+ </div>
|
|
|
+ <div class="bottomPartRight ">
|
|
|
+ <p class="poolTitle">已选质控类型：</p>
|
|
|
+ <ul class="tagList operationPool operationPools">
|
|
|
+ <li class = "tagItem"
|
|
|
+ v-for="(item) in rightTagsList"
|
|
|
+ :key='item.id'
|
|
|
+ :style="getStyle2(item)?styles:null"
|
|
|
+ @click='selectRightTag(item)'
|
|
|
+ >
|
|
|
+ <p class="ellipsis" @click="closePop">
|
|
|
+ <span class="tagName">{{item.name}}</span>
|
|
|
+ <!-- <span :class="activeId==item.id?'tip-icon active':'tip-icon'" @click.stop="showTipPop(item,$event)"></span> -->
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!--<div class="buttonBox" :class="(qaType==2)?'rightMore':''">
|
|
|
+ <div class="bottomPartMid bottomPartMidss fl bottomPartMids" >
|
|
|
+ <p><span class="el-icon-arrow-up" @click="toggleTopDownList(1)"></span></p>
|
|
|
+ <p><span class="el-icon-arrow-down" @click="toggleTopDownList(2)"></span></p>
|
|
|
+ </div>
|
|
|
+ </div>-->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import api from '@api/qualityControl.js';
|
|
|
+import QCTipPop from './QCTipPop.vue';
|
|
|
+import $ from 'jquery'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "OtherQcTypePour",
|
|
|
+ props: ['hospital','moduleName','selectedTag'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checkedExc:false,
|
|
|
+ leftTagsList: [],
|
|
|
+ selectLeftTagsList: [],
|
|
|
+ rightTagsList: [],
|
|
|
+ selectRightTagsList: [],
|
|
|
+ showPop:false,
|
|
|
+ activeId:'',
|
|
|
+ curName:"",
|
|
|
+ curEmp:"",
|
|
|
+ popTop:'',
|
|
|
+ popLeft:'',
|
|
|
+ styles:{
|
|
|
+ background:'#eae7e7'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //编辑
|
|
|
+ if(this.hospital){
|
|
|
+ const that = this;
|
|
|
+ setTimeout(function(){ //等watch执行后赋值tags,否则这里先执行，会被watch里清空
|
|
|
+ console.log(44,that.selectedTag)
|
|
|
+ that.rightTagsList = [...that.selectedTag];
|
|
|
+ that.getModuleTypeList();
|
|
|
+ that.$emit('changeActionData',that.getModuleTypeIds());
|
|
|
+ },100);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ hospital(){
|
|
|
+ this.rightTagsList=[];
|
|
|
+ this.getModuleTypeList();
|
|
|
+ },
|
|
|
+ moduleName(){
|
|
|
+ this.rightTagsList=[];
|
|
|
+ this.getModuleTypeList();
|
|
|
+ },
|
|
|
+ /*'selectRightTagsList':{
|
|
|
+ handler:function(newVal){
|
|
|
+ },
|
|
|
+ deep:true
|
|
|
+ }*/
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ closePop(){
|
|
|
+ this.activeId = '';
|
|
|
+ this.curName = '';
|
|
|
+ this.curEmp = '';
|
|
|
+ this.popTop = 0;
|
|
|
+ this.popLeft=0;
|
|
|
+ this.showPop=false;
|
|
|
+ },
|
|
|
+ showTipPop(item,e){
|
|
|
+ if(this.showPop&&this.activeId===item.id){
|
|
|
+ this.closePop();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const t=$(".el-main").scrollTop();
|
|
|
+ this.activeId = item.id;
|
|
|
+ this.curName = item.name;
|
|
|
+ this.curEmp = item.behospitalCodes;
|
|
|
+ this.popTop = t+e.clientY;
|
|
|
+ this.popLeft=e.clientX;
|
|
|
+ this.showPop = true;
|
|
|
+ },
|
|
|
+ handleExclu(){
|
|
|
+ if(!this.selectRightTagsList||this.selectRightTagsList.length==0){
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: '请先选择要操作的标签',
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ return ;
|
|
|
+ }
|
|
|
+ const arr = this.rightTagsList.map((it)=>{
|
|
|
+ if(it.id==this.selectRightTagsList[0].id){
|
|
|
+ if(it.exclusionType===1){
|
|
|
+ it.exclusionType = 0
|
|
|
+ }else{
|
|
|
+ it.exclusionType=1;
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ it.exclusionType=0;
|
|
|
+ }
|
|
|
+ return it;
|
|
|
+ });
|
|
|
+ this.rightTagsList=arr;
|
|
|
+ this.$emit('changeActionData',this.getModuleTypeIds());
|
|
|
+ },
|
|
|
+ transOptions(opt){
|
|
|
+ return opt&&opt.map((it)=>{
|
|
|
+ return Object.assign({},it,{id:it.questionId||it.id}); //模板是questionId，组合是id
|
|
|
+ });
|
|
|
+ },
|
|
|
+ ifReflashTagList(newVal='', preVal=''){
|
|
|
+ if(newVal.trim() == ''){
|
|
|
+ this.searchVal = '';
|
|
|
+ this.rightTagsList=[];
|
|
|
+ this.getModuleTypeList();
|
|
|
+ }else if(newVal.trim() != preVal.trim()){
|
|
|
+ this.searchVal = '';
|
|
|
+ this.rightTagsList=[];
|
|
|
+ this.getModuleTypeList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectLeftTag(tag) {
|
|
|
+ const hasTag = this.isHasTag(tag, this.selectLeftTagsList);
|
|
|
+ if (hasTag) {
|
|
|
+ this.selectLeftTagsList = this.selectLeftTagsList.filter(item => item.id !== tag.id)
|
|
|
+ } else {
|
|
|
+ this.selectLeftTagsList.push(tag);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectRightTag(tag) {
|
|
|
+ /*let tmpArr = [];
|
|
|
+ tmpArr.push(tag);
|
|
|
+ if (this.selectRightTagsList.length > 0 && tag.id == this.selectRightTagsList[0].id) {
|
|
|
+ this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
|
|
|
+ }else{
|
|
|
+ this.selectRightTagsList = tmpArr;
|
|
|
+ }*/
|
|
|
+ const hasTag = this.isHasTag(tag, this.selectRightTagsList);
|
|
|
+ if (hasTag) {
|
|
|
+ this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
|
|
|
+ } else {
|
|
|
+ this.selectRightTagsList.push(tag);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isHasTag(item, arr) {
|
|
|
+ for ( let i = 0; i <arr.length; i++) {
|
|
|
+ if(arr[i].id === item.id) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ getStyle(item){ //左侧选中状态
|
|
|
+ return this.isHasTag(item, this.selectLeftTagsList)
|
|
|
+ },
|
|
|
+ getStyle2(item) {
|
|
|
+ return this.isHasTag(item, this.selectRightTagsList);
|
|
|
+ },
|
|
|
+ toggleTopDownList(type){
|
|
|
+ if(this.selectRightTagsList.length == 0 || this.rightTagsList.length == 0){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const tmpRightSelect = JSON.parse(JSON.stringify(this.selectRightTagsList));
|
|
|
+ const tmpRightLis = JSON.parse(JSON.stringify(this.rightTagsList));
|
|
|
+ const numLen = tmpRightLis.length;
|
|
|
+ const numId = tmpRightSelect[0].id;
|
|
|
+ if(type == 1){
|
|
|
+ for(let i = 0;i < tmpRightLis.length;i++){
|
|
|
+ if(numId === tmpRightLis[i].id){//选中的是第几个
|
|
|
+ if(i == 0){//第一个不能往上移动
|
|
|
+ return;
|
|
|
+ }else{//先把这个元素和后面的输入框从数组中删除，再添加到数组里
|
|
|
+ let tmp1 = tmpRightLis[i];
|
|
|
+ tmpRightLis.splice(i,1);
|
|
|
+ tmpRightLis.splice(i-1,0,tmp1);
|
|
|
+ this.rightTagsList = [...tmpRightLis];
|
|
|
+ this.$emit('changeActionData',this.getModuleTypeIds(), false);
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else if(type == 2){
|
|
|
+ for(let i = 0;i < tmpRightLis.length;i++){
|
|
|
+ if(numId === tmpRightLis[i].id){
|
|
|
+ if(i == numLen-1){
|
|
|
+ return;
|
|
|
+ }else{
|
|
|
+ let tmp1 = tmpRightLis[i];
|
|
|
+ tmpRightLis.splice(i,1);
|
|
|
+ tmpRightLis.splice(i+1,0,tmp1);
|
|
|
+ this.rightTagsList = [...tmpRightLis];
|
|
|
+ this.$emit('changeActionData',this.getModuleTypeIds(), false);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toLeftList() {console.log(this.rightTagsList)
|
|
|
+ this.leftTagsList.push(...this.selectRightTagsList);
|
|
|
+ for (let i = 0; i < this.selectRightTagsList.length; i++) {
|
|
|
+ this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[i].id);
|
|
|
+ }
|
|
|
+ for (let i = 0; i < this.selectRightTagsList.length; i++) {
|
|
|
+ for (let j = 0; j < this.rightTagsList.length; j++) {
|
|
|
+ if(this.selectRightTagsList[i].id === this.rightTagsList[j].id) {
|
|
|
+ if(this.rightTagsList.length === 1) {
|
|
|
+ this.rightTagsList = [];
|
|
|
+ } else {
|
|
|
+ this.rightTagsList.splice(j, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.selectLeftTagsList = [];
|
|
|
+ this.selectRightTagsList = [];
|
|
|
+ //this.getModuleTypeList();
|
|
|
+ this.$emit('changeActionData',this.getModuleTypeIds(), false);
|
|
|
+ },
|
|
|
+ toRightList() {
|
|
|
+ this.rightTagsList.push(...this.selectLeftTagsList);
|
|
|
+ for (let i = 0; i < this.rightTagsList.length; i++) {
|
|
|
+ this.leftTagsList = this.leftTagsList.filter(item => item.id !== this.rightTagsList[i].id)
|
|
|
+ }
|
|
|
+ this.selectLeftTagsList = [];
|
|
|
+ this.selectRightTagsList = [];
|
|
|
+ //this.getModuleTypeList();
|
|
|
+ this.$emit('changeActionData',this.getModuleTypeIds(), false);
|
|
|
+ },
|
|
|
+ getModuleTypeList() {
|
|
|
+ this.leftTagsList = []
|
|
|
+ if(this.hospital === ""){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ return api.qcTypeList({hospitalId: ""+this.hospital, notIdList:this.getModuleTypeIds()||[]}).then((res) =>{
|
|
|
+ if(res.data.code==="0"){
|
|
|
+ const data = res.data.data;
|
|
|
+ this.leftTagsList = data;
|
|
|
+ this.selectLeftTagsList = [];
|
|
|
+ this.selectRightTagsList = [];
|
|
|
+ }else{
|
|
|
+ this.leftTagsList=[];
|
|
|
+ this.selectLeftTagsList = [];
|
|
|
+ this.selectRightTagsList = [];
|
|
|
+ this.warning("获取质控类型失败");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getModuleTypeIds(){
|
|
|
+ const list=this.rightTagsList;
|
|
|
+ return list.map((it)=>it.id);
|
|
|
+ },
|
|
|
+ warning(msg, type,time) {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: msg,
|
|
|
+ type: type || 'warning',
|
|
|
+ duration:time || '3000'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ QCTipPop
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+@import '../../less/common.less';
|
|
|
+.operation-row{
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.exclu{
|
|
|
+ position: absolute;
|
|
|
+ right: -54px;
|
|
|
+ top: 5px;
|
|
|
+}
|
|
|
+.rightMore{
|
|
|
+ margin-left: 48px;
|
|
|
+}
|
|
|
+.commomSymptom {
|
|
|
+ .tagList.operationPools {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ div.bottomPartMids {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ div.bottomPartMidss {
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.qcTypeWrapper {
|
|
|
+ padding-left: 60px;
|
|
|
+ margin:-20px 0 20px;
|
|
|
+ position: relative;
|
|
|
+ .bottomPartLeft {
|
|
|
+ width: 40%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .poolTitle {
|
|
|
+ // border-bottom: 1px solid @icssBorder;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .pool {
|
|
|
+ // border:1px solid @icssBorder;
|
|
|
+
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid @icssBorder;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .tagList {
|
|
|
+ border: 1px solid @icssBorder;
|
|
|
+ }
|
|
|
+ .ellipsis{
|
|
|
+ .tip-icon{
|
|
|
+ display:inline-block;
|
|
|
+ width:16px;
|
|
|
+ height: 16px;
|
|
|
+ vertical-align: middle;
|
|
|
+ background-image:url("../../images/tip.png");
|
|
|
+ background-size:16px;
|
|
|
+ background-repeat:no-repeat;
|
|
|
+ &:hover,&.active{
|
|
|
+ background-image:url("../../images/tip1.png");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ /*.pop{
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top:-30px;
|
|
|
+ right: -10px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ background: #fff;
|
|
|
+ border:1px #ccc solid;
|
|
|
+ border-radius: 3px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ width: 300px;
|
|
|
+ word-break: break-all;
|
|
|
+ z-index: 1;
|
|
|
+ }*/
|
|
|
+ .tagPool {
|
|
|
+ height: 320px;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ }
|
|
|
+ .tagItem {
|
|
|
+ position: relative;
|
|
|
+ line-height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0 10px;
|
|
|
+ /*z-index:0;*/
|
|
|
+ }
|
|
|
+ .operationPool {
|
|
|
+ position: relative;
|
|
|
+ width: 60%;
|
|
|
+ height: 300px;
|
|
|
+ padding: 10px 0;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ .tagName{
|
|
|
+ margin-right: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .bottomPartMid {
|
|
|
+ width: 8%;
|
|
|
+ margin-top: 60px;
|
|
|
+ p {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ width: 30px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid @icssBorder;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottomPartRight {
|
|
|
+ float: left;
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+ .buttonBox {
|
|
|
+ width: 10%;
|
|
|
+ float: left;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ .inputBox {
|
|
|
+ width: 120px;
|
|
|
+ .el-input {
|
|
|
+ .el-input__inner {
|
|
|
+ height: 30px;
|
|
|
+ background: rgb(234, 231, 231);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhouna
