243 lines
7.9 KiB
Vue
243 lines
7.9 KiB
Vue
<template>
|
||
<div class="purchaser-popup-warp">
|
||
<el-dialog v-model="isShow" title="" width="80%" :before-close="doCancel" style="border-radius: 16px; padding: 40px 80px">
|
||
<el-form ref="ruleFormRef" :model="ruleForm" status-icon 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>-->
|
||
<div style="display: flex; justify-content: flex-start">
|
||
<el-form-item label="分类名称：" prop="typeId" style="width: 50%">
|
||
<el-cascader
|
||
v-model="ruleForm.typeId"
|
||
:options="treeList"
|
||
:props="treeOption"
|
||
clearable
|
||
:placeholder="'请选择分类'"
|
||
style="width: 100%; border-radius: 10px; height: 30px"
|
||
/>
|
||
</el-form-item>
|
||
<div style="width: 5%"> </div>
|
||
<div class="inputs">
|
||
<span class="labels">收购价格：</span>
|
||
<input type="text" placeholder="请输入" />
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; justify-content: flex-start; text-align: left; margin-top: 20px">
|
||
<div class="inputs">
|
||
<span class="labels">采购商品：</span>
|
||
<input type="text" placeholder="请输入" />
|
||
</div>
|
||
<div style="width: 5%"> </div>
|
||
<div class="inputs unit">
|
||
<span class="labels">收购数量：</span>
|
||
<input type="text" placeholder="请输入" />
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; justify-content: flex-start; text-align: left; margin-top: 20px">
|
||
<div class="inputs">
|
||
<span class="labels">收货地址：</span>
|
||
<input type="text" placeholder="请输入" />
|
||
</div>
|
||
<div style="width: 5%"> </div>
|
||
<div class="inputs">
|
||
<el-radio-group v-model="formData.toHome">
|
||
<el-radio value="1" size="large">可上门收货</el-radio>
|
||
<el-radio value="0" size="large">不上门收货</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; justify-content: flex-start; text-align: left; margin-top: 20px">
|
||
<div class="inputs" style="width: 100%">
|
||
<span class="labels" style="width: 14%">收货地址：</span>
|
||
<el-input v-model="formData.address" maxlength="30" style="width: 100%" placeholder="请输入" show-word-limit type="textarea" />
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" style="height: 40px; width: 120px" @click="doSure"> 确认 </el-button>
|
||
<el-button style="height: 40px; width: 120px" @click="doCancel">取消</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 formData = ref({
|
||
toHome: '0',
|
||
address: '',
|
||
});
|
||
|
||
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>
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
}
|
||
.unit::after {
|
||
content: 'kg';
|
||
position: absolute;
|
||
right: 10px; /* 调整单位与输入框的距离 */
|
||
color: #000; /* 单位颜色 */
|
||
pointer-events: none; /* 防止单位遮挡输入框 */
|
||
}
|
||
.unit input {
|
||
}
|
||
.inputs {
|
||
color: #999999;
|
||
font-size: 18px;
|
||
width: 50%;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
.labels {
|
||
width: 25%;
|
||
margin-right: 10px;
|
||
}
|
||
input {
|
||
width: calc(74% - 20px);
|
||
border: 1px solid #999999;
|
||
border-radius: 10px;
|
||
height: 30px;
|
||
padding-left: 15px;
|
||
}
|
||
}
|
||
.purchaser-popup-warp {
|
||
}
|
||
.custom-form {
|
||
::v-deep() {
|
||
.el-form-item__label {
|
||
font-size: 18px !important;
|
||
font-weight: 400 !important;
|
||
color: $color-999 !important;
|
||
}
|
||
.el-radio__label {
|
||
font-size: 18px;
|
||
color: $color-333;
|
||
}
|
||
}
|
||
}
|
||
.el-input__inner {
|
||
height: 30px !important;
|
||
border-radius: 10px;
|
||
font-size: 18px;
|
||
color: #999999;
|
||
}
|
||
</style>
|