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

Merge branch 'dev' of 47.94.45.65:angelo/web-zk-admin into test

This commit is contained in:
woody 2025-09-18 14:48:47 +08:00
parent c82e31f099 506a56e298
commit 410ab9131e
18 changed files with 1439 additions and 1429 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.env.development
View File

@ -3,5 +3,6 @@ ENV = 'development'
VUE_APP_BASE_API = '/prod-api'
VUE_APP_ADDRESS1 = 'https://t-zk.beida666.com/#/'
VUE_APP_SYSTEM_TYPE = 'KG'
# 会员H5端： t-zk.beida666.com
# 管理后台： t-zk-mana.beida666.com
# 管理后台： t-zk-mana.beida666.com

3
.env.production
View File

@ -4,5 +4,6 @@ ENV = 'production'
# base api
VUE_APP_BASE_API = '/prod-api'
VUE_APP_ADDRESS1 = 'https://t-zk.beida666.com/#/'
VUE_APP_SYSTEM_TYPE = 'KG'
# 会员H5端： t-zk.beida666.com
# 管理后台： t-zk-mana.beida666.com
# 管理后台： t-zk-mana.beida666.com

8
src/api/financialCase.js
View File

@ -279,3 +279,11 @@ export function batchReject(data) {
data
})
}
export function refreshPayStatus(params) {
return request({
url: '/pay/manage/online-payment/compensationCallBack',
method: 'get',
params
})
}

54
src/components/top-member-select/index.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<el-form-item label="系统编号">
<el-select
v-model="pkVertex"
clearable
@change="handleChange"
>
<el-option
v-for="item in verList"
:key="item.pkVertex"
:label="`${item.memberCode} (${item.memberName})`"
:value="item.memberCode"
/>
</el-select>
</el-form-item>
</template>
<script>
import * as api from '@/api/settle.js'
export default {
name: 'TopMemberSelect',
props: {
model: {
type: Object,
default: () => {}
}
},
data() {
return {
pkVertex: '',
verList: []
}
},
created() {
this.getList()
},
methods: {
handleChange() {
this.$emit('change', this.pkVertex)
},
getList() {
api.topVertexList().then((res) => {
this.verList = res.rows || []
this.pkVertex = this.verList[0]?.memberCode || ''
this.pkVertex && this.handleChange()
})
},
reset() {
this.pkVertex = ''
}
}
}
</script>

21
src/main.js
View File

@ -26,21 +26,20 @@ import App from './App'
import store from './store'
import router from './router'
import './utils/rem'
import Pagination from "@/components/Pagination";
import Pagination from '@/components/Pagination'
import '@/icons' // icon
import '@/permission' // permission control
//国际化
// 国际化
// import i18n from './i18n/index'
import i18n from '@/assets/i18n/index'
import permission from './directive/permission'
import * as echarts from 'echarts';
import * as echarts from 'echarts'
import moment from "moment"
Vue.prototype.$moment = moment;
import moment from 'moment'
Vue.prototype.$moment = moment
import noImgEditor from '@/components/noImgEditor'
// 下载
// import { download } from "@/utils/ruoyi";
/**
@ -59,7 +58,7 @@ if (process.env.NODE_ENV === 'production') {
Vue.component('Pagination', Pagination)
Vue.component('noImgEditor', noImgEditor)
import { download } from '@/utils/request';
import { download } from '@/utils/request'
Vue.prototype.download = download
// set ElementUI lang to EN
@ -67,19 +66,19 @@ Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)
import { numberToCurrencyNo, isDollar, isLocal,stateFormat,isLocalSymbol } from '@/utils/numberToCurrency'
import { numberToCurrencyNo, isDollar, isLocal, stateFormat, isLocalSymbol } from '@/utils/numberToCurrency'
Vue.prototype.stateFormat = stateFormat
Vue.prototype.isLocalSymbol = isLocalSymbol
Vue.prototype.systemTypes = [{value:2, label:'新零售'}]
Vue.prototype.systemTypes = [{ value: 2, label: '新零售' }]
// 配置全局过滤器，实现数字千分位格式
Vue.filter('numberToCurrency', numberToCurrencyNo)
//海外pv添加美元
// 海外pv添加美元
Vue.filter('isDollar', isDollar)
// 海外添加当地币
Vue.filter('isLocal', isLocal)
Vue.use(permission)
Vue.prototype.$echarts = echarts;
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false

74
src/router/index.js
View File

@ -1549,7 +1549,7 @@ export const constantRoutes = [
}, {
path: 'retailLevel',
name: 'RetailLevel',
meta: { title: i18n.t('新零售级别配置') },
meta: { title: i18n.t('级别配置') },
component: ParentView,
redirect: 'retailLevel/index',
children: [
@ -1557,7 +1557,7 @@ export const constantRoutes = [
path: 'retailLevel',
name: 'RetailLevelPage',
component: () => import('@/views/configManage/retailLevel/index'),
meta: { title: i18n.t('新零售级别配置') }
meta: { title: i18n.t('级别配置') }
},
{
path: 'retailJxpz',
@ -1683,12 +1683,12 @@ export const constantRoutes = [
component: () => import('@/views/configManage/systemconfiguration/index'),
meta: { title: '体系配置' }
},
{
path: 'groupConfiguration',
name: 'GroupConfigurationList',
component: () => import('@/views/configManage/systemconfiguration/groupConfiguration'),
meta: { title: '区域体系分组' }
},
// {
// path: 'groupConfiguration',
// name: 'GroupConfigurationList',
// component: () => import('@/views/configManage/systemconfiguration/groupConfiguration'),
// meta: { title: '区域体系分组' }
// },
{
path: 'vertexAwardConfiguration',
name: 'VertexAwardConfiguration',
@ -2112,37 +2112,37 @@ export const constantRoutes = [
]
},
{
path: 'memberRetailRegion',
name: 'memberRetailRegion',
meta: { title: i18n.t('收益区域配置') },
component: ParentView,
redirect: 'memberRetailRegion/index',
children: [
{
path: 'memberRetailRegion',
name: 'memberRetailRegion',
component: () => import('@/views/configManage/memberRetailRegion/index'),
meta: { title: i18n.t('收益区域配置') }
}
// {
// path: 'memberRetailRegion',
// name: 'memberRetailRegion',
// meta: { title: i18n.t('收益区域配置') },
// component: ParentView,
// redirect: 'memberRetailRegion/index',
// children: [
// {
// path: 'memberRetailRegion',
// name: 'memberRetailRegion',
// component: () => import('@/views/configManage/memberRetailRegion/index'),
// meta: { title: i18n.t('收益区域配置') }
// }
]
}, {
path: 'cuMemberRetailRegion',
name: 'cuMemberRetailRegion',
meta: { title: i18n.t('未配置区域') },
component: ParentView,
redirect: 'cuMemberRetailRegion/index',
children: [
{
path: 'cuMemberRetailRegion',
name: 'cuMemberRetailRegion',
component: () => import('@/views/configManage/cuMemberRetailRegion/index'),
meta: { title: i18n.t('未配置区域') }
}
// ]
// }, {
// path: 'cuMemberRetailRegion',
// name: 'cuMemberRetailRegion',
// meta: { title: i18n.t('未配置区域') },
// component: ParentView,
// redirect: 'cuMemberRetailRegion/index',
// children: [
// {
// path: 'cuMemberRetailRegion',
// name: 'cuMemberRetailRegion',
// component: () => import('@/views/configManage/cuMemberRetailRegion/index'),
// meta: { title: i18n.t('未配置区域') }
// }
]
},
// ]
// },
{
path: 'freePostageAreas',
name: 'FreePostageAreas',

12
src/views/configManage/systemconfiguration/index.vue
View File

@ -13,13 +13,13 @@
<el-input v-model="queryParams.vertexName" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<!-- <el-col :span="4">
<el-form-item label="区域分组" prop="regionVertexPkId">
<el-select v-model="queryParams.regionVertexPkId" clearable>
<el-option v-for="item in groupList" :key="item.pkId" :label="item.name" :value="item.pkId" />
</el-select>
</el-form-item>
</el-col>
</el-col> -->
<!-- <el-col :span="4">
<el-form-item label="体系编号" prop="memberCode">
<el-input clearable v-model="queryParams.memberCode"></el-input>
@ -93,11 +93,11 @@
prop="memberCode"
:label="'会员编号'"
/>
<el-table-column
<!-- <el-table-column
align="center"
prop="regionVertexName"
label="区域分组"
/>
/> -->
<el-table-column
align="center"
prop="creationTime"
@ -208,13 +208,13 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- <el-col :span="12">
<el-form-item label="区域分组">
<el-select v-model="formd.regionVertexPkId" clearable>
<el-option v-for="item in groupList" :key="item.pkId" :label="item.name" :value="item.pkId" />
</el-select>
</el-form-item>
</el-col>
</el-col> -->
<el-col :span="12">
<el-form-item label="序号">
<el-input v-model="formd.sort" clearable />

16
src/views/financial/onlinePayDetails/index.vue
View File

@ -295,12 +295,14 @@
>
<template slot-scope="scope">
<el-button
v-show="scope.row.payStatus !== 1"
v-has-buttons="['OnlinePayDetailsRefreshStatus']"
style="color: #ffad41"
type="text"
size="small"
@click="toFixed(scope.row.pkId)"
@click="refreshStatus(scope.row)"
>
{{ '导出' }}
刷新状态
</el-button>
</template>
</el-table-column>
@ -419,6 +421,16 @@ export default {
this.tradeTypeList = res.data
})
},
refreshStatus({ businessCode }) {
api.refreshPayStatus({ businessCode }).then((res) => {
if (res.code === 200) {
this.$message.success('刷新成功')
this.getDataList()
} else {
this.$message.error(res.msg)
}
})
},
changeTime(val) {
// this.select.startDate = val[0]
// this.select.endDate = val[1]

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

@ -2,65 +2,67 @@
<div class="page">
<topBar
v-if="topList.length > 0"
:topList="topList"
:top-list="topList"
:moren="moren"
></topBar>
/>
<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
clearable
v-model="queryParams.memberCode"
></el-input></el-form-item
></el-col>
clearable
/></el-form-item></el-col>
<el-col :span="4">
<el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
<el-select
v-model="queryParams.memberSettlePeriodId"
clearable
:placeholder="'请选择'"
v-model="queryParams.memberSettlePeriodId"
>
<el-option
v-for="item in memberSettlePeriodList"
:key="item.pkId"
:label="item.settleDate"
:value="item.pkId"
></el-option> </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-input
clearable
v-model="queryParams.level"
></el-input></el-form-item
></el-col>
clearable
/></el-form-item></el-col>
<el-col :span="4">
<el-form-item :label="'是否固定'" prop="cantz">
<el-select clearable :placeholder="'请选择'" v-model="cantz">
<el-select v-model="cantz" clearable :placeholder="'请选择'">
<el-option
v-for="(item, index) in tzList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-form-item
></el-col>
/>
</el-select> </el-form-item></el-col>
<el-col :span="4" style="margin-left: 30px">
<div class="searchbox">
<el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button>
<el-button @click="reChongzhi"> {{ '重置' }}</el-button>
<el-button @click="goback"> {{ '返回' }}</el-button>
<el-button
:loading="loading"
class="searchbtn"
@click="getSearch"
> 搜索</el-button>
<el-button @click="resetHandle"> 重置</el-button>
<el-button @click="goback"> 返回</el-button>
</div>
</el-col>
</el-row></el-form
>
</el-row></el-form>
</div>
<div class="theorgtree">
<div class="lefttop">
<div class="single" v-for="(item, index) in avaerInfoList" :key="index">
<img :src="item.value" alt="" />
<div v-for="(item, index) in avaerInfoList" :key="index" class="single">
<img :src="item.value" alt="">
<div class="singletitle">{{ item.name }}</div>
</div>
</div>
@ -68,15 +70,15 @@
<div class="tree-content" @mousedown.stop="move" @wheel="handleWheel">
<div :style="{ transform: `scale(${scale})` }">
<vue2-org-tree
ref="orgTree"
:data="data"
collapsable
ref="orgTree"
:render-content="renderContent"
v-bind="$listeners"
@on-expand="onExpand"
@on-node-click="NodeClick"
@on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout"
:renderContent="renderContent"
v-bind="$listeners"
/>
</div>
</div>
@ -94,21 +96,26 @@
<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>
<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>
@ -119,14 +126,14 @@
:src="
'data:image/png;base64,' + treeData.settleCountryUrl2Base64
"
/>
<div>{{'结算国家'}}</div>
>
<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>
@ -134,6 +141,8 @@
<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>
@ -151,6 +160,8 @@
<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>
@ -170,6 +181,8 @@
<div class="linecontent">
{{ treeData.rightRepeatPurchaseSurplus }}
</div>
<!-- <div class="linecontent">{{ treeData.bNewBox || 0 }}</div>
<div class="linecontent">{{ treeData.bSumBox || 0 }}</div> -->
</div>
</div>
</div>
@ -180,7 +193,7 @@
</div>
</div>
</el-dialog>
<div class="copyContent" ref="copyContent" v-show="false">
<div v-show="false" ref="copyContent" class="copyContent">
<div>{{ '会员编号' }}：{{ treeData.memberCode }}</div>
<div>{{ '会员姓名' }}：{{ treeData.name }}</div>
<div>{{ '支付日期' }}：{{ treeData.payDate }}</div>
@ -228,51 +241,53 @@
</div>
</template>
<script>
import html2canvas from "html2canvas";
import topBar from "@/components/topBar";
<script>
import html2canvas from 'html2canvas'
import topBar from '@/components/topBar'
import {
getAzFramework,
getAvarerInfo,
getMemberSettlePeriod,
getUrlBase,
} from "@/api/archityecture";
import { isLocals } from "../../../utils/numberToCurrency";
getUrlBase
} from '@/api/archityecture'
import TopMemberSelect from '@/components/top-member-select/index.vue'
import { isLocals } from '../../../utils/numberToCurrency'
export default {
name: "Azjg2",
name: 'Azjg2',
components: {
topBar,
TopMemberSelect
},
data() {
return {
moren: "azjg2",
moren: 'azjg2',
topList: [
{
name: '方案一',
path: "azjg",
path: 'azjg'
},
{
name: '方案二',
path: "azjg2",
path: 'azjg2'
},
{
name: '方案三',
path: "azjg3",
path: 'azjg3'
},
{
name: '方案四',
path: "azjg4",
path: 'azjg4'
},
{
name: "方案五",
path: "azjg5",
},
name: '方案五',
path: 'azjg5'
}
],
queryParams: {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 5,
type:2
type: 2
},
basicSwitch: false,
basicInfo: { id: null, label: null },
@ -280,106 +295,113 @@ export default {
treeData: {},
ifShow: false,
avaerInfoList: [],
memberSettlePeriodList: [], //期数
memberSettlePeriodList: [], // 期数
tzList: [
{ value: 0, label: "是" },
{ value: 1, label: "否" },
{ value: 0, label: '是' },
{ value: 1, label: '否' }
],
cantz: 1, //0不可拖拽,1可拖拽
cantz: 1, // 0不可拖拽,1可拖拽
scale: 1,
};
loading: false
}
},
created() {
this.getSearch();
this.getAvarerInfo();
// this.getSearch()
this.getAvarerInfo()
},
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))
}
},
isLocals,
copyText() {
const copyContent = this.$refs.copyContent;
const textLines = Array.from(copyContent.querySelectorAll("div")).map(
const copyContent = this.$refs.copyContent
const textLines = Array.from(copyContent.querySelectorAll('div')).map(
(div) => div.textContent.trim()
);
const text = textLines.join("\n");
const tempInput = document.createElement("textarea");
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
)
const text = textLines.join('\n')
const tempInput = document.createElement('textarea')
tempInput.value = text
document.body.appendChild(tempInput)
tempInput.select()
try {
document.execCommand("copy");
document.execCommand('copy')
this.$message({
message: '复制成功',
type: "success",
});
type: 'success'
})
} catch (error) {
this.$message({
message: "复制失败",
type: "warning",
});
message: '复制失败',
type: 'warning'
})
}
tempInput.remove();
window.getSelection().removeAllRanges();
tempInput.remove()
window.getSelection().removeAllRanges()
},
//返回
// 返回
goback() {
this.queryParams.memberCode = this.data.parentMemberCode;
this.getSearch();
this.queryParams.memberCode = this.data.parentMemberCode
this.getSearch()
},
//拖拽移动
// 拖拽移动
move(e) {
if (this.cantz == 0) {
return;
return
}
const odiv = e.currentTarget; // 获取元素
const odiv = e.currentTarget // 获取元素
// 算出鼠标相对元素的位置
const disX = e.clientX - odiv.offsetLeft;
const disY = e.clientY - odiv.offsetTop;
const disX = e.clientX - odiv.offsetLeft
const disY = e.clientY - odiv.offsetTop
document.onmousemove = (e) => {
// 鼠标按下并移动的事件
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
const left = e.clientX - disX;
const top = e.clientY - disY;
const left = e.clientX - disX
const top = e.clientY - disY
// 绑定元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left;
this.positionX = top
this.positionY = left
// 移动当前元素
odiv.style.left = left + "px";
odiv.style.top = top + "px";
};
odiv.style.left = left + 'px'
odiv.style.top = top + 'px'
}
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
document.onmousemove = null
document.onmouseup = null
}
},
async downloadImage() {
const element = this.$refs.htmlContent;
const element = this.$refs.htmlContent
// 使用html2canvas将节点生成为图片
const canvas = await html2canvas(element);
const image = canvas.toDataURL("image/png");
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")
),
}),
]);
'image/png': await new Promise((resolve) =>
canvas.toBlob(resolve, 'image/png')
)
})
])
this.$message({
message: '复制成功',
type: "success",
});
type: 'success'
})
} catch (error) {
// this.$message({
// message: "复制失败",
@ -387,32 +409,32 @@ export default {
// });
}
// 下载图片到本地
const link = document.createElement("a");
link.href = image;
link.download = "image.png";
link.click();
const link = document.createElement('a')
link.href = image
link.download = 'image.png'
link.click()
},
getAvarerInfo() {
getAvarerInfo().then((res) => {
this.avaerInfoList = res.data;
});
this.avaerInfoList = res.data
})
getMemberSettlePeriod().then((res) => {
this.memberSettlePeriodList = res.data;
this.memberSettlePeriodList = res.data
this.memberSettlePeriodList.forEach((ele) => {
if (ele.isThisDay == 0) {
this.queryParams.memberSettlePeriodId = ele.pkId;
this.queryParams.memberSettlePeriodId = ele.pkId
}
});
});
})
})
},
//鼠标移入
// 鼠标移入
onMouseover(e, data) {
this.basicInfo = data;
this.basicSwitch = true;
this.basicInfo = data
this.basicSwitch = true
},
//鼠标移出
// 鼠标移出
onMouseout(e, data) {
this.basicSwitch = false;
this.basicSwitch = false
},
// <div class="xrBox">
// <div class="neibox" on-click={() => this.showPover(data)}>
@ -435,24 +457,27 @@ export default {
// </div>
// </div>
// </div>
//渲染节点
// 渲染节点
renderContent(h, data) {
if (!data || Object.keys(data).length === 0) {
return
}
return (
<div class="xrBox">
<div class='xrBox'>
{/* 判断data.codeName是否为空 */}
<div class="neibox">
<div class='neibox'>
{data.memberCode ? (
<div on-click={() => this.showPover(data)}>
<div class="topbox">
<div class='topbox'>
<img src={data.settleCountryUrl2}></img>
</div>
<div class="footerbox">
<div class='footerbox'>
{/* 阻止冒泡事件 */}
<div
class="ftopbtn"
class='ftopbtn'
style={{ backgroundColor: data.color }}
on-click={() => {
event.stopPropagation(), this.goTop(data);
event.stopPropagation(), this.goTop(data)
}}
>
{'置顶'}
@ -462,81 +487,85 @@ export default {
) : null}
</div>
</div>
);
)
},
//置顶
// 置顶
goTop(row) {
this.queryParams.memberCode = row.memberCode;
this.getSearch();
this.queryParams.memberCode = row.memberCode
this.getSearch()
},
showPover(row) {
getUrlBase({
countryUrl2: row.countryUrl2,
settleCountryUrl2: row.settleCountryUrl2,
avatarUrl: row.avatarUrl,
avatarUrl: row.avatarUrl
}).then((res) => {
this.treeData = row;
this.treeData.countryUrl2Base64 = res.countryUrl2Base64;
this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64;
this.treeData.avatarUrlBase64 = res.avatarUrlBase64;
this.treeData = row
this.treeData.countryUrl2Base64 = res.countryUrl2Base64
this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
this.treeData.avatarUrlBase64 = res.avatarUrlBase64
this.ifShow = true;
});
this.ifShow = true
})
},
//点击节点
// 点击节点
NodeClick(e, data) {},
//默认展开
// 默认展开
toggleExpand(data, val) {
if (Array.isArray(data)) {
data.forEach((item) => {
this.$set(item, "expand", val);
this.$set(item, 'expand', val)
if (item.children) {
this.toggleExpand(item.children, val);
this.toggleExpand(item.children, val)
}
});
})
} else {
this.$set(data, "expand", val);
this.$set(data, 'expand', val)
if (data.children) {
this.toggleExpand(data.children, val);
this.toggleExpand(data.children, val)
}
}
},
collapse(list) {
list.forEach((child) => {
if (child.expand) {
child.expand = false;
child.expand = false
}
child.children && this.collapse(child.children);
});
child.children && this.collapse(child.children)
})
},
//展开
// 展开
onExpand(e, data) {
if ("expand" in data) {
data.expand = !data.expand;
if ('expand' in data) {
data.expand = !data.expand
if (!data.expand && data.children) {
this.collapse(data.children);
this.collapse(data.children)
}
} else {
this.$set(data, "expand", true);
this.$set(data, 'expand', true)
}
},
getSearch() {
this.loading = true
getAzFramework(this.queryParams).then((res) => {
this.data = res.data[0];
this.toggleExpand(this.data, true);
});
this.data = res.data[0]
this.toggleExpand(this.data, true)
}).finally(() => {
this.loading = false
})
},
reChongzhi() {
resetHandle() {
this.$refs.topMemberSelect.reset()
this.queryParams = {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 5,
type:2
};
this.getSearch();
},
},
};
type: 2
}
this.getSearch()
}
}
}
</script>
<style lang="scss" scoped>
@ -592,6 +621,7 @@ export default {
::v-deep .org-tree-container {
display: block;
background: rgba(1, 1, 1, 0) !important;
overflow-x: auto;
}
::v-deep .xrBox {
.neibox {
@ -677,9 +707,7 @@ export default {
::v-deep .el-dialog__body {
padding: 0;
}
::v-deep .org-tree-container {
display: block;
}
// ::v-deep .xrBox {
// }
@ -814,9 +842,7 @@ export default {
}
}
}
::v-deep .org-tree-container {
display: block;
}
.page {
padding: 10px 20px;
background: #f9f9f9;

492
src/views/framework/architecture/azjg3.vue
View File

@ -2,66 +2,68 @@
<div class="page">
<topBar
v-if="topList.length > 0"
:topList="topList"
:top-list="topList"
:moren="moren"
></topBar>
/>
<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
clearable
v-model="queryParams.memberCode"
></el-input></el-form-item
></el-col>
clearable
/></el-form-item></el-col>
<el-col :span="4">
<el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
<el-select
v-model="queryParams.memberSettlePeriodId"
clearable
:placeholder="'请选择'"
v-model="queryParams.memberSettlePeriodId"
>
<el-option
v-for="item in memberSettlePeriodList"
:key="item.pkId"
:label="item.settleDate"
:value="item.pkId"
></el-option> </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-input
clearable
v-model="queryParams.level"
></el-input></el-form-item
></el-col>
clearable
/></el-form-item></el-col>
<el-col :span="4">
<el-form-item :label="'是否固定'" prop="cantz">
<el-select clearable :placeholder="'请选择'" v-model="cantz">
<el-select v-model="cantz" clearable :placeholder="'请选择'">
<el-option
v-for="(item, index) in tzList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-form-item
></el-col>
/>
</el-select> </el-form-item></el-col>
<el-col :span="4" style="margin-left: 30px">
<div class="searchbox">
<el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button>
<el-button @click="reChongzhi"> {{ '重置' }}</el-button>
<el-button
:loading="loading"
class="searchbtn"
@click="getSearch"
> {{ '搜索' }}</el-button>
<el-button @click="resetHandle"> {{ '重置' }}</el-button>
<el-button @click="goback"> {{ '返回' }}</el-button>
</div>
</el-col>
</el-row></el-form
>
</el-row></el-form>
</div>
<div class="theorgtree">
<div class="lefttop">
<div class="single" v-for="(item, index) in avaerInfoList" :key="index">
<img :src="item.value" alt="" />
<div v-for="(item, index) in avaerInfoList" :key="index" class="single">
<img :src="item.value" alt="">
<div class="singletitle">{{ item.name }}</div>
</div>
</div>
@ -69,15 +71,15 @@
<div class="tree-content" @wheel="handleWheel" @mousedown.stop="move">
<div :style="{ transform: `scale(${scale})` }">
<vue2-org-tree
ref="orgTree"
:data="data"
collapsable
ref="orgTree"
:render-content="renderContent"
v-bind="$listeners"
@on-expand="onExpand"
@on-node-click="NodeClick"
@on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout"
:renderContent="renderContent"
v-bind="$listeners"
/>
</div>
</div>
@ -98,11 +100,11 @@
<img
class="img1"
:src="'data:image/png;base64,' + popdata.avatarUrlBase64"
/>
>
<img
class="img2"
:src="'data:image/png;base64,' + popdata.countryUrl2Base64"
/>
>
</div>
<div class="centerbox">
<div class="lineboex">
@ -113,6 +115,10 @@
<div class="linetitle">{{ '会员姓名' }}</div>
<div class="linecontent">{{ popdata.name }}</div>
</div>
<div class="lineboex">
<div class="linetitle">安置部门</div>
<div class="linecontent">{{ `第${popdata.placeDept}部门` }}</div>
</div>
<div class="lineboex">
<div class="linetitle">{{ '支付日期' }}</div>
<div class="linecontent">{{ popdata.payDate }}</div>
@ -121,14 +127,14 @@
<div class="rightimg">
<img
:src="'data:image/png;base64,' + popdata.settleCountryUrl2Base64"
/>
<div>{{'结算国家'}}</div>
>
<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>
@ -136,6 +142,8 @@
<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>
@ -147,6 +155,8 @@
<div class="linecontent">{{ popdata.leftRepeatPurchaseTotal }}</div>
<div class="linecontent">{{ popdata.leftFirstSurplus }}</div>
<div class="linecontent">{{ popdata.leftRepeatPurchaseSurplus }}</div>
<!-- <div class="linecontent">{{ popdata.aNewBox || 0 }}</div>
<div class="linecontent">{{ popdata.aSumBox || 0 }}</div> -->
</div>
<div class="flexbox">
<div class="thetitle">右区</div>
@ -160,11 +170,13 @@
<div class="linecontent">
{{ popdata.rightRepeatPurchaseSurplus }}
</div>
<!-- <div class="linecontent">{{ popdata.bNewBox || 0 }}</div>
<div class="linecontent">{{ popdata.bSumBox || 0 }}</div> -->
</div>
</div>
</div>
<div class="copyContent" ref="copyContent" v-show="false">
<div v-show="false" ref="copyContent" class="copyContent">
<div>{{ '会员编号' }}：{{ popdata.memberCode }}</div>
<div>{{ '会员姓名' }}：{{ popdata.name }}</div>
<div>{{ '支付日期' }}：{{ popdata.payDate }}</div>
@ -208,296 +220,321 @@
popdata.rightRepeatPurchaseSurplus
}}
</div>
<div>
新増套数 {{ popdata.aNewBox }}&nbsp;&nbsp;{{
popdata.aSumBox
}}
</div>
<div>
累计套数 {{ popdata.bNewBox }}&nbsp;&nbsp;{{
popdata.bSumBox
}}
</div>
</div>
</div>
</template>
<script>
import topBar from "@/components/topBar";
import html2canvas from "html2canvas";
<script>
import topBar from '@/components/topBar'
import html2canvas from 'html2canvas'
import {
getAzFramework,
getAvarerInfo,
getMemberSettlePeriod,
getUrlBase,
} from "@/api/archityecture";
import { isLocals } from "../../../utils/numberToCurrency";
getUrlBase
} from '@/api/archityecture'
import { isLocals } from '../../../utils/numberToCurrency'
import TopMemberSelect from '@/components/top-member-select/index.vue'
export default {
name: "Azjg3",
name: 'Azjg3',
components: {
topBar,
TopMemberSelect
},
data() {
return {
moren: "azjg3",
moren: 'azjg3',
topList: [
{
name: '方案一',
path: "azjg",
path: 'azjg'
},
{
name: '方案二',
path: "azjg2",
path: 'azjg2'
},
{
name: '方案三',
path: "azjg3",
path: 'azjg3'
},
{
name: '方案四',
path: "azjg4",
path: 'azjg4'
},
{
name: "方案五",
path: "azjg5",
},
name: '方案五',
path: 'azjg5'
}
],
queryParams: {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 3,
type: 3,
type: 3
},
basicSwitch: false,
basicInfo: { id: null, label: null },
data: {},
avaerInfoList: [],
memberSettlePeriodList: [], //期数
memberSettlePeriodList: [], // 期数
tzList: [
{ value: 0, label: "是" },
{ value: 1, label: "否" },
{ value: 0, label: '是' },
{ value: 1, label: '否' }
],
cantz: 1, //0不可拖拽,1可拖拽
cantz: 1, // 0不可拖拽,1可拖拽
popdata: {},
scale: 1,
};
loading: false
}
},
created() {
this.getSearch();
this.getAvarerInfo();
// this.getSearch()
this.getAvarerInfo()
},
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))
}
},
isLocals,
copyText(data) {
this.popdata = data;
this.popdata = data
setTimeout(() => {
const copyContent = this.$refs.copyContent;
const textLines = Array.from(copyContent.querySelectorAll("div")).map(
const copyContent = this.$refs.copyContent
const textLines = Array.from(copyContent.querySelectorAll('div')).map(
(div) => div.textContent.trim()
);
const text = textLines.join("\n");
const tempInput = document.createElement("textarea");
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
)
const text = textLines.join('\n')
const tempInput = document.createElement('textarea')
tempInput.value = text
document.body.appendChild(tempInput)
tempInput.select()
try {
document.execCommand("copy");
document.execCommand('copy')
this.$message({
message: '复制成功',
type: "success",
});
type: 'success'
})
} catch (error) {
this.$message({
message: "复制失败",
type: "warning",
});
message: '复制失败',
type: 'warning'
})
}
tempInput.remove();
window.getSelection().removeAllRanges();
}, 50);
tempInput.remove()
window.getSelection().removeAllRanges()
}, 50)
},
//返回
// 返回
goback() {
this.queryParams.memberCode = this.data.parentMemberCode;
this.getSearch();
this.queryParams.memberCode = this.data.parentMemberCode
this.getSearch()
},
//拖拽移动
// 拖拽移动
move(e) {
if (this.cantz == 0) {
return;
return
}
const odiv = e.currentTarget; // 获取元素
const odiv = e.currentTarget // 获取元素
// 算出鼠标相对元素的位置
const disX = e.clientX - odiv.offsetLeft;
const disY = e.clientY - odiv.offsetTop;
const disX = e.clientX - odiv.offsetLeft
const disY = e.clientY - odiv.offsetTop
document.onmousemove = (e) => {
// 鼠标按下并移动的事件
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
const left = e.clientX - disX;
const top = e.clientY - disY;
const left = e.clientX - disX
const top = e.clientY - disY
// 绑定元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left;
this.positionX = top
this.positionY = left
// 移动当前元素
odiv.style.left = left + "px";
odiv.style.top = top + "px";
};
odiv.style.left = left + 'px'
odiv.style.top = top + 'px'
}
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
document.onmousemove = null
document.onmouseup = null
}
},
getAvarerInfo() {
getAvarerInfo().then((res) => {
this.avaerInfoList = res.data;
});
this.avaerInfoList = res.data
})
getMemberSettlePeriod().then((res) => {
this.memberSettlePeriodList = res.data;
this.memberSettlePeriodList = res.data
this.memberSettlePeriodList.forEach((ele) => {
if (ele.isThisDay == 0) {
this.queryParams.memberSettlePeriodId = ele.pkId;
this.queryParams.memberSettlePeriodId = ele.pkId
}
});
});
})
})
},
//鼠标移入
// 鼠标移入
onMouseover(e, data) {
this.basicInfo = data;
this.basicSwitch = true;
this.basicInfo = data
this.basicSwitch = true
},
//鼠标移出
// 鼠标移出
onMouseout(e, data) {
this.basicSwitch = false;
this.basicSwitch = false
},
//渲染节点
// 渲染节点
renderContent(h, data) {
if (!data || Object.keys(data).length === 0) {
return
}
return (
<div class="rendercontent">
<div class="toprender">
<div class="leftimg">
<img class="img1" src={data.avatarUrl} />
<img class="img2" src={data.countryUrl2} />
<div class='rendercontent'>
<div class='toprender'>
<div class='leftimg'>
<img class='img1' src={data.avatarUrl} />
<img class='img2' src={data.countryUrl2} />
</div>
<div class="centerbox">
<div class="lineboex">
<div class="linetitle">{ '会员编号' }</div>
<div class="linecontent">{data.memberCode}</div>
<div class='centerbox'>
<div class='lineboex'>
<div class='linetitle'>{ '会员编号' }</div>
<div class='linecontent'>{data.memberCode}</div>
</div>
<div class="lineboex">
<div class="linetitle">{ '会员姓名' }</div>
<div class="linecontent">{data.name}</div>
<div class='lineboex'>
<div class='linetitle'>{ '会员姓名' }</div>
<div class='linecontent'>{data.name}</div>
</div>
<div class="lineboex">
<div class="linetitle">{ '支付日期' }</div>
<div class="linecontent">{data.payDate}</div>
<div class='lineboex'>
<div class='linetitle'>安置部门</div>
<div class='linecontent'>{ `第${data.placeDept}部门` }</div>
</div>
<div class='lineboex'>
<div class='linetitle'>{ '支付日期' }</div>
<div class='linecontent'>{data.payDate}</div>
</div>
</div>
<div class="rightimg">
<div class='rightimg'>
<img src={data.settleCountryUrl2} />
<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='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>
<div class="flexbox">
<div class="thetitle">左区</div>
<div class="linecontent">{data.leftRealNewPv}</div>
<div class="linecontent">{data.leftFirstPurchaseAdd}</div>
<div class="linecontent">{data.leftRepeatPurchaseAdd}</div>
<div class="linecontent">{data.leftRealTotal}</div>
<div class="linecontent">{data.leftFirstTotal}</div>
<div class="linecontent">{data.leftRepeatPurchaseTotal}</div>
<div class="linecontent">{data.leftFirstSurplus}</div>
<div class="linecontent">{data.leftRepeatPurchaseSurplus}</div>
<div class='flexbox'>
<div class='thetitle'>左区</div>
<div class='linecontent'>{data.leftRealNewPv}</div>
<div class='linecontent'>{data.leftFirstPurchaseAdd}</div>
<div class='linecontent'>{data.leftRepeatPurchaseAdd}</div>
<div class='linecontent'>{data.leftRealTotal}</div>
<div class='linecontent'>{data.leftFirstTotal}</div>
<div class='linecontent'>{data.leftRepeatPurchaseTotal}</div>
<div class='linecontent'>{data.leftFirstSurplus}</div>
<div class='linecontent'>{data.leftRepeatPurchaseSurplus}</div>
</div>
<div class="flexbox">
<div class="thetitle">右区</div>
<div class="linecontent">{data.rightRealNewPv}</div>
<div class="linecontent">{data.rightFirstPurchaseAdd}</div>
<div class="linecontent">{data.rightRepeatPurchaseAdd}</div>
<div class="linecontent">{data.rightRealTotal}</div>
<div class="linecontent">{data.rightFirstTotal}</div>
<div class="linecontent">{data.rightRepeatPurchaseTotal}</div>
<div class="linecontent">{data.rightFirstSurplus}</div>
<div class="linecontent">{data.rightRepeatPurchaseSurplus}</div>
<div class='flexbox'>
<div class='thetitle'>右区</div>
<div class='linecontent'>{data.rightRealNewPv}</div>
<div class='linecontent'>{data.rightFirstPurchaseAdd}</div>
<div class='linecontent'>{data.rightRepeatPurchaseAdd}</div>
<div class='linecontent'>{data.rightRealTotal}</div>
<div class='linecontent'>{data.rightFirstTotal}</div>
<div class='linecontent'>{data.rightRepeatPurchaseTotal}</div>
<div class='linecontent'>{data.rightFirstSurplus}</div>
<div class='linecontent'>{data.rightRepeatPurchaseSurplus}</div>
</div>
</div>
<div class="footerbox">
<div class='footerbox'>
<div
class="footerbtn btn1"
class='footerbtn btn1'
on-click={() => {
this.downloadImage(data);
this.downloadImage(data)
}}
>
下载图片
</div>
<div
class="footerbtn btn2"
class='footerbtn btn2'
on-click={() => {
this.copyText(data);
this.copyText(data)
}}
>
复制文字
</div>
<div
class="footerbtn btn3"
class='footerbtn btn3'
on-click={() => {
event.stopPropagation(), this.goTop(data);
event.stopPropagation(), this.goTop(data)
}}
>
{'置顶'}
</div>
</div>
</div>
);
)
},
//下载图片
// 下载图片
async downloadImage(data) {
//转换为base64格式
// 转换为base64格式
await getUrlBase({
countryUrl2: data.countryUrl2,
settleCountryUrl2: data.settleCountryUrl2,
avatarUrl: data.avatarUrl,
avatarUrl: data.avatarUrl
}).then((res) => {
this.popdata = data;
this.popdata.countryUrl2Base64 = res.countryUrl2Base64;
this.popdata.settleCountryUrl2Base64 = res.settleCountryUrl2Base64;
this.popdata.avatarUrlBase64 = res.avatarUrlBase64;
});
const element = this.$refs.htmlContent;
this.popdata = data
this.popdata.countryUrl2Base64 = res.countryUrl2Base64
this.popdata.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
this.popdata.avatarUrlBase64 = res.avatarUrlBase64
})
const element = this.$refs.htmlContent
// 使用html2canvas将节点生成为图片，添加延迟等待
await new Promise((resolve) => setTimeout(resolve, 50)); // 根据实际情况调整延迟时间
element.style.display = "block";
await new Promise((resolve) => setTimeout(resolve, 50)) // 根据实际情况调整延迟时间
element.style.display = 'block'
// 使用html2canvas将节点生成为图片
const canvas = await html2canvas(element);
const image = canvas.toDataURL("image/png");
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")
),
}),
]);
'image/png': await new Promise((resolve) =>
canvas.toBlob(resolve, 'image/png')
)
})
])
this.$message({
message: '复制成功',
type: "success",
});
type: 'success'
})
} catch (error) {
// this.$message({
// message: "复制失败",
@ -505,79 +542,81 @@ export default {
// });
}
// 下载图片到本地
const link = document.createElement("a");
link.href = image;
link.download = "image.png";
link.click();
const link = document.createElement('a')
link.href = image
link.download = 'image.png'
link.click()
// 隐藏图片
element.style.display = "none";
element.style.display = 'none'
},
//置顶
// 置顶
goTop(row) {
this.queryParams.memberCode = row.memberCode;
this.getSearch();
this.queryParams.memberCode = row.memberCode
this.getSearch()
},
//点击节点
// 点击节点
NodeClick(e, data) {},
//默认展开
// 默认展开
toggleExpand(data, val) {
if (Array.isArray(data)) {
data.forEach((item) => {
this.$set(item, "expand", val);
this.$set(item, 'expand', val)
if (item.children) {
this.toggleExpand(item.children, val);
this.toggleExpand(item.children, val)
}
});
})
} else {
this.$set(data, "expand", val);
this.$set(data, 'expand', val)
if (data.children) {
this.toggleExpand(data.children, val);
this.toggleExpand(data.children, val)
}
}
},
collapse(list) {
list.forEach((child) => {
if (child.expand) {
child.expand = false;
child.expand = false
}
child.children && this.collapse(child.children);
});
child.children && this.collapse(child.children)
})
},
//展开
// 展开
onExpand(e, data) {
if ("expand" in data) {
data.expand = !data.expand;
if ('expand' in data) {
data.expand = !data.expand
if (!data.expand && data.children) {
this.collapse(data.children);
this.collapse(data.children)
}
} else {
this.$set(data, "expand", true);
this.$set(data, 'expand', true)
}
},
getSearch() {
this.loading = true
getAzFramework(this.queryParams).then((res) => {
res.data.forEach((ele) => {
ele.countryUrl2Base64 = "";
ele.settleCountryUrl2Base64 = "";
ele.avatarUrlBase64 = "";
});
this.data = res.data[0];
this.toggleExpand(this.data, true);
console.log("🌈this.data", this.data);
});
ele.countryUrl2Base64 = ''
ele.settleCountryUrl2Base64 = ''
ele.avatarUrlBase64 = ''
})
this.data = res.data[0]
this.toggleExpand(this.data, true)
}).finally(() => {
this.loading = false
})
},
reChongzhi() {
resetHandle() {
this.$refs.topMemberSelect.reset()
this.queryParams = {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 3,
type: 3,
};
this.getSearch();
},
},
};
type: 3
}
this.getSearch()
}
}
}
</script>
<style lang="scss" scoped>
@ -625,9 +664,7 @@ export default {
::v-deep .el-dialog__body {
padding: 0;
}
::v-deep .org-tree-container {
display: block;
}
::v-deep .xrBox {
.neibox {
// padding: 20px;
@ -799,6 +836,7 @@ export default {
::v-deep .org-tree-container {
display: block;
background: rgba(1, 1, 1, 0) !important;
}
.page {
padding: 10px 20px !important;

370
src/views/framework/architecture/azjg4.vue
View File

@ -2,58 +2,61 @@
<div class="page">
<topBar
v-if="topList.length > 0"
:topList="topList"
:top-list="topList"
:moren="moren"
></topBar>
/>
<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
clearable
v-model="queryParams.memberCode"
></el-input></el-form-item
></el-col>
clearable
/></el-form-item></el-col>
<el-col :span="4">
<el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
<el-select
v-model="queryParams.memberSettlePeriodId"
clearable
:placeholder="'请选择'"
v-model="queryParams.memberSettlePeriodId"
>
<el-option
v-for="item in memberSettlePeriodList"
:key="item.pkId"
:label="item.settleDate"
:value="item.pkId"
></el-option> </el-select></el-form-item
></el-col>
/> </el-select></el-form-item></el-col>
<el-col :span="4">
<el-form-item :label="'是否固定'" prop="cantz">
<el-select clearable :placeholder="'请选择'" v-model="cantz">
<el-select v-model="cantz" clearable :placeholder="'请选择'">
<el-option
v-for="(item, index) in tzList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-form-item
></el-col>
/>
</el-select> </el-form-item></el-col>
<el-col :span="4" style="margin-left: 30px">
<div class="searchbox">
<el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button>
<el-button @click="reChongzhi"> {{ '重置' }}</el-button>
<el-button
:loading="loading"
class="searchbtn"
@click="getSearch"
> {{ '搜索' }}</el-button>
<el-button @click="resetHandle"> {{ '重置' }}</el-button>
<el-button @click="goback"> {{ '返回' }}</el-button>
</div>
</el-col>
</el-row></el-form
>
</el-row></el-form>
</div>
<div class="theorgtree">
<div class="lefttop">
<div class="single" v-for="(item, index) in avaerInfoList" :key="index">
<img :src="item.value" alt="" />
<div v-for="(item, index) in avaerInfoList" :key="index" class="single">
<img :src="item.value" alt="">
<div class="singletitle">{{ item.name }}</div>
</div>
</div>
@ -63,11 +66,11 @@
<vue2-org-tree
:data="data"
collapsable
:render-content="renderContent"
@on-expand="onExpand"
@on-node-click="NodeClick"
@on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout"
:renderContent="renderContent"
/>
</div>
</div>
@ -85,11 +88,11 @@
<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">
@ -101,7 +104,11 @@
<div class="linecontent">{{ treeData.name }}</div>
</div>
<div class="lineboex">
<div class="linetitle">{{'支付日期'}}</div>
<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>
@ -110,14 +117,14 @@
:src="
'data:image/png;base64,' + treeData.settleCountryUrl2Base64
"
/>
<div>{{'结算国家'}}</div>
>
<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>
@ -125,6 +132,8 @@
<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>
@ -138,6 +147,8 @@
<div class="linecontent">
{{ data.leftRepeatPurchaseSurplus }}
</div>
<!-- <div class="linecontent">{{ data.aNewBox || 0 }}</div>
<div class="linecontent">{{ data.aSumBox || 0 }}</div> -->
</div>
<div class="flexbox">
<div class="thetitle">右区</div>
@ -151,6 +162,8 @@
<div class="linecontent">
{{ data.rightRepeatPurchaseSurplus }}
</div>
<!-- <div class="linecontent">{{ data.bNewBox || 0 }}</div>
<div class="linecontent">{{ data.bSumBox || 0 }}</div> -->
</div>
</div>
</div>
@ -161,7 +174,7 @@
</div>
</div>
</el-dialog>
<div class="copyContent" ref="copyContent" v-show="false">
<div v-show="false" ref="copyContent" class="copyContent">
<div>{{ '会员编号' }}：{{ treeData.memberCode }}</div>
<div>{{ '会员姓名' }}：{{ treeData.name }}</div>
<div>{{ '支付日期' }}：{{ treeData.payDate }}</div>
@ -210,49 +223,51 @@
</template>
<script>
import topBar from "@/components/topBar";
import html2canvas from "html2canvas";
import topBar from '@/components/topBar'
import html2canvas from 'html2canvas'
import {
getAzFramework,
getAvarerInfo,
getMemberSettlePeriod,
getUrlBase,
} from "@/api/archityecture";
import { isLocals } from "../../../utils/numberToCurrency";
getUrlBase
} from '@/api/archityecture'
import { isLocals } from '../../../utils/numberToCurrency'
import TopMemberSelect from '@/components/top-member-select/index.vue'
export default {
name: "Azjg4",
name: 'Azjg4',
components: {
topBar,
TopMemberSelect
},
data() {
return {
moren: "azjg4",
moren: 'azjg4',
topList: [
{
name: '方案一',
path: "azjg",
path: 'azjg'
},
{
name: '方案二',
path: "azjg2",
path: 'azjg2'
},
{
name: '方案三',
path: "azjg3",
path: 'azjg3'
},
{
name: '方案四',
path: "azjg4",
path: 'azjg4'
},
{
name: "方案五",
path: "azjg5",
},
name: '方案五',
path: 'azjg5'
}
],
queryParams: {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
type:4
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
type: 4
},
basicSwitch: false,
basicInfo: { id: null, label: null },
@ -260,102 +275,109 @@ export default {
treeData: {},
ifShow: false,
avaerInfoList: [],
memberSettlePeriodList: [], //期数
memberSettlePeriodList: [], // 期数
tzList: [
{ value: 0, label: "是" },
{ value: 1, label: "否" },
{ value: 0, label: '是' },
{ value: 1, label: '否' }
],
cantz: 1, //0不可拖拽,1可拖拽
cantz: 1, // 0不可拖拽,1可拖拽
scale: 1,
};
loading: false
}
},
created() {
this.getSearch();
this.getAvarerInfo();
// this.getSearch()
this.getAvarerInfo()
},
methods: {
//拖拽移动
TopMemberHandleChange(val) {
if (val) {
this.queryParams.memberCode = val
this.getSearch()
}
},
// 拖拽移动
move(e) {
if (this.cantz == 0) {
return;
return
}
const odiv = e.currentTarget; // 获取元素
const odiv = e.currentTarget // 获取元素
// 算出鼠标相对元素的位置
const disX = e.clientX - odiv.offsetLeft;
const disY = e.clientY - odiv.offsetTop;
const disX = e.clientX - odiv.offsetLeft
const disY = e.clientY - odiv.offsetTop
document.onmousemove = (e) => {
// 鼠标按下并移动的事件
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
const left = e.clientX - disX;
const top = e.clientY - disY;
const left = e.clientX - disX
const top = e.clientY - disY
// 绑定元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left;
this.positionX = top
this.positionY = left
// 移动当前元素
odiv.style.left = left + "px";
odiv.style.top = top + "px";
};
odiv.style.left = left + 'px'
odiv.style.top = top + 'px'
}
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
document.onmousemove = null
document.onmouseup = null
}
},
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))
}
},
isLocals,
copyText() {
const copyContent = this.$refs.copyContent;
const textLines = Array.from(copyContent.querySelectorAll("div")).map(
const copyContent = this.$refs.copyContent
const textLines = Array.from(copyContent.querySelectorAll('div')).map(
(div) => div.textContent.trim()
);
const text =textLines.join('\n');
const tempInput = document.createElement("textarea");
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
)
const text = textLines.join('\n')
const tempInput = document.createElement('textarea')
tempInput.value = text
document.body.appendChild(tempInput)
tempInput.select()
try {
document.execCommand("copy");
document.execCommand('copy')
this.$message({
message: '复制成功',
type: "success",
});
type: 'success'
})
} catch (error) {
this.$message({
message: "复制失败",
type: "warning",
});
message: '复制失败',
type: 'warning'
})
}
tempInput.remove();
window.getSelection().removeAllRanges();
tempInput.remove()
window.getSelection().removeAllRanges()
},
async downloadImage(data) {
this.popdata = data;
const element = this.$refs.htmlContent;
this.popdata = data
const element = this.$refs.htmlContent
// 使用html2canvas将节点生成为图片
const canvas = await html2canvas(element);
const image = canvas.toDataURL("image/png");
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")
),
}),
]);
'image/png': await new Promise((resolve) =>
canvas.toBlob(resolve, 'image/png')
)
})
])
this.$message({
message: '复制成功',
type: "success",
});
type: 'success'
})
} catch (error) {
// this.$message({
// message: "复制失败",
@ -363,63 +385,66 @@ export default {
// });
}
// 下载图片到本地
const link = document.createElement("a");
link.href = image;
link.download = "image.png";
link.click();
const link = document.createElement('a')
link.href = image
link.download = 'image.png'
link.click()
},
//返回
// 返回
goback() {
this.queryParams.memberCode = this.data.parentMemberCode;
this.getSearch();
this.queryParams.memberCode = this.data.parentMemberCode
this.getSearch()
},
getAvarerInfo() {
getAvarerInfo().then((res) => {
this.avaerInfoList = res.data;
});
this.avaerInfoList = res.data
})
getMemberSettlePeriod().then((res) => {
this.memberSettlePeriodList = res.data;
this.memberSettlePeriodList = res.data
this.memberSettlePeriodList.forEach((ele) => {
if (ele.isThisDay == 0) {
this.queryParams.memberSettlePeriodId = ele.pkId;
this.queryParams.memberSettlePeriodId = ele.pkId
}
});
});
})
})
},
//鼠标移入
// 鼠标移入
onMouseover(e, data) {
this.basicInfo = data;
this.basicSwitch = true;
this.basicInfo = data
this.basicSwitch = true
},
//鼠标移出
// 鼠标移出
onMouseout(e, data) {
this.basicSwitch = false;
this.basicSwitch = false
},
//渲染节点
// 渲染节点
renderContent(h, data) {
if (!data || Object.keys(data).length === 0) {
return
}
return (
<div class="xrBox">
<div class="neibox" on-click={() => this.showPover(data)}>
<div class="topbox">
<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">
<div class='centerbox'>
<div class='cflexbox'>
<img src={data.countryUrl2}></img>
<div class="matitle">{data.memberCode}</div>
<div class='matitle'>{data.memberCode}</div>
</div>
<div class="cflexbox">
<div class='cflexbox'>
<img src={data.settleCountryUrl2}></img>
<div class="matitle">{data.name}</div>
<div class='matitle'>{data.name}</div>
</div>
</div>
<div class="footerbox">
<div class='footerbox'>
{/* 阻止冒泡事件 */}
<div
class="ftopbtn"
class='ftopbtn'
on-click={() => {
event.stopPropagation(), this.goTop(data);
event.stopPropagation(), this.goTop(data)
}}
>
{'置顶'}
@ -427,84 +452,87 @@ export default {
</div>
</div>
</div>
);
)
},
//置顶
// 置顶
goTop(row) {
this.queryParams.memberCode = row.memberCode;
this.getSearch();
this.queryParams.memberCode = row.memberCode
this.getSearch()
},
showPover(row) {
if(row.memberCode){
if (row.memberCode) {
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;
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;
});
this.ifShow = true
})
}
},
//点击节点
// 点击节点
NodeClick(e, data) {},
//默认展开
// 默认展开
toggleExpand(data, val) {
if (Array.isArray(data)) {
data.forEach((item) => {
this.$set(item, "expand", val);
this.$set(item, 'expand', val)
if (item.children) {
this.toggleExpand(item.children, val);
this.toggleExpand(item.children, val)
}
});
})
} else {
this.$set(data, "expand", val);
this.$set(data, 'expand', val)
if (data.children) {
this.toggleExpand(data.children, val);
this.toggleExpand(data.children, val)
}
}
},
collapse(list) {
list.forEach((child) => {
if (child.expand) {
child.expand = false;
child.expand = false
}
child.children && this.collapse(child.children);
});
child.children && this.collapse(child.children)
})
},
//展开
// 展开
onExpand(e, data) {
if ("expand" in data) {
data.expand = !data.expand;
if ('expand' in data) {
data.expand = !data.expand
if (!data.expand && data.children) {
this.collapse(data.children);
this.collapse(data.children)
}
} else {
this.$set(data, "expand", true);
this.$set(data, 'expand', true)
}
},
getSearch() {
this.loading = true
getAzFramework(this.queryParams).then((res) => {
this.data = res.data[0];
//默认是否展开
this.toggleExpand(this.data, false);
});
this.data = res.data[0]
// 默认是否展开
this.toggleExpand(this.data, false)
}).finally(() => {
this.loading = false
})
},
reChongzhi() {
resetHandle() {
this.$refs.topMemberSelect.reset()
this.queryParams = {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
type:4
};
this.getSearch();
},
},
};
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
type: 4
}
this.getSearch()
}
}
}
</script>
<style lang="scss" scoped>

893
src/views/framework/architecture/azjg5.vue
View File

@ -1,528 +1,348 @@
<template>
<div class="page">
<topBar
v-if="topList.length > 0"
:topList="topList"
:moren="moren"
></topBar>
<div class="thetopbox">
<el-form ref="form" :model="queryParams" label-width="100px">
<el-row>
<el-col :span="4">
<el-form-item :label="'会员编号'" prop="memberCode">
<el-input
clearable
v-model="queryParams.memberCode"
></el-input></el-form-item
></el-col>
<el-col :span="4">
<el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
<el-select
clearable
:placeholder="'请选择'"
v-model="queryParams.memberSettlePeriodId"
>
<el-option
v-for="item in memberSettlePeriodList"
:key="item.pkId"
:label="item.settleDate"
:value="item.pkId"
></el-option> </el-select></el-form-item
></el-col>
<el-col :span="4">
<div class="page">
<topBar
v-if="topList.length > 0"
:top-list="topList"
:moren="moren"
/>
<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="'请选择'"
>
<el-option
v-for="item in memberSettlePeriodList"
:key="item.pkId"
:label="item.settleDate"
:value="item.pkId"
/> </el-select></el-form-item></el-col>
<el-col :span="4">
<el-form-item :label="'展示层数'" prop="level">
<el-input
clearable
v-model="queryParams.level"
></el-input></el-form-item
></el-col>
<el-col :span="4" style="margin-left: 30px">
<div class="searchbox">
<el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button>
<el-button @click="reChongzhi"> {{ '重置' }}</el-button>
<el-button @click="goback"> {{ '返回' }}</el-button>
</div>
</el-col>
</el-row></el-form
>
</div>
<div class="theorgtree">
<!-- <div class="lefttop">
<div class="single" v-for="(item, index) in avaerInfoList" :key="index">
<img :src="item.value" alt="" />
<div class="singletitle">{{ item.name }}</div>
</div>
</div> -->
<div class="tree">
<div class="tree-content" @mousedown.stop="move" @wheel="handleWheel">
<div :style="{ transform: `scale(${scale})` }">
<vue2-org-tree
:data="data"
collapsable
ref="orgTree"
@on-expand="onExpand"
@on-node-click="NodeClick"
@on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout"
:renderContent="renderContent"
v-bind="$listeners"
/>
clearable
/></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>
</div>
</div>
</el-col>
</el-row></el-form>
</div>
<div class="theorgtree">
<div class="lefttop">
<div v-for="(item, index) in rangeList" :key="index" class="single">
<div class="colorbox" :style="{background: item.color}" />
<div class="singletitle">{{ item.gradeName }}</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>
<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.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>
<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>
<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>
</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 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 class="copyContent" ref="copyContent" v-show="false">
<div>{{ '会员编号' }}：{{ treeData.memberCode }}</div>
<div>{{ '会员姓名' }}：{{ treeData.name }}</div>
<div>{{ '支付日期' }}：{{ treeData.payDate }}</div>
<div>{{ '业绩' }}({{ isLocals() }})&nbsp;&nbsp;左区&nbsp;&nbsp;右区</div>
<div>
真实新增&nbsp;&nbsp;{{ treeData.leftRealNewPv }}&nbsp;&nbsp;{{
treeData.rightRealNewPv
}}
</div>
<div>
首购新增&nbsp;&nbsp;{{ treeData.leftFirstPurchaseAdd }}&nbsp;&nbsp;{{
treeData.rightFirstPurchaseAdd
}}
</div>
<div>
复购新增{{ treeData.leftRepeatPurchaseAdd }}&nbsp;&nbsp;
{{ treeData.rightRepeatPurchaseAdd }}
</div>
<div>
真实累计{{ treeData.leftRealTotal }}&nbsp;&nbsp;{{
treeData.rightRealTotal
}}
</div>
<div>
首购累计{{ treeData.leftFirstTotal }}&nbsp;&nbsp;{{
treeData.rightFirstTotal
}}
</div>
<div>
复购累计 {{ treeData.leftRepeatPurchaseTotal }}&nbsp;&nbsp;{{
treeData.rightRepeatPurchaseTotal
}}
</div>
<div>
首购结余{{ treeData.leftFirstSurplus }}&nbsp;&nbsp;{{
treeData.rightFirstSurplus
}}
</div>
<div>
复购结余 {{ treeData.leftRepeatPurchaseSurplus }}&nbsp;&nbsp;{{
treeData.rightRepeatPurchaseSurplus
}}
</div>
</div>
</div>
</template>
<script>
import html2canvas from "html2canvas";
import topBar from "@/components/topBar";
import {
getAzFramework5,
getAvarerInfo,
getMemberSettlePeriod,
getUrlBase,
} from "@/api/archityecture";
import { isLocals } from "../../../utils/numberToCurrency";
export default {
name: "Azjg5",
components: {
topBar,
</div>
</template>
<script>
import html2canvas from 'html2canvas'
import topBar from '@/components/topBar'
import {
getAzFramework5,
getAvarerInfo,
getMemberSettlePeriod,
getUrlBase
} from '@/api/archityecture'
import { isLocals } from '../../../utils/numberToCurrency'
import TopMemberSelect from '@/components/top-member-select/index.vue'
import tabBarMixin from './mixins/tab-bar'
import { getgradeRanglist } from '@/api/level'
export default {
name: 'Azjg5',
components: {
topBar,
TopMemberSelect
},
mixins: [tabBarMixin],
data() {
return {
moren: 'azjg5',
queryParams: {
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 6
},
basicSwitch: false,
basicInfo: { id: null, label: null },
data: [],
treeData: {},
ifShow: false,
memberSettlePeriodList: [], // 期数
rangeList: [], // 等级列表
cantz: 1, // 0不可拖拽,1可拖拽
scale: 1,
loading: false
}
},
created() {
// this.getSearch()
this.getRangeList()
this.getAvarerInfo()
},
methods: {
getBorderColor(grade) {
const color = this.rangeList.find((item) => item.gradeName === grade)?.color
return color || '#e0e0e0'
},
data() {
return {
moren: "azjg5",
topList: [
{
name: '方案一',
path: "azjg",
},
{
name: '方案二',
path: "azjg2",
},
{
name: '方案三',
path: "azjg3",
},
{
name: '方案四',
path: "azjg4",
},
{
name: "方案五",
path: "azjg5",
},
],
queryParams: {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
level: 6,
},
basicSwitch: false,
basicInfo: { id: null, label: null },
data: {},
treeData: {},
ifShow: false,
memberSettlePeriodList: [], //期数
cantz: 1, //0不可拖拽,1可拖拽
scale: 1,
};
getRangeList() {
getgradeRanglist().then((res) => {
this.rangeList = res.data || []
})
},
created() {
this.getSearch();
this.getAvarerInfo();
TopMemberHandleChange(val) {
if (val) {
this.queryParams.memberCode = val
this.getSearch()
}
},
methods: {
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));
}
},
isLocals,
copyText() {
const copyContent = this.$refs.copyContent;
const textLines = Array.from(copyContent.querySelectorAll("div")).map(
(div) => div.textContent.trim()
);
const text = textLines.join("\n");
const tempInput = document.createElement("textarea");
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
try {
document.execCommand("copy");
this.$message({
message: '复制成功',
type: "success",
});
} catch (error) {
this.$message({
message: "复制失败",
type: "warning",
});
}
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; // 获取元素
// 算出鼠标相对元素的位置
const disX = e.clientX - odiv.offsetLeft;
const disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e) => {
// 鼠标按下并移动的事件
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
const left = e.clientX - disX;
const top = e.clientY - disY;
// 绑定元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left;
// 移动当前元素
odiv.style.left = left + "px";
odiv.style.top = top + "px";
};
document.onmouseup = () => {
document.onmousemove = null;
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() {
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;
this.basicSwitch = true;
},
//鼠标移出
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) {
return (
<div class="xrBox">
{/* 判断data.codeName是否为空 */}
<div class="neibox">
{data.memberCode ? (
<div >
<div class="topbox">
<div>{data.name}</div>
<div>{data.memberCode}</div>
{/* <div>会员姓名：{data.name}</div>
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))
}
},
isLocals,
// 返回
goback() {
this.queryParams.memberCode = this.data.parentMemberCode
this.getSearch()
},
// 拖拽移动
move(e) {
if (this.cantz == 0) {
return
}
const odiv = e.currentTarget // 获取元素
// 算出鼠标相对元素的位置
const disX = e.clientX - odiv.offsetLeft
const disY = e.clientY - odiv.offsetTop
document.onmousemove = (e) => {
// 鼠标按下并移动的事件
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
const left = e.clientX - disX
const top = e.clientY - disY
// 绑定元素位置到positionX和positionY上面
this.positionX = top
this.positionY = left
// 移动当前元素
odiv.style.left = left + 'px'
odiv.style.top = top + 'px'
}
document.onmouseup = () => {
document.onmousemove = null
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() {
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
this.basicSwitch = true
},
// 鼠标移出
onMouseout(e, data) {
this.basicSwitch = false
},
// 渲染节点
renderContent(h, data) {
if (!data || Object.keys(data).length === 0) {
return
}
// 获取边框和阴影颜色
const borderColor = this.getBorderColor(data.gradeName)
// 阴影色转rgba，透明度0.25（直接在boxShadow中拼接，不再声明shadowColor）
return (
<div
class='xrBox'
style={{
border: `4px solid ${borderColor}`,
borderRadius: '12px',
boxShadow: `0 4px 18px 0 ${borderColor}40, 0 0 0 4px #fff`, // 增加白色外发光提升对比度
padding: '0',
background: '#fff',
transition: 'box-shadow 0.3s, border-color 0.3s'
}}
>
{/* 判断data.codeName是否为空 */}
<div class='neibox'>
{data.memberCode ? (
<div
on-contextmenu={() => this.rightClick(this.$event, data)}
>
<div class='topbox'>
<div>{data.name}</div>
<div>{data.memberCode}</div>
<div>{data.awardsName}</div>
<div>第{data.placeDept}部门</div>
{/* <div>会员姓名：{data.name}</div>
<div>会员编号：{data.memberCode}</div> */}
</div>
<div class="footerbox">
{/* 阻止冒泡事件 */}
<div
class="ftopbtn"
style={{ backgroundColor: data.color }}
on-click={() => {
event.stopPropagation(), this.goTop(data);
}}
>
{'置顶'}
</div>
</div>
</div>
) : null}
</div>
</div>
) : null}
</div>
);
},
//置顶
goTop(row) {
this.queryParams.memberCode = row.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) {},
//默认展开
toggleExpand(data, val) {
if (Array.isArray(data)) {
data.forEach((item) => {
this.$set(item, "expand", val);
if (item.children) {
this.toggleExpand(item.children, val);
}
});
} else {
this.$set(data, "expand", val);
if (data.children) {
this.toggleExpand(data.children, val);
}
}
},
collapse(list) {
list.forEach((child) => {
if (child.expand) {
child.expand = false;
}
child.children && this.collapse(child.children);
});
},
//展开
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() {
getAzFramework5(this.queryParams).then((res) => {
this.data = res.data[0];
this.toggleExpand(this.data, true);
});
},
reChongzhi() {
this.queryParams = {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
level: 5,
type:2
};
this.getSearch();
},
</div>
)
},
};
</script>
// 置顶
goTop(row) {
this.queryParams.memberCode = row.memberCode
this.getSearch()
},
rightClick(e, data) {
event.preventDefault()
this.queryParams.memberCode = data.memberCode
this.getSearch()
},
// 点击节点
NodeClick(e, data) {},
// 默认展开
toggleExpand(data, val) {
if (Array.isArray(data)) {
data.forEach((item) => {
this.$set(item, 'expand', val)
if (item.children) {
this.toggleExpand(item.children, val)
}
})
} else {
this.$set(data, 'expand', val)
if (data.children) {
this.toggleExpand(data.children, val)
}
}
},
collapse(list) {
list.forEach((child) => {
if (child.expand) {
child.expand = false
}
child.children && this.collapse(child.children)
})
},
// 展开
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() {
this.loading = true
getAzFramework5(this.queryParams).then((res) => {
this.data = res.data[0]
this.toggleExpand(this.data, true)
}).finally(() => {
this.loading = false
})
},
resetHandle() {
this.$refs.topMemberSelect.reset()
this.queryParams = {
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 5,
type: 2
}
this.getSearch()
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__headerbtn{
top: 5px;
@ -559,7 +379,7 @@
// overflow: auto;
}
}
::v-deep .org-tree-node-btn {
display: none;
}
@ -588,7 +408,7 @@
margin: 0 auto;
text-align: left;
//min-width: 150px;
}
}
.centerbox {
display: flex;
align-items: center;
@ -623,7 +443,7 @@
justify-content: center;
color: #ffffff;
cursor: pointer;
margin-top: 10px;
}
}
@ -631,24 +451,30 @@
}
.lefttop {
display: flex;
justify-items: center;
align-items: center;
padding-left: 20px;
background: #ffffff;
.single {
margin: 0 5px;
img {
width: 40px;
height: 40px;
border-radius: 50%;
// box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.5);
}
.singletitle {
text-align: center;
font-size: 10px;
font-family: PingFang SC-Regular, PingFang SC;
}
}
padding: 10px 0 10px 20px;
background: #fff;
border-radius: 8px;
margin-bottom: 10px;
}
.single {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 16px;
}
.colorbox {
width: 24px;
height: 24px;
border-radius: 6px;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
margin-bottom: 4px;
}
.singletitle {
font-size: 12px;
color: #333;
margin-top: 2px;
}
::v-deep .org-tree-node-label .org-tree-node-label-inner {
padding: 0;
@ -656,11 +482,9 @@
::v-deep .el-dialog__body {
padding: 0;
}
::v-deep .org-tree-container {
display: block;
}
// ::v-deep .xrBox {
// }
::v-deep .rendercontent {
.toprender {
@ -793,9 +617,7 @@
}
}
}
::v-deep .org-tree-container {
display: block;
}
.page {
padding: 10px 20px;
background: #f9f9f9;
@ -815,7 +637,7 @@
color: #ffffff;
}
}
}
.theorgtree {
overflow: auto;
@ -826,4 +648,3 @@
margin: 0 auto;
}
</style>

366
src/views/framework/architecture/index.vue
View File

@ -2,70 +2,71 @@
<div class="page">
<topBar
v-if="topList.length > 0"
:topList="topList"
:top-list="topList"
:moren="moren"
></topBar>
/>
<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
clearable
v-model="queryParams.memberCode"
></el-input></el-form-item
></el-col>
clearable
/></el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
<el-select
v-model="queryParams.memberSettlePeriodId"
clearable
:placeholder="'请选择'"
v-model="queryParams.memberSettlePeriodId"
>
<el-option
v-for="item in memberSettlePeriodList"
:key="item.pkId"
:label="item.settleDate"
:value="item.pkId"
></el-option>
/>
</el-select>
<!-- <el-input
clearable
v-model="queryParams.memberSettlePeriodId"
></el-input> -->
</el-form-item></el-col
>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'展示层数'" prop="level">
<el-input
clearable
v-model="queryParams.level"
></el-input></el-form-item
></el-col>
clearable
/></el-form-item></el-col>
<el-col :span="4">
<el-form-item :label="'是否固定'" prop="cantz">
<el-select clearable :placeholder="'请选择'" v-model="cantz">
<el-select v-model="cantz" clearable :placeholder="'请选择'">
<el-option
v-for="(item, index) in tzList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-form-item
></el-col>
/>
</el-select> </el-form-item></el-col>
<el-col :span="4" style="margin-left: 30px">
<div class="searchbox">
<el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button>
<el-button @click="reChongzhi"> {{ '重置' }}</el-button>
<el-button
:loading="loading"
class="searchbtn"
@click="getSearch"
> {{ '搜索' }}</el-button>
<el-button @click="resetHandle"> {{ '重置' }}</el-button>
<el-button @click="goback"> {{ '返回' }}</el-button>
</div>
</el-col>
</el-row></el-form
>
</el-row>
</el-form>
</div>
<div class="lefttop">
<div class="single" v-for="(item, index) in avaerInfoList" :key="index">
<img :src="item.value" alt="" />
<div v-for="(item, index) in avaerInfoList" :key="index" class="single">
<img :src="item.value" alt="">
<div class="singletitle">{{ item.name }}</div>
</div>
</div>
@ -78,11 +79,11 @@
style="height: 100%"
:data="data"
collapsable
:render-content="renderContent"
@on-expand="onExpand"
@on-node-click="NodeClick"
@on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout"
:renderContent="renderContent"
/>
</div>
</div>
@ -100,21 +101,26 @@
<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="linetitle">会员编号</div>
<div class="linecontent">{{ treeData.memberCode }}</div>
</div>
<div class="lineboex">
<div class="linetitle">{{ '会员姓名' }}</div>
<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>
@ -125,14 +131,14 @@
:src="
'data:image/png;base64,' + treeData.settleCountryUrl2Base64
"
/>
<div>{{'结算国家'}}</div>
>
<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>
@ -140,6 +146,8 @@
<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>
@ -148,15 +156,17 @@
<div class="linecontent">
{{ treeData.leftRepeatPurchaseAdd }}
</div>
<div class="linecontent">{{ treeData.leftRealTotal }}</div>
<div class="linecontent">{{ treeData.leftFirstTotal }}</div>
<div class="linecontent">{{ treeData.leftRealTotal || 0 }}</div>
<div class="linecontent">{{ treeData.leftFirstTotal || 0 }}</div>
<div class="linecontent">
{{ treeData.leftRepeatPurchaseTotal }}
{{ treeData.leftRepeatPurchaseTotal || 0 }}
</div>
<div class="linecontent">{{ treeData.leftFirstSurplus }}</div>
<div class="linecontent">{{ treeData.leftFirstSurplus || 0 }}</div>
<div class="linecontent">
{{ treeData.leftRepeatPurchaseSurplus }}
{{ treeData.leftRepeatPurchaseSurplus || 0 }}
</div>
<!-- <div class="linecontent">{{ treeData.aNewBox || 0 }}</div>
<div class="linecontent">{{ treeData.aSumBox || 0 }}</div> -->
</div>
<div class="flexbox">
<div class="thetitle">右区</div>
@ -176,6 +186,8 @@
<div class="linecontent">
{{ treeData.rightRepeatPurchaseSurplus }}
</div>
<!-- <div class="linecontent">{{ treeData.bNewBox || 0 }}</div>
<div class="linecontent">{{ treeData.bSumBox || 0 }}</div> -->
</div>
</div>
</div>
@ -186,7 +198,7 @@
</div>
</div>
</el-dialog>
<div class="copyContent" ref="copyContent" v-show="false">
<div v-show="false" ref="copyContent" class="copyContent">
<div>{{ '会员编号' }}：{{ treeData.memberCode }}</div>
<div>{{ '会员姓名' }}：{{ treeData.name }}</div>
<div>{{ '支付日期' }}：{{ treeData.payDate }}</div>
@ -235,50 +247,32 @@
</template>
<script>
import html2canvas from "html2canvas";
import topBar from "@/components/topBar";
import html2canvas from 'html2canvas'
import topBar from '@/components/topBar'
import {
getAzFramework,
getAvarerInfo,
getMemberSettlePeriod,
getUrlBase,
} from "@/api/archityecture";
import { isLocals } from "../../../utils/numberToCurrency";
getUrlBase
} 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: "Azjg",
name: 'Azjg',
components: {
topBar,
TopMemberSelect
},
mixins: [tabBarMixin],
data() {
return {
moren: "azjg",
topList: [
{
name: '方案一',
path: "azjg",
},
{
name: '方案二',
path: "azjg2",
},
{
name: '方案三',
path: "azjg3",
},
{
name: '方案四',
path: "azjg4",
},
{
name: "方案五",
path: "azjg5",
},
],
moren: 'azjg',
queryParams: {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 7,
type:1
type: 1
},
basicSwitch: false,
basicInfo: { id: null, label: null },
@ -286,53 +280,60 @@ export default {
treeData: {},
ifShow: false,
avaerInfoList: [],
memberSettlePeriodList: [], //期数
cantz: 0, //0不可拖拽,1可拖拽
memberSettlePeriodList: [], // 期数
cantz: 0, // 0不可拖拽,1可拖拽
tzList: [
{ value: 0, label: "是" },
{ value: 1, label: "否" },
{ value: 0, label: '是' },
{ value: 1, label: '否' }
],
scale: 1,
};
loading: false
}
},
created() {
this.getSearch();
this.getAvarerInfo();
// this.getSearch()
this.getAvarerInfo()
},
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))
}
},
isLocals,
copyText() {
const copyContent = this.$refs.copyContent;
const textLines = Array.from(copyContent.querySelectorAll("div")).map(
const copyContent = this.$refs.copyContent
const textLines = Array.from(copyContent.querySelectorAll('div')).map(
(div) => div.textContent.trim()
);
const text =textLines.join('\n');
const tempInput = document.createElement("textarea");
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
)
const text = textLines.join('\n')
const tempInput = document.createElement('textarea')
tempInput.value = text
document.body.appendChild(tempInput)
tempInput.select()
try {
document.execCommand("copy");
document.execCommand('copy')
this.$message({
message: '复制成功',
type: "success",
});
type: 'success'
})
} catch (error) {
this.$message({
message: "复制失败",
type: "warning",
});
message: '复制失败',
type: 'warning'
})
}
tempInput.remove();
window.getSelection().removeAllRanges();
tempInput.remove()
window.getSelection().removeAllRanges()
// const targetElement = document.querySelector(".copyContent");
// // 创建一个 Range 对象并选择要复制的元素
// const range = document.createRange();
@ -367,23 +368,23 @@ export default {
// selection.removeAllRanges();
},
async downloadImage() {
const element = this.$refs.htmlContent;
const element = this.$refs.htmlContent
// 使用html2canvas将节点生成为图片
const canvas = await html2canvas(element);
const image = canvas.toDataURL("image/png");
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")
),
}),
]);
'image/png': await new Promise((resolve) =>
canvas.toBlob(resolve, 'image/png')
)
})
])
this.$message({
message: '复制成功',
type: "success",
});
type: 'success'
})
} catch (error) {
// this.$message({
// message: "复制失败",
@ -391,128 +392,128 @@ export default {
// });
}
// 下载图片到本地
const link = document.createElement("a");
link.href = image;
link.download = "image.png";
link.click();
const link = document.createElement('a')
link.href = image
link.download = 'image.png'
link.click()
},
//返回
// 返回
goback() {
this.queryParams.memberCode = this.data.parentMemberCode;
this.getSearch();
this.queryParams.memberCode = this.data.parentMemberCode
this.getSearch()
},
//拖拽移动
// 拖拽移动
move(e) {
if (this.cantz == 0) {
return;
return
}
const odiv = e.currentTarget; // 获取元素
console.log(e);
const odiv = e.currentTarget // 获取元素
console.log(e)
// 算出鼠标相对元素的位置
const disX = e.clientX - odiv.offsetLeft;
const disY = e.clientY - odiv.offsetTop;
const disX = e.clientX - odiv.offsetLeft
const disY = e.clientY - odiv.offsetTop
document.onmousemove = (e) => {
// 鼠标按下并移动的事件
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
const left = e.clientX - disX;
const top = e.clientY - disY;
const left = e.clientX - disX
const top = e.clientY - disY
// 绑定元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left;
this.positionX = top
this.positionY = left
// 移动当前元素
odiv.style.left = left + "px";
odiv.style.top = top + "px";
};
odiv.style.left = left + 'px'
odiv.style.top = top + 'px'
}
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
document.onmousemove = null
document.onmouseup = null
}
},
getAvarerInfo() {
getAvarerInfo().then((res) => {
this.avaerInfoList = res.data;
});
this.avaerInfoList = res.data
})
getMemberSettlePeriod().then((res) => {
this.memberSettlePeriodList = res.data;
this.memberSettlePeriodList = res.data
this.memberSettlePeriodList.forEach((ele) => {
if (ele.isThisDay == 0) {
this.queryParams.memberSettlePeriodId = ele.pkId;
this.queryParams.memberSettlePeriodId = ele.pkId
}
});
});
})
})
},
//鼠标移入
// 鼠标移入
onMouseover(e, data) {
this.basicInfo = data;
this.basicSwitch = true;
this.basicInfo = data
this.basicSwitch = true
},
//鼠标移出
// 鼠标移出
onMouseout(e, data) {
this.basicSwitch = false;
this.basicSwitch = false
},
//渲染节点
// 渲染节点
renderContent(h, data) {
return (
<div class="neibox">
<div class='neibox'>
<img
on-click={() => this.showPover(data)}
on-contextmenu={() => this.rightClick(this.$event, data)}
src={data.avatarUrl}
></img>
</div>
);
)
},
//右键点击
// 右键点击
rightClick(e, data) {
event.preventDefault();
this.queryParams.memberCode = data.memberCode;
this.getSearch();
event.preventDefault()
this.queryParams.memberCode = data.memberCode
this.getSearch()
},
showPover(row) {
getUrlBase({
countryUrl2: row.countryUrl2,
settleCountryUrl2: row.settleCountryUrl2,
avatarUrl: row.avatarUrl,
avatarUrl: row.avatarUrl
}).then((res) => {
this.treeData = row;
this.treeData.countryUrl2Base64 = res.countryUrl2Base64;
this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64;
this.treeData.avatarUrlBase64 = res.avatarUrlBase64;
this.treeData = row
this.treeData.countryUrl2Base64 = res.countryUrl2Base64
this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
this.treeData.avatarUrlBase64 = res.avatarUrlBase64
this.ifShow = true;
});
this.ifShow = true
})
},
//点击节点
// 点击节点
NodeClick(e, data) {},
//默认展开
// 默认展开
toggleExpand(data, val) {
if (Array.isArray(data)) {
data.forEach((item) => {
this.$set(item, "expand", val);
this.$set(item, 'expand', val)
if (item.children) {
this.toggleExpand(item.children, val);
this.toggleExpand(item.children, val)
}
});
})
} else {
this.$set(data, "expand", val);
this.$set(data, 'expand', val)
if (data.children) {
this.toggleExpand(data.children, val);
this.toggleExpand(data.children, val)
}
}
},
collapse(list) {
list.forEach((child) => {
if (child.expand) {
child.expand = false;
child.expand = false
}
child.children && this.collapse(child.children);
});
child.children && this.collapse(child.children)
})
},
//展开
// 展开
onExpand(e, data) {
// if ("expand" in data) {
// data.expand = !data.expand;
@ -524,22 +525,26 @@ export default {
// }
},
getSearch() {
this.loading = true
getAzFramework(this.queryParams).then((res) => {
this.data = res.data[0];
this.toggleExpand(this.data, true);
});
this.data = res.data[0]
this.toggleExpand(this.data, true)
}).finally(() => {
this.loading = false
})
},
reChongzhi() {
resetHandle() {
this.$refs.topMemberSelect.reset()
this.queryParams = {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 7,
type:1
};
this.getSearch();
},
},
};
type: 1
}
this.getSearch()
}
}
}
</script>
<style lang="scss" scoped>
@ -606,6 +611,7 @@ export default {
::v-deep .org-tree-container {
display: block;
background: rgba(1, 1, 1, 0) !important;
overflow-x: auto;
}
::v-deep .neibox {
padding: 0;

16
src/views/framework/architecture/mixins/tab-bar.js Normal file
View File

@ -0,0 +1,16 @@
export default {
data() {
return {
topList: [
{
name: '方案一',
path: 'azjg'
},
{
name: '方案五',
path: 'azjg5'
}
]
}
}
}

4
src/views/information/business/order.vue
View File

@ -312,14 +312,14 @@
:label="'操作'"
>
<template slot-scope="scope">
<el-button
<!-- <el-button
v-hasButtons="['OrderBusinessProduct']"
style="color: rgba(167, 116, 176, 1); margin-left: 10px"
type="text"
size="small"
@click="changeGoods(scope.row.orderCode)"
>
调换货物</el-button>
调换货物</el-button> -->
<el-button
v-hasButtons="['OrderBusinessAddress']"
style="color: rgba(243, 169, 0, 1)"

2
src/views/information/specialBusiness/waterInjection/index.vue
View File

@ -392,7 +392,7 @@ export default {
this.download(
'/bonus/manage/special/download',
{},
`${this.$t('新零售注水业绩')}${new Date().getTime()}.xlsx`
`${this.$t('注水业绩')}${new Date().getTime()}.xlsx`
)
},
addRules() {

160
src/views/login/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="login-container">
<div class="top_item">
<div class="title_no">全球一体化系统管理平台</div>
<div class="title_no">{{ systemTypes }}系统管理平台</div>
<dv-decoration-5
:color="['#4278a3', '#4278a3']"
style="width: 100%; height: 100px"
@ -12,7 +12,7 @@
alt="">
</div> -->
<div class="contain">
<dv-border-box-7 :color="['#0f2e66', '#139efa']"></dv-border-box-7>
<dv-border-box-7 :color="['#0f2e66', '#139efa']" />
</div>
<div class="login_contain">
<el-form
@ -27,7 +27,7 @@
<h3 class="title">Login Form</h3>
</div> -->
<div class="tit1">
<div class="act">密码登录</div>
<div class="act">密码登录({{ systemTypes }})</div>
<!-- <div>短信登录</div> -->
</div>
<el-form-item prop="username">
@ -35,15 +35,15 @@
<svg-icon icon-class="user" />
</span>
<el-input
clearable
ref="username"
v-model="loginForm.username"
@blur="getCheck"
clearable
placeholder="Username"
name="username"
type="text"
tabindex="1"
auto-complete="on"
@blur="getCheck"
/>
</el-form-item>
@ -52,10 +52,10 @@
<svg-icon icon-class="password" />
</span>
<el-input
clearable
:key="passwordType"
ref="password"
v-model="loginForm.password"
clearable
:type="passwordType"
placeholder="Password"
name="password"
@ -75,27 +75,27 @@
<svg-icon icon-class="password" />
</span>
<el-input
v-model.trim="loginForm.code"
clearable
placeholder="请输入验证码"
v-model.trim="loginForm.code"
@keyup.enter.native="handleLogin"
></el-input>
/>
</el-form-item>
<div class="img">
<img :src="codeUrl" @click="getVerifyCode" />
<img :src="codeUrl" @click="getVerifyCode">
</div>
</div>
<div class="yzm" v-if="ismsgCode">
<div v-if="ismsgCode" class="yzm">
<el-form-item prop="smsCode" style="flex: 1">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input
v-model.trim="loginForm.smsCode"
clearable
placeholder="请输入短信验证码"
v-model.trim="loginForm.smsCode"
@keyup.enter.native="handleLogin"
></el-input>
/>
</el-form-item>
<div class="img">
<div class="hqyzm1" :class="isSend ? 'hui' : ''" @click="submitForm">{{ getCode }}</div>
@ -106,8 +106,7 @@
type="primary"
class="toLogin"
@click.native.prevent="handleLogin"
>登录</el-button
>
>登录</el-button>
<!-- <div class="tips">
<span style="margin-right:20px;">username: admin</span>
@ -119,75 +118,76 @@
</template>
<script>
import { validUsername } from "@/utils/validate";
import { getCodeImg, userCheck,userSend } from "@/api/user";
import { validUsername } from '@/utils/validate'
import { getCodeImg, userCheck, userSend } from '@/api/user'
export default {
name: "Login",
name: 'Login',
data() {
const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) {
callback(new Error("Please enter the correct user name"));
callback(new Error('Please enter the correct user name'))
} else {
callback();
callback()
}
};
}
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("The password can not be less than 6 digits"));
callback(new Error('The password can not be less than 6 digits'))
} else {
callback();
callback()
}
};
}
return {
loginForm: {
// username: 'admin',
// password: 'admin123',
username: "",
password: "",
username: '',
password: ''
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入用户名" },
{ required: true, trigger: 'blur', message: '请输入用户名' }
],
password: [
{ required: true, trigger: "blur", message: '请输入密码' },
{ required: true, trigger: 'blur', message: '请输入密码' }
],
code: [
{ required: true, trigger: "blur", message:"请输入验证码" },
{ required: true, trigger: 'blur', message: '请输入验证码' }
],
smsCode: [
{ required: true, trigger: "blur", message:"请输入短信验证码" },
],
{ required: true, trigger: 'blur', message: '请输入短信验证码' }
]
},
loading: false,
passwordType: "password",
passwordType: 'password',
redirect: undefined,
codeUrl: "",
ismsgCode:false,
codeUrl: '',
ismsgCode: false,
isSend: false,
beginTime: 60,
getCode: '获取验证码',
timer: '',
};
systemTypes: process.env.VUE_APP_SYSTEM_TYPE
}
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
handler: function(route) {
this.redirect = route.query && route.query.redirect
},
immediate: true,
},
immediate: true
}
},
created() {
// 获取验证码
this.getVerifyCode();
this.getVerifyCode()
},
methods: {
startTime() {
if (this.isSend) return
this.isSend = true
this.getCode = this.beginTime + 's后重新发送'
let that = this
const that = this
this.timer = setInterval(() => {
this.beginTime--
this.getCode = this.beginTime + 's后重新发送'
@ -199,71 +199,71 @@ export default {
}
}, 1000)
},
submitForm(){
if(!this.isSend){
userSend({
userName: this.loginForm.username
}).then(res=>{
this.startTime()
if(res.code == 200){
this.$message({
message: res.msg,
type: "success",
});
}
})
submitForm() {
if (!this.isSend) {
userSend({
userName: this.loginForm.username
}).then(res => {
this.startTime()
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
})
}
})
}
},
getCheck() {
userCheck({
userCheck({
userName: this.loginForm.username
}).then(res=>{
if(res.data == 0){
}).then(res => {
if (res.data == 0) {
this.ismsgCode = true
}else{
} else {
this.ismsgCode = false
}
});
})
},
getVerifyCode() {
getCodeImg().then((res) => {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
});
this.codeUrl = 'data:image/gif;base64,' + res.img
this.loginForm.uuid = res.uuid
})
},
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = "password";
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus();
});
this.$refs.password.focus()
})
},
handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
this.loading = true
this.$store
.dispatch("user/login", this.loginForm)
.dispatch('user/login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || "/" });
this.loading = false;
this.$router.push({ path: this.redirect || '/' })
this.loading = false
})
.catch(() => {
this.getVerifyCode();
this.loginForm.code = "";
this.loading = false;
});
this.getVerifyCode()
this.loginForm.code = ''
this.loading = false
})
} else {
console.log("error submit!!");
return false;
console.log('error submit!!')
return false
}
});
},
},
};
})
}
}
}
</script>
<style lang="scss">

8
vue.config.js
View File

@ -36,7 +36,7 @@ module.exports = {
lintOnSave: false,
productionSourceMap: false,
devServer: {
port: 9555,
port: 9890,
open: true,
overlay: {
warnings: false,
@ -44,9 +44,9 @@ module.exports = {
},
proxy: {
'/prod-api': {
target: 'http://t-app.beida777.com',
changeOrigin: true
// pathRewrite: { '^/prod-api': '' }
target: 'http://192.168.0.86:8080',
changeOrigin: true,
pathRewrite: { '^/prod-api': '' }
}
}
},