index.php 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <!-- 引入样式 -->
  6. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  7. <style type="text/css">
  8. .upload-demo{text-align: center;margin-top: 80px;}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="app">
  13. <el-upload
  14. class="upload-demo"
  15. drag
  16. action="/api/common/update_firewalld"
  17. :on-success="uploadFileSuc"
  18. :data="fileData"
  19. multiple>
  20. <i class="el-icon-upload"></i>
  21. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  22. <div class="el-upload__tip" slot="tip">请上传固件文件</div>
  23. </el-upload>
  24. <el-form ref="form" :model="form" label-width="100px" style="margin: 50px auto;display: block;width: 1200px;">
  25. <el-form-item label="制造商:">
  26. <el-select v-model="form.manuId" placeholder="请选择制造商">
  27. <el-option v-for="manu in manuList" :label="manu.name" :value="manu.id">{{ manu.name }}</el-option>
  28. </el-select>
  29. </el-form-item>
  30. <el-form-item label="固件版本:">
  31. <el-input v-model="form.version" style="width: 200px;display: inline-block;" placeholder="请输入固件版本"></el-input>
  32. </el-form-item>
  33. <el-form-item>
  34. <el-button type="primary" @click="onSubmit" :loading="isLoading">提交固件</el-button>
  35. </el-form-item>
  36. </el-form>
  37. </div>
  38. </body>
  39. <!-- 先引入 Vue -->
  40. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  41. <!-- 引入组件库 -->
  42. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  43. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  44. <script>
  45. new Vue({
  46. el: '#app',
  47. data: function() {
  48. return {
  49. form: {
  50. version: '',
  51. path: '',
  52. manuId: ''
  53. },
  54. manuList:[],
  55. isLoading: false,
  56. fileData: {fileType:1}
  57. }
  58. },
  59. methods: {
  60. onSubmit: function(){
  61. if (this.form.path == "") {
  62. this.$message({
  63. message: '请上传固件文件',
  64. type: 'warning'
  65. });
  66. return;
  67. }
  68. if (this.form.manuId == "") {
  69. this.$message({
  70. message: '请选择制造商',
  71. type: 'warning'
  72. });
  73. return;
  74. }
  75. // if (this.form.version == "") {
  76. // this.$message({
  77. // message: '请填写固件版本',
  78. // type: 'warning'
  79. // });
  80. // return;
  81. // }
  82. this.isLoading = true
  83. var t = this
  84. axios.post('/api/common/uploadFilewalld', this.form)
  85. .then(function (response) {
  86. t.isLoading = false
  87. if (response.data.code == '0000') {
  88. t.form.path = '';
  89. t.form.version = '';
  90. t.$message({
  91. message: '上传成功',
  92. type: 'success'
  93. });
  94. }else{
  95. t.$message.error(response.data.msg);
  96. }
  97. })
  98. .catch(function (error) {
  99. console.log(error);
  100. });
  101. },
  102. clearData: function(){
  103. this.form.backInfo = ''
  104. },
  105. uploadFileSuc:function(response, file, fileList){
  106. var path = response.data.path;
  107. this.form.path = path;
  108. console.log(path);
  109. },
  110. get_time: function() {
  111. var myDate = new Date();
  112. var year = myDate.getFullYear();
  113. var month = myDate.getMonth() + 1;
  114. month = month < 10 ? '0'+month : month;
  115. var day = myDate.getDate();
  116. day = day < 10 ? '0'+day : day;
  117. var h = myDate.getHours();
  118. h = h < 10 ? '0'+h : h;
  119. var m = myDate.getMinutes();
  120. m = m < 10 ? '0'+m : m;
  121. var s = myDate.getSeconds();
  122. s = s < 10 ? '0'+s : s;
  123. return year+'-'+month+'-'+day+' '+h+':'+m+':'+s;
  124. }
  125. },
  126. mounted: function () {
  127. var v = this;
  128. axios.post('/api/common/manu_nav', this.form)
  129. .then(function (response) {
  130. if (response.data.code == '0000') {
  131. var list = response.data.data.list;
  132. for (var i = list.length - 1; i >= 0; i--) {
  133. var d = list[i];
  134. v.manuList.push({id:d.id,name:d.name});
  135. }
  136. // t.form.path = '';
  137. // t.form.version = '';
  138. // t.$message({
  139. // message: '上传成功',
  140. // type: 'success'
  141. // });
  142. }else{
  143. t.$message.error(response.data.msg);
  144. }
  145. })
  146. .catch(function (error) {
  147. console.log(error);
  148. });
  149. }
  150. })
  151. </script>
  152. </html>