From ecd941c84ca43a0822a5da59b1d8f8019fab5170 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Thu, 2 Feb 2023 18:07:14 +0800
Subject: [PATCH 1/2] =?UTF-8?q?update:=20=E7=BB=84=E4=BB=B6RadioCard?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9Elayout=E3=80=81checkStyle=E3=80=81disabled?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RadioCard/index.vue | 119 +++++++++++++++++++++++++++--
 1 file changed, 113 insertions(+), 6 deletions(-)

diff --git a/src/components/RadioCard/index.vue b/src/components/RadioCard/index.vue
index 152ae840..403a0fcf 100644
--- a/src/components/RadioCard/index.vue
+++ b/src/components/RadioCard/index.vue
@@ -1,21 +1,45 @@
 <!-- 单选卡片 -->
 <template>
-    <div class="m-radio">
+    <div
+        :class="[
+            layout === 'horizontal' ? 'm-radio-checked' : 'm-radio',
+            disabled ? 'disabled' : '',
+        ]"
+    >
         <div
-            class="m-radio-item"
-            :class="{ active: myValue === item.value }"
+            :class="[
+                layout === 'horizontal'
+                    ? 'm-radio-checked-item'
+                    : 'm-radio-item',
+                { active: myValue === item.value },
+                checkStyle && myValue === item.value ? 'checked' : '',
+                disabled && myValue === item.value
+                    ? 'active-checked-disabled'
+                    : '',
+            ]"
             v-for="(item, index) in options"
             :key="index"
             @click="myValue = item.value"
         >
             <img class="img" :src="item.logo" alt="" />
             <span>{{ item.label }}</span>
+            <div
+                :class="[
+                    'checked-icon',
+                    disabled && myValue === item.value
+                        ? 'checked-icon-disabled'
+                        : '',
+                ]"
+            >
+                <div><CheckOutlined /></div>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue';
+import { CheckOutlined } from '@ant-design/icons-vue';
 
 interface IOption {
     label: string;
@@ -25,7 +49,7 @@ interface IOption {
 
 type Emits = {
     (e: 'update:modelValue', data: string): void;
-    (e: 'change') :void
+    (e: 'change'): void;
 };
 const emit = defineEmits<Emits>();
 
@@ -38,21 +62,104 @@ const props = defineProps({
         type: String,
         default: '',
     },
+    layout: {
+        type: String,
+        default: 'vertical', //'horizontal'|'vertical' 水平|垂直
+    },
+    checkStyle: {
+        type: Boolean,
+        default: false, //是否有小勾样式
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const myValue = computed({
     get: () => props.modelValue,
     set: (val) => {
-        emit('update:modelValue', val)
-        emit('change')
+        if (!props.disabled) {
+            emit('update:modelValue', val);
+            emit('change');
+        }
     },
 });
 </script>
 
 <style lang="less" scoped>
+.m-radio-checked {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    &-item {
+        width: 49%;
+        height: 70px;
+        padding: 10px 15px;
+        margin-bottom: 12px;
+        border: 1px solid #d9d9d9;
+        border-radius: 2px;
+        display: flex;
+        align-items: center;
+        gap: 24px;
+        cursor: pointer;
+        .img {
+            width: 32px;
+            height: 32px;
+        }
+        &.active {
+            color: #1d39c4;
+            border-color: #1d39c4;
+        }
+    }
+}
+.checked-icon {
+    position: absolute;
+    right: -1px;
+    bottom: -1px;
+    z-index: 2;
+    display: none;
+    width: 18px;
+    height: 18px;
+    color: #fff;
+    border: #2f54eb 18px solid;
+    border-left-color: transparent;
+    border-top-color: transparent;
+
+    > div {
+        font-size: 12px;
+    }
+}
+.checked {
+    position: relative;
+    color: #2f54eb;
+    border-color: #2f54eb;
+
+    .checked-icon {
+        display: block;
+    }
+}
+
+.disabled {
+    color: rgba(0, 0, 0, 0.25) !important;
+    cursor: not-allowed;
+}
+.active-checked-disabled {
+    color: rgba(0, 0, 0, 0.25) !important;
+    border: 1px #d9d9d9 solid !important;
+}
+.checked-icon-disabled {
+    color: rgba(0, 0, 0, 0.25) !important;
+    border-color: #e6e6e6 !important;
+    border-left-color: transparent !important;
+    border-top-color: transparent !important;
+}
+
 .m-radio {
     display: flex;
     &-item {
+        width: 140px;
+        height: 140px;
         padding: 10px 15px;
         margin-right: 15px;
         border: 1px solid #d9d9d9;

From c54894a20f9ae17132107a4f9cf0b7ac9f0f9f06 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Thu, 2 Feb 2023 18:08:26 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E5=8D=8F=E8=AE=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/link/protocol.ts                    |  11 +-
 src/views/link/Protocol/Save/FileUpload.vue |  91 +++++++++++
 src/views/link/Protocol/Save/index.vue      | 162 +++++++++++++++++++-
 src/views/link/Protocol/index.vue           |  31 ++--
 src/views/link/Protocol/typings.d.ts        |   7 -
 5 files changed, 268 insertions(+), 34 deletions(-)
 create mode 100644 src/views/link/Protocol/Save/FileUpload.vue
 delete mode 100644 src/views/link/Protocol/typings.d.ts

diff --git a/src/api/link/protocol.ts b/src/api/link/protocol.ts
index e1a88586..b77a782a 100644
--- a/src/api/link/protocol.ts
+++ b/src/api/link/protocol.ts
@@ -1,10 +1,17 @@
 import server from '@/utils/request';
+import { BASE_API_PATH } from '@/utils/variable';
+
+export const PROTOCOL_UPLOAD = `${BASE_API_PATH}/file/upload`;
 
 export const detail = (id: string) => server.get(`/gateway/device/${id}`);
 
 export const save = (data: Object) => server.post(`/gateway/device`, data);
 
-export const list = (data: Object) =>
-    server.post(`/protocol/_query`, data);
+export const update = (data: Object) => server.patch(`/gateway/device`, data);
+
+export const list = (data: Object) => server.post(`/protocol/_query`, data);
 
 export const remove = (id: string) => server.remove(`/gateway/device/${id}`);
+
+export const querySystemApi = (data: Object) =>
+    server.post(`/system/config/scopes`, data);
diff --git a/src/views/link/Protocol/Save/FileUpload.vue b/src/views/link/Protocol/Save/FileUpload.vue
new file mode 100644
index 00000000..88324f76
--- /dev/null
+++ b/src/views/link/Protocol/Save/FileUpload.vue
@@ -0,0 +1,91 @@
+<template>
+    <a-spin :spinning="loading">
+        <a-input
+            placeholder="请上传文件"
+            v-model:value="value"
+            style="width: calc(100% - 100px)"
+            :disabled="true"
+        />
+        <a-upload
+            name="file"
+            accept=".jar, .zip"
+            :multiple="true"
+            :action="PROTOCOL_UPLOAD"
+            :headers="{
+                [TOKEN_KEY]: LocalStore.get(TOKEN_KEY),
+            }"
+            @change="handleChange"
+            :showUploadList="false"
+            class="upload-box"
+            :before-upload="beforeUpload"
+        >
+            <a-button type="primary">上传jar包</a-button>
+        </a-upload>
+    </a-spin>
+</template>
+
+<script setup lang="ts" name="FileUpload">
+import { LocalStore } from '@/utils/comm';
+import { TOKEN_KEY } from '@/utils/variable';
+import { PROTOCOL_UPLOAD, querySystemApi } from '@/api/link/protocol';
+import { message } from 'ant-design-vue';
+import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
+import { notification as Notification } from 'ant-design-vue';
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: () => '',
+    },
+});
+
+const value = ref(props.modelValue);
+const loading = ref(false);
+
+const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+    const arr = file.name.split('.');
+    const isFile = ['jar', 'zip'].includes(arr[arr.length - 1]); // file.type === 'application/zip' || file.type === 'application/java-archive'
+    if (!isFile) {
+        message.error('请上传.zip.jar格式的文件');
+        loading.value = false;
+    }
+    return isFile;
+};
+const handleChange = async (info: UploadChangeParam) => {
+    loading.value = true;
+    if (info.file.status === 'done') {
+        loading.value = false;
+        const result = info.file.response?.result;
+        const api = await querySystemApi(['paths']);
+        const path = api.result[0]?.properties
+            ? api.result[0]?.properties['base-path']
+            : '';
+        const f = `${path}/file/${result.id}?accessKey=${result.others.accessKey}`;
+        message.success('上传成功！');
+        value.value = f;
+        emit('update:modelValue', f);
+        emit('change', f);
+    } else {
+        if (info.file.error) {
+            Notification.error({
+                // key: '403',
+                message: '系统提示',
+                description: '系统未知错误，请反馈给管理员',
+            });
+            loading.value = false;
+        } else if (info.file.response) {
+            loading.value = false;
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.upload-box {
+    :deep(.ant-btn) {
+        width: 100px;
+    }
+}
+</style>
diff --git a/src/views/link/Protocol/Save/index.vue b/src/views/link/Protocol/Save/index.vue
index 9a60a0be..d4ad2ccb 100644
--- a/src/views/link/Protocol/Save/index.vue
+++ b/src/views/link/Protocol/Save/index.vue
@@ -4,16 +4,69 @@
         ok-text="确认"
         cancel-text="取消"
         :visible="true"
-        width="600px"
+        width="700px"
         :confirm-loading="loading"
         @cancel="handleCancel"
         @ok="handleOk"
     >
-        123
+        <a-form
+            class="form"
+            layout="vertical"
+            :model="formData"
+            name="basic"
+            autocomplete="off"
+        >
+            <a-form-item label="名称" v-bind="validateInfos.name">
+                <a-input
+                    placeholder="请输入名称"
+                    v-model:value="formData.name"
+                />
+            </a-form-item>
+            <a-form-item label="类型" v-bind="validateInfos.type">
+                <RadioCard
+                    :disabled="!!id"
+                    layout="horizontal"
+                    :checkStyle="true"
+                    :options="options"
+                    v-model="formData.type"
+                />
+            </a-form-item>
+            <a-form-item
+                label="文件地址"
+                v-bind="validateInfos['configuration.location']"
+            >
+                <a-input
+                    v-if="formData.type === 'local'"
+                    placeholder="请输入文件地址"
+                    v-model:value="formData.configuration.location"
+                />
+                <FileUpload
+                    v-else
+                    v-model:modelValue="formData.configuration.location"
+                />
+            </a-form-item>
+            <a-form-item label="说明" v-bind="validateInfos.description">
+                <a-textarea
+                    placeholder="请输入说明"
+                    v-model:value="formData.description"
+                    :maxlength="200"
+                    :rows="3"
+                    showCount
+                />
+            </a-form-item>
+        </a-form>
     </a-modal>
 </template>
 <script lang="ts" setup>
+import { message, Form } from 'ant-design-vue';
+import { getImage } from '@/utils/comm';
+import type { UploadChangeParam } from 'ant-design-vue';
+import FileUpload from './FileUpload.vue';
+import { save, update } from '@/api/link/protocol';
+
 const loading = ref(false);
+const fileLoading = ref(false);
+const useForm = Form.useForm;
 
 const props = defineProps({
     data: {
@@ -24,14 +77,111 @@ const props = defineProps({
 
 const emit = defineEmits(['change']);
 
+const id = props.data.id;
+const options = [
+    {
+        label: 'Jar',
+        value: 'jar',
+        logo: getImage('/jar.png'),
+    },
+    {
+        label: 'Local',
+        value: 'local',
+        logo: getImage('/local.png'),
+    },
+];
+
+const formData = ref({
+    type: 'jar',
+    name: '',
+    configuration: {
+        location: '',
+    },
+    description: '',
+});
+
+const { resetFields, validate, validateInfos } = useForm(
+    formData,
+    reactive({
+        type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
+        name: [
+            { required: true, message: '请输入名称', trigger: 'blur' },
+            { max: 64, message: '最多可输入64个字符' },
+        ],
+        'configuration.location': [
+            { required: true, message: '请输入文件地址', trigger: 'blur' },
+        ],
+        description: [{ max: 200, message: '最多可输入200个字符' }],
+    }),
+);
+const onSubmit = () => {
+    validate()
+        .then(async (res) => {
+            const params = toRaw(formData.value);
+
+            loading.value = true;
+            const response = !id
+                ? await save(params)
+                : await update({ ...props.data, ...params });
+            if (response.status === 200) {
+                message.success('操作成功');
+                emit('change', true);
+            }
+            loading.value = false;
+        })
+        .catch((err) => {
+            loading.value = false;
+        });
+};
+
+const handleChange = (info: UploadChangeParam) => {
+    fileLoading.value = true;
+    if (info.file.status === 'done') {
+        message.success('上传成功！');
+        const result = info.file.response?.result;
+        formData.value.configuration.location = result;
+        fileLoading.value = false;
+    }
+};
+
 const handleOk = () => {
-    console.log(2);
-    emit('change', true);
+    onSubmit();
 };
 const handleCancel = () => {
-    console.log(1);
     emit('change', false);
 };
+
+watch(
+    () => formData.value.type,
+    () => {
+        formData.value.configuration.location = '';
+    },
+);
+watch(
+    () => props.data,
+    (value) => {
+        if (value.id) formData.value = value;
+    },
+    { immediate: true, deep: true },
+);
 </script>
 
-<style lang=""></style>
+<style lang="less" scoped>
+.form {
+    .form-radio-button {
+        width: 148px;
+        height: 80px;
+        padding: 0;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .form-upload-button {
+        margin-top: 10px;
+    }
+    .form-submit {
+        background-color: @primary-color !important;
+    }
+}
+</style>
diff --git a/src/views/link/Protocol/index.vue b/src/views/link/Protocol/index.vue
index 8798fe9c..5b9b351b 100644
--- a/src/views/link/Protocol/index.vue
+++ b/src/views/link/Protocol/index.vue
@@ -26,7 +26,7 @@
                     >
                         <template #img>
                             <slot name="img">
-                                <img :src="getImage('/device-access.png')" />
+                                <img :src="getImage('/protocol.png')" />
                             </slot>
                         </template>
                         <template #content>
@@ -232,7 +232,7 @@ const getActions = (
             },
             icon: 'EditOutlined',
             onClick: () => {
-                handlEdit(data.id);
+                handlEdit(data);
             },
         },
         {
@@ -241,15 +241,13 @@ const getActions = (
             popConfirm: {
                 title: '确认删除?',
                 onConfirm: async () => {
-                    console.log(11, data.id);
-
-                    // const res = await remove(data.id);
-                    // if (res.success) {
-                    //     message.success('操作成功');
-                    //     tableRef.value.reload();
-                    // } else {
-                    //     message.error('操作失败！');
-                    // }
+                    const res = await remove(data.id);
+                    if (res.success) {
+                        message.success('操作成功');
+                        tableRef.value.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
                 },
             },
             icon: 'DeleteOutlined',
@@ -259,16 +257,11 @@ const getActions = (
 };
 
 const handlAdd = () => {
-    console.log(11);
+    current.value = {};
     visible.value = true;
 };
-const handlEdit = (id: string) => {
-    // router.push(`/link/accessConfig/detail/edit/${id}`);
-    // router.push({
-    //     path: `/iot/link/accessConfig/detail/${id}`,
-    //     query: { view: false },
-    // });
-    console.log(id);
+const handlEdit = (data: object) => {
+    current.value = data;
     visible.value = true;
 };
 
diff --git a/src/views/link/Protocol/typings.d.ts b/src/views/link/Protocol/typings.d.ts
deleted file mode 100644
index 91ac930a..00000000
--- a/src/views/link/Protocol/typings.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { BaseItem } from '@/utils/typings';
-
-type ProtocolItem = {
-  state: number;
-  type: string;
-  configuration: Record<string, any>;
-} & BaseItem;