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

feat(commodity): 订单套数字段

This commit is contained in:
ywk 2025-04-14 17:51:17 +08:00
parent a4dedcb54e
commit ce77fb6251
7 changed files with 1557 additions and 1576 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,51 +2,47 @@
<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">
<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>
@ -54,13 +50,12 @@
<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 +63,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,11 +89,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">
@ -119,14 +114,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 +129,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 +148,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 +169,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 +181,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 +229,51 @@
</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 { isLocals } from '../../../utils/numberToCurrency'
export default {
name: "Azjg2",
name: 'Azjg2',
components: {
topBar,
topBar
},
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 +281,106 @@ 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可拖拽
scale: 1,
};
cantz: 1, // 0不可拖拽,1可拖拽
scale: 1
}
},
created() {
this.getSearch();
this.getAvarerInfo();
this.getSearch()
this.getAvarerInfo()
},
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));
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 +388,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 +436,24 @@ export default {
// </div>
// </div>
// </div>
//渲染节点
// 渲染节点
renderContent(h, data) {
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 +463,81 @@ 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() {
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)
})
},
reChongzhi() {
this.queryParams = {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 5,
type:2
};
this.getSearch();
},
},
};
type: 2
}
this.getSearch()
}
}
}
</script>
<style lang="scss" scoped>

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

@ -2,51 +2,47 @@
<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">
<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>
@ -54,14 +50,13 @@
<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 +64,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 +93,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">
@ -121,14 +116,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 +131,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 +144,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 +159,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 +209,305 @@
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'
export default {
name: "Azjg3",
name: 'Azjg3',
components: {
topBar,
topBar
},
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,
};
scale: 1
}
},
created() {
this.getSearch();
this.getAvarerInfo();
this.getSearch()
this.getAvarerInfo()
},
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));
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) {
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.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 +515,79 @@ 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() {
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);
ele.countryUrl2Base64 = ''
ele.settleCountryUrl2Base64 = ''
ele.avatarUrlBase64 = ''
})
this.data = res.data[0]
this.toggleExpand(this.data, true)
console.log("🌈this.data", this.data);
});
console.log('🌈this.data', this.data)
})
},
reChongzhi() {
this.queryParams = {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 3,
type: 3,
};
this.getSearch();
},
},
};
type: 3
}
this.getSearch()
}
}
}
</script>
<style lang="scss" scoped>

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

@ -2,44 +2,41 @@
<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">
<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>
@ -47,13 +44,12 @@
<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 +59,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 +81,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 +97,7 @@
<div class="linecontent">{{ treeData.name }}</div>
</div>
<div class="lineboex">
<div class="linetitle">{{'支付日期'}}</div>
<div class="linetitle">{{ '支付日期' }}</div>
<div class="linecontent">{{ treeData.payDate }}</div>
</div>
</div>
@ -110,14 +106,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 +121,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 +136,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 +151,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 +163,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 +212,49 @@
</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'
export default {
name: "Azjg4",
name: 'Azjg4',
components: {
topBar,
topBar
},
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 +262,102 @@ 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可拖拽
scale: 1,
};
cantz: 1, // 0不可拖拽,1可拖拽
scale: 1
}
},
created() {
this.getSearch();
this.getAvarerInfo();
this.getSearch()
this.getAvarerInfo()
},
methods: {
//拖拽移动
// 拖拽移动
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 +365,63 @@ 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) {
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 +429,83 @@ 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() {
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)
})
},
reChongzhi() {
this.queryParams = {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
type:4
};
this.getSearch();
},
},
};
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
type: 4
}
this.getSearch()
}
}
}
</script>
<style lang="scss" scoped>

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

File diff suppressed because it is too large Load Diff

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

@ -2,57 +2,53 @@
<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">
<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>
@ -60,12 +56,11 @@
<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 +73,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,11 +95,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">
@ -125,14 +120,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 +135,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 +145,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 +175,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 +187,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 +236,50 @@
</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 { isLocals } from '../../../utils/numberToCurrency'
export default {
name: "Azjg",
name: 'Azjg',
components: {
topBar,
topBar
},
data() {
return {
moren: "azjg",
moren: 'azjg',
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: 7,
type:1
type: 1
},
basicSwitch: false,
basicInfo: { id: null, label: null },
@ -286,53 +287,53 @@ 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,
};
scale: 1
}
},
created() {
this.getSearch();
this.getAvarerInfo();
this.getSearch()
this.getAvarerInfo()
},
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));
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;
@ -525,21 +526,21 @@ export default {
},
getSearch() {
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)
})
},
reChongzhi() {
this.queryParams = {
memberSettlePeriodId: "", //期数
memberCode: "", //会员编号
memberSettlePeriodId: '', // 期数
memberCode: '', // 会员编号
level: 7,
type:1
};
this.getSearch();
},
},
};
type: 1
}
this.getSearch()
}
}
}
</script>
<style lang="scss" scoped>

313
src/views/logistics/commodity/ckspdd.vue
View File

@ -2,77 +2,77 @@
<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">
<el-form-item :label="'产品编号'" prop="waresCode">
<el-input clearable v-model="queryParams.waresCode"></el-input>
<el-input v-model="queryParams.waresCode" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'产品名称'" prop="waresName">
<el-input clearable v-model="queryParams.waresName"></el-input>
<el-input v-model="queryParams.waresName" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="SKU编码">
<el-input clearable v-model="queryParams.skuCode"></el-input>
<el-input v-model="queryParams.skuCode" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'订单类型'" prop="orderType">
<el-select
v-model="queryParams.orderType"
clearable
:placeholder="'请选择'"
v-model="queryParams.orderType"
>
<el-option
v-for="item in orderTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'订单编号'" prop="orderCode">
<el-input clearable v-model="queryParams.orderCode"></el-input>
<el-input v-model="queryParams.orderCode" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'会员编号'" prop="memberCode">
<el-input clearable v-model="queryParams.memberCode"></el-input>
<el-input v-model="queryParams.memberCode" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'会员姓名'" prop="memberName">
<el-input clearable v-model="queryParams.memberName"></el-input>
<el-input v-model="queryParams.memberName" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'联系方式'" prop="phone">
<el-input clearable v-model="queryParams.phone"></el-input>
<el-input v-model="queryParams.phone" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'商品编号'" prop="commodityCode">
<el-input
clearable
v-model="queryParams.commodityCode"
></el-input>
clearable
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'商品名称'" prop="commodityName">
<el-input
clearable
v-model="queryParams.commodityName"
></el-input>
clearable
/>
</el-form-item>
</el-col>
<el-col :span="4">
@ -81,9 +81,9 @@
prop="buyMemberCode"
>
<el-input
clearable
v-model="queryParams.buyMemberCode"
></el-input>
clearable
/>
</el-form-item>
</el-col>
<el-col :span="4">
@ -92,57 +92,57 @@
prop="buyMemberName"
>
<el-input
clearable
v-model="queryParams.buyMemberName"
></el-input>
clearable
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'收货人'" prop="recName">
<el-input clearable v-model="queryParams.recName"></el-input>
<el-input v-model="queryParams.recName" clearable />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'发货类型'" prop="shippingChannel">
<el-select
v-model="queryParams.shippingChannel"
clearable
:placeholder="'请选择'"
v-model="queryParams.shippingChannel"
>
<el-option
v-for="item in shippingTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="$t('系统类型')">
<el-select clearable v-model="queryParams.systemType">
<el-select v-model="queryParams.systemType" clearable>
<el-option
v-for="item in systemTypes"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="支付方式" prop="payType">
<el-select
v-model="queryParams.payType"
clearable
:placeholder="'请选择'"
v-model="queryParams.payType"
>
<el-option
v-for="item in payTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
@ -152,28 +152,24 @@
<el-date-picker
v-model="queryParams.times1"
type="daterange"
@change="changeTime"
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
value-format="yyyy-MM-dd"
>
</el-date-picker
></el-form-item>
@change="changeTime"
/></el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="'支付日期'">
<el-date-picker
v-model="queryParams.times2"
type="daterange"
@change="changeTime2"
:range-separator="'至'"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
value-format="yyyy-MM-dd"
>
</el-date-picker
></el-form-item>
@change="changeTime2"
/></el-form-item>
</el-col>
<el-col :span="4">
<el-form-item :label="'快递单号'" prop="logisticsCode">
@ -199,8 +195,7 @@
<el-col :span="4" style="padding-left: 30px">
<div class="searchbox">
<el-button class="searchbtn" @click="getSearch">
{{ '搜索' }}</el-button
>
{{ '搜索' }}</el-button>
<el-button @click="reChongzhi"> {{ '重置' }}</el-button>
</div>
</el-col>
@ -210,13 +205,12 @@
<div class="maintop">
<div class="mainbtn">
<el-button
v-has-buttons="['ckspddExport']"
size="small"
class="thebtn2"
@click="handleExport"
v-has-buttons="['ckspddExport']"
>
{{ '导出' }}</el-button
>
{{ '导出' }}</el-button>
</div>
</div>
<div class="main">
@ -227,10 +221,10 @@
style="width: 100%"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
:span-method="objectSpanMethod"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection"> </el-table-column>
<el-table-column type="selection" />
<el-table-column align="center" prop="" :label="'产品主图'">
<template slot-scope="scope">
<img
@ -241,44 +235,40 @@
"
:src="scope.row.cover1"
alt=""
/>
>
</template>
</el-table-column>
<el-table-column
align="center"
prop="waresCode"
:label="'产品编号'"
>
</el-table-column>
min-width="120px"
/>
<el-table-column
min-width="200px"
align="center"
prop="waresName"
:label="'产品名称'"
>
</el-table-column>
/>
<el-table-column
min-width="200px"
align="center"
prop="specsName"
:label="'产品规格'"
>
</el-table-column>
/>
<el-table-column
min-width="200px"
align="center"
prop="skuCode"
label="SKU编码"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="weight"
:label="'重量' + 'KG'"
>
</el-table-column>
/>
<el-table-column
align="center"
min-width="120px"
@ -293,88 +283,77 @@
align="center"
prop="quantity"
:label="'产品数量'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="productPriceTotal"
min-width="120px"
:formatter="productPriceTotal"
:label="'产品总价' + '(￥)'"
>
</el-table-column>
/>
<el-table-column
align="center"
min-width="200px"
prop="commodityCode"
:label="'商品编号'"
>
</el-table-column>
/>
<el-table-column
align="center"
min-width="200px"
prop="commodityName"
:label="'商品名称'"
>
</el-table-column>
/>
<el-table-column
align="center"
min-width="200px"
prop="waresQuantity"
:label="'商品数量'"
>
</el-table-column>
/>
<el-table-column
align="center"
min-width="200px"
prop="orderCode"
:label="'订单编号'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="orderTypeStr"
:label="'订单类型'"
>
</el-table-column>
min-width="120px"
/>
<el-table-column
align="center"
prop="memberCode"
:label="'会员编号'"
>
</el-table-column>
min-width="120px"
/>
<el-table-column
align="center"
prop="memberName"
:label="'会员姓名'"
>
</el-table-column>
/>
<el-table-column
align="center"
min-width="120px"
prop="phone"
:label="'联系方式'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="shippingChannelStr"
:label="'发货类型'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="recName"
:label="'收货人'"
>
</el-table-column>
/>
<el-table-column
align="center"
min-width="120px"
prop="recPhone"
:label="'收货电话'"
>
</el-table-column>
/>
<el-table-column
align="center"
min-width="120px"
@ -391,104 +370,88 @@
align="center"
prop="recProvinceName"
:label="'省'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="recCityName"
:label="'市'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="recCountryName"
:label="'区/县'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="recAddress"
:label="'详细地址'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="orderAmount"
:label="'订单金额'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="orderAchieve"
:label="'订单业绩'"
/>
<el-table-column
align="center"
prop="orderAssAchieve"
:label="'商品订单' + 'BV'"
min-width="120px"
/>
<el-table-column
align="center"
prop="postage"
:label="'订单邮费'"
>
</el-table-column>
<el-table-column
align="center"
prop="orderAchieve"
:label="'订单业绩'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="deliveryWayStr"
:label="'发货方式'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="operateScope"
:label="'供应方式'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="tranTypeStr"
:label="'运输方式'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="preSaleStatusStr"
:label="'预售状态'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="orderStatusStr"
:label="'订单状态'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="payTypeStr"
:label="'支付方式'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="logisticsCompany"
:label="'物流公司'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="logisticsCode"
:label="'快递单号'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="remark"
:label="'备注'"
>
</el-table-column>
/>
<el-table-column
align="center"
prop="systemType"
@ -497,8 +460,8 @@
<template slot-scope="scope">
<div
v-for="item in systemTypes"
:key="item.value"
v-if="scope.row.systemType == item.value"
:key="item.value"
>
{{ item.label }}
</div>
@ -508,14 +471,14 @@
align="center"
prop="creationTime"
:label="'创建日期'"
>
</el-table-column>
min-width="160px"
/>
<el-table-column
align="center"
prop="payTime"
:label="'支付日期'"
>
</el-table-column>
min-width="160px"
/>
</el-table>
</div>
</div>
@ -533,124 +496,124 @@
</template>
<script>
import topBar from "@/components/topBar";
import * as log from "@/api/logistics";
import * as del from "@/api/delivery";
import { getStatus } from "@/api/notice";
import topBar from '@/components/topBar'
import * as log from '@/api/logistics'
import * as del from '@/api/delivery'
import { getStatus } from '@/api/notice'
export default {
name: "Ckspdd",
name: 'Ckspdd',
components: {
topBar,
topBar
},
filters: {
numFilter(value) {
// 截取当前数据到小数点后两位
let realVal = parseFloat(value).toFixed(2);
return realVal;
},
const realVal = parseFloat(value).toFixed(2)
return realVal
}
},
data() {
return {
moren: "ckspdd",
moren: 'ckspdd',
topList: [
{
name: '商品订单',
path: "spdd",
path: 'spdd'
},
{
name: '订单详情',
path: "ckspdd",
},
path: 'ckspdd'
}
],
multipleSelection: [],
queryParams: {
pageNum: 1,
pageSize: 50,
orderCode: "",
orderStatus: "",
orderCode: '',
orderStatus: ''
},
orderStatusList: [],
tableData: [],
orderTypeList: [],
shippingTypeList: [],
payTypeList: [],
total: 0,
};
total: 0
}
},
created() {
this.queryParams.orderCode = this.$route.query.orderCode;
this.getOthers();
this.getSearch();
this.getOrderStatus();
this.queryParams.orderCode = this.$route.query.orderCode
this.getOthers()
this.getSearch()
this.getOrderStatus()
},
methods: {
getOrderStatus() {
getStatus().then((res) => {
this.orderStatusList = res.data;
});
this.orderStatusList = res.data
})
},
changeTime(val) {
this.queryParams.startCreateDate = val[0];
this.queryParams.endCreateDate = val[1];
this.queryParams.startCreateDate = val[0]
this.queryParams.endCreateDate = val[1]
},
changeTime2(val) {
this.queryParams.startPayDate = val[0];
this.queryParams.endPayDate = val[1];
this.queryParams.startPayDate = val[0]
this.queryParams.endPayDate = val[1]
},
// 导出
handleExport() {
this.$confirm('是否确认导出所有数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
type: 'warning'
}).then((_) => {
this.download(
"/sale/manage/order/get-order-info-export",
'/sale/manage/order/get-order-info-export',
{ ...this.queryParams },
`商品订单详情${new Date().getTime()}.xlsx`
);
});
)
})
},
getOthers() {
log.getOrderType().then((res) => {
this.orderTypeList = res.data;
});
this.orderTypeList = res.data
})
del.getShippingChannelList().then((res) => {
this.shippingTypeList = res.data;
});
this.shippingTypeList = res.data
})
del.getOrderPayType().then((res) => {
this.payTypeList = res.data;
});
this.payTypeList = res.data
})
},
totalAmount(row) {
let total = "";
let total = ''
total = row.orderAmount * row.quantity;
return total;
total = row.orderAmount * row.quantity
return total
},
goBack() {
this.$router.go(-1);
this.$router.go(-1)
},
handleChange1() {},
getSearch() {
log.getFindOrderList(this.queryParams).then((res) => {
this.tableData = res.rows;
this.total = res.total;
});
this.tableData = res.rows
this.total = res.total
})
},
//重置
// 重置
reChongzhi() {
this.queryParams = {
pageNum: 1,
pageSize: 50,
};
this.getSearch();
pageSize: 50
}
this.getSearch()
},
handleSelectionChange(val) {
this.multipleSelection = val;
this.multipleSelection = val
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// if (columnIndex === 0) {
@ -669,14 +632,14 @@ export default {
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return "warning-row";
return 'warning-row'
} else if (rowIndex % 2 == 0) {
return "success-row";
return 'success-row'
}
return "";
},
},
};
return ''
}
}
}
</script>
<style lang="scss" scoped>

356
src/views/logistics/commodity/index.vue
View File

@ -92,9 +92,9 @@
prop="buyMemberCode"
>
<el-input
clearable
v-model="queryParams.buyMemberCode"
></el-input>
clearable
/>
</el-form-item>
</el-col>
<el-col :span="4">
@ -103,9 +103,9 @@
prop="buyMemberName"
>
<el-input
clearable
v-model="queryParams.buyMemberName"
></el-input>
clearable
/>
</el-form-item>
</el-col>
</el-row>
@ -114,13 +114,13 @@
<el-row>
<el-col :span="4">
<el-form-item :label="$t('系统类型')">
<el-select clearable v-model="queryParams.systemType">
<el-select v-model="queryParams.systemType" clearable>
<el-option
v-for="item in systemTypes"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
/>
</el-select>
</el-form-item>
</el-col>
@ -192,8 +192,7 @@
<el-col :span="4">
<div class="searchbox">
<el-button class="searchbtn" @click="getSearch">
{{ '搜索' }}</el-button
>
{{ '搜索' }}</el-button>
<el-button @click="reChongzhi"> {{ '重置' }}</el-button>
</div>
</el-col>
@ -207,21 +206,20 @@
<div class="maintop">
<div class="mainbtn">
<el-button
size="small"
v-hasButtons="['CommodityExport']"
size="small"
class="thebtn2"
@click="handleExport"
>
{{ '导出' }}</el-button
>
{{ '导出' }}</el-button>
</div>
</div>
<div class="main">
<div class="maintable">
<el-table
v-if="flag"
:data="tableData"
v-loading="loading"
:data="tableData"
style="width: 100%"
height="600px"
:header-cell-style="{ background: '#EEEEEE' }"
@ -232,140 +230,140 @@
<el-table-column type="selection" />
<el-table-column
v-if="dataList[0].key"
align="center"
min-width="200px"
prop="orderCode"
:label="'订单编号'"
v-if="dataList[0].key"
/>
<el-table-column
v-if="dataList[1].key"
align="center"
prop="orderTypeStr"
:label="'订单类型'"
v-if="dataList[1].key"
min-width="120px"
/>
<el-table-column
v-if="dataList[2].key"
align="center"
min-width="120px"
prop="memberCode"
:label="'会员编号'"
v-if="dataList[2].key"
/>
<el-table-column
v-if="dataList[3].key"
align="center"
prop="memberName"
:label="'会员姓名'"
v-if="dataList[3].key"
/>
<el-table-column
v-if="dataList[4].key"
align="center"
min-width="120px"
prop="phone"
:label="'联系方式'"
v-if="dataList[4].key"
/>
<el-table-column
v-if="dataList[5].key"
align="center"
prop="recName"
:label="'收货人'"
v-if="dataList[5].key"
/>
<el-table-column
v-if="dataList[6].key"
align="center"
min-width="120px"
prop="recPhone"
:label="'收货电话'"
v-if="dataList[6].key"
/>
<el-table-column
v-if="dataList[19].key"
align="center"
min-width="120px"
prop="buyMemberCode"
v-if="dataList[19].key"
:label="`${'购买人' + '编号'}`"
/>
<el-table-column
v-if="dataList[20].key"
align="center"
min-width="120px"
prop="buyMemberName"
v-if="dataList[20].key"
:label="`${'购买人' + '姓名'}`"
/>
<el-table-column
v-if="dataList[7].key"
align="center"
prop="recProvinceName"
:label="'省'"
v-if="dataList[7].key"
/>
<el-table-column
v-if="dataList[8].key"
align="center"
prop="recCityName"
:label="'市'"
v-if="dataList[8].key"
/>
<el-table-column
v-if="dataList[9].key"
align="center"
prop="recCountryName"
:label="'区/县'"
v-if="dataList[9].key"
/>
<el-table-column
v-if="dataList[10].key"
align="center"
min-width="200px"
prop="recAddress"
:label="'详细地址'"
v-if="dataList[10].key"
/>
<el-table-column
v-if="dataList[11].key"
align="center"
min-width="100px"
prop="orderAmount"
:label="`${'订单金额'}(${isLocalSymbol()})`"
v-if="dataList[11].key"
:label="`订单金额(${isLocalSymbol()})`"
/>
<el-table-column
v-if="dataList[13].key"
align="center"
min-width="120px"
prop="orderAchieve"
:label="`订单业绩(${isLocalSymbol()})`"
/>
<el-table-column
v-if="dataList[21].key"
align="center"
min-width="100px"
prop="orderAssAchieve"
:label="'商品订单' + 'BV'"
v-if="dataList[21].key"
/>
<el-table-column
v-if="dataList[12].key"
align="center"
min-width="100px"
prop="postage"
:label="'订单邮费'"
v-if="dataList[12].key"
/>
<el-table-column
align="center"
min-width="100px"
prop="orderAchieve"
:label="'订单业绩' + '($)'"
v-if="dataList[13].key"
/>
<el-table-column
v-if="dataList[14].key"
align="center"
prop="deliveryWayStr"
:label="'发货方式'"
min-width="100px"
v-if="dataList[14].key"
/>
<el-table-column
v-if="dataList[15].key"
min-width="100px"
align="center"
prop="payTypeStr"
:label="'支付方式'"
v-if="dataList[15].key"
/>
<el-table-column
v-if="dataList[16].key"
min-width="100px"
align="center"
prop="remark"
:label="'备注'"
v-if="dataList[16].key"
/>
<el-table-column
align="center"
@ -375,26 +373,32 @@
<template slot-scope="scope">
<div
v-for="item in systemTypes"
:key="item.value"
v-if="scope.row.systemType == item.value"
:key="item.value"
>
{{ item.label }}
</div>
</template>
</el-table-column>
<el-table-column
min-width="150px"
v-if="dataList[17].key"
min-width="160px"
align="center"
prop="creationTime"
:label="'创建日期'"
v-if="dataList[17].key"
/>
<el-table-column
min-width="150px"
v-if="dataList[18].key"
min-width="160px"
align="center"
prop="payTime"
:label="'支付日期'"
v-if="dataList[18].key"
label="支付日期"
/>
<el-table-column
min-width="180px"
align="center"
prop="boxNum"
label="订单套数"
/>
<el-table-column
align="center"
@ -407,8 +411,8 @@
<template slot-scope="scope">
<div>
<el-button
type="text"
v-hasButtons="['CommodityOpen']"
type="text"
size="small"
@click.native.prevent="findDetail(scope.row, tableData)"
>
@ -431,118 +435,118 @@
</template>
<script>
import topBar from "@/components/topBar";
import * as log from "@/api/logistics";
import * as api from "@/api/site.js";
import { getRoleMenu, roleDetails, getStatus } from "@/api/notice";
import topBar from '@/components/topBar'
import * as log from '@/api/logistics'
import * as api from '@/api/site.js'
import { getRoleMenu, roleDetails, getStatus } from '@/api/notice'
export default {
name: "Spdd",
name: 'Spdd',
components: {
topBar,
topBar
},
data() {
return {
moren: "spdd",
moren: 'spdd',
dataList: [
{
name: "orderCode",
key: "",
name: 'orderCode',
key: ''
},
{
name: "orderTypeStr",
key: "",
name: 'orderTypeStr',
key: ''
},
{
name: "memberCode",
key: "",
name: 'memberCode',
key: ''
},
{
name: "memberName",
key: "",
name: 'memberName',
key: ''
},
{
name: "phone",
key: "",
name: 'phone',
key: ''
},
{
name: "recName",
key: "",
name: 'recName',
key: ''
},
{
name: "recPhone",
key: "",
name: 'recPhone',
key: ''
},
{
name: "recProvinceName",
key: "",
name: 'recProvinceName',
key: ''
},
{
name: "recCityName",
key: "",
name: 'recCityName',
key: ''
},
{
name: "recCountryName",
key: "",
name: 'recCountryName',
key: ''
},
{
name: "recAddress",
key: "",
name: 'recAddress',
key: ''
},
{
name: "orderAmount",
key: "",
name: 'orderAmount',
key: ''
},
{
name: "postage",
key: "",
name: 'postage',
key: ''
},
{
name: "orderAchieve",
key: "",
name: 'orderAchieve',
key: ''
},
{
name: "deliveryWayStr",
key: "",
name: 'deliveryWayStr',
key: ''
},
{
name: "payTypeStr",
key: "",
name: 'payTypeStr',
key: ''
},
{
name: "remark",
key: "",
name: 'remark',
key: ''
},
{
name: "creationTime",
key: "",
name: 'creationTime',
key: ''
},
{
name: "payTime",
key: "",
name: 'payTime',
key: ''
},
{
name: "buyMemberCode",
key: "",
name: 'buyMemberCode',
key: ''
},
{
name: "buyMemberName",
key: "",
name: 'buyMemberName',
key: ''
},
{
name: "orderAssAchieve",
key: "",
},
name: 'orderAssAchieve',
key: ''
}
],
topList: [
{
name: '商品订单',
path: "spdd",
path: 'spdd'
},
{
name: '订单详情',
path: "ckspdd",
},
path: 'ckspdd'
}
],
multipleSelection: [],
@ -550,24 +554,24 @@ export default {
pageNum: 1,
pageSize: 50,
shoppingAddress: [],
orderCode: "", // 订单编号
memberCode: "", // 会员编号
memberName: "", // 会员名称
phone: "", // 电话
orderType: "", // 订单类型
deliveryWay: "", // 发货方式
payType: "", // 支付方式
recName: "", // 收货人
recPhone: "", // 收货电话
recProvince: "",
recCity: "",
recCountry: "",
recAddress: "", // 详细地址
startCreateDate: "",
endCreateDate: "",
startPayDate: "",
endPayDate: "",
orderStatus: "",
orderCode: '', // 订单编号
memberCode: '', // 会员编号
memberName: '', // 会员名称
phone: '', // 电话
orderType: '', // 订单类型
deliveryWay: '', // 发货方式
payType: '', // 支付方式
recName: '', // 收货人
recPhone: '', // 收货电话
recProvince: '',
recCity: '',
recCountry: '',
recAddress: '', // 详细地址
startCreateDate: '',
endCreateDate: '',
startPayDate: '',
endPayDate: '',
orderStatus: ''
},
loading: false,
tableData: [],
@ -575,113 +579,113 @@ export default {
isActive: false,
areaData: [],
regionParams: {
label: "name",
value: "id",
children: "children",
expandTrigger: "hover",
label: 'name',
value: 'id',
children: 'children',
expandTrigger: 'hover'
},
typeList: [],
fhwayList: [],
paywayList: [],
orderStatusList: [],
total: 0,
flag: false,
};
flag: false
}
},
created() {
this.getData();
this.getSearch();
this.getUserRole();
this.getOrderStatus();
this.getData()
this.getSearch()
this.getUserRole()
this.getOrderStatus()
},
methods: {
getOrderStatus() {
getStatus().then((res) => {
this.orderStatusList = res.data;
});
this.orderStatusList = res.data
})
},
getUserRole() {
getRoleMenu("Commodity").then((res) => {
getRoleMenu('Commodity').then((res) => {
this.dataList.forEach((item) => {
res.data.forEach((items) => {
if (item.name == items) {
item.key = items;
item.key = items
}
this.flag = true;
});
});
});
this.flag = true
})
})
})
},
// 导出
handleExport() {
this.$confirm('是否确认导出所有数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
type: 'warning'
}).then((_) => {
this.download(
"/sale/manage/order/get-order-list-export",
'/sale/manage/order/get-order-list-export',
{ ...this.queryParams },
`${'商品订单'}${new Date().getTime()}.xlsx`
);
});
)
})
},
handleChange1() {},
findDetail(row, data) {
this.$router.push({
path: "/logistics/commodity/ckspdd",
query: { orderCode: row.orderCode },
});
path: '/logistics/commodity/ckspdd',
query: { orderCode: row.orderCode }
})
},
getData() {
api.areaList().then((res) => {
this.areaData = res.data;
});
this.areaData = res.data
})
log.getOrderType().then((res) => {
this.typeList = res.data;
});
this.typeList = res.data
})
log.getDeliveryList().then((res) => {
this.fhwayList = res.data;
});
this.fhwayList = res.data
})
log.getOrderPayType().then((res) => {
this.paywayList = res.data;
});
this.paywayList = res.data
})
},
// 展开折叠
changeActive() {
this.isActive = !this.isActive;
this.isActive = !this.isActive
},
changeCjsj(val) {
this.queryParams.startCreateDate = val[0];
this.queryParams.endCreateDate = val[1];
this.queryParams.startCreateDate = val[0]
this.queryParams.endCreateDate = val[1]
},
changeZfsj(val) {
this.queryParams.startPayDate = val[0];
this.queryParams.endPayDate = val[1];
this.queryParams.startPayDate = val[0]
this.queryParams.endPayDate = val[1]
},
getSearch() {
this.loading = true;
this.queryParams.recProvince = this.queryParams.shoppingAddress[0];
this.queryParams.recCity = this.queryParams.shoppingAddress[1];
this.queryParams.recCountry = this.queryParams.shoppingAddress[2];
this.loading = true
this.queryParams.recProvince = this.queryParams.shoppingAddress[0]
this.queryParams.recCity = this.queryParams.shoppingAddress[1]
this.queryParams.recCountry = this.queryParams.shoppingAddress[2]
log.getOrderList(this.queryParams).then((res) => {
this.tableData = res.rows;
this.total = res.total;
this.loading = false;
});
this.tableData = res.rows
this.total = res.total
this.loading = false
})
},
// 重置
reChongzhi() {
this.queryParams = {
pageNum: 1,
pageSize: 50,
shoppingAddress: [],
};
this.getSearch();
shoppingAddress: []
}
this.getSearch()
},
handleSelectionChange(val) {
this.multipleSelection = val;
this.multipleSelection = val
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// if (columnIndex === 0) {
@ -700,14 +704,14 @@ export default {
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return "warning-row";
return 'warning-row'
} else if (rowIndex % 2 == 0) {
return "success-row";
return 'success-row'
}
return "";
},
},
};
return ''
}
}
}
</script>
<style lang="scss" scoped>