241019

src/views/shop/splash/components/search.vue

@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>

src/views/shop/splash/components/splashEdit.vue

@@ -0,0 +1,193 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑开屏广告' : '添加开屏广告'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="标题" name="title">
+        <a-input
+          allow-clear
+          placeholder="请输入标题"
+          v-model:value="form.title"
+        />
+      </a-form-item>
+      <a-form-item
+        label="图片"
+        name="image">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseImage"
+          @del="onDeleteItem"
+        />
+      </a-form-item>
+      <a-form-item label="跳转类型" name="jumpType">
+        <a-select v-model:value="form.jumpType" placeholder="请选择跳转类型">
+          <a-select-option v-for="item in SplashJumpType" :key="item" :value="item.value">
+            {{ item.label }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="跳转主键" name="jumpPk">
+        <a-input-number style="width: 200px;"
+                        allow-clear
+                        placeholder="请输入跳转主键"
+                        v-model:value="form.jumpPk"
+        />
+      </a-form-item>
+      <a-form-item label="排序">
+        <a-input-number style="width: 200px;"
+                        allow-clear
+                        placeholder="请输入排序"
+                        v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+import {ref, reactive, watch} from 'vue';
+import {Form, message} from 'ant-design-vue';
+import {assignObject, uuid} from 'ele-admin-pro';
+import {addSplash, updateSplash} from '@/api/shop/splash';
+import {Splash, SplashJumpType} from '@/api/shop/splash/model';
+import {useThemeStore} from '@/store/modules/theme';
+import {storeToRefs} from 'pinia';
+import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
+import {FormInstance} from 'ant-design-vue/es/form';
+import {FileRecord} from '@/api/system/file/model';
+
+// 是否是修改
+const isUpdate = ref(false);
+const useForm = Form.useForm;
+// 是否开启响应式布局
+const themeStore = useThemeStore();
+const {styleResponsive} = storeToRefs(themeStore);
+
+const props = defineProps<{
+  // 弹窗是否打开
+  visible: boolean;
+  // 修改回显的数据
+  data?: Splash | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'done'): void;
+  (e: 'update:visible', visible: boolean): void;
+}>();
+
+// 提交状态
+const loading = ref(false);
+// 是否显示最大化切换按钮
+const maxable = ref(true);
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);
+const images = ref<ItemType[]>([]);
+
+// 用户信息
+const form = reactive<Splash>({
+  id: undefined,
+  title: undefined,
+  image: undefined,
+  jumpType: undefined,
+  jumpPk: undefined,
+});
+
+/* 更新visible */
+const updateVisible = (value: boolean) => {
+  emit('update:visible', value);
+};
+
+// 表单验证规则
+const rules = reactive({
+  title: [{required: true, message: '请输入标题', trigger: 'blur'}],
+  image: [{required: true, message: '请选择图片', trigger: 'blur'}],
+});
+
+const chooseImage = (data: FileRecord) => {
+  images.value.push({
+    uid: data.id,
+    url: data.path,
+    status: 'done'
+  });
+  form.image = data.path;
+};
+
+const onDeleteItem = (index: number) => {
+  images.value.splice(index, 1);
+  form.image = '';
+};
+
+const {resetFields} = useForm(form, rules);
+
+/* 保存编辑 */
+const save = () => {
+  if (!formRef.value) {
+    return;
+  }
+  formRef.value
+    .validate()
+    .then(() => {
+      loading.value = true;
+      const formData = {
+        ...form
+      };
+      const saveOrUpdate = isUpdate.value ? updateSplash : addSplash;
+      saveOrUpdate(formData)
+        .then((msg) => {
+          loading.value = false;
+          message.success(msg);
+          updateVisible(false);
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          message.error(e.message);
+        });
+    })
+    .catch(() => {
+    });
+};
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      images.value = [];
+      if (props.data) {
+        assignObject(form, props.data);
+        if (props.data.image) {
+          images.value.push({
+            uid: uuid(),
+            url: props.data.image,
+            status: 'done'
+          })
+        }
+        isUpdate.value = true;
+      } else {
+        isUpdate.value = false;
+      }
+    } else {
+      resetFields();
+    }
+  },
+  {immediate: true}
+);
+</script>

src/views/shop/splash/index.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="splashId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50"/>
+            </template>
+            <template v-if="column.key === 'jumpType'">
+              <span v-if="record.jumpType"> {{
+                  SplashJumpType.find(item => item.value === record.jumpType).label
+                }}</span>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical"/>
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <SplashEdit v-model:visible="showEdit" :data="current" @done="reload"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {createVNode, ref} from 'vue';
+import {message, Modal} from 'ant-design-vue';
+import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
+import type {EleProTable} from 'ele-admin-pro';
+import {toDateString} from 'ele-admin-pro';
+import type {
+  DatasourceFunction,
+  ColumnItem
+} from 'ele-admin-pro/es/ele-pro-table/types';
+import Search from './components/search.vue';
+import SplashEdit from './components/splashEdit.vue';
+import {pageSplash, removeSplash, removeBatchSplash} from '@/api/shop/splash';
+import {Splash, SplashJumpType, SplashParam} from '@/api/shop/splash/model';
+
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+// 表格选中数据
+const selection = ref<Splash[]>([]);
+// 当前编辑数据
+const current = ref<Splash | null>(null);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 是否显示批量移动弹窗
+const showMove = ref(false);
+// 加载状态
+const loading = ref(true);
+
+// 表格数据源
+const datasource: DatasourceFunction = ({
+                                          page,
+                                          limit,
+                                          where,
+                                          orders,
+                                          filters
+                                        }) => {
+  if (filters) {
+    where.status = filters.status;
+  }
+  return pageSplash({
+    ...where,
+    ...orders,
+    page,
+    limit
+  });
+};
+
+// 表格列配置
+const columns = ref<ColumnItem[]>([
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    key: 'id',
+    align: 'center',
+    width: 90,
+  },
+  {
+    title: '标题',
+    dataIndex: 'title',
+    key: 'title',
+    align: 'center',
+  },
+  {
+    title: '图片',
+    dataIndex: 'image',
+    key: 'image',
+    align: 'center',
+  },
+  {
+    title: '跳转类型',
+    dataIndex: 'jumpType',
+    key: 'jumpType',
+    align: 'center',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    align: 'center',
+    sorter: true,
+    ellipsis: true,
+    customRender: ({text}) => toDateString(text, 'yyyy-MM-dd')
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 180,
+    fixed: 'right',
+    align: 'center',
+    hideInSetting: true
+  }
+]);
+
+/* 搜索 */
+const reload = (where?: SplashParam) => {
+  selection.value = [];
+  tableRef?.value?.reload({where: where});
+};
+
+/* 打开编辑弹窗 */
+const openEdit = (row?: Splash) => {
+  current.value = row ?? null;
+  showEdit.value = true;
+};
+
+/* 打开批量移动弹窗 */
+const openMove = () => {
+  showMove.value = true;
+};
+
+/* 删除单个 */
+const remove = (row: Splash) => {
+  const hide = message.loading('请求中..', 0);
+  removeSplash(row.splashId)
+    .then((msg) => {
+      hide();
+      message.success(msg);
+      reload();
+    })
+    .catch((e) => {
+      hide();
+      message.error(e.message);
+    });
+};
+
+/* 批量删除 */
+const removeBatch = () => {
+  if (!selection.value.length) {
+    message.error('请至少选择一条数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    content: '确定要删除选中的记录吗?',
+    icon: createVNode(ExclamationCircleOutlined),
+    maskClosable: true,
+    onOk: () => {
+      const hide = message.loading('请求中..', 0);
+      removeBatchSplash(selection.value.map((d) => d.splashId))
+        .then((msg) => {
+          hide();
+          message.success(msg);
+          reload();
+        })
+        .catch((e) => {
+          hide();
+          message.error(e.message);
+        });
+    }
+  });
+};
+
+/* 查询 */
+const query = () => {
+  loading.value = true;
+};
+
+/* 自定义行属性 */
+const customRow = (record: Splash) => {
+  return {
+    // 行点击事件
+    onClick: () => {
+      // console.log(record);
+    },
+    // 行双击事件
+    onDblclick: () => {
+      openEdit(record);
+    }
+  };
+};
+query();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Splash'
+};
+</script>
+
+<style lang="less" scoped></style>