jonhon-mes-web/src/views/productionTesting/components/trialItem.vue

<template>
    <div>
        <avue-crud :option="option" :table-loading="loading" :data="data" v-model:page="page" :before-open="beforeOpen"
            v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
            @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
            @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
            <template #menu-left>
                <el-button type="primary" @click="handleAdd">新 增</el-button>
                <!-- <el-button type="primary"    @click="handleSet">批量设置分类</el-button> -->
            </template>
            <template #menu="scope">
                <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
                <el-button type="text" @click="handleDelete">删除</el-button>
            </template>
        </avue-crud>
        <el-dialog title="项目" append-to-body v-model="showDialog" width="60%">
            <div>
                <el-button type="primary" @click="insertEvent()">插入一行</el-button>
                <el-button plain type="danger" @click="remove">删除选择行</el-button>
                <el-button type="primary" @click="handleSave">保存</el-button>
            </div>
            <div style="margin-top: 20px;">
                <el-table :data="tidList" @selection-change="selectionChangeProject" @select="selectChange">
                    <el-table-column type="selection" width="55px"></el-table-column>
                    <el-table-column label="编码" prop="oneData">
                        <template #default="scope">
                            <el-input v-model="scope.row.oneData"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="twoData">
                        <template #default="scope">
                            <el-input v-model="scope.row.twoData"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            data: [],
            form: {},
            showDialog: false,
            tidList: [],
            rowId: null,     //选中的id
            projectArr: [],
            deleteTidArr: [],    //删除的数据
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            option: {
                tip: false,
                align: 'center',
                height: 'auto',
                searchLabelWidth: 120,
                simplePage: true,
                searchShow: true,
                searchMenuSpan: 12,
                searchIcon: true,
                searchIndex: 3,
                tree: false,
                border: true,
                selection: false,
                viewBtn: false,
                editBtn: false,
                addBtn: false,
                delBtn: false,
                editBtnText: '修改',
                viewBtnText: '详情',
                labelWidth: 120,
                // menuWidth: 330,
                dialogWidth: 1200,
                dialogClickModal: false,
                searchEnter: true,
                excelBtn: false,
                filterBtn: true,
                searchShowBtn: false,
                excelBtn: true,
                index: true,
                showOverflowTooltip: true,
                searchLabelPosition: 'left',
                searchGutter: 24,
                searchSpan: 6,
                menuAlign: 'left',
                gridBtn: false,
                searchMenuPosition: 'right',
                addBtnIcon: ' ',
                viewBtnIcon: ' ',
                delBtnIcon: ' ',
                editBtnIcon: ' ',
                column: [
                    {
                        label: '编码',
                        prop: 'oneData',
                        addDisplay: false,
                        editDisplay: false,
                        span: 24,
                        search: true,
                        searchLabelWidth:50,
                        rules: [
                            {
                                required: true,
                                message: '请输入编码',
                                trigger: 'click',
                            },
                        ],
                    },
                    {
                        label: '名称',
                        prop: 'twoData',
                        addDisplay: false,
                        editDisplay: false,
                        span: 24,
                        search: true,
                        searchLabelWidth:50,
                        rules: [
                            {
                                required: true,
                                message: '请输入名称',
                                trigger: 'click',
                            },
                        ],
                    },
                ]
            }
        }
    },
    mounted() {

    },
    methods: {
        handleAdd() {
            this.showDialog = true
            this.tidList = []
        },
        insertEvent() {
            const record = { _select: false };
            this.tidList.push(record)
        },
        remove() {
            let arr = this.tidList.filter(item => item._select)
            if (arr.length != 0) {
                this.$confirm('确定将选择数据删除?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    if (this.rowId) {
                        let deleteData = this.tidList.filter(item => item._select)
                        this.deleteTidArr = deleteData.filter(item => item.tidId)
                    }
                    let deleteArr = this.tidList.filter(item => !item._select)
                    this.tidList = deleteArr
                })
            } else {
                this.$message.error('请至少选择一条数据进行操作！')
            }
        },
        selectChange(list, row) {
            row._select = !row._select
        },
        handleEdit(row) {
            this.rowId = row.amId
            this.tidList = [
                { ...row }
            ]
            this.projectArr = [{ ...row }]
            this.showDialog = true
        },
        handleSave() {
            if (this.tidList.length == 0) {
                this.$message.error('请至少填写一条数据')
            } else {
                let tmp = this.tidList.find(item => !item.oneData || !item.twoData)
                if (tmp) {
                    this.$message.error('数据请填写完整!')
                }
            }
        },
        onLoad() {
            this.loading = true
            this.data = [
                { amId: 3, oneData: '003', twoData: '泄漏率检测' },
                { amId: 4, oneData: '002', twoData: '外观检测' },
                { amId: 5, oneData: '001', twoData: '厚度检测' },
            ]
            this.loading = false
        },
    }
}
</script>

<style></style>