ReviewWrapper.vue

<template>
  <div class="m-review"  :class="{ 'm-review-no-error': notShowError }">
    <div class="m-review-main">
      <div  class="m-review-content" style="width: 50%;position: relative;">
        <!-- <businessContainer ref="business"></businessContainer> -->
				<div class="main-content-wrap">
					<slot></slot>
				</div>
				<div  v-if="isShowReviewText" class="m-review-action">
					<el-button
						v-if="isShowHandlerBtnGroup"
						type="primary"
						size="small"
						@click="handleClickPass"
						:loading="$store.state.Status.loading.pass"
						>复核</el-button
					>
					<el-button
						v-if="isShowHandlerBtnGroup"
						size="small"
						@click="handleClickRefuse"
						:loading="$store.state.Status.loading.refuse"
						>退回</el-button
					>
					<el-button size="small" @click="goBack">退出</el-button>
				</div>
      </div>
      <div class="m-review-control" v-if="isShowReviewText" >
        <div class="remark-display" @click="isHided = !isHided">
          <i class="el-icon-d-arrow-right" v-show="!isHided"></i>
          <i class="el-icon-d-arrow-left" v-show="isHided"></i>
        </div>
        <div v-show="!isHided" style="height: 100%; flex: 1; width: 200px; margin-right: 10px">
          <el-tabs v-model="activeName" class="m-review-tab">
            <el-tab-pane label="复核意见" v-if="isShowHandlerBtnGroup" name="remark">
              <div class="m-review-control-detail">
                <el-input
                  v-model="remark"
                  type="textarea"
                  :maxlength="150"
									:rows="20"
                  show-word-limit
                  :autosize="false"									
                ></el-input>
              </div>
            </el-tab-pane>
            <el-tab-pane  name="history">
              <template #label>
                 <span>历史复核意见 </span>
                 <i class="iconfont el-icon-edit-outline" @click="editRemark" v-if="isShowEditRemark"></i>
              </template>
              <c-content class="m-review-control-detail" style="height: 100%">
                <el-timeline>
                  <el-timeline-item
                    v-for="(item, index) in historyRemark"
                    :key="index"
                    :color="index===historyRemark.length-1?'#0bbd87' : ''"
                    :timestamp="item.begdattim"
                    placement="top"
                  >
                    <div>
                       <span>{{ item.usr }}:{{ item.usrname }}</span><br/>
                      <span>{{ item.taskStatus }}: {{ item.remark || "无" }}</span>
                    </div>
                    <!-- <p>复核意见</p> -->
                  </el-timeline-item>
                </el-timeline>
              </c-content>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="isRemarkVisible" title="复核意见" v-dialogDrag width="50%">
			<!-- <div style="height: 30%;"> -->
         <el-form ref="historyForm"  :model="historyModel" :rules="remarkRule" label-width="100px" style="overflow-y: auto;overflow-x: hidden;">
				<el-row>
					<c-col :span="24">
						<el-form-item label="复核意见" prop="oldRemark" style="width: 100%">
							<el-input :rows="4" maxlength="150" show-word-limit placeholder="请输入复核意见" type="textarea" v-model="historyModel.oldRemark"></el-input>
						</el-form-item>
					</c-col>
				</el-row>
				<el-row>
					<div align="center">
						<el-button @click="submit" size="small" type="primary">确定</el-button>
						<el-button @click="closeDialog" size="small">取消</el-button>
					</div>
				</el-row>
         </el-form>
			<!-- </div> -->
		</el-dialog>
  </div>
</template>

<script>
import Api from "~/service/Api"
import operationFunc from "~/mixin/operationFunc";
export default {
	name: "ReviewWrapper",
	mixins: [operationFunc],
  data () {
    return {
      activeName: "history",
      historyRemark: [],
      notShowError: false,
      isHided: false,
      isRemarkVisible:false,
      remark: '',
      historyModel:{
        oldRemark:"",
        oldOreId:[]
      },
      remarkRule: {
          // oldRemark: [{ required: true, message: "必填", trigger: "blur" }],
      },
    };
  },
  computed: {
		isShowHandlerBtnGroup () {
			return this.$route.query.type !== 'view'
    },
    isShowReviewText () {
			return this.$route.query.type !== 'sptview'
    },
    isShowEditRemark () {
      let departmentNumber =JSON.parse(window.sessionStorage.currentOrg).departmentNumber ;
      let isExsitOwnRemark=false;
      if(this.historyRemark && this.historyRemark.length>0){
        let userName=window.sessionStorage.userName;
        for(let i=0;i<this.historyRemark.length;i++){
          if(userName===this.historyRemark[i].usr){
            isExsitOwnRemark=true;
            break;
          }
        }
      }
      if(departmentNumber==="1000" && this.$route.query.type !== 'view' && isExsitOwnRemark){
        return true;
      }
      return false;
    },
	},
  mounted () {
    this.init();
  },
  methods: {
    closeDialog(){
      this.isRemarkVisible=false;
      this.queryHistoryRemark();
    },
    async submit(){
        let params={
          oreIdList:this.historyModel.oldOreId,
          remark:this.historyModel.oldRemark
        }
        let res = await Api.post("/public/ordsel/updateOre", params);
        if (res.respCode == SUCCESS) {
            this.$notify({title: '成功', message: '修改复核意见成功!',type: 'success'});
            this.closeDialog();
        }
    },
    editRemark(){
       if(this.historyRemark && this.historyRemark.length>0){
          let userName=window.sessionStorage.userName;
          let remarkInfo="";
          for(let i=0;i<this.historyRemark.length;i++){
            if(userName===this.historyRemark[i].usr){
              if(remarkInfo && remarkInfo!==this.historyRemark[i].remark){
                 remarkInfo=remarkInfo+"\n"+this.historyRemark[i].remark;
              }else{
                 remarkInfo=this.historyRemark[i].remark;
              }
              this.historyModel.oldOreId.push(this.historyRemark[i].id);
            }
          }
          this.historyModel.oldRemark=remarkInfo;
       }else{
          this.historyModel={};
       }
       this.isRemarkVisible=true;
    },
    async init() {
      this.reset();
      this.setDisplayMode();
      this.queryHistoryRemark();
      this.remark = "";
      console.log("进入复核界面");
    },
    setDisplayMode() {
      this.$store.commit("setMode", "display");
		},
		async queryHistoryRemark () {
      if(this.$route.query.businessType!=='TRN')
        return;
			let params = {
				trninr: this.$route.query.businessInr
			}
			let res = await Api.post("/public/quesel/getAllOreList", params);
			if (res.respCode == SUCCESS) {
				this.historyRemark = res.data.filter((item) => {
          return "-COR-SIG-BEL-SOR-SPT-CMR-CIG-CEL-RIG-REL-FIN-COM-RTR-".indexOf(item.typ)>0;
        });
      }
		},
    async handleClickPass() {
       this.$confirm("你是否确定需要授权此笔交易？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
          if (this.$store.state.Status.loading.pass) {
            return;
          }
          this.$store.commit('setLoadingPass', true)
          let params = {
            selinr: [this.$route.query.businessInr],
            transName:"trnrel",
            remark: this.remark
          };
          this.handlePass(params)
      });
    },
    async handleClickRefuse() {
       this.$confirm("确定退回该交易？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
          if (this.$store.state.Status.loading.refuse) {
            return;
          }
          this.$store.commit('setLoadingRefuse', true)
          //复核意见改成非必填
          // if (this.remark.trim() == "") {
          //   this.$message.error("请填写复核意见");
          //   return;
          // }
          // 单独处理，不选择打回节点
          let params = {
            trninr: this.$route.query.businessInr,
            transName:"trnrel",
            remark: this.remark,
          };
          this.handleRefuse(params);
      });
    },
    goBack() {
      //回到待办列表
      this.$confirm("确认退出？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
				this.$store.commit('delTagsArry', this.$route.path)
				this.$router.back()
			})
    },
    reset() {
      this.$store.commit("setHighlightChanges", []);
      this.$store.commit("setHighlights", []);
      this.$store.commit("setMode", "normal");
      this.remark = "";
    },
  },
  beforeDestroy () {
    // 如果跳转还是 review 页面则不执行 reset 方法，因为destroy调用在下次 create 之后
    if (this.$route.path.indexOf("review") == -1) {
      console.log("review destroy ...");
      this.reset();
    }
  },
};
</script>
<style scoped lang="less">
.m-review .eContainer-func {
  display: none;
}
.m-review {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  /* display: flex; */
  /* flex-direction: column; */
}
.m-review-main {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: space-around;
	height: 100%;
}
.m-review .business_container {
  position: static;
}
.m-review-content {
  height: 100%;
  flex: auto;
	.main-content-wrap {
		height: calc(100% - 50px);
	}
}
.m-review-control {
  display: flex;
  box-sizing: border-box;
  border-left: 1px solid #efefef;
  height: 100%;
  flex: initial;
}
.m-review-control .remark-display {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  cursor: pointer;
  width: 25px;
}
.m-review-control .m-review-control-detail{
	height: 100%;
	padding: 5px 0;
}
.m-review-control-detail .el-textarea {
  height: 100%;
}
.m-review-control-detail .el-textarea textarea{
  height: 100%;
  resize: none;
}
.m-review-control .remark-display:hover {
  background-color: #dfe4e9de;
}
.m-review-control .el-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.m-review-control {
	::v-deep .el-tabs {
		.el-tabs__content {
			height: calc(100% - 40px);
			.el-tab-pane {
				height: 100%;
				overflow: auto;
			}
		}
	}
}
.m-review-control-detail ul {
  padding: 0;
}
.m-review-control-detail .el-timeline-item {
  padding-right: 20px;
}
.m-review-action {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 54px;
  background: #fff;
  z-index: 10;
	padding: 8px 20px;
	box-shadow: 0 0 11px 0 rgba(0,0,0,.1);
	display: flex;
	align-items: center;
	justify-content: center;
}
.m-review-action button,
.m-review-action .el-button + .el-button {
  margin: 0px 25px 0px 0px;
  padding: 0px 25px !important;
}
.m-review-control-warning {
  font-size: 14px;
}
.m-review .highlight-change-formitem {
  border: 1px solid #e6a23c;
}
.m-review .highlight-formitem {
  border: 1px solid red;
}

.m-review .el-form-item {
  box-sizing: border-box;
}
.m-review.m-review-no-error .el-form-item__error {
  display: none;
}
::v-deep .el-textarea__inner {
	height: 100%;
}
.m-review-content {
	.eContainer {
		/deep/ .el-form {
			height: calc(100% - 20px)!important;
		}
		// /deep/ .m-Btn-eContainer {
		// 	display: none!important;
		// }
	}
}
.iconfont{
   font-size:25px !important;
}

.m-review-tab ::v-deep .el-tabs__item{
  padding-left: 5px !important;
}
</style>