jiangyy
3 years ago
8 changed files with 1301 additions and 639 deletions
File diff suppressed because it is too large
@ -1,167 +1,232 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div class="m-calendar"> |
||||
<el-row> |
<div class="top-list"> |
||||
<!-- 左侧，提示早班、晚班或者上午、下午 --> |
<div |
||||
<el-col :span="1"> |
class="top" |
||||
<div class="date-con tip-con"> |
v-for="(item, index) in top" |
||||
<el-col |
:class="{ 'z-weekend': index > 4 }" |
||||
v-for="item in 6" |
:key="item" |
||||
:key="item" |
> |
||||
class="date thisMonth tip" |
{{ item }} |
||||
:span="1" |
</div> |
||||
> |
</div> |
||||
<div class="morning">早班</div> |
<!-- 日历号 --> |
||||
<div class="evening">晚班</div> |
<div class="date-list"> |
||||
</el-col> |
<div |
||||
</div> |
class="date-item" |
||||
</el-col> |
:class="{ |
||||
<!-- 右侧，周一到周五具体内容 --> |
'z-on': item.format == currentDate, |
||||
<el-col :span="11"> |
'z-this-month': item.thisMonth, |
||||
<!-- 第一行表头，周一到周日 --> |
'z-today': item.isToday, |
||||
<div class="top-con"> |
'z-after-today': item.afterToday, |
||||
<div class="top" v-for="item in top" :key="item">星期{{ item }}</div> |
'z-weekend': item.day == 6 || item.day == 0, |
||||
</div> |
}" |
||||
<!-- 日历号 --> |
v-for="(item, index) in visibleCalendar" |
||||
<div class="date-con"> |
:key="index" |
||||
<div |
@click="handleClickDate(item)" |
||||
class="date" |
> |
||||
:class="[item.thisMonth, item.isToday, item.afterToday]" |
<div class="date">{{ item.date }}</div> |
||||
v-for="(item, index) in visibleCalendar" |
<slot name="date-item" v-bind:info="item"></slot> |
||||
:key="index" |
</div> |
||||
> |
</div> |
||||
<div>{{ item.day }}</div> |
|
||||
<div class="morning">张三，李四</div> |
|
||||
<div class="evening">王五，赵六</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
props: { |
props: { |
||||
time: { |
currentYear: { |
||||
type: Object, |
type: Number, |
||||
default: () => { |
default: new Date().getFullYear(), |
||||
return { |
}, |
||||
year: new Date().getFullYear(), |
currentMonth: { |
||||
month: new Date().getMonth(), |
type: Number, |
||||
}; |
default: new Date().getMonth(), |
||||
}, |
|
||||
}, |
}, |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
top: ["一", "二", "三", "四", "五", "六", "日"], |
top: ["一", "二", "三", "四", "五", "六", "日"], |
||||
|
currentDate: "", |
||||
}; |
}; |
||||
}, |
}, |
||||
created() { |
|
||||
console.log("123", this.time); |
|
||||
}, |
|
||||
methods: { |
|
||||
// 获取 |
|
||||
}, |
|
||||
computed: { |
computed: { |
||||
// 获取当前月份显示日历,共42天 |
// 获取当前月份显示日历,共42天 |
||||
visibleCalendar() { |
visibleCalendar() { |
||||
// 获取今天的年月日 |
// 获取今天的年月日 |
||||
|
const { currentYear, currentMonth } = this; |
||||
const today = new Date(); |
const today = new Date(); |
||||
today.setHours(0); |
today.setHours(0); |
||||
today.setMinutes(0); |
today.setMinutes(0); |
||||
today.setSeconds(0); |
today.setSeconds(0); |
||||
today.setMilliseconds(0); |
today.setMilliseconds(0); |
||||
|
|
||||
const calendarArr = []; |
|
||||
// 获取当前月份第一天 |
// 获取当前月份第一天 |
||||
const currentFirstDay = new Date(this.time.year, this.time.month, 1); |
const currentFirstDay = new Date(currentYear, currentMonth, 1); |
||||
// 获取第一天是周几 |
// 获取第一天是周几 |
||||
const weekDay = currentFirstDay.getDay(); |
const weekDay = currentFirstDay.getDay(); |
||||
// 用当前月份第一天减去周几前面几天，就是看见的日历的第一天 |
// 用当前月份第一天减去周几前面几天，就是看见的日历的第一天 |
||||
const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000; |
const startDay = |
||||
|
currentFirstDay - ((weekDay == 0 ? 7 : weekDay) - 1) * 24 * 3600 * 1000; |
||||
|
|
||||
// 我们统一用42天来显示当前显示日历 |
// 我们统一用42天来显示当前显示日历 |
||||
|
let calendarArr = []; |
||||
for (let i = 0; i < 42; i++) { |
for (let i = 0; i < 42; i++) { |
||||
const date = new Date(startDay + i * 24 * 3600 * 1000); |
const dateObj = new Date(startDay + i * 24 * 3600 * 1000); |
||||
|
const year = dateObj.getFullYear(); |
||||
|
const month = dateObj.getMonth(); |
||||
|
const date = dateObj.getDate(); |
||||
|
const day = dateObj.getDay(); |
||||
|
|
||||
calendarArr.push({ |
calendarArr.push({ |
||||
date: new Date(startDay + i * 24 * 3600 * 1000), |
date, |
||||
year: date.getFullYear(), |
year, |
||||
month: date.getMonth(), |
month, |
||||
day: date.getDate(), |
day, |
||||
|
format: `${year}-${month + 1}-${date + 1}`, |
||||
// 是否在当月 |
// 是否在当月 |
||||
thisMonth: |
thisMonth: year == currentYear && month == currentMonth, |
||||
date.getFullYear() === today.getFullYear() && |
|
||||
date.getMonth() === today.getMonth() |
|
||||
? "thisMonth" |
|
||||
: "", |
|
||||
// 是否是今天 |
// 是否是今天 |
||||
isToday: |
isToday: |
||||
date.getFullYear() === today.getFullYear() && |
year === today.getFullYear() && |
||||
date.getMonth() === today.getMonth() && |
month === today.getMonth() && |
||||
date.getDate() === today.getDate() |
date === today.getDate(), |
||||
? "isToday" |
|
||||
: "", |
|
||||
// 是否在今天之后 |
// 是否在今天之后 |
||||
afterToday: date.getTime() >= today.getTime() ? "afterToday" : "", |
afterToday: dateObj.getTime() >= today.getTime(), |
||||
}); |
}); |
||||
} |
} |
||||
return calendarArr; |
return calendarArr; |
||||
}, |
}, |
||||
}, |
}, |
||||
|
watch: { |
||||
|
visibleCalendar(val) { |
||||
|
if (!this.currentDate) { |
||||
|
this.handleClickDate( |
||||
|
val.find((item) => item.isToday) || |
||||
|
val.filter((item) => item.thisMonth)[0] |
||||
|
); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.log("123", this.time); |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClickDate(item) { |
||||
|
console.log("点击日历日期", item); |
||||
|
this.currentDate = item.format; |
||||
|
|
||||
|
this.$emit("clickDate", item); |
||||
|
}, |
||||
|
}, |
||||
}; |
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.top-con { |
.m-calendar { |
||||
display: flex; |
position: relative; |
||||
align-items: center; |
color: #333333; |
||||
.top { |
|
||||
width: 14.285%; |
&::after { |
||||
background-color: rgb(242, 242, 242); |
content: ""; |
||||
padding: 10px 0; |
z-index: 1; |
||||
margin: 5px; |
position: absolute; |
||||
text-align: center; |
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
border-left: 1px solid #eee; |
||||
|
border-top: 1px solid #eee; |
||||
|
pointer-events: none; |
||||
} |
} |
||||
} |
|
||||
.date-con { |
.top-list { |
||||
display: flex; |
display: flex; |
||||
flex-wrap: wrap; |
align-items: center; |
||||
.date { |
.top { |
||||
width: 14.285%; |
position: relative; |
||||
text-align: center; |
width: 14.285%; |
||||
padding: 5px; |
|
||||
.morning { |
|
||||
padding: 10px 0; |
|
||||
background-color: rgba(220, 245, 253, 0.3); |
|
||||
} |
|
||||
.evening { |
|
||||
padding: 10px 0; |
padding: 10px 0; |
||||
background-color: rgba(220, 244, 209, 0.3); |
text-align: center; |
||||
} |
background-color: #ffffff; |
||||
} |
|
||||
.thisMonth { |
&::after { |
||||
.morning { |
content: ""; |
||||
background-color: rgb(220, 245, 253); |
z-index: 1; |
||||
} |
position: absolute; |
||||
.evening { |
top: 0; |
||||
background-color: rgb(220, 244, 209); |
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
border-right: 1px solid #eee; |
||||
|
pointer-events: none; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
} |
||||
|
|
||||
|
&.z-weekend { |
||||
|
color: #ff3333; |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
.isToday { |
.date-list { |
||||
font-weight: 700; |
display: flex; |
||||
.morning { |
flex-wrap: wrap; |
||||
background-color: rgb(169, 225, 243); |
align-items: center; |
||||
} |
|
||||
.evening { |
.date-item { |
||||
background-color: rgb(193, 233, 175); |
position: relative; |
||||
|
width: 14.285%; |
||||
|
text-align: center; |
||||
|
box-sizing: border-box; |
||||
|
padding: 8px 0; |
||||
|
height: 90px; |
||||
|
background-color: #ffffff; |
||||
|
opacity: 0.5; |
||||
|
|
||||
|
&::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
z-index: 1; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
border-right: 1px solid #eee; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
.date { |
||||
|
margin-bottom: 5px; |
||||
|
line-height: 30px; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
&.z-on { |
||||
|
z-index: 21; |
||||
|
box-shadow: 0 0 15px 5px #a8cee0; |
||||
|
.date { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.z-this-month { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
&.z-today { |
||||
|
.date { |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.z-weekend { |
||||
|
.date { |
||||
|
color: #ff3333; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
.tip-con { |
|
||||
margin-top: 51px; |
|
||||
.tip { |
|
||||
margin-top: 21px; |
|
||||
width: 100%; |
|
||||
} |
|
||||
} |
|
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,198 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:visible.sync="visible" |
||||
|
:title="'智能填表'" |
||||
|
:close-on-click-modal="true" |
||||
|
:close-on-press-escape="true" |
||||
|
width="850px" |
||||
|
:top="diaTop" |
||||
|
> |
||||
|
<el-table |
||||
|
v-loading="loading" |
||||
|
:data="list" |
||||
|
row-key="id" |
||||
|
border |
||||
|
:height="tableHeight" |
||||
|
style="width: 100%" |
||||
|
> |
||||
|
<el-table-column type="index" label="序号" width="50" /> |
||||
|
<el-table-column |
||||
|
prop="reportName" |
||||
|
label="模板名称" |
||||
|
header-align="center" |
||||
|
min-width="150" |
||||
|
></el-table-column> |
||||
|
<el-table-column |
||||
|
label="操作" |
||||
|
fixed="right" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
width="150" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="text" size="small" @click="fillIn(scope.row)" |
||||
|
>填写</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { Loading } from "element-ui"; // 引入Loading服务 |
||||
|
import { requestPost, requestGet } from "@/js/dai/request"; |
||||
|
import { mapGetters } from "vuex"; |
||||
|
import axios from "axios"; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
|
||||
|
visible: false, |
||||
|
|
||||
|
list: [], //客户列表 |
||||
|
|
||||
|
elseParams: {}, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
tableHeight() { |
||||
|
// return this.resolution === 'small' ? this.clientHeight - 210 : this.clientHeight - 220 |
||||
|
return this.clientHeight - 300; |
||||
|
}, |
||||
|
diaWidth() { |
||||
|
return this.resolution === "small" ? 60 : 50; |
||||
|
}, |
||||
|
diaHeight() { |
||||
|
return this.resolution === "small" ? 350 : 600; |
||||
|
}, |
||||
|
diaTop() { |
||||
|
return this.resolution === "small" ? "30px" : "100px"; |
||||
|
}, |
||||
|
...mapGetters(["clientHeight", "resolution"]), |
||||
|
}, |
||||
|
|
||||
|
mounted() {}, |
||||
|
|
||||
|
methods: { |
||||
|
async existsTemplate(row) { |
||||
|
console.log("baobiao----------existsTemplate", row); |
||||
|
const { elseParams } = row; |
||||
|
this.list = []; |
||||
|
this.elseParams = { ...elseParams }; |
||||
|
await this.getList(); |
||||
|
return this.list.length > 0; |
||||
|
}, |
||||
|
|
||||
|
async init(row) { |
||||
|
console.log("baobiao----------init", row); |
||||
|
const { elseParams } = row; |
||||
|
this.visible = true; |
||||
|
this.elseParams = { ...elseParams }; |
||||
|
|
||||
|
this.list = []; |
||||
|
|
||||
|
await this.getList(); |
||||
|
}, |
||||
|
|
||||
|
//获取所有客户列表 |
||||
|
async getList() { |
||||
|
this.loading = true; |
||||
|
const { elseParams } = this; |
||||
|
const { data, code, msg } = await requestPost( |
||||
|
"/oper/customize/icCustomerReport/report-list", |
||||
|
{ |
||||
|
...elseParams, |
||||
|
} |
||||
|
); |
||||
|
this.loading = false; |
||||
|
if (code === 0) { |
||||
|
this.list = data.map((item) => { |
||||
|
return item; |
||||
|
}); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async fillIn(item) { |
||||
|
const { reportId, reportName } = item; |
||||
|
const url = "/oper/customize/icCustomerReport/preview"; |
||||
|
const parmas = { |
||||
|
...this.elseParams, |
||||
|
reportId, |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, parmas); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
let token = localStorage.getItem("token"); |
||||
|
let prefix = window.SITE_CONFIG["apiURL"].slice(0, -4); |
||||
|
if (!item.isList) { |
||||
|
this.exportAll(reportId, data.paramKey, reportName); |
||||
|
} else { |
||||
|
window.open( |
||||
|
`${prefix}/jmreport/view/${reportId}?token=${token}¶mKey=${data.paramKey}` |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// this.visible = false; |
||||
|
this.$emit("afterFillIn"); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async exportAll(reportId, paramKey, reportName) { |
||||
|
const url = "/oper/customize/icCustomerReport/batch-export"; |
||||
|
|
||||
|
const loading = this.$loading({ |
||||
|
lock: true, |
||||
|
text: "批量导出中", |
||||
|
spinner: "el-icon-loading", |
||||
|
background: "rgba(0, 0, 0, 0.5)", |
||||
|
}); |
||||
|
|
||||
|
axios({ |
||||
|
url: window.SITE_CONFIG["apiURL"] + url, |
||||
|
method: "post", |
||||
|
data: { |
||||
|
reportId, |
||||
|
paramKey, |
||||
|
}, |
||||
|
responseType: "blob", |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
loading.close(); |
||||
|
console.log("批量导出接口返回", res); |
||||
|
// let fileName = window.decodeURI( |
||||
|
// res.headers["content-disposition"].split(";")[1].split("=")[1] |
||||
|
// ); |
||||
|
let fileName = reportName; |
||||
|
console.log("filename", fileName); |
||||
|
let blob = new Blob([res.data], { type: "application/zip" }); |
||||
|
var url = window.URL.createObjectURL(blob); |
||||
|
var aLink = document.createElement("a"); |
||||
|
aLink.style.display = "none"; |
||||
|
aLink.href = url; |
||||
|
aLink.setAttribute("download", fileName); |
||||
|
document.body.appendChild(aLink); |
||||
|
aLink.click(); |
||||
|
document.body.removeChild(aLink); //下载完成移除元素 |
||||
|
window.URL.revokeObjectURL(url); //释放掉blob对象 |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
console.log("批量导出失败", err); |
||||
|
|
||||
|
loading.close(); |
||||
|
return this.$message.error("网络错误"); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped></style> |
||||
Loading…
Reference in new issue