<template>
|
<a-row :gutter="10">
|
<a-col :md="12" :sm="24">
|
<a-card :bordered="false">
|
<!-- 按钮操作区域 -->
|
<a-row style="margin-left: 14px">
|
<a-button @click="handleAdd(1)" type="primary">添加机构</a-button>
|
<a-button @click="handleAdd(2)" type="primary" v-if="currSelected.factoryCategory!=3">添加下级</a-button>
|
<a-button @click="handleDelete" v-if="selectedKeys.length>0">删除</a-button>
|
<a-button title="删除多条数据" @click="batchDel" v-if="checkedKeys.length>0">批量删除</a-button>
|
</a-row>
|
|
<div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
|
<a-alert type="info" :showIcon="true">
|
<div slot="message">
|
当前选择：<span v-if="this.currSelected.title">{{ getCurrSelectedTitle }}</span>
|
<a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
|
</div>
|
</a-alert>
|
|
<a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入车间名称"/>
|
<!-- 树-->
|
<a-col :md="10" :sm="24">
|
<a-tree
|
checkable
|
multiple
|
@select="onSelect"
|
@check="onCheck"
|
:selectedKeys="selectedKeys"
|
:checkedKeys="checkedKeys"
|
:treeData="departTree"
|
:checkStrictly="checkStrictly"
|
:expandedKeys="expandedKeys"
|
:autoExpandParent="autoExpandParent"
|
@expand="onExpand"/>
|
</a-col>
|
</div>
|
</a-card>
|
<div class="drawer-bottom-button">
|
<a-dropdown :trigger="['click']" placement="topCenter">
|
<a-menu slot="overlay">
|
<a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
|
<a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
|
<a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
|
<a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
|
<a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
|
<a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
|
</a-menu>
|
<a-button>
|
树操作
|
<a-icon type="up"/>
|
</a-button>
|
</a-dropdown>
|
</div>
|
</a-col>
|
|
<a-col :md="12" :sm="24">
|
<a-tabs>
|
<a-tab-pane tab="基本信息" key="1">
|
<a-card :bordered="false">
|
<template v-if="selectedKeys.length>0">
|
<a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelCol"
|
:wrapperCol="wrapperCol">
|
<a-form-model-item label="机构编码">
|
<a-input placeholder="请输入机构编码" v-model="model.factoryCode"/>
|
</a-form-model-item>
|
<a-form-model-item expandedKeys prop="factoryName" label="机构名称">
|
<a-input placeholder="请输入机构名称" v-model="model.factoryName"/>
|
</a-form-model-item>
|
<a-form-model-item expandedKeys label="上级车间">
|
<a-tree-select
|
style="width:100%"
|
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
:treeData="treeData"
|
disabled
|
v-model="model.parentId"
|
placeholder="无">
|
</a-tree-select>
|
</a-form-model-item>
|
<a-form-model-item expandedKeys label="排序">
|
<a-input-number v-model="model.sorter"/>
|
</a-form-model-item>
|
<a-form-model-item expandedKeys label="备注">
|
<a-textarea placeholder="请输入备注" v-model="model.remark"/>
|
</a-form-model-item>
|
</a-form-model>
|
<div class="anty-form-btn">
|
<a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>
|
<a-button @click="submitCurrForm" type="primary" htmlType="button" icon="form"
|
:loading="confirmLoading">保存
|
</a-button>
|
</div>
|
</template>
|
|
<a-empty v-else>
|
<span slot="description"> 请先选择一个车间! </span>
|
</a-empty>
|
</a-card>
|
</a-tab-pane>
|
|
<a-tab-pane tab="用户列表" key="2" forceRender>
|
<production-user ref="userList"></production-user>
|
</a-tab-pane>
|
</a-tabs>
|
|
</a-col>
|
<production-modal ref="departModal" @ok="loadData"></production-modal>
|
</a-row>
|
</template>
|
<script>
|
import ProductionUser from './modules/EamProductionUser'
|
import { queryProductionTreeList, searchByKeywords, deleteByProduction } from '@/api/api'
|
import { postAction, getAction, deleteAction } from '@/api/manage'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import ProductionModal from './modules/EamProductionModal'
|
|
export default {
|
name: 'ProductionUserManagement',
|
mixins: [JeecgListMixin],
|
components: {
|
ProductionUser,
|
ProductionModal
|
},
|
data() {
|
return {
|
expandedKeys: [],
|
loading: false,
|
autoExpandParent: true,
|
treeData: [],
|
departTree: [],
|
model: {},
|
checkedKeys: [],
|
selectedKeys: [],
|
currSelected: {},
|
allTreeKeys: [],
|
checkStrictly: true,
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
},
|
validatorRules: {
|
factoryName: [{ required: true, message: '请输入机构名称!', trigger: 'change' }]
|
},
|
url: {
|
getProductionTreeList: '/eam/BaseFactory/queryTreeList',
|
delete: '/eam/BaseFactory/delete',
|
edit: '/eam/BaseFactory/edit',
|
deleteBatch: '/eam/BaseFactory/deleteBatch'
|
},
|
isIncludesNotLeaf: false,
|
confirmLoading: false
|
}
|
},
|
computed: {
|
importExcelUrl: function() {
|
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
|
},
|
getCurrSelectedTitle() {
|
return !this.currSelected.title ? '' : this.currSelected.title
|
}
|
},
|
methods: {
|
loadData() {
|
const that = this
|
that.treeData = []
|
that.departTree = []
|
that.loading = true
|
getAction(that.url.getProductionTreeList)
|
.then((res) => {
|
if (res.success) {
|
//部门全选后，再添加部门，选中数量增多
|
this.allTreeKeys = []
|
for (let i = 0; i < res.result.length; i++) {
|
let temp = res.result[i]
|
that.treeData.push(temp)
|
that.departTree.push(temp)
|
that.setThisExpandedKeys(temp)
|
that.getAllKeys(temp)
|
}
|
this.loading = false
|
}
|
})
|
},
|
|
setThisExpandedKeys(node) {
|
if (node.children && node.children.length > 0) {
|
this.expandedKeys.push(node.key)
|
for (let a = 0; a < node.children.length; a++) {
|
this.setThisExpandedKeys(node.children[a])
|
}
|
}
|
},
|
|
onExpand(expandedKeys) {
|
this.expandedKeys = expandedKeys
|
this.autoExpandParent = false
|
},
|
|
batchDel: function() {
|
this.isIncludesNotLeaf = false
|
this.includesNotLeaf(this.departTree)
|
|
// 为true则表示选中项包含非叶子结点 false则表示选中项均为叶子结点
|
if (!this.isIncludesNotLeaf) {
|
if (this.checkedKeys.length <= 0) {
|
this.$notification.warning({
|
message: '消息',
|
description: '请选择一条记录'
|
})
|
} else {
|
var ids = ''
|
for (var a = 0; a < this.checkedKeys.length; a++) {
|
ids += this.checkedKeys[a] + ','
|
}
|
var that = this
|
this.$confirm({
|
title: '确认删除',
|
content: '确定要删除选中的 ' + this.checkedKeys.length + ' 条数据?',
|
onOk: function() {
|
deleteAction(that.url.deleteBatch, { ids })
|
.then((res) => {
|
if (res.success) {
|
that.$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
that.loadData()
|
that.onClearSelected()
|
} else {
|
that.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
}
|
})
|
}
|
} else {
|
this.$notification.warning({
|
message: '消息',
|
description: '选中项包含已挂载子节点车间'
|
})
|
}
|
},
|
|
includesNotLeaf(treeData) {
|
for (let i = 0; i < treeData.length; i++) {
|
if (!treeData[i].leaf) {
|
this.includesNotLeaf(treeData[i].children)
|
}
|
if (this.checkedKeys.includes(treeData[i].id) && !treeData[i].leaf) {
|
this.isIncludesNotLeaf = true
|
}
|
}
|
},
|
|
onSearch(value) {
|
let that = this
|
if (value) {
|
searchByKeywords({ keyWord: value }).then((res) => {
|
if (res.success) {
|
that.departTree = []
|
for (let i = 0; i < res.result.length; i++) {
|
let temp = res.result[i]
|
that.departTree.push(temp)
|
}
|
} else {
|
that.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
} else {
|
that.loadData()
|
}
|
},
|
|
onCheck(checkedKeys, info) {
|
//---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------
|
if (this.checkStrictly) {
|
this.checkedKeys = checkedKeys.checked
|
} else {
|
this.checkedKeys = checkedKeys
|
}
|
//---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------
|
},
|
|
onSelect(selectedKeys, e) {
|
let record = e.node.dataRef
|
this.currSelected = Object.assign({}, record)
|
this.model = this.currSelected
|
this.selectedKeys = [record.key]
|
this.$refs.userList.show(record.id)
|
if (this.$refs.form) this.$refs.form.clearValidate()
|
},
|
|
onClearSelected() {
|
this.checkedKeys = []
|
this.currSelected = {}
|
this.selectedKeys = []
|
this.$refs.userList.queryParam.baseFactoryId = ''
|
},
|
|
submitCurrForm() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
if (!this.currSelected.id) {
|
this.$notification.warning({
|
message: '消息',
|
description: '请点击选择要修改车间！'
|
})
|
return
|
}
|
|
this.confirmLoading = true
|
postAction(this.url.edit, this.currSelected)
|
.then((res) => {
|
if (res.success) {
|
this.$notification.success({
|
message: '消息',
|
description: '保存成功'
|
})
|
this.loadData()
|
} else {
|
this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.finally(() => {
|
this.confirmLoading = false
|
})
|
}
|
})
|
},
|
|
emptyCurrForm() {
|
this.model = { parentId: this.model.parentId }
|
},
|
|
handleAdd(num) {
|
if (num == 1) {
|
this.$refs.departModal.add()
|
} else if (num == 2) {
|
let key = this.currSelected.key
|
if (!key) {
|
this.$notification.warning({
|
message: '消息',
|
description: '请先点击选中上级车间！'
|
})
|
return false
|
}
|
this.$refs.departModal.add(this.currSelected)
|
}
|
this.$refs.departModal.title = '新增'
|
},
|
|
handleDelete() {
|
const that = this
|
if (this.currSelected.leaf) {
|
this.$confirm({
|
title: '确认删除',
|
content: `确定要删除 ${that.currSelected.factoryName} 吗?`,
|
onOk: function() {
|
deleteAction(that.url.delete, { id: that.currSelected.id }).then((resp) => {
|
if (resp.success) {
|
//删除成功后，去除已选中中的数据
|
that.$notification.success({
|
message: '消息',
|
description: '删除成功'
|
})
|
that.loadData()
|
//删除后同步清空右侧基本信息内容
|
that.onClearSelected()
|
// }
|
} else {
|
that.$notification.warning({
|
message: '消息',
|
description: '删除失败'
|
})
|
}
|
})
|
}
|
})
|
} else {
|
this.$notification.warning({
|
message: '消息',
|
description: '此车间已挂载子节点'
|
})
|
}
|
},
|
|
expandAll() {
|
this.expandedKeys = this.allTreeKeys
|
},
|
|
closeAll() {
|
this.expandedKeys = []
|
},
|
|
checkALL() {
|
this.checkedKeys = this.allTreeKeys
|
},
|
|
cancelCheckALL() {
|
this.checkedKeys = []
|
},
|
|
switchCheckStrictly(v) {
|
if (v == 1) {
|
this.checkStrictly = false
|
} else if (v == 2) {
|
this.checkStrictly = true
|
}
|
},
|
|
getAllKeys(node) {
|
this.allTreeKeys.push(node.key)
|
if (node.children && node.children.length > 0) {
|
for (let a = 0; a < node.children.length; a++) {
|
this.getAllKeys(node.children[a])
|
}
|
}
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.anty-form-btn {
|
width: 100%;
|
text-align: center;
|
}
|
|
.anty-form-btn button {
|
margin: 0 5px;
|
}
|
|
/** Button按钮间距 */
|
.ant-btn {
|
margin-left: 3px;
|
}
|
|
.drawer-bottom-button {
|
bottom: 0;
|
width: 100%;
|
border-top: 1px solid #e8e8e8;
|
padding: 10px 16px;
|
text-align: left;
|
left: 0;
|
background: #fff;
|
border-radius: 0 0 2px 2px;
|
}
|
</style>
|
