214 lines
4.4 KiB
Vue
214 lines
4.4 KiB
Vue
<template>
|
|
<div class="custom-page">
|
|
<avue-crud
|
|
ref="crudRef"
|
|
v-model="state.form"
|
|
v-model:search="state.query"
|
|
v-model:page="state.page"
|
|
:table-loading="state.loading"
|
|
:data="state.data"
|
|
:option="state.options"
|
|
@refresh-change="refreshChange"
|
|
@search-reset="searchChange"
|
|
@search-change="searchChange"
|
|
@row-save="rowSave"
|
|
@row-update="rowUpdate"
|
|
@row-del="rowDel"
|
|
>
|
|
<template #menu-left>
|
|
<el-button type="danger" icon="delete" @click="onDel">批量删除</el-button>
|
|
</template>
|
|
|
|
<template #menu="scope">
|
|
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
|
</template>
|
|
</avue-crud>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { useApp } from '@/hooks';
|
|
import { sleep } from '@/utils';
|
|
import { CRUD_OPTIONS } from '@/config';
|
|
|
|
import Mock from 'mockjs';
|
|
const res = Mock.mock({
|
|
'data|20': [
|
|
{
|
|
id: '@increment(100000)',
|
|
name: '@ctitle(5,10)',
|
|
shop: '@ctitle(10,30)',
|
|
buyTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
|
avalibleTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
|
createdTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
|
},
|
|
],
|
|
});
|
|
|
|
const app = useApp();
|
|
const crudRef = ref(null);
|
|
const state = reactive({
|
|
loading: false,
|
|
query: {},
|
|
form: {},
|
|
selection: [],
|
|
options: {
|
|
...CRUD_OPTIONS,
|
|
addBtnText: '新增档案',
|
|
column: [
|
|
{
|
|
label: '种子代码',
|
|
prop: 'id',
|
|
fixed: true,
|
|
display: false,
|
|
},
|
|
{
|
|
label: '种子名称',
|
|
prop: 'name',
|
|
fixed: true,
|
|
search: true,
|
|
rules: {
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: 'blur',
|
|
},
|
|
},
|
|
{
|
|
label: '供应商',
|
|
prop: 'shop',
|
|
search: true,
|
|
with: 300,
|
|
overHidden: true,
|
|
rules: {
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: 'blur',
|
|
},
|
|
},
|
|
{
|
|
label: '采购日期',
|
|
prop: 'buyTime',
|
|
type: 'datetime',
|
|
format: 'YYYY-MM-DD HH:mm:ss',
|
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
width: 200,
|
|
rules: {
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: 'blur',
|
|
},
|
|
},
|
|
{
|
|
label: '有效日期',
|
|
prop: 'avalibleTime',
|
|
type: 'datetime',
|
|
format: 'YYYY-MM-DD HH:mm:ss',
|
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
width: 200,
|
|
rules: {
|
|
required: true,
|
|
message: '请输入',
|
|
trigger: 'blur',
|
|
},
|
|
},
|
|
{
|
|
label: '创建日期',
|
|
prop: 'createdTime',
|
|
type: 'datetime',
|
|
format: 'YYYY-MM-DD HH:mm:ss',
|
|
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
width: 200,
|
|
display: false,
|
|
},
|
|
],
|
|
actions: [
|
|
{
|
|
name: '查看',
|
|
icon: 'view',
|
|
event: ({ row }) => rowView(row),
|
|
},
|
|
{
|
|
name: '编辑',
|
|
icon: 'edit',
|
|
event: ({ row }) => rowEdit(row),
|
|
},
|
|
{
|
|
type: 'danger',
|
|
name: '删除',
|
|
icon: 'delete',
|
|
event: ({ row }) => rowDel(row),
|
|
},
|
|
],
|
|
},
|
|
page: {
|
|
total: 0,
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
},
|
|
data: [],
|
|
});
|
|
|
|
const loadData = async () => {
|
|
state.loading = true;
|
|
await sleep(500);
|
|
state.data = res.data;
|
|
state.page = {
|
|
total: 20,
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
};
|
|
state.loading = false;
|
|
};
|
|
|
|
loadData();
|
|
|
|
// 搜索
|
|
const searchChange = (params, done) => {
|
|
console.log('search==', params);
|
|
if (done) done();
|
|
state.query = params;
|
|
state.page.currentPage = 1;
|
|
loadData();
|
|
};
|
|
|
|
// 刷新
|
|
const refreshChange = () => {
|
|
loadData();
|
|
};
|
|
|
|
// 查看
|
|
const rowView = (row) => {
|
|
crudRef.value.rowView(row);
|
|
};
|
|
|
|
// 新增
|
|
const rowSave = (row, done, loading) => {
|
|
console.log('add=', row);
|
|
};
|
|
|
|
// 编辑
|
|
const rowEdit = (row) => {
|
|
crudRef.value.rowEdit(row);
|
|
};
|
|
const rowUpdate = (row, index, done, loading) => {
|
|
// loading.value = true;
|
|
console.log('update=', row);
|
|
};
|
|
|
|
// 删除
|
|
const rowDel = (row, index, done) => {
|
|
app
|
|
.$confirm(`删除后信息将不可查看，确认要删除该条信息内容吗？`, '确定删除', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
})
|
|
.then(() => {
|
|
console.log('del=', row);
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
|
|
const onDel = () => {};
|
|
</script>
|