From 86e5ff7028168bf18b5d3846022ebeac09aa4d4f Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期四, 05 九月 2024 17:11:19 +0800
Subject: [PATCH] 1.处理页面表格错位问题 引入activated() 事件
---
src/views/basicSettings/installLampList.vue | 1196 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 598 insertions(+), 598 deletions(-)
diff --git a/src/views/basicSettings/installLampList.vue b/src/views/basicSettings/installLampList.vue
index 0e6fe44..40ec4e7 100644
--- a/src/views/basicSettings/installLampList.vue
+++ b/src/views/basicSettings/installLampList.vue
@@ -1,598 +1,598 @@
-<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: []// 鏍戝舰澶嶉�夋閫変腑鐨剈sercode
-
- }
- },
- watch: {
- filterText(val) {
- this.$refs.tree.filter(val)
- },
- filterUserText(val) {
- this.$refs.userTree.filter(val)
- }
- },
- 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>
+<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: []// 鏍戝舰澶嶉�夋閫変腑鐨剈sercode
+
+ }
+ },
+ watch: {
+ filterText(val) {
+ this.$refs.tree.filter(val)
+ },
+ filterUserText(val) {
+ this.$refs.userTree.filter(val)
+ }
+ },
+ activated() {
window.addEventListener('resize', this.getHeight)
this.getHeight()
},
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>
--
Gitblit v1.9.3