弹窗组件修改、创建设备树组件

src/components/module_ems/UEquipmentTree/UEquipmentTree.vue

@@ -0,0 +1,144 @@
+<template>
+  <a-card :bordered="false">
+    <!-- <div class="tree">
+    </div> -->
+    <div>
+      <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
+      <a-tree
+        :expanded-keys="expandedKeys"
+        auto-expand-parent
+        :tree-data="tpmTreeData"
+        @expand="onExpand"
+        :replace-fields="replaceFields"
+        :filter-tree-node="filterTreeNode"
+        @select="selectNode"
+        >
+        <!-- <template slot="title" slot-scope="{ title }">
+          <span v-if="name.indexOf(searchValue) > -1">
+          {{ name.substr(0, name.indexOf(searchValue)) }}
+          <span style="color: #f50">{{ searchValue }}</span>
+          {{ name.substr(name.indexOf(searchValue) + searchValue.length) }}
+          </span>
+          <span v-else>{{ title }}</span>
+        </template> -->
+      </a-tree>
+    </div>
+  </a-card>
+</template>
+
+<script>
+  import { getAction } from '@api/manage'
+  export default({
+    name: 'DeviceList',
+    components: {
+    },
+    data () {
+      return {
+        expandedKeys: [],
+        searchValue: '',
+        autoExpandParent: true,
+        tpmListData: [], // 原始数据
+        tpmTreeData: [], // 树形列表使用数据
+        replaceFields: {
+          children: 'children',
+          title: 'name',
+        },
+      }
+    },
+    created() {
+      this.getTpmTreeData()
+    },
+    methods: {
+      getTpmTreeData(){
+        getAction(`/tpmEquipmentTree/tpmEquipmentTree/listtreeandequip`).then(res=>{
+          if (res.success) {
+            // 防止res.result对tpmListData造成地址赋值的问题
+            this.tpmListData = JSON.parse(JSON.stringify(res.result))
+            this.tpmTreeData = this.handleTree(res.result, "id", "parentid")
+            console.log(this.tpmTreeData)
+          } else {
+            
+          }
+        })
+      },
+      filterTreeNode(node) {
+        // console.log(node)
+        // if (!inputValue) return true;
+        return node.title.indexOf('设备') !== -1;
+      },
+      onExpand(expandedKeys) {
+        this.expandedKeys = expandedKeys;
+        this.autoExpandParent = false;
+      },
+      onChange(e) {
+        const value = e.target.value;
+        // 筛选后数据
+        var filterData = []
+        // 筛选符合条件的数据：包含当前搜索的项
+        console.log(this.tpmListData)
+        filterData = this.tpmListData.filter(item => (item.name.indexOf(value) !== -1))
+        // var data = []
+        // filterData.forEach(item => {
+        //   var arr = this.tpmListData.filter(data => item.parentid === data.id)
+        //   console.log('父级', arr)
+        //   // filterData = [...filterData, ...arr]
+        // })
+        // 循环寻找父级
+        // console.log(this.findParents(this.tpmTreeData, '287813167808513'))
+
+        
+
+        
+        this.tpmTreeData = this.handleTree(filterData, "id", "parentid")
+        // const expandedKeys = dataList.map(item => {
+        //   if (item.name.indexOf(value) > -1) {
+        //       // return getParentKey(item.key, gData);
+        //       return this.filterNode(item.key, gData);
+        //   }
+        //   return null;
+        // }).filter((item, i, self) => item && self.indexOf(item) === i);
+        // Object.assign(this, {
+        //   expandedKeys,
+        //   searchValue: value,
+        //   autoExpandParent: true,
+        // });
+      },
+      // findParents(treeData,id){
+      //   let allparents = []
+      //   if(treeData.length==0){
+      //     return 
+      //   }
+
+      //   let findele = (data,id) => {
+      //     if(!id) return
+      //     data.forEach((item,index) => {
+      //       if(item.id == id){
+      //         allparents.unshift(item.id)
+      //         findele(treeData,item.parentid)
+
+      //       }else{
+      //         if(!!item.children){
+      //             findele(item.children,id)
+      //         }
+              
+      //       }
+      //     })
+      //   }
+
+      //   findele(treeData,id)
+      //   return allparents
+
+      // },
+      selectNode(selectedKeys, e){
+        this.$emit('select', selectedKeys, e)
+      },
+    },
+  })
+</script>
+
+<style scoped>
+.tree{
+  height: calc(100vh - 185px);
+  width: 100%;
+}
+</style>

src/components/module_ems/UModal/UModal.vue

@@ -68,7 +68,7 @@ export default {
       // 内容填满显示
       contentFull: {
         type: Boolean,
-        default: true
+        default: false
       },
       title: {
         type: String,

src/components/module_ems/index.js

@@ -1,8 +1,10 @@
 import UModal from './UModal'
+import UEquipmentTree from './UEquipmentTree/UEquipmentTree'
 
 export default {
   install(Vue) {
     Vue.use(UModal)
+    Vue.component('UEquipmentTree', UEquipmentTree)
 
     //注册全局js函数和变量
     Vue.prototype.$UModal = UModal

src/views/module_cmms/inspectContent/InspectContentList.vue

@@ -1,121 +1,128 @@
 <template>
   <a-card :bordered="false">
-    <!-- 查询区域 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="24">
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="巡检内容名称">
-              <a-input placeholder="请输入巡检内容名称" v-model="queryParam.contentname"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="设备id">
-              <a-input placeholder="请输入设备id" v-model="queryParam.equipmentid"></a-input>
-            </a-form-item>
-          </a-col>
-          <template v-if="toggleSearchStatus">
-            <a-col :xl="6" :lg="7" :md="8" :sm="24">
-              <a-form-item label="状态">
-                <a-input placeholder="请选择状态" v-model="queryParam.status"></a-input>
-              </a-form-item>
-            </a-col>
-          </template>
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-              <a @click="handleToggleSearch" style="margin-left: 8px">
-                {{ toggleSearchStatus ? '收起' : '展开' }}
-                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
-              </a>
-            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-    <!-- 查询区域-END -->
+    <a-row >
+      <a-col :span="4">
+        <u-equipment-tree @select="selectEquipment"></u-equipment-tree>
+      </a-col>
+      <a-col :span="20">
+        <!-- 查询区域 -->
+        <div class="table-page-search-wrapper">
+          <a-form layout="inline" @keyup.enter.native="searchQuery">
+            <a-row :gutter="24">
+              <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                <a-form-item label="巡检内容名称">
+                  <a-input placeholder="请输入巡检内容名称" v-model="queryParam.contentname"></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                <a-form-item label="设备id">
+                  <a-input placeholder="请输入设备id" v-model="queryParam.equipmentid"></a-input>
+                </a-form-item>
+              </a-col>
+              <template v-if="toggleSearchStatus">
+                <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                  <a-form-item label="状态">
+                    <a-input placeholder="请选择状态" v-model="queryParam.status"></a-input>
+                  </a-form-item>
+                </a-col>
+              </template>
+              <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+                  <a @click="handleToggleSearch" style="margin-left: 8px">
+                    {{ toggleSearchStatus ? '收起' : '展开' }}
+                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+                  </a>
+                </span>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+        <!-- 查询区域-END -->
 
-    <!-- 操作按钮区域 -->
-    <div class="table-operator">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
-      <a-button type="primary" icon="download" @click="handleExportXls('巡检内容')">导出</a-button>
-      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
-        <a-button type="primary" icon="import">导入</a-button>
-      </a-upload>
-      <!-- 高级查询区域 -->
-      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
-      <a-dropdown v-if="selectedRowKeys.length > 0">
-        <a-menu slot="overlay">
-          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
-        </a-menu>
-        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
-      </a-dropdown>
-    </div>
+        <!-- 操作按钮区域 -->
+        <div class="table-operator">
+          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+          <a-button type="primary" icon="download" @click="handleExportXls('巡检内容')">导出</a-button>
+          <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+            <a-button type="primary" icon="import">导入</a-button>
+          </a-upload>
+          <!-- 高级查询区域 -->
+          <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
+          <a-dropdown v-if="selectedRowKeys.length > 0">
+            <a-menu slot="overlay">
+              <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
+            </a-menu>
+            <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
+          </a-dropdown>
+        </div>
 
-    <!-- table区域-begin -->
-    <div>
-      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
-        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
-      </div>
+        <!-- table区域-begin -->
+        <div>
+          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
+            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+          </div>
 
-      <a-table
-        ref="table"
-        size="middle"
-        :scroll="{x:true}"
-        bordered
-        rowKey="id"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        class="j-table-force-nowrap"
-        @change="handleTableChange">
+          <a-table
+            ref="table"
+            size="middle"
+            :scroll="{x:true}"
+            bordered
+            rowKey="id"
+            :columns="columns"
+            :dataSource="dataSource"
+            :pagination="ipagination"
+            :loading="loading"
+            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+            class="j-table-force-nowrap"
+            @change="handleTableChange">
 
-        <template slot="htmlSlot" slot-scope="text">
-          <div v-html="text"></div>
-        </template>
-        <template slot="imgSlot" slot-scope="text,record">
-          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
-          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
-        </template>
-        <template slot="fileSlot" slot-scope="text">
-          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
-          <a-button
-            v-else
-            :ghost="true"
-            type="primary"
-            icon="download"
-            size="small"
-            @click="downloadFile(text)">
-            下载
-          </a-button>
-        </template>
+            <template slot="htmlSlot" slot-scope="text">
+              <div v-html="text"></div>
+            </template>
+            <template slot="imgSlot" slot-scope="text,record">
+              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
+              <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
+            </template>
+            <template slot="fileSlot" slot-scope="text">
+              <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+              <a-button
+                v-else
+                :ghost="true"
+                type="primary"
+                icon="download"
+                size="small"
+                @click="downloadFile(text)">
+                下载
+              </a-button>
+            </template>
 
-        <span slot="action" slot-scope="text, record">
-          <a @click="handleEdit(record)">编辑</a>
+            <span slot="action" slot-scope="text, record">
+              <a @click="handleEdit(record)">编辑</a>
 
-          <a-divider type="vertical" />
-          <a-dropdown>
-            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
-            <a-menu slot="overlay">
-              <a-menu-item>
-                <a @click="handleDetail(record)">详情</a>
-              </a-menu-item>
-              <a-menu-item>
-                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
-                  <a>删除</a>
-                </a-popconfirm>
-              </a-menu-item>
-            </a-menu>
-          </a-dropdown>
-        </span>
+              <a-divider type="vertical" />
+              <a-dropdown>
+                <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
+                <a-menu slot="overlay">
+                  <a-menu-item>
+                    <a @click="handleDetail(record)">详情</a>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+                      <a>删除</a>
+                    </a-popconfirm>
+                  </a-menu-item>
+                </a-menu>
+              </a-dropdown>
+            </span>
 
-      </a-table>
-    </div>
+          </a-table>
+        </div>
 
+      </a-col>
+    </a-row>
     <inspect-content-modal ref="modalForm" @ok="modalFormOk"></inspect-content-modal>
   </a-card>
 </template>
@@ -139,7 +146,7 @@
         // 表头
         columns: [
           {
-            title: '#',
+            title: '序号',
             dataIndex: '',
             key:'rowIndex',
             width:60,
@@ -203,6 +210,9 @@
       },
     },
     methods: {
+      selectEquipment(selectedKeys, e){
+        console.log(selectedKeys, e)
+      },
       initDictConfig(){
       },
       getSuperFieldList(){

src/views/module_cmms/inspectContent/modules/InspectContentModal.vue

@@ -2,7 +2,6 @@
   <u-modal
     :title="title"
     :visible.sync="visible"
-    contentFull
     @ok="handleOk"
     @cancel="handleCancel">
     <inspect-content-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></inspect-content-form>