400-999-2663

开发者

资讯中心帮助中心开发者

3.0后台列表页模板

发布时间：2023-10-31 14:23 阅读：151 
<tdy-filtrate>
    <tdy-filtrate-item width=100>
            <el-select clearable v-model="xxx" placeholder="xxxxa" filterable default-first-option>
                <el-option v-for="item in options.xxxxa" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
	</tdy-filtrate-item>
	<tdy-filtrate-item>
            <el-select clearable v-model="xxx" placeholder="xxxxb" filterable default-first-option>
                <el-option v-for="item in options.xxxxb" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
    </tdy-filtrate-item>
</tdy-filtrate>
<tdy-table
    :data="data"
    :row-class-name="tableRowClassName"
    v-model:page="page"
    v-model:limit="limit"
    v-model:keyword="keyword"
    v-model:selection="selection"
    v-loading="loading"
    search-placeholder="请输入xxx"
    add-but-text="添加xx"
    @add="edit()"
    @dragSort="dragSort"
>
    <el-table-column prop="id" label="单号" />
    <el-table-column label="类型">
        <template #default="scope">
                {{scope.row.busiess_type == 'booking' ? '预约' : '项目'}}
	    </template>
    </el-table-column>
    <el-table-column label="封面">
        <template #default="scope">
            <el-image class="pic" preview-teleported :src="scope.row.pic" :preview-src-list="[scope.row.pic]"></el-image>
        </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="200">
            <template #default="scope">
                <el-button type="primary" size="small" @click="edit(scope.$index)">编辑</el-button>
                <el-button type="danger" :loading="scope.row.delLoading" size="small" @click="del(scope.$index)">删除</el-button>
                <el-switch
                    @change="status($event,scope.$index)"
                    :loading="scope.row.statusLoading"
                    class="ml-2"
                    v-model="scope.row.status" 
                    style="--el-switch-on-color: #13ce66;"
                    active-text="开"
                    inactive-text="关"
                    inline-prompt
                />
            </template>
    </el-table-column>
    <template #footer>
        <el-button v-show="!$tdy.empty(selection)" type="danger" size="small" @click="deleteSelection">批量删除</el-button>
    </template>
</tdy-table>
<tdy-drawer
    v-model="editDrawer"
    title="编辑xx"
>
    <el-form
        ref="editForm"
        label-position="top"
        v-loading="editLoading"
        :model="editData"
        scroll-to-error
        status-icon
>
        <el-form-item label="xxxxa" prop="xxxxa" :rules="[{required:true,message:'不能为空'}]">
            <el-select clearable v-model.trim="xxx" placeholder="xxxxa" filterable default-first-option>
                <el-option v-for="item in options.xxxxa" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="xxxxc" prop="xxxxc" :rules="[{required:true,message:'不能为空'}]">
            <el-input v-model.trim="editData.xxxxc" clearable placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="xxxxd" prop="xxxxd" :rules="[{required:true,message:'不能为空'}]">
            <tdy-upload-img v-model.trim="editData.xxxxd" mode="ratio" :width="200" :height="124" :maxWidth="300" />
        </el-form-item>
        <el-form-item label="xxxxe" prop="uid" :rules="[{required:true,message:'不能为空'}]">
            <tdy-select-user v-model="editData.uid" clearable placeholder="请选择"></tdy-select-user>
        </el-form-item>
        <el-button @click="submit" type="primary">提交</el-button>
    </el-form>
</tdy-drawer>
<!--
tdy-filtrate
    作用：筛选框区域
  属性：无属性
tdy-filtrate-item
    作用：筛选项区域（只能内置在 tdy-filtrate 里使用）
    属性：
        width 自定义宽度（一般不需要）
tdy-table
    作用：列表区域
    属性：
        data    列表数据（包含分页信息的对象）
        row-class-name    列表行动态样式控制方法（按需）
        v-model:page    定义分页变量（必须）
        v-model:limit    定义每页数据数量（必须）
        v-model:keyword    定义搜索关键词变量（如果不定义则不显示搜索框）
        v-model:selection    定义多选选中值数组变量（如果定义该变量，则每行前面显示复选框）
        v-loading    定义加载中状态变量
        search-placeholder    搜索框提示词（可缺省）
        add-but-text    新增数据按钮文字（可缺省）
    事件：
        add    点击新增数据按钮触发事件（如果缺省，则不显示新增数据按钮）
        dragSort    拖拽排序事件触发事件（如果缺省，则不开启拖拽排序）
el-table-column
    作用：列表行（只能内置于 tdy-table 或 el-table 中使用,延续 elementPlus 用法 https://element-plus.gitee.io/zh-CN/component/table.html）
    常用属性：
        label    列名
        prop    数据属性（字段名）
        fixed    可选值：left right，固定列在左侧或右侧
        width    列宽度
tdy-drawer
    作用：固定右侧的划出式抽屉界面（一般用于编辑或查看数据）
    属性：
        v-model    控制抽屉是否显示的变量
        title    抽屉标题（可缺省）
tdy-drawer 内部 el-form 常用属性赋值
    ref="editForm"  
    label-position="top"
    v-loading="editLoading"
    :model="editData"
    scroll-to-error
    status-icon 
-->
export default {
	data() {
		return {
			data : {},
			page : 1,
			keyword : '',
			limit : 10,
			loading : false,
			selection : [],
			editDrawer : false,
			editLoading : false,
			editIndex : null,
			editData : {},
			options : {},
		}
	},
	computed : {

	},
	watch : {
		//搜索
		keyword(){
			this.page = 1
			this.query()
		},
		//翻页
		page(){
			this.query()
		},
		//修改每页数量
		limit(){
			this.query()
		}
	},
	mounted(){
            this.$tdy.request({
                url : '/api/admin?api=xxx_options',
            }).then(res => {
                this.options = res.data
                this.query()
            })
	},
	methods : {
		//请求
		query(){
			this.loading = true
			this.$tdy.request({
				url : '/api/admin?api=xxxx',
				data : {
					keyword : this.keyword,
					page :this.page,
					limit : this.limit
				}
			}).then((res) => {
				this.data = res.data
			}).finally(()=>{
				this.loading = false
			})
		},
		//编辑
		edit(index){
			if(index !== undefined){
			    this.editData = this.$tdy.deepCopy(this.data.data[index])
				this.editIndex = index
			} else if(this.editIndex !== null) {
				this.editData = this.$options.data().editData
				this.editIndex = null
			}
			this.editDrawer = true
		},
		//提交修改
		submit(){
			this.$refs.editForm.validate().then((res)=>{
				this.editLoading = true
				this.$tdy.request({
					url : '/api/admin?api=xxxx_save',
					data : this.editData
				}).then(( res )=>{
					if(this.editIndex !== null){
						this.data.data[this.editIndex] = res.data
					} else {
						this.data.data.unshift(res.data)
						if(!this.data.total){
						    this.data.total = 1
						}
					}
					this.editDrawer = false
					this.editData = {}
				}).finally(()=>{
					this.editLoading = false
				})
			})
		},
		//拖拽排序
		dragSort(index,sort,newData){
			let item = this.data.data[index]
			this.$tdy.request({
				url : '/api/admin?api=xxxx_sort',
				data : {
					id : item.id,
					sort : sort
				}
			}).then(()=>{
				this.data.data = []
				this.$nextTick(()=>{
					this.data.data = newData
				})
				
			})
		},
		//修改状态
		status(status,index){
			let item = this.data.data[index]
			item.statusLoading = true
			this.$tdy.request({
				url : '/api/admin?api=xxxx_status',
				data : {
					id : item.id,
					status : status
				}
			}).then(()=>{
				this.data.data[index]['status'] = status
			}).finally(()=>{
				item.statusLoading = false
			})
		},
		//删除
		del(index){
			ElementPlus.ElMessageBox.confirm(
				'您确定要删除吗',
				'提示信息',
				{
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(()=>{
				let item = this.data.data[index]
				item.delLoading = true
				this.$tdy.request({
					url : '/api/admin?api=xxxx_del',
					data : {
						id : item.id
					}
				}).then(()=>{
					this.data.data.splice(index,1)
				}).finally(()=>{
					item.delLoading = false
				})
			})
		},
		//批量删除
		deleteSelection(){
			if(this.selection.length){
				ElementPlus.ElMessageBox.confirm(
					'您确定要批量删除这些内容吗',
					'提示信息',
					{
						confirmButtonText: '确认',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(()=>{
					this.loading = true
					this.$tdy.request({
						url : '/api/admin?api=xxxx_dels',
						data : {
							ids : this.selection,
						}
					}).then(()=>{
						this.selection = []
						this.query()
					}).finally(()=>{
						this.loading = false
					})
				})
			}
		},
		tableRowClassName(row,rowIndex){
			if (row.row.price < 0){
				return 'status-refund'
			}
			if (row.row.pay_type != 'online'){
			 	return 'status-offline'
			}
		},
	}
}
<?php
namespace app\xxxx\api\admin;
class xxxx
{
    /**
	 * @title 查询数据列表
	 */
	public function xxxx($params){
		$Files = new \tools\Files;
		$model_XXXX = new \app\xxxx\model\XXXX;
		$data = $model_XXXX->when(!empty($params['keyword']),function($query) use ($params){
			$query->wherelike('title','%'.$params['keyword'].'%' );
		})->order('sort','DESC')->paginate($params['limit'] ?? 10)->each(function($item) use ($Files){
			$item->pic = $Files->getObjectUrl($item->pic);
			$item->status = $item->status ? true : false;
		});
		return show($data);
	}
    /**
     * @title 筛选项
     */
    public function xxxx_options($params){
        $model_XXXXA = new \app\xxxx\model\XXXXA;
        $model_XXXXB = new \app\xxxx\model\XXXXB;
        $data = [];
        $data['xxxxa'] = $model_XXXXA->order('sort','DESC')->column('id,xxxxa');
        $data['xxxxb'] = $model_XXXXB->group('xxxxb')->column('xxxxb');
        return show($data);
    }
    /**
     * @title 新增或编辑数据
     */
    public function xxxx_save($params){
    	$Files = new \tools\Files;
        $model_XXXX = new \app\xxxx\model\XXXX;
        $params['pic'] = $Files->getObjectPath($params['pic']);
        if(!empty($params['id'])){
            $data = $model_XXXX->find($params['id']);
            if($data['pic'] != $params['pic']){
            	$Files->deleteObject($data['pic']);
            }
            $data->status = $data->status ? true : false;
            $data->save($params);
        } else {
            $data = $model_XXXX->create($params);
            $data->sort = $data->id;    //如果没有sort 字段则不需要
            $data->status = true;
            $data->save();
        }
        $data->pic = $Files->getObjectUrl($data->pic);
        return show($data,1,'操作成功');
    }
    
    /**
	 * @title 设置排序
	 */
    public function xxxx_sort($params){
	    $model_XXXX = new \app\xxxx\model\XXXX;
	    $data = $model_XXXX->find($params['id']);
	    $data->sort = $params['sort'];
	    $data->save();
	    return show([],1,'操作成功');
	}
	
	/**
	 * @title 设置开关状态
	 */
	public function xxxx_status($params){
		$model_XXXX = new \app\xxxx\model\XXXX;
		$data = $model_XXXX->find($params['id']);
		$data->status = $params['status'];
		$data->save();
		return show([],1,'操作成功');
	}
    /**
     * @title 删除数据
     */
    public function xxxx_del($params){
    	$Files = new \tools\Files;
        $model_XXXX = new \app\xxxx\model\XXXX;
        $data = $model_XXXX->find($params['id']);
        //判断数据能否被删除
        if(1){
            return show([],0,'因为XXXX不可删除');
        }
        $Files->deleteObject($data->pic);
        $data->delete();
        return show([],1,'操作成功');
    }
	/**
	 * @title 批量删除
	 */
	public function xxxx_dels($params){
	    $Files = new \tools\Files;
		$model_XXXX = new \app\xxxx\model\XXXX;
		$model_XXXX->startTrans();
		//判断是否可删除
		if(1){
			return show([],0,'因为XXXX不可删除');
		}
		foreach($params['ids'] as $id){
			$data = $model_XXXX->find($id);
			$Files->deleteObject($data->pic);
			$data->delete();
		}
		$model_XXXX->commit();
		return show([],1,'操作成功');
	}
}
.pic{
    max-width: 100px;
    max-height: 100px;
}


3.0应用目录结构

3.0 web - vue端系统变量

相关推荐更多+

国家级高新技术企业国家级高新技术企业科技型中小企业科技型中小企业

Copyright © 2024 万美（福建）云计算有限公司版权所有闽ICP备11018372号-1闽公网安备35010402350376号技术支持：万美云计算