新增在线入库，界面优化

README.md

@@ -4,7 +4,7 @@
 完整注释模板：src/example  
 
 # 克隆
-git clone -b dev http://192.168.2.241:3000/wanghai/psgwxt_bz.git
+git clone -b dev "仓库地址"
 
 # 环境要求
 | 应用名        | 版本号    | 查看版本      |

src/components/Tree/index.vue

@@ -8,7 +8,6 @@
       <el-tree
         ref="tree"
         :data="value"
-        
         show-checkbox
         :node-key="nodeKey"
         :default-expand-all="defaultExpandAll"

src/views/OnlineImport/widgets/DataImport/components/PbsTree.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <el-select style="width:100%" ref='stlectTree' v-model="treeSelectText" placeholder="请选择或者输入工程名称" clearable filterable :filter-method="filterMethod" @clear="clearInput" size="mini">
+      <el-option :value="treeValue.id" :label="treeValue.label" style="max-width: 260px;height: auto;padding:0;">
+        <el-tree :data="datas" :props="defaultProps" :expand-on-click-node="false" node-key="pbsTree" highlight-current @node-click="nodeClick" :filter-node-method="filterNode" ref="tree" />
+      </el-option>
+    </el-select>
+  </div>
+</template>
+<script>
+import request from '@/utils/request'
+export default {
+  name: "commonTree",//显示工程树
+  data() {
+    return {
+      treeSelectText: '',
+      treeValue: {},
+      datas: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    }
+  },
+  created() {
+    this.getPbsTree()
+  },
+  methods: {
+    getPbsTree() {
+      request({
+        method: "get",
+        url: "/tofly-sxgk/structure/list"
+      }).then(res => {
+        const { code, result } = res;
+        if (code === 1) {
+          function formatTree(obj) {
+            const copyedObj = JSON.parse(JSON.stringify(obj)); // 深拷贝源数据
+            return copyedObj.filter((parent) => {
+              const findChildren = copyedObj.filter(
+                (child) => (parent.id === child.pid && child.levelname != "分部工程（专业）")
+              );
+              findChildren.length > 0
+                ? (parent.children = findChildren)
+                : delete (parent.children = []);
+              return parent.pid === null; // 返回顶层，依据实际情况判断这里的返回值
+            });
+          }
+          if (result[0])
+            this.datas = formatTree(result[0].structures);
+        } else {
+          this.$message.error("信息获取失败");
+        }
+      })
+    },
+    // 点击tree节点
+    nodeClick(item) {
+      const { id, name, code } = item
+      this.treeValue.id = id;
+      this.treeValue.label = name;
+      this.treeSelectText = name
+      this.$refs.stlectTree.blur()
+      //项目改变
+      let emitInfo = item
+      this.$emit('changeProjectName', emitInfo)
+    },
+    // 搜索逻辑
+    filterMethod(value) {
+      this.$refs.tree.filter(value)
+    },
+    // tree节点过滤
+    filterNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    clearInput() {
+      this.$refs.tree.filter("")
+      //项目改变
+      this.$emit('changeProjectName', "")
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

src/views/OnlineImport/widgets/DataImport/widget.vue

@@ -2,36 +2,33 @@
   <div>
     <el-form ref='addForm' :model="impForm" size="mini">
       <el-form-item label="项目工程" prop="prjName" class="impForm" :rules="addRules">
-        <el-input v-model="impForm.prjName"></el-input>
+        <pbs-tree style="width:100%;"></pbs-tree>
+        <!-- <el-input v-model="impForm.prjName"></el-input> -->
       </el-form-item>
       <el-form-item label="数据阶段" prop="stage">
         <el-select v-model="impForm.stage" style="width:100%">
           <el-option label="设计" value="SJ"></el-option>
-          <el-option label="普查" value="PC"></el-option>
-          <el-option label="竣工" value="JG"></el-option>
+          <!-- <el-option label="普查" value="PC"></el-option>
+          <el-option label="竣工" value="JG"></el-option> -->
         </el-select>
       </el-form-item>
-      <el-form-item label="图纸名称" prop="paperName">
-        <el-input v-model="impForm.paperName"></el-input>
-      </el-form-item>
-      <!-- <el-form-item label="资料提供单位" prop="paperUnit">
-        <el-input v-model="impForm.paperUnit"></el-input>
-      </el-form-item>
-      <el-form-item label="资料提供人" prop="paperPerson">
-        <el-input v-model="impForm.paperPerson"></el-input>
-      </el-form-item> -->
       <el-form-item label="成果表">
-        <el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" accept=".xls,.xlsx" multiple :limit="2" :before-remove="onBeforeRemove" :on-remove="onRemove" :on-change="onChange" :auto-upload="false" :on-exceed="onExceed">
-          <el-button size="small" type="primary">点击上传</el-button>
+        <el-upload class="eluploadcontainer" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" accept=".xls,.xlsx" multiple :limit="2" :before-remove="onBeforeRemove" :on-remove="onRemove" :on-change="onChange" :auto-upload="false" :on-exceed="onExceed">
+          <el-button slot="trigger" size="small" type="primary">本地文件</el-button>
+          <el-button size="small" type="primary" @click="OnlineAccess">在线获取</el-button>
         </el-upload>
       </el-form-item>
-      <el-form-item label="数据来源" prop="origin">
-        <el-select v-model="impForm.origin" style="width:100%">
-          <el-option label="本地导入" value="local"></el-option>
-          <el-option label="管线宝导入" value="gxbao"></el-option>
-        </el-select>
-      </el-form-item>
       <el-form-item>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-button type="primary" style="width:100%">预览</el-button>
+          </el-col>
+          <el-col :span="12">
+            <el-button type="primary" style="width:100%">提交</el-button>
+          </el-col>
+        </el-row>
+      </el-form-item>
+      <!-- <el-form-item>
         <el-button type="primary" style="width:100%" @click="buildDatasets">一：生成数据集</el-button>
       </el-form-item>
       <el-form-item>
@@ -51,8 +48,50 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" style="width:100%" @click="publishService">七：发布服务</el-button>
-      </el-form-item>
+      </el-form-item> -->
     </el-form>
+    <tf-dialog title="在线获取数据成果" :visible.sync="dialogVisible" width="80%" top="3%">
+      <el-form :inline="true" class="toolbar" size="mini">
+        <el-form-item label="所属区域">
+          <el-select v-model="areaName" filterable clearable placeholder="请选择" size="mini">
+            <el-option v-for="item in prjOptions" :key="item.code" :label="item.name" :value="item.name">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目">
+          <el-select v-model="selectPrjId" filterable clearable placeholder="请选择" size="mini">
+            <el-option v-for="item in optionsoffter" :key="item.key" :label="item.name" :value="item.vule">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="queryPara" clearable placeholder="支持数据名称,上传单位">
+            <el-button slot="append" size="mini" icon="el-icon-search"></el-button>
+
+          </el-input>
+        </el-form-item>
+        <el-form-item label="提交状态">
+          <el-radio-group v-model="radio">
+            <el-radio label="">全部</el-radio>
+            <el-radio label="1">未提交</el-radio>
+            <el-radio label="2">已提交</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-radio-group v-model="radio2">
+            <el-radio label="">全部</el-radio>
+            <el-radio label="2">设计</el-radio>
+            <el-radio label="1">普查</el-radio>
+            <el-radio label="3">竣工</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <!-- 弹出框表单 -->
+      <div style="height:410px">
+        <tf-table @page-change="onPageChange" :columns="tableColumns" :data="onlineRecords" :pagination="pagination">
+        </tf-table>
+      </div>
+    </tf-dialog>
   </div>
 </template>
 
@@ -63,9 +102,12 @@
  */
 import { Vue, Prop, Watch, Component } from 'vue-property-decorator'
 import request from '@/utils/request'
+import PbsTree from './components/PbsTree.vue'
+import { getDefaultPagination } from '@/utils/constant'
+import { IPagination } from '@/api/common'
 @Component({
   name: 'DataImport',
-  components: {}
+  components: { PbsTree }
 })
 export default class DataImport extends Vue {
   impForm = {
@@ -83,6 +125,70 @@ export default class DataImport extends Vue {
     paperUnit: [{ required: true, message: '请输入图纸提供单位', trigger: 'blur' }],
     paperPerson: [{ required: true, message: '请输入图纸提供人', trigger: 'blur' }]
   }
+  /**
+  在线获取弹窗开关
+   */
+  dialogVisible = false
+  radio = ''
+  radio2 = ''
+  areaName = ''
+  selectPrjId = ''
+  queryPara = ''
+  prjOptions = []
+  optionsoffter = [
+    { name: '暂无', vule: '', key: '1' },
+    { name: '全部', vule: '', key: '2' }
+  ]
+  pagination: IPagination = getDefaultPagination()
+  tableColumns = [
+    {
+      prop: 'id',
+      label: 'ID'
+    },
+    {
+      prop: 'areaName',
+      label: '所属区域'
+    },
+    {
+      prop: 'proName',
+      label: '项目'
+    },
+    {
+      prop: 'division',
+      label: '片区'
+    },
+    {
+      prop: 'batchName',
+      label: '数据名称'
+    },
+    {
+      prop: 'dataSource',
+      label: '数据阶段'
+    },
+    {
+      prop: 'submitStatus',
+      label: '提交状态'
+    },
+    {
+      prop: 'detectionUnit',
+      label: '上传单位'
+    },
+    {
+      prop: 'proName',
+      label: '上传人'
+    },
+    {
+      prop: 'updateTime',
+      label: '上传时间'
+    },
+    {
+      slot: 'DownloadBtn'
+    }
+  ]
+  /**
+   * 在线文件列表数据
+   */
+  onlineRecords = []
   /**
    * 上传文件
    */
@@ -186,9 +292,9 @@ export default class DataImport extends Vue {
     request({
       url: '/tofly-lzd-data/data/createNetwork',
       method: 'POST',
-      data:{
-        dataSetPointName: "TF_SJ_PSYS_NODE_B_3D",
-        dataSetLineName: "TF_SJ_PSYS_PIPE_B_3D"
+      data: {
+        dataSetPointName: 'TF_SJ_PSYS_NODE_B_3D',
+        dataSetLineName: 'TF_SJ_PSYS_PIPE_B_3D'
       }
     })
       .then((result) => {
@@ -209,13 +315,12 @@ export default class DataImport extends Vue {
     request({
       url: '/tofly-lzd-data/data/createNetwork',
       method: 'POST',
-      data:{
-        dataSetPointName: "TF_SJ_PSWS_NODE_B_3D",
-        dataSetLineName: "TF_SJ_PSWS_PIPE_B_3D"
+      data: {
+        dataSetPointName: 'TF_SJ_PSWS_NODE_B_3D',
+        dataSetLineName: 'TF_SJ_PSWS_PIPE_B_3D'
       }
     })
       .then((result) => {
-        console.log(result)
         if (result.code === 1) {
           this.$message.success('污水三维网络生成成功')
         }
@@ -274,7 +379,7 @@ export default class DataImport extends Vue {
       .then((result) => {
         console.log(result)
         if (result.code === 1) {
-          this.$message.success('服务发布成功,服务地址为：'+result.result);
+          this.$message.success('服务发布成功,服务地址为：' + result.result)
         }
       })
       .catch((err) => {
@@ -282,8 +387,68 @@ export default class DataImport extends Vue {
         console.log(err)
       })
   }
+  OnlineAccess() {
+    this.dialogVisible = true
+    this.getlist()
+    // const obj = await this.$PortApi.getAreaInfo_api();//公司名称
+    // this.prjOptions = obj.data.result;
+    // console.log(this.prjOptions, '公司名称');
+  }
+  onPageChange(pagination) {
+    this.pagination = { ...this.pagination, ...pagination }
+    this.getlist()
+  }
+  /**
+   * 获取图纸在线表单
+   */
+  getlist() {
+    let params = {
+      submitStatus: this.radio,
+      areaName: this.areaName,
+      proName: '',
+      queryPara: this.queryPara,
+      dataSource: this.radio2,
+      current: this.pagination.current,
+      size: this.pagination.size
+    }
+    request({
+      method: 'get',
+      url: '/tofly-sxgk/outpiper/page',
+      params: params
+    }).then((res) => {
+      console.log(res.data, '在线获取图纸名称')
+      //      pagesizes: [10, 25, 50, 100],
+      // pagesize: 10,
+      // currentPage: 1,
+      // totalNum: 0,
+      const { records, size, total, current } = res.result
+      this.onlineRecords = records
+      this.pagination.size = size
+      this.pagination.current = current
+      this.pagination.total = total
+      let obj = {
+        2: '设计',
+        1: '普查',
+        3: '竣工'
+      }
+      this.onlineRecords = res.data.result.records.map((item) => {
+        Object.keys(item).forEach((val) => (item[val] = item[val] || '暂无'))
+        return {
+          ...item,
+          dataSource: obj[item.dataSource]
+        }
+      })
+    })
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.eluploadcontainer {
+  >>> .el-upload-list {
+    height: 100px;
+    border: 1px solid #333333;
+    margin-top: 10px;
+  }
+}
 </style>