search_tools_web/src/views/data-create/epc-template/index.vue

<template>
    <!-- 公司业绩管理 -->
    <div class="app-container">
        <el-form :model="queryParam" ref="login" label-width="0px" class="ms-content">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item>
                        <el-input v-model="queryParam.projectName" placeholder="请输入标书名称" clearable> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-input v-model="queryParam.projectName" placeholder="请输入职称" clearable> </el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item>
                        <el-button type="primary">查询</el-button>
                        <el-button>重置</el-button>
                        <el-button type="primary" @click="onHandleAddOrEdit(null, 1)">新增</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-table :data="tableList" stripe style="width: 100%">
            <el-table-column label="序号" width="55" type="index" />
            <el-table-column
                :key="index"
                align="center"
                :prop="item.prop"
                :label="item.label"
                show-overflow-tooltip
                v-for="(item, index) in tableColumn"
            />

            <el-table-column label="操作" width="220" align="center">
                <template #default="{ row }">
                    <el-button
                        style="color: #67c23a"
                        icon="el-icon-view"
                        type="text"
                        size="mini"
                        @click="onHandleAddOrEdit(row, 2)"
                    >
                        详情
                    </el-button>
                    <el-button
                        style="color: #d140ff"
                        icon="el-icon-download"
                        type="text"
                        size="mini"
                        @click="onHandleDownload(row)"
                    >
                        下载
                    </el-button>
                    <el-button
                        style="color: #409eff"
                        icon="el-icon-edit"
                        type="text"
                        size="mini"
                        @click="onHandleAddOrEdit(row, 3)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        style="color: #f56c6c"
                        icon="el-icon-delete"
                        type="text"
                        size="mini"
                        @click="onHandleDelete(row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
            <template slot="outerContent">
                <AddAndEditForm :formType="formType" @closeDialogOuter="closeDialogOuter" />
            </template>
        </DialogModel>
    </div>
</template>

<script>
import DialogModel from '@/components/DialogModel/index'
import AddAndEditForm from './components/addAndEditForm.vue'
export default {
    components: {
        DialogModel,
        AddAndEditForm,
    },
    data() {
        return {
            formType: 1, // 1新增 2详情 3编辑
            dialogConfig: {
                outerTitle: '新增',
                innerTitle: false,
                outerWidth: '80%',
                outerVisible: false,
                innerVisible: false,
            },
            queryParam: {
                projectName: '',
                startTime: '',
                endTime: '',
            },
            timeValue: [],
            tableList: [
                {
                    projectName: '测试工程1',
                },
                {
                    projectName: '测试工程2',
                },
                {
                    projectName: '测试工程3',
                },
            ],
            tableColumn: [
                { label: '标书名称', prop: 'projectName' },
                { label: '创建人', prop: '' },
                { label: '创建时间', prop: '' },
            ],
        }
    },
    methods: {
        // 关闭
        closeDialogOuter() {
            this.dialogConfig.outerVisible = false
        },
        // 删除
        onHandleDelete(row) {
            console.log(row)
            this.$modal
                .confirm('确定删除该业绩吗？')
                .then(() => {
                    console.log('确定')
                })
                .catch(() => {
                    console.log('取消')
                })
        },
        // 新增或编辑
        onHandleAddOrEdit(row, type) {
            console.log(row, type)
            if (type === 1) {
                this.dialogConfig.outerTitle = '新增人员'
                this.formType = 1
            } else if (type === 3) {
                this.dialogConfig.outerTitle = '编辑人员'
                this.formType = 3
            } else if (type === 2) {
                this.dialogConfig.outerTitle = '人员详情'
                this.formType = 2
            }

            this.dialogConfig.outerVisible = true
        },
        // 下载
        onHandleDownload(row) {
            console.log(row)
        },
    },
}
</script>
<style scoped lang="scss"></style>