359 lines
7.9 KiB
Vue
359 lines
7.9 KiB
Vue
<template>
|
|
<CustomCard>
|
|
<h2>农药基本信息</h2>
|
|
<TypeMenu v-model:type="_type" :types="pesticideData" />
|
|
<br />
|
|
<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 { 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('');
|
|
watch(
|
|
() => _type.value,
|
|
() => {
|
|
console.log(_type.value);
|
|
},
|
|
{
|
|
deep: true,
|
|
}
|
|
);
|
|
|
|
const crud = 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,
|
|
pageSize: 10,
|
|
});
|
|
const option = ref({
|
|
CRUD_OPTIONS,
|
|
selection: false,
|
|
labelWidth: 124,
|
|
editBtn: false,
|
|
delBtn: false,
|
|
column: [
|
|
{
|
|
prop: 'id',
|
|
label: '农药编号',
|
|
addDisplay: false,
|
|
editDisplay: false,
|
|
},
|
|
{
|
|
prop: 'name',
|
|
label: '名称',
|
|
editDisplay: false,
|
|
},
|
|
{
|
|
hide: true,
|
|
prop: 'code',
|
|
label: '产品标准证号',
|
|
viewDisplay: false,
|
|
editDisplay: false,
|
|
},
|
|
{
|
|
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: 'format',
|
|
label: '产品规格',
|
|
editDisplay: false,
|
|
},
|
|
{
|
|
prop: 'toxicity',
|
|
label: '毒性',
|
|
editDisplay: false,
|
|
},
|
|
{
|
|
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>
|
|
|
|
<style lang="scss" scoped>
|
|
h2 {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
font-family: '黑体';
|
|
}
|
|
</style>
|