JeecgBoot 3.6.1实现Modal对话框,以审核数据为例

JeecgBoot 3.6.1实现Modal对话框

vue使用的是3.0版本

前言

在工作中，有一个需求，要求，在数据列表页，实现点击最右侧的审批按钮，出现弹窗，弹窗内容有本条数据的所有内容和审核选项，选项值有【审核通过】【审核驳回】两个选项，如果点击【审核驳回】按钮，下方要出现驳回原因录入框，示例图片如下：

图片示例：图一为列表，图二为选择【审核驳回】，图三为选择【审核通过】

点击审核示例（此处页面样式有点问题）：

一、列表页面关键代码示例

<template>
  <div>
	<!--操作栏-->
	<!-- 此处就是我们列表右侧所要呈现出来的点击按钮-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    <!-- 审批表单 -->
    
    <test-modal @register="register" @success="testFun" v-bind="$attrs"></purchase-order-process-audit-modal>
  </div>
</template>


<script lang="ts" setup>
	import {******} // 此处就是我们项目当中的一些引用
	
	// 此处有个比较关键的点，我们要再次引入我们所要创建的modal对话框模板
	// 这就是我们的modal模板它跟上边的test-modal相对应，
	// 最好使用快捷键来写这两处代码，以防止错误发	生，并且再此之前要把textAuditModal.vue新建好
	import testModalfrom '@/views/*/textAuditModal.vue';
	// 接下来就是一些简单的注册modal，如果有不懂，请参照一个简单的CREUD就会明白
	 const [register, { openModal: openModal1, closeModal: closeModal1, setModalProps }] = useModal(); // 这个需要注意，为我们下边得代码服务
	//注册table数据 也是同理
	
/**
   * 操作栏
   * 此处方法就是控制我们右侧的按钮是否显示，或者要显示什么
   * 详情页得方法不做阐述
   */
  function getTableAction(record) {
    if (record.state == 2) {
      return [
        {
          label: '详情',
          onClick: testDetail.bind(null, record),
        },
        {
          label: '审批',
          onClick: testAudit.bind(null, record),
        },
      ];
    } else {
      return [
        {
          label: '详情',
          onClick: testDetail.bind(null, record),
        },
      ];
    }
  }


  /**
   * 审批
   * 此处我们需要额外注意，我们在此要新建一个openModal1 因为项目中自带封装好得新增、编辑modal满足不		     了我们现在的开发场景
   */
  function testAudit(record: Recordable) {
    openModal1(true, {
      record, // 数据
      isUpdate: true,// 在 JeecgBoot 中，isUpdate 是用于判断当前操作是否为更新（修改）数据的一个标识
      showFooter: true,// 是一个用于控制页面底部区域显示与隐藏的标识，此处我们需要开着，查看得时候为false
    });
  }


/**
   * 此处为弹框页面点击确定后，通过本页面@success中绑定的方法进行回调
   */
  function testFun(data) {// 此处为我们表单区域@success中所写得方法
    examineTestEdit(data, handleSuccess);
  }

</script>

/**
   * 成功回调
   */
  function failSuccess() {
    (selectedRowKeys.value = []) && reload();
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

二、textAuditModal.vue代码示例

<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :width="800" title="审批详情" @ok="submitTest">
    <BasicForm @register="registerForm" />
    <div>
      <a-form>
        <a-row>
          <a-col flex="2">
            <a-form-item label="审批状态" :label-col="{ style: { width: '100px', fontWeight: 'bolder' } }">
              <a-select ref="select" v-model:value="state" :options="stateOptions"></a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row type="flex" v-show="state == 4">
          <a-col flex="2">
            <a-form-item label="驳回原因：" :label-col="{ style: { width: '100px', fontWeight: 'bolder' } }">
              <a-textarea
                v-model:value="reason"
                :maxlength="100"
                aria-placeholder="请输入驳回原因"
                :auto-size="{ minRows: 4, maxRows: 6 }"
                style="border: 1px solid #d9d9d9"
                wrap="soft"
              ></a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import {******} // 此处就是我们项目当中的一些引用
  // Emits声明 请参照新增编辑modal模板中得写法
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单 请参照新增编辑modal模板中得写法
    formData.id = data.record.id;// 这块要着重注意，不然可能拿不到数据ID
  });

  // 表单赋值 审核状态state：1_审核通过 2_审核不通过
  const state = ref('1'),
    reason = ref(''),
    testId = ref('');
  const stateOptions = ref<SelectProps['options']>([
    { value: '1', label: '审批通过' },
    { value: '2', label: '审批驳回' },
  ]);

  const userStore = useUserStore();
  const formData = reactive<Record<string, any>>({
    state: state,
    reason: reason,
    id: testId,
  });

  /**
   * 弹框中点击确定按钮
   */
  function submitTest() {
    closeModal();//关闭弹窗
    //回调父页面的@success绑定的方法
    emit('success', formData);
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

三、test.api.ts

import {******} // 此处就是我们项目当中的一些引用
enum Api {// 此处为我们得后端API接口地址
  examineTestEdit = '/testDemo/examineTestEdit',
}

/**
 * 审核
 * @param params
 */
export const examineTestEdit = (params, handleSuccess) => {
  return defHttp.post({ url: Api.examineTestEdit, params }, { joinParamsToUrl: true }).then(() => {
    failSuccess();// 此处会回调到我们List页面中得此方法,为我们表单区域中配置得方法名，用于操作之后刷新列表
  });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

总结

道阻且长，一起加油哦！！！