访客考勤记录对接完成
This commit is contained in:
xiayuping666
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="query" size="small" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="请假时间">
|
||||
<el-date-picker type="daterange" value-format="yyyy-MM-dd" v-model="datePicker" placeholder="请选择查询时间" clearable></el-date-picker>
|
||||
|
||||
<!-- <el-date-picker type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" v-model="datePicker" placeholder="请选择查询时间" clearable></el-date-picker> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTablesImg
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTablesImg>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:current="query.current"
|
||||
:size="query.size"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="form.subject"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="form.money"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime" >
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费说明" prop="explain">
|
||||
<el-input size="mini" v-model="form.explain"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAddOrders, getOrders, putOrders } from './api'
|
||||
import CommonHead from './components/CommonHead.vue'
|
||||
import CommonTablesImg from './components/CommonTablesImg.vue'
|
||||
export default {
|
||||
name: "leavedRecord",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "班主任",
|
||||
prop: "adviserName",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "学生姓名",
|
||||
prop: "studentName",
|
||||
type: 'text'
|
||||
},
|
||||
|
||||
{
|
||||
label: "家长",
|
||||
prop: "guardianName",
|
||||
type: 'text'
|
||||
},
|
||||
|
||||
{
|
||||
label: "开始时间",
|
||||
prop: "startTime",
|
||||
type: 'text'
|
||||
|
||||
},
|
||||
{
|
||||
label: "结束时间",
|
||||
prop: "endTime",
|
||||
type: 'text'
|
||||
},
|
||||
|
||||
{
|
||||
label: "请假类型",
|
||||
prop: "leaveType",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: "到访说明",
|
||||
prop: "description",
|
||||
type: 'text',
|
||||
minWidth: '150'
|
||||
},
|
||||
{
|
||||
label: "审批意见",
|
||||
prop: "opinions",
|
||||
type: 'text',
|
||||
minWidth: '150'
|
||||
|
||||
}
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '请输入缴费标题', trigger: 'blur' },
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: '请输入缴费金额', trigger: 'blur' },
|
||||
],
|
||||
explain: [
|
||||
{ required: true, message: '请输入缴费说明', trigger: 'blur' },
|
||||
],
|
||||
startTime: [
|
||||
{ required: true, message: '请输入开始时间', trigger: 'blur' },
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, message: '请输入结束时间', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
statusEnum:{
|
||||
0: {
|
||||
name: '待审核',
|
||||
},
|
||||
1: {
|
||||
name: '已通过',
|
||||
},
|
||||
2: {
|
||||
name: '已拒绝',
|
||||
}
|
||||
},
|
||||
datePicker: null, // 搜索日期
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CommonHead,
|
||||
CommonTablesImg
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
},
|
||||
mounted() {
|
||||
console.log('无法执行')
|
||||
},
|
||||
methods:{
|
||||
// 重置
|
||||
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
let obj = { ...this.form }
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.data.msg, 'error')
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
this.query = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
}
|
||||
this.datePicker = null
|
||||
this.getList()
|
||||
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
money: null, // 金额
|
||||
subject: null, // 缴费标题
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.current = 1
|
||||
this.query.size = 10
|
||||
console.log(this.datePicker)
|
||||
this.query.startTime = this.datePicker[0]
|
||||
this.query.endTime = this.datePicker[1]
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
console.log(res)
|
||||
this.data = res.records.map(item =>{
|
||||
item.status = this.statusEnum[item.status].name
|
||||
item.faceImg = item.faceImg
|
||||
return item
|
||||
})
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
deleteOrders().then(res =>{
|
||||
if(res.code == 200){
|
||||
|
||||
}else{
|
||||
this.message(res.msg, 'error')
|
||||
}
|
||||
}).catch(err =>{
|
||||
this.message(err.data.msg, 'error')
|
||||
})
|
||||
},
|
||||
// 编辑
|
||||
editData() {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(current){
|
||||
console.log( '点击切换页数' +current)
|
||||
this.query.current = current
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(size){
|
||||
this.size = size
|
||||
this.query.size = size
|
||||
this.getList()
|
||||
console.log(size)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user