完成活动管理页面

2024-10-11 12:00:39 +08:00
parent 352f15a832
commit 3bb53d3450
3 changed files with 337 additions and 10 deletions
@@ -1,10 +1,224 @@
 <template>
  <el-card>
-    <div>活动管理</div>
+
+    <el-row :gutter="10">
+
+      <el-col :span="4">
+        <el-input
+            v-model="searchName"
+            style="max-width: 300px"
+            placeholder="模糊查询活动名称"
+            class="input-with-select"
+            onchange="searchEvnt"
+        >
+
+          <template #append>
+            <el-button type="success"  @click="searchEvnt">查询</el-button>
+          </template>
+        </el-input>
+      </el-col>
+    </el-row>
+
+
+  </el-card>
+
+  <el-card class="mt10">
+    <el-table
+        ref="table"
+        :data="tableData"
+        :default-sort="{ prop: 'date', order: 'descending' }"
+        :header-cell-style="{ backgroundColor: '#ecf5ff' }"
+        border
+        stripe
+        style="width: 100%"
+    >
+
+      <el-table-column
+          label="序号"
+          prop="userId"
+          width="120"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+      <el-table-column
+          label="活动名称"
+          prop="name"
+          width="600"
+          align="left"
+          show-overflow-tooltip
+      />
+
+      <el-table-column label="展示图" width="600px" align="center">
+        <template #default="scope">
+          <el-image style="width: 600px; height: 50px" :src="scope.row.avatar" :fit="fit" lazy />
+        </template>
+      </el-table-column>
+
+      <el-table-column
+          label="发布时间"
+          prop="date"
+          width="auto"
+          align="center"
+          show-overflow-tooltip
+          sortable
+      />
+
+      <el-table-column label="操作" width="200px" align="center">
+        <template v-slot:default="scope">
+          <el-button type="info">编辑</el-button>
+          <el-button type="danger">删除</el-button>
+        </template>
+      </el-table-column>
+
+    </el-table>
+    <el-pagination
+        small
+        background
+        layout="prev, pager, next"
+        :total="tableData.length"
+        class="mt-4 mt10"
+        @current-change="handleCurrentChange"
+    />
  </el-card>
 </template>
-
 <script setup>
+import * as XLSX from 'xlsx'
+import {
+  Edit,
+  Delete,
+  InfoFilled,
+  View,
+  ArrowDownBold,
+  Plus,
+} from '@element-plus/icons-vue'
+import {nextTick, onMounted, reactive, ref} from 'vue'
+
+import {options} from './options.js'
+import {getUserList} from "../../api/modules/user";
+
+const tableData = ref([])
+const dataList = ref([])
+const table = ref()
+const tabclickIndex = ref()
+const isExpand = ref(false)
+const columnData = ref(JSON.parse(JSON.stringify(options)))
+const disabled = ref(false)
+const dialogVisible = ref(false)
+const total = ref(0)
+const formInline = ref({})
+const registerDate = ref('');
+const searchName = ref('');
+const queryData = ref({
+  keyWord: '',
+  page: 1,
+  size: 10,
+})
+
+const initData = () => {
+
+  tableData.value = columnData.value;
+
+  // orderLists(queryData.value).then((res) => {
+  //   console.log(res.data.data)
+  //   // total.value = res.data.data.total
+  //   tableData.value = res.data.data
+  // })
+}
+const itemEditHanld = (item) => {
+  item.itemEdit = !item.itemEdit
+  // // console.log(JSON.stringify(item));
+  // tabclickIndex.value = item;
+}
+const handleSizeChange = (val) => {
+  console.log(val)
+}
+const handleSelectionChange = (val) => {
+}
+const handleCurrentChange = (val) => {
+  queryData.value.size = 10
+  queryData.value.page = val
+  initData(queryData.value)
+}
+const handleClose = () => {
+}
+const dialogVisibleHanle = () => {
+  console.log('滑动加载')
+}
+const handleExpand = () => {
+  isExpand.value = false
+  tableData.value.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpand.value)
+  })
+}
+
+const handleOpen = () => {
+  isExpand.value = true
+  tableData.value.forEach((item) => {
+    table.value.toggleRowExpansion(item, isExpand.value)
+  })
+}
+
+// 搜索事件
+const searchEvnt = ()=> {
+  console.log('点击搜索');
+};
+
+onMounted(() => {
+  initData()
+})
 </script>

-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.mt-4 {
+  float: right;
+  text-align: right;
+  margin-bottom: 20px;
+}
+
+.demo-form-inline {
+}
+
+.dragClass {
+  background: rgba($color: #41c21a, $alpha: 0.5) !important;
+}
+
+// 停靠
+.ghostClass {
+  background: rgba($color: #6cacf5, $alpha: 0.5) !important;
+}
+
+// 选择
+.chosenClass:hover > td {
+  background: rgba($color: #f56c6c, $alpha: 0.5) !important;
+}
+
+.icon-view {
+  font-size: 20px;
+  color: #673ab7;
+  margin: 0 10px;
+}
+
+.icon-edit {
+  font-size: 20px;
+  color: #2f60c2;
+  margin: 0 10px;
+}
+
+.icon-dele {
+  font-size: 20px;
+  color: #ff5722;
+}
+
+.btn-color {
+  background: #fff;
+  color: #4c60cc;
+}
+
+.expand-title {
+  padding: 10px;
+  color: #919399;
+  font-weight: 600;
+}
+</style>
@@ -1,13 +1,40 @@
-<script setup>
-
-</script>
-
 <template>
  <el-card>
-    <div>  配置客服电话</div>
+    <el-form :model="form" label-width="auto" style="max-width: 600px;">
+
+      <el-form-item label="客服电话">
+        <span>400******************</span>
+      </el-form-item>
+
+      <el-form-item label="修改电话">
+        <el-input v-model="form.name" />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">修改</el-button>
+      </el-form-item>
+    </el-form>
  </el-card>
 </template>

-<style scoped lang="scss">
+<script setup>
+import { reactive } from 'vue'

-</style>
+// do not use same name with ref
+const form = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+})
+
+const onSubmit = () => {
+  console.log('submit!')
+}
+</script>
+
+<style lang="scss" scoped></style>
@@ -0,0 +1,86 @@
+export const options = [
+    {
+    userId: 1,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '高永建',
+      nickname: '软件开发老高',
+      mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },
+  {
+    userId: 2,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '张三',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-10 10:11:01'
+  },
+  {
+    userId: 3,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '李四',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-13 10:11:01'
+  },
+  {
+    userId: 4,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-02 10:11:01'
+  },{
+    userId: 5,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-01 10:11:01'
+  },
+  {
+    userId: 6,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },{
+    userId: 7,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },{
+    userId: 8,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },{
+    userId: 9,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },{
+    userId: 10,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },
+  {
+    userId: 11,
+    avatar: 'https://pic.qqans.com/up/2024-6/2024620113729773.jpg',
+    name: '名称',
+    nickname: '软件开发老高',
+    mobile: '19136448763',
+    date: '2024-10-11 10:11:01'
+  },
+
+];