459 lines
12 KiB
Vue
459 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<div class="main-content cancelList m20">
|
|||
|
|
<!--头部-查询-->
|
|||
|
|
<div class="content-header">
|
|||
|
|
<searchHeader title="查询" />
|
|||
|
|
<div class="body search-body">
|
|||
|
|
<el-row class="mb10">
|
|||
|
|
<el-col :span="7">
|
|||
|
|
<label class="label-name_1">节假日名称：</label>
|
|||
|
|
<div class="search-input-box_1">
|
|||
|
|
<el-input
|
|||
|
|
v-model="searchForm.customParamMap.holidayName"
|
|||
|
|
size="small"
|
|||
|
|
clearable
|
|||
|
|
type="text"
|
|||
|
|
class="search-input"
|
|||
|
|
placeholder="请输入节假日名称"
|
|||
|
|
@keyup.enter.native="search"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="11" :offset="1">
|
|||
|
|
<div class="btn-box">
|
|||
|
|
<el-button type="primary" size="mini" @click="search">查询</el-button>
|
|||
|
|
<el-button size="mini" @click="resetSearchForm">重置</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--body-查询结果-->
|
|||
|
|
<div class="content-body">
|
|||
|
|
<div class="body">
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :offset="1" :span="6">
|
|||
|
|
<el-button type="primary" size="mini" @click="addDialog = true">新增</el-button>
|
|||
|
|
|
|||
|
|
<!-- ps: 预留导入名单功能， 未实现 -->
|
|||
|
|
<!-- <el-button type="primary" size="mini" @click="fileImportDialog = true">导入名单</el-button> -->
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-table
|
|||
|
|
ref="multipleTable"
|
|||
|
|
v-loading="loading"
|
|||
|
|
:data="tableData"
|
|||
|
|
tooltip-effect="dark"
|
|||
|
|
class="table-style"
|
|||
|
|
:fit="true"
|
|||
|
|
:row-class-name="tableRowClassName"
|
|||
|
|
:header-cell-style="{background:'#8cc3fb',color:'#fff'}"
|
|||
|
|
@sort-change="sortChange"
|
|||
|
|
>
|
|||
|
|
<el-table-column prop="index" label="序号" min-width="50" align="center" />
|
|||
|
|
<el-table-column prop="holidayName" label="节假日名称" min-width="150" align="left" />
|
|||
|
|
<el-table-column prop="holidayDate" :show-overflow-tooltip="true" label="日期" min-width="200" align="left" />
|
|||
|
|
<el-table-column prop="type" label="标记类型" min-width="200" align="left">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span v-if="scope.row.type === '1'">节假日</span>
|
|||
|
|
<span v-else-if="scope.row.type ==='2'">工作日</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" min-width="100" align="left">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button type="primary" size="mini" @click="del(scope.row)">删除</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
<div class="page-box">
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="23">
|
|||
|
|
<el-pagination
|
|||
|
|
:disabled="loading"
|
|||
|
|
:page-size="pageParam.pageSize"
|
|||
|
|
:total="pageParam.total"
|
|||
|
|
:page-sizes="[10, 20, 30, 40,50,100,200]"
|
|||
|
|
layout="slot,total, sizes, prev, pager, next, jumper"
|
|||
|
|
@size-change="pageSizeChange"
|
|||
|
|
@current-change="pageIndexChange"
|
|||
|
|
>
|
|||
|
|
<span>
|
|||
|
|
第 {{ pageParam.curPage }} 页 /
|
|||
|
|
共 {{
|
|||
|
|
(pageParam.total !== 0 ? parseInt((pageParam.total + pageParam.pageSize - 1) / pageParam.pageSize) : 1)
|
|||
|
|
}} 页
|
|||
|
|
</span>
|
|||
|
|
</el-pagination>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-dialog
|
|||
|
|
title="新增"
|
|||
|
|
:visible.sync="addDialog"
|
|||
|
|
width="30%"
|
|||
|
|
:close-on-press-escape="false"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
center
|
|||
|
|
>
|
|||
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
|
|||
|
|
<el-form-item label="节假日名称" prop="holidayName">
|
|||
|
|
<el-col :span="11">
|
|||
|
|
<el-input v-model="ruleForm.holidayName"></el-input>
|
|||
|
|
</el-col>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="日期" required>
|
|||
|
|
<el-col :span="11">
|
|||
|
|
<el-form-item prop="holidayDate">
|
|||
|
|
<el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="ruleForm.holidayDate" style="width: 100%;"></el-date-picker>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="类型" prop="type">
|
|||
|
|
<el-radio-group v-model="ruleForm.type">
|
|||
|
|
<el-radio label="1">节假日</el-radio>
|
|||
|
|
<el-radio label="2">工作日</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" :loading="loading" @click="submitForm">确 认</el-button>
|
|||
|
|
<el-button :loading="loading" @click="addDialog = false">取 消</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<!-- ps: 预留导入名单功能， 未实现 -->
|
|||
|
|
<!-- <el-dialog
|
|||
|
|
title="导入名单"
|
|||
|
|
:visible.sync="fileImportDialog"
|
|||
|
|
width="30%"
|
|||
|
|
:close-on-press-escape="false"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<el-input
|
|||
|
|
v-model="batchFileName"
|
|||
|
|
placeholder="点击选择模版文件"
|
|||
|
|
style="display:inline-block;width:calc(100% - 120px)"
|
|||
|
|
:readonly="true"
|
|||
|
|
@click.native="$refs.batchFile.click()"
|
|||
|
|
/>
|
|||
|
|
<el-button style="width:100px;margin-left:10px" type="primary" @click="$refs.batchFile.click()">浏览</el-button>
|
|||
|
|
<input :ref="'batchFile'" type="file" style="display:none" accept=".xls,.xlsx" @change="fileChange">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<FakeProgress v-if="showFakeProgress" ref="FakeProgress" style="margin-top: 10px;" />
|
|||
|
|
<span slot="footer" class="dialog-footer">
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="8" align="left">
|
|||
|
|
<el-button type="primary" @click="downloadFile">下载模版</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="16">
|
|||
|
|
<el-button :loading="loading" @click="fileImportDialog = false">取 消</el-button>
|
|||
|
|
<el-button type="primary" :loading="loading" @click="fileImport">确 认</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</span>
|
|||
|
|
</el-dialog>-->
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import searchHeader from '@/components/searchHeader'
|
|||
|
|
import FakeProgress from '@/components/FakeProgress'
|
|||
|
|
import { list, save, del } from '@/api/holiday'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
searchHeader,
|
|||
|
|
FakeProgress
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
batchFileName: '',
|
|||
|
|
addDialog: false,
|
|||
|
|
fileImportDialog: false,
|
|||
|
|
showFakeProgress: false,
|
|||
|
|
searchForm: {
|
|||
|
|
paramMap: {},
|
|||
|
|
likeParamMap: {},
|
|||
|
|
customParamMap: {
|
|||
|
|
holidayName: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
ruleForm: {
|
|||
|
|
holidayName: '',
|
|||
|
|
holidayDate: '',
|
|||
|
|
type: '',
|
|||
|
|
year: ''
|
|||
|
|
},
|
|||
|
|
rules: {
|
|||
|
|
holidayName: [
|
|||
|
|
{ required: true, message: '请输入节假日名称', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
holidayDate: [
|
|||
|
|
{ required: true, message: '请选择日期', trigger: 'change' }
|
|||
|
|
],
|
|||
|
|
type: [
|
|||
|
|
{ required: true, message: '请选择类型', trigger: 'change' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
loading: false,
|
|||
|
|
tableData: [],
|
|||
|
|
pageParam: {
|
|||
|
|
orderField: 'holiday_date',
|
|||
|
|
curPage: 1,
|
|||
|
|
total: 0,
|
|||
|
|
pageSize: 10
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.search()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
submitForm() {
|
|||
|
|
this.$refs['ruleForm'].validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
this.loading = true
|
|||
|
|
this.ruleForm.year = this.ruleForm.holidayDate.substring(0, 4)
|
|||
|
|
save(this.ruleForm).then(() => {
|
|||
|
|
this.loading = false
|
|||
|
|
this.addDialog = false
|
|||
|
|
this.$message({
|
|||
|
|
message: '新增成功!',
|
|||
|
|
type: 'success'
|
|||
|
|
})
|
|||
|
|
this.search()
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
del(row) {
|
|||
|
|
del(row.id).then(() => {
|
|||
|
|
this.$message({
|
|||
|
|
message: '删除成功!',
|
|||
|
|
type: 'success'
|
|||
|
|
})
|
|||
|
|
this.search()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
tableRowClassName({ row, rowIndex }) {
|
|||
|
|
if (rowIndex % 2 === 1) {
|
|||
|
|
return 'warning-row'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 下载模版
|
|||
|
|
downloadFile() {
|
|||
|
|
// const name = 'py_company_list.xls'
|
|||
|
|
const name = ''
|
|||
|
|
window.open(`/aiccs/${name}`)
|
|||
|
|
},
|
|||
|
|
fileChange() {
|
|||
|
|
this.batchFileName = this.$refs.batchFile.files[0].name
|
|||
|
|
},
|
|||
|
|
async fileImport() {
|
|||
|
|
const file = this.$refs.batchFile.files
|
|||
|
|
const form = new FormData()
|
|||
|
|
form.append('file', file[0])
|
|||
|
|
this.loading = true
|
|||
|
|
this.showFakeProgress = true
|
|||
|
|
// return importBlacklist(form).then(async({ code, data, msg }) => {
|
|||
|
|
// this.loading = false
|
|||
|
|
// this.showFakeProgress = false
|
|||
|
|
// this.fileImportDialog = false
|
|||
|
|
// this.$message({
|
|||
|
|
// message: '导入成功!',
|
|||
|
|
// type: 'success'
|
|||
|
|
// })
|
|||
|
|
// this.loadPage()
|
|||
|
|
// }).catch(() => {
|
|||
|
|
// this.loading = false
|
|||
|
|
// this.showFakeProgress = false
|
|||
|
|
// })
|
|||
|
|
},
|
|||
|
|
sortChange({ column, prop, order }) {
|
|||
|
|
this.searchForm.orderField = prop
|
|||
|
|
this.searchForm.orderingRule = order === 'ascending' ? 'asc' : 'desc'
|
|||
|
|
this.search()
|
|||
|
|
},
|
|||
|
|
resetSearchForm() {
|
|||
|
|
this.searchForm = {
|
|||
|
|
orderField: '',
|
|||
|
|
orderingRule: '',
|
|||
|
|
paramMap: {},
|
|||
|
|
likeParamMap: {},
|
|||
|
|
customParamMap: {
|
|||
|
|
holidayName: ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 搜索
|
|||
|
|
search() {
|
|||
|
|
this.pageParam.paramMap = {
|
|||
|
|
paramMap: {},
|
|||
|
|
likeParamMap: {},
|
|||
|
|
customParamMap: {}
|
|||
|
|
}
|
|||
|
|
for (const key in this.searchForm) {
|
|||
|
|
if (typeof this.searchForm[key] === 'string') {
|
|||
|
|
this.pageParam.paramMap[key] = this.searchForm[key]
|
|||
|
|
} else {
|
|||
|
|
for (const _key in this.searchForm[key]) {
|
|||
|
|
if (this.searchForm[key][_key]) {
|
|||
|
|
if (!this.pageParam.paramMap[key]) {
|
|||
|
|
this.pageParam.paramMap[key] = {}
|
|||
|
|
}
|
|||
|
|
this.pageParam.paramMap[key][_key] = this.searchForm[key][_key]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.pageParam.curPage = 1
|
|||
|
|
this.loadPage()
|
|||
|
|
},
|
|||
|
|
// 当前分页改变
|
|||
|
|
pageIndexChange(curPage) {
|
|||
|
|
this.pageParam.curPage = curPage
|
|||
|
|
this.loadPage()
|
|||
|
|
},
|
|||
|
|
// 分页大小改变
|
|||
|
|
pageSizeChange(pageSize) {
|
|||
|
|
this.pageParam.pageSize = pageSize
|
|||
|
|
this.loadPage()
|
|||
|
|
},
|
|||
|
|
// 加载分页
|
|||
|
|
loadPage() {
|
|||
|
|
if (this.loading) return
|
|||
|
|
this.loading = true
|
|||
|
|
const data = JSON.parse(JSON.stringify({
|
|||
|
|
...this.pageParam,
|
|||
|
|
...this.pageParam.paramMap
|
|||
|
|
}))
|
|||
|
|
list(data).then(res => {
|
|||
|
|
this.loading = false
|
|||
|
|
const list = []
|
|||
|
|
let i = 1
|
|||
|
|
const pageStart = (this.pageParam.curPage - 1) * this.pageParam.pageSize
|
|||
|
|
res.data.records.forEach(each => {
|
|||
|
|
each.index = pageStart + i++
|
|||
|
|
list.push(each)
|
|||
|
|
})
|
|||
|
|
this.tableData = list
|
|||
|
|
this.pageParam.total = res.data.total
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.search-body {
|
|||
|
|
.el-col {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: baseline;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-content.cancelList {
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 10px;
|
|||
|
|
|
|||
|
|
.content-header {
|
|||
|
|
background: white;
|
|||
|
|
|
|||
|
|
.label-name_1 {
|
|||
|
|
text-align: right;
|
|||
|
|
display: inline-block; //转成行内快，才可定义宽度
|
|||
|
|
width: 220px;
|
|||
|
|
font-size: $table-content-font-size;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.body {
|
|||
|
|
padding: 20px 0;
|
|||
|
|
border-top: none;
|
|||
|
|
margin-bottom: 40PX;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-body {
|
|||
|
|
background: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
.title {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-box {
|
|||
|
|
margin: 10PX;
|
|||
|
|
|
|||
|
|
.el-pagination {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-box {
|
|||
|
|
padding-right: 20px;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.last_row {
|
|||
|
|
border-bottom: 1px solid $color-border;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.span-content {
|
|||
|
|
display: block;
|
|||
|
|
text-indent: 1em;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mb10 {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-body {
|
|||
|
|
background: #fff;
|
|||
|
|
|
|||
|
|
/deep/ .el-table .warning-row {
|
|||
|
|
background: #eaf4fe !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-content {
|
|||
|
|
/deep/ .el-form-item__content {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-body {
|
|||
|
|
background: #fff;
|
|||
|
|
|
|||
|
|
/deep/ .el-table .warning-row {
|
|||
|
|
background: #eaf4fe !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/ .el-table .sort-caret.descending {
|
|||
|
|
border-top-color: #fff !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/ .el-table .sort-caret.ascending {
|
|||
|
|
border-bottom-color: #fff !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|