technique_admin/src/views/system/role/index.vue

<template>
  <div class="main animate__animated animate__backInRight" v-loading="loading">
    <el-row style="padding: 5px">
      <el-col :span="24" style="text-align: right">
        <el-button type="primary" @click="toAdd" v-method="'add'">{{ $t('common.create') }}</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <role-table></role-table>
      </el-col>
    </el-row>
    <el-row justify="end" style="margin-top: 10px; height: 5vh">
      <el-pagination background layout="total, prev, pager, next" :page-size="limit" :total="total" v-model:current-page="currentPage" @current-change="changePage" />
    </el-row>
    <el-dialog v-model="dialog" :title="$t('pages.role.dialogTitle')" :destroy-on-close="true" @close="toClose">
      <role-form></role-form>
    </el-dialog>
  </div>
</template>

<script setup>
import roleTable from './parts/table.vue'
import roleForm from './parts/form.vue'
import { RoleStore } from '@/store/api/system/role'
import { MenusStore } from '@/store/api/system/menus'
import { cloneDeep, get } from 'lodash-es'
const store = RoleStore()
const menuStore = MenusStore()

const $checkRes = inject('$checkRes')
const limit = inject('limit')
const currentPage = ref(1)
onMounted(() => {
  searchMenus()
  search({ skip: 0, limit })
})
const menuList = ref([])
const searchMenus = async () => {
  const res = await menuStore.query()
  if ($checkRes(res)) {
    menuList.value = res.data
  }
}

const data = ref([])
const total = ref(0)
const search = async (e = { skip: 0, limit }) => {
  const { skip, limit } = e
  let info = { limit: limit, skip: skip }
  let res = await store.query(info)
  if ($checkRes(res)) {
    data.value = res.data
    total.value = res.total
  }
}

const form = ref({})
const dialog = ref(false)

const toEdit = async (data) => {
  let res = await store.fetch(data.id)
  if ($checkRes(res)) {
    form.value = res.data
    dialog.value = true
  }
}
const toDelete = async (data) => {
  ElMessageBox.confirm('您确定删除该数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res = await store.del(data.id)
    if ($checkRes(res, true)) {
      search({ skip: 0, limit })
    }
  })
}
const onSubmit = async () => {
  const data = cloneDeep(form.value)
  let res
  if (get(data, 'id')) res = await store.update(data)
  else res = await store.create(data)
  if ($checkRes(res, true)) {
    search({ skip: 0, limit })
    toClose()
  }
}
const changeUse = async (data) => {
  let is_use = '1'
  if (data.is_use === '1') is_use = '0'
  const res = await store.update({ id: data.id, is_use })
  if ($checkRes(res, true)) {
    search({ skip: 0, limit })
  }
}
const toAdd = () => {
  dialog.value = true
  form.value = { is_use: '0', menu: ['home'] }
}
const toClose = () => {
  dialog.value = false
  form.value = { menu: {} }
}
// 加载中
const loading = ref(false)
// 请求
onMounted(async () => {
  loading.value = true
  loading.value = false
})

const changePage = (page = currentPage.value) => {
  const obj = { skip: (page - 1) * limit, limit: limit }
  search(obj)
}

// provide
provide('data', data)
provide('total', total)
provide('menuList', menuList)
provide('form', form)
provide('dialog', dialog)
provide('toAdd', toAdd)
provide('toEdit', toEdit)
provide('onSubmit', onSubmit)
provide('changeUse', changeUse)
provide('toDelete', toDelete)
</script>
<style scoped lang="scss"></style>