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;">
				<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]'></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 []
				},
			},
		},
		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() {
				this.$emit('onQuery', this.mergeParam())
			},
			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>