152 lines
4.3 KiB
Vue
152 lines
4.3 KiB
Vue
<template>
|
|
<div class="purchaser-popup-warp">
|
|
<el-dialog v-model="isShow" title="采购报价" width="800" :before-close="doCancel">
|
|
<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="auto" class="custom-form">
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="商品分类" prop="typeId">
|
|
<el-cascader v-model="ruleForm.typeId" :options="treeList" :props="treeOption" clearable :placeholder="'请选择分类'" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="收购价格" prop="price">
|
|
<el-input-number v-model="ruleForm.price" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="采购商品" prop="goods">
|
|
<el-input v-model="ruleForm.goods" style="width: 200px" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<el-form-item label="收购数量" prop="num">
|
|
<el-input-number v-model="ruleForm.num" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="收货地址" prop="addr">
|
|
<el-input v-model="ruleForm.addr" :rows="2" type="textarea" :placeholder="'收货地址'" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label=" " prop="isPickup">
|
|
<el-radio-group v-model="ruleForm.isPickup">
|
|
<el-radio v-for="(n, index) in pickupOptions" :key="index" :value="n.value">{{ n.label }}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="采购说明" prop="remark">
|
|
<el-input v-model="ruleForm.remark" :rows="2" type="textarea" :placeholder="'采购说明'" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="doCancel">取消</el-button>
|
|
<el-button type="primary" @click="doSure"> 确定 </el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted, watch } from 'vue';
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { fa } from 'element-plus/es/locale/index.mjs';
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
});
|
|
|
|
let treeList = reactive([]);
|
|
let ruleForm = reactive({
|
|
typeId: '',
|
|
price: '',
|
|
goods: '',
|
|
num: '',
|
|
addr: '',
|
|
isPickup: 1,
|
|
remark: '',
|
|
});
|
|
|
|
const pickupOptions = reactive([
|
|
{ label: '可上门收货', value: 1 },
|
|
{ label: '不上门收货', value: 0 },
|
|
]);
|
|
|
|
let ruleFormRef = ref(null);
|
|
const treeOption = ref({
|
|
children: 'children',
|
|
label: 'title',
|
|
});
|
|
|
|
watch(
|
|
() => props.list,
|
|
() => {
|
|
treeList = props.list;
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
);
|
|
let isShow = ref(false);
|
|
const doShow = () => {
|
|
isShow.value = true;
|
|
};
|
|
|
|
const doHide = () => {
|
|
isShow.value = false;
|
|
};
|
|
|
|
const doCancel = () => {
|
|
doHide();
|
|
};
|
|
|
|
const doSure = () => {
|
|
doHide();
|
|
};
|
|
|
|
const rules = reactive({
|
|
typeId: [{ required: true, message: '请选择商品分类', trigger: ['blur', 'change'] }],
|
|
price: [{ required: true, message: '请输入采购价格', trigger: ['blur', 'change'] }],
|
|
goods: [{ required: true, message: '请输入采购商品', trigger: ['blur', 'change'] }],
|
|
num: [{ required: true, message: '请输入采购数量', trigger: ['blur', 'change'] }],
|
|
addr: [{ required: true, message: '请填入详细地址', trigger: ['blur', 'change'] }],
|
|
isPickup: [{ required: true, message: '请选择是否上门取货', trigger: ['blur', 'change'] }],
|
|
remark: [{ required: false, message: '请输入补充说明', trigger: ['blur', 'change'] }],
|
|
});
|
|
|
|
defineExpose({
|
|
doShow,
|
|
doHide,
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.purchaser-popup-warp {
|
|
}
|
|
.custom-form {
|
|
::v-deep() {
|
|
.el-form-item__label {
|
|
font-size: 18px !important;
|
|
color: $color-999 !important;
|
|
font-weight: 400 !important;
|
|
}
|
|
.el-radio__label {
|
|
font-size: 18px;
|
|
color: $color-333;
|
|
}
|
|
}
|
|
}
|
|
</style>
|