server/static/view/templates/index.vue.twig

<template>
    <pi-table ref="tableRef" :apiObj="api.{{ table_name }}.list" @selection-change="selectionChange">
{% if query_fields|length > 2 %}
        <template #extend>
{% for field in query_fields %}
{% if loop.index > 2 %}
{% if field.html_type == 'select' or field.html_type == 'radio' or field.html_type == 'checkbox' %}
            <el-select v-model="search.{{ field.php_field }}" style="width: 200px;" placeholder="{{ field.column_comment }}" clearable>
                <el-option label="" value=""></el-option>
            </el-select>
{% elseif field.html_type == 'date' %}
            <el-date-picker v-model="search.{{ field.php_field }}" type="daterange" range-separator="-" start-placeholder="{{ field.column_comment }}开始时间"
                            value-format="YYYY-MM-DD" format="YYYY-MM-DD" end-placeholder="{{ field.column_comment }}结束时间" style="width: 360px;"/>
{% elseif field.html_type == 'datetime' %}
            <el-date-picker v-model="search.{{ field.php_field }}" type="datetimerange" range-separator="-" start-placeholder="{{ field.column_comment }}开始时间"
                            value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" end-placeholder="{{ field.column_comment }}结束时间" style="width: 360px;"/>
{% else %}
            <el-input v-model="search.{{ field.php_field }}" placeholder="{{ field.column_comment }}" clearable style="width: 200px;"></el-input>
{% endif %}
{% endif %}
{% endfor %}
        </template>
{% endif %}
        <template #do>
            <el-button v-auth="'{{ table_name }}:add'" type="primary" icon="el-icon-plus" @click="add"></el-button>
            <el-button v-auth="'{{ table_name }}:edit'" type="success" icon="el-icon-edit" @click="edit"
                       :disabled="selection.length!==1"></el-button>
            <el-button v-auth="'{{ table_name }}:del'" type="danger" plain icon="el-icon-delete"
                       :disabled="selection.length===0" @click="batch_del"></el-button>
        </template>
        <template #search>
{% if query_fields|length > 2 %}
{% for field in query_fields %}
{% if loop.index <= 2 %}
{% if field.html_type == 'select' or field.html_type == 'radio' or field.html_type == 'checkbox' %}
            <el-select v-model="search.{{ field.php_field }}" style="width: 200px;" placeholder="{{ field.column_comment }}" clearable>
                <el-option label="" value=""></el-option>
            </el-select>
{% elseif field.html_type == 'date' %}
            <el-date-picker v-model="search.{{ field.php_field }}" type="daterange" range-separator="-" start-placeholder="{{ field.column_comment }}开始时间"
                        value-format="YYYY-MM-DD" format="YYYY-MM-DD" end-placeholder="{{ field.column_comment }}结束时间" style="width: 360px;"/>
{% elseif field.html_type == 'datetime' %}
            <el-date-picker v-model="search.{{ field.php_field }}" type="datetimerange" range-separator="-" start-placeholder="{{ field.column_comment }}开始时间"
                        value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" end-placeholder="{{ field.column_comment }}结束时间" style="width: 360px;"/>
{% else %}
            <el-input v-model="search.{{ field.php_field }}" placeholder="{{ field.column_comment }}" clearable style="width: 200px;"></el-input>
{% endif %}
{% endif %}
{% endfor %}
{% else %}
{% for field in query_fields %}
{% if field.html_type == 'select' or field.html_type == 'radio' or field.html_type == 'checkbox' %}
            <el-select v-model="search.{{ field.php_field }}" style="width: 200px;" placeholder="{{ field.column_comment }}" clearable>
                <el-option label="" value=""></el-option>
            </el-select>
{% elseif field.html_type == 'date' %}
            <el-date-picker v-model="search.{{ field.php_field }}" type="daterange" range-separator="-" start-placeholder="{{ field.column_comment }}开始时间"
                value-format="YYYY-MM-DD" format="YYYY-MM-DD" end-placeholder="{{ field.column_comment }}结束时间" style="width: 360px;"/>
{% elseif field.html_type == 'datetime' %}
            <el-date-picker v-model="search.{{ field.php_field }}" type="datetimerange" range-separator="-" start-placeholder="{{ field.column_comment }}开始时间"
                value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
                end-placeholder="{{ field.column_comment }}结束时间" style="width: 360px;"/>
{% else %}
            <el-input v-model="search.{{ field.php_field }}" placeholder="{{ field.column_comment }}" clearable style="width: 200px;"></el-input>
{% endif %}
{% endfor %}
{% endif %}
            <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
        </template>
        <el-table-column type="selection" width="50"></el-table-column>
{% for field in list_fields %}
            <el-table-column label="{{ field.column_comment }}" prop="{{ field.php_field }}"></el-table-column>
{% endfor %}
        <el-table-column label="操作" fixed="right" align="right" width="170">
            <template #default="scope">
                <el-button-group>
                    <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看
                    </el-button>
                    <el-button v-auth="'{{ table_name }}:edit'" text type="success" size="small"
                               @click="table_edit(scope.row, scope.$index)">编辑
                    </el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                        <template #reference>
                            <el-button v-auth="'{{ table_name }}:del'" text type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </el-button-group>
            </template>
        </el-table-column>
    </pi-table>
    <save-dialog v-if="dialogShow" ref="dialogRef" @success="tableRef.refresh()" @closed="dialogShow=false"></save-dialog>
</template>

<script setup>
    import saveDialog from './save'
    import api from "@/api/index";
    import {getCurrentInstance, nextTick, ref} from "vue";

    defineOptions({
        name: ""
    })

    const {proxy} = getCurrentInstance()
    const tableRef = ref(null)
    const dialogRef = ref(null)

    let dialogShow = ref(false)
    let selection = ref([])
    let search = ref({
    {% for field in query_fields %}
        {{ field.php_field }}: null,
    {% endfor %}
    })

    //添加
    function add() {
        dialogShow.value = true
        nextTick(() => {
            dialogRef.value.open()
        })
    }

    //编辑
    async function table_edit(row) {
        dialogShow.value = true
        nextTick(() => {
            dialogRef.value.open('edit', row)
        })
    }

    //查看
    async function table_show(row) {
        dialogShow.value = true
        nextTick(() => {
            dialogRef.value.open('show', row)
        })
    }

    //删除
    async function table_del(row) {
        const loading = proxy.$loading();
        const res = await api.{{ table_name }}.del({ids: [row.{{ table_name }}_id]});
        tableRef.value.refresh()
        loading.close();
        proxy.$message.success(res.msg)
    }

    //批量删除
    async function batch_del() {
        proxy.$confirm(`确定删除选中的 ${selection.value.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
            type: 'warning'
        }).then(async () => {
            const loading = proxy.$loading();
            const res = await api.{{ table_name }}.del({ids: selection.value.map(item => item.{{ table_name }}_id)});
            tableRef.value.refresh()
            loading.close();
            proxy.$message.success(res.msg)
        })
    }

    //表格选择后回调事件
    function selectionChange(e) {
        selection.value = e;
    }

    //搜索
    function upsearch() {
        tableRef.value.upData(search.value)
    }
</script>