<template>
  <div :class="$style.content">
    <div :class="$style.doc">
      <div :class="$style.bold">权限集说明：</div>
      <p
        >数据权限依托组织结构的上下级关系，可以迅速配置账号数据权限，用户可以看到哪些范围的列表数据，满足业务需求。权限范围如下：</p
      >
      <table :class="$style.table" border="1" cellspacing="0" cellpadding="0">
        <thead>
          <tr :class="$style.bold">
            <td>数据权限</td>
            <td>说明</td>
          </tr>
        </thead>

        <tr v-for="(item, index) in rangeList" :key="index">
          <td>{{ item.perm }}</td>
          <td>{{ item.explain }}</td>
        </tr>
      </table>

      <div :class="$style.gap" />
      <div>
        举例：企业内所有员工都要使用费用报销模块，要求普通员工只能看到自己的数据，领导可以看到直属下级或分管机构的数据，部门领导可以看到本部门的数据。同时集团的财务1负责分公司1的费用报销，财务2负责分公司2的费用报销，财务领导可以看到全公司财务费用报销。
      </div>
      <img src="../images/explain.png" alt="" />
      <div v-for="(item, index) in permList" :key="index">
        <div>{{ item.label }}</div>
        <div>{{ item.explain }}</div>
        <div :class="$style.gap" />
      </div>
    </div>
  </div>
</template>

<script>
import components from './_import-components/sd-perm-explain-import'

export default {
  name: 'SdPermExplain',
  metaInfo: {
    title: '权限说明',
  },
  components,
  data() {
    return {
      rangeList: [
        { perm: '全部', explain: '所有数据（含所有分级机构）' },
        { perm: '本人', explain: '本人数据（含新建、经办数据）' },
        { perm: '本部门', explain: '用户所在节点部门数据' },
        {
          perm: '本直属组织',
          explain: '用户所在指定级别组织的数据（含下级），组织级别可指定，取自后台组织级别维护',
        },
        { perm: '本机构', explain: '用户所在分级机构下的所有数据' },
        { perm: '分管机构', explain: '用户所“分管机构”的所有数据（含下级）' },
        { perm: '自定义', explain: '根据表单字段动态设置权限' },
      ],
      permList: [
        {
          label: '权限集1【公司领导】:',
          explain:
            '授权“公司领导”数据权限设置为全部，则可查看全部数据，包含部门A、分公司1、分公司2',
        },
        {
          label: '权限集2【部门领导】:',
          explain: '授权“部门领导”数据权限设置为本部门，则可查看部门C的数据',
        },
        {
          label: '权限集3【财务1】:',
          explain: '授权“财务1”数据权限设为自定义选择分公司1含下级，则可查看分公司1所有数据',
        },
        {
          label: '权限集4【分管领导】:',
          explain: '授权“公司领导”数据权限设置为分管机构，则可查看分管分公司1的数据',
        },
        {
          label: '权限集5【分公司领导】:',
          explain: '授权“分公司领导”数据权限设置为本机构，则可查看所在分级机构分公司2下的所有数据',
        },
        {
          label: '权限集5【部门文书】:',
          explain: '授权“员工1” 数据权限设置为本直属部门，则可查看部门C及下级部门C1/C2所有数据',
        },
      ],
    }
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.content {
  background: #f0f2f5;
  .doc {
    width: 210mm;
    height: 100%;
    padding: 17mm;
    margin: auto;
    background: $white;
    img {
      width: 100%;
    }
    .bold {
      font-weight: bold;
    }
    .gap {
      height: 10px;
    }
    .table {
      width: 100%;
      td {
        height: 30px;
        padding-left: 10px;
      }
    }
  }
}
</style>
