From c8e64a1abfba3392f199c4d5f8a40e486285872d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E6=80=AA?= <690927457@qq.com>
Date: Fri, 29 Dec 2023 00:09:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=83=8C=E6=99=AF=E5=9B=BE?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bgList.js          |  40 +++++
 src/view/article/index.vue |   8 +-
 src/view/bgList/index.vue  | 344 +++++++++++++++++++++++++++++++++++++
 3 files changed, 390 insertions(+), 2 deletions(-)
 create mode 100644 src/api/bgList.js
 create mode 100644 src/view/bgList/index.vue

diff --git a/src/api/bgList.js b/src/api/bgList.js
new file mode 100644
index 0000000..71cafe4
--- /dev/null
+++ b/src/api/bgList.js
@@ -0,0 +1,40 @@
+import service from '@/utils/request'
+const api = {
+  // 背景图api
+  getBgManageList: data => {
+    return service({
+      url: '/poster/list',
+      method: 'get',
+      params: data
+    })
+  },
+  addBgManage: data => {
+    return service({
+      url: '/poster',
+      method: 'post',
+      data
+    })
+  },
+  editBgManage: data => {
+    return service({
+      url: '/poster',
+      method: 'put',
+      data
+    })
+  },
+  delBg: data => {
+    return service({
+      url: '/poster',
+      method: 'delete',
+      data
+    })
+  },
+  editBgState: data => {
+    return service({
+      url: '/banner/status',
+      method: 'put',
+      data
+    })
+  },
+}
+export default api
diff --git a/src/view/article/index.vue b/src/view/article/index.vue
index 0f4992d..26f1376 100644
--- a/src/view/article/index.vue
+++ b/src/view/article/index.vue
@@ -296,9 +296,10 @@ function beforeAvatarUpload(file) {
               <div class="show-content text-ellipsis-1" v-html="scope.row.content"></div>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="封面图" min-width="150">
+        <el-table-column align="left" label="封面图" min-width="50">
           <template #default="scope">
-              <img class="lbt-thumb" :src="scope.row.cover_img" alt="">
+              <!-- <img class="lbt-thumb" :src="scope.row.cover_img" alt=""> -->
+              <el-image :src="scope.row.cover_img" fit="cover" />
             </template>
         </el-table-column>
         <el-table-column align="left" label="阅读量" prop="reading_num" />
@@ -413,6 +414,9 @@ function beforeAvatarUpload(file) {
   </div>
 </template>
 <style scoped lang="scss">
+:deep(.el-upload--text img) {
+  width: 100px;
+}
 .option-item {
     display: flex;
     align-items: center;
diff --git a/src/view/bgList/index.vue b/src/view/bgList/index.vue
new file mode 100644
index 0000000..b980d39
--- /dev/null
+++ b/src/view/bgList/index.vue
@@ -0,0 +1,344 @@
+<script setup>
+// 引入依赖
+import api from '@/api/bgList'
+// import { toSQLLine } from '@/utils/stringFun'
+// import WarningBar from '@/components/warningBar/warningBar.vue'
+import { ref, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRouter, useRoute } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+const dialogFormVisible = ref(false)
+import { useUserStore } from '@/pinia/modules/user'
+const userStore = useUserStore()
+import { parseTime } from '@/utils'
+// import { fa } from 'element-plus/es/locale'
+// 变量
+const path = ref(import.meta.env.VITE_BASE_API)
+const queryParams = ref({
+  page: 1,
+  pageSize: 10
+})
+const deleteVisible = ref(false)
+const lbt_ids = ref([])
+const dialogTitle = ref('')
+const form = ref({ status: '1' })
+// const lbtType_options = ref([
+//   {
+//     label: '首页',
+//     value: 1
+//   }
+// ])
+const rules = ref({
+  // lbtName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  url: [{ required: true, message: '请选择素材', trigger: 'blur' }],
+  link: [{ required: true, message: '请填写跳转链接', trigger: 'blur' }],
+  // lbtType: [{ required: true, message: '请选择展示位置', trigger: 'blur' }]
+})
+const ruleFormRef = ref(null)
+const tableData = ref([])
+const total = ref(0)
+// 生命周期
+onMounted(() => {
+  getLbtList()
+})
+// 方法
+async function getLbtList() {
+  const res = await api.getBgManageList(queryParams.value)
+  if (res.code === 0) {
+    tableData.value = res.data.list
+    total.value = res.data.total
+  }
+}
+function openDialog(type) {
+  dialogFormVisible.value = true
+  switch (type) {
+    case 'add':
+      dialogTitle.value = '新增背景图'
+      break
+    case 'edit':
+      dialogTitle.value = '编辑背景图'
+      break
+  }
+}
+async function onDelete() {
+  const ids = lbt_ids.value.map(item => item.banner_id)
+  const res = await api.delBg({ ids })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: res.msg
+    })
+    // if (tableData.value.length === ids.length && page.value > 1) {
+    //   page.value--
+    // }
+    deleteVisible.value = false
+    getLbtList()
+  }
+}
+function closeDialog() {
+  dialogFormVisible.value = false
+  form.value = { status: '1' }
+}
+function handleAvatarSuccess(res) {
+  console.log(res)
+  form.value.url = res.data.file.url
+}
+function beforeAvatarUpload(file) {
+  const isLt05M = file.size / 1024 / 1024 < 20
+  const isJPG = file.type.indexOf('image/') === -1
+  if (isJPG) {
+    ElMessage.error('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件')
+  }
+  if (!isLt05M) {
+    ElMessage.error('上传头像图片大小不能超过 2M!')
+  }
+  return !isJPG && isLt05M
+}
+function enterDialog() {
+  console.log(form.value)
+  submitForm(ruleFormRef.value)
+}
+const submitForm = async(formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+      saveForm()
+    } else {
+      // console.log('error submit!', fields)
+    }
+  })
+}
+async function saveForm() {
+//   form.value.status = parseInt(form.value.status)
+//   form.value.linkType = parseInt(form.value.linkType)
+//   form.value.lbtType = parseInt(form.value.lbtType)
+  const params = { // 新参数
+    url: form.value.url,
+    remark: form.value.remark
+    // link: form.value.link
+  }
+  let func_name = ''
+  if (form.value.ID) { // 编辑
+    func_name = 'editBgManage'
+    params.ID = form.value.ID
+  } else {
+    func_name = 'addBgManage'
+  }
+  const res = await api[func_name](params)
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '操作成功!'
+    })
+    getLbtList()
+    closeDialog()
+  }
+}
+const handleSelectionChange = (val) => {
+  lbt_ids.value = val
+}
+function editLbtFunc(item) {
+  console.log(item)
+  form.value = item
+  openDialog('edit')
+}
+function delLbtFunc(item) {
+  ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async() => {
+      const res = await api.delBg({
+        // ids: [item.ID]
+        id: item.ID
+      })
+      if (res.code === 0) {
+        ElMessage({
+          type: 'success',
+          message: '删除成功!'
+        })
+        // if (tableData.value.length === 1 && page.value > 1) {
+        //   page.value--
+        // }
+        getLbtList()
+      }
+    }, () => {
+    })
+}
+function handleCurrentChange(val) {
+  queryParams.value.page = val
+  getLbtList()
+}
+function handleSizeChange(val) {
+  queryParams.value.pageSize = val
+  getLbtList()
+}
+const state_loading = ref(false)
+async function changeStateFunc(event, row) { // 改变状态
+  // console.log('changeStateFunc is ====', row, event)
+  // state_loading.value = true
+  // const res = await api.editLbtState({ status: row.status })
+  // state_loading.value = false
+  // // eslint-disable-next-line no-empty
+  // if (res.code === 0) {
+  //   ElMessage({
+  //     type: 'success',
+  //     message: '修改成功!'
+  //   })
+  // return true
+  // } else {
+  //   return false
+  // }
+}
+async function beforeChangeFunc(index, row) {
+  // console.log(row, index)
+  // return false
+  state_loading.value = true
+  const res = await api.editLbtState({ ID: row.ID, status: row.status == 1 ? 2 : 1 })
+  state_loading.value = false
+  // eslint-disable-next-line no-empty
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '修改成功!'
+    })
+    return true
+  } else {
+    return false
+  }
+}
+</script>
+<template>
+  <div>
+    <div class="gva-table-box">
+      <!--      批量操作-->
+      <div class="gva-btn-list">
+        <el-button size="small" type="primary" icon="plus" @click="openDialog('add')">新增</el-button>
+        <el-popover v-model="deleteVisible" placement="top" width="160">
+          <p>确定要删除吗？</p>
+          <div style="text-align: right; margin-top: 8px;">
+            <el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button>
+            <el-button size="small" type="primary" @click="onDelete">确定</el-button>
+          </div>
+          <!-- <template #reference>
+            <el-button icon="delete" size="small" type="danger" :disabled="!lbt_ids.length" style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
+          </template> -->
+        </el-popover>
+      </div>
+      <!--      数据列表-->
+      <el-table border :data="tableData" @selection-change="handleSelectionChange">
+        <!-- <el-table-column
+          type="selection"
+          width="55"
+        /> -->
+        <!-- <el-table-column align="left" label="名称" min-width="150" prop="lbtName" /> -->
+        <el-table-column align="left" label="缩略图" min-width="150" prop="url">
+          <template #default="scope">
+            <img class="lbt-thumb" :src="scope.row.url" alt="">
+          </template>
+        </el-table-column>
+        <!-- <el-table-column align="left" label="是否启用" min-width="150" prop="status">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.status"
+              :active-value="1"
+              :loading="state_loading"
+              :inactive-value="2"
+              active-text="启用"
+              inactive-text="禁用"
+              :before-change="() => { return beforeChangeFunc($event, scope.row) }"
+              @change="changeStateFunc($event, scope.row)"
+            />
+          </template>
+        </el-table-column> -->
+        <!-- <el-table-column align="left" label="说明" min-width="150" prop="lbtIntroduction" /> -->
+        <el-table-column align="left" label="更新时间" min-width="150" prop="UpdatedAt">
+          <template #default="scope">
+            {{ parseTime(scope.row.UpdatedAt) }}
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="操作" min-width="150" prop="status">
+          <template #default="scope">
+            <el-button
+              icon="edit"
+              size="small"
+              type="primary"
+              link
+              @click="editLbtFunc(scope.row)"
+            >修改</el-button>
+            <el-button
+              icon="delete"
+              size="small"
+              type="danger"
+              link
+              @click="delLbtFunc(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="queryParams.page"
+          :page-size="queryParams.pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+    <!--新增、编辑 窗口-->
+    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
+      <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label=" 图片" prop="url">
+          <el-upload
+            class="avatar-uploader"
+            :action="`${path}/fileUploadAndDownload/upload`"
+            :headers="{ 'x-token': userStore.token }"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="form.url" :src="form.url" class="img-container">
+            <el-icon v-else class="avatar-uploader-icon">
+              <Plus />
+            </el-icon>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" placeholder="请输入备注" autocomplete="off" />
+        </el-form-item>
+        <el-form-item style="display: none">
+          <el-button type="primary" @click="submitForm(ruleFormRef)">
+            Create
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button size="small" @click="closeDialog">取 消</el-button>
+          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<style scoped>
+.img-container {
+    width: 200px;
+    height: 150px;
+}
+
+.gva-btn-list {
+    justify-content: end;
+}
+
+.lbt-thumb {
+    width: 100px;
+    height: 50px;
+}
+</style>