Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
434d455940
@ -16,6 +16,6 @@ VITE_APP_UPLOAD_API = '/uploadApis'
|
|||||||
# VITE_APP_BASE_URL = 'http://47.109.205.240:8080'
|
# VITE_APP_BASE_URL = 'http://47.109.205.240:8080'
|
||||||
# VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9300'
|
# 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.88:8080'
|
||||||
VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
|
VITE_APP_UPLOAD_URL = 'http://192.168.18.88:8080'
|
||||||
VITE_APP_VIST_URL = 'http://192.168.18.99'
|
VITE_APP_VIST_URL = 'http://192.168.18.99'
|
||||||
|
|||||||
@ -13,8 +13,8 @@ VITE_APP_UPLOAD_API = '/uploadApis'
|
|||||||
# VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9204'
|
# VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9204'
|
||||||
|
|
||||||
# 内网测试库接口地址
|
# 内网测试库接口地址
|
||||||
VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
VITE_APP_BASE_URL = 'http://192.168.18.88:8080'
|
||||||
VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
|
VITE_APP_UPLOAD_URL = 'http://192.168.18.88:8080'
|
||||||
|
|
||||||
# 本地开发接口地址
|
# 本地开发接口地址
|
||||||
# VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
# VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||||
|
|||||||
135
sub-government-affairs-service/doc/API定义规范.md
Normal file
135
sub-government-affairs-service/doc/API定义规范.md
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
|
||||||
|
# 前端 API 定义规范（REST 风格）
|
||||||
|
|
||||||
|
> 版本：v1.0
|
||||||
|
> 日期：2025-07-01
|
||||||
|
> 风格：**RESTful**
|
||||||
|
> 适用范围：Vue3 / React / 模块化 JS 项目
|
||||||
|
> 目标：提升接口命名一致性，增强可维护性与可读性
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🌐 RESTful 命名规范
|
||||||
|
|
||||||
|
REST（Representational State Transfer）强调以资源为中心的接口设计，以下为规范核心：
|
||||||
|
|
||||||
|
### ✅ 基本动词与 HTTP 方法对应
|
||||||
|
|
||||||
|
| 动作 | HTTP 方法 | 路径示例 | 命名示例（函数） |
|
||||||
|
|--------------|------------|-------------------------------|---------------------------|
|
||||||
|
| 获取列表 | GET | `/users` | `fetchUserList` |
|
||||||
|
| 获取详情 | GET | `/users/:id` | `getUserById` |
|
||||||
|
| 创建 | POST | `/users` | `createUser` |
|
||||||
|
| 修改 | PUT/PATCH | `/users/:id` | `updateUser` |
|
||||||
|
| 删除 | DELETE | `/users/:id` | `deleteUserById` |
|
||||||
|
| 导出 | GET | `/users/export` | `exportUserExcel` |
|
||||||
|
| 上传 | POST | `/files/upload` | `uploadFile` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📁 文件组织结构
|
||||||
|
|
||||||
|
```bash
|
||||||
|
src/
|
||||||
|
├── apis/
|
||||||
|
│ ├── landResourceManagement/ # 土地资源管理
|
||||||
|
│ │ ├── plantingPlan/ # 种植规划
|
||||||
|
│ │ │ ├── index.js
|
||||||
|
│ │ ├── operationRecord/ # 作业记录
|
||||||
|
│ │ │ ├── index.js
|
||||||
|
│ │ ├── landIllegal/ # 土地违法处理
|
||||||
|
│ │ │ ├── index.js
|
||||||
|
│ │ ├── landManagement/ # 土地管理
|
||||||
|
│ │ │ ├── index.js
|
||||||
|
│ │ ├── landInspection/ # 土地巡查
|
||||||
|
│ │ │ ├── index.js
|
||||||
|
│ │ ├── gridManagement/ # 网格管理
|
||||||
|
│ │ │ ├── index.js
|
||||||
|
│ │ ├── gridMemberManagement/ # 网格员管理
|
||||||
|
│ │ │ ├── index.js
|
||||||
|
│ │ ├── basicInfoMaintenance/ # 基础信息维护
|
||||||
|
│ │ │ ├── index.js
|
||||||
|
│ │ ├── cropsManagement/ # 种植作物
|
||||||
|
│ │ │ ├── index.js
|
||||||
|
│ │ ├── index.js # 土地资源管理模块统一入口
|
||||||
|
│ ├── productionEntityManagement/ # 生产经营主体管理
|
||||||
|
│ │ ├── index.js
|
||||||
|
│ ├── inputManagement/ # 投入品管理
|
||||||
|
│ │ ├── index.js
|
||||||
|
│ ├── productTraceability/ # 农产品溯源
|
||||||
|
│ │ ├── index.js
|
||||||
|
│ ├── index.js # 项目统一入口文件
|
||||||
|
├── utils/
|
||||||
|
│ ├── axios.js # 封装的请求工具
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🧱 函数命名规范
|
||||||
|
|
||||||
|
接口定义应以 **动词+资源名** 格式命名函数（驼峰式 camelCase）：
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 用户模块 API 示例
|
||||||
|
import request from '@/utils/request';
|
||||||
|
|
||||||
|
export function fetchUserList(params) {
|
||||||
|
return request('/api/users', { method: 'GET', params });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getUserById(id) {
|
||||||
|
return request(`/api/users/${id}`, { method: 'GET' });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createUser(data) {
|
||||||
|
return request('/api/users', { method: 'POST', data });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateUser(id, data) {
|
||||||
|
return request(`/api/users/${id}`, { method: 'PUT', data });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteUserById(id) {
|
||||||
|
return request(`/api/users/${id}`, { method: 'DELETE' });
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🧠 组件方法命名建议
|
||||||
|
|
||||||
|
组件内部方法（UI逻辑处理）请统一以 `handle` 前缀区分，避免与 API 冲突：
|
||||||
|
|
||||||
|
```js
|
||||||
|
const handleAddUser = () => { ... };
|
||||||
|
const handleEditUser = (row) => { ... };
|
||||||
|
const handleDeleteUser = (id) => { ... };
|
||||||
|
const handleExportExcel = () => { ... };
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚫 命名反例
|
||||||
|
|
||||||
|
| 错误命名 | 问题说明 | 推荐命名 |
|
||||||
|
|------------------|----------------------------------------|--------------------------|
|
||||||
|
| `listUser` | 动词语义模糊 | `fetchUserList` |
|
||||||
|
| `editUserById` | 与 REST 风格不符 | `updateUser` |
|
||||||
|
| `addOrEditUser` | 接口职责不清晰 | `createUser` 或 `updateUser` |
|
||||||
|
| `removeUser` | 与 HTTP 方法不一致 | `deleteUserById` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🧾 附录：接口语义对照表
|
||||||
|
|
||||||
|
| 类型 | HTTP 方法 | REST URI 示例 | 函数命名示例 |
|
||||||
|
|-------------|------------|---------------------------|--------------------------|
|
||||||
|
| 查询列表 | GET | `/entities` | `fetchEntityList` |
|
||||||
|
| 查询详情 | GET | `/entities/:id` | `getEntityById` |
|
||||||
|
| 新增 | POST | `/entities` | `createEntity` |
|
||||||
|
| 修改 | PUT | `/entities/:id` | `updateEntity` |
|
||||||
|
| 删除 | DELETE | `/entities/:id` | `deleteEntityById` |
|
||||||
|
| 导出 | GET | `/entities/export` | `exportEntityExcel` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
256
sub-government-affairs-service/doc/组件文档.md
Normal file
256
sub-government-affairs-service/doc/组件文档.md
Normal file
@ -0,0 +1,256 @@
|
|||||||
|
# 文件上传组件 (FileUploader)
|
||||||
|
|
||||||
|
## 组件说明
|
||||||
|
|
||||||
|
文件上传组件用于实现文件的上传、预览和管理功能。支持图片上传、多文件上传、文件预览等功能。
|
||||||
|
|
||||||
|
## 基本用法
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<file-uploader
|
||||||
|
v-model="fileList"
|
||||||
|
:limit="5"
|
||||||
|
accept="image/*"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
const fileList = ref([]);
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 默认值 | 说明 |
|
||||||
|
| ---------- | ----------------- | ------------------------------------------------- | --------------- |
|
||||||
|
| modelValue | `Array \| String` | `[]` | 绑定值，图片路径数组或单个路径 |
|
||||||
|
| ossUrl | `String` | `'http://gov-cloud.oss-cn-chengdu.aliyuncs.com/'` | 回显时拼接图片完整路径使用 |
|
||||||
|
| limit | `Number` | `5` | 最多上传几张图片 |
|
||||||
|
| accept | `String` | `'image/*'` | 允许上传的文件类型 |
|
||||||
|
| readonly | `Boolean` | `false` | 是否只读模式，不可上传删除 |
|
||||||
|
|
||||||
|
|
||||||
|
## 事件
|
||||||
|
| 事件名 | 参数 | 说明 |
|
||||||
|
|-------|------|------|
|
||||||
|
| update:modelValue | 新的文件列表值（数组或字符串） | 当文件列表发生变化时触发 |
|
||||||
|
|
||||||
|
## 插槽
|
||||||
|
该组件没有提供插槽。
|
||||||
|
|
||||||
|
### 数据适配处理
|
||||||
|
|
||||||
|
- `selectedFiles`：用于统一处理单文件和多文件场景，读时返回数组，写时根据 `limit` 决定是否回传为字符串或数组。
|
||||||
|
- `fileList`：用于 `el-upload` 的回显列表，拼接完整 URL。
|
||||||
|
- `previewList`：用于图片预览的 URL 列表。
|
||||||
|
|
||||||
|
## 样式
|
||||||
|
|
||||||
|
组件使用了Element Plus的el-upload和el-image-viewer组件，并添加了自定义样式以适应不同的布局需求。
|
||||||
|
|
||||||
|
## 依赖项
|
||||||
|
|
||||||
|
- `element-plus`
|
||||||
|
- `@element-plus/icons-vue` 中的 `Plus`
|
||||||
|
- 自定义 API：`CommonUpload`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# UrlSelect 远程下拉选择组件
|
||||||
|
|
||||||
|
该组件基于 `el-select` 和自定义 axios 请求封装，支持从指定接口拉取选项列表，并支持 label/value 字段自定义。
|
||||||
|
|
||||||
|
## 功能特性
|
||||||
|
|
||||||
|
- 下拉选项从远程接口加载（通过 `url` 和 `params` 指定）
|
||||||
|
- 支持自定义 label/value 字段名（`labelKey` / `valueKey`）
|
||||||
|
- 支持插槽透传（可扩展 options 或添加分组）
|
||||||
|
- 内部使用双向绑定模型 `internalValue` 实现响应式
|
||||||
|
- 默认使用 `res.data.records` 作为解析逻辑，可自定义 `responseParser`
|
||||||
|
|
||||||
|
## 使用示例
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<UrlSelect
|
||||||
|
v-model="form.industry"
|
||||||
|
url="/api/base/industries"
|
||||||
|
:params="{ enabled: true }"
|
||||||
|
label-key="name"
|
||||||
|
value-key="id"
|
||||||
|
placeholder="请选择行业"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Props 参数
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 默认值 | 说明 |
|
||||||
|
| -------------- | --------------------------- | --------------------------- | ------------------------------ |
|
||||||
|
| modelValue | `String \| Number \| Array` | `null` | 绑定的值 |
|
||||||
|
| url | `String` | `null` | 请求数据的接口地址 |
|
||||||
|
| params | `Object` | `{}` | 请求时的参数 |
|
||||||
|
| labelKey | `String` | `'label'` | 数据项中作为 label 显示的字段 |
|
||||||
|
| valueKey | `String` | `'value'` | 数据项中作为 value 的字段 |
|
||||||
|
| responseParser | `Function` | `(res) => res.data.records` | 处理响应数据的函数，需返回数组 |
|
||||||
|
|
||||||
|
## 事件说明
|
||||||
|
|
||||||
|
组件继承并透传了 `el-select` 的常用事件：
|
||||||
|
|
||||||
|
| 事件名 | 说明 |
|
||||||
|
| ------------------- | ---------------------------- |
|
||||||
|
| `update:modelValue` | v-model 绑定更新 |
|
||||||
|
| `change` | 选项变化时触发 |
|
||||||
|
| `blur` | 失焦时触发 |
|
||||||
|
| `focus` | 聚焦时触发 |
|
||||||
|
| `clear` | 点击清空按钮时触发 |
|
||||||
|
| `visible-change` | 下拉框显示/隐藏变化时触发 |
|
||||||
|
| `remove-tag` | 多选时移除 tag 触发 |
|
||||||
|
| `scroll` | 滚动触发（需设置高度才有效） |
|
||||||
|
|
||||||
|
## 核心逻辑说明
|
||||||
|
|
||||||
|
### 1. 内部绑定值
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
const internalValue = ref(props.modelValue);
|
||||||
|
watch(() => props.modelValue, (newVal) => internalValue.value = newVal);
|
||||||
|
watch(internalValue, (newVal) => emit('update:modelValue', newVal));
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 拉取远程选项
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
async function fetchOptions() {
|
||||||
|
if (!props.url) return;
|
||||||
|
const res = await request.get(props.url, { params: props.params });
|
||||||
|
const records = props.responseParser(res);
|
||||||
|
options.value = Array.isArray(records) ? records : [];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
组件挂载时会立即请求一次远程数据。
|
||||||
|
|
||||||
|
### 3. 插槽支持
|
||||||
|
|
||||||
|
支持透传所有 `$slots`，并提供默认的 `option` 渲染逻辑。也可通过 `option-group` 插槽实现复杂渲染。
|
||||||
|
|
||||||
|
## 依赖项
|
||||||
|
|
||||||
|
- `element-plus` 的 `el-select`、`el-option`
|
||||||
|
- 项目中的 `request` 请求封装（例如基于 axios）
|
||||||
|
|
||||||
|
## 可拓展点
|
||||||
|
|
||||||
|
- 支持分页加载远程选项（下拉滚动触发）
|
||||||
|
- 支持懒加载（点击展开时再加载）
|
||||||
|
- 支持 loading/loading-text 状态
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# AreaSelect.vue 组件文档
|
||||||
|
|
||||||
|
## 组件简介
|
||||||
|
|
||||||
|
`AreaSelect` 是一个基于 Element Plus 的级联选择组件，封装了行政区域选择功能。支持省/市/县三级联动，数据源通过接口自动获取。
|
||||||
|
|
||||||
|
## 使用方式
|
||||||
|
|
||||||
|
### 1. 引入组件
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<AreaSelect v-model="areaCodeList" />
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 配置示例
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<AreaSelect
|
||||||
|
v-model="selectedArea"
|
||||||
|
:label="'所属区域：'"
|
||||||
|
:placeholder="'请选择区域'"
|
||||||
|
:emit-path="true"
|
||||||
|
:width="600"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
------
|
||||||
|
|
||||||
|
## Props 参数说明
|
||||||
|
|
||||||
|
| 参数名 | 类型 | 默认值 | 说明 |
|
||||||
|
| ------------- | ----------------- | ---------------- | ------------------------------------------------------------ |
|
||||||
|
| `modelValue` | `Array | String` | `[]` | 双向绑定的值。如果 `emitPath` 为 `true`，则为数组，否则为字符串。 |
|
||||||
|
| `label` | `String` | `所属行政区域：` | 左侧 label 标签内容。 |
|
||||||
|
| `placeholder` | `String` | `请选择行政区域` | 选择框中的占位符提示文字。 |
|
||||||
|
| `width` | `Number | String` | `500` | 整体组件宽度（单位：px）。 |
|
||||||
|
| `emitPath` | `Boolean` | `true` | 是否返回完整路径的值数组。为 `false` 时只返回最后一级节点的值。 |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
------
|
||||||
|
|
||||||
|
## Events 说明
|
||||||
|
|
||||||
|
| 事件名 | 说明 |
|
||||||
|
| ------------------- | ------------------------- |
|
||||||
|
| `update:modelValue` | 用于 `v-model` 双向绑定。 |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
------
|
||||||
|
|
||||||
|
## 返回值说明
|
||||||
|
|
||||||
|
- 当 `emitPath = true` 时，返回一个数组，例如：
|
||||||
|
|
||||||
|
```json
|
||||||
|
['530000', '530100', '530102']
|
||||||
|
```
|
||||||
|
|
||||||
|
- 当 `emitPath = false` 时，只返回最后一级，例如：
|
||||||
|
|
||||||
|
```json
|
||||||
|
'530102'
|
||||||
|
```
|
||||||
|
|
||||||
|
------
|
||||||
|
|
||||||
|
## 接口说明
|
||||||
|
|
||||||
|
该组件内部自动发起请求：
|
||||||
|
|
||||||
|
```
|
||||||
|
GET /system/area/region?areaCode=530000
|
||||||
|
```
|
||||||
|
|
||||||
|
接口返回行政区域数据，格式如下：
|
||||||
|
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"areaName": "云南省",
|
||||||
|
"areaCode": "530000",
|
||||||
|
"areaChildVOS": [
|
||||||
|
{
|
||||||
|
"areaName": "昆明市",
|
||||||
|
"areaCode": "530100",
|
||||||
|
"areaChildVOS": [...]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
------
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
- 默认展示为“云南省”下的行政区域。
|
||||||
|
- 默认字段映射为：
|
||||||
|
- `label`: `areaName`
|
||||||
|
- `value`: `areaCode`
|
||||||
|
- `children`: `areaChildVOS`
|
||||||
38
sub-government-affairs-service/src/apis/outputProducts.js
Normal file
38
sub-government-affairs-service/src/apis/outputProducts.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import request from '@/utils/axios';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @Title: 列表
|
||||||
|
*/
|
||||||
|
export function GetOutputList(params = {}) {
|
||||||
|
return request('/inputGoods/outPut/page', {
|
||||||
|
method: 'GET',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @Title: 新增
|
||||||
|
*/
|
||||||
|
export function AddOutput(data = {}) {
|
||||||
|
return request('/inputGoods/outPut/save', {
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @Title: 编辑
|
||||||
|
*/
|
||||||
|
export function UpdateOutput(data = {}) {
|
||||||
|
return request('/inputGoods/outPut/uploadReport', {
|
||||||
|
method: 'PUT',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @Title: 删除
|
||||||
|
*/
|
||||||
|
export function DeleteOutput(ids) {
|
||||||
|
return request(`/inputGoods/outPut/delete/${ids}`);
|
||||||
|
}
|
||||||
@ -256,7 +256,7 @@
|
|||||||
// color: #fff;
|
// color: #fff;
|
||||||
}
|
}
|
||||||
.table-cell-img-box {
|
.table-cell-img-box {
|
||||||
width: 60px;
|
width: 100%;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
overflow: hidden; /* 隐藏超出部分 */
|
overflow: hidden; /* 隐藏超出部分 */
|
||||||
|
|||||||
@ -1,84 +1,112 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="custom-page">
|
<div class="app-container">
|
||||||
<div class="custom-search">
|
<div class="container-custom">
|
||||||
<AreaCascader v-model:region-code="searchForm.regionCode" v-model:grid-id="searchForm.id" :width="600" />
|
<h2 class="custom-h2">产出品信息</h2>
|
||||||
<el-button type="primary" @click="handleSearch"> 搜索 </el-button>
|
<div ref="searchBarRef" class="search-box">
|
||||||
<el-button @click="resetSearch"> 重置 </el-button>
|
<div class="search-bar">
|
||||||
|
<div class="search-bar-left">
|
||||||
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
|
<el-form-item label="关键词" prop="name">
|
||||||
|
<el-input v-model="formInline.name" placeholder="请输入关键词" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||||
|
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||||
|
<el-option v-for="item in seedTypeList" :key="item.id" :value="item.id" :label="item.dataName" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||||
|
<el-button icon="Refresh" @click="resetForm">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
<avue-crud
|
</div>
|
||||||
ref="crudRef"
|
</div>
|
||||||
v-model:page="pageData"
|
<div class="table-toolbar">
|
||||||
:data="crudData"
|
<el-button type="primary" icon="plus" @click="addItem()">新增</el-button>
|
||||||
:option="crudOptions"
|
</div>
|
||||||
:table-loading="loading"
|
<div class="table-statistics flex-left-center">
|
||||||
@refresh-change="handleRefresh"
|
<el-icon class="mr-20" color="#409eff" size="16"><InfoFilled /></el-icon>
|
||||||
@current-change="handleCurrentChange"
|
<div class="mr-20">
|
||||||
@size-change="handleSizeChange"
|
已选择 <span class="color-blue">{{ landNums }}</span> 个地块
|
||||||
|
</div>
|
||||||
|
<div class="mr-20">
|
||||||
|
面积总计（亩）：<span class="color-blue">{{ totalArea }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="mr-20">
|
||||||
|
产量总计（公斤）：<span class="color-blue">{{ yieldSeed }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-cont">
|
||||||
|
<tableComponent
|
||||||
|
:table-data="tableData"
|
||||||
|
:columns="columns"
|
||||||
|
:show-selection="true"
|
||||||
|
:loading="tableLoading"
|
||||||
|
:total="tableTotal"
|
||||||
|
:current-page="formInline.current"
|
||||||
|
:page-size="formInline.size"
|
||||||
|
:show-sort="false"
|
||||||
|
@page-change="handlePaginationChange"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
>
|
>
|
||||||
<template #menu="scope">
|
<!-- 自定义-操作 -->
|
||||||
<custom-table-operate :actions="crudOptions.actions" :data="scope" />
|
<template #action="slotProps">
|
||||||
|
<!-- <el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button> -->
|
||||||
|
<!-- <el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button> -->
|
||||||
|
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||||
</template>
|
</template>
|
||||||
</avue-crud>
|
</tableComponent>
|
||||||
<el-dialog :key="dialogTitle" v-model="visible" :title="dialogTitle" width="60%" align-center :draggable="true">
|
</div>
|
||||||
<el-form ref="form" :model="formData" :rules="rules" :disabled="isReadonly" label-width="120px" class="form-item">
|
</div>
|
||||||
<el-row :gutter="20">
|
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false" align-center>
|
||||||
<el-col :span="24"><p class="form-title">基础信息</p></el-col>
|
<el-form :inline="true" :label-width="'auto'">
|
||||||
<el-col :span="12">
|
<LandSelect ref="landSelectRef" v-model="dialogForm.landId" :options="landSelectList" :disabled="formDisabled" @change="handleLandChange" />
|
||||||
<el-form-item label="农产品名称" prop="productName">
|
</el-form>
|
||||||
<el-input v-model="formData.productName" placeholder="请输入网格名称" />
|
<el-descriptions title="地块信息" border class="mb-20 custom-descriptions" :column="2">
|
||||||
|
<el-descriptions-item label="农产品名称">{{ dialogForm.cropName }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="面积（亩）">{{ dialogForm.area }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="行政区域编码">{{ dialogForm.regionCode }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="行政区域名称">{{ dialogForm.regionName }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="网格编码">{{ dialogForm.gridId }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="网格名称">{{ dialogForm.gridName }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="地块编码">{{ dialogForm.landId }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="地块名称">{{ dialogForm.landName }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="姓名">{{ dialogForm.propertyName }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="联系方式">{{ dialogForm.propertyPhone }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-form
|
||||||
|
ref="dialogRef"
|
||||||
|
:model="dialogForm"
|
||||||
|
:inline="true"
|
||||||
|
:label-width="'120'"
|
||||||
|
:rules="dialogFormRules"
|
||||||
|
:disabled="formDisabled"
|
||||||
|
class="dialog-form-container"
|
||||||
|
>
|
||||||
|
<div class="el-descriptions__title" style="margin-bottom: 16px">产量信息</div>
|
||||||
|
<el-form-item label="采收时间" prop="detectionTime" class="dialog-form-item">
|
||||||
|
<el-date-picker v-model="dialogForm.detectionTime" :clearable="false" type="date" value-format="YYYY-MM-DD" placeholder="请选择使用时间" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="面积（亩）" prop="area">
|
<el-form-item label="亩产量（公斤）" required prop="yield" class="dialog-form-item">
|
||||||
<el-input v-model="formData.area" placeholder="请输入种植面积" />
|
<el-input-number v-model="dialogForm.yield" :min="1" controls-position="right" placeholder="请输入亩产量" style="width: 230px" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="行政区划" prop="gridAreaCode">
|
<el-form-item label="总产量（公斤）" prop="totalYield" class="dialog-form-item">
|
||||||
<AreaSelect v-model="formData.gridAreaCode" :label="null" :emit-path="false" />
|
<el-input-number
|
||||||
|
v-model="dialogForm.totalYield"
|
||||||
|
disabled
|
||||||
|
:min="0"
|
||||||
|
controls-position="right"
|
||||||
|
placeholder="请输入亩产量"
|
||||||
|
style="width: 230px"
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="联系方式" prop="contactInfo">
|
|
||||||
<el-input v-model="formData.contactInfo" placeholder="请输入联系方式" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<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="gridName">
|
|
||||||
<el-input v-model="formData.gridName" placeholder="请输入网格名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="姓名" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入姓名" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row :gutter="20">
|
|
||||||
<el-col :span="24"><p class="form-title">品质信息</p></el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="采收时间" prop="harvestTime">
|
|
||||||
<el-input v-model="formData.harvestTime" placeholder="请输入采收时间" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="地块总产（公斤）" prop="totalYield">
|
|
||||||
<el-input v-model="formData.totalYield" placeholder="请输入地块总产" />
|
|
||||||
</el-form-item>
|
|
||||||
<!-- <el-form-item label="价格（元/公斤）" prop="price">
|
|
||||||
<el-input v-model="formData.price" placeholder="请输入价格" />
|
|
||||||
</el-form-item> -->
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-form-item label="亩产（公斤）" prop="yieldPerMu">
|
|
||||||
<el-input v-model="formData.yieldPerMu" placeholder="请输入亩产" />
|
|
||||||
</el-form-item>
|
|
||||||
<!-- <el-form-item label="品质" prop="quality">
|
|
||||||
<el-input v-model="formData.quality" placeholder="请输入品质" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="产值（元）" prop="outputValue">
|
|
||||||
<el-input v-model="formData.outputValue" placeholder="请输入产值" />
|
|
||||||
</el-form-item> -->
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
<el-button @click="handleCancel">取消</el-button>
|
<el-button v-if="!formDisabled" type="primary" @click="onSaveCategory">保存</el-button>
|
||||||
<el-button v-if="!isReadonly" type="primary" @click="handleSubmit()"> 保存 </el-button>
|
<el-button v-if="!formDisabled" @click="cancelDialog">取消</el-button>
|
||||||
|
<el-button v-else @click="cancelDialog">关闭</el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@ -86,229 +114,405 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
// ---------------------------------------------------------------------
|
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
||||||
// avue-crud 通用代码
|
import tableComponent from '@/components/tableComponent.vue';
|
||||||
// ---------------------------------------------------------------------
|
import LandSelect from '@/components/LandSelect.vue';
|
||||||
import { ref, reactive, watch, onMounted, computed, nextTick } from 'vue';
|
import { ElMessage } from 'element-plus';
|
||||||
import { CRUD_OPTIONS } from '@/config';
|
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
const { getMaterailTypes } = inputSuppliesApi;
|
||||||
import { useUserStore } from '@/store/modules/user';
|
import { GetOutputList, AddOutput, UpdateOutput, DeleteOutput } from '@/apis/outputProducts';
|
||||||
|
import { getLandList } from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||||
|
import request from '@/utils/axios';
|
||||||
|
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
const app = useApp();
|
||||||
|
|
||||||
const UserStore = useUserStore();
|
// 查询条件
|
||||||
const user = UserStore.getUserInfo();
|
const formInline = reactive({
|
||||||
console.log('admin 属性：', user.admin);
|
name: '',
|
||||||
|
seedTypeId: '',
|
||||||
const loading = ref(false);
|
current: 1,
|
||||||
|
size: 10,
|
||||||
const visible = ref(false);
|
|
||||||
const isReadonly = ref(false);
|
|
||||||
const dialogTitle = ref();
|
|
||||||
const formData = ref({
|
|
||||||
gridName: '',
|
|
||||||
gridAreaCode: '',
|
|
||||||
scope: '',
|
|
||||||
scopeImg: '',
|
|
||||||
note: '',
|
|
||||||
});
|
});
|
||||||
const initialFormData = { ...formData.value };
|
const searchForm = ref(null);
|
||||||
|
const onSubmit = () => {
|
||||||
|
formInline.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
formData.value = { ...initialFormData };
|
searchForm.value.resetFields();
|
||||||
};
|
};
|
||||||
|
|
||||||
const pageData = ref({
|
// 表格数据
|
||||||
currentPage: 1,
|
const tableData = ref([]);
|
||||||
pageSize: 10,
|
const selectedIds = ref([]);
|
||||||
total: 0,
|
const selectedRows = ref([]);
|
||||||
});
|
const tableLoading = ref(false);
|
||||||
const searchForm = ref({
|
const tableTotal = ref(0);
|
||||||
gridName: '',
|
const columns = ref([
|
||||||
keyword: '',
|
{ label: '行政区划编码', prop: 'regionCode', width: 150 },
|
||||||
regionCode: '',
|
{ label: '行政区划', prop: 'regionName', width: 150 },
|
||||||
id: '',
|
{ label: '网格编码', prop: 'gridId', width: 150 },
|
||||||
status: -1,
|
|
||||||
});
|
|
||||||
const initialSearchForm = { ...searchForm.value };
|
|
||||||
const resetSearch = () => {
|
|
||||||
searchForm.value = { ...initialSearchForm };
|
|
||||||
};
|
|
||||||
// 过滤对象，只保留有值的属性
|
|
||||||
const filterObject = (obj) => {
|
|
||||||
const newObj = {};
|
|
||||||
Object.keys(obj).forEach((key) => {
|
|
||||||
const value = obj[key];
|
|
||||||
// 检查值是否有效，排除空字符串、null 和 undefined
|
|
||||||
if (value !== '' && value !== null && value !== undefined) {
|
|
||||||
newObj[key] = value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return newObj;
|
|
||||||
};
|
|
||||||
|
|
||||||
const crudData = ref([]);
|
|
||||||
const crudOptions = reactive({
|
|
||||||
...CRUD_OPTIONS,
|
|
||||||
// menu: false,
|
|
||||||
header: false,
|
|
||||||
height: 'calc(100vh - 340px)',
|
|
||||||
selection: true,
|
|
||||||
column: [
|
|
||||||
{ label: '行政区划编码', prop: 'AreaCode', width: 150 },
|
|
||||||
{ label: '行政区划', prop: 'gridAreaName', width: 150 },
|
|
||||||
{ label: '网格编码', prop: 'gridCode', width: 150 },
|
|
||||||
{ label: '网格名称', prop: 'gridName', width: 150 },
|
{ label: '网格名称', prop: 'gridName', width: 150 },
|
||||||
{ label: '地块编码', prop: 'landCode', width: 150 },
|
{ label: '地块编码', prop: 'landId', width: 150 },
|
||||||
{ label: '地块', prop: 'landName' },
|
{ label: '地块名称', prop: 'landName' },
|
||||||
{ label: '农产品名称', prop: 'productName', width: 150 },
|
{ label: '农产品名称', prop: 'cropName', width: 150 },
|
||||||
{ label: '面积（亩）', prop: 'area', formatter: (row, cloumn, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
{ label: '面积（亩）', prop: 'area' },
|
||||||
{ label: '亩产（公斤）', prop: 'yieldPerMu', width: 80 },
|
{ label: '亩产（公斤）', prop: 'yield', width: 80 },
|
||||||
{ label: '地块总产（公斤）', prop: 'totalYield' },
|
{ label: '地块总产（公斤）', prop: 'totalYield' },
|
||||||
{ label: '生产经营主体编码', prop: 'enterCode', width: 150 },
|
{ label: '生产经营主体编码', prop: 'businessEntityCode', width: 150 },
|
||||||
{ label: '生产经营主体类型', prop: 'enterType', width: 150 },
|
{ label: '生产经营主体类型', prop: 'businessEntityType', width: 150 },
|
||||||
{ label: '生产经营主体名称', prop: 'enterName' },
|
{ label: '生产经营主体名称', prop: 'businessEntityName' },
|
||||||
{ label: '是否溯源', prop: 'isTrace' },
|
{ label: '是否溯源', prop: 'isTrace' },
|
||||||
],
|
{ prop: 'action', label: '操作', slotName: 'action', width: 100, fixed: 'right' },
|
||||||
actions: [
|
]);
|
||||||
{
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
name: '查看',
|
formInline.current = page;
|
||||||
icon: 'view',
|
formInline.size = pageSize;
|
||||||
event: ({ row }) => handleView(row),
|
loadData();
|
||||||
},
|
};
|
||||||
// {
|
let landNums = ref(0);
|
||||||
// name: '编辑',
|
let totalArea = computed(() => {
|
||||||
// icon: 'edit',
|
const sum = selectedRows.value.reduce((sum, item) => {
|
||||||
// event: ({ row }) => handleEdit(row),
|
return sum + Math.round(item.area * 100);
|
||||||
// },
|
}, 0);
|
||||||
{
|
const result = sum / 100;
|
||||||
type: 'danger',
|
return parseFloat(result.toFixed(2));
|
||||||
name: '删除',
|
|
||||||
icon: 'delete',
|
|
||||||
event: ({ row }) => handleDelete(row),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
});
|
||||||
const handleRefresh = async () => {
|
let yieldSeed = computed(() => {
|
||||||
searchForm.value = { ...initialSearchForm };
|
const sum = selectedRows.value.reduce((sum, item) => {
|
||||||
getData();
|
return sum + Math.round(item.totalYield * 100);
|
||||||
|
}, 0);
|
||||||
|
const result = sum / 100;
|
||||||
|
return parseFloat(result.toFixed(2));
|
||||||
|
});
|
||||||
|
const handleSelectionChange = (selection, keys) => {
|
||||||
|
// console.log(selection, keys);
|
||||||
|
selectedRows.value = selection;
|
||||||
|
landNums.value = selection.length;
|
||||||
};
|
};
|
||||||
const handleCurrentChange = (val) => {
|
const loadData = async () => {
|
||||||
pageData.value.currentPage = val;
|
tableLoading.value = true;
|
||||||
|
try {
|
||||||
|
let response = await GetOutputList(formInline);
|
||||||
|
tableLoading.value = false;
|
||||||
|
if (response.code == 200) {
|
||||||
|
tableData.value = response.data.records;
|
||||||
|
tableTotal.value = response.data.total;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
tableLoading.value = false;
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
const handleSizeChange = (val) => {
|
|
||||||
pageData.value.pageSize = val;
|
const extractThirdLevelChildren = (dataArray) => {
|
||||||
|
let result = [];
|
||||||
|
// 遍历第一层数组
|
||||||
|
for (const level1 of dataArray) {
|
||||||
|
// 检查第一层是否有children且是数组
|
||||||
|
if (level1.children && Array.isArray(level1.children)) {
|
||||||
|
// 遍历第二层数组
|
||||||
|
for (const level2 of level1.children) {
|
||||||
|
// 检查第二层是否有children且是数组
|
||||||
|
if (level2.children && Array.isArray(level2.children)) {
|
||||||
|
// 将第三层的所有对象添加到结果数组中
|
||||||
|
result.push(...level2.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
};
|
};
|
||||||
const handleView = (row) => {
|
const seedTypeChange = () => {
|
||||||
isReadonly.value = true;
|
console.log(formInline.seedTypeId);
|
||||||
formData.value = { ...row };
|
// 重新获取表格数据，需添加参数
|
||||||
dialogTitle.value = '产出品信息';
|
};
|
||||||
visible.value = true;
|
|
||||||
|
const dialogFormVisible = ref(false);
|
||||||
|
const dialogRef = ref(null);
|
||||||
|
const dialogTitle = ref('新增');
|
||||||
|
const formDisabled = ref(false);
|
||||||
|
const landSelectRef = ref(null);
|
||||||
|
const nowSelectRow = ref({});
|
||||||
|
const dialogForm = reactive({
|
||||||
|
area: 0, //地块面积
|
||||||
|
regionCode: '', //所属行政区域代码
|
||||||
|
regionName: '', //所属行政区域名称
|
||||||
|
gridId: '', //所属网格代码
|
||||||
|
gridName: '', //所属网格名称
|
||||||
|
landId: '', //地块id
|
||||||
|
landName: '', //地块名称
|
||||||
|
name: '', //姓名
|
||||||
|
phone: '', //联系方式
|
||||||
|
totalYield: 0, //地块总产量（公斤）
|
||||||
|
yield: 1, //亩产量
|
||||||
|
detectionTime: '', //使用时间
|
||||||
|
businessEntityCode: '', //经营主体编码
|
||||||
|
businessEntityName: '', //经营主体名称
|
||||||
|
});
|
||||||
|
const dialogFormRules = ref({
|
||||||
|
yield: [{ required: true, message: '请输入亩产量', trigger: ['change', 'blur'] }],
|
||||||
|
detectionTime: [{ required: true, message: '请选择使用时间', trigger: 'blur' }],
|
||||||
|
});
|
||||||
|
watch(
|
||||||
|
() => dialogForm.yield,
|
||||||
|
(val) => {
|
||||||
|
console.log(val);
|
||||||
|
console.log(dialogForm.area);
|
||||||
|
console.log(val * dialogForm.area);
|
||||||
|
dialogForm.totalYield = val * dialogForm.area;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
const addItem = async () => {
|
||||||
|
// ElMessage.success('点击新增!');
|
||||||
|
restDialogForm();
|
||||||
|
dialogTitle.value = '新增';
|
||||||
|
formDisabled.value = false;
|
||||||
|
dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const seeDetails = async (row) => {
|
||||||
|
// ElMessage.success('查看详情!');
|
||||||
|
dialogTitle.value = '详情';
|
||||||
|
console.log(row);
|
||||||
|
formDisabled.value = true;
|
||||||
|
dialogForm.landId = row.landId;
|
||||||
|
getDetails();
|
||||||
|
dialogForm.totalYield = row.totalYield ?? 0;
|
||||||
|
dialogForm.yield = row.yield;
|
||||||
|
dialogForm.useUnit = row.useUnit;
|
||||||
|
dialogForm.detectionTime = row.useTime;
|
||||||
|
dialogFormVisible.value = true;
|
||||||
};
|
};
|
||||||
const handleEdit = (row) => {
|
const handleEdit = (row) => {
|
||||||
isReadonly.value = false;
|
// ElMessage.success('点击编辑!');
|
||||||
formData.value = { ...row };
|
nowSelectRow.value = row;
|
||||||
dialogTitle.value = '编辑';
|
dialogTitle.value = '编辑';
|
||||||
visible.value = true;
|
console.log(row);
|
||||||
|
formDisabled.value = false;
|
||||||
|
dialogForm.landId = row.landId;
|
||||||
|
getDetails();
|
||||||
|
dialogForm.totalYield = row.totalYield ?? 0;
|
||||||
|
dialogForm.yield = row.yield;
|
||||||
|
dialogForm.useUnit = row.useUnit;
|
||||||
|
dialogForm.detectionTime = row.useTime;
|
||||||
|
dialogFormVisible.value = true;
|
||||||
};
|
};
|
||||||
const handleDelete = async (row) => {
|
// 获取地块信息
|
||||||
try {
|
const getDetails = async () => {
|
||||||
await ElMessageBox.confirm('确认删除该网格吗？', '提示', {
|
let response = await request({
|
||||||
|
url: `/land-resource/landManage/getLandInfo?landId=${dialogForm.landId}`,
|
||||||
|
});
|
||||||
|
console.log(response);
|
||||||
|
if (response.code == 200) {
|
||||||
|
if (response.data) {
|
||||||
|
setDialogForm(response.data);
|
||||||
|
} else {
|
||||||
|
ElMessage.error('未查询到数据');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error(response.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const setDialogForm = (row) => {
|
||||||
|
dialogForm.area = row.area;
|
||||||
|
dialogForm.regionCode = row.gridAreaCode;
|
||||||
|
dialogForm.regionName = row.fullRegionName;
|
||||||
|
dialogForm.gridId = row.gridId;
|
||||||
|
dialogForm.gridName = row.gridName;
|
||||||
|
dialogForm.landId = row.id;
|
||||||
|
dialogForm.landName = row.landName;
|
||||||
|
dialogForm.name = row.propertyName;
|
||||||
|
dialogForm.phone = row.propertyPhone;
|
||||||
|
dialogForm.businessEntityCode = row.businessEntityCode ?? '';
|
||||||
|
dialogForm.businessEntityName = row.businessEntityName ?? '';
|
||||||
|
};
|
||||||
|
const handleDelete = (row) => {
|
||||||
|
console.log('删除操作: ', row);
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||||
confirmButtonText: '确定',
|
confirmButtonText: '确定',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
deleteGoods(row.id)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
onSubmit();
|
||||||
|
app.$message.success('删除成功！');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
});
|
});
|
||||||
|
})
|
||||||
const response = await deleteGrid(row.id);
|
.catch(() => {});
|
||||||
|
};
|
||||||
ElMessage.success('删除成功');
|
const deleteGoods = async (ids) => {
|
||||||
getData();
|
try {
|
||||||
|
let res = await DeleteOutput(ids);
|
||||||
|
return res;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (error === 'cancel') {
|
return false;
|
||||||
ElMessage.info('已取消删除');
|
}
|
||||||
|
};
|
||||||
|
const onSaveCategory = () => {
|
||||||
|
console.log(dialogForm);
|
||||||
|
if (dialogForm.landId == '') {
|
||||||
|
landSelectRef.value.handleChange();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
dialogRef.value.validate(async (valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
let param = { ...dialogForm };
|
||||||
|
param.useTime = dialogForm.detectionTime;
|
||||||
|
console.log(param);
|
||||||
|
// valid.businessEntityCode = dialogForm.businessEntityCode; //经营主体编码
|
||||||
|
// valid.businessEntityName = dialogForm.businessEntityName; //经营主体名称
|
||||||
|
let response;
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
response = await AddOutput(param);
|
||||||
} else {
|
} else {
|
||||||
ElMessage.error('删除失败');
|
param.id = nowSelectRow.value.id;
|
||||||
console.error('删除异常:', error);
|
response = await UpdateOutput(param);
|
||||||
|
}
|
||||||
|
if (response.code == 200) {
|
||||||
|
cancelDialog();
|
||||||
|
onSubmit();
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
ElMessage.success('新增成功!');
|
||||||
|
} else {
|
||||||
|
ElMessage.success('编辑成功!');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error(response.msg);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
console.log('提交表单:', formData.value);
|
|
||||||
// try {
|
|
||||||
// if (dialogTitle.value === '新增网格') {
|
|
||||||
// await createGrid(formData.value);
|
|
||||||
// ElMessage.success('新增成功');
|
|
||||||
// resetForm();
|
|
||||||
// visible.value = false;
|
|
||||||
// getData();
|
|
||||||
// } else {
|
|
||||||
// await updateGrid(formData.value);
|
|
||||||
// ElMessage.success('更新成功');
|
|
||||||
// resetForm();
|
|
||||||
// visible.value = false;
|
|
||||||
// getData();
|
|
||||||
// }
|
|
||||||
// } catch (error) {
|
|
||||||
// ElMessage.error(error.message || '新增失败，请重试');
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------
|
|
||||||
// 业务代码
|
|
||||||
// ---------------------------------------------------------------------
|
|
||||||
import { createGrid, updateGrid, deleteGrid, fetchGridList, getGridDetail, exportGrid } from '@/apis/landResourceManagement/gridManagement';
|
|
||||||
import { mockData } from './output';
|
|
||||||
onMounted(() => {
|
|
||||||
getData();
|
|
||||||
});
|
});
|
||||||
const getData = async () => {
|
};
|
||||||
// const filteredParams = filterObject(searchForm.value);
|
const cancelDialog = async () => {
|
||||||
// const response = await fetchGridList(filteredParams);
|
restDialogForm();
|
||||||
// crudData.value = Array.isArray(response.data.records) ? response.data.records : [];
|
dialogFormVisible.value = false;
|
||||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
};
|
||||||
crudData.value = mockData;
|
const restDialogForm = () => {
|
||||||
pageData.value.total = crudData.value.length;
|
Object.assign(dialogForm, {
|
||||||
|
area: 0, //地块面积
|
||||||
|
regionCode: '', //所属行政区域代码
|
||||||
|
regionName: '', //所属行政区域名称
|
||||||
|
gridId: '', //所属网格代码
|
||||||
|
gridName: '', //所属网格名称
|
||||||
|
landId: '', //地块id
|
||||||
|
landName: '', //地块名称
|
||||||
|
name: '', //姓名
|
||||||
|
phone: '', //联系方式
|
||||||
|
totalYield: 0, //地块总产量（公斤）
|
||||||
|
yield: 1, //亩产量
|
||||||
|
useTime: '', //使用时间
|
||||||
|
businessEntityCode: '', //经营主体编码
|
||||||
|
businessEntityName: '', //经营主体名称
|
||||||
|
});
|
||||||
|
nowSelectRow.value = ref({});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleAdd = () => {
|
const seedTypeList = ref([]);
|
||||||
console.log('handleAdd');
|
const seedTypeDialogList = ref([]);
|
||||||
resetForm();
|
const getSeedTypeList = async () => {
|
||||||
isReadonly.value = false;
|
try {
|
||||||
dialogTitle.value = '新增网格';
|
let response = await getMaterailTypes({ moduleType: '4' });
|
||||||
visible.value = true;
|
console.log(response);
|
||||||
|
if (response.code == 200) {
|
||||||
|
if (response.data?.length > 0) {
|
||||||
|
seedTypeDialogList.value = response.data[0].children;
|
||||||
|
let result = extractThirdLevelChildren(response.data);
|
||||||
|
seedTypeList.value = result;
|
||||||
|
console.log(seedTypeDialogList.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSearch = () => {
|
const unitList = ref([
|
||||||
getData();
|
{ dictCode: '52', dictValue: 'g' },
|
||||||
|
{ dictCode: '53', dictValue: 'kg' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const landSelectList = ref([]);
|
||||||
|
const getLandsList = async () => {
|
||||||
|
let res = await getLandList();
|
||||||
|
if (res.code == 200) {
|
||||||
|
landSelectList.value = res.data;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
const handleCancel = () => {
|
const handleLandChange = (val) => {
|
||||||
visible.value = false;
|
console.log(val);
|
||||||
|
if (val) {
|
||||||
|
getDetails();
|
||||||
|
} else {
|
||||||
|
restDialogForm();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getEntityOptions = async () => {
|
||||||
|
let res = await GetDictTypeInfo('sys_use_supervise_number');
|
||||||
|
console.log(res);
|
||||||
|
if (res.code == 200) {
|
||||||
|
unitList.value = res.data;
|
||||||
|
} else {
|
||||||
|
unitList.value = [
|
||||||
|
{ dictCode: '52', dictValue: 'g' },
|
||||||
|
{ dictCode: '53', dictValue: 'kg' },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onSubmit();
|
||||||
|
getLandsList();
|
||||||
|
getEntityOptions();
|
||||||
|
// getSeedTypeList();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dialog-form-item {
|
||||||
|
:deep(.el-upload--picture-card) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
<style scoped lang="scss">
|
:deep(.file-uploader__upload) {
|
||||||
:deep(.el-dialog__body) {
|
width: 100px;
|
||||||
padding: 20px;
|
height: 100px;
|
||||||
height: calc(100vh - 300px);
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
.form-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin: 30px 0;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.form-item {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.dialog-footer {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.custom-search {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
.el-button {
|
:deep(.el-upload-list__item) {
|
||||||
margin-left: 12px;
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 必须使用深度选择器 + 精确DOM层级 */
|
||||||
|
.custom-descriptions :deep(.el-descriptions__body) table.el-descriptions__table {
|
||||||
|
table-layout: fixed; /* 关键属性1：强制等宽 */
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.custom-descriptions :deep(.el-descriptions__label) {
|
||||||
|
width: 130px !important; /* 关键属性2：固定宽度 */
|
||||||
|
min-width: 130px !important;
|
||||||
|
max-width: 130px !important;
|
||||||
|
background: #f5f7fa;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
.custom-descriptions :deep(.el-descriptions__content) {
|
||||||
|
width: calc(100% - 130px) !important; /* 自动填充剩余空间 */
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -301,21 +301,19 @@ const tableLoading = ref(false);
|
|||||||
const tableTotal = ref(0);
|
const tableTotal = ref(0);
|
||||||
const columns = ref([
|
const columns = ref([
|
||||||
{ prop: 'batchCode', label: '产品溯源码', slotName: 'batchCode', width: 150 },
|
{ prop: 'batchCode', label: '产品溯源码', slotName: 'batchCode', width: 150 },
|
||||||
|
{ prop: 'productTypes', label: '产品名称' },
|
||||||
{ prop: 'name', label: '产品名称' },
|
{ prop: 'name', label: '包装规格' },
|
||||||
{ prop: 'Unit', label: '规格' },
|
{ prop: 'purchaseDate', label: '生产日期', width: 150 },
|
||||||
{ prop: 'purchaseDate', label: '生产日期' },
|
|
||||||
{ prop: 'number', label: '保质期' },
|
{ prop: 'number', label: '保质期' },
|
||||||
// { prop: 'baseCode', label: '生产商', width: 200 },
|
{ prop: 'Unit', label: '生产商', width: 200 },
|
||||||
{ prop: 'plotName', label: '厂址' },
|
{ prop: 'plotName', label: '厂址' },
|
||||||
{ prop: 'baseName', label: '原材料' },
|
{ prop: 'baseName', label: '原材料' },
|
||||||
{ prop: 'baseAddress', label: '原产地' },
|
{ prop: 'baseAddress', label: '原产地' },
|
||||||
{ prop: 'plotCode', label: '种植基地' },
|
{ prop: 'plotCode', label: '种植基地' },
|
||||||
|
|
||||||
{ prop: 'businessEntity', label: '种植基地地址' },
|
{ prop: 'businessEntity', label: '种植基地地址' },
|
||||||
{ prop: 'record', label: '生产经营主体类型' },
|
{ prop: 'record', label: '生产经营主体类型' },
|
||||||
{ prop: 'type', label: '生产经营主体名称' },
|
{ prop: 'type', label: '生产经营主体名称' },
|
||||||
{ prop: 'createDate', label: '创建日期' },
|
{ prop: 'createDate', label: '创建日期', width: 150 },
|
||||||
{ prop: 'action', label: '操作', slotName: 'action', width: 100, fixed: 'right' },
|
{ prop: 'action', label: '操作', slotName: 'action', width: 100, fixed: 'right' },
|
||||||
]);
|
]);
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user