设备管理 设备文章

src/views/device/article/detail.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="100px" :model="form" :rules="rules" ref="form">
+      <el-form-item label="关联设备：" prop="linkDevice">
+        <el-select v-model="form.linkDevice" multiple placeholder="请选择关联设备">
+          <el-option v-for="item in devOptions" :key="item.value" :label="item.label"
+            :value="item.value.toString()" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="文章标题：" prop="title">
+        <el-input v-model="form.title" placeholder="请输入文章标题" />
+      </el-form-item>
+      <el-form-item label="文章内容：" prop="content">
+        <Editor v-model="form.content" :min-height="250" />
+      </el-form-item>
+      <el-form-item label="背景图：" prop="pic">
+        <Upload listType="picture-card" :url="form.pic" @upload="upload($event, 'pic')" />
+      </el-form-item>
+      <el-form-item label="分享图：" prop="shareIcon">
+        <Upload listType="picture-card" :url="form.shareIcon" @upload="upload($event, 'shareIcon')" />
+      </el-form-item>
+      <el-form-item label="文章状态：" prop="status" v-if="this.form.id">
+        <el-select v-model="form.status" placeholder="请选择文章状态">
+          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
+            :value="item.value" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="form-btn">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="getSubmit">提交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { create, detail, edit } from '@/api/device/article'
+import { devMixin } from '@/mixin/index'
+import { statusMixin } from './mixin'
+import Editor from '@/components/Editor/index'
+import Upload from '@/components/Upload/index.vue'
+export default {
+  mixins: [devMixin, statusMixin],
+  components: {
+    Editor,
+    Upload
+  },
+  data() {
+    return {
+      // 表单
+      form: {
+        linkDevice: []
+      },
+      // 校验
+      rules: {
+        linkDevice: [{
+          required: true, message: '请选择关联设备', trigger: 'change'
+        }],
+        title: [{
+          required: true, message: '请输入文章标题', trigger: 'blur'
+        }],
+        pic: [{
+          required: true, message: '请上传文章背景图', trigger: 'change'
+        }],
+        content: [{
+          required: true, message: '请输入文章内容', trigger: 'blur'
+        }],
+        shareIcon: [{
+          required: true, message: '请上传文章分享图', trigger: 'change'
+        }],
+        status: [{
+          required: true, message: '请选择文章状态', trigger: 'change'
+        }]
+      }
+    }
+  },
+  mounted() {
+    if (this.$route.query.id) {
+      this.form.id = this.$route.query.id
+      this.getList()
+    }
+  },
+  methods: {
+    // 详情
+    getList() {
+      detail({
+        id: this.form.id
+      }).then(res => {
+        if (res.code === 0) {
+          this.form = res.data
+          this.form.linkDevice = res.data.linkDevice.split(',')
+        }
+      })
+    },
+
+    // 上传
+    upload(e, key) {
+      this.form[key] = e.file
+    },
+
+    // 提交
+    getSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.form.linkDevice = this.form.linkDevice.join(',')
+          if (this.form.id) {
+            edit(this.form).then(res => {
+              if (res.code === 0) {
+                this.$message.success('修改成功！')
+                this.cancel()
+              }
+            })
+          } else {
+            create(this.form).then(res => {
+              if (res.code === 0) {
+                this.$message.success('新增成功！')
+                this.cancel()
+              }
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    // 取消
+    cancel() {
+      this.$tab.closeOpenPage("/device/article");
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+  width: 550px;
+}
+</style>

src/views/device/article/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline size="mini">
+      <el-form-item label="设备：">
+        <el-select v-model="form.deviceId" placeholder="请选择设备" clearable>
+          <el-option v-for="item in devOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="文章状态：">
+        <el-select v-model="form.status" placeholder="请选择文章状态" clearable>
+          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
+            :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
+        <el-button type="primary" icon="el-icon-plus" plain @click="getDetail()"
+          v-hasPermi="['device:article:add']">新增</el-button>
+        <el-button type="primary" icon="el-icon-delete" @click="getDelete(deleteList)"
+          :disabled="deleteList.length > 0 ? false : true" v-hasPermi="['device:article:delete']">
+          批量删除
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-table :data="tableData" v-loading="loading" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" align="center" />
+      <el-table-column label="文章标题" prop="title" align="center" />
+      <el-table-column label="设备" prop="linkDevice" align="center" :formatter="devFormatter"
+        show-overflow-tooltip />
+      <el-table-column label="文章状态" prop="status" align="center" :formatter="statusFormatter" />
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="getDetail(scope.row.id)" v-hasPermi="['device:article:edit']">
+            编辑
+          </el-button>
+          <el-button type="delete" @click="getDelete(scope.row)" v-hasPermi="['device:article:delete']">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { list, remove } from '@/api/device/article'
+import { devMixin } from '@/mixin/index'
+import { statusMixin } from './mixin'
+export default {
+  name: 'Article',
+  mixins: [devMixin, statusMixin],
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 表单
+      form: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      // 列表
+      tableData: [],
+      total: 0,
+      // 批量删除
+      deleteList: [],
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    // 列表
+    getList() {
+      this.loading = true
+      list(this.form).then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+          this.loading = false
+        }
+      })
+    },
+    // 搜索
+    getSearch() {
+      this.form.pageNum = 1
+      this.getList()
+    },
+    // 重置
+    getRefresh() {
+      this.form = {
+        pageNum: 1,
+        pageSize: 10
+      }
+      this.getList()
+    },
+    // 新增 / 编辑
+    getDetail(id) {
+      this.$router.push({
+        path: `/device/article/detail`,
+        query: {
+          id: id
+        }
+      })
+    },
+    // 多选
+    handleSelectionChange(val) {
+      this.deleteList = val
+    },
+    // 删除
+    getDelete(row) {
+      let title = ''
+      let ids = ''
+      if (row.length > 0) {
+        title = '批量删除'
+        row.map(i => {
+          ids += i.id + ','
+        })
+        if (ids.length > 0) {
+          ids = ids.substr(0, ids.length - 1)
+        }
+      } else {
+        title = `删除${row.title}`
+        ids = row.id
+      }
+      this.$confirm(`是否${title}?`, '提示', {
+        type: 'warning'
+      }).then(() => {
+        remove({
+          ids: ids
+        }).then(res => {
+          if (res.code === 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      }).catch(() => { })
+    },
+
+    // 字典翻译
+    devFormatter(row) {
+      return row.linkDevice ? row.linkDevice.split(',').map(i => this.selectDictLabel(this.devOptions, i)).join(',') : ''
+    },
+    statusFormatter(row) {
+      return this.selectDictLabel(this.statusOptions, row.status)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/device/article/mixin.js

@@ -0,0 +1,20 @@
+const statusMixin = {
+  data() {
+    return {
+      // 当前状态
+      statusOptions: [{
+          value: 0,
+          label: '上架'
+        },
+        {
+          value: 1,
+          label: '下架'
+        }
+      ]
+    }
+  }
+}
+
+export {
+  statusMixin
+}