El-Plus-Crud

Appearance

Form 表单 ​

动态显示 vif & 权限控制 ​

在子组件的描述配置中，可以增加 vif: boolean | (data) => boolean 属性来控制该子组件的显示和隐藏。同时还支持子组件级别的权限控制: auth: 'xxx' （注：若要使用 auth 功能，必须在注册 CRUD 时，在 config 中配置 auth 的校验方法）

代码

首先注册 CRUD 时，需要在 config 中配置 auth 方法

ts
// @/main.ts

// 注册全局crud
app.use(ElPlusCrud, {
  // 注册权限控制
  auth: (auth: string = '') => {
    // 这里进行权限查找...
    return ['add', 'edit', 'del', 'test4'].indexOf(auth) >= 0
  }
})
// @/main.ts

// 注册全局crud
app.use(ElPlusCrud, {
  // 注册权限控制
  auth: (auth: string = '') => {
    // 这里进行权限查找...
    return ['add', 'edit', 'del', 'test4'].indexOf(auth) >= 0
  }
})

业务使用代码（有 test4 权限，没有 test5 权限）：

vue
<ElPlusForm v-model="formData1" v-bind="formConfig1" />

<script setup lang="ts">
import { ref, reactive } from 'vue'

let formData1 = reactive({} as any)
const formConfig1 = ref({
  column: 2,
  formDesc: {
    test1: { type: 'input', label: '字段1', required: true },
    // 直接隐藏了
    test2: { type: 'input', label: '字段2', vif: false },
    test3: { type: 'input', label: '字段3', placeholder: '字段1的值为 666 时隐藏', vif: (formData) => formData?.test1 !== '666' },
    test4: { type: 'input', label: '字段4', placeholder: '有 test4 权限', auth: 'test4' },
    test5: { type: 'input', label: '字段5', auth: 'test5' }
  } as IFormDesc
} as IFormConfig)
</script>
<ElPlusForm v-model="formData1" v-bind="formConfig1" />

<script setup lang="ts">
import { ref, reactive } from 'vue'

let formData1 = reactive({} as any)
const formConfig1 = ref({
  column: 2,
  formDesc: {
    test1: { type: 'input', label: '字段1', required: true },
    // 直接隐藏了
    test2: { type: 'input', label: '字段2', vif: false },
    test3: { type: 'input', label: '字段3', placeholder: '字段1的值为 666 时隐藏', vif: (formData) => formData?.test1 !== '666' },
    test4: { type: 'input', label: '字段4', placeholder: '有 test4 权限', auth: 'test4' },
    test5: { type: 'input', label: '字段5', auth: 'test5' }
  } as IFormDesc
} as IFormConfig)
</script>

动态属性 ​

在 formDesc 配置中，几乎所有属性都支持 响应式

以两个日期控件为例，需求：抽奖时间范围必须在活动时间范围之内，且活动开始时间不能小于今天

代码
vue
<ElPlusForm v-model="formData1" v-bind="formConfig1" />

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 获取当天0点的时间
const today = new Date().setHours(0, 0, 0, 0)

let formData2 = reactive({} as any)
const formConfig2 = ref({
  formDesc: {
    activeTime: {
      type: 'daterange',
      label: '活动时间',
      required: true,
      disabledDate: (date: Date) => date < today,
      on: { change: (formData) => (formData.luckTime = null) }
    },
    luckTime: {
      type: 'daterange',
      label: '抽奖时间',
      required: true,
      disabledDate: (date: Date) => {
        // formData2 为响应式数据
        if (formData2.activeTime) {
          return date < formData2.activeTime[0] || date > formData2.activeTime[1]
        } else {
          return date < today
        }
      }
    }
  } as IFormDesc
} as IFormConfig)
</script>
<ElPlusForm v-model="formData1" v-bind="formConfig1" />

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 获取当天0点的时间
const today = new Date().setHours(0, 0, 0, 0)

let formData2 = reactive({} as any)
const formConfig2 = ref({
  formDesc: {
    activeTime: {
      type: 'daterange',
      label: '活动时间',
      required: true,
      disabledDate: (date: Date) => date < today,
      on: { change: (formData) => (formData.luckTime = null) }
    },
    luckTime: {
      type: 'daterange',
      label: '抽奖时间',
      required: true,
      disabledDate: (date: Date) => {
        // formData2 为响应式数据
        if (formData2.activeTime) {
          return date < formData2.activeTime[0] || date > formData2.activeTime[1]
        } else {
          return date < today
        }
      }
    }
  } as IFormDesc
} as IFormConfig)
</script>