完成产品信息项目;

index.ejs

@@ -40,6 +40,14 @@
               "title": "销售合同",
               "appName": 'salesContracts',
               "url": "/salesContract"
+            },
+            {
+              appName: "products",
+              icon: "fa-product-hunt",
+              id: 1,
+              isRouteShow: 1,
+              title: "产品信息",
+              url: "/product"
             }
           ],
           homePage: {

src/api.js

 import ElementApi from './apis/project'
 import sales from './apis/sales'
 import contract from './apis/contract'
+import product from './apis/product'
 const usingJSONP = process.env.NODE_ENV !== 'production'
 const API_HOST = process.env.API_HOST
 const API_PORT = process.env.API_PORT
@@ -25,7 +26,7 @@ const option = {
 }
 
 let apis = {}
-apis = Object.assign(apis, ElementApi, sales, contract)
+apis = Object.assign(apis, ElementApi, sales, contract, product)
 export default {
   option,
   ...apis

src/apis/product.js

+export default {
+  // 1 获取产品筛选
+  getProductFilter: {
+    url: '/vue/product/get-filter'
+  },
+  // 2 获取产品列表
+  getProductList: {
+    url: '/vue/product/list'
+  },
+  // 3 获取产品编辑信息
+  getProductEdit: {
+    url: '/vue/product/get-edit'
+  },
+  // 4 获取新建产品 option
+  getProductNewOptions: {
+    url: '/vue/product/get-new'
+  },
+  // 5 保存产品编辑
+  saveProductEdit: {
+    url: '/vue/product/save-edit'
+  },
+  // 6 保存产品新建
+  saveProductAdd: {
+    url: '/vue/product/save-new'
+  },
+  // 7 删除产品
+  delProduct: {
+    url: '/vue/product/delete'
+  },
+
+  // 1 获取产品类别
+  getProductComponent: {
+    url: '/vue/product/get-product-component'
+  },
+  // 2 获取产品系列
+  getProductSerie: {
+    url: '/vue/product/get-product-serie'
+  },
+
+  // 1 产品分类
+  getProductTypeList: {
+    url: '/vue/product/list-product-type'
+  },
+  // 2 产品类别
+  getProductComponentList: {
+    url: '/vue/product/list-product-component'
+  },
+  // 3 产品品牌
+  getProductBrandList: {
+    url: '/vue/product/list-product-brand'
+  },
+  // 4 产品系列
+  getProductSerieList: {
+    url: '/vue/product/list-product-serie'
+  },
+  // 5 产品保修期限
+  getProductQaList: {
+    url: '/vue/product/list-product-qa'
+  },
+  // 6 产品自定义
+  getProductMiscList: {
+    url: '/vue/product/list-product-misc'
+  },
+
+  // 1 获取产品分类新建
+  getNewProductType: {
+    url: '/vue/product/get-new-product-type'
+  },
+  // 2 获取产品类别新建
+  getNewProductComponent: {
+    url: '/vue/product/get-new-product-component'
+  },
+  // 3 获取产品品牌新建
+  getNewProductBrand: {
+    url: '/vue/product/get-new-product-brand'
+  },
+  // 4 获取产品系列新建
+  getNewProductSerie: {
+    url: '/vue/product/get-new-product-serie'
+  },
+  // 5 获取保修期限新建
+  getNewProductQa: {
+    url: '/vue/product/get-new-product-qa'
+  },
+  // 6 获取自定义新建
+  getNewProductMisc: {
+    url: '/vue/product/get-new-product-misc'
+  },
+
+  // 1 获取产品分类编辑
+  getEditProductType: {
+    url: '/vue/product/get-edit-product-type'
+  },
+  // 2 获取产品类别编辑
+  getEditProductComponent: {
+    url: '/vue/product/get-edit-product-component'
+  },
+  // 3 获取产品品牌编辑
+  getEditProductBrand: {
+    url: '/vue/product/get-edit-product-brand'
+  },
+  // 4 获取产品系列编辑
+  getEditProductSerie: {
+    url: '/vue/product/get-edit-product-serie'
+  },
+  // 5 获取保修期限编辑
+  getEditProductQa: {
+    url: '/vue/product/get-edit-product-qa'
+  },
+  // 6 获取自定义编辑
+  getEditProductMisc: {
+    url: '/vue/product/get-edit-product-misc'
+  },
+
+  // 1 产品分类新建
+  saveNewProductType: {
+    url: '/vue/product/save-new-product-type'
+  },
+  // 2 产品类别新建
+  saveNewProductComponent: {
+    url: '/vue/product/save-new-product-component'
+  },
+  // 3 产品品牌新建
+  saveNewProductBrand: {
+    url: '/vue/product/save-new-product-brand'
+  },
+  // 4 产品系列新建
+  saveNewProductSerie: {
+    url: '/vue/product/save-new-product-serie'
+  },
+  // 5 产品保修期限新建
+  saveNewProductQa: {
+    url: '/vue/product/save-new-product-qa'
+  },
+  // 5 产品保修期限新建
+  saveNewProductMisc: {
+    url: '/vue/product/save-new-product-misc'
+  },
+
+  // 1 产品分类编辑保存
+  saveEditProductType: {
+    url: '/vue/product/save-edit-product-type'
+  },
+  // 2 产品类别编辑保存
+  saveEditProductComponent: {
+    url: '/vue/product/save-edit-product-component'
+  },
+  // 3 产品品牌编辑保存
+  saveEditProductBrand: {
+    url: '/vue/product/save-edit-product-brand'
+  },
+  // 4 产品系列编辑保存
+  saveEditProductSerie: {
+    url: '/vue/product/save-edit-product-serie'
+  },
+  // 5 产品保修期编辑保存
+  saveEditProductQa: {
+    url: '/vue/product/save-edit-product-qa'
+  },
+  // 6 产品自定义编辑保存
+  saveEditProductMisc: {
+    url: '/vue/product/save-edit-product-misc'
+  },
+
+  // 1 删除产品分类
+  delProductType: {
+    url: '/vue/product/delete-product-type'
+  },
+  // 2 删除产品类别
+  delProductComponent: {
+    url: '/vue/product/delete-product-component'
+  },
+  // 3 删除产品品牌
+  delProductBrand: {
+    url: '/vue/product/delete-product-brand'
+  },
+  // 4 删除产品系列
+  delProductSerie: {
+    url: '/vue/product/delete-product-serie'
+  },
+  // 5 删除保修期限
+  delProductQa: {
+    url: '/vue/product/delete-product-qa'
+  },
+  // 5 删除产品自定义
+  delProductMisc: {
+    url: '/vue/product/delete-product-misc'
+  },
+
+  // 1 获取产品类别筛选
+  getProductComponentFilter: {
+    url: '/vue/product/get-filter-component'
+  },
+  // 2 获取产品系列筛选
+  getProductSerieFilter: {
+    url: '/vue/product/get-filter-serie'
+  },
+
+  // 搜索供应商名称
+  searchSupplierByName: {
+    url: '/vue/search/supplier-by-name'
+  }
+}

src/components/common/clientHeader.vue

@@ -15,6 +15,7 @@
                  :reset-form="resetForm"
                  :buttons="buttons"
                  :icon="icon"
+                 :create-disabled="createDisabled"
                  :model="model" v-if="type !== ''"></component>
     </el-row>
   </div>
@@ -45,7 +46,8 @@
       'keyCode',
       'buttons',
       'icon',
-      'resetForm'],
+      'resetForm',
+      'createDisabled'],
     created () {
     }
   }

src/components/common/keywordHeader.vue

@@ -8,7 +8,7 @@
           </el-input>
         </el-form-item>
         <el-form-item v-if="searchKey">
-          <el-button type="primary" size="mini" @click.prevent.stop="addNewUser">
+          <el-button type="primary" size="mini" @click.prevent.stop="addNewUser" :disabled="createDisabled">
             <i class="fa fa-plus faa-pulse animated"></i> {{buttonTitle}}
           </el-button>
         </el-form-item>
@@ -36,7 +36,7 @@
       //   this.$emit('update:addNew')
       // }
     },
-    props: ['model', 'searchKey', 'keyCode', 'buttonTitle', 'searchKeyword', 'addNewUser', 'resetForm'],
+    props: ['model', 'searchKey', 'keyCode', 'buttonTitle', 'searchKeyword', 'addNewUser', 'resetForm', 'createDisabled'],
     created () {
     }
   }

src/components/products/childrenNav.vue

+<template>
+    <div class="client-children-nav">
+      <router-link v-for="(nav, key) in navs"
+                   :key="key"
+                   :to="{app: nav.appName, name: nav.routerName}"
+                   :class="['btn',
+                 'btn-default',
+                 'btn-sm', {'btn-info': routeName === nav.routerName && appName === nav.appName},
+                 {'disabled': routeName === nav.routerName && appName === nav.appName}]">
+        {{nav.title}}
+      </router-link>
+    </div>
+</template>
+
+<script>
+  const navs = () => {
+    return [
+      {
+        title: '产品信息',
+        routerName: 'productList',
+        appName: 'products'
+      },
+      {
+        title: '产品设置',
+        routerName: 'productType',
+        appName: 'products'
+      },
+      {
+        title: '设置类别',
+        routerName: 'productComponent',
+        appName: 'products'
+      },
+      {
+        title: '设置品牌',
+        routerName: 'productBrand',
+        appName: 'products'
+      },
+      {
+        title: '设置系列',
+        routerName: 'productSerie',
+        appName: 'products'
+      },
+      {
+        title: '设置自定义',
+        routerName: 'productMisc',
+        appName: 'products'
+      },
+      {
+        title: '设置保修期限',
+        routerName: 'productQa',
+        appName: 'products'
+      }
+    ]
+  }
+  export default {
+    name: '',
+    data () {
+      return {
+        navs: navs(),
+        routeName: '',
+        appName: ''
+      }
+    },
+    methods: {},
+    created () {
+    },
+    mounted () {
+      let path = this.$route.name.split('-')
+      console.log(path)
+      this.appName = path[0]
+      this.routeName = path[1]
+    }
+  }
+</script>
+
+<style scoped>
+  .client-children-nav{
+    margin: 0px 0px 15px;
+  }
+  .client-children-nav a.btn{
+    margin-left: 4px;
+    padding: 3.5px 7px;
+  }
+</style>

src/components/products/list.vue

+<template>
+  <section>
+    <div class="content">
+      <client-header ref="clientHeader"
+                     title="产品信息"
+                     :title-span="6"
+                     :model="form"
+                     search-key="Products"
+                     key-code="keyword"
+                     type="keyword"
+                     button-title="新建产品信息 "
+                     :reset-form="resetForm"
+                     :add-new-user="addNewProduct"
+                     :search-keyword="searchKeyword"></client-header>
+      <client-form ref="clientForm"
+                   :filter="filter"
+                   :update-filter="updateFilter"
+                   @update:clientList="form =>{ updateForm(form)}"
+                   :form-search-key="formSearchKey"></client-form>
+      <div class="page-body-content">
+        <children-nav></children-nav>
+        <div v-loading="loading">
+          <ScheduleItem
+            v-for="(item, key) in result.list"
+            :item="item"
+            :key="key">
+            <span slot="opearate">
+            <el-button class="pull-right"
+                       type="primary"
+                       size="mini"
+                       :disabled="!item.can_delete"
+                       @click="delProduct(item.id)">
+              <i class="fa fa-trash-o faa-shake"></i> 删除
+            </el-button>
+            <el-button class="pull-right"
+                       type="primary"
+                       size="mini"
+                       :disabled="!item.can_update"
+                       @click.prevent.stop="editProduct(item)">
+              <i class="fa fa-edit"></i> 编辑
+            </el-button>
+          </span>
+          </ScheduleItem>
+          <div v-if="result.list.length === 0">
+            <el-card class="box-card">
+              未查询到数据!
+            </el-card>
+          </div>
+        </div>
+        <Pagenation
+          @update:pager="pager => {updatePage(pager)}"
+          :pager.sync="pagenation"
+          :total="totalcount">
+        </Pagenation>
+      </div>
+    </div>
+    <side-popup ref="sidePopup" :title="operationTitle" v-click-outside="popupClose">
+      <component :is="operationPage" :ref="operationPage" @close="getList => {close(getList)}"></component>
+    </side-popup>
+  </section>
+</template>
+
+<script>
+  import clientHeader from '../common/clientHeader'
+  import clientForm from './productListForm'
+  import clickOutside from '@/lib/bind'
+  import Pagenation from '../common/schedulePagenation'
+  import ScheduleItem from './scheduleItem'
+  import childrenNav from './childrenNav'
+  import addProduct from './operation/addProduct'
+  import editProduct from './operation/editProduct'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+
+  export default {
+    name: '',
+    components: {
+      clientHeader,
+      clientForm,
+      Pagenation,
+      ScheduleItem,
+      childrenNav,
+      addProduct,
+      editProduct
+    },
+    directives: {
+      clickOutside
+    },
+    data () {
+      return {
+        operationPage: '',
+        operationTitle: '',
+        result: {
+          list: []
+        },
+        form: {
+          'Products[keyword]': ''
+        },
+        filter: [],
+        pagenation: {
+          page: 1
+        },
+        totalcount: 0,
+        loading: false,
+        formSearchKey: 'Products'
+      }
+    },
+    methods: {
+      updateFilter (form, trigger) {
+        if (trigger.key === 'Products[product_type]') {
+          this.getTypeOptions({
+            product_type: trigger.value
+          }, 'ProductSearch[product_component]')
+        }
+        if (trigger.key === 'ProductSearch[product_component]' || trigger.key === 'ProductSearch[product_brand]') {
+          this.getBrandOptions({
+            product_brand: form['ProductSearch[product_brand]'],
+            product_component: form['ProductSearch[product_component]']
+          }, 'ProductSearch[product_serie]')
+        }
+      },
+      getTypeOptions (data, key) {
+        requestAPI(api.getProductComponent, {
+          data
+        }).then(res => {
+          this.$set(this.filter, key, res)
+        })
+      },
+      getBrandOptions (data, key) {
+        requestAPI(api.getProductSerie, {
+          data
+        }).then(res => {
+          this.$set(this.filter, key, res)
+        })
+      },
+      delProduct (id) {
+        this.$confirm('确认删除吗?', '提示').then(() => {
+          requestAPI(api.delProduct, {
+            data: {
+              id
+            }
+          }).then(() => {
+            this.$message('删除成功！')
+            this.getList()
+          }, error => {
+            if (Array.isArray(error.msg)) {
+              error.msg.forEach(item => {
+                this.$notify.error({
+                  title: '错误',
+                  message: item.error
+                })
+              })
+            }
+          })
+        }).catch(_ => {
+        })
+      },
+      addNewProduct () {
+        this.operationPage = 'addProduct'
+        this.operationTitle = '新建产品'
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].init())
+        })
+      },
+      editProduct (row) {
+        this.operationPage = 'editProduct'
+        this.operationTitle = '编辑产品'
+        // this.$router.push({name: 'editProject', params: {id: row.id}})
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].init(row.id))
+        })
+      },
+      close (getList) {
+        console.log(getList)
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+        if (getList) {
+          this.getList()
+        }
+      },
+      leaveMessageSch (item) {
+        this.$refs.leaveMessage.btnShow(item)
+        // console.log(this.$el.querySelector())
+      },
+
+      lmClose () {
+        this.$refs.leaveMessage &&
+        this.$refs.leaveMessage.btnClose()
+      },
+      popupClose () {
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+      },
+      searchKeyword (search) {
+        this.updateForm(search)
+      },
+      updateForm (form) {
+        let trigger = {
+          key: '',
+          value: ''
+        }
+        Object.keys(form).forEach(item => {
+          trigger.key = item
+          trigger.value = form[item]
+        })
+        Object.assign(this.form, form)
+        this.updateFilter(this.form, trigger)
+        this.getList()
+      },
+      updatePage (pager) {
+        Object.assign(this.pagenation, pager)
+        this.getList(true)
+      },
+      resetForm () {
+        this.$refs.clientForm.resetForm()
+        Object.keys(this.form).forEach(item => {
+          this.form[item] = ''
+        })
+        this.getList()
+      },
+      getList (toTop) {
+        if (this.loading) {
+          return
+        }
+        this.loading = true
+        requestAPI(api.getProductList, {
+          data: {
+            ...this.form,
+            page: this.pagenation.page
+          }
+        }).then(res => {
+          this.result.list = res.list
+          // this.pagenation.page = res.pagenation.thispage
+          this.totalcount = res.pagenation.totalcount
+          // this.totalcount = 8
+          if (toTop) {
+            this.$el.querySelector('.page-body-content').scrollTo(0, 0)
+          }
+        }).finally(_ => {
+          this.loading = false
+        })
+      },
+      getFilter () {
+        requestAPI(api.getProductFilter).then(res => {
+          this.filter = res
+        })
+      }
+    },
+    created () {
+      this.getFilter()
+      this.$nextTick(() => {
+        this.getList()
+      })
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @include c('schedule-right') {
+    > .el-row {
+      > .el-col {
+        margin-bottom: 4px;
+
+        .el-button {
+          margin: 0 2px;
+          padding: 7px;
+        }
+
+        .date-time {
+          color: #649FD7;
+        }
+      }
+    }
+    .badge {
+      border-radius: 2px;
+      color: #333744;
+      background: #ffffff;
+      vertical-align: baseline;
+      display: inline;
+      padding: 2px 6px;
+    }
+    span.badge-unread {
+      &:hover {
+        border-color: #de321d
+      }
+
+      color: #fff;
+      background-color: #e54c3a;
+      border-color: #a32516
+    }
+  }
+</style>

src/components/products/operation/addProduct.vue

+<template>
+    <section>
+      <operation-product
+        ref="operationProduct"
+        type="add"
+        :error-data="errorData">
+        <span slot="operationBtn">
+          <el-button type="primary"  @click="saveProduct" size="mini">保存</el-button>
+          <el-button @click="close()" size="mini">关闭</el-button>
+        </span>
+      </operation-product>
+    </section>
+</template>
+
+<script>
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  import operationProduct from './operationProduct'
+  import {setModule} from '../../../lib/viewHelper'
+  export default {
+    name: '',
+    components: {
+      operationProduct
+    },
+    data () {
+      return {
+        errorData: {}
+      }
+    },
+    methods: {
+      saveProduct () {
+        let form = this.$refs.operationProduct.getForm()
+        let subData = setModule(form.Products, 'Products')
+        requestAPI(api.saveProductAdd, {
+          data: {...subData}
+        }).then(res => {
+          this.$message({
+            message: '保存成功!',
+            type: 'success'
+          })
+          this.close(true)
+        }, error => {
+          error.msg.forEach(item => {
+            this.$set(this.errorData, item.name, item.error)
+          })
+        })
+      },
+      init (id) {
+        this.$refs.operationProduct.initAdd(id)
+      },
+      close (getList) {
+        this.$emit('close', getList)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/products/operation/editProduct.vue

+<template>
+  <section>
+    <operation-product
+      ref="operationProduct"
+      type="edit"
+      :error-data="errorData">
+        <span slot="operationBtn">
+          <el-button type="primary"  @click="saveProduct" size="mini">保存</el-button>
+          <el-button @click="close()" size="mini">关闭</el-button>
+        </span>
+    </operation-product>
+  </section>
+</template>
+
+<script>
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  import operationProduct from './operationProduct'
+  import {setModule} from '../../../lib/viewHelper'
+  export default {
+    name: '',
+    components: {
+      operationProduct
+    },
+    data () {
+      return {
+        errorData: {}
+      }
+    },
+    methods: {
+      saveProduct () {
+        let form = this.$refs.operationProduct.getForm()
+        let subData = setModule(form.Products, 'Products')
+        requestAPI(api.saveProductEdit, {
+          data: {...subData}
+        }).then(res => {
+          this.$message({
+            message: '保存成功!',
+            type: 'success'
+          })
+          this.close(true)
+        }, error => {
+          error.msg.forEach(item => {
+            this.$set(this.errorData, item.name, item.error)
+          })
+        })
+      },
+      init (id) {
+        this.$refs.operationProduct.initEdit(id)
+      },
+      close (getList) {
+        this.$emit('close', getList)
+      }
+    },
+    created () {
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/products/operation/operationProduct.vue

+<template>
+    <div class="product-add-edit-form auto-template-form">
+      <el-form ref="form" :model="Products">
+        <el-form-item :show-message="false" :error="setError('name')">
+          <single-input
+            label="产品名称"
+            :required="true"
+            :form-item="Products.name"
+            @update:item="val => {Products.name = val}"></single-input>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('product_type')">
+          <single-select
+            :form-item="Products.product_type"
+            label="产品分类"
+            :set-option="setComponentOptions"
+            :options-list="getOptions('Products[product_type]')"
+            @update:item="val => {Products.product_type = val}">
+          <span slot="formError" class="el-form-item__error">
+            {{errorData['product_type']}}
+          </span>
+          </single-select>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('product_component')">
+          <single-select
+            :form-item="Products.product_component"
+            label="产品类别"
+            :options-list="getOptions('Products[product_component]')"
+            :set-option="setSerieOptions"
+            @update:item="val => {Products.product_component = val}">
+          <span slot="formError" class="el-form-item__error">
+            {{errorData['product_component']}}
+          </span>
+          </single-select>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('product_brand')">
+          <single-select
+            :form-item="Products.product_brand"
+            label="产品品牌"
+            :options-list="getOptions('Products[product_brand]')"
+            :set-option="setSerieOptions"
+            @update:item="val => {Products.product_brand = val}">
+          <span slot="formError" class="el-form-item__error">
+            {{errorData['product_brand']}}
+          </span>
+          </single-select>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('product_serie')">
+          <single-select
+            :form-item="Products.product_serie"
+            label="产品系列"
+            :options-list="getOptions('Products[product_serie]')"
+            @update:item="val => {Products.product_serie = val}">
+          <span slot="formError" class="el-form-item__error">
+            {{errorData['product_serie']}}
+          </span>
+          </single-select>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('product_misc')">
+          <single-select
+            :form-item="Products.product_misc"
+            label="自定义"
+            :options-list="getOptions('Products[product_misc]')"
+            @update:item="val => {Products.product_misc = val}">
+          <span slot="formError" class="el-form-item__error">
+            {{errorData['product_misc']}}
+          </span>
+          </single-select>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('product_qa')">
+          <single-select
+            :form-item="Products.product_qa"
+            label="保修期限"
+            :options-list="getOptions('Products[product_qa]')"
+            @update:item="val => {Products.product_qa = val}">
+          <span slot="formError" class="el-form-item__error">
+            {{errorData['product_qa']}}
+          </span>
+          </single-select>
+        </el-form-item>
+        <el-form-item ref="form" :model="Products" :error="setError('pn')">
+          <single-input
+            label="PN"
+            :form-item="Products.pn"
+            @update:item="val => {Products.pn = val}"></single-input>
+        </el-form-item>
+        <el-form-item>
+          <el-row :gutter="10">
+            <el-col :offset="4" :span="14">
+              <slot name="operationBtn">
+              </slot>
+              <!--<el-button type="primary" @click="test">测试</el-button>-->
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+    </div>
+</template>
+
+<script>
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  import operationMixins from '../../../lib/operationMixins'
+  export default {
+    name: '',
+    mixins: [operationMixins],
+    data () {
+      return {
+        Products: {
+          id: '',
+          name: '',
+          pn: '',
+          product_id: '',
+          product_type: '',
+          product_component: '',
+          product_brand: '',
+          product_serie: '',
+          product_misc: '',
+          product_qa: '',
+          description: ''
+        },
+        options: {},
+        optionsKey: 'Products'
+      }
+    },
+    methods: {
+      setComponentOptions (key) {
+        requestAPI(api.getSalesComponent, {
+          data: {
+            product_type: key
+          }
+        }).then(res => {
+          this.options['Products[product_component]'].value = []
+          res.forEach(item => {
+            this.options['Products[product_component]'].value.push(item)
+          })
+        })
+      },
+      setSerieOptions () {
+        this.$nextTick(() => {
+          requestAPI(api.getProductSerie, {
+            data: {
+              product_component: this.Products.product_component,
+              product_brand: this.Products.product_brand
+            }
+          }).then(res => {
+            this.options['Products[product_serie]'].value = []
+            res.forEach(item => {
+              this.options['Products[product_serie]'].value.push(item)
+            })
+          })
+        })
+      },
+      setError (error) {
+        return this.errorData[error] ? this.errorData[error] : ''
+      },
+      getOptions (key) {
+        let option = {}
+        if (key.indexOf('[') !== -1 && key.indexOf(']') !== -1) {
+          option = this.options[key]
+        } else {
+          option = this.options[this.optionsKey + '[' + key + ']']
+        }
+        if (option) {
+          return option.value
+        }
+        return []
+      },
+      getForm () {
+        return {[this.optionsKey]: this[this.optionsKey]}
+      },
+      initAdd () {
+        requestAPI(api.getProductNewOptions).then(res => {
+          Object.keys(res.options).forEach(key => {
+            this.$set(this.options, key, res.options[key])
+          })
+        })
+      },
+      initEdit (id) {
+        requestAPI(api.getProductEdit, {
+          data: {id}
+        }).then(res => {
+          console.log(res)
+        })
+      }
+    },
+    props: ['errorData']
+  }
+</script>
+
+<style lang="scss">
+  .auto-template-form {
+    .el-form-item {
+      margin-bottom: 15px;
+    }
+
+    .client-label {
+      position: relative;
+      font-size: 12px;
+    }
+
+    .client-label span {
+      padding-right: 10px;
+    }
+
+    .client-label.required:after {
+      content: "*";
+      color: #eb7567;
+      position: absolute;
+      top: 3px;
+      right: 6px;
+    }
+
+    .el-form-item__error {
+      position: static;
+    }
+  }
+</style>

src/components/products/productBrand.vue

+<template>
+  <section>
+    <div class="content">
+      <client-header ref="clientHeader"
+                     title="设置品牌"
+                     :title-span="6"
+                     :model="form"
+                     search-key="SearchForm"
+                     key-code="keyword"
+                     type="keyword"
+                     button-title="新建产品品牌 "
+                     :reset-form="resetForm"
+                     :add-new-user="addNewProductBrand"
+                     :search-keyword="searchKeyword"></client-header>
+      <div class="page-body-content">
+        <children-nav></children-nav>
+        <product-brand-table ref="productBrandTable" :table-list="result.list" :loading="loading">
+          <template slot="operationTable" slot-scope="scope">
+            <el-button
+              type="primary"
+              size="mini"
+              :disabled="!scope.row.can_update"
+              @click.prevent.stop="editBrand(scope.row.id)">
+              <i class="fa fa-edit"></i> 编辑
+            </el-button>
+            <el-button
+              type="primary"
+              size="mini"
+              :disabled="!scope.row.can_delete"
+              @click="delBrand(scope.row.id)">
+              <i class="fa fa-trash-o faa-shake"></i> 删除
+            </el-button>
+          </template>
+        </product-brand-table>
+        <Pagenation
+          @update:pager="pager => {updatePage(pager)}"
+          :pager.sync="pagenation"
+          :total="totalcount">
+        </Pagenation>
+      </div>
+    </div>
+    <side-popup ref="sidePopup" :title="operationTitle" v-click-outside="popupClose">
+      <component :is="operationPage" :ref="operationPage" @close="getList => {close(getList)}"></component>
+    </side-popup>
+  </section>
+</template>
+
+<script>
+  import clientHeader from '../common/clientHeader'
+  import childrenNav from './childrenNav'
+  import clickOutside from '@/lib/bind'
+  import Pagenation from '../common/schedulePagenation'
+  import productBrandTable from './productBrand/productBrandTable'
+  import operationProductBrand from './productBrand/operationProductBrand'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  export default {
+    name: '',
+    directives: {
+      clickOutside
+    },
+    data () {
+      return {
+        operationPage: '',
+        operationTitle: '',
+        form: {
+          'SearchForm[keyword]': ''
+        },
+        result: {
+          list: []
+        },
+        pagenation: {
+          page: 1
+        },
+        totalcount: 0,
+        loading: false,
+        can_create: true,
+        subForm: {}
+      }
+    },
+    components: {
+      clientHeader,
+      childrenNav,
+      Pagenation,
+      productBrandTable,
+      operationProductBrand
+    },
+    methods: {
+      resetForm () {
+        Object.keys(this.form).forEach(item => {
+          this.form[item] = ''
+        })
+        this.getList()
+      },
+      addNewProductBrand () {
+        this.operationPage = 'operationProductBrand'
+        this.operationTitle = '设置产品'
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].initAdd())
+        })
+      },
+      editBrand (id) {
+        this.operationPage = 'operationProductBrand'
+        this.operationTitle = '设置产品'
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].initEdit(id))
+        })
+      },
+      updateForm (form) {
+        this.subForm = Object.assign({}, this.form, form)
+        this.getList()
+      },
+      searchKeyword (search) {
+        this.updateForm(search)
+      },
+      updatePage (pager) {
+        Object.assign(this.pagenation, pager)
+        this.getList(true)
+      },
+      delBrand (id) {
+        this.$confirm('确认删除吗?', '提示').then(() => {
+          requestAPI(api.delProductBrand, {
+            data: {
+              id
+            }
+          }).then(() => {
+            this.$message('删除成功！')
+            this.getList()
+          }, error => {
+            if (Array.isArray(error.msg)) {
+              error.msg.forEach(item => {
+                this.$notify.error({
+                  title: '错误',
+                  message: item.error
+                })
+              })
+            }
+          })
+        }).catch(_ => {
+        })
+      },
+      close (getList) {
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+        if (getList) {
+          this.getList()
+        }
+      },
+      popupClose () {
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+      },
+      getList (toTop) {
+        if (this.loading) {
+          return
+        }
+        this.loading = true
+        requestAPI(api.getProductBrandList, {
+          data: {
+            ...Object.assign({}, this.form, this.subForm),
+            page: this.pagenation.page
+          }
+        }).then(res => {
+          this.can_create = !res.can_create
+          this.result.list = res.list
+          // this.pagenation.page = res.pagenation.thispage
+          this.totalcount = res.pagenation.totalcount
+          // this.totalcount = 8
+          if (toTop) {
+            this.$el.querySelector('.page-body-content').scrollTo(0, 0)
+          }
+        }).finally(_ => {
+          this.loading = false
+        })
+      }
+    },
+    created () {
+      this.getList()
+    }
+  }
+</script>
+
+<style scoped>
+  .el-button{
+    margin: 0 2px;
+    padding: 7px;
+  }
+</style>

src/components/products/productBrand/operationProductBrand.vue

+<template>
+  <section>
+    <div class="product-add-edit-form auto-template-form">
+      <el-form ref="form" :model="ProductBrands">
+        <el-form-item :show-message="false" :error="setError('name')">
+          <single-input
+            label="名称"
+            :required="true"
+            :form-item="ProductBrands.name"
+            @update:item="val => {ProductBrands.name = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['name']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('description')">
+          <single-input
+            label="备注"
+            type="textarea"
+            :rows="4"
+            :form-item="ProductBrands.description"
+            @update:item="val => {ProductBrands.description = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['description']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('order')">
+          <single-input
+            label="排序"
+            :required="true"
+            :form-item="ProductBrands.order"
+            @update:item="val => {ProductBrands.order = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['order']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item>
+          <el-row :gutter="10">
+            <el-col :offset="4" :span="14">
+              <el-button type="primary" @click="saveProductBrand" size="mini">保存</el-button>
+              <el-button @click="close()" size="mini">关闭</el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+    </div>
+  </section>
+</template>
+
+<script>
+  import operationMixins from '../../../lib/operationMixins'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  import {setModule} from '../../../lib/viewHelper'
+
+  export default {
+    name: '',
+    mixins: [operationMixins],
+    data () {
+      return {
+        ProductBrands: {
+          id: '',
+          name: '',
+          order: '',
+          description: ''
+        },
+        errorData: {}
+      }
+    },
+    methods: {
+      saveProductBrand () {
+        let url = ''
+        if (this.ProductBrands.id !== '') {
+          url = api.saveEditProductBrand
+        } else {
+          url = api.saveNewProductBrand
+        }
+        let subData = setModule(this.ProductBrands, 'ProductBrands')
+        requestAPI(url, {
+          data: {...subData}
+        }).then(res => {
+          this.$message({
+            message: '保存成功!',
+            type: 'success'
+          })
+          this.close(true)
+        }, error => {
+          error.msg.forEach(item => {
+            this.$set(this.errorData, item.name, item.error)
+          })
+        })
+      },
+      setError (error) {
+        return this.errorData[error] ? this.errorData[error] : ''
+      },
+      close (getList) {
+        this.$emit('close', getList)
+        this.$nextTick(() => {
+          Object.keys(this.ProductBrands).forEach(item => {
+            this.ProductBrands[item] = ''
+          })
+        })
+      },
+      initAdd () {
+        requestAPI(api.getNewProductBrand).then(res => {
+          this.ProductBrands.order = res.nextOrder
+        })
+      },
+      initEdit (id) {
+        requestAPI(api.getEditProductBrand, {
+          data: {
+            id
+          }
+        }).then(res => {
+          Object.keys(this.ProductBrands).forEach(item => {
+            this.ProductBrands[item] = res.model[item]
+          })
+        })
+      }
+    },
+    created () {
+    }
+  }
+</script>
+
+<style lang="scss">
+  .auto-template-form {
+    .el-form-item {
+      margin-bottom: 15px;
+    }
+
+    .client-label {
+      position: relative;
+      font-size: 12px;
+    }
+
+    .client-label span {
+      padding-right: 10px;
+    }
+
+    .client-label.required:after {
+      content: "*";
+      color: #eb7567;
+      position: absolute;
+      top: 3px;
+      right: 6px;
+    }
+
+    .el-form-item__error {
+      position: static;
+    }
+  }
+</style>

src/components/products/productBrand/productBrandTable.vue

+<template>
+  <section>
+    <el-table
+      v-loading="loading"
+      :data="tableList"
+      style="width: 100%"
+      :row-class-name="tableRowClassName"
+      border
+      :cell-style="{'font-size': '12px'}"
+      :header-cell-style="{'font-weight': 700,'font-size': '12px', color: '#000000'}">
+      <el-table-column
+        header-align="center"
+        align="center"
+        prop="order"
+        label="排序">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="left"
+        prop="name"
+        label="产品分类">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        prop="description"
+        label="备注">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="center"
+        label="操作">
+        <template slot-scope="scope">
+          <slot name="operationTable" :row="scope.row"></slot>
+        </template>
+      </el-table-column>
+    </el-table>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: '',
+    data () {
+      return {}
+    },
+    methods: {
+      tableRowClassName ({row, rowIndex}) {
+        if (rowIndex % 2 === 0) {
+          return 'stripe-class'
+        }
+      }
+    },
+    props: ['tableList', 'loading']
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/products/productComponent.vue

+<template>
+  <section>
+    <div class="content">
+      <client-header ref="clientHeader"
+                     title="设置类别"
+                     :title-span="6"
+                     :model="form"
+                     search-key="SearchForm"
+                     key-code="keyword"
+                     type="keyword"
+                     button-title="新建产品类别 "
+                     :reset-form="resetForm"
+                     :add-new-user="addNewProductComponent"
+                     :search-keyword="searchKeyword"></client-header>
+      <div class="page-body-content">
+        <children-nav></children-nav>
+        <product-component-table ref="productComponentTable" :table-list="result.list" :product-type="productType" :loading="loading">
+          <template slot="operationTable" slot-scope="scope">
+            <el-button
+              type="primary"
+              size="mini"
+              :disabled="!scope.row.can_update"
+              @click.prevent.stop="editComponent(scope.row.id)">
+              <i class="fa fa-edit"></i> 编辑
+            </el-button>
+            <el-button
+              type="primary"
+              size="mini"
+              :disabled="!scope.row.can_delete"
+              @click="delComponent(scope.row.id)">
+              <i class="fa fa-trash-o faa-shake"></i> 删除
+            </el-button>
+          </template>
+        </product-component-table>
+        <Pagenation
+          @update:pager="pager => {updatePage(pager)}"
+          :pager.sync="pagenation"
+          :total="totalcount">
+        </Pagenation>
+      </div>
+    </div>
+    <side-popup ref="sidePopup" :title="operationTitle" v-click-outside="popupClose">
+      <component :is="operationPage" :ref="operationPage" @close="getList => {close(getList)}"></component>
+    </side-popup>
+  </section>
+</template>
+
+<script>
+  import clientHeader from '../common/clientHeader'
+  import childrenNav from './childrenNav'
+  import clickOutside from '@/lib/bind'
+  import Pagenation from '../common/schedulePagenation'
+  import productComponentTable from './productComponent/productComponentTable'
+  import operationProductComponent from './productComponent/operationProductComponent'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  export default {
+    name: '',
+    directives: {
+      clickOutside
+    },
+    data () {
+      return {
+        operationPage: '',
+        operationTitle: '',
+        form: {
+          'SearchForm[keyword]': ''
+        },
+        result: {
+          list: []
+        },
+        pagenation: {
+          page: 1
+        },
+        totalcount: 0,
+        loading: false,
+        can_create: true,
+        productType: [],
+        subForm: {}
+      }
+    },
+    components: {
+      clientHeader,
+      childrenNav,
+      Pagenation,
+      productComponentTable,
+      operationProductComponent
+    },
+    methods: {
+      resetForm () {
+        Object.keys(this.form).forEach(item => {
+          this.form[item] = ''
+        })
+        this.getList()
+      },
+      addNewProductComponent () {
+        this.operationPage = 'operationProductComponent'
+        this.operationTitle = '设置类别'
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].initAdd())
+        })
+      },
+      editComponent (id) {
+        this.operationPage = 'operationProductComponent'
+        this.operationTitle = '设置产品'
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].initEdit(id))
+        })
+      },
+      updateForm (form) {
+        this.subForm = Object.assign({}, this.form, form)
+        this.getList()
+      },
+      searchKeyword (search) {
+        this.updateForm(search)
+      },
+      updatePage (pager) {
+        Object.assign(this.pagenation, pager)
+        this.getList(true)
+      },
+      delComponent (id) {
+        this.$confirm('确认删除吗?', '提示').then(() => {
+          requestAPI(api.delProductComponent, {
+            data: {
+              id
+            }
+          }).then(() => {
+            this.$message('删除成功！')
+            this.getList()
+          }, error => {
+            if (Array.isArray(error.msg)) {
+              error.msg.forEach(item => {
+                this.$notify.error({
+                  title: '错误',
+                  message: item.error
+                })
+              })
+            }
+          })
+        }).catch(_ => {
+        })
+      },
+      close (getList) {
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+        if (getList) {
+          this.getList()
+        }
+      },
+      popupClose () {
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+      },
+      getList (toTop) {
+        if (this.loading) {
+          return
+        }
+        this.loading = true
+        requestAPI(api.getProductComponentList, {
+          data: {
+            ...Object.assign({}, this.form, this.subForm),
+            page: this.pagenation.page
+          }
+        }).then(res => {
+          this.can_create = !res.can_create
+          this.result.list = res.list
+          // this.pagenation.page = res.pagenation.thispage
+          this.totalcount = res.pagenation.totalcount
+          // this.totalcount = 8
+          if (toTop) {
+            this.$el.querySelector('.page-body-content').scrollTo(0, 0)
+          }
+        }).finally(_ => {
+          this.loading = false
+        })
+      }
+    },
+    created () {
+      requestAPI(api.getProductComponentFilter).then(res => {
+        console.log(res)
+      })
+      this.getList()
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/products/productComponent/operationProductComponent.vue

+<template>
+  <section>
+    <div class="product-add-edit-form auto-template-form">
+      <el-form ref="form" :model="ProductComponents">
+        <el-form-item :show-message="false" :error="setError('product_type')">
+          <single-select
+            :form-item="ProductComponents.product_type"
+            label="产品分类"
+            :options-list="getOptions('product_type')"
+            @update:item="val => {ProductComponents.product_type = val}">
+          <span slot="formError" class="el-form-item__error">
+            {{errorData['product_type']}}
+          </span>
+          </single-select>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('name')">
+          <single-input
+            label="产品类别"
+            :required="true"
+            :form-item="ProductComponents.name"
+            @update:item="val => {ProductComponents.name = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['name']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('description')">
+          <single-input
+            label="备注"
+            type="textarea"
+            :rows="4"
+            :form-item="ProductComponents.description"
+            @update:item="val => {ProductComponents.description = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['description']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('order')">
+          <single-input
+            label="排序"
+            :required="true"
+            :form-item="ProductComponents.order"
+            @update:item="val => {ProductComponents.order = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['order']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item>
+          <el-row :gutter="10">
+            <el-col :offset="4" :span="14">
+              <el-button type="primary" @click="saveProductComponents" size="mini">保存</el-button>
+              <el-button @click="close()" size="mini">关闭</el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+    </div>
+  </section>
+</template>
+
+<script>
+  import operationMixins from '../../../lib/operationMixins'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  import {setModule} from '../../../lib/viewHelper'
+
+  export default {
+    name: '',
+    mixins: [operationMixins],
+    data () {
+      return {
+        ProductComponents: {
+          id: '',
+          product_type: '',
+          name: '',
+          order: '',
+          description: ''
+        },
+        options: {
+          'ProductComponents[product_type]': {
+            value: []
+          }
+        },
+        errorData: {},
+        optionsKey: 'ProductComponents'
+      }
+    },
+    methods: {
+      getOptions (key, searchKey) {
+        let sKey = searchKey || this.optionsKey
+        let option = this.options[sKey + '[' + key + ']']
+        console.log(option)
+        if (option) {
+          return option.value
+        }
+        return []
+      },
+      saveProductComponents () {
+        let url = ''
+        if (this.ProductComponents.id !== '') {
+          url = api.saveEditProductComponent
+        } else {
+          url = api.saveNewProductComponent
+        }
+        let subData = setModule(this.ProductComponents, 'ProductComponents')
+        requestAPI(url, {
+          data: {...subData}
+        }).then(res => {
+          this.$message({
+            message: '保存成功!',
+            type: 'success'
+          })
+          this.close(true)
+        }, error => {
+          error.msg.forEach(item => {
+            this.$set(this.errorData, item.name, item.error)
+          })
+        })
+      },
+      setError (error) {
+        return this.errorData[error] ? this.errorData[error] : ''
+      },
+      close (getList) {
+        this.$emit('close', getList)
+        this.$nextTick(() => {
+          Object.keys(this.ProductComponents).forEach(item => {
+            this.ProductComponents[item] = ''
+          })
+        })
+      },
+      initAdd () {
+        requestAPI(api.getNewProductComponent).then(res => {
+          this.ProductComponents.order = res.nextOrder
+        })
+      },
+      initEdit (id) {
+        requestAPI(api.getEditProductComponent, {
+          data: {
+            id
+          }
+        }).then(res => {
+          Object.keys(this.ProductComponents).forEach(item => {
+            this.ProductComponents[item] = res.model[item]
+          })
+          Object.keys(res.options).forEach(item => {
+            this.$set(this.options, item, res.options[item])
+          })
+          console.log(this.options)
+        })
+      }
+    },
+    created () {
+    }
+  }
+</script>
+
+<style lang="scss">
+  .auto-template-form {
+    .el-form-item {
+      margin-bottom: 15px;
+    }
+
+    .client-label {
+      position: relative;
+      font-size: 12px;
+    }
+
+    .client-label span {
+      padding-right: 10px;
+    }
+
+    .client-label.required:after {
+      content: "*";
+      color: #eb7567;
+      position: absolute;
+      top: 3px;
+      right: 6px;
+    }
+
+    .el-form-item__error {
+      position: static;
+    }
+  }
+</style>

src/components/products/productComponent/productComponentTable.vue

+<template>
+  <section class="product-component-table">
+    <el-table
+      v-loading="loading"
+      :data="tableList"
+      style="width: 100%"
+      :row-class-name="tableRowClassName"
+      border
+      :cell-style="{'font-size': '12px'}"
+      :header-cell-style="{'font-weight': 700,'font-size': '12px', color: '#000000'}">
+      <el-table-column
+        header-align="center"
+        align="center"
+        prop="order"
+        label="排序">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="left"
+        prop="name"
+        label="产品类别">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="left"
+        label="产品分类">
+        <template slot="header" slot-scope="scope">
+          <div style="line-height: 18px;">产品分类</div>
+          <el-select v-model="form.productType" placeholder="请选择" size="mini">
+            <el-option
+              v-for="item in productType"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </template>
+        <template slot-scope="scope">{{scope.row.productType.name}}</template>
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        prop="description"
+        label="备注">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="center"
+        label="操作">
+        <template slot-scope="scope">
+          <slot name="operationTable" :row="scope.row"></slot>
+        </template>
+      </el-table-column>
+    </el-table>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: '',
+    data () {
+      return {
+        form: {
+          productType: ''
+        }
+      }
+    },
+    methods: {
+      tableRowClassName ({row, rowIndex}) {
+        if (rowIndex % 2 === 0) {
+          return 'stripe-class'
+        }
+      }
+    },
+    props: ['tableList', 'productType', 'loading']
+  }
+</script>
+
+<style scoped>
+  .el-table .el-select{
+    width: 100%;
+    padding: 0 5px;
+  }
+</style>
+<style>
+  .product-component-table .el-table th{
+    vertical-align: top;
+  }
+  .product-component-table .el-table th div{
+    padding: 0;
+  }
+</style>

src/components/products/productListForm.vue

+<template>
+  <div>
+    <el-row class="form-content">
+      <el-form size="mini" :model="clientForm" label-width="0" label-position="top">
+        <el-col :span="4" v-for="(item, key) in filter" :key="key">
+          <el-form-item>
+            <span slot="label" v-if="item.key !== 'Filter[sort]'">
+              <a @click.prevent="timeSort" v-if="item.key === 'Filter[name]'">
+                {{item.name}}
+                <i :class="['fa', setSortIcon()]"></i>
+              </a>
+              <span v-else>
+                {{item.name}}
+              </span>
+            </span>
+            <el-select clearable
+                       v-model="clientForm[item.key]"
+                       placeholder="请选择"
+                       v-if="!item.itemKey && item.key !== 'Filter[sort]'" size="mini">
+              <el-option v-for="(option, optKey) in item.value"
+                         :key="optKey"
+                         :label="option.name"
+                         :value="option.key">
+                <span style="font-size: 12px;">{{option.name}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'client-form',
+    data () {
+      return {
+        clientForm: {}
+      }
+    },
+    props: ['filter', 'formSearchKey'],
+    methods: {
+      setSortIcon () {
+        if (this.clientForm['Filter[sort]'] === '') {
+          return 'fa-sort-amount-desc'
+        } else if (this.clientForm['Filter[sort]'] === 'DESC') {
+          return 'fa-sort-amount-desc'
+        } else {
+          return 'fa-sort-amount-asc'
+        }
+      },
+      timeSort () {
+        if (this.clientForm['Filter[sort]'] === '') {
+          this.clientForm['Filter[sort]'] = 'ASC'
+        } else if (this.clientForm['Filter[sort]'] === 'ASC') {
+          this.clientForm['Filter[sort]'] = 'DESC'
+        } else {
+          this.clientForm['Filter[sort]'] = 'ASC'
+        }
+      },
+      setSearchTime () {
+        let from = this.clientTimeRange.from
+        let to = this.clientTimeRange.to
+        this.$emit('update:clientList', Object.assign({}, {
+          [this.formSearchKey + '[from]']: from,
+          [this.formSearchKey + '[to]']: to
+        }, this.clientTimeForm, this.clientForm))
+      },
+      resetForm () {
+        Object.keys(this.clientForm).forEach(item => {
+          this.clientForm[item] = ''
+        })
+      }
+    },
+    watch: {
+      clientForm: {
+        handler (val) {
+          this.$emit('update:clientList', Object.assign({}, val, this.clientTimeForm))
+        },
+        deep: true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .form-content-time-top {
+    background: #FFF;
+  }
+
+  .form-content-time-top .el-form-item {
+    margin: 7px 0 9px;
+  }
+
+  .form-content-time-top .el-col {
+    padding: 0 15px;
+  }
+</style>
+<style>
+  .form-content .el-form-item__label {
+    font-size: 12px;
+    font-weight: normal;
+    padding: 0 2px 0 0;
+  }
+
+  .form-content-time-top .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    color: #fff !important;
+    background-color: #333744 !important;
+    border-color: #282b35 !important;
+    box-shadow: -1px 0 0 0 #282b35;
+  }
+
+  .form-content-time-top .el-radio-button:first-child .el-radio-button__inner {
+    border-left: 1px solid #DCDFE6;
+  }
+
+  .form-content-time-top .el-radio-button__inner:hover {
+    border-color: #DCDFE6 !important;
+  }
+
+  .form-content-time-top .el-form-item .el-form-item__content .form-content-time-range{
+    display: flex;
+    font-size: 12px;
+  }
+</style>

src/components/products/productMisc.vue

+<template>
+  <section>
+    <div class="content">
+      <client-header ref="clientHeader"
+                     title="设置自定义"
+                     :title-span="6"
+                     :model="form"
+                     search-key="SearchForm"
+                     key-code="keyword"
+                     type="keyword"
+                     button-title="新建产品自定义 "
+                     :reset-form="resetForm"
+                     :add-new-user="addNewProductMisc"
+                     :search-keyword="searchKeyword"></client-header>
+      <div class="page-body-content">
+        <children-nav></children-nav>
+        <product-misc-table ref="productTypeTable" :table-list="result.list" :loading="loading">
+          <template slot="operationTable" slot-scope="scope">
+            <el-button
+              type="primary"
+              size="mini"
+              :disabled="!scope.row.can_update"
+              @click.prevent.stop="editMisc(scope.row.id)">
+              <i class="fa fa-edit"></i> 编辑
+            </el-button>
+            <el-button
+              type="primary"
+              size="mini"
+              :disabled="!scope.row.can_delete"
+              @click="delMisc(scope.row.id)">
+              <i class="fa fa-trash-o faa-shake"></i> 删除
+            </el-button>
+          </template>
+        </product-misc-table>
+        <Pagenation
+          @update:pager="pager => {updatePage(pager)}"
+          :pager.sync="pagenation"
+          :total="totalcount">
+        </Pagenation>
+      </div>
+    </div>
+    <side-popup ref="sidePopup" :title="operationTitle" v-click-outside="popupClose">
+      <component :is="operationPage" :ref="operationPage" @close="getList => {close(getList)}"></component>
+    </side-popup>
+  </section>
+</template>
+
+<script>
+  import clientHeader from '../common/clientHeader'
+  import childrenNav from './childrenNav'
+  import clickOutside from '@/lib/bind'
+  import Pagenation from '../common/schedulePagenation'
+  import productMiscTable from './productMisc/productMiscTable'
+  import operationProductMisc from './productMisc/operationProductMisc'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  export default {
+    name: '',
+    directives: {
+      clickOutside
+    },
+    data () {
+      return {
+        operationPage: '',
+        operationTitle: '',
+        form: {
+          'SearchForm[keyword]': ''
+        },
+        result: {
+          list: []
+        },
+        pagenation: {
+          page: 1
+        },
+        totalcount: 0,
+        loading: false,
+        can_create: true,
+        subForm: {}
+      }
+    },
+    components: {
+      clientHeader,
+      childrenNav,
+      Pagenation,
+      productMiscTable,
+      operationProductMisc
+    },
+    methods: {
+      resetForm () {
+        Object.keys(this.form).forEach(item => {
+          this.form[item] = ''
+        })
+        this.getList()
+      },
+      addNewProductMisc () {
+        this.operationPage = 'operationProductMisc'
+        this.operationTitle = '设置产品'
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].initAdd())
+        })
+      },
+      editMisc (id) {
+        this.operationPage = 'operationProductMisc'
+        this.operationTitle = '设置产品'
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].initEdit(id))
+        })
+      },
+      updateForm (form) {
+        this.subForm = Object.assign({}, this.form, form)
+        this.getList()
+      },
+      searchKeyword (search) {
+        this.updateForm(search)
+      },
+      updatePage (pager) {
+        Object.assign(this.pagenation, pager)
+        this.getList(true)
+      },
+      delMisc (id) {
+        this.$confirm('确认删除吗?', '提示').then(() => {
+          requestAPI(api.delProductMisc, {
+            data: {
+              id
+            }
+          }).then(() => {
+            this.$message('删除成功！')
+            this.getList()
+          }, error => {
+            if (Array.isArray(error.msg)) {
+              error.msg.forEach(item => {
+                this.$notify.error({
+                  title: '错误',
+                  message: item.error
+                })
+              })
+            }
+          })
+        }).catch(_ => {
+        })
+      },
+      close (getList) {
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+        if (getList) {
+          this.getList()
+        }
+      },
+      popupClose () {
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+      },
+      getList (toTop) {
+        if (this.loading) {
+          return
+        }
+        this.loading = true
+        requestAPI(api.getProductMiscList, {
+          data: {
+            ...Object.assign({}, this.form, this.subForm),
+            page: this.pagenation.page
+          }
+        }).then(res => {
+          this.can_create = !res.can_create
+          this.result.list = res.list
+          // this.pagenation.page = res.pagenation.thispage
+          this.totalcount = res.pagenation.totalcount
+          // this.totalcount = 8
+          if (toTop) {
+            this.$el.querySelector('.page-body-content').scrollTo(0, 0)
+          }
+        }).finally(_ => {
+          this.loading = false
+        })
+      }
+    },
+    created () {
+      this.getList()
+    }
+  }
+</script>
+
+<style scoped>
+  .el-button{
+    margin: 0 2px;
+    padding: 7px;
+  }
+</style>

src/components/products/productMisc/operationProductMisc.vue

+<template>
+  <section>
+    <div class="product-add-edit-form auto-template-form">
+      <el-form ref="form" :model="ProductMiscs">
+        <el-form-item :show-message="false" :error="setError('name')">
+          <single-input
+            label="自定义"
+            :required="true"
+            :form-item="ProductMiscs.name"
+            @update:item="val => {ProductMiscs.name = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['name']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('description')">
+          <single-input
+            label="备注"
+            type="textarea"
+            :rows="4"
+            :form-item="ProductMiscs.description"
+            @update:item="val => {ProductMiscs.description = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['description']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('order')">
+          <single-input
+            label="排序"
+            :required="true"
+            :form-item="ProductMiscs.order"
+            @update:item="val => {ProductMiscs.order = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['order']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item>
+          <el-row :gutter="10">
+            <el-col :offset="4" :span="14">
+              <el-button type="primary" @click="saveProductType" size="mini">保存</el-button>
+              <el-button @click="close()" size="mini">关闭</el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+    </div>
+  </section>
+</template>
+
+<script>
+  import operationMixins from '../../../lib/operationMixins'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  import {setModule} from '../../../lib/viewHelper'
+
+  export default {
+    name: '',
+    mixins: [operationMixins],
+    data () {
+      return {
+        ProductMiscs: {
+          id: '',
+          name: '',
+          order: '',
+          description: ''
+        },
+        errorData: {}
+      }
+    },
+    methods: {
+      saveProductType () {
+        let url = ''
+        if (this.ProductMiscs.id !== '') {
+          url = api.saveEditProductMisc
+        } else {
+          url = api.saveNewProductMisc
+        }
+        let subData = setModule(this.ProductMiscs, 'ProductMiscs')
+        requestAPI(url, {
+          data: {...subData}
+        }).then(res => {
+          this.$message({
+            message: '保存成功!',
+            type: 'success'
+          })
+          this.close(true)
+        }, error => {
+          error.msg.forEach(item => {
+            this.$set(this.errorData, item.name, item.error)
+          })
+        })
+      },
+      setError (error) {
+        return this.errorData[error] ? this.errorData[error] : ''
+      },
+      close (getList) {
+        this.$emit('close', getList)
+        this.$nextTick(() => {
+          Object.keys(this.ProductMiscs).forEach(item => {
+            this.ProductMiscs[item] = ''
+          })
+        })
+      },
+      initAdd () {
+        requestAPI(api.getNewProductMisc).then(res => {
+          this.ProductMiscs.order = res.nextOrder
+        })
+      },
+      initEdit (id) {
+        requestAPI(api.getEditProductMisc, {
+          data: {
+            id
+          }
+        }).then(res => {
+          Object.keys(this.ProductMiscs).forEach(item => {
+            this.ProductMiscs[item] = res.model[item]
+          })
+        })
+      }
+    },
+    created () {
+    }
+  }
+</script>
+
+<style lang="scss">
+  .auto-template-form {
+    .el-form-item {
+      margin-bottom: 15px;
+    }
+
+    .client-label {
+      position: relative;
+      font-size: 12px;
+    }
+
+    .client-label span {
+      padding-right: 10px;
+    }
+
+    .client-label.required:after {
+      content: "*";
+      color: #eb7567;
+      position: absolute;
+      top: 3px;
+      right: 6px;
+    }
+
+    .el-form-item__error {
+      position: static;
+    }
+  }
+</style>

src/components/products/productMisc/productMiscTable.vue

+<template>
+  <section>
+    <el-table
+      v-loading="loading"
+      :data="tableList"
+      style="width: 100%"
+      :row-class-name="tableRowClassName"
+      border
+      :cell-style="{'font-size': '12px'}"
+      :header-cell-style="{'font-weight': 700,'font-size': '12px', color: '#000000'}">
+      <el-table-column
+        header-align="center"
+        align="center"
+        prop="order"
+        label="排序">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="center"
+        prop="name"
+        label="自定义">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        prop="description"
+        label="备注">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="center"
+        label="操作">
+        <template slot-scope="scope">
+          <slot name="operationTable" :row="scope.row"></slot>
+        </template>
+      </el-table-column>
+    </el-table>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: '',
+    data () {
+      return {}
+    },
+    methods: {
+      tableRowClassName ({row, rowIndex}) {
+        if (rowIndex % 2 === 0) {
+          return 'stripe-class'
+        }
+      }
+    },
+    props: ['tableList', 'loading']
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/products/productQa.vue

+<template>
+  <section>
+    <div class="content">
+      <client-header ref="clientHeader"
+                     title="设置保修期限"
+                     :title-span="6"
+                     :model="form"
+                     search-key="SearchForm"
+                     key-code="keyword"
+                     type="keyword"
+                     button-title="设置保修期限 "
+                     :reset-form="resetForm"
+                     :add-new-user="addNewProductQa"
+                     :search-keyword="searchKeyword"></client-header>
+      <div class="page-body-content">
+        <children-nav></children-nav>
+        <product-qa-table ref="productTypeTable" :table-list="result.list" :loading="loading">
+          <template slot="operationTable" slot-scope="scope">
+            <el-button
+              type="primary"
+              size="mini"
+              :disabled="!scope.row.can_update"
+              @click.prevent.stop="editQa(scope.row.id)">
+              <i class="fa fa-edit"></i> 编辑
+            </el-button>
+            <el-button
+              type="primary"
+              size="mini"
+              :disabled="!scope.row.can_delete"
+              @click="delQa(scope.row.id)">
+              <i class="fa fa-trash-o faa-shake"></i> 删除
+            </el-button>
+          </template>
+        </product-qa-table>
+        <Pagenation
+          @update:pager="pager => {updatePage(pager)}"
+          :pager.sync="pagenation"
+          :total="totalcount">
+        </Pagenation>
+      </div>
+    </div>
+    <side-popup ref="sidePopup" :title="operationTitle" v-click-outside="popupClose">
+      <component :is="operationPage" :ref="operationPage" @close="getList => {close(getList)}"></component>
+    </side-popup>
+  </section>
+</template>
+
+<script>
+  import clientHeader from '../common/clientHeader'
+  import childrenNav from './childrenNav'
+  import clickOutside from '@/lib/bind'
+  import Pagenation from '../common/schedulePagenation'
+  import productQaTable from './productQa/productQaTable'
+  import operationProductQa from './productQa/operationProductQa'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  export default {
+    name: '',
+    directives: {
+      clickOutside
+    },
+    data () {
+      return {
+        operationPage: '',
+        operationTitle: '',
+        form: {
+          'SearchForm[keyword]': ''
+        },
+        result: {
+          list: []
+        },
+        pagenation: {
+          page: 1
+        },
+        totalcount: 0,
+        loading: false,
+        can_create: true,
+        subForm: {}
+      }
+    },
+    components: {
+      clientHeader,
+      childrenNav,
+      Pagenation,
+      productQaTable,
+      operationProductQa
+    },
+    methods: {
+      resetForm () {
+        Object.keys(this.form).forEach(item => {
+          this.form[item] = ''
+        })
+        this.getList()
+      },
+      addNewProductQa () {
+        this.operationPage = 'operationProductQa'
+        this.operationTitle = '设置产品'
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].initAdd())
+        })
+      },
+      editQa (id) {
+        this.operationPage = 'operationProductQa'
+        this.operationTitle = '设置产品'
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].initEdit(id))
+        })
+      },
+      updateForm (form) {
+        this.subForm = Object.assign({}, this.form, form)
+        this.getList()
+      },
+      searchKeyword (search) {
+        this.updateForm(search)
+      },
+      updatePage (pager) {
+        Object.assign(this.pagenation, pager)
+        this.getList(true)
+      },
+      delQa (id) {
+        this.$confirm('确认删除吗?', '提示').then(() => {
+          requestAPI(api.delProductQa, {
+            data: {
+              id
+            }
+          }).then(() => {
+            this.$message('删除成功！')
+            this.getList()
+          }, error => {
+            if (Array.isArray(error.msg)) {
+              error.msg.forEach(item => {
+                this.$notify.error({
+                  title: '错误',
+                  message: item.error
+                })
+              })
+            }
+          })
+        }).catch(_ => {
+        })
+      },
+      close (getList) {
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+        if (getList) {
+          this.getList()
+        }
+      },
+      popupClose () {
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+      },
+      getList (toTop) {
+        if (this.loading) {
+          return
+        }
+        this.loading = true
+        requestAPI(api.getProductQaList, {
+          data: {
+            ...Object.assign({}, this.form, this.subForm),
+            page: this.pagenation.page
+          }
+        }).then(res => {
+          this.can_create = !res.can_create
+          this.result.list = res.list
+          // this.pagenation.page = res.pagenation.thispage
+          this.totalcount = res.pagenation.totalcount
+          // this.totalcount = 8
+          if (toTop) {
+            this.$el.querySelector('.page-body-content').scrollTo(0, 0)
+          }
+        }).finally(_ => {
+          this.loading = false
+        })
+      }
+    },
+    created () {
+      this.getList()
+    }
+  }
+</script>
+
+<style scoped>
+  .el-button{
+    margin: 0 2px;
+    padding: 7px;
+  }
+</style>

src/components/products/productQa/operationProductQa.vue

+<template>
+  <section>
+    <div class="product-add-edit-form auto-template-form">
+      <el-form ref="form" :model="ProductQas">
+        <el-form-item :show-message="false" :error="setError('years')">
+          <single-input
+            label="保修年限"
+            :required="true"
+            :form-item="ProductQas.years"
+            @update:item="val => {ProductQas.years = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['years']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('description')">
+          <single-input
+            label="备注"
+            type="textarea"
+            :rows="4"
+            :form-item="ProductQas.description"
+            @update:item="val => {ProductQas.description = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['description']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('order')">
+          <single-input
+            label="排序"
+            :required="true"
+            :form-item="ProductQas.order"
+            @update:item="val => {ProductQas.order = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['order']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item>
+          <el-row :gutter="10">
+            <el-col :offset="4" :span="14">
+              <el-button type="primary" @click="saveProductType" size="mini">保存</el-button>
+              <el-button @click="close()" size="mini">关闭</el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+    </div>
+  </section>
+</template>
+
+<script>
+  import operationMixins from '../../../lib/operationMixins'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  import {setModule} from '../../../lib/viewHelper'
+
+  export default {
+    name: '',
+    mixins: [operationMixins],
+    data () {
+      return {
+        ProductQas: {
+          id: '',
+          years: '',
+          order: '',
+          description: ''
+        },
+        errorData: {}
+      }
+    },
+    methods: {
+      saveProductType () {
+        let url = ''
+        if (this.ProductQas.id !== '') {
+          url = api.saveEditProductQa
+        } else {
+          url = api.saveNewProductQa
+        }
+        let subData = setModule(this.ProductQas, 'ProductQas')
+        requestAPI(url, {
+          data: {...subData}
+        }).then(res => {
+          this.$message({
+            message: '保存成功!',
+            type: 'success'
+          })
+          this.close(true)
+        }, error => {
+          error.msg.forEach(item => {
+            this.$set(this.errorData, item.name, item.error)
+          })
+        })
+      },
+      setError (error) {
+        return this.errorData[error] ? this.errorData[error] : ''
+      },
+      close (getList) {
+        this.$emit('close', getList)
+        this.$nextTick(() => {
+          Object.keys(this.ProductQas).forEach(item => {
+            this.ProductQas[item] = ''
+          })
+        })
+      },
+      initAdd () {
+        requestAPI(api.getNewProductQa).then(res => {
+          this.ProductQas.order = res.nextOrder
+        })
+      },
+      initEdit (id) {
+        requestAPI(api.getEditProductQa, {
+          data: {
+            id
+          }
+        }).then(res => {
+          Object.keys(this.ProductQas).forEach(item => {
+            this.ProductQas[item] = res.model[item]
+          })
+        })
+      }
+    },
+    created () {
+    }
+  }
+</script>
+
+<style lang="scss">
+  .auto-template-form {
+    .el-form-item {
+      margin-bottom: 15px;
+    }
+
+    .client-label {
+      position: relative;
+      font-size: 12px;
+    }
+
+    .client-label span {
+      padding-right: 10px;
+    }
+
+    .client-label.required:after {
+      content: "*";
+      color: #eb7567;
+      position: absolute;
+      top: 3px;
+      right: 6px;
+    }
+
+    .el-form-item__error {
+      position: static;
+    }
+  }
+</style>

src/components/products/productQa/productQaTable.vue

+<template>
+  <section>
+    <el-table
+      v-loading="loading"
+      :data="tableList"
+      style="width: 100%"
+      :row-class-name="tableRowClassName"
+      border
+      :cell-style="{'font-size': '12px'}"
+      :header-cell-style="{'font-weight': 700,'font-size': '12px', color: '#000000'}">
+      <el-table-column
+        header-align="center"
+        align="center"
+        prop="order"
+        label="排序">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="center"
+        prop="years"
+        label="保修年限">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        prop="description"
+        label="备注">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="center"
+        label="操作">
+        <template slot-scope="scope">
+          <slot name="operationTable" :row="scope.row"></slot>
+        </template>
+      </el-table-column>
+    </el-table>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: '',
+    data () {
+      return {}
+    },
+    methods: {
+      tableRowClassName ({row, rowIndex}) {
+        if (rowIndex % 2 === 0) {
+          return 'stripe-class'
+        }
+      }
+    },
+    props: ['tableList', 'loading']
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/products/productSerie/operationProductSerie.vue

+<template>
+  <section>
+    <div class="product-add-edit-form auto-template-form">
+      <el-form ref="form" :model="ProductSeries">
+        <el-form-item :show-message="false" :error="setError('name')">
+          <single-input
+            label="产品系列"
+            :required="true"
+            :form-item="ProductSeries.name"
+            @update:item="val => {ProductSeries.name = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['name']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('product_type')">
+          <single-select
+            :form-item="ProductSeries.product_type"
+            label="产品分类"
+            :set-option="setProductComponent"
+            :options-list="getOptions('product_type')"
+            @update:item="val => {ProductSeries.product_type = val}">
+          <span slot="formError" class="el-form-item__error">
+            {{errorData['product_type']}}
+          </span>
+          </single-select>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('product_component')">
+          <single-select
+            :form-item="ProductSeries.product_component"
+            label="产品类别"
+            :options-list="getOptions('product_component')"
+            @update:item="val => {ProductSeries.product_component = val}">
+          <span slot="formError" class="el-form-item__error">
+            {{errorData['product_type']}}
+          </span>
+          </single-select>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('product_brand')">
+          <single-select
+            :form-item="ProductSeries.product_brand"
+            label="产品品牌"
+            :options-list="getOptions('product_brand')"
+            @update:item="val => {ProductSeries.product_brand = val}">
+          <span slot="formError" class="el-form-item__error">
+            {{errorData['product_brand']}}
+          </span>
+          </single-select>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('description')">
+          <single-input
+            label="备注"
+            type="textarea"
+            :rows="4"
+            :form-item="ProductSeries.description"
+            @update:item="val => {ProductSeries.description = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['description']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('order')">
+          <single-input
+            label="排序"
+            :required="true"
+            :form-item="ProductSeries.order"
+            @update:item="val => {ProductSeries.order = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['order']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item>
+          <el-row :gutter="10">
+            <el-col :offset="4" :span="14">
+              <el-button type="primary" @click="saveProductType" size="mini">保存</el-button>
+              <el-button @click="close()" size="mini">关闭</el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+    </div>
+  </section>
+</template>
+
+<script>
+  import operationMixins from '../../../lib/operationMixins'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  import {setModule} from '../../../lib/viewHelper'
+
+  export default {
+    name: '',
+    mixins: [operationMixins],
+    data () {
+      return {
+        ProductSeries: {
+          id: '',
+          name: '',
+          order: '',
+          product_type: '',
+          product_component: '',
+          product_brand: '',
+          description: ''
+        },
+        options: {
+          'ProductSeries[product_type]': {
+            value: []
+          },
+          'ProductSeries[product_component]': {
+            value: []
+          },
+          'ProductSeries[product_brand]': {
+            value: []
+          }
+        },
+        errorData: {},
+        optionsKey: 'ProductSeries'
+      }
+    },
+    methods: {
+      setProductComponent (key) {
+        requestAPI(api.getProductComponent, {
+          data: {
+            product_type: key
+          }
+        }).then(res => {
+          this.options['ProductSeries[product_component]'].value = []
+          res.forEach(item => {
+            this.options['ProductSeries[product_component]'].value.push(item)
+          })
+        })
+      },
+      getOptions (key, searchKey) {
+        let sKey = searchKey || this.optionsKey
+        let option = this.options[sKey + '[' + key + ']']
+        console.log(option)
+        if (option) {
+          return option.value
+        }
+        return []
+      },
+      saveProductType () {
+        let url = ''
+        if (this.ProductSeries.id !== '') {
+          url = api.saveEditProductSerie
+        } else {
+          url = api.saveNewProductSerie
+        }
+        let subData = setModule(this.ProductSeries, 'ProductSeries')
+        requestAPI(url, {
+          data: {...subData}
+        }).then(res => {
+          this.$message({
+            message: '保存成功!',
+            type: 'success'
+          })
+          this.close(true)
+        }, error => {
+          error.msg.forEach(item => {
+            this.$set(this.errorData, item.name, item.error)
+          })
+        })
+      },
+      setError (error) {
+        return this.errorData[error] ? this.errorData[error] : ''
+      },
+      close (getList) {
+        this.$emit('close', getList)
+        this.$nextTick(() => {
+          Object.keys(this.ProductSeries).forEach(item => {
+            this.ProductSeries[item] = ''
+          })
+        })
+      },
+      initAdd () {
+        requestAPI(api.getNewProductSerie).then(res => {
+          this.ProductSeries.order = res.nextOrder
+          Object.keys(res.options).forEach(item => {
+            this.$set(this.options, item, res.options[item])
+          })
+        })
+      },
+      initEdit (id) {
+        requestAPI(api.getEditProductSerie, {
+          data: {
+            id
+          }
+        }).then(res => {
+          Object.keys(this.ProductSeries).forEach(item => {
+            this.ProductSeries[item] = res.model[item]
+          })
+          Object.keys(res.options).forEach(item => {
+            this.$set(this.options, item, res.options[item])
+          })
+        })
+      }
+    },
+    created () {
+    }
+  }
+</script>
+
+<style lang="scss">
+  .auto-template-form {
+    .el-form-item {
+      margin-bottom: 15px;
+    }
+
+    .client-label {
+      position: relative;
+      font-size: 12px;
+    }
+
+    .client-label span {
+      padding-right: 10px;
+    }
+
+    .client-label.required:after {
+      content: "*";
+      color: #eb7567;
+      position: absolute;
+      top: 3px;
+      right: 6px;
+    }
+
+    .el-form-item__error {
+      position: static;
+    }
+  }
+</style>

src/components/products/productSerie/productSerieTable.vue

+<template>
+  <section class="product-serie-table">
+    <el-table
+      v-loading="loading"
+      :data="tableList"
+      style="width: 100%"
+      :row-class-name="tableRowClassName"
+      border
+      :cell-style="{'font-size': '12px'}"
+      :header-cell-style="{'font-weight': 700,'font-size': '12px', color: '#000000'}">
+      <el-table-column
+        header-align="center"
+        align="left"
+        prop="name"
+        label="产品系列">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="left"
+        label="产品分类">
+        <template slot="header" slot-scope="scope">
+          <div style="line-height: 18px;">产品分类</div>
+          <el-select v-model="form.productType" placeholder="请选择" size="mini">
+            <el-option
+              v-for="item in productType"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </template>
+        <template slot-scope="scope">{{scope.row.productType.name}}</template>
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="left"
+        label="产品类别">
+        <template slot="header" slot-scope="scope">
+          <div style="line-height: 18px;">产品类别</div>
+          <el-select v-model="form.productComponent" placeholder="请选择" size="mini">
+            <el-option
+              v-for="item in productComponent"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </template>
+        <template slot-scope="scope">{{scope.row.productComponent.name}}</template>
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="left"
+        label="产品品牌">
+        <template slot="header" slot-scope="scope">
+          <div style="line-height: 18px;">产品品牌</div>
+          <el-select v-model="form.productBrand" placeholder="请选择" size="mini">
+            <el-option
+              v-for="item in productBrand"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </template>
+        <template slot-scope="scope">{{scope.row.productBrand.name}}</template>
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        prop="description"
+        label="备注">
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        align="center"
+        label="操作">
+        <template slot-scope="scope">
+          <slot name="operationTable" :row="scope.row"></slot>
+        </template>
+      </el-table-column>
+    </el-table>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: '',
+    data () {
+      return {
+        form: {
+          productType: '',
+          productComponent: '',
+          productBrand: ''
+        }
+      }
+    },
+    methods: {
+      tableRowClassName ({row, rowIndex}) {
+        if (rowIndex % 2 === 0) {
+          return 'stripe-class'
+        }
+      }
+    },
+    props: ['tableList', 'productComponent', 'productType', 'productBrand', 'loading'],
+    watch: {
+      form: {
+        handler (val) {
+          this.$emit('update:form', val)
+        },
+        deep: true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .el-table .el-select{
+    width: 100%;
+    padding: 0 5px;
+  }
+</style>
+<style>
+  .product-serie-table .el-table th{
+    vertical-align: top;
+  }
+  .product-serie-table .el-table th div{
+    padding: 0;
+  }
+</style>

src/components/products/productType.vue

+<template>
+  <section>
+    <div class="content">
+      <client-header ref="clientHeader"
+                     title="设置产品"
+                     :title-span="6"
+                     :model="form"
+                     search-key="SearchForm"
+                     key-code="keyword"
+                     type="keyword"
+                     button-title="新建产品分类 "
+                     :create-disabled="can_create"
+                     :reset-form="resetForm"
+                     :add-new-user="addNewProductType"
+                     :search-keyword="searchKeyword"></client-header>
+      <div class="page-body-content">
+        <children-nav></children-nav>
+        <product-type-table ref="productTypeTable" :table-list="result.list" :loading="loading">
+            <template slot="operationTable" slot-scope="scope">
+              <el-button
+                         type="primary"
+                         size="mini"
+                         :disabled="!scope.row.can_update"
+                         @click.prevent.stop="editProductType(scope.row.id)">
+              <i class="fa fa-edit"></i> 编辑
+              </el-button>
+              <el-button
+                         type="primary"
+                         size="mini"
+                         :disabled="!scope.row.can_delete"
+                         @click="delProductType(scope.row.id)">
+              <i class="fa fa-trash-o faa-shake"></i> 删除
+              </el-button>
+            </template>
+        </product-type-table>
+        <Pagenation
+          @update:pager="pager => {updatePage(pager)}"
+          :pager.sync="pagenation"
+          :total="totalcount">
+        </Pagenation>
+      </div>
+    </div>
+    <side-popup ref="sidePopup" :title="operationTitle" v-click-outside="popupClose">
+      <component :is="operationPage" :ref="operationPage" @close="getList => {close(getList)}"></component>
+    </side-popup>
+  </section>
+</template>
+
+<script>
+  import clientHeader from '../common/clientHeader'
+  import childrenNav from './childrenNav'
+  import clickOutside from '@/lib/bind'
+  import Pagenation from '../common/schedulePagenation'
+  import productTypeTable from './productType/productTypeTable'
+  import operationProductType from './productType/operationProductType'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+
+  export default {
+    name: '',
+    directives: {
+      clickOutside
+    },
+    data () {
+      return {
+        operationPage: '',
+        operationTitle: '',
+        form: {
+          'SearchForm[keyword]': ''
+        },
+        result: {
+          list: []
+        },
+        pagenation: {
+          page: 1
+        },
+        totalcount: 0,
+        loading: false,
+        can_create: true,
+        subForm: {}
+      }
+    },
+    components: {
+      clientHeader,
+      childrenNav,
+      Pagenation,
+      productTypeTable,
+      operationProductType
+    },
+    methods: {
+      resetForm () {
+        Object.keys(this.form).forEach(item => {
+          this.form[item] = ''
+        })
+        this.getList()
+      },
+      addNewProductType () {
+        this.operationPage = 'operationProductType'
+        this.operationTitle = '设置产品'
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].initAdd())
+        })
+      },
+      editProductType (id) {
+        this.operationPage = 'operationProductType'
+        this.operationTitle = '设置产品'
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].initEdit(id))
+        })
+      },
+      updateForm (form) {
+        this.subForm = Object.assign({}, this.form, form)
+        this.getList()
+      },
+      searchKeyword (search) {
+        this.updateForm(search)
+      },
+      updatePage (pager) {
+        Object.assign(this.pagenation, pager)
+        this.getList(true)
+      },
+      delProductType (id) {
+        this.$confirm('确认删除吗?', '提示').then(() => {
+          requestAPI(api.delProductType, {
+            data: {
+              id
+            }
+          }).then(() => {
+            this.$message('删除成功！')
+            this.getList()
+          }, error => {
+            if (Array.isArray(error.msg)) {
+              error.msg.forEach(item => {
+                this.$notify.error({
+                  title: '错误',
+                  message: item.error
+                })
+              })
+            }
+          })
+        }).catch(_ => {
+        })
+      },
+      close (getList) {
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+        if (getList) {
+          this.getList()
+        }
+      },
+      popupClose () {
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+      },
+      getList (toTop) {
+        if (this.loading) {
+          return
+        }
+        this.loading = true
+        requestAPI(api.getProductTypeList, {
+          data: {
+            ...Object.assign({}, this.form, this.subForm),
+            page: this.pagenation.page
+          }
+        }).then(res => {
+          this.can_create = !res.can_create
+          this.result.list = res.list
+          // this.pagenation.page = res.pagenation.thispage
+          this.totalcount = res.pagenation.totalcount
+          // this.totalcount = 8
+          if (toTop) {
+            this.$el.querySelector('.page-body-content').scrollTo(0, 0)
+          }
+        }).finally(_ => {
+          this.loading = false
+        })
+      }
+    },
+    created () {
+      this.getList()
+    }
+  }
+</script>
+
+<style scoped>
+  .el-button{
+    margin: 0 2px;
+    padding: 7px;
+  }
+</style>

src/components/products/productType/operationProductType.vue

+<template>
+  <section>
+    <div class="product-add-edit-form auto-template-form">
+      <el-form ref="form" :model="ProductTypes">
+        <el-form-item :show-message="false" :error="setError('name')">
+          <single-input
+            label="名称"
+            :required="true"
+            :form-item="ProductTypes.name"
+            @update:item="val => {ProductTypes.name = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['name']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('description')">
+          <single-input
+            label="备注"
+            type="textarea"
+            :rows="4"
+            :form-item="ProductTypes.description"
+            @update:item="val => {ProductTypes.description = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['description']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item :show-message="false" :error="setError('order')">
+          <single-input
+            label="排序"
+            :required="true"
+            :form-item="ProductTypes.order"
+            @update:item="val => {ProductTypes.order = val}">
+            <span slot="formError" class="el-form-item__error">
+              {{errorData['order']}}
+            </span>
+          </single-input>
+        </el-form-item>
+        <el-form-item>
+          <el-row :gutter="10">
+            <el-col :offset="4" :span="14">
+              <el-button type="primary" @click="saveProductType" size="mini">保存</el-button>
+              <el-button @click="close()" size="mini">关闭</el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+    </div>
+  </section>
+</template>
+
+<script>
+  import operationMixins from '../../../lib/operationMixins'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+  import {setModule} from '../../../lib/viewHelper'
+
+  export default {
+    name: '',
+    mixins: [operationMixins],
+    data () {
+      return {
+        ProductTypes: {
+          id: '',
+          name: '',
+          order: '',
+          description: ''
+        },
+        errorData: {}
+      }
+    },
+    methods: {
+      saveProductType () {
+        let url = ''
+        if (this.ProductTypes.id !== '') {
+          url = api.saveEditProductType
+        } else {
+          url = api.saveNewProductType
+        }
+        let subData = setModule(this.ProductTypes, 'ProductTypes')
+        requestAPI(url, {
+          data: {...subData}
+        }).then(res => {
+          this.$message({
+            message: '保存成功!',
+            type: 'success'
+          })
+          this.close(true)
+        }, error => {
+          error.msg.forEach(item => {
+            this.$set(this.errorData, item.name, item.error)
+          })
+        })
+      },
+      setError (error) {
+        return this.errorData[error] ? this.errorData[error] : ''
+      },
+      close (getList) {
+        this.$emit('close', getList)
+        this.$nextTick(() => {
+          Object.keys(this.ProductTypes).forEach(item => {
+            this.ProductTypes[item] = ''
+          })
+        })
+      },
+      initAdd () {
+        requestAPI(api.getNewProductType).then(res => {
+          this.ProductTypes.order = res.nextOrder
+        })
+      },
+      initEdit (id) {
+        requestAPI(api.getEditProductType, {
+          data: {
+            id
+          }
+        }).then(res => {
+          Object.keys(this.ProductTypes).forEach(item => {
+            this.ProductTypes[item] = res.model[item]
+          })
+        })
+      }
+    },
+    created () {
+    }
+  }
+</script>
+
+<style lang="scss">
+  .auto-template-form {
+    .el-form-item {
+      margin-bottom: 15px;
+    }
+
+    .client-label {
+      position: relative;
+      font-size: 12px;
+    }
+
+    .client-label span {
+      padding-right: 10px;
+    }
+
+    .client-label.required:after {
+      content: "*";
+      color: #eb7567;
+      position: absolute;
+      top: 3px;
+      right: 6px;
+    }
+
+    .el-form-item__error {
+      position: static;
+    }
+  }
+</style>

src/components/products/productType/productTypeTable.vue

+<template>
+    <section>
+      <el-table
+        v-loading="loading"
+        :data="tableList"
+        style="width: 100%"
+        :row-class-name="tableRowClassName"
+        border
+        :cell-style="{'font-size': '12px'}"
+        :header-cell-style="{'font-weight': 700,'font-size': '12px', color: '#000000'}">
+        <el-table-column
+          header-align="center"
+          align="center"
+          prop="order"
+          label="排序">
+        </el-table-column>
+        <el-table-column
+          header-align="center"
+          align="left"
+          prop="name"
+          label="产品分类">
+        </el-table-column>
+        <el-table-column
+          header-align="center"
+          prop="description"
+          label="备注">
+        </el-table-column>
+        <el-table-column
+          header-align="center"
+          align="center"
+          label="操作">
+          <template slot-scope="scope">
+            <slot name="operationTable" :row="scope.row"></slot>
+          </template>
+        </el-table-column>
+      </el-table>
+    </section>
+</template>
+
+<script>
+  export default {
+    name: '',
+    data () {
+      return {}
+    },
+    methods: {
+      tableRowClassName ({row, rowIndex}) {
+        if (rowIndex % 2 === 0) {
+          return 'stripe-class'
+        }
+      }
+    },
+    props: ['tableList', 'loading']
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/products/prouductSerie.vue

+<template>
+  <section>
+    <div class="content">
+      <client-header ref="clientHeader"
+                     title="设置系列"
+                     :title-span="6"
+                     :model="form"
+                     search-key="SearchForm"
+                     key-code="keyword"
+                     type="keyword"
+                     button-title="新建产品系列 "
+                     :reset-form="resetForm"
+                     :add-new-user="addNewProductSerie"
+                     :search-keyword="searchKeyword"></client-header>
+      <div class="page-body-content">
+        <children-nav></children-nav>
+        <product-Serie-table ref="productComponentTable"
+                             :table-list="result.list"
+                             :product-type="productType"
+                             :product-component="productComponent"
+                             :product-brand="productBrand" @update:form="val => {updateForm(val)}"
+                             :loading="loading">
+          <template slot="operationTable" slot-scope="scope">
+            <el-button
+              type="primary"
+              size="mini"
+              :disabled="!scope.row.can_update"
+              @click.prevent.stop="editSerie(scope.row.id)">
+              <i class="fa fa-edit"></i> 编辑
+            </el-button>
+            <el-button
+              type="primary"
+              size="mini"
+              :disabled="!scope.row.can_delete"
+              @click="delSerie(scope.row.id)">
+              <i class="fa fa-trash-o faa-shake"></i> 删除
+            </el-button>
+          </template>
+        </product-Serie-table>
+        <Pagenation
+          @update:pager="pager => {updatePage(pager)}"
+          :pager.sync="pagenation"
+          :total="totalcount">
+        </Pagenation>
+      </div>
+    </div>
+    <side-popup ref="sidePopup" :title="operationTitle" v-click-outside="popupClose">
+      <component :is="operationPage" :ref="operationPage" @close="getList => {close(getList)}"></component>
+    </side-popup>
+  </section>
+</template>
+
+<script>
+  import clientHeader from '../common/clientHeader'
+  import childrenNav from './childrenNav'
+  import clickOutside from '@/lib/bind'
+  import Pagenation from '../common/schedulePagenation'
+  import productSerieTable from './productSerie/productSerieTable'
+  import operationProductSerie from './productSerie/operationProductSerie'
+  import {
+    requestAPI,
+    api
+  } from '@/lib/commonMixin'
+
+  export default {
+    name: '',
+    directives: {
+      clickOutside
+    },
+    data () {
+      return {
+        operationPage: '',
+        operationTitle: '',
+        form: {
+          'SearchForm[keyword]': ''
+        },
+        result: {
+          list: []
+        },
+        pagenation: {
+          page: 1
+        },
+        totalcount: 0,
+        loading: false,
+        can_create: true,
+        productType: [],
+        productBrand: [],
+        productComponent: [],
+        subForm: {}
+      }
+    },
+    components: {
+      clientHeader,
+      childrenNav,
+      Pagenation,
+      productSerieTable,
+      operationProductSerie
+    },
+    methods: {
+      resetForm () {
+        Object.keys(this.form).forEach(item => {
+          this.form[item] = ''
+        })
+        this.getList()
+      },
+      addNewProductSerie () {
+        this.operationPage = 'operationProductSerie'
+        this.operationTitle = '设置系列'
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].initAdd())
+        })
+      },
+      editSerie (id) {
+        this.operationPage = 'operationProductSerie'
+        this.operationTitle = '设置系列'
+        this.$nextTick(() => {
+          this.$refs.sidePopup.show(this.$refs[this.operationPage].initEdit(id))
+        })
+      },
+      updateForm (form) {
+        this.subForm = Object.assign({}, this.form, form)
+        this.getList()
+      },
+      searchKeyword (search) {
+        this.updateForm(search)
+      },
+      updatePage (pager) {
+        Object.assign(this.pagenation, pager)
+        this.getList(true)
+      },
+      delSerie (id) {
+        this.$confirm('确认删除吗?', '提示').then(() => {
+          requestAPI(api.delProductSerie, {
+            data: {
+              id
+            }
+          }).then(() => {
+            this.$message('删除成功！')
+            this.getList()
+          }, error => {
+            if (Array.isArray(error.msg)) {
+              error.msg.forEach(item => {
+                this.$notify.error({
+                  title: '错误',
+                  message: item.error
+                })
+              })
+            }
+          })
+        }).catch(_ => {
+        })
+      },
+      close (getList) {
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+        if (getList) {
+          this.getList()
+        }
+      },
+      popupClose () {
+        this.$refs.sidePopup &&
+        this.$refs.sidePopup.close()
+      },
+      getList (toTop) {
+        if (this.loading) {
+          return
+        }
+        this.loading = true
+        requestAPI(api.getProductSerieList, {
+          data: {
+            ...Object.assign({}, this.form, this.subForm),
+            page: this.pagenation.page
+          }
+        }).then(res => {
+          this.can_create = !res.can_create
+          this.result.list = res.list
+          // this.pagenation.page = res.pagenation.thispage
+          this.totalcount = res.pagenation.totalcount
+          // this.totalcount = 8
+          if (toTop) {
+            this.$el.querySelector('.page-body-content').scrollTo(0, 0)
+          }
+        }).finally(_ => {
+          this.loading = false
+        })
+      }
+    },
+    created () {
+      requestAPI(api.getProductSerieFilter).then(res => {
+        console.log(res)
+      })
+      this.getList()
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/products/scheduleItem.vue

+<template>
+  <section class="client-schedule-item">
+    <el-row class="client-schedule-row">
+      <el-col :span="4" :xs="24" class="client-schedule-left" :style="{'background-color': item.bgcolor}">
+        <el-row :gutter="10">
+          <el-col :span="24" class="entity-name">
+            <i class="fa fa-star" aria-hidden="true"></i>
+            <a @click="toDetailView(item)" type="text" v-if="item.name !== ''">&nbsp;{{ item.name }}
+            </a>
+            <span v-else>客户名称{{noneText}}</span>
+          </el-col>
+          <el-col :span="24" class="entity-name">
+            <img class="user-avatar rounded-circle" :src="item.createdBy.avatar.name">
+            <span class="np black"> {{ item.createdBy.name }}</span>
+          </el-col>
+          <el-col :span="24">
+            <i class="fa fa-fw fa-cube"></i>
+            <span class="np black">
+              {{item.productBrand.name}}
+            </span>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="20" :xs="24" class="client-schedule-right">
+        <el-row :gutter="10">
+          <el-col :span="6" :xs="24">
+            产品分类:
+            <span class="border border-danger text-danger rounded px-1">{{item.productType.name}}</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            类别: <span class="border border-danger text-danger rounded px-1">{{item.productComponent.name}}</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            系列: <span class="border border-danger text-danger rounded px-1">{{item.productSerie.name}}</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            自定义: <span class="border border-danger text-danger rounded px-1">{{item.productMisc.name}}</span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="6" :xs="24">
+            更新时间: <span class="date-time">{{item.updated_at !== '' ? item.updated_at : noneText}}</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            <span class="border border-danger text-danger rounded px-1">备注</span>:
+            <span v-html="setBr(item.description)"></span>
+          </el-col>
+          <el-col :span="12" :xs="24">
+            <slot name="opearate">
+            </slot>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'scheduleItem',
+    props: {
+      item: Object
+    },
+
+    data () {
+      return {
+        noneText: '(未设置)'
+      }
+    },
+    methods: {
+      setBr (text) {
+        if (text === '') {
+          return this.noneText
+        } else {
+          return text.replace(/\n/g, '<br />')
+        }
+      },
+      toDetailView (item) {
+        let obj = {
+          app: 'client',
+          name: 'viewClient',
+          params: {
+            id: item.client_id
+          }
+        }
+        return obj
+      },
+      showImageViewer (images) {
+        this.$emit('update:image', images.map(i => 'https://beta.jinchangxiao.com' + i.attachment.name))
+        // this.$emit('update:image', ['https://beta.jinchangxiao.com/files/protected/a57be577deb434/2019/03/34cf2b53-3959-33fe-93af-98a50fd18c11.jpg'])
+      }
+    },
+    computed: {
+      isNullClient () {
+        return !this.item.client
+      },
+
+      isPublic () {
+        return !!this.item.is_public
+      }
+    },
+
+    mounted () {
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .text-info {
+    color: #17a2b8 !important;
+  }
+
+  .border-info {
+    border-color: #17a2b8 !important;
+  }
+
+  .colRed {
+    color: red;
+    border: 1px solid red;
+  }
+
+  .colGreen {
+    color: green;
+    border: 1px solid green;
+  }
+
+  .colRed, .colGreen, .col {
+    border-radius: .25rem;
+    padding: 0 .25rem;
+  }
+
+  .rounded-circle {
+    border-radius: 50% !important;
+  }
+
+  .user-avatar {
+    width: 16px;
+    max-width: 16px;
+    height: 16px;
+    max-height: 16px;
+  }
+
+  @include c('schedule-item') {
+    margin-bottom: 10px;
+    font-size: 12px;
+    .border {
+      border: 1px solid #dee2e6;
+    }
+    .border-success {
+      border-color: #28a745 !important;
+    }
+    .border-danger {
+      border-color: #dc3545;
+    }
+    .text-success {
+      color: #28a745 !important;
+    }
+    .text-danger {
+      color: #E45744;
+    }
+    .rounded {
+      border-radius: .25rem !important;
+    }
+    .px-1 {
+      padding: 0 .25rem;
+    }
+  }
+
+  @include c('schedule-item:first-child') {
+    .client-schedule-left {
+      border-radius: 5px 0 0 0;
+    }
+  }
+
+  @include c('schedule-row') {
+    min-height: 100px;
+    background-color: white;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  @include c('schedule-left') {
+    background-color: #FF6A6A;
+    min-height: 100%;
+    padding: 10px 15px 6px;
+    > .el-row {
+      > .el-col {
+        margin-bottom: 4px;
+      }
+    }
+    .el-row div:first-child, .el-row div:first-child a, .entity-name, .entity-name a {
+      color: white;
+    }
+    .entity-name .black {
+      color: #000000;
+    }
+    span {
+      display: inline-block;
+      padding-left: 3px;
+    }
+    span.np{
+      padding-left: 0;
+    }
+    @include e('private') {
+      display: inline-block;
+      // border: 1px solid black;
+      padding-right: 5px;
+      border-radius: 5px;
+      width: 40px;
+      height: 20px;
+    }
+  }
+
+  @include c('schedule-right') {
+    height: 100%;
+    padding: 10px 15px 6px;
+    > .el-row {
+      > .el-col {
+        margin-bottom: 4px;
+
+        .el-button {
+          margin: 0 2px;
+          padding: 7px;
+        }
+
+        .date-time, .show-picture {
+          color: #649FD7;
+        }
+
+        .show-picture {
+          cursor: pointer;
+        }
+      }
+    }
+    .badge {
+      border-radius: 2px;
+      color: #333744;
+      background: #ffffff;
+      vertical-align: baseline;
+      display: inline;
+      padding: 2px 6px;
+      text-align: center;
+    }
+    span.badge-unread {
+      &:hover {
+        border-color: #de321d
+      }
+
+      color: #fff;
+      background-color: #e54c3a;
+      border-color: #a32516
+    }
+    @include e('item') {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      padding: 5px 0 5px 5px;
+      flex: 1;
+    }
+    @include e('status') {
+      color: red;
+    }
+    @include e('content') {
+      display: inline-block;
+      border: 1px solid red;
+      border-radius: 5px;
+      height: 20px;
+      padding: 0 5px 0 5px;
+      color: red;
+    }
+  }
+</style>
+

src/components/sales/operation/addSales.vue

@@ -6,7 +6,7 @@
       :error-data="errorData">
         <span slot="operationBtn">
           <el-button type="primary"  @click="saveSales" size="mini">保存</el-button>
-          <el-button @click="close" size="mini">关闭</el-button>
+          <el-button @click="close()" size="mini">关闭</el-button>
         </span>
     </operation-sales>
   </section>
@@ -53,8 +53,6 @@
       close (getList) {
         this.$emit('close', getList)
       }
-    },
-    created () {
     }
   }
 </script>

src/components/sales/operation/editSales.vue

@@ -6,7 +6,7 @@
         :error-data="errorData">
         <span slot="operationBtn">
           <el-button type="primary"  @click="saveSales" size="mini">保存</el-button>
-          <el-button @click="close" size="mini">关闭</el-button>
+          <el-button @click="close()" size="mini">关闭</el-button>
         </span>
       </operation-sales>
     </section>

src/components/sales/view/addViewSales.vue

@@ -5,7 +5,7 @@
       :error-data="errorData">
         <span slot="operationBtn">
           <el-button type="primary"  @click="saveSalesItem" size="mini">保存</el-button>
-          <el-button @click="close" size="mini">关闭</el-button>
+          <el-button @click="close()" size="mini">关闭</el-button>
         </span>
       </operation-view-sales>
     </section>

src/components/sales/view/copyViewSales.vue

@@ -6,7 +6,7 @@
                           @update:type="type = 'add'">
         <span slot="operationBtn">
           <el-button type="primary"  @click="saveSalesItem" size="mini">保存</el-button>
-          <el-button @click="close" size="mini">关闭</el-button>
+          <el-button @click="close()" size="mini">关闭</el-button>
         </span>
     </operation-view-sales>
   </section>

src/components/sales/view/editViewSales.vue

@@ -6,7 +6,7 @@
                           @update:type="type = 'add'">
         <span slot="operationBtn">
           <el-button type="primary"  @click="saveSalesItem" size="mini">保存</el-button>
-          <el-button @click="close" size="mini">关闭</el-button>
+          <el-button @click="close()" size="mini">关闭</el-button>
         </span>
     </operation-view-sales>
   </section>

src/route.js

@@ -3,6 +3,7 @@ import portal from 'vis-portal'
 import ElementRoute from './routes/project'
 import salesOrder from './routes/salesOrders'
 import salesContracts from './routes/salesContracts'
+import products from './routes/products'
 let routes = []
 let salesRours = []
 const appName = 'project'
@@ -19,6 +20,9 @@ let RouterInit = () => {
   portal.createApp('salesContracts', {}, app => {
     app.mapRoute(salesContracts)
   })
+  portal.createApp('products', {}, app => {
+    app.mapRoute(products)
+  })
 }
 
 export default RouterInit

src/routes/products.js

+import productList from '../components/products/list'
+import productType from '../components/products/productType'
+import productComponent from '../components/products/productComponent'
+import productBrand from '../components/products/productBrand'
+import productSerie from '../components/products/prouductSerie'
+import productMisc from '../components/products/productMisc'
+import productQa from '../components/products/productQa'
+
+const projectTitle = '金畅逍BMS - '
+const routes = [
+  {
+    path: '/product',
+    name: 'productList',
+    component: productList,
+    meta: {
+      title: projectTitle + '产品信息'
+    }
+  },
+  {
+    path: '/productType',
+    name: 'productType',
+    component: productType,
+    meta: {
+      title: projectTitle + '产品设置'
+    }
+  },
+  {
+    path: '/productComponent',
+    name: 'productComponent',
+    component: productComponent,
+    meta: {
+      title: projectTitle + '设置类别'
+    }
+  },
+  {
+    path: '/productBrand',
+    name: 'productBrand',
+    component: productBrand,
+    meta: {
+      title: projectTitle + '设置品牌'
+    }
+  },
+  {
+    path: '/productSerie',
+    name: 'productSerie',
+    component: productSerie,
+    meta: {
+      title: projectTitle + '设置系列'
+    }
+  },
+  {
+    path: '/productMisc',
+    name: 'productMisc',
+    component: productMisc,
+    meta: {
+      title: projectTitle + '设置自定义'
+    }
+  },
+  {
+    path: '/productQa',
+    name: 'productQa',
+    component: productQa,
+    meta: {
+      title: projectTitle + '设置保修期限'
+    }
+  }
+]
+export default routes