<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryRef" class="evenly-distributed-labels" :inline="true" v-show="showSearch"
|
label-width="80px" label-position="left">
|
<el-form-item label="计划名称" prop="companyName">
|
<el-input v-model="queryParams.planName" placeholder="请输入计划名称" clearable style="width: 200px"
|
@keyup.enter="handleQuery" />
|
</el-form-item>
|
<el-form-item label="计划编号" prop="companyCode">
|
<el-input v-model="queryParams.planNo" placeholder="请输入计划编号" clearable style="width: 200px"
|
@keyup.enter="handleQuery" />
|
</el-form-item>
|
<el-form-item label="执法单位" prop="executiveSection">
|
<el-input v-model="queryParams.executiveSection" placeholder="请输入执法单位" clearable style="width: 200px"
|
@keyup.enter="handleQuery" />
|
</el-form-item>
|
<el-form-item label="执法时间" style="width: 290px">
|
<el-date-picker v-model="dateRange" value-format="YYYY-MM" type="monthrange" range-separator="-"
|
start-placeholder="开始日期" end-placeholder="结束日期" @change="changeDateHandler"></el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['system:dept:add']">新增</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="warning" plain icon="Upload" @click="handleImport"
|
v-hasPermi="['system:user:import']">导入</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="success" plain icon="Download" @click="downLoadCode">导出</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="primary" plain icon="View" @click="downLoadCode">发起综合查一次</el-button>
|
</el-col>
|
</el-row>
|
|
<!-- @selection-change="handleSelectionChange" -->
|
<el-table v-if="refreshTable" v-loading="loading" :data="deptList" row-key="companyId"
|
:default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
|
<!-- <el-table-column type="selection" width="55" align="center" /> -->
|
<el-table-column prop="planNo" label="序号" width="55">
|
<template #default="scope">{{ scope.$index + 1 }}</template>
|
</el-table-column>
|
<el-table-column prop="planNo" label="计划编号" width="180"></el-table-column>
|
<el-table-column prop="planName" label="计划名称" width="180"></el-table-column>
|
<el-table-column prop="makeOrgName" label="制定机构" width="180"></el-table-column>
|
<el-table-column prop="checkdObject" label="被检查对象" width="180"></el-table-column>
|
<el-table-column prop="unifiedSocialCreditCode" label="统一社会信用代码" width="180"></el-table-column>
|
<el-table-column prop="industry" label="所属行业" width="180"></el-table-column>
|
<el-table-column prop="checkdType" label="检查方式" width="180"></el-table-column>
|
<el-table-column prop="checkdContent" label="检查内容" width="180"></el-table-column>
|
<el-table-column prop="executiveSection" label="执行科室" width="180"></el-table-column>
|
<el-table-column prop="planFrequency" label="计划频次" width="180"></el-table-column>
|
<el-table-column prop="planMonth" label="计划月份" width="180"></el-table-column>
|
<el-table-column prop="planStatus" label="状态" width="180"></el-table-column>
|
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="180">
|
<template #default="scope">
|
<el-link type="info" @click="handleView(scope.row)">查看</el-link>
|
<el-divider direction="vertical" />
|
<el-link type="primary" @click="handleAdd(scope.row)">编辑</el-link>
|
<el-divider direction="vertical" />
|
<el-link type="error" @click="handleDelete(scope.row)">删除</el-link>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination v-show="queryParams.total > 0" :total="queryParams.total" v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
<!-- 添加或修改对话框 -->
|
<el-dialog :title="title" v-model="open" width="700px" append-to-body>
|
<el-form ref="deptRef" :model="form" :rules="rules" label-width="140px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="计划编号" prop="planNo">
|
<el-input v-model="form.planNo" placeholder="请输入计划名称" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="计划名称" prop="planName">
|
<el-input v-model="form.planName" placeholder="请输入计划名称" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="制定计划的机构" prop="makeOrgName">
|
<el-input v-model="form.makeOrgName" placeholder="请输入制定计划的机构" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="被检查的对象" prop="checkdObject">
|
<el-input v-model="form.checkdObject" placeholder="请输入被检查的对象" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
|
<el-input v-model="form.unifiedSocialCreditCode" placeholder="请输入统一社会信用代码" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="所属行业" prop="industry">
|
<el-input v-model="form.industry" placeholder="请输入所属行业" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="检查方式" prop="executiveSection">
|
<el-input v-model="form.checkdType" placeholder="请输入检查方式" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="执行科室" prop="executiveSection">
|
<el-input v-model="form.executiveSection" placeholder="请输入执行科室" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="检查内容" prop="checkdContent">
|
<el-input v-model="form.checkdContent" type="textarea" placeholder="请输入检查内容" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="计划月份" prop="planMonth">
|
<el-date-picker v-model="form.planMonth" type="month" format="YYYY-MM" value-format="YYYY-MM"
|
placeholder="请选择计划月份" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="计划频率" prop="planFrequency">
|
<el-input v-model="form.planFrequency" placeholder="请输入计划频率" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="状态" prop="planStatus">
|
<el-input v-model="form.planStatus" placeholder="请输入状态" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 计划导入对话框 -->
|
<el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
|
<el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
|
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
|
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<template #tip>
|
<div class="el-upload__tip text-center">
|
<div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的计划数据</div>
|
<span>仅允许导入xls、xlsx格式文件。</span>
|
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
|
@click="importTemplate">下载模板</el-link>
|
</div>
|
</template>
|
</el-upload>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
<el-button @click="upload.open = false">取 消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 计划详细 -->
|
<el-dialog title="计划详情" v-model="planOpen" width="700px" append-to-body>
|
<el-form label-width="140px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="计划编号：">{{ planDetail.planNo }}</el-form-item>
|
<el-form-item label="计划名称：">{{ planDetail.planName }}</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="制定计划的机构：">{{ planDetail.makeOrgName }}</el-form-item>
|
<el-form-item label="被检查的对象：">{{ planDetail.checkdObject }}</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="统一社会信用代码：">{{ planDetail.unifiedSocialCreditCode }}</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="所属行业：">{{ planDetail.industry }}</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="检查方式：">{{ planDetail.checkdType }}</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="执行科室：">{{ planDetail.executiveSection }}</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="检查内容：">{{ planDetail.checkdContent }}</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="计划月份：">{{ planDetail.planMonth }}</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="计划频率：">{{ planDetail.planFrequency }}</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="状态：">{{ planDetail.planStatus }}</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="planOpen = false; planDetail = {}">关 闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="Dept">
|
import { getToken } from "@/utils/auth";
|
import { listManage, addManage, getManage, updateManage, delManage, exportTemplate, exportManage } from "@/api/system/manage";
|
|
import { computed } from "vue";
|
import useSettingsStore from "@/store/modules/settings";
|
// import { download } from '@/utils/request'; // 下载文件
|
import { download as downloadHttp } from '@/utils/request'
|
const { proxy } = getCurrentInstance();
|
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
|
const deptList = ref([]);
|
const open = ref(false);
|
const loading = ref(true);
|
const showSearch = ref(true);
|
const title = ref("");
|
const isExpandAll = ref(false);
|
const refreshTable = ref(true);
|
const planOpen = ref(false);
|
const planDetail = ref({});
|
const dateRange = ref([]);
|
const data = reactive({
|
form: {},
|
queryParams: {
|
planNo: '',
|
planName: '',
|
executiveSection: '',
|
value1: '',
|
pageNum: 1,
|
pageSize: 10,
|
total: 1
|
},
|
rules: {
|
planNo: [{ required: true, message: "计划编号不能为空", trigger: "blur" }],
|
planName: [{ required: true, message: "计划名称不能为空", trigger: "blur" }],
|
makeOrgName: [{ required: true, message: "制定计划的机构不能为空", trigger: "blur" }],
|
checkdObject: [{ required: true, message: "被检查对象不能为空", trigger: "blur" }],
|
unifiedSocialCreditCode: [{ required: true, message: "统一社会信用代码不能为空", trigger: "blur" }],
|
industry: [{ required: true, message: "所属行业不能为空", trigger: "blur" }],
|
checkdContent: [{ required: true, message: "检查内容不能为空", trigger: "blur" }],
|
executiveSection: [{ required: true, message: "执行科室不能为空", trigger: "blur" }],
|
planFrequency: [{ required: true, message: "计划频次不能为空", trigger: "blur" }],
|
planMonth: [{ required: true, message: "计划月份不能为空", trigger: "blur" }],
|
checkdType: [{ required: true, message: "检查方式不能为空", trigger: "blur" }],
|
planStatus: [{ required: true, message: "状态不能为空", trigger: "blur" }],
|
},
|
});
|
|
// 月份选择
|
const changeDateHandler = (value) => {
|
data.queryParams.planMonthStart = value[0]
|
data.queryParams.planMonthEnd = value[1]
|
}
|
|
/*** 计划导入参数 */
|
const upload = reactive({
|
// 是否显示弹出层（用户导入）
|
open: false,
|
// 弹出层标题（用户导入）
|
title: "",
|
// 是否禁用上传
|
isUploading: false,
|
// 是否更新已经存在的用户数据
|
updateSupport: 0,
|
// 设置上传的请求头部
|
headers: { Authorization: "Bearer " + getToken() },
|
// 上传的地址
|
url: import.meta.env.VITE_APP_BASE_API + "/system/manage/importData",
|
});
|
/**文件上传中处理 */
|
const handleFileUploadProgress = (event, file, fileList) => {
|
upload.isUploading = true;
|
};
|
/** 文件上传成功处理 */
|
const handleFileSuccess = (response, file, fileList) => {
|
upload.open = false;
|
upload.isUploading = false;
|
proxy.$refs["uploadRef"].handleRemove(file);
|
proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {
|
dangerouslyUseHTMLString: true,
|
});
|
getList();
|
};
|
const { queryParams, form, rules } = toRefs(data);
|
/** 查询计划列表 */
|
function getList() {
|
loading.value = true;
|
listManage(queryParams.value).then((response) => {
|
deptList.value = response.rows
|
data.queryParams.total = response.total
|
loading.value = false;
|
});
|
}
|
/** 取消按钮 */
|
function cancel() {
|
open.value = false;
|
reset();
|
getList();
|
}
|
/** 表单重置 */
|
function reset() {
|
form.value = {
|
planNo: '', // 计划编号
|
planName: '', // 计划名称
|
makeOrgName: '', // 制定机构
|
checkdObject: '', // 被检查对象
|
unifiedSocialCreditCode: '', // 统一社会信用代码
|
industry: '', // 所属行业
|
checkdContent: '', // 检查内容
|
executiveSection: '', // 执行科室
|
planFrequency: '', // 计划频次
|
planMonth: '', // 计划月份
|
checkdType: '', // 检查方式
|
planStatus: '', // 状态
|
};
|
proxy.resetForm("deptRef");
|
}
|
const queryRef = ref()
|
/** 搜索按钮操作 */
|
function handleQuery() {
|
getList();
|
}
|
/** 重置按钮操作 */
|
function resetQuery() {
|
queryRef.value.resetFields();
|
dateRange.value = [];
|
queryParams.value = {
|
planNo: '', // 计划编号
|
planName: '', // 计划名称
|
executiveSection: '', // 执法单位
|
planMonthStart: '', // 计划开始月份
|
planMonthEnd: '', // 计划结束月份
|
}
|
handleQuery();
|
}
|
function getDetails(id) {
|
getManage(id).then((response) => {
|
form.value = response.data;
|
open.value = true;
|
});
|
}
|
|
/** 详细按钮操作 */
|
function handleView(row) {
|
planOpen.value = true;
|
planDetail.value = row
|
planOpen.value = true;
|
}
|
|
/** 新增按钮操作 */
|
function handleAdd(row) {
|
if (row) {
|
title.value = "编辑计划";
|
getDetails(row.id)
|
} else {
|
// form.value = {
|
// companyStatus: 0
|
// }
|
title.value = "添加计划";
|
open.value = true;
|
}
|
}
|
|
/** 提交按钮 */
|
function submitForm() {
|
proxy.$refs["deptRef"].validate((valid) => {
|
if (valid) {
|
if (form.value.id != undefined) {
|
updateManage(form.value).then((response) => {
|
proxy.$modal.msgSuccess("修改成功");
|
open.value = false;
|
getList();
|
});
|
} else {
|
addManage(form.value).then((response) => {
|
proxy.$modal.msgSuccess("新增成功");
|
open.value = false;
|
getList();
|
});
|
}
|
}
|
});
|
}
|
/** 删除按钮操作 */
|
function handleDelete(row) {
|
proxy.$modal
|
.confirm('是否确认删除该数据?')
|
.then(function () {
|
return delManage(row.id);
|
})
|
.then(() => {
|
getList();
|
proxy.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => { });
|
}
|
|
/** 导入按钮操作 */
|
function handleImport() {
|
upload.title = "计划导入";
|
upload.open = true;
|
}
|
|
/** 提交上传文件 */
|
function submitFileForm() {
|
proxy.$refs["uploadRef"].submit();
|
}
|
|
/** 下载模板操作 */
|
function importTemplate() {
|
exportTemplate().then(val => {
|
downloadHttp('/tool/file/download', {
|
fileName: val.msg,
|
delete: true
|
}, "计划信息模板.xlsx")
|
})
|
}
|
|
|
// let valueArr = []
|
function downLoadCode() {
|
exportManage().then(val => {
|
downloadHttp('/tool/file/download', {
|
fileName: val.msg,
|
delete: true
|
}, "计划信息.xlsx")
|
})
|
}
|
|
|
// function handleSelectionChange(e) {
|
// valueArr = e.map(item => item.id)
|
// }
|
|
getList();
|
function selectableFun(e) {
|
console.log(e)
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.evenly-distributed-labels {
|
:deep() {
|
.el-form-item__label {
|
position: relative;
|
/* 设置相对定位作为星号的定位基准 */
|
text-align: justify;
|
text-align-last: justify;
|
/* 确保最后一行也两端对齐 */
|
padding-left: 10px;
|
/* 为星号预留空间 */
|
display: inline-block;
|
}
|
}
|
}
|
</style>
|
