no message
This commit is contained in:
parent
47a0e32d41
commit
82dd3ebb0b
@ -3,7 +3,7 @@
|
||||
-->
|
||||
<template>
|
||||
<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" :size="config.size || 'default'" :label-position="config.labelPosition" v-loading="loading" element-loading-text="Loading...">
|
||||
<el-row :gutter="15">
|
||||
<template v-for="(item, index) in config.column" :key="index">
|
||||
<el-col :span="item.span || 24" v-if="!hideHandle(item)">
|
||||
|
||||
162
src/components/xTabledialog/index.vue
Normal file
162
src/components/xTabledialog/index.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<!--
|
||||
* @Descripttion: 表格窗口
|
||||
*
|
||||
-->
|
||||
<template>
|
||||
<div class="x-tabledialog">
|
||||
|
||||
<component :is="componentType" :title="(config.name || titleMap[mode]) || '编辑'" v-model="visible" :size="size" :style="style" @closed="$emit('closed')" width="80%">
|
||||
<div style="padding:0 6px 6px 6px" class="pagetable">
|
||||
<xTable
|
||||
ref="table"
|
||||
:tableColumn="column"
|
||||
:name="tablename"
|
||||
:params="search"
|
||||
api="app/url/lists"
|
||||
:row-key="key"
|
||||
:remoteSort="true"
|
||||
:remoteFilter="true"
|
||||
:hideDo="true"
|
||||
:hideRefresh="true"
|
||||
:hideSetting="true"
|
||||
:hidePagination="true"
|
||||
:height="contentHeight"
|
||||
border
|
||||
stripe>
|
||||
|
||||
<el-table-column prop="msg" label="msg" width="800" />
|
||||
<el-table-column prop="id" label="Name" width="180" />
|
||||
<el-table-column prop="address" label="Address" width="500" />
|
||||
|
||||
|
||||
</xTable>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-pagination
|
||||
style="float: right;"
|
||||
background
|
||||
layout="consists,prev,pager,next"
|
||||
:total="1000"
|
||||
:page-size="100"
|
||||
:page-sizes="100" />
|
||||
</template>
|
||||
</component>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.x-tabledialog /deep/ .el-table th.el-table__cell{
|
||||
background-color: #f6f8fa;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['success', 'closed'],
|
||||
props: {
|
||||
column: { type: Array, default: () => [] },
|
||||
name: { type: String, default: "id" },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
mode: "plus",
|
||||
token: '',
|
||||
key: this.name,
|
||||
titleMap: {
|
||||
plus: '新增',
|
||||
edit: '编辑'
|
||||
},
|
||||
data: {},
|
||||
style: {},
|
||||
config: {
|
||||
column : this.column,
|
||||
labelPosition : "right",
|
||||
labelWidth : "120px",
|
||||
size : "medium",
|
||||
url:'',
|
||||
submitname:'保存'
|
||||
},
|
||||
size:900,
|
||||
visible: true,
|
||||
isSaveing: false,
|
||||
type:'drawer',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
column(){
|
||||
this.config.column = this.column;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
componentType() {
|
||||
return this.type == 'drawer' ? 'el-drawer' : 'x-dialog';
|
||||
},
|
||||
contentHeight(){
|
||||
return document.documentElement.clientHeight - (this.type == 'drawer' ? '124' : 230);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getComponentType(type) {
|
||||
this.type = type;
|
||||
return this;
|
||||
},
|
||||
// 显示
|
||||
open(mode='plus'){
|
||||
this.mode = mode;
|
||||
this.visible = true;
|
||||
return this;
|
||||
},
|
||||
// 配置
|
||||
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
|
||||
}
|
||||
|
||||
if (res.data.size) {
|
||||
this.size = res.data.size
|
||||
}
|
||||
|
||||
if (res.data.type && res.data.type !== this.type) {
|
||||
this.getComponentType(res.data.type)
|
||||
}
|
||||
|
||||
if (res.data.style) {
|
||||
this.style = res.data.style;
|
||||
}
|
||||
return;
|
||||
}
|
||||
this.$alert(res.message, "提示", {type: 'error'});
|
||||
}, 100)
|
||||
return false;
|
||||
}
|
||||
},
|
||||
// 表单注入数据
|
||||
setData(data){
|
||||
this.data = data;
|
||||
return this;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -31,13 +31,9 @@
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-main>
|
||||
|
||||
<el-footer>
|
||||
<el-button type="primary" @click="submit" style="max-width: 500px; width: 100%;" :loading="submitloading">保存</el-button>
|
||||
</el-footer>
|
||||
|
||||
|
||||
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
@ -65,6 +61,8 @@
|
||||
|
||||
.setting /deep/ .el-tabs__content{
|
||||
padding: 20px;
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.setting /deep/ .el-tabs {
|
||||
|
||||
@ -50,50 +50,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-dialog v-model="dialogVisible" width="80%" title="fdsafa">
|
||||
<div style="padding:0 6px 6px 6px" class="pagetable">
|
||||
<xTable
|
||||
ref="table"
|
||||
:tableColumn="column"
|
||||
:name="tablename"
|
||||
:params="search"
|
||||
api="app/url/lists"
|
||||
:row-key="key"
|
||||
:remoteSort="true"
|
||||
:remoteFilter="true"
|
||||
:hideDo="true"
|
||||
:hideRefresh="true"
|
||||
:hideSetting="true"
|
||||
:hidePagination="true"
|
||||
:height="contentHeight"
|
||||
border
|
||||
stripe>
|
||||
|
||||
<el-table-column prop="msg" label="msg" width="800" />
|
||||
<el-table-column prop="id" label="Name" width="180" />
|
||||
<el-table-column prop="address" label="Address" width="500" />
|
||||
|
||||
|
||||
</xTable>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-pagination
|
||||
style="float: right;"
|
||||
background
|
||||
layout="consists,prev,pager,next"
|
||||
:total="1000"
|
||||
:page-size="100"
|
||||
:page-sizes="100" />
|
||||
</template>
|
||||
</x-dialog>
|
||||
<xTabledialog v-model="dialogVisible"></xTabledialog>
|
||||
</template>
|
||||
<style scoped>
|
||||
.pagetable /deep/ .el-table th.el-table__cell{
|
||||
background-color: #f6f8fa;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import xMenuItem from '@/components/xMenu/item'
|
||||
@ -114,8 +72,8 @@ export default {
|
||||
loading: false,
|
||||
dialogVisible: true,
|
||||
leftType: '',
|
||||
// contentHeight: document.documentElement.clientHeight - 124,
|
||||
contentHeight: document.documentElement.clientHeight - 230,
|
||||
contentHeight: document.documentElement.clientHeight - 124,
|
||||
// contentHeight: document.documentElement.clientHeight - 230,
|
||||
info: {},
|
||||
leftSides: [
|
||||
{
|
||||
|
||||
2
src/x.js
2
src/x.js
@ -18,6 +18,7 @@ import xUser from './components/xUser'
|
||||
import xAvatar from './components/xAvatar'
|
||||
import xUpdate from './components/xUpdate'
|
||||
import xTitle from './components/xTitle'
|
||||
import xTabledialog from './components/xTabledialog'
|
||||
import xForm from './components/xForm'
|
||||
import xFormTable from './components/xFormTable'
|
||||
import xFilterBar from './components/xFilterBar'
|
||||
@ -69,6 +70,7 @@ export default {
|
||||
app.component('xSelect', xSelect);
|
||||
app.component('xDialog', xDialog);
|
||||
app.component('xTitle', xTitle);
|
||||
app.component('xTabledialog', xTabledialog);
|
||||
app.component('xWaterMark', xWaterMark);
|
||||
app.component('xQrCode', xQrCode);
|
||||
app.component('xStatusIndicator', xStatusIndicator);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user