cooperationPlatformModal.vue 3.99 KB
<template>
  <a-modal
    :title="title"
    :width="800"
    :centered='true'
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
    style="top:20px;"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="合作平台编号:" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入合作平台编号" v-decorator="[ 'cooperationPlatformNo', validatorRules.cooperationPlatformNo]"/>
        </a-form-item>

        <a-form-item label="合作平台名称:" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <a-input  placeholder="请输入合作平台名称" v-decorator="[ 'cooperationPlatformName', validatorRules.cooperationPlatformName]" />
        </a-form-item>

        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-textarea
          rows="4"
          placeholder="备注"
          v-decorator="['remark']" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
   import { setCooperationPlatformStatus, saveCooperationPlatform, updateCooperationPlatform } from '@/api/configApi'
  export default {
    name: "PasswordModal",
    data () {
      return {
        visible: false,
        confirmLoading: false,
        confirmDirty: false,
        title: '',
        type:'add',
        validatorRules:{
          cooperationPlatformNo: {
            rules:[{
              required: true,
              message: '请输入合作平台编号'
            }]
          },
          cooperationPlatformName: {
            rules:[{
              required: true,
              message: '请输入合作平台名称'
            }]
          },

        },

        model: {
         
        },

        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        form:this.$form.createForm(this)
      }
    },
    created () {
      console.log("created");
    },

    methods: {
      edit (recodes) {
        this.form.resetFields();
        this.type = 'edit' 
        this.visible = true;
        this.model= recodes;
        this.$nextTick(() => {
          this.form.setFieldsValue(recodes);
        });
      },

      add (recodes) {
        this.form.resetFields();
        this.visible = true;
        this.type = 'add'
        this.$nextTick(() => {
          this.form.setFieldsValue();
        });
      },

      onChange(){

      },

      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
        this.selectedRole = [];
      },
      handleSubmit () {
        // 触发表单验证
        this.form.validateFields((err, values) => {
          console.log(err, values)
          if (!err) {
            this.confirmLoading = true;
            let formData = Object.assign({}, values);
            if(this.type =='add'){
              saveCooperationPlatform(formData).then((res)=>{
              if(res.status.statusCode == 0){
                this.$message.success(res.status.statusReason);
                this.$emit('ok');
              }else{
                this.$message.warning(res.status.statusReason);
              }
            }).finally(() => {
              this.confirmLoading = false;
              this.close();
            });
            }else{
              updateCooperationPlatform(formData).then((res)=>{
              if(res.status.statusCode == 0){
                this.$message.success(res.status.statusReason);
                this.$emit('ok');
              }else{
                this.$message.warning(res.status.statusReason);
              }
            }).finally(() => {
              this.confirmLoading = false;
              this.close();
            });
            }
            
          }
        })
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>