vue3 之 ArcoPro 后台管理系统

一、资料链接

　　Arco Design 的官网：https://arco.design/

　　Arco Design开箱的管理系统预览：https://vue-pro.arco.design/login

　　vue3 项目创建的指南：https://arco.design/vue/docs/pro/start

二、基本命令

　　开始开发之前，请确认本地环境中安装好了 node， git ，这些肯定具备塞，Arco Design是字节出品的，创建当然需要自己的脚手架

　　该项目的技术栈：vue + ES2015（及以上） + TypeScript + Arco Design + echarts等

　　① 安装Arco Design的脚手架命令

npm i -g arco-cli

　　② 创建项目

arco init 项目名

　　③ 选择技术栈（这个按你自己的需要选择，这是选择vue）

? 请选择你希望使用的技术栈
   React
 ❯ Vue

　　④ 选择分类

? 请选择一个分类
   业务组件
   组件库
   Lerna Menorepo 项目
 ❯ Arco Pro 项目

　　⑤ 运行项目

npm run devs　

 三、常用组件

　　① 表单（以下就是自行封装得弹出表单自定义验证规则）

<template>
  <a-modal :visible="visible" title="新增账号" :closable="false">
    <a-form :model="form" :rules="rules" ref="ruleFormRef">
      <a-form-item field="nickName" label="名称" prop="nickName">
        <a-input v-model="form.nickName" />
      </a-form-item>
      <a-form-item field="phoneNumber" label="手机号" prop="phoneNumber">
        <a-input v-model="form.phoneNumber" />
      </a-form-item>
      <a-form-item field="roleVal" label="角色" prop="roleVal">
        <a-select v-model="form.roleVal" placeholder="Please select ..." multiple>
          <a-option value="普通用户">普通用户</a-option>
          <a-option value="管理员">管理员</a-option>
        </a-select>
      </a-form-item>
    </a-form>
    <template #footer>
      <div style="display: flex; justify-content: flex-end">
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleBeforeOk" style="margin-left: 14px;">确定</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue';
import { FormInstance, FieldRule } from '@arco-design/web-vue';

// 父传子的数据
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  currentData: {
    type: Object
  }
})

type formRes = {
  nickName?: string,
  phoneNumber?: string
  role?: string,
  roleVal?: string
}
const form = ref<formRes>({
  nickName: '',
  phoneNumber: '',
  role: '',
  roleVal: '',
});

// 自定义的验证规则
const ruleFormRef = ref<FormInstance | null>(null);

const validateNickName = (value: any, callback: any) => {
  if (!value) {
    callback('请输入名称');
  } else {
    callback();
  }
};

const validatePhoneNumber = (value: any, callback: any) => {
  const pattern = /^1[3-9]\d{9}$/;
  if (!value) {
    callback('请输入手机号');
  } else if (!pattern.test(value)) {
    callback('手机号格式不正确');
  } else {
    callback()
  }
};

type TriggerFieldRule<T> = FieldRule<T> & {
  trigger?: "blur" | "change" | "input";
};
const rules: Record<string, TriggerFieldRule<any>[]> = {
  nickName: [
    { required: true, validator: validateNickName, trigger: 'blur' }
  ],
  phoneNumber: [
    { required: true, validator: validatePhoneNumber, trigger: 'blur' }
  ],
  roleVal: [
    { required: true, message: '请选择用户角色', trigger: 'change' }
  ]
};

const emitEvents = defineEmits(['handleBeforeOk', 'handleCancel'])



const handleBeforeOk = () => {
  console.log('点击确定按钮');
  ruleFormRef.value?.validate((valid: any) => {
    if (!valid) {
      console.log('表单验证通过');
      emitEvents('handleBeforeOk', form.value);
    } else {
      console.log('表单验证失败');
    }
  });
};

const handleCancel = () => {
  form.value = {}
  emitEvents('handleCancel');
};
</script>

<style scoped></style>

　　② 抽屉组件（就可用于详情页面的展示）

<template>
  <a-drawer width="34%" :visible="isShow" :closable="false" :hide-cancel="true" @ok="handleCancel">
    <template #title> 账号详情 </template>
    <div>
      <a-form :model="form" :disabled="disabled">
        <a-form-item field="accountId" label="账号ID" disabled>
          <a-input v-model="form.accountId" />
        </a-form-item>
        <a-form-item field="nickName" label="账号名称">
          <a-input v-model="form.nickName" />
        </a-form-item>
        <a-form-item field="phoneNumber" label="手机号">
          <a-input v-model="form.phoneNumber" />
        </a-form-item>
        <a-form-item field="roleVal" label="角色">
          <a-select v-model="form.roleVal" multiple>
            <a-option value="普通用户">普通用户</a-option>
            <a-option value="管理员">管理员</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="stateVal" label="账号状态">
          <a-select v-model="form.stateVal">
            <a-option value="正常">正常</a-option>
            <a-option value="停用">停用</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="createdTime" label="创建时间" disabled>
          <a-input v-model="form.createdTime" />
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <div style="display: flex; justify-content: flex-end">
        <a-button type="primary" v-if="currentOptions === 'update'" @click="handleUpdateAccount"
          style="margin-right: 14px;">修改</a-button>
        <a-button type="primary" :status="currentData.status === 0 ? 'success' : 'danger'" @click="handleOptions"
          style="margin-right: 14px;">{{ optionsVal
          }}</a-button>
        <a-button type="primary" v-if="currentOptions === 'update'" status="warning" @click="handleUpdateSure"
          style="margin-right: 14px;">确定</a-button>
        <a-button @click="handleCancel">取消</a-button>
      </div>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref, shallowRef, defineProps, watch } from 'vue';

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
  currentData: {
    type: Object,
    required: true,
  },
  currentOptions: {
    type: String,
  },
});

const form = shallowRef({
  accountId: '',
  nickName: '',
  phoneNumber: '',
  role: '',
  roleVal: '',
  status: 0,
  stateVal: '',
  createdTime: '',
});

const disabled = ref(true);
const optionsVal = ref('作废')

const emitEvents = defineEmits(['handleCancel', 'handleUpdateSure']);

const handleUpdateAccount = () => {
  disabled.value = false
}

const handleOptions = () => {
  optionsVal.value = props.currentData.status === 1 ? '作废' : '启用'
}
handleOptions()

const handleUpdateSure = () => {
  emitEvents('handleUpdateSure')
}

const handleCancel = () => {
  emitEvents('handleCancel');
};

watch(() => [props.currentData, props.currentOptions], () => {
  handleOptions()
  disabled.value = props.currentOptions === 'detail';
  form.value = {
    accountId: props.currentData.accountId || '',
    nickName: props.currentData.nickName || '',
    phoneNumber: props.currentData.phoneNumber || '',
    role: props.currentData.role || '',
    roleVal: props.currentData.roleVal || '',
    status: props.currentData.status || 0,
    stateVal: props.currentData.stateVal || '',
    createdTime: props.currentData.createdTime || '',
  };
},
  {
    immediate: true,
    deep: true
  }
);
</script>

<style scoped></style>

 注：该文档为个人理解所写，有误可建议修改（也可留下您宝贵的建议哦~）