feat: 广告模块，交班记录80%，等用户完成

2025-03-01 11:12:29 +08:00
parent ad52c6bbf9
commit 467bfaa2eb
17 changed files with 942 additions and 7 deletions
--- a/src/views/data/work.vue
+++ b/src/views/data/work.vue
@@ -1,3 +1,13 @@
 <template>
-  <div></div>
-</template>
+  <!-- 交班模块 -->
+  <div style="padding: 15px;">
+    <!-- 搜索 -->
+    <Search></Search>
+    <!-- 表格 -->
+    <Content></Content>
+  </div>
+</template>
+<script setup>
+import Search from './workconfig/Search.vue'
+import Content from './workconfig/Content.vue'
+</script>
--- a/src/views/data/workconfig/Content.vue
+++ b/src/views/data/workconfig/Content.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="Table">
+    <!-- 表格 -->
+    <Table :list="datas.tableData" @handleDelete="handleDelete" @handleEdit="handleEdit"></Table>
+    <!-- 分页 -->
+    <Paging :pagingConfig="datas.pagingConfig" @sizeChange="sizeChange" @currentChange="currentChange"></Paging>
+    <!-- 其他模板 -->
+    <!-- 新增/编辑 -->
+    <myDialog ref="myDialogRef" :title="datas.title" @confirm="confirm" width="30%">
+      <el-form ref="ruleFormRef" :rules="datas.rules" :model="datas.DialogForm" label-width="80px">
+        <el-form-item label="商品图片" required prop="images">
+          <div style="display: flex; flex-wrap: wrap">
+            <div v-for="(item, index) in datas.DialogForm.images" :key="index" style="position: relative"
+              class="showStyle">
+              <el-icon class="buttonstyle" @click="deleteEvent(item)">
+                <DeleteFilled />
+              </el-icon>
+              <img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :src="item" alt="" />
+            </div>
+            <div class="upImgStyle" @click="addimgEvent">+</div>
+          </div>
+        </el-form-item>
+        <el-form-item label="适用群体">
+          <el-radio-group v-model="datas.DialogForm.deductionGroup">
+            <el-radio label="全部" value="all" />
+            <el-radio label="仅会员" value="vip" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="联系电话">
+          <el-input v-model="datas.DialogForm.telephone" placeholder="请输入联系电话" />
+        </el-form-item>
+        <el-form-item label="开启下单积分抵扣">
+          <el-switch v-model="datas.DialogForm.enableDeduction" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item label="额外价格">
+          <el-col :span="3">
+            <el-input v-model="datas.DialogForm.minPaymentAmount" type="number" placeholder="">
+              <template #append>元</template>
+            </el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="datas.DialogForm.remark" placeholder="请输入备注" type="textarea" />
+        </el-form-item>
+      </el-form>
+    </myDialog>
+    <!-- 选择图片 -->
+    <AddImg ref="addImg" @successEvent="successEvent"></AddImg>
+  </div>
+</template>
+<script setup>
+import Table from './component/Table.vue'
+import Paging from './component/Paging.vue'
+import myDialog from '@/components/mycomponents/myDialog.vue'
+import eventBus from '@/utils/eventBus'
+import API from './api'
+
+const datas = reactive({
+  tableData: [], // 表格数据
+  title: '新增数据',
+  pagingConfig: {
+    total: 0, // 总数
+    pageSize: 10, // 每页数据数量
+    pageNumber: 1, // 当前页码
+  },
+  DialogForm: { // 弹窗表单数据
+    name: "",
+    telephone: "",
+    address: "",
+    remark: "",
+    images: []
+  },
+  rules: {
+    name: [
+      { required: true, message: '请输入供应商名称', trigger: 'blur' },
+      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+    ],
+  }
+})
+const myDialogRef = ref(null)
+const ruleFormRef = ref(null)
+onMounted(() => {
+  getList()
+  eventBus.on('search', (res) => {
+    getList(res)
+  })
+})
+onBeforeUnmount(() => {
+  eventBus.off('search')
+})
+
+async function getList(data = {}) {
+  const res = await API.getPage({ page: datas.pagingConfig.pageNumber, size: datas.pagingConfig.pageSize, ...data })
+  datas.tableData = res.records
+  datas.pagingConfig.total = res.totalRow
+  datas.pagingConfig.pageSize = res.pageSize
+  datas.pagingConfig.pageNumber = res.pageNumber
+}
+function add() {
+  if (datas.DialogForm.id) {
+    rest()
+  }
+  datas.title = '新增数据'
+  myDialogRef.value.open()
+}
+async function handleEdit(row) {
+  datas.title = '编辑数据'
+  const res = await API.getinfo(row.id)
+  datas.DialogForm = res
+  // 有图片
+  // datas.DialogForm.goodsImageUrl = res.goodsImageUrl.split(',')
+  myDialogRef.value.open()
+}
+async function confirm() {
+  ruleFormRef.value.validate(async valid => {
+    if (valid) {
+      let res = null
+      if (datas.title == '新增数据') {
+        // 图片处理
+        // datas.DialogForm.goodsImageUrl = datas.DialogForm.goodsImageUrl.join(',')
+        res = await API.add(datas.DialogForm)
+      } else {
+        // datas.DialogForm.goodsImageUrl = datas.DialogForm.goodsImageUrl.join(',')
+        res = await API.update(datas.DialogForm)
+      }
+      if (res.code == 200) {
+        ElMessage({
+          message: '成功',
+          type: 'success',
+        })
+        rest()
+        getList()
+        myDialogRef.value.close()
+      }
+    }
+  })
+}
+// 重置
+function rest() {
+  datas.DialogForm = { sort: 1, images: [] }
+}
+async function handleDelete(id) {
+  ElMessageBox.confirm("是否删除数据项?", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(
+    async () => {
+      let res = await API.deleteByIds(id)
+      if (res.code == 200) {
+        ElMessage({
+          message: '删除成功',
+          type: 'success',
+        })
+        getList()
+      }
+    }
+  );
+}
+
+// 图片
+const addImg = ref(null)
+function addimgEvent() {
+  (addImg.value)?.show()
+}
+function successEvent(d) {
+  datas.DialogForm['images'].push(d[0].url);
+}
+function deleteEvent(d) {
+  let index = datas.DialogForm.images.findIndex((ele) => ele == d);
+  datas.DialogForm.images.splice(index, 1);
+}
+// 分页
+function sizeChange(val) {
+  datas.pagingConfig.pageSize = val
+  getList()
+}
+function currentChange(val) {
+  datas.pagingConfig.pageNumber = val
+  getList()
+}
+
+</script>
+<style scoped lang="scss">
+.Table {
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid #e4e7ed;
+  margin-top: 20px;
+  border-radius: 4px;
+}
+
+// 图片库样式
+.upImgStyle {
+  cursor: pointer;
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
+  text-align: center;
+  border: 1px dashed #ccc;
+  border-radius: 1%;
+  font-size: 30px;
+  color: #ccc;
+}
+
+.buttonstyle {
+  border-radius: 50%;
+  color: #db1616;
+  background-color: #fff;
+  font-size: 20px;
+  display: none;
+  position: absolute;
+  right: 0px;
+  top: -10px;
+  z-index: 10;
+}
+</style>
--- a/src/views/data/workconfig/Search.vue
+++ b/src/views/data/workconfig/Search.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="Search">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+
+      <el-form-item label="日期">
+        <el-date-picker :shortcuts="formInline.shortcuts" v-model="formInline.value1" type="daterange"
+          range-separator="-" start-placeholder="开始日期" value-format="YYYY-MM-DD" @change="dateChange"
+          end-placeholder="结束日期" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="onSubmit">搜索</el-button>
+        <el-button icon="Refresh" @click="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import eventBus from '@/utils/eventBus'
+const formInline = reactive({
+  shortcuts: [{
+    text: '最近一周',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end]
+    }
+  }, {
+    text: '最近一个月',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end]
+    }
+  }, {
+    text: '最近三个月',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end]
+    }
+  }]
+})
+const onSubmit = () => {
+  eventBus.emit('search', formInline)
+}
+const reset = () => {
+  for (let key in formInline) {
+    formInline[key] = ''
+  }
+  eventBus.emit('search', formInline)
+}
+function dateChange(d) {
+  formInline.endDate = d[1]
+  formInline.beginDate = d[0]
+}
+</script>
+
+<style scoped lang="scss">
+.Search {
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+
+.demo-form-inline .el-input {
+  --el-input-width: 220px;
+}
+
+.demo-form-inline .el-select {
+  --el-select-width: 220px;
+}
+</style>
--- a/src/views/data/workconfig/api.ts
+++ b/src/views/data/workconfig/api.ts
@@ -0,0 +1,60 @@
+import request from "@/utils/request";
+const baseURL = "/account/admin/handover-record";
+// XXX-配置
+const AuthAPI = {
+  // 列表
+  getList(params: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/list`,
+      method: "get",
+      params,
+    });
+  },
+  /** 分页*/
+  getPage(params: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/page`,
+      method: "get",
+      params,
+    });
+  },
+  // 新增
+  add(data: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "post",
+      data: { ...data },
+    });
+  },
+  // 详情
+  getinfo(id: number) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "get",
+    });
+  },
+  // 编辑
+  update(data: Object) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "put",
+      data,
+    });
+  },
+  // 删除
+  deleteByIds(id: number | String) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "delete",
+    });
+  },
+
+};
+export interface Responseres {
+  code?: number | null;
+  data?: any;
+  msg?: null | string;
+  [property: string]: any;
+}
+
+export default AuthAPI;
--- a/src/views/data/workconfig/component/Paging.vue
+++ b/src/views/data/workconfig/component/Paging.vue
@@ -0,0 +1,24 @@
+<template>
+  <div style="margin-top: 10px;">
+    <el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
+      layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
+      :total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  pagingConfig: {
+    type: Object,
+    default: () => { }
+  }
+})
+const emit = defineEmits(['sizeChange', 'currentChange'])
+// 当前条改变
+function handleSizeChange(val) {
+  emit('sizeChange', val)
+}
+// 当前页改变
+function handleCurrentChange(val) {
+  emit('currentChange', val)
+}
+</script>
--- a/src/views/data/workconfig/component/Table.vue
+++ b/src/views/data/workconfig/component/Table.vue
@@ -0,0 +1,39 @@
+<template>
+  <div style="margin-top: 10px;">
+    <el-table :data="props.list" border style="width: 100%">
+      <el-table-column prop="date" align="center" label="商户名称" />
+      <el-table-column prop="staffName" align="center" label="职员名称" />
+      <el-table-column prop="orderCount" align="center" label="订单数量" />
+      <el-table-column prop="date" align="center" label="应交金额" />
+      <el-table-column prop="quickInAmount" align="center" label="快捷收款金额" />
+      <el-table-column prop="refundAmount" align="center" label="退款金额" />
+      <el-table-column prop="date" align="center" label="总收入" />
+      <el-table-column prop="loginTime" align="center" label="开始时间" />
+      <el-table-column prop="handoverTime" align="center" label="交班时间" />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button size="small" type="primary" link icon="Edit" @click="handleEdit(scope.row)">查看</el-button>
+          <el-button size="small" type="primary" link icon="Edit" @click="handleEdit(scope.row)">导出</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['handleDelete', 'handleEdit'])
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  }
+})
+
+function handleEdit(row) {
+  emit('handleEdit', row)
+}
+function handleDelete(index, row) {
+  emit('handleDelete', row.id)
+}
+
+</script>