Commit 960439b5 authored by “yiyousong”'s avatar “yiyousong”

feat:重构皮肤管理板块

parent a13d47f0
<template>
<div class="business flex_row p15">
<div class="business p15">
<sitetree @getSite="handleClick" @clickArea="clickArea" />
<!-- <div class="line"></div> -->
<div class="right ff">
<a-tabs :default-active-key="1" @change="handleChange">
<a-tab-pane forceRender :key="1" tab="业务管理">
......@@ -66,18 +64,14 @@ export default {
// 切开tab
handleChange(key) {
if (this.siteId) {
console.log(this.siteId, key);
switch (key) {
case 1:
console.log(1);
this.$refs.BusinessTabs1.getSiteInfo(this.siteId);
break;
case 2:
console.log(2);
this.$refs.BusinessTabs2.getSiteInfo(this.siteId);
break;
case 3:
console.log(3);
this.$refs.BusinessTabs3.getSiteInfo(this.siteId);
break;
}
......@@ -91,25 +85,13 @@ export default {
.business {
width: 100%;
height: 89vh;
// .line {
// width: 18px;
// background-color: #f0f2f5;
// margin-top: -20px;
// position: relative;
// &::after {
// content: "";
// width: 15px;
// height: 20px;
// background-color: #f0f2f5;
// position: absolute;
// bottom: -20px;
// }
// }
display: flex;
/deep/.ant-tabs-nav-container {
border-bottom: 1px solid rgb(224, 224, 224) !important;
}
.right {
width: 100%;
width: 85%;
position: relative;
margin-left: 18px;
&::after {
......
......@@ -3,8 +3,21 @@
<div class="left">
<div class="header">
<h3 class="titel">站点业务列表</h3>
<a-button type="danger" @click="handleDelAll"> 批量移除 </a-button>
<a-button class="add-btn" @click="showModal"> 新增业务 </a-button>
<div class="control">
<div>
<a-button type="danger" @click="handleDelAll"> 批量移除 </a-button>
<a-button class="add-btn" @click="showModal"> 新增业务 </a-button>
</div>
<div class="business-control">
<a-input-search
placeholder="请输入业务名称搜索"
enter-button="搜索"
v-model="serchSiteBusiness"
@search="onSearchLeft"
allowClear
/>
</div>
</div>
</div>
<div class="table-content">
<!-- 表格 -->
......@@ -253,6 +266,7 @@ export default {
serchData: "",
siteId: "", // 站点id
businessIds: "", // 业务id
serchSiteBusiness: "", // 左边站点业务名称搜索
};
},
created() {},
......@@ -286,6 +300,7 @@ export default {
page: this.leftCurrent,
size: this.leftSize,
siteId: this.siteId,
businessName: `%${this.serchSiteBusiness}%`,
...search,
});
let { code, data } = res.data;
......@@ -295,13 +310,13 @@ export default {
this.leftLoading = false;
}
},
// 获取业务列表
// 获取一体化业务列表
async getBusinessListData() {
this.rightLoading = true;
let res = await getBusinessList({
page: this.rightCurrent,
size: this.rightSize,
name: this.serchData,
name: `%${this.serchData}%`,
businessType: 0,
});
let { code, data } = res.data;
......@@ -312,6 +327,10 @@ export default {
this.rightLoading = false;
}
},
onSearchLeft() {
this.leftCurrent = 1;
this.getSiteBusinessData();
},
// 切换业务类型
// onChangeBusiness(val) {
// this.businessType = val.target.value;
......
......@@ -192,12 +192,12 @@
<script>
import {
getSiteMatterList,
getMatterList,
getMatterListSubList,
addMatterToSite,
delSiteMatter,
delMatter,
} from "@/services/matter";
import { getDeptList } from "@/services/dept";
// import { getDeptList } from "@/services/dept";
// import local from "@/utils/local";
const leftColumns = [
{
......@@ -325,14 +325,14 @@ export default {
this.matterSiteData = data;
this.leftLoading = false;
},
// 获取事项列表
// 获取一体化事项列表
async getMatterListData(search = {}) {
this.rightLoading = true;
let res = await getMatterList({
let res = await getMatterListSubList({
siteId: this.siteId,
page: this.rightCurrent,
size: this.rightSize,
matterName: `%${this.searchRightVal}%`,
source: 0,
matterName: this.searchRightVal,
...search,
});
let { pageInfo, data } = res.data.data;
......@@ -345,11 +345,11 @@ export default {
this.rightLoading = false;
},
// 获取部门列表
async getDeptData() {
let res = await getDeptList({ siteId: this.siteId });
let { data } = res.data.data;
this.deptList = data;
},
// async getDeptData() {
// let res = await getDeptList({ siteId: this.siteId });
// let { data } = res.data.data;
// this.deptList = data;
// },
// 左边搜索
onSearchLeft() {
this.leftCurrent = 1;
......
......@@ -46,7 +46,10 @@
<a-row>
<a-col :span="12">
<a-form-model-item label="联系电话" prop="deptTelphone">
<a-input v-model="form.deptTelphone" placeholder="请输入座机电话" />
<a-input
v-model="form.deptTelphone"
placeholder="请输入座机电话:区号-电话号码"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
......
......@@ -168,6 +168,7 @@
:visible="visibleWork"
@cancel="visibleWork = false"
width="600px"
:maskClosable="false"
>
<template slot="footer">
<a-button @click="handleReset">重置</a-button>
......@@ -604,8 +605,6 @@ export default {
this.$message.success(msg);
this.$refs.formData.resetFields();
this.visibleWork = false;
} else {
this.$message.error(msg);
}
}
});
......@@ -617,7 +616,6 @@ export default {
// 新增窗口事项
addWindowMatter(data) {
this.isShow = true;
console.log(data);
let obj = {
windowId: data.id,
windowName: data.name,
......@@ -810,7 +808,7 @@ export default {
}
}
/deep/.ant-modal-body {
max-height: 400px;
max-height: 600px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
......
......@@ -5,33 +5,23 @@
:id="conponentsId"
class="call-out-skin-across"
:style="{
backgroundImage: filterImg('背景大图')
? `url(${api + filterImg('背景大图')})`
: '',
background: filterItem('1', 0),
}"
>
<!-- 头部 -->
<div class="header flex jcb">
<div class="header-title flex aic">
<img src="../../../../assets/img/logo.png" />
<h1 :style="{ color: filterColor('标题颜色') }">政务服务中心</h1>
<h1 :style="{ color: filterItem('2', 0) }">政务服务中心</h1>
</div>
<div class="flex header-right jcb">
<p>
<span :style="{ color: filterColor('数据标题') }"
>今日评价次数:</span
>
<span class="count" :style="{ color: filterColor('数据颜色') }"
>66</span
>
<span :style="{ color: filterItem('5', 0) }">今日评价次数:</span>
<span class="count" :style="{ color: filterItem('6', 0) }">66</span>
</p>
<p>
<span :style="{ color: filterColor('数据标题') }"
>累计评价次数:</span
>
<span class="count" :style="{ color: filterColor('数据颜色') }"
>66</span
>
<span :style="{ color: filterItem('5', 0) }">累计评价次数:</span>
<span class="count" :style="{ color: filterItem('6', 0) }">66</span>
</p>
</div>
</div>
......@@ -40,9 +30,7 @@
<div
class="left flex flexc jca aic"
:style="{
backgroundImage: filterImg('信息面板')
? `url(${api + filterImg('信息面板')})`
: '',
background: filterItem('10', 0),
}"
>
<div class="left-info flex aic">
......@@ -64,48 +52,32 @@
<div class="footer flex jcb aic">
<div
class="footer-btn flex flexc jcc"
:class="{ border: !filterItem('4', 0) }"
:style="{
backgroundImage: filterImg('办事指南')
? `url(${api + filterImg('办事指南')})`
: '',
background: filterItem('4', 0),
}"
>
<p>办事指南</p>
<span>Processing matters</span>
</div>
></div>
<div
class="footer-btn flex flexc jcc"
:class="{ border: !filterItem('4', 1) }"
:style="{
backgroundImage: filterImg('我要评价')
? `url(${api + filterImg('我要评价')})`
: '',
background: filterItem('4', 1),
}"
>
<p>我要评价</p>
<span>Processing matters</span>
</div>
></div>
<div
class="footer-btn flex flexc jcc"
:class="{ border: !filterItem('4', 2) }"
:style="{
backgroundImage: filterImg('投诉建议')
? `url(${api + filterImg('投诉建议')})`
: '',
background: filterItem('4', 2),
}"
>
<p>投诉建议</p>
<span>Processing matters</span>
</div>
></div>
<div
class="footer-btn flex flexc jcc"
:class="{ border: !filterItem('4', 3) }"
:style="{
backgroundImage: filterImg('廉政风险')
? `url(${api + filterImg('廉政风险')})`
: '',
background: filterItem('4', 3),
}"
>
<p>廉政风险</p>
<span>Processing matters</span>
</div>
></div>
</div>
</div>
</div>
......@@ -139,32 +111,58 @@ export default {
},
methods: {
// 过滤图片
filterImg(val) {
let url = "";
this.skinFieldList
.filter((v) => {
return v.fieldType === "2";
})
.forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) {
url = v.fieldValue;
}
});
return url;
// filterImg(val) {
// let url = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "2";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// url = v.fieldValue;
// }
// });
// return url;
// },
// // 过滤颜色
// filterColor(val) {
// let str = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "1";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// str = v.fieldValue;
// }
// });
// return str;
// },
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
return v.remark == type;
});
if (arr.length) {
return this.filterValueType(arr[index]);
} else {
return "";
}
},
// 过滤颜色
filterColor(val) {
let str = "";
this.skinFieldList
.filter((v) => {
return v.fieldType === "1";
})
.forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) {
str = v.fieldValue;
}
});
return str;
// 过滤属性值类型
filterValueType(info = {}) {
let value = "";
if (info.fieldType !== "" && info.fieldType === "1" && info.fieldValue) {
value = info.fieldValue;
} else if (
info.fieldType !== "" &&
info.fieldType === "2" &&
info.fieldValue
) {
value = `url(${this.api + info.fieldValue})`;
}
return value;
},
},
};
......@@ -176,9 +174,9 @@ export default {
height: 562.5px;
padding: 20px;
background-image: linear-gradient(#26c5ff, #2c66ff);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-repeat: no-repeat !important ;
background-position: center !important ;
background-size: cover !important ;
.header {
color: #fff;
.header-title {
......@@ -245,9 +243,11 @@ export default {
width: 22%;
height: 120px;
padding: 10px;
background-color: #fff;
border-radius: 4px;
background-size: 100% 100%;
background-size: 100% 100% !important;
}
.border {
border: 1px dashed #ececec;
}
p {
margin: 0px;
......
......@@ -5,18 +5,19 @@
:id="conponentsId"
class="call-out-skin-across"
:style="{
backgroundImage: filterImg('背景大图')
? `url(${api + filterImg('背景大图')})`
: '',
background: filterItem('1', 0),
}"
>
<!-- 头部 -->
<div class="header flex jcb">
<div class="header-title flex aic">
<img src="../../../../assets/img/logo.png" />
<h1 :style="{ color: filterColor('标题颜色') }">政务服务中心</h1>
<h1 :style="{ color: filterItem('2', 0) }">政务服务中心</h1>
</div>
<div class="flex header-right jcb">
<div
class="flex header-right jcb"
:style="{ color: filterItem('3', 0) }"
>
<div class="flex flexc aic jcc">
<a-icon type="setting" />
<span>设置</span>
......@@ -33,7 +34,12 @@
</div>
<!-- 主体 -->
<div class="main flex">
<div class="left flex flexc aic jcc">
<div
class="left flex flexc aic jcc"
:style="{
background: filterItem('10', 0),
}"
>
<img src="../../../../assets/img/peopo.jpeg" />
<p>姓名:XXX</p>
<p>部门:审批部</p>
......@@ -41,9 +47,10 @@
<div
class="left-btn"
:style="{
backgroundImage: `linear-gradient(${filterColor(
'辅助色'
)}, ${filterColor('主题色')})`,
backgroundImage: `linear-gradient(${filterItem(
'8',
0
)}, ${filterItem('7', 0)})`,
}"
>
回归
......@@ -52,50 +59,44 @@
<div class="right flex1 flex flexwrap jcb acb">
<div
class="right-item"
:class="{ border: !filterItem('4', 0) }"
:style="{
backgroundImage: filterImg('弃号')
? `url(${api + filterImg('弃号')})`
: `url(${require('../../../../assets/img/qh.png')})`,
background: filterItem('4', 0),
}"
></div>
<div
class="right-item"
:class="{ border: !filterItem('4', 1) }"
:style="{
backgroundImage: filterImg('重新呼叫')
? `url(${api + filterImg('重新呼叫')})`
: `url(${require('../../../../assets/img/cxhj.png')})`,
background: filterItem('4', 1),
}"
></div>
<div
class="right-item"
:class="{ border: !filterItem('4', 2) }"
:style="{
backgroundImage: filterImg('呼叫转移')
? `url(${api + filterImg('呼叫转移')})`
: `url(${require('../../../../assets/img/hjzy.png')})`,
background: filterItem('4', 2),
}"
></div>
<div
class="right-item"
:class="{ border: !filterItem('4', 3) }"
:style="{
backgroundImage: filterImg('选叫')
? `url(${api + filterImg('选叫')})`
: `url(${require('../../../../assets/img/xj.png')})`,
background: filterItem('4', 3),
}"
></div>
<div
class="right-item"
:class="{ border: !filterItem('4', 4) }"
:style="{
backgroundImage: filterImg('评价')
? `url(${api + filterImg('评价')})`
: `url(${require('../../../../assets/img/pj.png')})`,
background: filterItem('4', 4),
}"
></div>
<div
class="right-item"
:class="{ border: !filterItem('4', 5) }"
:style="{
backgroundImage: filterImg('下一位')
? `url(${api + filterImg('下一位')})`
: `url(${require('../../../../assets/img/xyw.png')})`,
background: filterItem('4', 5),
}"
></div>
</div>
......@@ -103,36 +104,38 @@
<!-- 尾部 -->
<div class="footer flex jcc aic">
<div class="footer-item">
<p>当前窗口</p>
<p class="footer-data" :style="{ color: filterColor('主题色') }">
<p :style="{ color: filterItem('5', 0) }">当前窗口</p>
<p class="footer-data" :style="{ color: filterItem('6', 0) }">
A区16号
</p>
</div>
<div
class="line"
:style="{
backgroundImage: `linear-gradient(to bottom,#ccc,${filterColor(
'主题色'
)} 45%,${filterColor('主题色')} 65%,#ccc 100% )`,
backgroundImage: `linear-gradient(to bottom,#ccc,${filterItem(
'6',
0
)} 45%,${filterItem('6', 0)} 65%,#ccc 100% )`,
}"
></div>
<div class="footer-item">
<p>当前办理</p>
<p class="footer-data" :style="{ color: filterColor('主题色') }">
<p :style="{ color: filterItem('5', 0) }">当前办理</p>
<p class="footer-data" :style="{ color: filterItem('6', 0) }">
A0012
</p>
</div>
<div
class="line"
:style="{
backgroundImage: `linear-gradient(to bottom,#ccc,${filterColor(
'主题色'
)} 45%,${filterColor('主题色')} 65%,#ccc 100% )`,
backgroundImage: `linear-gradient(to bottom,#ccc,${filterItem(
'6',
0
)} 45%,${filterItem('6', 0)} 65%,#ccc 100% )`,
}"
></div>
<div class="footer-item">
<p>等待办理</p>
<p class="footer-data" :style="{ color: filterColor('主题色') }">
<p :style="{ color: filterItem('5', 0) }">等待办理</p>
<p class="footer-data" :style="{ color: filterItem('6', 0) }">
<span>160</span>
<span>120</span>
</p>
......@@ -140,16 +143,15 @@
<div
class="line"
:style="{
backgroundImage: `linear-gradient(to bottom,#ccc,${filterColor(
'主题色'
)} 45%,${filterColor('主题色')} 65%,#ccc 100% )`,
backgroundImage: `linear-gradient(to bottom,#ccc,${filterItem(
'6',
0
)} 45%,${filterItem('6', 0)} 65%,#ccc 100% )`,
}"
></div>
<div class="footer-item">
<p>当天办理</p>
<p class="footer-data" :style="{ color: filterColor('主题色') }">
16
</p>
<p :style="{ color: filterItem('5', 0) }">当天办理</p>
<p class="footer-data" :style="{ color: filterItem('6', 0) }">16</p>
</div>
</div>
</div>
......@@ -184,32 +186,58 @@ export default {
},
methods: {
// 过滤图片
filterImg(val) {
let url = "";
this.skinFieldList
.filter((v) => {
return v.fieldType === "2";
})
.forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) {
url = v.fieldValue;
}
});
return url;
// filterImg(val) {
// let url = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "2";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// url = v.fieldValue;
// }
// });
// return url;
// },
// // 过滤颜色
// filterColor(val) {
// let str = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "1";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// str = v.fieldValue;
// }
// });
// return str;
// },
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
return v.remark == type;
});
if (arr.length) {
return this.filterValueType(arr[index]);
} else {
return "";
}
},
// 过滤颜色
filterColor(val) {
let str = "";
this.skinFieldList
.filter((v) => {
return v.fieldType === "1";
})
.forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) {
str = v.fieldValue;
}
});
return str;
// 过滤属性值类型
filterValueType(info = {}) {
let value = "";
if (info.fieldType !== "" && info.fieldType === "1" && info.fieldValue) {
value = info.fieldValue;
} else if (
info.fieldType !== "" &&
info.fieldType === "2" &&
info.fieldValue
) {
value = `url(${this.api + info.fieldValue})`;
}
return value;
},
},
};
......@@ -221,9 +249,9 @@ export default {
height: 562.5px;
padding: 20px;
background-image: linear-gradient(#26c5ff, #2c66ff);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: cover !important;
.header {
.header-title {
h1 {
......@@ -267,9 +295,12 @@ export default {
width: 49%;
height: 100px;
border-radius: 6px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% 100% !important;
}
.border {
border: 1px dashed #ececec;
}
}
}
......
......@@ -5,18 +5,16 @@
class="centralize-across"
:id="conponentsId"
:style="{
backgroundImage: filterImg('背景大图')
? `url(${api + filterImg('背景大图')})`
: '',
background: filterItem('1', 0),
}"
>
<!-- 头部 -->
<div class="header flex aic jcb">
<div class="title flex aic">
<img src="../../../../assets/img/logo.png" />
<h1 :style="{ color: filterColor('标题颜色') }">政务服务中心</h1>
<h1 :style="{ color: filterItem('2', 0) }">政务服务中心</h1>
</div>
<div class="time" :style="{ color: filterColor('时间颜色') }">
<div class="time" :style="{ color: filterItem('3', 0) }">
2022-7-18 17:00:00 星期一
</div>
</div>
......@@ -26,122 +24,104 @@
<img src="../../../../assets/img/Banner.png" />
</div>
<div class="call-out flex1 flex flexc jcb">
<div
class="call-out-item"
:style="{ backgroundColor: filterColor('正在呼叫') }"
>
<div class="call-out-item">
<div class="call-out-item-title">正在呼叫</div>
<div class="call-out-item-text call-out-item-text-1">
<span
class="call-out-item-code"
:style="{ color: filterColor('主题色') }"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterColor('主题色') }"
:style="{ color: filterItem('7', 0) }"
>03号窗口</span
>
</div>
</div>
<div
class="call-out-item"
:style="{ backgroundColor: filterColor('正在办理') }"
>
<div class="call-out-item">
<div class="call-out-item-title">正在办理</div>
<div class="call-out-item-text call-out-item-text-2">
<span
class="call-out-item-code"
:style="{ color: filterColor('主题色') }"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterColor('主题色') }"
:style="{ color: filterItem('7', 0) }"
>03号窗口</span
>
</div>
</div>
<div
class="call-out-item"
:style="{ backgroundColor: filterColor('正在办理') }"
>
<div class="call-out-item">
<div class="call-out-item-title">正在办理</div>
<div class="call-out-item-text call-out-item-text-2">
<span
class="call-out-item-code"
:style="{ color: filterColor('主题色') }"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterColor('主题色') }"
:style="{ color: filterItem('7', 0) }"
>03号窗口</span
>
</div>
</div>
<div
class="call-out-item"
:style="{ backgroundColor: filterColor('等待中') }"
>
<div class="call-out-item">
<div class="call-out-item-title">等待中</div>
<div class="call-out-item-text call-out-item-text-3">
<span
class="call-out-item-code"
:style="{ color: filterColor('主题色') }"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterColor('主题色') }"
:style="{ color: filterItem('7', 0) }"
>--</span
>
</div>
</div>
<div
class="call-out-item"
:style="{ backgroundColor: filterColor('等待中') }"
>
<div class="call-out-item">
<div class="call-out-item-title">等待中</div>
<div class="call-out-item-text call-out-item-text-3">
<span
class="call-out-item-code"
:style="{ color: filterColor('主题色') }"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterColor('主题色') }"
:style="{ color: filterItem('7', 0) }"
>--</span
>
</div>
</div>
<div
class="call-out-item"
:style="{ backgroundColor: filterColor('等待中') }"
>
<div class="call-out-item">
<div class="call-out-item-title">等待中</div>
<div class="call-out-item-text call-out-item-text-3">
<span
class="call-out-item-code"
:style="{ color: filterColor('主题色') }"
:style="{ color: filterItem('7', 0) }"
>A0004号</span
>
<span
class="call-out-item-code"
:style="{ color: filterColor('主题色') }"
:style="{ color: filterItem('7', 0) }"
>--</span
>
</div>
......@@ -151,26 +131,26 @@
<!-- 尾部 -->
<div class="footer flex aic jca">
<div class="footer-item flex flexc jcc aic">
<p>今日取号量</p>
<p class="footer-count" :style="{ color: filterColor('主题色') }">
<p :style="{ color: filterItem('5', 0) }">今日取号量</p>
<p class="footer-count" :style="{ color: filterItem('6', 0) }">
200次
</p>
</div>
<div class="footer-item flex flexc jcc aic">
<p>累计取号量</p>
<p class="footer-count" :style="{ color: filterColor('主题色') }">
<p :style="{ color: filterItem('5', 0) }">累计取号量</p>
<p class="footer-count" :style="{ color: filterItem('6', 0) }">
200次
</p>
</div>
<div class="footer-item flex flexc jcc aic">
<p>当前等待人数</p>
<p class="footer-count" :style="{ color: filterColor('主题色') }">
<p :style="{ color: filterItem('5', 0) }">当前等待人数</p>
<p class="footer-count" :style="{ color: filterItem('6', 0) }">
200人
</p>
</div>
<div class="footer-item flex flexc jcc aic">
<p>评价等待时间</p>
<p class="footer-count" :style="{ color: filterColor('主题色') }">
<p :style="{ color: filterItem('5', 0) }">评价等待时间</p>
<p class="footer-count" :style="{ color: filterItem('6', 0) }">
12分钟
</p>
</div>
......@@ -207,32 +187,58 @@ export default {
},
methods: {
// 过滤图片
filterImg(val) {
let url = "";
this.skinFieldList
.filter((v) => {
return v.fieldType === "2";
})
.forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) {
url = v.fieldValue;
}
});
return url;
// filterImg(val) {
// let url = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "2";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// url = v.fieldValue;
// }
// });
// return url;
// },
// // 过滤颜色
// filterColor(val) {
// let str = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "1";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// str = v.fieldValue;
// }
// });
// return str;
// },
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
return v.remark == type;
});
if (arr.length) {
return this.filterValueType(arr[index]);
} else {
return "";
}
},
// 过滤颜色
filterColor(val) {
let str = "";
this.skinFieldList
.filter((v) => {
return v.fieldType === "1";
})
.forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) {
str = v.fieldValue;
}
});
return str;
// 过滤属性值类型
filterValueType(info = {}) {
let value = "";
if (info.fieldType !== "" && info.fieldType === "1" && info.fieldValue) {
value = info.fieldValue;
} else if (
info.fieldType !== "" &&
info.fieldType === "2" &&
info.fieldValue
) {
value = `url(${this.api + info.fieldValue})`;
}
return value;
},
},
};
......
......@@ -3,7 +3,6 @@
<div class="show-content" v-if="skinInfo.id">
<div class="show-header">
<h2 class="show-titlw">{{ skinInfo.name }}</h2>
<p>
更新时间:<span style="margin-right: 20px">{{
skinInfo.updateTime | dateFormat
......@@ -15,6 +14,7 @@
</div>
<div class="show-skin">
<component
conponentsId="skinInfo"
:is="component"
:imageResolution="skinInfo.imageResolution"
:skinFieldList="skinInfo.skinFieldList"
......
......@@ -31,6 +31,13 @@
<a-form-model-item label="字段编码" prop="fieldCode">
<a-input placeholder="请输入字段编码" v-model="formData.fieldCode" />
</a-form-model-item>
<a-form-model-item label="字段类型" prop="remark">
<a-select v-model="formData.remark" placeholder="请选择字段类型">
<a-select-option v-for="v in attrType" :key="v.key" :value="v.key">
{{ v.label }}
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item label="数据类型" prop="fieldType">
<a-radio-group name="radioGroup" v-model="formData.fieldType">
<a-radio value="1"> 颜色 </a-radio>
......@@ -44,14 +51,7 @@
</a-radio-group>
</a-form-model-item>
<a-form-model-item label="排序号" prop="fieldOrderNo">
<a-input-number v-model="formData.fieldOrderNo" :min="1" />
</a-form-model-item>
<a-form-model-item label="备注" prop="remark">
<a-textarea
v-model="formData.remark"
placeholder="请输入备注"
allow-clear
/>
<a-input-number v-model="formData.fieldOrderNo" :min="0" />
</a-form-model-item>
</a-form-model>
</a-modal>
......@@ -60,6 +60,18 @@
<script>
import { fieldSave } from "@/services/surface";
const attrType = [
{ key: "1", label: "首页背景" },
{ key: "2", label: "标题" },
{ key: "3", label: "日期时间" },
{ key: "4", label: "导航" },
{ key: "5", label: "首页数据标题" },
{ key: "6", label: "首页数据" },
{ key: "7", label: "主题色" },
{ key: "8", label: "辅助色" },
{ key: "9", label: "备案" },
{ key: "10", label: "信息面板" },
];
export default {
props: {
visibleField: {
......@@ -81,6 +93,7 @@ export default {
},
data() {
return {
attrType, // 属性类型
formData: {
templateId: undefined, // 皮肤模板id
templateName: "", // 模板名称
......@@ -91,7 +104,7 @@ export default {
fieldValue: "", // 字段值
fieldOrderNo: "", // 排序号
skinId: 0,
remark: "", // 备注
remark: undefined, // 字段类型
},
rules: {
templateId: [
......@@ -106,6 +119,9 @@ export default {
fieldType: [
{ required: true, message: "请选择数据类型", trigger: "change" },
],
remark: [
{ required: true, message: "请选择字段类型", trigger: "change" },
],
},
};
},
......@@ -129,10 +145,7 @@ export default {
this.$message.success(msg);
this.Visible = false;
this.$emit("addField");
} else {
this.$message.error(msg);
}
console.log(res.data);
}
});
},
......
......@@ -293,6 +293,15 @@ export default {
if (data.length) {
this.skinTemplate = data;
this.formData.skinFieldList = data[0].skinFieldList;
this.formData.skinFieldList.forEach((v) => {
v.fieldOrderNo = Number(v.fieldOrderNo);
if (!v.fieldOrderNo) {
v.fieldOrderNo = 1000;
}
});
this.formData.skinFieldList.sort((a, b) => {
return a.fieldOrderNo - b.fieldOrderNo;
});
}
},
// 上传函数
......@@ -322,7 +331,6 @@ export default {
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/gif";
console.log(file);
if (!isJpgOrPng) {
this.$message.error("请上传jpeg或者png图片!");
}
......@@ -375,7 +383,6 @@ export default {
this.loading = false;
this.show = false;
} else {
this.$message.error(msg);
this.loading = false;
}
});
......
......@@ -6,23 +6,15 @@
class="surface-preview"
v-if="imageResolution === '1'"
:style="{
backgroundImage: filterImg('背景大图')
? `url(${api + filterImg('背景大图')})`
: '',
background: filterItem('1', 0),
}"
>
<div class="surface-preview-main">
<div class="skin-header">
<h1
class="skin-header-title"
:style="{ color: filterColor('标题颜色') }"
>
<h1 class="skin-header-title" :style="{ color: filterItem('2', 0) }">
自助排队取号系统
</h1>
<div
class="skin-header-time"
:style="{ color: filterColor('时间颜色') }"
>
<div class="skin-header-time" :style="{ color: filterItem('3', 0) }">
<p class="show-time">16:14:00</p>
<span class="shoe-day"> 2022/5/20 星期五 </span>
</div>
......@@ -34,10 +26,9 @@
<div class="skin-content-right">
<!-- 现场取号 -->
<div
:class="{ border: !filterItem('4', 0) }"
:style="{
backgroundImage: filterImg('现场取号')
? `url(${api + filterImg('现场取号')})`
: `url(${require('../../../../assets/img/img_bg_qiandao.png')})`,
background: filterItem('4', 0),
}"
></div>
<!-- <img
......@@ -49,10 +40,9 @@
/> -->
<!-- 预约取号 -->
<div
:class="{ border: !filterItem('4', 1) }"
:style="{
backgroundImage: filterImg('预约取号')
? `url(${api + filterImg('预约取号')})`
: `url(${require('../../../../assets/img/img_bg_qiandao.png')})`,
background: filterItem('4', 1),
}"
></div>
<!-- <img
......@@ -64,10 +54,9 @@
/> -->
<!-- VIP取号 -->
<div
:class="{ border: !filterItem('4', 2) }"
:style="{
backgroundImage: filterImg('VIP取号')
? `url(${api + filterImg('VIP取号')})`
: `url(${require('../../../../assets/img/img_bg_qiandao.png')})`,
background: filterItem('4', 2),
}"
></div>
<!-- <img
......@@ -79,10 +68,9 @@
/> -->
<!-- 重打小票 -->
<div
:class="{ border: !filterItem('4', 3) }"
:style="{
backgroundImage: filterImg('重打小票')
? `url(${api + filterImg('重打小票')})`
: `url(${require('../../../../assets/img/img_bg_qiandao.png')})`,
background: filterItem('4', 3),
}"
></div>
<!-- <img
......@@ -94,10 +82,9 @@
/> -->
<!-- 现场签到 -->
<div
:class="{ border: !filterItem('4', 4) }"
:style="{
backgroundImage: filterImg('现场签到')
? `url(${api + filterImg('现场签到')})`
: `url(${require('../../../../assets/img/img_bg_qiandao.png')})`,
background: filterItem('4', 4),
}"
></div>
<!-- <img
......@@ -109,10 +96,9 @@
/> -->
<!-- 政务服务网取号 -->
<div
:class="{ border: !filterItem('4', 5) }"
:style="{
backgroundImage: filterImg('政务网取号')
? `url(${api + filterImg('政务网取号')})`
: `url(${require('../../../../assets/img/img_bg_qiandao.png')})`,
background: filterItem('4', 5),
}"
></div>
<!-- <img
......@@ -127,39 +113,31 @@
<div class="skin-footer">
<div class="skin-footer-data">
<p>
<span :style="{ color: filterColor('数据标题') }">
今日取号量:</span
>
<span :style="{ color: filterColor('数据颜色') }">2000次</span>
<span :style="{ color: filterItem('5', 0) }"> 今日取号量:</span>
<span :style="{ color: filterItem('6', 0) }">2000次</span>
</p>
<p>
<span :style="{ color: filterColor('数据标题') }">
累计取号量:</span
>
<span :style="{ color: filterColor('数据颜色') }">2000次</span>
<span :style="{ color: filterItem('5', 0) }"> 累计取号量:</span>
<span :style="{ color: filterItem('6', 0) }">2000次</span>
</p>
<p>
<span :style="{ color: filterColor('数据标题') }">
<span :style="{ color: filterItem('5', 0) }">
当前等待人数:</span
>
<span :style="{ color: filterColor('数据颜色') }">2000人</span>
<span :style="{ color: filterItem('6', 0) }">2000人</span>
</p>
<p>
<span :style="{ color: filterColor('数据标题') }">
<span :style="{ color: filterItem('5', 0) }">
平均等待时间:</span
>
<span :style="{ color: filterColor('数据颜色') }">15分钟</span>
<span :style="{ color: filterItem('6', 0) }">15分钟</span>
</p>
</div>
<div class="skin-footer-records">
<p :style="{ color: filterColor('备案颜色') }">
主办单位:信宏翔科技
</p>
<p :style="{ color: filterColor('备案颜色') }">
承办单位:信宏翔科技
</p>
<p :style="{ color: filterColor('备案颜色') }">技术:信宏翔科技</p>
<p :style="{ color: filterColor('备案颜色') }">版权所有</p>
<p :style="{ color: filterItem('9', 0) }">主办单位:信宏翔科技</p>
<p :style="{ color: filterItem('9', 0) }">承办单位:信宏翔科技</p>
<p :style="{ color: filterItem('9', 0) }">技术:信宏翔科技</p>
<p :style="{ color: filterItem('9', 0) }">版权所有</p>
</div>
</div>
</div>
......@@ -212,32 +190,57 @@ export default {
},
methods: {
// 过滤图片
filterImg(val) {
let url = "";
this.skinFieldList
.filter((v) => {
return v.fieldType === "2";
})
.forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) {
url = v.fieldValue;
}
});
return url;
// filterImg(val) {
// let url = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "2";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// url = v.fieldValue;
// }
// });
// return url;
// },
// // 过滤颜色
// filterColor(val) {
// let str = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "1";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// str = v.fieldValue;
// }
// });
// return str;
// },
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
return v.remark == type;
});
if (arr.length) {
return this.filterValueType(arr[index]);
} else {
return "";
}
},
// 过滤颜色
filterColor(val) {
let str = "";
this.skinFieldList
.filter((v) => {
return v.fieldType === "1";
})
.forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) {
str = v.fieldValue;
}
});
return str;
// 过滤属性值类型
filterValueType(info = {}) {
let value = "";
if (info.fieldType !== "" && info.fieldType === "1" && info.fieldValue) {
value = info.fieldValue;
} else if (
info.fieldType !== "" &&
info.fieldType === "2" &&
info.fieldValue
) {
value = `url(${this.api + info.fieldValue})`;
}
return value;
},
},
};
......@@ -249,9 +252,9 @@ export default {
height: 562.5px;
color: #fff;
background-image: linear-gradient(#26c5ff, #2c66ff);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: cover !important;
h1 {
color: #fff;
margin: 0px;
......@@ -315,9 +318,15 @@ export default {
width: 176px;
height: 108px;
border-radius: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% 100% !important;
text-align: center;
line-height: 108px;
}
.border {
border: 1px dashed #ececec;
}
img {
width: 176px;
......
......@@ -5,56 +5,46 @@
:id="conponentsId"
class="window-skin-across flex jcb aic"
:style="{
backgroundImage: filterImg('背景大图')
? `url(${api + filterImg('背景大图')})`
: '',
background: filterItem('1', 0),
}"
>
<div class="left flex flexc jcc aic">
<p class="title">异地社保</p>
<p class="code" :style="{ color: filterColor('主题色') }">A08</p>
<p class="code" :style="{ color: filterItem('7', 0) }">A08</p>
<p><img width="100" src="../../../../assets/img/lvma.png" /></p>
</div>
<div class="right flex1 flex flexc aic">
<div class="header flex aic jcc">
<img src="../../../../assets/img/logo.png" />
<div>
<h1 :style="{ color: filterColor('主题色') }">政务服务中心</h1>
<h1 :style="{ color: filterItem('2', 0) }">政务服务中心</h1>
</div>
</div>
<div
class="call-out flex aic"
:style="{ backgroundColor: filterColor('辅助色') }"
:style="{ background: filterItem('8', 0) }"
>
<div class="call-out-now flex flexc aic jcb">
<p class="call-out-title">正在办理</p>
<p
class="call-out-now-code"
:style="{ color: filterColor('主题色') }"
>
<p class="call-out-now-code" :style="{ color: filterItem('7', 0) }">
A001
</p>
</div>
<div
class="line"
:style="{
backgroundImage: `linear-gradient(to bottom,#ccc,${filterColor(
'主题色'
)} 45%,${filterColor('主题色')} 65%,#ccc 100% )`,
backgroundImage: `linear-gradient(to bottom,#ccc,${filterItem(
'7',
0
)} 45%,${filterItem('7', 0)} 65%,#ccc 100% )`,
}"
></div>
<div class="call-out-wt flex flex1 flexc aic jcb">
<p class="call-out-title">等待呼叫</p>
<p
class="call-out-wt-code"
:style="{ color: filterColor('主题色') }"
>
<p class="call-out-wt-code" :style="{ color: filterItem('7', 0) }">
A002
</p>
<p
class="call-out-wt-code"
:style="{ color: filterColor('主题色') }"
>
<p class="call-out-wt-code" :style="{ color: filterItem('7', 0) }">
A003
</p>
</div>
......@@ -65,14 +55,7 @@
<li>退休补偿金办理</li>
</ul>
<!-- 底部banner -->
<div
class="footer-banner"
:style="{
backgroundImage: filterImg('banner图')
? `url(${api + filterImg('banner图')})`
: `url(${require('../../../../assets/img/cpbg.png')})`,
}"
></div>
<div class="footer-banner">Banner展示区</div>
</div>
</div>
</div>
......@@ -106,32 +89,58 @@ export default {
},
methods: {
// 过滤图片
filterImg(val) {
let url = "";
this.skinFieldList
.filter((v) => {
return v.fieldType === "2";
})
.forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) {
url = v.fieldValue;
}
});
return url;
// filterImg(val) {
// let url = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "2";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// url = v.fieldValue;
// }
// });
// return url;
// },
// // 过滤颜色
// filterColor(val) {
// let str = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "1";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// str = v.fieldValue;
// }
// });
// return str;
// },
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
return v.remark == type;
});
if (arr.length) {
return this.filterValueType(arr[index]);
} else {
return "";
}
},
// 过滤颜色
filterColor(val) {
let str = "";
this.skinFieldList
.filter((v) => {
return v.fieldType === "1";
})
.forEach((v) => {
if (v.fieldName !== "" && v.fieldName === val) {
str = v.fieldValue;
}
});
return str;
// 过滤属性值类型
filterValueType(info = {}) {
let value = "";
if (info.fieldType !== "" && info.fieldType === "1" && info.fieldValue) {
value = info.fieldValue;
} else if (
info.fieldType !== "" &&
info.fieldType === "2" &&
info.fieldValue
) {
value = `url(${this.api + info.fieldValue})`;
}
return value;
},
},
};
......@@ -143,9 +152,9 @@ export default {
height: 562.5px;
padding: 20px;
background-image: linear-gradient(#26c5ff, #2c66ff);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: cover !important;
.left {
width: 38%;
height: 100%;
......@@ -232,6 +241,10 @@ export default {
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
border: 1px dashed #ccc;
font-size: 20px;
text-align: center;
line-height: 100px;
}
}
}
......
......@@ -65,6 +65,7 @@ module.exports = {
delete: `${BASE_URL}/matter/delete`,
addMatterToSite: `${BASE_URL}/matter/addMatterToSite`,
exportExcel: `${BASE_URL}/matter/exportExcel`,
matterList: `${BASE_URL}/matter/sublist`,
},
// 事项申请材料
matterdatum: {
......
import {
sitematter,
matter,
matterdatum,
matterdatumfile,
matteraccept,
matterquestion,
mattersetbase,
matterintermediary,
matterflowlimit,
mattercharges,
} from '@/services/basicsetApi'
import {request, METHOD} from '@/utils/request'
sitematter,
matter,
matterdatum,
matterdatumfile,
matteraccept,
matterquestion,
mattersetbase,
matterintermediary,
matterflowlimit,
mattercharges,
} from "@/services/basicsetApi";
import { request, METHOD } from "@/utils/request";
/**
* 站点事项
*/
// 查询站点事项列表
export async function getSiteMatterList(data) {
return request(sitematter.list, METHOD.POST, data)
return request(sitematter.list, METHOD.POST, data);
}
// 新增站点事项
export async function addSitematter(data) {
return request(sitematter.save, METHOD.POST, data)
return request(sitematter.save, METHOD.POST, data);
}
// 从站点删除事项
export async function delSiteMatter(data) {
return request(sitematter.delete, METHOD.GET, data)
return request(sitematter.delete, METHOD.GET, data);
}
/**
......@@ -34,77 +34,79 @@ export async function delSiteMatter(data) {
*/
// 获取一体化事项列表
export async function getMatterList(data) {
return request(matter.list, METHOD.POST, data)
return request(matter.list, METHOD.POST, data);
}
// 保存/更新基础事项
export async function saveAddMatter(data) {
return request(matter.save, METHOD.POST, data)
return request(matter.save, METHOD.POST, data);
}
// 添加基础事项到站点
export async function addMatterToSite(data) {
return request(matter.addMatterToSite, METHOD.POST, data)
return request(matter.addMatterToSite, METHOD.POST, data);
}
// 删除基础事项
export async function delMatter(data) {
return request(matter.delete, METHOD.GET, data)
return request(matter.delete, METHOD.GET, data);
}
// 获取一体化事项列表(差集)
export async function getMatterListSubList(data) {
return request(matter.matterList, METHOD.POST, data);
}
/**
* 事项申请材料
*/
// 查询事项申请材料列表
export async function getMatterDatumList(data) {
return request(matterdatum.list, METHOD.POST, data)
return request(matterdatum.list, METHOD.POST, data);
}
// 保存更新事项申请材料
export async function saveMatterDatum(data) {
return request(matterdatum.save, METHOD.POST, data)
return request(matterdatum.save, METHOD.POST, data);
}
// 删除材料
export async function delMatterDatum(data) {
return request(matterdatum.delete, METHOD.GET, data)
return request(matterdatum.delete, METHOD.GET, data);
}
// 下载附件
export async function download(data,config) {
return request(matterdatumfile.exportExcel, METHOD.POST, data,config)
export async function download(data, config) {
return request(matterdatumfile.exportExcel, METHOD.POST, data, config);
}
// 删除附件
export async function delMatterdatumfile(data) {
return request(matterdatumfile.delete, METHOD.GET, data)
return request(matterdatumfile.delete, METHOD.GET, data);
}
/**
* 受理材料
* 受理材料
*/
// 查询事项受理条件列表
export async function getMatteracceptList(data) {
return request(matteraccept.list, METHOD.POST, data)
return request(matteraccept.list, METHOD.POST, data);
}
// 新增受理条件
export async function addMatteraccept(data) {
return request(matteraccept.save, METHOD.POST, data)
return request(matteraccept.save, METHOD.POST, data);
}
// 删除受理条件
export async function delMatteraccept(data) {
return request(matteraccept.delete, METHOD.GET, data)
return request(matteraccept.delete, METHOD.GET, data);
}
/**
* 常见问题
*/
// 获取常见问题列表
export async function getMatterquestion(data) {
return request(matterquestion.list, METHOD.POST, data)
return request(matterquestion.list, METHOD.POST, data);
}
// 新增问答
export async function addMatterquestion(data) {
return request(matterquestion.save, METHOD.POST, data)
return request(matterquestion.save, METHOD.POST, data);
}
// 删除问答
export async function delMatterquestion(data) {
return request(matterquestion.delete, METHOD.GET, data)
return request(matterquestion.delete, METHOD.GET, data);
}
/**
......@@ -112,15 +114,15 @@ export async function delMatterquestion(data) {
*/
// 获取依据列表
export async function getMattersetbase(data) {
return request(mattersetbase.list, METHOD.POST, data)
return request(mattersetbase.list, METHOD.POST, data);
}
// 新增依据
export async function addMattersetbase(data) {
return request(mattersetbase.save, METHOD.POST, data)
return request(mattersetbase.save, METHOD.POST, data);
}
// 删除依据
export async function delMattersetbase(data) {
return request(mattersetbase.delete, METHOD.GET, data)
return request(mattersetbase.delete, METHOD.GET, data);
}
/**
......@@ -128,7 +130,7 @@ export async function delMattersetbase(data) {
*/
// 增加中介服务
export async function addMatterintermediary(data) {
return request(matterintermediary.save, METHOD.POST, data)
return request(matterintermediary.save, METHOD.POST, data);
}
/**
......@@ -136,7 +138,7 @@ export async function addMatterintermediary(data) {
*/
// 新增办理流程
export async function addMatterflowlimit(data) {
return request(matterflowlimit.save, METHOD.POST, data)
return request(matterflowlimit.save, METHOD.POST, data);
}
/**
......@@ -144,5 +146,5 @@ export async function addMatterflowlimit(data) {
*/
// 新增收费标准
export async function addMattercharges(data) {
return request(mattercharges.save, METHOD.POST, data)
}
\ No newline at end of file
return request(mattercharges.save, METHOD.POST, data);
}
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