perf(views): 初步编写"设备限制"组件

src/views/create-customer/EquipmentLimitations.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import SvgIcon from '@/components/SvgIcon.vue';
+import { t } from '@/i18n';
+
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+import type { EquipmentLimitationsItem, EquipmentTypeItem } from '@/types';
+
+interface Props {
+  index: number;
+  form: EquipmentLimitationsItem;
+  equipmentType: EquipmentTypeItem[];
+}
+const formRef = ref<FormInstance>();
+
+const emit = defineEmits(['deleteClick', 'addClick']);
+const props = defineProps<Props>();
+const rules: Record<string, Rule[]> = {
+  deviceGlobalId: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  upperLimit: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+};
+const deleteInterval = () => {
+  emit('deleteClick', props.index);
+};
+const formResetFields = () => {
+  formRef.value?.resetFields();
+};
+const formRefSubmit = () => {
+  return formRef.value?.validate() || Promise.resolve();
+};
+
+defineExpose({
+  formRefSubmit,
+  formResetFields,
+});
+</script>
+
+<template>
+  <div>
+    <AFlex align="center">
+      <div class="set-content">
+        <AForm ref="formRef" :model="form" :rules="rules">
+          <AFlex justify="space-between">
+            <AFormItem :label="$t('setupProtocol.deviceType')" name="deviceGlobalId">
+              <ASelect
+                class="time-width"
+                v-model:value="form.deviceGlobalId"
+                :options="equipmentType"
+                :field-names="{ label: 'dataName', value: 'id' }"
+                :placeholder="$t('common.plzSelect')"
+              />
+            </AFormItem>
+
+            <AFormItem label="数量" name="upperLimit">
+              <AInputNumber
+                :placeholder="t('common.pleaseEnter')"
+                v-model:value="form.upperLimit"
+                class="time-width"
+                addon-after="台"
+              />
+            </AFormItem>
+          </AFlex>
+        </AForm>
+      </div>
+      <div @click="$emit('addClick')">
+        <AFlex justify="center" align="center" class="add-style">
+          <SvgIcon name="plus" />
+        </AFlex>
+      </div>
+
+      <div @click="deleteInterval">
+        <AFlex v-if="index !== 0" justify="center" align="center" class="add-style">
+          <SvgIcon name="minus" />
+        </AFlex>
+      </div>
+    </AFlex>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.input-number {
+  width: 100px;
+  margin-left: 40px;
+}
+
+:deep(.time-width) {
+  .ant-input-number-group .ant-input-number-group-addon {
+    background-color: #fff;
+  }
+}
+
+.temperature-style {
+  width: 256px;
+  height: 32px;
+  background: #fff;
+  border: 1px solid rgb(0 0 0 / 15%);
+  border-radius: 4px;
+}
+
+.add-style {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  margin-bottom: 16px;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.time-width {
+  width: 256px;
+}
+
+.time-text {
+  margin-right: 12px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: #666;
+  text-align: left;
+}
+
+.set-content {
+  width: 708px;
+  height: 64px;
+  padding: 16px;
+  margin-right: 12px;
+  margin-bottom: 16px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+</style>