jsh_erp_app/components/task-card/task-card.vue

<template>
  <view class="task-card">
    <view class="task-card-flex">
      <view
        v-for="(col, index) in _columns"
        class="task-col"
        :key="index"
        :style="getColStyle(col)"
        @click.stop="handleClickField(col.key)"
      >
        <view class="task-col-label" :style="getColLabelStyle(col)"
          >{{ col.title }}：</view
        >
        <view class="task-col-value" :style="getColValueStyle(col)">{{
          getFieldValue(col)
        }}</view>
      </view>
    </view>
    <view class="task-card-right-top" v-if="$slots.rightTop">
      <slot name="rightTop"></slot>
    </view>
    <u-divider></u-divider>
    <!-- 操作区域 -->
    <slot name="action"></slot>
  </view>
</template>

<script>
export default {
  props: {
    /**
     * title: 标题
     * key: key值
     * formatter: 格式化函数
     * isShow: 显/隐函数
     * span: 列, 12|24
     */
    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;
      });
    },
  },
  data() {
    return {};
  },
  methods: {
    /**
     * 点击事件
     * @param {String} key 字段名
     */
    handleClickField(key) {
      this.$emit("handleClickField", key, { ...this.formData });
    },
    getColStyle(col) {
      if (col.span) {
        return { width: `${(col.span / 24) * 100}%` };
      }
      return { width: "100%" };
    },
    getColLabelStyle(col) {
      return col.titleStyle || {};
    },
    getColValueStyle(col) {
      return col.valueStyle || {};
    },
    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>
.task-card {
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx 24rpx 0;
  margin-bottom: 24rpx;
  position: relative;

  .task-card-right-top {
    position: absolute;
    right: 24rpx;
    top: 36rpx;
  }

  .task-card-flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .task-col {
    display: flex;
    align-items: center;
    color: #666;
    font-family: "PingFang SC";
    font-size: 28rpx;
    font-weight: 400;
    margin-top: 16rpx;

    &-value {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>