From 9a483a678d0f0a49477fa3658209184efe08da7c Mon Sep 17 00:00:00 2001
From: wangshuaiswim <shuai-1991@qq.com>
Date: Mon, 30 Jan 2023 18:06:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9scss=E4=B8=BAless?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E5=A4=8D=E6=9D=83=E9=99=90=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PermissionButton/index.vue     | 19 +++++++---
 .../components/Metadata/Base/Edit/index.vue   |  2 +-
 .../device/components/Metadata/Base/index.vue |  2 +-
 .../device/components/Metadata/Cat/index.vue  |  2 +-
 .../components/Metadata/Import/index.vue      | 32 +++++++++++++----
 .../device/components/Metadata/index.vue      | 35 +++++++++++--------
 6 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/src/components/PermissionButton/index.vue b/src/components/PermissionButton/index.vue
index 735fbf69..9ec5b437 100644
--- a/src/components/PermissionButton/index.vue
+++ b/src/components/PermissionButton/index.vue
@@ -4,14 +4,14 @@
       <a-popconfirm v-bind="popConfirm" :disabled="!isPermission || props.disabled">
         <a-tooltip v-if="tooltip" v-bind="tooltip">
           <slot v-if="noButton"></slot>
-          <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+          <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
             <slot></slot>
             <template #icon>
               <slot name="icon"></slot>
             </template>
           </a-button>
         </a-tooltip>
-        <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+        <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
           <slot></slot>
           <template #icon>
             <slot name="icon"></slot>
@@ -22,7 +22,7 @@
     <template v-else-if="tooltip">
       <a-tooltip v-bind="tooltip">
         <slot v-if="noButton"></slot>
-        <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+        <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
           <slot></slot>
           <template #icon>
             <slot name="icon"></slot>
@@ -32,7 +32,7 @@
     </template>
     <template v-else>
       <slot v-if="noButton"></slot>
-      <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+      <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
         <slot></slot>
         <template #icon>
           <slot name="icon"></slot>
@@ -42,7 +42,7 @@
   </template>
   <a-tooltip v-else title="没有权限">
     <slot v-if="noButton"></slot>
-    <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+    <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
       <slot></slot>
       <template #icon>
         <slot name="icon"></slot>
@@ -54,6 +54,12 @@
 import type { ButtonProps, TooltipProps, PopconfirmProps } from 'ant-design-vue'
 import { usePermissionStore } from '@/store/permission';
 
+interface PermissionButtonEmits {
+  (e: 'click', data: MouseEvent): void;
+}
+
+const emits = defineEmits<PermissionButtonEmits>()
+
 interface PermissionButtonProps extends ButtonProps {
   tooltip?: TooltipProps;
   popConfirm?: PopconfirmProps;
@@ -80,6 +86,9 @@ const _isPermission = computed(() =>
       : false
     : true
 )
+const handleClick = (e: MouseEvent) => {
+  emits('click', e)
+}
 </script>
 <style scoped lang="less">
 
diff --git a/src/views/device/components/Metadata/Base/Edit/index.vue b/src/views/device/components/Metadata/Base/Edit/index.vue
index 1f0f0de7..0df22ae5 100644
--- a/src/views/device/components/Metadata/Base/Edit/index.vue
+++ b/src/views/device/components/Metadata/Base/Edit/index.vue
@@ -114,6 +114,6 @@ const form = reactive({
   model: {}
 })
 </script>
-<style lang="scss" scoped>
+<style lang="less" scoped>
 
 </style>
\ No newline at end of file
diff --git a/src/views/device/components/Metadata/Base/index.vue b/src/views/device/components/Metadata/Base/index.vue
index 35e9dfed..dd03ca7e 100644
--- a/src/views/device/components/Metadata/Base/index.vue
+++ b/src/views/device/components/Metadata/Base/index.vue
@@ -96,5 +96,5 @@ const operateLimits = (action: 'add' | 'updata', types: MetadataType) => {
   );
 };
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 </style>
\ No newline at end of file
diff --git a/src/views/device/components/Metadata/Cat/index.vue b/src/views/device/components/Metadata/Cat/index.vue
index c9fc1952..5936eb0d 100644
--- a/src/views/device/components/Metadata/Cat/index.vue
+++ b/src/views/device/components/Metadata/Cat/index.vue
@@ -140,7 +140,7 @@ watchEffect(() => {
   }
 })
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 .cat-content {
   background: #F6F6F6;
 
diff --git a/src/views/device/components/Metadata/Import/index.vue b/src/views/device/components/Metadata/Import/index.vue
index fb6028bd..a5285c75 100644
--- a/src/views/device/components/Metadata/Import/index.vue
+++ b/src/views/device/components/Metadata/Import/index.vue
@@ -8,8 +8,8 @@
       </p>
     </div>
     <a-form layout="vertical" v-model="formModel">
-      <a-form-item label="导入方式" v-bind="validateInfos.type">
-        <a-select v-if="type === 'product'" v-model:value="formModel.type">
+      <a-form-item v-if="type === 'product'" label="导入方式" v-bind="validateInfos.type">
+        <a-select v-model:value="formModel.type">
           <a-select-option value="copy">拷贝产品</a-select-option>
           <a-select-option value="import">导入物模型</a-select-option>
         </a-select>
@@ -32,11 +32,19 @@
         </a-select>
       </a-form-item>
       <a-form-item label="文件上传" v-bind="validateInfos.upload" v-if="formModel.metadataType === 'file'">
-        <a-upload v-model:file-list="formModel.upload" name="files" :before-upload="beforeUpload" accept=".json"
-          :show-upload-list="false"></a-upload>
+        <a-input v-model:value="formModel.upload">
+          <template #addonAfter>
+            <label for="uploadFile"><upload-outlined/></label>
+          </template>
+        </a-input>
+        <a-upload v-model:file-list="fileList" name="files" :before-upload="beforeUpload" accept=".json"
+          :show-upload-list="false" :action="FILE_UPLOAD" @change="fileChange" :headers="{ 'X-Access-Token': token }">
+          <button id="uploadFile" style="display: none;"></button>
+        </a-upload>
       </a-form-item>
       <a-form-item label="物模型" v-bind="validateInfos.import" v-if="formModel.metadataType === 'script'">
         <!-- TODO代码编辑器 -->
+        <a-textarea v-model:value="formModel.import"></a-textarea>
       </a-form-item>
     </a-form>
   </a-modal>
@@ -46,13 +54,17 @@ import { useForm } from 'ant-design-vue/es/form';
 import { saveMetadata } from '@/api/device/instance'
 import { queryNoPagingPost, convertMetadata, modify } from '@/api/device/product'
 import type { DefaultOptionType } from 'ant-design-vue/es/select';
-import { UploadProps } from 'ant-design-vue/es';
+import type { UploadProps, UploadFile, UploadChangeParam } from 'ant-design-vue/es';
 import type { DeviceMetadata, ProductItem } from '@/views/device/Product/typings'
 import { message } from 'ant-design-vue/es';
 import { Store } from 'jetlinks-store';
 import { SystemConst } from '@/utils/consts';
 import { useInstanceStore } from '@/store/instance'
 import { useProductStore } from '@/store/product';
+import { UploadOutlined } from '@ant-design/icons-vue';
+import { FILE_UPLOAD } from '@/api/comm';
+import { LocalStore } from '@/utils/comm';
+import { TOKEN_KEY } from '@/utils/variable';
 
 const route = useRoute()
 const instanceStore = useInstanceStore()
@@ -79,6 +91,7 @@ const _visible = computed({
 })
 
 const close = () => {
+  console.log(1)
   emits('update:visible', false);
 }
 
@@ -132,6 +145,8 @@ const onSubmit = () => {
 
   })
 }
+const fileList = ref<UploadFile[]>([])
+const token = ref(LocalStore.get(TOKEN_KEY));
 
 const productList = ref<DefaultOptionType[]>([])
 
@@ -157,6 +172,11 @@ const beforeUpload: UploadProps['beforeUpload'] = file => {
     formModel.import = json.target?.result;
   };
 }
+const fileChange = (info: UploadChangeParam) => {
+  if (info.file.status === 'done') {
+    console.log(info)
+  }
+}
 
 const operateLimits = (mdata: DeviceMetadata) => {
   const obj: DeviceMetadata = { ...mdata };
@@ -257,7 +277,7 @@ const handleImport = async () => {
 
 // const showProduct = computed(() => formModel.type === 'copy')
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 .import-content {
   background: rgb(236, 237, 238);
 
diff --git a/src/views/device/components/Metadata/index.vue b/src/views/device/components/Metadata/index.vue
index 772ea590..3493c164 100644
--- a/src/views/device/components/Metadata/index.vue
+++ b/src/views/device/components/Metadata/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='device-detail-metadata' style="position: relative;">
-    <div class="tips" style="width: 40%">
+    <div class="tips">
       <a-tooltip :title="instanceStore.detail?.independentMetadata && type === 'device'
       ? '该设备已脱离产品物模型，修改产品物模型对该设备无影响'
       : '设备会默认继承产品的物模型，修改设备物模型后将脱离产品物模型'">
@@ -14,16 +14,20 @@
         </div>
       </a-tooltip>
     </div>
-    <a-tabs class="metadataNav" destroyInactiveTabPane>
+    <a-tabs class="metadataNav" destroyInactiveTabPane type="card">
       <template #rightExtra>
         <a-space>
-          <PermissionButton v-if="type === 'device'" :hasPermission="`${permission}:update`"
-            :popConfirm="{ title: '确认重置？', onConfirm: resetMetadata, }" :tooltip="{ title: '重置后将使用产品的物模型配置' }"
-            key="reload">
+          <PermissionButton v-if="type === 'device' && instanceStore.detail?.independentMetadata"
+            :hasPermission="`${permission}:update`" :popConfirm="{ title: '确认重置？', onConfirm: resetMetadata, }"
+            :tooltip="{ title: '重置后将使用产品的物模型配置' }" key="reload">
             重置操作
           </PermissionButton>
-          <PermissionButton :isPermission="`${permission}:update`" @click="visible = true">快速导入</PermissionButton>
-          <PermissionButton :isPermission="`${permission}:update`" @click="cat = true">物模型TSL</PermissionButton>
+          <PermissionButton
+            :uhasPermission="`${permission}:update`"
+            @click="visible = true">快速导入</PermissionButton>
+          <PermissionButton 
+            :uhasPermission="`${permission}:update`" 
+            @click="cat = true">物模型TSL</PermissionButton>
         </a-space>
       </template>
 
@@ -40,11 +44,13 @@
         <BaseMetadata target={props.type} type="tags" :permission="permission" />
       </a-tab-pane>
     </a-tabs>
-    <Import :visible="visible" :type="type" @close="visible = false" />
-    <Cat :visible="cat" @close="cat = false" :type="type" />
+    {{ visible }}
+    <Import v-model:visible="visible" :type="type" @close="visible = false" />
+    <Cat v-model:visible="cat" @close="cat = false" :type="type" />
   </div>
 </template>
 <script setup lang="ts" name="Metadata">
+import { InfoCircleOutlined } from '@ant-design/icons-vue';
 import PermissionButton from '@/components/PermissionButton/index.vue'
 import { deleteMetadata } from '@/api/device/instance.js'
 import { message } from 'ant-design-vue'
@@ -80,21 +86,20 @@ const resetMetadata = async () => {
   }
 }
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 .device-detail-metadata {
   .tips {
+    width: calc(100% - 670px);
     position: absolute;
     top: 12px;
     z-index: 1;
-    margin-left: 330px;
+    margin-left: 380px;
     font-weight: 100;
   }
 
   .metadataNav {
-    :global {
-      .ant-card-body {
-        padding: 0;
-      }
+    :deep(.ant-card-body) {
+      padding: 0;
     }
   }
 }