<template>
	<el-dialog title="历史记录" v-model="visible" width="800px" height="400px" @close="close" append-to-body draggable  style="font-size: 14px;">
		<el-table ref="dialogTable" :data="recordsList" size="small" v-loading="loading" border height="500px" header-row-class-name="list-header-row" row-class-name="list-row" >
			<el-table-column type="index" label="序号" width="50" align="center" />
			<el-table-column label="记录" align="center" prop="records" />
		</el-table>
	</el-dialog>
</template>
<script setup>
import { listOutsourcedRecords } from "@/api/business/outsourcedRecords";
/** 历史记录变量 */
const recordsList = ref([])
const visible = ref(false)
const loading = ref(false)
const data = reactive({
	queryParams: {
		masterId:null
	}
})
const { queryParams } = toRefs(data)

/**
 * 对话框打开 事件
 */
function open(data) {
	visible.value = true
	queryParams.value.masterId = data
	getList()
}

/**
 * 对话框关闭 事件
 */
function close() {
	visible.value = false
}

/**
 * 加载数据
 */
function getList() {
	loading.value = true
	listOutsourcedRecords(queryParams.value).then((res) => {
		recordsList.value = res.rows
		loading.value = false
	})
}

defineExpose({
	open
})
</script>
<style scoped>
.el-table--small {
    font-size: 14px;
}</style>
