index.vue

<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>