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