MineAdmin结合arco.design框架使用自带组件示例

 使用他自带的组件真的太香了，下面是示例图和代码

<template>
     // isStrInArray('information:agriculturalMachinery:index') 判断页面权限
    <div v-if="isStrInArray('information:agriculturalMachinery:index')" class="main" >
      <!-- CRUD 组件 -->
      <ma-crud :options="crud" :columns="columns" ref="crudRef">
        // 搜索的插槽
        <template #search-purchase_date="{ searchForm, component }">
         <a-range-picker
          @change="onChange"
          v-model="searchForm[component.dataIndex]" 
        />
        </template>  
         // table的插槽
        <template #image="{ record }">
            <span style="cursor: pointer;" @click="onClick(tool.returnNewImageNewWay(record.img_tag,record.id))">查看图片 {{tool.returnNewImageNewWay(record.img_tag,record.id)  }}</span>
        </template>
      </ma-crud>
      <a-image-preview
            @close = "onClose"
            :src="image"
            v-model:visible="visible"
          />
    </div>
    <Nopermission  v-else>
   
  </Nopermission>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import template from '@/api/bigScreenManage/template'
import { isStrInArray } from '@/utils/butsPurview'
import Nopermission from '/src/components/Nopermission/index.vue'
import equipmentClass from '@/api/agriculturalMachinery/agriculturalMachinery.js'
import tool from '@/utils/tool'
onMounted(() => {
})
const image = ref(null)
const visible = ref(false)
    const onClick = (val) => {
      image.value = val
      visible.value = true;
    };
    const onClose = ()=>{
      visible.value = false
    }
const onChange = (val)=>{
  console.log(val,'val');
}
const searchForm = reactive({
  identifier:"",
  xing_name:"",
  purchase_date:[],
  accessory_name:"",
  accessory_xing_name:"",
  accessory_identifier:"",
})
const crud = reactive({
  api: equipmentClass.getLists,
  operationColumn: true,
  operationWidth: 200,
// 新增按钮权限
  add: { show: true, api: equipmentClass.addLists, auth: ['information:agriculturalMachinery:save'] ,
},
 // 修改按钮权限
  edit: { show: true, api: equipmentClass.fixLists, auth: ['information:agriculturalMachinery:update'] },
  delete: {
    show: true,
    api: equipmentClass.delLists,
    auth: ['information:agriculturalMachinery:delete'],
  },
// 这里可以设置新增编辑表单的样式
  formOption: {
    width: 800,
    layout: [
      {
        formType: 'grid',
        cols: [
          { span: 12, formList: [{ dataIndex: 'identifier' }] },
          { span: 12, formList: [{ dataIndex: 'xing_name' }] },
        ],
      },
      {
        formType: 'grid',
        cols: [
          { span: 12, formList: [{ dataIndex: 'purchase_date' }] },
          { span: 12, formList: [{ dataIndex: 'image' }] },
        ],
      },
      {
        formType: 'grid',
        cols: [
          { span: 12, formList: [{ dataIndex: 'accessory_name' }] },
          { span: 12, formList: [{ dataIndex: 'accessory_number' }] },
        ],
      },
      {
        formType: 'grid',
        cols: [
          { span: 12, formList: [{ dataIndex: 'accessory_xing_name' }] },
          { span: 12, formList: [{ dataIndex: 'accessory_identifier' }] },
        ],
      },
    ],
  },
})

const columns = reactive([
  {
    title: '农机编号',
    dataIndex: 'identifier',
    addDisplay: true,
    editDisplay: true,
    search: true,
    commonRules: [{ required: true, message: '农机编号必填' }],
    align:'center'
  },
  {
    title: '农机型号',
    dataIndex: 'xing_name',
    addDisplay: true,
    editDisplay: true,
    search: true,
    commonRules: [{ required: true, message: '农机型号必填' }],
    align:'center',
    // 输入框添加原生事件驼峰命名
    // onInput:(val)=>{
    //  console.log(val,'input事件');
    // }
  },
  {
    title: '购买时间',
    dataIndex: 'purchase_date',
    search: true,
    formType: 'date',
    commonRules: [{ required: true, message: '购买时间必填' }],
    align:'center'
  },
  
  {
    title: '农机图片',
    dataIndex: 'image',
    formType: 'upload',
    commonRules: [{ required: true, message: '农机图片必填' }],
   // 再修改的时候预设值回显
    editDefaultValue: async (record) => {
      return  tool.returnNewImageNewWay(record.img_tag,record.id)
    },
    align:'center'
  },
  {
    title: '配件名称',
    dataIndex: 'accessory_name',
    search: true,
    commonRules: [{ required: true, message: '配件名称必填' }],
    align:'center'
  },
  {
    title: '配件数量',
    dataIndex: 'accessory_number',
    hide: false,
    commonRules: [{ required: true, message: '配件数量必填' }],
    align:'center'
  },
  {
    title: '配件型号',
    dataIndex: 'accessory_xing_name',
    hide: false,
    search: true,
    commonRules: [{ required: true, message: '配件型号必填' }],
    align:'center'
  },
  {
    title: '配件编号',
    dataIndex: 'accessory_identifier',
    hide: false,
    search: true,
    commonRules: [{ required: true, message: '配件编号必填' }],
    align:'center'
  },

])

</script>
<style scoped>
.main{
  padding: 10px 10px;
}
</style>