关于arco.design遇到的一些问题。

本人使用这个框架没有使用代码生成器，全手动。

1、a-modal弹框使用的时候如果有深层绑定的数据会报错，或者是点击后才得到数据时也会报错、空数据显示

       <a-table  :pagination="false"  :show-empty-tree="true" :columns="columns" :summary="summary(columns,watchList)" :data="watchList" >
      <template #summary-cell="{ column, record, rowIndex }">
        <div >
          {{ record[column.dataIndex] }}
        </div>
      </template>
      <template v-slot:empty>
                <a-empty />
              </template>
    </a-table>

使用v-if 绑定a-modal 这样可以解决报错问题。

2、表单验证，我根据文档上找到2种方式可以进行验证

2-1

      <div style="margin-left: 1.5rem;">
            <a-button 
              @click="fail"
              type="primary"
              status="warning"
              size="small"
              :disabled="fixList.inspectAuditStatus !=0 ?true :false"
              v-if="fixList.inspectAuditStatus ==2 ||fixList.inspectAuditStatus ==0"
            >审核拒绝</a-button>
          </div>
   <a-modal
      v-model:visible="processVisible"
      title-align="start"
      title="审核"
      @cancel="handleCancel"
      closable
      hide-cancel
      :footer="false"
    >
      <a-form
        v-if="processVisible"
        ref="processRef"   //绑定的ref
        :model="fixList"
        style="width: 100%"
        @submit="handleSubmitFixLoss"
      >
     </a-form>
    </a-modal>
  const fail = () => {
  processRef.value.validate().then((res)=>{  
      if (!res) {
      //表单提交成功业务
  }});

2-2  绑定的官网的表单提交函数 

 <a-form
        v-if="processVisible"
        ref="processRef"
        :model="fixList"
        style="width: 100%"
        @submit="handleSubmitFixLoss" //from绑定表单
      >
    <a-button
              html-type="submit"  //框架提供的表单按钮提交方式
              type="primary"
              size="small"
              >审核通过</a-button
const handleSubmitFixLoss = ({ values, errors })=>{
    if (!errors) {
       
    fixLists(ids).then((res) => {
      //  提交成功
  
    })
      }
    })
    ;
    }
  }

3、循环数据绑定表单验证

   <a-form-item 
          v-for="(item, index) in fixListByMonitor"
            :field=" index +`.mi_value`"
            :label="item.mi_name"
            :rules="[
              { required: true, message: `请输入${item.mi_name}检测指标` },
            ]"
          >
            <a-input
              :disabled="fixList.inspectStatus==0 ? false : true"
              v-model:model-value="item.mi_value"
              :placeholder="`请输入${item.mi_name}检测指标`"
            >
            </a-input>
          </a-form-item>

4、这个框架vue3也需要一个根标记，不然路由会白屏，有一个页面报错路由也会直接白屏

5、select选择器官方自带搜索字段 ，绑定change函数最好再select上绑定 

    <a-col :span="12">
          <a-form-item
            field="grade"
            label="粮食等级"
            :rules="[{ required: true, message: '请选择粮食等级' }]"
          >
          <a-select disabled  placeholder="请选择粮食性质" allow-search v-model="addList.grade">
              <a-option  v-for="item in grade"  :value=item.key :label=item.title></a-option>
            </a-select>
          </a-form-item>
        </a-col>

6、表单验证rule的绑定 我是直接再表单上面绑定的，第二条中的2个验证表单都可以验证这种绑定方式

    <a-form-item
            field="bankAccount"
            label="银行账号"
            :rules="[{ required: true, message: '请输入银行账号' },{required: true,match:/^\d{9,18}$/,message: '银行账号不正确'}]"
          >
            <a-input   placeholder="请输入银行账号" v-model="postData.bankAccount" />
          </a-form-item>

7、很多时候通过table返回的单条数据会由number变成string 特别是select中 绑定的key需要手动转行 String（）

8、 import {  useUserStore（自己定义的，再状态机里面可以拿对应的登录信息，以及权限的判断） } from '@/store' 

9、文件导出功能 ，需要后端写对应的接口才行

   import tool from '@/utils/tool'
const exportAction = () => {
  Message.info('请求服务器下载文件中...')

  const download = (url) => request({ url, searchLists, method: 'post', timeout: 60 * 1000, responseType: 'blob' })
      let url = "/inboundandoutbounds/contract/export"
      // let url = "/setting/datasource/export"
      download(url).then(res => {
    tool.download(res)
    Message.success('请求成功，文件开始下载')
  }).catch(() => {
    Message.error('请求服务器错误，下载失败')
  })
}