提交修改

src/components/Ctiy/index.vue

@@ -0,0 +1,142 @@
+<template>
+   <div>
+    <el-form-item :rules="rules" label="*会所地址:" :label-width="'130px'" style="width: 640px; margin-left:80px;text-align: right;">
+      <el-select
+        v-model="sheng"
+        @change="choseProvince"
+        placeholder="省级地区"  style="width:167px;">
+        <el-option
+          v-for="item in province"
+          :key="item.id"
+          :label="item.value"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="shi"
+        @change="choseCity"
+        placeholder="市级地区"  style="width:167px;">
+        <el-option
+          v-for="item in shi1"
+          :key="item.id"
+          :label="item.value"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="qu"
+        @change="choseBlock"
+        placeholder="区级地区"  style="width:167px;">
+        <el-option
+          v-for="item in qu1"
+          :key="item.id"
+          :label="item.value"
+          :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  name: 'Ctiy',
+  data () {
+    return {
+      mapJson:'http://localhost:9528/map.json',
+      province:'',
+      sheng: '',
+      shi: '',
+      shi1: [],
+      qu: '',
+      qu1: [],
+      city:'',
+      block:'',
+       rules: {
+        sheng: [{ required: true, message: '请选择省份', trigger: 'blur' }],
+        shi: [{ required: true, message: '请选择市', trigger: 'blur' }],
+        qu: [{ required: true, message: '请选择区县', trigger: 'blur' }],
+      },
+    }
+  },
+  methods:{
+    // 加载china地点数据，三级
+      getCityData:function(){
+        var that = this
+        axios.get(this.mapJson).then(function(response){
+          if (response.status==200) {
+            var data = response.data
+            that.province = []
+            that.city = []
+            that.block = []
+            // 省市区数据分类
+            for (var item in data) {
+              if (item.match(/0000$/)) {//省
+                that.province.push({id: item, value: data[item], children: []})
+              } else if (item.match(/00$/)) {//市
+                that.city.push({id: item, value: data[item], children: []})
+              } else {//区
+                that.block.push({id: item, value: data[item]})
+              }
+            }
+            // 分类市级
+            for (var index in that.province) {
+              for (var index1 in that.city) {
+                if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
+                  that.province[index].children.push(that.city[index1])
+                }
+              }
+            }
+            // 分类区级
+            for(var item1 in that.city) {
+              for(var item2 in that.block) {
+                if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {
+                  that.city[item1].children.push(that.block[item2])
+                }
+              }
+            }
+          }
+          else{
+            console.log(response.status)
+          }
+        }).catch(function(error){console.log(typeof+ error)})
+      },
+      // 选省
+      choseProvince:function(e) {
+        for (var index2 in this.province) {
+          if (e === this.province[index2].id) {
+            this.shi1 = this.province[index2].children
+            this.shi = this.province[index2].children[0].value
+            this.qu1 =this.province[index2].children[0].children
+            this.qu = this.province[index2].children[0].children[0].value
+            this.E = this.qu1[0].id
+          }
+        }
+      },
+      // 选市
+      choseCity:function(e) {
+        for (var index3 in this.city) {
+          if (e === this.city[index3].id) {
+            this.qu1 = this.city[index3].children
+            this.qu = this.city[index3].children[0].value
+            this.E = this.qu1[0].id
+            // console.log(this.E)
+          }
+        }
+      },
+      // 选区
+      choseBlock:function(e) {
+        this.E=e;
+        // console.log(this.E)
+      },
+    },
+    created:function(){
+      this.getCityData()
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -72,7 +72,14 @@ export const constantRoutes = [
         path: 'form',
         name: 'Form',
         component: () => import('@/views/club/form'),
-        meta: { title: '新增会所', icon: 'form' }
+        meta: { title: '上线会所', icon: 'form' }
+      },
+      {
+        path: 'operateList',
+        component: () => import('@/views/club/operateList'),
+        name: 'OperateList',
+        meta: { title: '查看运营人员', icon: 'list' },
+        hidden: true
       }
     ]
   },

src/views/club/form.vue

@@ -1,19 +1,195 @@
 <template>
   <div class="app-container">
-    {{ msg }}
+    <el-form ref="dataForm" :rules="rules" :model="form" label-position="left" label-width="130px">
+      <el-form-item label="会所名称:" prop="classifyName" style="width: 500px; margin-left:80px;text-align: right;">
+        <el-input v-model="form.classifyName" placeholder="请与营业执照的注册名称保持一致" maxlength="50" />
+      </el-form-item>
+      <el-form-item label="联系人:" prop="contacts" style="width: 500px; margin-left:80px;text-align: right;">
+        <el-input v-model="form.contacts" placeholder="请填写联系人姓名" maxlength="10" />
+      </el-form-item>
+      <el-form-item label="手机号:" prop="telephone" style="width: 500px; margin-left:80px;text-align: right;">
+        <el-input v-model="form.telephone" placeholder="请填写你的常用号码" maxlength="11" />
+      </el-form-item>
+      <City :add-list="addList" @addlist="getCity" />
+      <el-form-item label="" prop="address" style="width: 500px; margin-left:80px;text-align: right;">
+        <el-input v-model="form.address" placeholder="请填写会所详细的地址" />
+      </el-form-item>
+      <el-form-item label="会所类型:" style="width: 270px; margin-left:80px;text-align: right;">
+        <el-radio-group v-model="form.radio">
+          <el-radio :label="0">医美</el-radio>
+          <el-radio :label="1">生美</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="营业执照编号:" prop="businessNum" style="width: 500px; margin-left:80px;text-align: right;">
+        <el-input v-model="form.businessNum" placeholder="请填写统一社会信用代码" maxlength="18" />
+      </el-form-item>
+      <el-form-item label="营业执照:" prop="imageUrl" style="width:400px; margin-left:80px;text-align: right;">
+        <div class="form-el-upload">
+          <el-upload
+            class="avatar-uploader"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
+            <div slot="tip" class="el-upload__tip">注意：请上传jpg/png格式的图片，最大不超过5M</div>
+          </el-upload>
+        </div>
+      </el-form-item>
+      <el-form-item label="门头照:" prop="doorwayImageUrl" style="width:400px; margin-left:80px;text-align: right;">
+        <div class="form-el-upload">
+          <el-upload
+            class="avatar-uploader"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :show-file-list="false"
+            :on-success="handleDoorwaySuccess"
+            :before-upload="beforeDoorwayUpload"
+          >
+            <img v-if="form.doorwayImageUrl" :src="form.doorwayImageUrl" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
+            <div slot="tip" class="el-upload__tip">注意：请上传jpg/png格式的图片，最大不超过5M</div>
+          </el-upload>
+        </div>
+      </el-form-item>
+      <el-form-item label="是否上线:" prop="status" style="width: 200px; margin-left:80px;text-align: right;">
+        <el-select v-model="form.status" class="filter-item" placeholder="请选择">
+          <el-option label="是" value="1" />
+          <el-option label="否" value="2" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer" style="margin-left:420px;margin-top:80px">
+      <router-link :to="'/club/list/'">
+        <el-button>返回</el-button>
+      </router-link>
+      <el-button type="primary" @click="onSubmite('dataForm')">保存</el-button>
+    </div>
   </div>
 </template>
 
 <script>
+// 引入省市区组件，公共组件所在的路径
+import City from '@/components/Ctiy'
 export default {
+  components: { City },
   data() {
     return {
-      msg: '新增会所'
+      dialogImageUrl: '',
+      dialogVisible: false,
+      form: {
+        classifyName: '',
+        telephone: '',
+        contacts: '',
+        businessNum: '',
+        address: '',
+        radio: 1,
+        status: '是',
+        imageUrl: '',
+        doorwayImageUrl: ''
+      },
+      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
+      rules: {
+        classifyName: [{ required: true, message: '营业执照编号不能为空', trigger: 'blur' }],
+        telephone: [{ required: true, message: '常用手机号不能为空', trigger: 'blur' }],
+        contacts: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
+        businessNum: [{ required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }],
+        address: [{ required: true, message: '会所详细地址不能为空', trigger: 'blur' }],
+        status: [{ required: true, message: '请选择是否上线', trigger: 'blur' }]
+      },
+      addList: {
+        province: '',
+        city: '',
+        area: ''
+      }
+    }
+  },
+  methods: {
+    onSubmite(formData) {
+      this.$refs[formData].validate((valid) => {
+        if (!valid) {
+          console.log(this.form)
+        }
+      })
+    },
+    // 从子组件获取省市区
+    getCity(data) {
+      this.addList.province = data.province
+      this.addList.city = data.city
+      this.addList.area = data.area
+    },
+    handleAvatarSuccess(res, file) {
+      console.log(res)
+      const fileName = file.name
+      const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
+      if (regex.test(fileName.toLowerCase())) {
+        this.form.imageUrl = URL.createObjectURL(file.raw)
+      } else {
+        this.$message.error('请选择图片文件')
+      }
+    },
+    beforeAvatarUpload(file) {
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isLt5M) {
+        this.$message.error('上传头像图片大小不能超过 5MB!')
+      }
+      return isLt5M
+    },
+    handleDoorwaySuccess(res, file) {
+      console.log(res)
+      const fileName = file.name
+      const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
+      if (regex.test(fileName.toLowerCase())) {
+        this.form.doorwayImageUrl = URL.createObjectURL(file.raw)
+      } else {
+        this.$message.error('请选择图片文件')
+      }
+    },
+    beforeDoorwayUpload(file) {
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isLt5M) {
+        this.$message.error('上传头像图片大小不能超过 5MB!')
+      }
+      return isLt5M
     }
   }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss">
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.el-form-item__label{
+    text-align: right !important;
+}
+.form-el-upload{
+  width: 180px;
+}
+.el-upload__tip{
+  line-height: 20px;
+  color: red;
+  text-align: left;
+}
 </style>

src/views/club/list.vue

@@ -1,19 +1,252 @@
 <template>
   <div class="app-container">
-    {{ msg }}
+    <div class="app-header-search">
+      <el-form :inline="true" :model="form" class="demo-form-inline">
+        <el-form-item label="会所名称:">
+          <el-input v-model="form.classifyName" placeholder="请输入会所名称" maxlength="50" />
+        </el-form-item>
+        <el-form-item label="联系人:">
+          <el-input v-model="form.contacts" placeholder="请输入联系人姓名" maxlength="10" />
+        </el-form-item>
+        <el-form-item label="手机号:">
+          <el-input v-model="form.telephone" placeholder="请输入手机号" maxlength="11" />
+        </el-form-item>
+        <el-form-item label="上线状态:">
+          <el-select v-model="form.status" placeholder="请选择">
+            <el-option label="已上线" value="shanghai"></el-option>
+            <el-option label="已下线" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="创建时间:">
+          <el-date-picker
+            v-model="searchTimeVal"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column align="center" label="序号" width="50">
+        <template slot-scope="scope">
+          {{ scope.$index+1 }}
+        </template>
+      </el-table-column>
+      <el-table-column label="账号" width="150" align="center" prop="classifyNum" />
+      <el-table-column label="会所名称" width="150" align="center" prop="classifyName" />
+      <el-table-column label="联系人" width="80" align="center" prop="classifyPeo" />
+      <el-table-column label="手机号" width="110" align="center" prop="telephone" />
+      <el-table-column class-name="status-col" label="上线状态" width="150" align="center" prop="status">
+        <template slot-scope="{row}">
+          <el-tag>
+            {{ row.status*1 === 1 ? '已下线' : '已上线' }}
+          </el-tag>
+          <el-button type="primary" size="mini" @click="handleEdit(row)">{{ row.status*1 === 1 ? '上线' : '下线' }}</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="会所地址" width="350" prop="address" />
+      <el-table-column align="center" label="创建时间" width="180" prop="createTime" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <router-link :to="'/club/form/'">
+            <el-button type="primary" size="mini">编辑</el-button>
+          </router-link>
+          <router-link :to="'/club/operateList/'">
+            <el-button type="primary" size="mini">查看运营人员</el-button>
+          </router-link>
+          <el-button type="success" size="mini" @click="handleEdit(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="fetchData" />
+
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:24%;">
+        <el-form-item label="姓名" prop="classifyName">
+          <el-input v-model="temp.classifyName" />
+        </el-form-item>
+        <el-form-item label="*手机号" prop="telephone">
+          <el-input v-model="temp.telephone" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>      
+        <el-button type="primary" @click="dialogStatus==='create' ? createData() : updateData()">保存</el-button>
+        <el-button type="primary" @click="dialogStatus==='create' ? createData() : updateData()">保存生成邀请码</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
+import { getCategory, updateCategory, createCategory } from '@/api/goods'
+import Pagination from '@/components/Pagination'
+
 export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        0: 'gray'
+      }
+      return statusMap[status]
+    }
+  },
   data() {
     return {
-      msg: '会所列表'
+      list: null,
+      listLoading: true,
+      searchTimeVal: '',
+      total: 0,
+      listQuery: {
+        page: 1,
+        limit: 10,
+        importance: undefined,
+        title: undefined,
+        type: undefined,
+        sort: '+id'
+      },
+      form: {
+        classifyName: '',
+        telephone: '',
+        contacts: '',
+        businessNum: '',
+        address: '',
+        radio: 1,
+        status: '请选择',
+        imageUrl: '',
+        doorwayImageUrl: ''
+      },
+      temp: {
+        id: 1,
+        organizeID: 1,
+        classifyName: '针剂',
+        classifyImage: 'dfgdfsgsd',
+        sort: 60,
+        status: 1,
+        postage: 1,
+        addTime: new Date(),
+        updateTime: new Date(),
+        delFlag: 0
+      },
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '添加运营人员',
+        create: 'Create'
+      },
+      rules: {
+        classifyName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+        sort: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+        classifyImage: [{ type: 'file', required: true, message: '请上传分类图标', trigger: 'change' }],
+        postage: [{ required: true, message: '请选择邮费是否到付', trigger: 'change' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getCategory().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 1,
+            organizeID: 1,
+            classifyName: '商城测试演示会所',
+            classifyNum: '2020010120201110',
+            classifyPeo: '吴小研',
+            telephone: 138888888888,
+            address: '广东省深圳市福田区上步村1001号锦峰大厦A座',
+            createTime: '2020-01-01:20:30:56',
+            status: 1
+          },
+          {
+            id: 2,
+            organizeID: 1,
+            classifyName: '商城测试演示会所',
+            classifyNum: '2020010120201110',
+            classifyPeo: '吴小研',
+            telephone: 138888888888,
+            address: '广东省深圳市福田区上步村1001号锦峰大厦A座',
+            createTime: '2020-01-01:20:30:56',
+            status: 1
+          }
+        ]
+      })
+      this.listLoading = false
+    },
+    handleEdit(row) {
+      this.temp = Object.assign({}, row)
+      this.temp.timestamp = new Date(this.temp.timestamp)
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          tempData.updateTime = +new Date(tempData.updateTime)
+          updateCategory(tempData).then(() => {
+            for (const v of this.list) {
+              if (v.id === this.temp.id) {
+                const index = this.list.indexOf(v)
+                this.list.splice(index, 1, this.temp)
+                break
+              }
+            }
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: '更新成功',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          createCategory(this.temp).then(() => {
+            this.list.unshift(this.temp)
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: '添加分类成功',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
     }
   }
 }
-</script>
 
-<style scoped>
-
-</style>
+</script>

src/views/club/operateList.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="app-container">
+    <div class="app-title">当前会所:商城测试演示会所</div>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column align="center" label="序号" width="50">
+        <template slot-scope="scope">
+          {{ scope.$index+1 }}
+        </template>
+      </el-table-column>
+      <el-table-column label="账号" width="150" align="center" prop="classifyNum" />
+      <el-table-column label="姓名" width="150" align="center" prop="classifyName" />
+      <el-table-column label="手机号码" width="150" align="center" prop="telephone" />
+      <el-table-column label="邀请码" width="100" align="center" prop="code">
+        <template slot-scope="{row}">
+          <span>{{ row.code }}</span>
+          <el-tag type="success">{{ row.status*1 === 1 ? '已使用' : '未使用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column class-name="status-col" label="状态" width="100" align="center" prop="status">
+        <template slot-scope="{row}">
+          <el-tag>{{ row.status*1 === 1 ? '已绑定' : '未绑定' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="微信昵称" width="110" prop="watchName" />
+      <el-table-column align="center" label="OpenID" width="250" prop="openID" />
+      <el-table-column align="center" label="添加时间" width="180" prop="createTime" />
+      <el-table-column align="center" label="绑定时间" width="180" prop="bindTime" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
+          <el-button type="primary" size="mini" @click="handleUntying(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="fetchData" />
+
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:24%;">
+        <el-form-item label="姓名" prop="classifyName">
+          <el-input v-model="temp.classifyName" />
+        </el-form-item>
+        <el-form-item label="*手机号" prop="telephone">
+          <el-input v-model="temp.telephone" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="dialogStatus==='create' ? createData() : updateData()">确定</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="20%"
+    >
+      <span>确定解绑该运营人员吗?</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getCategory, updateCategory, createCategory } from '@/api/goods'
+import Pagination from '@/components/Pagination'
+
+export default {
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        0: 'gray'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      dialogVisible: false,
+      listQuery: {
+        page: 1,
+        limit: 10,
+        importance: undefined,
+        title: undefined,
+        type: undefined,
+        sort: '+id'
+      },
+      temp: {
+        id: 1,
+        organizeID: 1,
+        classifyName: '针剂',
+        telephone: '13888888888',
+        sort: 60
+      },
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '提示',
+        create: 'Create'
+      },
+      rules: {
+        classifyName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+        sort: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+        classifyImage: [{ type: 'file', required: true, message: '请上传分类图标', trigger: 'change' }],
+        postage: [{ required: true, message: '请选择邮费是否到付', trigger: 'change' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getCategory().then(response => {
+        this.list = response.data.items
+        this.listLoading = false
+      }).catch(() => {
+        // 封装静态数据
+        this.list = [
+          {
+            id: 1,
+            organizeID: 1,
+            classifyName: '测试运营人员',
+            classifyNum: '2020010120201110',
+            watchName: '轻描淡写',
+            openID: 'o0dXI5ajSPa6PkOmjjq1aar93JW4',
+            code: '219845',
+            telephone: 138888888888,
+            createTime: '2020-01-01:20:30:56',
+            bindTime: '2020-01-01:20:30:56',
+            status: 1
+          },
+          {
+            id: 2,
+            organizeID: 1,
+            classifyName: '吴小研',
+            classifyNum: '2020010120201110',
+            watchName: '轻描淡写',
+            openID: 'o0dXI5ajSPa6PkOmjjq1aar93JW4',
+            code: '315654',
+            telephone: 138888888888,
+            createTime: '2020-01-01:20:30:56',
+            bindTime: '2020-01-01:20:30:56',
+            status: 1
+          }
+        ]
+      })
+      this.listLoading = false
+    },
+    handleEdit(row) {
+      this.temp = Object.assign({}, row)
+      this.temp.timestamp = new Date(this.temp.timestamp)
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    handleUntying(row) {
+      this.dialogVisible = true
+    },
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          tempData.updateTime = +new Date(tempData.updateTime)
+          updateCategory(tempData).then(() => {
+            for (const v of this.list) {
+              if (v.id === this.temp.id) {
+                const index = this.list.indexOf(v)
+                this.list.splice(index, 1, this.temp)
+                break
+              }
+            }
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: '更新成功',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          createCategory(this.temp).then(() => {
+            this.list.unshift(this.temp)
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: '添加分类成功',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+  .app-title{
+    line-height: 80px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #999999;
+  }
+</style>
+