|
@@ -0,0 +1,494 @@
|
|
|
+<template xmlns:background-color="http://www.w3.org/1999/xhtml">
|
|
|
+ <a-row :gutter="10">
|
|
|
+ <a-col :md="6" :sm="12">
|
|
|
+ <a-card :bordered="false">
|
|
|
+
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </a-alert>
|
|
|
+ <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
|
|
|
+ <!-- 树-->
|
|
|
+ <a-col :md="10" :sm="24">
|
|
|
+ <template>
|
|
|
+ <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
|
|
|
+ <span style="user-select: none">
|
|
|
+ <a-tree
|
|
|
+ multiple
|
|
|
+ @select="onSelect"
|
|
|
+ @check="onCheck"
|
|
|
+ @rightClick="rightHandle"
|
|
|
+ :selectedKeys="selectedKeys"
|
|
|
+ :checkedKeys="checkedKeys"
|
|
|
+ :treeData="departTree"
|
|
|
+ :checkStrictly="checkStrictly"
|
|
|
+ :expandedKeys="iExpandedKeys"
|
|
|
+ :autoExpandParent="autoExpandParent"
|
|
|
+ @expand="onExpand"/>
|
|
|
+ </span>
|
|
|
+ <!--新增右键点击事件,和增加添加和删除功能-->
|
|
|
+ <!-- <a-menu slot="overlay">
|
|
|
+ <a-menu-item @click="handleAdd(3)" key="1">添加</a-menu-item>
|
|
|
+ <a-menu-item @click="handleDelete" key="2">删除</a-menu-item>
|
|
|
+ <a-menu-item @click="closeDrop" key="3">取消</a-menu-item>
|
|
|
+ </a-menu> -->
|
|
|
+ </a-dropdown>
|
|
|
+ </template>
|
|
|
+ </a-col>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+ <!---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------>
|
|
|
+
|
|
|
+ <!---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="18" :sm="24">
|
|
|
+ <a-tabs defaultActiveKey="1">
|
|
|
+ <a-tab-pane tab="基本信息" key="1" >
|
|
|
+ <!-- <a-card :bordered="false" v-if="selectedKeys.length>0"> -->
|
|
|
+
|
|
|
+ <a-table class="j-table-force-nowrap" ref="table" size="middle" bordered rowKey="id" :columns="columns"
|
|
|
+ :dataSource="dataSource" :pagination="ipagination" :loading="loading"
|
|
|
+ :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
|
|
+ @change="handleTableChange" >
|
|
|
+
|
|
|
+ </a-table>
|
|
|
+
|
|
|
+ <!-- </a-card>
|
|
|
+ <a-card v-else >
|
|
|
+ <a-empty>
|
|
|
+ <span slot="description"> 请先选择一个人员! </span>
|
|
|
+ </a-empty>
|
|
|
+ </a-card> -->
|
|
|
+ </a-tab-pane>
|
|
|
+
|
|
|
+ </a-tabs>
|
|
|
+
|
|
|
+ </a-col>
|
|
|
+ <!-- <depart-modal ref="departModal" @ok="loadTree"></depart-modal> -->
|
|
|
+ </a-row>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import DepartModal from '../modules/DepartModal'
|
|
|
+ import pick from 'lodash.pick'
|
|
|
+ import {queryTreeList2, searchByKeywords, deleteByDepartId} from '@/api/api'
|
|
|
+ import moment from 'moment'
|
|
|
+ import {httpAction, deleteAction} from '@/api/manage'
|
|
|
+ import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
|
|
+ import DepartAuthModal from '../modules/DepartAuthModal'
|
|
|
+ // 表头
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ title: '日期',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'viewDate', width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '人员',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'realname', width: 100
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ export default {
|
|
|
+ name: 'DepartList',
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
+ components: {
|
|
|
+ // DepartAuthModal,
|
|
|
+ // DepartModal
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ iExpandedKeys: [],
|
|
|
+ loading: false,
|
|
|
+ autoExpandParent: true,
|
|
|
+ currFlowId: '',
|
|
|
+ currFlowName: '',
|
|
|
+ disable: true,
|
|
|
+ treeData: [],
|
|
|
+ visible: false,
|
|
|
+ departTree: [],
|
|
|
+ rightClickSelectedKey: '',
|
|
|
+ rightClickSelectedOrgCode: '',
|
|
|
+ hiding: true,
|
|
|
+ model: {},
|
|
|
+ dropTrigger: '',
|
|
|
+ depart: {},
|
|
|
+ columns: columns,
|
|
|
+ disableSubmit: false,
|
|
|
+ checkedKeys: [],
|
|
|
+ selectedKeys: [],
|
|
|
+ autoIncr: 1,
|
|
|
+ currSelected: {},
|
|
|
+
|
|
|
+ allTreeKeys:[],
|
|
|
+ checkStrictly: true,
|
|
|
+
|
|
|
+ // form: this.$form.createForm(this),
|
|
|
+ labelCol: {
|
|
|
+ xs: {span: 24},
|
|
|
+ sm: {span: 5}
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: {span: 24},
|
|
|
+ sm: {span: 16}
|
|
|
+ },
|
|
|
+ graphDatasource: {
|
|
|
+ nodes: [],
|
|
|
+ edges: []
|
|
|
+ },
|
|
|
+ url: {
|
|
|
+ list: '/viewClockIn/viewClockIn/list',
|
|
|
+ delete: '/sys/sysDepart/delete',
|
|
|
+ edit: '/sys/sysDepart/edit',
|
|
|
+ deleteBatch: '/sys/sysDepart/deleteBatch',
|
|
|
+ exportXlsUrl: "sys/sysDepart/exportXls",
|
|
|
+ importExcelUrl: "sys/sysDepart/importExcel",
|
|
|
+ },
|
|
|
+ orgCategoryDisabled:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ importExcelUrl: function () {
|
|
|
+ return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadData() {
|
|
|
+ this.refresh();
|
|
|
+ },
|
|
|
+ loadTree() {
|
|
|
+ var that = this
|
|
|
+ that.treeData = []
|
|
|
+ that.departTree = []
|
|
|
+ queryTreeList2().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);
|
|
|
+ // console.log(temp.id)
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setThisExpandedKeys(node) {
|
|
|
+ if (node.children && node.children.length > 0) {
|
|
|
+ this.iExpandedKeys.push(node.key)
|
|
|
+ for (let a = 0; a < node.children.length; a++) {
|
|
|
+ this.setThisExpandedKeys(node.children[a])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ refresh() {
|
|
|
+ this.loading = true
|
|
|
+ this.loadTree()
|
|
|
+ },
|
|
|
+ // 右键操作方法
|
|
|
+ rightHandle(node) {
|
|
|
+ this.dropTrigger = 'contextmenu'
|
|
|
+ console.log(node.node.eventKey)
|
|
|
+ this.rightClickSelectedKey = node.node.eventKey
|
|
|
+ this.rightClickSelectedOrgCode = node.node.dataRef.orgCode
|
|
|
+ },
|
|
|
+ onExpand(expandedKeys) {
|
|
|
+ console.log('onExpand', expandedKeys)
|
|
|
+ // if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
|
|
+ // or, you can remove all expanded children keys.
|
|
|
+ this.iExpandedKeys = expandedKeys
|
|
|
+ this.autoExpandParent = false
|
|
|
+ },
|
|
|
+ backFlowList() {
|
|
|
+ this.$router.back(-1)
|
|
|
+ },
|
|
|
+ // 右键点击下拉框改变事件
|
|
|
+ dropStatus(visible) {
|
|
|
+ if (visible == false) {
|
|
|
+ this.dropTrigger = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 右键店家下拉关闭下拉框
|
|
|
+ closeDrop() {
|
|
|
+ this.dropTrigger = ''
|
|
|
+ },
|
|
|
+ addRootNode() {
|
|
|
+ this.$refs.nodeModal.add(this.currFlowId, '')
|
|
|
+ },
|
|
|
+ batchDel: function () {
|
|
|
+ console.log(this.checkedKeys)
|
|
|
+ if (this.checkedKeys.length <= 0) {
|
|
|
+ this.$message.warning('请选择一条记录!')
|
|
|
+ } 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: ids}).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ that.$message.success(res.message)
|
|
|
+ that.loadTree()
|
|
|
+ that.onClearSelected()
|
|
|
+ } else {
|
|
|
+ that.$message.warning(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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.$message.warning(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ that.loadTree()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ nodeModalOk() {
|
|
|
+ this.loadTree()
|
|
|
+ },
|
|
|
+ nodeModalClose() {
|
|
|
+ },
|
|
|
+ hide() {
|
|
|
+ console.log(111)
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ onCheck(checkedKeys, info) {
|
|
|
+ console.log('onCheck', checkedKeys, info)
|
|
|
+ this.hiding = false
|
|
|
+ //this.checkedKeys = checkedKeys.checked
|
|
|
+ // <!---- 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) {
|
|
|
+ console.log('selected', selectedKeys, e)
|
|
|
+ // this.hiding = false
|
|
|
+ // let record = e.node.dataRef
|
|
|
+ // console.log('onSelect-record', record)
|
|
|
+ // this.currSelected = Object.assign({}, record)
|
|
|
+ // this.model = this.currSelected
|
|
|
+ // this.selectedKeys = [record.key]
|
|
|
+ // this.model.parentId = record.parentId
|
|
|
+ // this.setValuesToForm(record)
|
|
|
+ // this.$refs.departAuth.show(record.id);
|
|
|
+
|
|
|
+ },
|
|
|
+ // 触发onSelect事件时,为部门树右侧的form表单赋值
|
|
|
+ setValuesToForm(record) {
|
|
|
+ if(record.orgCategory == '1'){
|
|
|
+ this.orgCategoryDisabled = true;
|
|
|
+ }else{
|
|
|
+ this.orgCategoryDisabled = false;
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.form.getFieldDecorator('fax', {initialValue: ''})
|
|
|
+ this.form.setFieldsValue(pick(record, 'departName','orgCategory', 'orgCode', 'departOrder', 'mobile', 'fax', 'address', 'memo'))
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCurrSelectedTitle() {
|
|
|
+ return !this.currSelected.title ? '' : this.currSelected.title
|
|
|
+ },
|
|
|
+ onClearSelected() {
|
|
|
+ this.hiding = true
|
|
|
+ this.checkedKeys = []
|
|
|
+ this.currSelected = {}
|
|
|
+ this.form.resetFields()
|
|
|
+ this.selectedKeys = []
|
|
|
+ this.$refs.departAuth.departId = ''
|
|
|
+ },
|
|
|
+ handleNodeTypeChange(val) {
|
|
|
+ this.currSelected.nodeType = val
|
|
|
+ },
|
|
|
+ notifyTriggerTypeChange(value) {
|
|
|
+ this.currSelected.notifyTriggerType = value
|
|
|
+ },
|
|
|
+ receiptTriggerTypeChange(value) {
|
|
|
+ this.currSelected.receiptTriggerType = value
|
|
|
+ },
|
|
|
+ submitCurrForm() {
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+ if (!this.currSelected.id) {
|
|
|
+ this.$message.warning('请点击选择要修改部门!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ let formData = Object.assign(this.currSelected, values)
|
|
|
+ console.log('Received values of form: ', formData)
|
|
|
+ httpAction(this.url.edit, formData, 'put').then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.$message.success('保存成功!')
|
|
|
+ this.loadTree()
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ emptyCurrForm() {
|
|
|
+ this.form.resetFields()
|
|
|
+ },
|
|
|
+ nodeSettingFormSubmit() {
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+ console.log('Received values of form: ', values)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openSelect() {
|
|
|
+ this.$refs.sysDirectiveModal.show()
|
|
|
+ },
|
|
|
+ selectDirectiveOk(record) {
|
|
|
+ console.log('选中指令数据', record)
|
|
|
+ this.nodeSettingForm.setFieldsValue({directiveCode: record.directiveCode})
|
|
|
+ this.currSelected.sysCode = record.sysCode
|
|
|
+ },
|
|
|
+ getFlowGraphData(node) {
|
|
|
+ this.graphDatasource.nodes.push({
|
|
|
+ id: node.id,
|
|
|
+ text: node.flowNodeName
|
|
|
+ })
|
|
|
+ if (node.children.length > 0) {
|
|
|
+ for (let a = 0; a < node.children.length; a++) {
|
|
|
+ let temp = node.children[a]
|
|
|
+ this.graphDatasource.edges.push({
|
|
|
+ source: node.id,
|
|
|
+ target: temp.id
|
|
|
+ })
|
|
|
+ this.getFlowGraphData(temp)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // <!---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------>
|
|
|
+ expandAll () {
|
|
|
+ this.iExpandedKeys = this.allTreeKeys
|
|
|
+ },
|
|
|
+ closeAll () {
|
|
|
+ this.iExpandedKeys = []
|
|
|
+ },
|
|
|
+ checkALL () {
|
|
|
+ this.checkStriccheckStrictlytly = false
|
|
|
+ this.checkedKeys = this.allTreeKeys
|
|
|
+ },
|
|
|
+ cancelCheckALL () {
|
|
|
+ //this.checkedKeys = this.defaultCheckedKeys
|
|
|
+ this.checkedKeys = []
|
|
|
+ },
|
|
|
+ switchCheckStrictly (v) {
|
|
|
+ if(v==1){
|
|
|
+ this.checkStrictly = false
|
|
|
+ }else if(v==2){
|
|
|
+ this.checkStrictly = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getAllKeys(node) {
|
|
|
+ // console.log('node',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])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // <!---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------>
|
|
|
+
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.currFlowId = this.$route.params.id
|
|
|
+ this.currFlowName = this.$route.params.name
|
|
|
+ // this.loadTree()
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+ @import '~@assets/less/common.less'
|
|
|
+
|
|
|
+ .ant-card-body .table-operator {
|
|
|
+ margin: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .anty-form-btn {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .anty-form-btn button {
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .anty-node-layout .ant-layout-header {
|
|
|
+ padding-right: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ padding: 0 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header button {
|
|
|
+ margin: 0 3px
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-modal-cust-warp {
|
|
|
+ height: 100%
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-modal-cust-warp .ant-modal-body {
|
|
|
+ height: calc(100% - 110px) !important;
|
|
|
+ overflow-y: auto
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-modal-cust-warp .ant-modal-content {
|
|
|
+ height: 90% !important;
|
|
|
+ overflow-y: hidden
|
|
|
+ }
|
|
|
+
|
|
|
+ #app .desktop {
|
|
|
+ height: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /** Button按钮间距 */
|
|
|
+ .ant-btn {
|
|
|
+ margin-left: 3px
|
|
|
+ }
|
|
|
+
|
|
|
+ .drawer-bootom-button {
|
|
|
+ /*position: absolute;*/
|
|
|
+ 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>
|