291 lines
7.6 KiB
Vue
291 lines
7.6 KiB
Vue
<template>
|
||
<div class="custom-page">
|
||
<!-- 替换为 avue-crud 表格区域 -->
|
||
<avue-crud ref="crudRef" v-model:data="tableData" v-model:page="pagination" :option="options">
|
||
<template #search>
|
||
<!-- 搜索区域 -->
|
||
<div class="search-area">
|
||
<el-input v-model="searchForm.name" placeholder="投入品名称" style="width: 200px; margin-right: 10px"></el-input>
|
||
<el-button type="primary" @click="searchData">搜索</el-button>
|
||
<el-button @click="resetSearch">重置</el-button>
|
||
</div>
|
||
<div class="search-tabs">
|
||
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
|
||
<el-tab-pane label="全部" name="all" />
|
||
<el-tab-pane label="地膜" name="地膜" />
|
||
<el-tab-pane label="滴灌带" name="滴灌带" />
|
||
<el-tab-pane label="防草布" name="防草布" />
|
||
</el-tabs>
|
||
</div>
|
||
</template>
|
||
<template #menu-left><el-button type="primary" icon="Plus" @click="openDialog">新增</el-button></template>
|
||
<template #menu="scope">
|
||
<custom-table-operate :actions="options.actions" :data="scope" />
|
||
</template>
|
||
</avue-crud>
|
||
|
||
<!-- 新增/编辑弹窗 -->
|
||
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑投入品' : '新增投入品'" width="600px">
|
||
<el-form ref="formRef" :model="formData" label-width="100px" class="custom-form">
|
||
<el-form-item label="名称" prop="name">
|
||
<el-input v-model="formData.name" class="custom-input"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="规格" prop="specification">
|
||
<el-input v-model="formData.specification" class="custom-input"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="厂家" prop="manufacturer">
|
||
<el-input v-model="formData.manufacturer" class="custom-input"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="formData.remark" class="custom-input" type="textarea" :rows="3"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer custom-footer">
|
||
<el-button class="custom-button" @click="dialogVisible = false">取消</el-button>
|
||
<el-button type="primary" class="custom-button" @click="submitForm">确定</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed } from 'vue';
|
||
import { ElMessage } from 'element-plus';
|
||
import { CRUD_OPTIONS, customRules } from '@/config';
|
||
|
||
// 写死的初始数据，将括号内容提取到备注列
|
||
const initialTableData = [
|
||
{
|
||
id: 1,
|
||
name: '甘蔗专用全生物降解地膜',
|
||
specification: '厚度0.008mm-0.012mm，宽度800mm-1200mm',
|
||
manufacturer: '耿马特斯郎全生物降解材料有限公司',
|
||
remark: '可根据甘蔗种植需求定制',
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '华丰牌加厚地膜',
|
||
specification: '厚度≥0.01mm，宽度75cm-140cm',
|
||
manufacturer: '河南省银丰塑料有限公司',
|
||
remark: '符合新国标',
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '高速贴片式滴灌带',
|
||
specification: '管径16mm-20mm，出水流量：2.0L/h、2.7L/h',
|
||
manufacturer: '库车拉依苏裕丰农民专业合作社（新疆）',
|
||
remark: '多种规格可选',
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '再生滴灌带',
|
||
specification: '500米/卷',
|
||
manufacturer: '宁夏佳稼旺生态农业科技有限公司',
|
||
remark: '以旧换新，50公斤废旧滴灌带兑换500米新带',
|
||
},
|
||
{
|
||
id: 5,
|
||
name: '防草布（PP编织）',
|
||
specification: '宽度1.2m，克重90g/㎡',
|
||
manufacturer: '昆明绿保塑业有限公司',
|
||
remark: '用于果园/经济作物抑草',
|
||
},
|
||
];
|
||
|
||
// 搜索表单
|
||
const searchForm = reactive({
|
||
name: '',
|
||
});
|
||
|
||
// avue-crud 实例引用
|
||
const crudRef = ref(null);
|
||
const activeTab = ref('all');
|
||
|
||
// 表格数据
|
||
const tableData = ref([...initialTableData]);
|
||
|
||
// 分页信息
|
||
const pagination = reactive({
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
total: initialTableData.length,
|
||
});
|
||
|
||
// avue-crud 配置项
|
||
const options = reactive({
|
||
...CRUD_OPTIONS,
|
||
addBtn: false,
|
||
searchBtn: false,
|
||
emptyBtn: false,
|
||
column: [
|
||
{
|
||
label: '名称',
|
||
prop: 'name',
|
||
},
|
||
{
|
||
label: '规格',
|
||
prop: 'specification',
|
||
},
|
||
{
|
||
label: '厂家',
|
||
prop: 'manufacturer',
|
||
},
|
||
{
|
||
label: '备注',
|
||
prop: 'remark',
|
||
},
|
||
],
|
||
actions: [
|
||
{
|
||
name: '编辑',
|
||
icon: 'edit',
|
||
event: ({ row }) => editData(row),
|
||
},
|
||
{
|
||
type: 'danger',
|
||
name: '删除',
|
||
icon: 'delete',
|
||
event: ({ row }) => deleteData(row.id),
|
||
},
|
||
],
|
||
});
|
||
const handleTabChange = (tab) => {
|
||
if (tab.props.name === 'all') {
|
||
// 显示全部数据
|
||
tableData.value = [...initialTableData];
|
||
} else {
|
||
// 根据标签名称过滤数据
|
||
tableData.value = initialTableData.filter((item) => item.name.includes(tab.props.name) || item.remark.includes(tab.props.name));
|
||
}
|
||
// 重置分页
|
||
pagination.currentPage = 1;
|
||
pagination.total = tableData.value.length;
|
||
};
|
||
// 弹窗相关
|
||
const dialogVisible = ref(false);
|
||
const isEdit = ref(false);
|
||
const formRef = ref(null);
|
||
const formData = reactive({
|
||
id: null,
|
||
name: '',
|
||
specification: '',
|
||
manufacturer: '',
|
||
remark: '',
|
||
});
|
||
|
||
// 搜索数据
|
||
const searchData = () => {
|
||
pagination.currentPage = 1;
|
||
const filteredData = initialTableData.filter((item) => item.name.includes(searchForm.name));
|
||
tableData.value = filteredData;
|
||
pagination.total = filteredData.length;
|
||
};
|
||
|
||
// 重置搜索
|
||
const resetSearch = () => {
|
||
searchForm.name = '';
|
||
pagination.currentPage = 1;
|
||
tableData.value = [...initialTableData];
|
||
pagination.total = initialTableData.length;
|
||
};
|
||
|
||
// 打开弹窗
|
||
const openDialog = () => {
|
||
isEdit.value = false;
|
||
Object.keys(formData).forEach((key) => {
|
||
if (key !== 'id') {
|
||
formData[key] = '';
|
||
}
|
||
});
|
||
formData.id = tableData.value.length > 0 ? Math.max(...tableData.value.map((item) => item.id)) + 1 : 1;
|
||
dialogVisible.value = true;
|
||
};
|
||
|
||
// 编辑数据
|
||
const editData = (row) => {
|
||
isEdit.value = true;
|
||
Object.assign(formData, row);
|
||
dialogVisible.value = true;
|
||
};
|
||
|
||
// 删除数据
|
||
const deleteData = (id) => {
|
||
tableData.value = tableData.value.filter((item) => item.id !== id);
|
||
pagination.total = tableData.value.length;
|
||
ElMessage.success('删除成功');
|
||
};
|
||
|
||
// 提交表单
|
||
const submitForm = () => {
|
||
if (isEdit.value) {
|
||
const index = tableData.value.findIndex((item) => item.id === formData.id);
|
||
if (index !== -1) {
|
||
tableData.value[index] = { ...formData };
|
||
ElMessage.success('编辑成功');
|
||
}
|
||
} else {
|
||
tableData.value.push({ ...formData });
|
||
pagination.total = tableData.value.length;
|
||
ElMessage.success('新增成功');
|
||
}
|
||
dialogVisible.value = false;
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.custom-page {
|
||
padding: 20px;
|
||
height: calc(100vh - 150px);
|
||
}
|
||
|
||
.search-area {
|
||
margin-bottom: 20px;
|
||
}
|
||
.custom-form {
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 自定义输入框样式 */
|
||
.custom-input {
|
||
border-radius: 6px;
|
||
transition:
|
||
border-color 0.3s,
|
||
box-shadow 0.3s;
|
||
}
|
||
|
||
.custom-input:hover {
|
||
border-color: #409eff;
|
||
}
|
||
|
||
.custom-input:focus-within {
|
||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||
}
|
||
|
||
/* 自定义备注输入框样式 */
|
||
.custom-input textarea {
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/* 对话框底部按钮区域样式 */
|
||
.custom-footer {
|
||
padding: 10px 20px 20px;
|
||
}
|
||
|
||
/* 自定义按钮样式 */
|
||
.custom-button {
|
||
border-radius: 6px;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.custom-button:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* 主按钮悬停效果 */
|
||
.custom-button[type='primary']:hover {
|
||
opacity: 0.9;
|
||
}
|
||
</style>
|