wash_admin_ui/src/views/order/cloth/inFactory.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>
                                <el-button type="text" @click="selectClothWashProblems(scope.$index)" :v-if="isAdjunct == 'N'">问题</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">
                                <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="附件" v-if="orderClothItemVO && orderClothItemVO.isAdjunct == 'N'">
                            <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>
                                </span>
                            </template>
                        </el-descriptions-item>
                    </el-descriptions>

                    <el-button type="primary" icon="el-icon-s-order" @click="showClothItemDetail">详情</el-button>
                </el-card>
            </el-col>
        </el-row>

        <el-dialog title="入厂信息" :visible.sync="clothItemDetailOpen" width="50%" :before-close="handleClose" center>
            <el-descriptions :column="3">
                <el-descriptions-item label="衣物条码" :span="3">{{ orderClothItemVO ? orderClothItemVO.washCode : '' }} </el-descriptions-item>
                <el-descriptions-item label="衣物名称" :span="3">{{ orderClothItemVO ? orderClothItemVO.clothItemName : '' }} </el-descriptions-item>
                <el-descriptions-item label="天数">{{ orderClothItemVO ? orderClothItemVO.clothWashDayNum : '' }}天 </el-descriptions-item>
                <el-descriptions-item label="总额">{{ orderClothItemVO ? orderClothItemVO.totalPrice : '' }}元 </el-descriptions-item>
                <el-descriptions-item label="洗衣方式">{{ orderClothItemVO ? orderClothItemVO.clothWashModeName : '' }} </el-descriptions-item>
                <el-descriptions-item label="特殊处理">{{ orderClothItemVO ? orderClothItemVO.clothSpeedName : '' }} </el-descriptions-item>
                <el-descriptions-item label="是否保值">
                    {{ orderClothItemVO ? (orderClothItemVO.isHedging == 'Y' ? '是' : '否') : '' }}
                </el-descriptions-item>
                <el-descriptions-item label="保值金额">{{ orderClothItemVO ? orderClothItemVO.hedgingPrice : '' }}元 </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="附件" v-if="orderClothItemVO && orderClothItemVO.isAdjunct == 'N'">
                    <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>
        </el-dialog>

        <el-dialog title="衣服问题" :visible.sync="selectClothWashProblemOpen" width="50%" :before-close="handleClose" center>
            <el-row :gutter="15">
                <el-form size="small" label-width="120px">
                    <el-col :span="24">
                        <el-form-item label="检查的问题" prop="washCode">
                            <el-input v-model="clothProblemContent" placeholder="请输入检查的问题" type="textarea" :rows="5" maxlength="500" show-word-limit :style="{ width: '100%' }" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-table :data="washProblems" style="width: 100%" max-height="400" highlight-current-row @cell-dblclick="addSelectWashProblem">
                            <el-table-column label="问题" align="center" prop="content" />
                        </el-table>
                    </el-col>
                </el-form>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="selectClothWashProblemOpen = false">取 消</el-button>
                <el-button type="primary" @click="saveWashProblem">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { inFactory, deleteInFactory, setClothProblem } from '../../../api/order/clothItem'
import { allWashProblem } from '@/api/cloth/washProblem'
import order from '@/views/recharge/order/index.vue'

export default {
    name: 'InFactory',
    computed: {},
    dicts: ['sys_yes_no', 'cloth_type', 'cloth_send_type'],
    data() {
        return {
            // 查询参数
            queryParams: {},
            orderClothItemVO: null,
            orderClothItemVOS: [],
            clothItemDetailOpen: false,
            washProblems: [],
            selectClothWashProblemOpen: false,
            selectClothItemIndex: null,
            clothProblemContent: ''
        }
    },
    created() {
        allWashProblem().then((res) => {
            this.washProblems = res.data
        })
    },
    methods: {
        searchCloth() {
            if (this.isEmpty(this.queryParams.washCode)) {
                this.$message.error('请先输入衣服条码')
                return
            }
            inFactory(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((_) => {
                    deleteInFactory({ washCode: washCode }).then((res) => {
                        this.orderClothItemVOS.splice(index, 1)
                    })
                })
                .catch((_) => {})
        },
        selectClothWashProblems(index) {
            this.selectClothItemIndex = index
            this.clothProblemContent = this.orderClothItemVOS[index].clothProblem
            this.selectClothWashProblemOpen = true
        },
        addSelectWashProblem(row, column, cell, event) {
            if (this.clothProblemContent == null) {
                this.clothProblemContent = ''
            }
            if (!this.isEmpty(this.clothProblemContent)) {
                this.clothProblemContent += '，'
            }
            this.clothProblemContent += row.content
        },
        saveWashProblem() {
            setClothProblem({
                id: this.orderClothItemVOS[this.selectClothItemIndex].id,
                clothProblem: this.clothProblemContent
            }).then((res) => {
                this.orderClothItemVOS[this.selectClothItemIndex].clothProblem = this.clothProblemContent
                this.selectClothWashProblemOpen = false
                this.$message.success('设置成功')
            })
        },
        onOrderClothItemSelect(row) {
            this.orderClothItemVO = row
            this.queryParams.washCode = this.orderClothItemVO.washCode
        }
    }
}
</script>

<style scoped></style>