style(xumu): 格式化 AppSystemAccount 组件代码

- 使用 ESLint 规则格式化了代码结构
- 调整了缩进、空格和换行
- 修复了一些小的语法问题

project/xumu/AppSystemAccount/AppSystemAccount.vue

@@ -1,24 +1,23 @@
 <template>
   <section class="AppSystemAccount">
     <ai-page title="账号管理">
-      <ai-area-tree :root-id="rootArea" slot="left" v-model="search.areaId" range="3"/>
+      <ai-area-tree :root-id="rootArea" slot="left" v-model="search.areaId" range="3" />
       <ai-search-bar>
         <template #left>
-          <el-button type="primary" icon="iconfont iconAdd" @click="dialog=true">添加</el-button>
+          <el-button type="primary" icon="iconfont iconAdd" @click="dialog = true">添加</el-button>
           <!--            <el-button type="primary" :disabled="!ids.toString()" @click="batchAllot">功能分配</el-button>-->
         </template>
         <template #right>
           <el-input size="small" placeholder="搜索姓名、手机号" v-model="search.condition" clearable
-                    @change="page.pageNum=1,getTableData()"/>
+            @change="page.pageNum = 1, getTableData()" />
         </template>
       </ai-search-bar>
       <ai-table :tableData="tableData" :total="page.total" :current.sync="page.pageNum" :size.sync="page.pageSize"
-                @getList="getTableData" :col-configs="colConfigs" :dict="dict"
+        @getList="getTableData" :col-configs="colConfigs" :dict="dict" @selection-change="v => ids = v.map(e => e.id)">
-                @selection-change="v=>ids=v.map(e=>e.id)">
         <el-table-column slot="name" label="姓名" width="180px">
           <el-row type="flex" align="middle" slot-scope="{row}">
             <el-image class="avatar" :src="row.avatar" :preview-src-list="[row.avatar]">
-              <el-image slot="error" src="https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png" alt=""/>
+              <el-image slot="error" src="https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png" alt="" />
             </el-image>
             <div>{{ row.name }}</div>
           </el-row>
@@ -36,27 +35,25 @@
     </ai-page>
     <!--添加账号、功能分配-->
     <ai-dialog :title="dialogTitle" :visible.sync="dialog" width="600px" @open="initDialogData"
-               @onConfirm="updateAccount" @closed="dialogForm={}">
+      @onConfirm="updateAccount" @closed="dialogForm = {}">
-      <el-form ref="updateAccountForm" :model="dialogForm" :rules="rules" size="small"
+      <el-form ref="updateAccountForm" :model="dialogForm" :rules="rules" size="small" label-width="120px">
-               label-width="120px">
         <el-form-item required label="姓名" prop="name">
-          <el-input v-model.trim="dialogForm.name" placeholder="请输入..." clearable
+          <el-input v-model.trim="dialogForm.name" placeholder="请输入..." clearable :maxLength="15" />
-                    :maxLength="15"/>
         </el-form-item>
         <el-form-item required label="手机号码" prop="phone">
-          <el-input v-model.trim="dialogForm.phone" placeholder="请输入..." clearable
+          <el-input v-model.trim="dialogForm.phone" placeholder="请输入..." clearable :maxLength="11" :disabled="isEdit" />
-                    :maxLength="11" :disabled="isEdit"/>
         </el-form-item>
-        <el-form-item required label="账号密码" prop="password" v-if="!isEdit" :rules="[{required: true, message: '请输入密码'}]">
+        <el-form-item required label="账号密码" prop="password" v-if="!isEdit"
-          <el-input v-model.trim="dialogForm.password" placeholder="请输入密码" clearable :minlength="6"/>
+          :rules="[{ required: true, message: '请输入密码' }]">
+          <el-input v-model.trim="dialogForm.password" placeholder="请输入密码" clearable :minlength="6" />
         </el-form-item>
-        <el-form-item required label="所属单位" prop="unitName" :rules="[{required: true, message: '请输入所属单位'}]">
+        <el-form-item required label="所属单位" prop="unitName" :rules="[{ required: true, message: '请输入所属单位' }]">
-          <el-input v-model.trim="dialogForm.unitName" placeholder="请输入所属单位" clearable/>
+          <el-input v-model.trim="dialogForm.unitName" placeholder="请输入所属单位" clearable />
         </el-form-item>
         <el-form-item required label="角色" prop="roleId">
-          <el-select size="small" placeholder="请选择角色" :value="dialogForm.roleId" filterable
+          <el-select size="small" placeholder="请选择角色" :value="dialogForm.roleId" filterable v-model="dialogForm.roleId"
-                     v-model="dialogForm.roleId" clearable>
+            clearable>
-            <el-option v-for="(op,i) in accountRoles" :key="i" :label="op.name" :value="op.id"/>
+            <el-option v-for="(op, i) in accountRoles" :key="i" :label="op.name" :value="op.id" />
           </el-select>
         </el-form-item>
       </el-form>
@@ -65,7 +62,7 @@
 </template>
 
 <script>
-import {mapState} from "vuex";
+import { mapState } from "vuex";
 
 export default {
   name: "AppSystemAccount",
@@ -93,21 +90,21 @@ export default {
     colConfigs() {
       return [
         // {type: 'selection', align: 'center'},
-        {label: "姓名", slot: "name"},
+        { label: "姓名", slot: "name" },
-        {label: "手机号", prop: "phone", align: 'center'},
+        { label: "手机号", prop: "phone", align: 'center' },
-        {label: "所属单位", prop: "unitName", align: 'center'},
+        { label: "所属单位", prop: "unitName", align: 'center' },
-        {label: "公众号", prop: "wxMpNames", align: 'center'},
+        { label: "公众号", prop: "wxMpNames", align: 'center' },
-        {label: "角色", prop: "roleName", align: 'center'},
+        { label: "角色", prop: "roleName", align: 'center' },
-        {slot: "options"}
+        { slot: "options" }
       ]
     },
     rules() {
       return {
-        name: [{required: true, message: "请填写姓名"}],
+        name: [{ required: true, message: "请填写姓名" }],
-        password: [{required: true, message: '请输入密码'}],
+        password: [{ required: true, message: '请输入密码' }],
-        unitName: [{required: true, message: "请选择所属单位"}],
+        unitName: [{ required: true, message: "请选择所属单位" }],
-        roleId: [{required: true, message: "请选择角色"}],
+        roleId: [{ required: true, message: "请选择角色" }],
-        phone: [{required: true, message: "请输入手机号码"}]
+        phone: [{ required: true, message: "请输入手机号码" }]
       }
     },
     rootArea: v => v.user.info.areaId
@@ -115,11 +112,11 @@ export default {
   data() {
     return {
       accountRoles: [],
-      page: {pageNum: 1, pageSize: 10, total: 0},
+      page: { pageNum: 1, pageSize: 10, total: 0 },
       dialog: false,
       dialogForm: {},
       tableData: [],
-      search: {condition: ""},
+      search: { condition: "" },
       ids: [],
       isShow: false,
       form: {
@@ -131,7 +128,7 @@ export default {
   methods: {
     getTableData() {
       this.instance.post("/admin/user/page", null, {
-        params: {...this.page, ...this.search}
+        params: { ...this.page, ...this.search }
       }).then(res => {
         if (res?.data) {
           this.tableData = res.data?.records
@@ -181,7 +178,7 @@ export default {
     },
     batchAllot() {
       this.dialog = true
-      this.dialogForm = {areaId: this.user.info.areaId, ids: this.ids}
+      this.dialogForm = { areaId: this.user.info.areaId, ids: this.ids }
     },
     appAllot(row) {
       this.dialog = true
@@ -209,7 +206,7 @@ export default {
     handleDelete(ids) {
       this.$confirm("是否要删除该账号?").then(() => {
         this.instance.post("/admin/user/del", null, {
-          params: {ids}
+          params: { ids }
         }).then(res => {
           if (res?.code == 0) {
             this.getTableData();
@@ -232,14 +229,16 @@ export default {
 .AppSystemAccount {
   height: 100%;
 
-  :deep( .avatar ) {
+  :deep(.avatar) {
     width: 40px;
     height: 40px;
     margin-right: 10px;
   }
 
-  :deep( .el-form ) {
+  :deep(.el-form) {
-    .el-cascader, .el-select {
+
+    .el-cascader,
+    .el-select {
       width: 100%;
     }
   }