init

src/views/cai/userForbid/index.vue

@@ -1,6 +1,24 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
+      <el-form-item label="封号对象" prop="member">
+        <el-input
+            v-model="queryParams.member"
+            clearable
+            @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="封号类型" prop="type">
+        <el-select v-model="queryParams.type" clearable size="small">
+          <el-option
+              v-for="dict in forbidTypeList"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+              @keyup.enter.native="handleQuery"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -14,7 +32,16 @@
           <cai-dict-tag :options="forbidTypeList" :value="scope.row.type" />
         </template>
       </el-table-column>
-      <el-table-column label="封号对象" align="center" prop="member" />
+      <el-table-column label="封号对象" align="center" prop="member">
+        <template v-slot="scope">
+          <span v-if="scope.row.type === 1">
+            {{scope.row.nickname}}【{{scope.row.member}}】<image-avatar :src="scope.row.avatar"/>
+          </span>
+          <span v-if="scope.row.type !== 1">
+            {{scope.row.member}}
+          </span>
+        </template>
+      </el-table-column>
       <el-table-column label="开始时间" align="center" prop="beginTime" />
       <el-table-column label="结束时间" align="center" prop="endTime" />
       <el-table-column label="最后封禁理由" align="center" prop="reason" />
@@ -23,7 +50,7 @@
           <cai-dict-tag :options="forbidStatusList" :value="scope.row.forbidStatus" />
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="60">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="120">
         <template v-slot="scope">
           <el-button
             size="mini"
@@ -48,18 +75,25 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <user-forbid-log-list v-if="userForbidLogListVisible" ref="userForbidLogList" />
   </div>
 </template>
 
 <script>
-import { delUserForbid, listUserForbid } from '@/api/cai/userForbid'
+import {listUserForbid, unForbid} from '@/api/cai/userForbid'
 import {forbidStatusList, forbidTimeList, forbidTypeList} from '@/constant/statusMap'
+import UserForbidLogList from "@/views/cai/userForbid/user-forbid-log-list";
 
 export default {
   name: "UserForbid",
+  components:{
+    UserForbidLogList
+  },
   data() {
     return {
       forbidTimeList,forbidTypeList,forbidStatusList,
+      userForbidLogListVisible: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -78,14 +112,10 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        userUsercode: undefined,
+        userMobile: undefined,
         type: undefined,
-        sourceId: undefined,
         member: undefined,
-        forbidTime: undefined,
-        beginTime: undefined,
-        endTime: undefined,
-        originUid: undefined,
-        reason: undefined
       },
     };
   },
@@ -118,11 +148,24 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
-    handleForbid(){
-
+    handleForbid(row){
+      this.$modal.confirm('是否确认解封对象："' + row.member + '"的数据项？').then(() => {
+        this.loading = true;
+        return unForbid(row.id);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("解封成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
     },
-    handleForbidLogInfo(){
-
+    handleForbidLogInfo(row){
+      this.userForbidLogListVisible = true
+      this.$nextTick(() => {
+        this.$refs.userForbidLogList.init(row.member)
+      })
     }
   }
 };

src/views/cai/userForbid/user-forbid-log-list.vue

@@ -0,0 +1,129 @@
+<template>
+  <el-dialog title="账户明细" :close-on-click-modal="false" :visible.sync="open" width="1000px" append-to-body>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="封号类型" prop="type">
+        <el-select v-model="queryParams.type" clearable size="small">
+          <el-option
+              v-for="dict in forbidTypeList"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+              @keyup.enter.native="handleQuery"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="封号时长" prop="forbidTime">
+        <el-select v-model="queryParams.forbidTime" clearable size="small">
+          <el-option
+              v-for="dict in forbidTimeList"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+              @keyup.enter.native="handleQuery"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="userForbidLogList">
+      <el-table-column label="类型" align="center" prop="type">
+        <template v-slot="scope">
+          <cai-dict-tag :options="forbidTypeList" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column label="封号对象" align="center" prop="member" >
+        <template v-slot="scope">
+          <span v-if="scope.row.type === 1">
+            {{scope.row.nickname}}【{{scope.row.member}}】<image-avatar :src="scope.row.avatar"/>
+          </span>
+          <span v-if="scope.row.type !== 1">
+            {{scope.row.member}}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="封号时长" align="center" prop="forbidTime">
+        <template v-slot="scope">
+          <cai-dict-tag :options="forbidTimeList" :value="scope.row.forbidTime" />
+        </template>
+      </el-table-column>
+      <el-table-column label="理由" align="center" prop="reason"/>
+      <el-table-column label="封号时间" align="center" prop="createTime"/>
+    </el-table>
+
+    <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+    />
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="open = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import {forbidStatusList, forbidTimeList, forbidTypeList} from "@/constant/statusMap";
+import {listUserForbidLog} from "@/api/cai/userForbidLog";
+
+export default {
+  components: {
+  },
+  data () {
+    return {
+      forbidTimeList,forbidTypeList,forbidStatusList,
+      open: false,
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 账户明细表格数据
+      userForbidLogList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        type: undefined,
+        member: undefined,
+        forbidTime: undefined,
+      },
+      changeTypeList:[],
+    }
+  },
+  created() {
+  },
+  methods: {
+    init (member) {
+      this.open = true;
+      this.queryParams.member = member
+      this.getList();
+    },
+    /** 查询账户明细列表 */
+    getList() {
+      this.loading = true;
+      listUserForbidLog(this.queryParams).then(response => {
+        this.userForbidLogList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+  }
+}
+</script>