封禁账号管理 - 增加封禁备注/是否封禁近30天关联设备

src/views/users/BlockedAdmin.vue

@@ -3,10 +3,11 @@
     <!-- 类型 -->
     <div class="inquire">
       <span class="demonstration">类型</span>
-      <el-select v-model="pageParams.type"
-                 class="input"
-                 placeholder="全部"
-                 clearable
+      <el-select
+        v-model="pageParams.type"
+        class="input"
+        placeholder="全部"
+        clearable
       >
         <el-option
           v-for="type in Object.keys(typeMap)"
@@ -19,52 +20,81 @@
     <!-- 名称 -->
     <div class="inquire">
       <span class="demonstration">搜索内容</span>
-      <el-input v-model="pageParams.blockValue" placeholder="平台号、手机号、设备号、IP地址、邮箱" class="input" style="width: 360px"></el-input>
+      <el-input
+        v-model="pageParams.blockValue"
+        placeholder="平台号、手机号、设备号、IP地址、邮箱"
+        class="input"
+        style="width: 360px"
+      ></el-input>
+    </div>
+    <!-- 封禁原因 -->
+    <div class="inquire">
+      <span class="demonstration">封禁原因</span>
+      <el-input
+        v-model="pageParams.blockDesc"
+        placeholder="请输入"
+        class="input"
+        style="width: 360px"
+      ></el-input>
     </div>
     <!-- 查询按钮 -->
-    <el-button class="primary" type="primary" @click="pageDate"
-      >查询</el-button>
+    <el-button class="primary" type="primary" @click="pageDate">查询</el-button>
     <el-button
       type="primary"
       @click="
         pageParams.type = undefined;
         pageParams.blockValue = undefined;
+        pageParams.blockDesc = undefined;
         pageDate();
       "
-      >重置搜索</el-button>
-    <el-button type="danger" @click="openEditDialog(undefined)"
-    >增加</el-button>
+      >重置搜索</el-button
+    >
+    <el-button type="danger" @click="openEditDialog(undefined)">增加</el-button>
 
     <!-- 编辑弹窗 -->
-    <el-dialog v-model="editDialog.show"
-               v-loading="editDialog.loading"
-               v-model:title="editDialog.title"
-               @close="closeEditDialog"
-               label-width="auto"
-               width="28%" center>
+    <el-dialog
+      v-model="editDialog.show"
+      v-loading="editDialog.loading"
+      v-model:title="editDialog.title"
+      @close="closeEditDialog"
+      label-width="auto"
+      width="28%"
+      center
+    >
       <el-form :model="editDialog.obj">
         <el-form-item label="封禁类型">
-          <el-select v-model="editDialog.obj.blockType"
-            placeholder="请选择类型">
+          <el-select
+            v-model="editDialog.obj.blockType"
+            placeholder="请选择类型"
+          >
             <el-option
-                v-for="type in Object.keys(typeMap)"
-                :key="type"
-                :label="typeMap[type]"
-                :value="type"
+              v-for="type in Object.keys(typeMap)"
+              :key="type"
+              :label="typeMap[type]"
+              :value="type"
             />
           </el-select>
         </el-form-item>
         <el-form-item label="封禁目标">
-          <el-input v-model="editDialog.obj.blockValue" type="textarea" placeholder="多个号码请使用英文字符,隔开" />
+          <el-input
+            v-model="editDialog.obj.blockValue"
+            type="textarea"
+            placeholder="多个号码请使用英文字符,隔开"
+          />
+        </el-form-item>
+        <el-form-item label="是否封禁近30天关联设备">
+          <el-select v-model="editDialog.obj.blockDevice" placeholder="请选择">
+            <el-option label="否" :value="0" />
+            <el-option label="是" :value="1" />
+          </el-select>
         </el-form-item>
         <el-form-item label="封禁状态">
-          <el-select v-model="editDialog.obj.blockStatus"
-                     placeholder="请选择">
+          <el-select v-model="editDialog.obj.blockStatus" placeholder="请选择">
             <el-option
-                v-for="type in Object.keys(blockStatusMap)"
-                :key="type"
-                :label="blockStatusMap[type]"
-                :value="type"
+              v-for="type in Object.keys(blockStatusMap)"
+              :key="type"
+              :label="blockStatusMap[type]"
+              :value="type"
             />
           </el-select>
         </el-form-item>
@@ -72,35 +102,89 @@
           <el-input v-model="editDialog.obj.blockDesc" />
         </el-form-item>
         <el-form-item label="开始时间">
-          <el-date-picker v-model="editDialog.obj.blockStartTime" type="datetime" value-format="YYYY-MM-DD HH:mm"/>
+          <el-date-picker
+            v-model="editDialog.obj.blockStartTime"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm"
+          />
         </el-form-item>
         <el-form-item label="结束时间">
-          <el-date-picker v-model="editDialog.obj.blockEndTime" type="datetime" value-format="YYYY-MM-DD HH:mm"/>
+          <el-date-picker
+            v-model="editDialog.obj.blockEndTime"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm"
+          />
         </el-form-item>
         <el-form-item label="操作备注">
           <el-input v-model="editDialog.obj.remark" />
         </el-form-item>
       </el-form>
+      <!-- 封禁备注 -->
+      <div style="margin-bottom: 25px; margin-top: 10px; display: flex">
+        <span
+          style="
+            display: inline-block;
+            margin-right: 20px;
+            font-weight: 700;
+            padding: 0;
+          "
+          class="control-label"
+          >封禁备注</span
+        >
+        <el-upload
+          class="avatar-uploader"
+          action="/admin/tencent/cos/uploadFile"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload"
+          :on-error="handleAvatarError"
+        >
+          <template v-if="editDialog.obj.blockImgType == 1">
+            <img :src="editDialog.obj.blockImgUrl" class="avatar" />
+          </template>
+          <template v-else>
+            <video v-if="editDialog.obj.blockImgUrl"
+                 :key="editDialog.obj.blockImgUrl"
+                 autoplay
+                 width="320"
+                 height="240"
+                 controls="controls">
+            <source :src="editDialog.obj.blockImgUrl"
+                    type="video/mp4" />
+          </video>
+          </template>
+        </el-upload>
+      </div>
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="closeEditDialog">取消</el-button>
-          <el-button v-loading="editDialog.loading" type="primary" @click="saveObj">保存</el-button>
+          <el-button
+            v-loading="editDialog.loading"
+            type="primary"
+            @click="saveObj"
+            >保存</el-button
+          >
         </div>
       </template>
     </el-dialog>
 
     <el-dialog
-        v-loading="unblockDialog.loading"
-        v-model="unblockDialog.show"
-        title="确定"
-        @close="closeUnblockDialog"
-        width="30%"
+      v-loading="unblockDialog.loading"
+      v-model="unblockDialog.show"
+      title="确定"
+      @close="closeUnblockDialog"
+      width="30%"
     >
       <span>确定要解封 {{ unblockDialog.blockValue }} 吗？</span>
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="closeUnblockDialog">取消</el-button>
-          <el-button v-loading="unblockDialog.loading" type="primary" @click="confirmUnblock">确定</el-button>
+          <el-button
+            v-loading="unblockDialog.loading"
+            type="primary"
+            @click="confirmUnblock"
+            >确定</el-button
+          >
         </div>
       </template>
     </el-dialog>
@@ -113,30 +197,73 @@
       border
       style="width: 100%; margin-top: 25px"
     >
-      <el-table-column prop="blockValue" align="center" label="封禁目标" width="320px" />
-      <el-table-column prop="blockType" align="center" label="封禁类型" >
+      <el-table-column
+        prop="blockValue"
+        align="center"
+        label="封禁目标"
+        width="320px"
+      />
+      <el-table-column prop="blockType" align="center" label="封禁类型">
         <template v-slot="scope">
-          {{getBlockTypeDesc(scope.row.blockType) }}
+          {{ getBlockTypeDesc(scope.row.blockType) }}
         </template>
       </el-table-column>
-      <el-table-column prop="blockStartTime" align="center" label="封禁开始时间" />
-      <el-table-column prop="blockEndTime" align="center" label="封禁结束时间" />
-      <el-table-column prop="blockStatus" align="center" label="封禁状态" >
+      <el-table-column
+        prop="blockStartTime"
+        align="center"
+        label="封禁开始时间"
+      />
+      <el-table-column
+        prop="blockEndTime"
+        align="center"
+        label="封禁结束时间"
+      />
+      <el-table-column prop="blockStatus" align="center" label="封禁状态">
         <template v-slot="scope">
           <el-tag v-if="scope.row.blockStatus === 1" type="danger">
-            {{getBlockStatusDesc(scope.row.blockStatus) }}
+            {{ getBlockStatusDesc(scope.row.blockStatus) }}
           </el-tag>
           <el-tag v-else type="success">
-            {{getBlockStatusDesc(scope.row.blockStatus) }}
+            {{ getBlockStatusDesc(scope.row.blockStatus) }}
           </el-tag>
         </template>
       </el-table-column>
       <el-table-column prop="blockDesc" align="center" label="封禁原因" />
+      <el-table-column prop="blockDesc" align="center" label="封禁备注" >
+        <template v-slot="scope">
+          <template v-if="scope.row.blockImgType == 1">
+            <el-image style="width: 100px; height: 100px"
+                    :src="scope.row.blockImgUrl"
+                    :zoom-rate="1.1"
+                    :preview-src-list="[scope.row.blockImgUrl ?? '']"
+                    fit="scale-down"
+                    preview-teleported="true"
+                    hide-on-click-modal="true" />
+          </template>
+          <template v-else>
+            <video
+            :key="scope.row.blockImgUrl"
+            width="320"
+            height="240"
+            controls="controls"
+          >
+            <source :src="scope.row.blockImgUrl" type="video/mp4" /></video
+        >
+          </template>
+        </template>
+        </el-table-column>
       <el-table-column prop="adminName" align="center" label="管理员" />
       <el-table-column align="center" label="操作">
         <template v-slot="scope">
-          <el-button v-if="scope.row.blockStatus === 1" type="primary" @click="openUnblockDialog(scope.row.blockValue)">解封</el-button>
-          <el-button @click="openEditDialog(scope.row.blockValue)">编辑</el-button>
+          <el-button
+            v-if="scope.row.blockStatus === 1"
+            type="primary"
+            @click="openUnblockDialog(scope.row.blockValue)"
+            >解封</el-button
+          >
+          <el-button @click="openEditDialog(scope.row.blockValue)"
+            >编辑</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -153,42 +280,39 @@
       @size-change="pageDate"
       @current-change="pageDate"
     />
-
   </div>
 </template>
 <script>
-  // 声明额外的选项
-  export default {
-    name: "BlockedAdmin",
-  }
+// 声明额外的选项
+export default {
+  name: "BlockedAdmin",
+};
 </script>
 <script setup>
-import {onMounted, reactive} from "vue";
-import {
-  page, get, save, update, del,
-} from "@/api/block/block";
+import { onMounted, reactive } from "vue";
+import { page, get, save, update, del } from "@/api/block/block";
 import { ElMessage } from "element-plus";
 
 const typeMap = {
-  "1": "平台号",
-  "2": "手机号",
-  "3": "设备号",
-  "4": "IP地址",
-  "6": "邮箱",
-}
+  1: "平台号",
+  2: "手机号",
+  3: "设备号",
+  4: "IP地址",
+  6: "邮箱",
+};
 
 const getBlockTypeDesc = (type) => {
   return typeMap[type] || "未知";
-}
+};
 
 const blockStatusMap = {
   1: "封禁中",
   2: "封禁结束",
-}
+};
 
 const getBlockStatusDesc = (type) => {
   return blockStatusMap[type] || "未知";
-}
+};
 
 const emptyObj = {
   blockValue: undefined,
@@ -198,78 +322,83 @@ const emptyObj = {
   blockStatus: "1",
   blockDesc: undefined,
   remark: undefined,
-}
+  blockDevice: 0,
+  blockImgType: "",
+  blockImgUrl: "",
+};
 
 const editDialog = reactive({
   show: false,
   loading: false,
   title: "",
   obj: Object.assign({}, emptyObj),
-})
+});
 
 const openEditDialog = (blockValue) => {
   editDialog.show = true;
   editDialog.title = "新增";
   editDialog.obj.blockStartTime = new Date().format("yyyy-MM-dd hh:mm");
 
-  if (blockValue){
+  if (blockValue) {
     editDialog.title = "编辑";
     editDialog.loading = true;
-    const params = { blockValue }
-    get(params).then((res) => {
-      if (res.code !== 200){
-        throw Error(res.message);
-      }
-      if (!res.data){
-        throw Error("获取不到记录");
-      }
+    const params = { blockValue };
+    get(params)
+      .then((res) => {
+        if (res.code !== 200) {
+          throw Error(res.message);
+        }
+        if (!res.data) {
+          throw Error("获取不到记录");
+        }
 
-      const data = res.data;
-      data.blockType = data.blockType.toString();
-      data.blockStatus = data.blockStatus.toString();
+        const data = res.data;
+        data.blockType = data.blockType.toString();
+        data.blockStatus = data.blockStatus.toString();
 
-      editDialog.obj = data;
-
-    }).catch((err) => {
-      ElMessage({
-        showClose: true,
-        message: err,
-        type: "error",
+        editDialog.obj = data;
+      })
+      .catch((err) => {
+        ElMessage({
+          showClose: true,
+          message: err,
+          type: "error",
+        });
+      })
+      .finally(() => {
+        editDialog.loading = false;
       });
-    }).finally(()=>{
-      editDialog.loading = false;
-    })
   }
-}
+};
 
 const closeEditDialog = () => {
   editDialog.show = false;
   editDialog.obj = Object.assign({}, emptyObj);
-}
+};
 
 function validObj(obj) {
   let valid = false;
-  try{
-    if (!obj.blockType || !typeMap[obj.blockType]){
+  try {
+    if (!obj.blockType || !typeMap[obj.blockType]) {
       throw Error("请选择封禁类型");
     }
-    if (!obj.blockValue || obj.blockValue === ''){
+    if (!obj.blockValue || obj.blockValue === "") {
       throw Error("请输入封禁目标");
     }
     obj.blockValue = obj.blockValue.trim();
-    if (!obj.blockType || !typeMap[obj.blockType]){
+    if (!obj.blockType || !typeMap[obj.blockType]) {
       throw Error("请选择封禁状态");
     }
-    if (!obj.blockDesc || obj.blockDesc === ''){
+    if (!obj.blockDesc || obj.blockDesc === "") {
       throw Error("请输入原因");
     }
-    if (!obj.blockStartTime || obj.blockStartTime === ''){
+    if (!obj.blockStartTime || obj.blockStartTime === "") {
       throw Error("请输入开始时间");
     }
-    if (!obj.blockEndTime || obj.blockEndTime === ''){
+    if (!obj.blockEndTime || obj.blockEndTime === "") {
       throw Error("请输入结束时间");
     }
-    if (!obj.blockDesc || obj.blockDesc === ''){
+    if (!obj.blockDesc || obj.blockDesc === "") {
       throw Error("请输入封禁原因");
     }
     valid = true;
@@ -286,52 +415,55 @@ function validObj(obj) {
 
 const saveObj = () => {
   // valid
-  if (!validObj(editDialog.obj)){
-    return
+  if (!validObj(editDialog.obj)) {
+    return;
   }
 
   editDialog.loading = true;
-  const func = editDialog.title === '新增' ? save: update;
-  func(editDialog.obj).then((res) => {
-    if (res.code !== 200 || !res.data){
-      throw Error(res.message);
-    }
-    ElMessage({
-      showClose: true,
-      message: "保存成功",
-      type: "success",
+  const func = editDialog.title === "新增" ? save : update;
+  func(editDialog.obj)
+    .then((res) => {
+      if (res.code !== 200 || !res.data) {
+        throw Error(res.message);
+      }
+      ElMessage({
+        showClose: true,
+        message: "保存成功",
+        type: "success",
+      });
+      closeEditDialog();
+      pageDate();
+    })
+    .catch((err) => {
+      ElMessage({
+        showClose: true,
+        message: err,
+        type: "error",
+      });
+    })
+    .finally(() => {
+      editDialog.loading = false;
     });
-    closeEditDialog();
-    pageDate();
-  }).catch((err) => {
-    ElMessage({
-      showClose: true,
-      message: err,
-      type: "error",
-    });
-  }).finally(() => {
-    editDialog.loading = false;
-  })
-}
+};
 
 const unblockDialog = reactive({
   show: false,
   loading: false,
   blockValue: undefined,
-})
+});
 
 const openUnblockDialog = (blockValue) => {
   unblockDialog.show = true;
   unblockDialog.blockValue = blockValue;
-}
+};
 
 const closeUnblockDialog = () => {
   unblockDialog.show = false;
   unblockDialog.blockValue = undefined;
-}
+};
 
 const confirmUnblock = () => {
-  if (!unblockDialog.blockValue){
+  if (!unblockDialog.blockValue) {
     ElMessage({
       showClose: true,
       message: "请选择要解封的记录",
@@ -341,33 +473,37 @@ const confirmUnblock = () => {
   }
 
   unblockDialog.loading = true;
-  const params = { blockValue: unblockDialog.blockValue }
-  del(params).then((res) => {
-    if (res.code !== 200 || !res.data){
-      throw Error(res.message);
-    }
-    ElMessage({
-      showClose: true,
-      message: "解封成功",
-      type: "success",
+  const params = { blockValue: unblockDialog.blockValue };
+  del(params)
+    .then((res) => {
+      if (res.code !== 200 || !res.data) {
+        throw Error(res.message);
+      }
+      ElMessage({
+        showClose: true,
+        message: "解封成功",
+        type: "success",
+      });
+      closeUnblockDialog();
+      pageDate();
+    })
+    .catch((err) => {
+      ElMessage({
+        showClose: true,
+        message: err,
+        type: "error",
+      });
+    })
+    .finally(() => {
+      unblockDialog.loading = false;
     });
-    closeUnblockDialog();
-    pageDate();
-  }).catch((err) => {
-    ElMessage({
-      showClose: true,
-      message: err,
-      type: "error",
-    });
-  }).finally(() => {
-    unblockDialog.loading = false;
-  })
-}
+};
 
 const pageParams = reactive({
   type: undefined,
   blockValue: undefined,
-})
+  blockDesc: undefined,
+});
 
 const table = reactive({
   loading: false,
@@ -375,32 +511,79 @@ const table = reactive({
   total: 0,
   pageNum: 1,
   pageSize: 20,
-})
+});
 
-const pageDate = () =>{
+const pageDate = () => {
   table.loading = true;
-  const params = Object.assign({}, pageParams, {pageNum: table.pageNum, pageSize: table.pageSize})
-  page(params).then((res) => {
-    if (res.code !== 200){
-      throw Error(res.message);
+  const params = Object.assign({}, pageParams, {
+    pageNum: table.pageNum,
+    pageSize: table.pageSize,
+  });
+  page(params)
+    .then((res) => {
+      if (res.code !== 200) {
+        throw Error(res.message);
+      }
+      table.data = res.data.records;
+      table.total = res.data.total;
+    })
+    .catch((err) => {
+      ElMessage({
+        showClose: true,
+        message: err,
+        type: "error",
+      });
+    })
+    .finally(() => {
+      table.loading = false;
+    });
+};
+const beforeAvatarUpload = () => {
+  ElMessage({
+    showClose: true,
+    message: "上传中~",
+    type: "warning",
+  });
+};
+const handleAvatarError = () => {
+  ElMessage({
+    showClose: true,
+    message: "上传失败！",
+    type: "error",
+  });
+};
+const handleAvatarSuccess = (res, file) => {
+  console.log(res, file);
+  if (res.code == 200) {
+    if (
+      res.data.fileType == "MP4" ||
+      res.data.fileType == "MP3" ||
+      res.data.fileType == "AVI"
+    ) {
+      editDialog.obj.blockImgType = 2;
+    } else {
+      editDialog.obj.blockImgType = 1;
     }
-    table.data = res.data.records;
-    table.total = res.data.total;
-  }).catch((err) => {
+    editDialog.obj.blockImgUrl = res.data.url;
     ElMessage({
       showClose: true,
-      message: err,
-      type: "error",
+      message: "上传成功！",
+      type: "success",
     });
-  }).finally(()=>{
-    table.loading = false;
-  });
-}
+  } else {
+    ElMessage.error(res.message);
+  }
+  // this.controlsObj.imageUrl1 = file.response.data;
+  // ElMessage({
+  //   showClose: true,
+  //   message: "上传成功！",
+  //   type: "success",
+  // });
+};
 
-onMounted(()=>{
+onMounted(() => {
   pageDate();
-})
-
+});
 </script>
 <style lang="less" scoped>
 .box {
@@ -463,4 +646,9 @@ onMounted(()=>{
     height: 150px;
   }
 }
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
 </style>