Vue_New/src/xt_pages/management/index.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <el-button
        class="filter-item"
        style="float:right;"
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="small"
        @click="AddManage()"
        >新增</el-button
      >
    </div>
    <div class="app-container">
      <div class="cell clearfix">
        <el-input
          style="width: 400px;"
          v-model.trim="listQuery.searchKey"
          class="filter-item"
          placeholder="输入序列号/设备名/型号搜索"
          size="small"
        />
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="seahcerMacherInfo()"
          >搜索</el-button
        >
      </div>

      <div class="cell clearfix">
        <label class="title">
          <span class="name">分区:</span>
        </label>
        <div class="time">
          <ul class>
            <li
              :class="item.id == schedulType ? 'active' : ''"
              v-for="item in this.zones"
              :key="item.id"
              @click="selectSchedulType(item.id)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>

      <div class="cell clearfix">
        <label class="title">
          <span class="name">设备类型:</span>
        </label>
        <div class="time">
          <ul class>
            <li
              :class="item.id == schedulTypeone ? 'active' : ''"
              v-for="item in this.DeviceType"
              :key="item.id"
              @click="selectSchedulTypeOne(item.id)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>

      <div class="cell clearfix">
        <label class="title">
          <span class="name">状态:</span>
        </label>
        <div class="time">
          <ul class>
            <li
              :class="item.id == schedulTypetwo ? 'active' : ''"
              v-for="item in this.AllStatus"
              :key="item.id"
              @click="selectSchedulTypeTwo(item.id)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
      >
        <el-table-column label="序号" width="80" align="center" type="index">
          <!-- <template slot-scope="scope">{{ scope.row.id }}</template> -->
        </el-table-column>

        <el-table-column label="序列号" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.serial_number }}</template>
        </el-table-column>

        <el-table-column label="设备类型" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.device_type }}</template>
        </el-table-column>
        <el-table-column label="设备名称" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.device_name }}</template>
        </el-table-column>
        <el-table-column label="设备型号" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.device_mode }}</template>
        </el-table-column>

        <el-table-column label="分区" align="center">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>

        <el-table-column label="机位号" align="center">
          <template slot-scope="scope">{{ scope.row.bed_number }}</template>
        </el-table-column>

        <el-table-column label="机器状态" align="center">
          <template slot-scope="scope">{{ scope.row.machine_status }}</template>
        </el-table-column>

        <el-table-column label="使用次数" align="center">
          <template slot-scope="scope">{{ scope.row.user_total }}</template>
        </el-table-column>

        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row.id, scope.$index, scope.row.bed_id)"
              type="primary"
              size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        background
        style="margin-top:20px;float: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 新增设备 -->
      <manage-form
        ref="manageForm"
        v-on:getAllMachineInfo="getAllMachineInfo"
      ></manage-form>
    </div>
  </div>
</template>

<script>
import BreadCrumb from "../components/bread-crumb";
import { getAllMachineInfo, getAllSubregion } from "@/api/manage";
import ManageForm from "./components/ManageForm";

export default {
  name: "index.vue",
  components: {
    BreadCrumb,
    ManageForm
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "设备管理" },
        { path: false, name: "设备管理" }
      ],
      searchKey: "",
      zones: [{ id: 0, name: "全部" }],
      schedulType: 0,
      schedulTypeone: 0,
      schedulTypetwo: 0,
      DeviceType: [
        { id: 0, name: "全部" },
        { id: 1, name: "透析机" },
        { id: 2, name: "水处理机" },
        { id: 3, name: "其他" }
      ],

      AllStatus: [
        { id: 0, name: "全部" },
        { id: 1, name: "使用机" },
        { id: 2, name: "备用机" },
        { id: 3, name: "急诊机" },
        { id: 4, name: "报废机" }
      ],
      tableData: [],
      listQuery: {
        page: 1,
        limit: 10,
        searchKey: "",
        zoneid: "",
        equipmentid: "",
        statusid: ""
      },
      total: 0
    };
  },
  methods: {
    getAllSubregion() {
      getAllSubregion().then(response => {
        if (response.data.state === 1) {
          var zone = response.data.data.zones;
          var zones = [{ id: 0, name: "全部" }];
          for (let i = 0; i < zone.length; i++) {
            const item = zone[i];
            zones.push({ id: item.id, name: item.name });
          }
          // console.log('zones', zones)
          this.zones = zones;
        }
      });
    },
    selectSchedulType(scheduleType) {
      this.schedulType = scheduleType;
      this.listQuery.zoneid = scheduleType;
      this.getAllMachineInfo();
    },
    selectSchedulTypeOne(scheduleType) {
      this.schedulTypeone = scheduleType;
      this.listQuery.equipmentid = scheduleType;
      this.getAllMachineInfo();
    },
    selectSchedulTypeTwo(scheduleType) {
      this.schedulTypetwo = scheduleType;
      this.listQuery.statusid = scheduleType;
      this.getAllMachineInfo();
    },
    seahcerMacherInfo() {
      this.getAllMachineInfo();
    },
    AddManage() {
      this.$refs.manageForm.open();
    },
    getAllMachineInfo() {
      getAllMachineInfo(
        this.listQuery.page,
        this.listQuery.limit,
        this.listQuery.searchKey,
        this.listQuery.zoneid,
        this.listQuery.equipmentid,
        this.listQuery.statusid
      ).then(response => {
        if (response.data.state === 1) {
          var addmahcer = response.data.data.addmahcer;
          console.log("addmacher", addmahcer);
          for (let index = 0; index < addmahcer.length; index++) {
            if (addmahcer[index].device_type === 1) {
              addmahcer[index].device_type = "透析机";
              addmahcer[index].bed_number = addmahcer[index].number;
            }
            if (addmahcer[index].device_type === 2) {
              addmahcer[index].device_type = "水处理机";
              addmahcer[index].bed_number = addmahcer[index].bed_number;
            }

            if (addmahcer[index].device_type === 3) {
              addmahcer[index].device_type = "其他";
              addmahcer[index].bed_number = addmahcer[index].bed_number;
            }

            if (addmahcer[index].machine_status === 1) {
              addmahcer[index].machine_status = "使用机";
            }
            if (addmahcer[index].machine_status === 2) {
              addmahcer[index].machine_status = "备用机";
            }
            if (addmahcer[index].machine_status === 3) {
              addmahcer[index].machine_status = "急诊机";
            }
            if (addmahcer[index].machine_status === 4) {
              addmahcer[index].machine_status = "报废机";
            }
          }
          this.tableData = addmahcer;
          // console.log('addmacher', addmahcer)
          var total = response.data.data.total;
          // console.log('total', total)
          this.total = total;
        }
      });
    },
    handleSizeChange(limit) {
      this.listQuery.limit = limit;
      this.getAllMachineInfo();
    },
    handleCurrentChange(page) {
      this.listQuery.page = page;
      this.getAllMachineInfo();
    },
    handleClick(id, index, bedid) {
      this.$router.push({
        path:
          "/device/home?index=" +
          index +
          "&" +
          "bedid=" +
          bedid +
          "&" +
          "id=" +
          id
      });
      // this.$router.push({ path: '/device/home?index=' + index + '&' + 'id=' + id })
    }
  },
  created() {
    // 获取所有的分区
    this.getAllSubregion();
    this.getAllMachineInfo();
  }
};
</script>

<style scoped></style>