开发资金对账和资金

目标界面形象

参考期货交割处理

右边的表单布局

<kui-pane size="60">
      <kui-page
       ...
       />
    </kui-pane>
    <kui-pane>
      <kui-table-page
        ref="tablePageRef"
        :btns="tablePropRight.btns"
        :table-prop="tablePropRight"
        :loading="loadingRight"
        class="table-page"
        :show-pagi="false"
      >
        <template #matchVol="{ row }">
          <kui-number
            v-model="row.matchVol"
            :disabled="fileRow.percentage == 1"
            :max="row.holdVol"
            :min="0"
            width="auto"
          />
        </template>
      </kui-table-page>
    </kui-pane>

<template #matchVol=“{ row }”>为表单中的某一列插入相关样式的方法
ref 是表单命名
:btns绑定 表单的.btns
表单具体页面是

 const tablePropRight = computed(() => ({
    contentAdaptable: true,
    emptyCellText: "--",
    items: [
      {
        prop: "tractName",
        label: "交易账户",
        formatter: (row) => `${row.tractCode ?? ""}  ${row.tractName ?? ""}`,
        minWidth: 136,
      },
      {
        prop: "investName",
        label: "投资账户",
        formatter: (row) => `${row.investCode ?? ""}  ${row.investName ?? ""}`,
        minWidth: 136,
      },
      {
        prop: "holdVol",
        label: "可交割量",
        minWidth: 85,
      },
      {
        prop: "matchVol",
        label: "交割量",
        minWidth: 120,
      },
    ],
    btns: [
      {
        text: "保存",
        disabled: props.fileRow.percentage == 1 || Object.keys(currentRow.value).length == 0,
        // visible: isAuth(""),
        click: async () => saveCallback(),
      },
    ],
  }));

保存的时候校验分账结果是否符合和为总数的情况

  /** 保存分账结果 */
  const saveCallback = async () => {
    const tableRightData = cloneDeep(tablePageRef.value.getData() || []);
    const totalMatchVol = tableRightData.reduce((acc, cur) => acc + cur.matchVol, 0);
    if (currentRow.value?.matchVol !== totalMatchVol) {
      $message.warning("交割量之和需等于配对量,请重新输入!");
      return;
    }
    loadingRight.value = true;
    const params = {
      list: tableRightData,
      investFutureBondDeliveryBo: currentRow.value,
    };
    try {
      await $http.post(saveInvestFutureBondDelivery, params);
      loadingRight.value = false;
      $message.success("保存成功");
      pageRef.value.queryPage();
    } catch {
      loadingRight.value = false;
    }
  };

🆗现在研究上面的表单界面怎么加
模板：
这个是单独的KUI-FORM

  <kui-form
        ref="formRef"
        :model="formModel"
        :items="formItems"
        :preview="!isEdit"
        :inline="false"
      />

模板js

const formModel = ref({
    organCode: "",
    organFullName: "",
    organId: 0,
    organName: "",
    organStat: 0,
  });
  const formItems = computed(() => [
    {
      prop: "organCode",
      label: "机构代码",
      required: true,
      width: 376,
    },
    {
      prop: "organId",
      label: "机构编号",
      required: true,
      disabled: isEdit.value == true,
      width: 376,
    },
    {
      prop: "organFullName",
      label: "机构全称",
      width: 376,
    },
    {
      prop: "organName",
      label: "机构简称",
      required: true,
      width: 376,
    },
    {
      prop: "organStat",
      label: "机构状态",
      required: true,
      slots: {
        default: () =>
          h(resolveComponent("kui-input"), {
            modelValue: $dict.translate("t_sys_organ.stat", formModel.value.organStat + ""),
            disabled: isEdit.value == true,
            width: 376,
          }),
      },
    },
  ]);

表单补充属性

    labelWidth: 125,
    width: 825,
	 form: {
	      colNum: 2,
	      // preview: ispreview.value,
	    },

在KUI-PAGE中写form

<kui-page
      ref="pageRef"
      title="期货保证金"
      remote-pagi
      :query-url="querySysFutureMargin"
      :add-url="addSysFutureMargin"
      :upd-url="modifySysFutureMargin"
      :del-url="deleteSysFutureMargin"
      :form-prop="formProp"
      :table-prop="tableProp"
      :dialog-prop="dialogProp"
      :trans-add-data="handleTransData"
      :trans-upd-data="handleTransData"
    />

这里的form是表格的搜索表单

还有一种表单时dialog表单
类似于
在模板 中
:dialog-prop=“dialogProp”

  const formModel = reactive({
    tractId: "",
    controlType: "",
    contractId: "",
    ukey: "",
    rateTd: "",
  });
  
 const dialogProp = computed(() => ({
    customTitle: (title, _type) => {
      return `${title}-${_type == "add" ? "新增" : type.value == "edit" ? "编辑" : "详情"}`;
    },
    labelWidth: 125,
    width: 825,
    draggable: true,
    form: {
      colNum: 2,
      // preview: ispreview.value,
    },
    showCancelBtn: !ispreview.value,
    showOkBtn: !ispreview.value,
    model: formModel,
    items: [
      {
        prop: "tractId",
        label: "1",
      },
         {
        prop: "tractId",
        label: "2",
      },
         {
        prop: "tractId",
        label: "3",
      },
    ]

🆗准备工作够了
去实操