298 lines
8.4 KiB
Vue
298 lines
8.4 KiB
Vue
<template>
|
||
<view class="ant-layout page">
|
||
<page-header></page-header>
|
||
<head-title title="人员维护">
|
||
<template #rightBtn>
|
||
<view class="ant-btn" @click="add">新增</view>
|
||
</template>
|
||
</head-title>
|
||
<view class="ant-layout-content content">
|
||
<table class="ant-table">
|
||
<thead class="ant-table-thead">
|
||
<tr>
|
||
<th>序号</th>
|
||
<th>姓名</th>
|
||
<th>科室</th>
|
||
<th>工号</th>
|
||
<th>卡号</th>
|
||
<th>卡号2</th>
|
||
</tr>
|
||
|
||
</thead>
|
||
<tbody class="ant-table-tbody">
|
||
<tr v-for="(item, index) in list" :key="index">
|
||
<td>{{ index + 1 }}</td>
|
||
<td>{{ item.name }}</td>
|
||
<td>{{ item.type }}</td>
|
||
<td>{{ item.number }}</td>
|
||
<td>{{ item.ic }}</td>
|
||
<td>{{ item.ic2 }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</view>
|
||
<view class="ant-layout-footer footer">
|
||
<view class="pagenation">
|
||
<uni-row style="margin: 0;">
|
||
<uni-col :span="8" style="text-align: left;">
|
||
<view class="ant-btn" @click="pre">上一页</view>
|
||
</uni-col>
|
||
<uni-col :span="8" style="line-height: 48px;">
|
||
第{{ page }}页/共 {{ totalPage }} 页
|
||
</uni-col>
|
||
<uni-col :span="8" style="text-align: right;">
|
||
<view class="ant-btn" @click="next">下一页</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
</view>
|
||
<notice ref="notice"/>
|
||
<uni-popup ref="popup" :mask-click="false">
|
||
<view class="pop-content">
|
||
<uni-row>
|
||
<uni-col :span="8">
|
||
<view class="ant-input-group">
|
||
<view class="ant-form-item-label">*姓名：</view>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="16">
|
||
<input class="ant-input" v-model="form.name"/>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row>
|
||
<uni-col :span="8">
|
||
<view class="ant-input-group">
|
||
<view class="ant-form-item-label">*卡号：</view>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="16">
|
||
<input class="ant-input" v-model="form.ic"/>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row>
|
||
<uni-col :span="8">
|
||
<view class="ant-input-group">
|
||
<view class="ant-form-item-label">卡号2：</view>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="16">
|
||
<input class="ant-input" v-model="form.ic2"/>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row>
|
||
<uni-col :span="8">
|
||
<view class="ant-input-group">
|
||
<view class="ant-form-item-label">工号：</view>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="16">
|
||
<input class="ant-input" v-model="form.number"/>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row>
|
||
<uni-col :span="8">
|
||
<view class="ant-input-group">
|
||
<view class="ant-form-item-label">科室：</view>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="16">
|
||
<input class="ant-input" v-model="form.type"/>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row>
|
||
<uni-col>
|
||
<view class="form-btn">
|
||
<view class="ant-btn" @click="submit">保存</view>
|
||
<view class="ant-btn" style="margin-left: 20px;" @click="close">取消</view>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import PageHeader from '@/components/PageHeader.vue'
|
||
import HeadTitle from '@/components/HeadTitle.vue'
|
||
import Notice from '@/components/Notice.vue';
|
||
import * as db from '@/db/sqlite.js'
|
||
export default {
|
||
components: {
|
||
PageHeader,Notice,HeadTitle
|
||
},
|
||
data() {
|
||
return {
|
||
list: [
|
||
{
|
||
ic: '11111111111111',
|
||
name: '张三',
|
||
type: '清洗科',
|
||
number: '1111111111',
|
||
}
|
||
],
|
||
page: 1,
|
||
totalPage: 0,
|
||
form: {
|
||
name: '',
|
||
ic: '',
|
||
ic2: '',
|
||
number: '',
|
||
type: ''
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
|
||
add() {
|
||
this.$refs.popup.open()
|
||
this.form = {
|
||
name: '',
|
||
ic: '',
|
||
ic2: '',
|
||
number: '',
|
||
type: ''
|
||
}
|
||
uni.$on('ic', (val) => {
|
||
if (!this.form.ic) {
|
||
this.form.ic = val
|
||
} else if (!this.form.ic2) {
|
||
this.form.ic2 = val
|
||
}
|
||
})
|
||
},
|
||
close() {
|
||
this.$refs.popup.close()
|
||
uni.$off('ic')
|
||
},
|
||
async submit() {
|
||
if (this.form.name == '' || this.form.ic == '') {
|
||
return false
|
||
}
|
||
let tableName = 'user'
|
||
let isTable = await db.isTable(tableName)
|
||
if (!isTable) {
|
||
await db.addUserTable()
|
||
}
|
||
try {
|
||
await db.addTabItem(tableName, { ...this.form })
|
||
this.$refs.popup.close()
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'none'
|
||
})
|
||
this.getList()
|
||
} catch (error) {
|
||
console.log(error)
|
||
uni.showToast({
|
||
title: '保存失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
},
|
||
getList() {
|
||
db.getDataList('user', this.page, 15, '', '').then(res => {
|
||
this.list = res.list
|
||
this.totalPage = res.totalPage
|
||
})
|
||
},
|
||
// 上一页
|
||
pre() {
|
||
if (this.page > 1) {
|
||
this.page--
|
||
this.getList()
|
||
}
|
||
},
|
||
// 下一页
|
||
next() {
|
||
if (this.page < this.totalPage) {
|
||
this.page++
|
||
this.getList()
|
||
}
|
||
},
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page{
|
||
background: transparent;
|
||
height: 100%;
|
||
}
|
||
.content{
|
||
color: #747A8D;
|
||
flex: 1;
|
||
height: 100%;
|
||
padding: 20px;
|
||
}
|
||
|
||
.footer{
|
||
background: transparent;
|
||
padding: 20px;
|
||
}
|
||
.pagenation{
|
||
height: 50px;
|
||
color: #747A8D;
|
||
font-size: 16px;
|
||
letter-spacing: 2px;
|
||
}
|
||
.pagenation .ant-btn{
|
||
width: 143px;
|
||
height: 50px;
|
||
border-radius: 50px;
|
||
box-shadow: none;
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
background: #2F3242;
|
||
color: #fff;
|
||
border-color: #2F3242;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.pop-content{
|
||
padding: 30px;
|
||
padding-top: 50px;
|
||
width: 500px;
|
||
min-height: 400px;
|
||
border-radius: 15px;
|
||
background: #777D90;
|
||
}
|
||
.pop-content .uni-row{
|
||
margin-bottom: 16px;
|
||
}
|
||
.ant-form-item-label{
|
||
color: #fff;
|
||
font-size: 18px;
|
||
line-height: 40px;
|
||
}
|
||
.ant-input{
|
||
height: 40px;
|
||
font-size: 18px;
|
||
}
|
||
.form-text{
|
||
color: #747A8D;
|
||
line-height: 40px;
|
||
text-align: left;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.ant-btn{
|
||
line-height: 38px;
|
||
background: #2F3242;
|
||
border-color: #2F3242;
|
||
height: 46px;
|
||
width: 128px;
|
||
border-radius: 50px;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
.form-btn{
|
||
margin-top: 30px;
|
||
}
|
||
</style> |