设备台账的页面搭建

hailin

2023-07-25 2bd2209ef2c966a036952e5983325c312fb58582

设备台账的页面搭建

 src/api/laboratory/ledger.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,55 @@
import request from '@/utils/request'

// æŸ¥è¯¢è®¾å¤‡ä»ªå™¨åˆ†ç±»
export function getClassifyList(params) {
  return request({
    url: '/classify/list',
    method: 'get',
    params
  })
}

// æ·»åŠ è®¾å¤‡ä»ªå™¨åˆ†ç±»
export function addClassify(data) {
  return request({
    url: '/classify/add',
    method: 'post',
    data
  })
}

// æ›´æ–°è®¾å¤‡ä»ªå™¨åˆ†ç±»
export function changeClassify(data) {
  return request({
    url: '/classify/update',
    method: 'put',
    data
  })
}

// åˆ é™¤è®¾å¤‡ä»ªå™¨åˆ†ç±»
export function delClassify(data) {
  return request({
    url: '/classify/delete',
    method: 'put',
    data
  })
}

// æŸ¥è¯¢è®¾å¤‡ä»ªå™¨åˆ—表
export function getInstrumentList(params) {
  return request({
    url: '/instrument/list',
    method: 'get',
    params
  })
}

// æ·»åŠ è®¾å¤‡ä»ªå™¨åˆ†ç±»
export function addInstrument(data) {
  return request({
    url: '/instrument/add',
    method: 'post',
    data
  })
}

 src/api/rawMaterials/reportForInspection.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,18 @@
import request from '@/utils/request'

// æŸ¥è¯¢æ‰€æœ‰ç”³è¯·å•åˆ—表
export function getInspectionList(params) {
  return request({
    url: '/inspection/selectAllInspection',
    method: 'get',
    params
  })
}

// æ·»åŠ æ£€éªŒç”³è¯·å•
export function addInspection() {
  return request({
    url: '/inspection/addInspection',
    method: 'post'
  })
}

 src/styles/element-ui.scss

@@ -122,3 +122,8 @@
// .is-active{
//   background: red !important;
// }

// ä¿®æ”¹æŠ½å±‰å¤´éƒ¨çš„底部边距样式
.el-drawer__header{
  margin-bottom: 0px !important;
}

 src/views/laboratory/ledger/index.vue

@@ -2,7 +2,7 @@
  <div class="ledger-main">
    <div class="page-header-search">
      <div class="search-bar">
        <el-form ref="form" inline="true" :model="searchData">
        <el-form ref="form" :inline="true" :model="searchData">
          <el-form-item>
            <el-input
              v-model="searchData.keyword"
@@ -25,16 +25,15 @@
    <div class="content-main">
      <div class="library-bom">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
        <el-tree
          ref="tree"
          class="filter-tree"
          :data="data"
          ref="classTree"
          :data="classTree"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          @node-click="nodeClickHandler"
        />
      </div>
      <div class="library-table">
@@ -56,60 +55,47 @@
        </div>
        <div class="table-box">
          <el-table
            ref="personnerlTable"

            ref="equipmentTable"
            node-key="father_name"
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
            :data="personnerlTable"
            :data="equipmentTable"
            style="width: 100%"
          >
            <el-table-column
              prop="roleName"
              type="index"
              label="序号"
              min-width="90"
            />
            <el-table-column
              prop="rolePermissions"
              prop="equipment_code"
              label="仪器设备编号"
              min-width="150"
            />
            <el-table-column
              prop="age"
              prop="equipment_name"
              label="仪器设备名称"
              min-width="150"
            />
            <el-table-column
              prop="creatTime"
              prop="specifications_models"
              label="规格型号"
              min-width="150"
            />
            <el-table-column
              prop="phone"
              label="上次计量时间"
              prop="name"
              label="保管人"
              min-width="200"
            />
            <el-table-column
              prop="mailbox"
              label="上次计量单位"
              min-width="200"
            />
            <el-table-column
              prop="mailbox"
              label="截止有效期"
              min-width="200"
            />
            <el-table-column
              prop="mailbox"
              label="计量周期"
              prop="termValidity"
              label="计量截止有效期"
              min-width="200"
            />
            <el-table-column
              prop="incumbentStatus"
              label="设备状态"
              min-width="120"
              :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
              :filter-method="filterTag"
              filter-placement="bottom-end"
            >
              <template slot-scope="scope">
                <el-tag
@@ -119,23 +105,28 @@
              </template>
            </el-table-column>
            <el-table-column
              prop="storage_place"
              label="存放地"
              min-width="200"
            />
            <el-table-column
              label="操作"
              min-width="120"
              :fixed="true"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
                <!-- <el-button type="text" size="small">编辑</el-button> -->
                <el-button type="text" size="small" @click="openDetail(scope.row)">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
@@ -143,15 +134,100 @@
        </div>
      </div>
    </div>
    <!--  -->
    <el-drawer
      title="仪器设备详情"
      :visible.sync="detailDrawer"
      size="80%"
      class="detailDrawer"
    >
      <div>
        <div class="detail-info">
          <div class="tips-main">
            <div class="tips">
              <span />
              <div>基本信息</div>
            </div>
            <div class="tips-btn">
              <span><i class="el-icon-edit" />操作：</span>
              <el-button type="text" @click="dialogFormVisible = true">编辑</el-button>
            </div>
          </div>
          <div class="message">
            <div class="message-item"><span><i class="el-icon-edit" />所属分类：</span></div>
            <div class="message-item">
              <span><i class="el-icon-edit" />创建人：</span>
              <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" /></el-tag>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />建档日期：</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />设备编号：</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />型号规格：</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />测量范围：</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />不确定度/误差：</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />生产厂家：</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />存放地点：</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />到货日期：</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />验收日期：</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />保管人：</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />是否支持数采：</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />仪器设备计量：</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />计量周期：</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />描述：</span>
            </div>
          </div>
        </div>
        <el-tabs>
          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
        <el-drawer
          title="编辑"
          :append-to-body="true"
          :visible.sync="editDrawer"
        >
          <p>_(:зゝ∠)_</p>
        </el-drawer>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getClassifyList, getInstrumentList } from '@/api/laboratory/ledger'
export default {
  data() {
    return {
      // è¡¨æ ¼æ•°æ®
      data: [{
      classTree: [{
        id: 1,
        label: '一级 1',
        children: [{
@@ -178,18 +254,64 @@
      // è¡¨æ ¼æœç´¢å•é€‰å€¼
      radioValue: '全部',
      // è¡¨æ ¼æœç´¢å·²è¿‡æœŸ
      isOut: false
      isOut: false,
      detailDrawer: false,
      editDrawer: false,
      equipmentTable: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
      this.$refs.classTree.filter(val)
    }
  },
  created() {
    this.getThreeData()
  },
  methods: {
    openDetail(row) {
      console.log(row)
      this.detailDrawer = true
    },
    nodeClickHandler(data, node, element) {
      console.log(data)
      // åªæœ‰æ•°æ®ä¸­æºå¸¦id才能发送查询请求
      if (data.id) {
        this.getEquipmentTable({ classifyId: data.id, pageSize: this.pageSize, pageNo: this.currentPage })
      }
    },
    async getEquipmentTable(ages) {
      console.log('条件对象', ages)
      const { data } = await getInstrumentList(ages)
      console.log(data)
      this.equipmentTable = data.row
      this.total = data.total
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    async getThreeData() {
      const { data } = await getClassifyList()
      console.log(data)
      this.classTree = data.map(item => {
        if (item.children) {
          item.children = item.children.map(childrenItem => {
            return { ...childrenItem, label: childrenItem.son_name }
          })
        }
        return { ...item, label: item.father_name }
      })
      console.log(this.classTree)
    },
    handleSizeChange() {
      // å½“前页大小
    },
    handleCurrentChange() {
      // å½“前页更改
    }
  }
}
@@ -290,5 +412,102 @@
      }
    }
  }

  .detailDrawer{
    ::v-deep .el-drawer__body{
      padding: 24px !important;
    }
    .detail-info{
    background: #fff;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 5px 15px;

    // padding: 10px 20px 10px 20px;
    margin: 0;
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
    .tips-main{
      // margin: ;
      padding: 10px 20px 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      // height: ;
      &:hover{
        background: #85bff810;
        .tips-btn{
          display: block;
          left: 0;
          opacity:1;
        }
      }
      .tips-btn{
        height: 100%;
        // display: none;
        position: relative;
        opacity:0;
        left: 100px;
        transition: all 0.3s ease-in-out;
      }
      .tips{
      height: 100%;
      display: flex;
      height: 24px;
      align-items: center;
      font-size: 16px;
      // margin-bottom: 12px;
      >span{
        display: inline-block;
        margin-right: 10px;
        width: 4px;
        height: 16px;
        background: #0077DB;
      }
      >div{
        height: 100%;
        line-height: 26px;
      }
      .el-button{
        padding: 0;
      }
      }
    }

    // åŸºæœ¬ä¿¡æ¯å’Œä¼ä¸šä¿¡æ¯çš„每一个信息项样式
    .message{
      padding: 0px 20px 8px 20px;

      display: flex;
      flex-wrap: wrap;
      border-top: 1px solid #F2F6FC;
      // border-top: 1px solid #F2F6FC;
      >div{
        flex: 30%;
        max-width: 30%;
        padding: 8px;
        color: #606266;
        align-items: center;
        // height: 65px;
        font-size: 12px;
        height: 40px;
        display: flex;
        align-items: center;
        >span{
          color: #303133;
          font-size: 14px;
          //
          >i{
            margin-right: 8px;
          }
        }
      }
      // >div:nth-child(5){
      //   flex: 60%;
      //   max-width: 60%;
      // }
    }
  }
  }
}
</style>

 src/views/rawMaterials/reportForInspection/forInspectionDetail.vue

@@ -127,14 +127,114 @@
      size="50%"
    >
      <div class="demo-drawer__content">
        <el-form :model="addSampleFrom">
        <el-form label-position="top" label-width="120px" :model="addSampleFrom">
          <el-form-item>
            <el-button>选择物料</el-button>
            <el-button type="primary">选择物料</el-button>
          </el-form-item>
          <el-row>
            <el-col>
          <div class="materialParams-card">
            <el-row class="materialParams-top">
              <el-col :span="12">
                <el-form-item>
                  <el-input placeholder="--">
                    <template slot="prepend">物料编号</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-input placeholder="--">
                    <template slot="prepend">物料名称</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="materialParams-bottom">
              <el-col :span="12">
                <el-form-item>
                  <el-input placeholder="--">
                    <template slot="prepend">物料规格</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-input placeholder="--">
                    <template slot="prepend">供应商 </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-row gutter="100" :style="{marginTop:'24px'}">
            <el-col :span="12">
              <el-form-item label="批次">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数量">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="100">
            <el-col :span="12">
              <el-form-item label="盘号">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="存放地">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="100">
            <el-col :span="12">
              <el-form-item label="规格/型号名称">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主线心截面">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="100">
            <el-col :span="12">
              <el-form-item label="生产指令号">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主线芯芯数">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="100">
            <el-col :span="12">
              <el-form-item label="电压等级">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="100" :style="{flex:'1'}">
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  rows="2"
                  placeholder="请输入内容"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
@@ -308,7 +408,70 @@
}

.demo-drawer__content{
    padding: 20px;
    padding: 24px;
    height: 100%;
    .el-form{
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    ::v-deep .el-textarea__inner{
      max-height: 100px !important;
    }
    ::v-deep .el-form--label-top .el-form-item__label{
      padding: 0px !important;
    }
    .materialParams-card{
      box-shadow: rgba(100, 100, 111, 0.2) 0px 5px 15px;
      // box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      // box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
     ::v-deep   .el-form-item{
        .el-form-item__content{
          margin-left:0px !important;
        }
      }
      ::v-deep .el-input{
          >div{
            width: 120px;
            text-align: center;
          }
      }
    }
    .materialParams-bottom{
      .el-form-item{
        margin-bottom: 0px !important;
        ::v-deep .el-input{
          >div,>input{
            border-bottom: 0px !important;
            border-left: 0px !important;
            border-right: 0px !important;
            // border-top: 1px solid #DCDFE6;
            border-radius: 0px !important;
          }
       }
      }
    }
    .materialParams-top{
      .el-form-item{
        margin-bottom: 0px !important;
         ::v-deep .el-input{
          >div,>input{
            border: 0px !important;
            border-radius: 0px !important;
          }
        }
      }
      .el-col:nth-child(1){
        //
        ::v-deep .el-input{
          >div,>input{
            border-bottom: 0px !important;
            border-right: 0px !important;
            border-radius: 0px !important;
          }
        }
      }
    }
}

</style>

 src/views/rawMaterials/reportForInspection/index.vue

@@ -60,43 +60,43 @@
              style="width: 100%"
            >
              <el-table-column
                prop="applicationOrdernumber"
                label="申请单号"
                min-width="200"
              />
              <el-table-column
                prop="typeofInspection"
                prop="type"
                label="检验类型"
                min-width="200"
              />
              <el-table-column
                prop="objectofInspection"
                label="检验对象"
                prop="createTime"
                label="创建时间"
                min-width="200"
              />
              <el-table-column
                prop="palceofObject"
                label="对象位置"
                min-width="200"
              />
              <el-table-column
                prop="name"
                label="对象名称"
                min-width="200"
              />
              <el-table-column
                prop="date"
                label="登记日期"
                prop="userName"
                label="申请人"
                min-width="200"
              />
              <el-table-column
                prop="registrant"
                label="登记人"
                label="检验人"
                min-width="200"
              />
              <el-table-column
                prop="applicationTime"
                label="申请时间"
                prop="inspectionStatus"
                label="检验状态"
                min-width="200"
              />
              <el-table-column
                prop="qualifiedState"
                label="合格状态"
                min-width="200"
              />
              <el-table-column
                prop="inspectStartTime"
                label="检验开始时间"
                min-width="200"
              />
              <el-table-column
                prop="inspectEndTime"
                label="检验结束时间"
                min-width="200"
              />
              <el-table-column
@@ -117,7 +117,7 @@
                :page-sizes="[100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.inspectionTable.length"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
@@ -152,6 +152,7 @@
</template>

<script>
import { getInspectionList } from '@/api/rawMaterials/reportForInspection'
export default {
  data() {
    return {
@@ -160,18 +161,22 @@
        keyword: ''
      },
      inspectionTable: [{
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
        'id': '1681215775833042945',
        'type': 0,
        'inspectionStatus': 0,
        'qualifiedState': null,
        'state': 1,
        'createTime': '2023-07-18 16:14:11',
        'updateTime': null,
        'version': null,
        'userName': '测试人员',
        'inspectUserId': null,
        'inspectStartTime': null,
        'inspectEndTime': null
      }],
      currentPage: 1,
      total: 20, // æ€»æ¡æ•°
      pageSize: 100, // æ¯é¡µçš„数据条数
      pageSize: 10, // æ¯é¡µçš„数据条数
      radioValue: '全部',
      checkTypeVisible: false,
      type: 0
@@ -207,10 +212,18 @@
  //   // ç”±äºŽä¼šæ¸²æŸ“同样的 Foo ç»„件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  //   // å¯ä»¥è®¿é—®ç»„件实例 `this`
  // },
  created() {
    this.getInspectionTableData()
  },
  updated() {
    if (this.$route.name === 'ForInspectionDetail') this.showDetail = true
  },
  methods: {
    async getInspectionTableData() {
      const res = await getInspectionList({ pageSize: this.currentPage, countSize: this.pageSize })
      // this.inspectionTable = data
      console.log(res)
    },
    goToForInspectionDetail() {
      this.$router.push('/rawMaterials/reportForInspection/forInspectionDetail')
    },

 src/views/standardLibrary/index.vue

@@ -71,7 +71,7 @@
                  <el-tag
                    :type="scope.row.spe_state === 0 ? 'primary' : 'success'"
                    disable-transitions
                  >{{ scope.row.spe_state === 0 ? '未同意' : '已同意' }}</el-tag>
                  >{{ scope.row.spe_state === 0 ? '已停用' : '已启用' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
@@ -246,7 +246,7 @@
            <!-- åˆ†é¡µå™¨ -->
            <el-pagination
              :current-page="pageParams.pageNo"
              :page-sizes="[1, 2, 3, 4]"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="pageParams.pageNo"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageParams.total"
@@ -284,42 +284,13 @@
        keyword: ''
      },
      tableData: [
        {
          id: 2,
          name: 'AB',
          updateTime: '2023-07-12 00:00:12',
          username: '小小',
          vel: 'V1.0',
          spe_state: 1,
          visible: false
        },
        {
          id: 3,
          name: 'AB',
          updateTime: '2023-07-12 00:00:12',
          username: '小小',
          vel: 'V1.0',
          spe_state: 1,
          visible: false

        },
        {
          id: 4,
          name: 'AB',
          updateTime: '2023-07-12 00:00:12',
          username: '小小',
          vel: 'V1.0',
          spe_state: 1,
          visible: false

        }
      ],
      oldtableData: [],
      // åˆ†é¡µå‚æ•°
      pageParams: {
        pageNo: 1,
        pageSize: 1,
        total: 3
        pageSize: 10,
        total: 0
      },
      tablespecifications: [
      ],