vue3+pinia 实现缓存未提交的表单数据，下次进来可以继续编辑

pinia 用法和vuex大致相同 这里就不再赘述基本操作


在页面中引入你定义好的模块然后进行赋值

然后在点击新增按钮时判断 state.formData state.formData.FGUID是否存在，存在就说明 之前编辑过 可以直接跳转表单，这里注意跳转表单后表单的值也是pinia存储的，这样才能保证点击继续的时候显示上次未提交的内容 如果不存在就说明没有点击过，直接新创建一个formData formData 的属性就是你表单提交的字段
进入详情页也是一样先去列表存储的内容 这样如果有值的话 就会显示上次未提交的内容了
下面上全部代码
列表


<template #right>
<Icon name=“plus” size=“25” @click=“openAdd()” />



<DropdownItem v-model=“billState” :options=“drpDeliveryStates” @change=“handleStateChange” />
<DropdownItem v-model=“billDate” :options=“billDates” @change=“handleDateChange” />



<PullRefresh v-model=“pullLoading” @refresh=“onRefresh”>
<List
v-model:loading=“loading”
:finished=“finished”
finished-text=“没有更多了”
@load=“onLoad”
style=“margin-top: 6px”
class=“list_content”
v-show=“!showEmpty”
>
<div :style=“listStyle” v-for=“(item, index) in list” :key=“index” @click=“goToDetail(item)”>


<template #title>

单号{{ item.FBillNo }}

<template #value>




<template #title>

{{ item.FName }}

<template #label>

单据日期
{{ formatDate(item.FDate) }}

调出客户
{{ item.FCustName }}

数量
{{ item.FQty }}

金额
￥{{ formteMoney(item.FAmount) }}

调入客户
{{ item.FInCustName }}

调入仓库
{{ item.FInStockName }}
-
调出仓库
{{ item.FOutStockName }}

调入组织
{{ item.FInCustDeptName }}
-
调出组织
{{ item.FDeptName }}

调入经办人
{{ item.FInCustUserName }}
-
调出经办人
{{ item.FUserName }}

<template #value>

详情


<Form
@failed=“onFailed”
@submit=“onSubmit”
scroll-to-error
class=“publicForm formBottom”
:readonly=“formData.FState > 0”
>

<Field
name=“FBillNo”
v-model=“formData.FBillNo_SRC”
readonly
required
label=“发货单据”
:rules=“rules.FBillNo”
placeholder=“请选择单据”
:is-link=“formData.FState == 0”
@click=“selectDocuments”
/>
<Field
name=“FCustName”
v-model=“formData.FCustName”
label=“调出客户”
placeholder=“请选择客户名称”
:is-link=“formData.FState == 0”
readonly
:rules=“rules.FCustName”
required
@click=“showDealerModal”
/>

  <Field
    name="FInCustName"
    v-model="formData.FInCustName"
    label="调入客户"
    placeholder="请选择客户名称"
    :is-link="formData.FState == 0"
    readonly
    :rules="rules.FInCustName"
    required
    @click="showDealerModal1"
  />
  <Field
    name="FOutStockName"
    v-model="formData.FOutStockName"
    label="调出仓库"
    placeholder="请选择仓库"
    :is-link="formData.FState == 0"
    readonly
    :rules="rules.FOutStockName"
    required
    @click="isShowDriverPicker = true && formData.FState == 0"
  />
  <Field
    name="FInStockName"
    v-model="formData.FInStockName"
    label="调入仓库"
    placeholder="请选择仓库"
    :is-link="formData.FState == 0"
    readonly
    :rules="rules.FInStockName"
    required
    @click="isShowDriverPicker1 = true && formData.FState == 0"
  />

  <Field
    name="FUserName"
    label="调出业务员"
    placeholder="请选择业务员"
    v-model="formData.FUserName"
    :is-link="formData.FState == 0"
    readonly
    :rules="rules.FUserName"
    required
    class="field-label-pl"
    @click="showDealerModal2"
  >
    <!-- <template #button>
      <Icon name="clear" v-if="formData.FParentUserName" @click.stop="showDept()" size="16" />
    </template> -->
  </Field>
  <Field
    name="FInCustUserName"
    label="调入业务员"
    placeholder="请选择业务员"
    v-model="formData.FInCustUserName"
    :is-link="formData.FState == 0"
    readonly
    required
    :rules="rules.FInCustUserName"
    class="field-label-pl"
    @click="showDealerModal3"
  >
    <!-- <template #button>
      <Icon name="clear" v-if="formData.FParentUserName" @click.stop="showDept()" size="16" />
    </template> -->
  </Field>
  <Field
    name="FDeptName"
    v-model="formData.FDeptName"
    label="调出组织"
    placeholder="请选择组织"
    :is-link="formData.FState == 0"
    required
    :rules="rules.FDeptName"
    readonly
    @click="isShowDept = true && formData.FState == 0"
  >
    <!-- <template #button>
      <Icon name="clear" v-if="formData.FDeptName" @click.stop="clShowDept()" size="16" />
    </template> -->
  </Field>
  <Field
    name="FInCustDeptName"
    v-model="formData.FInCustDeptName"
    label="调入组织"
    placeholder="请选择组织"
    :is-link="formData.FState == 0"
    required
    readonly
    :rules="rules.FInCustDeptName"
    @click="isShowDept1 = true && formData.FState == 0"
  >
    <!-- <template #button>
      <Icon name="clear" v-if="formData.FDeptName1" @click.stop="clShowDept1()" size="16" />
    </template> -->
  </Field>
  <Field name="FAddress" v-model="formData.FAddress" label="调出客户地址" placeholder="请输入地址" clearable />
  <Field
    name="FInCustAddress"
    v-model="formData.FInCustAddress"
    label="调入客户地址"
    placeholder="请输入地址"
    clearable
  />
  <Field name="FContact" v-model="formData.FContact" label="调出客户联系人" placeholder="请输入联系人" clearable />
  <Field
    name="FInCustContact"
    v-model="formData.FInCustContact"
    label="调入客户联系人"
    placeholder="请输入联系人"
    clearable
  />
  <Field name="FPhone" v-model="formData.FPhone" label="调出客户电话" placeholder="请输入联系人电话" clearable />
  <Field
    name="FInCustPhone"
    v-model="formData.FInCustPhone"
    label="调入客户电话"
    placeholder="请输入联系人电话"
    clearable
  />
  <!--商品清单-->
  <collapse v-model="activeNames">
    <collapse-item title-class="mytitle" name="1">
      <template #title>
        <div>商品清单</div>
      </template>

      <template #value>
        <div style="color: #333">
          小计：<span style="color: #ee0a24"> ¥{{ formteMoney(totalBalanceAmount) }}</span>
        </div>
      </template>

      <div class="goodsList" v-for="(item, index) in formData.vItems" v-bind:key="index">
        <div class="GroupListIndex">
          <div>{{ bindCount(index) }}</div>
        </div>
        <SwipeCell>
          <Card :thumb="item.FPhoto">
            <template #tags>
              <div class="font16">{{ item.FName }}</div>
              <div class="flex font12">
                <div class="flex1">规格：{{ item.FSpec }}</div>
                <div>x{{ item.FQty }}</div>
              </div>
              <div class="flex1">
                单价：
                <span class="font14 cd1201d">¥{{ formteMoney(item.FPrice) }}</span>
              </div>
              <div class="flex">
                <div class="flex1">
                  金额：
                  <span class="font14 cd1201d">¥{{ formteMoney(item.FAmount) }}</span>
                </div>
                <div class="setGoods" @click="openEditPriceDialog(item, index)">修改</div>
              </div>
            </template>
          </Card>
          <template #right>
            <Button square @click="delectGoods(item, index)" type="danger" text="删除" />
          </template>
        </SwipeCell>
      </div>
    </collapse-item>
  </collapse>
  <div></div>
  <div class="van-panel-item" style="margin-bottom: 50px">
    <Collapse v-model="activeMemo">
      <CollapseItem name="1" lazy-render>
        <div>
          <Field
            name="FMemo"
            v-model="formData.FMemo"
            type="textarea"
            rows="2"
            autosize
            maxlength="500"
            show-word-limit
          />
        </div>
        <template #title>
          <div class="title"><Icon name="notes-o" />备注</div>
        </template>
      </CollapseItem>
    </Collapse>
  </div>
  <ActionSheet v-model:show="isShowDriverPicker" round position="bottom">
    <SelectBasic
      :multiple="false"
      placeholder="选择调出仓库"
      :dataSource="basicData.StockVehicleInfo"
      @onchange="onChangeDriver"
      @cancel="isShowDriverPicker = false"
    />
  </ActionSheet>
  <ActionSheet v-model:show="isShowDriverPicker1" round position="bottom">
    <SelectBasic
      :multiple="false"
      placeholder="选择调出仓库"
      :dataSource="basicData.StockVehicleInfo"
      @onchange="onChangeDriver1"
      @cancel="isShowDriverPicker1 = false"
    />
  </ActionSheet>
  <ActionSheet v-model:show="isShowDept" round position="bottom">
    <SelectTree
      placeholder="选择组织"
      :multiple="false"
      :selectLast="false"
      :selectValue="formData.FDeptName"
      :dataSource="basicData.Department"
      @onchange="onChangeDept"
      @cancel="isShowDept = false"
    />
  </ActionSheet>
  <ActionSheet v-model:show="isShowDept1" round position="bottom">
    <SelectTree
      placeholder="选择组织"
      :multiple="false"
      :selectLast="false"
      :selectValue="formData.FDeptName1"
      :dataSource="basicData.Department"
      @onchange="onChangeDept1"
      @cancel="isShowDept1 = false"
    />
  </ActionSheet>
  <div style="margin: 0.5rem"></div>
  <!-- <ActionBar safe-area-inset-bottom>
    <ActionBarButton type="danger" text="保存" native-type="submit" v-if="id == '0'" />
    <ActionBarButton v-if="isShowAudit" type="danger" text="提交" native-type="submit" />
    <ActionBarButton v-if="isShowUnSubmit" type="danger" text="撤回" @click="onClickUnSubmit" />
    <ActionBarButton v-if="isShowUnSubmit" type="danger" text="审核" @click="onClickAudit" />
    <ActionBarButton v-if="isShowUnAudit" type="danger" text="反审" @click="onClickAudit1" />
  </ActionBar> -->
  <div class="van-action-bar van-safe-area-bottom">

    <Button v-if="isShowAudit"  class="small" type="default" text="提交"   native-type="submit"/>
    <Button class="small" type="default" text="保存" v-if="isShowSubmit &&id == '0' "  native-type="submit" />
    <Button class="small" type="default" text="删除" v-if="isShowDelete" @click="deleteBill"  />
    <Button class="small" type="default" text="撤回" v-if="isShowUnSubmit" @click="onClickUnSubmit" />
    <Button class="small" type="default" text="审批" v-if="isShowAudit1" @click="onClickAudit" />
    <Button class="small" type="default" text="反审" v-if="isShowUnAudit" @click="onClickAudit1"  />
  </div>
</Form>
<!--弹出框，赋予chargeBtn事件-->
<Popup v-model:show="showEditGoodsPriceDialog" title="修改金额" round show-cancel-button>
  <div class="w20rem ptb_5 prl_5">
    <div class="flex h3rem borderB l3rem font16">
      <div class="flex1 flexfff">修改金额</div>
    </div>
    <!--数量-->
    <Field
      v-model="editdGoods.FQty"
      ref="getFocus"
      right-icon="edit"
      @focus="inputfocus($event)"
      autosize
      label="数量"
      type="number"
      placeholder="请输入数量"
    />
    <!--单价-->
    <Field
      v-model="editdGoods.FPrice"
      ref="getFocus"
      autosize
      label="单价"
      right-icon="edit"
      @focus="inputfocus($event)"
      type="number"
      placeholder="请输入单价"
    />
    <!--金额-->
    <Field v-model="FAmount" readonly autosize label="金额" type="number" placeholder="0" />
    <div class="flex h3rem borderT l3rem">
      <!-- <div class="flex1 flexfff borderR" @click="showEditGoodsPriceDialog = false">取消</div> -->
      <div class="flex1 flexfff c2287ee" @click="completeEdit">确认</div>
    </div>
  </div>
</Popup>
<!-- </div> -->