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"> <div class="page">
<topBar <topBar
v-if="topList.length > 0" v-if="topList.length > 0"
:topList="topList" :top-list="topList"
:moren="moren" :moren="moren"
></topBar> />
<div class="thetopbox"> <div class="thetopbox">
<el-form ref="form" :model="queryParams" label-width="100px"> <el-form ref="form" :model="queryParams" label-width="100px">
<el-row> <el-row>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'会员编号'" prop="memberCode"> <el-form-item :label="'会员编号'" prop="memberCode">
<el-input <el-input
clearable
v-model="queryParams.memberCode" v-model="queryParams.memberCode"
></el-input></el-form-item clearable
></el-col> /></el-form-item></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'结算期数'" prop="memberSettlePeriodId"> <el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
<el-select <el-select
v-model="queryParams.memberSettlePeriodId"
clearable clearable
:placeholder="'请选择'" :placeholder="'请选择'"
v-model="queryParams.memberSettlePeriodId"
> >
<el-option <el-option
v-for="item in memberSettlePeriodList" v-for="item in memberSettlePeriodList"
:key="item.pkId" :key="item.pkId"
:label="item.settleDate" :label="item.settleDate"
:value="item.pkId" :value="item.pkId"
></el-option> </el-select></el-form-item /> </el-select></el-form-item></el-col>
></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'展示层数'" prop="level"> <el-form-item :label="'展示层数'" prop="level">
<el-input <el-input
clearable
v-model="queryParams.level" v-model="queryParams.level"
></el-input></el-form-item clearable
></el-col> /></el-form-item></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'是否固定'" prop="cantz"> <el-form-item :label="'是否固定'" prop="cantz">
<el-select clearable :placeholder="'请选择'" v-model="cantz"> <el-select v-model="cantz" clearable :placeholder="'请选择'">
<el-option <el-option
v-for="(item, index) in tzList" v-for="(item, index) in tzList"
:key="index" :key="index"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
></el-option> />
</el-select> </el-form-item </el-select> </el-form-item></el-col>
></el-col>
<el-col :span="4" style="margin-left: 30px"> <el-col :span="4" style="margin-left: 30px">
<div class="searchbox"> <div class="searchbox">
<el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button> <el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button>
@ -54,13 +50,12 @@
<el-button @click="goback"> {{ '返回' }}</el-button> <el-button @click="goback"> {{ '返回' }}</el-button>
</div> </div>
</el-col> </el-col>
</el-row></el-form </el-row></el-form>
>
</div> </div>
<div class="theorgtree"> <div class="theorgtree">
<div class="lefttop"> <div class="lefttop">
<div class="single" v-for="(item, index) in avaerInfoList" :key="index"> <div v-for="(item, index) in avaerInfoList" :key="index" class="single">
<img :src="item.value" alt="" /> <img :src="item.value" alt="">
<div class="singletitle">{{ item.name }}</div> <div class="singletitle">{{ item.name }}</div>
</div> </div>
</div> </div>
@ -68,15 +63,15 @@
<div class="tree-content" @mousedown.stop="move" @wheel="handleWheel"> <div class="tree-content" @mousedown.stop="move" @wheel="handleWheel">
<div :style="{ transform: `scale(${scale})` }"> <div :style="{ transform: `scale(${scale})` }">
<vue2-org-tree <vue2-org-tree
ref="orgTree"
:data="data" :data="data"
collapsable collapsable
ref="orgTree" :render-content="renderContent"
v-bind="$listeners"
@on-expand="onExpand" @on-expand="onExpand"
@on-node-click="NodeClick" @on-node-click="NodeClick"
@on-node-mouseover="onMouseover" @on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout" @on-node-mouseout="onMouseout"
:renderContent="renderContent"
v-bind="$listeners"
/> />
</div> </div>
</div> </div>
@ -94,11 +89,11 @@
<img <img
class="img1" class="img1"
:src="'data:image/png;base64,' + treeData.avatarUrlBase64" :src="'data:image/png;base64,' + treeData.avatarUrlBase64"
/> >
<img <img
class="img2" class="img2"
:src="'data:image/png;base64,' + treeData.countryUrl2Base64" :src="'data:image/png;base64,' + treeData.countryUrl2Base64"
/> >
</div> </div>
<div class="centerbox"> <div class="centerbox">
<div class="lineboex"> <div class="lineboex">
@ -119,14 +114,14 @@
:src=" :src="
'data:image/png;base64,' + treeData.settleCountryUrl2Base64 'data:image/png;base64,' + treeData.settleCountryUrl2Base64
" "
/> >
<div>{{'结算国家'}}</div> <div>{{ '结算国家' }}</div>
</div> </div>
</div> </div>
<div class="bottomrender"> <div class="bottomrender">
<div class="flexbox"> <div class="flexbox">
<div class="thetitle">{{ '业绩' }}({{ isLocals() }})</div> <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>
@ -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 class="linecontent">复购结余</div>
<div class="linecontent">新増套数</div>
<div class="linecontent">累计套数</div>
</div> </div>
<div class="flexbox"> <div class="flexbox">
<div class="thetitle">左区</div> <div class="thetitle">左区</div>
@ -151,6 +148,8 @@
<div class="linecontent"> <div class="linecontent">
{{ treeData.leftRepeatPurchaseSurplus }} {{ treeData.leftRepeatPurchaseSurplus }}
</div> </div>
<div class="linecontent">{{ treeData.aNewBox || 0 }}</div>
<div class="linecontent">{{ treeData.aSumBox || 0 }}</div>
</div> </div>
<div class="flexbox"> <div class="flexbox">
<div class="thetitle">右区</div> <div class="thetitle">右区</div>
@ -170,6 +169,8 @@
<div class="linecontent"> <div class="linecontent">
{{ treeData.rightRepeatPurchaseSurplus }} {{ treeData.rightRepeatPurchaseSurplus }}
</div> </div>
<div class="linecontent">{{ treeData.bNewBox || 0 }}</div>
<div class="linecontent">{{ treeData.bSumBox || 0 }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -180,7 +181,7 @@
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
<div class="copyContent" ref="copyContent" v-show="false"> <div v-show="false" ref="copyContent" class="copyContent">
<div>{{ '会员编号' }}：{{ treeData.memberCode }}</div> <div>{{ '会员编号' }}：{{ treeData.memberCode }}</div>
<div>{{ '会员姓名' }}：{{ treeData.name }}</div> <div>{{ '会员姓名' }}：{{ treeData.name }}</div>
<div>{{ '支付日期' }}：{{ treeData.payDate }}</div> <div>{{ '支付日期' }}：{{ treeData.payDate }}</div>
@ -228,51 +229,51 @@
</div> </div>
</template> </template>
<script> <script>
import html2canvas from "html2canvas"; import html2canvas from 'html2canvas'
import topBar from "@/components/topBar"; import topBar from '@/components/topBar'
import { import {
getAzFramework, getAzFramework,
getAvarerInfo, getAvarerInfo,
getMemberSettlePeriod, getMemberSettlePeriod,
getUrlBase, getUrlBase
} from "@/api/archityecture"; } from '@/api/archityecture'
import { isLocals } from "../../../utils/numberToCurrency"; import { isLocals } from '../../../utils/numberToCurrency'
export default { export default {
name: "Azjg2", name: 'Azjg2',
components: { components: {
topBar, topBar
}, },
data() { data() {
return { return {
moren: "azjg2", moren: 'azjg2',
topList: [ topList: [
{ {
name: '方案一', name: '方案一',
path: "azjg", path: 'azjg'
}, },
{ {
name: '方案二', name: '方案二',
path: "azjg2", path: 'azjg2'
}, },
{ {
name: '方案三', name: '方案三',
path: "azjg3", path: 'azjg3'
}, },
{ {
name: '方案四', name: '方案四',
path: "azjg4", path: 'azjg4'
}, },
{ {
name: "方案五", name: '方案五',
path: "azjg5", path: 'azjg5'
}, }
], ],
queryParams: { queryParams: {
memberSettlePeriodId: "", //期数 memberSettlePeriodId: '', // 期数
memberCode: "", //会员编号 memberCode: '', // 会员编号
level: 5, level: 5,
type:2 type: 2
}, },
basicSwitch: false, basicSwitch: false,
basicInfo: { id: null, label: null }, basicInfo: { id: null, label: null },
@ -280,106 +281,106 @@ export default {
treeData: {}, treeData: {},
ifShow: false, ifShow: false,
avaerInfoList: [], avaerInfoList: [],
memberSettlePeriodList: [], //期数 memberSettlePeriodList: [], // 期数
tzList: [ tzList: [
{ value: 0, label: "是" }, { value: 0, label: '是' },
{ value: 1, label: "否" }, { value: 1, label: '否' }
], ],
cantz: 1, //0不可拖拽,1可拖拽 cantz: 1, // 0不可拖拽,1可拖拽
scale: 1, scale: 1
}; }
}, },
created() { created() {
this.getSearch(); this.getSearch()
this.getAvarerInfo(); this.getAvarerInfo()
}, },
methods: { methods: {
handleWheel(event) { handleWheel(event) {
if (this.cantz == 1) { if (this.cantz == 1) {
event.preventDefault(); event.preventDefault()
const delta = Math.sign(event.deltaY); const delta = Math.sign(event.deltaY)
const newScale = this.scale - delta * 0.1; const newScale = this.scale - delta * 0.1
this.scale = Math.max(0.01, Math.min(newScale, 10)); this.scale = Math.max(0.01, Math.min(newScale, 10))
} }
}, },
isLocals, isLocals,
copyText() { copyText() {
const copyContent = this.$refs.copyContent; const copyContent = this.$refs.copyContent
const textLines = Array.from(copyContent.querySelectorAll("div")).map( const textLines = Array.from(copyContent.querySelectorAll('div')).map(
(div) => div.textContent.trim() (div) => div.textContent.trim()
); )
const text = textLines.join("\n"); const text = textLines.join('\n')
const tempInput = document.createElement("textarea"); const tempInput = document.createElement('textarea')
tempInput.value = text; tempInput.value = text
document.body.appendChild(tempInput); document.body.appendChild(tempInput)
tempInput.select(); tempInput.select()
try { try {
document.execCommand("copy"); document.execCommand('copy')
this.$message({ this.$message({
message: '复制成功', message: '复制成功',
type: "success", type: 'success'
}); })
} catch (error) { } catch (error) {
this.$message({ this.$message({
message: "复制失败", message: '复制失败',
type: "warning", type: 'warning'
}); })
} }
tempInput.remove(); tempInput.remove()
window.getSelection().removeAllRanges(); window.getSelection().removeAllRanges()
}, },
//返回 // 返回
goback() { goback() {
this.queryParams.memberCode = this.data.parentMemberCode; this.queryParams.memberCode = this.data.parentMemberCode
this.getSearch(); this.getSearch()
}, },
//拖拽移动 // 拖拽移动
move(e) { move(e) {
if (this.cantz == 0) { if (this.cantz == 0) {
return; return
} }
const odiv = e.currentTarget; // 获取元素 const odiv = e.currentTarget // 获取元素
// 算出鼠标相对元素的位置 // 算出鼠标相对元素的位置
const disX = e.clientX - odiv.offsetLeft; const disX = e.clientX - odiv.offsetLeft
const disY = e.clientY - odiv.offsetTop; const disY = e.clientY - odiv.offsetTop
document.onmousemove = (e) => { document.onmousemove = (e) => {
// 鼠标按下并移动的事件 // 鼠标按下并移动的事件
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
const left = e.clientX - disX; const left = e.clientX - disX
const top = e.clientY - disY; const top = e.clientY - disY
// 绑定元素位置到positionX和positionY上面 // 绑定元素位置到positionX和positionY上面
this.positionX = top; this.positionX = top
this.positionY = left; this.positionY = left
// 移动当前元素 // 移动当前元素
odiv.style.left = left + "px"; odiv.style.left = left + 'px'
odiv.style.top = top + "px"; odiv.style.top = top + 'px'
}; }
document.onmouseup = () => { document.onmouseup = () => {
document.onmousemove = null; document.onmousemove = null
document.onmouseup = null; document.onmouseup = null
}; }
}, },
async downloadImage() { async downloadImage() {
const element = this.$refs.htmlContent; const element = this.$refs.htmlContent
// 使用html2canvas将节点生成为图片 // 使用html2canvas将节点生成为图片
const canvas = await html2canvas(element); const canvas = await html2canvas(element)
const image = canvas.toDataURL("image/png"); const image = canvas.toDataURL('image/png')
// 复制图片到剪贴板 // 复制图片到剪贴板
try { try {
await navigator.clipboard.write([ await navigator.clipboard.write([
new ClipboardItem({ new ClipboardItem({
"image/png": await new Promise((resolve) => 'image/png': await new Promise((resolve) =>
canvas.toBlob(resolve, "image/png") canvas.toBlob(resolve, 'image/png')
), )
}), })
]); ])
this.$message({ this.$message({
message: '复制成功', message: '复制成功',
type: "success", type: 'success'
}); })
} catch (error) { } catch (error) {
// this.$message({ // this.$message({
// message: "复制失败", // message: "复制失败",
@ -387,32 +388,32 @@ export default {
// }); // });
} }
// 下载图片到本地 // 下载图片到本地
const link = document.createElement("a"); const link = document.createElement('a')
link.href = image; link.href = image
link.download = "image.png"; link.download = 'image.png'
link.click(); link.click()
}, },
getAvarerInfo() { getAvarerInfo() {
getAvarerInfo().then((res) => { getAvarerInfo().then((res) => {
this.avaerInfoList = res.data; this.avaerInfoList = res.data
}); })
getMemberSettlePeriod().then((res) => { getMemberSettlePeriod().then((res) => {
this.memberSettlePeriodList = res.data; this.memberSettlePeriodList = res.data
this.memberSettlePeriodList.forEach((ele) => { this.memberSettlePeriodList.forEach((ele) => {
if (ele.isThisDay == 0) { if (ele.isThisDay == 0) {
this.queryParams.memberSettlePeriodId = ele.pkId; this.queryParams.memberSettlePeriodId = ele.pkId
} }
}); })
}); })
}, },
//鼠标移入 // 鼠标移入
onMouseover(e, data) { onMouseover(e, data) {
this.basicInfo = data; this.basicInfo = data
this.basicSwitch = true; this.basicSwitch = true
}, },
//鼠标移出 // 鼠标移出
onMouseout(e, data) { onMouseout(e, data) {
this.basicSwitch = false; this.basicSwitch = false
}, },
// <div class="xrBox"> // <div class="xrBox">
// <div class="neibox" on-click={() => this.showPover(data)}> // <div class="neibox" on-click={() => this.showPover(data)}>
@ -435,24 +436,24 @@ export default {
// </div> // </div>
// </div> // </div>
// </div> // </div>
//渲染节点 // 渲染节点
renderContent(h, data) { renderContent(h, data) {
return ( return (
<div class="xrBox"> <div class='xrBox'>
{/* 判断data.codeName是否为空 */} {/* 判断data.codeName是否为空 */}
<div class="neibox"> <div class='neibox'>
{data.memberCode ? ( {data.memberCode ? (
<div on-click={() => this.showPover(data)}> <div on-click={() => this.showPover(data)}>
<div class="topbox"> <div class='topbox'>
<img src={data.settleCountryUrl2}></img> <img src={data.settleCountryUrl2}></img>
</div> </div>
<div class="footerbox"> <div class='footerbox'>
{/* 阻止冒泡事件 */} {/* 阻止冒泡事件 */}
<div <div
class="ftopbtn" class='ftopbtn'
style={{ backgroundColor: data.color }} style={{ backgroundColor: data.color }}
on-click={() => { on-click={() => {
event.stopPropagation(), this.goTop(data); event.stopPropagation(), this.goTop(data)
}} }}
> >
{'置顶'} {'置顶'}
@ -462,81 +463,81 @@ export default {
) : null} ) : null}
</div> </div>
</div> </div>
); )
}, },
//置顶 // 置顶
goTop(row) { goTop(row) {
this.queryParams.memberCode = row.memberCode; this.queryParams.memberCode = row.memberCode
this.getSearch(); this.getSearch()
}, },
showPover(row) { showPover(row) {
getUrlBase({ getUrlBase({
countryUrl2: row.countryUrl2, countryUrl2: row.countryUrl2,
settleCountryUrl2: row.settleCountryUrl2, settleCountryUrl2: row.settleCountryUrl2,
avatarUrl: row.avatarUrl, avatarUrl: row.avatarUrl
}).then((res) => { }).then((res) => {
this.treeData = row; this.treeData = row
this.treeData.countryUrl2Base64 = res.countryUrl2Base64; this.treeData.countryUrl2Base64 = res.countryUrl2Base64
this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64; this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
this.treeData.avatarUrlBase64 = res.avatarUrlBase64; this.treeData.avatarUrlBase64 = res.avatarUrlBase64
this.ifShow = true; this.ifShow = true
}); })
}, },
//点击节点 // 点击节点
NodeClick(e, data) {}, NodeClick(e, data) {},
//默认展开 // 默认展开
toggleExpand(data, val) { toggleExpand(data, val) {
if (Array.isArray(data)) { if (Array.isArray(data)) {
data.forEach((item) => { data.forEach((item) => {
this.$set(item, "expand", val); this.$set(item, 'expand', val)
if (item.children) { if (item.children) {
this.toggleExpand(item.children, val); this.toggleExpand(item.children, val)
} }
}); })
} else { } else {
this.$set(data, "expand", val); this.$set(data, 'expand', val)
if (data.children) { if (data.children) {
this.toggleExpand(data.children, val); this.toggleExpand(data.children, val)
} }
} }
}, },
collapse(list) { collapse(list) {
list.forEach((child) => { list.forEach((child) => {
if (child.expand) { if (child.expand) {
child.expand = false; child.expand = false
} }
child.children && this.collapse(child.children); child.children && this.collapse(child.children)
}); })
}, },
//展开 // 展开
onExpand(e, data) { onExpand(e, data) {
if ("expand" in data) { if ('expand' in data) {
data.expand = !data.expand; data.expand = !data.expand
if (!data.expand && data.children) { if (!data.expand && data.children) {
this.collapse(data.children); this.collapse(data.children)
} }
} else { } else {
this.$set(data, "expand", true); this.$set(data, 'expand', true)
} }
}, },
getSearch() { getSearch() {
getAzFramework(this.queryParams).then((res) => { getAzFramework(this.queryParams).then((res) => {
this.data = res.data[0]; this.data = res.data[0]
this.toggleExpand(this.data, true); this.toggleExpand(this.data, true)
}); })
}, },
reChongzhi() { reChongzhi() {
this.queryParams = { this.queryParams = {
memberSettlePeriodId: "", //期数 memberSettlePeriodId: '', // 期数
memberCode: "", //会员编号 memberCode: '', // 会员编号
level: 5, level: 5,
type:2 type: 2
}; }
this.getSearch(); this.getSearch()
}, }
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

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

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

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

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

@ -2,40 +2,37 @@
<div class="page"> <div class="page">
<topBar <topBar
v-if="topList.length > 0" v-if="topList.length > 0"
:topList="topList" :top-list="topList"
:moren="moren" :moren="moren"
></topBar> />
<div class="thetopbox"> <div class="thetopbox">
<el-form ref="form" :model="queryParams" label-width="100px"> <el-form ref="form" :model="queryParams" label-width="100px">
<el-row> <el-row>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'会员编号'" prop="memberCode"> <el-form-item :label="'会员编号'" prop="memberCode">
<el-input <el-input
clearable
v-model="queryParams.memberCode" v-model="queryParams.memberCode"
></el-input></el-form-item clearable
></el-col> /></el-form-item></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'结算期数'" prop="memberSettlePeriodId"> <el-form-item :label="'结算期数'" prop="memberSettlePeriodId">
<el-select <el-select
v-model="queryParams.memberSettlePeriodId"
clearable clearable
:placeholder="'请选择'" :placeholder="'请选择'"
v-model="queryParams.memberSettlePeriodId"
> >
<el-option <el-option
v-for="item in memberSettlePeriodList" v-for="item in memberSettlePeriodList"
:key="item.pkId" :key="item.pkId"
:label="item.settleDate" :label="item.settleDate"
:value="item.pkId" :value="item.pkId"
></el-option> </el-select></el-form-item /> </el-select></el-form-item></el-col>
></el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item :label="'展示层数'" prop="level"> <el-form-item :label="'展示层数'" prop="level">
<el-input <el-input
clearable
v-model="queryParams.level" v-model="queryParams.level"
></el-input></el-form-item clearable
></el-col> /></el-form-item></el-col>
<el-col :span="4" style="margin-left: 30px"> <el-col :span="4" style="margin-left: 30px">
<div class="searchbox"> <div class="searchbox">
<el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button> <el-button class="searchbtn" @click="getSearch"> {{ '搜索' }}</el-button>
@ -43,8 +40,7 @@
<el-button @click="goback"> {{ '返回' }}</el-button> <el-button @click="goback"> {{ '返回' }}</el-button>
</div> </div>
</el-col> </el-col>
</el-row></el-form </el-row></el-form>
>
</div> </div>
<div class="theorgtree"> <div class="theorgtree">
<!-- <div class="lefttop"> <!-- <div class="lefttop">
@ -57,15 +53,15 @@
<div class="tree-content" @mousedown.stop="move" @wheel="handleWheel"> <div class="tree-content" @mousedown.stop="move" @wheel="handleWheel">
<div :style="{ transform: `scale(${scale})` }"> <div :style="{ transform: `scale(${scale})` }">
<vue2-org-tree <vue2-org-tree
ref="orgTree"
:data="data" :data="data"
collapsable collapsable
ref="orgTree" :render-content="renderContent"
v-bind="$listeners"
@on-expand="onExpand" @on-expand="onExpand"
@on-node-click="NodeClick" @on-node-click="NodeClick"
@on-node-mouseover="onMouseover" @on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout" @on-node-mouseout="onMouseout"
:renderContent="renderContent"
v-bind="$listeners"
/> />
</div> </div>
</div> </div>
@ -83,11 +79,11 @@
<img <img
class="img1" class="img1"
:src="'data:image/png;base64,' + treeData.avatarUrlBase64" :src="'data:image/png;base64,' + treeData.avatarUrlBase64"
/> >
<img <img
class="img2" class="img2"
:src="'data:image/png;base64,' + treeData.countryUrl2Base64" :src="'data:image/png;base64,' + treeData.countryUrl2Base64"
/> >
</div> </div>
<div class="centerbox"> <div class="centerbox">
<div class="lineboex"> <div class="lineboex">
@ -108,14 +104,14 @@
:src=" :src="
'data:image/png;base64,' + treeData.settleCountryUrl2Base64 'data:image/png;base64,' + treeData.settleCountryUrl2Base64
" "
/> >
<div>{{'结算国家'}}</div> <div>{{ '结算国家' }}</div>
</div> </div>
</div> </div>
<div class="bottomrender"> <div class="bottomrender">
<div class="flexbox"> <div class="flexbox">
<div class="thetitle">{{ '业绩' }}({{ isLocals() }})</div> <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>
@ -123,6 +119,8 @@
<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>
<div class="flexbox"> <div class="flexbox">
<div class="thetitle">左区</div> <div class="thetitle">左区</div>
@ -140,6 +138,8 @@
<div class="linecontent"> <div class="linecontent">
{{ treeData.leftRepeatPurchaseSurplus }} {{ treeData.leftRepeatPurchaseSurplus }}
</div> </div>
<div class="linecontent">{{ treeData.aNewBox || 0 }}</div>
<div class="linecontent">{{ treeData.aSumBox || 0 }}</div>
</div> </div>
<div class="flexbox"> <div class="flexbox">
<div class="thetitle">右区</div> <div class="thetitle">右区</div>
@ -159,6 +159,8 @@
<div class="linecontent"> <div class="linecontent">
{{ treeData.rightRepeatPurchaseSurplus }} {{ treeData.rightRepeatPurchaseSurplus }}
</div> </div>
<div class="linecontent">{{ treeData.bNewBox || 0 }}</div>
<div class="linecontent">{{ treeData.bSumBox || 0 }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -169,7 +171,7 @@
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
<div class="copyContent" ref="copyContent" v-show="false"> <div v-show="false" ref="copyContent" class="copyContent">
<div>{{ '会员编号' }}：{{ treeData.memberCode }}</div> <div>{{ '会员编号' }}：{{ treeData.memberCode }}</div>
<div>{{ '会员姓名' }}：{{ treeData.name }}</div> <div>{{ '会员姓名' }}：{{ treeData.name }}</div>
<div>{{ '支付日期' }}：{{ treeData.payDate }}</div> <div>{{ '支付日期' }}：{{ treeData.payDate }}</div>
@ -215,155 +217,155 @@
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import html2canvas from "html2canvas"; import html2canvas from 'html2canvas'
import topBar from "@/components/topBar"; import topBar from '@/components/topBar'
import { import {
getAzFramework5, getAzFramework5,
getAvarerInfo, getAvarerInfo,
getMemberSettlePeriod, getMemberSettlePeriod,
getUrlBase, getUrlBase
} from "@/api/archityecture"; } from '@/api/archityecture'
import { isLocals } from "../../../utils/numberToCurrency"; import { isLocals } from '../../../utils/numberToCurrency'
export default { export default {
name: "Azjg5", name: 'Azjg5',
components: { components: {
topBar, topBar
}, },
data() { data() {
return { return {
moren: "azjg5", moren: 'azjg5',
topList: [ topList: [
{ {
name: '方案一', name: '方案一',
path: "azjg", path: 'azjg'
}, },
{ {
name: '方案二', name: '方案二',
path: "azjg2", path: 'azjg2'
}, },
{ {
name: '方案三', name: '方案三',
path: "azjg3", path: 'azjg3'
}, },
{ {
name: '方案四', name: '方案四',
path: "azjg4", path: 'azjg4'
}, },
{ {
name: "方案五", name: '方案五',
path: "azjg5", path: 'azjg5'
}, }
], ],
queryParams: { queryParams: {
memberSettlePeriodId: "", //期数 memberSettlePeriodId: '', // 期数
memberCode: "", //会员编号 memberCode: '', // 会员编号
level: 6, level: 6
}, },
basicSwitch: false, basicSwitch: false,
basicInfo: { id: null, label: null }, basicInfo: { id: null, label: null },
data: {}, data: {},
treeData: {}, treeData: {},
ifShow: false, ifShow: false,
memberSettlePeriodList: [], //期数 memberSettlePeriodList: [], // 期数
cantz: 1, //0不可拖拽,1可拖拽 cantz: 1, // 0不可拖拽,1可拖拽
scale: 1, scale: 1
}; }
}, },
created() { created() {
this.getSearch(); this.getSearch()
this.getAvarerInfo(); this.getAvarerInfo()
}, },
methods: { methods: {
handleWheel(event) { handleWheel(event) {
if (this.cantz == 1) { if (this.cantz == 1) {
event.preventDefault(); event.preventDefault()
const delta = Math.sign(event.deltaY); const delta = Math.sign(event.deltaY)
const newScale = this.scale - delta * 0.1; const newScale = this.scale - delta * 0.1
this.scale = Math.max(0.01, Math.min(newScale, 10)); this.scale = Math.max(0.01, Math.min(newScale, 10))
} }
}, },
isLocals, isLocals,
copyText() { copyText() {
const copyContent = this.$refs.copyContent; const copyContent = this.$refs.copyContent
const textLines = Array.from(copyContent.querySelectorAll("div")).map( const textLines = Array.from(copyContent.querySelectorAll('div')).map(
(div) => div.textContent.trim() (div) => div.textContent.trim()
); )
const text = textLines.join("\n"); const text = textLines.join('\n')
const tempInput = document.createElement("textarea"); const tempInput = document.createElement('textarea')
tempInput.value = text; tempInput.value = text
document.body.appendChild(tempInput); document.body.appendChild(tempInput)
tempInput.select(); tempInput.select()
try { try {
document.execCommand("copy"); document.execCommand('copy')
this.$message({ this.$message({
message: '复制成功', message: '复制成功',
type: "success", type: 'success'
}); })
} catch (error) { } catch (error) {
this.$message({ this.$message({
message: "复制失败", message: '复制失败',
type: "warning", type: 'warning'
}); })
} }
tempInput.remove(); tempInput.remove()
window.getSelection().removeAllRanges(); window.getSelection().removeAllRanges()
}, },
//返回 // 返回
goback() { goback() {
this.queryParams.memberCode = this.data.parentMemberCode; this.queryParams.memberCode = this.data.parentMemberCode
this.getSearch(); this.getSearch()
}, },
//拖拽移动 // 拖拽移动
move(e) { move(e) {
if (this.cantz == 0) { if (this.cantz == 0) {
return; return
} }
const odiv = e.currentTarget; // 获取元素 const odiv = e.currentTarget // 获取元素
// 算出鼠标相对元素的位置 // 算出鼠标相对元素的位置
const disX = e.clientX - odiv.offsetLeft; const disX = e.clientX - odiv.offsetLeft
const disY = e.clientY - odiv.offsetTop; const disY = e.clientY - odiv.offsetTop
document.onmousemove = (e) => { document.onmousemove = (e) => {
// 鼠标按下并移动的事件 // 鼠标按下并移动的事件
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
const left = e.clientX - disX; const left = e.clientX - disX
const top = e.clientY - disY; const top = e.clientY - disY
// 绑定元素位置到positionX和positionY上面 // 绑定元素位置到positionX和positionY上面
this.positionX = top; this.positionX = top
this.positionY = left; this.positionY = left
// 移动当前元素 // 移动当前元素
odiv.style.left = left + "px"; odiv.style.left = left + 'px'
odiv.style.top = top + "px"; odiv.style.top = top + 'px'
}; }
document.onmouseup = () => { document.onmouseup = () => {
document.onmousemove = null; document.onmousemove = null
document.onmouseup = null; document.onmouseup = null
}; }
}, },
async downloadImage() { async downloadImage() {
const element = this.$refs.htmlContent; const element = this.$refs.htmlContent
// 使用html2canvas将节点生成为图片 // 使用html2canvas将节点生成为图片
const canvas = await html2canvas(element); const canvas = await html2canvas(element)
const image = canvas.toDataURL("image/png"); const image = canvas.toDataURL('image/png')
// 复制图片到剪贴板 // 复制图片到剪贴板
try { try {
await navigator.clipboard.write([ await navigator.clipboard.write([
new ClipboardItem({ new ClipboardItem({
"image/png": await new Promise((resolve) => 'image/png': await new Promise((resolve) =>
canvas.toBlob(resolve, "image/png") canvas.toBlob(resolve, 'image/png')
), )
}), })
]); ])
this.$message({ this.$message({
message: '复制成功', message: '复制成功',
type: "success", type: 'success'
}); })
} catch (error) { } catch (error) {
// this.$message({ // this.$message({
// message: "复制失败", // message: "复制失败",
@ -371,29 +373,29 @@
// }); // });
} }
// 下载图片到本地 // 下载图片到本地
const link = document.createElement("a"); const link = document.createElement('a')
link.href = image; link.href = image
link.download = "image.png"; link.download = 'image.png'
link.click(); link.click()
}, },
getAvarerInfo() { getAvarerInfo() {
getMemberSettlePeriod().then((res) => { getMemberSettlePeriod().then((res) => {
this.memberSettlePeriodList = res.data; this.memberSettlePeriodList = res.data
this.memberSettlePeriodList.forEach((ele) => { this.memberSettlePeriodList.forEach((ele) => {
if (ele.isThisDay == 0) { if (ele.isThisDay == 0) {
this.queryParams.memberSettlePeriodId = ele.pkId; this.queryParams.memberSettlePeriodId = ele.pkId
} }
}); })
}); })
}, },
//鼠标移入 // 鼠标移入
onMouseover(e, data) { onMouseover(e, data) {
this.basicInfo = data; this.basicInfo = data
this.basicSwitch = true; this.basicSwitch = true
}, },
//鼠标移出 // 鼠标移出
onMouseout(e, data) { onMouseout(e, data) {
this.basicSwitch = false; this.basicSwitch = false
}, },
// <div class="xrBox"> // <div class="xrBox">
// <div class="neibox" on-click={() => this.showPover(data)}> // <div class="neibox" on-click={() => this.showPover(data)}>
@ -416,27 +418,27 @@
// </div> // </div>
// </div> // </div>
// </div> // </div>
//渲染节点 // 渲染节点
renderContent(h, data) { renderContent(h, data) {
return ( return (
<div class="xrBox"> <div class='xrBox'>
{/* 判断data.codeName是否为空 */} {/* 判断data.codeName是否为空 */}
<div class="neibox"> <div class='neibox'>
{data.memberCode ? ( {data.memberCode ? (
<div > <div >
<div class="topbox"> <div class='topbox'>
<div>{data.name}</div> <div>{data.name}</div>
<div>{data.memberCode}</div> <div>{data.memberCode}</div>
{/* <div>会员姓名：{data.name}</div> {/* <div>会员姓名：{data.name}</div>
<div>会员编号：{data.memberCode}</div> */} <div>会员编号：{data.memberCode}</div> */}
</div> </div>
<div class="footerbox"> <div class='footerbox'>
{/* 阻止冒泡事件 */} {/* 阻止冒泡事件 */}
<div <div
class="ftopbtn" class='ftopbtn'
style={{ backgroundColor: data.color }} style={{ backgroundColor: data.color }}
on-click={() => { on-click={() => {
event.stopPropagation(), this.goTop(data); event.stopPropagation(), this.goTop(data)
}} }}
> >
{'置顶'} {'置顶'}
@ -446,82 +448,82 @@
) : null} ) : null}
</div> </div>
</div> </div>
); )
}, },
//置顶 // 置顶
goTop(row) { goTop(row) {
this.queryParams.memberCode = row.memberCode; this.queryParams.memberCode = row.memberCode
this.getSearch(); this.getSearch()
}, },
showPover(row) { showPover(row) {
getUrlBase({ getUrlBase({
countryUrl2: row.countryUrl2, countryUrl2: row.countryUrl2,
settleCountryUrl2: row.settleCountryUrl2, settleCountryUrl2: row.settleCountryUrl2,
avatarUrl: row.avatarUrl, avatarUrl: row.avatarUrl
}).then((res) => { }).then((res) => {
this.treeData = row; this.treeData = row
this.treeData.countryUrl2Base64 = res.countryUrl2Base64; this.treeData.countryUrl2Base64 = res.countryUrl2Base64
this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64; this.treeData.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
this.treeData.avatarUrlBase64 = res.avatarUrlBase64; this.treeData.avatarUrlBase64 = res.avatarUrlBase64
this.ifShow = true; this.ifShow = true
}); })
}, },
//点击节点 // 点击节点
NodeClick(e, data) {}, NodeClick(e, data) {},
//默认展开 // 默认展开
toggleExpand(data, val) { toggleExpand(data, val) {
if (Array.isArray(data)) { if (Array.isArray(data)) {
data.forEach((item) => { data.forEach((item) => {
this.$set(item, "expand", val); this.$set(item, 'expand', val)
if (item.children) { if (item.children) {
this.toggleExpand(item.children, val); this.toggleExpand(item.children, val)
} }
}); })
} else { } else {
this.$set(data, "expand", val); this.$set(data, 'expand', val)
if (data.children) { if (data.children) {
this.toggleExpand(data.children, val); this.toggleExpand(data.children, val)
} }
} }
}, },
collapse(list) { collapse(list) {
list.forEach((child) => { list.forEach((child) => {
if (child.expand) { if (child.expand) {
child.expand = false; child.expand = false
} }
child.children && this.collapse(child.children); child.children && this.collapse(child.children)
}); })
}, },
//展开 // 展开
onExpand(e, data) { onExpand(e, data) {
if ("expand" in data) { if ('expand' in data) {
data.expand = !data.expand; data.expand = !data.expand
if (!data.expand && data.children) { if (!data.expand && data.children) {
this.collapse(data.children); this.collapse(data.children)
} }
} else { } else {
this.$set(data, "expand", true); this.$set(data, 'expand', true)
} }
}, },
getSearch() { getSearch() {
getAzFramework5(this.queryParams).then((res) => { getAzFramework5(this.queryParams).then((res) => {
this.data = res.data[0]; this.data = res.data[0]
this.toggleExpand(this.data, true); this.toggleExpand(this.data, true)
}); })
}, },
reChongzhi() { reChongzhi() {
this.queryParams = { this.queryParams = {
memberSettlePeriodId: "", //期数 memberSettlePeriodId: '', // 期数
memberCode: "", //会员编号 memberCode: '', // 会员编号
level: 5, level: 5,
type:2 type: 2
}; }
this.getSearch(); this.getSearch()
}, }
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-dialog__headerbtn{ ::v-deep .el-dialog__headerbtn{
@ -826,4 +828,3 @@
margin: 0 auto; margin: 0 auto;
} }
</style> </style>

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

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

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

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

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

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