532 lines
14 KiB
Vue
532 lines
14 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 寻源需求 -->
|
||
<el-form
|
||
:model="queryParams"
|
||
ref="queryFormRef"
|
||
:inline="true"
|
||
label-width="auto" size="small"
|
||
>
|
||
<!-- 表单搜索 -->
|
||
<el-card class="search-box">
|
||
<el-row>
|
||
<el-col :span="20">
|
||
<el-form-item prop="contractName" label="合同名称">
|
||
<el-input
|
||
v-model.trim="queryParams.contractName"
|
||
style="width: 100%"
|
||
clearable
|
||
placeholder="请输入合同名称"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item prop="contractCode" label="合同编号" style="margin-left: 10px">
|
||
<el-input
|
||
v-model.trim="queryParams.contractCode"
|
||
style="width: 100%"
|
||
clearable
|
||
placeholder="请输入合同编号"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item prop="createTime" label="更新时间" style="margin-left: 10px">
|
||
<el-date-picker
|
||
v-model="createTime"
|
||
type="daterange"
|
||
style="width: 100%"
|
||
range-separator="-"
|
||
value-format="YYYY-MM-DD"
|
||
start-placeholder="更新开始日期"
|
||
end-placeholder="更新结束日期"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4" style="text-align: right;">
|
||
<el-button class="primary-lease" size="mini" icon="el-icon-search" type="primary" @click="getContractListData">查询</el-button>
|
||
<el-button class="primary-lease" size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
|
||
</el-card>
|
||
</el-form>
|
||
<el-card class="content-box">
|
||
<el-row>
|
||
<el-col :span="24" style="text-align: right;">
|
||
<el-button class="primary-lease" type="primary" size="mini" @click="addContract">合同新建</el-button>
|
||
<a :href="uploadUrlTemp" download="安徽省机械化装备共享平台-协议模板">
|
||
<el-button
|
||
class="primary-lease"
|
||
type="primary"
|
||
style="margin-left: 20px"
|
||
size="mini"
|
||
>模板下载</el-button>
|
||
</a>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="table-container">
|
||
<!-- 表格 -->
|
||
<el-table
|
||
:data="qualityLis"
|
||
border stripe height="100%"
|
||
show-overflow-tooltip
|
||
>
|
||
<el-table-column align="center" label="合同编码">
|
||
<template scope="scope">
|
||
<a style="color: blue">
|
||
{{ scope.row.contractCode }}
|
||
</a>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="contractName" label="合同名称"/>
|
||
<el-table-column align="center" prop="status" label="状态">
|
||
<template scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.status"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
@change="handleStatusChange(scope.row)"
|
||
></el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="合同附件">
|
||
<template scope="scope">
|
||
<a
|
||
:href="scope.row.bmFileInfoList.length > 0 ? scope.row.bmFileInfoList[0].fileUrl : null"
|
||
target="_blank"
|
||
style="color: #00a288; text-decoration: underline"
|
||
>查看</a>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="createTime" label="创建时间"/>
|
||
<el-table-column align="center" prop="updateTime" label="更新时间"/>
|
||
<el-table-column align="center" label="操作" :width="220">
|
||
<template scope="scope">
|
||
<el-button size="mini" type="primary" @click="onContract(scope.row)">编辑</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="danger"
|
||
@click="onDelete(scope.row.id)"
|
||
v-if="scope.row.status == 0"
|
||
>删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="pagination-wrapper">
|
||
<pagination
|
||
:total="total"
|
||
@pagination="getContractListData"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
<!-- 新增和修改弹框 -->
|
||
<el-dialog
|
||
:visible.sync="dialogVisibleSettlein"
|
||
:title="settleinTitle"
|
||
width="40%"
|
||
destroy-on-close
|
||
class="centered-dialog"
|
||
:close-on-click-modal="false"
|
||
@close="onDialogClose"
|
||
>
|
||
<el-form
|
||
label-width="140px"
|
||
ref="addAndEditFormRef"
|
||
label-position="right"
|
||
:model="addAndEditForm"
|
||
:rules="addAndEditFormRules"
|
||
>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="合同模板名称：" prop="contractName">
|
||
<el-input
|
||
autocomplete="off"
|
||
style="width: 350px"
|
||
maxlength="30"
|
||
v-model="addAndEditForm.contractName"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
|
||
支持格式：word.单个文件大小不能超过2M，最多可上传1个
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-form-item label="附件" prop="fileInfoList">
|
||
<div style="flex: 1">
|
||
<FileUpload
|
||
v-model="addAndEditForm.fileInfoList"
|
||
:value="addAndEditForm.fileInfoList"
|
||
:limit="1"
|
||
:fileSize="2"
|
||
:fileType="['doc', 'docx']"
|
||
@input="handleFileUploadChange"
|
||
/>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<template slot="footer">
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" class="primary-lease" @click="onCancel">取消</el-button>
|
||
<el-button class="primary-lease" type="primary" @click="onSubmit()">提交</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
// API导入
|
||
import {
|
||
getContractListApi,
|
||
addContractApi,
|
||
editContractApi,
|
||
delContractApi,
|
||
updateStatus
|
||
} from '@/api/contract-manage/index'
|
||
import FileUpload from '@/components/ImageUpload'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 上传相关
|
||
uploadUrlTemp: '',
|
||
uploadUrl: process.env.VUE_APP_API_URL + '/file/upload',
|
||
|
||
// 表格数据
|
||
qualityLis: [],
|
||
total: 0,
|
||
|
||
// 查询参数
|
||
queryParams: {
|
||
contractName: '',
|
||
contractCode: '',
|
||
startTime: '',
|
||
endTime: '',
|
||
pageSize: 10,
|
||
pageNum: 1
|
||
},
|
||
|
||
// 日期选择
|
||
createTime: [],
|
||
|
||
// 表单数据
|
||
addAndEditForm: {
|
||
id: '',
|
||
contractName: '',
|
||
fileInfoList: [],
|
||
fileInfoTempList: [],
|
||
bmFileInfoList: []
|
||
},
|
||
|
||
// 表单验证规则
|
||
addAndEditFormRules: {
|
||
contractName: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
|
||
fileInfoList: [{ required: true, message: '请上传合同附件', trigger: 'blur' }]
|
||
},
|
||
|
||
// 弹窗相关
|
||
dialogVisibleSettlein: false,
|
||
settleinTitle: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getContractListData()
|
||
this.uploadUrlTemp = window.location.origin + '/iws/mall-view/contract-template-250224.docx'
|
||
},
|
||
methods: {
|
||
// 获取合同列表
|
||
async getContractListData() {
|
||
if (this.createTime.length > 0) {
|
||
this.queryParams.startTime = this.createTime[0]
|
||
this.queryParams.endTime = this.createTime[1]
|
||
}
|
||
try {
|
||
const { data: res } = await getContractListApi(this.queryParams)
|
||
this.qualityLis = res.rows
|
||
this.total = res.total
|
||
} catch (error) {
|
||
console.error('获取合同列表失败:', error)
|
||
}
|
||
},
|
||
|
||
// 重置表单
|
||
onReset() {
|
||
this.createTime = []
|
||
this.queryParams.startTime = ''
|
||
this.queryParams.endTime = ''
|
||
this.queryParams.pageNum = 1
|
||
this.queryParams.pageSize = 10
|
||
this.$refs.queryFormRef.resetFields()
|
||
this.getContractListData()
|
||
},
|
||
|
||
// 状态变更
|
||
async handleStatusChange(row) {
|
||
try {
|
||
const res = await updateStatus({ id: row.id, status: row.status })
|
||
if (res.code === 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '状态修改成功'
|
||
})
|
||
await this.getContractListData()
|
||
}
|
||
} catch (error) {
|
||
console.error('修改状态失败:', error)
|
||
// 失败时回滚状态
|
||
row.status = row.status === 1 ? 0 : 1
|
||
}
|
||
},
|
||
|
||
// 新增合同
|
||
addContract() {
|
||
this.settleinTitle = '合同新建'
|
||
this.dialogVisibleSettlein = true
|
||
},
|
||
|
||
// 编辑合同
|
||
onContract(row) {
|
||
this.addAndEditForm.id = row.id
|
||
this.addAndEditForm.contractName = row.contractName
|
||
this.settleinTitle = '合同修改'
|
||
this.dialogVisibleSettlein = true
|
||
},
|
||
|
||
// 关闭弹窗
|
||
onDialogClose() {
|
||
this.$refs.addAndEditFormRef.resetFields()
|
||
this.addAndEditForm.fileInfoTempList = []
|
||
this.addAndEditForm.fileInfoList = []
|
||
this.addAndEditForm.bmFileInfoList = []
|
||
this.addAndEditForm.id = ''
|
||
this.addAndEditForm.contractName = ''
|
||
},
|
||
handleFileUploadChange(files) {
|
||
if (!files) {
|
||
this.addAndEditForm.fileInfoTempList = []
|
||
} else {
|
||
const arr = files.split(',')
|
||
this.addAndEditForm.fileInfoTempList = arr.map((item) => {
|
||
const parts = item.split('/')
|
||
return {
|
||
fileName: parts[parts.length - 1],
|
||
fileUrl: item,
|
||
}
|
||
})
|
||
}
|
||
console.log('🚀 ~ file:', this.addAndEditForm.fileInfoTempList)
|
||
this.$refs.addAndEditFormRef.validateField('fileInfoList')
|
||
},
|
||
|
||
// 文件上传变更
|
||
onFileChange(fileList) {
|
||
this.addAndEditForm.fileInfoTempList = []
|
||
const origin = window.location.origin
|
||
|
||
const fileListTemp = fileList.map(e => {
|
||
let testUrl = ''
|
||
if (process.env.VUE_APP_API_URL === '/proxyApi') {
|
||
testUrl = e.url
|
||
} else {
|
||
testUrl = 'http://sgwpdm.ah.sgcc.com.cn/iws/ahbns/' + e.url
|
||
}
|
||
return {
|
||
fileName: e.name,
|
||
fileUrl: testUrl
|
||
}
|
||
})
|
||
|
||
this.addAndEditForm.fileInfoTempList.push(...fileListTemp)
|
||
},
|
||
|
||
// 提交表单
|
||
onSubmit() {
|
||
this.addAndEditForm.fileInfoList = this.addAndEditForm.fileInfoTempList
|
||
this.$refs.addAndEditFormRef.validate(async(valid) => {
|
||
if (valid) {
|
||
const SEN_API = this.settleinTitle === '合同修改' ? editContractApi : addContractApi
|
||
this.addAndEditForm.bmFileInfoList = this.addAndEditForm.fileInfoList
|
||
|
||
try {
|
||
const res = await SEN_API(this.addAndEditForm)
|
||
if (res.code === 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '提交成功'
|
||
})
|
||
this.dialogVisibleSettlein = false
|
||
this.getContractListData()
|
||
}
|
||
} catch (error) {
|
||
console.error('提交失败:', error)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 删除合同
|
||
async onDelete(id) {
|
||
try {
|
||
const res = await delContractApi({ id })
|
||
if (res.code === 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功'
|
||
})
|
||
this.getContractListData()
|
||
}
|
||
} catch (error) {
|
||
console.error('删除失败:', error)
|
||
}
|
||
},
|
||
|
||
// 取消操作
|
||
onCancel() {
|
||
this.dialogVisibleSettlein = false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep .upload-tip .el-form-item__label {
|
||
color: transparent;
|
||
}
|
||
|
||
.el-pagination {
|
||
justify-content: flex-end;
|
||
padding: 5px 0;
|
||
}
|
||
|
||
:deep .el-pagination.is-background .el-pager li.is-active {
|
||
background-color: #3cb4a6;
|
||
}
|
||
|
||
:deep .el-form--inline .el-form-item {
|
||
margin-right: 6px;
|
||
width: 95%;
|
||
}
|
||
|
||
.app-container-content {
|
||
:deep(.el-dialog) {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
margin: 0 !important;
|
||
position: absolute !important;
|
||
top: 50% !important;
|
||
left: 50% !important;
|
||
transform: translate(-50%, -50%) !important;
|
||
max-height: 100vh !important;
|
||
|
||
.el-dialog__body {
|
||
flex: 1;
|
||
overflow-y: scroll !important;
|
||
}
|
||
|
||
.dialog-content {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-overlay) {
|
||
z-index: 99 !important;
|
||
}
|
||
|
||
.search-box {
|
||
margin-bottom: 20px;
|
||
border-radius: 8px;
|
||
padding: 0;
|
||
::v-deep .el-card__body {
|
||
padding: 20px !important;
|
||
}
|
||
}
|
||
|
||
.el-form-item--small.el-form-item {
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
.content-box {
|
||
border-radius: 8px;
|
||
height: calc(100vh - 210px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
|
||
::v-deep .el-card__body {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
height: 100% !important;
|
||
padding: 20px;
|
||
}
|
||
|
||
.el-row:first-child {
|
||
margin-bottom: 16px;
|
||
flex-shrink: 0;
|
||
|
||
.el-col {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
}
|
||
|
||
.table-container {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
margin-bottom: 0;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.pagination-wrapper {
|
||
flex-shrink: 0;
|
||
padding-top: 6px;
|
||
margin-top: auto;
|
||
|
||
::v-deep .pagination-container {
|
||
padding: 0px 20px !important;
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-table {
|
||
// 启用斑马纹
|
||
&.el-table--striped .el-table__body {
|
||
tr.el-table__row--striped td {
|
||
background-color: #F6FBFA !important; // 浅紫色
|
||
}
|
||
}
|
||
|
||
.el-table__header {
|
||
background: #E9F0EE;
|
||
|
||
th {
|
||
background: #E9F0EE !important;
|
||
color: #606266;
|
||
font-weight: 600;
|
||
height: 50px;
|
||
}
|
||
}
|
||
|
||
&.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
|
||
background-color: #CCF1E9 !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|