From e0868a10aff1552b87e30663342910a28ed8f877 Mon Sep 17 00:00:00 2001
From: zhangpeng <690927457@qq.com>
Date: Mon, 28 Apr 2025 17:57:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(user):=20=E6=96=B0=E5=A2=9E=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加用户列表页面，包含搜索、分页等功能
- 实现用户状态切换和详情查看功能
- 新增用户选择组件，用于选择用户
- 优化表格组件，支持自定义列和操作
- 添加面包屑组件，用于展示导航路径
---
 src/api/goods/index.js                   |  42 ++++
 src/api/user/index.js                    |  14 ++
 src/assets/icons/bookmark-fill.svg       |   6 +
 src/components/MyTitle/MyTitle.vue       |  77 ++++++++
 src/components/PmDialog/pm-dialog.vue    | 112 +++++++++++
 src/components/columnItem/ColumnItem.vue |  39 ++++
 src/components/content/index.vue         |  22 +--
 src/components/richtext/rich-edit.vue    |   2 +-
 src/components/userChoose/index.vue      | 236 +++++++++++++++++++++++
 src/config.js                            | 149 +++++++++++++-
 src/pathInfo.json                        |  13 +-
 src/style/main.scss                      |  15 ++
 src/view/goods/article/edit.vue          | 165 ++++++++++++++++
 src/view/goods/article/index.vue         | 129 ++++++++++++-
 src/view/order/order/index.vue           |  30 +--
 src/view/user/index.vue                  |  21 ++
 src/view/user/user/index.vue             | 106 ++++++++++
 17 files changed, 1132 insertions(+), 46 deletions(-)
 create mode 100644 src/api/goods/index.js
 create mode 100644 src/api/user/index.js
 create mode 100644 src/assets/icons/bookmark-fill.svg
 create mode 100644 src/components/MyTitle/MyTitle.vue
 create mode 100644 src/components/PmDialog/pm-dialog.vue
 create mode 100644 src/components/columnItem/ColumnItem.vue
 create mode 100644 src/components/userChoose/index.vue
 create mode 100644 src/view/goods/article/edit.vue
 create mode 100644 src/view/user/index.vue
 create mode 100644 src/view/user/user/index.vue

diff --git a/src/api/goods/index.js b/src/api/goods/index.js
new file mode 100644
index 0000000..e7e23fc
--- /dev/null
+++ b/src/api/goods/index.js
@@ -0,0 +1,42 @@
+import service from '@/utils/request'
+
+// @tag goods
+// @summary 获取商品（文章）列表
+// @param {object} params
+// @return {object} data
+// @router get /user/list
+export const list = (params) => {
+  return service({
+    url: '/article/list',
+    method: 'get',
+    params
+  })
+}
+
+export const add = (data) => {
+  return service({
+    url: '/article/list',
+    method: 'post',
+    data
+  })
+}
+export const edit = (data) => {
+  return service({
+    url: '/article/list',
+    method: 'put',
+    data
+  })
+}
+export const del = (data) => {
+  return service({
+    url: '/article/list',
+    method: 'delete',
+    data
+  })
+}
+export const detail = (id) => {
+  return service({
+    url: '/article/'+ id,
+    method: 'get',
+  })
+}
diff --git a/src/api/user/index.js b/src/api/user/index.js
new file mode 100644
index 0000000..204642c
--- /dev/null
+++ b/src/api/user/index.js
@@ -0,0 +1,14 @@
+import service from '@/utils/request'
+
+// @tag user
+// @summary 获取用户列表
+// @param {object} params
+// @return {object} data
+// @router get /user/list
+export const list = (params) => {
+  return service({
+    url: '/user/list',
+    method: 'get',
+    params
+  })
+}
diff --git a/src/assets/icons/bookmark-fill.svg b/src/assets/icons/bookmark-fill.svg
new file mode 100644
index 0000000..5f44d02
--- /dev/null
+++ b/src/assets/icons/bookmark-fill.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="20" height="20" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
+    
+    <g>
+    <path d="M6.667 2.667h18.667c0.736 0 1.333 0.597 1.333 1.333v0 25.524c0 0 0 0.001 0 0.001 0 0.368-0.298 0.667-0.667 0.667-0.131 0-0.254-0.038-0.357-0.104l0.003 0.002-9.645-6.049-9.645 6.048c-0.101 0.064-0.223 0.102-0.355 0.102-0.368 0-0.666-0.298-0.667-0.666v-25.524c0-0.736 0.597-1.333 1.333-1.333v0z" fill="rgba(21.93,132.09,251.94,1)"></path>
+    </g>
+  </svg>
\ No newline at end of file
diff --git a/src/components/MyTitle/MyTitle.vue b/src/components/MyTitle/MyTitle.vue
new file mode 100644
index 0000000..6323d67
--- /dev/null
+++ b/src/components/MyTitle/MyTitle.vue
@@ -0,0 +1,77 @@
+<template>
+  <div
+    style="
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-sizing: border-box;
+      border-bottom: 1px solid #eee;
+    "
+  >
+    <div>
+      <div class="myTitle" :style="isBorder ? {} : { border: 'unset' }">
+        <img :src="sonSvg" alt="" class="icon" :style="iconStyle" v-if="showIcon && sonSvg" />
+        <img
+          src="@/assets/icons/bookmark-fill.svg"
+          alt=""
+          class="icon"
+          :style="iconStyle"
+          v-else-if="showIcon"
+        />
+        <span class="title">{{ title }}</span>
+      </div>
+    </div>
+    <div style="padding-right: 20px">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, inject } from 'vue'
+  const props = defineProps({
+    title: {
+      type: String,
+      default: ''
+    },
+    isBorder: {
+      type: Boolean,
+      default: true
+    },
+    iconStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    showIcon: {
+      type: Boolean,
+      default: () => true
+    }
+  })
+  const sonSvg = ref(inject('svgData'))
+  console.log(sonSvg, 'data')
+</script>
+
+<style lang="scss" scoped>
+  .myTitle {
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    .icon {
+      width: 20px;
+      height: 20px;
+      margin-left: 20px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .title {
+      font-size: 16px;
+      color: #233041;
+      margin-left: 10px;
+      font-family: 'SourceHanSansCN-Medium';
+    }
+  }
+</style>
diff --git a/src/components/PmDialog/pm-dialog.vue b/src/components/PmDialog/pm-dialog.vue
new file mode 100644
index 0000000..7862521
--- /dev/null
+++ b/src/components/PmDialog/pm-dialog.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="dialog">
+    <el-dialog
+      class="operate"
+      v-model="computedVis"
+      :title="title"
+      :width="width"
+      @close="handleClose"
+      :lock-scroll="false"
+      :draggable="draggable"
+    >
+      <template #default>
+        <slot></slot>
+      </template>
+      <template #footer>
+        <slot name="footer"></slot>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import {computed } from 'vue'
+  const props = defineProps({
+    overlayBg: {
+      type: String,
+      default: 'transparent'
+    },
+    modelValue: {
+      type: Boolean,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    width: {
+      type: [Number, String],
+      default: () => 870
+    },
+    draggable: {
+      type: Boolean,
+      default: () => false
+    }
+  })
+  const emit = defineEmits(['update:modelValue', 'close'])
+  const computedVis = computed({
+    get: () => props.modelValue,
+    set: (val) => {
+      emit('update:modelValue', val)
+    }
+  })
+
+  function handleClose() {
+    emit('close')
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dialog {
+    :deep(.el-overlay) {
+      background-color: v-bind('props.overlayBg');
+    }
+    :deep(.el-dialog.operate) {
+      padding: 0 !important;
+      margin-top: 15vh !important;
+      border-radius: 6px;
+      .el-dialog__header {
+        padding: 0 0 0 20px;
+        height: 52px;
+        background-color: #f1f3f7;
+        line-height: 52px;
+        box-sizing: border-box;
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+        border-bottom: 1px solid #dddddd;
+        .el-dialog__headerbtn {
+          width: 52px;
+          height: 52px;
+        }
+      }
+      .el-dialog__body {
+        padding: 20px 30px 0 30px;
+        .download {
+          box-sizing: border-box;
+          width: 260px;
+          height: 40px;
+          background-color: rgba(232, 241, 255, 1);
+          border-radius: 4px;
+          padding: 10px 16px;
+          box-sizing: border-box;
+          line-height: 20px;
+          color: rgba(0, 118, 232, 1);
+          cursor: pointer;
+        }
+      }
+      .selectbtn {
+        color: #0076e8;
+        border-color: #0076e8;
+        // cursor: pointer;
+        &:hover {
+          background-color: #0076e8;
+          color: #fff;
+        }
+      }
+      .el-dialog__footer {
+        text-align: center;
+        padding: 0 0 20px 0;
+      }
+    }
+  }
+</style>
diff --git a/src/components/columnItem/ColumnItem.vue b/src/components/columnItem/ColumnItem.vue
new file mode 100644
index 0000000..3907761
--- /dev/null
+++ b/src/components/columnItem/ColumnItem.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="column-item">
+    <MyTitle v-if="!!title" :title="title" :showIcon="showIcon">
+      <template #right>
+        <slot name="right"></slot>
+      </template>
+    </MyTitle>
+    <div class="cont">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, inject } from 'vue'
+  import MyTitle from '../myTitle/MyTitle.vue'
+  const props = defineProps({
+    title: {
+      type: String,
+      default: ''
+    },
+    showIcon: {
+      type: Boolean,
+      default: () => true
+    }
+  })
+</script>
+
+<style lang="scss" scoped>
+  .column-item {
+    background: #fff;
+    border-radius: 4px;
+    margin-bottom: 20px;
+
+    .cont {
+      padding: 20px;
+    }
+  }
+</style>
diff --git a/src/components/content/index.vue b/src/components/content/index.vue
index d7be8ff..58979d2 100644
--- a/src/components/content/index.vue
+++ b/src/components/content/index.vue
@@ -28,7 +28,7 @@
         v-if="config.index"
         type="index"
         align="center"
-        width="50px"
+        width="80px"
         label="序号"
       />
       <template v-for="scheme in config.schemes" :key="scheme.attrs.label">
@@ -65,9 +65,9 @@
 </template>
 
 <script setup>
-  import { computed, onBeforeMount, onMounted, watch } from 'vue'
+  import { computed, onBeforeMount, onMounted, watch, ref } from 'vue'
   import Sortable from 'sortablejs'
-  import { nanoid } from '@/utils/jsencrypt'
+  // import { nanoid } from '@/utils/jsencrypt'
 
   const props = defineProps({
     data: {
@@ -148,9 +148,9 @@
     (data) => {
       // if (props.config.drag) {
       computedData.value = data.map((item) => {
-        if (!item.nanoId) {
-          item.nanoId = nanoid()
-        }
+        // if (!item.nanoId) {
+        //   item.nanoId = nanoid()
+        // }
         return item
       })
       // } else {
@@ -204,7 +204,7 @@
   }
 
   function handleTableCurrentChange(data) {
-    console.log(data, 'data')
+    // console.log(data, 'data')
     emits('update:checkData', data)
   }
 
@@ -234,9 +234,9 @@
   onBeforeMount(() => {
     // if (props.config.drag) {
     computedData.value = props.data.map((item) => {
-      if (!item.nanoId) {
-        item.nanoId = nanoid()
-      }
+      // if (!item.nanoId) {
+      //   item.nanoId = nanoid()
+      // }
       return item
     })
     // } else {
@@ -258,7 +258,7 @@
   .content {
     background: #fff;
     border-radius: 4px;
-    padding: 20px 20px 0 20px;
+    //padding: 20px 20px 0 20px;
     box-sizing: border-box;
     :deep(.el-table) {
       .current-row {
diff --git a/src/components/richtext/rich-edit.vue b/src/components/richtext/rich-edit.vue
index 151b7df..030f35b 100644
--- a/src/components/richtext/rich-edit.vue
+++ b/src/components/richtext/rich-edit.vue
@@ -8,7 +8,7 @@
     <Editor
       v-model="valueHtml"
       class="overflow-y-hidden mt-0.5"
-      style="height: 18rem"
+      style="min-height: 18rem"
       :default-config="editorConfig"
       mode="default"
       @onCreated="handleCreated"
diff --git a/src/components/userChoose/index.vue b/src/components/userChoose/index.vue
new file mode 100644
index 0000000..9699ec7
--- /dev/null
+++ b/src/components/userChoose/index.vue
@@ -0,0 +1,236 @@
+<template>
+  <PmDialog
+    v-model="dialoagVisible"
+    :title="'选择' + title"
+    width="1200px"
+    style="max-height: 50vh"
+  >
+    <div class="container">
+<!--      <div class="left">-->
+<!--        <el-input-->
+<!--          style="width: 80%; margin-bottom: 0.625rem"-->
+<!--          placeholder="请输入部门名称"-->
+<!--          v-model="deptName"-->
+<!--        />-->
+<!--        <el-scrollbar height="31.25rem">-->
+<!--          <el-tree-->
+<!--            ref="deptTreeRef"-->
+<!--            :data="deptTree"-->
+<!--            :props="defaultProps"-->
+<!--            :filter-node-method="filterNode"-->
+<!--            @node-click="handleNodeClick"-->
+<!--            value-key="id"-->
+<!--            placeholder="请选择归属部门"-->
+<!--          />-->
+<!--        </el-scrollbar>-->
+<!--      </div>-->
+      <div class="right">
+        <ColumnItem class="content">
+          <el-form inline >
+            <el-form-item :label="title + '名称'">
+              <el-input placeholder="请输入" v-model="queryParams.nickName" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="searchData">查询</el-button>
+              <el-button @click="resaltData">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </ColumnItem>
+        <ColumnItem class="content">
+          <el-table
+            ref="treeRef"
+            style="height: 50vh; overflow: auto"
+            :data="tabList"
+            v-loading="loading"
+            :highlight-current-row="!props.multiple"
+            @current-change="nodeClick"
+            @selection-change="handleSelectionChange"
+            row-key="ID"
+          >
+            <el-table-column v-if="props.multiple" type="selection" width="55" />
+            <el-table-column type="index" width="50" />
+            <el-table-column prop="nickName" label="用户名称" />
+            <el-table-column prop="userName" label="用户账号" />
+          </el-table>
+        </ColumnItem>
+        <el-pagination
+          class="pagination"
+          v-model:current-page="queryParams.page"
+          background
+          v-model:page-size="queryParams.pageSize"
+          :total="total"
+          @size-change="getStaffList"
+          @current-change="getStaffList"
+        />
+      </div>
+    </div>
+    <div style="padding: 10px; display: flex; justify-content: center">
+      <el-button
+        @click="requireDiolag"
+        type="primary"
+        :disabled="props.multiple ? choosedTableRows.length < 1 : !selectDept"
+      >确定</el-button
+      >
+      <el-button @click="dialoagVisible = false">取消</el-button>
+    </div>
+  </PmDialog>
+</template>
+
+<script setup>
+  import {onMounted, ref, watch, nextTick } from 'vue'
+  import PmDialog from '@/components/PmDialog/pm-dialog.vue'
+  import ColumnItem from '@/components/columnItem/ColumnItem.vue'
+  import { getUserList } from '@/api/user.js'
+  // import { listUser } from '@/api/system/user'
+  const treeRef = ref()
+  const props = defineProps({
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '收款人'
+    }
+  })
+  const emit = defineEmits(['getRecipientInfo'])
+  const loading = ref(false)
+  const dialoagVisible = ref(false)
+  const deptName = ref(null)
+  const selectDept = ref(null),
+    choosedTableRows = ref([]),
+    unChoosed = ref([])
+  // 使用Set存储选中ID（更高效的存储方式）
+  const selectedIds = ref(new Set())
+  // const deptTree = ref([])
+  const tabList = ref([])
+  const total = ref(0)
+  // const defaultProps = ref({ value: 'value', label: 'label', children: 'children' })
+  const queryParams = ref({
+    pageSize: 10,
+    page: 1,
+    deptId: null,
+    nickName: ''
+  })
+
+  onMounted(() => {
+    // getDeptList()
+    getStaffList()
+  })
+  const deptTreeRef = ref()
+  watch(
+    () => deptName.value,
+    (val) => {
+      deptTreeRef.value.filter(val)
+    }
+  )
+
+  function open() {
+    dialoagVisible.value = true
+  }
+  // async function getDeptList() {
+  //   deptTree.value = await getDeptTree()
+  // }
+  let depClick = ref(false)
+  function getStaffList() {
+    loading.value = true
+    getUserList(queryParams.value)
+      .then(async (res) => {
+        tabList.value = res.data.list
+        total.value = res.data.total
+        if(props.multiple) {
+          // 下一Tick执行确保DOM更新完成
+          depClick.value = true
+          await nextTick(() => {
+            // 根据存储的ID恢复选中状态
+            tabList.value.forEach((row) => {
+              if (selectedIds.value.has(row.ID)) {
+                treeRef.value.toggleRowSelection(row, true)
+              }
+            })
+          })
+          depClick.value = false
+        }
+      })
+      .finally(() => {
+        loading.value = false
+      })
+  }
+  function searchData() {
+    getStaffList()
+  }
+  function resaltData() {
+    queryParams.value.pageSize = 10
+    queryParams.value.page = 1
+    queryParams.value.nickName = ''
+    getStaffList()
+  }
+
+  // function handleNodeClick(node) {
+  //   queryParams.value.deptId = node.id
+  //   getStaffList()
+  // }
+  function nodeClick(e) {
+    selectDept.value = e
+  }
+  function handleSelectionChange(selection) {
+    console.log(selection)
+    // 更新选中ID集合
+    selection.forEach((row) => selectedIds.value.add(row.ID))
+
+    // 删除当前页取消选中的ID,前提是非点击部门或分页节点触发
+    if (!depClick.value) {
+      // 找出当前页需要删除的ID
+      unChoosed.value = []
+      if (selection.length > 0) {
+        selection = selection.map((item) => item.ID)
+        tabList.value.forEach((item) => {
+          if (!selection.includes(item.ID)) {
+            unChoosed.value.push(item.ID)
+          }
+        })
+      } else {
+        unChoosed.value = JSON.parse(JSON.stringify(tabList.value)).map((item) => item.ID)
+      }
+      selectedIds.value.forEach((id) => {
+        if (unChoosed.value.includes(id)) {
+          selectedIds.value.delete(id)
+        }
+      })
+    }
+    // 更新已选数据（使用过滤确保有效性）
+    choosedTableRows.value = Array.from(selectedIds.value)
+      .map((id) => [...tabList.value, ...choosedTableRows.value].find((r) => r.ID === id))
+      .filter(Boolean)
+  }
+  // function filterNode(value, data) {
+  //   if (!value) return true
+  //   return data.label.includes(value)
+  // }
+  function requireDiolag() {
+    emit('getRecipientInfo', props.multiple ? choosedTableRows.value : selectDept.value)
+    dialoagVisible.value = false
+  }
+  defineExpose({
+    open
+  })
+</script>
+
+<style scoped lang="scss">
+  .container {
+    display: flex;
+    .left {
+      width: 17.5rem;
+      flex-shrink: 0;
+    }
+    .right {
+      flex: 1;
+      :deep(.content:first-child) {
+        margin-bottom: 0;
+      }
+      :deep(.cont) {
+        padding: 0;
+      }
+    }
+  }
+</style>
diff --git a/src/config.js b/src/config.js
index c1d01e4..e0d51e3 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,3 +1,5 @@
+import {getDict} from '@/utils/dictionary'
+export let userStatus = await getDict('user-status')
 export  const ORDER_SEARCH_CONFIG = [
   {
     type: 'input',
@@ -16,7 +18,53 @@ export  const ORDER_SEARCH_CONFIG = [
     rangeSeparator: '-'
   },
 ]
-// 经费申请列表
+export  const USER_SEARCH_CONFIG = [
+  {
+    type: 'input',
+    prop:'name',
+    label: '用户名称',
+    placeholder: '请输入',
+  },
+  {
+    type: 'select',
+    prop:'status',
+    label: '状态',
+    placeholder: '请选择',
+    children:{
+      list: [
+        {
+          label: '全部',
+          value: ''
+        },
+        ...userStatus
+      ]
+    },
+  }
+]
+export  const ARTICLE_SEARCH_CONFIG = [
+  {
+    type: 'input',
+    prop:'name',
+    label: '名称',
+    placeholder: '请输入',
+  },
+  {
+    type: 'select',
+    prop:'status',
+    label: '状态',
+    placeholder: '请选择',
+    children:{
+      list: [
+        {
+          label: '全部',
+          value: ''
+        },
+        ...userStatus
+      ]
+    },
+  }
+]
+// 订单列表
 export const ORDER_TABLE_CONFIG = {
   index: true,
   schemes: [
@@ -48,6 +96,56 @@ export const ORDER_TABLE_CONFIG = {
         prop: 'order_type'
       }
     },
+    {
+      attrs: {
+        label: '状态',
+        prop: 'status',
+        align: 'center'
+      },
+      slot: 'status'
+    },{
+      attrs: {
+        label: '创建时间',
+        prop: 'CreatedAt',
+        align: 'center'
+      },
+      slot: 'CreatedAt'
+    },{
+      attrs: {
+        label: '更新时间',
+        prop: 'UpdatedAt',
+        align: 'center'
+      },
+      slot: 'UpdatedAt'
+    },
+    {
+      attrs: {
+        label: '操作',
+        prop: 'operate',
+        align: 'center'
+      },
+      slot: 'operate'
+    }
+  ]
+}
+// 用户列表
+export const USER_TABLE_CONFIG = {
+  index: true,
+  schemes: [
+    {
+      attrs: {
+        label: 'ID',
+        prop: 'order_no',
+        align: 'center'
+      }
+    },
+    {
+      attrs: {
+        label: '名称',
+        prop: 'name',
+        align: 'center'
+      }
+    },
     {
       attrs: {
         label: '状态',
@@ -78,3 +176,52 @@ export const ORDER_TABLE_CONFIG = {
     }
   ]
 }
+// 文章列表
+export const ARTICLE_TABLE_CONFIG = {
+  index: true,
+  schemes: [
+    {
+      attrs: {
+        label: '封面',
+        prop: 'coverImg',
+        align: 'center'
+      },
+      slot: 'coverImg'
+    },
+    {
+      attrs: {
+        label: '名称',
+        prop: 'title',
+        align: 'center'
+      }
+    },{
+      attrs: {
+        label: '价格',
+        prop: 'price',
+        align: 'center'
+      }
+    },{
+      attrs: {
+        label: '创建时间',
+        prop: 'CreatedAt',
+        align: 'center'
+      },
+      slot: 'CreatedAt'
+    },{
+      attrs: {
+        label: '更新时间',
+        prop: 'UpdatedAt',
+        align: 'center'
+      },
+      slot: 'UpdatedAt'
+    },
+    {
+      attrs: {
+        label: '操作',
+        prop: 'operate',
+        align: 'center'
+      },
+      slot: 'operate'
+    }
+  ]
+}
diff --git a/src/pathInfo.json b/src/pathInfo.json
index 0cf0b0c..75fe9b2 100644
--- a/src/pathInfo.json
+++ b/src/pathInfo.json
@@ -22,6 +22,9 @@
   "/src/view/example/index.vue": "Example",
   "/src/view/example/upload/scanUpload.vue": "scanUpload",
   "/src/view/example/upload/upload.vue": "Upload",
+  "/src/view/goods/article/edit.vue": "Edit",
+  "/src/view/goods/article/index.vue": "Index",
+  "/src/view/goods/index.vue": "goods",
   "/src/view/init/index.vue": "Init",
   "/src/view/layout/aside/asideComponent/asyncSubmenu.vue": "AsyncSubmenu",
   "/src/view/layout/aside/asideComponent/index.vue": "AsideComponent",
@@ -40,6 +43,8 @@
   "/src/view/layout/setting/title.vue": "layoutSettingTitle",
   "/src/view/layout/tabs/index.vue": "HistoryComponent",
   "/src/view/login/index.vue": "Login",
+  "/src/view/order/index.vue": "OrderManage",
+  "/src/view/order/order/index.vue": "Index",
   "/src/view/person/person.vue": "Person",
   "/src/view/routerHolder.vue": "RouterHolder",
   "/src/view/superAdmin/api/api.vue": "Api",
@@ -68,11 +73,9 @@
   "/src/view/systemTools/installPlugin/index.vue": "Index",
   "/src/view/systemTools/pubPlug/pubPlug.vue": "PubPlug",
   "/src/view/systemTools/system/system.vue": "Config",
+  "/src/view/user/index.vue": "UserManage",
+  "/src/view/user/user/index.vue": "Index",
   "/src/plugin/announcement/form/info.vue": "InfoForm",
   "/src/plugin/announcement/view/info.vue": "Info",
-  "/src/plugin/email/view/index.vue": "Email",
-  "/src/view/goods/index.vue": "Goods",
-  "/src/view/goods/article/index.vue": "Article",
-  "/src/view/order/index.vue": "OrderManage",
-  "/src/view/order/order/index.vue": "Order"
+  "/src/plugin/email/view/index.vue": "Email"
 }
\ No newline at end of file
diff --git a/src/style/main.scss b/src/style/main.scss
index a213d48..78c1787 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -49,3 +49,18 @@
     outline: none;
   }
 }
+.container-wrapper{
+  min-height: calc(100vh - 12rem);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+.footer-box{
+  display: flex;
+  justify-content: center;
+  padding: 1rem 0;
+  position: sticky;
+  bottom: 0;
+  border-top: 1px solid #ededed;
+}
diff --git a/src/view/goods/article/edit.vue b/src/view/goods/article/edit.vue
new file mode 100644
index 0000000..a3ed9ff
--- /dev/null
+++ b/src/view/goods/article/edit.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="container-wrapper">
+    <el-form
+      ref="ruleFormRef"
+      :model="formData"
+      :rules="rules"
+      label-width="auto"
+      style="margin-top: 0.5rem; "
+    >
+      <ColumnItem title="文章编辑">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="标题" prop="title">
+              <el-input v-model="formData.title" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="价格" prop="price">
+              <el-input v-model="formData.price" type="number"  />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row  :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="图片" prop="coverImg">
+              <el-upload
+                class="avatar-uploader"
+                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeAvatarUpload"
+              >
+                <img v-if="formData.coverImg" :src="formData.coverImg" class="avatar"  alt=""/>
+                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="讲师" prop="teacher">
+              <el-input v-model="formData.teacher" readonly @click="() => userDialogRef.open()" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="20">
+            <el-form-item label="详情" prop="content">
+              <RichEdit v-model="formData.content"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="20">
+            <el-form-item label="备注" prop="desc">
+              <el-input type="textarea"  v-model="formData.desc" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </ColumnItem>
+    </el-form>
+    <div class="gva-table-box footer-box">
+      <el-button @click="$router.back()">返回</el-button>
+      <el-button type="primary" @click="submit">提交</el-button>
+    </div>
+
+
+  </div>
+  <!--    选择人员弹窗-->
+  <userChoose
+    ref="userDialogRef"
+    @getRecipientInfo="getStaffInfo"
+    title="讲师人员"
+  />
+</template>
+<script setup>
+  import {onMounted, ref } from 'vue'
+  import userChoose from '@/components/userChoose/index.vue'
+  import { useRouter, useRoute} from 'vue-router'
+  import {detail} from '@/api/goods/index.js'
+  import ColumnItem from '@/components/columnItem/ColumnItem.vue'
+  import { ElMessage } from 'element-plus'
+  import { Plus } from '@element-plus/icons-vue'
+  import RichEdit from '@/components/richtext/rich-edit.vue'
+  const router = useRouter()
+  const route = useRoute()
+  const userDialogRef = ref()
+
+  const ruleFormRef = ref(null), formData = ref({}), rules = ref({
+    title: [
+      { required: true, message: '请输入文章标题', trigger: 'blur' }
+    ],
+  })
+
+  onMounted(() => {
+    console.log(route.query.id)
+    if(route.query.id) {
+        getDetail()
+    }
+  })
+  const handleAvatarSuccess = ( response,  uploadFile  ) => {
+    formData.value.coverImg = URL.createObjectURL(uploadFile.raw)
+  }
+  const beforeAvatarUpload= (rawFile) => {
+    if (!['image/jpeg', 'image/png'].includes(rawFile.type)) {
+      ElMessage.error('请上传图片格式!')
+      return false
+    } else if (rawFile.size / 1024 / 1024 > 2) {
+      ElMessage.error('文件大小不能超过 2MB!')
+      return false
+    }
+    return true
+  }
+  async  function getDetail() {
+    const res = await detail(route.query.id)
+    if(res.code === 0) {
+      formData.value = res.data
+    }
+  }
+  function getStaffInfo(data) {
+    console.log(data)
+    formData.value.teacherId = data.ID
+    formData.value.teacher = data.nickName
+  }
+  function submit() {
+    console.log('提交')
+
+  }
+</script>
+<style  lang="scss" scoped>
+  .avatar-uploader .el-upload {
+    border: 1px dashed var(--el-border-color) !important;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+    //border: 1px dashed red !important;
+  }
+
+  .avatar-uploader .el-upload:hover {
+    border-color: var(--el-color-primary);
+  }
+
+  .el-icon.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    text-align: center;
+  }
+
+  :deep{
+    .el-row {
+      justify-content: space-around;
+    }
+    .el-form{
+      flex: 1 ;
+      background: white;
+      overflow: hidden;
+    }
+  }
+</style>
diff --git a/src/view/goods/article/index.vue b/src/view/goods/article/index.vue
index b91856a..7cd59db 100644
--- a/src/view/goods/article/index.vue
+++ b/src/view/goods/article/index.vue
@@ -1,11 +1,132 @@
 <template>
-  <div class="container">
-    文章管理
+  <div >
+    <div class="searchForm">
+      <searchForm
+        :search="ARTICLE_SEARCH_CONFIG"
+        @searchData="searchData"
+        @resetData="resetData"
+        class="search-box searchForm"
+      />
+    </div>
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <el-button  type="primary" icon="plus" @click="openDialog()">新增</el-button>
+      </div>
+      <Content
+        @changePage="changePage"
+        :total="total"
+        v-model:tabloading="tableLoading"
+        v-model:currentPage="queryParams.page"
+        v-model:pageSize="queryParams.pageSize"
+        :data="tableData"
+        :config="ARTICLE_TABLE_CONFIG"
+      >
+        <template #status="{ row }">
+          <el-tag :type="tag(row.status).extend">{{ tag(row.status).label }}</el-tag>
+        </template>
+        <template #coverImg="{ row }">
+          <el-image
+            style="width: 100px; height: 100px"
+            :src="row.coverImg"
+            :zoom-rate="1.2"
+            :max-scale="7"
+            :min-scale="0.2"
+            :preview-src-list="[row.coverImg]"
+            show-progress
+            :initial-index="4"
+            fit="cover"
+          />
+        </template>
+        <template #CreatedAt="{ row }">
+          {{ formatDate(row.CreatedAt) }}
+        </template>
+
+        <template #UpdatedAt="{ row }">
+          {{ formatDate(row.UpdatedAt) }}
+        </template>
+        <template #operate="{ row }">
+          <el-button  type="primary" link class="table-button" @click="handleDetail(row)">
+            <el-icon style="margin-right: 5px"><InfoFilled /></el-icon>查看
+          </el-button>
+          <el-button  type="primary" link icon="edit" class="table-button" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="primary" link icon="delete" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </Content>
+    </div>
   </div>
 </template>
 <script setup>
+  import searchForm from '@/components/searchForm/index.vue'
+  import Content from '@/components/content/index.vue'
+  import {list} from '@/api/goods/index.js'
+  import { ref, onMounted } from 'vue'
+  import {formatDate} from '@/utils/format'
+  import { ARTICLE_SEARCH_CONFIG, ARTICLE_TABLE_CONFIG } from '@/config'
+  import { InfoFilled } from '@element-plus/icons-vue'
+  import { useRouter, useRoute} from 'vue-router'
+  const router = useRouter()
+  const route = useRoute()
 
+
+  const tableLoading = ref(true),  tableData = ref([{status:1}])
+  const queryParams = ref({
+    page: 1,
+    pageSize: 10,
+    orderId: '',
+    startTime: '',
+    endTime: ''
+  }), total = ref(0)
+  // const EMPTY_STR = '- -'
+  const tag = (status) => {
+    return userStatus.find((item) => item.value === status+'') || { type: '', label: EMPTY_STR }
+  }
+  const searchData = (data) => {
+    if (data.times) {
+      data.startTime = data.times[0]
+      data.endTime = data.times[1]
+    }
+    queryParams.value.page = 1
+    queryParams.value = { ...queryParams.value, ...data }
+    delete queryParams.value.times
+    getList()
+  }
+  const resetData = () => {
+    queryParams.value = {
+      page: 1,
+      pageSize: 10,
+    }
+    getList()
+  }
+  onMounted(() => {
+    getList()
+  })
+  async function getList() {
+    const res = await list(queryParams.value)
+    if(res.code === 0) {
+      tableData.value = res.data.list
+      total.value = res.data.total
+    }
+  }
+
+  function handleDetail(row) {
+
+  }
+  function handleEdit(row) {
+    console.log(row)
+      router.push({
+        name: 'edit',
+        query: {
+          id: row.ID
+        }
+      })
+  }
+  function handleDelete(row) {
+
+  }
+  function changePage(data) {
+    queryParams.value.pageNum = data
+    getList()
+  }
 </script>
 <style lang="scss" scoped>
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/view/order/order/index.vue b/src/view/order/order/index.vue
index 0d29592..1a4fb36 100644
--- a/src/view/order/order/index.vue
+++ b/src/view/order/order/index.vue
@@ -9,22 +9,6 @@
           />
         </div>
         <div class="gva-table-box">
-<!--            <el-table :data="tableData" style="width: 100%">-->
-<!--                <el-table-column type="index" label="序号" width="120" />-->
-<!--                <el-table-column prop="order_no" label="订单号" width="180" />-->
-<!--                <el-table-column prop="name" label="商品名称" />-->
-<!--                <el-table-column prop="price" label="价格" />-->
-<!--                <el-table-column prop="order_type" label="类型" />-->
-<!--                <el-table-column prop="status" label="状态" />-->
-<!--                <el-table-column prop="CreatedAt" label="创建时间" />-->
-<!--                <el-table-column prop="UpdatedAt" label="更新时间" />-->
-<!--                <el-table-column label="操作" fixed="right" width="100">-->
-<!--                    <template #default="scope">-->
-<!--                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>-->
-<!--                    </template>-->
-<!--                </el-table-column>-->
-<!--            </el-table>-->
-
             <Content
               @changePage="changePage"
               :total="total"
@@ -50,10 +34,10 @@
 import searchForm from '@/components/searchForm/index.vue'
 import Content from '@/components/content/index.vue'
 import {list} from '@/api/order'
-import { ref, reactive, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { ORDER_SEARCH_CONFIG, ORDER_TABLE_CONFIG } from '@/config'
-const tableLoading = ref(true),  tableData = ref([{ status: 1 }])
-const queryParams = reactive({
+const tableLoading = ref(true),  tableData = ref([])
+const queryParams = ref({
     page: 1,
     pageSize: 10,
     orderId: '',
@@ -78,7 +62,6 @@ const searchData = (data) => {
   queryParams.value.page = 1
   queryParams.value = { ...queryParams.value, ...data }
   delete queryParams.value.times
-  // console.log(queryParams.value)
   getList()
 }
 const resetData = () => {
@@ -92,7 +75,7 @@ onMounted(() => {
     getList()
 })
 async function getList() {
-    const res = await list(queryParams)
+    const res = await list(queryParams.value)
     if(res.code === 0) {
         tableData.value = res.data.list
         total.value = res.data.total
@@ -106,10 +89,9 @@ function handleDetail(row) {
 
 }
 
-
 function changePage(data) {
-queryParams.value.pageNum = data
-getList()
+  queryParams.value.pageNum = data
+  getList()
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/view/user/index.vue b/src/view/user/index.vue
new file mode 100644
index 0000000..d9f7d19
--- /dev/null
+++ b/src/view/user/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <router-view v-slot="{ Component }">
+      <transition mode="out-in" name="el-fade-in-linear">
+        <keep-alive :include="routerStore.keepAliveRouters">
+          <component :is="Component" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </div>
+</template>
+
+<script setup>
+  import { useRouterStore } from '@/pinia/modules/router'
+  const routerStore = useRouterStore()
+
+  defineOptions({
+    name: 'UserManage'
+  })
+</script>
+
diff --git a/src/view/user/user/index.vue b/src/view/user/user/index.vue
new file mode 100644
index 0000000..4ab5859
--- /dev/null
+++ b/src/view/user/user/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <div >
+    <div class="searchForm">
+      <searchForm
+        :search="USER_SEARCH_CONFIG"
+        @searchData="searchData"
+        @resetData="resetData"
+        class="search-box searchForm"
+      />
+    </div>
+    <div class="gva-table-box">
+      <Content
+        @changePage="changePage"
+        :total="total"
+        v-model:tabloading="tableLoading"
+        v-model:currentPage="queryParams.page"
+        v-model:pageSize="queryParams.pageSize"
+        :data="tableData"
+        :config="USER_TABLE_CONFIG"
+      >
+        <template #status="{ row }">
+          <!--          <el-tag :type="tag(row.status).extend">{{ tag(row.status).label }}</el-tag>-->
+          <el-switch v-model="row.status"
+                     active-value="1"
+                     inactive-value="0"
+                     :loading="statusChangeLoading"
+                     :before-change="() => statusChangeBefore(row)" />
+
+        </template>
+        <template #operate="{ row }">
+          <el-button type="text" @click="handleDetail(row)">详情</el-button>
+          <!--          <el-button type="text" @click="handleDelete(row)">删除</el-button>-->
+        </template>
+      </Content>
+
+    </div>
+  </div>
+</template>
+<script setup>
+  import searchForm from '@/components/searchForm/index.vue'
+  import Content from '@/components/content/index.vue'
+  import {list} from '@/api/user/index.js'
+  import { ref, onMounted } from 'vue'
+  import { USER_SEARCH_CONFIG, USER_TABLE_CONFIG } from '@/config'
+  const tableLoading = ref(true),  tableData = ref([{status:1}])
+  const queryParams = ref({
+    page: 1,
+    pageSize: 10,
+    orderId: '',
+    startTime: '',
+    endTime: ''
+  }), total = ref(0)
+  const statusChangeLoading = ref(false)
+  // const EMPTY_STR = '- -'
+  // const tag = (status) => {
+  //   return userStatus.find((item) => item.value === status+'') || { type: '', label: EMPTY_STR }
+  // }
+  const searchData = (data) => {
+    if (data.times) {
+      data.startTime = data.times[0]
+      data.endTime = data.times[1]
+    }
+    queryParams.value.page = 1
+    queryParams.value = { ...queryParams.value, ...data }
+    delete queryParams.value.times
+    getList()
+  }
+  const resetData = () => {
+    queryParams.value = {
+      page: 1,
+      pageSize: 10,
+    }
+    getList()
+  }
+  onMounted(() => {
+    getList()
+  })
+  async function getList() {
+    const res = await list(queryParams.value)
+    if(res.code === 0) {
+      tableData.value = res.data.list
+      total.value = res.data.total
+    }
+  }
+
+  function handleDetail(row) {
+
+  }
+
+  function changePage(data) {
+    queryParams.value.pageNum = data
+    getList()
+  }
+  function statusChangeBefore(row) {
+    console.log(row)
+    statusChangeLoading.value = true
+    return new Promise(resolve => {
+        setTimeout(() => {
+          statusChangeLoading.value = false
+          return resolve(true)
+        },500)
+    })
+  }
+</script>
+<style lang="scss" scoped>
+</style>