Skip to content

S
saas-manage
Commit bae51d16 by qinjianhui
Options

feat: saas 管理平台

parent 52d69607
Showing with 1105 additions and 119 deletions
.eslintrc.js
module.exports = {
root: true,
env: {
node: true
node: true,
},
extends: [
'plugin:vue/essential',
'@vue/standard'
'@vue/standard',
],
parserOptions: {
parser: '@babel/eslint-parser'
parser: '@babel/eslint-parser',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'comma-dangle': ['error', 'always-multiline'],
'space-before-function-paren': 'off',
indent: 'off',
},
}
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -8,7 +8,10 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^1.1.3",
"core-js": "^3.8.3",
"element-ui": "^2.15.10",
"js-md5": "^0.7.3",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
......@@ -29,6 +32,8 @@
"eslint-plugin-vue": "^8.0.3",
"less": "^4.0.0",
"less-loader": "^8.0.0",
"sass": "^1.55.0",
"sass-loader": "^13.1.0",
"vue-template-compiler": "^2.6.14"
}
}
public/config.js 0 → 100644
window.apiHostSetting = {
VUE_APP_BASE_URL: '',
}
public/index.html
......@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="<%= BASE_URL %>config.js"></script>
</head>
<body>
<noscript>
......
src/.prettierrc 0 → 100644
{
"singleQuote": true,
"semi": false,
"trailingComma": "all",
"printWidth": 60
}
src/App.vue
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>
<style lang="less">
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
body,
html {
height: 100%;
overflow: hidden;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
height: 100%;
overflow: hidden;
}
</style>
src/common/api/axios.js 0 → 100644
import Axios from 'axios'
import { getToken } from '@/utils/auth'
import Vue from 'vue'
import router from '@/router'
const axios = Axios.create({
baseURL: window.apiHostSetting.VUE_APP_BASE_URL + '/api',
timeout: 30 * 1000,
})
axios.interceptors.request.use((config) => {
if (config.data && typeof config.data === 'object') {
const data = config.data
for (const key in data) {
if (data[key] === '') {
data[key] = null
}
}
config.data = data
}
config.headers['jwt-token'] = getToken()
return config
})
axios.interceptors.response.use(
(res) => {
if (res.status === 200) {
if (res.data.code === 401) {
// token过期
Vue.prototype.$message({
type: 'error',
message: res.data.message,
})
sessionStorage.setItem('active', 'true')
// router
// .replace({
// name: 'login',
// })
// .catch((err) => {
// console.log(err)
// })
return Promise.reject(res.data)
} else if (res.data.code === 402) {
Vue.prototype.$message({
message: res.data.message,
type: 'warning',
})
return Promise.reject(res.data)
} else if (res.data.code === 403) {
console.log(Vue)
// token过期
Vue.prototype.$message({
type: 'error',
message: res.data.message,
})
router
.replace({
name: 'login',
})
.catch((err) => {
console.log(err)
})
return Promise.reject(res.data)
} else if (res.data.code === 500) {
Vue.prototype.$alert(
'<div style="max-height:500px;overflow:auto">' +
res.data.message +
'</div>',
'错误提示',
{
dangerouslyUseHTMLString: true,
},
)
}
} else {
if (res.status === 400) {
if (res.data) {
const fileReader = new FileReader()
fileReader.readAsText(res.data)
fileReader.onload = function (ev) {
console.log(ev.target.result)
Vue.prototype.$alert(ev.target.result, '提示', {
confirmButtonText: '确定',
callback: () => {},
})
}
} else {
Vue.prototype.$alert('请求参数有误', '提示', {
confirmButtonText: '确定',
callback: () => {},
})
}
} else if (res.status === 404) {
Vue.prototype.$alert('请求不存在', '提示', {
confirmButtonText: '确定',
callback: () => {},
})
}
}
return res.data
},
// 服务器状态码不是200的情况
(error) => {
Vue.prototype.$alert(error.message, 'Error', {
confirmButtonText: '确定',
callback: () => {},
})
return Promise.reject(error)
},
)
export default axios
src/common/api/cancelToken.js 0 → 100644
import axios from 'axios'
import md5 from 'js-md5'
export default class PendingRequest {
request = new Map()
add(config) {
const requestKey = this.generateReqKey(config)
config.cancelToken =
config.cancelToken ||
new axios.CancelToken((cancel) => {
if (!this.request.has(requestKey)) {
this.request.set(requestKey, cancel)
} else {
cancel(`${requestKey} 取消请求`)
}
})
}
generateReqKey(config) {
let { method, url, params, data } = config
if (data && typeof data === 'string') {
data = JSON.parse(data)
}
const pwd = md5(
JSON.stringify({ method, url, params, data }),
)
return pwd
}
remove(config) {
const requestKey = this.generateReqKey(config)
if (this.request.has(requestKey)) {
this.request.delete(requestKey)
}
}
clear() {
this.request.clear()
}
}
src/common/api/login.js 0 → 100644
import axios from './axios'
export function login({ userName, password }) {
return axios.post('sys/saasUserLogin/login', null, {
params: { userName, password },
})
}
src/common/api/manage/index.js 0 → 100644
import axios from '../axios'
export function getManageData(
{ ym, status, companyName, user, beginDate, endDate, timeProp },
currentPage,
pageSize,
) {
return axios.post('/sys/domain/list_page', {
ym,
status,
companyName,
user,
beginDate,
endDate,
timeProp,
currentPage,
pageSize,
})
}
export function addManageData(data) {
return axios.post('/sys/domain/add', data)
}
export function updateManageData(data) {
return axios.post('/sys/domain/update', data)
}
export function getDataById(id) {
return axios.get('/sys/domain/get', {
params: { id },
})
}
export function deleteData(ids) {
return axios.get('/sys/domain/delete', {
params: { ids },
})
}
src/common/components/element-ui.js 0 → 100644
import 'element-ui/lib/theme-chalk/index.css'
import {
Button,
Table,
TableColumn,
Dialog,
Form,
FormItem,
Input,
Message,
MessageBox,
Pagination,
Loading,
DatePicker,
Switch,
Select,
Option,
} from 'element-ui'
const components = [
Button,
Table,
TableColumn,
Dialog,
Form,
FormItem,
Input,
DatePicker,
Pagination,
Switch,
Select,
Option,
]
export default {
install(Vue) {
components.forEach((c) => {
Vue.component(c.name, c)
})
Vue.use(Loading)
Vue.prototype.$message = (message) =>
typeof message === 'string'
? Message({
duration: 2500,
message,
})
: Message({
duration: 2500,
...message,
})
Vue.prototype.$message.success = (message) =>
typeof message === 'string'
? Message.success({ duration: 2500, message })
: Message.success({ duration: 2500, ...message })
Vue.prototype.$message.warning = (message) =>
typeof message === 'string'
? Message.warning({ duration: 2500, message })
: Message.warning({ duration: 2500, ...message })
Vue.prototype.$message.info = (message) =>
typeof message === 'string'
? Message.info({ duration: 2500, message })
: Message.info({ duration: 2500, ...message })
Vue.prototype.$message.error = (message) =>
typeof message === 'string'
? Message.error({ duration: 2500, message })
: Message.error({ duration: 2500, ...message })
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
// Vue.prototype.$message = MessageBox.message
},
}
src/common/style/index.scss 0 → 100644
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 0;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 6px;
height: 6px;
}
::-webkit-scrollbar-thumb {
cursor: pointer;
border-radius: 5px;
background: rgba(0, 0, 0, 0.15);
transition: color 0.2s ease;
}
// loading
.el-loading-mask.is-fullscreen {
background-color: rgba(0, 0, 0, 0.4);
}
.el-loading-spinner {
.circular {
display: none;
}
&::after {
content: '';
display: block;
width: 100px;
height: 100px;
background-image: url('~@/assets/loading.gif');
background-size: 100% 100%;
margin: 0 auto;
}
}
src/components/HelloWorld.vue deleted 100644 → 0
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/main.js
......@@ -2,11 +2,15 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import element from '@/common/components/element-ui.js'
import './common/style/index.scss'
Vue.config.productionTip = false
Vue.use(element)
new Vue({
router,
store,
render: h => h(App)
render: (h) => h(App),
}).$mount('#app')
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import SaasManage from '@/views/saasManage/indexPage.vue'
import LoginPage from '@/views/LoginPage.vue'
Vue.use(VueRouter)
......@@ -8,22 +10,24 @@ const routes = [
{
path: '/',
name: 'home',
component: HomeView
component: HomeView,
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
path: '/login',
name: 'login',
component: LoginPage,
},
{
path: '/saas/manage',
name: 'saasManage',
component: SaasManage,
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
routes,
})
export default router
src/store/index.js
......@@ -4,14 +4,9 @@ import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
state: {},
getters: {},
mutations: {},
actions: {},
modules: {},
})
src/utils/auth.js 0 → 100644
export function setToken(token) {
localStorage.setItem('token', token)
}
export function getToken() {
return localStorage.getItem('token')
}
src/views/AboutView.vue deleted 100644 → 0
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/HomeView.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
<div class="home"></div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
created() {
this.$router.push('/saas/manage')
},
}
</script>
src/views/LoginPage.vue 0 → 100644
<template>
<div class="login-page">
<div class="system-name">SaaS 管理平台</div>
<div class="login-view">
<h2>登录</h2>
<el-form :model="loginForm" class="login-form">
<el-form-item prop="userName">
<el-input
prefix-icon="el-icon-user"
v-model="loginForm.userName"
placeholder="User Name"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
:type="showPwd ? 'text' : 'password'"
prefix-icon="el-icon-lock"
v-model="loginForm.password"
placeholder="Password"
@keyup.enter.native="login"
>
<i
@click="showPwd = !showPwd"
slot="suffix"
:class="{
eyes: true,
open: !showPwd,
close: showPwd,
}"
></i>
</el-input>
</el-form-item>
<el-form-item class="operate">
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { login } from '@/common/api/login'
import { setToken } from '@/utils/auth'
export default {
name: 'LoginPage',
data() {
return {
loginForm: {
userName: '',
password: '',
},
showPwd: false,
}
},
mounted() {
this.loginForm = {}
},
methods: {
async login() {
if (!this.loginForm.userName || !this.loginForm.password) {
this.$message.error('请输入用户名或密码')
return
}
const l = this.$loading({
background: 'rgba(0, 0, 0, 0.3)',
})
try {
const res = await login(this.loginForm)
if (res.code === 200) {
setToken(res.data.token)
this.$router.push('/saas/manage')
}
} catch (e) {
console.log(e)
} finally {
l.close()
}
},
},
}
</script>
<style lang="scss" scoped>
.login-page {
height: 100%;
background: url(../assets/background.png) center / cover
no-repeat;
.background-image {
width: 100%;
height: 100%;
}
}
.system-name {
position: absolute;
color: #fff;
top: 10%;
left: 5%;
font-size: 50px;
font-weight: bold;
font-family: fangsong;
font-style: italic;
}
.login-view {
padding: 18px;
background: hsla(0, 0%, 100%, 0.4);
position: absolute;
top: 50%;
left: 50%;
height: 300px;
width: 400px;
border-radius: 6px;
transform: translate(-50%, -50%);
box-sizing: border-box;
background-position: 100% 0, 50%;
background-repeat: no-repeat;
background-size: 528px auto, contain;
}
h2 {
text-align: center;
}
.operate {
text-align: center;
}
.login-form {
padding: 20px;
}
.eyes {
display: inline-block;
height: 14px;
width: 18px;
margin-top: 11px;
margin-right: 5px;
cursor: pointer;
}
.eyes.open {
background: url('../assets/login/eyes-open.png') no-repeat center /
cover;
}
.eyes.close {
background: url('../assets/login/eyes-closed.png') no-repeat center /
cover;
}
.el-button--primary {
padding-right: 100px;
padding-left: 100px;
}
</style>
src/views/saasManage/indexPage.vue 0 → 100644
<template>
<div class="saas-manage">
<div class="search">
<el-form
:model="searchForm"
size="small"
:inline="true"
>
<el-form-item label="">
<el-select
style="width: 80px"
v-model="searchForm.timeProp"
placeholder="请选择"
>
<el-option
label="创建时间"
value="createTime"
></el-option>
<el-option
label="过期时间"
value=""
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker
style="width: 360px"
v-model="period"
type="datetimerange"
value-format="yyyy-MM-dd HH:ss:mm"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="域名">
<el-input
size="small"
style="width: 160px"
v-model="searchForm.domain"
placeholder="请输入域名"
></el-input>
</el-form-item>
<el-form-item label="状态">
<el-input
v-model="searchForm.status"
style="width: 160px"
size="small"
placeholder="请选择状态"
></el-input>
</el-form-item>
<el-form-item label="公司名称">
<el-input
size="small"
style="width: 160px"
v-model="searchForm.companyName"
placeholder="请输入公司名称"
></el-input>
</el-form-item>
<el-form-item label="负责人">
<el-input
size="small"
style="width: 160px"
v-model="searchForm.headName"
placeholder="请输入负责人"
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="small"
icon="el-icon-search"
@click="search"
>查询</el-button
>
</el-form-item>
<el-form-item>
<el-button
type="success"
size="small"
icon="el-icon-plus"
@click="addData"
>开通erp</el-button
>
</el-form-item>
<el-form-item>
<el-button
type="danger"
size="small"
icon="el-icon-delete"
@click="deleteData"
>删除</el-button
>
</el-form-item>
</el-form>
</div>
<div class="table-wrap">
<el-table
ref="table"
:data="manageData"
border
width="100%"
height="100%"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
header-align="center"
align="center"
>
</el-table-column>
<el-table-column
label="序号"
type="index"
width="50"
align="center"
header-align="center"
>
</el-table-column>
<el-table-column
label="域名"
prop="domain"
header-align="center"
></el-table-column>
<el-table-column
label="状态"
header-align="center"
align="center"
>
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
disabled
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</template>
</el-table-column>
<el-table-column
label="公司名称"
prop="companyName"
header-align="center"
></el-table-column>
<el-table-column
label="负责人"
prop="headName"
header-align="center"
></el-table-column>
<el-table-column
label="联系电话"
prop="contactPhone"
header-align="center"
></el-table-column>
<el-table-column
label="套餐"
prop="packages"
header-align="center"
></el-table-column>
<el-table-column
label="资费"
prop="charges"
header-align="center"
></el-table-column>
<el-table-column
label="数据库地址"
prop="dataHost"
header-align="center"
></el-table-column>
<el-table-column
label="数据库名称"
prop="databaseName"
header-align="center"
></el-table-column>
<el-table-column
label="创建时间"
prop="createTime"
header-align="center"
align="center"
></el-table-column>
<el-table-column
label="过期时间"
prop="expireTime"
header-align="center"
align="center"
></el-table-column>
<el-table-column
label="操作"
header-align="center"
align="center"
width="55"
>
<template slot-scope="scope">
<i
class="el-icon-edit"
style="cursor: pointer"
@click="handleEdit(scope.row)"
></i>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination">
<el-pagination
layout="sizes, total, prev, pager, next, jumper"
background
:total="total"
:page-size="pageSize"
:current-page="currentPage"
@current-change="onCurrentChange"
>
</el-pagination>
</div>
<el-dialog
:title="editId ? '编辑' : '新增'"
:visible.sync="addVisible"
:close-on-click-modal="false"
width="700px"
>
<el-form
:model="editForm"
size="small"
ref="form"
:inline="true"
label-width="100px"
label-position="right"
>
<el-form-item
label="域名"
prop="domain"
:rules="[
{ required: true, message: '请输入域名' },
]"
>
<el-input
style="width: 220px"
v-model="editForm.domain"
size="small"
placeholder="请输入域名"
/>
</el-form-item>
<el-form-item
label="状态"
prop="status"
:rules="[
{ required: true, message: '请选择状态' },
]"
>
<el-select
style="width: 220px"
v-model="editForm.status"
placeholder="请选择状态"
>
<el-option
label="启用"
:value="true"
></el-option>
<el-option
label="禁用"
:value="false"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label="公司名称"
prop="companyName"
:rules="[
{ required: true, message: '请输入公司名称' },
]"
>
<el-input
style="width: 220px"
v-model="editForm.companyName"
size="small"
placeholder="请输入公司名称"
/>
</el-form-item>
<el-form-item
label="负责人"
prop="headName"
:rules="[
{ required: true, message: '请输入负责人' },
]"
>
<el-input
style="width: 220px"
v-model="editForm.headName"
size="small"
placeholder="负责人"
/>
</el-form-item>
<el-form-item
label="联系电话"
prop="contactPhone"
:rules="[
{ required: true, message: '请输入联系电话' },
]"
>
<el-input
style="width: 220px"
v-model="editForm.contactPhone"
size="small"
placeholder="请输入联系电话"
/>
</el-form-item>
<el-form-item
label="套餐"
prop="packages"
:rules="[
{ required: true, message: '请输入套餐' },
]"
>
<el-input
style="width: 220px"
v-model="editForm.packages"
size="small"
placeholder="请输入套餐"
/>
</el-form-item>
<el-form-item
label="资费"
prop="charges"
:rules="[
{ required: true, message: '请输入套餐' },
]"
>
<el-input
style="width: 220px"
v-model="editForm.charges"
size="small"
placeholder="请输入套餐"
/>
</el-form-item>
<el-form-item
label="数据库地址"
prop="dataHost"
:rules="[
{ required: true, message: '请输入数据库地址' },
]"
>
<el-input
style="width: 220px"
v-model="editForm.dataHost"
size="small"
placeholder="请输入套餐"
/>
</el-form-item>
<el-form-item
label="数据库名称"
prop="databaseName"
:rules="[
{ required: true, message: '请输入数据库名称' },
]"
>
<el-input
style="width: 220px"
v-model="editForm.databaseName"
size="small"
placeholder="请输入套餐"
/>
</el-form-item>
<el-form-item label="过期时间" prop="expireTime">
<el-date-picker
style="width: 220px"
v-model="editForm.expireTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期"
>
</el-date-picker>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click="addVisible = false" size="small"
>取消</el-button
>
<el-button @click="save" type="primary" size="small"
>保存</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import {
getManageData,
addManageData,
updateManageData,
getDataById,
deleteData,
} from '@/common/api/manage/index'
export default {
name: 'saasManage',
data() {
return {
period: [],
manageData: [],
searchForm: {},
editId: undefined,
editForm: {
domain: '',
},
total: 0,
pageSize: 50,
currentPage: 1,
addVisible: false,
selection: [],
}
},
async created() {
this.getList()
},
methods: {
async getList() {
const l = this.$loading({
background: 'rgba(0, 0, 0, 0.3)',
text: '加载中',
})
try {
const res = await getManageData(
{
...this.searchForm,
beginDate: this.period && this.period[0],
endDate: this.period && this.period[1],
},
this.currentPage,
this.pageSize,
)
this.manageData = res.data.records
this.total = res.data.total
console.log('dddd', this.manageData)
} catch (e) {
console.log(e)
} finally {
l.close()
}
},
search() {
this.getList()
},
addData() {
this.addVisible = true
this.editId = undefined
this.searchForm = {}
this.$nextTick(() => {
this.$refs.form.clearValidate()
})
},
async handleEdit(row) {
this.editId = row.id
const l = this.$loading({
background: 'rgba(0, 0, 0, 0.3)',
})
try {
const res = await getDataById(row.id)
this.editForm = res.data
} catch (e) {
this.$message.danger(e)
} finally {
l.close()
}
this.addVisible = true
},
async save() {
try {
await this.$refs.form.validate()
} catch {
return
}
const l = this.$loading({
background: 'rgba(0, 0, 0, 0.3)',
})
try {
if (this.editId) {
const res = await updateManageData(this.editForm)
if (res.code === 200) {
this.$message.success(res.message)
this.getList()
}
} else {
const res = await addManageData(this.editForm)
console.log(res)
if (res.code === 200) {
this.$message.success(res.message)
this.getList()
}
}
} catch (e) {
this.$message.warning(e)
} finally {
this.addVisible = false
l.close()
}
},
async deleteData() {
let ids = []
ids = this.selection.map((item) => item.id)
ids = ids.join()
const l = this.$loading({
background: 'rgba(0, 0, 0, 0.3)',
})
try {
await deleteData(ids)
this.getList()
} catch (e) {
console.error(e)
} finally {
l.close()
}
},
handleSelectionChange(selection) {
this.selection = selection
},
onCurrentChange() {},
},
}
</script>
<style lang="scss" scoped>
.saas-manage {
height: 100%;
overflow: hidden;
display: flex;
padding: 20px 20px 0px 20px;
flex-direction: column;
&::v-deep {
.el-table .el-table__cell {
padding: 6px 0;
}
.el-input__inner {
padding: 0 4px;
}
.el-input--small .el-input__inner {
height: 30px;
line-height: 30px;
}
.el-icon-time:before {
content: '';
}
.el-dialog__footer {
text-align: center;
.el-button--small {
padding: 9px 50px;
}
}
.el-dialog__body {
padding: 10px 20px;
}
}
}
.search {
background: #fff;
}
.table-wrap {
background: #fff;
flex: 1;
overflow: hidden;
}
.pagination {
text-align: center;
padding-top: 10px;
}
</style>
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
transpileDependencies: true,
devServer: {
port: 8082,
host: 'wjz.local.cn',
},
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment