# AutoEE

**Repository Path**: caoyla/AutoEE

## Basic Information

- **Project Name**: AutoEE
- **Description**: AutoEE-快速开发平台：前端框架
基于 vue3 + CompositionAPI + vite + ant-design-vue3 实现的管理平台前端框架。
- **Primary Language**: Unknown
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 31
- **Created**: 2023-01-19
- **Last Updated**: 2023-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AutoEE-快速开发平台：前端框架autoee-ui

## 平台简介

- 基于 vue3 + CompositionAPI + vite + ant-design-vue3 实现的管理平台前端框架。
- 使用各组件的最新版本，融合新技术，代码简单易懂，组件拆分清晰，不做过度封装，符合常规开发模式，自动代码生成，修改简单高效，运行速度快。
- 使用Vue3的< script setup >语法糖，代码结构清晰，代码量大幅减少，真香！！！
- 界面简洁美观，使用 Ant Design of Vue 最新 3.x 版本，原汁原味，清晰明了，操作方便。
- 分支master后端直接对接 RuoYi-Vue 。[访问 RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue)
- 分支autoee-ui-for-ruoyi-vue-plus后端直接对接 RuoYi-Vue-Plus 最新版本 4.x。[访问 RuoYi-Vue-Plus](https://gitee.com/JavaLionLi/RuoYi-Vue-Plus)

## 已完成功能

- 系统管理
  - 用户管理
  - 角色管理
  - 菜单管理
  - 部门管理
  - 岗位管理
  - 字典管理
  - 参数设置
  - 日志管理
     - 操作日志
     - 登录日志
- 系统监控
  - 在线用户
  - 定时任务
- 系统工具
  - 代码生成

## 使用方法

1. 启动前端 autoee-ui 工程
   - (1)下载 autoee-ui 工程到本地
   - (2)执行 npm install
   - (3)执行 npm run dev
2. 启动后端 RuoYi-Vue 工程
   - (1)下载 RuoYi-Vue 工程本到本地
   - (2)将前端 autoee-ui 工程目录 src\javaFiles\template\vm\vue\下的如下文件覆盖到后端 RuoYi-Vue 工程目录 ruoyi-generator/src/main/resources/vm/vue 中
     - index.vue.vm
     - addUpdateModal.vue.vm
     - detailModal.vue.vm
   - (3)将前端 autoee-ui 工程目录 src\javaFiles\下的文件覆盖到后端 RuoYi-Vue 工程中
   - (4)[可选]将前端 autoee-ui 工程目录 src\sqlFiles\下的如下文件导入到数据库中
     - 1.向表 gen_table 中插入数据.sql
     - 2.向表 gen_table_column 中插入数据.sql
   - (5)启动 RuoYi-Vue 工程
3. 访问前端地址 http://localhost:8090/

## 如果 AutoEE 对您有帮助，请我喝杯咖啡吧！

<img src="https://gitee.com/Double_AutoEE/AutoEE/raw/master/autoee-ui/src/assets/styles/loginPage/admireQRcode.jpg" width=30% />

## 平台界面图片

<img src="https://gitee.com/Double_AutoEE/AutoEE/raw/master/autoee-ui/src/assets/images/autoee/%E7%99%BB%E9%99%86%E9%A1%B5%E9%9D%A2.png"  />
<img src="https://gitee.com/Double_AutoEE/AutoEE/raw/master/autoee-ui/src/assets/images/autoee/%E7%94%A8%E6%88%B7%E7%AE%A1%E7%90%86.png"  />
<img src="https://gitee.com/Double_AutoEE/AutoEE/raw/master/autoee-ui/src/assets/images/autoee/%E7%94%A8%E6%88%B7%E7%AE%A1%E7%90%86-2.png"  />
<img src="https://gitee.com/Double_AutoEE/AutoEE/raw/master/autoee-ui/src/assets/images/autoee/%E7%94%A8%E6%88%B7%E7%AE%A1%E7%90%86-3.png"  />
<img src="https://gitee.com/Double_AutoEE/AutoEE/raw/master/autoee-ui/src/assets/images/autoee/%E8%8F%9C%E5%8D%95%E7%AE%A1%E7%90%86-1.png"  />
<img src="https://gitee.com/Double_AutoEE/AutoEE/raw/master/autoee-ui/src/assets/images/autoee/%E8%8F%9C%E5%8D%95%E7%AE%A1%E7%90%86-2.png"  />
<img src="https://gitee.com/Double_AutoEE/AutoEE/raw/master/autoee-ui/src/assets/images/autoee/%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90-1.png"  />
<img src="https://gitee.com/Double_AutoEE/AutoEE/raw/master/autoee-ui/src/assets/images/autoee/%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90-2.png"  />
<img src="https://gitee.com/Double_AutoEE/AutoEE/raw/master/autoee-ui/src/assets/images/autoee/%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90-3.png"  />
<img src="https://gitee.com/Double_AutoEE/AutoEE/raw/master/autoee-ui/src/assets/images/autoee/genCodeReview.png"  />



## 前端index.vue生成代码实例
岗位管理、参数设置、通知公告三个模块是完全通过最新代码模板生成的，可以用于参考。
```
 <template>
  <div>
    <a-form ref="queryFormObj.data" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
        <a-row :gutter="24">
      <a-col span="8">
          <a-form-item name="postCode" label="岗位编码">
            <a-input v-model:value="queryFormObj.data.postCode" allowClear></a-input>
          </a-form-item>
      </a-col>
      <a-col span="8">
          <a-form-item name="postName" label="岗位名称">
            <a-input v-model:value="queryFormObj.data.postName" allowClear></a-input>
          </a-form-item>
      </a-col>
     <a-col span="8">
          <a-form-item name="status" label="岗位状态">
            <a-select v-model:value="queryFormObj.data.status" :options="pageDataObj.sysNormalDisableDict" allowClear> </a-select>
          </a-form-item>
      </a-col>
      </a-row>
      <a-row :gutter="24" class="autoee-button-row">
        <a-col :span="12" style="text-align: left">
          <a-button type="primary" @click="openAddModal()" v-hasPermi="['system:post:add']"><AutoeeIcon icon="plus-outlined" />新增</a-button>
          <a-button type="primary" danger @click="clickDelete()" :disabled="tableObj.selectedRowKeys.length <= 0" v-hasPermi="['system:post:remove']"><AutoeeIcon icon="delete-outlined" />删除</a-button>
           <a-button type="primary" @click="clickExport()" v-hasPermi="['system:post:export']"><AutoeeIcon icon="export-outlined" />导出</a-button>
        </a-col>
        <a-col :span="12" style="text-align: right">
          <a-button type="primary" @click="queryTableData()"> <AutoeeIcon icon="SearchOutlined" />查询 </a-button>
          <a-button @click="resetQueryForm()"><AutoeeIcon icon="redo-outlined" />重置</a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      rowKey="postId"
      :columns="tableObj.columns"
      :data-source="tableObj.dataSource"
      :loading="tableObj.loading"
      :pagination="tablePagination"
      @change="tableHandChangePage"
      :row-selection="{ selectedRowKeys: tableObj.selectedRowKeys, onChange: onTableSelectChange }"
      bordered
      size="small"
      tableLayout="fixed"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.key === 'pageIndex'">
          {{ index + 1 }}
        </template>
        <template v-else-if="column.key === 'status'">
          <span>
            {{ AutoeeUtil.getDictLabelByKey(record.status , pageDataObj.sysNormalDisableDict) }}
          </span>
        </template>
        <template v-else-if="column.key === 'postTableOperateCol'">
          <span>
            <a @click="openDetailModal(record)"> 查看 </a>
            <a-divider type="vertical" v-hasPermi="['system:post:edit']"/>
            <a @click="openUpdateModal(record)"  v-hasPermi="['system:post:edit']"> 修改 </a>
          </span>
        </template>
      </template>
    </a-table>

    <AddUpdateModal ref="addUpdateModalRef" @refreshFatherPageTable="queryTableData"
        :sysNormalDisableDict="pageDataObj.sysNormalDisableDict"
    />
    <DetailModal ref="detailModalRef"
        :sysNormalDisableDict="pageDataObj.sysNormalDisableDict"
    />
  </div>
</template>

<script setup name="Post">
import { listPost, getPost, delPost, addPost, updatePost } from "@/api/system/post";
import AddUpdateModal from './addUpdateModal.vue';
import DetailModal from './detailModal.vue';
import { computed, reactive, ref } from 'vue';
import { AutoeeIcon } from '@/utils/AutoeeIcon.js';
import AutoeeUtil from '@/utils/AutoeeUtil.js';
import { message } from 'ant-design-vue';
import moment from 'moment';

// 当前页面使用的数据
const pageDataObj = reactive({
  sysNormalDisableDict: [],
});

AutoeeUtil.getDictsByType('sys_normal_disable').then((res) => {
  pageDataObj.sysNormalDisableDict = res;
});


// 查询Form
const queryFormRef = ref();
const queryFormObj = reactive({
  data: {
    pageNum: 1,
    pageSize: 10,
    params: {},
    //orderByColumn: "update_time",
    //isAsc: "desc",
  }
});

// 重置查询Form
const resetQueryForm = () => {
  queryFormObj.data = {
    pageNum: 1,
    pageSize: 10,
    params: {},
    //orderByColumn: "update_time",
    //isAsc: "desc",
  }
  queryTableData();
};

// 列表定义
const tableObj = reactive({
  // 列表数据集
  dataSource: [],
  // 列表总记录数
  total: 0,
  // 列表是否加载中
  loading: false,
  // 列表选中行数组
  selectedRowKeys: [],
  // 列表列定义
  columns: [
    {
      title: '序号',
      dataIndex: 'pageIndex',
      key: 'pageIndex',
      width: 50,
      align: 'center',
    },
    {
      title: '岗位编码',
      key: 'postCode',
      dataIndex: 'postCode',
    },
    {
      title: '岗位名称',
      key: 'postName',
      dataIndex: 'postName',
    },
    {
      title: '显示顺序',
      key: 'postSort',
      dataIndex: 'postSort',
    },
    {
      title: '岗位状态',
      key: 'status',
      dataIndex: 'status',
    },
    {
      title: '操作',
      key: 'postTableOperateCol',
      width: 100,
    },
  ],
});

// 查询列表数据方法
const queryTableData = () => {
  // 调用后端列表查询方法，通过返回结果设置tableObj.total，tableObj.dataSource，tableObj.loading
  AutoeeUtil.getTableDataByQueryFunc(listPost(queryFormObj.data),tableObj);
}

// 初始化查询列表数据
queryTableData();

// 列表翻页工具条：必须通过计算函数每次重新生成
const tablePagination = computed(() => AutoeeUtil.createTablePagination(tableObj, queryFormObj));

// 手动翻页方法
const tableHandChangePage = (page, filters, sorter) => {
  queryFormObj.data.pageSize = page.pageSize; 
  queryFormObj.data.pageNum = page.current; 
  queryTableData();
};

// 列表行选中方法
const onTableSelectChange = (selectedRowKeys) => {
  tableObj.selectedRowKeys = selectedRowKeys;
};

// 打开新增窗口
const addUpdateModalRef = ref();
const openAddModal = () => {
  addUpdateModalRef.value.openAddModal();
};

// 打开修改窗口
const openUpdateModal = (record) => {
  addUpdateModalRef.value.openUpdateModal(record);
};

// 打开详细窗口
const detailModalRef = ref();
const openDetailModal = (record) => {
  detailModalRef.value.openModal(record);
};

// 点击删除
const clickDelete = () => {
  AutoeeUtil.confirmDeleteSelectedData(() => {
    delPost(tableObj.selectedRowKeys).then((res) => {
      AutoeeUtil.messageSuccess('删除操作成功。');
      queryTableData();
    });
  });
};

 // 点击导出
const clickExport = () => {
  let exportUrl = 'system/post/export';
  let moduleName = "岗位信息";
  let exportFileName = moduleName + "_" + moment().format('YYYY-MM-DD_HH-mm-ss') + ".xlsx";
  AutoeeUtil.download(exportUrl, queryFormObj.data, exportFileName);
};

</script>
<style lang="less"></style>
```