eco-boot-web/src/views/system/role/components/RoleDrawer.vue

<template>
  <ElDrawer ref="elDrawerRef" v-model="drawerVisible" :title="drawerProps.title" v-bind="$attrs" destroy-on-close>
    <template #header="scope">
      <slot name="header" v-bind="scope">
        <div style="display: flex">
          <slot name="title">
            <span style="flex: 1">{{ drawerProps.title }}</span>
          </slot>
        </div>
      </slot>
    </template>

    <el-form ref="ruleFormRef" label-width="100px" label-suffix=" :" :rules="rules" :model="drawerProps.row" @submit.enter.prevent="handleConfirm">
      <el-form-item label="参数名称" prop="name">
        <el-input v-model="drawerProps.row.name" placeholder="填写参数名称" clearable />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="drawerProps.row.code" :disabled="drawerProps.row.roleId === '1'" placeholder="填写权限标识" clearable />
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-input-number v-model="drawerProps.row.orderNum" :precision="0" :min="1" :max="999999" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="drawerProps.row.status">
          <el-radio-button :value="item.dictValue" v-for="(item, index) in commonStatus" :key="index" :label="item.dictLabel" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="drawerProps.row.remark" placeholder="请填写备注" clearable />
      </el-form-item>
    </el-form>

    <template #footer>
      <slot name="footer">
        <ElButton @click="drawerVisible = false">取 消</ElButton>
        <ElButton type="primary" @click="handleConfirm()">确 定</ElButton>
      </slot>
    </template>
  </ElDrawer>
</template>

<script setup lang="ts" name="RoleForm">
import { RoleBO } from '@/api/interface/system/role'
import { ResultEnum } from '@/enums/HttpEnum'
import { useDictOptions } from '@/hooks'

const commonStatus = useDictOptions('COMMON_STATUS')

import { FormInstance } from 'element-plus'
const rules = reactive({
  name: [{ required: true, message: '请填写角色名称' }],
  code: [{ required: true, message: '请填权限标识' }],
  orderNum: [{ required: true, message: '排序不能为空' }],
  status: [{ required: true, message: '状态不能为空' }]
})

interface EcoDrawerProps {
  api?: (params: any) => Promise<any> // 调用接口
  title: string // 顶部标题
  isView: boolean
  row: Partial<RoleBO>
  getTableList?: () => void
}

const drawerVisible = ref(false)
const drawerProps = ref<EcoDrawerProps>({
  isView: false,
  title: '',
  row: {}
})

// emit
const emit = defineEmits(['submit'])

// 接收父组件传过来的参数
const acceptParams = (params: EcoDrawerProps) => {
  drawerProps.value = params
  drawerVisible.value = true
  drawerProps.value.row.status = drawerProps.value.row.status || '1'
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>()
const handleConfirm = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return
    try {
      const { code } = await drawerProps.value.api!(drawerProps.value.row)
      if (code == ResultEnum.SUCCESS) {
        ElMessage.success({ message: `${drawerProps.value.title}成功！` })
        drawerProps.value.getTableList!()
        emit('submit')
        drawerVisible.value = false
      }
    } catch (error) {
      console.log(error)
    }
  })
}

defineExpose({
  acceptParams
})
</script>

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