compliance_management / ruoyi-ui · 提交

转到一个项目

作者 雷海东
提交 07f5c78583c72dc359601a26bad7c525961ae178 1 个父辈 47c2936f

合同变更

内嵌 并排对比
正在显示 3 个修改的文件 包含 626 行增加 和 368 行删除
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="合同编号" prop="contractno">
<el-input
v-model="queryParams.contractno"
... ... @@ -18,8 +25,16 @@
/>
</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-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>
... ... @@ -54,7 +69,8 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:contract:remove']"
>删除</el-button>
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
... ... @@ -64,46 +80,120 @@
size="mini"
@click="handleExport"
v-hasPermi="['system:contract:export']"
>导出</el-button>
>导出</el-button
>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="contractList" @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="contractList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="合同编号" align="center" prop="contractno" width="100"/>
<el-table-column label="合同名称" align="center" prop="contractName" width="200"/>
<el-table-column label="合同类型" align="center" prop="contractType" width="100"/>
<el-table-column label="合同金额" align="center" prop="contractAmount" width="100"/>
<el-table-column label="生效日期" align="center" prop="effectiveDate" width="100">
<el-table-column
label="合同编号"
align="center"
prop="contractno"
width="100"
/>
<el-table-column
label="合同名称"
align="center"
prop="contractName"
width="200"
/>
<el-table-column
label="合同类型"
align="center"
prop="contractType"
width="100"
/>
<el-table-column
label="合同金额"
align="center"
prop="contractAmount"
width="100"
/>
<el-table-column
label="生效日期"
align="center"
prop="effectiveDate"
width="100"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.effectiveDate, '{y}-{m}-{d}') }}</span>
<span>{{ parseTime(scope.row.effectiveDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="到期日期" align="center" prop="expirationDate" width="100">
<el-table-column
label="到期日期"
align="center"
prop="expirationDate"
width="100"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.expirationDate, '{y}-{m}-{d}') }}</span>
<span>{{ parseTime(scope.row.expirationDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="甲方" align="center" prop="partyA" width="200">
<template slot-scope="scope">
<a :href="scope.row.partyAAddress" target="_blank" style="color: blue;">{{ scope.row.partyA }}</a>
</template>
<a
:href="scope.row.partyAAddress"
target="_blank"
style="color: blue"
>{{ scope.row.partyA }}</a
>
</template>
</el-table-column>
<el-table-column label="乙方" align="center" prop="partyB" width="200">
<template slot-scope="scope">
<a :href="scope.row.partyBAddress" target="_blank" style="color: blue;">{{ scope.row.partyB }}</a>
</template>
<a
:href="scope.row.partyBAddress"
target="_blank"
style="color: blue"
>{{ scope.row.partyB }}</a
>
</template>
</el-table-column>
<el-table-column label="付款方式" align="center" prop="paymentMethod" width="200"/>
<el-table-column label="签订日期" align="center" prop="signingDate" width="100">
<el-table-column
label="付款方式"
align="center"
prop="paymentMethod"
width="200"
/>
<el-table-column
label="签订日期"
align="center"
prop="signingDate"
width="100"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.signingDate, '{y}-{m}-{d}') }}</span>
<span>{{ parseTime(scope.row.signingDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="标的物信息" align="center" prop="subjectInformation" width="200" />
<el-table-column label="附件" align="center" prop="attachments" width="100"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
<el-table-column
label="标的物信息"
align="center"
prop="subjectInformation"
width="200"
/>
<el-table-column
label="附件"
align="center"
prop="attachments"
width="100"
/>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
fixed="right"
width="200"
>
<template slot-scope="scope">
<el-button
type="text"
... ... @@ -111,7 +201,8 @@
icon="el-icon-tickets"
@click="handleFlowRecord(scope.row)"
v-hasPermi="['workflow:process:query']"
>详情</el-button>
>详情</el-button
>
<el-button
type="text"
size="mini"
... ... @@ -119,27 +210,37 @@
@click="handleDelete(scope.row)"
v-if="scope.row.finishTime"
v-hasPermi="['workflow:process:remove']"
>删除</el-button>
>删除</el-button
>
<el-button
type="text"
size="mini"
icon="el-icon-circle-close"
@click="handleStop(scope.row)"
v-hasPermi="['workflow:process:cancel']"
>取消</el-button>
>取消</el-button
>
<el-button
type="text"
size="mini"
icon="el-icon-refresh-right"
v-hasPermi="['workflow:process:start']"
@click="handleAgain(scope.row)"
>重新发起</el-button>
>重新发起</el-button
>
<el-button
type="text"
size="mini"
icon="el-icon-edit-outline"
@click="handleEdit(scope.row)"
>合同变更</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
... ... @@ -159,13 +260,22 @@
<el-input v-model="form.contractType" placeholder="请输入合同类型" />
</el-form-item>
<el-form-item label="合同金额" prop="contractAmount">
<el-input v-model="form.contractAmount" placeholder="请输入合同金额" />
<el-input
v-model="form.contractAmount"
placeholder="请输入合同金额"
/>
</el-form-item>
<el-form-item label="生效日期" prop="effectiveDate">
<el-date-picker v-model="form.effectiveDate" placeholder="请输入生效日期" />
<el-date-picker
v-model="form.effectiveDate"
placeholder="请输入生效日期"
/>
</el-form-item>
<el-form-item label="到期日期" prop="expirationDate">
<el-date-picker v-model="form.expirationDate" placeholder="请输入到期日期" />
<el-date-picker
v-model="form.expirationDate"
placeholder="请输入到期日期"
/>
</el-form-item>
<el-form-item label="甲方" prop="partyA">
<el-input v-model="form.partyA" placeholder="请输入甲方" />
... ... @@ -177,17 +287,25 @@
<el-input v-model="form.paymentMethod" placeholder="请输入付款方式" />
</el-form-item>
<el-form-item label="签订日期" prop="signingDate">
<el-date-picker v-model="form.signingDate" placeholder="请输入签订日期" />
<el-date-picker
v-model="form.signingDate"
placeholder="请输入签订日期"
/>
</el-form-item>
<el-form-item label="标的物信息" prop="subjectInformation">
<el-input v-model="form.subjectInformation" placeholder="请输入标的物信息" />
<el-input
v-model="form.subjectInformation"
placeholder="请输入标的物信息"
/>
</el-form-item>
<el-form-item label="附件" prop="attachments">
<el-input v-model="form.attachments" placeholder="请输入附件" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button :loading="buttonLoading" type="primary" @click="submitForm"
>确 定</el-button
>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
... ... @@ -195,12 +313,18 @@
</template>
<script>
import { listContract, getContract, delContract, addContract, updateContract } from "@/api/compliancemanagement/contract";
import FileUpload from '@/components/FileUpload';
import {
listContract,
getContract,
delContract,
addContract,
updateContract,
} from "@/api/compliancemanagement/contract";
import FileUpload from "@/components/FileUpload";
export default {
name: "Contract",
components: {
FileUpload
FileUpload,
},
data() {
return {
... ... @@ -243,49 +367,43 @@ export default {
},
// 表单参数
form: {},
// 表单校验
rules: {
contractno: [
{ required: true, message: "合同编号不能为空", trigger: "blur" }
{ required: true, message: "合同编号不能为空", trigger: "blur" },
],
contractName: [
{ required: true, message: "合同名称不能为空", trigger: "blur" }
{ required: true, message: "合同名称不能为空", trigger: "blur" },
],
contractType: [
{ required: true, message: "合同类型不能为空", trigger: "change" }
{ required: true, message: "合同类型不能为空", trigger: "change" },
],
contractAmount: [
{ required: true, message: "合同金额不能为空", trigger: "blur" }
{ required: true, message: "合同金额不能为空", trigger: "blur" },
],
effectiveDate: [
{ required: true, message: "生效日期不能为空", trigger: "blur" }
{ required: true, message: "生效日期不能为空", trigger: "blur" },
],
expirationDate: [
{ required: true, message: "到期日期不能为空", trigger: "blur" }
],
partyA: [
{ required: true, message: "甲方不能为空", trigger: "blur" }
],
partyB: [
{ required: true, message: "乙方不能为空", trigger: "blur" }
{ required: true, message: "到期日期不能为空", trigger: "blur" },
],
partyA: [{ required: true, message: "甲方不能为空", trigger: "blur" }],
partyB: [{ required: true, message: "乙方不能为空", trigger: "blur" }],
paymentMethod: [
{ required: true, message: "付款方式不能为空", trigger: "blur" }
{ required: true, message: "付款方式不能为空", trigger: "blur" },
],
signingDate: [
{ required: true, message: "签订日期不能为空", trigger: "blur" }
{ required: true, message: "签订日期不能为空", trigger: "blur" },
],
subjectInformation: [
{ required: true, message: "标的物信息不能为空", trigger: "blur" }
{ required: true, message: "标的物信息不能为空", trigger: "blur" },
],
attachments: [
{ required: true, message: "附件不能为空", trigger: "blur" }
{ required: true, message: "附件不能为空", trigger: "blur" },
],
id: [
{ required: true, message: "不能为空", trigger: "blur" }
]
}
id: [{ required: true, message: "不能为空", trigger: "blur" }],
},
};
},
created() {
... ... @@ -295,11 +413,11 @@ export default {
/** 查询【请填写功能名称】列表 */
getList() {
this.loading = true;
listContract(this.queryParams).then(response => {
listContract(this.queryParams).then((response) => {
this.contractList = response.rows;
this.total = response.total;
this.loading = false;
console.log(this.contractList)
console.log(this.contractList);
});
},
// 取消按钮
... ... @@ -322,7 +440,7 @@ export default {
signingDate: undefined,
subjectInformation: undefined,
attachments: undefined,
id: undefined
id: undefined,
};
this.resetForm("form");
},
... ... @@ -338,9 +456,9 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
// handleAdd() {
... ... @@ -362,25 +480,29 @@ export default {
// },
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
this.$refs["form"].validate((valid) => {
if (valid) {
this.buttonLoading = true;
if (this.form.id != null) {
updateContract(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
updateContract(this.form)
.then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
})
.finally(() => {
this.buttonLoading = false;
});
} else {
addContract(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
addContract(this.form)
.then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
})
.finally(() => {
this.buttonLoading = false;
});
}
}
});
... ... @@ -388,53 +510,64 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + ids + '"的数据项？').then(() => {
this.loading = true;
return delContract(ids);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
this.$modal
.confirm('是否确认删除【请填写功能名称】编号为"' + ids + '"的数据项？')
.then(() => {
this.loading = true;
return delContract(ids);
})
.then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {})
.finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/contract/export', {
...this.queryParams
}, `contract_${new Date().getTime()}.xlsx`)
this.download(
"system/contract/export",
{
...this.queryParams,
},
`contract_${new Date().getTime()}.xlsx`
);
},
/** 流程流转记录 */
handleFlowRecord(row) {
/** 流程流转记录 */
handleFlowRecord(row) {
this.$router.push({
path: '/workflow/process/detail/' + row.procInsId,
path: "/workflow/process/detail/" + row.procInsId,
query: {
processed: false
}
})
processed: false,
},
});
},
/** 取消流程申请 */
handleStop(row){
handleStop(row) {
const params = {
procInsId: row.procInsId
}
stopProcess(params).then( res => {
procInsId: row.procInsId,
};
stopProcess(params).then((res) => {
this.$modal.msgSuccess(res.msg);
this.getList();
});
},
handleAgain(row) {
this.$router.push({
path: '/workflow/process/start/' + row.deployId,
path: "/workflow/process/start/" + row.deployId,
query: {
definitionId: row.procDefId,
procInsId: row.procInsId
}
})
procInsId: row.procInsId,
},
});
console.log(row);
},
}
handleEdit(row){
}
},
};
</script>
... ...
<template>
<div>
<el-row :gutter="15">
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-col :span="24">
<el-form-item label="合同编号" prop="contractno">
<el-input v-model="formData.contractno" placeholder="请输入合同编号" clearable :style="{width: '50%'}">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="合同名称" prop="contractName">
<el-input v-model="formData.contractName" placeholder="请输入合同名称" clearable
:style="{width: '50%'}"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="合同类型" prop="contractType">
<el-input v-model="formData.contractType" placeholder="请输入合同类型" clearable
:style="{width: '50%'}"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="合同金额" prop="contractAmount">
<el-input v-model="formData.contractAmount" placeholder="请输入合同金额" clearable
:style="{width: '50%'}"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="生效日期" prop="effectiveDate">
<el-date-picker v-model="formData.effectiveDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{width: '50%'}" placeholder="请选择生效日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="到期日期" prop="expirationDate">
<el-date-picker v-model="formData.expirationDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{width: '50%'}" placeholder="请选择到期日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="甲方" prop="partyA">
<el-input v-model="formData.partyA" placeholder="请输入甲方" clearable :style="{width: '50%'}">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="甲方链接地址" prop="partyAAddress">
<el-input v-model="formData.partyAAddress" placeholder="请输入甲方链接地址" clearable :style="{width: '50%'}">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="乙方" prop="partyB">
<el-input v-model="formData.partyB" placeholder="请输入乙方" clearable :style="{width: '50%'}">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="乙方链接地址" prop="partyBAddress">
<el-input v-model="formData.partyBAddress" placeholder="请输入乙方链接地址" clearable :style="{width: '50%'}">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="付款方式" prop="paymentMethod">
<el-input v-model="formData.paymentMethod" placeholder="请输入付款方式" clearable
:style="{width: '50%'}"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="签订日期" prop="signingDate">
<el-date-picker v-model="formData.signingDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{width: '50%'}" placeholder="请选择签订日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="标的物信息" prop="subjectInformation">
<el-input v-model="formData.subjectInformation" placeholder="请输入标的物信息" clearable
:style="{width: '50%'}"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="attachments">
<!-- <el-input v-model="formData.attachments" placeholder="请输入附件" clearable :style="{width: '50%'}" /> -->
<el-upload
multiple
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
class="upload-file-uploader"
ref="fileUpload"
<div>
<el-row :gutter="15">
<el-form
ref="elForm"
:model="formData"
:rules="rules"
size="medium"
label-width="100px"
>
<el-col :span="24">
<el-form-item label="合同编号" prop="contractno">
<el-input
v-model="formData.contractno"
placeholder="请输入合同编号"
clearable
:style="{ width: '50%' }"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="合同名称" prop="contractName">
<el-input
v-model="formData.contractName"
placeholder="请输入合同名称"
clearable
:style="{ width: '50%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="合同类型" prop="contractType">
<el-input
v-model="formData.contractType"
placeholder="请输入合同类型"
clearable
:style="{ width: '50%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="合同金额" prop="contractAmount">
<el-input
v-model="formData.contractAmount"
placeholder="请输入合同金额"
clearable
:style="{ width: '50%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="生效日期" prop="effectiveDate">
<el-date-picker
v-model="formData.effectiveDate"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:style="{ width: '50%' }"
placeholder="请选择生效日期"
clearable
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="到期日期" prop="expirationDate">
<el-date-picker
v-model="formData.expirationDate"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:style="{ width: '50%' }"
placeholder="请选择到期日期"
clearable
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="甲方" prop="partyA">
<el-input
v-model="formData.partyA"
placeholder="请输入甲方"
clearable
:style="{ width: '50%' }"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="甲方链接地址" prop="partyAAddress">
<el-input
v-model="formData.partyAAddress"
placeholder="请输入甲方链接地址"
clearable
:style="{ width: '50%' }"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="乙方" prop="partyB">
<el-input
v-model="formData.partyB"
placeholder="请输入乙方"
clearable
:style="{ width: '50%' }"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="乙方链接地址" prop="partyBAddress">
<el-input
v-model="formData.partyBAddress"
placeholder="请输入乙方链接地址"
clearable
:style="{ width: '50%' }"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="付款方式" prop="paymentMethod">
<el-input
v-model="formData.paymentMethod"
placeholder="请输入付款方式"
clearable
:style="{ width: '50%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="签订日期" prop="signingDate">
<el-date-picker
v-model="formData.signingDate"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:style="{ width: '50%' }"
placeholder="请选择签订日期"
clearable
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="标的物信息" prop="subjectInformation">
<el-input
v-model="formData.subjectInformation"
placeholder="请输入标的物信息"
clearable
:style="{ width: '50%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="attachments">
<!-- <el-input v-model="formData.attachments" placeholder="请输入附件" clearable :style="{width: '50%'}" /> -->
<el-upload
multiple
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
class="upload-file-uploader"
ref="fileUpload"
>
<!-- :auto-upload="false" -->
<!-- 上传按钮 -->
<el-button size="mini" type="primary">选取文件</el-button>
<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip">
请上传
<template v-if="fileSize">
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
</template>
<template v-if="fileType">
格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
</template>
的文件
</div>
</el-upload>
<!-- 文件列表 -->
<transition-group
class="upload-file-list el-upload-list el-upload-list--text"
name="el-fade-in-linear"
tag="ul"
>
<li
:key="file.url"
class="el-upload-list__item ele-upload-list__item-content"
v-for="(file, index) in fileList"
>
<el-link
:href="`${file.url}`"
:underline="false"
target="_blank"
>
<!-- :auto-upload="false" -->
<!-- 上传按钮 -->
<el-button size="mini" type="primary">选取文件</el-button>
<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
的文件
</div>
</el-upload>
<!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
<el-link :href="`${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
</div>
</li>
</transition-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item size="large">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
</template>
<span class="el-icon-document">
{{ getFileName(file.name) }}
</span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-link
:underline="false"
@click="handleDelete(index)"
type="danger"
>删除</el-link
>
</div>
</li>
</transition-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item size="large">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
</template>
<script>
import { listContract, getContract, delContract, addAndStart, updateContract } from "@/api/compliancemanagement/contract";
import { getToken } from "@/utils/auth";
export default {
components: {},
props: {
// 数量限制
import {
listContract,
getContract,
delContract,
addAndStart,
updateContract,
} from "@/api/compliancemanagement/contract";
import { getToken } from "@/utils/auth";
export default {
components: {},
props: {
// 数量限制
limit: {
type: Number,
default: 1,
},
// 大小限制(MB)
// 大小限制(MB)
fileSize: {
type: Number,
default: 5,
... ... @@ -153,144 +251,168 @@
type: Array,
default: () => ["pdf"],
},
},
data() {
const validatAttachments = (rule, value, callback) => {
console.log('this.fileList',this.fileList)
if (this.fileList.length <=0 ) {
},
data() {
const validatAttachments = (rule, value, callback) => {
console.log("this.fileList", this.fileList);
if (this.fileList.length <= 0) {
callback(new Error("请上传附件！"));
} else {
callback();
}
};
return {
fileList:[],
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
headers: {
Authorization: "Bearer " + getToken(),
},
uploadList: [],
number: 0,
procDefId:null,
formData: {
contractno: undefined,
contractName: undefined,
contractType: undefined,
contractAmount: undefined,
effectiveDate: null,
expirationDate: null,
partyA: undefined,
partyAAddress:undefined,
partyB: undefined,
partyBAddress:undefined,
paymentMethod: undefined,
signingDate: null,
subjectInformation: undefined,
attachments: undefined,
},
rules: {
contractno: [{
return {
fileList: [],
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
headers: {
Authorization: "Bearer " + getToken(),
},
uploadList: [],
number: 0,
procDefId: null,
formData: {
contractno: undefined,
contractName: undefined,
contractType: undefined,
contractAmount: undefined,
effectiveDate: null,
expirationDate: null,
partyA: undefined,
partyAAddress: undefined,
partyB: undefined,
partyBAddress: undefined,
paymentMethod: undefined,
signingDate: null,
subjectInformation: undefined,
attachments: undefined,
},
rules: {
contractno: [
{
required: true,
message: '请输入合同编号',
trigger: 'blur'
}],
contractName: [{
message: "请输入合同编号",
trigger: "blur",
},
],
contractName: [
{
required: true,
message: '请输入合同名称',
trigger: 'blur'
}],
contractType: [{
message: "请输入合同名称",
trigger: "blur",
},
],
contractType: [
{
required: true,
message: '请输入合同类型',
trigger: 'blur'
}],
contractAmount: [{
message: "请输入合同类型",
trigger: "blur",
},
],
contractAmount: [
{
required: true,
message: '请输入合同金额',
trigger: 'blur'
}],
effectiveDate: [{
message: "请输入合同金额",
trigger: "blur",
},
],
effectiveDate: [
{
required: true,
message: '请选择生效日期',
trigger: 'change'
}],
expirationDate: [{
message: "请选择生效日期",
trigger: "change",
},
],
expirationDate: [
{
required: true,
message: '请选择到期日期',
trigger: 'change'
}],
partyA: [{
message: "请选择到期日期",
trigger: "change",
},
],
partyA: [
{
required: true,
message: '请输入甲方',
trigger: 'blur'
}],
partyAAddress: [{
message: "请输入甲方",
trigger: "blur",
},
],
partyAAddress: [
{
required: true,
message: '请输入甲方链接',
trigger: 'blur'
}],
partyB: [{
message: "请输入甲方链接",
trigger: "blur",
},
],
partyB: [
{
required: true,
message: '请输入乙方',
trigger: 'blur'
}],
partyBAddress: [{
message: "请输入乙方",
trigger: "blur",
},
],
partyBAddress: [
{
required: true,
message: '请输入乙方链接',
trigger: 'blur'
}],
paymentMethod: [
{required: true, message: '请输入付款方式',trigger: 'blur'}
],
signingDate: [
{required: true,message: '请选择签订日期',trigger: 'change'}
],
subjectInformation: [
{required: true,message: '请输入标的物信息',trigger: 'blur'}
],
attachments: [
message: "请输入乙方链接",
trigger: "blur",
},
],
paymentMethod: [
{ required: true, message: "请输入付款方式", trigger: "blur" },
],
signingDate: [
{ required: true, message: "请选择签订日期", trigger: "change" },
],
subjectInformation: [
{ required: true, message: "请输入标的物信息", trigger: "blur" },
],
attachments: [
// {
// required: true,
// message: '请输入附件',
// trigger: 'blur'
// },
{ required: true, validator: validatAttachments, trigger: "blur" }],
},
}
},
computed: {},
watch: {},
created() {
},
mounted() {},
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
{ required: true, validator: validatAttachments, trigger: "blur" },
],
},
};
},
computed: {},
watch: {},
created() {
},
mounted() {},
methods: {
submitForm() {
this.$refs["elForm"].validate((valid) => {
// console.log(this.formData)
if (valid) {
console.log('===',this.formData)
this.formData.attachments = this.fileList[0].name
// return
addAndStart(this.formData).then(response => {
this.$modal.msgSuccess("流程启动成功");
this.$router.push({ path: '/contract/compliancemanagement/contractmanagement/contract'});
})
if (valid) {
console.log("===", this.formData);
this.formData.attachments = this.fileList[0].name;
// return
addAndStart(this.formData).then((response) => {
this.$modal.msgSuccess("流程启动成功");
this.$router.push({
path: "/contract/compliancemanagement/contractmanagement/contract",
});
});
}
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
// 上传前校检格式和大小
});
},
resetForm() {
this.$refs["elForm"].resetFields();
},
// 上传前校检格式和大小
handleBeforeUpload(file) {
// 校检文件类型
if (this.fileType) {
const fileName = file.name.split('.');
const fileName = file.name.split(".");
const fileExt = fileName[fileName.length - 1];
const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
if (!isTypeOk) {
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
this.$modal.msgError(
`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
);
return false;
}
}
... ... @@ -311,7 +433,7 @@
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
},
submitUpload() {
this.$refs.upload.submit();
this.$refs.upload.submit();
},
// 上传失败
handleUploadError(err) {
... ... @@ -320,9 +442,13 @@
},
// 上传成功回调
handleUploadSuccess(res, file) {
console.log('handleUploadSuccess',res)
console.log("handleUploadSuccess", res);
if (res.code === 200) {
this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
this.uploadList.push({
name: res.data.fileName,
url: res.data.url,
ossId: res.data.ossId,
});
this.uploadedSuccessfully();
} else {
this.number--;
... ... @@ -367,10 +493,9 @@
}
return strs != "" ? strs.substr(0, strs.length - 1) : "";
},
}
}
</script>
},
};
</script>
<style>
</style>
</style>
 
\ No newline at end of file
... ...
... ... @@ -249,7 +249,7 @@ export default {
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/common/uploads",
urlhead: "http://joycart.zgftlm.com",
urlhead: process.env.VUE_APP_BASE_API,
fileList: [],
dialogVisible: false,
dialogImageUrl: "",
... ...