art: 第三方接口查询提交

zhangherong

2025-07-31 7b40ccf7afca3382a84fc2905078cec44aa5de7d

 src/views/system/modules/SelectDeviceDrawer.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,265 @@
<template>
  <a-drawer
    :title="title"
    :visible="visible"
    width="500"
    @ok="handleOk"
    @close="handleCancel"
  >

    <a-spin :spinning="loading">
      <!-- showLine -->
      <a-form>
        <a-form-item>
          <a-input-search @search="handleSearch" style="width:100%;" placeholder="检索 ç±»åˆ«ç¼–码/名称" allowClear
                          v-model="searchInput" @change="handleChange"/>
        </a-form-item>
        <a-form-item label="车间层级：">
          <a-tree showLine ref="tree" :expandedKeys.sync="expandedKeys" :autoExpandParent="autoExpandParent"
                  :treeData="treeDataSource" checkable @check="onCheck" v-model="checkedKeys"
                  @expand="onExpand">
            <template slot="title" slot-scope="{ title, parentId, entity, key}">
              <span v-if="title.indexOf(searchValue) > -1">{{ title.substr(0, title.indexOf(searchValue)) }}
                <span class="replaceSearch">{{ searchValue }}</span>
                {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
              </span>
              <span v-else>{{ title }}</span>
            </template>
          </a-tree>
        </a-form-item>
      </a-form>

    </a-spin>


    <div class="drawer-bottom-button">
      <a-dropdown
        style="float: left"
        :trigger="['click']"
        placement="topCenter"
      >
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="2" @click="closeAll">合并所有</a-menu-item>
          <a-menu-item key="3" @click="refreshTree">刷新</a-menu-item>
        </a-menu>
        <a-button>
          æ ‘操作
          <a-icon type="up"/>
        </a-button>
      </a-dropdown>
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">关闭</a-button>
      </a-popconfirm>
      <a-button
        @click="handleOk"
        type="primary"
      >确定
      </a-button>
    </div>

  </a-drawer>
</template>

<script>
  import {
    getAction,
    postAction,
    deleteAction
  } from '@/api/manage'
  import BaseTree from '@/views/mdc/common/BaseTree'
  import DepartTree from '@/views/mdc/base/modules/DepartList/DepartListTree/DepartTree'
  import { mapActions } from 'vuex'

  export default {
    name: 'SelectDeviceDrawer',
    components: {
      BaseTree, DepartTree
    },
    props: {
      editDisable: {
        type: Boolean,
        default() {
          return true
        }
      },
      title: {
        type: String
      }
    },
    data() {
      return {
        searchInput: '',
        cardLoading: false,
        loading: false,
        treeDataSource: [],
        expandedKeys: [],
        checkedKeys: [],
        autoExpandParent: true,
        searchValue: '',
        url: {
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
        },
        dataList: [],
        allTreeKeys: [],
        visible: false,
        dataSource: []
      }
    },
    created() {
      this.queryTreeData()
      this.closeAll()
    },
    methods: {
      ...mapActions(['QueryProduction']),
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },

      queryTreeData() {
        this.loading = true
        this.cardLoading = true
        this.QueryProduction().then(res => {
          if (res.success) {
            this.dataList = []
            this.allTreeKeys = []
            this.getTreeDataSource(res.result)
            this.treeDataSource = res.result
            this.generateList(this.treeDataSource)
            console.log('treeDataSource', this.treeDataSource)
            this.expandedKeys = this.allTreeKeys
          } else {
            this.$message.warn(res.message)
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
      },

      generateList(data) {
        for (let i = 0; i < data.length; i++) {
          const node = data[i]
          const key = node.key
          const title = node.title
          this.dataList.push({
            key,
            title: title
          })
          this.allTreeKeys.push(key)
          if (node.children) {
            this.generateList(node.children)
          }
        }
      },

      handleChange() {
        let search = this.searchInput
        let expandedKeys = this.dataList
          .map(item => {
            if (item.title != null) {
              if (item.title.indexOf(search) > -1) {
                return this.getParentKey(item.key, this.treeDataSource)
              }
              return null
            }
          })
          .filter((item, i, self) => item && self.indexOf(item) === i)
        Object.assign(this, {
          expandedKeys,
          searchValue: search,
          autoExpandParent: true
        })
      },

      handleSearch(value) {
        let search = value
        let expandedKeys = this.dataList
          .map(item => {

            if (item.title != null) {
              if (item.title.indexOf(search) > -1) {
                return this.getParentKey(item.key, this.treeDataSource)
              }
              return null
            }
          })
          .filter((item, i, self) => item && self.indexOf(item) === i)
        Object.assign(this, {
          expandedKeys,
          searchValue: search,
          autoExpandParent: true
        })
      },

      getParentKey(key, tree) {
        let parentKey
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i]
          if (node.children) {
            if (node.children.some(item => item.key === key)) {
              parentKey = node.key
            } else if (
              this.getParentKey(key, node.children)) {
              parentKey = this.getParentKey(key, node.children)
            }
          }
        }
        return parentKey
      },

      getTreeDataSource(data) {
        data.forEach(item => {
          if (item.children && item.children.length > 0) {
            this.getTreeDataSource(item.children)
          }
          item.key = item.equipmentId ? item.equipmentId : item.key
          item.value = item.equipmentId ? item.equipmentId : item.value
        })
      },
      expandAll() {
        this.expandedKeys = this.allTreeKeys
      },
      closeAll() {
        this.expandedKeys = ['-1']
      },
      refreshTree() {
        this.queryTreeData()
      },
      onCheck(value, obj) {
        this.checkedKeys = value
        console.log('obj,', obj)
        this.deviceNodes = obj.checkedNodes.filter(item => item.data.props.equipmentId).map(item => item.data.props.equipmentId)
        console.log(this.deviceNodes)
      },
      handleCancel() {
        this.visible = false
      },
      handleOk() {
        this.$emit('selectFinished', this.deviceNodes)
        this.visible = false
      }

    }
  }
</script>
<style lang="less" scoped>
  .replaceSearch {
    color: #40a9ff;
    font-weight: bold;
    background-color: rgb(204, 204, 204);
  }

  .drawer-bottom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>