feat(custom): i

src/views/system/index/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <CommonPage show-footer :title="$route.title">
+    <n-button type="primary" @click="handleAdd(1)">新增幻灯片</n-button>
+    <n-data-table
+      :loading="loading"
+      :columns="columns"
+      :data="data"
+      :pagination="pagination"
+      :bordered="false"
+    />
+    <n-modal v-model:show="showModal">
+      <n-card
+        style="width: 400px"
+        :title="modelTitle"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
+        <n-form ref="formRef" label-placement="left" :model="formValue" :rules="rules">
+          <n-form-item label="图片：" path="url">
+            <Upload v-model:list="formValue.url" />
+          </n-form-item>
+          <n-form-item label="状态：" path="status">
+            <n-switch v-model:value="formValue.status" :checked-value="1" :unchecked-value="2" />
+          </n-form-item>
+          <n-form-item>
+            <div class="m-auto">
+              <n-button
+                class="m-auto"
+                type="primary"
+                attr-type="button"
+                @click="handleValidateClick"
+              >
+                提交
+              </n-button>
+              <n-button class="ml-10" @click="clear">取消</n-button>
+            </div>
+          </n-form-item>
+        </n-form>
+      </n-card>
+    </n-modal>
+  </CommonPage>
+</template>
+
+<script setup>
+import { onMounted, h } from 'vue'
+import api from './api'
+import { NButton } from 'naive-ui'
+import Upload from '@/components/Upload.vue'
+
+const loading = ref(false)
+
+const columns = ref([
+  {
+    title: 'ID',
+    align: 'center',
+    key: 'ID',
+  },
+  {
+    title: '图片',
+    align: 'center',
+    slot: 'url',
+    render(row) {
+      return h('img', {
+        src: row.url[0]?.url || '',
+        style: {
+          width: '30px',
+          height: '30px',
+        },
+      })
+    },
+  },
+  {
+    title: '状态',
+    align: 'center',
+    slot: 'status',
+    render(row) {
+      return h('span', row.status === 1 ? '正常' : '禁用')
+    },
+  },
+  {
+    title: '操作',
+    align: 'center',
+    slot: 'action',
+    render(row) {
+      return [
+        h(
+          NButton,
+          {
+            type: 'primary',
+            size: 'small',
+            onClick: () => {
+              formValue.value = row
+              handleAdd(2)
+            },
+          },
+          () => '编辑'
+        ),
+      ]
+    },
+  },
+])
+
+const data = ref([])
+
+const formRef = ref(null)
+
+const rules = {
+  url: {
+    required: true,
+    type: 'array',
+    message: '请上传图片',
+  },
+}
+
+const formValue = ref({
+  url: [],
+  status: 1,
+})
+
+const showModal = ref(false)
+
+const pagination = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  onChange: (page) => {
+    pagination.value.page = page
+    getList()
+  },
+  onUpdatePageSize: (pageSize) => {
+    pagination.value.pageSize = pageSize
+    pagination.value.page = 1
+    getList()
+  },
+})
+
+onMounted(() => {
+  getList()
+})
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const res = await api.getBanner({
+      pageNum: pagination.value.current,
+      pageSize: pagination.value.pageSize,
+    })
+    console.log(res)
+    data.value = res.data.data.map((item) => ({
+      ...item,
+      url: [
+        {
+          id: item.ID,
+          url: item.url,
+          status: 'finished',
+        },
+      ],
+    }))
+  } catch (error) {
+    $message.error(error.msg)
+  }
+  loading.value = false
+}
+
+const modelTitle = ref('')
+
+const handleAdd = (e) => {
+  modelTitle.value = e === 1 ? '新增幻灯片' : '编辑幻灯片'
+  showModal.value = true
+}
+
+const clear = () => {
+  formValue.value = {
+    name: '',
+    status: 1,
+  }
+  showModal.value = false
+}
+
+const handleValidateClick = async (e) => {
+  e.preventDefault()
+  formRef.value?.validate(async (errors) => {
+    if (!errors) {
+      try {
+        const data = {
+          ...formValue.value,
+          url: formValue.value.url[0].url,
+          status: formValue.value.status,
+        }
+        await api.addBanner(data)
+        $message.success('成功')
+        clear()
+        getList()
+      } catch (error) {
+        $message.error(error.msg)
+      }
+    } else {
+      $message.error('Invalid')
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>