crm-app-vue3/pages/wareHouse/components/detail.vue

<template>
    <view class="detail" @click="handleClickOutside">
        <u-navbar class="nav_bar" title="商品详情档案" :autoBack="true" :placeholder="true" rightIcon="more-dot-fill"
            v-hideNav></u-navbar>
        <u-swiper :list="imgsUrl" keyName="url" indicator indicatorMode="line" circular>
            <!-- <template v-slot:item="{ item, index }">
                <view style="width: 100%; height: 600rpx;">
                    <image :src="item.url" mode="aspectFill" style="width: 100%; height: 100%; object-fit: cover;"></image>
                </view>
            </template> -->
        </u-swiper>

        <!-- 立即下架按钮 -->
        <view class="immediate_off_shelf">
            <u-button type="error" shape="circle" size="large" @click="handleOffShelf">
                <u-icon :name="downStatus == '0' ? 'arrow-upward' : 'arrow-downward'" size="38rpx"
                    color="#ffffff"></u-icon>
                <text>{{ downStatus == '0' ? '立即上架' : '立即下架' }}</text>
            </u-button>
        </view>

        <!-- 轮播图下方操作按钮 -->
        <view class="swiper_actions">
            <view class="action_item" @click="handleDownload">
                <u-icon name="download" size="44rpx" color="#606266"></u-icon>
                <text class="action_text">下载图文</text>
            </view>
            <view class="action_item">
                <u-icon name="share" size="44rpx" color="#606266"></u-icon>
                <text class="action_text">分享</text>
            </view>
            <view class="action_item" @click="handleEditImgs">
                <u-icon name="camera" size="44rpx" color="#606266"></u-icon>
                <text class="action_text">编辑图片</text>
                <u-modal :show="showEditImgsModal" title="编辑图片" showCancelButton @confirm="confirmEditImgs" @cancel="cancelEditImgs">
                    <imgs-row-scroll v-if="tempImgsUrl.length > 0" :isShowDeleteIcon="true" keyName="url"
                        @deleteImgInfo="getDeleteImgInfo" imgMode="aspectFill" :totalWidth="400" :images="tempImgsUrl"
                        :previewEnabled="true" :imageWidth="150" :imageHeight="150"></imgs-row-scroll>
                    <u-upload @afterRead="afterRead" multiple></u-upload>
                </u-modal>
            </view>
            <view class="action_item">
                <u-icon name="cut" size="44rpx" color="#606266"></u-icon>
                <text class="action_text">智能抠图</text>
            </view>
        </view>

        <!-- 核心信息区域 -->
        <view class="core_info">
            <view class="section_title">核心信息</view>
            <view class="info_row">
                <view class="info_label">品牌</view>
                <view class="info_value" @click.stop="showBrandlList()">
                    <!-- <u-input v-if="editMode.dictLabel" v-model="tempValues.dictLabel" :autoFocus="true" @blur="!globalEditMode && saveEditField('dictLabel', tempValues.dictLabel, 'dictLabel')" /> -->
                    <span>{{ coreInfo.dictLabel || '-' }}</span>
                    <BrandList ref="brandListRef" @selectedBrand="handleSelectedBrand"></BrandList>
                </view>
            </view>
            <view class="info_row">
                <view class="info_label">型号</view>
                <view class="info_value" @click.stop="toggleEditField('model', coreInfo.model)">
                    <u-input v-if="editMode.model" v-model="tempValues.model" :autoFocus="true"
                        @blur="!globalEditMode && saveEditField('model', tempValues.model, 'model')" />
                    <span v-else>{{ coreInfo.model || '-' }}</span>
                </view>
            </view>
            <view class="info_row">
                <view class="info_label">独立编码</view>
                <view class="info_value code" @click.stop="toggleEditField('code', coreInfo.code)">
                    <u-input v-if="editMode.code" v-model="tempValues.code" :autoFocus="true"
                        @blur="!globalEditMode && saveEditField('code', tempValues.code, 'code')" />
                    <span v-else>{{ coreInfo.code || '-' }}</span>
                </view>
            </view>
            <view class="info_row">
                <view class="info_label">入库日期</view>
                <view class="info_value">{{ coreInfo.warehouseDate || '-' }}</view>
            </view>
            <view class="info_row">
                <view class="info_label">付款方式</view>
                <view class="info_value">{{ coreInfo.payType || '-' }}</view>
            </view>
            <view class="info_row col">
                <view class="info_label">备注信息</view>
                <view class="info_value note" @click.stop="toggleEditField('note', coreInfo.note)">
                    <textarea v-if="editMode.note" v-model="tempValues.note" :autoFocus="true" rows="3"
                        @blur="!globalEditMode && saveEditField('note', tempValues.note, 'note')" />
                    <span v-else>{{ coreInfo.note || '-' }}</span>
                </view>
            </view>
        </view>

        <!-- 财务与价格区域 -->
        <view class="finance_price">
            <view class="section_title">财务与价格</view>
            <view class="price_group">
                <view class="price_item">
                    <view class="price_label">原始成本</view>
                    <view class="price_value original"
                        @click.stop="toggleEditField('originalCost', coreInfo.originalCost)">
                        <u-input v-if="editMode.originalCost" v-model="tempValues.originalCost" :autoFocus="true"
                            @blur="!globalEditMode && saveEditField('originalCost', tempValues.originalCost, 'originalCost')" />
                        <span v-else>￥{{ coreInfo.originalCost || '-' }}</span>
                    </view>
                </view>
                <view class="price_item">
                    <view class="price_label">附加成本</view>
                    <view class="price_value additional"
                        @click.stop="toggleEditField('additionalCost', coreInfo.additionalCost)">
                        <u-input v-if="editMode.additionalCost" v-model="tempValues.additionalCost" :autoFocus="true"
                            @blur="!globalEditMode && saveEditField('additionalCost', tempValues.additionalCost, 'additionalCost')" />
                        <span v-else>￥{{ coreInfo.additionalCost || '-' }}</span>
                    </view>
                </view>
            </view>
            <view class="price_group">
                <view class="price_item">
                    <view class="price_label">代理价格</view>
                    <view class="price_value agent" @click.stop="toggleEditField('agentPrice', coreInfo.agentPrice)">
                        <u-input v-if="editMode.agentPrice" v-model="tempValues.agentPrice" :autoFocus="true"
                            @blur="!globalEditMode && saveEditField('agentPrice', tempValues.agentPrice, 'agentPrice')" />
                        <span v-else>￥{{ coreInfo.agentPrice || '-' }}</span>
                    </view>
                </view>
                <view class="price_item">
                    <view class="price_label">建议售价</view>
                    <view class="price_value suggested"
                        @click.stop="toggleEditField('suggestedPrice', coreInfo.suggestedPrice)">
                        <u-input v-if="editMode.suggestedPrice" v-model="tempValues.suggestedPrice" :autoFocus="true"
                            @blur="!globalEditMode && saveEditField('suggestedPrice', tempValues.suggestedPrice, 'suggestedPrice')" />
                        <span v-else>￥{{ coreInfo.suggestedPrice || '-' }}</span>
                    </view>
                </view>
            </view>
        </view>

        <!-- 溯源与位置区域 -->
        <view class="traceability_location">
            <view class="section_title">溯源与位置</view>
            <view class="info_row">
                <view class="info_label">商品位置</view>
                <view class="info_value" @click.stop="toggleEditField('location', coreInfo.location)">
                    <u-input v-if="editMode.location" v-model="tempValues.location" :autoFocus="true"
                        @blur="!globalEditMode && saveEditField('location', tempValues.location, 'location')" />
                    <span v-else>{{ coreInfo.location || '-' }}</span>
                </view>
            </view>
            <view class="info_row">
                <view class="info_label">回收人员</view>
                <view class="info_value" @click.stop="showRecyclePersonPicker">
                    <!-- <u-input v-if="editMode.recyclePerson" v-model="tempValues.recyclePerson" :autoFocus="true" @blur="!globalEditMode && saveEditField('recyclePerson', tempValues.recyclePerson, 'recyclePerson')" /> -->
                    <span>{{ coreInfo.recyclePerson || '-' }}</span>
                    <personPicker ref="recyclePersonPickerRef" title="请选择回收人员"
                        @selectPerson="handleSelectRecyclePerson">
                    </personPicker>
                </view>
            </view>
            <view class="info_row">
                <view class="info_label">鉴定人员</view>
                <view class="info_value" @click.stop="showIdentifyingPersonPicker">
                    <!-- <u-input v-if="editMode.identifyingPerson" v-model="tempValues.identifyingPerson" :autoFocus="true" @blur="!globalEditMode && saveEditField('identifyingPerson', tempValues.identifyingPerson, 'identifyingPerson')" /> -->
                    <span>{{ coreInfo.identifyingPerson || '-' }}</span>
                    <personPicker ref="identifyingPersonPickerRef" title="请选择鉴定人员"
                        @selectPerson="handleSelectIdentifyingPerson"></personPicker>
                </view>
            </view>
            <view class="action_button">
                <u-button type="primary" plain size="mini" @click="viewLog">查看操作日志({{ coreInfo.logTotal ||
                    '-'}}条)</u-button>
                <u-modal :show="logShow" title="日志" :closeOnClickOverlay="true" :showConfirmButton="false"
                    @close="logShow = false">
                    <view class="log_list">
                        <view v-for="value in logList" :key="value.id" class="log_item">
                            {{ value.createTime }}{{ value.name }}{{ value.operation }}
                        </view>
                    </view>
                </u-modal>
            </view>
        </view>

        <!-- 底部功能按钮栏 -->
        <view class="bottom_bar">
            <view class="bar_item" @click.stop="globalEditMode ? handleClickOutside() : enterGlobalEdit()">
                <u-icon :name="globalEditMode ? 'checkbox-mark' : 'edit-pen'" size="46rpx"
                    :color="globalEditMode ? '#10b981' : '#9ca3af'"></u-icon>
                <text class="bar_text">{{ globalEditMode ? '确定' : '编辑' }}</text>
            </view>
            <view class="bar_item" @click.stop="lockGoods">
                <u-icon :name="lockStatus === '1' ? 'lock-open' : 'lock'" size="46rpx" color="#9ca3af"></u-icon>
                <text class="bar_text">{{ lockStatus === '1' ? '解锁' : '锁单' }}</text>
            </view>
            <view class="bar_item">
                <image class="bar_icon" src="../../../static//icons/print.png" alt=""></image>
                <text class="bar_text">打印</text>
            </view>
            <view :class="['bar_item', { 'disabled': lockStatus === '1' }]" @click="handleOpenOrder">
                <view class="primary">
                    <u-icon name="bag" size="44rpx" color="#fff"></u-icon>
                    <text class="bar_text">开单</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import BrandList from '@/components/brand-list/index.vue'
import personPicker from '@/components/person-picker/index.vue'
import imgsRowScroll from '@/components/imgs-row-scroll/index.vue'
export default {
    components: {
        BrandList,
        personPicker,
        imgsRowScroll,
    },
    data() {
        return {
            // 核心信息模拟数据
            coreInfo: {},
            // 编辑状态管理
            editMode: {
                model: false,
                code: false,
                note: false,
                originalCost: false,
                additionalCost: false,
                agentPrice: false,
                suggestedPrice: false,
                location: false,
            },
            // 全局编辑模式
            globalEditMode: false,
            // 临时存储编辑值
            tempValues: {},
            goodsId: '',
            logShow: false,
            logList: [],
            imgsUrl: [],
            lockStatus: '',//锁单状态 0：未锁单 1：已锁单 
            downStatus: '',//下架状态 0：已下架 1：已上架
            showEditImgsModal: false,
            tempImgsUrl: [],
        }
    },
    onLoad(options) {
        this.goodsId = options.id;
        this.getGoodsDetail();
    },
    methods: {
        // 锁单
        lockGoods() {
            uni.$u.api.wareHouseLock({
                id: this.goodsId,
                lockStatus: this.lockStatus === '1' ? '0' : '1',
            }).then(res => {
                uni.showToast({
                    title: this.lockStatus === '1' ? '解锁成功' : '锁单成功',
                    icon: 'success'
                })
                this.getGoodsDetail();
            })
        },
        showRecyclePersonPicker() {
            this.$refs.recyclePersonPickerRef.open();
        },
        // 处理选中回收人员
        handleSelectRecyclePerson(person) {
            this.coreInfo.recyclePerson = person.label;
            this.coreInfo.recyclePersonId = person.id;
            this.submitEdit(this.coreInfo)
        },
        // 显示鉴定人员选择器
        showIdentifyingPersonPicker() {
            this.$refs.identifyingPersonPickerRef.open();
        },
        // 处理选中鉴定人员
        handleSelectIdentifyingPerson(person) {
            this.coreInfo.identifyingPerson = person.label;
            this.coreInfo.identifyingPersonId = person.id;
            this.submitEdit(this.coreInfo)
        },
        // 显示品牌列表
        showBrandlList() {
            this.$refs.brandListRef.showBrandList();
        },
        // 处理选中品牌
        handleSelectedBrand(info) {
            this.coreInfo.dictLabel = info.dictLabel;
            this.coreInfo.dictValue = info.dictValue;
            this.submitEdit(this.coreInfo)
        },
        // 获取商品详情
        getGoodsDetail() {
            uni.$u.api.wareHouseDetail({
                id: this.goodsId,
                userId: this.$store.state.user.userInfo.userId,
            }).then(res => {
                this.coreInfo = res.data;
                this.imgsUrl = res.data.imgsUrl || [];
                this.lockStatus = res.data.lockStatus;
                this.downStatus = res.data.downStatus;
            });
        },
        // 打开销售业务开单页面
        handleOpenOrder() {
            if (this.lockStatus === '1') {
                uni.showToast({
                    title: '已锁单，不能开单',
                    icon: 'none'
                })
                return
            }
            const params = {
                id: this.goodsId,
                url: this.imgsUrl[0].url,
                dictLabel: this.coreInfo.dictLabel,
                dictValue: this.coreInfo.dictValue,
                model: this.coreInfo.model,
                totalCost: Number(this.coreInfo.originalCost) + Number(this.coreInfo.additionalCost),
                suggestedPrice: this.coreInfo.suggestedPrice,
                recyclePerson: this.coreInfo.recyclePerson,
                recyclePersonId: this.coreInfo.recyclePersonId,
                warehouseDate: this.coreInfo.warehouseDate,
            }
            uni.navigateTo({
                url: '/pages/wareHouse/components/openOrder?params=' + JSON.stringify(params),
            });
        },
        viewLog() {
            uni.$u.api.wareHouseLog({
                id: this.goodsId,
                userId: this.$store.state.user.userInfo.userId,
            }).then(res => {
                this.logList = res.data;
                this.logShow = true;
            });
        },

        // 立即下架按钮
        handleOffShelf() {
            uni.$u.api.wareHouseDown({
                id: this.goodsId,
                downStatus: this.downStatus === '1' ? '0' : '1',
            }).then(res => {
                uni.showToast({
                    title: this.downStatus === '1' ? '上架成功' : '下架成功',
                    icon: 'success'
                })
                this.getGoodsDetail();
            })
        },
        // 切换单个字段的编辑状态
        toggleEditField(field, value) {
            // 如果不是全局编辑模式
            if (!this.globalEditMode) {
                // 重置所有编辑状态
                this.resetEditMode();
                // 设置当前字段为编辑状态
                this.editMode[field] = true;
                // 保存临时值
                this.tempValues[field] = value;
            }
        },
        // 保存单个字段的编辑值
        saveEditField(field, newValue, fieldName) {
            this.coreInfo[fieldName] = newValue;
            this.editMode[field] = false;
            delete this.tempValues[field];
            console.log(`保存${field}字段值: ${newValue}`);
            this.submitEdit(this.coreInfo);
        },
        // 进入全局编辑模式
        enterGlobalEdit() {
            this.globalEditMode = true;
            // 设置所有可编辑字段为编辑状态
            this.editMode = {
                model: true,
                code: true,
                note: true,
                originalCost: true,
                additionalCost: true,
                agentPrice: true,
                suggestedPrice: true,
                location: true,
            };
            // 保存所有字段的临时值
            this.tempValues = { ...this.coreInfo }
        },
        // 重置所有编辑状态
        resetEditMode() {
            Object.keys(this.editMode).forEach(key => {
                this.editMode[key] = false;
            });
        },
        submitEdit(info) {
            const data = {
                id: this.goodsId,
                imgsUrl: this.imgsUrl,
                dictLabel: info.dictLabel,
                dictValue: info.dictValue,
                model: info.model,
                code: info.code,
                warehouseDate: info.warehouseDate,
                payType: info.payType,
                note: info.note,
                originalCost: info.originalCost,
                additionalCost: info.additionalCost,
                agentPrice: info.agentPrice,
                suggestedPrice: info.suggestedPrice,
                location: info.location,
                recyclePerson: info.recyclePerson,
                recyclePersonId: info.recyclePersonId,
                identifyingPerson: info.identifyingPerson,
                identifyingPersonId: info.identifyingPersonId,
            }
            uni.$u.api.wareHouseUpdate(data).then(res => {
                uni.showToast({
                    title: '编辑成功',
                    icon: 'success'
                });
                this.getGoodsDetail();
                this.$emit('editSuccess')
            })
        },
        // 点击页面其他地方保存所有编辑
        handleClickOutside() {
            if (this.globalEditMode) {
                this.submitEdit(this.tempValues)
                // 全局编辑模式下，点击外部区域重置所有编辑
                this.globalEditMode = false;
                // 退出所有编辑状态
                this.resetEditMode();
                // 清空临时值，恢复初始状态
                this.tempValues = {};

            } else {
                // 保存当前正在编辑的字段
                Object.keys(this.editMode).forEach(key => {
                    if (this.editMode[key]) {
                        this.saveEditField(key, this.tempValues[key], key);
                    }
                });
            }

        },
        handleDownload() {
            if (this.imgsUrl.length == 0) {
                uni.showToast({
                    title: '暂无图片',
                    icon: 'none'
                })
                return;
            }
            uni.showModal({
                title: '保存图片',
                content: `是否将 ${this.imgsUrl.length} 张图片保存到本地相册？`,
                confirmText: '保存',
                success: (res) => {
                    if (res.confirm) {
                        this.saveImagesToLocal(this.imgsUrl);
                    }
                }
            })

        },
        saveImagesToLocal(allUrls) {
            uni.showToast({
                title: '图片保存中...',
                icon: 'loading'
            })
            allUrls.forEach((item, index) => {
                uni.downloadFile({
                    url: item.url,
                    success: (res) => {
                        if (res.statusCode === 200) {
                            uni.saveImageToPhotosAlbum({
                                filePath: res.tempFilePath,
                                success() {
                                    uni.showToast({
                                        title: '保存成功'
                                    })
                                },
                                fail: (err) => {
                                    console.error('保存到相册失败:', err);
                                    // 如果是权限问题，尝试请求权限
                                    if (err.errMsg.includes('auth denied')) {
                                        uni.showModal({
                                            title: '权限不足',
                                            content: '需要访问相册权限来保存图片，是否去设置？',
                                            success: (modalRes) => {
                                                if (modalRes.confirm) {
                                                    // 打开设置页面
                                                    uni.openSetting({
                                                        success: (settingRes) => {
                                                            console.log('设置页面结果:', settingRes);
                                                        }
                                                    });
                                                }
                                            }
                                        });
                                    }
                                    reject(err);
                                }
                            })
                        }
                    }
                })
            })
        },
        handleEditImgs() {
            this.showEditImgsModal = true;
            this.tempImgsUrl = this.imgsUrl
        },
        getDeleteImgInfo(imgInfo) {
            this.tempImgsUrl = imgInfo.newImages
        },
        afterRead(info) {
            info.file.forEach(item=>{
                uni.$u.api.uploadFile(item.url).then((res) => {
                    this.tempImgsUrl.push({url:res.data.url});
                    uni.$u.toast("文件上传成功");
                    this.showEditImgsModal = false;
                }).catch(() => {
                    uni.$u.toast("上传文件失败");
                })
            })
        },
        confirmEditImgs() {
            this.imgsUrl = this.tempImgsUrl
            this.submitEdit(this.coreInfo)
            this.showEditImgsModal = false;
        },
        cancelEditImgs() {
            this.tempImgsUrl = []
            this.showEditImgsModal = false;
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../styles/detail.scss";
</style>