mirror of
https://gitee.com/ssssssss-team/magic-boot.git
synced 2026-07-09 00:00:04 +08:00
commit
This commit is contained in:
吕金泽
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="wscn-http404-container">
|
||||
<div class="wscn-http404">
|
||||
<div class="pic-404">
|
||||
<img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
|
||||
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
|
||||
<img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
|
||||
<img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
|
||||
</div>
|
||||
<div class="bullshit">
|
||||
<div class="bullshit__oops">OOPS!</div>
|
||||
<div class="bullshit__info">All rights reserved
|
||||
<a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
|
||||
</div>
|
||||
<div class="bullshit__headline">{{ message }}</div>
|
||||
<div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
|
||||
<a href="" class="bullshit__return-home">Back to home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Page404',
|
||||
computed: {
|
||||
message() {
|
||||
return 'The webmaster said that you can not enter this page...'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wscn-http404-container{
|
||||
transform: translate(-50%,-50%);
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
}
|
||||
.wscn-http404 {
|
||||
position: relative;
|
||||
width: 1200px;
|
||||
padding: 0 50px;
|
||||
overflow: hidden;
|
||||
.pic-404 {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 600px;
|
||||
overflow: hidden;
|
||||
&__parent {
|
||||
width: 100%;
|
||||
}
|
||||
&__child {
|
||||
position: absolute;
|
||||
&.left {
|
||||
width: 80px;
|
||||
top: 17px;
|
||||
left: 220px;
|
||||
opacity: 0;
|
||||
animation-name: cloudLeft;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
&.mid {
|
||||
width: 46px;
|
||||
top: 10px;
|
||||
left: 420px;
|
||||
opacity: 0;
|
||||
animation-name: cloudMid;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
&.right {
|
||||
width: 62px;
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
opacity: 0;
|
||||
animation-name: cloudRight;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
@keyframes cloudLeft {
|
||||
0% {
|
||||
top: 17px;
|
||||
left: 220px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 33px;
|
||||
left: 188px;
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
top: 81px;
|
||||
left: 92px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 97px;
|
||||
left: 60px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes cloudMid {
|
||||
0% {
|
||||
top: 10px;
|
||||
left: 420px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 40px;
|
||||
left: 360px;
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
top: 130px;
|
||||
left: 180px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 160px;
|
||||
left: 120px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes cloudRight {
|
||||
0% {
|
||||
top: 100px;
|
||||
left: 500px;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
top: 120px;
|
||||
left: 460px;
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
top: 180px;
|
||||
left: 340px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 200px;
|
||||
left: 300px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bullshit {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 300px;
|
||||
padding: 30px 0;
|
||||
overflow: hidden;
|
||||
&__oops {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
color: #1482f0;
|
||||
opacity: 0;
|
||||
margin-bottom: 20px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__headline {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
opacity: 0;
|
||||
margin-bottom: 10px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__info {
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
color: grey;
|
||||
opacity: 0;
|
||||
margin-bottom: 30px;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
&__return-home {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 110px;
|
||||
height: 36px;
|
||||
background: #1482f0;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
opacity: 0;
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
animation-name: slideUp;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
transform: translateY(60px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:rules="rules"
|
||||
:model="temp"
|
||||
v-bind="form.el"
|
||||
:label-position="form.el.labelPosition === undefined ? 'right' : form.el.labelPosition"
|
||||
:label-width="form.el.labelWidth === undefined ? '120px' : form.el.labelWidth"
|
||||
:style="form.el.style === undefined ? '' : form.el.style"
|
||||
>
|
||||
<el-row v-for="(row,i) in form.rows" :key="i" :gutter="row.gutter">
|
||||
<el-col v-for="(col,j) in row.cols" :key="j" :span="col.span" v-bind="col.colEl">
|
||||
<el-form-item :label="col.label" :label-width="col.labelWidth" :prop="col.name" v-bind="col.formItemEl">
|
||||
<el-switch
|
||||
v-if="col.type === 'switch'"
|
||||
v-model="temp[col.name]"
|
||||
:active-value="col.activeValue"
|
||||
:inactive-value="col.inactiveValue"
|
||||
/>
|
||||
<el-checkbox-group v-else-if="col.type === 'checkboxGroup'" v-model="temp[col.name]" size="small">
|
||||
<el-checkbox v-for="checkboxIt in temp['_'+col.name]" :key="checkboxIt[col.defaultValue.value]" :label="checkboxIt[col.defaultValue.value]">{{ checkboxIt[col.defaultValue.text] }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<pd-select v-else-if="col.type === 'select'" v-model="temp[col.name]" v-bind="col.el" />
|
||||
<el-input v-else v-model="temp[col.name]" :type="col.type" :value="col.defaultValue" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'CommonForm',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
detail: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
params: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
},
|
||||
temp: this.getTemp()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(newVal) {
|
||||
this.temp = this.getTemp()
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form.el = this.form.el || {}
|
||||
this.form.rows.forEach(row => {
|
||||
row.cols.forEach(col => {
|
||||
if (col.rule) {
|
||||
this.$set(this.rules, col.name, col.rule)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getTemp() {
|
||||
var _temp = {}
|
||||
this.form.rows.forEach(row => {
|
||||
row.cols.forEach(col => {
|
||||
if (col.type === 'checkboxGroup') {
|
||||
_temp[col.name] = []
|
||||
this.$request({
|
||||
url: col.defaultValue.request.url,
|
||||
method: col.defaultValue.request.method
|
||||
}).then(res => {
|
||||
const { data } = res
|
||||
this.$set(this.temp, '_' + col.name, data)
|
||||
})
|
||||
} else {
|
||||
_temp[col.name] = col.defaultValue || ''
|
||||
}
|
||||
})
|
||||
})
|
||||
return _temp
|
||||
},
|
||||
save() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$post(this.form.request.url, this.temp).then(res => {
|
||||
this.dialogVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: (!this.temp.id ? '创建' : '修改') + '成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.$emit('reload-table')
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getDetail(row) {
|
||||
this.temp.id = row.id
|
||||
this.$get(this.detail.request.url, { id: row.id }).then(res => {
|
||||
const { data } = res
|
||||
for (var t in this.temp) {
|
||||
if (data[t] && (!this.detail.excludeAssign || this.detail.excludeAssign.indexOf(t) === -1)) {
|
||||
this.$set(this.temp, t, data[t])
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-form :inline="true">
|
||||
<el-form-item v-for="col in queryOptions.cols" :key="col.field" :label="col.title">
|
||||
<el-input v-if="col.type === 'input'" v-model="tableOptions.where[col.field]" v-bind="col.el" :placeholder="'请输入'+col.title" :style="col.style" />
|
||||
<pd-select v-else-if="col.type === 'select'" v-model="tableOptions.where[col.field]" v-bind="col.el" width="100%" />
|
||||
</el-form-item>
|
||||
<el-form-item v-for="(btn, i) in queryOptions.btns" :key="i">
|
||||
<el-button v-if="btn.type == 'query'" class="filter-item" type="primary" icon="el-icon-search" @click="reloadTable">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button v-if="btn.type == 'export'" :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template v-if="toolOptions && toolOptions.btns">
|
||||
<hr>
|
||||
<el-row class="tool-row">
|
||||
<div v-for="(btn, i) in toolOptions.btns" :key="'toolBtn' + i">
|
||||
<el-button v-if="btn.btnType == 'add'" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
|
||||
添加
|
||||
</el-button>
|
||||
<pd-button
|
||||
v-else
|
||||
:el="btn.el || {}"
|
||||
:request-url="btn.request.url"
|
||||
:request-data="toolBtnData[i]"
|
||||
:btn-type="btn.btnType"
|
||||
:before-confirm="btn.beforeConfirm"
|
||||
:is-open="btn.isOpen"
|
||||
:success-tips="btn.successTips"
|
||||
:fail-tips="btn.failTips"
|
||||
:after-handler="btn.afterHandler"
|
||||
/>
|
||||
</div>
|
||||
</el-row>
|
||||
<hr>
|
||||
</template>
|
||||
|
||||
<pd-table ref="table" v-bind="tableOptions" @selection-change="selectionChange" />
|
||||
|
||||
<pd-dialog :params="formParams" v-bind="formConfig && formConfig.dialog" :visible.sync="dialogFormVisible" @confirm-click="$refs.inputForm.save()">
|
||||
<template #content>
|
||||
<common-form ref="inputForm" v-bind="formConfig" :visible.sync="dialogFormVisible" :dialog-status="dialogStatus" @reload-table="reloadTable" />
|
||||
</template>
|
||||
</pd-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonForm from './form'
|
||||
|
||||
var _this
|
||||
export default {
|
||||
name: 'CommonList',
|
||||
components: { CommonForm },
|
||||
props: {
|
||||
formConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
queryOptions: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
toolOptions: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
tableOptions: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formParams: {},
|
||||
formComponent: '',
|
||||
dialogFormVisible: false,
|
||||
dialogStatus: 'create',
|
||||
downloadLoading: false,
|
||||
selectionData: [],
|
||||
toolBtnData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
_this = this
|
||||
if (this.toolOptions && this.toolOptions.btns) {
|
||||
this.toolOptions.btns.forEach((it, i) => {
|
||||
if (it.btnType) {
|
||||
if (it.btnType === 'delete') {
|
||||
it.afterHandler = () => {
|
||||
_this.reloadTable()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
this.tableOptions.where = this.tableOptions.where || _this.$set(this.tableOptions, 'where', {})
|
||||
this.queryOptions.cols.forEach(it => this.$set(_this.tableOptions.where, it.field, ''))
|
||||
this.tableOptions.cols.forEach(it => {
|
||||
if (it.type === 'switch') {
|
||||
it.change = (row) => {
|
||||
this.$request(this.handlerRequest(it, row, {
|
||||
id: row.id,
|
||||
[it.field]: row[it.field]
|
||||
}))
|
||||
}
|
||||
}
|
||||
if (it.type === 'btns') {
|
||||
it.btns.forEach(btn => {
|
||||
btn.click = (row) => {
|
||||
if (btn.btnType === 'delete') {
|
||||
this.$common.handleDelete({
|
||||
url: btn.request.url,
|
||||
id: row.id,
|
||||
done: () => this.reloadTable()
|
||||
})
|
||||
} else if (btn.btnType === 'update') {
|
||||
this.handleUpdate(row)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
selectionChange(columns) {
|
||||
if (this.toolOptions && this.toolOptions.btns) {
|
||||
this.toolOptions.btns.forEach((it, i) => { it && it.request && it.request.data && this.$set(this.toolBtnData, i, ({ ...it.request.data })) })
|
||||
this.toolBtnData.forEach((it, i) => Object.keys(it).filter(key => it[key] === 'rowField').forEach(key => { this.$set(this.toolBtnData[i], key, columns.map(it => it[key]).join(',')) }))
|
||||
}
|
||||
},
|
||||
handlerRequest(it, row, defaultData) {
|
||||
var requestOptions = {}
|
||||
requestOptions.url = it.request.url
|
||||
requestOptions.method = it.request.method || 'get'
|
||||
|
||||
var requestData = {}
|
||||
if (!it.request.data && defaultData) {
|
||||
requestData = defaultData
|
||||
} else {
|
||||
requestData = it.request.data
|
||||
for (var d in it.request.data) {
|
||||
var value = requestData[d]
|
||||
if (value === 'rowField') {
|
||||
requestData[d] = row[d]
|
||||
}
|
||||
}
|
||||
}
|
||||
if (requestOptions.method === 'get') {
|
||||
requestOptions.params = requestData
|
||||
} else {
|
||||
requestOptions.data = requestData
|
||||
}
|
||||
return requestOptions
|
||||
},
|
||||
reloadTable() {
|
||||
this.$refs.table.reloadList()
|
||||
},
|
||||
handleCreate() {
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.dialogStatus = 'update'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['inputForm'].getDetail(row)
|
||||
})
|
||||
},
|
||||
handleDownload() {
|
||||
this.$common.exportExcel({
|
||||
url: this.tableOptions.url,
|
||||
headers: this.queryOptions.btns.filter(it => it.type === 'export')[0].headers,
|
||||
columns: this.queryOptions.btns.filter(it => it.type === 'export')[0].columns,
|
||||
where: this.tableOptions.where
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tool-row {
|
||||
margin-bottom: 6px
|
||||
}
|
||||
.tool-row > div {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<div class="dashboard-text">欢迎</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard {
|
||||
&-container {
|
||||
margin: 30px;
|
||||
}
|
||||
&-text {
|
||||
font-size: 30px;
|
||||
line-height: 46px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div style="padding: 50px;">
|
||||
<el-button type="primary" @click="getData" style="margin-bottom: 10px">获取数据</el-button>
|
||||
<pd-editor-table v-model="tableDatas" :cols="cols" :show-no="false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'EditorTable',
|
||||
data() {
|
||||
return {
|
||||
tableDatas: [],
|
||||
cols: [{
|
||||
type: 'input',
|
||||
field: 'name',
|
||||
title: '名称'
|
||||
}, {
|
||||
type: 'select',
|
||||
field: 'role',
|
||||
title: '角色',
|
||||
properties: {
|
||||
type: 'dict_type'
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
console.log(this.tableDatas)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="app-container" style="padding:0;width:100%;height: calc(100vh - 85px);">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div style="padding: 50px;">
|
||||
<h2>多选</h2>
|
||||
<el-button type="primary" @click="getData" style="margin-bottom: 10px">获取数据</el-button>
|
||||
<pd-select v-model="dictType" type="dict_type" :el="{ multiple: true }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'SelectExample',
|
||||
data() {
|
||||
return {
|
||||
dictType: '0,1'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
console.log(this.dictType)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-select v-for="(data, i) in dataList" :key="i" v-model="dataValues[i]" :placeholder="'请选择' + (i+1) + '级'" @change="selectChange">
|
||||
<el-option
|
||||
v-for="item in data"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ThreeLinkAge',
|
||||
data() {
|
||||
return {
|
||||
dataList: [[], [], []],
|
||||
dataValues: [],
|
||||
threeLinkageData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.threeLinkageData = require('../../json/three-linkage.json')
|
||||
this.$set(this.dataList, 0, this.threeLinkageData.filter(it => it.level === 0))
|
||||
},
|
||||
methods: {
|
||||
selectChange(id) {
|
||||
var currLevel = this.threeLinkageData.filter(it => it.id === id).map(it => it.level)[0]
|
||||
this.dataList.forEach((it, i) => {
|
||||
if (i > currLevel) {
|
||||
this.$set(this.dataList, i, [])
|
||||
this.$set(this.dataValues, i, '')
|
||||
}
|
||||
})
|
||||
if (currLevel + 1 !== this.dataList.length) {
|
||||
this.$set(this.dataList, currLevel + 1, this.threeLinkageData.filter(it => it.pid == id))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<pd-ueditor v-model="content" />
|
||||
<button @click="getContent">获取内容</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'UeditorExample',
|
||||
data() {
|
||||
return {
|
||||
content: '默认content'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getContent() {
|
||||
console.log(this.content)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div style="padding: 50px;">
|
||||
<h2>上传文件</h2>
|
||||
<pd-upload-file v-model="fileUrl" @change="fileChange" />
|
||||
<h2>上传图片（id）</h2>
|
||||
<pd-upload-image :external-id="externalId" multiple :external-type="externalType" />
|
||||
<h2>上传图片（url、单图）</h2>
|
||||
<pd-upload-image v-model="imgUrl" @change="imgChange" />
|
||||
<h2>上传图片（url、多图）</h2>
|
||||
<pd-upload-image v-model="multipleImgUrl" width="120" height="120" multiple :limit="3" @change="multipleImgChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'UploadFile',
|
||||
data() {
|
||||
return {
|
||||
externalId: this.$common.uuid(),
|
||||
externalType: '营业执照',
|
||||
imgUrl: '',
|
||||
multipleImgUrl: '',
|
||||
fileUrl: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fileChange() {
|
||||
console.log(this.fileUrl)
|
||||
},
|
||||
imgChange() {
|
||||
console.log(this.imgUrl)
|
||||
},
|
||||
multipleImgChange() {
|
||||
console.log(this.multipleImgUrl)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
||||
|
||||
<div class="title-container">
|
||||
<h3 class="title">后台管理系统</h3>
|
||||
</div>
|
||||
|
||||
<el-form-item prop="username">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input
|
||||
ref="username"
|
||||
v-model="loginForm.username"
|
||||
placeholder="Username"
|
||||
name="username"
|
||||
type="text"
|
||||
tabindex="1"
|
||||
auto-complete="on"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input
|
||||
:key="passwordType"
|
||||
ref="password"
|
||||
v-model="loginForm.password"
|
||||
:type="passwordType"
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
tabindex="2"
|
||||
auto-complete="on"
|
||||
@keyup.enter.native="handleLogin"
|
||||
/>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { validUsername } from '@/scripts/validate'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
// const validateUsername = (rule, value, callback) => {
|
||||
// if (!validUsername(value)) {
|
||||
// callback(new Error('Please enter the correct user name'))
|
||||
// } else {
|
||||
// callback()
|
||||
// }
|
||||
// }
|
||||
return {
|
||||
loginForm: {
|
||||
username: 'admin',
|
||||
password: '1'
|
||||
},
|
||||
loginRules: {
|
||||
// username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
username: [{ required: true, trigger: 'blur' }],
|
||||
password: [{ required: true, trigger: 'blur' }]
|
||||
},
|
||||
loading: false,
|
||||
passwordType: 'password',
|
||||
redirect: undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function(route) {
|
||||
this.redirect = route.query && route.query.redirect
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.passwordType === 'password') {
|
||||
this.passwordType = ''
|
||||
} else {
|
||||
this.passwordType = 'password'
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs.password.focus()
|
||||
})
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('user/login', this.loginForm).then((res) => {
|
||||
console.log(res)
|
||||
this.$router.push({ path: '/dashboard' })
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* 修复input 背景不协调 和光标变色 */
|
||||
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
||||
|
||||
$bg:#283443;
|
||||
$light_gray:#fff;
|
||||
$cursor: #fff;
|
||||
|
||||
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
||||
.login-container .el-input input {
|
||||
color: $cursor;
|
||||
}
|
||||
}
|
||||
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 47px;
|
||||
width: 85%;
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 12px 5px 12px 15px;
|
||||
color: $light_gray;
|
||||
height: 47px;
|
||||
caret-color: $cursor;
|
||||
|
||||
&:-webkit-autofill {
|
||||
box-shadow: 0 0 0px 1000px $bg inset !important;
|
||||
-webkit-text-fill-color: $cursor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$bg:#2d3a4b;
|
||||
$dark_gray:#889aa4;
|
||||
$light_gray:#eee;
|
||||
|
||||
.login-container {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
background-color: $bg;
|
||||
overflow: hidden;
|
||||
|
||||
.login-form {
|
||||
position: relative;
|
||||
width: 520px;
|
||||
max-width: 100%;
|
||||
padding: 160px 35px 0;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
&:first-of-type {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
padding: 6px 5px 6px 15px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
color: $light_gray;
|
||||
margin: 0px auto 40px auto;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="app-container" style="padding:0;width:100%;height: calc(100vh - 85px);">
|
||||
<magic-editor :config="config" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入组件
|
||||
import MagicEditor from 'magic-editor'
|
||||
// 引入样式
|
||||
import 'magic-editor/dist/magic-editor.css'
|
||||
import { getToken } from '@/scripts/auth'
|
||||
|
||||
export default {
|
||||
name: 'MagicApi',
|
||||
components: {
|
||||
MagicEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
baseURL: process.env.VUE_APP_BASE_API + 'magic/web', // 配置后台服务
|
||||
serverURL: process.env.VUE_APP_BASE_API, // 配置接口实际路径
|
||||
request: {
|
||||
beforeSend: (config) => {
|
||||
config.headers['token'] = getToken()
|
||||
return config
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="标签">
|
||||
<el-input v-model="tableOptions.where.label" placeholder="标签" style="width: 200px;" class="filter-item" />
|
||||
</el-form-item>
|
||||
<el-form-item label="值">
|
||||
<el-input v-model="tableOptions.where.value" placeholder="值" style="width: 200px;" class="filter-item" />
|
||||
</el-form-item>
|
||||
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="reloadTable">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button v-permission="'dict:items:save'" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
|
||||
添加
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<pd-table ref="table" v-bind="tableOptions" />
|
||||
|
||||
<el-dialog v-el-drag-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :modal="false" :close-on-click-modal="false" width="700px">
|
||||
<el-form ref="dataForm" :inline="true" :rules="rules" :model="temp" label-position="right" label-width="100px" style="margin-left: 20px">
|
||||
<el-form-item label="标签名" prop="label">
|
||||
<el-input v-model="temp.label" />
|
||||
</el-form-item>
|
||||
<el-form-item label="值" prop="value">
|
||||
<el-input v-model="temp.value" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="temp.sort" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remarks">
|
||||
<el-input v-model="temp.remarks" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">
|
||||
关闭
|
||||
</el-button>
|
||||
<el-button type="primary" @click="save()">
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'DictItems',
|
||||
props: {
|
||||
dictId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableOptions: {
|
||||
url: 'dict/items/list',
|
||||
page: true,
|
||||
where: {
|
||||
label: '',
|
||||
value: ''
|
||||
},
|
||||
cols: [
|
||||
{
|
||||
field: 'label',
|
||||
title: '类型'
|
||||
},
|
||||
{
|
||||
field: 'value',
|
||||
title: '值'
|
||||
},
|
||||
{
|
||||
field: 'sort',
|
||||
title: '排序'
|
||||
},
|
||||
{
|
||||
field: 'remarks',
|
||||
title: '备注'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
type: 'btns',
|
||||
fixed: 'right',
|
||||
btns: [
|
||||
{
|
||||
permission: 'dict:items:save',
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
click: (row) => {
|
||||
this.handleUpdate(row)
|
||||
}
|
||||
},
|
||||
{
|
||||
permission: 'dict:items:delete',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
click: (row) => {
|
||||
this.$common.handleDelete({
|
||||
url: 'dict/items/delete',
|
||||
id: row.id,
|
||||
done: () => {
|
||||
this.reloadTable()
|
||||
this.$common.getDictData()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
textMap: {
|
||||
update: '修改',
|
||||
create: '添加'
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
dialogStatus: '',
|
||||
rules: {
|
||||
value: [{ required: true, message: '请输入值', trigger: 'change' }],
|
||||
label: [{ required: true, message: '请输入标签名', trigger: 'change' }],
|
||||
sort: [{ required: true, message: '请输入排序', trigger: 'change' }]
|
||||
},
|
||||
temp: this.getTemp()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dictId(newVal) {
|
||||
this.dictId = newVal
|
||||
this.reloadTable()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.selectValue = this.value
|
||||
this.reloadTable()
|
||||
},
|
||||
methods: {
|
||||
reloadTable() {
|
||||
this.tableOptions.where.dictId = this.dictId
|
||||
this.$refs.table.reloadList()
|
||||
},
|
||||
getTemp() {
|
||||
return {
|
||||
id: '',
|
||||
value: '',
|
||||
label: '',
|
||||
dictId: this.dictId,
|
||||
sort: 0,
|
||||
remarks: ''
|
||||
}
|
||||
},
|
||||
getSort() {
|
||||
this.$get('dict/items/sort', { dictId: this.dictId }).then(res => {
|
||||
this.temp.sort = res.data
|
||||
})
|
||||
},
|
||||
handleCreate() {
|
||||
this.temp = this.getTemp()
|
||||
this.getSort()
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
save() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$post('dict/items/save', this.temp).then(() => {
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: (this.dialogStatus === 'create' ? '创建' : '修改') + '成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.reloadTable()
|
||||
this.$common.getDictData()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.$common.objAssign(this.temp, row)
|
||||
this.dialogStatus = 'update'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="类型">
|
||||
<el-input v-model="tableOptions.where.type" placeholder="请输入类型" style="width: 200px;" class="filter-item" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字典类型">
|
||||
<pd-select v-model="tableOptions.where.dictType" :all-option="true" type="dict_type" width="185px" />
|
||||
</el-form-item>
|
||||
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="reloadTable">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button v-permission="'dict:save'" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
|
||||
添加
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<pd-table ref="table" v-bind="tableOptions" />
|
||||
|
||||
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="700px">
|
||||
<el-form ref="dataForm" :inline="true" :rules="rules" :model="temp" label-position="right" label-width="100px" style="margin-left: 20px">
|
||||
<el-form-item label="字典类型" prop="dictType">
|
||||
<pd-select v-model="temp.dictType" type="dict_type" width="185px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-input v-model="temp.type" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="temp.sort" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="descRibe">
|
||||
<el-input v-model="temp.descRibe" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remarks">
|
||||
<el-input v-model="temp.remarks" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">
|
||||
关闭
|
||||
</el-button>
|
||||
<el-button type="primary" @click="save()">
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-el-drag-dialog title="字典项" :visible.sync="dictItemsVisible" :close-on-click-modal="false" width="1400px">
|
||||
<dict-items :dict-id.sync="dictId" />
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DictItems from './dict-items'
|
||||
|
||||
export default {
|
||||
name: 'DictList',
|
||||
components: {
|
||||
DictItems
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableOptions: {
|
||||
url: 'dict/list',
|
||||
page: true,
|
||||
where: {
|
||||
username: '',
|
||||
name: ''
|
||||
},
|
||||
cols: [
|
||||
{
|
||||
field: 'type',
|
||||
title: '类型'
|
||||
},
|
||||
{
|
||||
field: 'descRibe',
|
||||
title: '描述'
|
||||
},
|
||||
{
|
||||
field: 'dictType',
|
||||
title: '字典类型',
|
||||
width: 200,
|
||||
dictType: 'dict_type'
|
||||
},
|
||||
{
|
||||
field: 'remarks',
|
||||
title: '备注',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
field: 'sort',
|
||||
title: '排序',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
type: 'btns',
|
||||
width: 300,
|
||||
fixed: 'right',
|
||||
btns: [
|
||||
{
|
||||
permission: 'dict:save',
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
click: (row) => {
|
||||
this.handleUpdate(row)
|
||||
}
|
||||
},
|
||||
{
|
||||
permission: 'dict:delete',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
click: (row) => {
|
||||
this.$common.handleDelete({
|
||||
url: 'dict/delete',
|
||||
id: row.id,
|
||||
done: () => {
|
||||
this.reloadTable()
|
||||
this.$common.getDictData()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
permission: 'dict:items',
|
||||
title: '字典项',
|
||||
type: 'primary',
|
||||
click: (row) => {
|
||||
this.dictItemsVisible = true
|
||||
this.dictId = row.id
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
dictId: '',
|
||||
temp: this.getTemp(),
|
||||
dialogFormVisible: false,
|
||||
dictItemsVisible: false,
|
||||
dialogStatus: '',
|
||||
textMap: {
|
||||
update: '修改',
|
||||
create: '添加'
|
||||
},
|
||||
pvData: [],
|
||||
rules: {
|
||||
dictType: [{ required: true, message: '请输入标签', trigger: 'change' }],
|
||||
type: [{ required: true, message: '请输入类型', trigger: 'change' }],
|
||||
sort: [{ required: true, message: '请输入排序', trigger: 'change' }],
|
||||
descRibe: [{ required: true, message: '请输入描述', trigger: 'change' }]
|
||||
},
|
||||
downloadLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTemp() {
|
||||
return {
|
||||
id: '',
|
||||
dictType: '',
|
||||
type: '',
|
||||
sort: 0,
|
||||
descRibe: '',
|
||||
remarks: ''
|
||||
}
|
||||
},
|
||||
reloadTable() {
|
||||
this.$refs.table.reloadList()
|
||||
},
|
||||
getSort() {
|
||||
this.$get('dict/sort').then(res => {
|
||||
this.temp.sort = res.data
|
||||
})
|
||||
},
|
||||
handleCreate() {
|
||||
this.temp = this.getTemp()
|
||||
this.getSort()
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
save() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$post('dict/save', this.temp).then((response) => {
|
||||
this.temp.id = response.data
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: (this.dialogStatus === 'create' ? '创建' : '修改') + '成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.reloadTable()
|
||||
this.$common.getDictData()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.$common.objAssign(this.temp, row)
|
||||
this.dialogStatus = 'update'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<el-button class="filter-item" style="margin-bottom:10px;" type="primary" icon="el-icon-edit" @click="addSubMenu('0')">
|
||||
添加菜单
|
||||
</el-button>
|
||||
|
||||
<pd-table ref="table" v-bind="tableOptions" />
|
||||
|
||||
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
|
||||
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="temp.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单链接" prop="url">
|
||||
<el-input v-model="temp.url" />
|
||||
</el-form-item>
|
||||
<el-form-item label="权限标识" prop="permission">
|
||||
<el-input v-model="temp.permission" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="temp.sort" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="temp.descRibe" :autosize="{ minRows: 4, maxRows: 6}" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否显示">
|
||||
<el-checkbox v-model="temp.isShow">显示</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">
|
||||
关闭
|
||||
</el-button>
|
||||
<el-button type="primary" @click="save()">
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableOptions: {
|
||||
el: {
|
||||
'default-expand-all': true,
|
||||
'tree-props': { children: 'children', hasChildren: 'hasChildren' },
|
||||
'row-key': 'id'
|
||||
},
|
||||
showNo: false,
|
||||
url: 'menu/tree',
|
||||
page: false,
|
||||
cols: [
|
||||
{
|
||||
field: 'name',
|
||||
title: '菜单名称',
|
||||
width: '400',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
field: 'url',
|
||||
title: '路径',
|
||||
width: '250',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
field: 'permission',
|
||||
title: '权限标识',
|
||||
width: 150,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
field: 'sort',
|
||||
title: '排序',
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
field: 'isShow',
|
||||
title: '是否显示',
|
||||
type: 'switch',
|
||||
width: 100,
|
||||
change: (row) => {
|
||||
this.$get('menu/change/show', {
|
||||
id: row.id,
|
||||
isShow: row.isShow
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
type: 'btns',
|
||||
fixed: 'right',
|
||||
align: 'left',
|
||||
btns: [
|
||||
{
|
||||
title: '添加下级菜单',
|
||||
type: 'primary',
|
||||
click: (row) => {
|
||||
this.addSubMenu(row.id)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
click: (row) => {
|
||||
this.handleUpdate(row)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
click: (row) => {
|
||||
this.$common.handleDelete({
|
||||
url: 'menu/delete',
|
||||
id: row.id,
|
||||
done: () => this.reloadTable()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
dialogStatus: '',
|
||||
textMap: {
|
||||
update: '修改',
|
||||
create: '添加'
|
||||
},
|
||||
temp: this.getTemp(),
|
||||
listConfigDialogVisible: false,
|
||||
formConfigDialogVisible: false,
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入菜单名称', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTemp() {
|
||||
return {
|
||||
id: '',
|
||||
name: '',
|
||||
url: '',
|
||||
permission: '',
|
||||
sort: 0,
|
||||
descRibe: '',
|
||||
isShow: true,
|
||||
pid: ''
|
||||
}
|
||||
},
|
||||
resetTemp() {
|
||||
this.temp = this.getTemp()
|
||||
},
|
||||
getSort() {
|
||||
this.$get('menu/sort', { pid: this.temp.pid }).then(res => {
|
||||
this.temp.sort = res.data
|
||||
})
|
||||
},
|
||||
addSubMenu(id) {
|
||||
this.resetTemp()
|
||||
this.temp.pid = id
|
||||
this.temp.id = this.$common.uuid()
|
||||
this.getSort()
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
save() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.temp.isShow = this.temp.isShow === true ? 1 : 0
|
||||
this.$post('menu/save', this.temp).then(() => {
|
||||
this.reloadTable()
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: (this.dialogStatus === 'create' ? '创建' : '修改') + '成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
reloadTable() {
|
||||
this.$refs.table.reloadList()
|
||||
},
|
||||
handleUpdate(row) {
|
||||
for (var t in this.temp) {
|
||||
if (t === 'isShow') {
|
||||
if (row[t] === 1) {
|
||||
this.temp[t] = true
|
||||
} else {
|
||||
this.temp[t] = false
|
||||
}
|
||||
} else {
|
||||
this.temp[t] = row[t]
|
||||
}
|
||||
}
|
||||
this.dialogStatus = 'update'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<el-button class="filter-item" style="margin-bottom:10px;" type="primary" icon="el-icon-edit" @click="addSubMenu('0')">
|
||||
添加组织机构
|
||||
</el-button>
|
||||
|
||||
<pd-table ref="table" v-bind="tableOptions" />
|
||||
|
||||
<pd-dialog :visible.sync="dialogFormVisible" width="600px" @confirm-click="$refs.dataForm.save()">
|
||||
<template #content>
|
||||
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="temp.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<pd-select v-model="temp.type" type="office_type" width="100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input v-model="temp.sort" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</pd-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableOptions: {
|
||||
el: {
|
||||
'default-expand-all': true,
|
||||
'tree-props': { children: 'children' },
|
||||
'row-key': 'id'
|
||||
},
|
||||
showNo: false,
|
||||
data: [],
|
||||
updateStr: '',
|
||||
cols: [
|
||||
{
|
||||
field: 'name',
|
||||
title: '名称',
|
||||
width: '400',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
field: 'type',
|
||||
title: '类型',
|
||||
dictType: 'office_type',
|
||||
width: '250',
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
field: 'sort',
|
||||
title: '排序',
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
type: 'btns',
|
||||
fixed: 'right',
|
||||
align: 'left',
|
||||
btns: [
|
||||
{
|
||||
title: '添加下级',
|
||||
type: 'primary',
|
||||
click: (row) => {
|
||||
this.addSubMenu(row.id)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
click: (row) => {
|
||||
this.handleUpdate(row)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
click: (row) => {
|
||||
this.$common.handleDelete({
|
||||
url: 'office/delete',
|
||||
id: row.id,
|
||||
done: () => this.reloadTable()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
dialogStatus: '',
|
||||
textMap: {
|
||||
update: '修改',
|
||||
create: '添加'
|
||||
},
|
||||
temp: this.getTemp(),
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'change' }],
|
||||
type: [{ required: true, message: '请选择类型', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.reloadTable()
|
||||
},
|
||||
methods: {
|
||||
getTemp() {
|
||||
return {
|
||||
id: '',
|
||||
name: '',
|
||||
type: '',
|
||||
sort: 0,
|
||||
pid: ''
|
||||
}
|
||||
},
|
||||
resetTemp() {
|
||||
this.temp = this.getTemp()
|
||||
},
|
||||
addSubMenu(id) {
|
||||
this.resetTemp()
|
||||
this.temp.pid = id
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
save() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$post('office/save', this.temp).then(() => {
|
||||
this.reloadTable()
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: (this.dialogStatus === 'create' ? '创建' : '修改') + '成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
reloadTable() {
|
||||
this.$get('office/list').then(res => {
|
||||
this.$set(this.tableOptions, 'data', this.$common.handlerTreeData(res.data, 'id', 'pid', 'sort', '0'))
|
||||
})
|
||||
},
|
||||
handleUpdate(row) {
|
||||
for (var t in this.temp) {
|
||||
this.temp[t] = row[t]
|
||||
}
|
||||
this.dialogStatus = 'update'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input v-model="tableOptions.where.name" placeholder="请输入角色名称" style="width: 200px;" class="filter-item" />
|
||||
</el-form-item>
|
||||
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="reloadTable">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button v-permission="'role:save'" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
|
||||
添加
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<pd-table ref="table" v-bind="tableOptions" />
|
||||
|
||||
<pd-dialog :visible.sync="dialogFormVisible" @confirm-click="save()">
|
||||
<template #content>
|
||||
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="temp.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="选择菜单">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="menuTree"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expand-all="true"
|
||||
:props="defaultProps"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</pd-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMenusByRoleId } from '@/api/menu'
|
||||
import { getMenuTree } from '@/api/menu'
|
||||
|
||||
export default {
|
||||
name: 'RoleList',
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableOptions: {
|
||||
url: 'role/list',
|
||||
where: {
|
||||
name: ''
|
||||
},
|
||||
cols: [
|
||||
{
|
||||
field: 'name',
|
||||
title: '角色名称'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
type: 'btns',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
btns: [
|
||||
{
|
||||
permission: 'role:save',
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
click: (row) => {
|
||||
this.handleUpdate(row)
|
||||
}
|
||||
},
|
||||
{
|
||||
permission: 'role:delete',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
click: (row) => {
|
||||
this.$common.handleDelete({
|
||||
url: 'role/delete',
|
||||
id: row.id,
|
||||
done: () => this.reloadTable()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
menuTree: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
selectMenus: [],
|
||||
temp: {
|
||||
id: '',
|
||||
name: '',
|
||||
menus: []
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
dialogStatus: '',
|
||||
textMap: {
|
||||
update: '修改',
|
||||
create: '添加'
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入角色名称', trigger: 'change' }]
|
||||
},
|
||||
downloadLoading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getMenuTree().then(response => {
|
||||
const { data } = response
|
||||
this.menuTree = data.list
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
reloadTable() {
|
||||
this.$refs.table.reloadList()
|
||||
},
|
||||
resetTemp() {
|
||||
this.temp = {
|
||||
id: '',
|
||||
name: '',
|
||||
menus: []
|
||||
}
|
||||
},
|
||||
handleCreate() {
|
||||
this.cancelSelectMenu()
|
||||
this.resetTemp()
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
},
|
||||
save() {
|
||||
this.selectMenus = []
|
||||
var checkedNodes = this.$refs.tree.getCheckedNodes(false, true)
|
||||
for (var i = 0; i < checkedNodes.length; i++) {
|
||||
this.selectMenus.push(checkedNodes[i].id)
|
||||
}
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.temp.menus = this.selectMenus.join(',')
|
||||
this.$post('role/save', this.temp).then((response) => {
|
||||
this.reloadTable()
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: (this.dialogStatus === 'create' ? '创建' : '修改') + '成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
cancelSelectMenu() {
|
||||
if (this.$refs.tree) {
|
||||
for (var i in this.menuTree) {
|
||||
var menu = this.menuTree[i]
|
||||
this.$refs.tree.setChecked(menu, false, true)
|
||||
}
|
||||
}
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.cancelSelectMenu()
|
||||
for (var t in this.temp) {
|
||||
this.temp[t] = row[t]
|
||||
}
|
||||
getMenusByRoleId(row.id).then(response => {
|
||||
const { data } = response
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
this.$refs.tree.setChecked(data[i], true, false)
|
||||
}
|
||||
})
|
||||
this.dialogStatus = 'update'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
|
||||
<el-form-item label="登录名称" prop="username">
|
||||
<el-input v-model="temp.username" />
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名/昵称" prop="name">
|
||||
<el-input v-model="temp.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="temp.password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="temp.phone" />
|
||||
</el-form-item>
|
||||
<el-form-item label="禁止登录" prop="isLogin">
|
||||
<template>
|
||||
<el-switch
|
||||
v-model="temp.isLogin"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择角色">
|
||||
<el-checkbox-group v-model="selectRoles" size="small">
|
||||
<el-checkbox v-for="role in roles" :key="role.id" :label="role.id">{{ role.name }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'UserForm',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dialogStatus: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
username: [{ required: true, message: '请输入登录名称', trigger: 'change' }]
|
||||
},
|
||||
roles: [],
|
||||
selectRoles: [],
|
||||
temp: this.getTemp()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(newVal) {
|
||||
this.temp = this.getTemp()
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].clearValidate()
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$get('role/list?size=999999').then(response => {
|
||||
const { data } = response
|
||||
this.roles = data.list
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getTemp() {
|
||||
return {
|
||||
id: '',
|
||||
name: '',
|
||||
username: '',
|
||||
password: '',
|
||||
phone: '',
|
||||
isLogin: 0,
|
||||
roles: []
|
||||
}
|
||||
},
|
||||
save() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.temp.roles = this.selectRoles.join(',')
|
||||
this.$request({
|
||||
url: 'user/save',
|
||||
method: 'post',
|
||||
params: this.temp
|
||||
}).then((response) => {
|
||||
this.dialogVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: (this.dialogStatus === 'create' ? '创建' : '修改') + '成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.$emit('reload-table')
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getInfo(row) {
|
||||
for (var t in this.temp) {
|
||||
if (t !== 'roles') {
|
||||
this.temp[t] = row[t]
|
||||
}
|
||||
}
|
||||
this.$get('user/roles', { userId: this.temp.id }).then((response) => {
|
||||
const { data } = response
|
||||
this.selectRoles = data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="登录名称">
|
||||
<el-input v-model="tableOptions.where.username" placeholder="登录名称" style="width: 200px;" class="filter-item" />
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名/昵称">
|
||||
<el-input v-model="tableOptions.where.name" placeholder="姓名/昵称" style="width: 200px;" class="filter-item" />
|
||||
</el-form-item>
|
||||
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="reloadTable">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button v-permission="'user:save'" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
|
||||
导出
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<el-row style="margin-bottom: 6px">
|
||||
<pd-button plain :request-url="'user/delete'" :btn-type="'delete'" :request-data="{ id: ids }" :after-handler="reloadTable" />
|
||||
</el-row>
|
||||
<hr>
|
||||
|
||||
<pd-table ref="table" v-bind="tableOptions" @selection-change="selectionChange" />
|
||||
|
||||
<pd-dialog :visible.sync="dialogFormVisible" @confirm-click="$refs.userForm.save()">
|
||||
<template #content>
|
||||
<user-form ref="userForm" :visible.sync="dialogFormVisible" :dialog-status="dialogStatus" @reload-table="reloadTable" />
|
||||
</template>
|
||||
</pd-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserForm from './user-form.vue'
|
||||
|
||||
export default {
|
||||
name: 'UserList',
|
||||
components: { UserForm },
|
||||
data() {
|
||||
return {
|
||||
tableOptions: {
|
||||
url: 'user/list',
|
||||
page: true,
|
||||
selection: true,
|
||||
where: {
|
||||
username: '',
|
||||
name: ''
|
||||
},
|
||||
cols: [
|
||||
{
|
||||
field: 'username',
|
||||
title: '登录名称',
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '姓名/昵称',
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
field: 'phone',
|
||||
title: '手机号',
|
||||
width: 200,
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
field: 'isLogin',
|
||||
title: '禁止登录',
|
||||
type: 'switch',
|
||||
width: 200,
|
||||
change: (row) => {
|
||||
this.$get('/user/change/login/status', {
|
||||
id: row.id,
|
||||
isLogin: row.isLogin
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'createDate',
|
||||
title: '创建时间'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
type: 'btns',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
btns: [
|
||||
{
|
||||
permission: 'user:save',
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
click: (row) => {
|
||||
this.handleUpdate(row)
|
||||
}
|
||||
},
|
||||
{
|
||||
permission: 'user:delete',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
click: (row) => {
|
||||
this.$common.handleDelete({
|
||||
url: 'user/delete',
|
||||
id: row.id,
|
||||
done: () => this.reloadTable()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
dialogStatus: '',
|
||||
downloadLoading: false,
|
||||
ids: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectionChange(columns) {
|
||||
this.ids = columns.map(it => it['id']).join(',')
|
||||
},
|
||||
reloadTable() {
|
||||
this.$refs.table.reloadList()
|
||||
},
|
||||
handleCreate() {
|
||||
this.dialogStatus = 'create'
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
handleUpdate(row) {
|
||||
this.dialogStatus = 'update'
|
||||
this.dialogFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['userForm'].getInfo(row)
|
||||
})
|
||||
},
|
||||
handleDownload() {
|
||||
this.$common.exportExcel({
|
||||
url: this.tableOptions.url,
|
||||
headers: ['登录名称', '姓名'],
|
||||
columns: ['username', 'name'],
|
||||
where: this.tableOptions.where
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user