web-template-vue3-js/src/views/system/role/parts/form.vue

<template>
  <el-form label-position="left" label-width="100px">
    <el-form-item :label="$t('pages.role.name')">
      <el-input v-model="form.name" :placeholder="$t('pages.role.namePh')"></el-input>
    </el-form-item>
    <el-form-item :label="$t('pages.role.code')">
      <el-input v-model="form.code" :placeholder="$t('pages.role.codePh')"></el-input>
    </el-form-item>
    <el-form-item :label="$t('pages.role.is_use')">
      <el-radio-group v-model="form.is_use">
        <el-radio label="0">{{ $t('common.is_use_use') }}</el-radio>
        <el-radio label="1">{{ $t('common.is_use_notUse') }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item :label="$t('pages.role.brief')">
      <el-input v-model="form.brief" type="textarea" :rows="3"></el-input>
    </el-form-item>
    <el-form-item :label="$t('pages.role.menu')">
      <el-tree ref="roleTree" :data="getMenus()" node-key="code" default-expand-all show-checkbox @check-change="seletNode">
        <template #default="{ data }">
          <span>{{ data.name }}</span>
        </template>
      </el-tree>
    </el-form-item>
    <el-row justify="center" style="text-align: center">
      <el-col :span="6">
        <el-button @click="onSubmit" type="primary">{{ $t('common.save') }}</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
const form = inject('form')
const menuList = inject('menuList')
const onSubmit = inject('onSubmit')
const roleTree = ref()
const getMenus = () => {
  const list = toRaw(menuList.value)
  const result = dealMenu(list)
  return result
}
onMounted(() => {
  const treeSelected = toRaw(form.value.menu)
  for (const key of treeSelected) {
    roleTree.value.setChecked(key, true)
  }
  console.log('init')
})
/**
 * 处理菜单:将目录,菜单,子页面,权限统一转成 {name,code}形式,code为唯一值
 * 目录,菜单,子页面:
 *  route_name是唯一的,所以使用route_name作为code
 * 权限:
 *  code并不是唯一,但是加上route_name就是唯一的
 * @param {Array} list 菜单列表
 * @param {Array} route_names 将上级的route_name放入此数组中,在转为权限数据时,拼接成code
 */
const dealMenu = (list, route_names = []) => {
  const result = []
  for (const i of list) {
    const { name, config = [], children = [], route_name } = i
    const thisRouteNameArr = [...route_names, route_name]
    const obj = { name, code: thisRouteNameArr.join('.') }
    if (route_name === 'home') obj.disabled = true
    const nextList = []
    // 先处理该页面配置
    if (config.length >= 0) {
      // 如果有配置: 菜单,子页面两种情况,都统一处理
      for (const c of config) {
        const codeRouteNameArr = [...thisRouteNameArr]
        codeRouteNameArr.push(c.code)
        const cobj = { name: c.zh, code: codeRouteNameArr.join('.') }
        nextList.push(cobj)
      }
    }
    // 再处理菜单/子页面
    if (children.length > 0) {
      const nextRouteNames = [...thisRouteNameArr]
      const midResult = dealMenu(children, nextRouteNames)
      nextList.push(...midResult)
    }
    obj.children = nextList
    result.push(obj)
  }
  return result
}

/**
 * 选择节点
 */
const seletNode = () => {
  if (!form.value.menu) {
    form.value.menu = []
  }
  const selected = roleTree.value.getCheckedNodes(false, true)
  const result = []
  for (const s of selected) {
    const rs = toRaw(s)
    result.push(rs.code)
  }
  form.value.menu = result
}
</script>
<style scoped></style>