| <template>  | 
| <a-form style="margin-top: 8px" :form="form">  | 
|     <a-modal title="编辑-角色" destroyOnClose :visible="visible"  @cancel="handleCancel">  | 
|         <a-form-item key="name" v-bind="formLayout" label="名称">  | 
|             <a-input v-decorator="['name', {initialValue:saveData.name,rules: [{ required: true,message:'请输入名称'}]}]" placeholder="请输入"/>  | 
|         </a-form-item>  | 
|         <a-form-item key="desc" v-bind="formLayout" label="备注">  | 
|             <a-input v-decorator="['desc', {initialValue:saveData.desc}]" placeholder="请输入"/>  | 
|         </a-form-item>  | 
|         <template slot="footer">  | 
|             <a-button key="cancel" @click="handleCancel">  | 
|                 取消  | 
|             </a-button>  | 
|             <a-button key="forward" type="primary" @click="handleOk">  | 
|                 完成  | 
|             </a-button>  | 
|         </template>  | 
|     </a-modal>  | 
| </a-form>  | 
| </template>  | 
|   | 
| <script lang="ts">  | 
| import {  | 
|     Component,  | 
|     Prop,  | 
|     Vue,  | 
|     Emit,  | 
|     Model,  | 
|     Watch,  | 
| } from 'vue-property-decorator';  | 
| import { get, post } from "@/util/request";  | 
|   | 
| @Component({  | 
|     components: {},  | 
| })  | 
| export default class UpdateTaskForm extends Vue {  | 
|   | 
|     @Prop({  | 
|         type: Boolean,  | 
|         default: false,  | 
|     })  | 
|     private visible!: boolean;  | 
|   | 
|     @Prop({  | 
|         type: Object,  | 
|         default() {  | 
|             return {};  | 
|         },  | 
|     })  | 
|     private record!: any;  | 
|   | 
|     private created() {  | 
|         this.form = this.$form.createForm(this, {name: "UpdataTaskFormVersion"});  | 
|     }  | 
|   | 
|     private saveData:any = {  | 
|         name: '',  | 
|         desc: ''  | 
|     };  | 
|   | 
|     private form: any = null;  | 
|   | 
|     private formVals: any = {  | 
|         target: '0',  | 
|         template: '0',  | 
|         type: '1',  | 
|         time: '',  | 
|         frequency: 'month',  | 
|     };  | 
|   | 
|     private currentStep: number = 0;  | 
|   | 
|     private formLayout = {  | 
|         labelCol: {  | 
|             span: 7,  | 
|         },  | 
|         wrapperCol: {  | 
|             span: 13,  | 
|         },  | 
|     };  | 
|   | 
|     private handleBackward(): void {  | 
|         this.currentStep--;  | 
|     }  | 
|   | 
|     private handleNext(): void {  | 
|         this.form.validateFields((err: any, fieldsValue: any) => {  | 
|             if (err) {  | 
|                 return;  | 
|             }  | 
|             this.formVals = { ...this.formVals, ...fieldsValue };  | 
|             this.currentStep++;  | 
|         });  | 
|     }  | 
|   | 
|     private handleCancel(): void {  | 
|         this.updateVisible(false);  | 
|     }  | 
|   | 
|     private handleOk(): void {  | 
|         // 清除表单存储的上次数据  | 
|         this.formVals = {}  | 
|         this.form.validateFields((err: any, fieldsValue: any) => {  | 
|             if (err) {  | 
|                 return;  | 
|             }  | 
|             if(fieldsValue.name || fieldsValue.desc){  | 
|                 if(fieldsValue.name !== this.saveData.name || fieldsValue.desc !== this.saveData.desc){  | 
|                     post('version/update',  | 
|                         {  | 
|                             name:fieldsValue.name == this.saveData.name?null:fieldsValue.name,  | 
|                             desc:fieldsValue.desc == this.saveData.desc?null:fieldsValue.desc,  | 
|                             id:this.record.id  | 
|                         }  | 
|                     )  | 
|                     .then((res) => {  | 
|                         if(res.data.code !== 0){  | 
|                             this.$message.warning(res.data.message)  | 
|                         }else{  | 
|                             this.$message.success(res.data.message)  | 
|                         }  | 
|                         this.updateVisible(false);  | 
|                         this.onOk();  | 
|                     })  | 
|                     .catch((err)=>{  | 
|                         console.log(err);  | 
|                     })  | 
|   | 
|                 }  | 
|                 else{  | 
|                 this.$message.warning('未修改')  | 
|                 }  | 
|             }  | 
|             // this.saveData.name = '',  | 
|             // this.saveData.desc = ''  | 
|         });  | 
|   | 
|     }  | 
|   | 
|     @Emit('ok')  | 
|     private onOk() {  | 
|   | 
|     }  | 
|   | 
|     private updateVisible(visible: boolean): void {  | 
|         this.$emit('update:visible', visible);  | 
|     }  | 
|   | 
|     private mounted(): void {  | 
|         this.currentStep = 0;  | 
|     }  | 
|   | 
|     @Watch('record', {  | 
|         immediate: true,  | 
|         deep: true,  | 
|     })  | 
|     private recordChange(value: any, oldValue: any): void {  | 
|         this.formVals = {  | 
|             ...value,  | 
|             ...this.formVals,  | 
|         };  | 
|         this.currentStep = 0;  | 
|         this.saveData.name = value.name  | 
|         this.saveData.desc = value.desc  | 
|     }  | 
|   | 
|   | 
| }  | 
| </script>  |