jwl-manage-web/src/views/zs/sign/components/SettlementDialog.vue

<template>
    <!-- 结算对话框 -->
    <el-dialog v-if="visible" v-loading="signLoading" title="结算" :visible.sync="visible" width="600px" append-to-body :close-on-click-modal="false" style>
      <el-form ref="modalForm" :model="modalForm" :rules="modalRules" label-width="110px" >
        <el-row>
         
          <!-- <el-col :span="24">
            <el-form-item label="学员姓名" prop="name">
              <el-input v-model="modalForm.name" :disabled="modalForm.clueId != undefined" />
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="结算金额" prop="settlementMoney">
              <el-input v-model="modalForm.settlementMoney" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span  slot="footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" :disabled="!canSubmit" @click="handleSubmit">提 交</el-button>
      </span>
    </el-dialog>
  </template>
  
  <script>
  import {  updateSign } from '@/api/zs/sign';
  import { validateMoney } from '@/utils/validate';
    
  export default {
    name: 'SettlementDialog',
    data() {
      return {
        admin: localStorage.getItem('admin'),
        preUrl: process.env.VUE_APP_BASE_API,
        userId: localStorage.getItem('userId'),
        visible: false,
        signLoading: false,
        modalForm: {},
        modalRules: {
          settlementMoney: [{ required: true, message: '结算金额不为空', trigger: 'blur' },
          { required: true, validator: validateMoney, trigger: 'blur' }]
        },
      };
    },
    methods: {
      init(info = undefined) {
        this.canSubmit = true;
        this.$nextTick(() => {
          this.resetForm('modalForm');
          if (info && info.signId) {
            this.modalForm = {... info}
          } 
          this.visible = true;
        });
      },
      // 重置表单
      resetForm() {
        this.modalForm = {
          signId: undefined,
          settlementMoney: undefined,
        };
      },
      handleSubmit() {
        // 保存结算表
        this.$refs.modalForm.validate((valid) => {
          if (valid) {
            this.canSubmit = false;
              updateSign(this.modalForm).then((resp) => {
                if (resp.code == 200) {
                  this.$message.success('提交成功');
                  this.visible = false;
                  this.$emit('refreshDataList');
                } else {
                  this.canSubmit = true;
                }
              });
          }
        });
      },
      
    }
  };
  </script>
  
  <style scoped>
  .demo-image__item {
    width: 100px;
    height: 100px;
    display: inline-block;
  }
  
  .image-list-item {
    width: 100%;
    height: 100%;
  }
  
  .el-upload--picture-card {
    width: 100px !important;
    height: 100px !important;
  }
  </style>