新增 新增角色;子账户列表;角色列表

src/main.js

@@ -16,6 +16,7 @@ router.beforeEach(async (to, from, next) => {
   let userId = localStorage.userId;
   if (userId) {
     store.commit("changeLogin", true);
+    store.dispatch("GetBasePermissionData", localStorage.loginAccountId);
     if (0 === to.matched.length) {
       next("/voyage/voyageList");
     } else if (to.path == "/login" || to.path == "/") {

src/store/index.js

@@ -10,6 +10,8 @@ const store = createStore({
     secondTitle: "",
     currentMenuItem: "/cargoOwnerManage/cargoOwnerList",
     baseurl,
+    basePermissionData: [],
+    currentPermissionData: [],
   },
   mutations: {
     changefirstTitle(state, text) {
@@ -24,12 +26,41 @@ const store = createStore({
     setCurrentMenuItem(state, index) {
       state.currentMenuItem = index;
     },
+    setBasePermissionData(state, data) {
+      state.basePermissionData = data;
+    },
+    setCurrentPermissionData(state, data) {
+      state.currentPermissionData = data;
+    },
+    updateCurrentPermissionData(state, params) {
+      function update(data) {
+        for (let i of data) {
+          i.status = true;
+          if (i.children.length) {
+            update(i.children);
+          }
+        }
+      }
+      let { status, code } = params;
+      console.log(status);
+    },
   },
   actions: {
-    GetPermissionData({ commit }, loginAccountId) {
+    GetBasePermissionData({ commit }, loginAccountId) {
       return new Promise((resolve, reject) => {
         api.getPermisiionData({ loginAccountId }).then((e) => {
-          console.log(e);
+          function exchange(data) {
+            for (let i of data) {
+              i.status = true;
+              if (i.children.length) {
+                exchange(i.children);
+              }
+            }
+            return data;
+          }
+          let data = exchange(e.data.result);
+          commit("setBasePermissionData", data);
+          commit("setCurrentPermissionData", data);
         });
       });
     },

src/views/accountManage/subAccountList.vue

@@ -0,0 +1,235 @@
+<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="getSubAccountList">查询</div>
+      </div>
+      <el-button type="primary" @click="visable = true">添加账号</el-button>
+    </div>
+
+    <el-dialog v-model="visable" title="添加账号" width="550px">
+      <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.name"></el-input>
+            </el-form-item>
+            <el-form-item prop="phone" label="手机号">
+              <el-input
+                style="width: 280px"
+                v-model="ruleForm.phone"
+              ></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="addSubAccount(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="80"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="userName"
+          label="姓名"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="contactName"
+          label="手机号"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="phone"
+          label="密码"
+          min-width="80"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createTime"
+          label="角色权限"
+          min-width="160"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="操作" min-width="120" align="center">
+          <template v-slot="scope">
+            <div class="df aic">
+              <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>
+              <div
+                style="
+                  color: blue;
+                  margin-left: 10px;
+                  font-size: 14px;
+                  text-decoration: underline;
+                  cursor: pointer;
+                "
+              >
+                修改角色权限
+              </div>
+            </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 ruleForm = ref({
+  name: "",
+  phone: "",
+});
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: "请填写名称",
+      trigger: "blur",
+    },
+  ],
+  phone: [
+    {
+      required: true,
+      message: "请填联手机号",
+      trigger: "blur",
+    },
+  ],
+});
+
+async function getSubAccountList() {
+  let res = await api.getSubAccountList({
+    term: term.value,
+    currentPage: currentPage.value,
+    size: 10,
+    loginAccountId: loginAccountId.value,
+  });
+  if (res.data.status == 0) {
+    tableData.value = res.data.result;
+    total.value = res.data.total;
+  } else {
+    tableData.value = [];
+    total.value = 0;
+  }
+}
+
+function pageChange(e) {
+  currentPage.value = e;
+  getSubAccountList();
+}
+let visable = ref(false);
+let form = ref(null);
+async function addSubAccount() {
+  console.log(ruleForm.value);
+  let res = await api.addSubAccount({
+    ...ruleForm.value,
+    loginAccountId: loginAccountId.value,
+  });
+  console.log(res);
+  let status = res.data.status == 0;
+  ElNotification({
+    title: status ? "成功" : "失败",
+    duration: 1500,
+    message: res.data.msg,
+    type: status ? "success" : "error",
+  });
+  resetForm();
+  getSubAccountList();
+}
+function resetForm() {
+  visable.value = false;
+  form.value.resetFields();
+}
+
+function closeModal() {
+  proxyName.value = "";
+  contactPhone.value = "";
+  contactName.value = "";
+}
+
+onMounted(() => {
+  loginAccountId.value = localStorage.loginAccountId;
+  getSubAccountList();
+});
+</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>

src/views/authManage/addRole.vue

@@ -0,0 +1,146 @@
+<template>
+  <el-card>
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="form"
+      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>
+  </el-card>
+  <el-card class="mt30 p30">
+    <h4 class="mb30">权限设置</h4>
+    <el-tree
+      ref="treeRef"
+      :data="currentPermissionData"
+      show-checkbox
+      default-expand-all
+      node-key="code"
+      highlight-current
+      :props="defaultProps"
+      style="display: flex; justify-content: space-between"
+      @check="getTree"
+  /></el-card>
+
+  <el-card class="mt30" style="display: none">
+    <h4>权限设置</h4>
+    <div
+      v-for="(item, index) in currentPermissionData"
+      :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>
+import api from "../../apis/fetch";
+import store from "../../store";
+import { ref, onMounted, reactive, computed } from "vue";
+import { ElNotification, ElMessageBox } from "element-plus";
+import { mapGetters } from "vuex";
+
+let loginAccountId = ref(0);
+let form = ref(null);
+let ruleForm = ref({
+  roleCode: "",
+  roleName: "",
+});
+const rules = reactive({
+  roleCode: [
+    {
+      required: true,
+      message: "请填写角色代码",
+      trigger: "blur",
+    },
+  ],
+  roleName: [
+    {
+      required: true,
+      message: "请填角色名称",
+      trigger: "blur",
+    },
+  ],
+});
+let treeRef = ref(null);
+function getTree(checkedNodes, checkedKeys) {
+  let postData = [...checkedKeys.checkedKeys, ...checkedKeys.halfCheckedKeys];
+  console.log(postData);
+}
+const defaultProps = {
+  children: "children",
+  label: "label",
+};
+
+function change(status, code) {
+  store.commit("updateCurrentPermissionData", { status, code });
+}
+
+let currentPermissionData = computed(() => store.state.currentPermissionData);
+onMounted(() => {
+  loginAccountId.value = localStorage.loginAccountId;
+});
+</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>

src/views/authManage/roleList.vue

@@ -0,0 +1,133 @@
+<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="getRoleList">查询</div>
+      </div>
+      <el-button type="primary" @click="addRole">添加角色</el-button>
+    </div>
+    <div style="margin-top: 24px">
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column
+          type="index"
+          label="序号"
+          min-width="80"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="code"
+          label="角色代码"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="roleName"
+          label="角色名称"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createTime"
+          label="创建时间"
+          min-width="160"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="操作" min-width="120" align="center">
+          <template v-slot="scope">
+            <div
+              style="
+                color: red;
+                font-size: 14px;
+                text-decoration: underline;
+                cursor: pointer;
+              "
+              @click="roleDetail(scope.row)"
+            >
+              详情
+            </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";
+import router from "../../router";
+
+let tableData = ref([]);
+let currentPage = ref(1);
+let total = ref(0);
+let term = ref("");
+let loginAccountId = ref(0);
+
+async function getRoleList() {
+  let res = await api.getRoleList({
+    term: term.value,
+    currentPage: currentPage.value,
+    size: 10,
+    loginAccountId: loginAccountId.value,
+  });
+  if (res.data.status == 0) {
+    tableData.value = res.data.result;
+    total.value = res.data.total;
+  } else {
+    tableData.value = [];
+    total.value = 0;
+  }
+}
+
+function pageChange(e) {
+  currentPage.value = e;
+  getRoleList();
+}
+
+function addRole() {
+  router.push("/authManage/addRole");
+}
+
+function roleDetail(item) {
+  console.log(item);
+}
+
+onMounted(() => {
+  loginAccountId.value = localStorage.loginAccountId;
+  getRoleList();
+});
+</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>