cr/src/view/background.vue

<template>
<section>
        <div id="child_menu">
	        <div class="left">
		        <label>行数</label>
		        <input type="text" style="width: 40px" v-model="sum_copy"/>
		        <label @click="changeSum" style="cursor: pointer">确认</label>
	        </div>
            <div class="right">
                <label>设置</label> &nbsp;&nbsp;&nbsp; <label>删除</label>
            </div>
        </div>
        <child v-bind:sum="this.sum"></child>
  
  <div id="setting" >
    <div id="Attribute">
      <div style="color: red;font-weight: bolder;text-align: center;font-size: 14px;">背景图</div>
      <table :title="form && form.id ? '编辑' : '新增' "  :model="form">
        <tr>
          <td>名称</td>
          <td colspan="3"><input type="text" style="width: 108px"  v-model="form_copy.name"/></td>
        </tr>
        <tr>
          <td>图宽</td>
          <td><input type="text" v-model="form_copy.width" /></td>
          <td>图高</td>
          <td><input type="text" v-model="form_copy.height"/></td>
        </tr>
        <tr>
          <td colspan="4" style="text-align:left"> 
            清晰度 <input type="text" v-model="form_copy.opacity" />%
            &nbsp;
            <button type="primary" @click="chooseType" style="float:right">上传</button>
            <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>
          </td>
        </tr>
        <tr>
          <td colspan="4" style="text-align:center;width:156px;" >
            <button type="primary" style="width:42px" @click="fittingPreview">预览</button>
            &nbsp;
           <button type="primary" style="width:42px;" @click="fileUpload">提交</button>
            &nbsp;
            <button type="primary" style="width:42px"  @click="fittingSave">删除</button>
          </td>
        </tr>
      </table>
    </div>
    <div id="fitting">
      <img v-bind:src="form.src" id="fitting_img" v-bind:style="{width:form.width+'px',height:form.height+'px',opacity:form.opacity/100}"/>
    </div>
  </div>
</section>
</template>
 

<script>

import child from '@/components/common/list';

let findAll = function() {
  this.$axios.get("/api/background/background/findAll").then(response => {
      if (response.data.code == 0) {
        this.rows = response.data.list;
      }
    })
    .catch(error => {
      console.log(error);
      this.message = error;
    });
};

let fittingSave = function(){
   this.$axios.post("/api/background/background/saveOrUpdate", this.form).then(response => {
     if (response.data.code == 0) {
        this.findAll()
        this.form = {}
      }
   })
   .catch(error => {
      console.log(error);
      this.message = error;
    });
}

let fittingEdit = function(index){
  this.form = this.rows[index]
}

let settingShow = function(){
  this.form = {}
}

let chooseType = function(){
  document.getElementById('upload_file').click();
}

let fileChange = function(el){
  if (!el.target.files[0].size) return;
  this.fileAdd(el.target.files[0]);
  el.target.value = ''
}

let fileAdd = function(file){
  //总大小
  if(file.size>3145728){
    alert('请选择3M以内的图片！');
    return false; 
  }
  //判断是否为图片文件
  if (file.type.indexOf('image') == -1) {
    this.$dialog.toast({mes: '请选择图片文件'});
    return false; 
  } else {
    let reader = new FileReader();
    let image = new Image();
    let _this = this;
    _this.file = file;
    reader.readAsDataURL(file);
    reader.onload = function () {
      _this.form.src = this.result;
    }
  }
}

let fileUpload = function(){
  let formData = new FormData();
  formData.append("file", this.file);
   this.$axios.post("/api/background/background/upload", formData).then(response => {
     if (response.data.code == 0) {
        this.form.src = response.data.url;
        this.fittingSave()
      }
   })
   .catch(error => {
      console.log(error);
      this.message = error;
    });
}

let changeSum = function(){
    this.sum = this.sum_copy * 8
}

let fittingPreview = function(){
  this.form =  Object.assign({}, this.form_copy)
}

export default {
  data() {
    return {
      rows: [],
      form: {
        src:"img.jpg"
      },
	  sum:1,
      sum_copy:1,
      file: '',
      form_copy: {
        src:"img.jpg"
      }
    };
  },
  mounted: function() {
    this.findAll();
  },
  methods: {
    findAll,
    fittingSave,
    fittingEdit,
    settingShow,
    chooseType,
    fileChange,
    fileAdd,
    fileUpload,
    changeSum,
    fittingPreview
  },
    components:{
      child
    }
};
</script>
 
<style scoped>

#Attribute {
  border: 1px solid #000;
  padding: 35px 30px;
  background: #f6fbfe;
  width: 155px;
}

#Attribute table tr :nth-child(odd) {
  text-align: right;
  width: 30px;
}

#Attribute table tr td {
  height: 37px;
}

#Attribute table tr td input {
  width: 40px;
}

#setting > div {
  float: right;
  text-align: center;
}

#fitting img {
  width: 350px;
  height: 200px;
  border: 1px solid #000;
  text-align: center;
}
</style>