Skip to content

S
sample-form-platform
Commit 4ea2f228 authored by 赵啸非's avatar 赵啸非
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 3f50a719 6de5d457
Hide whitespace changes
Inline Side-by-side
Showing with 1002 additions and 272 deletions
sample-form-client-ui/admin/src/pages/home/Home.vue
View file @ 4ea2f228
......@@ -23,8 +23,8 @@
</div>
</div>
<!-- 搜索 -->
<div class="flex flexc aic mt130">
<img class="mb32" src="../../assets/img/png_title.png" />
<div class="flex flexc aic">
<img class="mb32" width="700" src="../../assets/img/png_title@2x.png" />
<div class="search-box">
<el-input v-model="search" placeholder="输入关键词查询"></el-input>
<el-button class="search-btn" @click="handleSearch">
......@@ -68,160 +68,103 @@
</div>
<!-- 主体 -->
<div class="main flex aic">
<!-- 排行榜 -->
<div class="ranking mr25 flex flexc">
<div class="flex jcc">
<div>
<img
class="ranking-title"
src="../../assets/img/pic__hot_biaoqian.png"
/>
<div class="tab-box flex aic jcc">
<div
class="tab-item flex aic jcc"
:class="{ active: rankingActive === 1 }"
@click="changeRanking(1)"
>
热门表单
</div>
<div
class="tab-item flex aic jcc"
:class="{ active: rankingActive === 2 }"
@click="changeRanking(2)"
>
热门事项
</div>
</div>
</div>
<!-- 热门表单列表 -->
<div
v-show="rankingActive === 1"
class="ranking-list flex1 flex flexc mt20"
>
<div v-if="homeInfo.datumList && homeInfo.datumList.length">
<div
class="ranking-item flex aic"
v-for="(v, i) in homeInfo.datumList"
:key="v.id"
>
<div class="flex aic jcc item-index">
<img v-if="i < 3" :src="checkTopImg(i)" />
<span v-else>{{ i + 1 }}.</span>
</div>
<p class="flex1" v-ellipsis>
{{ v.materialName ? v.materialName : v.materiaFullName }}
</p>
</div>
</div>
<div v-else class="tac mt20 empty">暂无数据</div>
</div>
<!-- 热门事项 -->
<div
v-show="rankingActive === 2"
class="ranking-list flex1 flex flexc mt20"
>
<div v-if="homeInfo.matterList && homeInfo.matterList.length">
<div class="ranking-list flex1 flex flexc mt20">
<div v-if="datumList && datumList.length">
<div
class="ranking-item flex aic"
v-for="(v, i) in homeInfo.matterList"
:key="v.id"
v-for="(v, i) in datumList"
:key="v"
>
<div class="flex aic jcc item-index">
<img v-if="i < 3" :src="checkTopImg(i)" />
<span v-else>{{ i + 1 }}.</span>
</div>
<p class="flex1" v-ellipsis>
{{ v.matterName ? v.matterName : v.matterFullName }}
{{ v }}
</p>
</div>
</div>
<div v-else class="tac mt20 empty">暂无数据</div>
<div v-else class="tac mt50 empty">暂无数据</div>
</div>
</div>
<!-- 导航 -->
<div class="nav flex flexc aic">
<div class="nav-top flex aic jcb mb15">
<div class="right flex flexc aic jcb">
<div class="right-top flex aic jcb">
<router-link to="/matterList">
<div class="fill-btn flex aic jcc pointer">
<span class="fill-btn-text1">快</span>
<span class="fill-btn-text2">速</span>
<span class="fill-btn-text3">填</span>
<span class="fill-btn-text4">单</span>
<span class="fill-btn-text3">查</span>
<span class="fill-btn-text4">看</span>
</div>
</router-link>
<router-link to="/Print">
<div class="empty-btn flex aic jcc pointer">打印空白材料</div>
</router-link>
</div>
<div class="nav-bottom flex aic jca">
<router-link to="/guidance">
<div class="nav-item flex flexc aic">
<img class="mb10" src="../../assets/img/icon_zhinan.png" />
<span class="nav-item-name">办事指南</span>
</div>
</router-link>
<router-link to="/announcement">
<div class="nav-item flex flexc aic">
<img class="mb10" src="../../assets/img/icon_tongzhi.png" />
<span class="nav-item-name">通知公告</span>
</div>
</router-link>
<router-link to="/suggest">
<div class="nav-item flex flexc aic">
<img class="mb10" src="../../assets/img/icon_yijian.png" />
<span class="nav-item-name">意见建议</span>
</div>
</router-link>
<router-link to="/synopsis">
<div class="nav-item flex flexc aic">
<img class="mb10" src="../../assets/img/icon_jianjie.png" />
<span class="nav-item-name">中心简介</span>
</div>
</router-link>
<!-- 热门事项 -->
<div class="right-bottom flex flexc">
<div>
<img
height="45"
class="hot-matter-title"
src="../../assets/img/pic__hot_shixiang.png"
/>
</div>
<div
class="hot-matter-list flex1 mt10"
v-if="datumList && datumList.length"
>
<vue-seamless-scroll
:class-option="optionTop"
class="seamless-warp"
>
<div>
<div
class="hot-matter-item flex aic"
v-for="(v, i) in datumList"
:key="v.id"
>
<div class="flex aic jcc item-index">
<img v-if="i < 3" :src="checkTopImg(i)" />
<span v-else>{{ i + 1 }}.</span>
</div>
<p class="flex1" v-ellipsis>
{{ v }}
</p>
</div>
</div>
</vue-seamless-scroll>
</div>
<div v-else class="tac mt50 empty">暂无数据</div>
</div>
</div>
</div>
<!-- 底部数据展示 -->
<div class="footer flex jcb aic">
<div class="data-item flex flexc jcb aic">
<span class="data-name">入驻表单量</span>
<dir class="count-box">
<div class="data-item flex1 flex jcc aic">
<span class="data-name">入驻表单量：</span>
<div class="count-box">
<span class="data-count" v-format="'#,##0'">{{
homeInfo.datumCont
}}</span>
<span>份</span>
</dir>
</div>
</div>
<div class="line"></div>
<div class="data-item flex flexc jcb aic">
<span class="data-name">入驻事项量</span>
<dir class="count-box">
<div class="data-item flex1 flex jcc aic">
<span class="data-name">入驻事项量：</span>
<div class="count-box">
<span class="data-count" v-format="'#,##0'">{{
homeInfo.matterCont
}}</span>
<span>件</span>
</dir>
</div>
<div class="line"></div>
<div class="data-item flex flexc jcb aic">
<span class="data-name">本地打印量</span>
<dir class="count-box">
<span class="data-count" v-format="'#,##0'">{{
homeInfo.localPrint
}}</span>
<span>次</span>
</dir>
</div>
<div class="line"></div>
<div class="data-item flex flexc jcb aic">
<span class="data-name">在线提交量</span>
<dir class="count-box">
<span class="data-count" v-format="'#,##0'">{{
homeInfo.onlineSubmit
}}</span>
<span>次</span>
</dir>
</div>
</div>
<div class="line"></div>
</div>
</div>
</template>
......@@ -237,6 +180,13 @@ export default {
top2: require("../../assets/img/png_no.2.png"),
top3: require("../../assets/img/png_no.3.png"),
homeInfo: {}, // 首页数据
datumList: [
"多人有限公司新增申请单",
"城镇职工基本养老保险与城乡居民基本养老保险",
"营业执照变更",
"异地养老保险转移",
"个人社保明细打印",
],
baseTitle: process.env.VUE_APP_API_BASE_title,
};
},
......@@ -250,6 +200,15 @@ export default {
waitTime: 2500, // 单行停顿时间(singleHeight,waitTime)
};
},
optionTop() {
return {
direction: 1, // 向左滚动
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 4, // 开启无缝滚动的数据量 设置(数值<=页面展示数据条数不滚)(超过页面展示条数滚动)
openWatch: true, // 开启数据实时监控刷新dom
waitTime: 2500, // 单行停顿时间(singleHeight,waitTime)
};
},
},
created() {
this.getHomeInfo();
......@@ -351,6 +310,7 @@ export default {
.header {
width: 100%;
padding: 0px 40px;
margin-bottom: 100px;
}
.left {
.title {
......@@ -434,7 +394,7 @@ export default {
right: 5px;
top: 5px;
}
/deep/.el-input__inner {
:deep(.el-input__inner) {
width: 895px;
height: 72px;
padding-right: 200px;
......@@ -446,17 +406,11 @@ export default {
margin-top: 40px;
.ranking {
width: 700px;
height: 410px;
height: 495px;
background: linear-gradient(180deg, #fdefed, #fffdf8);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 16px;
border: 3px solid #ffffff;
position: relative;
.ranking-title {
position: absolute;
left: 3px;
top: 3px;
}
.tab-box {
width: 340px;
height: 50px;
......@@ -495,60 +449,50 @@ export default {
}
}
}
.nav {
width: 700px;
height: 425px;
.right {
width: 530px;
height: 495px;
.fill-btn {
width: 427px;
height: 212px;
width: 530px;
height: 170px;
background: url("../../assets/img/btn_kuaisu.png") no-repeat;
background-size: 100% 100%;
font-size: 50px;
font-weight: 500;
color: #ffffff;
border-radius: 16px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
width: 200px;
height: 300%;
left: -200px;
transform: rotateZ(-45deg);
background: linear-gradient(
to right,
transparent 1%,
rgba(255, 255, 255, 0.2) 30%,
rgba(255, 255, 255, 0.5) 60%,
transparent 100%
);
animation: shadow 6s infinite;
}
// &::after {
// &::before {
// content: "";
// display: inline-block;
// width: 100px;
// position: absolute;
// width: 200px;
// height: 300%;
// background-image: linear-gradient(
// left: -200px;
// transform: rotateZ(-45deg);
// background: linear-gradient(
// to right,
// rgba(255, 255, 255, 0.2),
// rgba(255, 255, 255, 0.5)
// transparent 1%,
// rgba(255, 255, 255, 0.2) 30%,
// rgba(255, 255, 255, 0.5) 60%,
// transparent 100%
// );
// transform: rotateZ(-45deg);
// position: absolute;
// left: -200px;
// animation: shadow 6s infinite;
// }
// .fill-btn-text1 {
// animation: ring 6s 20ms infinite;
// }
// .fill-btn-text2 {
// animation: ring 6s 60ms infinite;
// }
// .fill-btn-text3 {
// animation: ring 6s 105ms infinite;
// }
// .fill-btn-text4 {
// animation: ring 6s 145ms infinite;
// }
.fill-btn-text1 {
animation: ring 6s 20ms infinite;
}
.fill-btn-text2 {
animation: ring 6s 60ms infinite;
}
.fill-btn-text3 {
animation: ring 6s 105ms infinite;
}
.fill-btn-text4 {
animation: ring 6s 145ms infinite;
}
}
.empty-btn {
width: 284px;
......@@ -558,28 +502,43 @@ export default {
font-weight: 500;
color: #ffffff;
}
.nav-bottom {
width: 694px;
height: 190px;
background: linear-gradient(181deg, #e9f1fe, #ffffff);
.right-bottom {
width: 530px;
height: 304px;
background: #fff;
border: 3px solid #ffffff;
border-radius: 16px;
}
.nav-item {
width: 90px;
.nav-item-name {
font-size: 22px;
font-family: Source Han Sans CN;
color: #333333;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
.hot-matter-list {
height: 130px;
padding: 0px 14px;
.seamless-warp {
height: 100%;
overflow: hidden;
}
.hot-matter-item {
height: 45px;
margin-bottom: 4px;
line-height: 45px;
border-radius: 8px;
font-size: 22px;
color: var(--main-theme-color1);
&:nth-child(2n) {
background-color: #f6f9fe;
}
.item-index {
width: 50px;
}
}
}
}
}
}
.footer {
width: 80%;
margin-top: 44px;
height: 90px;
height: 66px;
.data-item {
min-width: 350px;
height: inherit;
}
.data-name {
......
sample-form-client-ui/admin/src/pages/showpage/Materials.vue 0 → 100644
View file @ 4ea2f228
<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
sample-form-client-ui/admin/src/pages/showpage/MatterList.vue 0 → 100644
View file @ 4ea2f228
<template>
<div>11</div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
sample-form-client-ui/admin/src/pages/showpage/ShowMaterials.vue 0 → 100644
View file @ 4ea2f228
<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
sample-form-client-ui/admin/src/pages/showpage/components/LeftMenus.vue 0 → 100644
View file @ 4ea2f228
<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
sample-form-client-ui/admin/src/router/index.js
View file @ 4ea2f228
......@@ -19,65 +19,26 @@ const routes = [
path: '/home',
component: () => import('@/pages/home/Home.vue'),
},
// 办事指南
{
path: '/guidance',
component: () => import('@/pages/guidance/Guidance.vue'),
},
// 办事指南详情
{
path: '/guidancedetails',
component: () => import('@/pages/guidance/GuidanceDetails.vue'),
},
// 通知公告
{
path: '/announcement',
component: () => import('@/pages/announcement/Announcement.vue'),
},
// 公告详情
{
path: '/announcementdetails',
component: () => import('@/pages/announcement/AnnouncementDetails.vue'),
},
// 意见建议
{
path: '/suggest',
component: () => import('@/pages/suggest/Suggest.vue'),
},
// 意见建议详情
{
path: '/suggestdetails',
component: () => import('@/pages/suggest/SuggestDetails.vue'),
},
// 我要建议
{
path: '/propound',
component: () => import('@/pages/suggest/Propound.vue'),
},
// 中心简介
{
path: '/synopsis',
component: () => import('@/pages/synopsis/Synopsis.vue'),
},
// 快速填单
// 快速查看
{
path: '/matterList',
component: () => import('@/pages/write/matterList.vue'),
},
// 打印空白材料
{
path: '/Print',
component: () => import('@/pages/Print/PrintEmptyMaterals.vue'),
component: () => import('@/pages/showpage/Materials.vue'),
},
// 快速搜索
{
path: '/searchpage',
component: () => import('@/pages/searchpage/SearchPage.vue'),
},
// 自助填单
// 事项列表
{
path: '/matterlist',
component: () => import('@/pages/showpage/MatterList.vue'),
},
// 材料展示
{
path: '/writepage',
component: () => import('@/pages/write/WritePage.vue'),
path: '/showmaterials',
component: () => import('@/pages/showpage/ShowMaterials.vue'),
},
]
......
sample-form-manager-ui/admin/.env.development
View file @ 4ea2f228
#开发环境
NODE_ENV = "development"
VUE_APP_API_BASE_URL=http://127.0.0.1:17215
VUE_APP_API_BASE_URL=http://192.168.0.98:17008
#VUE_APP_API_BASE_URL=http://192.168.0.98:11071/zwfw
#VUE_APP_API_BASE_URL=http://192.168.0.98:11023
#VUE_APP_API_BASE_URL=http://192.168.0.217:17311
\ No newline at end of file
sample-form-manager-ui/admin/.env.production
View file @ 4ea2f228
#生产环境
NODE_ENV = "production"
<<<<<<< HEAD
VUE_APP_API_BASE_URL=http://192.168.0.98:17008
=======
VUE_APP_API_BASE_URL=http://192.168.0.251:11099
>>>>>>> 261f9fabe9cdcb5ca4e16170db6b02e66a2d29c8
sample-form-manager-ui/admin/src/pages/login/login.vue
View file @ 4ea2f228
......@@ -3,61 +3,68 @@
<template>
<div class="page page-login flex flex-v">
<div class="form-wrap flex flex-1">
<el-form @submit.prevent='onSubmit' ref="form" :model="form" label-width="80px" size="small">
<el-form
@submit.prevent="onSubmit"
ref="form"
:model="form"
label-width="80px"
size="small"
>
<h1>样表管理平台</h1>
<el-form-item label="用户名">
<el-form-item label="用户名" prop="loginName">
<el-input v-model="form.loginName"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password" type='password'></el-input>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
<el-form-item size="large">
<el-button type="primary" native-type='submit' :loading='loading' @click='onSubmit'>登录</el-button>
<el-button
type="primary"
native-type="submit"
:loading="loading"
@click="onSubmit"
>登录</el-button
>
</el-form-item>
</el-form>
</div>
<div class="footer">
登陆 &copy; <a href="">信宏翔网络科技有限公司</a> 出品
</div>
</div>
</template>
<script>
import { login } from "@/api/login";
import local from "@/utils/local";
export default {
name: "login",
created() {
data() {
return {
originData: [],
loading: false,
redirect: this.$route.query.redirect || "/",
form: {
loginName: "",
password: "",
},
};
},
created() {},
methods: {
async login() {
let res = await login(this.form);
let { data, code } = res.data;
if (code === 1) {
if (data.token) {
let token = data.token
let token = data.token;
let siteIds = data.user.siteIds;
let siteid = siteIds.split(",")[0]
let siteid = siteIds.split(",")[0];
if (token) {
local.setLocal("writeToken", token);
local.setLocal("writeSiteId", siteid);
local.setLocal("sampleToken", token);
local.setLocal("sampleSiteId", siteid);
this.$router.push("/basicsset");
} else {
// this.$message.warning("跳转失败，请重新登录");
// setTimeout(() => {
// location.href = this.portal;
// }, 2000);
}
} else {
}
}
},
......@@ -67,7 +74,6 @@ export default {
this.$router.replace({
path: this.redirect,
});
},
loginFail(error) {
this.loading = false;
......@@ -77,7 +83,6 @@ export default {
onSubmit(e) {
e.preventDefault();
if (!this.form.loginName.length) {
return this.$message.warning("请输入用户名");
}
......@@ -88,17 +93,6 @@ export default {
this.login();
},
},
data() {
return {
originData: [],
loading: false,
redirect: this.$route.query.redirect || "/",
form: {
loginName: "",
password: "",
},
};
},
};
</script>
......
sample-form-manager-ui/admin/src/router/index.js
View file @ 4ea2f228
......@@ -16,10 +16,10 @@ const routes = [
name: '跳转页',
component: () => import('@/pages/jump/jump')
},
// {
// path: '/',
// redirect: '/basicsset',
// },
{
path: '/',
redirect: '/login',
},
{
path: '/login',
name: '登录页',
......
sample-form-manager-ui/admin/src/utils/request.js
View file @ 4ea2f228
......@@ -12,7 +12,7 @@ axios.defaults.timeout = 10 * 1000
axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL
// 请求拦截
axios.interceptors.request.use(config => {
let token = local.getLocal('writeToken')
let token = local.getLocal('sampleToken')
if (token) {
config.headers.Authorization = token
config.headers.Authtoken = token
......
sample-form-manager-ui/admin/src/utils/validate.js
View file @ 4ea2f228
......@@ -32,7 +32,7 @@ export const changeAccount = (rule, value, callback) => {
if (!value) {
callback(new Error("请输入用户名"));
} else if (!/^[a-zA-Z0-9_-]{4,16}$/.test(value)) {
callback(new Error("4到12位(a-z,A-Z,0-9,下划线,中横线)"));
callback(new Error("4到16位(a-z,A-Z,0-9,下划线,中横线)"));
} else {
callback();
}
......@@ -43,7 +43,7 @@ export const changePassWord = (rule, value, callback) => {
if (!value) {
callback(new Error("请输入密码"));
} else if (!/^[a-zA-Z0-9_-]{5,18}$/.test(value)) {
callback(new Error("5到9位(a-z,A-Z,0-9,下划线,中横线)"));
callback(new Error("5到18位(a-z,A-Z,0-9,下划线,中横线)"));
} else {
callback();
}
......
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