web_dist/src/views/logisticsMaterials/logisticsBasicData/projectInformation/index.vue

<template>
    <div class="layout_display_flex_y">
        <div class="obviousBox" style="margin-bottom: 6px;">
            <searchArea :searchData="searchData" @submit="searchByForm"></searchArea>
        </div>

        <div class="layout_display_flex_y" style="height: 85%">
            <div style="background-color: #fff;padding: 8px">
                <el-button type="primary" icon="Plus" @click="onAddItem" style="margin-left: 5px">新增</el-button>
            </div>
            <el-table
                :data="tableData"
                border style="width: 100%" height="100%" stripe highlight-current-row class="ypClassTable normal-size">
                <el-table-column prop="code" label="项目编码">
                </el-table-column>
                <el-table-column prop="name" label="项目名称">
                </el-table-column>
                <el-table-column prop="name" label="规格">
                </el-table-column>
                <el-table-column prop="name" label="单位">
                </el-table-column>
                <el-table-column prop="name" label="物价码">
                </el-table-column>
                <el-table-column prop="delFlag" label="项目类型">
                </el-table-column>
                <el-table-column prop="delFlag" label="是否停用">
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="180" width="180" center>
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="editYpClass(scope.row)">编辑</el-button>
                        <el-button :type="scope.row.delFlag !== '0' ? 'success' : 'info'" size="small"
                            @click.prevent="changeDelFlag(scope.row)">
                            {{ scope.row.delFlag == '0' ? '停用' : '启用' }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination :current-page="pageNumber" :page-size="pageSize" :page-sizes="[10, 15, 20, 25]"
                :total="total" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
    <el-dialog v-model="showDialog" :close-on-click-modal="false" :close-on-press-escape="false"
        :title="(currentEditCode ? '编辑' : '新增') + '项目'" width="100%" destroy-on-close fullscreen  @close="handleDialogClose">
        <!-- <YpPrintName :ypPrintNameDetail="ypPrintNameDetail" @closeYpPrintNameEditFor="closeYpPrintName" /> -->
        <info :currentEditCode="currentEditCode" @handleDialogClose="handleDialogClose"></info>
    </el-dialog>
</template>
<script setup name="YpDict">
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getLcProjectList, insertLcProject } from '@/api/lc/project.js'
import searchArea from '@/components/searchArea/index.vue';
import info from '@/views/logisticsMaterials/logisticsBasicData/projectInformation/info.vue';

const delFlagOption = [{ value: '0', label: '启用' }, { value: '1', label: '停用' }]

const searchData = ref([
    {
        label: '项目编码',
        key: 'vehicleName',
        type: 'input',
        value: '',
        clearable: true,
    },
    {
        label: '项目名称',
        key: 'vehicleType',
        type: 'select',
        value: '',
        optionsData: [ //（0：轿车，1：面包车，2：越野车，3：吉普车，4：巴士，5：卡车）
            {
                label: '轿车',
                value: '0',
            },
            {
                label: '面包车',
                value: '1',
            },
        ],
    },
    {
        label: '项目类型',
        key: 'vehicleType',
        type: 'select',
        value: '',
        optionsData: [
            {
                label: '轿车',
                value: '0',
            },
            {
                label: '面包车',
                value: '1',
            },
        ],
    },
    {
        label: '是否停用',
        key: 'vehicleType',
        type: 'select',
        value: '',
        optionsData: [
            {
                label: '否',
                value: '0',
            },
            {
                label: '是',
                value: '1',
            },
        ],
    },
])
const pageSize = ref(10)
const pageNumber = ref(1)
const total = ref(0)
const currentEditCode = ref('')

const tableData = ref([])
const handleSizeChange = (val) => {
    pageSize.value = val
}
const handleCurrentChange = (val) => {
    pageNumber.value = val
}

let showDialog = ref(false)

onMounted(() => {
    nextTick(() => {
       
    })
})

//搜索表单方法
const searchByForm = (form) => {
    console.log("search", form)
}

// 新增行
const onAddItem = () => {
    showDialog.value = true
}

const handleDialogClose = () => {
    currentEditCode.value = ""
    showDialog.value = false
}

</script>
<style lang="scss" deep>
.el-dialog__body {
    // padding: 0 16px;
    // height: calc(100% - 25px);
}

.el-tabs {
    height: calc(100% - 27px);

    .el-tabs__content {
        padding: 5px;
        height: calc(100% - 27px);
    }

    .el-tab-pane {
        height: calc(100% - 27px);
        overflow: auto;
    }

    .el-table__inner-wrapper {
        height: calc(100% - 10px) !important;
    }

}

.el-table .warning-row {
    --el-table-tr-bg-color: #dd7694;
}

.search-select-pre {
    padding: 0 12px;
    color: var(--el-text-color-regular);
    background: var(--el-fill-color-light);
    border-right: 1px solid var(--el-border-color);
    --el-select-input-padding-left: '0'
}
</style>