v-permission

权限code应用。

使用示例，值为字符串或数组字符串。

<f-button v-permission="'WMS.Function.WarehouseManagementNew'">
  创建
</f-button>
<f-button v-permission="['WMS.Function.WarehouseManagementEditor']">
  编辑
</f-button>
<f-button v-permission="['WMS.Function.WarehouseManagementEditor', 'WMS.Function.WarehouseManagementNew']">
  删除
</f-button>

代码演示

基本使用

<script setup lang="ts">
//
</script>

<template>
  <f-space>
    <f-button v-permission="'WMS.Function.WarehouseManagementNew'">创建</f-button>
    <f-button v-permission="['WMS.Function.WarehouseManagementEditor']">编辑</f-button>
    <f-button v-permission="['WMS.Function.WarehouseManagementEditor', 'WMS.Function.WarehouseManagementNew']">
      删除
    </f-button>
  </f-space>
</template>

<style scoped lang="less">
//
</style>

常用于表格操作按钮(头部或操作行)

<script setup lang="ts">
import { onMounted } from 'vue'
import { message } from '@fs/smart-design'
import { useCommonPage, p, mockApi } from '@fs/lib'

const { loading, advTable, tableModel } = useCommonPage()

// 表格配置
const tabConfig = {
  title: '仓库管理列表',
  actions: [
    {
      label: '新增',
      type: 'primary',
      icon: 'icon-tianjia2',
      permission: 'WMS.Function.WarehouseManagementNew',
    },
    {
      label: '导出',
      icon: 'icon-daochu',
      permission: ['WMS.Function.WarehouseManagementEditor', 'WMS.Function.WarehouseManagementNew'],
    },
    {
      slot: 'import',
    },
  ],
  columns: [
    {
      title: '编码',
      dataIndex: 'code',
    },
    {
      title: '名称',
      dataIndex: 'localName',
      customRender: ({ text }: any) => {
        return text?.[`zh_CN`]
      },
    },
    {
      title: '邮箱',
      dataIndex: 'contactEmail',
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      // permission: ['WMS.Function.Edit', 'WMS.Function.Delete'],
    },
  ],
}

const query = () => {
  loading.value = true
  mockApi
    .fetchTableList({
      currPage: tableModel.value.pagination.current,
      pageSize: tableModel.value.pagination.pageSize,
    })
    .then((res: any) => {
      advTable.value?.setDataSource(res?.list ?? [], res?.totalCount ?? 0)
    })
    .finally(() => {
      loading.value = false
    })
}

const handleAction = (action: any) => {
  console.log(action)
  message.info(action.label)
}
const handleCreate = (id: string) => {
  console.log(id)
  message.info(id)
}

onMounted(() => {
  query()
})

// 仅演示示例
const isAllowFlag = Math.random() > 0.5
</script>

<template>
  <AdvancedTable
    ref="advTable"
    v-model="tableModel"
    :config="tabConfig"
    :loading="loading"
    :scroll="null"
    @query="query"
    @action="handleAction"
  >
    <template #import>
      <f-button
        v-if="p(['WMS.Function.WarehouseManagementEditor', 'WMS.Function.WarehouseManagementNew']) && isAllowFlag"
      >
        导入
      </f-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'operation'">
        <f-space :size="12">
          <!-- v-permission="'WMS.Function.WarehouseManagementEditor'" -->
          <f-button
            v-permission="'WMS.Function.WarehouseManagementEditor'"
            type="link"
            @click="handleCreate(record.id)"
          >
            编辑
          </f-button>

          <!-- v-if="p('WMS.Function.WarehouseManagementEditor') && record.status" -->
          <f-button
            v-if="p('WMS.Function.WarehouseManagementEditor') && record.status"
            type="link"
            @click="handleCreate(record.id)"
          >
            禁用
          </f-button>

          <!-- v-permission="['WMS.Function.Delete']" -->
          <f-button
            v-permission="['WMS.Function.WarehouseManagementEditor', 'WMS.Function.WarehouseManagementNew']"
            type="link"
            @click="handleCreate(record.id)"
          >
            删除
          </f-button>
        </f-space>
      </template>
    </template>
  </AdvancedTable>
</template>

提示

• 常规权限控制使用v-permission绑定即可，支持string | string[]

  v-permission="'WMS.Function.WarehouseManagementNew'"
  v-permission="['WMS.Function.WarehouseManagementEditor']"

• 如有其他控制条件，如表格行操作需要结合具体行的状态，可导出p自行处理，参数值类型同上

  v-if="p('WMS.Function.WarehouseManagementEditor') && record.status"
  v-if="p(['WMS.Function.WarehouseManagementEditor', 'WMS.Function.WarehouseManagementNew']) && record.status"