feat: 编码规范、新增组件

cutejava-ui/src/views/components/base/ClipboardDemo.vue

@@ -10,7 +10,7 @@
 <script>
 import Clipboard from 'clipboard'
 import { Message } from 'element-ui'
-import OneKeyCopy from '@/views/components/OneKeyCopy'
+import OneKeyCopy from '@/views/components/base/OneKeyCopy.vue'
 export default {
   components: { OneKeyCopy },
   data() {

cutejava-ui/src/views/components/base/CodemirrorDemo.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import JavaEdit from '@/components/JavaEdit'
+import JavaEdit from '@/components/JavaEdit/index.vue'
 
 export default {
   components: { JavaEdit },

cutejava-ui/src/views/components/base/Echarts.vue

@@ -67,17 +67,17 @@
 </template>
 
 <script>
-import RadarChart from '@/components/Echarts/RadarChart'
-import HeatMap from '@/components/Echarts/HeatMap'
-import Gauge from '@/components/Echarts/Gauge'
-import Rich from '@/components/Echarts/Rich'
-import ThemeRiver from '@/components/Echarts/ThemeRiver'
-import Sunburst from '@/components/Echarts/Sunburst'
-import Graph from '@/components/Echarts/Graph'
-import Sankey from '@/components/Echarts/Sankey'
-import Scatter from '@/components/Echarts/Scatter'
-import Category from '@/components/Echarts/Category'
-import Point from '@/components/Echarts/Point'
+import RadarChart from '@/components/Echarts/RadarChart.vue'
+import HeatMap from '@/components/Echarts/HeatMap.vue'
+import Gauge from '@/components/Echarts/Gauge.vue'
+import Rich from '@/components/Echarts/Rich.vue'
+import ThemeRiver from '@/components/Echarts/ThemeRiver.vue'
+import Sunburst from '@/components/Echarts/Sunburst.vue'
+import Graph from '@/components/Echarts/Graph.vue'
+import Sankey from '@/components/Echarts/Sankey.vue'
+import Scatter from '@/components/Echarts/Scatter.vue'
+import Category from '@/components/Echarts/Category.vue'
+import Point from '@/components/Echarts/Point.vue'
 
 export default {
   name: 'Echarts',

cutejava-ui/src/views/components/base/Editor.vue

@@ -12,7 +12,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import WangEditor from '@/components/WangEditor/index'
+import WangEditor from '@/components/WangEditor/index.vue'
 
 export default {
   name: 'Editor',

cutejava-ui/src/views/components/base/YamlEdit.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import Yaml from '@/components/YamlEdit/index'
+import Yaml from '@/components/YamlEdit/index.vue'
 export default {
   name: 'YamlEdit',
   components: { Yaml },

cutejava-ui/src/views/components/business/CuteDeptTree.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
+    <div class="head-container">
+      <el-input
+        v-model="deptName"
+        clearable
+        size="small"
+        placeholder="输入部门名称搜索"
+        prefix-icon="el-icon-search"
+        class="filter-item"
+        @input="getDeptDatas"
+      />
+    </div>
+    <el-tree
+      :data="deptData"
+      :load="getDeptData"
+      :props="defaultProps"
+      :expand-on-click-node="false"
+      lazy
+      @node-click="handleNodeClick"
+    />
+  </el-col>
+</template>
+
+<script>
+
+import { getDepts } from '@/api/system/dept'
+
+export default {
+  name: 'CuteDeptTree',
+  props: {
+    value: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
+  data() {
+    return {
+      deptName: '',
+      deptData: [],
+      defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
+      currentDept: null
+    }
+  },
+  watch: {
+    // 监听currentDept变量
+    currentDept(newValue) {
+      this.$emit('input', newValue)
+    }
+  },
+  methods: {
+    getDeptData(node, resolve) {
+      const params = {}
+      if (typeof node !== 'object') {
+        if (node) {
+          params['name'] = node
+        }
+      } else if (node.level !== 0) {
+        params['pid'] = node.data.id
+      }
+      setTimeout(() => {
+        getDepts(params).then(res => {
+          if (resolve) {
+            resolve(res.content)
+          } else {
+            this.deptDatas = res.content
+          }
+        })
+      }, 100)
+    },
+    handleNodeClick(data) {
+      this.$emit('node-click', data)
+      this.$emit('input', data)
+    }
+  }
+}
+</script>
+

cutejava-ui/src/views/components/business/CuteUserSelect.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-select
+    v-model="users"
+    style="width: 100%"
+    multiple
+    filterable
+    remote
+    reserve-keyword
+    placeholder="支持用户姓名、手机号、邮箱、用户名查询"
+    :remote-method="remoteMethod"
+    :loading="loading"
+    @change="onChange"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script>
+
+import UserService from '@/api/system/user'
+
+export default {
+  name: 'CuteUserSelect',
+  props: {
+    value: {
+      type: Array,
+      required: false,
+      default: null
+    }
+  },
+  data() {
+    return {
+      users: this.value,
+      loading: false,
+      options: []
+    }
+  },
+  watch: {
+    // 监听users变量
+    users(newValue) {
+      this.$emit('input', newValue)
+    }
+  },
+  methods: {
+    remoteMethod(query) {
+      if (query !== '') {
+        this.loading = true
+        setTimeout(() => {
+          this.loading = false
+          this.queryUserMetaPage(query)
+        }, 200)
+      } else {
+        this.options = []
+      }
+    },
+    queryUserMetaPage(query, options) {
+      const that = this
+      UserService.queryUserMetaPage(query).then(res => {
+        that.options = res
+      })
+    },
+    onChange(value) {
+      this.$emit('change', value)
+      this.$emit('input', value)
+    }
+  }
+}
+</script>
+

cutejava-ui/src/views/components/business/DemoShow.vue

@@ -0,0 +1,52 @@
+<template>
+  <div style="padding: 50px">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="用户" prop="user">
+        <!-- v-model 本质上是 :value 和 @input 事件的语法糖 -->
+        <cute-user-select v-model="form.user" />
+      </el-form-item>
+      <el-form-item label="部门" prop="dept">
+        <cute-dept-tree v-model="form.dept" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">立即创建</el-button>
+        <el-button>取消</el-button>
+      </el-form-item>
+    </el-form>
+    <!--    <el-divider content-position="left">用户选择框</el-divider>-->
+    <!--    <cute-user-select @change="onUserSelectChange" />-->
+    <!--    <el-divider content-position="left">部门树</el-divider>-->
+    <!--    <cute-dept-tree @node-click="onDeptTreeNodeClick" />-->
+  </div>
+</template>
+
+<script>
+
+import CuteUserSelect from '@/views/components/business/CuteUserSelect'
+import CuteDeptTree from '@/views/components/business/CuteDeptTree'
+
+export default {
+  name: 'DemoShow',
+  components: { CuteDeptTree, CuteUserSelect },
+  data() {
+    return {
+      form: {
+        user: null,
+        dept: null
+      }
+    }
+  },
+  methods: {
+    onUserSelectChange(data) {
+      console.error('onUserSelectChange=', data)
+    },
+    onDeptTreeNodeClick(data) {
+      console.error('onDeptTreeNodeClick=', data)
+    },
+    onSubmit() {
+      console.error('this.form=', this.form)
+    }
+  }
+}
+</script>
+

cutejava-ui/src/views/system/job/module/form.vue

@@ -15,7 +15,7 @@
       label-width="80px"
     >
       <el-form-item
-        label="名称"
+        label="职位名称"
         prop="name"
       >
         <el-input
@@ -24,7 +24,7 @@
         />
       </el-form-item>
       <el-form-item
-        label="排序"
+        label="职位排序"
         prop="jobSort"
       >
         <el-input-number

cutejava-ui/src/views/system/user/center/updateEmail.vue

@@ -25,7 +25,7 @@
 import store from '@/store'
 import { validEmail } from '@/utils/validate'
 import { updateEmail } from '@/api/system/user'
-import { resetEmail } from '@/api/system/code'
+import { sendCaptcha } from '@/api/system/code'
 export default {
   props: {
     email: {
@@ -71,7 +71,7 @@ export default {
         this.codeLoading = true
         this.buttonName = '验证码发送中'
         const _this = this
-        resetEmail(this.form.email).then(res => {
+        sendCaptcha(this.form.email).then(res => {
           this.$message({
             showClose: true,
             message: '发送成功，验证码有效期5分钟',

cutejava-ui/src/views/system/user/index.vue

@@ -2,27 +2,7 @@
   <div class="app-container">
     <el-row :gutter="20">
       <!--侧边部门数据-->
-      <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
-        <div class="head-container">
-          <el-input
-            v-model="deptName"
-            clearable
-            size="small"
-            placeholder="输入部门名称搜索"
-            prefix-icon="el-icon-search"
-            class="filter-item"
-            @input="getDeptDatas"
-          />
-        </div>
-        <el-tree
-          :data="deptDatas"
-          :load="getDeptDatas"
-          :props="defaultProps"
-          :expand-on-click-node="false"
-          lazy
-          @node-click="handleNodeClick"
-        />
-      </el-col>
+      <cute-dept-tree @node-click="handleNodeClick" />
       <!--用户数据-->
       <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
         <!--工具栏-->
@@ -216,12 +196,13 @@ import Treeselect from '@riophae/vue-treeselect'
 import { mapGetters } from 'vuex'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
+import CuteDeptTree from '@/views/components/business/CuteDeptTree'
 let userRoles = []
 let userJobs = []
 const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'false', roles: [], jobs: [], dept: { id: null }, phone: null }
 export default {
   name: 'User',
-  components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
+  components: { CuteDeptTree, Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
   cruds() {
     return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
   },
@@ -241,9 +222,8 @@ export default {
     }
     return {
       height: document.documentElement.clientHeight - 180 + 'px;',
-      deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [],
+      deptName: '', depts: [], jobs: [], level: 3, roles: [],
       jobDatas: [], roleDatas: [], // 多选时使用
-      defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
       permission: {
         add: ['admin', 'user:add'],
         edit: ['admin', 'user:edit'],
@@ -386,25 +366,14 @@ export default {
       console.log(this.jobDatas)
       return true
     },
-    // 获取左侧部门数据
-    getDeptDatas(node, resolve) {
-      const params = {}
-      if (typeof node !== 'object') {
-        if (node) {
-          params['name'] = node
-        }
-      } else if (node.level !== 0) {
-        params['pid'] = node.data.id
+    // 切换部门
+    handleNodeClick(data) {
+      if (data.pid === 0) {
+        this.query.deptId = null
+      } else {
+        this.query.deptId = data.id
       }
-      setTimeout(() => {
-        getDepts(params).then(res => {
-          if (resolve) {
-            resolve(res.content)
-          } else {
-            this.deptDatas = res.content
-          }
-        })
-      }, 100)
+      this.crud.toQuery()
     },
     getDepts() {
       getDepts({ enabled: true }).then(res => {
@@ -449,15 +418,6 @@ export default {
         })
       }
     },
-    // 切换部门
-    handleNodeClick(data) {
-      if (data.pid === 0) {
-        this.query.deptId = null
-      } else {
-        this.query.deptId = data.id
-      }
-      this.crud.toQuery()
-    },
     // 改变状态
     changeEnabled(data, val) {
       this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {