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

<template>
    <div>
        <a-button type="primary" class="add" @click="showModal('add','')">
            新增
        </a-button>
        <a-table
            :columns="columns"
            :row-key="record => record.id"
            :data-source="data"
            :pagination="pagination"
            @change="handleGetStreetList"
        >
          <span slot="leftType" slot-scope="text">
               {{ text === 0 ? '单伸' : '双伸' }}
          </span>
             <span slot="rightType" slot-scope="text">
               {{ text === 0 ? '单伸' : '双伸' }}
          </span>
          <span slot="actions" slot-scope="text">
            <template>
                <span v-if="text.camera1Name">{{text.camera1Name}}</span>
                <span v-if="text.camera2Name">{{text.camera2Name}}</span>
                <span v-if="text.camera1Name && text.camera2Name">{{text.camera1Name}}/{{text.camera2Name}}</span>
            </template>
          </span>
          <span slot="action" slot-scope="text, record">
          <a @click="showModal('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"
            @sure="submit"
            @close="closeModel"
        />
    </div>
</template>


<script>
import Model from "./model.vue";
const columns = [
    {
        title: '巷道名称',
        dataIndex: 'name',
    },
    {
        title: 'PLC-ID',
        dataIndex: 'plcId',
    },
    {
        title: '左货架类型',
        dataIndex: 'leftType',
        scopedSlots: { customRender: 'leftType' }
    },
    {
        title: '右货架类型',
        dataIndex: '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: {},
            loading: false,
            columns,
            visible:false,
            modelTitle:''
        };
    },
    mounted() {
        this.handleGetStreetList()
    },
    methods: {
        handleGetStreetList(){
            this.$api.httpApi
                .getStreetList({
                    data: {
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                    }
                })
                .then(res => {
                    this.data = res.data.list;
                });
        },
        showModal(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
        },
        closeModel(visible){
            this.visible = visible
        }
    },
    components:{
        Model
    }
};
</script>
<style lang="scss">
    .add{
        position: absolute;
        top:0;
        right: 20px;
    }
</style>