crm-app-vue3/pages/wareHouse/add.vue

<template>
    <view>
        <view class="add_page">
            <u-navbar class="nav-bar" title="商品入库" :autoBack="true" :placeholder="true" v-hideNav>
                <view class="u-nav-slot" slot="right">
                    <u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
                        <u-checkbox label="连续入库" name="continuous"></u-checkbox>
                    </u-checkbox-group>
                </view>
            </u-navbar>
            <view class="form_list">
                <u--form labelPosition="top" :model="formData" :rules="rules" ref="addForm" labelWidth="100%">
                    <u-form-item borderBottom class="u-form-item-col">
                        <u--textarea v-model="recognitionContent" placeholder='品牌：浪琴
来源：【麒麟】私信-杰3-3
实价：6500
型号：L2.257.5.89.7
编码：52356065
日期：2021.11.09
备注：全套
付款方式：线上' confirmType="done" height="170" :maxlength="-1" @blur='handleRecognition'>
                        </u--textarea>
                        <u-button text="粘贴识别" @click="handleRecognition"></u-button>
                    </u-form-item>
                    <u-form-item label="商品图片" required prop="imgs" borderBottom>
                        <u-upload :fileList="goodPicFileList" @afterRead="afterReadGoodPic" @delete="deleteGoodPic"
                            name="3" multiple :maxCount="9" :previewFullImage="true"></u-upload>
                    </u-form-item>
                    <u-form-item label="商品描述（详细的描述让用户更好的了解您的产品）" required prop="desc" borderBottom>
                        <u--textarea v-model="formData.desc" clearable placeholder="95新 WHZ19219H
                        CHANEL香奈儿链条单肩包
                        21开 牛皮 尺寸25 4 15
                        配件中溯卡" count autoHeight maxlength="250" height="100" confirmType="done"></u--textarea>
                    </u-form-item>
                    <u-form-item label="商品分类" required prop="type" borderBottom>
                        <TabSelect :tabList="typeList" @tabChange="handleTabChangeType" :colNum="4" mode="single">
                        </TabSelect>
                    </u-form-item>
                    <u-form-item label="品牌" required prop="brand" class="u-form-item-row" borderBottom @click="showBrandList">
                        <FormSelectToPage :val="formData.brand"></FormSelectToPage>
                    </u-form-item>
                    <u-form-item label="系列" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.series" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="型号" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.model" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="机芯类型" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.brand" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="表壳材质" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.caseMaterial" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="表盘直径" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.dialDiameter" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="材质" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.material" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="尺寸" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.size" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="尺码" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.yardage" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="官方指导价" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.price" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="商品成色" required prop="productCondition" borderBottom>
                        <TabSelect :tabList="productConditionList" :colNum="2" mode="single"
                            @tabChange="handleTabChangeProductCondition"></TabSelect>
                    </u-form-item>
                    <u-form-item label="细节图" borderBottom>
                        <u-upload :fileList="detailVideoFileList" @afterRead="afterReadDeatilVideo"
                            @delete="deleteDetailVideo" name="2" multiple :maxCount="10" accept="video"></u-upload>
                        <u-upload :fileList="detailPicFileList" @afterRead="afterReadDetailPic"
                            @delete="deleteDetailPic" name="1" multiple :maxCount="10"></u-upload>
                    </u-form-item>
                    <u-form-item label="商品标题" borderBottom>
                        <u--textarea v-model="formData.title" clearable :placeholder="titlePlaceholder" count autoHeight
                            maxlength="50" height="100" confirmType="done"></u--textarea>
                    </u-form-item>
                    <u-form-item label="商品货号" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.productNo" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="商品属性" required prop="productAttribute" borderBottom>
                        <TabSelect :tabList="productAttributeList" :colNum="4" mode="single"
                            @tabChange="handleTabChangeProductAttribute"></TabSelect>
                    </u-form-item>
                    <u-form-item label="库存数量" required prop="stock" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.stock" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="总成本价" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.costPrice" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="同行价格" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.samePrice" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="代理价格" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.agentPrice" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="销售价格" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.salePrice" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="商品位置" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.productPosition" placeholder="请输入" clearable
                            border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="手表年份" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.watchYear" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="鉴定人员" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.identifyingPerson" placeholder="请输入" clearable
                            border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="回收类型" borderBottom>
                        <TabSelect :tabList="recycleTypeList" :colNum="4" mode="single"
                            @tabChange="handleTabChangeRecycleType">
                        </TabSelect>
                    </u-form-item>
                    <u-form-item label="回收人员" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.recyclePerson" disabled clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="回收留底图" borderBottom>
                        <view class="recycle_bottom_desc">
                            <u--textarea v-model="formData.recycleBottomDesc" clearable count autoHeight maxlength="250"
                                height="100" confirmType="done"></u--textarea>
                            <u-upload :fileList="recycleBottomFileList" @afterRead="afterReadRecycleBottom"
                                @delete="deleteRecycleBottom" name="1" multiple :maxCount="1" accept="image"></u-upload>
                        </view>
                    </u-form-item>
                    <u-form-item label="回收时间" required prop="recycleTime" class="u-form-item-row" borderBottom
                        @click="clickRecycleTimeRow">
                        <FormSelectToPage :val="formData.recycleTime" @deleteItem.stop="clear('recycleTime')">
                        </FormSelectToPage>
                        <u-datetime-picker @confirm="confirmRecycleTime" @close="closeRecycleTimePicker"
                            @cancel="closeRecycleTimePicker" :show="recycleTimeShow" v-model="formData.recycleTime"
                            mode="date"></u-datetime-picker>
                    </u-form-item>
                    <u-form-item label="独立编码" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.indentifyCode" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="适用人群" class="u-form-item-row" borderBottom>
                        <u-radio-group v-model="formData.targetAudience" placement="row">
                            <u-radio activeColor="#3c9cff" name="general" label="通用"></u-radio>
                            <u-radio activeColor="#3c9cff" name="man" label="男"></u-radio>
                            <u-radio activeColor="#3c9cff" name="woman" label="女"></u-radio>
                        </u-radio-group>
                    </u-form-item>
                    <u-form-item label="商品保卡" class="u-form-item-row" borderBottom>
                        <u-radio-group v-model="formData.productCard" placement="row">
                            <u-radio activeColor="#3c9cff" name="has" label="有保卡"></u-radio>
                            <u-radio activeColor="#3c9cff" name="no" label="无保卡"></u-radio>
                        </u-radio-group>
                    </u-form-item>
                    <u-form-item label="保卡年份" class="u-form-item-row" borderBottom
                        v-if="formData.productCard === 'has'">
                        <u--input v-model="formData.cardYear" placeholder="不填写默认空白保卡" clearable
                            border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="保卡图片或独立编码照片留底(仅内部人员可见)" borderBottom>
                        <u-upload :fileList="productCardFileList" @afterRead="afterReadProductCard"
                            @delete="deleteProductCard" name="3" multiple :maxCount="9"
                            :previewFullImage="true"></u-upload>
                    </u-form-item>
                    <u-form-item label="商品标签" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.productTag" placeholder="请输入" clearable border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="商品附件" class="u-form-item-row" borderBottom>
                        <u--input v-model="formData.productAttachment" placeholder="请输入" clearable
                            border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="备注(仅内部人员可见)">
                        <view class="recycle_bottom_desc">
                            <u--textarea v-model="formData.productDesc" clearable count autoHeight maxlength="250"
                                height="100" confirmType="done"></u--textarea>
                            <u-upload :fileList="productCardFileList" @afterRead="afterReadProductCard"
                                @delete="deleteProductCard" name="1" multiple :maxCount="1" accept="image"></u-upload>
                        </view>
                    </u-form-item>
                    <u-form-item label="付款方式" borderBottom>
                        <TabSelect :tabList="paymentTabList" :colNum="4" mode="single"
                            @tabChange="handlePaymentTabChange">
                        </TabSelect>
                    </u-form-item>
                </u--form>
            </view>

        </view>
        <view class="btn_group">
            <u-button plain type="primary" @click="submitForm('onlyIn')">仅入库</u-button>
            <u-button type="primary" @click="submitForm('inAndUp')">入库并上架</u-button>
        </view>
        <BrandList ref="brandListRef" @selectedBrand="handleSelectedBrand"></BrandList>
    </view>
</template>
<script>
import TabSelect from '@/components/custom-tab-select/index.vue'
import FormSelectToPage from '@/components/form-select-to-page/index.vue'
import BrandList from '@/components/brand-list/index.vue'
export default {
    components: {
        TabSelect,
        FormSelectToPage,
        BrandList,
    },
    data() {
        return {
            checkboxValue: [],
            recognitionContent: '',
            formData: {
                imgs: [],
                desc: '',
                type: '',
                brand: '',
                brandId: '',
                series: '',
                model: '',
                caseMaterial: '',
                dialDiameter: '',
                material: '',
                size: '',
                yardage: '',
                price: '',
                productCondition: '',
                productNo: '',
                stock: null,
                costPrice: '',
                samePrice: '',
                agentPrice: '',
                salePrice: '',
                productPosition: '',
                watchYear: '',
                identifyingPerson: '',
                recycleType: '',
                recyclePerson: '',
                recycleBottomDesc: '',
                recycleTime: null,
                indentifyCode: '',
                targetAudience: '',
                productCard: '',
                cardYear: '',
                productTag: '',
                productAttachment: '',
                productDesc: '',
                paymentType: '',
            },
            rules: {
                imgs: [
                    { required: true, message: '请上传商品图片', trigger: 'blur' },
                ],
                desc: [
                    { required: true, message: '请输入商品描述', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请选择商品分类', trigger: 'blur' },
                ],
                brand: [
                    { required: true, message: '请选择品牌', trigger: 'blur' },
                ],
                productCondition: [
                    { required: true, message: '请选择商品成色', trigger: 'blur' },
                ],
                productAttribute: [
                    { required: true, message: '请选择商品属性', trigger: 'blur' },
                ],
                stock: [
                    { required: true, message: '请输入库存数量', trigger: 'blur' },
                ],
                recycleTime: [
                    { required: true, message: '请选择回收时间', trigger: 'blur' },
                ],

            },
            recycleTimeShow: false,
            titlePlaceholder: '如不填，自动截取商品描述前50字',
            typeList: [
                {
                    name: '腕表',
                    value: '1',
                },
                {
                    name: '箱包',
                    value: '2',
                },
                {
                    name: '珠宝',
                    value: '3',
                },
                {
                    name: '鞋靴',
                    value: '4',
                },
                {
                    name: '配饰',
                    value: '5',
                },
                {
                    name: '服饰',
                    value: '6',
                },
                {
                    name: '其他',
                    value: '7',
                },
            ],
            productConditionList: [
                {
                    name: '闲置未使用',
                    value: '1',
                },
                {
                    name: '二手',
                    value: '2',
                },
            ],
            productAttributeList: [
                {
                    name: '自有商品',
                    value: '1',
                },
                {
                    name: '寄卖商品',
                    value: '2',
                },
                {
                    name: '质押商品',
                    value: '3',
                },
                {
                    name: '其它',
                    value: '4',
                },
            ],
            recycleTypeList: [
                {
                    name: '其它',
                    value: '1',
                },
                {
                    name: '线上',
                    value: '2',
                },
                {
                    name: '同行',
                    value: '3',
                },
                {
                    name: '门店',
                    value: '4',
                },
            ],
            paymentTabList: [
                {
                    name: '微信',
                    value: 1,
                },
                {
                    name: '支付宝',
                    value: 2,
                },
                {
                    name: '银行卡',
                    value: 3,
                },
                {
                    name: '现金',
                    value: 4,
                },
                {
                    name: '数字货币',
                    value: 5,
                },
                {
                    name: '挂账',
                    value: 6,
                },
            ],
            brandToUrl: '/pages/wareHouse/brandList',
            // 上传
            goodPicFileList: [{ url: 'https://uviewui.com/swiper/1.jpg' }],//商品图片
            detailPicFileList: [],//细节图片
            detailVideoFileList: [],//细节视频
            recycleBottomFileList: [],//回收留底图
            productCardFileList: [],//商品保卡图片或独立编码照片留底
            productTagFileList: [],//商品标签图片留底
        }
    },
    methods: {
        handleSelectedBrand(info) {
            this.formData.brand = info.dictLabel;
            this.formData.brandId = info.dictValue;
        },
        // 显示品牌列表
        showBrandList() {
            this.$refs.brandListRef.showBrandList();
        },
        submitForm() {
            this.$refs.addForm.validate().then((valid) => {
                if (valid) {
                    console.log('表单校验通过');
                } else {
                    console.log('表单校验不通过');
                }
            });
        },
        handleTabChange(e) {
            console.log(e);
        },
        clear(key) {
            this.formData[key] = '';
        },
        // 商品分类
        handleTabChangeType(e) {
            this.formData.type = e;
            console.log(e, this.formData.type);
            this.$refs.addForm.validateField('type')
        },
        // 商品成色
        handleTabChangeProductCondition(e) {
            this.formData.productCondition = e;
            this.$refs.addForm.validateField('productCondition')
        },
        // 商品属性
        handleTabChangeProductAttribute(e) {
            this.formData.productAttribute = e;
            this.$refs.addForm.validateField('productAttribute')
        },
        // 回收类型
        handleTabChangeRecycleType(e) {
            this.formData.recycleType = e;
        },
        // 付款方式
        handlePaymentTabChange(e) {
            console.log(e);
        },
        clickRecycleTimeRow() {
            this.recycleTimeShow = true;
        },
        confirmRecycleTime(val) {
            this.formData.recycleTime = this.$dayjs(val.value).format('YYYY-MM-DD');
            console.log(val, this.formData.recycleTime);
            this.recycleTimeShow = false;
        },
        closeRecycleTimePicker(val) {
            console.log(val);
            this.recycleTimeShow = false;
        },
        cancelRecycleTimePicker(val) {
            console.log(val);
            this.recycleTimeShow = false;
        },
        recycleTimeFormatter(value) {
            if (value) {
                console.log(value);

            }
            return ''
        },
        // 删除商品图片
        deleteGoodPic(event) {
            console.log(event);
            // this[`fileList${event.name}`].splice(event.index, 1);
        },
        // 新增商品图片
        async afterReadGoodPic(event) {
            console.log(event);
            // this.fileList = [...this.fileList, ...event.fileList];
        },
        // 删除细节视频
        deleteVideo(event) {
            console.log(event);
            // this[`fileList${event.name}`].splice(event.index, 1);
        },
        // 新增细节视频
        async afterReadVideo(event) {
            console.log(event);
            // this.fileList2 = [...this.fileList2, ...event.fileList];
        },
        // 删除细节图片
        deleteDetailPic(event) {
            console.log(event);
            // this[`fileList${event.name}`].splice(event.index, 1);
        },
        // 新增细节图片
        async afterReadDetailPic(event) {
            console.log(event);
            // this.fileList1 = [...this.fileList1, ...event.fileList];
        },
        // 删除回收留底图
        deleteRecycleBottom(event) {
            console.log(event);
            // this[`fileList${event.name}`].splice(event.index, 1);
        },
        // 新增回收留底图
        async afterReadRecycleBottom(event) {
            console.log(event);
            // this.fileList3 = [...this.fileList3, ...event.fileList];
        },
        // 删除商品保卡图片或独立编码照片留底
        deleteProductCard(event) {
            console.log(event);
            // this[`fileList${event.name}`].splice(event.index, 1);
        },
        // 新增商品保卡图片或独立编码照片留底
        async afterReadProductCard(event) {
            console.log(event);
            // this.fileList4 = [...this.fileList4, ...event.fileList];
        },
        // 删除商品标签图片留底
        deleteProductTag(event) {
            console.log(event);
            // this[`fileList${event.name}`].splice(event.index, 1);
        },
        // 新增商品标签图片留底
        async afterReadProductTag(event) {
            console.log(event);
            // this.fileList5 = [...this.fileList5, ...event.fileList];
        },
        async handleRecognition() {
            // 品牌：浪琴
            // 来源：【麒麟】私信-杰3-3
            // 实价：6500
            // 型号：L2.257.5.89.7
            // 编码：52356065
            // 日期：2021.11.09
            // 备注：全套
            // 付款方式：线上
            if (!this.recognitionContent) {
                return;
            }
            try {
                uni.$u.toast("识别成功");
            } catch (e) {
                uni.$u.toast("文本识别异常");
            }
        },
    }
}
</script>
<style lang="scss" scoped>
@import './styles/add.scss';
</style>