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

新增店铺设置

This commit is contained in:
gyq 2024-01-08 14:50:25 +08:00
parent 2d8d325449
commit 6b83cf4c84
14 changed files with 746 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -14,7 +14,6 @@
"svgo": "svgo -f src/assets/icons/svg --config=src/assets/icons/svgo.yml",
"new": "plop",
"dev_t": "set NODE_OPTIONS=\"--openssl-legacy-provider\" & npm run dev\n"
},
"repository": {
"type": "git",
@ -29,6 +28,7 @@
"clipboard": "2.0.4",
"codemirror": "^5.49.2",
"core-js": "^2.6.12",
"dayjs": "^1.11.10",
"echarts": "^4.2.1",
"echarts-wordcloud": "^1.1.3",
"element-ui": "^2.15.8",
@ -47,11 +47,12 @@
"screenfull": "4.2.0",
"sortablejs": "1.8.4",
"vue": "^2.6.14",
"vue-amap": "^0.5.10",
"vue-count-to": "^1.0.13",
"vue-cropper": "0.4.9",
"vue-echarts": "^5.0.0-beta.0",
"vue-ele-upload-image": "^2.0.12",
"vue-image-crop-upload": "^2.5.0",
"vue-image-crop-upload": "^3.0.3",
"vue-material": "^1.0.0-beta-15",
"vue-router": "3.0.2",
"vue-splitpane": "1.0.4",

5
public/index.html
View File

@ -7,6 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "0547b69252ef0ed14e11f5c4ac152f07",
}
</script>
</head>
<body>
<div id="app"></div>

35
src/api/shop.js
View File

@ -11,3 +11,38 @@ export function tbProduct(params) {
params
})
}
/**
* 商品单位列表
* @returns
*/
export function tbShopUnit(params) {
return request({
url: '/api/tbShopUnit',
method: 'get',
params
})
}
/**
* 店铺基本配置
* @returns
*/
export function tbShopCurrency(shopId) {
return request({
url: `/api/tbShopCurrency/${shopId}`,
method: 'get'
})
}
/**
* 修改店铺信息
* @returns
*/
export function tbShopCurrencyPut(data) {
return request({
url: `/api/tbShopCurrency`,
method: 'put',
data
})
}

24
src/api/user.js Normal file
View File

@ -0,0 +1,24 @@
import request from '@/utils/request'
/**
* 用户详情
* @returns
*/
export function tbShopInfo(shopId) {
return request({
url: `/api/tbShopInfo/${shopId}`,
method: 'get'
})
}
/**
* 修改店铺信息
* @returns
*/
export function tbShopInfoPut(data) {
return request({
url: `/api/tbShopInfo`,
method: 'put',
data
})
}

BIN
src/assets/images/upload.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 934 B

9
src/main.js
View File

@ -27,6 +27,9 @@ import './router/index' // permission control
// 全局引入
import EleUploadImage from 'vue-ele-upload-image'
import VueAMap from 'vue-amap';
Vue.component(EleUploadImage.name, EleUploadImage)
Vue.component('Editor', Editor)
@ -36,6 +39,12 @@ Vue.use(dict)
Vue.use(Element, {
size: Cookies.get('size') || 'small' // set element-ui default size
})
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
key: '6033c97e67bf2e9ceac306e1a3fa35f8',
// securityJsCode: '0547b69252ef0ed14e11f5c4ac152f07',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
})
Vue.config.productionTip = false

2
src/store/modules/user.js
View File

@ -31,6 +31,8 @@ const user = {
const rememberMe = userInfo.rememberMe
return new Promise((resolve, reject) => {
login(userInfo.username, userInfo.password, userInfo.code, userInfo.uuid).then(res => {
// console.log('登录成功后返回===', res)
localStorage.setItem('shopId', res.shopId)
setToken(res.token, rememberMe)
commit('SET_TOKEN', res.token)
setUserInfo(res.user, commit)

159
src/views/product/add_shop.vue Normal file
View File

@ -0,0 +1,159 @@
<template>
<div class="app-container">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="商品类型" prop="type">
<div class="shop_type_box">
<div class="item" v-for="(item, index) in shopTypes" :key="index"
:class="{ active: shopTypesActive == index }" @click="shopTypesActive = index">
<div class="title">{{ item.label }}</div>
<div class="intro">（{{ item.intro }}）</div>
<div class="active_dot">
<i class="el-icon-check"></i>
</div>
</div>
</div>
</el-form-item>
<el-form-item label="商品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入商品名称" style="width: 500px;"></el-input>
</el-form-item>
<el-form-item label="单位">
<el-select v-model="form.unit" placeholder="请选择单位" style="width: 500px;">
<el-option :label="item.name" :value="item.id" v-for="item in units" :key="item.id"></el-option>
</el-select>
<el-button type="primary" plain icon="el-icon-plus">添加单位</el-button>
</el-form-item>
<el-form-item label="商品分类" prop="classify">
<el-select v-model="form.unit" placeholder="请选择商品分类" style="width: 500px;">
<el-option :label="item.name" :value="item.id" v-for="item in units" :key="item.id"></el-option>
</el-select>
<el-button type="primary" plain icon="el-icon-plus">添加分类</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { tbShopUnit } from "@/api/shop";
export default {
data() {
return {
shopTypesActive: 0,
shopTypes: [
{
label: '计量商品',
intro: '单价购买'
},
{
label: '多规格',
intro: '多种不同规格'
},
{
label: '套餐商品',
intro: '选职多种组合'
},
{
label: '称重商品',
intro: '按重量售卖'
},
{
label: '时价商品',
intro: '按重量售卖'
}
],
form: {
type: 1,
name: '',
unit: ''
},
rules: {
type: [
{
required: true
}
],
name: [
{
required: true,
trigger: 'blur',
message: '请输入商品名称'
}
]
},
units: []
}
},
mounted() {
this.tbShopUnit();
},
methods: {
async tbShopUnit() {
try {
const res = await tbShopUnit({
page: 0,
size: 100
})
this.units = res.content
} catch (error) { }
}
}
}
</script>
<style scoped lang="scss">
.shop_type_box {
display: flex;
.item {
$borderColor: #1890FF;
margin-right: 14px;
border: 1px solid #ececec;
border-radius: 4px;
padding: 6px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
&:hover {
cursor: pointer;
border-color: $borderColor;
}
&.active {
border-color: $borderColor;
.active_dot {
display: flex;
}
}
.active_dot {
$size: 26px;
background-color: $borderColor;
color: #fff;
position: absolute;
top: 0;
right: 0;
width: $size;
height: $size;
clip-path: polygon(100% 0, 0 0, 100% 100%);
display: none;
justify-content: flex-end;
padding-right: 2px;
}
.title {
font-weight: bold;
color: #555;
}
.intro {
color: #999;
font-size: 12px;
margin-top: -10px;
}
}
}
</style>

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

@ -3,15 +3,8 @@
<div class="head-container">
<el-row :gutter="20">
<el-col :span="3">
<el-input
v-model="query.blurry"
size="small"
clearable
placeholder="请输入商品名称"
style="width: 100%;"
class="filter-item"
@keyup.enter.native="toQuery"
/>
<el-input v-model="query.blurry" size="small" clearable placeholder="请输入商品名称" style="width: 100%;"
class="filter-item" @keyup.enter.native="toQuery" />
</el-col>
<el-col :span="3">
<el-select v-model="query.class" placeholder="请选择商品分类" style="width: 100%;">
@ -34,19 +27,19 @@
<div class="head-container">
<el-row>
<el-col>
<el-button type="primary" icon="el-icon-plus">添加商品</el-button>
<router-link :to="{ name: 'add_shop' }">
<el-button type="primary" icon="el-icon-plus">添加商品</el-button>
</router-link>
</el-col>
</el-row>
</div>
<div class="head-container">
<el-table :data="tableData.data">
<el-table :data="tableData.data" v-loading="tableData.loading">
<el-table-column label="商品信息">
<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;"
/>
<el-image :src="scope.row.coverImg"
style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;" />
<div class="info">
<span>{{ scope.row.name }}</span>
</div>
@ -74,6 +67,10 @@
</el-table-column>
</el-table>
</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>
</div>
</template>
@ -88,22 +85,11 @@ export default {
sku: ''
},
tableData: {
data: [
{
url: 'https://cash-register.oss-cn-beijing.aliyuncs.com/shop/f12c3cc097e147daa33ac4b55aca8ef3/2023-08-21/20230821-110556-2425668054.png?x-oss-process=image/resize,w_50,h_50,m_fill',
title: '套餐商品',
class: '烤串',
price: 2,
xl: 0,
kc: 0,
area: '收银端',
sort: 0,
update: '2023-11-20 16:08'
}
],
data: [],
page: 0,
size: 10,
loading: false
loading: false,
total: 0
}
}
},
@ -121,14 +107,22 @@ export default {
this.query.class = ''
this.query.sku = ''
},
// 分页回调
paginationChange(e) {
this.tableData.page = e
this.tbProduct()
},
// 获取商品列表
async tbProduct() {
this.tableData.loading = true
try {
const res = await tbProduct({
page: this.tableData.page,
size: this.tableData.size
})
this.tableData.loading = false
this.tableData.data = res.content
this.tableData.total = res.totalElements
} catch (error) { }
}
}

312
src/views/shop/components/shopInfo.vue Normal file
View File

@ -0,0 +1,312 @@
<template>
<div>
<div>
<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="请输入门店名称" style="width: 500px;"></el-input>
</el-form-item>
<el-form-item label="门店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="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" style="width: 500px;"></el-input>
</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>
<div style="color: #999;">注：准确的定位便于用户导航到店铺</div>
</el-form-item>
<el-form-item label="门店详细地址">
<el-input type="textarea" v-model="form.address" placeholder="请输入门店详细地址"
style="width: 500px;"></el-input>
</el-form-item>
<el-form-item label="营业时间">
<el-time-picker placeholder="起始时间" v-model="startTime" :picker-options="{
selectableRange: '00:00:00 - 23:59:59',
format: 'HH:mm'
}" format="HH:mm" value-format="HH:mm">
</el-time-picker>
<el-time-picker placeholder="结束时间" v-model="endTime" :picker-options="{
selectableRange: `${startTime}:00 - 23:59:59`
}" format="HH:mm" value-format="HH:mm">
</el-time-picker>
</el-form-item>
<el-form-item label="结算类型">
<el-radio-group v-model="form.settleType">
<el-radio :label="0">今日</el-radio>
<el-radio :label="1">次日</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="结算时间" prop="settleTime">
<el-time-picker placeholder="请选择结算时间" v-model="form.settleTime" :picker-options="{
selectableRange: '00:00:00 - 23:59:59',
format: 'HH:mm'
}" format="HH:mm" value-format="HH:mm">
</el-time-picker>
</el-form-item>
<el-form-item label="店铺简介">
<el-input type="textarea" v-model="form.detail" placeholder="请输入店铺简介" style="width: 500px;"></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="2">休息中</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitHandle" :loading="formLoading">
<span v-if="!formLoading">保存</span>
<span v-else>保存中...</span>
</el-button>
</el-form-item>
</el-form>
</div>
<el-dialog title="选择地址" :visible.sync="showLocation">
<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>
</div>
</el-dialog>
</div>
</template>
<script>
import dayjs from 'dayjs'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import crudQiNiu from '@/api/tools/qiniu'
import { tbShopInfo, tbShopInfoPut } from '@/api/user'
export default {
computed: {
...mapGetters([
'qiNiuUploadApi'
])
},
data() {
return {
showLocation: false,
showUpload: false,
uploadIndex: 1,
startTime: '',
endTime: '',
formLoading: false,
form: {},
rules: {
shopName: [
{
required: true,
message: ' ',
trigger: 'blur'
}
],
phone: [
{
required: true,
message: ' ',
trigger: 'blur'
}
],
settleTime: [
{
required: true,
message: ' ',
trigger: 'blur'
}
]
},
fileList: [],
files: [],
headers: {
'Authorization': getToken()
},
searchOption: {
city: '西安',
citylimit: false
},
locationSearchList: [],
amapOptions: {
center: [108.946465, 34.347984],
position: []
}
}
},
mounted() {
this.tbShopInfo()
},
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
},
// 获取用户详情
async tbShopInfo() {
try {
const shopId = localStorage.getItem('shopId')
const res = await tbShopInfo(shopId)
this.form = res
if (res.businessTime) {
const businessTime = res.businessTime.split('-')
this.startTime = businessTime[0]
this.endTime = businessTime[1]
}
} catch (error) { }
},
// 保存
submitHandle() {
this.$refs.form.validate(async (valid) => {
if (valid) {
this.formLoading = true
try {
if (this.startTime && this.endTime) {
this.form.businessTime = `${dayjs(this.startTime).format('HH:mm')}-${dayjs(this.endTime).format('HH:mm')}`
}
const res = await tbShopInfoPut(this.form)
this.formLoading = false
this.$notify({
title: '成功',
message: '提交成功',
type: 'success'
});
} catch (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;
}
},
}
}
</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>

85
src/views/shop/components/shopSetting.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<div>
<el-form ref="form" :model="form" label-width="120px" label-position="left">
<el-form-item label="货币单位">
<el-radio-group v-model="form.currency">
<el-radio-button label="￥">￥</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="备用金">
<el-input v-model="form.prepareAmount" placeholder="0.00" style="width: 200px;"></el-input>
</el-form-item>
<el-form-item label="保留小数位">
<el-radio-group v-model="form.decimalsDigits">
<el-radio-button label="0">元</el-radio-button>
<el-radio-button label="1">角</el-radio-button>
<el-radio-button label="2">分</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="语音通知">
<el-switch v-model="form.voiceNotification" :active-value="1" :inactive-value="0"></el-switch>
<div style="color: #999;">开启后将语音播报待处理事件</div>
</el-form-item>
<el-form-item label="移动端支付">
<el-switch v-model="form.allowWebPay" :active-value="1" :inactive-value="0"></el-switch>
<div style="color: #999;">是否允许用户在小程序端支付订单</div>
</el-form-item>
<el-form-item label="自动锁屏">
<el-select v-model="form.autoLockScreen" placeholder="请选择锁屏时间">
<el-option label="不自动锁屏" :value="0"></el-option>
<el-option label="30s" value="30"></el-option>
<el-option label="1min" value="60s"></el-option>
<el-option label="2min" value="120s"></el-option>
<el-option label="5min" value="300s"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitHandle" :loading="formLoading">
<span v-if="!formLoading">保存</span>
<span v-else>保存中...</span>
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { tbShopCurrency, tbShopCurrencyPut } from '@/api/shop'
export default {
data() {
return {
formLoading: false,
form: {}
}
},
mounted() {
this.tbShopCurrency()
},
methods: {
// 保存
submitHandle() {
this.$refs.form.validate(async (valid) => {
if (valid) {
this.formLoading = true
try {
const res = await tbShopCurrencyPut(this.form)
this.formLoading = false
this.$notify({
title: '成功',
message: '提交成功',
type: 'success'
});
} catch (error) { }
}
})
},
// 获取基本配置
async tbShopCurrency() {
try {
const res = await tbShopCurrency(localStorage.getItem('shopId'))
this.form = res
} catch (error) { }
}
}
}
</script>

26
src/views/shop/shop_configuration.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div class="app-container">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="店铺信息" name="1"></el-tab-pane>
<el-tab-pane label="基础配置" name="2"></el-tab-pane>
</el-tabs>
<shopInfo v-if="activeName == 1" />
<shopSetting v-if="activeName == 2" />
</div>
</template>
<script>
import shopInfo from './components/shopInfo.vue'
import shopSetting from './components/shopSetting.vue'
export default {
components: {
shopInfo,
shopSetting
},
data() {
return {
activeName: '1',
}
}
}
</script>

92
src/views/system/menu/index.vue
View File

@ -4,15 +4,17 @@
<div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<el-input v-model="query.blurry" clearable size="small" placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-input v-model="query.blurry" clearable size="small" placeholder="模糊搜索" style="width: 200px;"
class="filter-item" @keyup.enter.native="crud.toQuery" />
<date-range-picker v-model="query.createTime" class="date-item" />
<rrOperation />
</div>
<crudOperation :permission="permission" />
</div>
<!--表单渲染-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU"
:visible.sync="crud.status.cu > 0" :title="crud.status.title" width="680px">
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
<el-form-item label="菜单类型" prop="type">
<el-radio-group v-model="form.type" size="mini" style="width: 178px">
<el-radio-button label="0">目录</el-radio-button>
@ -21,15 +23,11 @@
</el-radio-group>
</el-form-item>
<el-form-item v-show="form.type.toString() !== '2'" label="菜单图标" prop="icon">
<el-popover
placement="bottom-start"
width="450"
trigger="click"
@show="$refs['iconSelect'].reset()"
>
<el-popover placement="bottom-start" width="450" trigger="click" @show="$refs['iconSelect'].reset()">
<IconSelect ref="iconSelect" @selected="selected" />
<el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon"
style="height: 32px;width: 16px;" />
<i v-else slot="prefix" class="el-icon-search el-input__icon" />
</el-input>
</el-popover>
@ -53,34 +51,37 @@
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title">
<el-input v-model="form.title" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" />
<el-input v-model="form.title" :style="form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'"
placeholder="菜单标题" />
</el-form-item>
<el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title">
<el-input v-model="form.title" placeholder="按钮名称" style="width: 178px;" />
</el-form-item>
<el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
<el-input v-model="form.permission" :disabled="form.iFrame.toString() === 'true'" placeholder="权限标识" style="width: 178px;" />
<el-input v-model="form.permission" :disabled="form.iFrame.toString() === 'true'" placeholder="权限标识"
style="width: 178px;" />
</el-form-item>
<el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
<el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" />
</el-form-item>
<el-form-item label="菜单排序" prop="menuSort">
<el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 178px;" />
<el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right"
style="width: 178px;" />
</el-form-item>
<el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件名称" prop="componentName">
<el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件名称"
prop="componentName">
<el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段" />
</el-form-item>
<el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件路径" prop="component">
<el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件路径"
prop="component">
<el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" />
</el-form-item>
<el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="选中父级菜单">
<el-input v-model="form.activeMenu" placeholder="请输入父级菜单path" style="width: 178px;" />
</el-form-item>
<el-form-item label="上级类目" prop="pid">
<treeselect
v-model="form.pid"
:options="menus"
:load-options="loadMenus"
style="width: 450px;"
placeholder="选择上级类目"
/>
<treeselect v-model="form.pid" :options="menus" :load-options="loadMenus" style="width: 450px;"
placeholder="选择上级类目" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -89,18 +90,9 @@
</div>
</el-dialog>
<!--表格渲染-->
<el-table
ref="table"
v-loading="crud.loading"
lazy
:load="getMenus"
:data="crud.data"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
row-key="id"
@select="crud.selectChange"
@select-all="crud.selectAllChange"
@selection-change="crud.selectionChangeHandler"
>
<el-table ref="table" v-loading="crud.loading" lazy :load="getMenus" :data="crud.data"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id" @select="crud.selectChange"
@select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler">
<el-table-column type="selection" width="55" />
<el-table-column :show-overflow-tooltip="true" label="菜单标题" width="125px" prop="title" />
<el-table-column prop="icon" label="图标" align="center" width="60px">
@ -134,13 +126,10 @@
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建日期" width="135px" />
<el-table-column v-if="checkPer(['admin','menu:edit','menu:del'])" label="操作" width="130px" align="center" fixed="right">
<el-table-column v-if="checkPer(['admin', 'menu:edit', 'menu:del'])" label="操作" width="130px" align="center"
fixed="right">
<template slot-scope="scope">
<udOperation
:data="scope.row"
:permission="permission"
msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
/>
<udOperation :data="scope.row" :permission="permission" msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！" />
</template>
</el-table-column>
</el-table>
@ -165,7 +154,7 @@ export default {
name: 'Menu',
components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation, DateRangePicker },
cruds() {
return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }})
return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu } })
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
@ -209,7 +198,7 @@ export default {
},
getSupDepts(id) {
crudMenu.getMenuSuperior(id).then(res => {
const children = res.map(function(obj) {
const children = res.map(function (obj) {
if (!obj.leaf && !obj.children) {
obj.children = null
}
@ -221,7 +210,7 @@ export default {
loadMenus({ action, parentNode, callback }) {
if (action === LOAD_CHILDREN_OPTIONS) {
crudMenu.getMenusTree(parentNode.id).then(res => {
parentNode.children = res.map(function(obj) {
parentNode.children = res.map(function (obj) {
if (!obj.leaf) {
obj.children = null
}
@ -242,11 +231,14 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
text-align: left;
}
::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
height: 30px;
line-height: 30px;
}
::v-deep .el-input-number .el-input__inner {
text-align: left;
}
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
height: 30px;
line-height: 30px;
}
</style>

50
src/views/tools/storage/qiniu/index.vue
View File

@ -6,38 +6,27 @@
<div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<el-input v-model="query.key" clearable size="small" placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
<el-input v-model="query.key" clearable size="small" placeholder="输入文件名称搜索" style="width: 200px;"
class="filter-item" @keyup.enter.native="toQuery" />
<date-range-picker v-model="query.createTime" class="date-item" />
<rrOperation />
</div>
<crudOperation :permission="permission">
<template slot="left">
<!-- 上传 -->
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传</el-button>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload"
@click="dialog = true">上传</el-button>
<!-- 同步 -->
<el-button :icon="icon" class="filter-item" size="mini" type="warning" @click="synchronize">同步</el-button>
<!-- 配置 -->
<el-button
class="filter-item"
size="mini"
type="success"
icon="el-icon-s-tools"
@click="doConfig"
>配置</el-button>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-s-tools"
@click="doConfig">配置</el-button>
</template>
</crudOperation>
<!-- 文件上传 -->
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" append-to-body width="500px" @close="doSubmit">
<el-upload
:before-remove="handleBeforeRemove"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList"
:headers="headers"
:action="qiNiuUploadApi"
class="upload-demo"
multiple
>
<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>
@ -46,14 +35,17 @@
</div>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"
@selection-change="crud.selectionChangeHandler">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" :show-overflow-tooltip="true" label="文件名">
<template slot-scope="scope">
<a href="JavaScript:" class="el-link el-link--primary" target="_blank" type="primary" @click="download(scope.row.id)">{{ scope.row.key }}</a>
<a href="JavaScript:" class="el-link el-link--primary" target="_blank" type="primary"
@click="download(scope.row.id)">{{ scope.row.key }}</a>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="suffix" label="文件类型" @selection-change="crud.selectionChangeHandler" />
<el-table-column :show-overflow-tooltip="true" prop="suffix" label="文件类型"
@selection-change="crud.selectionChangeHandler" />
<el-table-column prop="bucket" label="空间名称" />
<el-table-column prop="size" label="文件大小" />
<el-table-column prop="type" label="空间类型" />
@ -79,7 +71,7 @@ import DateRangePicker from '@/components/DateRangePicker'
export default {
components: { eForm, pagination, crudOperation, rrOperation, DateRangePicker },
cruds() {
return CRUD({ title: '七牛云文件', url: 'api/qiNiuContent', crudMethod: { ...crudQiNiu }})
return CRUD({ title: '七牛云文件', url: 'api/qiNiuContent', crudMethod: { ...crudQiNiu } })
},
mixins: [presenter(), header(), crud()],
data() {
@ -92,9 +84,9 @@ export default {
url: '', headers: { 'Authorization': getToken() },
dialogImageUrl: '',
dialogVisible: false,
fileList: [],
files: [],
newWin: null
fileList: [],
files: [],
newWin: null
}
},
computed: {
@ -132,7 +124,7 @@ export default {
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 => {})
crudQiNiu.del([this.files[i].id]).then(res => { })
return true
}
}
@ -188,6 +180,4 @@ export default {
}
</script>
<style scoped>
</style>
<style scoped></style>