platformFront/src/components/icss/VersionDesc.vue

<template>
  <div class="version-desc">
    <el-table v-if="list&&list.length>0" 
              :data="list"
              border
              style="width: 100%">
        <el-table-column
                type="index"
                :index="indexMethod"
                label="编号"
                width="60">
        </el-table-column>
        <el-table-column
                v-if="!isCopy"
                prop="gmtCreate"
                label="建立时间"
                :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
                prop="title"
                label="标题">
        </el-table-column>
        <el-table-column
                v-if="!isCopy"
                prop="modifierid"
                label="操作人">
        </el-table-column>
        <el-table-column v-if="isFirst"
                label="操作">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="toEditDesc(scope.row,scope.$index)">修改</el-button>
                <span style="margin:0 3px;">|</span>
                <el-button type="text" size="small" class="delete" @click="showDelDialog(scope.row,scope.row.id,scope.$index)">删除</el-button>
            </template>
        </el-table-column>
        <el-table-column
                label="详情">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="getDetail(scope.row)">明细</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-button v-if="isFirst" class="disclButn1" size="small" type="primary" @click="addDesc">+ 添加说明</el-button>
    <div class="boxMark" v-if="showBox">
        <el-form ref="form" :model="form" :rules="showDesc?{}:rules" label-width="65px" class="add-desc-form">
          <p class="top">
            {{minTitle}}
            <span v-if="tip" class="tip">(&lt;br /&gt;代表换行符，如果需要可在需要处输入)</span>
            <img src="../../images/close.png" height="12" width="12" @click="cancel">
          </p>
          <el-form-item label="标题：" prop="title">
            <p v-if="showDesc" class="cont">{{form.title}}</p>
            <el-input v-else v-model="form.title" placeholder="请输入标题" maxlength="31"></el-input>
          </el-form-item>
          <el-form-item label="内容：" prop="description" class="discDesc">
            <p v-if="showDesc" v-html="form.description" class="cont">{{form.description}}</p>
            <el-input v-else type="textarea" :rows="3" placeholder="请输入内容" v-model="form.description" maxlength="501" @keydown.native="contentInp"></el-input>
          </el-form-item>
          <el-button class="disclButn1" size="small" type="primary" :disabled="confirmDisable" @click="comfirn('form')">确定</el-button>
          <!-- <el-button class="disclButn can" size="small" type="primary" @click="cancel">取消</el-button> -->
      </el-form>
    </div>
  </div>
</template>
<script type="text/javascript">
  import api from '@api/icss.js';
  export default {
    name:'VersionDesc',
    data(){
      const titleVaild = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入标题'));
        }
        if (value.length > 30) {
           this.form.title = value.substr(0, 30);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '标题已超过最大限制30字'
           })
        }
        callback();
      };
      const descVaild = (rule,value,callback) => {
        if(!value){
          return callback(new Error('请输入内容'));
        }
        if (value.length > 500) {
           this.form.description = value.substr(0, 500);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '内容已超过最大限制500字'
           })
        }
        callback();
      }
      return{
        list:[],//版本说明列表
        form:{
          title:'',
          description:''
        },
        rules: {
          title:[
            { required: true, validator: titleVaild, trigger: [ 'change'] },
            { required: true, message: '请输入标题', trigger: ['blur', 'change'] }
          ],
          description:[
            { required: true, validator: descVaild, trigger: [ 'change'] },
            { required: true, message: '请输入内容', trigger: ['blur', 'change'] }
          ]
        },
        minTitle:'',
        showBox:false,
        modiId:null,
        showDesc:false,
        tip:true,
        modiIndex:null,
        confirmDisable: false
      }
    },
    created(){
      // if(this.versionId){
      //   this.getList();
      // }
    },
    mounted(){
      this.list = JSON.parse(JSON.stringify(this.detail));
    },
    props:['detail','versionId','isFirst','isCopy'],
    methods:{
      // 按回车添加换行<br />
      contentInp(e){
        if(e.keyCode==13){
          this.form.description += '<br />'
        }
      },
      //用于修改时及时更新明细信息，若用本地信息，建立时间和操作人无法及时更新。
      getList(){
        api.getVersionDetlInfo({id:this.versionId}).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.list = result.data;
          }else{
            this.$message({
              message:result.msg,
              type:'warning'
            });
          }
        })
      },
      indexMethod(index) {
        return index + 1;
      },
      toEditDesc(item,index){//修改备注
        this.minTitle='修改说明';
        this.showBox = true;
        this.form.title = item.title;
        this.form.description = item.description;
        this.modiId = item.id;
        this.modiIndex = index;
      },
      addDesc(){//添加备注
        this.minTitle='添加说明';
        this.showBox = true;
      },
      comfirn(form){//记得清空modiId
        /*if(!this.form.title.trim() || !this.form.description.trim()){
          this.$message({
            message:'请填写相关信息',
            type:'warning'
          });
          return
        }*/
        this.$refs[form].validate((valid) => {
          if (valid) {
              // 修改--直接调修改接口；复制--新增
            this.confirmDisable = true
            if(this.modiId){//修改
              if(!this.isCopy){
                const param = {
                  title:this.form.title,
                  description:this.form.description,
                  detailId:this.modiId
                }
                api.modiVersionInfo(param).then((res)=>{
                   this.confirmDisable = false
                  if(res.data.code==0){
                    this.$message({
                      message:"修改成功",
                      type:'success'
                    })
                    this.getList();
                    /*for(let i in this.list){
                      if(this.list[i].id==this.modiId){
                        this.list[i].title=this.form.title;
                        this.list[i].description=this.form.description;
                      }
                    }*/
                   
                    this.reset();
                  }else{
                    this.$message({
                      message:res.data.msg,
                      type:'warning'
                    });
                  }
                })
              }else{
                for(let i in this.list){
                  if(this.list[i].id==this.modiId){
                    this.list[i].title=this.form.title;
                    this.list[i].description=this.form.description;
                  }
                }
                this.$emit('func',this.list);//向父组件传明细
                this.reset();
              }
              
            }else if(this.showDesc){//明细
              this.reset();
            }else{//添加
              const item = {
                description: this.form.description,
                title: this.form.title,
              }
              if(!this.isCopy && this.versionId){
                const params = {
                  versionDetail: [
                    item
                  ],
                  versionInfoId: this.versionId
                }
                api.addVersionInfo(params).then((res)=>{
                   this.confirmDisable = false
                  if(res.data.code==0){
                    this.$message({
                      message:"添加成功",
                      type:'success'
                    })
                    this.getList();
                    /*this.list.push(item);*/
                    this.reset();
                  }else{
                    this.$message({
                      message:res.data.msg,
                      type:'warning'
                    });
                  }
                })
              }else{//仅添加到本地list
                this.confirmDisable = false
                if(this.modiIndex !==null){
                  this.list[this.modiIndex].description = this.form.description;
                  this.list[this.modiIndex].title = this.form.title;
                }else{
                  this.list.push(item);
                }
                this.$emit('func',this.list);
                this.reset();
              } 
            }
            // this.reset();
          } else {
            return false;
          }
        }); 
           
      },
      reset(){//关闭弹窗复原数据
        this.showBox = false;
        this.showDesc = false;
        this.form.title = "";
        this.form.description = "";
        this.modiId = null;
        this.minTitle= "";
        this.tip = true;
        this.modiIndex = null;
      },
      cancel(){
        this.reset();
      },
      getDetail(item){//明细
        this.minTitle='说明明细';
        this.tip = false;
        this.showDesc = true;
        this.showBox = true;
        this.form.title = item.title;
        this.form.description = item.description;
      },
      warning(msg,type){
        this.$message({
          showClose: true,
          message:msg,
          type:type||'warning'
        })
      },
      showConfirmDialog(msg,resolve){
        this.$alert(msg, '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          resolve();
        }).catch(() => {});
      },
      showDelDialog(item,id,index){
        console.log('cancel',item,id,index)
        this.showConfirmDialog('是否删除该版本说明？',()=>{
          if(!this.isCopy&&id){
            api.delVersionInfo({id}).then((res)=>{
              if(res.data.code=='0'){
                this.warning(res.data.msg||'操作成功','success');
                this.getList();
                /*let newList = JSON.parse(JSON.stringify(this.list));
                for(let i in newList){
                  if(newList[i].id==id){
                    this.list.splice(i,1);
                  }
                }*/
              }else{
                this.warning(res.data.msg);
              }
            }).catch((error)=>{
              this.warning(error);
            })
          }else{
            let newList = JSON.parse(JSON.stringify(this.list));
            for(let i in newList){
              if(id && newList[i].id==id){
                this.list.splice(i,1);
              }else {//新增的没有id
                this.list.splice(index,1);
              }
            }
            this.$emit('func',this.list);
          }
          
        });
      },
    },
    watch:{
      list:function(newVal,oldVal){
        return newVal;
      }
    }
  }
</script>
<style lang="less" >
  @import "../../less/admin.less";
  .disclButn1{
    margin: 30px 0 10px;
  }
  .boxMark{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    // background: #808080;
    background-color:rgba(0,0,0,0.3);
    z-index: 1001;
  }
  // .el-form{
  .add-desc-form{
    width: 680px;
    position: absolute;
    top: 15%;
    left: 50%;
    // margin-top: -143px;
    margin-left: -340px;
    background: #fff;
    padding: 20px;
    max-height: 660px;
    overflow-y: auto;
  }
  .top{
    font-size: 15px;
    font-weight: bold;
    color: #545455;
    text-align: left;
    // padding-bottom: 10px;
    margin-bottom: 15px;
    // border-bottom: 1px solid #C9C9C9;
    position: relative;
    img{
      position: absolute;
      right: 5px;
    }
  }
  .can,.can:hover{
    background: #9B9B9B;
    border-color: #9B9B9B;
  }
  .cont{
    text-align: left;
  }
  .version-desc .el-table__body-wrapper{
    max-height: 340px;
    overflow-y: auto;
  }
  .version-desc .el-table th{
    padding: 0px;
  }
  .tip{
    font-weight: normal;
    font-size: 13px;
    color:#22ccc8;
  }
</style>