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="left" :model="formData" :rules="rules" ref="uForm" labelWidth="100%">
                    <u-form-item label="商品图片" required prop="formData.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="formData.desc" borderBottom>
                        <u--textarea v-model="formData.desc" clearable :placeholder="descPlaceholder" count autoHeight
                            maxlength="250" height="100" confirmType="done"></u--textarea>
                    </u-form-item>
                    <u-form-item label="商品分类" required prop="formData.type" borderBottom>
                        <TabRadio :tabList="typeList" defaultActive="1" @tabChange="handleTabChangeType"></TabRadio>
                    </u-form-item>
                    <u-form-item label="品牌" required prop="formData.brand" class="u-form-item-row" borderBottom>
                        <FormSelectToPage :val="formData.brand" :url="brandToUrl" @handleClear="clear('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="formData.productCondition" borderBottom>
                        <TabRadio :tabList="productConditionList" defaultActive="2" :colNum="2"
                            @tabChange="handleTabChangeProductCondition"></TabRadio>
                    </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="formData.productAttribute" borderBottom>
                        <TabRadio :tabList="productAttributeList" defaultActive="2"
                            @tabChange="handleTabChangeProductAttribute"></TabRadio>
                    </u-form-item>
                    <u-form-item label="库存数量" required prop="formData.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.identifyingPerson" placeholder="请输入" clearable
                            border="none"></u--input>
                    </u-form-item>
                    <u-form-item label="回收类型" borderBottom>
                        <TabRadio :tabList="recycleTypeList" defaultActive="2" @tabChange="handleTabChangeRecycleType">
                        </TabRadio>
                    </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="formData.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>
            </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>
    </view>
</template>
<script>
import TabRadio from '@/components/custom-tab-radio/index.vue'
import FormSelectToPage from '@/components/form-select-to-page/index.vue'
export default {
    components: {
        TabRadio,
        FormSelectToPage,
    },
    data() {
        return {
            checkboxValue: [],

            formData: {
                imgs: [],
                desc: '',
                type: '',
                brand: '',
                series: '',
                model: '',
                caseMaterial: '',
                dialDiameter: '',
                material: '',
                size: '',
                yardage: '',
                price: '',
                productCondition: '',
                productNo: '',
                stock: 1,
                costPrice: '',
                samePrice: '',
                agentPrice: '',
                salePrice: '',
                productPosition: '',
                identifyingPerson: '',
                recycleType: '',
                recyclePerson: '',
                recycleBottomDesc: '',
                recycleTime: null,
                indentifyCode: '',
                targetAudience: '',
                productCard: '',
                cardYear: '',
                productTag: '',
                productAttachment: '',
                productDesc: '',
            },
            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,
            descPlaceholder: '95新 WHZ19219H CHANEL香奈儿链条单肩包 21开 牛皮 尺寸25 4 15 配件中溯卡',
            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',
                },
            ],
            brandToUrl: '/pages/wareHouse/brandList',
            // 上传
            goodPicFileList: [{ url: 'https://uviewui.com/swiper/1.jpg' }],//商品图片
            detailPicFileList: [],//细节图片
            detailVideoFileList: [],//细节视频
            recycleBottomFileList: [],//回收留底图
            productCardFileList: [],//商品保卡图片或独立编码照片留底
            productTagFileList: [],//商品标签图片留底
        }
    },
    methods: {
        handleTabChange(e) {
            console.log(e);
        },
        clear(key) {
            this.formData[key] = '';
        },
        // 商品成色
        handleTabChangeProductCondition(e) {
            console.log(e);
        },
        // 商品属性
        handleTabChangeProductAttribute(e) {
            console.log(e);
        },
        // 回收类型
        handleTabChangeRecycleType(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];
        },
    }
}
</script>
<style lang="scss" scoped>
@import './styles/add.scss';
</style>