middleground_code_v2/src/components/base/baseChoice/index.vue

<template>
  <div flex>
    <div class="treeBody" v-if="menuData.length > 0">
      <base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :showCheckbox="false"
                 :menuData="menuData" @handleNodeClick="handleNodeClick"
      >
      </base-tree>
    </div>

    <div style="overflow: hidden;padding: 10px;flex: 1;">
      <div flex="cross:center" style="margin-bottom: 10px;" v-if="showSearch">
        <el-input v-model="write" :placeholder="placeholder" style="width: 200px;margin-right: 10px;">
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </div>
      <base-table ref="customtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading" :slotrow="true"
                  :tableData="tableData" :tableColumn="tableColumn" :funData="[]" @onCellClick="getCell"
                  :tableHeight="tableHeightLog"
                  @onSelectionChange="getSelect" :highlightCurrent="true" @radioChange="radioChange"
      >
        <!-- 单选 -->
        <template v-slot:option="{row}">
          <el-radio v-model="radio" :label="row.$index"></el-radio>
        </template>
      </base-table>
      <base-page :pageModel.sync="pageModel" @onPageChange="pageChange" :pageSizesList="[10 , 20, 80, 100, 150]"
                 v-if="pageShow"
      ></base-page>
    </div>
  </div>
</template>

<script>
import baseTable from '@/components/base/baseTable'
import baseLayout from '@/components/base/baseLayout'
import baseJurisdiction from '@/components/base/baseJurisdiction/index.vue'
import baseTree from '@/components/base/BaseMenuTree/index.vue'
import basePage from '@/components/base/basePage'
import configData from './configData'

export default {
  name: 'review',
  components: {
    baseLayout,
    baseTable,
    baseTree,
    baseJurisdiction,
    basePage
  },
  props: {
    // 表格尺寸
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    choiceDialog: {
      type: Boolean,
      default: false
    },
    tableColumn: {
      type: Array,
      default() {
        return []
      }
    },
    menuData: {
      type: Array,
      default() {
        return []
      }
    },
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    pageShow: {
      type: Boolean,
      default: true
    },
    showSearch: {
      type: Boolean,
      default: false
    },


  },
  watch: {
    choiceDialog: {
      deep: true, //深度监听设置为 true
      handler: function(newV, oldV) {
        if (this.choiceDialog) {
          this.reset()
        }
      }
    }
  },
  data() {
    return {
      radio: false,
      optionData: '',
      // 分页数据
      pageModel: {
        total: 0,
        page: 1,
        limit: 10
      },
      write: '',
      nowBtns: [{
        'routeUrl': 'button_jurisdiction',
        'menuName': '权限设置'
      }],
      tabLoading: false,
      selectTable: [], //多选
      settingsDialog: false,
      settingCenter: 'left',
      tableHeightLog: 'calc(100vh - 416px)'
    }
  },
  computed: {
    // 表头配置
    // tableColumn() {
    // 	return configData.tableColumnJson
    // },
  },
  mounted() {
    // this.$refs.customtable.clearRadioIndex()
  },
  methods: {
    // 查询、筛选事件
    getQuery(model) {
      console.log(model)
    },
    // 单元格点击事件
    getCell(row, label) {

    },
    // 详情页 type: 1 新增 2编辑
    goInfo(type = 1, id) {

    },
    getElSelect(event, index, indexItem, param) {
    },
    // 按钮点击事件
    getFuncBtn(btnEven) {
      console.log(btnEven)
      if (btnEven.routeUrl == 'button_jurisdiction') {
        this.settingsDialog = true
      }
    },
    // 表格多选
    getSelect(selectTable) {
      this.selectTable = selectTable
    },
    // 树状图点击事件
    handleNodeClick(data) {
      this.organizationForm = {
        o_OrganCode: data.o_OrganCode,
        ParentOrganName: data.label
      }
      this.propvalue = data.label
      this.optionData = ''
      this.$refs.customtable.clearRadioIndex()
      this.$emit('handleNodeClick', data)
    },
    // 页数或每页条数更改时触发
    pageChange() {
      let pageModel ={
        page: this.pageModel.pageIndex ? this.pageModel.pageIndex : 1,
        limit: this.pageModel.pageSize? this.pageModel.pageSize : 10
      }
      this.$emit('onQuery', this.mergeParam(), pageModel)
    },
    mergeParam(state) {

      if (state) {
        this.pageModel.page = 1
      }
      let page = {
        page: this.pageModel.page,
        limit: this.pageModel.limit
      }
      for (let i in this.model) {
        if (!this.model[i]) {
          this.model[i] = null
        }
      }
      let search = Object.assign({}, page, this.model)
      return Object.assign({}, page, this.model)
    },
    // 设置分页total值
    setPageTotal(total) {
      this.$set(this.pageModel, 'total', total)
    },
    //查询
    search() {
      this.$emit('getTableList', this.write)
    },
    radioChange(val) {
      this.optionData = val
      this.radio = val.index
    },
    reset() {
      this.write = ''
      this.radio = false
    }
  },
  mounted() {
    // this.$refs.choice.reset()
  }

}
</script>

<style scoped>
.treeBody {
  background-color: #f2f3f4;
  width: 25%;
  margin-top: 10px;
  height: calc(100vh - 360px);
  overflow-y: auto;
}

/* >>>.el-table__body-wrapper {
  height: 300px !important;
} */

.app-container {
  height: calc(100% - 52px);
}
</style>