完善公共组件，以及Mixin混入的公共方法，数据等问题

src/api/BasicManage/ContactUnits.js

@@ -0,0 +1,21 @@
+/**
+ * 往来单位管理页面 API
+ */
+import request from '@/utils/request'
+
+/** 新增往来单位 */
+export const addContactUnitsApi = (data) => {
+    return request.post('/xxx/xx', data)
+}
+/** 删除往来单位 */
+export const deleteContactUnitsApi = (id) => {
+    return request.delete('/xxx/xx', id)
+}
+/** 修改往来单位 */
+export const editContactUnitsApi = (data) => {
+    return request.post('/xxx/xx', data)
+}
+/** 往来单位列表查询 */
+export const queryContactUnitsListApi = (data) => {
+    return request.post('/xxx/xx', data)
+}

src/api/BasicManage/Project.js

@@ -1,3 +1,6 @@
+/**
+ * 工程管理页面 API
+ */
 import request from '@/utils/request'
 
 /** 新增工程 */

src/api/BasicManage/ProtocolManage.js

@@ -0,0 +1,21 @@
+/**
+ * 协议管理页面 API
+ */
+import request from '@/utils/request'
+
+/** 新增协议 */
+export const addProtocolApi = (data) => {
+    return request.post('/xxx/xx', data)
+}
+/** 删除协议 */
+export const deleteProtocolApi = (id) => {
+    return request.delete('/xxx/xx', id)
+}
+/** 修改协议 */
+export const editProtocolApi = (data) => {
+    return request.post('/xxx/xx', data)
+}
+/** 协议列表查询 */
+export const queryProtocolListApi = (data) => {
+    return request.post('/xxx/xx', data)
+}

src/api/BasicManage/UnitType.js

@@ -0,0 +1,21 @@
+/**
+ * 单位类型管理页面 API
+ */
+import request from '@/utils/request'
+
+/** 新增单位类型*/
+export const addUnitTypeApi = (data) => {
+    return request.post('/xxx/xx', data)
+}
+/** 删除单位类型*/
+export const deleteUnitTypeApi = (id) => {
+    return request.delete('/xxx/xx', id)
+}
+/** 修改单位类型*/
+export const editUnitTypeApi = (data) => {
+    return request.post('/xxx/xx', data)
+}
+/** 单位类型列表查询 */
+export const queryUnitTypeListApi = (data) => {
+    return request.post('/xxx/xx', data)
+}

src/components/TableModel/index.vue

@@ -222,6 +222,7 @@ export default {
         this.getTableList()
     },
     updated() {
+        // 更新时重新计算操作列需要的最小宽度 确保展示无误
         this.dynamicWidth = this.getOperatorWidth()
     },
     methods: {
@@ -236,14 +237,9 @@ export default {
         },
         /** 重置按钮 */
         resetQuery() {
-            // this.$refs.queryFormRef.resetFields()
+            this.$refs.queryFormRef.resetFields()
             this.getTableList()
         },
-        /** 筛选列 */
-        checkboxChange(list) {
-            this.columCheckList = list
-        },
-
         /** 动态设置操作列的列宽 */
         getOperatorWidth() {
             const operatorColumn =

src/mixins/common.js

@@ -1,12 +0,0 @@
-export const commonMixin = {
-    methods: {
-        /** 关闭外侧弹框 */
-        closeDialogOuter() {
-            this.dialogConfig.outerVisible = false
-        },
-        /** 关闭内侧弹框 */
-        closeDialogInner() {
-            this.dialogConfig.innerVisible = false
-        },
-    }
-} 

src/views/BasicManage/ContactUnits/components/form-contact-units.vue

@@ -8,8 +8,8 @@
             :model="contactUnitsParams"
             :rules="contactUnitsParamsRules"
         >
-            <el-form-item label="单位名称" prop="pro_name">
+            <el-form-item label="单位名称" prop="scrapNum">
-                <el-input v-model="contactUnitsParams.pro_name" />
+                <el-input v-model="contactUnitsParams.scrapNum" />
             </el-form-item>
             <el-form-item label="单位类型" prop="pro_type_of">
                 <el-select v-model="contactUnitsParams.pro_type_of"></el-select>
@@ -48,10 +48,21 @@
 <script>
 export default {
     name: 'FormContactUnits',
+    props: {
+        editParams: {
+            type: Object,
+            default: () => null,
+        },
+    },
+    mounted() {
+        if (this.editParams) {
+            Object.assign(this.contactUnitsParams, this.editParams)
+        }
+    },
     data() {
         return {
             contactUnitsParams: {
-                pro_name: '',
+                scrapNum: '',
                 pro_code: '',
                 pro_unit: '',
                 pro_type_of: '',

src/views/BasicManage/ContactUnits/index.vue

@@ -1,22 +1,45 @@
 <template>
-    <!-- 往来单位 -->
+    <!-- 往来单位管理页面 -->
     <div class="app-container">
+        <!-- 列表 -->
         <TableModel :formLabel="formLabel" :columnsList="columnsList">
-            <template slot="btn">
+            <template slot="btn" slot-scope="{ queryParams }">
-                <el-button type="primary" @click="addContactUnits()"
+                <el-button type="primary" @click="handleAddData()"
                     >新建</el-button
                 >
-                <el-button>导入</el-button>
+                <el-button @click="handleImportData()">导入</el-button>
-                <el-button>导出</el-button>
+                <el-button @click="handleExportData(queryParams)"
+                    >导出</el-button
+                >
+            </template>
+
+            <template slot="handle" slot-scope="{ data }">
+                <el-button
+                    type="primary"
+                    size="mini"
+                    @click="handleEditData(data)"
+                    >编辑</el-button
+                >
+                <el-button
+                    type="danger"
+                    size="mini"
+                    @click="handleDeleteData(data)"
+                    >删除</el-button
+                >
             </template>
         </TableModel>
 
+        <!-- 新增以及修改时的弹框 -->
         <DialogModel
             :dialogConfig="dialogConfig"
             @closeDialogOuter="closeDialogOuter"
         >
             <template slot="outerContent">
-                <FormContactUnits @closeDialog="closeDialog" />
+                <!-- 新增以及修改数据的表单组件 -->
+                <FormContactUnits
+                    @closeDialog="closeDialog"
+                    :editParams="editParams"
+                />
             </template>
         </DialogModel>
     </div>
@@ -24,7 +47,7 @@
 
 <script>
 import { formLabel, columnsList, dialogConfig } from './config'
-import { commonMixin } from '@/mixins/common.js'
+import { commonMixin } from '../mixins/common'
 import FormContactUnits from './components/form-contact-units.vue'
 export default {
     name: 'ContactUnits',
@@ -35,18 +58,11 @@ export default {
             formLabel,
             columnsList,
             dialogConfig,
+            // 新建时弹框标题
+            addDialogTitle: '新建往来单位',
+            // 修改时弹框标题
+            editDialogTitle: '修改往来单位',
         }
     },
-    methods: {
-        /** 新建往来单位 */
-        addContactUnits() {
-            this.dialogConfig.outerTitle = '新建往来单位'
-            this.dialogConfig.outerVisible = true
-        },
-        /** 关闭弹框 */
-        closeDialog() {
-            this.dialogConfig.outerVisible = false
-        },
-    },
 }
 </script>

src/views/BasicManage/ProjectManage/components/form-project.vue

@@ -10,8 +10,8 @@
         >
             <el-row type="flex" justify="space-between" :gutter="24">
                 <el-col :span="12">
-                    <el-form-item label="工程名称" prop="pro_name">
+                    <el-form-item label="工程名称" prop="scrapNum">
-                        <el-input v-model="projectParams.pro_name" />
+                        <el-input v-model="projectParams.scrapNum" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
@@ -112,10 +112,21 @@
 <script>
 export default {
     name: 'FormProject',
+    props: {
+        editParams: {
+            type: Object,
+            default: () => null,
+        },
+    },
+    mounted() {
+        if (this.editParams) {
+            Object.assign(this.projectParams, this.editParams)
+        }
+    },
     data() {
         return {
             projectParams: {
-                pro_name: '',
+                scrapNum: '',
                 pro_code: '',
                 pro_unit: '',
                 pro_type_of: '',
@@ -126,7 +137,7 @@ export default {
             },
             // 校验规则
             projectParamsRules: {
-                pro_name: [
+                scrapNum: [
                     {
                         required: true,
                         message: '请输入工程名称',

src/views/BasicManage/ProjectManage/index.vue

@@ -1,26 +1,44 @@
 <template>
-    <!-- 工程管理 -->
+    <!-- 工程管理页面 -->
     <div class="app-container">
         <!-- 表格 -->
         <TableModel :formLabel="formLabel" :columnsList="columnsList">
-            <template slot="btn">
+            <template slot="btn" slot-scope="{ queryParams }">
-                <el-button type="primary" @click="addProject()">新建</el-button>
+                <el-button type="primary" @click="handleAddData()"
-                <el-button>导入</el-button>
+                    >新建</el-button
-                <el-button>导出</el-button>
+                >
+                <el-button @click="handleImportData()">导入</el-button>
+                <el-button @click="handleExportData(queryParams)"
+                    >导出</el-button
+                >
             </template>
             <template slot="handle" slot-scope="{ data }">
-                <el-button type="primary" size="mini">编辑</el-button>
+                <el-button
-                <el-button type="danger" size="mini">删除</el-button>
+                    type="primary"
+                    size="mini"
+                    @click="handleEditData(data)"
+                    >编辑</el-button
+                >
+                <el-button
+                    type="danger"
+                    size="mini"
+                    @click="handleDeleteData(data)"
+                    >删除</el-button
+                >
             </template>
         </TableModel>
 
-        <!-- 新增弹框 -->
+        <!-- 新增以及修改时的弹框 -->
         <DialogModel
             :dialogConfig="dialogConfig"
             @closeDialogOuter="closeDialogOuter"
         >
             <template slot="outerContent">
-                <FormProject @closeDialog="closeDialog" />
+                <!-- 新增以及修改数据的表单组件 -->
+                <FormProject
+                    :editParams="editParams"
+                    @closeDialog="closeDialog"
+                />
             </template>
         </DialogModel>
     </div>
@@ -28,7 +46,7 @@
 
 <script>
 import { formLabel, columnsList, dialogConfig } from './config'
-import { commonMixin } from '@/mixins/common.js'
+import { commonMixin } from '../mixins/common'
 import FormProject from './components/form-project'
 export default {
     name: 'ProjectManage',
@@ -40,23 +58,15 @@ export default {
         return {
             // 搜索区表单配置项
             formLabel,
-            // 列表区表单配置项
+            // 列表区配置项
             columnsList,
-            // 弹框区表单配置项
+            // 弹框区配置项
             dialogConfig,
+            // 新建时弹框标题
+            addDialogTitle: '新建工程',
+            // 修改时弹框标题
+            editDialogTitle: '修改工程',
         }
     },
-    methods: {
-        /** 新建工程 */
-        addProject() {
-            this.dialogConfig.outerTitle = '新建工程'
-            this.dialogConfig.outerVisible = true
-        },
-
-        /** 关闭弹框 */
-        closeDialog() {
-            this.dialogConfig.outerVisible = false
-        },
-    },
 }
 </script>

src/views/BasicManage/ProtocolManage/components/form-protocol.vue

@@ -10,8 +10,8 @@
         >
             <el-row type="flex" justify="space-between" :gutter="24">
                 <el-col :span="12">
-                    <el-form-item label="租赁单位" prop="pro_name">
+                    <el-form-item label="租赁单位" prop="scrapNum">
-                        <el-input v-model="protocolParams.pro_name" />
+                        <el-input v-model="protocolParams.scrapNum" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
@@ -92,10 +92,21 @@
 <script>
 export default {
     name: 'FormProtocol',
+    props: {
+        editParams: {
+            type: Object,
+            default: () => null,
+        },
+    },
+    mounted() {
+        if (this.editParams) {
+            Object.assign(this.protocolParams, this.editParams)
+        }
+    },
     data() {
         return {
             protocolParams: {
-                pro_name: '',
+                scrapNum: '',
                 pro_code: '',
                 pro_unit: '',
                 pro_type_of: '',
@@ -106,7 +117,7 @@ export default {
             },
             // 校验规则
             protocolParamsRules: {
-                pro_name: [
+                scrapNum: [
                     {
                         required: true,
                         message: '请选择租赁单位',

src/views/BasicManage/ProtocolManage/index.vue

@@ -1,28 +1,43 @@
 <template>
-    <!-- 协议管理 -->
+    <!-- 协议管理页面 -->
     <div class="app-container">
         <!-- 表格 -->
         <TableModel :formLabel="formLabel" :columnsList="columnsList">
-            <template slot="btn">
+            <template slot="btn" slot-scope="{ queryParams }">
-                <el-button type="primary" @click="addProtocol()"
+                <el-button type="primary" @click="handleAddData()"
                     >新增协议</el-button
                 >
-                <el-button>导出</el-button>
+                <el-button @click="handleExportData(queryParams)"
+                    >导出</el-button
+                >
             </template>
             <template slot="handle" slot-scope="{ data }">
-                <el-button type="primary" size="mini">查看</el-button>
+                <el-button
-                <el-button type="primary" size="mini">编辑</el-button>
+                    type="primary"
-                <el-button type="danger" size="mini">删除</el-button>
+                    size="mini"
+                    @click="handleEditData(data)"
+                    >编辑</el-button
+                >
+                <el-button
+                    type="danger"
+                    size="mini"
+                    @click="handleDeleteData(data)"
+                    >删除</el-button
+                >
             </template>
         </TableModel>
 
-        <!-- 新增弹框 -->
+        <!-- 新增以及修改时的弹框 -->
         <DialogModel
             :dialogConfig="dialogConfig"
             @closeDialogOuter="closeDialogOuter"
         >
             <template slot="outerContent">
-                <FormProtocol @closeDialog="closeDialog" />
+                <!-- 新增以及修改数据的表单组件 -->
+                <FormProtocol
+                    @closeDialog="closeDialog"
+                    :editParams="editParams"
+                />
             </template>
         </DialogModel>
     </div>
@@ -30,7 +45,7 @@
 
 <script>
 import { formLabel, columnsList, dialogConfig } from './config'
-import { commonMixin } from '@/mixins/common.js'
+import { commonMixin } from '../mixins/common'
 import FormProtocol from './components/form-protocol'
 export default {
     name: 'ProtocolManage',
@@ -43,19 +58,11 @@ export default {
             formLabel,
             columnsList,
             dialogConfig,
+            // 新建时弹框标题
+            addDialogTitle: '新增协议',
+            // 修改时弹框标题
+            editDialogTitle: '修改协议',
         }
     },
-    methods: {
-        /** 新增协议 */
-        addProtocol() {
-            this.dialogConfig.outerTitle = '新增协议'
-            this.dialogConfig.outerVisible = true
-            console.log('新增协议---')
-        },
-        /** 关闭弹框 */
-        closeDialog() {
-            this.dialogConfig.outerVisible = false
-        },
-    },
 }
 </script>

src/views/BasicManage/UnitType/components/form-units-type.vue

@@ -8,8 +8,8 @@
             :model="unitsTypeParams"
             :rules="unitsTypeParamsRules"
         >
-            <el-form-item label="单位类型名称" prop="pro_type_name">
+            <el-form-item label="单位类型名称" prop="scrapNum">
-                <el-input v-model="unitsTypeParams.pro_type_name" />
+                <el-input v-model="unitsTypeParams.scrapNum" />
             </el-form-item>
 
             <el-form-item label="启用状态" prop="pro_type">
@@ -37,16 +37,26 @@
 <script>
 export default {
     name: 'FormUnitsType',
+    props: {
+        editParams: {
+            type: Object,
+            default: () => null,
+        },
+    },
+    mounted() {
+        if (this.editParams) {
+            Object.assign(this.unitsTypeParams, this.editParams)
+        }
+    },
     data() {
         return {
             unitsTypeParams: {
-                pro_type_name: '',
+                scrapNum: '',
-
                 pro_type: '',
             },
             // 校验规则
             unitsTypeParamsRules: {
-                pro_type_name: [
+                scrapNum: [
                     {
                         required: true,
                         message: '请输入单位类型名称',

src/views/BasicManage/UnitType/index.vue

@@ -1,28 +1,44 @@
 <template>
-    <!-- 单位类型 -->
+    <!-- 单位类型管理页面 -->
     <div class="app-container">
         <!-- 表格 -->
         <TableModel :formLabel="formLabel" :columnsList="columnsList">
-            <template slot="btn">
+            <template slot="btn" slot-scope="{ queryParams }">
-                <el-button type="primary" @click="addUnitType()"
+                <el-button type="primary" @click="handleAddData()"
                     >新建</el-button
                 >
-                <el-button>导入</el-button>
+                <el-button @click="handleImportData()">导入</el-button>
-                <el-button>导出</el-button>
+                <el-button @click="handleExportData(queryParams)"
+                    >导出</el-button
+                >
             </template>
             <template slot="handle" slot-scope="{ data }">
-                <el-button type="primary" size="mini">编辑</el-button>
+                <el-button
-                <el-button type="danger" size="mini">删除</el-button>
+                    type="primary"
+                    size="mini"
+                    @click="handleEditData(data)"
+                    >编辑</el-button
+                >
+                <el-button
+                    type="danger"
+                    size="mini"
+                    @click="handleDeleteData(data)"
+                    >删除</el-button
+                >
             </template>
         </TableModel>
 
-        <!-- 新增弹框 -->
+        <!-- 新增以及修改时的弹框 -->
         <DialogModel
             :dialogConfig="dialogConfig"
             @closeDialogOuter="closeDialogOuter"
         >
             <template slot="outerContent">
-                <FormUnitsType @closeDialog="closeDialog" />
+                <!-- 新增以及修改数据的表单组件 -->
+                <FormUnitsType
+                    @closeDialog="closeDialog"
+                    :editParams="editParams"
+                />
             </template>
         </DialogModel>
     </div>
@@ -30,7 +46,7 @@
 
 <script>
 import { formLabel, columnsList, dialogConfig } from './config'
-import { commonMixin } from '@/mixins/common.js'
+import { commonMixin } from '../mixins/common'
 import FormUnitsType from './components/form-units-type'
 export default {
     name: 'UnitType',
@@ -43,18 +59,11 @@ export default {
             formLabel,
             columnsList,
             dialogConfig,
+            // 新建时弹框标题
+            addDialogTitle: '新建单位类型',
+            // 修改时弹框标题
+            editDialogTitle: '修改单位类型',
         }
     },
-    methods: {
-        /** 新建单位类型 */
-        addUnitType() {
-            this.dialogConfig.outerTitle = '新建单位类型'
-            this.dialogConfig.outerVisible = true
-        },
-        /** 关闭弹框 */
-        closeDialog() {
-            this.dialogConfig.outerVisible = false
-        },
-    },
 }
 </script>

src/views/BasicManage/mixins/common.js

@@ -0,0 +1,49 @@
+export const commonMixin = {
+    data() {
+        return {
+            // 修改时的数据源
+            editParams: null,
+        }
+    },
+    methods: {
+        /** 新建 */
+        handleAddData() {
+            this.editParams = null
+            this.dialogConfig.outerTitle = this.addDialogTitle
+            this.dialogConfig.outerVisible = true
+        },
+        /** 删除 */
+        handleDeleteData(data) {
+            this.$modal.confirm('是否确定删除').then(() => {
+                console.log('确定删除--')
+            })
+        },
+        /** 编辑 */
+        handleEditData(data) {
+            this.editParams = data
+            this.dialogConfig.outerTitle = this.editDialogTitle
+            this.dialogConfig.outerVisible = true
+        },
+        /** 导入数据 */
+        handleImportData() {
+            console.log('导入--')
+        },
+        /** 导出数据 */
+        handleExportData() {
+            console.log('导出--')
+        },
+        /** 关闭外侧弹框 */
+        closeDialogOuter() {
+            this.dialogConfig.outerVisible = false
+        },
+        /** 关闭内侧弹框 */
+        closeDialogInner() {
+            this.dialogConfig.innerVisible = false
+        },
+
+        /** 关闭弹框  由表单组件通知父组件关闭弹框的自定义事件 */
+        closeDialog() {
+            this.dialogConfig.outerVisible = false
+        },
+    }
+}