cnlive_project / cnlive-community-web-vue · Files

<script setup lang="ts">
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import {
  eventCategory,
  eventCategoryEdit,
  eventCategoryOmit,
  eventCategoryDetail,
} from "@/api/event";
import { parseTime } from "@/utils/tool";
// import * as store from "@/pinia/index";
import { useLoginStore } from "@/pinia/login";
import Pagination from "@/components/Pagination/index.vue";
import { ElMessageBox } from "element-plus";
import type { ElForm } from "element-plus";
interface Form {
  page: number;
  pageSize: number;
  name: string;
}
interface Params {
  total: number;
  query: Form;
}
interface Data {
  loading: boolean;
  list: any[] | null;
  params: Params;
}
let data = reactive({
  list: [],
  loading: false,
  params: {
    total: 0,
    query: {
      page: 1,
      pageSize: 10,
      name: "",
    },
  },
});
let form = reactive({
  name: "",
  status: "0",
  id: null,
  createTime: "",
  deleteFlag: "",
  oid: useLoginStore()?.getOid ?? 0,
  // oid: store?.family?.loginStore()?.organizationId ?? 0,
});
/**
 * 表单验证规则
 */
const rules = reactive({
  name: [
    {
      required: true,
      message: "请填写活动名称",
      trigger: "change",
    },
  ],
});
const dialogFormVisible = ref(false);
const loading = ref(false);
const ruleFormRef = ref<InstanceType<typeof ElForm>>();
let instance: ComponentInternalInstance | null = getCurrentInstance();
/**
 * 状态值
 * @enum {number}
 */
enum statusEnum {
  "禁用" = 0,
  "启用",
}
/**
 * 列表
 */
const getList = async () => {
  data.loading = true;
  try {
    const res = await eventCategory(data.params.query);
    data.list = res?.data?.data?.list;
    data.params.total = res?.data?.data?.total;
  } catch (e) {
    console.log(e);
  } finally {
    data.loading = false;
  }
};
/**
 * 表单重置
 */
const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  dialogFormVisible.value = false;
  if (!formEl) return;
  formEl.resetFields();
};
/**
 * 表单提交
 */
const submitForm = (
  formEl: InstanceType<typeof ElForm> | undefined,
  type: number
) => {
  loading.value = true;
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      eventCategoryEdit(form)
        .then((res) => {
          if (res) {
            instance?.proxy?.$message.success("操作成功");
            dialogFormVisible.value = false;
            getList();
          } else {
            instance?.proxy?.$message.error("操作失败");
          }
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      instance?.proxy?.$message.error("请检查表单格式");
      loading.value = false;
      return false;
    }
  });
};
/**
 * 编辑
 */
const handleEdit = (obj: any) => {
  eventCategoryDetail({ id: obj.id }).then((res) => {
    form.id = res?.data?.data?.id;
    form.name = res?.data?.data?.name;
    form.status = res?.data?.data?.status?.toString();
    form.oid = res?.data?.data?.oid;
    form.createTime = res?.data?.data?.createTime;
    form.deleteFlag = res?.data?.data?.deleteFlag;
    dialogFormVisible.value = true;
  });
};
/**
 * 删除
 */
const handleDelete = (obj: any) => {
  ElMessageBox.confirm("确认删除吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      try {
        let res = await eventCategoryOmit({
          id: obj.id,
        });
        if (res?.data) {
          instance?.proxy?.$message.success("操作成功");
          getList();
        } else {
          instance?.proxy?.$message.error("操作失败");
        }
      } catch (e) {
        console.log(e);
      }
    })
    .catch(() => {
      console.log("取消");
    });
};
/**
 * 弹框关闭
 */
const dialogClose: void = () => {
  form.id = null;
  form.name = "";
  form.deleteFlag = "";
  form.createTime = "";
  // form.oid = store?.family?.loginStore()?.organizationId ?? 0;
  form.oid = useLoginStore()?.getOid ?? 0;
  form.status = "0";
};
onMounted(() => {
  getList();
});
</script>

<template>
  <div class="page-container">
    <!-- <h1>活动分类</h1> -->
    <el-row style="padding-bottom: 20px">
      <el-form :inline="true" label-width="70px" @submit.native.prevent>
        <el-form-item label="名称">
          <el-input
            v-model.trim="data.params.query.name"
            placeholder="请填写名称"
            maxlength="15"
            @change="getList"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button type="primary" @click="dialogFormVisible = true"
            >新增活动类型</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
    <el-table
      :data="data.list"
      style="width: 100%"
      border
      v-loading="data.loading"
      align="center"
      element-loading-text="拼命加载中"
    >
      <el-table-column prop="id" label="ID" align="center"></el-table-column>
      <el-table-column
        prop="name"
        label="活动类型"
        align="center"
      ></el-table-column>
      <el-table-column prop="createTime" label="添加时间" align="center">
        <template #default="scope">
          {{ parseTime(new Date(scope.row.createTime).getTime()) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          {{ statusEnum[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="data.params.total"
      v-model:currentPage="data.params.query.page"
      v-model:pageSize="data.params.query.pageSize"
      @pageChange="getList"
    ></Pagination>

    <el-dialog
      v-model="dialogFormVisible"
      title="新增活动类型"
      @close="dialogClose"
    >
      <el-form
        :model="form"
        label-width="120px"
        ref="ruleFormRef"
        :rules="rules"
      >
        <el-form-item label="活动类型" prop="name">
          <el-input
            v-model.trim="form.name"
            placeholder="请填写活动类型"
            autocomplete="off"
            maxlength="15"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          <el-button
            type="primary"
            @click.prevent="submitForm(ruleFormRef)"
            :loading="form.loading"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>