el-select 多选: --- 数据是数组
<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" > <el-form-item label="主题" prop="title"> <el-input v-model="queryParams.title" placeholder="请输入警示教育主题" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="数据来源" prop="origin"> <el-input v-model="queryParams.origin" placeholder="请输入数据来源" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <!-- <el-form-item label="审核状态" prop="status"> <el-select v-model="queryParams.status" placeholder="审核状态" clearable style="width: 240px" > <el-option v-for="dict in dict.type.status" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item>--> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @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="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['party:warning:add']" >新增</el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['party:warning:edit']" >修改</el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['party:warning:remove']" >删除</el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['party:warning:export']" >导出</el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="warningList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="主题" align="center" prop="title" /> <el-table-column label="数据来源" align="center" prop="origin" /> <el-table-column label="开展组织名称" align="center" prop="orgName" /> <el-table-column label="参加人员" align="center" prop="unionUserName" /> <el-table-column label="开展时间" align="center" prop="developTime" /> <el-table-column label="学习教育覆盖率" align="center" prop="cover" /> <el-table-column label="附件" align="center" prop="fileName"> <template slot-scope="scope"> <span class="span-text" v-if="scope.row.filePath !== undefined"> <div v-for="(item, index) in scope.row.fileName" :key="index" style="color: red;cursor: pointer;" @click="handleDownloadTable(item, scope.row.filePath.split(',')[index] )" >{{ item}}</div> </span> </template> </el-table-column> <el-table-column label="超级链接" align="center" prop="hyperLink" /> <!-- <el-table-column label="审核状态" align="center" prop="status"> <template slot-scope="scope"> <dict-tag :options="dict.type.status" :value="scope.row.status" /> </template> </el-table-column>--> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="openDetail(scope.row, true)" v-hasPermi="['party:warning:query']" >查看详情</el-button> <el-button v-if="scope.row.createdBy == userId" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row, false)" v-hasPermi="['party:warning:edit']" >修改</el-button> <el-button v-if="scope.row.createdBy == userId" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['party:warning:remove']" >删除</el-button> <el-button size="mini" type="text" icon="el-icon-lock" @click="handleAssignPermissions(scope.row)" v-hasPermi="['party:feedback:distribution']" >分配权限</el-button> <el-button size="mini" type="text" icon="el-icon-lock" v-if=" scope.row.feedBackStatus != null && scope.row.feedBackStatus == '0' && scope.row.createdBy != userId" @click="handleFeedback(scope.row)" v-hasPermi="['party:feedback:feedback']" >反馈</el-button> <!-- <el-button v-if="scope.row.status == 2 || scope.row.status == 3|| scope.row.status == 4" size="mini" type="text" icon="el-icon-view" @click="handleWarning(scope.row)" v-hasPermi="['party:warning:getWarningDetail']" >查看进度</el-button> <el-button v-if=" scope.row.status == 1 || scope.row.status == 4 " size="mini" type="text" icon="el-icon-edit" @click="handleSubmitReview(scope.row)" v-hasPermi="['party:warning:submit']" >提交审核</el-button>--> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改党风廉政建设及反腐败工作_警示教育对话框 --> <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form-item label="主题" prop="title"> <el-input v-model="form.title" placeholder="请输入主题" /> </el-form-item> <!-- <el-form-item label="教育名称" prop="name"> <el-input v-model="form.name" placeholder="请输入警示教育名称" /> </el-form-item>--> <el-form-item label="数据来源" prop="origin" v-if="form.origin!=null"> <el-input v-model="form.origin" placeholder="请输入数据来源" disabled /> </el-form-item> <el-form-item label="开展组织名称" prop="orgId"> <treeselect v-model="form.orgId" :options="deptOptions" :show-count="true" placeholder="请选择组织" /> </el-form-item> <el-form-item label="参加人员" prop="unionUserId"> <el-select v-model="form.unionUserId" placeholder="请选择人员" filterable clearable multiple style="width:100%" :filter-method="userFilter" > <el-option v-for="dict in renderOption" :key="dict.userId" :label="dict.label" :value="dict.userId" /> </el-select> </el-form-item> <el-form-item label="开展时间" prop="developTime"> <el-date-picker clearable v-model="form.developTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择开展时间" ></el-date-picker> </el-form-item> <el-form-item label="学习教育覆盖率" prop="cover"> <el-input v-model="form.cover" placeholder="请输入学习教育覆盖率" /> </el-form-item> <el-form-item label="附件" prop="filePath"> <file-upload v-model="form.filePath" /> </el-form-item> <el-form-item label="超级链接" prop="hyperLink"> <el-input v-model="form.hyperLink" placeholder="请输入超级链接" /> </el-form-item> <el-form-item label="教育概况" prop="overview"> <editor v-model="form.overview" :min-height="192" :read-only="true" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> <!-- 查看警示教育对话框 --> <warning-dialog :detail="detail" :dialogTitle="title" :detailId="detailId" @dialogChange="dialogChange" @handleDetail="handleDetail" ></warning-dialog> <!-- <el-dialog :title="title" :visible.sync="detail" width="800px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form-item label="主题:" prop="title"> <span style="text-decoration: underline">{{form.title}}</span> </el-form-item> <el-form-item label="数据来源:" prop="title"> <span style="text-decoration: underline">{{form.origin}}</span> </el-form-item> <el-form-item label="开展组织名称:" prop="orgName"> <span style="text-decoration: underline">{{form.orgName}}</span> </el-form-item> <el-form-item label="参加人员:" prop="unionUserName"> <span style="text-decoration: underline">{{form.unionUserName}}</span> </el-form-item> <el-form-item label="开展时间:" prop="developTime"> <span style="text-decoration: underline">{{form.developTime}}</span> </el-form-item> <el-form-item label="学习教育覆盖率:" prop="cover"> <span style="text-decoration: underline">{{form.cover}}</span> </el-form-item> <el-form-item label="文件上传" prop="filePath"> <file-upload v-model="form.filePath" :disabled="detail == true" /> </el-form-item> <el-form-item label="超级链接:" prop="hyperLink"> <span style="text-decoration: underline">{{form.hyperLink}}</span> </el-form-item> <el-form-item label="概况:" prop="overview"> <editor v-model="form.overview" :min-height="192" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancelDetail">取 消</el-button> </div> </el-dialog>--> <el-dialog title="查看流程进度" :visible.sync="timelineOpen" width="800px" append-to-body> <el-timeline :reverse="false"> <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" :color="activity.color" placement="top" > <el-card> <h4 v-if="activity.type == 'startEvent'">流程开始:{{ activity.content }}</h4> <h4 v-else-if="activity.type == 'userTask'">流程审核:{{ activity.content }}</h4> <h4 v-else-if="activity.type == 'endEvent'">流程结束:{{ activity.content }}</h4> <h4 v-else>其他流程:{{ activity.content }}</h4> <p v-if="activity.operator !== '' && activity.operator !== undefined"> <template v-if=" activity.finishTime !== '' && activity.finishTime !== undefined " >于 {{ activity.finishTime }}, {{ activity.operator }}</template> <template v-else>{{ activity.operator }} 处理中</template> </p> <p v-else-if="activity.type == 'userTask'">等待审核</p> <p v-else>{{ activity.timestamp }}</p> </el-card> </el-timeline-item> </el-timeline> </el-dialog> <!-- 分配权限开始 --> <el-dialog title="分配权限" :visible.sync="assignPermissions" width="1200px" append-to-body> <div class="el-dialog-div"> <assign-permissions ref="assignPermissions" :key="assignPermissionsKey" :newId="newId" :menuName="menuName" :title="title" :byBranchGetTreeUrl="byBranchGetTreeUrl" :byBranchGetallotUrl="byBranchGetallotUrl" :byBranchGetAlreadyAllotUrl="byBranchGetAlreadyAllotUrl" :byBranchSaveDataUrl="byBranchSaveDataUrl" :byRoleGetTreeUrl="byRoleGetTreeUrl" :byRoleGetallotUrl="byRoleGetallotUrl" :byRoleGetAlreadyAllotUrl="byRoleGetAlreadyAllotUrl" :byRoleSaveDataUrl="byRoleSaveDataUrl" @closeAssignPermissions="closeAssignPermissions" ></assign-permissions> </div> <span slot="footer" class="dialog-footer"> <el-button @click="assignPermissions = false">取 消</el-button> <el-button type="primary" @click="handleSaveBtn()">保 存</el-button> </span> </el-dialog> <!-- 分配权限结束 --> <!-- 反馈开始 --> <el-dialog title="反馈" :visible.sync="feedbackDialogVisible" width="800px" append-to-body> <el-row> <el-form label-width="80px"> <el-form-item label="标题:">{{ feedbackTitle }}</el-form-item> <el-form-item label="反馈内容:"> <el-input type="textarea" :rows="6" v-model="feedBackContent"></el-input> </el-form-item> </el-form> </el-row> <span slot="footer" class="dialog-footer"> <el-button @click="feedbackDialogVisible = false">取 消</el-button> <el-button type="primary" @click="handleFeedbackSaveBtn()">保 存</el-button> </span> </el-dialog> <!-- 反馈结束 --> </div> </template> <script> import { listWarning, getWarning, delWarning, addWarning, updateWarning, getWarningDetail, submitContent } from "@/api/party/dflz/warning"; import { downloadFile, postSaveData } from "@/api/common/common"; import { mapState } from "vuex"; import { getAllUser, getAllUserNew } from "@/api/system/user"; import { treeselect } from "@/api/system/dept"; import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; export default { name: "Warning", dicts: ["status"], components: { Treeselect }, computed: { ...mapState({ userId: state => state.user.userId }) }, data() { return { renderOption: [], // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 部门树选项 deptOptions: undefined, //用户列表 userList: [], // 党风廉政建设及反腐败工作_警示教育表格数据 warningList: [], //流程进度列表 activities: [], detailId: 0, // 时间线显示 timelineOpen: false, // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 是否显示弹出层 detail: false, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, name: null, createdAt: null, updatedAt: null }, // 表单参数 form: {}, // 表单校验 rules: { name: [ { required: true, message: "警示教育名称不能为空", trigger: "blur" } ], filePath: [ { required: true, message: "警示教育文件不能为空", trigger: "blur" } ] }, //分配权限开始 assignPermissionsKey: false, //组件强制重新加载 避免重置 //1按部门分配 assignPermissions: false, //弹框显示 隐藏 newId: 0, byBranchGetTreeUrl: "/party/feedback/getTree", //部门左侧树形部门 接口地址 byBranchGetallotUrl: "/party/feedback/listUserByDeptId", //可分配权限用户查询接口 byBranchGetAlreadyAllotUrl: "/party/feedback/getUserList", //已分配用户 查询接口 byBranchSaveDataUrl: "/party/feedback/distribution", //保存接口 //2 按角色分配 allotRolesKey: false, allotRoles: false, byRoleGetTreeUrl: "/party/feedback/getAllRole", //左侧 获取所有角色 接口地址 byRoleGetallotUrl: "/party/feedback/listUserByRoleId", //可分配权限用户查询接口 byRoleGetAlreadyAllotUrl: "/party/feedback/getUserList", //已分配用户 查询接口 byRoleSaveDataUrl: "/party/feedback/distribution", //保存接口 //分配权限结束 //反馈开始 feedbackTitle: "", //弹窗上面显示的标题 feedbackDialogVisible: false, //弹窗显示和隐藏 feedbackNewId: 0, //反馈新闻id feedBackContent: "" //反馈内容 //反馈结束 }; }, created() { this.getList(); this.getTreeselect(); this.getAllUser(); this.myPageTitle = this.$route.meta.title + ""; this.menuName = this.$route.meta.title + ""; }, methods: { /** 查询党风廉政建设及反腐败工作_警示教育列表 */ getList() { this.loading = true; listWarning(this.queryParams).then(response => { this.warningList = response.rows; this.total = response.total; this.loading = false; }); }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 取消详情按钮 cancelDetail() { this.detail = false; this.reset(); }, // 表单重置 reset() { this.form = { id: null, name: null, title: null, filePath: null, createdBy: null, createdAt: null, updatedBy: null, updatedAt: null, orgId: null, orgName: null, developTime: null, unionUserId: null, unionUserName: null }; this.resetForm("form"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.id); this.single = selection.length !== 1; this.multiple = !selection.length; }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.getTreeselect(); this.getAllUser(); this.open = true; this.title = "添加警示教育"; }, /** 修改按钮操作 */ handleUpdate(row) { this.reset(); this.getTreeselect(); this.getAllUser(); const id = row.id || this.ids; getWarning(id).then(response => { if (response.data.unionUserId) { response.data.unionUserId = response.data.unionUserId .split(",") .map(Number); } this.form = response.data; this.open = true; this.title = "修改警示教育"; }); }, dialogChange(val) { this.detail = val; }, /** 打开详情按钮操作 */ openDetail(row) { this.detail = true; this.detailId = row.id; }, /** 查看详情按钮操作 */ handleDetail(detail, form) { this.detail = detail; this.form = form; }, // handleDetail(row) { // this.reset(); // const id = row.id || this.ids; // getWarning(id).then(response => { // this.form = response.data; // this.detail = true; // this.title = "查看警示教育"; // }); // }, /** 查询部门下拉树结构 */ getTreeselect() { treeselect().then(response => { this.deptOptions = response.data; }); }, getAllUser() { // getAllUser().then(response => { getAllUserNew().then(response => { this.userList = response.data; this.userFilter(); }); }, userFilter(query = "") { let arr = this.userList.filter(item => { return item.label.includes(query); }); // console.log(arr.length," arr.length arr.length") if (arr.length > 500) { this.renderOption = arr.slice(0, 500); } else { this.renderOption = arr; } let array = this.form.unionUserId; if (array && array.length > 0) { this.addOptions(array); } // console.log(this.renderOption,"this.renderOptionthis.renderOptionthis.renderOption") }, addOptions(array) { array.forEach(item => { let str = this.renderOption.some(t => item === t.userId); if (!str) { let arr = this.userList.filter(ele => { return ele.userId === item; }); this.renderOption = arr.concat(this.renderOption); // console.log(arr, "arr2arr2arr2arr2arr2arr2"); } }); }, /** 提交按钮 */ submitForm() { const { unionUserId, ...rest } = this.form; const params = { unionUserId: unionUserId.join(","), ...rest }; this.$refs["form"].validate(valid => { if (valid) { if (this.form.id != null) { updateWarning(params).then(response => { this.$modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addWarning(params).then(response => { this.$modal.msgSuccess("新增成功"); this.open = false; this.getList(); }); } } }); }, /** 删除按钮操作 */ handleDelete(row) { const ids = row.id || this.ids; this.$modal .confirm( '是否确认删除党风廉政建设及反腐败工作_警示教育编号为"' + ids + '"的数据项?' ) .then(function() { return delWarning(ids); }) .then(() => { this.getList(); this.$modal.msgSuccess("删除成功"); }) .catch(() => {}); }, /** 导出按钮操作 */ handleExport() { this.download( "party/dflz/warning/export", { ...this.queryParams }, `warning_${new Date().getTime()}.xlsx` ); }, /** 文件下载 */ handleDownload(row) { const url = row.filePath; const name = row.fileName; downloadFile({ resource: url }).then(res => { let href = window.URL.createObjectURL(new Blob([res])); // 根据后端返回的url对应的文件流创建URL对象 const link = document.createElement("a"); //创建一个隐藏的a标签 link.style.display = "none"; link.href = href; //设置下载的url link.download = name; //设置下载的文件名 document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(href); // 释放掉blob对象 }); }, /** 表格列表文件下载 */ handleDownloadTable(name, url) { downloadFile({ resource: url }).then(res => { let href = window.URL.createObjectURL(new Blob([res])); // 根据后端返回的url对应的文件流创建URL对象 const link = document.createElement("a"); //创建一个隐藏的a标签 link.style.display = "none"; link.href = href; //设置下载的url link.download = name; //设置下载的文件名 document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(href); // 释放掉blob对象 }); }, handleWarning(row) { getWarningDetail(row.id).then(response => { this.activities = response.data; this.timelineOpen = true; }); }, /** 提交审核 */ handleSubmitReview(row) { const pageTitle = this.$route.meta.title; const fullPath = this.$route.fullPath.replaceAll("/", ""); const id = row.id || this.ids; console.log(fullPath); this.$modal .confirm("是否确认提交审核") .then(function() { return submitContent(id, pageTitle, fullPath); }) .then(() => { this.getList(); this.$modal.msgSuccess("提交审核成功"); }) .catch(() => {}); }, //分配权限 开始 //分配权限 打开弹窗 handleAssignPermissions(row) { this.assignPermissions = true; this.assignPermissionsKey = !this.assignPermissionsKey; this.newId = row.id; this.title = row.title; }, //分配权限 点击保存按钮 handleSaveBtn() { this.$refs.assignPermissions.submitData(); }, // 分配权限 保存成功之后 孙组件调用 关闭弹窗 closeAssignPermissions() { this.assignPermissions = false; }, //分配权限 结束 //反馈开始 //反馈打开弹窗 handleFeedback(row) { this.feedbackDialogVisible = true; this.feedbackNewId = row.id; this.feedbackTitle = row.title; this.feedBackContent = ""; }, //反馈 点击保存按钮 handleFeedbackSaveBtn() { let url = "/party/feedback/feedback"; let obj = {}; obj.feedBackContent = this.feedBackContent; obj.name = this.menuName; obj.newId = this.feedbackNewId; postSaveData(url, obj).then(res => { if (res.code === 200) { this.$message({ message: "保存成功", type: "success" }); this.feedbackDialogVisible = false; this.getList(); } else { this.$message({ message: "保存失败,请确认", type: "warning" }); } }); } //反馈结束 } }; </script>
el-select 单选: 数据是字符串或者number类型
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="称号" prop="title">
<el-input
v-model="queryParams.title"
placeholder="请输入称号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入姓名"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="组织" prop="organizationName">
<el-input
v-model="queryParams.organizationName"
placeholder="请输入组织"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="授予单位" prop="grantCompany">
<el-input
v-model="queryParams.grantCompany"
placeholder="请输入授予单位"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="行政级别" prop="grantCompanyLevel">
<el-select
v-model="queryParams.grantCompanyLevel"
placeholder="请选择授予单位行政级别"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dict.type.grant_company_level"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="数据来源" prop="origin">
<el-input
v-model="queryParams.origin"
placeholder="请输入数据来源"
clearable
@keyup.enter.native="handleQuery"/>
</el-form-item>-->
<!-- <el-form-item label="单位" prop="organization">
<el-input
v-model="queryParams.organization"
placeholder="请输入单位"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
-->
<!-- <el-form-item label="审核状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="审核状态"
clearable
style="width: 240px"
>
<el-option
v-for="dict in dict.type.status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>-->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @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="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['party:record:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['party:record:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['party:record:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['party:record:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="称号" align="center" prop="title" />
<el-table-column label="姓名" align="center" prop="name" />
<el-table-column label="组织" align="center" prop="organizationName" />
<el-table-column label="授予单位" align="center" prop="grantCompany" />
<el-table-column label="授予单位行政级别" align="center" prop="grantCompanyLevel">
<template slot-scope="scope">
<dict-tag :options="dict.type.grant_company_level" :value="scope.row.grantCompanyLevel" />
</template>
</el-table-column>
<el-table-column label="附件" align="center" prop="fileName">
<template slot-scope="scope">
<span class="span-text" v-if="scope.row.file !== undefined">
<div
v-for="(item, index) in scope.row.fileName"
:key="index"
style="color: red;cursor: pointer;"
@click="handleDownloadTable(item, scope.row.file.split(',')[index] )"
>{{ item}}</div>
</span>
</template>
</el-table-column>
<!-- <el-table-column label="数据来源" align="center" prop="origin" />
<el-table-column label="审核状态" align="center" prop="status" >
<template slot-scope="scope">
<dict-tag :options="dict.type.status" :value="scope.row.status"/>
</template>
</el-table-column>
-->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleDetail(scope.row, true)"
v-hasPermi="['party:record:query']"
>查看详情</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row,false)"
v-hasPermi="['party:record:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['party:record:remove']"
>删除</el-button>
<!-- <el-button
v-if="scope.row.status == 2 || scope.row.status == 3|| scope.row.status == 4"
size="mini"
type="text"
icon="el-icon-view"
@click="handleRecord(scope.row)"
v-hasPermi="['party:record:getRecordDetail']"
>查看进度</el-button>
<el-button
v-if="scope.row.status == 1 || scope.row.status == 4"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleSubmitReview(scope.row)"
v-hasPermi="['party:record:submit']"
>提交审核</el-button>-->
<el-button
size="mini"
type="text"
icon="el-icon-upload2"
@click="handleIsTop(scope.row)"
v-if="scope.$index != 0 || queryParams.pageNum != 1"
v-hasPermi="['party:record:isTop']"
>置顶</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改表彰记录信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="称号" prop="title">
<el-input v-model="form.title" placeholder="请输入称号" />
</el-form-item>
<!-- <el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入姓名" />
</el-form-item>-->
<el-form-item label="人员" prop="name">
<el-select
v-model="form.unionUserId"
placeholder="请选择人员"
filterable
clearable
style="width:100%"
:filter-method="userFilter"
>
<el-option
v-for="dict in renderOption"
:key="dict.userId"
:label="dict.label"
:value="dict.userId"
/>
</el-select>
</el-form-item>
<el-form-item label="部门" prop="department">
<el-input v-model="form.department" placeholder="请输入部门" />
</el-form-item>
<el-form-item label="授予单位" prop="grantCompany">
<el-input v-model="form.grantCompany" placeholder="请输入授予单位" />
</el-form-item>
<el-form-item label="行政级别" prop="grantCompanyLevel">
<el-select
v-model="form.grantCompanyLevel"
placeholder="请选择授予单位行政级别"
filterable
clearable
>
<el-option
v-for="dict in dict.type.grant_company_level"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="组织" prop="organization">
<treeselect
v-model="form.organization"
:options="deptOptions"
:show-count="true"
placeholder="请选择组织"
/>
</el-form-item>
<el-form-item label="附件">
<file-upload v-model="form.file" />
</el-form-item>
<el-form-item label="数据来源" prop="origin" v-if="form.origin!=null">
<el-input v-model="form.origin" placeholder="请输入数据来源" disabled />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 查看政治轮训对话框 -->
<el-dialog :title="title" :visible.sync="detail" width="500px" append-to-body>
<look-details :detailId="detailId" />
<div slot="footer" class="dialog-footer">
<el-button @click="cancelDetail">关 闭</el-button>
</div>
</el-dialog>
<el-dialog title="查看流程进度" :visible.sync="timelineOpen" width="800px" append-to-body>
<el-timeline :reverse="false">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:timestamp="activity.timestamp"
:color="activity.color"
placement="top"
>
<el-card>
<h4 v-if="activity.type =='startEvent'">流程开始:{{activity.content}}</h4>
<h4 v-else-if="activity.type =='userTask'">流程审核:{{activity.content}}</h4>
<h4 v-else-if="activity.type =='endEvent'">流程结束:{{activity.content}}</h4>
<h4 v-else>其他流程:{{activity.content}}</h4>
<p v-if="activity.operator !=='' && activity.operator !== undefined">
<template
v-if="activity.finishTime !== '' && activity.finishTime !== undefined"
>于 {{activity.finishTime}}, {{activity.operator}}</template>
<template v-else>{{activity.operator}} 处理中</template>
</p>
<p v-else-if="activity.type =='userTask'">等待审核</p>
<p v-else>{{activity.timestamp}}</p>
</el-card>
</el-timeline-item>
</el-timeline>
</el-dialog>
</div>
</template>
<script>
import {
listRecord,
getRecord,
delRecord,
addRecord,
updateRecord,
getRecordDetail,
submitContent
} from "@/api/party/culture/record";
import { listAllUser, getAllUserNew } from "@/api/system/user";
import { downloadFile } from "@/api/common/common";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { IsTop } from "@/api/common/common";
import lookDetails from "./components/LookDetails";
export default {
name: "Record",
dicts: ["status", "grant_company_level"],
components: { Treeselect, lookDetails },
data() {
return {
renderOption: [],
detailId: 0,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 部门树选项
deptOptions: undefined,
//用户列表
userList: [],
// 表彰记录信息表格数据
recordList: [],
//流程进度列表
activities: [],
// 时间线显示
timelineOpen: false,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
detail: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
title: null,
name: null,
image: null,
file: null,
content: null,
status: null,
reviewComment: null,
processInstanceId: null,
organization: null,
department: null,
grantCompany: null,
grantCompanyLevel: null
},
// 表单参数
form: {},
// 表单校验
rules: {
title: [{ required: true, message: "请输入称号", trigger: "blur" }],
organization: [
{ required: true, message: "请输入组织", trigger: "blur" }
]
}
};
},
created() {
this.getList();
this.getTreeselect();
this.getAllUser();
},
methods: {
// 置顶
handleIsTop(row) {
// console.log(row, "rrrrrrrrrrrrrrrrr");
let id = row.id;
// /dev-api/party/record/updateIsTop/{id}/{isTop}
let url = "/party/record/updateIsTop";
IsTop(url, id).then(response => {
if (response.code === 200) {
this.getList();
}
});
},
/** 查询表彰记录信息列表 */
getList() {
this.loading = true;
listRecord(this.queryParams).then(response => {
this.recordList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
title: null,
unionUserId: null,
image: null,
file: null,
content: null,
status: 0,
reviewComment: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
delFlag: null,
processInstanceId: null,
organization: null,
department: null,
grantCompany: null,
grantCompanyLevel: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 查询部门下拉树结构 */
getTreeselect() {
treeselect().then(response => {
this.deptOptions = response.data;
});
},
getAllUser() {
// listAllUser().then(response => {
getAllUserNew().then(response => {
this.userList = response.data;
this.userFilter();
});
},
userFilter(query = "") {
let arr = this.userList.filter(item => {
return item.label.includes(query);
});
if (arr.length > 500) {
this.renderOption = arr.slice(0, 5);
} else {
this.renderOption = arr;
}
let str = this.form.unionUserId;
if (str) {
this.addOptions(str);
}
},
addOptions(item) {
let str = this.renderOption.some(t => item === t.userId);
let arr = [];
if (!str) {
arr = this.userList.filter(ele => {
return ele.userId === item;
});
this.renderOption = arr.concat(this.renderOption);
}
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.getTreeselect();
this.getAllUser();
this.open = true;
this.title = "添加表彰奖励";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.getTreeselect();
this.getAllUser();
this.reset();
const id = row.id || this.ids;
getRecord(id).then(response => {
this.form = response.data;
console.log(
this.form,
"66666666666666this.formthis.formthis.formthis.form"
);
this.open = true;
this.title = "修改表彰奖励";
});
},
/** 查看详情按钮操作 */
handleDetail(row) {
this.reset();
this.detail = true;
this.title = "查看表彰奖励";
this.detailId = row.id;
// const id = row.id || this.ids;
// getRecord(id).then(response => {
// this.form = response.data;
// this.detail = true;
// this.title = "查看表彰奖励";
// });
},
// 取消详情按钮
cancelDetail() {
this.detail = false;
//this.reset();
},
/** 提交按钮 */
submitForm() {
console.log(this.form, "999999999999999999999999");
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateRecord(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.detailId = 0;
this.getList();
});
} else {
addRecord(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm('是否确认删除表彰记录信息编号为"' + ids + '"的数据项?')
.then(function() {
return delRecord(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"party/record/export",
{
...this.queryParams
},
`record_${new Date().getTime()}.xlsx`
);
},
handleRecord(row) {
getRecordDetail(row.id).then(response => {
this.activities = response.data;
this.timelineOpen = true;
});
},
/** 提交审核 */
handleSubmitReview(row) {
const pageTitle = this.$route.meta.title;
const fullPath = this.$route.fullPath.replaceAll("/", "");
const id = row.id || this.ids;
console.log(fullPath);
this.$modal
.confirm("是否确认提交审核")
.then(function() {
return submitContent(id, pageTitle, fullPath);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("提交审核成功");
})
.catch(() => {});
},
/** 表格列表文件下载 */
handleDownloadTable(name, url) {
downloadFile({ resource: url }).then(res => {
let href = window.URL.createObjectURL(new Blob([res])); // 根据后端返回的url对应的文件流创建URL对象
const link = document.createElement("a"); //创建一个隐藏的a标签
link.style.display = "none";
link.href = href; //设置下载的url
link.download = name; //设置下载的文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(href); // 释放掉blob对象
});
},
/** 文件下载 */
handleDownload(row) {
const url = row.file;
const name = row.fileName;
downloadFile({ resource: url }).then(res => {
let href = window.URL.createObjectURL(new Blob([res])); // 根据后端返回的url对应的文件流创建URL对象
const link = document.createElement("a"); //创建一个隐藏的a标签
link.style.display = "none";
link.href = href; //设置下载的url
link.download = name; //设置下载的文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(href); // 释放掉blob对象
});
}
}
};
</script>
element el-select 数据太多导致卡顿解决方案 - 简书
vue的form表单el-select下拉框数据量大导致页面卡死崩溃解决办法,使用懒加载方法加载数据解决页面卡顿 - 灰信网(软件开发博客聚合)