9 changed files with 1934 additions and 6 deletions
@ -0,0 +1,102 @@
|
||||
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 |
||||
}) |
||||
} |
||||
// 指标管理编辑
|
||||
export const $_classifupdateChild = (data) => { |
||||
return request({ |
||||
url: '/api/logpm-supervise/classify/updateChild', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
// 指标列表list
|
||||
export const $_findIndicatorsList = (data) => { |
||||
return request({ |
||||
url: '/api/logpm-supervise/indicators/findIndicatorsList', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
|
||||
// 指标列表查询详情
|
||||
export const $_findIndicatorsDetail = (data) => { |
||||
return request({ |
||||
url: '/api/logpm-supervise/indicators/findIndicatorsDetail', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
// 指标列表编辑
|
||||
export const $_updateIndicators = (data) => { |
||||
return request({ |
||||
url: '/api/logpm-supervise/indicators/updateIndicators', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
// 指标列表删除
|
||||
export const $_removeByIds = (data) => { |
||||
return request({ |
||||
url: '/api/logpm-supervise/indicators/removeById', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
|
||||
// 分类指标下拉
|
||||
export const $_selectChildCalssifyList = (data) => { |
||||
return request({ |
||||
url: '/api/logpm-supervise/classify/selectChildCalssifyList', |
||||
method: 'post', |
||||
data |
||||
}) |
||||
} |
||||
@ -0,0 +1,293 @@
|
||||
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 managementColumnList = [ |
||||
{ |
||||
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: 'name', |
||||
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: 'classifyName', |
||||
label: '指标名称', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'parentClassifyName', |
||||
label: '指标分类', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
|
||||
{ |
||||
prop: 'assessDeptName', |
||||
label: '考核部门', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'point', |
||||
label: '考核分数', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'objectionRemark', |
||||
label: '描述', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
{ |
||||
prop: 'assessUserName', |
||||
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: 'indicatorsStatus', |
||||
label: '指标状态', |
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
|
||||
{ |
||||
prop: 'isObjection', |
||||
label: '是否存在异议',//1 表示提交 2 表示审核 通过 3 表示审核失败
|
||||
type: 1, |
||||
values: '', |
||||
width: '130', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
head: false, |
||||
}, |
||||
// {
|
||||
// prop: 'objectionRemark',
|
||||
// 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,665 @@
|
||||
<template> |
||||
<basic-container> |
||||
<!-- 首页表格 --> |
||||
|
||||
<div class="avue-crud content_max"> |
||||
<!-- 搜索模块 --> |
||||
<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.assessDeptName" |
||||
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 classificationoptions" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
/> |
||||
</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="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" |
||||
disabled |
||||
> |
||||
<el-form-item label="指标名称"> |
||||
<el-input v-model="lassificationform.classifyName" placeholder="暂无" /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="指标分类"> |
||||
<el-input |
||||
v-model="lassificationform.parentClassifyName" |
||||
:rows="2" |
||||
type="textarea" |
||||
placeholder="暂无" |
||||
/> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="考核部门"> |
||||
<el-input v-model="lassificationform.assessDeptName" placeholder="暂无" /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="考核分数"> |
||||
<el-input v-model="lassificationform.point" placeholder="暂无" /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="描述"> |
||||
<el-input v-model="lassificationform.objectionRemark" 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.assessUserName" placeholder="暂无" /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="考评时间"> |
||||
<el-input v-model="lassificationform.createTime" placeholder="暂无" /> |
||||
</el-form-item> |
||||
<el-form-item label="是否异议"> |
||||
<!-- /1 表示提交 2 表示审核 通过 3 表示审核失败 --> |
||||
<el-input |
||||
v-model="lassificationform.isObjection" |
||||
placeholder=" |
||||
暂无 |
||||
" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="指标状态"> |
||||
<!-- /1 表示提交 2 表示审核 通过 3 表示审核失败 --> |
||||
<el-input |
||||
v-model="lassificationform.isObjection" |
||||
placeholder=" |
||||
暂无 |
||||
" |
||||
/> |
||||
</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> |
||||
|
||||
<!-- 编辑弹窗 --> |
||||
|
||||
<el-dialog v-model="IndicatorEditing" title="编辑" width="30%"> |
||||
<el-form v-loading="Indicatoreditingload" :model="lassificationformedit" label-width="70px"> |
||||
<el-form-item label="考核部门"> |
||||
<el-select |
||||
v-model="lassificationformedit.assessDept" |
||||
class="m-2" |
||||
placeholder="Select" |
||||
style="width: 100%" |
||||
> |
||||
<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="Indicatorediting.value" |
||||
class="m-2" |
||||
placeholder="Select" |
||||
style="width: 100%" |
||||
> |
||||
<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="Indicatorediting.value" |
||||
class="m-2" |
||||
placeholder="Select" |
||||
style="width: 100%" |
||||
> |
||||
<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="Indicatorediting.value" |
||||
class="m-2" |
||||
placeholder="Select" |
||||
style="width: 100%" |
||||
> |
||||
<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-input v-model="lassificationformedit.assessUserName" placeholder="请输入考核人" /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="分数备注"> |
||||
<el-input v-model="lassificationformedit.textarea" :rows="4" type="textarea" placeholder="请输入分数备注" /> |
||||
</el-form-item> |
||||
|
||||
|
||||
<el-form-item label="异议描述"> |
||||
<el-input v-model="lassificationformedit.objectionRemark" :rows="4" type="textarea" placeholder="请输入分数备注" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="IndicatorEditing = false">关闭</el-button> |
||||
<el-button type="primary" @click="IndicatorEditingFn"> 确定 </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 functions from '@/utils/functions.js'; |
||||
import { |
||||
$_Getclassify, |
||||
$_newlyadded, |
||||
$_newlyremove, |
||||
$_classifyAddChild, |
||||
$_findIndicatorsList, |
||||
$_findIndicatorsDetail, |
||||
$_updateIndicators, |
||||
$_removeByIds, |
||||
$_selectChildCalssifyList, |
||||
$_selectParentCalssifyList, |
||||
} from '@/api/classify/classify'; |
||||
const loadingclassification = ref(false); //指标分类加载效果 |
||||
const classificationdata = ref([]); //指标分类数据 |
||||
const current = ref(1); //当前页 |
||||
const total = ref(0); //总页数 |
||||
const IndicatorEditing = ref(false); //编辑弹窗 |
||||
const pageSize = ref(50); |
||||
const lassificationform = ref({}); //分类表单 |
||||
const lassificationformedit = 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 searchFrom = ref({}); //搜索表单 |
||||
const drawerShow = ref(false); //抽屉显示隐藏 |
||||
const search = ref(true); //头部搜索 |
||||
const Indicatorediting = ref({}); //编辑表单 |
||||
const columnList=ref() |
||||
const Indicatoreditingload = ref(false); //编辑加载 |
||||
|
||||
const url = ''; |
||||
const srcList = []; |
||||
const onLoad = () => { |
||||
let data = { |
||||
current: current.value, |
||||
size: pageSize.value, |
||||
...searchFrom.value,//搜索参数 |
||||
}; |
||||
loadingclassification.value = true; //开启加载效果 |
||||
$_findIndicatorsList(data) |
||||
.then(res => { |
||||
console.log(res); |
||||
if (res.data.data.records) { |
||||
classificationdata.value = res.data.data.records; //数据 |
||||
} |
||||
total.value = res.data.data.total; //总页数 |
||||
}) |
||||
.catch(res => {}) |
||||
.finally(() => { |
||||
loadingclassification.value = false; //开启加载效果 |
||||
}); |
||||
}; |
||||
onLoad(); |
||||
// 条数 |
||||
const sizeChange = (val) => { |
||||
pageSize.value=val |
||||
onLoad(); |
||||
}; |
||||
// 页码 |
||||
const currentChange = (val) => { |
||||
current.value=val |
||||
onLoad(); |
||||
}; |
||||
// 分类编辑 |
||||
const ClassificationDditing = val => { |
||||
EditID.value = val.row.id; //编辑需要的ID |
||||
let data = val.row; |
||||
IndicatorEditing.value = true; //编辑弹窗展开 |
||||
}; |
||||
// 获取指标分类 |
||||
const Obtainclassification=()=>{ |
||||
$_selectParentCalssifyList().then(res => { |
||||
classificationoptions.value = res.data.data; |
||||
}); |
||||
} |
||||
Obtainclassification() |
||||
// 分类新增按钮 |
||||
const AddCategory = () => {}; |
||||
|
||||
// 批量删除分类 |
||||
const BatchDelete = () => { |
||||
if (!selectionList.value.length) { |
||||
ElMessage({ |
||||
message: '请勾选要批量删除的数据', |
||||
type: 'warning', |
||||
}); |
||||
return; |
||||
} |
||||
loadingclassification.value = true; //开启加载效果 |
||||
|
||||
let data = { |
||||
id: [], |
||||
}; |
||||
data['id'] = selectionList.value.map(res => res.id); |
||||
data['id'] = data['id'].join(','); |
||||
console.log(data, '批量删除'); |
||||
|
||||
$_removeByIds(data) |
||||
.then(res => { |
||||
console.log(res, '删除成功返回值'); |
||||
ElMessage({ |
||||
message: res.data.msg, |
||||
type: 'success', |
||||
}); |
||||
onLoad(); |
||||
}) |
||||
.catch(res => {}) |
||||
.finally(() => { |
||||
loadingclassification.value = false; //关闭加载效果 |
||||
}); |
||||
}; |
||||
// 分类指标 |
||||
const classificationindicators = () => { |
||||
$_selectChildCalssifyList({ id: '1750415995741130754' }).then(res => { |
||||
console.log(res, '分类列表'); |
||||
}); |
||||
}; |
||||
classificationindicators(); |
||||
// 分类删除 |
||||
const CategoryDeletion = val => { |
||||
ElMessageBox.confirm(`是否删除${val.row.classifyName}分类?`, 'Warning', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}) |
||||
.then(() => { |
||||
loadingclassification.value = true; //开启加载效果 |
||||
console.log(val, '分类删除'); |
||||
let data = { |
||||
id: [], |
||||
}; |
||||
data['id'].push(val.row.id); |
||||
data['id'] = data['id'].join(','); |
||||
$_removeByIds(data) |
||||
.then(res => { |
||||
if (res.data.code == 200) { |
||||
console.log(res, '删除成功返回值'); |
||||
ElMessage({ |
||||
message: res.data.msg, |
||||
type: 'success', |
||||
}); |
||||
onLoad(); |
||||
} |
||||
}) |
||||
.catch(res => {}) |
||||
.finally(() => { |
||||
loadingclassification.value = false; //关闭加载效果 |
||||
}); |
||||
onLoad(); |
||||
}) |
||||
.catch(() => {}); |
||||
}; |
||||
|
||||
/** 展开列表控件 */ |
||||
const showdrawer = _flag => { |
||||
drawerShow.value = _flag; |
||||
}; |
||||
/** |
||||
* 设置列表 -- 固定函数 |
||||
* 弹窗的勾选回调，用于更改头部数组 |
||||
* 固定搭配，只需要更换 columnList |
||||
* */ |
||||
const setnewcolum = (newarr, headarr, type) => { |
||||
if (type == 1) { |
||||
columnList.value = newarr; |
||||
functions.setStorage(window.location.pathname + 'checkList', headarr); |
||||
} |
||||
}; |
||||
// 新增/编辑分类 |
||||
const newlyAddedFn = () => { |
||||
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, '查看信息'); |
||||
newlyAdded.value = true; //开启弹窗 |
||||
$_findIndicatorsDetail({ id: val.row.id }) |
||||
.then(res => { |
||||
loadingAddPopup.value = true; //开启弹窗加载效果 |
||||
console.log(res, '查看信息返回值'); |
||||
lassificationform.value = res.data.data; //赋值给弹窗表单 |
||||
// 指标状态1 表示提交 2 表示审核 通过 3 表示审核失败 |
||||
if (res.data.data.indicatorsStatus == 1) { |
||||
lassificationform.value.isObjection = '提交'; |
||||
} else if (res.data.data.isObjection == 2) { |
||||
lassificationform.value.isObjection = '审核通过'; |
||||
} else if (res.data.data.isObjection == 3) { |
||||
lassificationform.value.isObjection = '审核失败'; |
||||
} |
||||
// 是否存在异议 0 表示没有1表示存在 |
||||
if (res.data.data.isObjection) { |
||||
lassificationform.value.isObjection = '没有'; |
||||
} else { |
||||
} |
||||
lassificationform.value.isObjection = '存在'; |
||||
if (res.data.data.pictures.length) { |
||||
// 图片 |
||||
url.value = res.data.data.pictures[0].url; //赋值给弹窗图片 |
||||
res.data.data.pictures.forEach(res => { |
||||
srcList.value.push(res.url); |
||||
}); |
||||
} |
||||
}) |
||||
.catch(res => {}) |
||||
.finally(() => { |
||||
loadingAddPopup.value = false; //关闭弹窗加载效果 |
||||
}); |
||||
}; |
||||
// 编辑信息 |
||||
const IndicatorEditingFn = () => { |
||||
let data={ |
||||
assessDept:'',//考核部门ID |
||||
assessDeptName:'',//考核部门名称 |
||||
|
||||
assessUserId:'',//考核人ID |
||||
assessUserName:'',//考核人名称 |
||||
|
||||
point:'',//指标分数 |
||||
remark:'',//分数备注 |
||||
objectionRemark:'',//异议描述 |
||||
} |
||||
return |
||||
$_updateIndicators(data).then(res=>{ |
||||
console.log(res,'编辑成功'); |
||||
}) |
||||
}; |
||||
const searchChangeS=()=>{ |
||||
searchFrom.value={};//重置搜索参数 |
||||
onLoad(); |
||||
} |
||||
// 查询搜索 |
||||
const searchChange = () => { |
||||
onLoad() |
||||
}; |
||||
</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; |
||||
} |
||||
} |
||||
:deep(.el-card) { |
||||
height: 100% !important; |
||||
.el-card__body { |
||||
height: 100%; |
||||
.content_max { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
.el-fy { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: flex-end; |
||||
margin-bottom: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.maboxhi{ |
||||
height: 700px !important; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,363 @@
|
||||
<template> |
||||
<basic-container> |
||||
<!-- 首页表格 --> |
||||
|
||||
<div class="avue-crud content_max"> |
||||
<!-- 搜索模块 --> |
||||
<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="columnList" |
||||
></edittablehead> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ElMessage, ElMessageBox } from 'element-plus'; |
||||
import { ref, reactive, computed, onMounted, watch } from 'vue'; |
||||
import { classificationColumnList } from '@/option/supervise/supervise.js'; |
||||
import functions from '@/utils/functions.js'; |
||||
import { |
||||
$_Getclassify, |
||||
$_newlyadded, |
||||
$_newlyremove, |
||||
$_classifyAddChild, |
||||
} from '@/api/classify/classify'; |
||||
const loadingclassification = ref(false); //指标分类加载效果 |
||||
const classificationdata = ref([]); //指标分类数据 |
||||
const current = ref(1); //当前页 |
||||
const total = ref(0); //总页数 |
||||
const drawerShow = ref(false); //列表配置显示 |
||||
const pageSize = ref(30); |
||||
const lassificationform = ref({}); //分类表单 |
||||
const title = ref(true); //标题 |
||||
const EditID = ref(true); //编辑需要的ID |
||||
const columnList = ref([]); //列表配置 |
||||
const newlyAdded = ref(false); //新增弹窗 |
||||
const loadingAddPopup = ref(false); //弹窗加载 |
||||
const selectionList = ref([]); //选中数据 |
||||
const onLoad = () => { |
||||
let data = { |
||||
current: current.value, |
||||
size: pageSize.value, |
||||
isPid: 1, |
||||
}; |
||||
columnList.value=classificationColumnList |
||||
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 searchChangeS = () => { |
||||
onLoad(); |
||||
}; |
||||
/** 展开列表控件 */ |
||||
const showdrawer = _flag => { |
||||
drawerShow.value = _flag; |
||||
}; |
||||
/** |
||||
* 设置列表 -- 固定函数 |
||||
* 弹窗的勾选回调，用于更改头部数组 |
||||
* 固定搭配，只需要更换 columnList |
||||
* */ |
||||
const setnewcolum = (newarr, headarr, type) => { |
||||
if (type == 1) { |
||||
columnList.value = newarr; |
||||
functions.setStorage(window.location.pathname + 'checkList', headarr); |
||||
} else if (type == 2) { |
||||
columnList.value = newarr; |
||||
functions.setStorage(window.location.pathname + 'flexList', headarr); |
||||
} else if (type == 3) { |
||||
columnList.value = newarr; |
||||
functions.setStorage(window.location.pathname + 'sortlist', headarr); |
||||
} |
||||
}; |
||||
// 页码 |
||||
const sizeChange = val => { |
||||
pageSize.value = val; |
||||
onLoad(); |
||||
}; |
||||
const currentPage = () => {}; |
||||
const currentChange = val => { |
||||
current.value = val; |
||||
onLoad(); |
||||
}; |
||||
// 分类编辑 |
||||
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', |
||||
}); |
||||
onLoad(); |
||||
}) |
||||
.catch(res => {}) |
||||
.finally(() => { |
||||
loadingclassification.value = false; //关闭加载效果 |
||||
}); |
||||
}) |
||||
.catch(() => {}) |
||||
.finally(() => { |
||||
loadingclassification.value = false; //关闭加载效果 |
||||
}); |
||||
}; |
||||
// 新增/编辑分类 |
||||
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; |
||||
} |
||||
:deep(.el-card) { |
||||
height: 100% !important; |
||||
.el-card__body { |
||||
height: 100%; |
||||
.content_max { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
.el-fy { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: flex-end; |
||||
margin-bottom: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.maboxhi { |
||||
height: 700px !important; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,498 @@
|
||||
<template> |
||||
<basic-container> |
||||
<!-- 首页表格 --> |
||||
|
||||
<div class="avue-crud content_max"> |
||||
<!-- 搜索模块 --> |
||||
<el-row v-if="search"> |
||||
<!-- 查询模块 --> |
||||
<el-form :inline="true" :model="queryTop" class="el-fr-d"> |
||||
<!-- 查询按钮 --> |
||||
<div class="el_left_input"> |
||||
<el-form-item label="指标名称"> |
||||
<el-input v-model="queryTop.input" placeholder="请输入指标名称" /> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="指标类型"> |
||||
|
||||
<el-select |
||||
v-model="queryTop.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> |
||||
</div> |
||||
|
||||
|
||||
<el-form-item class="el-btn"> |
||||
<el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</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="managementColumnList" |
||||
: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="managementColumnList" |
||||
></edittablehead> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ElMessage, ElMessageBox } from 'element-plus'; |
||||
import { ref, reactive, computed, onMounted } from 'vue'; |
||||
import { managementColumnList } from '@/option/supervise/supervise.js'; |
||||
import functions from '@/utils/functions.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(0); //总页数 |
||||
const pageSize = ref(30); |
||||
const lassificationform = ref({}); //分类表单 |
||||
const title = ref(true); //标题 |
||||
const search=ref(false);//顶部搜索 |
||||
const EditID = ref(true); //编辑需要的ID |
||||
const queryTop=ref({});//顶部搜索 |
||||
const newlyAdded = ref(false); //新增弹窗 |
||||
const loadingAddPopup = ref(false); //弹窗加载 |
||||
const selectionList = ref([]); //选中数据 |
||||
const classificationoptions = ref([]); //指标分类接口 |
||||
const classificationoptionsvalue = ref([]); //分类选择的 |
||||
const PointsList = ref([{ integral: 0 }]); //积分列表 |
||||
const columnList=ref([]) |
||||
const drawerShow=ref(false);//抽屉显示 |
||||
const onLoad = (val) => { |
||||
let data = { |
||||
current: current.value, |
||||
size: pageSize.value, |
||||
isPid: 0, |
||||
...val |
||||
}; |
||||
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; //开启加载效果 |
||||
}); |
||||
// 获取分类 |
||||
|
||||
}; |
||||
/** 展开列表控件 */ |
||||
const showdrawer = _flag => { |
||||
drawerShow.value = _flag; |
||||
}; |
||||
/** |
||||
* 设置列表 -- 固定函数 |
||||
* 弹窗的勾选回调，用于更改头部数组 |
||||
* 固定搭配，只需要更换 columnList |
||||
* */ |
||||
const setnewcolum = (newarr, headarr, type) => { |
||||
if (type == 1) { |
||||
columnList.value = newarr; |
||||
functions.setStorage(window.location.pathname + 'checkList', headarr); |
||||
} |
||||
}; |
||||
// 获取指标分类 |
||||
const Obtainclassification=()=>{ |
||||
$_selectParentCalssifyList().then(res => { |
||||
classificationoptions.value = res.data.data; |
||||
}); |
||||
} |
||||
Obtainclassification() |
||||
onLoad(); |
||||
// 多少条 |
||||
const sizeChange = (val) => { |
||||
pageSize.value=val |
||||
onLoad(); |
||||
}; |
||||
// 多少页 |
||||
const currentChange = (val) => { |
||||
current.value=val |
||||
onLoad(); |
||||
}; |
||||
const searchChangeS=()=>{ |
||||
onLoad(); |
||||
} |
||||
// 顶部搜索 |
||||
const searchChange=()=>{ |
||||
onLoad(queryTop.value) |
||||
} |
||||
// 分类编辑 |
||||
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 searchHide=()=>{ |
||||
search.value = ! search.value |
||||
} |
||||
// 分类删除 |
||||
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; |
||||
} |
||||
} |
||||
:deep(.el-card) { |
||||
height: 100% !important; |
||||
.el-card__body { |
||||
height: 100%; |
||||
.content_max { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
.el-fy { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: flex-end; |
||||
margin-bottom: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.el-fr-d{ |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
:deep(.el_left_input){ |
||||
|
||||
.el-form-item{ |
||||
margin: 4px 0; |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
.el-btn{ |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
.maboxhi{ |
||||
height: 700px !important; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue