分页器发生改变重新请求数据

• 第一次请求数据的时候、页码发生改变的时候，都需要发送网络请求

定义一个函数，统一发送网络请求

1.获取offset/size，将信息传递给下一步
2.发起网络请求
①第一次页面请求数据
②页码相关逻辑发生变化需要请求数据

点击查询和重置

user-search和user-content组件之间的通信，user-search发生点击，需要传到user-content。

查询：

• 先将user-search的数据传给两个组件的父组件user
  • user-search发出事件query-click，顺便将formData传过去给user
  • user中定义发出的事件query-click拿到数据
• 在user上用ref拿到user-content的实例，拿到user-content的方法fetchUserListData（user-content需要将方法暴露出去），将formData传递给fetchUserListData函数
• 在user-content中的fetchUserListData中将拿到的数据(formData)和已有的数据(size, offset)进行拼接，发送post查询网络请求

重置

• 在user-search中定义reset-click，将事件传递出去，在user中调用fetchUserListData函数，不需要传递参数

user-content删除数据

1.监听删除按钮的点击，拿到删除数据的id
① 通过作用域插槽将id传递给监听的点击
2.在service中定义新的方法deleteUserById，进行request
3.store中定义actions，发送网络请求
4.在监听函数中调用网络请求方法
5。重新请求新的数据，调用上面封装好的方法，传入（offset：0, size: 10），否则删除数据后页面不会更新

新建用户

1.在user-content的新建按钮监听点击
2.新建用户的弹窗，新建一个user-modal组件，在element组件库找到Dialog对话框组件
3.编写组件
4.在user中使用
5.在user-content中的点击进行监听，自定义事件发送到user进行使用，控制弹窗的打开关闭

选择角色和部门下滑框

1.先把所有的角色请求下来
2.专门找个地方编写网络请求数据把数据保存下来，定义一个store，因为很多地方都有可能用到这个数据
3.在登录成功后发起网络请求保存数据，因为登录成功后随时会用到
4.弹出modal对话框->组件库
5.点击确定提交表单
5.1 把数据收集起来，发送网络请求创建新用户

编辑用户

1.在usercontent中监听编辑按钮的点击，将hanleEditClick事件传递到user
2.通过作用域插槽将整行数据itemData通过监听函数传递过来
3.在user中接受usercontent传递过来的事件，在user的hanleEditClick中调用setModalVisible并把itemData传递过去
4.在user-modal中的setModalVisible中接受itemData，并区分是新建按钮的弹窗还是编辑按钮的弹窗，新建按钮的弹窗不回显数据，编辑按钮不显示[输入密码]的输入框；同时更改modal标题，新建用户/编辑用户
5.点击确认按钮的时候有两种情况，区分是新建还是编辑的按钮进来的，如果是编辑的需要重新发起网络请求数据

funciton setModalvisible(isNew: boolean: true, itemData?: any) {
    dialogVisible.value = true
    isNewRef.value = isNew
    if (!isNew && itemData) {
        // 编辑数据
        for (const key in formData) {
            formData[key] = itemData[key]
        }
        editData.value = itemData
    } else {
        // 新建数据
        for (const key in formData) {
            forData[key] = ''
        }
        editData.value = null
    }
}

// 点击了确定逻辑
function handleConfirmClick() {
    dialogVisible.value = false
    if (!isNewRef.value && editData.value) {
        // 编辑用户的数据
        systemStore.editUserDataAction(editData.value.id, formData)
    } else {
        // 创建新的用户
        systemStore.newUserDataAction(formData)
    }
}