|
|
@@ -0,0 +1,256 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-table v-if="detail.length>0"
|
|
|
+ :data="detail"
|
|
|
+ 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
|
|
|
+ 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 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" 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props:['detail','versionId'],
|
|
|
+ methods:{
|
|
|
+ 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'
|
|
|
+ })
|
|
|
+ }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'
|
|
|
+ })
|
|
|
+ }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.getDataList();
|
|
|
+ }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: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-top: -143px;
|
|
|
+ margin-left: -340px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+</style>
|
liucf