页面优化

src/views/admin/settings/accounts/index.vue

@@ -40,7 +40,7 @@
       <el-table-column prop="username" label="登录名" align="center" />
       <el-table-column prop="linkMan" label="联系人" align="center" />
       <el-table-column label="手机号" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ row.mobile || '—' }}</span>
         </template>
       </el-table-column>
@@ -56,7 +56,12 @@
       </el-table-column>
       <el-table-column label="操作" align="center" width="200">
         <template slot-scope="{ row }">
-          <el-button type="primary" size="mini" :disabled="!row.id" @click="navigationTo(`accounts/edit?type=edit&id=${row.id}`)">编辑</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="!row.id"
+            @click="navigationTo(`accounts/edit?type=edit&id=${row.id}`)"
+          >编辑</el-button>
           <el-button type="danger" size="mini" :disabled="!row.id" @click="removeUser(row)">删除</el-button>
         </template>
       </el-table-column>
@@ -94,24 +99,34 @@ export default {
     },
     // 获取用户列表
     fetchUserList() {
-      fetchUserList(this.listQuery).then(res => {
+      fetchUserList(this.listQuery).then((res) => {
         console.log(res)
         this.list = [...this.list, ...res.data.list]
       })
     },
     // 删除用户
     removeUser(row) {
-      deleteUser(row.id).then(res => {
-        this.$message.success('删除用户成功')
-        this.getList()
+      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       })
+        .then(() => {
+          deleteUser(row.id).then((res) => {
+            this.$message.success('删除用户成功')
+            this.getList()
+          })
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.avatar{
+.avatar {
   display: block;
   width: 40px;
   height: 40px;

src/views/normal/club/device/bind.vue

@@ -2,12 +2,12 @@
   <div class="page-form-container">
     <el-form ref="form" label-width="110px" :model="formData" :rules="rules">
       <el-form-item label="认证方式:">关联已认证设备</el-form-item>
-      <el-form-item label="选设备SN码:" prop="sncodeType">
+      <!-- <el-form-item label="选设备SN码:" prop="sncodeType">
         <el-radio-group v-model="formData.sncodeType" size="mini">
           <el-radio :label="1">所有设备SN码</el-radio>
           <el-radio :label="2">关联机构设备SN码</el-radio>
         </el-radio-group>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="SN码列表:" prop="snList">
         <el-checkbox-group v-model="formData.snList" />
         <el-button size="mini" type="primary" @click="onChooseCode">选择SN码</el-button>
@@ -35,6 +35,13 @@
 
     <!-- 选择sn码 -->
     <el-dialog :title="dialogTextTip" :visible.sync="dialogCodeListVisible" width="30%" :show-close="false">
+      <div class="sncode-cate">
+        <div class="lable">选设备SN码：</div>
+        <el-radio-group v-model="formData.sncodeType" size="mini" @change="onChooseCode">
+          <el-radio :label="1">所有设备SN码</el-radio>
+          <el-radio :label="2">关联机构设备SN码</el-radio>
+        </el-radio-group>
+      </div>
       <sncode-list
         v-if="dialogCodeListVisible"
         :selection="true"
@@ -196,4 +203,9 @@ export default {
     margin-bottom: 0;
   }
 }
+.sncode-cate {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
 </style>

src/views/normal/settings/accounts/index.vue

@@ -40,7 +40,7 @@
       <el-table-column prop="loginAccount" label="登录名" align="center" />
       <el-table-column prop="linkMan" label="联系人" align="center" />
       <el-table-column label="手机号" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ row.mobile || '—' }}</span>
         </template>
       </el-table-column>
@@ -56,7 +56,12 @@
       </el-table-column>
       <el-table-column label="操作" align="center" width="200">
         <template slot-scope="{ row }">
-          <el-button type="primary" size="mini" :disabled="!row.id" @click="navigationTo(`accounts/edit?type=edit&id=${row.id}`)">编辑</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="!row.id"
+            @click="navigationTo(`accounts/edit?type=edit&id=${row.id}`)"
+          >编辑</el-button>
           <el-button type="danger" size="mini" :disabled="!row.id" @click="removeUser(row)">删除</el-button>
         </template>
       </el-table-column>
@@ -94,24 +99,34 @@ export default {
     },
     // 获取用户列表
     fetchUserList() {
-      fetchUserList(this.listQuery).then(res => {
+      fetchUserList(this.listQuery).then((res) => {
         console.log(res)
         this.list = [...this.list, ...res.data.list]
       })
     },
     // 删除用户
     removeUser(row) {
-      deleteUser(row.id).then(res => {
-        this.$message.success('删除用户成功')
-        this.getList()
+      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       })
+        .then(() => {
+          deleteUser(row.id).then((res) => {
+            this.$message.success('删除用户成功')
+            this.getList()
+          })
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.avatar{
+.avatar {
   display: block;
   width: 40px;
   height: 40px;