vue3用框架构建一个界面

<template>
  <page-wrapper fixedHeight contentFullHeight>
    <kui-page
      ref="pageRef"
      title="标题名称"
      remote-pagi
      :query-url="querySysFutureLargeMargin"
      :add-url="addSysFutureLargeMargin"
      :upd-url="modifySysFutureLargeMargin"
      :del-url="deleteSysFutureMargin"
      :form-prop="formProp"
      :table-prop="tableProp"
      :dialog-prop="dialogProp"
    />
  </page-wrapper>
</template>

kui-page是一整个页面
ref=“pageRef” 是这个页面的名称
:query-url=“querySysFutureLargeMargin” 查询接口
:add-url=“addSysFutureLargeMargin” 增加接口
:upd-url=“modifySysFutureLargeMargin” 更新接口
:del-url=“deleteSysFutureMargin” 删除接口
:form-prop=“formProp” 查询的两个搜索条件
:table-prop=“tableProp” 表格
:dialog-prop=“dialogProp” 对话框 新增 编辑的时候就显示这个

  const { $http, $message } = getCurrentInstance()?.proxy as any;

引入http message方法

const { selections } = useData(["market"]);

usedata是一个封装的方法，在后面单选框的选项中进行选择

 const formProp = computed(() => ({
    labelWidth: 100,
    variant: "underlined",
    items: [
      {
        prop: "contractId",
        label: "期货品种",
        mold: "select",
        filterable: true,
        moldProps: {
          valueKey: "contractId",
          labelKey: ["contractCode", "contractName"],
          labelSeparator: "\u00A0\u00A0",
          options: tractSubOptions.value,
        },
        ...multiItem,
      },
    ],
  }));

labelWidth是100就是查询项标题的意思
moldProps是v-model双向绑定
value是双向绑定的值
labelkey:为界面上显示的时候展现的情况
options后面接数组
…multiItem, 多选

const tableProp = {
    emptyCellText: "--",
    btns: [
      {
        key: "add",
        click: handleAdd,
        visible: isAuth("add"),
      },
    ],
    items: [
      {
        prop: "market",
        label: "交易市场",
        formatter: (row) =>
          `${row?.tractCode ? row?.tractCode + "\u00A0\u00A0" : "--"}${row?.tractName}`,
      },
        {
        type: "button",
        width: 120,
        fixed: "right",
        btns: [
          {
            key: "update",
            text: "编辑",
            click: (row) => handleUpdate(row),
          },
          {
            key: "delete",
            text: "删除",
            type: "danger",
            isText: true,
          },
        ],
      },
  ]

emptyCellText的意思是当表格为空时显示————
btns是表格上面的按钮
key 是 按钮性质
click绑定的方法
传递参数的方法：
click:(row) 括号里面是参数
handleUpdate(row)
onChange:(val) => handleStatChange(val,1)

vidible控制可见度

items是列的名称
formatter是对后端传递数据的处理
有两种处理方法

formatter: (row) => row.previousFireTime ? dateFormat(row.previousFireTime, "yyyy-MM-dd hh:mm:ss") : "",

直接处理 返回的是返回值 dateFormat(row.previousFireTime, “yyyy-MM-dd hh:mm:ss”) 比如说这个就是返回值
第二种是
绑定方法

formatter: formatterStatus,
  function formatterStatus(val) {
    return `<span style="color:${color}">${jobStatusMap[val.jobStatus]}</span>`;
  }

关键是在后面的function中要有val参数 就是row
最后有return 返回一个值

dialogPage.showUpdateDialog(
{
   ...data,
 },
 async (data) => {
        dialogProp.loading = true;
        $http
          .post(modifyPortfolio, {
            ...data,
            organId,
            portfolioId: row.portfolioId,
            stat: row.stat,
          })
          .then(() => {
            dialogProp.loading = false;
            $message.success("编辑投资组合成功");
            dialogPage.hideDialog();
            queryPage();
          })
          .catch(() => {
            dialogProp.loading = false;
          });
      },
      () => {
        dialogPage.hideDialog();
      },

dialogPage.showUpdateDialog({},async(data) => {
$http.post(modifySysTrader, { …data, organId, traderId: row.traderId }).then(() => { }).catch(() => {
})
在dialogPage.showUpdateDialog中 第一个 {} 是控制要发送的参数
async (data) => {
$http.post （采用post方法）
modifyPortfolio 接口，后面的{}是参数
.then是请求之后的返回后的参数
.catch() 捕捉异常

新增代码

function handleAdd() {
    type.value = "add";
    const { dialogPage, dialogProp, queryPage } = pageRef.value;
    pageRef.value.dialogPage.showAddDialog((data) => {
      dialogProp.loading = true;
      let _effectNode = (
        (data.effectNode.includes(1) ? 2 : 0) | (data.effectNode.includes(2) ? 1 : 0)
      )
        .toString(2)
        .padStart(2, "0");
      console.log("_effectNode", _effectNode);
      $http
        .post(addSysFutureLargeMargin, { ...data })
        .then(() => {
          dialogProp.loading = false;
          $message.success("期货保证金新增成功");
          dialogPage.hideDialog();
          queryPage();
        })
        .catch(() => {
          dialogProp.loading = false;
        });
    });
  }

watch方法

  watch(
    () => tractMarketId.value,
    (newVal) => {
      console.log("监听", newVal);
      dialogProp.value.items.forEach((item) => {
        if (item.prop === "ukey") {
          item.moldProps.queryParam.marketId = newVal;
        }
      });
    },
    { immediate: true, deep: true },
  );

监听的是tractMarketId对象
（）=> 监听对象
（newVal） =>
这里是当值变化的时候会调用的方法
为dialogpop对象赋值
dialogpop代码为

 const dialogProp = computed(() => ({
    class: "add-item-dlg",
    model: {
      accountId: "",
      investId: "",
      portfolioId: "",
      rcsId: "",
      stgId: 0,
      tractId: "",
      traderId: "",
      ukey: "",
      rcsTypeName: "",
      rcsName: "",
    },
    width: "541px",
    draggable: true,
    destroyOnClose: true,
    form: {
      colNum: 1,
    },
    beforeShowDialog: (type) => {
      queryOptions(type);
    },
    items: [
      {
        prop: "rcsTypeName",
        label: "风控类别",
        disabled: true,
        required: true,
      },
      {
        prop: "rcsName",
        label: "风控条目",
        disabled: true,
        required: true,
      },
      {
        prop: "accountId",
        label: "资产账户",
        mold: "select",
        filterable: true,
        moldProps: selections.value["authorityAccount"],
        clearable: true,
        itemVisible: [1].includes(currentItem.value.scopeAcc),
        required: true,
      },
      {
        prop: "tractId",
        label: "交易账户",
        filterable: true,
        mold: "select",
        moldProps: {
          labelKey: ["tractCode", "tractName"],
          valueKey: "tractId",
          labelSeparator: "\u00A0\u00A0",
          options: options.authorityTract,
          onSelectChange: (val) => handleTractIdChange(val),
        },
        clearable: true,
        itemVisible: [2].includes(currentItem.value.scopeAcc),
        required: true,
      },
      {
        prop: "portfolioId",
        label: "投资组合",
        filterable: true,
        mold: "select",
        moldProps: selections.value["authorityPortfolio"],
        clearable: true,
        itemVisible: [3].includes(currentItem.value.scopeAcc),
        required: true,
      },
      {
        prop: "investId",
        label: "投资账户",
        filterable: true,
        mold: "select",
        moldProps: {
          labelKey: ["investCode", "investName"],
          valueKey: "investId",
          labelSeparator: "\u00A0\u00A0",
          options: options.authorityInvest,
        },
        clearable: true,
        itemVisible: [4].includes(currentItem.value.scopeAcc),
        required: true,
      },
      {
        prop: "marketId",
        label: "交易市场",
        mold: "select",
        filterable: true,
        moldProps: selections.value["market"],
        clearable: true,
        itemVisible: [4].includes(currentItem.value.scopeSecu),
        required: true,
      },
      {
        prop: "contractId",
        label: "合约品种",
        mold: "select",
        filterable: true,
        moldProps: selections.value["contract"],
        clearable: true,
        itemVisible: [3].includes(currentItem.value.scopeSecu),
        required: true,
      },
      {
        prop: "ukey",
        label: "证券代码",
        mold: "bond",
        moldProps: {
          valueKey: "marketCode",
          labelKey: "marketAbbr",
          queryKey: "keyWord",
          queryUrl: querySecurity,
          queryParam: computed(() => ({
            marketId: tractMarketId.value, // 绑定动态 marketId
          })),
          onSelectChange: handleBondChange,
        },
        clearable: true,
        required: true,
        itemVisible: [1].includes(currentItem.value.scopeSecu),
      },
      {
        prop: "stgId",
        label: "策略",
        mold: "number",
        rules: [
          {
            validator: validateInt("策略", true),
          },
        ],
        clearable: true,
        itemVisible: false,
      },
      {
        prop: "traderId",
        label: "交易员",
        mold: "select",
        moldProps: selections.value["trader"],
        clearable: true,
        itemVisible: false,
      },
    ],
  }));

当作一个对象处理