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)">修改</el-button>
                <span style="margin:0 3px;">|</span>
                <el-button type="text" size="small" class="delete" @click="showDelDialog(scope.row.id)">删除</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="disclButn" 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}}
            <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="30"></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="1024"></el-input>
          </el-form-item>
          <el-button class="disclButn" size="small" type="primary" @click="comfirn">确定</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.name = value.substr(0, 30);
           this.$message({
             showClose: true,
             type: 'warning',
             message: '已超过最大字数限制'
           })
        }
        callback();
      };
      return{
        list:[],//版本说明列表
        form:{
          title:'',
          description:''
        },
        rules: {
          title:[
            { required: true, validator: titleVaild, trigger: ['blur', 'change'] },
            { required: true, message: '请输入标题', trigger: ['blur', 'change'] }
          ],
          description:[
            { required: true, message: '请输入内容', trigger: ['blur', 'change'] }
          ]
        },
        minTitle:'',
        showBox:false,
        modiId:null,
        showDesc:false
      }
    },
    created(){
      // if(this.versionId){
      //   this.getList();
      // }
    },
    mounted(){
      this.list = JSON.parse(JSON.stringify(this.detail));
    },
    props:['detail','versionId','isFirst','isCopy'],
    methods:{
      //用于修改时及时更新明细信息，若用本地信息，建立时间和操作人无法及时更新。
      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){//修改备注
        this.minTitle='修改说明';
        this.showBox = true;
        this.form.title = item.title;
        this.form.description = item.description;
        this.modiId = item.id;
      },
      addDesc(){//添加备注
        this.minTitle='添加说明';
        this.showBox = true;
      },
      comfirn(){//记得清空modiId
        if(!this.form.title.trim() || !this.form.description.trim()){
          this.$message({
            message:'请填写相关信息',
            type:'warning'
          });
          return
        }
        // 修改--直接调修改接口；复制--新增
          if(this.modiId){//修改
            if(!this.isCopy){
              const param = {
                title:this.form.title,
                description:this.form.description,
                detailId:this.modiId
              }
              api.modiVersionInfo(param).then((res)=>{
                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){
              const params = {
                versionDetail: [
                  item
                ],
                versionInfoId: this.versionId
              }
              api.addVersionInfo(params).then((res)=>{
                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.list.push(item);
              this.$emit('func',this.list);
              this.reset();
            } 
          }
          // this.reset();
      },
      reset(){//关闭弹窗复原数据
        this.showBox = false;
        this.showDesc = false;
        this.form.title = "";
        this.form.description = "";
        this.modiId = null;
        this.minTitle= "";
      },
      cancel(){
        this.reset();
      },
      getDetail(item){//明细
        this.minTitle='说明明细';
        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(id){
        this.showConfirmDialog('是否删除该版本说明？',()=>{
          if(!this.isCopy){
            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(newList[i].id==id){
                this.list.splice(i,1);
              }
            }
            this.$emit('func',this.list);
          }
          
        });
      },
    },
    watch:{
      list:function(newVal,oldVal){
        return newVal;
      }
    }
  }
</script>
<style lang="less" >
  @import "../../less/admin.less";
  .disclButn{
    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;
  }
</style>