mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-19 09:25:53 +08:00
commit message
This commit is contained in:
Chopper
191
manager/src/views/lili-components/affix-time.vue
Normal file
191
manager/src/views/lili-components/affix-time.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="breadcrumb">
|
||||
<span @click="clickBreadcrumb(item,index)" :class="{'active':item.selected}" v-for="(item,index) in dateList" :key="index"> {{item.title}}</span>
|
||||
<div class="date-picker">
|
||||
|
||||
<Select @on-change="changeSelect(selectedWay)" v-model="month" placeholder="年月查询" style="width:200px;margin-left:10px;">
|
||||
|
||||
<Option v-for="(item,index) in dates" :value="item.year+'-'+item.month" :key="index">{{ item.year+'年'+item.month+'月' }}</Option>
|
||||
|
||||
</Select>
|
||||
</div>
|
||||
<div class="shop-list" v-if="!closeShop">
|
||||
<Select clearable @on-change="changeshop(selectedWay)" v-model="storeId" placeholder="店铺查询" style="width:200px;margin-left:10px;">
|
||||
<Scroll :on-reach-bottom="handleReachBottom">
|
||||
<Option v-for="(item,index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option>
|
||||
</Scroll>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getShopListData } from "@/api/shops.js";
|
||||
export default {
|
||||
props: ["closeShop"],
|
||||
data() {
|
||||
return {
|
||||
month: "",
|
||||
year: "",
|
||||
|
||||
defuaultWay: {
|
||||
title: "最近7天",
|
||||
selected: true,
|
||||
searchType: "LAST_SEVEN",
|
||||
},
|
||||
|
||||
selectedWay: {
|
||||
title: "最近7天",
|
||||
selected: true,
|
||||
searchType: "LAST_SEVEN",
|
||||
},
|
||||
storeId: "",
|
||||
dates: [],
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
storeName: "",
|
||||
},
|
||||
dateList: [
|
||||
{
|
||||
title: "今天",
|
||||
selected: false,
|
||||
searchType: "TODAY",
|
||||
},
|
||||
{
|
||||
title: "昨天",
|
||||
selected: false,
|
||||
searchType: "YESTERDAY",
|
||||
},
|
||||
{
|
||||
title: "最近7天",
|
||||
selected: true,
|
||||
searchType: "LAST_SEVEN",
|
||||
},
|
||||
{
|
||||
title: "最近30天",
|
||||
selected: false,
|
||||
searchType: "LAST_THIRTY",
|
||||
},
|
||||
],
|
||||
|
||||
shopTotal: "",
|
||||
shopsData: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getFiveYears();
|
||||
this.getShopList();
|
||||
},
|
||||
methods: {
|
||||
handleReachBottom() {
|
||||
setTimeout(() => {
|
||||
if (this.params.pageNumber * this.params.pageSize <= this.total) {
|
||||
this.params.pageNumber++;
|
||||
this.getShopList();
|
||||
}
|
||||
}, 1500);
|
||||
},
|
||||
getShopList() {
|
||||
getShopListData(this.params).then((res) => {
|
||||
if (res.success) {
|
||||
/**
|
||||
* 解决数据请求中，滚动栏会一直上下跳动
|
||||
*/
|
||||
this.shopTotal = res.result.total;
|
||||
|
||||
this.shopsData.push(...res.result.records);
|
||||
}
|
||||
});
|
||||
},
|
||||
changeshop(val) {
|
||||
this.selectedWay.storeId = this.storeId;
|
||||
this.$emit("selected", this.selectedWay);
|
||||
},
|
||||
|
||||
// 获取近5年 年月
|
||||
getFiveYears() {
|
||||
let getYear = new Date().getFullYear();
|
||||
|
||||
let lastFiveYear = getYear - 5;
|
||||
let maxMonth = new Date().getMonth() + 1;
|
||||
let dates = [];
|
||||
// 循环出过去5年
|
||||
for (let year = lastFiveYear; year <= getYear; year++) {
|
||||
for (let month = 1; month <= 12; month++) {
|
||||
if (year == getYear && month > maxMonth) {
|
||||
} else {
|
||||
dates.push({
|
||||
year: year,
|
||||
month: month,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
this.dates = dates.reverse();
|
||||
},
|
||||
|
||||
changeSelect() {
|
||||
console.log(this.month);
|
||||
if (this.month) {
|
||||
this.dateList.forEach((res) => {
|
||||
res.selected = false;
|
||||
});
|
||||
this.selectedWay.year = this.month.split("-")[0];
|
||||
this.selectedWay.month = this.month.split("-")[1];
|
||||
this.selectedWay.searchType = "";
|
||||
|
||||
this.$emit("selected", this.selectedWay);
|
||||
// console.log(this.$emit("selected", this.selectedWay));
|
||||
} else {
|
||||
}
|
||||
},
|
||||
|
||||
clickBreadcrumb(item) {
|
||||
this.dateList.forEach((res) => {
|
||||
res.selected = false;
|
||||
});
|
||||
item.selected = true;
|
||||
item.storeId = this.storeId;
|
||||
this.month = "";
|
||||
|
||||
if (item.searchType == "") {
|
||||
item.searchType = "LAST_SEVEN";
|
||||
}
|
||||
|
||||
this.selectedWay = item;
|
||||
// this.month = "";
|
||||
this.selectedWay.year = new Date().getFullYear();
|
||||
this.selectedWay.month = "";
|
||||
|
||||
this.$emit("selected", this.selectedWay);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> span {
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: $theme_color;
|
||||
position: relative;
|
||||
}
|
||||
.date-picker {
|
||||
}
|
||||
.active:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: $theme_color;
|
||||
}
|
||||
</style>
|
||||
159
manager/src/views/lili-components/multiple-region.vue
Normal file
159
manager/src/views/lili-components/multiple-region.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<Modal :mask-closable="false" :value="switched" v-model="switched" title="选择地址" @on-ok="submit" @on-cancel="cancel">
|
||||
<div class="flex">
|
||||
<Spin size="large" fix v-if="spinShow"></Spin>
|
||||
<Tree ref="tree" class="tree" :data="data" expand-node show-checkbox multiple></Tree>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
<script>
|
||||
import { getAllCity } from "@/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switched: false,
|
||||
asyncLoading: false,
|
||||
num: 10,
|
||||
modalFlag: false,
|
||||
spinShow: false,
|
||||
timerNum: 10,
|
||||
data: [],
|
||||
id: 0,
|
||||
selectedWay: [],
|
||||
addValidate: {
|
||||
parentName: "无父级",
|
||||
},
|
||||
ruleValidate: {
|
||||
adCode: [
|
||||
{
|
||||
required: true,
|
||||
message: "区域编码不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
|
||||
center: [
|
||||
{
|
||||
required: true,
|
||||
message: "经纬度不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "名称不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
callBackData: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.switched = false;
|
||||
// this.$emit("close",true)
|
||||
},
|
||||
open(val) {
|
||||
if (val) {
|
||||
this.callBackData = val;
|
||||
this.data = JSON.parse(JSON.stringify(this.data));
|
||||
val.areaId.split(",").forEach((ids) => {
|
||||
this.data.forEach((item) => {
|
||||
if (item.id == ids) {
|
||||
item.selected = true;
|
||||
|
||||
}
|
||||
item.children &&
|
||||
item.children.forEach((child) => {
|
||||
if (child.id == ids) {
|
||||
child.checked = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
console.log(this.data);
|
||||
}
|
||||
|
||||
this.switched = true;
|
||||
},
|
||||
|
||||
submit() {
|
||||
// 筛选出省市
|
||||
let list = this.$refs.tree.getCheckedAndIndeterminateNodes();
|
||||
let sort = [];
|
||||
list.forEach((item) => {
|
||||
item.selectedList = [];
|
||||
if (item.level == "province") {
|
||||
sort.push({
|
||||
...item,
|
||||
});
|
||||
}
|
||||
sort.forEach((sortItem, sortIndex) => {
|
||||
if (item.level != "province" && sortItem.id == item.parentId) {
|
||||
sortItem.selectedList.push({
|
||||
...item,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.$emit(
|
||||
"selected",
|
||||
list.filter((item) => {
|
||||
return item.level == "province";
|
||||
})
|
||||
);
|
||||
|
||||
this.cancel();
|
||||
},
|
||||
|
||||
init() {
|
||||
getAllCity().then((res) => {
|
||||
if (res.result) {
|
||||
res.result.forEach((item) => {
|
||||
item.children.forEach((child) => {
|
||||
child.title = child.name;
|
||||
});
|
||||
|
||||
let data = {
|
||||
title: item.name,
|
||||
|
||||
...item,
|
||||
};
|
||||
this.data.push(data);
|
||||
this.selectedWay.push({ name: data.title, id: data.id });
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.flex {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.tree {
|
||||
flex: 2;
|
||||
}
|
||||
.form {
|
||||
flex: 8;
|
||||
}
|
||||
.button-list {
|
||||
margin-left: 80px;
|
||||
> * {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
/deep/ .ivu-modal-body {
|
||||
height: 400px !important;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
116
manager/src/views/lili-components/region.vue
Normal file
116
manager/src/views/lili-components/region.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div>
|
||||
<Cascader
|
||||
:data="data"
|
||||
:load-data="loadData"
|
||||
change-on-select
|
||||
@on-visible-change="handleChangeOnSelect"
|
||||
@on-change="change"
|
||||
></Cascader>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import * as API_Setup from "@/api/index.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
selected: [],
|
||||
id: 0,
|
||||
changeOnSelect: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
props: ['addressId'],
|
||||
methods: {
|
||||
change(val, selectedData) {
|
||||
/**
|
||||
* @returns [regionId,region]
|
||||
*/
|
||||
this.$emit("selected", [
|
||||
val,
|
||||
selectedData[selectedData.length - 1].__label.split("/"),
|
||||
]);
|
||||
},
|
||||
/**
|
||||
* 动态设置change-on-select的值
|
||||
* 当级联选择器弹窗展开时，设置change-on-select为true，即可以点选菜单选项值发生变化
|
||||
* 当级联选择器弹窗关闭时，设置change-on-select为false，即能够设置初始值
|
||||
*/
|
||||
handleChangeOnSelect(value) {
|
||||
this.changeOnSelect = value;
|
||||
},
|
||||
loadData(item, callback) {
|
||||
item.loading = true;
|
||||
API_Setup.getRegion(item.value).then((res) => {
|
||||
if (res.result.length <= 0) {
|
||||
item.loading = false;
|
||||
this.selected = item;
|
||||
|
||||
/**
|
||||
* 处理数据并返回
|
||||
*/
|
||||
} else {
|
||||
res.result.forEach((child) => {
|
||||
item.loading = false;
|
||||
|
||||
let data = {
|
||||
value: child.id,
|
||||
label: child.name,
|
||||
loading: false,
|
||||
children: [],
|
||||
};
|
||||
|
||||
if (
|
||||
child.level == "street" ||
|
||||
item.label == "香港特别行政区" ||
|
||||
item.label == "澳门特别行政区"
|
||||
) {
|
||||
item.children.push({
|
||||
value: child.id,
|
||||
label: child.name,
|
||||
});
|
||||
} else {
|
||||
item.children.push(data);
|
||||
}
|
||||
});
|
||||
this.selected = item;
|
||||
callback();
|
||||
}
|
||||
});
|
||||
},
|
||||
init() {
|
||||
API_Setup.getRegion(this.id).then((res) => {
|
||||
let way = [];
|
||||
|
||||
res.result.forEach((item) => {
|
||||
let data;
|
||||
// 台湾省做处理
|
||||
if (item.name == "台湾省") {
|
||||
data = {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
};
|
||||
} else {
|
||||
data = {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
loading: false,
|
||||
children: [],
|
||||
};
|
||||
}
|
||||
way.push(data);
|
||||
});
|
||||
|
||||
this.data = way;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
Reference in New Issue
Block a user