jsh_erp_app/components/grid-form/grid-form.vue

<template>
  <view class="grid-from">
    <view
      class="grid-from-item"
      v-for="(col, index) in _columns"
      :key="index"
      @click.stop="handleClickField(col.key)"
    >
      <view class="grid-from-item-label">{{ col.title }}</view>
      <view class="grid-from-item-value">{{ getFieldValue(col) }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    /**
     * title: 标题
     * key: key值
     * formatter: 格式化函数
     * isShow: 显/隐函数
     */
    columns: {
      type: Array,
      default: () => [],
    },
    formData: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    _columns() {
      return this.columns.filter((col) => {
        if (col.isShow && col.isShow instanceof Function) {
          return col.isShow(col.key, { ...this.formData }, col);
        }
        return true;
      });
    },
  },
  methods: {
    /**
     * 点击事件
     * @param {String} key 字段名
     */
    handleClickField(key) {
      this.$emit("handleClickField", key, { ...this.formData });
    },
    getFieldValue(col) {
      const formData = { ...this.formData };
      if (col.formatter && col.formatter instanceof Function) {
        return col.formatter(col.key, formData, col);
      }
      return formData[col.key] || "-";
    },
  },
};
</script>

<style lang="scss" scoped>
.grid-from {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  padding: 0 24rpx;
  &-item {
    font-family: "PingFang SC";
    font-weight: 400;
    margin-top: 24rpx;
    &-label {
      color: #999;
      font-size: 24rpx;
      margin-bottom: 16rpx;
    }
    &-value {
      color: #000;
      font-size: 28rpx;
    }
  }
}
</style>