Merge branch 'dev' of http://192.168.18.88:8077/sznyb/daimp-front into dev
This commit is contained in:
lzc
commit
62bc63ea66
@ -40,7 +40,7 @@ const formatterIcon = (row) => {
|
||||
&__more {
|
||||
padding: 20px 5px;
|
||||
font-size: 20px;
|
||||
color: $color-primary;
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-button {
|
||||
|
||||
@ -27,7 +27,7 @@ import { reactive, ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
title: { type: String, default: '' },
|
||||
shadow: { type: Boolean, default: true },
|
||||
shadow: { type: Boolean, default: false },
|
||||
filter: { type: Boolean, default: false },
|
||||
data: { type: Array, default: () => [] },
|
||||
option: {
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
"pinia": "^2.1.7",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"screenfull": "^6.0.2",
|
||||
"splitpanes": "^4.0.3",
|
||||
"vue": "^3.3.11",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
|
||||
@ -19,10 +19,12 @@ import { registerDirective } from './directives';
|
||||
import { registerGlobalComponents } from './plugins/globalComponents';
|
||||
import { registerElIcons } from './plugins/icon';
|
||||
import { registerMicroApps } from './plugins/micro';
|
||||
import { registerSplitpanes } from './plugins/splitpanes';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(pinia).use(router).use(ElementPlus).use(Avue);
|
||||
registerGlobalComponents(app);
|
||||
registerElIcons(app);
|
||||
registerSplitpanes(app);
|
||||
registerDirective(app);
|
||||
registerMicroApps(app);
|
||||
|
||||
7
sub-government-affairs-service/src/plugins/splitpanes.js
Normal file
7
sub-government-affairs-service/src/plugins/splitpanes.js
Normal file
@ -0,0 +1,7 @@
|
||||
import { Splitpanes, Pane } from 'splitpanes';
|
||||
import 'splitpanes/dist/splitpanes.css';
|
||||
|
||||
export const registerSplitpanes = (app) => {
|
||||
app.component('Splitpanes', Splitpanes);
|
||||
app.component('Pane', Pane);
|
||||
};
|
||||
@ -9,12 +9,6 @@ export default [
|
||||
redirect: '/sub-government-affairs-service/trace-home',
|
||||
meta: { title: '溯源管理', icon: 'Document' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/trace-index',
|
||||
name: 'trace-index',
|
||||
component: () => import('@/views/trace/statistic/index.vue'),
|
||||
meta: { title: '溯源首页', icon: 'Document' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/record',
|
||||
name: 'record',
|
||||
@ -78,6 +72,12 @@ export default [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/trace-statistic',
|
||||
name: 'trace-statistic',
|
||||
component: () => import('@/views/trace/statistic/index.vue'),
|
||||
meta: { title: '溯源统计', icon: 'Document' },
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -15,3 +15,7 @@
|
||||
height: auto;
|
||||
max-height: calc(100vh - 130px);
|
||||
}
|
||||
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2022-02-23 21:12:37
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2025-02-11 17:18:36
|
||||
* @LastEditTime: 2025-03-24 10:05:36
|
||||
*/
|
||||
import lodash from 'lodash';
|
||||
import dayjs from 'dayjs';
|
||||
@ -123,6 +123,26 @@ export const setDicLabel = (dicData, value) => {
|
||||
}
|
||||
return label;
|
||||
};
|
||||
/**
|
||||
* @Title 将tree数据结构打平
|
||||
* @param {*} tree
|
||||
* @returns
|
||||
*/
|
||||
export const flattenTree = (tree) => {
|
||||
const result = [];
|
||||
function traverse(node) {
|
||||
result.push(node);
|
||||
if (node.children && node.children.length > 0) {
|
||||
node.children.forEach((child) => traverse(child));
|
||||
}
|
||||
}
|
||||
if (Array.isArray(tree)) {
|
||||
tree.forEach((item) => traverse(item));
|
||||
} else {
|
||||
traverse(tree);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
/**
|
||||
* @Title 数组交集
|
||||
* @param {*} arr1
|
||||
|
||||
@ -0,0 +1,421 @@
|
||||
<template>
|
||||
<CustomCard>
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<el-tree
|
||||
style="max-width: 600px"
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
:default-expanded-keys="[selectTreeNode.id]"
|
||||
:props="{ value: 'id' }"
|
||||
:expand-on-click-node="false"
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<template #default="{ data }">
|
||||
<div class="tree_node_" :class="{ nodeActive: data.id == selectTreeNode.id || data.id == selectTreeNode.pId }">
|
||||
{{ data.label }}
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<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-del="rowDel"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
|
||||
<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>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</CustomCard>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import CustomCard from '@/components/CustomCard.vue';
|
||||
import { getLandTypeTree, landTypeSave, getLandType, exportLandType, delLandType, editLandType } from '@/apis/baseInfo';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
|
||||
const selectTreeNode = ref({
|
||||
id: '',
|
||||
label: '',
|
||||
pId: '',
|
||||
pName: '',
|
||||
level: 0,
|
||||
});
|
||||
const landTypesDic = ref([]);
|
||||
const crudRef = ref(null);
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
form: {},
|
||||
selection: [],
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtnText: '',
|
||||
addBtn: false,
|
||||
dialogWidth: 680,
|
||||
selection: false,
|
||||
refreshBtn: false,
|
||||
column: [
|
||||
{ label: '编号', prop: 'id', addDisplay: false, editDisplay: false },
|
||||
{
|
||||
label: '用地分类',
|
||||
prop: 'landType',
|
||||
dicData: landTypesDic,
|
||||
// type: 'select',
|
||||
multiple: true,
|
||||
span: 23,
|
||||
props: {
|
||||
value: 'id',
|
||||
label: 'childLandCategory',
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
render: ({ row }) => {
|
||||
return row.landType;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '土地类别',
|
||||
prop: 'landCategory',
|
||||
addDisplay: false,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
render: ({ row }) => {
|
||||
return row.landCategory;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'status',
|
||||
render: ({ row }) => {
|
||||
return row.status == '1' ? '启用' : '禁用';
|
||||
},
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: ({ row }) => `${row.status == '0' ? '启' : '禁'}用`,
|
||||
icon: 'edit',
|
||||
event: ({ row }) => rowStatus(row),
|
||||
},
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => rowEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => rowDel(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
const treeData = ref([]);
|
||||
|
||||
const loadData = () => {
|
||||
state.loading = true;
|
||||
getLandType({
|
||||
pid: selectTreeNode.value.id,
|
||||
...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;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getLandTree();
|
||||
});
|
||||
|
||||
async function getLandTree() {
|
||||
let res = await getLandTypeTree();
|
||||
if (res.code == 200) {
|
||||
treeData.value = newTree(res.data, 0);
|
||||
landTypesDic.value = res.data.map((v) => {
|
||||
return {
|
||||
id: v.id,
|
||||
label: v.prentLandType,
|
||||
};
|
||||
});
|
||||
console.log('treeData', treeData.value);
|
||||
}
|
||||
}
|
||||
function newTree(arr, i) {
|
||||
arr.forEach((v) => {
|
||||
if (i == 0) {
|
||||
v.label = v.prentLandType;
|
||||
} else {
|
||||
v.label = v.childLandCategory;
|
||||
}
|
||||
if (v.children) v.children = newTree(v.children, i + 1);
|
||||
});
|
||||
return arr;
|
||||
}
|
||||
// 页数
|
||||
const currentChange = (current) => {
|
||||
state.query.current = current;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 条数
|
||||
const sizeChange = (size) => {
|
||||
state.query.current = 1;
|
||||
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 handleNodeClick = (data, node) => {
|
||||
const { id } = data;
|
||||
if (selectTreeNode.value.id != id) {
|
||||
if (node.level < 2) {
|
||||
selectTreeNode.value = handleNodeData({ data, level: node.level });
|
||||
} else selectTreeNode.value = handleNodeData({ data: node.parent.data, level: node.level });
|
||||
loadData();
|
||||
} else {
|
||||
selectTreeNode.value = { id: '', label: '', level: 0 };
|
||||
state.data = [];
|
||||
}
|
||||
if (selectTreeNode.value.level < 1) {
|
||||
state.options.dialogWidth = 680;
|
||||
state.options.column[1].span = 23;
|
||||
state.options.column[2].addDisplay = false;
|
||||
delete state.options.column[1].addDisabled;
|
||||
delete state.options.column[1].value;
|
||||
} else {
|
||||
state.options.column[2].addDisplay = true;
|
||||
state.options.column[1].addDisabled = true;
|
||||
state.options.column[1].value = selectTreeNode.value.label;
|
||||
delete state.options.dialogWidth;
|
||||
delete state.options.column[1].type;
|
||||
delete state.options.column[1].span;
|
||||
}
|
||||
};
|
||||
function handleNodeData({ data, level }) {
|
||||
return {
|
||||
id: data.id,
|
||||
label: data.label,
|
||||
level,
|
||||
};
|
||||
}
|
||||
// 编辑状态
|
||||
async function rowStatus(row) {
|
||||
console.info('操作状态', row.$index);
|
||||
const { id } = row;
|
||||
let status = row.status == '1' ? '0' : '1';
|
||||
let params = {
|
||||
id,
|
||||
status,
|
||||
};
|
||||
let res = await editLandType(params);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success('操作成功');
|
||||
nextTick(() => {
|
||||
state.data[row.$index].status = status;
|
||||
loadData();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function rowDel(row, done, loading) {
|
||||
let res = await delLandType(row.id);
|
||||
if (res.code === 200) {
|
||||
app.$message.success('已删除！');
|
||||
loadData();
|
||||
done();
|
||||
}
|
||||
loading();
|
||||
}
|
||||
|
||||
const rowEdit = (row) => {
|
||||
crudRef.value && crudRef.value.rowEdit(row);
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
crudRef.value && crudRef.value.rowAdd();
|
||||
};
|
||||
async function onExport() {
|
||||
console.log('test ---');
|
||||
if (selectTreeNode.value.level < 1) return ElMessage.warning('请选择用地分类');
|
||||
let res = await exportLandType({
|
||||
pid: selectTreeNode.value.id,
|
||||
});
|
||||
console.log('edxport', res);
|
||||
if (res.status == 200) {
|
||||
let a = document.createElement('a');
|
||||
let blob = new Blob([res.data]);
|
||||
let link = window.URL.createObjectURL(blob);
|
||||
a.href = link;
|
||||
a.download = '用地分类.xlsx';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(link);
|
||||
}
|
||||
}
|
||||
const rowSave = async (val, done, loading) => {
|
||||
console.info('新增', val);
|
||||
let data = {};
|
||||
if (selectTreeNode.value.level < 1) {
|
||||
data.landType = val.landType;
|
||||
} else {
|
||||
data = {
|
||||
pid: selectTreeNode.value.id,
|
||||
landCategory: val.landCategory,
|
||||
};
|
||||
}
|
||||
let res = await landTypeSave(data);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success('创建成功');
|
||||
getLandTree();
|
||||
if (selectTreeNode.value.level > 0) loadData();
|
||||
done();
|
||||
}
|
||||
// saveOperationRecord(row)
|
||||
// .then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// app.$message.success('添加成功！');
|
||||
// done();
|
||||
// loadData();
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// app.$message.error(err.msg);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// loading();
|
||||
// });
|
||||
loading();
|
||||
};
|
||||
|
||||
const rowUpdate = (row, index, done, loading) => {
|
||||
console.info('更新');
|
||||
console.log('row', row);
|
||||
editLandType({
|
||||
id: row.id,
|
||||
landCategory: row.landCategory,
|
||||
}).then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('更新成功！');
|
||||
loadData();
|
||||
done();
|
||||
}
|
||||
});
|
||||
loading();
|
||||
};
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tree_node_ {
|
||||
padding: 0 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: calc(100% - 4px);
|
||||
border-radius: 2px;
|
||||
user-select: none;
|
||||
}
|
||||
.nodeActive {
|
||||
background-color: rgb(172, 223, 243);
|
||||
}
|
||||
::v-deep() {
|
||||
.is-current {
|
||||
.el-tree-node__content {
|
||||
background-color: rgba($color: #000000, $alpha: 0);
|
||||
}
|
||||
}
|
||||
.el-tree-node__content {
|
||||
&:hover {
|
||||
background-color: rgba($color: #000000, $alpha: 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,107 +1,96 @@
|
||||
<template>
|
||||
<CustomCard>
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<el-tree
|
||||
style="max-width: 600px"
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
:default-expanded-keys="[selectTreeNode.id]"
|
||||
:props="{ value: 'id' }"
|
||||
:expand-on-click-node="false"
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<template #default="{ data }">
|
||||
<div class="tree_node_" :class="{ nodeActive: data.id == selectTreeNode.id || data.id == selectTreeNode.pId }">
|
||||
{{ data.label }}
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<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-del="rowDel"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
|
||||
<el-button type="success" icon="download" @click="onExport">导出</el-button>
|
||||
</template>
|
||||
<div class="custom-page">
|
||||
<el-row :gutter="20">
|
||||
<splitpanes class="default-theme">
|
||||
<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>
|
||||
</pane>
|
||||
<pane size="84">
|
||||
<el-col>
|
||||
<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-del="rowDel"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
>
|
||||
<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>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</CustomCard>
|
||||
<template #status="{ row }">
|
||||
<el-tag v-if="row.status == 1" type="success">启用</el-tag>
|
||||
<el-tag v-if="row.status == 0" type="danger">禁用</el-tag>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-col>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { ref, reactive, onMounted, nextTick, watch } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import CustomCard from '@/components/CustomCard.vue';
|
||||
import { getLandTypeTree, landTypeSave, getLandType, exportLandType, delLandType, editLandType } from '@/apis/baseInfo';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { isEmpty, flattenTree, setDicLabel, downloadFile } from '@/utils';
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
const selectTreeNode = ref({
|
||||
id: '',
|
||||
label: '',
|
||||
pId: '',
|
||||
pName: '',
|
||||
level: 0,
|
||||
});
|
||||
const landTypesDic = ref([]);
|
||||
const UserStore = useUserStore();
|
||||
const crudRef = ref(null);
|
||||
const treeData = ref([]);
|
||||
const treeOption = ref({
|
||||
nodeKey: 'id',
|
||||
props: { children: 'children', label: 'landType', id: 'id' },
|
||||
});
|
||||
const treeSelected = ref({});
|
||||
const treeDicData = ref([]);
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
form: {},
|
||||
form: {
|
||||
status: 1,
|
||||
},
|
||||
selection: [],
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtnText: '',
|
||||
addBtn: false,
|
||||
dialogWidth: 680,
|
||||
dialogWidth: 600,
|
||||
selection: false,
|
||||
refreshBtn: false,
|
||||
column: [
|
||||
{ label: '编号', prop: 'id', addDisplay: false, editDisplay: false },
|
||||
{
|
||||
label: '用地分类',
|
||||
label: '分类名称',
|
||||
prop: 'landType',
|
||||
dicData: landTypesDic,
|
||||
// type: 'select',
|
||||
multiple: true,
|
||||
span: 23,
|
||||
props: {
|
||||
value: 'id',
|
||||
label: 'childLandCategory',
|
||||
},
|
||||
span: 24,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
@ -109,14 +98,35 @@ const state = reactive({
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '用途分类',
|
||||
prop: 'pid',
|
||||
display: false,
|
||||
render: ({ row }) => {
|
||||
return row.landType;
|
||||
return setDicLabel(treeDicData.value, row.pid);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '土地类别',
|
||||
prop: 'landCategory',
|
||||
addDisplay: false,
|
||||
label: '用途分类',
|
||||
prop: 'pids',
|
||||
type: 'cascader',
|
||||
checkStrictly: true,
|
||||
hide: true,
|
||||
addDisplay: true,
|
||||
editDisplay: true,
|
||||
viewDisplay: false,
|
||||
props: {
|
||||
label: 'landType',
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/land-resource/baseInfo/landTree`,
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicFormatter: (res) => [{ id: null, landType: '土地分类', children: res.data }],
|
||||
span: 24,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
@ -124,16 +134,22 @@ const state = reactive({
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
render: ({ row }) => {
|
||||
return row.landCategory;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'status',
|
||||
render: ({ row }) => {
|
||||
return row.status == '1' ? '启用' : '禁用';
|
||||
},
|
||||
type: 'select',
|
||||
dicData: [
|
||||
{
|
||||
label: '启用',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
value: 1,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
@ -166,15 +182,35 @@ const state = reactive({
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
const treeData = ref([]);
|
||||
watch(
|
||||
() => treeData.value,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
const list = flattenTree(val);
|
||||
treeDicData.value = list.map((item) => {
|
||||
return { label: item.landType, value: item.id };
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// #endregion
|
||||
const getLandTree = async () => {
|
||||
try {
|
||||
const res = await getLandTypeTree();
|
||||
if (res.code == 200) {
|
||||
treeData.value = [{ id: null, landType: '土地分类', children: res.data }];
|
||||
}
|
||||
} catch (err) {
|
||||
app.$message.error(err.msg);
|
||||
}
|
||||
};
|
||||
|
||||
getLandTree();
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
const loadData = () => {
|
||||
state.loading = true;
|
||||
getLandType({
|
||||
pid: selectTreeNode.value.id,
|
||||
pid: treeSelected.value?.id ?? null,
|
||||
...state.query,
|
||||
})
|
||||
.then((res) => {
|
||||
@ -197,34 +233,15 @@ const loadData = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleNodeClick = (data, node) => {
|
||||
treeSelected.value = data;
|
||||
loadData();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getLandTree();
|
||||
loadData();
|
||||
});
|
||||
|
||||
async function getLandTree() {
|
||||
let res = await getLandTypeTree();
|
||||
if (res.code == 200) {
|
||||
treeData.value = newTree(res.data, 0);
|
||||
landTypesDic.value = res.data.map((v) => {
|
||||
return {
|
||||
id: v.id,
|
||||
label: v.prentLandType,
|
||||
};
|
||||
});
|
||||
console.log('treeData', treeData.value);
|
||||
}
|
||||
}
|
||||
function newTree(arr, i) {
|
||||
arr.forEach((v) => {
|
||||
if (i == 0) {
|
||||
v.label = v.prentLandType;
|
||||
} else {
|
||||
v.label = v.childLandCategory;
|
||||
}
|
||||
if (v.children) v.children = newTree(v.children, i + 1);
|
||||
});
|
||||
return arr;
|
||||
}
|
||||
// 页数
|
||||
const currentChange = (current) => {
|
||||
state.query.current = current;
|
||||
@ -257,42 +274,8 @@ const selectionChange = (rows) => {
|
||||
state.selection = rows;
|
||||
};
|
||||
|
||||
const handleNodeClick = (data, node) => {
|
||||
const { id } = data;
|
||||
if (selectTreeNode.value.id != id) {
|
||||
if (node.level < 2) {
|
||||
selectTreeNode.value = handleNodeData({ data, level: node.level });
|
||||
} else selectTreeNode.value = handleNodeData({ data: node.parent.data, level: node.level });
|
||||
loadData();
|
||||
} else {
|
||||
selectTreeNode.value = { id: '', label: '', level: 0 };
|
||||
state.data = [];
|
||||
}
|
||||
if (selectTreeNode.value.level < 1) {
|
||||
state.options.dialogWidth = 680;
|
||||
state.options.column[1].span = 23;
|
||||
state.options.column[2].addDisplay = false;
|
||||
delete state.options.column[1].addDisabled;
|
||||
delete state.options.column[1].value;
|
||||
} else {
|
||||
state.options.column[2].addDisplay = true;
|
||||
state.options.column[1].addDisabled = true;
|
||||
state.options.column[1].value = selectTreeNode.value.label;
|
||||
delete state.options.dialogWidth;
|
||||
delete state.options.column[1].type;
|
||||
delete state.options.column[1].span;
|
||||
}
|
||||
};
|
||||
function handleNodeData({ data, level }) {
|
||||
return {
|
||||
id: data.id,
|
||||
label: data.label,
|
||||
level,
|
||||
};
|
||||
}
|
||||
// 编辑状态
|
||||
// 启用
|
||||
async function rowStatus(row) {
|
||||
console.info('操作状态', row.$index);
|
||||
const { id } = row;
|
||||
let status = row.status == '1' ? '0' : '1';
|
||||
let params = {
|
||||
@ -301,7 +284,7 @@ async function rowStatus(row) {
|
||||
};
|
||||
let res = await editLandType(params);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success('操作成功');
|
||||
app.$message.success('操作成功！');
|
||||
nextTick(() => {
|
||||
state.data[row.$index].status = status;
|
||||
loadData();
|
||||
@ -309,118 +292,85 @@ async function rowStatus(row) {
|
||||
}
|
||||
}
|
||||
|
||||
// 删除
|
||||
async function rowDel(row, done, loading) {
|
||||
let res = await delLandType(row.id);
|
||||
if (res.code === 200) {
|
||||
app.$message.success('已删除！');
|
||||
getLandTree();
|
||||
loadData();
|
||||
done();
|
||||
}
|
||||
loading();
|
||||
}
|
||||
|
||||
const setPid = (row) => {
|
||||
if (!isEmpty(row.pids)) {
|
||||
const len = row.pids.length;
|
||||
row.pid = row?.pids[len - 1] ?? null;
|
||||
}
|
||||
};
|
||||
|
||||
// 新增
|
||||
const rowSave = async (row, done, loading) => {
|
||||
setPid(row);
|
||||
landTypeSave(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('添加成功！');
|
||||
done();
|
||||
getLandTree();
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const rowEdit = (row) => {
|
||||
crudRef.value && crudRef.value.rowEdit(row);
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
crudRef.value && crudRef.value.rowAdd();
|
||||
};
|
||||
async function onExport() {
|
||||
console.log('test ---');
|
||||
if (selectTreeNode.value.level < 1) return ElMessage.warning('请选择用地分类');
|
||||
let res = await exportLandType({
|
||||
pid: selectTreeNode.value.id,
|
||||
});
|
||||
console.log('edxport', res);
|
||||
if (res.status == 200) {
|
||||
let a = document.createElement('a');
|
||||
let blob = new Blob([res.data]);
|
||||
let link = window.URL.createObjectURL(blob);
|
||||
a.href = link;
|
||||
a.download = '用地分类.xlsx';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(link);
|
||||
}
|
||||
}
|
||||
const rowSave = async (val, done, loading) => {
|
||||
console.info('新增', val);
|
||||
let data = {};
|
||||
if (selectTreeNode.value.level < 1) {
|
||||
data.landType = val.landType;
|
||||
} else {
|
||||
data = {
|
||||
pid: selectTreeNode.value.id,
|
||||
landCategory: val.landCategory,
|
||||
};
|
||||
}
|
||||
let res = await landTypeSave(data);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success('创建成功');
|
||||
getLandTree();
|
||||
if (selectTreeNode.value.level > 0) loadData();
|
||||
done();
|
||||
}
|
||||
// saveOperationRecord(row)
|
||||
// .then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// app.$message.success('添加成功！');
|
||||
// done();
|
||||
// loadData();
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// app.$message.error(err.msg);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// loading();
|
||||
// });
|
||||
loading();
|
||||
};
|
||||
|
||||
const rowUpdate = (row, index, done, loading) => {
|
||||
console.info('更新');
|
||||
console.log('row', row);
|
||||
editLandType({
|
||||
id: row.id,
|
||||
landCategory: row.landCategory,
|
||||
}).then((res) => {
|
||||
setPid(row);
|
||||
editLandType(row).then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('更新成功！');
|
||||
loadData();
|
||||
getLandTree();
|
||||
done();
|
||||
}
|
||||
});
|
||||
loading();
|
||||
};
|
||||
|
||||
// #endregion
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
if (isEmpty(state.data)) {
|
||||
app.$message.error('请先选择用地分类!');
|
||||
return;
|
||||
}
|
||||
state.loading = true;
|
||||
const fileName = '用地分类.xlsx';
|
||||
exportLandType({
|
||||
pid: treeSelected.value.id,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
downloadFile(res.data, fileName, 'blob');
|
||||
app.$message.success('导出成功！');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error('导出失败！');
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tree_node_ {
|
||||
padding: 0 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: calc(100% - 4px);
|
||||
border-radius: 2px;
|
||||
user-select: none;
|
||||
}
|
||||
.nodeActive {
|
||||
background-color: rgb(172, 223, 243);
|
||||
}
|
||||
::v-deep() {
|
||||
.is-current {
|
||||
.el-tree-node__content {
|
||||
background-color: rgba($color: #000000, $alpha: 0);
|
||||
}
|
||||
}
|
||||
.el-tree-node__content {
|
||||
&:hover {
|
||||
background-color: rgba($color: #000000, $alpha: 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,53 +1,49 @@
|
||||
<template>
|
||||
<CustomCard>
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<!-- <el-tree
|
||||
style="max-width: 600px"
|
||||
:data="typeTree"
|
||||
node-key="areaCode"
|
||||
:props="{ children: 'areaChildVOS', label: 'areaName' }"
|
||||
@node-click="handleNodeClick"
|
||||
/> -->
|
||||
<custom-table-tree title="行政区域" :data="typeTree" :option="treeOption" @node-click="handleNodeClick" />
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<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-del="rowDel"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
|
||||
<el-button type="success" icon="download" @click="onExport">导出</el-button>
|
||||
</template>
|
||||
<div class="custom-page">
|
||||
<el-row :gutter="20">
|
||||
<splitpanes class="default-theme">
|
||||
<pane size="16">
|
||||
<el-col>
|
||||
<custom-table-tree title="行政区域" :data="typeTree" :option="treeOption" @node-click="handleNodeClick" />
|
||||
</el-col>
|
||||
</pane>
|
||||
<pane size="84">
|
||||
<el-col>
|
||||
<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-del="rowDel"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
|
||||
<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>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</CustomCard>
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-col>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import CustomCard from '@/components/CustomCard.vue';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getRegion } from '@/apis/index';
|
||||
|
||||
@ -55,9 +51,6 @@ const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
|
||||
const crudRef = ref(null);
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
@ -139,9 +132,6 @@ const infoData = reactive({
|
||||
name: '',
|
||||
});
|
||||
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
const loadData = () => {
|
||||
//state.loading = true;
|
||||
// getAnnualList(state.query)
|
||||
@ -256,9 +246,4 @@ const onAdd = () => {
|
||||
crudRef.value && crudRef.value.rowAdd();
|
||||
};
|
||||
const onExport = () => {};
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -30,14 +30,14 @@
|
||||
<el-button type="success" icon="download" @click="handleExport">导出</el-button>
|
||||
<el-button type="success" icon="upload" @click="onUpload">导入</el-button>
|
||||
</template>
|
||||
<template #menu="{ row }">
|
||||
<!-- <template #menu="{ row }">
|
||||
<el-button type="info" link @click="handleView(row)">查看</el-button>
|
||||
<el-popconfirm title="确定删除该土地?" @confirm="() => handleDelete(row.id)">
|
||||
<template #reference>
|
||||
<el-button type="danger" link>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</template> -->
|
||||
<template #area-form>
|
||||
<section class="area_form_">
|
||||
<el-input-number v-model="landArea" :precision="2" :step="1" :min="1" controls-position="right"></el-input-number>
|
||||
@ -58,7 +58,12 @@
|
||||
<template #landUrl-form="{ type }">
|
||||
<Attrs v-model:attrs="landAttrs" :type="type" />
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="option.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<custom-import-excel
|
||||
ref="importExcelRef"
|
||||
:template-url="getAssetsFile('template/土地模版表.xlsx')"
|
||||
@ -416,6 +421,24 @@ const option = reactive({
|
||||
],
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: ({ row }) => handleView(row),
|
||||
},
|
||||
// {
|
||||
// name: '编辑',
|
||||
// icon: 'edit',
|
||||
// event: ({ row }) => rowEdit(row),
|
||||
// },
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => handleDelete(row.id),
|
||||
},
|
||||
],
|
||||
});
|
||||
const searchData = reactive({
|
||||
landName: '',
|
||||
@ -495,11 +518,26 @@ async function handleExport() {
|
||||
window.URL.revokeObjectURL(link);
|
||||
}
|
||||
}
|
||||
async function handleDelete(id) {
|
||||
let res = await delLand(id);
|
||||
if (res.code == 200) {
|
||||
getList();
|
||||
}
|
||||
function handleDelete(id) {
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
delLand(id)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('删除成功！');
|
||||
getList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
function handleView(obj) {
|
||||
rowData.value = obj;
|
||||
|
||||
@ -1,36 +1,48 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<custom-table-tree title="土地分类" :data="landTypeData" @node-click="onNodeClick" />
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<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-del="rowDel"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="plus" @click="onThreshold">阀值设置</el-button>
|
||||
</template>
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-col>
|
||||
<splitpanes class="default-theme">
|
||||
<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>
|
||||
</pane>
|
||||
<pane size="84">
|
||||
<el-col>
|
||||
<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-del="rowDel"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="plus" @click="onThreshold">阀值设置</el-button>
|
||||
</template>
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-col>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
@ -44,42 +56,14 @@ import { useUserStore } from '@/store/modules/user';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { mockData, sleep } from '@/utils';
|
||||
import CustomInfo from './info.vue';
|
||||
import { getLandTypeTree } from '@/apis/baseInfo';
|
||||
|
||||
const { VITE_APP_BASE_API, VITE_APP_NAME } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const router = useRouter();
|
||||
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({
|
||||
loading: false,
|
||||
query: {
|
||||
@ -271,6 +255,31 @@ const state = reactive({
|
||||
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 () => {
|
||||
//state.loading = true;
|
||||
// GetEntityList(state.query)
|
||||
|
||||
@ -1,96 +1,102 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<custom-table-tree title="疫病分类" :data="landTypeData" @node-click="onNodeClick" />
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<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-del="rowDel"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="plus" @click="rowAdd">添加</el-button>
|
||||
<el-button type="danger" icon="delete" @click="onDel(state.selection)">批量删除</el-button>
|
||||
</template>
|
||||
|
||||
<template #reportUrl-form="{ column, value }">
|
||||
<el-upload
|
||||
v-model:file-list="state.fileList"
|
||||
action="#"
|
||||
:show-file-list="true"
|
||||
list-type="picture-card"
|
||||
accept="image/*"
|
||||
:http-request="rowUploadPicture"
|
||||
<splitpanes class="default-theme">
|
||||
<pane size="16">
|
||||
<el-col>
|
||||
<custom-table-tree title="疫病分类" :data="treeData" @node-click="onNodeClick" />
|
||||
</el-col>
|
||||
</pane>
|
||||
<pane size="84">
|
||||
<el-col>
|
||||
<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-del="rowDel"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
</el-upload>
|
||||
</template>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="plus" @click="rowAdd">添加</el-button>
|
||||
<el-button type="danger" icon="delete" @click="onDel(state.selection)">批量删除</el-button>
|
||||
</template>
|
||||
|
||||
<template #reportLink-form="{ column, value }">
|
||||
<el-button type="primary" text @click="downloadFile(value, `${state.currentRow?.name}-检测报告.png`, 'image')"> 下载 </el-button>
|
||||
</template>
|
||||
<template #reportUrl-form="{ column, value }">
|
||||
<el-upload
|
||||
v-model:file-list="state.fileList"
|
||||
action="#"
|
||||
:show-file-list="true"
|
||||
list-type="picture-card"
|
||||
accept="image/*"
|
||||
:http-request="rowUploadPicture"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<template #result-form="{ column, value }">
|
||||
<el-button type="primary" style="margin-bottom: 16px" @click="addInfo(value)">新增</el-button>
|
||||
<el-table :data="value" style="width: 100%" border>
|
||||
<el-table-column prop="c1" label="检测项目" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.c1" :disabled="scope.row.disabled" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="c2" label="检测方法" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.c2" :disabled="scope.row.disabled" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="c3" label="主要试剂" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.c3" :disabled="scope.row.disabled" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="c4" label="检测结果" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.c4" :disabled="scope.row.disabled" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="c5" label="备注" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.c5" type="textarea" rows="2" :disabled="scope.row.disabled" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="130" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" icon="edit" text @click="editInfo(scope.row)"></el-button>
|
||||
<el-button type="danger" icon="delete" text @click="delInfo(value, scope.row, scope.$index)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
<template #reportLink-form="{ column, value }">
|
||||
<el-button type="primary" text @click="downloadFile(value, `${state.currentRow?.name}-检测报告.png`, 'image')"> 下载 </el-button>
|
||||
</template>
|
||||
|
||||
<template #customInfo-form="{ column }">
|
||||
<custom-info :row="state.currentRow" />
|
||||
</template>
|
||||
<template #result-form="{ column, value }">
|
||||
<el-button type="primary" style="margin-bottom: 16px" @click="addInfo(value)">新增</el-button>
|
||||
<el-table :data="value" style="width: 100%" border>
|
||||
<el-table-column prop="c1" label="检测项目" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.c1" :disabled="scope.row.disabled" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="c2" label="检测方法" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.c2" :disabled="scope.row.disabled" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="c3" label="主要试剂" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.c3" :disabled="scope.row.disabled" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="c4" label="检测结果" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.c4" :disabled="scope.row.disabled" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="c5" label="备注" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.c5" type="textarea" rows="2" :disabled="scope.row.disabled" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="130" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" icon="edit" text @click="editInfo(scope.row)"></el-button>
|
||||
<el-button type="danger" icon="delete" text @click="delInfo(value, scope.row, scope.$index)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-col>
|
||||
<template #customInfo-form="{ column }">
|
||||
<custom-info :row="state.currentRow" />
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-col>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
@ -108,18 +114,6 @@ const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const router = useRouter();
|
||||
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({
|
||||
loading: false,
|
||||
query: {
|
||||
@ -377,6 +371,20 @@ const state = reactive({
|
||||
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 () => {
|
||||
//state.loading = true;
|
||||
// GetEntityList(state.query)
|
||||
|
||||
@ -1,33 +1,45 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<custom-table-tree title="土地分类" :data="landTypeData" @node-click="onNodeClick" />
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<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-del="rowDel"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
>
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-col>
|
||||
<splitpanes class="default-theme">
|
||||
<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>
|
||||
</pane>
|
||||
<pane size="84">
|
||||
<el-col>
|
||||
<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-del="rowDel"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
>
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-col>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
@ -41,42 +53,13 @@ import { useUserStore } from '@/store/modules/user';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { mockData, sleep } from '@/utils';
|
||||
import CustomInfo from './info.vue';
|
||||
import { getLandTypeTree } from '@/apis/baseInfo';
|
||||
|
||||
const { VITE_APP_BASE_API, VITE_APP_NAME } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const router = useRouter();
|
||||
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({
|
||||
loading: false,
|
||||
query: {
|
||||
@ -268,6 +251,31 @@ const state = reactive({
|
||||
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 () => {
|
||||
//state.loading = true;
|
||||
// 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>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref, computed } from 'vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { sleep } from '@/utils';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
@ -36,13 +36,15 @@ const res = Mock.mock({
|
||||
'data|20': [
|
||||
{
|
||||
id: '@increment(100000)',
|
||||
name: '@ctitle(5,10)',
|
||||
// name: '@ctitle(5,10)',
|
||||
name: '一号基地',
|
||||
'area|100-1000': 100,
|
||||
'status|1-2': 1,
|
||||
location: '东经 98°53′至 99°15′，北纬 23°27′至 23°40′F',
|
||||
'type|1-2': 1,
|
||||
'p1|1-2': 1,
|
||||
'p2|100-1000': 100,
|
||||
p3: '@cname(2,3)',
|
||||
tag: '龙津河周边',
|
||||
address: '耿马镇白塔社区',
|
||||
createTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
@ -70,7 +72,7 @@ const state = reactive({
|
||||
{
|
||||
label: '基地名称',
|
||||
prop: 'name',
|
||||
fixed: true,
|
||||
// fixed: true,
|
||||
search: true,
|
||||
width: 200,
|
||||
rules: {
|
||||
@ -191,6 +193,15 @@ const state = reactive({
|
||||
return row.area + 'm';
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '经营主体',
|
||||
prop: 'p3',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '创建日期',
|
||||
prop: 'createdTime',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user