tab栏切换和新增编辑共用一个弹框

新增调用api----this.roleform

编辑=====id----this.roleform=res.data就可以数据回显了

如何公用一个弹框

1. 点击确定，需要判断是新增还是编辑，需要新增一个状态 isEdit，保存结果

   • 点击新增时，一定要把 isEdit 设置为 false

   • 点击新增时，一定要把 isEdit 设置为 true

   • 点击确定，根据 isEdit 值调用不同的接口地址即

1. 表单中需要的两个数据在表格数据中已经有了，不需要再次发请求去取了

data() {
  return {
    isEdit: false // 是否是编辑
  }
}

 // 添加角色按钮
  addRoleBtn() {
    // 是否编辑状态
    this.isEdit = false
    // 让弹框展示
    this.showDialog = true
  },

 async editRoles(id) {
    // 是否编辑状态
    this.isEdit = true

}

export function updateRole(data) {
  return request({
    url: `/sys/role/${data.id}`,
    method: 'put',
    data
  })
}

methods: {
  // 添加编辑权限按钮
  roleSubmit() {
    this.$refs.roleForm.validate(async valid => {
      if (valid) {
        if (!this.isEdit) {
          // 调用新增角色的 API
          const res = await addRole(this.roleForm) 
        } else {
          // 调用编辑角色的 API
          const res = await updateRole(this.roleForm)
          // 根据状态码判断请求成功与否
        
        }

        // 重新获取权限列表数据
        this.getRolesList()
        // 隐藏弹框
        this.showDialog = false
      }
    })
  }
}

<el-pagination :current-page="query.page" :page-sizes="[10, 15, 20, 25]" :page-size="query.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

1. 封装获取公司信息数据的 API

2. 从 Vuex 中取到公司的 ID，传递给 API 方法

3. 调用 API 方法，并将数据赋值给 data 中的数据

4. 将数据在页面上渲染

5. 角色管理-读取并渲染公司信息数据

   1. 封装获取公司信息数据的 API

      /**
       * @description 获取公司信息
       * @param {*} companyId
       * @returns
       */
      export function getCompanyInfo(companyId) {
        return request({
          url: `/company/${companyId}`
        })
      }

   2. 将 companyId 处理成 Getters 属性

      const getters = {
        companyId: state => state.user.userInfo.companyId // 公司 ID
      }

   3. 在 src\views\setting\index.vue 组件中利用辅助函数导入 companyId

      import { mapGetters  } from 'vuex'

      computed: {
        ...mapGetters(['companyId'])
      },
      created() {
        // 调用获取角色列表的方法
        this.getRolesList()
        // 调用获取公司信息的方法
        this.getCompanyInfo()
      },
      methods: {
        // 获取的公司的信息
        async getCompanyInfo() {
          const res = await getCompanyInfo(this.companyId)
          if (!res.success) return this.$message.error(res.message)
          this.formData = res.data
        }
      }
      

   4. 渲染页面

       <el-form label-width="120px" style="margin-top:50px">
        <el-form-item label="公司名称">
          <el-input v-model="formData.name" disabled style="width:400px" />
        </el-form-item>  
      </el-form>