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>
|