123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <!-- 引入样式 -->
- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
- <style type="text/css">
- .upload-demo{text-align: center;margin-top: 80px;}
- </style>
- </head>
- <body>
- <div id="app">
- <el-upload
- class="upload-demo"
- drag
- action="/api/common/update_firewalld"
- :on-success="uploadFileSuc"
- :data="fileData"
- multiple>
- <i class="el-icon-upload"></i>
- <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
- <div class="el-upload__tip" slot="tip">请上传固件文件</div>
- </el-upload>
- <el-form ref="form" :model="form" label-width="100px" style="margin: 50px auto;display: block;width: 1200px;">
- <el-form-item label="制造商:">
- <el-select v-model="form.manuId" placeholder="请选择制造商">
- <el-option v-for="manu in manuList" :label="manu.name" :value="manu.id">{{ manu.name }}</el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="固件版本:">
- <el-input v-model="form.version" style="width: 200px;display: inline-block;" placeholder="请输入固件版本"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="onSubmit" :loading="isLoading">提交固件</el-button>
- </el-form-item>
- </el-form>
- </div>
- </body>
- <!-- 先引入 Vue -->
- <script src="https://unpkg.com/vue/dist/vue.js"></script>
- <!-- 引入组件库 -->
- <script src="https://unpkg.com/element-ui/lib/index.js"></script>
- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- <script>
- new Vue({
- el: '#app',
- data: function() {
- return {
- form: {
- version: '',
- path: '',
- manuId: ''
- },
- manuList:[],
- isLoading: false,
- fileData: {fileType:1}
- }
- },
- methods: {
- onSubmit: function(){
- if (this.form.path == "") {
- this.$message({
- message: '请上传固件文件',
- type: 'warning'
- });
- return;
- }
- if (this.form.manuId == "") {
- this.$message({
- message: '请选择制造商',
- type: 'warning'
- });
- return;
- }
- // if (this.form.version == "") {
- // this.$message({
- // message: '请填写固件版本',
- // type: 'warning'
- // });
- // return;
- // }
- this.isLoading = true
- var t = this
- axios.post('/api/common/uploadFilewalld', this.form)
- .then(function (response) {
- t.isLoading = false
- if (response.data.code == '0000') {
- t.form.path = '';
- t.form.version = '';
- t.$message({
- message: '上传成功',
- type: 'success'
- });
- }else{
- t.$message.error(response.data.msg);
- }
- })
- .catch(function (error) {
- console.log(error);
- });
- },
- clearData: function(){
- this.form.backInfo = ''
- },
- uploadFileSuc:function(response, file, fileList){
- var path = response.data.path;
- this.form.path = path;
- console.log(path);
- },
- get_time: function() {
- var myDate = new Date();
- var year = myDate.getFullYear();
- var month = myDate.getMonth() + 1;
- month = month < 10 ? '0'+month : month;
- var day = myDate.getDate();
- day = day < 10 ? '0'+day : day;
- var h = myDate.getHours();
- h = h < 10 ? '0'+h : h;
- var m = myDate.getMinutes();
- m = m < 10 ? '0'+m : m;
- var s = myDate.getSeconds();
- s = s < 10 ? '0'+s : s;
- return year+'-'+month+'-'+day+' '+h+':'+m+':'+s;
- }
- },
- mounted: function () {
- var v = this;
- axios.post('/api/common/manu_nav', this.form)
- .then(function (response) {
- if (response.data.code == '0000') {
- var list = response.data.data.list;
- for (var i = list.length - 1; i >= 0; i--) {
- var d = list[i];
- v.manuList.push({id:d.id,name:d.name});
- }
-
- // t.form.path = '';
- // t.form.version = '';
- // t.$message({
- // message: '上传成功',
- // type: 'success'
- // });
- }else{
- t.$message.error(response.data.msg);
- }
- })
- .catch(function (error) {
- console.log(error);
- });
- }
- })
- </script>
- </html>
|