platformFront/src/components/icss/VersionDesc.vue

<template>
  <div class="version-desc">
    <el-table v-if="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
                prop="gmtCreate"
                label="建立时间"
                :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
                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, 120);
           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();
      }
    },
    props:['detail','versionId','isFirst'],
    methods:{
      getList(){
        api.getVersionDetlInfo({id:this.versionId}).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.list = result.data;
          }else{
            this.$message.error(result.msg);
          }
        })
      },
      indexMethod(index) {
        // return ((1 - 1) * 10) + index + 1;
        return index + 1;
      },
      toEditDesc(item){//修改备注
        console.log(124,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.modiId){//修改
          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();
            }else{
              this.$message.error(res.data.msg);
            }
          })
        }else if(this.showDesc){//明细

        }else{//添加
          const params = {
            versionDetail: [
              {
                description: this.form.description,
                title: this.form.title,
              }
            ],
            versionInfoId: this.versionId
          }
          api.addVersionInfo(params).then((res)=>{
            if(res.data.code==0){
              this.$message({
                message:"添加成功",
                type:'success'
              })
              this.getList();
            }else{
              this.$message.error(res.data.msg);
            }
          })
        }
        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('是否删除该版本说明？',()=>{
          api.delVersionInfo({id}).then((res)=>{
            if(res.data.code=='0'){
              this.warning(res.data.msg||'操作成功','success');
              this.getList();
            }else{
              this.warning(res.data.msg);
            }
          }).catch((error)=>{
            this.warning(error);
          })
        });
      },
    }
  }
</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>