8.18模块“基础数据”新增页面

李林

2023-08-18 95e7cf48fe085f0afd231290bb0b10a12896cdae

8.18模块“基础数据”新增页面

 src/App.vue

@@ -120,6 +120,7 @@
/**滚动条的宽度*/
::-webkit-scrollbar {
  width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: #bdbfc4;

 src/components/view/mbom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,307 @@
<style scoped>
    .title .el-button {
        height: 32px;
        border: 1px solid rgba(190, 190, 190, 0.44);
        box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
        padding: 0 12px;
    }

    .title {
        margin-bottom: 10px;
        padding: 0 20px;
    }

    .title * {
        font-size: 16px;
    }

    .choose {
        padding: 21px 24px;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-bottom: 3px solid rgb(245, 247, 251);
    }

    .choose * {
        font-size: 14px;
    }

    .choose .el-button {
        height: 32px;
        border: 1px solid rgba(190, 190, 190, 0.44);
        box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
        padding: 0 12px;
    }

    .thing {
        width: 100%;
        height: calc(100% - 120px);
        background-color: #fff;
        display: flex;
    }

    .thing .left {
        width: 295px;
        height: calc(100% - 20px);
        border-right: 3px solid rgb(245, 247, 251);
        padding: 16px;
    }

    .thing .left .custom-tree-node span {
        font-size: 14px;
    }

    .thing .left .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .node_i {
        color: orange;
    }

    .el-icon-delete {
        display: none;
        color: #004EA2;
    }

    .custom-tree-node:hover .el-icon-delete {
        display: inline;
    }

    .thing .right {
        width: calc(100% - 305px);
        height: calc(100% - 25px);
        overflow: hidden;
        padding: 10px;
    }

    .table_do {
        color: #004ea0;
        cursor: pointer;
    }
</style>
<style>
    .record_content .title .el-button * {
        font-size: 14px;
    }

    .record_content .title .el-button--default {
        color: #004EA2;
    }

    .record_content .thing .left .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background: rgba(58, 124, 253, 0.2);
        color: #004EA2;
    }

    .record_content .el-tree-node__content {
        height: 30px;
        border-radius: 2px;
    }
</style>

<template>
    <div class="record_content">
        <div class="title">
            <el-row>
                <el-col :span="12" style="line-height: 32px;">物料清单维护</el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-button type="primary" icon="el-icon-plus" style="background: #004EA2;">新增</el-button>
                    <el-button icon="el-icon-edit-outline">修改</el-button>
                    <el-button icon="el-icon-delete" @click="dels">删除</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="choose">
            <span>类型：</span>
            <el-select v-model="search.type" size="small" placeholder="请选择" style="width: 224px;margin-right: 30px;">
                <el-option label="橡胶连接器" :value="0"></el-option>
                <el-option label="金属连接器" :value="1"></el-option>
                <el-option label="湿插拔电连接器" :value="2"></el-option>
                <el-option label="分支组件" :value="3"></el-option>
            </el-select>
            <span>原材料名称：</span>
            <el-select v-model="search.name" size="small" placeholder="请选择" style="width: 224px;margin-right: 30px;">
                <el-option v-for="(a, ai) in product" key="ai" :label="a.name" :value="a.id"></el-option>
            </el-select>
            <el-button size="mini" @click="clean()"><span>重 ç½®</span></el-button>
            <el-button size="mini" type="primary" style="background: #004EA2;"><span>查
                    è¯¢</span></el-button>
        </div>
        <div class="thing">
            <div class="left">
                <el-input v-model="search.technology" suffix-icon="el-icon-search" placeholder="请输入搜索内容" size="small" clearable @input="(val)=>$refs.tree.filter(val)"></el-input>
                <el-tree :data="list" ref="tree" :props="{children: 'children',label: 'name'}" node-key="id" default-expand-all
                    @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen" @node-collapse="nodeClose" :filter-node-method="filterNode"
                    :key="upIndex">
                    <div class="custom-tree-node" slot-scope="{ node, data }">
                        <span><i :class="`node_i ${data.code != '[2]'?'el-icon-folder-opened':'el-icon-tickets'}`"></i>
                            {{data.code}} {{ data.name }}</span>
                        <el-button type="text" size="mini" @click.stop="remove(node, data)">
                            <i class="el-icon-delete"></i>
                        </el-button>
                    </div>
                </el-tree>
            </div>
            <div class="right">
                <el-table :data="tableData" border style="width: 100%;overflow-y: auto;min-height: 100%" max-height="100%"
                    @selection-change="handleSelectionChange" default-expand-all>
                    <el-table-column type="selection" width="50">
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="70">
                    </el-table-column>
                    <el-table-column prop="name" label="原材料名称">
                    </el-table-column>
                    <el-table-column prop="unit" label="单位" width="150">
                    </el-table-column>
                    <el-table-column prop="num" label="数量" width="300">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.num" size="medium" placeholder="请输入单位" clearable @change="(val)=>submitUpData(scope.row.id, val)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <span class="table_do" @click="deleteRow(scope.$index, tableData)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                search: {
                    type: 0,
                    name: null
                },
                process: [],
                product: [],
                list: [{
                    id: 0,
                    name: "工艺",
                    children: [{
                        id: 5,
                        name: "工序"
                    }]
                }, {
                    id: 1,
                    name: "成品"
                }, {
                    id: 2,
                    name: "半成品"
                }],
                checkTreeNode: {},
                tableData: [{
                    id: 1,
                    name: "原材料名称",
                    unit: "单位",
                    num: "数量"
                }, {
                    id: 2,
                    name: "作业人员",
                    unit: "dajskda",
                    num: "12348"
                }, {
                    id: 3,
                    name: "规格",
                    unit: "dajskda",
                    num: "12348"
                }, {
                    id: 4,
                    name: "规格",
                    unit: "dajskda",
                    num: "12348"
                }, {
                    id: 5,
                    name: "规格",
                    unit: "dajskda",
                    num: "12348"
                }],
                upIndex: 0,
                selects: [],
                upData: {
                    id: 0,
                    num: null
                }
            }
        },
        mounted() {
            this.selectDataList()
        },
        methods: {
            filterNode(value, data) {
              if (!value) return true;
              return data.name.indexOf(value) !== -1;
            },
            remove(node, data) {
                this.$confirm("是否删除", "警告", {
                    type: "warning"
                }).then(res => {
                    const parent = node.parent;
                    const children = parent.data.children || parent.data;
                    const index = children.findIndex(d => d.id === data.id);
                    children.splice(index, 1);
                }).catch(e => {})
            },
            selectDataList() {
                this.list.forEach(a => {
                    a.code = '[1]'
                    if (a.children != undefined) {
                        a.children.forEach(b => {
                            b.code = '[2]'
                        })
                    }
                })
                this.upIndex++
            },
            handleNodeClick(data) {
                this.checkTreeNode = data
                if (data.code == '[2]') {
                    console.log(data);
                }
            },
            nodeOpen(data, node, el) {
                $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened')
            },
            nodeClose(data, node, el) {
                $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder')
            },
            handleSelectionChange(val) {
                this.selects = val;
            },
            dels() {
                this.selects.forEach(a => {
                    for (var b = 0; b < this.tableData.length; b++) {
                        if (this.tableData[b].id == a.id) {
                            this.tableData.splice(b, 1)
                            b--
                        }
                    }
                })
                this.$message.success('删除完成')
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            submitUpData(id,val) {
                this.tableData.forEach(a => {
                    if (a.id == id) {
                        a.num = val
                    }
                })
                this.$message.success('修改成功')
                this.upIndex++
            }
        }
    }
</script>

 src/components/view/record-content.vue

@@ -35,11 +35,50 @@
    }

    .thing {
        width: calc(100% - 44px);
        height: calc(100% - 42px - 82px - 66px);
        width: 100%;
        height: calc(100% - 120px);
        background-color: #fff;
        overflow: auto;
        padding: 33px 22px;
        display: flex;
    }

    .thing .left {
        width: 295px;
        height: calc(100% - 20px);
        border-right: 3px solid rgb(245, 247, 251);
        padding: 16px;
    }

    .thing .left .custom-tree-node span {
        font-size: 14px;
    }

    .thing .left .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .node_i {
        color: orange;
    }

    .el-icon-delete {
        display: none;
        color: #004EA2;
    }

    .custom-tree-node:hover .el-icon-delete {
        display: inline;
    }

    .thing .right {
        width: calc(100% - 305px);
        height: calc(100% - 25px);
        overflow: hidden;
        padding: 10px;
    }

    .table_do {
@@ -56,31 +95,14 @@
        color: #004EA2;
    }

    .record_content .thing * {
        font-size: 14px;
    .record_content .thing .left .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background: rgba(58, 124, 253, 0.2);
        color: #004EA2;
    }

    .record_content .has-gutter .el-table__cell {
        background-color: #F0F1F5 !important;
        color: #333;
    }

    .record_content .has-gutter .el-table__cell .cell {
        font-size: 16px;
        font-weight: 500;
    }

    .record_content .cell {
        color: #333;
        padding-left: 17px !important;
    }

    .record_content .el-table__body-wrapper {
        height: 100%;
    }

    .raw_ins .el-table__body {
        height: 100%;
    .record_content .el-tree-node__content {
        height: 30px;
        border-radius: 2px;
    }
</style>

@@ -92,7 +114,7 @@
                <el-col :span="12" style="text-align: right;">
                    <el-button type="primary" icon="el-icon-plus" style="background: #004EA2;">新增</el-button>
                    <el-button icon="el-icon-edit-outline">修改</el-button>
                    <el-button icon="el-icon-delete">删除</el-button>
                    <el-button icon="el-icon-delete" @click="dels">删除</el-button>
                </el-col>
            </el-row>
        </div>
@@ -113,30 +135,68 @@
                    è¯¢</span></el-button>
        </div>
        <div class="thing">
            <el-table :data="tableData" border style="width: 100%;overflow-y: auto;min-height: calc(100% - 50px)"
                max-height="calc(100% - 50px)" @selection-change="handleSelectionChange" default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id">
                <el-table-column type="selection" width="50">
                </el-table-column>
                <el-table-column type="index" label="序号" width="70">
                </el-table-column>
                <el-table-column prop="name" label="工序">
                    <template slot-scope="scope">
                        <span>
                            <font>{{scope.row.ids}}</font>{{scope.row.name}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="备注">
                </el-table-column>
                <el-table-column label="操作" width="130">
                    <template slot-scope="scope">
                        <span class="table_do">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span class="table_do" @click="deleteRow(scope.$index, tableData)">删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="left">
                <el-input v-model="search.technology" suffix-icon="el-icon-search" placeholder="请输入搜索内容" size="small" clearable @input="(val)=>$refs.tree.filter(val)"></el-input>
                <el-tree :data="list" ref="tree" :props="{children: 'children',label: 'name'}" node-key="id" default-expand-all
                    @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen" @node-collapse="nodeClose" :filter-node-method="filterNode"
                    :key="upIndex">
                    <div class="custom-tree-node" slot-scope="{ node, data }">
                        <span><i :class="`node_i ${data.code != '[3]'?'el-icon-folder-opened':'el-icon-tickets'}`"></i>
                            {{data.code}} {{ data.name }}</span>
                        <el-button type="text" size="mini" @click.stop="remove(node, data)">
                            <i class="el-icon-delete"></i>
                        </el-button>
                    </div>
                </el-tree>
            </div>
            <div class="right">
                <el-table :data="tableData" border style="width: 100%;overflow-y: auto;min-height: 100%" max-height="100%"
                    @selection-change="handleSelectionChange" default-expand-all>
                    <el-table-column type="selection" width="50">
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="70">
                    </el-table-column>
                    <el-table-column prop="name" label="名称">
                    </el-table-column>
                    <el-table-column prop="unit" label="单位">
                    </el-table-column>
                    <el-table-column prop="thing" label="备注">
                    </el-table-column>
                    <el-table-column label="操作" width="130">
                        <template slot-scope="scope">
                            <span class="table_do" @click="upContent(scope.row)">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="table_do" @click="deleteRow(scope.$index, tableData)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog title="编辑记录内容" :visible.sync="upDia" width="500px">
            <div class="body">
                <el-row style="line-height: 46px;">
                    <el-col :span="4" style="font-size: 14px;text-align: right;">名称:</el-col>
                    <el-col :span="16" :offset="1">
                        <el-input v-model="upData.name" size="small" clearable></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 46px;">
                    <el-col :span="4" style="font-size: 14px;text-align: right;">单位:</el-col>
                    <el-col :span="16" :offset="1">
                        <el-input v-model="upData.unit" size="small" clearable></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 46px;">
                    <el-col :span="4" style="font-size: 14px;text-align: right;">备注:</el-col>
                    <el-col :span="16" :offset="1">
                        <el-input v-model="upData.thing" size="small" clearable></el-input>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitUpData">ç¡® å®š</el-button>
                <el-button @click="upDia = false">取 æ¶ˆ</el-button>
            </span>
        </el-dialog>
    </div>
</template>

@@ -146,91 +206,152 @@
            return {
                search: {
                    type: 0,
                    name: null
                    name: null,
                    technology: null
                },
                process: [],
                tableData: [{
                    id: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 å¼„'
                }, {
                    id: 2,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 å¼„'
                }, {
                    id: 3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 å¼„',
                list: [{
                    id: 0,
                    name: "原材料",
                    children: [{
                        id: 31,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 å¼„',
                        id: 3,
                        name: "工艺",
                        children: [{
                            id: 33,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 å¼„'
                        }, {
                            id: 34,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 å¼„'
                            id: 6,
                            name: "设备1"
                        }]
                    }, {
                        id: 32,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 å¼„'
                    }]
                }, {
                    id: 4,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 å¼„'
                    id: 1,
                    name: "成品",
                    children: [{
                        id: 4,
                        name: "工艺"
                    }]
                }, {
                    id: 2,
                    name: "半成品",
                    children: [{
                        id: 5,
                        name: "工艺"
                    }]
                }],
                selects: []
                checkTreeNode: {},
                tableData: [{
                    id: 1,
                    name: "质量追溯号",
                    unit: "单位",
                    thing: "dajskda"
                }, {
                    id: 2,
                    name: "作业人员",
                    unit: "单位",
                    thing: "dajskda"
                }, {
                    id: 3,
                    name: "规格",
                    unit: "单位",
                    thing: "dajskda"
                }, {
                    id: 4,
                    name: "规格",
                    unit: "单位",
                    thing: "dajskda"
                }, {
                    id: 5,
                    name: "规格",
                    unit: "单位",
                    thing: "dajskda"
                }],
                upIndex: 0,
                selects: [],
                upDia: false,
                upData: {
                    id: 0,
                    name: null,
                    unit: null,
                    thing: null
                }
            }
        },
        mounted() {
            this.selectDataList()
        },
        methods: {
            clean() {
                this.search = {
                    type: null,
                    name: null
                }
            filterNode(value, data) {
              if (!value) return true;
              return data.name.indexOf(value) !== -1;
            },
            selectDataList(){
                this.tableData.forEach(a=>{
                    a.ids = '01'
                    if(a.children!=undefined){
                        a.children.forEach(b=>{
                            b.ids = '02'
                            if(b.children!=undefined){
                                b.children.forEach(c=>{
                                    c.ids = '03'
            remove(node, data) {
                this.$confirm("是否删除", "警告", {
                    type: "warning"
                }).then(res => {
                    const parent = node.parent;
                    const children = parent.data.children || parent.data;
                    const index = children.findIndex(d => d.id === data.id);
                    children.splice(index, 1);
                }).catch(e => {})
            },
            selectDataList() {
                this.list.forEach(a => {
                    a.code = '[1]'
                    if (a.children != undefined) {
                        a.children.forEach(b => {
                            b.code = '[2]'
                            if (b.children != undefined) {
                                b.children.forEach(c => {
                                    c.code = '[3]'
                                })
                            }
                        })
                    }
                })
                this.upIndex++
            },
            handleNodeClick(data) {
                this.checkTreeNode = data
                if(data.code=='[3]'){
                    console.log(data);
                }
            },
            nodeOpen(data, node, el) {
                $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened')
            },
            nodeClose(data, node, el) {
                $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder')
            },
            handleSelectionChange(val) {
                this.selects = val;
            },
            del(ob) {
                console.log(ob)
            dels() {
                this.selects.forEach(a => {
                    for (var b = 0; b < this.tableData.length; b++) {
                        if (this.tableData[b].id == a.id) {
                            this.tableData.splice(b, 1)
                            b--
                        }
                    }
                })
                this.$message.success('删除完成')
            },
            deleteRow(index, rows) {
                console.log(index);
                console.log(rows);
                rows.splice(index, 1);
            },
            upContent(ob) {
                this.upData = this.HaveJson(ob)
                this.upDia = true
            },
            submitUpData() {
                this.tableData.forEach(a => {
                    if (a.id == this.upData.id) {
                        a.name = this.upData.name
                        a.unit = this.upData.unit
                        a.thing = this.upData.thing
                    }
                })
                this.$message.success('修改成功')
                this.upDia = false
            }
        }
    }
</script>
</script>

 src/components/view/self-inspection.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,369 @@
<style scoped>
    .title .el-button {
        height: 32px;
        border: 1px solid rgba(190, 190, 190, 0.44);
        box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
        padding: 0 12px;
    }

    .title {
        margin-bottom: 10px;
        padding: 0 20px;
    }

    .title * {
        font-size: 16px;
    }

    .choose {
        padding: 21px 24px;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-bottom: 3px solid rgb(245, 247, 251);
    }

    .choose * {
        font-size: 14px;
    }

    .choose .el-button {
        height: 32px;
        border: 1px solid rgba(190, 190, 190, 0.44);
        box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
        padding: 0 12px;
    }

    .thing {
        width: 100%;
        height: calc(100% - 120px);
        background-color: #fff;
        display: flex;
    }

    .thing .left {
        width: 295px;
        height: calc(100% - 20px);
        border-right: 3px solid rgb(245, 247, 251);
        padding: 16px;
    }

    .thing .left .custom-tree-node span {
        font-size: 14px;
    }

    .thing .left .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .node_i {
        color: orange;
    }

    .el-icon-delete {
        display: none;
        color: #004EA2;
    }

    .custom-tree-node:hover .el-icon-delete {
        display: inline;
    }

    .thing .right {
        width: calc(100% - 305px);
        height: calc(100% - 25px);
        overflow: hidden;
        padding: 10px;
    }

    .table_do {
        color: #004ea0;
        cursor: pointer;
    }
</style>
<style>
    .record_content .title .el-button * {
        font-size: 14px;
    }

    .record_content .title .el-button--default {
        color: #004EA2;
    }

    .record_content .thing .left .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background: rgba(58, 124, 253, 0.2);
        color: #004EA2;
    }

    .record_content .el-tree-node__content {
        height: 30px;
        border-radius: 2px;
    }
</style>

<template>
    <div class="record_content">
        <div class="title">
            <el-row>
                <el-col :span="12" style="line-height: 32px;">自检项目维护</el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-button type="primary" icon="el-icon-plus" style="background: #004EA2;">新增</el-button>
                    <el-button icon="el-icon-edit-outline">修改</el-button>
                    <el-button icon="el-icon-delete" @click="dels">删除</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="choose">
            <span>类型：</span>
            <el-select v-model="search.type" size="small" placeholder="请选择" style="width: 224px;margin-right: 30px;">
                <el-option label="橡胶连接器" :value="0"></el-option>
                <el-option label="金属连接器" :value="1"></el-option>
                <el-option label="湿插拔电连接器" :value="2"></el-option>
                <el-option label="分支组件" :value="3"></el-option>
            </el-select>
            <span>工序：</span>
            <el-select v-model="search.name" size="small" placeholder="请选择" style="width: 224px;margin-right: 30px;">
                <el-option v-for="(a, ai) in process" key="ai" :label="a.name" :value="a.id"></el-option>
            </el-select>
            <span>项目：</span>
            <el-select v-model="search.name" size="small" placeholder="请选择" style="width: 224px;margin-right: 30px;">
                <el-option v-for="(a, ai) in product" key="ai" :label="a.name" :value="a.id"></el-option>
            </el-select>
            <el-button size="mini" @click="clean()"><span>重 ç½®</span></el-button>
            <el-button size="mini" type="primary" style="background: #004EA2;"><span>查
                    è¯¢</span></el-button>
        </div>
        <div class="thing">
            <div class="left">
                <el-input v-model="search.technology" suffix-icon="el-icon-search" placeholder="请输入搜索内容" size="small" clearable @input="(val)=>$refs.tree.filter(val)"></el-input>
                <el-tree :data="list" ref="tree" :props="{children: 'children',label: 'name'}" node-key="id" default-expand-all
                    @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen" @node-collapse="nodeClose" :filter-node-method="filterNode"
                    :key="upIndex">
                    <div class="custom-tree-node" slot-scope="{ node, data }">
                        <span><i :class="`node_i ${data.code != '[2]'?'el-icon-folder-opened':'el-icon-tickets'}`"></i>
                            {{data.code}} {{ data.name }}</span>
                        <el-button type="text" size="mini" @click.stop="remove(node, data)">
                            <i class="el-icon-delete"></i>
                        </el-button>
                    </div>
                </el-tree>
            </div>
            <div class="right">
                <el-table :data="tableData" border style="width: 100%;overflow-y: auto;min-height: 100%" max-height="100%"
                    @selection-change="handleSelectionChange" default-expand-all>
                    <el-table-column type="selection" width="50">
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="70">
                    </el-table-column>
                    <el-table-column prop="name" label="名称">
                    </el-table-column>
                    <el-table-column prop="unit" label="单位">
                    </el-table-column>
                    <el-table-column prop="stand" label="标准值">
                    </el-table-column>
                    <el-table-column prop="ask" label="内控值">
                    </el-table-column>
                    <el-table-column label="操作" width="130">
                        <template slot-scope="scope">
                            <span class="table_do" @click="upContent(scope.row)">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="table_do" @click="deleteRow(scope.$index, tableData)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog title="编辑记录内容" :visible.sync="upDia" width="500px">
            <div class="body">
                <el-row style="line-height: 46px;">
                    <el-col :span="4" style="font-size: 14px;text-align: right;">名称:</el-col>
                    <el-col :span="16" :offset="1">
                        <el-input v-model="upData.name" size="small" clearable></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 46px;">
                    <el-col :span="4" style="font-size: 14px;text-align: right;">单位:</el-col>
                    <el-col :span="16" :offset="1">
                        <el-input v-model="upData.unit" size="small" clearable></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 46px;">
                    <el-col :span="4" style="font-size: 14px;text-align: right;">标准值:</el-col>
                    <el-col :span="16" :offset="1">
                        <el-input v-model="upData.stand" size="small" clearable></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 46px;">
                    <el-col :span="4" style="font-size: 14px;text-align: right;">内控值:</el-col>
                    <el-col :span="16" :offset="1">
                        <el-input v-model="upData.ask" size="small" clearable></el-input>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitUpData">ç¡® å®š</el-button>
                <el-button @click="upDia = false">取 æ¶ˆ</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                search: {
                    type: 0,
                    name: null,
                    technology: null
                },
                process: [],
                product: [],
                list: [{
                    id: 0,
                    name: "原材料",
                    children: [{
                        id: 3,
                        name: "工艺"
                    }]
                }, {
                    id: 1,
                    name: "成品",
                    children: [{
                        id: 4,
                        name: "工艺"
                    }]
                }, {
                    id: 2,
                    name: "半成品",
                    children: [{
                        id: 5,
                        name: "工艺"
                    }]
                }],
                checkTreeNode: {},
                tableData: [{
                    id: 1,
                    name: "电缆规格",
                    unit: "dajskda",
                    stand: "12348",
                    ask: "564165"
                }, {
                    id: 2,
                    name: "作业人员",
                    unit: "dajskda",
                    stand: "12348",
                    ask: "564165"
                }, {
                    id: 3,
                    name: "规格",
                    unit: "dajskda",
                    stand: "12348",
                    ask: "564165"
                }, {
                    id: 4,
                    name: "规格",
                    unit: "dajskda",
                    stand: "12348",
                    ask: "564165"
                }, {
                    id: 5,
                    name: "规格",
                    unit: "dajskda",
                    stand: "12348",
                    ask: "564165"
                }],
                upIndex: 0,
                selects: [],
                upDia: false,
                upData: {
                    id: 0,
                    name: null,
                    unit: null,
                    stand: null,
                    ask: null
                }
            }
        },
        mounted() {
            this.selectDataList()
        },
        methods: {
            filterNode(value, data) {
              if (!value) return true;
              return data.name.indexOf(value) !== -1;
            },
            remove(node, data) {
                this.$confirm("是否删除", "警告", {
                    type: "warning"
                }).then(res => {
                    const parent = node.parent;
                    const children = parent.data.children || parent.data;
                    const index = children.findIndex(d => d.id === data.id);
                    children.splice(index, 1);
                }).catch(e => {})
            },
            selectDataList() {
                this.list.forEach(a => {
                    a.code = '[1]'
                    if (a.children != undefined) {
                        a.children.forEach(b => {
                            b.code = '[2]'
                        })
                    }
                })
                this.upIndex++
            },
            handleNodeClick(data) {
                this.checkTreeNode = data
                if(data.code=='[2]'){
                    console.log(data);
                }
            },
            nodeOpen(data, node, el) {
                $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened')
            },
            nodeClose(data, node, el) {
                $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder')
            },
            handleSelectionChange(val) {
                this.selects = val;
            },
            dels() {
                this.selects.forEach(a => {
                    for (var b = 0; b < this.tableData.length; b++) {
                        if (this.tableData[b].id == a.id) {
                            this.tableData.splice(b, 1)
                            b--
                        }
                    }
                })
                this.$message.success('删除完成')
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            upContent(ob) {
                this.upData = this.HaveJson(ob)
                this.upDia = true
            },
            submitUpData() {
                this.tableData.forEach(a => {
                    if (a.id == this.upData.id) {
                        a.name = this.upData.name
                        a.unit = this.upData.unit
                        a.stand = this.upData.stand
                        a.ask = this.upData.ask
                    }
                })
                this.$message.success('修改成功')
                this.upIndex++
                this.upDia = false
            }
        }
    }
</script>

 src/components/view/technology.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,341 @@
<style scoped>
    .title .el-button {
        height: 32px;
        border: 1px solid rgba(190, 190, 190, 0.44);
        box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
        padding: 0 12px;
    }

    .title {
        margin-bottom: 10px;
        padding: 0 20px;
    }

    .title * {
        font-size: 16px;
    }

    .choose {
        padding: 21px 24px;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-bottom: 3px solid rgb(245, 247, 251);
    }

    .choose * {
        font-size: 14px;
    }

    .choose .el-button {
        height: 32px;
        border: 1px solid rgba(190, 190, 190, 0.44);
        box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
        padding: 0 12px;
    }

    .thing {
        width: 100%;
        height: calc(100% - 120px);
        background-color: #fff;
        display: flex;
    }

    .thing .left {
        width: 295px;
        height: calc(100% - 20px);
        border-right: 3px solid rgb(245, 247, 251);
        padding: 16px;
    }

    .thing .left .custom-tree-node span {
        font-size: 14px;
    }

    .thing .left .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .node_i {
        color: orange;
    }

    .el-icon-delete {
        display: none;
        color: #004EA2;
    }

    .custom-tree-node:hover .el-icon-delete {
        display: inline;
    }

    .thing .right {
        width: calc(100% - 305px);
        height: calc(100% - 25px);
        overflow: hidden;
        padding: 10px;
    }

    .table_do {
        color: #004ea0;
        cursor: pointer;
    }
</style>
<style>
    .record_content .title .el-button * {
        font-size: 14px;
    }

    .record_content .title .el-button--default {
        color: #004EA2;
    }

    .record_content .thing .left .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background: rgba(58, 124, 253, 0.2);
        color: #004EA2;
    }

    .record_content .el-tree-node__content {
        height: 30px;
        border-radius: 2px;
    }
</style>

<template>
    <div class="record_content">
        <div class="title">
            <el-row>
                <el-col :span="12" style="line-height: 32px;">工艺路线维护</el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-button type="primary" icon="el-icon-plus" style="background: #004EA2;">新增</el-button>
                    <el-button icon="el-icon-edit-outline">修改</el-button>
                    <el-button icon="el-icon-delete" @click="dels">删除</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="choose">
            <span>类型：</span>
            <el-select v-model="search.type" size="small" placeholder="请选择" style="width: 224px;margin-right: 30px;">
                <el-option label="橡胶连接器" :value="0"></el-option>
                <el-option label="金属连接器" :value="1"></el-option>
                <el-option label="湿插拔电连接器" :value="2"></el-option>
                <el-option label="分支组件" :value="3"></el-option>
            </el-select>
            <span>工序：</span>
            <el-select v-model="search.name" size="small" placeholder="请选择" style="width: 224px;margin-right: 30px;">
                <el-option v-for="(a, ai) in process" key="ai" :label="a.name" :value="a.id"></el-option>
            </el-select>
            <span>设备组：</span>
            <el-select v-model="search.name" size="small" placeholder="请选择" style="width: 224px;margin-right: 30px;">
                <el-option v-for="(a, ai) in product" key="ai" :label="a.name" :value="a.id"></el-option>
            </el-select>
            <el-button size="mini" @click="clean()"><span>重 ç½®</span></el-button>
            <el-button size="mini" type="primary" style="background: #004EA2;"><span>查
                    è¯¢</span></el-button>
        </div>
        <div class="thing">
            <div class="left">
                <el-input v-model="search.technology" suffix-icon="el-icon-search" placeholder="请输入搜索内容" size="small" clearable @input="(val)=>$refs.tree.filter(val)"></el-input>
                <el-tree :data="list" ref="tree" :props="{children: 'children',label: 'name'}" node-key="id" default-expand-all
                    @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen" @node-collapse="nodeClose" :filter-node-method="filterNode"
                    :key="upIndex">
                    <div class="custom-tree-node" slot-scope="{ node, data }">
                        <span><i :class="`node_i ${data.code != '[2]'?'el-icon-folder-opened':'el-icon-tickets'}`"></i>
                            {{data.code}} {{ data.name }}</span>
                        <el-button type="text" size="mini" @click.stop="remove(node, data)">
                            <i class="el-icon-delete"></i>
                        </el-button>
                    </div>
                </el-tree>
            </div>
            <div class="right">
                <el-table :data="tableData" border style="width: 100%;overflow-y: auto;min-height: 100%" max-height="100%"
                    @selection-change="handleSelectionChange" default-expand-all>
                    <el-table-column type="selection" width="50">
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="70">
                    </el-table-column>
                    <el-table-column prop="name" label="工艺名称">
                    </el-table-column>
                    <el-table-column prop="ask" label="设备组">
                    </el-table-column>
                    <el-table-column label="操作" width="130">
                        <template slot-scope="scope">
                            <span class="table_do" @click="upContent(scope.row)">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="table_do" @click="deleteRow(scope.$index, tableData)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog title="编辑记录内容" :visible.sync="upDia" width="500px">
            <div class="body">
                <el-row style="line-height: 46px;">
                    <el-col :span="4" style="font-size: 14px;text-align: right;">工艺名称:</el-col>
                    <el-col :span="16" :offset="1">
                        <el-input v-model="upData.name" size="small" clearable></el-input>
                    </el-col>
                </el-row>
                <el-row style="line-height: 46px;">
                    <el-col :span="4" style="font-size: 14px;text-align: right;">设备组:</el-col>
                    <el-col :span="16" :offset="1">
                        <el-input v-model="upData.ask" size="small" clearable></el-input>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitUpData">ç¡® å®š</el-button>
                <el-button @click="upDia = false">取 æ¶ˆ</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                search: {
                    type: 0,
                    name: null,
                    technology: null
                },
                process: [],
                product: [],
                list: [{
                    id: 0,
                    name: "插头",
                    children: [{
                        id: 5,
                        name: "工艺"
                    }]
                }, {
                    id: 1,
                    name: "成品"
                }, {
                    id: 2,
                    name: "半成品"
                }],
                checkTreeNode: {},
                tableData: [{
                    id: 1,
                    name: "工序",
                    unit: "dajskda",
                    stand: "12348",
                    ask: "564165"
                }, {
                    id: 2,
                    name: "作业人员",
                    unit: "dajskda",
                    stand: "12348",
                    ask: "564165"
                }, {
                    id: 3,
                    name: "规格",
                    unit: "dajskda",
                    stand: "12348",
                    ask: "564165"
                }, {
                    id: 4,
                    name: "规格",
                    unit: "dajskda",
                    stand: "12348",
                    ask: "564165"
                }, {
                    id: 5,
                    name: "规格",
                    unit: "dajskda",
                    stand: "12348",
                    ask: "564165"
                }],
                upIndex: 0,
                selects: [],
                upDia: false,
                upData: {
                    id: 0,
                    name: null,
                    ask: null
                }
            }
        },
        mounted() {
            this.selectDataList()
        },
        methods: {
            filterNode(value, data) {
              if (!value) return true;
              return data.name.indexOf(value) !== -1;
            },
            remove(node, data) {
                this.$confirm("是否删除", "警告", {
                    type: "warning"
                }).then(res => {
                    const parent = node.parent;
                    const children = parent.data.children || parent.data;
                    const index = children.findIndex(d => d.id === data.id);
                    children.splice(index, 1);
                }).catch(e => {})
            },
            selectDataList() {
                this.list.forEach(a => {
                    a.code = '[1]'
                    if (a.children != undefined) {
                        a.children.forEach(b => {
                            b.code = '[2]'
                        })
                    }
                })
                this.upIndex++
            },
            handleNodeClick(data) {
                this.checkTreeNode = data
                if (data.code == '[2]') {
                    console.log(data);
                }
            },
            nodeOpen(data, node, el) {
                $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened')
            },
            nodeClose(data, node, el) {
                $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder')
            },
            handleSelectionChange(val) {
                this.selects = val;
            },
            dels() {
                this.selects.forEach(a => {
                    for (var b = 0; b < this.tableData.length; b++) {
                        if (this.tableData[b].id == a.id) {
                            this.tableData.splice(b, 1)
                            b--
                        }
                    }
                })
                this.$message.success('删除完成')
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            upContent(ob) {
                this.upData = this.HaveJson(ob)
                this.upDia = true
            },
            submitUpData() {
                this.tableData.forEach(a => {
                    if (a.id == this.upData.id) {
                        a.name = this.upData.name
                        a.ask = this.upData.ask
                    }
                })
                this.$message.success('修改成功')
                this.upIndex++
                this.upDia = false
            }
        }
    }
</script>

 src/view/index.vue

@@ -507,7 +507,7 @@
                      k: 24,
                      v: "自检维护",
                      i: "font icon-shouye",
                      u: ""
                      u: "self-inspection"
                    },
                    {
                      k: 25,
@@ -519,19 +519,19 @@
                      k: 26,
                      v: "工艺路线维护",
                      i: "font icon-shouye",
                      u: ""
                      u: "technology"
                    },
                    {
                      k: 27,
                      v: "设备维护",
                      i: "font icon-shouye",
                      u: ""
                      u: "laboratoryManagement"
                    },
                    {
                      k: 28,
                      v: "物料清单维护",
                      i: "font icon-shouye",
                      u: ""
                      u: "mbom"
                    }
                  ]
                }