基础数据

王震

2023-09-05 9268f16a093f82e2964ca4461aacc42edbd6b7a5

基础数据

 src/components/view/Technicalindex.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,603 @@
<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;" @click="event">新增</el-button>
                    <el-button icon="el-icon-edit-outline" @click="modify">修改</el-button>
                    <el-button icon="el-icon-delete"  @click="dels" >删除</el-button>
                </el-col>
            </el-row>
        </div>
     
        <div>
            <!-- ç¼–辑弹窗 -->
            <div>
            <el-dialog
            title="技术指标编辑"
            :visible.sync="modifyevent"
            width="40%"
            :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="类型">
                    <template>
                        <el-select v-model="value" placeholder="请选择类型" style="width: 560px;">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        </template>
                    </el-form-item>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="工序">
                            <el-input v-model="form.name"  placeholder="请输入或选择工序"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <el-form-item label="工艺">
                            <el-input v-model="form.name"  placeholder="请输入或选择工艺"></el-input>
                        </el-form-item>
                     </el-col>
                </el-row>

                <el-row>
                    <el-col :span="11">
                        <el-form-item label="上级">
                            <el-input v-model="form.name"  placeholder="请选择上级"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <el-form-item label="项目">
                            <el-input v-model="form.name"  placeholder="请输入项目"></el-input>
                        </el-form-item>
                     </el-col>
                </el-row>

                <el-form-item label="单位">
                    <el-input v-model="form.name"  placeholder="请输入单位" style="width: 220px;"></el-input>
                </el-form-item>
                </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="modifyevent = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="modifyevent = false">ç¡® å®š</el-button>
            </span>
            </el-dialog>
            </div>
            <!-- æ–°å¢žå¼¹çª— -->
        <div>
            <el-dialog
            title="技术指标新增"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="类型">
                    <template>
                        <el-select v-model="form.type" size="small" placeholder="请选择" @change="TYpe" 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>
                        </template>
                    </el-form-item>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="工序">
                            <template>
                                <el-select v-model="form.work" 
                                placeholder="请选择类型" 
                                allow-create
                                filterable
                                @change="workevent"
                                >
                                    <el-option
                                    v-for="(item,index) in process"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.name">
                                    </el-option>
                                </el-select>
                                </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <el-form-item label="工艺">
                            <template>
                                <el-select v-model="form.name" 
                                placeholder="请选择类型" 
                                allow-create
                                filterable
                                >
                                    <el-option
                                    v-for="item in craftapi"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                                </template>
                        </el-form-item>
                     </el-col>
                </el-row>

                <el-row>
                    <el-col :span="11">
                        <el-form-item label="上级">
                            <template>
                                <el-select v-model="form.father" 
                                placeholder="请选择类型" 
                                allow-create
                                filterable
                                >
                                    <el-option
                                    v-for="item in higherlevel"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                                    </el-option>
                                </el-select>
                                </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <el-form-item label="项目">
                            <el-input v-model="form.project"  placeholder="请输入项目"></el-input>
                        </el-form-item>
                     </el-col>
                </el-row>

                <el-form-item label="单位">
                    <el-input v-model="form.unit"  placeholder="请输入单位" style="width: 220px;"></el-input>
                </el-form-item>
                </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="add">ç¡® å®š</el-button>
            </span>
            </el-dialog>
            </div>
        </div>


        <div class="choose">
            <span>类型：</span>
            <el-select v-model="search.type" size="small" placeholder="请选择" @change="TYpe" 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>
            <el-button size="mini"><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="query" ></el-input>
                    <el-tree :data="list" ref="tree" :props="{children: 'children',label: 'father'}" node-key="id" default-expand-all
                    @node-click="handleNodeClick" 
                        >
                    <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.father}} {{ 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"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="name"
                    border
                    
                    @selection-change="handleSelectionChange"
                    default-expand-all
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    type="index"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="项目"
                    sortable
                    width="300px">
                        <template slot-scope="scope">
                        <el-tag>
                            <div class="firstDiv" :style="`color: ${scope.row.children? '#16a7ff' : '#58c173'}`">
                            {{ scope.row.children ? "01" : "02" }}
                            </div>
                        </el-tag>
                        <span style="color: black">{{ scope.row.name }}</span>

                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="unit"
                        label="单位">
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="操作"
                        width="200px">
                        <template slot-scope="scope" style="text-align: center;">
                        <el-button type="text" size="mini" @click="childrenClick(scope)">编辑</el-button>
                        <el-button type="text" size="mini" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
                        </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">
                        <template>
                        <el-select v-model="upData.type" placeholder="请选择类型" style="width: 310px;">
                            <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>
                        </template>
                    </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-select v-model="upData.father"   style="width: 310px;" placeholder="请选择">
                            <el-option
                            v-for="item in procedure"
                            :key="item"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                    </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-select v-model="upData.ele" style="width: 310px;" multiple placeholder="请选择">
                            <el-option
                            v-for="item in element"
                            :key="item.index"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </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.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.device_group" 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> -->
        </div>
    </div>
</template>
<script>
export default {
        data() {
            return {
              search:{
                type:'',
                technology:'',
              },
            //   handleClose:[],
                checkTreeNode :[],
                higherlevel:[],
                value:{},
                options:[],
                process:[],
                filterNode:[],
                list: [],
                form:{
                    father:'',
                    work:'',
                    name:'',
                    unit:'',
                    project:'',
                },
                children:[],
                modifyevent:false,
                dialogVisible:false,
                tableData: [],
                typeselect:0,
                upDat:{},
                craftapi:[],
            }
            
        },
        mounted() {
            this.selectAllleft()
            
        },
        methods:{
            //删除
            // delTechBy() {
            //     console.log(this.$api.url.delTechBy,this.upData.id);
            //     this.$axios.post(this.$api.url.delTechBy,{
            //             id:this.upData.id
            //     })
            // },
            // deleteRow(index, rows) {
            //     this.tableData.splice(index,1)
            //     this.upData.id = rows.id
            //     this.delTechBy()
            // },
            add() {
                this.dialogVisible = false
                this.addTechMode()
            },
            addTechMode() {
                this.$axios.post(this.$api.url.addTechMode,{
                    father:this.form.father,
                    name:this.form.project,
                    techTemId:this.form.name,
                    unit:this.form.unit,
                }, {
                    headers: {
                        "Content-Type": "application/json"
                      }
                })
            },
            handleClose() {

            },
            TYpe(val) {
                this.typeselect = val
                console.log(this.typeselect);
                this.selectAllleft()
            },
            //主体左
            selectAllleft() {
            this.$axios.get(this.$api.url.selectAllleft,{
                params:{type:this.typeselect,message:this.search.technology}
            }).then(res => {
                this.list = res.data;
                console.log(this.list);
            })
            },
            //
            //查询
            query(val) {
                this.selectAllleft()
            },
            selectAllright() {
            this.$axios.get(this.$api.url.selectAllright,{
                params:{id:this.checkTreeNode.id}
            }).then(res => {
                this.tableData = res.data;
                console.log(this.tableData);
            });
            },
            //上级
            chooseProFath() {
                console.log(this.checkTreeNode.id);
            this.$axios.get(this.$api.url.chooseProFath,{
                params:{techTemId:this.checkTreeNode.id}
            }).then(res => {
                this.higherlevel = res.data;
                console.log(this.higherlevel);
            }, {
                headers: {
                        "Content-Type": "application/json"
                      }
            })
            },
            //工序工艺
            chooseTechFath() {
            this.$axios.get(this.$api.url.chooseTechFath,{
                params:{type:this.typeselect}
            }).then(res => {
                this.process = res.data;
                console.log(this.process);
            }, {
                headers: {
                        "Content-Type": "application/json"
                      }
            })
            },
            workevent(val){
                console.log(val);
                let idx = this.process.findIndex(el => el.name === val)
                this.craftapi = this.process[idx].children
            },
            handleNodeClick(data){
                this.checkTreeNode = data
                console.log(this.checkTreeNode.id);
                this.selectAllright()
            },
            event(){
                this.dialogVisible = true
                this.chooseProFath()
                this.chooseTechFath()
            },
            modify(){
                this.modifyevent = true
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            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('删除完成')
            },
          
        }
    }
</script>

<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;
    }
.firstDiv {
  /* float: left;
  width: 20px;
  height: 20px;
  border-radius: 60px;
  /* background-color: #eff5ff;
  margin-top: 5px;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-right: 8px; */
  /* border-radius: 60px; */
}
.el-tag{
    border-radius: 50%;
}
</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>

 src/components/view/equipmentmaintain.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,444 @@
<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;" @click="event">新增</el-button>
                    <el-button icon="el-icon-edit-outline" @click="modify">修改</el-button>
                    <el-button icon="el-icon-delete"  @click="dels" >删除</el-button>
                </el-col>
            </el-row>
        </div>
     
        <div>
            <!-- ç¼–辑弹窗 -->
            <div>
            <el-dialog
            title="技术指标编辑"
            :visible.sync="modifyevent"
            width="40%"
            :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="类型">
                    <template>
                        <el-select v-model="value" placeholder="请选择类型" style="width: 560px;">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        </template>
                    </el-form-item>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="工序">
                            <el-input v-model="form.name"  placeholder="请输入或选择工序"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <el-form-item label="工艺">
                            <el-input v-model="form.name"  placeholder="请输入或选择工艺"></el-input>
                        </el-form-item>
                     </el-col>
                </el-row>

                <el-row>
                    <el-col :span="11">
                        <el-form-item label="上级">
                            <el-input v-model="form.name"  placeholder="请选择上级"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <el-form-item label="项目">
                            <el-input v-model="form.name"  placeholder="请输入项目"></el-input>
                        </el-form-item>
                     </el-col>
                </el-row>

                <el-form-item label="单位">
                    <el-input v-model="form.name"  placeholder="请输入单位" style="width: 220px;"></el-input>
                </el-form-item>
                </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="modifyevent = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="modifyevent = false">ç¡® å®š</el-button>
            </span>
            </el-dialog>
            </div>
            <!-- æ–°å¢žå¼¹çª— -->
        <div>
            <el-dialog
            title="技术指标新增"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="类型">
                    <template>
                        <el-select v-model="value" placeholder="请选择类型" style="width: 560px;">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        </template>
                    </el-form-item>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="工序">
                            <el-input v-model="form.name"  placeholder="请输入或选择工序"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <el-form-item label="工艺">
                            <el-input v-model="form.name"  placeholder="请输入或选择工艺"></el-input>
                        </el-form-item>
                     </el-col>
                </el-row>

                <el-row>
                    <el-col :span="11">
                        <el-form-item label="上级">
                            <el-input v-model="form.name"  placeholder="请选择上级"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <el-form-item label="项目">
                            <el-input v-model="form.name"  placeholder="请输入项目"></el-input>
                        </el-form-item>
                     </el-col>
                </el-row>

                <el-form-item label="单位">
                    <el-input v-model="form.name"  placeholder="请输入单位" style="width: 220px;"></el-input>
                </el-form-item>
                </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="dialogVisible = false">ç¡® å®š</el-button>
            </span>
            </el-dialog>
            </div>
        </div>


        <div class="choose">
            <span>类型：</span>
            <el-select v-model="search.type" size="small" @change="TYpe" 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>
            <el-button size="mini"><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 ></el-input>
                    <el-tree :data="list" ref="tree" :props="{children: 'children',label: 'name'}" node-key="id" default-expand-all
                        highlight-current  :filter-node-method="filterNode"
                        @node-click="handleNodeClick"
                        >
                    <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"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="name"
                    border
                    @selection-change="handleSelectionChange"
                    default-expand-all
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    type="index"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    label="设备名称"
                    sortable
                    width="300px">
                        <template slot-scope="scope">
                        <el-tag>
                            <div class="firstDiv" :style="`color: ${scope.row.children ? '#16a7ff' : '#58c173'}`">
                            {{ scope.row.children  ? "01" : "02" }}
                            </div>
                        </el-tag>
                        <span style="children: black">{{ scope.row.name }}</span>

                        </template>
                        </el-table-column>

                    <el-table-column
                    label="项目"
                    sortable
                    width="300px">
                        <template slot-scope="scope">
                        <el-tag>
                            <div class="firstDiv" :style="`color: ${scope.row.children ? '#16a7ff' : '#58c173'}`">
                            {{ scope.row.children ? "01" : "02" }}
                            </div>
                        </el-tag>
                        <span style="color: black">{{ scope.row.name }}</span>

                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="unit"
                        label="单位">
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="指标">
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="操作"
                        width="200px">
                        <template slot-scope="scope" style="text-align: center;">
                        <el-button type="text" size="mini" @click="childrenClick(scope)">编辑</el-button>
                        <el-button type="text" size="mini" @click="deleteRow(scope.$index, tableData)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
        data() {
            return {
              search:{},
              value:{},
              TYpe:[],
              typeselect:0,
              options:[],
              process:[],
              list: [],
              TYpe:'',
              selects:'',
              checkTreeNode:[],
                form:{},
                modifyevent:false,
                dialogVisible:false,
                tableData: [],
            }
            
        },
        mounted() {
            this.selectAllleft()          
        },
        methods:{
            TYpe() {
                this.typeselect = val
                this.selectAllleft()
            },
            handleNodeClick(data){
                this.checkTreeNode = data
                console.log(this.checkTreeNode.id);
                this.selectAllTeque()

            },
             //主体左
             selectAllleft() {
            this.$axios.get(this.$api.url.selectAllleft,{
                params:{type:this.typeselect}
            }).then(res => {
                this.list = res.data;
                console.log(this.list);
            })
            },
            //主体右
            selectAllTeque() {
            this.$axios.get(this.$api.url.selectAllTeque,{
                params:{id:this.checkTreeNode.id}
            }).then(res => {
                this.tableData = res.data;
                console.log(this.tableData);

            })
            },
            event(){
                this.dialogVisible = true
            },
            modify(){
                this.modifyevent = true
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            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('删除完成')
            },
            handleClose(){
                        this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {})
            },
            filterNode(){

            },
          
        }
    }
</script>

<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;
    }
.firstDiv {
  /* float: left;
  width: 20px;
  height: 20px;
  border-radius: 60px; */
  /* background-color: #eff5ff;
  margin-top: 5px;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-right: 8px; */
}
</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>

 src/components/view/routinginspection.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;"  @click="event">新增</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>