diantou/src_product/iam/components/audit-advanced-group.vue

<template>
  <div :class="$style.maingroupdiv">
    <div :class="$style.groupstyle">
      <span :class="$style.expandicon" @click="changeexpand">
        <a-icon :type="expanded ? 'minus-square' : 'plus-square'" :theme="'filled'" />
        {{ groupLabel }}
      </span>
    </div>
    <div :class="$style.expandCount">
      <span>{{ countLabel }}</span>
    </div>
    <div v-if="expanded">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import components from './_import-components/audit-advanced-group-import'

export default {
  name: 'AuditAdvancedGroup',
  metaInfo: {
    title: 'AuditAdvancedGroup',
  },
  components,
  props: {
    /**
     * 表单分组组件展示隐藏
     * true 展示
     * false 隐藏
     */
    expand: {
      type: Boolean,
      default: true,
    },
    /**
     * 表单分组组件名
     */
    groupLabel: {
      type: String,
      default: '项目信息',
    },
    /**
    /**
     * 表单分组组件名右侧统计内容
     */
    countLabel: {
      type: String,
      default: '',
    },
    /**
     * 表单分组标志位名
     */
    expandStr: {
      type: String,
      default: 'expand',
    },
    xmchildtable: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      expanded: true,
    }
  },
  methods: {
    changeexpand() {
      this.expanded = !this.expanded
      this.$emit('changedClick', this.expandStr)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

.expandicon {
  // color: #0b75f3;#40a9ff
  // color: rgba(0, 0, 0, 0.85);
  color: #40a9ff;
  line-height: 22px;
  cursor: pointer;
}
.maingroupdiv {
  position: relative;
  .groupstyle {
    float: left;
    position: relative;
    z-index: 11;
  }
  .expandCount {
    // float: right;
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>