duoji-frontend/src/views/roadwayManage/index.vue

<template>
    <div>
        <div class="button-box">
            <a-button type="primary" class="open" @click="confirmLight('open')">
                打开全部光源
            </a-button>
            <a-button type="primary" class="close" @click="confirmLight('close')">
                关闭全部光源
            </a-button>
            <a-button type="primary" @click="showModel('add','')">
                新增巷道
            </a-button>
        </div>
        
        
        <a-table
         style="margin-top:40px"
            :columns="columns"
            :row-key="record => record.id"
            :data-source="data"
            :pagination="pagination"
            @change="handleGetStreetList"
        >
          <span slot="leftType" slot-scope="text">
               {{ text === null ? '-' : text === 0 ? '单伸' : '双伸' }}
          </span>
          <span slot="rightType" slot-scope="text">
               {{ text === null ? '-' : text === 0 ? '单伸' : '双伸' }}
          </span>
          <span slot="connectStatus" slot-scope="text">
               {{ text === 1 ? '已连接' : "未连接" }}
          </span>
          <span slot="plc" slot-scope="text" v-if="text.plcIp">
               {{ text.plcIp }}:{{text.plcPort}}
          </span>
          
          <span slot="sensorGun" slot-scope="text">
               <template>
                <span v-if="text.rightSensorGunIp && text.leftSensorGunIp">{{text.leftSensorGunIp}}:{{text.leftSensorGunPort}} 、{{text.rightSensorGunIp}}:{{text.rightSensorGunPort}}</span>
                <span v-else>
                    <span v-if="text.leftSensorGunIp">{{text.leftSensorGunIp}}:{{text.leftSensorGunPort}}</span>
                    <span v-if="text.rightSensorGunIp">{{text.rightSensorGunIp}}:{{text.rightSensorGunPort}}</span>
                </span>
            </template>
          </span>
          <span slot="actions" slot-scope="text">
            <template>
                <span v-if="text.camera1Name ">{{text.camera1Name}} </span>
                <span v-else>
                    <span >{{text.camera1Name}}</span>
                    
                </span>
            </template>
          </span>
          <span slot="action" slot-scope="text, record">
              <a @click="openOneLight(record.id)">
            打开光源
          </a>
          <a-divider type="vertical"/>
          <a @click="closeOneLight(record.id)">
            关闭光源
          </a>
          <a-divider type="vertical"/>
          <a @click="showModel('edit',record)">
            编辑
          </a>
          <a-divider type="vertical"/>
          <a-popconfirm
              title="是否删除?"
              @confirm="() => delDosage(record)"
          >
            <a>删除</a>
          </a-popconfirm>
          </span>
        </a-table>
        <Model
            :visible.sync="visible"
            :modelTitle="modelTitle"
            :modelData.sync="modelData"
            @sure="submit"
            @close="closeModel"
        />
    
    </div>
</template>


<script>
import Model from "./model.vue"
const columns = [
    {
        title: '巷道名称',
        dataIndex: 'name',
    },
    {
        title: '巷道标识',
        dataIndex: 'plcId',
    },
    {
        title: '客户端IP',
        scopedSlots: { customRender: 'plcIp' }
    },
    {
        title: '客户端连接状态',
        scopedSlots: { customRender: 'connectStatus' }
    },
    {
        title: '左货架类型',
        dataIndex: 'leftType',
        scopedSlots: { customRender: 'leftType' }
    },
    {
        title: '右货架类型',
        dataIndex: 'rightType',//若这里保留，slot插槽的text即代表rightType，否则text.rightType才代表rightType本身
        scopedSlots: {customRender: 'rightType'}
    },
    {
        title: '对应球机',
        scopedSlots: { customRender: 'actions' }
    },
    {
        title: '修改时间',
        dataIndex: 'updateTime',
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
    },
];
export default {
    data() {
        return {
            pageNum:1,
            pageSize:10,
            data: [],
            pagination:{
                total:0,
                defaultPageSize:10, // 默认每页显示数量
                showTotal: total => `共 ${total} 条数据`, // 显示总数
                showSizeChanger:true, // 显示可改变每页数量
                pageSizeOptions: ['10', '20', '30'],
                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
            },
            loading: false,
            columns,
            visible:false,
            modelTitle:'',
            modelData:[],
            
        };
    },
    mounted() {
        this.handleGetStreetList()
       
    },
    methods: {
        handleGetStreetList(pagination) {
            console.log(pagination)
            if(pagination){
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.pageNum = pagination.current;
                this.pageSize = pagination.pageSize;
            }
            this.request();
        },
        request(){
            this.$api.httpApi.getStreetList({
                data: {
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                }
            }).then(res => {
                const pagination = { ...this.pagination };
                pagination.total = res.data.total;
                this.data = res.data.list;
                this.pagination = pagination;
            }).catch(err => {

            });
        },
        showModel(type,data){
            this.visible = true
            console.log(type)
            if(type=='add'){
                this.modelTitle = "新增巷道"
            }else if(type=='edit'){
                this.modelTitle = "编辑巷道"
                this.modelData = data
            }
        },
        
        submit(visible){
            this.visible = visible
            this.handleGetStreetList()
        },
        
        closeModel(visible,data){
            this.visible = visible
            this.modelData=data
        },
        delDosage(data){
            console.log(data.id)
            var id=data.id
            this.$axios.delete('/street/'+id, {
                data: {}
            }).then(res => {
                if(res.code==200){
                    this.$message.success('删除巷道成功');
                    this.handleGetStreetList()
                }
            }).catch(err => {

            })
        },
        confirmLight(type) {
            const that = this
            if(type == "open"){
                this.$confirm({
                    title: "打开光源",
                    content: "确认打开光源？",
                    okText: '确认',
                    onOk() {
                        return new Promise((resolve, reject) => {
                            that.openLight();
                            setTimeout(resolve, 1000);
                        }).catch(() => console.log('Oops errors!'));  
                    },
                    cancelText: '取消',
                });
            }else{
                this.$confirm({
                    title: "关闭光源",
                    content: "确认关闭光源？",
                    okText: '确认',
                    onOk() {
                        return new Promise((resolve, reject) => {
                            that.closeLight();
                            setTimeout(resolve, 1000);
                            this.$message.success('已关闭光源');
                        }).catch(() => console.log('Oops errors!'));  
                    },
                    cancelText: '取消',
                });
            }
        },
        openOneLight(streetId){
            console.log("openOneLight"+streetId)
            this.$axios.get('/street/lightSource/open/' + streetId, {
                
            }).then(res => {
                if(res.code==200){
                    this.$message.success('已打开光源');
                }
               
            }).catch(err => {

            })
        },
        closeOneLight(streetId){
            console.log("closeOneLight"+streetId)
            this.$axios.get('/street/lightSource/close/' + streetId, {
                
            }).then(res => {
                if(res.code==200){
                    this.$message.success('已关闭光源');
                }
               
            }).catch(err => {

            })
        },
        openLight(){
            console.log("openLight")
            this.$api.httpApi.openLight().then(res => {
                
                
            }).catch(err => {

            });
        },
        closeLight(){
            this.$api.httpApi.closeLight().then(res => {
                
                
            }).catch(err => {

            });
        }
    },
    components:{
        Model
    }
};
</script>
<style lang="scss" scoped>
    .add{
        position: absolute;
        top:20px;
        right: 40px;
    }
    .button-box{
        position: absolute;
        top:20px;
        right: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        .open{
            margin-right: 15px;
        }
        .close{
            margin-right: 15px;
        }
    }
</style>