表格组件封装完善，协议管理，类型管理页面创建

src/components/TableModel/index.vue

@@ -96,6 +96,7 @@
             border
             ref="tableRef"
             select-on-indeterminate
+            style="width: 100%"
         >
             <el-table-column
                 type="selection"
@@ -129,9 +130,16 @@
                     </template>
                 </template>
             </el-table-column>
-            <el-table-column align="center" label="操作" v-show="handleShow">
+            <el-table-column
+                align="center"
+                label="操作"
+                v-if="handleShow"
+                :min-width="dynamicWidth"
+            >
                 <template slot-scope="{ row }">
-                    <slot :data="row" name="handle"></slot>
+                    <div class="optionDivRef">
+                        <slot :data="row" name="handle">-</slot>
+                    </div>
                 </template>
             </el-table-column>
         </el-table>
@@ -167,7 +175,15 @@ export default {
             })
         },
     },
-
+    watch: {
+        handleShow: {
+            handler(newValue) {
+                if (!newValue) {
+                    this.dynamicWidth = 0
+                }
+            },
+        },
+    },
     data() {
         return {
             // 列表接口查询参数
@@ -180,8 +196,16 @@ export default {
             indexNumShow: true,
             // 是否显示操作列
             handleShow: true,
+            // 列表每列 label
             columCheckList: [],
-            tableList: [],
+            // 列表数据源
+            tableList: [
+                { scrapNum: '测试' },
+                { scrapNum: '123' },
+                { scrapNum: '测试' },
+            ],
+            // 操作列最小宽度
+            dynamicWidth: 0,
         }
     },
 
@@ -197,7 +221,9 @@ export default {
         })
         this.getTableList()
     },
-
+    updated() {
+        this.dynamicWidth = this.getOperatorWidth()
+    },
     methods: {
         /** 获取列表数据 */
         async getTableList() {
@@ -217,6 +243,37 @@ export default {
         checkboxChange(list) {
             this.columCheckList = list
         },
+
+        /** 动态设置操作列的列宽 */
+        getOperatorWidth() {
+            const operatorColumn =
+                document.getElementsByClassName('optionDivRef')
+
+            // 默认宽度
+            let width = 100
+            // 内间距
+            let paddingSpacing = 0
+            // 按钮数量
+            let buttonCount = 0
+
+            if (operatorColumn.length > 0) {
+                Array.prototype.forEach.call(operatorColumn, function (item) {
+                    // 最宽的宽度
+                    width = width > item.offsetWidth ? width : item.offsetWidth
+                    const buttons = item.getElementsByClassName('el-button')
+                    buttonCount = buttons.length
+                    buttonCount =
+                        buttonCount > buttons.length
+                            ? buttonCount
+                            : buttons.length
+                })
+                // 如果按钮数量大于2，宽度要加上边距*（按钮数量-1）
+                // if (buttonCount > 2) {
+                //     width += paddingSpacing * (buttonCount - 1)
+                // }
+                return width
+            }
+        },
     },
 }
 </script>
@@ -234,4 +291,13 @@ export default {
         padding: 6px 18px;
     }
 }
+
+::v-deep .optionDivRef {
+    white-space: nowrap;
+    display: inline-block;
+
+    .el-button {
+        padding: 6px 12px;
+    }
+}
 </style>

src/router/index.js

@@ -83,6 +83,18 @@ export const constantRoutes = [
         component: () => import('@/views/BasicManage/ContactUnits'),
         name: 'ContactUnits',
         meta: { title: '往来单位', icon: 'dashboard', affix: true }
+      },
+      {
+        path: 'UnitType',
+        component: () => import('@/views/BasicManage/UnitType'),
+        name: 'UnitType',
+        meta: { title: '单位类型', icon: 'dashboard', affix: true }
+      },
+      {
+        path: 'ProtocolManage',
+        component: () => import('@/views/BasicManage/ProtocolManage'),
+        name: 'ProtocolManage',
+        meta: { title: '协议管理', icon: 'dashboard', affix: true }
       }
     ]
   },

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

@@ -1,4 +1,5 @@
 <template>
+    <!-- 往来单位 新增、编辑 表单组件 -->
     <div>
         <el-form
             label-width="100px"
@@ -46,6 +47,7 @@
 
 <script>
 export default {
+    name: 'FormContactUnits',
     data() {
         return {
             contactUnitsParams: {

src/views/BasicManage/ContactUnits/index.vue

@@ -27,6 +27,7 @@ import { formLabel, columnsList, dialogConfig } from './config'
 import { commonMixin } from '@/mixins/common.js'
 import FormContactUnits from './components/form-contact-units.vue'
 export default {
+    name: 'ContactUnits',
     mixins: [commonMixin], // 混入公共方法和数据
     components: { FormContactUnits },
     data() {

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

@@ -1,4 +1,5 @@
 <template>
+    <!-- 工程管理 新增、编辑 表单组件 -->
     <div>
         <el-form
             label-width="100px"
@@ -110,6 +111,7 @@
 
 <script>
 export default {
+    name: 'FormProject',
     data() {
         return {
             projectParams: {

src/views/BasicManage/ProjectManage/config.js

@@ -18,7 +18,4 @@ export const dialogConfig = {
     outerWidth: '70%',
     outerTitle: '',
     outerVisible: false,
-    innerWidth: '50%',
-    innerTitle: '',
-    innerVisible: false,
 }

src/views/BasicManage/ProjectManage/index.vue

@@ -8,6 +8,10 @@
                 <el-button>导入</el-button>
                 <el-button>导出</el-button>
             </template>
+            <template slot="handle" slot-scope="{ data }">
+                <el-button type="primary" size="mini">编辑</el-button>
+                <el-button type="danger" size="mini">删除</el-button>
+            </template>
         </TableModel>
 
         <!-- 新增弹框 -->
@@ -27,6 +31,7 @@ import { formLabel, columnsList, dialogConfig } from './config'
 import { commonMixin } from '@/mixins/common.js'
 import FormProject from './components/form-project'
 export default {
+    name: 'ProjectManage',
     mixins: [commonMixin], // 混入公共方法和数据
     components: {
         FormProject,

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

@@ -0,0 +1,160 @@
+<template>
+    <!-- 协议管理 新增、编辑 表单组件 -->
+    <div>
+        <el-form
+            label-width="100px"
+            size="medium"
+            ref="protocolParamsRef"
+            :model="protocolParams"
+            :rules="protocolParamsRules"
+        >
+            <el-row type="flex" justify="space-between" :gutter="24">
+                <el-col :span="12">
+                    <el-form-item label="租赁单位" prop="pro_name">
+                        <el-input v-model="protocolParams.pro_name" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="授权人" prop="pro_unit">
+                        <el-input v-model="protocolParams.pro_unit" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <el-row :gutter="24">
+                <el-col :span="12">
+                    <el-form-item label="租赁工程" prop="pro_type_of">
+                        <el-select
+                            v-model="protocolParams.pro_type_of"
+                        ></el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="联系电话" prop="pro_type">
+                        <el-select
+                            v-model="protocolParams.pro_type"
+                        ></el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="12">
+                    <el-form-item label="合同编号" prop="pro_type">
+                        <el-select
+                            v-model="protocolParams.pro_type"
+                        ></el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="租赁期限" prop="pro_nature">
+                        <el-select
+                            v-model="protocolParams.pro_nature"
+                        ></el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="12">
+                    <el-form-item label="开始日期" prop="pro_user">
+                        <el-input v-model="protocolParams.pro_user" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="备注" prop="pro_phone">
+                        <el-input v-model="protocolParams.pro_phone" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="12">
+                    <el-form-item label="合同附件">
+                        <el-input />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12"> </el-col>
+            </el-row>
+
+            <el-form-item>
+                <el-button type="success" @click="onSubmit">确认</el-button>
+                <el-button
+                    @click="
+                        () => {
+                            this.$emit('closeDialog')
+                        }
+                    "
+                    >取消</el-button
+                >
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'FormProtocol',
+    data() {
+        return {
+            protocolParams: {
+                pro_name: '',
+                pro_code: '',
+                pro_unit: '',
+                pro_type_of: '',
+                pro_type: '',
+                pro_nature: '',
+                pro_user: '',
+                pro_phone: '',
+            },
+            // 校验规则
+            protocolParamsRules: {
+                pro_name: [
+                    {
+                        required: true,
+                        message: '请选择租赁单位',
+                        trigger: 'blur',
+                    },
+                ],
+                pro_unit: [
+                    {
+                        required: true,
+                        message: '请输入授权人',
+                        trigger: 'blur',
+                    },
+                ],
+                pro_type_of: [
+                    {
+                        required: true,
+                        message: '请选择租赁工程',
+                        trigger: 'blur',
+                    },
+                ],
+                pro_type: [
+                    {
+                        required: true,
+                        message: '请输入联系电话',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+        }
+    },
+    methods: {
+        /** 确认按钮 */
+        onSubmit() {
+            this.$refs.protocolParamsRef.validate((valid) => {
+                if (valid) {
+                    console.log('校验通过')
+                    // 1. 表单校验通过后调后台 Api
+                    // 2. 成功之后通知父组件关闭弹框
+                    this.$emit('closeDialog')
+                }
+            })
+        },
+    },
+}
+</script>
+
+<style scoped>
+::v-deep .el-select {
+    width: 100%;
+}
+</style>

src/views/BasicManage/ProtocolManage/config.js

@@ -0,0 +1,26 @@
+
+export const formLabel = [
+    { f_label: '关键字', f_model: 'keywords', f_type: 'date' },
+    { f_label: '关键字', f_model: 'keywords', f_type: 'ipt' },
+    { f_label: '状态', f_model: 'keywords', f_type: 'sel' },
+]
+export const columnsList = [
+    { t_props: 'scrapNum', t_label: '协议签订时间', },
+    { t_props: '', t_label: '协议编号' },
+    { t_props: 'repairNum', t_label: '合同编号' },
+    { t_props: 'unitName', t_label: '租赁单位', },
+    { t_props: 'projectName', t_label: '租赁工程', },
+    { t_props: 'itemType', t_label: '开始日期', },
+    { t_props: 'itemType', t_label: '租赁期限（天）', },
+    { t_props: 'itemType', t_label: '授权人', },
+    { t_props: 'itemType', t_label: '授权人电话', },
+    { t_props: 'itemType', t_label: '租赁单位类型', },
+    { t_props: 'itemType', t_label: '附件图片', },
+    { t_props: 'itemType', t_label: '备注', },
+]
+
+export const dialogConfig = {
+    outerWidth: '70%',
+    outerTitle: '',
+    outerVisible: false,
+}

src/views/BasicManage/ProtocolManage/index.vue

@@ -1,10 +1,61 @@
 <template>
     <!-- 协议管理 -->
-    <div> 协议管理 </div>
+    <div class="app-container">
+        <!-- 表格 -->
+        <TableModel :formLabel="formLabel" :columnsList="columnsList">
+            <template slot="btn">
+                <el-button type="primary" @click="addProtocol()"
+                    >新增协议</el-button
+                >
+                <el-button>导出</el-button>
+            </template>
+            <template slot="handle" slot-scope="{ data }">
+                <el-button type="primary" size="mini">查看</el-button>
+                <el-button type="primary" size="mini">编辑</el-button>
+                <el-button type="danger" size="mini">删除</el-button>
+            </template>
+        </TableModel>
+
+        <!-- 新增弹框 -->
+        <DialogModel
+            :dialogConfig="dialogConfig"
+            @closeDialogOuter="closeDialogOuter"
+        >
+            <template slot="outerContent">
+                <FormProtocol @closeDialog="closeDialog" />
+            </template>
+        </DialogModel>
+    </div>
 </template>
 
 <script>
-export default {}
+import { formLabel, columnsList, dialogConfig } from './config'
+import { commonMixin } from '@/mixins/common.js'
+import FormProtocol from './components/form-protocol'
+export default {
+    name: 'ProtocolManage',
+    mixins: [commonMixin], // 混入公共方法和数据
+    components: {
+        FormProtocol,
+    },
+    data() {
+        return {
+            formLabel,
+            columnsList,
+            dialogConfig,
+        }
+    },
+    methods: {
+        /** 新增协议 */
+        addProtocol() {
+            this.dialogConfig.outerTitle = '新增协议'
+            this.dialogConfig.outerVisible = true
+            console.log('新增协议---')
+        },
+        /** 关闭弹框 */
+        closeDialog() {
+            this.dialogConfig.outerVisible = false
+        },
+    },
+}
 </script>
-
-<style></style>

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

@@ -0,0 +1,80 @@
+<template>
+    <!-- 单位类型 新增、编辑 表单组件 -->
+    <div>
+        <el-form
+            label-width="120px"
+            size="medium"
+            ref="unitsTypeParamsRef"
+            :model="unitsTypeParams"
+            :rules="unitsTypeParamsRules"
+        >
+            <el-form-item label="单位类型名称" prop="pro_type_name">
+                <el-input v-model="unitsTypeParams.pro_type_name" />
+            </el-form-item>
+
+            <el-form-item label="启用状态" prop="pro_type">
+                <el-switch
+                    active-text="启用"
+                    inactive-text="禁用"
+                    v-model="unitsTypeParams.pro_type"
+                ></el-switch>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="onSubmit">确定</el-button>
+                <el-button
+                    @click="
+                        () => {
+                            this.$emit('closeDialog')
+                        }
+                    "
+                    >取消</el-button
+                >
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'FormUnitsType',
+    data() {
+        return {
+            unitsTypeParams: {
+                pro_type_name: '',
+
+                pro_type: '',
+            },
+            // 校验规则
+            unitsTypeParamsRules: {
+                pro_type_name: [
+                    {
+                        required: true,
+                        message: '请输入单位类型名称',
+                        trigger: 'blur',
+                    },
+                ],
+                pro_type: [
+                    {
+                        required: true,
+                        message: '请选择施工单位',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+        }
+    },
+    methods: {
+        /** 确认按钮 */
+        onSubmit() {
+            this.$refs.unitsTypeParamsRef.validate((valid) => {
+                if (valid) {
+                    console.log('校验通过')
+                    // 1. 表单校验通过后调后台 Api
+                    // 2. 成功之后通知父组件关闭弹框
+                    this.$emit('closeDialog')
+                }
+            })
+        },
+    },
+}
+</script>

src/views/BasicManage/UnitType/config.js

@@ -0,0 +1,14 @@
+
+export const formLabel = [
+    { f_label: '单位名称', f_model: 'keywords', f_type: 'ipt' },
+]
+export const columnsList = [
+    { t_props: 'scrapNum', t_label: '单位类型', },
+    { t_props: '', t_label: '状态' },
+]
+
+export const dialogConfig = {
+    outerWidth: '40%',
+    outerTitle: '',
+    outerVisible: false,
+}

src/views/BasicManage/UnitType/index.vue

@@ -1,10 +1,60 @@
 <template>
     <!-- 单位类型 -->
-    <div> 单位类型 </div>
+    <div class="app-container">
+        <!-- 表格 -->
+        <TableModel :formLabel="formLabel" :columnsList="columnsList">
+            <template slot="btn">
+                <el-button type="primary" @click="addUnitType()"
+                    >新建</el-button
+                >
+                <el-button>导入</el-button>
+                <el-button>导出</el-button>
+            </template>
+            <template slot="handle" slot-scope="{ data }">
+                <el-button type="primary" size="mini">编辑</el-button>
+                <el-button type="danger" size="mini">删除</el-button>
+            </template>
+        </TableModel>
+
+        <!-- 新增弹框 -->
+        <DialogModel
+            :dialogConfig="dialogConfig"
+            @closeDialogOuter="closeDialogOuter"
+        >
+            <template slot="outerContent">
+                <FormUnitsType @closeDialog="closeDialog" />
+            </template>
+        </DialogModel>
+    </div>
 </template>
 
 <script>
-export default {}
+import { formLabel, columnsList, dialogConfig } from './config'
+import { commonMixin } from '@/mixins/common.js'
+import FormUnitsType from './components/form-units-type'
+export default {
+    name: 'UnitType',
+    mixins: [commonMixin], // 混入公共方法和数据
+    components: {
+        FormUnitsType,
+    },
+    data() {
+        return {
+            formLabel,
+            columnsList,
+            dialogConfig,
+        }
+    },
+    methods: {
+        /** 新建单位类型 */
+        addUnitType() {
+            this.dialogConfig.outerTitle = '新建单位类型'
+            this.dialogConfig.outerVisible = true
+        },
+        /** 关闭弹框 */
+        closeDialog() {
+            this.dialogConfig.outerVisible = false
+        },
+    },
+}
 </script>
-
-<style></style>