admin/wisdomisitezwfront-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

系统字典完成

Browse Source
This commit is contained in:
于晏彭 2023-03-07 16:16:50 +08:00
parent 38c790888a
commit 552ca79958
13 changed files with 842 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/config/servicePort.ts
View File

@ -1,3 +1,3 @@
// * 后端微服务端口名
export const PORT1 = "http://10.0.1.49:6688";
export const PORT2 = "http://10.0.1.49:6688";
export const PORT1 = "http://192.168.34.122:6688";
export const PORT2 = "http://192.168.34.122:6688";

5
src/api/index.ts
View File

@ -34,7 +34,10 @@ class RequestHttp {
// * 如果当前请求不需要显示 loading,在 api 服务中通过指定的第三个参数: { headers: { noLoading: true } }来控制不显示loading，参见loginApi
config.headers!.noLoading || showFullScreenLoading();
const token = globalStore.token;
return { ...config, headers: { ...config.headers, "x-access-token": token } };
if (token && config.headers) {
config.headers.Authorization = `Bearer ${token}`;
}
return { ...config, headers: { ...config.headers, token } };
},
(error: AxiosError) => {
return Promise.reject(error);

24
src/api/interface/index.ts
View File

@ -11,7 +11,7 @@ export interface ResultData<T = any> extends Result {
// * 分页响应参数
export interface ResPage<T> {
list: T[];
result: T[];
pageNo: number;
pageSize: number;
total: number;
@ -55,9 +55,30 @@ export namespace User {
createTime: string[];
status: number;
}
export interface ResRecords {
createTime: string;
dictCode: string;
dictLabel: string;
dictSort: number;
dictType: string;
dictValue: string;
isDefault: string;
remark: string;
status: string;
}
export interface ResResults {
current: string;
hitCount: boolean;
pages: string;
searchCount: boolean;
size: string;
total: string;
records: ResRecords[];
}
export interface ResUserList {
id: string;
configId: string;
dictCode: string;
username: string;
gender: string;
user: {
@ -65,6 +86,7 @@ export namespace User {
age: number;
};
};
records?: ResRecords[];
idCard: string;
email: string;
address: string;

49
src/api/modules/jxjview.ts
View File

@ -26,3 +26,52 @@ export const editUser = (params: { id: string }) => {
export const deleteUser = (params: { id: string }) => {
return http.post(PORT1 + `/xmgl/systemConfig/delete`, params);
};
// 政务管理 ！！！！！！！！！！！！！！！！！！！
export const getGovermentList = (params: User.ReqUserParams) => {
return http.post<ResPage<User.ResUserList>>(PORT1 + `/xmgl/government/page`, params);
};
// * 新增用户
export const addGovernment = (params: FormData) => {
return http.post(PORT1 + `/xmgl/government/add`, params);
};
// * 编辑用户
export const editGovernment = (params: { id: string }) => {
return http.post(PORT1 + `/xmgl/government/edit`, params);
};
// 字典 ！！！！！！！！！！！！！！
// 查询
export const getDictionaryList = (params: User.ReqUserParams) => {
return http.post<ResPage<User.ResUserList>>(PORT1 + `/xmgl/systemDictType/page`, params);
};
// 查询detail
export const getDictionaryDetail = (params: User.ReqUserParams) => {
return http.post<ResPage<User.ResResults>>(PORT1 + `/xmgl/systemDictData/page`, params);
};
// * 新增用户
export const addDictionary = (params: FormData) => {
return http.post(PORT1 + `/xmgl/systemDictType/add`, params);
};
export const addDiaDictionary = (params: FormData) => {
return http.post(PORT1 + `/xmgl/systemDictData/add`, params);
};
// * 编辑用户
export const editDictionary = (params: { id: string }) => {
return http.post(PORT1 + `/xmgl/systemDictType/edit`, params);
};
// * 删除用户
export const deleteDictionary = (params: { id: number }) => {
return http.post(PORT1 + `/xmgl/systemDictType/delete`, params);
};
//删除字典数据信息
export const deleteDia = (params: { id: number }) => {
return http.post(PORT1 + `/xmgl/systemDictData/delete`, params);
};

10
src/api/modules/login.ts
View File

@ -10,11 +10,11 @@ import http from "@/api";
*/
// * 用户登录
export const loginApi = (params: Login.ReqLoginForm) => {
return http.post<Login.ResLogin>(PORT1 + `xmgl/systemUser/login`, params, { headers: { noLoading: true } }); // 正常 post json 请求 ==> application/json
return http.post<Login.ResLogin>(PORT1 + `/login`, params, { headers: { noLoading: true } }); // 控制当前请求不显示 loading
return http.post<Login.ResLogin>(PORT1 + `/login`, {}, { params }); // post 请求携带 query 参数 ==> ?username=admin&password=123456
return http.post<Login.ResLogin>(PORT1 + `/login`, qs.stringify(params)); // post 请求携带表单参数 ==> application/x-www-form-urlencoded
return http.get<Login.ResLogin>(PORT1 + `/login?${qs.stringify(params, { arrayFormat: "repeat" })}`); // 如果是 get 请求可以携带数组等复杂参数
return http.post<Login.ResLogin>(PORT1 + `/xmgl/systemUser/login`, params, { headers: { noLoading: true } }); // 正常 post json 请求 ==> application/json
return http.post<Login.ResLogin>(PORT1 + `/xmgl/systemUser/login`, params, { headers: { noLoading: true } }); // 控制当前请求不显示 loading
return http.post<Login.ResLogin>(PORT1 + `/xmgl/systemUser/login`, {}, { params }); // post 请求携带 query 参数 ==> ?username=admin&password=123456
return http.post<Login.ResLogin>(PORT1 + `/xmgl/systemUser/login`, qs.stringify(params)); // post 请求携带表单参数 ==> application/x-www-form-urlencoded
return http.get<Login.ResLogin>(PORT1 + `/xmgl/systemUser/login?${qs.stringify(params, { arrayFormat: "repeat" })}`); // 如果是 get 请求可以携带数组等复杂参数
};
// * 获取按钮权限

18
src/assets/json/dynamicRouter.json
View File

@ -2,9 +2,9 @@
"code": 200,
"data": [
{
"path": "/home/index",
"name": "home",
"component": "/home/index",
"path": "/government",
"name": "government",
"component": "/jxjview/government/index",
"meta": {
"icon": "HomeFilled",
"title": "政务管理",
@ -17,8 +17,7 @@
},
{
"path": "/system",
"name": "system",
"component": "/jxjview/system/index",
"meta": {
"icon": "Tools",
"title": "菜单管理",
@ -31,8 +30,7 @@
},
{
"path": "/system",
"name": "system",
"component": "/jxjview/system/index",
"meta": {
"icon": "Tools",
"title": "APP管理",
@ -58,9 +56,9 @@
}
},
{
"path": "/system",
"name": "system",
"component": "/jxjview/system/index",
"path": "/dictionary",
"name": "dictionary",
"component": "/jxjview/dictionary/index",
"meta": {
"icon": "Tools",
"title": "系统字典",

24
src/components/DialogForm/index.vue
View File

@ -7,6 +7,9 @@
:title="props.title"
:width="props.width || '50%'"
>
<template #header>
<slot name="header" class="diaHeader"></slot>
</template>
<el-form ref="ruleFormRef" label-width="120px" size="large" :model="form" :rules="props.formConfig.rules">
<template v-for="item in props.formConfig.formItemConfig" :key="item.prop">
<el-form-item :label="item.label + '：'" :style="{ display: item.hidden == true ? 'none' : '' }" :prop="item.prop">
@ -65,6 +68,18 @@
>
<el-radio :label="option.value" size="large" v-for="option in item.data">{{ option.label }}</el-radio>
</el-radio-group>
<!-- 数字输入框 -->
<el-input-number
v-else-if="item.type == 'number'"
v-model="form[item.prop]"
:disabled="item.disabled"
:min="1"
:max="10"
size="large"
controls-position="right"
:style="{ width: item.width + 'px' }"
>
</el-input-number>
</el-form-item>
</template>
</el-form>
@ -79,12 +94,13 @@
</template>
<script setup lang="ts">
import { ref, reactive, watch, defineEmits, onMounted } from "vue";
import { ref, reactive, watch, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
let form = reactive({});
const visible1 = ref(true);
const ruleFormRef = ref<FormInstance>();
// 单个form item 的属性
@ -116,6 +132,10 @@ interface formItemConfig {
// 输入框为文本域的时候的行数
row?: number;
// 数字输入框
// min?: number;
// max?: number;
// 选填-特殊
// 数据，一般是下拉框之类需要可选项的才用到
data?: any;
@ -141,7 +161,7 @@ interface props {
// dialog配置
width: string | number;
// 弹框标题
title: string;
title?: string;
// 是否为全屏 Dialog
fullscreen?: boolean;
// 为 Dialog 启用可拖拽功能

2
src/config/config.ts
View File

@ -1,7 +1,7 @@
// ? 全局不动配置项 只做导出不做修改
// * 首页地址（默认）
export const HOME_URL: string = "/home/index";
export const HOME_URL: string = "/government";
// * 登录页地址（默认）
export const LOGIN_URL: string = "/login";

10
src/routers/modules/staticRouter.ts
View File

@ -27,8 +27,14 @@ export const staticRouter: RouteRecordRaw[] = [
{
path: "/system",
name: "system",
component: () => import("@/views/system/index.vue")
}
component: () => import("@/views/jxjview/system/index.vue")
},
{
path: "/dictionary",
name: "dictionary",
component: () => import("@/views/jxjview/dictionary/index.vue")
},
{ path: "/dictionary/detail", name: "dicDetail", component: () => import("@/views/jxjview/dictionary/detail.vue") }
]
}
];

207
src/views/jxjview/dictionary/detail.vue Normal file
View File

@ -0,0 +1,207 @@
<template>
<div class="table-box">
<ProTable
ref="proTable"
title="用户列表"
:columns="columns"
:requestApi="getTableList"
:initParam="initParam"
:dataCallback="dataCallback"
:tool-button="false"
:pagination="true"
background
>
<template #formButton="scope">
<el-button type="primary" @click="handleAddItem()">新增</el-button>
</template>
<!-- 表格操作 -->
<template #operation="scope">
<el-button type="primary" link :icon="EditPen" @click="handleEditItem('edit', scope.row)">编辑</el-button>
<el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
</template>
</ProTable>
<DialogForm
:title="title"
:formConfig="formConfig"
:formData="formData"
v-model:visible="visible"
append-to-body
width="700px"
@confirm="saveItem"
>
</DialogForm>
</div>
</template>
<script setup lang="tsx" name="jxjDictionary">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { User } from "@/api/interface";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { useDownload } from "@/hooks/useDownload";
import ProTable from "@/components/ProTable/index.vue";
import DialogForm from "@/components/DialogForm/index.vue";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { getDictionaryList, deleteDictionary, editDictionary, addDictionary } from "@/api/modules/jxjview";
const router = useRouter();
const visible = ref(false);
const title = ref("");
const formData = ref({});
const mode = ref("");
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
// 添加数据按钮
const handleAddItem = () => {
mode.value = "add";
visible.value = true;
title.value = "新增";
formData.value = reactive({});
};
// 修改数据按钮
function handleEditItem(index: string, row: any) {
mode.value = "edit";
visible.value = true;
title.value = "编辑";
formData.value = reactive(row);
}
// 表格配置项
const columns: ColumnProps[] = [
{
prop: "dictCode",
label: "序号"
},
{
prop: "dictValue",
label: "字典名称",
// enum:dictType,
search: { el: "input" }
// fieldNames: { label: "genderLabel", value: "genderValue" }
},
// 多级 prop
{
prop: "dictLabel",
label: "字典键值"
// search: { el: "input" }
},
{
prop: "dictSort",
label: "字典排序"
// search: { el: "input" }
},
{
prop: "status",
label: "状态",
enum: [
{ label: "正常", value: "1" },
{ label: "停用", value: "0" }
]
// search: { el: "select" }
},
{ prop: "remark", label: "备注" },
{
prop: "createTime",
label: "创建时间"
// search: {
// el: "date-picker",
// span: 2,
// props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
// defaultValue: ["", ""]
// }
},
{ prop: "operation", label: "操作", fixed: "right", width: 330 }
];
// 弹窗中的配置
const formConfig = {
formItemConfig: [
{
label: "字典名称",
prop: "dictValue",
type: "input"
},
{
label: "字典类型",
prop: "dictType",
type: "input"
},
{
label: "状态",
prop: "status",
type: "radio",
data: [
{ label: "正常", value: "1" },
{ label: "停用", value: "0" }
]
},
{
label: "备注",
prop: "remark",
type: "input"
}
],
rules: {
configKey: [
{
required: true,
message: "请输入类型名",
trigger: "blur"
}
]
}
};
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
type: 1
});
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
// console.log(data);
return {
list: data.records,
total: Number(data.total),
pageNo: Number(data.current),
pageSize: Number(data.size)
};
};
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params));
// console.log(newParams);
newParams.endTime = newParams.createTime[1];
newParams.createTime = newParams.createTime[0];
return getDictionaryList(newParams);
};
// 新增，编辑数据
const saveItem = async (form: any) => {
if (form.dictCode) {
// console.log(form.dictCode);
const res = await editDictionary(form);
proTable.value.getTableList();
ElMessage.success("编辑成功");
} else {
const res = await addDictionary(form);
ElMessage.success("新增成功");
proTable.value.getTableList();
}
visible.value = false;
};
// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
await useHandleData(deleteDictionary, { id: params.dictCode }, `删除【${params.username}】用户`);
proTable.value.getTableList();
};
</script>

321
src/views/jxjview/dictionary/index.vue Normal file
View File

@ -0,0 +1,321 @@
<template>
<div class="table-box">
<ProTable
ref="proTable"
title="用户列表"
:columns="columns"
:requestApi="getTableList"
:initParam="initParam"
:dataCallback="dataCallback"
:tool-button="false"
:pagination="true"
background
>
<template #formButton="scope">
<el-button type="primary" @click="handleAddItem()">新增</el-button>
</template>
<!-- 表格操作 -->
<template #operation="scope">
<el-button type="primary" link :icon="EditPen" @click="handleEditItem('edit', scope.row)">编辑</el-button>
<el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
</template>
</ProTable>
<DialogForm
:title="title"
:formConfig="formConfig"
:formData="formData"
v-model:visible="visible"
append-to-body
width="700px"
@confirm="saveItem"
>
</DialogForm>
<el-dialog v-model="dialogTableVisible" title="Shipping address" ref="DialogTable" width="800px" height="800px">
<el-button type="primary" style="margin-top: -24px" @click="DiaAddItem(diaTableData.dictType)">新增</el-button>
<el-table :data="gridData">
<el-table-column property="dictCode" label="序号" width="150" />
<el-table-column property="dictValue" label="字典名称" width="200" />
<el-table-column property="dictSort" label="字典排序" />
<el-table-column property="isDefault" label="状态" />
<el-table-column property="remark" label="备注" />
<el-table-column property="createTime" label="创建时间" />
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="primary" text @click="DeleteBtn(scope.row)">
<!-- <img src="@/assets/images/tableIcon/deleteIcon.png" alt="" class="configureIcon" /> -->
<span class="redDelete">删除</span>
</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
<!-- 点击名字的弹窗 -->
<el-dialog v-model="DiaVisible" title="新增字典数据">
<el-form :data="DiaformData">
<el-form-item label="字典类型">
<el-input v-model="form.dictType" disabled placeholder="请输入" />
</el-form-item>
<el-form-item label="字典标签">
<el-input v-model="form.dictLabel" placeholder="请输入" />
</el-form-item>
<el-form-item label="显示排序">
<el-input-number v-model="form.dictSort" :min="1" :max="10" />
</el-form-item>
<el-form-item label="状态">
<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-item label="备注">
<el-input v-model="form.remark" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="DiaVisible = false">取消</el-button>
<el-button type="primary" @click="DiaSubmit(form)">保存</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="tsx" name="jxjDictionary">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { User } from "@/api/interface";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import DialogForm from "@/components/DialogForm/index.vue";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh, CircleCloseFilled } from "@element-plus/icons-vue";
import {
getDictionaryList,
getDictionaryDetail,
deleteDictionary,
deleteDia,
editDictionary,
addDictionary,
addDiaDictionary
} from "@/api/modules/jxjview";
const router = useRouter();
// 页面新增
const visible = ref(false);
// 表格点击
const dialogTableVisible = ref(false);
const DiaVisible = ref(false);
const title = ref("");
const formData = ref({});
const DiaformData = ref({});
const mode = ref("");
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
const DialogTable = ref();
const gridData = ref([]);
const diaTableData = reactive({
dictName: "",
dictType: "",
endTime: "",
pageNo: 1,
pageSize: 10,
startTime: "",
status: 0
});
const form = reactive({
dictType: "",
dictLabel: "",
dictSort: 1,
status: 1,
remark: ""
});
// 添加数据按钮
const handleAddItem = () => {
mode.value = "add";
visible.value = true;
title.value = "新增";
formData.value = reactive({});
};
// 修改数据按钮
function handleEditItem(index: string, row: any) {
mode.value = "edit";
visible.value = true;
title.value = "编辑";
formData.value = reactive(row);
}
// 表格配置项
const columns: ColumnProps[] = [
{
prop: "dictId",
label: "序号"
},
{
prop: "dictName",
label: "字典名称",
// enum:dictType,
search: { el: "input" }
// fieldNames: { label: "genderLabel", value: "genderValue" }
},
// 多级 prop
{
prop: "dictType",
label: "字典类型",
// search: { el: "input" },
render: scope => {
return (
<el-button type="primary" link onClick={() => typeVisable(scope.row.dictType)}>
{scope.row.dictType}
</el-button>
);
}
},
{
prop: "status",
label: "状态",
enum: [
{ label: "正常", value: "1" },
{ label: "停用", value: "0" }
]
// search: { el: "select" }
},
{ prop: "remark", label: "备注" },
{
prop: "createTime",
label: "创建时间"
// search: {
// el: "date-picker",
// span: 2,
// props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
// defaultValue: ["", ""]
// }
},
{ prop: "operation", label: "操作", fixed: "right" }
];
// 弹窗中的配置
const formConfig = {
formItemConfig: [
{
label: "字典名称",
prop: "dictValue",
type: "input"
},
{
label: "字典类型",
prop: "dictType",
type: "input"
},
{
label: "状态",
prop: "status",
type: "radio",
data: [
{ label: "正常", value: "1" },
{ label: "停用", value: "0" }
]
},
{
label: "备注",
prop: "remark",
type: "input"
}
],
rules: {
configKey: [
{
required: true,
message: "请输入类型名",
trigger: "blur"
}
]
}
};
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
type: 1
});
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
// console.log(data);
return {
list: data.records,
total: Number(data.total),
pageNo: Number(data.current),
pageSize: Number(data.size)
};
};
const typeVisable = async (dictType: string) => {
// console.log(111);
dialogTableVisible.value = true;
form.dictType = dictType;
const res = await getDiaTabList(diaTableData);
console.log(dictType);
gridData.value = res.result.records;
};
const DiaAddItem = async (dictType: string) => {
title.value = "新增字典数据";
DiaVisible.value = true;
// form = reactive({});
// console.log(dictType);
};
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params));
// console.log(newParams);
// newParams.endTime = newParams.createTime[1];
// newParams.createTime = newParams.createTime[0];
return getDictionaryList(newParams);
};
const getDiaTabList = async (params: any) => {
await getDictionaryDetail(params);
return getDictionaryDetail(params);
};
// 新增，编辑数据
const saveItem = async (form: any) => {
if (form.dictId) {
// console.log(form.dictCode);
const res = await editDictionary(form);
proTable.value.getTableList();
ElMessage.success("编辑成功");
} else {
const res = await addDictionary(form);
ElMessage.success("新增成功");
proTable.value.getTableList();
}
visible.value = false;
};
const DiaSubmit = async (form: any) => {
const res = await addDiaDictionary(form);
ElMessage.success("新增成功");
DiaVisible.value = false;
getDiaTabList(diaTableData);
};
// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
await useHandleData(deleteDictionary, { id: params.dictId }, `删除【${params.dictName}】用户`);
proTable.value.getTableList();
};
// 删除弹窗用户信息
const DeleteBtn = async (params: User.ResUserList) => {
await useHandleData(deleteDia, { id: params.dictCode }, `删除【${params.dictValue}】用户`);
proTable.value.getTableList();
};
</script>

183
src/views/jxjview/government/index.vue Normal file
View File

@ -0,0 +1,183 @@
<template>
<div class="table-box">
<ProTable
ref="proTable"
title="用户列表"
:columns="columns"
:requestApi="getTableList"
:initParam="initParam"
:dataCallback="dataCallback"
:tool-button="false"
:pagination="true"
background
>
<!-- 表格 header 按钮 -->
<!-- <template #tableHeader="scope">
<el-button type="primary" :icon="CirclePlus" @click="handleAddItem()">新增用户</el-button>
</template> -->
<template #formButton="scope">
<el-button type="primary" @click="handleAddItem()">新增</el-button>
</template>
<!-- 表格操作 -->
<template #operation="scope">
<el-button type="primary" link :icon="EditPen" @click="handleEditItem('edit', scope.row)">编辑</el-button>
<el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
</template>
</ProTable>
<DialogForm
:formConfig="formConfig"
:formData="formData"
v-model:visible="visible"
append-to-body
width="700px"
@confirm="saveItem"
>
</DialogForm>
</div>
</template>
<style lang="scss" scoped>
.my-header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: pink;
// height: 25px;
}
</style>
<script setup lang="tsx" name="jxjSystem">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { User } from "@/api/interface";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { useDownload } from "@/hooks/useDownload";
import ProTable from "@/components/ProTable/index.vue";
import DialogForm from "@/components/DialogForm/index.vue";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh, CircleCloseFilled } from "@element-plus/icons-vue";
import { getUserList, deleteUser, editUser, addUser } from "@/api/modules/jxjview";
const router = useRouter();
const visible = ref(false);
const title = ref("");
const formData = ref({});
const mode = ref("");
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
// 添加数据按钮
const handleAddItem = () => {
mode.value = "add";
visible.value = true;
title.value = "新增";
formData.value = reactive({});
};
// 修改数据按钮
function handleEditItem(index: string, row: any) {
mode.value = "edit";
visible.value = true;
title.value = "编辑";
formData.value = reactive(row);
}
// 表格配置项
const columns: ColumnProps[] = [
{
prop: "configId",
label: "序号"
},
{
prop: "configKey",
label: "配置名称",
search: { el: "input" }
},
// 多级 prop
{ prop: "configName", label: "配置键名" },
{ prop: "configValue", label: "配置键值" },
{ prop: "remark", label: "备注" },
{ prop: "operation", label: "操作", fixed: "right", width: 330 }
];
// 弹窗中的配置
const formConfig = {
formItemConfig: [
{
label: "配置名称",
prop: "configKey",
type: "input"
},
{
label: "配置键名",
prop: "configName",
type: "input"
},
{
label: "配置键值",
prop: "configValue",
type: "input"
},
{
label: "备注",
prop: "remark",
type: "input"
}
],
rules: {
configKey: [
{
required: true,
message: "请输入类型名",
trigger: "blur"
}
]
}
};
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
type: 1
});
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
// console.log(data);
return {
list: data.records,
total: Number(data.total),
pageNo: Number(data.current),
pageSize: Number(data.size)
};
};
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params));
return getUserList(newParams);
};
// 新增，编辑数据
const saveItem = async (form: any) => {
if (form.configId) {
console.log(form.configId);
const res = await editUser(form);
proTable.value.getTableList();
ElMessage.success("编辑成功");
} else {
const res = await addUser(form);
ElMessage.success("新增成功");
proTable.value.getTableList();
}
visible.value = false;
};
// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
await useHandleData(deleteUser, { id: params.configId }, `删除【${params.username}】用户`);
proTable.value.getTableList();
};
</script>

18
vite.config.ts
View File

@ -39,16 +39,16 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
host: "0.0.0.0",
port: viteEnv.VITE_PORT,
open: viteEnv.VITE_OPEN,
cors: true,
cors: true
// 跨域代理配置
proxy: {
"/api": {
target: "http://10.0.1.49:6688", // easymock
// target: "https://www.fastmock.site/mock/f81e8333c1a9276214bcdbc170d9e0a0", // fastmock
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, "")
}
}
// proxy: {
// "/api": {
// target: "http://10.0.1.49:6688", // easymock
// // target: "https://www.fastmock.site/mock/f81e8333c1a9276214bcdbc170d9e0a0", // fastmock
// changeOrigin: true,
// rewrite: path => path.replace(/^\/api/, "")
// }
// }
},
plugins: [
vue(),