You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

301 lines
9.8 KiB

<template>
<div>
<el-row :gutter="15">
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
<el-col :span="24">
<el-form-item label="试剂名称" prop="name">
<!-- <el-input v-model="formData.name" placeholder="请输入试剂名称" clearable :style="{width: '100%'}" /> -->
<el-autocomplete
v-model="formData.value"
class="inline-input"
:style="{width: '100%'}"
:fetch-suggestions="querySearchAsync"
clearable
placeholder="请输入试剂名称"
@select="handleSelect"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="英文名称" prop="english_name">
<el-input
v-model="formData.english_name"
placeholder="请输入英文名称"
clearable
:style="{width: '100%'}"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="条形编码" prop="field105">-->
<!-- <el-input v-model="formData.field105" placeholder="请输入条形编码" clearable :style="{width: '100%'}" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="12">
<el-form-item label="CAS码" prop="cas_number">
<el-input
v-model="formData.cas_number"
placeholder="请输入CAS码"
clearable
:style="{width: '100%'}"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="试剂纯度" prop="purity">
<el-input v-model="formData.purity" placeholder="请输入试剂纯度" clearable :style="{width: '100%'}" />
</el-form-item>
</el-col>
<el-col>
<el-form-item label="导入数量" prop="export_count">
<el-input v-model.number="formData.export_count" placeholder="请输入导入数量" clearable :style="{width: '100%'}" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="生产日期" prop="production_date">
<el-date-picker
v-model="formData.production_date"
type="datetime"
clearable
placeholder="请选择生产日期"
value-format="yyyy-MM-dd HH:mm:ss"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="过期日期" prop="expiration_date">
<el-date-picker
v-model="formData.expiration_date"
type="datetime"
clearable
placeholder="选择过期日期"
value-format="yyyy-MM-dd HH:mm:ss"
/>
</el-form-item>
</el-col>
<!-- <el-col>-->
<!-- <el-form-item label="保质期" prop="field113">-->
<!-- <el-input v-model="formData.field113" placeholder="请输入保质期" clearable :style="{width: '100%'}" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="12">
<el-form-item label="生产厂家" prop="manufacturer">
<el-input
v-model="formData.manufacturer"
placeholder="请输入生产厂家"
clearable
:style="{width: '100%'}"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="经销商" prop="distributor">
<el-input
v-model="formData.distributor"
placeholder="请输入经销商"
clearable
:style="{width: '100%'}"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="规格" prop="speci">
<el-input v-model="formData.speci" placeholder="请输入规格" clearable :style="{width: '100%'}" />
</el-form-item>
</el-col>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="规格单位" prop="field118">-->
<!-- <el-input v-model="formData.field118" placeholder="请输入规格单位" clearable :style="{width: '100%'}" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="12">
<el-form-item label="单位" prop="net_weight_unit">
<el-input v-model="formData.net_weight_unit" placeholder="请输入单位" clearable :style="{width: '100%'}" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="预估质量" prop="total">
<el-input v-model="formData.total" placeholder="请输入预估质量" clearable :style="{width: '100%'}" />
</el-form-item>
</el-col>
<el-col v-for="item in extra_form" :key="item.id" :span="12">
<el-form-item :label="item.name" :prop="item.name">
<el-input v-model="formData[item.name]" :placeholder="'请输入' + item.name " clearable :style="{width: '100%'}" />
</el-form-item>
</el-col>
</el-form>
</el-row>
<div style="text-align: center">
<el-button type="primary" @click="handleConfirm"></el-button>
</div>
</div>
</template>
<script>
import { throttle } from '@/utils'
import { get_use } from '@/api/reagent/customform'
import { get_drug_group_list } from '@/api/reagent/warehousing'
export default {
name: 'ReagentForm',
// title dialog title
// propsFormData原来试剂信息
// innerVisible控制显示不显示
// closeform 将数据传递出去当数据为bool时关闭当数据为obj时提交form
// eslint-disable-next-line vue/require-prop-types
props: ['propsformdata', 'handlefunc'],
data() {
return {
formData: {},
loadAll: [],
rules: {
name: [{
required: true,
message: '请输入试剂名称',
trigger: 'blur'
}],
english_name: [],
cas_number: [{
required: true,
message: '请输入CAS码',
trigger: 'blur'
}],
purity: [{
required: true,
message: '请输入试剂纯度',
trigger: 'blur'
}],
export_count: [{
required: true,
message: '请输入导入数量',
trigger: 'blur',
type: 'number'
}],
production_date: [{
required: true,
message: '请输入生产日期',
trigger: 'blur'
}],
expiration_date: [{
required: true,
message: '请输入过期日期',
trigger: 'blur'
}],
manufacturer: [],
distributor: [],
speci: [{
required: true,
message: '请输入规格',
trigger: 'blur'
}],
total: [{
required: true,
message: '请输入单位',
trigger: 'blur'
}],
net_weight_unit: [{
required: true,
message: '请输入预估质量',
trigger: 'blur'
}
]
},
extra_form: []
}
},
watch: {
propsformdata: {
handler(newValue, oldValue) {
this.formData = { ...newValue }
},
deep: true,
immediate: true
}
},
created() {
get_use().then(res => {
this.extra_form = res.data
})
this.drugList()
},
methods: {
drugList() {
get_drug_group_list().then(
res => {
if (res.status === 0) {
this.loadAll = res.data
}
})
},
querySearchAsync(queryString, cb) {
var restaurants = this.loadAll
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
clearTimeout(this.timeout)
cb(results)
},
createStateFilter(queryString) {
return (state) => {
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 1)
}
},
handleSelect(item) {
console.log(item)
this.formData = item
this.formData.name = item.value
},
isNumber(val) {
const regPos = /^\d+(\.\d+)?$/
const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
return regPos.test(val) || regNeg.test(val)
},
handleConfirm: throttle(function() {
// 刷新试剂列表展示
this.drugList()
this.$refs['elForm'].validate(valid => {
if (valid) {
// 时间格式处理
let tempDate = this.formData.production_date
if (typeof (this.formData.production_date) === 'string') {
tempDate = this.strToDate(this.formData.production_date)
}
let temDate = this.formData.expiration_date
if (temDate && typeof (this.formData.expiration_date) === 'string') {
temDate = this.strToDate(this.formData.expiration_date)
}
if (temDate && tempDate) {
// 计算过期时间
const diff = temDate.getTime() - tempDate.getTime()
this.formData.shelf_life = Math.trunc(diff / (60 * 60 * 24 * 1000))
} else {
this.formData.shelf_life = 0
}
// this.formData['name'] = this.formData.value
//
this.$set(this.formData, 'name', this.formData.value)
// delete this.formData['value']
console.log(this.formData, '-----------------------')
this.$emit('handlefunc', this.formData)
}
if (!valid) return
})
}, 2000),
// 字符串转日期
strToDate(datestr) {
return new Date(datestr)
},
resetForm() {
this.$refs['elForm'].resetFields()
}
}
}
</script>
<style>
</style>