<template>
	<el-header class="aminui-main-container__query-header">
		<scTitle border>审批流程Code标识</scTitle>
	</el-header>

	<el-container class="aminui-main-container__table-main">
		<el-header>
			<div class="left-panel">
				<el-button type="primary" @click="table_add">新增业务类型</el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable class="scTable" ref="table" row-key="id" :apiObj="api" :column="column" tableName="approveInfoTable" pageParams="current">
				<el-table-column label="操作" fixed="right" align="center" width="120">
					<template #default="scope">
						<el-button text @click="table_edit(scope.row)">编辑</el-button>
						<el-divider direction="vertical" />
						<el-button text @click="table_del(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<approve-info-dialog v-if="dialog" ref="approveInfoDialog" @success="reloadTable" @closed="dialog = false"></approve-info-dialog>
</template>

<script>
	import approveInfoDialog from "./approveInfoDialog";

	export default {
		props: {
			title: { type: String, default: "" },
		},

		components: {
			approveInfoDialog
		},

		data() {
			return {
				api: null,
				column: [
					{ label: "表单名称", prop: "formName", width: "140", align: "center" },
					{ label: "业务类型", prop: "busType", width: "200", align: "center" },
					{ label: "表单id", prop: "formId", width: "350", align: "center" },
					{ label: "表单编号", prop: "formCode", width: "320", align: "center" }
				],
				
				dialog: false
			}
		},

		methods: {
			// 本地更新数据
			reloadTable(mode = "add") {
				const page = mode == "edit" ? this.$refs.table.currentPage : 1;
				this.$refs.table.reload({}, page);
			},

			// 添加类别类别
			table_add() {
				this.dialog = true;
				this.$nextTick(() => this.$refs.approveInfoDialog.open());
			},

			// 编辑类别
			table_edit(row) {
				this.dialog = true;
				this.$nextTick(() => this.$refs.approveInfoDialog.open("edit").setData(row));
			},

			// 删除类别
			table_del({ id }) {
				this.$confirm("确认删除当前业务类型吗？", "提示", {
					type: "warning",
					confirmButtonText: "删除"
				}).then(() => {
					this.$API.system.approveInfo.del({ id }).then(() => {
						this.$message.success("操作成功");
						this.reloadTable();
					}).catch(() => {});
				}).catch(() => {});
			}
		}
	}
</script>

<style lang="scss" scoped>
.aminui-main-container__query-header {
  flex-direction: column;
  margin-bottom: 0;

  .sc-title {
    margin-bottom: 0;
    padding-left: 0;

    &::before {
      display: none;
    }
  }
}
</style>