Commit e5122bbf authored by “yiyousong”'s avatar “yiyousong”

feat:材料查看页面完成

parent 1df7c5c3
......@@ -79,7 +79,7 @@ export default {
methods: {
handleWrite() {
this.$router.push({
path: "/writepage",
path: "/showMaterials",
query: {
matterName: this.matterInfo.matterName,
matterId: this.matterInfo.id,
......@@ -91,10 +91,10 @@ export default {
</script>
<style lang="less" scoped>
/deep/.el-drawer__header {
:deep(.el-drawer__header) {
margin-bottom: 20px;
}
/deep/.el-drawer__body {
:deep(.el-drawer__body) {
border-top: 1px solid #e0e0e0;
padding: 40px;
padding-top: 0px;
......
<template>
<div class="announcement flex flexc">
<Header>
<div slot="title" class="title">通知公告</div>
</Header>
<div class="main flex1 flex flexc">
<PageTop>
<div slot="count" class="count">
共计<span class="data-count">142</span>个通知公告
</div>
<SearchBox
slot="search-right"
width="834px"
v-model="searchVal"
@click="handleSearch"
>
</SearchBox>
</PageTop>
<!-- 指南列表 -->
<div class="announcement-box flex1">
<div class="announcement-list flex flexwrap jcb">
<div
class="announcement-item flex jcb"
v-for="v in 12"
:key="v"
@click="handleCheck(v)"
>
<div class="flex flex1 aic">
<div class="icon"></div>
<p class="text flex1">
翻建建造大修自住住房提取翻建建造大修自住住房提取翻建建造大修自住住房提取翻建建造大修自住住房提取
</p>
</div>
<div class="time flex aic">2022-12-12 12:00:00</div>
</div>
</div>
<!-- 分页 -->
<div class="tac">
<el-pagination
prev-text="上一页"
next-text="下一页"
layout="prev,next"
:total="total"
:current-page="current"
:page-size="size"
@current-change="changePage"
>
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
import PageTop from "@/components/PageTop.vue";
import SearchBox from "@/components/SearchBox.vue";
export default {
components: {
Header,
PageTop,
SearchBox,
},
data() {
return {
searchVal: "",
total: 20,
current: 1,
size: 12,
};
},
methods: {
handleSearch() {
console.log(this.searchVal);
},
handleCheck(row) {
console.log(row);
this.$router.push("announcementdetails");
},
changePage(cur) {
this.current = cur;
},
},
};
</script>
<style lang="less" scoped>
.announcement {
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
.main {
padding-right: 40px;
padding-left: 40px;
padding-bottom: 40px;
.data-count {
color: var(--main-assist-color3);
}
}
.announcement-box {
width: 100%;
padding: 30px;
padding-bottom: 0px;
background: #ffffff;
border-radius: 16px;
}
.announcement-item {
width: 870px;
height: 80px;
margin-bottom: 30px;
padding: 0px 20px;
background: #edf6fe;
border-radius: 8px;
cursor: pointer;
.icon {
width: 17px;
height: 17px;
margin-right: 10px;
background-color: var(--main-assist-color3);
transform: rotate(45deg);
}
.text {
width: 1px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
margin-left: 10px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #999999;
}
}
/deep/.btn-prev {
margin-right: 80px;
}
/deep/.btn-prev,
/deep/ .btn-next {
width: 78px;
height: 25px;
font-family: Source Han Sans CN;
font-weight: 400;
color: var(--main-theme-color1);
line-height: 28px;
span {
font-size: 28px;
}
}
</style>
\ No newline at end of file
<template>
<!-- 公告详情 -->
<div class="announcement-details flex flexc">
<Header>
<div slot="title" class="title">通知公告详情</div>
<div slot="right" class="back-home flex aic" @click="handleBackHome">
<img class="mr10" src="../../assets/img/shouye.png" />
返回首页
</div>
</Header>
<div class="main flex1 flex flexc">
<div class="announcement-name">
政务服务如何“网上办”“预约办”?全流程在这里
</div>
<p class="tac time">2022-12-12 12:00:00</p>
<div class="announcement-text flex1">
广大市民朋友:
全市各级政务服务大厅将于2020年2月3日起正常上班。为深入贯彻落实中央、省、市疫情防控工作部署,根据《关于调整省级和成都市市级政务服务大厅窗口受理办理工作的公告》,建议您以“网上办”为主、“预约办”为辅,减少往来大厅次数和外出时间,有效遏制疫情扩散和蔓延。现将有关事项通告如下:
一、关于“网上办”建议您优先通过“四川政务服务网”“天府通办APP”或相关职能部门网站及微信公众号在线申请办理相关业务。如需提交纸质申请材料或领取相关证件,建议您优先选择邮递方式,并务必准确填写联系电话和邮寄地址等信息。
二、关于“预约办”如确需到大厅现场办理,请您通过“四川政务服务网”“天府通办APP”或相关职能部门网站及微信公众号,或拨打公布的预约咨询电话进行预约办理。同时,市级政务服务事项还可通过“@成都服务”官方微博私信方式进行预约办理。预约成功后,我们会及时通知您在指定时间,到指定窗口办理。现场办理时,请您佩戴口罩,配合做好身份核验、体温检测等工作。
如需到全市乡镇(街道)便民服务中心办理政务服务事项,请您遵照当地主管部门相关要求执行。感谢您的理解和支持!
</div>
</div>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
export default {
components: {
Header,
},
data() {
return {};
},
methods: {
handleBackHome() {
this.$router.push("/");
},
},
};
</script>
<style lang="less" scoped>
.announcement-details {
width: 100%;
height: 100%;
background-color: #fff;
background-color: #f5f5f5;
.back-home {
font-size: 28px;
font-family: Source Han Sans CN;
color: #ffffff;
cursor: pointer;
}
.main {
width: 100%;
padding: 0px 40px;
padding-bottom: 40px;
}
.time {
margin-bottom: 25px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #999999;
}
.announcement-name {
width: 100%;
margin: 25px 0px;
font-size: 32px;
font-family: Source Han Sans CN;
font-weight: 500;
color: var(--main-theme-color1);
text-align: center;
}
.announcement-text {
width: 100%;
padding: 40px;
background: #ffffff;
border-radius: 16px;
overflow-y: auto;
}
}
</style>
\ No newline at end of file
<template>
<div class="guidance flex flexc">
<Header>
<div slot="title" class="title">办事指南</div>
</Header>
<div class="main flex1 flex flexc">
<PageTop>
<div slot="count" class="count">
共计<span class="data-count">142</span>件事项
</div>
<SearchBox
slot="search-right"
width="834px"
v-model="searchVal"
@click="handleSearch"
>
</SearchBox>
</PageTop>
<!-- 指南列表 -->
<div class="guidance-box flex1">
<div class="guidance-list flex flexwrap jcb" v-if="list.length">
<div
class="guidance-item"
v-for="(v, i) in list"
:key="i"
@click="handleCheck"
>
·{{ v }}
</div>
</div>
<el-empty :image-size="200" v-else></el-empty>
<!-- 分页 -->
<div class="tac">
<el-pagination
prev-text="上一页"
next-text="下一页"
layout="prev,next"
hide-on-single-page
:total="total"
:current-page="current"
:page-size="size"
@current-change="changePage"
>
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
import PageTop from "@/components/PageTop.vue";
import SearchBox from "@/components/SearchBox.vue";
export default {
components: {
Header,
PageTop,
SearchBox,
},
data() {
return {
searchVal: "",
list: [
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
],
total: 0,
current: 1,
size: 12,
};
},
methods: {
handleSearch() {
console.log(this.searchVal);
},
handleCheck() {
this.$router.push("/guidancedetails");
},
// 分页
changePage(cur) {
this.current = cur;
},
},
};
</script>
<style lang="less" scoped>
.guidance {
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
.main {
padding-right: 40px;
padding-left: 40px;
padding-bottom: 40px;
.data-count {
color: var(--main-assist-color3);
}
}
.guidance-box {
width: 100%;
padding: 30px;
padding-bottom: 0px;
background: #ffffff;
border-radius: 16px;
}
.guidance-item {
width: 870px;
height: 80px;
margin-bottom: 30px;
padding: 0px 20px;
line-height: 80px;
background: #edf6fe;
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: var(--main-theme-color1);
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/deep/.btn-prev {
margin-right: 80px;
}
/deep/.btn-prev,
/deep/ .btn-next {
width: 78px;
height: 25px;
font-family: Source Han Sans CN;
font-weight: 400;
color: var(--main-theme-color1);
line-height: 28px;
span {
font-size: 28px;
}
}
</style>
\ No newline at end of file
<template>
<!-- 办事指南详情 -->
<div class="guidance-details flex flexc">
<Header>
<div slot="title" class="title">办事指南详情详情</div>
<div slot="right" class="back-home flex aic" @click="handleBackHome">
<img class="mr10" src="../../assets/img/shouye.png" />
返回首页
</div>
</Header>
<div class="main flex1 flex flexc">
<div class="guidance-name">
政务服务如何“网上办”“预约办”?全流程在这里
</div>
<div class="guidance-text flex1">
<div v-html="text" v-if="text"></div>
<el-empty :image-size="200" v-else></el-empty>
</div>
</div>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
export default {
components: {
Header,
},
data() {
return {
text: `广大市民朋友:
全市各级政务服务大厅将于2020年2月3日起正常上班。为深入贯彻落实中央、省、市疫情防控工作部署,根据《关于调整省级和成都市市级政务服务大厅窗口受理办理工作的公告》,建议您以“网上办”为主、“预约办”为辅,减少往来大厅次数和外出时间,有效遏制疫情扩散和蔓延。现将有关事项通告如下:
一、关于“网上办”建议您优先通过“四川政务服务网”“天府通办APP”或相关职能部门网站及微信公众号在线申请办理相关业务。如需提交纸质申请材料或领取相关证件,建议您优先选择邮递方式,并务必准确填写联系电话和邮寄地址等信息。
二、关于“预约办”如确需到大厅现场办理,请您通过“四川政务服务网”“天府通办APP”或相关职能部门网站及微信公众号,或拨打公布的预约咨询电话进行预约办理。同时,市级政务服务事项还可通过“@成都服务”官方微博私信方式进行预约办理。预约成功后,我们会及时通知您在指定时间,到指定窗口办理。现场办理时,请您佩戴口罩,配合做好身份核验、体温检测等工作。
如需到全市乡镇(街道)便民服务中心办理政务服务事项,请您遵照当地主管部门相关要求执行。感谢您的理解和支持!`,
};
},
methods: {
handleBackHome() {
this.$router.push("/");
},
},
};
</script>
<style lang="less" scoped>
.guidance-details {
width: 100%;
height: 100%;
background-color: #fff;
background-color: #f5f5f5;
.back-home {
font-size: 28px;
font-family: Source Han Sans CN;
color: #ffffff;
cursor: pointer;
}
.main {
width: 100%;
padding: 0px 40px;
padding-bottom: 40px;
}
.guidance-name {
width: 100%;
margin: 50px 0px;
font-size: 32px;
font-family: Source Han Sans CN;
font-weight: 500;
color: var(--main-theme-color1);
text-align: center;
}
.guidance-text {
width: 100%;
padding: 40px;
background: #ffffff;
border-radius: 16px;
overflow-y: auto;
}
}
</style>
\ No newline at end of file
<template>
<!-- 快速填单 -->
<div class="matter-page flex flexc">
<!-- 头部 -->
<Header>
<div slot="title" class="title">快速查看</div>
</Header>
<!-- 主体 -->
<div class="main flex1 flex">
<LeftMenus @click="changeDept"></LeftMenus>
<div class="right flex1 flex flexc">
<!-- 搜索 -->
<PageTop>
<div slot="count" class="count">
共计<span class="data-count" v-format="'#,##0'">{{
matterTotal
}}</span
>件事项
</div>
<SearchBox
slot="search-right"
width="834px"
v-model="searchVal"
@click="getWriteMatterList"
></SearchBox>
</PageTop>
<!-- 事项列表 -->
<div class="matter-box flex1">
<div class="matter-list" v-if="matterList.length">
<div
class="matter-item"
v-for="v in matterList"
:key="v.id"
@click="handleCheck(v)"
>
<div class="for-short">{{ v.matterName }}</div>
<div class="name">
{{ v.matterFullName }}
</div>
<div
class="materials"
v-for="(item, index) in v.materals"
:key="item.id"
>
·{{ item.materiaFullName }}
<span v-if="index > 2">{{
`等${v.materals && v.materals.length}份材料`
}}</span>
</div>
</div>
</div>
<el-empty :image-size="200" v-else></el-empty>
<!-- 分页 -->
<div class="tac">
<el-pagination
prev-text="上一页"
next-text="下一页"
hide-on-single-page
layout="prev,next"
:total="matterTotal"
:current-page="current"
:page-size="size"
@current-change="changePage"
>
</el-pagination>
</div>
</div>
</div>
</div>
<!-- 材料列表 -->
<MateralsList
:matterInfo="matterInfo"
:visible.sync="visible"
></MateralsList>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
import LeftMenus from "./components/LeftMenus.vue";
import PageTop from "@/components/PageTop.vue";
import SearchBox from "@/components/SearchBox.vue";
import MateralsList from "../../components/MateralsList.vue";
import { getWriteMatterList, getMaterialsList } from "@/api";
export default {
components: {
Header,
LeftMenus,
PageTop,
SearchBox,
MateralsList,
},
data() {
return {
current: 1,
size: 9,
matterInfo: {},
visible: false,
searchVal: "",
deptId: "",
matterTotal: 0,
materals: {},
matterList: [],
};
},
created() {
this.getWriteMatterList();
this.getAllmaterials();
},
watch: {
searchVal(newVal) {
if (newVal === "") {
this.getWriteMatterList();
}
},
},
methods: {
// 获取事项列表
async getWriteMatterList() {
let res = await getWriteMatterList({
page: this.current,
size: this.size,
deptId: this.deptId,
matterName: this.searchVal,
});
let { total, data } = res.data.data;
data.forEach(async (v) => {
v.materals = [];
let obj = await this.getMaterialsList(1, -1, v.id);
obj.data.forEach((item) => {
v.materals.push(item);
});
});
this.matterList = data;
this.matterTotal = total;
},
// 获取所有材料
async getAllmaterials() {
this.materals = await this.getMaterialsList(1, 3, null);
},
// 获取材料列表
async getMaterialsList(page = 1, size = 3, matterId) {
let res = await getMaterialsList({
page,
size,
deptId: this.deptId,
matterId,
});
let { total, data } = res.data.data;
return {
total,
data,
};
},
// 切换部门
changeDept(id) {
this.deptId = id;
this.getWriteMatterList();
this.getAllmaterials();
},
// 分页
changePage(cur) {
this.current = cur;
this.getWriteMatterList();
},
handleCheck(row) {
this.matterInfo = row;
this.visible = true;
},
},
};
</script>
<style lang="less" scoped>
.matter-page {
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
.main {
width: 100%;
height: 100%;
margin-top: 10px;
.right {
height: 100%;
padding: 0px 40px;
padding-bottom: 40px;
.data-count {
color: var(--main-assist-color3);
}
}
.matter-box {
height: 100%;
padding: 30px;
background: #ffffff;
border-radius: 16px;
.matter-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&::after {
content: "";
width: 460px;
border: 1px solid transparent;
}
}
.matter-item {
width: 460px;
height: 200px;
padding: 10px;
margin-bottom: 34px;
background: #edf6fe;
border-radius: 16px;
cursor: pointer;
.for-short {
margin-bottom: 10px;
font-size: 24px;
font-weight: 500;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.name {
margin-bottom: 10px;
font-size: 18px;
font-family: Source Han Sans CN;
color: #888888;
line-height: 24px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.materials {
font-size: 18px;
font-family: Source Han Sans CN;
color: #333333;
line-height: 28px;
.count {
color: #2878ff;
}
}
}
/deep/.btn-prev {
margin-right: 80px;
}
}
}
/deep/.btn-prev,
/deep/ .btn-next {
width: 78px;
height: 25px;
font-family: Source Han Sans CN;
font-weight: 400;
color: var(--main-theme-color1);
line-height: 28px;
span {
font-size: 28px;
}
}
</style>
\ No newline at end of file
<template>
<div>11</div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div>11</div>
<!-- 快速查看 -->
<div class="matter-page flex flexc">
<!-- 头部 -->
<Header>
<div slot="title" class="title">快速查看</div>
</Header>
<!-- 主体 -->
<div class="main flex1 flex">
<LeftMenus @click="changeDept"></LeftMenus>
<div class="right flex1 flex flexc">
<!-- 搜索 -->
<PageTop>
<div slot="count" class="count">
共计<span class="data-count" v-format="'#,##0'">{{
matterTotal
}}</span
>件事项
</div>
<SearchBox
slot="search-right"
width="834px"
v-model="searchVal"
@click="getWriteMatterList"
></SearchBox>
</PageTop>
<!-- 事项列表 -->
<div class="matter-box flex1">
<div class="matter-list" v-if="matterList.length">
<div
class="matter-item"
v-for="v in matterList"
:key="v.id"
@click="handleCheck(v)"
>
<div class="for-short">{{ v.matterName }}</div>
<div class="name">事项名称:{{ v.matterFullName }}</div>
</div>
</div>
<el-empty :image-size="200" v-else></el-empty>
<!-- 分页 -->
<div class="tac">
<el-pagination
prev-text="上一页"
next-text="下一页"
hide-on-single-page
layout="prev,next"
:total="matterTotal"
:current-page="current"
:page-size="size"
@current-change="changePage"
>
</el-pagination>
</div>
</div>
</div>
</div>
<!-- 材料列表 -->
<MateralsList
:matterInfo="matterInfo"
:visible.sync="visible"
></MateralsList>
</div>
</template>
<script>
export default {};
import Header from "@/components/Header.vue";
import LeftMenus from "./components/LeftMenus.vue";
import PageTop from "@/components/PageTop.vue";
import SearchBox from "@/components/SearchBox.vue";
import MateralsList from "../../components/MateralsList.vue";
import { getWriteMatterList, getMaterialsList } from "@/api";
export default {
components: {
Header,
LeftMenus,
PageTop,
SearchBox,
MateralsList,
},
data() {
return {
current: 1,
size: 12,
matterInfo: {},
visible: false,
searchVal: "",
deptId: "",
matterTotal: 0,
materals: {},
matterList: [],
};
},
created() {
this.getWriteMatterList();
this.getAllmaterials();
},
watch: {
searchVal(newVal) {
if (newVal === "") {
this.getWriteMatterList();
}
},
},
methods: {
// 获取事项列表
async getWriteMatterList() {
let res = await getWriteMatterList({
page: this.current,
size: this.size,
deptId: this.deptId,
matterName: this.searchVal,
});
let { total, data } = res.data.data;
data.forEach(async (v) => {
v.materals = [];
let obj = await this.getMaterialsList(1, -1, v.id);
obj.data.forEach((item) => {
v.materals.push(item);
});
});
this.matterList = data;
this.matterTotal = total;
},
// 获取所有材料
async getAllmaterials() {
this.materals = await this.getMaterialsList(1, 3, null);
},
// 获取材料列表
async getMaterialsList(page = 1, size = 3, matterId) {
let res = await getMaterialsList({
page,
size,
deptId: this.deptId,
matterId,
});
let { total, data } = res.data.data;
return {
total,
data,
};
},
// 切换部门
changeDept(id) {
this.deptId = id;
this.getWriteMatterList();
this.getAllmaterials();
},
// 分页
changePage(cur) {
this.current = cur;
this.getWriteMatterList();
},
handleCheck(row) {
this.matterInfo = row;
this.visible = true;
},
},
};
</script>
<style lang="less" scoped>
.matter-page {
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
.main {
width: 100%;
height: 100%;
margin-top: 10px;
.right {
height: 100%;
padding: 0px 40px;
padding-bottom: 40px;
.data-count {
color: var(--main-assist-color3);
}
}
.matter-box {
height: 100%;
padding: 30px;
background: #ffffff;
border-radius: 16px;
.matter-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&::after {
content: "";
width: 460px;
border: 1px solid transparent;
}
}
.matter-item {
width: 460px;
height: 142px;
margin-bottom: 32px;
padding: 20px 16px;
background: #edf6fe;
border-radius: 16px;
cursor: pointer;
.for-short {
margin-bottom: 10px;
font-size: 24px;
font-weight: 500;
line-height: 26px;
color: #333333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.name {
margin-bottom: 10px;
font-size: 18px;
font-family: Source Han Sans CN;
color: #888888;
line-height: 24px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.materials {
font-size: 18px;
font-family: Source Han Sans CN;
color: #333333;
line-height: 28px;
.count {
color: #2878ff;
}
}
}
/deep/.btn-prev {
margin-right: 80px;
}
}
}
/deep/.btn-prev,
/deep/ .btn-next {
width: 78px;
height: 25px;
font-family: Source Han Sans CN;
font-weight: 400;
color: var(--main-theme-color1);
line-height: 28px;
span {
font-size: 28px;
}
}
</style>
\ No newline at end of file
......@@ -8,150 +8,102 @@
返回首页
</div>
</Header>
<div class="main flex1 flex">
<div class="left">
<div class="main flex1 flex jcc">
<div
class="preview-box flex flexc aic"
v-for="(v, i) in materailsList"
:key="v.id"
v-show="active === i"
>
<div class="short">{{ v.materialName }}</div>
<div class="full-name">材料全称:{{ v.materiaFullName }}</div>
<div
class="preview-box"
v-for="(v, i) in materailsList"
:key="v.id"
v-show="active === i"
class="preview-img-box flex aic jcc"
:style="{
width: width * (scale / 100) + 'px',
height: height * (scale / 100) + 'px',
}"
>
<img :src="api + v.preViewPath" />
<!-- 打印空白表单按钮 -->
<el-button class="print-btn" @click="printEmpty(api + v.preViewPath)">
打印空白表格
</el-button>
<img
:style="{
transform: `scale(${scale / 100})`,
width: width + 'px',
height: height + 'px',
}"
class="preview-img"
:src="api + v.preViewPath"
/>
</div>
</div>
<!-- 放大,缩小 -->
<div class="control-box">
<div class="control-btn" @click="handleEnlargement">
<i class="el-icon-zoom-in"></i>
</div>
<div class="control-btn" @click="handleShrink">
<i class="el-icon-zoom-out"></i>
</div>
<!-- 侧边栏弹窗 -->
<div class="sidebar-box" :class="{ show: !showSidebar }">
<!-- 侧边内容 -->
<div class="sidebar-main">
<div class="title flex jcc aic" @click="showSidebar = false">
<span class="mr30"> 申请表填写进度 </span>
</div>
<!-- 侧边栏弹窗 -->
<div class="sidebar-box" :class="{ show: !showSidebar }">
<!-- 侧边内容 -->
<div class="sidebar-main">
<div class="title flex jcc aic" @click="showSidebar = false">
<span class="mr30"> 申请表填写进度 </span>
<span class="icon2">
<i class="el-icon-d-arrow-left"></i>
</div>
<!-- 申请编号 -->
<div class="apply-num tac" v-ellipsis="'284px'">
申请编号:DX123456789
</div>
<!-- 事项名称 -->
<div class="matter-name tac" v-ellipsis="'284px'">
{{ matterInfo.matterName }}
</div>
<!-- 材料列表 -->
<div
class="materails-item pdl10"
v-ellipsis="'274px'"
:class="{ active: i === active }"
v-for="(v, i) in materailsList"
:key="v.id"
@click="active = i"
>
{{ v.materiaFullName }}
</div>
</span>
</div>
<!-- 侧边按钮 -->
<!-- 申请编号 -->
<div class="apply-num tac" v-ellipsis="'340px'">
申请编号:DX123456789
</div>
<!-- 事项名称 -->
<div class="matter-name tac" v-ellipsis="'340px'">
{{ matterInfo.matterName }}
</div>
<!-- 材料列表 -->
<div
class="sidebar-btn flex jcc aic"
v-show="!showSidebar"
@click="showSidebar = true"
class="materails-item pdl10"
v-ellipsis="'340px'"
:class="{ active: i === active }"
v-for="(v, i) in materailsList"
:key="v.id"
@click="active = i"
>
<div class="sidebar-btn-text flex flexc aic">
<span class="sidebar-btn-title"> 申请表填写记录 </span>
<span class="mt15 mb15">
{{ active + 1 }}/{{ materailsList.length }}
</span>
<i class="el-icon-d-arrow-right"></i>
</div>
{{ v.materiaFullName }}
<div class="line"></div>
</div>
</div>
</div>
<div class="right">
<div class="right-main">
<div v-for="(v, i) in materailsList" :key="v.id">
<div v-if="active === i">
<div class="materails-title tac">
<span class="count">{{ i + 1 }}张表</span>-
<span>{{ v.materiaFullName }}</span>
</div>
<div class="materails-write">
<formBuilder ref="formBuilder" :buildData="v"></formBuilder>
</div>
<div class="footer-btn flex aic jcc">
<el-button v-if="i != 0" @click="active -= 1" class="prev-btn"
>上一张</el-button
>
<el-button
:loading="previewLoading"
class="preview-btn"
@click="handlePreview(v.id, v)"
>预览</el-button
>
<el-button
:loading="printLoading"
class="print-btn"
@click="handlePrint(v.id, v)"
>打印此表</el-button
>
<el-button :loading="submitLoading" class="sub-btn"
>在线提交</el-button
>
<el-button
:loading="allSubmitLoading"
class="sub-btn"
v-if="i == materailsList.length - 1"
>全部提交</el-button
>
<el-button
:loading="allPrintLoading"
class="print-btn"
v-if="i == materailsList.length - 1"
>全部打印</el-button
>
<el-button
v-if="
materailsList.length > 1 && i != materailsList.length - 1
"
:loading="nextLoading"
class="next-btn"
@click="active += 1"
>下一张</el-button
>
</div>
</div>
<!-- 侧边按钮 -->
<div
class="sidebar-btn flex jcc aic"
v-show="!showSidebar"
@click="showSidebar = true"
>
<div class="sidebar-btn-text flex flexc aic">
<span class="sidebar-btn-title"> 申请表填写记录 </span>
<span class="mt15 mb15">
{{ active + 1 }}/{{ materailsList.length }}
</span>
<span class="icon1">
<i class="el-icon-d-arrow-right"></i>
</span>
</div>
</div>
</div>
</div>
<!-- 预览弹窗 -->
<PreviewModal :previewInfo="formInfo" v-show="PreviewModalShow">
<el-button
:loading="printLoading"
class="print-btn"
@click="printEmpty(api + formInfo.preview)"
>打印此表</el-button
>
<el-button :loading="submitLoading" class="sub-btn">提交</el-button>
<el-button class="next-btn" @click="PreviewModalShow = false"
>关闭</el-button
>
</PreviewModal>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
import formBuilder from "@/components/formDes/formBuilder.vue";
import { getMaterialsList, mergeFormToDocx } from "@/api";
import PreviewModal from "@/components/PreviewModal.vue";
import { getMaterialsList } from "@/api";
import local from "@/utils/local";
import { printFn } from "@/utils/print";
export default {
components: {
Header,
formBuilder,
PreviewModal,
},
data() {
return {
......@@ -160,19 +112,11 @@ export default {
: "http://192.168.0.98:11074",
matterInfo: this.$route.query,
materailsList: [],
formConfig: {}, // 表单配置
formData: "", // 表单数据
active: 0,
formInfo: {}, // 当前表单数据
formList: [], // 所有填写表格数据
previewLoading: false,
printLoading: false,
submitLoading: false,
allSubmitLoading: false,
allPrintLoading: false,
nextLoading: false,
scale: 100,
showSidebar: false, // 切换侧边弹窗显示
PreviewModalShow: false, // 预览弹窗
width: 600,
height: 800,
};
},
created() {
......@@ -199,45 +143,23 @@ export default {
this.materailsList = data;
},
// 生成表单
async createForm(id, formData) {
let res = await mergeFormToDocx({
id,
formContent: formData,
});
return res.data;
},
// 预览
async handlePreview(id, row) {
let valid = await this.$refs.formBuilder[0].validate();
if (valid) {
this.previewLoading = true;
let formData = JSON.stringify(row.form, null, 4);
this.formInfo = { ...row, ...(await this.createForm(id, formData)) };
this.previewLoading = false;
this.PreviewModalShow = true;
// 放大
handleEnlargement() {
this.scale += 20;
if (this.scale > 200) {
this.scale = 200;
}
console.log(this.width * (this.scale / 100));
},
// 打印此表
async handlePrint(id, row) {
let valid = await this.$refs.formBuilder[0].validate();
if (valid) {
let formData = JSON.stringify(row.form, null, 4);
let data = await this.createForm(id, formData);
printFn({
data: this.api + data.preview,
});
// 缩小
handleShrink() {
if (this.scale > 100) {
this.scale -= 20;
} else if (this.scale <= 100) {
this.scale = 100;
}
},
// 打印空白表格
printEmpty(data) {
printFn({
data,
});
},
},
};
</script>
......@@ -245,7 +167,7 @@ export default {
<style lang="less" scoped>
.write-page {
width: 100%;
height: 100%;
min-height: 100%;
background-color: #f5f5f5;
.back-home {
font-size: 28px;
......@@ -256,56 +178,102 @@ export default {
}
.main {
width: 100%;
height: 1px;
position: relative;
}
.left {
width: 50%;
height: calc(100vh - 100px - 30px);
padding-top: 30px;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
overflow: hidden;
overflow: auto;
.sidebar-box {
width: 284px;
width: 360px;
min-height: 340px;
max-height: 800px;
padding: 10px;
background: #fff;
box-shadow: 6px -1px 10px 0px rgba(0, 0, 0, 0.11);
border-radius: 0px 38px 8px 0px;
position: absolute;
top: 130px;
left: 0px;
z-index: 10;
transition: all 500ms;
.title {
height: 42px;
font-size: 20px;
margin-bottom: 15px;
font-size: 22px;
font-family: Source Han Sans CN;
color: #333333;
position: relative;
i {
font-size: 24px;
font-size: 18px;
}
}
.icon1 {
width: 26px;
height: 26px;
background: #52a8f6;
border-radius: 50%;
color: var(--main-theme-color1);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
i {
font-size: 16px;
}
}
.icon2 {
display: inline-block;
width: 34px;
height: 34px;
background: #f2f6fe;
border-radius: 16px;
text-align: center;
line-height: 34px;
color: var(--main-theme-color1);
position: absolute;
right: 28px;
}
.apply-num {
height: 28px;
background: #e6eefd;
margin-bottom: 20px;
font-size: 18px;
line-height: 28px;
font-family: Source Han Sans CN;
color: #666666;
}
.matter-name {
width: 186px;
height: 38px;
margin-bottom: 20px;
background: #f2f6fe;
border-radius: 4px;
line-height: 38px;
color: var(--main-theme-color1);
}
.matter-name,
.materails-item {
height: 42px;
line-height: 40px;
border-bottom: 1px solid #e8e8e8;
font-size: 18px;
font-family: Source Han Sans CN;
color: #333333;
}
.line {
height: 1px;
width: 100%;
background-image: linear-gradient(
to right,
#fff,
#ccc 10%,
#ccc 80%,
#fff
);
}
.active {
color: var(--main-theme-color1);
border-color: var(--main-theme-color1);
.line {
background-image: linear-gradient(
to right,
#fff,
var(--main-theme-color1) 10%,
var(--main-theme-color1) 80%,
#fff
);
}
}
.sidebar-btn {
......@@ -331,121 +299,53 @@ export default {
}
}
.show {
left: -284px;
left: -360px;
}
.preview-box {
width: 80%;
height: 100%;
border-radius: 4px;
img {
width: 98%;
height: 100%;
border-radius: 4px;
object-fit: contain;
}
width: 600px;
padding-top: 50px;
position: absolute;
// .preview-img-box {
// margin: auto;
// }
}
.print-btn {
width: 211px;
height: 54px;
background: linear-gradient(
90deg,
var(--gradient-ramp-theme2),
var(--gradient-ramp-assist2)
);
box-shadow: 0px 6px 12px 1px rgba(253, 100, 79, 0.2);
border-radius: 8px;
font-size: 24px;
.short {
font-size: 26px;
font-family: Source Han Sans CN;
color: #ffffff;
position: absolute;
left: 50%;
bottom: 8px;
color: var(--main-theme-color1);
}
}
.right {
width: 50%;
height: calc(100vh - 100px - 30px);
padding: 30px;
overflow-y: auto;
background-color: #efefef;
box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.08);
.right-main {
background-color: #fff;
border-radius: 4px;
padding-bottom: 60px;
.full-name {
margin-top: 10px;
margin-bottom: 24px;
font-size: 20px;
font-family: Source Han Sans CN;
color: #888888;
}
.materails-title {
padding: 30px 0px;
font-size: 28px;
color: #333;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.count {
color: var(--main-theme-color1);
}
.preview-img {
object-fit: contain;
}
.footer-btn {
width: calc(50% - 76px);
height: 64px;
position: absolute;
bottom: 30px;
right: 46px;
background-color: #fff;
z-index: 1000;
.preview-btn {
width: 130px;
height: 54px;
border: 1px solid var(--main-assist-color4);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: var(--main-assist-color4);
// 放大控制
.control-box {
position: fixed;
right: 200px;
bottom: 36px;
z-index: 10;
.control-btn {
width: 100px;
height: 100px;
margin-top: 40px;
background: #ffffff;
box-shadow: 0px 0px 24px 3px rgba(0, 0, 0, 0.07);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
i {
font-size: 54px;
color: var(--main-theme-color1);
}
}
}
.materails-write {
border-top: 1px solid #ececec;
}
}
.prev-btn,
.next-btn {
width: 130px;
height: 54px;
border: 1px solid var(--main-theme-color1);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: var(--main-theme-color1);
}
.print-btn {
width: 130px;
height: 54px;
background: linear-gradient(
-90deg,
var(--gradient-ramp-assist3),
var(--gradient-ramp-theme3)
);
box-shadow: 0px 6px 12px 1px rgba(88, 193, 158, 0.2);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: #ffffff;
}
.sub-btn {
width: 130px;
height: 54px;
background: linear-gradient(
90deg,
var(--main-theme-color1),
var(--main-assist-color1)
);
box-shadow: 3px 5px 12px 1px rgba(11, 91, 233, 0.2);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: #ffffff;
}
</style>
\ No newline at end of file
<template>
<!-- 提建议 -->
<div class="propound flex flexc">
<Header>
<div class="title" slot="title">我要建议</div>
<div slot="right" class="back-home flex aic" @click="handleBackHome">
<img class="mr10" src="../../assets/img/shouye.png" />
返回首页
</div>
</Header>
<div class="main flex1">
<el-form ref="form" :model="form" label-width="140px">
<div class="form-top">
<el-form-item class="tips-title" label="我要建议">
<span class="tips"
>尊敬的用户,您好!感谢您给我们提出宝贵的建议。我们会进行严格保密。您的个人信息绝不会向外公开,请根据您的实际情况或内心真实想法如实填写。</span
>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="建议标题" prop="form.name">
<el-input
v-model="form.name"
placeholder="请输入建议标题"
></el-input> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="建议类型" prop="form.name">
<el-radio-group v-model="form.resource">
<el-radio label="部门建议"></el-radio>
<el-radio label="办事建议"></el-radio>
<el-radio label="网站建议"></el-radio>
<el-radio label="我要纠错"></el-radio>
<el-radio label="我要投诉"></el-radio>
</el-radio-group> </el-form-item
></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="真实姓名" prop="form.name">
<el-input
v-model="form.name"
placeholder="请输入您的真实姓名"
></el-input> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="身份证号" prop="form.name">
<el-input
v-model="form.name"
placeholder="请输入您的身份证号"
></el-input> </el-form-item
></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="联系电话" prop="form.name">
<el-input
v-model="form.name"
placeholder="请输入您的电话号码"
></el-input> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="电子邮箱" prop="form.name">
<el-input
v-model="form.name"
placeholder="请输入您的邮箱账号"
></el-input> </el-form-item
></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="联系地址" prop="form.name">
<el-cascader
:options="options"
clearable
v-model="form.name"
placeholder="请选择您的联系地址"
></el-cascader>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="详细地址" prop="form.name">
<el-input
v-model="form.name"
placeholder="请输入您的详细地址"
></el-input> </el-form-item
></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="事件发生地" prop="form.name">
<el-cascader
:options="options"
clearable
v-model="form.name"
placeholder="请选择事项发生地"
></el-cascader> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="详细地址" prop="form.name">
<el-input
v-model="form.name"
placeholder="请输入事件发生地详细地址"
></el-input> </el-form-item
></el-col>
</el-row>
</div>
<div class="form-bottom">
<el-form-item label="活动形式">
<el-input
type="textarea"
v-model="form.desc"
resize="none"
placeholder="请输入具体建议内容"
></el-input>
</el-form-item>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="是否公开">
<el-radio-group v-model="form.resource">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否保密" prop="form.name">
<el-radio-group v-model="form.resource">
<el-radio label="是"></el-radio>
<el-radio label="否"></el-radio>
</el-radio-group> </el-form-item
></el-col>
<el-col :span="12">
<div class="tar">
<el-button class="search-btn"> 我要建议 </el-button>
</div>
</el-col>
</el-row>
</div>
</el-form>
</div>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
import { regionData } from "element-china-area-data";
export default {
components: {
Header,
},
data() {
return {
options: regionData,
form: {
name: "",
},
};
},
methods: {
handleBackHome() {
this.$router.push("/");
},
},
};
</script>
<style lang="less" scoped>
.propound {
width: 100%;
height: 100%;
background-color: #f5f5f5;
.back-home {
font-size: 28px;
font-family: Source Han Sans CN;
color: #ffffff;
cursor: pointer;
}
}
.main {
width: 100%;
padding: 40px;
}
/deep/.el-form-item__label {
font-size: 24px;
font-family: Source Han Sans CN;
color: #333;
}
/deep/.el-radio__label {
font-size: 24px;
font-family: Source Han Sans CN;
color: #333333;
}
/deep/.el-radio__inner {
width: 27px;
height: 27px;
&::after {
width: 10px;
height: 10px;
}
}
.form-top {
height: 580px;
padding: 26px;
background: #ffffff;
border-radius: 16px;
/deep/.el-form-item__label {
font-size: 24px;
font-family: Source Han Sans CN;
color: #333;
}
.tips-title {
/deep/.el-form-item__label {
width: 114px !important;
margin-left: 20px;
background: #e6effd;
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: var(--main-theme-color1);
}
}
.tips {
font-size: 18px;
font-family: Source Han Sans CN;
color: #99a6b7;
}
/deep/.el-input__inner {
height: 64px;
background: #f1f7fd;
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
}
/deep/.el-form-item__content {
height: 64px;
display: flex;
align-items: center;
}
/deep/.el-form-item__label {
line-height: 64px;
}
/deep/.el-radio {
margin-right: 15px;
}
/deep/.el-cascader {
width: 100%;
}
}
.form-bottom {
height: 280px;
margin-top: 30px;
padding: 26px;
background: #ffffff;
border-radius: 16px;
/deep/.el-textarea__inner {
height: 144px;
background: #f1f7fd;
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
}
.search-btn {
width: 162px;
height: 60px;
background: linear-gradient(
-90deg,
var(--main-assist-color1),
var(--main-theme-color1)
);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: #ffffff;
}
}
</style>
\ No newline at end of file
<template>
<div class="suggest flex flexc">
<Header>
<div slot="title" class="title">意见建议</div>
</Header>
<div class="main flex1 flex flexc">
<PageTop>
<div slot="count" class="count flex">
<p class="mr30">建议:<span class="data-count">142</span></p>
<p class="mr30">今日建议:<span class="data-count">142</span></p>
<p class="mr30">回复:<span class="data-count">142</span></p>
<p>今日回复:<span class="data-count">142</span></p>
</div>
<el-button
slot="search-right"
class="search-btn"
@click="handleSuggest"
>
我要建议
</el-button>
</PageTop>
<!-- 指南列表 -->
<div class="suggest-box flex1">
<div class="suggest-list flex flexwrap jcb" v-if="list.length">
<div
class="suggest-item flex jcb"
v-for="(v, i) in list"
:key="i"
@click="handleCheck(v)"
>
<div class="flex flex1 aic">
<div class="icon"></div>
<p class="text flex1">
{{ v }}
</p>
</div>
<div class="time flex aic">2022-12-12 12:00:00</div>
</div>
</div>
<el-empty :image-size="200" v-else></el-empty>
<!-- 分页 -->
<div class="tac">
<el-pagination
prev-text="上一页"
next-text="下一页"
layout="prev,next"
hide-on-single-page
:total="total"
:current-page="current"
:page-size="size"
@current-change="changePage"
>
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
import PageTop from "@/components/PageTop.vue";
export default {
components: {
Header,
PageTop,
},
data() {
return {
searchVal: "",
list: [
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
"翻建建造大修自住住房提取",
],
total: 0,
size: 12,
current: 1,
};
},
methods: {
handleCheck(row) {
console.log(row);
this.$router.push("/suggestdetails");
},
handleSuggest() {
this.$router.push("/propound");
console.log(11);
},
changePage(cur) {
this.current = cur;
},
},
};
</script>
<style lang="less" scoped>
.suggest {
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
.search-btn {
width: 193px;
height: 72px;
background: linear-gradient(
-90deg,
var(--main-assist-color1),
var(--main-theme-color1)
);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: #ffffff;
}
.main {
padding-right: 40px;
padding-left: 40px;
padding-bottom: 40px;
.data-count {
color: var(--main-assist-color3);
}
}
.suggest-box {
width: 100%;
padding: 30px;
padding-bottom: 0px;
background: #ffffff;
border-radius: 16px;
}
.suggest-item {
width: 870px;
height: 80px;
margin-bottom: 30px;
padding: 0px 20px;
line-height: 80px;
background: #edf6fe;
border-radius: 8px;
.icon {
width: 17px;
height: 17px;
margin-right: 10px;
background-color: var(--main-assist-color3);
transform: rotate(45deg);
}
.text {
width: 1px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
margin-left: 10px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #999999;
}
}
/deep/.btn-prev {
margin-right: 80px;
}
/deep/.btn-prev,
/deep/ .btn-next {
width: 78px;
height: 25px;
font-family: Source Han Sans CN;
font-weight: 400;
color: var(--main-theme-color1);
line-height: 28px;
span {
font-size: 28px;
}
}
</style>
\ No newline at end of file
<template>
<!-- 建议详情 -->
<div class="suggest-details flex flexc">
<Header>
<div slot="title" class="title">意见建议详情</div>
<div slot="right" class="back-home flex aic" @click="handleBackHome">
<img class="mr10" src="../../assets/img/shouye.png" />
返回首页
</div>
</Header>
<div class="main flex1 flex flexc">
<div class="suggest-box">
<div class="tips-box">
<div>建议</div>
</div>
<div class="suggest-item">
<span class="suggest-item-title">建议标题:</span>
<span
>建议标题:关于《四川省2022年公共卫生特别服务岗项目实施方案》(川卫发〔2022〕7号)的问题
</span>
</div>
<div class="suggest-item">
<span class="suggest-item-title"
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</span
>
<span>张三</span>
</div>
<div class="suggest-item">
<span class="suggest-item-title">提交日期:</span>
<span>2022-12-12 12:12:12</span>
</div>
<div class="suggest-item">
<span class="suggest-item-title">建议内容:</span>
<span class="suggest-item-text">
《四川省2022年新冠肺炎疫情防控应急岗位招募实施方案》(川卫人教函〔2022〕84号)有关规定,(二)就业支持政策其中:7.
享受应届毕业生相关政策。参加公卫特别岗项目前无工作经历的人员服务满3周年且年度考核合格的,两年内参加机关和企事业单位招录(聘)、自主创业、落户等方面可同等享受应届毕业生相关政策。问题:无工作经历的人员是指从大学毕业到考上本次岗位之间没有交社保为准吗?比如我毕业后找了份工作,而且有交社保一个月再辞职,然后考上本岗位是否能享受后面的应届毕业生身份?
</span>
</div>
</div>
<div class="answer">
<div class="tips-box">
<div>答复</div>
</div>
尊敬的先生:
您好!您反映的问题收悉,现回复如下:2022年6月24日,省卫生健康委会同教育厅、民政厅、财政厅、人力资源社会保障厅、省医保局、省中医药局印发了《四川省2022年公共卫生特别服务岗项目实施方案》,《方案》中明确:公卫特别岗招募对象主要为省内普通高校医药卫生类专业2022届毕业生,各地各单位可根据实际将招募对象扩大到以下范围:1.离校未就业的省内普通高校2021届医药卫生类专业大专及以上学历毕业生;2.省外普通高校医药卫生类专业2022届大专及以上学历四川籍毕业生;3.省内普通高校其他非医药卫生类专业、符合岗位招募条件的2022届大专及以上学历毕业生;4.获得校级及以上“优秀学生”的省内中职学校(含技工院校)医药卫生类专业2022届毕业生。同时《方案》中明确:参加公卫特别岗项目前无工作经历的人员服务满3周年且年度考核合格的,两年内参加机关和企事业单位招录(聘)、自主创业、落户等方面可同等享受应届毕业生相关政策。因此,您毕业后工作而且有交社保一个月再辞职,不符合“离校未就业”和“参加公卫特别岗项目前无工作经历”要求,不能享受应届毕业生相关政策。
</div>
</div>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
export default {
components: {
Header,
},
data() {
return {};
},
methods: {
handleBackHome() {
this.$router.push("/");
},
},
};
</script>
<style lang="less" scoped>
.suggest-details {
width: 100%;
height: 100%;
background-color: #f5f5f5;
.back-home {
font-size: 28px;
font-family: Source Han Sans CN;
color: #ffffff;
cursor: pointer;
}
.main {
width: 100%;
padding: 0px 40px;
margin-top: 40px;
}
.suggest-box {
width: 100%;
height: 350px;
margin-bottom: 30px;
padding-top: 40px;
padding-right: 40px;
padding-bottom: 40px;
padding-left: 40px;
background: #ffffff;
border-radius: 16px;
font-size: 24px;
color: #333333;
overflow-y: auto;
.suggest-item {
margin-top: 10px;
}
.suggest-item-title {
font-family: Source Han Sans CN;
color: var(--main-theme-color1);
}
.suggest-item-text {
line-height: 34px;
}
}
.answer {
width: 100%;
height: 506px;
padding-top: 40px;
padding-right: 40px;
padding-bottom: 40px;
padding-left: 40px;
background: #ffffff;
border-radius: 16px;
font-size: 24px;
color: #333333;
line-height: 34px;
overflow-y: auto;
}
.tips-box {
width: 88px;
height: 44px;
margin-bottom: 20px;
background: var(--main-theme-color1);
border-radius: 8px;
color: #fff;
text-align: center;
line-height: 44px;
}
}
</style>
\ No newline at end of file
<template>
<div class="synopsis flex flexc">
<Header>
<div class="title" slot="title">中心简介</div>
</Header>
<div class="main flex1">
<div class="synopsis-text">
<div v-html="text" v-if="text"></div>
<el-empty :image-size="200" v-else></el-empty>
</div>
</div>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
export default {
components: {
Header,
},
data() {
return {
text: "中心简介中心简介中心简介中心简介中心简介中心简介",
};
},
};
</script>
<style lang="less" scoped>
.synopsis {
width: 100%;
height: 100%;
.main {
width: 100%;
padding: 40px;
.synopsis-text {
width: 100%;
padding: 30px;
height: calc(100vh - 40px - 100px - 40px);
background-color: #fff;
border-radius: 16px;
overflow-y: auto;
}
}
}
</style>
\ No newline at end of file
<template>
<!-- 自助填单页面 -->
<div class="write-page flex flexc">
<Header>
<div slot="title" class="title">自助填单</div>
<div slot="right" class="back-home flex aic" @click="handleBackHome">
<img class="mr10" src="../../assets/img/shouye.png" />
返回首页
</div>
</Header>
<div class="main flex1 flex">
<div class="left">
<div
class="preview-box"
v-for="(v, i) in materailsList"
:key="v.id"
v-show="active === i"
>
<img :src="api + v.preViewPath" />
<!-- 打印空白表单按钮 -->
<el-button class="print-btn" @click="printEmpty(api + v.preViewPath)">
打印空白表格
</el-button>
</div>
<!-- 侧边栏弹窗 -->
<div class="sidebar-box" :class="{ show: !showSidebar }">
<!-- 侧边内容 -->
<div class="sidebar-main">
<div class="title flex jcc aic" @click="showSidebar = false">
<span class="mr30"> 申请表填写进度 </span>
<i class="el-icon-d-arrow-left"></i>
</div>
<!-- 申请编号 -->
<div class="apply-num tac" v-ellipsis="'284px'">
申请编号:DX123456789
</div>
<!-- 事项名称 -->
<div class="matter-name tac" v-ellipsis="'284px'">
{{ matterInfo.matterName }}
</div>
<!-- 材料列表 -->
<div
class="materails-item pdl10"
v-ellipsis="'274px'"
:class="{ active: i === active }"
v-for="(v, i) in materailsList"
:key="v.id"
@click="active = i"
>
{{ v.materiaFullName }}
</div>
</div>
<!-- 侧边按钮 -->
<div
class="sidebar-btn flex jcc aic"
v-show="!showSidebar"
@click="showSidebar = true"
>
<div class="sidebar-btn-text flex flexc aic">
<span class="sidebar-btn-title"> 申请表填写记录 </span>
<span class="mt15 mb15">
{{ active + 1 }}/{{ materailsList.length }}
</span>
<i class="el-icon-d-arrow-right"></i>
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-main">
<div v-for="(v, i) in materailsList" :key="v.id">
<div v-if="active === i">
<div class="materails-title tac">
<span class="count">{{ i + 1 }}张表</span>-
<span>{{ v.materiaFullName }}</span>
</div>
<div class="materails-write">
<formBuilder ref="formBuilder" :buildData="v"></formBuilder>
</div>
<div class="footer-btn flex aic jcc">
<el-button v-if="i != 0" @click="active -= 1" class="prev-btn"
>上一张</el-button
>
<el-button
:loading="previewLoading"
class="preview-btn"
@click="handlePreview(v.id, v)"
>预览</el-button
>
<el-button
:loading="printLoading"
class="print-btn"
@click="handlePrint(v.id, v)"
>打印此表</el-button
>
<el-button :loading="submitLoading" class="sub-btn"
>在线提交</el-button
>
<el-button
:loading="allSubmitLoading"
class="sub-btn"
v-if="i == materailsList.length - 1"
>全部提交</el-button
>
<el-button
:loading="allPrintLoading"
class="print-btn"
v-if="i == materailsList.length - 1"
>全部打印</el-button
>
<el-button
v-if="
materailsList.length > 1 && i != materailsList.length - 1
"
:loading="nextLoading"
class="next-btn"
@click="active += 1"
>下一张</el-button
>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 预览弹窗 -->
<PreviewModal :previewInfo="formInfo" v-show="PreviewModalShow">
<el-button
:loading="printLoading"
class="print-btn"
@click="printEmpty(api + formInfo.preview)"
>打印此表</el-button
>
<el-button :loading="submitLoading" class="sub-btn">提交</el-button>
<el-button class="next-btn" @click="PreviewModalShow = false"
>关闭</el-button
>
</PreviewModal>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
import formBuilder from "@/components/formDes/formBuilder.vue";
import { getMaterialsList, mergeFormToDocx } from "@/api";
import PreviewModal from "@/components/PreviewModal.vue";
import local from "@/utils/local";
import { printFn } from "@/utils/print";
export default {
components: {
Header,
formBuilder,
PreviewModal,
},
data() {
return {
api: local.getLocal("baseUrl")
? local.getLocal("baseUrl") + "/"
: "http://192.168.0.98:11074",
matterInfo: this.$route.query,
materailsList: [],
formConfig: {}, // 表单配置
formData: "", // 表单数据
active: 0,
formInfo: {}, // 当前表单数据
formList: [], // 所有填写表格数据
previewLoading: false,
printLoading: false,
submitLoading: false,
allSubmitLoading: false,
allPrintLoading: false,
nextLoading: false,
showSidebar: false, // 切换侧边弹窗显示
PreviewModalShow: false, // 预览弹窗
};
},
created() {
this.getMaterialsList();
},
methods: {
handleBackHome() {
this.$router.push("/");
},
// 获取材料列表
async getMaterialsList() {
let res = await getMaterialsList({
page: 1,
size: -1,
matterId: this.matterInfo.matterId,
});
let { data } = res.data.data;
data.forEach((v) => {
v.formContent = JSON.parse(v.formContent);
v.form = {};
});
this.materailsList = data;
},
// 生成表单
async createForm(id, formData) {
let res = await mergeFormToDocx({
id,
formContent: formData,
});
return res.data;
},
// 预览
async handlePreview(id, row) {
let valid = await this.$refs.formBuilder[0].validate();
if (valid) {
this.previewLoading = true;
let formData = JSON.stringify(row.form, null, 4);
this.formInfo = { ...row, ...(await this.createForm(id, formData)) };
this.previewLoading = false;
this.PreviewModalShow = true;
}
},
// 打印此表
async handlePrint(id, row) {
let valid = await this.$refs.formBuilder[0].validate();
if (valid) {
let formData = JSON.stringify(row.form, null, 4);
let data = await this.createForm(id, formData);
printFn({
data: this.api + data.preview,
});
}
},
// 打印空白表格
printEmpty(data) {
printFn({
data,
});
},
},
};
</script>
<style lang="less" scoped>
.write-page {
width: 100%;
height: 100%;
background-color: #f5f5f5;
.back-home {
font-size: 28px;
font-family: Source Han Sans CN;
color: #ffffff;
cursor: pointer;
}
}
.main {
width: 100%;
position: relative;
}
.left {
width: 50%;
height: calc(100vh - 100px - 30px);
padding-top: 30px;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
overflow: hidden;
.sidebar-box {
width: 284px;
min-height: 340px;
background: #fff;
box-shadow: 6px -1px 10px 0px rgba(0, 0, 0, 0.11);
border-radius: 0px 38px 8px 0px;
position: absolute;
top: 130px;
left: 0px;
transition: all 500ms;
.title {
height: 42px;
font-size: 20px;
font-family: Source Han Sans CN;
color: #333333;
i {
font-size: 24px;
}
}
.apply-num {
height: 28px;
background: #e6eefd;
font-size: 18px;
line-height: 28px;
font-family: Source Han Sans CN;
color: var(--main-theme-color1);
}
.matter-name,
.materails-item {
height: 42px;
line-height: 40px;
border-bottom: 1px solid #e8e8e8;
font-size: 18px;
font-family: Source Han Sans CN;
color: #333333;
}
.active {
color: var(--main-theme-color1);
border-color: var(--main-theme-color1);
}
.sidebar-btn {
width: 84px;
height: 276px;
background: linear-gradient(
90deg,
var(--main-theme-color1),
var(--main-assist-color1)
);
box-shadow: 6px -1px 10px 0px rgba(11, 92, 233, 0.11);
border-radius: 0px 38px 8px 0px;
font-size: 24px;
font-family: Source Han Sans CN;
color: #ffffff;
cursor: pointer;
position: absolute;
right: -84px;
top: 50px;
.sidebar-btn-title {
writing-mode: vertical-lr;
}
}
}
.show {
left: -284px;
}
.preview-box {
width: 80%;
height: 100%;
border-radius: 4px;
img {
width: 98%;
height: 100%;
border-radius: 4px;
object-fit: contain;
}
}
.print-btn {
width: 211px;
height: 54px;
background: linear-gradient(
90deg,
var(--gradient-ramp-theme2),
var(--gradient-ramp-assist2)
);
box-shadow: 0px 6px 12px 1px rgba(253, 100, 79, 0.2);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: #ffffff;
position: absolute;
left: 50%;
bottom: 8px;
}
}
.right {
width: 50%;
height: calc(100vh - 100px - 30px);
padding: 30px;
overflow-y: auto;
background-color: #efefef;
box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.08);
.right-main {
background-color: #fff;
border-radius: 4px;
padding-bottom: 60px;
}
.materails-title {
padding: 30px 0px;
font-size: 28px;
color: #333;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.count {
color: var(--main-theme-color1);
}
}
.footer-btn {
width: calc(50% - 76px);
height: 64px;
position: absolute;
bottom: 30px;
right: 46px;
background-color: #fff;
z-index: 1000;
.preview-btn {
width: 130px;
height: 54px;
border: 1px solid var(--main-assist-color4);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: var(--main-assist-color4);
}
}
.materails-write {
border-top: 1px solid #ececec;
}
}
.prev-btn,
.next-btn {
width: 130px;
height: 54px;
border: 1px solid var(--main-theme-color1);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: var(--main-theme-color1);
}
.print-btn {
width: 130px;
height: 54px;
background: linear-gradient(
-90deg,
var(--gradient-ramp-assist3),
var(--gradient-ramp-theme3)
);
box-shadow: 0px 6px 12px 1px rgba(88, 193, 158, 0.2);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: #ffffff;
}
.sub-btn {
width: 130px;
height: 54px;
background: linear-gradient(
90deg,
var(--main-theme-color1),
var(--main-assist-color1)
);
box-shadow: 3px 5px 12px 1px rgba(11, 91, 233, 0.2);
border-radius: 8px;
font-size: 24px;
font-family: Source Han Sans CN;
color: #ffffff;
}
</style>
\ No newline at end of file
<template>
<div class="left-menus">
<div class="dept-list">
<div
class="dept-item"
:class="{ active: isActive === i }"
v-for="(v, i) in deptList"
:key="v.id"
@click="changeDept(v.id, i)"
>
<div class="dept-name">
{{ v.deptAbb ? v.deptAbb : v.name }}
</div>
<div class="line"></div>
</div>
</div>
</div>
</template>
<script>
import { getdeptList } from "@/api";
export default {
data() {
return {
deptList: [],
isActive: 0,
};
},
created() {
this.getdeptList();
},
methods: {
// 获取部门列表
async getdeptList() {
let obj = { id: "", name: "全部部门" };
let res = await getdeptList();
let { data } = res.data.data;
this.deptList = [obj, ...data];
},
changeDept(id, index) {
this.isActive = index;
this.$emit("click", id);
},
},
};
</script>
<style lang="less" scoped>
.left-menus {
width: 300px;
height: 100%;
background: #ffffff;
box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.07);
}
.dept-list {
width: 100%;
height: calc(100vh - 100px);
padding: 15px 0px;
overflow-y: auto;
}
.dept-item {
height: 70px;
text-align: center;
font-size: 26px;
line-height: 70px;
color: #333333;
cursor: pointer;
.dept-name {
padding: 0px 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.line {
height: 1px;
width: 100%;
background-image: linear-gradient(to right, #fff, #ccc 50%, #fff);
}
.active {
background: linear-gradient(
270deg,
var(--main-assist-color1),
var(--main-theme-color1)
);
font-family: Source Han Sans CN;
color: #ffffff;
}
</style>
\ No newline at end of file
<template>
<!-- 快速填单 -->
<div class="matter-page flex flexc">
<!-- 头部 -->
<Header>
<div slot="title" class="title">快速填单</div>
</Header>
<!-- 主体 -->
<div class="main flex1 flex">
<LeftMenus @click="changeDept"></LeftMenus>
<div class="right flex1 flex flexc">
<!-- 搜索 -->
<PageTop>
<div slot="count" class="count">
共计<span class="data-count" v-format="'#,##0'">{{
matterTotal
}}</span
>件事项,<span class="data-count" v-format="'#,##0'">{{
materals.total
}}</span
>份表单
</div>
<SearchBox
slot="search-right"
width="834px"
v-model="searchVal"
@click="getWriteMatterList"
></SearchBox>
</PageTop>
<!-- 事项列表 -->
<div class="matter-box flex1">
<div class="matter-list" v-if="matterList.length">
<div
class="matter-item"
v-for="v in matterList"
:key="v.id"
@click="handleCheck(v)"
>
<div class="for-short">{{ v.matterName }}</div>
<div class="name">
{{ v.matterFullName }}
</div>
<div
class="materials"
v-for="(item, index) in v.materals"
:key="item.id"
>
·{{ item.materiaFullName }}
<span v-if="index > 2">{{
`等${v.materals && v.materals.length}份材料`
}}</span>
</div>
</div>
</div>
<el-empty :image-size="200" v-else></el-empty>
<!-- 分页 -->
<div class="tac">
<el-pagination
prev-text="上一页"
next-text="下一页"
hide-on-single-page
layout="prev,next"
:total="matterTotal"
:current-page="current"
:page-size="size"
@current-change="changePage"
>
</el-pagination>
</div>
</div>
</div>
</div>
<!-- 材料列表 -->
<MateralsList
:matterInfo="matterInfo"
:visible.sync="visible"
></MateralsList>
</div>
</template>
<script>
import Header from "@/components/Header.vue";
import LeftMenus from "./components/LeftMenus.vue";
import PageTop from "@/components/PageTop.vue";
import SearchBox from "@/components/SearchBox.vue";
import MateralsList from "../../components/MateralsList.vue";
import { getWriteMatterList, getMaterialsList } from "@/api";
export default {
components: {
Header,
LeftMenus,
PageTop,
SearchBox,
MateralsList,
},
data() {
return {
current: 1,
size: 9,
matterInfo: {},
visible: false,
searchVal: "",
deptId: "",
matterTotal: 0,
materals: {},
matterList: [],
};
},
created() {
this.getWriteMatterList();
this.getAllmaterials();
},
watch: {
searchVal(newVal) {
if (newVal === "") {
this.getWriteMatterList();
}
},
},
methods: {
// 获取事项列表
async getWriteMatterList() {
let res = await getWriteMatterList({
page: this.current,
size: this.size,
deptId: this.deptId,
matterName: this.searchVal,
});
let { total, data } = res.data.data;
data.forEach(async (v) => {
v.materals = [];
let obj = await this.getMaterialsList(1, -1, v.id);
obj.data.forEach((item) => {
v.materals.push(item);
});
});
this.matterList = data;
this.matterTotal = total;
},
// 获取所有材料
async getAllmaterials() {
this.materals = await this.getMaterialsList(1, 3, null);
},
// 获取材料列表
async getMaterialsList(page = 1, size = 3, matterId) {
let res = await getMaterialsList({
page,
size,
deptId: this.deptId,
matterId,
});
let { total, data } = res.data.data;
return {
total,
data,
};
},
// 切换部门
changeDept(id) {
this.deptId = id;
this.getWriteMatterList();
this.getAllmaterials();
},
// 分页
changePage(cur) {
this.current = cur;
this.getWriteMatterList();
},
handleCheck(row) {
this.matterInfo = row;
this.visible = true;
},
},
};
</script>
<style lang="less" scoped>
.matter-page {
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
.main {
width: 100%;
height: 100%;
margin-top: 10px;
.right {
height: 100%;
padding: 0px 40px;
padding-bottom: 40px;
.data-count {
color: var(--main-assist-color3);
}
}
.matter-box {
height: 100%;
padding: 30px;
background: #ffffff;
border-radius: 16px;
.matter-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&::after {
content: "";
width: 460px;
border: 1px solid transparent;
}
}
.matter-item {
width: 460px;
height: 200px;
padding: 10px;
margin-bottom: 34px;
background: #edf6fe;
border-radius: 16px;
cursor: pointer;
.for-short {
margin-bottom: 10px;
font-size: 24px;
font-weight: 500;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.name {
margin-bottom: 10px;
font-size: 18px;
font-family: Source Han Sans CN;
color: #888888;
line-height: 24px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.materials {
font-size: 18px;
font-family: Source Han Sans CN;
color: #333333;
line-height: 28px;
.count {
color: #2878ff;
}
}
}
/deep/.btn-prev {
margin-right: 80px;
}
}
}
/deep/.btn-prev,
/deep/ .btn-next {
width: 78px;
height: 25px;
font-family: Source Han Sans CN;
font-weight: 400;
color: var(--main-theme-color1);
line-height: 28px;
span {
font-size: 28px;
}
}
</style>
\ No newline at end of file
import Vue from 'vue'
import VueRouter from 'vue-router'
import Vue from "vue";
import VueRouter from "vue-router";
// import Layouts from "@/pages/layouts/Layouts.vue"
// 解决重复点击同一个路由报错
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter)
return originalPush.call(this, location).catch((err) => err);
};
Vue.use(VueRouter);
const routes = [
{
path:'/',
redirect:'/home'
path: "/",
redirect: "/home",
},
// 首页
{
path: '/home',
component: () => import('@/pages/home/Home.vue'),
path: "/home",
component: () => import("@/pages/home/Home.vue"),
},
// 快速查看
{
path: '/matterList',
component: () => import('@/pages/showpage/Materials.vue'),
path: "/matterList",
component: () => import("@/pages/showpage/MatterList.vue"),
},
// 快速搜索
{
path: '/searchpage',
component: () => import('@/pages/searchpage/SearchPage.vue'),
path: "/searchpage",
component: () => import("@/pages/searchpage/SearchPage.vue"),
},
// 事项列表
// 事项分类
{
path: '/matterlist',
component: () => import('@/pages/showpage/MatterList.vue'),
path: "/matterify",
component: () => import("@/pages/showpage/MatterIfy.vue"),
},
// 材料展示
{
path: '/showmaterials',
component: () => import('@/pages/showpage/ShowMaterials.vue'),
path: "/showmaterials",
component: () => import("@/pages/showpage/ShowMaterials.vue"),
},
]
];
const router = new VueRouter({
routes
})
routes,
});
export default router
export default router;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment