tangxuan
/
yy_rms_39zhiyao_duizhao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
duizhaopin_ui
duan 2 years ago
parent 3ea33d2ae9
commit 1364bf1d28
1 changed files with 264 additions and 4 deletions
Show Stats Download Patch File Download Diff File

268
src/views/reagent/inventory/index.vue
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save