fix:增加收银中心,供应商账单,分店管理修改

This commit is contained in:
GaoHao
2025-04-03 14:29:25 +08:00
parent 11b297baa5
commit 164dd52afa
10 changed files with 537 additions and 960 deletions

View File

@@ -1,60 +0,0 @@
<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>

View File

@@ -1,531 +0,0 @@
<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>

View File

@@ -1,156 +0,0 @@
<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>

View File

@@ -19,33 +19,42 @@
<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">
<el-table-column label="店铺信息" >
<template v-slot="scope">
<div>{{ scope.row.shopName }}{{ scope.row.shopName }}</div>
<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="商品同步">
<el-table-column prop="status" label="商品同步" width="120">
<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="会员同步">
<el-table-column prop="status" label="会员同步" width="120">
<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="耗材同步">
<el-table-column prop="status" label="耗材同步" width="120">
<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="备注">
<el-table-column prop="status" label="账号状态" width="120">
<template v-slot="scope">
<span v-if="scope.row.expireTime">
{{ dayjs(scope.row.expireTime).format("YYYY-MM-DD HH:mm:ss") }}
</span>
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" disabled />
</template>
</el-table-column>
<el-table-column prop="createdAt" label="备注" />
<el-table-column label="操作" width="200">
<template v-slot="scope">
<el-button type="primary" size="small" link icon="edit" @click="handleSync(scope.row)">
同步启用
</el-button>
<el-button type="primary" size="small" link icon="edit" @click="handleAccount(scope.row.id)">
账号启用
</el-button>
</template>
</el-table-column>
</el-table>
@@ -108,6 +117,21 @@ async function getTableData() {
console.log(error);
}
}
function handleSync(e) {
console.log(e)
ElMessageBox.confirm(`同步功能开启后不能关闭,请确认是否给${e.shopName}开启同步?`, "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
}).then(async () => {
const res = await ShopApi.delete({ id: row.id });
ElMessage({
type: "success",
message: "同步成功",
});
getTableData();
}).catch(() => { });
}
// 重置查询
function resetHandle() {
state.query.name = "";