vue3.2 封装card组件

一、封装组件 

<template>
  <van-card centered @click="$emit('cardClick', item)" v-for="(item, index) in data" :key="index" class="v-card">
    <template #title>
      <view class="top-style">
        <view class="name-style">{{ item[field.createdName] }}{{ item[field.title] ? item[field.title] : business }}
        </view>
        <view class="time-style" style="color: #707070;">{{ item[field.createTime] }}</view>
      </view>
    </template>
    <template #desc>
      <view class="desc-style">
        <view v-for="(col, k) in columns" :key="k" class="desc-center-style">
          <view style="width: 30%; color: #707070;">{{ col.title }}</view>
          <view style="width: 70%; color: #474747;">
            <view class="content-hide">{{ customValue(item, col) }}</view>
          </view>
        </view>
        <view class="desc-center-style" style="margin-bottom: 2vw" v-if="currentNode">
          <view style="width: 30%; color: #707070;">当前节点</view>
          <view style="width: 70%; color: #188ffd;padding-left: 7%">
            <view class="content-hide">{{ nodePersonHandle(item) }}</view>
          </view>
          <view :class="{
                    'status-style-green': currentStatusHandle(item.status) === '流转完成',
                    'status-style-red': currentStatusHandle(item.status) === '流程关闭',
                    'status-style': true}">{{ currentStatusHandle(item.status) }}
          </view>
        </view>
      </view>
    </template>
  </van-card>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  business: {
    type: String
  },
  currentNode: {
    type: Boolean,
    default: true
  },
  stateHandle: {
    type: Array,
    default: () => []
  },
  field: {
    type: Object,
    default: () => ({
      title: "title",
      createTime: "createdTime",
      createdName: "createdName",
      currentNames: "currentNames",
      status: "status"
    })
  },
  data: {
    type: Array,
    default: () => []
  }
});
// let statusStyle = ''
const customValue = (item, col) => {
  if (col.custom) {
    return col.custom(item[col.key]);
  } else {
    return item[col.key] ? item[col.key] : "无";
  }
};

const currentStatusHandle = (e) => {
  if (props.stateHandle.length > 0) {
    for (let i = 0; i < props.stateHandle.length; i++) {
        if(props.stateHandle[i].key == e){
          return props.stateHandle[i].value; // 输出当前状态
        }
    }
  }
};

const nodePersonHandle = (item) => {
  let nodeValue = Object.prototype.toString.call(item[props.field.currentNames]).slice(8, -1);
  switch (nodeValue) {
    case "Array":
      return item[props.field.currentNames].length > 0 ? (item[props.field.currentNames].toString().length > 8 ? `${item[props.field.currentNames].toString().slice(0, 9)}...` : `${item[props.field.currentNames].toString()}`) : `无`;
    case "String":
      return item[props.field.currentNames].length > 0 ? (item[props.field.currentNames].length > 8 ? `${item[props.field.currentNames].slice(0, 9)}...` : `${item[props.field.currentNames]}`) : `无`;
    default:
      return "无";
  }
};
</script>

<style scoped>
.v-card {
    width: 95vw;
    height: auto;
    margin: 2vw auto 2vw auto;
    padding-top: 2vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    border-left: #cccccc solid 0.5vw;
    border-top: #cccccc solid 0.4vw;
    border-right: #cccccc solid 0.4vw;
    border-bottom: #cccccc solid 0.7vw;
    border-radius: 0.5vw;
    background-color: #ffffff;
}

.top-style {
    width: 320px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

.name-style {
    font-size: 16px;
    font-weight: bold;
}

.time-style {
    font-size: 14px;
    color: #a0a2a4;
    margin-right: -6px;
}

.desc-style {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    margin-top: 5px;
}

.desc-center-style {
    width: 100%;
    height: 6.5vw;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.status-style,
.status-style-red,
.status-style-green {
    height: 7vw;
    width: 30%;
    border-radius: 3px;
    padding-top: 1px;
    text-align: center;
}

.status-style {
    border: solid 1px #138af8;
    color: #138af8;
}

.status-style-red {
    border: solid 1px #ef043a;
    color: #ef043a;
}

.status-style-green {
    border: solid 1px #17a41e;
    color: #17a41e;
}

.content-hide {
    white-space: nowrap;
}
</style>

二、引用组件 

<template>
  <VantCardTest business="发起的安全检查"
    :data="transfer.data" @cardClick="clickTo" :stateHandle="stateHandle"
                :columns="undeterminedColumns"></VantCardTest>
</template>

<script setup>
    import VantCardTest from "@/components/**/***/**.vue";
    // 假数据
    const transfer = reactive({
          data: 
                 [{id:1111,
                  // title:'发起的***', // 可自定义每一条数据
                  createdName:"张三",
                  createdTime:"2024-03-06 11:11",
                  currentNames:['张三','张三','张三','张三','张三'],
                  status:0,
                  code:"单号000000000000",
                  zhidongqiLiaohao:"1234567111",
                  liaohao:"liaohao1123",
                },
                {id:2222,
                 // title:'发起的***', // 可自定义每一条数据
                  createdName:"张三",
                  createdTime:"2024-03-06 11:11",
                  currentNames:["张三","李四无","王五","文5b"],
                  status:3,
                  code:"单号000000000000",
                  zhidongqiLiaohao:"1234567111",
                  liaohao:"liaohao1123",
                }
           ]
      })
    const stateHandle = [
      {key: 1, value: '第一步'},
      {key: 2, value: '第二步'},
      {key: 3, value: '流转完成'},
      {key: 4, value: '流程关闭'}
    ]
    const undeterminedColumns = [
      {title: "业务单号", key: "code"},
      {title: "发起人", key: "createdName"},
      {title: "料号", key: "createdName1"},
      // 可用custom自定义显示的内容  
      // {
      //   title: "当前状态", key: "status", custom: (value) => {
      //     switch (value) {
      //       case 0:
      //         return '待指派1'
      //       case 1:
      //         return '待指派2'
      //       case 2:
      //         return '流转完成'
      //     }
      //   }
      // },
    ]
    const clickTo = (e) => {
          console.log("e",e.id);
    };
</script>