JeecgBoot的a-modal和j-modal

JeecgBoot的a-modal和j-modal

一、a-modal页面

<template>
  <a-modal
    :title="title"
    width="70%"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel">
    <template slot="footer" style="">
      <a-button @click="handleOk" type="primary">
        保存
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :rules="validatorRules" :label-col="labelCol" :wrapper-col="wrapperCol"  :model="model">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="8">
            <a-form-model-item label="三级分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" disabled/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>

      <!--添加订单时选择产品区域-->
      <div>
        <a-tabs v-model="activeKey">
          <a-tab-pane tab="事由/原因" key="1" :forceRender="true">
            <j-editable-table
              ref="parentsTable"
              :loading="table1.loading"
              :columns="table1.columns"
              :dataSource="table1.dataSource"
              :maxHeight="300"
              :rowNumber="true"
              :actionButton="true">

              <template v-slot:action="props">
                <div style="display: flex;flex-direction: row;justify-content: space-between">
                  <div><a @click="handleDelete(props)">删除</a></div>
                </div>
              </template>

            </j-editable-table>
          </a-tab-pane>
        </a-tabs>
      </div>

    </a-spin>
  </a-modal>
</template>

<script>
  import JEditableTable from '@/components/jeecg/JEditableTable'
  import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormModelAndTables } from '@/utils/JEditableTableUtil'
  import { postAction, getAction, httpAction} from '@/api/manage'
  import JDate from '@/components/jeecg/JDate'
  import { duplicateCheck,queryall } from '@/api/api'
  import store from '@/store/'

  export default {
    name: 'FacCategoryModal',
    components: {
      JEditableTable,
      JDate,
    },
    data () {
      return {
        title:'',
        width:500,
        visible: false,
        disableSubmit: false,
        confirmLoading: false,
        model:{schoolName:""},
        activeKey: '1',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 - 6 }
        },
        //事由/原因
        table1: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title:'事由',
              key: 'cause',
              align:"center",
              type: FormTypes.input,
            },
            {
              title: '原因',
              key: 'reason',
              align:"center",
              type: FormTypes.input,
            },
            {
              title: '操作',
              key: 'action',
              type: FormTypes.slot,
              slotName: 'action',
            }
          ]
        },
        validatorRules: {

        },
        url: {
          addCategoryReason:"",
          reasonList:'',
        }
      }
    },
    created() {
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      //删除行
      handleDelete(props) {
        let { rowId, target } = props
        target.removeRows(rowId)
        this.handleChange()
      },
      //获取所有的editableTable实例
      getAllTable(){
        return Promise.all([
          getRefPromise(this, 'parentsTable'),
        ])
      },
      add () {
        this.model = Object.assign({}, this.modelDefault);
        //默认选择产品新增一行
        this.getAllTable().then(editableTables => {
          editableTables[0].add();
        })
        this.visible=true;
        this.activeKey = '1'
      },
      edit (record) {
        this.visible=true;
        this.activeKey = '1';
        this.model = Object.assign({},record);
        //加载子表数据
        if(this.model.id){
          let params = {categoryId : this.model.id};
          this.requestTableData(this.url.reasonList,params,this.table1);
        }else {
          this.model.dataFrom = this.dataFrom;
        }
      },
      //查询某个tab的数据
      requestTableData(url,params,tab){
        tab.loading = true;
        getAction(url, params).then(res => {
          tab.dataSource =res.result.records;
        }).finally(() => {
          tab.loading = false;
        })
      },
      //关闭事件
      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;

        this.getAllTable().then(editableTables =>{
          editableTables[0].initialize();
        })
      },
      //第一步提交表单验证
      handleOk () {
        this.validateFields();
      },
      //第二步触发表单验证
      validateFields(){
        console.log("触发表单，参数this.model",this.model)
        this.getAllTable().then(tables => {
          return validateFormModelAndTables(this.$refs.form,this.model,tables)
        }).then(allValues => {
          let formData = this.classifyIntoFormData(allValues);
          //发起请求
          return this.requestAddOrEdit(formData);
        }).catch(e => {
          if(e.error === VALIDATE_NO_PASSED){
            //如果有未通过表单验证的子表，就自动跳转到他所在的tab行
            this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString();
          }
        })
      },
      //classifyIntoFormData方法
      classifyIntoFormData(allValues){
        let orderMain = Object.assign(this.model,allValues.formValue);
        let reasonList = allValues.tablesValue[0].values;
        return{
          ...orderMain,
          reasonList:reasonList,
        }
      },
      //requestAddOrEdit发起请求方法
      requestAddOrEdit(formData){
        this.confirmLoading = true;
        let httpurl = this.url.addCategoryReason;;
        let method = 'post';
        httpAction(httpurl,formData,method).then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.$emit('ok');
            this.close();
          }else{
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.confirmLoading = false;
        })
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close();
      },
    }
  }
</script>

一、j-modal页面

1、j-modal中配置表单

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <daily-repair-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></daily-repair-form>
  </j-modal>
</template>

<script>

  import DailyRepairForm from './DailyRepairForm'
  export default {
    name: 'DailyRepairModal',
    components: {
      DailyRepairForm
    },
    data () {
      return {
        title:'',
        width:800,
        visible: false,
        disableSubmit: false
      }
    },
    methods: {
      add () {
        this.visible=true
        this.$nextTick(()=>{
          this.$refs.realForm.add();
        })
      },
      edit (record) {
        this.visible=true
        this.$nextTick(()=>{
          this.$refs.realForm.edit(record);
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.$refs.realForm.submitForm();
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>

3、表单页面

<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="no">
              <a-input v-model="model.guestNo" placeholder="请输入编号"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'DailyRepairForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "",
          edit: "",
          queryById: ""
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
    }
  }
</script>

一个在学习的开发者，勿喷，欢迎交流