refactor(front): 重构前端组件和 API

- 更新了多个组件的样式和结构
- 重命名了一些 API 文件
- 添加了新的 API 接口
- 优化了部分代码的可读性和性能

cutejava-front/src/views/system/role/index.vue

@@ -4,14 +4,29 @@
     <div class="head-container">
       <div v-if="crud.props.searchToggle">
         <!-- 搜索 -->
-        <el-input v-model="query.blurry" size="small" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <el-input
+          v-model="query.blurry"
+          size="small"
+          clearable
+          placeholder="输入名称或者描述搜索"
+          style="width: 200px;"
+          class="filter-item"
+          @keyup.enter.native="crud.toQuery"
+        />
         <date-range-picker v-model="query.createTime" class="date-item" />
         <rrOperation />
       </div>
       <crudOperation :permission="permission" />
     </div>
     <!-- 表单渲染 -->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="520px">
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="crud.status.cu > 0"
+      :title="crud.status.title"
+      width="520px"
+    >
       <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
         <el-form-item label="角色名称" prop="name">
           <el-input v-model="form.name" style="width: 380px;" />
@@ -58,7 +73,15 @@
           <div slot="header" class="clearfix">
             <span class="role-span">角色列表</span>
           </div>
-          <el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" :data="crud.data" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
+          <el-table
+            ref="table"
+            v-loading="crud.loading"
+            highlight-current-row
+            style="width: 100%;"
+            :data="crud.data"
+            @selection-change="crud.selectionChangeHandler"
+            @current-change="handleCurrentChange"
+          >
             <el-table-column :selectable="checkboxT" type="selection" width="55" />
             <el-table-column prop="name" label="名称" />
             <el-table-column prop="dataScope" label="数据权限" />
@@ -69,7 +92,13 @@
               </template>
             </el-table-column>
             <el-table-column :show-overflow-tooltip="true" width="135px" prop="createTime" label="创建日期" />
-            <el-table-column v-if="checkPer(['admin','roles:edit','roles:del'])" label="操作" width="130px" align="center" fixed="right">
+            <el-table-column
+              v-if="checkPer(['admin','roles:edit','roles:del'])"
+              label="操作"
+              width="130px"
+              align="center"
+              fixed="right"
+            >
               <template slot-scope="scope">
                 <udOperation
                   v-if="scope.row.level >= level"
@@ -99,7 +128,8 @@
               style="float: right; padding: 6px 9px"
               type="primary"
               @click="saveMenu"
-            >保存</el-button>
+            >保存
+            </el-button>
           </div>
           <el-tree
             ref="menu"
@@ -123,15 +153,14 @@
 <script>
 import crudRoles from '@/api/system/role'
 import { queryDeptList, queryDeptSuperiorTree } from '@/api/system/dept'
-import { queryMenuListByPid, queryChildMenuSet } from '@/api/system/menu'
-import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import { queryChildMenuSet, queryMenuListByPid } from '@/api/system/menu'
+import CRUD, { crud, form, header, presenter } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import udOperation from '@crud/UD.operation'
 import pagination from '@crud/Pagination'
-import Treeselect from '@riophae/vue-treeselect'
+import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 import DateRangePicker from '@/components/DateRangePicker'
 
 const defaultForm = { id: null, name: null, depts: [], description: null, dataScope: '全部', level: 3 }
@@ -352,21 +381,24 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  .role-span {
-    font-weight: bold;color: #303133;
-    font-size: 15px;
-  }
+.role-span {
+  font-weight: bold;
+  color: #303133;
+  font-size: 15px;
+}
 </style>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
- ::v-deep .el-input-number .el-input__inner {
-    text-align: left;
-  }
- ::v-deep .vue-treeselect__multi-value{
-    margin-bottom: 0;
-  }
- ::v-deep .vue-treeselect__multi-value-item{
-    border: 0;
-    padding: 0;
-  }
+::v-deep .el-input-number .el-input__inner {
+  text-align: left;
+}
+
+::v-deep .vue-treeselect__multi-value {
+  margin-bottom: 0;
+}
+
+::v-deep .vue-treeselect__multi-value-item {
+  border: 0;
+  padding: 0;
+}
 </style>