Explorar el Código

2022年5月18日11:49:42

master
wq hace 3 años
padre
commit
b3596f9e8e
Se han modificado 3 ficheros con 191 adiciones y 2 borrados
  1. 6
    1
      src/data/menuData.ts
  2. 9
    1
      src/router/index.ts
  3. 176
    0
      src/views/system/department/department.vue

+ 6
- 1
src/data/menuData.ts Ver fichero

@@ -134,6 +134,11 @@ export const list = [
path: 'menu',
icon: 'User',
children: []
},{
title: '部门管理',
path: 'department',
icon: 'HomeFilled',
children: []
}]
}
}
];

+ 9
- 1
src/router/index.ts Ver fichero

@@ -21,10 +21,18 @@ const routes: RouteRecordRaw[] = [
key: () => import('@/views/system/home/Home.vue'),
},
},
{
path: '/views/system/department',
name: 'department',
meta: { title: '部门管理', isAuth: true }, //用户自定内容
components: {
key: () => import('@/views/system/department/department.vue'),
},
},
{
path: '/views/system/menu',
name: 'menu',
meta: { title: '菜单模块', isAuth: true }, //用户自定内容
meta: { title: '菜单管理', isAuth: true }, //用户自定内容
components: {
key: () => import('@/views/system/menu/index.vue'),
},

+ 176
- 0
src/views/system/department/department.vue Ver fichero

@@ -0,0 +1,176 @@
<template>
<crud-template ref="crud" :home-data="field" :tableData="testData" @submit="submit" @handleEdit="handleEdit">
<template #dialog>
<el-form :inline="false" ref="ruleFormRef" :rules="rules" :model="item">

<el-form-item class="as-bold" :label-width="labelWidth" label="名称" prop="title">
<div style="width: 100%">
<el-input v-model="item.title" placeholder="请输入部门名称"></el-input>
</div>
</el-form-item>

<el-form-item class="as-bold" :label-width="labelWidth" label="排序">
<!-- 简单解决sort类型问题 -->
<div v-show="false">
{{ item.sort = Number(item.sort) }}
</div>
<el-input-number class="el-input-number" v-model="item.sort" style="width: 100%;"
controls-position="right">
</el-input-number>
</el-form-item>

<div class="as-layout-horizontal">
<el-form-item class="as-weight as-bold" :label-width="labelWidth" label="顶级部门">
<el-radio-group v-model="item.top" @change="change">
<el-radio label="是" />
<el-radio label="否" />
</el-radio-group>
</el-form-item>

<el-form-item class="as-weight as-bold" :label-width="labelWidth" label="状态">
<el-radio-group v-model="item.start">
<el-radio label="启用" />
<el-radio label="禁用" />
</el-radio-group>
</el-form-item>
</div>

<el-form-item v-show="topStart" class="as-bold" :label-width="labelWidth" label="上级部门">
<el-tree-select v-model="item.section" :data="threeData" />
</el-form-item>

</el-form>
</template>
</crud-template>
</template>
<!-- 部门管理模块 -->
<script lang="ts" setup>
// @ts-ignore crudFrom模板
import CrudTemplate from "@/crud/index.vue"
import { add, get, empty } from "@/utils/offLineData"
import { reactive, ref, toRaw } from 'vue'

const labelWidth = '80px'
const topStart = ref(false)
const initData = [
{
title: '黔通智联',
sort: 1,
start: '启用',
top: '是',
children: [{
title: '部门一',
start: '启用',
top: '否',
sort: 2,
children: []
}]
},
{
title: '世纪恒通',
sort: 3,
start: '启用',
top: '是',
children: [{
title: '部门二',
start: '启用',
top: '否',
sort: 4
}]
}]

const threeData = [
{
value: '黔通智联',
label: '黔通智联',
children: [
{
value: '部门一',
label: '部门一',
children: [],
},
],
}, {
value: '世纪恒通',
label: '世纪恒通',
children: [
{
value: '部门二',
label: '部门二',
children: [],
},
],
},
]

let item = ref({
title: '',
sort: 0,
top: '是',
start: '启用',
section: ''
})

//切换事件
const change = (event: any) => {
console.log(event);
if (event === '是') {
topStart.value = false;
} else {
topStart.value = true;
}
}

//编辑事件
const handleEdit = (idx: any, row: any) => {
console.log(row);

item.value = toRaw(row)
}

//表单校验
const ruleFormRef: any = ref()
const crud: any = ref()
const rules = reactive({ title: [{ required: true, message: '请输入部门名称', trigger: 'blur' }] })

empty('department')
if (get('department').length === 0) {
add('department', initData)
}
const testData: any = get('department')

const field = {
rowKey: 'title',
searchShow: false,
crudShow: true,
dialogCustom: true,
field: [{
prop: 'title',
label: '名称',
}, {
prop: 'sort',
label: '排序',
}, {
prop: 'start',
label: '状态',
}]
}

const submit = () => {
ruleFormRef.value.validate((valid: any, fields: any) => {
if (valid) {
console.log(item, ruleFormRef);
crud.value.reset()
} else {
return false
}
})
}

</script>
<style scoped>
/*数字文本框文本对齐方式 */
/deep/ .el-input-number .el-input__inner {
text-align: left;
}
</style>

Cargando…
Cancelar
Guardar