新增所有设备组件

oa-ui/src/views/oa/supply/deviceList.vue

@@ -0,0 +1,210 @@
+<!--
+ * @Author: ysh
+ * @Date: 2024-06-21 18:51:51
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-30 15:36:16
+-->
+<template>
+  <div>
+    <el-form :inline="true">
+      <el-form-item label="设备类别：">
+        <el-select v-model="queryParams.type" filterable clearable @change="getList">
+          <el-option :value="'办公设备'" label="办公设备"></el-option>
+          <el-option :value="'仪器设备'" label="仪器设备"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="出厂编号：">
+        <el-input v-model="queryParams.code" clearable @keyup.enter.native="getList"></el-input>
+      </el-form-item>
+      <el-form-item label="设备状态：">
+        <el-select v-model="queryParams.status" filterable clearable @change="getList">
+          <el-option :value="'0'" label="被领用"></el-option>
+          <el-option :value="'1'" label="可领用"></el-option>
+          <el-option :value="'2'" label="维修中"></el-option>
+          <el-option :value="'3'" label="已停用"></el-option>
+          <el-option :value="'4'" label="已报废"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="设备名称：">
+        <el-select v-model="queryParams.name" filterable @change="getList" clearable>
+          <el-option v-for="item in nameList" :key="item.name" :label="item.name" :value="item.name">
+          </el-option>
+        </el-select>
+        <!-- <el-input v-model="queryParams.name" clearable></el-input> -->
+      </el-form-item>
+      <el-form-item label="品牌：">
+        <el-input v-model="queryParams.brand" clearable @keyup.enter.native="getList"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getList" type="primary">搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table ref="chooseDevice" :data="list" @selection-change="handleSelectionChange" :row-key="getRowKeys"
+      @current-change="handleCurrentChange" @row-dblclick="confirmChooseBySingle" :highlight-current-row="!multiple">
+      <el-table-column type="selection" width="50" align="center" :reserve-selection="true" v-if="multiple" />
+      <el-table-column label="设备状态" align="center" prop="status" v-if="queryParams.type == '仪器设备'">
+        <template slot-scope="scope">
+          <el-tag :type="statusType(scope.row.status)">
+            {{ statusTypeText(scope.row.status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="出厂编号" align="center" prop="code" v-if="queryParams.type == '仪器设备'" />
+      <el-table-column label="设备品牌" align="center" prop="brand" />
+      <el-table-column label="设备名称" align="center" prop="name" />
+      <el-table-column label="规格型号" align="center" prop="series" />
+      <el-table-column label="存放地址" align="center" prop="place" />
+      <el-table-column label="单日成本" align="center" prop="dayCost" />
+    </el-table>
+    <div style="text-align: right;">
+      <el-pagination @current-change="getList" :current-page.sync="queryParams.pageNum"
+        :page-size="queryParams.pageSize" layout="total, prev, pager, next" :total="total">
+      </el-pagination>
+    </div>
+    <div>
+      已选设备：
+      <el-tag v-if="multiple" v-for="item in chooseList" style="margin: 5px;" :key="item.deviceIdId">
+        {{ item.name + '-' + item.series + '-' + item.brand }}
+      </el-tag>
+      <el-tag v-if="!multiple" style="margin: 5px;">{{ formatChooseList() }}</el-tag>
+      <div style="text-align: center;margin-top: 20px;">
+        <el-button type="primary" @click="confirmChoose">确认选择</el-button>
+        <el-button @click="clearChoose">清空选择</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listDevice, listDeviceName } from "@/api/oa/device/device";
+import { multiply } from 'ol/transform';
+export default {
+  props: {
+    multiple: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    multiple(newval) {
+      if (newval) {
+        this.chooseList = []
+      } else {
+        this.chooseList = {}
+      }
+      this.getList();
+      this.getNameList();
+    }
+  },
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        type: '办公设备'
+      },
+      list: [],
+      form: {},
+      total: 0,
+      loading: false,
+      chooseList: undefined,
+      nameList: [],
+    }
+  },
+  created() {
+    if (this.multiply) {
+      this.chooseList = []
+    } else {
+      this.chooseList = {}
+    }
+    this.getList();
+    this.getNameList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      listDevice(this.queryParams).then(response => {
+        this.list = response.rows;
+        this.total = response.total;
+        this.loading = false;
+        this.clearChoose();
+      });
+    },
+    getNameList() {
+      listDeviceName().then(res => {
+        this.nameList = res.data
+      })
+    },
+    handleSelectionChange(val) {
+      this.chooseList = val
+    },
+    handleCurrentChange(val) {
+      if (!this.multiple) {
+        this.chooseList = val
+      }
+    },
+    getRowKeys(row) {
+      return row.deviceId;
+    },
+    confirmChoose() {
+      this.$emit('chooseList', this.chooseList)
+    },
+    confirmChooseBySingle() {
+      if (!this.multiple) {
+        if (this.chooseList)
+          this.$emit('chooseList', this.chooseList)
+      }
+    },
+    clearChoose() {
+      if (this.multiple)
+        this.$refs.chooseDevice.clearSelection();
+      else {
+        this.chooseDevice = {}
+      }
+    },
+    statusTypeText(row) {
+      if (row == '0') {
+        return '被领用'
+      }
+      if (row == '1') {
+        return '可领用'
+      }
+      if (row == '2') {
+        return '维修中'
+      }
+      if (row == '3') {
+        return '已停用'
+      }
+      if (row == '4') {
+        return '已报废'
+      }
+    },
+    statusType(row) {
+      if (row == '0') {
+        return 'warning'
+      }
+      if (row == '1') {
+        return 'success'
+      }
+      if (row == '2') {
+        return 'info'
+      }
+      if (row == '3') {
+        return 'danger'
+      }
+      if (row == '4') {
+        return 'info'
+      }
+    },
+    formatChooseList() {
+      if (this.chooseList.name) {
+        return this.chooseList.name + '-' + this.chooseList.series + '-' + this.chooseList.brand
+      }else{
+        return null
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>