知识搜索 end

src/components/Layout.vue

@@ -8,8 +8,6 @@
                     <el-menu-item index="path2">path2</el-menu-item>
                 </el-submenu> -->
                 <el-menu-item index="knowledgeSearch">知识搜索</el-menu-item>
-                <el-menu-item index="knowledgeSearch">知识搜索</el-menu-item>
-
                 <!-- <el-submenu index="2">
                     <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                     <el-menu-item index="2-1">选项1</el-menu-item>

src/components/LeeTable.vue

@@ -1,9 +1,11 @@
 <template>
-    <div class="table-container">
-        <el-table stripe border :data="tableData" width="100%" :row-class-name="rowClassName" :height="height">
+    <div class="lee-table">
+        <el-table v-if="tableData.length" stripe border :data="tableData" width="100%" v-loading="loading">
+            <el-table-column align="center" type="index">
+            </el-table-column>
             <template v-for="(item, index) in tableTitle">
                 <slot v-if="item.slot" :name="item.slot"></slot>
-                <el-table-column v-else :key="item.property" :prop="item.property" :label="item.label"
+                <el-table-column align="center" v-else :key="item.property" :prop="item.property" :label="item.label"
                     :min-width="item.minWidth ? item.minWidth : ''" :width="item.width ? item.width : ''">
                 </el-table-column>
             </template>
@@ -14,6 +16,10 @@
 export default {
     name: 'LeeTable',
     props: {
+        loading: {
+            type: Boolean,
+            default: false
+        },
         tableData: { // 表格数据
             type: Array,
             default: () => {
@@ -24,14 +30,7 @@ export default {
             type: Array,
             require: true
         },
-        height: { // 表格高度
-            type: [Number, String],
-            default: '100%'
-        },
-        rowHeight: { // 表格行高
-            type: [Number, String],
-            default: 44
-        }
+
     },
     data() {
         return {
@@ -41,7 +40,9 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-::v-deep .table-container {
-    .cell {}
+.lee-table {}
+::v-deep .el-loading-spinner{
+    left: 50%;
+    transform: translateX(-42px);
 }
 </style>

src/views/KnowledgeSearch/components/DisposalSuggestions.vue

@@ -11,26 +11,12 @@
             <el-form-item label="建议">
                 <el-input v-model="formInline.user" placeholder="建议"></el-input>
             </el-form-item>
-
             <el-form-item>
                 <el-button type="primary" @click="onSearch">查询</el-button>
                 <el-button type="normal" @click="onReset">重置</el-button>
             </el-form-item>
         </el-form>
-
-
-        <el-table :data="tableData" stripe border style="width: 100%" header-cell-class-name="own-cell">
-            <el-table-column align="center" type="index" width="50">
-            </el-table-column>
-            <el-table-column prop="date" align="center" label="序号">
-            </el-table-column>
-            <el-table-column prop="name" align="center" label="问题名称">
-            </el-table-column>
-            <el-table-column prop="name" align="center" label="所属结构">
-            </el-table-column>
-            <el-table-column prop="name" align="center" label="建议">
-            </el-table-column>
-        </el-table>
+        <LeeTable :tableData="tableData" :tableTitle="tableTitle"> </LeeTable>
         <div class=" mt-3 mr-6 flex items-center justify-end">
             <el-pagination background layout="prev, pager, next" :total="21">
             </el-pagination>
@@ -46,42 +32,28 @@ export default {
                 user: '',
                 region: ''
             },
-
-            tableData: [{
-                date: '2016-05-02',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-04',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1517 弄'
-            }, {
-                date: '2016-05-01',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1519 弄'
-            }, {
-                date: '2016-05-03',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1516 弄'
-            }, {
-                date: '2016-05-02',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-04',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1517 弄'
-            }, {
-                date: '2016-05-01',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1519 弄'
-            }, {
-                date: '2016-05-03',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1516 弄'
-            }]
+            tableTitle: [
+                { label: '质量问题名称', property: 'date' },
+                { label: '产品名称', property: 'name' },
+                { label: '产品代号', property: 'date' },
+                { label: '系统名称', property: 'date' },
+                { label: '故障现象', property: 'date' },
+                { label: '技术原因', property: 'date' },
+                { label: '技术措施', property: 'date' },
+                { label: '发生地点', property: 'date' },
+            ],
+            tableData: []
         }
-    }
+    },
+    mounted() {
+        const item = {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+        };
+
+        this.tableData = Array(10).fill(item)
+    },
 };
 </script>
 <style scoped lang="scss">

src/views/KnowledgeSearch/components/FailureCases.vue

@@ -46,31 +46,7 @@
                 <el-button type="normal" @click="onReset">重置</el-button>
             </el-form-item>
         </el-form>
-
-        <el-table :data="tableData" stripe border style="width: 100%" header-cell-class-name="own-cell">
-            <el-table-column align="center" type="index" width="50">
-            </el-table-column>
-            <el-table-column prop="date" align="center" label="质量问题名称">
-            </el-table-column>
-            <el-table-column prop="name" align="center" label="产品编号">
-            </el-table-column>
-            <el-table-column prop="name" align="center" label="产品名称">
-            </el-table-column>
-            <el-table-column prop="name" align="center" label="产品代号">
-            </el-table-column>
-            <el-table-column prop="name" align="center" label="系统名称">
-            </el-table-column>
-            <el-table-column prop="name" align="center" label="故障现象">
-            </el-table-column>
-            <el-table-column prop="name" align="center" label="技术原因">
-            </el-table-column>
-            <el-table-column prop="name" align="center" label="技术措施">
-            </el-table-column>
-            <el-table-column prop="name" align="center" label="发生地点">
-            </el-table-column>
-            <el-table-column prop="address" align="center" label="地址">
-            </el-table-column>
-        </el-table>
+        <LeeTable :loading="true" :tableData="tableData" :tableTitle="tableTitle"> </LeeTable>
         <div class=" mt-3 mr-6 flex items-center justify-end">
             <el-pagination background layout="prev, pager, next" :total="21">
             </el-pagination>
@@ -86,25 +62,28 @@ export default {
                 user: '',
                 region: ''
             },
-            tableData: [{
-                date: '2016-05-02',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-04',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1517 弄'
-            }, {
-                date: '2016-05-01',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1519 弄'
-            }, {
-                date: '2016-05-03',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1516 弄'
-            }]
+            tableTitle: [
+                { label: '质量问题名称', property: 'date' },
+                { label: '产品名称', property: 'name' },
+                { label: '产品代号', property: 'date' },
+                { label: '系统名称', property: 'date' },
+                { label: '故障现象', property: 'date' },
+                { label: '技术原因', property: 'date' },
+                { label: '技术措施', property: 'date' },
+                { label: '发生地点', property: 'date' },
+            ],
+            tableData: []
         }
     },
+    mounted() {
+        const item = {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+        };
+        
+        this.tableData = Array(10).fill(item)
+    },
     methods: {
         onSearch() {
             console.log('submit!');

src/views/KnowledgeSearch/components/FaultTree.vue

@@ -24,26 +24,14 @@
                     <el-button type="normal" @click="onReset">重置</el-button>
                 </el-form-item>
             </el-form>
-
-            <el-table :data="tableData" stripe border style="width: 100%" header-cell-class-name="own-cell">
-                <el-table-column align="center" type="index" width="50">
-                </el-table-column>
-                <el-table-column prop="date" align="center" label="分系统">
-                </el-table-column>
-                <el-table-column prop="name" align="center" label="所属部件">
-                </el-table-column>
-                <el-table-column prop="name" align="center" label="文件名">
-                </el-table-column>
-                <el-table-column prop="name" align="center" label="描述">
-                </el-table-column>
-                <el-table-column prop="name" align="center" label="编辑时间">
-                </el-table-column>
-                <el-table-column align="center" label="查看">
+            <LeeTable :tableData="tableData" :tableTitle="tableTitle">
+                <el-table-column align="center" slot="handle" label="操作">
                     <template slot-scope="scope">
-                        <el-button type="text">故障树模型</el-button>
+                        <el-button type="text">查看</el-button>
                     </template>
                 </el-table-column>
-            </el-table>
+            </LeeTable>
+
             <div class=" mt-3 mr-6 flex items-center justify-end">
                 <el-pagination background layout="prev, pager, next" :total="21">
                 </el-pagination>
@@ -74,41 +62,29 @@ export default {
                     }]
                 }]
             }],
-            tableData: [{
-                date: '2016-05-02',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-04',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1517 弄'
-            }, {
-                date: '2016-05-01',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1519 弄'
-            }, {
-                date: '2016-05-03',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1516 弄'
-            }, {
-                date: '2016-05-02',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-04',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1517 弄'
-            }, {
-                date: '2016-05-01',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1519 弄'
-            }, {
-                date: '2016-05-03',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1516 弄'
-            }]
+            tableTitle: [
+                { label: '质量问题名称', property: 'date' },
+                { label: '产品名称', property: 'name' },
+                { label: '产品代号', property: 'date' },
+                { label: '系统名称', property: 'date' },
+                { label: '故障现象', property: 'date' },
+                { label: '技术原因', property: 'date' },
+                { label: '技术措施', property: 'date' },
+                { label: '发生地点', property: 'date' },
+                {slot:'handle'}
+            ],
+            tableData: []
         }
     },
+    mounted() {
+        const item = {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+        };
+
+        this.tableData = Array(10).fill(item)
+    },
     methods: {
         handleNodeClick(data) {
             console.log(data);

src/views/KnowledgeSearch/index.vue

@@ -12,11 +12,9 @@
                 <DisposalSuggestions></DisposalSuggestions>
             </el-tab-pane>
             <el-tab-pane label="结构信息">
-                <!-- <structuralInformation></structuralInformation> -->
-                <LeeTable :tableData="tableData" :tableTitle="tableTitle"></LeeTable>
+                <structuralInformation></structuralInformation>
             </el-tab-pane>
         </el-tabs>
-
     </div>
 </template>
 <script>