udiwms-vue-frame/src/views/dev/deviceInfo.vue

<template>
  <div>
    <el-card>

      <el-form :model="query" v-if="showSearch" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="设备编码">
              <el-input v-model="query.deviceCode" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备名称">
              <el-input v-model="query.productName" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备状态">
              <el-select v-model="query.status"
                         style="width: 100%"
                         clearable>
                <el-option
                  v-for="item in deviceStatus"
                  :key="item.key"
                  :label="item.desc"
                  :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="top-right-btn">
        <el-button-group>
          <el-button icon="el-icon-view" type="primary" @click="showSearch = !showSearch">显示/隐藏搜索栏</el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onReset"
          >重置
          </el-button>
          <el-button type="primary" icon="el-icon-search" @click="search"
          >查询
          </el-button>
        </el-button-group>
      </div>
      <el-divider style="margin: 15px"></el-divider>

      <el-table :data="list" @row-click="rowClick" v-loading="loading" click-row-light>
        <el-table-column label="序号" width="50" type="index"/>
        <el-table-column label="科室" width="150" prop="deptName"/>
        <el-table-column label="最小销售标识" width="150" prop="nameCode"/>
        <el-table-column label="设备名称" width="150" prop="productName"/>
        <el-table-column label="规格型号" width="160" prop="ggxh"/>
        <el-table-column label="状态" width="120" prop="statusName">
          <template slot-scope="scope">
            <el-tag :type="deviceStatus[scope.row.status].tagType">{{ scope.row.statusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="巡检锁定" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.checkLock?'primark':'info'">{{ scope.row.checkLock ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="120" prop="count"/>
        <el-table-column label="计量单位" width="100" prop="measname"/>
        <el-table-column label="生产企业" width="180" prop="manufactory"/>
        <!--        <el-table-column label="批次号" width="100" prop="batchNo"/>-->
        <!--        <el-table-column label="序列号" width="100" prop="serialNo"/>-->
        <!--        <el-table-column label="生产日期" width="140" prop="productionDate"/>-->
        <!--        <el-table-column label="过期时间" width="140" prop="expireDate"/>-->
        <!--        <el-table-column label="供应商" width="100" prop="supName"/>-->
        <!--        <el-table-column label="udi码" width="150" prop="udi"/>-->
        <!--        <el-table-column label="注册/备案号" width="150" prop="zczbhhzbapzbh"/>-->
        <!--        <el-table-column label="操作" width="120" fixed="right">-->
        <!--          <template scope="scope">-->

        <!--            <el-button type="text"-->
        <!--            >详情-->
        <!--            </el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="query.page"
        :limit.sync="query.limit"
        @pagination="getList"
      />
    </el-card>

    <el-card>
      <div slot="header" class="clearfix">
        <div class="fl">
          {{
            `设备详情 ${clickRow ? '——' + clickRow.productName + '(' + clickRow.ggxh + ')' : ''}`
          }}
        </div>
        <div class="fr">
          <el-button @click="getDetailList">刷新</el-button>
        </div>
      </div>
      <el-form v-if="clickRow" :model="detailQuery" inline label-width="auto">
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="设备编码">
              <el-input v-model.trim="detailQuery.deviceCode" clearable/>
            </el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getDetailList"
            >查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="detailList" v-loading="detailLoading">
        <el-table-column label="序号" width="50" type="index"/>
        <el-table-column label="科室" width="120" prop="deptName"/>
        <el-table-column label="设备编码" width="150" prop="deviceCode"/>
        <el-table-column label="最小销售标识" width="150" prop="nameCode"/>
        <el-table-column label="名称" width="150" prop="productName"/>
        <el-table-column label="规格型号" width="160" prop="ggxh"/>
        <el-table-column label="状态" width="80" prop="statusName">
          <template slot-scope="scope">
            <el-tag :type="deviceStatus[scope.row.status].tagType">{{ scope.row.statusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="巡检锁定" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.checkLock?'primark':'info'">{{ scope.row.checkLock ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="变更次数" width="80" prop="changeCount"/>
        <el-table-column label="维修次数" width="80" prop="repairCount"/>
        <el-table-column label="巡检次数" width="80" prop="checkCount"/>
        <el-table-column label="计量单位" width="80" prop="measname"/>
        <el-table-column label="生产企业" width="180" prop="manufactory"/>
        <el-table-column label="批次号" width="100" prop="batchNo"/>
        <el-table-column label="序列号" width="100" prop="serialNo"/>
        <el-table-column label="生产日期" width="120" prop="productionDate"/>
        <el-table-column label="过期时间" width="120" prop="expireDate"/>
        <el-table-column label="供应商" width="160" prop="supName"/>
        <el-table-column label="udi码" width="150" prop="udi"/>
        <el-table-column label="注册/备案号" width="150" prop="zczbhhzbapzbh"/>
        <el-table-column label="操作" :width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="mr5" @click="getDeviceLogs(scope.row)"
            >变更日志
            </el-button>
            <el-popover class="mr5"
                        placement="left"
                        trigger="click">
              <div v-if="scope.row.QR" align="center">
                <el-image :src="scope.row.QR" style="display: block"/>
                <el-button style="display: block"
                           @click="downloadBase64Image(scope.row.QR,`${scope.row.deviceCode}——${scope.row.productName}——${scope.row.ggxh}`)">
                  下载
                </el-button>
              </div>
              <el-button slot="reference" type="text" @click="genQR(scope.row)"
              >设备码
              </el-button>
            </el-popover>
            <el-button v-if="isChoose&&scope.row.status==deviceStatus.NORMAL.key&&scope.row.checkLock==false"
                       type="text"
                       @click="chooseFunc(scope.row)"
            >选择
            </el-button>
            <el-button
              type="text"
              size="small"
              @click.native.stop="printDevLabel(scope.row)"
            >打印
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="detailTotal>0"
        :total="detailTotal"
        :page.sync="detailQuery.page"
        :limit.sync="detailQuery.limit"
        @pagination="getDetailList"
      />

    </el-card>

    <el-dialog
      :title="`设备变更日志——${productRow.productName}(${productRow.deviceCode})`"
      :visible="true"
      v-if="showLog"
      @close="showLog = false"
    >
      <el-timeline>
        <el-timeline-item placement="top"
                          v-for="(item, index) in logList"
                          :key="index"
                          size="large"
                          icon="el-icon-s-promotion"
                          :type="deviceChangeType[item.type].tagType"
                          :timestamp="item.createTime">
          <el-card style="margin-left: 0px">
            <div slot="header">
              <div style="font-size: 24px">
                {{ item.typeName }}
              </div>
            </div>
            <el-descriptions>
              <el-descriptions-item label="操作部门">{{ item.deptName }}</el-descriptions-item>
              <el-descriptions-item label="操作人">{{ item.createUserName }}</el-descriptions-item>
              <el-descriptions-item label="变更单号">{{ item.changeOrderId }}</el-descriptions-item>
              <el-descriptions-item label="目标部门">{{ item.toDeptName }}</el-descriptions-item>
              <el-descriptions-item label="确认人">{{ item.confirmUserName }}</el-descriptions-item>
              <el-descriptions-item label="确认时间">{{ item.confirmTime }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>

</template>

<script src="./js/deviceInfo.js"/>