干燥机配套车间生产管理系统/云平台服务端
baoshiwei
2023-03-10 58d42ccf875b120f40fddce63752298e916e0b0b
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
<#include "/common/utils.ftl">
<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" :width="${getModalWidth(tableVo.fieldRowNum?default(1))}" @ok="handleSubmit">
    <${Format.humpToShortbar(entityName)}-form ref="formComponent" :formDisabled="formDisabled" :formBpm="false" @success="submitSuccess"></${Format.humpToShortbar(entityName)}-form>
  </BasicModal>
</template>
 
<script lang="ts">
  import { ref, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import ${entityName}Form from './${entityName}Form.vue';
 
  export default {
    name: "TestCgMainVxeModal",
    components:{
      BasicModal,
      ${entityName}Form
    },
    emits:['register','success'],
    setup(_p, {emit}){
      const formComponent = ref()
      const isUpdate = ref(true);
      const formDisabled = ref(false);
      const title = ref('')
 
      //表单赋值
      const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        setModalProps({confirmLoading: false,showCancelBtn:data?.showFooter,showOkBtn:data?.showFooter});
        isUpdate.value = !!data?.isUpdate;
        title.value = data?.isUpdate?'编辑':'新增'
        formDisabled.value = !data?.showFooter;
        if (unref(isUpdate)) {
          console.log('data', data)
          formComponent.value.edit(data.record)
        }else{
          formComponent.value.add()
        }
      });
 
      function handleSubmit() {
        formComponent.value.submitForm();
      }
 
      function submitSuccess(){
        emit('success');
        closeModal();
      }
 
      return {
        registerModal,
        title,
        formComponent,
        formDisabled,
        handleSubmit,
        submitSuccess
      }
    }
  }
</script>
<style lang="less" scoped>
    /** 时间和数字输入框样式 */
    :deep(.ant-input-number){
        width: 100%
    }
 
    :deep(.ant-calendar-picker){
        width: 100%
    }
</style>