bonus-ui/src/views/claimAndRefund/receive/agreement.vue

835 lines
30 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container" id="agreement">
<el-row>
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="80px"
>
<el-form-item label="关键字" prop="keyWord">
<el-input
v-model="queryParams.keyWord"
placeholder="请输入关键字"
clearable
maxlength="50"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="协议编号" prop="agreementCode">
<el-input
v-model="queryParams.agreementCode"
placeholder="请输入协议编号"
clearable
maxlength="50"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="往来单位" prop="unitId">
<el-select
v-model="queryParams.unitId"
placeholder="请选择往来单位"
clearable
>
<el-option
v-for="(item, i) in unitList"
:key="i"
:label="item.unitName"
:value="item.unitId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="工程名称" prop="projectId">
<el-select
v-model="queryParams.projectId"
placeholder="请选择工程名称"
clearable
>
<el-option
v-for="(item, i) in projectList"
:key="i"
:label="item.projectName"
:value="item.projectId"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>查询</el-button
>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
</el-row>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新建</el-button
>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="el-icon-edit"-->
<!-- size="mini"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- v-hasPermi="['store:labelType:edit']"-->
<!-- >修改</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="danger"-->
<!-- plain-->
<!-- icon="el-icon-delete"-->
<!-- size="mini"-->
<!-- :disabled="multiple"-->
<!-- @click="handleDelete"-->
<!-- v-hasPermi="['store:labelType:remove']"-->
<!-- >删除</el-button>-->
<!-- </el-col>-->
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="agreementList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column
label="序号"
align="center"
width="80"
type="index"
>
<template scope="scope">
<span>{{
(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
}}</span>
</template>
</el-table-column> -->
<el-table-column
align="center"
label="序号"
type="index"
:index="
indexContinuation(queryParams.pageNum, queryParams.pageSize)
"
/>
<el-table-column
label="协议编号"
align="center"
prop="agreementCode"
:show-overflow-tooltip="true"
/>
<el-table-column
label="合同编号"
align="center"
prop="contractCode"
:show-overflow-tooltip="true"
/>
<el-table-column
label="协议类型"
align="center"
prop="protocol"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<span v-if="scope.row.protocol == 1">内部单位</span>
<span v-if="scope.row.protocol == 2">外部单位</span>
</template>
</el-table-column>
<el-table-column
label="附件图片"
align="center"
prop="fileName"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row.imgUrlList"
:key="index"
@click="openImg(item)"
style="color: #02a7f0; cursor: pointer"
>{{ scope.row.imgNameList[index] }}</div
>
</template>
</el-table-column>
<el-table-column
label="签订日期"
align="center"
prop="signTime"
:show-overflow-tooltip="true"
/>
<el-table-column
label="往来单位"
align="center"
prop="unitName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="工程名称"
align="center"
prop="projectName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="开始日期"
align="center"
prop="planStartTime"
:show-overflow-tooltip="true"
/>
<!-- <el-table-column
label="租赁期限(天)"
align="center"
prop="leaseDay"
:show-overflow-tooltip="true"
/>-->
<el-table-column
label="授权人"
align="center"
prop="authPerson"
:show-overflow-tooltip="true"
/>
<el-table-column
label="联系电话 "
align="center"
prop="phone"
:show-overflow-tooltip="true"
/>
<el-table-column
label="备注"
align="center"
prop="remark"
:show-overflow-tooltip="true"
/>
<el-table-column
label="操作"
align="center"
width="200"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 新增编辑弹窗 -->
<el-dialog
:title="title"
:visible.sync="open"
width="1200px"
append-to-body
:close-on-click-modal="false"
>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="120px"
>
<el-row>
<el-col :span="12">
<el-form-item label="合同编号" prop="contractCode">
<el-input
maxlength="50"
v-model="form.contractCode"
placeholder="请输入合同编号"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="往来单位" prop="unitId">
<el-select
v-model="form.unitId"
filterable
placeholder="请选择往来单位"
style="width: 100%"
>
<el-option
v-for="item in unitList"
:key="item.unitId"
:label="item.unitName"
:value="item.unitId"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="工程名称" prop="projectId">
<el-select
v-model="form.projectId"
filterable
placeholder="请选择工程名称"
style="width: 100%"
>
<el-option
v-for="item in projectList"
:key="item.projectId"
:label="item.projectName"
:value="item.projectId"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="协议类型" prop="protocol">
<el-select
v-model="form.protocol"
filterable
placeholder="请选择协议类型"
style="width: 100%"
>
<el-option
v-for="item in protocolList"
:key="item.protocolId"
:label="item.protocolName"
:value="item.protocolId"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="开始日期" prop="planStartTime">
<el-date-picker
style="width: 100%"
v-model="form.planStartTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择开始日期"
></el-date-picker>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="租赁期限(天)" prop="leaseDay">
<el-input-number
v-model="form.leaseDay"
placeholder="请输入租赁期限(天)"
controls-position="right"
:min="0"
:max="9999"
style="width: 100%"
/>
</el-form-item>
</el-col>-->
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="签订日期" prop="signTime">
<el-date-picker
v-model="form.signTime"
style="width: 100%"
value-format="yyyy-MM-dd"
type="date"
placeholder="请选择签订日期"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="授权人" prop="authPerson">
<el-input
maxlength="50"
v-model="form.authPerson"
placeholder="请输入授权人"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="联系方式" prop="phone">
<el-input
v-model="form.phone"
placeholder="请输入联系方式"
maxlength="11"
onkeyup="this.value = this.value.replace(/[^\d]/g,'');"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入备注"
maxlength="100"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="20">
<el-form-item label="合同照片" prop="fileName">
<el-upload
:http-request="
(obj) => imgUpLoad(obj, 'fileUrl')
"
action="#"
:limit="3"
:file-list="fileList"
:show-file-list="true"
list-type="picture-card"
accept=".png, .jpg, .jpeg"
:on-success="handleAvatarSuccess"
:class="{ disabled: uploadDisabled }"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i
class="el-icon-plus avatar-uploader-icon"
></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" height="650px" :src="dialogImageUrl" alt />
</el-dialog>
</div>
</template>
<script>
import {
getAgreementList,
getAgreementInfoId,
addAgreement,
updateAgreement,
removeAgreement,
getUnitList,
getProjectList,
} from '@/api/claimAndRefund/receive'
import { imgUpLoad, fileUpLoad } from '@/api/system/upload'
export default {
name: 'Agreement',
dicts: ['sys_normal_disable'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 往来单位数据
unitList: [],
// 工程数据
projectList: [],
// 表格数据
agreementList: [],
protocolList: [
{ protocolId: 1, protocolName: '内部单位' },
{ protocolId: 2, protocolName: '外部单位' },
],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 日期范围
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
keyWord: undefined,
agreementCode: '',
projectId: '',
unitId: '',
},
// 表单参数
form: {},
//图片上传
uploadHeader: process.env.VUE_APP_BASE_API,
imageUrl: '',
imageName: '',
fileList: [],
checkUrlList: [],
checkUrlNameList: [],
dialogImageUrl: '',
dialogVisible: false,
//上传地址
// uploadUrl:'http://192.168.0.14:21624/system',//线上服务器地址+system
// uploadUrl:'http://112.29.103.165:21624/system',//线上服务器地址+system
uploadUrl: process.env.VUE_APP_BASE_API + '/system', // 上传的图片服务器地址
// 表单校验
rules: {
contractCode: [
{
required: true,
message: '合同编号不能为空',
trigger: 'blur',
},
],
signTime: [
{
required: true,
message: '签订日期不能为空',
trigger: 'blur',
},
],
unitId: [
{
required: true,
message: '往来单位不能为空',
trigger: 'blur',
},
],
projectId: [
{
required: true,
message: '工程名称不能为空',
trigger: 'blur',
},
],
},
peopleOpen: false,
noticeOpen: false,
nform: {
notice: '',
},
nrules: {
notice: [
{
required: true,
message: '通知内容不能为空',
trigger: 'blur',
},
],
},
deptName: undefined,
}
},
computed: {
//图片上传1张后隐藏上传框
uploadDisabled() {
return this.checkUrlList.length > 4
},
},
created() {
this.getList()
this.getUnitList()
this.getProjectList()
},
methods: {
//获取单位类型 ,getUnitList, getProjectList
getUnitList() {
getUnitList().then((response) => {
this.unitList = response.data
})
},
getProjectList() {
getProjectList().then((response) => {
this.projectList = response.data
})
},
/** 查询字典类型列表 */
getList() {
this.loading = true
getAgreementList(this.queryParams).then((response) => {
this.agreementList = response.rows
this.agreementList.forEach((item) => {
if (item.fileUrl) {
item.imgUrlList = item.fileUrl.split(',')
item.imgNameList = item.fileName.split(',')
}
})
this.total = response.total
this.loading = false
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
agreementId: undefined,
dictName: undefined,
dictType: undefined,
fileUrl: undefined,
fileName: undefined,
status: '0',
remark: undefined,
}
this.fileList = []
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
// this.dateRange = []
this.resetForm('queryForm')
this.queryParams.pageNum = 1
this.queryParams.pageSize = 10
this.getList()
// this.handleQuery()
},
handleNotice() {
this.noticeOpen = true
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.fileList = []
this.checkUrlList = []
this.checkUrlNameList = []
this.open = true
this.title = '新建'
},
// 图片上传
imgUpLoad(param, name, index) {
// console.log(param,'image')
param.type = 'ma'
imgUpLoad(param)
.then((res) => {
if (res.code == 200) {
this.checkUrlList.push(res.data.fileUrl)
this.checkUrlNameList.push(res.data.fileName)
} else {
// this.$msgError(res.msg)
this.$modal.msgError(res.msg)
}
})
.catch((error) => {
// this.$msgError(error)
this.$modal.msgError(error)
})
},
handleAvatarSuccess(res, file) {
console.log('success')
},
handleExceed(files, fileList) {
this.$message.warning('最多只可以上传五张图片')
},
handleRemove(file, fileList) {
let sum = 0
this.checkUrlNameList.forEach((item, index) => {
if (item == file.name) {
sum = index
}
})
this.checkUrlNameList.splice(sum, 1)
this.checkUrlList.splice(sum, 1)
},
//图片点击查看
handlePictureCardPreview(file) {
console.log(file)
this.dialogImageUrl = file.url
this.dialogVisible = true
},
//图片查看
openImg(url) {
this.dialogImageUrl = this.uploadUrl + url
this.dialogVisible = true
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.agreementId)
console.log(this.ids)
this.single = selection.length != 1
this.multiple = !selection.length
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
// const agreementId = row.agreementId
let param = {
agreementId: row.agreementId,
}
getAgreementInfoId(param).then((response) => {
this.form = response.data
if (response.data.leaseDay == null) {
this.form.leaseDay = undefined
}
this.fileList = []
this.checkUrlList = []
this.checkUrlNameList = []
if (
response.data &&
typeof response.data.fileUrl === 'string' &&
typeof response.data.fileName === 'string'
) {
try {
if (response.data.fileUrl != '') {
let [urlArr, nameArr] = [
response.data.fileUrl,
response.data.fileName,
].map((str) => str.split(','))
if (urlArr.length !== nameArr.length) {
return
}
console.log(urlArr)
let fileList = urlArr.map((url, i) => ({
name: nameArr[i],
url: `${this.uploadUrl}${url}`,
}))
console.log(fileList)
this.fileList = fileList
this.checkUrlList = urlArr
this.checkUrlNameList = nameArr
}
} catch (error) {
console.error('处理合同照片时发生错误:', error)
}
}
this.open = true
this.title = '编辑'
})
},
/** 提交按钮 */
submitForm: function () {
this.form.fileUrl = this.checkUrlList.join(',')
this.form.fileName = this.checkUrlNameList.join(',')
this.$refs['form'].validate((valid) => {
if (valid) {
if (this.form.agreementId != undefined) {
updateAgreement(this.form).then((response) => {
this.$modal.msgSuccess('修改成功')
this.open = false
this.getList()
})
} else {
addAgreement(this.form).then((response) => {
this.$modal.msgSuccess('新增成功')
this.open = false
this.getList()
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
// const agreementId = row.agreementId;
let param = {
agreementId: row.agreementId + '',
}
this.$modal
.confirm('是否确认删除所选择的数据项?')
.then(function () {
return removeAgreement(param)
})
.then(() => {
this.getList()
this.$modal.msgSuccess('删除成功')
})
.catch(() => {})
},
/** 导出按钮操作 */
handleExport() {
if (this.ids.length) {
this.download(
'material/agreementInfo/export',
{
dataCondition: this.ids,
},
`协议_${new Date().getTime()}.xlsx`,
)
} else {
this.$modal.msgWarning('请选择要导出的数据')
}
},
},
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
width: 60px !important;
margin-bottom: 10px;
}
//隐藏图片上传框的css
::v-deep.disabled {
.el-upload--picture-card {
display: none;
}
}
</style>