global-web/src/views/baseCode/ShipArchive/components/BaseShipArchiveAccessoriesModal.vue

<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit" :maskClosable="false">
      <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增(add)</a-button> 
      <a-button style="margin-left:5px" type="primary" @click="handleEdit"> 编辑(edit)</a-button> 
      <a-button style="margin-left:5px" type="primary" @click="handleDel"> 删除(delete)</a-button> 
      <a-button style="margin-left:5px" type="primary" @click="handleGet" > 刷新(refresh)</a-button>
  
      <JVxeTable 
        ref="tableRef"
        keep-source
        resizable
        :loading="demoFieldDefValSubTable.loading"
        :columns="demoFieldDefValSubTable.columns"
        :dataSource="demoFieldDefValSubTable.dataSource"
        :maxHeight="340"
        :rowNumber="false"
        :rowSelection="true"
        :toolbar="false"
        style="margin-top:1%"
        />
      
  </BasicModal>
  
  <BaseShipArchiveAccessoriesModal2 @register="accessoriesAdd2" @success="handleSuccess"></BaseShipArchiveAccessoriesModal2>
  
</template>

<script lang="ts" setup>
    import {ref, computed, unref,reactive} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {BasicForm, useForm} from '/@/components/Form/index';
    import {formSchema,columns} from '../BaseShipArchiveAccessories.data';
    import {saveOrUpdate,list,deleteOne} from '../BaseShipArchiveAccessories.api';
    import BaseShipArchiveAccessoriesModal2 from './BaseShipArchiveAccessoriesModal2.vue'
    import {useModal} from '/@/components/Modal';
    import { JVxeTable } from '/@/components/jeecg/JVxeTable'
    import { useMessage } from '/@/hooks/web/useMessage';
      
    const { createMessage, createConfirm, createSuccessModal, createInfoModal, createErrorModal, createWarningModal, notification } = useMessage();
    
    const tableRef = ref<JVxeTableInstance>()
    const [accessoriesAdd2,{openModal: openModal2}] = useModal();
    
    const demoFieldDefValSubTable = reactive({
          loading: false,
          dataSource: [],
          columns:columns
    })
    // Emits声明
    const emit = defineEmits(['register','success']);
    var isShow = "";
    const isUpdate = ref(true);
    const isDetail = ref(false);
    //表单配置
    const [registerForm, { setProps,resetFields, setFieldsValue, validate, scrollToField }] = useForm({
        labelWidth: 150,
        schemas: formSchema,
        showActionButtonGroup: false,
        baseColProps: {span: 24}
    });
    async function handleSave(record: EditRecordRow) {
      console.log("=========================");
    }
    
    let headId = "";
    
     /**
      * 新增事件
      */
     
    function handleAdd(record: Recordable) {
       record.headId=headId;
       openModal2(true, {
         record,
         isUpdate: false,
         showFooter: true,
       });
    }
    
    function handleEdit(record: Recordable) {
      const values = tableRef.value.getSelectionData()
      
      if (values.length != 1) {
        createMessage.warn('请选择一条数据');
        return;
      }
      record = values[0];
      openModal2(true, {
         record,
         isUpdate: true,
         showFooter: true,
      });
    }
    

    function handleDel(record: Recordable) {
      const values = tableRef.value.getSelectionData()
      
      if (values.length != 1) {
        createMessage.warn('请选择一条数据');
        return;
      }
      createConfirm({
        title: '提示',
        content: `确定要删除吗？`,
        iconType: 'warning',
        okText:'确定',
        onOk: () => new Promise((resolve,rejected)=>{
          record = values[0];
          deleteOne({id: record.id}, handleGet);
          resolve();
          
        }),
        onCancel: () => {console.log('取消了')}
      });
      
    }
    
    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        //重置表单
        // await resetFields();
        // setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        // isUpdate.value = !!data?.isUpdate;
        // isDetail.value = !!data?.showFooter;
        // if (unref(isUpdate)) {
        //     //表单赋值
        //     await setFieldsValue({
        //         ...data.record,
        //     });
        // }
        // isShow = true;
        headId = data.record.headId
        await list({headId:data.record.headId}).then(function (response) {
          
          // response.records.forEach(item => {
          //   console.log(item);
          // });
          
          // console.log(response.records); 
            demoFieldDefValSubTable.dataSource = response.records;
           
        }).catch(function (error) {
          console.log(error);
        });
                 
        // 隐藏底部时禁用整个表单
       // setProps({ disabled: !data?.showFooter })
    });
    async function handleGet(){
      await list({headId:headId}).then(function (response) {
       
          demoFieldDefValSubTable.dataSource = response.records;
         
      }).catch(function (error) {
        console.log(error);
      });
    }
    //设置标题
    const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '配件明细(accessories details)' : '编辑'));
    //表单提交事件
    async function handleSubmit(v) {
        try {
            let values = await validate();
            setModalProps({confirmLoading: true});
            //提交表单
            await saveOrUpdate(values, isUpdate.value);
            //关闭弹窗
            closeModal();
            //刷新列表
            emit('success');
        } catch ({ errorFields }) {
           if (errorFields) {
             const firstField = errorFields[0];
             if (firstField) {
               scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
             }
           }
           return Promise.reject(errorFields);
        } finally {
            setModalProps({confirmLoading: false});
        }
    }
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
</style>