update

gaosp

2024-02-07 784e6182d02076a508ba7c6086eeacdffadcd942

update

 src/api/Api.js

@@ -1,7 +1,7 @@
/*
 * @Date: 2024-01-10 20:37:45
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-29 20:33:21
 * @LastEditTime: 2024-02-03 21:34:25
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/api/Api.js
 */
import ajax from '@/utils/ajax'
@@ -110,7 +110,34 @@
        url: '/machinedata/getbyid',
        method: 'POST'
    },
    
    workshopDel: {
        url: '/workshop/delete',
        method: 'POST'
    },
    workshopUpdate: {
        url: '/workshop/update',
        method: 'POST'
    },
    workshopCreate: {
        url: '/workshop/create',
        method: 'POST'
    },
    sectionCreate: {
        url: '/section/create',
        method: 'POST'
    },
    sectionUpdate: {
        url: '/section/update',
        method: 'POST'
    },
    sectionQuery: {
        url: '/section/listByWorkshop',
        method: 'GET'
    },
    sectionDel: {
        url: '/section/delete',
        method: 'POST'
    },
}
// æ­£å¼çŽ¯å¢ƒé…ç½®åœ°å€
export const URL_CFG = {

 src/container/Map/Map.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 23:47:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-02-03 00:01:53
 * @LastEditTime: 2024-02-05 16:57:29
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
-->
<template>
@@ -204,7 +204,7 @@
                this.map = []
            } else {
                getRequest('machineList',{plantId: val}).then(res => {
                        this.plantDeviceList = res.list.map(item => {
                        this.plantDeviceList = res.data.list.map(item => {
                            return {
                                machineId: item.id,
                                machineName: item.machineName

 src/container/list/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-06 17:40:19
 * @LastEditors: Sneed
 * @LastEditTime: 2024-02-02 22:12:14
 * @LastEditTime: 2024-02-03 23:21:10
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/list/index.vue
-->
<template>
@@ -11,11 +11,7 @@
        </div>
        <div class="table">
            <slot name="table-tool"></slot>
            <el-table
            stripe
            :data="tableData"
            v-loading="loading"
            style="width: 100%;margin-top: 20px;">
            <el-table stripe :data="tableData" v-loading="loading" style="width: 100%;margin-top: 20px;">
                <slot name="columns"></slot>
                <!-- <el-table-column
                    prop="date"
@@ -33,201 +29,225 @@
                </el-table-column> -->
            </el-table>
            <div v-if="total" class="pagination">
                <el-pagination
                @current-change="currentChange"
                @prev-click="currentChange"
                @next-click="currentChange"
                style="background: transparent;"
                :page-size="pageSize"
                :current-page="current"
                layout="prev, pager, next"
                :total="total">
                <el-pagination @current-change="currentChange" @prev-click="currentChange" @next-click="currentChange"
                    style="background: transparent;" :page-size="pageSize" :current-page="current"
                    layout="prev, pager, next" :total="total">
                </el-pagination>
            </div>
            

        </div>
    </div>
</template>
<script>
    export default {
        props: {
            url: {
                type: String
            },
            hideSearchBox: {
                type: Boolean,
                default: false
            }
export default {
    props: {
        url: {
            type: String
        },
        data () {
            return {
                tableData: [],
                pageSize: 10,
                current: 1,
                total: 0,
                loading: false,
                params: {}
            }
        hideSearchBox: {
            type: Boolean,
            default: false
        },
        created () {
        data: {
            type: Object,
            default: () => { return {} }
        }
    },
    data() {
        return {
            tableData: [],
            pageSize: 10,
            current: 1,
            total: 0,
            loading: false,
            params: {}
        }
    },
    mounted() {
        this.pageQuery()
    },
    methods: {
        currentChange(e) {
            this.current = e
            this.pageQuery()
        },
        methods: {
            currentChange (e) {
                this.current = e
                this.pageQuery()
            },
            pageQuery(params) {
                if (params) this.params = params
                this.loading = true
                this.$http.postJson(this.url,{
                    ...this.params,
                    pageSize: this.pageSize,
                    current: this.current,
                }).then(res => {
                    console.log(res)
                    this.tableData = res.data.records || []
                    this.total = res.data.total
                }).finally(() => {
                    this.loading = false
                })
            }
        },
    }
        pageQuery(params) {
            if (params) this.params = params
            this.loading = true
            this.$http.postJson(this.url, {
                ...this.params,
                ...this.data,
                pageSize: this.pageSize,
                current: this.current,
            }).then(res => {
                console.log(res)
                this.tableData = res.data.records || []
                this.total = res.data.total
            }).finally(() => {
                this.loading = false
            })
        }
    },
}
</script>
<style lang="scss">
    .list {
        width: 100%;
        height: 100%;
        overflow: auto;
        .table {
            .hover-row {
                background-color: transparent;
                td.el-table__cell {
                    background-color: transparent;
                }
            }
            .el-table::before {
                background-color: transparent;
            }
            .el-table th {
                color: #E6E5E5;
                background-color: #182D54;
                border-bottom: none;
            }
            .el-table {
                color: #E6E5E5;
                background: transparent;
                background-color: transparent;
                border-bottom: none;
                padding: 0;
            }
            .el-table__fixed-right::before, .el-table__fixed::before {
                background: transparent;
            }
            .el-table td, .el-table--striped .el-table__body tr.el-table__row--striped td,.el-table--enable-row-hover .el-table__body tr:hover>td{
                color: #E6E5E5;
                border-bottom: none;
                background: transparent;
                background-color: transparent;
                // padding: 0;
            }
            .el-table tr{
                color: #E6E5E5;
                border-bottom: none;
                background: transparent;
                background-color: transparent;
                border-bottom: none;
                padding: 0;
            }
            .el-table tr.el-table__row--striped {
                background-color: #182D54!important;
.list {
    width: 100%;
    height: 100%;
    overflow: auto;

            }
            .el-table__header-wrapper {
                border: none;
                border-bottom: none;
                padding: 0;
    .table {
        .hover-row {
            background-color: transparent;

            td.el-table__cell {
                background-color: transparent;
            }
        }
        .pagination {

        .el-table::before {
            background-color: transparent;
        }

        .el-table th {
            color: #E6E5E5;
            background-color: #182D54;
            border-bottom: none;
        }

        .el-table {
            color: #E6E5E5;
            background: transparent;
            background-color: transparent;
            border-bottom: none;
            padding: 0;
        }
        .el-pager li {

        .el-table__fixed-right::before,
        .el-table__fixed::before {
            background: transparent;
        }

        .el-pagination button:disabled {
        .el-table td,
        .el-table--striped .el-table__body tr.el-table__row--striped td,
        .el-table--enable-row-hover .el-table__body tr:hover>td {
            color: #E6E5E5;
            border-bottom: none;
            background: transparent;
            background-color: transparent;
            // padding: 0;
        }
        .el-pagination .btn-next, .el-pagination .btn-prev {

        .el-table tr {
            color: #E6E5E5;
            border-bottom: none;
            background: transparent;
            background-color: transparent;
            border-bottom: none;
            padding: 0;
        }

        .el-table tr.el-table__row--striped {
            background-color: #182D54 !important;

        }

        .el-table__header-wrapper {
            border: none;
            border-bottom: none;
            padding: 0;
        }
    }

    .pagination {
        background: transparent;
    }

    .el-pager li {
        background: transparent;
    }

    .el-pagination button:disabled {
        background: transparent;
    }

    .el-pagination .btn-next,
    .el-pagination .btn-prev {
        background: transparent;
    }
}
</style>
<style lang="scss" scoped>
    .list {
        padding:0 30px;
    }
    .search {
        // margin: 20px 30px;
        padding: 30px 0px;
        min-height: 160px;
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }
    .search:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 4px;
        background: url('./border.png') 100% 100%  no-repeat;
        background-size: contain;
    }
    .search:after {
        content: '';
.list {
    padding: 0 30px;
}

.search {
    // margin: 20px 30px;
    padding: 30px 0px;
    min-height: 160px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.search:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: url('./border.png') 100% 100% no-repeat;
    background-size: contain;
}

.search:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: url('./border.png') 100% 100% no-repeat;
    background-size: contain;
}

.table {
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 20px 0px;
    background: transparent;
    overflow: auto;

    .pagination {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 4px;
        background: url('./border.png') 100% 100%  no-repeat;
        background-size: contain;
        right: 40px;
    }
    .table {
        margin-top: 20px;
        margin-bottom: 30px;
        padding: 20px 0px;
        background: transparent;
        overflow: auto;
        .pagination {
            position: absolute;
            bottom: 0;
            right: 40px;
        }
    }
    .table::-webkit-scrollbar {
    width: 4px; /* Chrome/Safari */
    }
}

    /* å®šä¹‰æ»‘块（thumb）的样式 */
    .table::-webkit-scrollbar-thumb {
    background-color: #999; /* Chrome/Safari */
    }
.table::-webkit-scrollbar {
    width: 4px;
    /* Chrome/Safari */
}

    /* å½“滑块被按下时的样式 */
    .table::-webkit-scrollbar-thumb:hover {
    background-color: #666; /* Chrome/Safari */
    }
/* å®šä¹‰æ»‘块（thumb）的样式 */
.table::-webkit-scrollbar-thumb {
    background-color: #999;
    /* Chrome/Safari */
}

    /* å®šä¹‰ä¸¤ä¾§è¾¹ç•Œçš„样式 */
    .table::-webkit-scrollbar-track {
    background-color: #f5f5f5; /* Chrome/Safari */
    }
/* å½“滑块被按下时的样式 */
.table::-webkit-scrollbar-thumb:hover {
    background-color: #666;
    /* Chrome/Safari */
}

</style>
/* å®šä¹‰ä¸¤ä¾§è¾¹ç•Œçš„样式 */
.table::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    /* Chrome/Safari */
}</style>

 src/container/maintenance/dailyMAdd.vue

@@ -163,7 +163,7 @@
                    startDateTo,

                    completeDateFrom,

                    completeDateTo,

                    style: this.styleValue

                    style: this.styleValue - 1

                }).then(res => {

                    if (res.result === 'SUCCESS') {

                        this.$message({


 src/container/maintenance/index.vue

@@ -1,13 +1,13 @@
<!--
 * @Date: 2024-01-06 17:40:19
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-30 21:05:16
 * @LastEditTime: 2024-02-03 23:27:34
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/maintenance/index.vue
-->
<template>
    <div class="maintenance">
        <Nav :name="`设备保养 / ${navName}`"></Nav>
        <List ref="list" url="/maintain/pageQuery">
        <List ref="list" url="/maintain/pageQuery" :data="{style: $route.params.style - 1}">
            <template slot="search">
                <div class="item">
                    <span>统一编号</span>
@@ -137,9 +137,15 @@
        },
    },
    watch: {
        $route () {
            this.queryInfo.style = this.$route.params.style
            this.query()
        $route: {
            handler () {
                this.queryInfo.style = this.$route.params.style
                this.$nextTick(() => {
                    this.$refs.list && this.query()
                })
                
            },
            immediate:  true
        }
    },
    data() {
@@ -163,7 +169,7 @@
    },
    mounted() {
        this.init()
        this.query()
        // this.query()
    },
    methods: {
        init () {

 src/container/mapPreview/Map.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 23:47:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-02-03 00:01:58
 * @LastEditTime: 2024-02-05 17:11:25
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/mapPreview/Map.vue
-->
<template>
@@ -107,11 +107,11 @@
                }
                if(val) {
                    getRequest('machineList',{plantId: val}).then(res => {
                        this.plantDeviceList = res.list.map(item => {
                            return {
                        this.plantDeviceList = res.data.list.map(item => {
                            return Object.assign(item,{
                                machineId: item.id,
                                machineName: item.machineName
                            }
                            })
                        }) || []
                    })
                }
@@ -130,7 +130,7 @@
            if(this.move) return
            let info = {}
            if (v.id) {
                info = this.plantDeviceList.find(item => item.id == v.id)
                info = this.plantDeviceList.find(item => item.machineId == v.id)
            }
            window.localStorage.setItem('deviceInfo',JSON.stringify(info))
            this.$router.push({

 src/container/workshopList/Manage-add-update.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,139 @@
<template>
    <div  class="add-workshoplist">
        <el-dialog top="94px" :close-on-click-modal="false" width="400px" @close="cancel" :visible.sync="addVisible">
            <!-- æ·»åŠ å†…容-->
            <el-form :model="dataForm" label-width="50px" ref="dataForm">
                <el-row :gutter="24">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="dataForm.name" placeholder="名称" maxlength="20" clearable></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>

            </el-form>
            <!-- æŒ‰é’® -->
            <span slot="footer" class="dialog-footer">
                <!-- <el-button type="ghost" size="mini" style="width: 150px" @click="cancel">取消</el-button> -->
                <el-button class="active" size="mini" type="primary" @click="dataFormSubmit()">保存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getRequest } from '@/api/Api'
export default {
    props: ['addVisible', 'row'],
    data() {
        return {
            visible: false,
            dataForm: {
                id: 0, // title显示新增还是修改
                name: ''
            }

        }
    },
    watch: {
        addVisible: {
            handler(val) {
                if (val) {
                    this.init()
                }
            },
            immediate: true
        }
    },
    created() {
        this.init(this.row)
    },
    methods: {
        init(row) {
            if (this.$refs['dataForm']) {
                this.$refs['dataForm'].resetFields()
            }
            if (row !== undefined) {
                this.dataForm.id = row.id
                this.dataForm.name = row.name

            } else {
                this.dataForm.id = ''
            }
        },
        /* æŸ¥è¯¢ä½¿ç”¨éƒ¨é—¨*/
        cancel() {
            this.$emit('close')
        },
        /* æäº¤*/
        dataFormSubmit() {
            if (this.dataForm.id === '') { // æ–°å¢ž
                getRequest('workshopCreate',this.dataForm).then(res => {
                    this.$message({
                        message: '新增成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.$emit('confirm')
                            this.visible = false
                        }
                    })
                })
            } else {
                getRequest('workshopUpdate',this.dataForm).then(res => {
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.$emit('confirm')
                            this.visible = false
                        }
                    })
                })
            }
        }
    }
}
</script>

<style lang="scss">
#app .add-workshoplist .el-dialog {
    height: 300px;
}
.el-form-item__content {

    .el-select,
    .el-input {
        width: 100%;
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

 src/container/workshopList/Section.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,209 @@
<template>
    <el-dialog top="94px" :close-on-click-modal="false" width="100%" @close="cancel" :visible.sync="show">
        <!-- æ·»åŠ å†…容-->
        <el-form :model="dataForm" label-width="100px" ref="dataForm">
            <el-row :gutter="24">
                <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="dataForm.name" placeholder="名称" maxlength="20" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :style="{textAlign: dataForm.id ? 'right' : ''}">
                    <el-button class="active" size="mini" type="primary" @click="dataFormSubmit()">{{dataForm.id ? '更新': '新增'}}</el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="table" v-show="!dataForm.id">
            <el-table
            stripe
            :data="tableData"
            style="width: 100%;margin-top: 20px;">
            <el-table-column type="index" label="序号" width="180">
                </el-table-column>
                <el-table-column prop="name" label="工段">
                </el-table-column>
                <el-table-column width="320" align="center" label="操作" prop="editor">
                    <template slot-scope="scope">
                        <a class="table-action table-edit" @click="edit(scope.row)">编辑</a>
                        <a class="table-action table-del" @click="del(scope.row)">删除</a>
                    </template>
                </el-table-column>
        </el-table>
        </div>
		
        <!-- æŒ‰é’® -->
        <span slot="footer" class="dialog-footer">
            <!-- <el-button class="active" size="mini" type="primary" @click="dataFormSubmit()">保存</el-button> -->
        </span>
    </el-dialog>
</template>

<script>
import { getRequest } from '@/api/Api'
export default {
    props: ['show', 'row'],
    data() {
        return {
            dataForm: {
                workshopId: 0, // title显示新增还是修改
                name: '',
                id: ''
            },
            tableData: []
        }
    },
    watch: {
        show: {
            handler(val) {
                if (val) {
                    this.init(this.row)
                }
            },
            immediate: true
        }
    },
    methods: {
        query () {
            getRequest('sectionQuery',{workshopId: this.dataForm.workshopId}).then(res => {
                this.tableData = res.data
                this.dataForm.id = ''
                this.dataForm.name = ''
            })
        },
        init(row) {
            if (this.$refs['dataForm']) {
                this.$refs['dataForm'].resetFields()
            }
            if (row && row.id) {
                this.dataForm.workshopId = row.id
                this.query()
            } else {
                this.dataForm.workshopId = ''
            }
        },
        /* æŸ¥è¯¢ä½¿ç”¨éƒ¨é—¨*/
        cancel() {
            this.$emit('close')
        },
        edit (row) {
            this.dataForm.id = row.id
            this.dataForm.name = row.name
        },
        del(row) {
            let ids = []
            ids.push(row.id)
            this.$confirm('确定要永久删除此项?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                getRequest('sectionDel', {ids}).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功！'
                    })
                    this.query();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        /* æäº¤*/
        dataFormSubmit() {
            if (!this.dataForm.id) { // æ–°å¢ž
                getRequest('sectionCreate',this.dataForm).then(res => {
                    this.$message({
                        message: '新增成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.query()
                            // this.$emit('confirm')
                        }
                    })
                })
            } else {
                getRequest('sectionUpdate',this.dataForm).then(res => {
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.query()
                            // this.$emit('confirm')
                        }
                    })
                })
            }
        }
    }
}
</script>

<style lang="scss">
.table {
        .hover-row {
            background-color: transparent;

            td.el-table__cell {
                background-color: transparent;
            }
        }

        .el-table::before {
            background-color: transparent;
        }

        .el-table th {
            color: #E6E5E5;
            background-color: #182D54;
            border-bottom: none;
        }

        .el-table {
            color: #E6E5E5;
            background: transparent;
            background-color: transparent;
            border-bottom: none;
            padding: 0;
        }

        .el-table__fixed-right::before,
        .el-table__fixed::before {
            background: transparent;
        }

        .el-table td,
        .el-table--striped .el-table__body tr.el-table__row--striped td,
        .el-table--enable-row-hover .el-table__body tr:hover>td {
            color: #E6E5E5;
            border-bottom: none;
            background: transparent;
            background-color: transparent;
            // padding: 0;
        }

        .el-table tr {
            color: #E6E5E5;
            border-bottom: none;
            background: transparent;
            background-color: transparent;
            border-bottom: none;
            padding: 0;
        }

        .el-table tr.el-table__row--striped {
            background-color: #182D54 !important;

        }

        .el-table__header-wrapper {
            border: none;
            border-bottom: none;
            padding: 0;
        }
    }
</style>

 src/container/workshopList/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,196 @@
<!--
 * @Date: 2024-01-06 17:40:19
 * @LastEditors: Sneed
 * @LastEditTime: 2024-02-03 22:53:16
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshopList/index.vue
-->
<template>
    <div class="maintenance">
        <Nav name="车间、工段维护"></Nav>
        <List ref="list" url="/workshop/pageQuery">
            <template slot="search">
                <div class="item">
                    <span>名称</span>
                    <el-input class="item-value" v-model="queryInfo.name" clearable></el-input>
                </div>
                <div class="item" style="flex: 1 1 auto;justify-content: flex-end;">
                    <el-button type="primary" size="small" style="width: 150px;" @click="query">查询</el-button>
                    <el-button type="ghost" size="small" style="width: 150px;" @click="reset">重置</el-button>
                </div>
            </template>

            <template slot="table-tool">
                <el-button type="primary" size="mini" style="width: 150px;" @click="add">新增</el-button>
            </template>

            <template slot="columns">
                <el-table-column type="index" label="序号" width="180">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="sectionNames" label="工段">
                </el-table-column>
                <el-table-column width="320" align="center" label="操作" prop="editor">
                    <template slot-scope="scope">
                        <a class="table-action table-edit" @click="editDeviceType(scope.row)">编辑</a>
                        <a class="table-action table-edit" @click="editSection(scope.row)">维护工段</a>
                        <a class="table-action table-del" @click="deleteHandle(scope.row)">删除</a>
                    </template>
                </el-table-column>
            </template>

        </List>
        <manage-add-update v-if="addOrUpdateVisible" :addVisible="addOrUpdateVisible" @close="close" @confirm="confirm"
            :row="row"></manage-add-update>
        <Section :row="row" @close="close" @confirm="confirm" :show="sectionUpdate"></Section>
    </div>
</template>
<script>
import List from '../list/index.vue'
import ManageAddUpdate from './Manage-add-update'
import Section from './Section'
import { getUrl, getRequest,getFormRequest } from '@/api/Api'
import Nav from '@/components/nav'
export default {
    components: {
        List,
        ManageAddUpdate,
        Nav,
        Section
    },
    data() {
        return {
            url: '',
            queryInfo: {
                name: ''
            },
            row: {},
            addOrUpdateVisible: false,
            sectionUpdate: false
        }
    },
    methods: {
        editSection (row) {
            this.row = row;
            this.sectionUpdate = true
        },
        reset() {
            Object.keys(this.queryInfo).forEach(key => {
                this.queryInfo[key] = ''
            })
        },
        query() {
            this.$refs.list.pageQuery(this.queryInfo)
        },
        add() {
            this.row = { id: '' }
            this.addOrUpdateVisible = true
        },
        editDeviceType(row) {
            this.row = row;
            this.addOrUpdateVisible = true;
        },
        close() {
            this.sectionUpdate  = false
            this.addOrUpdateVisible = false
            this.query()
        },
        confirm() {
            this.query()
            this.close()
        },
        addOrUpdateHandle(row) {
            this.row = row
            this.addOrUpdateVisible = true
        },
        deleteHandle(row) {
            let ids = []
            ids.push(row.id)
            this.$confirm('确定要永久删除此项?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                getRequest('workshopDel', {ids}).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功！'
                    })
                    this.query();
                    //this.submitForm()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        }

    },
}
</script>
<style lang="scss">
.maintenance {
    .item-value {
        .el-input__inner {
            background: transparent;
            border-radius: 2px;
            border: 1px solid #435F9E;
        }
    }
}
</style>
<style lang="scss" scoped>
.maintenance {
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #FFF;
    display: flex;
    flex-direction: column;

    .nav {
        padding: 10px 30px;
    }

    .item {
        margin-top: 20px;
        margin-left: 50px;
        display: flex;
        align-items: center;

        span {
            width: 120px;
            font-size: 16px;
            font-family: PingFangSC, PingFang SC;
            color: #C6DCE0;
            text-align: right;
            padding-right: 20px;
        }

        .item-value {
            width: 200px;
            border: 1px solid #435F9E;
        }

        .btn {
            line-height: 1.5;
            width: 100px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }

        .reset {
            background: #AAB6BA;
            color: #FFF;
        }

        .query {
            background: #5DD1FC;
            color: #FFF;
        }
    }
}
</style>

 src/router/index.js

@@ -93,6 +93,11 @@
        name: 'preview',

        component: () => import('@/container/preview/index')

      },

      {

        path: 'workshopList',

        name: 'workshopList',

        component: () => import('@/container/workshopList/index')

      },

    ]

  },

  // {