index.vue

<template>
  <el-row class="page-container dict">
    <el-container class="page-main" :gutter="20">
      <el-aside width="300px" class="left-content">
        <el-col :span="24" class="left-title">
          <span>协作组列表</span>
        </el-col>
        <el-col :span="24" class="left-search">
          <el-input
            v-model.trim="searchVal"
            clearable
            :placeholder="placeholder"
          >
          </el-input>
        </el-col>
        <el-col class="dict-list">
          <el-tree
            @node-click="handClick"
            class="filter-tree"
            :data="dictList"
            highlight-current
            :props="{
              children: 'children',
              label: 'name',
            }"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
          >
          </el-tree>
        </el-col>
      </el-aside>
      <el-main>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="用户管理" name="first">
            <GroupUser :group-id="groupId"></GroupUser>
          </el-tab-pane>
          <el-tab-pane label="表单管理" name="second">
            <GroupForm :group-id="groupId"></GroupForm>
          </el-tab-pane>
          <el-tab-pane label="参数配置" name="fifth">
            <ParameterConfig :group-id="groupId"></ParameterConfig>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <dialog-form
      ref="edit"
      :width="'450px'"
      :title="dictTitle"
      :form-data="formData"
      :form-edit="formEdit"
      @handleConfirm="handleConfirm"
    />
  </el-row>
</template>

<script>
import GroupUser from "./GroupUser"
import GroupForm from "./GroupForm"
import ParameterConfig from "./ParameterConfig.vue"
import { translateListToTree } from "@/utils/handleRoutes"
import { getCoopGroupList, addCoopGroup } from "@/api/coop-group.js"
export default {
  name: "CollaGroup",
  components: {
    GroupUser,
    GroupForm,
    ParameterConfig,
  },
  data() {
    return {
      groupId: "",
      groupName: "",
      activeName: "first",
      total: 0,
      searchList: [
        {
          type: "input",
          label: "",
          prop: "name",
          placeholder: "名称",
          labelWidth: "0",
          slot: {
            slot: "append",
            type: "button",
            icon: "el-icon-search",
          },
        },
      ],
      dictTitle: "",
      isActive: -1,
      dictList: [],
      typeCode: "",
      searchVal: "",
      placeholder: "请输入关键字",
      listLoading: false,
      tabData: [],
      name: "",
      formEdit: {},
      formData: [
        {
          type: "input",
          label: "名称",
          prop: "groupName",
          rules: [{ required: true, message: "名称必填" }],
        },
        {
          type: "input",
          label: "代码",
          rules: [{ required: true, message: "分类必填" }],
          prop: "groupCode",
        },
        {
          type: "select",
          label: "专病库",
          rules: [{ required: true, message: "分类必填" }],
          prop: "diseaseCode",
          optsFormatter: () => {
            return this.dictMap && this.dictMap["disease_code"]
          },
        },
        {
          type: "select",
          label: "协作组等级",
          rules: [{ required: true, message: "协作组等级必填" }],
          prop: "level",
          optsFormatter: () => {
            return this.dictMap && this.dictMap["group_level"]
          },
        },
      ],
    }
  },
  watch: {
    searchVal(val) {
      this.$refs.tree.filter(val)
    },
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getListIdx(list, id) {
      let listIdx = -1
      for (var i = 0; i < list.length; i++) {
        if (list[i].id === id) {
          listIdx = i
          break
        }
      }
      return listIdx
    },
    // 获得列表
    getDictList() {
      getCoopGroupList().then((res) => {
        if (res.code === 1) {
          const d = res.data
          this.dictList = translateListToTree(
            d.map((item) => {
              return {
                ...item,
                name: item.groupName,
              }
            })
          )
        }
      })
    },

    // 点击左侧列表
    handClick({ id, groupName }) {
      this.groupId = id
      this.groupName = groupName
    },

    // 新增
    handleAdd(row) {
      this.dictTitle = row ? "编辑" : "新增"
      this.formEdit = Object.assign({}, row)
      this.$refs.edit.open()
    },

    // 保存
    handleConfirm(d) {
      const form = Object.assign({}, d)
      let msg = form.id ? "修改成功" : "保存成功"
      form.diseaseName = this.$handle.formatDicList(
        this.dictMap["disease_code"],
        form.diseaseCode
      )
      // 分类新增编辑
      addCoopGroup(form)
        .then((res) => {
          if (res.code === 1) {
            this.$message.success(msg)
            this.$refs.edit.close()
          }
        })
        .catch(() => {
          this.$refs.edit.loading = false
        })
    },
  },
  mounted() {
    this.getDictList()
  },
}
</script>

<style lang="scss" scoped>
.el-main {
  padding: 0 20px;
}
</style>