表格组件封装完善，协议管理，类型管理页面创建
This commit is contained in:
BianLzhaoMin
parent
949a04de73
commit
26480bc213
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<!-- 往来单位 新增、编辑 表单组件 -->
|
||||
<div>
|
||||
<el-form
|
||||
label-width="100px"
|
||||
|
|
@ -46,6 +47,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormContactUnits',
|
||||
data() {
|
||||
return {
|
||||
contactUnitsParams: {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<!-- 工程管理 新增、编辑 表单组件 -->
|
||||
<div>
|
||||
<el-form
|
||||
label-width="100px"
|
||||
|
|
@ -110,6 +111,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormProject',
|
||||
data() {
|
||||
return {
|
||||
projectParams: {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,4 @@ export const dialogConfig = {
|
|||
outerWidth: '70%',
|
||||
outerTitle: '',
|
||||
outerVisible: false,
|
||||
innerWidth: '50%',
|
||||
innerTitle: '',
|
||||
innerVisible: false,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue