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 319 additions and 94 deletions
src/components/Table.vue
<template> <template>
<div class="eContainer-table-block"> <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'}" <el-table
v-bind="$attrs" v-on="tableListeners" v-loading="loading" :row-class-name="tableRowClass" :max-height="maxHeight" :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 <el-table-column
v-for="(item, key) in columnsConfig" v-for="(item, key) in columnsConfig"
...@@ -13,7 +22,7 @@ ...@@ -13,7 +22,7 @@
<el-pagination <el-pagination
class="eContainer-pagination" class="eContainer-pagination"
v-if="paginationShow" v-if="paginationShow"
:background="type=='small'? false: true" :background="type == 'small' ? false : true"
small small
layout="prev, pager, next, jumper" layout="prev, pager, next, jumper"
:page-size="limit" :page-size="limit"
...@@ -21,7 +30,9 @@ ...@@ -21,7 +30,9 @@
:total="total" :total="total"
v-on="$listeners" v-on="$listeners"
></el-pagination> ></el-pagination>
<div class="paginationLable" v-if="paginationShow">当前显示第 {{page1}}-{{page2}} 条，共 {{total}} 条</div> <div class="paginationLable" v-if="paginationShow">
当前显示第 {{ page1 }}-{{ page2 }} 条，共 {{ total }} 条
</div>
</div> </div>
</template> </template>
...@@ -30,146 +41,152 @@ export default { ...@@ -30,146 +41,152 @@ export default {
props: { props: {
type: { type: {
type: String, type: String,
default: 'normal' default: "normal",
}, },
list: { list: {
type: Array, type: Array,
default: () => { default: () => {
return [] return [];
} },
}, },
columnsConfig: { columnsConfig: {
type: Array, type: Array,
default: () => { default: () => {
return [] return [];
} },
}, },
total: { total: {
type: Number, type: Number,
default: 0 default: 0,
}, },
current: { current: {
type: Number, type: Number,
default: 0 default: 0,
}, },
limit: { limit: {
type: Number, type: Number,
default: 0 default: 0,
}, },
outerHeight: { outerHeight: {
type: Number, type: Number,
default: undefined default: undefined,
}, },
loading: { loading: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
tableRowClassName: { tableRowClassName: {
type: Function type: Function,
}, },
maxHeight:{ maxHeight: {
type: String, type: String,
default:undefined default: undefined,
}, },
paginationShow: { paginationShow: {
type: Boolean, type: Boolean,
required: false, required: false,
default: true default: true,
} },
}, },
data(){ data() {
return{ return {
page1:'', page1: "",
page2:'', page2: "",
tableListeners: {}, tableListeners: {},
tableRef: 'tableRef' + Math.floor(Math.random() * 100) tableRef: "tableRef" + Math.floor(Math.random() * 100),
} };
}, },
watch: { watch: {
'current': function () { current: function () {
this.getPageNum() this.getPageNum();
}, },
'outerHeight': function () { outerHeight: function () {
if (this.outerHeight !== undefined) { if (this.outerHeight !== undefined) {
window.removeEventListener('resize', this.handleResizeBind) window.removeEventListener("resize", this.handleResizeBind);
this.clientHeight = `${document.documentElement.clientHeight}` this.clientHeight = `${document.documentElement.clientHeight}`;
this.changeFixed() this.changeFixed();
this.handleResizeBind = this.handleResize.bind(this, this.tableRef, this.outerHeight) this.handleResizeBind = this.handleResize.bind(
window.addEventListener('resize', this.handleResizeBind) this,
} this.tableRef,
this.outerHeight
);
window.addEventListener("resize", this.handleResizeBind);
} }
}, },
},
created() { created() {
this.getPageNum() this.getPageNum();
this.tableListeners = {...this.$listeners} this.tableListeners = { ...this.$listeners };
delete this.tableListeners['current-change'] //delete this.tableListeners["current-change"];
}, },
mounted() { mounted() {
if (this.outerHeight) { if (this.outerHeight) {
this.clientHeight = `${document.documentElement.clientHeight}` this.clientHeight = `${document.documentElement.clientHeight}`;
this.changeFixed() this.changeFixed();
this.handleResizeBind = this.handleResize.bind(this, this.tableRef, this.outerHeight) this.handleResizeBind = this.handleResize.bind(
window.addEventListener('resize', this.handleResizeBind) this,
this.tableRef,
this.outerHeight
);
window.addEventListener("resize", this.handleResizeBind);
} }
}, },
methods: { methods: {
changeFixed() { changeFixed() {
let content = document.getElementById(this.tableRef) let content = document.getElementById(this.tableRef);
let clientHeight = `${document.documentElement.clientHeight}` let clientHeight = `${document.documentElement.clientHeight}`;
let target let target;
for (let i = 0; i < content.children.length; i++) { for (let i = 0; i < content.children.length; i++) {
if (content.children[i].classList.contains('el-table__body-wrapper')) { if (content.children[i].classList.contains("el-table__body-wrapper")) {
target = content.children[i] target = content.children[i];
} }
} }
target.style.maxHeight = clientHeight - this.outerHeight + 'px' target.style.maxHeight = clientHeight - this.outerHeight + "px";
}, },
handleResize: (tableRef, outerHeight) => { handleResize: (tableRef, outerHeight) => {
let content = document.getElementById(tableRef) let content = document.getElementById(tableRef);
let clientHeight = `${document.documentElement.clientHeight}` let clientHeight = `${document.documentElement.clientHeight}`;
let target let target;
for (let i = 0; i < content.children.length; i++) { for (let i = 0; i < content.children.length; i++) {
if (content.children[i].classList.contains('el-table__body-wrapper')) { if (content.children[i].classList.contains("el-table__body-wrapper")) {
target = content.children[i] target = content.children[i];
} }
} }
target.style.maxHeight = clientHeight - outerHeight + 'px' target.style.maxHeight = clientHeight - outerHeight + "px";
}, },
getPageNum(){ getPageNum() {
if( this.current == Math.ceil(this.total/this.limit)){ if (this.current == Math.ceil(this.total / this.limit)) {
this.page1 = this.current*this.limit-this.limit + 1 this.page1 = this.current * this.limit - this.limit + 1;
this.page2 = this.total this.page2 = this.total;
}else{ } else {
this.page1 = this.current*this.limit-this.limit + 1 this.page1 = this.current * this.limit - this.limit + 1;
this.page2 = this.current*this.limit this.page2 = this.current * this.limit;
} }
}, },
tableRowClass: function ({row, rowIndex}) { tableRowClass: function ({ row, rowIndex }) {
if (this.tableRowClassName) { if (this.tableRowClassName) {
return this.tableRowClassName({row, rowIndex}) return this.tableRowClassName({ row, rowIndex });
} else { } else {
return '' return "";
}
} }
}, },
},
destroyed: function () { destroyed: function () {
if (this.outerHeight) { if (this.outerHeight) {
window.removeEventListener('resize', this.handleResizeBind) window.removeEventListener("resize", this.handleResizeBind);
} }
}, },
};
}
</script> </script>
<style> <style>
.eContainer-table-block .paginationLable{ .eContainer-table-block .paginationLable {
font-size: 12px; font-size: 12px;
color: #808080; color: #808080;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
float:right; float: right;
margin-top:20px; margin-top: 20px;
} }
.eContainer-table-block .el-table__body-wrapper { .eContainer-table-block .el-table__body-wrapper {
overflow: auto; overflow: auto;
......
src/views/Business/Letopn/Doctre.vue
<template> <template>
<div class="eibs-tab"> <div class="eibs-tab">
<c-col :span="12"> <c-col :span="12">
<el-form-item label="File Receiver" prop="trnmod.trndoc.filrecv"> <el-form-item label="File Receiver" prop="trnmod.trndoc.filrecv">
<c-input v-model="model.trnmod.trndoc.filrecv" placeholder="请输入File Receiver"></c-input> <c-input
v-model="model.trnmod.trndoc.filrecv"
placeholder="请输入File Receiver"
></c-input>
</el-form-item> </el-form-item>
</c-col> </c-col>
<c-col :span="12"> <c-col :span="12">
<el-form-item label="Document tree" prop="trnmod.trndoc.doctrestm"> <el-form-item label="Document tree" prop="trnmod.trndoc.doctrestm">
<c-input v-model="model.trnmod.trndoc.doctrestm" placeholder="请输入Document tree"></c-input> <c-input
v-model="model.trnmod.trndoc.doctrestm"
placeholder="请输入Document tree"
></c-input>
</el-form-item> </el-form-item>
</c-col> </c-col>
...@@ -44,15 +49,23 @@ ...@@ -44,15 +49,23 @@
</c-col> </c-col>
<c-col :span="12"> <c-col :span="12">
<span v-text="model.trnmod.trndoc.doclbl" data-path=".trnmod.trndoc.doclbl" > </span> <span
v-text="model.trnmod.trndoc.doclbl"
data-path=".trnmod.trndoc.doclbl"
>
</span>
</c-col> </c-col>
<c-col :span="12"> <c-col :span="12">
<c-checkbox v-model="model.trnmod.trndoc.shwinc">Show Incoming Messages</c-checkbox> <c-checkbox v-model="model.trnmod.trndoc.shwinc"
>Show Incoming Messages</c-checkbox
>
</c-col> </c-col>
<c-col :span="12"> <c-col :span="12">
<c-checkbox v-model="model.trnmod.trndoc.shwout">Show Outgoing Messages</c-checkbox> <c-checkbox v-model="model.trnmod.trndoc.shwout"
>Show Outgoing Messages</c-checkbox
>
</c-col> </c-col>
<c-col :span="12"> <c-col :span="12">
...@@ -63,38 +76,64 @@ ...@@ -63,38 +76,64 @@
<c-col :span="12"> <c-col :span="12">
<el-form-item label="Connected Documents" prop="trnmod.trndoc.condocstm"> <el-form-item label="Connected Documents" prop="trnmod.trndoc.condocstm">
<c-input v-model="model.trnmod.trndoc.condocstm" placeholder="请输入Connected Documents"></c-input> <c-input
v-model="model.trnmod.trndoc.condocstm"
placeholder="请输入Connected Documents"
></c-input>
</el-form-item> </el-form-item>
</c-col> </c-col>
<c-col :span="12"> <c-col :span="12">
<el-form-item label="" prop="trnmod.trndoc.rcvatt.seainf"> <el-form-item label="" prop="trnmod.trndoc.rcvatt.seainf">
<c-input v-model="model.trnmod.trndoc.rcvatt.seainf" placeholder="请输入"></c-input> <c-input
v-model="model.trnmod.trndoc.rcvatt.seainf"
placeholder="请输入"
></c-input>
</el-form-item> </el-form-item>
</c-col> </c-col>
<c-editTable :model="model" v-bind="doceot"> </c-editTable>
</div> </div>
</template> </template>
<script> <script>
import Api from "~/service/Api" import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess"; import CommonProcess from "~/mixin/CommonProcess";
import CodeTable from "~/config/CodeTable" import CodeTable from "~/config/CodeTable";
import Event from "~/model/Letopn/Event" import Event from "~/model/Letopn/Event";
import EditTable from "~/views/Public/EditTable";
export default { export default {
inject: ['root'], inject: ["root"],
props:["model","codes"], props: ["model", "codes"],
components: { "c-editTable": EditTable },
mixins: [CommonProcess], mixins: [CommonProcess],
data(){ data() {
return { return {
doceot: {
} columns: [
{
title: "列1",
width: "120px",
dataIndex: "rol",
show: "input",
}, },
methods:{...Event}, {
created:function(){ title: "名称",
width: "120px",
} dataIndex: "nam",
} },
{
title: "地址",
width: "120px",
dataIndex: "address",
},
],
urls: "trnmod.trndoc.doceot",
},
};
},
methods: { ...Event },
created: function () {},
};
</script> </script>
<style> <style>
</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