<template>
|
<div class="app-container">
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="danger" plain icon="Delete" :disabled="power.multiple" @click="handleDelete()">删除</el-button>
|
</el-col>
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
|
</el-row>
|
<el-table v-loading="tableOption.loading" :data="dataTable" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="50" align="center" />
|
<el-table-column label="等级" align="center" key="levelName" prop="levelName" />
|
<el-table-column label="等级要求金额" align="center" key="levelMoney" prop="levelMoney" />
|
<!-- <el-table-column label="返积分系数" align="center" key="integralCoeff" prop="integralCoeff" /> -->
|
<el-table-column label="团队奖系数" align="center" key="teamCoeff" prop="teamCoeff" />
|
<el-table-column label="状态" align="center">
|
<template #default="scope">
|
<span>{{ scope.row.userState == 1 ? "正常" : "禁用" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column align="center" width="80" label="操作">
|
<template #default="scope">
|
<el-tooltip content="修改" placement="top">
|
<el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)"></el-button>
|
</el-tooltip>
|
<el-tooltip content="删除" placement="top">
|
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getDataList" />
|
|
<el-dialog :title="formData.dialogTitle" :close-on-click-modal="false" v-model="formData.isOpenFormData" width="600px" top="20vh" draggable>
|
<el-form ref="formRef" :model="formData.data" :rules="formData.rules" label-width="110">
|
<el-form-item label="等级名称" prop="levelName">
|
<el-input v-model="data.levelName" placeholder="请输入等级名称" style="width: 200px"></el-input>
|
</el-form-item>
|
<el-form-item label="等级要求金额" prop="levelMoney">
|
<el-input-number v-model="data.levelMoney" :min="0" :step="100"></el-input-number>
|
</el-form-item>
|
<!-- <el-form-item label="返积分系数" prop="integralCoeff">
|
<el-input-number v-model="data.integralCoeff" :min="0" :max="1" :precision="2" :step="0.1"></el-input-number>
|
</el-form-item> -->
|
<el-form-item label="团队奖系数" prop="teamCoeff">
|
<el-input-number v-model="data.teamCoeff" :min="0" :max="1" :precision="2" :step="0.1"></el-input-number>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-switch v-model="data.userState" :active-value="1" :inactive-value="2" active-text="正常"></el-switch>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="formData.isOpenFormData = false">取消</el-button>
|
<el-button type="primary" @click="sumbit()"> 提交 </el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { reactive, onMounted, toRefs, ref, getCurrentInstance } from "vue";
|
import { getList, addLevel, editLevel, delLevel } from "@/api/user/userlevel";
|
import { userLevelDTO, TypeUserLevelDTO } from "@/types/DTO/userLevelDTO";
|
import type { FormInstance } from "element-plus";
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const ids = ref<number[]>([]);
|
const state = reactive({
|
dataTable: [] as any[], //数据列表
|
total: 0, //总条数
|
tableOption: {
|
//表格配置
|
loading: true,
|
},
|
power: {
|
//操作权限
|
add: false,
|
single: false, //
|
multiple: true, //
|
},
|
showSearch: true, //是否显示分类
|
isOpenAdd: false,
|
});
|
const { dataTable, total, tableOption, power, showSearch, isOpenAdd } = toRefs(state);
|
|
onMounted(() => {
|
getDataList();
|
});
|
|
//#region 查询
|
|
const queryRef = ref<FormInstance>();
|
const queryParams = reactive({
|
//查询配置参数
|
pageNum: 1,
|
pageSize: 10,
|
});
|
|
/**
|
* 获取数据列表
|
*/
|
const getDataList = async () => {
|
await getList(queryParams).then((res) => {
|
if (res.code == 200) {
|
state.dataTable = res.rows;
|
state.total = res.total;
|
state.tableOption.loading = false;
|
}
|
});
|
};
|
|
/**
|
* 重置
|
*/
|
const resetQuery = () => {
|
queryRef.value!.resetFields();
|
};
|
|
//#endregion
|
|
//#region 新增/修改
|
|
const formData = reactive<Common.formDataType<TypeUserLevelDTO>>({
|
data: { ...userLevelDTO },
|
isOpenFormData: false, //是否展开新增对话框
|
dialogTitle: "", //弹窗标题
|
handleStatus: 0,
|
formRef: null,
|
rules: {
|
levelName: [{ required: true, message: "请输入等级名称", trigger: "change" }],
|
levelMoney: [{ required: true, message: "请输入等级要求金额", trigger: "change" }],
|
// integralCoeff: [{ required: true, message: "请输入等级返积分系数", trigger: "change" }],
|
teamCoeff: [{ required: true, message: "请输入等级团队奖系数", trigger: "change" }],
|
},
|
});
|
const { data, formRef } = toRefs(formData);
|
|
/**
|
* 提交
|
*/
|
const sumbit = () => {
|
formData.formRef!.validate((valid) => {
|
if (valid) {
|
if (formData.data.id) {
|
editData();
|
} else {
|
addData();
|
}
|
}
|
});
|
};
|
|
/**
|
* 新增
|
*/
|
const handleAdd = () => {
|
formData.data = { ...userLevelDTO };
|
formData.dialogTitle = "新增等级";
|
formData.handleStatus = 1; //新增
|
formData.isOpenFormData = true;
|
};
|
|
/**
|
* 修改
|
*/
|
const handleEdit = (e: any) => {
|
Object.assign(formData.data, e);
|
console.log("==============>", formData.data);
|
formData.dialogTitle = "修改等级";
|
formData.handleStatus = 2; //新增
|
formData.isOpenFormData = true;
|
};
|
|
/**
|
* 修改方法
|
*/
|
const editData = () => {
|
editLevel(formData.data).then((res) => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess("修改成功");
|
getDataList();
|
formData.isOpenFormData = false;
|
}
|
});
|
};
|
/**
|
* 新增方法
|
*/
|
const addData = () => {
|
addLevel(formData.data).then((res) => {
|
if (res.code == 200) {
|
proxy.$modal.msgSuccess("新增成功");
|
getDataList();
|
formData.isOpenFormData = false;
|
}
|
});
|
};
|
|
//#endregion
|
|
//#region 删除
|
/**
|
* 选择时
|
* @param {} row
|
*/
|
const handleSelectionChange = (row: TypeUserLevelDTO[]) => {
|
ids.value = row.map((item: TypeUserLevelDTO) => item.id);
|
state.power.multiple = !ids.value.length;
|
};
|
|
/**
|
* 删除
|
*/
|
const handleDelete = (row?: TypeUserLevelDTO) => {
|
const roleIds = (row && row.id) || ids.value;
|
proxy.$modal
|
.confirm("是否确认删除选中的等级?")
|
.then(function () {
|
return delLevel(roleIds);
|
})
|
.then(() => {
|
getDataList();
|
// let ss = new Set(row_keys.value);
|
proxy.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => {});
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.el-table :deep(.danger-row) {
|
--el-table-tr-bg-color: var(--el-color-danger-light-9);
|
}
|
._el-row {
|
padding: 5px 0px;
|
border-bottom: 1px solid var(--el-border-color);
|
// margin-left: 20px;
|
align-items: center;
|
|
.el-input__wrapper {
|
padding: 0px !important;
|
}
|
}
|
// .td {
|
// overflow: hidden;
|
// }
|
// :deep(.el-descriptions__table) {
|
// table-layout: fixed;
|
// }
|
:deep(.el-descriptions__cell) {
|
padding: 8px 0px !important;
|
}
|
// .custom-item-sty {
|
// color: #333;
|
// padding: 8px 0px;
|
// font-weight: bold;
|
// overflow-x: hidden;
|
// }
|
</style>
|
