czg_team
/
cashier-admin
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增添加店铺、添加激活码

This commit is contained in:
gyq 2024-02-23 18:29:40 +08:00
parent 36f24888ba
commit 889919f2fc
9 changed files with 784 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -48,6 +48,7 @@
"sortablejs": "1.8.4",
"vue": "^2.6.14",
"vue-amap": "^0.5.10",
"vue-clipboard2": "^0.3.3",
"vue-count-to": "^1.0.13",
"vue-cropper": "0.4.9",
"vue-echarts": "^5.0.0-beta.0",

19
src/App.vue
View File

@ -11,6 +11,25 @@ export default {
</script>
<style lang="scss">
/*定义滚动条高宽及背景
高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 4px;
}
/*定义滚动条轨道
内阴影+圆角*/
::-webkit-scrollbar-track {
background-color: #F5F5F5;
}
/*定义滑块
内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #d3d3d3;
}
.tips {
color: #999;
}

47
src/api/shop.js
View File

@ -286,5 +286,52 @@ export function tbProductGetDetail(product) {
})
}
/**
* 店铺列表
* @returns
*/
export function tbShopInfo(params) {
return request({
url: `/api/tbShopInfo`,
method: 'get',
params
})
}
/**
* 增加激活码
* @returns
*/
export function tbMerchantRegisterPost(data) {
return request({
url: `/api/tbMerchantRegister`,
method: 'post',
data
})
}
/**
* 激活码列表
* @returns
*/
export function tbMerchantRegisterList(data) {
return request({
url: `/api/tbMerchantRegister/list`,
method: 'post',
data
})
}
/**
* 增加/编辑店铺
* @returns
*/
export function tbShopInfoPost(data, method = 'post') {
return request({
url: `/api/tbShopInfo`,
method: method,
data
})
}

4
src/main.js
View File

@ -29,6 +29,8 @@ import './router/index' // permission control
import EleUploadImage from 'vue-ele-upload-image'
import VueAMap from 'vue-amap';
import VueClipboard from 'vue-clipboard2'
Vue.component(EleUploadImage.name, EleUploadImage)
Vue.component('Editor', Editor)
@ -40,6 +42,8 @@ Vue.use(Element, {
size: Cookies.get('size') || 'small' // set element-ui default size
})
Vue.use(VueAMap)
Vue.use(VueClipboard)
VueAMap.initAMapApiLoader({
key: '6033c97e67bf2e9ceac306e1a3fa35f8',
// securityJsCode: '0547b69252ef0ed14e11f5c4ac152f07',

7
src/views/product/index.vue
View File

@ -177,7 +177,12 @@ export default {
.info {
flex: 1;
padding-left: 4px;
padding-left: 8px;
display: flex;
flex-direction: column;
.tag_wrap {
display: flex;
}
}
}
</style>

80
src/views/register/components/addActivationCode.vue Normal file
View File

@ -0,0 +1,80 @@
<template>
<el-dialog title="生产激活码" :visible.sync="dialogVisible" width="500px" @close="reset">
<el-form :model="form" :rules="rules" label-width="100px" label-position="left">
<el-form-item label="激活时长" prop="periodYear">
<el-input-number v-model="form.periodYear" controls-position="right" :min="1" :step="1"
step-strictly></el-input-number>
</el-form-item>
<el-form-item label="生产数量" prop="number">
<el-input-number v-model="form.number" controls-position="right" :min="1" :step="1"
step-strictly></el-input-number>
</el-form-item>
<!-- <el-form-item label="所属代理" prop="agent">
<el-input v-model="form.agent" placeholder="请输入完整的代理账号查找"></el-input>
</el-form-item> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" v-loading="loading" @click="tbMerchantRegisterPost">生产激活码</el-button>
</div>
</el-dialog>
</template>
<script>
import { tbMerchantRegisterPost } from '@/api/shop.js'
export default {
data() {
return {
dialogVisible: false,
loading: false,
form: {
periodYear: 1,
number: 1,
agent: ''
},
rules: {
periodYear: [{
required: true,
message: ' ',
trigger: 'blur'
}],
number: [{
required: true,
message: ' ',
trigger: 'blur'
}]
}
}
},
methods: {
async tbMerchantRegisterPost() {
try {
this.loading = true
const res = await tbMerchantRegisterPost(this.form)
this.$emit('success', res)
this.close()
this.$notify({
title: '成功',
message: `添加成功`,
type: 'success'
});
this.loading = false
} catch (error) {
this.loading = false
console.log(error)
}
},
show() {
this.dialogVisible = true
},
close() {
this.dialogVisible = false
},
reset() {
this.form.periodYear = 1
this.form.number = 1
this.form.agent = ''
}
}
}
</script>

248
src/views/register/index.vue
View File

@ -1,146 +1,160 @@
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<label class="el-form-item-label">id</label>
<el-input v-model="query.id" clearable placeholder="id" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">激活码</label>
<el-input v-model="query.registerCode" clearable placeholder="激活码" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">店铺名称</label>
<el-input v-model="query.shopName" clearable placeholder="店铺名称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">版本类型</label>
<el-input v-model="query.type" clearable placeholder="版本类型" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">激活码金额</label>
<el-input v-model="query.amount" clearable placeholder="激活码金额" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">激活时长（月）</label>
<el-input v-model="query.periodYear" clearable placeholder="激活时长（月）" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">状态0未使用1已使用</label>
<el-input v-model="query.status" clearable placeholder="状态0未使用1已使用" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">创建时间</label>
<el-input v-model="query.createdAt" clearable placeholder="创建时间" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<rrOperation :crud="crud" />
<div class="filter_wrap">
<!-- <el-input v-model="query.name" size="small" clearable placeholder="请输入完整的代理商账号查找" style="width: 250px"
@keyup.enter.native="getTableData" /> -->
<el-select v-model="query.type" placeholder="请选择类型" style="width: 200px">
<el-option label="快餐版" value="munchies" />
<el-option label="餐饮版" value="restaurant" />
</el-select>
<el-select v-model="query.status" placeholder="请选择状态" style="width: 200px">
<el-option label="待激活" :value="0" />
<el-option label="已使用" :value="1" />
</el-select>
<el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 400px" @change="getTableData">
</el-date-picker>
<el-button type="primary" @click="getTableData">查询</el-button>
<el-button @click="resetHandle">重置</el-button>
</div>
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
<crudOperation :permission="permission" />
<!--表单组件-->
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="id" prop="id">
<el-input v-model="form.id" style="width: 370px;" />
</el-form-item>
<el-form-item label="激活码">
<el-input v-model="form.registerCode" style="width: 370px;" />
</el-form-item>
<el-form-item label="店铺名称">
<el-input v-model="form.shopName" style="width: 370px;" />
</el-form-item>
<el-form-item label="版本类型">
<el-input v-model="form.type" style="width: 370px;" />
</el-form-item>
<el-form-item label="激活码金额">
<el-input v-model="form.amount" style="width: 370px;" />
</el-form-item>
<el-form-item label="激活时长（月）">
<el-input v-model="form.periodYear" style="width: 370px;" />
</el-form-item>
<el-form-item label="状态0未使用1已使用">
<el-input v-model="form.status" style="width: 370px;" />
</el-form-item>
<el-form-item label="创建时间">
<el-input v-model="form.createdAt" style="width: 370px;" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column type="selection" width="55" />
<el-table-column prop="id" label="id" />
<el-table-column prop="registerCode" label="激活码" />
<el-table-column prop="shopName" label="店铺名称" />
<el-table-column prop="type" label="版本类型">
<template slot-scope="scope">
{{ dict.label.register_type[scope.row.type] }}
</div>
<div class="head-container">
<div class="filter_wrap">
<el-button type="primary" icon="el-icon-plus" @click="$refs.addActivationCode.show()">添加激活码</el-button>
<el-button icon="el-icon-download">导出Excel</el-button>
</div>
</div>
<div class="head-container">
<el-table :data="tableData.list" v-loading="tableData.loading">
<el-table-column label="激活码" prop="registerCode" width="500px">
<template v-slot="scope">
<el-tooltip content="点击复制">
<el-tag type="success" @click="copyHandle(scope.row.registerCode)">
<i class="el-icon-paperclip"></i>
{{ scope.row.registerCode }}
</el-tag>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="amount" label="激活码金额" />
<el-table-column prop="periodYear" label="激活时长（月）" />
<el-table-column prop="status" label="状态0未使用1已使用">
<template slot-scope="scope">
{{ dict.label.register_status[scope.row.status] }}
<el-table-column label="商户名称" prop="name"></el-table-column>
<el-table-column label="联系电话" prop="telephone"></el-table-column>
<el-table-column label="版本类型" prop="type">
<template v-slot="scope">
<span v-if="scope.row.type == 'munchies'">快餐版</span>
<span v-if="scope.row.type == 'restaurant'">餐饮版</span>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" />
<el-table-column v-if="checkPer(['admin','viewRegister:edit','viewRegister:del'])" label="操作" width="150px" align="center">
<template slot-scope="scope">
<udOperation
:data="scope.row"
:permission="permission"
/>
<el-table-column label="激活时长" prop="periodYear"></el-table-column>
<el-table-column label="状态" prop="status">
<template v-slot="scope">
<el-tag type="info" v-if="scope.row.status == 0">待激活</el-tag>
<el-tag type="success" v-if="scope.row.status == 1">已使用</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="createdAt">
<template v-slot="scope">
{{ scope.row.createdAt && dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />
</div>
<div class="head-container">
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
<addActivationCode ref="addActivationCode" @success="getTableData" />
</div>
</template>
<script>
import crudViewRegister from '@/api/viewRegister'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
const defaultForm = { id: null, registerCode: null, shopName: null, type: null, amount: null, periodYear: null, status: null, createdAt: null }
import dayjs from 'dayjs'
import { tbMerchantRegisterList } from '@/api/shop.js'
import addActivationCode from './components/addActivationCode'
import VueClipboard from 'vue-clipboard2'
export default {
name: 'ViewRegister',
components: { pagination, crudOperation, rrOperation, udOperation },
mixins: [presenter(), header(), form(defaultForm), crud()],
dicts: ['register_type', 'register_status'],
cruds() {
return CRUD({ title: '/register', url: 'api/viewRegister', idField: 'id', sort: 'id,desc', crudMethod: { ...crudViewRegister }})
},
components: { addActivationCode },
data() {
return {
permission: {
add: ['admin', 'viewRegister:add'],
edit: ['admin', 'viewRegister:edit'],
del: ['admin', 'viewRegister:del']
dayjs,
query: {
name: '',
type: '',
status: '',
createdAt: []
},
rules: {
id: [
{ required: true, message: '不能为空', trigger: 'blur' }
]
},
queryTypeOptions: [
{ key: 'id', display_name: 'id' },
{ key: 'registerCode', display_name: '激活码' },
{ key: 'shopName', display_name: '店铺名称' },
{ key: 'type', display_name: '版本类型' },
{ key: 'amount', display_name: '激活码金额' },
{ key: 'periodYear', display_name: '激活时长（月）' },
{ key: 'status', display_name: '状态0未使用1已使用' },
{ key: 'createdAt', display_name: '创建时间' }
]
status: [
{
type: 1,
label: '开启'
},
{
type: 0,
label: '关闭'
}
],
tableData: {
list: [],
page: 0,
size: 10,
loading: false,
total: 0
}
}
},
mounted() {
this.getTableData()
},
methods: {
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
[CRUD.HOOK.beforeRefresh]() {
return true
copyHandle(text) {
this.$copyText(text).then((e) => {
this.$notify({
title: '成功',
message: `复制成功`,
type: 'success'
});
})
},
// 重置查询
resetHandle() {
this.query.name = ''
this.query.account = ''
this.query.status = ''
this.getTableData()
},
// 分页回调
paginationChange(e) {
this.tableData.page = e - 1
this.getTableData()
},
async getTableData() {
this.tableData.loading = true
try {
const res = await tbMerchantRegisterList({
page: this.tableData.page,
size: this.tableData.size,
type: this.query.type,
status: this.query.status,
createdAt: this.query.createdAt
})
this.tableData.loading = false
this.tableData.list = res.content
this.tableData.total = res.totalElements
} catch (error) {
console.log(error)
}
}
}
}
</script>
<style scoped>
<style scoped lang="scss">
.shop_info {
display: flex;
</style>
.info {
flex: 1;
padding-left: 4px;
}
}
</style>

351
src/views/shop/components/addShop.vue Normal file
View File

@ -0,0 +1,351 @@
<template>
<el-dialog :title="form.id ? '编辑店铺' : '添加店铺'" :visible.sync="dialogVisible" @close="reset">
<div style="height: 50vh;overflow-y: auto;">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="店铺名称" prop="shopName">
<el-input v-model="form.shopName" placeholder="请输入门店名称"></el-input>
</el-form-item>
<el-form-item label="门店logo" prop="logo">
<el-image :src="form.logo || require('@/assets/images/upload.png')" fit="contain"
style="width: 80px;height: 80px;" @click="showUpload = true; uploadIndex = 1"></el-image>
</el-form-item>
<el-form-item label="门店照片">
<el-image :src="form.coverImg || require('@/assets/images/upload.png')" fit="contain"
style="width: 80px;height: 80px;" @click="showUpload = true; uploadIndex = 2"></el-image>
</el-form-item>
<el-form-item label="店铺类型">
<el-radio-group v-model="form.registerType">
<el-radio-button label="munchies">快餐版</el-radio-button>
<el-radio-button label="restaurant">餐饮版</el-radio-button>
</el-radio-group>
<div class="tips">请谨慎修改！！！</div>
</el-form-item>
<el-form-item label="试用/正式">
<el-radio-group v-model="form.profiles">
<el-radio-button label="probation">试用</el-radio-button>
<el-radio-button label="release">正式</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="激活码">
<el-input v-model="form.registerCode" placeholder="请输入激活码"></el-input>
<div class="tips">注：输入有效激活码表示添加的同时直接激活该店铺。</div>
</el-form-item>
<el-form-item label="登录账号" prop="account">
<el-input v-model="form.account" placeholder="请输入登录账号"></el-input>
</el-form-item>
<el-form-item label="登录密码" prop="password">
<el-input type="password" show-password v-model="form.password" placeholder="请输入登录密码"></el-input>
</el-form-item>
<el-form-item label="联系电话">
<el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
</el-form-item>
<el-form-item label="设备数量">
<el-input-number v-model="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="店铺经度">
<el-row>
<el-col :span="4">
<el-input v-model="form.lng" placeholder="经度"></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="form.lat" placeholder="纬度" style="margin-left: 10px;"></el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" plain icon="el-icon-place" style="margin-left: 20px;"
@click="showLocation = true">选择坐标</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="店铺详细地址">
<el-input type="textarea" v-model="form.address" placeholder="请输入门店详细地址"></el-input>
</el-form-item>
<el-form-item label="店铺简介">
<el-input type="textarea" v-model="form.detail" placeholder="请输入店铺简介"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio :label="1">开启</el-radio>
<el-radio :label="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</div>
<el-dialog title="选择地址" :visible.sync="showLocation" :modal="false" :modal-append-to-body="false">
<div class="map_box">
<div class="map">
<el-amap :center="amapOptions.center">
<el-amap-marker :position="amapOptions.center"></el-amap-marker>
</el-amap>
</div>
<div class="search_box">
<el-amap-search-box :search-option="searchOption"
:on-search-result="onSearchResult"></el-amap-search-box>
</div>
<div class="search_wrap">
<div class="item" v-for="item in locationSearchList" :key="item.id">
<div class="left">
<div class="name">{{ item.name }}-{{ item.address }}</div>
<div class="location">
经纬度：{{ item.lng }},{{ item.lat }}
</div>
</div>
<div class="btn">
<el-button type="primary" @click="selectLocationHandle(item)">
选择
</el-button>
</div>
</div>
</div>
</div>
</el-dialog>
<el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="500px"
@close="showUpload = false">
<el-upload :before-remove="handleBeforeRemove" :on-success="handleSuccess" :on-error="handleError"
:file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" style="display: block;" class="el-upload__tip">请勿上传违法文件，且文件不超过15M</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="doSubmit">确认</el-button>
<el-button @click="uploadClose">取消</el-button>
</div>
</el-dialog>
<div slot="footer" 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>
</el-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import crudQiNiu from '@/api/tools/qiniu'
import { tbShopInfoPost } from '@/api/shop'
export default {
computed: {
...mapGetters([
'qiNiuUploadApi'
])
},
data() {
const validateLogo = (rule, value, callback) => {
if (!this.form.logo) {
callback(new Error('请上传门店logo'))
} else {
callback()
}
}
return {
dialogVisible: false,
showLocation: false,
showUpload: false,
uploadIndex: 1,
startTime: '',
endTime: '',
formLoading: false,
form: {
id: '',
shopName: '',
registerType: 'restaurant',
profiles: 'release',
registerCode: '',
account: '',
password: '',
phone: '',
supportDeviceNumber: '',
lat: '',
lng: '',
address: '',
detail: '',
status: 1,
logo: '',
coverImg: ''
},
resetForm: '',
rules: {
shopName: [
{
required: true,
message: ' ',
trigger: 'blur'
}
],
logo: [
{
required: true,
validator: validateLogo,
trigger: 'change'
}
],
account: [
{
required: true,
message: ' ',
trigger: 'change'
}
],
password: [
{
required: true,
message: ' ',
trigger: 'change'
}
]
},
fileList: [],
files: [],
headers: {
'Authorization': getToken()
},
searchOption: {
city: '西安',
citylimit: false
},
locationSearchList: [],
amapOptions: {
center: [108.946465, 34.347984],
position: []
}
}
},
mounted() {
this.resetForm = { ...this.form }
},
methods: {
onSearchResult(res) {
this.locationSearchList = res
this.amapOptions.center = [res[0].lng, res[0].lat]
},
// 确认地址选择
selectLocationHandle(item) {
this.form.lng = item.lng
this.form.lat = item.lat
this.showLocation = false
},
// 保存
submitHandle() {
this.$refs.form.validate(async (valid) => {
if (valid) {
this.formLoading = true
try {
await tbShopInfoPost(this.form, this.form.id ? 'put' : 'post')
this.$emit('success')
this.formLoading = false
this.$notify({
title: '成功',
message: `${this.form.id ? '编辑' : '添加'}成功`,
type: 'success'
});
this.close()
} catch (error) {
this.formLoading = false
console.log(error)
}
}
})
},
handleSuccess(response, file, fileList) {
// const uid = file.uid
// const id = response.id
// this.files.push({ uid, id })
console.log('上传成功', response)
this.files = response.data
},
handleBeforeRemove(file, fileList) {
for (let i = 0; i < this.files.length; i++) {
if (this.files[i].uid === file.uid) {
crudQiNiu.del([this.files[i].id]).then(res => { })
return true
}
}
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
// 监听上传失败
handleError(e, file, fileList) {
const msg = JSON.parse(e.message)
this.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR)
},
// 刷新列表数据
doSubmit() {
this.fileList = []
this.showUpload = false
switch (this.uploadIndex) {
case 1:
this.form.logo = this.files[0]
break;
case 2:
this.form.coverImg = this.files[0]
break;
default:
break;
}
},
show(obj) {
this.dialogVisible = true
if (obj && obj.id) {
this.form = { ...obj }
}
},
close() {
this.dialogVisible = false
},
uploadClose() {
this.showUpload = false
},
reset() {
this.form = { ...this.resetForm }
}
}
}
</script>
<style scoped lang="scss">
.map_box {
width: 100%;
position: relative;
.map {
height: 300px;
}
.search_box {
position: absolute;
top: 10px;
left: 10px;
}
.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;
}
}
}
}
}
</style>

251
src/views/shop/list/index.vue
View File

@ -1,135 +1,174 @@
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
<crudOperation :permission="permission" />
<!--表单组件-->
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="自增id" prop="id">
<el-input v-model="form.id" style="width: 370px;" />
</el-form-item>
<el-form-item label="店铺帐号">
<el-input v-model="form.account" style="width: 370px;" />
</el-form-item>
<el-form-item label="店铺名称" prop="shopName">
<el-input v-model="form.shopName" style="width: 370px;" />
</el-form-item>
<el-form-item label="联系电话">
<el-input v-model="form.phone" style="width: 370px;" />
</el-form-item>
<el-form-item label="店铺log">
<el-input v-model="form.logo" style="width: 370px;" />
</el-form-item>
<el-form-item label="封面图">
<el-input v-model="form.coverImg" style="width: 370px;" />
</el-form-item>
<el-form-item label="详细地址">
<el-input v-model="form.address" style="width: 370px;" />
</el-form-item>
<el-form-item label="营业时间">
<el-input v-model="form.businessTime" style="width: 370px;" />
</el-form-item>
<el-form-item label="到期时间">
<el-input v-model="form.expireAt" style="width: 370px;" />
</el-form-item>
<el-form-item label="门店状态" prop="status">
<el-input v-model="form.status" style="width: 370px;" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column type="selection" width="55" />
<el-table-column prop="id" label="自增id" />
<el-table-column prop="account" label="店铺帐号" />
<el-table-column prop="shopName" label="店铺名称" />
<el-table-column prop="phone" label="联系电话" />
<el-table-column prop="logo" label="店铺log" width="100px">
<template slot-scope="scope">
<img :src="scope.row.logo" width="80px" height="50px" />
<el-row :gutter="20">
<el-col :span="3">
<el-input v-model="query.name" size="small" clearable placeholder="请输入店铺名称" style="width: 100%;"
class="filter-item" @keyup.enter.native="getTableData" />
</el-col>
<el-col :span="3">
<el-input v-model="query.account" size="small" clearable placeholder="请输入商户号" style="width: 100%;"
class="filter-item" @keyup.enter.native="getTableData" />
</el-col>
<el-col :span="3">
<el-select v-model="query.status" placeholder="请选择店铺状态" style="width: 100%;">
<el-option :label="item.label" :value="item.type" v-for="item in status" :key="item.type" />
</el-select>
</el-col>
<el-col :span="6">
<el-button type="primary" @click="getTableData">查询</el-button>
<el-button @click="resetHandle">重置</el-button>
</el-col>
</el-row>
</div>
<div class="head-container">
<el-button type="primary" icon="el-icon-plus" @click="$refs.addShop.show()">添加店铺</el-button>
</div>
<div class="head-container">
<el-table :data="tableData.list" v-loading="tableData.loading">
<el-table-column label="店铺信息" width="200">
<template v-slot="scope">
<div class="shop_info">
<el-image :src="scope.row.coverImg"
style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;">
<div class="img_error" slot="error">
<i class="icon el-icon-document-delete"></i>
</div>
</el-image>
<div class="info">
<span>{{ scope.row.shopName }}</span>
<div class="tag_wrap">
<el-tag type="info" effect="dark" v-if="scope.row.profiles == 'no'">未激活</el-tag>
<el-tag type="warning" effect="dark" v-if="scope.row.profiles == 'probation'">试用</el-tag>
<el-tag type="success" effect="dark" v-if="scope.row.profiles == 'release'">正式</el-tag>
<el-tag type="primary" effect="dark" v-if="scope.row.isWxMaIndependent">独立小程序</el-tag>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="coverImg" label="封面图" width="150px">
<template slot-scope="scope">
<img :src="scope.row.coverImg" width="100px" height="100px" />
<el-table-column prop="registerType" label="类型">
<template v-slot="scope">
<span v-if="scope.row.registerType == 'munchies'">快餐版</span>
<span v-if="scope.row.registerType == 'restaurant'">餐饮版</span>
</template>
</el-table-column>
<el-table-column prop="address" label="详细地址" />
<el-table-column prop="businessTime" label="营业时间" />
<el-table-column prop="expireAt" label="到期时间" />
<el-table-column prop="status" label="门店状态">
<template slot-scope="scope">
{{ dict.label.shop_status[scope.row.status] }}
<el-table-column prop="address" label="商户号"></el-table-column>
<el-table-column prop="lowPrice" label="来源"></el-table-column>
<el-table-column prop="lowPrice" label="认证状态">-</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></el-switch>
</template>
</el-table-column>
<el-table-column v-if="checkPer(['admin','tbShopInfo:edit','tbShopInfo:del'])" label="操作" width="150px" align="center">
<template slot-scope="scope">
<udOperation
:data="scope.row"
:permission="permission"
/>
<el-table-column prop="createdAt" label="到期时间">
<template v-slot="scope">
{{ dayjs(scope.row.expireAt).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column label="操作" width="150">
<template v-slot="scope">
<el-button type="text" icon="el-icon-edit" @click="$refs.addShop.show(scope.row)">编辑</el-button>
<el-dropdown>
<el-button type="text">更多<i class="el-icon-arrow-down"></i></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>详情</el-dropdown-item>
<el-dropdown-item>续费记录</el-dropdown-item>
<el-dropdown-item>前往店铺</el-dropdown-item>
<el-dropdown-item>重置密码</el-dropdown-item>
<el-dropdown-item divided>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />
</div>
<div class="head-container">
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
<addShop ref="addShop" @success="getTableData" />
</div>
</template>
<script>
import crudTbShopInfo from '@/api/tbShopInfo'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
const defaultForm = { id: null, account: null, shopCode: null, subTitle: null, merchantId: null, shopName: null, chainName: null, backImg: null, frontImg: null, contactName: null, phone: null, logo: null, isDeposit: null, isSupply: null, coverImg: null, shareImg: null, view: null, detail: null, lat: null, lng: null, mchId: null, registerType: null, isWxMaIndependent: null, address: null, city: null, type: null, industry: null, industryName: null, businessTime: null, postTime: null, postAmountLine: null, onSale: null, settleType: null, settleTime: null, enterAt: null, expireAt: null, status: null, average: null, orderWaitPayMinute: null, supportDeviceNumber: null, distributeLevel: null, createdAt: null, updatedAt: null, proxyId: null }
import dayjs from 'dayjs'
import { tbShopInfo } from '@/api/shop.js'
import addShop from '../components/addShop.vue'
export default {
name: 'TbShopInfo',
components: { pagination, crudOperation, rrOperation, udOperation },
mixins: [presenter(), header(), form(defaultForm), crud()],
dicts: ['shop_status'],
cruds() {
return CRUD({ title: '/shop/list', url: 'api/tbShopInfo', idField: 'id', sort: 'id,desc', crudMethod: { ...crudTbShopInfo }})
},
components: { addShop },
data() {
return {
permission: {
add: ['admin', 'tbShopInfo:add'],
edit: ['admin', 'tbShopInfo:edit'],
del: ['admin', 'tbShopInfo:del']
dayjs,
query: {
name: '',
account: '',
status: ''
},
rules: {
id: [
{ required: true, message: '自增id不能为空', trigger: 'blur' }
],
shopName: [
{ required: true, message: '店铺名称不能为空', trigger: 'blur' }
],
status: [
{ required: true, message: '门店状态不能为空', trigger: 'blur' }
]
} }
status: [
{
type: 1,
label: '开启'
},
{
type: 0,
label: '关闭'
}
],
tableData: {
list: [],
page: 0,
size: 10,
loading: false,
total: 0
}
}
},
mounted() {
this.getTableData()
},
methods: {
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
[CRUD.HOOK.beforeRefresh]() {
return true
// 重置查询
resetHandle() {
this.query.name = ''
this.query.account = ''
this.query.status = ''
this.getTableData()
},
// 分页回调
paginationChange(e) {
this.tableData.page = e - 1
this.getTableData()
},
// 获取商家列表
async getTableData() {
this.tableData.loading = true
try {
const res = await tbShopInfo({
page: this.tableData.page,
size: this.tableData.size,
shopName: this.query.name,
account: this.query.account,
status: this.query.status
})
this.tableData.loading = false
this.tableData.list = res.content
this.tableData.total = res.totalElements
} catch (error) {
console.log(error)
}
}
}
}
</script>
<style scoped>
<style scoped lang="scss">
.shop_info {
display: flex;
</style>
.info {
flex: 1;
padding-left: 4px;
}
}
</style>