# mes-manager-front-master

**Repository Path**: daya35/mes-manager-front-master

## Basic Information

- **Project Name**: mes-manager-front-master
- **Description**: mes 前端
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2024-10-17
- **Last Updated**: 2024-10-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
    <img src="https://img.shields.io/badge/Vue-3.4.21-brightgreen.svg"/>
    <img src="https://img.shields.io/badge/Vite-5.1.5-green.svg"/>
    <img src="https://img.shields.io/badge/Element Plus-2.6.1-blue.svg"/>
    <img src="https://img.shields.io/badge/license-MIT-green.svg"/>
    <a href="https://gitee.com/youlaiorg" target="_blank">
        <img src="https://img.shields.io/badge/Author-有来开源组织-orange.svg"/>
    </a>
    <div align="center"> 中文 | <a href="./README.en-US.md">English</div>
</div>

![](https://foruda.gitee.com/images/1708618984641188532/a7cca095_716974.png "rainbow.png")

<div align="center">
  <a target="_blank" href="http://vue3.youlai.tech">👀 在线预览</a> |  <a target="_blank" href="https://juejin.cn/post/7228990409909108793">📖 阅读文档</a>  
</div>


# 仅供个人学习使用 

## 项目简介

[vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) 是基于 Vue3 + Vite5+ TypeScript5 + Element-Plus + Pinia 等主流技术栈构建的免费开源的后台管理前端模板（配套[后端源码](https://gitee.com/youlaiorg/youlai-boot)）。



## 项目预览

![明亮模式](https://foruda.gitee.com/images/1709651876583793739/0ba1ee1c_716974.png)

## 项目地址

| 项目 | Gitee                                                        |                                                        |                                                       |
| ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| 前端 | [mes-manager-front-master](https://gitee.com/abc123zxc/mes-manager-front-master) 
| 后端 | [mes-manager-admin-master](https://gitee.com/abc123zxc/mes-manager-admin-master)            |

## 环境准备

| 环境                 | 名称版本                                                     | 下载地址                                                     |
| -------------------- | :----------------------------------------------------------- | ------------------------------------------------------------ |
| **开发工具**         | VSCode                                                       | [下载](https://code.visualstudio.com/Download)           |
| **运行环境**         | Node ≥18                                                    | [下载](http://nodejs.cn/download)                        |


## 项目启动

```bash
# 克隆代码
git clone https://gitee.com/youlaiorg/vue3-element-admin.git

# 切换目录
cd vue3-element-admin

# 安装 pnpm
npm install pnpm -g

# 安装依赖
pnpm install

# 启动运行
pnpm run dev
```



## 项目部署

```bash
# 项目打包
pnpm run build:prod

# 上传文件至远程服务器
将打包生成在 `dist` 目录下的文件拷贝至 `/usr/share/nginx/html` 目录

# nginx.cofig 配置
server {
	listen     80;
	server_name  localhost;
	location / {
			root /usr/share/nginx/html;
			index index.html index.htm;
	}
	# 反向代理配置
	location /prod-api/ {
			proxy_pass http://vapi.youlai.tech/; # vapi.youlai.tech替换成你的后端API地址
	}
}
```

## CRUD 操作
1. api/account/index.ts 添加接口
```typescript
import request from "@/utils/request";
import { AxiosPromise } from "axios";
import { Account, AccountPageResult, AccountQuery } from "./types";

/**
 * 返回类型
 * AxiosPromise<>
 * 在 TypeScript 中，你可以显式定义返回类型以提供更强的类型检查，但这不是必需的。如果不显式定义类型，TypeScript 会根据实际返回的数据类型进行推断
 * 如果你的应用程序不需要严格的类型检查，或者你确定返回的数据类型总是符合预期，
 * 那么不显式定义类型也是完全可以的。不过，在大型项目或需要严格类型检查的场景下，
 * 显式定义类型可以帮助你提前发现潜在的问题，并提高代码的健壮性。
 */
/**
 * 获取账户分页数据
 * @param queryParams 可选的查询参数
 * @returns AxiosPromise<AccountPageResult> 返回一个Promise，解析为AccountPageResult类型的数据
 * @description 请求地址：/api/v1/accounts/page
 */
export function getAccountPage(
  queryParams?: AccountQuery
): AxiosPromise<AccountPageResult> {
  return request({
    url: "/api/v1/test/account/page",
    method: "get",
    params: queryParams,
  });
}

/**
 * 获取所有账户数据
 * @returns AxiosPromise<Account[]> 返回一个Promise，解析为Account类型的数组
 * @description 请求地址：/api/v1/accounts
 */
export function getAllAccountApi(): AxiosPromise<Account[]> {
  return request({
    url: "/api/v1/test/account",
    method: "get",
  });
}

/**
 * 根据ID获取账户数据
 * @param id 账户ID
 * @returns AxiosPromise<Account> 返回一个Promise，解析为Account类型的数据
 * @description 请求地址：/api/v1/accounts/{id}
 */
export function getAccountByIdApi(id: number): AxiosPromise<Account> {
  return request({
    url: "/api/v1/test/account/" + id,
    method: "get",
  });
}

/**
 * 添加账户数据
 * @param data 要添加的账户数据
 * @returns AxiosPromise<boolean> 返回一个Promise，解析为布尔值，表示添加是否成功
 * @description 请求地址：/api/v1/accounts
 */
export function addAccountApi(data: Account): AxiosPromise<boolean> {
  return request({
    url: "/api/v1/test/account",
    method: "post",
    data: data,
  });
}

/**
 * 更新账户数据
 * @param data 要更新的账户数据
 * @returns AxiosPromise<boolean> 返回一个Promise，解析为布尔值，表示更新是否成功
 * @description 请求地址：/api/v1/accounts
 */
export function updateAccountApi(data: Account): AxiosPromise<boolean> {
  return request({
    url: "/api/v1/test/account",
    method: "put",
    data: data,
  });
}

/**
 * 删除账户数据
 * @param ids 要删除的账户ID，可以是多个ID，用逗号分隔
 * @returns AxiosPromise<boolean> 返回一个Promise，解析为布尔值，表示删除是否成功
 * @description 请求地址：/api/v1/accounts/{ids}
 */
export function deleteAccountApi(ids: string): AxiosPromise<boolean> {
  return request({
    url: "/api/v1/test/account/" + ids,
    method: "delete",
  });
}
```

2.types.ts
```typescript
export interface Account {
  id?: number;
  username?: string;
  password?: string;
  url?: string;
}

/*
 * 查询参数
 */
export interface AccountQuery extends PageQuery {
  keywords?: string;
}

/**
 * 分页对象
 */
export interface AccountPageVO {
  id?: number;
  username?: string;
  password?: string;
  url?: string;
}

/**
 * 账户分页
 */
export type AccountPageResult = PageResult<AccountPageVO[]>;
```

3.account.vue
```javascript
<script setup lang="ts">
import {
  getAccountByIdApi,
  getAllAccountApi,
  updateAccountApi,
  deleteAccountApi,
  addAccountApi,
  getAccountPage,
} from "@/api/account";

import { Account, AccountQuery } from "@/api/account/types";
import { get } from "@vueuse/core";

defineOptions({
  name: "Account",
  inheritAttrs: false,
});

const queryFormRef = ref(ElForm);
const roleFormRef = ref(ElForm);

const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);

const queryParams = reactive<AccountQuery>({
  pageNum: 1,
  pageSize: 10,
});

const roleList = ref<Account[]>();

const dialog = reactive({
  title: "",
  visible: false,
});

const formData = reactive<Account>({
  id: 0,
  username: "",
  password: "",
  url: "",
});

const rules = reactive({
  username: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  url: [{ required: true, message: "请输入url", trigger: "blur" }],
});

/** 打开角色表单弹窗 */
function openDialog(roleId?: number) {
  dialog.visible = true;
  if (roleId) {
    dialog.title = "修改账户";
    getAccountByIdApi(roleId).then(({ data }) => {
      Object.assign(formData, data);
    });
  } else {
    dialog.title = "新增账户";
  }
}

/** 角色保存提交 */
function handleSubmit() {
  roleFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      const roleId = formData.id;
      if (roleId) {
        updateAccountApi(formData)
          .then(() => {
            ElMessage.success("修改成功");
            closeDialog();
            resetQuery();
          })
          .finally(() => (loading.value = false));
      } else {
        addAccountApi(formData)
          .then(() => {
            ElMessage.success("新增成功");
            closeDialog();
            resetQuery();
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}

/** 查询 */
function handleQuery() {
  loading.value = true;
  getAccountPage(queryParams)
    .then(({ data }) => {
      roleList.value = data.list;
      total.value = data.total;
      console.log(data);
    })
    .finally(() => {
      loading.value = false;
    });
}
/** 关闭表单弹窗 */
function closeDialog() {
  dialog.visible = false;
  resetForm();
}
/** 重置表单 */
function resetForm() {
  roleFormRef.value.resetFields();
  roleFormRef.value.clearValidate();

  formData.id = undefined;
  formData.username = "";
  formData.password = "";
  formData.url = "";
}
/** 重置查询 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
}

/** 行checkbox 选中事件 */
function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.id);
}

/** 删除角色 */
function handleDelete(roleId?: number) {
  const roleIds = [roleId || ids.value].join(",");
  if (!roleIds) {
    ElMessage.warning("请勾选删除项");
    return;
  }
  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    loading.value = true;
    deleteAccountApi(roleIds)
      .then(() => {
        ElMessage.success("删除成功");
        handleQuery();
      })
      .finally(() => (loading.value = false));
  });
}

onMounted(() => {
  handleQuery();
});
</script>

```

```html

<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item prop="keywords" label="关键字">
          <el-input
            v-model="queryParams.keywords"
            placeholder="账户名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery"
            ><i-ep-search />搜索</el-button
          >
          <el-button @click="resetQuery"><i-ep-refresh />重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button type="success" @click="openDialog()"
          ><i-ep-plus />新增</el-button
        >
        <el-button
          type="danger"
          :disabled="ids.length === 0"
          @click="handleDelete()"
          ><i-ep-delete />删除</el-button
        >
      </template>

      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="roleList"
        highlight-current-row
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          key="id"
          label="编号"
          align="center"
          prop="id"
          width="100"
        />
        <el-table-column label="角色名称" prop="username" min-width="100" />
        <el-table-column label="角色密码" prop="password" width="150" />
        <el-table-column label="url" prop="url" min-width="200" />

        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              link
              @click="openDialog(scope.row.id)"
            >
              <i-ep-edit />编辑
            </el-button>
            <el-button
              type="primary"
              size="small"
              link
              @click="handleDelete(scope.row.id)"
            >
              <i-ep-delete />删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

    <!-- 角色表单弹窗 -->
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="500px"
      @close="closeDialog"
    >
      <el-form
        ref="roleFormRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="角色名称" prop="username">
          <el-input v-model="formData.username" placeholder="请输入角色名称" />
        </el-form-item>

        <el-form-item label="角色密码" prop="password">
          <el-input v-model="formData.password" placeholder="请输入角色密码" />
        </el-form-item>

        <el-form-item label="角色url" prop="url">
          <el-input v-model="formData.url" placeholder="请输入角色url" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
```