文章管理 设备文章

src/views/article/list/detail.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="100px">
+      <el-form-item label="关联设备：">
+        <el-select placeholder="请选择关联设备">
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="文章标题：">
+        <el-input placeholder="请输入文章标题" />
+      </el-form-item>
+      <el-form-item label="文章内容" style="width: 800px">
+        <Editor :height="300" />
+      </el-form-item>
+      <el-form-item label="文章状态：">
+        <el-select placeholder="请选择文章状态">
+          <el-option />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="form-btn">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary">提交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Editor from '@/components/Editor/index'
+export default {
+  components:{
+    Editor
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods:{
+    // 取消
+    cancel(){
+      this.$tab.closeOpenPage("/article/articleList");
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-form{
+  width: 500px;
+}
+</style>

src/views/article/list/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline label-width="100px" size="mini">
+      <el-form-item label="设备：">
+        <el-select placeholder="请选择设备">
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="文章状态：">
+        <el-select placeholder="请选择文章状态">
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        <el-button icon="el-icon-refresh">重置</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="getDetail">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-table :data="tableData">
+      <el-table-column label="文章标题" align="center" />
+      <el-table-column label="设备" align="center" />
+      <el-table-column label="文章状态" align="center" />
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="getDetail(scope.row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData:[{
+        id: 1
+      }]
+    }
+  },
+  methods:{
+    getDetail(row){
+      this.$router.push({
+        path: `/article/articleList/detail`,
+        query: {
+          id: row.id
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>