智能手表 表盘管理

src/views/watch/list/detail.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="100px">
+      <el-form-item label="表盘名称：">
+        <el-input placeholder="请输入表盘名称" />
+      </el-form-item>
+      <el-form-item label="表盘类型：">
+        <el-input placeholder="请输入表盘类型" />
+      </el-form-item>
+      <el-form-item label="表盘地址：">
+        <el-row type="flex" justify="space-between">
+          <el-col :span="16">
+            <el-input placeholder="请输入 或 上传表盘图片" />
+          </el-col>
+          <el-col :span="6">
+            <Upload />
+          </el-col>
+        </el-row>
+      </el-form-item>
+      <el-form-item label="表盘图片：">
+        <Upload listType="picture-card" />
+      </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 Upload from '@/components/Upload/index'
+export default {
+  components: {
+    Upload
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    cancel() {
+      this.$tab.closeOpenPage("/watch/watchList");
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.el-form {
+  width: 500px;
+}
+</style>

src/views/watch/list/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline label-width="100px" size="mini">
+      <el-form-item label="表盘ID：">
+        <el-input placeholder="请输入表盘ID" />
+      </el-form-item>
+      <el-form-item label="表盘名称：">
+        <el-input placeholder="请输入表盘名称" />
+      </el-form-item>
+      <el-form-item label="表盘类型：">
+        <el-select placeholder="请选择表盘类型"></el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="el-icon-search" type="primary">搜索</el-button>
+        <el-button icon="el-icon-refresh">重置</el-button>
+        <el-button icon="el-icon-plus" type="primary" plain @click="getCreate">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-table>
+      <el-table-column label="表盘ID" align="center"></el-table-column>
+      <el-table-column label="表盘名称" align="center"></el-table-column>
+      <el-table-column label="表盘图片" align="center">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.pic" :preview-src-list="scope.row.pic" />
+        </template>
+      </el-table-column>
+      <el-table-column label="表盘地址" align="center" show-overflow-tooltip>
+        <template>
+          <el-link :underline="false"></el-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="表盘类型" align="center" />
+      <el-table-column label="操作" align="center">
+        <template>
+          <el-button type="text">编辑</el-button>
+          <el-button type="text">取消推荐</el-button>
+          <el-button type="text">设为推荐</el-button>
+          <el-button type="delete">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods:{
+    // 新增
+    getCreate(){
+      this.$router.push({
+        path: `/watch/watchList/detail`,
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>