前端实践操作第六天——陪诊系统搭建

#### 菜单管理列表和编辑逻辑 

<el-table :data="tableData.list" style="width: 100%;">
        <el-table-column prop="id" label="id">
        </el-table-column>
        <el-table-column prop="name" label="昵称">
        </el-table-column>
        <el-table-column prop="permissionName" label="菜单权限" width="500px">
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" @click="open(scope.row)">
                    编辑
                </el-button>
            </template>
        </el-table-column>
    </el-table>

 //列表数据
    const tableData = reactive({
        list: [],
        total: 0
    })

    //打开弹窗
    const open = (rowData = {}) => {
        dialogFormVisable.value = true
        //弹窗打开form生成是异步的
        nextTick(() => {
            if (rowData) {
                Object.assign(form, { id: rowData.id, name: rowData.name })
                treeRef.value.setCheckedKeys(rowData.permission)
            }
        })
    }

    //请求列表数据
    const getListData = () => {
        menuList(paginationData).then(({data}) => {
            const { list, total} = data.data
            tableData.list = list
            tableData.total = total
        })
    }

#### 菜单管理剩余问题处理 

1.弹窗关闭

2.分页效果

 <div class="btns">
        <el-button :icon="Plus" type="primary" @click="open(null)" size="small">新增</el-button>
    </div>
    
    <el-table :data="tableData.list" style="width: 100%;">
        <el-table-column prop="id" label="id">
        </el-table-column>
        <el-table-column prop="name" label="昵称">
        </el-table-column>
        <el-table-column prop="permissionName" label="菜单权限" width="500px">
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" @click="open(scope.row)">
                    编辑
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination-info">
        <el-pagination
      v-model:current-page="paginationData.pageNum"
      :page-size="paginationData.pageSize"
      :background="false"
      size="small"
      layout="total, prev, pager, next"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>

 3.在components创建一个panelHead.vue

<template>
    <div class="panel-heading">
        <div class="title">菜单管理</div>
        <p class="description">菜单规则通常对应一个控制器的方法，同时菜单栏数据也从规则中获取</p>
    </div>
</template>

<script setup>
</script>

<style lang="less" scoped>
.panel-heading {
    padding: 15px;
    background: #e8edf0;
    border-color: #e8edf0;
    position: relative;
    .panel-lead {
      font-size: 14px;
      .title {
        font-weight: bold;
        font-style: normal;
      }
      .description {
        margin-top: 5px;
      }
    }
  }
</style>

#### 账号管理列表

1.下载dayjs

cnpm install dayjs

2.编写具体代码

admin的index.vue

<template>
   <el-table :data="tableData.list" style="width: 100%;">
        <el-table-column prop="id" label="id">
        </el-table-column>
        <el-table-column prop="name" label="昵称">
        </el-table-column>
        <el-table-column prop="permission_id" label="所属组别" >
           <template #default="scope">
                {{ permissionName(scope.row.permission_id) }}
            </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号">
        </el-table-column>
        <el-table-column prop="active" label="状态" >
           <template #default="scope">
            <el-tag :type="scope.row.active ? 'success' : 'danger'">{{ scope.row.active ? '正常' : '失效' }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column  label="创建时间" >
           <template #default="scope">
              <div class="flex-box">
                <el-icon><Clock /></el-icon>
                <span style="margin-left: 10px;">{{ scope.row.create_time }}</span>
              </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
                <el-button type="primary" @click="open(scope.row)">
                    编辑
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script setup>
import { authAdmin,menuSelectList } from '../../../api'
import { ref,reactive,onMounted } from 'vue'
import dayjs from 'dayjs'

const paginationData = reactive({
  pageNum: 1,
  pageSize: 10
})

//列表数据
const tableData = reactive({
        list: [],
        total: 0
})

onMounted(() => {
  authAdmin(paginationData).then(({data}) => {
    const { list,total } = data.data 
    list.forEach(item => {
      item.create_time = dayjs(item.create_time).format('YYYY-MM-DD')
    })
    tableData.list = list
    tableData.total = total
  })
  menuSelectList().then(({ data }) => {
    options.value = data.data
  })
})

const options = ref([])

//根据权限ID匹配权限名称
const permissionName = (id) => {
  const data = options.value.find(el => el.id === id)
  return data ? data.name : '超级管理员'
}

const open = () => {

}
  
</script>



<style lang="less" scoped>
.flex-box {
  display: flex;
  align-items: center;
}
</style>