ah-jjzhgd-web/src/views/dataManage/overallEffectiveness/index.vue

335 lines
10 KiB
Vue

<template>
<!-- 数据分析 整体效能分析 -->
<div class="app-container">
<!-- 搜索 -->
<el-form label-width="auto" inline :model="queryParams">
<el-form-item label="综合查询">
<el-input
clearable
v-model="queryParams.keyWord"
placeholder="请输入关键字"
style="width: 200px"
@keyup.enter.native="onHandleQuery"
/>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" @click="onHandleQuery">
查询
</el-button>
<el-button
size="mini"
type="primary"
icon="el-icon-plus"
@click="onHandleAdd"
>
新增
</el-button>
</el-form-item>
</el-form>
<el-table border :data="list" v-loading="loading">
<el-table-column
label="序号"
type="index"
width="60"
align="center"
/>
<el-table-column label="工程名称" prop="proName" align="center" />
<el-table-column label="提醒时间" prop="txTime" align="center" />
<el-table-column
label="提醒内容"
prop="content"
align="center"
show-overflow-tooltip
/>
<el-table-column label="操作" align="center" width="140">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
style="padding: 6px 6px"
@click="onHandleEdit(scope.row)"
>
编辑
</el-button>
<el-button
type="danger"
size="mini"
style="padding: 6px 6px"
@click="onHandleDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
:total="total"
@pagination="getList"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
/>
<!-- 新增/编辑弹框 -->
<el-dialog
append-to-body
width="40%"
v-if="dialogVisible"
:visible.sync="dialogVisible"
:title="`${dialogTitle}整体效能`"
>
<el-form
:model="form"
:rules="rules"
ref="formRef"
label-width="auto"
>
<el-form-item label="工程名称" prop="bidCode">
<el-select
style="width: 100%"
v-model="form.bidCode"
placeholder="请选择工程名称"
>
<el-option
v-for="item in projectList"
:key="item.bidCode"
:label="item.proName"
:value="item.bidCode"
/>
</el-select>
</el-form-item>
<el-form-item label="提醒时间" prop="txTime">
<el-date-picker
v-model="form.txTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择提醒时间"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="提醒内容" prop="content">
<el-input
v-model="form.content"
type="textarea"
:rows="4"
placeholder="请输入提醒内容"
clearable
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button
type="primary"
:loading="submitting"
@click="onHandleSubmit"
>
确定
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getOverallEffectivenessListAPI,
addOverallEffectivenessAPI,
editOverallEffectivenessAPI,
deleteOverallEffectivenessAPI,
} from '@/api/dataManage/overallEffectiveness'
import { getProjectSelectListAPI } from '@/api/dataManage/common'
export default {
name: 'OverallEffectiveness',
data() {
return {
loading: false,
projectList: [],
list: [],
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
keyWord: '',
},
dialogVisible: false,
dialogTitle: '新增',
submitting: false,
editId: null,
form: {
bidCode: '',
txTime: '',
content: '',
},
rules: {
bidCode: [
{
required: true,
message: '请选择工程名称',
trigger: 'change',
},
],
txTime: [
{
required: true,
message: '请选择提醒时间',
trigger: 'change',
},
],
content: [
{
required: true,
message: '请输入提醒内容',
trigger: 'blur',
},
],
},
}
},
created() {
this.getList()
this.getProjectSelectList()
},
methods: {
// 获取工程下拉列表
async getProjectSelectList() {
const res = await getProjectSelectListAPI()
this.projectList = res.data
},
// 获取列表
async getList() {
this.loading = true
try {
const res = await getOverallEffectivenessListAPI(
this.queryParams,
)
this.list = res.rows || []
this.total = res.total || 0
} catch (error) {
this.$message.error('获取列表失败')
} finally {
this.loading = false
}
},
// 查询
onHandleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
// 新增
onHandleAdd() {
this.dialogTitle = '新增'
this.editId = null
this.form = {
bidCode: '',
txTime: '',
content: '',
}
this.$nextTick(() => {
if (this.$refs.formRef) {
this.$refs.formRef.clearValidate()
}
})
this.dialogVisible = true
},
// 编辑
onHandleEdit(row) {
this.dialogTitle = '编辑'
this.editId = row.id
this.form = {
bidCode: row.bidCode || '',
txTime: row.txTime || '',
content: row.content || '',
}
this.$nextTick(() => {
if (this.$refs.formRef) {
this.$refs.formRef.clearValidate()
}
})
this.dialogVisible = true
},
// 删除
onHandleDelete(row) {
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
try {
const res = await deleteOverallEffectivenessAPI({
id: row.id,
})
if (res.code === 200) {
this.$message.success('删除成功')
this.getList()
} else {
this.$message.error(res.msg || '删除失败')
}
} catch (error) {
this.$message.error('删除失败')
}
})
.catch(() => {})
},
// 提交
async onHandleSubmit() {
this.$refs.formRef.validate(async (valid) => {
if (!valid) return
this.submitting = true
try {
const params = { ...this.form }
if (this.editId) {
params.id = this.editId
}
const API = this.editId
? editOverallEffectivenessAPI
: addOverallEffectivenessAPI
const res = await API(params)
if (res.code === 200) {
this.$message.success(
this.editId ? '编辑成功' : '新增成功',
)
this.dialogVisible = false
this.getList()
} else {
this.$message.error(res.msg || '操作失败')
}
} catch (error) {
this.$message.error('操作失败')
} finally {
this.submitting = false
}
})
},
},
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog {
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
.el-dialog__body {
flex: 1 !important;
overflow-y: scroll !important;
padding: 20px 20px !important;
box-sizing: border-box !important;
}
}
</style>