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-06-20 19:03:48 +08:00
parent 8f5aebb5f9
commit 2e0caf02ac
5 changed files with 121 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@
<template v-for="(item, index) in config.formItems" :key="index">
<el-col :span="item.span || 24" v-if="!hideHandle(item)">
<sc-title v-if="item.component=='title'" :title="item.label"></sc-title>
<el-form-item v-else :prop="item.name" :rules="rulesHandle(item)">
<el-form-item v-else-if="item.component" :prop="item.name" :rules="rulesHandle(item)">
<template #label>
{{item.label}}
<el-tooltip v-if="item.tips" :content="item.tips">
@ -40,63 +40,66 @@
</template>
</template>
<!-- checkboxGroup -->
<template v-else-if="item.component=='checkboxGroup'" >
<template v-else-if="item.component=='checkboxGroup'">
<el-checkbox-group v-model="form[item.name]">
<el-checkbox v-for="_item in item.options.items" :key="_item.value" :label="_item.value">{{_item.label}}</el-checkbox>
</el-checkbox-group>
</template>
<!-- upload -->
<template v-else-if="item.component=='upload'" >
<sc-upload v-model="form[item.name]" :width="item.options.width" :height="item.options.height"></sc-upload>
<template v-else-if="item.component=='upload'">
<sc-upload v-model="form[item.name]" :width="item.options.width || 100" :height="item.options.height || 100"></sc-upload>
</template>
<!-- switch -->
<template v-else-if="item.component=='switch'" >
<template v-else-if="item.component=='switch'">
<el-switch v-model="form[item.name]" :active-value="item.options.activevalue || 1" :inactive-value="item.options.inactivevalue || 0" />
</template>
<!-- select -->
<template v-else-if="item.component=='select'" >
<template v-else-if="item.component=='select'">
<el-select v-model="form[item.name]" :multiple="item.options.multiple" :placeholder="item.options.placeholder" clearable filterable style="width: 100%;">
<el-option v-for="option in item.options.items" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</template>
<!-- cascader -->
<template v-else-if="item.component=='cascader'" >
<template v-else-if="item.component=='cascader'">
<el-cascader v-model="form[item.name]" :options="item.options.items" clearable></el-cascader>
</template>
<!-- date -->
<template v-else-if="item.component=='date'" >
<template v-else-if="item.component=='date'">
<el-date-picker v-model="form[item.name]" :type="item.options.type" :shortcuts="item.options.shortcuts" :default-time="item.options.defaultTime" :value-format="item.options.valueFormat" :placeholder="item.options.placeholder || '请选择'"></el-date-picker>
</template>
<!-- number -->
<template v-else-if="item.component=='number'" >
<template v-else-if="item.component=='number'">
<el-input-number v-model="form[item.name]" controls-position="right"></el-input-number>
</template>
<!-- radio -->
<template v-else-if="item.component=='radio'" >
<template v-else-if="item.component=='radio'">
<el-radio-group v-model="form[item.name]">
<el-radio v-for="_item in item.options.items" :key="_item.value" :label="_item.value">{{_item.label}}</el-radio>
</el-radio-group>
</template>
<!-- color -->
<template v-else-if="item.component=='color'" >
<template v-else-if="item.component=='color'">
<el-color-picker v-model="form[item.name]" />
</template>
<!-- rate -->
<template v-else-if="item.component=='rate'" >
<template v-else-if="item.component=='rate'">
<el-rate style="margin-top: 6px;" v-model="form[item.name]"></el-rate>
</template>
<!-- slider -->
<template v-else-if="item.component=='slider'" >
<template v-else-if="item.component=='slider'">
<el-slider v-model="form[item.name]" :marks="item.options.marks"></el-slider>
</template>
<!-- tableselect -->
<template v-else-if="item.component=='tableselect'" >
<template v-else-if="item.component=='tableselect'">
<tableselect-render v-model="form[item.name]" :item="item"></tableselect-render>
</template>
<!-- editor -->
<template v-else-if="item.component=='editor'" >
<template v-else-if="item.component=='editor'">
<sc-editor v-model="form[item.name]" placeholder="请输入" :height="400"></sc-editor>
</template>
<template v-else-if="item.component=='text'">
<el-text type="info">{{ form[item.name] }}</el-text>
</template>
<!-- noComponent -->
<template v-else>
<el-tag type="danger">[{{item.component}}] Component not found</el-tag>

83
src/components/scTable/index.vue
View File

@ -4,10 +4,10 @@
<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
<slot></slot>
<template v-for="(item, index) in column" :key="index">
<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
<el-table-column v-if="!item.hide && item.name" :column-key="item.name" :label="item.label" :prop="item.name" :width="item.width || 150" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
<template #default="scope">
<slot :name="item.prop" v-bind="scope">
{{scope.row[item.prop]}}
<slot :name="item.name" v-bind="scope">
{{scope.row[item.name]}}
</slot>
</template>
</el-table-column>
@ -65,6 +65,7 @@
props: {
name: { type: String, default: "" },
tableColumn: { type: Object, default: () => {} },
api: { type: Object, default: () => {} },
apiObj: { type: Object, default: () => {} },
params: { type: Object, default: () => ({}) },
data: { type: Object, default: () => {} },
@ -96,6 +97,10 @@
this.tableParams = this.params;
this.refresh();
},
api(){
this.tableParams = this.params;
this.refresh();
},
tableColumn(){
this.column = this.tableColumn;
}
@ -112,7 +117,6 @@
return {
scPageSize: this.pageSize,
isActivat: true,
api: '',
emptyText: "暂无数据",
toggleIndex: 0,
tableData: [],
@ -131,29 +135,13 @@
size: this.size,
border: this.border,
stripe: this.stripe
}
},
}
},
mounted() {
//判断是否开启自定义列
if(this.name) {
this.$http.get(config.configUrl, { name: this.name }, { cache:0 }).then((res) => {
if (res.code == 200) {
Object.assign(this.$data, res.data);
if (typeof res.data.api !== 'undefined' && res.data.api) {
this.api = res.data.api;
this.getData();
}
}
});
}else{
this.column = this.tableColumn
}
this.column = this.tableColumn
//判断是否静态数据
if(this.apiObj){
if(this.apiObj || this.api){
this.getData();
}else if(this.data){
this.tableData = this.data;
@ -185,37 +173,38 @@
Object.assign(reqData, this.tableParams)
try {
var xawait = this.api ? this.$http.get(this.api, reqData) : this.apiObj(reqData);
xawait.then((res) => {
try {
var response = config.parseData(res);
}catch(error){
this.loading = false;
this.emptyText = "数据格式错误";
return false;
}
var res = this.api? await this.$http.get(this.api, reqData):await this.apiObj(reqData);
if(response.code != config.successCode){
this.loading = false;
this.emptyText = response.message;
}else{
this.emptyText = "暂无数据";
this.tableData = (this.hidePagination? response.data:response.rows) || [];
this.total = response.total || 0;
this.summary = response.summary || {};
this.loading = false;
}
// this.$refs.scTable.setScrollTop(0)
// 回调
this.$emit('dataChange', res, this.tableData)
});
}catch(error){
this.loading = false;
this.emptyText = error.statusText;
return false;
}
try {
var response = config.parseData(res);
}catch(error){
this.loading = false;
this.emptyText = "数据格式错误";
return false;
}
if(response.code != config.successCode){
this.loading = false;
this.emptyText = response.msg;
}else{
this.emptyText = "暂无数据";
if(this.hidePagination){
this.tableData = response.data || [];
}else{
this.tableData = response.rows || [];
}
this.total = response.total || 0;
this.summary = response.summary || {};
this.loading = false;
}
this.$refs.scTable.setScrollTop(0)
this.$emit('dataChange', res, this.tableData)
},
//分页点击
paginationChange(){

2
src/config/table.js
View File

@ -11,7 +11,7 @@ export default {
rows: res.data.data, //分析行数据字段结构
total: res.data.count, //分析总数字段结构
summary: res.data.summary, //分析合计行字段结构
msg: res.message, //分析描述字段结构
message: res.message, //分析描述字段结构
code: res.code //分析状态字段结构
}
},

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

@ -6,19 +6,39 @@
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :name="tablename" row-key="id" @selection-change="selectionChange" stripe>
<scTable ref="table" :tableColumn="column" :api="api" row-key="id" @selection-change="selectionChange" :remoteSort="true" :remoteFilter="true" stripe>
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="头像" width="80" column-key="filterAvatar" :filters="[{text: '已上传', value: '1'}, {text: '未上传', value: '0'}]">
<template #default="scope">
<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
</template>
</el-table-column>
<el-table-column min-width="1" label="操作" :width="(Object.keys(operation).length*50)+22" fixed="right" align="left" v-if="Object.keys(operation).length>0">
<template #default="scope">
<el-button-group>
<el-button v-if="operation.edit" type="primary" size="small" @click="table_edit(scope.row, scope.$index)">{{ operation.edit.name || '编辑' }}</el-button>
<el-popconfirm v-if="operation.delete" :title="operation.delete.title || '确定删除吗？'" @confirm="table_del(scope.row, scope.$index)">
<template #reference>
<el-button type="info" size="small">{{ operation.delete.name || '删除' }}</el-button>
</template>
</el-popconfirm>
</el-button-group>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
<save-dialog v-if="dialog.save" :column="column" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
import saveDialog from './save'
export default {
name: 'tableSetting',
name: 'propertyAuth',
components: {
saveDialog
},
@ -27,13 +47,26 @@
dialog: {
save: false
},
apiObj: this.$api.system.table.list,
selection: [],
tablename: this.$route.meta.tablename || '',
column: [],
api: '',
operation:{
// delete:'1',
// edit:'1',
}
}
},
mounted() {
//判断是否开启自定义列
if(this.$route.meta.tablename) {
this.$http.get('system/table/get', { name: this.$route.meta.tablename }, { cache:0 }).then((res) => {
if (res.code == 200) {
Object.assign(this.$data, res.data);
}
});
}
},
methods: {
//增加

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

@ -2,97 +2,22 @@
<el-drawer :title="titleMap[mode]" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
<el-container v-loading="loading">
<el-main style="padding:0 20px 20px 20px">
<el-form ref="dialogForm" :model="form" :rules="rules" label-width="100px" label-position="top">
<sc-title title="基础"></sc-title>
<el-row :gutter="20">
<el-col :span="16">
<el-form-item label="表格名称" prop="name">
<el-input v-model="form.name" placeholder="请输入中文描述标题"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="标识" prop="code">
<el-input v-model="form.code" placeholder="请输入唯一标识"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-checkbox v-model="form.remoteSort" label="远程排序"></el-checkbox>
<el-checkbox v-model="form.remoteFilter" label="远程过滤"></el-checkbox>
</el-form-item>
<sc-title title="表格列"></sc-title>
<el-form-item prop="column">
<sc-form-table v-model="form.column" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
<el-table-column prop="label" label="名称">
<template #default="scope">
<el-input v-model="scope.row.label" placeholder="请输入名称"></el-input>
</template>
</el-table-column>
<el-table-column prop="prop" label="字段" width="150">
<template #default="scope">
<el-input v-model="scope.row.prop" placeholder="请输入字段"></el-input>
</template>
</el-table-column>
<el-table-column prop="width" label="宽度" width="100">
<template #default="scope">
<el-input v-model="scope.row.width" placeholder="请输入宽度"></el-input>
</template>
</el-table-column>
<el-table-column prop="hide" label="隐藏" width="80" align="center">
<template #default="scope">
<el-checkbox v-model="scope.row.hide"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="sortable" label="排序" width="80" align="center">
<template #default="scope">
<el-checkbox v-model="scope.row.sortable"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="filters" label="过滤项" width="90" align="center">
<template #default="scope">
<el-button text size="small" :type="scope.row.filters.length==0?'':'primary'" @click="setFilters(scope.row.filters)">过滤项</el-button>
</template>
</el-table-column>
<el-table-column prop="fixed" label="固定" width="80" align="center">
<template #default="scope">
<el-checkbox v-model="scope.row.fixed"></el-checkbox>
</template>
</el-table-column>
</sc-form-table>
</el-form-item>
</el-form>
<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-drawer title="过滤项配置" v-model="setFiltersVisible" :size="500" destroy-on-close>
<el-main style="padding:0 20px 20px 20px">
<sc-form-table v-model="selectionFilters" :addTemplate="filtersAddTemplate" drag-sort placeholder="暂无数据">
<el-table-column prop="text" label="名称">
<template #default="scope">
<el-input v-model="scope.row.text" placeholder="请输入名称"></el-input>
</template>
</el-table-column>
<el-table-column prop="value" label="值" width="150">
<template #default="scope">
<el-input v-model="scope.row.value" placeholder="请输入值"></el-input>
</template>
</el-table-column>
</sc-form-table>
</el-main>
</el-drawer>
</el-drawer>
</template>
<script>
export default {
emits: ['success', 'closed'],
props: {
column: { type: Object, default: () => {} },
},
data() {
return {
loading: false,
@ -101,24 +26,7 @@
add: '新增',
edit: '编辑'
},
form: {},
rules: {
name: [
{required: true, message: '请输入表格名称', trigger: 'blur'}
],
code: [
{required: true, message: '请输入唯一标识', trigger: 'blur'}
]
},
addTemplate: {
label: '',
prop: '',
width: '100',
hide: false,
sortable: false,
fixed: false,
filters: []
},
info: {},
visible: false,
isSaveing: false,
selectionFilters: [],
@ -129,8 +37,18 @@
setFiltersVisible: false
}
},
watch: {
column(){
this.config.column = this.column;
}
},
mounted() {
this.config = {
formItems : this.column,
labelPosition : "right",
labelWidth : "120px",
size : "medium",
}
},
methods: {
//显示
@ -141,7 +59,7 @@
},
//表单提交方法
submit(){
this.$refs.dialogForm.validate(async (valid) => {
this.$refs.formref.validate(async (valid) => {
if (valid) {
this.isSaveing = true;
var res = await this.$api.demo.post.post(this.form);
@ -157,17 +75,17 @@
})
},
//表单注入数据
setData(data){
this.loading = true
const params = {
id: data.id
}
setTimeout(async ()=>{
var res = await this.$api.system.table.info.get(params)
this.loading = false
this.form = res.data
},400)
setData(info){
this.info = info;
// this.loading = true
// const params = {
// id: data.id
// }
// setTimeout(async ()=>{
// var res = await this.$api.system.table.info.get(params)
// this.loading = false
// this.form = res.data
// },400)
},
//设置过滤项
setFilters(filters){