wash_server_v2/admin-ui/src/views/order/cloth/searchCloth.vue

<template>
    <div class="app-container">
        <el-card class="search-wrapper" shadow="never">
        <el-form :model="queryParams" ref="queryForm" @submit.native.prevent :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item prop="flowStatus">
                <el-select v-model="queryParams.flowStatus" placeholder="请选择衣服状态" clearable>
                    <el-option key="0" label="待入厂" value="0" />
                  <el-option key="1" label="清洗中" value="1" />
                    <el-option key="2" label="已检查" value="2" />
                  <el-option key="3" label="已出厂" value="3" />
                  <el-option key="4" label="已上挂" value="4" />
                    <el-option key="5" label="已取衣" value="5" />
                  <el-option key="-1" label="已取消" value="-1" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="createTimeRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="下单日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item prop="washCode">
                <el-input v-model="queryParams.washCode" placeholder="请输入衣服条码" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="clothItemName">
                <el-input v-model="queryParams.clothItemName" placeholder="请输入衣服名称" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="takeClothTimeRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="取衣日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>

            <el-form-item prop="appUserPhoneNumber">
                <el-input v-model="queryParams.appUserPhoneNumber" placeholder="请输入客户电话" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="clothHangerId">
                <el-input v-model="queryParams.clothHangerId" placeholder="请输入挂衣号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>

        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <Page uri="/mapi/order/clothItem/list" :request-params="queryParams" ref="pagination">
            <el-table-column label="衣物条码" align="center" prop="washCode" fixed="left" min-width="120"/>
            <el-table-column label="衣服名称" align="center" prop="clothItemName"  min-width="120"/>
          <el-table-column label="衣物照片" align="center" width="120">
            <template slot-scope="scope">
              <div class="cloth-photos" v-if="scope.row.pics">
                <el-image
                  v-for="(pic, index) in scope.row.pics.split(',')"
                  :key="index"
                  :src="pic"
                  :preview-src-list="scope.row.pics.split(',')"
                  fit="cover"
                  class="cloth-photo"
                  @click="handlePreview(scope.row.pics.split(','))"
                >
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </div>
              <span v-else>暂无照片</span>
            </template>
          </el-table-column>
            <el-table-column label="是否重洗" align="center" prop="repeatCount">
                <template slot-scope="scope">
                    <span v-if="scope.row.repeatCount && scope.row.repeatCount > 0" style="color: red"> 重洗 {{ scope.row.repeatCount }} 次 </span>
                    <span v-else> 否 </span>
                </template>
            </el-table-column>
            <el-table-column label="客户信息" align="center" prop="appUserName" width="150">
                <template slot-scope="scope">
                    <span>{{ scope.row.appUserName ? scope.row.appUserName : '--' }} </span>
                    <br />
                    <span>{{ scope.row.appUserPhoneNumber ? scope.row.appUserPhoneNumber : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="颜色" align="center">
                <template slot-scope="scope">
                    <template v-for="(item, index) in scope.row.orderClothColors">
                        {{ index == 0 ? item.clothColorName : ',' + item.clothColorName }}
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="附件" align="center"  min-width="120">
                <template slot-scope="scope">
                    <template v-for="(item, index) in scope.row.orderClothAdjuncts">
                        {{ index == 0 ? item.adjunctName : ',' + item.adjunctName }}
                    </template>
                    <span v-if="!scope.row.orderClothAdjuncts">暂无</span>
                </template>
            </el-table-column>
            <el-table-column label="挂衣号" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.clothHanger">
                        {{ scope.row.clothHanger.name + '#' + scope.row.clothHangerCode }}
                    </span>
                    <span v-else>暂无</span>
                </template>
            </el-table-column>
            <el-table-column label="衣服状态" align="center" prop="flowStatus" width="80">
                <template slot-scope="scope">
                    <el-tag type="danger" v-if="scope.row.refundId !=null">已撤销</el-tag>
                    <dict-tag v-else :options="dict.type.order_cloth_flow_status" :value="scope.row.flowStatus" />
                </template>
            </el-table-column>
            <el-table-column label="订单编号" align="center" prop="orderNo" min-width="120" />
          <el-table-column label="订单状态" align="center" prop="flowStatus" width="80">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.cloth_order_status" :value="scope.row.orderStatus" />
            </template>
          </el-table-column>
            <el-table-column label="下单时间" align="center" prop="createTime"  min-width="90"/>
            <el-table-column label="取衣时间" align="center" prop="sendClothTime"  min-width="90">
                <template slot-scope="scope">
                    <span v-if="scope.row.sendClothTime">
                        {{ scope.row.clothHanger.sendClothTime }}
                    </span>
                    <span v-else>--</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">详情</el-button>
                    <el-button type="text" icon="el-icon-camera" @click="handphotograph(scope.row)">拍照</el-button>
                    <el-button type="text" icon="el-icon-printer" v-if="userInfoVO.userType != '00'" @click="btn_pointer_label(scope.row)">标签打印</el-button>
                </template>
            </el-table-column>
        </Page>

        <!-- 添加或修改洗衣订单衣服明细对话框 -->
        <el-dialog :title="title" :visible.sync="open" size="50%" append-to-body>
            <el-row :gutter="15" style="margin-bottom: 80px; margin-left: 20px; width: calc(100% - 20px)">
                <el-col :span="24">
                    <el-descriptions class="margin-top" :column="2" border>
                        <el-descriptions-item>
                            <template slot="label"> 衣物条码 </template>
                            {{ form.washCode }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 洗衣单号 </template>
                            {{ form.orderNo }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 衣服名称 </template>
                            {{ form.clothItemName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 颜色 </template>
                            <el-tag size="small" v-for="(item, index) in form.orderClothColors" :key="index" style="margin-right: 10px; margin-bottom: 2.5px; margin-top: 2.5px">{{ item.clothColorName }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 瑕疵 </template>
                            <el-tag size="small" v-for="(item, index) in form.orderClothFlaws" :key="index" style="margin-right: 10px; margin-bottom: 2.5px; margin-top: 2.5px">{{ item.clothFlawName }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 特殊处理 </template>
                            <el-tag size="small" v-for="(item, index) in form.orderClothCrafts" :key="index" style="margin-right: 10px; margin-bottom: 2.5px; margin-top: 2.5px">{{ item.clothCraftName + '（￥' + item.price + '）' }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 附件 </template>
                            <el-tag size="small" v-for="(item, index) in form.orderClothAdjuncts" :key="index" style="margin-right: 10px; margin-bottom: 2.5px; margin-top: 2.5px">{{ item.adjunctName }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 挂衣号 </template>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 预计取衣 </template>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 衣服状态 </template>
                            <dict-tag :options="dict.type.order_cloth_flow_status" :value="form.flowStatus" />
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 照片 </template>
                            <template v-if="form.pics">
                                <el-image v-for="(item, index) in form.pics.split(',')" :key="index" style="width: 100px; height: 100px; margin-right: 10px; margin-top: 2.5px; margin-bottom: 2.5px" :src="item" :preview-src-list="form.pics.split(',')"> </el-image>
                            </template>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
                <el-col :span="24" style="margin-top: 10px">
                    <el-table :data="form.orderClothAdjuncts" :v-if="form.orderClothAdjuncts" fit highlight-current-row border stripe>
                        <el-table-column label="附件条码" align="center" prop="adjunctNo" />
                        <el-table-column label="附件名称" align="center" prop="adjunctName" />
                        <el-table-column label="附件状态" align="center" prop="flowStatus">
                            <template slot-scope="scope">
                                <dict-tag :options="dict.type.order_cloth_flow_status" :value="scope.row.flowStatus" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="24" style="margin-top: 10px">
                    <el-table :data="flowRecords" fit highlight-current-row border stripe>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <dict-tag :options="dict.type.order_cloth_flow_action" :value="scope.row.flowStatus" />
                            </template>
                        </el-table-column>
                        <el-table-column label="时间" align="center" prop="createTime" />
                        <el-table-column label="操作人" align="center" prop="operateName" />
                        <el-table-column label="单位" align="center" prop="operateOrgName" />
                    </el-table>
                </el-col>
            </el-row>

            <div slot="footer" class="dialog-footer">
                <!--        <el-button type="primary" @click="submitForm" style="margin-left: 5%">提交</el-button>-->
                <el-button @click="cancel" style="margin-left: 5%">关 闭</el-button>
            </div>
        </el-dialog>

        <!-- 拍照上传 -->
        <el-dialog title="拍照上传" :visible.sync="photographType" :before-close="hidephotograph" width="55%">
            <div class="photo_content">
                <div class="video_content">
                    <div class="loading" v-if="videoType">
                        <el-button type="text" :loading="true" disabled>加载中请稍后</el-button>
                    </div>
                    <video class="videoElement" ref="videoElement" autoplay></video>
                </div>

                <div class="view">
                    <div class="btn_box">
                        <el-button class="btn_photo" :loading="photoType" :disabled="photoType" icon="el-icon-camera" type="primary" plain @click="takePhoto" v-if="!videoType">拍照上传</el-button>

                        <el-upload v-if="photographimgList.length < 9" class="btn_upload" :action="uploadAction" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError" accept="image/*" :show-file-list="false" ref="fileUpload">
                            <el-button icon="el-icon-folder" plain type="primary">上传本地文件</el-button>
                        </el-upload>
                    </div>

                    <div class="image_list" v-if="photographimgList.length">
                        <div class="image_item" v-for="(item, index) in photographimgList" :key="index">
                            <el-image style="width: 120px; height: 120px" :src="item.src ? item.src : item.url" :preview-src-list="previewimgList"> </el-image>

                            <div class="image_bottom">
                                <el-button type="danger" icon="el-icon-delete" @click="btn_remove(item, index)"></el-button>
                                <el-button v-if="item.type" type="success" icon="el-icon-check"></el-button>
                            </div>
                        </div>
                    </div>

                    <el-empty :image-size="200" v-else></el-empty>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="hidephotograph">关 闭</el-button>
                <el-button type="primary" @click="btn_submit">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { listOrderClothItem, getClothItem, delClothItem, addClothItem, updateClothItem, updateClothItemStatus } from '@/api/order/clothItem'
import { listOrderClothFlowRecordByOrderClothId } from '../../../api/order/clothItemFlowRecord'
import { uploadBase64OSS, uploadOSS, saveOrderClothPics } from '@/api/upload'
import { getLodop } from '@/utils/lodopUtils'

export default {
    name: 'ClothItem',
    dicts: ['sys_yes_no', 'order_cloth_flow_status', 'cloth_order_status' ,'order_cloth_flow_action'],
    data() {
        return {
            uploadAction: `${process.env.VUE_APP_BASE_API}` + '/common/uploadOSS',
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 洗衣订单衣服明细表格数据
            clothItemList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                clothItemName: null,
                washCode: null,
                clothHangerId: null
            },
            createTimeRange: [],
            takeClothTimeRange: [],
            // 表单参数
            form: {},
            flowRecords: [],
            // 表单校验
            rules: {},
            photographType: false,
            photographimgList: [],
            previewimgList: [],
            uploadList: [],
            photoLoading: true,
            clothId: null,
            stream: null,
            fileType: ['png', 'jpg', 'jpeg'],
            number: 0,
            videoType: true,
            photoType: false,

            LODOP: null,
            number: 1,
            pointerList: [],

            userInfoVO: null
        }
    },
    created() {
        this.userInfoVO = this.getUserInfo()
        this.getList()
    },
    mounted() {
        this.number = 1
        const printerTime = setInterval(() => {
            this.LODOP = getLodop()
            this.number++
            if (this.number == 25) {
                clearInterval(printerTime)
            }
            if (this.LODOP) {
                clearInterval(printerTime)
            }
        }, 200)

        this.pointerList = JSON.parse(this.$cache.local.get('printerSeting'))
    },
    methods: {
        // 上传前校检格式和大小
        handleBeforeUpload(file) {
            console.log(file)
            // 校检文件类型
            if (this.fileType) {
                const fileName = file.name.split('.')
                const fileExt = fileName[fileName.length - 1]
                const isTypeOk = this.fileType.indexOf(fileExt) >= 0
                if (!isTypeOk) {
                    this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`)
                    return false
                }
            }
            // 校检文件大小
            const isLt = file.size / 1024 / 1024 < 3
            if (!isLt) {
                this.$message.error(`上传文件大小不能超过 3MB!`)
                return false
            }
            this.$modal.loading('正在上传文件，请稍候...')
            // this.number++;
            return true
        },
        handleUploadSuccess(res, file) {
            if (res.code === 200) {
                this.previewimgList.push(res.data.src)
                this.uploadList.push({ name: res.data.fileName, url: res.data.src })
                this.uploadedSuccessfully()
            } else {
                // this.number--;
                this.$modal.closeLoading()
                this.$modal.msgError(res.msg)
                this.$refs.fileUpload.handleRemove(file)
                this.uploadedSuccessfully()
            }
        },
        handleUploadError() {
            this.$modal.msgError('上传文件失败，请重试')
            this.$modal.closeLoading()
        },
        // 上传结束处理
        uploadedSuccessfully() {
            if (this.uploadList.length) {
                // this.fileList = this.fileList.concat(this.uploadList);
                this.uploadList.forEach((item) => {
                    this.photographimgList.push({
                        src: item.url,
                        fileName: item.fileName,
                        type: true
                    })
                })
                this.uploadList = []
                // this.number = 0;
                this.$modal.closeLoading()

                this.getuploadState()
            }
        },
        //根据上传文件状态判断显示
        getuploadState() {
            // 初始状态值
            let state = true

            // 判断数组中的所有元素是否都为true
            if (this.photographimgList.every((item) => item.type === true)) {
                state = false
            } else {
                state = true
            }

            return state
        },
        /** 查询洗衣订单衣服明细列表 */
        getList() {
            this.loading = true
            if (null != this.createTimeRange && '' != this.createTimeRange) {
                this.queryParams['beginCreateTime'] = this.createTimeRange[0]
                this.queryParams['endCreateTime'] = this.createTimeRange[1]
            } else {
                delete this.queryParams.beginCreateTime
                delete this.queryParams.endCreateTime
            }
            if (null != this.takeClothTimeRange && '' != this.takeClothTimeRange) {
                this.queryParams['beginTakeClothTime'] = this.takeClothTimeRange[0]
                this.queryParams['endTakeClothTime'] = this.takeClothTimeRange[1]
            } else {
                delete this.queryParams.beginTakeClothTime
                delete this.queryParams.endTakeClothTime
            }
            this.$nextTick(() => {
                this.$refs.pagination.handleSearch(true)
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                orderId: null,
                clothItemId: null,
                clothItemName: null,
                clothSpeedId: null,
                clothSpeedName: null,
                clothMultiple: null,
                clothWashDayNum: null,
                price: null,
                clothNum: null,
                clothWashModeId: null,
                clothWashModeName: null,
                pics: null,
                washCode: null,
                clothHangerId: null,
                isHedging: null,
                hedgingPrice: null,
                createById: null,
                createBy: null,
                createTime: null,
                updateById: null,
                updateBy: null,
                updateTime: null,
                remark: null
            }
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = '添加洗衣订单衣服明细'
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            this.flowRecords = []
            const id = row.id || this.ids
            getClothItem(id).then((response) => {
                this.form = response.data
                this.open = true
                this.title = '衣物详情'
                listOrderClothFlowRecordByOrderClothId({ orderClothId: id }).then((res) => {
                    this.flowRecords = res.data
                })
            })
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.id != null) {
                        updateClothItem(this.form).then((response) => {
                            this.$modal.msgSuccess('修改成功')
                            this.open = false
                            this.getList()
                        })
                    } else {
                        addClothItem(this.form).then((response) => {
                            this.$modal.msgSuccess('新增成功')
                            this.open = false
                            this.getList()
                        })
                    }
                }
            })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids
            this.$modal
                .confirm('是否确认删除洗衣订单衣服明细编号为"' + ids + '"的数据项？')
                .then(function () {
                    return delClothItem(ids)
                })
                .then(() => {
                    this.getList()
                    this.$modal.msgSuccess('删除成功')
                })
                .catch(() => {})
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                'mapi/order/clothItem/export',
                {
                    ...this.queryParams
                },
                `clothItem_${new Date().getTime()}.xlsx`
            )
        },
        checkClose(done) {
            this.$confirm('是否关闭表单，关闭后数据将丢失？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        },

        //打开拍照弹框 调用摄像头
        async handphotograph(row) {
            let objform = Object.assign({}, row)
            this.clothId = objform.id

            if (objform.pics) {
                let imgList = objform.pics.split(',')
                imgList.forEach((item) => {
                    this.previewimgList.push(item)
                    this.photographimgList.push({
                        type: true,
                        src: item
                    })
                })
            }

            this.photographType = true
            try {
                this.stream = await navigator.mediaDevices.getUserMedia({ video: true })
                this.$refs.videoElement.srcObject = this.stream
                this.videoType = false
            } catch (error) {
                this.$modal.msgError('无法访问摄像头')
                // console.error("无法访问摄像头:", error);
                // this.photographType = false
            }
        },
        //点击拍照 处理成base64
        async takePhoto() {
            this.photoType = true
            try {
                const canvas = document.createElement('canvas')
                const context = canvas.getContext('2d')
                canvas.width = this.$refs.videoElement.videoWidth
                canvas.height = this.$refs.videoElement.videoHeight
                context.drawImage(this.$refs.videoElement, 0, 0, canvas.width, canvas.height)
                const imageDataUrl = canvas.toDataURL('image/jpeg')
                if (this.photographimgList.length >= 9) {
                    this.$modal.msgError('照片仅限上传9张')
                    this.photoType = false
                    return
                }

                let response = await fetch(imageDataUrl)
                let blob = await response.blob() // 获取图片的 Blob 对象
                let file = new File([blob], 'image.jpeg', { type: blob.type })
                //创建form对象
                let formdata = new FormData()
                //通过append向form对象添加数据
                formdata.append('file', file)

                uploadOSS(formdata)
                    .then((res) => {
                        this.previewimgList.push(res.data.src)
                        this.photographimgList.push({
                            type: true,
                            src: res.data.src
                        })
                        this.photoType = false
                    })
                    .catch(() => {
                        // resolve(false);
                        this.photoType = false
                    })

                // 上传照片或处理imageDataUrl
                // this.uploadImage(imageDataUrl); // 调用上传接口或本地处理逻辑
            } catch (error) {
                this.photoType = false
                // console.error("拍照失败:", error);
            } finally {
                // this.$refs.videoElement.srcObject.getTracks().forEach((track) => track.stop());
            }
        },
        // 关闭拍照弹框后清除视频流
        hidephotograph() {
            const that = this
            this.$confirm('是否确认关闭当前拍照功能？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    that.photographType = false
                    that.photographimgList = []
                    that.clothId = null
                    if (that.stream) {
                        that.stream.getTracks().forEach((track) => track.stop()) // 停止访问摄像头并释放资源
                        that.$refs.videoElement.srcObject = null // 清除视频流对象
                    }
                })
                .catch(() => {})
        },
        //删除照片
        btn_remove(item, index) {
            const that = this
            this.$confirm('是否确认删除该照片？')
                .then(function () {})
                .then(() => {
                    that.photographimgList.splice(index, 1)
                    that.$modal.msgSuccess('删除成功')
                })
                .catch(() => {})
        },
        //保存图片
        btn_submit() {
            let _type = false

            if (this.photographimgList.length < 1) {
                this.$modal.msgError('请拍照上传后保存')
                return
            }

            const srcString = this.photographimgList.map((obj) => obj.src).join(',')
            saveOrderClothPics({
                id: this.clothId,
                pics: srcString
            }).then((response) => {
                this.$modal.msgSuccess('保存图片成功')

                this.photographType = false
                this.photographimgList = []
                this.clothId = null
                this.getList()
                if (this.stream) {
                    this.stream.getTracks().forEach((track) => track.stop()) // 停止访问摄像头并释放资源
                    this.$refs.videoElement.srcObject = null // 清除视频流对象
                }
            })
        },
        //标签打印
        btn_pointer_label(row) {
            if (!this.LODOP) {
                this.$modal.msgError('请安装打印机软件')
                return
            }
            let p_name = ''
            this.pointerList.forEach((pointer) => {
                if (pointer.printType == 2) {
                    p_name = pointer.printName
                }
            })
            console.log("AAAA", row)
            this.labelPrinter(this.LODOP, row, p_name)
        }
    }
}
</script>
<style scoped lang="scss">
.photo_content {
    display: flex;
    .video_content {
        flex-shrink: 0;
        width: 50%;
        position: relative;
        .loading {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 10;
            .el-button {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 15;
                border: none;
                color: #ffffff;
                padding: 10px 20px;
            }
        }
        .videoElement {
            width: 100%;
            height: auto;
        }
    }
    .view {
        flex: 1;
        padding: 20px;
        .btn_box {
            display: flex;
            .btn_upload {
                margin: 0 10px;
            }
        }
        .image_list {
            margin-top: 20px;
            .image_item {
                display: inline-block;
                margin: 0 10px 10px 0;
                position: relative;
                border-radius: 5px;
                overflow: hidden;
                .image_bottom {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    // height: 25px;
                    // line-height: 25px;
                    background-color: rgba(255, 255, 255, 0.3);
                    text-align: center;
                    color: #fff;
                    cursor: pointer;
                    display: flex;
                    .el-button {
                        flex: 1;
                    }
                }
            }
        }
    }
}
</style>