GroupForm.vue

<template>
  <div class="container">
    <direct-search
      ref="form"
      :label-position="'right'"
      :forms="searchList"
      :style="{ textAlign: 'left' }"
      @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"
    />
    <dialog-form
      width="450px"
      :close-modal="false"
      ref="dialog"
      :title="formEdit.id ? '编辑' : '新增'"
      :form-edit="formEdit"
      :form-data="formData"
      @handleConfirm="handleConfirm"
    ></dialog-form>
  </div>
</template>

<script>
import paginationMixin from "@/components/TabComponents/mixin"
import {
  getGroupFormPage,
  addGroupForm,
  delGroupForm,
  getGroupDeptList,
} from "@/api/coop-group.js"
import { getFormList } from "@/api/field.js"

export default {
  name: "GroupForm",
  mixins: [paginationMixin],
  props: {
    groupId: String,
  },
  data() {
    const formList = []
    // { isPublish: 1 }
    getFormList().then((res) => {
      if (res.code === 1) {
        res.data &&
          res.data.forEach((item) => {
            formList.push({
              label: item.name,
              value: item.id,
            })
          })
      }
    })
    return {
      listLoading: false,
      // 查询列表
      searchList: [
        {
          label: "名称",
          type: "input",
          prop: "tabName",
          placeholder: "请输入名称",
        },
        {
          type: "button",
          value: "查询",
          icon: "el-icon-search",
        },
        {
          type: "button",
          color: "primary",
          icon: "el-icon-plus",
          value: "添加",
          func: this.handleAdd,
        },
      ],
      columns: [
        {
          label: "表单名称",
          minWidth: 120,
          value: "tabName",
        },

        {
          label: "表单原名称",
          minWidth: 120,
          value: "formName",
        },

        {
          label: "机构名称",
          minWidth: 120,
          value: "orgName",
        },
        {
          label: "科室",
          minWidth: 100,
          value: "deptName",
        },
        {
          label: "类型",
          minWidth: 100,
          value: "type",
          formatter: (row) => {
            return this.$handle.formatDicList(
              this.dictMap["formType"],
              row.type
            )
          },
        },
        {
          label: "填报次数",
          minWidth: 80,
          value: "fillType",
          formatter: (row) => {
            return row.fillType === 1 ? "多次" : "单次"
          },
        },
        {
          label: "操作",
          width: 160,
          fixed: "right",
          operType: "button",
          operations: [
            {
              func: this.handleCopyAdd,
              formatter(row) {
                return {
                  label: "复制新增",
                  type: "text",
                }
              },
            },
            {
              func: this.handleAdd,
              formatter(row) {
                return {
                  label: "编辑",
                  type: "text",
                }
              },
            },
            {
              func: this.handleDel,
              style: {
                color: "#F56C6C",
              },
              formatter(row) {
                return {
                  label: "删除",
                  type: "text",
                }
              },
            },
          ],
        },
      ],
      tableData: [],
      cacheForm: {},
      formData: [
        {
          type: "select",
          label: "表单",
          placeholder: "请选择配置表单",
          prop: "formId",
          opts: formList,
          disabled: false,
          rules: [{ required: true, message: "请选择配置表单" }],
        },
        {
          type: "input",
          label: "表单重命名",
          placeholder: "请输入表单重命名",
          prop: "tabName",
          rules: [{ required: true, message: "请输入表单重命名" }],
        },
        {
          type: "select",
          label: "类型",
          placeholder: "请选择类型",
          prop: "type",
          optsFormatter: () => {
            return this.dictMap && this.dictMap["formType"]
          },
          rules: [{ required: true, message: "请选择类型" }],
        },

        {
          type: "select",
          label: "填报方式",
          placeholder: "请选择填报方式",
          prop: "fillType",
          opts: [
            {
              label: "单次",
              value: 0,
            },
            {
              label: "多次",
              value: 1,
            },
          ],
          rules: [{ required: true, message: "请选择填报方式" }],
        },
        {
          type: "select",
          label: "机构/科室",
          placeholder: "请选择机构/科室",
          prop: "deptId",
          opts: [],
        },

        {
          type: "select",
          label: "对照模板",
          prop: "screenTpl",
          optsFormatter: () => {
            return this.dictMap && this.dictMap["screen_contrast"]
          },
        },
        //用于查询同屏对照数据参数
        {
          type: "input",
          label: "同屏对照参数",
          placeholder: "多个参数英文分号分隔",
          prop: "screenParam",
        },
        {
          type: "number",
          label: "排序",
          prop: "sort",
        },
      ],
      formEdit: {},
    }
  },
  watch: {
    groupId(groupId) {
      if (groupId) {
        this.handleFormSearch({ groupId })
        this.getGroupDeptList()
      } else {
        this.tableData = []
      }
    },
  },

  methods: {
    getGroupDeptList() {
      getGroupDeptList({ groupId: this.groupId }).then((res) => {
        if (res.code === 1) {
          const list = []
          const d = res.data
          d &&
            d.forEach((item) => {
              list.push({
                ...item,
                label: item.orgName + "/" + item.deptName,
                value: item.deptId,
              })
            })
          this.formData[2].opts = list
        }
      })
    },

    handleCopyAdd(row) {
      const data = Object.assign({}, row)
      delete data.id
      this.handleAdd(data)
    },

    handleAdd(row) {
      this.formData[0].disabled = row.id ? true : false
      this.formEdit = Object.assign({}, row)
      if (!this.groupId) {
        this.$message.warning("请先选择协作组")
        return
      }
      this.$refs.dialog.open()
    },
    handleConfirm(form) {
      const formList = this.formData[0].opts
      const deptList = this.formData[2].opts
      const orgRow =
        (deptList.find((_) => _.value === form.deptId) &&
          deptList.find((_) => _.value === form.deptId)) ||
        {}
      const data = Object.assign(form, {
        deptName: orgRow.deptName,
        orgName: orgRow.orgName,
        orgId: orgRow.orgId,
        formName: this.$handle.formatDicList(formList, form.formId),
        groupId: this.groupId,
      })
      addGroupForm(data).then((res) => {
        if (res.code === 1) {
          this.$message.success("添加成功")
          this.handleSearch()
          this.$refs.dialog.close()
        }
      })
    },
    handleDel(row) {
      this.$confirm(`是否删除【${row.tabName || ""}】?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delGroupForm(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) {
      const params = Object.assign(this.cacheForm, form)
      this.listLoading = true
      for (let key in params) {
        if (params[key] === "") {
          delete params[key]
        }
      }
      params.current = this.pageIndex
      params.size = this.pageSize
      getGroupFormPage(params).then((res) => {
        this.listLoading = false
        if (res.code === 1) {
          const d = res.data
          this.tableData = d.records || []
          this.total = Number(d.total)
        }
      })
    },
  },
}
</script>