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-13 08:44:51 +08:00
parent de63efb81d
commit 0058f9ddbd
6 changed files with 94 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/xTable/columnItem.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<x-avatar v-if="item.columntype=='avatar' || item.component=='avatar'" :name="item.name" :options="item.options" v-model="row"></x-avatar>
<el-badge v-else-if="item.columntype=='badge'" :value="row[item.name]" :type="item.options.type || 'warning'"></el-badge>
<el-tag style="border: none; background: none;" v-else-if="item.columntype=='tag'" v-time.tip="row[item.name]"></el-tag>
<el-badge v-else-if="item.columntype=='imagegroup'" :value="row[item.name].length" :type="item.options.type || 'warning'"></el-badge>
<el-image v-else-if="item.columntype=='image'" hide-on-click-modal="true" lazy="true" style="width: 30px; height: 30px" fit="cover" :src="getImg(row[item.name])">
<template #error>
<div class="image-slot">
无图
</div>
</template>
</el-image>
<p v-else-if="item.columntype=='status'">
<x-status-indicator v-for="op in item.options.items" :key="op.value" pulse :type="op.type || 'success'" :label="op.label" v-show="op.value==row[item.name]">
</x-status-indicator>
</p>
<p v-else-if="item.columntype=='input'">
<input class="el-input__inner" type="text" readonly :value="row[item.name]">
</p>
<slot v-else-if="item.columntype=='select'" :name="item.name" v-bind="scope">
<p style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow:ellipsis;" :title="row[item.name]">
{{ getNameByValue( row[item.name], item.options.items) }}
</p>
</slot>
<slot v-else :name="item.name" v-bind="scope">
{{row[item.name]}}
</slot>
</template>
<script>
export default {
name: 'xTablecolumnitem',
props: {
item: { type: Object, default: () => {} },
modelValue: { type: Array, default: () => [] },
},
watch: {
},
computed: {
},
data() {
return {
row : this.modelValue
}
},
mounted() {
},
methods: {
getNameByValue (value, degrees) {
const degree = degrees.find(degree => degree.value === value);
return degree ? (degree.name?degree.name:degree.label) : value;
},
getImg(o){
if (!o) {
return ;
}
return typeof o === 'string'? o : o.url;
},
}
}
</script>

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

@ -4,38 +4,24 @@
<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="xTable" :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 && item.name" :column-key="item.name" :label="item.label" :prop="item.name" :width="item.width || 'auto'" :min-width="item.minWidth || 'auto'" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
<template #default="scope">
<x-avatar v-if="item.columntype=='avatar' || item.component=='avatar'" :name="item.name" :options="item.options" v-model="scope.row"></x-avatar>
<el-badge v-else-if="item.columntype=='badge'" :value="scope.row[item.name]" :type="item.options.type || 'warning'"></el-badge>
<el-tag style="border: none; background: none;" v-else-if="item.columntype=='tag'" v-time.tip="scope.row[item.name]"></el-tag>
<el-badge v-else-if="item.columntype=='imagegroup'" :value="scope.row[item.name].length" :type="item.options.type || 'warning'"></el-badge>
<el-image v-else-if="item.columntype=='image'" hide-on-click-modal="true" lazy="true" style="width: 30px; height: 30px" fit="cover" :src="getImg(scope.row[item.name])">
<template #error>
<div class="image-slot">
无图
</div>
<el-table-column :align="item.align || 'left'" :label="item.label" v-if="item.column && item.column.length>0">
<el-table-column v-for="(items, indexs) in item.column" :key="indexs" :align="items.align || 'left'" :column-key="items.prop||items.name" :label="items.label" :prop="items.prop||items.name" :width="items.width || 'auto'" :min-width="items.minWidth || 'auto'" :sortable="items.sortable" :fixed="items.fixed" :filters="items.filters" :filter-method="remoteFilter||!items.filters?null:filterHandler" :show-overflow-tooltip="items.showOverflowTooltip">
<template #default="scope">
<columnItem v-model="scope.row" :item="items"> </columnItem>
</template>
</el-image>
<p v-else-if="item.columntype=='status'">
<x-status-indicator v-for="op in item.options.items" :key="op.value" pulse :type="op.type || 'success'" :label="op.label" v-show="op.value==scope.row[item.name]">
</x-status-indicator>
</p>
<p v-else-if="item.columntype=='input'">
<input class="el-input__inner" type="text" readonly :value="scope.row[item.name]">
</p>
<slot v-else-if="item.columntype=='select'" :name="item.name" v-bind="scope">
<p style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow:ellipsis;" :title="scope.row[item.name]">
{{ getNameByValue( scope.row[item.name], item.options.items) }}
</p>
</slot>
<slot v-else :name="item.name" v-bind="scope">
{{scope.row[item.name]}}
</slot>
</el-table-column>
</el-table-column>
<el-table-column v-else-if="!item.hide" :align="item.align || 'left'" :column-key="item.prop||item.name" :label="item.label" :prop="item.prop||item.name" :width="item.width || 'auto'" :min-width="item.minWidth || 'auto'" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
<template #default="scope">
<columnItem v-model="scope.row" :item="item"> </columnItem>
</template>
</el-table-column>
</template>
<el-table-column min-width="1"></el-table-column>
<template #empty>
<el-empty :description="emptyText" :image-size="100"></el-empty>
@ -91,11 +77,13 @@
<script>
import config from "@/config/table";
import columnSetting from './columnSetting'
import columnItem from './columnItem'
export default {
name: 'xTable',
components: {
columnSetting
columnSetting,
columnItem,
},
props: {
name: { type: String, default: "" },
@ -194,16 +182,6 @@
this.isActivat = false;
},
methods: {
getNameByValue (value, degrees) {
const degree = degrees.find(degree => degree.value === value);
return degree ? (degree.name?degree.name:degree.label) : value;
},
getImg(o){
if (!o) {
return ;
}
return typeof o === 'string'? o : o.url;
},
//获取数据
async getData(){
this.loading = true;

2
src/views/system/log/index.vue
View File

@ -121,7 +121,7 @@
data: [
[{id:1}]
],
apiObj: this.$api.system.log.list,
// apiObj: this.$api.system.log.list,
search: {
keyword: ""
}

5
src/views/system/stat/index.vue
View File

@ -25,8 +25,9 @@
</el-row>
</div>
</el-card>
<el-card shadow="never" v-if="table && table.column.length>0">
<xTable ref="table" :data="table.data" :api="table.api" :tableColumn="table.column" :hideDo="table.hideDo || true" :hidePagination="table.hidePagination || true" show-summary :height="table.height || 'auto'">
<el-card shadow="never" v-if="table && table.column.length>0" style="margin-bottom: 0px;">
<xTable stripe ref="table" :data="table.data" :api="table.api" :tableColumn="table.column" :hideDo="table.hideDo || true" :hidePagination="table.hidePagination || true" show-summary :height="table.height || 'auto'">
<el-table-column type="index" width="50" fixed />
</xTable>
</el-card>
</el-main>

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

@ -19,8 +19,8 @@
<el-button v-if="operation.plus" type="primary" icon="el-icon-plus" @click="plus"></el-button>
<el-button v-if="operation.batchdeletion" type="danger" @click="batchdeletion" plain icon="el-icon-delete"></el-button>
</div>
<div class="right-panel" v-if="filter.length>0">
<el-button v-for="(s,index) in statList" :key="index" @click="openStat(s)" v-bind="s">{{ s.label }}</el-button>
<div class="right-panel" v-if="filter.length>0 || stat.length>0">
<el-button v-for="(s,index) in stat" :key="index" @click="openStat(s)" v-bind="s">{{ s.label }}</el-button>
<xFilterBar v-if="filter.length>0" v-model="search" :filterName="$route.meta.tablename" :options="filter" @filterChange="filterChange">
</xFilterBar>
</div>
@ -50,7 +50,7 @@
</el-container>
</el-container>
<x-update v-if="dialog.save" :column="column" :name="key" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></x-update>
<x-dialog v-if="dialog.stat" ref="xStat" @closed="dialog.stat=false"></x-dialog>
<x-stat v-if="dialog.stat" ref="xstatdialog" @closed="dialog.stat=false"></x-stat>
</template>
<script>
@ -91,7 +91,7 @@
tabs: [
// {label:'所有', value:0},
],
statList:[],
stat:[],
chartoption: {},
tablename: this.$route.meta.tablename,
groupFilterText:''
@ -194,7 +194,7 @@
openStat(o){
this.dialog.stat = true
this.$nextTick(() => {
this.$refs.xStat.open().setData(o);
this.$refs.xstatdialog.open().setData(o);
})
},
//删除

2
src/views/system/table/stat.vue
View File

@ -1,5 +1,5 @@
<template>
<el-drawer :title="info.title" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
<el-drawer :title="info.title || info.label" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
<stat :name="info.value || info.name"></stat>
</el-drawer>
</template>