1.看板修改

小小儁爺

2025-03-11 c26deaa0190c0ed42b398f3e5696013127a6c10f

 src/views/basicSettings/installLampList.vue

@@ -1,598 +1,603 @@
<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()
},
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: []// 树形复选框选中的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>