-优化业务配置

src/views/ToConfigure/BusinessDirection/BusinessDirection.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <el-table
+      ref="moduleTable"
+      :data="moduleData"
+      style="width: 100%;margin-bottom: 20px;"
+      row-key="id"
+      border
+      :tree-props="{children: 'childModules', hasChildren: 'hasChildren'}"
+      header-align="center"
+      size="mini"
+      :header-cell-style="{ background: '#F2F3F6' }"
+      fit
+    >
+      <el-table-column v-if="false" prop="id" label="ID" width="180" align="center" />
+      <el-table-column prop="moduleName" label="模块名称">
+        <template slot="header">
+          模块名称<i class="el-icon-circle-plus" @click="handlerModule('add')" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="creator" label="创建人" width="150" align="center" />
+      <el-table-column prop="createTime" label="创建时间" width="150" align="center" />
+      <el-table-column label="操作" width="240" align="center">
+        <template slot-scope="scope">
+          <el-button size="mini" plain @click="handlerModule('add', scope.row, scope.$index)">添加</el-button>
+          <el-button size="mini" plain type="primary" @click="handlerModule('edit', scope.row, scope.$index)">编辑</el-button>
+          <el-button size="mini" plain type="danger" @click="handlerModule('delete', scope.row, scope.$index)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog :title="moduleTitle" :visible.sync="moduleDialog" width="30%" :before-close="() => {moduleDialog = false}">
+      <el-form ref="moduleForm" :model="moduleForm">
+        <template v-if="curcentModule === 'add'">
+          <el-form-item label="父模块:" :label-width="formLabelWidth">
+            <el-col :span="11">{{ curcentParent }}</el-col>
+          </el-form-item>
+          <el-form-item
+            v-for="(moduleName, index) in moduleForm.moduleNames"
+            :key="index"
+            label="模块名称:"
+            :label-width="formLabelWidth"
+            :prop="'moduleNames.' + index"
+            :rules="[
+              { required: true, message: '请输入模块名称', trigger: 'blur' },
+              { min: 1, max: 20, message: '模块名称过长', trigger: 'blur' }
+            ]"
+          >
+            <el-col :span="11">
+              <el-input v-model="moduleForm.moduleNames[index]" autocomplete="off" placeholder="不超过20个字符" />
+            </el-col>
+            <el-col v-show="index === moduleForm.moduleNames.length-1" :span="2" :offset="1">
+              <i class="el-icon-circle-plus-outline" @click="addModuleForm()" />
+            </el-col>
+          </el-form-item>
+        </template>
+        <template v-if="curcentModule === 'edit'">
+          <el-form-item label="父模块:" :label-width="formLabelWidth">
+            <el-col :span="11">{{ curcentParent }}</el-col>
+          </el-form-item>
+          <el-form-item label="模块名称:" :label-width="formLabelWidth">
+            <el-col :span="11">
+              <el-input v-model="moduleForm.moduleNames[0]" autocomplete="off" placeholder="不超过20个字符" />
+            </el-col>
+          </el-form-item>
+        </template>
+        <el-col v-if="curcentModule === 'delete'" :span="11">
+          是否要删除模块：<span style="color: #E6A23C">{{ moduleForm.moduleNames[0] }}</span>
+        </el-col>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: { type: Array, default: null }
+  },
+  data() {
+    return {
+      moduleData: this.data,
+      moduleDialog: false,
+      formLabelWidth: '120px',
+      curcentModule: '', // 当前模块类型
+      moduleForm: { bizId: null, moduleNames: [null], parentId: null, id: null }, // 添加模块form
+      moduleTitle: ''
+    }
+  },
+  methods: {
+    handlerModule(type, data, index) { // 模块处理
+      this.curcentModule = type
+      this.moduleForm = { bizId: null, moduleNames: [null], parentId: -1, id: null }// 初始化
+      this.curcentParent = '无'
+      this.moduleTitle = '新增方向'
+      if (data && type === 'add') {
+        this.moduleDialog = true
+        this.moduleTitle = '新增方向'
+        this.curcentParent = data.moduleName
+        this.moduleForm.parentId = data.id
+      } else if (data && type === 'edit') {
+        this.moduleDialog = true
+        this.moduleTitle = '编辑方向'
+        this.moduleForm.id = data.id
+        this.curcentParent = data.parentId === -1 ? '无' : data.parentModuleName
+        this.moduleForm.parentId = data.parentId
+        this.moduleForm.moduleNames[0] = data.moduleName
+      } else if (data && type === 'delete') {
+        if (data.childModules && data.childModules.length > 0) {
+          this.$message({ message: '该模块下存在子模块，不允许删除', type: 'error' })
+        } else {
+          this.moduleDialog = true
+          this.moduleTitle = '删除确认'
+          this.moduleForm.id = data.id
+          this.moduleForm.moduleNames[0] = data.moduleName
+        }
+      } else {
+        this.moduleDialog = true
+      }
+    }
+  }
+
+}
+</script>
+
+<style>
+
+</style>

src/views/ToConfigure/configure.vue

@@ -3,7 +3,7 @@
     <el-header class="header">
       <el-menu :default-active="activeIndex" active-text-color="#409EFF" mode="horizontal" @select="handleSelect">
         <el-menu-item index="0">组织配置</el-menu-item>
-        <el-menu-item index="1">业务模块配置</el-menu-item>
+        <el-menu-item index="1">业务配置</el-menu-item>
       </el-menu>
     </el-header>
     <section v-show="activeIndex === '0'" class="one-hao">
@@ -144,7 +144,11 @@
               <div class="table-title">{{ curcentTreeData.label }}</div>
               <div class="table-id">ID:{{ curcentTreeData.id }}</div>
             </el-row>
-            <div>
+            <el-menu :default-active="businessCode" active-text-color="#409EFF" mode="horizontal" class="classMenuItem" @select="handlEmenuItem">
+              <el-menu-item index="0">业务技术模块</el-menu-item>
+              <el-menu-item index="1">业务需求方向</el-menu-item>
+            </el-menu>
+            <div v-if="businessCode === '0'">
               <el-table
                 ref="moduleTable"
                 :data="moduleData"
@@ -188,6 +192,9 @@
                 </el-table-column>
               </el-table>
             </div>
+            <div v-if="businessCode === '1'">
+              <Business :data="moduleData" />
+            </div>
           </el-main>
           <normal-dialog :show-dialog="moduleDialog" :title="moduleTitle" @confirm="confirmModule('moduleForm')" @cancel="moduleDialog=false">
             <el-form ref="moduleForm" :model="moduleForm">
@@ -238,9 +245,14 @@
 
 import { teamCreateTeam, memberQueryMemberInfoByIDAPorName, teamQueryTeamInfoList, configShowTeamAndMemberEnum, teamIsTeamNameRepetition, teamQueryTeamInfo, teamModifyTeam, getBizList, verifyIsAdmin, addBiz, updateBiz, deleteBiz, queryBizModuleList, addModule, updateBizModule, deleteBizModule } from '@/api/configure'
 import normalDialog from '@/components/dialog/normalDialog'
+import Business from '@/views/ToConfigure/BusinessDirection/BusinessDirection.vue'
+
 export default {
   name: 'PersonalWorkbench',
-  components: { normalDialog },
+  components: {
+    normalDialog,
+    Business
+  },
   data() {
     return {
       userInformation: localStorage.getItem('username'),
@@ -275,6 +287,7 @@ export default {
       curIndex: 1,
       pageSize: 15,
       activeIndex: '0',
+      businessCode: '0',
       isAdmin: false, // 是否管理员
       treeData: [],
       curcentTreeData: { id: null, label: null },
@@ -319,6 +332,9 @@ export default {
     handleSelect(key, keyPath) { // 切换导航
       this.activeIndex = key
     },
+    handlEmenuItem(key, keyPath) { // 切换导航 0业务技术模块 1业务需求方向
+      this.businessCode = key
+    },
     test2(item, e) { // 获取团队人员信息
       if (typeof this.test[item.idap] === 'undefined') {
         item.role = e
@@ -784,7 +800,6 @@ export default {
     .table-main{
       display: flex;
       align-items: center;
-      margin-bottom: 20px;
     }
     .table-title {
       color: #606266;
@@ -801,6 +816,9 @@ export default {
       align-items: center;
     }
   }
+  .classMenuItem {
+    margin-bottom: 20px;
+  }
   .custom-tree-node {
     flex: 1;
     display: flex;