laws-sinotruk-client/src/components/StandardResolutionSheet.vue

<template>
  <div class="sheet-box">
    <!--标准目录-->
    <div class="standard-catalogue part-common">
      <div class="part-title">{{ $t('standardRegulationLibrary.standardCatalogue') }}</div>
      <div class="has-title-part-content">
        <a-tree :show-line="false" :show-icon="false" :tree-data="treeData" :selected-keys="selectedTreeKeys" @select="handleTreeSelected">
        </a-tree>
      </div>
    </div>
    <!--标准内容-->
    <div class="sheet-container part-ml">
      <!--标准名称-->
      <div class="standard-name">
        <a-tooltip placement="topLeft">
          <template #title>
            {{}}
          </template>
          <span></span>
        </a-tooltip>
        <a-button type="link" :icon="showClauseLable ? 'fullscreen' : 'fullscreen-exit'" @click="handleClauseChange(!showClauseLable)">
          {{ showClauseLable ? $t('open') : $t('putAway') }}
        </a-button>
      </div>
      <!--条文内容-->
      <div class="standard-content"></div>
    </div>
    <!--条文标签-->
    <div class="clause-label part-ml part-common" v-show="showClauseLable">
      <div class="part-title">{{ $t('standardRegulationLibrary.clauseLabel') }}</div>
      <div class="has-title-part-content">
        <div class="clause-item" v-for="(clause, index) in clauseField" :key="index">
          <label>{{ clause.title }}</label>
          <span></span>
        </div>
      </div>
    </div>
    <!--条文、条文标签切换-->
    <div class="clause-label-change part-ml part-common">
      <!--条文-->
      <div class="clause-label-change-item" :class="{'clause-label-change-item-selected': !showClauseLable}" @click="handleClauseChange(false)">
        <i class="iconfont icon-ios-list-box" />
        <span>条文</span>
      </div>
      <!--条文标签-->
      <div class="clause-label-change-item" :class="{'clause-label-change-item-selected': showClauseLable}" @click="handleClauseChange(true)">
        <i class="iconfont icon-biaoqian-mianxing" />
        <span>条文标签</span>
      </div>
    </div>
  </div>
</template>

<script>
import '@assets/less/common.less'

export default {
  name: 'StandardResolutionSheet',
  data () {
    return {
      showClauseLable: true, // 是否展示条文标签
      clauseField: [
        // 条文号
        {
          title: this.$t('standardRegulationLibrary.clauseNumber'),
          fieldName: ''
        },
        // 条文标题
        {
          title: this.$t('standardRegulationLibrary.clauseTitle'),
          fieldName: ''
        },
        // 法规要求类型
        {
          title: this.$t('standardRegulationLibrary.regulatoryRequirementsType'),
          fieldName: ''
        },
        // 功能分类
        {
          title: this.$t('standardRegulationLibrary.functionalClassification'),
          fieldName: ''
        },
        // 功能专业
        {
          title: this.$t('standardRegulationLibrary.functionalSpecialty'),
          fieldName: ''
        },
        // 分组编码
        {
          title: this.$t('standardRegulationLibrary.blockCoding'),
          fieldName: ''
        },
        // 分组名称
        {
          title: this.$t('standardRegulationLibrary.groupName'),
          fieldName: ''
        },
        // 新认证实施时间
        {
          title: this.$t('standardRegulationLibrary.newCertificationImplementationTime'),
          fieldName: ''
        },
        // 已认证实施时间
        {
          title: this.$t('standardRegulationLibrary.certifiedImplementationTime'),
          fieldName: ''
        },
        // 新注册实施时间
        {
          title: this.$t('standardRegulationLibrary.newRegistrationImplementationTime'),
          fieldName: ''
        },
        // 适用车型
        {
          title: this.$t('standardRegulationLibrary.applicableVehicleType'),
          fieldName: ''
        },
        // 动力类型
        {
          title: this.$t('standardRegulationLibrary.dynamicType'),
          fieldName: ''
        }
      ],
      treeData: [
        {
          title: '0-0',
          key: '0-0',
          children: [
            {
              title: '0-0-0',
              key: '0-0-0',
              children: [
                { title: '0-0-0-0', key: '0-0-0-0' },
                { title: '0-0-0-1', key: '0-0-0-1' },
                { title: '0-0-0-2', key: '0-0-0-2' }
              ]
            },
            {
              title: '0-0-1',
              key: '0-0-1',
              children: [
                { title: '0-0-1-0', key: '0-0-1-0' },
                { title: '0-0-1-1', key: '0-0-1-1' },
                { title: '0-0-1-2', key: '0-0-1-2' }
              ]
            }
          ]
        }
      ],
      selectedTreeKeys: []
    }
  },
  methods: {
    handleTreeSelected (selectedKeys) {
      this.selectedTreeKeys = selectedKeys
    },
    handleClauseChange (flag) {
      this.showClauseLable = flag
    }
  }
}
</script>

<style scoped lang="less">
.sheet-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.part-ml {
  margin-left: 16px;
}

.part-common {
  border-radius: 8px;
  background: #FFFFFF;
}

.standard-catalogue {
  height: 100%;
  width: 15%;
  min-width: 280px;

  /deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: transparent !important;
    color: @primary-color;
  }
}

.sheet-container {
  height: 100%;
  flex: 1;
  width: 0;
}

.clause-label {
  width: 25%;
  min-width: 400px;
  height: 100%;

  .clause-item {
    display: flex;
    margin-bottom: 20px;

    label {
      width: 12rem;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
      color: #86909C;
      margin-right: 20px;
    }

    span {
      white-space: pre-wrap;
      word-break: break-all;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
      color: #1D2129;
    }
  }
}

.clause-label-change {
  width: 6%;
  min-width: 130px;
  height: 100%;
  padding-top: 56px;

  &-item {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #1D2129;
    cursor: pointer;

    .iconfont {
      color: @primary-color;
    }

    span {
      margin-left: 8px;
    }
  }

  &-item-selected {
    background: #FAE6E5;
  }
}

.part-title {
  height: 56px;
  background: rgba(213, 44, 38, 0.12);
  border-radius: 8px 8px 0 0;
  line-height: 56px;
  padding: 0 24px;
  font-size: 16px;
  font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
  font-weight: 600;
  color: #1D2129;
}

.has-title-part-content {
  height: calc(100% - 56px);
  overflow: auto;
  padding: 24px;
}

.standard-name {
  height: 56px;
  background: #FFFFFF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  margin-bottom: 16px;
}

.standard-name > span {
  font-size: 16px;
  font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
  font-weight: 600;
  color: #1D2129;
  flex: 1;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.standard-content {
  height: calc(100% - 72px);
  background: #FFFFFF;
  border-radius: 8px;
  overflow: auto;
  padding: 24px;
}
</style>