400 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
		
		
			
		
	
	
			400 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
|   | <template> | ||
|  |   <el-container id="workspaceBackUp"> | ||
|  |     <el-header style="height: 50px;"> | ||
|  |       <div style="margin: 10px;"> | ||
|  |         <awsui-button style="width: 130px;" class="button-general-color" type="primary" @click="createBackup()">新建备份</awsui-button> | ||
|  |       </div> | ||
|  |     </el-header> | ||
|  |     <el-main> | ||
|  |       <el-table | ||
|  |         id="workspaceBackupTable" | ||
|  |         ref="workspaceBackupTable" | ||
|  |         :data="tableData" | ||
|  |         style="width: 100%;" | ||
|  |         :height="tableHeight"> | ||
|  |         <el-table-column | ||
|  |           prop="time" | ||
|  |           label="备份时间" | ||
|  |           width="250"> | ||
|  |         </el-table-column> | ||
|  |         <el-table-column | ||
|  |           prop="user" | ||
|  |           label="操作用户" | ||
|  |           width="180"> | ||
|  |         </el-table-column> | ||
|  |         <el-table-column | ||
|  |           prop="remark" | ||
|  |           label="备注" | ||
|  |           min-width="180"> | ||
|  |         </el-table-column> | ||
|  |         <el-table-column | ||
|  |           prop="operation" | ||
|  |           label="操作" | ||
|  |           width="200" | ||
|  |           align="center"> | ||
|  |           <template slot-scope="scope"> | ||
|  |             <div v-if="scope.row.state != 0 && scope.row.state != 2 && scope.row.state != 3"> | ||
|  |               <el-tooltip class="item" content="修改" placement="bottom" :hide-after=2000> | ||
|  |                 <i class="awsui-iconfont" style="cursor: pointer;" @click="update(scope.row.id, scope.row.remark)"></i> | ||
|  |               </el-tooltip> | ||
|  |               <el-tooltip class="item" content="恢复" placement="bottom" :hide-after=2000> | ||
|  |                 <i class="awsui-iconfont" style="cursor: pointer;" @click="recover(scope.row.id, scope.row.time)"></i> | ||
|  |               </el-tooltip> | ||
|  |               <el-tooltip class="item" content="导出" placement="bottom" :hide-after=2000> | ||
|  |                 <i class="awsui-iconfont" style="cursor: pointer;" @click="exportBackup(scope.row.id)"></i> | ||
|  |               </el-tooltip> | ||
|  |               <el-tooltip class="item" content="删除" placement="bottom" :hide-after=2000> | ||
|  |                 <i class="awsui-iconfont" style="cursor: pointer;" @click="deleteBackup(scope.row.id, scope.row.time)"></i> | ||
|  |               </el-tooltip> | ||
|  |             </div> | ||
|  |             <div v-if="scope.row.state == 0"> | ||
|  |               <el-tooltip class="item" content="正在备份..." placement="bottom" :hide-after=2000> | ||
|  |                 <i class="awsui-iconfont" style="cursor: default;"></i> | ||
|  |               </el-tooltip> | ||
|  |             </div> | ||
|  |             <div v-if="scope.row.state == 2"> | ||
|  |               <el-tooltip class="item" content="备份失败" placement="bottom" :hide-after=2000> | ||
|  |                 <i class="awsui-iconfont" style="cursor: default;"></i> | ||
|  |               </el-tooltip> | ||
|  |               <el-tooltip class="item" content="删除" placement="bottom" :hide-after=2000> | ||
|  |                 <i class="awsui-iconfont" style="cursor: pointer;" @click="deleteBackup(scope.row.id, scope.row.time)"></i> | ||
|  |               </el-tooltip> | ||
|  |             </div> | ||
|  |             <div v-if="scope.row.state == 3"> | ||
|  |               <el-tooltip class="item" content="正在恢复..." placement="bottom" :hide-after=2000> | ||
|  |                 <i class="awsui-iconfont" style="cursor: default;"></i> | ||
|  |               </el-tooltip> | ||
|  |             </div> | ||
|  |           </template> | ||
|  |         </el-table-column> | ||
|  |       </el-table> | ||
|  |       <el-dialog | ||
|  |         title="资产库备份" | ||
|  |         :visible.sync="dialogVisible" | ||
|  |         width="30%" | ||
|  |         :before-close="handleClose" | ||
|  |         :modal-append-to-body=false | ||
|  |         :close-on-click-modal=false> | ||
|  |         <div style="margin-bottom: 10px;"> | ||
|  |           <label>备注</label> | ||
|  |         </div> | ||
|  |         <el-input | ||
|  |           type="textarea" | ||
|  |           placeholder="请输入备注" | ||
|  |           v-model="updateRemark" | ||
|  |           maxlength="200" | ||
|  |           :rows=5 | ||
|  |           show-word-limit> | ||
|  |         </el-input> | ||
|  |         <span slot="footer" class="dialog-footer"> | ||
|  |           <awsui-button class="button-general-color" :disabled=false type="primary" @click="save">确定</awsui-button> | ||
|  |           <awsui-button @click="closeDlg">取消</awsui-button> | ||
|  |         </span> | ||
|  |       </el-dialog> | ||
|  |     </el-main> | ||
|  |   </el-container> | ||
|  | </template> | ||
|  | 
 | ||
|  | <script> | ||
|  |     import awsuiAxios from "../../awsuiAxios"; | ||
|  | 
 | ||
|  |     export default { | ||
|  |       name: "WorkspaceBackup", | ||
|  |       data() { | ||
|  |         return { | ||
|  |           tableHeight: (parseInt(this.$store.getters.getTopMainHeightFn) - 22 - 50) + 'px', | ||
|  |           tableData: [], | ||
|  |           dialogVisible: false, | ||
|  |           updateType: 'create',// 新增、修改的类型
 | ||
|  |           updateId: '',// 修改时的id
 | ||
|  |           updateRemark: '',// 新增、修改的备注
 | ||
|  |           exportProgressTimeout: '', // 导出备份轮询状态,用于完成轮询后清除定时器
 | ||
|  |           stateInterval: ''// 定时刷新器
 | ||
|  |         } | ||
|  |       }, | ||
|  |       props: ['wsId'], | ||
|  |       computed: { | ||
|  |         listenTopMainHeight() { | ||
|  |           return this.$store.getters.getTopMainHeightFn; | ||
|  |         } | ||
|  |       }, | ||
|  |       created() { | ||
|  |         // alert('a')
 | ||
|  |       }, | ||
|  |       mounted() { | ||
|  |         const that = this; | ||
|  |         that.initData(); | ||
|  |         setTimeout(function(){ | ||
|  |           that.stateInterval = setInterval(function(){ | ||
|  |             that.refreshState(); | ||
|  |           }, 1000); | ||
|  |         }, 2000); | ||
|  | 
 | ||
|  |       }, | ||
|  |       methods: { | ||
|  |         initData(scrollTop) {// 初始化
 | ||
|  |           const that = this; | ||
|  |           const params = { | ||
|  |             url:'jd', | ||
|  |             data:{ | ||
|  |               cmd: 'com.actionsoft.apps.coe.pal_ws_backup_data_query', | ||
|  |               wsId: that.wsId | ||
|  |             } | ||
|  |           }; | ||
|  |           awsuiAxios.post(params).then(function (ro) { | ||
|  |             if (ro.result == 'ok') { | ||
|  |               let data = ro.data; | ||
|  |               that.tableData = data; | ||
|  |               if (scrollTop == undefined || scrollTop) { | ||
|  |                 that.$refs.workspaceBackupTable.bodyWrapper.scrollTop = 0; | ||
|  |               } | ||
|  |             } | ||
|  |           }).catch(error=>{ | ||
|  |             console.log(error); | ||
|  |           }) | ||
|  |         }, | ||
|  |         createBackup() {// 新建备份
 | ||
|  |           this.updateRemark = ''; | ||
|  |           this.updateId = ''; | ||
|  |           this.updateType = 'create'; | ||
|  |           this.dialogVisible = true; | ||
|  |         }, | ||
|  |         update(id, remark) { | ||
|  |           this.updateRemark = remark; | ||
|  |           this.updateId = id; | ||
|  |           this.updateType = 'update'; | ||
|  |           this.dialogVisible = true; | ||
|  |         }, | ||
|  |         save() {// 新增、修改的保存
 | ||
|  |           const that = this; | ||
|  |           if (that.updateRemark.trim() == '') { | ||
|  |             that.$message({message: '[备注]不允许为空', type: 'warning'}); | ||
|  |             return false; | ||
|  |           } | ||
|  |           if (that.updateType == 'create') {// 创建新的备份
 | ||
|  |             const params = { | ||
|  |               url:'jd', | ||
|  |               data:{ | ||
|  |                 cmd: 'com.actionsoft.apps.coe.pal_backup_add', | ||
|  |                 wsId: that.wsId, | ||
|  |                 remark: that.updateRemark | ||
|  |               } | ||
|  |             }; | ||
|  |             awsuiAxios.post(params).then(function (ro) { | ||
|  |               that.initData(); | ||
|  |               that.closeDlg(); | ||
|  |             }).catch(error=>{ | ||
|  |               console.log(error); | ||
|  |             }) | ||
|  |           } else {// 修改备注
 | ||
|  |             const params = { | ||
|  |               url:'jd', | ||
|  |               data:{ | ||
|  |                 cmd: 'com.actionsoft.apps.coe.pal_backup_update', | ||
|  |                 id: that.updateId, | ||
|  |                 remark: that.updateRemark | ||
|  |               } | ||
|  |             }; | ||
|  |             awsuiAxios.post(params).then(function (ro) { | ||
|  |               that.$message({message: '修改成功',type: 'success'}); | ||
|  |               that.initData(); | ||
|  |               that.closeDlg(); | ||
|  |             }).catch(error=>{ | ||
|  |               console.log(error); | ||
|  |             }) | ||
|  |           } | ||
|  |         }, | ||
|  |         recover(id, time) { | ||
|  |           const that = this; | ||
|  |           that.$confirm('恢复后,当前数据无法找回,请先备份当前数据!要继续恢复[' + time + ']的备份吗?', '提示', { | ||
|  |             confirmButtonText: '是,已经备份', | ||
|  |             cancelButtonText: '否,去备份', | ||
|  |             confirmButtonClass: 'button-general-color', | ||
|  |             type: 'warning' | ||
|  |           }).then(() => { | ||
|  |             const params = { | ||
|  |               url:'jd', | ||
|  |               data:{ | ||
|  |                 cmd: 'com.actionsoft.apps.coe.pal_backup_recover', | ||
|  |                 wsId: that.wsId, | ||
|  |                 id: id | ||
|  |               } | ||
|  |             }; | ||
|  |             awsuiAxios.post(params).then(function (ro) { | ||
|  |               that.initData(false); | ||
|  |             }).catch(error=>{ | ||
|  |               console.log(error); | ||
|  |             }) | ||
|  |           }).catch(() => { | ||
|  |             that.createBackup(); | ||
|  |           }); | ||
|  |         }, | ||
|  |         exportBackup(id) { | ||
|  |           const that = this; | ||
|  |           // 生成bak文件
 | ||
|  |           const params = { | ||
|  |             url:'jd', | ||
|  |             data:{ | ||
|  |               cmd: 'com.actionsoft.apps.coe.pal_backup_export', | ||
|  |               wsId: that.wsId, | ||
|  |               id: id | ||
|  |             } | ||
|  |           }; | ||
|  |           awsuiAxios.post(params).then(function (ro) { | ||
|  |             that.exportProgressTimeout = setInterval(function(){that.exportBackupProgress(id)}, 2000); | ||
|  |           }).catch(error=>{ | ||
|  |             console.log(error); | ||
|  |           }) | ||
|  |         }, | ||
|  |         exportBackupProgress(id) {// 查询是否备份完成
 | ||
|  |           const that = this; | ||
|  |           const params = { | ||
|  |             url:'jd', | ||
|  |             data:{ | ||
|  |               cmd: 'com.actionsoft.apps.coe.pal_backup_export_progress', | ||
|  |               wsId: that.wsId, | ||
|  |               id: id | ||
|  |             } | ||
|  |           }; | ||
|  |           awsuiAxios.post(params).then(function (r) { | ||
|  |             if(r.data.progress == "finish") { | ||
|  |               //已经生成bak,可系统下载
 | ||
|  |               clearTimeout(that.exportProgressTimeout); | ||
|  |               that.exportProgressTimeout = ''; | ||
|  |               that.exportBackupDownload(id); | ||
|  |             } else if(r.data.progress == "byhand") { | ||
|  |               //已经生成bak,需手工下载
 | ||
|  |               clearTimeout(that.exportProgressTimeout); | ||
|  |               that.exportProgressTimeout = ''; | ||
|  |               $.simpleAlert("close"); | ||
|  |               var filename = that.wsId + ".bak"; | ||
|  |               this.$message({ | ||
|  |                 showClose: true, | ||
|  |                 message: '文件过大,请联系管理员在服务器/doccenter/com.actionsoft.apps.coe.pal/tmp/exp/repository目录下获取备份文件' + filename, | ||
|  |                 duration: 0, | ||
|  |               }); | ||
|  |             } | ||
|  |           }).catch(error=>{ | ||
|  |             console.log(error); | ||
|  |           }) | ||
|  |         }, | ||
|  |         exportBackupDownload(id) {// 下载备份文件
 | ||
|  |           const that = this; | ||
|  |           const params = { | ||
|  |             url:'jd', | ||
|  |             data:{ | ||
|  |               cmd: 'com.actionsoft.apps.coe.pal_backup_export_download', | ||
|  |               wsId: that.wsId, | ||
|  |               id: id | ||
|  |             } | ||
|  |           }; | ||
|  |           awsuiAxios.post(params).then(function (ro) { | ||
|  |             window.open(ro.data.downloadUrl); | ||
|  |           }).catch(error=>{ | ||
|  |             console.log(error); | ||
|  |           }) | ||
|  |         }, | ||
|  |         deleteBackup(id, time) { | ||
|  |           const that = this; | ||
|  |           that.$confirm('确定要删除吗?', '提示', { | ||
|  |             confirmButtonText: '确定', | ||
|  |             cancelButtonText: '取消', | ||
|  |             confirmButtonClass: 'button-general-color', | ||
|  |             type: 'warning' | ||
|  |           }).then(() => { | ||
|  |             const params = { | ||
|  |               url:'jd', | ||
|  |               data:{ | ||
|  |                 cmd: 'com.actionsoft.apps.coe.pal_backup_delete', | ||
|  |                 wsId: that.wsId, | ||
|  |                 id: id | ||
|  |               } | ||
|  |             }; | ||
|  |             awsuiAxios.post(params).then(function (ro) { | ||
|  |               that.$message({type: 'success',message: '删除成功!'}); | ||
|  |               for (let i = 0; i < that.tableData.length; i++) { | ||
|  |                 if (that.tableData[i].id == id) { | ||
|  |                   that.tableData.splice(i, 1); | ||
|  |                   break; | ||
|  |                 } | ||
|  |               } | ||
|  |             }).catch(error=>{ | ||
|  |               console.log(error); | ||
|  |             }) | ||
|  |           }).catch(() => { | ||
|  |           }); | ||
|  |         }, | ||
|  |         handleClose(done) { | ||
|  |           done(); | ||
|  |         }, | ||
|  |         closeDlg() { | ||
|  |           this.dialogVisible = false; | ||
|  |           this.updateRemark = ''; | ||
|  |           this.updateType = 'create'; | ||
|  |           this.updateId = ''; | ||
|  |         }, | ||
|  |         refreshState() {// 查询
 | ||
|  |           const that = this; | ||
|  |           for (let i = 0; i < that.tableData.length; i++) { | ||
|  |             const data = that.tableData[i]; | ||
|  |             if (data.state == 0 || data.state == 3) { | ||
|  |               // 查询状态
 | ||
|  |               const params = { | ||
|  |                 url:'jd', | ||
|  |                 data:{ | ||
|  |                   cmd: 'com.actionsoft.apps.coe.pal_backup_state', | ||
|  |                   wsId: that.wsId, | ||
|  |                   id: data.id | ||
|  |                 } | ||
|  |               }; | ||
|  |               awsuiAxios.post(params).then(function (r) { | ||
|  |                 that.tableData[i].state = r.data.state; | ||
|  |                 if (r.data.state == 4) { | ||
|  |                   that.$message({message: '恢复成功',type: 'success'}); | ||
|  |                   setTimeout(function() { | ||
|  |                     // 刷新首页
 | ||
|  |                     location.reload(); | ||
|  |                   }, 1000); | ||
|  |                 } | ||
|  |               }).catch(error=>{ | ||
|  |                 console.log(error); | ||
|  |               }) | ||
|  |             } | ||
|  |           } | ||
|  |         } | ||
|  |       }, | ||
|  |       watch : { | ||
|  |         listenTopMainHeight: function (newd, old) { | ||
|  |           this.tableHeight = (parseInt(newd)) - 22 - 50 + 'px'; | ||
|  |         } | ||
|  |       }, | ||
|  |       beforeDestroy:function(){ | ||
|  |         clearInterval(this.stateInterval); | ||
|  |         clearInterval(this.exportProgressTimeout); | ||
|  |       }, | ||
|  |     } | ||
|  | </script> | ||
|  | 
 | ||
|  | <style scoped> | ||
|  |   #workspaceBackUp >>> .el-main { | ||
|  |     display: block; | ||
|  |     -webkit-box-flex: 1; | ||
|  |     -ms-flex: 1; | ||
|  |     flex: 1; | ||
|  |     -ms-flex-preferred-size: auto; | ||
|  |     flex-basis: auto; | ||
|  |     overflow: auto; | ||
|  |     padding: 0px 20px 0px; | ||
|  |   } | ||
|  |   #workspaceBackUp >>> .el-dialog__body { | ||
|  |     padding: 10px 20px; | ||
|  |     color: #606266; | ||
|  |     font-size: 14px; | ||
|  |     word-break: break-all; | ||
|  |   } | ||
|  |   #workspaceBackupTable >>> .item { | ||
|  |     margin-left: 5px; | ||
|  |     margin-right: 5px; | ||
|  |   } | ||
|  | </style> |