teachcloud-print-web/card/elements/fill-table/EditFillTable.vue

<template>
  <div class="edit-fill-table ">
    <el-form
      ref="modalFormComp"
      :model="modalForm"
      :rules="rules"
      :key="modalForm.id"
      label-width="100px"
    >
      <el-form-item prop="tdCount" label="行列数：">
        <el-row>
          <el-col class="text-right" :span="3">
            <span>行：</span>
          </el-col>
          <el-col :span="6">
            <el-input-number
              style="width:60px;"
              v-model="modalForm.rowCount"
              :min="2"
              :max="16"
              :step="1"
              step-strictly
              :controls="false"
            ></el-input-number>
          </el-col>
          <el-col class="text-right" :span="3">
            <span>列：</span>
          </el-col>
          <el-col :span="6">
            <el-input-number
              style="width:60px;"
              v-model="modalForm.colCount"
              :min="2"
              :max="16"
              :step="1"
              step-strictly
              :controls="false"
            ></el-input-number>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="padding" label="网格内边距：">
        <el-row>
          <el-col class="text-right" :span="3">
            <span>上下：</span>
          </el-col>
          <el-col :span="6">
            <el-input-number
              style="width:60px;"
              v-model="modalForm.paddingTop"
              :min="2"
              :max="16"
              :step="1"
              step-strictly
              :controls="false"
            ></el-input-number>
          </el-col>
          <el-col class="text-right" :span="3">
            <span>左右：</span>
          </el-col>
          <el-col :span="6">
            <el-input-number
              style="width:60px;"
              v-model="modalForm.paddingLeft"
              :min="2"
              :max="16"
              :step="1"
              step-strictly
              :controls="false"
            ></el-input-number>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="线条类型：">
        <line-style-select v-model="modalForm.lineStyle"></line-style-select>
      </el-form-item>
      <el-form-item label="字号：">
        <size-select v-model="modalForm.fontSize"></size-select>
      </el-form-item>
      <el-form-item prop="lineHeight" label="行高：">
        <el-input-number
          style="width:125px;"
          v-model="modalForm.lineHeight"
          :min="20"
          :max="100"
          :step="1"
          step-strictly
          :controls="false"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="网格内容设置："></el-form-item>
      <table class="table table-nopad">
        <tr v-for="rowNo in modalForm.rowCount" :key="rowNo">
          <td v-for="colNo in modalForm.colCount" :key="colNo">
            <el-input
              v-model="modalForm.content[`${rowNo}_${colNo}`]"
              clearable
              style="width: 100%"
            ></el-input>
          </td>
        </tr>
      </table>
    </el-form>
  </div>
</template>

<script>
import LineStyleSelect from "../../components/common/LineStyleSelect";
import SizeSelect from "../../components/common/SizeSelect";
import { deepCopy, objAssign } from "../../plugins/utils";

const initModalForm = {
  id: "",
  colCount: 3,
  rowCount: 3,
  paddingTop: 5,
  paddingleft: 5,
  fontSize: "14px",
  lineHeight: 30,
  lineStyle: "solid",
  content: {}
};

export default {
  name: "edit-fill-table",
  components: { LineStyleSelect, SizeSelect },
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    const tdCountValidater = (rule, value, callback) => {
      if (!this.modalForm.rowCount || !this.modalForm.colCount) {
        return callback(new Error("请输入完整的行列数"));
      }
      callback();
    };
    const paddingValidater = (rule, value, callback) => {
      if (!this.modalForm.paddingTop || !this.modalForm.paddingleft) {
        return callback(new Error("请输入完整的网格内边距"));
      }
      callback();
    };

    return {
      modalForm: { ...initModalForm },
      rules: {
        tdCount: [
          {
            required: true,
            validator: tdCountValidater,
            trigger: "change"
          }
        ],
        padding: [
          {
            required: true,
            validator: paddingValidater,
            trigger: "change"
          }
        ]
      }
    };
  },
  mounted() {
    this.initData(this.instance);
  },
  methods: {
    initData(val) {
      this.modalForm = objAssign(initModalForm, val);
      this.modalForm.paddingTop = val.padding[0];
      this.modalForm.paddingLeft = val.padding[1];
      let content = {};
      for (let rowNo = 0; rowNo < val.rowCount; rowNo++) {
        for (let colNo = 0; colNo < val.colCount; colNo++) {
          const field = `${rowNo}_${colNo}`;
          content[field] = val[field] || "";
        }
      }
      this.modalForm.content = content;
    },
    async submit() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      const data = deepCopy(this.modalForm);
      const model = objAssign(this.instance, data);
      model.padding = [data.paddingTop, data.paddingLeft];

      this.$emit("modified", model);
    }
  }
};
</script>

<style scoped>
.table-nopad td,
.table-nopad th {
  padding: 0;
}
</style>