新增 部门列表;更新 账户,权限参数

src/apis/fetch.js

@@ -117,4 +117,24 @@ export default {
   getPermissionByUserId(data) {
     return $http("/role/permission/getPermissionByUserId", data);
   },
+
+  // 添加部门
+  addDepartment(data) {
+    return $http("/department/add", data);
+  },
+
+  // 获取部门列表
+  getDepartmentList(data) {
+    return $http("/department/list", data);
+  },
+
+  // 获取部门下拉
+  getDepartmentSelect(data) {
+    return $http("/department/select", data);
+  },
+
+  // 修改部门
+  updateDepartment(data) {
+    return $http("/department/update", data);
+  },
 };

src/auth/menuData.js

@@ -1,7 +1,8 @@
 let menuData = [
   {
     icon: "el-icon-s-data",
-    title: "航次",
+    title: "航次管理",
+    code: "VOYAGEMANAGE",
     items: [
       {
         path: "/voyage/voyageList",
@@ -13,6 +14,7 @@ let menuData = [
   {
     icon: "el-icon-s-data",
     title: "代理管理",
+    code: "PROXYMANAGE",
     items: [
       {
         path: "/agencyManage/agencyCompanyList",
@@ -24,6 +26,7 @@ let menuData = [
   {
     icon: "el-icon-s-data",
     title: "货种管理",
+    code: "CARGOMANAGE",
     items: [
       {
         path: "/cargoManage/cargoList",
@@ -35,6 +38,7 @@ let menuData = [
   {
     icon: "el-icon-s-data",
     title: "账户管理",
+    code: "ACCOUNTMANAGE",
     items: [
       {
         path: "/accountManage/subAccountList",
@@ -45,8 +49,14 @@ let menuData = [
   },
   {
     icon: "el-icon-s-data",
-    title: "权限管理",
+    title: "部门权限管理",
+    code: "PERMISSIONMANAGE",
     items: [
+      {
+        path: "/authManage/departmentList",
+        name: "部门列表",
+        code: "DEPTMANAGE",
+      },
       {
         path: "/authManage/roleList",
         name: "角色列表",

src/router/index.js

@@ -68,6 +68,15 @@ const router = createRouter({
       },
       component: () => import("../views/authManage/roleList.vue"),
     },
+    {
+      path: "/authManage/departmentList",
+      name: "departmentList",
+      meta: {
+        title: "部门列表",
+        code: "DEPTLIST",
+      },
+      component: () => import("../views/authManage/departmentList.vue"),
+    },
     {
       path: "/authManage/addRole",
       name: "addRole",

src/store/index.js

@@ -73,15 +73,23 @@ const store = createStore({
           commit("setUserPermissionData", arr);
           localStorage.setItem("rolePermission", arr);
           let data = [];
-          for (let i of menuData) {
-            if (i.title == "航次") {
-              data.push(i);
+          for (let i in menuData) {
+            if (menuData[i].title == "航次管理") {
+              data[i] = menuData[i];
             } else {
-              if (arr.indexOf(i.items[0].code) != -1) {
-                data.push(i);
+              if (arr.indexOf(menuData[i].code) != -1) {
+                data[i] = menuData[i];
+                let arr0 = [];
+                for (let j in data[i].items) {
+                  if (arr.indexOf(data[i].items[j].code) != -1) {
+                    arr0.push(data[i].items[j]);
+                  }
+                }
+                data[i].items = arr0;
               }
             }
           }
+          console.log(data);
           commit("setMenuData", data);
         });
       });

src/views/accountManage/subAccountList.vue

@@ -11,7 +11,7 @@
         ></el-input>
         <div class="seach-btn" @click="getSubAccountList">查询</div>
       </div>
-      <el-button v-auth="'ADDACCOUNT'" type="primary" @click="visable = true"
+      <el-button v-auth="'ADDACCOUNT'" type="primary" @click="showAddModal"
         >添加账号</el-button
       >
     </div>
@@ -40,8 +40,22 @@
                 v-model="ruleForm.phone"
               ></el-input>
             </el-form-item>
-
-            <el-form-item prop="roleId" label="角色">
+            <el-form-item prop="deptId" label="部门">
+              <el-select
+                style="width: 280px"
+                v-model="ruleForm.deptId"
+                placeholder="请选择部门"
+                @change="getRoleSelect"
+              >
+                <el-option
+                  v-for="item in departmentSelect"
+                  :key="item"
+                  :label="item.value"
+                  :value="item.key"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item v-if="ruleForm.deptId" prop="roleId" label="角色">
               <el-select
                 style="width: 280px"
                 v-model="ruleForm.roleId"
@@ -95,7 +109,13 @@
           align="center"
         ></el-table-column>
         <el-table-column
-          prop="role_name"
+          prop="deptName"
+          label="部门"
+          min-width="80"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="roleName"
           label="角色权限"
           min-width="80"
           align="center"
@@ -166,6 +186,7 @@ let ruleForm = ref({
   name: "",
   phone: "",
   roleId: "",
+  deptId: "",
 });
 const rules = reactive({
   name: [
@@ -189,8 +210,19 @@ const rules = reactive({
       trigger: "blur",
     },
   ],
+  deptId: [
+    {
+      required: true,
+      message: "请选择部门",
+      trigger: "blur",
+    },
+  ],
 });
 
+function showAddModal() {
+  visable.value = true;
+}
+
 async function getSubAccountList() {
   let res = await api.getSubAccountList({
     term: term.value,
@@ -246,11 +278,13 @@ function resetForm() {
 }
 
 function showUpdateModal(item) {
+  getRoleSelect();
   visable.value = true;
   accountId.value = item.id;
   ruleForm.value = {
     name: item.userName,
     phone: item.phone,
+    deptId: item.deptId,
     roleId: item.roleId,
   };
 }
@@ -258,16 +292,25 @@ function showUpdateModal(item) {
 let roleSelect = ref([]);
 
 async function getRoleSelect() {
+  if (!ruleForm.value.deptId) return;
   let res = await api.getRoleSelect({
     loginAccountId: loginAccountId.value,
+    deptId: ruleForm.value.deptId,
   });
   roleSelect.value = res.data.result;
 }
+let departmentSelect = ref([]);
+async function getDepartmentSelect() {
+  let res = await api.getDepartmentSelect({
+    loginAccountId: loginAccountId.value,
+  });
+  departmentSelect.value = res.data.result;
+}
 
 onMounted(() => {
   loginAccountId.value = localStorage.loginAccountId;
   getSubAccountList();
-  getRoleSelect();
+  getDepartmentSelect();
 });
 </script>
 

src/views/authManage/addRole.vue

@@ -7,12 +7,23 @@
       label-width="110px"
       label-position="left"
     >
-      <el-form-item prop="roleCode" label="角色代码">
-        <el-input style="width: 280px" v-model="ruleForm.roleCode"></el-input>
-      </el-form-item>
       <el-form-item prop="roleName" label="角色名称">
         <el-input style="width: 280px" v-model="ruleForm.roleName"></el-input>
       </el-form-item>
+      <el-form-item prop="deptId" label="角色">
+        <el-select
+          style="width: 280px"
+          v-model="ruleForm.deptId"
+          placeholder="请选择部门"
+        >
+          <el-option
+            v-for="item in departmentSelect"
+            :key="item"
+            :label="item.value"
+            :value="item.key"
+          />
+        </el-select>
+      </el-form-item>
     </el-form>
   </el-card>
   <el-card class="mt30 p30">
@@ -34,50 +45,6 @@
       }}</el-button>
     </div>
   </el-card>
-
-  <!-- <el-card class="mt30">
-    <h4>权限设置</h4>
-    <div v-for="(item, index) in basePermissionData" :key="item" class="mt30">
-      <div class="df aic mb20">
-        <div class="mr20">{{ item.label }}</div>
-        <el-switch
-          v-model="item.status"
-          inline-prompt
-          active-text="启用"
-          :active-value="true"
-          :inactive-value="false"
-          inactive-text="禁用"
-          @change="change($event, item.code, index)"
-        />
-      </div>
-      <div class="ml30" v-if="index == 0">
-        <div class="mb10" v-for="(item1, index1) in item.children">
-          <div class="df aic mb10">
-            <div class="mr20">{{ item1.label }}</div>
-            <el-switch
-              v-model="item1.status"
-              inline-prompt
-              active-text="启用"
-              :active-value="true"
-              :inactive-value="false"
-              inactive-text="禁用"
-              @change="change($event, item1.code, index, index1)"
-            />
-          </div>
-          <div class="df aic">
-            <div class="mr20" v-for="(item2, index2) in item1.children">
-              {{ item2.label }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div v-else class="df aic ml30">
-        <div class="mr20" v-for="(item1, index1) in item.children">
-          {{ item1.label }}
-        </div>
-      </div>
-    </div>
-  </el-card> -->
 </template>
 
 <script setup>
@@ -94,21 +61,21 @@ const route = useRoute();
 let loginAccountId = ref(0);
 let form = ref(null);
 let ruleForm = ref({
-  roleCode: "",
   roleName: "",
+  deptId: "",
 });
 const rules = reactive({
-  roleCode: [
+  roleName: [
     {
       required: true,
-      message: "请填写角色代码",
+      message: "请填角色名称",
       trigger: "blur",
     },
   ],
-  roleName: [
+  deptId: [
     {
       required: true,
-      message: "请填角色名称",
+      message: "请选择部门",
       trigger: "blur",
     },
   ],
@@ -130,11 +97,11 @@ async function getRoleDetail(roleId) {
     roleId,
   });
   if (res.data.status == 0) {
-    let { code, roleName, permission, cargoLimit, proxyLimit } =
+    let { code, departmentId, roleName, permission, cargoLimit, proxyLimit } =
       res.data.result;
     ruleForm.value = {
-      roleCode: code,
       roleName,
+      deptId: departmentId,
     };
     let c = cargoLimit.split(",");
     let cargoLimitArr = [];
@@ -198,8 +165,17 @@ async function addRole() {
   }
 }
 
+let departmentSelect = ref([]);
+async function getDepartmentSelect() {
+  let res = await api.getDepartmentSelect({
+    loginAccountId: loginAccountId.value,
+  });
+  departmentSelect.value = res.data.result;
+}
+
 onMounted(() => {
   loginAccountId.value = localStorage.loginAccountId;
+  getDepartmentSelect();
   let id = route.query.roleId;
   if (id) {
     getRoleDetail(id);

src/views/authManage/departmentList.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="full-container-p24">
+    <div style="display: flex; justify-content: space-between">
+      <div style="display: flex">
+        <el-input
+          placeholder="请输入部门"
+          prefix-icon="el-icon-search"
+          v-model="term"
+          clearable
+          style="height: 32px; width: 330px; line-height: 32px"
+        ></el-input>
+        <div class="seach-btn" @click="getDepartmentList">查询</div>
+      </div>
+      <el-button v-auth="'ADDUPDATEDEPT'" type="primary" @click="visable = true"
+        >添加部门</el-button
+      >
+    </div>
+
+    <el-dialog
+      v-model="visable"
+      :title="deptId ? '修改部门' : '添加部门'"
+      width="550px"
+      @close="resetForm()"
+    >
+      <template v-slot:default>
+        <div class="df jcc">
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            ref="form"
+            label-width="110px"
+            label-position="left"
+          >
+            <el-form-item prop="name" label="部门名称">
+              <el-input
+                style="width: 280px"
+                v-model="ruleForm.deptName"
+              ></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+      <template v-slot:footer>
+        <div class="dialog-footer">
+          <el-button @click="resetForm">取 消</el-button>
+          <el-button type="primary" @click="addDepartment(ruleForm)">
+            确 定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <div style="margin-top: 24px">
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column
+          type="index"
+          label="序号"
+          min-width="40"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="departmentName"
+          label="部门名称"
+          min-width="80"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createTime"
+          label="创建时间"
+          min-width="80"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          v-auth="'ADDUPDATEDEPT'"
+          label="操作"
+          min-width="120"
+          align="center"
+        >
+          <template v-slot="scope">
+            <div class="df aic jcsa">
+              <!-- <el-switch
+                v-model="scope.row.accountStatus"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                active-text="启用"
+                inactive-text="禁用"
+                :active-value="1"
+                :inactive-value="0"
+              />
+
+              <div
+                style="
+                  color: red;
+                  margin-left: 10px;
+                  font-size: 14px;
+                  text-decoration: underline;
+                  cursor: pointer;
+                "
+              >
+                删除
+              </div> -->
+              <el-button
+                @click="showUpdateModal(scope.row)"
+                size="small"
+                type="primary"
+                >修改部门</el-button
+              >
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="width: 100%; text-align: right; margin-top: 43px">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          @current-change="pageChange"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import api from "../../apis/fetch";
+import { ref, onMounted, reactive } from "vue";
+import { ElNotification, ElMessageBox } from "element-plus";
+
+let tableData = ref([]);
+let currentPage = ref(1);
+let total = ref(0);
+let term = ref("");
+let loginAccountId = ref(0);
+let deptId = ref("");
+let ruleForm = ref({
+  deptName: "",
+});
+const rules = reactive({
+  deptName: [
+    {
+      required: true,
+      message: "请填写部门名称",
+      trigger: "blur",
+    },
+  ],
+});
+
+async function getDepartmentList() {
+  let res = await api.getDepartmentList({
+    term: term.value,
+    currentPage: currentPage.value,
+    size: 10,
+    loginAccountId: loginAccountId.value,
+  });
+  if (res.data.status == 0) {
+    tableData.value = res.data.result;
+    for (let i of tableData.value) {
+      if (i.roleId == 0) {
+        i.roleId = "";
+      }
+    }
+    total.value = res.data.total;
+  } else {
+    tableData.value = [];
+    total.value = 0;
+  }
+}
+
+function pageChange(e) {
+  currentPage.value = e;
+  getDepartmentList();
+}
+let visable = ref(false);
+let form = ref(null);
+async function addDepartment() {
+  let postData = {
+    ...ruleForm.value,
+    loginAccountId: loginAccountId.value,
+  };
+  if (deptId.value) {
+    postData.deptId = deptId.value;
+  }
+  let res = await api[deptId.value ? "updateDepartment" : "addDepartment"](
+    postData
+  );
+  let status = res.data.status == 0;
+  ElNotification({
+    title: status ? "成功" : "失败",
+    duration: 1500,
+    message: res.data.msg,
+    type: status ? "success" : "error",
+  });
+  resetForm();
+  getDepartmentList();
+}
+function resetForm() {
+  visable.value = false;
+  deptId.value = "";
+  form.value.resetFields();
+}
+
+function showUpdateModal(item) {
+  visable.value = true;
+  deptId.value = item.id;
+  ruleForm.value = {
+    deptName: item.departmentName,
+  };
+}
+
+onMounted(() => {
+  loginAccountId.value = localStorage.loginAccountId;
+  getDepartmentList();
+});
+</script>
+
+<style scoped>
+.seach-btn {
+  display: inline-block;
+  width: 60px;
+  height: 38px;
+  background: #0094fe;
+  border-radius: 2px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  text-align: center;
+  line-height: 38px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+</style>