更新

src/router/index.js

@@ -9,6 +9,11 @@ const routes = [
     name: 'index',
     component: () => import('../views/index.vue'),
   },
+  {
+    path: '/list',
+    name: 'list',
+    component: () => import('../views/list.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/list.vue

@@ -0,0 +1,167 @@
+<template>
+  <div id="list">
+    <el-row>
+      <el-col :span="24">
+        <div class="w_1200">
+          <el-col :span="24" class="search">
+            <el-input placeholder="请输入内容" v-model="company" class="input-with-select">
+              <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
+            </el-input>
+          </el-col>
+          <el-col :span="24" class="list">
+            <el-table :data="list" style="width: 100%" border>
+              <el-table-column prop="company" label="企业名称" align="center"> </el-table-column>
+              <el-table-column prop="name" label="产品名称" align="center"> </el-table-column>
+              <el-table-column label="产品类型 " align="center">
+                <template v-slot="scoped">
+                  {{ `${scoped.row.type}` === `0` ? '技术' : `${scoped.row.type}` === `1` ? '产品' : `${scoped.row.type}` === `2` ? '服务' : '' }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="state" label="状态" align="center">
+                <template v-slot="scoped">
+                  {{
+                    `${scoped.row.status}` == `0` ? '审核中' : `${scoped.row.status}` == `1` ? '审核通过' : `${scoped.row.status}` == `2` ? '审核拒绝' : '草稿'
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column fixed="right" label="操作" align="center">
+                <template slot-scope="scoped">
+                  <el-tooltip content="审核" placement="bottom" effect="light">
+                    <el-button type="text" size="small" @click="handleEdit(scoped.row.id)">修改</el-button>
+                  </el-tooltip>
+                  <el-tooltip content="删除" placement="bottom" effect="light">
+                    <el-button type="text" size="small" @click="handleDelete(scoped.row.id)">删除</el-button>
+                  </el-tooltip>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+          <el-col :span="24" class="detail">
+            <el-col :span="24" class="text">
+              <el-input v-model="form.company" placeholder="请输入企业名称"></el-input>
+            </el-col>
+            <el-col :span="24" class="text">
+              <el-input v-model="form.name" placeholder="请输入产品名称"></el-input>
+            </el-col>
+            <el-col :span="24" class="text">
+              <el-select v-model="form.type">
+                <el-option label="技术" value="0"></el-option>
+                <el-option label="产品" value="1"></el-option>
+                <el-option label="商务" value="2"></el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="24">
+              <el-button type="primary" @click="onSubmit">提交</el-button>
+            </el-col>
+          </el-col>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: collectproduct } = createNamespacedHelpers('collectproduct');
+export default {
+  name: 'list',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      list: [],
+      company: '',
+      form: {},
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...collectproduct(['query', 'fetch', 'create', 'update', 'delete']),
+    // 查询
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      if (this.company) {
+        let res = await this.query({ skip, limit, company: this.company, ...info });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+        }
+      } else {
+        let res = await this.query({ skip, limit, ...info });
+        if (this.$checkRes(res)) {
+          this.$set(this, `list`, res.data);
+        }
+      }
+    },
+    // 添加create&修改update
+    async onSubmit() {
+      let data = this.form;
+      if (data.id) {
+        let res = await this.update(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+          });
+        }
+      } else {
+        let res = await this.create(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '添加成功',
+            type: 'success',
+          });
+        }
+      }
+      this.form = {};
+      this.search();
+    },
+    // 修改查详情fetch
+    async handleEdit(id) {
+      let res = await this.fetch(id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `form`, res.data);
+      }
+    },
+    // 删除delete
+    async handleDelete(id) {
+      let res = await this.delete(id);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+        });
+        this.search();
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.search {
+  margin: 15px 0;
+}
+.list {
+  margin: 15px 0;
+}
+.detail {
+  margin: 15px 0;
+  .text {
+    margin: 10px 0;
+  }
+}
+</style>