总包工程页面基础逻辑完善

src/api/basic-manage/project-manage/all-project.js

@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+
+// 新增总包工程
+export const addAllProjectAPI = (data) => {
+    return request({
+        url: '/project/***',
+        method: 'POST',
+        data,
+    })
+}
+
+// 修改总包工程
+export const editAllProjectAPI = (data) => {
+    return request({
+        url: '/project/***',
+        method: 'POST',
+        data,
+    })
+}
+
+// 删除总包工程
+export const deleteAllProjectAPI = (id) => {
+    return request({
+        url: `/project/****/${id}`,
+        method: 'DELETE',
+    })
+}
+
+// 获取总包工程列表
+export const getAllProjectListAPI = (data) => {
+    return request({
+        url: '/project/***',
+        method: 'GET',
+        params: data,
+    })
+}

src/assets/styles/index.scss

@@ -208,3 +208,11 @@ aside {
   color: #409EFF;
   cursor: pointer;
 }
+
+.dialog-footer-btn {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  padding: 12px 0;
+  border-top: 1px solid #e5e5e5;
+}

src/components/TableModel/index.vue

@@ -6,7 +6,6 @@
             :inline="true"
             size="small"
             ref="queryFormRef"
-            label-width="100px"
             :rules="formRules"
             v-show="showSearch"
             :model="queryParams"
@@ -248,6 +247,7 @@ export default {
             type: Boolean,
             default: false,
         },
+
         // 复选框是否勾选
         selectable: {
             type: Function,
@@ -258,7 +258,7 @@ export default {
         // 是否显示复选框 由父组件传递 默认不显示
         isSelectShow: {
             type: Boolean,
-            default: false,
+            default: true,
         },
         // 测试时使用的数据源
         testTableList: {
@@ -318,7 +318,7 @@ export default {
             // 搜索区域是否隐藏
             showSearch: true,
             // 是否显示复选框
-            selectionShow: true,
+            selectionShow: false,
             // 是否显示序号
             indexNumShow: true,
             // 是否显示操作列

src/views/basic-manage/project-manage/all-project/config.js

@@ -0,0 +1,46 @@
+export const formLabel = [
+    {
+        f_label: '关键词',
+        f_model: 'keyWord',
+        f_type: 'ipt',
+        isShow: true, // 是否展示label
+    },
+]
+
+export const columnsList = [
+    { t_props: 'projectName', t_label: '总工程名称' },
+    { t_props: 'level', t_label: '电压等级' },
+
+    {
+        t_props: 'count',
+        t_label: '标段工程数量',
+        t_slot: 'count',
+    },
+    { t_props: 'status', t_label: '状态' },
+]
+
+export const testTableList = [
+    {
+        projectName: '总工程名称',
+        level: '电压等级',
+        status: '在建',
+        count: '专业工程数量',
+    },
+    {
+        projectName: '总工程名称2',
+        level: '电压等级',
+        status: '停工',
+        count: '专业工程数量',
+    },
+    {
+        projectName: '总工程名称3',
+        level: '电压等级',
+        status: '筹建',
+        count: '专业工程数量',
+    },
+]
+
+export const dialogConfig = {
+    outerVisible: false,
+    outerTitle: '',
+}

src/views/basic-manage/project-manage/all-project/index.vue

@@ -1,10 +1,235 @@
 <template>
     <!-- 基础管理 ---- 项目管理 ---- 总包工程 -->
-    <div class="app-container"> </div>
+    <div class="app-container">
+        <TableModel
+            :formLabel="formLabel"
+            :showOperation="true"
+            :showRightTools="true"
+            ref="allProjectTableRef"
+            :columnsList="columnsList"
+            :testTableList="testTableList"
+            :request-api="getAllProjectListAPI"
+        >
+            <template slot="btn" slot-scope="{ queryParams }">
+                <el-button
+                    plain
+                    size="mini"
+                    type="success"
+                    icon="el-icon-download"
+                    @click="onHandleExportAllProject(queryParams)"
+                >
+                    导出
+                </el-button>
+
+                <el-button
+                    plain
+                    size="mini"
+                    type="primary"
+                    icon="el-icon-plus"
+                    @click="onHandleAddOrEditAllProject(1, null)"
+                >
+                    新增
+                </el-button>
+            </template>
+
+            <template slot="handle" slot-scope="{ data }">
+                <el-button
+                    plain
+                    size="mini"
+                    type="primary"
+                    icon="el-icon-edit"
+                    @click="onHandleAddOrEditAllProject(2, data)"
+                >
+                    修改
+                </el-button>
+                <el-button
+                    size="mini"
+                    type="danger"
+                    icon="el-icon-delete"
+                    @click="onHandleDeleteAllProject(data)"
+                >
+                    删除
+                </el-button>
+            </template>
+        </TableModel>
+
+        <DialogModel
+            :dialogConfig="dialogConfig"
+            @closeDialogOuter="handleCloseDialogOuter"
+        >
+            <template slot="outerContent">
+                <el-form
+                    label-width="100px"
+                    ref="addOrEditFormRef"
+                    :model="addOrEditForm"
+                    :rules="addOrEditFormRules"
+                >
+                    <el-form-item label="总工程名称" prop="projectName">
+                        <el-input
+                            clearable
+                            placeholder="请输入总工程名称"
+                            v-model="addOrEditForm.projectName"
+                        />
+                    </el-form-item>
+                    <el-form-item label="电压等级" prop="voltageLevel">
+                        <el-select
+                            clearable
+                            filterable
+                            style="width: 100%"
+                            placeholder="请选择电压等级"
+                            v-model="addOrEditForm.voltageLevel"
+                        >
+                            <el-option
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                                v-for="item in voltageLevelOptions"
+                            />
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+
+                <el-row class="dialog-footer-btn">
+                    <el-button size="medium" @click="handleCloseDialogOuter">
+                        取消
+                    </el-button>
+                    <el-button
+                        size="medium"
+                        type="primary"
+                        @click="onHandleConfirmAddOrEdit"
+                    >
+                        确定
+                    </el-button>
+                </el-row>
+            </template>
+        </DialogModel>
+    </div>
 </template>
 
 <script>
+import TableModel from '@/components/TableModel'
+import DialogModel from '@/components/DialogModel'
+import { formLabel, columnsList, dialogConfig, testTableList } from './config'
+import {
+    addAllProjectAPI,
+    editAllProjectAPI,
+    deleteAllProjectAPI,
+    getAllProjectListAPI,
+} from '@/api/basic-manage/project-manage/all-project'
 export default {
     name: 'AllProject',
+    components: {
+        TableModel,
+        DialogModel,
+    },
+
+    data() {
+        return {
+            formLabel,
+            columnsList,
+            dialogConfig,
+            testTableList,
+            getAllProjectListAPI,
+
+            // 新增或修改表单
+            addOrEditForm: {
+                projectName: '', // 总工程名称
+                voltageLevel: '', // 电压等级
+            },
+
+            // 新增或修改表单验证
+            addOrEditFormRules: {
+                projectName: [
+                    {
+                        required: true,
+                        trigger: 'blur',
+                        message: '请输入总工程名称',
+                    },
+                ],
+                voltageLevel: [
+                    {
+                        required: true,
+                        trigger: 'change',
+                        message: '请选择电压等级',
+                    },
+                ],
+            },
+
+            // 电压等级
+            voltageLevelOptions: [
+                {
+                    label: '110kV',
+                    value: '110kV',
+                },
+                {
+                    label: '220kV',
+                    value: '220kV',
+                },
+                {
+                    label: '330kV',
+                    value: '330kV',
+                },
+            ],
+        }
+    },
+    methods: {
+        // 导出按钮
+        onHandleExportAllProject(queryParams) {
+            console.log(queryParams, '导出')
+        },
+
+        // 新增或修改
+        onHandleAddOrEditAllProject(type, data) {
+            this.dialogConfig.outerTitle =
+                type === 1 ? '新增总工程' : '修改总工程'
+            this.dialogConfig.outerVisible = true
+        },
+
+        // 删除
+        onHandleDeleteAllProject(data) {
+            this.$confirm('确定删除该工程吗？', '温馨提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(async () => {
+                    const res = await deleteAllProjectAPI(data.id)
+                    console.log(res, '删除结果')
+                    if (res.code === 200) {
+                        this.$msgSuccess('删除成功')
+                        this.$refs.allProjectTableRef.getTableList() // 更新列表
+                    }
+                })
+                .catch(() => {
+                    console.log('取消')
+                })
+        },
+
+        // 确定按钮
+        onHandleConfirmAddOrEdit() {
+            this.$refs.addOrEditFormRef.validate(async (valid) => {
+                if (valid) {
+                    const API =
+                        this.dialogConfig.outerTitle === '新增总工程'
+                            ? addAllProjectAPI
+                            : editAllProjectAPI
+
+                    const res = await API(this.addOrEditForm)
+                    console.log(res, '新增或修改结果')
+                    if (res.code === 200) {
+                        this.$msgSuccess('操作成功')
+                        this.handleCloseDialogOuter()
+                        this.$refs.allProjectTableRef.getTableList() // 更新列表
+                    }
+                }
+            })
+        },
+
+        // 关闭弹框
+        handleCloseDialogOuter() {
+            this.$refs.addOrEditFormRef.resetFields()
+            this.dialogConfig.outerVisible = false
+        },
+    },
 }
 </script>