<template> <div class="container"> <form-add v-if="isAdd" @back="back" :form-edit="formEdit" :dbId="dbId" ></form-add> <form-history v-else-if="isHistory" @back="back" :source-id="sourceId" ></form-history> <div v-else> <el-tabs v-model="activeName" @tab-click="handleTabClick"> <el-tab-pane :label="item.name" :name="'index' + index" v-for="(item, index) in dbList" :key="item.id" >{{ }}</el-tab-pane> </el-tabs> <direct-search ref="form" :forms="searchList" @handleSearch="handleFormSearch" /> <el-table-self ref="table" :table-data="tableData" :columns="columns" :list-loading="listLoading" :current-page="pageIndex" :total-count="total" :page-sizes="pageSizes" :page-size="pageSize" @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange" /> </div> <dialog-form width="450px" ref="dialog" title="复制表单" :form-data="formData" @handleConfirm="handleConfirm" ></dialog-form> </div> </template> <script> import paginationMixin from "@/components/TabComponents/mixin" import FormAdd from "./FormAdd" import FormHistory from "./FormHistory.vue" import { getFormPage, delForm, copyForm } from "@/api/field.js" import { getDbList } from "@/api/database" export default { components: { FormAdd, FormHistory, }, name: "FormConfig", data() { return { activeName: "index0", dbList: [], dbId: null, listLoading: false, isAdd: false, isHistory: false, // 查询列表 searchList: [ { label: "名称", type: "input", prop: "name", placeholder: "请输入名称", }, { type: "button", value: "查询", icon: "el-icon-search", }, { type: "button", color: "primary", icon: "el-icon-plus", value: "添加", func: this.handleAdd, }, { type: "button", color: "primary", icon: "el-icon-timer", value: "历史记录", style: { float: "right" }, func: this.handleHistory, }, ], columns: [ { label: "编码", minWidth: 120, value: "id", }, { label: "名称", minWidth: 120, value: "name", }, { label: "创建时间", minWidth: 150, value: "createTime", }, { label: "更新时间", minWidth: 150, value: "updateTime", }, { label: "版本号", minWidth: 100, value: "version", }, { label: "操作", width: 220, fixed: "right", operType: "button", operations: [ { func: this.handleAdd, formatter(row) { return { label: "编辑", type: "primary", } }, }, { type: "dropdown", children: [ { func: this.handleCopy, icon: "el-icon-document-copy", label: "复制表单", style: { color: "#409EFF", }, }, { func: this.handleHistory, icon: "el-icon-timer", label: "历史记录", style: { color: "#409EFF", }, }, { func: this.handleDel, label: "删除", icon: "el-icon-delete", style: { color: "#F56C6C", }, }, ], }, ], }, ], formData: [ { type: "input", label: "表单名", prop: "name", placeholder: "请输入新的表单名", rules: [{ required: true, message: "请输入新的表单名" }], }, ], formId: "", tableData: [], cacheForm: {}, formEdit: {}, sourceId: "", } }, mixins: [paginationMixin], methods: { handleTabClick({ index }) { this.dbId = this.dbList[index].id this.handleFormSearch() }, handleHistory({ id, version }) { this.sourceId = id || "" this.isHistory = true }, handleCopy({ id }) { this.formId = id this.$refs.dialog.open() }, handleConfirm({ name }) { const data = { name, id: this.formId, dbId: this.dbId, } copyForm(data).then((res) => { this.$message.success("复制成功") this.handleSearch() this.$refs.dialog.close() }) }, back(flag) { if (flag) { this.handleSearch() } this.isHistory = this.isAdd = false }, handleAdd({ id, formJson }) { this.formEdit = id ? { id, formJson } : {} this.isAdd = true }, handleDel(row) { this.$confirm(`是否删除【${row.name}】?`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { delForm(row.id).then((res) => { if (res.code === 1) { this.$message({ type: "success", message: "删除成功!", }) this.handleSearch() } }) }) .catch(() => {}) }, // 查询 handleFormSearch(form) { this.pageIndex = 1 this.handleSearch(form) }, handleSearch(form) { this.cacheForm = Object.assign(this.cacheForm, form) this.listLoading = true const params = Object.assign( { dbId: this.dbId, }, this.cacheForm ) for (let key in params) { if (params[key] === "") { delete params[key] } } params.current = this.pageIndex params.size = this.pageSize getFormPage(params).then((res) => { this.listLoading = false if (res.code === 1) { const d = res.data this.tableData = d.records || [] this.total = Number(d.total) } }) }, getDbList() { getDbList().then((res) => { this.dbList = res.data if (this.dbList[0]) { this.dbId = this.dbList[0].id } this.handleFormSearch() }) }, }, created() { this.getDbList() }, } </script>