angelo
/
web-zk-admin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(framework): 推荐架构 方案一移除memberCode默认值

This commit is contained in:
woody 2025-09-25 15:01:57 +08:00
parent 3a5d7f1ecd
commit 29aca47694
2 changed files with 354 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

745
src/views/framework/architecture/azjg2.vue
View File

@ -8,191 +8,114 @@
<div class="thetopbox">
<el-form ref="form" :model="queryParams" label-width="100px">
<el-row>
<el-col :span="4">
<TopMemberSelect ref="topMemberSelect" @change="TopMemberHandleChange" />
</el-col>
<el-col :span="4">
<el-form-item :label="'会员编号'" prop="memberCode">
<el-input
v-model="queryParams.memberCode"
clearable
/></el-form-item></el-col>
<el-col :span="4">
<el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
<el-select
v-model="queryParams.memberSettlePeriodId"
clearable
:placeholder="'请选择'"
@change="getChildNodeList"
>
<el-option
v-for="item in memberSettlePeriodList"
:key="item.pkId"
:label="item.settleDate"
:value="item.pkId"
/> </el-select></el-form-item></el-col>
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'展示层数'" prop="level">
<el-form-item :label="'会员编号'" prop="memberCode">
<el-input
v-model="queryParams.level"
v-model="queryParams.memberCode"
clearable
/></el-form-item></el-col>
@blur="getChildNodeList"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'是否固定'" prop="cantz">
<el-select v-model="cantz" clearable :placeholder="'请选择'">
<el-form-item label="阶段" prop="stage">
<el-select
v-model="queryParams.stage"
placeholder="请选择"
@change="getChildNodeList"
>
<el-option
v-for="(item, index) in tzList"
v-for="(item, index) in levelList"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select> </el-form-item></el-col>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="状态" prop="stageStatus">
<el-select
v-model="queryParams.stageStatus"
:placeholder="'请选择'"
@change="getChildNodeList"
>
<el-option
v-for="(item, index) in statusEnum"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="子点位" prop="childNode">
<el-select v-model="queryParams.childNode" clearable filterable :placeholder="'请选择'">
<el-option
v-for="(item, index) in childNodeList"
:key="index"
:label="item.childNode"
:value="item.childNode"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" style="margin-left: 30px">
<div class="searchbox">
<el-button
:loading="loading"
class="searchbtn"
@click="getSearch"
> 搜索</el-button>
<el-button @click="resetHandle"> 重置</el-button>
<el-button @click="goback"> 返回</el-button>
> {{ '搜索' }}</el-button>
<el-button @click="resetHandle"> {{ '重置' }}</el-button>
</div>
</el-col>
</el-row></el-form>
</el-row>
</el-form>
</div>
<div class="theorgtree">
<div class="lefttop">
<div v-for="(item, index) in avaerInfoList" :key="index" class="single">
<img :src="item.value" alt="">
<div class="singletitle">{{ item.name }}</div>
</div>
<div class="lefttop">
<div v-for="(item, index) in avaerInfoList" :key="index" class="single">
<!-- <img :src="item.value" alt=""> -->
<!-- <div class="singletitle">{{ item.name }}</div> -->
</div>
<div class="tree">
<div class="tree-content" @mousedown.stop="move" @wheel="handleWheel">
<div :style="{ transform: `scale(${scale})` }">
<vue2-org-tree
ref="orgTree"
:data="data"
collapsable
:render-content="renderContent"
v-bind="$listeners"
@on-expand="onExpand"
@on-node-click="NodeClick"
@on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout"
/>
</div>
</div>
<div class="tree">
<div class="tree-content" @wheel="handleWheel" @mousedown.stop="move">
<div :style="{ transform: `scale(${scale})`, height: '100%' }">
<vue2-org-tree
ref="orgTree"
style="height: 100%"
:data="data"
collapsable
:render-content="renderContent"
@on-expand="onExpand"
@on-node-click="NodeClick"
@on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout"
/>
</div>
</div>
</div>
<el-dialog
:visible.sync="ifShow"
:close-on-click-modal="false"
width="516px"
>
<div class="rendercontent">
<div ref="htmlContent">
<div class="toprender">
<div class="leftimg">
<img
class="img1"
:src="'data:image/png;base64,' + treeData.avatarUrlBase64"
>
<img
class="img2"
:src="'data:image/png;base64,' + treeData.countryUrl2Base64"
>
</div>
<div class="centerbox">
<div class="lineboex">
<div class="linetitle">{{ '会员编号' }}</div>
<div class="linecontent">{{ treeData.memberCode }}</div>
</div>
<!-- </el-scrollbar> -->
<div class="lineboex">
<div class="linetitle">{{ '会员姓名' }}</div>
<div class="linecontent">{{ treeData.name }}</div>
</div>
<div class="lineboex">
<div class="linetitle">安置部门</div>
<div class="linecontent">{{ `第${treeData.placeDept}部门` }}</div>
</div>
<div class="lineboex">
<div class="linetitle">{{ '支付日期' }}</div>
<div class="linecontent">{{ treeData.payDate }}</div>
</div>
</div>
<div class="rightimg">
<img
:src="
'data:image/png;base64,' + treeData.settleCountryUrl2Base64
"
>
<div>{{ '结算国家' }}</div>
</div>
</div>
<div class="bottomrender">
<div class="flexbox">
<div class="thetitle">{{ '业绩' }}({{ isLocals() }})</div>
<div class="linecontent">{{ '真实新增' }}</div>
<div class="linecontent">首购新增</div>
<div class="linecontent">复购新增</div>
<div class="linecontent">真实累计</div>
<div class="linecontent">首购累计</div>
<div class="linecontent">复购累计</div>
<div class="linecontent">首购结余</div>
<div class="linecontent">复购结余</div>
<!-- <div class="linecontent">新増套数</div>
<div class="linecontent">累计套数</div> -->
</div>
<div class="flexbox">
<div class="thetitle">左区</div>
<div class="linecontent">{{ treeData.leftRealNewPv }}</div>
<div class="linecontent">{{ treeData.leftFirstPurchaseAdd }}</div>
<div class="linecontent">
{{ treeData.leftRepeatPurchaseAdd }}
</div>
<div class="linecontent">{{ treeData.leftRealTotal }}</div>
<div class="linecontent">{{ treeData.leftFirstTotal }}</div>
<div class="linecontent">
{{ treeData.leftRepeatPurchaseTotal }}
</div>
<div class="linecontent">{{ treeData.leftFirstSurplus }}</div>
<div class="linecontent">
{{ treeData.leftRepeatPurchaseSurplus }}
</div>
<!-- <div class="linecontent">{{ treeData.aNewBox || 0 }}</div>
<div class="linecontent">{{ treeData.aSumBox || 0 }}</div> -->
</div>
<div class="flexbox">
<div class="thetitle">右区</div>
<div class="linecontent">{{ treeData.rightRealNewPv }}</div>
<div class="linecontent">
{{ treeData.rightFirstPurchaseAdd }}
</div>
<div class="linecontent">
{{ treeData.rightRepeatPurchaseAdd }}
</div>
<div class="linecontent">{{ treeData.rightRealTotal }}</div>
<div class="linecontent">{{ treeData.rightFirstTotal }}</div>
<div class="linecontent">
{{ treeData.rightRepeatPurchaseTotal }}
</div>
<div class="linecontent">{{ treeData.rightFirstSurplus }}</div>
<div class="linecontent">
{{ treeData.rightRepeatPurchaseSurplus }}
</div>
<!-- <div class="linecontent">{{ treeData.bNewBox || 0 }}</div>
<div class="linecontent">{{ treeData.bSumBox || 0 }}</div> -->
</div>
</div>
</div>
<div class="footerbox">
<div class="footerbtn btn1" @click="downloadImage">下载图片</div>
<div class="footerbtn btn2" @click="copyText">复制文字</div>
<!-- <div class="footerbtn btn3" @click="goTop(treeData)">置顶</div> -->
</div>
</div>
</el-dialog>
<div v-show="false" ref="copyContent" class="copyContent">
<div>{{ '会员编号' }}：{{ treeData.memberCode }}</div>
<div>{{ '会员姓名' }}：{{ treeData.name }}</div>
@ -242,53 +165,39 @@
</template>
<script>
import html2canvas from 'html2canvas'
import topBar from '@/components/topBar'
import {
getAzFramework,
getAvarerInfo,
getMemberSettlePeriod,
getUrlBase
getChildList
} from '@/api/archityecture'
import TopMemberSelect from '@/components/top-member-select/index.vue'
import { isLocals } from '../../../utils/numberToCurrency'
import tabBarMixin from './mixins/tab-bar'
export default {
name: 'Azjg2',
name: 'Azjg',
components: {
topBar,
TopMemberSelect
topBar
},
mixins: [tabBarMixin],
data() {
return {
moren: 'azjg2',
topList: [
{
name: '方案一',
path: 'azjg'
},
{
name: '方案二',
path: 'azjg2'
},
{
name: '方案三',
path: 'azjg3'
},
{
name: '方案四',
path: 'azjg4'
},
{
name: '方案五',
path: 'azjg5'
}
],
queryParams: {
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 5,
type: 2
stage: 1,
stageStatus: '',
childNode: ''
},
levelList: [
{ value: 1, label: '一阶段' },
{ value: 2, label: '二阶段' },
{ value: 3, label: '三阶段' }
],
statusEnum: [
{ value: 0, label: '已完成' },
{ value: 1, label: '未完成' }
],
basicSwitch: false,
basicInfo: { id: null, label: null },
data: {},
@ -300,29 +209,27 @@ export default {
{ value: 0, label: '是' },
{ value: 1, label: '否' }
],
cantz: 1, // 0不可拖拽,1可拖拽
scale: 1,
loading: false
loading: false,
childNodeList: []
}
},
created() {
// this.getSearch()
this.getAvarerInfo()
getMemberSettlePeriod().then((res) => {
if (res.code === 200) {
this.memberSettlePeriodList = (res.data || []).filter(item => item.isThisDay !== 0)
this.queryParams.memberSettlePeriodId = this.memberSettlePeriodList[0].pkId
}
})
},
methods: {
TopMemberHandleChange(val) {
if (val) {
this.queryParams.memberCode = val
this.getSearch()
}
},
handleWheel(event) {
if (this.cantz == 1) {
event.preventDefault()
const delta = Math.sign(event.deltaY)
const newScale = this.scale - delta * 0.1
this.scale = Math.max(0.01, Math.min(newScale, 10))
}
// 暂时禁用滚轮缩放功能
// event.preventDefault()
// const delta = Math.sign(event.deltaY)
// const newScale = this.scale - delta * 0.1
// this.scale = Math.max(0.01, Math.min(newScale, 10))
return
},
isLocals,
copyText() {
@ -350,17 +257,17 @@ export default {
tempInput.remove()
window.getSelection().removeAllRanges()
},
// 返回
goback() {
this.queryParams.memberCode = this.data.parentMemberCode
this.getSearch()
},
// 拖拽移动
move(e) {
if (this.cantz == 0) {
return
}
const odiv = e.currentTarget // 获取元素
console.log(e)
// 算出鼠标相对元素的位置
const disX = e.clientX - odiv.offsetLeft
@ -384,49 +291,7 @@ export default {
document.onmouseup = null
}
},
async downloadImage() {
const element = this.$refs.htmlContent
// 使用html2canvas将节点生成为图片
const canvas = await html2canvas(element)
const image = canvas.toDataURL('image/png')
// 复制图片到剪贴板
try {
await navigator.clipboard.write([
new ClipboardItem({
'image/png': await new Promise((resolve) =>
canvas.toBlob(resolve, 'image/png')
)
})
])
this.$message({
message: '复制成功',
type: 'success'
})
} catch (error) {
// this.$message({
// message: "复制失败",
// type: "warning",
// });
}
// 下载图片到本地
const link = document.createElement('a')
link.href = image
link.download = 'image.png'
link.click()
},
getAvarerInfo() {
getAvarerInfo().then((res) => {
this.avaerInfoList = res.data
})
getMemberSettlePeriod().then((res) => {
this.memberSettlePeriodList = res.data
this.memberSettlePeriodList.forEach((ele) => {
if (ele.isThisDay == 0) {
this.queryParams.memberSettlePeriodId = ele.pkId
}
})
})
},
// 鼠标移入
onMouseover(e, data) {
this.basicInfo = data
@ -436,78 +301,51 @@ export default {
onMouseout(e, data) {
this.basicSwitch = false
},
// <div class="xrBox">
// <div class="neibox" on-click={() => this.showPover(data)}>
// <div class="topbox">
// <img src={data.avatarUrl}></img>
// </div>
// <div class="centerbox">
// <div class="cflexbox">
// <img src={data.countryUrl}></img>
// <div class="matitle">{data.memberCode}</div>
// </div>
// <div class="cflexbox">
// <img src={data.settleCountryUrl}></img>
// <div class="matitle">{data.name}</div>
// </div>
// </div>
// <div class="footerbox">
// {/* 阻止冒泡事件 */}
// <div class="ftopbtn" on-click={() => {event.stopPropagation(),this.goTop(data)}}>置顶</div>
// </div>
// </div>
// </div>
// 渲染节点
renderContent(h, data) {
if (!data || Object.keys(data).length === 0) {
return
}
return (
<div class='xrBox'>
{/* 判断data.codeName是否为空 */}
<div class='neibox'>
{data.memberCode ? (
<div on-click={() => this.showPover(data)}>
<div class='topbox'>
<img src={data.settleCountryUrl2}></img>
</div>
<div class='footerbox'>
{/* 阻止冒泡事件 */}
<div
class='ftopbtn'
style={{ backgroundColor: data.color }}
on-click={() => {
event.stopPropagation(), this.goTop(data)
}}
>
{'置顶'}
if (Object.keys(data).length > 0) {
return (
<div class='render-content-item'>
{/* 节点编号 */}
{data.nodeCode !== '0-root' && (
<div class='node-code'>
<span>{data.nodeCode}</span>
</div>
)}
{/* 会员信息或空点位 */}
<div class='node-content'>
{data.memberCode && data.memberName ? (
<div class='member-info'>
<div class='member-details'>
<div class='member-code'>{data.memberCode}</div>
<div class='member-name'>{data.memberName}</div>
</div>
</div>
</div>
) : null}
</div>
</div>
)
) : (
<div class='empty-node'>
<div class='empty-avatar'>
<i class='el-icon-plus'></i>
</div>
<div class='empty-text'>空点位</div>
<div class='status-indicator inactive'></div>
</div>
)}
</div>
</div>)
} else {
return null
}
},
// 置顶
goTop(row) {
this.queryParams.memberCode = row.memberCode
// 右键点击
rightClick(e, data) {
event.preventDefault()
this.queryParams.memberCode = data.memberCode
this.getSearch()
},
showPover(row) {
getUrlBase({
countryUrl2: row.countryUrl2,
settleCountryUrl2: row.settleCountryUrl2,
avatarUrl: row.avatarUrl
}).then((res) => {
this.treeData = row
this.treeData.countryUrl2Base64 = res.countryUrl2Base64
this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
this.treeData.avatarUrlBase64 = res.avatarUrlBase64
this.ifShow = true
})
},
// 点击节点
NodeClick(e, data) {},
// 默认展开
@ -536,17 +374,15 @@ export default {
},
// 展开
onExpand(e, data) {
if ('expand' in data) {
data.expand = !data.expand
if (!data.expand && data.children) {
this.collapse(data.children)
}
} else {
this.$set(data, 'expand', true)
}
},
getSearch() {
console.log(this.queryParams, '...this.')
if (!this.queryParams.childNode || !this.queryParams.memberCode) {
this.$message.warning('会员编号和子点位不能为空')
return
}
this.loading = true
getAzFramework(this.queryParams).then((res) => {
this.data = res.data[0]
this.toggleExpand(this.data, true)
@ -554,22 +390,33 @@ export default {
this.loading = false
})
},
resetHandle() {
this.$refs.topMemberSelect.reset()
this.queryParams = {
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 5,
type: 2
stage: 7,
type: 1
}
this.getSearch()
},
getChildNodeList() {
if (!this.queryParams.memberCode) {
return
}
getChildList(this.queryParams).then((res) => {
if (res.code === 200) {
this.childNodeList = res.data || []
}
})
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__headerbtn{
<style lang="scss" scoped>
::v-deep .el-dialog__headerbtn{
top: 5px;
right: 10px;
border: 1px solid #c8c3c3;
@ -604,16 +451,24 @@ export default {
// overflow: auto;
}
}
::v-deep .org-tree-node-btn {
display: none;
}
::v-deep .org-tree-node-label {
display: block;
}
::v-deep .org-tree-node-label-inner {
padding: 0;
background: rgba(0, 0, 0, 0);
background: transparent !important;
padding: 0 !important;
border: none;
border-radius: 10px;
box-shadow: none !important;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
// margin-left: -20px;
// z-index: -1;
}
::v-deep .el-dialog__body {
padding: 0;
@ -623,63 +478,184 @@ export default {
background: rgba(1, 1, 1, 0) !important;
overflow-x: auto;
}
::v-deep .xrBox {
.neibox {
padding: 8px 15px;
margin: auto;
min-width: 50px;
min-height: 50px;
// z-index: 99;
.topbox {
margin: 0 auto;
img {
width: 52px;
height: 36px;
border-radius: 8px;
// border-radius: 50%;
}
::v-deep .render-content-item {
border-radius: 12px;
margin: auto;
z-index: 99;
padding: 0;
border: none;
max-width: 200px;
text-align: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
overflow: hidden;
position: relative;
&:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
}
.node-code {
background: rgba(255, 255, 255, 0.1);
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
i {
font-size: 14px;
color: #ffd700;
}
.centerbox {
span {
letter-spacing: 0.5px;
}
}
.node-content {
padding: 16px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
position: relative;
}
.member-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
.member-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
text-align: center;
box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.5);
.cflexbox {
margin: 0 10px;
img {
width: 51px;
height: 34px;
border-radius: 10px;
margin-bottom: 8px;
}
.matitle {
font-size: 10px;
}
justify-content: center;
margin-bottom: 4px;
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
i {
font-size: 24px;
color: white;
}
}
.footerbox {
// margin-top: 10px;
.ftopbtn {
margin: 0 auto;
// width: 35px;
// height: 16px;
background: #21c8f4;
border-radius: 4px;
display: flex;
padding: 4px 9px;
align-items: center;
justify-content: center;
color: #ffffff;
cursor: pointer;
.member-details {
text-align: center;
margin-top: 10px;
.member-code {
font-size: 13px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 2px;
letter-spacing: 0.3px;
}
.member-name {
font-size: 12px;
color: #7f8c8d;
font-weight: 500;
}
}
.status-indicator.active {
position: absolute;
top: -2px;
right: -2px;
width: 12px;
height: 12px;
background: #27ae60;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
animation: pulse-green 2s infinite;
}
}
.empty-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
opacity: 0.8;
position: relative;
.empty-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #bdc3c7, #95a5a6);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
border: 2px dashed #95a5a6;
transition: all 0.3s ease;
i {
font-size: 20px;
color: white;
}
}
.empty-text {
font-size: 12px;
color: #7f8c8d;
font-weight: 500;
}
.status-indicator.inactive {
position: absolute;
top: -2px;
right: -2px;
width: 12px;
height: 12px;
background: #95a5a6;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 2px 8px rgba(149, 165, 166, 0.3);
}
&:hover .empty-avatar {
background: linear-gradient(135deg, #3498db, #2980b9);
border-color: #3498db;
transform: scale(1.05);
}
}
}
@keyframes pulse-green {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.1);
}
}
.lefttop {
display: flex;
justify-items: center;
@ -689,8 +665,8 @@ export default {
.single {
margin: 0 5px;
img {
width: 40px;
height: 40px;
width: 36px;
height: 36px;
border-radius: 50%;
// box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.5);
}
@ -701,16 +677,6 @@ export default {
}
}
}
::v-deep .org-tree-node-label .org-tree-node-label-inner {
padding: 0;
}
::v-deep .el-dialog__body {
padding: 0;
}
// ::v-deep .xrBox {
// }
::v-deep .rendercontent {
.toprender {
display: flex;
@ -731,7 +697,7 @@ export default {
margin-top: 10px;
width: 50px;
height: 30px;
border-radius: 10px;
border-radius: 8px;
}
}
.centerbox {
@ -778,7 +744,7 @@ export default {
img {
width: 75px;
height: 50px;
border-radius: 10px;
border-radius: 8px;
margin-bottom: 10px;
}
}
@ -844,7 +810,8 @@ export default {
}
.page {
padding: 10px 20px;
background: #ffffff;
padding: 10px 20px !important;
background: #f9f9f9;
font-size: 14px;
.thetopbox {
@ -862,14 +829,6 @@ export default {
color: #ffffff;
}
}
}
.theorgtree {
overflow: auto;
// margin-top: 20px;
}
}
::v-deep .org-tree {
margin: 0 auto;
}
</style>

4
src/views/framework/architecture/mixins/tab-bar.js
View File

@ -7,8 +7,8 @@ export default {
path: 'azjg'
}
// {
// name: '方案五',
// path: 'azjg5'
// name: '方案二',
// path: 'azjg2'
// }
]
}