XiaoMo/x-php-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
小陌 2023-07-08 00:23:19 +08:00
parent 6a8d59e7a7
commit 84529c5529
10 changed files with 278 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/scForm/index.vue
View File

@ -5,7 +5,7 @@
<el-skeleton v-if="renderLoading || Object.keys(form).length==0" animated /> <el-skeleton v-if="renderLoading || Object.keys(form).length==0" animated />
<el-form v-else ref="form" :model="form" :label-width="config.labelWidth" :label-position="config.labelPosition" v-loading="loading" element-loading-text="Loading..."> <el-form v-else ref="form" :model="form" :label-width="config.labelWidth" :label-position="config.labelPosition" v-loading="loading" element-loading-text="Loading...">
<el-row :gutter="15"> <el-row :gutter="15">
<template v-for="(item, index) in config.formItems" :key="index"> <template v-for="(item, index) in config.column" :key="index">
<el-col :span="item.span || 24" v-if="!hideHandle(item)"> <el-col :span="item.span || 24" v-if="!hideHandle(item)">
<sc-title v-if="item.component=='title'" :title="item.label"></sc-title> <sc-title v-if="item.component=='title'" :title="item.label"></sc-title>
<el-form-item v-else-if="item.component" :prop="item.name" :rules="rulesHandle(item)"> <el-form-item v-else-if="item.component" :prop="item.name" :rules="rulesHandle(item)">
@ -79,10 +79,8 @@
methods: { methods: {
//构建form对象 //构建form对象
render() { render() {
this.config.formItems.forEach((item) => { this.config.column.forEach((item) => {
item.options = item.options?item.options:[]; item.options = item.options?item.options:[];
if(item.component == 'checkbox'){ if(item.component == 'checkbox'){
if(item.name){ if(item.name){
const value = {} const value = {}
@ -110,7 +108,7 @@
getData() { getData() {
this.renderLoading = true this.renderLoading = true
var remoteData = [] var remoteData = []
this.config.formItems.forEach((item) => { this.config.column.forEach((item) => {
if(item.options && item.options.remote){ if(item.options && item.options.remote){
var req = http.get(item.options.remote.api, item.options.remote.data).then(res=>{ var req = http.get(item.options.remote.api, item.options.remote.data).then(res=>{
item.options.items = res.data item.options.items = res.data

6
src/components/scForm/item.vue
View File

@ -88,11 +88,9 @@
<template v-else-if="item.component=='text'"> <template v-else-if="item.component=='text'">
<el-link type="info" :underline="false">{{ data[item.name] }}</el-link> <el-link type="info" :underline="false">{{ data[item.name] }}</el-link>
</template> </template>
<!-- avatar -->
<template v-else-if="item.component=='avatar'"> <template v-else-if="item.component=='avatar'">
<el-avatar :src="data[item.name]" size="small"></el-avatar> <x-avatar v-model="data" :options="item.options" size="small"></x-avatar>
<el-link v-if="item.options.subfield" type="info" style="padding: 0 10px;" :underline="false">
{{ data[item.options.subfield] }}
</el-link>
</template> </template>
<template v-else-if="item.component=='formtable'"> <template v-else-if="item.component=='formtable'">
<sc-form-table ref="videostable" v-model="data[item.name]" v-bind="item.options"> </sc-form-table> <sc-form-table ref="videostable" v-model="data[item.name]" v-bind="item.options"> </sc-form-table>

68
src/components/xAvatar/index.vue
View File

@ -1,22 +1,25 @@
<!-- <!--
* @Descripttion: 用户头像 * @Descripttion: 用户头像
--> -->
<template> <template>
<div style="display: flex;align-items: center;cursor: pointer; " @click="getUser(data)"> <div class="xavatar" @click="getUser(data)">
<el-avatar v-if="data.anonymous" title="匿名发布" size="small">匿</el-avatar> <el-avatar v-if="data.anonymous" title="匿名发布" size="small">匿</el-avatar>
<el-avatar v-else :src="data[name]" size="small"></el-avatar> <el-avatar v-else :src="data[name]" size="small">空</el-avatar>
<label v-if="options.subfield" style="position: absolute;left: 42px;"> <label v-if="options.subfield" class="input-mask">
<input class="el-input__inner" type="text" readonly :value="data[options.subfield]"> <input class="el-input__inner" type="text" readonly :value="data[options.subfield]">
</label> </label>
</div> </div>
<el-drawer type="primary" :with-header="false" append-to-body="true" v-model="visible" :size="options.size || 1000" :show-close="false" style="overflow: initial;" destroy-on-close @closed="$emit('closed')">
<el-button type="danger" @click="closeUser" class="userdrawerclose" icon="el-icon-close"> </el-button>
<x-user v-model="data"></x-user>
</el-drawer>
</template> </template>
<el-drawer type="primary" :with-header="false" append-to-body="true" v-model="visible" :size="1000" :show-close="false" style="overflow: initial;" destroy-on-close @closed="$emit('closed')">
<el-button type="danger" @click="closeUser" class="userdrawerclose" icon="el-icon-close"> </el-button>
<x-user v-model="visibleInfo"></x-user>
</el-drawer>
<script> <script>
export default { export default {
@ -29,7 +32,6 @@
return { return {
data: this.modelValue, data: this.modelValue,
visible:false, visible:false,
visibleInfo:{},
} }
}, },
watch:{ watch:{
@ -42,19 +44,51 @@
closeUser(){ closeUser(){
this.visible = false; this.visible = false;
}, },
getUser(o){ getUser(){
this.visible = true
this.visibleInfo = { // 无法找到会员
uid:o.uid, if (!this.data.uid && !this.data.uin) {
avatar:o.avatar, return false;
nickname:o.nickname,
username:o.username,
} }
this.visible = true
}, },
} }
} }
</script> </script>
<style scoped> <style scoped>
.userdrawerclose {position: absolute; position: absolute; top: 148px; left: -36px; z-index: 10000; border-top-right-radius: 0px; border-bottom-right-radius: 0px; padding: 6px; font-size: 22px; font-weight: bolder;} .xavatar{
display: flex;align-items: center;cursor: pointer;
}
.userdrawerclose {
position: absolute;
position: absolute;
top: 148px;
left: -36px;
z-index: 10000;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
padding: 6px;
font-size: 22px;
font-weight: bolder;
}
.xavatar .input-mask {
margin-left: 28px;
z-indexz: 1;
position: absolute;
}
.xavatar .input-mask::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: auto;
cursor: pointer;
}
</style> </style>

110
src/components/xDialog/index.vue
View File

@ -1,31 +1,30 @@
<!-- <!--
* @Descripttion: 弹窗扩展组件 * @Descripttion: 弹窗扩展组件
--> -->
<template> <template>
<div class="x-dialog" ref="xDialog"> <div class="x-dialog" ref="xDialog">
<el-dialog ref="dialog" v-model="dialogVisible" :fullscreen="isFullscreen" v-bind="$attrs" :show-close="false"> <el-dialog ref="dialog" v-model="dialogVisible" :fullscreen="isFullscreen" v-bind="$attrs" :show-close="false">
<template #header> <template #header>
<slot name="header"> <slot name="header">
<span class="el-dialog__title">{{ title }}</span> <span class="el-dialog__title">{{ title }}</span>
</slot> </slot>
<div class="x-dialog__headerbtn"> <div class="x-dialog__headerbtn">
<button v-if="showFullscreen" aria-label="fullscreen" type="button" @click="setFullscreen"> <button v-if="showFullscreen" aria-label="fullscreen" type="button" @click="setFullscreen">
<el-icon v-if="isFullscreen" class="el-dialog__close"><el-icon-bottom-left /></el-icon> <el-icon v-if="isFullscreen" class="el-dialog__close"><el-icon-bottom-left /></el-icon>
<el-icon v-else class="el-dialog__close"><el-icon-full-screen /></el-icon> <el-icon v-else class="el-dialog__close"><el-icon-full-screen /></el-icon>
</button> </button>
<button v-if="showClose" aria-label="close" type="button" @click="closeDialog"> <button v-if="showClose" aria-label="close" type="button" @click="closeDialog">
<el-icon class="el-dialog__close"><el-icon-close /></el-icon> <el-icon class="el-dialog__close"><el-icon-close /></el-icon>
</button> </button>
</div>
</template>
<div v-loading="loading">
<slot></slot>
</div> </div>
</template> <template #footer>
<div v-loading="loading"> <slot name="footer"></slot>
<slot></slot> </template>
</div> </el-dialog>
<template #footer>
<slot name="footer"></slot>
</template>
</el-dialog>
</div> </div>
</template> </template>
@ -69,11 +68,66 @@
</script> </script>
<style scoped> <style scoped>
.x-dialog__headerbtn {position: absolute;top: var(--el-dialog-padding-primary);right: var(--el-dialog-padding-primary);} .x-dialog__headerbtn {
.x-dialog__headerbtn button {padding: 0;background: transparent;border: none;outline: none;cursor: pointer;font-size: var(--el-message-close-size,16px);margin-left: 15px;color: var(--el-color-info);} position: absolute;
.x-dialog__headerbtn button:hover .el-dialog__close {color: var(--el-color-primary);} top: var(--el-dialog-padding-primary);
.x-dialog:deep(.el-dialog).is-fullscreen {display: flex;flex-direction: column;top:0px !important;left:0px !important;} right: var(--el-dialog-padding-primary);
}
.x-dialog__headerbtn button {
padding: 0;
background: transparent;
border: none;
outline: none;
cursor: pointer;
font-size: var(--el-message-close-size,16px);
margin-left: 15px;
color: var(--el-color-info);
}
.x-dialog__headerbtn button:hover .el-dialog__close {
color: var(--el-color-primary);
}
.x-dialog:deep(.el-dialog){
--el-dialog-margin-top: 0;
--el-dialog-width:60%;
--el-border-color-base: rgb(231 235 241 / 50%);
margin-bottom: 0;
max-height: calc(100% - 80px);
overflow: auto;
display: flex;
flex-direction: column;
top: 60px !important;
left: 0px !important;
}
.x-dialog:deep(.el-dialog) .el-dialog__header {
padding: 15px 20px;
}
.x-dialog:deep(.el-dialog) .el-dialog__body {
flex:1;overflow: auto;
padding:10px 16px;
}
.x-dialog:deep(.el-dialog) .el-dialog__footer {
padding: 10px 20px;
border-top: 1px solid var(--el-border-color-base);
}
.x-dialog:deep(.el-dialog).is-fullscreen {
display: flex;
flex-direction: column;
top:0px !important;
left:0px !important;
height: 100% !important;
--el-dialog-width:100%;
}
.x-dialog:deep(.el-dialog).is-fullscreen {
max-height:100%;
}
.x-dialog:deep(.el-dialog).is-fullscreen .el-dialog__header {} .x-dialog:deep(.el-dialog).is-fullscreen .el-dialog__header {}
.x-dialog:deep(.el-dialog).is-fullscreen .el-dialog__body {flex:1;overflow: auto;}
.x-dialog:deep(.el-dialog).is-fullscreen .el-dialog__footer {padding-bottom: 10px;border-top: 1px solid var(--el-border-color-base);}
</style> </style>

112
src/components/xUpdate/index.vue
View File

@ -2,39 +2,119 @@
* @Descripttion: 编辑 * @Descripttion: 编辑
--> -->
<template> <template>
<el-container v-loading="loading"> <x-dialog :title="(config.name || titleMap[mode]) || '编辑'" v-model="visible" :size="960" destroy-on-close @closed="$emit('closed')">
<el-main style="padding:0 20px 20px 20px"> <el-skeleton v-if="loading" :rows="4" />
<sc-form ref="formref" :config="config" v-model="data" :loading="loading"> </sc-form> <sc-form ref="formref" :config="config" v-model="data" v-if="!loading" :loading="loading"> </sc-form>
</el-main> <template #footer>
<el-footer>
<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button> <el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
<el-button @click="visible=false">取消</el-button> <el-button @click="visible=false">取消</el-button>
</el-footer> </template>
</el-container> </x-dialog>
</template> </template>
<script> <script>
export default { export default {
emits: ['success', 'closed'],
props: { props: {
modelValue: { type: Object, default: () => {} }, column: { type: Array, default: () => [] },
config: { type: Object, default: () => {} }, name: { type: String, default: "id" },
}, },
data() { data() {
return { return {
data: this.modelValue, loading: false,
isSaveing: false mode: "plus",
token: '',
key: this.name,
titleMap: {
plus: '新增',
edit: '编辑'
},
data: {},
config: {
column : this.column,
labelPosition : "right",
labelWidth : "120px",
size : "medium",
url:''
},
visible: false,
isSaveing: false,
} }
}, },
watch:{ watch: {
modelValue(){ column(){
this.config.column = this.column;
} }
}, },
mounted() { mounted() {
// this.data = this.modelValue
}, },
methods: { methods: {
// 显示
open(mode='add'){
this.mode = mode;
this.visible = true;
return this;
},
// 表单提交方法
submit(){
this.$refs.formref.validate(async (valid) => {
if (valid) {
this.isSaveing = true;
if (!this.config.url) {
console.log(this.data, this.token)
this.$alert('没有编辑相关配置', "提示", {type: 'error'});
return;
}
this.$http.post(this.config.url, {token:this.token, info:this.data}).then((res) => {
if (res.code == 200 ) {
this.isSaveing = false;
this.visible = false;
this.$emit('success', res.data, this.mode, res.message || "操作成功");
return;
}
this.$alert(res.message, "提示", {type: 'error'});
})
}
})
},
// 配置
setConfig(o){
Object.assign(this.config, o);
// 远程读取数据
if (this.config.remoteurl) {
this.loading = true;
setTimeout(async ()=>{
var res = await this.$http.get(this.config.remoteurl, {[this.key]: this.data[this.key]})
if (res.code == 200 ) {
this.loading = false;
if (res.data.config) {
Object.assign(this.config, res.data.config);
}
if (res.data.data) {
this.setData(res.data.data);
}
if (res.data.token) {
this.token = res.data.token
}
return;
}
this.$alert(res.message, "提示", {type: 'error'});
}, 100)
return false;
}
},
// 表单注入数据
setData(data){
this.data = data;
return this;
},
} }
} }
</script> </script>

1
src/config/table.js
View File

@ -21,7 +21,6 @@ export default {
prop: 'prop', //规定排序字段名字段 prop: 'prop', //规定排序字段名字段
order: 'order' //规定排序规格字段 order: 'order' //规定排序规格字段
}, },
configUrl: 'system/table/get',
/** /**
* 自定义列保存处理 * 自定义列保存处理
* @tablename scTable组件的props->tablename * @tablename scTable组件的props->tablename

68
src/views/system/table/dialog.vue
View File

@ -1,68 +0,0 @@
<template>
<el-dialog :title="titleMap[mode]" v-model="visible" :size="960" destroy-on-close @closed="$emit('closed')">
<el-container v-loading="loading">
<el-main style="padding:0 20px 20px 20px">
<sc-form ref="formref" :config="config" v-model="info" :loading="loading"> </sc-form>
</el-main>
<el-footer>
<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
<el-button @click="visible=false">取消</el-button>
</el-footer>
</el-container>
</el-dialog>
</template>
<script>
export default {
emits: ['success', 'closed'],
props: {
column: { type: Object, default: () => {} },
},
data() {
return {
loading: false,
mode: "plus",
titleMap: {
plus: '新增',
edit: '编辑'
},
info: {},
visible: false,
isSaveing: false,
}
},
watch: {
column(){
this.config.column = this.column;
}
},
mounted() {
this.config = {
formItems : this.column,
labelPosition : "right",
labelWidth : "120px",
size : "medium",
}
},
methods: {
//显示
open(mode='add'){
this.mode = mode;
this.visible = true;
return this;
},
//表单提交方法
submit(){
this.$refs.formref.validate(async (valid) => {
if (valid) {
// this.isSaveing = true;
this.$emit('success', this.info, this.mode);
}
})
},
//表单注入数据
setData(info){
this.info = info;
},
}
}
</script>

115
src/views/system/table/index.vue
View File

@ -49,23 +49,23 @@
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>
<save-dialog v-if="dialog.save" :column="column" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog> <x-update v-if="dialog.save" :column="column" :name="key" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></x-update>
<stat-dialog v-if="dialog.stat" ref="statDialog" @closed="dialog.stat=false"></stat-dialog> <x-dialog v-if="dialog.stat" ref="xStat" @closed="dialog.stat=false"></x-dialog>
<a @click="plus">fdsafdfa</a>
</template> </template>
<script> <script>
import saveDialog from './save' import xStat from './stat'
import statDialog from './stat'
import scFilterBar from '@/components/scFilterBar'; import scFilterBar from '@/components/scFilterBar';
import scEcharts from '@/components/scEcharts' import scEcharts from '@/components/scEcharts'
import XItem from '@/components/scForm/item'
export default { export default {
name: 'propertyAuth', name: 'propertyAuth',
components: { components: {
saveDialog, xStat,
statDialog,
scEcharts, scEcharts,
XItem,
scFilterBar scFilterBar
}, },
data() { data() {
@ -148,47 +148,48 @@
tabChange(){ tabChange(){
this.$refs.table.reload(this.search) this.$refs.table.reload(this.search)
}, },
//本地更新数据
handleSuccess(data, mode, message){
if(mode=='plus'){
if (data) {
this.$refs.table.tableData.unshift(data)
}else{
this.$refs.table.reload({})
}
}else if(mode=='edit'){
if (data) {
this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
Object.assign(item, data, data)
})
}else{
this.$refs.table.refresh()
}
}
this.$message.success(message || "操作成功")
return;
},
//增加 //增加
plus(){ plus(){
this.dialog.save = true this.dialog.save = true
this.$nextTick(() => { this.$nextTick(() => {
if (this.operation.plus.remoteurl) { this.$refs.saveDialog.open().setData({}).setConfig({remoteurl:'/system/user/demo'})
setTimeout(async ()=>{ })
var res = await this.$http.get(this.operation.plus.remoteurl) },
if (res.code == 200 ) { //编辑
this.$refs.saveDialog.open('plus').setData(res.data); operationEdit(row){
return; this.dialog.save = true
} this.$nextTick(() => {
this.$alert(res.message, "提示", {type: 'error'}); this.$refs.saveDialog.open('edit').setData(row).setConfig(this.operation.edit)
}, 100)
return false;
}
this.$refs.saveDialog.open();
}) })
}, },
//打开统计 //打开统计
openStat(o){ openStat(o){
this.dialog.stat = true this.dialog.stat = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.statDialog.open().setData(o); this.$refs.xStat.open().setData(o);
})
},
//编辑
operationEdit(row,index){
this.dialog.save = true
this.$nextTick(() => {
if (this.operation.edit.remoteurl) {
setTimeout(async ()=>{
var res = await this.$http.get(this.operation.edit.remoteurl, {[this.key]: row[this.key], index: index})
if (res.code == 200 ) {
this.$refs.saveDialog.open('edit').setData(res.data);
return;
}
this.$alert(res.message, "提示", {type: 'error'});
}, 100)
return false;
}
this.$refs.saveDialog.open('edit').setData(row)
}) })
}, },
//删除 //删除
@ -241,42 +242,6 @@
selectionChange(selection){ selectionChange(selection){
this.selection = selection; this.selection = selection;
}, },
//本地更新数据
handleSuccess(data, mode){
if (!this.operation.edit.url) {
this.$alert('没有编辑相关配置', "提示", {type: 'error'});
return;
}
this.$http.post(this.operation.edit.url, {type:mode, info:data}).then((res) => {
if (res.code == 200 ) {
if(mode=='plus'){
if (res.data) {
this.$refs.table.tableData.unshift(res.data)
}else{
this.$refs.table.reload({})
}
}else if(mode=='edit'){
if (res.data) {
this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
Object.assign(item, data, res.data)
})
}else{
this.$refs.table.refresh()
}
}
this.$refs.saveDialog.isSaveing = false;
this.$refs.saveDialog.visible = false;
this.$message.success(res.message || "操作成功")
return;
}
this.$alert(res.message, "提示", {type: 'error'});
})
}
} }
} }
</script> </script>

66
src/views/system/table/save.vue
View File

@ -1,66 +0,0 @@
<template>
<el-drawer :title="titleMap[mode]" v-model="visible" :size="960" destroy-on-close @closed="$emit('closed')">
<x-update v-model="info" :config="config"></x-update>
</el-drawer>
</template>
<script>
export default {
emits: ['success', 'closed'],
props: {
column: { type: Object, default: () => {} },
},
data() {
return {
loading: false,
mode: "plus",
titleMap: {
plus: '新增',
edit: '编辑'
},
info: {},
config: {
formItems : this.column,
labelPosition : "right",
labelWidth : "120px",
size : "medium",
},
visible: false,
isSaveing: false,
}
},
watch: {
column(){
this.config.column = this.column;
}
},
mounted() {
// this.config = {
// formItems : this.column,
// labelPosition : "right",
// labelWidth : "120px",
// size : "medium",
// }
},
methods: {
//显示
open(mode='add'){
this.mode = mode;
this.visible = true;
return this;
},
//表单提交方法
submit(){
this.$refs.formref.validate(async (valid) => {
if (valid) {
// this.isSaveing = true;
this.$emit('success', this.info, this.mode);
}
})
},
//表单注入数据
setData(info){
this.info = info;
},
}
}
</script>

6
src/views/vab/form.vue
View File

@ -48,7 +48,7 @@
labelWidth: '130px', labelWidth: '130px',
labelPosition: 'right', labelPosition: 'right',
size: 'medium', size: 'medium',
formItems: [ column: [
{ {
label: "ElementPlus", label: "ElementPlus",
component: "title", component: "title",
@ -385,8 +385,8 @@
this.form.name = "New Title" this.form.name = "New Title"
}, },
setConfig(){ setConfig(){
this.config.formItems[2].span = this.config.formItems[2].span==24?12:24 this.config.column[2].span = this.config.column[2].span==24?12:24
this.config.formItems[3].span = this.config.formItems[3].span==24?12:24 this.config.column[3].span = this.config.column[3].span==24?12:24
}, },
save(){ save(){
this.$refs.formref.validate((valid, obj) => { this.$refs.formref.validate((valid, obj) => {