414 lines
12 KiB
Vue
414 lines
12 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>
|
||
<th>操作</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>
|
||
<td>
|
||
<view class="action-btns">
|
||
<view class="ant-btn edit-btn" @click="edit(item)">编辑</view>
|
||
<!-- <view class="ant-btn delete-btn" @click="remove(item)">删除</view> -->
|
||
</view>
|
||
</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">{{ isEdit ? '更新' : '保存' }}</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,
|
||
isEdit: false,
|
||
editId: null,
|
||
form: {
|
||
name: '',
|
||
ic: '',
|
||
ic2: '',
|
||
number: '',
|
||
type: ''
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
|
||
add() {
|
||
this.isEdit = false
|
||
this.editId = null
|
||
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()
|
||
this.isEdit = false
|
||
this.editId = null
|
||
uni.$off('ic')
|
||
},
|
||
edit(item) {
|
||
this.isEdit = true
|
||
this.editId = item.id
|
||
this.form = {
|
||
name: item.name,
|
||
ic: item.ic,
|
||
ic2: item.ic2 || '',
|
||
number: item.number || '',
|
||
type: item.type || ''
|
||
}
|
||
this.$refs.popup.open()
|
||
uni.$on('ic', (val) => {
|
||
if (!this.form.ic) {
|
||
this.form.ic = val
|
||
} else if (!this.form.ic2) {
|
||
this.form.ic2 = val
|
||
}
|
||
})
|
||
},
|
||
async remove(item) {
|
||
uni.showModal({
|
||
title: '确认删除',
|
||
content: `确定要删除 ${item.name} 吗？`,
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
await db.deleteInformationType('user', { id: item.id })
|
||
uni.showToast({
|
||
title: '删除成功',
|
||
icon: 'none'
|
||
})
|
||
this.getList()
|
||
} catch (error) {
|
||
console.log(error)
|
||
uni.showToast({
|
||
title: '删除失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
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 {
|
||
if (this.isEdit) {
|
||
// 编辑模式
|
||
await db.updateSQL(tableName, {
|
||
name: this.form.name,
|
||
ic: this.form.ic,
|
||
ic2: this.form.ic2,
|
||
number: this.form.number,
|
||
type: this.form.type
|
||
}, 'id', this.editId)
|
||
uni.showToast({
|
||
title: '更新成功',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
// 新增模式
|
||
await db.addTabItem(tableName, { ...this.form })
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
this.$refs.popup.close()
|
||
this.getList()
|
||
} catch (error) {
|
||
console.log(error)
|
||
uni.showToast({
|
||
title: this.isEdit ? '更新失败' : '保存失败',
|
||
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;
|
||
}
|
||
.action-btns{
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
}
|
||
.edit-btn{
|
||
/* background: #1890ff;
|
||
border-color: #1890ff; */
|
||
width: 60px;
|
||
height: 36px;
|
||
line-height: 32px;
|
||
font-size: 14px;
|
||
}
|
||
.delete-btn{
|
||
/* background: #ff4d4f;
|
||
border-color: #ff4d4f; */
|
||
width: 60px;
|
||
height: 36px;
|
||
line-height: 32px;
|
||
font-size: 14px;
|
||
}
|
||
.edit-btn:hover{
|
||
/* background: #40a9ff;
|
||
border-color: #40a9ff; */
|
||
}
|
||
.delete-btn:hover{
|
||
/* background: #ff7875;
|
||
border-color: #ff7875; */
|
||
}
|
||
|
||
/* 表格内容自动换行 */
|
||
.ant-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
}
|
||
.ant-table th,
|
||
.ant-table td {
|
||
padding: 10px 8px;
|
||
text-align: center;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
overflow-wrap: break-word;
|
||
max-width: 0;
|
||
}
|
||
</style> |