分包商出入场页面基础逻辑完善
This commit is contained in:
BianLzhaoMin
parent
80f50bcf8c
commit
1039b9d70c
|
|
@ -102,6 +102,7 @@
|
|||
查询
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
size="mini"
|
||||
type="warning"
|
||||
icon="el-icon-refresh"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ export const formLabel = [
|
|||
{
|
||||
f_label: '关键词',
|
||||
f_model: 'keyword',
|
||||
f_type: 'input',
|
||||
f_type: 'ipt',
|
||||
isShow: false, // 是否展示label
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,176 @@
|
|||
<template>
|
||||
<!-- 新增或修改标段工程表单 -->
|
||||
<div>
|
||||
<el-form
|
||||
label-width="180px"
|
||||
ref="addOrEditFormRef"
|
||||
:model="addOrEditForm"
|
||||
:rules="addOrEditFormRules"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="分包商合同名称" prop="htName">
|
||||
<el-input
|
||||
clearable
|
||||
placeholder="请输入分包商合同名称"
|
||||
v-model="addOrEditForm.htName"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="分包名称" prop="subName">
|
||||
<el-input
|
||||
clearable
|
||||
placeholder="请输入分包名称"
|
||||
v-model="addOrEditForm.subName"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="工程名称" prop="projectName">
|
||||
<el-input
|
||||
clearable
|
||||
placeholder="请输入工程名称"
|
||||
v-model="addOrEditForm.projectName"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="入场日期" prop="entryDate">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
style="width: 100%"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择入场日期"
|
||||
v-model="addOrEditForm.entryDate"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="法定代表人授权委托书"
|
||||
prop="businessLicense"
|
||||
>
|
||||
<UploadImg
|
||||
:limit="30"
|
||||
:file-size="10"
|
||||
:multiple="true"
|
||||
:is-detail="formType === 2"
|
||||
:file-type="['jpg', 'png', 'jpeg']"
|
||||
:upload-file-url="uploadFileUrl"
|
||||
:file-list.sync="addOrEditForm.businessLicense"
|
||||
:is-uploaded="
|
||||
addOrEditForm.businessLicense.length >= 2
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UploadImg from '@/components/UploadImg'
|
||||
import {
|
||||
addSubBaseInfoAPI,
|
||||
editSubBaseInfoAPI,
|
||||
} from '@/api/basic-manage/sub-manage/sub-base-info'
|
||||
export default {
|
||||
name: 'AddOrEditForm',
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formType: 1,
|
||||
uploadFileUrl:
|
||||
process.env.VUE_APP_BASE_API + '/system/file/uploadFiles',
|
||||
addOrEditForm: {
|
||||
htName: '',
|
||||
subName: '',
|
||||
projectName: '',
|
||||
entryDate: '',
|
||||
businessLicense: [],
|
||||
},
|
||||
addOrEditFormRules: {
|
||||
htName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分包商合同名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
subName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分包商名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
projectName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入工程名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
entryDate: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择入场日期',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
businessLicense: [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传法定代表人授权委托书',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 确定按钮
|
||||
onHandleConfirmAddOrEditFun() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs.addOrEditFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
console.log(this.addOrEditForm)
|
||||
|
||||
const API =
|
||||
this.formType === 1
|
||||
? addSubBaseInfoAPI
|
||||
: editSubBaseInfoAPI
|
||||
const res = await API(this.addOrEditForm)
|
||||
console.log(res, '新增或修改结果')
|
||||
if (res.code === 200) {
|
||||
resolve()
|
||||
} else {
|
||||
reject(new Error(res.message))
|
||||
}
|
||||
} else {
|
||||
reject(new Error('表单验证失败'))
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.$refs.addOrEditFormRef.resetFields()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
export const formLabel = [
|
||||
{
|
||||
f_label: '分包合同',
|
||||
f_model: 'htName',
|
||||
f_type: 'ipt',
|
||||
isShow: false, // 是否展示label
|
||||
},
|
||||
{
|
||||
f_label: '分包商',
|
||||
f_model: 'subName',
|
||||
f_type: 'ipt',
|
||||
isShow: false, // 是否展示label
|
||||
},
|
||||
{
|
||||
f_label: '工程名称',
|
||||
f_model: 'projectName',
|
||||
f_type: 'ipt',
|
||||
isShow: false, // 是否展示label
|
||||
},
|
||||
{
|
||||
f_label: '状态',
|
||||
f_model: 'status',
|
||||
f_type: 'sel',
|
||||
isShow: false, // 是否展示label
|
||||
},
|
||||
]
|
||||
|
||||
export const columnsList = [
|
||||
{ t_props: 'projectName', t_label: '分包商合同名称' },
|
||||
{ t_props: 'xmb', t_label: '分包商名称' },
|
||||
{ t_props: 'name', t_label: '工程名称' },
|
||||
{ t_props: 'type', t_label: '出入场状态' },
|
||||
{
|
||||
t_props: 'businessLicense',
|
||||
t_label: '分包入场时间',
|
||||
},
|
||||
{ t_props: 'idCard', t_label: '授权委托书', t_slot: 'idCard' },
|
||||
{
|
||||
t_props: 'electronicStamp',
|
||||
t_label: '分包出场时间',
|
||||
},
|
||||
{
|
||||
t_props: 'electronicSignature',
|
||||
t_label: '工资已支付完成承诺书',
|
||||
},
|
||||
]
|
||||
|
||||
export const testTableList = [
|
||||
{
|
||||
projectName: '总工程名称',
|
||||
level: '等级3',
|
||||
xmb: 'xxx项目部',
|
||||
name: '110kv工程',
|
||||
type: '基建变电',
|
||||
address: '安徽省合肥市110k工程',
|
||||
status: '在建',
|
||||
businessLicense: '已上传',
|
||||
idCard: '已上传',
|
||||
electronicStamp: '已上传',
|
||||
electronicSignature: '未上传',
|
||||
},
|
||||
{
|
||||
projectName: '总工程名称21',
|
||||
level: '等级3',
|
||||
xmb: 'xxx项目部',
|
||||
name: '110kv工程',
|
||||
type: '基建变电',
|
||||
address: '安徽省合肥市110k工程',
|
||||
status: '在建',
|
||||
businessLicense: '已上传',
|
||||
idCard: '已上传',
|
||||
electronicStamp: '已上传',
|
||||
electronicSignature: '未上传',
|
||||
},
|
||||
{
|
||||
projectName: '总工程名称3',
|
||||
level: '等级3',
|
||||
xmb: 'xxx项目部',
|
||||
name: '110kv工程',
|
||||
type: '基建变电',
|
||||
address: '安徽省合肥市110k工程',
|
||||
status: '在建',
|
||||
businessLicense: '已上传',
|
||||
idCard: '已上传',
|
||||
electronicStamp: '已上传',
|
||||
electronicSignature: '未上传',
|
||||
},
|
||||
]
|
||||
|
||||
export const dialogConfig = {
|
||||
outerVisible: false,
|
||||
outerTitle: '',
|
||||
outerWidth: '60%',
|
||||
minHeight: '',
|
||||
maxHeight: '',
|
||||
}
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
<template>
|
||||
<!-- 新增或修改标段工程表单 -->
|
||||
<div>
|
||||
<el-form
|
||||
label-width="220px"
|
||||
ref="addOrEditFormRef"
|
||||
:model="addOrEditForm"
|
||||
:rules="addOrEditFormRules"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="分包商合同名称" prop="htName">
|
||||
<el-input
|
||||
clearable
|
||||
disabled
|
||||
placeholder="请输入分包商合同名称"
|
||||
v-model="addOrEditForm.htName"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="分包名称" prop="subName">
|
||||
<el-input
|
||||
clearable
|
||||
disabled
|
||||
placeholder="请输入分包名称"
|
||||
v-model="addOrEditForm.subName"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="工程名称" prop="projectName">
|
||||
<el-input
|
||||
clearable
|
||||
disabled
|
||||
placeholder="请输入工程名称"
|
||||
v-model="addOrEditForm.projectName"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="出场日期" prop="exitDate">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
style="width: 100%"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择出场日期"
|
||||
v-model="addOrEditForm.exitDate"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
prop="businessLicense"
|
||||
label="农民工工资已支付完成承诺书"
|
||||
>
|
||||
<UploadImg
|
||||
:limit="30"
|
||||
:file-size="10"
|
||||
:multiple="true"
|
||||
:file-type="['jpg', 'png', 'jpeg']"
|
||||
:upload-file-url="uploadFileUrl"
|
||||
:file-list.sync="addOrEditForm.businessLicense"
|
||||
:is-uploaded="
|
||||
addOrEditForm.businessLicense.length >= 2
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UploadImg from '@/components/UploadImg'
|
||||
import {
|
||||
addSubBaseInfoAPI,
|
||||
editSubBaseInfoAPI,
|
||||
} from '@/api/basic-manage/sub-manage/sub-base-info'
|
||||
export default {
|
||||
name: 'AddOrEditForm',
|
||||
components: {
|
||||
UploadImg,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formType: 1,
|
||||
uploadFileUrl:
|
||||
process.env.VUE_APP_BASE_API + '/system/file/uploadFiles',
|
||||
addOrEditForm: {
|
||||
htName: '',
|
||||
subName: '',
|
||||
projectName: '',
|
||||
entryDate: '',
|
||||
businessLicense: [],
|
||||
},
|
||||
addOrEditFormRules: {
|
||||
htName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分包商合同名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
subName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入分包商名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
projectName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入工程名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
entryDate: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择入场日期',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
businessLicense: [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传法定代表人授权委托书',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 确定按钮
|
||||
onHandleConfirmAddOrEditFun() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs.addOrEditFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
console.log(this.addOrEditForm)
|
||||
|
||||
// const API =
|
||||
// this.formType === 1
|
||||
// ? addSubBaseInfoAPI
|
||||
// : editSubBaseInfoAPI
|
||||
// const res = await API(this.addOrEditForm)
|
||||
// console.log(res, '新增或修改结果')
|
||||
// if (res.code === 200) {
|
||||
// resolve()
|
||||
// } else {
|
||||
// reject(new Error(res.message))
|
||||
// }
|
||||
} else {
|
||||
reject(new Error('表单验证失败'))
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.$refs.addOrEditFormRef.resetFields()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,10 +1,209 @@
|
|||
<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="getSubBaseInfoListAPI"
|
||||
>
|
||||
<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="item" slot-scope="{ data }" v-for="item in slots">
|
||||
<span
|
||||
:style="{
|
||||
color: data[item] === '已上传' ? '#67C23A' : '#F56C6C',
|
||||
}"
|
||||
:key="item"
|
||||
style="font-size: 12px"
|
||||
@click="onHandleViewLotProject(data)"
|
||||
>
|
||||
{{ data[item] }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button
|
||||
plain
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="el-icon-check"
|
||||
@click="onHandleExit(data)"
|
||||
>
|
||||
出场
|
||||
</el-button>
|
||||
<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>
|
||||
<el-button size="mini" type="primary" icon="el-icon-view">
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
</TableModel>
|
||||
|
||||
<DialogModel
|
||||
:dialogConfig="dialogConfig"
|
||||
@closeDialogOuter="handleCloseDialogOuter"
|
||||
>
|
||||
<template slot="outerContent">
|
||||
<AddOrEditForm
|
||||
ref="addOrEditFormContentRef"
|
||||
v-if="dialogConfig.outerTitle !== '出场'"
|
||||
/>
|
||||
<ExitForm ref="exitFormContentRef" v-else />
|
||||
|
||||
<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 AddOrEditForm from './add-or-edit-form'
|
||||
import ExitForm from './exit-form'
|
||||
import { formLabel, columnsList, dialogConfig, testTableList } from './config'
|
||||
import {
|
||||
deleteSubBaseInfoAPI,
|
||||
getSubBaseInfoListAPI,
|
||||
} from '@/api/basic-manage/sub-manage/sub-base-info'
|
||||
export default {
|
||||
name: 'SubEntryAndExit',
|
||||
components: {
|
||||
TableModel,
|
||||
DialogModel,
|
||||
AddOrEditForm,
|
||||
ExitForm,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
formLabel,
|
||||
columnsList,
|
||||
dialogConfig,
|
||||
testTableList,
|
||||
getSubBaseInfoListAPI,
|
||||
|
||||
slots: {
|
||||
idCard: 'idCard',
|
||||
},
|
||||
}
|
||||
},
|
||||
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 deleteSubBaseInfoAPI(data.id)
|
||||
console.log(res, '删除结果')
|
||||
if (res.code === 200) {
|
||||
this.$msgSuccess('删除成功')
|
||||
this.$refs.allProjectTableRef.getTableList() // 更新列表
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('取消')
|
||||
})
|
||||
},
|
||||
|
||||
// 出场
|
||||
onHandleExit(data) {
|
||||
this.dialogConfig.outerTitle = '出场'
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
|
||||
// 确定按钮
|
||||
async onHandleConfirmAddOrEdit() {
|
||||
try {
|
||||
if (this.dialogConfig.outerTitle === '新增标段工程') {
|
||||
this.$refs.addOrEditFormContentRef.formType =
|
||||
this.dialogConfig.outerTitle === '新增标段工程' ? 1 : 2
|
||||
await this.$refs.addOrEditFormContentRef.onHandleConfirmAddOrEditFun()
|
||||
}
|
||||
if (this.dialogConfig.outerTitle === '出场') {
|
||||
await this.$refs.exitFormContentRef.onHandleConfirmAddOrEditFun()
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('表单提交失败', error)
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭弹框
|
||||
handleCloseDialogOuter() {
|
||||
// 清除表单校验以及字段清除
|
||||
if (this.dialogConfig.outerTitle === '新增标段工程') {
|
||||
this.$refs.addOrEditFormContentRef.resetForm()
|
||||
} else if (this.dialogConfig.outerTitle === '出场') {
|
||||
this.$refs.exitFormContentRef.resetForm()
|
||||
}
|
||||
this.dialogConfig.outerVisible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue