cr/src/view/columns/singleColumn.vue

<template>
<section>
  <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" v-model="form_copy.name"/></td>
        </tr>
        <tr>
          <td>长</td>
          <td colspan="3">
            <input type="text" style="width:50px;margin-right: 14px;" v-model="form_copy.width" />
            高
            <input type="text" style="width:50px" v-model="form_copy.height"/></td>
        </tr>
        <tr>
          <td>字体</td>
          <td>
            <select v-model="form_copy.fontFamily"  style="width:80px;border: #0342c5 1px solid;">
              <option value="黑体">黑体</option>
              <option value="楷体">楷体</option>
              <option value="微软雅黑">微软雅黑</option>
              <option value="宋体">宋体</option>
            </select>
          </td>
          <td>字高</td>
          <td><input type="text" v-model="form_copy.fontSize"/></td>
        </tr>
        <tr>
          <td>字距</td>
          <td colspan="3"><input type="text" v-model="form_copy.letterSpacing" /></td>
        </tr>
        <tr>
          <td>字组</td>
          <td colspan="3"><input type="text" v-model="form_copy.content" /></td>
        </tr>
        <tr>
          <td colspan="4">
            <button type="primary"  @click="fittingPreview">预览</button>
            &nbsp;
            <button type="primary"  @click="fittingSave">提交</button>
          </td>
        </tr>
      </table>
    </div>
    <div id="fitting">
        <table>
            <tr><td v-bind:style="{width:form.width+'px',height:form.height+'px',fontFamily:form.fontFamily,fontSize:form.fontSize+'px',letterSpacing:form.letterSpacing+'px'}">{{form.content}}</td></tr>
            <tr><td></td></tr>
        </table>
    </div>
  </div>
</section>
</template>
 

<script>
let findAll = function() {
  this.$axios.get("/api/columns/singleColumn/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/columns/singleColumn/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 fittingPreview = function(){
  this.form =  Object.assign({}, this.form_copy)
}

export default {
  data() {
    return {
      rows: [],
      form: {},
      form_copy: {}
    };
  },
  mounted: function() {
    this.findAll();
  },
  methods: {
    findAll,
    fittingSave,
    fittingEdit,
    settingShow,
    fittingPreview
  }
};
</script>
 

<style scoped>
#fitting table{
    border: 1px solid #000;
    border-collapse: collapse;
    margin: auto;
    margin-top: 70px;
}
#fitting table tr td{
    width: 50px;
    height: 30px;
    border: 1px solid #000;
}
</style>