app发布管理(vue+element)

<template>  
    <div>  
        <el-button type="primary" size="medium" style="height: 36.5px;margin-left:80px;" @click="addissue">新增发布</el-button>  
        <div class="hr" />  
        <!--新增发布-->  
        <el-dialog :title="titles" :visible.sync="showTrial" :close-on-click-modal="false">  
            <el-form :model="trialForm" label-width="120px" :rules="trialFormRules" ref="trialForm">  
                <el-form-item label="App名称:" prop="appType">  
                     <el-radio-group v-model="trialForm.appType">  
                            <el-radio label="1">ngc客户端</el-radio>  
                            <el-radio label="2">ngc资产端</el-radio>  
                     </el-radio-group>  
                </el-form-item>  
                <el-form-item label="标题:" prop="title">  
                    <el-input style="width:200px" v-model="trialForm.title" auto-complete="off" clearable>  
                    </el-input>  
                </el-form-item>  
                <el-form-item label="系统类型:" prop="osType">  
                    <el-radio-group v-model="trialForm.osType">  
                        <el-radio label="2">ios</el-radio>  
                        <el-radio label="1">Android</el-radio>  
                    </el-radio-group>  
                </el-form-item>  
                <el-form-item label="版本号:" prop="version">  
                    <el-input style="width:200px" v-model="trialForm.version" clearable>  
                    </el-input>  
                </el-form-item>  
                <el-form-item label="安装包大小(M):" prop="size">  
                    <el-input style="width:200px" v-model="trialForm.size" clearable>  
                    </el-input>  
                </el-form-item>  
                <el-form-item label="安装包路径:" prop="link">  
                    <el-input style="width:200px" v-model="trialForm.link" clearable>  
                    </el-input>  
                </el-form-item>  
                <el-form-item label="是否强制更新:" prop="isCompulsoryRenewal">  
                    <el-radio-group v-model="trialForm.isCompulsoryRenewal">  
                        <el-radio label="1">是</el-radio>  
                        <el-radio label="0">否</el-radio>  
                    </el-radio-group>  
                </el-form-item>  
                <el-form-item label="更新内容:" style="width:400px" prop="content">  
                 <p style="color:red;font-size:18px">注意多条更新内容请用"|"符号隔开</p>  
                    <el-input type="textarea" v-model="trialForm.content" style="width:100%;min-height:80px" placeholder="示例:1.解决已知bug;|2.优化性能体验;"></el-input>  
                </el-form-item>  
            </el-form>  
            <div slot="footer" class="dialog-footer">  
                <el-button @click.native="showTrial = false">取消</el-button>  
                <el-button type="primary" @click.native="editSubmit(trialForm)" :loading="disLoading" :disabled="role">保存</el-button>  
            </div>  
        </el-dialog>  
        <div class="form-b">  
            <el-table :data="tableData" style="width: 100%">  
                <el-table-column prop="id" label="ID" width="80">  
                </el-table-column>  
                <el-table-column prop="appType" label="APP名称" width="100">  
                </el-table-column>  
                <el-table-column prop="title" label="标题" width="110">  
                </el-table-column>  
                <el-table-column prop="content" label="更新内容" width="240">  
                </el-table-column>  
                <el-table-column prop="osType" label="系统类型" width="100">  
                </el-table-column>  
                <el-table-column prop="version" label="版本号" width="100">  
                </el-table-column>  
                <el-table-column prop="size" label="安装包大小(M)" width="120">  
                </el-table-column>  
                <el-table-column prop="link" label="安装包路径" width="320">  
                </el-table-column>  
                <el-table-column prop="isCompulsoryRenewal" label="是否强制更新" width="140">  
                </el-table-column>  
                <el-table-column prop="createTime" label="新增时间" width="180">  
                </el-table-column>  
                <el-table-column  
                  fixed="right"  
                  label="操作"  
                  width="100">  
                  <template slot-scope="scope">  
                    <el-button type="text" size="small" @click="handleClick(scope.row)">修改</el-button>  
                  </template>  
                </el-table-column>  
            </el-table>  
        </div>  
        <!--工具条-->  
        <el-col :span="24" class="toolbar">  
            <el-pagination layout="sizes,prev, pager, next" :page-sizes="[10, 20, 50,100, 200]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-count="total" style="float:right;">  
            </el-pagination>  
        </el-col>  
    </div>  
</template>  
[javascript] view plain copy
export default {  
    data() {  
        const validateTitle = (rule, value, callback) => {  
            if (value === '') {  
                callback(new Error('请输入标题'));  
            } else if (!/^[\u4e00-\u9fa5_a-zA-Z0-9.*]{1,20}$/.test(value)) {  
                callback(new Error('*请输入20位以内中英文'));  
  
            } else {  
                callback();  
            }  
        };  
        const validateVersion = (rule, value, callback) => {  
            if (value === '') {  
                callback(new Error('请输入版本号'));  
            } else if (!/^[a-zA-Z0-9.*]{1,20}$/.test(value)) {  
                callback(new Error('*请输入20位以内英文数字或字符'));  
  
            } else {  
                callback();  
            }  
        };  
        const validateSize = (rule, value, callback) => {  
            if (value === '') {  
                callback(new Error('请输入数字'));  
            } else if (!/^[1-9]\d{0,3}(\.\d{0,2})?$/.test(value)) {  
                callback(new Error('*请输入整数不得超过4位,小数不得超过2位'));  
  
            } else {  
                callback();  
            }  
        };  
        const validatelink = (rule, value, callback) => {  
            if (value === '') {  
                callback(new Error('请输入安装包路径'));  
            } else if (!/^[\u4e00-\u9fa5_a-zA-Z0-9\s\S]{1,100}$/.test(value)) {  
                callback(new Error('*请输入100位以内中英文字符或数字'));  
  
            } else {  
                callback();  
            }  
        };  
        const validateContent = (rule, value, callback) => {  
            if (value === '') {  
                callback(new Error('请输入更新内容'));  
            } else if (!/^[\u4e00-\u9fa5_a-zA-Z0-9\s\S]{1,500}$/.test(value)) {  
                callback(new Error('*请输入500位以内中英文字符或数字'));  
  
            } else {  
                callback();  
            }  
        };  
        const validateAppType = (rule, value, callback) => {  
            if (value === '') {  
                callback(new Error('必选项'));  
            } else {  
                callback();  
            }  
        };  
        return {  
            titles: '新增发布',  
            showTrial: false,  
            disLoading: false,  
            role: false,  
            trialForm: {  
                appType: '',  
                title: '',  
                osType: '',  
                version: '',  
                size: '',  
                link: '',  
                isCompulsoryRenewal: '',  
                content:''  
            },  
            trialFormRules: {  
                appType: [  
                    { required: true, validator: validateAppType, trigger: 'change' }  
                ],  
                osType: [  
                    { required: true, validator: validateAppType, trigger: 'change' }  
                ],  
                isCompulsoryRenewal: [  
                    { required: true,validator: validateAppType, trigger: 'change' }  
                ],  
                title: [  
                    { required: true,validator: validateTitle, trigger: 'change' }  
                ],  
                version: [  
                    {required: true, validator: validateVersion, trigger: 'change' }  
                ],  
                size: [  
                    {required: true, validator: validateSize, trigger: 'change' }  
                ],  
                link: [  
                    { required: true,validator: validatelink, trigger: 'change' }  
                ],  
                content: [  
                    { required: true,validator: validateContent, trigger: 'change' }  
                ]  
            },  
            tableData: [],  
            page: 1,  
            size: 10,  
            total: 1,  
            ID:'',  
            showS:false,  
            showConnent:""  
        }  
    },  
    methods: {  
        addissue() {  
                this.titles = '新增发布';  
                this.showTrial = true;  
                this.showS = false  
                this.trialForm = {  
                    appType: '',  
                    title: '',  
                    osType: '',  
                    version: '',  
                    size: '',  
                    link: '',  
                    isCompulsoryRenewal: '',  
                    content:''  
                };  
        },  
        //每页多少条  
        handleSizeChange(val) {  
            this.size = val;  
            this.getUsers();  
        },  
        //点击页数  
        handleCurrentChange(val) {  
            this.page = val;  
            this.getUsers();  
        },  
        editSubmit: function(trialForm) {  
            this.$refs.trialForm.validate((valid) => {  
                if (valid) {  
                    this.$confirm('确认保存提交吗？', '提示', {  
                          confirmButtonText: '确定',  
                          cancelButtonText: '取消',  
                          type: 'warning'  
                    }).then(() => {  
                        this.disLoading = true;  
                        if (this.showS) {  
                            let paraS = this.trialForm;  
                            paraS.id = this.ID;  
                            paraS.appType = (~~paraS.appType);  
                            paraS.isCompulsoryRenewal = (~~paraS.isCompulsoryRenewal);  
                            paraS.osType = (~~paraS.osType);  
                            paraS.size = parseFloat(paraS.size);  
                        createOrUpdateAppVersionInfo(paraS).then((res) => {  
                            if (res.status == 1) {  
                                this.disLoading = false;  
                                this.showTrial = false;  
                                this.$message({  
                                    message: '保存提交成功',  
                                    type: 'success'  
                                });  
                                this.$refs.trialForm.resetFields();  
                                this.getUsers();  
                            };  
                        });  
                        this.showS = false;  
                        }else{  
                            let para = this.trialForm;  
                        para.appType = (~~para.appType);  
                        para.isCompulsoryRenewal = (~~para.isCompulsoryRenewal);  
                        para.osType = (~~para.osType);  
                        para.size = parseFloat(para.size);  
                        createOrUpdateAppVersionInfo(para).then((res) => {  
                            if (res.status == 1) {  
                                this.disLoading = false;  
                                this.showTrial = false;  
                                this.$message({  
                                    message: '保存提交成功',  
                                    type: 'success'  
                                });  
                                this.$refs.trialForm.resetFields();  
                                this.getUsers();  
                            };  
                        });  
                    }  
                }).catch(() => {  
                      this.$message({  
                        type: 'info',  
                        message: '已取消'  
                      });  
                    });  
                }  
            });  
        },  
        getUsers: function() {  
            let par = {  
                page: this.page,  
                size: this.size  
            };  
            getAppVersionList(par).then((res) => {  
                if (res.status === 1) {  
                    this.total = res.message.totalPages;  
                    this.tableData = (res.message.content);  
                    this.tableData.forEach((item) => {  
                        if (item.appType == 1) {  
                            item.appType = "ngc客户端"  
                        } else {  
                            item.appType = "ngc资产端"  
                        };  
                        if (item.osType == 1) {  
                            item.osType = "Android"  
                        } else {  
                            item.osType = "ios"  
                        };  
                        if (item.isCompulsoryRenewal) {  
                            item.isCompulsoryRenewal = "是"  
                        } else {  
                            item.isCompulsoryRenewal = "否"  
                        };  
                        if (item.content.indexOf("|") != -1) {  
                            item.content = item.content.split("|")  
                        };  
  
                    })  
  
                } else {  
                    alert("无版本内容,或服务器异常,请联系管理员!")  
                }  
            })  
        },  
        handleClick(row){  
          this.trialForm={  
             appType: '',  
             title: '',  
             osType: '',  
             version: '',  
             size: '',  
             link: '',  
             isCompulsoryRenewal: '',  
             content:''  
          };  
          this.titles = '修改发布';  
          this.showTrial = true;  
          this.showS = true;  
          if (this.showS) {  
            if (row.appType=="ngc客户端") {  
                this.trialForm.appType = "1"  
            }else if(row.appType=="ngc资产端"){  
                this.trialForm.appType = "2"  
            };  
            if (row.osType=="Android") {  
                this.trialForm.osType = "1"  
            }else{  
                this.trialForm.osType = "2"  
            };  
            if (row.isCompulsoryRenewal=="是") {  
                 this.trialForm.isCompulsoryRenewal = "1"  
            }else{  
                this.trialForm.isCompulsoryRenewal = "0"  
            };  
            if (Array.prototype.isPrototypeOf(row.content)) {  
                row.content.forEach(item=>{  
                    this.trialForm.content += item + "|";  
                });  
                this.trialForm.content = this.trialForm.content.substring(0, this.trialForm.content.length - 1);  
            }else{  
                    this.trialForm.content = row.content  
            };  
            this.trialForm.link = row.link;  
            this.trialForm.size = row.size;  
            this.trialForm.title = row.title;  
            this.trialForm.version = row.version;  
            this.ID = row.id  
          };  
        }  
    },  
    created() {  
        let par = {  
            page: this.page,  
            size: this.size  
        }  
        getAppVersionList(par).then((res) => {  
            this.total = res.message.totalPages;  
            if (res.status === 1) {  
                this.tableData = (res.message.content)  
                this.tableData.forEach((item) => {  
                    if (item.appType == 1) {  
                        item.appType = "ngc客户端"  
                    } else {  
                        item.appType = "ngc资产端"  
                    };  
                    if (item.osType == 1) {  
                        item.osType = "Android"  
                    } else {  
                        item.osType = "ios"  
                    };  
                    if (item.isCompulsoryRenewal) {  
                        item.isCompulsoryRenewal = "是"  
                    } else {  
                        item.isCompulsoryRenewal = "否"  
                    };  
                    if (item.content.indexOf("|") != -1) {  
                        item.content = item.content.split("|")  
                    };  
  
                })  
  
            } else {  
                alert("无版本内容,或服务器异常,请联系管理员!")  
            }  
        })  
    }  
}