From df913c6243067a202174477edfdf9f2fbabf524b Mon Sep 17 00:00:00 2001
From: xiao-fajia <1665375861@qq.com>
Date: Fri, 27 Sep 2024 11:12:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/base/banner/index.js                  |  37 ++++++
 src/views/base/banner/BannerManager.vue       | 100 ++++++++++++++
 .../base/banner/Form/BannerManagerForm.vue    | 124 ++++++++++++++++++
 src/views/repair/banner/RepairBanner.vue      |  22 ++++
 4 files changed, 283 insertions(+)
 create mode 100644 src/api/base/banner/index.js
 create mode 100644 src/views/base/banner/BannerManager.vue
 create mode 100644 src/views/base/banner/Form/BannerManagerForm.vue
 create mode 100644 src/views/repair/banner/RepairBanner.vue

diff --git a/src/api/base/banner/index.js b/src/api/base/banner/index.js
new file mode 100644
index 0000000..5f4a363
--- /dev/null
+++ b/src/api/base/banner/index.js
@@ -0,0 +1,37 @@
+import request from "@/utils/request";
+
+const preUrl = "/base/banner"
+
+// 分页
+export function getBannerPage(params){
+  return request({
+    url: preUrl + "/page",
+    method: "get",
+    params
+  })
+}
+
+// 新增、修改
+export function updateBanner(data){
+  return request({
+    url: preUrl + "/update",
+    method: "post",
+    data
+  })
+}
+
+// 删除
+export function deleteBannerById(id){
+  return request({
+    url: preUrl + "/remove?id=" + id,
+    method: "delete",
+  })
+}
+
+// 查看一条
+export function getBannerById(id){
+  return request({
+    url: preUrl + "/get?id=" + id,
+    method: "get"
+  })
+}
diff --git a/src/views/base/banner/BannerManager.vue b/src/views/base/banner/BannerManager.vue
new file mode 100644
index 0000000..f50b24d
--- /dev/null
+++ b/src/views/base/banner/BannerManager.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
+        >新增
+        </el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="序号" align="center" width="50">
+        <template scope="scope">
+          <span>{{scope.$index + 1}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="名称" align="center" :show-overflow-tooltip="true" prop="title" />
+      <el-table-column label="展示顺序" align="center" prop="sort" />
+      <el-table-column label="缩略图" align="center" prop="url">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.url" :preview-src-list="scope.row.url" />
+        </template>
+      </el-table-column>
+      <el-table-column label="跳转路径" align="center" prop="toUrl" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row)"
+          >修改
+          </el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+          >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"
+    />
+    <BannerManagerForm ref="bannerForm" :type="type" @success="getList"/>
+  </div>
+</template>
+
+<script>
+
+import {getBannerPage, deleteBannerById} from "@/api/base/banner";
+import BannerManagerForm from "@/views/base/banner/Form/BannerManagerForm.vue";
+
+export default {
+  name: "BannerManager",
+  components: {BannerManagerForm},
+  props:{
+    type:{
+      type: String,
+      default: "",
+      required: true
+    }
+  },
+  data() {
+    return {
+      showSearch: true,
+      loading: false,
+      list: [],
+      total: 0,
+      queryParams:{
+        type_id: this.type
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    openForm(row){
+      this.$refs.bannerForm.open(row)
+    },
+    async getList(){
+      const res = await getBannerPage(this.queryParams)
+      this.list = res.data.records
+      this.total = res.data.total
+      this.list.forEach(item => {
+        item.url = process.env.VUE_APP_FILE_API + item.url
+      })
+    },
+    async handleDelete(row){
+      const id = row.id
+      await this.$modal.confirm('是否确认删除数据？')
+      try {
+        await deleteBannerById(id)
+        await this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }catch{}
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/base/banner/Form/BannerManagerForm.vue b/src/views/base/banner/Form/BannerManagerForm.vue
new file mode 100644
index 0000000..f5e004d
--- /dev/null
+++ b/src/views/base/banner/Form/BannerManagerForm.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="app-container">
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
+      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="150px">
+        <el-row :gutter="2">
+          <el-col :span="12">
+            <el-form-item label="名称" prop="title">
+              <el-input v-model="formData.title" placeholder="请输入名称"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="排序" prop="sort">
+              <el-input-number v-model="formData.sort" :step="1"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="1">
+          <el-col :span="24">
+            <el-form-item label="跳转链接" prop="toUrl">
+              <el-input type="textarea" v-model="formData.toUrl" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="1">
+          <el-col :span="24">
+            <el-form-item label="banner" prop="banner">
+              <FileUpload :limit="1" :file-type="fileType" v-model="formData.url"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import {updateBanner} from "@/api/base/banner";
+
+export default {
+  name: "BannerManagerForm",
+  props: {
+    type: {
+      type: String,
+      default: "",
+      required: true
+    }
+  },
+  data() {
+    return {
+      dialogTitle: "",
+      dialogVisible: false,
+      formData: {
+        title: null,
+        sort: 0,
+        url: null,
+        typeId: this.type,
+        id: null,
+        toUrl: null
+      },
+      formRules: {
+        title: [{required: true, message: "名称不能为空", trigger: "blur"}],
+        sort: [{required: true, message: "排序不能为空", trigger: "blur"}],
+        url: [{required: true, methods: "图片不能为空", trigger: "blur"}]
+      },
+      formLoading: false,
+      fileType: [
+        "png",
+        "jpg",
+        "jpeg"
+      ]
+    }
+  },
+  methods: {
+    async submitForm() {
+      // 校验主表
+      await this.$refs['formRef'].validate()
+      this.formLoading = true
+      try {
+        if (!this.formData.url) {
+          this.$modal.msgError('文件不能为空')
+          return
+        }
+        const url = this.formData.url[0]
+        this.formData.url = url.url
+        await updateBanner(this.formData)
+        this.$modal.msgSuccess(this.formData.id ? '修改成功' : '新增成功')
+        this.dialogVisible = false
+        this.$emit('success')
+      } catch {
+      } finally {
+        this.formLoading = false
+      }
+    },
+    open(row) {
+      this.reset()
+      if (row) {
+        this.formData = row
+      }
+      this.dialogTitle = row?.id ? "修改" : "新增"
+      this.dialogVisible = true
+    },
+    reset() {
+      this.formData = {
+        title: null,
+        sort: 0,
+        url: null,
+        typeId: this.type,
+        id: null,
+        toUrl: null
+      }
+      this.resetForm('formRef')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/repair/banner/RepairBanner.vue b/src/views/repair/banner/RepairBanner.vue
new file mode 100644
index 0000000..0020d66
--- /dev/null
+++ b/src/views/repair/banner/RepairBanner.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="app-container">
+    <BannerManager type="weixiu" />
+  </div>
+</template>
+
+<script>
+import BannerManager from "@/views/base/banner/BannerManager.vue";
+
+export default {
+  name: "RepairBanner",
+  components: {BannerManager},
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>