perf(views): 初步编写"添加账户"组件

src/views/create-customer/AddAccount.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import SvgIcon from '@/components/SvgIcon.vue';
+import { t } from '@/i18n';
+
+import type { Rule } from 'ant-design-vue/es/form';
+import type { AccountItem } from '@/types';
+
+interface Props {
+  index: number;
+  form: AccountItem;
+}
+const emit = defineEmits(['deleteClick']);
+const props = defineProps<Props>();
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+};
+
+const characterList = ref([]);
+const deleteAccount = () => {
+  emit('deleteClick', props.index);
+};
+</script>
+
+<template>
+  <div>
+    <AForm ref="formRef" :colon="false" label-align="left" :model="form" :rules="rules" :label-col="{ span: 5 }">
+      <ABadge>
+        <template #count>
+          <SvgIcon @click="deleteAccount" class="icon-delete" name="close-circle" />
+        </template>
+        <AFlex class="account-bgc" :vertical="true">
+          <AFormItem label="姓名" name="name">
+            <AInput class="input-width" v-model:value="form.name" placeholder="请输入" />
+          </AFormItem>
+          <AFormItem label="手机号" name="name">
+            <AInput class="input-width" v-model:value="form.name" placeholder="请输入" />
+          </AFormItem>
+          <AFormItem label="角色" name="name">
+            <ASelect
+              class="input-width"
+              :options="characterList"
+              :field-names="{ label: 'groupName', value: 'id' }"
+              :placeholder="$t('common.plzSelect')"
+            />
+          </AFormItem>
+          <AFormItem label="到期时间" name="name">
+            <ADatePicker class="input-width" />
+          </AFormItem>
+          <AFormItem label="启用" name="name">
+            <ASwitch />
+          </AFormItem>
+        </AFlex>
+      </ABadge>
+    </AForm>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.icon-delete {
+  top: 16px;
+  right: 16px;
+  font-size: 16px;
+  color: #ccc;
+  cursor: pointer;
+}
+
+.account-bgc {
+  width: 400px;
+  height: 296px;
+  padding: 24px 18px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.icon-color {
+  color: #f56f6f;
+}
+
+.delete-div {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.input-width {
+  width: 256px;
+}
+</style>