devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

el-select option数据太多 优化_el-option数组数据量大

作者：盐析白兔 | 2024-02-19 12:47:29

赞

踩

el-option数组数据量大

el-select 多选:  --- 数据是数组

  1. <template>
  2.   <div class="app-container">
  3.     <el-form
  4.       :model="queryParams"
  5.       ref="queryForm"
  6.       size="small"
  7.       :inline="true"
  8.       v-show="showSearch"
  9.       label-width="68px"
  10.     >
  11.       <el-form-item label="主题" prop="title">
  12.         <el-input
  13.           v-model="queryParams.title"
  14.           placeholder="请输入警示教育主题"
  15.           clearable
  16.           @keyup.enter.native="handleQuery"
  17.         />
  18.       </el-form-item>
  19.       <el-form-item label="数据来源" prop="origin">
  20.         <el-input
  21.           v-model="queryParams.origin"
  22.           placeholder="请输入数据来源"
  23.           clearable
  24.           @keyup.enter.native="handleQuery"
  25.         />
  26.       </el-form-item>
  27.       <!--       <el-form-item label="审核状态" prop="status">
  28.                     <el-select
  29.                       v-model="queryParams.status"
  30.                       placeholder="审核状态"
  31.                       clearable
  32.                       style="width: 240px"
  33.                     >
  34.                       <el-option
  35.                         v-for="dict in dict.type.status"
  36.                         :key="dict.value"
  37.                         :label="dict.label"
  38.                         :value="dict.value"
  39.                       />
  40.                     </el-select>
  41.       </el-form-item>-->
  42.       <el-form-item>
  43.         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  44.         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  45.       </el-form-item>
  46.     </el-form>
  47.  
  48.     <el-row :gutter="10" class="mb8">
  49.       <el-col :span="1.5">
  50.         <el-button
  51.           type="primary"
  52.           plain
  53.           icon="el-icon-plus"
  54.           size="mini"
  55.           @click="handleAdd"
  56.           v-hasPermi="['party:warning:add']"
  57.         >新增</el-button>
  58.       </el-col>
  59.       <el-col :span="1.5">
  60.         <el-button
  61.           type="success"
  62.           plain
  63.           icon="el-icon-edit"
  64.           size="mini"
  65.           :disabled="single"
  66.           @click="handleUpdate"
  67.           v-hasPermi="['party:warning:edit']"
  68.         >修改</el-button>
  69.       </el-col>
  70.       <el-col :span="1.5">
  71.         <el-button
  72.           type="danger"
  73.           plain
  74.           icon="el-icon-delete"
  75.           size="mini"
  76.           :disabled="multiple"
  77.           @click="handleDelete"
  78.           v-hasPermi="['party:warning:remove']"
  79.         >删除</el-button>
  80.       </el-col>
  81.       <el-col :span="1.5">
  82.         <el-button
  83.           type="warning"
  84.           plain
  85.           icon="el-icon-download"
  86.           size="mini"
  87.           @click="handleExport"
  88.           v-hasPermi="['party:warning:export']"
  89.         >导出</el-button>
  90.       </el-col>
  91.       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  92.     </el-row>
  93.  
  94.     <el-table v-loading="loading" :data="warningList" @selection-change="handleSelectionChange">
  95.       <el-table-column type="selection" width="55" align="center" />
  96.       <el-table-column label="主题" align="center" prop="title" />
  97.       <el-table-column label="数据来源" align="center" prop="origin" />
  98.       <el-table-column label="开展组织名称" align="center" prop="orgName" />
  99.       <el-table-column label="参加人员" align="center" prop="unionUserName" />
  100.       <el-table-column label="开展时间" align="center" prop="developTime" />
  101.       <el-table-column label="学习教育覆盖率" align="center" prop="cover" />
  102.  
  103.       <el-table-column label="附件" align="center" prop="fileName">
  104.         <template slot-scope="scope">
  105.           <span class="span-text" v-if="scope.row.filePath !== undefined">
  106.             <div
  107.               v-for="(item, index) in scope.row.fileName"
  108.               :key="index"
  109.               style="color: red;cursor: pointer;"
  110.               @click="handleDownloadTable(item, scope.row.filePath.split(',')[index] )"
  111.             >{{ item}}</div>
  112.           </span>
  113.         </template>
  114.       </el-table-column>
  115.  
  116.       <el-table-column label="超级链接" align="center" prop="hyperLink" />
  117.  
  118.       <!--      <el-table-column label="审核状态" align="center" prop="status">
  119.                    <template slot-scope="scope">
  120.                      <dict-tag :options="dict.type.status" :value="scope.row.status" />
  121.                    </template>
  122.       </el-table-column>-->
  123.       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  124.         <template slot-scope="scope">
  125.           <el-button
  126.             size="mini"
  127.             type="text"
  128.             icon="el-icon-edit"
  129.             @click="openDetail(scope.row, true)"
  130.             v-hasPermi="['party:warning:query']"
  131.           >查看详情</el-button>
  132.           <el-button
  133.             v-if="scope.row.createdBy == userId"
  134.             size="mini"
  135.             type="text"
  136.             icon="el-icon-edit"
  137.             @click="handleUpdate(scope.row, false)"
  138.             v-hasPermi="['party:warning:edit']"
  139.           >修改</el-button>
  140.           <el-button
  141.             v-if="scope.row.createdBy == userId"
  142.             size="mini"
  143.             type="text"
  144.             icon="el-icon-delete"
  145.             @click="handleDelete(scope.row)"
  146.             v-hasPermi="['party:warning:remove']"
  147.           >删除</el-button>
  148.           <el-button
  149.             size="mini"
  150.             type="text"
  151.             icon="el-icon-lock"
  152.             @click="handleAssignPermissions(scope.row)"
  153.             v-hasPermi="['party:feedback:distribution']"
  154.           >分配权限</el-button>
  155.           <el-button
  156.             size="mini"
  157.             type="text"
  158.             icon="el-icon-lock"
  159.             v-if="
  160.               scope.row.feedBackStatus != null &&
  161.               scope.row.feedBackStatus == '0'  &&
  162.               scope.row.createdBy != userId"
  163.             @click="handleFeedback(scope.row)"
  164.             v-hasPermi="['party:feedback:feedback']"
  165.           >反馈</el-button>
  166.           <!--                             <el-button
  167.                                v-if="scope.row.status == 2 || scope.row.status == 3|| scope.row.status == 4"
  168.                                size="mini"
  169.                                type="text"
  170.                                icon="el-icon-view"
  171.                                @click="handleWarning(scope.row)"
  172.                                v-hasPermi="['party:warning:getWarningDetail']"
  173.                                >查看进度</el-button>
  174.                              <el-button
  175.                                v-if="
  176.                                  scope.row.status == 1 ||
  177.                                  scope.row.status == 4
  178.                                "
  179.                                size="mini"
  180.                                type="text"
  181.                                icon="el-icon-edit"
  182.                                @click="handleSubmitReview(scope.row)"
  183.                                v-hasPermi="['party:warning:submit']"
  184.           >提交审核</el-button>-->
  185.         </template>
  186.       </el-table-column>
  187.     </el-table>
  188.  
  189.     <pagination
  190.       v-show="total>0"
  191.       :total="total"
  192.       :page.sync="queryParams.pageNum"
  193.       :limit.sync="queryParams.pageSize"
  194.       @pagination="getList"
  195.     />
  196.  
  197.     <!-- 添加或修改党风廉政建设及反腐败工作_警示教育对话框 -->
  198.     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
  199.       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
  200.         <el-form-item label="主题" prop="title">
  201.           <el-input v-model="form.title" placeholder="请输入主题" />
  202.         </el-form-item>
  203.         <!-- <el-form-item label="教育名称" prop="name">
  204.           <el-input v-model="form.name" placeholder="请输入警示教育名称" />
  205.         </el-form-item>-->
  206.         <el-form-item label="数据来源" prop="origin" v-if="form.origin!=null">
  207.           <el-input v-model="form.origin" placeholder="请输入数据来源" disabled />
  208.         </el-form-item>
  209.         <el-form-item label="开展组织名称" prop="orgId">
  210.           <treeselect
  211.             v-model="form.orgId"
  212.             :options="deptOptions"
  213.             :show-count="true"
  214.             placeholder="请选择组织"
  215.           />
  216.         </el-form-item>
  217.         <el-form-item label="参加人员" prop="unionUserId">
  218.           <el-select
  219.             v-model="form.unionUserId"
  220.             placeholder="请选择人员"
  221.             filterable
  222.             clearable
  223.             multiple
  224.             style="width:100%"
  225.             :filter-method="userFilter"
  226.           >
  227.             <el-option
  228.               v-for="dict in renderOption"
  229.               :key="dict.userId"
  230.               :label="dict.label"
  231.               :value="dict.userId"
  232.             />
  233.           </el-select>
  234.         </el-form-item>
  235.         <el-form-item label="开展时间" prop="developTime">
  236.           <el-date-picker
  237.             clearable
  238.             v-model="form.developTime"
  239.             type="date"
  240.             value-format="yyyy-MM-dd"
  241.             placeholder="请选择开展时间"
  242.           ></el-date-picker>
  243.         </el-form-item>
  244.         <el-form-item label="学习教育覆盖率" prop="cover">
  245.           <el-input v-model="form.cover" placeholder="请输入学习教育覆盖率" />
  246.         </el-form-item>
  247.         <el-form-item label="附件" prop="filePath">
  248.           <file-upload v-model="form.filePath" />
  249.         </el-form-item>
  250.         <el-form-item label="超级链接" prop="hyperLink">
  251.           <el-input v-model="form.hyperLink" placeholder="请输入超级链接" />
  252.         </el-form-item>
  253.         <el-form-item label="教育概况" prop="overview">
  254.           <editor v-model="form.overview" :min-height="192" :read-only="true" />
  255.         </el-form-item>
  256.       </el-form>
  257.       <div slot="footer" class="dialog-footer">
  258.         <el-button type="primary" @click="submitForm">确 定</el-button>
  259.         <el-button @click="cancel">取 消</el-button>
  260.       </div>
  261.     </el-dialog>
  262.  
  263.     <!-- 查看警示教育对话框 -->
  264.     <warning-dialog
  265.       :detail="detail"
  266.       :dialogTitle="title"
  267.       :detailId="detailId"
  268.       @dialogChange="dialogChange"
  269.       @handleDetail="handleDetail"
  270.     ></warning-dialog>
  271.     <!-- <el-dialog :title="title" :visible.sync="detail" width="800px" append-to-body>
  272.       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
  273.         <el-form-item label="主题:" prop="title">
  274.           <span style="text-decoration: underline">{{form.title}}</span>
  275.         </el-form-item>
  276.          <el-form-item label="数据来源:" prop="title">
  277.                   <span style="text-decoration: underline">{{form.origin}}</span>
  278.           </el-form-item>
  279.         <el-form-item label="开展组织名称:" prop="orgName">
  280.           <span style="text-decoration: underline">{{form.orgName}}</span>
  281.         </el-form-item>
  282.         <el-form-item label="参加人员:" prop="unionUserName">
  283.           <span style="text-decoration: underline">{{form.unionUserName}}</span>
  284.         </el-form-item>
  285.         <el-form-item label="开展时间:" prop="developTime">
  286.           <span style="text-decoration: underline">{{form.developTime}}</span>
  287.         </el-form-item>
  288.         <el-form-item label="学习教育覆盖率:" prop="cover">
  289.           <span style="text-decoration: underline">{{form.cover}}</span>
  290.         </el-form-item>
  291.         <el-form-item label="文件上传" prop="filePath">
  292.           <file-upload v-model="form.filePath" :disabled="detail == true" />
  293.         </el-form-item>
  294.         <el-form-item label="超级链接:" prop="hyperLink">
  295.           <span style="text-decoration: underline">{{form.hyperLink}}</span>
  296.         </el-form-item>
  297.         <el-form-item label="概况:" prop="overview">
  298.           <editor v-model="form.overview" :min-height="192" />
  299.         </el-form-item>
  300.       </el-form>
  301.       <div slot="footer" class="dialog-footer">
  302.         <el-button @click="cancelDetail">取 消</el-button>
  303.       </div>
  304.     </el-dialog>-->
  305.  
  306.     <el-dialog title="查看流程进度" :visible.sync="timelineOpen" width="800px" append-to-body>
  307.       <el-timeline :reverse="false">
  308.         <el-timeline-item
  309.           v-for="(activity, index) in activities"
  310.           :key="index"
  311.           :timestamp="activity.timestamp"
  312.           :color="activity.color"
  313.           placement="top"
  314.         >
  315.           <el-card>
  316.             <h4 v-if="activity.type == 'startEvent'">流程开始：{{ activity.content }}</h4>
  317.             <h4 v-else-if="activity.type == 'userTask'">流程审核：{{ activity.content }}</h4>
  318.             <h4 v-else-if="activity.type == 'endEvent'">流程结束：{{ activity.content }}</h4>
  319.             <h4 v-else>其他流程：{{ activity.content }}</h4>
  320.             <p v-if="activity.operator !== '' && activity.operator !== undefined">
  321.               <template
  322.                 v-if="
  323.                           activity.finishTime !== '' &&
  324.                           activity.finishTime !== undefined
  325.                         "
  326.               >于 {{ activity.finishTime }}, {{ activity.operator }}</template>
  327.               <template v-else>{{ activity.operator }} 处理中</template>
  328.             </p>
  329.             <p v-else-if="activity.type == 'userTask'">等待审核</p>
  330.             <p v-else>{{ activity.timestamp }}</p>
  331.           </el-card>
  332.         </el-timeline-item>
  333.       </el-timeline>
  334.     </el-dialog>
  335.  
  336.     <!-- 分配权限开始 -->
  337.     <el-dialog title="分配权限" :visible.sync="assignPermissions" width="1200px" append-to-body>
  338.       <div class="el-dialog-div">
  339.         <assign-permissions
  340.           ref="assignPermissions"
  341.           :key="assignPermissionsKey"
  342.           :newId="newId"
  343.           :menuName="menuName"
  344.           :title="title"
  345.           :byBranchGetTreeUrl="byBranchGetTreeUrl"
  346.           :byBranchGetallotUrl="byBranchGetallotUrl"
  347.           :byBranchGetAlreadyAllotUrl="byBranchGetAlreadyAllotUrl"
  348.           :byBranchSaveDataUrl="byBranchSaveDataUrl"
  349.           :byRoleGetTreeUrl="byRoleGetTreeUrl"
  350.           :byRoleGetallotUrl="byRoleGetallotUrl"
  351.           :byRoleGetAlreadyAllotUrl="byRoleGetAlreadyAllotUrl"
  352.           :byRoleSaveDataUrl="byRoleSaveDataUrl"
  353.           @closeAssignPermissions="closeAssignPermissions"
  354.         ></assign-permissions>
  355.       </div>
  356.       <span slot="footer" class="dialog-footer">
  357.         <el-button @click="assignPermissions = false">取 消</el-button>
  358.         <el-button type="primary" @click="handleSaveBtn()">保 存</el-button>
  359.       </span>
  360.     </el-dialog>
  361.     <!-- 分配权限结束 -->
  362.  
  363.     <!-- 反馈开始 -->
  364.     <el-dialog title="反馈" :visible.sync="feedbackDialogVisible" width="800px" append-to-body>
  365.       <el-row>
  366.         <el-form label-width="80px">
  367.           <el-form-item label="标题:">{{ feedbackTitle }}</el-form-item>
  368.           <el-form-item label="反馈内容:">
  369.             <el-input type="textarea" :rows="6" v-model="feedBackContent"></el-input>
  370.           </el-form-item>
  371.         </el-form>
  372.       </el-row>
  373.       <span slot="footer" class="dialog-footer">
  374.         <el-button @click="feedbackDialogVisible = false">取 消</el-button>
  375.         <el-button type="primary" @click="handleFeedbackSaveBtn()">保 存</el-button>
  376.       </span>
  377.     </el-dialog>
  378.     <!-- 反馈结束 -->
  379.   </div>
  380. </template>
  381.  
  382. <script>
  383. import {
  384.   listWarning,
  385.   getWarning,
  386.   delWarning,
  387.   addWarning,
  388.   updateWarning,
  389.   getWarningDetail,
  390.   submitContent
  391. } from "@/api/party/dflz/warning";
  392. import { downloadFile, postSaveData } from "@/api/common/common";
  393. import { mapState } from "vuex";
  394. import { getAllUser, getAllUserNew } from "@/api/system/user";
  395. import { treeselect } from "@/api/system/dept";
  396. import Treeselect from "@riophae/vue-treeselect";
  397. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  398.  
  399. export default {
  400.   name: "Warning",
  401.   dicts: ["status"],
  402.   components: { Treeselect },
  403.   computed: {
  404.     ...mapState({
  405.       userId: state => state.user.userId
  406.     })
  407.   },
  408.   data() {
  409.     return {
  410.       renderOption: [],
  411.       // 遮罩层
  412.       loading: true,
  413.       // 选中数组
  414.       ids: [],
  415.       // 非单个禁用
  416.       single: true,
  417.       // 非多个禁用
  418.       multiple: true,
  419.       // 显示搜索条件
  420.       showSearch: true,
  421.       // 总条数
  422.       total: 0,
  423.       // 部门树选项
  424.       deptOptions: undefined,
  425.       //用户列表
  426.       userList: [],
  427.       // 党风廉政建设及反腐败工作_警示教育表格数据
  428.       warningList: [],
  429.       //流程进度列表
  430.       activities: [],
  431.       detailId: 0,
  432.       // 时间线显示
  433.       timelineOpen: false,
  434.       // 弹出层标题
  435.       title: "",
  436.       // 是否显示弹出层
  437.       open: false,
  438.       // 是否显示弹出层
  439.       detail: false,
  440.       // 查询参数
  441.       queryParams: {
  442.         pageNum: 1,
  443.         pageSize: 10,
  444.         name: null,
  445.         createdAt: null,
  446.         updatedAt: null
  447.       },
  448.       // 表单参数
  449.       form: {},
  450.       // 表单校验
  451.       rules: {
  452.         name: [
  453.           { required: true, message: "警示教育名称不能为空", trigger: "blur" }
  454.         ],
  455.         filePath: [
  456.           { required: true, message: "警示教育文件不能为空", trigger: "blur" }
  457.         ]
  458.       },
  459.       //分配权限开始
  460.       assignPermissionsKey: false, //组件强制重新加载  避免重置
  461.       //1按部门分配
  462.       assignPermissions: false, //弹框显示 隐藏
  463.       newId: 0,
  464.       byBranchGetTreeUrl: "/party/feedback/getTree", //部门左侧树形部门 接口地址
  465.       byBranchGetallotUrl: "/party/feedback/listUserByDeptId", //可分配权限用户查询接口
  466.       byBranchGetAlreadyAllotUrl: "/party/feedback/getUserList", //已分配用户 查询接口
  467.       byBranchSaveDataUrl: "/party/feedback/distribution", //保存接口
  468.       //2 按角色分配
  469.       allotRolesKey: false,
  470.       allotRoles: false,
  471.       byRoleGetTreeUrl: "/party/feedback/getAllRole", //左侧 获取所有角色 接口地址
  472.       byRoleGetallotUrl: "/party/feedback/listUserByRoleId", //可分配权限用户查询接口
  473.       byRoleGetAlreadyAllotUrl: "/party/feedback/getUserList", //已分配用户 查询接口
  474.       byRoleSaveDataUrl: "/party/feedback/distribution", //保存接口
  475.       //分配权限结束
  476.       //反馈开始
  477.       feedbackTitle: "", //弹窗上面显示的标题
  478.       feedbackDialogVisible: false, //弹窗显示和隐藏
  479.       feedbackNewId: 0, //反馈新闻id
  480.       feedBackContent: "" //反馈内容
  481.       //反馈结束
  482.     };
  483.   },
  484.   created() {
  485.     this.getList();
  486.     this.getTreeselect();
  487.     this.getAllUser();
  488.     this.myPageTitle = this.$route.meta.title + "";
  489.     this.menuName = this.$route.meta.title + "";
  490.   },
  491.   methods: {
  492.     /** 查询党风廉政建设及反腐败工作_警示教育列表 */
  493.     getList() {
  494.       this.loading = true;
  495.       listWarning(this.queryParams).then(response => {
  496.         this.warningList = response.rows;
  497.         this.total = response.total;
  498.         this.loading = false;
  499.       });
  500.     },
  501.     // 取消按钮
  502.     cancel() {
  503.       this.open = false;
  504.       this.reset();
  505.     },
  506.     // 取消详情按钮
  507.     cancelDetail() {
  508.       this.detail = false;
  509.       this.reset();
  510.     },
  511.     // 表单重置
  512.     reset() {
  513.       this.form = {
  514.         id: null,
  515.         name: null,
  516.         title: null,
  517.         filePath: null,
  518.         createdBy: null,
  519.         createdAt: null,
  520.         updatedBy: null,
  521.         updatedAt: null,
  522.         orgId: null,
  523.         orgName: null,
  524.         developTime: null,
  525.         unionUserId: null,
  526.         unionUserName: null
  527.       };
  528.       this.resetForm("form");
  529.     },
  530.     /** 搜索按钮操作 */
  531.     handleQuery() {
  532.       this.queryParams.pageNum = 1;
  533.       this.getList();
  534.     },
  535.     /** 重置按钮操作 */
  536.     resetQuery() {
  537.       this.resetForm("queryForm");
  538.       this.handleQuery();
  539.     },
  540.     // 多选框选中数据
  541.     handleSelectionChange(selection) {
  542.       this.ids = selection.map(item => item.id);
  543.       this.single = selection.length !== 1;
  544.       this.multiple = !selection.length;
  545.     },
  546.     /** 新增按钮操作 */
  547.     handleAdd() {
  548.       this.reset();
  549.       this.getTreeselect();
  550.       this.getAllUser();
  551.       this.open = true;
  552.       this.title = "添加警示教育";
  553.     },
  554.     /** 修改按钮操作 */
  555.     handleUpdate(row) {
  556.       this.reset();
  557.       this.getTreeselect();
  558.       this.getAllUser();
  559.       const id = row.id || this.ids;
  560.       getWarning(id).then(response => {
  561.         if (response.data.unionUserId) {
  562.           response.data.unionUserId = response.data.unionUserId
  563.             .split(",")
  564.             .map(Number);
  565.         }
  566.         this.form = response.data;
  567.         this.open = true;
  568.         this.title = "修改警示教育";
  569.       });
  570.     },
  571.     dialogChange(val) {
  572.       this.detail = val;
  573.     },
  574.     /** 打开详情按钮操作 */
  575.     openDetail(row) {
  576.       this.detail = true;
  577.       this.detailId = row.id;
  578.     },
  579.     /** 查看详情按钮操作 */
  580.     handleDetail(detail, form) {
  581.       this.detail = detail;
  582.       this.form = form;
  583.     },
  584.     // handleDetail(row) {
  585.     //   this.reset();
  586.     //   const id = row.id || this.ids;
  587.     //   getWarning(id).then(response => {
  588.     //     this.form = response.data;
  589.     //     this.detail = true;
  590.     //     this.title = "查看警示教育";
  591.     //   });
  592.     // },
  593.     /** 查询部门下拉树结构 */
  594.     getTreeselect() {
  595.       treeselect().then(response => {
  596.         this.deptOptions = response.data;
  597.       });
  598.     },
  599.     getAllUser() {
  600.       // getAllUser().then(response => {
  601.       getAllUserNew().then(response => {
  602.         this.userList = response.data;
  603.         this.userFilter();
  604.       });
  605.     },
  606.  
  607.     userFilter(query = "") {
  608.       let arr = this.userList.filter(item => {
  609.         return item.label.includes(query);
  610.       });
  611.       // console.log(arr.length," arr.length arr.length")
  612.       if (arr.length > 500) {
  613.         this.renderOption = arr.slice(0, 500);
  614.       } else {
  615.         this.renderOption = arr;
  616.       }
  617.       let array = this.form.unionUserId;
  618.       if (array && array.length > 0) {
  619.         this.addOptions(array);
  620.       }
  621.       // console.log(this.renderOption,"this.renderOptionthis.renderOptionthis.renderOption")
  622.     },
  623.  
  624.     addOptions(array) {
  625.       array.forEach(item => {
  626.         let str = this.renderOption.some(t => item === t.userId);
  627.         if (!str) {
  628.           let arr = this.userList.filter(ele => {
  629.             return ele.userId === item;
  630.           });
  631.           this.renderOption = arr.concat(this.renderOption);
  632.           // console.log(arr, "arr2arr2arr2arr2arr2arr2");
  633.         }
  634.       });
  635.     },
  636.  
  637.     /** 提交按钮 */
  638.     submitForm() {
  639.       const { unionUserId, ...rest } = this.form;
  640.       const params = {
  641.         unionUserId: unionUserId.join(","),
  642.         ...rest
  643.       };
  644.       this.$refs["form"].validate(valid => {
  645.         if (valid) {
  646.           if (this.form.id != null) {
  647.             updateWarning(params).then(response => {
  648.               this.$modal.msgSuccess("修改成功");
  649.               this.open = false;
  650.               this.getList();
  651.             });
  652.           } else {
  653.             addWarning(params).then(response => {
  654.               this.$modal.msgSuccess("新增成功");
  655.               this.open = false;
  656.               this.getList();
  657.             });
  658.           }
  659.         }
  660.       });
  661.     },
  662.     /** 删除按钮操作 */
  663.     handleDelete(row) {
  664.       const ids = row.id || this.ids;
  665.       this.$modal
  666.         .confirm(
  667.           '是否确认删除党风廉政建设及反腐败工作_警示教育编号为"' +
  668.             ids +
  669.             '"的数据项？'
  670.         )
  671.         .then(function() {
  672.           return delWarning(ids);
  673.         })
  674.         .then(() => {
  675.           this.getList();
  676.           this.$modal.msgSuccess("删除成功");
  677.         })
  678.         .catch(() => {});
  679.     },
  680.     /** 导出按钮操作 */
  681.     handleExport() {
  682.       this.download(
  683.         "party/dflz/warning/export",
  684.         {
  685.           ...this.queryParams
  686.         },
  687.         `warning_${new Date().getTime()}.xlsx`
  688.       );
  689.     },
  690.     /** 文件下载 */
  691.     handleDownload(row) {
  692.       const url = row.filePath;
  693.       const name = row.fileName;
  694.       downloadFile({ resource: url }).then(res => {
  695.         let href = window.URL.createObjectURL(new Blob([res])); // 根据后端返回的url对应的文件流创建URL对象
  696.         const link = document.createElement("a"); //创建一个隐藏的a标签
  697.         link.style.display = "none";
  698.         link.href = href; //设置下载的url
  699.         link.download = name; //设置下载的文件名
  700.         document.body.appendChild(link);
  701.         link.click();
  702.         document.body.removeChild(link);
  703.         window.URL.revokeObjectURL(href); // 释放掉blob对象
  704.       });
  705.     },
  706.  
  707.     /** 表格列表文件下载 */
  708.     handleDownloadTable(name, url) {
  709.       downloadFile({ resource: url }).then(res => {
  710.         let href = window.URL.createObjectURL(new Blob([res])); // 根据后端返回的url对应的文件流创建URL对象
  711.         const link = document.createElement("a"); //创建一个隐藏的a标签
  712.         link.style.display = "none";
  713.         link.href = href; //设置下载的url
  714.         link.download = name; //设置下载的文件名
  715.         document.body.appendChild(link);
  716.         link.click();
  717.         document.body.removeChild(link);
  718.         window.URL.revokeObjectURL(href); // 释放掉blob对象
  719.       });
  720.     },
  721.  
  722.     handleWarning(row) {
  723.       getWarningDetail(row.id).then(response => {
  724.         this.activities = response.data;
  725.         this.timelineOpen = true;
  726.       });
  727.     },
  728.     /** 提交审核 */
  729.     handleSubmitReview(row) {
  730.       const pageTitle = this.$route.meta.title;
  731.       const fullPath = this.$route.fullPath.replaceAll("/", "");
  732.       const id = row.id || this.ids;
  733.       console.log(fullPath);
  734.       this.$modal
  735.         .confirm("是否确认提交审核")
  736.         .then(function() {
  737.           return submitContent(id, pageTitle, fullPath);
  738.         })
  739.         .then(() => {
  740.           this.getList();
  741.           this.$modal.msgSuccess("提交审核成功");
  742.         })
  743.         .catch(() => {});
  744.     },
  745.  
  746.     //分配权限 开始
  747.     //分配权限  打开弹窗
  748.     handleAssignPermissions(row) {
  749.       this.assignPermissions = true;
  750.       this.assignPermissionsKey = !this.assignPermissionsKey;
  751.       this.newId = row.id;
  752.       this.title = row.title;
  753.     },
  754.     //分配权限 点击保存按钮
  755.     handleSaveBtn() {
  756.       this.$refs.assignPermissions.submitData();
  757.     },
  758.     // 分配权限 保存成功之后    孙组件调用 关闭弹窗
  759.     closeAssignPermissions() {
  760.       this.assignPermissions = false;
  761.     },
  762.     //分配权限 结束
  763.     //反馈开始
  764.     //反馈打开弹窗
  765.     handleFeedback(row) {
  766.       this.feedbackDialogVisible = true;
  767.       this.feedbackNewId = row.id;
  768.       this.feedbackTitle = row.title;
  769.       this.feedBackContent = "";
  770.     },
  771.     //反馈 点击保存按钮
  772.     handleFeedbackSaveBtn() {
  773.       let url = "/party/feedback/feedback";
  774.       let obj = {};
  775.       obj.feedBackContent = this.feedBackContent;
  776.       obj.name = this.menuName;
  777.       obj.newId = this.feedbackNewId;
  778.       postSaveData(url, obj).then(res => {
  779.         if (res.code === 200) {
  780.           this.$message({
  781.             message: "保存成功",
  782.             type: "success"
  783.           });
  784.           this.feedbackDialogVisible = false;
  785.           this.getList();
  786.         } else {
  787.           this.$message({
  788.             message: "保存失败,请确认",
  789.             type: "warning"
  790.           });
  791.         }
  792.       });
  793.     }
  794.     //反馈结束
  795.   }
  796. };
  797. </script>

el-select 单选:  数据是字符串或者number类型

  1. <template>
  2.   <div class="app-container">
  3.     <el-form
  4.       :model="queryParams"
  5.       ref="queryForm"
  6.       size="small"
  7.       :inline="true"
  8.       v-show="showSearch"
  9.       label-width="68px"
  10.     >
  11.       <el-form-item label="称号" prop="title">
  12.         <el-input
  13.           v-model="queryParams.title"
  14.           placeholder="请输入称号"
  15.           clearable
  16.           @keyup.enter.native="handleQuery"
  17.         />
  18.       </el-form-item>
  19.       <el-form-item label="姓名" prop="name">
  20.         <el-input
  21.           v-model="queryParams.name"
  22.           placeholder="请输入姓名"
  23.           clearable
  24.           @keyup.enter.native="handleQuery"
  25.         />
  26.       </el-form-item>
  27.       <el-form-item label="组织" prop="organizationName">
  28.         <el-input
  29.           v-model="queryParams.organizationName"
  30.           placeholder="请输入组织"
  31.           clearable
  32.           @keyup.enter.native="handleQuery"
  33.         />
  34.       </el-form-item>
  35.       <el-form-item label="授予单位" prop="grantCompany">
  36.         <el-input
  37.           v-model="queryParams.grantCompany"
  38.           placeholder="请输入授予单位"
  39.           clearable
  40.           @keyup.enter.native="handleQuery"
  41.         />
  42.       </el-form-item>
  43.       <el-form-item label="行政级别" prop="grantCompanyLevel">
  44.         <el-select
  45.           v-model="queryParams.grantCompanyLevel"
  46.           placeholder="请选择授予单位行政级别"
  47.           clearable
  48.           style="width: 240px"
  49.         >
  50.           <el-option
  51.             v-for="dict in dict.type.grant_company_level"
  52.             :key="dict.value"
  53.             :label="dict.label"
  54.             :value="dict.value"
  55.           />
  56.         </el-select>
  57.       </el-form-item>
  58.       <!--  <el-form-item label="数据来源" prop="origin">
  59.               <el-input
  60.                 v-model="queryParams.origin"
  61.                 placeholder="请输入数据来源"
  62.                 clearable
  63.                 @keyup.enter.native="handleQuery"/>
  64.       </el-form-item>-->
  65.       <!--  <el-form-item label="单位" prop="organization">
  66.         <el-input
  67.           v-model="queryParams.organization"
  68.           placeholder="请输入单位"
  69.           clearable
  70.           @keyup.enter.native="handleQuery"
  71.         />
  72.       </el-form-item>
  73.       -->
  74.  
  75.       <!--      <el-form-item label="审核状态" prop="status">
  76.                              <el-select
  77.                                v-model="queryParams.status"
  78.                                placeholder="审核状态"
  79.                                clearable
  80.                                style="width: 240px"
  81.                              >
  82.                                <el-option
  83.                                  v-for="dict in dict.type.status"
  84.                                  :key="dict.value"
  85.                                  :label="dict.label"
  86.                                  :value="dict.value"
  87.                                />
  88.                              </el-select>
  89.       </el-form-item>-->
  90.       <el-form-item>
  91.         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  92.         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  93.       </el-form-item>
  94.     </el-form>
  95.  
  96.     <el-row :gutter="10" class="mb8">
  97.       <el-col :span="1.5">
  98.         <el-button
  99.           type="primary"
  100.           plain
  101.           icon="el-icon-plus"
  102.           size="mini"
  103.           @click="handleAdd"
  104.           v-hasPermi="['party:record:add']"
  105.         >新增</el-button>
  106.       </el-col>
  107.       <el-col :span="1.5">
  108.         <el-button
  109.           type="success"
  110.           plain
  111.           icon="el-icon-edit"
  112.           size="mini"
  113.           :disabled="single"
  114.           @click="handleUpdate"
  115.           v-hasPermi="['party:record:edit']"
  116.         >修改</el-button>
  117.       </el-col>
  118.       <el-col :span="1.5">
  119.         <el-button
  120.           type="danger"
  121.           plain
  122.           icon="el-icon-delete"
  123.           size="mini"
  124.           :disabled="multiple"
  125.           @click="handleDelete"
  126.           v-hasPermi="['party:record:remove']"
  127.         >删除</el-button>
  128.       </el-col>
  129.       <el-col :span="1.5">
  130.         <el-button
  131.           type="warning"
  132.           plain
  133.           icon="el-icon-download"
  134.           size="mini"
  135.           @click="handleExport"
  136.           v-hasPermi="['party:record:export']"
  137.         >导出</el-button>
  138.       </el-col>
  139.       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  140.     </el-row>
  141.  
  142.     <el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
  143.       <el-table-column type="selection" width="55" align="center" />
  144.       <el-table-column label="称号" align="center" prop="title" />
  145.       <el-table-column label="姓名" align="center" prop="name" />
  146.       <el-table-column label="组织" align="center" prop="organizationName" />
  147.       <el-table-column label="授予单位" align="center" prop="grantCompany" />
  148.       <el-table-column label="授予单位行政级别" align="center" prop="grantCompanyLevel">
  149.         <template slot-scope="scope">
  150.           <dict-tag :options="dict.type.grant_company_level" :value="scope.row.grantCompanyLevel" />
  151.         </template>
  152.       </el-table-column>
  153.       <el-table-column label="附件" align="center" prop="fileName">
  154.         <template slot-scope="scope">
  155.           <span class="span-text" v-if="scope.row.file !== undefined">
  156.             <div
  157.               v-for="(item, index) in scope.row.fileName"
  158.               :key="index"
  159.               style="color: red;cursor: pointer;"
  160.               @click="handleDownloadTable(item, scope.row.file.split(',')[index] )"
  161.             >{{ item}}</div>
  162.           </span>
  163.         </template>
  164.       </el-table-column>
  165.       <!-- <el-table-column label="数据来源" align="center" prop="origin" />
  166.       <el-table-column label="审核状态" align="center" prop="status" >
  167.                   <template slot-scope="scope">
  168.                       <dict-tag :options="dict.type.status" :value="scope.row.status"/>
  169.                   </template>
  170.       </el-table-column>
  171.       -->
  172.       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  173.         <template slot-scope="scope">
  174.           <el-button
  175.             size="mini"
  176.             type="text"
  177.             icon="el-icon-edit"
  178.             @click="handleDetail(scope.row, true)"
  179.             v-hasPermi="['party:record:query']"
  180.           >查看详情</el-button>
  181.  
  182.           <el-button
  183.             size="mini"
  184.             type="text"
  185.             icon="el-icon-edit"
  186.             @click="handleUpdate(scope.row,false)"
  187.             v-hasPermi="['party:record:edit']"
  188.           >修改</el-button>
  189.  
  190.           <el-button
  191.             size="mini"
  192.             type="text"
  193.             icon="el-icon-delete"
  194.             @click="handleDelete(scope.row)"
  195.             v-hasPermi="['party:record:remove']"
  196.           >删除</el-button>
  197.           <!--                             <el-button
  198.                                         v-if="scope.row.status == 2 || scope.row.status == 3|| scope.row.status == 4"
  199.                                         size="mini"
  200.                                         type="text"
  201.                                         icon="el-icon-view"
  202.                                         @click="handleRecord(scope.row)"
  203.                                         v-hasPermi="['party:record:getRecordDetail']"
  204.                                       >查看进度</el-button>
  205.                                       <el-button
  206.                                         v-if="scope.row.status == 1 || scope.row.status == 4"
  207.                                         size="mini"
  208.                                         type="text"
  209.                                         icon="el-icon-edit"
  210.                                         @click="handleSubmitReview(scope.row)"
  211.                                         v-hasPermi="['party:record:submit']"
  212.           >提交审核</el-button>-->
  213.  
  214.           <el-button
  215.             size="mini"
  216.             type="text"
  217.             icon="el-icon-upload2"
  218.             @click="handleIsTop(scope.row)"
  219.             v-if="scope.$index != 0 || queryParams.pageNum != 1"
  220.             v-hasPermi="['party:record:isTop']"
  221.           >置顶</el-button>
  222.         </template>
  223.       </el-table-column>
  224.     </el-table>
  225.  
  226.     <pagination
  227.       v-show="total>0"
  228.       :total="total"
  229.       :page.sync="queryParams.pageNum"
  230.       :limit.sync="queryParams.pageSize"
  231.       @pagination="getList"
  232.     />
  233.  
  234.     <!-- 添加或修改表彰记录信息对话框 -->
  235.     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  236.       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  237.         <el-form-item label="称号" prop="title">
  238.           <el-input v-model="form.title" placeholder="请输入称号" />
  239.         </el-form-item>
  240.         <!--        <el-form-item label="姓名" prop="name">
  241.           <el-input v-model="form.name" placeholder="请输入姓名" />
  242.         </el-form-item>-->
  243.         <el-form-item label="人员" prop="name">
  244.           <el-select
  245.             v-model="form.unionUserId"
  246.             placeholder="请选择人员"
  247.             filterable
  248.             clearable
  249.             style="width:100%"
  250.             :filter-method="userFilter"
  251.           >
  252.             <el-option
  253.               v-for="dict in renderOption"
  254.               :key="dict.userId"
  255.               :label="dict.label"
  256.               :value="dict.userId"
  257.             />
  258.           </el-select>
  259.         </el-form-item>
  260.         <el-form-item label="部门" prop="department">
  261.           <el-input v-model="form.department" placeholder="请输入部门" />
  262.         </el-form-item>
  263.         <el-form-item label="授予单位" prop="grantCompany">
  264.           <el-input v-model="form.grantCompany" placeholder="请输入授予单位" />
  265.         </el-form-item>
  266.         <el-form-item label="行政级别" prop="grantCompanyLevel">
  267.           <el-select
  268.             v-model="form.grantCompanyLevel"
  269.             placeholder="请选择授予单位行政级别"
  270.             filterable
  271.             clearable
  272.           >
  273.             <el-option
  274.               v-for="dict in dict.type.grant_company_level"
  275.               :key="dict.value"
  276.               :label="dict.label"
  277.               :value="dict.value"
  278.             />
  279.           </el-select>
  280.         </el-form-item>
  281.         <el-form-item label="组织" prop="organization">
  282.           <treeselect
  283.             v-model="form.organization"
  284.             :options="deptOptions"
  285.             :show-count="true"
  286.             placeholder="请选择组织"
  287.           />
  288.         </el-form-item>
  289.         <el-form-item label="附件">
  290.           <file-upload v-model="form.file" />
  291.         </el-form-item>
  292.         <el-form-item label="数据来源" prop="origin" v-if="form.origin!=null">
  293.           <el-input v-model="form.origin" placeholder="请输入数据来源" disabled />
  294.         </el-form-item>
  295.       </el-form>
  296.       <div slot="footer" class="dialog-footer">
  297.         <el-button type="primary" @click="submitForm">确 定</el-button>
  298.         <el-button @click="cancel">取 消</el-button>
  299.       </div>
  300.     </el-dialog>
  301.  
  302.     <!-- 查看政治轮训对话框 -->
  303.     <el-dialog :title="title" :visible.sync="detail" width="500px" append-to-body>
  304.       <look-details :detailId="detailId" />
  305.       <div slot="footer" class="dialog-footer">
  306.         <el-button @click="cancelDetail">关 闭</el-button>
  307.       </div>
  308.     </el-dialog>
  309.  
  310.     <el-dialog title="查看流程进度" :visible.sync="timelineOpen" width="800px" append-to-body>
  311.       <el-timeline :reverse="false">
  312.         <el-timeline-item
  313.           v-for="(activity, index) in activities"
  314.           :key="index"
  315.           :timestamp="activity.timestamp"
  316.           :color="activity.color"
  317.           placement="top"
  318.         >
  319.           <el-card>
  320.             <h4 v-if="activity.type =='startEvent'">流程开始：{{activity.content}}</h4>
  321.             <h4 v-else-if="activity.type =='userTask'">流程审核：{{activity.content}}</h4>
  322.             <h4 v-else-if="activity.type =='endEvent'">流程结束：{{activity.content}}</h4>
  323.             <h4 v-else>其他流程：{{activity.content}}</h4>
  324.             <p v-if="activity.operator !=='' && activity.operator !== undefined">
  325.               <template
  326.                 v-if="activity.finishTime !== '' && activity.finishTime !== undefined"
  327.               >于 {{activity.finishTime}}, {{activity.operator}}</template>
  328.               <template v-else>{{activity.operator}} 处理中</template>
  329.             </p>
  330.             <p v-else-if="activity.type =='userTask'">等待审核</p>
  331.             <p v-else>{{activity.timestamp}}</p>
  332.           </el-card>
  333.         </el-timeline-item>
  334.       </el-timeline>
  335.     </el-dialog>
  336.   </div>
  337. </template>
  338.  
  339. <script>
  340. import {
  341.   listRecord,
  342.   getRecord,
  343.   delRecord,
  344.   addRecord,
  345.   updateRecord,
  346.   getRecordDetail,
  347.   submitContent
  348. } from "@/api/party/culture/record";
  349. import { listAllUser, getAllUserNew } from "@/api/system/user";
  350. import { downloadFile } from "@/api/common/common";
  351. import { treeselect } from "@/api/system/dept";
  352. import Treeselect from "@riophae/vue-treeselect";
  353. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  354. import { IsTop } from "@/api/common/common";
  355. import lookDetails from "./components/LookDetails";
  356. export default {
  357.   name: "Record",
  358.   dicts: ["status", "grant_company_level"],
  359.   components: { Treeselect, lookDetails },
  360.   data() {
  361.     return {
  362.       renderOption: [],
  363.       detailId: 0,
  364.       // 遮罩层
  365.       loading: true,
  366.       // 选中数组
  367.       ids: [],
  368.       // 非单个禁用
  369.       single: true,
  370.       // 非多个禁用
  371.       multiple: true,
  372.       // 显示搜索条件
  373.       showSearch: true,
  374.       // 总条数
  375.       total: 0,
  376.       // 部门树选项
  377.       deptOptions: undefined,
  378.       //用户列表
  379.       userList: [],
  380.       // 表彰记录信息表格数据
  381.       recordList: [],
  382.       //流程进度列表
  383.       activities: [],
  384.       // 时间线显示
  385.       timelineOpen: false,
  386.       // 弹出层标题
  387.       title: "",
  388.       // 是否显示弹出层
  389.       open: false,
  390.       detail: false,
  391.       // 查询参数
  392.       queryParams: {
  393.         pageNum: 1,
  394.         pageSize: 10,
  395.         title: null,
  396.         name: null,
  397.         image: null,
  398.         file: null,
  399.         content: null,
  400.         status: null,
  401.         reviewComment: null,
  402.         processInstanceId: null,
  403.         organization: null,
  404.         department: null,
  405.         grantCompany: null,
  406.         grantCompanyLevel: null
  407.       },
  408.       // 表单参数
  409.       form: {},
  410.       // 表单校验
  411.       rules: {
  412.         title: [{ required: true, message: "请输入称号", trigger: "blur" }],
  413.         organization: [
  414.           { required: true, message: "请输入组织", trigger: "blur" }
  415.         ]
  416.       }
  417.     };
  418.   },
  419.   created() {
  420.     this.getList();
  421.     this.getTreeselect();
  422.     this.getAllUser();
  423.   },
  424.   methods: {
  425.     // 置顶
  426.     handleIsTop(row) {
  427.       // console.log(row, "rrrrrrrrrrrrrrrrr");
  428.       let id = row.id;
  429.       // /dev-api/party/record/updateIsTop/{id}/{isTop}
  430.       let url = "/party/record/updateIsTop";
  431.       IsTop(url, id).then(response => {
  432.         if (response.code === 200) {
  433.           this.getList();
  434.         }
  435.       });
  436.     },
  437.  
  438.     /** 查询表彰记录信息列表 */
  439.     getList() {
  440.       this.loading = true;
  441.       listRecord(this.queryParams).then(response => {
  442.         this.recordList = response.rows;
  443.         this.total = response.total;
  444.         this.loading = false;
  445.       });
  446.     },
  447.     // 取消按钮
  448.     cancel() {
  449.       this.open = false;
  450.       this.reset();
  451.     },
  452.     // 表单重置
  453.     reset() {
  454.       this.form = {
  455.         id: null,
  456.         title: null,
  457.         unionUserId: null,
  458.         image: null,
  459.         file: null,
  460.         content: null,
  461.         status: 0,
  462.         reviewComment: null,
  463.         createBy: null,
  464.         createTime: null,
  465.         updateBy: null,
  466.         updateTime: null,
  467.         delFlag: null,
  468.         processInstanceId: null,
  469.         organization: null,
  470.         department: null,
  471.         grantCompany: null,
  472.         grantCompanyLevel: null
  473.       };
  474.       this.resetForm("form");
  475.     },
  476.     /** 搜索按钮操作 */
  477.     handleQuery() {
  478.       this.queryParams.pageNum = 1;
  479.       this.getList();
  480.     },
  481.     /** 重置按钮操作 */
  482.     resetQuery() {
  483.       this.resetForm("queryForm");
  484.       this.handleQuery();
  485.     },
  486.     /** 查询部门下拉树结构 */
  487.     getTreeselect() {
  488.       treeselect().then(response => {
  489.         this.deptOptions = response.data;
  490.       });
  491.     },
  492.     getAllUser() {
  493.       // listAllUser().then(response => {
  494.       getAllUserNew().then(response => {
  495.         this.userList = response.data;
  496.         this.userFilter();
  497.       });
  498.     },
  499.  
  500.     userFilter(query = "") {
  501.       let arr = this.userList.filter(item => {
  502.         return item.label.includes(query);
  503.       });
  504.       if (arr.length > 500) {
  505.         this.renderOption = arr.slice(0, 5);
  506.       } else {
  507.         this.renderOption = arr;
  508.       }
  509.       let str = this.form.unionUserId;
  510.       if (str) {
  511.         this.addOptions(str);
  512.       }
  513.     },
  514.  
  515.     addOptions(item) {
  516.       let str = this.renderOption.some(t => item === t.userId);
  517.       let arr = [];
  518.       if (!str) {
  519.         arr = this.userList.filter(ele => {
  520.           return ele.userId === item;
  521.         });
  522.         this.renderOption = arr.concat(this.renderOption);
  523.       }
  524.     },
  525.  
  526.     // 多选框选中数据
  527.     handleSelectionChange(selection) {
  528.       this.ids = selection.map(item => item.id);
  529.       this.single = selection.length !== 1;
  530.       this.multiple = !selection.length;
  531.     },
  532.     /** 新增按钮操作 */
  533.     handleAdd() {
  534.       this.reset();
  535.       this.getTreeselect();
  536.       this.getAllUser();
  537.       this.open = true;
  538.       this.title = "添加表彰奖励";
  539.     },
  540.     /** 修改按钮操作 */
  541.     handleUpdate(row) {
  542.       this.getTreeselect();
  543.       this.getAllUser();
  544.       this.reset();
  545.       const id = row.id || this.ids;
  546.       getRecord(id).then(response => {
  547.         this.form = response.data;
  548.         console.log(
  549.           this.form,
  550.           "66666666666666this.formthis.formthis.formthis.form"
  551.         );
  552.         this.open = true;
  553.         this.title = "修改表彰奖励";
  554.       });
  555.     },
  556.  
  557.     /** 查看详情按钮操作 */
  558.     handleDetail(row) {
  559.       this.reset();
  560.       this.detail = true;
  561.       this.title = "查看表彰奖励";
  562.       this.detailId = row.id;
  563.       // const id = row.id || this.ids;
  564.       // getRecord(id).then(response => {
  565.       //   this.form = response.data;
  566.       //   this.detail = true;
  567.       //   this.title = "查看表彰奖励";
  568.       // });
  569.     },
  570.  
  571.     // 取消详情按钮
  572.     cancelDetail() {
  573.       this.detail = false;
  574.       //this.reset();
  575.     },
  576.  
  577.     /** 提交按钮 */
  578.     submitForm() {
  579.       console.log(this.form, "999999999999999999999999");
  580.       this.$refs["form"].validate(valid => {
  581.         if (valid) {
  582.           if (this.form.id != null) {
  583.             updateRecord(this.form).then(response => {
  584.               this.$modal.msgSuccess("修改成功");
  585.               this.open = false;
  586.               this.detailId = 0;
  587.               this.getList();
  588.             });
  589.           } else {
  590.             addRecord(this.form).then(response => {
  591.               this.$modal.msgSuccess("新增成功");
  592.               this.open = false;
  593.               this.getList();
  594.             });
  595.           }
  596.         }
  597.       });
  598.     },
  599.     /** 删除按钮操作 */
  600.     handleDelete(row) {
  601.       const ids = row.id || this.ids;
  602.       this.$modal
  603.         .confirm('是否确认删除表彰记录信息编号为"' + ids + '"的数据项？')
  604.         .then(function() {
  605.           return delRecord(ids);
  606.         })
  607.         .then(() => {
  608.           this.getList();
  609.           this.$modal.msgSuccess("删除成功");
  610.         })
  611.         .catch(() => {});
  612.     },
  613.     /** 导出按钮操作 */
  614.     handleExport() {
  615.       this.download(
  616.         "party/record/export",
  617.         {
  618.           ...this.queryParams
  619.         },
  620.         `record_${new Date().getTime()}.xlsx`
  621.       );
  622.     },
  623.     handleRecord(row) {
  624.       getRecordDetail(row.id).then(response => {
  625.         this.activities = response.data;
  626.         this.timelineOpen = true;
  627.       });
  628.     },
  629.     /** 提交审核 */
  630.     handleSubmitReview(row) {
  631.       const pageTitle = this.$route.meta.title;
  632.       const fullPath = this.$route.fullPath.replaceAll("/", "");
  633.       const id = row.id || this.ids;
  634.       console.log(fullPath);
  635.       this.$modal
  636.         .confirm("是否确认提交审核")
  637.         .then(function() {
  638.           return submitContent(id, pageTitle, fullPath);
  639.         })
  640.         .then(() => {
  641.           this.getList();
  642.           this.$modal.msgSuccess("提交审核成功");
  643.         })
  644.         .catch(() => {});
  645.     },
  646.  
  647.     /** 表格列表文件下载 */
  648.     handleDownloadTable(name, url) {
  649.       downloadFile({ resource: url }).then(res => {
  650.         let href = window.URL.createObjectURL(new Blob([res])); // 根据后端返回的url对应的文件流创建URL对象
  651.         const link = document.createElement("a"); //创建一个隐藏的a标签
  652.         link.style.display = "none";
  653.         link.href = href; //设置下载的url
  654.         link.download = name; //设置下载的文件名
  655.         document.body.appendChild(link);
  656.         link.click();
  657.         document.body.removeChild(link);
  658.         window.URL.revokeObjectURL(href); // 释放掉blob对象
  659.       });
  660.     },
  661.  
  662.     /** 文件下载 */
  663.     handleDownload(row) {
  664.       const url = row.file;
  665.       const name = row.fileName;
  666.       downloadFile({ resource: url }).then(res => {
  667.         let href = window.URL.createObjectURL(new Blob([res])); // 根据后端返回的url对应的文件流创建URL对象
  668.         const link = document.createElement("a"); //创建一个隐藏的a标签
  669.         link.style.display = "none";
  670.         link.href = href; //设置下载的url
  671.         link.download = name; //设置下载的文件名
  672.         document.body.appendChild(link);
  673.         link.click();
  674.         document.body.removeChild(link);
  675.         window.URL.revokeObjectURL(href); // 释放掉blob对象
  676.       });
  677.     }
  678.   }
  679. };
  680. </script>

element el-select 数据太多导致卡顿解决方案 - 简书

vue的form表单el-select下拉框数据量大导致页面卡死崩溃解决办法，使用懒加载方法加载数据解决页面卡顿 - 灰信网（软件开发博客聚合） 

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读