<template>
|
<div>
|
<div class="body" :style="{height:mainHeight+'px'}">
|
<div class="body_left">
|
<div style="margin:10px 0">
|
<i class="el-icon-s-comment" :style="{color:$store.state.settings.theme}" /> 车间信息：
|
</div>
|
<el-input
|
v-model="filterText"
|
placeholder="输入关键字进行过滤"
|
style="margin-bottom: 20px"
|
/>
|
<el-tree
|
ref="tree"
|
class="filter-tree body_left_tree"
|
:data="shopTree"
|
:props="defaultProps"
|
highlight-current
|
node-key="torg_code"
|
default-expand-all
|
:style="{height: contentHeight+'px',overflowY:'auto'}"
|
:filter-node-method="filterNode"
|
@current-change="currentTreeChange"
|
/>
|
</div>
|
<div class="body_right">
|
<el-tabs ref="elTabs" type="border-card" @tab-click="tabClick">
|
<el-tab-pane v-for="item in AnDengTypeArr" :key="item.id" :label="item.name">
|
<div :style="{height: (contentHeight+51)+'px'}">
|
<div class="pane_top">
|
<div style="display: flex;align-items: center">
|
<div class="bar" :style="{background:$store.state.settings.theme}" />
|
<div>响应人员</div>
|
|
<!-- <i class="el-icon-circle-plus-outline" />-->
|
<el-button
|
v-waves
|
icon="el-icon-circle-plus-outline"
|
:disabled="allowClose"
|
:style="{color:allowClose?'#6f6e6f':$store.state.settings.theme}"
|
style="height: 30px;line-height: 30px;font-size: 22px;padding:10px;margin-left: 10px;"
|
@click="responseUserClick"
|
/>
|
</div>
|
<div style="display: flex;align-content: center">
|
<div>
|
<el-checkbox v-model="allowClose" @change="allowCloseChange">允许关闭</el-checkbox>
|
</div>
|
<div style="margin-left: 5px;cursor: pointer">
|
<el-tooltip class="item" effect="dark" content="当前呼叫类型(启用/关闭)" placement="top">
|
<i class="el-icon-question" :style="{color:$store.state.settings.theme}" />
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
<el-empty v-if="AnDengResponUserArr.length===0" :image-size="200" description="暂无数据" />
|
<div v-else class="pane_content" :style="{maxHeight:contentHeight+'px',overflowY: 'scroll'}">
|
<el-tag
|
v-for="tag in AnDengResponUserArr"
|
:key="tag.id"
|
:closable="!allowClose"
|
type="success"
|
style="margin-right: 10px;margin-bottom: 10px"
|
:style="{color:$store.state.settings.theme}"
|
@close="val=>tagClose(val,item,tag)"
|
>
|
{{ tag.username }}
|
</el-tag>
|
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<el-button
|
|
style="position: absolute;top: 13px;right:15px;z-index: 1000"
|
icon="el-icon-setting"
|
@click="setting"
|
>自定义呼叫类型
|
</el-button>
|
</div>
|
</div>
|
|
<!-- 自定义呼叫类型-->
|
<el-dialog
|
v-el-drag-dialog
|
title="自定义呼叫类型"
|
:visible.sync="settingDialogVisible"
|
width="800px"
|
top="15vh"
|
:close-on-click-modal="false"
|
@closed="handleClose"
|
@close="handleClose"
|
>
|
<el-button
|
v-waves
|
type="primary"
|
style="margin-bottom: 10px;"
|
icon="el-icon-circle-plus-outline"
|
@click="addRow()"
|
>新增
|
</el-button>
|
<el-table
|
ref="dialogTableDataArrRef"
|
class="tableFixed"
|
:data="settingDialogTableData"
|
:height="contentHeight-300"
|
:style="{width: 100+'%',height:contentHeight-300+'px',}"
|
border
|
:row-class-name="tableRowClassName"
|
highlight-current-row
|
:header-cell-style="this.$headerCellStyle"
|
:cell-style="this.$cellStyle"
|
>
|
<el-table-column
|
width="50"
|
label="序号"
|
type="index"
|
fixed
|
/>
|
|
<el-table-column
|
prop="code"
|
label="类型编码"
|
>
|
<template slot-scope="{row}">
|
<el-input
|
v-if="row.isVisible===1"
|
v-model="row.code"
|
oninput="value=value.replace(/[^0-9a-zA-Z]/g,'')"
|
placeholder="请输入"
|
/>
|
<div v-if="row.isVisible===0">{{ row.code }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="类型名称"
|
>
|
<template slot-scope="{row}">
|
<el-input
|
v-if="row.isVisible===1"
|
v-model="row.name"
|
placeholder="请输入"
|
/>
|
<div v-if="row.isVisible===0">{{ row.name }}</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="操作"
|
width="120"
|
fixed="right"
|
>
|
<template slot-scope="{row}">
|
<div class="operationClass">
|
<el-button v-if="row.isVisible===1" v-waves type="text" @click="saveRow(row)">保存</el-button>
|
<el-button v-if="row.isVisible===1" v-waves type="text" @click="cancelRow(row)">取消</el-button>
|
<!-- <el-button v-waves v-if="row.isVisible===0" type="text" @click="editRow(row)">编辑</el-button>-->
|
<el-button v-if="row.isVisible===0" v-waves type="text" @click="delRow(row)">删除</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<span slot="footer" class="dialog-footer">
|
<div class="footerButton">
|
<el-button v-waves @click="dialogVisibleCancel">返 回</el-button>
|
</div>
|
</span>
|
</el-dialog>
|
|
<el-dialog
|
v-el-drag-dialog
|
title="响应人员"
|
:visible.sync="userDialogVisible"
|
width="800px"
|
top="10vh"
|
:close-on-click-modal="false"
|
@closed="handleUserClose"
|
@close="handleUserClose"
|
>
|
<div
|
style=" background-color: #fafafa; padding: 10px; min-height: 120px;"
|
:style="{maxHeight:(contentHeight-300)+'px',overflowY: 'scroll'}"
|
>
|
<el-tag
|
v-for="tag in userDialogArr"
|
:key="tag.usercode"
|
closable
|
type="success"
|
style="margin-right: 10px;margin-bottom: 10px"
|
:style="{color:$store.state.settings.theme}"
|
@close="val=>userTagClose(val,tag)"
|
>
|
{{ tag.username }}
|
</el-tag>
|
</div>
|
<div>
|
<i class="el-icon-s-comment" :style="{color:$store.state.settings.theme}" style="margin: 20px 10px 20px 0" />人员：
|
</div>
|
<div
|
style=" background-color: #fafafa; padding: 10px; min-height: 420px;"
|
:style="{maxHeight:(contentHeight-300)+'px'}"
|
>
|
|
<el-input
|
v-model="filterUserText"
|
placeholder="输入关键字进行过滤"
|
style="margin-bottom: 20px; "
|
/>
|
<el-tree
|
ref="userTree"
|
class="filter-tree"
|
:data="userTree"
|
:props="userDefaultProps"
|
node-key="usercode"
|
show-checkbox
|
default-expand-all
|
:style="{height: (contentHeight-370)+'px',overflowY:'auto'}"
|
:filter-node-method="filterUserNode"
|
@check="userTreeCheck"
|
/>
|
<!-- @check-change="handleCheckChange"-->
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
<div class="footerButton">
|
<el-button v-waves @click="dialogVisibleUserCancel">取 消</el-button>
|
<el-button
|
v-waves
|
type="primary"
|
:loading="$store.state.app.buttonIsDisabled"
|
:disabled="$store.state.app.buttonIsDisabled"
|
@click="dialogVisibleUserConfirm"
|
>保 存</el-button>
|
</div>
|
</span>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
|
import {
|
AddUpdateAnDengType, AnDengDigoResponUserSearch, AnDengDigoResponUserSeave, AnDengResponUserCloseSeave,
|
AnDengResponUserDeleteSeave,
|
AnDengResponUserSearch,
|
AnDengTypeSearch,
|
DeleteAnDengType
|
} from '@/api/basicSettings'
|
import elDragDialog from '@/directive/el-drag-dialog'
|
import waves from '@/directive/waves'
|
import { PrentOrganization } from '@/api/GeneralBasicData'
|
|
export default {
|
name: 'InstallLampList',
|
directives: { elDragDialog, waves },
|
data() {
|
return {
|
mainHeight: 0,
|
contentHeight: 0,
|
filterText: '',
|
shopTree: [], // 树形车间
|
defaultProps: {
|
children: 'children',
|
label: 'torg_name'
|
},
|
settingDialogVisible: false,
|
settingDialogTableData: [],
|
allowClose: false, // 允许关闭
|
AnDengTypeArr: [], // 安灯类型
|
AnDengResponUserArr: [], // 安灯用户
|
userDialogVisible: false,
|
userDefaultProps: {
|
children: 'children',
|
label: 'username'
|
},
|
userDialogArr: [],
|
userTree: [],
|
filterUserText: '',
|
treeCheckedKey: []// 树形复选框选中的usercode
|
|
}
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val)
|
},
|
filterUserText(val) {
|
this.$refs.userTree.filter(val)
|
}
|
},
|
activated() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
this.handleRequest()
|
},
|
created() {
|
this.handleRequest()
|
},
|
mounted() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
},
|
methods: {
|
handleRequest() {
|
this.getShopSearch().then(res => {
|
if (res.code === '200') {
|
this.getAnDengTypeSearch()
|
}
|
})
|
},
|
// 获取左侧车间信息
|
async getShopSearch() {
|
const res = await PrentOrganization()
|
this.shopTree = res.data
|
this.$nextTick(() => {
|
this.$refs.tree.setCurrentKey(this.shopTree[0].torg_code) // 默认选中节点第一个
|
})
|
return { code: res.code }
|
},
|
// 获取安灯类型
|
async getAnDengTypeSearch() {
|
const { data: res } = await AnDengTypeSearch()
|
this.AnDengTypeArr = res
|
await this.getAnDengResponUserSearch(this.AnDengTypeArr[0].name)
|
},
|
// 获取安灯人员
|
async getAnDengResponUserSearch(name) {
|
const data = {
|
wkshopcode: this.$refs.tree.getCurrentKey(),
|
calltypecode: this.AnDengTypeArr.find(item => item.name === name).code
|
}
|
const { data: res } = await AnDengResponUserSearch(data)
|
this.AnDengResponUserArr = res || []
|
|
this.allowClose = this.AnDengResponUserArr[0] ? this.AnDengResponUserArr[0].enable === 'Y' : false
|
},
|
// tab切换点击
|
tabClick(val) {
|
this.getAnDengResponUserSearch(val.label)
|
},
|
// 安灯系统/响应人员删除
|
async tagClose(val, tab, tag) {
|
const data = {
|
ando_cogfigid: tab.id,
|
id: tag.id
|
}
|
const res = await AnDengResponUserDeleteSeave(data)
|
if (res.code === '200') {
|
await this.getAnDengResponUserSearch(tab.name)
|
}
|
},
|
// 过滤节点
|
filterNode(value, data) {
|
if (!value) return true
|
return data.torg_name.indexOf(value) !== -1
|
},
|
// 自定义呼叫类型
|
async setting() {
|
const { data: res } = await AnDengTypeSearch()
|
this.settingDialogTableData = res
|
this.settingDialogVisible = true
|
|
this.settingDialogTableData.forEach(item => {
|
let number = Math.random() * Math.random()// 作为删除时的标识符
|
number = number === 0 ? (10 + Math.random()) : number
|
item.number = number
|
item.isVisible = 0
|
})
|
},
|
addRow() {
|
if (this.settingDialogTableData.find(i => i.isVisible === 1)) {
|
return this.$message.info('请先保存或取消本条记录！')
|
}
|
let number = Math.random() * Math.random()// 作为删除时的标识符
|
number = number === 0 ? (10 + Math.random()) : number
|
this.settingDialogTableData.push({
|
number,
|
isVisible: 1,
|
code: '',
|
name: ''
|
})
|
},
|
async saveRow(row) {
|
console.log(row)
|
if (row.code.toString().trim() === '' || row.name.toString().trim() === '') {
|
return this.$message.info('类型编码或名称不能为空！')
|
}
|
const res = await AddUpdateAnDengType([row])
|
if (res.code === '200') {
|
await this.setting()
|
}
|
},
|
cancelRow(row) {
|
this.settingDialogTableData.splice(this.settingDialogTableData.length - 1, 1)
|
},
|
delRow(row) {
|
if (this.settingDialogTableData.find(i => i.isVisible === 1)) {
|
return this.$message.info('请先保存或取消本条记录！')
|
}
|
DeleteAnDengType({ andengtypecode: row.code }).then(res => {
|
this.setting()
|
})
|
},
|
handleClose() {
|
this.settingDialogTableData = []
|
},
|
// 返回
|
dialogVisibleCancel() {
|
this.settingDialogVisible = false
|
this.getAnDengTypeSearch()
|
},
|
// 允许关闭点击事件
|
async allowCloseChange() {
|
const data = {
|
wkshopcode: this.$refs.tree.getCurrentKey(),
|
calltypecode: this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].code,
|
enable: this.allowClose ? 'Y' : 'N'
|
}
|
await AnDengResponUserCloseSeave(data)
|
},
|
// 树形选中行切换点击
|
currentTreeChange(val) {
|
this.getAnDengResponUserSearch(this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].name)
|
},
|
// 响应人员点击
|
responseUserClick() {
|
const loading = this.$loading({
|
lock: true,
|
text: '正在加载数据，请稍等...',
|
spinner: 'el-icon-loading',
|
customClass: 'osloading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
|
const data = {
|
wkshopcode: this.$refs.tree.getCurrentKey(),
|
calltypecode: this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].code
|
}
|
AnDengDigoResponUserSearch(data).then(res => {
|
if (res.code === '200') {
|
this.userTree.push({
|
username: '全部',
|
children: res.data
|
})
|
|
res.data.forEach(item => {
|
if (item.flag === 'Y') {
|
this.treeCheckedKey.push(item.usercode)
|
this.userDialogArr.push(item)
|
}
|
})
|
|
setTimeout(() => {
|
loading.close()
|
this.userDialogVisible = true
|
|
this.$nextTick(() => {
|
this.$refs.userTree.setCheckedKeys(this.treeCheckedKey)
|
})
|
}, 1000)
|
}
|
})
|
},
|
handleUserClose() {
|
this.userTree = []
|
this.userDialogArr = []
|
this.treeCheckedKey = []
|
},
|
dialogVisibleUserCancel() {
|
this.userDialogVisible = false
|
},
|
async dialogVisibleUserConfirm() {
|
const data = []
|
|
this.$refs.userTree.getCheckedKeys().forEach(i => {
|
// console.log(i)
|
if (i !== undefined) {
|
data.push({
|
code: i
|
})
|
}
|
})
|
this.$store.state.app.buttonIsDisabled = true
|
const res = await AnDengDigoResponUserSeave(this.$refs.tree.getCurrentKey(), this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].code, this.allowClose ? 'Y' : 'N', data)
|
if (res.code === '200') {
|
// this.$refs.userTree.setCheckedKeys([])
|
this.userDialogVisible = false
|
this.$message.success('保存成功！')
|
this.$store.state.app.buttonIsDisabled = false
|
await this.getAnDengResponUserSearch(this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].name)
|
}
|
},
|
userTagClose(val, tag) {
|
this.treeCheckedKey = this.treeCheckedKey.filter(i => i !== tag.usercode)
|
this.userDialogArr = this.userDialogArr.filter(i => i.usercode !== tag.usercode)
|
this.$refs.userTree.setCheckedKeys(this.treeCheckedKey)
|
},
|
userTreeCheck(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
|
// console.log(obj, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys, 6)
|
this.treeCheckedKey = checkedKeys.filter(i => i !== undefined)
|
this.userTree[0].children.forEach(i => {
|
if (this.treeCheckedKey.includes(i.usercode)) {
|
i.flag = 'Y'
|
} else {
|
i.flag = 'N'
|
}
|
})
|
this.userDialogArr = this.userTree[0].children.filter(i => i.flag === 'Y')
|
},
|
// handleCheckChange(data) {
|
// if (data.children) {
|
// data.children.forEach((item) => {
|
// const node = this.$refs.userTree.getNode(item)
|
// if (!node.visible) {
|
// this.$refs.userTree.setChecked(item, false)
|
// }
|
// })
|
// }
|
// },
|
// 过滤节点
|
filterUserNode(value, data) {
|
if (!value) return true
|
return data.username.indexOf(value) !== -1
|
},
|
// 获取页面高度
|
getHeight() {
|
this.$nextTick(() => {
|
this.mainHeight = window.innerHeight - 85
|
this.contentHeight = this.mainHeight - 142
|
})
|
},
|
tableRowClassName({ row, rowIndex }) {
|
return 'custom-row'
|
}
|
|
}
|
}
|
</script>
|
|
<!--本页面单独样式-->
|
<style lang="scss" scoped>
|
$main_color: #42b983;
|
.body {
|
display: flex;
|
flex-direction: row;
|
}
|
|
.body_left {
|
width: 360px;
|
background-color: #fff;
|
margin: 10px 0;
|
padding: 10px;
|
flex-direction: column;
|
}
|
|
.body_right {
|
width: 100%;
|
background-color: #fff;
|
margin: 10px 0 10px 10px;
|
}
|
|
.pane_top {
|
background-color: #fafafa;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 10px;
|
margin-bottom: 20px;
|
|
.bar {
|
width: 4px;
|
height: 20px;
|
border-radius: 2px;
|
//background-color: $main_color;
|
margin-right: 10px;
|
}
|
}
|
|
.pane_content {
|
background-color: #fafafa;
|
padding: 10px;
|
min-height: 400px;
|
}
|
|
.body_left_tree {
|
::v-deep .is-current > .el-tree-node__content {
|
background-color: #dedcdc !important;
|
font-weight: bolder;
|
//color: #FFFFFF;
|
}
|
}
|
|
::v-deep .el-button--text {
|
font-size: 14px;
|
cursor: pointer;
|
}
|
</style>
|
