更新

src/views/components/icons/element-icons.js

@@ -0,0 +1,3 @@
+const elementIcons = ['platform-eleme', 'eleme', 'delete-solid', 'delete', 's-tools', 'setting', 'user-solid', 'user', 'phone', 'phone-outline', 'more', 'more-outline', 'star-on', 'star-off', 's-goods', 'goods', 'warning', 'warning-outline', 'question', 'info', 'remove', 'circle-plus', 'success', 'error', 'zoom-in', 'zoom-out', 'remove-outline', 'circle-plus-outline', 'circle-check', 'circle-close', 's-help', 'help', 'minus', 'plus', 'check', 'close', 'picture', 'picture-outline', 'picture-outline-round', 'upload', 'upload2', 'download', 'camera-solid', 'camera', 'video-camera-solid', 'video-camera', 'message-solid', 'bell', 's-cooperation', 's-order', 's-platform', 's-fold', 's-unfold', 's-operation', 's-promotion', 's-home', 's-release', 's-ticket', 's-management', 's-open', 's-shop', 's-marketing', 's-flag', 's-comment', 's-finance', 's-claim', 's-custom', 's-opportunity', 's-data', 's-check', 's-grid', 'menu', 'share', 'd-caret', 'caret-left', 'caret-right', 'caret-bottom', 'caret-top', 'bottom-left', 'bottom-right', 'back', 'right', 'bottom', 'top', 'top-left', 'top-right', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'd-arrow-left', 'd-arrow-right', 'video-pause', 'video-play', 'refresh', 'refresh-right', 'refresh-left', 'finished', 'sort', 'sort-up', 'sort-down', 'rank', 'loading', 'view', 'c-scale-to-original', 'date', 'edit', 'edit-outline', 'folder', 'folder-opened', 'folder-add', 'folder-remove', 'folder-delete', 'folder-checked', 'tickets', 'document-remove', 'document-delete', 'document-copy', 'document-checked', 'document', 'document-add', 'printer', 'paperclip', 'takeaway-box', 'search', 'monitor', 'attract', 'mobile', 'scissors', 'umbrella', 'headset', 'brush', 'mouse', 'coordinate', 'magic-stick', 'reading', 'data-line', 'data-board', 'pie-chart', 'data-analysis', 'collection-tag', 'film', 'suitcase', 'suitcase-1', 'receiving', 'collection', 'files', 'notebook-1', 'notebook-2', 'toilet-paper', 'office-building', 'school', 'table-lamp', 'house', 'no-smoking', 'smoking', 'shopping-cart-full', 'shopping-cart-1', 'shopping-cart-2', 'shopping-bag-1', 'shopping-bag-2', 'sold-out', 'sell', 'present', 'box', 'bank-card', 'money', 'coin', 'wallet', 'discount', 'price-tag', 'news', 'guide', 'male', 'female', 'thumb', 'cpu', 'link', 'connection', 'open', 'turn-off', 'set-up', 'chat-round', 'chat-line-round', 'chat-square', 'chat-dot-round', 'chat-dot-square', 'chat-line-square', 'message', 'postcard', 'position', 'turn-off-microphone', 'microphone', 'close-notification', 'bangzhu', 'time', 'odometer', 'crop', 'aim', 'switch-button', 'full-screen', 'copy-document', 'mic', 'stopwatch', 'medal-1', 'medal', 'trophy', 'trophy-1', 'first-aid-kit', 'discover', 'place', 'location', 'location-outline', 'location-information', 'add-location', 'delete-location', 'map-location', 'alarm-clock', 'timer', 'watch-1', 'watch', 'lock', 'unlock', 'key', 'service', 'mobile-phone', 'bicycle', 'truck', 'ship', 'basketball', 'football', 'soccer', 'baseball', 'wind-power', 'light-rain', 'lightning', 'heavy-rain', 'sunrise', 'sunrise-1', 'sunset', 'sunny', 'cloudy', 'partly-cloudy', 'cloudy-and-sunny', 'moon', 'moon-night', 'dish', 'dish-1', 'food', 'chicken', 'fork-spoon', 'knife-fork', 'burger', 'tableware', 'sugar', 'dessert', 'ice-cream', 'hot-water', 'water-cup', 'coffee-cup', 'cold-drink', 'goblet', 'goblet-full', 'goblet-square', 'goblet-square-full', 'refrigerator', 'grape', 'watermelon', 'cherry', 'apple', 'pear', 'orange', 'coffee', 'ice-tea', 'ice-drink', 'milk-tea', 'potato-strips', 'lollipop', 'ice-cream-square', 'ice-cream-round']
+
+export default elementIcons

src/views/components/icons/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="icons-container">
+    <aside>
+      <a href="#" target="_blank">Add and use
+      </a>
+    </aside>
+    <el-tabs type="border-card">
+      <el-tab-pane label="Icons">
+        <div v-for="item of svgIcons" :key="item">
+          <el-tooltip placement="top">
+            <div slot="content">
+              {{ generateIconCode(item) }}
+            </div>
+            <div class="icon-item">
+              <svg-icon :icon-class="item" class-name="disabled" />
+              <span>{{ item }}</span>
+            </div>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Element-UI Icons">
+        <div v-for="item of elementIcons" :key="item">
+          <el-tooltip placement="top">
+            <div slot="content">
+              {{ generateElementIconCode(item) }}
+            </div>
+            <div class="icon-item">
+              <i :class="'el-icon-' + item" />
+              <span>{{ item }}</span>
+            </div>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import svgIcons from './svg-icons'
+import elementIcons from './element-icons'
+
+export default {
+  name: 'Icons',
+  data() {
+    return {
+      svgIcons,
+      elementIcons
+    }
+  },
+  methods: {
+    generateIconCode(symbol) {
+      return `<svg-icon icon-class="${symbol}" />`
+    },
+    generateElementIconCode(symbol) {
+      return `<i class="el-icon-${symbol}" />`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icons-container {
+  margin: 10px 20px 0;
+  overflow: hidden;
+
+  .icon-item {
+    margin: 20px;
+    height: 85px;
+    text-align: center;
+    width: 100px;
+    float: left;
+    font-size: 30px;
+    color: #24292e;
+    cursor: pointer;
+  }
+
+  span {
+    display: block;
+    font-size: 16px;
+    margin-top: 10px;
+  }
+
+  .disabled {
+    pointer-events: none;
+  }
+}
+</style>

src/views/components/icons/svg-icons.js

@@ -0,0 +1,10 @@
+const req = require.context('../../../assets/icons/svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys()
+
+const re = /\.\/(.*)\.svg/
+
+const svgIcons = requireAll(req).map(i => {
+  return i.match(re)[1]
+})
+
+export default svgIcons

src/views/dashboard/BarChart.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: [{
+          name: 'pageA',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [79, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageB',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [80, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageC',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [30, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/dashboard/LineChart.vue

@@ -0,0 +1,135 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [{
+          name: 'expected', itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: expectedData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        },
+        {
+          name: 'actual',
+          smooth: true,
+          type: 'line',
+          itemStyle: {
+            normal: {
+              color: '#3888fa',
+              lineStyle: {
+                color: '#3888fa',
+                width: 2
+              },
+              areaStyle: {
+                color: '#f3f8ff'
+              }
+            }
+          },
+          data: actualData,
+          animationDuration: 2800,
+          animationEasing: 'quadraticOut'
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/dashboard/PanelGroup.vue

@@ -0,0 +1,180 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            访客
+          </div>
+          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('messages')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon icon-class="message" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            消息
+          </div>
+          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('purchases')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon icon-class="money" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            金额
+          </div>
+          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            订单
+          </div>
+          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  components: {
+    CountTo
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px 26px 26px 0;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>

src/views/dashboard/PieChart.vue

@@ -0,0 +1,79 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+        },
+        series: [
+          {
+            name: 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: [
+              { value: 320, name: 'Industries' },
+              { value: 240, name: 'Technology' },
+              { value: 149, name: 'Forex' },
+              { value: 100, name: 'Gold' },
+              { value: 59, name: 'Forecasts' }
+            ],
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/dashboard/RaddarChart.vue

@@ -0,0 +1,116 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 3000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            { name: 'Sales', max: 10000 },
+            { name: 'Administration', max: 20000 },
+            { name: 'Information Techology', max: 20000 },
+            { name: 'Customer Support', max: 20000 },
+            { name: 'Development', max: 20000 },
+            { name: 'Marketing', max: 20000 }
+          ]
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/dashboard/mixins/resize.js

@@ -0,0 +1,56 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}

src/views/error/401.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="errPage-container">
+    <el-button icon="arrow-left" class="pan-back-btn" @click="back">
+      返回
+    </el-button>
+    <el-row>
+      <el-col :span="12">
+        <h1 class="text-jumbo text-ginormous">
+          401错误!
+        </h1>
+        <h2>您没有访问权限！</h2>
+        <h6>对不起，您没有访问权限，请不要进行非法操作！您可以返回主页面</h6>
+        <ul class="list-unstyled">
+          <li class="link-type">
+            <router-link to="/">
+              回首页
+            </router-link>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="12">
+        <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import errGif from '@/assets/401_images/401.gif'
+
+export default {
+  name: 'Page401',
+  data() {
+    return {
+      errGif: errGif + '?' + +new Date()
+    }
+  },
+  methods: {
+    back() {
+      if (this.$route.query.noGoBack) {
+        this.$router.push({ path: '/' })
+      } else {
+        this.$router.go(-1)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .errPage-container {
+    width: 800px;
+    max-width: 100%;
+    margin: 100px auto;
+    .pan-back-btn {
+      background: #008489;
+      color: #fff;
+      border: none!important;
+    }
+    .pan-gif {
+      margin: 0 auto;
+      display: block;
+    }
+    .pan-img {
+      display: block;
+      margin: 0 auto;
+      width: 100%;
+    }
+    .text-jumbo {
+      font-size: 60px;
+      font-weight: 700;
+      color: #484848;
+    }
+    .list-unstyled {
+      font-size: 14px;
+      li {
+        padding-bottom: 5px;
+      }
+      a {
+        color: #008489;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+</style>

src/views/error/404.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">
+          404错误!
+        </div>
+        <div class="bullshit__headline">
+          {{ message }}
+        </div>
+        <div class="bullshit__info">
+          对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
+        </div>
+        <router-link to="/" class="bullshit__return-home">
+          返回首页
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Page404',
+  computed: {
+    message() {
+      return '找不到网页！'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="dashboard-editor-container">
+    <!-- 首页http://localhost:81/index 数据展示  -->
+    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <line-chart :chart-data="lineChartData" />
+    </el-row>
+
+    <el-row :gutter="32">
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <raddar-chart />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <pie-chart />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <bar-chart />
+        </div>
+      </el-col>
+    </el-row>
+
+    
+  </div>
+</template>
+
+<script>
+import PanelGroup from './dashboard/PanelGroup'
+import LineChart from './dashboard/LineChart'
+import RaddarChart from './dashboard/RaddarChart'
+import PieChart from './dashboard/PieChart'
+import BarChart from './dashboard/BarChart'
+
+const lineChartData = {
+  newVisitis: {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+  messages: {
+    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    actualData: [180, 160, 151, 106, 145, 150, 130]
+  },
+  purchases: {
+    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    actualData: [120, 90, 100, 138, 142, 130, 130]
+  },
+  shoppings: {
+    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    actualData: [120, 82, 91, 154, 162, 140, 130]
+  }
+}
+
+export default {
+  name: 'Index',
+  components: {
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis
+    }
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>

src/views/login.vue

@@ -0,0 +1,462 @@
+<template xmlns="">
+  <div class="container">
+    <div class="logo"></div>
+    <!-- 登录区域 -->
+    <div class="content">
+      <!-- 配图 -->
+      <div class="pic">
+        <div
+          class="welcome"
+          style="
+            position: absolute;
+            top: 15%;
+            left: 20%;
+            user-select: none;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+          "
+        >
+          <strong
+            style="
+              letter-spacing: 1px;
+              font-family: Arial, Helvetica, sans-serif;
+              font-weight: 500;
+              font-size: 88px;
+            "
+          >
+            <span style="color: #26b9de">Wel</span>
+            <span style="color: #fff">come</span>
+          </strong>
+          <p
+            style="
+              margin: 0;
+              font-size: 26px;
+              letter-spacing: 1px;
+              color: #26b9de;
+              opacity: 75%;
+            "
+          >
+            <span
+              style="
+                display: inline-block;
+                height: 20px;
+                width: 20px;
+                margin-left: 8px;
+                margin-right: 12px;
+                border-radius: 100%;
+                background: #26b9de;
+              "
+            ></span>
+            向世界先进水平挑战，为人类社会文明做贡献
+          </p>
+        </div>
+      </div>
+      <!-- 表单 -->
+      <div class="field">
+        <!-- [移动端]标题 -->
+        <h2 class="mobile-title">
+          <img
+            width="56"
+            height="56"
+            src="../assets/logo/cnbm.png"
+            alt="cnbm_logo"
+            style=""
+            class="cnbm_logo"
+          />
+          <h3 class="title" style="margin: 16px 0;">集团工业互联网平台</h3>
+        </h2>
+        <h2 class="pc-title" style="">
+          <img
+            width="56"
+            height="56"
+            src="../assets/logo/cnbm.png"
+            alt="cnbm_logo"
+            style=""
+            class="cnbm_logo"
+          />
+          <span style="font-weight: bold; letter-spacing: 1px; font-size: 32px;">集团工业互联网平台</span>
+        </h2>
+
+        <!-- 表单 -->
+        <div class="form-cont">
+          <div>
+            <el-form
+              ref="loginForm"
+              :model="loginForm"
+              :rules="LoginRules"
+              class="login-form"
+            >
+              <!-- <el-form-item prop="tenantName" v-if="tenantEnable">
+                <el-input
+                  v-model="loginForm.tenantName"
+                  type="text"
+                  auto-complete="off"
+                  placeholder="租户"
+                >
+                  <svg-icon
+                    slot="prefix"
+                    icon-class="tree"
+                    class="el-input__icon input-icon"
+                  />
+                </el-input>
+              </el-form-item> -->
+              <!-- 账号密码登录 -->
+              <div>
+                <el-form-item prop="username">
+                  <el-input
+                    v-model="loginForm.username"
+                    type="text"
+                    auto-complete="off"
+                    placeholder="账号"
+                  >
+                    <!-- <svg-icon
+                      slot="prefix"
+                      icon-class="user"
+                      class="el-input__icon input-icon"
+                    /> -->
+                  </el-input>
+                </el-form-item>
+                <el-form-item prop="password">
+                  <el-input
+                    v-model="loginForm.password"
+                    type="password"
+                    auto-complete="off"
+                    placeholder="密码"
+                    @keyup.enter.native="getCode"
+                  >
+                    <!-- <svg-icon
+                      slot="prefix"
+                      icon-class="password"
+                      class="el-input__icon input-icon"
+                    /> -->
+                  </el-input>
+                </el-form-item>
+                <el-checkbox
+                  v-model="loginForm.rememberMe"
+                  style="margin: 0 0 25px 0"
+                  >记住密码</el-checkbox
+                >
+              </div>
+
+              <!-- 下方的登录按钮 -->
+              <el-form-item
+                id="button-form-item"
+                style="width: 100%; margin-top: 32px"
+              >
+                <el-button
+                  :loading="loading"
+                  size="medium"
+                  type="primary"
+                  style="
+                    width: 100%;
+                    height: calc(52 * 0.12vh);
+                    font-size: calc(14 * 0.12vh);
+                  "
+                  @click.native.prevent="getCode"
+                >
+                  <span v-if="!loading">登 录</span>
+                  <span v-else>登 录 中...</span>
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+        <!-- footer -->
+        <div class="footer">
+          Copyright © 2023 中建材智能自动化研究院有限公司 All Rights Reserved.
+        </div>
+      </div>
+    </div>
+
+    <!-- 图形验证码 -->
+    <Verify
+      ref="verify"
+      :captcha-type="'blockPuzzle'"
+      :img-size="{ width: '400px', height: '200px' }"
+      @success="handleLogin"
+    />
+  </div>
+</template>
+
+<script>
+import { sendSmsCode, socialAuthRedirect } from "@/api/login";
+import { getTenantIdByName } from "@/api/system/tenant";
+import { SystemUserSocialTypeEnum } from "@/utils/constants";
+import { getCaptchaEnable, getTenantEnable } from "@/utils/ruoyi";
+import {
+  getPassword,
+  getRememberMe,
+  getTenantName,
+  getUsername,
+  removePassword,
+  removeRememberMe,
+  removeTenantName,
+  removeUsername,
+  setPassword,
+  setRememberMe,
+  setTenantId,
+  setTenantName,
+  setUsername,
+} from "@/utils/auth";
+
+import Verify from "@/components/Verifition/Verify";
+import { resetUserPwd } from "@/api/system/user";
+
+export default {
+  name: "Login",
+  components: {
+    Verify,
+  },
+  data() {
+    return {
+      codeUrl: "",
+      captchaEnable: true,
+      tenantEnable: true,
+      mobileCodeTimer: 0,
+      loginForm: {
+        loginType: "uname",
+        username: "admin",
+        password: "admin123",
+        captchaVerification: "",
+        mobile: "",
+        mobileCode: "",
+        rememberMe: false,
+        tenantName: "芋道源码",
+      },
+      scene: 21,
+
+      LoginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "用户名不能为空" },
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "密码不能为空" },
+        ],
+        mobile: [
+          { required: true, trigger: "blur", message: "手机号不能为空" },
+          {
+            validator: function (rule, value, callback) {
+              if (
+                /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(
+                  value
+                ) === false
+              ) {
+                callback(new Error("手机号格式错误"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        tenantName: [
+          { required: true, trigger: "blur", message: "租户不能为空" },
+          {
+            validator: (rule, value, callback) => {
+              // debugger
+              getTenantIdByName(value).then((res) => {
+                const tenantId = res.data;
+                if (tenantId && tenantId >= 0) {
+                  // 设置租户
+                  setTenantId(tenantId);
+                  callback();
+                } else {
+                  callback("租户不存在");
+                }
+              });
+            },
+            trigger: "blur",
+          },
+        ],
+      },
+      loading: false,
+      redirect: undefined,
+      // 枚举
+      SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
+    };
+  },
+  created() {
+    // 租户开关
+    this.tenantEnable = getTenantEnable();
+    if (this.tenantEnable) {
+      getTenantIdByName(this.loginForm.tenantName).then((res) => {
+        // 设置租户
+        const tenantId = res.data;
+        if (tenantId && tenantId >= 0) {
+          setTenantId(tenantId);
+        }
+      });
+    }
+    // 验证码开关
+    this.captchaEnable = getCaptchaEnable();
+    // 重定向地址
+    this.redirect = this.$route.query.redirect
+      ? decodeURIComponent(this.$route.query.redirect)
+      : undefined;
+    this.getCookie();
+  },
+  methods: {
+    getCode() {
+      // 情况一，未开启：则直接登录
+      if (!this.captchaEnable) {
+        this.handleLogin({});
+        return;
+      }
+
+      // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
+      // 弹出验证码
+      this.$refs.verify.show();
+    },
+    getCookie() {
+      const username = getUsername();
+      const password = getPassword();
+      const rememberMe = getRememberMe();
+      const tenantName = getTenantName();
+      this.loginForm = {
+        ...this.loginForm,
+        username: username ? username : this.loginForm.username,
+        password: password ? password : this.loginForm.password,
+        rememberMe: rememberMe ? getRememberMe() : false,
+        tenantName: tenantName ? tenantName : this.loginForm.tenantName,
+      };
+    },
+    handleLogin(captchaParams) {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          // 设置 Cookie
+          if (this.loginForm.rememberMe) {
+            setUsername(this.loginForm.username);
+            setPassword(this.loginForm.password);
+            setRememberMe(this.loginForm.rememberMe);
+            setTenantName(this.loginForm.tenantName);
+          } else {
+            removeUsername();
+            removePassword();
+            removeRememberMe();
+            removeTenantName();
+          }
+          this.loginForm.captchaVerification =
+            captchaParams.captchaVerification;
+          // 发起登陆
+          // console.log("发起登录", this.loginForm);
+          this.$store
+            .dispatch(
+              this.loginForm.loginType === "sms" ? "SmsLogin" : "Login",
+              this.loginForm
+            )
+            .then(() => {
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        }
+      });
+    },
+    async doSocialLogin(socialTypeEnum) {
+      // 设置登录中
+      this.loading = true;
+      let tenant = false;
+      if (this.tenantEnable) {
+        await this.$prompt("请输入租户名称", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+        })
+          .then(async ({ value }) => {
+            await getTenantIdByName(value).then((res) => {
+              const tenantId = res.data;
+              tenant = true;
+              if (tenantId && tenantId >= 0) {
+                setTenantId(tenantId);
+              }
+            });
+          })
+          .catch(() => {
+            // 取消登录按钮 loading状态
+            this.loading = false;
+
+            return false;
+          });
+      } else {
+        tenant = true;
+      }
+      if (tenant) {
+        // 计算 redirectUri
+        const redirectUri =
+          location.origin +
+          "/social-login?" +
+          encodeURIComponent(
+            "type=" +
+              socialTypeEnum.type +
+              "&redirect=" +
+              (this.redirect || "/")
+          ); // 重定向不能丢
+        // const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
+        // const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
+        // 进行跳转
+        socialAuthRedirect(
+          socialTypeEnum.type,
+          encodeURIComponent(redirectUri)
+        ).then((res) => {
+          // console.log(res.url);
+          window.location.href = res.data;
+        });
+      }
+    },
+    /** ========== 以下为升级短信登录 ========== */
+    getSmsCode() {
+      if (this.mobileCodeTimer > 0) return;
+      this.$refs.loginForm.validate((valid) => {
+        if (!valid) return;
+        sendSmsCode(
+          this.loginForm.mobile,
+          this.scene,
+          this.loginForm.uuid,
+          this.loginForm.code
+        ).then((res) => {
+          this.$modal.msgSuccess("获取验证码成功");
+          this.mobileCodeTimer = 60;
+          let msgTimer = setInterval(() => {
+            this.mobileCodeTimer = this.mobileCodeTimer - 1;
+            if (this.mobileCodeTimer <= 0) {
+              clearInterval(msgTimer);
+            }
+          }, 1000);
+        });
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "~@/assets/styles/login.scss";
+
+.oauth-login {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.oauth-login-item {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+.oauth-login-item img {
+  height: 25px;
+  width: 25px;
+}
+.oauth-login-item span:hover {
+  text-decoration: underline red;
+  color: red;
+}
+.sms-login-mobile-code-prefix {
+  :deep(.el-input__prefix) {
+    top: 22%;
+  }
+}
+.form-cont {
+  padding-top: 40px;
+}
+</style>

src/views/playground.vue

@@ -0,0 +1,93 @@
+<!-- 
+    filename: playground.vue
+    author: liubin
+    date: 2024-04-02 09:42:43
+    description: TODO delete this playground
+-->
+
+<template>
+  <div class="playground" style="display: flex; flex-direction: column">
+    <div style="flex: 1; width: 400px; padding: 12px">
+      <InPageLeftNav />
+    </div>
+
+    <!-- <div style="background: #fff; height: 500px; width: 800px">
+      <ButtonNav
+        :menus="['状态时序图', '产量时序图']"
+        :button-mode="false"
+        @change="currentMenu = $event"
+      >
+        <template v-slot:tab1>
+          <h1 style="margin: 20px; background: #f001;">状态时序图</h1>
+        </template>
+        <template v-slot:tab2>
+          <h1 style="margin: 20px">产量时序图</h1>
+        </template>
+      </ButtonNav>
+    </div> -->
+
+    <!-- <div
+      style="
+        background: #fff;
+        padding: 12px;
+        border-radius: 8px;
+        height: 440px;
+        display: flex;
+        flex-direction: column;
+      "
+    >
+      <TimeseriesGraph :graphList="graphList" />
+    </div> -->
+  </div>
+</template>
+
+<script>
+import ButtonNav from "@/components/ButtonNav";
+import TimeseriesGraph from "@/components/TimeseriesGraph";
+import InPageLeftNav from "@/components/InPageLeftNav";
+
+export default {
+  name: "Playground",
+  components: { ButtonNav, TimeseriesGraph, InPageLeftNav },
+  props: {},
+  data() {
+    return {
+      currentMenu: null,
+      graphList: [
+        [
+          {
+            equipmentName: "一大线四区2小线清洗机",
+            duration: 30,
+            relativeDuration: 0.6,
+            status: 0,
+            startPos: 0,
+            startTime: 1712025225800,
+          },
+          {
+            equipmentName: "一大线四区2小线清洗机",
+            duration: 20,
+            relativeDuration: 0.4,
+            status: 2,
+            startPos: 30,
+            startTime: 1712027925800,
+          },
+        ],
+      ],
+    };
+  },
+  watch: {
+    currentMenu(val) {
+      console.log(val);
+    },
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.playground {
+  width: 100vw;
+  height: 100vh;
+}
+</style>

src/views/redirect.vue

@@ -0,0 +1,12 @@
+<script>
+export default {
+  created() {
+    const { params, query } = this.$route
+    const { path } = params
+    this.$router.replace({ path: '/' + path, query })
+  },
+  render: function(h) {
+    return h() // avoid warning message
+  }
+}
+</script>

src/views/socialLogin.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="container">
+    <div class="logo"></div>
+    <!-- 登录区域 -->
+    <div class="content">
+      <!-- 配图 -->
+      <div class="pic"></div>
+      <!-- 表单 -->
+      <div class="field">
+        <!-- [移动端]标题 -->
+        <h2 class="mobile-title">
+          <h3 class="title">芋道后台管理系统</h3>
+        </h2>
+
+        <!-- 表单 -->
+        <div class="form-cont">
+          <el-tabs class="form" v-model="loginForm.loginType " style=" float:none;">
+            <el-tab-pane label="绑定账号" name="uname">
+            </el-tab-pane>
+          </el-tabs>
+          <div>
+            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+              <!-- 账号密码登录 -->
+              <el-form-item prop="username">
+                <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+                  <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
+                </el-input>
+              </el-form-item>
+              <el-form-item prop="password">
+                <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
+                          @keyup.enter.native="handleLogin">
+                  <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
+                </el-input>
+              </el-form-item>
+              <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
+              <!-- 下方的登录按钮 -->
+              <el-form-item style="width:100%;">
+                <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
+                           @click.native.prevent="getCode">
+                  <span v-if="!loading">登 录</span>
+                  <span v-else>登 录 中...</span>
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 图形验证码 -->
+    <Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{width:'400px',height:'200px'}"
+            @success="handleLogin" />
+
+    <!-- footer -->
+    <div class="footer">
+      Copyright © 2020-2022 iocoder.cn All Rights Reserved.
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  getPassword, getRememberMe,
+  getUsername,
+  removePassword,
+  removeUsername,
+  setPassword,
+  setRememberMe,
+  setUsername
+} from "@/utils/auth";
+
+import Verify from '@/components/Verifition/Verify';
+import {getCaptchaEnable} from "@/utils/ruoyi";
+
+export default {
+  name: "ThirdLogin",
+  components: {
+    Verify
+  },
+  data() {
+    return {
+      codeUrl: "",
+      captchaEnable: true,
+      loginForm: {
+        loginType: "uname",
+        username: "admin",
+        password: "admin123",
+        rememberMe: false,
+        captchaVerification: "",
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "用户名不能为空" }
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "密码不能为空" }
+        ],
+      },
+      loading: false,
+      redirect: undefined,
+      // 社交登录相关
+      type: undefined,
+      code: undefined,
+      state: undefined,
+    };
+  },
+  created() {
+    this.getCookie();
+    // 验证码开关
+    this.captchaEnable = getCaptchaEnable();
+    // 重定向地址
+    this.redirect = this.getUrlValue('redirect');
+    // 社交登录相关
+    this.type = this.getUrlValue('type');
+    this.code = this.$route.query.code;
+    this.state = this.$route.query.state;
+
+    // 尝试登录一下
+    this.loading = true;
+    this.$store.dispatch("SocialLogin", {
+      code: this.code,
+      state: this.state,
+      type: this.type
+    }).then(() => {
+      this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+    }).catch(() => {
+      this.loading = false;
+    });
+  },
+  methods: {
+    getCode() {
+      // 情况一，未开启：则直接登录
+      if (!this.captchaEnable) {
+        this.handleLogin({})
+        return;
+      }
+
+      // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
+      // 弹出验证码
+      this.$refs.verify.show()
+    },
+    getCookie() {
+      const username = getUsername();
+      const password = getPassword();
+      const rememberMe = getRememberMe();
+      this.loginForm = {
+        username: username ? username : this.loginForm.username,
+        password: password ? password : this.loginForm.password,
+        rememberMe: rememberMe ? getRememberMe() : false,
+        loginType: this.loginForm.loginType,
+      };
+    },
+    handleLogin(captchaParams) {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true;
+          if (this.loginForm.rememberMe) {
+            setUsername(this.loginForm.username)
+            setPassword(this.loginForm.password)
+            setRememberMe(this.loginForm.rememberMe)
+          } else {
+            removeUsername()
+            removePassword()
+          }
+          this.$store.dispatch("Login", {
+            socialCode: this.code,
+            socialState: this.state,
+            socialType: this.type,
+            // 账号密码登录
+            username: this.loginForm.username,
+            password: this.loginForm.password,
+            captchaVerification: captchaParams.captchaVerification
+          }).then(() => {
+            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+          }).catch(() => {
+            this.loading = false;
+            this.getCode()
+          });
+        }
+      });
+    },
+    getUrlValue(key) {
+      const url = new URL(decodeURIComponent(location.href));
+      return url.searchParams.get(key);
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+@import "~@/assets/styles/login.scss";
+</style>

src/views/sso.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="container">
+    <div class="logo"></div>
+    <!-- 登录区域 -->
+    <div class="content">
+      <!-- 配图 -->
+      <div class="pic"></div>
+      <!-- 表单 -->
+      <div class="field">
+        <!-- [移动端]标题 -->
+        <h2 class="mobile-title">
+          <h3 class="title">芋道后台管理系统</h3>
+        </h2>
+
+        <!-- 表单 -->
+        <div class="form-cont">
+          <el-tabs class="form" style=" float:none;" value="uname">
+            <el-tab-pane :label="'三方授权（' + client.name + ')'" name="uname">
+            </el-tab-pane>
+          </el-tabs>
+          <div>
+            <el-form ref="loginForm" :model="loginForm" class="login-form">
+              <!-- 授权范围的选择 -->
+              此第三方应用请求获得以下权限：
+              <el-form-item prop="scopes">
+                <el-checkbox-group v-model="loginForm.scopes">
+                  <el-checkbox v-for="scope in params.scopes" :label="scope" :key="scope"
+                               style="display: block; margin-bottom: -10px;">{{formatScope(scope)}}</el-checkbox>
+                </el-checkbox-group>
+              </el-form-item>
+              <!-- 下方的登录按钮 -->
+              <el-form-item style="width:100%;">
+                <el-button :loading="loading" size="medium" type="primary" style="width:60%;"
+                           @click.native.prevent="handleAuthorize(true)">
+                  <span v-if="!loading">同意授权</span>
+                  <span v-else>授 权 中...</span>
+                </el-button>
+                <el-button size="medium" style="width:36%"
+                           @click.native.prevent="handleAuthorize(false)">拒绝</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- footer -->
+    <div class="footer">
+      Copyright © 2020-2022 iocoder.cn All Rights Reserved.
+    </div>
+  </div>
+</template>
+
+<script>
+import {authorize, getAuthorize} from "@/api/login";
+
+export default {
+  name: "Login",
+  data() {
+    return {
+      loginForm: {
+        scopes: [], // 已选中的 scope 数组
+      },
+      params: { // URL 上的 client_id、scope 等参数
+        responseType: undefined,
+        clientId: undefined,
+        redirectUri: undefined,
+        state: undefined,
+        scopes: [], // 优先从 query 参数获取；如果未传递，从后端获取
+      },
+      client: { // 客户端信息
+        name: '',
+        logo: '',
+      },
+      loading: false
+    };
+  },
+  created() {
+    // 解析参数
+    // 例如说【自动授权不通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read%20user.write
+    // 例如说【自动授权通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read
+    this.params.responseType = this.$route.query.response_type
+    this.params.clientId = this.$route.query.client_id
+    this.params.redirectUri = this.$route.query.redirect_uri
+    this.params.state = this.$route.query.state
+    if (this.$route.query.scope) {
+      this.params.scopes = this.$route.query.scope.split(' ')
+    }
+
+    // 如果有 scope 参数，先执行一次自动授权，看看是否之前都授权过了。
+    if (this.params.scopes.length > 0) {
+      this.doAuthorize(true, this.params.scopes, []).then(res => {
+        const href = res.data
+        if (!href) {
+          console.log('自动授权未通过！')
+          return;
+        }
+        location.href = href
+      })
+    }
+
+    // 获取授权页的基本信息
+    getAuthorize(this.params.clientId).then(res => {
+      this.client = res.data.client
+      // 解析 scope
+      let scopes
+      // 1.1 如果 params.scope 非空，则过滤下返回的 scopes
+      if (this.params.scopes.length > 0) {
+        scopes = []
+        for (const scope of res.data.scopes) {
+          if (this.params.scopes.indexOf(scope.key) >= 0) {
+            scopes.push(scope)
+          }
+        }
+      // 1.2 如果 params.scope 为空，则使用返回的 scopes 设置它
+      } else {
+        scopes = res.data.scopes
+        for (const scope of scopes) {
+          this.params.scopes.push(scope.key)
+        }
+      }
+      // 生成已选中的 checkedScopes
+      for (const scope of scopes) {
+        if (scope.value) {
+          this.loginForm.scopes.push(scope.key)
+        }
+      }
+    })
+  },
+  methods: {
+    handleAuthorize(approved) {
+      this.$refs.loginForm.validate(valid => {
+        if (!valid) {
+          return
+        }
+        this.loading = true
+        // 计算 checkedScopes + uncheckedScopes
+        let checkedScopes;
+        let uncheckedScopes;
+        if (approved) { // 同意授权，按照用户的选择
+          checkedScopes = this.loginForm.scopes
+          uncheckedScopes = this.params.scopes.filter(item => checkedScopes.indexOf(item) === -1)
+        } else { // 拒绝，则都是取消
+          checkedScopes = []
+          uncheckedScopes = this.params.scopes
+        }
+        // 提交授权的请求
+        this.doAuthorize(false, checkedScopes, uncheckedScopes).then(res => {
+          const href = res.data
+          if (!href) {
+            return;
+          }
+          location.href = href
+        }).finally(() => {
+          this.loading = false
+        })
+      })
+    },
+    doAuthorize(autoApprove, checkedScopes, uncheckedScopes) {
+      return authorize(this.params.responseType, this.params.clientId, this.params.redirectUri, this.params.state,
+          autoApprove, checkedScopes, uncheckedScopes)
+    },
+    formatScope(scope) {
+      // 格式化 scope 授权范围，方便用户理解。
+      // 这里仅仅是一个 demo，可以考虑录入到字典数据中，例如说字典类型 "system_oauth2_scope"，它的每个 scope 都是一条字典数据。
+      switch (scope) {
+        case 'user.read': return '访问你的个人信息'
+        case 'user.write': return '修改你的个人信息'
+        default: return scope
+      }
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "~@/assets/styles/login.scss";
+.oauth-login {
+  display: flex;
+  align-items: center;
+  cursor:pointer;
+}
+.oauth-login-item {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+.oauth-login-item img {
+  height: 25px;
+  width: 25px;
+}
+.oauth-login-item span:hover {
+  text-decoration: underline red;
+  color: red;
+}
+</style>

src/views/system/area/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="地区 & IP" url="https://doc.iocoder.cn/area-and-ip/" />
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">IP 查询
+        </el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-if="refreshTable" v-loading="loading" :data="list"  row-key="id"
+              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      <el-table-column label="编号" prop="id"/>
+      <el-table-column label="名字" prop="name"/>
+    </el-table>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog title="IP 查询" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="IP" prop="ip">
+          <el-input v-model="form.ip" placeholder="请输入 IP 地址"/>
+        </el-form-item>
+        <el-form-item label="地址" prop="result">
+          <el-input v-model="form.result" readonly placeholder="展示查询 IP 结果" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">查 询</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {getAreaByIp, getAreaTree} from "@/api/system/area";
+
+export default {
+  name: "SystemArea",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 地区列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 表单参数
+      form: {
+        ip: undefined,
+        result: undefined,
+      },
+      // 表单校验
+      rules: {
+        ip: [{required: true, message: "IP 地址不能为控", trigger: "blur"}],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      getAreaTree().then(response => {
+        this.list = response.data;
+        this.loading = false;
+      })
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        ip: undefined,
+        result: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        getAreaByIp(this.form.ip).then(response => {
+          this.$modal.msgSuccess("查询成功");
+          this.form.result = response.data
+        });
+      });
+    }
+  }
+};
+</script>

src/views/system/dept/index.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+      <el-form-item label="部门名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入部门名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:dept:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-if="refreshTable" v-loading="loading" :data="deptList" row-key="id" :default-expand-all="isExpandAll"
+              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      <el-table-column prop="name" label="部门名称" width="260"></el-table-column>
+      <el-table-column prop="leader" label="负责人" :formatter="userNicknameFormat" width="120"/>
+      <el-table-column prop="sort" label="排序" width="200"></el-table-column>
+      <el-table-column prop="status" label="状态" width="100">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:dept:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
+                     v-hasPermi="['system:dept:create']">新增</el-button>
+          <el-button v-if="scope.row.parentId !== 0" size="mini" type="text" icon="el-icon-delete"
+                     @click="handleDelete(scope.row)" v-hasPermi="['system:dept:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改部门对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="上级部门" prop="parentId">
+              <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入部门名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="显示排序" prop="sort">
+              <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="负责人" prop="leaderUserId">
+              <el-select v-model="form.leaderUserId" placeholder="请输入负责人" clearable style="width: 100%">
+                <el-option v-for="item in users" :key="parseInt(item.id)" :label="item.nickname" :value="parseInt(item.id)" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="phone">
+              <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门状态" prop="status">
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+                  {{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listDept, getDept, delDept, addDept, updateDept } from "@/api/system/dept";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+import {CommonStatusEnum} from '@/utils/constants'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+import {listSimpleUsers} from "@/api/system/user";
+
+export default {
+  name: "SystemDept",
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 表格树数据
+      deptList: [],
+      // 部门树选项
+      deptOptions: [],
+      // 用户下拉列表
+      users: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 是否展开
+      expand: false,
+      // 查询参数
+      queryParams: {
+        name: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "部门名称不能为空", trigger: "blur" }
+        ],
+        sort: [
+          { required: true, message: "显示排序不能为空", trigger: "blur" }
+        ],
+        email: [
+          {
+            type: "email",
+            message: "'请输入正确的邮箱地址",
+            trigger: ["blur", "change"]
+          }
+        ],
+        phone: [
+          {
+            pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur"
+          }
+        ],
+        status: [
+          { required: true, message: "状态不能为空", trigger: "blur" }
+        ]
+      },
+
+      // 枚举
+      CommonStatusEnum: CommonStatusEnum,
+      // 数据字典
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+    };
+  },
+  created() {
+    this.getList();
+    // 获得用户列表
+    listSimpleUsers().then(response => {
+      this.users = response.data;
+    });
+  },
+  methods: {
+    /** 查询部门列表 */
+    getList() {
+      this.loading = true;
+      listDept(this.queryParams).then(response => {
+        this.deptList = this.handleTree(response.data, "id");
+        this.loading = false;
+      });
+    },
+    /** 转换部门数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      };
+    },
+    // 用户昵称展示
+    userNicknameFormat(row, column) {
+      if (!row.leaderUserId) {
+        return '未设置';
+      }
+      for (const user of this.users) {
+        if (row.leaderUserId === user.id) {
+          return user.nickname;
+        }
+      }
+      return '未知【' + row.leaderUserId + '】';
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        parentId: undefined,
+        name: undefined,
+        sort: undefined,
+        leaderUserId: undefined,
+        phone: undefined,
+        email: undefined,
+        status: CommonStatusEnum.ENABLE,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      if (row !== undefined) {
+        this.form.parentId = row.id;
+      }
+      this.open = true;
+      this.title = "添加部门";
+      listDept().then(response => {
+	        this.deptOptions = this.handleTree(response.data, "id");
+      });
+    },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      getDept(row.id).then(response => {
+        this.form = response.data;
+        if (this.form.parentId === 0) { // 无父部门时，标记为 undefined，避免展示为 Unknown
+          this.form.parentId = undefined;
+        }
+        this.open = true;
+        this.title = "修改部门";
+      });
+      listDept(row.id).then(response => {
+	        this.deptOptions = this.handleTree(response.data, "id");
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updateDept(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addDept(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function() {
+          return delDept(row.id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/system/dict/data.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="字典名称" prop="dictType">
+        <el-select v-model="queryParams.dictType">
+          <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.type"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="字典标签" prop="label">
+        <el-input v-model="queryParams.label" placeholder="请输入字典标签" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="数据状态" clearable>
+          <el-option v-for="dict in statusDictDatas" :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:dict:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:dict:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="dataList" >
+      <el-table-column label="字典编码" align="center" prop="id" />
+      <el-table-column label="字典标签" align="center" prop="label" />
+      <el-table-column label="字典键值" align="center" prop="value" />
+      <el-table-column label="字典排序" align="center" prop="sort" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="颜色类型" align="center" prop="colorType" />
+      <el-table-column label="CSS Class" align="center" prop="cssClass" />
+      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:dict:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:dict:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
+        <el-form-item label="字典类型">
+          <el-input v-model="form.dictType" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="数据标签" prop="label">
+          <el-input v-model="form.label" placeholder="请输入数据标签" />
+        </el-form-item>
+        <el-form-item label="数据键值" prop="value">
+          <el-input v-model="form.value" placeholder="请输入数据键值" />
+        </el-form-item>
+        <el-form-item label="显示排序" prop="sort">
+          <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="颜色类型" prop="colorType">
+          <el-select v-model="form.colorType">
+            <el-option v-for="item in colorTypeOptions" :key="item.value" :label="item.label + '(' + item.value + ')'" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="CSS Class" prop="cssClass">
+          <el-input v-model="form.cssClass" placeholder="请输入 CSS Class" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listData, getData, delData, addData, updateData, exportData } from "@/api/system/dict/data";
+import { listAllSimple, getType } from "@/api/system/dict/type";
+
+import { CommonStatusEnum } from '@/utils/constants'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+
+export default {
+  name: "SystemDictData",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 字典表格数据
+      dataList: [],
+      // 默认字典类型
+      defaultDictType: "",
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 类型数据字典
+      typeOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        label: [
+          { required: true, message: "数据标签不能为空", trigger: "blur" }
+        ],
+        value: [
+          { required: true, message: "数据键值不能为空", trigger: "blur" }
+        ],
+        sort: [
+          { required: true, message: "数据顺序不能为空", trigger: "blur" }
+        ]
+      },
+      // 数据标签回显样式
+      colorTypeOptions: [{
+          value: "default",
+          label: "默认"
+        }, {
+          value: "primary",
+          label: "主要"
+        }, {
+          value: "success",
+          label: "成功"
+        }, {
+          value: "info",
+          label: "信息"
+        }, {
+          value: "warning",
+          label: "警告"
+        }, {
+          value: "danger",
+          label: "危险"
+        }
+      ],
+
+      // 枚举
+      CommonStatusEnum: CommonStatusEnum,
+      // 数据字典
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+    };
+  },
+  created() {
+    const dictId = this.$route.params && this.$route.params.dictId;
+    this.getType(dictId);
+    this.getTypeList();
+  },
+  methods: {
+    /** 查询字典类型详细 */
+    getType(dictId) {
+      getType(dictId).then(response => {
+        this.queryParams.dictType = response.data.type;
+        this.defaultDictType = response.data.type;
+        this.getList();
+      });
+    },
+    /** 查询字典类型列表 */
+    getTypeList() {
+      listAllSimple().then(response => {
+        this.typeOptions = response.data;
+      });
+    },
+    /** 查询字典数据列表 */
+    getList() {
+      this.loading = true;
+      listData(this.queryParams).then(response => {
+        this.dataList = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        label: undefined,
+        value: undefined,
+        sort: 0,
+        status: CommonStatusEnum.ENABLE,
+        colorType: 'default',
+        cssClass: undefined,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.dictType = this.defaultDictType;
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加字典数据";
+      this.form.dictType = this.queryParams.dictType;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getData(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改字典数据";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updateData(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addData(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id;
+      this.$modal.confirm('是否确认删除字典编码为"' + ids + '"的数据项?').then(function() {
+          return delData(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$modal.confirm('是否确认导出所有数据项?').then(() => {
+          this.exportLoading = true;
+          return exportData(queryParams);
+        }).then(response => {
+          this.$download.excel(response, '字典数据.xls');
+          this.exportLoading = false;
+      }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/system/dict/index.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="字典名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入字典名称" clearable style="width: 240px" @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="字典类型" prop="type">
+        <el-input v-model="queryParams.type" placeholder="请输入字典类型" clearable style="width: 240px" @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="字典状态" clearable style="width: 240px">
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:dict:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:dict:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="typeList">
+      <el-table-column label="字典编号" align="center" prop="id" />
+      <el-table-column label="字典名称" align="center" prop="name" :show-overflow-tooltip="true" />
+      <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
+        <template v-slot="scope">
+          <router-link :to="'/dict/type/data/' + scope.row.id" class="link-type">
+            <span>{{ scope.row.type }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:dict:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:dict:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="字典名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入字典名称" />
+        </el-form-item>
+        <el-form-item label="字典类型" prop="type">
+          <el-input :disabled="typeof form.id !== 'undefined'" v-model="form.type" placeholder="请输入字典类型" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listType, getType, delType, addType, updateType, exportType } from "@/api/system/dict/type";
+
+import { CommonStatusEnum } from '@/utils/constants'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+
+export default {
+  name: "SystemDictType",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 字典表格数据
+      typeList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: undefined,
+        type: undefined,
+        status: undefined,
+        createTime: []
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "字典名称不能为空", trigger: "blur" }
+        ],
+        type: [
+          { required: true, message: "字典类型不能为空", trigger: "blur" }
+        ]
+      },
+
+      // 枚举
+      CommonStatusEnum: CommonStatusEnum,
+      // 数据字典
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询字典类型列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      listType(this.queryParams).then(response => {
+        this.typeList = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        name: undefined,
+        type: undefined,
+        status: CommonStatusEnum.ENABLE,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加字典类型";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getType(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改字典类型";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updateType(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addType(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除字典编号为"' + ids + '"的数据项?').then(function() {
+          return delType(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      // 执行导出
+      this.$modal.confirm('是否确认导出所有字典类型数据项?').then(() => {
+        this.exportLoading = true;
+        return exportType(params);
+      }).then(response => {
+        this.$download.excel(response, '字典类型.xls');
+        this.exportLoading = false;
+      }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/system/errorCode/index.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="异常处理（错误码）" url="https://doc.iocoder.cn/exception/" />
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
+      <el-form-item label="错误码类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择错误码类型" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_ERROR_CODE_TYPE)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="应用名" prop="applicationName">
+        <el-input v-model="queryParams.applicationName" placeholder="请输入应用名" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="错误码编码" prop="code">
+        <el-input v-model="queryParams.code" placeholder="请输入错误码编码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="错误码提示" prop="message">
+        <el-input v-model="queryParams.message" placeholder="请输入错误码提示" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:error-code:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:error-code:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="类型" align="center" prop="type" width="80">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_ERROR_CODE_TYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column label="应用名" align="center" prop="applicationName" width="200" />
+      <el-table-column label="错误码编码" align="center" prop="code" width="120" />
+      <el-table-column label="错误码提示" align="center" prop="message" width="300" />
+      <el-table-column label="备注" align="center" prop="memo" width="200" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:error-code:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:error-code:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="应用名" prop="applicationName">
+          <el-input v-model="form.applicationName" placeholder="请输入应用名" />
+        </el-form-item>
+        <el-form-item label="错误码编码" prop="code">
+          <el-input v-model="form.code" placeholder="请输入错误码编码" />
+        </el-form-item>
+        <el-form-item label="错误码提示" prop="message">
+          <el-input v-model="form.message" placeholder="请输入错误码提示" />
+        </el-form-item>
+        <el-form-item label="备注" prop="memo">
+          <el-input v-model="form.memo" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createErrorCode, updateErrorCode, deleteErrorCode, getErrorCode, getErrorCodePage, exportErrorCodeExcel } from "@/api/system/errorCode";
+
+export default {
+  name: "SystemErrorCode",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 错误码列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        type: null,
+        applicationName: null,
+        code: null,
+        message: null,
+        createTime: []
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        applicationName: [{ required: true, message: "应用名不能为空", trigger: "blur" }],
+        code: [{ required: true, message: "错误码编码不能为空", trigger: "blur" }],
+        message: [{ required: true, message: "错误码提示不能为空", trigger: "blur" }],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getErrorCodePage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        applicationName: undefined,
+        code: undefined,
+        message: undefined,
+        memo: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加错误码";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getErrorCode(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改错误码";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateErrorCode(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createErrorCode(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除错误码编号为"' + id + '"的数据项?').then(function() {
+        return deleteErrorCode(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      // 执行导出
+      this.$modal.confirm('是否确认导出所有错误码数据项?').then(() => {
+        this.exportLoading = true;
+        return exportErrorCodeExcel(params);
+      }).then(response => {
+        this.$download.excel(response, '错误码.xls');
+        this.exportLoading = false;
+      }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/system/loginlog/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="登录地址" prop="userIp">
+        <el-input v-model="queryParams.userIp" placeholder="请输入登录地址" clearable style="width: 240px;"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="用户名称" prop="username">
+        <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable style="width: 240px;"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="结果" clearable style="width: 240px">
+          <el-option :key="true" label="成功" :value="true"/>
+          <el-option :key="false" label="失败" :value="false"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="登录时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:login-log:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="访问编号" align="center" prop="id" />
+      <el-table-column label="日志类型" align="center" prop="logType" width="120">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="scope.row.logType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="用户名称" align="center" prop="username" />
+      <el-table-column label="登录地址" align="center" prop="userIp" width="130" :show-overflow-tooltip="true" />
+      <el-table-column label="userAgent" align="center" prop="userAgent" width="400" :show-overflow-tooltip="true" />
+      <el-table-column label="结果" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="scope.row.result" />
+        </template>
+      </el-table-column>
+      <el-table-column label="登录日期" align="center" prop="loginTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+  </div>
+</template>
+
+<script>
+import { list, exportLoginLog } from "@/api/system/loginlog";
+
+export default {
+  name: "SystemLoginLog",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        userIp: undefined,
+        username: undefined,
+        status: undefined,
+        createTime: []
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询登录日志列表 */
+    getList() {
+      this.loading = true;
+      list(this.queryParams).then(response => {
+          this.list = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.$modal.confirm('是否确认导出所有操作日志数据项?').then(() => {
+          // 处理查询参数
+          let params = {...this.queryParams};
+          params.pageNo = undefined;
+          params.pageSize = undefined;
+          this.exportLoading = true;
+          return exportLoginLog(params);
+        }).then(response => {
+          this.$download.excel(response, '登录日志.xls');
+          this.exportLoading = false;
+      }).catch(() => {});
+    }
+  }
+};
+</script>
+

src/views/system/mail/account/index.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="邮件配置" url="https://doc.iocoder.cn/mail" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="邮箱" prop="mail">
+        <el-input v-model="queryParams.mail" placeholder="请输入邮箱" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="queryParams.username" placeholder="请输入用户名" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:mail-account:create']">新增</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="邮箱" align="center" prop="mail" />
+      <el-table-column label="用户名" align="center" prop="username" />
+      <el-table-column label="SMTP 服务器域名" align="center" prop="host" />
+      <el-table-column label="SMTP 服务器端口" align="center" prop="port" />
+      <el-table-column label="是否开启 SSL" align="center" prop="sslEnable">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.sslEnable" />
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:mail-account:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:mail-account:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
+        <el-form-item label="邮箱" prop="mail">
+          <el-input v-model="form.mail" placeholder="请输入邮箱" />
+        </el-form-item>
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="form.username" placeholder="请输入用户名，一般和邮箱一致" />
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="form.password" placeholder="请输入密码" />
+        </el-form-item>
+        <el-form-item label="SMTP 服务器域名" prop="host">
+          <el-input v-model="form.host" placeholder="请输入 SMTP 服务器域名" />
+        </el-form-item>
+        <el-form-item label="SMTP 服务器端口" prop="port">
+          <el-input v-model="form.port" placeholder="请输入 SMTP 服务器端口" />
+        </el-form-item>
+        <el-form-item label="是否开启 SSL" prop="sslEnable">
+          <el-radio-group v-model="form.sslEnable">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+                      :key="dict.value" :label="dict.value === 'true'">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createMailAccount, updateMailAccount, deleteMailAccount, getMailAccount, getMailAccountPage } from "@/api/system/mail/account";
+
+export default {
+  name: "SystemMailAccount",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 邮箱账号列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        mail: null,
+        username: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        mail: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
+        username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+        password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
+        host: [{ required: true, message: "SMTP 服务器域名不能为空", trigger: "blur" }],
+        port: [{ required: true, message: "SMTP 服务器端口不能为空", trigger: "blur" }],
+        sslEnable: [{ required: true, message: "是否开启 SSL不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getMailAccountPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        mail: undefined,
+        username: undefined,
+        password: undefined,
+        host: undefined,
+        port: undefined,
+        sslEnable: true,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加邮箱账号";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getMailAccount(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改邮箱账号";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateMailAccount(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createMailAccount(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除邮箱账号编号为"' + id + '"的数据项?').then(function() {
+          return deleteMailAccount(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/system/mail/log/index.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="邮件配置" url="https://doc.iocoder.cn/mail" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="接收邮箱" prop="toMail">
+        <el-input v-model="queryParams.toMail" placeholder="请输入接收邮箱" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="邮箱账号" prop="accountId">
+        <el-select v-model="queryParams.accountId" placeholder="请输入邮箱账号" clearable>
+          <el-option v-for="account in accountOptions" :key="account.id" :value="account.id" :label="account.mail" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="模板编号" prop="templateId">
+        <el-input v-model="queryParams.templateId" placeholder="请输入模板编号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="发送状态" prop="sendStatus">
+        <el-select v-model="queryParams.sendStatus" placeholder="请选择发送状态" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_MAIL_SEND_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="发送时间" prop="sendTime">
+        <el-date-picker v-model="queryParams.sendTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item label="用户编号" prop="userId">
+        <el-input v-model="queryParams.userId" placeholder="请输入用户编号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="用户类型" prop="userType">
+        <el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.USER_TYPE)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="发送时间" align="center" prop="sendTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.sendTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="接收邮箱" align="center" prop="toMail" width="200">
+        <template v-slot="scope">
+          <div>{{ scope.row.toMail }}</div>
+          <div v-if="scope.row.userType && scope.row.userId">
+            <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType"/>{{ '(' + scope.row.userId + ')' }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="邮件标题" align="center" prop="templateTitle" />
+      <el-table-column label="发送状态" align="center" prop="sendStatus">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_MAIL_SEND_STATUS" :value="scope.row.sendStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column label="邮箱账号" align="center" prop="fromMail" />
+      <el-table-column label="模板编号" align="center" prop="templateId" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
+                     v-hasPermi="['system:mail-log:query']">详细</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 邮件日志详细-->
+    <el-dialog :title="title" :visible.sync="open" width="700px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" label-width="160px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="日志主键：">{{ form.id }}</el-form-item>
+            <el-form-item label="用户编号：">{{ form.userId }}</el-form-item>
+            <el-form-item label="用户类型：">
+              <dict-tag :type="DICT_TYPE.USER_TYPE" :value="form.userType"/>
+            </el-form-item>
+            <el-form-item label="接收邮箱地址：">{{ form.toMail }}</el-form-item>
+            <el-form-item label="邮箱账号编号：">{{ form.accountId }}</el-form-item>
+            <el-form-item label="发送邮箱地址：">{{ form.fromMail }}</el-form-item>
+            <el-form-item label="模板编号：">{{ form.templateId }}</el-form-item>
+            <el-form-item label="模板编码：">{{ form.templateCode }}</el-form-item>
+            <el-form-item label="模版发送人名称：">{{ form.templateNickname }}</el-form-item>
+            <el-form-item label="邮件标题：">{{ form.templateTitle }}</el-form-item>
+            <el-form-item label="邮件内容：">
+              <editor v-model="form.templateContent" :min-height="192" read-only />
+            </el-form-item>
+            <el-form-item label="邮件参数：">{{ form.templateParams }}</el-form-item>
+            <el-form-item label="发送状态：">
+              <dict-tag :type="DICT_TYPE.SYSTEM_MAIL_SEND_STATUS" :value="form.sendStatus" />
+            </el-form-item>
+            <el-form-item label="发送时间：">{{ parseTime(form.sendTime) }}</el-form-item>
+            <el-form-item label="发送返回的消息编号：">{{ form.sendMessageId }}</el-form-item>
+            <el-form-item label="发送异常：">{{ form.sendException }}</el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="open = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getMailLog, getMailLogPage } from "@/api/system/mail/log";
+import Editor from '@/components/Editor';
+import { getSimpleMailAccountList } from "@/api/system/mail/account";
+
+export default {
+  name: "SystemMailLog",
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 邮件日志列表
+      list: [],
+      // 弹出层标题
+      title: "邮件发送日志详细",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        userId: null,
+        userType: null,
+        toMail: null,
+        accountId: null,
+        templateId: null,
+        sendStatus: null,
+        sendTime: [],
+      },
+      // 表单参数
+      form: {},
+      // 邮箱账号
+      accountOptions: []
+    };
+  },
+  created() {
+    this.getList();
+    // 获得邮箱账号列表
+    getSimpleMailAccountList().then(response => {
+      this.accountOptions = response.data
+    })
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getMailLogPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        userId: undefined,
+        userType: undefined,
+        toMail: undefined,
+        accountId: undefined,
+        fromMail: undefined,
+        templateId: undefined,
+        templateCode: undefined,
+        templateNickname: undefined,
+        templateTitle: undefined,
+        templateContent: undefined,
+        templateParams: undefined,
+        sendStatus: undefined,
+        sendTime: undefined,
+        sendMessageId: undefined,
+        sendException: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 详细按钮操作 */
+    handleView(row) {
+      this.open = true;
+      this.form = row;
+    }
+  }
+};
+</script>

src/views/system/mail/template/index.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="邮件配置" url="https://doc.iocoder.cn/mail" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="模板名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入模板名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="模板编码" prop="code">
+        <el-input v-model="queryParams.code" placeholder="请输入模板编码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="邮箱账号" prop="accountId">
+        <el-select v-model="queryParams.accountId" placeholder="请输入邮箱账号" clearable>
+          <el-option v-for="account in accountOptions" :key="account.id" :value="account.id" :label="account.mail" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="开启状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择开启状态" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:mail-template:create']">新增</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="模板编码" align="center" prop="code" />
+      <el-table-column label="模板名称" align="center" prop="name" />
+      <el-table-column label="模板标题" align="center" prop="title" />
+      <el-table-column label="模板内容" align="center" prop="content" :show-overflow-tooltip="true" />
+      <el-table-column label="邮箱账号" align="center" prop="accountId" width="200">
+        <template v-slot="scope">
+          {{ accountOptions.find(account => account.id === scope.row.accountId)?.mail }}
+        </template>
+      </el-table-column>
+      <el-table-column label="发送人名称" align="center" prop="nickname" />
+      <el-table-column label="开启状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-share" @click="handleSend(scope.row)"
+                     v-hasPermi="['system:mail-template:send-mail']">测试</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:mail-template:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:mail-template:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="模板名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入模板名称" />
+        </el-form-item>
+        <el-form-item label="模板编码" prop="code">
+          <el-input v-model="form.code" placeholder="请输入模板编码" />
+        </el-form-item>
+        <el-form-item label="邮箱账号" prop="accountId">
+          <el-select v-model="form.accountId" placeholder="请输入邮箱账号">
+            <el-option v-for="account in accountOptions" :key="account.id" :value="account.id" :label="account.mail" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="发送人名称" prop="nickname">
+          <el-input v-model="form.nickname" placeholder="请输入发送人名称" />
+        </el-form-item>
+        <el-form-item label="模板标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入模板标题" />
+        </el-form-item>
+        <el-form-item label="模板内容">
+          <editor v-model="form.content" :min-height="192"/>
+        </el-form-item>
+        <el-form-item label="开启状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                      :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 对话框(发送邮件) -->
+    <el-dialog title="测试发送邮件" :visible.sync="sendOpen" width="500px" append-to-body>
+      <el-form ref="sendForm" :model="sendForm" :rules="sendRules" label-width="140px">
+        <el-form-item label="模板内容" prop="content">
+          <editor v-model="sendForm.content" :min-height="192" readonly />
+        </el-form-item>
+        <el-form-item label="收件邮箱" prop="mail">
+          <el-input v-model="sendForm.mail" placeholder="请输入收件邮箱" />
+        </el-form-item>
+        <el-form-item v-for="param in sendForm.params" :key="param" :label="'参数 {' + param + '}'" :prop="'templateParams.' + param">
+          <el-input v-model="sendForm.templateParams[param]" :placeholder="'请输入 ' + param + ' 参数'" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitSendForm">确 定</el-button>
+        <el-button @click="cancelSend">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createMailTemplate, updateMailTemplate, deleteMailTemplate, getMailTemplate, getMailTemplatePage, sendMail } from "@/api/system/mail/template";
+import Editor from '@/components/Editor';
+import { CommonStatusEnum } from "@/utils/constants";
+import { getSimpleMailAccountList } from "@/api/system/mail/account";
+
+export default {
+  name: "SystemMailTemplate",
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 邮件模版列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        code: null,
+        accountId: null,
+        status: null,
+        createTime: [],
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
+        code: [{ required: true, message: "模板编码不能为空", trigger: "blur" }],
+        accountId: [{ required: true, message: "邮箱账号不能为空", trigger: "blur" }],
+        title: [{ required: true, message: "模板标题不能为空", trigger: "blur" }],
+        content: [{ required: true, message: "模板内容不能为空", trigger: "blur" }],
+        status: [{ required: true, message: "开启状态不能为空", trigger: "blur" }],
+      },
+      // 邮箱账号
+      accountOptions: [],
+
+      // 发送邮箱
+      sendOpen: false,
+      sendForm: {
+        params: [], // 模板的参数列表
+      },
+      sendRules: {
+        mail: [{ required: true, message: "收件邮箱不能为空", trigger: "blur" }],
+        templateCode: [{ required: true, message: "模版编码不能为空", trigger: "blur" }],
+        templateParams: { }
+      }
+    };
+  },
+  created() {
+    this.getList();
+    // 获得邮箱账号列表
+    getSimpleMailAccountList().then(response => {
+      this.accountOptions = response.data
+    })
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getMailTemplatePage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        name: undefined,
+        code: undefined,
+        accountId: undefined,
+        nickname: undefined,
+        title: undefined,
+        content: undefined,
+        status: CommonStatusEnum.ENABLE,
+        remark: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加邮件模版";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getMailTemplate(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改邮件模版";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateMailTemplate(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createMailTemplate(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除邮件模版编号为"' + id + '"的数据项?').then(function() {
+          return deleteMailTemplate(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 发送短息按钮 */
+    handleSend(row) {
+      this.resetSend(row);
+      // 设置参数
+      this.sendForm.content = row.content;
+      this.sendForm.params = row.params;
+      this.sendForm.templateCode = row.code;
+      this.sendForm.templateParams = row.params.reduce(function(obj, item) {
+        obj[item] = undefined;
+        return obj;
+      }, {});
+      // 根据 row 重置 rules
+      this.sendRules.templateParams = row.params.reduce(function(obj, item) {
+        obj[item] = { required: true, message: '参数 ' + item + " 不能为空", trigger: "change" };
+        return obj;
+      }, {});
+      // 设置打开
+      this.sendOpen = true;
+    },
+    /** 重置发送邮箱的表单 */
+    resetSend() {
+      // 根据 row 重置表单
+      this.sendForm = {
+        content: undefined,
+        params: undefined,
+        mail: undefined,
+        templateCode: undefined,
+        templateParams: {}
+      };
+      this.resetForm("sendForm");
+    },
+    /** 取消发送邮箱 */
+    cancelSend() {
+      this.sendOpen = false;
+      this.resetSend();
+    },
+    /** 提交按钮 */
+    submitSendForm() {
+      this.$refs["sendForm"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 添加的提交
+        sendMail(this.sendForm).then(response => {
+          this.$modal.msgSuccess("提交发送成功！发送结果，见发送日志编号：" + response.data);
+          this.sendOpen = false;
+        });
+      });
+    },
+  }
+};
+</script>

src/views/system/menu/index.vue

@@ -0,0 +1,406 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
+    <doc-alert title="菜单路由" url="https://doc.iocoder.cn/vue2/route/" />
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+      <el-form-item label="菜单名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:menu:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="id" :default-expand-all="isExpandAll"
+              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="250"></el-table-column>
+      <el-table-column prop="icon" label="图标" align="center" width="100">
+        <template v-slot="scope">
+          <svg-icon :icon-class="scope.row.icon" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="sort" label="排序" width="60"></el-table-column>
+      <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" />
+      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" />
+      <el-table-column prop="componentName" label="组件名称" :show-overflow-tooltip="true" />
+      <el-table-column prop="status" label="状态" width="80">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:menu:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
+                     v-hasPermi="['system:menu:create']">新增</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:menu:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改菜单对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="上级菜单">
+              <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true"
+                          placeholder="选择上级菜单"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="菜单类型" prop="type">
+              <el-radio-group v-model="form.type">
+                <el-radio v-for="dict in menuTypeDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+                  {{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item v-if="form.type !== 3" label="菜单图标">
+              <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
+                <IconSelect ref="iconSelect" @selected="selected" />
+                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
+                  <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon"
+                            style="height: 32px;width: 16px;"/>
+                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+                </el-input>
+              </el-popover>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="菜单名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入菜单名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="显示排序" prop="sort">
+              <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.type !== 3" label="路由地址" prop="path">
+              <span slot="label">
+                <el-tooltip content="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头" placement="top">
+                <i class="el-icon-question" />
+                </el-tooltip>
+                路由地址
+              </span>
+              <el-input v-model="form.path" placeholder="请输入路由地址" />
+            </el-form-item>
+          </el-col>
+					<el-col :span="12">
+						<el-form-item v-if="form.type !== 1" label="权限标识">
+              <span slot="label">
+                <el-tooltip content="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)" placement="top">
+                  <i class="el-icon-question" />
+                </el-tooltip>
+                权限字符
+              </span>
+							<el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
+						</el-form-item>
+					</el-col>
+          <el-col :span="12" v-if="form.type === 2">
+            <el-form-item label="组件路径" prop="component">
+              <el-input v-model="form.component" placeholder="例如说：system/user/index" />
+            </el-form-item>
+          </el-col>
+					<el-col :span="12" v-if="form.type === 2">
+						<el-form-item label="组件名称" prop="componentName">
+							<el-input v-model="form.componentName" placeholder="例如说：SystemUser" />
+						</el-form-item>
+					</el-col>
+          <el-col :span="12">
+            <el-form-item label="菜单状态" prop="status">
+              <span slot="label">
+                <el-tooltip content="选择停用时，路由将不会出现在侧边栏，也不能被访问" placement="top">
+                  <i class="el-icon-question" />
+                </el-tooltip>
+                菜单状态
+              </span>
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                          :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.type !== 3" label="显示状态">
+              <span slot="label">
+                <el-tooltip content="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问" placement="top">
+                  <i class="el-icon-question" />
+                </el-tooltip>
+                是否显示
+              </span>
+              <el-radio-group v-model="form.visible">
+                <el-radio :key="true" :label="true">显示</el-radio>
+                <el-radio :key="false" :label="false">隐藏</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.type !== 3" label="总是显示">
+              <span slot="label">
+                <el-tooltip content="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单" placement="top">
+                  <i class="el-icon-question" />
+                </el-tooltip>
+                 总是显示
+              </span>
+              <el-radio-group v-model="form.alwaysShow">
+                <el-radio :key="true" :label="true">总是</el-radio>
+                <el-radio :key="false" :label="false">不是</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+					<el-col :span="12">
+						<el-form-item v-if="form.type === 2" label="是否缓存">
+              <span slot="label">
+                <el-tooltip content="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段" placement="top">
+                  <i class="el-icon-question" />
+                </el-tooltip>
+                 是否缓存
+              </span>
+							<el-radio-group v-model="form.keepAlive">
+								<el-radio :key="true" :label="true">缓存</el-radio>
+								<el-radio :key="false" :label="false">不缓存</el-radio>
+							</el-radio-group>
+						</el-form-item>
+					</el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import IconSelect from "@/components/IconSelect";
+
+import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+import {isExternal} from "@/utils/validate";
+
+export default {
+  name: "SystemMenu",
+  components: { Treeselect, IconSelect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 菜单表格树数据
+      menuList: [],
+      // 菜单树选项
+      menuOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否展开，默认全部折叠
+      isExpandAll: false,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 查询参数
+      queryParams: {
+        name: undefined,
+        visible: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "菜单名称不能为空", trigger: "blur" }
+        ],
+        sort: [
+          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
+        ],
+        path: [
+          { required: true, message: "路由地址不能为空", trigger: "blur" }
+        ],
+        status: [
+          { required: true, message: "状态不能为空", trigger: "blur" }
+        ]
+      },
+
+      // 枚举
+      MenuTypeEnum: SystemMenuTypeEnum,
+      CommonStatusEnum: CommonStatusEnum,
+      // 数据字典
+      menuTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_MENU_TYPE),
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 选择图标
+    selected(name) {
+      this.form.icon = name;
+    },
+    /** 查询菜单列表 */
+    getList() {
+      this.loading = true;
+      listMenu(this.queryParams).then(response => {
+        this.menuList = this.handleTree(response.data, "id");
+        this.loading = false;
+      });
+    },
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      };
+    },
+    /** 查询菜单下拉树结构 */
+    getTreeselect() {
+      listMenu().then(response => {
+        this.menuOptions = [];
+        const menu = { id: 0, name: '主类目', children: [] };
+        menu.children = this.handleTree(response.data, "id");
+        this.menuOptions.push(menu);
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        parentId: 0,
+        name: undefined,
+        icon: undefined,
+        type: SystemMenuTypeEnum.DIR,
+        sort: undefined,
+        status: CommonStatusEnum.ENABLE,
+        visible: true,
+        keepAlive: true,
+        alwaysShow: true,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      this.getTreeselect();
+      if (row != null && row.id) {
+        this.form.parentId = row.id;
+      } else {
+        this.form.parentId = 0;
+      }
+      this.open = true;
+      this.title = "添加菜单";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.getTreeselect();
+      getMenu(row.id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改菜单";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          // 若权限类型为目录或者菜单时，进行 path 的校验，避免后续拼接出来的路由无法跳转
+          if (this.form.type === SystemMenuTypeEnum.DIR
+            || this.form.type === SystemMenuTypeEnum.MENU) {
+            // 如果是外链，则不进行校验
+            const path = this.form.path
+            if (!isExternal(path)) {
+              // 父权限为根节点，path 必须以 / 开头
+              if (this.form.parentId === 0 && path.charAt(0) !== '/') {
+                this.$modal.msgSuccess('前端必须以 / 开头')
+                return
+              } else if (this.form.parentId !== 0 && path.charAt(0) === '/') {
+                this.$modal.msgSuccess('前端不能以 / 开头')
+                return
+              }
+            }
+          }
+
+          // 提交
+          if (this.form.id !== undefined) {
+            updateMenu(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addMenu(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function() {
+          return delMenu(row.id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/system/notice/index.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="公告标题" prop="title">
+        <el-input v-model="queryParams.title" placeholder="请输入公告标题" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="公告状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="公告状态" clearable>
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label"
+                     :value="parseInt(dict.value)"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:notice:create']" s>新增
+        </el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="noticeList">
+      <el-table-column label="序号" align="center" prop="id" width="100"/>
+      <el-table-column label="公告标题" align="center" prop="title" :show-overflow-tooltip="true"/>
+      <el-table-column label="公告类型" align="center" prop="type" width="100">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_NOTICE_TYPE" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status" width="100">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建者" align="center" prop="createBy" width="100"/>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="100">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:notice:update']">修改
+          </el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:notice:delete']">删除
+          </el-button>
+          <el-button size="mini" type="text" @click="handlePush(scope.row.id)"
+                     v-hasPermi="['system:notice:update']">推送
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 添加或修改公告对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="公告标题" prop="title">
+              <el-input v-model="form.title" placeholder="请输入公告标题"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公告类型" prop="type">
+              <el-select v-model="form.type" placeholder="请选择">
+                <el-option
+                    v-for="dict in noticeTypeDictDatas"
+                    :key="parseInt(dict.value)"
+                    :label="dict.label"
+                    :value="parseInt(dict.value)"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.status">
+                <el-radio
+                    v-for="dict in statusDictDatas"
+                    :key="parseInt(dict.value)"
+                    :label="parseInt(dict.value)"
+                >{{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="内容">
+              <editor v-model="form.content" :min-height="192"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {addNotice, delNotice, getNotice, listNotice, pushNotice, updateNotice} from "@/api/system/notice";
+import Editor from '@/components/Editor';
+
+import {CommonStatusEnum} from '@/utils/constants'
+import {DICT_TYPE, getDictDatas} from '@/utils/dict'
+
+export default {
+  name: "SystemNotice",
+  components: {
+    Editor
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 公告表格数据
+      noticeList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        title: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        title: [
+          {required: true, message: "公告标题不能为空", trigger: "blur"}
+        ],
+        type: [
+          {required: true, message: "公告类型不能为空", trigger: "change"}
+        ]
+      },
+
+      // 枚举
+      CommonStatusEnum: CommonStatusEnum,
+      // 数据字典
+      noticeTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_NOTICE_TYPE),
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询公告列表 */
+    getList() {
+      this.loading = true;
+      listNotice(this.queryParams).then(response => {
+        this.noticeList = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        title: undefined,
+        type: undefined,
+        content: undefined,
+        status: CommonStatusEnum.ENABLE
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加公告";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getNotice(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改公告";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updateNotice(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addNotice(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除公告编号为"' + ids + '"的数据项?').then(function () {
+        return delNotice(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+    /** 推送按钮操作 */
+    handlePush(id) {
+      try {
+        const self = this;
+        // 推送的二次确认
+        this.$modal.confirm('是否推送所选中通知？').then(() => {
+          // 发起推送
+          pushNotice(id).then(() => {
+            self.$modal.success('推送成功');
+          })
+        })
+      } catch {
+      }
+    }
+  }
+};
+</script>

src/views/system/notify/message/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="用户编号" prop="userId">
+        <el-input v-model="queryParams.userId" placeholder="请输入用户编号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="用户类型" prop="userType">
+        <el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.USER_TYPE)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="模板编码" prop="templateCode">
+        <el-input v-model="queryParams.templateCode" placeholder="请输入模板编码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="模版类型" prop="templateType">
+        <el-select v-model="queryParams.templateType" placeholder="请选择模版类型" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="用户编号" align="center" prop="userId" />
+      <el-table-column label="用户类型" align="center" prop="userType">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="模板编码" align="center" prop="templateCode" />
+      <el-table-column label="发送人名称" align="center" prop="templateNickname" />
+      <el-table-column label="模版内容" align="center" prop="templateContent" />
+      <el-table-column label="模版类型" align="center" prop="templateType">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="是否已读" align="center" prop="readStatus">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column label="阅读时间" align="center" prop="readTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.readTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
+                     v-hasPermi="['system:notify-message:query']">详细</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 站内信详细-->
+    <el-dialog :title="title" :visible.sync="open" width="700px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form" label-width="160px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="日志主键：">{{ form.id }}</el-form-item>
+            <el-form-item label="发送时间：">{{ parseTime(form.createTime) }}</el-form-item>
+            <el-form-item label="用户编号：">{{ form.userId }}</el-form-item>
+            <el-form-item label="用户类型：">
+              <dict-tag :type="DICT_TYPE.USER_TYPE" :value="form.userType"/>
+            </el-form-item>
+            <el-form-item label="模板编号：">{{ form.templateId }}</el-form-item>
+            <el-form-item label="模板编码：">{{ form.templateCode }}</el-form-item>
+            <el-form-item label="模板类型：">
+              <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="form.templateType" />
+            </el-form-item>
+            <el-form-item label="模版发送人名称：">{{ form.templateNickname }}</el-form-item>
+            <el-form-item label="邮件内容：">{{ form.templateContent }}</el-form-item>
+            <el-form-item label="模版参数：">{{ form.templateParams }}</el-form-item>
+            <el-form-item label="是否已读：">
+              <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="form.readStatus" />
+            </el-form-item>
+            <el-form-item label="阅读时间：">{{ parseTime(form.readTime) }}</el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="open = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getNotifyMessagePage } from "@/api/system/notify/message";
+
+export default {
+  name: "SystemNotifyMessage",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 站内信消息列表
+      list: [],
+      // 弹出层标题
+      title: "站内信详细",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        userId: null,
+        userType: null,
+        templateCode: null,
+        templateType: null,
+        createTime: [],
+      },
+      // 表单参数
+      form: {},
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getNotifyMessagePage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 详细按钮操作 */
+    handleView(row) {
+      this.open = true;
+      this.form = row;
+    }
+  }
+};
+</script>

src/views/system/notify/my/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="是否已读" prop="readStatus">
+        <el-select v-model="queryParams.readStatus" placeholder="请选择状态" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="发送时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleUpdateList">标记已读</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleUpdateAll">全部已读</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" ref="tables" :data="list">
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="发送人" align="center" prop="templateNickname" width="120" />
+      <el-table-column label="发送时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="类型" align="center" prop="templateType" width="80">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="内容" align="center" prop="templateContent" />
+      <el-table-column label="是否已读" align="center" prop="readStatus" width="80">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+        <template v-slot="scope">
+          <el-button v-show="!scope.row.readStatus" size="mini" type="text" icon="el-icon-check" @click="handleUpdateSingle(scope.row)">已读</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+  </div>
+</template>
+
+<script>
+import {getMyNotifyMessagePage, updateAllNotifyMessageRead, updateNotifyMessageRead} from "@/api/system/notify/message";
+
+export default {
+  name: "SystemMyNotify",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 我的站内信列表
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        readStatus: null,
+        createTime: []
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getMyNotifyMessagePage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    handleUpdateList() {
+      let list = this.$refs["tables"].selection;
+      if (list.length === 0) {
+        return;
+      }
+      this.handleUpdate(list.map(v => v.id))
+    },
+    handleUpdateSingle(row) {
+      this.handleUpdate([row.id])
+    },
+    handleUpdate(ids) {
+      updateNotifyMessageRead(ids).then(response => {
+        this.$modal.msgSuccess("标记已读成功！");
+        this.getList();
+      });
+    },
+    handleUpdateAll(){
+      updateAllNotifyMessageRead().then(response => {
+        this.$modal.msgSuccess("全部已读成功！");
+        this.getList();
+      });
+    }
+  }
+}
+</script>

src/views/system/notify/template/index.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="模板名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入模板名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="模版编码" prop="code">
+        <el-input v-model="queryParams.code" placeholder="请输入模版编码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:notify-template:create']">新增</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="模板编码" align="center" prop="code" />
+      <el-table-column label="模板名称" align="center" prop="name" />
+      <el-table-column label="类型" align="center" prop="type">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column label="发送人名称" align="center" prop="nickname" />
+      <el-table-column label="模板内容" align="center" prop="content" width="300" />
+      <el-table-column label="开启状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-share" @click="handleSendNotify(scope.row)"
+                     v-hasPermi="['system:notify-template:send-notify']">测试</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:notify-template:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:notify-template:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
+        <el-form-item label="模版编码" prop="code">
+          <el-input v-model="form.code" placeholder="请输入模版编码" />
+        </el-form-item>
+        <el-form-item label="模板名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入模版名称" />
+        </el-form-item>
+        <el-form-item label="发件人名称" prop="nickname">
+          <el-input v-model="form.nickname" placeholder="请输入发件人名称" />
+        </el-form-item>
+        <el-form-item label="模板内容" prop="content">
+          <el-input type="textarea" v-model="form.content" placeholder="请输入模板内容" />
+        </el-form-item>
+        <el-form-item label="类型" prop="type">
+          <el-select v-model="form.type" placeholder="请选择类型">
+            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
+                       :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开启状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                      :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 对话框(发送站内信) -->
+    <el-dialog title="发送站内信" :visible.sync="sendNotifyOpen" width="500px" append-to-body>
+      <el-form ref="sendNotifyForm" :model="sendNotifyForm" :rules="sendNotifyRules" label-width="140px">
+        <el-form-item label="模板内容" prop="content">
+          <el-input v-model="sendNotifyForm.content" type="textarea" placeholder="请输入模板内容" readonly />
+        </el-form-item>
+        <el-form-item label="接收人" prop="userId">
+          <el-select v-model="sendNotifyForm.userId" placeholder="请输入接收人" clearable style="width: 100%">
+            <el-option v-for="item in users" :key="parseInt(item.id)" :label="item.nickname" :value="parseInt(item.id)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-for="param in sendNotifyForm.params" :key="param" :label="'参数 {' + param + '}'" :prop="'templateParams.' + param">
+          <el-input v-model="sendNotifyForm.templateParams[param]" :placeholder="'请输入 ' + param + ' 参数'" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitSendNotifyForm">确 定</el-button>
+        <el-button @click="cancelSendNotify">取 消</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { createNotifyTemplate, updateNotifyTemplate, deleteNotifyTemplate, getNotifyTemplate, getNotifyTemplatePage,
+  sendNotify } from "@/api/system/notify/template";
+import {listSimpleUsers} from "@/api/system/user";
+import {CommonStatusEnum} from "@/utils/constants";
+
+export default {
+  name: "SystemNotifyTemplate",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 短信模板列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        status: null,
+        code: null,
+        title: null,
+        createTime: []
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
+        code: [{ required: true, message: "模版编码不能为空", trigger: "blur" }],
+        nickname: [{ required: true, message: "发件人名称不能为空", trigger: "blur" }],
+        content: [{ required: true, message: "模版内容不能为空", trigger: "blur" }],
+        type: [{ required: true, message: "类型不能为空", trigger: "change" }],
+        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
+      },
+      // 用户列表
+      users: [],
+      // 发送短信
+      sendNotifyOpen: false,
+      sendNotifyForm: {
+        params: [], // 模板的参数列表
+      },
+      sendNotifyRules: {
+        userId: [{ required: true, message: "接收人不能为空", trigger: "blur" }],
+        templateCode: [{ required: true, message: "模版编码不能为空", trigger: "blur" }],
+        templateParams: { }
+      }
+    };
+  },
+  created() {
+    this.getList();
+    // 获得用户列表
+    listSimpleUsers().then(response => {
+      this.users = response.data;
+    })
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getNotifyTemplatePage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        name: undefined,
+        code: undefined,
+        nickname: undefined,
+        content: undefined,
+        type: undefined,
+        params: undefined,
+        status: CommonStatusEnum.ENABLE,
+        remark: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加站内信模板";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getNotifyTemplate(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改站内信模板";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateNotifyTemplate(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createNotifyTemplate(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除站内信模板编号为"' + id + '"的数据项?').then(function() {
+        return deleteNotifyTemplate(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 发送站内信按钮 */
+    handleSendNotify(row) {
+      this.resetSendNotify(row);
+      // 设置参数
+      this.sendNotifyForm.content = row.content;
+      this.sendNotifyForm.params = row.params;
+      this.sendNotifyForm.templateCode = row.code;
+      this.sendNotifyForm.templateParams = row.params.reduce(function(obj, item) {
+        obj[item] = undefined;
+        return obj;
+      }, {});
+      // 根据 row 重置 rules
+      this.sendNotifyRules.templateParams = row.params.reduce(function(obj, item) {
+        obj[item] = { required: true, message: '参数 ' + item + " 不能为空", trigger: "change" };
+        return obj;
+      }, {});
+      // 设置打开
+      this.sendNotifyOpen = true;
+    },
+    /** 重置发送站内信的表单 */
+    resetSendNotify() {
+      // 根据 row 重置表单
+      this.sendNotifyForm = {
+        content: undefined,
+        params: undefined,
+        userId: undefined,
+        templateCode: undefined,
+        templateParams: {}
+      };
+      this.resetForm("sendNotifyForm");
+    },
+    /** 取消发送站内信 */
+    cancelSendNotify() {
+      this.sendNotifyOpen = false;
+      this.resetSendNotify();
+    },
+    /** 提交按钮 */
+    submitSendNotifyForm() {
+      this.$refs["sendNotifyForm"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 添加的提交
+        sendNotify(this.sendNotifyForm).then(response => {
+          this.$modal.msgSuccess("提交发送成功！发送结果，见发送日志编号：" + response.data);
+          this.sendNotifyOpen = false;
+        });
+      });
+    },
+  }
+};
+</script>

src/views/system/oauth2/client/index.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="OAuth 2.0（SSO 单点登录)" url="https://doc.iocoder.cn/oauth2/" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="应用名" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入应用名" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                       :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:oauth2-client:create']">新增</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="客户端编号" align="center" prop="clientId" />
+      <el-table-column label="客户端密钥" align="center" prop="secret" />
+      <el-table-column label="应用名" align="center" prop="name" />
+      <el-table-column label="应用图标" align="center" prop="logo">
+        <template v-slot="scope">
+          <img width="40px" height="40px" :src="scope.row.logo">
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="访问令牌的有效期" align="center" prop="accessTokenValiditySeconds">
+        <template v-slot="scope">{{ scope.row.accessTokenValiditySeconds }} 秒</template>
+      </el-table-column>
+      <el-table-column label="刷新令牌的有效期" align="center" prop="refreshTokenValiditySeconds">
+        <template v-slot="scope">{{ scope.row.refreshTokenValiditySeconds }} 秒</template>
+      </el-table-column>
+      <el-table-column label="授权类型" align="center" prop="authorizedGrantTypes">
+        <template v-slot="scope">
+          <el-tag :disable-transitions="true" :key="index" v-for="(authorizedGrantType, index) in scope.row.authorizedGrantTypes" :index="index">
+            {{ authorizedGrantType }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:oauth2-client:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:oauth2-client:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="160px">
+        <el-form-item label="客户端编号" prop="secret">
+          <el-input v-model="form.clientId" placeholder="请输入客户端编号" />
+        </el-form-item>
+        <el-form-item label="客户端密钥" prop="secret">
+          <el-input v-model="form.secret" placeholder="请输入客户端密钥" />
+        </el-form-item>
+        <el-form-item label="应用名" prop="name">
+          <el-input v-model="form.name" placeholder="请输入应用名" />
+        </el-form-item>
+        <el-form-item label="应用图标">
+          <imageUpload v-model="form.logo" :limit="1"/>
+        </el-form-item>
+        <el-form-item label="应用描述">
+          <el-input type="textarea" v-model="form.description" placeholder="请输入应用名" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                      :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="访问令牌的有效期" prop="accessTokenValiditySeconds">
+          <el-input-number v-model="form.accessTokenValiditySeconds" placeholder="单位：秒" />
+        </el-form-item>
+        <el-form-item label="刷新令牌的有效期" prop="refreshTokenValiditySeconds">
+          <el-input-number v-model="form.refreshTokenValiditySeconds" placeholder="单位：秒" />
+        </el-form-item>
+        <el-form-item label="授权类型" prop="authorizedGrantTypes">
+          <el-select v-model="form.authorizedGrantTypes" multiple filterable placeholder="请输入授权类型" style="width: 500px" >
+            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_OAUTH2_GRANT_TYPE)"
+                       :key="dict.value" :label="dict.label" :value="dict.value"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="授权范围" prop="scopes">
+          <el-select v-model="form.scopes" multiple filterable allow-create placeholder="请输入授权范围" style="width: 500px" >
+            <el-option v-for="scope in form.scopes" :key="scope" :label="scope" :value="scope"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="自动授权范围" prop="autoApproveScopes">
+          <el-select v-model="form.autoApproveScopes" multiple filterable placeholder="请输入授权范围" style="width: 500px" >
+            <el-option v-for="scope in form.scopes" :key="scope" :label="scope" :value="scope"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="可重定向的 URI 地址" prop="redirectUris">
+          <el-select v-model="form.redirectUris" multiple filterable allow-create placeholder="请输入可重定向的 URI 地址" style="width: 500px" >
+            <el-option v-for="redirectUri in form.redirectUris" :key="redirectUri" :label="redirectUri" :value="redirectUri"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="权限" prop="authorities">
+          <el-select v-model="form.authorities" multiple filterable allow-create placeholder="请输入权限" style="width: 500px" >
+            <el-option v-for="authority in form.authorities" :key="authority" :label="authority" :value="authority"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="资源" prop="resourceIds">
+          <el-select v-model="form.resourceIds" multiple filterable allow-create placeholder="请输入资源" style="width: 500px" >
+            <el-option v-for="resourceId in form.resourceIds" :key="resourceId" :label="resourceId" :value="resourceId"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="附加信息" prop="additionalInformation">
+          <el-input type="textarea" v-model="form.additionalInformation" placeholder="请输入附加信息，JSON 格式数据" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createOAuth2Client, updateOAuth2Client, deleteOAuth2Client, getOAuth2Client, getOAuth2ClientPage } from "@/api/system/oauth2/oauth2Client";
+import ImageUpload from '@/components/ImageUpload';
+import Editor from '@/components/Editor';
+import {CommonStatusEnum} from "@/utils/constants";
+import FileUpload from "@/components/FileUpload";
+
+export default {
+  name: "SystemOAuth2Client",
+  components: {
+    FileUpload,
+    ImageUpload,
+    Editor,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // OAuth2 客户端列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        status: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        clientId: [{ required: true, message: "客户端编号不能为空", trigger: "blur" }],
+        secret: [{ required: true, message: "客户端密钥不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "应用名不能为空", trigger: "blur" }],
+        logo: [{ required: true, message: "应用图标不能为空", trigger: "blur" }],
+        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
+        accessTokenValiditySeconds: [{ required: true, message: "访问令牌的有效期不能为空", trigger: "blur" }],
+        refreshTokenValiditySeconds: [{ required: true, message: "刷新令牌的有效期不能为空", trigger: "blur" }],
+        redirectUris: [{ required: true, message: "可重定向的 URI 地址不能为空", trigger: "blur" }],
+        authorizedGrantTypes: [{ required: true, message: "授权类型不能为空", trigger: "blur" }],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getOAuth2ClientPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        clientId: undefined,
+        secret: undefined,
+        name: undefined,
+        logo: undefined,
+        description: undefined,
+        status: CommonStatusEnum.ENABLE,
+        accessTokenValiditySeconds: 30 * 60,
+        refreshTokenValiditySeconds: 30 * 24 * 60,
+        redirectUris: [],
+        authorizedGrantTypes: [],
+        scopes: [],
+        autoApproveScopes: [],
+        authorities: [],
+        resourceIds: [],
+        additionalInformation: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加 OAuth2 客户端";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getOAuth2Client(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改 OAuth2 客户端";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateOAuth2Client(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createOAuth2Client(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除客户端编号为"' + row.clientId + '"的数据项?').then(function() {
+          return deleteOAuth2Client(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/system/oauth2/token/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="OAuth 2.0（SSO 单点登录)" url="https://doc.iocoder.cn/oauth2/" />
+    <doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
+      <el-form-item label="用户编号" prop="userId">
+        <el-input v-model="queryParams.userId" placeholder="请输入用户编号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="客户端编号" prop="clientId">
+        <el-input v-model="queryParams.clientId" placeholder="请输入客户端编号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="用户类型" prop="userType">
+        <el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.USER_TYPE)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+
+    </el-form>
+    <el-table v-loading="loading" :data="list" style="width: 100%;">
+      <el-table-column label="访问令牌" align="center" prop="accessToken" width="300" />
+      <el-table-column label="刷新令牌" align="center" prop="refreshToken" width="300" />
+      <el-table-column label="用户编号" align="center" prop="userId" />
+      <el-table-column label="用户类型" align="center" prop="userType" width="100">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="过期时间" align="center" prop="expiresTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.expiresTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleForceLogout(scope.row)"
+            v-hasPermi="['system:oauth2-token:delete']">强退</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+  </div>
+</template>
+
+<script>
+import { getAccessTokenPage, deleteAccessToken } from "@/api/system/oauth2/oauth2Token";
+
+export default {
+  name: "SystemTokenClient",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      list: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        userId: undefined,
+        userType: undefined,
+        clientId: undefined
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询登录日志列表 */
+    getList() {
+      this.loading = true;
+      getAccessTokenPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 强退按钮操作 */
+    handleForceLogout(row) {
+      this.$modal.confirm('是否确认强退令牌为"' + row.accessToken + '"的数据项?').then(function() {
+          return deleteAccessToken(row.accessToken);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("强退成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>
+

src/views/system/operatelog/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="系统模块" prop="module">
+        <el-input v-model="queryParams.module" placeholder="请输入系统模块" clearable style="width: 240px;"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="操作人员" prop="userNickname">
+        <el-input v-model="queryParams.userNickname" placeholder="请输入操作人员" clearable style="width: 240px;"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="操作类型" clearable style="width: 240px">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_OPERATE_TYPE)" :key="parseInt(dict.value)"
+                     :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.success" placeholder="操作状态" clearable style="width: 240px">
+          <el-option :key="true" label="成功" :value="true"/>
+          <el-option :key="false" label="失败" :value="false"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="操作时间" prop="startTime">
+        <el-date-picker v-model="queryParams.startTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:operate-log:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="日志编号" align="center" prop="id" />
+      <el-table-column label="操作模块" align="center" prop="module" />
+      <el-table-column label="操作名" align="center" prop="name" width="180" />
+      <el-table-column label="操作类型" align="center" prop="type">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作人" align="center" prop="userNickname" />
+      <el-table-column label="操作结果" align="center" prop="status">
+        <template v-slot="scope">
+          <span>{{ scope.row.resultCode === 0 ? '成功' : '失败' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作日期" align="center" prop="startTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.startTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="执行时长" align="center" prop="startTime">
+        <template v-slot="scope">
+          <span>{{ scope.row.duration }}  ms</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row,scope.index)"
+                     v-hasPermi="['system:operate-log:query']">详细</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList" />
+
+    <!-- 操作日志详细 -->
+    <el-dialog title="访问日志详细" :visible.sync="open" width="700px" append-to-body>
+      <el-form ref="form" :model="form" label-width="100px" size="mini">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="日志主键：">{{ form.id }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="链路追踪：">{{ form.traceId }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="用户信息：">{{ form.userId }} | {{ form.userNickname }} | {{ form.userIp }} | {{ form.userAgent}} </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="操作信息：">
+              {{ form.module }} | {{ form.name }}
+              <dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="form.type"/>
+              <br /> {{ form.content }}
+              <br /> {{ form.exts }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="请求信息：">{{ form.requestMethod }} | {{ form.requestUrl }} </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="方法名：">{{ form.javaMethod }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="方法参数：">{{ form.javaMethodArgs }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="开始时间：">
+              {{ parseTime(form.startTime) }} | {{ form.duration }} ms
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="操作结果：">
+              <div v-if="form.resultCode === 0">正常 | {{ form.resultData}} </div>
+              <div v-else-if="form.resultCode > 0">失败 | {{ form.resultCode }} || {{ form.resultMsg}}</div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="open = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listOperateLog, exportOperateLog } from "@/api/system/operatelog";
+
+export default {
+  name: "SystemOperateLog",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      list: [],
+      // 是否显示弹出层
+      open: false,
+      // 类型数据字典
+      typeOptions: [],
+      // 表单参数
+      form: {},
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        module: undefined,
+        userNickname: undefined,
+        businessType: undefined,
+        status: undefined,
+        startTime: []
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询登录日志 */
+    getList() {
+      this.loading = true;
+      listOperateLog(this.queryParams).then( response => {
+          this.list = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 详细按钮操作 */
+    handleView(row) {
+      this.open = true;
+      this.form = row;
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.$modal.confirm('是否确认导出所有操作日志数据项?').then(() => {
+          // 处理查询参数
+          let params = {...this.queryParams};
+          params.pageNo = undefined;
+          params.pageSize = undefined;
+          this.exportLoading = true;
+          return exportOperateLog(params);
+        }).then(response => {
+          this.$download.excel(response, '操作日志.xls');
+          this.exportLoading = false;
+      }).catch(() => {});
+    }
+  }
+};
+</script>
+

src/views/system/post/index.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="岗位编码" prop="code">
+        <el-input v-model="queryParams.code" placeholder="请输入岗位编码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="岗位名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入岗位名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="岗位状态" clearable>
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:post:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:post:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="postList">
+      <el-table-column label="岗位编号" align="center" prop="id" />
+      <el-table-column label="岗位编码" align="center" prop="code" />
+      <el-table-column label="岗位名称" align="center" prop="name" />
+      <el-table-column label="岗位排序" align="center" prop="sort" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:post:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:post:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 添加或修改岗位对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="岗位名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入岗位名称" />
+        </el-form-item>
+        <el-form-item label="岗位编码" prop="code">
+          <el-input v-model="form.code" placeholder="请输入编码名称" />
+        </el-form-item>
+        <el-form-item label="岗位顺序" prop="sort">
+          <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="岗位状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+              {{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listPost, getPost, delPost, addPost, updatePost, exportPost } from "@/api/system/post";
+
+import {CommonStatusEnum} from '@/utils/constants'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+
+export default {
+  name: "SystemPost",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 岗位表格数据
+      postList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        code: undefined,
+        name: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "岗位名称不能为空", trigger: "blur" }
+        ],
+        code: [
+          { required: true, message: "岗位编码不能为空", trigger: "blur" }
+        ],
+        sort: [
+          { required: true, message: "岗位顺序不能为空", trigger: "blur" }
+        ]
+      },
+
+      // 枚举
+      CommonStatusEnum: CommonStatusEnum,
+      // 数据字典
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询岗位列表 */
+    getList() {
+      this.loading = true;
+      listPost(this.queryParams).then(response => {
+        this.postList = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        code: undefined,
+        name: undefined,
+        sort: 0,
+        status: CommonStatusEnum.ENABLE,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加岗位";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id
+      getPost(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改岗位";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updatePost(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addPost(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id;
+      this.$modal.confirm('是否确认删除岗位编号为"' + ids + '"的数据项?').then(function() {
+          return delPost(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$modal.confirm('是否确认导出所有岗位数据项?').then(() => {
+          this.exportLoading = true;
+          return exportPost(queryParams);
+        }).then(response => {
+          this.$download.excel(response, '岗位数据.xls');
+          this.exportLoading = false;
+      }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/system/role/index.vue

@@ -0,0 +1,495 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
+    <doc-alert title="数据权限" url="https://doc.iocoder.cn/data-permission" />
+    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
+      <el-form-item label="角色名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入角色名称" clearable size="small" style="width: 240px"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="角色标识" prop="code">
+        <el-input v-model="queryParams.code" placeholder="请输入角色标识" clearable size="small" style="width: 240px"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="角色状态" clearable size="small" style="width: 240px">
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:role:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:role:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="roleList">
+      <el-table-column label="角色编号" prop="id" width="120" />
+      <el-table-column label="角色名称" prop="name" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="角色标识" prop="code" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="角色类型" prop="type" width="80">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_ROLE_TYPE" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="显示顺序" prop="sort" width="100" />
+      <el-table-column label="状态" align="center" width="100">
+        <template v-slot="scope">
+          <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:role:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleMenu(scope.row)"
+                     v-hasPermi="['system:permission:assign-role-menu']">菜单权限</el-button>
+          <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleDataScope(scope.row)"
+                     v-hasPermi="['system:permission:assign-role-data-scope']">数据权限</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:role:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 添加或修改角色配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="角色名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入角色名称" />
+        </el-form-item>
+        <el-form-item label="角色标识" prop="code">
+          <el-input v-model="form.code" placeholder="请输入角色标识" />
+        </el-form-item>
+        <el-form-item label="角色顺序" prop="sort">
+          <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 分配角色的数据权限对话框 -->
+    <el-dialog title="分配数据权限" :visible.sync="openDataScope" width="500px" append-to-body>
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="角色名称">
+          <el-input v-model="form.name" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="角色标识">
+          <el-input v-model="form.code" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="权限范围">
+          <el-select v-model="form.dataScope">
+            <el-option
+              v-for="item in dataScopeDictDatas"
+              :key="parseInt(item.value)"
+              :label="item.label"
+              :value="parseInt(item.value)"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据权限" v-show="form.dataScope === SysDataScopeEnum.DEPT_CUSTOM">
+          <el-checkbox :checked="!form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动(选中父节点，自动选择子节点)</el-checkbox>
+          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
+          <el-tree
+            class="tree-border"
+            :data="deptOptions"
+            show-checkbox
+            default-expand-all
+            ref="dept"
+            node-key="id"
+            :check-strictly="form.deptCheckStrictly"
+            empty-text="加载中，请稍后"
+            :props="defaultProps"
+          ></el-tree>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitDataScope">确 定</el-button>
+        <el-button @click="cancelDataScope">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 分配角色的菜单权限对话框 -->
+    <el-dialog :title="title" :visible.sync="openMenu" width="500px" append-to-body>
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="角色名称">
+          <el-input v-model="form.name" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="角色标识">
+          <el-input v-model="form.code" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="菜单权限">
+          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+          <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id"
+              :check-strictly="form.menuCheckStrictly" empty-text="加载中，请稍后" :props="defaultProps"></el-tree>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitMenu">确 定</el-button>
+        <el-button @click="cancelMenu">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  addRole,
+  changeRoleStatus,
+  delRole,
+  exportRole,
+  getRole,
+  listRole,
+  updateRole
+} from "@/api/system/role";
+import {listSimpleMenus} from "@/api/system/menu";
+import {assignRoleMenu, listRoleMenus, assignRoleDataScope} from "@/api/system/permission";
+import {listSimpleDepts} from "@/api/system/dept";
+import {CommonStatusEnum, SystemDataScopeEnum} from "@/utils/constants";
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+
+export default {
+  name: "SystemRole",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 角色表格数据
+      roleList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否显示弹出层（数据权限）
+      openDataScope: false,
+      // 是否显示弹出层（菜单权限）
+      openMenu: false,
+      menuExpand: false,
+      menuNodeAll: false,
+      deptExpand: true,
+      deptNodeAll: false,
+      // 菜单列表
+      menuOptions: [],
+      // 部门列表
+      deptOptions: [], // 部门属性结构
+      depts: [], // 部门列表
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: undefined,
+        code: undefined,
+        status: undefined,
+        createTime: []
+      },
+      // 表单参数
+      form: {},
+      defaultProps: {
+        label: "name",
+        children: "children"
+      },
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "角色名称不能为空", trigger: "blur" }
+        ],
+        code: [
+          { required: true, message: "角色标识不能为空", trigger: "blur" }
+        ],
+        sort: [
+          { required: true, message: "角色顺序不能为空", trigger: "blur" }
+        ]
+      },
+
+      // 枚举
+      SysCommonStatusEnum: CommonStatusEnum,
+      SysDataScopeEnum: SystemDataScopeEnum,
+      // 数据字典
+      roleTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_ROLE_TYPE),
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
+      dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE)
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询角色列表 */
+    getList() {
+      this.loading = true;
+      listRole(this.queryParams).then(
+        response => {
+          this.roleList = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 角色状态修改
+    handleStatusChange(row) {
+      // 此时，row 已经变成目标状态了，所以可以直接提交请求和提示
+      let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
+      this.$modal.confirm('确认要"' + text + '""' + row.name + '"角色吗?').then(function() {
+          return changeRoleStatus(row.id, row.status);
+        }).then(() => {
+          this.$modal.msgSuccess(text + "成功");
+        }).catch(function() {
+          // 异常时，需要将 row.status 状态重置回之前的
+          row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
+              : CommonStatusEnum.ENABLE;
+        });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 取消按钮（数据权限）
+    cancelDataScope() {
+      this.openDataScope = false;
+      this.reset();
+    },
+    // 取消按钮（菜单权限）
+    cancelMenu() {
+      this.openMenu = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      if (this.$refs.menu !== undefined) {
+        this.$refs.menu.setCheckedKeys([]);
+      }
+      this.menuExpand = false;
+      this.menuNodeAll = false;
+      this.deptExpand = true;
+      this.deptNodeAll = false;
+      this.form = {
+        id: undefined,
+        name: undefined,
+        code: undefined,
+        sort: 0,
+        deptIds: [],
+        menuIds: [],
+        dataScope: undefined,
+        deptCheckStrictly: false,
+        menuCheckStrictly: true,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      if (type === 'menu') {
+        let treeList = this.menuOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      } else if (type === 'dept') {
+        let treeList = this.deptOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value, type) {
+      if (type === 'menu') {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
+      } else if (type === 'dept') {
+        // this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+        this.$refs.dept.setCheckedNodes(value ? this.depts: []);
+      }
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect(value, type) {
+      if (type === 'menu') {
+        this.form.menuCheckStrictly = value;
+      } else if (type === 'dept') {
+        this.form.deptCheckStrictly = !value;
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加角色";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id
+      getRole(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改角色";
+      });
+    },
+    /** 分配菜单权限操作 */
+    handleMenu(row) {
+      this.reset();
+      const id = row.id
+      // 处理了 form 的角色 name 和 code 的展示
+      this.form.id = id;
+      this.form.name = row.name;
+      this.form.code = row.code;
+      // 打开弹窗
+      this.openMenu = true;
+      // 获得菜单列表
+      listSimpleMenus().then(response => {
+        // 处理 menuOptions 参数
+        this.menuOptions = [];
+        this.menuOptions.push(...this.handleTree(response.data, "id"));
+        // 获取角色拥有的菜单权限
+        listRoleMenus(id).then(response => {
+          // 设置为严格，避免设置父节点自动选中子节点，解决半选中问题
+          this.form.menuCheckStrictly = true
+          // 设置选中
+          this.$refs.menu.setCheckedKeys(response.data);
+          // 设置为非严格，继续使用半选中
+          this.form.menuCheckStrictly = false
+        })
+      });
+
+    },
+    /** 分配数据权限操作 */
+    handleDataScope(row) {
+      this.reset();
+      // 处理了 form 的角色 name 和 code 的展示
+      this.form.id = row.id;
+      this.form.name = row.name;
+      this.form.code = row.code;
+      // 打开弹窗
+      this.openDataScope = true;
+      // 获得部门列表
+      listSimpleDepts().then(response => {
+        // 处理 deptOptions 参数
+        this.deptOptions = [];
+        this.deptOptions.push(...this.handleTree(response.data, "id"));
+        this.depts = response.data;
+        // this.deptIds = response.data.map(x => x.id);
+        // 获得角色拥有的数据权限
+        getRole(row.id).then(response => {
+          this.form.dataScope = response.data.dataScope;
+          this.$refs.dept.setCheckedKeys(response.data.dataScopeDeptIds, false);
+        });
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updateRole(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addRole(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 提交按钮（数据权限） */
+    submitDataScope: function() {
+      if (this.form.id !== undefined) {
+        assignRoleDataScope({
+          roleId: this.form.id,
+          dataScope: this.form.dataScope,
+          dataScopeDeptIds: this.form.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM ? [] :
+              this.$refs.dept.getCheckedKeys()
+        }).then(response => {
+          this.$modal.msgSuccess("修改成功");
+          this.openDataScope = false;
+          this.getList();
+        });
+      }
+    },
+    /** 提交按钮（菜单权限） */
+    submitMenu: function() {
+      if (this.form.id !== undefined) {
+        assignRoleMenu({
+          roleId: this.form.id,
+          menuIds: [...this.$refs.menu.getCheckedKeys(), ...this.$refs.menu.getHalfCheckedKeys()]
+        }).then(response => {
+          this.$modal.msgSuccess("修改成功");
+          this.openMenu = false;
+          this.getList();
+        });
+      }
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除角色编号为"' + ids + '"的数据项?').then(function() {
+          return delRole(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$modal.confirm('是否确认导出所有角色数据项?').then(function() {
+          this.exportLoading = true;
+          return exportRole(queryParams);
+        }).then(response => {
+          this.$download.excel(response, '角色数据.xls');
+          this.exportLoading = false;
+      }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/system/sensitiveWord/index.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="敏感词" url="https://doc.iocoder.cn/sensitive-word" />
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="敏感词" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入敏感词" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="标签" prop="tag">
+        <el-select v-model="queryParams.tag" placeholder="请选择标签" clearable @keyup.enter.native="handleQuery">
+          <el-option v-for="tag in tags" :key="tag" :label="tag" :value="tag"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择启用状态" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:sensitive-word:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+                   :loading="exportLoading" v-hasPermi="['system:sensitive-word:export']">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="el-icon-document-checked" size="mini" @click="handleTest">测试</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id"/>
+      <el-table-column label="敏感词" align="center" prop="name"/>
+      <el-table-column label="状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="描述" align="center" prop="description"/>
+      <el-table-column label="标签" align="center" prop="tags">
+        <template v-slot="scope">
+          <el-tag :disable-transitions="true" :key="index" v-for="(tag, index) in scope.row.tags" :index="index">
+            {{ tag }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:sensitive-word:update']">修改
+          </el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:sensitive-word:delete']">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="敏感词" prop="name">
+          <el-input v-model="form.name" placeholder="请输入敏感词"/>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                      :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="description">
+          <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="标签" prop="tags">
+          <el-select v-model="form.tags" multiple filterable allow-create placeholder="请选择文章标签" style="width: 380px" >
+            <el-option v-for="tag in tags" :key="tag" :label="tag" :value="tag"/>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 对话框(测试敏感词) -->
+    <el-dialog title="检测敏感词" :visible.sync="testOpen" width="500px" append-to-body>
+      <el-form ref="testForm" :model="testForm" :rules="testRules" label-width="80px">
+        <el-form-item label="文本" prop="text">
+          <el-input type="textarea" v-model="testForm.text" placeholder="请输入测试文本"/>
+        </el-form-item>
+        <el-form-item label="标签" prop="tags">
+          <el-select v-model="testForm.tags" multiple placeholder="请选择标签" style="width: 380px" >
+            <el-option v-for="tag in tags" :key="tag" :label="tag" :value="tag"/>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitTestForm">检 测</el-button>
+        <el-button @click="cancelTest">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createSensitiveWord, updateSensitiveWord, deleteSensitiveWord, getSensitiveWord, getSensitiveWordPage,
+  exportSensitiveWordExcel, validateText, getSensitiveWordTags} from "@/api/system/sensitiveWord";
+import {CommonStatusEnum} from "@/utils/constants";
+
+export default {
+  name: "SystemSensitiveWord",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 敏感词列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      testOpen: false,
+      tags: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        tag: null,
+        createTime: []
+      },
+      // 表单参数
+      form: {},
+      // 表单参数
+      testForm: {},
+      // 表单校验
+      rules: {
+        name: [{required: true, message: "敏感词不能为空", trigger: "blur"}],
+        tags: [{required: true, message: "标签不能为空", trigger: "blur"}]
+      },
+      testRules: {
+        text: [{required: true, message: "测试文本不能为空", trigger: 'blur'}],
+      }
+    };
+  },
+  created() {
+    this.getTags();
+    this.getList();
+  },
+  methods: {
+    /** 初始化标签select*/
+    getTags(){
+      getSensitiveWordTags().then(response => {
+        this.tags = response.data;
+      });
+    },
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getSensitiveWordPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 取消按钮 */
+    cancelTest() {
+      this.resetTest();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        name: undefined,
+        description: undefined,
+        tags: undefined,
+        status: CommonStatusEnum.ENABLE
+      };
+      this.resetForm("form");
+    },
+    /** 表单重置 */
+    resetTest() {
+      this.testForm = {
+        text: undefined,
+        tags: undefined
+      };
+      this.resetForm("testForm");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加敏感词";
+    },
+    /** 测试敏感词按钮操作 */
+    handleTest() {
+      this.resetTest();
+      this.testOpen = true;
+      this.titleTest = "检测文本是否含有敏感词";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getSensitiveWord(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改敏感词";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateSensitiveWord(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          }).catch(err => {});
+          return;
+        }
+        // 添加的提交
+        createSensitiveWord(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        }).catch(err => {});
+      });
+    },
+    /** 测试文本2提交按钮 */
+    submitTestForm() {
+      this.$refs["testForm"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        validateText(this.testForm).then(response => {
+          if (response.data.length === 0) {
+            this.$modal.msgSuccess("不包含敏感词！");
+            return;
+          }
+          this.$modal.msgWarning("包含敏感词：" + response.data.join(', '));
+        })
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除敏感词编号为"' + id + '"的数据项?').then(function () {
+        return deleteSensitiveWord(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      // 执行导出
+      this.$modal.confirm('是否确认导出所有敏感词数据项?').then(() => {
+        this.exportLoading = true;
+        return exportSensitiveWordExcel(params);
+      }).then(response => {
+        this.$download.excel(response, '${table.classComment}.xls');
+        this.exportLoading = false;
+      }).catch(() => {
+      });
+    },
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  .el-tag+.el-tag {
+    margin-left: 10px;
+  }
+</style>

src/views/system/sms/channel/index.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="短信配置" url="https://doc.iocoder.cn/sms/" />
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="短信签名" prop="signature">
+        <el-input v-model="queryParams.signature" placeholder="请输入短信签名" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="启用状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择启用状态" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:sms-channel:create']">新增</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="短信签名" align="center" prop="signature" />
+      <el-table-column label="渠道编码" align="center" prop="code">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.code"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="启用状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="短信 API 的账号" align="center" prop="apiKey" />
+      <el-table-column label="短信 API 的密钥" align="center" prop="apiSecret" />
+      <el-table-column label="短信发送回调 URL" align="center" prop="callbackUrl" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:sms-channel:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:sms-channel:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
+        <el-form-item label="短信签名" prop="signature">
+          <el-input v-model="form.signature" placeholder="请输入短信签名" />
+        </el-form-item>
+        <el-form-item label="渠道编码" prop="code">
+          <el-select v-model="form.code" placeholder="请选择渠道编码" clearable>
+            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE)"
+                       :key="dict.value" :label="dict.label" :value="dict.value"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="启用状态">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                      :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+        <el-form-item label="短信 API 的账号" prop="apiKey">
+          <el-input v-model="form.apiKey" placeholder="请输入短信 API 的账号" />
+        </el-form-item>
+        <el-form-item label="短信 API 的密钥" prop="apiSecret">
+          <el-input v-model="form.apiSecret" placeholder="请输入短信 API 的密钥" />
+        </el-form-item>
+        <el-form-item label="短信发送回调 URL" prop="callbackUrl">
+          <el-input v-model="form.callbackUrl" placeholder="请输入短信发送回调 URL" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createSmsChannel, updateSmsChannel, deleteSmsChannel, getSmsChannel, getSmsChannelPage } from "@/api/system/sms/smsChannel";
+
+export default {
+  name: "SystemSmsChannel",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 短信渠道列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        signature: null,
+        status: null,
+        createTime: []
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        signature: [{ required: true, message: "短信签名不能为空", trigger: "blur" }],
+        code: [{ required: true, message: "渠道编码不能为空", trigger: "blur" }],
+        status: [{ required: true, message: "启用状态不能为空", trigger: "blur" }],
+        apiKey: [{ required: true, message: "短信 API 的账号不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getSmsChannelPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        signature: undefined,
+        code: undefined,
+        status: undefined,
+        remark: undefined,
+        apiKey: undefined,
+        apiSecret: undefined,
+        callbackUrl: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加短信渠道";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getSmsChannel(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改短信渠道";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateSmsChannel(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createSmsChannel(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除短信渠道编号为"' + row.id + '"的数据项?').then(function() {
+        return deleteSmsChannel(row.id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/system/sms/log/index.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="短信配置" url="https://doc.iocoder.cn/sms/" />
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
+      <el-form-item label="手机号" prop="mobile">
+        <el-input v-model="queryParams.mobile" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="短信渠道" prop="channelId">
+        <el-select v-model="queryParams.channelId" placeholder="请选择短信渠道" clearable>
+          <el-option v-for="channel in channelOptions"
+                     :key="channel.id" :value="channel.id"
+                     :label="channel.signature + '【' + getDictDataLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code) + '】'" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="模板编号" prop="templateId">
+        <el-input v-model="queryParams.templateId" placeholder="请输入模板编号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="发送状态" prop="sendStatus">
+        <el-select v-model="queryParams.sendStatus" placeholder="请选择发送状态" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_SMS_SEND_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="发送时间" prop="sendTime">
+        <el-date-picker v-model="queryParams.sendTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item label="接收状态" prop="receiveStatus">
+        <el-select v-model="queryParams.receiveStatus" placeholder="请选择接收状态" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="接收时间" prop="receiveTime">
+        <el-date-picker v-model="queryParams.receiveTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:sms-log:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="手机号" align="center" prop="mobile" width="120">
+        <template v-slot="scope">
+          <div>{{ scope.row.mobile }}</div>
+          <div v-if="scope.row.userType && scope.row.userId">
+            <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType"/>{{ '(' + scope.row.userId + ')' }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="短信内容" align="center" prop="templateContent" width="300" />
+      <el-table-column label="发送状态" align="center" width="180">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS" :value="scope.row.sendStatus"/>
+          <div>{{ parseTime(scope.row.sendTime) }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="接收状态" align="center" width="180">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS" :value="scope.row.receiveStatus"/>
+          <div>{{ parseTime(scope.row.receiveTime) }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="短信渠道" align="center" width="120">
+        <template v-slot="scope">
+          <div>{{ formatChannelSignature(scope.row.channelId) }}</div>
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.channelCode"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="模板编号" align="center" prop="templateId" />
+      <el-table-column label="短信类型" align="center" prop="templateType">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="scope.row.templateType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
+                     v-hasPermi="['system:sms-log:query']">详细</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 短信日志详细 -->
+    <el-dialog title="短信日志详细" :visible.sync="open" width="700px" append-to-body>
+      <el-form ref="form" :model="form" label-width="140px" size="mini">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="日志主键：">{{ form.id }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="短信渠道：">
+              {{formatChannelSignature(form.channelId) }}
+              <dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="form.channelCode"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="短信模板：">
+              {{ form.templateId }} | {{ form.templateCode }}
+              <dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="form.templateType"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="API 的模板编号：">{{ form.apiTemplateId }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="用户信息：">{{ form.mobile }}
+              <span v-if="form.userType && form.userId">
+                <dict-tag :type="DICT_TYPE.USER_TYPE" :value="form.userType"/>({{ form.userId }})
+              </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="短信内容：">{{ form.templateContent }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="短信参数：">{{ form.templateParams }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="创建时间：">{{ parseTime(form.createTime) }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="发送状态：">
+              <dict-tag :type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS" :value="form.sendStatus"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="发送时间：">{{ parseTime(form.sendTime) }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="API 发送结果：">{{ form.apiSendCode }} | {{ form.apiSendMsg }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="API 短信编号：">{{ form.apiSerialNo }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="API 请求编号：">{{ form.apiRequestId }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="接收状态：">
+              <dict-tag :type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS" :value="form.receiveStatus"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="接收时间：">{{ parseTime(form.receiveTime) }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="API 接收结果：">{{ form.apiReceiveCode }} | {{ form.apiReceiveMsg }}
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="open = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getSmsLogPage, exportSmsLogExcel } from "@/api/system/sms/smsLog";
+import {  getSimpleSmsChannels } from "@/api/system/sms/smsChannel";
+
+export default {
+  name: "SystemSmsLog",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 短信日志列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 表单参数
+      form: {},
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        channelId: null,
+        templateId: null,
+        mobile: null,
+        sendStatus: null,
+        receiveStatus: null,
+        sendTime: [],
+        receiveTime: []
+      },
+      // 短信渠道
+      channelOptions: [],
+    };
+  },
+  created() {
+    this.getList();
+    // 获得短信渠道
+    getSimpleSmsChannels().then(response => {
+      this.channelOptions = response.data;
+    })
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getSmsLogPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      // 执行导出
+      this.$modal.confirm('是否确认导出所有短信日志数据项?').then(() => {
+        this.exportLoading = true;
+        return exportSmsLogExcel(params);
+      }).then(response => {
+        this.$download.excel(response, '短信日志.xls');
+        this.exportLoading = false;
+      }).catch(() => {});
+    },
+    /** 详细按钮操作 */
+    handleView(row) {
+      this.open = true;
+      this.form = row;
+    },
+    /** 格式化短信渠道 */
+    formatChannelSignature(channelId) {
+      for (const channel of this.channelOptions) {
+        if (channel.id === channelId) {
+          return channel.signature;
+        }
+      }
+      return '找不到签名：' + channelId;
+    }
+  }
+};
+</script>

src/views/system/sms/template/index.vue

@@ -0,0 +1,396 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="短信配置" url="https://doc.iocoder.cn/sms/" />
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="150px">
+      <el-form-item label="短信类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择短信类型" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="开启状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择开启状态" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="模板编码" prop="code">
+        <el-input v-model="queryParams.code" placeholder="请输入模板编码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="短信 API 的模板编号" prop="apiTemplateId">
+        <el-input v-model="queryParams.apiTemplateId" placeholder="请输入短信 API 的模板编号" clearable size="small" @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="短信渠道" prop="channelId">
+        <el-select v-model="queryParams.channelId" placeholder="请选择短信渠道" clearable>
+          <el-option v-for="channel in channelOptions"
+                     :key="channel.id" :value="channel.id"
+                     :label="channel.signature + '【' + getDictDataLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code) + '】'" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:sms-template:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:sms-template:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="模板编码" align="center" prop="code" />
+      <el-table-column label="模板名称" align="center" prop="name" />
+      <el-table-column label="模板内容" align="center" prop="content" width="300" />
+      <el-table-column label="短信类型" align="center" prop="type">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="开启状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="短信 API 的模板编号" align="center" prop="apiTemplateId" width="180" />
+      <el-table-column label="短信渠道" align="center" width="120">
+        <template v-slot="scope">
+          <div>{{ formatChannelSignature(scope.row.channelId) }}</div>
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.channelCode"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-share" @click="handleSendSms(scope.row)"
+                     v-hasPermi="['system:sms-template:send-sms']">测试</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:sms-template:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:sms-template:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
+        <el-form-item label="短信渠道编号" prop="channelId">
+          <el-select v-model="form.channelId" placeholder="请选择短信渠道编号">
+            <el-option v-for="channel in channelOptions"
+                       :key="channel.id" :value="channel.id"
+                       :label="channel.signature + '【' + getDictDataLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code) + '】'" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="短信类型" prop="type">
+          <el-select v-model="form.type" placeholder="请选择短信类型">
+            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE)"
+                       :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="模板编号" prop="code">
+          <el-input v-model="form.code" placeholder="请输入模板编号" />
+        </el-form-item>
+        <el-form-item label="模板名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入模板名称" />
+        </el-form-item>
+        <el-form-item label="模板内容" prop="content">
+          <el-input type="textarea" v-model="form.content" placeholder="请输入模板内容" />
+        </el-form-item>
+        <el-form-item label="开启状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                      :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="短信 API 模板编号" prop="apiTemplateId">
+          <el-input v-model="form.apiTemplateId" placeholder="请输入短信 API 的模板编号" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 对话框(发送短信) -->
+    <el-dialog title="测试发送短信" :visible.sync="sendSmsOpen" width="500px" append-to-body>
+      <el-form ref="sendSmsForm" :model="sendSmsForm" :rules="sendSmsRules" label-width="140px">
+        <el-form-item label="模板内容" prop="content">
+          <el-input v-model="sendSmsForm.content" type="textarea" placeholder="请输入模板内容" readonly />
+        </el-form-item>
+        <el-form-item label="手机号" prop="mobile">
+          <el-input v-model="sendSmsForm.mobile" placeholder="请输入手机号" />
+        </el-form-item>
+        <el-form-item v-for="param in sendSmsForm.params" :key="param" :label="'参数 {' + param + '}'" :prop="'templateParams.' + param">
+          <el-input v-model="sendSmsForm.templateParams[param]" :placeholder="'请输入 ' + param + ' 参数'" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitSendSmsForm">确 定</el-button>
+        <el-button @click="cancelSendSms">取 消</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { createSmsTemplate, updateSmsTemplate, deleteSmsTemplate, getSmsTemplate, getSmsTemplatePage,
+  exportSmsTemplateExcel, sendSms } from "@/api/system/sms/smsTemplate";
+import {  getSimpleSmsChannels } from "@/api/system/sms/smsChannel";
+
+export default {
+  name: "SystemSmsTemplate",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 短信模板列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        type: null,
+        status: null,
+        code: null,
+        content: null,
+        apiTemplateId: null,
+        channelId: null,
+        createTime: []
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        type: [{ required: true, message: "短信类型不能为空", trigger: "change" }],
+        status: [{ required: true, message: "开启状态不能为空", trigger: "blur" }],
+        code: [{ required: true, message: "模板编码不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "模板名称不能为空", trigger: "blur" }],
+        content: [{ required: true, message: "模板内容不能为空", trigger: "blur" }],
+        apiTemplateId: [{ required: true, message: "短信 API 的模板编号不能为空", trigger: "blur" }],
+        channelId: [{ required: true, message: "短信渠道编号不能为空", trigger: "change" }],
+      },
+      // 短信渠道
+      channelOptions: [],
+      // 发送短信
+      sendSmsOpen: false,
+      sendSmsForm: {
+        params: [], // 模板的参数列表
+      },
+      sendSmsRules: {
+        mobile: [{ required: true, message: "手机不能为空", trigger: "blur" }],
+        templateCode: [{ required: true, message: "模版编码不能为空", trigger: "blur" }],
+        templateParams: { }
+      }
+    };
+  },
+  created() {
+    this.getList();
+    // 获得短信渠道
+    getSimpleSmsChannels().then(response => {
+      this.channelOptions = response.data;
+    })
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getSmsTemplatePage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        type: undefined,
+        status: undefined,
+        code: undefined,
+        name: undefined,
+        content: undefined,
+        remark: undefined,
+        apiTemplateId: undefined,
+        channelId: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加短信模板";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getSmsTemplate(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改短信模板";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateSmsTemplate(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createSmsTemplate(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除短信模板编号为"' + id + '"的数据项?').then(function() {
+        return deleteSmsTemplate(id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      // 执行导出
+      this.$modal.confirm('是否确认导出所有短信模板数据项?', "警告").then(() => {
+        this.exportLoading = true;
+        return exportSmsTemplateExcel(params);
+      }).then(response => {
+        this.$download.excel(response, '短信模板.xls');
+        this.exportLoading = false;
+      }).catch(() => {});
+    },
+    /** 发送短息按钮 */
+    handleSendSms(row) {
+      this.resetSendSms(row);
+      // 设置参数
+      this.sendSmsForm.content = row.content;
+      this.sendSmsForm.params = row.params;
+      this.sendSmsForm.templateCode = row.code;
+      this.sendSmsForm.templateParams = row.params.reduce(function(obj, item) {
+        obj[item] = undefined;
+        return obj;
+      }, {});
+      // 根据 row 重置 rules
+      this.sendSmsRules.templateParams = row.params.reduce(function(obj, item) {
+        obj[item] = { required: true, message: '参数 ' + item + " 不能为空", trigger: "change" };
+        return obj;
+      }, {});
+      // 设置打开
+      this.sendSmsOpen = true;
+    },
+    /** 重置发送短信的表单 */
+    resetSendSms() {
+      // 根据 row 重置表单
+      this.sendSmsForm = {
+        content: undefined,
+        params: undefined,
+        mobile: undefined,
+        templateCode: undefined,
+        templateParams: {}
+      };
+      this.resetForm("sendSmsForm");
+    },
+    /** 取消发送短信 */
+    cancelSendSms() {
+      this.sendSmsOpen = false;
+      this.resetSendSms();
+    },
+    /** 提交按钮 */
+    submitSendSmsForm() {
+      this.$refs["sendSmsForm"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 添加的提交
+        sendSms(this.sendSmsForm).then(response => {
+          this.$modal.msgSuccess("提交发送成功！发送结果，见发送日志编号：" + response.data);
+          this.sendSmsOpen = false;
+        });
+      });
+    },
+    /** 格式化短信渠道 */
+    formatChannelSignature(channelId) {
+      for (const channel of this.channelOptions) {
+        if (channel.id === channelId) {
+          return channel.signature;
+        }
+      }
+      return '找不到签名：' + channelId;
+    }
+  }
+};
+</script>

src/views/system/tenant/index.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="SaaS 多租户" url="https://doc.iocoder.cn/saas-tenant/" />
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="租户名" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入租户名" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="联系人" prop="contactName">
+        <el-input v-model="queryParams.contactName" placeholder="请输入联系人" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="联系手机" prop="contactMobile">
+        <el-input v-model="queryParams.contactMobile" placeholder="请输入联系手机" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="租户状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择租户状态" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                       :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:tenant:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:tenant:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="租户编号" align="center" prop="id" />
+      <el-table-column label="租户名" align="center" prop="name" />
+      <el-table-column label="租户套餐" align="center" prop="packageId">
+        <template v-slot="scope">
+          <el-tag v-if="scope.row.packageId === 0" type="danger">系统租户</el-tag>
+          <el-tag v-else> {{getPackageName(scope.row.packageId)}} </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="联系人" align="center" prop="contactName" />
+      <el-table-column label="联系手机" align="center" prop="contactMobile" />
+      <el-table-column label="账号额度" align="center" prop="accountCount">
+        <template v-slot="scope">
+          <el-tag> {{scope.row.accountCount}} </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="过期时间" align="center" prop="expireTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.expireTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="绑定域名" align="center" prop="domain" width="180" />
+      <el-table-column label="租户状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:tenant:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:tenant:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="租户名" prop="name">
+          <el-input v-model="form.name" placeholder="请输入租户名" />
+        </el-form-item>
+        <el-form-item label="租户套餐" prop="packageId">
+          <el-select v-model="form.packageId" placeholder="请选择租户套餐" clearable size="small">
+            <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="联系人" prop="contactName">
+          <el-input v-model="form.contactName" placeholder="请输入联系人" />
+        </el-form-item>
+        <el-form-item label="联系手机" prop="contactMobile">
+          <el-input v-model="form.contactMobile" placeholder="请输入联系手机" />
+        </el-form-item>
+        <el-form-item v-if="form.id === undefined" label="用户名称" prop="username">
+          <el-input v-model="form.username" placeholder="请输入用户名称" />
+        </el-form-item>
+        <el-form-item v-if="form.id === undefined" label="用户密码" prop="password">
+          <el-input v-model="form.password" placeholder="请输入用户密码" type="password" show-password />
+        </el-form-item>
+        <el-form-item label="账号额度" prop="accountCount">
+          <el-input-number v-model="form.accountCount" placeholder="请输入账号额度" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="过期时间" prop="expireTime">
+          <el-date-picker clearable size="small" v-model="form.expireTime" type="date"
+                          value-format="timestamp" placeholder="请选择过期时间" />
+        </el-form-item>
+        <el-form-item label="绑定域名" prop="domain">
+          <el-input v-model="form.domain" placeholder="请输入绑定域名" />
+        </el-form-item>
+        <el-form-item label="租户状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                      :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createTenant, updateTenant, deleteTenant, getTenant, getTenantPage, exportTenantExcel } from "@/api/system/tenant";
+import { CommonStatusEnum } from '@/utils/constants'
+import {getTenantPackageList} from "@/api/system/tenantPackage";
+
+export default {
+  name: "SystemTenant",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 租户列表
+      list: [],
+      // 租户套餐列表
+      packageList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        contactName: null,
+        contactMobile: null,
+        status: undefined,
+        createTime: []
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [{ required: true, message: "租户名不能为空", trigger: "blur" }],
+        packageId: [{ required: true, message: "租户套餐不能为空", trigger: "blur" }],
+        contactName: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
+        status: [{ required: true, message: "租户状态不能为空", trigger: "blur" }],
+        accountCount: [{ required: true, message: "账号额度不能为空", trigger: "blur" }],
+        expireTime: [{ required: true, message: "过期时间不能为空", trigger: "blur" }],
+        domain: [{ required: true, message: "绑定域名不能为空", trigger: "blur" }],
+        username: [{ required: true, message: "用户名称不能为空", trigger: "blur" }],
+        password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }],
+      }
+    };
+  },
+  created() {
+    this.getList();
+    // 获得租户套餐列表
+    getTenantPackageList().then(response => {
+      this.packageList = response.data;
+    })
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getTenantPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        name: undefined,
+        packageId: undefined,
+        contactName: undefined,
+        contactMobile: undefined,
+        accountCount: undefined,
+        expireTime: undefined,
+        domain: undefined,
+        status: CommonStatusEnum.ENABLE,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加租户";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      getTenant(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改租户";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateTenant(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createTenant(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除租户编号为"' + id + '"的数据项?').then(function() {
+          return deleteTenant(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      // 执行导出
+      this.$modal.confirm('是否确认导出所有租户数据项?').then(() => {
+          this.exportLoading = true;
+          return exportTenantExcel(params);
+        }).then(response => {
+          this.$download.excel(response, '租户.xls');
+          this.exportLoading = false;
+      }).catch(() => {});
+    },
+    /** 套餐名格式化 */
+    getPackageName(packageId) {
+      for (const item of this.packageList) {
+        if (item.id === packageId) {
+          return item.name;
+        }
+      }
+      return '未知套餐';
+    }
+  }
+};
+</script>

src/views/system/tenantPackage/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="SaaS 多租户" url="https://doc.iocoder.cn/saas-tenant/" />
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="套餐名" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入套餐名" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                       :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:tenant-package:create']">新增</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="套餐编号" align="center" prop="id" width="120" />
+      <el-table-column label="套餐名" align="center" prop="name" />
+      <el-table-column label="状态" align="center" prop="status" width="100">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:tenant-package:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:tenant-package:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="套餐名" prop="name">
+          <el-input v-model="form.name" placeholder="请输入套餐名" />
+        </el-form-item>
+        <el-form-item label="菜单权限">
+          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
+          <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id"
+                   :check-strictly="menuCheckStrictly" empty-text="加载中，请稍后" :props="defaultProps"></el-tree>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                      :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createTenantPackage, updateTenantPackage, deleteTenantPackage, getTenantPackage, getTenantPackagePage} from "@/api/system/tenantPackage";
+import {CommonStatusEnum} from "@/utils/constants";
+import {listSimpleMenus} from "@/api/system/menu";
+
+export default {
+  name: "SystemTenantPackage",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 租户套餐列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: null,
+        status: null,
+        remark: null,
+        createTime: []
+      },
+      // 表单参数
+      form: {},
+      menuExpand: false,
+      menuNodeAll: false,
+      menuCheckStrictly: true,
+      defaultProps: {
+        label: "name",
+        children: "children"
+      },
+      menuOptions: [], // 菜单列表
+      // 表单校验
+      rules: {
+        name: [{ required: true, message: "套餐名不能为空", trigger: "blur" }],
+        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
+        menuIds: [{ required: true, message: "关联的菜单编号不能为空", trigger: "blur" }],
+      }
+    };
+  },
+  created() {
+    this.getList();
+    this.getMenus();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getTenantPackagePage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      // 菜单选择重置
+      if (this.$refs.menu !== undefined) {
+        this.$refs.menu.setCheckedKeys([]);
+      }
+      this.menuExpand = false;
+      this.menuNodeAll = false;
+      this.menuCheckStrictly = true;
+      // 表单重置
+      this.form = {
+        id: undefined,
+        name: undefined,
+        status: CommonStatusEnum.ENABLE,
+        remark: undefined,
+        menuIds: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      // 表单重置
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加租户套餐";
+      // 设置为非严格，继续使用半选中
+      this.menuCheckStrictly = false;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id;
+      this.open = true;
+      this.title = "修改租户套餐";
+      // 获得菜单列表
+      getTenantPackage(id).then(response => {
+        this.form = response.data;
+        // 设置菜单项
+        // 设置为严格，避免设置父节点自动选中子节点，解决半选中问题
+        this.menuCheckStrictly = true
+        // 设置选中
+        this.$refs.menu.setCheckedKeys(response.data.menuIds);
+        // 设置为非严格，继续使用半选中
+        this.menuCheckStrictly = false
+      });
+    },
+    /** 获得菜单 */
+    getMenus() {
+      listSimpleMenus().then(response => {
+        // 处理 menuOptions 参数
+        this.menuOptions = [];
+        // 只需要配置
+        this.menuOptions.push(...this.handleTree(response.data, "id"));
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 修改的提交
+        if (this.form.id != null) {
+          updateTenantPackage({
+            ...this.form,
+            menuIds: [...this.$refs.menu.getCheckedKeys(), ...this.$refs.menu.getHalfCheckedKeys()]
+          }).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+          return;
+        }
+        // 添加的提交
+        createTenantPackage({
+          ...this.form,
+          menuIds: [...this.$refs.menu.getCheckedKeys(), ...this.$refs.menu.getHalfCheckedKeys()]
+        }).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除租户套餐编号为"' + id + '"的数据项?').then(function() {
+          return deleteTenantPackage(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      let treeList = this.menuOptions;
+      for (let i = 0; i < treeList.length; i++) {
+        this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value) {
+      this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect(value) {
+      this.form.menuCheckStrictly = value;
+    },
+  }
+};
+</script>

src/views/system/user/index.vue

@@ -0,0 +1,640 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
+    <doc-alert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
+    <doc-alert title="Excel 导入导出" url="https://doc.iocoder.cn/excel-import-and-export/" />
+    <!-- 搜索工作栏 -->
+    <el-row :gutter="20">
+      <!--部门数据-->
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px"/>
+        </div>
+        <div class="head-container">
+          <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
+                   ref="tree" default-expand-all highlight-current @node-click="handleNodeClick"/>
+        </div>
+      </el-col>
+      <!--用户数据-->
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="用户名称" prop="username">
+            <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable style="width: 240px"
+                      @keyup.enter.native="handleQuery"/>
+          </el-form-item>
+          <el-form-item label="手机号码" prop="mobile">
+            <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable style="width: 240px"
+                      @keyup.enter.native="handleQuery"/>
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
+              <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间" prop="createTime">
+            <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                       v-hasPermi="['system:user:create']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
+                       v-hasPermi="['system:user:import']">导入</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                       v-hasPermi="['system:user:export']">导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="userList">
+          <el-table-column label="用户编号" align="center" key="id" prop="id" v-if="columns[0].visible" />
+          <el-table-column label="用户名称" align="center" key="username" prop="username" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="用户昵称" align="center" key="nickname" prop="nickname" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="部门" align="center" key="deptName" prop="dept.name" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="手机号码" align="center" key="mobile" prop="mobile" v-if="columns[4].visible" width="120" />
+          <el-table-column label="状态" key="status" v-if="columns[5].visible" align="center">
+            <template v-slot="scope">
+              <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)" />
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
+            <template v-slot="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+            <template v-slot="scope">
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                         v-hasPermi="['system:user:update']">修改</el-button>
+              <el-dropdown  @command="(command) => handleCommand(command, scope.$index, scope.row)"
+                            v-hasPermi="['system:user:delete', 'system:user:update-password', 'system:permission:assign-user-role']">
+                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="handleDelete" v-if="scope.row.id !== 1" size="mini" type="text" icon="el-icon-delete"
+                                    v-hasPermi="['system:user:delete']">删除</el-dropdown-item>
+                  <el-dropdown-item command="handleResetPwd" size="mini" type="text" icon="el-icon-key"
+                                    v-hasPermi="['system:user:update-password']">重置密码</el-dropdown-item>
+                  <el-dropdown-item command="handleRole" size="mini" type="text" icon="el-icon-circle-check"
+                                    v-hasPermi="['system:permission:assign-user-role']">分配角色</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                    @pagination="getList"/>
+      </el-col>
+    </el-row>
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户昵称" prop="nickname">
+              <el-input v-model="form.nickname" placeholder="请输入用户昵称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="归属部门" prop="deptId">
+              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" :clearable="false"
+                          placeholder="请选择归属部门" :normalizer="normalizer"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="手机号码" prop="mobile">
+              <el-input v-model="form.mobile" placeholder="请输入手机号码" maxlength="11" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item v-if="form.id === undefined" label="用户名称" prop="username">
+              <el-input v-model="form.username" placeholder="请输入用户名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.id === undefined" label="用户密码" prop="password">
+              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" show-password />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户性别">
+              <el-select v-model="form.sex" placeholder="请选择">
+                <el-option v-for="dict in sexDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="岗位">
+              <el-select v-model="form.postIds" multiple placeholder="请选择">
+                <el-option
+                    v-for="item in postOptions"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 用户导入对话框 -->
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip text-center" slot="tip">
+          <div class="el-upload__tip" slot="tip">
+            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+          </div>
+          <span>仅允许导入xls、xlsx格式文件。</span>
+          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
+        </div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 分配角色 -->
+    <el-dialog title="分配角色" :visible.sync="openRole" width="500px" append-to-body>
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="用户名称">
+          <el-input v-model="form.username" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="用户昵称">
+          <el-input v-model="form.nickname" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="角色">
+          <el-select v-model="form.roleIds" multiple placeholder="请选择">
+            <el-option
+                v-for="item in roleOptions"
+                :key="parseInt(item.id)"
+                :label="item.name"
+                :value="parseInt(item.id)"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitRole">确 定</el-button>
+        <el-button @click="cancelRole">取 消</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import {
+  addUser,
+  changeUserStatus,
+  delUser,
+  exportUser,
+  getUser,
+  importTemplate,
+  listUser,
+  resetUserPwd,
+  updateUser
+} from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+import {listSimpleDepts} from "@/api/system/dept";
+import {listSimplePosts} from "@/api/system/post";
+
+import {CommonStatusEnum} from "@/utils/constants";
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import {assignUserRole, listUserRoles} from "@/api/system/permission";
+import {listSimpleRoles} from "@/api/system/role";
+import {getBaseHeader} from "@/utils/request";
+
+export default {
+  name: "SystemUser",
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: null,
+      // 弹出层标题
+      title: "",
+      // 部门树选项
+      deptOptions: undefined,
+      // 是否显示弹出层
+      open: false,
+      // 部门名称
+      deptName: undefined,
+      // 默认密码
+      initPassword: undefined,
+      // 性别状态字典
+      sexOptions: [],
+      // 岗位选项
+      postOptions: [],
+      // 角色选项
+      roleOptions: [],
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: "children",
+        label: "name"
+      },
+      // 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: getBaseHeader(),
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + '/admin-api/system/user/import'
+      },
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        username: undefined,
+        mobile: undefined,
+        status: undefined,
+        deptId: undefined,
+        createTime: []
+      },
+      // 列信息
+      columns: [
+        { key: 0, label: `用户编号`, visible: true },
+        { key: 1, label: `用户名称`, visible: true },
+        { key: 2, label: `用户昵称`, visible: true },
+        { key: 3, label: `部门`, visible: true },
+        { key: 4, label: `手机号码`, visible: true },
+        { key: 5, label: `状态`, visible: true },
+        { key: 6, label: `创建时间`, visible: true }
+      ],
+      // 表单校验
+      rules: {
+        username: [
+          { required: true, message: "用户名称不能为空", trigger: "blur" }
+        ],
+        nickname: [
+          { required: true, message: "用户昵称不能为空", trigger: "blur" }
+        ],
+        password: [
+          { required: true, message: "用户密码不能为空", trigger: "blur" }
+        ],
+        email: [
+          {
+            type: "email",
+            message: "'请输入正确的邮箱地址",
+            trigger: ["blur", "change"]
+          }
+        ],
+        mobile: [
+          {
+            pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur"
+          }
+        ]
+      },
+      // 是否显示弹出层（角色权限）
+      openRole: false,
+
+      // 枚举
+      SysCommonStatusEnum: CommonStatusEnum,
+      // 数据字典
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
+      sexDictDatas: getDictDatas(DICT_TYPE.SYSTEM_USER_SEX),
+    };
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    this.getList();
+    this.getTreeselect();
+    // this.getConfigKey("sys.user.init-password").then(response => {
+    //   this.initPassword = response.msg;
+    // });
+  },
+  methods: {
+    // 更多操作
+    handleCommand(command, index, row) {
+      switch (command) {
+        case 'handleUpdate':
+          this.handleUpdate(row);//修改客户信息
+          break;
+        case 'handleDelete':
+          this.handleDelete(row);//红号变更
+          break;
+        case 'handleResetPwd':
+          this.handleResetPwd(row);
+          break;
+        case 'handleRole':
+          this.handleRole(row);
+          break;
+        default:
+          break;
+      }
+    },
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listUser(this.queryParams).then(response => {
+          this.userList = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 查询部门下拉树结构 + 岗位下拉 */
+    getTreeselect() {
+      listSimpleDepts().then(response => {
+        // 处理 deptOptions 参数
+        this.deptOptions = [];
+        this.deptOptions.push(...this.handleTree(response.data, "id"));
+      });
+      listSimplePosts().then(response => {
+        // 处理 postOptions 参数
+        this.postOptions = [];
+        this.postOptions.push(...response.data);
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.getList();
+    },
+    // 用户状态修改
+    handleStatusChange(row) {
+      let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
+      this.$modal.confirm('确认要"' + text + '""' + row.username + '"用户吗?').then(function() {
+          return changeUserStatus(row.id, row.status);
+        }).then(() => {
+          this.$modal.msgSuccess(text + "成功");
+        }).catch(function() {
+          row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
+              : CommonStatusEnum.ENABLE;
+        });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 取消按钮（角色权限）
+    cancelRole() {
+      this.openRole = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        deptId: undefined,
+        username: undefined,
+        nickname: undefined,
+        password: undefined,
+        mobile: undefined,
+        email: undefined,
+        sex: undefined,
+        status: "0",
+        remark: undefined,
+        postIds: [],
+        roleIds: []
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      // 获得下拉数据
+      this.getTreeselect();
+      // 打开表单，并设置初始化
+      this.open = true;
+      this.title = "添加用户";
+      this.form.password = this.initPassword;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.getTreeselect();
+      const id = row.id;
+      getUser(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改用户";
+      });
+    },
+    /** 重置密码按钮操作 */
+    handleResetPwd(row) {
+      this.$prompt('请输入"' + row.username + '"的新密码', "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消"
+      }).then(({ value }) => {
+          resetUserPwd(row.id, value).then(response => {
+            this.$modal.msgSuccess("修改成功，新密码是：" + value);
+          });
+        }).catch(() => {});
+    },
+    /** 分配用户角色操作 */
+    handleRole(row) {
+      this.reset();
+      const id = row.id
+      // 处理了 form 的用户 username 和 nickname 的展示
+      this.form.id = id;
+      this.form.username = row.username;
+      this.form.nickname = row.nickname;
+      // 打开弹窗
+      this.openRole = true;
+      // 获得角色列表
+      listSimpleRoles().then(response => {
+        // 处理 roleOptions 参数
+        this.roleOptions = [];
+        this.roleOptions.push(...response.data);
+      });
+      // 获得角色拥有的菜单集合
+      listUserRoles(id).then(response => {
+        // 设置选中
+        this.form.roleIds = response.data;
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updateUser(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addUser(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 提交按钮（角色权限） */
+    submitRole: function() {
+      if (this.form.id !== undefined) {
+        assignUserRole({
+          userId: this.form.id,
+          roleIds: this.form.roleIds,
+        }).then(response => {
+          this.$modal.msgSuccess("分配角色成功");
+          this.openRole = false;
+          this.getList();
+        });
+      }
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项?').then(function() {
+          return delUser(ids);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.$modal.confirm('是否确认导出所有用户数据项?').then(() => {
+          // 处理查询参数
+          let params = {...this.queryParams};
+          params.pageNo = undefined;
+          params.pageSize = undefined;
+          this.exportLoading = true;
+          return exportUser(params);
+        }).then(response => {
+          this.$download.excel(response, '用户数据.xls');
+          this.exportLoading = false;
+      }).catch(() => {});
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.title = "用户导入";
+      this.upload.open = true;
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      importTemplate().then(response => {
+        this.$download.excel(response, '用户导入模板.xls');
+      });
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      if (response.code !== 0) {
+        this.$modal.msgError(response.msg)
+        return;
+      }
+      this.upload.open = false;
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      // 拼接提示语
+      let data = response.data;
+      let text = '创建成功数量：' + data.createUsernames.length;
+      for (const username of data.createUsernames) {
+        text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
+      }
+      text += '<br />更新成功数量：' + data.updateUsernames.length;
+      for (const username of data.updateUsernames) {
+        text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
+      }
+      text += '<br />更新失败数量：' + Object.keys(data.failureUsernames).length;
+      for (const username in data.failureUsernames) {
+        text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username + '：' + data.failureUsernames[username];
+      }
+      this.$alert(text, "导入结果", { dangerouslyUseHTMLString: true });
+      this.getList();
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    },
+    // 格式化部门的下拉框
+    normalizer(node) {
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      }
+    }
+  }
+};
+</script>

src/views/system/user/profile/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="6" :xs="24">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>个人信息</span>
+          </div>
+          <div>
+            <div class="text-center">
+              <userAvatar :user="user" />
+            </div>
+            <ul class="list-group list-group-striped">
+              <li class="list-group-item">
+                <svg-icon icon-class="user" />用户名称
+                <div class="pull-right">{{ user.username }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="phone" />手机号码
+                <div class="pull-right">{{ user.mobile }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="email" />用户邮箱
+                <div class="pull-right">{{ user.email }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="tree" />所属部门
+                <div class="pull-right" v-if="user.dept">{{ user.dept.name }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="tree" />所属岗位
+                <div class="pull-right" v-if="user.posts">{{ user.posts.map(post => post.name).join(',') }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="peoples" />所属角色
+                <div class="pull-right" v-if="user.roles">{{ user.roles.map(role => role.name).join(',') }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="date" />创建日期
+                <div class="pull-right">{{ parseTime(user.createTime) }}</div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="18" :xs="24">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>基本资料</span>
+          </div>
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="基本资料" name="userinfo">
+              <userInfo :user="user" />
+            </el-tab-pane>
+            <el-tab-pane label="修改密码" name="resetPwd">
+              <resetPwd :user="user" />
+            </el-tab-pane>
+            <el-tab-pane label="社交信息" name="userSocial">
+              <userSocial :user="user" :getUser="getUser" :setActiveTab="setActiveTab" />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import userAvatar from "./userAvatar";
+import userInfo from "./userInfo";
+import resetPwd from "./resetPwd";
+import userSocial from "./userSocial";
+import { getUserProfile } from "@/api/system/user";
+
+export default {
+  name: "Profile",
+  components: { userAvatar, userInfo, resetPwd, userSocial },
+  data() {
+    return {
+      user: {},
+      roleGroup: {},
+      postGroup: {},
+      activeTab: "userinfo"
+    };
+  },
+  created() {
+    this.getUser();
+  },
+  methods: {
+    getUser() {
+      getUserProfile().then(response => {
+        this.user = response.data;
+      });
+    },
+    setActiveTab(activeTab) {
+      this.activeTab = activeTab
+    }
+  }
+};
+</script>

src/views/system/user/profile/resetPwd.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+    <el-form-item label="旧密码" prop="oldPassword">
+      <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
+    </el-form-item>
+    <el-form-item label="新密码" prop="newPassword">
+      <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
+    </el-form-item>
+    <el-form-item label="确认密码" prop="confirmPassword">
+      <el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password" show-password />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="mini" @click="submit">保存</el-button>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserPwd } from "@/api/system/user";
+
+export default {
+  data() {
+    const equalToPassword = (rule, value, callback) => {
+      if (this.user.newPassword !== value) {
+        callback(new Error("两次输入的密码不一致"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      test: "1test",
+      user: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      },
+      // 表单校验
+      rules: {
+        oldPassword: [
+          { required: true, message: "旧密码不能为空", trigger: "blur" }
+        ],
+        newPassword: [
+          { required: true, message: "新密码不能为空", trigger: "blur" },
+          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
+        ],
+        confirmPassword: [
+          { required: true, message: "确认密码不能为空", trigger: "blur" },
+          { required: true, validator: equalToPassword, trigger: "blur" }
+        ]
+      }
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(
+            response => {
+              this.$modal.msgSuccess("修改成功");
+            }
+          );
+        }
+      });
+    },
+    close() {
+      this.$tab.closePage();
+    }
+  }
+};
+</script>

src/views/system/user/profile/userAvatar.vue

@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog()">
+      <el-row>
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
+          <vue-cropper
+            ref="cropper"
+            :img="options.img"
+            :info="true"
+            :autoCrop="options.autoCrop"
+            :autoCropWidth="options.autoCropWidth"
+            :autoCropHeight="options.autoCropHeight"
+            :fixedBox="options.fixedBox"
+            @realTime="realTime"
+            v-if="visible"
+          />
+        </el-col>
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
+          <div class="avatar-upload-preview">
+            <img :src="previews.url" :style="previews.img" />
+          </div>
+        </el-col>
+      </el-row>
+      <br />
+      <el-row>
+        <el-col :lg="2" :md="2">
+          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+            <el-button size="small">
+              选择
+              <i class="el-icon-upload el-icon--right"></i>
+            </el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 2}" :md="2">
+          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
+        </el-col>
+        <el-col :lg="{span: 2, offset: 6}" :md="2">
+          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from "@/store";
+import { VueCropper } from "vue-cropper";
+import { uploadAvatar } from "@/api/system/user";
+
+export default {
+  components: { VueCropper },
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 是否显示弹出层
+      open: false,
+      // 是否显示cropper
+      visible: false,
+      // 弹出层标题
+      title: "修改头像",
+      options: {
+        img: store.getters.avatar, //裁剪图片的地址
+        autoCrop: true, // 是否默认生成截图框
+        autoCropWidth: 200, // 默认生成截图框宽度
+        autoCropHeight: 200, // 默认生成截图框高度
+        fixedBox: true // 固定截图框大小 不允许改变
+      },
+      previews: {}
+    };
+  },
+  methods: {
+    // 编辑头像
+    editCropper() {
+      this.open = true;
+    },
+    // 打开弹出层结束时的回调
+    modalOpened() {
+      this.visible = true;
+    },
+    // 覆盖默认的上传行为
+    requestUpload() {
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft();
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight();
+    },
+    // 图片缩放
+    changeScale(num) {
+      num = num || 1;
+      this.$refs.cropper.changeScale(num);
+    },
+    // 上传预处理
+    beforeUpload(file) {
+      if (file.type.indexOf("image/") === -1) {
+        this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
+      } else {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+          this.options.img = reader.result;
+        };
+      }
+    },
+    // 上传图片
+    uploadImg() {
+      this.$refs.cropper.getCropBlob(data => {
+        let formData = new FormData();
+        formData.append("avatarFile", data);
+        uploadAvatar(formData).then(resp => {
+          this.open = false;
+          // this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
+          store.commit('SET_AVATAR', resp.data);
+          this.$modal.msgSuccess("修改成功");
+          this.visible = false;
+        });
+      });
+    },
+    // 实时预览
+    realTime(data) {
+      this.previews = data;
+    },
+    // 取消截图，关闭对话框
+    closeDialog() {
+      this.options.img = store.getters.avatar
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.user-info-head {
+  position: relative;
+  display: inline-block;
+  height: 120px;
+}
+
+.user-info-head:hover:after {
+  content: '+';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: #eee;
+  background: rgba(0, 0, 0, 0.5);
+  font-size: 24px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+  line-height: 110px;
+  border-radius: 50%;
+}
+</style>

src/views/system/user/profile/userInfo.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+    <el-form-item label="用户昵称" prop="nickName">
+      <el-input v-model="user.nickname" />
+    </el-form-item>
+    <el-form-item label="手机号码" prop="mobile">
+      <el-input v-model="user.mobile" maxlength="11" />
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input v-model="user.email" maxlength="50" />
+    </el-form-item>
+    <el-form-item label="性别">
+      <el-radio-group v-model="user.sex">
+        <el-radio :label="1">男</el-radio>
+        <el-radio :label="2">女</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="mini" @click="submit">保存</el-button>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserProfile } from "@/api/system/user";
+
+export default {
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 表单校验
+      rules: {
+        nickname: [
+          { required: true, message: "用户昵称不能为空", trigger: "blur" }
+        ],
+        email: [
+          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
+          {
+            type: "email",
+            message: "请输入正确的邮箱地址",
+            trigger: ["blur", "change"]
+          }
+        ],
+        mobile: [
+          { required: true, message: "手机号码不能为空", trigger: "blur" },
+          {
+            pattern: /^1[3|456789][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateUserProfile(this.user).then(response => {
+            this.$modal.msgSuccess("修改成功");
+          });
+        }
+      });
+    },
+    close() {
+      this.$tab.closePage();
+    }
+  }
+};
+</script>

src/views/system/user/profile/userSocial.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-table :data="socialUsers" :show-header="false">
+    <el-table-column label="社交平台" align="left" width="120">
+      <template v-slot="scope">
+        <img style="height:20px;vertical-align: middle;" :src="scope.row.img" /> {{ scope.row.title }}
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" align="left" >
+      <template v-slot="scope">
+        <div v-if="scope.row.openid">
+          已绑定
+          <el-button size="large" type="text" @click="unbind(scope.row)">(解绑)</el-button>
+        </div>
+        <div v-else>
+          未绑定
+          <el-button size="large" type="text" @click="bind(scope.row)">(绑定)</el-button>
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+
+import {SystemUserSocialTypeEnum} from "@/utils/constants";
+import {socialAuthRedirect} from "@/api/login";
+import {socialBind, socialUnbind} from "@/api/system/socialUser";
+
+export default {
+  props: {
+    user: {
+      type: Object
+    },
+    getUser: { // 刷新用户
+      type: Function
+    },
+    setActiveTab: { // 设置激活的
+      type: Function
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    socialUsers (){
+      const socialUsers = [];
+      for (const i in SystemUserSocialTypeEnum) {
+        const socialUser = {...SystemUserSocialTypeEnum[i]};
+        socialUsers.push(socialUser);
+        if (this.user.socialUsers) {
+          for (const j in this.user.socialUsers) {
+            if (socialUser.type === this.user.socialUsers[j].type) {
+              socialUser.openid = this.user.socialUsers[j].openid;
+              break;
+            }
+          }
+        }
+      }
+      return socialUsers;
+    }
+  },
+  created() {
+    // 社交绑定
+    const type = this.$route.query.type;
+    const code = this.$route.query.code;
+    const state = this.$route.query.state;
+    if (!code) {
+      return;
+    }
+    socialBind(type, code, state).then(resp => {
+      this.$modal.msgSuccess("绑定成功");
+      this.$router.replace('/user/profile');
+      // 调用父组件, 刷新
+      this.getUser();
+      this.setActiveTab('userSocial');
+    });
+  },
+  methods: {
+    bind(socialUser) {
+      // 计算 redirectUri
+      const redirectUri = location.origin + '/user/profile?type=' + socialUser.type;
+      // 进行跳转
+      socialAuthRedirect(socialUser.type, encodeURIComponent(redirectUri)).then((res) => {
+        // console.log(res.url);
+        window.location.href = res.data;
+      });
+    },
+    unbind(socialUser) {
+      socialUnbind(socialUser.type, socialUser.openid).then(resp => {
+        this.$modal.msgSuccess("解绑成功");
+        socialUser.openid = undefined;
+      });
+    },
+    close() {
+      this.$tab.closePage();
+    }
+  }
+};
+</script>