投入品管理 - 种子种苗管理页面展示列表开发
This commit is contained in:
parent
4156eea27c
commit
9f6847a1a0
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="custom-table-container">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
style="flex: 1; display: flex; flex-direction: column; text-align: center"
|
||||
:max-height="tableMaxHeight"
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:stripe="showStripe"
|
||||
:fit="true"
|
||||
@ -13,15 +13,15 @@
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<!-- 树形展开 -->
|
||||
<el-table-column v-if="tree" type="expand">
|
||||
<template #default="props">
|
||||
<slot name="tree" :row="props.row"></slot>
|
||||
<el-table-column v-if="tree" type="expand" :header-class-name="headerCellClassName">
|
||||
<template #default="scope">
|
||||
<slot name="tree" :row="scope.row"></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 首列多选框 -->
|
||||
<el-table-column v-if="showSelection" type="selection" width="30" align="center" fixed />
|
||||
<el-table-column label="序号" width="70" v-if="showSort" fixed align="center">
|
||||
<el-table-column v-if="showSelection" type="selection" width="30" align="center" fixed :header-class-name="headerCellClassName" />
|
||||
<el-table-column v-if="showSort" label="序号" width="70" fixed align="center" :header-class-name="headerCellClassName">
|
||||
<template #default="{ $index }">
|
||||
{{ (currentPage - 1) * pageSize + $index + 1 }}
|
||||
</template>
|
||||
@ -299,8 +299,9 @@ onBeforeUnmount(() => {
|
||||
/* 自定义表头样式 */
|
||||
:deep(.custom-header) {
|
||||
color: #333;
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
/* 自定义表头样式 */
|
||||
/* 自定义单元格样式 */
|
||||
:deep(.custom-cell) {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
@ -1,263 +1,413 @@
|
||||
<template>
|
||||
<section class="custom-page">
|
||||
<h2>种子基本信息</h2>
|
||||
<TypeMenu v-if="materialTypes['4'].length > 1" v-model:type="_type" :types="materialTypes['4']" />
|
||||
<br />
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model:page="pageData"
|
||||
v-model:search="searchCondition"
|
||||
:table-loading="_loading"
|
||||
:before-close="handleCloseDialog"
|
||||
:data="data"
|
||||
:option="option"
|
||||
@search-change="
|
||||
(form, done) => {
|
||||
getData(1);
|
||||
done();
|
||||
}
|
||||
"
|
||||
@search-reset="getData(1)"
|
||||
@refresh-change="getData"
|
||||
@current-change="getData"
|
||||
@size-change="getData(1)"
|
||||
@row-save="handleRowSave"
|
||||
<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="seedName">
|
||||
<el-input v-model="formInline.seedName" 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-cont">
|
||||
<tableComponent
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:show-selection="false"
|
||||
:loading="tableLoading"
|
||||
:total="tableTotal"
|
||||
:current-page="formInline.current"
|
||||
:page-size="formInline.size"
|
||||
:show-sort="true"
|
||||
@page-change="handlePaginationChange"
|
||||
>
|
||||
<template #menu="{ row }">
|
||||
<el-button type="primary" @click="handleInfo(row)">详情</el-button>
|
||||
<el-button @click="deleteFn(row.id, delSeed, getData)">删除</el-button>
|
||||
<!-- 自定义-操作 -->
|
||||
<template #action="slotProps">
|
||||
<el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button>
|
||||
<el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||
</template>
|
||||
<template #photoUrl-form="{ type }"> <Attrs v-model:attrs="attrs" :type="type == 'add' ? 'add' : 'view'" :limit="2" /> </template>
|
||||
</avue-crud>
|
||||
</section>
|
||||
</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, onMounted, watch, pushScopeId } from 'vue';
|
||||
import TypeMenu from '../../common/TypeMenu.vue';
|
||||
import { CRUD_OPTIONS, pageData, customRules } from '@/config';
|
||||
import { useBasicInfo } from '@/views/inputSuppliesManage/hooks/useBasicInfo';
|
||||
import Attrs from '@/views/inputSuppliesManage/common/Attrs.vue';
|
||||
import inputSuppliesapi from '@/apis/inputSuppliesApi';
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import tableComponent from '@/components/tableComponent.vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import assistFn from '@/views/inputSuppliesManage/hooks/useAssistFn';
|
||||
const { deleteFn } = new assistFn();
|
||||
const { getSeedList, seedSave, delSeed } = inputSuppliesapi;
|
||||
const { loadFinish, materialTypes, targetName } = useBasicInfo({
|
||||
moduleType: '4',
|
||||
});
|
||||
const _allTypes = ref([]);
|
||||
watch(
|
||||
() => loadFinish.value,
|
||||
(bol) => {
|
||||
if (bol) {
|
||||
option.value.column.forEach((v) => {
|
||||
if (v.prop === '_classifyId') {
|
||||
_allTypes.value = materialTypes['4'].filter((v, i) => i > 0) ?? [];
|
||||
v.dicData = _allTypes.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||
const { getSeedList, seedSave, delSeed, getMaterailTypes } = inputSuppliesApi;
|
||||
import { useApp } from '@/hooks';
|
||||
const app = useApp();
|
||||
|
||||
onMounted(getData);
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
const _type = ref('0');
|
||||
const crudRef = ref();
|
||||
const _loading = ref(true);
|
||||
const searchCondition = ref({
|
||||
keywords: '',
|
||||
// 查询条件
|
||||
const formInline = reactive({
|
||||
seedName: '',
|
||||
seedTypeId: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
});
|
||||
const data = ref([]);
|
||||
const option = ref({
|
||||
...CRUD_OPTIONS,
|
||||
selection: false,
|
||||
menuWidth: 160,
|
||||
column: [
|
||||
const searchForm = ref(null);
|
||||
const onSubmit = () => {
|
||||
formInline.current = 1;
|
||||
loadData();
|
||||
};
|
||||
const resetForm = () => {
|
||||
searchForm.value.resetFields();
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const selectedIds = ref([]);
|
||||
const tableLoading = ref(false);
|
||||
const tableTotal = ref(0);
|
||||
const columns = ref([
|
||||
{ prop: 'seedName', label: '种子种苗名称' },
|
||||
{ prop: 'varietyName', label: '品种名称' },
|
||||
{ prop: 'brand', label: '品牌' },
|
||||
{ prop: 'manufacturer', label: '生产厂家' },
|
||||
{ prop: 'classifyName', label: '分类' },
|
||||
{ prop: 'productUnit', label: '产品规格' },
|
||||
{ prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||
]);
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
formInline.current = page;
|
||||
formInline.size = pageSize;
|
||||
loadData();
|
||||
};
|
||||
const loadData = async () => {
|
||||
tableLoading.value = true;
|
||||
try {
|
||||
let response = await getSeedList(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: [
|
||||
{
|
||||
label: '种子名称',
|
||||
prop: 'keywords',
|
||||
hide: true,
|
||||
search: true,
|
||||
addDisplay: false,
|
||||
viewDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '种子名称',
|
||||
prop: 'seedName',
|
||||
rules: customRules({ msg: '请输入种子名称' }),
|
||||
},
|
||||
{
|
||||
prop: 'manufacturer',
|
||||
label: '厂家',
|
||||
rules: customRules({ msg: '请输入厂家名称' }),
|
||||
},
|
||||
{
|
||||
label: '品牌名称',
|
||||
prop: 'brand',
|
||||
rules: customRules({ msg: '请输入品牌名称' }),
|
||||
},
|
||||
{
|
||||
label: '品种名称',
|
||||
prop: 'varietyName',
|
||||
rules: customRules({ msg: '请输入品种名称' }),
|
||||
},
|
||||
{
|
||||
hide: true,
|
||||
label: '图片',
|
||||
prop: 'photoUrl',
|
||||
},
|
||||
{
|
||||
label: '分类',
|
||||
prop: '_classifyId',
|
||||
type: 'cascader',
|
||||
expandTrigger: 'click',
|
||||
dicData: [],
|
||||
rules: customRules({ msg: '请选择分类' }),
|
||||
render: ({ row }) => row.classifyName ?? '',
|
||||
},
|
||||
// {
|
||||
// prop: 'distributor',
|
||||
// label: '经销商',
|
||||
// },
|
||||
{
|
||||
prop: 'productUnit',
|
||||
width: '100',
|
||||
label: '产品规格',
|
||||
// editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '种植时间',
|
||||
prop: 'sowingTime',
|
||||
span: 24,
|
||||
type: 'textarea',
|
||||
},
|
||||
{
|
||||
hide: true,
|
||||
label: '种植密度',
|
||||
prop: 'plantDensity',
|
||||
span: 24,
|
||||
type: 'textarea',
|
||||
},
|
||||
{
|
||||
hide: true,
|
||||
label: '施肥管理',
|
||||
prop: 'fertilizeManage',
|
||||
span: 24,
|
||||
type: 'textarea',
|
||||
},
|
||||
{
|
||||
hide: true,
|
||||
label: '水分管理',
|
||||
prop: 'waterManage',
|
||||
span: 24,
|
||||
type: 'textarea',
|
||||
},
|
||||
{
|
||||
hide: true,
|
||||
label: '病虫害防治',
|
||||
prop: 'pestControl',
|
||||
span: 24,
|
||||
type: 'textarea',
|
||||
},
|
||||
{
|
||||
hide: true,
|
||||
label: '注意事项',
|
||||
prop: 'precautions',
|
||||
span: 24,
|
||||
type: 'textarea',
|
||||
required: true,
|
||||
message: '请选择蔬菜种苗',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
],
|
||||
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||
});
|
||||
const attrs = ref([]);
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
|
||||
async function getData(reset) {
|
||||
_loading.value = true;
|
||||
reset == 1 && (pageData.value.currentPage = 1);
|
||||
let params = {
|
||||
current: pageData.value.currentPage,
|
||||
size: pageData.value.size,
|
||||
seedName: searchCondition.value.keywords,
|
||||
// 新增操作
|
||||
const addItem = async () => {
|
||||
restDialogForm();
|
||||
dialogTitle.value = '新增';
|
||||
formDisabled.value = false;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
if (_type.value != '0') params['classifyId'] = _type.value;
|
||||
let res = await getSeedList(params);
|
||||
if (res.code == 200) {
|
||||
data.value = res.data.records ?? [];
|
||||
pageData.value.total = res.data.total;
|
||||
}
|
||||
_loading.value = false;
|
||||
}
|
||||
|
||||
function handleInfo(row) {
|
||||
columnSpanChange(true);
|
||||
handleAttrs(row);
|
||||
crudRef.value.rowView(row);
|
||||
}
|
||||
async function handleRowSave(form, done, loading) {
|
||||
const data = Object.assign({}, form);
|
||||
delete data.keywords;
|
||||
if (attrs.value.length) {
|
||||
data.photoUrl = attrs.value.map((v) => v.url).join();
|
||||
}
|
||||
if (data._classifyId.length) {
|
||||
data.photoUrl = attrs.value.map((v) => v.url).join();
|
||||
}
|
||||
data.classifyId = JSON.stringify(data._classifyId);
|
||||
delete data._classifyId;
|
||||
data.classifyName = targetName(_allTypes.value, form._classifyId, '');
|
||||
let res = await seedSave(data);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success('新增成功');
|
||||
getData();
|
||||
done();
|
||||
}
|
||||
loading();
|
||||
}
|
||||
/* 处理展示附件 */
|
||||
function handleAttrs(row = {}) {
|
||||
if (!row) {
|
||||
return;
|
||||
}
|
||||
if (row.photoUrl) {
|
||||
attrs.value = row.photoUrl.split(',').map((v, i) => {
|
||||
return {
|
||||
url: v,
|
||||
uid: `photo_${i}_${Date.now()}`,
|
||||
// 查看详情
|
||||
const seeDetails = async (row) => {
|
||||
dialogTitle.value = '详情';
|
||||
setDialogForm(row);
|
||||
formDisabled.value = true;
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
// 编辑操作
|
||||
const handleEdit = (row) => {
|
||||
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 delSeed(ids);
|
||||
return res;
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function handleCloseDialog(done) {
|
||||
columnSpanChange();
|
||||
attrs.value = [];
|
||||
done();
|
||||
}
|
||||
function columnSpanChange(row = false) {
|
||||
let arr = ['photoUrl'];
|
||||
option.value.column.forEach((v) => {
|
||||
if (arr.includes(v.prop)) {
|
||||
if (row) {
|
||||
v.span = 24;
|
||||
};
|
||||
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 seedSave(param);
|
||||
} else {
|
||||
delete v.span;
|
||||
response = await seedSave(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);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endregion
|
||||
</script>
|
||||
};
|
||||
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>
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
font-family: '黑体';
|
||||
.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,263 @@
|
||||
<template>
|
||||
<section class="custom-page">
|
||||
<h2>种子基本信息</h2>
|
||||
<TypeMenu v-if="materialTypes['4'].length > 1" v-model:type="_type" :types="materialTypes['4']" />
|
||||
<br />
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model:page="pageData"
|
||||
v-model:search="searchCondition"
|
||||
:table-loading="_loading"
|
||||
:before-close="handleCloseDialog"
|
||||
:data="data"
|
||||
:option="option"
|
||||
@search-change="
|
||||
(form, done) => {
|
||||
getData(1);
|
||||
done();
|
||||
}
|
||||
"
|
||||
@search-reset="getData(1)"
|
||||
@refresh-change="getData"
|
||||
@current-change="getData"
|
||||
@size-change="getData(1)"
|
||||
@row-save="handleRowSave"
|
||||
>
|
||||
<template #menu="{ row }">
|
||||
<el-button type="primary" @click="handleInfo(row)">详情</el-button>
|
||||
<el-button @click="deleteFn(row.id, delSeed, getData)">删除</el-button>
|
||||
</template>
|
||||
<template #photoUrl-form="{ type }"> <Attrs v-model:attrs="attrs" :type="type == 'add' ? 'add' : 'view'" :limit="2" /> </template>
|
||||
</avue-crud>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, pushScopeId } from 'vue';
|
||||
import TypeMenu from '../../common/TypeMenu.vue';
|
||||
import { CRUD_OPTIONS, pageData, customRules } from '@/config';
|
||||
import { useBasicInfo } from '@/views/inputSuppliesManage/hooks/useBasicInfo';
|
||||
import Attrs from '@/views/inputSuppliesManage/common/Attrs.vue';
|
||||
import inputSuppliesapi from '@/apis/inputSuppliesApi';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import assistFn from '@/views/inputSuppliesManage/hooks/useAssistFn';
|
||||
const { deleteFn } = new assistFn();
|
||||
const { getSeedList, seedSave, delSeed } = inputSuppliesapi;
|
||||
const { loadFinish, materialTypes, targetName } = useBasicInfo({
|
||||
moduleType: '4',
|
||||
});
|
||||
const _allTypes = ref([]);
|
||||
watch(
|
||||
() => loadFinish.value,
|
||||
(bol) => {
|
||||
if (bol) {
|
||||
option.value.column.forEach((v) => {
|
||||
if (v.prop === '_classifyId') {
|
||||
_allTypes.value = materialTypes['4'].filter((v, i) => i > 0) ?? [];
|
||||
v.dicData = _allTypes.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(getData);
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
const _type = ref('0');
|
||||
const crudRef = ref();
|
||||
const _loading = ref(true);
|
||||
const searchCondition = ref({
|
||||
keywords: '',
|
||||
});
|
||||
const data = ref([]);
|
||||
const option = ref({
|
||||
...CRUD_OPTIONS,
|
||||
selection: false,
|
||||
menuWidth: 160,
|
||||
column: [
|
||||
{
|
||||
label: '种子名称',
|
||||
prop: 'keywords',
|
||||
hide: true,
|
||||
search: true,
|
||||
addDisplay: false,
|
||||
viewDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '种子名称',
|
||||
prop: 'seedName',
|
||||
rules: customRules({ msg: '请输入种子名称' }),
|
||||
},
|
||||
{
|
||||
prop: 'manufacturer',
|
||||
label: '厂家',
|
||||
rules: customRules({ msg: '请输入厂家名称' }),
|
||||
},
|
||||
{
|
||||
label: '品牌名称',
|
||||
prop: 'brand',
|
||||
rules: customRules({ msg: '请输入品牌名称' }),
|
||||
},
|
||||
{
|
||||
label: '品种名称',
|
||||
prop: 'varietyName',
|
||||
rules: customRules({ msg: '请输入品种名称' }),
|
||||
},
|
||||
{
|
||||
hide: true,
|
||||
label: '图片',
|
||||
prop: 'photoUrl',
|
||||
},
|
||||
{
|
||||
label: '分类',
|
||||
prop: '_classifyId',
|
||||
type: 'cascader',
|
||||
expandTrigger: 'click',
|
||||
dicData: [],
|
||||
rules: customRules({ msg: '请选择分类' }),
|
||||
render: ({ row }) => row.classifyName ?? '',
|
||||
},
|
||||
// {
|
||||
// prop: 'distributor',
|
||||
// label: '经销商',
|
||||
// },
|
||||
{
|
||||
prop: 'productUnit',
|
||||
width: '100',
|
||||
label: '产品规格',
|
||||
// editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '种植时间',
|
||||
prop: 'sowingTime',
|
||||
span: 24,
|
||||
type: 'textarea',
|
||||
},
|
||||
{
|
||||
hide: true,
|
||||
label: '种植密度',
|
||||
prop: 'plantDensity',
|
||||
span: 24,
|
||||
type: 'textarea',
|
||||
},
|
||||
{
|
||||
hide: true,
|
||||
label: '施肥管理',
|
||||
prop: 'fertilizeManage',
|
||||
span: 24,
|
||||
type: 'textarea',
|
||||
},
|
||||
{
|
||||
hide: true,
|
||||
label: '水分管理',
|
||||
prop: 'waterManage',
|
||||
span: 24,
|
||||
type: 'textarea',
|
||||
},
|
||||
{
|
||||
hide: true,
|
||||
label: '病虫害防治',
|
||||
prop: 'pestControl',
|
||||
span: 24,
|
||||
type: 'textarea',
|
||||
},
|
||||
{
|
||||
hide: true,
|
||||
label: '注意事项',
|
||||
prop: 'precautions',
|
||||
span: 24,
|
||||
type: 'textarea',
|
||||
},
|
||||
],
|
||||
});
|
||||
const attrs = ref([]);
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
|
||||
async function getData(reset) {
|
||||
_loading.value = true;
|
||||
reset == 1 && (pageData.value.currentPage = 1);
|
||||
let params = {
|
||||
current: pageData.value.currentPage,
|
||||
size: pageData.value.size,
|
||||
seedName: searchCondition.value.keywords,
|
||||
};
|
||||
if (_type.value != '0') params['classifyId'] = _type.value;
|
||||
let res = await getSeedList(params);
|
||||
if (res.code == 200) {
|
||||
data.value = res.data.records ?? [];
|
||||
pageData.value.total = res.data.total;
|
||||
}
|
||||
_loading.value = false;
|
||||
}
|
||||
|
||||
function handleInfo(row) {
|
||||
columnSpanChange(true);
|
||||
handleAttrs(row);
|
||||
crudRef.value.rowView(row);
|
||||
}
|
||||
async function handleRowSave(form, done, loading) {
|
||||
const data = Object.assign({}, form);
|
||||
delete data.keywords;
|
||||
if (attrs.value.length) {
|
||||
data.photoUrl = attrs.value.map((v) => v.url).join();
|
||||
}
|
||||
if (data._classifyId.length) {
|
||||
data.photoUrl = attrs.value.map((v) => v.url).join();
|
||||
}
|
||||
data.classifyId = JSON.stringify(data._classifyId);
|
||||
delete data._classifyId;
|
||||
data.classifyName = targetName(_allTypes.value, form._classifyId, '');
|
||||
let res = await seedSave(data);
|
||||
if (res.code == 200) {
|
||||
ElMessage.success('新增成功');
|
||||
getData();
|
||||
done();
|
||||
}
|
||||
loading();
|
||||
}
|
||||
/* 处理展示附件 */
|
||||
function handleAttrs(row = {}) {
|
||||
if (!row) {
|
||||
return;
|
||||
}
|
||||
if (row.photoUrl) {
|
||||
attrs.value = row.photoUrl.split(',').map((v, i) => {
|
||||
return {
|
||||
url: v,
|
||||
uid: `photo_${i}_${Date.now()}`,
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
function handleCloseDialog(done) {
|
||||
columnSpanChange();
|
||||
attrs.value = [];
|
||||
done();
|
||||
}
|
||||
function columnSpanChange(row = false) {
|
||||
let arr = ['photoUrl'];
|
||||
option.value.column.forEach((v) => {
|
||||
if (arr.includes(v.prop)) {
|
||||
if (row) {
|
||||
v.span = 24;
|
||||
} else {
|
||||
delete v.span;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
font-family: '黑体';
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user