feat(xumu): 添加远程耳标号查询功能

- 在 AppDeathManage 和 AppOutManage 组件中集成 AiEartagRemote 组件
- 实现耳标号远程查询和自动填充功能
-优化用户输入体验,提高数据准确性
This commit is contained in:
aixianling
2025-01-09 15:09:28 +08:00
parent ce64bfd54d
commit f0a32ad868
3 changed files with 90 additions and 39 deletions

View File

@@ -1,5 +1,6 @@
<script>
import {mapState} from "vuex"
import AiEartagRemote from "@project/xumu/components/AiEartagRemote.vue";
const formImages = [
{label: "身长测量照片", prop: "heightPic", rules: {required: true, message: '请上传 身长测量照片'}},
@@ -9,6 +10,7 @@ const formImages = [
]
export default {
name: "deathAdd",
components: {AiEartagRemote},
props: {
instance: Function,
permissions: Function,
@@ -71,7 +73,10 @@ export default {
}
})
})
}
},
handlerAutocomplete(value) {
'biochipEarNumber|farmId|houseId|penId|electronicEarNumber|originalEarNumber|category|variety'.split("|").forEach(prop => this.$set(this.detail, prop, value[prop]))
},
},
created() {
this.getDetail(this.$route.query.id)
@@ -84,7 +89,7 @@ export default {
<el-form size="small" label-width="120px" :model="detail" ref="detail">
<ai-card title="基础信息">
<div class="grid c-4">
<ai-input class="row" v-model="detail.biochipEarNumber" placeholder="请输入耳标号按回车查询,或扫描耳标号" @input="getDetail"/>
<ai-eartag-remote :instance="instance" @enter="handlerAutocomplete" />
<el-form-item label="生物芯片耳标号">
<b v-text="detail.biochipEarNumber"/>
</el-form-item>
@@ -100,7 +105,7 @@ export default {
<el-form-item label="电子耳标号" prop="electronicEarNumber">
<b v-text="detail.electronicEarNumber"/>
</el-form-item>
<el-form-item label="原厂耳标号" prop="category">
<el-form-item label="原厂耳标号" prop="originalEarNumber">
<b v-text="detail.originalEarNumber"/>
</el-form-item>
<el-form-item label="类别" prop="category">

View File

@@ -1,14 +1,16 @@
<script>
import {mapState} from "vuex"
import { mapState } from "vuex"
import AiEartagRemote from "@project/xumu/components/AiEartagRemote.vue";
const formImages = [
{label: "身长测量照片", prop: "heightPic", rules: {required: true, message: '请上传 身长测量照片'}},
{label: "生物芯片照片", prop: "biochipPic", rules: {required: true, message: '请上传 生物芯片照片'}},
{label: "防疫耳标照片", prop: "preventionPic", rules: {required: true, message: '请上传 防疫耳标照片'}},
{label: "其他说明照片", prop: "otherPic", rules: {required: true, message: '请上传 其他说明照片'}},
{ label: "身长测量照片", prop: "heightPic", rules: { required: true, message: '请上传 身长测量照片' } },
{ label: "生物芯片照片", prop: "biochipPic", rules: { required: true, message: '请上传 生物芯片照片' } },
{ label: "防疫耳标照片", prop: "preventionPic", rules: { required: true, message: '请上传 防疫耳标照片' } },
{ label: "其他说明照片", prop: "otherPic", rules: { required: true, message: '请上传 其他说明照片' } },
]
export default {
name: "outAdd",
components: {AiEartagRemote},
props: {
instance: Function,
permissions: Function,
@@ -38,7 +40,7 @@ export default {
this.$router.push(params)
},
getDetail(id) {
return id && this.instance.post("/api/breed/out/page", {biochipEarNumber: id}).then(res => {
return id && this.instance.post("/api/breed/out/page", { biochipEarNumber: id }).then(res => {
if (res?.data?.records) {
const detail = res.data.records[0] || {}
if (detail.picture) {
@@ -46,15 +48,15 @@ export default {
detail[key] = value
})
}
return this.detail = {...detail}
return this.detail = { ...detail }
}
})
},
submit() {
this.$refs.detail.validate().then(() => {
const {biochipEarNumber, id, outTime, heightPic, biochipPic, preventionPic, otherPic, reason, remarks} = this.detail
const { biochipEarNumber, id, outTime, heightPic, biochipPic, preventionPic, otherPic, reason, remarks } = this.detail
this.instance.post("/api/breed/out/addOrEdit", {
biochipEarNumber, id, outTime, picture: {heightPic, biochipPic, preventionPic, otherPic}, reason, remarks
biochipEarNumber, id, outTime, picture: { heightPic, biochipPic, preventionPic, otherPic }, reason, remarks
}).then(res => {
if (res?.code == 0 && res?.data != 1) {
this.$confirm("是否返回列表页?", "提交成功").then(() => this.back()).catch(() => this.getDetail(biochipEarNumber))
@@ -64,15 +66,18 @@ export default {
},
handleAudit() {
this.$refs.form.validate().then(() => {
const {id} = this.detail
this.instance.post("/api/breed/out/audit", null, {params: {id, ...this.form}}).then(res => {
const { id } = this.detail
this.instance.post("/api/breed/out/audit", null, { params: { id, ...this.form } }).then(res => {
if (res?.code == 0) {
this.$message.success("操作成功")
this.back()
}
})
})
}
},
handlerAutocomplete(value) {
'biochipEarNumber|farmId|houseId|penId|electronicEarNumber|originalEarNumber|category|variety'.split("|").forEach(prop => this.$set(this.detail, prop, value[prop]))
},
},
created() {
this.dict.load("yesOrNo", "category", "variety", "outReason")
@@ -86,69 +91,70 @@ export default {
<el-form size="small" label-width="120px" :model="detail" ref="detail">
<ai-card title="基础信息">
<div class="grid c-4">
<ai-input class="row" v-model="filter" placeholder="请输入耳标号按回车查询,或扫描耳标号" @keyup.enter.native="getDetail(filter)"/>
<ai-eartag-remote :instance="instance" @enter="handlerAutocomplete" />
<el-form-item label="生物芯片耳标号">
<b v-text="detail.biochipEarNumber"/>
<b v-text="detail.biochipEarNumber" />
</el-form-item>
<el-form-item label="养殖场" prop="farmId">
<b v-text="detail.farmName"/>
<b v-text="detail.farmName" />
</el-form-item>
<el-form-item label="养殖舍" prop="houseId">
<b v-text="detail.houseName"/>
<b v-text="detail.houseName" />
</el-form-item>
<el-form-item label="养殖栏" prop="penId">
<b v-text="detail.penName"/>
<b v-text="detail.penName" />
</el-form-item>
<el-form-item label="电子耳标号" prop="electronicEarNumber">
<b v-text="detail.electronicEarNumber"/>
<b v-text="detail.electronicEarNumber" />
</el-form-item>
<el-form-item label="原厂耳标号" prop="category">
<b v-text="detail.originalEarNumber"/>
<el-form-item label="原厂耳标号" prop="originalEarNumber">
<b v-text="detail.originalEarNumber" />
</el-form-item>
<el-form-item label="类别" prop="category">
<b v-text="detail.category"/>
<b v-text="detail.category" />
</el-form-item>
<el-form-item label="品种" prop="variety">
<b v-text="detail.variety"/>
<b v-text="detail.variety" />
</el-form-item>
</div>
</ai-card>
<ai-card title="上传照片">
<div class="grid c-4">
<el-form-item v-for="(img,i) in formImages" :key="i" v-bind="img">
<ai-uploader v-if="isAdd||isEdit" v-model="detail[img.prop]" :instance="instance" :limit="1" value-is-url/>
<el-image :src="detail[img.prop]" :preview-src-list="[detail[img.prop]]" v-else/>
<el-form-item v-for="(img, i) in formImages" :key="i" v-bind="img">
<ai-uploader v-if="isAdd || isEdit" v-model="detail[img.prop]" :instance="instance" :limit="1" value-is-url />
<el-image :src="detail[img.prop]" :preview-src-list="[detail[img.prop]]" v-else />
</el-form-item>
</div>
</ai-card>
<ai-card title="淘汰录入">
<div class="grid">
<el-form-item label="淘汰日期" prop="outTime" :rules="[{required:true,message:'请选择淘汰日期'}]">
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-if="isAdd||isEdit" v-model="detail.outTime"/>
<b v-text="detail.outTime"/>
<el-form-item label="淘汰日期" prop="outTime" :rules="[{ required: true, message: '请选择淘汰日期' }]">
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-if="isAdd || isEdit" v-model="detail.outTime" />
<b v-text="detail.outTime" />
</el-form-item>
<el-form-item label="淘汰原因" prop="reason" :rules="[{required:true,message:'请选择淘汰原因'}]">
<ai-select v-if="isAdd||isEdit" v-model="detail.reason" dict="outReason"/>
<b v-text="detail.reason"/>
<el-form-item label="淘汰原因" prop="reason" :rules="[{ required: true, message: '请选择淘汰原因' }]">
<ai-select v-if="isAdd || isEdit" v-model="detail.reason" dict="outReason" />
<b v-text="detail.reason" />
</el-form-item>
<el-form-item label="备注" prop="remark" class="row">
<ai-input type="textarea" :row="3" v-model="detail.remark" :edit="isAdd||isEdit"/>
<ai-input type="textarea" :row="3" v-model="detail.remark" :edit="isAdd || isEdit" />
</el-form-item>
</div>
</ai-card>
<ai-card title="审批信息" v-if="isAuthing">
<el-form :model="form" size="small" ref="form" label-width="120px">
<el-form-item label="是否同意" prop="auditStatus" :rules="[{required:true,message:'请选择是否同意'}]">
<ai-select v-model="form.auditStatus" :select-list="[{dictValue: 2, dictName: '同意'}, {dictValue: 3, dictName: '不同意'}]"/>
<el-form-item label="是否同意" prop="auditStatus" :rules="[{ required: true, message: '请选择是否同意' }]">
<ai-select v-model="form.auditStatus"
:select-list="[{ dictValue: 2, dictName: '同意' }, { dictValue: 3, dictName: '不同意' }]" />
</el-form-item>
<el-form-item label="审批意见" prop="auditReason">
<el-input type="textarea" :row="3" v-model="form.auditReason" clearable placeholder="请输入"/>
<el-input type="textarea" :row="3" v-model="form.auditReason" clearable placeholder="请输入" />
</el-form-item>
</el-form>
</ai-card>
</el-form>
<div slot="footer">
<el-button type="primary" @click="submit" v-if="isAdd||isEdit">提交</el-button>
<el-button type="primary" @click="submit" v-if="isAdd || isEdit">提交</el-button>
<el-button type="primary" @click="handleAudit" v-if="isAuthing">提交</el-button>
<el-button @click="back">返回</el-button>
</div>

View File

@@ -0,0 +1,40 @@
<script>
export default {
name: "AiEartagRemote",
props: {
instance: Function
},
data() {
return {
value: "",
info: {}
}
},
methods: {
getText(biochipEarNumber) {
this.info = {}
return this.instance.post("/api/breed/earTag/page", null, { params: { biochipEarNumber } }).then(res => {
if (res?.data) {
this.info = res.data
this.$emit('enter', this.info)
}
})
}
}
}
</script>
<template>
<section class="AiEartagRemote">
<ai-input v-model="value" placeholder="请输入耳标号按回车查询,或扫描耳标号" @keyup.enter.native="getText(value)" />
</section>
</template>
<style scoped lang="scss">
.AiEartagRemote {
gap: 8px;
width: 100%;
}
</style>