|
|
|
@@ -1,82 +1,57 @@ |
|
|
|
<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 class="as-layout-horizontal"> |
|
|
|
<div style="width:200px;padding:0 8px 0 8px"> |
|
|
|
<el-input :prefix-icon="Search" clearable placeholder="输入部门名称搜索" style="width: 200px;margin-bottom: 10px;" /> |
|
|
|
<el-tree :data="threeData" @node-click="handleNodeClick" /> |
|
|
|
</div> |
|
|
|
<crud-template class="as-weight" ref="crud" :home-data="field" :tableData="testData" @submit="submit" |
|
|
|
@handleEdit="handleEdit"> |
|
|
|
<template #search="{ searchCondition }"> |
|
|
|
<el-input v-model="searchCondition.fileTwo" clearable placeholder="输入名称或邮箱名称" style="width: 200px;" /> |
|
|
|
<div> |
|
|
|
<el-date-picker class="el-range-editor" v-model="searchCondition.fileOne" type="daterange" range-separator=":" |
|
|
|
start-placeholder="开始日期" end-placeholder="结束日期" style="margin: 0 10px 0 10px;" /> |
|
|
|
</div> |
|
|
|
<el-select v-model="searchCondition.fileThree" placeholder="状态" style="width: 80px;margin-right: 10px;"> |
|
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
|
|
|
|
<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> |
|
|
|
</crud-template> |
|
|
|
</div> |
|
|
|
</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' |
|
|
|
import { Search } from '@element-plus/icons-vue' |
|
|
|
|
|
|
|
const labelWidth = '80px' |
|
|
|
const topStart = ref(false) |
|
|
|
const initData = [ |
|
|
|
{ |
|
|
|
title: '黔通智联', |
|
|
|
sort: 1, |
|
|
|
name: 'test', |
|
|
|
nickname: '测试', |
|
|
|
sex: '男', |
|
|
|
phone: '18888888889', |
|
|
|
email: 'test@el-admin.vip', |
|
|
|
department: '研发部', |
|
|
|
start: '启用', |
|
|
|
top: '是', |
|
|
|
children: [{ |
|
|
|
title: '部门一', |
|
|
|
start: '启用', |
|
|
|
top: '否', |
|
|
|
sort: 2, |
|
|
|
children: [] |
|
|
|
}] |
|
|
|
creationDate: '2020-05-05 11:15:49' |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '世纪恒通', |
|
|
|
sort: 3, |
|
|
|
start: '启用', |
|
|
|
top: '是', |
|
|
|
children: [{ |
|
|
|
title: '部门二', |
|
|
|
start: '启用', |
|
|
|
top: '否', |
|
|
|
sort: 4 |
|
|
|
}] |
|
|
|
name: 'admin', |
|
|
|
nickname: '管理员', |
|
|
|
sex: '男', |
|
|
|
phone: '18888888888', |
|
|
|
email: 'test@el-admin.vip', |
|
|
|
department: '研发部', |
|
|
|
start: '禁用', |
|
|
|
creationDate: '2018-05-05 11:15:49' |
|
|
|
}] |
|
|
|
|
|
|
|
//树数据 |
|
|
|
const threeData = [ |
|
|
|
{ |
|
|
|
value: '黔通智联', |
|
|
|
@@ -101,6 +76,7 @@ const threeData = [ |
|
|
|
}, |
|
|
|
] |
|
|
|
|
|
|
|
//表单数据 |
|
|
|
let item = ref({ |
|
|
|
title: '', |
|
|
|
sort: 0, |
|
|
|
@@ -109,20 +85,22 @@ let item = ref({ |
|
|
|
section: '' |
|
|
|
}) |
|
|
|
|
|
|
|
//切换事件 |
|
|
|
const change = (event: any) => { |
|
|
|
const options = [{ |
|
|
|
value: 'Option1', |
|
|
|
label: '启用', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'Option2', |
|
|
|
label: '禁用', |
|
|
|
}] |
|
|
|
|
|
|
|
//树形事件 |
|
|
|
const handleNodeClick = (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) |
|
|
|
} |
|
|
|
|
|
|
|
@@ -138,19 +116,50 @@ if (get('department').length === 0) { |
|
|
|
const testData: any = get('department') |
|
|
|
|
|
|
|
const field = { |
|
|
|
rowKey: 'title', |
|
|
|
searchShow: false, |
|
|
|
crudShow: true, |
|
|
|
dialogCustom: true, |
|
|
|
searchShow: true, |
|
|
|
tabSize: 'small', |
|
|
|
dialogCustom: false, |
|
|
|
operateWidth: '150', //操作栏宽度 |
|
|
|
field: [{ |
|
|
|
prop: 'title', |
|
|
|
label: '名称', |
|
|
|
prop: 'name', |
|
|
|
label: '用户名称', |
|
|
|
form: { |
|
|
|
type: 'input' |
|
|
|
} |
|
|
|
}, { |
|
|
|
prop: 'nickname', |
|
|
|
label: '昵称', |
|
|
|
form: { |
|
|
|
type: 'input' |
|
|
|
} |
|
|
|
}, { |
|
|
|
prop: 'sex', |
|
|
|
label: '性别', |
|
|
|
}, { |
|
|
|
prop: 'phone', |
|
|
|
label: '电话', |
|
|
|
form: { |
|
|
|
type: 'input', |
|
|
|
itemType: 'phone' |
|
|
|
} |
|
|
|
}, { |
|
|
|
prop: 'sort', |
|
|
|
label: '排序', |
|
|
|
prop: 'email', |
|
|
|
label: '邮箱', |
|
|
|
form: { |
|
|
|
type: 'input' |
|
|
|
} |
|
|
|
}, { |
|
|
|
prop: 'department', |
|
|
|
label: '部门', |
|
|
|
}, { |
|
|
|
prop: 'start', |
|
|
|
label: '状态', |
|
|
|
}, { |
|
|
|
prop: 'creationDate', |
|
|
|
label: '创建日期', |
|
|
|
form: { |
|
|
|
type: 'date' |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
|
|
|
|
|
@@ -167,8 +176,11 @@ const submit = () => { |
|
|
|
|
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
/*数字文本框文本对齐方式 */ |
|
|
|
/deep/ .el-input-number .el-input__inner { |
|
|
|
text-align: left; |
|
|
|
/deep/.el-range-editor.el-input__inner { |
|
|
|
display: inline-flex; |
|
|
|
align-items: center; |
|
|
|
padding: 3px 10px; |
|
|
|
height: 33px; |
|
|
|
width: 300px; |
|
|
|
} |
|
|
|
</style> |
