完成设备工具明细弹框

licp

2024-03-04 f7bd30c0b016c3766bdbd931e28ff90a8e05c7ba

 src/components/view/b2-standard.vue

@@ -9,17 +9,133 @@
      background-color: white;
      padding: 15px;
   }
	
   .custom-tree-node{
      width: 100%;
      line-height: 32px;
   }

   .custom-tree-node .el-icon-delete {
      color: #3A7BFA;
      opacity: 0;
      position: relative;
      right: 0;
      font-size: 16px;
   }

   .custom-tree-node:hover .el-icon-delete {
      opacity: 1;
   }
	
   .node_i{
      color: orange;
      font-size: 18px;
   }
</style>
<style>
   .standard .el-tree-node__content {
      height: 32px;
      font-size: 14px;
      border-radius: 2px;
   }

   .standard .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      background: rgba(58, 124, 253, 0.1);
      color: #3A7BFA;
   }
</style>

<template>
   <div class="standard">
      <div class="left">
         <el-input placeholder="输入关键字进行搜索" suffix-icon="el-icon-search" v-model="search" size="small" style="margin-bottom: 5px;"></el-input>
         <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all
            :filter-node-method="filterNode" ref="tree">
         <el-row>
            <el-col :span="20">
               <el-input placeholder="输入关键字进行搜索" suffix-icon="el-icon-search" v-model="search" size="small"
                  style="margin-bottom: 5px;" clearable @blur="searchFilter" @clear="searchFilter"></el-input>
            </el-col>
            <el-col :span="4" style="text-align: center;line-height: 30px;" v-if="addPower">
               <el-button type="primary" icon="el-icon-plus" size="mini" circle @click="addDia = true"></el-button>
            </el-col>
         </el-row>
         <el-tree :data="list" ref="tree" default-expand-all :props="{ children: 'children', label: 'label' }"
            node-key="id" :filter-node-method="filterNode" @node-click="handleNodeClick" highlight-current
            @node-expand="nodeOpen" @node-collapse="nodeClose" v-loading="treeLoad">
            <div class="custom-tree-node" slot-scope="{ node, data }">
               <el-row>
                  <el-col :span="22">
                     <span><i :class="`node_i ${data.children != undefined ? 'el-icon-folder-opened' : 'el-icon-tickets'}`"></i>
                        {{ data.code }} {{ data.label }}</span>
                  </el-col>
                  <el-col :span="2" style="text-align: right;">
                     <el-button type="text" size="mini" @click.stop="remove(node, data)">
                        <i class="el-icon-delete"></i>
                     </el-button>
                  </el-col>
               </el-row>
            </div>
         </el-tree>
      </div>
      <div class="right"></div>
      <el-dialog title="分类添加" :visible.sync="addDia" width="400px">
         <div class="body">
            <el-row style="line-height: 50px;">
               <el-col :span="6" style="text-align: right;">
                  <span class="required-span">* </span>工厂：
               </el-col>
               <el-col :span="16" :offset="1">
                  <el-select v-model="addOb.factory" size="small" style="width: 100%;" clearable>
                     <el-option v-for="(a, ai) in factory" :key="ai" :value="a.value"
                        :label="a.label"></el-option>
                  </el-select>
               </el-col>
            </el-row>
            <el-row style="line-height: 50px;">
               <el-col :span="6" style="text-align: right;">
                  <span class="required-span">* </span>实验室：
               </el-col>
               <el-col :span="16" :offset="1">
                  <el-select v-model="addOb.laboratory" size="small" style="width: 100%;" clearable>
                     <el-option v-for="(a, ai) in laboratory" :key="ai" :value="a.value"
                        :label="a.label"></el-option>
                  </el-select>
               </el-col>
            </el-row>
            <el-row style="line-height: 50px;">
               <el-col :span="6" style="text-align: right;">
                  <span class="required-span">* </span>样品大类：
               </el-col>
               <el-col :span="16" :offset="1">
                  <el-select v-model="addOb.sampleType" size="small" style="width: 100%;" clearable>
                     <el-option v-for="(a, ai) in sampleType" :key="ai" :value="a.value"
                        :label="a.label"></el-option>
                  </el-select>
               </el-col>
            </el-row>
            <el-row style="line-height: 50px;">
               <el-col :span="6" style="text-align: right;">
                  <span class="required-span">* </span>样品名称：
               </el-col>
               <el-col :span="16" :offset="1">
                  <el-select v-model="addOb.sample" size="small" style="width: 100%;" clearable>
                     <el-option v-for="(a, ai) in sample" :key="ai" :value="a.value"
                        :label="a.label"></el-option>
                  </el-select>
               </el-col>
            </el-row>
            <el-row style="line-height: 50px;">
               <el-col :span="6" style="text-align: right;">
                  型号：
               </el-col>
               <el-col :span="16" :offset="1">
                  <el-input v-model="addOb.model" placeholder="请输入型号" clearable size="small"></el-input>
               </el-col>
            </el-row>
         </div>
         <span slot="footer" class="dialog-footer">
            <el-button @click="addDia = false">取 消</el-button>
            <el-button type="primary" @click="addStandardTree" :loading="addLoad">确 定</el-button>
         </span>
      </el-dialog>
   </div>
</template>

@@ -28,54 +144,157 @@
      data() {
         return {
            search: null,
            data: [{
               id: 1,
               label: '一级 1',
               children: [{
                  id: 4,
                  label: '二级 1-1',
                  children: [{
                     id: 9,
                     label: '三级 1-1-1'
                  }, {
                     id: 10,
                     label: '三级 1-1-2'
                  }]
               }]
            }, {
               id: 2,
               label: '一级 2',
               children: [{
                  id: 5,
                  label: '二级 2-1'
               }, {
                  id: 6,
                  label: '二级 2-2'
               }]
            }, {
               id: 3,
               label: '一级 3',
               children: [{
                  id: 7,
                  label: '二级 3-1'
               }, {
                  id: 8,
                  label: '二级 3-2'
               }]
            }],
            defaultProps: {
               children: 'children',
               label: 'label'
            }
            list: [],
            returntree: null,
            factory: [],
            addDia: false,
            addOb: {
               factory: null,
               laboratory: null,
               sampleType: null,
               sample: null,
               model: null
            },
            laboratory: [],
            addLoad: false,
            sampleType: [],
            sample: [],
            treeLoad: false,
            addPower: false
         }
      },
      mounted() {

         this.getPower()
         this.selectEnumByCategoryForFactory()
         this.selectStandardTreeList()
         this.obtainItemParameterList()
         this.selectEnumByCategoryForsampleType()
         this.selectTestObjectByName()
      },
      methods: {
         filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
         },
         searchFilter() {
            this.$refs.tree.filter(this.search)
         },
         refresh() {
            this.upIndex++
         },
         handleNodeClick(val) { //树的值
            this.returntree = val
            if (val.code === '[5]' && val.children === undefined) {

            }
         },
         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 => {})
         },
         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')
         },
         selectEnumByCategoryForFactory() {
            this.$axios.post(this.$api.enums.selectEnumByCategory, {
               category: "工厂"
            }).then(res => {
               this.factory = res.data
            })
         },
         selectEnumByCategoryForsampleType() {
            this.$axios.post(this.$api.enums.selectEnumByCategory, {
               category: "样品大类"
            }).then(res => {
               this.sampleType = res.data
            })
         },
         selectStandardTreeList(){
            this.treeLoad = true
            this.$axios.get(this.$api.standardTree.selectStandardTreeList).then(res=>{
               this.list = res.data
               this.treeLoad = false
            })
         },
         obtainItemParameterList() {
            this.$axios.get(this.$api.laboratoryScope.obtainItemParameterList).then(res => {
               let data = []
               res.data.forEach(a=>{
                  data.push({
                     label: a.laboratoryName,
                     value: a.laboratoryName
                  })
               })
               this.laboratory = data
            })
         },
         selectTestObjectByName() {
            this.$axios.get(this.$api.capacityScope.selectTestObjectByName).then(res => {
               let data = []
               res.data.forEach(a=>{
                  data.push({
                     label: a.specimenName,
                     value: a.specimenName
                  })
               })
               this.sample = data
            })
         },
         addStandardTree(){
            if(this.addOb.factory==null||this.addOb.factory=='') {
               this.$message.error('工厂是必填项')
               return
            }
            if(this.addOb.laboratory==null||this.addOb.laboratory=='') {
               this.$message.error('实验室是必填项')
               return
            }
            if(this.addOb.sampleType==null||this.addOb.sampleType=='') {
               this.$message.error('样品大类是必填项')
               return
            }
            if(this.addOb.sample==null||this.addOb.sample=='') {
               this.$message.error('样品是必填项')
               return
            }
            this.addLoad = true
            this.$axios.post(this.$api.standardTree.addStandardTree, this.addOb, {
               headers: {
                  'Content-Type': 'application/json'
               }
            }).then(res => {
               if (res.code === 201) {
                  this.addLoad = false
                  return
               }
               this.$message.success('添加成功')
               this.addDia = false
               this.selectStandardTreeList()
               this.addLoad = false
            }).catch(e => {
               this.addDia = false
               this.addLoad = false
            })
         },
         getPower(){
            let power = JSON.parse(sessionStorage.getItem('power'))
            let add = false
            for (var i = 0; i < power.length; i++) {
               if(power[i].menuMethod=='addStandardTree'){
                  add = true
               }
            }
            this.addPower = add
         }
      }
   }