MemoInfo.vue

<template>
	<div>
		<el-dialog v-dialogDrag title="Modify a diary for contract" :visible="modelVisible" width="60%" @close="handleClose" 
			destroy-on-close v-if="modelVisible">
			<el-form label-width="120px" :model="formData">
				<c-col :span="12" style="padding-right: 10px;">
					<c-col :span="24">
						<el-form-item label="备忘录原因">
							<c-select v-model="formData.cod" dbCode="diatxt" :disabled="opType==='edit'||opType==='display'">
							</c-select>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="提示日期">
							<c-date-picker type="date" value-format="yyyy-MM-dd" v-model="formData.dat" :disabled="opType==='edit'||opType==='display'">

							</c-date-picker>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="描述">
							<c-input v-model="formData.nam" :disabled="opType==='edit'||opType==='display'"></c-input>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="Resp. Group">
							<c-select v-model="formData.ownusg" dbCode="usgtxt">
							</c-select>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="业务摘要">
							<c-input type="textarea" :rows="4" v-model="formData.inftxt" :disabled="opType==='edit'||opType==='display'"></c-input>
						</el-form-item>
					</c-col>
				</c-col>
				<c-col :span="12" style="padding-right: 10px;">
					<c-col :span="24">
						<el-form-item label="备忘录状态">
							<el-radio v-model="formData.donflg" label="X">已处理</el-radio>
							<el-radio v-model="formData.donflg" label="">未处理</el-radio>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="Start Transaction">
							<c-col :span="20">
								<c-input v-model="formData.inifrm" placeholder="请输入交易代码" @keyup.enter.native="onSeainf" :disabled="opType==='edit'||opType==='display'"></c-input>
							</c-col>
							<c-col :span="4">
								<c-button size="small" style="width:100%;margin-left:0" type="primary" @click="onSeainf" icon="el-icon-search"></c-button>
							</c-col>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="Responsible User">
							<c-input v-model="formData.repusr" disabled></c-input>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="Status">
							<el-select v-model="formData.diamodflg" placeholder="请选择" disabled>
								<el-option v-for="item in statusData" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</c-col>
					<c-col :span="24">
						<el-form-item label="Entered by">
							<c-input disabled v-model="formData.usr"></c-input>
						</el-form-item>
					</c-col>
				</c-col>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="saveData" v-if="opType==='add'||opType==='edit'">保 存</el-button>
				<el-button>打 印</el-button>
				<el-button type="primary" @click="exit">退 出</el-button>
			</span>
		</el-dialog>
		<!--交易列表 弹窗 -->
		<el-dialog v-dialogDrag width="50%" :title="dialogTitle" :visible.sync="dialogTableVisible" v-if="dialogTableVisible">
			<div v-if="!loadingFlag && tableList.length === 0">暂无数据</div>
			<div v-else style="height: 100%;">
				<el-table id='tableRef' height="calc(100% - 32px)" size="small" v-loading="loadingFlag" :data="tableList" @row-dblclick="dbClickRow"
				  :before-close="beforeClose">
					<el-table-column v-for="(item,key) in tableColumn" :key="key" :prop="item.prop" :width="item.width" :label="item.label">
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import Api from "~/service/Api";
export default {
  props: {
    modelVisible: {
      type: Boolean,
      default: false
    },
    modelInfo: {
      type: Object,
      default: () => {}
    },
    opType: {
      type: String
    }
  },
  watch: {
    modelVisible(val) {
      if (val) {
				this.formData = this.modelInfo;
      }
    }
  },
  data() {
    return {
      formData: {
        inr: "", //修改
        cod: "",
        dat: "",
        nam: "",
        ownusg: "",
        inftxt: "",
        donflg: "",
        inifrm: "",
        repusr: "",
        diamodflg: "",
        usr: ""
      },
      statusData: [
        { label: "NFN", value: "New Diary(TRN)" },
        { label: "NMN", value: "New Diary(manually)" },
        { label: "SNN", value: "Read from BD" },
        { label: "SMN", value: "Modified DB Diary" },
        { label: "SMD", value: "Set to Done DB Diary(manually)" },
        { label: "SFD", value: "Set to Done DB Diary(TRN)" },
        { label: "NMD", value: "Set to Done New Diary(manually)" },
        { label: "NFD", value: "Set to Done New Diary(TRN)" },
        { label: "SND", value: "Set to Done DB Diary" }
        //{label:'SFN',value:'Read from BD'}
      ],
      //交易
      currentPage: 1,
      total: 0,
      pageSize: 5,
      tableList: [],
      loadingFlag: true,
      dialogTitle: "",
      dialogTableVisible: false,
      tableColumn: [
        { label: "序号", prop: "index" },
        { label: "交易代码", prop: "cod" },
        { label: "交易名称", prop: "txt" }
      ] //交易代码模态框--end
    };
  },
  methods: {
    handleClose() {
      this.$emit("closeMemoIofo");
    },
    //交易代码
    async onSeainf() {
      this.dialogTitle = `交易列表`;
      this.dialogTableVisible = true;
      // 分层取值
      this.loadingFlag = true;
      this.tableList = [];
      this.currentPage = 1;
      this.pageSize = 10000;
      this.total = 0;
      // 获取table的表格数据
      let params = {
        //cod: this.model.atp.cod,
        cod: this.formData.inifrm,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      };
      const res = await Api.post("/public/quesel/getFrameList", params);
      if (res.respCode === SUCCESS) {
        if (res.data && res.data.list) {
          this.total = res.data.total;
          res.data.list.forEach((item, i) => {
            item.index = i + 1;
          });
          this.tableList = res.data.list;
        }
      }
      this.loadingFlag = false; //接口调完变成false
    },

    async dbClickRow(row, column, event) {
      // 此处为了回填数据时回调
      this.$emit("handleChange");
      // 回填数据
      this.formData.inifrm = row.cod + "-" + row.txt;
      //this.model.atp.cod = row.cod + '-' + row.txt;
      this.dialogTableVisible = false;
    },
    beforeClose(done) {
      this.dialogTableVisible = false;
      this.currentPage = 1;
      done();
    },
    async saveData() {
      if (this.opType === "add") {
				// 新增
        let params = {
          ...this.formData
        };
        let rtnmsg = await Api.post("/public/diasel/add", params);
        if (rtnmsg.respCode == SUCCESS) {
					console.log(rtnmsg, 123);
					this.$message.success(' 操作成功！')
          this.$emit('closeMemoIofo')
        }
      } else {
				// 修改
				let params = { ...this.formData };
				let rtnmsg = await Api.post("/public/diasel/edit", params);
        if (rtnmsg.respCode == SUCCESS) {
					this.$message.success(' 操作成功！')
          this.$emit('closeMemoIofo')
				}
      }
    },
    exit() {
      this.$emit("closeMemoIofo");
    }
  }
};
</script>
<style scoped lang="less">
</style>