fix issue

web_src/js/components/dataset/referenceDataset.vue

@@ -13,7 +13,7 @@
               >
             </div>
             <button
-              style="margin-right: 3rem"
+              style="margin-right: 2rem"
               class="ui green button"
               @click="openDataset()"
             >
@@ -145,7 +145,12 @@
                         >{{ item.DownloadTimes }}</span
                       >
                     </span>
-                    <button class="ui mini button">取消关联</button>
+                    <button
+                      class="ui mini button"
+                      @click.stop="cancelReferData(item.ID)"
+                    >
+                      取消关联
+                    </button>
                   </div>
                 </div>
               </div>
@@ -219,20 +224,80 @@
           <el-tabs v-model="activeName">
             <el-tab-pane label="公开数据集" name="first">
               <el-row>
-                <el-checkbox-group v-model="checkList">
-                  <el-checkbox
-                    class="checkbox-list"
-                    label="复选框 A"
-                  ></el-checkbox>
-                  <el-checkbox label="复选框 B"></el-checkbox>
-                  <el-checkbox label="复选框 C"></el-checkbox>
-                  <el-checkbox label="禁用" disabled></el-checkbox>
-                  <el-checkbox label="选中且禁用" disabled></el-checkbox>
+                <el-checkbox-group
+                  v-model="checkList"
+                  style="font-size: 14px; line-height: 1"
+                >
+                  <div
+                    v-for="(item, index) in publicDatasetList"
+                    :key="index"
+                    class="select-data-wrap"
+                  >
+                    <div class="dataset-header-vue">
+                      <el-checkbox
+                        :label="item.ID"
+                        @change="(checked) => changeCheckbox(checked, item)"
+                        class="select-data-title"
+                        ><span class="ref-data-title">
+                          {{ item.Title }}
+                        </span></el-checkbox
+                      >
+                      <a class="select-data-title select-data-href" href=""
+                        >asdasdasdasd</a
+                      >
+                    </div>
+                    <div style="padding-top: 1rem">asdasdsa233333</div>
+                  </div>
                 </el-checkbox-group>
               </el-row>
             </el-tab-pane>
           </el-tabs>
         </el-col>
+        <el-col
+          :span="7"
+          style="
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            right: 0;
+            position: absolute;
+            padding: 0 1.5rem;
+          "
+        >
+          <div
+            style="
+              font-size: 14px;
+              height: 40px;
+              text-align: left;
+              color: #0066ff;
+              line-height: 40px;
+            "
+          >
+            已选数据文件
+          </div>
+          <div style="flex: 1; margin-top: 1.5rem">
+            <el-checkbox-group v-model="checkList">
+              <el-checkbox
+                v-for="(item, index) in selectDatasetArray"
+                :key="index"
+                :label="item.ID"
+                :title="item.Name"
+              ></el-checkbox>
+            </el-checkbox-group>
+          </div>
+          <div style="text-align: end">
+            <el-button
+              @click.native="confirmDataset"
+              size="small"
+              style="
+                background: #389e0d;
+                color: #fff;
+                border: 1px solid #389e0d;
+              "
+              >确定</el-button
+            >
+          </div>
+        </el-col>
       </el-row>
     </el-dialog>
   </div>
@@ -255,6 +320,7 @@ export default {
       publicDatasetList: [],
       showFlag: true,
       search: "",
+      selectDatasetArray: [],
     };
   },
   methods: {
@@ -263,6 +329,32 @@ export default {
       this.dialogVisible = true;
     },
     searchName() {},
+    cancelReferData(id) {
+      let url = `${this.repoLink}/datasets/reference_datasets/${id}`;
+      this.$axios.delete(url).then((res) => {
+        console.log(res);
+        if (res.data.Code === 0) {
+          console.log("delete success");
+          let index = this.datasetList.find((item) => {
+            return item.ID === id;
+          });
+          this.datasetList.splice(index, 1);
+        }
+      });
+    },
+    confirmDataset() {},
+    changeCheckbox(checked, item) {
+      console.log(checked, item, this.checkList);
+      if (checked) {
+        this.selectDatasetArray.push({ ID: item.ID, Title: item.Title });
+      } else {
+        let index = this.selectDatasetArray.findIndex((element) => {
+          return element.ID === item.ID;
+        });
+        this.selectDatasetArray.splice(index, 1);
+      }
+      console.log(this.selectDatasetArray);
+    },
     getDatasetList() {
       let url = `${this.repoLink}/datasets/reference_datasets_data`;
       this.$axios.get(url).then((res) => {
@@ -317,9 +409,6 @@ export default {
   height: 30px;
   top: 60px;
 }
-.checkbox-list {
-  display: flex;
-}
 .refer-dataset-card {
   cursor: pointer;
   box-shadow: 0px 4px 4px 0px rgba(232, 232, 232, 0.6);
@@ -365,4 +454,26 @@ export default {
   font-size: 14px;
   margin-top: 10px;
 }
+.select-data-wrap {
+  padding: 1rem 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+.select-data-title {
+  flex: 1;
+  overflow: hidden;
+}
+.select-data-title .ref-data-title {
+  font-size: 18px;
+  color: #454545;
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.select-data-href {
+  text-align: right;
+  text-overflow: ellipsis;
+  max-width: 35%;
+  word-break: initial;
+  margin-left: 1rem;
+}
 </style>