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

<template>
    <basic-container>
        <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"  icon="el-icon-plus"  @click="handleAdd">新 增</el-button>
                    <!-- <el-button type="primary"    @click="handleSet">批量设置分类</el-button> -->
                </template>
                <template #menu="scope">
                    <el-button type="text"  icon="el-icon-edit"  @click="handleEdit(scope.row)">修改</el-button>
                    <el-button type="text"  icon="el-icon-delete"  @click="handleDelete">删除</el-button>
                </template>
            </avue-crud>
            <el-dialog title="项目" append-to-body v-model="showDialog" width="60%">
                <div>
                    <el-button type="primary"  icon="el-icon-plus" @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>
    </basic-container>
</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',
                size: 'medium',
                searchLabelWidth:120,
                simplePage: true,
                searchShow: true,
                searchMenuSpan: 6,
                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',
searchLabelPosition:'left',
 searchGutter:24,
  searchSpan:6,
menuAlign: 'left',
gridBtn:false,
searchMenuPosition:'right',
                column: [
                    {
                        label: '编码',
                        prop: 'oneData',
                        addDisplay: false,
                        editDisplay: false,
                        span: 24,
                        search:true,
                        rules: [
                            {
                                required: true,
                                message: '请输入编码',
                                trigger: 'click',
                            },
                        ],
                    },
                    {
                        label: '名称',
                        prop: 'twoData',
                        addDisplay: false,
                        editDisplay: false,
                        span: 24,
                        search:true,
                        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>