增加用户表单

src/components/Upload/SingleImage.vue

@@ -1,14 +1,6 @@
 <template>
   <div class="upload-container">
-    <el-upload
-      :data="dataObj"
-      :multiple="false"
-      :show-file-list="false"
-      :on-success="handleImageSuccess"
-      class="image-uploader"
-      drag
-      action="https://httpbin.org/post"
-    >
+    <el-upload :data="dataObj" :multiple="false" :show-file-list="false" :on-success="handleImageSuccess" class="image-uploader" drag action="https://httpbin.org/post">
       <i class="el-icon-upload" />
       <div class="el-upload__text">
         将文件拖到此处，或<em>点击上传</em>
@@ -26,7 +18,7 @@
 </template>
 
 <script>
-import { getToken } from '@/api/qiniu'
+// import { getToken } from '@/api/qiniu'
 
 export default {
   name: 'SingleImageUpload',
@@ -60,17 +52,20 @@ export default {
     beforeUpload() {
       const _self = this
       return new Promise((resolve, reject) => {
-        getToken().then(response => {
-          const key = response.data.qiniu_key
-          const token = response.data.qiniu_token
-          _self._data.dataObj.token = token
-          _self._data.dataObj.key = key
-          this.tempUrl = response.data.qiniu_url
-          resolve(true)
-        }).catch(err => {
-          console.log(err)
-          reject(false)
-        })
+        // eslint-disable-next-line no-undef
+        getToken()
+          .then(response => {
+            const key = response.data.qiniu_key
+            const token = response.data.qiniu_token
+            _self._data.dataObj.token = token
+            _self._data.dataObj.key = key
+            this.tempUrl = response.data.qiniu_url
+            resolve(true)
+          })
+          .catch(err => {
+            console.log(err)
+            reject(false)
+          })
       })
     }
   }
@@ -78,57 +73,56 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    @import "~@/styles/mixin.scss";
-    .upload-container {
+@import '~@/styles/mixin.scss';
+.upload-container {
+  width: 100%;
+  position: relative;
+  @include clearfix;
+  .image-uploader {
+    width: 60%;
+    float: left;
+  }
+  .image-preview {
+    width: 200px;
+    height: 200px;
+    position: relative;
+    border: 1px dashed #d9d9d9;
+    float: left;
+    margin-left: 50px;
+    .image-preview-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      img {
         width: 100%;
-        position: relative;
-        @include clearfix;
-        .image-uploader {
-            width: 60%;
-            float: left;
-        }
-        .image-preview {
-            width: 200px;
-            height: 200px;
-            position: relative;
-            border: 1px dashed #d9d9d9;
-            float: left;
-            margin-left: 50px;
-            .image-preview-wrapper {
-                position: relative;
-                width: 100%;
-                height: 100%;
-                img {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-            .image-preview-action {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                cursor: default;
-                text-align: center;
-                color: #fff;
-                opacity: 0;
-                font-size: 20px;
-                background-color: rgba(0, 0, 0, .5);
-                transition: opacity .3s;
-                cursor: pointer;
-                text-align: center;
-                line-height: 200px;
-                .el-icon-delete {
-                    font-size: 36px;
-                }
-            }
-            &:hover {
-                .image-preview-action {
-                    opacity: 1;
-                }
-            }
-        }
+        height: 100%;
+      }
     }
-
+    .image-preview-action {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      cursor: default;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, 0.5);
+      transition: opacity 0.3s;
+      cursor: pointer;
+      text-align: center;
+      line-height: 200px;
+      .el-icon-delete {
+        font-size: 36px;
+      }
+    }
+    &:hover {
+      .image-preview-action {
+        opacity: 1;
+      }
+    }
+  }
+}
 </style>

src/components/Upload/SingleImage2.vue

@@ -1,14 +1,6 @@
 <template>
   <div class="singleImageUpload2 upload-container">
-    <el-upload
-      :data="dataObj"
-      :multiple="false"
-      :show-file-list="false"
-      :on-success="handleImageSuccess"
-      class="image-uploader"
-      drag
-      action="https://httpbin.org/post"
-    >
+    <el-upload :data="dataObj" :multiple="false" :show-file-list="false" :on-success="handleImageSuccess" class="image-uploader" drag action="https://httpbin.org/post">
       <i class="el-icon-upload" />
       <div class="el-upload__text">
         Drag或<em>点击上传</em>
@@ -26,7 +18,7 @@
 </template>
 
 <script>
-import { getToken } from '@/api/qiniu'
+// import { getToken } from '@/api/qiniu'
 
 export default {
   name: 'SingleImageUpload2',
@@ -60,16 +52,19 @@ export default {
     beforeUpload() {
       const _self = this
       return new Promise((resolve, reject) => {
-        getToken().then(response => {
-          const key = response.data.qiniu_key
-          const token = response.data.qiniu_token
-          _self._data.dataObj.token = token
-          _self._data.dataObj.key = key
-          this.tempUrl = response.data.qiniu_url
-          resolve(true)
-        }).catch(() => {
-          reject(false)
-        })
+        // eslint-disable-next-line no-undef
+        getToken()
+          .then(response => {
+            const key = response.data.qiniu_key
+            const token = response.data.qiniu_token
+            _self._data.dataObj.token = token
+            _self._data.dataObj.key = key
+            this.tempUrl = response.data.qiniu_url
+            resolve(true)
+          })
+          .catch(() => {
+            reject(false)
+          })
       })
     }
   }
@@ -111,8 +106,8 @@ export default {
       color: #fff;
       opacity: 0;
       font-size: 20px;
-      background-color: rgba(0, 0, 0, .5);
-      transition: opacity .3s;
+      background-color: rgba(0, 0, 0, 0.5);
+      transition: opacity 0.3s;
       cursor: pointer;
       text-align: center;
       line-height: 200px;

src/components/Upload/singleUpload.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <el-upload :action="useOss?ossUploadUrl:minioUploadUrl" :data="useOss?dataObj:null" list-type="picture" :multiple="false" :show-file-list="showFileList" :file-list="fileList" :before-upload="beforeUpload" :on-remove="handleRemove" :on-success="handleUploadSuccess" :on-preview="handlePreview">
+      <el-button size="small" type="primary">点击上传</el-button>
+      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="fileList[0].url" alt="">
+    </el-dialog>
+  </div>
+</template>
+<script>
+// import { policy } from '@/api/oss'
+
+export default {
+  name: 'SingleUpload',
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    value: String
+  },
+  data() {
+    return {
+      dataObj: {
+        policy: '',
+        signature: '',
+        key: '',
+        ossaccessKeyId: '',
+        dir: '',
+        host: ''
+        // callback:'',
+      },
+      dialogVisible: false,
+      useOss: true, // 使用oss->true;使用MinIO->false
+      ossUploadUrl: 'http://mallservice-oss.oss-cn-shenzhen.aliyuncs.com',
+      minioUploadUrl: 'http://a318n51549.qicp.vip/minio/upload'
+    }
+  },
+  computed: {
+    imageUrl() {
+      return this.value
+    },
+    imageName() {
+      if (this.value != null && this.value !== '') {
+        return this.value.substr(this.value.lastIndexOf('/') + 1)
+      } else {
+        return null
+      }
+    },
+    fileList() {
+      return [
+        {
+          name: this.imageName,
+          url: this.imageUrl
+        }
+      ]
+    },
+    showFileList: {
+      get: function() {
+        return this.value !== null && this.value !== '' && this.value !== undefined
+      },
+      set: function(newValue) {}
+    }
+  },
+  methods: {
+    emitInput(val) {
+      this.$emit('input', val)
+    },
+    handleRemove(file, fileList) {
+      this.emitInput('')
+    },
+    handlePreview(file) {
+      this.dialogVisible = true
+    },
+    beforeUpload(file) {
+      const _self = this
+      if (!this.useOss) {
+        // 不使用oss不需要获取策略
+        return true
+      }
+      return new Promise((resolve, reject) => {
+        // eslint-disable-next-line no-undef
+        policy()
+          .then(response => {
+            _self.dataObj.policy = response.data.policy
+            _self.dataObj.signature = response.data.signature
+            _self.dataObj.ossaccessKeyId = response.data.accessKeyId
+            _self.dataObj.key = response.data.dir + '/${filename}'
+            _self.dataObj.dir = response.data.dir
+            _self.dataObj.host = response.data.host
+            // _self.dataObj.callback = response.data.callback;
+            resolve(true)
+          })
+          .catch(err => {
+            console.log(err)
+            reject(false)
+          })
+      })
+    },
+    handleUploadSuccess(res, file) {
+      this.showFileList = true
+      this.fileList.pop()
+      let url = this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name
+      if (!this.useOss) {
+        // 不使用oss直接获取图片路径
+        url = res.data.url
+      }
+      this.fileList.push({ name: file.name, url: url })
+      this.emitInput(this.fileList[0].url)
+    }
+  }
+}
+</script>
+<style>
+</style>
+

src/layout/components/AppMain.vue

@@ -28,20 +28,20 @@ export default {
   min-height: calc(100vh - 50px);
   width: 100%;
   position: relative;
-  overflow: hidden;
+  // overflow: hidden;
 }
 
-.fixed-header+.app-main {
+.fixed-header + .app-main {
   padding-top: 50px;
 }
 
 .hasTagsView {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    // min-height: calc(100vh - 84px);
   }
 
-  .fixed-header+.app-main {
+  .fixed-header + .app-main {
     padding-top: 84px;
   }
 }

src/router/modules/sys.js

@@ -48,11 +48,18 @@ const sysRouter = {
           meta: { title: '角色列表' }
         },
         {
-          path: 'form',
+          path: 'add',
           hidden: true,
-          component: () => import('@/views/sys/roles/form.vue'),
+          component: () => import('@/views/sys/roles/add.vue'),
           name: 'SysRoles',
           meta: { title: '添加角色' }
+        },
+        {
+          path: 'update',
+          hidden: true,
+          component: () => import('@/views/sys/roles/update.vue'),
+          name: 'SysRoles',
+          meta: { title: '编辑角色' }
         }
       ]
     },
@@ -71,11 +78,18 @@ const sysRouter = {
           meta: { title: '角色列表' }
         },
         {
-          path: 'form',
+          path: 'add',
           hidden: true,
-          component: () => import('@/views/sys/users/form.vue'),
-          name: 'SysUsers',
-          meta: { title: '添加用户' }
+          component: () => import('@/views/sys/users/add.vue'),
+          name: 'SysRoles',
+          meta: { title: '添加角色' }
+        },
+        {
+          path: 'update',
+          hidden: true,
+          component: () => import('@/views/sys/users/update.vue'),
+          name: 'SysRoles',
+          meta: { title: '编辑角色' }
         }
       ]
     },

src/styles/index.scss

@@ -193,3 +193,18 @@ aside {
 .el-page-header {
   margin: 0 0 20px 0;
 }
+.el-card {
+  border: 1px solid #ebeef5;
+  background-color: #fff;
+  color: #303133;
+  transition: 0.3s;
+}
+//添加、更新表单样式
+.form-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 720px;
+  padding: 35px 35px 15px 35px;
+  margin: 20px auto;
+}

src/views/sys/menus/list.vue

@@ -26,7 +26,15 @@
         </template>
       </el-table-column>
       <el-table-column label="状态" width="100" align="center">
-        <template slot-scope="{row}">{{ row.status | statusFilter }}</template>
+        <template slot-scope="{row}">
+          <el-switch
+            v-model="row.status"
+            active-color="#1890ff"
+            inactive-color="#DCDFE6"
+            active-value="0"
+            inactive-value="1"
+          />
+        </template>
       </el-table-column>
       <el-table-column label="排序" width="100" align="center">
         <template slot-scope="{row}">{{ row.sort }}</template>
@@ -56,13 +64,6 @@ export default {
   name: 'MenuList',
   components: { Pagination },
   filters: {
-    statusFilter(value) {
-      if (value === 0) {
-        return '启用'
-      } else if (value === 1) {
-        return '停用'
-      }
-    },
     iconFilter(value) {
       if (!value) {
         return ''
@@ -145,10 +146,10 @@ export default {
       this.$router.push({ path: '/sys/menus/list' })
     },
     handleShowNextLevel(row) {
-      this.$router.push({ path: '/sys/menus/list', query: { parentId: row.id, title: row.title } })
+      this.$router.push({ path: '/sys/menus/list', query: { parentId: row.id, title: row.title }})
     },
     handleUpdate(row) {
-      this.$router.push({ path: '/sys/menus/form', query: { id: row.id } })
+      this.$router.push({ path: '/sys/menus/form', query: { id: row.id }})
     },
     handleCreate() {
       this.$router.push({ path: '/sys/menus/form' })

src/views/sys/roles/add.vue

@@ -0,0 +1,13 @@
+<template>
+  <roles-detail :is-edit="false" />
+</template>
+<script>
+import RolesDetail from './components/rolesDetail'
+export default {
+  name: 'AddRoles',
+  components: { RolesDetail }
+}
+</script>
+<style>
+</style>
+

src/views/sys/roles/components/rolesDetail.vue

@@ -0,0 +1,273 @@
+<template>
+  <el-card class="form-container" shadow="never">
+    <el-form ref="productCateFrom" :model="productCate" :rules="rules" label-width="150px">
+      <el-form-item label="分类名称：" prop="name">
+        <el-input v-model="productCate.name" />
+      </el-form-item>
+      <el-form-item label="上级分类：">
+        <el-select v-model="productCate.parentId" placeholder="请选择分类" @change="changeAttrProductCate">
+          <el-option v-for="item in selectProductCateList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="数量单位：">
+        <el-input v-model="productCate.productUnit" />
+      </el-form-item>
+      <el-form-item label="排序：">
+        <el-input v-model="productCate.sort" />
+      </el-form-item>
+      <el-form-item label="是否显示：">
+        <el-radio-group v-model="productCate.showStatus">
+          <el-radio :label="1">是</el-radio>
+          <el-radio :label="0">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="是否显示在导航栏：">
+        <el-radio-group v-model="productCate.navStatus">
+          <el-radio :label="1">是</el-radio>
+          <el-radio :label="0">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="分类图标：">
+        <!-- <single-upload v-model="productCate.icon" /> -->
+      </el-form-item>
+      <el-form-item v-for="(filterProductAttr, index) in filterProductAttrList" :key="filterProductAttr.key" :label="index | filterLabelFilter">
+        <el-cascader v-model="filterProductAttr.value" clearable :options="filterAttrs" @change="changeFilterProductAttrFn" />
+        <!-- <el-button style="margin-left: 20px" @click.prevent="removeFilterAttr(filterProductAttr)">删除</el-button> -->
+      </el-form-item>
+      <!-- <el-form-item>
+        <el-button size="small" type="primary" @click="handleAddFilterAttr()">新增</el-button>
+      </el-form-item> -->
+      <el-form-item label="关键词：">
+        <el-input v-model="productCate.keywords" />
+      </el-form-item>
+      <el-form-item label="分类描述：">
+        <el-input v-model="productCate.description" type="textarea" :autosize="true" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('productCateFrom')">提交</el-button>
+        <el-button v-if="!isEdit" @click="resetForm('productCateFrom')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+
+<script>
+// import { fetchList, createProductCate, updateProductCate, getProductCate } from '@/api/productCate'
+// import { fetchListWithAttr } from '@/api/productAttrCate'
+// import { getProductAttrInfo } from '@/api/productAttr'
+// import SingleUpload from '@/components/Upload/singleUpload'
+
+const defaultProductCate = {
+  description: '',
+  icon: '',
+  keywords: '',
+  name: '',
+  navStatus: 0,
+  parentId: 0,
+  productUnit: '',
+  showStatus: 0,
+  sort: 0,
+  productAttributeIdList: []
+}
+export default {
+  name: 'ProductCateDetail',
+  // components: { SingleUpload },
+  filters: {
+    filterLabelFilter(index) {
+      if (index === 0) {
+        return '筛选属性：'
+      } else {
+        return ''
+      }
+    }
+  },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      productCate: Object.assign({}, defaultProductCate),
+      selectProductCateList: [],
+      rules: {
+        name: [
+          { required: true, message: '请输入品牌名称', trigger: 'blur' },
+          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
+        ]
+      },
+      filterAttrs: [],
+      filterProductAttrList: [
+        {
+          value: []
+        }
+      ],
+      changOptionName: ''
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      // getProductCate(this.$route.query.id).then(response => {
+      //   this.productCate = response.data
+      // })
+      // getProductAttrInfo(this.$route.query.id).then(response => {
+      //   if (response.data != null && response.data.length > 0) {
+      //     this.filterProductAttrList = []
+      //     for (let i = 0; i < response.data.length; i++) {
+      //       this.filterProductAttrList.push({
+      //         key: Date.now() + i,
+      //         value: [response.data[i].attributeCategoryId, response.data[i].attributeId]
+      //       })
+      //     }
+      //   }
+      // })
+    } else {
+      this.productCate = Object.assign({}, defaultProductCate)
+    }
+    this.getSelectProductCateList()
+  },
+  methods: {
+    getSelectProductCateList() {
+      // fetchList(0, { pageSize: 100, pageNum: 1 }).then(response => {
+      //   this.selectProductCateList = response.data.list
+      //   this.selectProductCateList.unshift({ id: 0, name: '无上级分类' })
+      //   this.selectProductCateList.forEach(el => {
+      //     // eslint-disable-next-line eqeqeq
+      //     if (el.id == this.productCate.parentId) {
+      //       this.changOptionName = el.name
+      //     }
+      //   })
+      //   console.log(this.changOptionName)
+      //   this.getProductAttrCateList()
+      // })
+    },
+    getProductAttrCateList() {
+      console.log(this.changOptionName)
+      // const params = { productAttrCateId: null, parentName: this.changOptionName }
+      // fetchListWithAttr(params).then(response => {
+      //   const list = response.data
+      //   for (let i = 0; i < list.length; i++) {
+      //     const productAttrCate = list[i]
+      //     const children = []
+      //     if (productAttrCate.productAttributeList != null && productAttrCate.productAttributeList.length > 0) {
+      //       for (let j = 0; j < productAttrCate.productAttributeList.length; j++) {
+      //         children.push({
+      //           label: productAttrCate.productAttributeList[j].name,
+      //           value: productAttrCate.productAttributeList[j].id
+      //         })
+      //       }
+      //     }
+      //     // this.filterAttrs.push({label: productAttrCate.name, value: productAttrCate.id, children: children});
+      //     this.filterAttrs.push({ label: productAttrCate.name, value: productAttrCate.id })
+      //   }
+      // })
+    },
+    getProductAttributeIdList() {
+      // 获取选中的筛选商品属性
+      const productAttributeIdList = []
+      for (let i = 0; i < this.filterProductAttrList.length; i++) {
+        const item = this.filterProductAttrList[i]
+        if (item.value !== null && item.value.length === 1) {
+          productAttributeIdList.push(item.value[0])
+        }
+      }
+      return productAttributeIdList
+    },
+    changeAttrProductCate(value) {
+      this.selectProductCateList.forEach(el => {
+        // eslint-disable-next-line eqeqeq
+        if (value == el.id) {
+          this.changOptionName = el.name
+        }
+      })
+      console.log(this.changOptionName)
+    },
+    changeFilterProductAttrFn(value) {
+      console.log(value)
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            if (this.isEdit) {
+              this.productCate.productAttributeIdList = this.getProductAttributeIdList()
+              // updateProductCate(this.$route.query.id, this.productCate).then(response => {
+              //   this.$message({
+              //     message: '修改成功',
+              //     type: 'success',
+              //     duration: 1000
+              //   })
+              //   this.$router.back()
+              // })
+            } else {
+              this.productCate.productAttributeIdList = this.getProductAttributeIdList()
+              // createProductCate(this.productCate).then(response => {
+              //   this.$refs[formName].resetFields()
+              //   this.resetForm(formName)
+              //   this.$message({
+              //     message: '提交成功',
+              //     type: 'success',
+              //     duration: 1000
+              //   })
+              // })
+            }
+          })
+        } else {
+          this.$message({
+            message: '验证失败',
+            type: 'error',
+            duration: 1000
+          })
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.productCate = Object.assign({}, defaultProductCate)
+      this.getSelectProductCateList()
+      this.filterProductAttrList = [
+        {
+          value: []
+        }
+      ]
+    },
+    removeFilterAttr(productAttributeId) {
+      if (this.filterProductAttrList.length === 1) {
+        this.$message({
+          message: '至少要留一个',
+          type: 'warning',
+          duration: 1000
+        })
+        return
+      }
+      var index = this.filterProductAttrList.indexOf(productAttributeId)
+      if (index !== -1) {
+        this.filterProductAttrList.splice(index, 1)
+      }
+    },
+    handleAddFilterAttr() {
+      if (this.filterProductAttrList.length === 3) {
+        this.$message({
+          message: '最多添加三个',
+          type: 'warning',
+          duration: 1000
+        })
+        return
+      }
+      this.filterProductAttrList.push({
+        value: null,
+        key: Date.now()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/sys/roles/form.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-page-header :content="isEdit?'修改角色':'添加角色'" />
-    <el-card class="form-container" shadow="never">
-      <el-form ref="menuFrom" :model="menu" :rules="rules" label-width="150px">
-        <el-form-item label="上级菜单：" prop="parentId">
-          <span>{{ parentTitle }}</span>
-          <el-input v-model="menu.parentId" hidden />
-        </el-form-item>
-        <el-form-item label="菜单名称：" prop="title">
-          <el-input v-model="menu.title" />
-        </el-form-item>
-        <el-form-item label="前端名称：" prop="name">
-          <el-input v-model="menu.name" />
-        </el-form-item>
-        <el-form-item label="前端图标：" prop="icon">
-          <el-input v-model="menu.icon" style="width: 80%" />
-          <svg-icon style="margin-left: 8px" :icon-class="menu.icon" />
-        </el-form-item>
-        <el-form-item label="状态：">
-          <el-radio-group v-model="menu.status">
-            <el-radio :label="0">启用</el-radio>
-            <el-radio :label="1">停用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="排序：">
-          <el-input v-model="menu.sort" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSubmit('menuFrom')">提交</el-button>
-          <el-button v-if="!isEdit" @click="resetForm('menuFrom')">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-  </div>
-</template>
-<script>
-import { getMenu, updateMenu, createMenu } from '@/api/menu'
-const defaultMenu = {
-  id: '',
-  title: '',
-  name: '',
-  icon: '',
-  status: 0,
-  sort: 0,
-  parentId: ''
-}
-export default {
-  name: 'MenuForm',
-  data() {
-    return {
-      parentTitle: '',
-      menu: Object.assign({}, defaultMenu),
-      isEdit: false
-    }
-  },
-  watch: {
-    $route(route) {
-      this.resetParentId()
-      this.getFormData()
-    }
-  },
-  created() {
-    this.resetParentId()
-    this.getFormData()
-  },
-  methods: {
-    resetParentId() {
-      if (this.$route.query.parentId != null) {
-        this.menu.parentId = this.$route.query.parentId
-        this.parentTitle = this.$route.query.title
-      } else {
-        this.menu.parentId = ''
-        this.parentTitle = ''
-      }
-    },
-    getFormData() {
-      if (this.$route.query.id != null) {
-        this.menu.id = this.$route.query.id
-        this.isEdit = true
-        getMenu(this.menu.id).then(response => {
-          this.menu.title = response.data.title
-          this.menu.name = response.data.name
-          this.menu.icon = response.data.icon
-          this.menu.status = response.data.status
-          this.menu.sort = response.data.sort
-          this.menu.parentId = response.data.parentId
-        })
-      } else {
-        this.menu.id = ''
-        this.isEdit = false
-        this.menu = Object.assign({}, defaultMenu)
-      }
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields()
-      this.menu = Object.assign({}, defaultMenu)
-      this.getFormData()
-    },
-    onSubmit(formName) {
-      this.$refs[formName].validate(valid => {
-        if (valid) {
-          this.$confirm('是否提交数据', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }).then(() => {
-            if (this.isEdit) {
-              updateMenu(this.$route.query.id, this.menu).then(response => {
-                this.$message({
-                  message: '修改成功',
-                  type: 'success',
-                  duration: 1000
-                })
-                this.$router.back()
-              })
-            } else {
-              createMenu(this.menu).then(response => {
-                this.$refs[formName].resetFields()
-                this.resetForm(formName)
-                this.$message({
-                  message: '提交成功',
-                  type: 'success',
-                  duration: 1000
-                })
-                this.$router.back()
-              })
-            }
-          })
-        } else {
-          this.$message({
-            message: '验证失败',
-            type: 'error',
-            duration: 1000
-          })
-          return false
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

src/views/sys/roles/update.vue

@@ -0,0 +1,13 @@
+<template>
+  <roles-detail :is-edit="true" />
+</template>
+<script>
+import RolesDetail from './components/rolesDetail'
+export default {
+  name: 'UpdateRoles',
+  components: { RolesDetail }
+}
+</script>
+<style>
+</style>
+

src/views/sys/users/add.vue

@@ -0,0 +1,13 @@
+<template>
+  <users-detail :is-edit="false" />
+</template>
+<script>
+import UsersDetail from './components/usersDetail'
+export default {
+  name: 'AddUsers',
+  components: { UsersDetail }
+}
+</script>
+<style>
+</style>
+

src/views/sys/users/components/usersDetail.vue

@@ -0,0 +1,310 @@
+/* eslint-disable vue/require-v-for-key */
+<template>
+  <el-card class="form-container" shadow="never">
+    <el-form ref="productCateFrom" :model="productCate" :rules="rules" label-width="150px">
+      <el-form-item label="用户头像">
+        <single-upload v-model="productCate.icon" />
+      </el-form-item>
+      <el-form-item label="归属公司">
+        <el-select v-model="productCate.parentId" placeholder="请选择公司" @change="changeAttrProductCate">
+          <el-option v-for="item in selectProductCateList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="归属部门">
+        <el-select v-model="productCate.parentId" placeholder="请选择部门" @change="changeAttrProductCate">
+          <el-option v-for="item in selectProductCateList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工号：" prop="number">
+        <el-input v-model="productCate.name" />
+      </el-form-item>
+      <el-form-item label="姓名：" prop="name">
+        <el-input v-model="productCate.name" />
+      </el-form-item>
+      <el-form-item label="登录名：" prop="userName">
+        <el-input v-model="productCate.name" />
+      </el-form-item>
+      <el-form-item label="密码：" prop="password">
+        <el-input v-model="productCate.productUnit" />
+      </el-form-item>
+      <el-form-item label="确认密码：" prop="password">
+        <el-input v-model="productCate.productUnit" />
+      </el-form-item>
+      <el-form-item label="邮箱：">
+        <el-input v-model="productCate.productUnit" />
+      </el-form-item>
+      <el-form-item label="电话：">
+        <el-input v-model="productCate.productUnit" />
+      </el-form-item>
+      <el-form-item label="手机：">
+        <el-input v-model="productCate.sort" />
+      </el-form-item>
+      <el-form-item label="是否阻止登录：">
+        <el-radio-group v-model="productCate.showStatus">
+          <el-radio :label="1">是</el-radio>
+          <el-radio :label="0">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="用户类型">
+        <el-select v-model="productCate.typeId" placeholder="请选择" @change="changeAttrProductCate">
+          <el-option v-for="item in selectUserTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注：">
+        <el-input v-model="productCate.description" type="textarea" :autosize="true" />
+      </el-form-item>
+      <el-form-item label="用户角色：">
+        <el-checkbox-group v-model="checkList">
+          <el-checkbox v-for="item in selectRolesList" :key="item" :label="item.name" class="littleMarginLeft" />
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('productCateFrom')">保存</el-button>
+        <el-button v-if="!isEdit" @click="resetForm('productCateFrom')">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+
+<script>
+// import { fetchList, createProductCate, updateProductCate, getProductCate } from '@/api/productCate'
+import SingleUpload from '@/components/Upload/singleUpload'
+
+const defaultProductCate = {
+  description: '',
+  icon: '',
+  keywords: '',
+  name: '',
+  navStatus: 0,
+  parentId: 0,
+  productUnit: '',
+  showStatus: 0,
+  sort: 0,
+  productAttributeIdList: []
+}
+export default {
+  name: 'ProductCateDetail',
+  components: { SingleUpload },
+  filters: {
+    filterLabelFilter(index) {
+      if (index === 0) {
+        return '筛选属性：'
+      } else {
+        return ''
+      }
+    }
+  },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      productCate: Object.assign({}, defaultProductCate),
+      selectUserTypeList: [
+        { name: '系统管理', typeId: 1 },
+        { name: '部门经理', typeId: 2 },
+        { name: '普通用户', typeId: 3 }
+      ],
+      rules: {
+        number: { required: true, message: '请输入工号', trigger: 'blur' },
+        name: [
+          { required: true, message: '请输入姓名', trigger: 'blur' },
+          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
+        ],
+        userName: [
+          { required: true, message: '请输入登录名', trigger: 'blur' },
+          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
+        ]
+      },
+      filterAttrs: [],
+      filterProductAttrList: [
+        {
+          value: []
+        }
+      ],
+      changOptionName: '',
+      selectRolesList: [
+        { name: 'aduit', id: 0 },
+        { name: '阿斯达', id: 0 },
+        { name: '电饭锅', id: 0 },
+        { name: '很反感和', id: 0 },
+        { name: '意义', id: 0 }
+      ],
+      checkList: ['选中且禁用', '复选框 A']
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      // getProductCate(this.$route.query.id).then(response => {
+      //   this.productCate = response.data
+      // })
+      // getProductAttrInfo(this.$route.query.id).then(response => {
+      //   if (response.data != null && response.data.length > 0) {
+      //     this.filterProductAttrList = []
+      //     for (let i = 0; i < response.data.length; i++) {
+      //       this.filterProductAttrList.push({
+      //         key: Date.now() + i,
+      //         value: [response.data[i].attributeCategoryId, response.data[i].attributeId]
+      //       })
+      //     }
+      //   }
+      // })
+    } else {
+      this.productCate = Object.assign({}, defaultProductCate)
+    }
+    this.getSelectProductCateList()
+  },
+  methods: {
+    getSelectProductCateList() {
+      // fetchList(0, { pageSize: 100, pageNum: 1 }).then(response => {
+      //   this.selectProductCateList = response.data.list
+      //   this.selectProductCateList.unshift({ id: 0, name: '无上级分类' })
+      //   this.selectProductCateList.forEach(el => {
+      //     // eslint-disable-next-line eqeqeq
+      //     if (el.id == this.productCate.parentId) {
+      //       this.changOptionName = el.name
+      //     }
+      //   })
+      //   console.log(this.changOptionName)
+      //   this.getProductAttrCateList()
+      // })
+    },
+    getProductAttrCateList() {
+      console.log(this.changOptionName)
+      // const params = { productAttrCateId: null, parentName: this.changOptionName }
+      // fetchListWithAttr(params).then(response => {
+      //   const list = response.data
+      //   for (let i = 0; i < list.length; i++) {
+      //     const productAttrCate = list[i]
+      //     const children = []
+      //     if (productAttrCate.productAttributeList != null && productAttrCate.productAttributeList.length > 0) {
+      //       for (let j = 0; j < productAttrCate.productAttributeList.length; j++) {
+      //         children.push({
+      //           label: productAttrCate.productAttributeList[j].name,
+      //           value: productAttrCate.productAttributeList[j].id
+      //         })
+      //       }
+      //     }
+      //     // this.filterAttrs.push({label: productAttrCate.name, value: productAttrCate.id, children: children});
+      //     this.filterAttrs.push({ label: productAttrCate.name, value: productAttrCate.id })
+      //   }
+      // })
+    },
+    getProductAttributeIdList() {
+      // 获取选中的筛选商品属性
+      const productAttributeIdList = []
+      for (let i = 0; i < this.filterProductAttrList.length; i++) {
+        const item = this.filterProductAttrList[i]
+        if (item.value !== null && item.value.length === 1) {
+          productAttributeIdList.push(item.value[0])
+        }
+      }
+      return productAttributeIdList
+    },
+    changeAttrProductCate(value) {
+      this.selectProductCateList.forEach(el => {
+        // eslint-disable-next-line eqeqeq
+        if (value == el.id) {
+          this.changOptionName = el.name
+        }
+      })
+      console.log(this.changOptionName)
+    },
+    changeFilterProductAttrFn(value) {
+      console.log(value)
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            if (this.isEdit) {
+              this.productCate.productAttributeIdList = this.getProductAttributeIdList()
+              // updateProductCate(this.$route.query.id, this.productCate).then(response => {
+              //   this.$message({
+              //     message: '修改成功',
+              //     type: 'success',
+              //     duration: 1000
+              //   })
+              //   this.$router.back()
+              // })
+            } else {
+              this.productCate.productAttributeIdList = this.getProductAttributeIdList()
+              // createProductCate(this.productCate).then(response => {
+              //   this.$refs[formName].resetFields()
+              //   this.resetForm(formName)
+              //   this.$message({
+              //     message: '提交成功',
+              //     type: 'success',
+              //     duration: 1000
+              //   })
+              // })
+            }
+          })
+        } else {
+          this.$message({
+            message: '验证失败',
+            type: 'error',
+            duration: 1000
+          })
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.productCate = Object.assign({}, defaultProductCate)
+      this.getSelectProductCateList()
+      this.filterProductAttrList = [
+        {
+          value: []
+        }
+      ]
+    },
+    removeFilterAttr(productAttributeId) {
+      if (this.filterProductAttrList.length === 1) {
+        this.$message({
+          message: '至少要留一个',
+          type: 'warning',
+          duration: 1000
+        })
+        return
+      }
+      var index = this.filterProductAttrList.indexOf(productAttributeId)
+      if (index !== -1) {
+        this.filterProductAttrList.splice(index, 1)
+      }
+    },
+    handleAddFilterAttr() {
+      if (this.filterProductAttrList.length === 3) {
+        this.$message({
+          message: '最多添加三个',
+          type: 'warning',
+          duration: 1000
+        })
+        return
+      }
+      this.filterProductAttrList.push({
+        value: null,
+        key: Date.now()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.form-container {
+  width: 800px;
+}
+</style>

src/views/sys/users/form.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-page-header :content="isEdit?'修改用户':'添加用户'" />
-    <el-card class="form-container" shadow="never">
-      <el-form ref="menuFrom" :model="menu" :rules="rules" label-width="150px">
-        <el-form-item label="上级菜单：" prop="parentId">
-          <span>{{ parentTitle }}</span>
-          <el-input v-model="menu.parentId" hidden />
-        </el-form-item>
-        <el-form-item label="菜单名称：" prop="title">
-          <el-input v-model="menu.title" />
-        </el-form-item>
-        <el-form-item label="前端名称：" prop="name">
-          <el-input v-model="menu.name" />
-        </el-form-item>
-        <el-form-item label="前端图标：" prop="icon">
-          <el-input v-model="menu.icon" style="width: 80%" />
-          <svg-icon style="margin-left: 8px" :icon-class="menu.icon" />
-        </el-form-item>
-        <el-form-item label="状态：">
-          <el-radio-group v-model="menu.status">
-            <el-radio :label="0">启用</el-radio>
-            <el-radio :label="1">停用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="排序：">
-          <el-input v-model="menu.sort" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSubmit('menuFrom')">提交</el-button>
-          <el-button v-if="!isEdit" @click="resetForm('menuFrom')">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-  </div>
-</template>
-<script>
-import { getMenu, updateMenu, createMenu } from '@/api/menu'
-const defaultMenu = {
-  id: '',
-  title: '',
-  name: '',
-  icon: '',
-  status: 0,
-  sort: 0,
-  parentId: ''
-}
-export default {
-  name: 'MenuForm',
-  data() {
-    return {
-      parentTitle: '',
-      menu: Object.assign({}, defaultMenu),
-      isEdit: false
-    }
-  },
-  watch: {
-    $route(route) {
-      this.resetParentId()
-      this.getFormData()
-    }
-  },
-  created() {
-    this.resetParentId()
-    this.getFormData()
-  },
-  methods: {
-    resetParentId() {
-      if (this.$route.query.parentId != null) {
-        this.menu.parentId = this.$route.query.parentId
-        this.parentTitle = this.$route.query.title
-      } else {
-        this.menu.parentId = ''
-        this.parentTitle = ''
-      }
-    },
-    getFormData() {
-      if (this.$route.query.id != null) {
-        this.menu.id = this.$route.query.id
-        this.isEdit = true
-        getMenu(this.menu.id).then(response => {
-          this.menu.title = response.data.title
-          this.menu.name = response.data.name
-          this.menu.icon = response.data.icon
-          this.menu.status = response.data.status
-          this.menu.sort = response.data.sort
-          this.menu.parentId = response.data.parentId
-        })
-      } else {
-        this.menu.id = ''
-        this.isEdit = false
-        this.menu = Object.assign({}, defaultMenu)
-      }
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields()
-      this.menu = Object.assign({}, defaultMenu)
-      this.getFormData()
-    },
-    onSubmit(formName) {
-      this.$refs[formName].validate(valid => {
-        if (valid) {
-          this.$confirm('是否提交数据', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }).then(() => {
-            if (this.isEdit) {
-              updateMenu(this.$route.query.id, this.menu).then(response => {
-                this.$message({
-                  message: '修改成功',
-                  type: 'success',
-                  duration: 1000
-                })
-                this.$router.back()
-              })
-            } else {
-              createMenu(this.menu).then(response => {
-                this.$refs[formName].resetFields()
-                this.resetForm(formName)
-                this.$message({
-                  message: '提交成功',
-                  type: 'success',
-                  duration: 1000
-                })
-                this.$router.back()
-              })
-            }
-          })
-        } else {
-          this.$message({
-            message: '验证失败',
-            type: 'error',
-            duration: 1000
-          })
-          return false
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

src/views/sys/users/list.vue

@@ -148,10 +148,10 @@ export default {
       })
     },
     handleUpdate(index, row) {
-      this.$router.push({ path: '/sys/users/form', query: { id: row.id }})
+      this.$router.push({ path: '/sys/users/update', query: { id: row.id }})
     },
     handleCreate() {
-      this.$router.push({ path: '/sys/users/form' })
+      this.$router.push({ path: '/sys/users/add' })
     },
     handleDelete(index, row) {
       this.$confirm('是否要删除该菜单', '提示', {

src/views/sys/users/update.vue

@@ -0,0 +1,13 @@
+<template>
+  <users-detail :is-edit="true" />
+</template>
+<script>
+import UsersDetail from './components/usersDetail'
+export default {
+  name: 'UpdateUsers',
+  components: { UsersDetail }
+}
+</script>
+<style>
+</style>
+