Commit 7abc4239 authored by “yiyousong”'s avatar “yiyousong”

feat: 添加文件夹页面

parent d6ca78da
......@@ -66,7 +66,7 @@ export default {
},
serviceInfo: {
homeUrl: "http://192.168.0.24:8080/#/",
serverUrl: "http://112.19.80.237:11078/",
serverUrl: "http://192.168.0.98:11078/",
},
// devicenum: "18-93-7F-C0-AD-B5",
devicenum: "B8-2D-28-22-54-6C",
......
......@@ -47,6 +47,16 @@ export const getSampleformMatterList = (data) => {
});
};
// 查询事项详情
export const getSampleformMatterInfo = (params) => {
let baseUrl = local.getLocal("serverUrl");
return request({
url: `${baseUrl}sampleform/matter/interinfo`,
method: "get",
params,
});
};
// 查询设备关联事项列表
export const getDeviceMatterList = (data) => {
let baseUrl = local.getLocal("serverUrl");
......@@ -77,6 +87,16 @@ export const getMaterialsList = (data) => {
});
};
// 获取事项文件夹(分类)列表
export const getMatterFolderList = (data) => {
let baseUrl = local.getLocal("serverUrl");
return request({
url: `${baseUrl}sampleform/matter/category/list`,
method: "post",
data,
});
};
// 表单合成
export const mergeFormToDocx = (data) => {
let baseUrl = local.getLocal("serverUrl");
......
......@@ -47,7 +47,7 @@
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3737952" target="_blank" class="nav-more">查看项目</a>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4136233" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
......@@ -55,21 +55,9 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe63e;</span>
<div class="name">火焰</div>
<div class="code-name">&amp;#xe63e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xec1e;</span>
<div class="name"></div>
<div class="code-name">&amp;#xec1e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe606;</span>
<div class="name">首页</div>
<div class="code-name">&amp;#xe606;</div>
<span class="icon iconfont">&#xeac5;</span>
<div class="name">24gf-folderOpen</div>
<div class="code-name">&amp;#xeac5;</div>
</li>
</ul>
......@@ -90,9 +78,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1669186016573') format('woff2'),
url('iconfont.woff?t=1669186016573') format('woff'),
url('iconfont.ttf?t=1669186016573') format('truetype');
src: url('iconfont.woff2?t=1713341009276') format('woff2'),
url('iconfont.woff?t=1713341009276') format('woff'),
url('iconfont.ttf?t=1713341009276') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
......@@ -119,29 +107,11 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-hot"></span>
<div class="name">
火焰
</div>
<div class="code-name">.icon-hot
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dot"></span>
<div class="name">
</div>
<div class="code-name">.icon-dot
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-home"></span>
<span class="icon iconfont icon-folder"></span>
<div class="name">
首页
24gf-folderOpen
</div>
<div class="code-name">.icon-home
<div class="code-name">.icon-folder
</div>
</li>
......@@ -174,26 +144,10 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-hot"></use>
</svg>
<div class="name">火焰</div>
<div class="code-name">#icon-hot</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dot"></use>
</svg>
<div class="name"></div>
<div class="code-name">#icon-dot</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-home"></use>
<use xlink:href="#icon-folder"></use>
</svg>
<div class="name">首页</div>
<div class="code-name">#icon-home</div>
<div class="name">24gf-folderOpen</div>
<div class="code-name">#icon-folder</div>
</li>
</ul>
......
@font-face {
font-family: "iconfont"; /* Project id 3737952 */
src: url('iconfont.woff2?t=1669186016573') format('woff2'),
url('iconfont.woff?t=1669186016573') format('woff'),
url('iconfont.ttf?t=1669186016573') format('truetype');
font-family: "iconfont"; /* Project id 4136233 */
src: url('iconfont.woff2?t=1713341009276') format('woff2'),
url('iconfont.woff?t=1713341009276') format('woff'),
url('iconfont.ttf?t=1713341009276') format('truetype');
}
.iconfont {
......@@ -13,15 +13,7 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-hot:before {
content: "\e63e";
}
.icon-dot:before {
content: "\ec1e";
}
.icon-home:before {
content: "\e606";
.icon-folder:before {
content: "\eac5";
}
window._iconfont_svg_string_3737952='<svg><symbol id="icon-hot" viewBox="0 0 1024 1024"><path d="M768 332.8l-76.8 76.8c0 0 0-307.2-256-409.6 0 0-25.6 281.6-153.6 384s-384 409.6 128 640c0 0-256-281.6 76.8-486.4 0 0-25.6 102.4 102.4 204.8s0 281.6 0 281.6S1203.2 870.4 768 332.8z" ></path></symbol><symbol id="icon-dot" viewBox="0 0 1024 1024"><path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" ></path></symbol><symbol id="icon-home" viewBox="0 0 1114 1024"><path d="M993.886268 442.729412V963.764706a60.235294 60.235294 0 0 1-60.235294 60.235294h-231.755294a60.235294 60.235294 0 0 1-60.235294-60.235294v-241.664h-176.609882V963.764706a60.235294 60.235294 0 0 1-60.235295 60.235294H180.709798a60.235294 60.235294 0 0 1-60.235294-60.235294V445.44l-70.987295 59.512471a30.117647 30.117647 0 1 1-38.731294-46.140236l538.744471-451.764706a30.117647 30.117647 0 0 1 39.183059 0.421647l515.403294 451.764706a30.117647 30.117647 0 0 1-39.695059 45.296942L993.886268 442.729412z m-60.205176-52.766118L568.414268 69.812706 180.709798 394.872471V963.764706h224.105411v-241.664a60.235294 60.235294 0 0 1 60.235295-60.235294h176.609882a60.235294 60.235294 0 0 1 60.235294 60.235294V963.764706H933.650974V391.529412l0.030118-1.566118z" fill="#7F7F7F" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,a,d,c,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_3737952,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(a=o,d=n.document,c=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,l())})}function l(){c||(c=!0,a())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);
\ No newline at end of file
window._iconfont_svg_string_4136233='<svg><symbol id="icon-folder" viewBox="0 0 1024 1024"><path d="M81.16 412.073333L0 709.653333V138.666667a53.393333 53.393333 0 0 1 53.333333-53.333334h253.413334a52.986667 52.986667 0 0 1 37.713333 15.62l109.253333 109.253334a10.573333 10.573333 0 0 0 7.54 3.126666H842.666667a53.393333 53.393333 0 0 1 53.333333 53.333334v74.666666H173.773333a96.2 96.2 0 0 0-92.613333 70.74z m922-7.113333a52.933333 52.933333 0 0 0-42.386667-20.96H173.773333a53.453333 53.453333 0 0 0-51.453333 39.333333L11.773333 828.666667a53.333333 53.333333 0 0 0 51.453334 67.333333h787a53.453333 53.453333 0 0 0 51.453333-39.333333l110.546667-405.333334a52.953333 52.953333 0 0 0-9.073334-46.373333z" fill="#5C5C66" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,a,d,c,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4136233,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(a=o,d=n.document,c=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,l())})}function l(){c||(c=!0,a())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);
\ No newline at end of file
{
"id": "3737952",
"name": "zzdy",
"id": "4136233",
"name": "填单-样表",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "1221891",
"name": "火焰",
"font_class": "hot",
"unicode": "e63e",
"unicode_decimal": 58942
},
{
"icon_id": "4933869",
"name": "点",
"font_class": "dot",
"unicode": "ec1e",
"unicode_decimal": 60446
},
{
"icon_id": "5849190",
"name": "首页",
"font_class": "home",
"unicode": "e606",
"unicode_decimal": 58886
"icon_id": "7594875",
"name": "24gf-folderOpen",
"font_class": "folder",
"unicode": "eac5",
"unicode_decimal": 60101
}
]
}
......@@ -105,6 +105,7 @@ export default {
matterName: this.matterInfo.matterName,
matterId: row.matterId,
id: row.id,
categoryId: row.categoryId || "",
},
});
},
......
<template>
<div class="search-box" :style="{ width }">
<el-input
placeholder="输入事项表单关键词或排队编号查询"
:placeholder="placeholder"
:value="value"
@keyup.native.enter="handleSearch"
@input="changeInput"
......@@ -54,6 +54,10 @@ export default {
Number,
default: "",
},
placeholder: {
type: String,
default: "输入事项表单关键词或排队编号查询",
},
},
data() {
return {};
......
<template>
<div class="page-turner" v-if="!hideOnSinglePage">
<div
:class="['btn-prev', { disabled: current == 1 }]"
@click="changePage(-1)"
>
<span> 上一页 </span>
</div>
<div class="page-info">
<div>
当前 <span>{{ current }} / {{ sizeTotal }}</span>
</div>
<div>
<span>{{ total }}</span> 条信息
</div>
</div>
<div
:class="[
'btn-next',
{ disabled: current == sizeTotal || this.total == 0 },
]"
@click="changePage(1)"
>
<span> 下一页 </span>
</div>
</div>
</template>
<script>
export default {
props: {
current: {
type: Number,
required: true,
default: 0,
},
size: {
type: Number,
required: true,
default: 0,
},
total: {
type: Number,
required: true,
default: 0,
},
hideOnSinglePage: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {};
},
computed: {
sizeTotal() {
return Math.ceil(this.total / this.size);
},
},
methods: {
changePage(cur) {
if (
(this.current == 1 && cur == -1) ||
(this.current == this.sizeTotal && cur == 1) ||
this.total == 0
) {
return;
}
this.$emit("change", this.current + cur);
},
},
};
</script>
<style lang="less" scoped>
.page-turner {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.btn-prev,
.btn-next {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
width: 150px;
height: 44px;
border: 1px solid var(--main-theme-color);
border-radius: 8px;
color: var(--main-theme-color);
cursor: pointer;
span {
font-size: 20px;
}
}
.page-info {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
gap: 20px;
color: #353535;
font-size: 18px;
span {
color: var(--main-theme-color);
}
}
.disabled {
border-color: #c0c4cc;
color: #353535;
cursor: no-drop;
}
</style>
......@@ -365,10 +365,12 @@ export default {
},
// 查看材料列表
checkMatter(row) {
let time = this.$moment().format("YYYY-MM-DD HH:mm:ss");
this.SET_operTime(time);
this.matterInfo = row;
this.visible = true;
this.$router.push({
path: "/matterify",
query: {
matterId: row.id,
},
});
},
// 查看材料
checkMaterial(row) {
......@@ -378,6 +380,7 @@ export default {
query: {
matterId: row.matterId,
id: row.id,
categoryId: row.categoryId || "",
},
});
},
......
......@@ -12,7 +12,7 @@
>份表单 -->
</div>
<SearchBox
slot="search"
slot="search-right"
width="834px"
@click="handleSearch"
v-model="searchVal"
......
<template>
<div>11</div>
<div class="search-page 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">{{ total + 1 }}</span
>个文件夹
</div>
<SearchBox
slot="search-right"
width="834px"
placeholder="输入文件夹关键字搜索"
@click="handleSearch"
v-model="searchVal"
></SearchBox>
</PageTop>
<!-- 事项文件夹 -->
<div class="folder-box flex1">
<div class="folder-list">
<div class="folder-item" @click="handleCheck({})">
<div class="folder-img-box flex aic jcc">
<i class="iconfont icon-folder"></i>
</div>
<p class="folder-name tac">所有</p>
</div>
<div
class="folder-item"
v-for="v in folderList"
:key="v.id"
@click="handleCheck(v)"
>
<div class="folder-img-box flex aic jcc">
<i class="iconfont icon-folder"></i>
</div>
<p class="folder-name tac">{{ v.categoryName }}</p>
</div>
</div>
<!-- <YEmpty v-else width="200" text="暂无数据"></YEmpty> -->
<!-- 分页 -->
<div class="tac">
<el-pagination
prev-text="上一页"
next-text="下一页"
layout="prev,next"
:total="total"
hide-on-single-page
:current-page="current"
:page-size="size"
@current-change="changePage"
>
</el-pagination>
</div>
</div>
</div>
<!-- 材料列表 -->
<MateralsList
:matterInfo="matterInfo"
:visible.sync="visible"
></MateralsList>
</div>
</template>
<script>
export default {};
import Header from "@/components/Header.vue";
import PageTop from "@/components/PageTop.vue";
import SearchBox from "@/components/SearchBox.vue";
import MateralsList from "@/components/MateralsList.vue";
import YEmpty from "@/components/YEmpty.vue";
import {
getMatterFolderList,
getMaterialsList,
getSampleformMatterInfo,
} from "@/api";
import { mapMutations } from "vuex";
export default {
components: {
Header,
PageTop,
SearchBox,
MateralsList,
YEmpty,
},
data() {
return {
row: 4,
searchVal: "",
total: 0,
current: 1,
size: 16,
matterInfo: {},
folderList: [],
visible: false,
};
},
created() {
this.getMatterFolderList();
},
watch: {
searchVal(newVal) {
if (newVal === "") {
this.current = 1;
this.getMatterFolderList();
}
},
},
methods: {
...mapMutations(["SET_operTime"]),
// 获取事项分类
async getMatterFolderList() {
let res = await getMatterFolderList({
page: this.current,
size: this.size,
matterId: this.$route.query.matterId,
categoryName: `%${this.searchVal}%`,
});
if (res.data.code == 1) {
let { data, total } = res.data.data;
this.total = total;
this.folderList = data;
}
},
// 搜索
handleSearch() {
this.current = 1;
this.getMatterFolderList();
},
// 分页
changePage(cur) {
this.current = cur;
this.getMatterFolderList();
},
// 查看
async handleCheck(row) {
let res = await getSampleformMatterInfo({
id: this.$route.query.matterId,
});
if (res.data.code == 1) {
let { data } = res.data;
let result = await getMaterialsList({
categoryId: row.id,
matterId: this.$route.query.matterId,
page: 1,
size: -1,
});
if (result.data.code == 1) {
data.matterDatumList = result.data.data.data;
this.matterInfo = data;
let time = this.$moment().format("YYYY-MM-DD HH:mm:ss");
this.SET_operTime(time);
this.matterInfo = data;
this.visible = true;
}
}
},
},
};
</script>
<style lang="less" scoped>
.search-page {
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
.main {
padding: 0px 40px;
padding-bottom: 30px;
.data-count {
color: #ff0000;
}
}
.folder-box {
width: 1840px;
height: 800px;
padding: 30px;
padding-bottom: 10px;
background: #ffffff;
border-radius: 16px;
position: relative;
.empty {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.folder-list {
display: flex;
flex-wrap: wrap;
gap: 40px 115px;
}
.folder-item {
display: flex;
flex-direction: column;
gap: 20px;
cursor: pointer;
.folder-img-box {
width: 134px;
height: 129px;
background-color: rgba(250, 147, 45, 0.1);
border-radius: 16px;
i {
font-size: 90px;
color: #fca134;
}
}
.folder-name {
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 24px;
color: #333333;
}
}
}
: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-color);
line-height: 28px;
span {
font-size: 28px;
}
}
</style>
......@@ -89,6 +89,7 @@ import PageTop from "@/components/PageTop.vue";
import SearchBox from "@/components/SearchBox.vue";
import MateralsList from "../../components/MateralsList.vue";
import YEmpty from "@/components/YEmpty.vue";
import YPagination from "@/components/YPagination.vue";
import { getDeviceMatterList } from "@/api";
import { mapMutations } from "vuex";
export default {
......@@ -99,6 +100,7 @@ export default {
SearchBox,
MateralsList,
YEmpty,
YPagination,
},
data() {
return {
......@@ -156,10 +158,16 @@ export default {
this.getDeviceMatterList();
},
handleCheck(row) {
let time = this.$moment().format("YYYY-MM-DD HH:mm:ss");
this.SET_operTime(time);
this.matterInfo = row;
this.visible = true;
// let time = this.$moment().format("YYYY-MM-DD HH:mm:ss");
// this.SET_operTime(time);
// this.matterInfo = row;
// this.visible = true;
this.$router.push({
path: "/matterify",
query: {
matterId: row.matterId,
},
});
},
// 重置搜索
// handleClear() {
......
......@@ -173,6 +173,7 @@ export default {
matterName: "", // 事项名称
matterId: this.$route.query.matterId, // 事项id
materailsId: this.$route.query.id, // 材料id
categoryId: this.$route.query.categoryId, // 分类id
materailsList: [],
active: 0,
scale: 100,
......@@ -202,6 +203,7 @@ export default {
page: 1,
size: -1,
matterId: this.matterId,
categoryId: this.categoryId,
});
let { data } = res.data.data;
data.forEach((v) => {
......
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