test-web/src/crud/index.vue

<template>
    <div style="opacity: 1; background-color: #fff; padding: 20px">
        <!-- 搜索框组件 -->
        <search-operation v-show="SSearch" :searchCondition="searchCondition" @RefreshLeft="RefreshLeft">
            <!-- 具名插槽 -->
            <slot name="search" :searchCondition="searchCondition" />
        </search-operation>

        <!-- CRUD组件 -->
        <crud-operation v-if="false" style="margin-top: 10px" @add="add" @edit="edit" @remove="remove"
            @refresh="refresh" @search="search" :DEdit="EStart" :DDelete="DStart" :SSearch="SSearch">
        </crud-operation>

        <!-- 表单组件 -->
        <el-table ref="multipleTableRef" :data="testData" @selection-change="handleSelectionChange"
            style="width: 100%; margin: 20px 0 20px 0" :border="tableFrom.border">
            <!-- 表头拓展 -->
            <el-table-column v-for="(item, index) in tableFrom.extend" :key="index" :type="item.type"
                :width="item.width" :label="item.label" />
            <!-- 字段内容 -->
            <el-table-column v-for="(item, index) in tableFrom.field" :key="index" :prop="item.prop" :label="item.label"
                :width="item.width" :show-overflow-tooltip="!item.overflow" />

            <el-table-column :fixed="tableFrom.operateFixed ? 'right' : 'false'" :label="tableFrom.operateTitle"
                :width="tableFrom.operateWidth ? tableFrom.operateWidth : ''">
                <!-- 默认插槽值 -->
                <template #default="scope">
                    <ud-operation :scope="scope" :data="testData" :isEdit="tableFrom.operate.edit"
                        :isDelete="tableFrom.operate.delete" @handleEdit="handleEdit" @handleDelete="handleDelete">
                    </ud-operation>
                    <!-- 具名插槽(自定义操作按钮) -->
                    <slot name="operation" :scope="scope" :tableFrom="dialogFormVisible" />
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination v-if="false" :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000" />
        <!-- 对话框 -->
        <el-dialog v-model="dialogFormVisible" :title="tableFrom.titleDialog ? tableFrom.titleDialog : `${title}`">
            <!-- 是否自定义Dialog -->
            <div v-if="tableFrom.customDialog">
                <slot name="dialog" :form="form" />
            </div>
            <div v-else>
                <!-- 系统内容 -->
                <el-form ref="ruleFormRef" :rules="rules" :model="form">
                    <el-form-item v-for="(item, index) in tableFrom.field" :key="index" :label="item.label"
                        :prop="item.prop" :label-width="formLabelWidth">
                        <!-- 输入框 -->
                        <div style="width: 100%" v-if="item.form.type === 'input'">
                            <el-input :disabled="item.form.disabled" v-model="form[item.prop]" :type="item.itemType"
                                :placeholder="item.form.placeholder" />
                        </div>
                        <!-- 选择框 -->
                        <div style="width: 100%" v-else-if="item.form.type === 'select'">
                            <el-select style="width: 100%" v-model="form[item.prop]" :disabled="item.form.disabled"
                                :placeholder="item.form.placeholder">
                                <el-option v-for="(itemData, index) in item.form.listData" :key="index"
                                    :label="itemData.label" :value="itemData.value" />
                            </el-select>
                        </div>
                        <!-- 日期框 -->
                        <div style="width: 100%" v-else-if="item.form.type === 'date'">
                            <el-date-picker style="width: 100%" v-model="form[item.prop]" :disabled="item.form.disabled"
                                :value-format="item.form.valueFormat" :type="item.form.itemType"
                                :placeholder="item.form.placeholder" />
                        </div>
                    </el-form-item>
                </el-form>
            </div>

            <template #footer>
                <span v-if="!tableFrom.footerDialog">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="affirm(ruleFormRef)">提交</el-button>
                </span>
                <slot name="footer" />
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import crudOperation from '@/crud/components/CRUD.operation.vue'
import searchOperation from '@/crud/components/Search.operation.vue'
import udOperation from '@/crud/components/UD.operation.vue'
import { reactive, ref, toRaw } from 'vue'

// 声明事件
const emit = defineEmits([
    'add',
    'remove',
    'refresh',
    'edit',
    'search',
    'submit',
    'handleEdit',
    'handleDelete',
])
// 声明props
const props = defineProps({
    homeData: {
        //表单配置
        type: Object,
        default: function () {
            return {}
        },
    },
    tableData: {
        //表单数据
        type: Array,
        default: function () {
            return [
                {
                    one: '范晓东',
                    two: '贵ZEY123',
                    three: '蓝色',
                    four: '52011328220201499572',
                    five: '正常',
                    six: '储值卡',
                    seven: '52011328220201499572',
                    eight: '正常',
                    data: '2020-12-24',
                },
                {
                    one: '李丽霞',
                    two: '贵ANS989',
                    three: '蓝色',
                    four: '52011328220201499572',
                    five: '正常',
                    six: '储值卡',
                    seven: '52011328220200034040',
                    eight: '正常',
                    data: '2021-08-24',
                },
                {
                    one: '沈波',
                    two: '贵ABB123',
                    three: '蓝色',
                    four: '52011328220201499572',
                    five: '正常',
                    six: '储值卡',
                    seven: '52011328220201499572',
                    eight: '正常',
                    data: '2022-01-22',
                },
            ]
        },
    },
})

const tableFrom = props.homeData ? props.homeData.table : [] //表单字段
const multipleTableRef = ref() //表单ref(清空全选)
const testData = ref(props.tableData) //表单数据
const visible = ref(false) //删除提示框是否显示
const dialogFormVisible = ref(false) //表单弹框是否显示
const formLabelWidth = '100px' //默认表单宽度
const title = ref('添加') //表单标题
const DStart = ref(true) //删除按钮状态
const EStart = ref(true) //编辑按钮状态
const SSearch = ref(true) //是否打开搜索框
let index = -1
let indexs = []
//表单校验
const ruleFormRef = ref()
let initRules: any = {}
let initForm: any = {}
//初始化数据
if (tableFrom) {
    tableFrom.field.forEach((element: any) => {
        initForm[element.prop] = ''
        if (element.form.required) {
            initRules[element.prop] = [
                {
                    required: true,
                    message: element.label + '不能为空',
                    trigger: 'blur',
                },
            ]
        }
    })
}
const rules = reactive(initRules)

//搜索条件
let searchCondition = reactive(props.homeData ? props.homeData.search : [])

//表单字段
const form: any = ref(initForm)
form.value.four = '52011328220201499572' //赋值一条测试数据

//重置
const RefreshLeft = () => {
    Object.keys(searchCondition).forEach((key) => (searchCondition[key] = ''))
}

//添加
const add = () => {
    console.log('点击了添加按钮')
    form.value = {}
    title.value = '添加'
    dialogFormVisible.value = true
    emit('add')
}

//删除
const remove = () => {
    console.log('点击了删除按钮')
    emit('remove')
}

//刷新
const refresh = () => {
    console.log('点击了刷新按钮')
    emit('refresh')
}

//编辑
const edit = () => {
    console.log('点击了修改按钮')
    if (index != -1) {
        title.value = '编辑'
        form.value = JSON.parse(JSON.stringify(testData.value[index]))
        dialogFormVisible.value = true
        emit('edit')
    }
}

//搜索
const search = () => {
    console.log('点击了搜索按钮')
    SSearch.value = !SSearch.value
    emit('search')
}

//头部多选处理
const handleSelectionChange = (val: any) => {
    if (val) {
        index = -1
        DStart.value = true
        EStart.value = true
        if (val.length === 1) {
            testData.value.forEach((element, idx) => {
                if (element === val[0]) {
                    index = idx
                }
            })
            EStart.value = false
            DStart.value = false
        } else if (val.length > 0) {
            DStart.value = false
        }
    }
}

//表单提交
const affirm = (formEl: any) => {
    if (!formEl) {
        return
    }
    formEl.validate((valid: any, fields: any) => {
        if (valid) {
            //是否通过表单验证
            if (index !== -1) {
                testData.value.splice(index, 1, form.value)
            } else {
                testData.value.push(form.value)
            }
            emit('search', form.value)
            index = -1 //重置标识
            dialogFormVisible.value = false
            multipleTableRef.value.clearSelection() //清空多选
        } else {
            return false
        }
    })
}

//取消
const cancel = () => {
    dialogFormVisible.value = false
}

//编辑
const handleEdit = (idx: any, row: any) => {
    console.log('点击了编辑按钮')
    title.value = '编辑'
    form.value = JSON.parse(JSON.stringify(toRaw(row)))
    dialogFormVisible.value = true
    index = idx
    emit('handleEdit', idx, row)
}

//删除
const handleDelete = (idx: any, row: any) => {
    console.log('点击了删除按钮')
    testData.value.splice(idx, 1)
    row.visible = false
    emit('handleDelete', idx, row)
}

//将需要暴露出去的数据与方法都可以暴露出去
defineExpose({
    dialogFormVisible,
    title,
})
</script>
<style lang="scss">
</style>