web/src/components/inventory/supplier/AddSupplier.vue

122 lines
3.7 KiB
Vue

<template>
<Mask :width="540" :height="603" :is-show="isShow" @close="close" :title="id?'编辑':'添加供应商'" :show-footer="true">
<div class="add-supplier" style="width:100%;margin-top: 24px;padding: 0 24px">
<div class="form">
<el-form style="width: 100%" ref="ruleFormRef" :model="formData" :inline=true label-position="top">
<el-form-item label="供货商名称" style="width: 100%;margin-right: 0">
<el-input style="width: 100%" v-model="formData.name" placeholder="请输入供货商名称"></el-input>
</el-form-item>
<el-row style="width: 100%">
<el-col :span="12">
<el-form-item label="启用状态">
<el-radio-group v-model="formData.turn" size="large">
<el-radio-button label="禁用" :value="0"/>
<el-radio-button label="启用" :value="1"/>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="许可证号" style="margin-right: 0">
<el-input v-model="formData.licenseCode" placeholder="请输入许可证号"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row style="width: 100%">
<el-col :span="12">
<el-form-item label="联系人">
<el-input v-model="formData.contactName" placeholder="请输入联系人名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系方式" style="margin-right: 0">
<el-input v-model="formData.contactTel" placeholder="请输入联系方式"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="备注" style="margin-right: 0;width: 100%">
<el-input v-model="formData.reamark"
type="textarea" rows="5"
max="200"
show-word-limit
placeholder="请输入备注"
style="width: 100%"
>
</el-input>
</el-form-item>
</el-form>
</div>
</div>
<template #footer>
<div class="bottom">
<span class="small-btn" @click="close">取消</span>
<span class="small-btn" @click="save">确定</span>
</div>
</template>
</Mask>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {post} from "@/utils/request.ts";
import CloseBtn from "@/components/CloseBtn.vue";
import Mask from "@/components/common/Mask.vue";
const formData = ref({
name: null,
turn: 1,
contactName: null,
contactTel: null,
reamark: null,
licenseCode: null,
})
const errorMsg = ref('')
const isShow = ref(false)
const emit = defineEmits(['close'])
const save = () => {
if (formData.value.name === '' || formData.value.name === null) {
errorMsg.value = '供货商名称不能为空'
return
}
post("inventory/supplier/save", {inventorySupplier: formData.value}).then((res: any) => {
close()
})
}
const id = ref<any>(null)
const editInit = (supplierData: any) => {
isShow.value = true
id.value = supplierData.id
formData.value = supplierData
}
const addInit = () => {
isShow.value = true
}
defineExpose({addInit, editInit})
const close = () => {
formData.value = {
name: null,
turn: 1,
contactName: null,
contactTel: null,
reamark: null,
licenseCode: null,
}
errorMsg.value = ''
isShow.value = false
id.value = null
emit('close')
}
</script>
<style scoped lang="scss">
.bottom {
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 24px;
}
</style>