feat(靓号审批页): 驳回操作新增弹窗，以便于填写备注

src/api/user.js

@@ -1,76 +1,76 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 export function login(data) {
   return request({
-    url: '/account/token',
-    method: 'post',
+    url: "/account/token",
+    method: "post",
     data
-  })
+  });
 }
 
 export function getInfo() {
   return request({
-    url: '/account/info',
-    method: 'get'
-  })
+    url: "/account/info",
+    method: "get"
+  });
 }
 
 export function logout() {
   return request({
-    url: '/mock/user/logout',
-    method: 'post'
-  })
+    url: "/mock/user/logout",
+    method: "post"
+  });
 }
 
 // 获取账号菜单
 export function getAccountMenus() {
   return request({
-    url: '/account/menus',
-    method: 'get'
-  })
+    url: "/account/menus",
+    method: "get"
+  });
 }
 
 // 获取按钮权限
 export function getButtonPermissions() {
   return request({
-    url: '/account/buttons/aliases',
-    method: 'get'
-  })
+    url: "/account/buttons/aliases",
+    method: "get"
+  });
 }
 
 // 用户道具流水列表
 export function userPropsTable(params) {
   return request({
-    url: '/running/water/user/props/page',
-    method: 'get',
+    url: "/running/water/user/props/page",
+    method: "get",
     params
-  })
+  });
 }
 
 // 用户购买麦位类型流水列表
 export function userPropsMikeType(params) {
   return request({
-    url: '/room-mike-type/page',
-    method: 'get',
+    url: "/room-mike-type/page",
+    method: "get",
     params
-  })
+  });
 }
 
 // 用户靓号申请列表
 export function userBeautifulNumberApplyTable(params) {
   return request({
-    url: '/beautiful/number/apply/page',
-    method: 'get',
+    url: "/beautiful/number/apply/page",
+    method: "get",
     params
-  })
+  });
 }
 
 // 处理靓号申请状态
-export function handleBeautifulNumberApplyState(id, state) {
+export function handleBeautifulNumberApplyState(id, state, remark) {
   return request({
-    url: `/beautiful/number/apply/handle/${id}/${state}`,
-    method: 'get'
-  })
+    url: `/beautiful/number/apply/handle/${id}/${state}?remark=${remark}`,
+    method: "get"
+  });
 }
 
 // ////////////////////////////////////////////////////// 用户银行卡 start ////////////////////////////////////////////////////////////////
@@ -78,52 +78,52 @@ export function handleBeautifulNumberApplyState(id, state) {
 // 根据团队id获得银行卡列表.
 export function listBankCardTable(userId) {
   return request({
-    url: '/user/bank-card/list/user-id/' + userId,
-    method: 'get'
-  })
+    url: "/user/bank-card/list/user-id/" + userId,
+    method: "get"
+  });
 }
 
 // 团队通过银行卡.
 export function listUserPassBankCards(userId) {
   return request({
-    url: '/user/bank-card/pass-list',
-    method: 'get',
+    url: "/user/bank-card/pass-list",
+    method: "get",
     params: { userId }
-  })
+  });
 }
 
 // 修改银行卡资料
 export function updateBankCard(data) {
   return request({
-    url: '/user/bank-card/update',
-    method: 'post',
+    url: "/user/bank-card/update",
+    method: "post",
     data
-  })
+  });
 }
 
 // 添加银行卡资料
 export function addBankCard(data) {
   return request({
-    url: '/user/bank-card/add',
-    method: 'post',
+    url: "/user/bank-card/add",
+    method: "post",
     data
-  })
+  });
 }
 
 // 根据银行卡id删除.
 export function deleteBankCard(bankCardId) {
   return request({
-    url: '/user/bank-card/delete/' + bankCardId,
-    method: 'get'
-  })
+    url: "/user/bank-card/delete/" + bankCardId,
+    method: "get"
+  });
 }
 
 // 切换使用中的银行卡.
 export function useBankCard(bankCardId) {
   return request({
-    url: '/user/bank-card/use/' + bankCardId,
-    method: 'get'
-  })
+    url: "/user/bank-card/use/" + bankCardId,
+    method: "get"
+  });
 }
 
 // ////////////////////////////////////////////////////// 用户银行卡 end ////////////////////////////////////////////////////////////////
@@ -131,24 +131,24 @@ export function useBankCard(bankCardId) {
 // 用户密码日志列表
 export function userPasswordLog(params) {
   return request({
-    url: '/user-password-log/page',
-    method: 'get',
+    url: "/user-password-log/page",
+    method: "get",
     params
-  })
+  });
 }
 // 用户上传专属礼物分页列表
 export function pageUserCustomGift(params) {
   return request({
-    url: '/user/custom-gift',
-    method: 'get',
+    url: "/user/custom-gift",
+    method: "get",
     params
-  })
+  });
 }
 
 // 切换用户上传专属礼物状态
 export function switchStatus(id, status) {
   return request({
     url: `/user/custom-gift/${id}/${status}`,
-    method: 'get'
-  })
+    method: "get"
+  });
 }

src/views/user/beautiful-number-apply/components/applyHandle.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-dialog
+    title="申请处理"
+    :visible="true"
+    width="30%"
+    :before-close="handleClose"
+  >
+    <el-form
+      ref="form"
+      v-loading="loading"
+      :model="form"
+      :rules="formRules"
+      label-width="80px"
+    >
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model.trim="form.remark"
+          type="textarea"
+          @keyup.native="descriptionKeyup"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submit()">提交</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import {
+  userBeautifulNumberApplyTable,
+  handleBeautifulNumberApplyState
+} from "@/api/user";
+
+export default {
+  name: "ApplyHandle",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    userId: {
+      type: String,
+      required: true
+    }
+  },
+
+  data() {
+    const commonRules = [
+      { required: true, message: "必填字段不可为空", trigger: "blur" }
+    ];
+    return {
+      loading: false,
+      form: {
+        id: this.userId,
+        state: 2,
+        remark: ""
+      },
+      formRules: {
+        remark: commonRules
+      }
+    };
+  },
+
+  methods: {
+    // 关闭窗口
+    handleClose() {
+      this.$emit("close");
+    },
+
+    // 提交按钮
+    submit() {
+      const that = this;
+      that.$refs.form.validate(valid => {
+        if (!valid) {
+          console.error("error submit!!");
+          return false;
+        }
+
+        that.loading = true;
+        handleBeautifulNumberApplyState(
+          that.form.id,
+          that.form.state,
+          that.form.remark
+        )
+          .then(res => {
+            that.loading = false;
+            that.$emit("success");
+          })
+          .catch(er => {
+            console.error(er);
+            that.loading = false;
+          });
+      });
+    }
+  }
+};
+</script>

src/views/user/beautiful-number-apply/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="app-container">
+    <!-- 搜索栏 -->
     <div class="filter-container">
+      <!-- 系统选择框 -->
       <el-select
         v-model="listQuery.sysOrigin"
         placeholder="系统"
@@ -15,13 +17,13 @@
           :value="item.value"
         >
           <span style="float: left;">
-            <sys-origin-icon
-              :icon="item.value"
-              :desc="item.value"
-            /></span>
+            <sys-origin-icon :icon="item.value" :desc="item.value"
+          /></span>
           <span style="float: left;margin-left:10px">{{ item.label }}</span>
         </el-option>
       </el-select>
+
+      <!-- 用户ID -->
       <div class="filter-item">
         <account-input
           v-model="listQuery.userId"
@@ -29,6 +31,8 @@
           placeholder="用户ID"
         />
       </div>
+
+      <!-- 搜索按钮 -->
       <el-button
         class="filter-item"
         type="primary"
@@ -39,6 +43,8 @@
         搜索
       </el-button>
     </div>
+
+    <!-- 数据列表 -->
     <el-table
       v-loading="listLoading"
       :data="list"
@@ -46,6 +52,7 @@
       fit
       highlight-current-row
     >
+      <!-- 来源系统 -->
       <el-table-column prop="sysOrigin" label="来源系统" align="center">
         <template slot-scope="scope">
           <sys-origin-icon
@@ -54,7 +61,11 @@
           />
         </template>
       </el-table-column>
-      <el-table-column prop="id" label="ID" align="center" />
+
+      <!-- ID -->
+      <el-table-column prop="applyAccount" label="ID" align="center" />
+
+      <!-- 申请人 -->
       <el-table-column label="申请人" align="center">
         <template slot-scope="scope">
           <el-link
@@ -66,6 +77,8 @@
           </el-link>
         </template>
       </el-table-column>
+
+      <!-- 状态 -->
       <el-table-column label="状态" align="center">
         <template slot-scope="scope">
           <span v-if="0 == scope.row.state">待处理</span>
@@ -73,6 +86,8 @@
           <span v-if="2 == scope.row.state" style="color:red">驳回</span>
         </template>
       </el-table-column>
+
+      <!-- 创建时间 -->
       <el-table-column
         prop="createTime"
         label="创建时间"
@@ -83,20 +98,27 @@
           {{ scope.row.createTime | dateFormat }}
         </template>
       </el-table-column>
+
+      <!-- 操作 -->
       <el-table-column fixed="right" label="操作" align="center">
         <template slot-scope="scope">
           <el-button
             type="text"
+            :disabled="scope.row.state != 0"
             @click.native="handleApply(scope.row.id, 1)"
-          >同意</el-button>
+            >同意</el-button
+          >
           <el-button
             type="text"
-            @click.native="handleApply(scope.row.id, 2)"
-          >驳回</el-button>
+            :disabled="scope.row.state != 0"
+            @click.native="showRejectWindow(scope.row.id)"
+            >驳回</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
+    <!-- 分页按钮 -->
     <pagination
       v-show="total > 0"
       :total="total"
@@ -110,94 +132,129 @@
       :user-id="thatSelectedUserId"
       @close="userDeatilsDrawerVisible = false"
     />
+
+    <!-- 驳回窗口 -->
+    <apply-handle
+      v-if="RejectWindowVisible"
+      :user-id="RejectTargetID"
+      @success="renderDataSuccess"
+      @close="RejectWindowVisible = false"
+    />
   </div>
 </template>
 
 <script>
+import { pickerOptions } from "@/constant/el-const";
+import { mapGetters } from "vuex";
+
 import {
   userBeautifulNumberApplyTable,
   handleBeautifulNumberApplyState
-} from '@/api/user'
-import Pagination from '@/components/Pagination'
-import { pickerOptions } from '@/constant/el-const'
-import { mapGetters } from 'vuex'
+} from "@/api/user";
+
+import Pagination from "@/components/Pagination";
+import ApplyHandle from "./components/applyHandle.vue";
 
 export default {
-  name: 'BeautifulNumberApply',
-  components: { Pagination },
+  name: "BeautifulNumberApply",
+  components: { Pagination, ApplyHandle },
   data() {
     return {
       searchDisabled: false,
       pickerOptions,
       userDeatilsDrawerVisible: false,
-      thatSelectedUserId: '',
+      thatSelectedUserId: "",
       familyMemberDialogVisible: false,
-      thatSelectedFamilyId: '',
+      thatSelectedFamilyId: "",
       list: [],
       total: 0,
       rangeDate: [],
       listQuery: {
         cursor: 1,
         limit: 20,
-        userId: '',
-        sysOrigin: ''
+        userId: "",
+        sysOrigin: ""
       },
-      listLoading: true
-    }
+      listLoading: true,
+      RejectWindowVisible: false, //拒绝窗口
+
+      // 驳回对象id
+      RejectTargetID: ""
+    };
   },
   computed: {
-    ...mapGetters(['permissionsSysOriginPlatforms'])
+    ...mapGetters(["permissionsSysOriginPlatforms"])
   },
   created() {
-    const that = this
-    const querySystem = this.permissionsSysOriginPlatforms[0]
+    const that = this;
+    const querySystem = this.permissionsSysOriginPlatforms[0];
     if (!querySystem) {
-      return
+      return;
     }
-    that.listQuery.sysOrigin = querySystem.value
-    that.renderData()
+    that.listQuery.sysOrigin = querySystem.value;
+    that.renderData();
   },
   methods: {
     renderData(isClean) {
-      const that = this
+      const that = this;
       if (isClean === true) {
-        that.list = []
-        that.listQuery.cursor = 1
+        that.list = [];
+        that.listQuery.cursor = 1;
       }
-      that.listLoading = true
+      that.listLoading = true;
       userBeautifulNumberApplyTable(that.listQuery).then(res => {
-        const { body } = res
-        that.total = body.total || 0
-        that.list = body.records
-        that.listLoading = false
-      })
+        const { body } = res;
+        that.total = body.total || 0;
+        that.list = body.records;
+        that.listLoading = false;
+      });
     },
     handleSearch() {
-      this.renderData(true)
+      this.renderData(true);
     },
     queryUserDetails(id) {
-      this.userDeatilsDrawerVisible = true
-      this.thatSelectedUserId = id
+      this.userDeatilsDrawerVisible = true;
+      this.thatSelectedUserId = id;
     },
-    handleApply(id, state) {
-      const that = this
-      that.listLoading = true
-      handleBeautifulNumberApplyState(id, state)
+
+    // 操作按钮
+    handleApply(id, state, remark) {
+      const that = this;
+      that.listLoading = true;
+      handleBeautifulNumberApplyState(id, state, remark)
         .then(res => {
-          that.listLoading = false
+          that.listLoading = false;
           that.$message({
-            message: 'Successful',
-            type: 'success'
-          })
-          that.renderData()
+            message: "Successful",
+            type: "success"
+          });
+          that.renderData();
         })
         .catch(er => {
-          console.error(er)
-          that.listLoading = false
-        })
+          console.error(er);
+          that.listLoading = false;
+        });
+    },
+
+    // 打开拒绝窗口
+    showRejectWindow(id) {
+      const that = this;
+      that.RejectTargetID = id;
+      that.RejectWindowVisible = true;
+    },
+
+    // 成功
+    renderDataSuccess() {
+      const that = this;
+      that.RejectWindowVisible = false;
+      this.$message({
+        message: "Successful",
+        type: "success"
+      });
+      this.renderData();
     }
   }
-}
+};
 </script>
 <style scoped lang="scss">
 .store-table-expand {