优化
This commit is contained in:
parent
60022829f6
commit
467ed30268
@ -1,10 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="custom-page">
|
<div class="custom-page">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="4">
|
<splitpanes class="default-theme">
|
||||||
<custom-table-tree title="土地分类" :data="landTypeData" @node-click="onNodeClick" />
|
<pane size="16">
|
||||||
|
<el-col>
|
||||||
|
<custom-table-tree title="土地分类" :data="treeData" :option="treeOption" filter @node-click="handleNodeClick">
|
||||||
|
<template #default="{ data }">
|
||||||
|
<div :class="{ 'text-primary': data.id == treeSelected.id || data.id == treeSelected.pId }">
|
||||||
|
{{ data.landType }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</custom-table-tree>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="20">
|
</pane>
|
||||||
|
<pane size="84">
|
||||||
|
<el-col>
|
||||||
<avue-crud
|
<avue-crud
|
||||||
ref="crudRef"
|
ref="crudRef"
|
||||||
v-model="state.form"
|
v-model="state.form"
|
||||||
@ -31,6 +41,8 @@
|
|||||||
</template>
|
</template>
|
||||||
</avue-crud>
|
</avue-crud>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
</pane>
|
||||||
|
</splitpanes>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -44,42 +56,14 @@ import { useUserStore } from '@/store/modules/user';
|
|||||||
import { CRUD_OPTIONS } from '@/config';
|
import { CRUD_OPTIONS } from '@/config';
|
||||||
import { mockData, sleep } from '@/utils';
|
import { mockData, sleep } from '@/utils';
|
||||||
import CustomInfo from './info.vue';
|
import CustomInfo from './info.vue';
|
||||||
|
import { getLandTypeTree } from '@/apis/baseInfo';
|
||||||
|
|
||||||
const { VITE_APP_BASE_API, VITE_APP_NAME } = import.meta.env;
|
const { VITE_APP_BASE_API, VITE_APP_NAME } = import.meta.env;
|
||||||
const app = useApp();
|
const app = useApp();
|
||||||
const UserStore = useUserStore();
|
const UserStore = useUserStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const crudRef = ref(null);
|
const crudRef = ref(null);
|
||||||
const landTypeData = ref([
|
|
||||||
{
|
|
||||||
label: '农用地',
|
|
||||||
id: '0',
|
|
||||||
children: [
|
|
||||||
{ label: '耕地', id: '01', children: [], pId: '0' },
|
|
||||||
{ label: '林地', children: [], id: '02', pId: '0' },
|
|
||||||
{ label: '草地', children: [], id: '03', pId: '0' },
|
|
||||||
{ label: '农田水利用地', children: [], id: '04', pId: '0' },
|
|
||||||
{ label: '养殖水面', children: [], id: '05', pId: '0' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '建设用地',
|
|
||||||
id: '1',
|
|
||||||
children: [
|
|
||||||
{ label: '城乡住宅用地', children: [], id: '11', pId: '10' },
|
|
||||||
{ label: '公共设施用地', children: [], id: '11', pId: '10' },
|
|
||||||
{ label: '工矿仓储用地', children: [], id: '11', pId: '10' },
|
|
||||||
{ label: '交通水利设施用地', children: [], id: '11', pId: '10' },
|
|
||||||
{ label: '旅游用地', children: [], id: '11', pId: '10' },
|
|
||||||
{ label: '军事设施用地', children: [], id: '11', pId: '10' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '未利用地',
|
|
||||||
id: '2',
|
|
||||||
children: [],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
loading: false,
|
loading: false,
|
||||||
query: {
|
query: {
|
||||||
@ -271,6 +255,31 @@ const state = reactive({
|
|||||||
currentRow: {},
|
currentRow: {},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// tree
|
||||||
|
const treeData = ref([]);
|
||||||
|
const treeOption = ref({
|
||||||
|
nodeKey: 'id',
|
||||||
|
props: { children: 'children', label: 'landType', id: 'id' },
|
||||||
|
});
|
||||||
|
const treeSelected = ref({});
|
||||||
|
|
||||||
|
const getLandTree = async () => {
|
||||||
|
try {
|
||||||
|
const res = await getLandTypeTree();
|
||||||
|
if (res.code == 200) {
|
||||||
|
treeData.value = res.data;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNodeClick = (data) => {
|
||||||
|
treeSelected.value = data;
|
||||||
|
};
|
||||||
|
|
||||||
|
getLandTree();
|
||||||
|
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
//state.loading = true;
|
//state.loading = true;
|
||||||
// GetEntityList(state.query)
|
// GetEntityList(state.query)
|
||||||
|
|||||||
@ -1,10 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="custom-page">
|
<div class="custom-page">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="4">
|
<splitpanes class="default-theme">
|
||||||
<custom-table-tree title="疫病分类" :data="landTypeData" @node-click="onNodeClick" />
|
<pane size="16">
|
||||||
|
<el-col>
|
||||||
|
<custom-table-tree title="疫病分类" :data="treeData" @node-click="onNodeClick" />
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="20">
|
</pane>
|
||||||
|
<pane size="84">
|
||||||
|
<el-col>
|
||||||
<avue-crud
|
<avue-crud
|
||||||
ref="crudRef"
|
ref="crudRef"
|
||||||
v-model="state.form"
|
v-model="state.form"
|
||||||
@ -91,6 +95,8 @@
|
|||||||
</template>
|
</template>
|
||||||
</avue-crud>
|
</avue-crud>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
</pane>
|
||||||
|
</splitpanes>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -108,18 +114,6 @@ const app = useApp();
|
|||||||
const UserStore = useUserStore();
|
const UserStore = useUserStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const crudRef = ref(null);
|
const crudRef = ref(null);
|
||||||
const landTypeData = ref([
|
|
||||||
// {
|
|
||||||
// label: '疫病分类',
|
|
||||||
// id: '0',
|
|
||||||
// children: [
|
|
||||||
{ label: '家禽类', id: '01', children: [], pId: '0' },
|
|
||||||
{ label: '家畜类', id: '02', children: [], pId: '0' },
|
|
||||||
{ label: '水产类', id: '03', children: [], pId: '0' },
|
|
||||||
{ label: '特种养殖类', id: '04', children: [], pId: '0' },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
]);
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
loading: false,
|
loading: false,
|
||||||
query: {
|
query: {
|
||||||
@ -377,6 +371,20 @@ const state = reactive({
|
|||||||
currentRow: {},
|
currentRow: {},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// tree
|
||||||
|
const treeData = ref([
|
||||||
|
// {
|
||||||
|
// label: '疫病分类',
|
||||||
|
// id: '0',
|
||||||
|
// children: [
|
||||||
|
{ label: '家禽类', id: '01', children: [], pId: '0' },
|
||||||
|
{ label: '家畜类', id: '02', children: [], pId: '0' },
|
||||||
|
{ label: '水产类', id: '03', children: [], pId: '0' },
|
||||||
|
{ label: '特种养殖类', id: '04', children: [], pId: '0' },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
]);
|
||||||
|
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
//state.loading = true;
|
//state.loading = true;
|
||||||
// GetEntityList(state.query)
|
// GetEntityList(state.query)
|
||||||
|
|||||||
@ -1,10 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="custom-page">
|
<div class="custom-page">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="4">
|
<splitpanes class="default-theme">
|
||||||
<custom-table-tree title="土地分类" :data="landTypeData" @node-click="onNodeClick" />
|
<pane size="16">
|
||||||
|
<el-col>
|
||||||
|
<custom-table-tree title="土地分类" :data="treeData" :option="treeOption" filter @node-click="handleNodeClick">
|
||||||
|
<template #default="{ data }">
|
||||||
|
<div :class="{ 'text-primary': data.id == treeSelected.id || data.id == treeSelected.pId }">
|
||||||
|
{{ data.landType }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</custom-table-tree>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="20">
|
</pane>
|
||||||
|
<pane size="84">
|
||||||
|
<el-col>
|
||||||
<avue-crud
|
<avue-crud
|
||||||
ref="crudRef"
|
ref="crudRef"
|
||||||
v-model="state.form"
|
v-model="state.form"
|
||||||
@ -28,6 +38,8 @@
|
|||||||
</template>
|
</template>
|
||||||
</avue-crud>
|
</avue-crud>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
</pane>
|
||||||
|
</splitpanes>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -41,42 +53,13 @@ import { useUserStore } from '@/store/modules/user';
|
|||||||
import { CRUD_OPTIONS } from '@/config';
|
import { CRUD_OPTIONS } from '@/config';
|
||||||
import { mockData, sleep } from '@/utils';
|
import { mockData, sleep } from '@/utils';
|
||||||
import CustomInfo from './info.vue';
|
import CustomInfo from './info.vue';
|
||||||
|
import { getLandTypeTree } from '@/apis/baseInfo';
|
||||||
|
|
||||||
const { VITE_APP_BASE_API, VITE_APP_NAME } = import.meta.env;
|
const { VITE_APP_BASE_API, VITE_APP_NAME } = import.meta.env;
|
||||||
const app = useApp();
|
const app = useApp();
|
||||||
const UserStore = useUserStore();
|
const UserStore = useUserStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const crudRef = ref(null);
|
const crudRef = ref(null);
|
||||||
const landTypeData = ref([
|
|
||||||
{
|
|
||||||
label: '农用地',
|
|
||||||
id: '0',
|
|
||||||
children: [
|
|
||||||
{ label: '耕地', id: '01', children: [], pId: '0' },
|
|
||||||
{ label: '林地', children: [], id: '02', pId: '0' },
|
|
||||||
{ label: '草地', children: [], id: '03', pId: '0' },
|
|
||||||
{ label: '农田水利用地', children: [], id: '04', pId: '0' },
|
|
||||||
{ label: '养殖水面', children: [], id: '05', pId: '0' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '建设用地',
|
|
||||||
id: '1',
|
|
||||||
children: [
|
|
||||||
{ label: '城乡住宅用地', children: [], id: '11', pId: '10' },
|
|
||||||
{ label: '公共设施用地', children: [], id: '11', pId: '10' },
|
|
||||||
{ label: '工矿仓储用地', children: [], id: '11', pId: '10' },
|
|
||||||
{ label: '交通水利设施用地', children: [], id: '11', pId: '10' },
|
|
||||||
{ label: '旅游用地', children: [], id: '11', pId: '10' },
|
|
||||||
{ label: '军事设施用地', children: [], id: '11', pId: '10' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '未利用地',
|
|
||||||
id: '2',
|
|
||||||
children: [],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
loading: false,
|
loading: false,
|
||||||
query: {
|
query: {
|
||||||
@ -268,6 +251,31 @@ const state = reactive({
|
|||||||
currentRow: {},
|
currentRow: {},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// tree
|
||||||
|
const treeData = ref([]);
|
||||||
|
const treeOption = ref({
|
||||||
|
nodeKey: 'id',
|
||||||
|
props: { children: 'children', label: 'landType', id: 'id' },
|
||||||
|
});
|
||||||
|
const treeSelected = ref({});
|
||||||
|
|
||||||
|
const getLandTree = async () => {
|
||||||
|
try {
|
||||||
|
const res = await getLandTypeTree();
|
||||||
|
if (res.code == 200) {
|
||||||
|
treeData.value = res.data;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNodeClick = (data) => {
|
||||||
|
treeSelected.value = data;
|
||||||
|
};
|
||||||
|
|
||||||
|
getLandTree();
|
||||||
|
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
//state.loading = true;
|
//state.loading = true;
|
||||||
// GetEntityList(state.query)
|
// GetEntityList(state.query)
|
||||||
|
|||||||
@ -1,206 +0,0 @@
|
|||||||
<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-click="rowClick"
|
|
||||||
@row-save="rowSave"
|
|
||||||
@row-update="rowUpdate"
|
|
||||||
@row-del="rowDel"
|
|
||||||
>
|
|
||||||
<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)',
|
|
||||||
'area|100-1000': 100,
|
|
||||||
type: '耕地',
|
|
||||||
tag: '龙津河周边',
|
|
||||||
address: '耿马镇白塔社区',
|
|
||||||
createTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
|
||||||
updateTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
const app = useApp();
|
|
||||||
const crudRef = ref(null);
|
|
||||||
const state = reactive({
|
|
||||||
loading: false,
|
|
||||||
query: {},
|
|
||||||
form: {},
|
|
||||||
options: {
|
|
||||||
...CRUD_OPTIONS,
|
|
||||||
delBtn: false,
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: '土地编号',
|
|
||||||
prop: 'id',
|
|
||||||
fixed: true,
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '土地名称',
|
|
||||||
prop: 'name',
|
|
||||||
fixed: true,
|
|
||||||
search: true,
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '土地面积',
|
|
||||||
prop: 'area',
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '土地类型',
|
|
||||||
prop: 'type',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '坐落位置',
|
|
||||||
prop: 'tag',
|
|
||||||
type: 'textarea',
|
|
||||||
width: 200,
|
|
||||||
span: 24,
|
|
||||||
rows: 4,
|
|
||||||
overHidden: true,
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '区域',
|
|
||||||
prop: 'address',
|
|
||||||
type: 'textarea',
|
|
||||||
width: 200,
|
|
||||||
span: 24,
|
|
||||||
rows: 4,
|
|
||||||
overHidden: true,
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '信息录入时间',
|
|
||||||
prop: 'createTime',
|
|
||||||
type: 'datetime',
|
|
||||||
format: 'YYYY-MM-DD HH:mm:ss',
|
|
||||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
||||||
width: 200,
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '信息更新时间',
|
|
||||||
prop: 'updateTime',
|
|
||||||
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),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
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) => {
|
|
||||||
console.log('del=', row);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,383 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="custom-page">
|
|
||||||
<avue-crud
|
|
||||||
ref="crudRef"
|
|
||||||
v-model="state.form"
|
|
||||||
v-model:search="state.query"
|
|
||||||
v-model:page="state.pageData"
|
|
||||||
:table-loading="state.loading"
|
|
||||||
:data="state.data"
|
|
||||||
:option="state.options"
|
|
||||||
@refresh-change="refreshChange"
|
|
||||||
@search-reset="searchChange"
|
|
||||||
@search-change="searchChange"
|
|
||||||
@selection-change="selectionChange"
|
|
||||||
@current-change="currentChange"
|
|
||||||
@size-change="sizeChange"
|
|
||||||
@row-save="rowSave"
|
|
||||||
@row-update="rowUpdate"
|
|
||||||
@row-del="rowDel"
|
|
||||||
>
|
|
||||||
<template #menu-left>
|
|
||||||
<el-button type="success" icon="download" @click="onExport">导出</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 { CRUD_OPTIONS } from '@/config';
|
|
||||||
import { isEmpty, downloadFile } from '@/utils';
|
|
||||||
import { useUserStore } from '@/store/modules/user';
|
|
||||||
import { compact } from 'lodash';
|
|
||||||
import { GetEntityList, AddEntity, AuditEntity, UpdateEntity, DeleteEntity, ExportEntity } from '@/apis/plan';
|
|
||||||
|
|
||||||
const { VITE_APP_BASE_API } = import.meta.env;
|
|
||||||
const app = useApp();
|
|
||||||
const UserStore = useUserStore();
|
|
||||||
const crudRef = ref(null);
|
|
||||||
const state = reactive({
|
|
||||||
loading: false,
|
|
||||||
query: {
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
},
|
|
||||||
form: {},
|
|
||||||
selection: [],
|
|
||||||
options: {
|
|
||||||
...CRUD_OPTIONS,
|
|
||||||
addBtnText: '添加计划',
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: '计划编号',
|
|
||||||
prop: 'id',
|
|
||||||
search: true,
|
|
||||||
addDisplay: false,
|
|
||||||
editDisplay: false,
|
|
||||||
viewDisplay: true,
|
|
||||||
width: 200,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '计划名称',
|
|
||||||
prop: 'planName',
|
|
||||||
search: true,
|
|
||||||
width: 200,
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '种植面积(亩)',
|
|
||||||
prop: 'plantingArea',
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
formatter: (row) => {
|
|
||||||
return row?.plantingArea ? row.plantingArea + '亩' : '';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '种植月份',
|
|
||||||
prop: 'plantingMonths',
|
|
||||||
type: 'select',
|
|
||||||
dicData: [
|
|
||||||
{ label: '1月', value: '1月' },
|
|
||||||
{ label: '2月', value: '2月' },
|
|
||||||
{ label: '3月', value: '3月' },
|
|
||||||
{ label: '4月', value: '4月' },
|
|
||||||
{ label: '5月', value: '5月' },
|
|
||||||
{ label: '6月', value: '6月' },
|
|
||||||
{ label: '7月', value: '7月' },
|
|
||||||
{ label: '8月', value: '8月' },
|
|
||||||
{ label: '9月', value: '9月' },
|
|
||||||
{ label: '10月', value: '10月' },
|
|
||||||
{ label: '11月', value: '11月' },
|
|
||||||
{ label: '12月', value: '12月' },
|
|
||||||
],
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '生长周期',
|
|
||||||
prop: 'growthCycle',
|
|
||||||
labelTip: '如：10周-12周',
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '计划进度',
|
|
||||||
prop: 'planProgress',
|
|
||||||
addDisplay: false,
|
|
||||||
editDisplay: false,
|
|
||||||
viewDisplay: true,
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '状态',
|
|
||||||
prop: 'planStatus',
|
|
||||||
type: 'select',
|
|
||||||
addDisplay: false,
|
|
||||||
editDisplay: false,
|
|
||||||
viewDisplay: true,
|
|
||||||
dicData: [
|
|
||||||
{
|
|
||||||
label: '待提交',
|
|
||||||
value: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '已提交',
|
|
||||||
value: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '审核通过',
|
|
||||||
value: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '审核拒绝',
|
|
||||||
value: 4,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '备注',
|
|
||||||
prop: 'note',
|
|
||||||
type: 'textarea',
|
|
||||||
span: 24,
|
|
||||||
rows: 4,
|
|
||||||
overHidden: true,
|
|
||||||
width: 200,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
actions: [
|
|
||||||
{
|
|
||||||
name: '查看',
|
|
||||||
icon: 'view',
|
|
||||||
event: ({ row }) => rowView(row),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '编辑',
|
|
||||||
icon: 'edit',
|
|
||||||
event: ({ row }) => rowEdit(row),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'danger',
|
|
||||||
name: '删除',
|
|
||||||
icon: 'delete',
|
|
||||||
event: ({ row }) => rowDel(row),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '审核通过',
|
|
||||||
type: 'success',
|
|
||||||
icon: 'check',
|
|
||||||
event: ({ row }) => rowCheck(row, 4),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '审核拒绝',
|
|
||||||
type: 'danger',
|
|
||||||
icon: 'close',
|
|
||||||
event: ({ row }) => rowCheck(row, 3),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
pageData: {
|
|
||||||
total: 0,
|
|
||||||
currentPage: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
},
|
|
||||||
data: [],
|
|
||||||
minWeek: null,
|
|
||||||
maxWeek: null,
|
|
||||||
currentRow: {},
|
|
||||||
});
|
|
||||||
|
|
||||||
// 加载
|
|
||||||
const loadData = () => {
|
|
||||||
state.loading = true;
|
|
||||||
GetEntityList(state.query)
|
|
||||||
.then((res) => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
const { current, size, total, records } = res.data;
|
|
||||||
state.data = records;
|
|
||||||
state.pageData = {
|
|
||||||
currentPage: current || 1,
|
|
||||||
pageSize: size || 10,
|
|
||||||
total: total,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
app.$message.error(err.msg);
|
|
||||||
state.data = [];
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
state.loading = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
// 页数
|
|
||||||
const currentChange = (current) => {
|
|
||||||
state.query.current = current;
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 条数
|
|
||||||
const sizeChange = (size) => {
|
|
||||||
state.query.size = size;
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 搜索
|
|
||||||
const searchChange = (params, done) => {
|
|
||||||
if (done) done();
|
|
||||||
state.query = params;
|
|
||||||
state.query.current = 1;
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 刷新
|
|
||||||
const refreshChange = () => {
|
|
||||||
loadData();
|
|
||||||
app.$message.success('刷新成功');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 选择
|
|
||||||
const selectionChange = (rows) => {
|
|
||||||
state.selection = rows;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查看
|
|
||||||
const rowView = (row) => {
|
|
||||||
// state.currentRow = row;
|
|
||||||
crudRef.value.rowView(row);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增
|
|
||||||
const rowSave = (row, done, loading) => {
|
|
||||||
AddEntity(row)
|
|
||||||
.then((res) => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
app.$message.success('添加成功！');
|
|
||||||
done();
|
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
app.$message.error(err.msg);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
loading();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 编辑
|
|
||||||
const rowEdit = (row) => {
|
|
||||||
crudRef.value.rowEdit(row);
|
|
||||||
};
|
|
||||||
const rowUpdate = (row, index, done, loading) => {
|
|
||||||
UpdateEntity(row)
|
|
||||||
.then((res) => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
app.$message.success('更新成功！');
|
|
||||||
done();
|
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
app.$message.error(err.msg);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
loading();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除
|
|
||||||
const rowDel = (row, index, done) => {
|
|
||||||
if (isEmpty(row)) return;
|
|
||||||
app
|
|
||||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning',
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
DeleteEntity({ id: row.id })
|
|
||||||
.then((res) => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
app.$message.success('删除成功！');
|
|
||||||
done();
|
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
app.$message.error(err.msg);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(() => {});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 审核
|
|
||||||
const rowCheck = (row, status) => {
|
|
||||||
const data = { id: row.id, planStatus: status };
|
|
||||||
AuditEntity(data)
|
|
||||||
.then((res) => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
app.$message.success('操作成功！');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
app.$message.error(err.msg);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
loadData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 导出
|
|
||||||
const onExport = () => {
|
|
||||||
if (isEmpty(state.data)) {
|
|
||||||
app.$message.error('当前暂时没有可供导出的数据！');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
state.loading = true;
|
|
||||||
const fileName = '年度计划明细表';
|
|
||||||
ExportEntity(state.query)
|
|
||||||
.then((res) => {
|
|
||||||
if (res.status === 200) {
|
|
||||||
downloadFile(res.data, `${fileName}.xlsx`, 'blob');
|
|
||||||
app.$message.success('导出成功！');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
app.$message.error('导出失败！');
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
state.loading = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -26,7 +26,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref, computed } from 'vue';
|
import { reactive, ref } from 'vue';
|
||||||
import { useApp } from '@/hooks';
|
import { useApp } from '@/hooks';
|
||||||
import { sleep } from '@/utils';
|
import { sleep } from '@/utils';
|
||||||
import { CRUD_OPTIONS } from '@/config';
|
import { CRUD_OPTIONS } from '@/config';
|
||||||
@ -36,13 +36,15 @@ const res = Mock.mock({
|
|||||||
'data|20': [
|
'data|20': [
|
||||||
{
|
{
|
||||||
id: '@increment(100000)',
|
id: '@increment(100000)',
|
||||||
name: '@ctitle(5,10)',
|
// name: '@ctitle(5,10)',
|
||||||
|
name: '一号基地',
|
||||||
'area|100-1000': 100,
|
'area|100-1000': 100,
|
||||||
'status|1-2': 1,
|
'status|1-2': 1,
|
||||||
location: '东经 98°53′至 99°15′，北纬 23°27′至 23°40′F',
|
location: '东经 98°53′至 99°15′，北纬 23°27′至 23°40′F',
|
||||||
'type|1-2': 1,
|
'type|1-2': 1,
|
||||||
'p1|1-2': 1,
|
'p1|1-2': 1,
|
||||||
'p2|100-1000': 100,
|
'p2|100-1000': 100,
|
||||||
|
p3: '@cname(2,3)',
|
||||||
tag: '龙津河周边',
|
tag: '龙津河周边',
|
||||||
address: '耿马镇白塔社区',
|
address: '耿马镇白塔社区',
|
||||||
createTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
createTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||||
@ -70,7 +72,7 @@ const state = reactive({
|
|||||||
{
|
{
|
||||||
label: '基地名称',
|
label: '基地名称',
|
||||||
prop: 'name',
|
prop: 'name',
|
||||||
fixed: true,
|
// fixed: true,
|
||||||
search: true,
|
search: true,
|
||||||
width: 200,
|
width: 200,
|
||||||
rules: {
|
rules: {
|
||||||
@ -191,6 +193,15 @@ const state = reactive({
|
|||||||
return row.area + 'm';
|
return row.area + 'm';
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: '经营主体',
|
||||||
|
prop: 'p3',
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: '创建日期',
|
label: '创建日期',
|
||||||
prop: 'createdTime',
|
prop: 'createdTime',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user