From dbe58704d89da236c60cfbf68ed8ca32e5985488 Mon Sep 17 00:00:00 2001
From: leiqiaochu <leiqiaochu@aossci.com>
Date: Mon, 10 Jul 2023 20:09:03 +0800
Subject: [PATCH] fix: bug#10080

---
 .../components/AddDeviceOrProductDialog.vue   | 200 +++++++-----------
 1 file changed, 73 insertions(+), 127 deletions(-)

diff --git a/src/views/system/Department/components/AddDeviceOrProductDialog.vue b/src/views/system/Department/components/AddDeviceOrProductDialog.vue
index b1ef341b..711993e7 100644
--- a/src/views/system/Department/components/AddDeviceOrProductDialog.vue
+++ b/src/views/system/Department/components/AddDeviceOrProductDialog.vue
@@ -1,14 +1,6 @@
 <template>
-    <j-modal
-        class="add-device-or-product-dialog-container"
-        title="绑定"
-        width="1440px"
-        :maskClosable="false"
-        @ok="confirm"
-        :confirmLoading="loading"
-        @cancel="cancel"
-        visible
-    >
+    <j-modal class="add-device-or-product-dialog-container" title="绑定" width="1440px" :maskClosable="false" @ok="confirm"
+        :confirmLoading="loading" @cancel="cancel" visible>
         <h5 class="row">
             <AIcon type="ExclamationCircleOutlined" style="margin-right: 6px" />
             只能分配有“共享”权限的资产数据
@@ -16,74 +8,40 @@
 
         <div class="row">
             <span style="margin-right: 8px">批量配置</span>
-            <j-switch
-                v-model:checked="bulkBool"
-                checked-children="开"
-                un-checked-children="关"
-                style="width: 56px"
-            />
+            <j-switch v-model:checked="bulkBool" checked-children="开" un-checked-children="关" style="width: 56px" />
         </div>
         <div v-show="bulkBool">
             <j-checkbox-group v-model:value="bulkList" :options="options" />
         </div>
 
-        <pro-search
-            type="simple"
-            :columns="searchColumns"
-            target="category-bind-modal"
-            @search="search"
-        />
-        <j-pro-table
-            ref="tableRef"
-            :request="table.requestFun"
-            :gridColumn="2"
-            :params="queryParams"
-            :rowSelection="{
-                selectedRowKeys: table._selectedRowKeys.value,
-                onChange: selectChange,
-            }"
-            @cancelSelect="table.cancelSelect"
-            :columns="columns"
-        >
+        <pro-search type="simple" :columns="searchColumns" target="category-bind-modal" @search="search" />
+        <j-pro-table ref="tableRef" :request="table.requestFun" :gridColumn="2" :params="queryParams" :rowSelection="{
+            selectedRowKeys: table._selectedRowKeys.value,
+            onSelect: selectChange
+        }" @cancelSelect="table.cancelSelect" :columns="columns">
             <template #card="slotProps">
-                <CardBox
-                    :value="slotProps"
-                    :actions="[{ key: 1 }]"
-                    v-bind="slotProps"
-                    :active="
-                        table._selectedRowKeys.value.includes(slotProps.id)
-                    "
-                    @click="table.onSelectChange"
-                    :status="slotProps.state?.value"
-                    :statusText="slotProps.state?.text"
-                    :statusNames="{
+                <CardBox :value="slotProps" :actions="[{ key: 1 }]" v-bind="slotProps" :active="table._selectedRowKeys.value.includes(slotProps.id)
+                    " @click="table.onSelectChange" :status="slotProps.state?.value"
+                    :statusText="slotProps.state?.text" :statusNames="{
                         online: 'processing',
                         offline: 'error',
                         notActive: 'warning',
-                    }"
-                >
+                    }">
                     <template #img>
                         <slot name="img">
-                            <img
-                                :src="getImage('/device-product.png')"
-                                style="cursor: pointer"
-                            />
+                            <img :src="getImage('/device-product.png')" style="cursor: pointer" />
                         </slot>
                     </template>
                     <template #content>
                         <h3 class="card-item-content-title" style='margin-bottom: 18px;'>
-                          <Ellipsis style="width: calc(100% - 100px);"
-                          >
-                            {{ slotProps.name }}
-                          </Ellipsis>
+                            <Ellipsis style="width: calc(100% - 100px);">
+                                {{ slotProps.name }}
+                            </Ellipsis>
                         </h3>
                         <j-row>
                             <j-col :span="12">
                                 <div class="card-item-content-text">ID</div>
-                                <div
-                                    style="cursor: pointer"
-                                    class="card-item-content-value"
-                                >
+                                <div style="cursor: pointer" class="card-item-content-value">
                                     {{ slotProps.id }}
                                 </div>
                             </j-col>
@@ -91,17 +49,10 @@
                                 <div class="card-item-content-text">
                                     资产权限
                                 </div>
-                                <div
-                                    style="cursor: pointer"
-                                    class="card-item-content-value"
-                                    @click="(e) => e.stopPropagation()"
-                                >
-                                    <j-checkbox-group
-                                        v-model:value="
-                                            slotProps.selectPermissions
-                                        "
-                                        :options="slotProps.permissionList"
-                                    />
+                                <div style="cursor: pointer" class="card-item-content-value"
+                                    @click="(e) => e.stopPropagation()">
+                                    <j-checkbox-group v-model:value="slotProps.selectPermissions
+                                        " :options="slotProps.permissionList" />
                                 </div>
                             </j-col>
                         </j-row>
@@ -110,27 +61,16 @@
             </template>
 
             <template #permission="slotProps">
-                <div
-                    style="cursor: pointer"
-                    class="card-item-content-value"
-                    @click="(e) => e.stopPropagation()"
-                >
-                    <j-checkbox-group
-                        v-model:value="slotProps.selectPermissions"
-                        :options="slotProps.permissionList"
-                    />
+                <div style="cursor: pointer" class="card-item-content-value" @click="(e) => e.stopPropagation()">
+                    <j-checkbox-group v-model:value="slotProps.selectPermissions" :options="slotProps.permissionList" />
                 </div>
             </template>
             <template #state="slotProps">
-                <BadgeStatus
-                    :status="slotProps.state.value"
-                    :text="slotProps.state.text"
-                    :statusNames="{
-                        online: 'processing',
-                        offline: 'error',
-                        notActive: 'warning',
-                    }"
-                ></BadgeStatus>
+                <BadgeStatus :status="slotProps.state.value" :text="slotProps.state.text" :statusNames="{
+                    online: 'processing',
+                    offline: 'error',
+                    notActive: 'warning',
+                }"></BadgeStatus>
             </template>
             <template #registryTime="slotProps">
                 <span>{{
@@ -216,23 +156,23 @@ const columns = props.queryColumns.filter(
 );
 
 const searchColumns = computed(() => {
-  return props.queryColumns.map(item => {
-    if (departmentStore.productId) {
-      if (item.dataIndex === 'productName') {
-        item.search.first = true
-        item.search.componentProps = {
-          mode: 'multiple',
-          "max-tag-count": "responsive"
-        }
-        item.search.defaultTermType = 'eq'
-        item.search.defaultOnceValue = departmentStore.productId
+    return props.queryColumns.map(item => {
+        if (departmentStore.productId) {
+            if (item.dataIndex === 'productName') {
+                item.search.first = true
+                item.search.componentProps = {
+                    mode: 'multiple',
+                    "max-tag-count": "responsive"
+                }
+                item.search.defaultTermType = 'eq'
+                item.search.defaultOnceValue = departmentStore.productId
 
-      } else if (item.search && 'first' in item.search) {
-        delete item.search.first
-      }
-    }
-    return item
-  })
+            } else if (item.search && 'first' in item.search) {
+                delete item.search.first
+            }
+        }
+        return item
+    })
 })
 
 const queryParams = ref({});
@@ -371,14 +311,14 @@ const table: any = {
                                         item.state === 1
                                             ? 'online'
                                             : item.state === 0
-                                            ? 'offline'
-                                            : '',
+                                                ? 'offline'
+                                                : '',
                                     text:
                                         item.state === 1
                                             ? '正常'
                                             : item.state === 0
-                                            ? '禁用'
-                                            : '',
+                                                ? '禁用'
+                                                : '',
                                 };
                             }
                         });
@@ -403,18 +343,18 @@ const table: any = {
         queryCount.value += 1;
         if (props.parentId) {
             let terms = [{
-              column: 'id',
-              termType: 'dim-assets$not',
-              value: {
-                assetType: props.assetType,
-                targets: [
-                  {
-                    type: 'org',
-                    id: props.parentId,
-                  },
-                ],
-              },
-              type: 'and'
+                column: 'id',
+                termType: 'dim-assets$not',
+                value: {
+                    assetType: props.assetType,
+                    targets: [
+                        {
+                            type: 'org',
+                            id: props.parentId,
+                        },
+                    ],
+                },
+                type: 'and'
             }]
 
             // if (
@@ -427,7 +367,7 @@ const table: any = {
             //     terms[0].terms.pop();
             // }
             if (oParams.terms && oParams.terms.length > 0) {
-              terms = [ ...oParams.terms, ...terms]
+                terms = [...oParams.terms, ...terms]
             }
 
             const params = {
@@ -469,18 +409,22 @@ table.init();
 //     table._selectedRowKeys.value = okRows.map((item) => item.id);
 // };
 // fix: bug#10749
-const selectChange = (keys: string[], rows: any[]) => {
-    table.selectedRows = rows;
-    table._selectedRowKeys.value = keys;
+const selectChange = (record: any,selected: boolean,selectedRows: any,) => {
+    if(selected){
+        table._selectedRowKeys.value.push(record?.id) 
+    }else{
+        
+    }
+    console.log(record,selected,selectedRows);
 };
 
 const cancel = () => {
-  departmentStore.setProductId()
-  emits('update:visible', false)
+    departmentStore.setProductId()
+    emits('update:visible', false)
 }
 
 const search = (query: any) => {
-  queryParams.value = query
+    queryParams.value = query
 }
 </script>
 
@@ -490,11 +434,13 @@ const search = (query: any) => {
         height: calc(100vh - 400px);
         overflow-y: auto;
     }
+
     h5 {
         padding: 12px;
         background-color: #f6f6f6;
         font-size: 14px;
     }
+
     .row {
         margin-bottom: 12px;
     }