84 lines
3.2 KiB
HTML
84 lines
3.2 KiB
HTML
|
<!--
|
|||
|
|
*Author：jxx
|
|||
|
|
*Contact：283591387@qq.com
|
|||
|
|
*业务请在@/extension/#folder/#TableName.jsx或#TableName.vue文件编写
|
|||
|
|
*新版本支持vue或【表.jsx]文件编写业务,文档见:https://v3.volcore.xyz/docs/view-grid、https://v3.volcore.xyz/docs/web
|
|||
|
|
-->
|
|||
|
|
<template>
|
|||
|
|
<view-grid ref="grid"
|
|||
|
|
:columns="columns"
|
|||
|
|
:detail="detail"
|
|||
|
|
:details="details"
|
|||
|
|
:editFormFields="editFormFields"
|
|||
|
|
:editFormOptions="editFormOptions"
|
|||
|
|
:searchFormFields="searchFormFields"
|
|||
|
|
:searchFormOptions="searchFormOptions"
|
|||
|
|
:table="table"
|
|||
|
|
:extend="extend"
|
|||
|
|
:onInit="onInit"
|
|||
|
|
:onInited="onInited"
|
|||
|
|
:searchBefore="searchBefore"
|
|||
|
|
:searchAfter="searchAfter"
|
|||
|
|
:addBefore="addBefore"
|
|||
|
|
:updateBefore="updateBefore"
|
|||
|
|
:rowClick="rowClick"
|
|||
|
|
:modelOpenBefore="modelOpenBefore"
|
|||
|
|
:modelOpenAfter="modelOpenAfter">
|
|||
|
|
<!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
|
|||
|
|
<template #gridHeader>
|
|||
|
|
</template>
|
|||
|
|
</view-grid>
|
|||
|
|
</template>
|
|||
|
|
<script setup lang="jsx">
|
|||
|
|
import extend from "@/extension/#folder/#TableName.jsx";
|
|||
|
|
import viewOptions from './#TableName/options.js'
|
|||
|
|
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
|
|||
|
|
const grid = ref(null);
|
|||
|
|
const { proxy } = getCurrentInstance()
|
|||
|
|
//http请求，proxy.http.post/get
|
|||
|
|
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())
|
|||
|
|
|
|||
|
|
let gridRef;//对应[表.jsx]文件中this.使用方式一样
|
|||
|
|
//生成对象属性初始化
|
|||
|
|
const onInit = async ($vm) => {
|
|||
|
|
gridRef = $vm;
|
|||
|
|
//与jsx中的this.xx使用一样，只需将this.xx改为gridRef.xx
|
|||
|
|
//更多属性见：https://v3.volcore.xyz/docs/view-grid
|
|||
|
|
}
|
|||
|
|
//生成对象属性初始化后,操作明细表配置用到
|
|||
|
|
const onInited = async () => {
|
|||
|
|
}
|
|||
|
|
const searchBefore = async (param) => {
|
|||
|
|
//界面查询前,可以给param.wheres添加查询参数
|
|||
|
|
//返回false，则不会执行查询
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
const searchAfter = async (rows, result) => {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
const addBefore = async (formData) => {
|
|||
|
|
//新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
const updateBefore = async (formData) => {
|
|||
|
|
//编辑保存前formData为对象，包括明细表、删除行的Id
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
const rowClick = ({ row, column, event }) => {
|
|||
|
|
//查询界面点击行事件
|
|||
|
|
// grid.value.toggleRowSelection(row); //单击行时选中当前行;
|
|||
|
|
}
|
|||
|
|
const modelOpenBefore = async (row) => {//弹出框打开后方法
|
|||
|
|
return true;//返回false，不会打开弹出框
|
|||
|
|
}
|
|||
|
|
const modelOpenAfter = (row) => {
|
|||
|
|
//弹出框打开后方法,设置表单默认值,按钮操作等
|
|||
|
|
}
|
|||
|
|
//监听表单输入，做实时计算
|
|||
|
|
//watch(() => editFormFields.字段,(newValue, oldValue) => { })
|
|||
|
|
//对外暴露数据
|
|||
|
|
defineExpose({})
|
|||
|
|
</script>
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
</style>
|