From e34445d6556671e17f7e6f71dd6e07f422fc1c16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8C=BF=E5=B0=8F=E5=A4=A9?= <1638245306@qq.com>
Date: Fri, 17 Feb 2023 00:51:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=8A=9F=E8=83=BD:=20tableSelector?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/tableSelector/index.vue  | 117 ++++++++++++++++++++
 web/src/views/system/messageCenter/api.ts   |  11 +-
 web/src/views/system/messageCenter/crud.tsx |  41 +++----
 3 files changed, 145 insertions(+), 24 deletions(-)
 create mode 100644 web/src/components/tableSelector/index.vue

diff --git a/web/src/components/tableSelector/index.vue b/web/src/components/tableSelector/index.vue
new file mode 100644
index 0000000..0fbaa13
--- /dev/null
+++ b/web/src/components/tableSelector/index.vue
@@ -0,0 +1,117 @@
+<template>
+  <el-select popper-class="popperClass" class="tableSelector" :multiple="props.tableConfig.isMultiple" @remove-tag="removeTag" v-model="data" placeholder="Select">
+    <template #empty>
+      <div class="option">
+        <el-input style="margin-bottom: 10px" v-model="search">
+          <template #append>
+            搜索
+          </template>
+        </el-input>
+        <el-table
+            :data="props.tableConfig.data"
+            size="mini"
+            border
+            style="width: 400px"
+            max-height="200"
+            :highlight-current-row="!props.tableConfig.isMultiple"
+            @selection-change="handleSelectionChange"
+            @current-change="handleCurrentChange"
+        >
+          <el-table-column v-if="props.tableConfig.isMultiple" fixed type="selection" width="55"/>
+          <el-table-column fixed type="index" label="#" width="50" />
+          <el-table-column prop="date" label="Date" width="180"/>
+          <el-table-column prop="name" label="Name" width="180"/>
+          <el-table-column prop="address" label="Address" width="300"/>
+          <el-table-column prop="address" label="Address" width="300"/>
+          <el-table-column prop="address" label="Address" width="300"/>
+          <el-table-column prop="address" label="Address" width="300"/>
+        </el-table>
+        <el-pagination style="margin-top: 10px" background layout="prev, pager, next" :total="1000"/>
+      </div>
+    </template>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import {defineProps, onMounted, ref, watch} from 'vue'
+
+const props = defineProps({
+  modelValue: {},
+  label: null,
+  value:null,
+  tableConfig: {
+    data: [],//默认数据
+    isMultiple: false, //是否多选
+  }
+} as any)
+const emit = defineEmits(['update:modelValue'])
+// template上使用data
+const data = ref()
+const multipleSelection = ref()
+watch(multipleSelection, // 监听multipleSelection的变化，
+    (value) => {
+      const {tableConfig,label} = props
+      if(!tableConfig.isMultiple){
+       data.value = value?value[label]:null
+      }else{
+
+        const result = value?value.map((item:any)=>{
+          return item[props.label]
+        }):null
+        data.value = result
+      }
+    }, // 当multipleSelection值触发后，同步修改data.value的值
+    {immediate: true} // 立即触发一次，给data赋值初始值
+)
+
+const removeTag = (val:any,aa:any)=>{
+  console.log(val,aa)
+}
+
+/**
+ * 表格多选
+ * @param val:Array
+ */
+const handleSelectionChange = (val:any) => {
+  multipleSelection.value = val
+  const {value} = props
+  const result = val.map((item:any)=>{
+    return item[value]
+  })
+  emit('update:modelValue', result)
+}
+
+/**
+ * 表格单选
+ * @param val:Object
+ */
+const handleCurrentChange = (val:any) => {
+  multipleSelection.value = val
+  const {value} = props
+  emit('update:modelValue', val[value])
+}
+
+</script>
+
+<style scoped>
+.option {
+  height: auto;
+  line-height: 1;
+  padding: 5px;
+  background-color: #fff;
+}
+
+</style>
+<style lang="scss">
+.popperClass {
+  height: 320px;
+}
+.el-select-dropdown__wrap {
+  max-height: 310px !important;
+}
+.tableSelector{
+.el-icon,.el-tag__close{
+  display: none;
+}
+}
+</style>
diff --git a/web/src/views/system/messageCenter/api.ts b/web/src/views/system/messageCenter/api.ts
index b2a2c5d..258527a 100644
--- a/web/src/views/system/messageCenter/api.ts
+++ b/web/src/views/system/messageCenter/api.ts
@@ -17,11 +17,12 @@ export function GetObj(id: InfoReq) {
 }
 
 export function AddObj(obj: AddReq) {
-    return request({
-        url: apiPrefix,
-        method: 'post',
-        data: obj,
-    });
+    console.log(20,obj)
+    // return request({
+    //     url: apiPrefix,
+    //     method: 'post',
+    //     data: obj,
+    // });
 }
 
 export function UpdateObj(obj: EditReq) {
diff --git a/web/src/views/system/messageCenter/crud.tsx b/web/src/views/system/messageCenter/crud.tsx
index 365a59c..395ebfd 100644
--- a/web/src/views/system/messageCenter/crud.tsx
+++ b/web/src/views/system/messageCenter/crud.tsx
@@ -2,7 +2,8 @@ import * as api from "./api";
 import {dict, compute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions,} from "@fast-crud/fast-crud";
 import {request} from "/@/utils/service";
 import {dictionary} from "/@/utils/dictionary";
-
+import tableSelector from "/@/components/tableSelector/index.vue"
+import {shallowRef} from "vue";
 interface CreateCrudOptionsTypes {
     crudOptions: CrudOptions;
 }
@@ -30,22 +31,7 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                 delRequest
             },
             columns: {
-                _index: {
-                    title: '序号',
-                    form: {show: false},
-                    column: {
-                        //type: 'index',
-                        align: 'center',
-                        width: '70px',
-                        columnSetDisabled: true, //禁止在列设置中选择
-                        formatter: (context) => {
-                            //计算序号,你可以自定义计算规则，此处为翻页累加
-                            let index = context.index ?? 1;
-                            let pagination = crudExpose.crudBinding.value.pagination;
-                            return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
-                        },
-                    },
-                },
+
                 id: {
                     title: 'id',
                     form: {
@@ -117,7 +103,6 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                         disabled: true
                     },
                     width: 130,
-                    type: 'table-selector',
                     disabled: true,
                     dict: dict({
                         cache: false,
@@ -126,6 +111,24 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                         label: 'name', // 数据字典中label字段的属性名
                     }),
                     form: {
+                        component:{
+                            name: shallowRef(tableSelector),
+                            vModel: "modelValue",
+                            label:'name',
+                            value:'date',
+                            tableConfig:{
+                                isMultiple:true,
+                                data:[{
+                                    date: '2016-05-03',
+                                    name: 'Tom',
+                                    address: 'No. 189, Grove St, Los Angeles',
+                                },{
+                                    date: '2016-05-01',
+                                    name: 'Tom',
+                                    address: 'No. 189, Grove St, Los Angeles',
+                                },]
+                            }
+                        },
                         show:compute(({ form })=>{
                             return form.target_type === 0
                         }),
@@ -232,7 +235,7 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                             config: {},
                             uploader: {
                                 type: "form",
-                                buildUrl(res) {
+                                buildUrl(res:any) {
                                     return res.url;
                                 }
                             }