@ -1,84 +1,112 @@
< template >
< div class = "custom-page" >
< div class = "custom-search" >
< AreaCascader v -model :region-code = "searchForm.regionCode" v -model :grid-id = "searchForm.id" :width = "600" / >
< el-button type = "primary" @click ="handleSearch" > 搜索 < / el -button >
< el-button @click ="resetSearch" > 重置 < / el -button >
< div class = "app-container" >
< div class = "container-custom" >
< h2 class = "custom-h2" > 产出品信息 < / h2 >
< div ref = "searchBarRef" class = "search-box" >
< 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 >
< / div >
< div class = "table-toolbar" >
< el-button type = "primary" icon = "plus" @click ="addItem()" > 新增 < / el -button >
< / div >
< div class = "table-statistics flex-left-center" >
< el-icon class = "mr-20" color = "#409eff" size = "16" > < InfoFilled / > < / el-icon >
< div class = "mr-20" >
已选择 < 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 # 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 >
< / tableComponent >
< / div >
< / div >
< avue-crud
ref = "crudRef"
v - model : page = "pageData"
: data = "crudData"
: option = "crudOptions"
: table - loading = "loading"
@ refresh - change = "handleRefresh"
@ current - change = "handleCurrentChange"
@ size - change = "handleSizeChange"
>
< 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 = " 120px " class = "form-item" >
< el-row :gutter = "20" >
< el-col :span = "24" > < p class = "form-title" > 基础信息 < / p > < / el-col >
< el-col :span = "12" >
< el-form-item label = "农产品名称" prop = "productName" >
< el-input v-model = "formData.productName" placeholder="请输入网格名称" / >
< / el-form-item >
< el-form-item label = "面积（亩）" prop = "area" >
< el-input v-model = "formData.area" 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 = "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-dialog v-model = "dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false" align -center >
< el-form :inline = "true" :label-width = "'auto'" >
< LandSelect ref = "landSelectRef" v-model = "dialogForm.landId" :options="landSelectList" :disabled="formDisabled" @change="handleLandChange" / >
< / el-form >
< 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 label = "亩产量（公斤）" required prop = "yield" class = "dialog-form-item" >
< el-input-number v-model = "dialogForm.yield" :min="1" controls-position="right" placeholder="请输入亩产量" style="width: 230px" / >
< / el-form-item >
< el-form-item label = "总产量（公斤）" prop = "totalYield" class = "dialog-form-item" >
< el-input-number
v - model = "dialogForm.totalYield"
disabled
: min = "0"
controls - position = "right"
placeholder = "请输入亩产量"
style = "width: 230px"
/ >
< / el-form-item >
< / el-form >
< template # footer >
< div class = "dialog-footer" >
< el-button @click ="handleCancel" > 取消 < / el -button >
< el-button v-if = "!isReadonly" type="primary" @click="handleSubmit()" > 保存 < / el -button >
< el-button v-if = "!formDisabled" type="primary" @click="onSaveCategory" > 保存 < / el -button >
< el-button v-if = "!formDisabled" @click="cancelDialog" > 取消 < / el -button >
< el-button v -else @click ="cancelDialog" > 关闭 < / el -button >
< / div >
< / template >
< / el-dialog >
@ -86,229 +114,405 @@
< / template >
< script setup >
/ / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
/ / a v u e - c r u d 通 用 代 码
/ / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
import { ref , reactive , watch , onMounted , computed , nextTick } from 'vue' ;
import { CRUD _OPTIONS } from '@/config' ;
import { ElMessage , ElMessageBox } from 'element-plus' ;
import { useUserStore } from '@/store/modules/user' ;
import { ref , reactive , computed , onMounted , onBeforeUnmount , nextTick , watch } from 'vue' ;
import tableComponent from '@/components/tableComponent.vue' ;
import LandSelect from '@/components/LandSelect.vue' ;
import { ElMessage } from 'element-plus' ;
import inputSuppliesApi from '@/apis/inputSuppliesApi' ;
const { getMaterailTypes } = inputSuppliesApi ;
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 ( ) ;
console . log ( 'admin 属性：' , user . admin ) ;
const loading = ref ( false ) ;
const visible = ref ( false ) ;
const isReadonly = ref ( false ) ;
const dialogTitle = ref ( ) ;
const formData = ref ( {
gridName : '' ,
gridAreaCode : '' ,
scope : '' ,
scopeImg : '' ,
note : '' ,
/ / 查 询 条 件
const formInline = reactive ( {
name : '' ,
seedTypeId : '' ,
current : 1 ,
size : 10 ,
} ) ;
const initialFormData = { ... formData . value } ;
const searchForm = ref ( null ) ;
const onSubmit = ( ) => {
formInline . current = 1 ;
loadData ( ) ;
} ;
const resetForm = ( ) => {
formData . value = { ... initialFormData } ;
searchForm . value . resetFields ( ) ;
} ;
const pageData = ref ( {
currentPage : 1 ,
pageSize : 10 ,
total : 0 ,
} ) ;
const searchForm = ref ( {
gridName : '' ,
keyword : '' ,
regionCode : '' ,
id : '' ,
status : - 1 ,
} ) ;
const initialSearchForm = { ... searchForm . value } ;
const resetSearch = ( ) => {
searchForm . value = { ... initialSearchForm } ;
/ / 表 格 数 据
const tableData = ref ( [ ] ) ;
const selectedIds = ref ( [ ] ) ;
const selectedRows = ref ( [ ] ) ;
const tableLoading = ref ( false ) ;
const tableTotal = ref ( 0 ) ;
const columns = ref ( [
{ label : '行政区划编码' , prop : 'regionCode' , width : 150 } ,
{ label : '行政区划' , prop : 'regionName' , width : 150 } ,
{ label : '网格编码' , prop : 'gridId' , width : 150 } ,
{ label : '网格名称' , prop : 'gridName' , width : 150 } ,
{ label : '地块编码' , prop : 'landId' , width : 150 } ,
{ label : '地块名称' , prop : 'landName' } ,
{ label : '农产品名称' , prop : 'cropName' , width : 150 } ,
{ label : '面积（亩）' , prop : 'area' } ,
{ label : '亩产（公斤）' , prop : 'yield' , width : 80 } ,
{ label : '地块总产（公斤）' , prop : 'totalYield' } ,
{ label : '生产经营主体编码' , prop : 'businessEntityCode' , width : 150 } ,
{ label : '生产经营主体类型' , prop : 'businessEntityType' , width : 150 } ,
{ label : '生产经营主体名称' , prop : 'businessEntityName' } ,
{ label : '是否溯源' , prop : 'isTrace' } ,
{ prop : 'action' , label : '操作' , slotName : 'action' , width : 100 , fixed : 'right' } ,
] ) ;
const handlePaginationChange = ( { page , pageSize } ) => {
formInline . current = page ;
formInline . size = pageSize ;
loadData ( ) ;
} ;
/ / 过 滤 对 象 ， 只 保 留 有 值 的 属 性
const filterObject = ( obj ) => {
const newObj = { } ;
Object . keys ( obj ) . forEach ( ( key ) => {
const value = obj [ key ] ;
/ / 检 查 值 是 否 有 效 ， 排 除 空 字 符 串 、 n u l l 和 u n d e f i n e d
if ( value !== '' && value !== null && value !== undefined ) {
newObj [ key ] = value ;
let landNums = ref ( 0 ) ;
let totalArea = computed ( ( ) => {
const sum = selectedRows . value . reduce ( ( sum , item ) => {
return sum + Math . round ( item . area * 100 ) ;
} , 0 ) ;
const result = sum / 100 ;
return parseFloat ( result . toFixed ( 2 ) ) ;
} ) ;
let yieldSeed = computed ( ( ) => {
const sum = selectedRows . value . reduce ( ( sum , item ) => {
return sum + Math . round ( item . totalYield * 100 ) ;
} , 0 ) ;
const result = sum / 100 ;
return parseFloat ( result . toFixed ( 2 ) ) ;
} ) ;
const handleSelectionChange = ( selection , keys ) => {
/ / c o n s o l e . l o g ( s e l e c t i o n , k e y s ) ;
selectedRows . value = selection ;
landNums . value = selection . length ;
} ;
const loadData = async ( ) => {
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 ;
}
} ) ;
return newObj ;
} catch ( error ) {
tableLoading . value = false ;
console . error ( error ) ;
}
} ;
const crudData = ref ( [ ] ) ;
const crudOptions = reactive ( {
... CRUD _OPTIONS ,
/ / m e n u : f a l s e ,
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 : 'landCode' , width : 150 } ,
{ label : '地块' , prop : 'landName' } ,
{ label : '农产品名称' , prop : 'productName' , width : 150 } ,
{ label : '面积（亩）' , prop : 'area' , formatter : ( row , cloumn , cellValue ) => ` ${ Number ( cellValue ) . toFixed ( 2 ) } 亩 ` } ,
{ label : '亩产（公斤）' , prop : 'yieldPerMu' , width : 80 } ,
{ label : '地块总产（公斤）' , prop : 'totalYield' } ,
{ label : '生产经营主体编码' , prop : 'enterCode' , width : 150 } ,
{ label : '生产经营主体类型' , prop : 'enterType' , width : 150 } ,
{ label : '生产经营主体名称' , prop : 'enterName' } ,
{ label : '是否溯源' , prop : 'isTrace' } ,
] ,
actions : [
{
name : '查看' ,
icon : 'view' ,
event : ( { row } ) => handleView ( row ) ,
} ,
/ / {
/ / n a m e : ' 编 辑 ' ,
/ / i c o n : ' e d i t ' ,
/ / e v e n t : ( { r o w } ) = > h a n d l e E d i t ( r o w ) ,
/ / } ,
{
type : 'danger' ,
name : '删除' ,
icon : 'delete' ,
event : ( { row } ) => handleDelete ( row ) ,
} ,
] ,
const extractThirdLevelChildren = ( dataArray ) => {
let result = [ ] ;
/ / 遍 历 第 一 层 数 组
for ( const level1 of dataArray ) {
/ / 检 查 第 一 层 是 否 有 c h i l d r e n 且 是 数 组
if ( level1 . children && Array . isArray ( level1 . children ) ) {
/ / 遍 历 第 二 层 数 组
for ( const level2 of level1 . children ) {
/ / 检 查 第 二 层 是 否 有 c h i l d r e n 且 是 数 组
if ( level2 . children && Array . isArray ( level2 . children ) ) {
/ / 将 第 三 层 的 所 有 对 象 添 加 到 结 果 数 组 中
result . push ( ... level2 . children ) ;
}
}
}
}
return result ;
} ;
const seedTypeChange = ( ) => {
console . log ( formInline . seedTypeId ) ;
/ / 重 新 获 取 表 格 数 据 ， 需 添 加 参 数
} ;
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 : '' , / / 地 块 i d
landName : '' , / / 地 块 名 称
name : '' , / / 姓 名
phone : '' , / / 联 系 方 式
totalYield : 0 , / / 地 块 总 产 量 （ 公 斤 ）
yield : 1 , / / 亩 产 量
detectionTime : '' , / / 使 用 时 间
businessEntityCode : '' , / / 经 营 主 体 编 码
businessEntityName : '' , / / 经 营 主 体 名 称
} ) ;
const handleRefresh = async ( ) => {
searchForm . value = { ... initialSearchForm } ;
getData ( ) ;
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 ( ) => {
/ / E l M e s s a g e . s u c c e s s ( ' 点 击 新 增 ! ' ) ;
restDialogForm ( ) ;
dialogTitle . value = '新增' ;
formDisabled . value = false ;
dialogFormVisible . value = true ;
} ;
const handleCurrentChange = ( val ) => {
pageData . value . currentPage = val ;
} ;
const handleSizeChange = ( val ) => {
pageData . value . pageSize = val ;
} ;
const handleView = ( row ) => {
isReadonly . value = true ;
formData . value = { ... row } ;
dialogTitle . value = '产出品信息' ;
visible . value = true ;
const seeDetails = async ( row ) => {
/ / E l M e s s a g e . s u c c e s s ( ' 查 看 详 情 ! ' ) ;
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 ) => {
isReadonly . value = false ;
formData . value = { ... row } ;
/ / E l M e s s a g e . s u c c e s s ( ' 点 击 编 辑 ! ' )
nowSelectRow. value = row ;
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 {
await ElMessageBox . confirm ( '确认删除该网格吗？' , '提示' , {
/ / 获 取 地 块 信 息
const getDetails = async ( ) => {
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 : '确定' ,
cancelButtonText : '取消' ,
type : 'warning' ,
} ) ;
const response = await deleteGrid ( row . id ) ;
ElMessage . success ( '删除成功' ) ;
getData ( ) ;
} )
. then ( ( ) => {
deleteGoods ( row . id )
. then ( ( res ) => {
if ( res . code === 200 ) {
onSubmit ( ) ;
app . $message . success ( '删除成功！' ) ;
}
} )
. catch ( ( err ) => {
app . $message . error ( err . msg ) ;
} ) ;
} )
. catch ( ( ) => { } ) ;
} ;
const deleteGoods = async ( ids ) => {
try {
let res = await DeleteOutput ( ids ) ;
return res ;
} catch ( error ) {
if ( error === 'cancel' ) {
ElMessage . info ( '已取消删除' ) ;
} else {
ElMessage . error ( '删除失败' ) ;
console . error ( '删除异常:' , error ) ;
return false ;
}
} ;
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 ) ;
/ / v a l i d . b u s i n e s s E n t i t y C o d e = d i a l o g F o r m . b u s i n e s s E n t i t y C o d e ; / / 经 营 主 体 编 码
/ / v a l i d . b u s i n e s s E n t i t y N a m e = d i a l o g F o r m . b u s i n e s s E n t i t y N a m e ; / / 经 营 主 体 名 称
let response ;
if ( dialogTitle . value == '新增' ) {
response = await AddOutput ( param ) ;
} else {
param . id = nowSelectRow . value . id ;
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 cancelDialog = async ( ) => {
restDialogForm ( ) ;
dialogFormVisible . value = false ;
} ;
const restDialogForm = ( ) => {
Object . assign ( dialogForm , {
area : 0 , / / 地 块 面 积
regionCode : '' , / / 所 属 行 政 区 域 代 码
regionName : '' , / / 所 属 行 政 区 域 名 称
gridId : '' , / / 所 属 网 格 代 码
gridName : '' , / / 所 属 网 格 名 称
landId : '' , / / 地 块 i d
landName : '' , / / 地 块 名 称
name : '' , / / 姓 名
phone : '' , / / 联 系 方 式
totalYield : 0 , / / 地 块 总 产 量 （ 公 斤 ）
yield : 1 , / / 亩 产 量
useTime : '' , / / 使 用 时 间
businessEntityCode : '' , / / 经 营 主 体 编 码
businessEntityName : '' , / / 经 营 主 体 名 称
} ) ;
nowSelectRow . value = ref ( { } ) ;
} ;
const seedTypeList = ref ( [ ] ) ;
const seedTypeDialogList = ref ( [ ] ) ;
const getSeedTypeList = async ( ) => {
try {
let response = await getMaterailTypes ( { moduleType : '4' } ) ;
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 handleSubmit = async ( ) => {
console . log ( '提交表单:' , formData . value ) ;
/ / t r y {
/ / i f ( d i a l o g T i t l e . v a l u e = = = ' 新 增 网 格 ' ) {
/ / a w a i t c r e a t e G r i d ( f o r m D a t a . v a l u e ) ;
/ / E l M e s s a g e . s u c c e s s ( ' 新 增 成 功 ' ) ;
/ / r e s e t F o r m ( ) ;
/ / v i s i b l e . v a l u e = f a l s e ;
/ / g e t D a t a ( ) ;
/ / } e l s e {
/ / a w a i t u p d a t e G r i d ( f o r m D a t a . v a l u e ) ;
/ / E l M e s s a g e . s u c c e s s ( ' 更 新 成 功 ' ) ;
/ / r e s e t F o r m ( ) ;
/ / v i s i b l e . v a l u e = f a l s e ;
/ / g e t D a t a ( ) ;
/ / }
/ / } c a t c h ( e r r o r ) {
/ / E l M e s s a g e . e r r o r ( e r r o r . m e s s a g e | | ' 新 增 失 败 ， 请 重 试 ' ) ;
/ / }
const unitList = ref ( [
{ 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 handleLandChange = ( val ) => {
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' } ,
] ;
}
} ;
/ / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
/ / 业 务 代 码
/ / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
import { createGrid , updateGrid , deleteGrid , fetchGridList , getGridDetail , exportGrid } from '@/apis/landResourceManagement/gridManagement' ;
import { mockData } from './output' ;
onMounted ( ( ) => {
getData ( ) ;
onSubmit ( ) ;
getLandsList ( ) ;
getEntityOptions ( ) ;
/ / g e t S e e d T y p e L i s t ( ) ;
} ) ;
const getData = async ( ) => {
/ / c o n s t f i l t e r e d P a r a m s = f i l t e r O b j e c t ( s e a r c h F o r m . v a l u e ) ;
/ / c o n s t r e s p o n s e = a w a i t f e t c h G r i d L i s t ( f i l t e r e d P a r a m s ) ;
/ / c r u d D a t a . v a l u e = A r r a y . i s A r r a y ( r e s p o n s e . d a t a . r e c o r d s ) ? r e s p o n s e . d a t a . r e c o r d s : [ ] ;
await new Promise ( ( resolve ) => setTimeout ( resolve , 300 ) ) ;
crudData . value = mockData ;
pageData . value . total = crudData . value . length ;
} ;
const handleAdd = ( ) => {
console . log ( 'handleAdd' ) ;
resetForm ( ) ;
isReadonly . value = false ;
dialogTitle . value = '新增网格' ;
visible . value = true ;
} ;
const handleSearch = ( ) => {
getData ( ) ;
} ;
const handleCancel = ( ) => {
visible . value = false ;
} ;
< / script >
< style scoped lang = "scss" >
: deep ( . el - dialog _ _body ) {
padding : 20 px ;
height : calc ( 100 vh - 300 px ) ;
overflow - y : auto ;
}
. form - title {
font - size : 16 px ;
font - weight : 500 ;
margin : 30 px 0 ;
color : # 333333 ;
}
. form - item {
margin : 0 auto ;
}
. dialog - footer {
text - align : center ;
}
. custom - search {
display : flex ;
align - items : center ;
margin - bottom : 16 px ;
. el - button {
margin - left : 12 px ;
< style lang = "scss" scoped >
. dialog - form - item {
: deep ( . el - upload -- picture - card ) {
width : 100 px ;
height : 100 px ;
}
: deep ( . file - uploader _ _upload ) {
width : 100 px ;
height : 100 px ;
}
: deep ( . el - upload - list _ _item ) {
width : 100 px ;
height : 100 px ;
}
}
/* 必须使用深度选择器 + 精确DOM层级 */
. custom - descriptions : deep ( . el - descriptions _ _body ) table . el - descriptions _ _table {
table - layout : fixed ; /* 关键属性1：
width : 100 % ;
}
. custom - descriptions : deep ( . el - descriptions _ _label ) {
width : 130 px ! important ; /* 关键属性2：
min - width : 130 px ! important ;
max - width : 130 px ! important ;
background : # f5f7fa ;
font - weight : bold ;
text - align : left ;
padding - right : 20 px ;
}
. custom - descriptions : deep ( . el - descriptions _ _content ) {
width : calc ( 100 % - 130 px ) ! important ; /* 自动填充剩余空间 */
word - break : break - word ;
}
< / style >
