cr/src/view/columns/multiColumn.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>
          <td>宽度</td>
          <td ><input type="text" style="width:20px;" v-model="form_copy.width" /></td>
        </tr>
        <tr>
          <td colspan="4">
              高：一层<input type="text" style="width:30px;margin: 0 5px;" v-model="form_copy.heightOne" />
              二层<input type="text" style="width:30px;margin: 0 5px;" v-model="form_copy.heightTwo" />
          </td>
          <td>列数</td>
          <td ><input type="text" style="width:20px;" v-model="form_copy.columnCount" /></td>
        </tr>
        <tr>
          <td colspan="4">
              字体
            <select v-model="form_copy.fontFamily"  style="width:50px;border: #0342c5 1px solid;">
              <option value="黑体">黑体</option>
              <option value="楷体">楷体</option>
              <option value="微软雅黑">微软雅黑</option>
              <option value="宋体">宋体</option>
            </select>
              字高<input type="text" style="width:30px;margin: 0 5px;" v-model="form_copy.fontSize" />
          </td>
          <td>字距</td>
          <td ><input type="text" style="width:20px;" v-model="form_copy.letterSpacing" /></td>
        </tr>
        <tr>
          <td colspan="4">
              分列宽：1<input type="text" style="width:30px;margin: 0 5px;" v-model="form_copy.heightOne" />
              2<input type="text" style="width:30px;margin: 0 5px;" v-model="form_copy.heightTwo" />
          </td>
          <td>3</td>
          <td ><input type="text" style="width:20px;" v-model="form_copy.letterSpacing" /></td>
        </tr>
        <tr>
          <td colspan="4">
             4<input type="text" style="width:30px;margin: 0 5px;" v-model="form_copy.heightOne" />
             5<input type="text" style="width:30px;margin: 0 5px;" v-model="form_copy.heightOne" />
             6<input type="text" style="width:30px;margin: 0 5px;" v-model="form_copy.heightOne" />
          </td>
          <td>计宽</td>
          <td ><input type="text" style="width:20px;" v-model="form_copy.letterSpacing" /></td>
        </tr>
        <tr>
          <td>字组</td>
          <td colspan="5"><input type="text" v-model="form_copy.content" /></td>
        </tr>
        <tr>
          <td colspan="6">
            <button type="primary"  @click="fittingPreview">键入</button>
            &nbsp;
            <button type="primary"  @click="fittingPreview">预览</button>
            &nbsp;
            <button type="primary"  @click="fittingSave">提交</button>
          </td>
        </tr>
      </table>
    </div>
    <div id="fitting">
        <table>
            <tr><td :colspan="form.columnCount" :style="{width:form.width+'px',height:form.heightOne+'px'}"></td></tr>
            <tr>
                <td v-for="index in form.columnCount" v-bind:key="index" :style="{height:form.heightTwo+'px'}"></td>
            </tr>
            <tr>
                <td v-for="index in form.columnCount" v-bind:key="index" ></td>
            </tr>
        </table>
    </div>
  </div>
</section>
</template>
 

<script>
let findAll = function() {
  this.$axios.get("/api/columns/multiColumn/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/multiColumn/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: {
          columnCount:3
      },
      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;
}

#Attribute {
    padding: 34px 34px;
    width: 230px;
}
</style>