other_project/demo
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

demo-web-ui

Browse Source
This commit is contained in:
liupopo
2023-04-24 09:29:28 +08:00
parent c190807b10
commit 8730220d6a
342 changed files with 33994 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

660
demo-web-ui/src/views/organizationManage/organizationManage.vue Normal file
View File

@@ -0,0 +1,660 @@
<template>
<div class="container" style="display: flex;">
<div class="org-tree">
<el-tree :data="treedata" node-key="sid" :props="props" :default-expanded-keys="['fd6435f2-0005-11ec-a033-48452053aa33']" @node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" @click.stop.native>
<span>{{ node.label || $store.getters.userInfo.Orgname }}</span>
<span v-show="data.del" class="handle">
<el-tooltip class="item" effect="dark" content="新增" placement="top-start">
<el-button type="text" size="mini" @click.stop="() => append(data)" icon="el-icon-circle-plus-outline">
</el-button>
</el-tooltip>
<!-- <el-tooltip v-show="data.sid" class="item" effect="dark" content="修改" placement="top-start">-->
<!-- <el-button type="text" size="mini" @click.stop="() => deit(data)" icon="el-icon-edit">-->
<!-- </el-button>-->
<!-- </el-tooltip>-->
<!-- <el-tooltip v-show="data.sid" class="item" effect="dark" content="删除" placement="top-start">-->
<!-- <el-button type="text" size="mini" @click.stop="() => remove(data)" icon="el-icon-delete">-->
<!-- </el-button>-->
<!-- </el-tooltip>-->
</span>
</span>
</el-tree>
</div>
<el-dialog title="编辑节点" :visible.sync="dialogVisible" width="50%" class="edit">
<table class="e-table" cellspacing="0">
<tr>
<td>组织名称</td>
<td>
<el-input v-model="form.name" style="width:300px"></el-input>
</td>
<td>组织编码</td>
<td>
<el-input v-model="form.orgCode" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>主管人员</td>
<td>
<el-select v-model="form.zgStaffSid" style="width:300px" filterable>
<el-option v-for="item in staffdata" :key="item.sid" :label="item.name" :value="item.sid"/>
</el-select>
</td>
<td>分管人员</td>
<td>
<el-select v-model="fgStaffSid" style="width:300px" filterable multiple>
<el-option v-for="item in staffdata2" :key="item.sid" :label="item.name" :value="item.sid"/>
</el-select>
</td>
</tr>
<tr>
<td>组织简称</td>
<td :colspan="3">
<el-input v-model="form.orgAbbre" style="width: 30%"></el-input>
</td>
</tr>
<tr>
<td>管理层级</td>
<td>
<el-select v-model="form.orgLevelValue" style="width:300px" placeholder="请选择" filterable @change="changeOrgLevel">
<el-option v-for="item in orgLevel_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
</el-select>
</td>
<td>其他编码</td>
<td>
<el-input v-model="form.otherCode" style="width:300px" placeholder="与财务中客户编码相同"></el-input>
</td>
</tr>
<tr>
<td>组织地址</td>
<td>
<el-input v-model="form.addrs" style="width:300px"></el-input>
</td>
<td>组织属性</td>
<td>
<el-select v-model="form.orgAttributeValue" placeholder="请选择" filterable @change="changeOrgAttribute">
<el-option v-for="item in orgAttribute_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
</el-select>
</td>
</tr>
<tr>
<td>组织联系人</td>
<td>
<el-input v-model="form.linkPerson" style="width:300px"></el-input>
</td>
<td>联系电话</td>
<td>
<el-input v-model="form.linkPhone" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>是否独立法人</td>
<td>
<el-radio v-model="form.isDept" :label="0">是</el-radio>
<el-radio v-model="form.isDept" :label="1">否</el-radio>
</td>
<td>排序号</td>
<td>
<el-input v-model="form.sort" style="width:300px"></el-input>
</td>
</tr>
</table>
<div slot="footer" class="text-center">
<el-button type="primary" @click="nodeSave()">保 存</el-button>
<el-button @click="dialogVisible = false">返 回</el-button>
</div>
</el-dialog>
<div class="org-table" v-show="isshow == 'table'">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="组织名称">
<el-input v-model="page.params.name" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="onSearch()">查询</el-button>
<el-button @click="resetSearch()">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- table -->
<el-table :data="tableData" default-expand-all border style="width: 100%;">
<el-table-column label="操作" align="center" width="160px">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="editRow(scope.row)">
编辑
</el-button>
<el-button type="danger" size="mini" @click.native.prevent="remove(scope.row)">
删除
</el-button>
</template>
</el-table-column>
<el-table-column prop="name" label="组织名称" align="center"></el-table-column>
<el-table-column prop="orgCode" label="组织编码" align="center"></el-table-column>
<!-- <el-table-column prop="zgNames" label="主管" align="center"></el-table-column>-->
<el-table-column prop="fgNames" label="分管" align="center"></el-table-column>
<!--<el-table-column prop="contactMan" label="联系人" align="center" width="100px"></el-table-column>-->
<el-table-column prop="linkPhone" label="联系人手机号" width="110" align="center">
</el-table-column>
<el-table-column prop="addrs" label="地址" align="center">
</el-table-column>
<el-table-column prop="sort" label="排序" align="center" width="50px">
</el-table-column>
<el-table-column prop="qrText" label="二维码" align="center" width="80px">
<template slot-scope="scope">
<el-button @click.native.prevent="lookRow(scope.row)" type="text" size="small">查看</el-button>
</template>
</el-table-column>
</el-table>
<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
</div>
<div class="org-table" v-show="isshow == 'ewm'">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="16">
<h4 style="margin: 0;line-height: 32px;">组织二维码</h4>
</el-col>
<el-col :span="8">
<el-form-item style="float: right;">
<el-button type="primary" @click="Printewm">打 印</el-button>
<el-button @click="isshow = 'table'">返 回</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- center -->
<div class="ewm" style="display: flex;justify-content: center; align-items: center;" ref="print">
<img style="width: 200px; height: 200px;" :src="ewmForm.qrFilePath" alt="">
<ul style="list-style:none; line-height: 32px; font-size: 16px;">
<li><label>组织名称: </label><span>{{ ewmForm.departmentName }}</span></li>
</ul>
</div>
</div>
<!-- 新增、编辑页面 -->
<div class="org-table" v-show="isshow == 'edit'">
<div class="tab-header">
<el-form ref="form" :inline="true" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :span="16">
<h4 style="margin: 0;line-height: 32px;"> {{ dialogTitle }}组织信息</h4>
</el-col>
<el-col :span="8">
<el-form-item style="float: right;">
<el-button type="primary" @click="save()">保 存</el-button>
<el-button @click="isshow = 'table'">返 回</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- center -->
<div class="ediut">
<table class="e-table" cellspacing="0">
<tr>
<td>组织名称</td>
<td>
<el-input v-model="form.name" style="width:300px"></el-input>
</td>
<td>组织编码</td>
<td>
<el-input v-model="form.orgCode" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>主管人员</td>
<td>
<el-select v-model="form.zgStaffSid" style="width:300px" filterable>
<el-option v-for="item in staffdata" :key="item.sid" :label="item.name" :value="item.sid"/>
</el-select>
</td>
<td>分管人员</td>
<td>
<el-select v-model="fgStaffSid" style="width:300px" filterable multiple>
<el-option v-for="item in staffdata2" :key="item.sid" :label="item.name" :value="item.sid"/>
</el-select>
</td>
</tr>
<tr>
<td>组织简称</td>
<td :colspan="3">
<el-input v-model="form.orgAbbre" style="width: 300px"></el-input>
</td>
</tr>
<tr>
<td>管理层级</td>
<td>
<el-select v-model="form.orgLevelValue" style="width:300px" placeholder="请选择" filterable @change="changeOrgLevel">
<el-option v-for="item in orgLevel_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
</el-select>
</td>
<td>其他编码</td>
<td>
<el-input v-model="form.otherCode" style="width:300px" placeholder="与财务中客户编码相同"></el-input>
</td>
</tr>
<tr>
<td>组织地址</td>
<td>
<el-input v-model="form.addrs" style="width:300px"></el-input>
</td>
<td>组织属性</td>
<td>
<el-select v-model="form.orgAttributeValue" placeholder="请选择" filterable @change="changeOrgAttribute">
<el-option v-for="item in orgAttribute_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
</el-select>
</td>
</tr>
<tr>
<td>组织联系人</td>
<td>
<el-input v-model="form.linkPerson" style="width:300px"></el-input>
</td>
<td>联系电话</td>
<td>
<el-input v-model="form.linkPhone" style="width:300px"></el-input>
</td>
</tr>
<tr>
<td>是否独立法人</td>
<td>
<el-radio v-model="form.isDept" :label="0">是</el-radio>
<el-radio v-model="form.isDept" :label="1">否</el-radio>
</td>
<td>排序号</td>
<td>
<el-input v-model="form.sort" style="width:300px"></el-input>
</td>
</tr>
</table>
</div>
</div>
<!-- <Position v-if="mapDialog" :address.sync="form.addrs" :maker-position.sync="form.jwd"
:dialog-visible.sync="mapDialog"/>-->
</div>
</template>
<script>
import {
addOrgTree,
delOrgtree,
getQrCode, getStaff,
getStaffName,
orgList,
pageList,
postOrgtree,
putOrgtree,
selectBySid
} from '@/api/system/departments/departments.js'
import { typeValues } from '@/api/system/roleAdminister/index'
import Position from '@/components/amap/amap.vue'
export default {
components: { Position },
data() {
return {
dialogVisible: false,
mapDialog: false,
dialogTitle: '',
props: {
label: 'name',
children: 'children'
},
nodeForm: {
sid: '',
name: '',
sortNo: ''
},
ewmForm: {
qrFilePath: '',
organizationName: '',
departmentName: '',
address: ''
},
orgAttribute_list: [],
orgLevel_list: [],
form: {
sid: '',
name: '',
orgCode: '',
/* jwd: '',*/
addrs: '',
zgStaffSid: '',
zgStaffName: '',
fgStaffSid: '',
fgStaffName: '',
linkPerson: '',
linkPhone: '',
sort: '',
isDept: '',
orgAbbre: '',
orgAttributeValue: '',
orgAttributeKey: '',
orgLevelValue: '',
orgLevelKey: '',
otherCode: ''
},
fgStaffSid: [],
formBackup: Object.assign({}, this.form),
isshow: 'table',
page: {
total: 0, // 默认数据总数
current: 1, // 默认开始页面
size: 10, // 每页的数据条数
params: {
name: '',
organizationSid: '',
psid: ''
}
},
tableData: [],
treedata: [],
staffdata: [],
staffdata2: [],
rules: {}
}
},
mounted() {
this.getOrgTree()
this.init()
},
methods: {
init() {
typeValues({ type: 'orgAttribute' }).then((res) => {
if (res.success) {
this.orgAttribute_list = res.data
}
})
typeValues({ type: 'orgLevel' }).then((res) => {
if (res.success) {
this.orgLevel_list = res.data
}
})
},
changeOrgLevel(value) {
let bb = null
this.orgLevel_list.forEach((e) => {
if (e.dictValue === value) {
bb = {
value: e.dictValue,
key: e.dictKey
}
}
})
this.form.orgLevelValue = bb.value
this.form.orgLevelKey = bb.key
},
changeOrgAttribute(value) {
let bb = null
this.orgAttribute_list.forEach((e) => {
if (e.dictValue === value) {
bb = {
key: e.dictKey,
value: e.dictValue
}
}
})
this.form.orgAttributeKey = bb.key
},
pagination(val) { // 分页
this.page.current = val.pageNum
this.page.size = val.pageSize
this.getPageList(this.page)
},
handleNodeClick(data) {
this.isshow = 'table'
this.page.params.organizationSid = this.$store.getters.userInfo.orgSid
this.page.params.psid = data.sid || 0
this.getPageList(this.page)
},
getPageList(data) { // 获取树形列表
pageList(data).then(res => {
console.log('返回子级:',res)
this.tableData = res.data.records
this.page.total = res.data.total
})
},
getOrgTree() { // 获取树形列表
orgList({}).then(res => {
this.treedata = res.data
})
},
save() {
if (this.fgStaffSid.length > 0) {
this.form.fgStaffSid = this.fgStaffSid.join()
} else {
this.form.fgStaffName = ''
this.form.fgStaffSid = ''
}
this.form.organizationSid = this.$store.getters.userInfo.orgSid
// this.form.dlxx = typeof(this.form.dlxx) == 'string' ? this.form.dlxx : this.form.dlxx.join()
if (this.form.sid) {
// console.log(this.form)
putOrgtree(this.form).then(res => {
if (res.success) {
this.isshow = 'table'
this.getOrgTree()
this.handleNodeClick({ sid: this.form.psid })
this.$message({
message: res.msg,
type: 'success'
})
}
})
} else {
addOrgTree(this.form).then(res => {
if (res.success) {
this.isshow = 'table'
this.getOrgTree()
this.handleNodeClick({ sid: this.form.psid })
this.$message({
message: res.msg,
type: 'success'
})
}
})
}
},
append(data) {
console.log(123456789, data)
this.dialogTitle = '新增'
this.isshow = 'edit'
this.fgStaffSid = []
this.form = Object.assign({}, this.formBackup)
this.form.psid = data.sid || 0
this.form.organizationSid = this.$store.getters.userInfo.orgSid
this.form.address = data.orgAddress || data.address
this.form.dlxx = data.gisInfo || data.dlxx
this.getStaff(data.sid)
this.getStaff2(data.sid)
},
editRow(row) {
this.getStaff(row.sid)
this.getStaff2(row.sid)
this.dialogTitle = '编辑'
this.isshow = 'edit'
this.fgStaffSid = []
selectBySid(row.sid).then((response) => {
if (response.success) {
this.form = response.data
this.form.fgStaffName = response.data.fgNames
this.form.fgStaffSid = response.data.fgStaffSid
if (this.form.fgStaffSid) {
this.fgStaffSid = response.data.fgStaffSid.split(',')
}
this.form.zgStaffName = response.data.zgNames
this.form.zgStaffSid = response.data.zgStaffSid
console.log('编辑回显的数据', this.form)
}
})
},
deit(data) { // 节点编辑保存
this.getStaff(data.sid)
this.getStaff2(data.sid)
console.log(data, 8888)
this.dialogVisible = true
this.form.sid = data.sid
// this.form.psid = null
this.form.name = data.name
this.form.orgCode = data.orgCode
/* this.form.jwd = data.jwd*/
this.form.addrs = data.addrs
this.form.linkPerson = data.linkPerson
this.form.linkPhone = data.linkPhone
this.form.sort = data.sort
this.form.zgStaffSid = data.zgSids
this.form.fgStaffSid = data.fgSids.split(',')
},
nodeSave() { // 节点编辑保存
console.log('这是保存nodeSave(0')
this.form.fgStaffSid = this.form.fgStaffSid.join()
postOrgtree(this.form).then(res => {
this.getOrgTree()
this.dialogVisible = false
this.$message({
message: res.msg,
type: 'success'
})
})
},
remove(data) {
this.$confirm('确定要删除该组织吗, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delOrgtree({ sid: data.sid }).then(res => {
this.getOrgTree()
this.handleNodeClick({ sid: data.psid })
this.$message({
message: res.msg,
type: 'success'
})
})
})
},
lookRow(row) { // 查看二维码
this.isshow = 'ewm'
getQrCode({ sid: row.sid }).then(res => {
this.ewmForm = res.data
})
},
Printewm() {
this.$print(this.$refs.print) // 使用
},
mouseenter(data) {
this.$set(data, 'del', true)
},
mouseleave(data) {
this.$set(data, 'del', false)
},
onSearch() {
this.getPageList(this.page)
},
resetSearch() {
this.page.params.name = ''
this.getPageList(this.page)
},
// 主管人员
getStaff(orgSid) {
getStaff({ deptSid: orgSid }).then((res) => {
if (res.success) {
this.staffdata = res.data
}
})
},
// 分管人员
getStaff2(orgSid) {
getStaffName({ deptSid: orgSid }).then(res => {
this.staffdata2 = res.data
console.log('分管人员', this.staffdata2)
})
}
}
}
</script>
<style>
.el-icon-arrow-right:before {
content: '\e6e0';
color: #727272;
}
</style>
<style scoped="scoped" lang="scss">
.org-tree {
width: 240px;
min-height: 100%;
box-sizing: border-box;
/*padding-right: 10px;*/
border: 1px solid #edf1f7;
overflow: scroll;
}
.org-table {
flex: 1;
// padding-left: 10px;
margin: 0 10px;
border: 1px solid #edf1f7;
min-height: 100%;
overflow-y: scroll;
.ewm {
margin: 30px auto 0;
width: 560px;
}
.ediut {
margin: 30px auto 0;
/*width:750px;*/
}
}
.custom-tree-node {
position: relative;
overflow: hidden;
width: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.handle {
position: absolute;
right: 0;
.el-button--text {
font-size: 15px;
background-color: #FFFFFF;
}
}
.my-tabs {
margin-top: 10px;
}
.edit {
.el-form-item__label {
width: 100px !important;
display: inline-block !important;
}
.el-input {
width: 70%;
}
}
.td_left {
border-left: 0 solid #e6e9f0;
}
</style>