Vue e コマース プロジェクトの戦闘ロール リストの追加、編集、削除機能

これは、dark horse vue e-commerce プロジェクトの背景であり、私が完了する必要がある機能です。ここでは参照のみを目的としています。もちろん、自分で理解する必要があります。

1.機能追加

roles.vue で

1. ロールの追加ダイアログ ボックス

 コードは以下のように表示されます: 

  <!-- 添加角色的对话框 -->
    <el-dialog :visible.sync="addRoleDialogVisible" title="添加角色" width="35%" @close="addDialogClosed">
      <!-- 内容主体区域 -->
      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="70px">
        <!-- prop=username 对应了 addFormRules中的username校验规则-->
        <el-form-item label="角色名称" label-width="85px" prop="roleName">
          <el-input v-model="addForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" label-width="85px" prop="roleDesc">
          <el-input v-model="addForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </span>
    </el-dialog>

2. 役割を追加するためのダイアログ ボックスの表示と非表示を制御する

      // 控制添加角色对话框的显示与隐藏
      addRoleDialogVisible: false,

3. 双方向バインディング: モジュールはロールの値を追加します

      // 添加角色
      addForm: {
        roleName: '',
        roleDesc: ''
      },

4.ロールの検証ルールを追加する

 addFormRules: {
        roleName: [
          {
            required: true,
            message: '请输入角色名称',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 6,
            message: '角色名称长度在 2 到 6 个字符',
            trigger: 'blur'
          }
        ],
        roleDesc: [
          {
            required: true,
            message: '请输入角色描述',
            trigger: 'blur'
          }
        ]
      },

5. メソッド配下にロールを追加する方法

 コードは以下のように表示されます

   /**
     * 添加角色
     */
    async addRole () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) {
          return
        }
        // 可以发起添加角色的网络请求
        const { data: res } = await this.$http.post('roles', this.addForm)
        console.log(res)
        if (res.meta.status !== 201) {
          return this.$message.error('添加角色失败!')
        } else {
          this.addRoleDialogVisible = false
          this.getRolesList()
          this.$message.success('添加角色成功!')
        }
      })
    },

6.ロールダイアログクローズイベントを追加

    /**
     * 监听 添加角色对话框的关闭事件
     */
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    },

これで、ロールの追加機能は完了です。

2.ロール機能の編集

 1.上記の手順によると、ほぼ

最初のページには、ロールを編集するためのダイアログ ボックスが表示されます

 コードは以下のように表示されます: 

    <!-- 编辑角色的对话框 -->
    <el-dialog :visible.sync="editRoleDialogVisible" title="编辑角色" width="35%" @close="editDialogClosed">
      <!-- 内容主体区域 -->
      <el-form ref="editFormRef" :model="editForm" :rules="addFormRules" label-width="70px">
        <!-- prop=username 对应了 addFormRules中的username校验规则-->
        <el-form-item label="角色名称" label-width="85px" prop="roleName">
          <el-input v-model="editForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" label-width="85px" prop="roleDesc">
          <el-input v-model="editForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editRole">确 定</el-button>
      </span>
    </el-dialog>

2. 役割を編集するためのダイアログ ボックスの表示と非表示を制御する

      //控制编辑角色的对话框的显示与隐藏
      editRoleDialogVisible: false

3. 値編集者ロールの値を取得する

// 获取值编辑角色的值     
 editForm: {},

4. ロールの検証ルールを編集します。ここで説明します。ロールを追加する検証ルールは同じなので使用するため、別のルールは作成しませんでした。

前に書いたロール追加のコードと同じなので、ここに同じ名前を書いてください

5. ロールのメソッドを編集する

役割の編集を示すダイアログ

    /**
     * 展示编辑角色的对话框
     * @param roleId
     */
    async showEditDialog (roleId) {
      const { data: res } = await this.$http.get(`roles/${roleId}`)
      if (res.meta.status !== 200) {
        return this.$message.error('查询角色信息失败')
      } else {
        this.editForm = res.data
        this.editRoleDialogVisible = true
      }
    },

6. 役割の編集方法

 コードは以下のように表示されます

 /**
     * 编辑角色
     */
    async editRole () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) {
          return
        }
        const { data: res } = await this.$http.put(`roles/${this.editForm.roleId}`,
          {
            roleName: this.editForm.roleName,
            roleDesc: this.editForm.roleDesc
          }
        )
        if (res.meta.status !== 200) {
          this.$message.error('更新角色信息失败!')
        } else {
          this.editRoleDialogVisible = false
          this.getRolesList()
          this.$message.success('更新角色成功!')
        }
      })
    },

7. ロールの変更ダイアログ ボックスのクローズ イベントをリッスンします。

    /**
     * 监听 修改角色对话框的关闭事件
     */
    editDialogClosed () {
      this.$refs.editFormRef.resetFields()
    }

3.削除機能

ID によるロールの削除

 

    /**
     * 根据角色id删除角色
     * @param roleId
     */
    async removeRoleById (roleId) {
      // 弹框询问用户是否直接删除数据
      const confirmResult = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

      if (confirmResult === 'confirm') {
        console.log('确认了删除')
        const { data: res } = await this.$http.delete(`roles/${roleId}`)
        if (res.meta.status !== 200) {
          return this.$message.error('删除角色失败!')
        } else {
          this.getRolesList()
          return this.$message.success('删除角色成功!')
        }
      }
    },