DeepAICloud/src/views/device/components/bindCameraModal.vue

<template>
  <a-modal
    v-model:open="visible"
    :title="t('deviceAdmin.addDevice')"
    width="620px"
    :ok-text="t('common.comfirm')"
    :footer="null"
    :cancel-text="t('common.cancel')"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :confirm-loading="loading"
  >
    <a-form ref="formRef" :model="formData" layout="vertical">
        <a-form-item
          name="sn"
          :rules="snRules"
        >
          <a-input
            size="large"
            v-model:value="formData.sn"
            :placeholder="t('deviceAdmin.deviceSnPlaceholder')"
          />
        </a-form-item>
      <div
        v-for="(item, index) in formData.snList"
        :key="index"
        class="flex items-center justify-between w-full sn-item-wrap"
      >
        <a-form-item
        class="flex-1 w-full"
          :name="['snList', index, 'sn']"
          :rules="snRules"
        >
          <a-input
            size="large"
            v-model:value="item.sn"
            :placeholder="t('deviceAdmin.deviceSnPlaceholder')"
          />
        </a-form-item>
        <div class="del-btn" @click="removeItem(index)">
        <MinusCircleFilled  style="color: red; font-size: 16px" />
        </div>
      </div>
    </a-form>
    <div class="flex justify-between ant-modal-footer modal-footer">
      <a-button type="primary" ghost @click="addItem">
        +{{ t('mall.myOrders.bindCameraModule.reNewDevice') }}
      </a-button>
      <div class="btn-group">
        <a-button style="margin-right: 16px" @click="handleCancel">{{ t('common.cancel') }}</a-button>
        <a-button type="primary" @click="handleSubmit">{{ t('common.comfirm') }}</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, reactive, watch, computed } from "vue";
import { useI18n } from "vue-i18n";
import {
  MinusCircleFilled,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { cameraAdd } from "@/api/equity";

const { t } = useI18n();

const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  cameraType: {
    type: Number,
    default: null,
  }
});
const emit = defineEmits(["update:open", "confirm"]);

const visible = ref(props.open);
const loading = ref(false);
const formRef = ref();

const formData = reactive({
  snList: [],
  sn: "",
});

const snRules = computed(() => [{
  required: true,
  message: t('deviceAdmin.deviceSnPlaceholder'),
  trigger: 'blur',
}]);

const addItem = () => {
  formData.snList.push({ sn: "" });
};

const removeItem = (index) => {
  if (formData.snList.length <= 0) return;
  formData.snList.splice(index, 1);
  formRef.value?.clearValidate(["snList", index, "sn"]);
};

watch(
  () => props.open,
  (val) => {
    visible.value = val;
    if (!val) {
      formData.snList = [];
      formRef.value?.resetFields();
    }
  },
  { immediate: true }
);

const handleSubmit = async () => {
  try {
    loading.value = true;
    const sndata = await formRef.value?.validate();
    let list = formData.snList?.map((item) => item.sn) || [];
    list.push(sndata.sn)
    const snArr = formData.snList.map((item) => item.sn.trim());
    await cameraAdd({snCode: list.join(',') })
    message.success(t('common.success'));
    emit("confirm", snArr);
    emit("update:open", false);
  } catch (err) {
    console.log("validate failed", err);
  } finally {
    loading.value = false;
  }
};

const handleCancel = () => {
  emit("update:open", false);
};
</script>

<style scoped lang="less">
.sn-item-wrap {
  position: relative;
  margin-bottom: 4px;
}
.del-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  margin-bottom: 24px;
  margin-left: 16px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>