dai
3 years ago
6 changed files with 930 additions and 518 deletions
File diff suppressed because it is too large
@ -0,0 +1,151 @@ |
|||
<template> |
|||
<div> |
|||
<el-row> |
|||
<el-col> |
|||
<div class="top-con"> |
|||
<div class="top" v-for="item in top" :key="item">{{ item }}</div> |
|||
</div> |
|||
<!-- 日历号 --> |
|||
<div class="date-con"> |
|||
<div |
|||
class="date" |
|||
:class="[item.thisMonth, item.isToday, item.afterToday]" |
|||
v-for="(item, index) in visibleCalendar" |
|||
:key="index" |
|||
> |
|||
<div>{{ item.day }}</div> |
|||
<div class="morning">张三，李四</div> |
|||
<div class="evening">王五，赵六</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
time: { |
|||
type: Object, |
|||
default: () => { |
|||
return { |
|||
year: new Date().getFullYear(), |
|||
month: new Date().getMonth(), |
|||
}; |
|||
}, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
top: ["一", "二", "三", "四", "五", "六", "日"], |
|||
}; |
|||
}, |
|||
created() { |
|||
console.log("123", this.time); |
|||
}, |
|||
methods: { |
|||
// 获取 |
|||
}, |
|||
computed: { |
|||
// 获取当前月份显示日历,共42天 |
|||
visibleCalendar() { |
|||
// 获取今天的年月日 |
|||
const today = new Date(); |
|||
today.setHours(0); |
|||
today.setMinutes(0); |
|||
today.setSeconds(0); |
|||
today.setMilliseconds(0); |
|||
|
|||
const calendarArr = []; |
|||
// 获取当前月份第一天 |
|||
const currentFirstDay = new Date(this.time.year, this.time.month, 1); |
|||
// 获取第一天是周几 |
|||
const weekDay = currentFirstDay.getDay(); |
|||
// 用当前月份第一天减去周几前面几天，就是看见的日历的第一天 |
|||
const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000; |
|||
// 我们统一用42天来显示当前显示日历 |
|||
for (let i = 0; i < 42; i++) { |
|||
const date = new Date(startDay + i * 24 * 3600 * 1000); |
|||
calendarArr.push({ |
|||
date: new Date(startDay + i * 24 * 3600 * 1000), |
|||
year: date.getFullYear(), |
|||
month: date.getMonth(), |
|||
day: date.getDate(), |
|||
// 是否在当月 |
|||
thisMonth: |
|||
date.getFullYear() === today.getFullYear() && |
|||
date.getMonth() === today.getMonth() |
|||
? "thisMonth" |
|||
: "", |
|||
// 是否是今天 |
|||
isToday: |
|||
date.getFullYear() === today.getFullYear() && |
|||
date.getMonth() === today.getMonth() && |
|||
date.getDate() === today.getDate() |
|||
? "isToday" |
|||
: "", |
|||
// 是否在今天之后 |
|||
afterToday: date.getTime() >= today.getTime() ? "afterToday" : "", |
|||
}); |
|||
} |
|||
return calendarArr; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.top-con { |
|||
display: flex; |
|||
align-items: center; |
|||
.top { |
|||
width: 14.285%; |
|||
background-color: rgb(242, 242, 242); |
|||
padding: 10px 0; |
|||
margin: 5px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.date-con { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.date { |
|||
width: 14.285%; |
|||
text-align: center; |
|||
padding: 5px; |
|||
.morning { |
|||
padding: 10px 0; |
|||
background-color: rgba(220, 245, 253, 0.3); |
|||
} |
|||
.evening { |
|||
padding: 10px 0; |
|||
background-color: rgba(220, 244, 209, 0.3); |
|||
} |
|||
} |
|||
.thisMonth { |
|||
.morning { |
|||
background-color: rgb(220, 245, 253); |
|||
} |
|||
.evening { |
|||
background-color: rgb(220, 244, 209); |
|||
} |
|||
} |
|||
.isToday { |
|||
font-weight: 700; |
|||
.morning { |
|||
background-color: rgb(169, 225, 243); |
|||
} |
|||
.evening { |
|||
background-color: rgb(193, 233, 175); |
|||
} |
|||
} |
|||
} |
|||
.tip-con { |
|||
margin-top: 51px; |
|||
.tip { |
|||
margin-top: 21px; |
|||
width: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,187 @@ |
|||
<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"; |
|||
axios({ |
|||
url: window.SITE_CONFIG["apiURL"] + url, |
|||
method: "post", |
|||
data: { |
|||
reportId, |
|||
paramKey, |
|||
}, |
|||
responseType: "blob", |
|||
}) |
|||
.then((res) => { |
|||
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); |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
Loading…
Reference in new issue