内容库版本

src/router/index.js

@@ -17,6 +17,7 @@ import keywordLibraryRouter from './modules/keywordLibrary'
 import memberRouter from './modules/member'
 import mallProtraitRouter from './modules/mallPortrait'
 import serviceSettlement from './modules/serviceSettlement'
+import dataBase from './modules/database'
 // import tableRouter from './modules/table'
 // import nestedRouter from './modules/nested'
 
@@ -105,7 +106,8 @@ export const asyncRoutes = [
   memberRouter,
   keywordLibraryRouter,
   mallProtraitRouter,
-  serviceSettlement
+  serviceSettlement,
+  dataBase
 ]
 
 /**

src/router/modules/database.js

@@ -0,0 +1,57 @@
+import Layout from '@/layout'
+
+export default {
+  path: '/database',
+  component: Layout,
+  meta: { title: '内容库', icon: 'link' },
+  name: 'Database',
+  redirect: '/database/store-list',
+  alwaysShow: true,
+  children: [
+    {
+      path: 'store-list',
+      name: 'StoreList',
+      meta: { title: '商品列表', icon: 'link' },
+      redirect: '/database/store-list/list',
+      component: () => import('@/views/index'),
+      children: [
+        {
+          path: 'list',
+          name: 'List',
+          component: () => import('@/views/dataBase/store-list/index.vue'),
+          meta: { title: '商品列表', activeMenu: '/database/store-list' }
+        },
+        {
+          path: 'edit',
+          name: 'StoreEdit',
+          component: () => import('@/views/dataBase/store-list/edit.vue'),
+          meta: { title: '商品编辑', activeMenu: '/database/store-list' }
+        },
+        {
+          path: 'data-manage',
+          hidden: true,
+          component: () => import('@/views/index'),
+          name: 'DataManage',
+          redirect: '/database/store-list/data-manage/list',
+          meta: { title: '资料管理', noCache: true, activeMenu: '/database/store-list' },
+          children: [
+            {
+              path: 'edit',
+              hidden: true,
+              component: () => import('@/views/dataBase/store-list/data-management/edit.vue'),
+              name: 'DataManageEdit',
+              meta: { title: '资料编辑', noCache: true, activeMenu: '/database/store-list' }
+            },
+            {
+              path: 'list',
+              hidden: true,
+              component: () => import('@/views/dataBase/store-list/data-management/list.vue'),
+              name: 'DataManageList',
+              meta: { title: '资料列表', noCache: true, activeMenu: '/database/store-list' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

src/views/dataBase/components/dataManageTab.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane
+        v-for="i in dataManageListType"
+        :key="i.id"
+        :label="i.value"
+        :name="i.id"
+      />
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import databaseMixin from '../mixins/index'
+
+export default {
+  mixins: [databaseMixin],
+  data() {
+    return {
+      activeName: '1'
+    }
+  },
+  watch: {
+    activeName: {
+      handler(val) {
+        if (val) {
+          this.$emit('change', val)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-tabs__nav-wrap::after {
+  background: none;
+}
+</style>

src/views/dataBase/components/dialogTable.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="supplier-list-selector">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>商品编号:</span>
+        <el-input v-model="listQuery.name" size="mini" placeholder="商品编号" @keyup.enter.native="filterList" />
+      </div>
+      <div class="filter-control">
+        <span>商品名称:</span>
+        <el-input v-model="listQuery.name" size="mini" placeholder="商品名称" @keyup.enter.native="filterList" />
+      </div>
+      <div class="filter-control">
+        <span>供应商名称:</span>
+        <el-input v-model="listQuery.name" size="mini" placeholder="供应商名称" @keyup.enter.native="filterList" />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" size="mini" @click="filterList">查询</el-button>
+      </div>
+    </div>
+    <el-table
+      ref="multipleTable"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      header-row-class-name="tableHeader"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column prop="id" label="商品ID" width="55" align="center" />
+      <el-table-column prop="name" label="商品图片" align="center" />
+      <el-table-column prop="serviceLevel" label="商品名称" align="center" />
+      <el-table-column prop="contractStartDate" label="供应商名称" align="center" />
+    </el-table>
+    <!-- 页码 -->
+    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+    <div class="control-footer">
+      <el-button type="primary" @click="onCancel">取消</el-button>
+      <el-button type="primary" @click="onConfirm">确认</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { getProviderList } from '@/api/serviceSettlement/service'
+
+export default {
+  name: 'ClubListSelector',
+  data() {
+    return {
+      listQuery: {
+        authUserId: '',
+        authParty: '',
+        auditStatus: '',
+        status: '',
+        name: '',
+        pageNum: 1, // 页码
+        pageSize: 10 // 分页
+      },
+      list: [],
+      total: 0,
+      multipleSelection: []
+    }
+  },
+  computed: {
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 取消
+    onCancel() {
+      this.multipleSelection = []
+      this.$emit('cancel', [])
+    },
+
+    // 确认
+    onConfirm() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.warning('选择列表不能为空')
+        return
+      }
+      this.$emit('confirm', this.multipleSelection)
+    },
+
+    // 获取机构列表
+    async getList() {
+      const { data } = await getProviderList(this.listQuery)
+      this.list = data.results
+      this.total = data.totalRecord
+    },
+
+    // 筛选机构列表
+    filterList() {
+      this.listQuery.pageNum = 1
+      this.getList()
+    },
+
+    // 设置选中的行
+    setSelection() {
+      this.list.forEach((row) => {})
+    },
+
+    // 表格列选择
+    handleSelectionChange(rows) {
+      this.multipleSelection = rows
+    },
+
+    // 表格索引
+    indexMethod(index) {
+      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep {
+  .pagination-container {
+    padding: 0 !important;
+  }
+}
+.control-footer {
+  text-align: right;
+  margin-top: 15px;
+}
+</style>

src/views/dataBase/components/storeItem.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="store-item">
+    <el-image :src="storeObj.image" />
+    <div class="store-name">{{ storeObj.name }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    storeObj: {
+      type: Object,
+      default: () => ({
+        name: '12346',
+        image: ''
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.store-item {
+  padding: 10px;
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  background: #fff;
+  margin-bottom: 10px;
+  .el-image {
+    width: 80px;
+    height: 80px;
+    margin-right: 10px;
+  }
+}
+</style>

src/views/dataBase/mixins/index.js

@@ -0,0 +1,136 @@
+export default {
+  data() {
+    return {
+      storeAttributes: [
+        {
+          id: 1,
+          value: '仪器'
+        }, {
+          id: 2,
+          value: '设备'
+        }
+      ],
+      storeClass: [
+        {
+          id: 1,
+          value: '医美'
+        }, {
+          id: 2,
+          value: '生美'
+        }
+      ],
+      storeInfo: [
+        {
+          id: 1,
+          value: '商品库获取'
+        },
+        {
+          id: 2,
+          value: '自定义'
+        }
+      ],
+      storeAddRules: {
+        name: [
+          { required: true, message: '请输入商品名称', trigger: 'blur' }
+        ],
+        image: [
+          { required: true, message: '请上传商品图片', trigger: 'blur' }
+        ],
+        linkMan: [
+          { required: true, message: '请输入供应商名称', trigger: 'blur' }
+        ]
+      },
+      fileAddRules: {
+        name: [
+          { required: true, message: '请输入标题', trigger: 'blur' }
+        ],
+        file: [
+          { required: true, message: '请上传文件', trigger: 'change' }
+        ],
+        userClass: [
+          { required: true, message: '请选择用户阶段', trigger: 'change' }
+        ],
+        userType: [
+          { require: true, message: '请选择标签', trigger: 'change' }
+        ]
+      },
+      userClass: [
+        {
+          id: 0,
+          value: '全部'
+        },
+        {
+          id: 1,
+          value: '认知阶段'
+        },
+        {
+          id: 2,
+          value: '兴趣阶段'
+        },
+        {
+          id: 3,
+          value: '决策阶段'
+        },
+        {
+          id: 4,
+          value: '购买阶段'
+        }
+      ],
+      userType: [
+        {
+          id: 0,
+          value: '全部'
+        },
+        {
+          id: 1,
+          value: '标签一'
+        },
+        {
+          id: 2,
+          value: '标签二'
+        }
+      ],
+      dataManageListType: [
+        {
+          id: '1',
+          value: '文件'
+        },
+        {
+          id: '2',
+          value: '视频'
+        },
+        {
+          id: '3',
+          value: '图片'
+        },
+        {
+          id: '4',
+          value: '文本'
+        },
+        {
+          id: '5',
+          value: '话术'
+        }
+      ]
+    }
+  },
+  computed: {
+    type() {
+      return Number(this.$route.query.t) || false
+    },
+    id() {
+      return this.$route.query.id || false
+    },
+    tId() {
+      return this.$route.query.tId || false
+    }
+  },
+  filters: {
+    userStateFilter(val, list) {
+      return list.filter(e => e.id === val)[0].value
+    },
+    userTypeFilter(val, list) {
+      return list.filter(e => e.id === val)[0].value
+    }
+  }
+}

src/views/dataBase/store-list/data-management/edit.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" :rules="fileAddRules" label-width="120px">
+      <el-form-item label="标题：">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item v-if="type === 1" label="文件路径：">
+        <file-upload
+          :limit="20"
+          :is-check="false"
+          :file-list="fileList"
+          :tip="'支持上传pdf、docx、pptx文件格式'"
+          @success="UploadSuccess($event)"
+          @remove="HandleRemove($event)"
+        />
+      </el-form-item>
+      <el-form-item v-if="type === 2" label="视频路径：">
+        <file-upload
+          :limit="20"
+          :is-check="false"
+          :file-list="fileList"
+          :tip="'支持上传pdf、docx、pptx文件格式'"
+          @success="UploadSuccess($event)"
+          @remove="HandleRemove($event)"
+        />
+      </el-form-item>
+      <el-form-item v-if="type === 3" label="图片路径：">
+        <image-upload
+          :limit="6"
+          :image-list="fileList"
+          @success="handleImageSuccess($event, 'textRelateds')"
+          @remove="handleImageRemove($event, 'textRelateds')"
+        />
+      </el-form-item>
+      <el-form-item v-if="type === 4" label="文本内容：">
+        <el-input
+          v-model="form.textarea2"
+          type="textarea"
+          :autosize="{ minRows: 2, maxRows: 4}"
+          placeholder="请输入内容"
+        />
+      </el-form-item>
+      <el-form-item v-if="type === 5" label="话术内容：">
+        <el-input
+          v-model="form.textarea2"
+          type="textarea"
+          :autosize="{ minRows: 2, maxRows: 4}"
+          placeholder="请输入内容"
+        />
+      </el-form-item>
+      <el-form-item label="用户阶段：">
+        <el-select v-model="form.userClass" placeholder="用户阶段">
+          <el-option
+            v-for="(i, index) in userClass"
+            :key="index"
+            :label="i.value"
+            :value="i.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="标签：">
+        <el-select v-model="form.userType" placeholder="标签">
+          <el-option
+            v-for="(i, index) in userType"
+            :key="index"
+            :label="i.value"
+            :value="i.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('form')">提交</el-button>
+        <el-button @click="$router.back()">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import ImageUpload from '@/components/UploadImage/index.vue'
+import FileUpload from '@/views/serviceSettlement/components/UploadFile.vue'
+import databaseMixin from '../../mixins/index'
+
+export default {
+  components: {
+    ImageUpload,
+    FileUpload
+  },
+  mixins: [databaseMixin],
+  data() {
+    return {
+      form: {
+        infoType: 1
+      },
+      fileList: []
+    }
+  },
+  methods: {
+    HandleRemove() {},
+    UploadSuccess() {},
+    handleImageSuccess() {},
+    handleImageRemove() {},
+    submitForm(form) {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-input,
+::v-deep .el-textarea__inner {
+  width: 500px;
+}
+::v-deep .el-form {
+  width: 650px;
+  margin: 20px auto;
+}
+</style>

src/views/dataBase/store-list/data-management/list.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部操作区域 -->
+    <div class="filter-container">
+      <manage-tab @change="handleChange" />
+
+      <div v-if="listQuery.type === 5">
+        <el-tabs v-model="listQuery.type2">
+          <el-tab-pane label="企业话术" name="1" />
+          <el-tab-pane label="个人话术" name="2" />
+        </el-tabs>
+      </div>
+
+      <div class="filter-control">
+        <span>标题:</span>
+        <el-input
+          v-model="listQuery.name"
+          placeholder="标题"
+          clearable
+          @keyup.enter.native="handleChange(listQuery.type)"
+          @clear="handleChange(listQuery.type)"
+        />
+      </div>
+      <div v-if="listQuery.type !== 5" class="filter-control">
+        <span>用户阶段:</span>
+        <el-select v-model="listQuery.userClass" placeholder="用户阶段" @change="handleChange(listQuery.type)">
+          <el-option
+            v-for="(i, index) in userClass"
+            :key="index"
+            :label="i.value"
+            :value="i.id"
+          />
+        </el-select>
+      </div>
+      <div v-if="listQuery.type !== 5" class="filter-control">
+        <span>标签:</span>
+        <el-select v-model="listQuery.userType" placeholder="标签" @change="handleChange(listQuery.type)">
+          <el-option
+            v-for="(i, index) in userType"
+            :key="index"
+            :label="i.value"
+            :value="i.id"
+          />
+        </el-select>
+      </div>
+      <div v-if="listQuery.type === 5" class="filter-control">
+        <span>上传者:</span>
+        <el-select v-model="listQuery.userClass" placeholder="上传者" @change="handleChange(listQuery.type)">
+          <el-option
+            v-for="(i, index) in userClass"
+            :key="index"
+            :label="i.value"
+            :value="i.id"
+          />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="handleChange(listQuery.type)">查询</el-button>
+        <el-button v-if="listQuery.type !== 5" type="primary" @click="$router.push('/database/store-list/data-manage/edit?id=' + id + '&t=' + listQuery.type)">添加</el-button>
+        <el-button v-if="listQuery.type !== 5" type="primary" @click="exportDialogVisible = true">删除</el-button>
+      </div>
+    </div>
+
+    <el-table
+      ref="table"
+      v-loading="isLoading"
+      :data="list"
+      border
+    >
+      <!--<el-table-column type="selection" width="55" align="center" />-->
+      <el-table-column
+        label="ID"
+        prop="id"
+        align="center"
+        width="80"
+      />
+      <el-table-column prop="serviceLevel" label="标题" align="center" />
+      <el-table-column prop="userClass" label="用户阶段" align="center">
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.userClass | userStateFilter(userClass) }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="userType" label="标签" align="center">
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.userType | userTypeFilter(userType) }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="contractStartDate" label="浏览量" align="center" />
+      <el-table-column prop="contractStartDate" label="添加时间" align="center" />
+      <el-table-column prop="contractStartDate" label="创建人" align="center" />
+      <el-table-column label="操作" align="center" width="250">
+        <template slot-scope="{ row }">
+          <div class="labelCenter">
+            <el-button
+              v-if="listQuery.type2 === '1'"
+              type="primary"
+              size="mini"
+              @click="$router.push('/database/store-list/data-manage/edit?id=' + id + '&t=' + listQuery.type + '&tId=' + row.id)"
+            >编辑</el-button>
+            <el-button
+              v-if="listQuery.type2 === '1'"
+              type="primary"
+              size="mini"
+              @click="
+                handleDelete(row.id)
+              "
+            >删除</el-button>
+            <el-button
+              v-if="listQuery.type === 5 && listQuery.type2 === '2'"
+              type="primary"
+              size="mini"
+              @click="
+                $router.push('/database/store-list/data-manage/edit?id=' + row.id)
+              "
+            >查看</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="handleChange(listQuery.type)"
+    />
+
+    <el-dialog title="选择商品" :visible.sync="exportDialogVisible" width="70%">
+      <data-list-selector
+        v-if="exportDialogVisible"
+        @cancel="onSelectorCancel"
+        @confirm="onSelectorConfirm"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import ManageTab from '../../components/dataManageTab.vue'
+import DataListSelector from '../../components/dialogTable.vue'
+import databaseMixin from '../../mixins/index'
+
+export default {
+  components: {
+    ManageTab,
+    DataListSelector
+  },
+  mixins: [databaseMixin],
+  data() {
+    return {
+      listQuery: {
+        type: '',
+        pageNum: 1,
+        pageSize: 10,
+        userType: 0,
+        userClass: 0,
+        type2: '1'
+      },
+      list: [
+        {
+          id: 1,
+          userClass: 1,
+          userType: 1
+        }
+      ],
+      total: 0,
+      isLoading: false,
+      exportDialogVisible: false
+    }
+  },
+  methods: {
+    getInfo() {
+      this.isLoading = false
+    },
+    handleChange($event) {
+      if (this.id && $event) {
+        this.listQuery.type = Number($event)
+        this.listQuery.type2 = '1'
+        this.isLoading = true
+        this.getInfo()
+      }
+    },
+    handleDelete(val) {},
+    onSelectorCancel() {},
+    onSelectorConfirm() {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-tabs__nav-wrap::after {
+  background: none;
+}
+</style>

src/views/dataBase/store-list/edit.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="store-edit">
+    <el-form ref="form" :model="form" :rules="storeAddRules" label-width="120px">
+      <el-form-item label="商品信息：">
+        <el-radio-group v-model="form.info">
+          <el-radio v-for="i in storeInfo" :key="i.id" :label="i.id">{{ i.value }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="form.info === 1" label="添加商品：">
+        <el-button type="primary" @click="exportDialogVisible = true">添加</el-button>
+        <store-item
+          v-for="i in selectStoreList"
+          :key="i.id"
+          :store-obj="i"
+        />
+      </el-form-item>
+      <div v-if="form.info === 2">
+        <el-form-item label="商品名称：" prop="name">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="商品图片：" prop="image">
+          <image-upload
+            :limit="1"
+            :image-list="textRelateds"
+            @success="handleImageSuccess($event, 'textRelateds')"
+            @remove="handleImageRemove($event, 'textRelateds')"
+          />
+        </el-form-item>
+        <el-form-item label="供应商名称：" prop="linkMan">
+          <el-input v-model="form.linkMan" />
+        </el-form-item>
+      </div>
+      <el-form-item label="商品属性：">
+        <el-select v-model="form.storeAttributes" placeholder="请选择商品属性">
+          <el-option
+            v-for="(i, index) in storeAttributes"
+            :key="index"
+            :label="i.value"
+            :value="i.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商品分类：">
+        <el-select v-model="form.storeClass" placeholder="请选择商品分类">
+          <el-option
+            v-for="(i, index) in storeClass"
+            :key="index"
+            :label="i.value"
+            :value="i.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('form')">提交</el-button>
+        <el-button @click="$router.back()">返回</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-dialog title="选择商品" :visible.sync="exportDialogVisible" width="70%">
+      <store-list-selector
+        v-if="exportDialogVisible"
+        @cancel="onSelectorCancel"
+        @confirm="onSelectorConfirm"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import databaseMixin from '../mixins/index'
+import StoreListSelector from '../components/dialogTable.vue'
+import StoreItem from '../components/storeItem.vue'
+import ImageUpload from '@/components/UploadImage/index.vue'
+
+export default {
+  components: {
+    StoreListSelector,
+    StoreItem,
+    ImageUpload
+  },
+  mixins: [databaseMixin],
+  data() {
+    return {
+      form: {
+        info: 1
+      },
+      exportDialogVisible: false,
+      textRelateds: [],
+      selectStoreList: []
+    }
+  },
+  mounted() {},
+  methods: {
+    onSelectorCancel(val) {},
+    onSelectorConfirm(val) {
+      console.log(val)
+    },
+    handleImageRemove() {},
+    handleImageSuccess() {},
+    submitForm(form) {
+      this.$refs[form].validate(valid => {
+        if (valid) {
+          console.log(this.form)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.store-edit {
+  width: 500px;
+  margin: 0 auto;
+}
+</style>

src/views/dataBase/store-list/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部操作区域 -->
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>商品名称:</span>
+        <el-input
+          v-model="listQuery.name"
+          placeholder="商品名称"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>商品属性:</span>
+        <el-select v-model="listQuery.storeAttributes" placeholder="请选择商品属性" @change="getList">
+          <el-option
+            v-for="(i, index) in storeAttributes"
+            :key="index"
+            :label="i.value"
+            :value="i.id"
+          />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>商品分类:</span>
+        <el-select v-model="listQuery.storeClass" placeholder="请选择商品分类" @change="getList">
+          <el-option
+            v-for="(i, index) in storeClass"
+            :key="index"
+            :label="i.value"
+            :value="i.id"
+            @change="getList"
+          />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList">查询</el-button>
+        <el-button type="primary" @click="$router.push('/database/store-list/edit')">添加</el-button>
+      </div>
+    </div>
+
+    <el-table
+      ref="table"
+      v-loading="isLoading"
+      :data="list"
+      border
+      :default-sort="{ prop: 'frequency', order: 'descending' }"
+    >
+      <!--<el-table-column type="selection" width="55" align="center" />-->
+      <el-table-column
+        label="ID"
+        type="index"
+        sortable="custom"
+        align="center"
+        width="80"
+      />
+      <el-table-column prop="name" label="商品名称" align="center" />
+      <el-table-column prop="serviceLevel" label="商品图片" align="center">
+        <el-image src="" />
+      </el-table-column>
+      <el-table-column prop="serviceCategory" label="商品属性" align="center">
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.serviceCategory == "1" ? "产品" : "仪器" }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="serviceCategory" label="商品分类" align="center">
+        <template slot-scope="scope">
+          <div>
+            {{ scope.row.serviceCategory == "1" ? "生美" : "医美" }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="contractStartDate" label="添加时间" align="center" />
+      <el-table-column label="操作" align="center" width="200">
+        <template slot-scope="{ row }">
+          <div class="labelCenter">
+            <el-button
+              type="primary"
+              size="mini"
+              @click="$router.push('/database/store-list/edit?id=' + row.id)"
+            >编辑</el-button>
+            <el-button
+              type="primary"
+              size="mini"
+              @click="
+                $router.push('/database/store-list/data-manage/list?id=' + row.id)
+              "
+            >资料管理</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import databaseMixin from '../mixins/index'
+
+export default {
+  mixins: [databaseMixin],
+  data() {
+    return {
+      listQuery: {},
+      list: [
+        {
+          id: 1
+        }
+      ],
+      total: 10,
+      isLoading: false
+    }
+  },
+  mounted() {},
+  methods: {
+    getList() {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>