新增账号新增编辑表单，账号列表页面优化

ebike-operate/src/views/SysManage/AccountManage/index.vue

@@ -79,6 +79,16 @@
     :scroll="{ x: 'max-content' }"
   >
     <template #bodyCell="{ column ,record}">
+      <template v-if="column.key === 'state'">
+        <a-tag
+          v-if="record.state == '0'"
+          color="#f50"
+        >禁用</a-tag>
+        <a-tag
+          v-if="record.state == '1'"
+          color="#87d068"
+        >启用</a-tag>
+      </template>
       <template v-if="column.key === 'action'">
         <a-space>
           <a @click="handleAdd('编辑账号',record)">编辑</a>
@@ -120,37 +130,37 @@ const formModel = ref(null);
 const columns = [
   {
     title: '所属地区',
-    dataIndex: 'orgName',
+    dataIndex: 'zoneName',
     width: 200,
-    key: 'orgName',
+    key: 'zoneName',
     align: 'center'
   },
   {
     title: '用户名称',
+    dataIndex: 'username',
+    width: 200,
+    key: 'username',
+    align: 'center'
+  },
+  {
+    title: '用户账号',
+    dataIndex: 'phone',
+    width: 200,
+    key: 'phone',
+    align: 'center'
+  },
+  {
+    title: '角色类型',
     dataIndex: 'roleName',
     width: 200,
     key: 'roleName',
     align: 'center'
   },
-  {
-    title: '用户账号',
-    dataIndex: 'roleDescription',
-    width: 200,
-    key: 'roleDescription',
-    align: 'center'
-  },
-  {
-    title: '角色类型',
-    dataIndex: 'staffCount',
-    width: 200,
-    key: 'staffCount',
-    align: 'center'
-  },
   {
     title: '状态',
-    dataIndex: 'webCount',
+    dataIndex: 'state',
     width: 200,
-    key: 'webCount',
+    key: 'state',
     align: 'center'
   },
   {
@@ -169,16 +179,9 @@ const columns = [
   },
   {
     title: '创建时间',
-    dataIndex: 'appletCount',
+    dataIndex: 'createdAt',
     width: 200,
-    key: 'appletCount',
+    key: 'createdAt',
-    align: 'center'
-  },
-  {
-    title: '登录日志',
-    dataIndex: 'appletCount',
-    width: 200,
-    key: 'appletCount',
     align: 'center'
   },
   {
@@ -244,9 +247,12 @@ const handleAdd = async (title, record) => {
   nextTick(() => {
     if (formModel.value) {
       const params = record == null ? {} : {
-        roleName: record['roleName'],
+        staffId: record['staffId'],
-        roleDescription: record['roleDescription'],
+        roleId: record['roleId'] == null ? [] : record['roleId'].split(","),
-        roleId: record['roleId'],
+        zoneId: record['zoneId'] == null ? [] : record['zoneId'].split(","),
+        phone: record['phone'],
+        username: record['username'],
+        state: record['state'],
         orgId: record['orgId']
       }
       formModel.value.openForm(params);

ebike-operate/src/views/form/accountmanage/AccountManage.vue

@@ -16,28 +16,38 @@
             label="角色名称"
             :label-col="{ span: 4 }"
             :wrapper-col="{ span: 12 }"
-            name="roleName"
+            name="roleId"
             required
-            :rules="[{ required: true, message: '请输角色名称' }]"
+            :rules="[{ required: true, message: '请选择角色名称' }]"
           >
-            <a-input
+            <a-select
-              v-model:value="form.roleName"
+              mode="multiple"
-              placeholder="请输角色名称"
+              style="width: 100%"
-            />
+              placeholder="请选择角色名称"
+              v-model:value="form.roleId"
+            >
+              <a-select-option
+                v-for="(item) in roleLit"
+                :key="item.id"
+                :value="item.id"
+              >{{ item.name }}</a-select-option>
+            </a-select>
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
         <a-col :span="24">
           <a-form-item
-            label="角色描述"
+            label="手机号码"
             :label-col="{ span: 4 }"
             :wrapper-col="{ span: 12 }"
-            name="roleDescription"
+            name="phone"
+            required
+            :rules="[{ required: true, message: '请输入手机号码' }]"
           >
             <a-input
-              v-model:value="form.roleDescription"
+              v-model:value="form.phone"
-              placeholder="请输入角色描述"
+              placeholder="请输入手机号码"
             />
           </a-form-item>
         </a-col>
@@ -45,53 +55,57 @@
       <a-row>
         <a-col :span="24">
           <a-form-item
-            label="菜单权限配置"
+            label="用户名称"
             :label-col="{ span: 4 }"
-            :wrapper-col="{ span: 21 }"
+            :wrapper-col="{ span: 12 }"
-            name="roleDescription"
+            name="username"
+            :extra="extraText"
+            required
+            :rules="[{ required: true, message: '请输入用户名称' }]"
           >
-            <a-tabs v-model:activeKey="activeKey">
+            <a-input
-              <a-tab-pane
+              v-model:value="form.username"
-                key="1"
+              placeholder="请输入用户名称"
-                tab="运营后台"
+            />
-              >
+          </a-form-item>
-                <div style="border: solid 1px #ddd;margin-top: -15px;">
+        </a-col>
-                  <a-tree
+      </a-row>
-                    v-if="treeDataByWeb.length"
+      <a-row>
-                    defaultExpandAll
+        <a-col :span="24">
-                    v-model:checkedKeys="checkedKeysByWeb"
+          <a-form-item
-                    @check="checkNodeByWeb"
+            label="账号状态"
-                    v-model:tree-data="treeDataByWeb"
+            :label-col="{ span: 4 }"
-                    checkable
+            :wrapper-col="{ span: 12 }"
-                  >
+            name="state"
-                    <template #title="{ description }">
+            required
-                      {{ description }}
+            :rules="[{ required: true, message: '请选择账号状态' }]"
-                    </template>
+          >
-                  </a-tree>
+            <a-radio-group
-                </div>
+              v-model:value="form.state"
-
+              name="radioGroup"
-              </a-tab-pane>
+            >
-              <a-tab-pane
+              <a-radio value="1">启用</a-radio>
-                key="2"
+              <a-radio value="0">禁用</a-radio>
-                tab="运维小程序"
+            </a-radio-group>
-                force-render
+          </a-form-item>
-              >
+        </a-col>
-                <div style="border: solid 1px #ddd;margin-top: -15px;">
+      </a-row>
-                  <a-tree
+      <a-row>
-                    v-if="treeDataByApplet.length"
+        <a-col :span="24">
-                    v-model:checkedKeys="checkedKeysByApplet"
+          <a-form-item
-                    @check="checkNodeByApplet"
+            label="关联行政区"
-                    :tree-data="treeDataByApplet"
+            :label-col="{ span: 4 }"
-                    defaultExpandAll
+            :wrapper-col="{ span: 12 }"
-                    checkable
+            name="zoneId"
-                  >
+            required
-                    <template #title="{ description }">
+            :rules="[{ required: true, message: '请选择关联行政区' }]"
-                      {{ description }}
+          >
-                    </template>
+            <a-checkbox-group
-                  </a-tree>
+              v-model:value="form.zoneId"
-                </div>
+              name="channel"
-              </a-tab-pane>
+              :options="options"
-            </a-tabs>
+              @change="changeZoneId"
+            />
           </a-form-item>
         </a-col>
       </a-row>
@@ -101,140 +115,84 @@
   
 <script setup>
 import { ref } from 'vue'
-import { callUser } from '@/apis/call.js'
+import { callUser, callOperate } from '@/apis/call.js'
 import { message } from 'ant-design-vue'
 import _, { constant } from 'lodash'
 
 const formRef = ref();
-const form = ref({});
+const form = ref({
-const activeKey = ref("1")
+  state: "1"
-const checkedKeysByWeb = ref([])
+});
-const checkedKeysByApplet = ref([])
+const roleLit = ref([])
-const treeDataByWeb = ref([])
-const treeDataByApplet = ref([])
-const treeDataList = ref([])
-const roleIdRef = ref(null);
 const isAdd = ref(true);
 const spinning = ref(false);
 const tipContent = ref("加载中...");
+const options = ref([])
+const staffIdRef = ref(null);
+const zoneId = ref([]);
+const extraText = ref("新增账号默认密码为“123456”")
+
 
 const openForm = (params = {}) => {
-  isAdd.value = true;
-  form.value = { ...params }
-  loadPermissionsList(params['roleId']);
-};
 
-const loadPermissionsList = (roleId = null) => {
+  isAdd.value = true;
-  callUser("/permissions/list", {}, "get").then((res) => {
+  callOperate("/ebikeOrgZone/listZoneByLogin", {}, "get").then((res) => {
     if (res.code != 200) {
-      message.error(res.message)
+      message.error(res.message);
-      treeDataByWeb.value = []
+      return;
-      treeDataByApplet.value = []
-      return
     }
-    const dataList = res.data.map((item) => {
+    const data = res.data.map(item => {
-      return { ...item, key: item.permId }
+      return { label: item['zoneName'], value: item['zoneId'] }
     })
-    treeDataList.value = dataList;
+    options.value = data;
-    const newDataListByWeb = buildTreeWithChildren(dataList, 1)
+  });
-    const newDataList = buildTreeWithChildren(dataList, 2)
+  callUser("/roles/listByOrgId", {}, "get").then((res) => {
-    treeDataByWeb.value = [{ description: "全部", key: "all", children: [...newDataListByWeb] }]
+    if (res.code != 200) {
-    treeDataByApplet.value = [{ description: "全部", key: "all", children: [...newDataList] }]
+      message.error(res.message);
-    if (roleId) {
+      return;
+    }
+    const data = res.data.map(item => {
+      return { id: item['roleId'], name: item['roleName'] }
+    })
+    roleLit.value = data;
+    if (params['staffId']) {
       isAdd.value = false;
-      roleIdRef.value = roleId
+      extraText.value = ""
-      callUser("/rolePermissions/getRolePermissionsByRoleId/" + roleId, {}, "get").then((res) => {
+      staffIdRef.value = params['staffId']
-        if (res.code == 200) {
+      form.value = { ...params }
-          const webKeys = res.data.filter(item => item['permType'] == "1").map(item => {
-            return item['permId']
-          });
-          const appletKeys = res.data.filter(item => item['permType'] == "2").map(item => {
-            return item['permId']
-          });
-          checkedKeysByWeb.value = webKeys;
-          checkedKeysByApplet.value = appletKeys;
-        }
-      })
     } else {
       callOperate("/ebikesysrcostset/createSnowflakeId", {}, "get").then(res => {
         if (res.code == 200) {
-          roleIdRef.value = res.data;
+          staffIdRef.value = res.data;
         }
       })
     }
   });
-}
-
-const checkNodeByWeb = (checkKeys, nodes) => {
-  const checkNodes = nodes.checkedNodes.filter(item => item['key'] != "all")
-  const leafKeys = getLeafKeys(checkNodes);
-  checkedKeysByWeb.value = leafKeys
-}
-
-const checkNodeByApplet = (checkKeys, nodes) => {
-  const checkNodes = nodes.checkedNodes.filter(item => item['key'] != "all")
-  const leafKeys = getLeafKeys(checkNodes);
-  checkedKeysByApplet.value = leafKeys
-}
-
-const getLeafKeys = (nodes) => {
-  let leafKeys = [];
-  nodes.forEach(node => {
-    if (!node.children || node.children.length === 0) {
-      leafKeys.push(node.key);
-    } else {
-      getLeafKeys(node.children)
-    }
-  });
-  return leafKeys;
 };
 
-const buildTreeWithChildren = (data, where) => {
+const changeZoneId = (zoneIds) => {
-  const map = new Map();
+  const data = options.value.filter(item => zoneIds.includes(item['value']));
-  const roots = [];
+  const zone = data.map(item => {
-  data.forEach(item => {
+    return { zoneName: item['label'], zoneId: item['value'] }
-    map.set(item.permId, { ...item });
+  })
-  });
+  zoneId.value = zone
-  data.forEach(item => {
-    if (item['permType'] == where) {
-      const child = map.get(item.permId);
-      child.code = child.permCode;
-      if (item.parentId === null || item.parentId === undefined) {
-        roots.push(child);
-      } else {
-        const parent = map.get(item.parentId);
-        if (parent) {
-          parent.children = parent.children || [];
-          child.code = child.permCode.replace(parent.permCode + ".", '');
-          parent.children.push(child);
-        } else {
-          roots.push(child);
-        }
-      }
-    }
-  });
-  return roots;
 }
 
 const formSave = (callBack) => {
   formRef.value.validate().then((res) => {
     tipContent.value = "保存中..."
     spinning.value = true;
-    let url = "rolePermissionsAdd";
+    let url = "staffInfoAdd";
     if (!isAdd.value) {
-      url = "rolePermissionsUpdate"
+      url = "staffInfoUpdate"
     }
+    isAdd.value = false;
     const params = _.cloneDeep(form.value);
-    params['roleId'] = roleIdRef.value;
+    params['staffId'] = staffIdRef.value;
-    params['rolePermissions'] = []
+    params['zoneId'] = zoneId.value;
-    checkedKeysByWeb.value.map(item => {
+    callUser("/staff/" + url, params).then((res) => {
-      params['rolePermissions'].push({ permId: item })
-    })
-    checkedKeysByApplet.value.map(item => {
-      params['rolePermissions'].push({ permId: item })
-    })
-    callUser("/roles/" + url, params).then((res) => {
       if (res.code == 200) {
+        message.success(res.message)
         if (callBack) {
           res.data = params;
           callBack(res);

ebike-operate/src/views/form/operateregion/OperateConfForm.vue

@@ -156,10 +156,13 @@ const formSave = (onCallBack) => {
     callOperate("/ebikeSysRoperateset/" + url, params).then(res => {
       spinning.value = false;
       if (res.code == 200) {
+        message.success(res.message)
         if (onCallBack) {
           res.data = params;
           onCallBack(res);
         }
+      } else {
+        message.error(res.message)
       }
     })
   }).catch(error => {

ebike-operate/src/views/form/rolemanage/RoleManage.vue

@@ -224,6 +224,7 @@ const formSave = (callBack) => {
     if (!isAdd.value) {
       url = "rolePermissionsUpdate"
     }
+    isAdd.value = false;
     const params = _.cloneDeep(form.value);
     params['roleId'] = roleIdRef.value;
     params['rolePermissions'] = []
@@ -235,6 +236,7 @@ const formSave = (callBack) => {
     })
     callUser("/roles/" + url, params).then((res) => {
       if (res.code == 200) {
+        message.success(res.message)
         if (callBack) {
           res.data = params;
           callBack(res);