feat(reagent/*): 完成登录、试剂入库等

duizhaopin_ui
duan 3 years ago
parent d15863a158
commit ea28e0dee7

@ -2,4 +2,4 @@
ENV = 'development' ENV = 'development'
# base api # base api
VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = 'http://111.231.67.55:9001'

@ -25,8 +25,10 @@
"postcss-px2rem": "^0.3.0", "postcss-px2rem": "^0.3.0",
"px2rem-loader": "^0.1.9", "px2rem-loader": "^0.1.9",
"vue": "2.6.10", "vue": "2.6.10",
"vue-barcode-scanner": "^0.8.1",
"vue-router": "3.0.6", "vue-router": "3.0.6",
"vuex": "3.1.0" "vuex": "3.1.0",
"vuex-persistedstate": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "4.4.4", "@vue/cli-plugin-babel": "4.4.4",

@ -9,3 +9,4 @@ export default {
name: 'App' name: 'App'
} }
</script> </script>

@ -1,9 +0,0 @@
import request from '@/utils/request'
export function getList(params) {
return request({
url: '/vue-admin-template/table/list',
method: 'get',
params
})
}

@ -2,7 +2,7 @@ import request from '@/utils/request'
export function login(data) { export function login(data) {
return request({ return request({
url: '/vue-admin-template/user/login', url: '/api/user/login',
method: 'post', method: 'post',
data data
}) })
@ -18,7 +18,7 @@ export function getInfo(token) {
export function logout() { export function logout() {
return request({ return request({
url: '/vue-admin-template/user/logout', url: '/api/user/logout',
method: 'post' method: 'post'
}) })
} }

@ -0,0 +1,45 @@
import request from '@/utils/request'
export function show_tmp(data) {
return request({
url: '/api/drug_tmplate/show_tmp',
method: 'post',
data
})
}
export function select_drug(data) {
return request({
url: '/api/drug_tmplate/select_drug',
method: 'post',
data
})
}
// /api/drug_tmplate/bind_tmp_enter_warehouse
export function bind_tmp_enter_warehouse(data) {
return request({
url: '/api/drug_tmplate/bind_tmp_enter_warehouse',
method: 'post',
data
})
}
// /api/drug_tmplate/add_tmp
export function add_tmp(data) {
return request({
url: '/api/drug_tmplate/add_tmp',
method: 'post',
data
})
}
// /api/drug_tmplate/del_tmp
export function del_tmp(data) {
return request({
url: '/api/drug_tmplate/del_tmp',
method: 'post',
data
})
}

@ -42,7 +42,7 @@ export default {
background-color: white; background-color: white;
align-items: center; align-items: center;
width: 15.75rem; width: 15.75rem;
height: 5rem; height: 6rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.detail-img{ .detail-img{

@ -0,0 +1,215 @@
<template>
<div>
<el-row :gutter="15">
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="70px">
<el-col :span="24">
<el-form-item label="试剂名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入试剂名称" clearable :style="{width: '100%'}" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="英文名称" prop="english_name">
<el-input
v-model="formData.english_name"
placeholder="请输入英文名称"
clearable
:style="{width: '100%'}"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="条形编码" prop="field105">-->
<!-- <el-input v-model="formData.field105" placeholder="请输入条形编码" clearable :style="{width: '100%'}" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="12">
<el-form-item label="CAS码" prop="cas_number">
<el-input
v-model="formData.cas_number"
placeholder="请输入CAS码"
clearable
:style="{width: '100%'}"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="试剂纯度" prop="purity">
<el-input v-model="formData.purity" placeholder="请输入试剂纯度" clearable :style="{width: '100%'}" />
</el-form-item>
</el-col>
<el-col>
<el-form-item label="导入数量" prop="num">
<el-input v-model.number="formData.num" placeholder="请输入导入数量" clearable :style="{width: '100%'}" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="生产日期" prop="production_date">
<el-date-picker
v-model="formData.production_date"
type="datetime"
clearable
placeholder="请选择生产日期"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="过期日期" prop="expiration_date">
<el-date-picker
v-model="formData.expiration_date"
type="datetime"
clearable
placeholder="选择过期日期"
/>
</el-form-item>
</el-col>
<!-- <el-col>-->
<!-- <el-form-item label="保质期" prop="field113">-->
<!-- <el-input v-model="formData.field113" placeholder="请输入保质期" clearable :style="{width: '100%'}" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="12">
<el-form-item label="生产厂家" prop="manufacturer">
<el-input
v-model="formData.manufacturer"
placeholder="请输入生产厂家"
clearable
:style="{width: '100%'}"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="经销商" prop="distributor">
<el-input
v-model="formData.distributor"
placeholder="请输入经销商"
clearable
:style="{width: '100%'}"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="规格" prop="speci">
<el-input v-model="formData.speci" placeholder="请输入规格" clearable :style="{width: '100%'}" />
</el-form-item>
</el-col>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="规格单位" prop="field118">-->
<!-- <el-input v-model="formData.field118" placeholder="请输入规格单位" clearable :style="{width: '100%'}" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="12">
<el-form-item label="单位" prop="net_weight_unit">
<el-input v-model="formData.net_weight_unit" placeholder="请输入单位" clearable :style="{width: '100%'}" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="预估质量" prop="total">
<el-input v-model="formData.total" placeholder="请输入预估质量" clearable :style="{width: '100%'}" />
</el-form-item>
</el-col>
</el-form>
</el-row>
<div style="text-align: center">
<el-button type="primary" @click="handleConfirm"></el-button>
</div>
</div>
</template>
<script>
export default {
name: 'ReagentForm',
// title dialog title
// propsFormData
// innerVisible
// closeform boolobjform
// eslint-disable-next-line vue/require-prop-types
props: ['propsformdata', 'handlefunc'],
data() {
return {
formData: {
name: this.propsformdata.name,
english_name: this.propsformdata.english_name,
cas_number: this.propsformdata.cas_number,
purity: this.propsformdata.purity,
num: 1,
production_date: this.propsformdata.production_date,
expiration_date: this.propsformdata.expiration_date,
manufacturer: this.propsformdata.manufacturer,
distributor: this.propsformdata.distributor,
speci: this.propsformdata.speci,
// field118: undefined,
shelf_life: 0,
net_weight_unit: this.propsformdata.net_weight_unit,
total: this.propsformdata.total
},
rules: {
name: [{
required: true,
message: '请输入试剂名称',
trigger: 'blur'
}],
english_name: [],
cas_number: [{
required: true,
message: '请输入CAS码',
trigger: 'blur'
}],
purity: [{
required: true,
message: '请输入试剂纯度',
trigger: 'blur'
}],
num: [{
required: true,
message: '请输入导入数量',
trigger: 'blur'
},
{ type: 'number',
message: '导入数量必须为数字值' }],
production_date: [],
expiration_date: [],
manufacturer: [],
distributor: [],
speci: [{
required: true,
message: '请输入规格',
trigger: 'blur'
}],
total: []
}
}
},
methods: {
handleConfirm() {
this.$refs['elForm'].validate(valid => {
if (valid) {
//
let tempDate = this.formData.production_date
if (typeof (this.formData.production_date) === 'string') {
tempDate = this.strToDate(this.formData.production_date)
}
let temDate = this.formData.expiration_date
if (typeof (this.formData.expiration_date) === 'string') {
temDate = this.strToDate(this.formData.expiration_date)
}
//
const diff = temDate.getTime() - tempDate.getTime()
this.formData.shelf_life = Math.trunc(diff / (60 * 60 * 24 * 1000))
this.$emit('handlefunc', this.formData)
}
if (!valid) return
})
},
//
strToDate(datestr) {
return new Date(datestr)
}
}
}
</script>
<style>
</style>

@ -0,0 +1,69 @@
<script>
export default {
name: 'Scannner',
// eslint-disable-next-line vue/require-prop-types
props: ['getCode'],
data() {
return {
codeValue: '',
code: '',
lastTime: '',
nextTime: '',
lastCode: '',
nextCode: '',
dtmainId: ''
}
},
created() {
//
window.document.onkeypress = (e) => {
if (window.event) { // IE
this.nextCode = e.keyCode
} else if (e.which) { // Netscape/Firefox/Opera
this.nextCode = e.which
}
if (e.which === 13) { //
if (this.code.length < 3) return // code2
console.log('扫码结束。')
console.log('条形码:', this.code)
this.parseQRCode(this.code) //
this.lastCode = ''
this.lastTime = ''
return
}
this.nextTime = new Date().getTime()
if (!this.lastTime && !this.lastCode) {
this.code = '' //
this.code += e.key
console.log('扫码开始---', this.code)
}
if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // keypress,
this.code = e.key
console.log('防止首字缺失。。。', this.code)
} else if (this.lastCode && this.lastTime) {
this.code += e.key
console.log('扫码中。。。', this.code)
}
this.lastCode = this.nextCode
this.lastTime = this.nextTime
}
},
methods: {
parseQRCode(code) {
// if (code.length === 13) {
// //
this.$emit('getcode', code) //
// } else if (code.length === 23) {
// console.log('B:' + code)
// } else if (code.length === 0) {
// console.log('')
// } else {
// alert('' + code)
// }
this.codeValue = code
}
}
}
</script>

@ -4,7 +4,7 @@
<div class="header-top-item"><img src="@/assets/login/logo-white.png" alt=""> </div> <div class="header-top-item"><img src="@/assets/login/logo-white.png" alt=""> </div>
<div class="header-top-item"> <div class="header-top-item">
<el-badge :value="39"> <el-badge :value="39">
<img style="height: 23px" src="@/assets/0-常用/预警管理-白.png"> <img style="height: 23px" src="@/assets/0-常用/预警管理-白.png" alt="">
</el-badge> </el-badge>
<el-select v-model="value" size="small" placeholder="请选择"> <el-select v-model="value" size="small" placeholder="请选择">
<el-option <el-option

@ -13,7 +13,7 @@
<script> <script>
import { Navbar, Sidebar, AppMain } from './components' import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler' // import ResizeMixin from './mixin/ResizeHandler'
export default { export default {
name: 'Layout', name: 'Layout',
@ -22,7 +22,7 @@ export default {
Sidebar, Sidebar,
AppMain AppMain
}, },
mixins: [ResizeMixin], // mixins: [ResizeMixin],
computed: { computed: {
sidebar() { sidebar() {
return this.$store.state.app.sidebar return this.$store.state.app.sidebar
@ -35,10 +35,10 @@ export default {
}, },
classObj() { classObj() {
return { return {
hideSidebar: !this.sidebar.opened, // hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened, // openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation, withoutAnimation: this.sidebar.withoutAnimation
mobile: this.device === 'mobile' // mobile: this.device === 'mobile'
} }
} }
}, },

@ -4,7 +4,8 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import ElementUI from 'element-ui' import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n // import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import zhCN from 'element-ui/src/locale/lang/zh-CN'
import '@/styles/index.scss' // global css import '@/styles/index.scss' // global css
@ -13,7 +14,7 @@ import store from './store'
import router from './router' import router from './router'
import '@/icons' // icon import '@/icons' // icon
// import '@/permission' // permission contro import '@/permission' // permission contro
/** /**
* If you don't want to use mock-server * If you don't want to use mock-server
@ -24,11 +25,14 @@ import '@/icons' // icon
* please remove it before going online ! ! ! * please remove it before going online ! ! !
*/ */
import * as echarts from 'echarts' import * as echarts from 'echarts'
// 扫描
import VueBarcodeScanner from 'vue-barcode-scanner'
Vue.use(VueBarcodeScanner)
Vue.prototype.$echarts = echarts // 挂载到Vue实例上面 Vue.prototype.$echarts = echarts // 挂载到Vue实例上面
// set ElementUI lang to EN // set ElementUI lang to EN
Vue.use(ElementUI, { locale }) Vue.use(ElementUI, { zhCN })
// 如果想要中文版 element-ui按如下方式声明 // 如果想要中文版 element-ui按如下方式声明
// Vue.use(ElementUI) // Vue.use(ElementUI)

@ -3,7 +3,6 @@ import store from './store'
import { Message } from 'element-ui' import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title' import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress Configuration NProgress.configure({ showSpinner: false }) // NProgress Configuration
@ -18,7 +17,7 @@ router.beforeEach(async(to, from, next) => {
document.title = getPageTitle(to.meta.title) document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in // determine whether the user has logged in
const hasToken = getToken() const hasToken = store.getters.token
if (hasToken) { if (hasToken) {
if (to.path === '/login') { if (to.path === '/login') {

@ -4,7 +4,7 @@ import getters from './getters'
import app from './modules/app' import app from './modules/app'
import settings from './modules/settings' import settings from './modules/settings'
import user from './modules/user' import user from './modules/user'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex) Vue.use(Vuex)
const store = new Vuex.Store({ const store = new Vuex.Store({
@ -13,7 +13,8 @@ const store = new Vuex.Store({
settings, settings,
user user
}, },
getters getters,
plugins: [createPersistedState()]
}) })
export default store export default store

@ -1,5 +1,5 @@
import { login, logout, getInfo } from '@/api/user' import { logout } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth' import { getToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router' import { resetRouter } from '@/router'
const getDefaultState = () => { const getDefaultState = () => {
@ -18,51 +18,51 @@ const mutations = {
}, },
SET_TOKEN: (state, token) => { SET_TOKEN: (state, token) => {
state.token = token state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
} }
// SET_NAME: (state, name) => {
// state.name = name
// },
// SET_AVATAR: (state, avatar) => {
// state.avatar = avatar
// }
} }
const actions = { const actions = {
// user login // // user login
login({ commit }, userInfo) { // login({ commit }, userInfo) {
const { username, password } = userInfo // const { user_name, password } = userInfo
return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => { // login({ user_name: user_name.trim(), password: password }).then(response => {
const { data } = response // const { data } = response
commit('SET_TOKEN', data.token) // commit('SET_TOKEN', data.token)
setToken(data.token) // setToken(data.token)
resolve() // resolve()
}).catch(error => { // }).catch(error => {
reject(error) // reject(error)
}) // })
}) // })
}, // },
//
// get user info // // get user info
getInfo({ commit, state }) { // getInfo({ commit, state }) {
return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
getInfo(state.token).then(response => { // getInfo(state.token).then(response => {
const { data } = response // const { data } = response
//
if (!data) { // if (!data) {
return reject('Verification failed, please Login again.') // return reject('Verification failed, please Login again.')
} // }
//
const { name, avatar } = data // const { name, avatar } = data
//
commit('SET_NAME', name) // commit('SET_NAME', name)
commit('SET_AVATAR', avatar) // commit('SET_AVATAR', avatar)
resolve(data) // resolve(data)
}).catch(error => { // }).catch(error => {
reject(error) // reject(error)
}) // })
}) // })
}, // },
// user logout // user logout
logout({ commit, state }) { logout({ commit, state }) {

@ -1,7 +1,6 @@
import axios from 'axios' import axios from 'axios'
import { MessageBox, Message } from 'element-ui' import { MessageBox, Message } from 'element-ui'
import store from '@/store' import store from '@/store'
import { getToken } from '@/utils/auth'
// create an axios instance // create an axios instance
const service = axios.create({ const service = axios.create({
@ -19,7 +18,7 @@ service.interceptors.request.use(
// let each request carry token // let each request carry token
// ['X-Token'] is a custom headers key // ['X-Token'] is a custom headers key
// please modify it according to the actual situation // please modify it according to the actual situation
config.headers['X-Token'] = getToken() config.headers['Authorization'] = store.getters.token
} }
return config return config
}, },
@ -46,9 +45,9 @@ service.interceptors.response.use(
const res = response.data const res = response.data
// if the custom code is not 20000, it is judged as an error. // if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) { if (res.status !== 0) {
Message({ Message({
message: res.message || 'Error', message: res.msg || 'Error',
type: 'error', type: 'error',
duration: 5 * 1000 duration: 5 * 1000
}) })
@ -66,7 +65,7 @@ service.interceptors.response.use(
}) })
}) })
} }
return Promise.reject(new Error(res.message || 'Error')) return Promise.reject(new Error(res.msg || 'Error'))
} else { } else {
return res return res
} }

@ -0,0 +1,35 @@
// 将参数转换成功 formdata 接收格式
export default function stringify(data) {
const formData = new FormData()
for (const key in data) {
// eslint-disable-next-line no-prototype-builtins
if (data.hasOwnProperty(key)) {
if (data[key]) {
if (data[key].constructor === Array) {
if (data[key][0]) {
if (data[key][0].constructor === Object) {
formData.append(key, JSON.stringify(data[key]))
} else {
data[key].forEach((item, index) => {
formData.append(key + `[${index}]`, item)
})
}
} else {
formData.append(key + '[]', '')
}
} else if (data[key].constructor === Object) {
formData.append(key, JSON.stringify(data[key]))
} else {
formData.append(key, data[key])
}
} else {
if (data[key] === 0) {
formData.append(key, 0)
} else {
formData.append(key, '')
}
}
}
}
return formData
}

@ -8,10 +8,10 @@
<div class="home-content"> <div class="home-content">
<div class="home-pic"> <div class="home-pic">
<div class="home-pic-item" @click="picClick('/reagent')"><img src="@/assets/2-主界面/试剂管理.png" alt=""></div> <div class="home-pic-item" @click="picClick('/reagent')"><img src="@/assets/2-主界面/试剂管理.png" alt=""></div>
<div class="home-pic-item" key="2"><img src="@/assets/2-主界面/标准品管理.png" alt=""></div> <div key="2" class="home-pic-item"><img src="@/assets/2-主界面/标准品管理.png" alt=""></div>
<div class="home-pic-item" key="3"><img src="@/assets/2-主界面/耗材管理.png" alt=""></div> <div key="3" class="home-pic-item"><img src="@/assets/2-主界面/耗材管理.png" alt=""></div>
<div class="home-pic-item" key="4"><img src="@/assets/2-主界面/仪器管理.png" alt=""></div> <div key="4" class="home-pic-item"><img src="@/assets/2-主界面/仪器管理.png" alt=""></div>
<div class="home-pic-item" key="5"><img src="@/assets/2-主界面/用户管理.png" alt=""></div> <div key="5" class="home-pic-item"><img src="@/assets/2-主界面/用户管理.png" alt=""></div>
</div> </div>
<div class="home-menu"> <div class="home-menu">
<div v-for="item in 9" :key="item" class="home-menu-item"> <div v-for="item in 9" :key="item" class="home-menu-item">

@ -18,16 +18,16 @@
<h3 class="title">欢迎登录</h3> <h3 class="title">欢迎登录</h3>
</div> </div>
<el-form-item prop="username" label="用户名"> <el-form-item prop="user_name" label="用户名">
<div class="el-form-item-content"> <div class="el-form-item-content">
<span class="svg-container"> <span class="svg-container">
<svg-icon icon-class="user" /> <svg-icon icon-class="user" />
</span> </span>
<el-input <el-input
ref="username" ref="username"
v-model="loginForm.username" v-model="loginForm.user_name"
placeholder="请输入用户名" placeholder="请输入用户名"
name="username" name="user_name"
type="text" type="text"
tabindex="1" tabindex="1"
auto-complete="on" auto-complete="on"
@ -69,37 +69,37 @@
</template> </template>
<script> <script>
import { validUsername } from '@/utils/validate' // import { validUsername } from '@/utils/validate'
import stringify from '@/utils/stringify'
import { login } from '@/api/user'
export default { export default {
name: 'Login', name: 'Login',
data() { data() {
const validateUsername = (rule, value, callback) => { // const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) { // if (!validUsername(value)) {
callback(new Error('Please enter the correct user name')) // callback(new Error('Please enter the correct user name'))
} else { // } else {
callback() // callback()
} // }
} // }
const validatePassword = (rule, value, callback) => { // const validatePassword = (rule, value, callback) => {
if (value.length < 6) { // if (value.length < 6) {
callback(new Error('The password can not be less than 6 digits')) // callback(new Error('The password can not be less than 6 digits'))
} else { // } else {
callback() // callback()
} // }
} // }
return { return {
backgrounddiv: { backgrounddiv: {
'background-image': 'url(' + require('@/assets/login/login_background.png') + ')' 'background-image': 'url(' + require('@/assets/login/login_background.png') + ')'
}, },
loginForm: { loginForm: {
username: '', user_name: '',
password: '' password: ''
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }], // user_name: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }] // password: [{ required: true, trigger: 'blur', validator: validatePassword }]
}, },
loading: false, loading: false,
passwordType: 'password', passwordType: 'password',
@ -129,14 +129,22 @@ export default {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate(valid => {
if (valid) { if (valid) {
this.loading = true this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => { login(stringify(this.loginForm)).then(res => {
this.$router.push({ path: this.redirect || '/' }) this.$store.commit('user/SET_TOKEN', res.data.token)
this.loading = false console.log(this.$store.getters.token)
}).catch(() => { this.$router.push('/home')
this.loading = false }).finally(
}) () => {
this.loading = false
}
)
// this.$store.dispatch('user/login', this.loginForm).then(() => {
// this.$router.push({ path: this.redirect || '/' })
// this.loading = false
// }).catch(() => {
// this.loading = false
// })
} else { } else {
console.log('error submit!!')
return false return false
} }
}) })
@ -178,6 +186,9 @@ export default {
color: #409EFF; color: #409EFF;
margin-left: 1rem; margin-left: 1rem;
} }
>>>.el-input__inner{
border: none;
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>

@ -382,7 +382,7 @@ export default {
} }
#pie{ #pie{
width: 30rem; width: 30rem;
height: 16rem; height: 15rem;
} }
#line{ #line{
width: 65rem; width: 65rem;

@ -1,13 +1,118 @@
<template> <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">
<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> </template>
<script> <script>
export default { export default {
name: 'Receiving' 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> </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: 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> </style>

@ -11,11 +11,39 @@
</div> </div>
<div class="use-info"> <div class="use-info">
<div class="title text">试剂使用统计</div> <div class="title text">试剂使用统计</div>
<div> <div class="use-info-content">
<div>1</div> <div class="user-info-text">
<div>1</div> <div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/使用频率.png"></div>
<div>1</div> <div class="title text" style="color:#FF9B02 ">使用频率</div>
<div>1</div> <div class="use-count">5,037</div>
<div class="use-info-total">合计使用频率()</div>
<div>已领用183次归还180次</div>
<div>乙醇</div>
</div>
<div class="user-info-text">
<div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/入库记录.png"></div>
<div class="title text" style="color:#409EFF ">入库记录</div>
<div class="use-count">5,037</div>
<div class="use-info-total">入库历史记录()</div>
<div>已领用183次归还180次</div>
<div>乙醇</div>
</div>
<div class="user-info-text">
<div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/领用记录.png"></div>
<div class="title text" style="color: #1ADCE9">领用记录</div>
<div class="use-count">5,037</div>
<div class="use-info-total">领用历史记录()</div>
<div>已领用183次归还180次</div>
<div>乙醇</div>
</div>
<div class="user-info-text">
<div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/归还记录.png"></div>
<div class="title text" style="color: #5DDC1D">归还记录</div>
<div class="use-count">5,037</div>
<div class="use-info-total">归还历史记录()</div>
<div>已领用183次归还180次</div>
<div>乙醇</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -24,11 +52,29 @@
<div class="consume"> <div class="consume">
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span class="text">试剂消耗用量</span> <span class="text">试剂库存消耗</span>
<i style="float: right; padding: 3px 0" class="el-icon-arrow-right" /> <i style="float: right; padding: 3px 0" class="el-icon-arrow-right" />
</div> </div>
<div v-for="o in 4" :key="o" class="item"> <div class="count text">5140</div>
{{ '列表内容 ' + o }} <div class="desc">截至目前试剂入库总量</div>
<div style="display: flex;line-height: 30px;text-align: center">
<div :style="instock"><span>20%</span></div>
<div :style="lending"><span>20%</span></div>
<div :style="consume"><span>60%</span></div>
</div>
<div class="data-count">
<div :style="{borderBottom:'4px solid '+ instock.background}">
<span>在库量</span>
<span :style="{color:instock.background,float:'right'}">{{ instock.count }}</span>
</div>
<div :style="{borderBottom:'4px solid '+ lending.background}">
<span>借出量</span>
<span :style="{color:lending.background,float:'right'}">{{ lending.count }}</span>
</div>
<div :style="{borderBottom:'4px solid '+ consume.background}">
<span>消耗量</span>
<span :style="{color:consume.background,float:'right'}">{{ consume.count }}</span>
</div>
</div> </div>
</el-card> </el-card>
</div> </div>
@ -39,7 +85,7 @@
<i style="float: right; padding: 3px 0" class="el-icon-arrow-right" /> <i style="float: right; padding: 3px 0" class="el-icon-arrow-right" />
</div> </div>
<div style="text-align: center;width: 100%"> <div style="text-align: center;width: 100%">
<el-progress type="dashboard" :percentage="percentage" :color="colors" /> <el-progress size="small" type="dashboard" :percentage="percentage" :color="colors" />
</div> </div>
</el-card> </el-card>
</div> </div>
@ -63,6 +109,21 @@ export default {
name: 'Report', name: 'Report',
data() { data() {
return { return {
instock: {
'background': '#409EFF',
'width': '20%',
'count': 12485
},
lending: {
'background': '#5DDC1D',
'width': '20%',
'count': 12485
},
consume: {
'background': '#FF9B02',
'width': '60%',
'count': 12485
},
percentage: 10, percentage: 10,
colors: [ colors: [
{ color: '#f56c6c', percentage: 20 }, { color: '#f56c6c', percentage: 20 },
@ -113,9 +174,58 @@ export default {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.text{ .text{
font-size: 1.25rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
color: #303133 color: #303133
} }
.count{
font-size: 2rem;
font-weight: bold;
color: #303133;
}
.desc{
font-size: 1rem;
font-weight: 400;
color: #909399;
margin-bottom: 1rem;
}
.data-count{
width: 100%;
margin-top: 1rem;
display: flex;
justify-content: space-between;
div{
width: 30%;
}
}
.user-info-img{
img{
width: 3rem;
}
}
.user-info-text{
width: 32.5rem;
background: white;
padding: 2rem;
margin-bottom: 2rem;
div{
margin-bottom: 0.5rem;
}
}
.use-info-content{
display: flex;
flex-wrap:wrap;
justify-content: space-between;
}
.use-info-total{
font-size: 0.7rem;
font-weight: bold;
color: #303133;
padding-bottom: 1rem;
}
.use-count{
font-size: 2rem;
font-weight: bold;
color: #303133;
}
</style> </style>

@ -1,13 +1,118 @@
<template> <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">
<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> </template>
<script> <script>
export default { export default {
name: 'SendBack' 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> </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: 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> </style>

@ -1,13 +1,559 @@
<template> <template>
<h1>试剂入库</h1> <div class="main-content-container">
<div class="header">
<div class="title">试剂入库</div>
<div class="header-select">
<el-button size="small">返回上一级</el-button>
<el-select v-model="client_id" placeholder="请选择柜体">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button size="small" type="primary" @click="handleReagentToDatabase"></el-button>
<el-button size="small" type="primary" @click="handleBindToDB"></el-button>
<el-button size="small" type="primary" plain @click="handleAddTmp('add')">+ </el-button>
<el-button @click="handleAddTmp('modify')"><i class="el-icon-edit" />试剂模板</el-button>
<el-button><i class="el-icon-printer" /> 打印模板条码</el-button>
<el-button><i class="el-icon-folder-add" /> 导入入库模板</el-button>
<div class="right">
<el-button icon="el-icon-delete" circle @click="handleDelTem" />
<el-button icon="el-icon-refresh" circle @click="handleRefresh" />
</div>
</div>
</div>
<div class="content">
<el-table
ref="multipleTable"
v-loading="loading"
element-loading-text="拼命加载中"
:header-cell-style="headerStyle"
:data="tableData"
style="width: 100%"
size="medium"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
align="center"
/>
<el-table-column
prop="template_name"
label="模板名称"
sortable
align="center"
/>
<el-table-column
prop="client_name"
label="所处位置"
sortable
align="center"
/>
<el-table-column
align="center"
prop="all_export_count"
label="入库数量"
/>
<el-table-column
align="center"
prop="create_date"
label="创建时间"
/>
<el-table-column
align="center"
prop="create_user_name"
label="创建人"
/>
<el-table-column
:show-overflow-tooltip="true"
align="center"
width="180"
prop="template_content"
label="详情信息"
/>
</el-table>
</div>
<div class="page">
<el-pagination
layout="prev, pager, next"
:current-page.sync="page"
:total="total"
:page-size.sync="page_size"
@current-change="tmpPageChange"
/>
</div>
<!-- 选择试剂入库 弹框 -->
<el-dialog title="选择试剂入库" width="70%" :visible.sync="dialogTableVisible" @close="handleSelectClose">
<div class="search-header">
<el-input v-model="selectReagentValue" size="small" placeholder="请输入搜索试剂名称" />
<el-button size="small" type="primary" icon="el-icon-search" @click="searchReagent"></el-button>
</div>
<el-table
v-loading="loadingReagent"
element-loading-text="拼命加载中"
:header-cell-style="headerStyle"
:data="reagentData"
height="400"
>
<el-table-column align="center" property="name" label="试剂名称" />
<el-table-column align="center" property="bar_code" label="试剂编码" />
<el-table-column align="center" property="manufacturer" 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="production_date" label="生产日期" />
<el-table-column align="center" property="shelf_life" label="保质期(天)" />
<el-table-column
fixed="right"
label="操作"
width="100"
>
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleReagentClick(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<div style="text-align: right">
<el-pagination
layout="total, prev, pager, next"
:current-page.sync="reagent_page"
:total="reagent_total"
:page-size.sync="reagent_page_size"
:current-change="reagentPageChange"
/>
</div>
<el-dialog
width="53%"
title="编辑试剂信息"
:visible.sync="formVisible"
append-to-body
>
<ReagentForm :propsformdata="propsformdata" @handlefunc="handleReagentForm" />
</el-dialog>
</el-dialog>
<!-- 新增试剂模板弹框 -->
<el-dialog :title="opTitle" width="70%" :visible.sync="reagentAddVisible" @close="handleAddClose">
<div class="header-select">
<el-input v-model="reagentAddTmpName" placeholder="请输入模板名称" />
<el-select v-model="reagentAddClient" placeholder="请选择柜体">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button v-if="opType === 'add'" size="small" type="primary" plain @click="handleADDOpen('add')">+ </el-button>
<el-button @click="handleADDOpen('modify')"><i class="el-icon-edit" />编辑试剂条目</el-button>
<el-button v-if="opType === 'add'" @click="handleADDDEL"><i class="el-icon-delete" /> 删除试剂条目</el-button>
</div>
<div class="content">
<el-table
ref="multipleTable"
:header-cell-style="headerStyle"
:data="reagentAddTmpData"
style="width: 100%"
size="medium"
height="400"
@selection-change="handleAddSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column align="center" property="name" label="试剂名称" />
<el-table-column align="center" property="english_name" 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="manufacturer" label="生产厂家" />
<el-table-column align="center" property="speci" label="规格" />
<el-table-column align="center" property="net_weight_unit" label="单位" />
<el-table-column align="center" property="total" label="预估质量" />
<el-table-column align="center" property="production_date" label="生产日期" />
<el-table-column align="center" property="shelf_life" label="保质期(天)" />
</el-table>
<div class="reagent-add">
<el-button @click="() => {reagentAddVisible= false;handleAddClose()}">取消</el-button>
<el-button type="primary" @click="handleAddSave"></el-button>
</div>
</div>
<el-dialog
width="53%"
:title="reagentAddFormTitle"
:visible.sync="reagentAddFormVisible"
append-to-body
@close="reagentAddFormClose"
>
<ReagentForm :propsformdata="reagentAddFormdata" @handlefunc="handleReagentAddForm" />
</el-dialog>
</el-dialog>
<!-- 绑定入库-->
<el-dialog title="绑定入库" width="70%" :visible.sync="bindToDBVisible">
<div class="bind-to-db-title">请扫描试剂条码</div>
<el-table
ref="singleTable"
:header-cell-style="headerStyle"
:data="bindToDBData"
height="400"
highlight-current-row
@current-change="handleCurrentSelectChange"
>
<el-table-column align="center" property="name" label="试剂名称" />
<el-table-column align="center" property="bar_code" label="试剂编码" />
<el-table-column align="center" property="manufacturer" 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="production_date" label="生产日期" />
<el-table-column align="center" property="shelf_life" label="保质期(天)" />
<el-table-column align="center" property="status" label="状态">
<template slot-scope="scope">
<el-tag
:type="scope.row.status ? 'success' : 'danger' "
disable-transitions
>{{ scope.row.status ? "已入库" :"未入库" }}</el-tag>
</template>
</el-table-column>
</el-table>
</el-dialog>
<Scanner @getcode="getCode" />
</div>
</template> </template>
<script> <script>
import ReagentForm from '@/components/ReagentForm/index'
import Scanner from '@/components/Scannner/index'
import { show_tmp, select_drug, bind_tmp_enter_warehouse, add_tmp, del_tmp } from '@/api/warehousing'
import stringify from '@/utils/stringify'
export default { export default {
name: 'Warehousing' name: 'Warehousing',
components: { ReagentForm, Scanner },
data() {
return {
dialogTableVisible: false,
headerStyle: { 'background': '#E6E6E6' },
tableData: [],
client_id: '',
selectReagentValue: '',
multipleSelection: [],
loading: true,
//
page: 1,
page_size: 15,
total: 0,
//
loadingReagent: true,
reagentData: [],
reagent_page: 1,
reagent_page_size: 15,
reagent_total: 0,
// dialog form
formVisible: false,
propsformdata: null,
//
opType: null,
opTitle: '',
reagentAddVisible: false,
reagentAddTmpName: '',
reagentAddClient: null,
reagentAddTmpData: [],
reagentAddSelection: [],
reagentAddFormdata: {},
reagentAddModifyIndex: null, //
reagentAddFormVisible: false,
reagentAddFormTitle: '',
//
bindToDBVisible: false,
bindToDBData: [],
barCode: '',
currentRow: null
}
},
watch: {
// `barCode`
//
barCode: function(newCode, oldCode) {
if (newCode) {
bind_tmp_enter_warehouse(stringify({
'tmplate_content': JSON.stringify(this.currentRow),
'bar_code': newCode
})).then(res => {
if (res.status === 0) {
let cindex = 0 // index
this.$message.success('入库成功!')
this.bindToDBData = this.bindToDBData.map((item, index) => {
if (item.variety_id === this.currentRow.variety_id) {
item.status = true
cindex = index + 1
}
return item
})
//
if (cindex <= this.bindToDBData.length - 1) {
//
this.$refs.singleTable.setCurrentRow(this.bindToDBData[cindex])
}
} else {
this.$message.error('入库失败,请重试!')
}
})
}
}
},
created() {
this.getTmpList()
},
methods: {
handleCurrentSelectChange(row) {
this.currentRow = row
},
// getCode
getCode(code) {
this.barCode = code
},
//
handleSelectionChange(val) {
this.multipleSelection = val
},
//
handleDelTem() {
if (this.multipleSelection.length > 0) {
del_tmp({ 'template_id_list': this.multipleSelection.map(item => item.template_id) }).then(
res => {
if (res.status === 0) {
this.$message.success('删除成功!')
}
}
)
} else {
this.$message.warning('请先选择模板')
}
},
//
handleRefresh() {
this.getTmpList()
},
//
searchReagent() {
this.reagentPageChange(1)
},
getTmpList() {
this.loading = true
show_tmp({
page: this.page,
page_size: this.page_size,
client_id: this.client_id
}).then(res => {
this.tableData = res.data.data_list
this.total = res.data.total_count
}).finally(() => { this.loading = false })
},
//
tmpPageChange(page) {
this.page = page
this.getTmpList()
},
//
reagentPageChange(page) {
this.reagent_page = page
const data = { seach_word: this.selectReagentValue, page: this.reagent_page, page_size: this.reagent_page_size }
this.getSelectDrug(stringify(data))
},
//
handleReagentClick(row) {
this.propsformdata = row
this.formVisible = true
},
// ReagentForm
handleReagentForm(obj) {
this.formVisible = false
this.bindToDBData = []
for (let i = 0; i < obj.num; i++) {
this.bindToDBData.push({ ...this.propsformdata, ...obj, 'status': false })
}
this.bindToDBVisible = true
},
//
handleSelectClose() {
this.bindToDBData = []
this.selectReagentValue = ''
},
// select_drug
getSelectDrug(data) {
this.loadingReagent = true
this.reagentData = []
select_drug(data).then(res => {
this.reagentData = res.data.data_list
this.reagent_total = res.data.total_count
}).finally(() => { this.loadingReagent = false })
},
handleReagentToDatabase() {
this.dialogTableVisible = true
this.getSelectDrug({ page: this.reagent_page, page_size: this.reagent_page_size })
},
//
handleAddTmp(t) {
// /
// opType: null,
// opTitle: '',
this.opType = t
if (t === 'add') {
this.opTitle = '新增试剂模板'
if (this.multipleSelection.length === 0) {
this.reagentAddVisible = true
} else if (this.multipleSelection.length === 1) {
const data = this.multipleSelection[0]
this.reagentAddTmpName = data.template_name
this.reagentAddClient = data.client_id
this.reagentAddTmpData = JSON.parse(data.template_content)
this.reagentAddVisible = true
} else {
this.$message.warning('请选择一个模板!')
}
} else {
this.opTitle = '编辑试剂模板'
if (this.multipleSelection.length === 1) {
const data = this.multipleSelection[0]
this.reagentAddTmpName = data.template_name
this.reagentAddClient = data.client_id
this.reagentAddTmpData = JSON.parse(data.template_content)
this.reagentAddVisible = true
} else {
this.$message.warning('请选择一个模板!')
}
}
},
//
handleAddClose() {
this.reagentAddTmpName = ''
this.reagentAddClient = null
this.reagentAddTmpData = []
},
handleAddSave() {
const data = stringify({ 'template_name': this.reagentAddTmpName, 'template_content': JSON.stringify(this.reagentAddTmpData) })
add_tmp(data).then(
res => {
if (res.status === 0) {
this.$message.success('操作成功')
this.handleAddClose()
this.reagentAddVisible = false
} else {
this.$message.success('操作失败,请重试!')
}
}
)
},
//
handleADDOpen(t) {
if (t === 'add') {
this.reagentAddFormTitle = '新增模板条目'
} else {
if (this.reagentAddSelection.length !== 1) {
this.$message.warning('请选择需要编辑的模板条目!')
return
}
//
this.reagentAddModifyIndex = this.reagentAddTmpData.find(item => this.reagentAddSelection[0] === item)
this.reagentAddFormdata = this.reagentAddSelection[0]
this.reagentAddFormTitle = '编辑模板条目'
}
this.reagentAddFormVisible = true
},
handleADDDEL() {
this.reagentAddTmpData = this.reagentAddTmpData.filter(item => !this.reagentAddSelection.includes(item))
},
// form
handleReagentAddForm(obj) {
if (this.reagentAddFormTitle === '新增模板条目') {
this.reagentAddTmpData.push(obj)
} else {
//
this.reagentAddTmpData[this.reagentAddModifyIndex] = { ...this.reagentAddTmpData[this.reagentAddModifyIndex], ...obj }
}
this.reagentAddFormVisible = false
},
reagentAddFormClose() {
this.reagentAddFormdata = {}
},
// handleAddSelectionChange
handleAddSelectionChange(val) {
this.reagentAddSelection = val
},
//
handleBindToDB() {
if (this.bindToDBData.length === 0 && this.multipleSelection.length === 0) {
this.$message.warning('请选择入库试剂或模板!')
return
}
this.bindToDBData = []
this.multipleSelection.forEach(item => {
this.bindToDBData.push(...JSON.parse(item.template_content).map(item => {
item.status = false
return item
}))
})
//
this.$nextTick(() => {
this.$refs.singleTable.setCurrentRow(this.bindToDBData[0])
})
this.bindToDBVisible = true
}
}
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.main-content-container{
margin: 1rem;
background: white;
min-height: calc(100vh - 12rem);
.header{
margin: 1rem;
.title{
font-size: 20px;
font-weight: bold;
color: #000000;
padding-top: 1rem ;
}
.header-select{
margin-top: 1rem;
.right{
float: right;
}
}
}
.content{
margin: 1rem;
}
.page{
position: absolute;
bottom: 2rem;
text-align: center;
left: 50%; //body50%
transform:translate(-50%);
}
}
.el-select{
margin: 0rem 1rem 0rem 1rem;
}
.el-input{
width: 14.9375rem;
margin-right: 1rem;
}
.search-header{
margin-bottom: 1rem;
}
.bind-to-db-title{
font-size: 1rem;
font-weight: 400;
color: #FF9B02;
margin-bottom: 1rem;
}
.reagent-add{
text-align: center;
margin-top: 1rem;
}
</style> </style>

Loading…
Cancel
Save