feat(src/views/reagent/receivingandreturn): 完成试剂领用和归还

src/api/receivingReturn.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+export function use(data) {
+  return request({
+    url: '/api/drug/use',
+    method: 'post',
+    data
+  })
+}
+
+export function drug_return(data) {
+  return request({
+    url: '/api/drug/drug_return',
+    method: 'post',
+    data
+  })
+}
+
+export function use_or_return_list(data) {
+  return request({
+    url: '/api/drug/use_or_return_list',
+    method: 'post',
+    data
+  })
+}
+

src/router/index.js

@@ -156,8 +156,8 @@ export const constantRoutes = [
     children: [
       {
         path: 'index',
-        name: 'receiving',
+        name: 'Receiving',
-        component: () => import('@/views/reagent/receiving/index'),
+        component: () => import('@/views/reagent/receivingandreturn/index'),
         meta: { title: '试剂领用', icon: '试剂领用' }
       }
     ]
@@ -169,7 +169,7 @@ export const constantRoutes = [
       {
         path: 'index',
         name: 'SendBack',
-        component: () => import('@/views/reagent/sendback/index'),
+        component: () => import('@/views/reagent/receivingandreturn/index'),
         meta: { title: '试剂归还', icon: '试剂归还' }
       }
     ]

src/views/reagent/receiving/index.vue

@@ -1,118 +0,0 @@
-<template>
-  <div class="contents">
-    <div class="content left">
-      <div class="title">试剂领用</div>
-      <div class="img">
-        <img src="@/assets/5-试剂入库/扫描试剂瓶.png" alt="">
-      </div>
-      <div class="text">
-        请扫描或检测RFID
-      </div>
-    </div>
-    <div class="content">
-      <div class="title">试剂领用列表</div>
-      <div class="show-data">
-        <el-table
-          :data="tableData"
-          style="width: 100%"
-          height="500"
-          :header-cell-style="headerStyle"
-        >
-          <el-table-column
-            prop="date"
-            label="日期"
-            width="180"
-            align="center"
-          />
-          <el-table-column
-            prop="name"
-            label="姓名"
-            width="180"
-            align="center"
-          />
-          <el-table-column
-            prop="address"
-            label="地址"
-            align="center"
-          />
-        </el-table>
-      </div>
-      <div class="page">
-        <el-pagination
-          layout="prev, pager, next"
-          :total="1000"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'SendBack',
-  data() {
-    return {
-      headerStyle: { 'background': '#E6E6E6' },
-      tableData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1517 弄'
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1519 弄'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄'
-      }]
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.contents{
-  margin: 1rem;
-  display: flex;
-  .content{
-    width: 50%;
-    height: calc(100vh - 12rem);
-    padding: 1rem;
-    background: white;
-    .title{
-      font-size: 20px;
-      font-weight: bold;
-      color: #000000;
-    }
-    .img{
-      text-align: center;
-      margin-top: 6rem;
-      img{
-        width: 25.25rem;
-      }
-    }
-    .text{
-      margin-top: 2rem;
-      text-align: center;
-      font-size: 1.8rem;
-      font-weight: 400;
-      color: #909399;
-    }
-    .show-data{
-      margin-top: 1rem;
-    }
-    .page{
-      text-align: center;
-    }
-  }
-  .left{
-    margin-right: 1rem;
-  }
-}
-
-</style>

src/views/reagent/receivingandreturn/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="contents">
+    <div class="content left">
+      <div class="title">{{ this.$route.name === 'Receiving' ? '试剂领用' : '试剂归还' }}</div>
+      <div class="img">
+        <img src="@/assets/5-试剂入库/扫描试剂瓶.png" alt="">
+      </div>
+      <div class="text">
+        请扫描或检测RFID
+      </div>
+    </div>
+    <div class="content">
+      <div class="title">{{ this.$route.name === 'Receiving' ? '试剂领用列表' : '试剂归还列表' }}</div>
+      <div class="show-data">
+        <el-table
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          :data="tableData"
+          style="width: 100%"
+          height="500"
+          :header-cell-style="headerStyle"
+        >
+          <el-table-column
+            prop="name"
+            label="试剂名称"
+            align="center"
+          />
+          <el-table-column
+            prop="bar_code"
+            label="条码编号"
+            align="center"
+          />
+          <el-table-column
+            prop="cas_number"
+            label="CAS码"
+            align="center"
+          />
+          <el-table-column
+            prop="purity"
+            label="纯度"
+            align="center"
+          />
+        </el-table>
+      </div>
+      <div class="page">
+        <el-pagination
+          layout="prev, pager, next"
+          :total="total"
+          hide-on-single-page
+          :disabled="loading"
+          :current-page.sync="page"
+          :page-size.sync="page_size"
+          @current-change="pageChange"
+        />
+      </div>
+    </div>
+    <el-dialog :visible.sync="dialogVisible" width="40%">
+      <el-radio-group v-model="place">
+        <el-radio :label="3">备选项1</el-radio>
+        <el-radio :label="6">备选项2</el-radio>
+        <el-radio :label="9">备选项3</el-radio>
+        <el-radio :label="12">备选项4</el-radio>
+        <el-radio :label="19">备选项5</el-radio>
+      </el-radio-group>
+      <div style="text-align: center">
+        <el-button type="primary" @click="btnClick">提交</el-button>
+      </div>
+    </el-dialog>
+    <Scannner @getcode="getCode" />
+  </div>
+</template>
+
+<script>
+import Scannner from '@/components/Scannner/index'
+import { use, drug_return, use_or_return_list } from '@/api/receivingReturn'
+import stringify from '@/utils/stringify'
+export default {
+  name: 'ReceivingAndReturn',
+  components: { Scannner },
+  data() {
+    return {
+      barCode: '',
+      headerStyle: { 'background': '#E6E6E6' },
+      tableData: [],
+      page: 1,
+      page_size: 15,
+      total: 0,
+      loading: false,
+      dialogVisible: false,
+      place: null
+    }
+  },
+  watch: {
+    // 如果 `barCode` 发生改变，这个函数就会运行
+    // 扫码后提交后台并自动选择下一行
+    barCode: function(newCode, oldCode) {
+      if (this.$route.name === 'Receiving') {
+        use(stringify({ 'bar_code': newCode })).then(res => {
+          this.tableData.push(res.data)
+          this.$message.success(res.data.name + '  试剂领用成功！')
+        })
+      } else {
+        this.dialogVisible = true
+        // drug_return(stringify({ 'bar_code': newCode, 'place': '' })).then(res => {
+        //   this.tableData.push(res.data)
+        // })
+      }
+    }
+  },
+  created() {
+    this.pageChange(1)
+  },
+  methods: {
+    btnClick() {
+      drug_return(stringify({ 'bar_code': this.barCode, 'place': this.place })).then(res => {
+        this.tableData.push(res.data)
+        this.dialogVisible = false
+        this.$message.success('归还成功！')
+      })
+    },
+    getCode(code) {
+      this.barCode = code
+    },
+    getList() {
+      const data = {
+        status: this.$route.name === 'Receiving' ? 2 : 3,
+        page: this.page,
+        page_size: this.page_size
+      }
+      this.loading = true
+      use_or_return_list(stringify(data)).then(res => {
+        this.tableData = res.data.data
+        this.total = res.data.total_count
+      }).finally(() => (this.loading = false))
+    },
+    pageChange(page) {
+      this.page = page
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contents{
+  margin: 1rem;
+  display: flex;
+  .content{
+    width: 50%;
+    height: calc(100vh - 12rem);
+    padding: 1rem;
+    background: white;
+    .title{
+      font-size: 20px;
+      font-weight: bold;
+      color: #000000;
+    }
+    .img{
+      text-align: center;
+      margin-top: 6rem;
+      img{
+        width: 25.25rem;
+      }
+    }
+    .text{
+      margin-top: 2rem;
+      text-align: center;
+      font-size: 1.8rem;
+      font-weight: 400;
+      color: #909399;
+    }
+    .show-data{
+      margin-top: 1rem;
+    }
+    .page{
+      text-align: center;
+    }
+  }
+  .left{
+    margin-right: 1rem;
+  }
+}
+
+</style>