角色表单

后端

INFO

在线案例角色 CURD

namespace Modules\Common\Tables;


use CatchForm\Components\Rules\Control;
use CatchForm\Form;
use CatchForm\Table\Table;
use Modules\Permissions\Enums\DataRange;
use Modules\Permissions\Enums\MenuType;
use Modules\Permissions\Models\Departments;
use Modules\Permissions\Models\Roles;

class Role extends Dynamic
{
    public function table()
    {
        return Table::make('permissions/roles')->columns(function (Table $table) {
            $table->column('角色名称', 'role_name');

            $table->column('角色标识', 'identify');

            // 角色描述
            $table->column('角色描述', 'description');

            // 创建时间
            $table->column('创建时间', 'created_at');

            $table->column('操作')->type('operate');
        })->dialog(800)->rowKey()
            ->search(function (Table $table){
               $table->input('角色名称', 'roles.role_name');

                $table->input('角色标识', 'identify');
            });

    }

    protected function form()
    {
        return Form::make(function (Form $form) {
            $form->treeSelect('parent_id', '父级角色')->data(
                Roles::query()->get(['id as value', 'role_name as label', 'parent_id'])->toTree(id: 'value')->toArray()
            )->class('w-full')->emitChange()->checkStrictly(true);

            $form->text('role_name', '角色名称ssss')->maxlength(30)->showWordLimit()->required();

            $form->text('identify', '角色标识')->maxlength(30)->showWordLimit()->required();

            $form->textarea('description', '角色描述')->maxlength(200)->showWordLimit();

            $form->select('data_range', '数据权限')->options(DataRange::class)
                ->whenEqual(DataRange::Personal_Choose->value(), function (Control $control){
                        $control->hide('departments');
                });

            $form->treeSelect('departments', '自定义权限')->data(
                Departments::query()->get()->toTree()->toArray()
            )->toProps([
                'label' => 'department_name',
                'value' => 'id'
            ])->showCheckbox()->required()->multiple()->valueKey('id');

            $form->custom('permissions', '权限')->type('div')
                ->subs(function (Form $form){
                    $form->tree('permissions', '')->data([])->toProps([
                        'label' => 'permission_name',
                        'value' => 'id'
                    ])->showCheckbox()->loadData('permissionsOption', 'props.data')->class('w-full');
                })->class(['w-full h-40 pt-2 pl-2 overflow-auto border border-gray-300 rounded']);
            /**
            $form->tree('permissions', '权限')->data(
                \Modules\Permissions\Models\Permissions::query()->get(['id', 'permission_name', 'parent_id'])->toTree()
            )->toProps([
                    'label' => 'permission_name',
                    'value' => 'id'
            ])->showCheckbox(true);*/
        });
    }
}

前端

列表

// index.vue
<template>
  <div v-loading="loading" class="min-h-96">
    <catch-table :paginate="false" v-bind="table" v-if="!loading">
      <template #dialog="row">
        <Create :config="{ ...form, primary: row?.id }" />
      </template>
    </catch-table>
  </div>
</template>

<script lang="ts" setup>
import Create from './create.vue'
import { useDymaic } from '@/composables/useDymaic'
const { table, form, loading } = useDymaic('dynamic/role')
</script>

表单

// create.vue
<template>
  <!--<form-create v-model="formData" :rule="rule" v-model:api="formApi" :option="options" ref="form"> </form-create>-->
  <catch-form ref="formRef" :config="config" :beforeSubmit="beforeSubmit" :afterSubmit="afterSubmit" />
</template>

<script lang="ts" setup>
// @ts-nocheck
import http from '@/support/http'
import { onMounted, ref, beforeMount, watch } from 'vue'
defineProps({
  config: Object
})
const formRef = ref()
const form = formRef.value?.getForm()

// 监听模块组件的 change 事件
const changeEvent = () => {
  const form = formRef.value.getForm()
  form.on('change', (field, value) => {
    if (field === 'parent_id') {
      getPermissions(value)
    }
  })
  getPermissions()
}

// 提交前的钩子
const beforeSubmit = (formData) => {
  formData.parent_id = formData.parent_id[0]
  return formData
}

// 提交后的钩子
const afterSubmit = () => {
  formRef.value.resetExceptFields('type')
  formRef.value.setFieldValue('type', 1)
}

const getPermissions = async (value: number = 0) => {
  const form = formRef.value.getForm()
  if (value) {
    http.get('permissions/roles/' + value, { from: 'parent_role' }).then((r) => {
      form.setData('permissionsOption', r.data.data.permissions)
    })
  } else {
    http.get('permissions/permissions', { from: 'role' }).then((r) => {
      form.setData('permissionsOption', r.data.data)
    })
  }
}
onMounted(() => {
  changeEvent()
})
</script>