You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
399 lines
11 KiB
399 lines
11 KiB
<template> |
|
<basic-container> |
|
<!-- 首页表格 --> |
|
|
|
<div class="avue-crud"> |
|
<!-- 搜索模块 --> |
|
<el-row v-if="search"> |
|
<!-- 查询模块 --> |
|
<el-form :inline="true" :model="query" class="el-fr-d"> |
|
<!-- 查询按钮 --> |
|
<el-form-item class="el-btn"> |
|
<el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button> |
|
<el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button> |
|
</el-form-item> |
|
</el-form> |
|
</el-row> |
|
|
|
<!-- 控件模块 --> |
|
<el-row> |
|
<div class="avue-crud__header"> |
|
<!-- 头部左侧按钮模块 --> |
|
<div class="avue-crud__left"> |
|
<el-button type="primary" @click="AddCategory"> |
|
<el-icon><Plus /></el-icon>新 增</el-button |
|
> |
|
|
|
<el-button type="primary" @click="BatchDelete"> |
|
<el-icon><Plus /></el-icon>批量删除</el-button |
|
> |
|
</div> |
|
<!-- 头部右侧按钮模块 --> |
|
<div class="avue-crud__right"> |
|
<el-button icon="el-icon-refresh" @click="searchChangeS" circle></el-button> |
|
<el-button icon="Operation" @click="showdrawer(true)" circle></el-button> |
|
<el-button icon="Search" @click="searchHide" circle></el-button> |
|
</div> |
|
</div> |
|
</el-row> |
|
|
|
<!-- 首页表格 --> |
|
<el-row> |
|
<!-- 列表模块 --> |
|
<tablecmt |
|
:columnList="classificationColumnList" |
|
:tableData="classificationdata" |
|
:loading="loadingclassification" |
|
@inputTxt="inputsc" |
|
@timeCheck="timesc" |
|
@btnCheck="btnsc" |
|
@selectCheck="selectsc" |
|
@selection="selectionChange" |
|
> |
|
<template #default="slotProps"> |
|
<template v-if="slotProps.scope.column.label === '操作'"> |
|
<div class="ElBtnClass"> |
|
<el-button text @click="ClassificationDditing(slotProps.scope)">编辑</el-button> |
|
<el-button text type="primary" @click="CategoryDeletion(slotProps.scope)" |
|
>删除</el-button |
|
> |
|
</div> |
|
</template> |
|
</template> |
|
</tablecmt> |
|
</el-row> |
|
|
|
<!-- 分页模块 --> |
|
<el-row class="el-fy"> |
|
<div class="avue-crud__pagination flex-c-sb" style="width: 100%"> |
|
<div></div> |
|
<el-pagination |
|
align="right" |
|
background |
|
@size-change="sizeChange" |
|
@current-change="currentChange" |
|
:current-page="currentPage" |
|
:page-sizes="[30, 50, 80, 120]" |
|
:page-size="pageSize" |
|
layout="total, sizes, prev, pager, next, jumper" |
|
:total="total" |
|
> |
|
</el-pagination> |
|
</div> |
|
</el-row> |
|
</div> |
|
|
|
<el-dialog v-model="newlyAdded" :title="title ? '新增指标' : '编辑指标'" width="30%"> |
|
<el-form v-loading="loadingAddPopup" :model="lassificationform" label-width="120px"> |
|
<el-form-item label="指标分类"> |
|
<el-select |
|
v-model="lassificationform.classificationoptionsvalue" |
|
filterable |
|
placeholder="请选择指标分类" |
|
style="width:100%" |
|
> |
|
<el-option |
|
v-for="item in classificationoptions" |
|
:key="item.id" |
|
:label="item.name" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item label="指标名称"> |
|
<el-input v-model="lassificationform.name" placeholder="请输入指标名称" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="指标描述"> |
|
<el-input |
|
v-model="lassificationform.description" |
|
:rows="4" |
|
type="textarea" |
|
placeholder="请输入指标描述" |
|
/> |
|
</el-form-item> |
|
<div class="el_integral"> |
|
<el-form-item label="积分值"> |
|
<el-input-number |
|
v-for="item in PointsList" |
|
v-model="item.integral" |
|
class="mx-4" |
|
controls-position="right" |
|
@change="handleChange" |
|
/> |
|
</el-form-item> |
|
<div class="el_add" @click="integralAdd">+</div> |
|
</div> |
|
</el-form> |
|
<template #footer> |
|
<span class="dialog-footer"> |
|
<el-button @click="newlyAdded = false">取消</el-button> |
|
<el-button :disabled="loadingAddPopup" type="primary" @click="newlyAddedFn"> |
|
确定 |
|
</el-button> |
|
</span> |
|
</template> |
|
</el-dialog> |
|
|
|
|
|
|
|
</basic-container> |
|
|
|
<!-- 列表配置显示 --> |
|
<edittablehead |
|
@setcolum="setnewcolum" |
|
@closce="showdrawer" |
|
:drawerShow="drawerShow" |
|
:columnList="classificationColumnList" |
|
></edittablehead> |
|
</template> |
|
|
|
<script setup> |
|
import { ElMessage, ElMessageBox } from 'element-plus'; |
|
import { ref, reactive, computed, onMounted } from 'vue'; |
|
import { classificationColumnList } from '@/option/supervise/supervise.js'; |
|
import { |
|
$_Getclassify, |
|
$_newlyadded, |
|
$_newlyremove, |
|
$_selectParentCalssifyList, |
|
$_classifyAddChild, |
|
$_classifupdateChild, |
|
} from '@/api/classify/classify'; |
|
const loadingclassification = ref(false); //指标分类加载效果 |
|
const classificationdata = ref([]); //指标分类数据 |
|
const current = ref(1); //当前页 |
|
const total = ref(10); //总页数 |
|
const pageSize = ref(50); |
|
const lassificationform = ref({}); //分类表单 |
|
const title = ref(true); //标题 |
|
const EditID = ref(true); //编辑需要的ID |
|
const newlyAdded = ref(false); //新增弹窗 |
|
const loadingAddPopup = ref(false); //弹窗加载 |
|
const selectionList = ref([]); //选中数据 |
|
const classificationoptions = ref([]); //指标分类接口 |
|
const classificationoptionsvalue = ref([]); //分类选择的 |
|
const PointsList = ref([{ integral: 0 }]); //积分列表 |
|
const onLoad = () => { |
|
let data = { |
|
current: current.value, |
|
size: pageSize.value, |
|
isPid: 0, |
|
}; |
|
loadingclassification.value = true; //开启加载效果 |
|
$_Getclassify(data) |
|
.then(res => { |
|
console.log(res); |
|
classificationdata.value = res.data.data.records; //数据 |
|
total.value = res.data.data.total; //总页数 |
|
}) |
|
.catch(res => {}) |
|
.finally(() => { |
|
loadingclassification.value = false; //开启加载效果 |
|
}); |
|
// 获取分类 |
|
$_selectParentCalssifyList().then(res => { |
|
console.log(res, '指标分类'); |
|
classificationoptions.value = res.data.data; |
|
console.log(classificationoptions.value, '存储的指标'); |
|
}); |
|
}; |
|
onLoad(); |
|
// 页码 |
|
const sizeChange = () => {}; |
|
const currentPage = () => {}; |
|
const currentChange = () => {}; |
|
// 分类编辑 |
|
const ClassificationDditing = val => { |
|
console.log(val); |
|
EditID.value = val.row.id; //编辑需要的ID |
|
title.value = false; //关闭编辑 |
|
newlyAdded.value = true; //开启弹窗 |
|
PointsList.value=[];//重置积分 |
|
let data = val.row; |
|
lassificationform.value.classificationoptionsvalue = data.pid; //分类 |
|
lassificationform.value.name = data.name; //分类名称 |
|
lassificationform.value.description = data.description; //分类描述 |
|
// 积分管理回显 |
|
data.pointsEntities.forEach(res=>{ |
|
PointsList.value.push({integral:res.point}) |
|
}) |
|
}; |
|
|
|
// 分类新增按钮 |
|
const AddCategory = () => { |
|
title.value = true; //开启新增 |
|
newlyAdded.value = true; //开启编辑 |
|
lassificationform.value = {}; //重置表单 |
|
PointsList.value=[{integral:0}];//重置积分 |
|
}; |
|
|
|
// 批量删除分类 |
|
const BatchDelete = () => { |
|
if (!selectionList.value.length) { |
|
ElMessage({ |
|
message: '请勾选要批量删除的数据', |
|
type: 'warning', |
|
}); |
|
return; |
|
} |
|
loadingclassification.value = true; //开启加载效果 |
|
|
|
let data = { |
|
ids: [], |
|
}; |
|
data['ids'] = selectionList.value.map(res => res.id); |
|
data['ids'] = data['ids'].join(','); |
|
console.log(data, '批量删除'); |
|
|
|
$_newlyremove(data) |
|
.then(res => { |
|
console.log(res, '删除成功返回值'); |
|
ElMessage({ |
|
message: res.data.msg, |
|
type: 'success', |
|
}); |
|
onLoad(); |
|
}) |
|
.catch(res => {}) |
|
.finally(() => { |
|
loadingclassification.value = false; //关闭加载效果 |
|
}); |
|
}; |
|
// 分类删除 |
|
const CategoryDeletion = val => { |
|
ElMessageBox.confirm(`是否删除${val.row.name}分类?`, 'Warning', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
}) |
|
.then(() => { |
|
loadingclassification.value = true; //开启加载效果 |
|
let data = { |
|
ids: [], |
|
}; |
|
data['ids'].push(val.row.id); |
|
data['ids'] = data['ids'].join(','); |
|
$_newlyremove(data) |
|
.then(res => { |
|
console.log(res, '删除成功返回值'); |
|
ElMessage({ |
|
message: res.data.msg, |
|
type: 'success', |
|
}); |
|
onLoad(); |
|
}) |
|
.catch(res => {}) |
|
.finally(() => { |
|
loadingclassification.value = false; //关闭加载效果 |
|
}); |
|
}) |
|
.catch(() => {}); |
|
}; |
|
// 新增分类 |
|
const newlyAddedFn = () => { |
|
let data = { |
|
name: lassificationform.value.name, //分类名称 |
|
description: lassificationform.value.description, //分类描述 |
|
pid: lassificationform.value.classificationoptionsvalue,//分类ID |
|
pointsEntities: [], //积分 |
|
}; |
|
loadingAddPopup.value = true; //关闭弹窗加载 |
|
if (title.value) { |
|
// 新增 |
|
PointsList.value.forEach(res => { |
|
data['pointsEntities'].push({ point: res.integral }); |
|
}); |
|
$_classifyAddChild(data) |
|
.then(res => { |
|
if (res.data.code == 200) { |
|
newlyAdded.value = false; //关闭弹窗 |
|
ElMessage({ |
|
message: res.data.msg, |
|
type: 'success', |
|
}); |
|
onLoad(); |
|
} |
|
}) |
|
.catch(res => {}) |
|
.finally(() => { |
|
loadingAddPopup.value = false; //关闭弹窗加载 |
|
}); |
|
} else { |
|
|
|
// 编辑 |
|
data.id =EditID.value,//编辑需要的id |
|
PointsList.value.forEach(res => { |
|
data['pointsEntities'].push({ point: res.integral }); |
|
}); |
|
$_classifupdateChild(data).then(res=>{ |
|
console.log(res,'编辑成功'); |
|
if(res.data.code == 200){ |
|
newlyAdded.value = false; //关闭弹窗 |
|
ElMessage({ |
|
message: res.data.msg, |
|
type: 'success', |
|
}); |
|
onLoad(); |
|
} |
|
}).catch(res=>{ |
|
|
|
}).finally(()=>{ |
|
loadingAddPopup.value = false; //关闭弹窗加载 |
|
}) |
|
|
|
} |
|
}; |
|
// 表格选择 |
|
const selectionChange = list => { |
|
selectionList.value = list; |
|
console.log(selectionList.value, '已经选中的数据'); |
|
}; |
|
// 积分新增 |
|
const integralAdd = () => { |
|
PointsList.value.push({ integral: 0 }); |
|
}; |
|
// 积分编辑按钮 |
|
const IntegralEditing=()=>{ |
|
|
|
} |
|
// 积分新增确定 |
|
const PointsManagementFn=()=>{ |
|
|
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.demo-tabs > .el-tabs__content { |
|
padding: 32px; |
|
color: #6b778c; |
|
font-size: 32px; |
|
font-weight: 600; |
|
} |
|
.ElBtnClass { |
|
width: 100%; |
|
display: flex; |
|
justify-content: space-evenly; |
|
} |
|
:deep(.el_integral) { |
|
display: flex; |
|
.el-form-item { |
|
width: 100% !important; |
|
margin-right: 0; |
|
.el-input-number { |
|
width: 100%; |
|
margin-bottom: 14px; |
|
} |
|
} |
|
.el_add { |
|
font-size: 20px; |
|
width: 24px; |
|
height: 24px; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
cursor: pointer; |
|
} |
|
} |
|
</style>
|
|
|