132 lines
4.4 KiB
Vue
132 lines
4.4 KiB
Vue
<template>
|
|
<AFormPanel
|
|
ref="formPanel"
|
|
:title="status === 'add' ? '新建产品' : '修改产品'"
|
|
:details-loader="detailsLoader"
|
|
:do-submit="doSubmit"
|
|
:rules="rules"
|
|
>
|
|
<template #default="{formData}">
|
|
<div class="form-items">
|
|
<ElFormItem label="图片" prop="picture">
|
|
<Uploader
|
|
ref="uploader"
|
|
v-model:file="formData.picture"/>
|
|
</ElFormItem>
|
|
<ElFormItem v-if="status !== 'add'" label="产品编码" prop="sn">
|
|
<ElInput v-model="formData.sn" placeholder="产品编码" readonly/>
|
|
</ElFormItem>
|
|
<ElFormItem label="产品分类" prop="goodsCategoryId">
|
|
<GoodsCategoryDropTable v-model="formData.goodsCategoryId"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="产品名称" prop="goodsName">
|
|
<ElInput v-model="formData.goodsName" :disabled="status === 'view'" placeholder="产品名称"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="规格" prop="specParams">
|
|
<ElInput v-model="formData.specParams" :disabled="status === 'view'" placeholder="规格"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="排序" prop="sort">
|
|
<ElInputNumber v-model="formData.sort" :disabled="status === 'view'" placeholder="请输入排序"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="计量单位" prop="unit">
|
|
<ADict v-model="formData.unit" :disabled="status === 'view'" dict-key="unit" placeholder="计量单位"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="是否可用" prop="canuse">
|
|
<el-switch v-model="formData.canuse" :disabled="status === 'view'"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="备注" prop="memo">
|
|
<ElInput v-model="formData.memo" :disabled="status === 'view'" placeholder="请输入备注"/>
|
|
</ElFormItem>
|
|
</div>
|
|
</template>
|
|
</AFormPanel>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import GoodsApi from '@/pages/gds/goods/goods-api.ts'
|
|
import Strings from '@/common/utils/strings.ts'
|
|
import { type FormRules } from 'element-plus'
|
|
import Uploader from '@/components/uploader/Uploader.vue'
|
|
import ADict from '@/components/a-dict/ADict.vue'
|
|
import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
|
|
import GoodsCategoryDropTable from '@/pages/gds/goods-category/GoodsCategoryDropTable.vue'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
research?: () => void
|
|
}>(), {
|
|
research: () => {
|
|
},
|
|
})
|
|
|
|
const formPanelIns = useTemplateRef<InstanceType<typeof AFormPanel>>('formPanel')
|
|
const uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')
|
|
const status = ref<'add' | 'view' | 'modify'>('add')
|
|
const rules = reactive<FormRules<GoodsTypes.SearchGoodsResult>>({
|
|
goodsCategoryId: [ {required: true, message: '请填写产品类型', trigger: 'blur'} ],
|
|
sn: [ {required: true, message: '请填写产品编码', trigger: 'blur'} ],
|
|
goodsName: [ {required: true, message: '请填写产品名称', trigger: 'blur'} ],
|
|
specParams: [ {required: true, message: '请填写规格', trigger: 'blur'} ],
|
|
picture: [ {required: true, message: '请填写图片', trigger: 'blur'} ],
|
|
unit: [ {required: true, message: '请填写计量单位', trigger: 'blur'} ],
|
|
sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
|
|
})
|
|
|
|
function detailsLoader(id?: string) {
|
|
if (Strings.isBlank(id)) {
|
|
status.value = 'add'
|
|
return Promise.resolve()
|
|
} else {
|
|
|
|
status.value = 'modify'
|
|
return GoodsApi
|
|
.detail(id!)
|
|
.then((res) => {
|
|
if (res.data.picture != null) uploaderIns.value?.setDefaultFiles([ res.data.picture ])
|
|
return res.data
|
|
})
|
|
}
|
|
}
|
|
|
|
function doSubmit(data: GoodsTypes.SearchGoodsResult) {
|
|
if (status.value === 'add') {
|
|
return GoodsApi.add(data)
|
|
.then(props.research)
|
|
} else if (status.value === 'modify') {
|
|
return GoodsApi.modify(data)
|
|
.then(props.research)
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
open(data: GoodsTypes.SearchGoodsResult = {}) {
|
|
formPanelIns.value?.open(data.id)
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.form-items {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-areas: "picture ." \
|
|
"picture ." \
|
|
"picture .";
|
|
|
|
:deep(.el-form-item) {
|
|
&:first-child {
|
|
align-items: start;
|
|
grid-area: picture
|
|
max-width 300px
|
|
|
|
.el-form-item__content {
|
|
justify-content center
|
|
}
|
|
}
|
|
|
|
&:last-child:nth-child(2n+1) {
|
|
grid-column: span 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|