Ver código fonte

restructure department

tags/v1.0.0^2
zhangtao 2 anos atrás
pai
commit
d88eb2069f
17 arquivos alterados com 351 adições e 456 exclusões
  1. +0
    -23
      src/api/auth/index.js
  2. +0
    -31
      src/api/system/index.js
  3. +7
    -0
      src/api/system/menu/index.js
  4. +14
    -0
      src/api/task/index.js
  5. +0
    -32
      src/api/user/index.js
  6. +2
    -2
      src/store/modules/permission.js
  7. +139
    -0
      src/views/system-manage/department-manage/components/DepartmentModal.vue
  8. +0
    -187
      src/views/system-manage/department-manage/components/DeptModal.vue
  9. +15
    -134
      src/views/system-manage/department-manage/index.vue
  10. +0
    -30
      src/views/system-manage/department-manage/table.js
  11. +32
    -0
      src/views/system-manage/department-manage/tools/form.js
  12. +4
    -2
      src/views/system-manage/department-manage/tools/search.js
  13. +124
    -0
      src/views/system-manage/department-manage/tools/table.js
  14. +4
    -0
      src/views/system-manage/role-manage/components/RoleModal.vue
  15. +5
    -9
      src/views/system-manage/role-manage/index.vue
  16. +1
    -1
      src/views/system-manage/user-manage/index.vue
  17. +4
    -5
      src/views/task-manage/all-task/index.vue

+ 0
- 23
src/api/auth/index.js Ver arquivo

@@ -1,23 +0,0 @@
import { defAxios as request } from '@/utils/http'

export const login = (data) => {
return request({
url: '/auth/login',
method: 'post',
data
})
}

export const refreshToken = () => {
return request({
url: '/auth/refreshToken',
method: 'post'
})
}

export function getMenu() {
return request({
url: '/index/getMenuList',
method: 'GET'
})
}

+ 0
- 31
src/api/system/index.js Ver arquivo

@@ -1,31 +0,0 @@
import { defAxios as request } from '@/utils/http'

export function getMenu() {
return request({
url: '/index/getMenuList',
method: 'GET'
})
}

export function getMenuList() {
return request({
url: '/menu/index',
method: 'GET'
})
}

export function getUserList(params) {
return request({
url: '/user/apiIndex',
method: 'GET',
params
})
}

export function getDeptList(params) {
return request({
url: '/dept/apiIndex',
method: 'GET',
params
})
}

+ 7
- 0
src/api/system/menu/index.js Ver arquivo

@@ -23,6 +23,13 @@ export function getMenu(params) {
})
}

export function getMenuAuth() {
return request({
url: '/index/getMenuList',
method: 'GET'
})
}

/**
* 添加菜单
* params

+ 14
- 0
src/api/task/index.js Ver arquivo

@@ -0,0 +1,14 @@
import { defAxios as request } from '@/utils/http'

/**
* @description: 获取任务列表
* @param {*} data
* @return {*}
*/
export function getTaskList(data = {}) {
return request({
url: '/mission/page',
method: 'get',
data
})
}

+ 0
- 32
src/api/user/index.js Ver arquivo

@@ -1,32 +0,0 @@
import { defAxios as request } from '@/utils/http'

export function getUsers(data = {}) {
return request({
url: '/users',
method: 'get',
data
})
}

export function getUser() {
return request({
url: '/index/getUserInfo',
method: 'get'
})
}

export function saveUser(data = {}, id) {
if (id) {
return request({
url: '/user',
method: 'put',
data
})
}

return request({
url: `/user/${id}`,
method: 'put',
data
})
}

+ 2
- 2
src/store/modules/permission.js Ver arquivo

@@ -1,6 +1,6 @@
import { defineStore } from 'pinia'
import { asyncRoutes, basicRoutes } from '@/router/routes'
import { getMenu } from '@/api/auth/index'
import { getMenuAuth } from '@/api/system/menu/index.js'
import Layout from '@/layout/index.vue'
import modules from '@/utils/module.js'
import router from '@/router/routes/modules/index.js'
@@ -112,7 +112,7 @@ export const usePermissionStore = defineStore('permission', {
},
async generateRoutes() {
try {
const res = await getMenu()
const res = await getMenuAuth()
if (res.code === 0) {
const result = dataArrayToRoutes(res.data)
this.accessRoutes = result

+ 139
- 0
src/views/system-manage/department-manage/components/DepartmentModal.vue Ver arquivo

@@ -0,0 +1,139 @@
<template>
<Modal
:options="getModalOptions"
:on-positive-click="handleConfirm"
:on-negative-click="handleClose"
:on-close="handleClose"
>
<template #Context>
<n-form
ref="formRef"
:model="departmentForm"
:rules="departmentRules"
:label-width="80"
label-placement="left"
require-mark-placement="left"
:disabled="disabled"
>
<template v-for="(item,index) in getFormOptions" :key="index">
<n-form-item :label="item.label" :path="item.key">
<n-input v-if="item.type === 'input'" v-model:value="departmentForm[item.key]" v-bind="item.props" />
<n-select v-if="item.type === 'select'" v-model:value="departmentForm[item.key]" v-bind="item.props" />
<n-input-number v-if="item.type === 'number'" v-model:value="departmentForm[item.key]" v-bind="item.props" />
</n-form-item>
</template>

</n-form>
</template>
</Modal>
</template>

<script>
import { form, getDeptOptions } from '../tools/form.js'
import Modal from '@/components/Modal/index.vue'
import { addDept, editDept } from '@/api/system/dept/index.js'
import { defineComponent, ref, reactive, computed, toRefs } from 'vue'

export default defineComponent({
name: 'UserModal',
components: { Modal },
props: {
visible: {
type: Boolean,
default: false
},
type: {
type: String,
default: 'create'
},
data: {
type: Object,
default: () => {}
}
},
emits: {
'update:visible': null,
'reload': null
},
setup(props, { emit }) {
const MODAL_TYPE = {
'create': '新建部门',
'preview': '部门详情',
'update': '编辑部门'
}
getDeptOptions()
const { departmentForm, departmentRules } = form
const formRef = ref()
const data = reactive({
departmentForm: {
...departmentForm,
...props.data,
pid: props.data?.pid === 0 ? null : props.data?.pid
},
departmentRules: {
...departmentRules
},
disabled: props.type === 'preview'
})
const getModalOptions = computed(() => {
return {
title: MODAL_TYPE[props.type],
show: props.visible,
negativeText: '取消',
positiveText: '确认'
}
})

const getFormOptions = computed(() => {
return {
...form.formItem
}
})

function handleConfirm() {
formRef.value.validate((errors) => {
if (!errors) {
const params = { ...data.roleForm }
if (params.id) {
editDept(params).then(res => {
if (res.code === 0) {
this.handleClose()
this.$emit('reload')
}
}).catch(e => {
console.log(e)
})
} else {
addDept(params).then(res => {
if (res.code === 0) {
this.handleClose()
this.$emit('reload')
}
})
}
}
})
}

/* 关闭弹窗 */
const handleClose = () => {
emit('update:visible', false)
}

return {
...toRefs(data),
formRef,
getModalOptions,
getFormOptions,
handleConfirm,
handleClose
}
}
})
</script>

<style scoped lang='scss'>
.n-input-number{
width: 100%;
}
</style>

+ 0
- 187
src/views/system-manage/department-manage/components/DeptModal.vue Ver arquivo

@@ -1,187 +0,0 @@
<template>
<Modal
:options="getModalOptions"
:on-positive-click="handleConfirm"
:on-negative-click="handleClose"
:on-close="handleClose"
>
<template #Context>
<n-form
ref="formRef"
:model="form"
label-placement="left"
:rules="rules"
:on-positive-click="handleConfirm"
:on-negative-click="handleClose"
>
<n-form-item label="部门编号:" path="code">
<n-input
v-model:value="form.code"
clearable
:maxlength="20"
placeholder="请输入部门编号"
/>
</n-form-item>
<n-form-item label="部门名称:" path="name">
<n-input
v-model:value="form.name"
clearable
:maxlength="20"
placeholder="请输入部门名称"
/>
</n-form-item>
<n-form-item label="所属部门:" path="pid">
<n-select
v-model:value="form.pid"
:options="getDeptList"
placeholder="请选择所属部门"
/>
</n-form-item>
<n-form-item label="排序号" path="sort">
<n-input-number v-model:value="form.sort" placeholder="请输入排序号" />
</n-form-item>
<n-form-item
label="备注:"
>
<n-input
v-model:value="form.note"
type="textarea"
:rows="3"
:maxlength="200"
placeholder="请输入备注"
/>
</n-form-item>
</n-form>
</template>
</Modal>
</template>

<script>
import { defineComponent, computed, reactive, toRefs } from 'vue'
import Modal from '@/components/Modal/index.vue'
import { addDept, editDept } from '@/api/system/dept/index'
export default defineComponent({
name: 'UserModal',
components: { Modal },
props: {
visible: {
type: Boolean,
default: false
},
row: {
type: Object,
default: () => {}
},
deptList: {
type: Array,
default: () => []
}
},
emits: {
'update:visible': null,
'done': null
},
setup(props, { emit }) {
const data = reactive({
form: {
avatar: '/images/user/20211011/20211011151447698.jpg',
code: '',
deptId: null,
username: '',
realname: '',
password: '',
roleIds: [],
status: 1,
note: ''

},
deptOptions: [],
rolesOptions: [],
rules: {
code: [
{ required: true, message: '请输入部门编号', trigger: 'blur' }
],
name: [
{ required: true, message: '请输入部门名称', type: 'string', trigger: 'blur' }
],
sort: [
{ required: true, type: 'number', message: '请输入排序号', trigger: 'blur' }
]
}
})
// 获取部门选项
const getDeptList = computed(() => {
const list = props.deptList.map((item) => {
const menu = {
label: item.name,
value: item.id
}
return menu
})
return list
})

const getModalOptions = computed(() => {
const row = props.row
if (props.row.pid === 0) {
row.pid = null
}
console.log('====部门计算属性触发了====', row)
return {
title: props.row.name ? '修改部门' : '添加部门',
show: props.visible,
form: Object.assign(data.form, row),
negativeText: '取消',
positiveText: '确认'
}
})

/* 关闭弹窗 */
const handleClose = () => {
emit('update:visible', false)
}

return {
...toRefs(data),
getDeptList,
getModalOptions,
handleClose
}
},
methods: {
// 表单提交
handleConfirm() {
const type = this.row.name ? 'edit' : 'add'
this.$refs.formRef.validate((errors) => {
if (!errors) {
if (type === 'add') {
addDept(this.form).then(res => {
if (res.code === 0) {
this.handleClose()
this.$emit('done')
$message.success(res.msg)
} else {
$message.error(res.msg)
}
}).catch(e => {
console.log(e)
})
} else if (type === 'edit') {
editDept(this.form).then(res => {
if (res.code === 0) {
this.handleClose()
this.$emit('done')
$message.success(res.msg)
} else {
$message.error(res.msg)
}
})
}
}
})
}
}
})
</script>
<style scoped lang='scss'>
</style>

+ 15
- 134
src/views/system-manage/department-manage/index.vue Ver arquivo

@@ -1,7 +1,7 @@
<template>
<div>
<n-card>
<headSearch :info="info" @search="handleSearch" />
<headSearch :info="search" @search="handleSearch" @reset="handleSearch" />
<data-table
ref="tableRef"
:columns="columns"
@@ -18,114 +18,30 @@
</n-card>
</div>
<!-- 新增、编辑弹窗 -->
<dept-modal
v-if="modalShow"
v-model:visible="modalShow"
:row="rowData"
:dept-list="deptList"
@done="handleSearch"
/>
<DepartmentModal v-if="modalShow" v-model:visible="modalShow" :data="rowData" :type="modalType" @reload="handleSearch" />
</template>

<script>
import search from './tools/search.js'
import table from './tools/table.js'
import headSearch from '@/components/Search/index.vue'
import dataTable from '@/components/DataTable/index.vue'
import TableAction from '@/components/DataTable/tools/Action.vue'
import {
getDeptList,
getDeptAll,
deleteDept
} from '@/api/system/dept/index.js'
import { h, unref, toRefs, ref, reactive, onMounted } from 'vue'
import DeptModal from './components/DeptModal.vue'
import info from './info.js'
import table from './table.js'
import DepartmentModal from './components/DepartmentModal.vue'
import { getDeptList } from '@/api/system/dept/index.js'
import { unref, toRefs, reactive } from 'vue'

export default {
name: 'MenuPage',
components: { dataTable, DeptModal, headSearch },
components: { dataTable, DepartmentModal, headSearch },
setup() {
const data = reactive({
columns: [
...table.columns,
{
title: '操作',
align: 'center',
width: 150,
fixed: 'right',
render(row) {
return h(TableAction, {
actions: [
{
label: '添加',
type: 'button',
props: {
type: 'primary',
onClick: add.bind(null, row)
},
auth: 'basic_list'
},
{
label: '修改',
type: 'button',
props: {
type: 'primary',
onClick: play.bind(null, row)
},
auth: 'basic_list'
},
{
label: '删除',
type: 'popconfirm',
auth: 'basic_list',
tip: '确定删除这条数据吗?',
props: {
negativeText: '取消',
positiveText: '确认',
onPositiveClick: deleteSingle.bind(null, row.id)
}
}
],
align: 'center'
})
}
}
],
info: ref(info),
modalShow: false,
rowData: {
status: 1,
type: 0,
hide: 0
},
deptList: []
...toRefs(table),
search
})

// 获取全部菜单信息
async function getDept() {
const list = await getDeptAll()
data.deptList = list.data
}
onMounted(() => {
getDept()
})
/**
* @description: 获取部门数据并做树形结构处理
* @return {*}
*/
const params = ref({})

const tableRef = ref()

function handleSearch(data) {
params.value = {
...data
}
tableRef.value.reFetch({ ...unref(params) })
}

const loadDataTable = async(res) => {
const _params = {
...unref(params),
...unref(data.searchParams),
...res
}
return await getDeptList(_params)
@@ -133,50 +49,15 @@ export default {

// 新增
function handleModal() {
data.rowData = null
data.modalType = 'create'
data.modalShow = true
data.rowData = {}
}
// 行内新增
function add(row) {
data.modalShow = true
data.rowData = {}
data.rowData.pid = row.id
}

// 编辑
function play(row) {
data.rowData = row
data.modalShow = true
}

// 单个删除数据
function deleteSingle(id) {
deleteData(id)
}

// 删除方法
function deleteData(id) {
deleteDept(id)
.then((res) => {
if (res.code === 0) {
handleSearch({})
$message.success(res.msg)
} else {
$message.error(res.msg)
}
})
.catch((e) => {
console.log(e)
})
}

return {
...toRefs(data),
tableRef,
loadDataTable,
handleSearch,
handleModal,
deleteSingle
handleModal
}
}
}

+ 0
- 30
src/views/system-manage/department-manage/table.js Ver arquivo

@@ -1,30 +0,0 @@
const table = {
columns: [{
title: '部门编号',
key: 'code',
align: 'center'
},
{
title: '部门名称',
key: 'name',
align: 'center'
},
{
title: '排序',
key: 'sort',
align: 'center'
},
{
title: '创建时间',
key: 'createTime',
align: 'center',
minWidth: 120
},
{
title: '更新时间',
key: 'updateTime',
align: 'center',
minWidth: 120
}]
}
export default table

+ 32
- 0
src/views/system-manage/department-manage/tools/form.js Ver arquivo

@@ -0,0 +1,32 @@
import { ref, reactive } from 'vue'
import { USER_STATUS } from '@/utils/dictionary.js'
import { getDeptAll } from '@/api/system/dept/index'
import { dataToSelect } from '@/utils/handleData.js'
const departmentOptions = ref()

export const form = reactive({
departmentForm: {
code: '',
name: '',
sort: null,
pid: null,
note: ''
},
departmentRules: {
code: [{ required: true, message: '请输入部门编号', trigger: 'blur' }],
name: [{ required: true, message: '请输入部门名称', type: 'string', trigger: 'blur' }],
sort: [{ required: true, type: 'number', message: '请输入排序号', trigger: 'blur' }]
},
formItem: [
{ type: 'input', key: 'code', label: '部门编号', props: { maxlength: '20', placeholder: '请输入部门编号', clearable: true }},
{ type: 'input', key: 'name', label: '部门名称', props: { maxlength: '20', placeholder: '请输入部门名称', clearable: true }},
{ type: 'select', key: 'pid', label: '所属部门', props: { options: departmentOptions, placeholder: '请选择所属部门' }},
{ type: 'number', key: 'sort', label: '排序号', props: { min: 0, placeholder: '请输入排序号', clearable: true }},
{ type: 'input', key: 'note', label: '备注', props: { type: 'textarea', autosize: { maxlength: '200', minRows: 3, maxRows: 3 }}}
]
})

export const getDeptOptions = async function() {
const res = await getDeptAll()
departmentOptions.value = dataToSelect(res.data, { label: 'name', value: 'id' })
}

src/views/system-manage/department-manage/info.js → src/views/system-manage/department-manage/tools/search.js Ver arquivo

@@ -1,4 +1,6 @@
const data = [
import { reactive } from 'vue'

const data = reactive([
{
label: '部门名称',
key: 'name',
@@ -6,7 +8,7 @@ const data = [
placeholder: '请输入部门名称'
}
}
]
])

export default data


+ 124
- 0
src/views/system-manage/department-manage/tools/table.js Ver arquivo

@@ -0,0 +1,124 @@
import { h, ref, reactive } from 'vue'
import TableAction from '@/components/DataTable/tools/Action.vue'
import { deleteDept } from '@/api/system/dept/index.js'

/* 注册table */
const tableRef = ref()
const searchParams = ref()

function handleSearch(params) {
searchParams.value = { ...params }
tableRef.value.reFetch({ searchParams })
}

/**
* @description: 获取数据及操作
* @param {*} row 单行数据
* @param {*} type 操作类型 create:创建,preview:预览,edit:编辑
* @return {*}
*/
function getRowData(row, type) {
data.rowData = type === 'create' ? { pid: row.id } : row
data.modalType = type
data.modalShow = true
}

// 删除方法
function deleteData(id) {
deleteDept(id)
.then((res) => {
if (res.code === 0) {
handleSearch()
}
})
.catch((e) => {
console.log(e)
})
}

const data = reactive({
tableRef,
searchParams,
rowData: {},
modalType: 'create',
modalShow: false,
handleSearch,

columns: [
{
title: '部门编号',
key: 'code',
align: 'center'
},
{
title: '部门名称',
key: 'name',
align: 'center'
},
{
title: '排序',
key: 'sort',
align: 'center'
},
{
title: '创建时间',
key: 'createTime',
align: 'center',
minWidth: 120
},
{
title: '更新时间',
key: 'updateTime',
align: 'center',
minWidth: 120
},
{
title: '操作',
align: 'center',
width: 150,
fixed: 'right',
render(row) {
return h(TableAction, {
actions: [
{
label: '添加',
type: 'button',
props: {
type: 'primary',
text: true,
onClick: getRowData.bind(null, row, 'create')
},
auth: 'basic_list'
},
{
label: '修改',
type: 'button',
props: {
type: 'primary',
text: true,
onClick: getRowData.bind(null, row, 'update')
},
auth: 'basic_list'
},
{
label: '删除',
type: 'popconfirm',
auth: 'basic_list',
tip: '确定删除这条数据吗?',
props: {
onPositiveClick: deleteData.bind(null, [row.id])
},
ButtonProps: {
text: true,
type: 'primary'
}
}
],
align: 'center'
})
}
}
]
})

export default data

+ 4
- 0
src/views/system-manage/role-manage/components/RoleModal.vue Ver arquivo

@@ -43,6 +43,10 @@ export default defineComponent({
type: Boolean,
default: false
},
type: {
type: String,
default: 'create'
},
data: {
type: Object,
default: () => {}

+ 5
- 9
src/views/system-manage/role-manage/index.vue Ver arquivo

@@ -1,7 +1,7 @@
<template>
<div>
<n-card>
<headSearch :info="search" @search="handleSearch" />
<headSearch :info="search" @search="handleSearch" @reset="handleSearch" />
<data-table
ref="tableRef"
:columns="columns"
@@ -28,7 +28,7 @@
</n-card>
</div>
<!-- 新增、编辑弹窗 -->
<RoleModal v-if="modalShow" v-model:visible="modalShow" :data="rowData" @reload="handleSearch" />
<RoleModal v-if="modalShow" v-model:visible="modalShow" :data="rowData" :type="modalType" @reload="handleSearch" />
<!-- 分配权限 -->
<ConfigModal v-if="configModalShow" v-model:visible="configModalShow" :data="rowData" @reload="handleSearch" />
</template>
@@ -38,10 +38,10 @@ import search from './tools/search.js'
import table from './tools/table.js'
import headSearch from '@/components/Search/index.vue'
import dataTable from '@/components/DataTable/index.vue'
import { getRoleList } from '@/api/system/role/index'
import { ref, unref, toRefs, reactive } from 'vue'
import RoleModal from './components/RoleModal.vue'
import ConfigModal from './components/ConfigModal.vue'
import { getRoleList } from '@/api/system/role/index'
import { ref, unref, toRefs, reactive } from 'vue'

export default {
name: 'MenuPage',
@@ -52,12 +52,9 @@ export default {
search
})

const params = ref({})
const tableRef = ref()

const loadDataTable = async(res) => {
const _params = {
...unref(params),
...unref(data.searchParams),
...res
}
return await getRoleList(_params)
@@ -87,7 +84,6 @@ export default {

return {
...toRefs(data),
tableRef,
loadDataTable,
handleModal,
handleCheck,

+ 1
- 1
src/views/system-manage/user-manage/index.vue Ver arquivo

@@ -36,9 +36,9 @@ import { search, fetchRolesOption } from './tools/search.js'
import table from './tools/table.js'
import headSearch from '@/components/Search/index.vue'
import dataTable from '@/components/DataTable/index.vue'
import UserModal from './components/UserModal.vue'
import { getUserList } from '@/api/system/user/index.js'
import { unref, ref, toRefs, reactive } from 'vue'
import UserModal from './components/UserModal.vue'

export default {
name: 'MenuPage',

+ 4
- 5
src/views/task-manage/all-task/index.vue Ver arquivo

@@ -5,11 +5,10 @@
<DataTable
ref="tableRef"
:columns="columns"
:data="data"
:request="loadDataTable"
:row-key="(row) => row.id"
size="large"
>
<!-- :request="loadDataTable" -->
<template #tableTitle>
<n-button type="primary" @click="handleModal"> 新建 </n-button>
<!-- <n-popconfirm
@@ -48,6 +47,7 @@ import LiveDrawer from './components/LiveDrawer.vue'
import DemandDrawer from './components/DemandDrawer.vue'
import VerifyDrawer from './components/VerifyDrawer.vue'
import { h, unref, ref, toRefs, reactive } from 'vue'
import { getTaskList } from '@/api/task/index.js'

export default {
name: 'TaskAll',
@@ -55,8 +55,7 @@ export default {
setup() {
const data = reactive({
search,
...toRefs(table),
data: [{}]
...toRefs(table)
})

/**
@@ -68,7 +67,7 @@ export default {
const _params = {
...res
}
// return await getUserList(_params)
return await getTaskList(_params)
}

function handleModal() {

Carregando…
Cancelar
Salvar