yudao-dev/src/views/energy/base/tableNameConfig/index.vue

<template>
	<div class="app-container">
		<!-- 列表 -->
		<base-table
			:page="queryParams.pageNo"
			:limit="queryParams.pageSize"
			:table-props="tableProps"
			:table-data="list"
			:max-height="tableH">
			<method-btn
				v-if="tableBtn.length"
				slot="handleBtn"
				:width="80"
				label="操作"
				:method-list="tableBtn"
				@clickBtn="handleClick" />
		</base-table>
		<!-- 新增 -->
		<base-dialog
			dialogTitle="编辑"
			:dialogVisible="centervisible"
			@cancel="handleCancel"
			@confirm="handleConfirm"
			:before-close="handleCancel">
			<table-name-config-update
				ref="tableNameConfigU"
				@successSubmit="successSubmit" />
		</base-dialog>
	</div>
</template>
<script>
import { energyTablePage } from '@/api/base/energyQuantityManual';
import { publicFormatter } from '@/utils/dict';
import tableNameConfigUpdate from './components/tableNameConfigUpdate.vue';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
const tableProps = [
	{
		prop: 'energyType',
		label: '能源类型',
		width: 200,
		filter: publicFormatter('energy_type'),
	},
	{
		prop: 'tableName',
		label: '能源表名',
	},
];
export default {
	name: 'TableNameConfig',
	components: { tableNameConfigUpdate },
	data() {
		return {
			tableProps,
			tableBtn: [
				this.$auth.hasPermiAnd([
					'base:energy-table:query',
					'base:energy-table:update',
				])
					? {
							type: 'edit',
							btnName: '编辑',
					  }
					: undefined,
			].filter((v) => v),
			list: [],
			queryParams: {
				pageNo: 1,
				pageSize: 100,
			},
			heightNum: 165,
			centervisible: false,
		};
	},
	mixins: [tableHeightMixin],
	created() {
		this.getList();
	},
	methods: {
		getList() {
			energyTablePage({ ...this.queryParams }).then((res) => {
				let temp = res.data.list || [];
				this.list = temp.map((item) => {
					return {
						energyType: item.energyType,
						energyTypeId: item.energyTypeId,
						tableName: item.tables.join('、'),
					};
				});
			});
		},
		handleClick(val) {
			console.log('编辑');
			this.centervisible = true;
			this.$nextTick(() => {
				this.$refs.tableNameConfigU.init(val.data.energyTypeId);
			});
		},
		handleCancel() {
			this.$refs.tableNameConfigU.formClear();
			this.centervisible = false;
		},
		handleConfirm() {
			this.$refs.tableNameConfigU.submitForm();
		},
		successSubmit() {
			this.handleCancel();
			this.getList();
		},
	},
};
</script>