liuguofeng před 6 měsíci
rodič
revize
e72910ad1e

+ 2 - 2
index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>后台管理系统</title>
   </head>
   <body>
     <div id="app"></div>

+ 5 - 4
src/App.vue

@@ -5,12 +5,13 @@
 
 <template>
 
-<router-view>
-
-</router-view>
+<router-view></router-view>
 
 </template>
 
-<style scoped>
+<style >
+        .el-message-box__container{
+        padding-left: 30px;
+    }
 
 </style>

+ 195 - 0
src/pages/exapeViews/system/disposition/components/editDataDialog.vue

@@ -0,0 +1,195 @@
+<template>
+    <el-dialog
+        :title="configData.title + configData.afterTitle"
+        v-model="configData.open"
+        width="800px"
+        :close-on-click-modal="false"
+        append-to-body
+        destroy-on-close
+        @close="handleClose"
+        class="edit-data-dialog"
+    >
+        <div class="dialog-container">
+            <el-form
+                :model="dataContainer.form"
+                ref="FormElRef"
+                :inline="true"
+                :rules="dataContainer.rules"
+                label-width="100px"
+            >
+                <el-row :gutter="0">
+                    <el-col :span="24" :xs="6">
+                        <el-form-item label="配置ID" prop="disposition_id">
+                            <el-input
+                                v-model="dataContainer.form.disposition_id"
+                                placeholder="请输入"
+                                :disabled="configData.isShow"
+                                clearable
+                            />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+        </div>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button
+                    @click="
+                        () => {
+                            dataContainer.closeType = 'cancel';
+                            configData.open = false;
+                        }
+                    "
+                >
+                    取消
+                </el-button>
+                <el-button v-if="!configData.isShow" type="primary" @click="handleSubmit">
+                    提交
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+/**
+ * 数据编辑对话框
+ * 使用外部调用的方式向内部传递数据
+ * 使用promise的形式向外部通知状态
+ */
+import { defineComponent, ref, getCurrentInstance, reactive, nextTick } from 'vue';
+import { mergeObjProperty } from '@/common/otherTools';
+import { getDictItem, initDataByConfig } from '@/common/otherTools';
+import { verifiedData } from '@/common/verifiedTools';
+import { messageError,messageSuccess } from '@/action/messagePrompt.js';
+//配置信息,初始化时使用
+const configMap = {
+    open: {
+        default: false,
+    },
+    title: {
+        default: '系统配置',
+    },
+    afterTitle: {
+        default: '',
+    },
+    isShow: {
+        //是否只是展示
+        default: false,
+    },
+};
+
+export default defineComponent({
+    name: 'EditDataDialog',
+    components: {},
+    setup() {
+        const configData = reactive({});
+        const FormElRef = ref(null); //组件实例
+        const dataContainer = reactive({
+            loading: false,
+            closeType: 'close', //关闭时的类型,是由确认取消按钮关闭的还是其他地方关闭的 confirm cancel
+            resolve: undefined, //返给外部promise的回调
+            reject: undefined,
+            form: {},
+            rules: {
+                disposition_id: [{ required: true, message: '请输入配置ID', trigger: 'blur' }],
+            },
+        });
+        const otherDataContainer = {
+            castParams: {}, //向外部传递的参数
+        };
+        initDataByConfig(configData, {}, configMap);
+        /**
+         * 对话框关闭时的回调
+         * 根据行为类型来判断调用那个回调函数
+         *  */
+        function handleClose() {
+            if (dataContainer.closeType == 'confirm') {
+                dataContainer.resolve(otherDataContainer.castParams);
+            } else {
+                dataContainer.reject(dataContainer.closeType, otherDataContainer.castParams);
+            }
+        }
+        /**
+         * 初始化数据(外部调用)
+         * 返回一个promise,以提供直接的回调
+         *  */
+        function initData(show = true, data = {}, option = {}) {
+            initDataByConfig(configData, option, configMap);
+            dataContainer.closeType = 'close';
+            dataContainer.loading = false;
+            dataContainer.form = {};
+            otherDataContainer.castParams = {};
+            configData.open = show;
+            nextTick(() => {
+                dataContainer.form = data;
+                // getDataInfo();
+            });
+            return new Promise((r, j) => {
+                dataContainer.resolve = r;
+                dataContainer.reject = j;
+            });
+        }
+        /** 获取数据详细 */
+        function getDataInfo() {
+            dataContainer.form = {};
+        }
+        /** 提交数据 */
+        function handleSubmit() {
+            /** 使用组件自带方法验证数据 */
+            if (!FormElRef.value) return;
+            FormElRef.value.validate((valid, e) => {
+                if (e) {
+                    /** 打印报错信息 */
+                    let msg = e[Object.keys(e)[0]][0].message;
+                    messageError(msg);
+                }
+                if (!valid) return;
+                setTimeout(() => {
+                    otherDataContainer.castParams = {
+                        name: '数据保存成功了,向外部通知',
+                    };
+                    dataContainer.closeType = 'confirm';
+                    configData.open = false;
+                    messageSuccess("提交成功")
+                }, 1000);
+            });
+        }
+        /**
+         * 数据验证
+         * 外部可调用
+         *  */
+        function validData(data) {
+            const failData = verifiedData(data, {
+                name: {
+                    msg: '名称 不能为空',
+                    validate(value, option) {
+                        if (!value && value !== 0) return false;
+                        return true;
+                    },
+                },
+            });
+            return failData;
+        }
+        return {
+            configData,
+            initData,
+            dataContainer,
+            handleClose,
+            getDataInfo,
+            handleSubmit,
+            FormElRef,
+            validData,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.edit-data-dialog {
+    .dialog-container {
+        padding: 15px 15px 0 15px;
+        box-sizing: border-box;
+    }
+}
+</style>

+ 181 - 1
src/pages/exapeViews/system/disposition/index.vue

@@ -1,10 +1,190 @@
 <template>
-  <div>系统配置</div>
+
+  <div class="page-container main-view">
+ 
+    <div class="table-box content-container page-content-box">
+      <div class="table-container">
+        <el-table :data="tableData" stripe style="width: 100%" border>
+          <el-table-column prop="disposition_id" label="用户ID"  />
+          <el-table-column prop="description" label="配置名称"  />
+          <el-table-column label="操作">
+                <template #default="scope">
+                    <el-button
+                        type="warning"
+                        @click="
+                            handleEdit(scope.row, {
+                                isShow: false,
+                                afterTitle: ' - 编辑',
+                            })
+                        "
+                    >
+                        编辑
+                    </el-button>
+                    <el-button
+                        type="danger"
+                        @click="handleDelete([scope.row])"
+                    >
+                        删除
+                    </el-button>
+                </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <EditDataDialog ref="EditDataDialogRef"></EditDataDialog>
+  </div>
+ 
 </template>
 
 <script setup>
+import {
+    defineComponent,
+    onBeforeUnmount,
+    ref,
+    reactive,
+    getCurrentInstance,
+    onActivated,
+} from 'vue';
+import { useRouter } from 'vue-router';
+// import { copyValue } from '@/common/otherTools';
+// import DictTags from '@/components/dictTags.vue';
+// import { debounceFn } from '@/common/debounceAndThrottle';
+import { messageSuccess, confirm } from '@/action/messagePrompt.js';
+import EditDataDialog from './components/editDataDialog.vue';
+// import { hasPermi } from '@/action/powerTools';
+
+
+ const EditDataDialogRef = ref(null); //组件实例
+
+const tableData = [
+  {
+    disposition_id: '1',
+    description: '超级管理员',
+  },
+  {
+    disposition_id: '2',
+    description: '管理员',
+  },
+  {
+    disposition_id: '3',
+    description: '下单赠送积分开关',
+  },
+  {
+    disposition_id: '4',
+    description: '积分抽奖活动开关',
+  },
+]
+
+        //新增用户组按钮
+        function handleAdd  (){
+        if (!EditDataDialogRef.value) return;
+            EditDataDialogRef.value
+            .initData(
+                true,
+                {},
+                {
+                    afterTitle: ' - 添加',
+                },
+            )
+            .then(() => {})
+            .catch(() => {});
+        }
+
+        /** 禁用操作 */
+        function handleDetails(row, querys) {
+            confirm('确定要禁用吗?',
+                {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+                })
+            .then(()=>{
+                messageSuccess('禁用成功');
+            })
+            .catch(()=>{})
+           
+        }
+        /** 编辑按钮操作 */
+        function handleEdit(row, querys) {
+            if (!EditDataDialogRef.value) return;
+            EditDataDialogRef.value
+                .initData(
+                    true,
+                    {
+                        ...row,
+                    },
+                    {
+                        ...querys,
+                    },
+                )
+                .then(() => {})
+                .catch(() => {});
+        }
+        /** 删除 */
+        function handleDelete(rows) {
+            confirm('确认删除该数据?',
+                {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+                })
+                .then(() => {
+                    // dataContainer.loading = true;
+                    // deleteSalesLeadApi(rows.map(item=>item.id).join(',')).then(() => {
+                    //     getDataList();
+                    // }).catch(()=>{
+                    //     return;
+                    // }).finally(()=>{
+                    //     dataContainer.loading = false;
+                    // });
+                    messageSuccess('删除成功');
+                })
+                .catch(() => {});
+        }
+
+
 
 </script>
 
 <style scoped lang='scss'>
+.main-view {
+    display: flex;
+    flex-direction: column;
+    > .page-query-box {
+        margin: 0 0 10px 0 !important;
+        padding: 10px 10px 0px 10px;
+        :deep(.el-form-item) {
+            margin-bottom: 10px !important;
+        }
+        :deep(.el-form-item--default) {
+            width: 100%;
+            margin-right: 0;
+        }
+    }
+    > .content-container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 10px 10px;
+        box-sizing: border-box;
+        background: #fff;
+        > .top-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin: 0px 0 10px 0;
+        }
+        > .table-container {
+            flex: 1 1 auto;
+            height: 0;
+            overflow: auto;
+        }
+    }
+    .pagination-container {
+        display: flex;
+        justify-content: flex-end;
+        padding: 0;
+        margin: 10px 0 0 0;
+    }
+}
 </style>

+ 10 - 44
src/pages/exapeViews/system/permissions/components/editDataDialog.vue

@@ -19,9 +19,9 @@
             >
                 <el-row :gutter="0">
                     <el-col :span="12" :xs="6">
-                        <el-form-item label="用户名称" prop="name">
+                        <el-form-item label="用户组" prop="User_groups">
                             <el-input
-                                v-model="dataContainer.form.name"
+                                v-model="dataContainer.form.User_groups"
                                 placeholder="请输入"
                                 :disabled="configData.isShow"
                                 clearable
@@ -29,9 +29,9 @@
                         </el-form-item>
                     </el-col>
                     <el-col :span="12" :xs="6">
-                        <el-form-item label="用户账号" prop="number">
+                        <el-form-item label="描述" prop="description">
                             <el-input
-                                v-model="dataContainer.form.number"
+                                v-model="dataContainer.form.description"
                                 placeholder="请输入"
                                 :disabled="configData.isShow"
                                 clearable
@@ -39,18 +39,18 @@
                         </el-form-item>
                     </el-col>
                     <el-col :span="12" :xs="6">
-                        <el-form-item label="角色标识" prop="sign">
+                        <el-form-item label="分组上级" prop="sign">
                             <el-select
                                 style="width: 100%"
-                                v-model="dataContainer.form.sign"
                                 placeholder="请选择"
+                                v-model="dataContainer.form.sign"
                                 :disabled="configData.isShow"
                                 clearable
                             >
                                 <el-option
                                     v-for="item in [
-                                        { label: '超级管理员', value: '1' },
-                                        { label: '超级管理员1', value: '2' },
+                                        { label: '分部', value: '1' },
+                                        { label: '总部', value: '2' },
                                     ]"
                                     :key="item.value"
                                     :label="item.label"
@@ -59,40 +59,6 @@
                             </el-select>
                         </el-form-item>
                     </el-col>
-                    <el-col :span="12" :xs="6">
-                        <el-form-item label="排序" prop="sort">
-                            <el-input-number
-                                style="width: 100%"
-                                v-model="dataContainer.form.sort"
-                                :min="1"
-                                :max="999"
-                                controls-position="right"
-                                :disabled="configData.isShow"
-                                clearable
-                            />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12" :xs="6">
-                        <el-form-item label="状态" prop="status">
-                            <el-switch
-                                v-model="dataContainer.form.status"
-                                :disabled="configData.isShow"
-                                active-text="启用"
-                                inactive-text="禁用"
-                            />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="24" :xs="6">
-                        <el-form-item label="用户描述" prop="content">
-                            <el-input
-                                v-model="dataContainer.form.content"
-                                :rows="2"
-                                type="textarea"
-                                :disabled="configData.isShow"
-                                placeholder="请输入"
-                            />
-                        </el-form-item>
-                    </el-col>
                 </el-row>
             </el-form>
         </div>
@@ -133,7 +99,7 @@ const configMap = {
         default: false,
     },
     title: {
-        default: '用户数据',
+        default: '权限管理',
     },
     afterTitle: {
         default: '',
@@ -157,7 +123,7 @@ export default defineComponent({
             reject: undefined,
             form: {},
             rules: {
-                name: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
+                User_groups: [{ required: true, message: '请输入用户组名称', trigger: 'blur' }],
             },
         });
         const otherDataContainer = {

+ 72 - 80
src/pages/exapeViews/system/permissions/index.vue

@@ -7,47 +7,42 @@
         <el-button type="primary" @click="handleAdd()">新增用户组</el-button>
       </div> 
       <div class="table-container">
-        <el-table :data="tableData" stripe style="width: 100%">
-          <el-table-column prop="User_groups" label="用户组" width="180" />
-          <el-table-column prop="description" label="描述" width="180" />
-          <el-table-column prop="authorization" label="授权"width="250" />
-          <el-table-column
-                        label="操作"
-                        fixed="right"
-                        class-name="small-padding fixed-width"
+        <el-table :data="tableData" stripe style="width: 100%" border>
+          <el-table-column prop="User_groups" label="用户组"  />
+          <el-table-column prop="description" label="描述"  />
+          <el-table-column label="授权" >
+            <template #default = "scope">
+                <el-button type="primary" plain>访问授权</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+                <template #default="scope">
+                    <el-button
+                        :text="true"
+                        @click="handleDetails([scope.row])"
                     >
-                        <template #default="scope">
-                            <el-button
-                                :text="true"
-                                @click="
-                                    handleDetails(scope.row, {
-                                        isShow: true,
-                                        afterTitle: ' - 查看',
-                                    })
-                                "
-                            >
-                                查看
-                            </el-button>
-                            <el-button
-                                :text="true"
-                                @click="
-                                    handleEdit(scope.row, {
-                                        isShow: false,
-                                        afterTitle: ' - 编辑',
-                                    })
-                                "
-                            >
-                                编辑
-                            </el-button>
-                            <el-button
-                                :text="true"
-                                type="danger"
-                                @click="handleDelete([scope.row])"
-                            >
-                                删除
-                            </el-button>
-                        </template>
-                    </el-table-column>
+                        禁用
+                    </el-button>
+                    <el-button
+                        :text="true"
+                        @click="
+                            handleEdit(scope.row, {
+                                isShow: false,
+                                afterTitle: ' - 编辑',
+                            })
+                        "
+                    >
+                        编辑
+                    </el-button>
+                    <el-button
+                        :text="true"
+                        type="danger"
+                        @click="handleDelete([scope.row])"
+                    >
+                        删除
+                    </el-button>
+                </template>
+          </el-table-column>
         </el-table>
       </div>
     </div>
@@ -65,11 +60,11 @@ import {
     getCurrentInstance,
     onActivated,
 } from 'vue';
-// import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 // import { copyValue } from '@/common/otherTools';
 // import DictTags from '@/components/dictTags.vue';
 // import { debounceFn } from '@/common/debounceAndThrottle';
-// import { messageSuccess, confirm } from '@/action/messagePrompt.js';
+import { messageSuccess, confirm } from '@/action/messagePrompt.js';
 import EditDataDialog from './components/editDataDialog.vue';
 // import { hasPermi } from '@/action/powerTools';
 
@@ -78,59 +73,51 @@ import EditDataDialog from './components/editDataDialog.vue';
 
 const tableData = [
   {
-    User_groups: '2016-05-03',
+    User_groups: '管理',
     description: 'Tom',
-    authorization: 'No. 189, Grove St, Los Angeles',
   },
   {
-    User_groups: '2016-05-03',
+    User_groups: '管理',
     description: 'Tom',
-    authorization: 'No. 189, Grove St, Los Angeles',
   },
   {
-    User_groups: '2016-05-03',
+    User_groups: '总部',
     description: 'Tom',
-    authorization: 'No. 189, Grove St, Los Angeles',
   },
   {
-    User_groups: '2016-05-03',
+    User_groups: '总部',
     description: 'Tom',
-    authorization: 'No. 189, Grove St, Los Angeles',
   },
 ]
 
-
-function handleAdd  (){
-
-  if (!EditDataDialogRef.value) return;
+        //新增用户组按钮
+        function handleAdd  (){
+        if (!EditDataDialogRef.value) return;
             EditDataDialogRef.value
-                .initData(
-                    true,
-                    {},
-                    {
-                        afterTitle: ' - 添加',
-                    },
-                )
-                .then(() => {})
-                .catch(() => {});
-
-}
+            .initData(
+                true,
+                {},
+                {
+                    afterTitle: ' - 添加',
+                },
+            )
+            .then(() => {})
+            .catch(() => {});
+        }
 
-        /** 详情按钮操作 */
+        /** 禁用操作 */
         function handleDetails(row, querys) {
-            if (!EditDataDialogRef.value) return;
-            EditDataDialogRef.value
-                .initData(
-                    true,
-                    {
-                        ...row,
-                    },
-                    {
-                        ...querys,
-                    },
-                )
-                .then(() => {})
-                .catch(() => {});
+            confirm('确定要禁用吗?',
+                {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+                })
+            .then(()=>{
+                messageSuccess('禁用成功');
+            })
+            .catch(()=>{})
+           
         }
         /** 编辑按钮操作 */
         function handleEdit(row, querys) {
@@ -150,7 +137,12 @@ function handleAdd  (){
         }
         /** 删除 */
         function handleDelete(rows) {
-            confirm('确认删除该数据?')
+            confirm('确认删除该数据?',
+                {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+                })
                 .then(() => {
                     // dataContainer.loading = true;
                     // deleteSalesLeadApi(rows.map(item=>item.id).join(',')).then(() => {

+ 238 - 0
src/pages/exapeViews/userList/backend/components/editDataDialog.vue

@@ -0,0 +1,238 @@
+<template>
+    <el-dialog
+        :title="configData.title + configData.afterTitle"
+        v-model="configData.open"
+        width="800px"
+        :close-on-click-modal="false"
+        append-to-body
+        destroy-on-close
+        @close="handleClose"
+        class="edit-data-dialog"
+    >
+        <div class="dialog-container">
+            <el-form
+                :model="dataContainer.form"
+                ref="FormElRef"
+                :inline="true"
+                :rules="dataContainer.rules"
+                label-width="100px"
+            >
+                <el-row :gutter="0">
+                    <el-col :span="12" :xs="6">
+                        <el-form-item label="用户名" prop="User_groups">
+                            <el-input
+                                v-model="dataContainer.form.User_groups"
+                                placeholder="请输入"
+                                :disabled="configData.isShow"
+                                clearable
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12" :xs="6">
+                        <el-form-item label="手机号" prop="description">
+                            <el-input
+                                v-model="dataContainer.form.description"
+                                placeholder="请输入"
+                                :disabled="configData.isShow"
+                                clearable
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12" :xs="6">
+                        <el-form-item label="密码" prop="description">
+                            <el-input
+                                v-model="dataContainer.form.description"
+                                placeholder="请输入"
+                                :disabled="configData.isShow"
+                                clearable
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12" :xs="6">
+                        <el-form-item label="用户组" prop="sign">
+                            <el-select
+                                style="width: 100%"
+                                placeholder="请选择"
+                                v-model="dataContainer.form.sign"
+                                :disabled="configData.isShow"
+                                clearable
+                            >
+                                <el-option
+                                    v-for="item in [
+                                        { label: '分部', value: '1' },
+                                        { label: '总部', value: '2' },
+                                    ]"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                                />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+        </div>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button
+                    @click="
+                        () => {
+                            dataContainer.closeType = 'cancel';
+                            configData.open = false;
+                        }
+                    "
+                >
+                    取消
+                </el-button>
+                <el-button v-if="!configData.isShow" type="primary" @click="handleSubmit">
+                    提交
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+/**
+ * 数据编辑对话框
+ * 使用外部调用的方式向内部传递数据
+ * 使用promise的形式向外部通知状态
+ */
+import { defineComponent, ref, getCurrentInstance, reactive, nextTick } from 'vue';
+import { mergeObjProperty } from '@/common/otherTools';
+import { getDictItem, initDataByConfig } from '@/common/otherTools';
+import { verifiedData } from '@/common/verifiedTools';
+import { messageError,messageSuccess } from '@/action/messagePrompt.js';
+//配置信息,初始化时使用
+const configMap = {
+    open: {
+        default: false,
+    },
+    title: {
+        default: '权限管理',
+    },
+    afterTitle: {
+        default: '',
+    },
+    isShow: {
+        //是否只是展示
+        default: false,
+    },
+};
+
+export default defineComponent({
+    name: 'EditDataDialog',
+    components: {},
+    setup() {
+        const configData = reactive({});
+        const FormElRef = ref(null); //组件实例
+        const dataContainer = reactive({
+            loading: false,
+            closeType: 'close', //关闭时的类型,是由确认取消按钮关闭的还是其他地方关闭的 confirm cancel
+            resolve: undefined, //返给外部promise的回调
+            reject: undefined,
+            form: {
+                
+            },
+            rules: {
+                User_groups: [{ required: true, message: '请输入用户组名称', trigger: 'blur' }],
+            },
+        });
+        const otherDataContainer = {
+            castParams: {}, //向外部传递的参数
+        };
+        initDataByConfig(configData, {}, configMap);
+        /**
+         * 对话框关闭时的回调
+         * 根据行为类型来判断调用那个回调函数
+         *  */
+        function handleClose() {
+            if (dataContainer.closeType == 'confirm') {
+                dataContainer.resolve(otherDataContainer.castParams);
+            } else {
+                dataContainer.reject(dataContainer.closeType, otherDataContainer.castParams);
+            }
+        }
+        /**
+         * 初始化数据(外部调用)
+         * 返回一个promise,以提供直接的回调
+         *  */
+        function initData(show = true, data = {}, option = {}) {
+            initDataByConfig(configData, option, configMap);
+            dataContainer.closeType = 'close';
+            dataContainer.loading = false;
+            dataContainer.form = {};
+            otherDataContainer.castParams = {};
+            configData.open = show;
+            nextTick(() => {
+                dataContainer.form = data;
+                // getDataInfo();
+            });
+            return new Promise((r, j) => {
+                dataContainer.resolve = r;
+                dataContainer.reject = j;
+            });
+        }
+        /** 获取数据详细 */
+        function getDataInfo() {
+            dataContainer.form = {};
+        }
+        /** 提交数据 */
+        function handleSubmit() {
+            /** 使用组件自带方法验证数据 */
+            if (!FormElRef.value) return;
+            FormElRef.value.validate((valid, e) => {
+                if (e) {
+                    /** 打印报错信息 */
+                    let msg = e[Object.keys(e)[0]][0].message;
+                    messageError(msg);
+                }
+                if (!valid) return;
+                setTimeout(() => {
+                    otherDataContainer.castParams = {
+                        name: '数据保存成功了,向外部通知',
+                    };
+                    dataContainer.closeType = 'confirm';
+                    configData.open = false;
+                    messageSuccess("提交成功")
+                }, 1000);
+            });
+        }
+        /**
+         * 数据验证
+         * 外部可调用
+         *  */
+        function validData(data) {
+            const failData = verifiedData(data, {
+                name: {
+                    msg: '名称 不能为空',
+                    validate(value, option) {
+                        if (!value && value !== 0) return false;
+                        return true;
+                    },
+                },
+            });
+            return failData;
+        }
+        return {
+            configData,
+            initData,
+            dataContainer,
+            handleClose,
+            getDataInfo,
+            handleSubmit,
+            FormElRef,
+            validData,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.edit-data-dialog {
+    .dialog-container {
+        padding: 15px 15px 0 15px;
+        box-sizing: border-box;
+    }
+}
+</style>

+ 197 - 0
src/pages/exapeViews/userList/backend/index.vue

@@ -0,0 +1,197 @@
+<template>
+
+    <div class="page-container main-view">
+   
+      <div class="table-box content-container page-content-box">
+        <div class="top-container">
+          <el-button type="primary" @click="handleAdd()">新增</el-button>
+        </div> 
+        <div class="table-container">
+          <el-table :data="tableData" stripe style="width: 100%" border>
+            <el-table-column prop="id" label="序号"  />
+            <el-table-column prop="username" label="用户账号"  />
+            <el-table-column prop="useruermissions" label="用户权限" />
+            <el-table-column prop="creationtime" label="创建时间" />
+            <el-table-column label="操作">
+                  <template #default="scope">
+                      <el-button
+                          :text="true"
+                          @click="handleDetails([scope.row])"
+                      >
+                          禁用
+                      </el-button>
+                      <el-button
+                          :text="true"
+                          @click="
+                              handleEdit(scope.row, {
+                                  isShow: false,
+                                  afterTitle: ' - 编辑',
+                              })
+                          "
+                      >
+                          编辑
+                      </el-button>
+                  </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <EditDataDialog ref="EditDataDialogRef"></EditDataDialog>
+    </div>
+   
+  </template>
+  
+  <script setup>
+  import {
+      defineComponent,
+      onBeforeUnmount,
+      ref,
+      reactive,
+      getCurrentInstance,
+      onActivated,
+  } from 'vue';
+  import { useRouter } from 'vue-router';
+  // import { copyValue } from '@/common/otherTools';
+  // import DictTags from '@/components/dictTags.vue';
+  // import { debounceFn } from '@/common/debounceAndThrottle';
+  import { messageSuccess, confirm } from '@/action/messagePrompt.js';
+  import EditDataDialog from './components/editDataDialog.vue';
+  // import { hasPermi } from '@/action/powerTools';
+  
+  
+   const EditDataDialogRef = ref(null); //组件实例
+  
+  const tableData = [
+    {
+      id: '1',
+      username: '13409765432',
+      useruermissions: '超级管理员',
+      creationtime:"2024/11/21 12:16:26"
+    },
+    {
+        id: '2',
+        username: '13409765432',
+        useruermissions: '无',
+        creationtime:"2024/11/21 12:16:26"
+    },
+    {
+        id: '3',
+        username: '13409765432',
+        useruermissions: '普通人员',
+        creationtime:"2024/11/21 12:16:26"
+    }
+  ]
+  
+          //新增用户组按钮
+          function handleAdd  (){
+          if (!EditDataDialogRef.value) return;
+              EditDataDialogRef.value
+              .initData(
+                  true,
+                  {},
+                  {
+                      afterTitle: ' - 添加',
+                  },
+              )
+              .then(() => {})
+              .catch(() => {});
+          }
+  
+          /** 禁用操作 */
+          function handleDetails(row, querys) {
+              confirm('确定要禁用吗?',
+                  {
+                  confirmButtonText: '确定',
+                  cancelButtonText: '取消',
+                  type: 'warning',
+                  })
+              .then(()=>{
+                  messageSuccess('禁用成功');
+              })
+              .catch(()=>{})
+             
+          }
+          /** 编辑按钮操作 */
+          function handleEdit(row, querys) {
+              if (!EditDataDialogRef.value) return;
+              EditDataDialogRef.value
+                  .initData(
+                      true,
+                      {
+                          ...row,
+                      },
+                      {
+                          ...querys,
+                      },
+                  )
+                  .then(() => {})
+                  .catch(() => {});
+          }
+          /** 删除 */
+          function handleDelete(rows) {
+              confirm('确认删除该数据?',
+                  {
+                  confirmButtonText: '确定',
+                  cancelButtonText: '取消',
+                  type: 'warning',
+                  })
+                  .then(() => {
+                      // dataContainer.loading = true;
+                      // deleteSalesLeadApi(rows.map(item=>item.id).join(',')).then(() => {
+                      //     getDataList();
+                      // }).catch(()=>{
+                      //     return;
+                      // }).finally(()=>{
+                      //     dataContainer.loading = false;
+                      // });
+                      messageSuccess('删除成功');
+                  })
+                  .catch(() => {});
+          }
+  
+  
+  
+  </script>
+  
+  <style scoped lang='scss'>
+  .main-view {
+      display: flex;
+      flex-direction: column;
+      > .page-query-box {
+          margin: 0 0 10px 0 !important;
+          padding: 10px 10px 0px 10px;
+          :deep(.el-form-item) {
+              margin-bottom: 10px !important;
+          }
+          :deep(.el-form-item--default) {
+              width: 100%;
+              margin-right: 0;
+          }
+      }
+      > .content-container {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          padding: 10px 10px;
+          box-sizing: border-box;
+          background: #fff;
+          > .top-container {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin: 0px 0 10px 0;
+          }
+          > .table-container {
+              flex: 1 1 auto;
+              height: 0;
+              overflow: auto;
+          }
+      }
+      .pagination-container {
+          display: flex;
+          justify-content: flex-end;
+          padding: 0;
+          margin: 10px 0 0 0;
+      }
+  }
+  </style>

+ 19 - 0
src/pages/exapeViews/userList/client/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    客户列表
+  </div>
+</template>
+
+<script setup>
+  import {
+      defineComponent,
+      onBeforeUnmount,
+      ref,
+      reactive,
+      getCurrentInstance,
+      onActivated,
+  } from 'vue';
+</script>
+
+<style scoped lang='scss'>
+</style>

+ 217 - 14
src/pages/index/index.vue

@@ -30,13 +30,27 @@
                     <el-menu-item index="2-1"  @click="gopagesPermiss()">
                       权限管理
                     </el-menu-item>
-                    <el-menu-item index="2-2">系统配置</el-menu-item>
+                    <el-menu-item index="2-2" @click="gopagesDisposition()">系统配置</el-menu-item>
                 </el-sub-menu>
 
-                <el-menu-item index="3">
-                <el-icon><document /></el-icon>
-                <template #title>Navigator Three</template>
-                </el-menu-item>
+                <el-sub-menu index="3">
+                  <template #title>
+                    <el-icon><Avatar /></el-icon>
+                      <span>用户管理</span>
+                  </template>
+                  <el-menu-item index="3-1" @click="gopagesBackend()">
+                      后台管理员
+                  </el-menu-item>
+                  <el-menu-item index="3-2" @click="gopagesClient()">
+                      客户管理
+                  </el-menu-item>
+                  <el-menu-item index="3-3">
+                      微伴管理
+                  </el-menu-item>
+                  <el-menu-item index="3-4">
+                      二维码管理
+                  </el-menu-item>
+                </el-sub-menu>
                 <el-menu-item index="4">
                 <el-icon><setting /></el-icon>
                 <template #title>Navigator Four</template>
@@ -45,15 +59,89 @@
         </el-aside>
       <el-container>
         <el-header>
-            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
+            <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                 <el-radio-button :value="!isCollapse">{{ isCollapse ? "展示" : "隐藏" }}</el-radio-button>
-            </el-radio-group>
+            </el-radio-group> -->
+            <div class="btn_show">
+              <SvgIcon
+                    @click="switchShowLogo()"
+                    :style="'width:20px;height:20px;'"
+                    :name="isCollapse? 'svg:indent.svg' : 'svg:outdent.svg'"
+                >
+              </SvgIcon>
+            </div>
             <el-breadcrumb :separator-icon="ArrowRight">
               <el-breadcrumb-item >homepage</el-breadcrumb-item>
               <el-breadcrumb-item>promotion management</el-breadcrumb-item>
               <el-breadcrumb-item>promotion list</el-breadcrumb-item>
               <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
             </el-breadcrumb>
+            <div class="navbar-cp-container">
+
+              <div class="right">
+
+                <definDropdown
+                :show="dataContainer.show_1"
+                :ifLeftClick="true"
+                :targetQuery="'.target'"
+                @onOtherClick="dataContainer.show_1 = false"
+                @onClick="
+                    () => {
+                        dataContainer.show_1 = !dataContainer.show_1;
+                    }
+                "
+                position="outside,bottom,end"
+            >
+                <div
+                    :class="{
+                        active: dataContainer.show_1,
+                        'user-container': true,
+                        target: true,
+                    }"
+                >
+                    <el-image class="img" :src="dataContainer.userInfo.avatar" fit="cover" />
+                    <div class="name">
+                        {{ dataContainer.userInfo.nickName }}
+                        <div class="other">
+                            {{ dataContainer.userInfo.userName }}
+                        </div>
+                    </div>
+                    <div class="option">
+                        <SvgIcon
+                            :style="'width:15px;height:15px;'"
+                            name="svg:sort-down.svg"
+                        ></SvgIcon>
+                    </div>
+                </div>
+                <template v-slot:dropdown>
+                    <div class="bt-list-container">
+                        <div class="item" @click="toPath('/main/mine/info')">
+                            <SvgIcon
+                                :style="'width:16px;height:16px;'"
+                                name="svg:user-fill.svg"
+                            ></SvgIcon>
+                            个人中心
+                        </div>
+                        <div class="item" @click="toPath('/main/mine/info-password')">
+                            <SvgIcon
+                                :style="'width:16px;height:16px;'"
+                                name="svg:supervise.svg"
+                            ></SvgIcon>
+                            密码修改
+                        </div>
+                        <div class="item logout-bt" @click.stop="onLogout">
+                            <SvgIcon
+                                :style="'width:16px;height:16px;color:#f56c6c;'"
+                                name="svg:poweroff.svg"
+                            ></SvgIcon>
+                            退出登录
+                        </div>
+                    </div>
+                </template>
+            </definDropdown>
+              </div>
+
+            </div>
         </el-header>
           <el-main>
                 <router-view></router-view>
@@ -66,17 +154,26 @@
 
 <script setup >
 
-import { ref,computed} from 'vue'
+import { ref,reactive,computed} from 'vue'
 import {
   Document,
   Menu as IconMenu,
   Location,
   Setting,
+  Avatar,
 } from '@element-plus/icons-vue'
-import { ArrowRight } from '@element-plus/icons-vue'
+import { ArrowRight} from '@element-plus/icons-vue'
 import { RouterView ,useRouter} from 'vue-router';
 const router = useRouter();
 const isCollapse = ref(false)
+const dataContainer = reactive({
+  userInfo:{
+    avatar:'',
+    nickName:'管理员',
+    userName:'admin'
+  },
+  show_1: false,
+})
 
 const sideWidth = computed(() => {
   return isCollapse.value? 60 : 230; // 这里可以根据实际需求调整收缩和展开时的宽度值
@@ -88,13 +185,33 @@ const handleOpen = (key, keyPath) => {
 const handleClose = (key, keyPath) => {
   console.log(key, keyPath)
 }
+const switchShowLogo = () =>{
+  isCollapse.value = !isCollapse.value
+}
+
 
 const gopages = ()=>{
-    router.push('/index/system/index')
+    router.push('/index/welcome/index')
 }
 const gopagesPermiss = ()=>{
   router.push('/index/permissions')
 }
+const gopagesDisposition = ()=>{
+  router.push('/index/disposition')
+}
+const gopagesBackend = () => {
+  router.push('/index/backend')
+}
+const gopagesClient = ()=>{
+  router.push ('/index/client')
+}
+
+const toPath = (path)=>{
+  router.push(`${path}`)
+}
+const onLogout = ()=>{
+  router.push("/login")
+}
 
 </script>
 
@@ -133,12 +250,25 @@ const gopagesPermiss = ()=>{
 .el-header{
   display: flex;
   align-items: center;
-  background-color: aqua;
-  .el-radio-button{
-    margin-top: 20px;
-    margin-right: 10px;
+  background-color: white;
+  --el-header-padding:0px;
+ > .btn_show{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            margin-left: var(--item-gap);
+            margin: 10px;
+            > * {
+                cursor: pointer;
+                transition: all 0.2s;
+                &:hover {
+                    color: #0072e5;
+                }
+            }
   }
   .el-breadcrumb{
+    width: 100%;
     display: inline-flex;
     flex-wrap: nowrap;
     overflow: hidden;
@@ -155,6 +285,79 @@ const gopagesPermiss = ()=>{
       overflow: hidden;
     }
   }
+  .navbar-cp-container{
+    width: 100%;
+    > .right {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 0 0 0 0;
+        box-sizing: border-box;
+        position: relative;
+        height: 100%;
+        > * {
+            margin-left: var(--item-gap);
+        }
+        .user-container {
+            width: auto;
+            height: 100%;
+            cursor: pointer;
+            border-radius: 0 0 0 0;
+            transition: all 0.2s;
+            position: relative;
+            border: none;
+            box-shadow: none;
+            border-left: 1px solid var(--border-color);
+            box-sizing: border-box;
+            padding: 0px var(--item-gap);
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            &.active {
+                background-color: #f0f0f0;
+                box-shadow: inset 0 1px 4px #0000002a;
+            }
+            > .img {
+                width: 43px;
+                min-width: 43px;
+                height: 43px;
+                border-radius: 50%;
+                margin-right: var(--item-gap);
+                // border: 2px solid #949494;
+                margin: 0 10px;
+                box-shadow: #0000002a 2px 2px 5px;
+            }
+            > .name {
+                font-size: 14px;
+                font-weight: bold;
+                margin-right: var(--item-gap);
+                color: #444954;
+                display: flex;
+                flex-direction: column;
+                margin: 0 10px;
+                > .other {
+                    font-size: 12px;
+                    opacity: 0.6;
+                    margin-top: 2px;
+                    font-weight: 400;
+                }
+            }
+            > .option {
+                width: fit-content;
+                height: fit-content;
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+       > .defin-drop {
+          z-index: 9;
+       }
+
+    }
+  }
 }
 }
 

+ 4 - 7
src/pages/login/index.vue

@@ -222,17 +222,14 @@ export default defineComponent({
                 <div class="container">
                     <div class="title">登 录</div>
                     <div class="other-login-bt">
-                        <div class="item">
+                        <!-- <div class="item">
                             <SvgIcon :style="'width:20px;height:20px;'" name="svg:g.svg"></SvgIcon>
-                        </div>
+                        </div> -->
                         <div class="item">
-                            <SvgIcon :style="'width:20px;height:20px;'" name="svg:f.svg"></SvgIcon>
+                            <SvgIcon :style="'width:23px;height:23px;'"name="svg:user-fill.svg"></SvgIcon>
                         </div>
                         <div class="item">
-                            <SvgIcon
-                                :style="'width:20px;height:20px;'"
-                                name="svg:weixin.svg"
-                            ></SvgIcon>
+                            <SvgIcon :style="'width:23px;height:23px;'"name="svg:zhanghao.svg"></SvgIcon>
                         </div>
                     </div>
                     <div class="content-1">或使用您的账号</div>

+ 0 - 0
src/pages/system/index/index.vue → src/pages/welcome/index/index.vue


+ 15 - 3
src/router/index.js

@@ -7,7 +7,7 @@ export const constantRoutes  = [
     /** 定义首页重定向地址 */
     {
         path: '',
-        redirect: '/index/system/index',
+        redirect: '/index/welcome/index',
     },
     /**登录页面*/
     {
@@ -20,13 +20,25 @@ export const constantRoutes  = [
         component : () => import ('../pages/index/index.vue'),
         children:[
             {
-                path:'system/index',
-                component: ()=> import ('../pages/system/index/index.vue')
+                path:'welcome/index',
+                component: ()=> import ('../pages/welcome/index/index.vue')
             },
             {
                 path:"permissions",
                 component: ()=> import ("../pages/exapeViews/system/permissions/index.vue")
 
+            },
+            {
+                path:"disposition",
+                component: ()=> import ("../pages/exapeViews/system/disposition/index.vue")
+            },
+            {
+                path:"backend",
+                component: ()=> import ("../pages/exapeViews/userList/backend/index.vue")
+            },
+            {
+                path:"client",
+                component: ()=> import ("../pages/exapeViews/userList/client/index.vue")
             }
         ]
     }