Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
54cf828c22
75
sub-government-affairs-service/auto-imports.d.ts
vendored
Normal file
75
sub-government-affairs-service/auto-imports.d.ts
vendored
Normal file
@ -0,0 +1,75 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useId: typeof import('vue')['useId']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useModel: typeof import('vue')['useModel']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
}
|
||||
@ -11,6 +11,7 @@ declare module 'vue' {
|
||||
AreaSelect: typeof import('./src/components/AreaSelect/index.vue')['default']
|
||||
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
|
||||
FileUploader: typeof import('./src/components/FileUploader/index.vue')['default']
|
||||
LandSelect: typeof import('./src/components/LandSelect.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
TableComponent: typeof import('./src/components/tableComponent.vue')['default']
|
||||
|
||||
@ -0,0 +1,81 @@
|
||||
import request from '@/utils/axios';
|
||||
|
||||
/* 种子种苗需求-列表 */
|
||||
export function getSeedDemandRecords(params) {
|
||||
return request('/inputGoods/supervise/provenance/page', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
/* 种子种苗需求-新增 */
|
||||
export function seedDemandSave(data) {
|
||||
return request('/inputGoods/supervise/provenance/save', {
|
||||
method: 'POST',
|
||||
data,
|
||||
});
|
||||
}
|
||||
/* 种子种苗需求-编辑 */
|
||||
export function editSeedDemand(data) {
|
||||
return request('/inputGoods/supervise/provenance/edit', {
|
||||
data,
|
||||
method: 'PUT',
|
||||
});
|
||||
}
|
||||
/* 种子种苗需求-删除 */
|
||||
export function delSeedDemand(ids) {
|
||||
return request(`/inputGoods/supervise/provenance/delete/${ids}`);
|
||||
}
|
||||
|
||||
/* 获取详情-通用，传入url和参数 */
|
||||
export function getRowDetails({ url, id }) {
|
||||
return request(`${url}${id}`);
|
||||
}
|
||||
|
||||
/* 肥料需求-列表 */
|
||||
export function getFertilizeDemandRecords(params) {
|
||||
return request('/inputGoods/supervise/fertilize/page', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
/* 肥料需求-新增 */
|
||||
export function fertilizeDemandSave(data) {
|
||||
return request('/inputGoods/supervise/fertilize/save', {
|
||||
method: 'POST',
|
||||
data,
|
||||
});
|
||||
}
|
||||
/* 肥料需求-编辑 */
|
||||
export function editFertilizeDemand(data) {
|
||||
return request('/inputGoods/supervise/fertilize/edit', {
|
||||
data,
|
||||
method: 'PUT',
|
||||
});
|
||||
}
|
||||
/* 肥料需求-删除 */
|
||||
export function delFertilizeDemand(ids) {
|
||||
return request(`/inputGoods/supervise/fertilize/delete/${ids}`);
|
||||
}
|
||||
|
||||
/* 农药需求-列表 */
|
||||
export function getPesticideDemandRecords(params) {
|
||||
return request('/inputGoods/supervise/pesticide/page', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
/* 农药需求-新增 */
|
||||
export function pesticideDemandSave(data) {
|
||||
return request('/inputGoods/supervise/pesticide/save', {
|
||||
method: 'POST',
|
||||
data,
|
||||
});
|
||||
}
|
||||
/* 农药需求-编辑 */
|
||||
export function editPesticideDemand(data) {
|
||||
return request('/inputGoods/supervise/pesticide/edit', {
|
||||
data,
|
||||
method: 'PUT',
|
||||
});
|
||||
}
|
||||
/* 农药需求-删除 */
|
||||
export function delPesticideDemand(ids) {
|
||||
return request(`/inputGoods/supervise/pesticide/delete/${ids}`);
|
||||
}
|
||||
@ -26,8 +26,8 @@ export function delSeedUseRegulatory(ids) {
|
||||
}
|
||||
|
||||
/* 获取详情-通用，传入url和参数 */
|
||||
export function getRowDetails({ url, id }) {
|
||||
return request(`${url}${id}`);
|
||||
export function getRowDetails(url) {
|
||||
return request(url);
|
||||
}
|
||||
|
||||
/* 肥料使用监管-列表 */
|
||||
@ -79,3 +79,7 @@ export function editPesticideUseRegulatory(data) {
|
||||
export function delPesticideUseRegulatory(ids) {
|
||||
return request(`/inputGoods/supervise/pesticide/delete/${ids}`);
|
||||
}
|
||||
/* 获取地块列表 */
|
||||
export function getLandList() {
|
||||
return request(`/land-resource/landManage/getLandList`);
|
||||
}
|
||||
|
||||
@ -56,3 +56,11 @@ export function GetDictType(dictId) {
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
/**
|
||||
* @Title: 类型信息
|
||||
*/
|
||||
export function GetDictTypeInfo(dictId) {
|
||||
return request(`/system/dict/data/type/${dictId}`, {
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 349 KiB |
240
sub-government-affairs-service/src/components/LandSelect.vue
Normal file
240
sub-government-affairs-service/src/components/LandSelect.vue
Normal file
@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="land-select-container" :style="{ width: typeof width === 'number' ? `${width}px` : width }">
|
||||
<el-form v-if="enableValidation" ref="formRef" :model="form" :rules="rules" :validate-on-rule-change="false">
|
||||
<el-form-item :label="label" :prop="enableValidation ? 'selectedValue' : null">
|
||||
<el-select
|
||||
v-bind="$attrs"
|
||||
v-model="selectedValue"
|
||||
:placeholder="placeholder"
|
||||
:size="size"
|
||||
filterable
|
||||
:filter-method="handleFilter"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
style="flex: 1"
|
||||
@change="handleChange"
|
||||
@clear="handleClear"
|
||||
>
|
||||
<el-option v-for="item in filteredOptions" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div v-else>
|
||||
<div v-if="showLabel" class="land-select-label">{{ label }}</div>
|
||||
<el-select
|
||||
v-bind="$attrs"
|
||||
v-model="selectedValue"
|
||||
:placeholder="placeholder"
|
||||
:size="size"
|
||||
filterable
|
||||
:filter-method="handleFilter"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
style="flex: 1"
|
||||
@change="handleChange"
|
||||
>
|
||||
<el-option v-for="item in filteredOptions" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [String, Number, Array],
|
||||
default: '',
|
||||
},
|
||||
// 显示配置
|
||||
showLabel: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '选择地块',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择地块',
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 300,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator: (value) => ['large', 'default', 'small'].includes(value),
|
||||
},
|
||||
// 数据配置
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 字段映射配置
|
||||
valueKey: {
|
||||
type: String,
|
||||
default: 'id',
|
||||
},
|
||||
labelKey: {
|
||||
type: String,
|
||||
default: 'landName',
|
||||
},
|
||||
searchKey: {
|
||||
type: [String, Array],
|
||||
default: () => ['id', 'landName'],
|
||||
},
|
||||
enableValidation: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
rules: {
|
||||
type: [Object, Array],
|
||||
default: () => ({
|
||||
selectedValue: [{ required: true, message: '请选择地块', trigger: ['change', 'blur'] }],
|
||||
}),
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change', 'validate']);
|
||||
const formRef = ref(null);
|
||||
const selectedValue = ref(props.modelValue);
|
||||
const form = ref({ selectedValue: props.modelValue });
|
||||
|
||||
const filteredOptions = ref([]);
|
||||
const originalOptions = ref([]);
|
||||
|
||||
// 初始化选项数据
|
||||
const initOptions = () => {
|
||||
filteredOptions.value = [...props.options];
|
||||
originalOptions.value = [...props.options];
|
||||
};
|
||||
|
||||
// 筛选方法
|
||||
const handleFilter = (query) => {
|
||||
if (!query) {
|
||||
filteredOptions.value = [...originalOptions.value];
|
||||
return;
|
||||
}
|
||||
|
||||
const lowerCaseQuery = query.toLowerCase();
|
||||
const searchKeys = Array.isArray(props.searchKey) ? props.searchKey : [props.searchKey];
|
||||
|
||||
filteredOptions.value = originalOptions.value.filter((item) => {
|
||||
// 检查所有搜索字段是否匹配
|
||||
return searchKeys.some((key) => {
|
||||
const fieldValue = item[key];
|
||||
return fieldValue && String(fieldValue).toLowerCase().includes(lowerCaseQuery);
|
||||
});
|
||||
});
|
||||
};
|
||||
// 新增清除处理方法
|
||||
const handleClear = () => {
|
||||
if (props.enableValidation) {
|
||||
// 立即触发验证
|
||||
setTimeout(() => {
|
||||
formRef.value?.validateField('selectedValue');
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
// 处理值变化
|
||||
const handleChange = (value) => {
|
||||
const oldValue = selectedValue.value;
|
||||
selectedValue.value = value;
|
||||
emit('update:modelValue', value);
|
||||
|
||||
// 只有值真实变化时才触发change
|
||||
if (value !== oldValue) {
|
||||
emit('change', value);
|
||||
}
|
||||
};
|
||||
|
||||
// 单个字段验证
|
||||
const validateField = async (value) => {
|
||||
if (!props.enableValidation || !formRef.value) return true;
|
||||
|
||||
try {
|
||||
await formRef.value.validateField('selectedValue');
|
||||
emit('validate', { valid: true, value });
|
||||
return true;
|
||||
} catch (error) {
|
||||
emit('validate', { valid: false, error, value });
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 暴露验证方法
|
||||
defineExpose({
|
||||
validate: async () => {
|
||||
if (!props.enableValidation) return true;
|
||||
return formRef.value?.validate();
|
||||
},
|
||||
resetFields: () => {
|
||||
if (props.enableValidation) {
|
||||
formRef.value?.resetFields();
|
||||
}
|
||||
selectedValue.value = '';
|
||||
},
|
||||
handleChange,
|
||||
});
|
||||
|
||||
// 监听props变化
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
selectedValue.value = newVal;
|
||||
form.value.selectedValue = newVal;
|
||||
}
|
||||
);
|
||||
|
||||
// 监听enableValidation变化
|
||||
watch(
|
||||
() => props.enableValidation,
|
||||
(newVal) => {
|
||||
if (!newVal && formRef.value) {
|
||||
formRef.value.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.options,
|
||||
() => {
|
||||
initOptions();
|
||||
}
|
||||
);
|
||||
|
||||
// 监听selectedValue变化
|
||||
watch(selectedValue, (newVal) => {
|
||||
emit('update:modelValue', newVal);
|
||||
emit('change', newVal);
|
||||
});
|
||||
|
||||
// 组件挂载时初始化
|
||||
onMounted(() => {
|
||||
initOptions();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.land-select-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.land-select-label {
|
||||
margin-right: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
@ -154,10 +154,16 @@ const props = defineProps({
|
||||
type: Function,
|
||||
default: () => 'custom-cell',
|
||||
},
|
||||
// 设置表格行的主键，获取主键集合时用，默认主键为id
|
||||
rowkey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 动态控制表格的最低高度，无数据时的最小值
|
||||
minHeight: {
|
||||
type: [String, Number],
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change', 'selection-change']);
|
||||
@ -240,6 +246,11 @@ onBeforeUnmount(() => {
|
||||
height: 100%; /* 关键：继承父容器高度 */
|
||||
overflow: hidden; /* 防止内容溢出 */
|
||||
|
||||
// 动态控制表格的最低高度，无数据时的最小值
|
||||
:deep(.el-scrollbar__wrap) {
|
||||
min-height: v-bind('props.minHeight');
|
||||
}
|
||||
|
||||
/* 表格弹性布局 */
|
||||
:deep(.el-table) {
|
||||
flex: 1;
|
||||
|
||||
@ -63,6 +63,38 @@ const inputSuppliesRoutes = [
|
||||
// component: () => import('@/views/inputSuppliesManage/material/others/index.vue'),
|
||||
// meta: { title: '其他投入品管理', icon: 'TakeawayBox' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-government-affairs-service/demandManage ',
|
||||
name: 'demandManage',
|
||||
redirect: '/sub-government-affairs-service/demandManage/seedRegulation',
|
||||
meta: { title: '投入品需求管理', icon: 'Connection' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/demandManage/demandOverview',
|
||||
name: 'demandOverview',
|
||||
component: () => import('@/views/inputSuppliesManage/demandManage/demandOverview.vue'),
|
||||
meta: { title: '投入品需求概览', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/demandManage/seedDemand',
|
||||
name: 'seedDemand',
|
||||
component: () => import('@/views/inputSuppliesManage/demandManage/seedDemand.vue'),
|
||||
meta: { title: '种子种苗需求', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/demandManage/fertilizerDemand',
|
||||
name: 'fertilizerDemand',
|
||||
component: () => import('@/views/inputSuppliesManage/demandManage/fertilizerDemand.vue'),
|
||||
meta: { title: '肥料需求', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/demandManage/pesticideDemand',
|
||||
name: 'pesticideDemand',
|
||||
component: () => import('@/views/inputSuppliesManage/demandManage/pesticideDemand.vue'),
|
||||
meta: { title: '农药需求', icon: '' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/supervisionOfInputs ',
|
||||
name: 'supervisionOfInputs',
|
||||
|
||||
@ -85,6 +85,17 @@
|
||||
padding-right: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.table-statistics {
|
||||
padding: 10px 20px;
|
||||
margin: 20px 20px 0 20px;
|
||||
background-color: #e6f7ff;
|
||||
border: 1px solid #bae7ff;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.table-cont {
|
||||
padding: 10px 20px;
|
||||
overflow: hidden;
|
||||
@ -309,15 +320,22 @@
|
||||
}
|
||||
// 新增商品页面-结束
|
||||
|
||||
// 弹性布局-左对齐-上对齐
|
||||
// 弹性布局-左对齐-上对齐（通用）
|
||||
.flex-left-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
// 弹性布局-左对齐-上对齐（通用）
|
||||
.flex-left-center {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 溢出隐藏
|
||||
// 溢出隐藏（通用）
|
||||
.text-ellipsis {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@ -325,6 +343,13 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mr-20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.mb-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// 弹窗表单样式-子元素一行2个列
|
||||
.dialog-form-container {
|
||||
.dialog-form-title {
|
||||
@ -347,3 +372,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/input/demand-overview.png')})`"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getAssetsFile } from '@/utils';
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-page {
|
||||
height: calc(100vh - 150px);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,453 @@
|
||||
<template>
|
||||
<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">{{ totalSeed }}</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 #useNumber="slotProps">
|
||||
<el-button text type="primary" @click="seeDetails(slotProps.row)">查看</el-button>
|
||||
</template>
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||
</template>
|
||||
</tableComponent>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||
<el-form
|
||||
ref="dialogRef"
|
||||
:model="dialogForm"
|
||||
:inline="true"
|
||||
:label-width="'120'"
|
||||
:rules="dialogFormRules"
|
||||
:disabled="formDisabled"
|
||||
class="dialog-form-container"
|
||||
>
|
||||
<el-form-item label="种子种苗名称" prop="seedName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.seedName" clearable placeholder="请输入种子种苗名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="品种名称" prop="varietyName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.varietyName" clearable placeholder="请输入品种名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="品牌" prop="brand" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.brand" clearable placeholder="请输入品牌" />
|
||||
</el-form-item>
|
||||
<el-form-item label="生产厂家" prop="manufacturer" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.manufacturer" clearable placeholder="请输入生产厂家" />
|
||||
</el-form-item>
|
||||
<el-form-item label="蔬菜种苗" prop="classifyId" class="dialog-form-item">
|
||||
<el-cascader
|
||||
v-model="dialogForm.classifyId"
|
||||
:options="seedTypeDialogList"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择"
|
||||
@change="handleCascaderChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品规格" prop="productUnit" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.productUnit" clearable placeholder="请输入产品规格" />
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex">
|
||||
<div style="width: 50%; display: inline-block">
|
||||
<el-form-item label="种子种苗主图" prop="photoUrl" class="dialog-form-item" style="width: 100%">
|
||||
<FileUploader v-model="dialogForm.photoUrl" :limit="1" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="width: 50%; display: inline-block">
|
||||
<el-form-item label="种子种苗详情图" prop="photoUrlDetail" class="dialog-form-item" style="width: 100%">
|
||||
<FileUploader v-model="dialogForm.photoUrlDetail" :limit="1" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import tableComponent from '@/components/tableComponent.vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||
const { getMaterailTypes } = inputSuppliesApi;
|
||||
import {
|
||||
getFertilizeDemandRecords,
|
||||
fertilizeDemandSave,
|
||||
editFertilizeDemand,
|
||||
delFertilizeDemand,
|
||||
getRowDetails,
|
||||
} from '@/apis/inputSuppliesApi/demandManage';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
name: '',
|
||||
seedTypeId: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
formInline.current = 1;
|
||||
loadData();
|
||||
};
|
||||
const resetForm = () => {
|
||||
searchForm.value.resetFields();
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const selectedIds = ref([]);
|
||||
const selectedRows = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
const columns = ref([
|
||||
{ prop: 'regionCode', label: '行政区域编码' },
|
||||
{ prop: 'regionName', label: '行政区域名称' },
|
||||
{ prop: 'gridId', label: '网格编码' },
|
||||
{ prop: 'gridName', label: '网格名称' },
|
||||
{ prop: 'landId', label: '地块编码' },
|
||||
{ prop: 'landName', label: '地块名称' },
|
||||
{ prop: 'extent', label: '面积(亩)' },
|
||||
{ prop: 'useNumber', label: '肥料需求', slotName: 'useNumber' },
|
||||
{ prop: 'businessEntityCode', label: '生产经营主体编码' },
|
||||
{ prop: 'businessEntityName', label: '生产经营主体名称' },
|
||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
loadData();
|
||||
};
|
||||
let landNums = ref(0);
|
||||
let totalArea = computed(() => {
|
||||
return selectedRows.value.reduce((sum, item) => sum + item.extent, 0);
|
||||
});
|
||||
let totalSeed = computed(() => {
|
||||
return selectedRows.value.reduce((sum, item) => sum + item.useNumber, 0);
|
||||
});
|
||||
const handleSelectionChange = (selection, keys) => {
|
||||
// console.log(selection, keys);
|
||||
selectedRows.value = selection;
|
||||
landNums.value = selection.length;
|
||||
};
|
||||
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
let response = await getFertilizeDemandRecords(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 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 seedTypeChange = () => {
|
||||
console.log(formInline.seedTypeId);
|
||||
// 重新获取表格数据，需添加参数
|
||||
};
|
||||
|
||||
const dialogFormVisible = ref(false);
|
||||
const dialogRef = ref(null);
|
||||
const dialogTitle = ref('新增');
|
||||
const formDisabled = ref(false);
|
||||
const dialogForm = reactive({
|
||||
id: '',
|
||||
seedName: '', //种子种苗名称
|
||||
varietyName: '', //品种名称
|
||||
brand: '', //品牌
|
||||
manufacturer: '', //生产厂家
|
||||
classifyId: '', //蔬菜种苗id
|
||||
classifyName: '', //蔬菜种苗名称
|
||||
productSpecification: '', //产品规格（number）
|
||||
productUnit: '', //产品规格单位
|
||||
productAttributes: '', //自定义商品属性
|
||||
photoUrl: '', //种子种苗主图
|
||||
photoUrlDetail: '', //种子种苗详情图
|
||||
});
|
||||
const dialogFormRules = ref({
|
||||
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||
classifyId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择蔬菜种苗',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
],
|
||||
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const addItem = async () => {
|
||||
ElMessage.success('点击新增!');
|
||||
// restDialogForm();
|
||||
// dialogTitle.value = '新增';
|
||||
// formDisabled.value = false;
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const seeDetails = async (row) => {
|
||||
ElMessage.success('点击查看详情!');
|
||||
// dialogTitle.value = '详情';
|
||||
// setDialogForm(row);
|
||||
// formDisabled.value = true;
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
ElMessage.success('点击编辑!');
|
||||
// console.log('要编辑的行: ', row);
|
||||
// dialogTitle.value = '编辑';
|
||||
// setDialogForm(row);
|
||||
// formDisabled.value = false;
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const setDialogForm = (row) => {
|
||||
dialogForm.id = row.id;
|
||||
dialogForm.seedName = row.seedName;
|
||||
dialogForm.varietyName = row.varietyName;
|
||||
dialogForm.brand = row.brand;
|
||||
dialogForm.manufacturer = row.manufacturer;
|
||||
dialogForm.classifyId = row.classifyId;
|
||||
dialogForm.classifyName = row.classifyName;
|
||||
dialogForm.productSpecification = row.productSpecification;
|
||||
dialogForm.productUnit = row.productUnit;
|
||||
dialogForm.productAttributes = row.productAttributes;
|
||||
dialogForm.photoUrl = row.photoUrl;
|
||||
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||
};
|
||||
const handleDelete = (row) => {
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.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 delFertilizeDemand(ids);
|
||||
return res;
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const onSaveCategory = () => {
|
||||
console.log(dialogForm);
|
||||
dialogRef.value.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
try {
|
||||
let param = { ...dialogForm };
|
||||
param.classifyId = dialogForm.classifyId.join(',');
|
||||
param.classifyName = dialogForm.classifyName.join(',');
|
||||
console.log(param);
|
||||
let response;
|
||||
if (dialogTitle.value == '新增') {
|
||||
response = await fertilizeDemandSave(param);
|
||||
} else {
|
||||
response = await editFertilizeDemand(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, {
|
||||
id: '',
|
||||
seedName: '', //种子种苗名称
|
||||
varietyName: '', //品种名称
|
||||
brand: '', //品牌
|
||||
manufacturer: '', //生产厂家
|
||||
classifyId: '', //蔬菜种苗id
|
||||
classifyName: '', //蔬菜种苗名称
|
||||
productSpecification: '', //产品规格（number）
|
||||
productUnit: '', //产品规格单位
|
||||
productAttributes: '', //自定义商品属性
|
||||
photoUrl: '', //种子种苗主图
|
||||
photoUrlDetail: '', //种子种苗详情图
|
||||
});
|
||||
};
|
||||
|
||||
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 cascaderProps = ref({
|
||||
label: 'dataName', // 选项标签字段名
|
||||
value: 'id', // 选项值字段名
|
||||
children: 'children', // 子选项字段名
|
||||
emitPath: true,
|
||||
expandTrigger: 'hover',
|
||||
});
|
||||
const handleCascaderChange = () => {
|
||||
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||
// 如果需要，可以将名称也保存到表单数据中
|
||||
dialogForm.classifyName = selectedNames;
|
||||
};
|
||||
const getSelectedNames = (ids) => {
|
||||
if (!ids || !ids.length) return [];
|
||||
|
||||
let names = [];
|
||||
let currentLevel = seedTypeDialogList.value;
|
||||
|
||||
for (const id of ids) {
|
||||
const foundItem = currentLevel.find((item) => item.id === id);
|
||||
if (!foundItem) break;
|
||||
|
||||
names.push(foundItem.dataName);
|
||||
currentLevel = foundItem.children || [];
|
||||
}
|
||||
|
||||
return names;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSubmit();
|
||||
getSeedTypeList();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dialog-form-item {
|
||||
:deep(.el-upload--picture-card) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
:deep(.file-uploader__upload) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
:deep(.el-upload-list__item) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,452 @@
|
||||
<template>
|
||||
<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">{{ totalSeed }}</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 #useNumber="slotProps">
|
||||
<el-button text type="primary" @click="seeDetails(slotProps.row)">查看</el-button>
|
||||
</template>
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||
</template>
|
||||
</tableComponent>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||
<el-form
|
||||
ref="dialogRef"
|
||||
:model="dialogForm"
|
||||
:inline="true"
|
||||
:label-width="'120'"
|
||||
:rules="dialogFormRules"
|
||||
:disabled="formDisabled"
|
||||
class="dialog-form-container"
|
||||
>
|
||||
<el-form-item label="种子种苗名称" prop="seedName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.seedName" clearable placeholder="请输入种子种苗名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="品种名称" prop="varietyName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.varietyName" clearable placeholder="请输入品种名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="品牌" prop="brand" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.brand" clearable placeholder="请输入品牌" />
|
||||
</el-form-item>
|
||||
<el-form-item label="生产厂家" prop="manufacturer" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.manufacturer" clearable placeholder="请输入生产厂家" />
|
||||
</el-form-item>
|
||||
<el-form-item label="蔬菜种苗" prop="classifyId" class="dialog-form-item">
|
||||
<el-cascader
|
||||
v-model="dialogForm.classifyId"
|
||||
:options="seedTypeDialogList"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择"
|
||||
@change="handleCascaderChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品规格" prop="productUnit" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.productUnit" clearable placeholder="请输入产品规格" />
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex">
|
||||
<div style="width: 50%; display: inline-block">
|
||||
<el-form-item label="种子种苗主图" prop="photoUrl" class="dialog-form-item" style="width: 100%">
|
||||
<FileUploader v-model="dialogForm.photoUrl" :limit="1" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="width: 50%; display: inline-block">
|
||||
<el-form-item label="种子种苗详情图" prop="photoUrlDetail" class="dialog-form-item" style="width: 100%">
|
||||
<FileUploader v-model="dialogForm.photoUrlDetail" :limit="1" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import tableComponent from '@/components/tableComponent.vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||
const { getMaterailTypes } = inputSuppliesApi;
|
||||
import {
|
||||
getPesticideDemandRecords,
|
||||
pesticideDemandSave,
|
||||
editPesticideDemand,
|
||||
delPesticideDemand,
|
||||
getRowDetails,
|
||||
} from '@/apis/inputSuppliesApi/demandManage';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
name: '',
|
||||
seedTypeId: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
formInline.current = 1;
|
||||
loadData();
|
||||
};
|
||||
const resetForm = () => {
|
||||
searchForm.value.resetFields();
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const selectedIds = ref([]);
|
||||
const selectedRows = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
const columns = ref([
|
||||
{ prop: 'regionCode', label: '行政区域编码' },
|
||||
{ prop: 'regionName', label: '行政区域名称' },
|
||||
{ prop: 'gridId', label: '网格编码' },
|
||||
{ prop: 'gridName', label: '网格名称' },
|
||||
{ prop: 'landId', label: '地块编码' },
|
||||
{ prop: 'landName', label: '地块名称' },
|
||||
{ prop: 'extent', label: '面积(亩)' },
|
||||
{ prop: 'useNumber', label: '农药需求', slotName: 'useNumber' },
|
||||
{ prop: 'businessEntityCode', label: '生产经营主体编码' },
|
||||
{ prop: 'businessEntityName', label: '生产经营主体名称' },
|
||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
loadData();
|
||||
};
|
||||
let landNums = ref(0);
|
||||
let totalArea = computed(() => {
|
||||
return selectedRows.value.reduce((sum, item) => sum + item.extent, 0);
|
||||
});
|
||||
let totalSeed = computed(() => {
|
||||
return selectedRows.value.reduce((sum, item) => sum + item.useNumber, 0);
|
||||
});
|
||||
const handleSelectionChange = (selection, keys) => {
|
||||
// console.log(selection, keys);
|
||||
selectedRows.value = selection;
|
||||
landNums.value = selection.length;
|
||||
};
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
let response = await getPesticideDemandRecords(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 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 seedTypeChange = () => {
|
||||
console.log(formInline.seedTypeId);
|
||||
// 重新获取表格数据，需添加参数
|
||||
};
|
||||
|
||||
const dialogFormVisible = ref(false);
|
||||
const dialogRef = ref(null);
|
||||
const dialogTitle = ref('新增');
|
||||
const formDisabled = ref(false);
|
||||
const dialogForm = reactive({
|
||||
id: '',
|
||||
seedName: '', //种子种苗名称
|
||||
varietyName: '', //品种名称
|
||||
brand: '', //品牌
|
||||
manufacturer: '', //生产厂家
|
||||
classifyId: '', //蔬菜种苗id
|
||||
classifyName: '', //蔬菜种苗名称
|
||||
productSpecification: '', //产品规格（number）
|
||||
productUnit: '', //产品规格单位
|
||||
productAttributes: '', //自定义商品属性
|
||||
photoUrl: '', //种子种苗主图
|
||||
photoUrlDetail: '', //种子种苗详情图
|
||||
});
|
||||
const dialogFormRules = ref({
|
||||
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||
classifyId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择蔬菜种苗',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
],
|
||||
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const addItem = async () => {
|
||||
ElMessage.success('点击新增!');
|
||||
// restDialogForm();
|
||||
// dialogTitle.value = '新增';
|
||||
// formDisabled.value = false;
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const seeDetails = async (row) => {
|
||||
ElMessage.success('点击查看详情!');
|
||||
// dialogTitle.value = '详情';
|
||||
// setDialogForm(row);
|
||||
// formDisabled.value = true;
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
ElMessage.success('点击编辑!');
|
||||
console.log('要编辑的行: ', row);
|
||||
// dialogTitle.value = '编辑';
|
||||
// setDialogForm(row);
|
||||
// formDisabled.value = false;
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const setDialogForm = (row) => {
|
||||
dialogForm.id = row.id;
|
||||
dialogForm.seedName = row.seedName;
|
||||
dialogForm.varietyName = row.varietyName;
|
||||
dialogForm.brand = row.brand;
|
||||
dialogForm.manufacturer = row.manufacturer;
|
||||
dialogForm.classifyId = row.classifyId;
|
||||
dialogForm.classifyName = row.classifyName;
|
||||
dialogForm.productSpecification = row.productSpecification;
|
||||
dialogForm.productUnit = row.productUnit;
|
||||
dialogForm.productAttributes = row.productAttributes;
|
||||
dialogForm.photoUrl = row.photoUrl;
|
||||
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||
};
|
||||
const handleDelete = (row) => {
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.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 delPesticideDemand(ids);
|
||||
return res;
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const onSaveCategory = () => {
|
||||
console.log(dialogForm);
|
||||
dialogRef.value.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
try {
|
||||
let param = { ...dialogForm };
|
||||
param.classifyId = dialogForm.classifyId.join(',');
|
||||
param.classifyName = dialogForm.classifyName.join(',');
|
||||
console.log(param);
|
||||
let response;
|
||||
if (dialogTitle.value == '新增') {
|
||||
response = await pesticideDemandSave(param);
|
||||
} else {
|
||||
response = await editPesticideDemand(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, {
|
||||
id: '',
|
||||
seedName: '', //种子种苗名称
|
||||
varietyName: '', //品种名称
|
||||
brand: '', //品牌
|
||||
manufacturer: '', //生产厂家
|
||||
classifyId: '', //蔬菜种苗id
|
||||
classifyName: '', //蔬菜种苗名称
|
||||
productSpecification: '', //产品规格（number）
|
||||
productUnit: '', //产品规格单位
|
||||
productAttributes: '', //自定义商品属性
|
||||
photoUrl: '', //种子种苗主图
|
||||
photoUrlDetail: '', //种子种苗详情图
|
||||
});
|
||||
};
|
||||
|
||||
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 cascaderProps = ref({
|
||||
label: 'dataName', // 选项标签字段名
|
||||
value: 'id', // 选项值字段名
|
||||
children: 'children', // 子选项字段名
|
||||
emitPath: true,
|
||||
expandTrigger: 'hover',
|
||||
});
|
||||
const handleCascaderChange = () => {
|
||||
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||
// 如果需要，可以将名称也保存到表单数据中
|
||||
dialogForm.classifyName = selectedNames;
|
||||
};
|
||||
const getSelectedNames = (ids) => {
|
||||
if (!ids || !ids.length) return [];
|
||||
|
||||
let names = [];
|
||||
let currentLevel = seedTypeDialogList.value;
|
||||
|
||||
for (const id of ids) {
|
||||
const foundItem = currentLevel.find((item) => item.id === id);
|
||||
if (!foundItem) break;
|
||||
|
||||
names.push(foundItem.dataName);
|
||||
currentLevel = foundItem.children || [];
|
||||
}
|
||||
|
||||
return names;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSubmit();
|
||||
getSeedTypeList();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dialog-form-item {
|
||||
:deep(.el-upload--picture-card) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
:deep(.file-uploader__upload) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
:deep(.el-upload-list__item) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,481 @@
|
||||
<template>
|
||||
<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="" style="margin-left: -15px">
|
||||
<AreaCascader
|
||||
v-model:value="areaFormData"
|
||||
v-model:region-code="formInline.regionCode"
|
||||
v-model:grid-id="formInline.gridId"
|
||||
label="行政区域-网格"
|
||||
:width="500"
|
||||
/>
|
||||
</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.seedName" />
|
||||
</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">{{ totalSeed }}</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>
|
||||
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||
<el-form :inline="true" :label-width="'auto'">
|
||||
<el-form-item label="地块编号" prop="seedName">
|
||||
<el-input v-model="dialogForm.id" placeholder="请输入地块编号" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button type="primary" icon="Search" @click="getDetails">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-descriptions title="地块信息" border>
|
||||
<el-descriptions-item label="地块">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="所属行政区">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="所属网格">Suzhou</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions title="经营主体信息" border>
|
||||
<el-descriptions-item label="姓名">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="联系方式">18100000000</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-form
|
||||
ref="dialogRef"
|
||||
:model="dialogForm"
|
||||
:inline="true"
|
||||
:label-width="'80'"
|
||||
:rules="dialogFormRules"
|
||||
:disabled="formDisabled"
|
||||
class="dialog-form-container"
|
||||
>
|
||||
<div class="dialog-form-title">农药用药详情</div>
|
||||
<el-form-item label="种子编号" prop="name" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.name" clearable placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="种子名称" prop="phone" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.phone" clearable placeholder="请输入联系方式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="使用量" required prop="useNumber" class="dialog-form-item">
|
||||
<el-input-number v-model="dialogForm.useNumber" :min="1" :controls="false" placeholder="请输入用药量" style="width: 150px" />
|
||||
<el-select v-model="dialogForm.useUnit" placeholder="请选择" style="width: 80px">
|
||||
<el-option v-for="el in unitList" :key="el.unit" :value="el.unit" :label="el.unit" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<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>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import tableComponent from '@/components/tableComponent.vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||
const { getMaterailTypes } = inputSuppliesApi;
|
||||
import { getSeedDemandRecords, seedDemandSave, editSeedDemand, delSeedDemand, getRowDetails } from '@/apis/inputSuppliesApi/demandManage';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
import Mock from 'mockjs';
|
||||
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
regionCode: '',
|
||||
regionName: '',
|
||||
gridId: '',
|
||||
gridName: '',
|
||||
seedTypeId: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
console.log(formInline);
|
||||
formInline.current = 1;
|
||||
loadData();
|
||||
};
|
||||
const resetForm = () => {
|
||||
searchForm.value.resetFields();
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const selectedIds = ref([]);
|
||||
const selectedRows = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
const columns = ref([
|
||||
{ prop: 'regionCode', label: '行政区域编码' },
|
||||
{ prop: 'regionName', label: '行政区域名称' },
|
||||
{ prop: 'gridId', label: '网格编码' },
|
||||
{ prop: 'gridName', label: '网格名称' },
|
||||
{ prop: 'landId', label: '地块编码' },
|
||||
{ prop: 'landName', label: '地块名称' },
|
||||
{ prop: 'extent', label: '面积(亩)' },
|
||||
{ prop: 'provenanceId', label: '种子种苗编号' },
|
||||
{ prop: 'provenanceName', label: '种子种苗名称' },
|
||||
{ prop: 'useUnit', label: '规格' },
|
||||
{ prop: 'useNumber', label: '需求量(件)' },
|
||||
{ prop: 'useTime', label: '需求时间' },
|
||||
{ prop: 'businessEntityCode', label: '生产经营主体编码' },
|
||||
{ prop: 'businessEntityName', label: '生产经营主体名称' },
|
||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
loadData();
|
||||
};
|
||||
let landNums = ref(0);
|
||||
let totalArea = computed(() => {
|
||||
return selectedRows.value.reduce((sum, item) => sum + item.extent, 0);
|
||||
});
|
||||
let totalSeed = computed(() => {
|
||||
return selectedRows.value.reduce((sum, item) => sum + item.useNumber, 0);
|
||||
});
|
||||
const handleSelectionChange = (selection, keys) => {
|
||||
// console.log(selection, keys);
|
||||
selectedRows.value = selection;
|
||||
landNums.value = selection.length;
|
||||
};
|
||||
const extentArr = Mock.mock({
|
||||
'list|1-10': [{ extent: () => Mock.Random.float(100, 200, 2, 2) }],
|
||||
}).list;
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
let response = await getSeedDemandRecords(formInline);
|
||||
tableLoading.value = false;
|
||||
if (response.code == 200) {
|
||||
tableData.value = response.data.records;
|
||||
tableTotal.value = response.data.total;
|
||||
|
||||
// 没有接口，添加模拟数据
|
||||
tableData.value.forEach((el, index) => {
|
||||
el.extent = extentArr[index].extent;
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
tableLoading.value = false;
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
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 seedTypeChange = () => {
|
||||
console.log(formInline.seedTypeId);
|
||||
// 重新获取表格数据，需添加参数
|
||||
};
|
||||
|
||||
const dialogFormVisible = ref(false);
|
||||
const dialogRef = ref(null);
|
||||
const dialogTitle = ref('新增');
|
||||
const formDisabled = ref(false);
|
||||
const dialogForm = reactive({
|
||||
id: '',
|
||||
seedName: '', //种子种苗名称
|
||||
varietyName: '', //品种名称
|
||||
brand: '', //品牌
|
||||
manufacturer: '', //生产厂家
|
||||
classifyId: '', //蔬菜种苗id
|
||||
classifyName: '', //蔬菜种苗名称
|
||||
productSpecification: '', //产品规格（number）
|
||||
productUnit: '', //产品规格单位
|
||||
productAttributes: '', //自定义商品属性
|
||||
photoUrl: '', //种子种苗主图
|
||||
photoUrlDetail: '', //种子种苗详情图
|
||||
});
|
||||
const dialogFormRules = ref({
|
||||
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||
classifyId: [{ required: true, message: '请选择蔬菜种苗', trigger: ['change', 'blur'] }],
|
||||
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const addItem = async () => {
|
||||
ElMessage.success('点击新增!');
|
||||
// restDialogForm();
|
||||
// dialogTitle.value = '新增';
|
||||
// formDisabled.value = false;
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const seeDetails = async (row) => {
|
||||
console.log('查看详情: ', row);
|
||||
ElMessage.success('点击查看详情!');
|
||||
// dialogTitle.value = '详情';
|
||||
// setDialogForm(row);
|
||||
// formDisabled.value = true;
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
console.log('要编辑的行: ', row);
|
||||
ElMessage.success('点击编辑!');
|
||||
// dialogTitle.value = '编辑';
|
||||
// setDialogForm(row);
|
||||
// formDisabled.value = false;
|
||||
// dialogFormVisible.value = true;
|
||||
};
|
||||
const getDetails = async () => {
|
||||
let response = await getRowDetails({
|
||||
url: '/inputGoods/supervise/provenance/getDetail/',
|
||||
id: dialogForm.id,
|
||||
});
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
setDialogForm(response.data);
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
};
|
||||
const setDialogForm = (row) => {
|
||||
dialogForm.id = row.id;
|
||||
dialogForm.seedName = row.seedName;
|
||||
dialogForm.varietyName = row.varietyName;
|
||||
dialogForm.brand = row.brand;
|
||||
dialogForm.manufacturer = row.manufacturer;
|
||||
dialogForm.classifyId = row.classifyId;
|
||||
dialogForm.classifyName = row.classifyName;
|
||||
dialogForm.productSpecification = row.productSpecification;
|
||||
dialogForm.productUnit = row.productUnit;
|
||||
dialogForm.productAttributes = row.productAttributes;
|
||||
dialogForm.photoUrl = row.photoUrl;
|
||||
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||
};
|
||||
const handleDelete = (row) => {
|
||||
console.log('删除操作: ', row);
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.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 delSeedDemand(ids);
|
||||
return res;
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const onSaveCategory = () => {
|
||||
console.log(dialogForm);
|
||||
dialogRef.value.validate(async (valid, fields) => {
|
||||
if (valid) {
|
||||
try {
|
||||
let param = { ...dialogForm };
|
||||
param.classifyId = dialogForm.classifyId.join(',');
|
||||
param.classifyName = dialogForm.classifyName.join(',');
|
||||
console.log(param);
|
||||
let response;
|
||||
if (dialogTitle.value == '新增') {
|
||||
response = await seedDemandSave(param);
|
||||
} else {
|
||||
response = await editSeedDemand(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, {
|
||||
id: '',
|
||||
seedName: '', //种子种苗名称
|
||||
varietyName: '', //品种名称
|
||||
brand: '', //品牌
|
||||
manufacturer: '', //生产厂家
|
||||
classifyId: '', //蔬菜种苗id
|
||||
classifyName: '', //蔬菜种苗名称
|
||||
productSpecification: '', //产品规格（number）
|
||||
productUnit: '', //产品规格单位
|
||||
productAttributes: '', //自定义商品属性
|
||||
photoUrl: '', //种子种苗主图
|
||||
photoUrlDetail: '', //种子种苗详情图
|
||||
});
|
||||
};
|
||||
|
||||
const seedTypeList = ref([
|
||||
{ id: '1', seedName: '番茄' },
|
||||
{ id: '2', seedName: '白菜' },
|
||||
{ id: '3', seedName: '辣椒' },
|
||||
]);
|
||||
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 cascaderProps = ref({
|
||||
label: 'dataName', // 选项标签字段名
|
||||
value: 'id', // 选项值字段名
|
||||
children: 'children', // 子选项字段名
|
||||
emitPath: true,
|
||||
expandTrigger: 'hover',
|
||||
});
|
||||
const handleCascaderChange = () => {
|
||||
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||
// 如果需要，可以将名称也保存到表单数据中
|
||||
dialogForm.classifyName = selectedNames;
|
||||
};
|
||||
const getSelectedNames = (ids) => {
|
||||
if (!ids || !ids.length) return [];
|
||||
|
||||
let names = [];
|
||||
let currentLevel = seedTypeDialogList.value;
|
||||
|
||||
for (const id of ids) {
|
||||
const foundItem = currentLevel.find((item) => item.id === id);
|
||||
if (!foundItem) break;
|
||||
|
||||
names.push(foundItem.dataName);
|
||||
currentLevel = foundItem.children || [];
|
||||
}
|
||||
|
||||
return names;
|
||||
};
|
||||
|
||||
const unitList = ref([
|
||||
{ id: '1', unit: 'kg' },
|
||||
{ id: '2', unit: 'g' },
|
||||
{ id: '3', unit: 'L' },
|
||||
{ id: '4', unit: 'ml' },
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
onSubmit();
|
||||
// getSeedTypeList();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dialog-form-item {
|
||||
:deep(.el-upload--picture-card) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
:deep(.file-uploader__upload) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
:deep(.el-upload-list__item) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -6,8 +6,8 @@
|
||||
<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 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">
|
||||
@ -156,6 +156,9 @@ const columns = ref([
|
||||
{ prop: 'planLocation', label: '种植地点' },
|
||||
{ prop: 'cropType', label: '种植作物种类' },
|
||||
{ prop: 'planArea', label: '种植面积(亩)' },
|
||||
{ prop: 'applyTime', label: '申请时间' },
|
||||
{ prop: 'subsidyStandards', label: '补贴标准(元/亩)' },
|
||||
{ prop: 'subsidyAmount', label: '补贴金额(元)' },
|
||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
<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 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">
|
||||
@ -156,6 +156,9 @@ const columns = ref([
|
||||
{ prop: 'planLocation', label: '种植地点' },
|
||||
{ prop: 'cropType', label: '种植作物种类' },
|
||||
{ prop: 'planArea', label: '种植面积(亩)' },
|
||||
{ prop: 'applyTime', label: '申请时间' },
|
||||
{ prop: 'subsidyStandards', label: '补贴标准(元/亩)' },
|
||||
{ prop: 'subsidyAmount', label: '补贴金额(元)' },
|
||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
<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 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">
|
||||
@ -152,6 +152,9 @@ const columns = ref([
|
||||
{ prop: 'planLocation', label: '种植地点' },
|
||||
{ prop: 'cropType', label: '种植作物种类' },
|
||||
{ prop: 'planArea', label: '种植面积(亩)' },
|
||||
{ prop: 'applyTime', label: '申请时间' },
|
||||
{ prop: 'subsidyStandards', label: '补贴标准(元/亩)' },
|
||||
{ prop: 'subsidyAmount', label: '补贴金额(元)' },
|
||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
<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 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">
|
||||
@ -47,52 +47,53 @@
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||
<el-form :inline="true" :label-width="'auto'">
|
||||
<LandSelect
|
||||
ref="landSelectRef"
|
||||
v-model="dialogForm.landId"
|
||||
:options="landSelectList"
|
||||
:disabled="formDisabled"
|
||||
:width="500"
|
||||
@change="handleLandChange"
|
||||
/>
|
||||
</el-form>
|
||||
<el-descriptions title="地块信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<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.landName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="地块名称">{{ dialogForm.landId }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions title="经营主体信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="经营主体编码">{{ dialogForm.businessEntityCode }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经营主体名称">{{ dialogForm.businessEntityName }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-form
|
||||
ref="dialogRef"
|
||||
:model="dialogForm"
|
||||
:inline="true"
|
||||
:label-width="'120'"
|
||||
:label-width="'80'"
|
||||
:rules="dialogFormRules"
|
||||
:disabled="formDisabled"
|
||||
class="dialog-form-container"
|
||||
>
|
||||
<el-form-item label="种子种苗名称" prop="seedName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.seedName" clearable placeholder="请输入种子种苗名称" />
|
||||
<div class="dialog-form-title">农药用药详情</div>
|
||||
<el-form-item label="肥料编号" prop="fertilizeId" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.fertilizeId" clearable placeholder="请输入肥料编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="品种名称" prop="varietyName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.varietyName" clearable placeholder="请输入品种名称" />
|
||||
<el-form-item label="肥料名称" prop="fertilizeName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.fertilizeName" clearable placeholder="请输入肥料名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="品牌" prop="brand" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.brand" clearable placeholder="请输入品牌" />
|
||||
<el-form-item label="使用量" required prop="useNumber" class="dialog-form-item">
|
||||
<el-input-number v-model="dialogForm.useNumber" :min="1" :controls="false" placeholder="请输入使用量" style="width: 150px" />
|
||||
<el-select v-model="dialogForm.useUnit" placeholder="请选择" style="width: 80px">
|
||||
<el-option v-for="el in unitList" :key="el.dictValue" :value="el.dictValue" :label="el.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="生产厂家" prop="manufacturer" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.manufacturer" clearable placeholder="请输入生产厂家" />
|
||||
<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="蔬菜种苗" prop="classifyId" class="dialog-form-item">
|
||||
<el-cascader
|
||||
v-model="dialogForm.classifyId"
|
||||
:options="seedTypeDialogList"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择"
|
||||
@change="handleCascaderChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品规格" prop="productUnit" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.productUnit" clearable placeholder="请输入产品规格" />
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex">
|
||||
<div style="width: 50%; display: inline-block">
|
||||
<el-form-item label="种子种苗主图" prop="photoUrl" class="dialog-form-item" style="width: 100%">
|
||||
<FileUploader v-model="dialogForm.photoUrl" :limit="1" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="width: 50%; display: inline-block">
|
||||
<el-form-item label="种子种苗详情图" prop="photoUrlDetail" class="dialog-form-item" style="width: 100%">
|
||||
<FileUploader v-model="dialogForm.photoUrlDetail" :limit="1" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
@ -116,8 +117,10 @@ import {
|
||||
fertilizeUseRegulatorySave,
|
||||
editFertilizeUseRegulatory,
|
||||
delFertilizeUseRegulatory,
|
||||
getRowDetails,
|
||||
getLandList,
|
||||
} from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||
import request from '@/utils/axios';
|
||||
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
|
||||
@ -151,9 +154,9 @@ const columns = ref([
|
||||
{ prop: 'landName', label: '地块名称' },
|
||||
{ prop: 'name', label: '姓名' },
|
||||
{ prop: 'phone', label: '联系方式' },
|
||||
{ prop: 'fertilizeId', label: '化肥编号' },
|
||||
{ prop: 'fertilizeName', label: '化肥名称' },
|
||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
{ prop: 'fertilizeId', label: '肥料编号' },
|
||||
{ prop: 'fertilizeName', label: '肥料名称' },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
@ -202,70 +205,89 @@ const dialogFormVisible = ref(false);
|
||||
const dialogRef = ref(null);
|
||||
const dialogTitle = ref('新增');
|
||||
const formDisabled = ref(false);
|
||||
const landSelectRef = ref(null);
|
||||
const dialogForm = reactive({
|
||||
id: '',
|
||||
seedName: '', //种子种苗名称
|
||||
varietyName: '', //品种名称
|
||||
brand: '', //品牌
|
||||
manufacturer: '', //生产厂家
|
||||
classifyId: '', //蔬菜种苗id
|
||||
classifyName: '', //蔬菜种苗名称
|
||||
productSpecification: '', //产品规格（number）
|
||||
productUnit: '', //产品规格单位
|
||||
productAttributes: '', //自定义商品属性
|
||||
photoUrl: '', //种子种苗主图
|
||||
photoUrlDetail: '', //种子种苗详情图
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
fertilizeId: '', //肥料名称id
|
||||
fertilizeName: '', //肥料名称
|
||||
useNumber: 1, //使用量
|
||||
useUnit: 'g', //使用量单位
|
||||
detectionTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
});
|
||||
const dialogFormRules = ref({
|
||||
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||
classifyId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择蔬菜种苗',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
],
|
||||
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||
fertilizeId: [{ required: true, message: '请输入肥料编号', trigger: 'blur' }],
|
||||
fertilizeName: [{ required: true, message: '请输入肥料名称', trigger: 'blur' }],
|
||||
useNumber: [{ required: true, message: '请输入使用量', trigger: ['change', 'blur'] }],
|
||||
detectionTime: [{ required: true, message: '请选择使用时间', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const addItem = async () => {
|
||||
ElMessage.success('点击新增!');
|
||||
// restDialogForm();
|
||||
// dialogTitle.value = '新增';
|
||||
// formDisabled.value = false;
|
||||
// dialogFormVisible.value = true;
|
||||
restDialogForm();
|
||||
dialogTitle.value = '新增';
|
||||
formDisabled.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const seeDetails = async (row) => {
|
||||
ElMessage.success('点击查看详情!');
|
||||
// dialogTitle.value = '详情';
|
||||
// setDialogForm(row);
|
||||
// formDisabled.value = true;
|
||||
// dialogFormVisible.value = true;
|
||||
dialogTitle.value = '详情';
|
||||
formDisabled.value = true;
|
||||
dialogForm.landId = row.landId;
|
||||
getDetails();
|
||||
dialogForm.fertilizeId = row.fertilizeId;
|
||||
dialogForm.fertilizeName = row.fertilizeName;
|
||||
dialogForm.useNumber = row.useNumber;
|
||||
dialogForm.useUnit = row.useUnit;
|
||||
dialogForm.detectionTime = row.useTime;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
ElMessage.success('点击编辑!');
|
||||
// console.log('要编辑的行: ', row);
|
||||
// dialogTitle.value = '编辑';
|
||||
// setDialogForm(row);
|
||||
// formDisabled.value = false;
|
||||
// dialogFormVisible.value = true;
|
||||
console.log('要编辑的行: ', row);
|
||||
dialogTitle.value = '编辑';
|
||||
formDisabled.value = false;
|
||||
dialogForm.landId = row.landId;
|
||||
getDetails();
|
||||
dialogForm.fertilizeId = row.fertilizeId;
|
||||
dialogForm.fertilizeName = row.fertilizeName;
|
||||
dialogForm.useNumber = row.useNumber;
|
||||
dialogForm.useUnit = row.useUnit;
|
||||
dialogForm.detectionTime = row.useTime;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const setDialogForm = (row) => {
|
||||
dialogForm.id = row.id;
|
||||
dialogForm.seedName = row.seedName;
|
||||
dialogForm.varietyName = row.varietyName;
|
||||
dialogForm.brand = row.brand;
|
||||
dialogForm.manufacturer = row.manufacturer;
|
||||
dialogForm.classifyId = row.classifyId;
|
||||
dialogForm.classifyName = row.classifyName;
|
||||
dialogForm.productSpecification = row.productSpecification;
|
||||
dialogForm.productUnit = row.productUnit;
|
||||
dialogForm.productAttributes = row.productAttributes;
|
||||
dialogForm.photoUrl = row.photoUrl;
|
||||
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||
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 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 handleDelete = (row) => {
|
||||
app
|
||||
@ -298,12 +320,14 @@ const deleteGoods = async (ids) => {
|
||||
};
|
||||
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.classifyId = dialogForm.classifyId.join(',');
|
||||
param.classifyName = dialogForm.classifyName.join(',');
|
||||
console.log(param);
|
||||
let response;
|
||||
if (dialogTitle.value == '新增') {
|
||||
@ -334,18 +358,21 @@ const cancelDialog = async () => {
|
||||
};
|
||||
const restDialogForm = () => {
|
||||
Object.assign(dialogForm, {
|
||||
id: '',
|
||||
seedName: '', //种子种苗名称
|
||||
varietyName: '', //品种名称
|
||||
brand: '', //品牌
|
||||
manufacturer: '', //生产厂家
|
||||
classifyId: '', //蔬菜种苗id
|
||||
classifyName: '', //蔬菜种苗名称
|
||||
productSpecification: '', //产品规格（number）
|
||||
productUnit: '', //产品规格单位
|
||||
productAttributes: '', //自定义商品属性
|
||||
photoUrl: '', //种子种苗主图
|
||||
photoUrlDetail: '', //种子种苗详情图
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
fertilizeId: '', //肥料名称id
|
||||
fertilizeName: '', //肥料名称
|
||||
useNumber: 1, //使用量
|
||||
useUnit: 'g', //使用量单位
|
||||
useTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
});
|
||||
};
|
||||
|
||||
@ -367,40 +394,46 @@ const getSeedTypeList = async () => {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
// 级联选择器配置
|
||||
const cascaderProps = ref({
|
||||
label: 'dataName', // 选项标签字段名
|
||||
value: 'id', // 选项值字段名
|
||||
children: 'children', // 子选项字段名
|
||||
emitPath: true,
|
||||
expandTrigger: 'hover',
|
||||
});
|
||||
const handleCascaderChange = () => {
|
||||
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||
// 如果需要，可以将名称也保存到表单数据中
|
||||
dialogForm.classifyName = selectedNames;
|
||||
};
|
||||
const getSelectedNames = (ids) => {
|
||||
if (!ids || !ids.length) return [];
|
||||
|
||||
let names = [];
|
||||
let currentLevel = seedTypeDialogList.value;
|
||||
const unitList = ref([
|
||||
{ dictCode: '52', dictValue: 'g' },
|
||||
{ dictCode: '53', dictValue: 'kg' },
|
||||
]);
|
||||
|
||||
for (const id of ids) {
|
||||
const foundItem = currentLevel.find((item) => item.id === id);
|
||||
if (!foundItem) break;
|
||||
|
||||
names.push(foundItem.dataName);
|
||||
currentLevel = foundItem.children || [];
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
||||
return names;
|
||||
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();
|
||||
getSeedTypeList();
|
||||
getLandsList();
|
||||
getEntityOptions();
|
||||
// getSeedTypeList();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@ -420,4 +453,23 @@ onMounted(() => {
|
||||
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>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
<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 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">
|
||||
@ -151,7 +151,7 @@ const columns = ref([
|
||||
{ prop: 'detectionResult', label: '检测结果' },
|
||||
{ prop: 'detectionUnit', label: '检测单位' },
|
||||
{ prop: 'isUpload', label: '检测报告(是否上传)' },
|
||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
@ -238,10 +238,10 @@ const addItem = async () => {
|
||||
};
|
||||
const seeDetails = async (row) => {
|
||||
ElMessage.success('点击查看详情!');
|
||||
// dialogTitle.value = '详情';
|
||||
// setDialogForm(row);
|
||||
// formDisabled.value = true;
|
||||
// dialogFormVisible.value = true;
|
||||
dialogTitle.value = '详情';
|
||||
setDialogForm(row);
|
||||
formDisabled.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
ElMessage.success('点击编辑!');
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
<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 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">
|
||||
@ -48,21 +48,23 @@
|
||||
</div>
|
||||
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||
<el-form :inline="true" :label-width="'auto'">
|
||||
<el-form-item label="地块编号" prop="seedName">
|
||||
<el-input v-model="dialogForm.id" placeholder="请输入地块编号" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button type="primary" icon="Search" @click="getDetails">查询</el-button>
|
||||
</el-form-item>
|
||||
<LandSelect
|
||||
ref="landSelectRef"
|
||||
v-model="dialogForm.landId"
|
||||
:options="landSelectList"
|
||||
:disabled="formDisabled"
|
||||
:width="500"
|
||||
@change="handleLandChange"
|
||||
/>
|
||||
</el-form>
|
||||
<el-descriptions title="地块信息" border>
|
||||
<el-descriptions-item label="地块">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="所属行政区">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="所属网格">Suzhou</el-descriptions-item>
|
||||
<el-descriptions title="地块信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="地块">{{ dialogForm.landName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属行政区">{{ dialogForm.regionName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属网格">{{ dialogForm.gridName }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions title="经营主体信息" border>
|
||||
<el-descriptions-item label="姓名">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="联系方式">18100000000</el-descriptions-item>
|
||||
<el-descriptions title="经营主体信息" border class="mb-20 custom-descriptions" :column="2">
|
||||
<el-descriptions-item label="姓名">{{ dialogForm.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系方式">{{ dialogForm.phone }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-form
|
||||
ref="dialogRef"
|
||||
@ -74,16 +76,16 @@
|
||||
class="dialog-form-container"
|
||||
>
|
||||
<div class="dialog-form-title">农药用药详情</div>
|
||||
<el-form-item label="种子编号" prop="name" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.name" clearable placeholder="请输入姓名" />
|
||||
<el-form-item label="种子编号" prop="provenanceId" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.provenanceId" clearable placeholder="请输入种子编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="种子名称" prop="phone" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.phone" clearable placeholder="请输入联系方式" />
|
||||
<el-form-item label="种子名称" prop="provenanceName" class="dialog-form-item">
|
||||
<el-input v-model="dialogForm.provenanceName" clearable placeholder="请输入种子名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="使用量" required prop="useNumber" class="dialog-form-item">
|
||||
<el-input-number v-model="dialogForm.useNumber" :min="1" :controls="false" placeholder="请输入用药量" style="width: 150px" />
|
||||
<el-input-number v-model="dialogForm.useNumber" :min="1" :controls="false" placeholder="请输入使用量" style="width: 150px" />
|
||||
<el-select v-model="dialogForm.useUnit" placeholder="请选择" style="width: 80px">
|
||||
<el-option v-for="el in unitList" :key="el.unit" :value="el.unit" :label="el.unit" />
|
||||
<el-option v-for="el in unitList" :key="el.dictValue" :value="el.dictValue" :label="el.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用时间" prop="detectionTime" class="dialog-form-item">
|
||||
@ -104,6 +106,7 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } 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;
|
||||
@ -112,8 +115,10 @@ import {
|
||||
seedUseRegulatorySave,
|
||||
editSeedUseRegulatory,
|
||||
delSeedUseRegulatory,
|
||||
getRowDetails,
|
||||
getLandList,
|
||||
} from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||
import request from '@/utils/axios';
|
||||
import { GetDictTypeInfo } from '@/apis/system/dictType';
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
|
||||
@ -152,7 +157,7 @@ const columns = ref([
|
||||
{ prop: 'useTime', label: '使用时间' },
|
||||
{ prop: 'businessEntityCode', label: '生产经营主体编码' },
|
||||
{ prop: 'businessEntityName', label: '生产经营主体名称' },
|
||||
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
@ -201,77 +206,89 @@ const dialogFormVisible = ref(false);
|
||||
const dialogRef = ref(null);
|
||||
const dialogTitle = ref('新增');
|
||||
const formDisabled = ref(false);
|
||||
const landSelectRef = ref(null);
|
||||
const dialogForm = reactive({
|
||||
id: '',
|
||||
seedName: '', //种子种苗名称
|
||||
varietyName: '', //品种名称
|
||||
brand: '', //品牌
|
||||
manufacturer: '', //生产厂家
|
||||
classifyId: '', //蔬菜种苗id
|
||||
classifyName: '', //蔬菜种苗名称
|
||||
productSpecification: '', //产品规格（number）
|
||||
productUnit: '', //产品规格单位
|
||||
productAttributes: '', //自定义商品属性
|
||||
photoUrl: '', //种子种苗主图
|
||||
photoUrlDetail: '', //种子种苗详情图
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
provenanceId: '', //种子名称id
|
||||
provenanceName: '', //种子名称
|
||||
useNumber: 1, //使用量
|
||||
useUnit: 'g', //使用量单位
|
||||
detectionTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
});
|
||||
const dialogFormRules = ref({
|
||||
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||
classifyId: [{ required: true, message: '请选择蔬菜种苗', trigger: ['change', 'blur'] }],
|
||||
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||
provenanceId: [{ required: true, message: '请输入种子编号', trigger: 'blur' }],
|
||||
provenanceName: [{ required: true, message: '请输入种子名称', trigger: 'blur' }],
|
||||
useNumber: [{ required: true, message: '请输入使用量', trigger: ['change', 'blur'] }],
|
||||
detectionTime: [{ required: true, message: '请选择使用时间', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const addItem = async () => {
|
||||
ElMessage.success('点击新增!');
|
||||
// restDialogForm();
|
||||
// dialogTitle.value = '新增';
|
||||
// formDisabled.value = false;
|
||||
// dialogFormVisible.value = true;
|
||||
restDialogForm();
|
||||
dialogTitle.value = '新增';
|
||||
formDisabled.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const seeDetails = async (row) => {
|
||||
console.log('查看详情: ', row);
|
||||
ElMessage.success('点击查看详情!');
|
||||
// dialogTitle.value = '详情';
|
||||
// setDialogForm(row);
|
||||
// formDisabled.value = true;
|
||||
// dialogFormVisible.value = true;
|
||||
dialogTitle.value = '详情';
|
||||
console.log(row);
|
||||
formDisabled.value = true;
|
||||
dialogForm.landId = row.landId;
|
||||
getDetails();
|
||||
dialogForm.provenanceId = row.provenanceId;
|
||||
dialogForm.provenanceName = row.provenanceName;
|
||||
dialogForm.useNumber = row.useNumber;
|
||||
dialogForm.useUnit = row.useUnit;
|
||||
dialogForm.detectionTime = row.useTime;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
console.log('要编辑的行: ', row);
|
||||
ElMessage.success('点击编辑!');
|
||||
// dialogTitle.value = '编辑';
|
||||
// setDialogForm(row);
|
||||
// formDisabled.value = false;
|
||||
// dialogFormVisible.value = true;
|
||||
dialogTitle.value = '编辑';
|
||||
console.log(row);
|
||||
formDisabled.value = false;
|
||||
dialogForm.landId = row.landId;
|
||||
getDetails();
|
||||
dialogForm.provenanceId = row.provenanceId;
|
||||
dialogForm.provenanceName = row.provenanceName;
|
||||
dialogForm.useNumber = row.useNumber;
|
||||
dialogForm.useUnit = row.useUnit;
|
||||
dialogForm.detectionTime = row.useTime;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
// 获取地块信息
|
||||
const getDetails = async () => {
|
||||
let response = await getRowDetails({
|
||||
url: '/inputGoods/supervise/provenance/getDetail/',
|
||||
id: dialogForm.id,
|
||||
let response = await request({
|
||||
url: `/land-resource/landManage/getLandInfo?landId=${dialogForm.landId}`,
|
||||
});
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
setDialogForm(response.data);
|
||||
if (response.data) {
|
||||
setDialogForm(response.data);
|
||||
} else {
|
||||
ElMessage.error('未查询到数据');
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(response.message);
|
||||
}
|
||||
};
|
||||
const setDialogForm = (row) => {
|
||||
dialogForm.id = row.id;
|
||||
dialogForm.seedName = row.seedName;
|
||||
dialogForm.varietyName = row.varietyName;
|
||||
dialogForm.brand = row.brand;
|
||||
dialogForm.manufacturer = row.manufacturer;
|
||||
dialogForm.classifyId = row.classifyId;
|
||||
dialogForm.classifyName = row.classifyName;
|
||||
dialogForm.productSpecification = row.productSpecification;
|
||||
dialogForm.productUnit = row.productUnit;
|
||||
dialogForm.productAttributes = row.productAttributes;
|
||||
dialogForm.photoUrl = row.photoUrl;
|
||||
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||
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);
|
||||
@ -305,17 +322,23 @@ const deleteGoods = async (ids) => {
|
||||
};
|
||||
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.classifyId = dialogForm.classifyId.join(',');
|
||||
param.classifyName = dialogForm.classifyName.join(',');
|
||||
param.useTime = dialogForm.detectionTime;
|
||||
console.log(param);
|
||||
// valid.businessEntityCode = dialogForm.businessEntityCode; //经营主体编码
|
||||
// valid.businessEntityName = dialogForm.businessEntityName; //经营主体名称
|
||||
let response;
|
||||
if (dialogTitle.value == '新增') {
|
||||
response = await seedUseRegulatorySave(param);
|
||||
} else {
|
||||
param.id = dialogForm.id;
|
||||
response = await editSeedUseRegulatory(param);
|
||||
}
|
||||
if (response.code == 200) {
|
||||
@ -341,18 +364,21 @@ const cancelDialog = async () => {
|
||||
};
|
||||
const restDialogForm = () => {
|
||||
Object.assign(dialogForm, {
|
||||
id: '',
|
||||
seedName: '', //种子种苗名称
|
||||
varietyName: '', //品种名称
|
||||
brand: '', //品牌
|
||||
manufacturer: '', //生产厂家
|
||||
classifyId: '', //蔬菜种苗id
|
||||
classifyName: '', //蔬菜种苗名称
|
||||
productSpecification: '', //产品规格（number）
|
||||
productUnit: '', //产品规格单位
|
||||
productAttributes: '', //自定义商品属性
|
||||
photoUrl: '', //种子种苗主图
|
||||
photoUrlDetail: '', //种子种苗详情图
|
||||
regionCode: '', //所属行政区域代码
|
||||
regionName: '', //所属行政区域名称
|
||||
gridId: '', //所属网格代码
|
||||
gridName: '', //所属网格名称
|
||||
landId: '', //地块id
|
||||
landName: '', //地块名称
|
||||
name: '', //姓名
|
||||
phone: '', //联系方式
|
||||
provenanceId: '', //种子名称id
|
||||
provenanceName: '', //种子名称
|
||||
useNumber: 1, //使用量
|
||||
useUnit: 'g', //使用量单位
|
||||
useTime: '', //使用时间
|
||||
businessEntityCode: '', //经营主体编码
|
||||
businessEntityName: '', //经营主体名称
|
||||
});
|
||||
};
|
||||
|
||||
@ -374,46 +400,45 @@ const getSeedTypeList = async () => {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
// 级联选择器配置
|
||||
const cascaderProps = ref({
|
||||
label: 'dataName', // 选项标签字段名
|
||||
value: 'id', // 选项值字段名
|
||||
children: 'children', // 子选项字段名
|
||||
emitPath: true,
|
||||
expandTrigger: 'hover',
|
||||
});
|
||||
const handleCascaderChange = () => {
|
||||
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||
// 如果需要，可以将名称也保存到表单数据中
|
||||
dialogForm.classifyName = selectedNames;
|
||||
};
|
||||
const getSelectedNames = (ids) => {
|
||||
if (!ids || !ids.length) return [];
|
||||
|
||||
let names = [];
|
||||
let currentLevel = seedTypeDialogList.value;
|
||||
|
||||
for (const id of ids) {
|
||||
const foundItem = currentLevel.find((item) => item.id === id);
|
||||
if (!foundItem) break;
|
||||
|
||||
names.push(foundItem.dataName);
|
||||
currentLevel = foundItem.children || [];
|
||||
}
|
||||
|
||||
return names;
|
||||
};
|
||||
|
||||
const unitList = ref([
|
||||
{ id: '1', unit: 'kg' },
|
||||
{ id: '2', unit: 'g' },
|
||||
{ id: '3', unit: 'L' },
|
||||
{ id: '4', unit: 'ml' },
|
||||
{ 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' },
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSubmit();
|
||||
getLandsList();
|
||||
getEntityOptions();
|
||||
// getSeedTypeList();
|
||||
});
|
||||
</script>
|
||||
@ -434,4 +459,23 @@ onMounted(() => {
|
||||
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>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
@ -376,30 +376,30 @@ export const constantRoutes = [
|
||||
redirect: '/sub-operation-service/packaging/sorting',
|
||||
meta: { title: '分拣包装' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/packaging/sorting',
|
||||
component: () => import('@/views/error/blank.vue'),
|
||||
name: 'sortingMain',
|
||||
meta: { title: '分拣首页' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-operation-service/packaging/sorting',
|
||||
// component: () => import('@/views/packaging/sorting.vue'),
|
||||
// component: () => import('@/views/error/blank.vue'),
|
||||
// name: 'sortingMain',
|
||||
// meta: { title: '分拣首页' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-operation-service/packaging/index',
|
||||
component: () => import('@/views/error/blank.vue'),
|
||||
name: 'packagingMain',
|
||||
meta: { title: '包装首页' },
|
||||
path: '/sub-operation-service/packaging/sorting',
|
||||
component: () => import('@/views/packaging/sorting.vue'),
|
||||
name: 'sortingMain',
|
||||
meta: { title: '分拣首页' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-operation-service/packaging/index',
|
||||
// component: () => import('@/views/packaging/index.vue'),
|
||||
// component: () => import('@/views/error/blank.vue'),
|
||||
// name: 'packagingMain',
|
||||
// meta: { title: '包装首页' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-operation-service/packaging/index',
|
||||
component: () => import('@/views/packaging/index.vue'),
|
||||
name: 'packagingMain',
|
||||
meta: { title: '包装首页' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/packaging/details',
|
||||
component: () => import('@/views/packaging/details.vue'),
|
||||
@ -415,36 +415,36 @@ export const constantRoutes = [
|
||||
redirect: '/sub-operation-service/warehouse',
|
||||
meta: { title: '仓储物流' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/warehouse',
|
||||
component: () => import('@/views/error/blank.vue'),
|
||||
name: 'warehouseMain',
|
||||
meta: { title: '仓储首页' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-operation-service/warehouse',
|
||||
// component: () => import('@/views/warehouseLogistics/warehouse/index.vue'),
|
||||
// component: () => import('@/views/error/blank.vue'),
|
||||
// name: 'warehouseMain',
|
||||
// meta: { title: '仓储首页' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-operation-service/warehouse',
|
||||
component: () => import('@/views/warehouseLogistics/warehouse/index.vue'),
|
||||
name: 'warehouseMain',
|
||||
meta: { title: '仓储首页' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/warehouse-detail',
|
||||
component: () => import('@/views/warehouseLogistics/warehouse/detail.vue'),
|
||||
name: 'warehouse-detail',
|
||||
meta: { title: '仓储详情' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/logistics',
|
||||
component: () => import('@/views/error/blank.vue'),
|
||||
name: 'logistics-list',
|
||||
meta: { title: '物流首页' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-operation-service/logistics',
|
||||
// component: () => import('@/views/warehouseLogistics/logistics/index.vue'),
|
||||
// component: () => import('@/views/error/blank.vue'),
|
||||
// name: 'logistics-list',
|
||||
// meta: { title: '物流首页' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-operation-service/logistics',
|
||||
component: () => import('@/views/warehouseLogistics/logistics/index.vue'),
|
||||
name: 'logistics-list',
|
||||
meta: { title: '物流首页' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/logistics-detail',
|
||||
component: () => import('@/views/warehouseLogistics/logistics/detail.vue'),
|
||||
|
||||
@ -104,7 +104,7 @@ const menus = reactive([
|
||||
height: 100%;
|
||||
.left-menu,
|
||||
.common-content {
|
||||
overflow-y: auto;
|
||||
// overflow-y: auto;
|
||||
padding: 8px;
|
||||
height: calc(100% - 16px);
|
||||
border-radius: 8px;
|
||||
|
||||
@ -1,136 +1,173 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="450px">
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<span class="label">首选商家：</span>
|
||||
<span class="value">{{ diodescription }}</span>
|
||||
<div>
|
||||
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="450px">
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<span class="label">首选商家：</span>
|
||||
<span class="value">{{ diodescription }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">选择服务：</span>
|
||||
<span class="value">{{ diotext }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">选择服务：</span>
|
||||
<span class="value">{{ diotext }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="formRef" :model="form" label-position="top">
|
||||
<el-form-item label="需求量：" prop="quantity" :rules="[{ required: true, message: '请输入重量' }]">
|
||||
<el-input v-model="form.quantity" placeholder="请输入重量（kg）">
|
||||
<template #suffix>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form ref="formRef" :model="form" label-position="top">
|
||||
<el-form-item label="需求量：" prop="quantity" :rules="[{ required: true, message: '请输入重量' }]">
|
||||
<el-input v-model="form.quantity" placeholder="请输入重量（kg）">
|
||||
<template #suffix>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="您的称呼：" prop="name" :rules="[{ required: true, message: '请输入您的称呼' }]">
|
||||
<el-input v-model="form.name" placeholder="请输入您的称呼" />
|
||||
</el-form-item>
|
||||
<el-form-item label="您的称呼：" prop="name" :rules="[{ required: true, message: '请输入您的称呼' }]">
|
||||
<el-input v-model="form.name" placeholder="请输入您的称呼" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="您的电话："
|
||||
prop="phone"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入电话' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
|
||||
]"
|
||||
>
|
||||
<el-input v-model="form.phone" placeholder="请输入电话号码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form-item
|
||||
label="您的电话："
|
||||
prop="phone"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入电话' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
|
||||
]"
|
||||
>
|
||||
<el-input v-model="form.phone" placeholder="请输入电话号码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button class="submit-btn" type="primary" @click="handleSubmit">发送询价</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- <page-layout :menus="state.menus"> </page-layout>-->
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px; height: 200px">
|
||||
<div class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div class="tab_list">塑料类包装</div>
|
||||
<div
|
||||
v-for="(item, index) in tab1"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab cursor">
|
||||
<div class="tab_list">纸类包装</div>
|
||||
<div
|
||||
v-for="(item, index) in tab2"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab2 === index }"
|
||||
@click.stop="currentTab2 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab cursor">
|
||||
<div class="tab_list">金属类包装</div>
|
||||
<div
|
||||
v-for="(item, index) in tab3"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab3 === index }"
|
||||
@click.stop="currentTab3 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-row :gutter="20" style="margin-top: 10px">
|
||||
<el-col v-for="(item, index) in state.data" :key="index" :span="12">
|
||||
<el-card class="storage-card" shadow="hover">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
<img :src="getAssetsFile(`${item.imageUrl}`)" fit="cover" class="storage-image" />
|
||||
<div class="storage-info">
|
||||
<h3 class="storage-title">{{ item.title }}</h3>
|
||||
<div class="storage-desc">
|
||||
<span>{{ item.description }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">高品质</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">食品级</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">塑料</el-tag>
|
||||
</div>
|
||||
<div class="storage-location">
|
||||
<el-icon><Location /></el-icon>
|
||||
{{ item.location }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="storage-price">
|
||||
<div class="storage-price-left">
|
||||
<span class="price-label">报价</span>
|
||||
<span class="price-amount">¥{{ item.price }}/m</span>
|
||||
</div>
|
||||
<el-button type="success" class="contact-btn" @click="goDei(item)">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
|
||||
<span>联系卖家</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="item.rank" class="rank-badge">
|
||||
<!-- {{ item.rank }}-->
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<page-pagination :total="6" @current-change="currentChange" />
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button class="submit-btn" type="primary" @click="handleSubmit">发送询价</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</el-dialog>
|
||||
<!-- <page-layout :menus="state.menus"> </page-layout>-->
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="tabs tabs0">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab0"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
style="margin-left: 20px; margin-bottom: 10px"
|
||||
:class="{ active: currentTab0 === index, tab_list_li0: currentTab0 === index }"
|
||||
@click.stop="
|
||||
currentTab0 = index;
|
||||
currentTab1 = 0;
|
||||
currentTab2 = 0;
|
||||
"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab1"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab2"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab2 === index }"
|
||||
@click.stop="currentTab2 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-row v-if="currentTab0 === 0" :gutter="20" style="margin-top: 10px">
|
||||
<el-col :span="24">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img4.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- <el-col v-for="(item, index) in state.data" :key="index" :span="12">
|
||||
<el-card class="storage-card" shadow="hover">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
<img :src="getAssetsFile(`${item.imageUrl}`)" fit="cover" class="storage-image" />
|
||||
<div class="storage-info">
|
||||
<h3 class="storage-title">{{ item.title }}</h3>
|
||||
<div class="storage-desc">
|
||||
<span>{{ item.description }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">高品质</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">杀菌灭毒</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">绿色</el-tag>
|
||||
</div>
|
||||
<div class="storage-location">
|
||||
<el-icon><Location /></el-icon>
|
||||
{{ item.location }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="storage-price">
|
||||
<div class="storage-price-left">
|
||||
<span class="price-label">报价</span>
|
||||
<span class="price-amount">¥{{ item.price }}/kg</span>
|
||||
</div>
|
||||
<el-button type="success" class="contact-btn" @click="goDei(item)">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
|
||||
<span>联系卖家</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="item.rank" class="rank-badge">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<el-row v-if="currentTab0 === 1" :gutter="20" style="margin-top: 10px">
|
||||
<el-col :span="24">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img5.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img6.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 100px" size="large" type="primary">发布包装{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
|
||||
</div>
|
||||
<page-pagination :total="5" @current-change="currentChange" />
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
@ -142,9 +179,10 @@ import Common from './components/common.vue';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const tab1 = reactive(['塑料类薄膜袋', '塑料瓶/壶', '塑料桶', '塑料盒', '塑料箱', '其他塑料包装制品']);
|
||||
const tab2 = reactive(['纸盒', '纸箱', '纸袋', '其他纸类包装容器']);
|
||||
const tab3 = reactive(['金属罐', '金属桶', '金属盒', '其他金属类包装容器']);
|
||||
const tab0 = reactive(['包装服务', '包装需求']);
|
||||
const tab1 = reactive(['全部', '熟料容器', '金属容器', '纸类容器']);
|
||||
const tab2 = reactive(['全部', '塑料袋', '塑料瓶', '塑料桶', '塑料盒']);
|
||||
const tab3 = reactive(['水产', '其他类']);
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
query: {
|
||||
@ -152,40 +190,49 @@ const state = reactive({
|
||||
},
|
||||
data: [
|
||||
{
|
||||
imageUrl: 'images/film.png',
|
||||
title: '薄膜包装服务',
|
||||
description: '薄膜包装有限公司 ',
|
||||
title: '蔬菜分拣服务',
|
||||
description: '绿鲜甄选蔬菜分拣中心 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '3',
|
||||
price: '150',
|
||||
rank: '1',
|
||||
imageUrl: 'images/vegetable.png',
|
||||
},
|
||||
{
|
||||
imageUrl: 'images/plastics.png',
|
||||
title: '塑料袋包装服务',
|
||||
description: '塑料包装有限公司',
|
||||
title: '水果分拣服务',
|
||||
description: '果韵鲜享分拣站',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
rank: '2',
|
||||
imageUrl: 'images/fruit.png',
|
||||
},
|
||||
{
|
||||
imageUrl: 'images/carton.png',
|
||||
title: '纸盒包装服务',
|
||||
description: '保和纸盒包装厂',
|
||||
title: '水果分拣服务',
|
||||
description: '好果分拣站 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '5',
|
||||
price: '150',
|
||||
rank: '3',
|
||||
imageUrl: 'images/fruit.png',
|
||||
},
|
||||
{
|
||||
imageUrl: 'images/metal.png',
|
||||
title: '金属罐包装服务',
|
||||
description: '金属罐头厂',
|
||||
title: '水果分拣服务',
|
||||
description: '果美分拣站 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '8',
|
||||
price: '150',
|
||||
rank: '',
|
||||
imageUrl: 'images/fruit.png',
|
||||
},
|
||||
{
|
||||
title: '水果分拣服务',
|
||||
description: '好果存分拣站 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
rank: '',
|
||||
imageUrl: 'images/fruit.png',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const currentTab0 = ref(0);
|
||||
const currentTab1 = ref(0);
|
||||
const currentTab2 = ref(0);
|
||||
const currentTab3 = ref(0);
|
||||
@ -222,7 +269,7 @@ const currentChange = (current) => {
|
||||
};
|
||||
|
||||
const toLink = (row) => {
|
||||
row.data = ['高品质', '食品级', '塑料'];
|
||||
row.data = ['高品质', '杀菌灭毒', '绿色'];
|
||||
router.push({
|
||||
path: '/sub-operation-service/packaging/details',
|
||||
query: row,
|
||||
@ -330,17 +377,20 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
}
|
||||
}
|
||||
.tabs {
|
||||
height: 160px;
|
||||
//height: 160px;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
// padding: 0 20px;
|
||||
}
|
||||
.tabs0 {
|
||||
padding: 0;
|
||||
}
|
||||
.tab {
|
||||
height: 100px;
|
||||
// height: 100px;
|
||||
width: 850px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -361,9 +411,15 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.tab_list_li:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.tab_list_li.active {
|
||||
color: rgba(37, 191, 130, 1);
|
||||
}
|
||||
.tab_list_li0 {
|
||||
border-bottom: 2px solid rgba(37, 191, 130, 1);
|
||||
}
|
||||
}
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
@ -376,7 +432,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
border: 0;
|
||||
border-radius: 24px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.storage-content {
|
||||
@include flex-column;
|
||||
@ -395,6 +451,13 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-image1 {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
flex: 1;
|
||||
|
||||
@ -1,136 +1,175 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="450px">
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<span class="label">首选商家：</span>
|
||||
<span class="value">{{ diodescription }}</span>
|
||||
<div>
|
||||
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="450px">
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<span class="label">首选商家：</span>
|
||||
<span class="value">{{ diodescription }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">选择服务：</span>
|
||||
<span class="value">{{ diotext }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">选择服务：</span>
|
||||
<span class="value">{{ diotext }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="formRef" :model="form" label-position="top">
|
||||
<el-form-item label="需求量：" prop="quantity" :rules="[{ required: true, message: '请输入重量' }]">
|
||||
<el-input v-model="form.quantity" placeholder="请输入重量（kg）">
|
||||
<template #suffix>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form ref="formRef" :model="form" label-position="top">
|
||||
<el-form-item label="需求量：" prop="quantity" :rules="[{ required: true, message: '请输入重量' }]">
|
||||
<el-input v-model="form.quantity" placeholder="请输入重量（kg）">
|
||||
<template #suffix>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="您的称呼：" prop="name" :rules="[{ required: true, message: '请输入您的称呼' }]">
|
||||
<el-input v-model="form.name" placeholder="请输入您的称呼" />
|
||||
</el-form-item>
|
||||
<el-form-item label="您的称呼：" prop="name" :rules="[{ required: true, message: '请输入您的称呼' }]">
|
||||
<el-input v-model="form.name" placeholder="请输入您的称呼" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="您的电话："
|
||||
prop="phone"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入电话' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
|
||||
]"
|
||||
>
|
||||
<el-input v-model="form.phone" placeholder="请输入电话号码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form-item
|
||||
label="您的电话："
|
||||
prop="phone"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入电话' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
|
||||
]"
|
||||
>
|
||||
<el-input v-model="form.phone" placeholder="请输入电话号码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button class="submit-btn" type="primary" @click="handleSubmit">发送询价</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- <page-layout :menus="state.menus"> </page-layout>-->
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px; height: 200px">
|
||||
<div class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div class="tab_list">蔬菜分拣</div>
|
||||
<div
|
||||
v-for="(item, index) in tab1"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab cursor">
|
||||
<div class="tab_list">水果分拣</div>
|
||||
<div
|
||||
v-for="(item, index) in tab2"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab2 === index }"
|
||||
@click.stop="currentTab2 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="tab cursor">
|
||||
<div class="tab_list">水果分拣</div>
|
||||
<div
|
||||
v-for="(item, index) in tab3"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab3 === index }"
|
||||
@click.stop="currentTab3 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</el-card>
|
||||
<el-row :gutter="20" style="margin-top: 10px">
|
||||
<el-col v-for="(item, index) in state.data" :key="index" :span="12">
|
||||
<el-card class="storage-card" shadow="hover">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
<img :src="getAssetsFile(`${item.imageUrl}`)" fit="cover" class="storage-image" />
|
||||
<div class="storage-info">
|
||||
<h3 class="storage-title">{{ item.title }}</h3>
|
||||
<div class="storage-desc">
|
||||
<span>{{ item.description }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">高品质</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">杀菌灭毒</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">绿色</el-tag>
|
||||
</div>
|
||||
<div class="storage-location">
|
||||
<el-icon><Location /></el-icon>
|
||||
{{ item.location }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="storage-price">
|
||||
<div class="storage-price-left">
|
||||
<span class="price-label">报价</span>
|
||||
<span class="price-amount">¥{{ item.price }}/kg</span>
|
||||
</div>
|
||||
<el-button type="success" class="contact-btn" @click="goDei(item)">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
|
||||
<span>联系卖家</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="item.rank" class="rank-badge">
|
||||
<!-- {{ item.rank }}-->
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<page-pagination :total="5" @current-change="currentChange" />
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button class="submit-btn" type="primary" @click="handleSubmit">发送询价</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</el-dialog>
|
||||
<!-- <page-layout :menus="state.menus"> </page-layout>-->
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="tabs tabs0">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab0"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
style="margin-left: 20px; margin-bottom: 10px"
|
||||
:class="{ active: currentTab0 === index, tab_list_li0: currentTab0 === index }"
|
||||
@click.stop="
|
||||
currentTab0 = index;
|
||||
currentTab1 = 0;
|
||||
currentTab2 = 0;
|
||||
"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab1"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentTab0 === 1" class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab2"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab2 === index }"
|
||||
@click.stop="currentTab2 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-row v-if="currentTab0 === 0" :gutter="20" style="margin-top: 10px">
|
||||
<el-col :span="12">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img1.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img2.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- <el-col v-for="(item, index) in state.data" :key="index" :span="12">
|
||||
<el-card class="storage-card" shadow="hover">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
<img :src="getAssetsFile(`${item.imageUrl}`)" fit="cover" class="storage-image" />
|
||||
<div class="storage-info">
|
||||
<h3 class="storage-title">{{ item.title }}</h3>
|
||||
<div class="storage-desc">
|
||||
<span>{{ item.description }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">高品质</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">杀菌灭毒</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">绿色</el-tag>
|
||||
</div>
|
||||
<div class="storage-location">
|
||||
<el-icon><Location /></el-icon>
|
||||
{{ item.location }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="storage-price">
|
||||
<div class="storage-price-left">
|
||||
<span class="price-label">报价</span>
|
||||
<span class="price-amount">¥{{ item.price }}/kg</span>
|
||||
</div>
|
||||
<el-button type="success" class="contact-btn" @click="goDei(item)">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
|
||||
<span>联系卖家</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="item.rank" class="rank-badge">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<el-row v-if="currentTab0 === 1" :gutter="20" style="margin-top: 10px">
|
||||
<el-col :span="24">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img3.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 100px" size="large" type="primary">发布分拣{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
|
||||
</div>
|
||||
<page-pagination :total="5" @current-change="currentChange" />
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
@ -142,8 +181,9 @@ import Common from './components/common.vue';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const tab1 = reactive(['叶菜类', '豆菜类', '根茎类', '茄果菜类', '食用菌类', '其他类蔬菜']);
|
||||
const tab2 = reactive(['甘蔗', '热带水果', '其他类水果']);
|
||||
const tab0 = reactive(['分拣服务', '分拣需求']);
|
||||
const tab1 = reactive(['全部', '人工分拣', '自动化分拣']);
|
||||
const tab2 = reactive(['全部', '已完成', '分拣中', '已接单', '待接单']);
|
||||
const tab3 = reactive(['水产', '其他类']);
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
@ -194,6 +234,7 @@ const state = reactive({
|
||||
],
|
||||
});
|
||||
|
||||
const currentTab0 = ref(0);
|
||||
const currentTab1 = ref(0);
|
||||
const currentTab2 = ref(0);
|
||||
const currentTab3 = ref(0);
|
||||
@ -338,17 +379,20 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
}
|
||||
}
|
||||
.tabs {
|
||||
height: 160px;
|
||||
//height: 160px;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
// padding: 0 20px;
|
||||
}
|
||||
.tabs0 {
|
||||
padding: 0;
|
||||
}
|
||||
.tab {
|
||||
height: 100px;
|
||||
// height: 100px;
|
||||
width: 850px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -369,9 +413,15 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.tab_list_li:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.tab_list_li.active {
|
||||
color: rgba(37, 191, 130, 1);
|
||||
}
|
||||
.tab_list_li0 {
|
||||
border-bottom: 2px solid rgba(37, 191, 130, 1);
|
||||
}
|
||||
}
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
@ -384,7 +434,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
border: 0;
|
||||
border-radius: 24px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.storage-content {
|
||||
@include flex-column;
|
||||
@ -403,6 +453,13 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-image1 {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
flex: 1;
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
</div>
|
||||
<div class="good-price-num">
|
||||
<div class="good-price-num-pos">
|
||||
<div class="price" @click="toCheckGood(index, indexg)">{{ g.netWeightInfoVO.goodSpecs }}</div>
|
||||
<div class="price" @click="toCheckGood(index, indexg)">{{ g.netWeightInfoVO?.goodSpecs }}</div>
|
||||
<div class="total" @click="toCheckGood(index, indexg)">{{ (g.price * g.quantity).toFixed(2) }}</div>
|
||||
<div class="num">
|
||||
<div class="right-item">
|
||||
@ -171,28 +171,46 @@ const pagination = (value) => {
|
||||
};
|
||||
|
||||
function addIsCheckProperty(data) {
|
||||
if (!data) return;
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
data.forEach((item) => {
|
||||
item.ischeck = false; // 为当前层级添加属性
|
||||
if (item.cartDetails) {
|
||||
// 处理子集
|
||||
addIsCheckProperty(item.cartDetails);
|
||||
}
|
||||
if (item.records) {
|
||||
// 处理父级（如存在嵌套结构）
|
||||
addIsCheckProperty(item.records);
|
||||
}
|
||||
item.ischeck = false;
|
||||
// 只处理明确知道的嵌套属性，避免无限递归
|
||||
item.cartDetails && addIsCheckProperty(item.cartDetails);
|
||||
item.records && addIsCheckProperty(item.records);
|
||||
});
|
||||
} else if (typeof data === 'object' && data !== null) {
|
||||
} else if (typeof data === 'object') {
|
||||
data.ischeck = false;
|
||||
for (let key in data) {
|
||||
if (typeof data[key] === 'object') {
|
||||
addIsCheckProperty(data[key]); // 递归处理嵌套对象
|
||||
}
|
||||
}
|
||||
// 不自动遍历所有属性，只处理已知的特定属性
|
||||
data.cartDetails && addIsCheckProperty(data.cartDetails);
|
||||
data.records && addIsCheckProperty(data.records);
|
||||
}
|
||||
}
|
||||
|
||||
// function addIsCheckProperty(data) {
|
||||
// if (Array.isArray(data)) {
|
||||
// data.forEach((item) => {
|
||||
// item.ischeck = false; // 为当前层级添加属性
|
||||
// if (item.cartDetails) {
|
||||
// // 处理子集
|
||||
// addIsCheckProperty(item.cartDetails);
|
||||
// }
|
||||
// if (item.records) {
|
||||
// // 处理父级（如存在嵌套结构）
|
||||
// addIsCheckProperty(item.records);
|
||||
// }
|
||||
// });
|
||||
// } else if (typeof data === 'object' && data !== null) {
|
||||
// data.ischeck = false;
|
||||
// for (let key in data) {
|
||||
// if (typeof data[key] === 'object') {
|
||||
// addIsCheckProperty(data[key]); // 递归处理嵌套对象
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
const numberChange = (value, index, indexg) => {
|
||||
console.log(value, index, indexg);
|
||||
setGoodsCount({ goodsId: data.value[index].cartDetails[indexg].id, count: value });
|
||||
@ -612,6 +630,7 @@ function removeCheckedItems(data) {
|
||||
}
|
||||
.price {
|
||||
font-weight: 400;
|
||||
width: 200px;
|
||||
}
|
||||
.total {
|
||||
font-weight: 700;
|
||||
@ -623,6 +642,7 @@ function removeCheckedItems(data) {
|
||||
.good-del {
|
||||
font-size: 16px;
|
||||
color: $color-999;
|
||||
width: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { ref, watch, onMounted, onUnmounted, computed } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import Hls from 'hls.js';
|
||||
// import Hls from 'hls.js';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@ const menus = reactive([
|
||||
height: 100%;
|
||||
.left-menu,
|
||||
.common-content {
|
||||
overflow-y: auto;
|
||||
// overflow-y: auto;
|
||||
padding: 8px;
|
||||
height: calc(100% - 16px);
|
||||
border-radius: 8px;
|
||||
|
||||
@ -1,193 +1,106 @@
|
||||
<template>
|
||||
<!-- <page-layout :menus="state.menus"> </page-layout>-->
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="tabs">
|
||||
<div style="display: flex">
|
||||
<div class="tab" style="color: rgba(153, 153, 153, 1); width: 100px; text-align: right">农产品类型</div>
|
||||
<div class="tabs tabs0">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab === 0 }"
|
||||
v-for="(item, index) in tab0"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
style="margin-left: 20px; margin-bottom: 10px"
|
||||
:class="{ active: currentTab0 === index, tab_list_li0: currentTab0 === index }"
|
||||
@click.stop="
|
||||
currentTab = 0;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
currentTab0 = index;
|
||||
currentTab1 = 0;
|
||||
currentTab2 = 0;
|
||||
"
|
||||
>
|
||||
粮食作物物流
|
||||
</div>
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab === 1 }"
|
||||
@click.stop="
|
||||
currentTab = 1;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
>
|
||||
经济作物物流
|
||||
</div>
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab === 2 }"
|
||||
@click.stop="
|
||||
currentTab = 2;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
>
|
||||
果蔬物流
|
||||
</div>
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab === 3 }"
|
||||
@click.stop="
|
||||
currentTab = 3;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
>
|
||||
畜牧产品物流
|
||||
</div>
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab === 4 }"
|
||||
@click.stop="
|
||||
currentTab = 4;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
>
|
||||
水产品物流
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 10px">
|
||||
<div class="tab" style="color: rgba(153, 153, 153, 1); width: 100px; text-align: right">运输方式</div>
|
||||
</div>
|
||||
<div v-if="currentTab0 === 0" class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab1 === 0 }"
|
||||
@click.stop="
|
||||
currentTab1 = 0;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
v-for="(item, index) in tab1"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
公路
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentTab0 === 1" class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab1 === 1 }"
|
||||
@click.stop="
|
||||
currentTab1 = 1;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
v-for="(item, index) in tab2"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab2 === index }"
|
||||
@click.stop="currentTab2 = index"
|
||||
>
|
||||
铁路
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentTab0 === 1" class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab1 === 2 }"
|
||||
@click.stop="
|
||||
currentTab1 = 2;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
v-for="(item, index) in tab3"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
水路
|
||||
</div>
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab1 === 3 }"
|
||||
@click.stop="
|
||||
currentTab1 = 3;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
>
|
||||
航空
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-row :gutter="20" style="margin-top: 10px">
|
||||
<el-col v-for="(item, index) in state.data" :key="index" :span="12">
|
||||
<el-card class="storage-card" shadow="hover">
|
||||
<el-col v-if="currentTab0 === 0" :span="24">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
<img :src="item.imgPath" fit="cover" class="storage-image" />
|
||||
<div class="storage-info">
|
||||
<h3 class="storage-title">{{ item.name }}</h3>
|
||||
<div class="storage-desc">
|
||||
<span style="text-align: left">{{ item.parentTitle }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag
|
||||
v-for="(tags, indexT) in item.tag"
|
||||
:key="indexT"
|
||||
effect="plain"
|
||||
round
|
||||
style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
|
||||
>
|
||||
{{ tags }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="storage-location">
|
||||
<el-icon><Location /></el-icon>
|
||||
{{ item.address }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img11.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
<div class="storage-price">
|
||||
<div class="storage-price-left">
|
||||
<span class="price-label">报价</span>
|
||||
<span class="price-amount"
|
||||
>¥{{ item.price }}/{{ item.priceSpec === 1 ? 'kg' : item.priceSpec === 2 ? '件' : item.priceSpec === 3 ? 'm³' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<el-button type="success" class="contact-btn" @click="goDetail(item.id)">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
|
||||
<span>联系卖家</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="index >= 0 && index < 3" class="rank-badge">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/top' + (index + 1) + '.png')" alt="" style="width: 80px" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img12.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-else :span="24">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img13.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 100px" size="large" type="primary">发布物流{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
|
||||
</div>
|
||||
<!-- <el-pagination
|
||||
:size="'large'"
|
||||
:page-size="paginations.size"
|
||||
:current-page="paginations.page"
|
||||
:total="paginations.total"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
@current-change="currentChange"
|
||||
/> -->
|
||||
</el-row>
|
||||
<el-pagination background layout="prev, pager, next" :total="1000" />
|
||||
<!-- <page-pagination :total="6" @current-change="currentChange" />-->
|
||||
<el-dialog v-model="dialogFormVisible" width="600" style="padding: 60px; border-radius: 16px">
|
||||
<el-form :size="'large'" :model="state.query.current">
|
||||
<el-form-item label="首选商家：" :label-width="formLabelWidth" style="color: #25bf82; font-size: 20px">
|
||||
{{ state.query.current.parentTitle }}
|
||||
</el-form-item>
|
||||
<el-form-item label="选择服务：" :label-width="formLabelWidth" style="color: #25bf82">
|
||||
{{ state.query.current.name }}
|
||||
</el-form-item>
|
||||
<el-form-item label="需求量：" :label-width="formLabelWidth">
|
||||
<el-input v-model="formData.value.demand" autocomplete="off" placeholder="请填写您的需求量" style="font-size: 20px">
|
||||
<template #append>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="您的称呼：" :label-width="formLabelWidth">
|
||||
<el-input
|
||||
v-model="formData.value.surname"
|
||||
autocomplete="off"
|
||||
placeholder="姓氏"
|
||||
style="display: inline; width: 100px; font-size: 20px"
|
||||
/>
|
||||
<el-radio-group v-model="formData.value.sex" style="display: inline; margin-left: 20px">
|
||||
<el-radio value="1">先生</el-radio>
|
||||
<el-radio value="2">女士</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="您的电话：" :label-width="formLabelWidth">
|
||||
<el-input v-model="formData.value.phoneNum" autocomplete="off" style="font-size: 20px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer" style="text-align: center">
|
||||
<el-button style="height: 50px; padding: 0 40px; border-radius: 16px" type="primary" @click="priceConfirm"> 发送询价 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
@ -196,14 +109,27 @@
|
||||
import { ref, reactive, watch, onMounted } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { getWarehouseInfo, warehouseList } from '@/apis/warehouseLogistics.js';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||
import Common from '../components/common.vue';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics.js';
|
||||
import { getWarehouseInfo, logisticList } from '@/apis/warehouseLogistics.js';
|
||||
import { useGetCommonData } from '@/store/modules/common.js';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const store = useGetCommonData();
|
||||
const { data } = storeToRefs(store);
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const tab0 = reactive(['物流服务', '物流需求']);
|
||||
const tab1 = reactive(['全部', '物流公司', '个人']);
|
||||
const tab2 = reactive(['全部', '11米7', '13米', '13米7', '15米']);
|
||||
const tab3 = reactive(['全部', '厢式', '平板', '高栏', '飞翼', '开顶']);
|
||||
const currentTab0 = ref(0);
|
||||
const currentTab1 = ref(0);
|
||||
const currentTab2 = ref(0);
|
||||
const currentTab3 = ref(0);
|
||||
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
query: {
|
||||
@ -215,7 +141,7 @@ const state = reactive({
|
||||
title: '果蔬保鲜仓储',
|
||||
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '3.0',
|
||||
price: '600.0',
|
||||
rank: '1',
|
||||
},
|
||||
{
|
||||
@ -223,7 +149,7 @@ const state = reactive({
|
||||
title: '果蔬保鲜仓储',
|
||||
description: '绿鲜蔬选果蔬仓储中心',
|
||||
location: '临沧市-耿马县',
|
||||
price: '3.0',
|
||||
price: '600.0',
|
||||
rank: '2',
|
||||
},
|
||||
{
|
||||
@ -261,20 +187,30 @@ const state = reactive({
|
||||
],
|
||||
});
|
||||
const formData = reactive({});
|
||||
const paginations = reactive({
|
||||
page: 1,
|
||||
size: 2,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const dialogFormVisible = ref(false);
|
||||
const currentTab = ref(0);
|
||||
const currentTab1 = ref(0);
|
||||
const formLabelWidth = ref('120px');
|
||||
const toLink = (row) => {
|
||||
router.push({
|
||||
name: 'logistics-detail',
|
||||
query: { id: row?.id ?? '100' },
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getWarehouseList('1');
|
||||
});
|
||||
|
||||
const currentTab = ref(0);
|
||||
|
||||
const currentChange = (current) => {
|
||||
paginations.page = current;
|
||||
getWarehouseList(currentTab.value + 1);
|
||||
};
|
||||
|
||||
const getLogisticList = (cropsType, logisticsType) => {
|
||||
logisticList({ cropsType: cropsType + 1, logisticsType: logisticsType + 1 }).then((res) => {
|
||||
const getWarehouseList = (type) => {
|
||||
warehouseList({ type: type, current: paginations.page, size: paginations.size }).then((res) => {
|
||||
state.data = [];
|
||||
paginations.total = res.total;
|
||||
if (res.code === 200) {
|
||||
state.data = res.data.records;
|
||||
for (let i in state.data) {
|
||||
@ -284,7 +220,14 @@ const getLogisticList = (cropsType, logisticsType) => {
|
||||
});
|
||||
};
|
||||
|
||||
const goDetail = (id) => {
|
||||
const toLink = (row) => {
|
||||
router.push({
|
||||
name: 'warehouse-detail',
|
||||
query: { id: row?.id ?? '100' },
|
||||
});
|
||||
};
|
||||
|
||||
const contact = (id) => {
|
||||
for (let i in state.data) {
|
||||
if (state.data[i].id === id) {
|
||||
state.query.current = state.data[i];
|
||||
@ -293,7 +236,7 @@ const goDetail = (id) => {
|
||||
}
|
||||
formData.value = {
|
||||
warehouseId: state.query.current.id,
|
||||
type: 2,
|
||||
type: 1,
|
||||
demand: '',
|
||||
surname: '',
|
||||
sex: '',
|
||||
@ -301,6 +244,7 @@ const goDetail = (id) => {
|
||||
};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
|
||||
const priceConfirm = () => {
|
||||
// 遍历 formData 的所有键
|
||||
for (const key of Object.keys(formData.value)) {
|
||||
@ -324,21 +268,54 @@ const priceConfirm = () => {
|
||||
}
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getLogisticList(0, 0);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-form-item--large {
|
||||
--font-size: 20px;
|
||||
}
|
||||
.tabs {
|
||||
//height: 160px;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
padding: 0 20px;
|
||||
.tab {
|
||||
margin: 0 20px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
// padding: 0 20px;
|
||||
}
|
||||
.tabs0 {
|
||||
padding: 0;
|
||||
}
|
||||
.tab {
|
||||
// height: 100px;
|
||||
width: 850px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
overflow: auto; /* 启用滚动 */
|
||||
white-space: nowrap; /* 强制单行显示 */
|
||||
-ms-overflow-style: none; /* IE/Edge 兼容 */
|
||||
scrollbar-width: none; /* 隐藏滚动条 */
|
||||
.tab_list {
|
||||
color: #999999;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.tab_list_li {
|
||||
margin-left: 40px;
|
||||
color: #000000;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.tab_list_li:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.tab_list_li.active {
|
||||
color: rgba(37, 191, 130, 1);
|
||||
}
|
||||
.tab_list_li0 {
|
||||
border-bottom: 2px solid rgba(37, 191, 130, 1);
|
||||
}
|
||||
}
|
||||
.cursor {
|
||||
@ -364,6 +341,9 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.storage-price-left {
|
||||
text-align: left;
|
||||
}
|
||||
.storage-image {
|
||||
margin-right: 16px;
|
||||
width: 120px;
|
||||
@ -371,22 +351,21 @@ onMounted(() => {
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-image1 {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.storage-title {
|
||||
text-align: left;
|
||||
}
|
||||
.storage-desc {
|
||||
text-align: left;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.storage-tags {
|
||||
text-align: left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.storage-title,
|
||||
.storage-desc,
|
||||
.storage-tags,
|
||||
.storage-location {
|
||||
overflow: hidden;
|
||||
margin: 10px 0;
|
||||
@ -447,9 +426,6 @@ onMounted(() => {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.storage-price-left {
|
||||
text-align: left;
|
||||
}
|
||||
.rank-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@ -4,85 +4,75 @@
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="tabs tabs0">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab0"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
style="margin-left: 20px; margin-bottom: 10px"
|
||||
:class="{ active: currentTab0 === index, tab_list_li0: currentTab0 === index }"
|
||||
@click.stop="
|
||||
currentTab0 = index;
|
||||
currentTab1 = 0;
|
||||
currentTab2 = 0;
|
||||
"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab" style="color: rgba(153, 153, 153, 1)">仓储分类</div>
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab === 0 }"
|
||||
@click.stop="
|
||||
currentTab = 0;
|
||||
getWarehouseList('1');
|
||||
"
|
||||
>
|
||||
普通仓库
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab1"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="tab cursor" :class="{ active: currentTab === 1 }" @click.stop="currentTab = 1">恒温仓库</div>-->
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab === 2 }"
|
||||
@click.stop="
|
||||
currentTab = 2;
|
||||
getWarehouseList('3');
|
||||
"
|
||||
>
|
||||
冷库
|
||||
</div>
|
||||
<!-- <div class="tab cursor" :class="{ active: currentTab === 3 }" @click.stop="currentTab = 3">气调仓库</div>-->
|
||||
<div class="tab"> </div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-row :gutter="20" style="margin-top: 10px">
|
||||
<el-col v-for="(item, index) in state.data" :key="index" :span="12">
|
||||
<el-card class="storage-card" shadow="hover">
|
||||
<el-col v-if="currentTab0 === 0" :span="24">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
<el-image :src="item.imgPath" fit="cover" class="storage-image" />
|
||||
<div class="storage-info">
|
||||
<h3 class="storage-title">{{ item.name }}</h3>
|
||||
<div class="storage-desc">
|
||||
<span>{{ item.parentTitle }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag
|
||||
v-for="(tags, indexT) in item.tag"
|
||||
:key="indexT"
|
||||
effect="plain"
|
||||
round
|
||||
style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
|
||||
>
|
||||
{{ tags }}
|
||||
</el-tag>
|
||||
<!-- <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">保鲜储存</el-tag>-->
|
||||
</div>
|
||||
<div class="storage-location">
|
||||
<el-icon><Location /></el-icon>
|
||||
{{ item.address }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img7.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
<div class="storage-price">
|
||||
<div class="storage-price-left">
|
||||
<span class="price-label">报价</span>
|
||||
<span class="price-amount"
|
||||
>¥{{ item.price }}/{{ item.priceSpec === 1 ? 'm³' : item.priceSpec === 2 ? '间' : item.priceSpec === 3 ? '㎡' : '' }}/{{
|
||||
item.timeSpec === 1 ? '天' : item.timeSpec === 2 ? '月' : item.timeSpec === 3 ? '年' : ''
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<el-button type="success" class="contact-btn" @click="contact(item.id)">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
|
||||
<span>联系卖家</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="index >= 0 && index < 3" class="rank-badge">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/top' + (index + 1) + '.png')" alt="" style="width: 80px" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img8.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-pagination
|
||||
<el-col v-else :span="24">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img9.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img10.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 100px" size="large" type="primary">发布仓储{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
|
||||
</div>
|
||||
<!-- <el-pagination
|
||||
:size="'large'"
|
||||
:page-size="paginations.size"
|
||||
:current-page="paginations.page"
|
||||
@ -90,43 +80,8 @@
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
@current-change="currentChange"
|
||||
/>
|
||||
/> -->
|
||||
</el-row>
|
||||
<el-dialog v-model="dialogFormVisible" width="600" style="padding: 60px; border-radius: 16px">
|
||||
<el-form :size="'large'" :model="state.query.current">
|
||||
<el-form-item label="首选商家：" :label-width="formLabelWidth" style="color: #25bf82; font-size: 20px">
|
||||
{{ state.query.current.parentTitle }}
|
||||
</el-form-item>
|
||||
<el-form-item label="选择服务：" :label-width="formLabelWidth" style="color: #25bf82">
|
||||
{{ state.query.current.name }}
|
||||
</el-form-item>
|
||||
<el-form-item label="需求量：" :label-width="formLabelWidth">
|
||||
<el-input v-model="formData.value.demand" autocomplete="off" placeholder="请填写您的需求量" style="font-size: 20px">
|
||||
<template #append>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="您的称呼：" :label-width="formLabelWidth">
|
||||
<el-input
|
||||
v-model="formData.value.surname"
|
||||
autocomplete="off"
|
||||
placeholder="姓氏"
|
||||
style="display: inline; width: 100px; font-size: 20px"
|
||||
/>
|
||||
<el-radio-group v-model="formData.value.sex" style="display: inline; margin-left: 20px">
|
||||
<el-radio value="1">先生</el-radio>
|
||||
<el-radio value="2">女士</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="您的电话：" :label-width="formLabelWidth">
|
||||
<el-input v-model="formData.value.phoneNum" autocomplete="off" style="font-size: 20px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer" style="text-align: center">
|
||||
<el-button style="height: 50px; padding: 0 40px; border-radius: 16px" type="primary" @click="priceConfirm"> 发送询价 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
@ -147,6 +102,13 @@ const { data } = storeToRefs(store);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const tab0 = reactive(['仓储服务', '仓储需求']);
|
||||
const tab1 = reactive(['全部', '普通仓储', '恒温仓储', '冷库', '气调仓储']);
|
||||
const currentTab0 = ref(0);
|
||||
const currentTab1 = ref(0);
|
||||
const currentTab2 = ref(0);
|
||||
const currentTab3 = ref(0);
|
||||
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
query: {
|
||||
@ -291,14 +253,48 @@ const priceConfirm = () => {
|
||||
--font-size: 20px;
|
||||
}
|
||||
.tabs {
|
||||
height: 50px;
|
||||
//height: 160px;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
// padding: 0 20px;
|
||||
}
|
||||
.tabs0 {
|
||||
padding: 0;
|
||||
}
|
||||
.tab {
|
||||
// height: 100px;
|
||||
width: 850px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0 20px;
|
||||
.tab {
|
||||
margin: 0 20px;
|
||||
overflow-x: auto;
|
||||
overflow: auto; /* 启用滚动 */
|
||||
white-space: nowrap; /* 强制单行显示 */
|
||||
-ms-overflow-style: none; /* IE/Edge 兼容 */
|
||||
scrollbar-width: none; /* 隐藏滚动条 */
|
||||
.tab_list {
|
||||
color: #999999;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.tab_list_li {
|
||||
margin-left: 40px;
|
||||
color: #000000;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.tab_list_li:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.tab_list_li.active {
|
||||
color: rgba(37, 191, 130, 1);
|
||||
}
|
||||
.tab_list_li0 {
|
||||
border-bottom: 2px solid rgba(37, 191, 130, 1);
|
||||
}
|
||||
}
|
||||
.cursor {
|
||||
@ -334,6 +330,13 @@ const priceConfirm = () => {
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-image1 {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
flex: 1;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user