feat(src/views/reagent/inventory): 完成试剂盘点前端界面编写

src/views/reagent/inventory/index.vue

@@ -1,13 +1,273 @@
 <template>
-  <h1>试剂盘点</h1>
+  <div class="main-container">
+    <div class="title">库存盘点</div>
+    <div class="header">
+      <el-select v-model="client_id" size="small" placeholder="请选择柜体">
+        <el-option
+          v-for="item in clientOptions"
+          :key="item.id"
+          :label="item.client_name"
+          :value="item.client_id"
+        />
+      </el-select>
+      <el-button type="primary" size="small" plain @click="handleAddReagent"><i class="el-icon-edit" />录入库存</el-button>
+      <el-button type="primary" size="small" @click="handleCheck">提交校验</el-button>
+      <div class="header-right">
+        <el-button type="primary" size="small" plain @click="handleHistory">历史记录</el-button>
+        <el-button icon="el-icon-refresh" circle @click="handleRefresh" />
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+      :header-cell-style="headerStyle"
+      height="465"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column
+        type="selection"
+        width="55"
+        align="center"
+      />
+      <el-table-column
+        prop="name"
+        show-overflow-tooltip
+        label="试剂名称"
+        align="center"
+      />
+      <el-table-column
+        prop="purity"
+        label="纯度"
+        align="center"
+      />
+      <el-table-column
+        show-overflow-tooltip
+        prop="address"
+        label="人工录入库存量"
+        align="center"
+      />
+      <el-table-column
+        prop="address"
+        label="系统校验库存量"
+        align="center"
+      />
+      <el-table-column
+        prop="address"
+        label="校验结果"
+        align="center"
+      />
+      <el-table-column
+        prop="address"
+        label="操作用户"
+        align="center"
+      />
+      <el-table-column
+        prop="address"
+        label="最新一次校验时间"
+        align="center"
+      />
+    </el-table>
+    <div style="text-align: center">
+      <el-pagination
+        layout="prev, pager, next"
+        :current-page.sync="page"
+        :total="total"
+        :page-size.sync="page_size"
+        hide-on-single-page
+        @current-change="pageChange"
+      />
+    </div>
+    <el-dialog :visible.sync="dialogVisible" width="30%" title="录入库存" @close="onClose">
+      <div v-for="item in multipleSelection" :key="item.id" class="add-item">
+        <div>{{ `${item.name} （${item.purity}）` }}</div>
+        <el-input v-model.number="item.num" placement="请输入校验在库数量" />
+      </div>
+      <div slot="footer" style="text-align: center">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="handelConfirm">确定</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="dialogHistoryVisible" width="60%" title="历史记录">
+      <div class="header">
+        <div class="header-left">
+          <!--          <el-date-picker-->
+          <!--            v-model="value1"-->
+          <!--            type="date"-->
+          <!--            placeholder="选择日期">-->
+          <!--          </el-date-picker>-->
+          <!--          <el-time-picker-->
+          <!--            v-model="value2"-->
+          <!--            is-range-->
+          <!--            range-separator="至"-->
+          <!--            start-placeholder="开始时间"-->
+          <!--            end-placeholder="结束时间"-->
+          <!--            placeholder="选择时间范围">-->
+          <!--          </el-time-picker>-->
+          <el-date-picker
+            v-model="value2"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            size="small"
+          />
+          <el-select class="header-select" v-model="history_client_id" size="small" placeholder="请选择柜体">
+            <el-option
+              v-for="item in clientOptions"
+              :key="item.id"
+              :label="item.client_name"
+              :value="item.client_id"
+            />
+          </el-select>
+          <el-input v-model="name" size="small" placeholder="搜索试剂名称" />
+          <el-button size="small" type="primary" icon="el-icon-search" @click="searchHistory">搜索</el-button>
+        </div>
+      </div>
+      <el-table
+        v-loading="loadingHistory"
+        element-loading-text="拼命加载中"
+        :header-cell-style="headerStyle"
+        :data="historyData"
+        height="420"
+      >
+        <el-table-column align="center" property="name" label="试剂名称" />
+        <el-table-column align="center" property="english_name" label="英文名称" />
+        <el-table-column align="center" property="bar_code" label="试剂编码" />
+        <el-table-column align="center" property="purity" label="纯度" />
+        <el-table-column align="center" property="cas_number" label="CAS码" />
+        <el-table-column align="center" property="use_quantity" label="用量" />
+        <el-table-column align="center" property="create_date" label="归还时间" />
+        <el-table-column align="center" property="create_user_name" label="操作人员" />
+        <el-table-column align="center" property="client_id" label="所属终端" />
+      </el-table>
+      <div style="text-align: center">
+        <el-pagination
+          layout="prev, pager, next"
+          :current-page.sync="history_page"
+          :total="history_total"
+          :page-size.sync="history_page_size"
+          @current-change="pageChange"
+        />
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import { getClients } from '@/views/reagent/mixin/getClients'
 export default {
-  name: 'Inventory'
+  name: 'Inventory',
+  mixins: [getClients],
+  data() {
+    return {
+      page: 1,
+      page_size: 15,
+      total: 100,
+      client_id: '',
+      dialogVisible: false,
+      tableData: [
+        {
+          id: 1,
+          name: '硫酸',
+          purity: 'AR',
+          num: 0
+        },
+        {
+          id: 2,
+          name: '硼氢化钾',
+          purity: 'AR',
+          num: 0
+        },
+        {
+          id: 3,
+          name: '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚' +
+            '基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐（AR）',
+          purity: 'AR',
+          num: 0
+        }
+      ],
+      headerStyle: { 'background': '#E6E6E6' },
+      multipleSelection: [],
+      dialogHistoryVisible: false,
+      loadingHistory: false,
+      historyData: [],
+      name: '',
+      history_client_id: '',
+      value1: '',
+      value2: ['', ''],
+      history_page: 1,
+      history_page_size: 15,
+      history_total: 100
+    }
+  },
+  methods: {
+    pageChange(page) {
+      this.page = page
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleHistory() {
+      this.dialogHistoryVisible = true
+    },
+    handleRefresh() {
+
+    },
+    // 录入库存
+    handleAddReagent() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.warning('请选择试剂！')
+        return
+      }
+      this.dialogVisible = true
+    },
+    // 提交校验
+    handleCheck() {
+
+    },
+    onClose() {
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    handelConfirm() {
+
+    },
+    searchHistory() {
+
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-
+.main-container{
+  min-height:calc(100vh - 12rem) ;
+  padding: 1rem;
+  margin: 1rem;
+  background: white;
+  .title{
+    font-size: 20px;
+    font-weight: bold;
+    color: #000000;
+  }
+  .header{
+    margin: 1rem 0 1rem 0;
+    .el-input{
+      width: 9.375rem;
+      margin-right: 1rem;
+    }
+    .el-select {
+      margin-right: 1rem;
+    }
+    .header-right{
+      float: right;
+    }
+  }
+}
+.add-item{
+  margin-bottom: 1rem;
+}
+.header-select{
+  margin-left: 1rem;
+}
 </style>