From 6b32ec29b1cd3ed12845d543e18da18f8456cdda Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 18 十月 2022 18:18:33 +0800
Subject: [PATCH] 1.安灯设置开发完成
---
src/views/jcsz/adsz.vue | 451 ++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 402 insertions(+), 49 deletions(-)
diff --git a/src/views/jcsz/adsz.vue b/src/views/jcsz/adsz.vue
index 319f824..6d4edf7 100644
--- a/src/views/jcsz/adsz.vue
+++ b/src/views/jcsz/adsz.vue
@@ -12,18 +12,20 @@
/>
<el-tree
ref="tree"
- class="filter-tree"
+ class="filter-tree body_left_tree"
:data="shopTree"
:props="defaultProps"
highlight-current
+ node-key="org_code"
default-expand-all
:style="{height: contentHeight+'px',overflowY:'auto'}"
:filter-node-method="filterNode"
+ @current-change="currentTreeChange"
/>
</div>
<div class="body_right">
- <el-tabs type="border-card">
- <el-tab-pane label="鐢ㄦ埛绠＄悊">
+ <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">
@@ -31,42 +33,30 @@
<div>鍝嶅簲浜哄憳</div>
<el-button
icon="el-icon-circle-plus-outline"
- style="height: 30px;line-height: 30px;color: #42b983;font-size: 22px;padding: 10px"
+ :disabled="allowClose"
+ :style="{color:allowClose?'#6f6e6f':'#42b983'}"
+ style="height: 30px;line-height: 30px;font-size: 22px;padding: 10px"
+ @click="responseUserClick"
/>
</div>
<div>
- <el-checkbox v-model="allowClose">鍏佽鍏抽棴</el-checkbox>
+ <el-checkbox v-model="allowClose" @change="allowCloseChange">鍏佽鍏抽棴</el-checkbox>
</div>
</div>
- <el-empty v-if="tags.length===0" :image-size="200" description="鏆傛棤鏁版嵁" />
+ <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 tags"
- :key="tag.name"
- closable
+ v-for="tag in AnDengResponUserArr"
+ :key="tag.id"
+ :closable="!allowClose"
type="success"
style="margin-right: 10px;margin-bottom: 10px"
- @close="val=>tagClose(val,tag)"
+ @close="val=>tagClose(val,item,tag)"
>
- {{ tag.name }}
+ {{ tag.username }}
</el-tag>
</div>
- </div>
- </el-tab-pane>
- <el-tab-pane label="閰嶇疆绠＄悊">
- <div :style="{height: (contentHeight+51)+'px'}">
- 閰嶇疆绠＄悊
- </div>
- </el-tab-pane>
- <el-tab-pane label="瑙掕壊绠＄悊">
- <div :style="{height: (contentHeight+51)+'px'}">
- 瑙掕壊绠＄悊
- </div>
- </el-tab-pane>
- <el-tab-pane label="瀹氭椂浠诲姟琛ュ伩">
- <div :style="{height: (contentHeight+51)+'px'}">
- 瀹氭椂浠诲姟琛ュ伩
</div>
</el-tab-pane>
</el-tabs>
@@ -79,13 +69,172 @@
</div>
</div>
+ <!-- 鑷畾涔夊懠鍙被鍨�-->
+ <el-dialog
+ title="鑷畾涔夊懠鍙被鍨�"
+ :visible.sync="settingDialogVisible"
+ width="800px"
+ top="15vh"
+ :close-on-click-modal="false"
+ @closed="handleClose"
+ @close="handleClose"
+ >
+ <el-button
+ 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" type="text" @click="saveRow(row)">淇濆瓨</el-button>
+ <el-button v-if="row.isVisible===1" type="text" @click="cancelRow(row)">鍙栨秷</el-button>
+ <!-- <el-button v-if="row.isVisible===0" type="text" @click="editRow(row)">缂栬緫</el-button>-->
+ <el-button v-if="row.isVisible===0" 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 @click="dialogVisibleCancel">杩� 鍥�</el-button>
+ </div>
+ </span>
+ </el-dialog>
+
+ <el-dialog
+ title="鍝嶅簲浜哄憳"
+ :visible.sync="userDialogVisible"
+ width="800px"
+ top="15vh"
+ :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"
+ @close="val=>userTagClose(val,tag)"
+ >
+ {{ tag.username }}
+ </el-tag>
+ </div>
+ <div>
+ <i class="el-icon-s-comment" style="color:#42b983;margin: 20px 10px 20px 0" />浜哄憳锛�
+ </div>
+ <div
+ style=" background-color: #fafafa; padding: 10px; min-height: 420px;"
+ :style="{maxHeight:(contentHeight-300)+'px',overflowY: 'scroll'}"
+ >
+
+ <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 @click="dialogVisibleUserCancel">鍙� 娑�</el-button>
+ <el-button
+ type="primary"
+ :loading="$store.state.app.buttonIsDisabled"
+ :disabled="$store.state.app.buttonIsDisabled"
+ @click="dialogVisibleUserConfirm"
+ >淇� 瀛�</el-button>
+ </div>
+ </span>
+ </el-dialog>
+
</div>
</template>
<script>
import { ShopSearch } from '@/api/dzkb'
-import { AnDengTypeSearch } from '@/api/jcsz'
+import {
+ AddUpdateAnDengType, AnDengDigoResponUserSearch, AnDengDigoResponUserSeave, AnDengResponUserCloseSeave,
+ AnDengResponUserDeleteSeave,
+ AnDengResponUserSearch,
+ AnDengTypeSearch,
+ DeleteAnDengType
+} from '@/api/jcsz'
export default {
name: 'Zzjg',
@@ -100,19 +249,29 @@
children: 'children',
label: 'org_name'
},
- allowClose: true, // 鍏佽鍏抽棴
- tags: [
- { name: '鏍囩涓�' },
- { name: '鏍囩浜�' },
- { name: '鏍囩涓�' },
- { 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() {
@@ -130,34 +289,223 @@
}
})
},
+ // 鑾峰彇宸︿晶杞﹂棿淇℃伅
async getShopSearch() {
- const { data: res } = await ShopSearch()
- this.shopTree = res
+ const res = await ShopSearch()
+ this.shopTree = res.data
+ this.$nextTick(() => {
+ this.$refs.tree.setCurrentKey(this.shopTree[0].org_code) // 榛樿閫変腑鑺傜偣绗竴涓�
+ })
+ return { code: res.code }
},
+ // 鑾峰彇瀹夌伅绫诲瀷
async getAnDengTypeSearch() {
- // const { data: res } = await AnDengTypeSearch()
+ 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.label.indexOf(value) !== -1
+ return data.org_name.indexOf(value) !== -1
},
// 鑷畾涔夊懠鍙被鍨�
- setting() {
+ 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
+ })
},
- // tag鍏抽棴浜嬩欢
- tagClose(val, tag) {
- console.log(val, tag)
+ 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) {
+ 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)
+ }
+ })
+
+ loading.close()
+ this.userDialogVisible = true
+
+ this.$nextTick(() => {
+ this.$refs.userTree.setCheckedKeys(this.treeCheckedKey)
+ })
+ }
+ })
+ },
+ 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'
}
}
@@ -186,7 +534,7 @@
margin: 10px 0 10px 10px;
}
-.pane_top{
+.pane_top {
background-color: #fafafa;
height: 50px;
display: flex;
@@ -194,7 +542,8 @@
justify-content: space-between;
padding: 0 10px;
margin-bottom: 20px;
- .bar{
+
+ .bar {
width: 4px;
height: 20px;
border-radius: 2px;
@@ -202,15 +551,19 @@
margin-right: 10px;
}
}
-.pane_content{
+
+.pane_content {
background-color: #fafafa;
padding: 10px;
min-height: 400px;
}
-::v-deep .is-current>.el-tree-node__content{
- background-color: $main_color;
- font-weight: bolder;
+.body_left_tree {
+ ::v-deep .is-current > .el-tree-node__content {
+ background-color: $main_color !important;
+ font-weight: bolder;
+ color: #FFFFFF;
+ }
}
</style>
@@ -251,7 +604,7 @@
}
::v-deep .el-dialog__body {
- padding: 20px 100px !important;
+ padding: 10px 20px 20px 20px !important;
}
::v-deep .dialogVisibleRoles .el-dialog__body {
--
Gitblit v1.9.3