Web/daimp-front
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:农药管理页面搭建完成

Browse Source
This commit is contained in:
李想 2025-03-17 17:32:59 +08:00
parent 903b520d1c
commit efe8c69ab9
6 changed files with 499 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
sub-government-affairs-service/src/views/inputSuppliesManage/common/Attrs.vue Normal file
View File

@ -0,0 +1,134 @@
<template>
<section class="custom_attrs_upload_content_lx" :style="{ '--columns': props.fileNum }">
<el-upload
v-if="props.type != 'view' && props.upBtn"
class="custom-form__uploader"
action=""
:show-file-list="false"
:accept="props.accept"
:limit="props.limit"
:http-request="rowUploadPicture"
:disabled="attrs_.length >= props.limit"
>
<el-icon class="custom-form__uploader__icon"><Plus /></el-icon>
</el-upload>
<div v-for="(item, i) in attrs_" :key="`attr_${item.uid}`" class="attrs_content__item">
<img :src="item.url" :alt="item.name" @click="handlePreview(i)" />
<el-icon v-if="props.type != 'view'" class="clear_btn" @click.stop="handleClearAttr(item.uid)"><CircleCloseFilled /></el-icon>
</div>
<el-image-viewer v-if="previewShow" :url-list="srcList" :initial-index="index" @close="previewShow = false" />
</section>
</template>
<script setup>
import { nextTick, ref, watch } from 'vue';
import { CommonUpload } from '@/apis';
const emit = defineEmits(['update:attrs']);
const props = defineProps({
accept: {
type: String,
default: 'image/*',
},
type: {
type: String,
default: 'view',
},
attrs: {
type: Array,
default: () => [],
},
limit: {
type: Number,
default: 1,
},
fileNum: {
type: Number,
default: 4,
},
upBtn: {
type: Boolean,
default: true,
},
});
const attrs_ = ref([]);
const srcList = ref([]);
watch(
() => props.attrs,
(val) => {
attrs_.value = val;
srcList.value = attrs_.value.map((item) => item.url);
},
{ deep: true, immediate: true }
);
const index = ref(0);
const previewShow = ref(false);
function handleClearAttr(uid) {
attrs_.value = attrs_.value.filter((item) => item.uid !== uid);
emit('update:attrs', attrs_.value);
}
async function rowUploadPicture({ file }) {
const formData = new FormData();
formData.append('file', file);
const res = await CommonUpload(formData);
if (res.code === 200) {
attrs_.value.push({
...res.data,
uid: 'id_' + Date.now(),
});
emit('update:attrs', attrs_.value);
}
}
function handlePreview(i) {
previewShow.value = false;
nextTick(() => {
index.value = i;
previewShow.value = true;
});
}
</script>
<style lang="scss">
.custom_attrs_upload_content_lx {
display: grid;
flex-wrap: wrap;
grid-template-columns: repeat(var(--columns), 1fr);
box-sizing: border-box;
gap: 20px;
> div {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
box-sizing: border-box;
}
.attrs_content__item {
aspect-ratio: 1 / 1;
box-sizing: border-box;
position: relative;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
img,
video {
vertical-align: middle;
width: 100%;
height: 100%;
border-radius: 2px;
}
.clear_btn {
position: absolute;
right: 0px;
top: 0px;
font-size: 18px;
color: #f15c5c;
opacity: 0;
cursor: pointer;
background-color: #fff;
border-radius: 50%;
}
&:hover {
.clear_btn {
opacity: 1;
}
}
}
}
</style>

50
sub-government-affairs-service/src/views/inputSuppliesManage/hooks/useBasicInfo.js Normal file
View File

@ -0,0 +1,50 @@
import { ref } from 'vue';
export function useBasicInfo() {
const pesticideData = ref([
{ label: '全部', value: '0' },
{
label: '防治对象',
value: '1',
children: [
{ label: '杀虫剂', value: '1-1' },
{ label: '除草剂', value: '1-2' },
{ label: '杀菌剂', value: '1-3' },
{ label: '杀螨剂', value: '1-4' },
{ label: '生物农药', value: '1-5' },
{ label: '植物生长调节剂', value: '1-6' },
],
},
{
label: '化学成分',
value: '2',
children: [
{ label: '无机农药', value: '2-1' },
{ label: '生物农药', value: '2-2' },
{
label: '有机农药',
value: '2-3',
children: [
{ label: '天然有机农药', value: '2-3-1' },
{ label: '人工合成农药', value: '2-3-2' },
],
},
],
},
{
label: '加工剂型',
value: '3',
children: [
{ label: '可湿性粉剂', value: '3-1' },
{ label: '可溶性粉剂', value: '3-2' },
{ label: '乳剂', value: '3-3' },
{ label: '颗粒剂', value: '4-4' },
{ label: '缓释剂', value: '5-5' },
{ label: '烟剂', value: '6-6' },
],
},
]);
return {
pesticideData,
};
}

316
sub-government-affairs-service/src/views/inputSuppliesManage/material/pesticide/index.vue
View File

@ -1,25 +1,60 @@
<template>
<CustomCard>
<h2>农药基本信息</h2>
<TypeMenu v-model:type="type" />
<TypeMenu v-model:type="_type" :types="pesticideData" />
<br />
<avue-crud ref="crud" v-model:page="pageData" :data="data" :option="option"></avue-crud>
<avue-crud
ref="crud"
v-model:page="pageData"
:table-loading="_loading"
:data="data"
:option="option"
:before-close="handleCloseDialog"
@row-save="handleRowSave"
@row-update="handleRowUpdate"
>
<template #menu="{ row }">
<el-button type="primary" @click="handleEdit(row)">上传报告</el-button>
<el-button @click="handleInfo(row)">详情</el-button>
</template>
<template #img-form="{ type }">
<Attrs v-model:attrs="img" :type="type == 'add' ? 'add' : 'view'" />
</template>
<template #checkInfo-form="{ row }">
<section style="text-align: center; line-height: 58px">
{{ row }}
<el-button @click="handleCheckInfo('open')">查看报告</el-button>
</section>
</template>
<template #checkReport-form="{ type }">
<Attrs v-model:attrs="reportAttrs" :type="type" :up-btn="reportAttrs.length < 1" :file-num="reportAttrs.length > 0 ? 1 : 3" />
</template>
<template #checkBtn-form>
<section style="text-align: center; line-height: 58px">
<el-button @click="handleCheckInfo('close')">关闭</el-button>
</section>
</template>
</avue-crud>
</CustomCard>
</template>
<script setup>
import { ref, watch } from 'vue';
import { reactive, ref, watch, h } from 'vue';
import CustomCard from '@/components/CustomCard.vue';
import TypeMenu from '../../common/TypeMenu.vue';
import { CRUD_OPTIONS } from '@/config';
import { useBasicInfo } from '@/views/inputSuppliesManage/hooks/useBasicInfo';
import Attrs from '@/views/inputSuppliesManage/common/Attrs.vue';
const { pesticideData } = useBasicInfo();
/* --------------- data --------------- */
// #region
const type = ref('');
const _type = ref('');
watch(
() => type.value,
() => _type.value,
() => {
console.log(type.value);
console.log(_type.value);
},
{
deep: true,
@ -27,7 +62,37 @@ watch(
);
const crud = ref();
const data = ref([]);
const _loading = ref(false);
const data = ref([
{
name: '农药1',
id: '1111',
produicer: '生产商1',
dealer: '经销商1',
img: [
'https://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028',
'https://gips3.baidu.com/it/u=100751361,1567855012&fm=3028',
'https://gips2.baidu.com/it/u=195724436,3554684702&fm=3028',
],
checkReport: [],
},
{
name: '农药2',
id: '2222',
produicer: '生产商2',
dealer: '经销商2',
img: ['https://gips3.baidu.com/it/u=100751361,1567855012&fm=3028'],
checkReport: ['https://gips3.baidu.com/it/u=100751361,1567855012&fm=3028'],
},
{
name: '农药3',
id: '3333',
produicer: '生产商3',
dealer: '经销商3',
img: [],
checkReport: [],
},
]);
const pageData = ref({
total: 0,
currentPage: 1,
@ -36,54 +101,251 @@ const pageData = ref({
const option = ref({
CRUD_OPTIONS,
selection: false,
labelWidth: 124,
editBtn: false,
delBtn: false,
column: [
{
prop: '',
prop: 'id',
label: '农药编号',
addDisplay: false,
editDisplay: false,
},
{
prop: '',
prop: 'name',
label: '名称',
editDisplay: false,
},
{
prop: '',
label: '厂家',
hide: true,
prop: 'code',
label: '产品标准证号',
viewDisplay: false,
editDisplay: false,
},
{
prop: '',
hide: true,
prop: 'img',
label: '农药图片',
editDisplay: false,
},
{
hide: true,
prop: 'code1',
label: '农药登记证号',
viewDisplay: false,
editDisplay: false,
},
{
prop: 'producer',
label: '生产厂家',
editDisplay: false,
},
{
prop: 'dealer',
label: '经销商',
editDisplay: false,
},
{
prop: '',
label: '防治对象',
},
{
prop: '',
label: '化学成分',
},
{
prop: '',
label: '加工剂型',
},
{
prop: '',
prop: 'format',
label: '产品规格',
editDisplay: false,
},
{
prop: '',
prop: 'toxicity',
label: '毒性',
editDisplay: false,
},
{
prop: '',
prop: 'validity',
label: '保质期',
editDisplay: false,
},
{
prop: 'preventTargets',
label: '防治对象',
type: 'cascader',
checkStrictly: true,
multiple: true,
dicData: pesticideData.value[1].children,
span: 24,
editDisplay: false,
},
{
prop: 'chemicalComposition',
label: '化学成分',
type: 'cascader',
checkStrictly: true,
multiple: true,
dicData: pesticideData.value[2].children,
span: 24,
editDisplay: false,
},
{
prop: 'dosageForm',
label: '加工剂型',
type: 'cascader',
checkStrictly: true,
multiple: true,
dicData: pesticideData.value[3].children,
span: 24,
editDisplay: false,
},
{
hide: true,
prop: 'useMethods',
label: '使用方法',
type: 'textarea',
span: 24,
viewDisplay: false,
editDisplay: false,
},
{
hide: true,
prop: 'tips',
label: '注意事项',
type: 'textarea',
span: 24,
viewDisplay: false,
editDisplay: false,
},
{
labelWidth: 0,
border: false,
prop: 'checkInfo',
span: 24,
addDisplay: false,
editDisplay: false,
},
],
group: [
{
label: '农药基本信息',
prop: 'basic_info',
addDisplay: false,
viewDisplay: false,
column: [
{
prop: 'name',
label: '农药名称',
editDisabled: true,
},
{
prop: 'producer',
label: '生产商',
editDisabled: true,
},
{
prop: 'img',
label: '农药图片',
editDisabled: true,
},
{
prop: 'dealer',
label: '经销商',
editDisabled: true,
},
],
},
{
label: '农药检测信息',
prop: 'check_info',
addDisplay: false,
viewDisplay: false,
column: [
{
prop: 'checkDate',
label: '农药名称',
},
{
prop: 'checkResult',
label: '检测结果',
},
{
prop: 'checkUnit',
label: '检测单位',
},
{
prop: 'checkConclusion',
label: '检测结论',
},
{
prop: 'checkReport',
label: '质检报告',
span: 24,
},
{
labelWidth: 0,
prop: 'checkBtn',
span: 24,
editDisplay: false,
},
],
},
],
});
const img = ref([]);
const reportAttrs = ref([]);
// #endregion
/* --------------- methods --------------- */
// #region
function handleCloseDialog(done) {
handleCheckInfoChange();
done();
}
function handleRowSave(form, done, loading) {
console.log('handleRowSave', form);
loading();
}
function handleEdit(row) {
console.log('handleEdit', row);
handleCheckInfoChange('open');
img.value = row.img.map((v) => {
return {
url: v,
uid: Date.now(),
};
});
reportAttrs.value = row.checkReport.map((v) => {
return {
url: v,
uid: Date.now(),
};
});
crud.value.rowEdit(row);
}
function handleInfo(row) {
console.log('row', row);
crud.value.rowView(row);
}
function handleCheckInfo(type) {
console.log('checkInfo', type);
handleCheckInfoChange(type == 'open');
}
/* bol && 查看检测报告关闭其他信息 !bol && 关闭检测报告打开其他信息 */
function handleCheckInfoChange(bol = false) {
console.log('bol', bol);
option.value.group.forEach((v) => {
v.viewDisplay = bol;
});
if (bol) {
option.value.column.forEach((v) => {
v.viewDisplay = false;
});
} else {
option.value.column.forEach((v) => {
if (!v.hide || v.prop == 'img') {
v.viewDisplay = true;
}
});
}
}
async function handleRowUpdate(form, done, loading) {
console.log('update from -- ', form);
loading();
}
// #endregion
</script>

29
sub-government-affairs-service/src/views/landManage/common/Attrs.vue
View File

@ -1,5 +1,5 @@
<template>
<section class="create_land_attrs_content_" :style="{ '--columns': props.fileNum }">
<section class="custom_attrs_upload_content_lx" :style="{ '--columns': props.fileNum }">
<el-upload
v-if="props.type != 'view'"
class="custom-form__uploader"
@ -14,13 +14,14 @@
</el-upload>
<div v-for="item in attrs_" :key="`attr_${item.uid}`" class="attrs_content__item">
<video v-if="isMP4(item.url)" :src="item.url" controls />
<img v-else :src="item.url" :alt="item.name" />
<img v-else :src="item.url" :alt="item.name" @click="handlePreview(i)" />
<el-icon v-if="props.type != 'view'" class="clear_btn" @click="handleClearAttr(item.uid)"><CircleCloseFilled /></el-icon>
</div>
<el-image-viewer v-if="previewShow" :url-list="srcList" :initial-index="index" @close="previewShow = false" />
</section>
</template>
<script setup>
import { ref, watch } from 'vue';
import { nextTick, ref, watch } from 'vue';
import { CommonUpload } from '@/apis';
const emit = defineEmits(['update:attrs']);
@ -47,6 +48,8 @@ const props = defineProps({
},
});
const attrs_ = ref([]);
const srcList = ref([]);
srcList.value = attrs_.value.map((item) => item.url);
watch(
() => props.attrs,
(val) => {
@ -54,6 +57,9 @@ watch(
},
{ deep: true, immediate: true }
);
const index = ref(0);
const previewShow = ref(false);
function handleClearAttr(uid) {
attrs_.value = attrs_.value.filter((item) => item.uid !== uid);
emit('update:attrs', attrs_.value);
@ -75,24 +81,29 @@ function isMP4(filePath) {
const regex = /\.mp4$/i;
return regex.test(filePath);
}
function handlePreview(i) {
previewShow.value = false;
nextTick(() => {
index.value = i;
previewShow.value = true;
});
}
</script>
<style lang="scss">
.create_land_attrs_content_ {
.custom_attrs_upload_content_lx {
display: grid;
flex-wrap: wrap;
grid-template-columns: repeat(var(--columns), 1fr);
box-sizing: border-box;
gap: 20px;
.custom-form__uploader {
> div {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
box-sizing: border-box;
}
> div {
aspect-ratio: 1 / 1;
}
.attrs_content__item {
aspect-ratio: 1 / 1;
box-sizing: border-box;
position: relative;
padding: 6px;

6
sub-government-affairs-service/src/views/landManage/component/landsManage/common/Attrs.vue
View File

@ -1,7 +1,7 @@
<template>
<section class="create_land_attrs_content_">
<el-upload
v-if="props.view != 'view'"
v-if="props.type != 'view'"
class="custom-form__uploader"
action=""
:show-file-list="false"
@ -13,7 +13,7 @@
</el-upload>
<div v-for="item in attrs_" :key="`attr_${item.uid}`" class="attrs_content__item">
<img :src="item.url" :alt="item.name" style="" />
<el-icon v-if="props.view != 'view'" class="clear_btn" @click="handleClearAttr(item.uid)"><CircleCloseFilled /></el-icon>
<el-icon v-if="props.type != 'view'" class="clear_btn" @click="handleClearAttr(item.uid)"><CircleCloseFilled /></el-icon>
</div>
</section>
</template>
@ -27,7 +27,7 @@ const props = defineProps({
type: String,
default: 'image/*',
},
view: {
type: {
type: String,
default: 'view',
},

6
sub-government-affairs-service/src/views/landManage/component/landsManage/index.vue
View File

@ -39,16 +39,16 @@
</el-popconfirm>
</template>
<template #propertyCertificateUrl-form="{ type }">
<Attrs v-model:attrs="attrs" :view="type" />
<Attrs v-model:attrs="attrs" :type="type" />
</template>
<template #landCertificateUrl-form="{ type }">
<Attrs v-model:attrs="landOwnerAttrs" :view="type" />
<Attrs v-model:attrs="landOwnerAttrs" :type="type" />
</template>
<template #coordinate-form>
<avue-input-map v-model="local" :params="params" placeholder="请选择位置"></avue-input-map>
</template>
<template #landUrl-form="{ type }">
<Attrs v-model:attrs="landAttrs" :view="type" />
<Attrs v-model:attrs="landAttrs" :type="type" />
</template>
</avue-crud>
<custom-import-excel