Crunchy-08/10中午

XiaoRuby

2023-08-10 ffd461f541b355d2d5124a0735d9c6fd557d21a5

Crunchy-08/10中午

 src/components/view/laboratoryManagement.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,229 @@
<template>
  <div>
    <el-row>
      <el-col :span="12" style="padding-left: 20px; line-height: 32px;">实验室管理</el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button @click="handleAddNew" type="primary" size="mini" icon="el-icon-plus" style="background: #004EA2; ">新增仪器设备</el-button>
      </el-col>
    </el-row>
    <el-row style="height: calc(100vh - 165px); margin-top: 9px;">
      <div :style="`width: ${isCollapse?300:0}px;transition: 1s;`" class="class_sidebar">
        <el-radio-group class="ai-tab-change" style="width: 270px; margin-top: 5px" v-model="radio1">
          <el-radio-button size="small" label="true">
            <div class="el_radio_button_div">生产设备</div>
          </el-radio-button>
          <el-radio-button size="small" label="false">
            <div class="el_radio_button_div">检测设备</div>
          </el-radio-button>
        </el-radio-group>
        <el-input v-model="search" :style="`width: 90%; margin: 10px 0;opacity: ${isCollapse?1:0};transition: 1.5s;`" suffix-icon="el-icon-search" placeholder="请输入搜索内容" size="small" clearable></el-input>
        <el-tree :data="list" ref="tree" :props="{children: 'children',label: 'label'}" node-key="id" default-expand-all
                 :filter-node-method="filterNode" @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen"
                 @node-collapse="nodeClose">
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span><i :class="`node_i ${data.code != '[4]'?'el-icon-folder-opened':'el-icon-tickets'}`"></i>
              {{data.code}}{{ data.label }}</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 :style="`width: calc(100vw - ${isCollapse?'475':'170'}px); padding-left: 5px;transition: 1s;float: left;`">
        <div :title="isCollapse ? '点击展开' : '点击收起'" class="box_bgd" @click="isC">
          <!-- ç‚¹å‡»å±•å¼€æ”¶èµ·å¯¼èˆªå’Œåˆ‡æ¢å¯¹åº”图标 -->
          <i :class="!isCollapse ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
        </div>
        <div style="background-color: #fbfbfd; height: 100%;">
          <div style="margin-left: 20px; padding-top: 15px; padding-bottom: 15px">
            <el-input v-model="searchName" size="small" prefix-icon="el-icon-search" placeholder="请输入编号/设备名称/型号规格" style="width: 20%;margin-right: 24px;" clearable></el-input>
            <el-button size="mini" @click="()=>{searchName='';selectProductTableData()}"><span>重 ç½®</span></el-button>
            <el-button size="mini" type="primary" style="background: #004EA2;" @click="selectProductTableData"><span>查 è¯¢</span></el-button>
            <el-select v-model="tableType" size="small" placeholder="请选择" style="float: right; width: 224px;margin-right: 52px;">
              <el-option :value="0" label="工艺文件"></el-option>
              <el-option :value="1" label="技术指标"></el-option>
            </el-select>
          </div>
          <el-table
            :data="tableData"
            border
            height="calc(100vh - 220px)"
            style="width: 100%; padding: 10px; position: absolute">
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "LaboratoryManagement",
  data() {
    return {
      isCollapse: true, //默认为展开
      radio1: 'true',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 å¼„'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 å¼„'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }],
      // BOM树数据结构
      list: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1'
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1'
        }, {
          label: '二级 2-2'
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1'
        }, {
          label: '二级 3-2'
        }]
      }],
    }
  },
  methods: {
    // åŠ¨æ€æŽ§åˆ¶å±•å¼€ä¸Žæ”¶èµ·å’Œåˆ‡æ¢å¯¹åº”图标
    isC() {
      this.isCollapse = !this.isCollapse;
    },
  },
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-icon-delete {
  display: none;
  color: #004EA2;
}
.custom-tree-node:hover .el-icon-delete {
  display: inline;
}
.node_i {
  color: orange;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
     background: #f2f2f2;
     border: 0 !important;
     color: #696969;
     line-height: 14px;
     outline: none;
     box-shadow: none;
}
.class_sidebar {
  overflow: hidden;
  height: calc(100vh - 159px);
  text-align: center;
  padding: 8px;
  float: left;
  background-color: #fdfdfe;
}
.box_bgd {
  width: 15px;
  height: 40px;
  position: relative;
  float: left;
  top: 50%!important;
  left: -20px;
  background: blue;
}
.ai-tab-change {
  .el-radio-button__inner {
    border: 1px solid #ececed;
    line-height: 14px;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background: #fdfdfe;
    border: 1px solid #004da2;
    color: #004da2;
    line-height: 14px;
  }
}
</style>

 src/components/view/standard.vue

@@ -12,7 +12,7 @@
    margin-bottom: 10px;
    padding: 0 20px;
  }
  

  .standard .title *{
    font-size: 16px;
  }
@@ -89,7 +89,7 @@
  .standard .title .el-button * {
    font-size: 14px;
  }
  

  .standard .title .el-button--default{
    color: #004EA2;
  }
@@ -155,7 +155,7 @@
        :visible.sync="bomAddModelVisible"
        width="30%">
        <el-form>
          

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="bomAddModelVisible = false">取 æ¶ˆ</el-button>
@@ -250,13 +250,13 @@
          firstNode.click()
          })
        })
        

      },
      async selectProductTableData() {
        switch (this.tableType) {
          case 0:
        const {data:technologyList} = await this.$axios.get(this.$api.url.selectTechnologyByMaterial,{params:{specificationId:this.checkTreeNode.id,technologyName:this.searchName}})
        this.tableData = technologyList    
        this.tableData = technologyList
            break;
          case 1:
        const {data:productList} = await this.$axios.get(this.$api.url.selectProductByMaterial,{params:{specifications:this.checkTreeNode.id,project:this.searchName}})

 src/view/index.vue

@@ -331,7 +331,7 @@
            k: 8,
            v: "实验室管理",
            i: "font icon-shouye",
            u: ""
            u: "laboratoryManagement"
          }, {
            k: 9,
            v: "质量统计",