<template>
|
<a-form style="margin-top: 8px">
|
<a-modal
|
title="编辑-公式"
|
destroyOnClose
|
:visible="visible"
|
@cancel="handleCancel"
|
@ok="handleOk"
|
okText="保存"
|
>
|
<a-form style="margin-top: 8px" :form="form">
|
<a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="计算规则">
|
<span>
|
<a-select
|
v-decorator="['initialMath', {initialValue:'*', rules: [{ required: true }] }]"
|
style="width:60px"
|
>
|
<a-select-option value="+">加</a-select-option>
|
<a-select-option value="-">减</a-select-option>
|
<a-select-option value="*">乘</a-select-option>
|
<a-select-option value="/">除</a-select-option>
|
</a-select>
|
|
<a-input
|
v-decorator="['roleValue', {initialValue:1000 ,rules: [{ required: true}] },]"
|
placeholder="请输入数字"
|
style="width:100px;margin-left:10px;margin-right:10px"
|
></a-input>
|
<a-button @click="AddInputClick">+</a-button>
|
</span>
|
<span>
|
<a-input
|
v-decorator="['createFormula', {initialValue:createFomulaValue, rules: [{ required: true }] }]"
|
placeholder="通过上面选择框添加规则"
|
style="width:200px;margin-right:10px"
|
disabled
|
></a-input>
|
<a-button @click="CancelInputClick">×</a-button>
|
</span>
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
</a-form>
|
</template>
|
|
<script lang="ts">
|
import {
|
Component,
|
Prop,
|
Vue,
|
Emit,
|
Model,
|
Watch
|
} from "vue-property-decorator";
|
import { State, Mutation, namespace } from "vuex-class";
|
|
import { get, post } from "@/util/request";
|
|
@Component({
|
components: {}
|
})
|
export default class UpdateUnitRule extends Vue {
|
|
@Prop({
|
type: Boolean,
|
default: false
|
})
|
private visible!: boolean;
|
|
@Prop({
|
type: Object,
|
default() {
|
return {};
|
}
|
})
|
private record!: any;
|
|
private createFomulaValue: any = null;
|
|
private handleCancel(): void {
|
|
this.updateVisible(false);
|
}
|
//编辑中 +功能
|
private AddInputClick() {
|
this.form.validateFields((err: any, values: any) => {
|
//把值存到input框
|
this.form.setFieldsValue({
|
createFormula: values.createFormula
|
? "(" +
|
values.createFormula +
|
")" +
|
values.initialMath +
|
values.roleValue
|
: "初值" + values.initialMath + values.roleValue
|
});
|
});
|
}
|
//编辑中 x功能
|
private CancelInputClick() {
|
this.form.validateFields((err: any, values: any) => {
|
console.log(values);
|
//把值存到input框
|
this.form.setFieldsValue({
|
createFormula: null
|
});
|
});
|
}
|
private form: any = {};
|
private created() {
|
this.form = this.$form.createForm(this, { name: "UpdateUnitRule" });
|
}
|
|
// 保存 更新数据库
|
private handleOk(): void {
|
this.form.validateFields((err: any, values: any) => {
|
if (err) {
|
console.log(err);
|
return;
|
}
|
if (this.record.formula !== values.createFormula) {
|
values.createFormula=values.createFormula.replace('初值','{0}')
|
post("unitConversion/update",
|
{
|
id:this.record.id,
|
formula:values.createFormula
|
}
|
).then(res => {
|
if (res.data.code != 0) {
|
this.$message.error(res.data.message);
|
} else {
|
this.$message.success(res.data.message, 2);
|
//保存成功，组件刷新数据
|
this.$emit("updateData");
|
this.updateVisible(false);
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
else{
|
this.updateVisible(false);
|
}
|
});
|
}
|
|
private updateVisible(visible: boolean): void {
|
this.$emit("update:visible", visible);
|
}
|
private callbackData(value: any) {
|
this.form.validateFields((err: any, values: any) => {
|
if (err) {
|
console.log(err);
|
}
|
console.log(values);
|
});
|
}
|
|
//监听编辑回调值
|
@Watch("record", {
|
immediate: true, //监听开始后是否立即调用该回调函数;
|
deep: true //深度监听
|
})
|
//监听编辑逻辑赋值
|
private recordChange(value: any, oldValue: any): void {
|
this.createFomulaValue = this.record.formula;
|
}
|
}
|
</script>
|
