wash_admin_ui/src/views/order/cloth/checkCloth.vue

<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="18" :xs="24">
                <div style="width: 100%" class="verticle-view">
                    <el-table :data="orderClothItemVOS" fit highlight-current-row border stripe @cell-click="onOrderClothItemSelect">
                        <el-table-column label="序号" type="index" align="center" fixed="left" width="80"> </el-table-column>
                        <el-table-column label="衣服条码" align="center" prop="name" width="200">
                            <template slot-scope="scope">
                                <span>{{ scope.row.washCode }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="衣服名称" align="center" prop="name" width="150">
                            <template slot-scope="scope">
                                <span>{{ scope.row.clothItemName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="衣服品牌" align="center" prop="name" width="120">
                            <template slot-scope="scope">
                                <span>{{ scope.row.clothBrandName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="衣服颜色" align="center" prop="name" width="150">
                            <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" prop="name">
                            <template slot-scope="scope">
                                <span>
                                    <template v-for="(item, index) in scope.row.orderClothFlaws">
                                        {{ index == 0 ? item.clothFlawName : ',' + item.clothFlawName }}
                                    </template>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
                            <template slot-scope="scope">
                                <el-button type="text" @click="rollbackOrderClothItem(scope.$index, scope.row.washCode)">重洗</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="6" :xs="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>衣服信息</span>
                    </div>

                    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="40px">
                        <el-form-item label="条码" prop="washCode">
                            <el-input v-model="queryParams.washCode" placeholder="请输入条码" clearable @keyup.enter.native="searchCloth" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="searchCloth">查询</el-button>
                        </el-form-item>
                    </el-form>

                    <el-descriptions title="衣物信息" :column="1">
                        <el-descriptions-item label="衣物条码">{{ orderClothItemVO ? orderClothItemVO.washCode : '' }}</el-descriptions-item>
                        <el-descriptions-item label="衣物名称">{{ orderClothItemVO ? orderClothItemVO.clothItemName : '' }}</el-descriptions-item>
                        <el-descriptions-item label="是否重洗">
                            <template v-if="orderClothItemVO">
                                <span v-if="orderClothItemVO && orderClothItemVO.repeatCount > 0" style="color: red"> 重洗 {{ orderClothItemVO.repeatCount }} 次 </span>
                                <span v-else> 否 </span>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="颜色">
                            <template v-if="orderClothItemVO">
                                <template v-for="(color, index) in orderClothItemVO.orderClothColors">
                                    {{ index == 0 ? color.clothColorName : ',' + color.clothColorName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="瑕疵">
                            <template v-if="orderClothItemVO">
                                <template v-for="(color, index) in orderClothItemVO.orderClothFlaws">
                                    {{ index == 0 ? color.clothFlawName : ',' + color.clothFlawName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="特殊处理">
                            <template v-if="orderClothItemVO">
                                <template v-for="(color, index) in orderClothItemVO.orderClothCrafts">
                                    {{ index == 0 ? color.clothCraftName : ',' + color.clothCraftName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="附件">
                            <template v-if="orderClothItemVO">
                                <template v-for="(color, index) in orderClothItemVO.orderClothAdjuncts">
                                    {{ index == 0 ? color.adjunctName : ',' + color.adjunctName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="收衣门店">{{ orderClothItemVO ? orderClothItemVO.orgName : '' }}</el-descriptions-item>
                        <el-descriptions-item label="状态">
                            <template v-if="orderClothItemVO">
                                <span style="color: red">
                                    <template v-if="orderClothItemVO.flowStatus == 0"> 待入场 </template>
                                    <template v-if="orderClothItemVO.flowStatus == 1"> 已入厂 </template>
                                    <template v-if="orderClothItemVO.flowStatus == 2"> 已检查 </template>
                                    <template v-if="orderClothItemVO.flowStatus == 3"> 已出厂 </template>
                                    <template v-if="orderClothItemVO.flowStatus == 100"> 重洗 </template>
                                </span>
                            </template>
                        </el-descriptions-item>
                    </el-descriptions>

                    <el-button type="primary" icon="el-icon-s-order" @click="rollbackOrderClothItemByObj">重洗</el-button>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { checkCloth, rewashCloth } from '../../../api/order/clothItem'

export default {
    name: 'CheckCloth',
    computed: {},
    dicts: ['sys_yes_no', 'cloth_type', 'cloth_send_type'],
    data() {
        return {
            // 查询参数
            queryParams: {},
            orderClothItemVO: null,
            orderClothItemVOS: [],
            clothItemDetailOpen: false,
            selectClothItemIndex: null
        }
    },
    created() {
        // allWashProblem().then(res => {
        //   this.washProblems = res.data
        // })
    },
    methods: {
        searchCloth() {
            if (this.isEmpty(this.queryParams.washCode)) {
                this.$message.error('请先输入衣服条码')
                return
            }
            checkCloth(this.queryParams).then((res) => {
                this.orderClothItemVO = res.data
                this.orderClothItemVOS.push(res.data)
            })
        },
        showClothItemDetail() {
            this.clothItemDetailOpen = true
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done()
                })
                .catch((_) => {})
        },
        rollbackOrderClothItem(index, washCode) {
            this.$confirm('确定要重洗这件衣服吗？')
                .then((_) => {
                    rewashCloth({ washCode: washCode }).then((res) => {
                        this.orderClothItemVOS.splice(index, 1)
                    })
                    if (this.orderClothItemVO && this.orderClothItemVO.washCode == washCode) {
                        this.orderClothItemVO.flowStatus = '100'
                    }

                    this.$forceUpdate()
                })
                .catch((_) => {})
        },
        rollbackOrderClothItemByObj() {
            if (!this.orderClothItemVO) {
                this.$message.error('请先选择衣物')
                return
            }
            this.$confirm('确定要重洗这件衣服吗？')
                .then((_) => {
                    rewashCloth({ washCode: this.orderClothItemVO.washCode }).then((res) => {
                        for (let i = 0; i < this.orderClothItemVOS.length; i++) {
                            if (this.orderClothItemVOS[i].washCode == this.orderClothItemVO.washCode) {
                                this.orderClothItemVOS.splice(i, 1)
                                break
                            }
                        }
                        this.orderClothItemVO.flowStatus = '100'
                        this.$forceUpdate()
                    })
                })
                .catch((_) => {})
        },
        onOrderClothItemSelect(row) {
            this.orderClothItemVO = row
            this.queryParams.washCode = this.orderClothItemVO.washCode
        }
    }
}
</script>

<style scoped></style>