commit
This commit is contained in:
parent
4795bfb6f6
commit
d514c74a73
@ -16,6 +16,6 @@ VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
# VITE_APP_BASE_URL = 'http://47.109.205.240:8080'
|
||||
# VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9300'
|
||||
# 内网接口地址
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.74:8080'
|
||||
# VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
|
||||
# VITE_APP_VIST_URL = 'http://192.168.18.99'
|
||||
|
||||
@ -1,23 +1,5 @@
|
||||
import request from '@/utils/axios';
|
||||
|
||||
/**
|
||||
* 分页查询土地列表
|
||||
* @param {Object} params 请求参数
|
||||
* @param {string} [params.current] 每页条数
|
||||
* @param {string} [params.size] 分页
|
||||
* @param {string} [params.landType] 土地类型 传入id，土地资源管理/基础信息维护/土地类型列表查询
|
||||
* @param {string} [params.regionCode] 区域编码
|
||||
* @param {string} [params.keyword] 关键字
|
||||
* @param {string} [params.gridId] 网格id
|
||||
* @returns {Promise<Object>} 返回包含接口响应数据的 Promise
|
||||
*/
|
||||
export function getLandList(params) {
|
||||
return request({
|
||||
url: '/land-resource/landManage/page',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 新增全部土地信息（POST）
|
||||
export function createLand(data = {}) {
|
||||
return request('/land-resource/landManage/v1/save', {
|
||||
@ -26,11 +8,7 @@ export function createLand(data = {}) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存土地基础信息
|
||||
* @param {Object} [data={}] 请求数据，默认为空对象
|
||||
* @returns {Promise<Object>} 返回包含接口响应数据的 Promise
|
||||
*/
|
||||
// 保存土地基本信息（POST）
|
||||
export function saveBaseInfo(data = {}) {
|
||||
return request({
|
||||
url: '/land-resource/landManage/v1/saveBaseInfo',
|
||||
@ -39,11 +17,7 @@ export function saveBaseInfo(data = {}) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存土地产权信息
|
||||
* @param {Object} [data={}] 请求数据，默认为空对象
|
||||
* @returns {Promise<Object>} 返回包含接口响应数据的 Promise
|
||||
*/
|
||||
// 保存土地产权信息（PUT）
|
||||
export function saveProperty(data = {}) {
|
||||
return request({
|
||||
url: '/land-resource/landManage/v1/saveProperty',
|
||||
@ -51,12 +25,24 @@ export function saveProperty(data = {}) {
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 保存土地使用信息（PUT）
|
||||
export function saveUse(data = {}) {
|
||||
return request({
|
||||
url: '/land-resource/landManage/v1/saveUserInfo',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑土地信息
|
||||
* @param {Object} [data={}] 请求数据，默认为空对象，用于传递要编辑的土地信息
|
||||
* @returns {Promise<Object>} 返回包含接口响应数据的 Promise
|
||||
*/
|
||||
// 删除土地信息（DELETE）
|
||||
export function deleteLand(id) {
|
||||
return request({
|
||||
url: `/land-resource/landManage/delete/${id}`,
|
||||
method: 'delete',
|
||||
});
|
||||
}
|
||||
|
||||
// 编辑土地信息（POST）
|
||||
export function editLand(data = {}) {
|
||||
return request({
|
||||
url: '/land-resource/landManage/edit',
|
||||
@ -65,14 +51,20 @@ export function editLand(data = {}) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除指定 ID 的土地信息
|
||||
* @param {string|number} id 要删除的土地信息的 ID
|
||||
* @returns {Promise<Object>} 返回包含接口响应数据的 Promise
|
||||
*/
|
||||
export function deleteLand(id) {
|
||||
// 获取土地列表（GET）
|
||||
export function fetchLandList(params) {
|
||||
return request({
|
||||
url: `/land-resource/landManage/delete/${id}`,
|
||||
method: 'delete',
|
||||
url: '/land-resource/landManage/page',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取土地详情（GET）
|
||||
export function getLandById(id) {
|
||||
return request({
|
||||
url: `/land-resource/landManage/getLandInfo`,
|
||||
method: 'get',
|
||||
params: { landId: id },
|
||||
});
|
||||
}
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
import { ref } from 'vue';
|
||||
import { fetchLandList, deleteLand, createLand, updateLand } from '@/apis/landResourceManagement/landManagement';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import { cloneDeep } from 'lodash';
|
||||
|
||||
export function useLandCrud(type) {
|
||||
const list = ref([]);
|
||||
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
|
||||
const searchForm = ref({});
|
||||
|
||||
const formVisible = ref(false);
|
||||
const formMode = ref('create');
|
||||
const formData = ref({});
|
||||
|
||||
const fetchList = async () => {
|
||||
const res = await fetchLandList({ ...searchForm.value, type });
|
||||
list.value = res.data.records || [];
|
||||
pagination.value.total = res.data.total;
|
||||
};
|
||||
|
||||
const handleDelete = async (row) => {
|
||||
await ElMessageBox.confirm('确认删除？');
|
||||
await deleteLand(row.id);
|
||||
ElMessage.success('删除成功');
|
||||
fetchList();
|
||||
};
|
||||
|
||||
const openForm = (mode, row = {}) => {
|
||||
formMode.value = mode;
|
||||
formData.value = cloneDeep(row);
|
||||
formVisible.value = true;
|
||||
};
|
||||
|
||||
const handleSubmit = async (data) => {
|
||||
if (formMode.value === 'create') {
|
||||
await createLand({ ...data, type });
|
||||
ElMessage.success('新增成功');
|
||||
} else {
|
||||
await updateLand(data);
|
||||
ElMessage.success('更新成功');
|
||||
}
|
||||
formVisible.value = false;
|
||||
fetchList();
|
||||
};
|
||||
|
||||
return {
|
||||
list,
|
||||
pagination,
|
||||
searchForm,
|
||||
loading: ref(false),
|
||||
fetchList,
|
||||
handleDelete,
|
||||
handleSubmit,
|
||||
formVisible,
|
||||
formMode,
|
||||
formData,
|
||||
openForm,
|
||||
};
|
||||
}
|
||||
@ -9,12 +9,12 @@ const landsRoutes = [
|
||||
redirect: '/sub-government-affairs-service/plantPlan',
|
||||
meta: { title: '土地管理', icon: 'Grape' },
|
||||
children: [
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/landsManage',
|
||||
// name: 'landsManage',
|
||||
// component: () => import('@/views/landManage/component/landsManage/index.vue'),
|
||||
// meta: { title: '土地资源信息登记', icon: '' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-government-affairs-service/landsManage',
|
||||
name: 'landsManage',
|
||||
component: () => import('@/views/landManage/component/landsManage/index.vue'),
|
||||
meta: { title: '土地资源信息登记', icon: '' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/plantPlan',
|
||||
// name: 'plantPlan',
|
||||
|
||||
@ -1,137 +0,0 @@
|
||||
<template>
|
||||
<section class="custom_attrs_upload_content_lx" :style="{ '--columns': props.fileNum }">
|
||||
<el-upload
|
||||
v-if="props.type != 'view'"
|
||||
class="custom-form__uploader"
|
||||
action=""
|
||||
:show-file-list="false"
|
||||
:accept="props.accept"
|
||||
:limit="props.limit"
|
||||
:http-request="rowUploadPicture"
|
||||
:disabled="attrs_.length >= props.limit"
|
||||
>
|
||||
<el-icon class="custom-form__uploader__icon"><Plus /></el-icon>
|
||||
</el-upload>
|
||||
<div v-for="item in attrs_" :key="`attr_${item.uid}`" class="attrs_content__item">
|
||||
<video v-if="isMP4(item.url)" :src="item.url" controls />
|
||||
<img v-else :src="item.url" :alt="item.name" @click="handlePreview(i)" />
|
||||
<el-icon v-if="props.type != 'view'" class="clear_btn" @click="handleClearAttr(item.uid)"><CircleCloseFilled /></el-icon>
|
||||
</div>
|
||||
<el-image-viewer v-if="previewShow" :url-list="srcList" :initial-index="index" @close="previewShow = false" />
|
||||
</section>
|
||||
</template>
|
||||
<script setup>
|
||||
import { nextTick, ref, watch } from 'vue';
|
||||
import { CommonUpload } from '@/apis';
|
||||
|
||||
const emit = defineEmits(['update:attrs']);
|
||||
const props = defineProps({
|
||||
accept: {
|
||||
type: String,
|
||||
default: 'image/*',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'view',
|
||||
},
|
||||
attrs: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
fileNum: {
|
||||
type: Number,
|
||||
default: 4,
|
||||
},
|
||||
});
|
||||
const attrs_ = ref([]);
|
||||
const srcList = ref([]);
|
||||
srcList.value = attrs_.value.map((item) => item.url);
|
||||
watch(
|
||||
() => props.attrs,
|
||||
(val) => {
|
||||
attrs_.value = val;
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const index = ref(0);
|
||||
const previewShow = ref(false);
|
||||
|
||||
function handleClearAttr(uid) {
|
||||
attrs_.value = attrs_.value.filter((item) => item.uid !== uid);
|
||||
emit('update:attrs', attrs_.value);
|
||||
}
|
||||
async function rowUploadPicture({ file }) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const res = await CommonUpload(formData);
|
||||
if (res.code === 200) {
|
||||
attrs_.value.push({
|
||||
...res.data,
|
||||
uid: 'id_' + Date.now(),
|
||||
});
|
||||
emit('update:attrs', attrs_.value);
|
||||
}
|
||||
}
|
||||
function isMP4(filePath) {
|
||||
// 使用正则表达式检查文件路径是否以 .mp4 结尾（不区分大小写）
|
||||
const regex = /\.mp4$/i;
|
||||
return regex.test(filePath);
|
||||
}
|
||||
function handlePreview(i) {
|
||||
previewShow.value = false;
|
||||
nextTick(() => {
|
||||
index.value = i;
|
||||
previewShow.value = true;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.custom_attrs_upload_content_lx {
|
||||
display: grid;
|
||||
flex-wrap: wrap;
|
||||
grid-template-columns: repeat(var(--columns), 1fr);
|
||||
box-sizing: border-box;
|
||||
gap: 20px;
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.attrs_content__item {
|
||||
aspect-ratio: 1 / 1;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding: 6px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
img,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.clear_btn {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
font-size: 18px;
|
||||
color: #f15c5c;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:hover {
|
||||
.clear_btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -13,9 +13,20 @@
|
||||
value-key="landType"
|
||||
:clearable="true"
|
||||
/> -->
|
||||
<el-select v-model="query.landType" placeholder="选择土地类型" clearable style="width: 200px; margin-left: 8px">
|
||||
<!-- <el-select v-model="query.landType" placeholder="选择土地类型" clearable style="width: 200px; margin-left: 8px">
|
||||
<el-option v-for="item in landTypeOptions" :key="item.id" :label="item.landType" :value="item.id" />
|
||||
</el-select>
|
||||
</el-select> -->
|
||||
<el-tree-select
|
||||
v-model="query.landType"
|
||||
:data="landTypeOptions"
|
||||
:props="treeProps"
|
||||
placeholder="选择土地类型"
|
||||
clearable
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
style="width: 200px; margin-left: 8px"
|
||||
@change="handleLandTypeChange"
|
||||
/>
|
||||
<el-input v-model="query.keyword" placeholder="关键词搜索" style="margin-left: 8px; width: 200px" @keyup.enter="handleSearch" />
|
||||
<el-button type="primary" @click="handleSearch"> 搜索 </el-button>
|
||||
<el-button @click="resetSearch"> 重置 </el-button>
|
||||
@ -41,9 +52,16 @@
|
||||
<el-input v-model="formDataBasic.landName" placeholder="请输入地块名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="土地类型" prop="landType">
|
||||
<el-select v-model="formDataBasic.landType" placeholder="选择土地类型" clearable>
|
||||
<el-option v-for="item in landTypeOptions" :key="item.id" :label="item.landType" :value="item.id" />
|
||||
</el-select>
|
||||
<el-tree-select
|
||||
v-model="formDataBasic.landType"
|
||||
:data="landTypeOptions"
|
||||
:props="treeProps"
|
||||
placeholder="选择土地类型"
|
||||
clearable
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
@change="handleLandTypeChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="具体位置" prop="address">
|
||||
<el-input v-model="formDataBasic.address" placeholder="请输入具体位置" />
|
||||
@ -129,7 +147,7 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed, nextTick } from 'vue';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { getLandList, createLand, saveBaseInfo, saveProperty, editLand, deleteLand } from '@/apis/landResourceManagement/landManagement';
|
||||
import { fetchLandList, createLand, saveBaseInfo, saveProperty, editLand, deleteLand } from '@/apis/landResourceManagement/landManagement';
|
||||
import { CommonUpload } from '@/apis/index';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import request from '@/utils/axios';
|
||||
@ -168,6 +186,14 @@ const query = ref({
|
||||
// 表格数据
|
||||
const data = ref([]);
|
||||
const landTypeOptions = ref([]);
|
||||
const treeProps = ref({
|
||||
value: 'id',
|
||||
label: 'landType',
|
||||
children: 'children',
|
||||
// disabled: (data) => {
|
||||
// return data.children && data.children.length > 0;
|
||||
// },
|
||||
});
|
||||
|
||||
// 表单数据
|
||||
const formDataBasic = ref({
|
||||
@ -203,7 +229,7 @@ const option = reactive({
|
||||
{ label: '地块名称', prop: 'landName' },
|
||||
{ label: '所属网格', prop: 'gridName' },
|
||||
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||
{ label: '土地类型', prop: 'landTypeName' },
|
||||
{ label: '土地类型', prop: 'fullLandType' },
|
||||
{ label: '所属行政区域', prop: 'fullRegionName' },
|
||||
{ label: '具体位置', prop: 'address' },
|
||||
{ label: '产权人姓名', prop: 'propertyName' },
|
||||
@ -213,16 +239,16 @@ const option = reactive({
|
||||
{ label: '信息更新时间', prop: 'updateTime' },
|
||||
],
|
||||
actions: [
|
||||
// {
|
||||
// name: '查看',
|
||||
// icon: 'view',
|
||||
// event: ({ row }) => handleView(row),
|
||||
// },
|
||||
// {
|
||||
// name: '编辑',
|
||||
// icon: 'edit',
|
||||
// event: ({ row }) => handleEdit(row),
|
||||
// },
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: ({ row }) => handleView(row),
|
||||
},
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => handleEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
@ -238,7 +264,7 @@ const option = reactive({
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getLandList(query.value);
|
||||
const res = await fetchLandList(query.value);
|
||||
const { current, size, total, records } = res.data;
|
||||
data.value = records;
|
||||
pageData.value = {
|
||||
@ -257,7 +283,7 @@ const fetchLandTypeData = async () => {
|
||||
try {
|
||||
const response = await request.get('/land-resource/baseInfo/landTree', { params: { status: '1' } });
|
||||
if (response.code === 200) {
|
||||
landTypeOptions.value = extractLeafNodes(response.data);
|
||||
landTypeOptions.value = response.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取土地类型数据失败', error);
|
||||
|
||||
@ -1,259 +0,0 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-dialog v-model="isShowVal" title="规划记录" width="1000" center @closed="stageClose">
|
||||
<avue-crud
|
||||
ref="listRef"
|
||||
v-model="stageState.form"
|
||||
v-model:search="stageState.query"
|
||||
v-model:page="stageState.pageData"
|
||||
:table-loading="stageState.loading"
|
||||
:data="stageState.data"
|
||||
:option="stageState.options"
|
||||
@refresh-change="stageRefresh"
|
||||
@search-reset="stageSearch"
|
||||
@search-change="stageSearch"
|
||||
@selection-change="stageSelection"
|
||||
@current-change="stageCurrent"
|
||||
@size-change="stageSize"
|
||||
@row-del="stageRowDel"
|
||||
@row-save="stageRowSave"
|
||||
@row-update="stageRowUpdate"
|
||||
>
|
||||
<template #menu-left>
|
||||
<!-- <el-button type="primary" icon="Plus" @click="onStateAdd">新增</el-button> -->
|
||||
</template>
|
||||
|
||||
<template #planId="{ row }">
|
||||
{{ row.planName }}
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="stageState.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getPlantingStage, savePlantingStage, editPlantingStage, delPlantingStage, getPlanHistory } from '@/apis/land.js';
|
||||
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
rowOriginal: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const listRef = ref(null);
|
||||
const stageOptions = reactive([
|
||||
{ value: '0', label: '苗期' },
|
||||
{ value: '1', label: '花果期' },
|
||||
{ value: '2', label: '采收期' },
|
||||
]);
|
||||
|
||||
const workOptions = reactive([
|
||||
{ label: '作业计划1', value: '000001' },
|
||||
{ label: '作业计划2', value: '000002' },
|
||||
]);
|
||||
|
||||
const stageObj = reactive({
|
||||
0: '苗期',
|
||||
1: '花果期',
|
||||
2: '采收期',
|
||||
});
|
||||
|
||||
const isShowVal = ref(false);
|
||||
let currentRow = reactive({});
|
||||
|
||||
const loadList = () => {
|
||||
if (isShowVal.value) {
|
||||
// console.info('loadList', props);
|
||||
getList();
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
isShowVal.value = props.isShow;
|
||||
currentRow = props.rowOriginal;
|
||||
loadList();
|
||||
// console.info('onMounted', props);
|
||||
});
|
||||
watch(
|
||||
() => (props.isShow, props.rowOriginal),
|
||||
() => {
|
||||
isShowVal.value = props.isShow;
|
||||
currentRow = props.rowOriginal;
|
||||
console.info('watch', props);
|
||||
loadList();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const stageState = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
form: {},
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtn: false,
|
||||
selection: false,
|
||||
column: [
|
||||
{
|
||||
label: '年度计划',
|
||||
prop: 'planId',
|
||||
type: 'select',
|
||||
remote: false,
|
||||
width: '160px',
|
||||
showOverflowTooltip: true,
|
||||
props: {
|
||||
label: 'planName',
|
||||
value: 'id',
|
||||
},
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/land-resource/annualManage/page`,
|
||||
dicFormatter: (res) => res.data.records ?? [],
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{ label: '供应商', prop: 'seedSupplier', addDisplay: false, editDisplay: true },
|
||||
{ label: '种植日期', prop: 'planDate', addDisplay: true, editDisplay: true },
|
||||
{ label: '种植产物', prop: 'crop', addDisplay: false, editDisplay: false },
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => stageRowEdit(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
async function getList() {
|
||||
stageState.loading = true;
|
||||
getPlanHistory({ ...stageState.query, landId: currentRow.landId })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
const { current, size, total, records } = res.data;
|
||||
stageState.data = records || [];
|
||||
stageState.pageData = {
|
||||
currentPage: current || 1,
|
||||
pageSize: size || 10,
|
||||
total: total,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
stageState.data = [];
|
||||
})
|
||||
.finally(() => {
|
||||
stageState.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
const stageSearch = (params, done) => {
|
||||
if (done) done();
|
||||
stageState.query = params;
|
||||
stageState.query.current = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const stageSelection = (rows) => {
|
||||
stageState.selection = rows;
|
||||
};
|
||||
|
||||
const stageCurrent = (current) => {
|
||||
stageState.query.current = current;
|
||||
getList();
|
||||
};
|
||||
|
||||
const stageSize = (size) => {
|
||||
stageState.query.size = size;
|
||||
getList();
|
||||
};
|
||||
|
||||
const stageRowEdit = (row) => {
|
||||
listRef.value.rowEdit(row);
|
||||
};
|
||||
|
||||
const onStateAdd = () => {
|
||||
if (!currentRow.landId) {
|
||||
app.$message.error('请选择种植规划');
|
||||
return;
|
||||
}
|
||||
listRef.value.rowAdd();
|
||||
};
|
||||
|
||||
const stageRowSave = (row, done, loading) => {
|
||||
row.landId = currentRow.landId;
|
||||
console.info('stageRowSave', row);
|
||||
savePlantingStage({ ...row })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('添加成功！');
|
||||
done();
|
||||
getList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
const stageRowUpdate = (row, index, done, loading) => {
|
||||
console.info('stageRowUpdate');
|
||||
editPlantingStage(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('更新成功！');
|
||||
done();
|
||||
getList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
const stageClose = () => {
|
||||
isShowVal.value = false;
|
||||
emit('close');
|
||||
};
|
||||
</script>
|
||||
@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<div class="inputs-list-warp">
|
||||
<el-row v-if="!disabledVal" :gutter="20">
|
||||
<template v-for="(n, index) in inputsList" :key="index">
|
||||
<el-col :span="10">
|
||||
<el-form-item label="投入品" label-width="80px">
|
||||
<el-cascader v-model="n.id" :options="materialTypes" :props="{ value: 'id', label: 'dataName', checkStrictly: true }" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<el-form-item label="预估投入量" label-width="100px">
|
||||
<div class="right-warp">
|
||||
<div class="right-item">
|
||||
<el-input-number v-model="n.num" :min="1">
|
||||
<template #suffix>
|
||||
<span>{{ n.unit }}</span>
|
||||
</template>
|
||||
</el-input-number>
|
||||
</div>
|
||||
<div class="right-item right-do">
|
||||
<el-icon :size="'20'" :color="color" @click="addVal">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<el-icon :size="'20'" :color="color" @click="delVal(index)">
|
||||
<Remove />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
<el-row v-else :gutter="20" class="read-only">
|
||||
<template v-for="(m, indexm) in listData" :key="indexm">
|
||||
<el-col :span="16">
|
||||
<el-cascader
|
||||
v-model="m.id"
|
||||
:options="materialTypes"
|
||||
style="width: 150px"
|
||||
disabled
|
||||
:props="{ value: 'id', label: 'dataName', checkStrictly: true }"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<span>{{ m.num }}</span>
|
||||
<span>{{ m.unit }}</span>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import inputSuppliesApis from '@/apis/inputSuppliesApi';
|
||||
import { randomNumber } from '@/utils/index';
|
||||
import { isEmpty } from '@/utils';
|
||||
|
||||
const app = useApp();
|
||||
const emit = defineEmits(['']);
|
||||
|
||||
const props = defineProps({
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const { getMaterailTypes } = inputSuppliesApis;
|
||||
let inputsList = reactive([]);
|
||||
const materialTypes = reactive([]);
|
||||
|
||||
async function getTypes() {
|
||||
let res = await getMaterailTypes();
|
||||
if (res.code == 200) {
|
||||
materialTypes.push(...res.data);
|
||||
console.log('types', materialTypes);
|
||||
}
|
||||
}
|
||||
|
||||
let listData = reactive([]);
|
||||
let disabledVal = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
getTypes();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => (props.isDisabled, props.list),
|
||||
() => {
|
||||
disabledVal.value = props.isDisabled;
|
||||
inputsList = props.list.length > 0 ? props.list : reactive([{ id: '', num: 1, unit: 'ml' }]);
|
||||
listData = [];
|
||||
listData = props.list;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
const addVal = () => {
|
||||
// let Id = randomNumber(20);
|
||||
// console.info('生成id', Id);
|
||||
inputsList.push({ id: '', num: 1, unit: 'ml' });
|
||||
};
|
||||
|
||||
const delVal = (index) => {
|
||||
if (index != undefined) {
|
||||
if (inputsList.length < 2) {
|
||||
return app.$message.error('请保留至少一个投入品');
|
||||
}
|
||||
inputsList.shift(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
const saveList = () => {
|
||||
let list = [];
|
||||
if (inputsList.length < 2) {
|
||||
if (inputsList[0].id == '' || !inputsList[0].id) {
|
||||
return app.$message.error('请选择投入品');
|
||||
}
|
||||
}
|
||||
list = inputsList.filter((m) => {
|
||||
return !isEmpty(m.id);
|
||||
});
|
||||
|
||||
return list;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
saveList,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.inputs-list-warp {
|
||||
border-radius: 4px;
|
||||
background-color: #ffffff;
|
||||
.right-warp {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
.right-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.right-do {
|
||||
padding-left: 16px;
|
||||
::v-deep() {
|
||||
.el-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed #e6e6e6;
|
||||
margin: 0 16px 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.read-only {
|
||||
font-size: 12px !important;
|
||||
::v-deep() {
|
||||
.el-input__wrapper {
|
||||
box-shadow: 0 0 0 0 red !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.el-input__inner {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.el-input__suffix {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,358 +0,0 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-dialog v-model="isShowVal" title="种植阶段详情" width="1000" center @closed="stageClose">
|
||||
<avue-crud
|
||||
ref="stateCrudRef"
|
||||
v-model="stageState.form"
|
||||
v-model:search="stageState.query"
|
||||
v-model:page="stageState.pageData"
|
||||
:table-loading="stageState.loading"
|
||||
:data="stageState.data"
|
||||
:option="stageState.options"
|
||||
@refresh-change="stageRefresh"
|
||||
@search-reset="stageSearch"
|
||||
@search-change="stageSearch"
|
||||
@selection-change="stageSelection"
|
||||
@current-change="stageCurrent"
|
||||
@size-change="stageSize"
|
||||
@row-del="stageRowDel"
|
||||
@row-save="stageRowSave"
|
||||
@row-update="stageRowUpdate"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="Plus" @click="onStateAdd">新增</el-button>
|
||||
</template>
|
||||
|
||||
<template #stage="{ row }">
|
||||
<el-tag size="small">{{ stageObj[row.stage] }}</el-tag>
|
||||
</template>
|
||||
|
||||
<template #workTime="{ row }">
|
||||
{{ row.operationDate }}
|
||||
</template>
|
||||
|
||||
<template #input-form="{ row }">
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<inputs ref="refinputs" :list="stageState.currentRow.input" :is-disabled="false"></inputs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #input="{ row }">
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<inputs ref="refinputs" :is-disabled="true" :list="row.input"></inputs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="stageState.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getPlantingStage, savePlantingStage, editPlantingStage, delPlantingStage } from '@/apis/land.js';
|
||||
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
|
||||
import inputs from '../component/inputsList.vue';
|
||||
|
||||
const props = defineProps({
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
rowOriginal: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
let refinputs = ref(null);
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const stateCrudRef = ref(null);
|
||||
const stageOptions = reactive([
|
||||
{ value: 0, label: '苗期' },
|
||||
{ value: 1, label: '花果期' },
|
||||
{ value: 2, label: '采收期' },
|
||||
]);
|
||||
|
||||
const workOptions = reactive([
|
||||
{ label: '作业计划1', value: '000001' },
|
||||
{ label: '作业计划2', value: '000002' },
|
||||
]);
|
||||
|
||||
const stageObj = reactive({
|
||||
0: '苗期',
|
||||
1: '花果期',
|
||||
2: '采收期',
|
||||
});
|
||||
|
||||
const handleWorkChange = async (value, form, done) => {
|
||||
stageState.form.workTime = value.item?.workTime || '';
|
||||
};
|
||||
|
||||
const isShowVal = ref(false);
|
||||
let currentRow = reactive({});
|
||||
|
||||
const loadList = () => {
|
||||
if (isShowVal.value) {
|
||||
// console.info('loadList', props);
|
||||
getStageList();
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
isShowVal.value = props.isShow;
|
||||
currentRow = props.rowOriginal;
|
||||
loadList();
|
||||
// console.info('onMounted', props);
|
||||
});
|
||||
watch(
|
||||
() => (props.isShow, props.rowOriginal),
|
||||
() => {
|
||||
isShowVal.value = props.isShow;
|
||||
currentRow = props.rowOriginal;
|
||||
console.info('watch', props);
|
||||
loadList();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const stageState = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
stage: null,
|
||||
},
|
||||
form: {},
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtn: false,
|
||||
selection: false,
|
||||
group: [
|
||||
{
|
||||
prop: 'inputs',
|
||||
label: '投入品',
|
||||
column: [
|
||||
{
|
||||
prop: 'input',
|
||||
span: 24,
|
||||
labelWidth: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
column: [
|
||||
{
|
||||
prop: 'input',
|
||||
label: '投入品',
|
||||
editDisplay: false,
|
||||
addDisplay: false,
|
||||
span: 24,
|
||||
labelWidth: 0,
|
||||
},
|
||||
{
|
||||
label: '所属阶段',
|
||||
prop: 'stage',
|
||||
type: 'select',
|
||||
search: true,
|
||||
dicData: stageOptions,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
editDisplay: true,
|
||||
addDisplay: true,
|
||||
},
|
||||
{
|
||||
label: '作业类型',
|
||||
prop: 'workId',
|
||||
type: 'select',
|
||||
search: false,
|
||||
remote: false,
|
||||
width: '160px',
|
||||
showOverflowTooltip: true,
|
||||
props: {
|
||||
label: 'workType',
|
||||
value: 'id',
|
||||
},
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/land-resource/planManage/workPage?current=1&size=999`,
|
||||
dicFormatter: (res) => res.data.records ?? [],
|
||||
rules: { required: true, message: '请选择', trigger: 'blur' },
|
||||
change: handleWorkChange,
|
||||
editDisplay: true,
|
||||
addDisplay: true,
|
||||
},
|
||||
{
|
||||
label: '作业时间',
|
||||
prop: 'workTime',
|
||||
rules: { required: true, message: '请输入', trigger: 'blur' },
|
||||
addDisabled: true,
|
||||
editDisplay: false,
|
||||
addDisplay: false,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => stageRowEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => stageRowDel(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
async function getStageList() {
|
||||
stageState.loading = true;
|
||||
getPlantingStage({ ...stageState.query, planId: currentRow.id })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
const { current, size, total, records } = res.data;
|
||||
// stageState.data = records || [];
|
||||
stageState.data =
|
||||
records.map((m) => {
|
||||
return { ...m, input: m.input ? JSON.parse(m.input) : [] };
|
||||
}) || [];
|
||||
stageState.pageData = {
|
||||
currentPage: current || 1,
|
||||
pageSize: size || 10,
|
||||
total: total,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
stageState.data = [];
|
||||
})
|
||||
.finally(() => {
|
||||
stageState.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
const stageSearch = (params, done) => {
|
||||
if (done) done();
|
||||
stageState.query = params;
|
||||
stageState.query.current = 1;
|
||||
getStageList();
|
||||
};
|
||||
|
||||
const stageSelection = (rows) => {
|
||||
stageState.selection = rows;
|
||||
};
|
||||
|
||||
const stageCurrent = (current) => {
|
||||
stageState.query.current = current;
|
||||
getStageList();
|
||||
};
|
||||
|
||||
const stageSize = (size) => {
|
||||
stageState.query.size = size;
|
||||
getStageList();
|
||||
};
|
||||
|
||||
const stageRowDel = (row, index, done) => {
|
||||
if (isEmpty(row)) return;
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
console.info('删除');
|
||||
delPlantingStage({ id: row.id })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('删除成功！');
|
||||
getStageList();
|
||||
done();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
const stageRowEdit = (row) => {
|
||||
stageState.currentRow = row;
|
||||
stateCrudRef.value.rowEdit(row);
|
||||
};
|
||||
|
||||
const onStateAdd = () => {
|
||||
stageState.currentRow = {};
|
||||
if (!currentRow.id) {
|
||||
app.$message.error('请选择种植规划');
|
||||
return;
|
||||
}
|
||||
stateCrudRef.value.rowAdd({});
|
||||
};
|
||||
|
||||
const stageRowSave = (row, done, loading) => {
|
||||
row.planId = currentRow.id;
|
||||
row.input = JSON.stringify(refinputs.value ? refinputs.value.saveList() : []);
|
||||
console.info('stageRowSave', row);
|
||||
savePlantingStage({ ...row })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('添加成功！');
|
||||
done();
|
||||
getStageList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
const stageRowUpdate = (row, index, done, loading) => {
|
||||
console.info('stageRowUpdate');
|
||||
row.input = JSON.stringify(refinputs.value ? refinputs.value.saveList() : []);
|
||||
editPlantingStage(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('更新成功！');
|
||||
done();
|
||||
getStageList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
const stageClose = () => {
|
||||
isShowVal.value = false;
|
||||
emit('close');
|
||||
};
|
||||
</script>
|
||||
@ -1,486 +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"
|
||||
: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"
|
||||
@row-click="rowClick"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
|
||||
<el-button type="primary" icon="Upload" @click="onImport">导入</el-button>
|
||||
<el-button type="success" icon="download" @click="onExport">导出</el-button>
|
||||
</template>
|
||||
|
||||
<template #landClassificationType="{ row }">
|
||||
<el-tag type="primary" :hit="true" size="small" effect="plain">
|
||||
{{ landClassificationType[row.landClassificationType] || '未知' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<template #planDate-form="{ row, column, value }">
|
||||
<el-date-picker
|
||||
v-model="infoFirst.planDate"
|
||||
type="date"
|
||||
placeholder="请选择种植日期"
|
||||
:disabled-date="disabledDate"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY/MM/DD"
|
||||
:size="size"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #planId="{ row }">
|
||||
{{ row.planName }}
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<stageList :is-show="stageShow" :row-original="currentRowVal" @close="stageHide"></stageList>
|
||||
<historyList :is-show="historyShow" :row-original="currentRowVal" @close="historyHide"></historyList>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import {
|
||||
getPlanList,
|
||||
savePlan,
|
||||
exportPlan,
|
||||
editAlan,
|
||||
delPlan,
|
||||
getPlantingStage,
|
||||
savePlantingStage,
|
||||
editPlantingStage,
|
||||
delPlantingStage,
|
||||
} from '@/apis/land.js';
|
||||
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
|
||||
import stageList from '../../component/plantPlan/component/stage.vue';
|
||||
import historyList from '../../component/plantPlan/component/history.vue';
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const crudRef = ref(null);
|
||||
const stateCrudRef = ref(null);
|
||||
const stageOptions = reactive([
|
||||
{ value: '0', label: '苗期' },
|
||||
{ value: '1', label: '花果期' },
|
||||
{ value: '2', label: '采收期' },
|
||||
]);
|
||||
|
||||
const workOptions = reactive([
|
||||
{ label: '作业计划1', value: '000001' },
|
||||
{ label: '作业计划2', value: '000002' },
|
||||
]);
|
||||
|
||||
let stageShow = ref(false);
|
||||
let currentRowVal = reactive({});
|
||||
let historyShow = ref(false);
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
form: {},
|
||||
selection: [],
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtn: false,
|
||||
rowKey: 'landId',
|
||||
searchSpan: 6,
|
||||
searchGutter: 80,
|
||||
searchMenuPosition: 'center',
|
||||
column: [
|
||||
{
|
||||
label: '地块名',
|
||||
type: 'input',
|
||||
prop: 'landName',
|
||||
search: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
width: '180px',
|
||||
showOverflowTooltip: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{ label: '地址', prop: 'address', width: '240px', showOverflowTooltip: true, addDisplay: false, editDisplay: false },
|
||||
{
|
||||
label: '种植产物',
|
||||
type: 'input',
|
||||
prop: 'crop',
|
||||
search: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '产权人',
|
||||
type: 'input',
|
||||
prop: 'owner',
|
||||
search: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '农用地分类',
|
||||
prop: 'landClassificationType',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '面积',
|
||||
prop: 'area',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{ label: '坐标', prop: 'coordinate', width: '120px', showOverflowTooltip: true, addDisplay: false, editDisplay: false },
|
||||
{
|
||||
label: '土壤类型',
|
||||
prop: 'soilType',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '种子供应商',
|
||||
prop: 'seedSupplier',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '年度计划',
|
||||
prop: 'planId',
|
||||
type: 'select',
|
||||
remote: false,
|
||||
width: '160px',
|
||||
showOverflowTooltip: true,
|
||||
props: {
|
||||
label: 'planName',
|
||||
value: 'id',
|
||||
},
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/land-resource/annualManage/page`,
|
||||
dicFormatter: (res) => res.data.records ?? [],
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '种植日期',
|
||||
prop: 'planDate',
|
||||
width: '180px',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
validator: (rule, value, callback) => {
|
||||
if (!infoFirst.value.planDate || infoFirst.value.planDate == '') {
|
||||
callback(new Error('请选择'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => rowEdit(row),
|
||||
},
|
||||
{
|
||||
name: '种植阶段',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => toStage(row),
|
||||
},
|
||||
{
|
||||
name: '规划记录',
|
||||
icon: 'Memo',
|
||||
event: ({ row }) => toHistory(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => rowDel(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
const landClassificationType = reactive({
|
||||
0: '耕地',
|
||||
1: '果园',
|
||||
2: '茶园',
|
||||
3: '其他园地',
|
||||
4: '林地',
|
||||
5: '草地',
|
||||
6: '其他农用地',
|
||||
7: '农村宅基地',
|
||||
});
|
||||
|
||||
let infoFirst = ref({
|
||||
planId: '', //种植规划主键id
|
||||
planDate: '',
|
||||
});
|
||||
|
||||
const stageObj = reactive({
|
||||
0: '苗期',
|
||||
1: '花果期',
|
||||
2: '采收期',
|
||||
});
|
||||
|
||||
// 加载
|
||||
const loadData = () => {
|
||||
state.loading = true;
|
||||
getPlanList(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;
|
||||
console.info('selectionChange', state.selection);
|
||||
};
|
||||
|
||||
const handleIds = () => {
|
||||
let datalist = state.selection.map((m) => {
|
||||
return { landId: m.landId, landName: m.landName };
|
||||
});
|
||||
|
||||
let selectIdlist = uniqueObjects(datalist, 'landId');
|
||||
let selectIdsVal = selectIdlist.map((n) => {
|
||||
return n.landId;
|
||||
});
|
||||
|
||||
return selectIdsVal.toString() || '';
|
||||
};
|
||||
// 新增
|
||||
const rowSave = (row, done, loading) => {
|
||||
console.info('新增', infoFirst.value);
|
||||
row.planDate = infoFirst.value.planDate || '';
|
||||
row.landId = handleIds();
|
||||
savePlan(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('添加成功！');
|
||||
done();
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const rowEdit = (row) => {
|
||||
console.info('编辑', row);
|
||||
crudRef.value.rowEdit(row);
|
||||
};
|
||||
const rowUpdate = (row, index, done, loading) => {
|
||||
console.info('更新');
|
||||
editAlan(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(() => {
|
||||
console.info('删除');
|
||||
delPlan({ id: row.id })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('删除成功！');
|
||||
// done();
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const toStage = (row) => {
|
||||
currentRowVal = row;
|
||||
stageShow.value = true;
|
||||
console.info('toStage', currentRowVal);
|
||||
};
|
||||
|
||||
//导入
|
||||
const onImport = () => {};
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
if (isEmpty(state.data)) {
|
||||
app.$message.error('当前暂时没有可供导出的数据！');
|
||||
return;
|
||||
}
|
||||
state.loading = true;
|
||||
const fileName = '种植规划明细表';
|
||||
exportPlan(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;
|
||||
});
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
infoFirst.value.planDate = infoFirst.value.planId = '';
|
||||
let ids = handleIds();
|
||||
if (ids == '') {
|
||||
return app.$message.error('先选择土地！');
|
||||
}
|
||||
crudRef.value.rowAdd();
|
||||
};
|
||||
|
||||
function uniqueObjects(arr, key) {
|
||||
return arr.reduce((acc, current) => {
|
||||
const duplicate = acc.find((element) => element[key] === current[key]);
|
||||
if (!duplicate) {
|
||||
acc.push(current);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
}
|
||||
|
||||
//种植阶段相关
|
||||
const rowClick = (row) => {
|
||||
state.currentRow = { ...row };
|
||||
console.info('rowClick', state.currentRow);
|
||||
};
|
||||
|
||||
const stageHide = () => {
|
||||
stageShow.value = false;
|
||||
};
|
||||
|
||||
const toHistory = (row) => {
|
||||
currentRowVal = row;
|
||||
historyShow.value = true;
|
||||
};
|
||||
const historyHide = () => {
|
||||
historyShow.value = false;
|
||||
};
|
||||
</script>
|
||||
@ -7,7 +7,7 @@
|
||||
<el-input v-model="searchForm.name" placeholder="请输入关键词" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item lable="">
|
||||
<AreaCascader v-model:region-code="searchForm.regionCode" v-model:grid-id="searchForm.id" :width="600" />
|
||||
<AreaCascader v-model:region-code="searchForm.regionCode" v-model:grid-id="searchForm.gridId" :width="600" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch"> 搜索 </el-button>
|
||||
@ -16,10 +16,10 @@
|
||||
</el-form>
|
||||
<!-- 四个固定 Tabs -->
|
||||
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
|
||||
<!-- <el-tab-pane label="待提交" name="0" /> -->
|
||||
<el-tab-pane label="待审核" name="1" />
|
||||
<el-tab-pane label="已通过" name="2" />
|
||||
<el-tab-pane label="已驳回" name="0" />
|
||||
<!-- <el-tab-pane label="待提交" name="-1" /> -->
|
||||
<el-tab-pane label="待审核" name="0" />
|
||||
<el-tab-pane label="已通过" name="1" />
|
||||
<el-tab-pane label="已驳回" name="2" />
|
||||
</el-tabs>
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
@ -30,34 +30,132 @@
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
>
|
||||
<!-- <template #menu-left>
|
||||
<el-button type="primary" icon="Plus" @click="handleAdd">新增网格</el-button>
|
||||
</template> -->
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="crudOptions.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog :key="dialogTitle" v-model="visible" :title="dialogTitle" width="60%" align-center :draggable="true">
|
||||
<el-form ref="form" :model="formData" :rules="rules" :disabled="isReadonly" label-width="100px" class="form-item">
|
||||
<p class="form-title">填写网格信息</p>
|
||||
<el-form-item label="网格名称" prop="gridName">
|
||||
<el-input v-model="formData.gridName" placeholder="请输入网格名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属行政区域" prop="gridAreaCode">
|
||||
<AreaSelect v-model="formData.gridAreaCode" :label="null" :emit-path="false" />
|
||||
</el-form-item>
|
||||
<el-form-item label="网格化地图" prop="scopeImg">
|
||||
<FileUploader v-model="formData.scopeImg" :limit="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="note">
|
||||
<el-input v-model="formData.note" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-tabs v-model="activeFormTab" class="tabs-wrapper">
|
||||
<el-tab-pane label="土地基本信息" name="basic">
|
||||
<p class="form-title">基本信息</p>
|
||||
<el-form ref="basicFormRef" :model="formData" :disabled="isReadonly" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="地块名称" prop="landName">
|
||||
<el-input v-model="formData.landName" placeholder="请输入地块名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="土地类型" prop="landType">
|
||||
<el-tree-select
|
||||
v-model="formData.landType"
|
||||
:data="landTypeOptions"
|
||||
:props="treeProps"
|
||||
placeholder="选择土地类型"
|
||||
clearable
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
@change="handleLandTypeChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="具体位置" prop="address">
|
||||
<el-input v-model="formData.address" placeholder="请输入具体位置" />
|
||||
</el-form-item>
|
||||
<el-form-item label="土壤类型" prop="soilTypeId">
|
||||
<url-select
|
||||
v-model="formData.soilTypeId"
|
||||
placeholder="选择土壤类型"
|
||||
url="/land-resource/baseInfo/soilTypePage"
|
||||
:params="{ current: 1, size: 100 }"
|
||||
label-key="soilType"
|
||||
value-key="id"
|
||||
:clearable="true"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="土地照片" prop="landUrl">
|
||||
<FileUploader v-model="formData.landUrl" :limit="1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="面积(亩)" prop="area">
|
||||
<el-input-number v-model="formData.area" :min="0" :precision="2" :step="0.1" controls-position="right" style="width: 100%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="" label-width="0" prop="gridId">
|
||||
<AreaCascader v-model:region-code="formData.gridAreaCode" v-model:grid-id="formData.gridId" label="" :split-rows="true" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="土地范围" prop="scope">
|
||||
<el-input v-model="formData.scope" placeholder="请输入土地范围" />
|
||||
<!-- <Attrs v-model:attrs="formData.scope" type="add" accept="image/*" /> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="土地承包信息" name="property">
|
||||
<p class="form-title">承包信息</p>
|
||||
<el-form ref="propertyFormRef" :model="formData" :disabled="isReadonly" label-width="150px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="土地承包经营权人" prop="propertyName">
|
||||
<el-input v-model="formData.propertyName" placeholder="请输入产权人姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" prop="propertyPhone">
|
||||
<el-input v-model="formData.propertyPhone" placeholder="请输入产权人联系方式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="土地经营权证书编号" prop="landCode">
|
||||
<el-input v-model="formData.landCode" placeholder="请输入产权编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="土地经营权证书" prop="propertyCertificateUrl">
|
||||
<FileUploader v-model="formData.propertyCertificateUrl" :limit="1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12"></el-col> -->
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="土地流转信息" name="use">
|
||||
<p class="form-title">流转信息</p>
|
||||
<el-form ref="useForm" :model="formData" label-width="120px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否土地流转" prop="landTransfer">
|
||||
<el-radio-group v-model="formData.landTransfer" :disabled="isReadonly">
|
||||
<el-radio label="1">是</el-radio>
|
||||
<el-radio label="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.landTransfer === '1'" label="土地受让方" prop="landUseName">
|
||||
<el-input v-model="formData.landUseName" placeholder="请输入土地受让方" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.landTransfer === '1'" label="联系电话" prop="landUsePhone">
|
||||
<el-input v-model="formData.landUsePhone" placeholder="请输入土地受让方联系方式" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.landTransfer === '1'" label="流转合同" prop="landCertificateUrl">
|
||||
<FileUploader v-model="formData.landCertificateUrl" :limit="1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button v-if="!isReadonly" type="primary" @click="handleSubmit()"> 保存 </el-button>
|
||||
</div>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
|
||||
<!-- 土地基本信息 tab -->
|
||||
<template v-if="activeFormTab === 'basic'">
|
||||
<el-button type="primary" @click="submitBasicInfo">暂存</el-button>
|
||||
<el-button @click="activeFormTab = 'property'">下一步</el-button>
|
||||
</template>
|
||||
|
||||
<!-- 土地产权信息 tab -->
|
||||
<template v-else>
|
||||
<el-button @click="activeFormTab = 'basic'">上一步</el-button>
|
||||
<el-button v-if="formData.id" type="primary" @click="submitPropertyInfo">提交</el-button>
|
||||
<el-button v-else type="primary" @click="submitAll">保存</el-button>
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@ -72,6 +170,7 @@ import { CRUD_OPTIONS } from '@/config';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { mockData } from './landData';
|
||||
import request from '@/utils/axios';
|
||||
|
||||
const UserStore = useUserStore();
|
||||
const user = UserStore.getUserInfo();
|
||||
@ -83,6 +182,7 @@ const visible = ref(false);
|
||||
const isReadonly = ref(false);
|
||||
const dialogTitle = ref();
|
||||
const activeTab = ref('1');
|
||||
const activeFormTab = ref('basic');
|
||||
const formData = ref({
|
||||
gridName: '',
|
||||
gridAreaCode: '',
|
||||
@ -101,11 +201,12 @@ const pageData = ref({
|
||||
total: 0,
|
||||
});
|
||||
const searchForm = ref({
|
||||
gridName: '',
|
||||
keyword: '',
|
||||
landStatus: 1,
|
||||
regionCode: '',
|
||||
gridId: '',
|
||||
id: '',
|
||||
status: -1,
|
||||
landTypeName: '草地',
|
||||
});
|
||||
const initialSearchForm = { ...searchForm.value };
|
||||
const resetSearch = () => {
|
||||
@ -137,7 +238,7 @@ const crudOptions = reactive({
|
||||
{ label: '地块编号', prop: 'id', width: 160 },
|
||||
{ label: '地块名称', prop: 'landName', width: 170 },
|
||||
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||
{ label: '土地分类', prop: 'landTypeName' },
|
||||
{ label: '土地分类', prop: 'fullLandType' },
|
||||
{ label: '土壤类型', prop: 'soilTypeName' },
|
||||
{ label: '所属行政区域', prop: 'fullRegionName', width: 160 },
|
||||
{ label: '所属网格', prop: 'gridName', width: 90 },
|
||||
@ -145,15 +246,13 @@ const crudOptions = reactive({
|
||||
{ label: '土地承包经营人', prop: 'propertyName' },
|
||||
{ label: '联系电话', prop: 'propertyPhone' },
|
||||
{ label: '土地经营权证书编号', prop: 'landCode', width: 160 },
|
||||
{ label: '是否土地流转', prop: 'isTransfer' },
|
||||
{ label: '是否土地流转', prop: 'landTransfer' },
|
||||
{ label: '土地受让方', prop: 'transferName' },
|
||||
{ label: '受让方联系电话', prop: 'transferPhone', width: 100 },
|
||||
{ label: '流转合同', prop: 'transferContract' },
|
||||
{ label: '信息填报人', prop: 'fillName' },
|
||||
{ label: '信息填报单位', prop: 'fillGroup' },
|
||||
{ label: '信息填报时间', prop: 'fillTime' },
|
||||
// { label: '信息更新人', prop: 'updateName' },
|
||||
// { label: '信息更新单位', prop: 'updateGroup' },
|
||||
{ label: '信息更新时间', prop: 'updateTime' },
|
||||
],
|
||||
actions: [
|
||||
@ -176,8 +275,7 @@ const crudOptions = reactive({
|
||||
],
|
||||
});
|
||||
const handleTabChange = ({ name }) => {
|
||||
// activeTab.value = name;
|
||||
console.log('切换tab', activeTab.value);
|
||||
searchForm.value.landStatus = Number(activeTab.value);
|
||||
getData();
|
||||
};
|
||||
const handleRefresh = async () => {
|
||||
@ -190,17 +288,17 @@ const handleCurrentChange = (val) => {
|
||||
const handleSizeChange = (val) => {
|
||||
pageData.value.pageSize = val;
|
||||
};
|
||||
const handleView = (row) => {
|
||||
const handleView = async (row) => {
|
||||
isReadonly.value = true;
|
||||
formData.value = { ...row };
|
||||
formData.value = await getLandDetail(row.id);
|
||||
dialogTitle.value = '查看网格';
|
||||
// visible.value = true;
|
||||
visible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
isReadonly.value = false;
|
||||
formData.value = { ...row };
|
||||
dialogTitle.value = '编辑网格';
|
||||
// visible.value = true;
|
||||
visible.value = true;
|
||||
};
|
||||
const handleDelete = async (row) => {
|
||||
console.log('删除', row);
|
||||
@ -229,13 +327,13 @@ const handleSubmit = async () => {
|
||||
console.log('提交表单:', formData.value);
|
||||
try {
|
||||
if (dialogTitle.value === '新增网格') {
|
||||
await createGrid(formData.value);
|
||||
await createLand(formData.value);
|
||||
ElMessage.success('新增成功');
|
||||
resetForm();
|
||||
visible.value = false;
|
||||
getData();
|
||||
} else {
|
||||
await updateGrid(formData.value);
|
||||
await editLand(formData.value);
|
||||
ElMessage.success('更新成功');
|
||||
resetForm();
|
||||
visible.value = false;
|
||||
@ -249,28 +347,44 @@ const handleSubmit = async () => {
|
||||
// ---------------------------------------------------------------------
|
||||
// 业务代码
|
||||
// ---------------------------------------------------------------------
|
||||
import { createGrid, updateGrid, deleteGrid, fetchGridList, getGridDetail, exportGrid } from '@/apis/landResourceManagement/gridManagement';
|
||||
import { createLand, deleteLand, editLand, fetchLandList, getLandById } from '@/apis/landResourceManagement/landManagement';
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
fetchLandTypeData();
|
||||
});
|
||||
const getData = async () => {
|
||||
// const filteredParams = filterObject(searchForm.value);
|
||||
// const response = await fetchGridList(filteredParams);
|
||||
// crudData.value = Array.isArray(response.data.records) ? response.data.records : [];
|
||||
loading.value = true;
|
||||
// 模拟接口延迟
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
crudData.value = mockData
|
||||
.filter((item) => item.status === activeTab.value)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
landTypeName: '草地',
|
||||
}));
|
||||
const filteredParams = filterObject(searchForm.value);
|
||||
const response = await fetchLandList(filteredParams);
|
||||
crudData.value = Array.isArray(response.data.records) ? response.data.records : [];
|
||||
pageData.value.total = crudData.value.length;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
const getLandDetail = async (id) => {
|
||||
const response = await getLandById(id);
|
||||
return response.data;
|
||||
};
|
||||
const landTypeOptions = ref([]);
|
||||
const treeProps = ref({
|
||||
value: 'id',
|
||||
label: 'landType',
|
||||
children: 'children',
|
||||
// disabled: (data) => {
|
||||
// return data.children && data.children.length > 0;
|
||||
// },
|
||||
});
|
||||
const fetchLandTypeData = async () => {
|
||||
try {
|
||||
const response = await request.get('/land-resource/baseInfo/landTree', { params: { status: '1' } });
|
||||
if (response.code === 200) {
|
||||
landTypeOptions.value = response.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取土地类型数据失败', error);
|
||||
}
|
||||
};
|
||||
const handleAdd = () => {
|
||||
console.log('handleAdd');
|
||||
resetForm();
|
||||
@ -301,7 +415,7 @@ h1 {
|
||||
}
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 20px;
|
||||
height: calc(100vh - 300px);
|
||||
// height: calc(100vh - 300px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.form-title {
|
||||
@ -326,4 +440,39 @@ h1 {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
.tabs-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// background-color: #7daaaa;
|
||||
|
||||
.el-tabs__header {
|
||||
width: 100%;
|
||||
|
||||
.el-tabs__nav-scroll {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
font-size: 16px;
|
||||
color: #555555;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
:deep(.el-tabs__content) {
|
||||
padding: 20px;
|
||||
// background-color: #af8686;
|
||||
border-radius: 4px;
|
||||
width: 80%;
|
||||
height: calc(100vh - 400px);
|
||||
overflow-y: auto;
|
||||
|
||||
.el-tab-pane {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
// background-color: #555555;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="land-page">
|
||||
<LandSearch v-model:search="searchForm" @search="fetchList" />
|
||||
<avue-crud ref="crudRef" v-model:page="pagination" :data="list" :option="crudOptions" :loading="loading">
|
||||
<template #menu-left>
|
||||
<el-button type="primary" @click="openForm('create')">新增</el-button>
|
||||
</template>
|
||||
<template #menu="{ row }">
|
||||
<el-button size="small" @click="openForm('view', row)">查看</el-button>
|
||||
<el-button size="small" type="primary" @click="openForm('edit', row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<LandForm v-model:visible="formVisible" :mode="formMode" :initial-data="formData" :type="type" @submit="handleSubmit" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import LandSearch from './LandSearch.vue';
|
||||
import LandForm from './LandForm.vue';
|
||||
import { useLandCrud } from '@/composables/useLandCrud';
|
||||
|
||||
const props = defineProps({ type: { type: String, default: '' } });
|
||||
|
||||
const { list, pagination, searchForm, loading, fetchList, handleDelete, handleSubmit, formVisible, formMode, formData, openForm } = useLandCrud(
|
||||
props.type
|
||||
);
|
||||
|
||||
watch(() => props.type, fetchList, { immediate: true });
|
||||
</script>
|
||||
@ -1,7 +0,0 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div>123</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,392 +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 #search="{ size }">
|
||||
<AreaCascader v-model:value="state.query" placeholder="选择行政区域与网格" :width="400" />
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<template #detail="scope">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="基本信息">
|
||||
<avue-detail :option="baseDetailOption" :data="scope.row"></avue-detail>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="网格地图">
|
||||
<div v-if="scope.row.mapUrl" style="height: 400px">
|
||||
<img :src="scope.row.mapUrl" style="max-width: 100%; max-height: 100%" />
|
||||
</div>
|
||||
<el-empty v-else description="暂无地图数据"></el-empty>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="其他信息">
|
||||
<avue-detail :option="otherDetailOption" :data="scope.row"></avue-detail>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</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, UpdateEntity, DeleteEntity, ExportEntity } from '@/apis/resource/grid';
|
||||
|
||||
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,
|
||||
gridName: '',
|
||||
regionCode: '',
|
||||
},
|
||||
form: {},
|
||||
selection: [],
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtnText: '添加网格',
|
||||
// detail: true,
|
||||
// detailTitle: '详情',
|
||||
column: [
|
||||
{
|
||||
label: '网格编号',
|
||||
prop: 'id',
|
||||
addDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '网格名称',
|
||||
prop: 'gridName',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '所属行政区域',
|
||||
prop: 'gridAreaName',
|
||||
addDisplay: false,
|
||||
viewDisplay: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '所属行政区域',
|
||||
prop: 'cities',
|
||||
type: 'cascader',
|
||||
hide: true,
|
||||
span: 24,
|
||||
width: 300,
|
||||
addDisplay: true,
|
||||
editDisplay: true,
|
||||
viewDisplay: false,
|
||||
emitPath: false,
|
||||
props: {
|
||||
label: 'areaName',
|
||||
value: 'areaCode',
|
||||
children: 'areaChildVOS',
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicFormatter: (res) => res.data ?? [],
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '网格地图',
|
||||
prop: 'mapUrl',
|
||||
type: 'upload',
|
||||
hide: true,
|
||||
// action: `${VITE_APP_BASE_API}/system/file/upload`,
|
||||
},
|
||||
// {
|
||||
// label: '网格名称',
|
||||
// prop: 'gridName',
|
||||
// type: 'select',
|
||||
// addDisplay: false,
|
||||
// hide: true,
|
||||
// // search: true,
|
||||
// searchLabelWidth: 100,
|
||||
// dicUrl: `${VITE_APP_BASE_API}/land-resource/gridManage/page?regionCode={{key}}`,
|
||||
// props: {
|
||||
// label: 'gridName',
|
||||
// value: 'gridName',
|
||||
// },
|
||||
// dicHeaders: {
|
||||
// authorization: UserStore.token,
|
||||
// },
|
||||
// dicFormatter: (res) => res.data?.records,
|
||||
// },
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'note',
|
||||
type: 'textarea',
|
||||
span: 24,
|
||||
rows: 4,
|
||||
overHidden: true,
|
||||
// width: 200,
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
width: 200,
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: ({ row }) => rowView(row),
|
||||
},
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => rowEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => rowDel(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
const baseDetailOption = {
|
||||
column: [
|
||||
{
|
||||
label: '网格名称',
|
||||
prop: 'gridName',
|
||||
},
|
||||
{
|
||||
label: '所属行政区域',
|
||||
prop: 'gridAreaName',
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'note',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const otherDetailOption = {
|
||||
column: [
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
},
|
||||
// 可以添加更多字段...
|
||||
],
|
||||
};
|
||||
|
||||
// 加载
|
||||
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) => {
|
||||
crudRef.value.rowView(row);
|
||||
};
|
||||
|
||||
const setCity = (row) => {
|
||||
if (!isEmpty(row.cities)) {
|
||||
row.provinceCode = row?.cities[0] ?? null;
|
||||
row.cityCode = row?.cities[1] ?? null;
|
||||
row.gridAreaCode = row?.cities[4] ?? null;
|
||||
row.townCode = row?.cities[3] ?? null;
|
||||
row.village = row?.cities[4] ?? null;
|
||||
// row.village = row?.cities.join(',');
|
||||
}
|
||||
};
|
||||
|
||||
// 新增
|
||||
const rowSave = (row, done, loading) => {
|
||||
setCity(row);
|
||||
row.gridAreaCode = row.cities;
|
||||
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) => {
|
||||
const village = !isEmpty(row.village) ? row.village : [];
|
||||
row.cities = compact([row.provinceCode, row.cityCode, row.gridAreaCode ?? '', row.townCode ?? '', ...village]);
|
||||
crudRef.value.rowEdit(row);
|
||||
};
|
||||
const rowUpdate = (row, index, done, loading) => {
|
||||
setCity(row);
|
||||
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('删除成功！');
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 导出
|
||||
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>
|
||||
@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>网格化管理</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 组件逻辑可在此添加
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
}
|
||||
</style>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>计划</template>
|
||||
<script></script>
|
||||
<style></style>
|
||||
@ -1,375 +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, UpdateEntity, DeleteEntity, ExportEntity } from '@/apis/resource/grid';
|
||||
|
||||
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: 'gridArea',
|
||||
search: true,
|
||||
width: 200,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '网格名称',
|
||||
prop: 'gridName',
|
||||
search: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '网格区域',
|
||||
prop: 'gridAreaName',
|
||||
width: 300,
|
||||
display: false,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '网格区域',
|
||||
prop: 'cities',
|
||||
type: 'cascader',
|
||||
hide: true,
|
||||
addDisplay: true,
|
||||
editDisplay: true,
|
||||
viewDisplay: false,
|
||||
// multiple: true,
|
||||
// checkStrictly: true,
|
||||
// collapseTags: true,
|
||||
// emitPath: false,
|
||||
// checkDescendants: false,
|
||||
props: {
|
||||
label: 'areaName',
|
||||
value: 'areaCode',
|
||||
children: 'areaChildVOS',
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicFormatter: (res) => res.data ?? [],
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '网格管理员',
|
||||
prop: 'gridManager',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '联系方式',
|
||||
prop: 'contactInfo',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '省',
|
||||
prop: 'provinceCode',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '市',
|
||||
prop: 'cityCode',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '县/区',
|
||||
prop: 'gridAreaCode',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '乡镇',
|
||||
prop: 'townCode',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '乡镇',
|
||||
prop: 'village',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'note',
|
||||
type: 'textarea',
|
||||
span: 24,
|
||||
rows: 4,
|
||||
overHidden: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
width: 200,
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: ({ row }) => rowView(row),
|
||||
},
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => rowEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => rowDel(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
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) => {
|
||||
crudRef.value.rowView(row);
|
||||
};
|
||||
|
||||
const setCity = (row) => {
|
||||
if (!isEmpty(row.cities)) {
|
||||
row.provinceCode = row?.cities[0] ?? null;
|
||||
row.cityCode = row?.cities[1] ?? null;
|
||||
row.gridAreaCode = row?.cities[2] ?? null;
|
||||
row.townCode = row?.cities[3] ?? null;
|
||||
row.village = row?.cities[4] ?? null;
|
||||
// row.village = row?.cities.join(',');
|
||||
}
|
||||
};
|
||||
|
||||
// 新增
|
||||
const rowSave = (row, done, loading) => {
|
||||
setCity(row);
|
||||
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) => {
|
||||
const village = !isEmpty(row.village) ? row.village : [];
|
||||
row.cities = compact([row.provinceCode, row.cityCode, row.gridAreaCode ?? '', row.townCode ?? '', ...village]);
|
||||
crudRef.value.rowEdit(row);
|
||||
};
|
||||
const rowUpdate = (row, index, done, loading) => {
|
||||
setCity(row);
|
||||
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('删除成功！');
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 导出
|
||||
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>
|
||||
Loading…
x
Reference in New Issue
Block a user