备份

src/views/kxsCamp/components/add/index.vue

@@ -0,0 +1,215 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Add"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsSys"]);
+
+})
+// 组件传参对象
+const props = defineProps<{
+  submit: Function;
+  addVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+}>();
+// 表单数据
+let UpdateForm = ref({
+  status: "", //状态 0未开始 1进行中 2已结束
+  campNum: "", //期数
+  campType: "", //活动类型
+  createUserId: "", //发起人用户ID
+  startTime: "", //开始时间
+  endTime: "", //结束时间
+  createBy: "", //创建人
+  picUrl: "", //活动图片
+  id: "", //主键ID
+  campNum: "", //期数
+  campType: "", //活动类型
+  createUserId: "", //发起人用户ID
+  startTime: "", //开始时间
+  endTime: "", //结束时间
+  updateBy: "", //更新人
+  picUrl: "", //活动图片
+
+});
+// 表单实例
+const ruleFormRef = ref()
+
+// 传参选项数据
+// 状态 0未开始 1进行中 2已结束选项数据
+const statusOptionList = [
+]
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async (formEl) => {
+  // 表单校验拦截
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      //表单校验成功回调
+      console.log('submit!')
+
+
+      // 需动态生成接口
+      const { status, msg }: any = await http.Request({
+        method: UrlList.kxsSys.sysCampupdate.method,
+        url: UrlList.kxsSys.sysCampupdate.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "新增成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+                status: "", //状态 0未开始 1进行中 2已结束
+      campNum: "", //期数
+      campType: "", //活动类型
+      createUserId: "", //发起人用户ID
+      startTime: "", //开始时间
+      endTime: "", //结束时间
+      createBy: "", //创建人
+      picUrl: "", //活动图片
+      id: "", //主键ID
+      campNum: "", //期数
+      campType: "", //活动类型
+      createUserId: "", //发起人用户ID
+      startTime: "", //开始时间
+      endTime: "", //结束时间
+      updateBy: "", //更新人
+      picUrl: "", //活动图片
+
+        };
+        // 关闭新增弹窗;
+        closeVisible()
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+
+// 表单校验规则
+const rules = reactive({
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject("closeAddVisible");
+const closeVisible = () => {
+  // 清空表单项;
+  UpdateForm.value = {
+        status: "", //状态 0未开始 1进行中 2已结束
+    campNum: "", //期数
+    campType: "", //活动类型
+    createUserId: "", //发起人用户ID
+    startTime: "", //开始时间
+    endTime: "", //结束时间
+    createBy: "", //创建人
+    picUrl: "", //活动图片
+    id: "", //主键ID
+    campNum: "", //期数
+    campType: "", //活动类型
+    createUserId: "", //发起人用户ID
+    startTime: "", //开始时间
+    endTime: "", //结束时间
+    updateBy: "", //更新人
+    picUrl: "", //活动图片
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible")
+    el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+      el-form-item(label="状态 0未开始 1进行中 2已结束", prop="status")
+        el-select(
+          v-model="UpdateForm.status",
+          placeholder="请选择状态 0未开始 1进行中 2已结束",
+          clearable,
+          class="!w-[230px]"
+        )
+          el-option(:label="item.label", :value="item.id" v-for="(item,index) in statusOptionList")
+    el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      @click="closeVisible"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      @click="submit(ruleFormRef)"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/kxsCamp/components/changeStatus/index.vue

@@ -0,0 +1,179 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "Edit"
+};
+</script>
+<script setup lang="ts">
+import { inject, onMounted, reactive, ref, Uploadfile, UploadImg, Editor, useRenderIcon, ElMessage, ElMessageBox, Upload, Close, http, getGroupUrl, RegularVerification, verification } from "@/utils/importUsed"
+// 接口列表实例
+let UrlList = reactive(null)
+// 获取当前板块接口列表
+onMounted(async () => {
+  UrlList = await getGroupUrl(["kxsSys"]);
+
+})
+const props = defineProps<{
+  editVisible: {
+    type: Boolean;
+    default: false;
+  };
+  width: {
+    type: Number;
+    default: 50;
+  };
+  formData: {
+    id: any;
+    type: any;
+    default: {};
+  };
+}>();
+// 表单数据
+const UpdateForm: any = ref({
+  status: "", //状态 0未开始 1进行中 2已结束
+
+});
+// 状态 0未开始 1进行中 2已结束选项数据
+const statusOptionList = [
+]
+
+// 表单实例
+const ruleFormRef = ref()
+
+// 选项卡参数(默认值为列表某项的id)
+const activeId = ref('1')
+// 提交函数
+const submit = async (formEl) => {
+  // 表单校验拦截
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      //表单校验成功回调
+      console.log('submit!')
+
+      // 需动态生成接口
+      const { status, msg }: any = await http.Request({
+        method: UrlList.kxsSys.sysCampchangeStatus.method,
+        url: UrlList.kxsSys.sysCampchangeStatus.url,
+        params: UpdateForm.value
+      });
+      if (status === 1) {
+        //业务成功回调
+        ElMessage({
+          message: "修改成功",
+          type: "success"
+        });
+        UpdateForm.value = {
+          status: "", //状态 0未开始 1进行中 2已结束
+
+        };
+        // 关闭修改弹窗;
+        closeChangeStatusVisible();
+      } else {
+        //业务失败回调
+        ElMessageBox.alert(msg, "提示", {
+          confirmButtonText: "关闭",
+          type: "warning"
+        });
+      }
+    } else {
+      //表单校验失败回调
+      ElMessage({
+        message: "请输入完整信息",
+        type: "error"
+      });
+    }
+  })
+};
+
+
+
+
+// 表单校验规则
+const rules = reactive({
+
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject('closeEditChangeStatusVisible');
+const openVisible = async () => {
+  //通过ID获取表格数据
+  const { status, data }: any = await http.Request({ method: UrlList.kxsSys.sysCamp.method, url: UrlList.kxsSys.sysCamp.url, params: { id: props.formData.id } });
+  if (status === 1) {
+    UpdateForm.value = data;
+
+  }
+};
+// 关闭弹窗回调函数
+const closeChangeStatusVisible = () => {
+  UpdateForm.value = {
+    status: "", //状态 0未开始 1进行中 2已结束
+
+  };
+  closeFn();
+};
+</script>
+
+<template lang="pug">
+.main
+  el-dialog(v-model='props.editVisible' width="50%" title="修改" @close="closeChangeStatusVisible()" @open="openVisible")
+    el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
+      el-form-item(label="状态 0未开始 1进行中 2已结束", prop="status")
+        el-select(
+          v-model="UpdateForm.status",
+          placeholder="请选择状态 0未开始 1进行中 2已结束",
+          clearable,
+          class="!w-[230px]"
+        )
+          el-option(:label="item.label", :value="item.id" v-for="(item,index) in statusOptionList")
+
+    el-button(
+      :icon="useRenderIcon(Close)",
+      :loading="loading",
+      @click="closeChangeStatusVisible()"
+    ) 关闭
+    el-button(
+      type="primary",
+      :icon="useRenderIcon(Upload)",
+      @click="submit(ruleFormRef)"
+    ) 确认提交
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+.collapsedom {
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.ovh-x {
+  height: 40vh;
+  overflow-y: auto;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>

src/views/kxsCamp/hook.tsx

@@ -0,0 +1,195 @@
+import { reactive, onMounted, ref, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps } from "@/utils/importUsed"
+// 表单实例
+const ruleFormRef = ref()
+export function useKxsCamp() {
+  // 接口列表实例
+  let UrlList = reactive(null)
+  // 获取当前板块接口列表
+  onMounted(async () => {
+    UrlList = await getGroupUrl(["kxsSys"]);
+    onSearch(ruleFormRef.value);
+  
+  });
+  let form = reactive({
+  createUserId:"", //发起人用户ID
+  createUsername:"", //发起人姓名
+  createCode:"", //发起人编码
+  startTime:"", //开始时间
+  endTime:"", //结束时间
+
+  });
+  const dataList = ref([]);
+  const loading = ref(false);
+  const dialogAddVisible = ref(false);
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      width: 55,
+      align: "left",
+      hide: ({ checkList }) => !checkList.includes("勾选列")
+    },
+    {
+      label: "序号",
+      type: "index",
+      width: 70,
+      hide: ({ checkList }) => !checkList.includes("序号列")
+    },
+        {
+      label: "发起人用户ID",
+      prop: "createUserId",
+      minWidth: 200
+    },
+    {
+      label: "发起人姓名",
+      prop: "createUsername",
+      minWidth: 200
+    },
+    {
+      label: "发起人编码",
+      prop: "createCode",
+      minWidth: 200
+    },
+    {
+      label: "开始时间",
+      prop: "startTime",
+      minWidth: 200
+    },
+    {
+      label: "结束时间",
+      prop: "endTime",
+      minWidth: 200
+    },
+
+    {
+      label: "操作",
+      fixed: "right",
+      width: 120,
+      slot: "operation"
+    }
+  ];
+  // 当前页数量切换
+  function handleSizeChange(val: number) {
+    if (typeof val === "number") {
+      pagination.pageSize = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 当前页码切换
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+    if (typeof val === "number") {
+      pagination.currentPage = val;
+      onSearch(ruleFormRef.value);
+    }
+  }
+  // 选择表格项
+  function handleSelectionChange(val) {
+    console.log(`SelectionChange: ${val}`);
+    onSearch(ruleFormRef.value);
+  }
+  // 搜索列表
+  async function onSearch(formEl) {
+    // 表单校验拦截
+    if (!formEl) return
+    await formEl.validate(async (valid, fields) => {
+      if (valid) {
+        //表单校验成功回调
+        console.log('submit!')
+        // 状态调整为加载中
+        loading.value = true;
+        // 调用接口（需动态生成接口）
+        const { status, msg, data }: any = await http.Request({
+          method: UrlList.kxsSys.sysCamppage.method,
+          url: UrlList.kxsSys.sysCamppage.url,
+          params: {
+            ...form,
+            pageSize: pagination.pageSize,
+            pageNum: pagination.currentPage
+          }
+        });
+        dataList.value = data.records;
+        pagination.total = data.total;
+        setTimeout(() => {
+          loading.value = false;
+        }, 500);
+      } else {
+        //表单校验失败回调
+        ElMessage({
+          message: "请输入完整信息",
+          type: "error"
+        });
+      }
+    })
+  }
+
+
+
+    // 删除
+  function handleDelete(row) {
+    ElMessageBox.confirm(
+      `是否删除该训练营? `,
+      "提示",
+      {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+    ).then(async () => {
+      const { status, msg }: any = await http.Request({ method: UrlList.kxsSys.sysCampremoveById.method, url: UrlList.kxsSys.sysCampremoveById.url, params: String(row.id) });
+      if (status === 1) {
+        ElMessage({
+          message: "删除成功",
+          type: "success"
+        });
+        onSearch(ruleFormRef);
+      } else {
+        ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
+        type: "warning"
+      });
+      };
+    })
+  }
+
+    // 新增
+  const addVisible = ref(false);
+  function handleAdd() {
+    addVisible.value = true;
+  };
+
+    // 训练营-开启/结束活动
+  const editChangeStatusVisible = ref(false);
+  const editChangeStatusFormData = ref({});
+  function handleChangeStatus(row) {
+    editChangeStatusVisible.value = true;
+    // 表格数据赋值
+    editChangeStatusFormData.value = row;
+  };
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange,
+    ruleFormRef,
+
+    handleAdd,
+    addVisible,
+    handleDelete,
+    handleChangeStatus,
+    editChangeStatusVisible,
+    editChangeStatusFormData,
+
+  };
+}

src/views/kxsCamp/index.vue

@@ -0,0 +1,161 @@
+<script lang="ts">
+// 声明额外的选项
+export default {
+  name: "KxsCamp"
+};
+</script>
+<script setup lang="ts">
+import { provide } from "vue";
+import { useKxsCamp } from "./hook";
+import { http } from "@/utils/http";
+import { useRenderIcon, hasAuth, PureTableBar } from "@/utils/importUsed"
+import Add from "./components/add/index.vue";
+import EditChangeStatus from "./components/changeStatus/index.vue";
+import Search from "@iconify-icons/ep/search";
+import Addicon from "@iconify-icons/ep/document-add";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange,
+  ruleFormRef,
+  handleAdd,
+  addVisible,
+  handleAdd,
+  addVisible,
+  handleDelete,
+  handleChangeStatus,
+  editChangeStatusVisible,
+  editChangeStatusFormData,
+
+} = useKxsCamp();
+// 关闭添加
+const closeAddVisible = () => {
+  addVisible.value = false
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭添加
+const closeAddVisible = () => {
+  addVisible.value = false
+}
+provide('closeAddVisible', closeAddVisible)
+// 关闭修改
+const closeEditChangeStatusVisible = () => {
+  editChangeStatusVisible.value = false
+}
+provide('closeEditChangeStatusVisible', closeEditChangeStatusVisible)
+
+</script>
+
+<template lang="pug">
+.main
+  div
+    //- 搜索表格组件条件
+    el-form.bg-bg_color.pl-8.pt-4.pr-8(
+      label-position="left"
+      label-width="100px"
+      :inline="true",
+      :model="form",
+      class="w-[99/100]"
+      ref="ruleFormRef"
+      :rules="rules"
+    )
+
+      el-form-item
+        el-button(
+          type="primary",
+          :icon="useRenderIcon(Search)",
+          :loading="loading",
+          @click="onSearch(ruleFormRef)"
+        ) 查询
+    //- 表格组件
+    PureTableBar(title="训练营", @refresh="onSearch(ruleFormRef)" )
+      template(#buttons)
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()" v-if="hasAuth(['add'])") 新增
+        el-button(type="primary" :icon="useRenderIcon(Addicon)" @click="handleAdd()" v-if="hasAuth(['add'])") 新增
+
+      template(v-slot="{ size, checkList }")
+        pure-table(stripe 
+          border,
+          align-whole="center",
+          table-layout="auto",
+          :loading="loading",
+          :size="size",
+          :data="dataList",
+          :columns="columns",
+          :checkList="checkList",
+          :pagination="pagination",
+          :paginationSmall="size === 'default' ? true : false",
+          :header-cell-style="{ background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }",
+          @selection-change="handleSelectionChange",
+          @size-change="handleSizeChange",
+          @current-change="handleCurrentChange"
+        )          
+          template(#operation="{ row }")
+            .flex.flex-wrap.items-center
+              el-dropdown(trigger="click", :hide-on-click="false")
+                el-button(type="primary") 操作
+                  el-icon.el-icon--right
+                    arrow-down
+                template(#dropdown)
+                  el-dropdown-menu
+                    el-button.reset-margin(
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(row)"
+                      :icon="useRenderIcon(Delete)"
+                      v-if="hasAuth(['delete'])"
+                    ) 删除
+                    el-dropdown-item
+                      el-button.reset-margin(
+                        type="primary"
+                        size="small"
+                        @click="handleChangeStatus(row)"
+                        :icon="useRenderIcon(EditPen)"
+                        v-if="hasAuth(['changeStatus'])"
+                      ) 训练营-开启/结束活动
+
+    Add(:addVisible="addVisible")
+    Add(:addVisible="addVisible")
+    EditChangeStatus(:editVisible="editChangeStatusVisible" :formData="editChangeStatusFormData")
+
+                    
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 700;
+}
+
+:deep(.el-pagination) {
+  flex-flow: wrap;
+}
+
+:deep(.is-draggable) {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:deep(.el-dialog__header) {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #fff;
+}
+
+:deep(.el-descriptions__header) {
+  margin: 16px 0 !important;
+}
+</style>