vue+element components的简单应用

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>