'init'
This commit is contained in:
221
src/views/system-manage/organizationManege.vue
Normal file
221
src/views/system-manage/organizationManege.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-04-07 16:56:24
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-28 21:14:32
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<div style="float: right; padding: 3px 0">
|
||||
<el-button type="primary" @click="showAdd">{{ 'btn.add' | i18nFilter }}</el-button>
|
||||
<el-button type="success" :disabled="!formData.name" @click="isAdd=false;isEdit=true">{{ 'btn.edit' | i18nFilter }}</el-button>
|
||||
<el-button type="danger" @click="deleteOrg">{{ 'btn.delete' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="formData" :model="formData" :rules="rules" size="medium" label-width="100px">
|
||||
<el-form-item :label="$t('orgManage.orgName')" prop="name">
|
||||
<el-input v-model="formData.name" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.orgName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('orgManage.parentOrg')" prop="parentId">
|
||||
<el-select v-model="formData.parentId" :disabled="!isEdit && !isAdd" :placeholder="['placeholder.select', $t('orgManage.parentOrg')] | i18nFilterForm" clearable :style="{width: '100%'}">
|
||||
<el-option
|
||||
v-for="(item, index) in parentIdOptions"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('orgManage.address')" prop="address">
|
||||
<el-input v-model="formData.address" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.address')] | i18nFilterForm" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('orgManage.phone')" prop="phone">
|
||||
<el-input v-model="formData.phone" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.phone')] | i18nFilterForm" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('orgManage.contact')" prop="contact">
|
||||
<el-input v-model="formData.contact" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.contact')] | i18nFilterForm" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('orgManage.email')" prop="email">
|
||||
<el-input v-model="formData.email" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.email')] | i18nFilterForm" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('orgManage.remark')" prop="remark">
|
||||
<el-input v-model="formData.remark" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div v-show="isEdit||isAdd" style="text-align:center">
|
||||
<el-button type="primary" @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
|
||||
<el-button type="success" @click="submitForm">{{ 'btn.submit' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrgDetail, addOrg, editOrg, delOrg } from '@/api/org'
|
||||
import { getOrgList } from '@/api/org'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isEdit: false,
|
||||
isAdd: false,
|
||||
formData: {
|
||||
id: '',
|
||||
name: undefined,
|
||||
parentId: undefined,
|
||||
address: undefined,
|
||||
phone: undefined,
|
||||
contact: undefined,
|
||||
email: undefined,
|
||||
remark: undefined
|
||||
},
|
||||
parentId: '',
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('orgManage.orgName')]),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
parentId: [],
|
||||
address: [],
|
||||
phone: [],
|
||||
contact: [],
|
||||
email: [],
|
||||
remark: []
|
||||
},
|
||||
parentIdOptions: [],
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 500
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
async getList() {
|
||||
// edit here
|
||||
const res = await getOrgList(this.listQuery)
|
||||
if (res.code === 0) {
|
||||
this.parentIdOptions = res.data.records
|
||||
}
|
||||
},
|
||||
init(id) {
|
||||
this.isEdit = false
|
||||
this.isAdd = false
|
||||
this.$nextTick(() => {
|
||||
this.$refs['formData'].resetFields()
|
||||
if (id) {
|
||||
getOrgDetail(id).then(res => {
|
||||
this.formData.id = res.data.id
|
||||
this.formData.name = res.data.name
|
||||
this.formData.parentId = res.data.parentId
|
||||
this.formData.address = res.data.address
|
||||
this.formData.phone = res.data.phone
|
||||
this.formData.contact = res.data.contact
|
||||
this.formData.email = res.data.email
|
||||
this.formData.remark = res.data.remark
|
||||
this.parentId = res.data.id
|
||||
})
|
||||
this.formData.id = id
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs['formData'].resetFields()
|
||||
},
|
||||
showAdd() {
|
||||
this.isAdd = true
|
||||
this.isEdit = false
|
||||
this.$refs['formData'].resetFields()
|
||||
this.formData.parentId = this.parentId
|
||||
},
|
||||
submitForm() {
|
||||
if (this.isAdd) {
|
||||
this.addOrg()
|
||||
} else if (this.isEdit) {
|
||||
this.editOrg()
|
||||
}
|
||||
},
|
||||
addOrg() {
|
||||
this.$refs['formData'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = this.formData
|
||||
data.id = ''
|
||||
addOrg(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
this.isEdit = false
|
||||
this.isAdd = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
editOrg() {
|
||||
this.$refs['formData'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = this.formData
|
||||
editOrg(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
this.isEdit = false
|
||||
this.isAdd = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteOrg() {
|
||||
delOrg(this.formData.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
this.$refs['formData'].resetFields()
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
69
src/views/system-manage/sideTree.vue
Normal file
69
src/views/system-manage/sideTree.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-04-06 19:33:11
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2021-04-26 13:56:33
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-tree :data="dataList" :props="defaultProps" @node-click="handleNodeClick" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
menuList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
[]
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
dataList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.dataList.splice(0, this.dataList.length)
|
||||
this.menuList.forEach(item => {
|
||||
if (item.parentId === '-1') {
|
||||
this.dataList.push(item)
|
||||
} else {
|
||||
this.append(item)
|
||||
}
|
||||
})
|
||||
},
|
||||
append(child) {
|
||||
this.menuList.forEach(item => {
|
||||
if (child.parentId === item.id) {
|
||||
if (!item.children) {
|
||||
this.$set(item, 'children', [])
|
||||
}
|
||||
item.children.push(child)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
this.$emit('getOrganization', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-tree >>> .el-tree-node__label {
|
||||
font-size: 20px;
|
||||
}
|
||||
.el-tree >>> .el-tree-node__expand-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user