dialog.vue

<template>
	<el-dialog v-dialogDrag :visible.sync="dialogVisible" width="70%" center destroy-on-close :before-close="beforeClose" v-if="dialogVisible">
		<el-form label-width="100px" :model="formData" style="height: 400px;overflow-y: auto;overflow-x: hidden;">
			<c-col :span="12" style="padding-right: 20px;">
				<c-col :span="24">
					<el-form-item label="调整标识" :label-width="formLabelWidth" prop="ccdflg">
						<c-input v-model="formData.ccdflg" autocomplete="off" placeholder="请输入调整标识" disabled></c-input>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="保证金编号" :label-width="formLabelWidth" prop="ownref">
						<c-input v-model="formData.ownref" autocomplete="off" placeholder="请输入保证金编号" @change="customAddModify(formData, 'ownref')"></c-input>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="币种" :label-width="formLabelWidth" prop="cur">
						<c-select v-model="formData.cur" dbCode="acccur" placeholder="请选择币种" @change="customAddModify(formData, 'cur')">
						</c-select>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="余额" :label-width="formLabelWidth" prop="oldamt">
						<c-input-currency v-model="formData.oldamt" :currency="formData.cur" autocomplete="off" placeholder="请输入余额" @change="customAddModify(formData, 'oldamt')"/>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="变动金额" :label-width="formLabelWidth" prop="amt">
						<c-input-currency v-model="formData.amt" :currency="formData.cur" autocomplete="off" placeholder="请输入变动金额" @blur="customAddModify(formData, 'amt')" />
					</el-form-item>
				</c-col>
			</c-col>
			<c-col :span="12" style="padding-left: 20px;">
				<c-col :span="24">
					<el-form-item label="保证金账号" :label-width="formLabelWidth" prop="acc">
						<c-input v-model="formData.acc" autocomplete="off" placeholder="请输入保证金账号" @change="customAddModify(formData, 'acc')" />
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="汇率" :label-width="formLabelWidth" prop="rat">
						<c-input v-model="formData.rat" autocomplete="off" placeholder="请输入汇率" @change="customAddModify(formData, 'rat')"></c-input>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="币种" :label-width="formLabelWidth" prop="concur">
						<c-input v-model="formData.concur" autocomplete="off" placeholder="请输入币种" disabled></c-input>
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="折算后金额" :label-width="formLabelWidth" prop="covamt">
						<c-input-currency v-model="formData.covamt" :currency="formData.concur" autocomplete="off" placeholder="请输入折算后金额" @blur="customAddModify(formData, 'covamt')" />
					</el-form-item>
				</c-col>
				<c-col :span="24">
					<el-form-item label="实际折算金额" :label-width="formLabelWidth" prop="acccovamt">
						<c-input-currency v-model="formData.acccovamt" :currency="formData.concur" autocomplete="off" placeholder="请输入实际折算金额" @blur="customAddModify(formData, 'acccovamt')" />
					</el-form-item>
				</c-col>
			</c-col>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<c-button type="primary" style="margin-right: 20px;" @click="saveDialog">确 定</c-button>
			<c-button @click="dialogVisible = false">取 消</c-button>
		</span>
	</el-dialog>
</template>

<script>
import commonDepend from "~/mixin/commonDepend.js";

export default {
  inject: ["root"],
  mixins: [commonDepend],
  props: {
    dialog: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {
        ccdflg: "",
        ownref: "",
        cur: "",
        oldamt: "",
        amt: "",
        acc: "",
        rat: "",
        concur: "",
        covamt: "",
        acccovamt: ""
      },
      dialogVisible: false,
      formLabelWidth: "100px"
    };
  },
  methods: {
    init() {
      this.formData = this.dialog;
    },
    saveDialog() {
      this.dialogVisible = false;
      this.$emit("onSubmit", this.formData);
    },
    beforeClose(done) {
      this.dialogVisible = false;
      done();
    }
  }
};
</script>
<style scoped lang="less">
.dialog-wrap {
  height: 400px;
  overflow: auto;
}
::v-deep .el-dialog__header {
  height: 36px;
  .el-dialog__headerbtn {
    top: 10px;
  }
}
.dialog-footer {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 0;
  display: flex;
  justify-content: center;
}
</style>