设备台账的页面搭建

hailin

2023-07-25 2bd2209ef2c966a036952e5983325c312fb58582

 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>