From ba4400a0fc463ae8d664b51d53a7c31af9c89aa7 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Thu, 20 Jun 2024 13:31:51 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sgzb-ui/src/components/FormModel/index.vue  | 115 ++++++++++
 sgzb-ui/src/components/TableModel/index.vue | 236 ++++++++++++++++++++
 2 files changed, 351 insertions(+)
 create mode 100644 sgzb-ui/src/components/FormModel/index.vue
 create mode 100644 sgzb-ui/src/components/TableModel/index.vue

diff --git a/sgzb-ui/src/components/FormModel/index.vue b/sgzb-ui/src/components/FormModel/index.vue
new file mode 100644
index 00000000..06c8cc7e
--- /dev/null
+++ b/sgzb-ui/src/components/FormModel/index.vue
@@ -0,0 +1,115 @@
+<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"
+                    clearable
+                    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 []
+                },
+            },
+        },
+        data() {
+            return {
+                queryParams: {},
+            }
+        },
+        created() {
+            /* 生产查询参数 */
+            this.formLabel.map((e) => {
+                this.$set(this.queryParams, e.f_model, '')
+            })
+        },
+        methods: {
+            /* 查询按钮 */
+            handleQuery() {
+                this.$emit('queryList', this.queryParams)
+            },
+            /* 重置按钮 */
+            resetQuery() {
+                this.$refs.queryForm.resetFields()
+                this.$emit('queryList', this.queryParams, 'reset')
+            },
+        },
+    }
+</script>
+
+<style></style>
diff --git a/sgzb-ui/src/components/TableModel/index.vue b/sgzb-ui/src/components/TableModel/index.vue
new file mode 100644
index 00000000..11700e98
--- /dev/null
+++ b/sgzb-ui/src/components/TableModel/index.vue
@@ -0,0 +1,236 @@
+<template>
+    <div>
+        <!-- 查询表单 -->
+        <FormModel
+            :formLabel="config.formLabel"
+            :routerParams="config.routerParams"
+            @queryList="queryList"
+            v-if="config.isFormShow"
+        >
+        </FormModel>
+        <!-- 存放导出等相关按钮的插槽 -->
+        <template>
+            <!-- 作用域插槽 传递 pageParams 给父组件 -->
+            <slot name="export" :pageParams="pageParams"></slot>
+        </template>
+        <!-- 列表 -->
+        <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-if="config.pageShow"
+            :total="total"
+            :page.sync="pageParams.pageNum"
+            :limit.sync="pageParams.pageSize"
+            @pagination="queryList"
+        />
+    </div>
+</template>
+
+<script>
+import FormModel from '../FormModel'
+export default {
+    components: {
+        FormModel,
+    },
+    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>
+.check-all {
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+.handel-text {
+    cursor: pointer;
+}
+.handel-text:hover {
+    text-decoration: underline;
+    color: #409eff;
+}
+</style>