设备列表 设备添加

src/api/device.js

+import request from '@/utils/request'
+/**
+ * 获取设备列表
+ * @param {*} p
+ * @param {*} c
+ */
+export function getDeviceList(p = 1, c = 20) {
+  return request({
+    url: '/equipmentShop/get/list',
+    method: 'post',
+    data: {
+    },
+    params: {
+      p, c
+    }
+  })
+}
+/**
+ *
+ * @param {*} equipmentShopId
+ * 获取设备详情
+ */
+export function getDetail(equipmentShopId) {
+  return request({
+    url: `/equipmentShop/get/info/${equipmentShopId}`,
+    method: 'get'
+  })
+}
+/**
+ * 删除设备
+ * @param {*} equipmentShopId
+ */
+export function delDevice(equipmentShopId) {
+  return request({
+    url: `/equipmentShop/del/${equipmentShopId}`,
+    method: 'get'
+  })
+}
+
+/**
+ * 更新设备信息
+ * @param {*} data
+ */
+export function updateDevice(data = {}) {
+  console.log(data)
+  return request({
+    url: `/equipmentShop/update/info`,
+    method: 'post',
+    data: data
+  })
+}
+export function addDevice(data = {}) {
+  return request({
+    url: `/equipmentShop/add`,
+    method: 'post',
+    data: data
+  })
+}
+export function uploadUrl(data = {}) {
+  return process.env.VUE_APP_BASE_API + '/common/upload/resource'
+}

src/components/Tinymce/index.vue

@@ -6,7 +6,6 @@
     </div>
   </div>
 </template>
-
 <script>
 /**
  * docs:

src/router/modules/device.js

@@ -7,6 +7,7 @@ const DeviceRouter = {
   component: Layout,
   redirect: '/device/complex-table',
   name: 'Device',
+  alwaysShow: true,
   meta: {
     title: '设备管理',
     icon: 'table'
@@ -14,9 +15,22 @@ const DeviceRouter = {
   children: [
     {
       path: 'list',
-      component: () => import('@/views/table/complex-table'),
-      name: 'DynamicTable',
+      component: () => import('@/views/device/index.vue'),
+      name: 'DeviceList',
       meta: { title: '设备列表' }
+    },
+    {
+      path: 'add',
+      component: () => import('@/views/device/add.vue'),
+      name: 'DeviceAdd',
+      meta: { title: '添加设备' }
+    },
+    {
+      path: 'detail',
+      hidden: true,
+      component: () => import('@/views/device/add.vue'),
+      name: 'DeviceDetail',
+      meta: { title: '设备详情' }
     }
   ]
 }

src/utils/request.js

@@ -48,7 +48,7 @@ service.interceptors.response.use(
     // if the custom code is not 20000, it is judged as an error.
     if (res.code !== '0' && res.code) {
       Message({
-        message: res.message || ' response Error',
+        message: res.msg || ' response Error',
         type: 'error',
         duration: 5 * 1000
       })

src/views/device/add.vue

+<template>
+  <div class="app-container">
+    <!-- <div class="filter-container">
+    </div> -->
+    <div>
+      <el-form
+        ref="dataForm"
+        :rules="rules"
+        :model="temp"
+        label-position="left"
+        label-width="100px"
+        style="width: 400px; margin-left:50px;"
+      >
+        <el-form-item
+          label="设备名称"
+          prop="equipmentName"
+        >
+          <el-input
+            v-model="temp.equipmentName"
+            placeholder="请输入设备名称"
+          />
+        </el-form-item>
+        <el-form-item
+          label="设备金额"
+          prop="equipmentIntro"
+        >
+          <el-input-number
+            v-model="temp.equipmentPrice"
+            controls-position="right"
+            :min="0.01"
+            :max="99999999"
+            placeholder="请输入设备金额"
+          />
+        </el-form-item>
+        <el-form-item
+          label="设备摘要"
+          prop="equipmentIntro"
+        >
+          <el-input
+            v-model="temp.equipmentIntro"
+            placeholder="请输入设备摘要不超过10个字"
+          />
+          <div>最多填写10个字</div>
+        </el-form-item>
+        <el-form-item
+          label="上传设备封面"
+          prop="equipmentUrl"
+        >
+          <el-upload
+            class="upload-demo"
+            drag
+            name="resource"
+            accept="image/*"
+            :show-file-list="true"
+            :on-success="uploadZipSuccess"
+            :action="templateUploadZipUrl"
+          >
+            <i class="el-icon-upload" />
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          </el-upload>
+          <img style="width: 200px;" :src="temp.equipmentUrl" alt="">
+        </el-form-item>
+        <el-form-item
+          label="设备详情"
+          prop="equipmentDetails"
+        >
+          <Tinymce v-model="temp.equipmentDetails" style="width: 600px" />
+        </el-form-item>
+      </el-form>
+      <div>
+        <el-button
+          style="margin-left: 10px;"
+          type="primary"
+          @click="createData"
+        >
+          保存
+        </el-button>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  addDevice,
+  updateDevice,
+  getDetail,
+  uploadUrl
+} from '@/api/device'
+import Tinymce from '@/components/Tinymce'
+import waves from '@/directive/waves' // waves directive
+
+export default {
+  name: 'ComplexTable',
+  directives: { waves },
+  components: {
+    Tinymce
+  },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      typeList: null,
+      tagsList: null,
+      showStatus: this.$store.state.app.showStatus,
+      templateEnvironment: this.$store.state.app.templateEnvironment,
+      templateUploadZipUrl: uploadUrl(),
+      listQuery: {
+        page: 1,
+        limit: 20,
+        typeId: undefined,
+        title: '',
+        tagId: undefined,
+        sort: '+id'
+      },
+      templateId: '',
+      sortOptions: [
+        { label: 'ID Ascending', key: '+id' },
+        { label: 'ID Descending', key: '-id' }
+      ],
+      statusOptions: ['published', 'draft', 'deleted'],
+      showReviewer: false,
+      temp: {
+        equipmentName: '',
+        equipmentIntro: '',
+        equipmentShopId: '',
+        equipmentUrl: '',
+        equipmentPrice: '',
+        equipmentDetails: ''
+      },
+      dialogFormVisible: true,
+      dialogStatus: '',
+      textMap: {
+        update: 'Edit',
+        create: 'Create'
+      },
+      dialogPvVisible: false,
+      pvData: [],
+      rules: {
+        equipmentName: [
+          {
+            required: true,
+            message: 'equipmentName is required',
+            trigger: 'change'
+          }
+        ],
+        equipmentIntro: [
+          {
+            required: true,
+            message: 'equipmentIntro is required',
+            trigger: 'change'
+          }
+        ],
+        equipmentDetails: [
+          {
+            required: true,
+            message: 'equipmentDetails is required',
+            trigger: 'change'
+          }
+        ],
+        equipmentPrice: [
+          {
+            required: true,
+            message: 'equipmentPrice is required',
+            trigger: 'change'
+          }
+        ]
+      },
+      downloadLoading: false
+    }
+  },
+  created() {
+    this.equipmentShopId = this.$route.query.equipmentShopId
+    this.getTempalteDetail()
+  },
+  methods: {
+    getTempalteDetail() {
+      const id = this.$route.query.equipmentShopId
+      if (id) {
+        getDetail(this.$route.query.equipmentShopId).then(response => {
+          const tempData = JSON.parse(JSON.stringify(response))
+          this.temp = Object.assign(this.temp, tempData)
+          console.log(response)
+        })
+      }
+    },
+    uploadZipSuccess(e) {
+      if (e.code && e.code !== '0') {
+        this.$message.error(e.msg)
+      } else {
+        this.$message('上传成功')
+        this.temp.equipmentUrl = e.data
+        console.log(this.temp)
+      }
+      console.log(e)
+    },
+    resetTemp() {
+      this.temp = {
+        id: undefined,
+        importance: 1,
+        remark: '',
+        timestamp: new Date(),
+        title: '',
+        status: 'published',
+        type: ''
+      }
+    },
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          const uploadTemp = Object.assign({}, this.temp)
+
+          if (this.equipmentShopId) {
+            updateDevice(uploadTemp).then(res => {
+              this.$notify({
+                title: 'Success',
+                message: 'Update Successfully',
+                type: 'success',
+                duration: 2000
+              })
+              this.getTempalteDetail()
+              this.$router.back()
+            })
+          } else {
+            addDevice(uploadTemp).then(() => {
+              this.$notify({
+                title: 'Success',
+                message: 'Created Successfully',
+                type: 'success',
+                duration: 2000
+              })
+              this.$router.back()
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/views/device/index.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px;"
+        type="primary"
+        @click="handleCreate"
+      >
+        添加设备
+      </el-button>
+
+    </div>
+
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;"
+      @sort-change="sortChange"
+    >
+      <el-table-column
+        label="序号"
+        prop="id"
+        type="index"
+        align="center"
+        width="80"
+        :class-name="getSortClass('id')"
+      >
+        <!-- <template slot-scope="scope">
+          <span>{{ scope.index }}</span>
+        </template> -->
+      </el-table-column>
+      <el-table-column
+        label="设备名称"
+        width="auto"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <span>{{ scope.row.equipmentName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="设备图片"
+        width="auto"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <img :src="scope.row.equipmentUrl" :alt="scope.row.equipmentUrl" style="width: 100px;">
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="设备摘要"
+        width="auto"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <span>{{ scope.row.equipmentIntro }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="价格"
+        class-name="status-col"
+        width="100"
+      >
+        <template slot-scope="{row}">
+          {{ row.equipmentPrice }} 元
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        width="auto"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="{row}">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="handleUpdate(row)"
+          >
+            查看
+          </el-button>
+          <el-button
+            v-if="row.status!='deleted'"
+            size="mini"
+            type="danger"
+            @click="handleDelete(row)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.limit"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { getDeviceList, delDevice } from '@/api/device'
+import waves from '@/directive/waves' // waves directive
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+
+export default {
+  name: 'ComplexTable',
+  components: { Pagination },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        importance: undefined,
+        title: undefined,
+        type: undefined,
+        sort: '+id'
+      },
+      temp: {
+        typeMenuOrde: 0,
+        typeMenuName: ''
+      },
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '创建'
+      },
+      dialogPvVisible: false,
+      pvData: []
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      getDeviceList(this.listQuery.page, this.listQuery.limit)
+        .then(response => {
+          this.list = response.list
+          this.total = response.count
+
+          // Just to simulate the time of the request
+          setTimeout(() => {
+            this.listLoading = false
+          }, 1.5 * 1000)
+        })
+        .catch(() => {
+          console.log('cathch')
+          this.listLoading = false
+        })
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleModifyStatus(row, status) {
+      this.$message({
+        message: '操作Success',
+        type: 'success'
+      })
+      row.status = status
+    },
+    sortChange(data) {
+      const { prop, order } = data
+      if (prop === 'id') {
+        this.sortByID(order)
+      }
+    },
+    sortByID(order) {
+      if (order === 'ascending') {
+        this.listQuery.sort = '+id'
+      } else {
+        this.listQuery.sort = '-id'
+      }
+      this.handleFilter()
+    },
+    resetTemp() {
+      this.temp = {
+        typeMenuName: '',
+        typeMenuOrder: 0
+      }
+    },
+    handleCreate() {
+      // this.resetTemp()
+      // this.dialogStatus = 'create'
+      // this.dialogFormVisible = true
+      // this.$nextTick(() => {
+      //   this.$refs['dataForm'].clearValidate()
+      // })
+      this.$router.push({
+        name: 'DeviceAdd'
+      })
+    },
+    createData() {
+
+    },
+    handleUpdate(row) {
+      this.$router.push({
+        name: 'DeviceDetail',
+        query: {
+          equipmentShopId: row.equipmentShopId
+        }
+      })
+    },
+    handleDelete(row) {
+      this.$confirm('此操作将删除该设备, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          delDevice(row.equipmentShopId).then(() => {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            })
+            this.getList()
+          })
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+    },
+    getSortClass: function(key) {
+      const sort = this.listQuery.sort
+      return sort === `+${key}`
+        ? 'ascending'
+        : sort === `-${key}`
+          ? 'descending'
+          : ''
+    }
+  }
+}
+</script>