20230831

mall4v/src/views/modules/shop/notice-add-or-update.vue

+<template>
+  <el-dialog :title="!dataForm.id ? '新增' : '修改'"
+             :close-on-click-modal="false"
+             :visible.sync="visible">
+    <el-form :model="dataForm"
+             :rules="dataRule"
+             ref="dataForm"
+             @keyup.enter.native="dataFormSubmit()"
+             label-width="80px">
+      <el-form-item label="公告标题"
+                    prop="title">
+        <el-input v-model="dataForm.title"></el-input>
+      </el-form-item>
+      <el-form-item label="状态"
+                    prop="status">
+        <el-radio-group v-model="dataForm.status">
+          <el-radio :label="1">公布</el-radio>
+          <el-radio :label="0">撤销</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="置顶"
+                    prop="isTop">
+        <el-radio-group v-model="dataForm.isTop">
+          <el-radio :label="1">是</el-radio>
+          <el-radio :label="0">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="公告内容"
+                    prop="content">
+        <tiny-mce v-model="dataForm.content"></tiny-mce>
+      </el-form-item>
+
+    </el-form>
+    <span slot="footer"
+          class="dialog-footer">
+      <el-button size="small"
+                 @click="visible = false">取消</el-button>
+      <el-button size="small"
+                 type="primary"
+                 @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import TinyMce from '@/components/tiny-mce'
+import { Debounce } from '@/utils/debounce'
+export default {
+  data () {
+    var validateTitle = (rule, value, callback) => {
+      if (!value.trim()) {
+        this.dataForm.title = ''
+        callback(new Error('公告标题不能为空'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      visible: false,
+      roleList: [],
+      dataForm: {
+        title: null,
+        content: null,
+        url: null,
+        status: 1,
+        isTop: 0
+      },
+      dataRule: {
+        title: [
+          {required: true, message: '公告标题不能为空', trigger: 'blur'},
+          { validator: validateTitle, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  components: {
+    TinyMce
+  },
+  methods: {
+    init (id) {
+      this.dataForm.id = id || 0
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.$http({
+            url: this.$http.adornUrl('/shop/notice/info/' + this.dataForm.id),
+            method: 'get',
+            params: this.$http.adornParams()
+          }).then(({ data }) => {
+            this.dataForm = data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit: Debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl('/shop/notice'),
+            method: this.dataForm.id ? 'put' : 'post',
+            data: this.$http.adornData(this.dataForm)
+          }).then(({ data }) => {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$emit('refreshDataList')
+                this.dataForm.content = ''
+              }
+            })
+          })
+        }
+      })
+    })
+  }
+}
+</script>

mall4v/src/views/modules/shop/notice.vue

+<template>
+  <div class="mod-shop-notice">
+    <avue-crud ref="crud"
+               :page="page"
+               :data="dataList"
+               :table-loading="dataListLoading"
+               :option="tableOption"
+               @search-change="searchChange"
+               @on-load="getDataList"
+               @refresh-change="refreshChange">
+
+      <template slot-scope="scope"
+                slot="status">
+        <el-tag v-if="scope.row.status === 0"
+                size="small"
+                type="danger">撤销</el-tag>
+        <el-tag v-else
+                size="small">公布</el-tag>
+      </template>
+      <template slot-scope="scope"
+                slot="isTop">
+        <el-tag v-if="scope.row.isTop === 0"
+                size="small">否</el-tag>
+        <el-tag v-else
+                size="small">是</el-tag>
+      </template>
+      <template slot="menuLeft">
+
+        <el-button v-if="isAuth('shop:notice:save')"
+                   type="primary"
+                   size="small"
+                   icon="el-icon-plus"
+                   @click="addOrUpdateHandle()">新增</el-button>
+      </template>
+      <template slot-scope="scope"
+                slot="menu">
+        <el-button v-if="isAuth('shop:notice:update')"
+                   type="primary"
+                   size="small"
+                   icon="el-icon-edit"
+                   @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+        <el-button v-if="isAuth('shop:notice:delete')"
+                   type="danger"
+                   icon="el-icon-delete"
+                   size="small"
+                   @click.stop="deleteHandle(scope.row.id)">删除</el-button>
+      </template>
+
+    </avue-crud>
+    <add-or-update v-if="addOrUpdateVisible"
+                   ref="addOrUpdate"
+                   @refreshDataList="refreshChange"></add-or-update>
+  </div>
+</template>
+
+<script>
+import { tableOption } from '@/crud/shop/notice'
+import AddOrUpdate from './notice-add-or-update'
+export default {
+  data () {
+    return {
+      dataList: [],
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      },
+      dataListLoading: false,
+      tableOption: tableOption,
+      permission: {
+        delBtn: this.isAuth('shop:notice:delete')
+      },
+      addOrUpdateVisible: false
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    getDataList (page, params, done) {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/shop/notice/page'),
+        method: 'get',
+        params: this.$http.adornParams(Object.assign({
+          current: page == null ? this.page.currentPage : page.currentPage,
+          size: page == null ? this.page.pageSize : page.pageSize
+        }, params))
+      }).then(({ data }) => {
+        this.dataList = data.records
+        this.page.total = data.total
+        this.dataListLoading = false
+        if (done) {
+          done()
+        }
+      })
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    deleteHandle (id) {
+      this.$confirm('确定进行删除操作?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl('/shop/notice/' + id),
+          method: 'delete',
+          data: this.$http.adornData({})
+        }).then(({ data }) => {
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.getDataList()
+            }
+          })
+        })
+      }).catch(() => { })
+    },
+    /**
+     * 刷新回调
+     */
+    refreshChange () {
+      this.getDataList(this.page)
+    },
+    searchChange (params, done) {
+      this.getDataList(this.page, params, done)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

mall4v/src/views/modules/shop/pickAddr-add-or-update.vue

+<template>
+  <el-dialog :title="!dataForm.addrId ? '新增' : '修改'"
+             :close-on-click-modal="false"
+             :visible.sync="visible">
+    <el-form :model="dataForm"
+             :rules="dataRule"
+             ref="dataForm"
+             @keyup.enter.native="dataFormSubmit()"
+             label-width="80px">
+      <el-form-item label="名称"
+                    prop="addrName">
+        <el-input v-model="dataForm.addrName"
+                  placeholder="自提点名称"></el-input>
+      </el-form-item>
+      <el-form-item label="省份">
+        <el-col :span="8">
+          <el-form-item prop="province">
+            <el-select v-model="dataForm.provinceId"
+                       placeholder="请选择"
+                       @change="selectProvince">
+              <el-option v-for="province in provinceList"
+                         :key="province.areaId"
+                         :label="province.areaName"
+                         :value="province.areaId"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="city">
+            <el-select v-model="dataForm.cityId"
+                       placeholder="请选择"
+                       @change="selectCity">
+              <el-option v-for="city in cityList"
+                         :key="city.areaId"
+                         :label="city.areaName"
+                         :value="city.areaId"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="area">
+            <el-select v-model="dataForm.areaId"
+                       placeholder="请选择">
+              <el-option v-for="area in areaList"
+                         :key="area.areaId"
+                         :label="area.areaName"
+                         :value="area.areaId"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="地址"
+                    prop="addr">
+        <el-input v-model="dataForm.addr"
+                  placeholder="地址"></el-input>
+      </el-form-item>
+      <el-form-item label="手机号"
+                    prop="mobile">
+        <el-input v-model="dataForm.mobile"
+                  maxlength="11"
+                  placeholder="手机号"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer"
+          class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary"
+                 @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { isMobile } from '@/utils/validate'
+import { Debounce } from '@/utils/debounce'
+
+export default {
+  data () {
+    var validateMobile = (rule, value, callback) => {
+      if (!isMobile(value)) {
+        callback(new Error('手机号格式错误'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      visible: false,
+      provinceList: [],
+      cityList: [],
+      areaList: [],
+      dataForm: {
+        addrId: 0,
+        addr: '',
+        addrName: '',
+        mobile: '',
+        area: '',
+        city: '',
+        province: '',
+        areaId: null,
+        cityId: null,
+        provinceId: null
+      },
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      },
+      dataRule: {
+        addrName: [
+          { required: true, message: '自提点名称不能为空', trigger: 'blur' },
+          { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的自提点名称', trigger: 'blur' }
+        ],
+        addr: [
+          { required: true, message: '地址不能为空', trigger: 'blur' },
+          { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的地址', trigger: 'blur' }
+        ],
+        city: [{ required: true, message: '城市不能为空', trigger: 'blur' }],
+        province: [
+          { required: true, message: '省份不能为空', trigger: 'blur' }
+        ],
+        area: [{ required: true, message: '区/县不能为空', trigger: 'blur' }],
+        mobile: [
+          { required: true, message: '手机号不能为空', trigger: 'blur' },
+          { validator: validateMobile, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init (id) {
+      this.dataForm.addrId = id || 0
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.dataForm.resetFields()
+        this.cityList = []
+        this.areaList = []
+        this.dataForm.provinceId = null
+        this.dataForm.cityId = null
+        this.dataForm.areaId = null
+      })
+      this.listAreaByParentId().then(({ data }) => {
+        this.provinceList = data
+      })
+      if (this.dataForm.addrId) {
+        this.$http({
+          url: this.$http.adornUrl(
+            `/shop/pickAddr/info/${this.dataForm.addrId}`
+          ),
+          method: 'get',
+          params: this.$http.adornParams()
+        }).then(({ data }) => {
+          this.dataForm.addr = data.addr
+          this.dataForm.mobile = data.mobile
+          this.dataForm.addrName = data.addrName
+          this.dataForm.areaId = data.areaId
+          this.dataForm.cityId = data.cityId
+          this.dataForm.provinceId = data.provinceId
+          this.listAreaByParentId(data.provinceId).then(({ data }) => {
+            this.cityList = data
+          })
+          this.listAreaByParentId(data.cityId).then(({ data }) => {
+            this.areaList = data
+          })
+        })
+      }
+    },
+    listAreaByParentId (pid) {
+      if (!pid) pid = 0
+      return this.$http({
+        url: this.$http.adornUrl(`/admin/area/listByPid`),
+        method: 'get',
+        params: this.$http.adornParams({ pid })
+      })
+    },
+    // 选择省
+    selectProvince (val) {
+      this.dataForm.cityId = null
+      this.dataForm.city = ''
+      // 获取城市的select
+      this.listAreaByParentId(val).then(({ data }) => {
+        this.cityList = data
+      })
+    },
+    // 选择市
+    selectCity (val) {
+      this.dataForm.areaId = null
+      this.dataForm.area = ''
+      // 获取区的select
+      this.listAreaByParentId(val).then(({ data }) => {
+        this.areaList = data
+      })
+    },
+    // 表单提交
+    dataFormSubmit: Debounce(function () {
+      for (let i = 0; i < this.provinceList.length; i++) {
+        if (this.provinceList[i].areaId === this.dataForm.provinceId) {
+          // 将省名字保存起来
+          this.dataForm.province = this.provinceList[i].areaName
+        }
+      }
+      for (let i = 0; i < this.cityList.length; i++) {
+        if (this.cityList[i].areaId === this.dataForm.cityId) {
+          // 将市名字保存起来
+          this.dataForm.city = this.cityList[i].areaName
+        }
+      }
+      for (let i = 0; i < this.areaList.length; i++) {
+        if (this.areaList[i].areaId === this.dataForm.areaId) {
+          // 将市名字保存起来
+          this.dataForm.area = this.areaList[i].areaName
+        }
+      }
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl(`/shop/pickAddr`),
+            method: this.dataForm.addrId ? 'put' : 'post',
+            data: this.$http.adornData({
+              addrId: this.dataForm.addrId || undefined,
+              addr: this.dataForm.addr,
+              addrName: this.dataForm.addrName,
+              mobile: this.dataForm.mobile,
+              area: this.dataForm.area,
+              city: this.dataForm.city,
+              province: this.dataForm.province,
+              areaId: this.dataForm.areaId,
+              cityId: this.dataForm.cityId,
+              provinceId: this.dataForm.provinceId
+            })
+          }).then(({ data }) => {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$emit('refreshDataList', this.page)
+              }
+            })
+          })
+        }
+      })
+    })
+  }
+}
+</script>

mall4v/src/views/modules/shop/pickAddr.vue

+<template>
+  <div class="mod-pickAddr">
+    <avue-crud ref="crud"
+               :page="page"
+               :data="dataList"
+               :option="tableOption"
+               :permission="permission"
+               @search-change="searchChange"
+               @selection-change="selectionChange"
+               @on-load="getDataList">
+      <template slot="menuLeft">
+        <el-button type="primary"
+                   icon="el-icon-plus"
+                   size="small"
+                   v-if="isAuth('shop:pickAddr:save')"
+                   @click.stop="addOrUpdateHandle()">新增</el-button>
+
+        <el-button type="danger"
+                   @click="deleteHandle()"
+                   v-if="isAuth('shop:pickAddr:delete')"
+                   size="small"
+                   :disabled="dataListSelections.length <= 0">批量删除</el-button>
+      </template>
+
+      <template slot-scope="scope"
+                slot="menu">
+        <el-button type="primary"
+                   icon="el-icon-edit"
+                   size="small"
+                   v-if="isAuth('shop:pickAddr:update')"
+                   @click.stop="addOrUpdateHandle(scope.row.addrId)">编辑</el-button>
+
+        <el-button type="danger"
+                   icon="el-icon-delete"
+                   size="small"
+                   v-if="isAuth('shop:pickAddr:delete')"
+                   @click.stop="deleteHandle(scope.row.addrId)">删除</el-button>
+      </template>
+    </avue-crud>
+
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible"
+                   ref="addOrUpdate"
+                   @refreshDataList="getDataList"></add-or-update>
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from './pickAddr-add-or-update'
+import { tableOption } from '@/crud/shop/pickAddr'
+export default {
+  data () {
+    return {
+      dataForm: {
+        addrName: ''
+      },
+      dataList: [],
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+      tableOption: tableOption,
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      },
+      permission: {
+        delBtn: this.isAuth('prod:prod:delete')
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  methods: {
+    // 获取数据列表
+    getDataList (page, params, done) {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/shop/pickAddr/page'),
+        method: 'get',
+        params: this.$http.adornParams(
+          Object.assign(
+            {
+              current: page == null ? this.page.currentPage : page.currentPage,
+              size: page == null ? this.page.pageSize : page.pageSize
+            },
+            params
+          )
+        )
+      }).then(({ data }) => {
+        this.dataList = data.records
+        this.page.total = data.total
+        this.dataListLoading = false
+        if (done) {
+          done()
+        }
+      })
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    // 删除
+    deleteHandle (id) {
+      var ids = id
+        ? [id]
+        : this.dataListSelections.map(item => {
+          return item.addrId
+        })
+      this.$confirm(
+        `确定进行删除操作?`, '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      )
+        .then(() => {
+          this.$http({
+            url: this.$http.adornUrl('/shop/pickAddr'),
+            method: 'delete',
+            data: this.$http.adornData(ids, false)
+          }).then(({ data }) => {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getDataList(this.page)
+              }
+            })
+          })
+        })
+        .catch(() => { })
+    },
+
+    // 条件查询
+    searchChange (params, done) {
+      this.getDataList(this.page, params, done)
+    },
+    // 多选变化
+    selectionChange (val) {
+      this.dataListSelections = val
+    }
+  }
+}
+</script>

mall4v/src/views/modules/shop/transcity-add-or-update.vue

+<template>
+  <div class="shop-transcity-add-or-update">
+    <el-dialog
+      :modal="false"
+      title="选择配送区域"
+      :close-on-click-modal="false"
+      :visible.sync="visible">
+      <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px" style="height:400px">
+        <el-scrollbar style="height:100%">
+          <el-form-item size="mini" label="配送区域">
+            <el-tree
+              :data="menuList"
+              :props="menuListTreeProps"
+              node-key="areaId"
+              ref="menuListTree"
+              show-checkbox
+              v-if="visible">
+            </el-tree>
+          </el-form-item>
+        </el-scrollbar>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import { treeDataTranslate } from '@/utils'
+  export default {
+    data () {
+      return {
+        type: 0,
+        visible: false,
+        menuList: [],
+        rowIndex: 0,
+        menuListTreeProps: {
+          label: 'areaName',
+          children: 'children'
+        },
+        dataForm: {
+          transfeeId: 0
+        }
+      }
+    },
+    methods: {
+      init (rowIndex, cityList, allSelectCityList, type) {
+        this.type = type
+        this.rowIndex = rowIndex
+        if (this.menuList.length === 0) {
+          // 获取所有省和市
+          this.$http({
+            url: this.$http.adornUrl('/admin/area/list'),
+            method: 'get',
+            params: this.$http.adornParams()
+          }).then(({data}) => {
+            this.menuList = treeDataTranslate(data, 'areaId', 'parentId')
+          }).then(() => {
+            this.visible = true
+            this.disabledNodes(cityList, allSelectCityList)
+            this.$nextTick(() => {
+              this.$refs['dataForm'].resetFields()
+              this.$refs.menuListTree.setCheckedNodes(cityList)
+            })
+          })
+        } else {
+          this.visible = true
+          this.disabledNodes(cityList, allSelectCityList)
+          this.$nextTick(() => {
+            this.$refs['dataForm'].resetFields()
+            this.$refs.menuListTree.setCheckedNodes(cityList)
+          })
+        }
+      },
+      disabledNodes (cityList, allSelectCityList) {
+        for (let i = 0; i < this.menuList.length; i++) {
+          const childrens = this.menuList[i].children
+          this.menuList[i].disabled = false
+          let disabledNum = 0
+          for (let j = 0; j < childrens.length; j++) {
+            const city = childrens[j]
+            this.menuList[i].children[j].disabled = false
+            let allHasCity = allSelectCityList.findIndex((item) => city.areaId === item.areaId) > -1
+            let listHasCity = cityList.findIndex((item) => city.areaId === item.areaId) > -1
+            if (allHasCity && !listHasCity) {
+              this.menuList[i].children[j].disabled = true
+              disabledNum++
+            }
+          }
+          if (disabledNum === this.menuList[i].children.length) {
+            this.menuList[i].disabled = true
+          }
+        }
+      },
+      // 表单提交
+      dataFormSubmit () {
+        this.$emit('refreshDataList', this.rowIndex, this.$refs.menuListTree.getCheckedNodes(true), this.type)
+        this.visible = false
+      }
+    }
+  }
+</script>
+
+<style  lang="scss">
+.shop-transcity-add-or-update {
+  .el-scrollbar__wrap{overflow-x:hidden;}
+}
+</style>

mall4v/src/views/modules/shop/transport-add-or-update.vue

+<template>
+  <el-dialog :title="!dataForm.transportId ? '新增' : '修改'"
+             :close-on-click-modal="false"
+             :visible.sync="visible"
+             width="1400px"
+             class="transport-dialog"
+  >
+    <el-form :model="dataForm"
+             ref="dataForm"
+             @keyup.enter.native="dataFormSubmit()"
+             label-width="80px">
+      <el-form-item label="模板名称"
+                    prop="transName"
+                    :rules="[
+                      { required: true, message: '模板名称不能为空'},
+                      { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的模板名称', trigger: 'blur' }
+                    ]">
+        <el-input v-model="dataForm.transName"
+                  placeholder="模板名称"></el-input>
+      </el-form-item>
+      <el-form-item label="模板类型"
+                    prop="isFreeFee"
+                    required="required">
+        <template>
+          <el-radio-group v-model="dataForm.isFreeFee"
+                          @change="changeFreeFee">
+            <el-radio :label="0">买家承担运费</el-radio>
+            <el-radio :label="1">卖家包邮</el-radio>
+          </el-radio-group>
+        </template>
+      </el-form-item>
+      <el-form-item label="收费方式"
+                    prop="chargeType">
+        <template>
+          <el-radio-group v-model="dataForm.chargeType"
+                          :disabled="dataForm.isFreeFee == 1">
+            <el-radio :label="0">按件数</el-radio>
+            <el-radio :label="1">按重量</el-radio>
+            <el-radio :label="2">按体积</el-radio>
+          </el-radio-group>
+        </template>
+      </el-form-item>
+      <el-table :data="dataForm.transfees"
+                border
+                style="width: 100%;"
+                class="table-con"
+      >
+        <el-table-column header-align="center"
+                         align="center"
+                         width="450"
+                         label="可配送区域">
+          <template slot-scope="scope">
+            <span v-if="scope.$index == 0">所有地区</span>
+            <span v-if="(!scope.row.cityList || !scope.row.cityList.length) && scope.$index > 0">请选择可配送区域</span>
+            <span v-if="scope.$index > 0">
+              <el-tag v-for="city in scope.row.cityList"
+                    :key="city.areaId"
+                    >{{city.areaName}}</el-tag>
+            </span>
+            <el-button v-if="isAuth('shop:transfee:update') && scope.$index > 0"
+                       type="text"
+                       size="small"
+                       @click="addOrUpdateHandle(`${scope.$index}`)">编辑</el-button>
+            <el-button v-if="isAuth('shop:transfee:delete') && scope.$index > 0"
+                       type="text"
+                       size="small"
+                       @click="deleteHandle(`${scope.$index}`)">删除</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column header-align="center"
+                         align="center"
+                         width="180"
+                         :label="tableTitle[0]">
+          <template slot-scope="scope">
+            <el-form-item :prop="`transfees.${scope.$index}.firstPiece`"
+                          label-width="0px"
+                          :rules="[{ required: true, message: `${tableTitle[0]}不能为空`}]">
+              <el-input type="number"
+                        @change="checkNumber(scope.row, 1)"
+                        v-model="scope.row.firstPiece"
+                        :disabled="!scope.row.status && scope.$index === 0"></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column header-align="center"
+                         align="center"
+                         :label="tableTitle[1]">
+          <template slot-scope="scope">
+            <el-form-item :prop="`transfees.${scope.$index}.firstFee`"
+                          label-width="0px"
+                          :rules="[{ required: true, message: `${tableTitle[1]}不能为空`}]">
+              <el-input type="number"
+                        v-model="scope.row.firstFee"
+                        :min="0"
+                        :disabled="!scope.row.status && scope.$index === 0"></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column header-align="center"
+                         align="center"
+                         :label="tableTitle[2]">
+          <template slot-scope="scope">
+            <el-form-item :prop="`transfees.${scope.$index}.continuousPiece`"
+                          label-width="0px"
+                          :rules="[{ required: true, message: `${tableTitle[2]}不能为空`}]">
+              <el-input type="number"
+                        @change="checkNumber(scope.row, 3)"
+                        v-model="scope.row.continuousPiece"
+                        :disabled="!scope.row.status && scope.$index === 0"></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column header-align="center"
+                         align="center"
+                         :label="tableTitle[3]">
+          <template slot-scope="scope">
+            <el-form-item :prop="`transfees.${scope.$index}.continuousFee`"
+                          label-width="0px"
+                          :rules="[{ required: true, message: `${tableTitle[3]}不能为空`}]">
+              <el-input type="number"
+                        :min="0"
+                        v-model="scope.row.continuousFee"
+                        :disabled="!scope.row.status && scope.$index === 0"></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="margin-top: 20px"
+           v-if="dataForm.isFreeFee == 0">
+        <el-button type="primary"
+                   icon="el-icon-location-outline"
+                   @click="addTransfee()">点击添加可配送的区域和运费</el-button>
+      </div>
+      <el-checkbox v-model="dataForm.hasFreeCondition"
+                   v-if="!dataForm.isFreeFee"
+                   style="margin-top:10px;font-size:50px">指定条件包邮</el-checkbox>
+      <el-table v-if="dataForm.hasFreeCondition && !dataForm.isFreeFee"
+                :data="dataForm.transfeeFrees"
+                border
+                style="width: 100%;">
+        <el-table-column header-align="center"
+                         align="center"
+                         width="350"
+                         label="指定区域">
+          <template slot-scope="scope">
+            <span v-if="!scope.row.freeCityList || !scope.row.freeCityList.length">请选择指定包邮城市</span>
+            <el-tag v-for="city in scope.row.freeCityList"
+                    :key="city.areaId">{{city.areaName}}</el-tag>
+            <el-button v-if="isAuth('shop:transfee:update')"
+                       type="text"
+                       size="small"
+                       @click="addOrUpdateTransfeeFree(`${scope.$index}`)">编辑</el-button>
+            <el-button v-if="isAuth('shop:transfee:delete')"
+                       type="text"
+                       size="small"
+                       @click="deleteTransfeeFree(`${scope.$index}`)">删除</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column header-align="center"
+                         align="center"
+                         width="600"
+                         label="设置包邮条件">
+          <template slot-scope="scope">
+            <el-radio-group v-model="scope.row.freeType">
+              <el-radio :label="0">满件/重量/体积包邮</el-radio>
+              <el-radio :label="1">满金额包邮</el-radio>
+              <el-radio :label="2">满件/重量/体积且满金额包邮</el-radio>
+            </el-radio-group>
+          </template>
+        </el-table-column>
+        <el-table-column header-align="center"
+                         align="left">
+          <template slot-scope="scope">
+            <el-form-item :prop="`transfeeFrees.${scope.$index}.amount`"
+                          v-if="scope.row.freeType == 1 || scope.row.freeType == 2"
+                          label-width="0px"
+                          :rules="[{ required: true, message: `不能为空`}]">
+              满 <el-input style="width:100px"
+                        v-model="scope.row.amount"></el-input> 元包邮
+            </el-form-item>
+            <el-form-item :prop="`transfeeFrees.${scope.$index}.piece`"
+                          v-if="scope.row.freeType == 0 || scope.row.freeType == 2"
+                          label-width="0px"
+                          :rules="[{ required: true, message: `不能为空`}]">
+              满 <el-input style="width:100px"
+                        v-model="scope.row.piece"></el-input> 件/重量/体积包邮
+            </el-form-item>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="margin-top: 20px"
+           v-if="dataForm.isFreeFee == 0">
+        <el-button type="primary"
+                   icon="el-icon-location-outline"
+                   @click="addTransfeeFree()">点击添加指定包邮条件</el-button>
+      </div>
+    </el-form>
+    <span slot="footer"
+          class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary"
+                 @click="dataFormSubmit()">确定</el-button>
+    </span>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible"
+                   ref="addOrUpdate"
+                   @refreshDataList="getDataList"></add-or-update>
+  </el-dialog>
+</template>
+
+<script>
+import { Debounce } from '@/utils/debounce'
+import AddOrUpdate from './transcity-add-or-update'
+export default {
+  data () {
+    return {
+      hasFreeCondition: 0,
+      visible: false,
+      addOrUpdateVisible: false,
+      dataForm: {
+        hasFreeCondition: false,
+        transName: '',
+        createTime: '',
+        chargeType: 0,
+        transportId: 0,
+        isFreeFee: 0,
+        transfees: [{ cityList: [], status: 1 }],
+        transfeeFrees: [{ freeCityList: [], freeType: 0 }]
+      },
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      },
+      editVisible: false
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  watch: {
+    // 如果当前对话框不可见，则关闭选择城市的对话框
+    visible: function (val) {
+      if (!val) {
+        this.addOrUpdateVisible = false
+      }
+    }
+  },
+  computed: {
+    tableTitle () {
+      var titles = [['首件(个)', '运费(元)', '续件(个)', '续费(元)'], ['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'], ['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']]
+      if (this.dataForm.chargeType) {
+        return titles[this.dataForm.chargeType]
+      }
+      return titles[0]
+    }
+  },
+  methods: {
+    init (id) {
+      this.visible = true
+      this.dataForm.transportId = id || 0
+      this.$nextTick(() => {
+        this.$refs.dataForm.resetFields()
+        this.dataForm = {
+          hasFreeCondition: false,
+          transName: '',
+          createTime: '',
+          chargeType: 0,
+          transportId: 0,
+          isFreeFee: 0,
+          transfees: [{ cityList: [], status: 1 }],
+          transfeeFrees: [{ freeCityList: [], freeType: 0 }]
+        }
+      })
+      if (this.dataForm.transportId) {
+        this.$http({
+          // 获取运费模板数据
+          url: this.$http.adornUrl(`/shop/transport/info/${this.dataForm.transportId}`),
+          method: 'get'
+        }).then(({ data }) => {
+          if (data.isFreeFee) {
+            data.transfees[0].status = 0
+          } else {
+            data.transfees[0].status = 1
+          }
+          this.dataForm = data
+          this.dataForm.hasFreeCondition = !!data.hasFreeCondition
+        })
+      }
+    },
+    getDataList (row, cityList, type) {
+      if (type === 0) {
+        this.$set(this.dataForm.transfees[row], 'cityList', cityList)
+      }
+      if (type === 1) {
+        this.$set(this.dataForm.transfeeFrees[row], 'freeCityList', cityList)
+      }
+    },
+    // 添加运费项
+    addTransfee () {
+      this.editVisible = true
+      this.dataForm.transfees.push({ cityList: [], status: 1 })
+    },
+    // 删除运费项
+    deleteHandle (rowIndex) {
+      this.dataForm.transfees.splice(rowIndex, 1)
+    },
+    // 可配送区域和运费编辑
+    addOrUpdateHandle (rowIndex) {
+      this.addOrUpdateVisible = true
+      let allSelectCityList = []
+      for (let i = 1; i < this.dataForm.transfees.length; i++) {
+        const cityList = this.dataForm.transfees[i].cityList
+        allSelectCityList = allSelectCityList.concat(cityList)
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(rowIndex, this.dataForm.transfees[rowIndex].cityList || [], allSelectCityList, 0)
+      })
+    },
+    // 添加指定包邮条件
+    addTransfeeFree () {
+      if (this.dataForm.hasFreeCondition) {
+        this.dataForm.transfeeFrees.push({ freeCityList: [], freeType: 0 })
+      }
+    },
+    // 删除指定包邮条件
+    deleteTransfeeFree (rowIndex) {
+      this.dataForm.transfeeFrees.splice(rowIndex, 1)
+    },
+    // 指定包邮条件编辑
+    addOrUpdateTransfeeFree (rowIndex) {
+      this.addOrUpdateVisible = true
+      let allSelectCityList = []
+      for (let i = 1; i < this.dataForm.transfeeFrees.length; i++) {
+        const freeCityList = this.dataForm.transfeeFrees[i].freeCityList
+        allSelectCityList = allSelectCityList.concat(freeCityList)
+      }
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(rowIndex, this.dataForm.transfeeFrees[rowIndex].freeCityList || [], allSelectCityList, 1)
+      })
+    },
+    // 改变模板类型， 0 买家承担运费 1 卖家包邮
+    changeFreeFee (val) {
+      this.dataForm.hasFreeCondition = false
+      if (val) {
+        this.dataForm.chargeType = 0
+        this.dataForm.transfees = [{ cityList: [], status: 0, firstPiece: 1, firstFee: 0, continuousPiece: 1, continuousFee: 0 }]
+      } else {
+        this.dataForm.transfees = [{ cityList: [], status: 1 }]
+      }
+    },
+    /**
+     * 校验输入的数字
+     */
+    checkNumber (row, type) {
+      if (type === 1) {
+        row.firstPiece = this.getNumber(row.firstPiece)
+        row.firstPiece = row.firstPiece === 0 ? 1 : row.firstPiece
+      } else if (type === 3) {
+        row.continuousPiece = this.getNumber(row.continuousPiece)
+        row.continuousPiece = row.continuousPiece === 0 ? 1 : row.continuousPiece
+      }
+    },
+    /**
+     * 保留整数并小于零的数设为0
+     */
+    getNumber (num) {
+      num = Math.round(num)
+      return num < 0 ? 0 : num
+    },
+    // 表单提交
+    dataFormSubmit: Debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          for (let i = 1; i < this.dataForm.transfees.length; i++) {
+            const transfee = this.dataForm.transfees[i]
+            if (transfee.cityList.length === 0) {
+              this.$message({
+                message: '请选择可配送区域',
+                type: 'error',
+                duration: 1500
+              })
+              return
+            }
+          }
+          if (this.dataForm.hasFreeCondition) {
+            this.hasFreeCondition = 1
+          } else {
+            this.hasFreeCondition = 0
+          }
+          this.dataForm.transfees[0].cityList = []
+          this.$http({
+            url: this.$http.adornUrl(`/shop/transport`),
+            method: this.dataForm.transportId ? 'put' : 'post',
+            data: this.$http.adornData({
+              'transportId': this.dataForm.transportId || undefined,
+              'transName': this.dataForm.transName,
+              'chargeType': this.dataForm.chargeType,
+              'isFreeFee': this.dataForm.isFreeFee,
+              'transfees': this.dataForm.transfees,
+              'transfeeFrees': this.dataForm.transfeeFrees,
+              'hasFreeCondition': this.hasFreeCondition
+            })
+          }).then(({ data }) => {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$emit('refreshDataList', this.page)
+              }
+            })
+          })
+        }
+      })
+    })
+  }
+}
+</script>
+
+<style scoped>
+.transport-dialog .table-con .el-form-item {
+  margin-top: 16px;
+  margin-bottom: 16px!important;
+}
+</style>

mall4v/src/views/modules/shop/transport.vue

+<template>
+  <div class="mod-transport">
+    <avue-crud ref="crud"
+               :page="page"
+               :data="dataList"
+               :option="tableOption"
+               @search-change="searchChange"
+               @selection-change="selectionChange"
+               @on-load="getDataList">
+      <template slot-scope="scope"
+                slot="prodPropValues">
+        <el-tag v-for="item in scope.row.prodPropValues"
+                :key="item.valueId">{{item.propValue}}
+        </el-tag>
+      </template>
+      <template slot="menuLeft">
+        <el-button type="primary"
+                   icon="el-icon-plus"
+                   size="small"
+                   v-if="isAuth('shop:transport:save')"
+                   @click.stop="addOrUpdateHandle()">新增</el-button>
+
+        <el-button type="danger"
+                   @click="deleteHandle()"
+                   v-if="isAuth('shop:transport:delete')"
+                   size="small"
+                   :disabled="dataListSelections.length <= 0">批量删除</el-button>
+      </template>
+
+      <template slot-scope="scope"
+                slot="menu">
+        <el-button type="primary"
+                   icon="el-icon-edit"
+                   size="small"
+                   v-if="isAuth('shop:transport:update')"
+                   @click.stop="addOrUpdateHandle(scope.row.transportId)">修改</el-button>
+
+        <el-button type="danger"
+                   icon="el-icon-delete"
+                   size="small"
+                   v-if="isAuth('shop:transport:delete')"
+                   @click.stop="deleteHandle(scope.row.transportId)">删除</el-button>
+      </template>
+    </avue-crud>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible"
+                   ref="addOrUpdate"
+                   @refreshDataList="getDataList"></add-or-update>
+  </div>
+</template>
+
+<script>
+import { tableOption } from '@/crud/shop/transport'
+import AddOrUpdate from './transport-add-or-update'
+export default {
+  data () {
+    return {
+      dataForm: {
+        transName: ''
+      },
+      dataList: [],
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      },
+      tableOption: tableOption
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  methods: {
+    // 获取数据列表
+    getDataList (page, params, done) {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/shop/transport/page'),
+        method: 'get',
+        params: this.$http.adornParams(
+          Object.assign(
+            {
+              current: page == null ? this.page.currentPage : page.currentPage,
+              size: page == null ? this.page.pageSize : page.pageSize
+            },
+            params
+          )
+        )
+      }).then(({ data }) => {
+        this.dataList = data.records
+        this.page.total = data.total
+        this.dataListLoading = false
+        if (done) {
+          done()
+        }
+      })
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    // 删除
+    deleteHandle (id) {
+      var ids = id ? [id] : this.dataListSelections.map(item => { return item.transportId })
+      this.$confirm(
+        `确定进行[${id ? '删除' : '批量删除'}]操作?`,
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        this.$http({
+          url: this.$http.adornUrl('/shop/transport'),
+          method: 'delete',
+          data: this.$http.adornData(ids, false)
+        }).then(({data}) => {
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              // this.getDataList(this.page)
+              this.refreshChange()
+            }
+          })
+        })
+      }).catch((e) => {
+        console.log('e: ', e)
+      })
+    },
+
+    // 条件查询
+    searchChange (params, done) {
+      this.getDataList(this.page, params, done)
+    },
+    // 刷新回调用
+    refreshChange () {
+      this.page = this.$refs.crud.$refs.tablePage.defaultPage
+      this.getDataList(this.page)
+      this.dataListSelections = []
+      this.$refs.crud.selectClear()
+    },
+    // 多选变化
+    selectionChange (val) {
+      console.log('val: ', val)
+      this.dataListSelections = val
+    }
+  }
+}
+</script>

mall4v/src/views/modules/sys/area-add-or-update.vue

+<template>
+  <el-dialog :title="!dataForm.areaId ? '新增' : '修改'"
+             :close-on-click-modal="false"
+             :visible.sync="visible">
+    <el-form :model="dataForm"
+             :rules="dataRule"
+             ref="dataForm"
+             @keyup.enter.native="dataFormSubmit()"
+             label-width="100px">
+      <el-form-item label="地区名称"
+                    prop="areaName">
+        <el-input v-model="dataForm.areaName" placeholder="请输入地区名称" maxlength="50" show-word-limit></el-input>
+      </el-form-item>
+      <el-form-item label="上级地区"
+                    prop="parentId">
+        <el-cascader expand-trigger="hover"
+                     :options="areaList"
+                     :props="categoryTreeProps"
+                     change-on-select
+                     filterable
+                     v-model="selectedOptions"
+                     @change="handleChange">
+        </el-cascader>
+      </el-form-item>
+    </el-form>
+    <span slot="footer"
+          class="dialog-footer">
+      <el-button @click="visible = false"
+                 size="mini">取消</el-button>
+      <el-button type="primary"
+                 @click="dataFormSubmit()"
+                 size="mini">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { treeDataTranslate } from '@/utils'
+import { Debounce } from '@/utils/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      roleList: [],
+      dataForm: {
+        areaId: '',
+        areaName: null,
+        parentId: null,
+        level: null
+      },
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 20 // 每页显示多少条
+      },
+      dataRule: {
+        areaName: [
+          { required: true, message: '区域名称不能为空', trigger: 'blur' },
+          { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的区域名称', trigger: 'blur' }
+        ]
+      },
+      areaList: [],
+      categoryTreeProps: {
+        value: 'areaId',
+        label: 'areaName'
+      },
+      selectedOptions: []
+    }
+  },
+  methods: {
+    init (areaId) {
+      this.dataForm.areaId = areaId || 0
+      this.visible = true
+      this.selectedOptions = []
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.areaId) {
+          this.$http({
+            url: this.$http.adornUrl('/admin/area/info/' + this.dataForm.areaId),
+            method: 'get',
+            params: this.$http.adornParams()
+          }).then(({ data }) => {
+            this.dataForm = data
+            this.selectedOptions.push(this.dataForm.parentId)
+            this.categoryTreeProps.areaId = this.dataForm.areaId
+            this.categoryTreeProps.areaName = this.dataForm.areaName
+          })
+        }
+
+        this.$http({
+          url: this.$http.adornUrl('/admin/area/list'),
+          method: 'get',
+          params: this.$http.adornParams()
+        }).then(({ data }) => {
+          this.areaList = treeDataTranslate(data, 'areaId', 'parentId')
+        })
+      })
+    },
+    // 表单提交
+    dataFormSubmit: Debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl('/admin/area'),
+            method: this.dataForm.areaId ? 'put' : 'post',
+            data: this.$http.adornData(this.dataForm)
+          }).then(({ data }) => {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$emit('refreshDataList', this.page)
+              }
+            })
+          })
+        }
+      })
+    }),
+    handleChange (val) {
+      this.dataForm.parentId = val[val.length - 1]
+    }
+  }
+}
+</script>
\ No newline at end of file

mall4v/src/views/modules/sys/area.vue

+<template>
+  <div class="mod-sys-area">
+    <el-input v-model="areaName"
+              class="area-search-input"
+              placeholder="地区关键词">
+    </el-input>
+    <el-button type="primary"
+               size="mini"
+               class="area-add-btn"
+               @click="addOrUpdateHandle()">新增</el-button>
+
+    <el-tree :data="data"
+             node-key="areaId"
+             :filter-node-method="filterNode"
+             ref="tree2"
+             :props="props"
+             :expand-on-click-node="false">
+
+      <span class="custom-tree-node"
+            slot-scope="{ node, data }">
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button type="text"
+                     icon="el-icon-edit"
+                     size="small"
+                     @click="() => update(node, data)">
+            修改
+          </el-button>
+          <el-button type="text"
+                     icon="el-icon-delete"
+                     size="small"
+                     @click="() => remove(node, data)">
+            删除
+          </el-button>
+        </span>
+      </span>
+    </el-tree>
+
+    <add-or-update v-if="addOrUpdateVisible"
+                   ref="addOrUpdate"
+                   @refreshDataList="getDataList"></add-or-update>
+  </div>
+</template>
+
+<script>
+import { tableOption } from '@/crud/sys/area'
+import AddOrUpdate from './area-add-or-update'
+import { treeDataTranslate } from '@/utils'
+export default {
+  data () {
+    return {
+      dataList: [],
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      },
+      dataListLoading: false,
+      tableOption: tableOption,
+      addOrUpdateVisible: false,
+      areaName: '',
+      dataForm: {},
+      data: [],
+      params: {
+        areaName: null
+      },
+      props: {
+        id: 'areaId',
+        label: 'areaName',
+        children: 'children'
+      }
+    }
+  },
+  created () {
+    this.getDataList(this.page)
+  },
+  mounted () {
+  },
+  components: {
+    AddOrUpdate
+  },
+  watch: {
+    areaName (val) {
+      this.$refs.tree2.filter(val)
+    }
+  },
+  methods: {
+    getDataList (page, params, done) {
+      this.$http({
+        url: this.$http.adornUrl('/admin/area/list'),
+        method: 'get',
+        params: this.$http.adornParams(Object.assign({
+          current: page == null ? this.page.currentPage : page.currentPage,
+          size: page == null ? this.page.pageSize : page.pageSize
+        }, params))
+      }).then(({ data }) => {
+        let treeData = treeDataTranslate(data, 'areaId', 'parentId')
+        this.data = treeData
+      })
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+
+    // 删除
+    deleteHandle (areaId) {
+      this.$confirm('确定进行删除操作?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl('/admin/area/' + areaId),
+          method: 'delete',
+          data: this.$http.adornData({})
+        }).then(({ data }) => {
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.getDataList(this.page)
+            }
+          })
+        })
+      }).catch(() => { })
+    },
+    update (node, data) {
+      this.addOrUpdateHandle(data.areaId)
+    },
+
+    remove (node, data) {
+      this.deleteHandle(data.areaId)
+    },
+
+    filterNode (value, data) {
+      if (!value) return true
+      return data.areaName.indexOf(value) !== -1
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.mod-sys-area {
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+  .area-search-input {
+    width: 30%;
+  }
+  .area-add-btn {
+    float: right;
+  }
+}
+</style>

mall4v/src/views/modules/sys/config-add-or-update.vue

+<template>
+  <el-dialog
+    :title="!dataForm.id ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+      <el-form-item label="参数名" prop="paramKey">
+        <el-input v-model="dataForm.paramKey" placeholder="参数名"></el-input>
+      </el-form-item>
+      <el-form-item label="参数值" prop="paramValue">
+        <el-input v-model="dataForm.paramValue" placeholder="参数值"></el-input>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { Debounce } from '@/utils/debounce'
+
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        paramKey: '',
+        paramValue: '',
+        remark: ''
+      },
+      dataRule: {
+        paramKey: [
+            { required: true, message: '参数名不能为空', trigger: 'blur' },
+            { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的参数名', trigger: 'blur' }
+        ],
+        paramValue: [
+            { required: true, message: '参数值不能为空', trigger: 'blur' },
+            { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的参数值', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init (id) {
+      this.dataForm.id = id || 0
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.$http({
+            url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
+            method: 'get',
+            params: this.$http.adornParams()
+          }).then(({data}) => {
+            this.dataForm.paramKey = data.paramKey
+            this.dataForm.paramValue = data.paramValue
+            this.dataForm.remark = data.remark
+          })
+        }
+      })
+    },
+      // 表单提交
+    dataFormSubmit: Debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl(`/sys/config`),
+            method: this.dataForm.id ? 'put' : 'post',
+            data: this.$http.adornData({
+              'id': this.dataForm.id || undefined,
+              'paramKey': this.dataForm.paramKey,
+              'paramValue': this.dataForm.paramValue,
+              'remark': this.dataForm.remark
+            })
+          }).then(({data}) => {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    })
+  }
+}
+</script>

mall4v/src/views/modules/sys/config.vue

+<template>
+  <div class="mod-config">
+    <avue-crud ref="crud"
+               :page="page"
+               :data="dataList"
+               :option="tableOption"
+               @search-change="searchChange"
+               @selection-change="selectionChange"
+               @on-load="getDataList">
+      <template slot="menuLeft">
+        <el-button type="primary"
+                   icon="el-icon-plus"
+                   size="small"
+                   @click.stop="addOrUpdateHandle()">新增</el-button>
+
+        <el-button type="danger"
+                   @click="deleteHandle()"
+                   size="small"
+                   :disabled="dataListSelections.length <= 0">批量删除</el-button>
+      </template>
+      <template slot-scope="scope"
+                slot="menu">
+        <el-button type="primary"
+                   icon="el-icon-edit"
+                   size="small"
+                   @click.stop="addOrUpdateHandle(scope.row.id)">编辑</el-button>
+
+        <el-button type="danger"
+                   icon="el-icon-delete"
+                   size="small"
+                   @click.stop="deleteHandle(scope.row.id)">删除</el-button>
+      </template>
+    </avue-crud>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible"
+                   ref="addOrUpdate"
+                   @refreshDataList="getDataList"></add-or-update>
+  </div>
+</template>
+
+<script>
+import { tableOption } from '@/crud/sys/config'
+import AddOrUpdate from './config-add-or-update'
+export default {
+  data () {
+    return {
+      dataList: [],
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+      tableOption: tableOption,
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  methods: {
+    // 获取数据列表
+    getDataList (page, params, done) {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/sys/config/page'),
+        method: 'get',
+        params: this.$http.adornParams(
+          Object.assign(
+            {
+              current: page == null ? this.page.currentPage : page.currentPage,
+              size: page == null ? this.page.pageSize : page.pageSize
+            },
+            params
+          )
+        )
+      }).then(({ data }) => {
+        this.dataList = data.records
+        this.page.total = data.total
+        this.dataListLoading = false
+        if (done) {
+          done()
+        }
+      })
+    },
+    // 条件查询
+    searchChange (params, done) {
+      this.getDataList(this.page, params, done)
+    },
+    // 多选变化
+    selectionChange (val) {
+      this.dataListSelections = val
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    // 删除
+    deleteHandle (id) {
+      var ids = id ? [id] : this.dataListSelections.map(item => {
+        return item.id
+      })
+      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl('/sys/config'),
+          method: 'delete',
+          data: this.$http.adornData(ids, false)
+        }).then(({ data }) => {
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.getDataList()
+            }
+          })
+        })
+      }).catch(() => { })
+    }
+  }
+}
+</script>

mall4v/src/views/modules/sys/log.vue

+<template>
+  <div class="mod-log">
+    <avue-crud ref="crud"
+               :page="page"
+               :data="dataList"
+               :option="tableOption"
+               @search-change="searchChange"
+               @on-load="getDataList">
+    </avue-crud>
+  </div>
+</template>
+
+<script>
+import { tableOption } from '@/crud/sys/log'
+export default {
+  data () {
+    return {
+      dataList: [],
+      dataListLoading: false,
+      selectionDataList: [],
+      tableOption: tableOption,
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      }
+    }
+  },
+  created () {
+    this.getDataList()
+  },
+  methods: {
+    // 获取数据列表
+    getDataList (page, params, done) {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/sys/log/page'),
+        method: 'get',
+        params: this.$http.adornParams(
+          Object.assign(
+            {
+              current: page == null ? this.page.currentPage : page.currentPage,
+              size: page == null ? this.page.pageSize : page.pageSize
+            },
+            params
+          )
+        )
+      }).then(({ data }) => {
+        this.dataList = data.records
+        this.page.total = data.total
+        this.dataListLoading = false
+        if (done) {
+          done()
+        }
+      })
+    },
+    // 条件查询
+    searchChange (params, done) {
+      this.getDataList(this.page, params, done)
+    }
+  }
+}
+</script>

mall4v/src/views/modules/sys/menu-add-or-update.vue

+<template>
+  <el-dialog
+    :title="!dataForm.id ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+      <el-form-item label="类型" prop="type">
+        <el-radio-group v-model="dataForm.type">
+          <el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item :label="dataForm.typeList[dataForm.type] + '名称'" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
+      </el-form-item>
+      <el-form-item label="上级菜单">
+        <el-cascader
+          expand-trigger="hover"
+          :options="menuList"
+          :props="menuListTreeProps"
+          change-on-select
+          v-model="selectedMenu"
+          @change="handleSelectMenuChange">
+        </el-cascader>
+      </el-form-item>
+      <el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url">
+        <el-input v-model="dataForm.url" placeholder="菜单路由"></el-input>
+      </el-form-item>
+      <el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms">
+        <el-input v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input>
+      </el-form-item>
+      <el-form-item v-if="dataForm.type !== 2" label="排序号" prop="orderNum">
+        <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number>
+      </el-form-item>
+      <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
+        <el-row>
+          <el-col :span="22">
+            <el-popover
+              ref="iconListPopover"
+              placement="bottom-start"
+              trigger="click"
+              popper-class="mod-menu__icon-popover">
+              <div class="mod-menu__icon-list">
+                <el-button
+                  v-for="(item, index) in iconList"
+                  :key="index"
+                  @click="iconActiveHandle(item)"
+                  :class="{ 'is-active': item === dataForm.icon }">
+                  <icon-svg :name="item"></icon-svg>
+                </el-button>
+              </div>
+            </el-popover>
+            <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" placeholder="菜单图标名称" class="icon-list__input"></el-input>
+          </el-col>
+          <el-col :span="2" class="icon-list__tips">
+            <el-tooltip placement="top" effect="light">
+              <div slot="content">全站推荐使用SVG Sprite, 详细请参考:icons/index.js 描述</div>
+              <i class="el-icon-warning"></i>
+            </el-tooltip>
+          </el-col>
+        </el-row>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  import { treeDataTranslate, idList } from '@/utils'
+  import Icon from '@/icons'
+  import { Debounce } from '@/utils/debounce'
+  export default {
+    data () {
+      var validateUrl = (rule, value, callback) => {
+        if (this.dataForm.type === 1 && !/\S/.test(value)) {
+          callback(new Error('菜单URL不能为空'))
+        } else {
+          callback()
+        }
+      }
+      return {
+        visible: false,
+        dataForm: {
+          id: 0,
+          type: 1,
+          typeList: ['目录', '菜单', '按钮'],
+          name: '',
+          parentId: 0,
+          url: '',
+          perms: '',
+          orderNum: 0,
+          icon: '',
+          iconList: []
+        },
+        dataRule: {
+          name: [
+            { required: true, message: '菜单名称不能为空', trigger: 'blur' },
+            { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的菜单名称', trigger: 'blur' }
+          ],
+          url: [
+            { validator: validateUrl, trigger: 'blur' }
+          ]
+        },
+        menuList: [],
+        selectedMenu: [],
+        menuListTreeProps: {
+          value: 'menuId',
+          label: 'name'
+        }
+      }
+    },
+    created () {
+      this.iconList = Icon.getNameList()
+    },
+    methods: {
+      init (id) {
+        this.dataForm.id = id || 0
+        this.$http({
+          url: this.$http.adornUrl('/sys/menu/list'),
+          method: 'get',
+          params: this.$http.adornParams()
+        }).then(({data}) => {
+          this.menuList = treeDataTranslate(data, 'menuId')
+        }).then(() => {
+          this.visible = true
+          this.$nextTick(() => {
+            this.$refs['dataForm'].resetFields()
+          })
+        }).then(() => {
+          if (this.dataForm.id) {
+            // 修改
+            this.$http({
+              url: this.$http.adornUrl(`/sys/menu/info/${this.dataForm.id}`),
+              method: 'get',
+              params: this.$http.adornParams()
+            }).then(({data}) => {
+              this.dataForm.id = data.menuId
+              this.dataForm.type = data.type
+              this.dataForm.name = data.name
+              this.dataForm.parentId = data.parentId
+              this.dataForm.url = data.url
+              this.dataForm.perms = data.perms
+              this.dataForm.orderNum = data.orderNum
+              this.dataForm.icon = data.icon
+              this.selectedMenu = idList(this.menuList, data.parentId, 'menuId', 'children').reverse()
+            })
+          } else {
+            this.selectedMenu = []
+          }
+        })
+      },
+      handleSelectMenuChange (val) {
+        this.dataForm.parentId = val[val.length - 1]
+      },
+      // 图标选中
+      iconActiveHandle (iconName) {
+        this.dataForm.icon = iconName
+      },
+      // 表单提交
+      dataFormSubmit: Debounce(function () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            this.$http({
+              url: this.$http.adornUrl(`/sys/menu`),
+              method: this.dataForm.id ? 'put' : 'post',
+              data: this.$http.adornData({
+                'menuId': this.dataForm.id || undefined,
+                'type': this.dataForm.type,
+                'name': this.dataForm.name,
+                'parentId': this.dataForm.parentId,
+                'url': this.dataForm.url,
+                'perms': this.dataForm.perms,
+                'orderNum': this.dataForm.orderNum,
+                'icon': this.dataForm.icon
+              })
+            }).then(({data}) => {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        })
+      })
+    }
+  }
+</script>
+
+<style lang="scss">
+
+  .mod-menu {
+    .menu-list__input,
+    .icon-list__input {
+       > .el-input__inner {
+        cursor: pointer;
+      }
+    }
+    &__icon-popover {
+      max-width: 420px;
+    }
+    &__icon-list {
+      max-height: 180px;
+      padding: 0;
+      margin: -8px 0 0 -8px;
+      > .el-button {
+        padding: 8px;
+        margin: 8px 0 0 8px;
+        > span {
+          display: inline-block;
+          vertical-align: middle;
+          width: 18px;
+          height: 18px;
+          font-size: 18px;
+        }
+      }
+    }
+    .icon-list__tips {
+      font-size: 18px;
+      text-align: center;
+      color: #e6a23c;
+      cursor: pointer;
+    }
+  }
+</style>

mall4v/src/views/modules/sys/menu.vue

+<template>
+  <div class="mod-menu">
+    <el-form :inline="true"
+             :model="dataForm">
+      <el-form-item>
+        <el-button v-if="isAuth('sys:menu:save')"
+                   type="primary"
+                   @click="addOrUpdateHandle()">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table :data="dataList"
+              border
+              style="width: 100%;"
+              row-key="menuId">
+      <el-table-column prop="name"
+                       header-align="center"
+                       treeKey="menuId"
+                       width="150"
+                       label="名称">
+      </el-table-column>
+      <el-table-column header-align="center"
+                       align="center"
+                       label="图标">
+        <template slot-scope="scope">
+          <icon-svg :name="scope.row.icon || ''"></icon-svg>
+        </template>
+      </el-table-column>
+      <el-table-column prop="type"
+                       header-align="center"
+                       align="center"
+                       label="类型">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.type === 0"
+                  size="small">目录</el-tag>
+          <el-tag v-else-if="scope.row.type === 1"
+                  size="small"
+                  type="success">菜单</el-tag>
+          <el-tag v-else-if="scope.row.type === 2"
+                  size="small"
+                  type="info">按钮</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderNum"
+                       header-align="center"
+                       align="center"
+                       label="排序号">
+      </el-table-column>
+      <el-table-column prop="url"
+                       header-align="center"
+                       align="center"
+                       width="150"
+                       :show-overflow-tooltip="true"
+                       label="菜单URL">
+        <template slot-scope="scope">{{scope.row.url || '-'}}</template>
+      </el-table-column>
+      <el-table-column prop="perms"
+                       header-align="center"
+                       align="center"
+                       width="150"
+                       :show-overflow-tooltip="true"
+                       label="授权标识">
+        <template slot-scope="scope">{{scope.row.perms || '-'}}</template>
+      </el-table-column>
+      <el-table-column fixed="right"
+                       header-align="center"
+                       align="center"
+                       width="150"
+                       label="操作">
+        <template slot-scope="scope">
+          <el-button v-if="isAuth('sys:menu:update')"
+                     type="text"
+                     size="small"
+                     @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
+          <el-button v-if="isAuth('sys:menu:delete')"
+                     type="text"
+                     size="small"
+                     @click="deleteHandle(scope.row.menuId)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible"
+                   ref="addOrUpdate"
+                   @refreshDataList="getDataList"></add-or-update>
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from './menu-add-or-update'
+import { treeDataTranslate } from '@/utils'
+export default {
+  data () {
+    return {
+      dataForm: {},
+      dataList: [],
+      dataListLoading: false,
+      addOrUpdateVisible: false
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  activated () {
+    this.getDataList()
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/sys/menu/table'),
+        method: 'get',
+        params: this.$http.adornParams()
+      }).then(({ data }) => {
+        this.dataList = treeDataTranslate(data, 'menuId')
+        this.dataListLoading = false
+      })
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    // 删除
+    deleteHandle (id) {
+      this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl(`/sys/menu/${id}`),
+          method: 'delete',
+          data: this.$http.adornData()
+        }).then(({ data }) => {
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.getDataList()
+            }
+          })
+        })
+      })
+    }
+  }
+}
+</script>

mall4v/src/views/modules/sys/role-add-or-update.vue

+<template>
+  <el-dialog
+    :title="!dataForm.id ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+      </el-form-item>
+      <el-form-item size="mini" label="授权">
+        <el-tree
+          :data="menuList"
+          :props="menuListTreeProps"
+          node-key="menuId"
+          ref="menuListTree"
+          show-checkbox>
+        </el-tree>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  import { treeDataTranslate } from '@/utils'
+  import { Debounce } from '@/utils/debounce'
+  export default {
+    data () {
+      return {
+        visible: false,
+        menuList: [],
+        menuListTreeProps: {
+          label: 'name',
+          children: 'children'
+        },
+        dataForm: {
+          id: 0,
+          roleName: '',
+          remark: ''
+        },
+        dataRule: {
+          roleName: [
+            { required: true, message: '角色名称不能为空', trigger: 'blur' },
+            { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的角色名称', trigger: 'blur' }
+          ],
+          remark: [
+            { required: false, pattern: /\s\S+|S+\s|\S/, message: '输入格式有误', trigger: 'blur' }
+          ]
+        },
+        tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
+      }
+    },
+    methods: {
+      init (id) {
+        this.dataForm.id = id || 0
+        this.$http({
+          url: this.$http.adornUrl('/sys/menu/table'),
+          method: 'get',
+          params: this.$http.adornParams()
+        }).then(({data}) => {
+          this.menuList = treeDataTranslate(data, 'menuId', 'parentId')
+        }).then(() => {
+          this.visible = true
+          this.$nextTick(() => {
+            this.$refs['dataForm'].resetFields()
+            this.$refs.menuListTree.setCheckedKeys([])
+          })
+        }).then(() => {
+          if (this.dataForm.id) {
+            this.$http({
+              url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`),
+              method: 'get',
+              params: this.$http.adornParams()
+            }).then(({data}) => {
+              this.dataForm.roleName = data.roleName
+              this.dataForm.remark = data.remark
+              var idx = data.menuIdList.indexOf(this.tempKey)
+              if (idx !== -1) {
+                data.menuIdList.splice(idx, data.menuIdList.length - idx)
+              }
+              console.log(data.menuIdList)
+              this.$refs.menuListTree.setCheckedKeys(data.menuIdList)
+            })
+          }
+        })
+      },
+      // 表单提交
+      dataFormSubmit: Debounce(function () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            this.$http({
+              url: this.$http.adornUrl(`/sys/role`),
+              method: this.dataForm.id ? 'put' : 'post',
+              data: this.$http.adornData({
+                'roleId': this.dataForm.id || undefined,
+                'roleName': this.dataForm.roleName,
+                'remark': this.dataForm.remark,
+                'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys())
+              })
+            }).then(({data}) => {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        })
+      })
+    }
+  }
+</script>

mall4v/src/views/modules/sys/role.vue

+<template>
+  <div class="mod-role">
+    <avue-crud ref="crud"
+               :page="page"
+               :data="dataList"
+               :option="tableOption"
+               @search-change="searchChange"
+               @selection-change="selectionChange"
+               @on-load="getDataList">
+      <template slot="menuLeft">
+        <el-button type="primary"
+                   icon="el-icon-plus"
+                   size="small"
+                   v-if="isAuth('sys:role:save')"
+                   @click.stop="addOrUpdateHandle()">新增</el-button>
+
+        <el-button type="danger"
+                   @click="deleteHandle()"
+                   v-if="isAuth('sys:role:delete')"
+                   size="small"
+                   :disabled="dataListSelections.length <= 0">批量删除</el-button>
+      </template>
+
+      <template slot-scope="scope"
+                slot="menu">
+        <el-button type="primary"
+                   icon="el-icon-edit"
+                   size="small"
+                   v-if="isAuth('sys:role:update')"
+                   @click.stop="addOrUpdateHandle(scope.row.roleId)">编辑</el-button>
+
+        <el-button type="danger"
+                   icon="el-icon-delete"
+                   size="small"
+                   v-if="isAuth('sys:role:delete')"
+                   @click.stop="deleteHandle(scope.row.roleId)">删除</el-button>
+      </template>
+    </avue-crud>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible"
+                   ref="addOrUpdate"
+                   @refreshDataList="getDataList"></add-or-update>
+  </div>
+</template>
+
+<script>
+import { tableOption } from '@/crud/sys/role'
+import AddOrUpdate from './role-add-or-update'
+export default {
+  data () {
+    return {
+      dataList: [],
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+      tableOption: tableOption,
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  methods: {
+    // 获取数据列表
+    getDataList (page, params, done) {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/sys/role/page'),
+        method: 'get',
+        params: this.$http.adornParams(
+          Object.assign(
+            {
+              current: page == null ? this.page.currentPage : page.currentPage,
+              size: page == null ? this.page.pageSize : page.pageSize
+            },
+            params
+          )
+        )
+      }).then(({ data }) => {
+        this.dataList = data.records
+        this.page.total = data.total
+        this.dataListLoading = false
+        if (done) {
+          done()
+        }
+      })
+    },
+    // 条件查询
+    searchChange (params, done) {
+      this.getDataList(this.page, params, done)
+    },
+    // 多选变化
+    selectionChange (val) {
+      this.dataListSelections = val
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    // 删除
+    deleteHandle (id) {
+      var ids = id ? [id] : this.dataListSelections.map(item => {
+        return item.roleId
+      })
+      this.$confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl('/sys/role'),
+          method: 'delete',
+          data: this.$http.adornData(ids, false)
+        }).then(({ data }) => {
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.getDataList()
+            }
+          })
+        })
+      }).catch(() => { })
+    }
+  }
+}
+</script>

mall4v/src/views/modules/sys/user-add-or-update.vue

+<template>
+  <el-dialog
+    :title="!dataForm.id ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+      <el-form-item label="用户名" prop="userName">
+        <el-input v-model="dataForm.userName" placeholder="登录帐号"></el-input>
+      </el-form-item>
+      <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">
+        <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">
+        <el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
+      </el-form-item>
+      <el-form-item label="手机号" prop="mobile">
+        <el-input v-model="dataForm.mobile" maxlength="11" placeholder="手机号"></el-input>
+      </el-form-item>
+      <el-form-item label="角色" size="mini" prop="roleIdList">
+        <el-checkbox-group v-model="dataForm.roleIdList">
+          <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="状态" size="mini" prop="status">
+        <el-radio-group v-model="dataForm.status">
+          <el-radio :label="0">禁用</el-radio>
+          <el-radio :label="1">正常</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  import { isEmail, isMobile } from '@/utils/validate'
+  import { Debounce } from '@/utils/debounce'
+  import { encrypt } from '@/utils/crypto'
+  export default {
+    data () {
+      var validatePassword = (rule, value, callback) => {
+        if (!this.dataForm.id && !/\S/.test(value)) {
+          callback(new Error('密码不能为空'))
+        } else {
+          callback()
+        }
+      }
+      var validateComfirmPassword = (rule, value, callback) => {
+        if (!this.dataForm.id && !/\S/.test(value)) {
+          this.dataForm.password = ''
+          callback(new Error('确认密码不能为空'))
+        } else if (this.dataForm.password !== value) {
+          callback(new Error('确认密码与密码输入不一致'))
+        } else {
+          callback()
+        }
+      }
+      var validateEmail = (rule, value, callback) => {
+        if (!isEmail(value)) {
+          callback(new Error('邮箱格式错误'))
+        } else {
+          callback()
+        }
+      }
+      var validateMobile = (rule, value, callback) => {
+        if (!isMobile(value)) {
+          callback(new Error('手机号格式错误'))
+        } else {
+          callback()
+        }
+      }
+      return {
+        visible: false,
+        roleList: [],
+        dataForm: {
+          id: 0,
+          userName: '',
+          password: '',
+          comfirmPassword: '',
+          email: '',
+          mobile: '',
+          roleIdList: [],
+          status: 1
+        },
+        dataRule: {
+          userName: [
+            { required: true, message: '用户名不能为空', trigger: 'blur' },
+            { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的用户名', trigger: 'blur' }
+          ],
+          password: [
+            { validator: validatePassword, trigger: 'blur' }
+          ],
+          comfirmPassword: [
+            { validator: validateComfirmPassword, trigger: 'blur' }
+          ],
+          email: [
+            { required: true, message: '邮箱不能为空', trigger: 'blur' },
+            { validator: validateEmail, trigger: 'blur' }
+          ],
+          mobile: [
+            { required: true, message: '手机号不能为空', trigger: 'blur' },
+            { validator: validateMobile, trigger: 'blur' }
+          ]
+        }
+      }
+    },
+    methods: {
+      init (id) {
+        this.dataForm.id = id || 0
+        this.$http({
+          url: this.$http.adornUrl('/sys/role/list'),
+          method: 'get',
+          params: this.$http.adornParams()
+        }).then(({data}) => {
+          this.roleList = data
+        }).then(() => {
+          this.visible = true
+          this.$nextTick(() => {
+            this.$refs.dataForm.resetFields()
+          })
+        }).then(() => {
+          if (this.dataForm.id) {
+            this.$http({
+              url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),
+              method: 'get',
+              params: this.$http.adornParams()
+            }).then(({data}) => {
+              this.dataForm.userName = data.username
+              this.dataForm.email = data.email
+              this.dataForm.mobile = data.mobile
+              this.dataForm.roleIdList = data.roleIdList
+              this.dataForm.status = data.status
+            })
+          }
+        })
+      },
+      // 表单提交
+      dataFormSubmit: Debounce(function () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            this.$http({
+              url: this.$http.adornUrl(`/sys/user`),
+              method: this.dataForm.id ? 'put' : 'post',
+              data: this.$http.adornData({
+                'userId': this.dataForm.id || undefined,
+                'username': this.dataForm.userName,
+                'password': encrypt(this.dataForm.password),
+                'email': this.dataForm.email,
+                'mobile': this.dataForm.mobile,
+                'status': this.dataForm.status,
+                'roleIdList': this.dataForm.roleIdList
+              })
+            }).then(({data}) => {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        })
+      })
+    }
+  }
+</script>

mall4v/src/views/modules/sys/user.vue

+<template>
+  <div class="mod-user">
+    <avue-crud ref="crud"
+               :page="page"
+               :data="dataList"
+               :option="tableOption"
+               @search-change="searchChange"
+               @selection-change="selectionChange"
+               @on-load="getDataList">
+      <template slot="menuLeft">
+        <el-button type="primary"
+                   icon="el-icon-plus"
+                   size="small"
+                   v-if="isAuth('sys:user:save')"
+                   @click.stop="addOrUpdateHandle()">新增</el-button>
+
+        <el-button type="danger"
+                   @click="deleteHandle()"
+                   v-if="isAuth('sys:user:delete')"
+                   size="small"
+                   :disabled="dataListSelections.length <= 0">批量删除</el-button>
+      </template>
+      <template slot-scope="scope"
+                slot="menu">
+        <el-button type="primary"
+                   icon="el-icon-edit"
+                   size="small"
+                   v-if="isAuth('sys:user:update')"
+                   @click.stop="addOrUpdateHandle(scope.row.userId)">编辑</el-button>
+
+        <el-button type="danger"
+                   icon="el-icon-delete"
+                   size="small"
+                   v-if="isAuth('sys:user:delete')"
+                   @click.stop="deleteHandle(scope.row.userId)">删除</el-button>
+      </template>
+    </avue-crud>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible"
+                   ref="addOrUpdate"
+                   @refreshDataList="getDataList"></add-or-update>
+  </div>
+</template>
+
+<script>
+import { tableOption } from '@/crud/sys/user'
+import AddOrUpdate from './user-add-or-update'
+export default {
+  data () {
+    return {
+      dataList: [],
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+      tableOption: tableOption,
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  methods: {
+    // 获取数据列表
+    getDataList (page, params, done) {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/sys/user/page'),
+        method: 'get',
+        params: this.$http.adornParams(
+          Object.assign(
+            {
+              current: page == null ? this.page.currentPage : page.currentPage,
+              size: page == null ? this.page.pageSize : page.pageSize
+            },
+            params
+          )
+        )
+      }).then(({ data }) => {
+        this.dataList = data.records
+        this.page.total = data.total
+        this.dataListLoading = false
+        if (done) {
+          done()
+        }
+      })
+    },
+    // 条件查询
+    searchChange (params, done) {
+      this.getDataList(this.page, params, done)
+    },
+    // 多选变化
+    selectionChange (val) {
+      this.dataListSelections = val
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    // 删除
+    deleteHandle (id) {
+      var userIds = id ? [id] : this.dataListSelections.map(item => {
+        return item.userId
+      })
+      this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl('/sys/user'),
+          method: 'delete',
+          data: this.$http.adornData(userIds, false)
+        }).then(({ data }) => {
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.getDataList()
+            }
+          })
+        })
+      }).catch(() => { })
+    }
+  }
+}
+</script>

mall4v/src/views/modules/user/addr-add-or-update.vue

+<template>
+  <el-dialog :title="!dataForm.addrId ? '新增' : '修改'"
+             :close-on-click-modal="false"
+             :visible.sync="visible">
+    <el-form :model="dataForm"
+             :rules="dataRule"
+             ref="dataForm"
+             @keyup.enter.native="dataFormSubmit()"
+             label-width="100px">
+      <el-form-item label="收货人姓名"
+                    prop="receiver">
+        <el-input v-model="dataForm.receiver"></el-input>
+      </el-form-item>
+      <el-form-item label="省份">
+        <el-col :span="8">
+          <el-form-item prop="province">
+            <el-select v-model="dataForm.provinceId"
+                       placeholder="请选择"
+                       @change="selectProvince">
+              <el-option v-for="province in provinceList"
+                         :key="province.areaId"
+                         :label="province.areaName"
+                         :value="province.areaId"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="city">
+            <el-select v-model="dataForm.cityId"
+                       placeholder="请选择"
+                       @change="selectCity">
+              <el-option v-for="city in cityList"
+                         :key="city.areaId"
+                         :label="city.areaName"
+                         :value="city.areaId"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item prop="area">
+            <el-select v-model="dataForm.areaId"
+                       placeholder="请选择">
+              <el-option v-for="area in areaList"
+                         :key="area.areaId"
+                         :label="area.areaName"
+                         :value="area.areaId"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="详细地址"
+                    prop="addr">
+        <el-input v-model="dataForm.addr"></el-input>
+      </el-form-item>
+      <el-form-item label="邮编"
+                    prop="postCode">
+        <el-input v-model="dataForm.postCode"></el-input>
+      </el-form-item>
+      <el-form-item label="手机"
+                    prop="mobile">
+        <el-input v-model="dataForm.mobile"></el-input>
+      </el-form-item>
+      <el-form-item label="状态"
+                    prop="status">
+        <el-radio-group v-model="dataForm.status"
+                        size="medium">
+          <el-radio :label="1">正常</el-radio>
+          <el-radio :label="0">禁用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="默认地址"
+                    prop="commonAddr">
+        <el-radio-group v-model="dataForm.commonAddr"
+                        size="medium">
+          <el-radio :label="0">否</el-radio>
+          <el-radio :label="1">是</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <span slot="footer"
+          class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary"
+                 @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { Debounce } from '@/utils/debounce'
+export default {
+  data () {
+    return {
+      visible: false,
+      roleList: [],
+      provinceList: [],
+      cityList: [],
+      areaList: [],
+      dataForm: {
+        addrId: null,
+        userId: null,
+        receiver: null,
+        provinceId: null,
+        province: null,
+        city: null,
+        cityId: null,
+        area: null,
+        areaId: null,
+        postCode: null,
+        addr: null,
+        mobile: null,
+        status: 1,
+        commonAddr: 0
+      },
+      dataRule: {
+      }
+    }
+  },
+  methods: {
+    init (addrId) {
+      this.dataForm.addrId = addrId || 0
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        this.cityList = []
+        this.areaList = []
+        this.dataForm.provinceId = null
+        this.dataForm.cityId = null
+        this.dataForm.areaId = null
+        if (this.dataForm.addrId) {
+          this.$http({
+            url: this.$http.adornUrl(`/user/addr/info/${this.dataForm.addrId}`),
+            method: 'get',
+            params: this.$http.adornParams()
+          }).then(({ data }) => {
+            this.dataForm = data
+            this.dataForm.addr = data.addr
+            this.dataForm.addrName = data.addrName
+            this.dataForm.areaId = data.areaId
+            this.dataForm.cityId = data.cityId
+            this.dataForm.provinceId = data.provinceId
+            this.listAreaByParentId(data.provinceId).then(({ data }) => {
+              this.cityList = data
+            })
+            this.listAreaByParentId(data.cityId).then(({ data }) => {
+              this.areaList = data
+            })
+          })
+        }
+      })
+      this.listAreaByParentId().then(({ data }) => {
+        this.provinceList = data
+      })
+    },
+    listAreaByParentId (pid) {
+      if (!pid) pid = 0
+      return this.$http({
+        url: this.$http.adornUrl(`/admin/area/listByPid`),
+        method: 'get',
+        params: this.$http.adornParams({ pid })
+      })
+    },
+    // 选择省
+    selectProvince (val) {
+      this.dataForm.cityId = null
+      this.dataForm.city = ''
+      // 获取城市的select
+      this.listAreaByParentId(val).then(({ data }) => {
+        this.cityList = data
+      })
+    },
+    // 选择市
+    selectCity (val) {
+      this.dataForm.areaId = null
+      this.dataForm.area = ''
+      // 获取区的select
+      this.listAreaByParentId(val).then(({ data }) => {
+        this.areaList = data
+      })
+    },
+
+    // 表单提交
+    dataFormSubmit: Debounce(function () {
+      for (let i = 0; i < this.provinceList.length; i++) {
+        if (this.provinceList[i].areaId === this.dataForm.provinceId) {
+          // 将省名字保存起来
+          this.dataForm.province = this.provinceList[i].areaName
+        }
+      }
+      for (let i = 0; i < this.cityList.length; i++) {
+        if (this.cityList[i].areaId === this.dataForm.cityId) {
+          // 将市名字保存起来
+          this.dataForm.city = this.cityList[i].areaName
+        }
+      }
+      for (let i = 0; i < this.areaList.length; i++) {
+        if (this.areaList[i].areaId === this.dataForm.areaId) {
+          // 将市名字保存起来
+          this.dataForm.area = this.areaList[i].areaName
+        }
+      }
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl('/user/addr'),
+            method: this.dataForm.addrId ? 'put' : 'post',
+            data: this.$http.adornData(this.dataForm)
+          }).then(({ data }) => {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$refs['dataForm'].resetFields()
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    })
+  }
+}
+</script>

mall4v/src/views/modules/user/addr.vue

+<template>
+  <div class="mod-user-userAddr">
+    <avue-crud ref="crud"
+               :page="page"
+               :data="dataList"
+               :table-loading="dataListLoading"
+               :option="tableOption"
+               @search-change="searchChange"
+               @on-load="getDataList"
+               @refresh-change="refreshChange"
+               @row-del="rowDel">
+      <template slot="menuLeft">
+        <el-button type="primary"
+                   icon="el-icon-plus"
+                   size="small"
+                   v-if="isAuth('user:addr:save')"
+                   @click="addOrUpdateHandle()">新增</el-button>
+      </template>
+      <template slot-scope="scope"
+                slot="menu">
+        <el-button type="primary"
+                   icon="el-icon-edit"
+                   size="small"
+                   v-if="isAuth('user:addr:update')"
+                   @click="addOrUpdateHandle(scope.row.addrId)">修改</el-button>
+        <el-button type="danger"
+                   icon="el-icon-delete"
+                   size="small"
+                   v-if="isAuth('user:addr:delete')"
+                   @click="rowDel(scope.row,scope.$index)">删除</el-button>
+      </template>
+    </avue-crud>
+    <add-or-update v-if="addOrUpdateVisible"
+                   ref="addOrUpdate"
+                   @refreshDataList="refreshChange"></add-or-update>
+  </div>
+</template>
+
+<script>
+import { tableOption } from '@/crud/user/addr'
+import AddOrUpdate from './addr-add-or-update'
+export default {
+  data () {
+    return {
+      dataList: [],
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      },
+      dataListLoading: false,
+      tableOption: tableOption,
+      permission: {
+        delBtn: this.isAuth('user:userAddr:delete')
+      },
+      addOrUpdateVisible: false
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  components: {
+    AddOrUpdate
+  },
+  methods: {
+    getDataList (page, params, done) {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/user/addr/page'),
+        method: 'get',
+        params: this.$http.adornParams(Object.assign({
+          current: page == null ? this.page.currentPage : page.currentPage,
+          size: page == null ? this.page.pageSize : page.pageSize
+        }, params))
+      }).then(({ data }) => {
+        this.dataList = data.records
+        this.page.total = data.total
+        this.dataListLoading = false
+        if (done) {
+          done()
+        }
+      })
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    rowDel (row, index) {
+      this.$confirm('确定进行删除操作?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl('/user/addr/' + row.addrId),
+          method: 'delete',
+          data: this.$http.adornData({})
+        }).then(({ data }) => {
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.getDataList(this.page)
+            }
+          })
+        })
+      }).catch(() => { })
+    },
+    /**
+     * 刷新回调
+     */
+    refreshChange () {
+      this.getDataList(this.page)
+    },
+    searchChange (params, done) {
+      this.getDataList(this.page, params, done)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>