|
|
@@ -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> |