新需求修改:菜单调整,分店下拉增加,分店管理增加,增加店铺修改
This commit is contained in:
parent
d0a757957d
commit
11b297baa5
|
|
@ -40,7 +40,7 @@
|
||||||
}"
|
}"
|
||||||
@row-click="handleRowClick"
|
@row-click="handleRowClick"
|
||||||
>
|
>
|
||||||
<el-table-column label="菜单名称" min-width="100">
|
<el-table-column label="菜单名称" min-width="140">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
{{ scope.row.title }}
|
{{ scope.row.title }}
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -47,26 +47,29 @@
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="h_card_wrap">
|
<div class="h_card_wrap">
|
||||||
<div class="status_wrap">
|
<div class="status_wrap">
|
||||||
<div class="left">
|
<div class="left" style="flex-shrink: 0">
|
||||||
<div class="dot" />
|
<div class="dot" />
|
||||||
<span>营业</span>
|
<span>营业</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="time_wrap u-flex">
|
<div class="u-flex" style="flex-wrap: wrap">
|
||||||
<el-select v-model="value" class="m-2" placeholder="Select" size="large">
|
<el-select v-model="storeId" placeholder="选择分店" style="width: 200px; margin-right: 10px;">
|
||||||
<el-option v-for="item in storeList" :key="item.value" :label="item.label" :value="item.value" />
|
<el-option v-for="item in storeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-radio-group v-model="timeValue" class="m-r-5" @change="timeChange">
|
<div class="time_wrap u-flex" style="flex-shrink: 0">
|
||||||
<el-radio-button value="0">今天</el-radio-button>
|
<el-radio-group v-model="timeValue" class="m-r-5" @change="timeChange">
|
||||||
<el-radio-button value="-1">昨天</el-radio-button>
|
<el-radio-button value="0">今天</el-radio-button>
|
||||||
<el-radio-button value="-7">最近7天</el-radio-button>
|
<el-radio-button value="-1">昨天</el-radio-button>
|
||||||
<el-radio-button value="-30">最近30天</el-radio-button>
|
<el-radio-button value="-7">最近7天</el-radio-button>
|
||||||
<el-radio-button value="week">本周</el-radio-button>
|
<el-radio-button value="-30">最近30天</el-radio-button>
|
||||||
<el-radio-button value="month">本月</el-radio-button>
|
<el-radio-button value="week">本周</el-radio-button>
|
||||||
<el-radio-button value="custom">自定义</el-radio-button>
|
<el-radio-button value="month">本月</el-radio-button>
|
||||||
</el-radio-group>
|
<el-radio-button value="custom">自定义</el-radio-button>
|
||||||
<div class="u-flex">
|
</el-radio-group>
|
||||||
<el-date-picker v-if="timeValue == 'custom'" v-model="query.createdAt" type="daterange" range-separator="至"
|
<div class="u-flex">
|
||||||
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD " @change="summarytrade" />
|
<el-date-picker v-if="timeValue == 'custom'" v-model="query.createdAt" type="daterange"
|
||||||
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD "
|
||||||
|
@change="summarytrade" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -139,16 +142,16 @@
|
||||||
<div class="line_gropress">
|
<div class="line_gropress">
|
||||||
<div class="gropress l" :style="{
|
<div class="gropress l" :style="{
|
||||||
width: `${trade.saleAmount
|
width: `${trade.saleAmount
|
||||||
? (trade.saleAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
|
? (trade.saleAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
|
||||||
100
|
100
|
||||||
: 0
|
: 0
|
||||||
}%`,
|
}%`,
|
||||||
}" />
|
}" />
|
||||||
<div class="gropress r" :style="{
|
<div class="gropress r" :style="{
|
||||||
width: `${trade.refundAmount
|
width: `${trade.refundAmount
|
||||||
? (trade.refundAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
|
? (trade.refundAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
|
||||||
100
|
100
|
||||||
: 0
|
: 0
|
||||||
}%`,
|
}%`,
|
||||||
}" />
|
}" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -168,18 +171,18 @@
|
||||||
<div class="line_gropress">
|
<div class="line_gropress">
|
||||||
<div class="gropress l" :style="{
|
<div class="gropress l" :style="{
|
||||||
width: `${trade.rechargeAmount
|
width: `${trade.rechargeAmount
|
||||||
? (trade.rechargeAmount /
|
? (trade.rechargeAmount /
|
||||||
(trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
|
(trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
|
||||||
100
|
100
|
||||||
: 0
|
: 0
|
||||||
}%`,
|
}%`,
|
||||||
}" />
|
}" />
|
||||||
<div class="gropress r" :style="{
|
<div class="gropress r" :style="{
|
||||||
width: `${trade.rechargeRefundAmount
|
width: `${trade.rechargeRefundAmount
|
||||||
? (trade.rechargeRefundAmount /
|
? (trade.rechargeRefundAmount /
|
||||||
(trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
|
(trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
|
||||||
100
|
100
|
||||||
: 0
|
: 0
|
||||||
}%`,
|
}%`,
|
||||||
}" />
|
}" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -387,6 +390,7 @@ export default {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
storeList: [{ label: "门店1", value: 1 }],
|
storeList: [{ label: "门店1", value: 1 }],
|
||||||
|
storeId: null,
|
||||||
trade: {},
|
trade: {},
|
||||||
formatDecimal,
|
formatDecimal,
|
||||||
topData: "",
|
topData: "",
|
||||||
|
|
|
||||||
|
|
@ -10,14 +10,15 @@
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-input placeholder="商品名称" v-model="query.productName" />
|
<el-input placeholder="商品名称" v-model="query.productName" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-select v-model="storeId" placeholder="选择分店" style="width: 200px; margin-right: 10px">
|
||||||
|
<el-option v-for="item in storeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-select v-model="query.prodCategoryId" placeholder="商品分类" style="width: 140px">
|
<el-select v-model="query.prodCategoryId" placeholder="商品分类" style="width: 140px">
|
||||||
<el-option
|
<el-option :label="item.name" :value="item.id" v-for="item in categorys" :key="item.id"></el-option>
|
||||||
:label="item.name"
|
|
||||||
:value="item.id"
|
|
||||||
v-for="item in categorys"
|
|
||||||
:key="item.id"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -32,16 +33,9 @@
|
||||||
<el-radio-button value="month">本月</el-radio-button>
|
<el-radio-button value="month">本月</el-radio-button>
|
||||||
<el-radio-button value="custom">自定义</el-radio-button>
|
<el-radio-button value="custom">自定义</el-radio-button>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
<el-date-picker
|
<el-date-picker class="u-m-l-10" v-model="query.createdAt" type="daterange" range-separator="至"
|
||||||
class="u-m-l-10"
|
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
|
||||||
v-model="query.createdAt"
|
v-if="timeValue == 'custom'"></el-date-picker>
|
||||||
type="daterange"
|
|
||||||
range-separator="至"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
v-if="timeValue == 'custom'"
|
|
||||||
></el-date-picker>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||||
|
|
@ -57,7 +51,9 @@
|
||||||
<div class="collect_wrap">
|
<div class="collect_wrap">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="icon_wrap" style="--bg-color: #c978ee">
|
<div class="icon_wrap" style="--bg-color: #c978ee">
|
||||||
<el-icon color="#fff"><Coin /></el-icon>
|
<el-icon color="#fff">
|
||||||
|
<Coin />
|
||||||
|
</el-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div class="m">¥{{ payCount.totalAmount || 0 }}</div>
|
<div class="m">¥{{ payCount.totalAmount || 0 }}</div>
|
||||||
|
|
@ -66,7 +62,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="icon_wrap" style="--bg-color: #c978ee">
|
<div class="icon_wrap" style="--bg-color: #c978ee">
|
||||||
<el-icon color="#fff"><Coin /></el-icon>
|
<el-icon color="#fff">
|
||||||
|
<Coin />
|
||||||
|
</el-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div class="m">¥{{ payCount.refundAmount || 0 }}</div>
|
<div class="m">¥{{ payCount.refundAmount || 0 }}</div>
|
||||||
|
|
@ -75,7 +73,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="icon_wrap" style="--bg-color: #c978ee">
|
<div class="icon_wrap" style="--bg-color: #c978ee">
|
||||||
<el-icon color="#fff"><ShoppingCartFull /></el-icon>
|
<el-icon color="#fff">
|
||||||
|
<ShoppingCartFull />
|
||||||
|
</el-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div class="m">{{ payCount.saleCount || 0 }}</div>
|
<div class="m">{{ payCount.saleCount || 0 }}</div>
|
||||||
|
|
@ -84,7 +84,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="icon_wrap" style="--bg-color: #c978ee">
|
<div class="icon_wrap" style="--bg-color: #c978ee">
|
||||||
<el-icon color="#fff"><ShoppingCart /></el-icon>
|
<el-icon color="#fff">
|
||||||
|
<ShoppingCart />
|
||||||
|
</el-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div class="m">{{ payCount.refundCount || 0 }}</div>
|
<div class="m">{{ payCount.refundCount || 0 }}</div>
|
||||||
|
|
@ -145,14 +147,9 @@
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
<div class="head-container">
|
<div class="head-container">
|
||||||
<el-pagination
|
<el-pagination :total="tableData.total" :current-page="tableData.page" :page-size="tableData.size"
|
||||||
:total="tableData.total"
|
@current-change="paginationChange" @size-change="sizeChange"
|
||||||
:current-page="tableData.page"
|
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||||
:page-size="tableData.size"
|
|
||||||
@current-change="paginationChange"
|
|
||||||
@size-change="sizeChange"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
></el-pagination>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -185,6 +182,8 @@ export default {
|
||||||
downloadLoading: false,
|
downloadLoading: false,
|
||||||
payCount: "",
|
payCount: "",
|
||||||
payCountTotal: 0,
|
payCountTotal: 0,
|
||||||
|
storeList: [{ label: "门店1", value: 1 }],
|
||||||
|
storeId: null,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
filters: {
|
filters: {
|
||||||
|
|
|
||||||
|
|
@ -301,10 +301,13 @@ async function handleEditClick(row: IObject) {
|
||||||
// 其他工具栏
|
// 其他工具栏
|
||||||
function handleToolbarClick(name: string) {
|
function handleToolbarClick(name: string) {
|
||||||
console.log(name);
|
console.log(name);
|
||||||
if (name === "custom1") {
|
if ( name === "custom1" ) {
|
||||||
// ElMessage.success("点击了自定义1按钮");
|
// ElMessage.success("点击了自定义1按钮");
|
||||||
myDialogRef.value.open();
|
myDialogRef.value.open();
|
||||||
}
|
}
|
||||||
|
if ( name === "custom2" ) { //商品同步
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
async function confirm() {
|
async function confirm() {
|
||||||
let res = await UserAPI.stockWarning(form.warnLine)
|
let res = await UserAPI.stockWarning(form.warnLine)
|
||||||
|
|
|
||||||
|
|
@ -66,6 +66,13 @@ const contentConfig: IContentConfig<UserPageQuery> = {
|
||||||
name: "custom1",
|
name: "custom1",
|
||||||
auth: "import",
|
auth: "import",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
icon: "refresh",
|
||||||
|
text: "同步",
|
||||||
|
type: "danger",
|
||||||
|
name: "custom2",
|
||||||
|
auth: "import",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
cols: [
|
cols: [
|
||||||
// { type: "selection", width: 50, align: "center" },
|
// { type: "selection", width: 50, align: "center" },
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog title="激活码" width="500px" v-model="show" @close="reset">
|
||||||
|
<el-form :model="form" ref="refForm" :rules="rules">
|
||||||
|
<el-form-item label="激活码" prop="activateCode">
|
||||||
|
<el-input v-model="form.activateCode" placeholder="请输入激活码"></el-input>
|
||||||
|
<div class="tips">注:输入有效激活码表示添加的同时直接激活该店铺。</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="close">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submit">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import ShopApi from "@/api/account/shop";
|
||||||
|
|
||||||
|
const show = ref(false);
|
||||||
|
const form = reactive({
|
||||||
|
activateCode: "",
|
||||||
|
id: "",
|
||||||
|
});
|
||||||
|
const rules = {
|
||||||
|
activateCode: [{ required: true, message: "请输入激活码", trigger: "blur" }],
|
||||||
|
};
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
form.activateCode = "";
|
||||||
|
form.id = "";
|
||||||
|
}
|
||||||
|
const emit = defineEmits(["submit"]);
|
||||||
|
const refForm = ref();
|
||||||
|
function submit() {
|
||||||
|
refForm.value.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
ShopApi.edit(form).then(() => {
|
||||||
|
ElNotification({
|
||||||
|
title: "成功",
|
||||||
|
message: "操作成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
emit("success");
|
||||||
|
close();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function close() {
|
||||||
|
show.value = false;
|
||||||
|
}
|
||||||
|
function open(obj) {
|
||||||
|
form.id = obj.id;
|
||||||
|
show.value = true;
|
||||||
|
}
|
||||||
|
defineExpose({
|
||||||
|
open,
|
||||||
|
close,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,531 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog :title="state.form.id ? '编辑店铺' : '添加店铺'" v-model="state.dialogVisible" @close="reset">
|
||||||
|
<div style="height: 50vh; overflow-y: auto">
|
||||||
|
<el-form ref="refForm" :model="state.form" :rules="state.rules" label-width="120px" label-position="left">
|
||||||
|
<el-form-item label="店铺名称" prop="shopName">
|
||||||
|
<el-input v-model="state.form.shopName" placeholder="请输入门店名称"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="店铺类型">
|
||||||
|
<el-radio-group v-model="state.form.shopType">
|
||||||
|
<el-radio-button value="only">单店</el-radio-button>
|
||||||
|
<el-radio-button value="chain">连锁店</el-radio-button>
|
||||||
|
<el-radio-button value="join">加盟店</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
<div class="tips">请谨慎修改!!!</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否为主店" prop="isMainStore">
|
||||||
|
<el-radio-group v-model="state.form.isMainStore" @change=" state.form.mainId = ''">
|
||||||
|
<el-radio value="1">是</el-radio>
|
||||||
|
<el-radio value="0">否</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="主店账号" prop="mainId" v-if="state.form.isMainStore == '0'">
|
||||||
|
<!-- <el-form-item label="主店账号" prop="mainId" v-if="state.form.shopType != 'only'"> -->
|
||||||
|
<el-select v-model="state.form.mainId" placeholder="请选择主店铺" filterable reserve-keyword
|
||||||
|
:remote-method="getTableData" :loading="state.shopListLoading">
|
||||||
|
<el-option v-for="item in state.shopList" :label="`${item.shopName}`" :value="item.id"
|
||||||
|
:key="item.id"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="连锁店扩展店名">
|
||||||
|
<el-input v-model="state.form.chainName" placeholder="请输入连锁店扩展店名"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="门店logo" prop="logo">
|
||||||
|
<SingleImageUpload v-model="state.form.logo" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="门店照片">
|
||||||
|
<SingleImageUpload v-model="state.form.frontImg" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="经营模式">
|
||||||
|
<el-radio-group v-model="state.form.registerType">
|
||||||
|
<el-radio-button value="before">先付费</el-radio-button>
|
||||||
|
<el-radio-button value="after">后付费</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
<div class="tips">请谨慎修改!!!</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="管理方式" v-if="state.form.shopType != 'only'">
|
||||||
|
<el-radio-group v-model="state.form.tube_type">
|
||||||
|
<el-radio-button value="0">不可直接管理</el-radio-button>
|
||||||
|
<el-radio-button value="1">直接管理</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
<div class="tips">请谨慎修改!!!</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="试用/正式">
|
||||||
|
<el-radio-group v-model="state.form.profiles">
|
||||||
|
<el-radio-button value="probation">试用</el-radio-button>
|
||||||
|
<el-radio-button value="release">正式</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="激活码">
|
||||||
|
<el-input v-model="state.form.activateCode" placeholder="请输入激活码"></el-input>
|
||||||
|
<div class="tips">注:输入有效激活码表示添加的同时直接激活该店铺。</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="登录账号" prop="accountName">
|
||||||
|
<el-input v-model="state.form.accountName" placeholder="请输入登录账号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="登录密码" prop="password" v-if="!state.form.id">
|
||||||
|
<el-input type="password" show-password v-model="state.form.accountPwd" placeholder="请输入登录密码"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="联系电话" prop="phone">
|
||||||
|
<el-input v-model="state.form.phone" placeholder="请输入联系电话"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备数量">
|
||||||
|
<el-input-number v-model="state.form.supportDeviceNumber" controls-position="right" :min="1" :step="1"
|
||||||
|
step-strictly></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="外卖起送金额">
|
||||||
|
<el-input-number v-model="form.takeaway_money" placeholder="0.00" controls-position="right"
|
||||||
|
:min="0"></el-input-number>
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item label="店铺经度" prop="lat">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="9" v-if="state.form.provinces">
|
||||||
|
<el-input :value="`${state.form.provinces}-${state.form.cities}-${state.form.districts}`" disabled />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4" v-if="state.form.lng">
|
||||||
|
<el-input v-model="state.form.lng" placeholder="经度" disabled></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4" v-if="state.form.lng">
|
||||||
|
<el-input v-model="state.form.lat" placeholder="纬度" disabled></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4">
|
||||||
|
<el-button type="primary" plain icon="place" @click="state.showLocation = true">
|
||||||
|
选择坐标
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="店铺详细地址">
|
||||||
|
<el-input type="textarea" v-model="state.form.address" placeholder="请输入门店详细地址"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="店铺简介">
|
||||||
|
<el-input type="textarea" v-model="state.form.detail" placeholder="请输入店铺简介"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-radio-group v-model="state.form.status">
|
||||||
|
<el-radio :value="1">开启</el-radio>
|
||||||
|
<el-radio :value="0">关闭</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-dialog title="选择地址" v-model="state.showLocation" :modal="false" :modal-append-to-body="false">
|
||||||
|
<div class="map_box">
|
||||||
|
<div class="map">
|
||||||
|
<el-amap ref="map" :center="state.amapOptions.center" @init="mapInit">
|
||||||
|
<el-amap-marker :position="state.amapOptions.center"></el-amap-marker>
|
||||||
|
</el-amap>
|
||||||
|
</div>
|
||||||
|
<div class="search_box">
|
||||||
|
<el-input v-model="state.searchOption.keyword" placeholder="请输入关键字" @focus="state.searchOption.focus = true"
|
||||||
|
@blur="autoCompleteSearchBlur" @input="autoCompleteSearch(state.searchOption.keyword)">
|
||||||
|
<template #append>
|
||||||
|
<el-button type="primary" @click="placeSearchSearch(state.searchOption.keyword)">
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
<div class="list" v-if="state.searchOption.focus && state.searchOption.show">
|
||||||
|
<div class="item" @click="autoCompleteListClick(item)" v-for="item in state.autoCompleteList"
|
||||||
|
:key="item.id">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="search_wrap">
|
||||||
|
<div class="item" v-for="item in state.locationSearchList" :key="item.id">
|
||||||
|
<div class="left">
|
||||||
|
<div class="name">{{ item.name }}-{{ item.address }}</div>
|
||||||
|
<div class="location">经纬度:{{ item.location.lng }},{{ item.location.lat }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn">
|
||||||
|
<el-button type="primary" @click="selectLocationHandle(item)">选择</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="close">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitHandle" :loading="state.formLoading">
|
||||||
|
<span v-if="!state.formLoading">保存</span>
|
||||||
|
<span v-else>保存中...</span>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { getToken } from "@/utils/auth";
|
||||||
|
import uploadImg from "@/assets/images/upload.png";
|
||||||
|
import { ElAmap } from "@vuemap/vue-amap";
|
||||||
|
import { initMapLoad } from "@/utils/mapLoadUtil";
|
||||||
|
import { ElNotification } from "element-plus";
|
||||||
|
// { geocode, ShopApi.getList }
|
||||||
|
import ShopApi from "@/api/account/shop";
|
||||||
|
const validateLogo = (rule, value, callback) => {
|
||||||
|
if (!state.form.logo) {
|
||||||
|
callback(new Error("请上传门店logo"));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
uploadImg: uploadImg,
|
||||||
|
dialogVisible: false,
|
||||||
|
showLocation: false,
|
||||||
|
showUpload: false,
|
||||||
|
uploadIndex: 1,
|
||||||
|
startTime: "",
|
||||||
|
endTime: "",
|
||||||
|
formLoading: false,
|
||||||
|
form: {
|
||||||
|
id: "",
|
||||||
|
shopName: "",
|
||||||
|
mainId: "",
|
||||||
|
shopType: "only",
|
||||||
|
tube_type: "0",
|
||||||
|
registerType: "before",
|
||||||
|
profiles: "release",
|
||||||
|
activateCode: "",
|
||||||
|
accountName: "",
|
||||||
|
accountPwd: "",
|
||||||
|
phone: "",
|
||||||
|
supportDeviceNumber: 1,
|
||||||
|
lat: "",
|
||||||
|
lng: "",
|
||||||
|
address: "",
|
||||||
|
detail: "",
|
||||||
|
status: 1,
|
||||||
|
logo: "",
|
||||||
|
frontImg: "",
|
||||||
|
provinces: "",
|
||||||
|
cities: "",
|
||||||
|
districts: "",
|
||||||
|
chainName: "",
|
||||||
|
isMainStore: '0',
|
||||||
|
},
|
||||||
|
resetForm: "",
|
||||||
|
rules: {
|
||||||
|
activateCode: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入激活码",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
shopName: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入店铺名称",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
isMainStore: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: " ",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
mainId: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: " ",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
lat: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请选择坐标",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
logo: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
validator: validateLogo,
|
||||||
|
trigger: "请上传门店logo",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
accountName: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入账号",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
accountPwd: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入账号密码",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
phone: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入联系电话",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
fileList: [],
|
||||||
|
files: [],
|
||||||
|
headers: {
|
||||||
|
Authorization: getToken(),
|
||||||
|
},
|
||||||
|
searchOption: {
|
||||||
|
city: "西安",
|
||||||
|
citylimit: false,
|
||||||
|
keyword: "",
|
||||||
|
show: false,
|
||||||
|
focus: false,
|
||||||
|
},
|
||||||
|
autoCompleteList: [],
|
||||||
|
locationSearchList: [],
|
||||||
|
amapOptions: {
|
||||||
|
center: [108.946465, 34.347984],
|
||||||
|
position: [],
|
||||||
|
},
|
||||||
|
shopListLoading: false,
|
||||||
|
shopList: [],
|
||||||
|
});
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
const res = await initMapLoad();
|
||||||
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
state.resetForm = { ...state.form };
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取商家列表
|
||||||
|
async function getTableData(query = "") {
|
||||||
|
console.log(123)
|
||||||
|
state.shopListLoading = true;
|
||||||
|
try {
|
||||||
|
const res = await ShopApi.getList({
|
||||||
|
page: 1,
|
||||||
|
size: 100,
|
||||||
|
shopName: query,
|
||||||
|
type: "only",
|
||||||
|
});
|
||||||
|
state.shopListLoading = false;
|
||||||
|
state.shopList = res.records;
|
||||||
|
} catch (error) {
|
||||||
|
state.shopListLoading = false;
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确认地址选择
|
||||||
|
async function selectLocationHandle(item) {
|
||||||
|
console.log(item);
|
||||||
|
state.form.lng = item.location.lng;
|
||||||
|
state.form.lat = item.location.lat;
|
||||||
|
state.form.address = item.address;
|
||||||
|
state.showLocation = false;
|
||||||
|
|
||||||
|
const position = `${item.location.lng},${item.location.lat}`;
|
||||||
|
|
||||||
|
state.form.provinces = item.pname;
|
||||||
|
state.form.cities = item.cityname;
|
||||||
|
state.form.districts = item.adname;
|
||||||
|
}
|
||||||
|
const emits = defineEmits(["close", "success"]);
|
||||||
|
const refForm = ref(null);
|
||||||
|
// 保存
|
||||||
|
function submitHandle() {
|
||||||
|
refForm.value.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
state.formLoading = true;
|
||||||
|
try {
|
||||||
|
state.form.id ? await ShopApi.edit(state.form) : await ShopApi.add(state.form);
|
||||||
|
emits("success");
|
||||||
|
state.formLoading = false;
|
||||||
|
ElNotification({
|
||||||
|
title: "成功",
|
||||||
|
message: `${state.form.id ? "编辑" : "添加"}成功`,
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
close();
|
||||||
|
} catch (error) {
|
||||||
|
state.formLoading = false;
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function handleSuccess(response, file, fileList) {
|
||||||
|
// const uid = file.uid
|
||||||
|
// const id = response.id
|
||||||
|
// this.files.push({ uid, id })
|
||||||
|
console.log("上传成功", response);
|
||||||
|
state.files = response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
function show(obj) {
|
||||||
|
getTableData();
|
||||||
|
state.dialogVisible = true;
|
||||||
|
if (obj && obj.id) {
|
||||||
|
console.log(obj);
|
||||||
|
state.form = { ...obj };
|
||||||
|
}
|
||||||
|
for (let key in state.rules) {
|
||||||
|
if (key === "accountName") {
|
||||||
|
if (obj.id) {
|
||||||
|
state.rules[key][0].required = false;
|
||||||
|
} else {
|
||||||
|
state.rules[key][0].required = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(state.rules);
|
||||||
|
}
|
||||||
|
function close() {
|
||||||
|
state.dialogVisible = false;
|
||||||
|
}
|
||||||
|
function reset() {
|
||||||
|
state.form = { ...state.resetForm };
|
||||||
|
}
|
||||||
|
|
||||||
|
let ElMap = undefined;
|
||||||
|
let placeSearch = undefined;
|
||||||
|
let autoComplete = undefined;
|
||||||
|
let PlaceSearchIndex = 1;
|
||||||
|
|
||||||
|
function autoCompleteSearchBlur() {
|
||||||
|
setTimeout(() => {
|
||||||
|
state.searchOption.show = false;
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
function autoCompleteSearch(keyword) {
|
||||||
|
if (keyword === "") {
|
||||||
|
state.autoCompleteList = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
autoComplete.search(keyword, function (status, result) {
|
||||||
|
if (status === "complete" && result.info === "OK") {
|
||||||
|
// 搜索成功时,result即是对应的匹配数据
|
||||||
|
console.log(result);
|
||||||
|
state.searchOption.show = true;
|
||||||
|
state.autoCompleteList = result.tips;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function autoCompleteListClick(item) {
|
||||||
|
console.log(item);
|
||||||
|
state.searchOption.keyword = item.name;
|
||||||
|
state.autoCompleteList = [];
|
||||||
|
placeSearchSearch(item.name);
|
||||||
|
}
|
||||||
|
function placeSearchSearch(keyword) {
|
||||||
|
PlaceSearchIndex = 1;
|
||||||
|
if (keyword === "") {
|
||||||
|
state.locationSearchList = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 关键字查询
|
||||||
|
placeSearch.search(keyword, (status, result) => {
|
||||||
|
console.log(status);
|
||||||
|
console.log(result);
|
||||||
|
state.locationSearchList = result.poiList.pois;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function mapInit(map) {
|
||||||
|
map.plugin(["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.ToolBar"], () => {
|
||||||
|
const toolBar = new AMap.ToolBar();
|
||||||
|
map.addControl(toolBar);
|
||||||
|
// 注意:输入提示插件2.0版本需引入AMap.AutoComplete,而1.4版本应使用AMap.Autocomplete
|
||||||
|
// 实例化AutoComplete
|
||||||
|
var autoOptions = {
|
||||||
|
city: "西安",
|
||||||
|
};
|
||||||
|
autoComplete = new AMap.AutoComplete(autoOptions);
|
||||||
|
|
||||||
|
//构造地点查询类
|
||||||
|
placeSearch = new AMap.PlaceSearch({
|
||||||
|
pageSize: 10, // 单页显示结果条数
|
||||||
|
pageIndex: PlaceSearchIndex, // 页码
|
||||||
|
city: "西安", // 兴趣点城市
|
||||||
|
citylimit: true, //是否强制限制在设置的城市内搜索
|
||||||
|
map: map, // 展现结果的地图实例
|
||||||
|
// panel: "search_wrap", // 结果列表将在此容器中进行展示。
|
||||||
|
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
ElMap = map;
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
show,
|
||||||
|
close,
|
||||||
|
reset,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.map_box {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.map {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_box {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
z-index: 3000;
|
||||||
|
|
||||||
|
.list {
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 0 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_wrap {
|
||||||
|
padding: 6px 0;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
padding: 12px 0;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-right: 20px;
|
||||||
|
|
||||||
|
.location {
|
||||||
|
color: #999;
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.amap-sug-result {
|
||||||
|
z-index: 2000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,156 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog v-model="dialogVisible" :show-close="false" @close="reset">
|
||||||
|
<el-tabs v-model="activeName">
|
||||||
|
<el-tab-pane label="聚合支付" name="pay">
|
||||||
|
<el-form ref="form" :model="form" label-width="120px" label-position="left">
|
||||||
|
<el-form-item label="店铺id">
|
||||||
|
<el-input v-model="form.storeId" placeholder="请输入店铺id"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商户名称">
|
||||||
|
<el-input v-model="form.merchantName" placeholder="请输入支付系统商户名称"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商户应用id">
|
||||||
|
<el-input v-model="form.appId" placeholder="请输入商户应用id"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商户密钥">
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
v-model="form.appSecret"
|
||||||
|
placeholder="请输入商户密钥"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="支付密码">
|
||||||
|
<el-input v-model="form.payPassword" placeholder="请输入支付密码"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="微信appid">
|
||||||
|
<el-input
|
||||||
|
v-model="form.wechatSmallAppid"
|
||||||
|
placeholder="请输入微信小程序appid"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="支付宝appid">
|
||||||
|
<el-input
|
||||||
|
v-model="form.alipaySmallAppid"
|
||||||
|
placeholder="请输入支付宝小程序appid"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="支付宝商户号">
|
||||||
|
<el-input v-model="form.alipayAppId" placeholder="请输入支付宝商户号"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="支付宝商户密钥">
|
||||||
|
<el-input v-model="form.alipayAppToken" placeholder="请输入支付宝商户密钥"></el-input>
|
||||||
|
</el-form-item> -->
|
||||||
|
|
||||||
|
<!-- <el-form-item label="状态">
|
||||||
|
<el-radio-group v-model="form.status">
|
||||||
|
<el-radio :value="1">启用</el-radio>
|
||||||
|
<el-radio :value="-1">禁用</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item> -->
|
||||||
|
</el-form>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="close">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitHandle" :loading="formLoading">
|
||||||
|
<span v-if="!formLoading">保存</span>
|
||||||
|
<span v-else>保存中...</span>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import { tbMerchantThirdApply, tbMerchantThirdApplyPut } from "@/api/shop";
|
||||||
|
import ShopApi from "@/api/account/shop";
|
||||||
|
import shopMerchantApi from "@/api/account/shopMerchant";
|
||||||
|
import { ElNotification } from "element-plus";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogVisible: false,
|
||||||
|
activeName: "pay",
|
||||||
|
formLoading: false,
|
||||||
|
form: {
|
||||||
|
appSecret: "",
|
||||||
|
id: "",
|
||||||
|
payPassword: "",
|
||||||
|
status: 1,
|
||||||
|
appId: "",
|
||||||
|
wechatSmallAppid: "",
|
||||||
|
storeId: "",
|
||||||
|
alipaySmallAppid: "",
|
||||||
|
alipayAppToken: "",
|
||||||
|
alipayAppId: "",
|
||||||
|
},
|
||||||
|
shopId: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 保存
|
||||||
|
async submitHandle() {
|
||||||
|
this.formLoading = true;
|
||||||
|
try {
|
||||||
|
await shopMerchantApi.edit(this.shopId, this.form);
|
||||||
|
this.$emit("success");
|
||||||
|
this.formLoading = false;
|
||||||
|
ElNotification({
|
||||||
|
title: "成功",
|
||||||
|
message: `修改成功`,
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
this.close();
|
||||||
|
} catch (error) {
|
||||||
|
this.formLoading = false;
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.dialogVisible = false;
|
||||||
|
},
|
||||||
|
reset() {
|
||||||
|
this.form.appSecret = "";
|
||||||
|
this.form.id = "";
|
||||||
|
this.form.payPassword = "";
|
||||||
|
this.form.status = 1;
|
||||||
|
this.form.appId = "";
|
||||||
|
this.shopId = "";
|
||||||
|
},
|
||||||
|
// 详情(配置三方支付)
|
||||||
|
async getDetail(id) {
|
||||||
|
console.log(id);
|
||||||
|
this.shopId = id;
|
||||||
|
try {
|
||||||
|
const res = await shopMerchantApi.get(id);
|
||||||
|
this.form.appSecret = res.appSecret || "";
|
||||||
|
this.form.payPassword = res.payPassword || "";
|
||||||
|
this.form.status = res.status || "";
|
||||||
|
this.form.appId = res.appId || "";
|
||||||
|
this.form.wechatSmallAppid = res.wechatSmallAppid || "";
|
||||||
|
this.form.alipaySmallAppid = res.alipaySmallAppid || "";
|
||||||
|
this.form.merchantName = res.merchantName || "";
|
||||||
|
//this.form.alipayAppToken = res.alipayAppToken
|
||||||
|
//this.form.alipayAppId = res.alipayAppId
|
||||||
|
this.form.storeId = res.storeId || "";
|
||||||
|
this.dialogVisible = true;
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
show(obj) {
|
||||||
|
if (obj && obj.id) {
|
||||||
|
this.form.id = obj.id;
|
||||||
|
this.getDetail(obj.id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
:deep(.el-dialog__header) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div class="head-container">
|
||||||
|
<el-card shadow="never">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="4">
|
||||||
|
<el-input v-model="state.query.name" clearable placeholder="请输入分店名称" style="width: 100%" class="filter-item"
|
||||||
|
@keyup.enter="getTableData" />
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||||
|
<el-button @click="resetHandle">重置</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
<div class="head-container">
|
||||||
|
<el-card shadow="never">
|
||||||
|
<el-table v-loading="state.tableData.loading" :data="state.tableData.list">
|
||||||
|
<el-table-column prop="status" label="ID" width="80" />
|
||||||
|
<el-table-column label="店铺信息" width="200">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<div>{{ scope.row.shopName }}{{ scope.row.shopName }}</div>
|
||||||
|
<div>账号:{{ scope.row.shopName }}</div>
|
||||||
|
<div>联系电话:{{ scope.row.phone }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="status" label="商品同步">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" disabled />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="status" label="会员同步">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" disabled />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="status" label="耗材同步">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" disabled />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="createdAt" label="备注">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<span v-if="scope.row.expireTime">
|
||||||
|
{{ dayjs(scope.row.expireTime).format("YYYY-MM-DD HH:mm:ss") }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="head-container">
|
||||||
|
<el-pagination v-model:current-page="state.tableData.page" v-model:page-size="state.tableData.size"
|
||||||
|
:total="state.tableData.total" :page-sizes="[10, 20, 30, 50, 100]"
|
||||||
|
layout="total, sizes , prev, pager ,next, jumper " @current-change="paginationChange" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import ShopApi from "@/api/account/shop";
|
||||||
|
import { ElNotification, ElMessageBox } from "element-plus";
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
query: {
|
||||||
|
name: "",
|
||||||
|
},
|
||||||
|
status: [
|
||||||
|
{
|
||||||
|
type: 1,
|
||||||
|
label: "开启",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 0,
|
||||||
|
label: "关闭",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableData: {
|
||||||
|
list: [],
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
loading: false,
|
||||||
|
total: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
getTableData();
|
||||||
|
});
|
||||||
|
// 获取商家列表
|
||||||
|
async function getTableData() {
|
||||||
|
state.tableData.loading = true;
|
||||||
|
try {
|
||||||
|
const res = await ShopApi.getList({
|
||||||
|
page: state.tableData.page,
|
||||||
|
size: state.tableData.size,
|
||||||
|
shopName: state.query.name,
|
||||||
|
account: state.query.account,
|
||||||
|
status: state.query.status,
|
||||||
|
});
|
||||||
|
state.tableData.loading = false;
|
||||||
|
state.tableData.list = res.records;
|
||||||
|
state.tableData.total = res.totalRow * 1;
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 重置查询
|
||||||
|
function resetHandle() {
|
||||||
|
state.query.name = "";
|
||||||
|
getTableData();
|
||||||
|
}
|
||||||
|
// 分页回调
|
||||||
|
function paginationChange(e) {
|
||||||
|
state.tableData.page = e;
|
||||||
|
getTableData();
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.head-container {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop_info {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.info {
|
||||||
|
flex: 1;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-link {
|
||||||
|
min-height: 23px;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,17 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<el-dialog
|
<el-dialog :title="state.form.id ? '编辑店铺' : '添加店铺'" v-model="state.dialogVisible" @close="reset">
|
||||||
:title="state.form.id ? '编辑店铺' : '添加店铺'"
|
|
||||||
v-model="state.dialogVisible"
|
|
||||||
@close="reset"
|
|
||||||
>
|
|
||||||
<div style="height: 50vh; overflow-y: auto">
|
<div style="height: 50vh; overflow-y: auto">
|
||||||
<el-form
|
<el-form ref="refForm" :model="state.form" :rules="state.rules" label-width="120px" label-position="left">
|
||||||
ref="refForm"
|
|
||||||
:model="state.form"
|
|
||||||
:rules="state.rules"
|
|
||||||
label-width="120px"
|
|
||||||
label-position="left"
|
|
||||||
>
|
|
||||||
<el-form-item label="店铺名称" prop="shopName">
|
<el-form-item label="店铺名称" prop="shopName">
|
||||||
<el-input v-model="state.form.shopName" placeholder="请输入门店名称"></el-input>
|
<el-input v-model="state.form.shopName" placeholder="请输入门店名称"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
@ -23,22 +13,18 @@
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
<div class="tips">请谨慎修改!!!</div>
|
<div class="tips">请谨慎修改!!!</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="主店账号" prop="mainId" v-if="state.form.shopType != 'only'">
|
<el-form-item label="是否为主店" prop="isMainStore">
|
||||||
<el-select
|
<el-radio-group v-model="state.form.isMainStore" @change=" state.form.mainId = ''">
|
||||||
v-model="state.form.mainId"
|
<el-radio value="1">是</el-radio>
|
||||||
placeholder="请选择主店铺"
|
<el-radio value="0">否</el-radio>
|
||||||
filterable
|
</el-radio-group>
|
||||||
remote
|
</el-form-item>
|
||||||
reserve-keyword
|
<el-form-item label="主店账号" prop="mainId" v-if="state.form.isMainStore == '0'">
|
||||||
:remote-method="getTableData"
|
<!-- <el-form-item label="主店账号" prop="mainId" v-if="state.form.shopType != 'only'"> -->
|
||||||
:loading="state.shopListLoading"
|
<el-select v-model="state.form.mainId" placeholder="请选择主店铺" filterable reserve-keyword
|
||||||
>
|
:remote-method="getTableData" :loading="state.shopListLoading">
|
||||||
<el-option
|
<el-option v-for="item in state.shopList" :label="`${item.shopName}`" :value="item.id"
|
||||||
v-for="item in state.shopList"
|
:key="item.id"></el-option>
|
||||||
:label="`ID:${item.id} - 名称:${item.shopName}`"
|
|
||||||
:value="item.id"
|
|
||||||
:key="item.id"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="连锁店扩展店名">
|
<el-form-item label="连锁店扩展店名">
|
||||||
|
|
@ -78,24 +64,14 @@
|
||||||
<el-input v-model="state.form.accountName" placeholder="请输入登录账号"></el-input>
|
<el-input v-model="state.form.accountName" placeholder="请输入登录账号"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="登录密码" prop="password" v-if="!state.form.id">
|
<el-form-item label="登录密码" prop="password" v-if="!state.form.id">
|
||||||
<el-input
|
<el-input type="password" show-password v-model="state.form.accountPwd" placeholder="请输入登录密码"></el-input>
|
||||||
type="password"
|
|
||||||
show-password
|
|
||||||
v-model="state.form.accountPwd"
|
|
||||||
placeholder="请输入登录密码"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="联系电话" prop="phone">
|
<el-form-item label="联系电话" prop="phone">
|
||||||
<el-input v-model="state.form.phone" placeholder="请输入联系电话"></el-input>
|
<el-input v-model="state.form.phone" placeholder="请输入联系电话"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="设备数量">
|
<el-form-item label="设备数量">
|
||||||
<el-input-number
|
<el-input-number v-model="state.form.supportDeviceNumber" controls-position="right" :min="1" :step="1"
|
||||||
v-model="state.form.supportDeviceNumber"
|
step-strictly></el-input-number>
|
||||||
controls-position="right"
|
|
||||||
:min="1"
|
|
||||||
:step="1"
|
|
||||||
step-strictly
|
|
||||||
></el-input-number>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="外卖起送金额">
|
<!-- <el-form-item label="外卖起送金额">
|
||||||
<el-input-number v-model="form.takeaway_money" placeholder="0.00" controls-position="right"
|
<el-input-number v-model="form.takeaway_money" placeholder="0.00" controls-position="right"
|
||||||
|
|
@ -104,10 +80,7 @@
|
||||||
<el-form-item label="店铺经度" prop="lat">
|
<el-form-item label="店铺经度" prop="lat">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="9" v-if="state.form.provinces">
|
<el-col :span="9" v-if="state.form.provinces">
|
||||||
<el-input
|
<el-input :value="`${state.form.provinces}-${state.form.cities}-${state.form.districts}`" disabled />
|
||||||
:value="`${state.form.provinces}-${state.form.cities}-${state.form.districts}`"
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="4" v-if="state.form.lng">
|
<el-col :span="4" v-if="state.form.lng">
|
||||||
<el-input v-model="state.form.lng" placeholder="经度" disabled></el-input>
|
<el-input v-model="state.form.lng" placeholder="经度" disabled></el-input>
|
||||||
|
|
@ -123,18 +96,10 @@
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="店铺详细地址">
|
<el-form-item label="店铺详细地址">
|
||||||
<el-input
|
<el-input type="textarea" v-model="state.form.address" placeholder="请输入门店详细地址"></el-input>
|
||||||
type="textarea"
|
|
||||||
v-model="state.form.address"
|
|
||||||
placeholder="请输入门店详细地址"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="店铺简介">
|
<el-form-item label="店铺简介">
|
||||||
<el-input
|
<el-input type="textarea" v-model="state.form.detail" placeholder="请输入店铺简介"></el-input>
|
||||||
type="textarea"
|
|
||||||
v-model="state.form.detail"
|
|
||||||
placeholder="请输入店铺简介"
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="状态">
|
<el-form-item label="状态">
|
||||||
<el-radio-group v-model="state.form.status">
|
<el-radio-group v-model="state.form.status">
|
||||||
|
|
@ -144,12 +109,7 @@
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
<el-dialog
|
<el-dialog title="选择地址" v-model="state.showLocation" :modal="false" :modal-append-to-body="false">
|
||||||
title="选择地址"
|
|
||||||
v-model="state.showLocation"
|
|
||||||
:modal="false"
|
|
||||||
:modal-append-to-body="false"
|
|
||||||
>
|
|
||||||
<div class="map_box">
|
<div class="map_box">
|
||||||
<div class="map">
|
<div class="map">
|
||||||
<el-amap ref="map" :center="state.amapOptions.center" @init="mapInit">
|
<el-amap ref="map" :center="state.amapOptions.center" @init="mapInit">
|
||||||
|
|
@ -157,13 +117,8 @@
|
||||||
</el-amap>
|
</el-amap>
|
||||||
</div>
|
</div>
|
||||||
<div class="search_box">
|
<div class="search_box">
|
||||||
<el-input
|
<el-input v-model="state.searchOption.keyword" placeholder="请输入关键字" @focus="state.searchOption.focus = true"
|
||||||
v-model="state.searchOption.keyword"
|
@blur="autoCompleteSearchBlur" @input="autoCompleteSearch(state.searchOption.keyword)">
|
||||||
placeholder="请输入关键字"
|
|
||||||
@focus="state.searchOption.focus = true"
|
|
||||||
@blur="autoCompleteSearchBlur"
|
|
||||||
@input="autoCompleteSearch(state.searchOption.keyword)"
|
|
||||||
>
|
|
||||||
<template #append>
|
<template #append>
|
||||||
<el-button type="primary" @click="placeSearchSearch(state.searchOption.keyword)">
|
<el-button type="primary" @click="placeSearchSearch(state.searchOption.keyword)">
|
||||||
搜索
|
搜索
|
||||||
|
|
@ -171,12 +126,8 @@
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
<div class="list" v-if="state.searchOption.focus && state.searchOption.show">
|
<div class="list" v-if="state.searchOption.focus && state.searchOption.show">
|
||||||
<div
|
<div class="item" @click="autoCompleteListClick(item)" v-for="item in state.autoCompleteList"
|
||||||
class="item"
|
:key="item.id">
|
||||||
@click="autoCompleteListClick(item)"
|
|
||||||
v-for="item in state.autoCompleteList"
|
|
||||||
:key="item.id"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -257,6 +208,7 @@ const state = reactive({
|
||||||
cities: "",
|
cities: "",
|
||||||
districts: "",
|
districts: "",
|
||||||
chainName: "",
|
chainName: "",
|
||||||
|
isMainStore: '0',
|
||||||
},
|
},
|
||||||
resetForm: "",
|
resetForm: "",
|
||||||
rules: {
|
rules: {
|
||||||
|
|
@ -274,6 +226,13 @@ const state = reactive({
|
||||||
trigger: "blur",
|
trigger: "blur",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
isMainStore: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: " ",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
mainId: [
|
mainId: [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
|
|
@ -347,6 +306,7 @@ onMounted(() => {
|
||||||
|
|
||||||
// 获取商家列表
|
// 获取商家列表
|
||||||
async function getTableData(query = "") {
|
async function getTableData(query = "") {
|
||||||
|
console.log(123)
|
||||||
state.shopListLoading = true;
|
state.shopListLoading = true;
|
||||||
try {
|
try {
|
||||||
const res = await ShopApi.getList({
|
const res = await ShopApi.getList({
|
||||||
|
|
@ -356,7 +316,7 @@ async function getTableData(query = "") {
|
||||||
type: "only",
|
type: "only",
|
||||||
});
|
});
|
||||||
state.shopListLoading = false;
|
state.shopListLoading = false;
|
||||||
state.shopList = res.content;
|
state.shopList = res.records;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
state.shopListLoading = false;
|
state.shopListLoading = false;
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
|
@ -525,14 +485,17 @@ defineExpose({
|
||||||
top: 10px;
|
top: 10px;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
z-index: 3000;
|
z-index: 3000;
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,27 @@
|
||||||
import type { ISearchConfig } from "@/components/CURD/types";
|
import type { ISearchConfig } from "@/components/CURD/types";
|
||||||
import { paramTypeOptions } from './config'
|
import { paramTypeOptions } from './config'
|
||||||
|
import UserAPI from "@/api/product/productclassification";
|
||||||
|
|
||||||
|
|
||||||
const searchConfig: ISearchConfig = {
|
const searchConfig: ISearchConfig = {
|
||||||
pageName: "sys:user",
|
pageName: "sys:user",
|
||||||
formItems: [
|
formItems: [
|
||||||
|
{
|
||||||
|
type: "select",
|
||||||
|
label: "分店选择",
|
||||||
|
prop: "storeId",
|
||||||
|
attrs: {
|
||||||
|
placeholder: "请选择分店",
|
||||||
|
clearable: true,
|
||||||
|
style: {
|
||||||
|
width: "200px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
options: [],
|
||||||
|
async initFn(formItem) {
|
||||||
|
formItem.options = await UserAPI.getList();
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: "input",
|
type: "input",
|
||||||
label: "账号名",
|
label: "账号名",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue