Skip to content

V
vue-gjjs
Commit 3cb5b067 by lixingliang
Options

Merge branch 'master' of http://114.115.138.98:8900/fukai/vue-gjjs

parents 6c849db7 82d239cf
Showing with 391 additions and 166 deletions
src/components/Table.vue
<template>
<div class="eContainer-table-block">
<el-table :id="tableRef" :data="list" ref="table" style="width: 100%" class="eContainer-table" :header-cell-style="{background: 'eef1f6', color: '#606266'}"
v-bind="$attrs" v-on="tableListeners" v-loading="loading" :row-class-name="tableRowClass" :max-height="maxHeight"
>
<el-table
:id="tableRef"
:data="list"
ref="table"
style="width: 100%"
class="eContainer-table"
:header-cell-style="{ background: 'eef1f6', color: '#606266' }"
v-bind="$attrs"
v-on="tableListeners"
v-loading="loading"
:max-height="maxHeight"
>
<el-table-column
v-for="(item, key) in columnsConfig"
:key="key"
......@@ -13,7 +22,7 @@
<el-pagination
class="eContainer-pagination"
v-if="paginationShow"
:background="type=='small'? false: true"
:background="type == 'small' ? false : true"
small
layout="prev, pager, next, jumper"
:page-size="limit"
......@@ -21,7 +30,9 @@
:total="total"
v-on="$listeners"
></el-pagination>
<div class="paginationLable" v-if="paginationShow">当前显示第 {{page1}}-{{page2}} 条，共 {{total}} 条</div>
<div class="paginationLable" v-if="paginationShow">
当前显示第 {{ page1 }}-{{ page2 }} 条，共 {{ total }} 条
</div>
</div>
</template>
......@@ -30,146 +41,152 @@ export default {
props: {
type: {
type: String,
default: 'normal'
default: "normal",
},
list: {
type: Array,
default: () => {
return []
}
return [];
},
},
columnsConfig: {
type: Array,
default: () => {
return []
}
return [];
},
},
total: {
type: Number,
default: 0
default: 0,
},
current: {
type: Number,
default: 0
default: 0,
},
limit: {
type: Number,
default: 0
default: 0,
},
outerHeight: {
type: Number,
default: undefined
default: undefined,
},
loading: {
type: Boolean,
default: false
default: false,
},
tableRowClassName: {
type: Function
type: Function,
},
maxHeight:{
maxHeight: {
type: String,
default:undefined
default: undefined,
},
paginationShow: {
type: Boolean,
required: false,
default: true
}
default: true,
},
},
data(){
return{
page1:'',
page2:'',
data() {
return {
page1: "",
page2: "",
tableListeners: {},
tableRef: 'tableRef' + Math.floor(Math.random() * 100)
}
tableRef: "tableRef" + Math.floor(Math.random() * 100),
};
},
watch: {
'current': function () {
this.getPageNum()
current: function () {
this.getPageNum();
},
'outerHeight': function () {
outerHeight: function () {
if (this.outerHeight !== undefined) {
window.removeEventListener('resize', this.handleResizeBind)
this.clientHeight = `${document.documentElement.clientHeight}`
this.changeFixed()
this.handleResizeBind = this.handleResize.bind(this, this.tableRef, this.outerHeight)
window.addEventListener('resize', this.handleResizeBind)
window.removeEventListener("resize", this.handleResizeBind);
this.clientHeight = `${document.documentElement.clientHeight}`;
this.changeFixed();
this.handleResizeBind = this.handleResize.bind(
this,
this.tableRef,
this.outerHeight
);
window.addEventListener("resize", this.handleResizeBind);
}
}
},
},
created() {
this.getPageNum()
this.tableListeners = {...this.$listeners}
delete this.tableListeners['current-change']
this.getPageNum();
this.tableListeners = { ...this.$listeners };
//delete this.tableListeners["current-change"];
},
mounted() {
if (this.outerHeight) {
this.clientHeight = `${document.documentElement.clientHeight}`
this.changeFixed()
this.handleResizeBind = this.handleResize.bind(this, this.tableRef, this.outerHeight)
window.addEventListener('resize', this.handleResizeBind)
this.clientHeight = `${document.documentElement.clientHeight}`;
this.changeFixed();
this.handleResizeBind = this.handleResize.bind(
this,
this.tableRef,
this.outerHeight
);
window.addEventListener("resize", this.handleResizeBind);
}
},
methods: {
changeFixed() {
let content = document.getElementById(this.tableRef)
let clientHeight = `${document.documentElement.clientHeight}`
let target
let content = document.getElementById(this.tableRef);
let clientHeight = `${document.documentElement.clientHeight}`;
let target;
for (let i = 0; i < content.children.length; i++) {
if (content.children[i].classList.contains('el-table__body-wrapper')) {
target = content.children[i]
if (content.children[i].classList.contains("el-table__body-wrapper")) {
target = content.children[i];
}
}
target.style.maxHeight = clientHeight - this.outerHeight + 'px'
target.style.maxHeight = clientHeight - this.outerHeight + "px";
},
handleResize: (tableRef, outerHeight) => {
let content = document.getElementById(tableRef)
let clientHeight = `${document.documentElement.clientHeight}`
let target
let content = document.getElementById(tableRef);
let clientHeight = `${document.documentElement.clientHeight}`;
let target;
for (let i = 0; i < content.children.length; i++) {
if (content.children[i].classList.contains('el-table__body-wrapper')) {
target = content.children[i]
if (content.children[i].classList.contains("el-table__body-wrapper")) {
target = content.children[i];
}
}
target.style.maxHeight = clientHeight - outerHeight + 'px'
},
getPageNum(){
if( this.current == Math.ceil(this.total/this.limit)){
this.page1 = this.current*this.limit-this.limit + 1
this.page2 = this.total
}else{
this.page1 = this.current*this.limit-this.limit + 1
this.page2 = this.current*this.limit
target.style.maxHeight = clientHeight - outerHeight + "px";
},
getPageNum() {
if (this.current == Math.ceil(this.total / this.limit)) {
this.page1 = this.current * this.limit - this.limit + 1;
this.page2 = this.total;
} else {
this.page1 = this.current * this.limit - this.limit + 1;
this.page2 = this.current * this.limit;
}
},
tableRowClass: function ({row, rowIndex}) {
tableRowClass: function ({ row, rowIndex }) {
if (this.tableRowClassName) {
return this.tableRowClassName({row, rowIndex})
return this.tableRowClassName({ row, rowIndex });
} else {
return ''
return "";
}
}
},
},
destroyed: function () {
if (this.outerHeight) {
window.removeEventListener('resize', this.handleResizeBind)
window.removeEventListener("resize", this.handleResizeBind);
}
},
}
};
</script>
<style>
.eContainer-table-block .paginationLable{
font-size: 12px;
color: #808080;
height: 26px;
line-height: 26px;
float:right;
margin-top:20px;
.eContainer-table-block .paginationLable {
font-size: 12px;
color: #808080;
height: 26px;
line-height: 26px;
float: right;
margin-top: 20px;
}
.eContainer-table-block .el-table__body-wrapper {
overflow: auto;
......
src/views/Business/Letopn/Doctre.vue
<template>
<div class="eibs-tab">
<c-col :span="12">
<el-form-item label="File Receiver" prop="trnmod.trndoc.filrecv">
<c-input v-model="model.trnmod.trndoc.filrecv" placeholder="请输入File Receiver"></c-input>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="Document tree" prop="trnmod.trndoc.doctrestm">
<c-input v-model="model.trnmod.trndoc.doctrestm" placeholder="请输入Document tree"></c-input>
</el-form-item>
</c-col>
<c-col :span="12">
<c-button size="small" type="primary" @click="onTrndocButshw">
Sho&w
</c-button>
</c-col>
<c-col :span="12">
<c-button size="small" type="primary" @click="onTrndocButadd">
D&etails
</c-button>
</c-col>
<c-col :span="12">
<c-button size="small" type="primary" @click="onTrndocButnew">
&Add New
</c-button>
</c-col>
<c-col :span="12">
<c-button size="small" type="primary" @click="onTrndocButattto">
Attach to
</c-button>
</c-col>
<c-col :span="12">
<c-button size="small" icon="el-icon-delete" @click="onTrndocButdel">
Delete
</c-button>
</c-col>
<c-col :span="12">
<span v-text="model.trnmod.trndoc.doclbl" data-path=".trnmod.trndoc.doclbl" > </span>
</c-col>
<c-col :span="12">
<c-checkbox v-model="model.trnmod.trndoc.shwinc">Show Incoming Messages</c-checkbox>
</c-col>
<c-col :span="12">
<c-checkbox v-model="model.trnmod.trndoc.shwout">Show Outgoing Messages</c-checkbox>
</c-col>
<c-col :span="12">
<c-button size="small" type="primary" @click="onTrndocButatt">
Attach
</c-button>
</c-col>
<c-col :span="12">
<el-form-item label="Connected Documents" prop="trnmod.trndoc.condocstm">
<c-input v-model="model.trnmod.trndoc.condocstm" placeholder="请输入Connected Documents"></c-input>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="" prop="trnmod.trndoc.rcvatt.seainf">
<c-input v-model="model.trnmod.trndoc.rcvatt.seainf" placeholder="请输入"></c-input>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="File Receiver" prop="trnmod.trndoc.filrecv">
<c-input
v-model="model.trnmod.trndoc.filrecv"
placeholder="请输入File Receiver"
></c-input>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="Document tree" prop="trnmod.trndoc.doctrestm">
<c-input
v-model="model.trnmod.trndoc.doctrestm"
placeholder="请输入Document tree"
></c-input>
</el-form-item>
</c-col>
<c-col :span="12">
<c-button size="small" type="primary" @click="onTrndocButshw">
Sho&w
</c-button>
</c-col>
<c-col :span="12">
<c-button size="small" type="primary" @click="onTrndocButadd">
D&etails
</c-button>
</c-col>
<c-col :span="12">
<c-button size="small" type="primary" @click="onTrndocButnew">
&Add New
</c-button>
</c-col>
<c-col :span="12">
<c-button size="small" type="primary" @click="onTrndocButattto">
Attach to
</c-button>
</c-col>
<c-col :span="12">
<c-button size="small" icon="el-icon-delete" @click="onTrndocButdel">
Delete
</c-button>
</c-col>
<c-col :span="12">
<span
v-text="model.trnmod.trndoc.doclbl"
data-path=".trnmod.trndoc.doclbl"
>
</span>
</c-col>
<c-col :span="12">
<c-checkbox v-model="model.trnmod.trndoc.shwinc"
>Show Incoming Messages</c-checkbox
>
</c-col>
<c-col :span="12">
<c-checkbox v-model="model.trnmod.trndoc.shwout"
>Show Outgoing Messages</c-checkbox
>
</c-col>
<c-col :span="12">
<c-button size="small" type="primary" @click="onTrndocButatt">
Attach
</c-button>
</c-col>
<c-col :span="12">
<el-form-item label="Connected Documents" prop="trnmod.trndoc.condocstm">
<c-input
v-model="model.trnmod.trndoc.condocstm"
placeholder="请输入Connected Documents"
></c-input>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="" prop="trnmod.trndoc.rcvatt.seainf">
<c-input
v-model="model.trnmod.trndoc.rcvatt.seainf"
placeholder="请输入"
></c-input>
</el-form-item>
</c-col>
<c-editTable :model="model" v-bind="doceot"> </c-editTable>
</div>
</template>
<script>
import Api from "~/service/Api"
import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess";
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Letopn/Event"
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Letopn/Event";
import EditTable from "~/views/Public/EditTable";
export default {
inject: ['root'],
props:["model","codes"],
mixins: [CommonProcess],
data(){
return {
}
},
methods:{...Event},
created:function(){
}
}
inject: ["root"],
props: ["model", "codes"],
components: { "c-editTable": EditTable },
mixins: [CommonProcess],
data() {
return {
doceot: {
columns: [
{
title: "列1",
width: "120px",
dataIndex: "rol",
show: "input",
},
{
title: "名称",
width: "120px",
dataIndex: "nam",
},
{
title: "地址",
width: "120px",
dataIndex: "address",
},
],
urls: "trnmod.trndoc.doceot",
},
};
},
methods: { ...Event },
created: function () {},
};
</script>
<style>
</style>
src/views/Public/EditTable.vue 0 → 100644
<template>
<c-row>
<c-col :span="22" style="margin-bottom: 18px" :offset="1">
<c-table
style="text-align: center"
:ref="urls"
:list="dataSource"
:paginationShow="paginationShow"
:border="border"
:highlight-current-row="highlight"
:row-class-name="tableRowClassName"
@row-click="handleClick"
>
<el-table-column type="index" width="50"> </el-table-column>
<template v-for="item in columns">
<el-table-column
:label="item.title"
:min-width="item.width"
:key="item.dataIndex"
>
<template slot-scope="scope">
<el-select
v-if="item.show === 'select'"
v-model="scope.row[item.dataIndex]"
:code="item.code"
></el-select>
<el-input
v-else-if="item.show === 'input'"
v-model="scope.row[item.dataIndex]"
:placeholder="`请输入${item.title}`"
></el-input>
<span v-else>{{ scope.row[item.dataIndex] }}</span>
</template>
</el-table-column>
</template>
<slot></slot>
</c-table>
</c-col>
<c-col :span="1">
<div class="button_contains">
<span class="add_del_button add_button" @click="handleAdd">+</span>
<span class="add_del_button" @click="handleDelete">-</span>
</div>
</c-col>
</c-row>
</template>
<script>
import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess";
import _ from "~/utils/Lodash.js";
import Col from "../../components/Col.vue";
export default {
components: { Col },
inject: ["root"],
mixins: [CommonProcess],
data() {
return {
dataSource: _.get(this.model, this.urls, []),
rowIndex: null,
};
},
props: {
model: {
type: Object,
default: undefined,
},
urls: {
//data数据所在model中的路径
type: String,
default: "",
},
columns: {
//列信息
type: Array,
default: function () {
return [];
},
},
paginationShow: {
type: Boolean,
default: false,
},
border: {
//是否有边框
type: Boolean,
default: true,
},
highlight: {
type: Boolean,
default: true,
},
},
computed: {},
watch: {
dataSource: {
handler(val, oldVal) {
_.set(this.model, this.urls, val);
// console.log(this.model);
},
immediate: true,
deep: true,
},
},
methods: {
//获取表格数据索引，方便删除
tableRowClassName({ row, rowIndex }) {
row.row_index = rowIndex;
},
//记录选中行索引
handleClick(row, column, event) {
this.rowIndex = row.row_index;
console.log(this.rowIndex);
},
handleAdd() {
let arr = {};
for (let it of this.columns) {
arr[it.dataIndex] = "";
}
this.dataSource.push({ ...arr });
},
handleDelete() {
if (this.rowIndex === null) {
this.rowIndex = this.dataSource[this.dataSource.length - 1].row_index; //没有选中删除最后一行
}
this.dataSource.splice(this.rowIndex, 1);
this.rowIndex = null;
//this.$refs[this.urls].clearSelection();
},
},
created: function () {},
};
</script>
<style>
.button_contains {
margin-top: 18px;
margin-left: 2px;
display: flex;
flex-direction: column;
text-align: right;
}
.add_del_button {
display: block;
height: 15px;
width: 26px;
flex: 0;
line-height: 15px;
text-align: center;
font-size: 12px;
border-radius: 5px;
border: 1px solid rgb(194, 192, 192);
background-color: rgb(240, 240, 240);
}
.add_button {
margin-bottom: 2px;
}
.add_del_button:hover {
cursor: pointer;
background-color: rgb(230, 227, 227);
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment