antissoft / wurenji

<template>
  <div>
    <el-drawer :title="dialogTitle" :visible.sync="dataAuthorizeListDrawer" :wrapperClosable="false"
      ref="drawer" size="700px" class="NCC-common-drawer">
      <div class="NCC-flex-main">
        <el-tabs type="border-card" v-model="tabActiveName" @tab-click="handleClick"
          class="NCC-flex-tabs">
          <el-tab-pane label="方案管理" name="dataAuthorizeScheme">
            <div class="NCC-common-head">
              <topOpts @add="handleAddEdit('')" />
              <div class="NCC-common-head-right">
                <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
                  <el-link icon="icon-ym icon-ym-Refresh
                  NCC-common-head-icon" :underline="false" @click="getAuthorizeSchemeList()" />
                </el-tooltip>
              </div>
            </div>
            <NCC-table v-loading="listLoading" :data="dataAuthorizeSchemeList" row-key="id"
              default-expand-all :tree-props="{children: 'children', hasChildren: ''}">
              <el-table-column prop="fullName" label="方案名称" width="160" />
              <el-table-column prop="conditionText" label="过滤条件" />
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <tableOpts @edit="handleAddEdit(scope.row.id)" @del="handleDel(scope.row.id)" />
                </template>
              </el-table-column>
            </NCC-table>
          </el-tab-pane>
          <el-tab-pane label="字段管理" name="dataAuthorize">
            <div class="NCC-common-head">
              <topOpts @add="handleAddEdit('')" />
              <div class="NCC-common-head-right">
                <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
                  <el-link icon="icon-ym icon-ym-Refresh
                  NCC-common-head-icon" :underline="false" @click="getAuthorizeList()" />
                </el-tooltip>
              </div>
            </div>
            <NCC-table v-loading="dataListLoading" :data="dataAuthorizeList" row-key="id"
              default-expand-all :tree-props="{children: 'children', hasChildren: ''}">
              <el-table-column prop="enCode" label="字段名称" />
              <el-table-column prop="fullName" label="字段说明" show-overflow-tooltip />
              <el-table-column prop="type" label="字段类型" width="70" />
              <el-table-column prop="conditionSymbol" label="条件符号" show-overflow-tooltip />
              <el-table-column label="条件内容" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.conditionText === 'text'">任意文本</span>
                  <span v-if="scope.row.conditionText === '@userId'">当前用户</span>
                  <span v-if="scope.row.conditionText === '@organizeId'">当前组织</span>
                  <span
                    v-if="scope.row.conditionText === '@organizationAndSuborganization'">当前组织及子组织</span>
                  <span v-if="scope.row.conditionText === '@userAraSubordinates'">当前用户及下属</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <tableOpts @edit="handleAddEdit(scope.row.id)" @del="handleDel(scope.row.id)" />
                </template>
              </el-table-column>
            </NCC-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </el-drawer>
    <DataSchemeForm v-if="dataSchemeFormVisible" ref="DataSchemeForm"
      @refreshDataList="getAuthorizeSchemeList" />
    <DataAuthorizeForm v-if="dataAuthorizeFormVisible" ref="DataAuthorizeForm"
      @refreshDataList="getAuthorizeList" />
  </div>
</template>

<script>
import {
  getDataAuthorizeSchemeList,
  getDataAuthorizeList,
  delDataScheme,
  delDataAuthorize
} from '@/api/system/dataAuthorize'
import DataSchemeForm from './DataSchemeForm'
import DataAuthorizeForm from './DataAuthorizeForm'

export default {
  components: {
    DataSchemeForm,
    DataAuthorizeForm
  },
  data() {
    return {
      tabActiveName: 'dataAuthorizeScheme',
      dataAuthorizeListDrawer: false,
      dialogTitle: '',
      moduleId: '',
      loading: false,
      btnLoading: false,
      listLoading: false,
      dataListLoading: false,
      dataAuthorizeSchemeList: [],
      dataAuthorizeList: [],
      dataSchemeFormVisible: false,
      dataAuthorizeFormVisible: false
    }
  },
  methods: {
    init(moduleId, fullName) {
      this.dataAuthorizeListDrawer = true
      this.moduleId = moduleId
      this.tabActiveName = 'dataAuthorizeScheme'
      this.dialogTitle = `数据权限 - ${fullName}`
      this.$nextTick(() => {
        this.listLoading = true
        this.dataListLoading = true
        this.getAuthorizeSchemeList()
      })
    },
    getAuthorizeSchemeList() {
      // 获取方案管理列表
      getDataAuthorizeSchemeList(this.moduleId).then(res => {
        this.dataAuthorizeSchemeList = res.data.list
        this.listLoading = false
        this.btnLoading = false
      }).catch(() => {
        this.listLoading = false
        this.btnLoading = false
      })
    },
    getAuthorizeList() {
      // 获取字段列表
      getDataAuthorizeList(this.moduleId).then(res => {
        this.dataAuthorizeList = res.data.list
        this.dataListLoading = false
        this.btnLoading = false
      }).catch(() => {
        this.dataListLoading = false
        this.btnLoading = false
      })
    },
    handleClick(tab, event) {
      this.btnLoading = false
      const activeTab = this.tabActiveName
      if (activeTab === 'dataAuthorizeScheme') {
        this.getAuthorizeSchemeList()
      } else {
        this.getAuthorizeList()
      }
    },
    handleReLoad() {
      this.btnLoading = true
      const activeTab = this.tabActiveName
      if (activeTab === 'dataAuthorizeScheme') {
        this.getAuthorizeSchemeList()
      } else {
        this.getAuthorizeList()
      }
    },
    handleAddEdit(id) {
      const activeTab = this.tabActiveName
      if (activeTab === 'dataAuthorizeScheme') {
        this.dataSchemeFormVisible = true
        this.$nextTick(() => {
          this.$refs.DataSchemeForm.init(this.moduleId, id)
        })
      } else {
        this.dataAuthorizeFormVisible = true
        this.$nextTick(() => {
          this.$refs.DataAuthorizeForm.init(this.moduleId, id)
        })
      }
    },
    handleDel(id) {
      this.$confirm(this.$t('common.delTip'), this.$t('common.tipTitle'), {
        type: 'warning'
      }).then(() => {
        const delMethod = this.tabActiveName === 'dataAuthorizeScheme' ? delDataScheme : delDataAuthorize
        delMethod(id).then(res => {
          this.$message({
            type: 'success',
            message: res.msg,
            duration: 1500,
            onClose: () => {
              this.handleReLoad()
            }
          })
        })
      }).catch(() => { })
    }
  }
}
</script>
<style lang="scss" scoped>
.NCC-flex-main {
  .el-tabs--border-card {
    border: none;
    box-shadow: none;
    >>> .el-tabs__content {
      padding: 0 !important;
    }
  }
}
.NCC-flex-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  >>> .el-tabs__content {
    flex: 1;
    .el-tab-pane {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>