Merge branch 'master' of https://gitee.com/yuanchu_code/lims-front-end

Goldennfish

2023-07-25 ccfd5dc264d07471d831d2287ff03f293c295981

 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"
@@ -19,22 +19,31 @@
        </el-form>
      </div>
      <div class="serve-btn">
        <el-button type="primary" icon="el-icon-plus">新增人员</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="drawerFormVisible = true">新增人员</el-button>
      </div>
    </div>
    <div class="content-main">
      <div class="library-bom">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
        <div class="bom-item-search">
          <el-row>
            <el-col :span="19">
              <el-input
                v-model="filterText"
                placeholder="输入关键字进行过滤"
              />
            </el-col>
            <el-col :span="5">
              <el-button type="primary" size="small" @click="FormVisible = true"><i class="el-icon-plus" /></el-button>
            </el-col>
          </el-row>
        </div>
        <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 +65,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"
              min-width="200"
            />
            <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="上次计量单位"
              prop="termValidity"
              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="incumbentStatus"
              prop="conditions"
              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 +115,54 @@
              </template>
            </el-table-column>
            <el-table-column
              prop="storage_place"
              label="存放地"
              min-width="200"
            />
            <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-dialog title="添加分类" :visible.sync="FormVisible" width="33%">
              <el-form :model="treeForm">
                <el-form-item label="分类名称" label-width="100px">
                  <el-input v-model="treeForm.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="父级分类" label-width="100px">
                  <el-select v-model="treeForm.type" placeholder="请选择">
                    <el-option label="原材料" value="0" />
                    <el-option label="电线电缆" value="1" />
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="FormVisible = false">取 消</el-button>
                <el-button type="primary">确 定</el-button>
              </div>
            </el-dialog>
          </div>
          <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 +170,273 @@
        </div>
      </div>
    </div>
    <!-- 抽屉 -->
    <el-drawer
              title="新增仪器设备"
              :before-close="handleClose"
              :visible.sync="drawerFormVisible"
              direction="rtl"
              custom-class="demo-drawer"
              ref="drawer"
              size="40%"
              >
              <div class="demo-drawer__content">
                <el-form label-position="top" :model="equipmentform">
                  <el-row :gutter="50">
                    <el-col :span="11">
                      <el-form-item label="所属分类：" label-width="80">
                        <el-select
                          v-model="equipmentform.classifyId"
                          clearable
                          filterable
                          :allow-create="true"
                          placeholder="请选择"
                          @blur="productSelect"
                          style="width:100%"
                        >
                          <el-option
                            v-for="item in fatherOpetions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.label"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="设备编号：" label-width="80">
                        <el-input v-model="equipmentform.equipmentCode" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                      <el-col :span="11">
                      <el-form-item label="仪器设备名称：" label-width="80">
                        <el-input v-model="equipmentform.name" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="状态：" label-width="80">
                        <el-select
                          v-model="equipmentform.classifyId"
                          clearable
                          filterable
                          :allow-create="true"
                          placeholder="请选择仪器设备状态"
                          @blur="productSelect"
                          style="width:100%"
                        >
                          <el-option
                            v-for="item in fatherOpetions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.label"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="11">
                      <el-form-item label="型号规格：" label-width="80">
                        <el-input v-model="equipmentform.specification_models" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="测量范围：" label-width="80">
                        <el-input v-model="equipmentform.measuringRange" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="11">
                      <el-form-item label="不确定度/准确度/最大允许误差：" label-width="80">
                        <el-input v-model="equipmentform.errorRate" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="生产厂家：" label-width="80">
                        <el-input v-model="equipmentform.manufacturer" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="11">
                      <el-form-item label="存放地点：" label-width="80">
                        <el-input v-model="equipmentform.storagePlace" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="到货日期：" label-width="80">
                        <el-date-picker
                          v-model="equipmentform.arrivalDate"
                          type="date"
                          placeholder="请选择到货日期"
                          style="width:100%">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="11">
                      <el-form-item label="验收日期：" label-width="80">
                        <el-date-picker
                          v-model="equipmentform.acceptanceDate"
                          type="date"
                          placeholder="请选择验收日期"
                          style="width:100%">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="保管人：" label-width="80">
                        <el-select
                          v-model="equipmentform.keeper"
                          clearable
                          filterable
                          :allow-create="true"
                          placeholder="请选择保管人"
                          @blur="productSelect"
                          style="width:100%"
                        >
                          <el-option
                            v-for="item in fatherOpetions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.label"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="11">
                      <el-form-item label="是否支持数采：" label-width="80">
                        <el-radio v-model="equipmentform.whetherDataAcquisition" label="1">是</el-radio>
                        <el-radio v-model="equipmentform.whetherDataAcquisition" label="2">否</el-radio>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="仪器设备计量：" label-width="80">
                        <el-radio v-model="equipmentform.equipmentMeasurement" label="1">需要</el-radio>
                        <el-radio v-model="equipmentform.equipmentMeasurement" label="2">不需要</el-radio>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="11">
                    <el-form-item label="描述：" label-width="80">
                      <el-input
                          type="textarea"
                          :rows="2"
                          placeholder="请输入内容"
                          v-model=equipmentform.descriptiveness
                          style="width:217%">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  </el-row>
                </el-form>
                <div class="demo-drawer__footer">
                  <el-button @click="drawerFormVisible = false" class="el-button--default">取 消</el-button>
                  <el-button type="primary" class="el-button--primary el-button--medium">确 定</el-button>
                </div>
              </div>
            </el-drawer>
    <!--  -->
    <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: [{
@@ -166,6 +451,20 @@
          }]
        }]
      }],
      treeForm: [{
        name: '',
        type: ''
      }],
      personnerlTable: [{
        specification_models: 'WCDMS-1', // 型号规格
        equipment_name: '数字电桥', // 仪器设备名称
        term_validity: 12, // 计量截止有效期
        equipment_code: 'JSTC-W1-00001', // 仪器设备编号
        keeper: 0, // 保管人
        id: 1, // 序号
        conditions: 1, // 设备状态
        storage_place: '地球亚洲中国江苏南通' // 存放地
      }],
      // tree默认值
      defaultProps: {
        children: 'children',
@@ -178,24 +477,130 @@
      // 表格搜索单选值
      radioValue: '全部',
      // 表格搜索已过期
      isOut: false
      isOut: false,
      FormVisible: false,
      drawerFormVisible: false,
      loading: false,
      equipmentform: {
        acceptanceDate: '', // 验收日期
        arrivalDate: '', // 到货日期
        classifyId: '', // 所属分类
        conditions: '', // 状态
        descriptiveness: '', // 描述
        equipmentCode: '', // 设备编号
        equipmentMeasurement: '', // 仪器设备计量
        equipmentName: '', // 仪器设备名称
        errorRate: '', // 不确定度/准确度/最大允许误差
        keeper: '', // 保管人
        manufacturer: '', // 生产厂家
        measuringRange: '', // 测量范围
        specificationsModels: '', // 型号规格
        storagePlace: '', // 存放地点
        whetherDataAcquisition: '' // 是否支持数采
      },
      timer: null,
      formLabelWidth: '80',
      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() {
      // 当前页更改
    }
  },
  handleClose(done) {
    if (this.loading) {
      return
    }
    this.$confirm('确定要提交表单吗？')
      .then(_ => {
        this.loading = true
        this.timer = setTimeout(() => {
          done()
          // 动画关闭需要一定的时间
          setTimeout(() => {
            this.loading = false
          }, 400)
        }, 2000)
      })
      .catch(_ => {})
  }
}
</script>

<style lang="scss" scoped>
.demo-drawer__content{
  margin-left: 50px;
  // margin-right: 5px;
}
.demo-drawer__footer {
  display: flex;
  justify-content: space-between;
}

.demo-drawer__footer .el-button--default {
  background-color: #fff;
  color: #333;
  width: 45%;
}

.demo-drawer__footer .el-button--primary {
  background-color: #409EFF;
  color: #fff;
  width: 45%;
  margin-right: 60px;
}
.ledger-main{
  width: 100%;
  height: 100%;
@@ -235,6 +640,43 @@
    .library-bom{
      flex: 2;
      margin-right: 12px;
      .bom-item-search{
        margin-bottom: 12px;
        ::v-deep .el-input{
          input{
            height: 33px;
            line-height: 33px;
          }
        }
        .tips{
          height: 33px !important;
          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: 36px;
            }
            .el-button{
              padding: 0;
            }
        }
      }
         .bom-item-search .el-row{
          // display: flex;
          .el-col{
            text-align: right;
           }
          }
      .el-tree {
        margin-top: 12px;
        ::v-deep .el-tree-node__content{
@@ -290,5 +732,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>