123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- <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>
|