wash_admin_ui/src/views/cloth/hanger/upHanger.vue

<template>
    <div class="app-container">
        <el-row :gutter="10">
            <el-col :span="18">
                <el-card class="box-card custom-card">
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
                                <el-form-item prop="washCode">
                                    <el-input v-model="queryParams.washCode" placeholder="请输入衣物条码" clearable @keyup.enter.native="handleQuery" />
                                </el-form-item>
                                <el-form-item prop="orderNo">
                                    <el-input v-model="queryParams.orderNo" placeholder="请输入洗衣单号" clearable @keyup.enter.native="handleQuery" />
                                </el-form-item>
                                <el-form-item label="状态" prop="flowStatus">
                                    <el-radio-group v-model="queryParams.flowStatus">
                                        <el-radio-button label="3">未上挂</el-radio-button>
                                        <el-radio-button label="4">已上挂</el-radio-button>
                                    </el-radio-group>
                                </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-col>
                    </el-row>
                    <el-row :gutter="10" class="mb8">
                        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                    </el-row>
                    <el-table v-loading="loading" fit highlight-current-row border stripe :data="clothItemList" style="height: 60%">
                        <el-table-column label="衣物条码" align="center" prop="washCode" width="120px" />
                        <el-table-column label="洗衣单号" align="center" prop="orderNo" width="120px" />
                        <el-table-column label="衣服名称" align="center" prop="clothItemName">
                            <template slot-scope="scope">
                                <span> {{ calculateClothName(scope.row) }} </span>
                            </template>
                        </el-table-column>

                        <el-table-column label="颜色" align="center" width="150">
                            <template slot-scope="scope">
                                <span v-for="(item, index) in scope.row.orderClothColors">
                                    {{ index == 0 ? item.clothColorName : ',' + item.clothColorName }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="瑕疵" align="center" width="150">
                            <template slot-scope="scope">
                                <span v-for="(item, index) in scope.row.orderClothFlaws">
                                    {{ index == 0 ? item.clothFlawName : ',' + item.clothFlawName }}
                                </span>
                                <el-tag v-if="!scope.row.orderClothFlaws">暂无</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="特殊处理" align="center" width="150">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.orderClothCrafts" size="small" v-for="item in scope.row.orderClothCrafts" style="margin-right: 10px; margin-bottom: 2.5px; margin-top: 2.5px">
                                    {{ item.clothCraftName }}
                                </el-tag>
                                <el-tag v-if="!scope.row.orderClothCrafts">暂无</el-tag>
                            </template>
                        </el-table-column>

                        <el-table-column label="附件" align="center">
                            <template slot-scope="scope">
                                <el-tag size="small" v-for="item in scope.row.orderClothAdjuncts" style="margin-right: 10px; margin-bottom: 2.5px; margin-top: 2.5px">
                                    {{ item.adjunctName }}
                                </el-tag>
                                <el-tag v-if="!scope.row.orderClothAdjuncts">暂无</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" align="center" width="80px">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.flowStatus == '3'">未上挂</el-tag>
                                <el-tag v-if="scope.row.flowStatus == '4'">已上挂</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="挂架号" align="center" prop="hangerName" width="150px" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <template v-for="item in hangerList">
                                    {{ scope.row.clothHangerId == item.id ? item.name + '-' + scope.row.clothHangerCode + '#' : '' }}
                                </template>
                                <el-tag v-if="!hangerList">暂无</el-tag>
                            </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-share" @click="handleUpdateHanger(scope.row)">分配挂衣号</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card class="box-card custom-card">
                    <el-form :model="queryParams2" ref="queryForm2" size="small" :inline="true" label-width="68px">
                        <el-form-item label="衣物条码" prop="washCode">
                            <el-input v-model="queryParams2.washCode" placeholder="请输入衣物条码" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="getOrderClothItemInfo">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-descriptions title="衣物信息" v-if="clothItemInfo" :column="1">
                        <el-descriptions-item label="衣物条码">{{ clothItemInfo.washCode }}</el-descriptions-item>
                        <el-descriptions-item label="洗衣单号">{{ clothItemInfo.orderNo }}</el-descriptions-item>
                        <el-descriptions-item label="衣物名称">{{ clothItemInfo.clothItemName }}</el-descriptions-item>
                        <el-descriptions-item label="颜色">
                            <template>
                                <template v-for="(item, index) in clothItemInfo.orderClothColors">
                                    {{ index == 0 ? item.clothColorName : ',' + item.clothColorName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="瑕疵">
                            <template>
                                <template v-for="(item, index) in clothItemInfo.orderClothFlaws">
                                    {{ index == 0 ? item.clothFlawName : ',' + item.clothFlawName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="特殊处理">
                            <template>
                                <template v-for="(item, index) in clothItemInfo.orderClothCrafts">
                                    {{ index == 0 ? item.clothCraftName : ',' + item.clothCraftName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="附件" v-if="clothItemInfo.isAdjunct == 'N'">
                            <template>
                                <template v-for="(item, index) in clothItemInfo.orderClothAdjuncts">
                                    {{ index == 0 ? item.adjunctName : ',' + item.adjunctName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <!--            <el-descriptions-item label="预计收衣">{{}}</el-descriptions-item>-->
                        <el-descriptions-item label="衣服状态">
                            <template>
                                <span v-if="clothItemInfo.flowStatus == '3'">未上挂</span>
                                <span v-if="clothItemInfo.flowStatus == '4'">已上挂</span>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="挂衣号">
                            <template v-for="item in hangerList">
                                {{ clothItemInfo.clothHangerId == item.id ? item.name + '-' + clothItemInfo.clothHangerCode + '#' : '' }}
                            </template>
                        </el-descriptions-item>
                    </el-descriptions>
                    <span v-if="clothItemInfo && clothItemInfo.isAdjunct == 'Y'" style="color: #c03639">附件不支持单独上挂，请跟所属衣服放到一起，以防丢失</span>
                    <div style="margin-top: 20px">
                        <el-button type="primary" @click="reFlow(clothItemInfo)" v-if="clothItemInfo && clothItemInfo.isAdjunct == 'N'">重洗</el-button>
                        <el-button type="primary" @click="handleUpdateHanger(clothItemInfo)" v-if="clothItemInfo && clothItemInfo.isAdjunct == 'N'">分配挂衣号</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 选择上挂位置页面 -->
        <el-dialog :title="title" :visible.sync="open" size="70%">
            <div style="margin-left: 5%; margin-top: 1%; margin-right: 5%">
                <el-row :gutter="20">
                    <el-descriptions title="衣物信息" v-if="clothItemInfoWithIn" :column="2">
                        <el-descriptions-item label="衣物条码">{{ clothItemInfoWithIn.washCode }}</el-descriptions-item>
                        <el-descriptions-item label="洗衣单号">{{ clothItemInfoWithIn.orderNo }}</el-descriptions-item>
                        <el-descriptions-item label="衣物名称">{{ clothItemInfoWithIn.clothItemName }}</el-descriptions-item>
                        <el-descriptions-item label="颜色">
                            <template>
                                <template v-for="(item, index) in clothItemInfoWithIn.orderClothColors">
                                    {{ index == 0 ? item.clothColorName : ',' + item.clothColorName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="瑕疵">
                            <template>
                                <template v-for="(item, index) in clothItemInfoWithIn.orderClothFlaws">
                                    {{ index == 0 ? item.clothFlawName : ',' + item.clothFlawName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="特殊处理">
                            <template>
                                <template v-for="(item, index) in clothItemInfoWithIn.orderClothCrafts">
                                    {{ index == 0 ? item.clothCraftName : ',' + item.clothCraftName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="附件">
                            <template>
                                <template v-for="(item, index) in clothItemInfoWithIn.orderClothAdjuncts">
                                    {{ index == 0 ? item.adjunctName + ' * ' + item.num : ',' + item.adjunctName + ' * ' + item.num }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <!--            <el-descriptions-item label="预计收衣">{{}}</el-descriptions-item>-->
                        <el-descriptions-item label="衣服状态">
                            <template>
                                <span v-if="clothItemInfoWithIn.flowStatus == '3'">未上挂</span>
                                <span v-if="clothItemInfoWithIn.flowStatus == '4'">已上挂</span>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="挂衣号">
                            <template v-for="item in hangerList">
                                {{ clothItemInfoWithIn.clothHangerId == item.id ? item.name + '-' + clothItemInfoWithIn.clothHangerCode + '#' : '' }}
                            </template>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-row>
                <el-row :gutter="20" style="margin-top: 20px">
                    <el-col :span="5">
                        <div class="head-upHanger-one" :style="{ border: '1px solid #ccc' }">
                            <el-table :data="hangerList" ref="singleTable" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" highlight-current-row @current-change="handleNodeClick">
                                <<el-table-column property="name" label="挂架名称" style="width: 100%; text-align: center" />
                            </el-table>
                        </div>
                    </el-col>
                    <el-col :span="19">
                        <div class="head-upHanger-two" :style="{ border: '1px solid #ddd' }">
                            <el-radio-group v-model="detailId" size="medium">
                                <el-radio-button v-for="detail in detailList" :key="detail.id" :label="detail.id" border style="margin-top: 10px; margin-left: 10px" :style="{ border: '1px solid #ddd' }">{{ detail.code }}# {{ detail.isHangerCount }} 件 </el-radio-button>
                            </el-radio-group>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <el-button type="primary" style="width: 50%; height: 40px; margin-top: 30px; text-align: center" size="small" @click="submitForm">提交 </el-button>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getOrderClothItemListByUpHanger, reFlowCloth } from '@/api/order/clothItem'
import { getHangerList } from '@/api/cloth/hanger'
import { getHangerInfoByHangerCodeAndId, getIsHangerList, upHanger } from '@/api/cloth/hangerDetail'

export default {
    name: 'upHanger',
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 衣服表格数据
            clothItemList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                washCode: null,
                orderNo: null,
                flowStatus: ''
            },
            queryParams2: {
                pageNum: 1,
                pageSize: 10,
                washCode: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {},
            // 右侧衣服信息vo
            clothItemInfo: null,
            // 上挂页面衣服信息vo
            clothItemInfoWithIn: null,
            hangerList: [],
            detailList: [],
            detailInfo: null,
            detailId: null,
            clothItemId: null,
            hangerName: null,
            currentRow: null
        }
    },
    created() {
        this.getHangerList()
        this.getList()
    },
    methods: {
        calculateClothName(row) {
            var clothName = row.clothItemName
            if (row.orderClothTypes) {
                row.orderClothTypes.forEach((item) => {
                    clothName += ' 【' + item.clothTypeName + '】'
                })
            }
            return clothName
        },
        reFlow(row) {
            this.$confirm('是否确认将该衣物重洗？')
                .then(() => {
                    reFlowCloth(row.id).then((response) => {
                        this.$message.success('操作成功')
                        this.clothItemInfo = null
                        this.getList()
                    })
                })
                .catch(() => {})
        },
        // 单击事件
        handleNodeClick(data) {
            this.hangerInfo = data
            this.getHangerDetail()
        },
        getHangerDetail() {
            getIsHangerList(this.hangerInfo.id).then((response) => {
                this.detailList = response.data
            })
        },
        getHangerList() {
            getHangerList({ pageNum: 1, pageSize: 999 }).then((response) => {
                this.hangerList = response.rows
            })
        },
        /** 查询衣服列表 */
        getList() {
            this.loading = true
            getOrderClothItemListByUpHanger(this.queryParams).then((response) => {
                this.clothItemList = response.data.records
                this.total = response.data.total
                this.loading = false
            })
        },
        getOrderClothItemInfo() {
            if (this.queryParams2.washCode == null) {
                this.$message.error('条码不能为空')
            }
            getOrderClothItemListByUpHanger(this.queryParams2).then((response) => {
                this.clothItemInfo = response.data.records[0]
                this.total = response.data.total
                this.loading = false
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {}
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        /** 修改按钮操作 */
        handleUpdateHanger(row) {
            this.clothItemInfoWithIn = row
            if (this.hangerList.length == 0) {
                this.clothItemId = row.id
                this.open = true
                this.title = '分配挂衣号'
            } else {
                // 判断是否已上挂   未上挂
                if (this.clothItemInfoWithIn.clothHangerCode == null || this.clothItemInfoWithIn.clothHangerCode == '') {
                    const hangerVO = this.hangerList[0]
                    getIsHangerList(hangerVO.id).then((response) => {
                        this.detailList = response.data
                        this.clothItemId = row.id
                        this.detailId = null
                        this.open = true
                        this.title = '分配挂衣号'
                        var _this = this
                        setTimeout(function () {
                            console.log(this)
                            console.log(_this)
                            _this.$refs.singleTable.setCurrentRow(hangerVO)
                        }, 300)
                    })
                } else {
                    // 已上挂
                    const vo = this.hangerList.find((item) => item.id == this.clothItemInfoWithIn.clothHangerId)

                    getHangerInfoByHangerCodeAndId(this.clothItemInfoWithIn.clothHangerId, this.clothItemInfoWithIn.clothHangerCode).then((response) => {
                        this.detailInfo = response.data
                        this.detailId = this.detailInfo.id
                        this.clothItemId = row.id
                        this.open = true
                        this.title = '分配挂衣号'
                        var _this = this
                        setTimeout(function () {
                            _this.$refs.singleTable.setCurrentRow(vo)
                        }, 300)
                    })
                }
            }
        },
        /** 提交按钮 */
        submitForm() {
            if (this.detailId == null) {
                this.$message.error('挂衣位置不能为空')
            }
            const vo = this.detailList.find((item) => item.id == this.detailId)
            upHanger(this.clothItemId, vo.hangerId, vo.code).then((response) => {
                this.$modal.msgSuccess('上挂成功')
                this.open = false
                this.getList()
                this.clothItemId = null
                this.clothItemInfo = null
            })
        },
        checkClose(done) {
            this.$confirm('是否关闭表单，关闭后数据将丢失？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        },
        handleStatusChange(row) {
            let text = row.status === '0' ? '启用' : '停用'
            this.$confirm('确认要' + text + ' ' + row.name + ' 吗？')
                .then(function () {
                    return updateClothItemStatus(row.id, row.status)
                })
                .then(() => {
                    this.$modal.msgSuccess(text + '成功')
                })
                .catch(function () {
                    row.status = row.status === '0' ? '1' : '0'
                })
        }
    }
}
</script>
<style>
.head-upHanger-one {
    height: 300px;
    display: block;
    overflow-y: auto;
}
.head-upHanger-two {
    height: 300px;
    display: block;
    overflow-y: scroll;
}
</style>