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-20 18:58:16 +08:00
parent 73a876c235
commit 5108d419f2
6 changed files with 125 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/api/model/system.js
View File

@ -13,6 +13,9 @@ export default {
}, },
getUpdate: async function(name = '', data=[]) { getUpdate: async function(name = '', data=[]) {
return await http.post('/system/table/getUpdate', {name:name}, data); return await http.post('/system/table/getUpdate', {name:name}, data);
},
columnSettingSave: async function(name = '', column=[]) {
return await http.post('/system/table/columnSettingSave', {name:name, column:column});
} }
}, },
} }

63
src/components/xTable/columnSetting.vue
View File

@ -7,6 +7,8 @@
<span class="width_b">宽度</span> <span class="width_b">宽度</span>
<span class="sortable_b">排序</span> <span class="sortable_b">排序</span>
<span class="tabletype">表格类型</span> <span class="tabletype">表格类型</span>
<span class="tabletype">表单类型</span>
<span class="tablespan">表单跨度</span>
<span class="fixed_b">固定</span> <span class="fixed_b">固定</span>
</div> </div>
<div class="setting-column__list" ref="list"> <div class="setting-column__list" ref="list">
@ -29,6 +31,7 @@
</span> </span>
<span class="tabletype"> <span class="tabletype">
<el-select v-model="item.columntype" size="small" placeholder="选择"> <el-select v-model="item.columntype" size="small" placeholder="选择">
<el-option value="" key="" label=""> 请选择 </el-option>
<el-option value="avatar" key="avatar" label="用户"> 用户 </el-option> <el-option value="avatar" key="avatar" label="用户"> 用户 </el-option>
<el-option value="badge" key="badge" label="徽章"> 徽章 </el-option> <el-option value="badge" key="badge" label="徽章"> 徽章 </el-option>
<el-option value="imagegroup" key="imagegroup" label="图组"> 图组 </el-option> <el-option value="imagegroup" key="imagegroup" label="图组"> 图组 </el-option>
@ -40,6 +43,34 @@
<el-option value="components" key="components" label="自定义组件"> 自定义组件 </el-option> <el-option value="components" key="components" label="自定义组件"> 自定义组件 </el-option>
</el-select> </el-select>
</span> </span>
<span class="tabletype">
<el-select v-model="item.component" size="small" placeholder="选择">
<el-option value="" key="" label=""> 请选择 </el-option>
<el-option value="input" key="input" label="Input"> Input </el-option>
<el-option value="title" key="title" label="标题占位"> 标题占位 </el-option>
<el-option value="checkbox" key="checkbox" label="复选框"> 复选框 </el-option>
<el-option value="radio" key="radio" label="单选"> 单选 </el-option>
<el-option value="select" key="select" label="下拉"> 下拉 </el-option>
<el-option value="checkboxGroup" key="checkboxGroup" label="复组组合"> 复组组合 </el-option>
<el-option value="upload" key="upload" label="文件上传"> 文件上传 </el-option>
<el-option value="updatemultiple" key="updatemultiple" label="多文件上传"> 多文件上传 </el-option>
<el-option value="switch" key="switch" label="开关"> 开关 </el-option>
<el-option value="cascader" key="cascader" label="级联选择器"> 级联选择器 </el-option>
<el-option value="date" key="date" label="日期选择"> 日期选择 </el-option>
<el-option value="number" key="number" label="数字"> 数字 </el-option>
<el-option value="color" key="color" label="颜色选择"> 颜色选择 </el-option>
<el-option value="rate" key="rate" label="评分"> 评分 </el-option>
<el-option value="slider" key="slider" label="滑块"> 滑块 </el-option>
<el-option value="tableselect" key="tableselect" label="表格选择"> 表格选择 </el-option>
<el-option value="editor" key="editor" label="编辑器"> 编辑器 </el-option>
<el-option value="text" key="text" label="文本"> 文本 </el-option>
<el-option value="avatar" key="avatar" label="头像"> 头像 </el-option>
<el-option value="formtable" key="formtable" label="表单表格"> 表单表格 </el-option>
</el-select>
</span>
<span class="tablespan">
<el-input v-model="item.span" :disabled="!item.component" size="small" placeholder="表单跨度"></el-input>
</span>
<span class="fixed_b"> <span class="fixed_b">
<el-radio-group v-model="item.fixed" size="small"> <el-radio-group v-model="item.fixed" size="small">
<el-radio-button label="left">左</el-radio-button> <el-radio-button label="left">左</el-radio-button>
@ -51,6 +82,7 @@
</ul> </ul>
</div> </div>
<div class="setting-column__bottom"> <div class="setting-column__bottom">
<!-- <el-button @click="Rendering" type="warning" :disabled="isSave">渲染</el-button> -->
<el-button @click="backDefaul" :disabled="isSave">重置</el-button> <el-button @click="backDefaul" :disabled="isSave">重置</el-button>
<el-button @click="save" type="primary">保存</el-button> <el-button @click="save" type="primary">保存</el-button>
</div> </div>
@ -71,16 +103,16 @@
data() { data() {
return { return {
isSave: false, isSave: false,
usercolumn: JSON.parse(JSON.stringify(this.column||[])) usercolumn: this.column || []
} }
}, },
watch:{ watch:{
usercolumn: { // usercolumn: {
handler(){ // handler(){
this.$emit('userChange', this.usercolumn) // this.$emit('userChange', this.usercolumn)
}, // },
deep: true // deep: true
} // }
}, },
mounted() { mounted() {
this.usercolumn.length>0 && this.rowDrop() this.usercolumn.length>0 && this.rowDrop()
@ -100,6 +132,9 @@
} }
}) })
}, },
Rendering(){
this.$emit('userChange', this.usercolumn)
},
backDefaul(){ backDefaul(){
this.$emit('back', this.usercolumn) this.$emit('back', this.usercolumn)
}, },
@ -115,12 +150,13 @@
.setting-column__title {border-bottom: 1px solid #EBEEF5;padding-bottom:15px;} .setting-column__title {border-bottom: 1px solid #EBEEF5;padding-bottom:15px;}
.setting-column__title span {display: inline-block;font-weight: bold;color: #909399;font-size: 12px;} .setting-column__title span {display: inline-block;font-weight: bold;color: #909399;font-size: 12px;}
.setting-column__title span.move_b {width: 30px;margin-right:15px;} .setting-column__title span.move_b {width: 30px;margin-right:15px;}
.setting-column__title span.show_b {width: 60px;} .setting-column__title span.show_b {width: 58px;}
.setting-column__title span.name_b {width: 140px;} .setting-column__title span.name_b {width: 138px;}
.setting-column__title span.width_b {width: 60px;margin-right:15px;} .setting-column__title span.width_b {width: 72px;}
.setting-column__title span.tablespan {width: 100px;}
.setting-column__title span.sortable_b {width: 60px;} .setting-column__title span.sortable_b {width: 60px;}
.setting-column__title span.tabletype {width: 160px;} .setting-column__title span.tabletype {width: 120px;}
.setting-column__title span.fixed_b {width: 120px;} .setting-column__title span.fixed_b {width: 80px;}
.setting-column__list {max-height:314px;overflow: auto;} .setting-column__list {max-height:314px;overflow: auto;}
.setting-column__list li {list-style: none;margin:10px 0;display: flex;align-items: center;} .setting-column__list li {list-style: none;margin:10px 0;display: flex;align-items: center;}
.setting-column__list li>span {display: inline-block;font-size: 12px;} .setting-column__list li>span {display: inline-block;font-size: 12px;}
@ -128,8 +164,9 @@
.setting-column__list li span.show_b {width: 60px;} .setting-column__list li span.show_b {width: 60px;}
.setting-column__list li span.name_b {width: 140px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;cursor:default; padding-right:10px } .setting-column__list li span.name_b {width: 140px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;cursor:default; padding-right:10px }
.setting-column__list li span.width_b {width: 60px;margin-right:15px;} .setting-column__list li span.width_b {width: 60px;margin-right:15px;}
.setting-column__list li span.tablespan {width: 80px;margin-right:15px;}
.setting-column__list li span.sortable_b {width: 60px;} .setting-column__list li span.sortable_b {width: 60px;}
.setting-column__list li span.tabletype {width: 140px; padding-right:20px;} .setting-column__list li span.tabletype {width: 120px; padding-right:20px;}
.setting-column__list li span.fixed_b {width: 120px;} .setting-column__list li span.fixed_b {width: 120px;}
.setting-column__list li.ghost {opacity: 0.3;} .setting-column__list li.ghost {opacity: 0.3;}
.setting-column__bottom {border-top: 1px solid #EBEEF5;padding-top:15px;text-align: right;} .setting-column__bottom {border-top: 1px solid #EBEEF5;padding-top:15px;text-align: right;}

15
src/components/xTable/index.vue
View File

@ -19,9 +19,6 @@
</template> </template>
</el-table-column> </el-table-column>
</template> </template>
<el-table-column min-width="1"></el-table-column> <el-table-column min-width="1"></el-table-column>
<template #empty> <template #empty>
<el-empty :description="emptyText" :image-size="100"></el-empty> <el-empty :description="emptyText" :image-size="100"></el-empty>
@ -34,9 +31,9 @@
</div> </div>
<div class="xTable-do" v-if="!hideDo"> <div class="xTable-do" v-if="!hideDo">
<el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button> <el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
<el-popover v-if="columnSetting" placement="top" title="列设置" :width="690" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false"> <el-popover v-if="name" placement="top" title="列设置" :width="850" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false">
<template #reference> <template #reference>
<el-button icon="el-icon-set-up" circle style="margin-left:15px"></el-button> <el-button v-auths="['columnsetting']" icon="el-icon-set-up" circle style="margin-left:15px"></el-button>
</template> </template>
<columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="column"></columnSetting> <columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="column"></columnSetting>
</el-popover> </el-popover>
@ -279,19 +276,19 @@
this.$refs.columnSetting.isSave = true this.$refs.columnSetting.isSave = true
try { try {
await config.columnSettingSave(this.name, column) await config.columnSettingSave(this.name, column)
this.$message.success('保存成功')
this.$refs.columnSetting.isSave = false
}catch(error){ }catch(error){
this.$message.error('保存失败') this.$message.error('保存失败')
this.$refs.columnSetting.isSave = false this.$refs.columnSetting.isSave = false
} }
this.$message.success('保存成功')
this.$refs.columnSetting.isSave = false
}, },
//自定义列重置 //自定义列重置
async columnSettingBack(){ async columnSettingBack(){
this.$refs.columnSetting.isSave = true this.$refs.columnSetting.isSave = true
try { try {
const column = await config.columnSettingReset(this.name, this.column) await config.columnSettingReset(this.name, this.column)
this.column = column
this.$refs.columnSetting.column = JSON.parse(JSON.stringify(this.column||[])) this.$refs.columnSetting.column = JSON.parse(JSON.stringify(this.column||[]))
}catch(error){ }catch(error){
this.$message.error('重置失败') this.$message.error('重置失败')

20
src/config/table.js
View File

@ -1,5 +1,5 @@
//数据表格配置 //数据表格配置
import tool from '@/utils/tool' import api from '@/api'
export default { export default {
successCode: 200, //请求完成代码 successCode: 200, //请求完成代码
pageSize: 20, //表格每一页条数 pageSize: 20, //表格每一页条数
@ -28,11 +28,11 @@ export default {
*/ */
columnSettingSave: function(tablename, column) { columnSettingSave: function(tablename, column) {
return new Promise((resolve) => { return new Promise((resolve) => {
setTimeout(() => {
//这里为了演示使用了session和setTimeout演示，开发时应用数据请求
tool.session.set(tablename, column) api.system.table.columnSettingSave(tablename,column);
resolve(true)
}, 1000) resolve(true)
}) })
}, },
/** /**
@ -43,10 +43,10 @@ export default {
columnSettingReset: function(tablename, column) { columnSettingReset: function(tablename, column) {
return new Promise((resolve) => { return new Promise((resolve) => {
//这里为了演示使用了session和setTimeout演示，开发时应用数据请求 //这里为了演示使用了session和setTimeout演示，开发时应用数据请求
setTimeout(() => { // tool.session.remove(tablename)
tool.session.remove(tablename)
resolve(column) api.system.table.columnSettingSave(tablename,[]);
}, 1000) resolve(column)
}) })
} }
} }

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

@ -31,7 +31,17 @@
</el-header> </el-header>
<el-main class="nopadding"> <el-main class="nopadding">
<xTable ref="table" :tableColumn="column" :params="search" :columnSetting="columnSetting" :api="api" :row-key="key" @selection-change="selectionChange" :remoteSort="true" :remoteFilter="true" stripe> <xTable
ref="table"
:tableColumn="column"
:name="tablename"
:params="search"
:api="api"
:row-key="key"
@selection-change="selectionChange"
:remoteSort="true"
:remoteFilter="true" stripe
>
<el-table-column v-if="isselection" type="selection" width="50"></el-table-column> <el-table-column v-if="isselection" type="selection" width="50"></el-table-column>
<el-table-column :label="operation.label || '操作'" :width="operation.width || 124" :fixed="operation.fixed || 'right'" :align="operation.align || 'left'" v-if="operation.edit || operation.delete"> <el-table-column :label="operation.label || '操作'" :width="operation.width || 124" :fixed="operation.fixed || 'right'" :align="operation.align || 'left'" v-if="operation.edit || operation.delete">
<template #default="scope"> <template #default="scope">
@ -73,7 +83,6 @@
save: false, save: false,
stat: false, stat: false,
}, },
columnSetting:false,
isselection:true, isselection:true,
selection: [], selection: [],
column: [], column: [],

54
src/views/system/tablegen/column.vue
View File

@ -56,7 +56,7 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="添加请求" prop="plus"> <el-form-item label="添加请求" prop="plus">
<el-input v-model="form.operation.plus.url" placeholder="请求 URL"></el-input> <el-autocomplete style="width: 100%;" v-model="form.operation.plus.url" :fetch-suggestions="querySearchSubmit" clearable placeholder="请求 URL"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
@ -75,7 +75,7 @@
<el-col :span="8"> <el-col :span="8">
<el-form-item label="远程链接" prop="edit"> <el-form-item label="远程链接" prop="edit">
<el-input v-model="form.operation.plus.remoteurl" placeholder="远程链接, 添加此链接由远程配置调用"></el-input> <el-autocomplete style="width: 100%;" v-model="form.operation.plus.remoteurl" :fetch-suggestions="querySearchGet" clearable placeholder="远程链接, 添加此链接由远程配置调用"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -87,7 +87,7 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="编辑请求" prop="edit"> <el-form-item label="编辑请求" prop="edit">
<el-input v-model="form.operation.edit.url" placeholder="请求 URL"></el-input> <el-autocomplete style="width: 100%;" v-model="form.operation.edit.url" :fetch-suggestions="querySearchSubmit" clearable placeholder="请求 URL"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
@ -105,7 +105,7 @@
<el-col :span="8"> <el-col :span="8">
<el-form-item label="远程链接" prop="edit"> <el-form-item label="远程链接" prop="edit">
<el-input v-model="form.operation.edit.remoteurl" placeholder="远程链接, 添加此链接由远程配置调用"></el-input> <el-autocomplete style="width: 100%;" v-model="form.operation.edit.remoteurl" :fetch-suggestions="querySearchGet" clearable placeholder="远程链接, 添加此链接由远程配置调用"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -117,7 +117,7 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="下架请求" prop="delete"> <el-form-item label="下架请求" prop="delete">
<el-input v-model="form.operation.delete.url" placeholder="请求 URL"></el-input> <el-autocomplete style="width: 100%;" v-model="form.operation.delete.url" :fetch-suggestions="querySearchDelete" clearable placeholder="请求 URL"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
@ -143,7 +143,7 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="批量删除请求" prop="url"> <el-form-item label="批量删除请求" prop="url">
<el-input v-model="form.operation.batchdeletion.url" placeholder="请求 URL"></el-input> <el-autocomplete style="width: 100%;" v-model="form.operation.batchdeletion.url" :fetch-suggestions="querySearchDelete" clearable placeholder="请求 URL"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
@ -189,6 +189,22 @@
</template> </template>
</el-table-column> </el-table-column>
</x-form-table> </x-form-table>
<div style="padding-top:20px">
<el-row :gutter="10" v-if="form.tabs && form.tabs.length>0">
<el-col :span="6">
<el-form-item label="tabs主键" prop="label">
<el-input v-model="form.tabskey" placeholder="名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="默认值" prop="url">
<el-input v-model="form.tabsdefaultvalue" placeholder="默认值"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<x-title title="筛选条件"></x-title> <x-title title="筛选条件"></x-title>
<x-form-table v-model="form.filter" :addTemplate="addfilterTemplate" drag-sort placeholder="暂无数据"> <x-form-table v-model="form.filter" :addTemplate="addfilterTemplate" drag-sort placeholder="暂无数据">
@ -322,15 +338,14 @@
<el-input v-model="scope.row.width" :disabled="scope.row.component=='title'" placeholder="宽"></el-input> <el-input v-model="scope.row.width" :disabled="scope.row.component=='title'" placeholder="宽"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column prop="options" label="选项" width="80" align="center">
<el-table-column prop="options" label="选项" width="80" align="center">
<template #default="scope"> <template #default="scope">
<el-button text size="small" :type="Object.keys(scope.row.options).length==0?'':'primary'" @click="setoptions(scope.row)"> <el-button text size="small" :type="Object.keys(scope.row.options).length==0?'':'primary'" @click="setoptions(scope.row)">
选项 选项
<el-badge :hidden="Object.keys(scope.row.options).length==0" :value="Object.keys(scope.row.options).length" class="badge" type="danger"></el-badge> <el-badge :hidden="Object.keys(scope.row.options).length==0" :value="Object.keys(scope.row.options).length" class="badge" type="danger"></el-badge>
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column> -->
</x-form-table> </x-form-table>
</el-form> </el-form>
</el-main> </el-main>
@ -423,6 +438,27 @@
}, },
methods: { methods: {
querySearchSubmit(queryString, cb){
if (this.form.api) {
var lastIndex = this.form.api.lastIndexOf('/');
var updatedUrl = this.form.api.substring(0, lastIndex + 1) + 'submit';
cb([{value: updatedUrl}])
}
},
querySearchGet(queryString, cb){
if (this.form.api) {
var lastIndex = this.form.api.lastIndexOf('/');
var updatedUrl = this.form.api.substring(0, lastIndex + 1) + 'info';
cb([{value: updatedUrl}])
}
},
querySearchDelete(queryString, cb){
if (this.form.api) {
var lastIndex = this.form.api.lastIndexOf('/');
var updatedUrl = this.form.api.substring(0, lastIndex + 1) + 'delete';
cb([{value: updatedUrl}])
}
},
//显示 //显示
open(mode='add'){ open(mode='add'){
this.mode = mode; this.mode = mode;