后台管理前后端完全分离版
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.
 
 
 

481 lines
16 KiB

<template>
<!-- 考核项目录入 -->
<div class="dashboard-container">
<div class="gva-search-box">
<el-form ref="searchForm" :inline="true" :model="searchInfo">
<el-form-item label="考核项目名称">
<el-input
placeholder="请输入名称"
v-model="searchInfo.title"
clearable>
</el-input>
</el-form-item>
<el-form-item label="所属考核类别">
<el-select v-model="searchInfo.parentId" clearable placeholder="请选择状态">
<el-option
v-for="item in dutyclasslist"
:key="item.outId"
:label="item.title"
:value="item.outId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="考核项目状态">
<el-select v-model="searchInfo.state" clearable placeholder="请选择状态">
<el-option :value=1 label="正常">正常</el-option>
<el-option :value=2 label="禁止">禁止</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
<el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="showAdd()">新增</el-button>
</div>
<el-table :data="tableData">
<el-table-column align="left" label="所属考核类别" prop="parentTitle"/>
<el-table-column align="left" label="考核项目名称" prop="title"/>
<el-table-column align="left" label="考核周期" prop="outId">
<template #default="scope">
<el-tag v-if="scope.row.cycle==1">天</el-tag>
<el-tag v-if="scope.row.cycle==2">周</el-tag>
<el-tag v-if="scope.row.cycle==3">月</el-tag>
<el-tag v-if="scope.row.cycle==4">季度</el-tag>
<el-tag v-if="scope.row.cycle==5">年</el-tag>
</template>
</el-table-column>
<el-table-column align="left" label="计量单位" prop="unites"/>
<el-table-column align="left" label="辅助计数" prop="cycleattr"/>
<el-table-column align="left" label="考核项目说明" prop="content"/>
<el-table-column align="left" label="考核项目状态">
<template #default="scope">
<el-switch
inline-prompt
active-text="正常"
inactive-text="禁止"
v-model="scope.row.state"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value=1
:inactive-value=2
@change="changeVal($event,scope.row.outId)"
/>
</template>
</el-table-column>
<el-table-column align="left" fixed="right" label="操作" width="200">
<template #default="scope">
<el-button
icon="el-icon-edit"
size="small"
type="text"
@click="showEdit(scope.row)"
>编辑</el-button>
<el-button
icon="el-icon-delete"
size="small"
type="text"
@click="deleteOperate(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="gva-pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 30, 50, 100]"
:page-size="searchInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
<!-- 新增弹框 -->
<el-dialog :visible.sync="dialogFormVisible" :before-close="closeDialog" title="新增" width="30%">
<el-form ref="addForm" :model="form" :rules="rules" label-width="150px">
<el-form-item label="所属考核类别" prop="parentId">
<el-select v-model="form.parentId" clearable placeholder="请选择考核类别">
<el-option
v-for="item in dutyclasslist"
:key="item.outId"
:label="item.title"
:value="item.outId">
</el-option>
</el-select>
</el-form-item>
<el-select v-model="form.dimension" clearable placeholder="请选择维度">
<el-option
v-for="item in dutyclasslist"
:key="item.outId"
:label="item.title"
:value="item.outId">
</el-option>
</el-select>
<el-form-item label="考核项目名称" prop="title">
<el-input v-model="form.title" autocomplete="off" />
</el-form-item>
<el-form-item label="计量单位" prop="unittitle">
<el-input v-model="form.unittitle" autocomplete="off" />
</el-form-item>
<el-form-item label="考核周期" prop="title">
<el-select v-model="form.cycle" placeholder="请选择考核周期">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="辅助计数" prop="cycleattr">
<el-input v-model="form.cycleattr" autocomplete="off" />
</el-form-item>
<el-form-item label="考核项目说明" prop="content">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入内容"
v-model="form.content">
</el-input>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
<!-- 编辑弹框 -->
<el-dialog :visible.sync="editDialogFormVisible" :before-close="editCloseDialog" title="修改" width="20%">
<el-form ref="editForm" :model="editAdd" :rules="editRules" label-width="150px">
<el-form-item label="所属考核类别" prop="parentId">
<el-select v-model="editAdd.parentId" class="m-2" placeholder="Select" size="large" @change="$forceUpdate()">
<el-option
v-for="item in dutyclasslist"
:key="item.outId"
:label="item.title"
:value="item.outId"
>
</el-option>
</el-select>
<el-select v-model="editAdd.parentId" clearable placeholder="请选择维度">
<el-option
v-for="item in dutyclasslist"
:key="item.outId"
:label="item.title"
:value="item.outId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="考核项目名称" prop="title">
<el-input v-model="editAdd.title" autocomplete="off" />
</el-form-item>
<el-form-item label="计量单位" prop="unites">
<el-input v-model="editAdd.unites" autocomplete="off"/>
</el-form-item>
<el-form-item label="考核周期" prop="title">
<el-select v-model="editAdd.cycle" placeholder="请选择考核周期">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="辅助计数" prop="cycleattr">
<el-input v-model="editAdd.cycleattr" autocomplete="off" />
</el-form-item>
<el-form-item label="考核项目说明" prop="content">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入内容"
v-model="editAdd.content">
</el-input>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button size="small" @click="editCloseDialog">取 消</el-button>
<el-button size="small" type="primary" @click="editEnterDialog"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
import { dutyclasslist } from '@/api/duty/dimension'
import { assessList,addassessinfo,getassessinfo,eiteassessinfo,eiteassessstate } from '@/api/duty/project'
export default {
name: 'Dashboard',
data() {
return {
options: [{
value: 1,
label: '天'
}, {
value: 2,
label: '周'
}, {
value: 3,
label: '月'
}, {
value: 4,
label: '季度'
}, {
value: 5,
label: '年'
}],
dutyclasslist:{},
searchList:{
state: 1,
page:1,
pagesize:10000,
},
// 查询详情的数据
editFrom:{},
// 修改状态提交数据
switchFrom:{},
// 删除数据提交
deleFrom:{},
// 编辑时数据
editAdd:{
unittitle:'',
parentId:''
},
assessList:{},
// 添加数据
form:{},
// 弹窗变量
dialogFormVisible:false,
// 修改弹窗
editDialogFormVisible:false,
total: 0,
tableData:[],
// 条件查询变量
searchInfo: {
page: 1,
pagesize: 10
},
// 条件查询变量
abc:{
aaa:"111",
bbb:"222"
},
// 添加时验证规则
rules: {
title: [{ required: true, message: '必填', trigger: 'blur' }],
content: [{ required: true, message: '必填', trigger: 'blur' }],
parentId: [{ required: true, message: '必填', trigger: 'blur' }],
unittitle: [{ required: true, message: '必填', trigger: 'blur' }],
cycle: [{ required: true, message: '必填', trigger: 'blur' }],
cycleattr: [{ required: true, message: '必填', trigger: 'blur' }],
},
editRules:{
title: [{ required: true, message: '必填', trigger: 'blur' }],
content: [{ required: true, message: '必填', trigger: 'blur' }],
parentId: [{ required: true, message: '必填', trigger: 'blur' }],
unites: [{ required: true, message: '必填', trigger: 'blur' }],
cycle: [{ required: true, message: '必填', trigger: 'blur' }],
cycleattr: [{ required: true, message: '必填', trigger: 'blur' }],
}
}
},
created() {
console.log(this.$store.state.user.token)
if (this.$store.state.user.token=='') {
this.$router.push('/login')
}
// 页面渲染时获取初始数据
this.getDataList()
this.getDutyclasslist()
},
methods: {
// 获取考核纬度列表
async getDutyclasslist(){
const res = await dutyclasslist(this.searchList)
this.dutyclasslist=res.data.list
},
//删除操作
async deleteOperate(row) {
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async() => {
this.deleFrom.state=3;
this.deleFrom.outid=row.outId;
const res = await statedutyclass(this.deleFrom)
if (res.code === 0) {
this.$message({
type: 'success',
message: '删除成功!'
})
this.getDataList()
}
})
},
// 新增按钮
showAdd(){
this.dialogFormVisible=true;
console.log(this.dialogFormVisible)
},
// 编辑按钮
async showEdit(row){
this.editFrom.outid=row.outId
const res = await getassessinfo(this.editFrom)
this.editAdd = res.data
this.editAdd.parentId=res.data.parentIdStr
console.log("this.editAdd")
console.log(this.editAdd)
this.editDialogFormVisible=true;
},
// 开关状态监听
async changeVal(val,id){
console.log(val)
this.switchFrom.outid=id
if (val==1) {
this.switchFrom.state=1;
const res = await eiteassessstate(this.switchFrom)
if (res.code === 0) {
this.$message({
type: 'success',
message: '修改状态成功',
showClose: true
})
this.getDataList()
}
} else {
this.switchFrom.state=2;
const res = await eiteassessstate(this.switchFrom)
if (res.code === 0) {
this.$message({
type: 'success',
message: '修改状态成功',
showClose: true
})
this.getDataList()
}
}
},
// 重置搜索条件
onReset() {
this.searchInfo = {}
},
// 条件搜索
onSubmit() {
this.page = 1
this.pageSize = 10
this.getDataList()
},
// 日期时间戳转日期格式
formatDate(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
},
// 提交按钮
async enterDialog(){
this.$refs.addForm.validate(async valid => {
if (valid) {
this.form.cycleattr =parseInt(this.form.cycleattr)
const res = await addassessinfo(this.form)
if (res.code === 0) {
this.$message({
type: 'success',
message: '添加成功',
showClose: true
})
}
this.getDataList();
this.closeDialog();
}
})
},
// 编辑提交按钮
async editEnterDialog(){
this.$refs.editForm.validate(async valid => {
if (valid) {
this.editAdd.cycleattr =parseInt(this.editAdd.cycleattr)
this.editAdd.unittitle =this.editAdd.unites
const res = await eiteassessinfo(this.editAdd)
if (res.code === 0) {
this.$message({
type: 'success',
message: '编辑成功',
showClose: true
})
}
this.getDataList();
this.editCloseDialog();
}
})
},
// 添加框关闭
closeDialog() {
console.log("closeDialog")
this.initForm()
this.dialogFormVisible = false
},
// 修改框关闭
editCloseDialog() {
this.editInitForm()
this.editDialogFormVisible = false
},
// 添加重置表单
initForm() {
console.log("initForm")
this.$refs.addForm.resetFields()
this.form = {}
console.log(this.form)
},
// 修改重置表单
editInitForm() {
this.$refs.editForm.resetFields()
this.editAdd = {}
},
// 改变pageSize
handleSizeChange(val) {
this.searchInfo.pagesize=val
this.getDataList(this.searchInfo)
},
// 改变page
handleCurrentChange(val) {
this.searchInfo.page=val
this.getDataList(this.searchInfo)
},
// 获取初始数据
async getDataList() {
const res = await assessList(this.searchInfo)
this.tableData = res.data.list
this.total = res.data.total
this.searchInfo.page = res.data.page
this.searchInfo.pagesize = res.data.pageSize
}
}
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>