shujuju/ruoyi-ui/src/components/FormItemComponent/index.vue

<template>
  <div class="FormComponent">
      <div
      class="FormItemComponent"
      :style="setWidth"
    >
      <div
        v-for="(item,index) in dataColRol"
        :key="index"
        class="FormItemComponent-item"
        :style="setDiv(item)"
      >
        <component
          :is="item.component"
          :ref="'component_'+index"
          :index="index"
          :items="item.item"
          :readonly="readonly"
          @inputChange="inputChange"
        />
      </div>
    </div>
    <p v-if="buttonType">
      <el-button type="primary" plain icon="el-icon-search" @click="search">搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </p>
  </div>
</template>
<script>
import Vue from "vue";
import layoutAlgorithm from "@/api/layoutAlgorithm";
export default {
  name: "FormItemComponent",
  props: {
    formItemLists: {
      type: Array,
      default() {
        return [];
      }
    },
    buttonType: {
      type: Boolean,
      default() {
        return true;
      }
    },
    defaultColumn: {
      type: Number,
      default: 4
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 通过layoutAlgorithm算法得到对应的位置坐标
    dataColRol() {
      const list = layoutAlgorithm(this.defaultColumn, this.currentFormList);
      return Object.keys(list).reduce((temp, current) => {
        // 计算显示行数
        list[current].component = Vue.extend(list[current].component);
        temp.push(list[current]);
        return temp;
      }, []);
    },
    // 计算属性的 div 的坐标起始点
    setDiv() {
      return item =>
        ` grid-column:${item.x}/${item.col + item.x};grid-row:${
          item.y
        }/${item.y + item.row};`;
    },
    // 计算属性的 div的排列格式
    setWidth() {
      // `this` 指向 vm 实例
      const columns = Number(this.defaultColumn) || 4;
      return `grid-template-columns: repeat(${columns},${100 / columns}%`;
    }
  },
  watch: {
    formItemLists() {
      this.currentFormList = this.formItemLists.concat([]);
    }
  },
  data() {
    return {
      // defaultColumn:4,  //默认一行4列
      formData: {}, //保存form中输入数据
      currentFormList: []
    };
  },
  created() {
    this.currentFormList = this.formItemLists.concat([]);
    console.log(this.formItemLists,999999999)
  },
  methods: {
    inputChange(value, items, type) {
      //有数据改变时
      // if(Object.prototype.toString.call(value) === '[object Array]' && (!value[0] || !value[1])){
      //   delete this.formData[items.filed]
      // }else{
      //   this.formData[items.filed] = value
      // }
      if (type && type === "select") {
        this.formData[items.slotfiled] = value;
      } else {
        this.formData[items.filed] = value;
      }
      this.$emit("formChange", this.formData);
    },
    search() {
      this.$emit("search", this.formData);
    },
    reset() {
      this.formData = {};
      this.currentFormList = this.currentFormList.concat([]);
      this.$emit("search", this.formData);
    }
  }
};
</script>
<style lang="scss" scoped>
.FormComponent {
  padding: 2px 10px 10px 10px;
  // border: 1px solid rgba(228, 228, 228, 1);
}

.FormComponent > p {
  padding-left: 108px;
  margin-top: 10px;
  display: flex;
  width: 300px;

  > button {
    margin-right: 10px;
  }
}
.FormItemComponent > div {
  /*border:1px solid #fff;*/
  box-sizing: border-box;
}
.FormItemComponent {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-auto-rows: minmax(auto);
}
</style>