feat:土壤管理页面搭建
This commit is contained in:
parent
329b47255c
commit
dfcf8f98cb
@ -1,3 +1,68 @@
|
||||
<template>
|
||||
<div>土壤分类</div>
|
||||
<CustomCard>
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model:page="pageData"
|
||||
v-model:search="condition"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
:option="option"
|
||||
@search-change="handleSearch"
|
||||
@search-reset="handleSearchReset"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
@row-save="handleSave"
|
||||
@row-update="handleUpdete"
|
||||
>
|
||||
<template #menu="{ index, row }">
|
||||
<el-dropdown popper-class="custom-table-operate">
|
||||
<el-icon class="custom-table-operate__more"><More /></el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<template v-for="item in actions" :key="item.name">
|
||||
<el-dropdown-item @click="item.event(row, index)">
|
||||
<el-button :type="item.type ?? 'primary'" :icon="item.icon" :size="item.size" :disabled="item.disabled" text>
|
||||
{{ item.name == '查看' ? (row.status == 1 ? '启用' : '禁用') : item.name }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</template>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown></template
|
||||
>
|
||||
</avue-crud>
|
||||
</CustomCard>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CustomCard from '@/components/CustomCard.vue';
|
||||
import useSoilTypeHook from './useSoilTypeHook';
|
||||
|
||||
const {
|
||||
crudRef,
|
||||
condition,
|
||||
loading,
|
||||
data,
|
||||
pageData,
|
||||
option,
|
||||
actions,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSearch,
|
||||
handleSearchReset,
|
||||
handleSave,
|
||||
handleUpdete,
|
||||
} = useSoilTypeHook();
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -0,0 +1,175 @@
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
|
||||
export default function useSoilTypeHook() {
|
||||
onMounted(getList);
|
||||
|
||||
const crudRef = ref();
|
||||
const condition = ref({
|
||||
villageName: '',
|
||||
});
|
||||
const data = ref([
|
||||
{
|
||||
code: '1',
|
||||
soilType: '1111111111111',
|
||||
status: 0,
|
||||
},
|
||||
{
|
||||
code: '2',
|
||||
soilType: '2222222222222',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
code: '3',
|
||||
soilType: '3333333333333',
|
||||
status: 0,
|
||||
},
|
||||
]);
|
||||
const loading = ref(false);
|
||||
const pageData = ref({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 3,
|
||||
});
|
||||
const option = ref({
|
||||
...CRUD_OPTIONS,
|
||||
selection: false,
|
||||
dialogWidth: 600,
|
||||
refreshBtn: false,
|
||||
border: false,
|
||||
column: [
|
||||
{
|
||||
label: '村名',
|
||||
prop: 'villageName',
|
||||
search: true,
|
||||
hide: true,
|
||||
display: false,
|
||||
addDisplay: false,
|
||||
viewDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '编号',
|
||||
prop: 'code',
|
||||
display: false,
|
||||
addDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '土壤类型',
|
||||
prop: 'soilType',
|
||||
labelWidth: 100,
|
||||
span: 23,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
message: '请输入土壤类型',
|
||||
},
|
||||
// {
|
||||
// pattern: /^[a-zA-Z0-9]{1,20}$/,
|
||||
// message: '请输入1-20位字符',
|
||||
// trigger: 'blur',
|
||||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'status',
|
||||
display: false,
|
||||
addDisplay: false,
|
||||
render: ({ row }) => {
|
||||
return row.status === 0 ? '启用' : '禁用';
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
const actions = ref([
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: handleStatusChange,
|
||||
},
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: handleEdit,
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: handleDel,
|
||||
},
|
||||
]);
|
||||
function getList() {
|
||||
let params = {
|
||||
current: pageData.value.currentPage,
|
||||
pageSize: pageData.value.pageSize,
|
||||
...condition.value,
|
||||
};
|
||||
console.log('get --- ', params);
|
||||
console.table(data.value);
|
||||
}
|
||||
function handleStatusChange(row, index) {
|
||||
console.log('handleStatusChange --- ', row);
|
||||
data.value[index].status = data.value[index].status === 0 ? 1 : 0;
|
||||
console.table(data.value);
|
||||
}
|
||||
function handleCurrentChange(val) {
|
||||
console.log('handleCurrentChange --- ', val);
|
||||
pageData.value.currentPage = val;
|
||||
getList();
|
||||
}
|
||||
function handleSizeChange(val) {
|
||||
console.log('handleSizeChange --- ', val);
|
||||
pageData.value.currentPage = 1;
|
||||
pageData.value.pageSize = val;
|
||||
getList();
|
||||
}
|
||||
function handleSearch(val, done) {
|
||||
console.log('handleSearch --- ', val);
|
||||
console.log('ccc', condition.value);
|
||||
resetPage();
|
||||
done();
|
||||
}
|
||||
function handleSearchReset() {
|
||||
resetPage();
|
||||
}
|
||||
function handleEdit(row, index) {
|
||||
console.log('handleEdit --- ', row);
|
||||
console.log('index --- ', index);
|
||||
crudRef.value.rowEdit(row);
|
||||
}
|
||||
function handleDel(row) {
|
||||
console.log('handleDel --- ', row);
|
||||
}
|
||||
function handleSave(form, _loading, done) {
|
||||
console.log('save --- ', form);
|
||||
_loading();
|
||||
getList();
|
||||
}
|
||||
function handleUpdate(form, _loading, done) {
|
||||
console.log('update --- ', form);
|
||||
_loading();
|
||||
getList();
|
||||
}
|
||||
function resetPage() {
|
||||
pageData.value.currentPage = 1;
|
||||
pageData.value.pageSize = 10;
|
||||
getList();
|
||||
}
|
||||
return {
|
||||
crudRef,
|
||||
condition,
|
||||
loading,
|
||||
data,
|
||||
pageData,
|
||||
option,
|
||||
actions,
|
||||
handleSearch,
|
||||
handleSearchReset,
|
||||
handleCurrentChange,
|
||||
handleSizeChange,
|
||||
handleSave,
|
||||
handleUpdate,
|
||||
};
|
||||
}
|
||||
@ -36,7 +36,6 @@ import CustomCard from '@/components/CustomCard.vue';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import Register from './common/Register.vue';
|
||||
import FileUpload from './common/FileUpload.vue';
|
||||
import { add } from 'lodash';
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const UserStore = useUserStore();
|
||||
@ -87,7 +86,6 @@ const option = ref({
|
||||
...CRUD_OPTIONS,
|
||||
refreshBtn: false,
|
||||
editTitle: '案件登记处理',
|
||||
rowKey: 'id_',
|
||||
column: [
|
||||
{
|
||||
label: '案件编号',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user