完整代码如下
<template>
<div class="box">
<!-- 查询表单 -->
<el-form :model="searchForm" :inline="true" class="demo-form-inline">
<el-form-item label="规则时间：">
<el-date-picker
v-model="searchForm.ruleTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
<el-form-item label="所属区域： ">
<el-cascader v-model="areaIds" :options="deptOptions" :props="{ checkStrictly: true, value: 'id' }" clearable
@change="getAreaId">
<template slot-scope="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
<!-- 列表 -->
<el-table :data="tableData.list" :header-cell-style="{background: '#F5F6F7',color: '#333','font-weight': 500}">
<el-table-column type="index" label="序号" width="50" align="center"/>
<el-table-column label="规则时间" align="center">
<template slot-scope="scope">
{{ scope.row.startTime }} 至 {{ scope.row.endTime }}
</template>
</el-table-column>
<el-table-column label="所属区域" align="center">
<template slot-scope="scope">
{{ scope.row.areaName || scope.row.areaId }}
</template>
</el-table-column>
<el-table-column prop="createName" label="操作人" align="center"></el-table-column>
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
<el-table-column prop="status" label="状态" align="center">
<template slot-scope="scope">
<span :class="scope.row.status === 1 ? 'status-enabled' : 'status-disabled'">
{{ scope.row.status === 1 ? '启用' : '停用' }}
</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
<el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="tableData.pageNo" :limit.sync="tableData.pageSize" @pagination="getList" />
<!-- 新增/编辑弹窗 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="685px" :close-on-click-modal="true" class="dialog">
<el-form :model="form" :rules="rules" class="dialog-form" label-width="93px">
<el-form-item label="规则区域：" prop="areaId">
<el-cascader v-model="formAreaIds" :options="deptOptions" :props="{ checkStrictly: true, value: 'id' }" clearable
@change="getFormAreaId">
<template slot-scope="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
<el-form-item label="规则时间：" prop="ruleTime">
<el-date-picker
v-model="form.ruleTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
class="w-full"
></el-date-picker>
</el-form-item>
<el-form-item label="能力完好：" prop="completeDisability">
<el-input v-model="form.completeDisability" placeholder="请输入" class="w-full">
<template slot="suffix">
<slot name="completeDisabilityUnit"><span>元/月</span></slot>
</template>
</el-input>
</el-form-item>
<el-form-item label="轻度失能：" prop="mildDisability">
<el-input v-model="form.mildDisability" placeholder="请输入" class="w-full">
<template slot="suffix">
<slot name="mildDisabilityUnit"><span>元/月</span></slot>
</template>
</el-input>
</el-form-item>
<el-form-item label="中度失能：" prop="moderateDisability">
<el-input v-model="form.moderateDisability" placeholder="请输入" class="w-full"></el-input>
</el-form-item>
<el-form-item label="重度失能：" prop="severeDisability">
<el-input v-model="form.severeDisability" placeholder="请输入" class="w-full"></el-input>
</el-form-item>
<el-form-item label="完全失能：" prop="totalIncapacity">
<el-input v-model="form.totalIncapacity" placeholder="请输入" class="w-full"></el-input>
</el-form-item>
<el-form-item label="操作人：" prop="createName">
<el-input v-model="form.createName" placeholder="请输入" class="w-full"></el-input>
</el-form-item>
<el-form-item label="状态：">
<el-radio v-model="form.status" :label="1">启用</el-radio>
<el-radio v-model="form.status" :label="0">停用</el-radio>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleConfirm">确定</el-button>
<el-button @click="handleCancel">取消</el-button>
</div>
</el-dialog>
<!-- 查看弹窗 -->
<el-dialog title="查看详情" :visible.sync="viewDialogVisible" width="685px" :close-on-click-modal="true" class="dialog">
<el-form :model="viewForm" class="dialog-form" label-width="93px" :disabled="true">
<el-form-item label="规则区域：">
<el-select v-model="viewForm.areaName" disabled class="w-full">
<el-option :label="viewForm.areaName" :value="viewForm.areaName"></el-option>
</el-select>
</el-form-item>
<el-form-item label="规则时间：">
<el-date-picker
v-model="viewForm.ruleTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
disabled
class="w-full"
></el-date-picker>
</el-form-item>
<el-form-item label="能力完好：">
<el-input v-model="viewForm.completeDisability" disabled class="w-full">
<template slot="suffix">
<slot name="viewCompleteDisabilityUnit"><span>元/月</span></slot>
</template>
</el-input>
</el-form-item>
<el-form-item label="轻度失能：">
<el-input v-model="viewForm.mildDisability" disabled class="w-full">
<template slot="suffix">
<slot name="viewMildDisabilityUnit"><span>元/月</span></slot>
</template>
</el-input>
</el-form-item>
<el-form-item label="中度失能：">
<el-input v-model="viewForm.moderateDisability" disabled class="w-full"></el-input>
</el-form-item>
<el-form-item label="重度失能：">
<el-input v-model="viewForm.severeDisability" disabled class="w-full"></el-input>
</el-form-item>
<el-form-item label="完全失能：">
<el-input v-model="viewForm.totalIncapacity" disabled class="w-full"></el-input>
</el-form-item>
<el-form-item label="内容：">
<el-input v-model="viewForm.content" type="textarea" disabled class="w-full"></el-input>
</el-form-item>
<el-form-item label="状态：">
<el-radio v-model="viewForm.status" :label="1" disabled>启用</el-radio>
<el-radio v-model="viewForm.status" :label="0" disabled>停用</el-radio>
</el-form-item>
<el-form-item label="操作人：">
<el-input v-model="viewForm.createName" disabled class="w-full"></el-input>
</el-form-item>
<el-form-item label="检查人：">
<el-input v-model="viewForm.personName" disabled class="w-full"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="viewDialogVisible = false">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Cookies from "js-cookie";
import request from "@/utils/request";
import { deptTreeList } from "@/api/elderlyResources.js";
export default {
name: 'institutionalOperationSubsidy',
props: {
id: {
type: [Number, String],
default: null
},
chioseTreeItem: {
type: Object,
default: () => ({})
}
},
data() {
return {
searchForm:{},
deptOptions:[],
areaIds: [],
formAreaIds: [],
tableData:{
list:[],
total:0,
pageNo:1,
pageSize:10,
},
dialogVisible: false,
viewDialogVisible: false,
dialogTitle: '新增',
form: {},
viewForm: {},
areaId: null,
editId: null,
rules: {
areaId: [{ required: true, message: '请选择区域', trigger: 'change' }],
ruleTime: [{ required: true, message: '请选择规则时间', trigger: 'change' }],
completeDisability: [{ required: true, message: '请输入能力完好', trigger: 'change' }],
mildDisability: [{ required: true, message: '请输入轻度失能', trigger: 'change' }],
moderateDisability: [{ required: true, message: '请输入中度失能', trigger: 'change' }],
severeDisability: [{ required: true, message: '请输入重度失能', trigger: 'change' }],
totalIncapacity: [{ required: true, message: '请输入完全失能', trigger: 'change' }],
content: [{ required: true, message: '请输入内容', trigger: 'change' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }],
}
}
},
mounted() {
this.areaId = Cookies.get("areaId");
this.getAreaTree();
this.getList();
},
// watch: {
// id: function(newVal) {
// this.getList()
// },
// chioseTreeItem: function(newVal) {
// this.getList()
// }
// },
methods: {
// 获取区域树
getAreaTree() {
deptTreeList({}).then(res => {
if (res.data.length > 0) {
if (res.data[0].label == '系统') {
this.deptOptions = res.data[0].children
} else {
this.deptOptions = res.data
}
}
})
},
// 级联选择区域
getAreaId(val) {
if (val && val.length > 0) {
this.searchForm.areaId = val[val.length - 1]
} else {
this.searchForm.areaId = ''
}
},
// 弹窗级联选择区域
getFormAreaId(val) {
if (val && val.length > 0) {
this.form.areaId = val[val.length - 1]
} else {
this.form.areaId = ''
}
},
// 查询
handleSearch() {
this.tableData.pageNo = 1;
this.getList();
},
// 重置
handleReset() {
this.searchForm = {};
this.areaIds = [];
this.tableData.pageNo = 1;
this.getList();
},
// 列表数据
getList() {
const params = {
pageNo: this.tableData.pageNo,
pageSize: this.tableData.pageSize,
areaId: Number(this.areaId),
...this.searchForm
};
if (params.ruleTime && Array.isArray(params.ruleTime)) {
params.startTime = params.ruleTime[0];
params.endTime = params.ruleTime[1];
delete params.ruleTime;
}
request({
url: "/sx/operating/subsidy/list",
method: "post",
data: params
}).then(res => {
console.log(res,"补贴规则列表");
this.tableData.list = res.data.list || [];
this.tableData.total = res.data.total || 0;
}).catch(err => {
console.error('获取列表失败', err);
});
},
// 新增
handleAdd() {
this.dialogTitle = '新增';
this.editId = null;
this.form = {
areaId: Number(this.areaId),
status: 1,
createName: Cookies.get("userName") || ''
};
this.formAreaIds = [Number(this.areaId)];
this.dialogVisible = true;
},
// 确定
handleConfirm() {
if (!this.validateForm()) {
return;
}
if (this.editId) {
this.updateSubsidy();
} else {
this.insertSubsidy();
}
},
// 表单验证
validateForm() {
if (!this.form.areaId) {
this.$message.error('规则区域不能为空');
return false;
}
if (!this.form.ruleTime || !this.form.ruleTime[0] || !this.form.ruleTime[1]) {
this.$message.error('规则时间不能为空');
return false;
}
if (!this.form.completeDisability && this.form.completeDisability !== 0) {
this.$message.error('能力完好不能为空');
return false;
}
if (!this.form.mildDisability && this.form.mildDisability !== 0) {
this.$message.error('轻度失能不能为空');
return false;
}
if (!this.form.moderateDisability && this.form.moderateDisability !== 0) {
this.$message.error('中度失能不能为空');
return false;
}
if (!this.form.severeDisability && this.form.severeDisability !== 0) {
this.$message.error('重度失能不能为空');
return false;
}
if (!this.form.totalIncapacity && this.form.totalIncapacity !== 0) {
this.$message.error('完全失能不能为空');
return false;
}
return true;
},
// 取消
handleCancel() {
this.dialogVisible = false;
this.form = {};
this.formAreaIds = [];
},
// 查看
handleView(row) {
request({
url: `/sx/operating/subsidy/get/${row.id}`,
method: "get"
}).then(res => {
console.log(res,"补贴规则详情");
this.viewForm = res.data || {};
this.viewDialogVisible = true;
}).catch(err => {
this.$message.error('查看失败');
console.error('查看失败', err);
});
},
// 编辑
handleEdit(row) {
this.dialogTitle = '编辑';
this.editId = row.id;
this.form = { ...row };
if (row.startTime && row.endTime) {
this.form.ruleTime = [row.startTime, row.endTime];
}
this.formAreaIds = [row.areaId];
this.dialogVisible = true;
},
// 删除
handleDelete(row) {
this.$confirm('确定删除该补贴规则吗？', '提示', {
type: 'warning'
}).then(() => {
request({
url: `/sx/operating/subsidy/delete/${row.id}`,
method: "delete"
}).then(res => {
this.$message.success('删除成功');
this.getList();
}).catch(err => {
this.$message.error('删除失败');
console.error('删除失败', err);
});
}).catch(() => {
this.$message.info('已取消删除');
});
},
// 新增补贴规则
insertSubsidy() {
const data = { ...this.form };
if (data.ruleTime && Array.isArray(data.ruleTime)) {
data.startTime = data.ruleTime[0];
data.endTime = data.ruleTime[1];
delete data.ruleTime;
}
request({
url: "/sx/operating/subsidy/insert",
method: "post",
data: data
}).then(res => {
this.$message.success('新增成功');
this.dialogVisible = false;
this.form = {};
this.getList();
}).catch(err => {
this.$message.error('新增失败');
console.error('新增失败', err);
});
},
// 更新补贴规则
updateSubsidy() {
const data = { ...this.form };
if (data.ruleTime && Array.isArray(data.ruleTime)) {
data.startTime = data.ruleTime[0];
data.endTime = data.ruleTime[1];
delete data.ruleTime;
}
request({
url: "/sx/operating/subsidy/update",
method: "post",
data: data
}).then(res => {
this.$message.success('更新成功');
this.dialogVisible = false;
this.form = {};
this.editId = null;
this.getList();
}).catch(err => {
this.$message.error('更新失败');
console.error('更新失败', err);
});
}
}
}
</script>
<style lang="scss" scoped>
.box {
width: 100%;
height: 100%;
::v-deep.el-dialog__body {
padding: 15px 30px !important;
}
.demo-form-inline{
::v-deep .el-form-item
{
padding-right: 0px !important;
}
}
.dialog {
::v-deep.el-select{
display: inline-block;
position: relative;
width: 480px;
}
::v-deep .el-input {
width: 480px;
}
::v-deep .el-form-item {
padding-right: 0px !important;
}
::v-deep .el-range-editor.el-input__inner {
width: 480px;
}
::v-deep .el-form-item--required:not(.is-no-asterisk) .el-form-item__label::before {
content: '*';
color: #FF0000;
margin-right: 4px;
}
::v-deep .el-input__suffix {
right: 10px;
transform: translateY(-50%);
top: 50%;
position: absolute;
}
::v-deep .el-input__suffix-inner {
display: inline-flex;
align-items: center;
}
}
}
.status-enabled {
color: #67c23a;
}
.status-disabled {
color: #f56c6c;
}
</style>
