From e6936235e24e1b7cfd575a0ea94e2fdefd5fead3 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Wed, 19 Jun 2024 15:30:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TableCom/components/form.vue   | 131 +++++++++++
 .../components/TableCom/components/table.vue  | 217 +++++++++++++++++-
 .../components/TableCom/components/tools.vue  |  15 ++
 .../components/TableCom/components/toools.vue |   0
 sgzb-ui/src/components/TableCom/index.vue     |  21 ++
 sgzb-ui/src/views/demo.vue                    |  11 +-
 6 files changed, 390 insertions(+), 5 deletions(-)
 create mode 100644 sgzb-ui/src/components/TableCom/components/tools.vue
 delete mode 100644 sgzb-ui/src/components/TableCom/components/toools.vue

diff --git a/sgzb-ui/src/components/TableCom/components/form.vue b/sgzb-ui/src/components/TableCom/components/form.vue
index e69de29b..b5f26156 100644
--- a/sgzb-ui/src/components/TableCom/components/form.vue
+++ b/sgzb-ui/src/components/TableCom/components/form.vue
@@ -0,0 +1,131 @@
+<template>
+    <!-- 表单查询 -->
+    <div>
+        <el-form
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            label-width="100px"
+        >
+            <el-form-item
+                v-for="(item, v) in formLabel"
+                :key="v"
+                :label="item.f_label"
+                :prop="item.f_model"
+            >
+                <el-input
+                    v-if="item.f_type === 'ipt'"
+                    v-model="queryParams[item.f_model]"
+                    :placeholder="`请输入${item.f_label}`"
+                    clearable
+                    style="width: 240px"
+                />
+                <el-select
+                    v-if="item.f_type === 'sel'"
+                    v-model="queryParams[item.f_model]"
+                    clearable
+                    filterable
+                    style="width: 240px"
+                    :placeholder="`请选择${item.f_label}`"
+                >
+                    <el-option
+                        v-for="(sel, v) in item.f_selList"
+                        :key="v"
+                        :label="sel.label"
+                        :value="sel.value"
+                    />
+                </el-select>
+                <el-cascader
+                    v-if="item.f_type === 'selCas'"
+                    v-model="queryParams[item.f_model]"
+                    :options="item.f_selList"
+                    :props="item.optionProps"
+                    :show-all-levels="false"
+                    @change="casCadeChange"
+                    clearable
+                    filterable
+                    style="width: 240px"
+                />
+                <el-date-picker
+                    v-if="item.f_type === 'date'"
+                    v-model="queryParams[item.f_model]"
+                    style="width: 240px"
+                    value-format="yyyy-MM-dd"
+                    type="daterange"
+                    range-separator="-"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                />
+            </el-form-item>
+            <el-form-item>
+                <el-button
+                    type="primary"
+                    icon="el-icon-search"
+                    size="mini"
+                    @click="handleQuery"
+                    >查询</el-button
+                >
+                <el-button
+                    type="warning"
+                    icon="el-icon-refresh"
+                    size="mini"
+                    @click="resetQuery"
+                    >重置</el-button
+                >
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        /* 查询条件 */
+        formLabel: {
+            type: Array,
+            default: () => {
+                return []
+            },
+        },
+        routerParams: {
+            type: String,
+            default: () => {
+                return null
+            },
+        },
+    },
+    data() {
+        return {
+            queryParams: {},
+        }
+    },
+    created() {
+        /* 生成查询参数 */
+        this.formLabel.map((e) => {
+            this.$set(this.queryParams, e.f_model, '')
+        })
+    },
+    mounted() {
+        this.queryParams.keyword = this.routerParams
+        if (this.queryParams.keyword) {
+            this.$emit('queryList', this.queryParams)
+        }
+    },
+    methods: {
+        /* 查询按钮 */
+        handleQuery() {
+            this.$emit('queryList', this.queryParams)
+        },
+        /* 重置按钮 */
+        resetQuery() {
+            this.$refs.queryForm.resetFields()
+            this.$emit('queryList', this.queryParams, 'reset')
+        },
+        /* 级联选择框的change事件 */
+        casCadeChange(val) {
+            this.queryParams.type = val[val.length - 1]
+        },
+    },
+}
+</script>
diff --git a/sgzb-ui/src/components/TableCom/components/table.vue b/sgzb-ui/src/components/TableCom/components/table.vue
index 5a925a23..8256106f 100644
--- a/sgzb-ui/src/components/TableCom/components/table.vue
+++ b/sgzb-ui/src/components/TableCom/components/table.vue
@@ -1,8 +1,219 @@
-<template> </template>
+<template>
+    <div>
+        <el-table
+            :data="tableList"
+            border
+            ref="tableRef"
+            select-on-indeterminate
+            @selection-change="handleSelectionChange"
+            v-loading="loading"
+            element-loading-text="数据正在加载，请稍后"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.6)"
+        >
+            <el-table-column
+                type="selection"
+                width="45"
+                align="center"
+                :selectable="selectable"
+                v-if="config.isSelShow"
+            />
+            <el-table-column
+                align="center"
+                label="序号"
+                type="index"
+                :index="
+                    indexContinuation(pageParams.pageNum, pageParams.pageSize)
+                "
+            />
+            <el-table-column
+                v-for="(item, v) in tableColumCheckProps"
+                :key="v"
+                :label="item.t_label"
+                :prop="item.t_props"
+                :width="item.t_width"
+                align="center"
+                show-overflow-tooltip
+            >
+                <template slot-scope="scope">
+                    <!-- 判断当前列数据是否需要使用插槽的数据 -->
+                    <template v-if="item.t_slot">
+                        <slot :data="scope.row" :name="item.t_slot"></slot>
+                    </template>
+                    <template v-else>
+                        {{ scope.row[item.t_props] || '-' }}
+                    </template>
+                    <!-- <template v-else>
+                        {{
+                            v === 0
+                                ? indexContinuation(
+                                      pageParams.pageNum,
+                                      pageParams.pageSize,
+                                  )
+                                : scope.row[item.t_props] || '-'
+                        }}
+                    </template> -->
+                </template>
+            </el-table-column>
+            <el-table-column
+                align="center"
+                label="操作"
+                v-if="config.handleColShow"
+                :width="config.handleWidth"
+            >
+                <template slot-scope="{ row }">
+                    <slot :data="row" name="handle"></slot>
+                </template>
+
+                <!-- 增加筛选列显示隐藏操作 -->
+                <template slot="header">
+                    <el-popover
+                        placement="bottom"
+                        title="筛选列"
+                        width="200"
+                        trigger="click"
+                    >
+                        <span slot="reference" class="handel-text">操作</span>
+                        <div>
+                            <el-checkbox
+                                v-for="(check, index) in columCheckList"
+                                v-show="check.t_label != '序号'"
+                                :key="index"
+                                v-model="check.checked"
+                                >{{ check.t_label }}</el-checkbox
+                            >
+                        </div>
+                    </el-popover>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination
+            v-show="config.pageShow"
+            :total="total"
+            :page.sync="pageParams.pageNum"
+            :limit.sync="pageParams.pageSize"
+            @pagination="queryList"
+        />
+    </div>
+</template>
 
 <script>
-export default {}
+// import FormModel from '../FormModel'
+export default {
+    props: {
+        /* 列表请求接口 */
+        sendApi: {
+            type: Function,
+            default: () => {
+                return function () {}
+            },
+        },
+        /* 查看详情需显示列表等操作 传入的参数 */
+        sendParams: {
+            type: Object,
+            default: () => {
+                return {}
+            },
+        },
+        /* 表格复选框禁用状态 */
+        selectable: {
+            type: Function,
+            default: () => {
+                return true
+            },
+        },
+
+        /* 列表 查询表单等配置项 */
+        config: {
+            type: Object,
+            default: () => {
+                return {}
+            },
+        },
+    },
+    data() {
+        return {
+            total: 0,
+            tableList: [{ demo: 123 }],
+            /* 分页参数 */
+            pageParams: {
+                pageNum: 1,
+                pageSize: 10,
+            },
+            /* 操作列显示隐藏数据源 */
+            columCheckList: [],
+            loading: false,
+        }
+    },
+
+    created() {
+        this.getList()
+        this.columCheckList = this.config.columnsList
+        this.columCheckList = this.columCheckList.map((e) => {
+            this.$set(e, 'checked', true)
+            return e
+        })
+    },
+    computed: {
+        /* 根据操作栏控制表头是否显示 */
+        tableColumCheckProps() {
+            return this.columCheckList.filter((e) => {
+                return e.checked != false
+            })
+        },
+    },
+    methods: {
+        /* form 查询组件触发的自定义事件 */
+        async queryList(val, reset) {
+            if (reset) {
+                this.pageParams.pageNum = 1
+                this.pageParams.pageSize = 10
+            }
+            this.pageParams = Object.assign(
+                val,
+                this.pageParams,
+                this.sendParams,
+            )
+            this.pageParams.beginTime = val.time ? val.time[0] : ''
+            this.pageParams.endTime = val.time ? val.time[1] : ''
+            this.getList()
+        },
+        /* 获取列表信息 */
+        async getList() {
+            this.pageParams = Object.assign(this.pageParams, this.sendParams)
+            this.loading = true
+            const res = await this.sendApi(this.pageParams)
+            this.loading = false
+
+            if (res.code == 200) {
+                this.tableList = res.rows || res.data.rows
+                this.total = res.total || res.data.total
+            }
+        },
+
+        /* 表格复选框事件 */
+        handleSelectionChange(row) {
+            this.$emit('getTableSelectionChange', row)
+        },
+        /* 清除表格的选中状态 */
+        clearSelType() {
+            this.$refs.tableRef.clearSelection()
+        },
+    },
+}
 </script>
 
 <style>
-</style>
\ No newline at end of file
+.check-all {
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+.handel-text {
+    cursor: pointer;
+}
+.handel-text:hover {
+    text-decoration: underline;
+    color: #409eff;
+}
+</style>
diff --git a/sgzb-ui/src/components/TableCom/components/tools.vue b/sgzb-ui/src/components/TableCom/components/tools.vue
new file mode 100644
index 00000000..a59af2f9
--- /dev/null
+++ b/sgzb-ui/src/components/TableCom/components/tools.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <el-row> 123456789 </el-row>
+    </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+.el-row {
+    min-height: 38px;
+}
+</style>
\ No newline at end of file
diff --git a/sgzb-ui/src/components/TableCom/components/toools.vue b/sgzb-ui/src/components/TableCom/components/toools.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/sgzb-ui/src/components/TableCom/index.vue b/sgzb-ui/src/components/TableCom/index.vue
index e69de29b..eb805a16 100644
--- a/sgzb-ui/src/components/TableCom/index.vue
+++ b/sgzb-ui/src/components/TableCom/index.vue
@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <Form />
+        <Tools />
+        <Table />
+    </div>
+</template>
+
+<script>
+import Form from './components/form.vue'
+import Tools from './components/tools.vue'
+import Table from './components/table.vue'
+export default {
+    components: {
+        Form,
+        Table,
+        Tools,
+    },
+}
+</script>
+
diff --git a/sgzb-ui/src/views/demo.vue b/sgzb-ui/src/views/demo.vue
index 918a3722..8e8bfb20 100644
--- a/sgzb-ui/src/views/demo.vue
+++ b/sgzb-ui/src/views/demo.vue
@@ -1,9 +1,16 @@
 <template>
-    <div class="app-container"> 999888777 </div>
+    <div class="app-container">
+        <TableCom />
+    </div>
 </template>
 
 <script>
-export default {}
+import TableCom from '@/components/TableCom/index'
+export default {
+    components: {
+        TableCom,
+    },
+}
 </script>
 
 <style>