devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ruoyi-nbcio-plus基于vue3的flowable的自定义业务单表例子的升级修改

作者：菜鸟追梦旅行 | 2024-04-13 18:59:00

赞

踩

ruoyi-nbcio-plus基于vue3的flowable的自定义业务单表例子的升级修改

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/

更多nbcio-boot功能请看演示系统 

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5） ： http://122.227.135.243:9888

1、原先demo的vue2代码如下：

  1. <template>
  2.   <div class="app-container">
  3.     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
  4.       <el-form-item label="用户账号" prop="userName">
  5.         <el-input
  6.           v-model="queryParams.userName"
  7.           placeholder="请输入用户账号"
  8.           clearable
  9.           @keyup.enter.native="handleQuery"
  10.         />
  11.       </el-form-item>
  12.       <el-form-item label="用户昵称" prop="nickName">
  13.         <el-input
  14.           v-model="queryParams.nickName"
  15.           placeholder="请输入用户昵称"
  16.           clearable
  17.           @keyup.enter.native="handleQuery"
  18.         />
  19.       </el-form-item>
  20.       <el-form-item label="用户邮箱" prop="email">
  21.         <el-input
  22.           v-model="queryParams.email"
  23.           placeholder="请输入用户邮箱"
  24.           clearable
  25.           @keyup.enter.native="handleQuery"
  26.         />
  27.       </el-form-item>
  28.       <el-form-item label="头像地址" prop="avatar">
  29.         <el-input
  30.           v-model="queryParams.avatar"
  31.           placeholder="请输入头像地址"
  32.           clearable
  33.           @keyup.enter.native="handleQuery"
  34.         />
  35.       </el-form-item>
  36.       <el-form-item>
  37.         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  38.         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  39.       </el-form-item>
  40.     </el-form>
  41.  
  42.     <el-row :gutter="10" class="mb8">
  43.       <el-col :span="1.5">
  44.         <el-button
  45.           type="primary"
  46.           plain
  47.           icon="el-icon-plus"
  48.           size="mini"
  49.           @click="handleAdd"
  50.           v-hasPermi="['workflow:demo:add']"
  51.         >新增</el-button>
  52.       </el-col>
  53.       <el-col :span="1.5">
  54.         <el-button
  55.           type="success"
  56.           plain
  57.           icon="el-icon-edit"
  58.           size="mini"
  59.           :disabled="single"
  60.           @click="handleUpdate"
  61.           v-hasPermi="['workflow:demo:edit']"
  62.         >修改</el-button>
  63.       </el-col>
  64.       <el-col :span="1.5">
  65.         <el-button
  66.           type="danger"
  67.           plain
  68.           icon="el-icon-delete"
  69.           size="mini"
  70.           :disabled="multiple"
  71.           @click="handleDelete"
  72.           v-hasPermi="['workflow:demo:remove']"
  73.         >删除</el-button>
  74.       </el-col>
  75.       <el-col :span="1.5">
  76.         <el-button
  77.           type="warning"
  78.           plain
  79.           icon="el-icon-download"
  80.           size="mini"
  81.           @click="handleExport"
  82.           v-hasPermi="['workflow:demo:export']"
  83.         >导出</el-button>
  84.       </el-col>
  85.       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  86.     </el-row>
  87.     <el-table v-loading="loading" :data="demoList" @selection-change="handleSelectionChange">
  88.       <el-table-column type="selection" width="30" align="center" />
  89.       <el-table-column label="用户ID" align="center" prop="demoId" v-if="true"/>
  90.       <el-table-column label="用户账号" align="center" prop="userName" />
  91.       <el-table-column label="用户昵称" align="center" prop="nickName" />
  92.       <el-table-column label="流程状态" align="center" prop="actStatus" />
  93.       <el-table-column label="待处理节点" align="center" prop="taskName" />
  94.       <el-table-column label="处理人" align="center" prop="todoUsers" />
  95.       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  96.         <template slot-scope="scope">
  97.           <act-apply-btn @success="getList" :data-id="String(scope.row.demoId)" :serviceName="serviceName" :variables="scope.row"></act-apply-btn>
  98.           <!--<act-handle-btn @success="getList" :data-id="scope.row.demoId" :type="0" text="通过"></act-handle-btn>
  99.           <act-handle-btn @success="getList" :data-id="scope.row.demoId" :type="1" text="驳回"></act-handle-btn>
  100.           <act-handle-btn @success="getList" :data-id="scope.row.demoId" :type="2" text="退回"></act-handle-btn>
  101.           <act-cancel-btn @success="getList" :data-id="scope.row.demoId"></act-cancel-btn>-->
  102.           <act-historic-detail-btn :data-id="String(scope.row.demoId)"></act-historic-detail-btn>
  103.           <a-divider type="vertical" />
  104.           <el-button
  105.             size="medium"
  106.             type="text"
  107.             icon="el-icon-edit"
  108.             @click="handleUpdate(scope.row)"
  109.             v-hasPermi="['workflow:demo:edit']"
  110.           >修改</el-button>
  111.           <el-button
  112.             size="medium"
  113.             type="text"
  114.             icon="el-icon-delete"
  115.             @click="handleDelete(scope.row)"
  116.             v-hasPermi="['workflow:demo:remove']"
  117.           >删除</el-button>
  118.         </template>
  119.       </el-table-column>
  120.     </el-table>
  121.  
  122.     <pagination
  123.       v-show="total>0"
  124.       :total="total"
  125.       :page.sync="queryParams.pageNum"
  126.       :limit.sync="queryParams.pageSize"
  127.       @pagination="getList"
  128.     />
  129.  
  130.     <!-- 添加或修改DEMO对话框 -->
  131.     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  132.       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  133.         <el-form-item label="用户账号" prop="userName">
  134.           <el-input v-model="form.userName" placeholder="请输入用户账号" />
  135.         </el-form-item>
  136.         <el-form-item label="用户昵称" prop="nickName">
  137.           <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
  138.         </el-form-item>
  139.         <el-form-item label="用户邮箱" prop="email">
  140.           <el-input v-model="form.email" placeholder="请输入用户邮箱" />
  141.         </el-form-item>
  142.         <el-form-item label="头像地址" prop="avatar">
  143.           <el-input v-model="form.avatar" placeholder="请输入头像地址" />
  144.         </el-form-item>
  145.         <el-form-item label="备注" prop="remark">
  146.           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
  147.         </el-form-item>
  148.       </el-form>
  149.       <div slot="footer" class="dialog-footer">
  150.         <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
  151.         <el-button @click="cancel">取 消</el-button>
  152.       </div>
  153.     </el-dialog>
  154.   </div>
  155. </template>
  156.  
  157. <script>
  158.   import { listDemo, getDemo, delDemo, addDemo, updateDemo } from "@/api/workflow/demo";
  159.   import ActApplyBtn from "@/views/workflow/components/ActApplyBtn";
  160.   import ActCancelBtn from "@/views/workflow/components/ActCancelBtn";
  161.   import ActHandleBtn from "@/views/workflow/components/ActHandleBtn";
  162.   import ActHistoricDetailBtn from "@/views/workflow/components/ActHistoricDetailBtn";
  163.  
  164. export default {
  165.   name: "Demo",
  166.   components: {
  167.     ActApplyBtn,
  168.     ActCancelBtn,
  169.     ActHandleBtn,
  170.     ActHistoricDetailBtn
  171.   },
  172.   data() {
  173.     return {
  174.       // 按钮loading
  175.       buttonLoading: false,
  176.       // 遮罩层
  177.       loading: true,
  178.       // 选中数组
  179.       ids: [],
  180.       // 非单个禁用
  181.       single: true,
  182.       // 非多个禁用
  183.       multiple: true,
  184.       // 显示搜索条件
  185.       showSearch: true,
  186.       // 总条数
  187.       total: 0,
  188.       // DEMO表格数据
  189.       demoList: [],
  190.       // 弹出层标题
  191.       title: "",
  192.       // 是否显示弹出层
  193.       open: false,
  194.       // 查询参数
  195.       queryParams: {
  196.         pageNum: 1,
  197.         pageSize: 10,
  198.         userName: undefined,
  199.         nickName: undefined,
  200.         email: undefined,
  201.         avatar: undefined,
  202.         status: undefined,
  203.       },
  204.       serviceName: 'wfDemoService',
  205.       // 表单参数
  206.       form: {},
  207.       // 表单校验
  208.       rules: {
  209.         demoId: [
  210.           { required: true, message: "DEMO-ID不能为空", trigger: "blur" }
  211.         ],
  212.         userName: [
  213.           { required: true, message: "用户账号不能为空", trigger: "blur" }
  214.         ]
  215.       }
  216.     };
  217.   },
  218.   created() {
  219.     this.getList();
  220.   },
  221.   methods: {
  222.     /** 查询DEMO列表 */
  223.     getList() {
  224.       this.loading = true;
  225.       listDemo(this.queryParams).then(response => {
  226.         this.demoList = response.rows;
  227.         this.total = response.total;
  228.         this.loading = false;
  229.       });
  230.     },
  231.     // 取消按钮
  232.     cancel() {
  233.       this.open = false;
  234.       this.reset();
  235.     },
  236.     // 表单重置
  237.     reset() {
  238.       this.form = {
  239.         demoId: undefined,
  240.         userName: undefined,
  241.         nickName: undefined,
  242.         email: undefined,
  243.         avatar: undefined,
  244.         status: undefined,
  245.         delFlag: undefined,
  246.         createBy: undefined,
  247.         createTime: undefined,
  248.         updateBy: undefined,
  249.         updateTime: undefined,
  250.         remark: undefined
  251.       };
  252.       this.resetForm("form");
  253.     },
  254.     /** 搜索按钮操作 */
  255.     handleQuery() {
  256.       this.queryParams.pageNum = 1;
  257.       this.getList();
  258.     },
  259.     /** 重置按钮操作 */
  260.     resetQuery() {
  261.       this.resetForm("queryForm");
  262.       this.handleQuery();
  263.     },
  264.     // 多选框选中数据
  265.     handleSelectionChange(selection) {
  266.       this.ids = selection.map(item => item.demoId)
  267.       this.single = selection.length!==1
  268.       this.multiple = !selection.length
  269.     },
  270.     /** 新增按钮操作 */
  271.     handleAdd() {
  272.       this.reset();
  273.       this.open = true;
  274.       this.title = "添加DEMO";
  275.     },
  276.     /** 修改按钮操作 */
  277.     handleUpdate(row) {
  278.       this.loading = true;
  279.       this.reset();
  280.       const demoId = row.demoId || this.ids
  281.       getDemo(demoId).then(response => {
  282.         this.loading = false;
  283.         this.form = response.data;
  284.         this.open = true;
  285.         this.title = "修改DEMO";
  286.       });
  287.     },
  288.     /** 提交按钮 */
  289.     submitForm() {
  290.       this.$refs["form"].validate(valid => {
  291.         if (valid) {
  292.           this.buttonLoading = true;
  293.           if (this.form.demoId != null) {
  294.             updateDemo(this.form).then(response => {
  295.               this.$modal.msgSuccess("修改成功");
  296.               this.open = false;
  297.               this.getList();
  298.             }).finally(() => {
  299.               this.buttonLoading = false;
  300.             });
  301.           } else {
  302.             addDemo(this.form).then(response => {
  303.               this.$modal.msgSuccess("新增成功");
  304.               this.open = false;
  305.               this.getList();
  306.             }).finally(() => {
  307.               this.buttonLoading = false;
  308.             });
  309.           }
  310.         }
  311.       });
  312.     },
  313.     /** 删除按钮操作 */
  314.     handleDelete(row) {
  315.       const demoIds = row.demoId || this.ids;
  316.       this.$modal.confirm('是否确认删除DEMO编号为"' + demoIds + '"的数据项？').then(() => {
  317.         this.loading = true;
  318.         return delDemo(demoIds);
  319.       }).then(() => {
  320.         this.loading = false;
  321.         this.getList();
  322.         this.$modal.msgSuccess("删除成功");
  323.       }).catch(() => {
  324.       }).finally(() => {
  325.         this.loading = false;
  326.       });
  327.     },
  328.     /** 导出按钮操作 */
  329.     handleExport() {
  330.       this.download('workflow/demo/export', {
  331.         ...this.queryParams
  332.       }, `demo_${new Date().getTime()}.xlsx`)
  333.     }
  334.   }
  335. };
  336. </script>

2、修改后的vue3代码如下：

  1. <template>
  2.   <div class="app-container">
  3.     <el-form v-model="queryParams" ref="queryFormRef" size="small" :inline="true" v-show="showSearch" label-width="68px">
  4.       <el-form-item label="用户账号" prop="userName">
  5.         <el-input
  6.           v-model="queryParams.userName"
  7.           placeholder="请输入用户账号"
  8.           clearable
  9.           @keyup.enter.native="handleQuery"
  10.         />
  11.       </el-form-item>
  12.       <el-form-item label="用户昵称" prop="nickName">
  13.         <el-input
  14.           v-model="queryParams.nickName"
  15.           placeholder="请输入用户昵称"
  16.           clearable
  17.           @keyup.enter.native="handleQuery"
  18.         />
  19.       </el-form-item>
  20.       <el-form-item label="用户邮箱" prop="email">
  21.         <el-input
  22.           v-model="queryParams.email"
  23.           placeholder="请输入用户邮箱"
  24.           clearable
  25.           @keyup.enter.native="handleQuery"
  26.         />
  27.       </el-form-item>
  28.       <el-form-item label="头像地址" prop="avatar">
  29.         <el-input
  30.           v-model="queryParams.avatar"
  31.           placeholder="请输入头像地址"
  32.           clearable
  33.           @keyup.enter.native="handleQuery"
  34.         />
  35.       </el-form-item>
  36.       <el-form-item>
  37.         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  38.         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  39.       </el-form-item>
  40.     </el-form>
  41.  
  42.     <el-row :gutter="10" class="mb8">
  43.       <el-col :span="1.5">
  44.         <el-button
  45.           type="primary"
  46.           plain
  47.           icon="el-icon-plus"
  48.           size="mini"
  49.           @click="handleAdd"
  50.           v-hasPermi="['workflow:demo:add']"
  51.         >新增</el-button>
  52.       </el-col>
  53.       <el-col :span="1.5">
  54.         <el-button
  55.           type="success"
  56.           plain
  57.           icon="el-icon-edit"
  58.           size="mini"
  59.           :disabled="single"
  60.           @click="handleUpdate"
  61.           v-hasPermi="['workflow:demo:edit']"
  62.         >修改</el-button>
  63.       </el-col>
  64.       <el-col :span="1.5">
  65.         <el-button
  66.           type="danger"
  67.           plain
  68.           icon="el-icon-delete"
  69.           size="mini"
  70.           :disabled="multiple"
  71.           @click="handleDelete"
  72.           v-hasPermi="['workflow:demo:remove']"
  73.         >删除</el-button>
  74.       </el-col>
  75.       <el-col :span="1.5">
  76.         <el-button
  77.           type="warning"
  78.           plain
  79.           icon="el-icon-download"
  80.           size="mini"
  81.           @click="handleExport"
  82.           v-hasPermi="['workflow:demo:export']"
  83.         >导出</el-button>
  84.       </el-col>
  85.       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  86.     </el-row>
  87.     <el-table v-loading="loading" :data="demoList" @selection-change="handleSelectionChange">
  88.       <el-table-column type="selection" width="30" align="center" />
  89.       <el-table-column label="用户ID" align="center" prop="demoId" v-if="true"/>
  90.       <el-table-column label="用户账号" align="center" prop="userName" />
  91.       <el-table-column label="用户昵称" align="center" prop="nickName" />
  92.       <el-table-column label="流程状态" align="center" prop="actStatus" />
  93.       <el-table-column label="待处理节点" align="center" prop="taskName" />
  94.       <el-table-column label="处理人" align="center" prop="todoUsers" />
  95.       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  96.         <template slot-scope="scope">
  97.           <act-apply-btn @success="getList" :data-id="String(scope.row.demoId)" :serviceName="serviceName" :variables="scope.row"></act-apply-btn>
  98.           <!--<act-handle-btn @success="getList" :data-id="scope.row.demoId" :type="0" text="通过"></act-handle-btn>
  99.           <act-handle-btn @success="getList" :data-id="scope.row.demoId" :type="1" text="驳回"></act-handle-btn>
  100.           <act-handle-btn @success="getList" :data-id="scope.row.demoId" :type="2" text="退回"></act-handle-btn>
  101.           <act-cancel-btn @success="getList" :data-id="scope.row.demoId"></act-cancel-btn>-->
  102.           <act-historic-detail-btn :data-id="String(scope.row.demoId)"></act-historic-detail-btn>
  103.           <a-divider type="vertical" />
  104.           <el-button
  105.             size="medium"
  106.             type="text"
  107.             icon="el-icon-edit"
  108.             @click="handleUpdate(scope.row)"
  109.             v-hasPermi="['workflow:demo:edit']"
  110.           >修改</el-button>
  111.           <el-button
  112.             size="medium"
  113.             type="text"
  114.             icon="el-icon-delete"
  115.             @click="handleDelete(scope.row)"
  116.             v-hasPermi="['workflow:demo:remove']"
  117.           >删除</el-button>
  118.         </template>
  119.       </el-table-column>
  120.     </el-table>
  121.  
  122.     <pagination
  123.       v-show="total>0"
  124.       :total="total"
  125.       :page.sync="queryParams.pageNum"
  126.       :limit.sync="queryParams.pageSize"
  127.       @pagination="getList"
  128.     />
  129.  
  130.     <!-- 添加或修改DEMO对话框 -->
  131.     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  132.       <el-form ref="formRef" v-model="form" :rules="rules" label-width="80px">
  133.         <el-form-item label="用户账号" prop="userName">
  134.           <el-input v-model="form.userName" placeholder="请输入用户账号" />
  135.         </el-form-item>
  136.         <el-form-item label="用户昵称" prop="nickName">
  137.           <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
  138.         </el-form-item>
  139.         <el-form-item label="用户邮箱" prop="email">
  140.           <el-input v-model="form.email" placeholder="请输入用户邮箱" />
  141.         </el-form-item>
  142.         <el-form-item label="头像地址" prop="avatar">
  143.           <el-input v-model="form.avatar" placeholder="请输入头像地址" />
  144.         </el-form-item>
  145.         <el-form-item label="备注" prop="remark">
  146.           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
  147.         </el-form-item>
  148.       </el-form>
  149.       <div slot="footer" class="dialog-footer">
  150.         <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
  151.         <el-button @click="cancel">取 消</el-button>
  152.       </div>
  153.     </el-dialog>
  154.   </div>
  155. </template>
  156.  
  157. <script setup name="WDemo" lang="ts">
  158.   import { listDemo, getDemo, delDemo, addDemo, updateDemo } from "@/api/workflow/demo";
  159.   import ActApplyBtn from "@/views/workflow/components/ActApplyBtn";
  160.   import ActCancelBtn from "@/views/workflow/components/ActCancelBtn";
  161.   import ActHandleBtn from "@/views/workflow/components/ActHandleBtn";
  162.   import ActHistoricDetailBtn from "@/views/workflow/components/ActHistoricDetailBtn";
  163.  
  164.   const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  165.   const queryFormRef = ref(null)
  166.   const formRef = ref(null)
  167.   // 按钮loading
  168.   const buttonLoading = ref(false)
  169.   // 遮罩层
  170.   const loading = ref(true)
  171.   // 选中数组
  172.   const ids = ref<any>([])
  173.   // 非单个禁用
  174.   const single = ref(true)
  175.   // 非多个禁用
  176.   const multiple = ref(true)
  177.   // 显示搜索条件
  178.   const showSearch = ref(true)
  179.   // 总条数
  180.   const total = ref(0)
  181.   // DEMO表格数据
  182.   const demoList = ref<any>([])
  183.   // 弹出层标题
  184.   const title = ref("")
  185.   // 是否显示弹出层
  186.   const open = ref(false)
  187.   // 查询参数
  188.   const queryParams = ref ({
  189.     pageNum: 1,
  190.     pageSize: 10,
  191.     userName: undefined,
  192.     nickName: undefined,
  193.     email: undefined,
  194.     avatar: undefined,
  195.     status: undefined,
  196.   })
  197.   const serviceName = ref('wfDemoService')
  198.   // 表单参数
  199.   const form = ref<any>({})
  200.   // 表单校验
  201.   const rules = ref({
  202.     demoId: [
  203.       { required: true, message: "DEMO-ID不能为空", trigger: "blur" }
  204.     ],
  205.     userName: [
  206.       { required: true, message: "用户账号不能为空", trigger: "blur" }
  207.     ]
  208.   })
  209.   /** 查询DEMO列表 */
  210.   const getList = () => {
  211.     loading.value = true;
  212.     listDemo(queryParams.value).then(response => {
  213.       demoList.value = response.rows;
  214.       total.value = response.total;
  215.       loading.value = false;
  216.     });
  217.   }
  218.   // 取消按钮
  219.   const cancel = () => {
  220.     open.value = false;
  221.     reset();
  222.   }
  223.   // 表单重置
  224.   const reset = () => {
  225.     form.value = {
  226.       demoId: undefined,
  227.       userName: undefined,
  228.       nickName: undefined,
  229.       email: undefined,
  230.       avatar: undefined,
  231.       status: undefined,
  232.       delFlag: undefined,
  233.       createBy: undefined,
  234.       createTime: undefined,
  235.       updateBy: undefined,
  236.       updateTime: undefined,
  237.       remark: undefined
  238.     };
  239.     formRef.value?.resetFields();
  240.   }
  241.   /** 搜索按钮操作 */
  242.   const handleQuery = () => {
  243.     queryParams.value.pageNum = 1;
  244.     getList();
  245.   }
  246.   /** 重置按钮操作 */
  247.   const resetQuery = () => {
  248.     queryFormRef.value?.resetFields();
  249.     handleQuery();
  250.   }
  251.   // 多选框选中数据
  252.   const handleSelectionChange = (selection) => {
  253.     ids.value = selection.map(item => item.demoId)
  254.     single.value = selection.length!==1
  255.     multiple.value = !selection.length
  256.   }
  257.   /** 新增按钮操作 */
  258.   const handleAdd = () => {
  259.     reset();
  260.     open.value = true;
  261.     title.value = "添加DEMO";
  262.   }
  263.   /** 修改按钮操作 */
  264.   const handleUpdate = (row) => {
  265.     loading.value = true;
  266.     reset();
  267.     const demoId = row.demoId || ids.value
  268.     getDemo(demoId).then(response => {
  269.       loading.value = false;
  270.       form.value = response.data;
  271.       open.value = true;
  272.       title.value = "修改DEMO";
  273.     });
  274.   }
  275.   /** 提交按钮 */
  276.   const submitForm = () => {
  277.     formRef.validate(valid => {
  278.       if (valid) {
  279.         buttonLoading.value = true;
  280.         if (form.value.demoId != null) {
  281.           updateDemo(form.value).then(response => {
  282.             proxy?.$modal.msgSuccess("修改成功");
  283.             open.value = false;
  284.             getList();
  285.           }).finally(() => {
  286.             buttonLoading.value = false;
  287.           });
  288.         } else {
  289.           addDemo(form.value).then(response => {
  290.             proxy?.$modal.msgSuccess("新增成功");
  291.             open.value = false;
  292.             getList();
  293.           }).finally(() => {
  294.             buttonLoading.value = false;
  295.           });
  296.         }
  297.       }
  298.     });
  299.   }
  300.   /** 删除按钮操作 */
  301.   const handleDelete = (row) => {
  302.     const demoIds = row.demoId || ids.value;
  303.     proxy?.$modal.confirm('是否确认删除DEMO编号为"' + demoIds + '"的数据项？').then(() => {
  304.       loading.value = true;
  305.       return delDemo(demoIds);
  306.     }).then(() => {
  307.       loading.value = false;
  308.       getList();
  309.       proxy?.$modal.msgSuccess("删除成功");
  310.     }).catch(() => {
  311.     }).finally(() => {
  312.       loading.value = false;
  313.     });
  314.   }
  315.   /** 导出按钮操作 */
  316.   const handleExport = () => {
  317.     this.download('workflow/demo/export', {
  318.       ...queryParams.value
  319.     }, `demo_${new Date().getTime()}.xlsx`)
  320.   }
  321.  
  322.   onMounted(() => {
  323.     getList();
  324.   })
  325.  
  326. </script>

3、效果图图如下:

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/418013
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号