1.在封装API中定义URL
// remoteMenuUrl
export function remoteMenuUrl() {
const adminInfo = useAdminInfo()
let url = getUrl() + '/admin/api/remoteMenuUrl' + '?server=1' + '&batoken=' + adminInfo.getToken()
return url;
}
2.在新增表单中使用
<FormItem
type="remoteSelect"
prop="id"
:label="菜单"
v-model="baTable.form.items!.id"
:input-attr="{
pk: 'menu_rule.id',
field: 'title',
'remote-url': '/admin/api/remoteMenuUrl' ,
onChange: getAdd,
}"
/>
import { remoteMenuUrl } from '/@/api/backend/adminapi'
let remoteUrl = remoteMenuUrl()
后端返回数据
{
"code": 1,
"msg": "",
"time": 1684976928,
"data": {
"list": [
{
"id": 1,
"title": "待审核"
}
],
"total": 12
}
}
总结:
重点是: pk: 'menu_rule.id' 需要对应数据表中的字段
后端换成树形目录数据
/**
* 获取远程下拉数据(菜单树形目录)
*/
public function remoteMenuUrl()
{
// 读取用户组所有权限规则
$where = [
['type', 'in', ['menu_dir', 'menu']],
['status', '=', '1']
];
$model = new \app\admin\model\MenuRule();
$rules = $model
->where($where)
->order('weigh desc,id asc')
->select()->toArray();
$data = $this->tree->assembleChild($rules);
$data = $this->tree->assembleTree($this->tree->getTreeArray($data, 'title'));
$this->success('', [
'options' => $data
]);
}