feat: 物联卡管理新增、编辑

src/api/iot-card/cardManagement.ts

@@ -98,3 +98,21 @@ export const _import = (configId: any, params: any) => server.get(`/network/card
  * @param params
  */
 export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, 'blob');
+
+/**
+ * 验证iccid
+ * @param id
+ */
+export const validateId = (id: string) => server.get(`/network/card/id/_validate?id=${id}`);
+
+/**
+ * 新增物联卡
+ * @param data
+ */
+export const add = (data: any) => server.patch(`/network/card`, data);
+
+/**
+ * 编辑物联卡
+ * @param data
+ */
+export const edit = (data: any) => server.put(`/network/card/${data.id}`, data);

src/views/iot-card/CardManagement/Save.vue

@@ -0,0 +1,246 @@
+<template>
+    <a-modal
+        :maskClosable="false"
+        width="600px"
+        :visible="true"
+        :title="type === 'add' ? '新增' : '编辑'"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :confirmLoading="btnLoading"
+    >
+        <div style="margin-top: 10px">
+            <a-form
+                :layout="'vertical'"
+                ref="formRef"
+                :rules="rules"
+                :model="modelRef"
+            >
+                <a-form-item label="卡号" name="id">
+                    <a-input
+                        v-model:value="modelRef.id"
+                        placeholder="请输入卡号"
+                        :disabled="type === 'edit'"
+                    ></a-input>
+                </a-form-item>
+                <a-form-item name="iccId">
+                    <template #label>
+                        <span>
+                            ICCID
+                            <a-tooltip title="IC卡的唯一识别号码">
+                                <AIcon
+                                    type="QuestionCircleOutlined"
+                                    style="margin-left: 2px"
+                                />
+                            </a-tooltip>
+                        </span>
+                    </template>
+                    <a-input
+                        v-model:value="modelRef.iccId"
+                        placeholder="请输入ICCID"
+                        :disabled="type === 'edit'"
+                    />
+                </a-form-item>
+                <a-form-item label="平台对接" name="platformConfigId">
+                    <a-select
+                        showSearch
+                        :filter-option="filterOption"
+                        :disabled="type === 'edit'"
+                        allowClear
+                        :options="platformConfigList"
+                        v-model:value="modelRef.platformConfigId"
+                        placeholder="请选择平台对接"
+                    >
+                    </a-select>
+                </a-form-item>
+
+                <a-form-item label="运营商" name="operatorName">
+                    <a-select
+                        allowClear
+                        showSearch
+                        :filter-option="filterOption"
+                        :options="OperatorList"
+                        v-model:value="modelRef.operatorName"
+                        placeholder="请选择运营商"
+                    >
+                    </a-select>
+                </a-form-item>
+                <a-form-item label="类型" name="cardType">
+                    <a-select
+                        allowClear
+                        showSearch
+                        :disabled="type === 'edit'"
+                        :filter-option="filterOption"
+                        :options="TypeList"
+                        v-model:value="modelRef.cardType"
+                        placeholder="请选择类型"
+                    >
+                    </a-select>
+                </a-form-item>
+                <a-form-item label="说明" name="describe">
+                    <a-textarea
+                        v-model:value="modelRef.describe"
+                        placeholder="请输入说明"
+                        showCount
+                        :maxlength="200"
+                    />
+                </a-form-item>
+            </a-form>
+        </div>
+    </a-modal>
+</template>
+
+<script lang="ts" setup>
+import {
+    queryPlatformNoPage,
+    validateId,
+    add,
+    edit,
+} from '@/api/iot-card/cardManagement';
+import { message } from 'ant-design-vue';
+import { OperatorList, TypeList } from '@/views/iot-card/data';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+    type: {
+        type: String,
+    },
+    data: {
+        type: Object,
+        default: undefined,
+    },
+});
+
+const btnLoading = ref<boolean>(false);
+const platformConfigList = ref<Record<string, any>[]>([]);
+
+const formRef = ref();
+
+const modelRef = reactive({
+    id: '',
+    iccId: '',
+    platformConfigId: undefined,
+    operatorName: undefined,
+    cardType: undefined,
+    describe: '',
+});
+
+const isValidateId = async (id: string) => {
+    const res: any = await validateId(id);
+    if (res.status === 200) {
+        if (res.result?.passed) {
+            return '';
+        } else {
+            return res.result.reason;
+        }
+    } else {
+        return '请输入输入正确的ICCID';
+    }
+};
+
+const vailIccId = async (_: Record<string, any>, value: string) => {
+    if (value) {
+        const validateId =
+            props.type === 'add' ? await isValidateId(value) : '';
+        if (validateId === '') {
+            return Promise.resolve();
+        } else {
+            return Promise.reject(new Error(`${validateId}`));
+        }
+        // } else {
+        //     return Promise.reject(new Error('请输入卡号'));
+    }
+};
+
+const rules = {
+    id: [
+        {
+            required: true,
+            message: '请输入卡号',
+        },
+        {
+            max: 64,
+            message: '最多输入64个字符',
+        },
+        {
+            validator: vailIccId,
+            trigger: 'blur',
+        },
+    ],
+    iccId: [
+        {
+            required: true,
+            message: '请输入ICCID',
+        },
+        {
+            max: 64,
+            message: '最多输入64个字符',
+        },
+    ],
+    platformConfigId: [
+        {
+            required: true,
+            message: '请选择平台对接',
+        },
+    ],
+    cardType: [
+        {
+            required: true,
+            message: '请选择类型',
+        },
+    ],
+};
+
+const filterOption = (input: string, option: any) => {
+    return (
+        option.componentOptions.children[0].text
+            .toLowerCase()
+            .indexOf(input.toLowerCase()) >= 0
+    );
+};
+
+watch(
+    () => props.data,
+    (newValue) => {
+        queryPlatformNoPage({
+            paging: false,
+            sorts: [{ name: 'createTime', order: 'desc' }],
+            terms: [{ column: 'state', value: 'enabled' }],
+        }).then((resp: any) => {
+            if (resp.status === 200) {
+                platformConfigList.value = resp.result.map((item: any) => ({
+                    label: item.name,
+                    value: item.id,
+                }));
+            }
+        });
+        Object.assign(modelRef, newValue);
+    },
+    { immediate: true, deep: true },
+);
+
+const handleCancel = () => {
+    emit('change', false);
+    formRef.value.resetFields();
+};
+
+const handleOk = () => {
+    formRef.value
+        .validate()
+        .then(async () => {
+            btnLoading.value = true;
+            const resp =
+                props.type === 'add'
+                    ? await add(toRaw(modelRef))
+                    : await edit(toRaw(modelRef));
+            btnLoading.value = false;
+            if (resp.status === 200) {
+                message.success('操作成功！');
+                emit('change', true);
+                formRef.value.resetFields();
+            }
+        })
+        .catch((err: any) => {
+            console.log('error', err);
+        });
+};
+</script>

src/views/iot-card/CardManagement/index.vue

@@ -151,11 +151,18 @@
                             <span class="flow-text">
                                 {{ slotProps.totalFlow }}
                             </span>
-                            <span class="card-item-content-text"> M 使用流量</span>
+                            <span class="card-item-content-text">
+                                M 使用流量</span
+                            >
                         </div>
                         <div v-else>
                             <div class="progress-text">
-                                <div>{{ slotProps.totalFlow - slotProps.usedFlow }} %</div>
+                                <div>
+                                    {{
+                                        slotProps.totalFlow - slotProps.usedFlow
+                                    }}
+                                    %
+                                </div>
                                 <div class="card-item-content-text">
                                     总共 {{ slotProps.totalFlow }} M
                                 </div>
@@ -163,7 +170,9 @@
                             <a-progress
                                 :strokeColor="'#ADC6FF'"
                                 :showInfo="false"
-                                :percent="slotProps.totalFlow - slotProps.usedFlow"
+                                :percent="
+                                    slotProps.totalFlow - slotProps.usedFlow
+                                "
                             />
                         </div>
                     </template>
@@ -307,6 +316,13 @@
             :cardId="cardId"
             @change="bindDevice"
         />
+        <!-- 新增、编辑 -->
+        <Save
+            v-if="visible"
+            :type="saveType"
+            :data="current"
+            @change="saveChange"
+        />
     </div>
 </template>
 
@@ -333,6 +349,7 @@ import { getImage } from '@/utils/comm';
 import BindDevice from './BindDevice.vue';
 import Import from './Import.vue';
 import Export from './Export.vue';
+import Save from './Save.vue';
 
 const cardManageRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
@@ -344,6 +361,7 @@ const exportVisible = ref<boolean>(false);
 const importVisible = ref<boolean>(false);
 const cardId = ref<any>();
 const current = ref<Partial<CardManagement>>({});
+const saveType = ref<string>('');
 
 const columns = [
     {
@@ -504,6 +522,11 @@ const getActions = (
                 title: '编辑',
             },
             icon: 'EditOutlined',
+            onClick: () => {
+                visible.value = true;
+                current.value = data;
+                saveType.value = 'edit';
+            },
         },
         {
             key: 'view',
@@ -651,10 +674,27 @@ const handleView = (id: string) => {
 /**
  * 新增
  */
-const handleAdd = () => {};
+const handleAdd = () => {
+    visible.value = true;
+    current.value = {};
+    saveType.value = 'add';
+};
+
+/**
+ * 新增、编辑关闭弹窗
+ * @param val 加载表格
+ */
+const saveChange = (val: any) => {
+    visible.value = false;
+    current.value = {};
+    if (val) {
+        cardManageRef.value?.reload();
+    }
+};
 
 /**
  * 绑定设备关闭窗口
+ * @param val
  */
 const bindDevice = (val: boolean) => {
     bindDeviceVisible.value = false;

src/views/iot-card/data.ts

@@ -0,0 +1,76 @@
+import { getImage } from '@/utils/comm';
+
+// 平台类型
+export const PlatformTypeList = [
+  {
+    label: '移动OneLink',
+    value: 'OneLinkPB',
+    imgUrl: getImage('/iot-card/onelink.png'),
+  },
+  {
+    label: '电信Ctwing',
+    value: 'CtwingCmp',
+    imgUrl: getImage('/iot-card/ctwingcmp.png'),
+  },
+  {
+    label: '联通Unicom',
+    value: 'UnicomCmp',
+    imgUrl: getImage('/iot-card/unicom.png'),
+  },
+];
+
+//运营商
+export const OperatorList = [
+  {
+    label: '移动',
+    value: '移动',
+  },
+  {
+    label: '电信',
+    value: '电信',
+  },
+  {
+    label: '联通',
+    value: '联通',
+  },
+];
+
+// 类型
+export const TypeList = [
+  {
+    label: '年卡',
+    value: 'year',
+  },
+  {
+    label: '季卡',
+    value: 'season',
+  },
+  {
+    label: '月卡',
+    value: 'month',
+  },
+  {
+    label: '其他',
+    value: 'other',
+  },
+];
+
+// 支付方式
+export const PaymentMethod = [
+  {
+    label: '支付宝手机网站支付',
+    value: 'ALIPAY_WAP',
+  },
+  {
+    label: '支付宝网页及时到账支付',
+    value: 'ALIPAY_WEB',
+  },
+  {
+    label: '微信公众号支付',
+    value: 'WEIXIN_JSAPI',
+  },
+  {
+    label: '微信扫码支付',
+    value: 'WEIXIN_NATIVE',
+  },
+];