oms/src/views/audit/materialAdd/index.vue

<template>
	<div class="detil">
		<by-tool :propConfig="toolConfig" />
		<div class="box-shadow">
			<by-form :propConfig="config" ref="form">
				<template v-slot:description>
					<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea">
					</el-input>
				</template>
				<template v-slot:radio>
					<el-radio v-model="radio" :label="1">单规格</el-radio>
					<el-radio v-model="radio" :label="2">多规格</el-radio>
				</template>

				<template v-slot:status>
					<el-radio v-model="radioStatus" :label="1">启用</el-radio>
					<el-radio v-model="radioStatus" :label="2">备用</el-radio>
					<el-radio v-model="radioStatus" :label="3">禁用</el-radio>
				</template>
				<template v-slot:ismakeup>
					<el-radio v-model="ismakeup" :label="1">是</el-radio>
					<el-radio v-model="ismakeup" :label="2">否</el-radio>
				</template>
				<template v-slot:issued>
					<el-radio v-model="issued" :label="1">是</el-radio>
					<el-radio v-model="issued" :label="2">否</el-radio>
				</template>
			</by-form>
		</div>
	</div>
</template>

<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import api from '@/api/material'
	@Component
	export default class DemoForm extends Vue {
		baseURL : any = process.env.VUE_APP_BASE_API
		radio : any = 1
		radioStatus : any = 1
		ismakeup : any = 1
		issued : any = 1
		textarea : any = ''
		toolConfig = {
			customTools: [
				{
					name: '保存', icon: 'el-icon-plus', audit: [''], event: {
						click: () => {
							(this as any).getFormData()
						}
					}
				}
			]
		}
		config = {
			attr: {
				size: 'small',
				rules: {
					name: [{
						required: true, message: '请输入名称', trigger: 'blur'
					}],
					shortName: [{
						required: true, message: '请输入简称', trigger: 'blur'
					}]
				}
			},
			columns: [
				[
					{
						span: 6,
						label: '名称',
						prop: 'name',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入名称',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '简称',
						prop: 'shortName',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入简称',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '财务编号',
						prop: 'accountingCode',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入财务编号',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '国际码',
						prop: 'nsCode',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入国际码',
								clearable: true
							}
						}
					},
				],
				[
					{
						span: 6,
						label: '基本售价',
						prop: 'basePrice',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入基本售价',
								clearable: true
							}
						}
					}, {
						span: 6,
						label: '市场价格',
						prop: 'markPrice',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入市场价格',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '价格',
						prop: 'price',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入价格(成交、成本价)',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '单位',
						prop: 'unit',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入单位',
								clearable: true
							}
						}
					},
				],

				[
					{
						span: 6,
						label: '重量',
						prop: 'weight',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入重量',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '保质期(天)',
						prop: 'shelfLife',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入保质期(天)',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '库存',
						prop: 'stock',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入库存',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '安全库存',
						prop: 'warningStock',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入安全库存',
								clearable: true
							}
						}
					}
				],
				[
					{
						span: 6,
						label: '货号',
						prop: 'itemNumber',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入货号',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '分类',
						prop: 'select',
						component: 'by-select',
						compConfig: {
							attr: {
								placeholder: '请选择数据',
								clearable: true,
							},
							request: '/maindata/maindataMaterialCategory/treeList'
						},
					},
					{
						span: 6,
						label: '虚拟分类',
						prop: 'select',
						component: 'by-select',
						compConfig: {
							attr: {
								placeholder: '请选择数据',
								clearable: true,
								data: [{
									value: '选项1',
									label: '黄金糕'
								}, {
									value: '选项2',
									label: '双皮奶'
								}, {
									value: '选项3',
									label: '蚵仔煎'
								}, {
									value: '选项4',
									label: '龙须面'
								}, {
									value: '选项5',
									label: '北京烤鸭'
								}]
							}
						}
					},
					{
						span: 6,
						label: '厂家物料',
						prop: 'factoryId',
						component: 'by-select',
						compConfig: {
							attr: {
								placeholder: '请选择数据',
								clearable: true,
								data: [{
									value: '选项1',
									label: '黄金糕'
								}, {
									value: '选项2',
									label: '双皮奶'
								}, {
									value: '选项3',
									label: '蚵仔煎'
								}, {
									value: '选项4',
									label: '龙须面'
								}, {
									value: '选项5',
									label: '北京烤鸭'
								}]
							}
						}
					}
				],
				[
					{
						span: 6,
						label: '机构商品分类',
						prop: 'select',
						component: 'by-select',
						compConfig: {
							attr: {
								placeholder: '请选择数据',
								clearable: true,
								data: [{
									value: '选项1',
									label: '黄金糕'
								}, {
									value: '选项2',
									label: '双皮奶'
								}, {
									value: '选项3',
									label: '蚵仔煎'
								}, {
									value: '选项4',
									label: '龙须面'
								}, {
									value: '选项5',
									label: '北京烤鸭'
								}]
							}
						}
					},
					{
						span: 6,
						label: '物料属性表',
						prop: 'select',
						component: 'by-select',
						compConfig: {
							attr: {
								placeholder: '请选择数据',
								clearable: true,
								data: [{
									value: '选项1',
									label: '黄金糕'
								}, {
									value: '选项2',
									label: '双皮奶'
								}, {
									value: '选项3',
									label: '蚵仔煎'
								}, {
									value: '选项4',
									label: '龙须面'
								}, {
									value: '选项5',
									label: '北京烤鸭'
								}]
							}
						}
					}
				],
				[
					{
						span: 30,
						label: '描述',
						slot: true,
						prop: 'description',
					}
				],
				[
					{
						span: 20,
						label: '商品规格',
						slot: true,
						prop: 'radio',
					}
				],
				[
					{
						span: 20,
						label: '物料状态',
						slot: true,
						prop: 'status',
					}
				],
				[
					{
						span: 20,
						label: '是否组合商品',
						slot: true,
						prop: 'ismakeup',
					}
				],
				[
					{
						span: 20,
						label: '是否公布',
						slot: true,
						prop: 'issued',
					}
				],
			],
		}
		created() {
			// 获取机构商品分类
			api.institutionList({}).then((res : any) => {
				console.log('机构商品分类 ==> ', res);
			})
		}
		doSave() {
			this.getFormData()
		}
		getFormData() {
			(this as any).$refs.form.validate().then(() => {
				let data : any = (this as any).$refs.form.getValue();
				data.description = this.textarea;
				data.status = this.radioStatus;
				data.ismakeup = this.ismakeup;
				data.issued = this.issued;
				api.save(data).then((res : any) => {
					if (res.code === 200) {
						(this as any).$tab.closeOpenPage('/materialFile/productManagement')
						this.$message({ type: 'success', message: res.msg })
					}
				})
			});
		}
	}
</script>

<style lang="scss" scoped>
	.detil {
		padding: 20px;

		.box-shadow {
			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
			padding: 20px;
			border-radius: 4px;
			border: 1px solid #e6ebf5;
			background-color: #fff;
			overflow: hidden;
			color: #303133;
			-webkit-transition: .3s;
			transition: .3s;
			margin-top: 20px;
		}
	}
</style>