vue+element components的简单应用
父页面
<template>
<div class="ddblMainClass">
<el-row style="margin-top:10px">
<el-col :span="18">
<el-radio-group v-model="search.ddblRadio" @change="ddblRadioChangeAction">
<el-radio :label="0">校内调动</el-radio>
<el-radio :label="1">调入</el-radio>
<el-radio :label="2">调出</el-radio>
</el-radio-group>
</el-col>
<el-col :span="6">
<div style="float:right;">
<el-button type="primary" @click="transferSearchAction">检索</el-button>
</div>
</el-col>
</el-row>
<el-divider class="optHeadTopDivider"></el-divider>
<el-row :gutter="5" style="margin-top:10px" ref="searchTopBox">
<el-col :span="7">
<el-col :span="6" class="text-l-ht">所属部门</el-col>
<el-col :span="18">
<el-select v-model="search.ssbmName" clearable @clear="ssbmClear" placeholder="请选择">
<el-option :value="search.ssbmName" style="height: auto">
<el-tree
:data="jgTreedata"
node-key="jgTree.id"
ref="jgTreeRef"
highlight-current
:props="jgTree"
@node-click="handleSsbmTreeNodeClick"
></el-tree>
</el-option>
</el-select>
</el-col>
</el-col>
<el-col :span="6">
<el-col :span="8" class="text-l-ht">工号</el-col>
<el-col :span="16">
<el-input v-model="search.gh" placeholder="请录入工号"></el-input>
</el-col>
</el-col>
<el-col :span="6">
<el-col :span="8" class="text-l-ht">姓名</el-col>
<el-col :span="16">
<el-input v-model="search.xm" placeholder="请录入姓名"></el-input>
</el-col>
</el-col>
</el-row>
<el-row style="margin-top:10px;">
<el-col :span="24">
<component :is="comName" ref="myChild" :transferManageParam="transferManageParam"></component>
</el-col>
</el-row>
</div>
</template>
<script>
import transferManageXndd from "./component/transferManageXndd.vue";
import transferManageDR from "./component/transferManageDR.vue";
import transferManageDC from "./component/transferManageDC.vue";
export default {
data() {
return {
BoxH: document.body.clientHeight - 80,
comName: "transferManageXndd",
search: {
ddblRadio: 0,
ssbmValue: "",
ssbmName: "",
},
jgTree: {
id: "id",
label: "name",
children: "children",
},
jgTreedata: [],
transferManageParam: {},
};
},
components: {
transferManageXndd: transferManageXndd,
transferManageDR: transferManageDR,
transferManageDC: transferManageDC,
},
methods: {
transferSearchAction() {
let rtp = this.search.ddblRadio;
this.transferManageParam = {
ssbmM: this.search.ssbmValue,
gh: this.search.gh,
xm: this.search.xm,
};
if (rtp == 0) {
this.$refs.myChild.getXnddData();
} else if (rtp == 1) {
this.$refs.myChild.getDrData();
}
if (rtp == 2) {
this.$refs.myChild.getDcData();
}
},
ddblRadioChangeAction() {
let rtp = this.search.ddblRadio;
if (rtp == 0) {
this.comName = "transferManageXndd";
} else if (rtp == 1) {
this.comName = "transferManageDR";
}
if (rtp == 2) {
this.comName = "transferManageDC";
}
this.resizeTableHeight();
},
ssbmClear() {
this.search.ssbmValue = "";
},
handleSsbmTreeNodeClick(data) {
this.search.ssbmValue = data.id;
this.search.ssbmName = data.name;
},
async getjgTreeData() {
const param = {
flagCX: "0",
sfxsxxhead: "1",
};
return this.$httpGet("getDepartmentTreeData", param).then((res) => {
if (res.SUCCESS === "1") {
this.$set(this, "jgTreedata", res.DATA);
}
});
},
handle() {
this.BoxH = document.body.clientHeight - 80;
this.resizeTableHeight();
},
debounce(fn, wait) {
let timeout = null;
return function () {
if (timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
};
},
resize() {
this.debounce(this.handle, 500)();
},
resizeTableHeight() {
let rtp = this.search.ddblRadio;
if (rtp == 0) {
this.$refs.myChild.resizeTableHeight();
this.$refs.myChild.setHeight(this.BoxH);
} else if (rtp == 1) {
this.$refs.myChild.resizeTableHeight();
this.$refs.myChild.setHeight(this.BoxH);
}
if (rtp == 2) {
this.$refs.myChild.resizeTableHeight();
this.$refs.myChild.setHeight(this.BoxH);
}
},
},
async created() {
await this.getjgTreeData();
this.$refs.myChild.getXnddData();
this.$refs.myChild.setHeight(this.BoxH);
},
mounted() {
this.resize();
window.addEventListener("resize", this.resize);
},
beforeDestroy() {
window.removeEventListener("resize", this.resize);
},
};
</script>
<style scoped>
.ctn-box-shadow {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.text-l-ht {
line-height: 32px;
text-align: right;
}
.optHeadTopDivider {
margin: 5px 0 20px 0 !important;
}
</style>
子页面
<template>
<div class="xnddClass">
<el-row>
<el-col :span="16" style="padding:10px 10px 10px 0px;">
<el-table
fixed
stripe
:data="xnddTopLeftDataTable?xnddTopLeftDataTable:null"
ref="xnddTopLeftTable"
style="width: 100%;margin-bottom: 0px;"
highlight-current-row
:header-cell-style="{'text-align':'center'}"
:height="xnddTopLeftHeight"
@current-change="handleXnddTopLeftHeightRowChange"
>
<af-table-column prop="rowId" label="序号" type="index" width="50" align="center"></af-table-column>
<af-table-column prop="htmc" label="工号" align="center" show-overflow-tooltip></af-table-column>
<af-table-column prop="htqsrq" label="姓名" show-overflow-tooltip></af-table-column>
<af-table-column prop="htjsrq" label="性别" align="center" show-overflow-tooltip></af-table-column>
<af-table-column prop="htqdrq" label="所属部门" align="center" show-overflow-tooltip></af-table-column>
<af-table-column prop="htlx" label="岗位" show-overflow-tooltip></af-table-column>
</el-table>
</el-col>
<el-col :span="8" style="padding:10px 0px 10px 0px;" ref="topRightBox">
<el-form ref="xnddTopRightFrom" :model="xnddTopRightFrom" label-width="100px">
<el-form-item class="el-form-item-1" label="调动文号">
<el-input v-model="xnddTopRightFrom.name"></el-input>
</el-form-item>
<el-form-item class="el-form-item-1" label="现部门">
<el-input v-model="xnddTopRightFrom.name"></el-input>
</el-form-item>
<el-form-item class="el-form-item-1" label="现岗位">
<el-select v-model="xnddTopRightFrom.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item class="el-form-item-1" label="现编制">
<el-input v-model="xnddTopRightFrom.name"></el-input>
</el-form-item>
<el-form-item class="el-form-item-1" label="调动类别">
<el-select v-model="xnddTopRightFrom.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item class="el-form-item-1" label="异动日期">
<el-date-picker v-model="xnddTopRightFrom.value1" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item class="el-form-item-1" label="工资转移日期">
<el-date-picker v-model="xnddTopRightFrom.value1" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item class="el-form-item-1" label="异动原因">
<el-input v-model="xnddTopRightFrom.name"></el-input>
</el-form-item>
</el-form>
<div style="float:right;">
<el-button type="primary" plain>主要按钮</el-button>
<el-button plain>朴素按钮</el-button>
<el-button plain>朴素按钮</el-button>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24" style="padding:10px 0px;">
<el-table
fixed
stripe
:data="xnddButtomDataTable?xnddButtomDataTable:null"
ref="xnddButtomTable"
style="width: 100%;margin-bottom: 0px;"
highlight-current-row
:header-cell-style="{'text-align':'center'}"
:height="xnddButtomHeight"
@current-change="handleXnddButtomHeightRowChange"
>
<af-table-column prop="rowId" label="序号" type="index" width="50" align="center"></af-table-column>
<af-table-column prop="htmc" label="工号" align="center" show-overflow-tooltip></af-table-column>
<af-table-column prop="htqsrq" label="姓名" show-overflow-tooltip></af-table-column>
<af-table-column prop="htjsrq" label="原部门" show-overflow-tooltip></af-table-column>
<af-table-column prop="htqdrq" label="原岗位" show-overflow-tooltip></af-table-column>
<af-table-column prop="htqdrq" label="现部门" show-overflow-tooltip></af-table-column>
<af-table-column prop="htlx" label="现岗位" show-overflow-tooltip></af-table-column>
<af-table-column prop="htlx" label="异动类别" show-overflow-tooltip></af-table-column>
<af-table-column prop="htlx" label="异动日期" show-overflow-tooltip></af-table-column>
</el-table>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
ctnHeight: null,
xnddTopLeftDataTable: [],
xnddTopLeftHeight: null,
xnddTopLeftCurrent: null,
xnddButtomDataTable: [],
xnddButtomHeight: null,
xnddButtomCurrent: null,
xnddTopRightFrom: {},
};
},
props: {
transferManageParam: {},
},
methods: {
getXnddData() {
console.log("d=" + this.transferManageParam.gh);
},
handleXnddButtomHeightRowChange(row) {
if (row) {
this.xnddButtomCurrent = row;
}
},
handleXnddTopLeftHeightRowChange(row) {
if (row) {
this.xnddTopLeftCurrent = row;
}
},
setHeight(ctnheight) {
this.ctnHeight = ctnheight;
},
resizeTableHeight() {
let heighttp = 0;
heighttp = this.$refs.topRightBox.$el.offsetHeight;
console.log("heighttp=" + heighttp);
this.xnddTopLeftHeight = heighttp > 435 ? heighttp : 435;
let buttomTableHeight = 0;
buttomTableHeight = this.ctnHeight - heighttp;
this.xnddButtomHeight = buttomTableHeight > 400 ? buttomTableHeight : 400;
},
},
};
</script>
<style scoped>
.ctn-box-shadow {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.xnddClass >>> .el-form-item-1,
.el-select--small,
.el-date-editor--date {
width: 100%;
}
.xnddClass >>> .el-form-item__content {
width: calc(100% - 100px);
}
</style>