assign device

src/components/TableSelect/index.vue

@@ -1,10 +1,45 @@
 <template>
-  <el-dialog :model-value="modelValue" @close="cancel" @open="handleOpen">
+  <el-dialog
+    :model-value="modelValue"
+    append-to-body
+    @close="cancel"
+    @open="handleOpen"
+  >
     <el-row>
-      <el-table ref="tableRef" :data="dataList" @select="handleSelect">
-        <el-table-column align="center" type="selection" width="55" />
-        <el-table-column prop="deviceId" />
-        <el-table-column label="设备名称" prop="deviceName" />
+      <el-table
+        ref="tableRef"
+        v-loading="loading"
+        :data="dataList"
+        @select="handleSelect"
+        @select-all="handleSelectAll"
+      >
+        <el-table-column
+          v-if="!readonly"
+          align="center"
+          type="selection"
+          width="55"
+        />
+        <el-table-column
+          v-for="item in tableStruct"
+          :key="item.label || item.prop"
+          :label="item.label"
+          :prop="item.prop"
+          align="center"
+        >
+          <template v-if="item.operate" #default="{ row }">
+            <el-button
+              v-for="button in item.operate"
+              :key="button.label"
+              :icon="button.icon"
+              :type="button.type"
+              link
+              size="small"
+              @click="button.onClick(row)"
+            >
+              {{ button.label }}
+            </el-button>
+          </template>
+        </el-table-column>
       </el-table>
       <pagination
         v-show="total > 0"
@@ -14,15 +49,19 @@
         @pagination="getList"
       />
     </el-row>
-    <el-row>
-      <el-col>
-        <el-button type="primary" @click="confirmSelect">确认</el-button>
-      </el-col>
-    </el-row>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button v-if="!readonly" type="primary" @click="confirmSelect"
+          >确认</el-button
+        >
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </template>
   </el-dialog>
 </template>
 
-<script setup>
+<script name="TableSelect" setup>
 import { nextTick, reactive, ref, toRefs, watchEffect } from "vue";
 import { cloneDeep } from "lodash-es";
 import Pagination from "@/components/Pagination/index.vue";
@@ -30,14 +69,15 @@ import Pagination from "@/components/Pagination/index.vue";
 const props = defineProps({
   list: {
     type: Array,
-    default: [
-      {
-        deviceId: 40,
-      },
-      {
-        deviceId: 38,
-      },
-    ],
+    default: [],
+  },
+  tableStruct: {
+    type: Array,
+    default: [],
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
   },
   requestMethod: {
     type: Function,
@@ -52,7 +92,7 @@ const props = defineProps({
 });
 const { list } = toRefs(props);
 
-const emit = defineEmits(["select-add", "select-remove", "update:modelValue"]);
+const emit = defineEmits(["update:modelValue", "confirm-select"]);
 
 const loading = ref(false);
 const dataList = ref([]);
@@ -69,8 +109,17 @@ const data = reactive({
 
 const { queryParams } = toRefs(data);
 const tableRef = ref();
+
+watchEffect(() => {
+  ids.value = selectedProperties.value.map((el) => el[props.selectKey]);
+});
+
 const handleOpen = () => {
-  selectedProperties.value = cloneDeep(list.value);
+  console.log("open");
+  if (list.value) {
+    selectedProperties.value = cloneDeep(list.value);
+  }
+  getList();
 };
 
 function getList() {
@@ -83,15 +132,13 @@ function getList() {
   });
 }
 
-watchEffect(() => {
-  ids.value = selectedProperties.value.map((el) => el[props.selectKey]);
-});
-
 const cancel = () => {
+  console.log("cancel");
   selectedProperties.value = [];
   emit("update:modelValue", false);
 };
 
+/*监听单选事件*/
 const handleSelect = (selection, row) => {
   const isCheck =
     selection.findIndex((el) => el[props.selectKey] === row[props.selectKey]) >
@@ -99,7 +146,7 @@ const handleSelect = (selection, row) => {
   if (isCheck) {
     /*添加选中*/
     const isIdNotExist =
-      list.value.findIndex(
+      selectedProperties.value.findIndex(
         (el) => el[props.selectKey] === row[props.selectKey]
       ) === -1;
     if (isIdNotExist) {
@@ -113,6 +160,31 @@ const handleSelect = (selection, row) => {
   }
 };
 
+/*监听全选事件*/
+const handleSelectAll = (selection) => {
+  if (selection.length > 0) {
+    /*全选*/
+    for (const selectionElement of selection) {
+      /*添加选中*/
+      const isIdNotExist =
+        selectedProperties.value.findIndex(
+          (el) => el[props.selectKey] === selectionElement[props.selectKey]
+        ) === -1;
+      if (isIdNotExist) {
+        selectedProperties.value.push(selectionElement);
+      }
+    }
+  } else {
+    /*全不选*/
+    for (const dataElement of dataList.value) {
+      /*移除选中*/
+      selectedProperties.value = selectedProperties.value.filter(
+        (el) => el[props.selectKey] !== dataElement[props.selectKey]
+      );
+    }
+  }
+};
+
 /*选择模式下, 将选过的设为选中状态*/
 const setRowSelected = () => {
   nextTick(() => {
@@ -129,10 +201,20 @@ const setRowSelected = () => {
 };
 
 const confirmSelect = () => {
-  console.log(selectedProperties.value);
+  emit("confirm-select", selectedProperties.value);
 };
 
-getList();
+defineExpose({
+  getList,
+});
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+:deep(.el-table__header) {
+  .el-table-column--selection {
+    .el-checkbox {
+      //visibility: hidden;
+    }
+  }
+}
+</style>