opms_wechat/components/FormList/index.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-03-09 14:30:53
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-03-13 10:05:18
 * @Description: file content
 * @FilePath: \oms\pages\project\components\list.vue
-->
<template>
  <view class="card-wrap">
    <!-- 表单头部 -->
    <view class="card-item" v-for="(item, index) in dataList" :key="index">
      <view class="card-header">
        <u-row>
          <u-col :span="7">
            <view class="no">{{ index + 1 }}</view>
          </u-col>
          <u-col :span="5">
            <view class="flex">
              <u-text customStyle="margin-right:20rpx" align="right" size="26rpx" color="#5B8DCD"></u-text>
              <view class="flex1" v-if="item.open" @click="changeOpen(index, false)">
                <u-text customStyle="margin-right:10rpx" size="26rpx" color="#5B8DCD" text="收起"></u-text>
                <u-icon name="arrow-up"></u-icon>
              </view>
              <view class="flex1" v-else @click="changeOpen(index, true)">
                <u-text customStyle="margin-right:10rpx" size="26rpx" color="#5B8DCD" text="展开"></u-text>
                <u-icon name="arrow-down"></u-icon>
              </view>
            </view>
          </u-col>
        </u-row>
      </view>
      <!-- 内容 -->
      <view class="content">
        <view class="desc-area" v-if="!item.open">
          <slot name="header" :dataItem="item"></slot>
        </view>
        <view class="form-area" v-else>
          <view class="form-item" v-for="(v, i) in columns" :key="i">
            <!-- label -->
            <view class="form-label flex_l">
              <view class="label-tag"></view>
              {{ v.label }}
            </view>
            <!-- input -->
            <u-textarea v-if="!v.customRender" autoHeight :disabled="v.disabled" v-model="item[v.prop]"></u-textarea>
            <slot name="content" :dataItem="item" :propsss="v.prop" v-else></slot>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object | Array,
        required: true,
        default: () => [],
      },
      columns: {
        type: Object | Array,
        required: true,
        default: () => [],
      },
    },
    data() {
      return {
        dataList: [],
      }
    },
    mounted() {
      this.dataList = this.data.map((item) => ({ ...item, open: true }))
    },
    methods: {
      changeOpen(index, status) {
        this.dataList[index].open = status
      },
      getData() {
        let result = []
        this.dataList.map((item) => {
          const { open, ...items } = item
          result.push({ ...items })
        })
      },
    },
    components: {},
  }
</script>

<style lang="scss" scoped>
  .card-item {
    border-radius: 10px;
    border: 1px solid #bdbdbd;
    overflow: hidden;
    margin-bottom: 20rpx;
    .card-header {
      padding: 20rpx 30rpx;
      padding-bottom: 20rpx;
      background: -webkit-linear-gradient(top, #eeeff3, #fbfbfd);
      .no {
        width: 50rpx;
        height: 50rpx;
        background: #78b0ed;
        border-radius: 50%;
        text-align: center;
        line-height: 50rpx;
        color: #fff;
      }
    }
    .form-item {
      padding-bottom: 30rpx;
      .form-label {
        font-size: 30rpx;
        font-weight: bold;
        color: #323232;
        padding-bottom: 18rpx;

        .label-tag {
          width: 15rpx;
          height: 15rpx;
          background: #ff4d4f;
          border-radius: 50%;
          margin-right: 10rpx;
        }
      }
    }
    .content {
      padding: 20rpx 30rpx;
    }
  }
</style>