feat(src/views/reagent/weighing/): 完成称重前端界面编写

src/views/reagent/weighing/index.vue

@@ -1,15 +1,195 @@
 <template>
-  <h1>
-    试剂称重
-  </h1>
+  <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 right">
+      <div class="top">
+        <div class="title">选择称重</div>
+        <div class="tip">精度：0.01g±0.03g</div>
+        <div class="show-data">
+          <div class="top">
+            <span class="num">1042.56</span>
+            <span class="unit">克(g)</span>
+          </div>
+          <div class="bottom">
+            <el-radio v-model="radio" label="1">余量称重</el-radio>
+            <el-radio v-model="radio" label="2">用量称重</el-radio>
+            <el-button type="primary">开始称重</el-button>
+            <el-button type="primary" plain>去皮（初始化天平）</el-button>
+            <el-input placeholder="手动输入" />
+            <el-button type="warning">设置为空</el-button>
+          </div>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="title">详情信息</div>
+        <el-descriptions class="margin-top" size="small" :column="2" border>
+          <el-descriptions-item span="2" label="试剂名称">氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐</el-descriptions-item>
+          <el-descriptions-item span="2" label="英文名称">1-(3-Sulfopropyl)-2-[3-(3-sulfopropyl)-2(3H)-benzothiazolylidene]methyl}naphtho1,2-djthiazolium</el-descriptions-item>
+          <el-descriptions-item label="条码编号">578104F3500104E0</el-descriptions-item>
+          <el-descriptions-item label="CAS码">226883-66-5</el-descriptions-item>
+          <el-descriptions-item label="试剂纯度">AR</el-descriptions-item>
+          <el-descriptions-item label="试剂余量">578</el-descriptions-item>
+          <el-descriptions-item label="生产日期">2022-02-26  10:00:00</el-descriptions-item>
+          <el-descriptions-item label="过期日期">2023-02-26  10:00:00</el-descriptions-item>
+          <el-descriptions-item label="生产厂家">中国计量科学研究院</el-descriptions-item>
+          <el-descriptions-item label="经销商">中国计量科学研究院</el-descriptions-item>
+          <el-descriptions-item label="当前状态">出库</el-descriptions-item>
+          <el-descriptions-item label="是否监管">否</el-descriptions-item>
+          <el-descriptions-item label="所属终端">1号柜-L2-A1</el-descriptions-item>
+          <el-descriptions-item label="最后使用人"><el-tag>陈小红</el-tag></el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </div>
+    <Scannner @getcode="getCode" />
+  </div>
 </template>
 
 <script>
+import Scannner from '@/components/Scannner/index'
+import { use } from '@/api/reagent/receivingReturn'
+import stringify from '@/utils/stringify'
 export default {
-  name: 'Weighing'
+  name: 'Weighing',
+  components: { Scannner },
+  data() {
+    return {
+      headerStyle: { 'background': '#E6E6E6' },
+      tableData: [],
+      radio: '1',
+      barCode: ''
+    }
+  },
+  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)
+        // })
+      }
+    }
+  },
+  methods: {
+    getCode(code) {
+      this.barCode = code
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.contents{
+  margin: 1rem;
+  display: flex;
+  .content{
+    width: 50%;
+    height: calc(100vh - 12rem);
+    padding: 1rem;
+    background: white;
+    .title{
+      font-size: 1.25rem;
+      font-weight: bold;
+      color: #000000;
+    }
+    .tip{
+      width: 100%;
+      font-size: 0.875rem;
+      font-weight: 400;
+      color: #C0C4CC;
+      text-align: right;
+    }
+    .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;
+      .top{
+        .num{
+          width: 660px;
+          height: 124px;
+          background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FC 100%);
+          box-shadow: inset 0px 4px 12px 1px #DCDFE6;
+          border-radius: 4px 4px 4px 4px;
+          opacity: 1;
+        }
+      }
+    }
+    .page{
+      text-align: center;
+    }
+  }
+  .left{
+    margin-right: 1rem;
+  }
+  .right{
+    background-color: #F7F7F7;
+    padding: 0;
+    .top{
+      background: white;
+      margin-bottom: 1rem;
+      padding: 1rem;
+      .show-data{
+        .top{
+          .num{
+            padding: 0.75rem 8.25rem 0.75rem 8.25rem;
+            width: 41.25rem;
+            height: 7.75rem;
+            background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FC 100%);
+            box-shadow: inset 0rem 0.25rem 0.75rem 0.0625rem #DCDFE6;
+            border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
+            opacity: 1;
+            font-size: 6.25rem;
+            font-weight: 400;
+            color: #606266;
+          }
+          .unit{
+            font-size: 32px;
+            font-weight: 400;
+            color: #909399;
+          }
+        }
 
+      }
+    }
+    .bottom{
+      background: white;
+      padding: 1rem;
+      .el-input{
+        width: 6rem;
+        margin-right: 1rem;
+        margin-left: 1rem;
+      }
+      .title{
+        margin-bottom: 1rem;
+      }
+    }
+  }
+}
 </style>
+