jiaoyi-vue/src/views/manage/shop/print/components/table.vue

<template>
    <scTable ref="table" :apiObj="list.apiObj" :params="searchKey" @selectionChange="selectionChange" row-key="id">
        <el-table-column type="selection" width="50" fixed="left"></el-table-column>
        <el-table-column label="序列号" prop="sn" width="220" fixed="left">
            <template #default="scope">
                <span v-if="scope.row.sn">{{ scope.row.sn }}</span>
                <span class="status-danger" v-else>未设置</span>
            </template>
        </el-table-column>
        <el-table-column label="打印机名称" prop="name" width="220">
            <template #default="scope">
                <span v-if="scope.row.name">{{ scope.row.name }}</span>
                <span class="status-danger" v-else>未设置</span>
            </template>
        </el-table-column>
        <el-table-column label="所属商家" prop="id" width="360">
            <template #default="scope">
                <div class="goods-img">
                    <div class="name" v-if="scope.row.poi">
                        <div class="flex-end">
                            {{ scope.row.poi.poi_name }}
                        </div>
                        <span class="dec">{{ scope.row.poi.poi_address }}</span>
                    </div>
                    <div v-else>-</div>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="设备状态" prop="device_state" width="160">
            <template #default="scope">
                <div class="status-success" v-if="scope.row.device_state==0"><sc-status-indicator type="success"></sc-status-indicator> 正常</div>
                <div class="status-danger" v-if="scope.row.device_state==1"><sc-status-indicator type="danger"></sc-status-indicator> 开盖</div>
                <div class="status-info" v-if="scope.row.device_state==2"><sc-status-indicator type="info"></sc-status-indicator> 粘纸</div>
                <div class="status-info" v-if="scope.row.device_state==3"><sc-status-indicator type="info"></sc-status-indicator> 缺纸</div>
            </template>
        </el-table-column>
        <el-table-column label="在线状态" prop="status" width="160">
            <template #default="scope">
                <div class="status-success" v-if="scope.row.online=='ONLINE'"><sc-status-indicator type="success"></sc-status-indicator> 正常</div>
                <div class="status-danger" v-if="scope.row.online=='OFFLINE'"><sc-status-indicator type="danger"></sc-status-indicator> 离线</div>
                <div class="status-info" v-if="scope.row.online=='UNACTIVE'"><sc-status-indicator type="info"></sc-status-indicator> 未激活</div>
                <div class="status-info" v-if="scope.row.online=='DISABLE'"><sc-status-indicator type="info"></sc-status-indicator> 已禁用</div>
            </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_at" width="180"></el-table-column>
        <el-table-column label="操作" width="220" align="right" fixed="right">
            <template #default="scope">
                <el-button-group>
                    <el-button text type="danger" size="small" @click="cancelPeint(scope.row)" v-if="scope.row.poi">解除绑定</el-button>
                    <el-button text type="warning" size="small" @click="table_bind(scope.row)" v-else>绑定商家</el-button>
                    <el-button text type="success" size="small" @click="table_print(scope.row)">打印测试</el-button>
                    <el-popconfirm title="确定删除并解绑该打印机吗？" @confirm="table_del(scope.row, scope.$index)">
                        <template #reference>
                            <el-button text type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>                    
                </el-button-group>
            </template>
        </el-table-column>
    </scTable>
    <formMain ref="formMain" @success="handleSuccess"></formMain>
    <storeData ref="storeData" :multiple="false" @success="handleStore"></storeData>
</template>

<script>
import formMain from './form';
import storeData from "@/views/manage/components/agent";
export default {
    components: {
        formMain,storeData
    },
    data(){
        return {
            list: {
                apiObj: this.$API.print.list
            },
            dataSelect:[],
            dataSelectFull:[],
            searchKey:{},
            bindData:{}
        }
    },
    methods: {
        async handleStore(data){
            var loading = this.$loading();
            var resp = await this.$API.print.edit.post({"sn":this.bindData.sn,'id':this.bindData.id,'poi_id':data.poi_id});
            loading.close();
            if (resp.code == 0) {
                return this.$message.error(resp.msg);
            }
            this.$message.success(resp.msg);
            var that = this;
            setTimeout(function(){
                that.refresh()
            },1500);
        },
        cancelPeint(data){
            this.$confirm(`店铺解绑打印机后，所有核销完后订单将无法正常打印订单，确定执行解绑吗？`, '提示', {
                type: 'warning'
            }).then(async ()=>{
                var resp = await this.$API.print.edit.post({"sn":data.sn,'id':data.id,'poi_id':""});
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                var that = this;
                setTimeout(function(){
                    that.refresh()
                },1500);
            }).catch(()=>{})
        },
        table_bind(data){
            this.bindData = data;
            this.$nextTick(() => {
                this.$refs.storeData.open()
            })
        },
        async table_print(data){
            var loading = this.$loading();
            var resp = await this.$API.print.test.post({'sn':data.sn});
            loading.close();
            if (resp.code == 0) {
                return this.$message.error(resp.msg);
            }
            this.$message.success(resp.msg);
        },
        refresh(){
            this.$refs.table.refresh()
        },
        upData(data){
            this.$refs.table.upData(data)
        },
        handleSuccess(){
            this.$refs.table.refresh()
        },
        sortChange(event){
            if (event.order) {
                var data = {
                    "field":event.prop,
                    "order":event.order
                }
                this.$refs.table.upData(data)
            } else {
                this.$refs.table.reload(this.searchKey)
            }
            return ;
        },
        selectionChange(event){
            this.dataSelect = [];
            var arr = [];
            var arrCompany = [];
            event.forEach(function(val,index){
                arr[index] = val.id;
                arrCompany[index] = val;
            });
            this.dataSelectFull = arrCompany;
            this.dataSelect = arr;
            this.$emit("success",this.dataSelect);
            this.$emit("successFull",this.dataSelectFull);
        },
    }
}
</script>

<style>
.order-name span{display: block;}
.order-name span.dec{color: #999;font-size: 12px;}
.goods-img{display: flex;gap: 5px;}
.goods-img .name span{display: block;}
.goods-img .name span.dec{color: #999;font-size: 12px;}
.desc{
    color: #999;
    font-size: 12px;
}
.flex-btn{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.flex-tags {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}
.flex-btn .el-button.is-text{
    margin-left: 0;
}
.flex-tags-size{
    font-size: 12px;
}
.flex-tags-size span{
    display: block;
    margin-bottom: 5px;
    color: #999;
}
.flex-end{display: flex;align-items: center;justify-content: space-between;}
</style>