增加厂商维护界面

yangys

2024-03-04 4be9e486713f9851be86d2bfd9a03f191f6bc540

增加厂商维护界面

 src/api/Api.js

@@ -17,6 +17,12 @@
    deviceTypeCreate: '/devicetype/create',
    deviceTypeUpdate: '/devicetype/update',
    deviceTypeDelete: '/devicetype/delete',
	
    //生产厂商
    manufacturerCreate: '/manufacturer/create',
    manufacturerUpdate: '/manufacturer/update',
    manufacturerDelete: '/manufacturer/delete',
	
    // è½¦é—´ å·¥æ®µä¸‹å•¦æ•°æ®
    getWsl: '/machine/workshopList',
    getPcl: '/machine/protocolList'
@@ -42,10 +48,7 @@
        url: '/component/pageQuery',
        method: 'POST'
    },
    deviceTypeQuery: {
        url: '/devicetype/pageQuery',
        method: 'POST'
    },
    
    maintainCreate: {
        url: '/maintain/save',
        method: 'POST'
@@ -138,6 +141,27 @@
        url: '/section/delete',
        method: 'POST'
    },
	
    manufacturerQuery: {
        url: '/manufacturer/pageQuery',
        method: 'POST'
    },
    manufacturerCreate: {
        url: '/manufacturer/save',
        method: 'POST'
    },
    manufacturerUpdate: {
        url: '/manufacturer/update',
        method: 'POST'
    },
    manufacturerDelete: {
        url: '/manufacturer/delete',
        method: 'POST'
    },
    manufacturerList:  {
        url: '/manufacturer/list',
        method: 'GET'
    },
}
// æ­£å¼çŽ¯å¢ƒé…ç½®åœ°å€
export const URL_CFG = {
@@ -200,7 +224,17 @@
    console.log(HttpConstants.deviceTypeDelete)
    return sendRequest(HttpConstants.deviceTypeDelete, { ids: ids })
}

//生产厂商函数
export function manufacturerCreate(params) {
    return sendRequest(HttpConstants.manufacturerCreate, params)
}
export function manufacturerUpdate(params) {
    return sendRequest(HttpConstants.manufacturerUpdate, params)
}
export function manufacturerDelete(ids) {
    console.log(HttpConstants.manufacturerDelete)
    return sendRequest(HttpConstants.manufacturerDelete, { ids: ids })
}
// 
export function getWsl(params) {
    return getData(HttpConstants.getWsl, params)

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,141 @@
<template>
    <div class="add-dlg">
        <el-dialog top="94px" :close-on-click-modal="false" width="400px" @close="cancel" :visible.sync="addVisible">
            <!-- æ·»åŠ å†…容-->
            <el-form :model="dataForm" label-width="100px" 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="80" 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 { manufacturerUpdate, manufacturerCreate } 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() {
        //console.log('add create');
        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 === '') { // æ–°å¢ž
                manufacturerCreate(this.dataForm).then(res => {
                    this.$message({
                        message: '新增成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.$emit('confirm')
                            this.visible = false
                        }
                    })
                })
            } else {
                manufacturerUpdate(this.dataForm).then(res => {
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.$emit('confirm')
                            this.visible = false
                        }
                    })
                })
            }
        }
    }
}
</script>

<style lang="scss">
#app .add-dlg .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/manufacturer/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,201 @@
<!--
 * @Date: 2024-01-06 17:40:19
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-29 23:03:05
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/manufacturer/index.vue
-->
<template>
    <div class="maintenance">
        <Nav name="生产厂商管理"></Nav>
        <List ref="list" :url="url">
            <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 width="220" 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-del" @click="deleteHandle(scope.row)">删除</a>
                        <!-- <el-button size="mini" type="text" @click="editDeviceType(scope.row)">编辑</el-button>
                        <el-button size="mini" type="text" @click="deleteHandle(scope.row)">删除</el-button> -->
                    </template>
                </el-table-column>
            </template>
			
        </List>
        <manage-add-update v-if="addOrUpdateVisible" :addVisible="addOrUpdateVisible" @close="close" @confirm="confirm"
             :row="row"></manage-add-update>
    </div>
</template>
<script>
    import List from '../list/index.vue'
    import ManageAddUpdate from './Manage-add-update'
    import { getUrl,manufacturerDelete } from '@/api/Api'
    import Nav from '@/components/nav'
    export default {
        components: {
            List,
            ManageAddUpdate,
            Nav
        },
        data () {
            return {
                url: '',
                queryInfo: {
                    name: ''
                },
                row: {},
                addOrUpdateVisible: false
            }
        },
        created () {
            this.url = getUrl('manufacturerQuery')
            //this.init()
        },
        methods: {
            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.addOrUpdateVisible = false
            },
            confirm() {
                this.query()
                this.close()
            },
            addOrUpdateHandle(row) {
                this.row = row
                this.addOrUpdateVisible = true
            },
            deleteHandle(row) {
                let ids = []
				 
                    ids.push(row.id)
				  
                  //ids = ids.join(',')
                  this.$confirm('确定要永久删除此项?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    deviceTypeDelete(ids).then(res => {
                      // if(res.result == ""){}
                      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

@@ -83,6 +83,12 @@
        name: 'deviceType',

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

      },

      // ç”Ÿäº§åŽ‚商管理

      {

        path: 'manufacturer',

        name: 'manufacturer',

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

      },

      {

        path: 'machineList',

        name: 'machineList',