From 6cf22acfa775552d66ec4ab5ac69be97edad483a Mon Sep 17 00:00:00 2001
From: lwh <2679599887@qq.com>
Date: Thu, 29 Jun 2023 11:51:00 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E6=B7=BB=E5=8A=A0=E8=BD=AE=E6=92=AD?=
 =?UTF-8?q?=E5=9B=BE=E5=92=8C=E6=B5=B7=E6=8A=A5=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../banner/components/AddBannerDialog.vue     | 142 +++++++++++
 .../banner/components/DetailBannerDialog.vue  |  88 +++++++
 .../banner/components/EditBannerDialog.vue    | 144 ++++++++++++
 .../index/business/banners/banner/index.vue   | 212 +++++++++++++++++
 .../poster/components/AddPosterDialog.vue     | 152 ++++++++++++
 .../poster/components/DetailPosterDialog.vue  |  98 ++++++++
 .../poster/components/EditPosterDialog.vue    | 154 ++++++++++++
 .../index/business/banners/poster/index.vue   | 221 ++++++++++++++++++
 src/service/banner.js                         |  69 ++++++
 src/service/poster.js                         |  64 +++++
 10 files changed, 1344 insertions(+)
 create mode 100644 src/pages/index/business/banners/banner/components/AddBannerDialog.vue
 create mode 100644 src/pages/index/business/banners/banner/components/DetailBannerDialog.vue
 create mode 100644 src/pages/index/business/banners/banner/components/EditBannerDialog.vue
 create mode 100644 src/pages/index/business/banners/banner/index.vue
 create mode 100644 src/pages/index/business/banners/poster/components/AddPosterDialog.vue
 create mode 100644 src/pages/index/business/banners/poster/components/DetailPosterDialog.vue
 create mode 100644 src/pages/index/business/banners/poster/components/EditPosterDialog.vue
 create mode 100644 src/pages/index/business/banners/poster/index.vue
 create mode 100644 src/service/banner.js
 create mode 100644 src/service/poster.js

diff --git a/src/pages/index/business/banners/banner/components/AddBannerDialog.vue b/src/pages/index/business/banners/banner/components/AddBannerDialog.vue
new file mode 100644
index 0000000..74793db
--- /dev/null
+++ b/src/pages/index/business/banners/banner/components/AddBannerDialog.vue
@@ -0,0 +1,142 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="添加轮播图" width="900px" @closed="closeDialog" @open="openDialog">
+    <el-form ref="formRef" :model="formData" :rules="rules">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="轮播图位置" prop="banner_location">
+            <el-select v-model="formData.banner_location" clearable placeholder="请选择">
+              <el-option v-for="item in banner_location" :key="item.dictionary_guid" :label="item.dictionary_name"
+                :value="item.dictionary_value"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span='12'>
+          <el-form-item :label-width='labelWidth' label='轮播图' prop='banner_img'>
+            <UploadImage ref='uploadRef' v-model='formData.banner_img' :data=uoloadData :limit='1' :fileSize='5'
+              :drag='true' :isShowTip='false' />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="排序" prop="banner_order">
+            <el-input-number v-model='formData.banner_order' controls-position='right' :min="1"></el-input-number>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="handleAddClick(formRef)">添加</el-button>
+        <el-button @click="handleResetClick(formRef)">重置</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from "vue";
+import { addBanner, getDictionary } from "~/service/banner";
+import { useLoginStore } from "~/store";
+
+// --业务参数
+
+
+
+// --业务方法
+
+// 字典获取
+const banner_location = ref([]);
+async function get_banner_location() {
+  await getDictionary({ dictionary_value: 'banner_location' }).then((res) => {
+    banner_location.value = res
+  })
+}
+
+
+
+
+// --基础参数
+const store = useLoginStore();
+const headers = {
+  Accept: "application/json",
+  ...store.headers,
+};
+
+const formRef = ref();
+const labelWidth = 90;
+const props = defineProps({
+  modelValue: Boolean,
+  done: Function,
+});
+const emits = defineEmits(["update:modelValue"]);
+const dialogVisible = ref(props.modelValue);
+const formData = reactive({
+});
+
+const uoloadData = ref({
+  dirName: "Banner"
+})
+
+watch(props, (v) => {
+  dialogVisible.value = v.modelValue;
+});
+
+const rules = reactive({
+  banner_img: [
+    {
+      required: true,
+      message: '轮播图图片不能为空'
+    }
+  ],
+  // banner_location: [
+  //   {
+  //     required: true,
+  //     message: '轮播图片位置(字典)不能为空'
+  //   }
+  // ],
+
+
+});
+
+
+// --基础方法
+
+// 打开弹窗时执行
+const openDialog = () => {
+  get_banner_location()
+
+};
+
+const closeDialog = () => {
+  handleResetClick(formRef.value);
+  dialogVisible.value = false;
+  emits("update:modelValue", false);
+};
+
+const handleAddClick = async (formEl) => {
+  console.log(formData);
+  if (!formEl) return;
+  formEl.validate(async (valid) => {
+    if (!valid) {
+      return;
+    }
+
+    const { code } = await addBanner(formData);
+    if (code == 0) {
+      closeDialog();
+      props.done();
+    }
+  });
+};
+
+const handleResetClick = async (formEl) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/pages/index/business/banners/banner/components/DetailBannerDialog.vue b/src/pages/index/business/banners/banner/components/DetailBannerDialog.vue
new file mode 100644
index 0000000..f29617f
--- /dev/null
+++ b/src/pages/index/business/banners/banner/components/DetailBannerDialog.vue
@@ -0,0 +1,88 @@
+<template>
+  <el-dialog v-model="props.modelValue" title="轮播图详情" width="900px" @closed="closeDialog" @open="openDialog">
+    <el-form ref="formRef" :model="formData" :disabled="true">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="轮播图位置" prop="banner_location">
+            <el-select v-model="formData.banner_location" clearable placeholder="请选择">
+              <el-option v-for="item in banner_location" :key="item.dictionary_guid" :label="item.dictionary_name"
+                :value="item.dictionary_value"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span='12'>
+          <el-form-item :label-width='labelWidth' label='轮播图' prop='banner_img'>
+            <UploadImage ref='uploadRef' v-model='formData.banner_img' :data=uoloadData :limit='1' :fileSize='5'
+              :drag='true' :isShowTip='false' />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="排序" prop="banner_order">
+            <el-input-number v-model='formData.banner_order' controls-position='right'></el-input-number>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from "vue";
+import { isEmptyObject } from "~/utils/index";
+import { getDictionary } from '~/service/banner';
+
+// --业务参数
+
+
+
+// --业务方法
+
+// 字典获取
+const banner_location = ref([]);
+async function get_banner_location() {
+  await getDictionary({ dictionary_value: 'banner_location' }).then((res) => {
+    banner_location.value = res
+  })
+}
+
+
+
+// --基础参数
+const formRef = ref();
+const labelWidth = 100;
+
+const props = defineProps({
+  modelValue: Boolean,
+  data: Object,
+  done: Function,
+});
+const emits = defineEmits(["update:modelValue"]);
+const formData = ref({
+  ...props.data,
+});
+
+
+// --基础方法
+watch(props, (v) => {
+  formData.value = v.data;
+
+
+});
+
+// 打开弹窗时执行
+const openDialog = () => {
+
+  get_banner_location()
+
+};
+
+const closeDialog = () => {
+  emits("update:modelValue", false);
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/pages/index/business/banners/banner/components/EditBannerDialog.vue b/src/pages/index/business/banners/banner/components/EditBannerDialog.vue
new file mode 100644
index 0000000..f2fe3b0
--- /dev/null
+++ b/src/pages/index/business/banners/banner/components/EditBannerDialog.vue
@@ -0,0 +1,144 @@
+<template>
+  <el-dialog v-model="props.modelValue" title="编辑轮播图" width="900px" @closed="closeDialog" @open="openDialog">
+    <el-form ref="formRef" :model="formData" :rules="rules">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="轮播图位置" prop="banner_location">
+            <el-select v-model="formData.banner_location" clearable placeholder="请选择">
+              <el-option v-for="item in banner_location" :key="item.dictionary_guid" :label="item.dictionary_name"
+                :value="item.dictionary_value"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span='12'>
+          <el-form-item :label-width='labelWidth' label='轮播图' prop='banner_img'>
+            <UploadImage ref='uploadRef' v-model='formData.banner_img' :data=uoloadData :limit='1' :fileSize='5'
+              :drag='true' :isShowTip='false' />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="排序" prop="banner_order">
+            <el-input-number v-model='formData.banner_order' controls-position='right' :min="1"></el-input-number>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="handleEditClick(formRef)">编辑</el-button>
+        <el-button @click="handleResetClick(formRef)">重置</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from "vue";
+import { editBanner, getDictionary } from "~/service/banner";
+import { useLoginStore } from "~/store";
+
+// --业务参数
+
+
+
+// --业务方法
+
+// 字典获取
+const banner_location = ref([]);
+async function get_banner_location() {
+  await getDictionary({ dictionary_value: 'banner_location' }).then((res) => {
+    banner_location.value = res
+  })
+}
+
+
+
+
+// --基础参数
+const store = useLoginStore();
+const headers = {
+  Accept: "application/json",
+  ...store.headers,
+};
+const formRef = ref();
+const labelWidth = 100;
+const props = defineProps({
+  modelValue: Boolean,
+  data: Object,
+  done: Function,
+});
+const emits = defineEmits(["update:modelValue"]);
+const formData = ref({
+  ...props.data,
+});
+const uoloadData = ref({
+  dirName: "Banner"
+})
+
+
+// --基础方法
+watch(props, (v) => {
+  formData.value = v.data;
+
+
+});
+
+// 打开弹窗时执行
+const openDialog = () => {
+  get_banner_location()
+
+};
+
+const closeDialog = () => {
+  props.done();
+  emits("update:modelValue", false);
+};
+
+const rules = reactive({
+  // banner_img: [
+  //   {
+  //     required: true,
+  //     message: '轮播图图片不能为空'
+  //   }
+  // ],
+  banner_location: [
+    {
+      required: true,
+      message: '轮播图片位置(字典)不能为空'
+    }
+  ],
+  banner_order: [
+    {
+      required: true,
+      message: '排序不能为空'
+    }
+  ],
+
+});
+
+const handleEditClick = async (formEl) => {
+  console.log(formData.value);
+  if (!formEl) return;
+  formEl.validate(async (valid) => {
+    if (!valid) {
+      return;
+    }
+
+    const { code } = await editBanner(formData.value);
+    if (code == 0) {
+      closeDialog();
+      props.done();
+    }
+  });
+};
+const handleResetClick = async (formEl) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/pages/index/business/banners/banner/index.vue b/src/pages/index/business/banners/banner/index.vue
new file mode 100644
index 0000000..3408394
--- /dev/null
+++ b/src/pages/index/business/banners/banner/index.vue
@@ -0,0 +1,212 @@
+<template>
+  <!-- 面包屑 -->
+  <el-breadcrumb>
+    <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
+    <el-breadcrumb-item to="/banner/list">轮播图列表</el-breadcrumb-item>
+  </el-breadcrumb>
+  <!-- 搜索 -->
+  <el-form inline :model="params">
+    <el-form-item label="轮播图位置">
+      <el-select v-model="params.banner_location" clearable placeholder="请选择">
+        <el-option v-for="item in banner_location" :key="item.dictionary_guid" :label="item.dictionary_name"
+          :value="item.dictionary_value"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
+        搜索
+      </el-button>
+    </el-form-item>
+  </el-form>
+  <el-space style="margin-bottom: 10px;">
+    <!-- 添加轮播图 -->
+    <el-col :span="1">
+      <el-button type="primary" @click="addBannerDialogVisible = true"> 添加 </el-button>
+    </el-col>
+    <!-- 下拉操作 -->
+    <el-dropdown v-if="selectionData.length">
+      <el-button type="primary">
+        批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
+      </el-button>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="handleDelete(selectionData)">
+            批量删除
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-space>
+  <!-- 数据表格 -->
+  <DataTable v-loading="loading" ref="tableRef" style="width: 100%" :onSelectionChange="data => (selectionData = data)" :column="column"
+    :params="params" :request="params => getBannerList(params)">
+    <!-- 排序 -->
+    <template #banner_order="scope">
+      <el-input-number :disabled="loading" v-model='scope.row.banner_order' controls-position="right"
+        @change="handleEditOrder(scope.row)" :min="1"></el-input-number>
+    </template>
+    <!-- 图片 -->
+    <template #banner_img="scope">
+      <el-image v-if="scope.row.banner_img" :src="scope.row.banner_img.split(',')[0]" lazy
+        :preview-src-list="scope.row.banner_img.split(',')" :preview-teleported="true" :hide-on-click-modal="true"
+        fit="contain" class="el-avatar"></el-image>
+      <template v-else>暂无图片</template>
+    </template>
+
+    <template #banner_location='scope'>
+      <dict-tag :options='banner_location' :value='scope.row.banner_location' />
+    </template>
+
+    <template #chaoz="scope">
+      <el-space>
+        <el-button size="small" @click="handleUpdate(scope.row)">
+          编辑
+        </el-button>
+        <el-dropdown @command="handleCommand">
+          <el-button type="primary" size="small">
+            更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item :command="{ type: 'detail', row: scope.row }">
+                详情
+              </el-dropdown-item>
+              <el-dropdown-item :command="{ type: 'delete', row: scope.row }">
+                删除
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-space>
+    </template>
+  </DataTable>
+
+  <!-- 添加轮播图 -->
+  <AddBannerDialog v-model="addBannerDialogVisible" :done="() => tableRef.reload()"></AddBannerDialog>
+  <!-- 编辑轮播图 -->
+  <EditBannerDialog v-model="EditBannerDialogVisible" :data="EditBannerDialogRow" :done="() => tableRef.reload()">
+  </EditBannerDialog>
+  <!-- 轮播图详情 -->
+  <DetailBannerDialog v-model="DetailBannerDialogVisible" :data="DetailBannerDialogRow"></DetailBannerDialog>
+</template>
+<script setup>
+import { ArrowDown } from '@element-plus/icons-vue';
+import { ref, reactive, watch } from 'vue';
+import { useLoginStore } from "~/store";
+import { getBannerList, editBanner, deleteBanner, getDictionary } from '~/service/banner';
+import AddBannerDialog from './components/AddBannerDialog.vue';
+import EditBannerDialog from './components/EditBannerDialog.vue';
+import DetailBannerDialog from './components/DetailBannerDialog.vue';
+
+const tableRef = ref();
+const selectionData = ref([]);
+const store = useLoginStore();
+
+const addBannerDialogVisible = ref(false);
+const EditBannerDialogVisible = ref(false);
+const EditBannerDialogRow = ref({});
+const DetailBannerDialogVisible = ref(false);
+const DetailBannerDialogRow = ref({});
+const loading = ref(false)
+
+const headers = {
+  Accept: "application/json",
+  ...store.headers,
+};
+
+// 查询参数
+const params = reactive({
+  banner_location: "",
+
+});
+const column = [
+
+  {
+    fixed: true,
+    type: 'selection'
+  },
+  {
+    prop: "banner_location",
+    label: '轮播图位置',
+    width: '150'
+  },
+  {
+    prop: "banner_img",
+    label: '轮播图图片',
+    width: '150'
+  },
+  // {
+  //   prop: "banner_location",
+  //   label: '轮播图位置',
+  //   width: '150'
+  // },
+  {
+    prop: "banner_order",
+    label: '排序',
+    width: '200'
+  },
+  {
+    label: '操作',
+    prop: 'chaoz',
+    width: '250',
+    fixed: 'right'
+  }
+];
+
+
+const handleCommand = ({ type, row }) => {
+  switch (type) {
+    case "detail":
+      handleDetail(row);
+      break;
+    case 'delete':
+      handleDelete([row]);
+      break;
+  }
+};
+
+// 删除数据
+const handleDelete = data => {
+  ElMessageBox.confirm(`您确定要删除该轮播图吗？`).then(async () => {
+    const res = await deleteBanner({
+      banner_guid: data.map(v => v.banner_guid).join()
+    });
+    if (res) {
+      tableRef.value.reload();
+    }
+  });
+};
+
+//排序
+async function handleEditOrder(data) {
+  loading.value = true
+  const { code, msg } = await editBanner(data);
+  if (code == 0) {
+    loading.value = false
+    tableRef.value.reload()
+  } else {
+    ElMessage.error(msg);
+  }
+}
+
+// 修改
+function handleUpdate(row) {
+  EditBannerDialogVisible.value = true
+  EditBannerDialogRow.value = row
+}
+
+// 详情
+function handleDetail(row) {
+  DetailBannerDialogVisible.value = true
+  DetailBannerDialogRow.value = row
+}
+
+// 字典获取
+const banner_location = ref([]);
+async function get_banner_location() {
+  await getDictionary({ dictionary_value: 'banner_location' }).then((res) => {
+    banner_location.value = res
+  })
+}
+get_banner_location()
+</script>
diff --git a/src/pages/index/business/banners/poster/components/AddPosterDialog.vue b/src/pages/index/business/banners/poster/components/AddPosterDialog.vue
new file mode 100644
index 0000000..fe3cf1d
--- /dev/null
+++ b/src/pages/index/business/banners/poster/components/AddPosterDialog.vue
@@ -0,0 +1,152 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="添加海报" width="900px" @closed="closeDialog" @open="openDialog">
+    <el-form ref="formRef" :model="formData" :rules="rules">
+      <el-row>
+
+
+        <el-col :span="12">
+          <el-form-item :label-width='labelWidth' label="位置" prop="poster_location">
+            <el-select v-model="formData.poster_location" clearable placeholder="请选择">
+              <el-option v-for="item in poster_location" :key="item.dictionary_guid" :label="item.dictionary_name"
+                :value="item.dictionary_value"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span='24'>
+          <el-form-item :label-width='labelWidth' label='图片' prop='poster_img'>
+            <UploadImage ref='uploadRef' v-model='formData.poster_img' :data=uoloadData :limit='1' :fileSize='20'
+              :drag='true' :isShowTip='false' />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="标题" prop="poster_title">
+            <el-input v-model='formData.poster_title' type="text" placeholder='请输入标题'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="描述" prop="poster_describe">
+            <el-input v-model='formData.poster_describe' type="text" placeholder='请输入描述'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="排序" prop="poster_sort">
+            <el-input-number v-model='formData.poster_sort' controls-position='right' :min="1"></el-input-number>
+          </el-form-item>
+        </el-col>
+
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="handleAddClick(formRef)">添加</el-button>
+        <el-button @click="handleResetClick(formRef)">重置</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from "vue";
+import { addPoster, getDictionary } from "~/service/poster";
+import { useLoginStore } from "~/store";
+
+// --业务参数
+
+
+
+// --业务方法
+
+// 字典获取
+const poster_location = ref([]);
+async function get_poster_location() {
+  await getDictionary({ dictionary_value: 'poster_location' }).then((res) => {
+    poster_location.value = res
+  })
+}
+
+
+
+
+// --基础参数
+const store = useLoginStore();
+const headers = {
+  Accept: "application/json",
+  ...store.headers,
+};
+
+const formRef = ref();
+const labelWidth = 90;
+const props = defineProps({
+  modelValue: Boolean,
+  done: Function,
+});
+const emits = defineEmits(["update:modelValue"]);
+const dialogVisible = ref(props.modelValue);
+const formData = reactive({
+  // poster_sort: 1
+});
+
+const uoloadData = ref({
+  dirName: "Poster"
+})
+
+watch(props, (v) => {
+  dialogVisible.value = v.modelValue;
+});
+
+const rules = reactive({
+  poster_location: [
+    {
+      required: true,
+      message: '位置不能为空'
+    }
+  ],
+  poster_img: [
+    {
+      required: true,
+      message: '图片不能为空'
+    }
+  ],
+
+});
+
+
+// --基础方法
+
+// 打开弹窗时执行
+const openDialog = () => {
+  get_poster_location()
+
+};
+
+const closeDialog = () => {
+  handleResetClick(formRef.value);
+  dialogVisible.value = false;
+  emits("update:modelValue", false);
+};
+
+const handleAddClick = async (formEl) => {
+  console.log(formData);
+  if (!formEl) return;
+  formEl.validate(async (valid) => {
+    if (!valid) {
+      return;
+    }
+
+    const { code } = await addPoster(formData);
+    if (code == 0) {
+      closeDialog();
+      props.done();
+    }
+  });
+};
+
+const handleResetClick = async (formEl) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/pages/index/business/banners/poster/components/DetailPosterDialog.vue b/src/pages/index/business/banners/poster/components/DetailPosterDialog.vue
new file mode 100644
index 0000000..91d88f1
--- /dev/null
+++ b/src/pages/index/business/banners/poster/components/DetailPosterDialog.vue
@@ -0,0 +1,98 @@
+<template>
+  <el-dialog v-model="props.modelValue" title="海报详情" width="900px" @closed="closeDialog" @open="openDialog">
+    <el-form ref="formRef" :model="formData" :disabled="true">
+      <el-row>
+
+
+        <el-col :span="12">
+          <el-form-item :label-width='labelWidth' label="位置" prop="poster_location">
+            <el-select v-model="formData.poster_location" clearable placeholder="请选择">
+              <el-option v-for="item in poster_location" :key="item.dictionary_guid" :label="item.dictionary_name"
+                :value="item.dictionary_value"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span='24'>
+          <el-form-item :label-width='labelWidth' label='图片' prop='poster_img'>
+            <UploadImage ref='uploadRef' v-model='formData.poster_img' :data=uoloadData :limit='1' :fileSize='5'
+              :drag='true' :isShowTip='false' />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="标题" prop="poster_title">
+            <el-input v-model='formData.poster_title' type="text" placeholder='请输入标题'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="描述" prop="poster_describe">
+            <el-input v-model='formData.poster_describe' type="text" placeholder='请输入描述'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="排序" prop="poster_sort">
+            <el-input-number v-model='formData.poster_sort' controls-position='right'></el-input-number>
+          </el-form-item>
+        </el-col>
+
+      </el-row>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from "vue";
+import { isEmptyObject } from "~/utils/index";
+import { getDictionary } from '~/service/poster';
+
+// --业务参数
+
+
+
+// --业务方法
+
+// 字典获取
+const poster_location = ref([]);
+async function get_poster_location() {
+  await getDictionary({ dictionary_value: 'poster_location' }).then((res) => {
+    poster_location.value = res
+  })
+}
+
+
+
+// --基础参数
+const formRef = ref();
+const labelWidth = 100;
+
+const props = defineProps({
+  modelValue: Boolean,
+  data: Object,
+  done: Function,
+});
+const emits = defineEmits(["update:modelValue"]);
+const formData = ref({
+  ...props.data,
+});
+
+
+// --基础方法
+watch(props, (v) => {
+  formData.value = v.data;
+
+
+});
+
+// 打开弹窗时执行
+const openDialog = () => {
+
+  get_poster_location()
+
+};
+
+const closeDialog = () => {
+  emits("update:modelValue", false);
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/pages/index/business/banners/poster/components/EditPosterDialog.vue b/src/pages/index/business/banners/poster/components/EditPosterDialog.vue
new file mode 100644
index 0000000..01e3222
--- /dev/null
+++ b/src/pages/index/business/banners/poster/components/EditPosterDialog.vue
@@ -0,0 +1,154 @@
+<template>
+  <el-dialog v-model="props.modelValue" title="编辑海报" width="900px" @closed="closeDialog" @open="openDialog">
+    <el-form ref="formRef" :model="formData" :rules="rules">
+      <el-row>
+
+
+        <el-col :span="12">
+          <el-form-item :label-width='labelWidth' label="位置" prop="poster_location">
+            <el-select disabled v-model="formData.poster_location" clearable placeholder="请选择">
+              <el-option v-for="item in poster_location" :key="item.dictionary_guid" :label="item.dictionary_name"
+                :value="item.dictionary_value"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span='24'>
+          <el-form-item :label-width='labelWidth' label='图片' prop='poster_img'>
+            <UploadImage ref='uploadRef' v-model='formData.poster_img' :data=uoloadData :limit='1' :fileSize='20'
+              :drag='true' :isShowTip='false' />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="标题" prop="poster_title">
+            <el-input v-model='formData.poster_title' type="text" placeholder='请输入标题'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="描述" prop="poster_describe">
+            <el-input v-model='formData.poster_describe' type="text" placeholder='请输入描述'></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label-width="labelWidth" label="排序" prop="poster_sort">
+            <el-input-number v-model='formData.poster_sort' controls-position='right' :min="1"></el-input-number>
+          </el-form-item>
+        </el-col>
+
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="handleEditClick(formRef)">编辑</el-button>
+        <el-button @click="handleResetClick(formRef)">重置</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from "vue";
+import { editPoster, getDictionary } from "~/service/poster";
+import { useLoginStore } from "~/store";
+
+// --业务参数
+
+
+
+// --业务方法
+
+// 字典获取
+const poster_location = ref([]);
+async function get_poster_location() {
+  await getDictionary({ dictionary_value: 'poster_location' }).then((res) => {
+    poster_location.value = res
+  })
+}
+
+
+
+
+// --基础参数
+const store = useLoginStore();
+const headers = {
+  Accept: "application/json",
+  ...store.headers,
+};
+const formRef = ref();
+const labelWidth = 100;
+const props = defineProps({
+  modelValue: Boolean,
+  data: Object,
+  done: Function,
+});
+const emits = defineEmits(["update:modelValue"]);
+const formData = ref({
+  ...props.data,
+});
+const uoloadData = ref({
+  dirName: "Poster"
+})
+
+
+// --基础方法
+watch(props, (v) => {
+  formData.value = v.data;
+
+
+});
+
+// 打开弹窗时执行
+const openDialog = () => {
+  get_poster_location()
+
+};
+
+const closeDialog = () => {
+  props.done();
+  emits("update:modelValue", false);
+};
+
+const rules = reactive({
+  poster_location: [
+    {
+      required: true,
+      message: '位置不能为空'
+    }
+  ],
+  poster_img: [
+    {
+      required: true,
+      message: '图片不能为空'
+    }
+  ],
+  poster_sort: [
+    {
+      required: true,
+      message: '排序不能为空'
+    }
+  ],
+
+});
+
+const handleEditClick = async (formEl) => {
+  console.log(formData.value);
+  if (!formEl) return;
+  formEl.validate(async (valid) => {
+    if (!valid) {
+      return;
+    }
+
+    const { code } = await editPoster(formData.value);
+    if (code == 0) {
+      closeDialog();
+      props.done();
+    }
+  });
+};
+const handleResetClick = async (formEl) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/pages/index/business/banners/poster/index.vue b/src/pages/index/business/banners/poster/index.vue
new file mode 100644
index 0000000..6b73159
--- /dev/null
+++ b/src/pages/index/business/banners/poster/index.vue
@@ -0,0 +1,221 @@
+<template>
+  <!-- 面包屑 -->
+  <el-breadcrumb>
+    <el-breadcrumb-item>海报管理</el-breadcrumb-item>
+    <el-breadcrumb-item to="/poster/list">海报列表</el-breadcrumb-item>
+  </el-breadcrumb>
+  <!-- 搜索 -->
+  <el-form inline :model="params">
+
+    <el-form-item :label-width='labelWidth' label="位置" prop="poster_location">
+      <el-select v-model="params.poster_location" clearable placeholder="请选择">
+        <el-option v-for="item in poster_location" :key="item.dictionary_guid" :label="item.dictionary_name"
+          :value="item.dictionary_value"></el-option>
+      </el-select>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
+        搜索
+      </el-button>
+    </el-form-item>
+  </el-form>
+  <el-space style="margin-bottom: 10px;">
+    <!-- 添加海报 -->
+    <el-col :span="1">
+      <el-button type="primary" @click="addPosterDialogVisible = true"> 添加 </el-button>
+    </el-col>
+
+
+
+    <!-- 下拉操作 -->
+    <el-dropdown v-if="selectionData.length">
+      <el-button type="primary">
+        批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
+      </el-button>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="handleDelete(selectionData)">
+            批量删除
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-space>
+  <!-- 数据表格 -->
+  <DataTable ref="tableRef" style="width: 100%" :onSelectionChange="data => (selectionData = data)" :column="column"
+    :params="params" :request="params => getPosterList(params)">
+
+    <template #poster_img="scope">
+      <el-image v-if="scope.row.poster_img" :src="scope.row.poster_img.split(',')[0]" lazy
+        :preview-src-list="scope.row.poster_img.split(',')" :preview-teleported="true" :hide-on-click-modal="true"
+        fit="contain" class="el-avatar"></el-image>
+      <template v-else>暂无图片</template>
+    </template>
+
+    <!-- 排序 -->
+    <template #poster_sort="scope">
+      <el-input-number :disabled="loading" v-model='scope.row.poster_sort' controls-position="right"
+        @change="handleEditOrder(scope.row)"></el-input-number>
+    </template>
+
+    <template #poster_location='scope'>
+      <dict-tag :options='poster_location' :value='scope.row.poster_location' />
+    </template>
+
+    <template #chaoz="scope">
+      <el-space>
+        <el-button size="small" @click="handleUpdate(scope.row)">
+          编辑
+        </el-button>
+        <el-dropdown @command="handleCommand">
+          <el-button type="primary" size="small">
+            更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item :command="{ type: 'detail', row: scope.row }">
+                详情
+              </el-dropdown-item>
+              <el-dropdown-item :command="{ type: 'delete', row: scope.row }">
+                删除
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-space>
+    </template>
+  </DataTable>
+
+  <!-- 添加海报 -->
+  <AddPosterDialog v-model="addPosterDialogVisible" :done="() => tableRef.reload()"></AddPosterDialog>
+  <!-- 编辑海报 -->
+  <EditPosterDialog v-model="EditPosterDialogVisible" :data="EditPosterDialogRow" :done="() => tableRef.reload()">
+  </EditPosterDialog>
+  <!-- 海报详情 -->
+  <DetailPosterDialog v-model="DetailPosterDialogVisible" :data="DetailPosterDialogRow"></DetailPosterDialog>
+</template>
+<script setup>
+import { ArrowDown } from '@element-plus/icons-vue';
+import { ref, reactive, watch } from 'vue';
+import { useLoginStore } from "~/store";
+import { getPosterList, deletePoster, getDictionary,editPoster } from '~/service/poster';
+import AddPosterDialog from './components/AddPosterDialog.vue';
+import EditPosterDialog from './components/EditPosterDialog.vue';
+import DetailPosterDialog from './components/DetailPosterDialog.vue';
+
+const tableRef = ref();
+const selectionData = ref([]);
+const store = useLoginStore();
+
+const addPosterDialogVisible = ref(false);
+const EditPosterDialogVisible = ref(false);
+const EditPosterDialogRow = ref({});
+const DetailPosterDialogVisible = ref(false);
+const DetailPosterDialogRow = ref({});
+
+const headers = {
+  Accept: "application/json",
+  ...store.headers,
+};
+
+// 查询参数
+const params = reactive({
+  poster_location: ""
+});
+const column = [
+
+  {
+    fixed: true,
+    type: 'selection'
+  },
+  {
+    prop: "poster_location",
+    label: '位置',
+    width: '150'
+  },
+  {
+    prop: "poster_img",
+    label: '图片',
+    width: '150'
+  },
+  // {
+  //   prop: "poster_title",
+  //   label: '标题',
+  //   width: '200'
+  // },
+  // {
+  //   prop: "poster_describe",
+  //   label: '描述',
+  //   width: '250'
+  // },
+  {
+    prop: "poster_sort",
+    label: '排序',
+    width: '200'
+  },
+  {
+    label: '操作',
+    prop: 'chaoz',
+    width: '250',
+    fixed: 'right'
+  }
+];
+
+
+const handleCommand = ({ type, row }) => {
+  switch (type) {
+    case "detail":
+      handleDetail(row);
+      break;
+    case 'delete':
+      handleDelete([row]);
+      break;
+  }
+};
+
+// 删除数据
+const handleDelete = data => {
+  ElMessageBox.confirm(`您确定要删除该海报吗？`).then(async () => {
+    const res = await deletePoster({
+      poster_guid: data.map(v => v.poster_guid).join()
+    });
+    if (res) {
+      tableRef.value.reload();
+    }
+  });
+};
+
+// 修改
+function handleUpdate(row) {
+  EditPosterDialogVisible.value = true
+  EditPosterDialogRow.value = row
+}
+
+// 详情
+function handleDetail(row) {
+  DetailPosterDialogVisible.value = true
+  DetailPosterDialogRow.value = row
+}
+
+//排序
+const loading = ref(false)
+async function handleEditOrder(data) {
+  loading.value = true
+  const { code, msg } = await editPoster(data);
+  if (code == 0) {
+    loading.value = false
+    tableRef.value.reload()
+  } 
+}
+
+
+// 字典获取
+const poster_location = ref([]);
+async function get_poster_location() {
+  await getDictionary({ dictionary_value: 'poster_location' }).then((res) => {
+    poster_location.value = res
+  })
+}
+get_poster_location()
+</script>
diff --git a/src/service/banner.js b/src/service/banner.js
new file mode 100644
index 0000000..d095a2b
--- /dev/null
+++ b/src/service/banner.js
@@ -0,0 +1,69 @@
+import {
+  api,
+  downloadFile,
+  createApiUrl
+} from '~/utils/axios';
+
+
+
+
+
+
+
+
+/**
+ * 获取字典值
+ * @param {Object} data
+ * @return {Promise} api
+ */
+export function getDictionary(data) {
+  return api.post('Dictionary.Dictionary/getDictionary', data, {});
+}
+
+
+/**
+ * 获取轮播图列表
+ * @param {Object} data
+ * @return {Promise} api
+ */
+export function getBannerList(data) {
+  return api.post('Banners.Banner/getBannerList', data);
+}
+
+/**
+ * 删除轮播图
+ * @param {Object} data
+ * @return {Promise} api
+ */
+export function deleteBanner(data) {
+  return api.post('Banners.Banner/deleteBanner', data, {
+    isTransformResponse: true,
+    isShowSuccessMessage: true,
+    errorMessageText: '删除失败'
+  });
+}
+
+/**
+ * 添加轮播图
+ * @param {Object} data
+ * @return {Promise} api
+ */
+export function addBanner(data) {
+  return api.post('Banners.Banner/addBanner', data, {
+    isTransformResponse: true,
+    isShowSuccessMessage: true,
+    errorMessageText: '添加失败'
+  });
+}
+/**
+ * 编辑轮播图
+ * @param {Object} data
+ * @return {Promise} api
+ */
+export function editBanner(data) {
+  return api.post('Banners.Banner/editBanner', data, {
+    isTransformResponse: true,
+    isShowSuccessMessage: true,
+    errorMessageText: '编辑失败'
+  });
+}
\ No newline at end of file
diff --git a/src/service/poster.js b/src/service/poster.js
new file mode 100644
index 0000000..2dd35cd
--- /dev/null
+++ b/src/service/poster.js
@@ -0,0 +1,64 @@
+import {
+  api,
+  downloadFile,
+  createApiUrl
+} from '~/utils/axios';
+
+
+
+/**
+ * 获取字典值
+ * @param {Object} data
+ * @return {Promise} api
+ */
+export function getDictionary(data) {
+  return api.post('Dictionary.Dictionary/getDictionary', data, {});
+}
+
+
+/**
+ * 获取海报列表
+ * @param {Object} data
+ * @return {Promise} api
+ */
+export function getPosterList(data) {
+  return api.post('Banners.Poster/getPosterList', data);
+}
+
+/**
+ * 删除海报
+ * @param {Object} data
+ * @return {Promise} api
+ */
+export function deletePoster(data) {
+  return api.post('Banners.Poster/deletePoster', data, {
+    isTransformResponse: true,
+    isShowSuccessMessage: true,
+    errorMessageText: '删除失败'
+  });
+}
+
+/**
+ * 添加海报
+ * @param {Object} data
+ * @return {Promise} api
+ */
+export function addPoster(data) {
+  return api.post('Banners.Poster/addPoster', data, {
+    isTransformResponse: true,
+    isShowSuccessMessage: true,
+    errorMessageText: '添加失败'
+  });
+}
+/**
+ * 编辑海报
+ * @param {Object} data
+ * @return {Promise} api
+ */
+export function editPoster(data) {
+  return api.post('Banners.Poster/editPoster', data, {
+    isTransformResponse: true,
+    isShowSuccessMessage: true,
+    errorMessageText: '编辑失败'
+  });
+}
\ No newline at end of file