crm-app-vue3/pages/wareHouse/components/orderList/edit.vue

<template>
    <u-modal :show="show" :title="title" :showCancelButton="true" @cancel="hideModal" @confirm="confirmEdit">
        <view class="form-container">
            <u-form :model="info" ref="formRef" labelPosition="top">
                <u-form-item label="品牌" class="u-form-item-row" borderBottom @click="showBrandList" labelWidth="70">
                    <Cell :val="info.dictLabel" :isDelete="true" @handleClear="clear('brand')"></Cell>
                    <BrandList ref="brandListRef" @selectedBrand="handleSelectedBrand"></BrandList>
                </u-form-item>
                <u-form-item label="付款方式" borderBottom labelWidth="70">
                    <TabSelect :tabList="paymentTabList" :echoInfo="info.payType"
                        :colNum="3" mode="single"
                        :isClear="payTypeIsClear" @tabChange="handlePayTypeTabChange">
                    </TabSelect>
                </u-form-item>
                <u-form-item label="开单人" class="u-form-item-row" borderBottom labelWidth="70"
                    @click="showRecyclePersonPicker">
                    <Cell :val="info.recyclePerson" :isDelete="true" @handleClear="clear('recyclePerson')"></Cell>
                    <PersonPicker ref="recyclePersonPickerRef" title="请选择回收人员"
                        @selectPerson="handleSelectRecyclePerson">
                    </PersonPicker>
                </u-form-item>
                <u-form-item label="开单数量" class="u-form-item-row" labelWidth="70" borderBottom>
                    <u-number-box v-model="info.quantity" button-size="26"></u-number-box>
                </u-form-item>
                <u-form-item label="开单日期" class="u-form-item-row" labelWidth="70" borderBottom
                    @click="showOrderDatePicker">
                    <Cell :val="info.orderDate" :isDelete="true" @handleClear="clear('orderDate')"></Cell>
                    <u-datetime-picker @confirm="confirmOrderDate" @close="closeOrderDatePicker"
                        @cancel="closeOrderDatePicker" :show="orderDateShow" v-model="info.orderDate"
                        mode="date"></u-datetime-picker>
                </u-form-item>
                <u-form-item label="订单类型" borderBottom labelWidth="70">
                    <TabSelect :tabList="orderTypeList" :isClear="orderTypeIsClear" mode="single" :colNum="4"
                        :echoInfo="info.orderType" labelKey="dictLabel" valueKey="dictValue"
                        @tabChange="changeOrderType">
                    </TabSelect>
                </u-form-item>
                <u-form-item label="商品分类" labelWidth="70" borderBottom>
                    <TabSelect :tabList="typeList" :isClear="typeIsClear" @tabChange="handleTabChangeType"
                        labelKey="dictLabel" valueKey="dictValue" :colNum="4" mode="single" :echoInfo="info.type">
                    </TabSelect>
                </u-form-item>
                <u-form-item label="成交金额" class="u-form-item-row" labelWidth="70" borderBottom>
                    ￥<u--input v-model="info.dealPrice" placeholder="成交金额" border="none" type="number"></u--input>元
                </u-form-item>
                <u-form-item label="实收总计" class="u-form-item-row" labelWidth="70" borderBottom>
                    ￥<u--input v-model="info.amountReceived" placeholder="实收总计" border="none" type="number"></u--input>元
                </u-form-item>
                <u-form-item label="开单备注" labelWidth="70" borderBottom>
                    <u--textarea v-model="info.orderRemark" clearable placeholder="备注" count autoHeight maxlength="50"
                        height="100" confirmType="done"></u--textarea>
                </u-form-item>
                <u-form-item label="收货地址" labelWidth="70" borderBottom>
                    <u--textarea v-model="info.address" clearable placeholder="收货地址" count autoHeight maxlength="50"
                        height="100" confirmType="done"></u--textarea>
                </u-form-item>
                <u-form-item label="售后保障配置" labelWidth="100">
                    <TabSelect :tabList="afterSaleTabList" :echoInfo="info.afterSaleTab" mode="multiple" :colNum="2"
                        @tabChange="changeAfterSaleTab">
                    </TabSelect>
                </u-form-item>
                <u-form-item label="支付凭证图片" labelWidth="100">
                  <view class="imgs_scroll">
                     <ImgsRowScroll :isShowDeleteIcon="true"
                        @deleteImgInfo="getDeletePayTypeProofPicInfo" imgMode="aspectFill" :totalWidth="400"
                        :images="info.payTypeProofPicFileList" :previewEnabled="true" :imageWidth="150" :imageHeight="150">
                     </ImgsRowScroll>
                     <u-upload @afterRead="afterReadPayTypeProofPic" name="1" multiple :maxCount="10"></u-upload>
                  </view>
               </u-form-item>
            </u-form>
        </view>
    </u-modal>
</template>

<script>
import { afterSaleTabList, paymentTabList } from '../../js/public.js'
import Cell from '@/components/custom-cell/index.vue'
import BrandList from '@/components/brand-list/index.vue'
import TabSelect from '@/components/custom-tab-select/index.vue'
import PersonPicker from '@/components/person-picker/index.vue'
import ImgsRowScroll from '@/components/imgs-row-scroll/index.vue'
export default {
    name: 'OrderListEdit',
    components: {
        Cell,
        BrandList,
        TabSelect,
        PersonPicker,
        ImgsRowScroll
    },
    data() {
        return {
            show: false,
            info: {
                dictValue: '',
                dictLabel: '',
                payType: '',
                recyclePerson: '',
                recyclePersonId: '',
                quantity: 0,
                orderDate: this.$dayjs().format('YYYY-MM-DD'),
                orderType: '',
                type: '',
                dealPrice: 0,
                amountReceived: 0,
                orderRemark: '',
                address: '',
                afterSaleTab: [],
            },
            paymentTabList: paymentTabList,
            afterSaleTabList: afterSaleTabList,
            payTypeIsClear: true,
            orderTypeIsClear: true,
            typeIsClear: true,
            orderDateShow: false,
            orderTypeList: [],
            typeList: [],
        }
    },
    props: {
        title: {
            type: String,
            default: '编辑'
        },
        orderInfo: {
            type: Object,
            default: () => { }
        }
    },
    emits: ['confirm'],
    methods: {
        showModal() {
            this.getOrderTypeList();
            this.getTypeList();
            uni.$u.api.wareHouseOrderDetail({
                id: this.orderInfo.id
            }).then(res => {
                this.show = true;
                this.$nextTick(() => {
                    this.info = res.data;
                    this.info.payType = res.data.payType || '';
                    this.info.orderDate = this.$dayjs(this.info.orderDate).format('YYYY-MM-DD');
                })
            })
        },
        hideModal() {
            this.show = false;
            this.info= {
                dictValue: '',
                dictLabel: '',
                payType: '',
                recyclePerson: '',
                recyclePersonId: '',
                quantity: 0,
                orderDate: '',
                orderType: '',
                type: '',
                dealPrice: 0,
                amountReceived: 0,
                orderRemark: '',
                address: '',
                afterSaleTab: [],
            }
        },
        confirmEdit() {
            uni.$u.api.wareHouseOrderUpdate({
                id: this.info.id,
                dictValue: this.info.dictValue,
                dictLabel: this.info.dictLabel,
                payType: this.info.payType,
                recyclePerson: this.info.recyclePerson,
                recyclePersonId: this.info.recyclePersonId,
                quantity: this.info.quantity,
                orderDate: this.info.orderDate,
                orderType: this.info.orderType,
                type: this.info.type,
                dealPrice: this.info.dealPrice,
                amountReceived: this.info.amountReceived,
                orderRemark: this.info.orderRemark,
                address: this.info.address,
                afterSaleTab: this.info.afterSaleTab,
                payTypeProofPicFileList: this.info.payTypeProofPicFileList,
            }).then(() => {
                uni.$u.toast('更新成功');
                this.$emit('confirm');
                this.hideModal();
            }).catch(err => {
                uni.$u.toast(err);
            })
        },
        showBrandList() {
            this.$refs.brandListRef.showBrandList();
        },
        handleSelectedBrand(info) {
            this.$set(this.info, 'dictLabel', info.dictLabel);
            this.$set(this.info, 'dictValue', info.dictValue);
        },
        handlePayTypeTabChange(e) {
            this.info.payType = e;
        },
        showRecyclePersonPicker() {
            this.$refs.recyclePersonPickerRef.open();
        },
        handleSelectRecyclePerson(info) {
            this.info.recyclePerson = info.label;
            this.info.recyclePersonId = info.id;
        },
        clear(field) {
            if (field === 'brand') {
                this.info.dictLabel = '';
                this.info.dictValue = '';
            }
            if (field === 'recyclePerson') {
                this.info.recyclePerson = '';
                this.info.recyclePersonId = '';
            }
            this.info[field] = '';
        },
        confirmOrderDate() {
            this.$nextTick(() => {
                this.info.orderDate = this.$dayjs(this.info.orderDate).format('YYYY-MM-DD');
                this.orderDateShow = false;
            })
        },
        showOrderDatePicker() {
            this.$nextTick(() => {
                this.orderDateShow = true;
            })
        },
        closeOrderDatePicker() {
            this.orderDateShow = false;
        },
        getOrderTypeList() {
            this.$getDicts("crm_sendOrder_type").then(res => {
                this.orderTypeList = res
            })
        },
        getTypeList() {
            this.$getDicts("crm_form_category").then(res => {
                this.typeList = res
            })
        },
        changeOrderType(val) {
            this.info.orderType = val
        },
        handleTabChangeType(e) {
            this.info.type = e;
        },
        changeAfterSaleTab(val) {
            this.info.afterSaleTab = val
        },
        getDeletePayTypeProofPicInfo(info) {
            this.openOrderForm.payTypeProofPicFileList = info.newImages
        },
        afterReadPayTypeProofPic(event) {
            event.file.forEach(item => {
                uni.$u.api.uploadFile(item.url).then((res) => {
                    this.info.payTypeProofPicFileList.push(res.data.url);
                    uni.$u.toast("文件上传成功");
                }).catch(() => {
                    uni.$u.toast("上传文件失败");
                })
            })
        },

    }
}
</script>

<style lang="scss" scoped>
@import '../../styles/orderList/edit.scss';
</style>