6 changed files with 1321 additions and 0 deletions
@ -0,0 +1,46 @@
|
||||
import request from '@/axios'; |
||||
|
||||
// 分类列表
|
||||
export const $_Getclassify = (params) => { |
||||
return request({ |
||||
url: '/api/logpm-supervise/classify/list', |
||||
method: 'get', |
||||
params |
||||
}) |
||||
} |
||||
|
||||
// 分类新增
|
||||
export const $_newlyadded = (data) => { |
||||
return request({ |
||||
url: '/api/logpm-supervise/classify/submit', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
//分类删除
|
||||
|
||||
export const $_newlyremove = (data) => { |
||||
return request({ |
||||
url: '/api/logpm-supervise/classify/remove', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
// 获取指标分类
|
||||
export const $_selectParentCalssifyList = (data) => { |
||||
return request({ |
||||
url: '/api/logpm-supervise/classify/selectParentCalssifyList', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
// 指标管理新增
|
||||
export const $_classifyAddChild = (data) => { |
||||
return request({ |
||||
url: '/api/logpm-supervise/classify/addChild', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
@ -0,0 +1,213 @@
|
||||
export const classificationColumnList = [ |
||||
{ |
||||
prop: '', |
||||
label: '复选框', |
||||
type: 0, |
||||
width: 55, |
||||
fixed: true, |
||||
}, |
||||
{ |
||||
prop: '', |
||||
label: '序号', |
||||
type: 12, |
||||
values: '', |
||||
width: 55, |
||||
fixed: true, |
||||
}, |
||||
|
||||
{ |
||||
prop: 'name', |
||||
label: '分类名称', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'description', |
||||
label: '分类描述', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'description', |
||||
label: '备注', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
|
||||
{ |
||||
prop: 'createTime', |
||||
label: '创建时间', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: '', |
||||
label: '操作', |
||||
type: 6, |
||||
values: '', |
||||
width: '80', |
||||
checkarr: [], |
||||
fixed: 'right', |
||||
sortable: false, |
||||
}, |
||||
]; |
||||
|
||||
// 指标列表
|
||||
export const IndicatorColumnList = [ |
||||
{ |
||||
prop: '', |
||||
label: '复选框', |
||||
type: 0, |
||||
width: 55, |
||||
fixed: true, |
||||
}, |
||||
{ |
||||
prop: '', |
||||
label: '序号', |
||||
type: 12, |
||||
values: '', |
||||
width: 55, |
||||
fixed: true, |
||||
}, |
||||
{ |
||||
prop: 'name', |
||||
label: '指标编号', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'description', |
||||
label: '指标名称', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'description', |
||||
label: '指标分类', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
|
||||
{ |
||||
prop: 'createTime', |
||||
label: '考核部门', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'createTime', |
||||
label: '考核分数', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'createTime', |
||||
label: '描述', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'createTime', |
||||
label: '照片', |
||||
type: 1,//7
|
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'createTime', |
||||
label: '附件', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'createTime', |
||||
label: '考核人', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'createTime', |
||||
label: '考评事件', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: '', |
||||
label: '操作', |
||||
type: 6, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: 'right', |
||||
sortable: false, |
||||
}, |
||||
]; |
||||
@ -0,0 +1,439 @@
|
||||
<template> |
||||
<basic-container> |
||||
<!-- 首页表格 --> |
||||
|
||||
<div class="avue-crud"> |
||||
<!-- 搜索模块 --> |
||||
<el-row v-if="search" class="el_header_top"> |
||||
<!-- 查询模块 --> |
||||
<el-form :inline="true" :model="searchFrom" class="el-fr-d"> |
||||
<!-- 查询按钮 --> |
||||
<div class="el_seaTop"> |
||||
<el-form-item label="考核部门："> |
||||
<el-select v-model="searchFrom.a" class="m-2" placeholder="请选择考核部门" style="width: 240px"> |
||||
<el-option |
||||
v-for="item in options" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="指标类型："> |
||||
<el-select v-model="searchFrom.b" class="m-2" placeholder="请选择指标类型" style="width: 240px"> |
||||
<el-option |
||||
v-for="item in options" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="填写时间："> |
||||
<el-date-picker |
||||
v-model="searchFrom.c" |
||||
type="daterange" |
||||
range-separator="至" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
:size="size" |
||||
/> |
||||
</el-form-item> |
||||
</div> |
||||
<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="IndicatorColumnList" |
||||
: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="ClassificationIndicatorView(slotProps.scope)" |
||||
>查看</el-button |
||||
> |
||||
<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="查看详情" width="60%"> |
||||
<el-form |
||||
v-loading="loadingAddPopup" |
||||
:model="lassificationform" |
||||
label-width="70px" |
||||
class="el_listForm" |
||||
> |
||||
<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="2" |
||||
type="textarea" |
||||
placeholder="暂无" |
||||
/> |
||||
</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.name" placeholder="暂无" /> |
||||
</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.name" placeholder="暂无" /> |
||||
</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.name" placeholder="暂无" /> |
||||
</el-form-item> |
||||
<el-form-item> </el-form-item> |
||||
<el-form-item label="照片"> |
||||
<div class="demo-image__preview"> |
||||
<el-image |
||||
style="width: 100px; height: 100px" |
||||
:src="url" |
||||
:zoom-rate="1.2" |
||||
:max-scale="7" |
||||
:min-scale="0.2" |
||||
:preview-src-list="srcList" |
||||
:initial-index="4" |
||||
fit="cover" |
||||
/> |
||||
</div> |
||||
</el-form-item> |
||||
</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="IndicatorColumnList" |
||||
></edittablehead> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ElMessage, ElMessageBox } from 'element-plus'; |
||||
import { ref, reactive, computed, onMounted } from 'vue'; |
||||
import { IndicatorColumnList } from '@/option/supervise/supervise.js'; |
||||
import { |
||||
$_Getclassify, |
||||
$_newlyadded, |
||||
$_newlyremove, |
||||
$_classifyAddChild, |
||||
} 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(true); //新增弹窗 |
||||
const loadingAddPopup = ref(false); //弹窗加载 |
||||
const selectionList = ref([]); //选中数据 |
||||
const searchFrom = ref({}); //搜索表单 |
||||
const search = ref(true); //头部搜索 |
||||
const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'; |
||||
const srcList = [ |
||||
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', |
||||
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', |
||||
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', |
||||
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', |
||||
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', |
||||
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', |
||||
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', |
||||
]; |
||||
const onLoad = () => { |
||||
let data = { |
||||
current: current.value, |
||||
size: pageSize.value, |
||||
isPid: 1, |
||||
}; |
||||
loadingclassification.value = true; //开启加载效果 |
||||
$_Getclassify(data) |
||||
.then(res => { |
||||
console.log(res); |
||||
if (res.data.data.records) { |
||||
classificationdata.value = res.data.data.records; //数据 |
||||
} else { |
||||
} |
||||
|
||||
total.value = res.data.data.total; //总页数 |
||||
}) |
||||
.catch(res => {}) |
||||
.finally(() => { |
||||
loadingclassification.value = false; //开启加载效果 |
||||
}); |
||||
classificationdata.value = [{}]; |
||||
}; |
||||
onLoad(); |
||||
// 页码 |
||||
const sizeChange = () => {}; |
||||
const currentPage = () => {}; |
||||
const currentChange = () => {}; |
||||
// 分类编辑 |
||||
const ClassificationDditing = val => { |
||||
EditID.value = val.row.id; //编辑需要的ID |
||||
let data = val.row; |
||||
lassificationform.value.name = data.name; //分类名称 |
||||
lassificationform.value.description = data.description; //分类描述 |
||||
lassificationform.value.remark = data.remark; //分类备注 |
||||
}; |
||||
|
||||
// 分类新增按钮 |
||||
const AddCategory = () => {}; |
||||
|
||||
// 批量删除分类 |
||||
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; //开启加载效果 |
||||
console.log(val, '分类删除'); |
||||
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', |
||||
}); |
||||
}) |
||||
.catch(res => {}) |
||||
.finally(() => { |
||||
loadingclassification.value = false; //关闭加载效果 |
||||
}); |
||||
onLoad(); |
||||
}) |
||||
.catch(() => {}); |
||||
}; |
||||
// 新增/编辑分类 |
||||
const newlyAddedFn = () => { |
||||
loadingAddPopup.value = true; //开启弹窗加载效果 |
||||
loadingclassification.value = true; //开启加载效果 |
||||
let data = { |
||||
...lassificationform.value, |
||||
pId: 0, ///是否父指标 默认0 |
||||
}; |
||||
if (title.value) { |
||||
console.log(data, '新增分类'); |
||||
} else { |
||||
data.id = EditID.value; |
||||
} |
||||
|
||||
$_newlyadded(data) |
||||
.then(res => { |
||||
console.log(res, '新增成功返回值'); |
||||
if (res.data.code == 200) { |
||||
onLoad(); |
||||
newlyAdded.value = false; //关闭弹窗 |
||||
ElMessage({ |
||||
message: res.data.msg, |
||||
type: 'success', |
||||
}); |
||||
} |
||||
}) |
||||
.catch(res => {}) |
||||
.finally(() => { |
||||
loadingAddPopup.value = false; //关闭弹窗加载效果 |
||||
loadingclassification.value = false; //关闭加载效果 |
||||
}); |
||||
}; |
||||
// 表格选择 |
||||
const selectionChange = list => { |
||||
selectionList.value = list; |
||||
console.log(selectionList.value, '已经选中的数据'); |
||||
}; |
||||
|
||||
const searchHide = () => { |
||||
search.value = !search.value; |
||||
}; |
||||
// 查看信息 |
||||
const ClassificationIndicatorView = val => { |
||||
console.log(val, '查看信息'); |
||||
}; |
||||
// 查询搜索 |
||||
const searchChange=()=>{ |
||||
|
||||
} |
||||
</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; |
||||
} |
||||
.el_listForm { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
:deep(.el-form-item) { |
||||
justify-content: flex-end !important; |
||||
width: 30%; |
||||
} |
||||
:deep(.el-form-item__content) { |
||||
align-items: flex-start !important; |
||||
} |
||||
} |
||||
.demo-image__error .image-slot { |
||||
font-size: 30px; |
||||
} |
||||
.demo-image__error .image-slot .el-icon { |
||||
font-size: 30px; |
||||
} |
||||
.demo-image__error .el-image { |
||||
width: 100%; |
||||
height: 200px; |
||||
} |
||||
.el_header_top{ |
||||
.el-form{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
.el-form-item{ |
||||
margin: 4px 0; |
||||
margin-right: 10px; |
||||
} |
||||
.el-btn{ |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
:deep(.el-date-editor){ |
||||
height: 100% !important; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,305 @@
|
||||
<template> |
||||
<basic-container> |
||||
<!-- 首页表格 --> |
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
||||
<el-tab-pane label="分类列表" name="first"> </el-tab-pane> |
||||
</el-tabs> |
||||
<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-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> |
||||
|
||||
<el-form-item label="备注"> |
||||
<el-input |
||||
v-model="lassificationform.remark" |
||||
:rows="4" |
||||
type="textarea" |
||||
placeholder="请输入分类备注" |
||||
/> |
||||
</el-form-item> |
||||
</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,$_classifyAddChild } 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 onLoad = () => { |
||||
let data = { |
||||
current: current.value, |
||||
size: pageSize.value, |
||||
isPid:1, |
||||
}; |
||||
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; //开启加载效果 |
||||
}); |
||||
|
||||
}; |
||||
onLoad(); |
||||
// 页码 |
||||
const sizeChange = () => {}; |
||||
const currentPage = () => {}; |
||||
const currentChange = () => {}; |
||||
// 分类编辑 |
||||
const ClassificationDditing = val => { |
||||
EditID.value = val.row.id; //编辑需要的ID |
||||
title.value = false; //关闭编辑 |
||||
newlyAdded.value = true; //开启弹窗 |
||||
let data = val.row; |
||||
lassificationform.value.name = data.name; //分类名称 |
||||
lassificationform.value.description = data.description; //分类描述 |
||||
lassificationform.value.remark = data.remark; //分类备注 |
||||
}; |
||||
|
||||
// 分类新增按钮 |
||||
const AddCategory = () => { |
||||
title.value = true; //开启新增 |
||||
newlyAdded.value = true; //开启编辑 |
||||
lassificationform.value={};//重置表单 |
||||
}; |
||||
|
||||
// 批量删除分类 |
||||
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; //开启加载效果 |
||||
console.log(val, '分类删除'); |
||||
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', |
||||
}); |
||||
}) |
||||
.catch(res => {}) |
||||
.finally(() => { |
||||
loadingclassification.value = false; //关闭加载效果 |
||||
}); |
||||
onLoad(); |
||||
}) |
||||
.catch(() => {}); |
||||
}; |
||||
// 新增/编辑分类 |
||||
const newlyAddedFn = () => { |
||||
loadingAddPopup.value = true; //开启弹窗加载效果 |
||||
loadingclassification.value = true; //开启加载效果 |
||||
let data = { |
||||
...lassificationform.value, |
||||
pId: 0, ///是否父指标 默认0 |
||||
}; |
||||
if (title.value) { |
||||
console.log(data, '新增分类'); |
||||
} else { |
||||
data.id = EditID.value; |
||||
} |
||||
|
||||
$_newlyadded(data) |
||||
.then(res => { |
||||
console.log(res, '新增成功返回值'); |
||||
if (res.data.code == 200) { |
||||
onLoad(); |
||||
newlyAdded.value = false; //关闭弹窗 |
||||
ElMessage({ |
||||
message: res.data.msg, |
||||
type: 'success', |
||||
}); |
||||
} |
||||
}) |
||||
.catch(res => {}) |
||||
.finally(() => { |
||||
loadingAddPopup.value = false; //关闭弹窗加载效果 |
||||
loadingclassification.value = false; //关闭加载效果 |
||||
}); |
||||
}; |
||||
// 表格选择 |
||||
const selectionChange=(list)=>{ |
||||
selectionList.value=list |
||||
console.log(selectionList.value,'已经选中的数据'); |
||||
} |
||||
</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; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,313 @@
|
||||
<template> |
||||
<basic-container> |
||||
<!-- 首页表格 --> |
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
||||
<el-tab-pane label="分类列表" name="first"> </el-tab-pane> |
||||
</el-tabs> |
||||
<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="classificationoptionsvalue" filterable placeholder="请选择指标分类" style="width: 240px"> |
||||
<el-option |
||||
v-for="item in classificationoptions" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</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> |
||||
</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 } 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 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.records |
||||
}) |
||||
|
||||
}; |
||||
onLoad(); |
||||
// 页码 |
||||
const sizeChange = () => {}; |
||||
const currentPage = () => {}; |
||||
const currentChange = () => {}; |
||||
// 分类编辑 |
||||
const ClassificationDditing = val => { |
||||
EditID.value = val.row.id; //编辑需要的ID |
||||
title.value = false; //关闭编辑 |
||||
newlyAdded.value = true; //开启弹窗 |
||||
let data = val.row; |
||||
lassificationform.value.name = data.name; //分类名称 |
||||
lassificationform.value.description = data.description; //分类描述 |
||||
lassificationform.value.remark = data.remark; //分类备注 |
||||
}; |
||||
|
||||
// 分类新增按钮 |
||||
const AddCategory = () => { |
||||
title.value = true; //开启新增 |
||||
newlyAdded.value = true; //开启编辑 |
||||
lassificationform.value = {}; //重置表单 |
||||
}; |
||||
|
||||
// 批量删除分类 |
||||
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; //开启加载效果 |
||||
console.log(val, '分类删除'); |
||||
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', |
||||
}); |
||||
}) |
||||
.catch(res => {}) |
||||
.finally(() => { |
||||
loadingclassification.value = false; //关闭加载效果 |
||||
}); |
||||
onLoad(); |
||||
}) |
||||
.catch(() => {}); |
||||
}; |
||||
// 新增/编辑分类 |
||||
const newlyAddedFn = () => { |
||||
loadingAddPopup.value = true; //开启弹窗加载效果 |
||||
loadingclassification.value = true; //开启加载效果 |
||||
let data = { |
||||
...lassificationform.value, |
||||
pId: 0, ///是否父指标 默认0 |
||||
}; |
||||
if (title.value) { |
||||
console.log(data, '新增分类'); |
||||
} else { |
||||
data.id = EditID.value; |
||||
} |
||||
|
||||
$_newlyadded(data) |
||||
.then(res => { |
||||
console.log(res, '新增成功返回值'); |
||||
if (res.data.code == 200) { |
||||
onLoad(); |
||||
newlyAdded.value = false; //关闭弹窗 |
||||
ElMessage({ |
||||
message: res.data.msg, |
||||
type: 'success', |
||||
}); |
||||
} |
||||
}) |
||||
.catch(res => {}) |
||||
.finally(() => { |
||||
loadingAddPopup.value = false; //关闭弹窗加载效果 |
||||
loadingclassification.value = false; //关闭加载效果 |
||||
}); |
||||
}; |
||||
// 表格选择 |
||||
const selectionChange = list => { |
||||
selectionList.value = list; |
||||
console.log(selectionList.value, '已经选中的数据'); |
||||
}; |
||||
</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; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue