Skip to content

9
91isoft_web_vue3
Commit 8a0adeb8 authored by 张伯涛's avatar 张伯涛
Browse files
Options

字典

parent cd0c2a66
Hide whitespace changes
Inline Side-by-side
Showing with 410 additions and 168 deletions
src/api/dict/index.ts
View file @ 8a0adeb8
......@@ -39,6 +39,23 @@ export function listType(query: any) {
params: query,
});
}
/** 查询字典类型详细*/
export function getType(dictId) {
return request({
url: "/system/dict/type/detail/" + dictId,
method: "get",
});
}
// 修改字典数据
export function updateData(data) {
const businessId = data.businessId;
return request({
url: "/system/dict/data/update/" + businessId,
method: "put",
data: data,
headers: {},
});
}
/** 获取字典选择框列表*/
export function selectDictType(dictType: any) {
return request({
......@@ -55,7 +72,50 @@ export function exportType(queryParams: DictTypeQuery) {
responseType: "arraybuffer",
});
}
// 下载字典数据导入模板
export function importTemplate(query) {
return request({
url: "/system/dict/data/importTemplate",
method: "get",
responseType: "arraybuffer",
params: query,
});
}
//导入字典数据信息
export function importExcel(data) {
return request({
url: "/system/dict/data/importDictData",
method: "post",
headers: {
"Content-Type": "multipart/form-data",
},
transformRequest: [
(data) => {
return data;
},
],
data,
});
}
// 下载错误文件
export function uploadFalseFile(params) {
params = Qs.stringify(params);
return request({
url: "/system/user/downFalseFile",
method: "post",
data: params,
responseType: "blob",
});
}
// 导出字典数据
export function exportData(query) {
return request({
url: "/system/dict/data/export",
method: "get",
params: query,
responseType: "arraybuffer",
});
}
/** 修改字典类型*/
export function updateType(data: any) {
const businessId = data.businessId;
......@@ -66,6 +126,15 @@ export function updateType(data: any) {
headers: {},
});
}
// 新增字典数据
export function addData(data) {
return request({
url: "/system/dict/data/add",
method: "post",
data: data,
headers: {},
});
}
/** 新增字典类型*/
export function addType(data: any) {
return request({
......@@ -87,7 +156,13 @@ export function getDictTypeForm(dictId: number): AxiosPromise<DictTypeForm> {
method: "get",
});
}
// 4.查询字典数据详细
export function getData(dictCode) {
return request({
url: "/system/dict/data/detail/" + dictCode,
method: "get",
});
}
/**
* 新增字典类型
*
......@@ -124,6 +199,14 @@ export function deleteDictTypes(dictId: string) {
method: "delete",
});
}
/** 删除字典数据*/
export function delData(dictCode) {
return request({
url: "/system/dict/data/deleteLogical/" + dictCode,
method: "delete",
headers: {},
});
}
/**
* 获取字典类型的数据项
......
src/api/dict/types.ts
View file @ 8a0adeb8
......@@ -71,7 +71,39 @@ export interface DictTypePageVO {
*/
createDate: Date;
}
/**
* 字典类型数据分页对象
*/
export interface DictTypeDataPageVO {
/**
* 字典编码
*/
businessId: number;
/**
* 字典标签
*/
dictLabel: string;
/**
* 字典键值
*/
dictValue: string;
/**
* 字典排序
*/
dictSort: string | number;
/**
* 状态
*/
flag: string | number;
/**
* 备注
*/
remarks: string | number;
/**
* 创建时间
*/
createDate: any;
}
/**
* 字典分页项类型声明
*/
......@@ -110,7 +142,35 @@ export interface DictTypeForm {
flag?: string | number;
}
/**
* 字典表单类型数据声明
*/
export interface DictTypeDataForm {
/**
* 字典类型ID
*/
businessId?: number | undefined;
/**
* 字典类型
*/
dictType?: number | string;
/**
* 参数标签
*/
dictLabel?: number | string;
/**
* 参数键值
*/
dictValue?: number | string;
/**
* 参数排序
*/
dictSort?: number | string;
/**
* 备注
*/
remarks?: string;
}
/**
* 字典查询参数
*/
......
src/router/index.ts
View file @ 8a0adeb8
......@@ -48,9 +48,6 @@ export const constantRoutes: RouteRecordRaw[] = [
meta: {
title: "字典数据",
icon: "",
affix: true,
keepAlive: true,
alwaysShow: false,
hidden: true,
},
},
......
src/views/system/dict/data.vue
View file @ 8a0adeb8
<!--字典类型-->
<script setup lang="ts">
import { getToken } from "@/utils/auth";
const route = useRoute();
import {
listData,
getDictTypeForm,
getData,
addDictType,
updateDictType,
deleteDictTypes,
exportType,
delData,
exportData,
selectDictType,
updateType,
addType,
updateData,
addData,
listType,
getType,
importTemplate,
importExcel,
uploadFalseFile,
} from "@/api/dict";
import { getDataCache, setDataCache } from "@/assets/js/filterData";
import {
DictTypePageVO,
DictTypeDataPageVO,
DictTypeDataQuery,
DictTypeForm,
DictTypeDataForm,
} from "@/api/dict/types";
import { commonField } from "@/utils/commonField";
import { genFileId, UploadInstance } from "element-plus";
import { importUser } from "@/api/user";
defineOptions({
name: "Data",
inheritAttrs: false,
......@@ -26,63 +35,86 @@ defineOptions({
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const hasDictDelPerm = ref(["sys:dict:delete"]);
const hasDictRemovePerm = ref(["sys:dict:remove"]);
const hasDictResetPerm = ref(["sys:user:resetPwd"]);
const hasDictUpdatePerm = ref(["sys:dict:update"]);
const hasDictEditPerm = ref(["sys:dict:edit"]);
const hasDictAddPerm = ref(["sys:dict:add"]);
const exportHaspermi = ref(["sys:dict:export"]);
const hasDataDelPerm = ref(["sys:dictConfig:delete"]);
const hasDataEditPerm = ref(["sys:dictConfig:edit"]);
const hasDictAddPerm = ref(["sys:dictConfig:add"]);
const exportHaspermi = ref(["sys:dictConfig:export"]);
const hasImportPerm = ref(["sys:dictConfig:import"]);
const loading = ref(false);
const importLoading = ref(false);
const manageLoading = ref(false);
const ids = ref<number[]>([]);
const defaultDictType = ref("");
const uploadRef = ref<UploadInstance>(); // 上传组件
const total = ref(0);
const statusOptions = reactive([
{
dictLabel: "正常",
dictLabel: "停用",
dictValue: "0",
},
{
dictLabel: "停用",
dictLabel: "正常",
dictValue: "1",
},
]);
// 导入数据
const importData = reactive({
deptId: undefined,
file: undefined,
fileList: [],
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: import.meta.env.VITE_APP_BASE_API + "/system/user/importExcel",
});
const dateRange = ref([]); // 日期范围
const optionsDict = ref([]);
const typeOptions = ref([]);
const options = ref([]);
const queryParams = reactive<DictTypeDataQuery>({
let queryParams = reactive<DictTypeDataQuery>({
pageNum: 1,
pageSize: 10,
});
const dictTypeList = ref<DictTypePageVO[]>();
const dictTypeList = ref<DictTypeDataPageVO[]>();
const dialog = reactive({
title: "",
visible: false,
});
const uploadDialog = reactive({
title: "",
visible: false,
});
const formData = reactive<DictTypeForm>({
const formData = reactive<DictTypeDataForm>({
businessId: undefined,
dictType: "",
dictLabel: "",
dictValue: "",
dictSort: 0,
flag: "1",
parentId: "",
remarks: "",
});
const rules = reactive({
dictName: [
{ required: true, message: "请输入字典名称", trigger: ["blur", "change"] },
],
dictType: [
{ required: true, message: "请输入字典类型", trigger: ["blur", "change"] },
],
dataId: [
{
required: true,
message: "请输入父字典数据",
trigger: ["blur", "change"],
},
dictLabel: [
{ required: true, message: "请输入参数标签", trigger: "blur" },
// { validator: verifyIDProp, trigger: 'blur' }
],
dictValue: [{ required: true, message: "请输入参数键值", trigger: "blur" }],
dictSort: [{ required: true, message: "请输入参数顺序", trigger: "blur" }],
});
function handleImport() {
uploadDialog.visible = true;
uploadDialog.title = "字典数据导入";
importData.fileList = [];
importData.file = "";
}
/** 查询字典类型列表 */
function getTypeList() {
const params = {};
......@@ -90,6 +122,20 @@ function getTypeList() {
typeOptions.value = response.rows;
});
}
function handleUploadDialogSubmit() {
if (!importData?.file) {
ElMessage.warning("上传Excel文件不能为空");
return false;
}
var fileData = new FormData(); // 当前为空
fileData.append("file", importData.file);
importExcel(fileData).then((response) => {
ElMessage.success(response.message);
uploadDialog.visible = false;
handleQuery();
});
}
/** 搜索按钮操作 */
function queryBtn() {
queryParams.pageNum = 1;
......@@ -112,18 +158,16 @@ function handleQuery() {
* 重置查询
*/
function resetQuery() {
queryFormRef.value.resetFields();
dateRange.value = [];
queryParams.pageNum = 1;
queryParams.pageSize = 10;
queryParams.dictName = "";
queryParams.dictType = "";
queryParams.dictType = defaultDictType;
queryParams.dictLabel = "";
queryParams.flag = "";
queryBtn();
}
/** 改变状态*/
function handleStatusChange(row) {
function changeStatus(row) {
const text = row.flag === "1" ? "启用" : "停用";
ElMessageBox.confirm("是否确认操作?", "警告", {
confirmButtonText: "确定",
......@@ -131,7 +175,7 @@ function handleStatusChange(row) {
type: "warning",
})
.then(() => {
return updateType(row);
return updateData(row);
})
.then(() => {
ElMessage.success(text + "成功");
......@@ -140,30 +184,37 @@ function handleStatusChange(row) {
row.flag = row.flag === "0" ? "1" : "0";
});
}
/** 下载模板操作 */
function handleImportTemplate() {
var params = {
dictType: queryParams.dictType,
};
importTemplate(params).then((response) => {
const fileData = response.data;
const fileType =
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
const blob = new Blob([fileData], { type: fileType });
const downloadUrl = window.URL.createObjectURL(blob);
/** 获取当前父字典数据*/
function getOptions(val) {
console.log("aaaaaaaaaa", val);
formData.dataId = "";
selectDictType(
options.value.find((item) => {
return item.businessId === val;
}).dictType
).then((response) => {
optionsDict.value = response.data;
const downloadLink = document.createElement("a");
downloadLink.href = downloadUrl;
downloadLink.download = "用户导入模板" + ".xls"; // 下载后文件名
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
window.URL.revokeObjectURL(downloadUrl);
});
}
/** 行复选框选中 */
function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => item.id);
}
function handleExport() {
ElMessageBox.confirm("是否确认操作?", "警告", {
cancelButtonText: "取消",
confirmButtonText: "确定",
type: "warning",
}).then(() => {
exportType(queryParams).then((response: any) => {
exportData(queryParams).then((response: any) => {
const fileData = response.data;
const fileType =
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
......@@ -173,7 +224,7 @@ function handleExport() {
const downloadLink = document.createElement("a");
downloadLink.href = downloadUrl;
downloadLink.download = "字典类型信息" + ".xls"; // 下载后文件名
downloadLink.download = "字典数据信息" + ".xls"; // 下载后文件名
document.body.appendChild(downloadLink);
downloadLink.click();
......@@ -191,34 +242,34 @@ function handleExport() {
function openDialog(dicTypeId?: number) {
dialog.visible = true;
if (dicTypeId) {
dialog.title = "修改字典类型";
getDictTypeForm(dicTypeId).then((response) => {
dialog.title = "修改字典数据";
getData(dicTypeId).then((response) => {
Object.assign(formData, response.data);
getOptions(formData.parentId);
formData.dataId = response.data.dataId;
// nextTick(() => {
// if (response.data.dataId !== null) {
// formData.dataId = response.data.dataId.toString();
// }
// });
});
} else {
dialog.title = "新增字典类型";
formData.dictType = queryParams.dictType;
dialog.title = "添加字典数据";
}
}
/** Excel文件 Change */
function handleFileChange(file: any) {
importData.file = file.raw;
}
/** Excel文件 Exceed */
function handleFileExceed(files: any) {
uploadRef.value!.clearFiles();
const file = files[0];
file.uid = genFileId();
uploadRef.value!.handleStart(file);
importData.file = file;
}
/** 字典类型表单提交 */
function handleSubmit() {
dataFormRef.value.validate((isValid: boolean) => {
console.log("isValid", isValid);
if (isValid) {
manageLoading.value = true;
const temp = Object.assign({}, formData);
if (!temp.parentId) {
temp.dataId = "";
}
if (dialog.title === "修改字典类型") {
updateType(temp)
if (dialog.title === "修改字典数据") {
updateData(formData)
.then((response) => {
if (response.code === 200) {
ElMessage.success("修改成功");
......@@ -231,7 +282,7 @@ function handleSubmit() {
manageLoading.value = false;
});
} else {
addType(temp)
addData(formData)
.then((response) => {
if (response.code === 200) {
ElMessage.success("新增成功");
......@@ -258,14 +309,14 @@ function closeDialog() {
function resetForm() {
dataFormRef.value.resetFields();
dataFormRef.value.resetFields();
formData.dataId = "";
formData.parentId = undefined;
formData.dictCode = undefined;
formData.businessId = undefined;
formData.dictName = "";
formData.dictType = "";
formData.status = "0";
formData.remarks = "";
formData.dictLabel = undefined;
formData.dictValue = "";
formData.dictSort = "";
formData.flag = "1";
formData.status = "0";
formData.remarks = undefined;
}
/** 删除字典类型 */
......@@ -277,7 +328,7 @@ function handleDelete(row) {
cancelButtonText: "取消",
type: "warning",
}).then(() => {
deleteDictTypes(dictTypeIds).then(() => {
delData(dictTypeIds).then(() => {
ElMessage.success("删除成功");
resetQuery();
});
......@@ -291,23 +342,22 @@ const dictDataDialog = reactive({
const selectedDictType = reactive({ typeCode: "", typeName: "" }); // 当前选中的字典类型
/** 打开字典数据弹窗 */
function openDictDialog(row: DictTypePageVO) {
dictDataDialog.visible = true;
dictDataDialog.title = "【" + row.name + "】字典数据";
selectedDictType.typeCode = row.code;
selectedDictType.typeName = row.name;
}
/** 关闭字典数据弹窗 */
function closeDictDialog() {
dictDataDialog.visible = false;
}
/** 查询字典类型详细 */
function handleGetType(dictId) {
getType(dictId).then((response) => {
queryParams.dictType = response.data.dictType;
defaultDictType.value = response.data.dictType;
handleQuery();
});
}
onMounted(() => {
queryParams.value = JSON.parse(getDataCache(route.path));
handleQuery();
// queryParams = JSON.parse(getDataCache(route.path));
const dictId = route.params && route.params.dictId;
handleGetType(dictId);
getTypeList(); // 查询字典类型列表
});
onBeforeRouteLeave?.((to, from, next) => {
......@@ -396,6 +446,16 @@ onBeforeRouteLeave?.((to, from, next) => {
@click="openDialog()"
>{{ commonField.addName }}</el-button
>
<!-- //导入按钮-->
<el-button
v-hasPermi="hasImportPerm"
:class="commonField.importClass"
:type="commonField.typeWarning"
:icon="commonField.importIcon"
:size="commonField.smallSize"
@click="handleImport"
>{{ commonField.importName }}</el-button
>
<!-- //导出-->
<el-button
v-hasPermi="exportHaspermi"
......@@ -412,27 +472,35 @@ onBeforeRouteLeave?.((to, from, next) => {
highlight-current-row
:data="dictTypeList"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="字典编码" align="center" prop="businessId" />
<el-table-column
label="字典名称"
prop="dictName"
:show-overflow-tooltip="true"
label="字典标签"
prop="dictLabel"
>
<template #default="scope">
{{ scope.row.dictName || "-" }}
{{ scope.row.dictLabel || "-" }}
</template>
</el-table-column>
<el-table-column label="字典类型" :show-overflow-tooltip="true">
<el-table-column
:show-overflow-tooltip="true"
label="字典键值"
prop="dictValue"
>
<template #default="scope">
<router-link
v-if="scope.row.businessId"
:to="'/dict/type/data'"
class="link-type"
>
<span style="color: #03a487">{{ scope.row.dictType }}</span>
</router-link>
<div v-else>-</div>
{{ scope.row.dictValue || "-" }}
</template>
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
label="字典排序"
prop="dictSort"
>
<template #default="scope">
{{ isNaN(scope.row.dictSort) ? "-" : scope.row.dictSort }}
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="flag">
......@@ -442,23 +510,23 @@ onBeforeRouteLeave?.((to, from, next) => {
class="switchDisabledStyle"
inactive-value="0"
active-value="1"
@click.native="handleStatusChange(scope.row)"
@click.native="changeStatus(scope.row)"
/>
</template>
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
label="备注"
prop="remarks"
:show-overflow-tooltip="true"
>
<template #default="scope">
{{ scope.row.remarks || "-" }}
</template>
</el-table-column>
<el-table-column
label="创建时间"
:show-overflow-tooltip="true"
prop="createTime"
label="创建时间"
prop="createDate"
>
<template #default="scope">
<span>{{ scope.row.createDate || "-" }}</span>
......@@ -468,7 +536,7 @@ onBeforeRouteLeave?.((to, from, next) => {
<template #default="scope">
<!-- //修改-->
<el-button
v-hasPermi="hasDictUpdatePerm"
v-hasPermi="hasDataEditPerm"
:class="commonField.updateClass"
:type="commonField.typeParent"
link
......@@ -478,7 +546,7 @@ onBeforeRouteLeave?.((to, from, next) => {
>
<!-- //删除-->
<el-button
v-hasPermi="hasDictDelPerm"
v-hasPermi="hasDataDelPerm"
:class="commonField.delClass"
:type="commonField.typeParent"
link
......@@ -498,7 +566,59 @@ onBeforeRouteLeave?.((to, from, next) => {
@pagination="handleQuery"
/>
</el-card>
<el-dialog
:title="uploadDialog.title"
v-model="uploadDialog.visible"
width="500px"
append-to-body
>
<el-form :model="importData" label-width="100px">
<el-form-item>
<el-upload
accept=".xlsx, .xls"
:headers="importData.headers"
:action="
importData.url + '?updateSupport=' + importData.updateSupport
"
:disabled="importData.isUploading"
:auto-upload="false"
ref="uploadRef"
drag
:limit="1"
:file-list="importData.fileList"
:on-change="handleFileChange"
:on-exceed="handleFileExceed"
>
<el-icon class="el-icon--upload">
<i-ep-upload-filled />
</el-icon>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
<template #tip>
<el-link
type="info"
style="font-size: 12px"
@click="handleImportTemplate"
>下载模板</el-link
>
<div style="color: red">
提示：仅允许导入“xls”或“xlsx”格式文件！
</div>
</template>
</el-upload>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="uploadDialog.visible = false">取 消</el-button>
<el-button type="primary" @click="handleUploadDialogSubmit"
>确 定</el-button
>
</div>
</template>
</el-dialog>
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
......@@ -511,62 +631,45 @@ onBeforeRouteLeave?.((to, from, next) => {
:rules="rules"
label-width="auto"
>
<el-form-item label="字典名称" prop="dictName">
<el-input v-model="formData.dictName" placeholder="请输入字典名称" />
<el-form-item label="字典类型">
<el-input
v-model.trim="formData.dictType"
:disabled="true"
show-word-limit
maxlength="30"
placeholder="请输入字典类型"
/>
</el-form-item>
<el-form-item label="字典类型" prop="dictType">
<el-input v-model="formData.dictType" placeholder="请输入字典类型" />
<el-form-item label="参数标签" prop="dictLabel">
<el-input
v-model.trim="formData.dictLabel"
show-word-limit
maxlength="30"
placeholder="请输入参数标签"
/>
</el-form-item>
<el-form-item label="父字典名称">
<el-select
v-model="formData.parentId"
style="width: 100%"
clearable
placeholder="请选择父字典名称"
@change="getOptions"
>
<el-option
v-for="item in options"
:key="item.businessId"
:label="item.dictName"
:value="item.businessId"
/>
</el-select>
<el-form-item label="参数键值" prop="dictValue">
<el-input
v-model.trim="formData.dictValue"
show-word-limit
maxlength="300"
placeholder="请输入参数键值"
/>
</el-form-item>
<el-form-item label="父字典数据" v-if="formData.parentId" prop="dataId">
<el-select
v-model="formData.dataId"
<el-form-item label="参数排序" prop="dictSort">
<el-input-number
v-model="formData.dictSort"
style="width: 100%"
clearable
placeholder="请选择父字典数据"
>
<!-- @visible-change="clearSelected"-->
<el-option
v-for="item in optionsDict"
:key="item.businessId"
:label="item.dictLabel"
:disabled="item.status == 1"
:value="item.businessId"
>
<span style="float: left">{{ item.dictLabel }}</span>
<span
v-if="item.status === '1'"
style="
float: right;
color: #8492a6;
font-size: 12px;
padding-left: 10px;
"
>{{ "已停用" }}</span
>
</el-option>
</el-select>
controls-position="right"
:min="0"
/>
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input
v-model.trim="formData.remarks"
maxlength="200"
type="textarea"
show-word-limit
maxlength="200"
placeholder="请输入内容"
/>
</el-form-item>
......
src/views/system/user/index.vue
View file @ 8a0adeb8
......@@ -749,7 +749,6 @@ onMounted(() => {
:disabled="importData.isUploading"
:auto-upload="false"
ref="uploadRef"
action=""
drag
:limit="1"
:file-list="importData.fileList"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment