[BD2.0] 下拉选框使用指南

一.普通下拉框

• 1.CURD代码生成时, 生成为选择下拉框

• 2.添加下拉选框 (必须加上render)

{ label: '状态', prop: 'status', render: 'tag', replaceValue: { '0': '正常', '1': '已停用', '2':'已注销'} }

• 3.将状态封装为配置 (必须加上render)
  • 创建目录web\src\config\status
  • 添加文件empUserStatus.ts

import empUserStatus from '/@/config/status/empUserStatus'
{ label: t('empUser.status'), prop: 'status', render: 'tag', replaceValue: empUserStatus }

二.远程下拉

• 1.CURD代码生成

1.前端代码 (重点)

• 1.1 首页 : show:false 关闭筛选字段在表格列的显示, operator: false关闭表格列在筛选中的显示

// web\src\api\controllerUrls.ts
// 导入user管理的控制器Url-- 1.0版本的文件
import { goodsCategory } from '/@/api/controllerUrls' 

{ label: '分类', prop: 'category_id', comSearchRender: 'remoteSelect', show:false, remote: {
                pk: 'id',
                field: 'title',
                remoteUrl: goodsCategory +'index'            
            }},
{ label: t('goods.category__title'), prop: 'category.title', operator: false },

• 1.2 表单(表单验证暂时取消掉, 这里也可以导入URL)

<FormItem 
:label="t('goods.category_id')" 
type="remoteSelect" 
v-model="baTable.form.items!.category_id"
prop="category_id"
:input-attr="{ pk: 'ba_goods_category.id', field: 'title', 'remote-url': '/admin/GoodsCategory/index' }"
/>

以下部分其实是关联表数据(获取category__title,也就是分类名), 而非真正的远程下拉, 真正的远程下拉是上面前端部分的代码

2.1 后端控制器

namespace app\admin\controller;
use Throwable;
use app\common\controller\Backend;

class Goods extends Backend
{

    protected object $model;
    protected array|string $preExcludeFields = ['id'];
    protected array $withJoinTable = ['category', 'seller'];
    protected string|array $quickSearchField = ['id', 'sn'];

    public function initialize(): void
    {
        parent::initialize();
        $this->model = new \app\admin\model\Goods;
    }

    public function index(): void
    {
        if ($this->request->param('select')) {
            $this->select();
        }

        list($where, $alias, $limit, $order) = $this->queryBuilder();
        $res = $this->model
            ->withJoin($this->withJoinTable, $this->withJoinType)
            ->alias($alias)
            ->where($where)
            ->order($order)
            ->paginate($limit);
        
        // 此方法用于过滤显示的字段, 否则ID什么之类的都会暴露
        $res->visible(['category' => ['title'], 'seller' => ['username']]);
        
       /*
         1.此处打印$res->items(), 关联模型暴露的字段也会显示, 但是实际接口返回没有
         2.远程下拉的关联数据的字段, 在模型中配置
       */
        $this->success('', [
            'list'   => $res->items(),
            'total'  => $res->total(),
            'remark' => get_route_remark(),
        ]);
    }
}

2.2 后端模型 (使用关联模型实现, 查询数据)

<?php

namespace app\admin\model;
use think\Model;

class Goods extends Model
{
    // 表名
    protected $name = 'goods';
    protected $autoWriteTimestamp = false;
    
    // 商品分类分类(同时也是返回给前端的字段名)
    public function category(): \think\model\relation\BelongsTo
    {
        return $this->belongsTo(\app\admin\model\GoodsCategory::class, 'category_id', 'id');
    }

    public function seller(): \think\model\relation\BelongsTo
    {
        return $this->belongsTo(\app\admin\model\Admin::class, 'seller_id', 'id');
    }
}

• 接口返回数据 (省略..)

{
    "code": 1,
    "data": {
        "list": [
            {
                "id": 12345,
                "sn": "DEMO00001",
                "status": 1,
                "type": 1,
                "title": "iPhone 15 pro max",
                "new_product_id": 123,
                "category": {
                    "title": "手机"
                },
                "seller": null
            }
        ],
        "total": 1,
    }
}

三.其他

• 1.开关
  • 值为0=>关闭, 1=>开启
  • 页面上点击切换开关, 使用的是edit接口
  • 对应的筛选是下拉

{ label: t('goods.is_open'), prop: 'is_open', render:'switch' },